オフライン状態のiPod touchでSafariを使う。
先月初旬に発売されて、もうすでにJailbreakツールやらなにやらが色々出回っているiPod touch。iPod touchにはミュージックプレイヤーとしての機能だけでなく、ウェブブラウジング、動画鑑賞、画像鑑賞、アドレスブック、カレンダー、電卓など、（使える使えないは別として）色々な機能が備わっています。
中でも、一番注目すべきはウェブブラウジングでしょう。つまりはiPod touchがWi-Fiによってインターネットに接続でき、iPod touchでWEBページが見れるのです。そのためのブラウザとしてMacではお馴染みのSafariが入っています。
しかし、いくらiPod touchでインターネットができるといっても、無線LANが飛んでいるところに限られています。公衆無線LANが飛んでいるところであれば外出先等でもネット接続は可能ですが、現在の日本では都会でもそうそう満足のいくほどの量は飛んでいません。なのでまだ、いつでもどこでもiPod touchさえ持っていればインターネットが出来る。とまではいかないのが現状です。
ですが、これから説明する方法を使えば、オフライン状態のiPod touchでもSafariブラウザを通してページを参照することが出来ます。しかも、iPod touchをただの箱にするような危険をもつJailbreakをする必要はありません。デフォルトの状態のiPod touchで参照可能です。
ただし、今回説明する方法は以下の条件下でないと少し難しいかもしれないので、その点はご了承を。
- HTMLを多少なり理解できる
- ファイルをアップできるサーバーがある（無料サーバーでも可）
- 正常に動作するiPod touchを持っている（当たり前ですが（笑））
あと、ファイルを参照するときに、一度は必ずiPod touchオンライン状態にすることが必要です。
今回このハウツーでは、サンプルとしてprototype.jsのソースをオフライン状態のiPod touchのSafariで参照する方法を説明します。（何故「prototype.js」なのかは先日のエントリー「Kanasan.JSに参加してきた。 - WoooFla@Blog」を参照するとなんとなく分かるかもしれません。）
Prototype.jsソースを取得する
まず、prototype.jsのソースを取得しましょう。下記のアドレスにアクセスしてください。
そして画像の赤枠「DOWNLOAD」をクリックします。
すると画像のようなページに飛ぶので、また赤枠の部分をクリックします。
そうすると、文字列が並んでいるだけのページに飛びます。これがprototype.jsのソースです。僕はこれが何ぞかは全然知りません（笑）
そしてこのソースを全て選択（Windowsなら「Ctrl+A」）し、コピーしましょう（Windowsなら「Ctrl+C」）。コピーできたら、一旦「メモ帳」などのテキスト編集ソフトを開いて、貼り付け（Windowsなら「Ctrl+V」）をしてまたそれを全選択、コピーしてください。この作業することで、さきほどの文字列に改行の情報を残すことができ、HTML編集が楽になります。それができたら、次はHTMLファイルの作成をします。
Prototype.jsを見やすくする
ここからのHTMLファイル作成にはハウツーでは「Macromedia Dreamweaver 8」を使用しますが、HTML作成ができるソフトウェアであればなんでも構いません。（改行タグを自動で挿入してくれるHTML編集ソフト推奨）
HTML編集ソフトを開いたら、新規作成を選び、そこに先ほどメモ帳からコピーしたソースを貼り付けます。
Dreamweaverの場合は画像でいう下の部分（「デザイン」の方）に貼り付けてください。そうするとHTMLコードのほうには自動的に段落、改行タグが書かれます。それができたら、HTMLコード（画像の上の部分）を全選択し、コピーしてください。
これで前準備は完了です。
base64エンコードする
これからオフライン状態のiPod touchでSafariでソースを参照する真髄の部分に入ります。まず、下記のアドレスにアクセスしてください。
http://software.hixie.ch/utilities/cgi/data/data
すると、画像のようなページに飛ぶと思うので、「base64」というチェックボックスにチェックをいれ、その下のテキストボックスに予め入っているテキストを全て消し、そこへ先ほど作成したHTMLコードを貼り付けます。貼り付けられたら下の「Generate」ボタンをクリックします。
すると、「data:text/html;charset=utf-8;base64,」から始まるリンクが付けられた長い文字列が表示されると思います。クリックしてもらうと分かると思いますが、この文字列そのものが先ほど作ったHTMLなのです。（詳しくは「base64」と検索すればこれはどのようなことをしているのかが分かると思います。多分。）
この「data:text/html;charset=utf-8;base64,」から始まる文字列を全選択し、コピーしてください。
アクセス用ページを作成する
ここからまた、Dreamweaverで作業していきます。
Dreamweverで作業する場合は、プロパティが開いている状態なら、プロパティをクリックしてプロパティツールバーを閉まった状態にしておいてください。これは処理落ちを防ぐためです。
これからさっきの文字列をリンク先に指定するのですが、文字列が長いのでHTMLコードに直接リンクタグを書いて貼り付けた方が処理落ちなどをせずに済むと思います。
<a href="ここに文字列を貼り付け">Prototype.js</a>
上記のようにリンクタグを書いて、「ここに文字列を貼り付け」の部分に先ほどコピーした長い文字列を貼り付けます。
できたらそのHTMLファイルを適当な名前を付けて保存し、サーバーにアップしましょう。
iPod touchで確認する
サーバーにアップできたらiPod touchで確認しに行きましょう。先ほどアクセス用に作ってアップしたHTMLファイルのURLをiPod touchのSafariに直接入力します。
ちなみに、僕がアップしたファイルはこれです。
http://ooze-flash.com/prototype.html
アクセスできたら「Prototype.js」をクリックします。ソースコードが現れたら成功です。そのソースコードのページをブックマークしましょう。
そして設定からWi-Fi接続をオフにします。そしてもう一度ブックマークしたソースコードにアクセスしてみると
･･･なんと、ソースコードが見れるじゃありませんか！これで、いつでもどこでもコードリーディングが可能ですね。僕はしないけど（笑
この方法を使って
この方法を使えば、ソースコードだけでなく、普通の文書やJavascriptで作られたツール、ゲームもオフライン状態で見たり使ったりできます。Javascriptによるアプリケーションは知識がないと作れないですが、文書くらいならホームページ作成の基本知識程度があれば簡単にできますよね。なので、その基本知識程度でできて、しかもいつでもどこでも「オフラインで参照できたら便利！」と思える使い方を思いついた分だけ紹介したいと思います。
歌詞を書く
iPodが元々ミュージックプレーヤーであることを考えるとこれはかなり使えますよね。iPod touchは音楽を流しながらSafariでブラウジングができるので、入っている曲の歌詞を書いて上記の作業をし、ブックマークしておけば、歌詞を見ながら曲を聴けて便利ではないでしょうか。
読むために使う
普段、ブログなどを巡回するのにかなりの時間を使ってませんか？僕自身もかなり使ってます。では、気になった記事を上記の方法でiPod touchに入れておいてはどうでしょう。通勤、通学の電車のなかで、オフライン状態でも読むことができます。（上記の作業するより読んだほうが早いかもしれませんが・・・）
これくらいですね、思いついたのは（笑）でも、ひとつめの歌詞カードとして使うのはかなり便利だと思いますよ。Javascriptが使えなくても可能性は無限大です。色々試してみましょう！
今回書いたハウツーは単なる一例で、もっと他にいい方法があるかもしれませんね。
このエントリーを書くにあたって、下記のエントリーを参考させていただきました。この場を借りてお礼申し上げます。
iPod touch - Safariのdata:URLでJSアプリをオフラインで使う - bonar note
音が鳴る - ちなみに
