DEEP KICK.com - for iPhone

巷でiPhoneユーザーを見かけることが多くなりました。都心で電車に乗っていると一人、二人は必ずiPhoneを持っている人を見かけます。iPhoneのコンテンツと言えばApp Storeで販売されているiPhone アプリがまっさきに思い浮かびますが、iPhoneは非常に優れたインターネットアクセスツールです。外出先でPC用に作られたウェブサイトもだいたいにおいて閲覧することができます（ただFlashには対応していないので、そこだけ穴が空いた状態になってしまいますが・・・）。しかしiPhoneはPCと比較して画面サイズやタッチパネルなど、性質や使われる状況が大きく異なるデバイスであるため、iPhoneの標準ブラウザであるSafariでウェブサイトを美しくかつ使いやすく表示するには、ウェブサイトをiPhone対応にする必要があります。

DEEP KICK.com のウェブサイトにiPhoneのSafariでアクセスすると、iPhone対応のHTML、CSS、JavaScriptに切り替わるようにしてみました。技術的にはPHPでユーザーエージェントを取得し、iPhoneの場合はiPhone向けの処理をするようにしています。つまりURLはPCでアクセスしたものと同じになります。iPhoneをお持ちの方は、Safariを立ち上げて http://deepkick.com/ にアクセスしてみてください。

iPhone アプリライクな画面が表示されますが、これはiPhoneアプリではありません。Safariで閲覧しているiPhone対応ウェブサイトです。HTML、CSS、JavaScriptでコーディングされています。
DEEP KICK.com のサイトはMovable Typeで構築しているので、テンプレートにiPhone対応の処理をPHPで追加することで、過去のブログ記事やカテゴリーページなども、自動的に対応させることができました。

上のふたつは、DEEP KICK.com のニュースページの記事、および制作実績のページです。

下は、DEEP KICK.com Blog （http://deepkick.com/blog/）をiPhoneで見たときの画面です。

内部処理的にiPhone対応サイトを出力しており、基本的にPC用と同じページを見ているため、PC用、iPhone用それぞれに記事を書いたり用意したりする必要はありません。従来通り、PC用のブログ記事を書けば、自動的にiPhone対応サイトになります。このあたりがMTのテンプレートの便利な点ですね。

下はお問い合わせフォームの画面。
PC用のサイトのままでもフォームに入力することは、できなくはないですが、やはりiPhone対応にしたほうが入力しやすいです。

iPhoneを回転させてポートレート表示（縦長表示）からランドスケープ表示（横長表示）にしてみると、このように表示されます。

ウェブサイトによっては、iPhoneユーザーを無視できない性質のサービスもあるのではないでしょうか？その場合PC用のサイトのままで閲覧するよりも、iPhone対応サイトにしたほうが、クールな場合もあるでしょう。DEEP KICK.com のサイトはMovable Typeで構築しましたので、素早くiPhone対応に改造することができましたが、そのあたりの事情は、既にできあがっているウェブサイトの状況によります。場合によっては、iPhone対応サイトを独自に立ち上げたほうが早いケースもあるでしょう。ケースバイケースです。
将来的には、iPhoneをはじめとしたスマートフォンでインターネットにアクセスする需要が、もっと増えていくのではないかと思います。ウェブは、iPhoneユーザーのみをターゲットにした閉鎖的なプラットフォームではなく、デバイスフリーでオープンなプラットフォームなので、iPhoneアプリを開発するまでもなく、さまざまな過去のリソースやサービスをiPhoneユーザーに提供することができます。アイデア次第で今後は優れたiPhone向けのウェブアプリケーションが生み出されていくのではないでしょうか。
iPhone対応サイトの構築、リニューアルについてご興味のある方は、お気軽にご相談ください。