ECサイト運営開発記

PHPフレームワーク Laravelの使い方を中心とした通販サイトの開発日記

ECサイトをiPhone/iPod Touchに対応させてみた[制作編]

EC

ECサイトをiPhone/iPod Touchに対応させてみた。今回は制作編です。
そもそも、iPhoneユーザーが使いやすいサイトとは何か？
これが一番の悩みどころでした。
それで、iPhone/iPod Touchに最適化されたWebサイトのリンク集を一通り見てみる事に。
リンク：iPhone/touch便利リンク集、B5note touch !
これらに登録されているリンクを辿ってみると、確かに一般のPCサイトよりもずっと使いやすい印象を受けた。
まるで、iPhoneやiPod Touchに入っているアプリケーションを使うかのような操作感で、ストレスが非常に少ない。
これは一体どうなってるんだろうか？HTMLを見てみるとiui.jsやiui.cssなどの気になる文字が。
たぶん、この2人の仕業だな。早速、ググッてみた。すると、iuiに関する情報がいくつか出てきた。
iui.jsで構築するシンプルなiPhoneサイト

どうやら、このライブラリを使えば、iPhone/iPod Touchに最適化されたサイトが構築可能になるらしい。
再び、B5note touch !などでHTMLを勉強。
一番、読みやすかったのは映画生活 for iPod。
シンプルな作りでほとんどCSSをいじっていなかったからだ。

なんとなく、わかった。
このiuiはselected="true"が指定されているブロックとCSSの.toolbarのクラス以外のブロックは
非表示になっているらしい。リンクを選択すると、指定されたidのブロックが表示される仕組みのようだ。
それで、あんな風に動くのか・・・作った人は本当にスゴイ。
ただ難点は、iuiに入っているCSSはCSSハックな書き方なので、読むのが結構難しい。
かなりカスタマイズしていかないと凝ったデザインは厳しいかもしれない。

以下、iuiのHTMLソース。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<link rel="stylesheet" href="http://***/test/css/iui.css" type="text/css" />
<script src="http://***/test/js/iui.js" type="text/javascript"></script>
</meta>
<body>

<div class="toolbar">
 <h1 id="pageTitle"></h1>
 <a id="backButton" class="button" href="#"></a>
</div>

<ul id="home" title="トップ" selected="true">
 <li><a href="#c1">カテゴリ1</a></li>
 <li><a href="#c2">カテゴリ2</a></li>
 <li><a href="#c3">カテゴリ3</a></li>
</ul>
<ul id="c1" title="カテゴリ1">
 <li><a href="#ui" target="_self">UI関連</li>
</ul>

</body>
</html>


「iui.jsでサイトを制作する際のポイント

  • ユーザーエージェント
  • 頭にはおまじないを書く。倍率の指定だそうです。クパッーはしませんよっていう宣言らしい。
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
    • 基本横幅320pxで作成。加速度センサーで横にした時の事はそんなに考えなくてもいい。
      • ただし、携帯サイトと同じく、長い文章では不用意に改行は入れない方がいい。
  • 軸となるブロック要素にはid属性とtitle属性をつける。
    • title属性を付ける事によって、pageTitleが変更される
  • リンクがクリックされるとhref=#idで指定されたブロックがselected="true"になり#idが表示される。
  • iui.cssの.toolbarクラスはヘッダー。この部分を変更を加えてサイトのロゴなどの表示させる。
  • iui.cssはちょっと難しい。DreamWeaverなどがあると少しは楽。
  • サイト内の別ページへ飛ばしたい場合はtarget="_self"の属性を必ず付ける。
    • メールのリンクも同様にtarget="_self"にする
  • クリック領域は広めに。フォームのinputタグも大きく作る。iuiのデフォルトもそうなってます。
  • フッターを表示させたい場合は、一番最初にselected="true"になっているブロック内に表示する。
    • ただし、CSSに自信のある方は初期ブロック外に作ってみるのもいいかもしれません。
  • 表示テストにはSafariを使う。Firefoxでは期待どおりの動きをしてくれないかもしれません。
    • Safariのダウンロードはこちらから。アップル - Safari - ダウンロード
    • WindowsでSafariをダウンロードしたい場合は、ユーザーエージェントをデフォルトに戻して下さい。そうしないと、Mac版しかダウンロードできなくなります。
    • 現在のSafariにはユーザーエージェントの変更する機能があり、その中にiPhoneなどもあります。
      • 「Safari 開発メニュー」で検索してみて下さい。
  • 追記：
  • iPhone/iPod Touch用サイトにおけるfaviconは以下のような具合で書く。ファイル名はどうでもいい。
<link rel="apple-touch-icon" href="http://www.hoge.com/images/icon_iphone.png" />
    • サイズは57*57ピクセルで作成。
  • iui.jsのダウンロードはこちら→iui

まだ、いくつか注意すべき所はあると思いますが、何か見つけたら追記していこうと思います。

今回、iuiで作成したサイトはこちらです。iPhoneまたはiPod Touchで御覧下さい。
E-カレンダー.com
アドレスはhttp://www.e-cale.com/です。

[iuiで構築したECサイト動画]