WEBアプリ開発記

~備忘録としてね~

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ファイルをテンプレートとしてロード~レイヤー化させる機能も欲しかったのですが、かったりーのでやめました
誰か、「そんなの楽勝だぜぃ」という心から素敵な方、修正お待ちしております笑