iWebKitでiPhone/iPod Touch風Webサイト作成 （3） Top Bar

Core UI Elements(1)The Top Bar

<div id="topbar"></div>

タイトルを入れる:
<div id="topbar">
<div id="title">iWebKit</div>
</div>

ボタンを入れる:

<div id="topbar">
<div id="title">iWebKit</div>
<div id="leftbutton">
<a href="http://iwebkit.net%22%3epc/ website</a>
</div>
</div>

 id=”leftbutton” は左側ボタンのスタイル、もちろん、右側ボタンはid=”rightbutton”

マルチプル　ナビゲーション　ボタンのスタイルは
<div id="leftnav"></div> あるいは、 <div id="rightnav"></div>.

最後は、以下のソースを実際やってみましょう

<div id="topbar">
<div id="leftnav">
<a href="index.html"><img alt="home" src="images/home.png" /></a>
<a href="list.html">Lists</a></div>
<div id="rightnav">
<a href="storelist.html">Store list</a>
</div>
</div>

iWebKitでiPhone/iPod Touch風Webサイト作成 （２） 基本設定

ファイルのヘッダー部に、iWebKitのCSSファイルとJavaScriptファイルを導入する。

<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="minimum-scale=1.0, width=device-width, maximum-
user-scalable=no" name="viewport" />
<link href="css/style.css" rel="stylesheet" type="text/css"
<script src="javascript/functions.js" type="text/javascript"
language=”JavaScript” ></script>

iWebKitでiPhone/iPod Touch風Webサイト作成 （１） 前言

iPhoneやiPod Touch向けのサービスを提供してみたいと思う人は多いはずだ。だが専用アプリケーションの開発はObjective-Cを習得する必要があったり（他の言語でもできるが）、App Storeへの申請が面倒に感じてしまうかも知れない。

iPhone/iPod Touch向けサイトを作るのに便利
　
その点、Webサイトであれば申請も不要ではじめられる。ネットワーク必須のサービスを作るならSafari経由でも十分かも知れない。そんな時に便利なフレームワークがiWebKitだ。
今回紹介するオープンソース・ソフトウェアはiWebKit、iPhone/iPod Touch向けのWebサイトを構築するフレームワークだ。

iWebKitを使うと、iPhoneやiPod Touchに適したWebサイトを簡単に構築できるようになる。左に移動していくナビゲーションや、テキストや画像を使ったリスト、履歴を覚えるナビゲーションバーなど基本的な部品が用意されている。

ポップアップ
　
さらにフルスクリーンやポップアップ機能といった使いどころによっては便利な機能もある。他にも専用フレームワークとしてメールやiTunes、App Store、SMS、電話、Youtube、マップといった専用アプリケーションへの情報送信が簡単にできるリンクサンプルも用意されている。将来的にはテーマ機能もサポートされる予定だ。
ローカルアプリケーションの良さはオフラインでも使える点やカメラなどのデータ連携にある。iWebKitではそのような複雑な機能は実現できないが、Web APIなどを組み合わせることで動作の安定した品質の高いWebアプリケーションを提供できるようになるだろう。

フルスクリーン
　
iWebKit のHP
　http://www.iwebkit.net/