Ratchetを使ってネティブアプリに迫るwebアプリを作る

ChainZ(クリエイター)
いろいろやってます。

ratchetとは

ratchet(http://goratchet.com/)はスマートフォンのネティブアプリようなレイアウトとアニメーション効果を提供するコンポーネントです。簡単なHTMLコードでネティブアプルようなうwebアプリを作れます。

ratchetをダウンロード

ratchetの公式サイトからダウンロードできます:http://goratchet.com/

ファイルをダウンロードして解凍すると、フォルダにファイルがたくさん入っています。

ratchetフォルダ

今回使うファイルはdistに入っています。その中をみてみると、三つのフォルダが入っています。

ratchetフォルダ2

フォルダ 内容
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フォルダ3

では、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シミュレーターで確認しています)。スマフォでみると、タイトルバーが表示されます。

プレビュー1

タブバーを作る

今回は四つのタブを作ってみます。下記のコードを入力してください。

<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>`

という形式で追加していけば、タブの数を増やせます。しかし、レイアウトを崩さないように、四つ以内がおすすめです。サーバーにアップしてプレビューすると:

プレビュー2

タブも出てきました。 では、内容を増やしてみよう、ちょっとした文章を入れます。下記のコードを入れます:

<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記入すればレイアウトは勝手に調節してれます。では、今の様子確認してみよう:

プレビュー3

文章が表示されました! でも文字だけ寂しいので、画像を入れてみよう。画像は何でもいいですが、 筆者は自分のイラスト入れます。文章の前に表示させたいので<div class="content-padded">の直後に下記のコードを書きます。

    <div class="image">
        <img src="img/banner.jpg" width="100%">
    </div>

img/banner.jpgには自分の画像データのパスを入れ替えてくさい。プレビューしてみると:

プレビュー4

画像が表示されました。今大分アプリっぽくなりましたが、もうちょっと頑張りましょう。「いいね」ボタンを入れてみます(Facebookのやつではないが)。下記のコードを文章内容の終わり、</p>の直後に入れてください。

    <button class="btn btn-primary btn-block">いいね</button>

いいねを別の文言にしても構いません。プレビューしたら青いボタンが出てきます。

プレビュー5

これで、レイアウト大分完成しましたが、ボタンやタブをタップしても何の反応もないです。これから、ページの遷移を作ります。

「いいね」ボタンをタップすると、「ありがとう」というページへ遷移するとしよう。

まず、遷移先のページを作ります。今のページのコードを全部コピーして、新しいファイルに貼付けます。そして、<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>

保存して、サーバーにアップして、確認してみよう。ボタンをタップすると、別のページに遷移しました。

プレビュー6

しかし、待って。。戻れないぞ。そうです、今から戻る機能をつけます。thanks.htmlを開いて、<header class="bar bar-nav">の直後に、下記のコードを入れてください:

<a class="icon icon-left-nav pull-left" href="index.html" data-transition="slide-out"></a>

保存して、もう一度サーバーにアップしてプレビューすると、遷移したページのタイトルバーの左に戻るアイコンが出てきました、押すとスムーズに戻れます。

プレビュー7

これで、アプリの形もう出てきました。

その後は、あなたの想像力で素晴らしいwebアプリを作ってみよう。

デモ:http://lab.colormel.com/demo/ratchet