Strings of Life

PHP/Phalcon/MySQL/JavaScript/RegExp/Ruby/Perl/ActionScript

タグ:iPhone

先日、iOSアプリの『CSS Cookboook』を購入したのですが、どうも動作がおかしい。ページめくりが効かないことが多々ある。

ということで、アプリの販売元であるO'riley Mediaにメールをしてみました(最初はオライリー・ジャパンにメールしたのですが、アプリのことは知らないのでO'riley Mediaに問い合わせてくれ、と返事がきました)。

返ってきたメール:

Some of our iPhone apps don't work well with IOS 5.  Here is a blog post that shows you how to extract the ePub file from that app and use it in iBooks on your phone -
http://zef.me/3246/convert-cheap-oreilly-iphone-app-books-to-epub

オライリーのiOSアプリにはiOS 5で上手く動かないものがあるから、アプリからデータを取り出してePubファイルにして読んでね、とのこと。

で、実際にやってみました。リンク先のブログ記事もスクリーンショットがあって十分わかりやすいのですが、一応手順を書いておきます。なお、操作はMac OS X Lionのものですが、Windows 7でもほとんど変わりません。
  1. iTunesでお目当てのアプリを見つけて右クリック > Finderで表示
  2. 出てきた.ipaファイルを複製
  3. 複製した.ipaファイルの拡張子を.zipに変更
  4. .zipファイルを解凍(ダブルクリック)
  5. 解答して出来たフォルダの中の、Payloadフォルダに.appという拡張子のファイルがあるので、右クリック > パッケージの内容を表示
  6. bookフォルダの中に、META-INFフォルダ、OEBPSフォルダ、mimetypeという名前のファイル、の3つがあるので、これらを選択して「3項目を圧縮」
  7. 圧縮して出来た.zipファイル(Macデフォルトだと「アーカイブ.zip」)の拡張子を.epubに変更

以上で、変換作業は終了。あとは、お好みのePubリーダーに放り込めばOK。iOS 5にデフォルトで入っているiBooksが手軽です(iTunesのブックライブラリに.epubファイルを入れて、同期するだけ)。

なお、CSS Cookbookは、インデックスの量が多すぎるのか、ePubリーダーでも快適に読めるとは限りません。私の試した範囲だと、iBooksはなんとか実用レベル、bREADERはダメダメ、って感じです。

ちなみに、ePubファイルの中身は、ただのhtmlです(OEBPSフォルダの中には大量の.htmlファイルが入っています)。したがって、htmlファイルを取り出して個別に読むこともできます。

ナビゲーションボタンの縦幅は44px以上が望ましいとされているが、14px~16px程度の文字に<a>タグでリンクを貼る場合も多い。そのようなときに有効となるテクニックが、paddingで<a>タグのタップ可能領域を広げてやること。文字サイズを維持しつつ、ユーザビリティを向上させることが出来る。



参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

・html

<nav class="nav-topicpath">
    <ul>
      <li>a</li>
      <li>b</li>
 (ここに擬似要素が入る)
    </ul>
  </nav>


・CSS

.nav-topicpath ul:after{ ←擬似要素セレクタ「:after」でul要素の終了タグの直前に擬似要素を挿入
  content: ""; ←contentプロパティで擬似要素として""(中身なし)を挿入
  display:block;
  clear:both;
}

なお、擬似要素としては他にも :before があり、要素の開始タグの直後に要素が挿入される。




参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display:block;
}

HTML5で追加された新要素の場合、ブラウザーによってはdisplayのデフォルト値がセットされていないことがある(Firefox3.6ではheaderがインライン要素になってたような…)。ブロックレベルに該当する要素には、あらかじめ display;block をかけておくと安心。




参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

このページのトップヘ