HTMLでGUIを組み上げていくわけですが、
画像などを自分で用意し、CSSや<img>タグを駆使すれば、
リッチなGUIが簡単に完成します。

Javascriptで実装されている機能はほぼ完璧に使えますので、
煩わしいObjective-Cのソースを書くという作業は、相当数少なくなります。

速度はどうかなと思ったんですが、

SafariはPCの世界でも評判の速度。
そのパワーを借りるわけですから、
心配するほど遅いことはありません。

驚くべきライブラリです。
この前の記事にも書いていますが、
MITライセンスってとこがまたいいですよね！

、、、とまぁここまで散々褒めちぎっていたわけですが、
たとえばファイルの入出力などは、Javascriptの範疇じゃないので、
Objective-Cの力を借りたくなるのです。

さてどうしたものか、、、調べたところ、
PhoneGapのJavascriptAPIを拡張する方法が分かりましたので、書いておきます。
ある程度Objective-CとJavascriptの知識が必要ですので、
そのあたりは心してごらんください。

PhoneGapでは、JavascriptAPIを実行したとき、
gap.js（PhoneGapのJavascriptAPIファイル）が、

「gap:」を文頭につけたURLがリクエストされたものとしてWEBViewオブジェクトへリクエストし、
WEBViewは、受け取ったURLの頭が「gap:」だったら、
通常のURLリクエストとは別の動作（ここがAPIの実働部分）をするように構築されているようです。

PhoneGapにデフォルトで実装されている関数「Device.soundPlay()」を例に話をすすめましょう。

gap.jsを開くと、
Device.soundPlay関数の部分を見ると、

Device.exec()関数というのが実行されているのが分かります。
この関数が、WEBViewへのリクエストを出してくれる関数です。
そしてこの関数への引数は、「gap:sound:鳴らしたい音のファイル名」となっています。
これがWEBviewへ渡すリクエストです。

このリクエストがどのObjective-Cのメソッドで受け取られるかというと、
「GlassAppDelegate.m」の中の、
「- (BOOL)webView:(UIWebView *)theWebView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType」というメソッドです。
このメソッドの中で、渡されたURLを「:」で分割し、配列「parts」へ格納されます。

NSArray * parts = [urlString componentsSeparatedByString:@":"];

▲この部分ですね。

このpartsのインデックス0が「gap」なら通常のHTTPリクエスト以外の処理が行われるわけです。

