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

ratchet
  • URLをコピーしました!

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

Ratchet
Ratchet
目次

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

導入が簡単であること
テーマ用のCSSもあるが、基本ファイルはCSSJS2つだけ
学習コストがかからないこと
書き方がBootstrapとほぼ変わらないので馴染みがある
依存、または干渉しないこと
ピュアなJavaScriptなので、jQueryなどのライブラリも使える
ネイティブっぽいこと
PjaxPushState + 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...

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

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

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.

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

あわせて読みたい
Components · Ratchet Ratchet: Build mobile apps with simple HTML, CSS, and JS components.

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

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

あわせて読みたい
Examples · Ratchet Ratchet: Build mobile apps with simple HTML, CSS, and JS components.
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (3件)

  • […] スマホ用の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 […]

  • […] 以前紹介した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 […]

コメントする

CAPTCHA


目次