CloudReadersでオフラインHTMLを読む
2010.06.06 Sunday 13:18
iPadで最もよく利用しているアプリとしてCloudReadersがある．これはiPadで文書を読むアプリで，PDFとZIPに固めたJPEGをサポートしている．しかし，HTML形式のドキュメントについてはPDFに変換が必要となり，複数ページの場合は容易には対応できない．
そんな中，CloudReadersがWidgetに対応したとの記事を見て，もしかしたら単なるHTMLでもウィジェットとして認識させれば表示できるのではないかと思い，試してみたら大成功．ただし，普通のブラウザと異なり「進む」「戻る」ボタンが無いので，それをJavascriptでページ内に埋め込むとより使いやすい．
サンプル: Django Document (rev.13323) [size: 3MB]
そんな中，CloudReadersがWidgetに対応したとの記事を見て，もしかしたら単なるHTMLでもウィジェットとして認識させれば表示できるのではないかと思い，試してみたら大成功．ただし，普通のブラウザと異なり「進む」「戻る」ボタンが無いので，それをJavascriptでページ内に埋め込むとより使いやすい．
サンプル: Django Document (rev.13323) [size: 3MB]
Widgetの作り方はこちら
Life is beautiful: HTML5 Widget入門：あなたにも作れるiPad用Widget
ドキュメントだけのウィジェットを作るには次のようにする．
1. ドキュメントを用意する．
最初のページはindex.html という名前でなくてはならない．
2. config.xmlを用意する．(上記リンクを参照)
CloudReadersではheight/width/viewmodeはいずれも無視される．
極端な話丸ごとコピーでも動作上は問題ない．
3. config.xml をドキュメント階層の一番上に置き，ZIP圧縮する．
おそらくドキュメントはある1つのディレクトリに入っていることが多いと思うが，index.htmlやconfig.xmlがディレクトリの中に入らないように，ファイル全てを選択(指定)して圧縮する．(ZIPファイルを解凍ツールで開いたとき，config.xmlの前にディレクトリが付いていないようにする)
4. 拡張子をzipからwgtに変更してiPadのCloudReadersに転送する．
最初に書いたとおり，ブラウザの「進む」「戻る」ボタン相当の物を埋め込むために，以下のような記述を全てのhtmlファイルに挿入してみた．
ちなみに，position:fixedだとスクロールしても画面右上に固定されると期待したのだが，残念ながらiPadではそうはならなかった．なのでfixedの代わりにabsoluteと指定しても効果は同じ．
Life is beautiful: HTML5 Widget入門：あなたにも作れるiPad用Widget
ドキュメントだけのウィジェットを作るには次のようにする．
1. ドキュメントを用意する．
最初のページはindex.html という名前でなくてはならない．
2. config.xmlを用意する．(上記リンクを参照)
CloudReadersではheight/width/viewmodeはいずれも無視される．
極端な話丸ごとコピーでも動作上は問題ない．
3. config.xml をドキュメント階層の一番上に置き，ZIP圧縮する．
おそらくドキュメントはある1つのディレクトリに入っていることが多いと思うが，index.htmlやconfig.xmlがディレクトリの中に入らないように，ファイル全てを選択(指定)して圧縮する．(ZIPファイルを解凍ツールで開いたとき，config.xmlの前にディレクトリが付いていないようにする)
4. 拡張子をzipからwgtに変更してiPadのCloudReadersに転送する．
最初に書いたとおり，ブラウザの「進む」「戻る」ボタン相当の物を埋め込むために，以下のような記述を全てのhtmlファイルに挿入してみた．
<p style="position: fixed; right: 0; top: 0">
<a onclick="history.back();"><<BACK</a> |
<a onclick="history.forward();">FORWARD >></a></p>
ちなみに，position:fixedだとスクロールしても画面右上に固定されると期待したのだが，残念ながらiPadではそうはならなかった．なのでfixedの代わりにabsoluteと指定しても効果は同じ．
Comments