iPhoneのサイトをローカルで作る、の巻

特に何か面白い日常もないので暇つぶしといってはなんですが、「知ってる人にはつまらない、知らない人には少しだけ役に立ちそうなネタ」を書いてみます。

iPhoneやiPod touchに最適化されたサイトといっても、基本的にはHTML+CSS+JavaScriptでできるので、ローカルでセコセコ作ってSafari 3で確認すれば問題はないのですが、そこはiPhoneやtouchの実機で確認しないことには動作しないものもあったりします。

AppleのDeveloperサイトには、無料でも利用できる「iPhone SDK」なんつーものがあって、開発者のためのiPhoneエミュレータなどが同梱されてますが、Mac用ですしダウンロードしてインストールするにも容量もでかい。公式のもの以外にもエミュレータの類はサードパーティからリリースされていますけど、どうせ確認するなら実機でやった方が良いわけで。

かといって、いちいちFTPでサーバにアップロードして3Gや無線を使ってそこに繋いで…というのは面倒くさい。そこで実機を使って確認はするけど、もっと楽ちんにできないものかということで、OS Xを中心に無線LANさえあればできる方法を以下にあげておきますね。

無線LANを使ったもっとも単純な方法

OS Xにはもともと「パーソナルWeb共有」なんて機能がついてまして、いわゆるWebサーバとして有名な「Apache」が中に入っています。つまり、特になんかサーバ側で他のプログラムを動かすわけではなく単純に最適化されたサイトを作りたければ、その機能を有効にしてユーザーのホームディレクトリにある「サイト(Sites)」の中に任意のディレクトリなどを作って放り込めば準備完了。

あとは、指定されたローカルのアドレス(http://192.168.0.xxx/~userid/ とか)をiPhoneなどのSafariに入力すれば、それで表示の確認なんかはできてしまうというわけですね。 

iPhone OS 2.0にしか適用されないCSSとか、JavaScriptで生成される要素なんかも、外部のデータを引っ張ってどうこうしない限りは、別にクライアント側の問題なのでApacheさえ動いていれば良いでしょう。

どういうことができるか知りたい人は、AppleのDeveloperサイトのドキュメントを熟読してください。ただし、英語です。

もう少し複雑なサイトを作る方法

サーバと絡めて何かしたいとか、っていう場合は上記の方法ではちょっとアレなので、ローカルに別の環境を作っておくと思い通りのことができるでしょう。

自分のマシンに何にも当たり障りなく「Apache+PHP+MySQL(SQLite)」みたいな環境を用意するには、「MAMP」や「XAMPP」といった1クリックインストールで開発環境が構築できてしまうアプリケーションを入れてしまうのが一番簡単。XAMPPは、Windows用だけでなくOS X用もあったりします。

Ruby On Railsの環境が必要だったら「Locomotive」あたりが簡単です。OS X Leopardからは標準でRailsの環境は入ってるので、それを使ってもよいかもですね。Windowsの方は何かあるはずなので探してみましょう…。

ちゃんとした環境が必要な方は「MacPorts」とか「Fink」あたりで頑張ってください。そこまでやれる人は今さら説明の必要もないでしょうからここで終了(笑)。

出先でも作業するための方法

ノートPCを持ち歩いて、いつでもどこでも仕事をしてやろうという仕事熱心な方は、上記の方法で環境を整えておけばあとはマシンに内蔵されているであろう機能を使って、いつでもどこでも自分中心のローカルエリアのネットワークを作ってしまえば、好きなだけ開発に従事することができます(笑)。

俗に「アドホック・ネットワーク」って呼ばれているものですが、たとえ周囲にアクセスポイントがなくても無線LANやBluetoothなんかを使って自分自身がアクセスポイントになってしまえばいいわけです。そうすれば、どこにいても自分のノートPCに直接接続してマシンの中で動いてるサーバで確認できるということですね。

いちいち外部のホスティングサーバを使ってFTPなんかでやりとりしていると、パケ代の問題はないにしても「3Gに繋がらないよー」とかありますからね(笑)。今回の謎の出張でもiPhone対応のアレコレをちょっとやらなくてはいけなかったので、あんなとこやこんなとこでMAMPを入れたMacBookにアドホックで接続して作業は終わりました。あー、よかったよかった。

アドホック・ネットワークの作り方

あー、よかった、で終わっても何なのでやり方を。
NetShareのネタを書いた時は文字だけだったので、今回はキャプチャ入りで…(OS Xだけですけど 笑)。

adhoc-001

とにもかくにも新しいネットワークを作らないといけないので、システム環境設定の「ネットワーク」でAirMacを選んで「ネットワークを作成」をクリックします。

adhoc-002
adhoc-003

ネットワーク名を任意で決めて、必要であればパスワードでアクセスを制限しましょう。で、手動(手入力)でIPアドレスを入力します。これだけでアドホック・ネットワークは完成です。なんてこたありません。

adhoc-004 adhoc-005

先ほど作ったアドホック・ネットワークにiPhoneから接続します。
Wi-Fiを見ると作ったネットワークが表示されてるはずなので接続します。で、iPhoneもDHCPではなく手動でIPアドレスを割り当てます。マシン側に設定したネットワークのIPアドレスの帯域の中のアドレスにしましょうね(笑)。

これで繋がります。簡単なもんです。
あとは、Safariを起動してマシン側のIPに繋げば、パーソナルWeb共有なり別に作った環境なりにアクセスできるわけですね。

おまけ: せめて確認用で外に持ち出したいって方は

せめてクライアントへの表示確認用ぐらいのつもりで外に持ち出したいって方は、公式のAppStoreにある「FileMagnet」とか「Files」みたいなアプリケーションを使って、ローカルのコンテンツを直接iPhoneやtouchにコピーしておいて、そこで表示してしまうという方法もありますかね。もちろん、サーバを介してるわけではないので表示確認ぐらいしかできないと思いますが…。

ちなみにFileMagnetは転送するソフトがOS X専用になります。ご注意下さい。ケーブルで繋がなくても無線経由で転送できて大変便利なのですけど…。他のアプリはWindowsマシンからだとWebDAVとか使って転送できるようです。

ま、そんなわけで以上、大して役に立たないエントリーでした。
※Pwnageとかすれば、iPhoneやtouchの中にWebサーバおったててそこだけで完結させることもできますけど、そんなことできる人は自分でできるはずなので説明はしません(笑)。

余談

あ、そうそう。洋書ではいくつかiPhoneのサイトやWebアプリの作り方みたいな本が出てますが、今出てるものは買わないで秋以降に出るものを買った方が良いかと思います(今のは情報が古いはずなので)。

これから作るぞ!という方は、HTML+CSSだけでなくDOM Scriptingあたりの知識を入れておくと、きっと素敵なサイトが作れるんじゃないかと思います。

Tags: , , , , ,

   

Comments are closed.


Performance Optimization WordPress Plugins by W3 EDGE