webでのシングルページアプリケーション作成に役立つ(はず)軽量ライブラリを作った
モバイル向けのwebアプリを作成していると、画面が狭いのであまりたくさんのコンテンツを表示できませんね。
その場合、複数のhtmlを用意して、リンクを張って、、っていうのも良いんですが、ページロードが遅くてイライラする。。
まぁそんな要望を叶える1つの考え方が、シングルページアプリケーション(SPA)なのですが、それを上手くやるjavascriptのライブラリを作ったので、紹介してみようとか思って、切り出してみました。
名をば、「single-page-manager」ってことにしておきます。
ダウンロードはこちら→single-page-managerのダウンロード
使い方は、
1.まず、jQueryが必要なんですね。読み込みます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>sample</title> <script src="jquery/jquery-2.1.3.min.js"></script> </head>
2.次に、single-page-manager-1.0.jsとsingle-page-manager-1.0.cssを読み込みます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>sample</title> <script src="jquery/jquery-2.1.3.min.js"></script> <script src="lib/single-page-manager-1.0.js"></script> <link rel="stylesheet" href="lib/single-page-manager-1.0.css" /> </head>
3.ホームとなるページを普通にbody以下に書きます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>sample</title> <script src="jquery/jquery-2.1.3.min.js"></script> <script src="lib/single-page-manager-1.0.js"></script> <link rel="stylesheet" href="lib/single-page-manager-1.0.css" /> </head> <body> <!-- home view--> <h1>ほーむだよ</h1> </body> </html>
4.重ねるレイヤーとなるページをdiv要素を使って以下のように書きます。
必要なページ数分だけ書きましょう。
※styleやcssで対象をdisplay:none;にしておけば、画面描画時のちらつきが防げます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>sample</title> <script src="jquery/jquery-2.1.3.min.js"></script> <script src="lib/single-page-manager-1.0.js"></script> <link rel="stylesheet" href="lib/single-page-manager-1.0.css" /> </head> <body> <!-- home view--> <h1>ほーむだよ</h1> <div id="layer-1" style="display: none;"> <div class="sbro-layer-header">layer1</div> レイヤー1だよ </div> <div id="layer-2" style="display: none;"> <div class="sbro-layer-header">layer2</div> レイヤー2だよ </div> </body> </html>
5.bodyの最後で(documentが読み終わった時点で)、以下のようにLayerManagerを生成します。
toLayerメソッドを使って、レイヤー化したい要素のセレクタを渡せば良いわけです。
<script> var layerManager = new sbro.LayerManager(); layerManager.toLayer("#layer-1"); layerManager.toLayer("#layer-2"); </script>
6.レイヤー化したページを開くには、layerManagerのopenメソッドを使います。
適当なボタンを作って、バインドしてみましょう。
<body> <!-- home view--> <h1>ほーむだよ</h1> <button id="open-layer-1">レイヤー1を開く</button> <div id="layer-1" style="display: none;"> <div class="sbro-layer-header">layer1</div> レイヤー1だよ <br> <br> <button id="open-layer-2">レイヤー2を開く</button> </div> <div id="layer-2" style="display: none;"> <div class="sbro-layer-header">layer2</div> レイヤー2だよ </div> </body> <script> var layerManager = new sbro.LayerManager(); layerManager.toLayer("#layer-1"); layerManager.toLayer("#layer-2"); $('#open-layer-1').on('click', function() { layerManager.open("#layer-1"); }); $('#open-layer-2').on('click', function() { layerManager.open("#layer-2"); }); </script>
以上で、ボタンをクリックした際にページが画面いっぱいに開きます!
homeボタンを押せば、管理されているすべてのレイヤーが閉じて一気にホームに戻れる感じです。
他にも、ボタンのキャプション変えられたり、ページ遷移にアニメーション付けたり(要animate.css)できます。
詳しくは、サンプルソースを参照してみてね♪
ダウンロードはこちら→single-page-managerのダウンロード
最後に、全サンプルソースを載せておきます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>sample</title> <script src="jquery/jquery-2.1.3.min.js"></script> <script src="lib/single-page-manager-1.0.js"></script> <link rel="stylesheet" href="lib/single-page-manager-1.0.css" /> </head> <body> <!-- home view--> <h1>ほーむだよ</h1> <button id="open-layer-1">レイヤー1を開く</button> <div id="layer-1" style="display: none;"> <div class="sbro-layer-header">layer1</div> レイヤー1だよ <br> <br> <button id="open-layer-2">レイヤー2を開く</button> </div> <div id="layer-2" style="display: none;"> <div class="sbro-layer-header">layer2</div> レイヤー2だよ </div> </body> <script> var layerManager = new sbro.LayerManager(); layerManager.toLayer("#layer-1"); layerManager.toLayer("#layer-2"); $('#open-layer-1').on('click', function() { layerManager.open("#layer-1"); }); $('#open-layer-2').on('click', function() { layerManager.open("#layer-2"); }); </script> </html>
別のhtmlファイルをテンプレートとしてロード~レイヤー化させる機能も欲しかったのですが、かったりーのでやめました。
誰か、「そんなの楽勝だぜぃ」という心から素敵な方、修正お待ちしております笑