HTML5/CSS/JavaScriptを使ってハイブリッドアプリを開発するCordovaやそれを使ったMonacaアプリを開発する際に使えるJavaScriptライブラリをそろえました。これらを使うことで、Webアプリケーションからよりネイティブアプリ風な操作が実現できるはずです。
フレームワークもありますが、どうしても書き方やUIに束縛ができてしまいます。そこで今回は一つの機能を手軽に利用できる、そんなライブラリを集めてみました。
画面遷移
Nav Stack スマートフォンアプリ風に左右に画面をスライド表示できるライブラリです。
- BackStack
- Backbone.jsを使ったWebアプリケーションに対して画面遷移機能を追加します。
メニュー
- Pushy
- CSSアニメーションを使ったメニュー表示ライブラリです
- Responsive Nav
- 画面の幅を変更するとハンバーガーメニューになるレスポンシブ対応のメニューライブラリです。
- PriorityNavigation.js
- 画面の幅を変更するとメニューの項目がまとまっていきます。大事なメニューから左に並べていくと良いようです。
- Pie Menu (like Path Menu) using jquery and CSS3 by Nikesh Hayaran
- Path風メニュー。タップすると回転しながら他の機能がアイコンで表示されます。
- Snap.js
- 左側に隠れたメニューです。Facebookなどのアプリでよく使われているものです。
- Selectnav.js
- よくあるハンバーガーアイコンのメニューです。
スクロール
- Scrollability
- iOSネイティブ風スクロールをサポートします。
- skrollr
- iOS8以降で使われているパララックスエフェクト風UIを実現します。現在、開発は停止しています。
- Infinity.js
- Airbnbが開発している無限スクロール系リストをサポートするライブラリです。
- iScroll 5, smooth scrolling for the web
- 昔から使われているライブラリで、ヘッダ部の固定やスクロールをサポートします。
- Inview • Waypoints
- 無限スクロールやスクロールに合わせたバナー表示などを実現します。
Pull to Refresh
- Pull to Refresh for the Web
- 引っ張ってコンテンツをリフレッシュする、Pull to Refresh風UIです。
- Material Refresh
- マテリアルデザイン風ということで引っ張るとリロードアイコンが徐々に大きくなるようになっています。
ホーム画面に追加
- JavaScript - manifest.json でWebアプリを「ホーム画面に追加」自動バナー表示に対応させる - Qiita
- Androidでホーム画面に追加を実現する方法です。
その他
- 3D Touch JavaScript Implementation
- iPhone 6s以降で搭載された3D TouchをJavaScriptで検出できます。
- jQuery Smart Banner - Jasny · web development
- アプリのインストールを促すスマートバナーをjQueryで実装します。メタタグで指定するよりも柔軟に動作させられます。
さいごに
これらを使いこなしてWebアプリから、よりネイティブ風に使えるアプリに仕上げてください！