ratchetを使ってネティブアプリに迫るwebアプリを作る
ratchetとは
ratchet（http://goratchet.com/）はスマートフォンのネティブアプリようなレイアウトとアニメーション効果を提供するコンポーネントです。簡単なHTMLコードでネティブアプルようなうwebアプリを作れます。
ratchetをダウンロード
ratchetの公式サイトからダウンロードできます：http://goratchet.com/
ファイルをダウンロードして解凍すると、フォルダにファイルがたくさん入っています。
今回使うファイルはdistに入っています。その中をみてみると、三つのフォルダが入っています。
| フォルダ | 内容 |
|---|---|
| css | cssファイル |
| fonts | フォントファイル |
| js | javascriptファイル |
HTML/CSS/JSに慣れている人は中のファイル弄っても全然問題ありませんが、もし自信がなければ、弄らないほうが安全です^ ^;
以上で、環境はだいたい揃いました。偽ネティブアプリを作ってみよう。
トップページを作ろう
フォルダにindex.htmlというファイルを作成します。（PHPなどの経験者はindex.phpとか作成してて構いません）。ファイルの中身はこうなります：（「ChainZのアプリ」を好きな文言にしてください）
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ChainZのアプリ</title>
</head>
<body>
</body>
</html>
今フォルダはこうなります。
では、ratchetのコンポーネントを入れよう。下記のコードを<title>ChainZのアプリ</title>の直後に入れる：
<!-- 携帯用にviewportを設定 -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<!-- アイコンを設定 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- ratchetのcssをリンクする -->
<link href="css/ratchet.css" rel="stylesheet">
<!-- ratchetのレンダリング用jsファイルを引用する -->
<script src="js/ratchet.js"></script>
今index.htmlの中身はこうなります：
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ChainZのアプリ</title>
<!-- 携帯用にviewportを設定 -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<!-- アイコンを設定 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- ratchetのcssをリンクする -->
<link href="css/ratchet.css" rel="stylesheet">
<!-- ratchetのレンダリング用jsファイルを引用する -->
<script src="js/ratchet.js"></script>
</head>
<body>
<header class="bar bar-nav">
<h1 class="title">ChainZのアプリ</h1>
</header>
</body>
</html>
オッケー、いよいよ本番です。これからのコードは主に<body>と</body>の間に書いているので、コードを書くのが不安な人は常に確認してください。
タイトルバーを表示させよう
下記のコードで、タイトルバーのレイアウトができます。
<header class="bar bar-nav">
<h1 class="title">ChainZのアプリ</h1>
</header>
ファイルを保存して、サーバーにアップします。ローカルでブラウザで確認もできるが、アニメーション効果などは設定しないと聞かないので、できるだけサーバーにアップして手元のスマフォで確認してください。（筆者はiPhoneシミュレーターで確認しています）。スマフォでみると、タイトルバーが表示されます。
タブバーを作る
今回は四つのタブを作ってみます。下記のコードを入力してください。
<nav class="bar bar-tab">
<a class="tab-item active" href="#">
TOP
</a>
<a class="tab-item" href="#">
ABOUT
</a>
<a class="tab-item" href="#">
WORK
</a>
<a class="tab-item" href="#">
BLOG
</a>
</nav>
<nav></nav>タグの間に
<a class="tab-item" herf="#">
タブ名
</a>`
という形式で追加していけば、タブの数を増やせます。しかし、レイアウトを崩さないように、四つ以内がおすすめです。サーバーにアップしてプレビューすると：
タブも出てきました。 では、内容を増やしてみよう、ちょっとした文章を入れます。下記のコードを入れます：
<div class="content">
<div class="content-padded">
<h1>ようこそ！</h1>
<p>ChainZのアプリを使っていただいてありがとうございます。このアプリは、ChainZについての情報を素早くゲットするために作られました。</p>
</div>
</div>
タイトルバーとタブバーの間に内容を表示させたい時に、必ず<div class="content"></div>の中にコードを書いてください。
文章の部分はパッディングが欲しいので、文章内容を<div class="content-padded"></div>でラップしてください。
この中に、標準のHTML記入すればレイアウトは勝手に調節してれます。では、今の様子確認してみよう：
文章が表示されました！
でも文字だけ寂しいので、画像を入れてみよう。画像は何でもいいですが、
筆者は自分のイラスト入れます。文章の前に表示させたいので<div class="content-padded">の直後に下記のコードを書きます。
<div class="image">
<img src="img/banner.jpg" width="100%">
</div>
img/banner.jpgには自分の画像データのパスを入れ替えてくさい。プレビューしてみると：
画像が表示されました。今大分アプリっぽくなりましたが、もうちょっと頑張りましょう。「いいね」ボタンを入れてみます（Facebookのやつではないが）。下記のコードを文章内容の終わり、</p>の直後に入れてください。
<button class="btn btn-primary btn-block">いいね</button>
いいねを別の文言にしても構いません。プレビューしたら青いボタンが出てきます。
これで、レイアウト大分完成しましたが、ボタンやタブをタップしても何の反応もないです。これから、ページの遷移を作ります。
「いいね」ボタンをタップすると、「ありがとう」というページへ遷移するとしよう。
まず、遷移先のページを作ります。今のページのコードを全部コピーして、新しいファイルに貼付けます。そして、<div class="content"></div>の間のコードを全部消して、好きな文章を入れます。私は下記のコードを入れました。
<div class="content-padded">
<h1>ありがとうございます！</h1>
</div>
<div class="image">
<img src="img/thanks.jpeg" width="100%">
</div>
このファイルをthanks.htmlという名前で保存、index.htmlと同じフォルダに置いときます。index.htmlを開いて、先ほど入力したボタンのコード：
<button class="btn btn-primary btn-block">いいね</button>
を<a href="thanks.html" data-transition="slide-in"></a>で囲んでください。
こうなります：
<a href="thanks.html" data-transition="slide-in">
<button class="btn btn-primary btn-block">いいね</button>
</a>
保存して、サーバーにアップして、確認してみよう。ボタンをタップすると、別のページに遷移しました。
しかし、待って。。戻れないぞ。そうです、今から戻る機能をつけます。thanks.htmlを開いて、<header class="bar bar-nav">の直後に、下記のコードを入れてください：
<a class="icon icon-left-nav pull-left" href="index.html" data-transition="slide-out"></a>
保存して、もう一度サーバーにアップしてプレビューすると、遷移したページのタイトルバーの左に戻るアイコンが出てきました、押すとスムーズに戻れます。
これで、アプリの形もう出てきました。
その後は、あなたの想像力で素晴らしいwebアプリを作ってみよう。