Tips
iPhone風のUIをつくるJavascript「iUIライブラリ」
Google Codeでも公開されている、iPhone風のUIをつくる、iUIライブラリ。こちらよりサンプルをDLし、さっそくこのブログを適用させてみました。
hands in handsのiPhone風UIはこちらから
作成方法は、簡単です。以下よりどうぞ。
まず、コードを理解しよう
1ブロックめ：ヘッダー
<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
</div>
これは形式的みたいなものです。入れておきます。
2ブロックめ：最初に表示されるページ
<ul id="home" title="hands in hands" selected="true">
<li><a href="#about">tommmmyについて</a></li>
<li><a href="#entry">hands in hands最新記事</a></li>
</ul>
最初に表示されるページになります。
- id="home"→ここでは固定
- title="hands in hands"→ヘッダーに表示されるタイトル
- selected="true"→最初に表示させるかどうかを決定します
- リストにつけているページ内リンク→次に表示させるボックス要素のid部分と同じものになります
ここで、はじめのリストにつけているページ内リンクは#aboutですので、次のid名はaboutとします。
3ブロックめ：次にリンクされるページ
<div id="about" title="tommmmyについて" class="panel">
<h2>tommmmy</h2>
<img src="favicon-me.jpg" width="100" height="100" alt="tommmmy" /><br />
学生時代にHTMLを独学で習得。Web制作会社に入社し、サイト構築・制作・運営の一連を経験。その後、パソコンスクールに講師として入社。初心者を対象にWeb・DTPデザインを教える。
</div>
最初に表示されたところから、「tommmmyについて」をタップしたときの表示ページです。
- id="about"→前のブロックのページ内リンクネームと同じにします
- title="tommmmyについて"→ヘッダーに表示されるタイトル
- class="panel"→背景がストライプになります
あとは画像、テキストなど自由に配置します。
このように、ひとつずつ前のページ内リンクネームと次のid名をあわせさえすれば、ページ遷移してくれます。
このとき、ボックス要素はdivでもulでもかまいません。次のページに行くためのリンクなどであればul、liを使った方がいいですし、何か読ませる文章であれば背景をストライプにするか、もしくは背景なしのdivでかまいません。
コードがなんとなくわかったら、MTタグと連携
4ブロックめ：エントリー一覧ページ
<ul id="entry" title="hands in hands最新記事">
<MTEntries lastn="20">
<li><a href="#entry<$MTEntryID$>">
<$MTEntryTitle$>
[<$MTEntryDate format="%Y.%m.%d.%a %H:%M"$>]
</a></li>
</MTEntries>
</ul>
- id="entry"→前のブロックのページ内リンクネームと同じにします
- title="hands in hands最新記事"→ヘッダーに表示されるタイトル
あとは、これにMTタグを入れていきます。（未だに3.34！ごかんべんを！）
- <MTEntries lastn="20">〜</MTEntries>→この中を20エントリー分出力
- #entry<$MTEntryID$>→次に個別記事ページにとぶので、それを記事IDで管理していきます
- <$MTEntryTitle$>→記事タイトル
- <$MTEntryDate format="%Y.%m.%d.%a %H:%M"$>→日付
5ブロックめ：個別記事ページ
<MTEntries lastn="20">
<div id="entry<$MTEntryID$>" class="panel" title="<$MTEntryTitle$>">
<$MTEntryBody$>
<$MTEntryMore$>
</div>
</MTEntries>
- <MTEntries lastn="20">〜</MTEntries>→この中を20エントリー分出力
- id="entry<$MTEntryID$>"→前のブロックのページ内リンクネームと同じ
- class="panel"→背景がストライプ
- title="<$MTEntryTitle$>"→記事タイトル
- <$MTEntryBody$>→記事（内容）
- <$MTEntryMore$>→記事（追記）
これで完成です！あとは、ライブラリに同梱のjsとcssのフォルダ構成に気をつけながら、文字コードに気をつけて、テンプレートとして保存なりリンクなりして出力すれば、OKです。今日はじめて見ましたが、約1時間で完成。
また、大尊敬するcremaさんが「iPhoneテンプレートfor MT」を公開いたします。ということで、簡単にMTに導入できるテンプレートを配布してくださっていますので、10分で導入されたい方は、そちらをオススメします。（MT4.x以降に対応かと思っていましたが、今拝見したら3.3からOKでした）
より細かい、iPhone風なデザインを楽しみたい方はぜひiUIライブラリからDLして試してみてください！
Tags: JavaScript, iPhone
by tommmmy at 2008-10-26-Sun 02:20
in Tips
｜
▲pageTop