iPhoneサイト構築への道!! その2 エッジ・トゥ・エッジ・リスト

2657B.gifiPhone対応サイト制作ガイド本「iPhoneサイト制作ハンドブック iPhone&iPod touch対応を読みつつ、このブログをiPhoneに対応させていくシリーズ、第2弾です。
 
前回は、PCサイトをちょっとだけiPhoneでも見易くしましたが、今回はiPhone向けにページを作っちゃいます。
 
今回作るのは、エッジ・トゥ・エッジ・リスト(Edge to Edge List)という形のページ。

 
 


「エッジ・トゥ・エッジ・リスト」というのは、iPodでもおなじみのリスト形式のインターフェースのこと。

etel1.jpg etel001.jpg

iPhone上でも、音楽のブラウズや、メールなどでおなじみのこのインターフェース。
 
本によりますと、内蔵アプリケーションでよく見られるものに準じたユーザーインターフェースにする理由は、iPhoneそのものとの統一感を持たせるせ、使い易いインターフェースを提供するため、とのこと。
 
このブログは、iPhoneで見るとそれなりに重いので、この様な軽いインターフェースにすれば、iPhoneからも見易いかなぁ、というのもあり、挑戦してみることにしました。
 
 
で、ほぼ本に書かれているの通りに作ってみたのがこちら。
 

etel01.jpg etel02.jpg

ブログの記事をリスト形式で表示するようにしてみました。
 
まだ途中ですが、カテゴリ別にも記事を表示できます。
ただし、最終的な記事のページは、PC版のページに繋がるようになっています。記事自体まで、PC用とiPhone用に表示させるのは、seesaaでは難しいみたいです。
 
でも、これだけでもiPhoneからご覧いただいている方にとっては、ずいぶん見易くなったんじゃないかなぁ、と思うのですが…、どう?
 
ということで、まだほとんど工事中ですが、一応公開します。
 

(何か問題あったら、公開を一旦中止することもありますので、ご了承を。)
 
 
「iPhoneサイト制作ハンドブック」を探す⇒Amazon 楽天 Yahoo!ショッピング
 iPhone関連本カタログはこちらです。

 


【PR】お急ぎ便使い放題のAmazonプライム無料体験!!

 

3 件のコメント

  • おはよーございます
    僕も本買ってボチボチ読んでいます。
     
    未完成ブログをレンタルサーバー借りて ワードプレスWordPressで作り出したのも 対応サイトが基本的にプラグインで一発だという所にあります
     
    携帯でも 必要とはいえ長文をズラッと読むのは億劫になります
     
    人気ブロガーさんは 記事書き方も工夫されてるんで参考にしてる所です ハイ

  • しゅん爺さま、iPhone対応のサイト作りお疲れさまです。以前、一度コメントをした者ですが、しゅん爺さまの努力には脱帽いたします。
     
    これからも周辺機器レビューやiPhoneに関する情報など、楽しみにしています!

  • MenT@i さん
    いいですね~、プラグインで一発かぁ..。でも、いまさら全部引っ越しというパワーもなく…。
    いつかseesaaでiPhone対応なんてこともあるんだろうか
     
     
    S.クロラさん
    コメント、励みになります!!
    今後ともよろしくお願いします。

  • コメントを残す

    メールアドレスが公開されることはありません。 が付いている欄は必須項目です