Ratchet試してみた - 鴨のいいカモです

モバイル向けのそれっぽい画面を作る必要があり、そこでちょろっと試したRachetが結構いい感じだったので、少し時間かけて触ってみることにしました。対象はv2.0.2です。

Ratchetとは

Ratchet

モバイル向けアプリに特化した画面フレームワークです。Bootstrapみたいなものです。

プロジェクトとしても実際にBootstrapプロジェクトの一部となっています。

デモはExamples · Ratchetから見られます。

特徴

モバイルに特化しているのでファイルサイズが小さい
CSSを入れ替えるだけで、AndroidとiOS両方に似せた見た目にできる
ネイティブっぽくするために、AjaxとHistory APIを使ったSPAが簡単にできる

なんともいい感じです。

触った感想

ほんとうに短時間でモバイルアプリっぽい画面が簡単に作れてびびる。んですが、できることも少なめではあるので、凝ったことをやろうとすると色々作らないとダメそう。デモやモックアップ作成用途にはかなーり良さげ。

ちょっと触ってみよう

準備

とりあえずRatchet公式サイトからブツをダウンロードするなり、twbs/ratchet · GitHubからcloneするなりします。

そこのdist配下にあるcss,fonts,jsを配置しましょう。

HTMLを作る

.
├── css
├── fonts
├── js
└── index.html

上記構成と仮定して、次のようなHTMLを作ります。

<!DOCTYPE html>
<html>
<head lang="ja">
  <meta charset="utf-8">
  <title>タイトル</title>

  <!-- Sets initial viewport load and disables zooming  -->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

  <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="mobile-web-app-capable" content="yes">

  <!-- Include the compiled Ratchet CSS -->
  <link href="css/ratchet.css" rel="stylesheet">

  <!-- Include the compiled Ratchet JS -->
  <script src="js/ratchet.js"></script>
</head>
<body>

<header class="bar bar-nav">
  <h1 class="title">Ratchetテスト</h1>
</header>

<div class="content">
  <div class="content-padded">
    <p>Hello, Ratchet!</p>
    <button class="btn btn-positive btn-block">こんにちは！</button>
  </div>
</div>

</body>
</html>

基本的にはratchet.cssとratchet.jsを読み込んであげるだけでよいです。meta要素も上記の用な感じで。

タイトルバーはheader要素のclassをbarとbar-navにして、h1要素で書きます。

<header class="bar bar-nav">
  <h1 class="title">Ratchetテスト</h1>
</header>

コンテンツはdiv要素のclassをcontentにして、その中に書きます。そうするとスクロール可能になります。左右パディングが必要な場合は更にcontent-paddedなdiv要素を置いて、その中にコンテンツを書いてあげればOK。

これで、

f:id:labduck:20150219233106p:plain

こんな感じの画面になります。簡単！ちなみに確認は実機でやるか、Chrome Developer ToolsのDevice Modeでモバイルデバイスをエミュレートしてやればよいです。僕は後者で。

画面をiOS/Android風に

iOS風の画面にしたい場合は、次のようにratchet-theme-ios.cssを追加で読み込んであげるだけでよいです。

<link href="css/ratchet.css" rel="stylesheet">
<link href="css/ratchet-theme-ios.css" rel="stylesheet">

今回のだと見た目がかわんないのでキャプチャはなしで。Androidだと、ratchet-theme-android.cssですね。

f:id:labduck:20150219234207p:plain

これまた簡単。いいですね。

今日はこのへんにして、次は主要パーツをさらってみようと思います。