12月 2008 のブログ記事

このところは、PhoneGapというHTML+JavascriptでiPhoneアプリを作れるものにハマっています。

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関数として実装してみます。
お楽しみに。

ちょっと前に一部の界隈で話題になったHTML+JavascriptでiPhoneアプリ作成を始めてみた。

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

PhoneGap
QuickConnect

というのが良さげだ。

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

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



上記の@ITの記事では、簡易RADとしてのDashCodeを利用してまずHTMLを作成しているが、
この方法だと、iPhoneSDKを十分に使いこなせなさそうだったので、
Xcodeで最初から作るという前提で、
不定期に記事を書いていきます。



まずはXcodeをインストールしてください。ちなみにMacOSX10.5(Leopard)じゃないと後述のiPhoneSDKがインストールできないので、違う人はまずOSを買ってきましょう(^-^;

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



はい、次。iPhoneSDKをインストールします。

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



じゃ、ここでPhoneGapを登場させます。
ダウンロードして解凍してできたディレクトリの中に「iPhone」というディレクトリがありますので、
その中にXcode用のプロジェクトファイルがあります。
PhoneGap.xcodeproj」を開きます。
もうひとつプロジェクトファイルがありましたが、
筆者の環境ではこちらはなぜか開きませんでした。

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

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



あとは、index.htmlに改良を加えていけばいいわけですが、
いつものHTMLアプリケーションの感覚で、

<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のクラスにアクセスできるのかをやってみますねー。
あと、画像のない記事ですまぬ。

オープンソースに関する知識では日本で屈指の知識を有するであろう「moongift」運営者中津川篤司さんのレビュー記事を読んで、「理想のCMS」と方々で言われているCMS「Concrete5」をインストールしてみた。

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

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

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

Windows環境でサイト構築・PHP・Perl(CGIもmod_perlも)なんかのテストを行うのに、
最近は仮想環境なんかを使うのも流行っているが、
やっぱり一番手軽なのは、XAMPPなわけで。
ネットワークの設定なんかもラクだからね。

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

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

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

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

じゃあどうするのか、

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を利用するより平易で、
GUIはHTMLで代替できる。
(たとえば複数ファイルをまとめてリネームするツールなど)


では、XAMPPをインストールしよう。

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はそのままの設定では送信できないことが多い。

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

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