もっちーの日記

横浜FC観戦記、MacやPCのこと、ままならない日々のことをつらつらと。

iPhone向けWebサイトをつくって遊ぶ

最近でもぽつぽつと、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アイコンは相対パスだと認識されなくて、ルートからの絶対パスにしたら上手くいった。
  • 情報の更新は動的にはできないので、AutomatoriCalで毎日実行。「シェルスクリプトを実行」でpythonスクリプトを呼び、「Finder項目をコピー」でiDiskへのアップロード。

できました。

つくっている途中でちょうど更新があり、テストもできた。あとは他のサイトからも取ってくるとか、表示方法を工夫すればいいかな。