KenG Blog

7/11に入手できるかどうかも怪しいってのに、身の回りを着々とiPhone仕様にしていってます。とは言っても、携帯の有料サイトを解約したくらいか…。いやいや、それだけじゃ手落ちだ。今、携帯で何をやっているかを洗い出し、ひとつひとつiPhone仕様へ移行していかなくてはならない。そこで着手したのが、携帯サイトのiPhone化計画です。

そうは言っても、Googleにせよ、YouTubeにせよ、ほぼほぼ既にiPhone化されちゃっているんですよね。自力でやるのはどれだろう…と思ったときに、真っ先に思いついたのがp2、Webサーバで動かす2ちゃんブラウザです。Mac用の2ちゃんブラウザも出来の良いのが何種類かありますが、p2のようなサーバ／クライアント型だと、履歴やらお気に入り、ログなどのデータがサーバに溜まるので、どのマシンや携帯で見ても常に同じ状態が保持されるんですね。これはなかなか便利。

Safariでアクセスすればいいんだから、本来はiPhone用なんて何も考えること無いんです。でもだ、PC用のp2インターフェイスって、今時なのにframeタグで区切った3ペイン構造。iPhoneの小さな画面で操作するのは相当ツライ。そこで携帯用のページにアクセスしたんですが、こちらは完全なテキストベースなので「前」「次」などナビゲーション系の文字が押しづらい。あと、一行が長い書き込みだと、iPhoneで横スクロールさせるか、縮小して小さな文字を読まなきゃいけない。なんとも面倒くさい。

そこで、p2のテンプレートを改造して、iPhoneでバシっと見られるレイアウトに修正しましたよ。ポイントは以下のような感じ

• 横スクロールが一切発生しない
• ページ操作系は、指でタッチしやすいようにする
• iPhone本体を横回転させたら、文字の大きさはそのまま、横長レイアウトになる

PHPのスクリプトをゴリゴリいじれば、もっと凄いことができるんでしょうけど、p2がバージョンアップしたときがイチイチ大変なのでCSSでの変更のみにしました。で、出来たのがこれ。

まあまあ、良い感じでしょう？ 使ってみると、さらに良い感じ。携帯電話と同じ情報を表示するものなのに、携帯よりも視認性が高く、操作もスムーズ。やはりiPhoneは素晴らしい。

以下、既存のページをiPhone化する際の備忘録です。

• いじるのは「index_print_k.inc.php」「sb_header_k.inc.php」「read_header_k.inc.php」
• iPhone化したいページのヘッダー部分に以下のコードを記述
  <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0">
  <link media="only screen and (max-device-width: 480px)" href="style/read_iphone.css" type="text/css" rel="stylesheet" />
• CSSの記述で、「min-width: 300px;」「max-width: 460px;」「-webkit-text-size-adjust:none;」を定義してやる。こうすると本体を縦にしても、横にしても、バシっと収まり、テキストも拡大表示されないようになる