derric.org

iPhone用サイトを作ってみる

| トラックバック(0)
CDとかDVDとかを借りに行った時に、
このアーティストってどこまで持ってたっけ?とか、
このDVD持ってたかな?とか、思うことがよくあります。

そこで、自分が持っているものやこれからほしいものを
チェックリストにしてiPhoneで持ち歩こうと考えました。

まずはじめに、アウトラインプロセッサの導入を検討したのですが、
まともなアウトラインプロセッサアプリはちょっと値段が高いし、
そもそも、今はアウトラインプロセッサがほしいわけじゃないから、
もっとシンプルに階層構造のデータを気軽に参照できる方法は
ないものかと考えました。

そこで、ちょっと発想を変えて、iPhone用のページをWeb上に作って
おいておくことにしました。
iPhone用Webサイトの勉強になるかもしれないし、ちょっとやってみます。

iUIを利用してiPhone用Webサイトを作る

iUIは、Google Codeで公開されている、htmlの表示をiPhoneっぽくするための
cssとjsのライブラリです。

iPhoneのネイティブアプリのような複雑なUIコンポーネントはありませんが、
見た目や動きをiPhoneっぽくできます。

使い方の簡単な説明はこちら。
>> iUIというライブラリを利用したiPhone用Webページの作り方

サンプルコードを見れば、どう書けばいいかは大体わかります。

iUIのいいところは、ulタグでiPhoneで言うところの1ページを表現するところです。
このため、一つのhtmlファイルで複数ページ分の内容を記述することができ、
ページ遷移の度にhtmlファイルを読み込まなくて済みます。動作も速いです。

実際に作ってみたら結構いい感じです。
簡単にiPhone的なページが作れて取り敢えず満足です。
>> http://iphone.derric.org ※iphoneでアクセスしてください
音楽 - ロック - フジファブリック - MUSIC はデータを作ってあるので参照可能です。
ちなみに、フジファブリックから先は別ファイルなのですが、Ajaxで内部的に取りに行く仕組みになっています。

ただ、htmlを書くのは意外と面倒です。
入力インタフェースを作って自動出力するようにするか、
やっぱりアウトラインプロセッサで書いたOPML形式のファイルを出力できる
アプリを買うか、なければ自分で作ってみるか。

iPhone用のアイコンを作成、設置する

ついでに、このページをいつでも見れるようにiPhoneのホーム画面に追加したいので、
iPhone用のアイコンを作って設置します。

iPhone用のアイコン作成はこのサイトが便利。
>> iCone

英語サイトですが、使い方は見ればわかると思います。
iPhone用のアイコンは、57x57pxの透過pngで作成する必要があります。

ついでにfaviconも作っちゃいます。こちらは32x32pxのico形式。

作った画像をサーバーにUPしたら、headに以下の記述を追加します。

<link rel="shortcut icon" href="faviconの画像パス" />
<link rel="apple-touch-icon" href="iPhone用アイコンの画像パス" />

以上です。

トラックバック(0)

トラックバックURL: http://tech.derric.org/mt/mt/mt-tb.cgi/7

ページトップへ