最近でもぽつぽつと、iPhone向けサイトをオープンしたというニュースが耳に入る。ユーザーの絶対数が少ないのにやるのは、プロモーションの意味合いが強いんだろう。アクセスしてみれば確かによく出来ているし、インパクトは強い。
iPhone向けサイト構築指南を雑誌やIT系メディアサイトで見かけることがある。一ユーザーとしても興味のあるところだ。Android G1もディスプレイは同じくハーフVGAで、この手の端末の標準的なサイズになる可能性もある。ケータイだって大画面化が進めばそちらに近づいてくるだろう。PCより小さくケータイより大きい画面での表示方法は、知っていて損はないような気がする。
今日は予定が狂って一日自宅にいたので、ちょっと遊んでみた。参考にしたのはMac Fan 2月号の特集記事。つくるのは、横浜FC関連の新着情報を集めたインデックスサイト(の練習)。
ケータイサイトは未対応機種のため見られず、メール配信サービスは開店休業状態。PC向けオフィシャルサイトは前回のリニューアルでRSS配信が無くなってしまい、横浜FC関連のニュースはけっこうな努力で自ら集めないといけないという、娯楽企業とは思えないひどさだ。それでもサポーターの悲しい性で、知りたい気持ちは抑えられない。じゃあ自動化できるところはしましょう、ということだ。
ちゃんとつくるパワーはないので、手始めにオフィシャルとJ's GOALの情報だけ集めてみることにした。オフィシャルはトップページのトピックスを、J's GOALは横浜FCからのリリースを取ってきて、まとめて一覧にする。CGIを動かせる公開サーバーはないので、ローカルでスクリプトを動かしてiDiskへアップロードする仕組みでごまかす。
- pythonのスクリプトで両サイトからソースを取り(urllib.urlopen)、欲しいリンクのところだけをざっくり切り取る。
- テーブルで整形。
- CSSでちょっと色づけ。もちろん横浜FCカラー。
- 新着の表示も特になし。リンクの色が違うから分かるだろうと割り切る。
- リンクは元サイトへ単純にジャンプするだけ。
- iPhone用らしさは、ヘッダにviewportの設定とWebclipアイコン。
- viewportは最初device-widthにしたが、文字がちょっと大きかったので430に。
- Webclipアイコンは相対パスだと認識されなくて、ルートからの絶対パスにしたら上手くいった。
- 情報の更新は動的にはできないので、AutomatorをiCalで毎日実行。「シェルスクリプトを実行」でpythonスクリプトを呼び、「Finder項目をコピー」でiDiskへのアップロード。
できました。
つくっている途中でちょうど更新があり、テストもできた。あとは他のサイトからも取ってくるとか、表示方法を工夫すればいいかな。