FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

Web技術でネイティブアプリ風にするJavaScriptライブラリまとめ

https://cdn-ak.f.st-hatena.com/images/fotolife/f/fjct/20171017/20171017180724.png

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アプリから、よりネイティブ風に使えるアプリに仕上げてください!