//LOCATION
if([(NSString *)[parts objectAtIndex:1] isEqualToString:@"getloc"]){

▲この部分以降は、partsのインデックス1の値によって、機能を切り替えるわけです。

soundPlay()関数の場合、「gap:sound:ファイル名」というURLが渡されるので、
partsのインデックス1が「sound」だったときに、指定した音を鳴らす機能を実装してやっているわけです。

else if ([(NSString *)[parts objectAtIndex:1] isEqualToString:@"sound"]) {

// Split the Sound file
NSString *ef = (NSString *)[parts objectAtIndex:2];
NSArray *soundFile = [ef componentsSeparatedByString:@"."];

NSString *file = (NSString *)[soundFile objectAtIndex:0];
NSString *ext = (NSString *)[soundFile objectAtIndex:1];
// Some TODO’s here
// Test to see if the file/ext is IN the bundle
// Cleanup any memory that may not be caught
sound = [[Sound alloc] initWithContentsOfFile:[mainBundle pathForResource:file ofType:ext]];
[sound play];
}

▲それがここですね。
まず、ここで勘のいい人は気付いていると思いますが、
「gap:呼び出したい機能:疑似的な引数1:疑似的な引数2:疑似的な引数3…」
とリクエストするURLの2番目の「:」以降は、
「:」区切りで疑似的な引数を与えることができるのです。
soundPlayの場合は、最初の疑似的な引数へ鳴らしたい音ファイルのファイル名を渡しています。
上記のソースでは、このファイルを「Audio Queue Services」へ登録して鳴らしているわけです。
（Audio Queue Servicesの説明は、cocoaプログラムの作成方法をごらんください）

ざっと説明するとこんな感じです。はいめっちゃ分かりづらい！！笑）
しかし、これくらい読めないといいアプリは作れない！ってことで、
そういう意見はスルーします！

さて、さっきのsoundPlayのAPI、
Objective-Cのソース内では、この機能が呼び出される度に、
「Audio Queue Services」へファイルが登録され、
そしてそのファイルが再生されて終わり。。。という仕様になっています。
これはこれでいいのですが、なんか効率悪いですよね。。。

ってことで次回は、

音ファイルの登録と再生を別のJavascriptAPI関数として実装してみます。
お楽しみに。

まずはこの辺（＠ITの記事）を参考に・・・。
いくつかのライブラリが出ているようだ。。。

・PhoneGap
・QuickConnect

というのが良さげだ。

が、しかしQuickConnectはライセンスがLGPL。。。
これはAppStoreで販売・配布しようと思うと制限がありすぎ(>_<;)

一方のPhoneGapはMITライセンス。
これなら大丈夫！
ということでPhoneGap採用！

XcodeはOSのCDの中にあります。

だいたいここまでで、1時間くらい要します。XcodeとiPhoneSDKのアップデートはちょくちょくチェックしておいたほうがいいです。
筆者は、iPhoneSDKをアップデートしていなかったがために、PhoneGapのサンプルがビルドできないという「症状」に4時間近く悩まされて今いました(^-^;

公式のwikiに従って、下準備をします。

ここで一回テストでビルドしてiPhoneシミュレータを走らせてみましょう。
Hello!Wordld!が表示されれば、準備完了！

<a href="javascript:;" onclick="test();">TEST</a><br />
<div id="SET"></div>
<script type="text/javascript">
function test(){
document.getElementById(’SET’).innerHTML = ‘test!!!’;
}
</script>

って書いたら、大変なことになりました。
こまかい説明はしませんが、
<a>タグを書くとiPhoneシミュレータが落ちますんで使わないほうがいいでしょう。
テキストにonclick属性などをつけたい場合は、
<span>タグを利用します。

画像は、Xcode上で、Resourceディレクトリ内にコピーしてやる事で利用できるようになります。
あくまでコピーです。デフォルトの状態でドロップすると参照になってしまいます。
これでは利用できないので注意してください。
またフォルダの利用は不可です。
かならずindex.htmlファイルと同階層に置く必要があります。
おそらく画像だけでなくJS・CSSファイルもだと思われます。（現時点で未確認）

画像の呼び出しは通常通り、
<img src="ファイル名" />
です。
画像にonclick属性を設定するときは、<a>タグを利用せず、<img>タグの属性とします。

ということで大体全体像がつかめたところで眠くなったので終了。。。zzz

次回はObjective-Cのクラスにアクセスできるのかをやってみますねー。
あと、画像のない記事ですまぬ。

まず、インストール。
筆者の環境では、インストーラーを走らせるだけで、インストール作業は完了したものの、日本語の表示に問題が発生。
調べたところ、DBへ正しく日本語が保存されていなかったので、MySQLへの接続の問題と判断。
drivers\adodb-mysql.inc.phpの371行目に
mysql_query( "SET NAMES utf8");
を追加。
以上で、文字化けの問題はクリアしました。

簡単に使ってみました。
コンテンツの管理という意味では、Adobe「Contribute」に近い印象を受けました。
WEBアプリケーションでこういったインターフェイスを実装しているのは衝撃。
これまで、なかなか一般の現場に任せられなかった、
いわゆるブログ以外のコンテンツ管理も任せられそうだ。
また、オープンソースで使いやすさと安定度を両立した（ブログ以外の）CMSはなかったが、
これは使いやすく安定もしている（ように見える。今のところ）
そういう意味で、個人的には、企業サイト構築を安価に済ませたい場合に利用したい。

ということで、個人的に応援している東海地区地元プロレス団体である「でら名古屋プロレス」「DEP」の2団体の応援コンテンツや動画コンテンツの構築に使ってみたいと思う。

普通の使い方をしたい方はこちらを参考に。

多くの説明サイトでは、インストーラーを使うことを薦めているわけだが、
個人的にそれはイヤだ！！！

・インストーラー使っちゃうと一つのサイトしかテストできなくなる。

というのが大きな理由だ。

じゃあどうするのか、

XAMPPは、ZIP形式でダウンロードして、
その中身をどこかのドライブのルートに置いて使えば、
基本的な動作は、インストールや設定なしに動く。

ほぉほぉ。じゃあCドライブのルートにおいて使えばいいのか。
とも思うが、いくつかのサイトを状況に応じて増やしたり減らしたりするのには向いてないし、
何よりCのルートに何かを置くのは、何か抵抗ある。

ということで、私は、必要なサイト分仮想ドライブを作成し、
そこへXAMPPを入れて使っている。
不要になったサイトは、仮想ドライブの中身をすべて消去し、
仮想ドライブを解除するだけ。
レジストリも仮想ドライブを作成するソフトの分だけ汚れるだけだ。
（結局汚れるんかい！という突っ込みは勘弁）

・XAMPPをダウンロード
http://www.apachefriends.org/jp/xampp-windows.html
こちらのページの
「XAMPP Windows版[バージョン番号]」の「ZIP」版をダウンロードする。
当然ながら、バージョン番号はそのときによって異なる。

・仮想ドライブ作成ソフトをダウンロード
仮想ドライブとは、
たとえば「C:\vituralDrives\a」というフォルダがあるとして、
このフォルダを仮想的に「X:\」だったり「Y:\」だったりと、
あたかもHDDなどのようなドライブのルートとして利用することだ。
私は、仮想ドライブ作成ソフトに「Visual Subst」というソフトを利用している。
http://www.forest.impress.co.jp/lib/sys/hardcust/virtualdrv/visualsubst.html
本記事の説明もこのソフトを利用する前提で進めていきます。

材料はこれだけだ。

仮想ドライブ作成ソフトのインストールについては割愛する。
各ソフトの説明書に従ってインストールを完了させておいてください。

まずはどのフォルダを仮想ドライブにするか決めよう。

本記事では「C:\VirtualDrives\1\」というフォルダを「K:\」というドライブとして利用するものとして話を進める。

では、そのフォルダを作成しよう。

▲フォルダを作成するのに、マイコンピュータを開くと思うが、
この時点ではまだ「K」ドライブは存在しない。

こんな感じにフォルダを作成。
いくらなんでもフォルダの作り方くらい知っているとは思うが、
上記の写真のように右クリックをしていくとフォルダが作れる。

Visual Substを起動すると▲このような画面になる。
筆者の環境ではすでに二つの仮想ドライブが作成されているため、
上部の大きな枠の中に二つのアイコンがある。
新規に起動した場合は、空欄のはずだ。

仮想ドライブを作成後、そのドライブを消去したい場合は、
該当の仮想ドライブを選択し、左下の「×」を押すことで削除できる。

仮想ドライブの作成方法について。

まず上の写真の赤枠の部分に作成したいドライブ名を選択する。
A～Xまでのドライブを作成できる。
（ただし、通常C:は作れない。またHDDを増設している場合などは、
　そのドライブと同名のドライブは作成できない）
今回は、「K:」を作成するので「K:」を選択。

次に、仮想ドライブにしたいフォルダを選択する。
上の写真の紺色の枠の虫眼鏡ボタンをクリックすると、
フォルダ選択ダイアログが表示されるので、
先ほど作成した、「C:\VirtualDrives\1\」を選択する。

上の写真のオレンジ色の枠の部分のチェックを入れておくと、
次回Windowsがスタートした場合も自動で仮想ドライブが作成される。
Windowsをログアウトするまでの一時的な利用で仮想ドライブを作成したい場合は、
チェックを外す。通常はつけておいたほうが楽だろう。

最後に上の写真の黄緑の枠の「＋」ボタンをクリックしたら仮想ドライブ作成完了だ。

画面はこのように切り替わり、上の枠に「K：」の項目が増え、
その下に、そのドライブがどのフォルダのことを指すのか説明されている。

改めてマイコンピュータを開くとK:が作成されている。

ためしにこのドライブ中に適当なファイルを入れると、
同じファイルがC:\VirtualDrives\1\の中にもできているはずだ。

仮想ドライブは、テストサイト・環境が必要な分作成する。

ちなみに筆者はひとつだけ、常に仮想ドライブを作成しておき、
その中でPHPなりPerlなりで簡単なツールを作成・利用するのに利用している。
分かりにくいWSHを利用するより平易で、
ＧＵＩはHTMLで代替できる。
（たとえば複数ファイルをまとめてリネームするツールなど）

XAMPPサイトからダウンロードしたZIPファイルを解凍すると、
「XAMPP」というフォルダが作成されるので、
（解凍ソフトによっては、1階層上にフォルダが作成される場合がある）
そのフォルダをK:\へコピーする。

K:\xampp\というフォルダへxampp-control.exeというアプリケーションができるように
コピーできていれば問題なしだ。

K:\xampp\xampp-control.exeを起動する。

こんなウインドウが起動されるので、
上の写真で赤枠の部分の「Start」といボタン2つをクリックする。

しばらく待つと「Apache」と「MySql」という項目の横に「Running」と表示される。
こうなればサーバーが起動された状態だ。
サーバーを終了したい場合は、「Running」と表示されている
横の「Stop」ボタン2つをクリックするとサーバーが終了し、
ウインドウは初期状態に戻ります。

なお。このウインドウを終了したい場合は、×ボタンではなく「Exit」をクリックします。

「Running」が二つ表示された状態で、
WEBブラウザから「http://localhost/」へアクセスして

こんな画面が表示されたらインストール完了です！お疲れ様です。

K:\xampp\htdocs\がサイトルートディレクトリになっていますので、
この中にテストサイトを構築していけば、
簡単にローカルPCでテスト環境が作成できます。

前述の通り、XAMPPの自動インストール機能を使えばもっと簡単にテストできますが、
通常サイト構築の業務において、サイトがひとつで足りることはまず有り得ません。
この方法でいくつもテストサイトを作っておけば、
業務がすいすい進むことうけあい。（？？）

なお、上記のWEB画面の「日本語」をクリックすると、
「PHPMyAdmin」などの便利な管理ツールがあるので、
そちらも活用しよう！

また、他の仮想ドライブのサーバーを起動する場合は、
K:\のサーバーを起動したまま、
別のドライブのサーバーを起動すると、
コンフリクトを起こして正常に動作しないので、
必ず、サーバーを停止する癖をつけよう！

ってことで分かりづらい説明に最後までお付き合いありがとう。

ところでWEBアプリケーションを作成する上で、
PHPやPerlからのメール送信って絶対必要だよね？
XAMPPはそのままの設定では送信できないことが多い。

ちょっと面倒な手順を踏んでもいい場合は、
こちらが超参考になる。

もうちょっとラクにならない？って人は、次回の記事で説明しますので、お待ちを。

本家なでしこを使い倒していますが、
実はメール送信をしたことがないので、
確認はできませんが、
Filemaker版だからゆえの不安定要素なのかな？？
安定するなら安定を希望します。

メール送受信。結構需要が高いらしく、
多くの人に使ってもらっているようです。
せっかく使ってもらってるならより安定したものを使ってもらいたい。

なでしこのメール送受信命令を使った版と、
ソケットを使って自作した版の二つのものを用意しようか検討中。

・ActiveX使えるといいなぁ。。。そうすれば、PerlスクリプトをActiveXに変換する方法があるので、簡単になでしこの機能拡張ができるのになぁ。。。
・Unicodeに対応してほしいなぁ。。。Delphi2009/C++Builder2009で対応らしいので対応してほしいなぁ。。。
・GUIエディタがもう少し充実してほしいなぁ。ちょっと再編集がしづらい。GUIアプリは、TTS・C#・Delphiに逃げてしまう～～～(>_<)

こんな感じかな。まぁ単なるわがままだけど。

ダウンロードはこちらから>>

ベータ公開として、他のカスタム関数同様カンパウェアとします。

ファイルメーカーでHTML作成をされている方などいらっしゃると思いますが、
そういった方に非常に有用であろうかと思います。
（HTMLに限らずテキストであれば処理可能です。）

とりあえず、みなさん、お試しください。<(_ _)>

詳細は、同梱の「Readme.doc」（MS-WORD文書）をご覧下さい。

なお、ご利用にあたり、Smartyの知識が必要となります。
こちらのサイトなどをご覧になりながらのご利用をオススメします。

なお、このカスタム関数群に関する一切のサポートはいたしません。
ご了承ください。

今後、ダウンロードやファイル列挙、パーミッション操作も対応の予定です。

完全に試験公開なので、利用価値はそれほど高くないですが、
ご利用いただけたらと思います。

ダウンロード>>

とりあえず、ベータ版での公開とし、
料金体系は支払い強制のないカンパウェアとします。
詳しくは、同梱のReadme.docをご覧下さい。

ダウンロードはこちら>>

すべてのメール送受信操作はカスタム関数にて実装しています。
必要に応じて、カスタマイズなどをして利用してください。
サンプルアプリケーションデータベースも同梱しています。

利用方法など詳細は、同梱のReadme.docをご覧下さい。
（Readme.docはMS-WORD形式です。お持ちでない方は、OpenOffice.orgなどをご利用ください。）

なお、この関数群に関してはすべてのサポートをいたしません。
自己の責任においてご利用ください。