【Ratchet】WEB上で簡単にiOSやAndroidライクなSPAが実現できるフレームワーク

2018年3月25日2022年8月8日

URLをコピーしました！

SPA（シングルページアプリケーション）のフレームワークと聞くと、どうしてもReactやAngular等のJavaScriptのライブラリを想像すると思いますが、今回は学習コストがかかるような複雑なものでなく、iOSやAndroidのネイティブアプリのようなUIを実現するためのCSSを中心としたシンプルなSPAフレームワーク「Ratchet」を紹介します。

フレームワークの選考基準

導入が簡単であること: テーマ用のCSSもあるが、基本ファイルはCSSとJSの2つだけ
学習コストがかからないこと: 書き方がBootstrapとほぼ変わらないので馴染みがある
依存、または干渉しないこと: ピュアなJavaScriptなので、jQueryなどのライブラリも使える
ネイティブっぽいこと: Pjax（PushState + Ajax）を利用したページ遷移とエフェクトでネイティブアプリっぽい

SPA（シングルページアプリケーション）とは？

シングルページアプリケーション（英: single-page application、SPA）とは、単一のWebページのみから構成することで、デスクトップアプリケーションのようなユーザ体験を提供するWebアプリケーションまたはWebサイトである。
必要なコード（HTML、JavaScript、CSS）は最初にまとめて読み込むか、ユーザの操作などに応じて動的にサーバと通信し、必要なものだけ読み込みを行う。
シングルページアプリケーション – Wikipedia

Ratchetの導入

上記の通り、Ratchetの導入は下記の2行をheadタグ内に記述して読み込むだけの簡単作業です。
CDNもありますので、こちらをどうぞ。

cdnjs

ratchet - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for develope... Build mobile apps with simple HTML, CSS, and JS components. - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN servic...

<link href="//cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/js/ratchet.min.js"></script>

iOSのテーマにしたい場合は、

<link href="//cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet-theme-ios.min.css" rel="stylesheet">

Androidのテーマにしたい場合は、

<link href="//cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet-theme-android.min.css" rel="stylesheet">

をratchet.min.cssの下に加えてください。

Ratchetの書き方

基本的に、table-view > table-view-cellな感じで構築するようです。
Getting startedに書いてありましたので転記します。

あわせて読みたい

Getting started · Ratchet Ratchet: Build mobile apps with simple HTML, CSS, and JS components.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ratchet template page</title>    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">    <!-- 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">    <!-- Include the compiled Ratchet CSS -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.min.css" rel="stylesheet">    <!-- Include the compiled Ratchet JS -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/js/ratchet.min.js"></script>
  </head>
  <body>    <!-- Make sure all your bars are the first things in your <body> -->
    <header class="bar bar-nav">
      <h1 class="title">Ratchet</h1>
    </header>    <!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
    <div class="content">
      <p class="content-padded">Thanks for downloading Ratchet. This is an example HTML page that's linked up to compiled Ratchet CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some Ratchet resources:</p>
      <div class="card">
        <ul class="table-view">
          <li class="table-view-cell">
            <a class="push-right" href="http://goratchet.com">
              <strong>Ratchet documentation</strong>
            </a>
          </li>
          <li class="table-view-cell">
            <a class="push-right" href="https://github.com/twbs/ratchet/">
              <strong>Ratchet on Github</strong>
            </a>
          </li>
          <li class="table-view-cell">
            <a class="push-right" href="https://groups.google.com/forum/#!forum/goratchet">
              <strong>Ratchet Google group</strong>
            </a>
          </li>
          <li class="table-view-cell">
            <a class="push-right" href="https://twitter.com/goratchet">
              <strong>Ratchet on Twitter</strong>
            </a>
          </li>
        </ul>
      </div>
    </div>  </body>
</html>

他にも、ヘッダーとフッター、スライドショーやモーダルなども用意されていますので、詳しくはComponentsをご覧ください。

サンプルアプリケーション

公式サイトのサンプルがありますので、こちらをご覧ください。

コメント一覧（3件）

URLスキームでスマホのWEBブラウザからアプリを起動する | Minory より:

2018年4月12日 2:33 PM

[…] スマホ用のWEBアプリ作ることが増えた今日この頃。ネイティブアプリと連携したくなることもしばしばあります。以前から、メールアプリを開いて指定した宛先に送信させたい場合は「mailto:～」、電話アプリから指定した電話番号へ発信させたい場合は「tel:～」と言うのは以前から知っていましたが、このURLスキームでインストールしたネイティブアプリが起動するのは知らなかった。 AppleならiOS4から対応していたとのこと。一般的に、URL Scheme（スキーム）やDeepLink（ディープリンク）と呼ぶこともあリ、iOS9からはUniversal Links（ユニバーサルリンク）を使うらしい。【Ratchet】WEB上で簡単にiOSやAndroidライクなSPAが実現できるフレームワークhttps://minory.org/ratchet.htmlSPA（シングルページアプリケーション）のフレームワークと聞くと、どうしてもReactやAngular等のJavaScriptのライブラリを想像すると思いますが、今回は学習コストがかかるような複雑なものでなく、iOSやAndroidのネイティブアプリのようなUIを実現するためのCSSを… Minory 1 share 1 user […]

返信
シンプルにjQuery(Ajax)とpushStateのみで実現するSPA用スクリプト | Minory より:

2018年4月14日 10:42 AM

[…] 以前紹介したCSSフレームワーク「Ratchet」は、まさに今回の応用です。実際には「pjax（pushState + ajax）」というjQueryのプラグインを使っていますが、今回はjQueryとpushStateのみでSPA（シングルページアプリケーション）を実装します。【Ratchet】WEB上で簡単にiOSやAndroidライクなSPAが実現できるフレームワークhttps://minory.org/ratchet.htmlSPA（シングルページアプリケーション）のフレームワークと聞くと、どうしてもReactやAngular等のJavaScriptのライブラリを想像すると思いますが、今回は学習コストがかかるような複雑なものでなく、iOSやAndroidのネイティブアプリのようなUIを実現するためのCSSを… Minory 1 share 1 user […]

返信
iOS 11のSafariがWebRTCに対応してたのでSkyWayのサンプル作成！ | Minory より:

2018年8月4日 10:05 AM

[…] レッシブ・ウェブ・アプリケーション）とも言うらしい【Ratchet】WEB上で簡単にiOSやAndroidライクなSPAが実現できるフレームワークhttps://minory.org/ratchet.htmlSPA（シングルページアプリケーシ […]

返信