スマートフォン用UIフレームワーク「lungo.js」で地図アプリを作ってみる

とある事情により、スマホ向けに地図を使ったWebApp的なものを作る必要があって、モバイル向けフレームワークをいろいろ試しています。

個人的には「lungo.js」というフレームワークが手持ちのiPhone4sで見てもキビキビ動いて気に入ったのですが、IEにはまったく対応していないらしいので今回は見送り。（公式のKitchenSinkもIE10で動かなかったので、IEは完全スルーという方針らしいです）

かなり性能の良いフレームワークだと思うのですが、日本語ドキュメントはおろか英語のドキュメントすら公式以外にはほとんど見当たらないというニッチさ。

興味がある方は使ってみてください。

サンプル

example

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>lungo gmap</title>
<meta name="description" content="">
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="cleartype" content="on">

<!-- Main Stylesheet -->
<link rel="stylesheet" href="../css/lungo.css">
<link rel="stylesheet" href="../css/lungo.theme.css">
<link rel="stylesheet" href="../css/lungo.icon.css">
		
<style>
html, body{
    margin: 0px;
    padding: 0px;
}
html, body, #map {
	width: 100%;
	height: 100%;
}
</style>		
		
</head>

<body>
<!-------------------------------------------------------------------------------------------------------
	サイドメニュー
---------------------------------------------------------------------------------------------------------->
<aside id="features" >
	<header>
		<h1 class="title text big">Menu</h1>
	</header>

	<article id="sss" class="list active">
		<ul>
			<li  class="active"  data-view-article="map-art" data-title="地図" data-icon="map-marker">
				<a href="#">
					<strong>地図</strong>
				</a>
			</li>

			<li data-view-article="route-atr" data-title="施設"  data-icon="align-justify">
				<div class="tag count on-right">4</div>
				<strong class="text big">施設</strong>
				<small>タップした地点に移動</small>
			</li>
		</ul>
	</article>
</aside>


<!-------------------------------------------------------------------------------------------------------
	メインコンテンツ
---------------------------------------------------------------------------------------------------------->
<section id="layout" data-transition="" data-aside="features">
	<!-- ヘッダー -->
	<header data-tistle="Layout">
		<nav class="on-left">
			<a href="#" data-view-aside="features" data-icon="menu"></a>
		</nav>
		<h1 class="title centered">
			タイトル
		</h1>
	</header>

	<!-- 地図ー -->
	<article id="map-art" class="active">
	   <div id="map"></div>
	</article>  

	<!-- 施設一覧 -->	
	<article id="route-atr" class="list scroll ">
		<ul>
			<li class="anchor contrast">高崎</li>
			<li>
				<a  href="#"  data-view-article="map-art" data-action="point_selected" data-latlng="36.322356,139.013057">
					<strong>高崎駅</strong>
				</a>
			</li>
			<li>
				<a  href="#" data-view-article="map-art" data-action="point_selected" data-latlng="36.3219477,139.00335240000004">
					<strong>高崎市役所</strong>
				</a>
			</li>

		<li class="anchor contrast">大宮</li>		
			<li>
				<a  href="#" data-view-article="map-art" data-action="point_selected" data-latlng="35.906295,139.62399900000003">
					<strong>大宮駅</strong>
				</a>
			</li>
			<li>
				<a  href="#" data-view-article="map-art" data-action="point_selected" data-latlng="35.923507,139.63239">
					<strong>大宮公園</strong>
				</a>
			</li>		
		</ul>
	</article>
	
	<!--
	<footer>
		<nav>
			<a href="#" data-view-article="map-art" data-icon="screenshot" class="active" ></a>
		</nav>
	</footer>
	-->	
</section>


<script src="../quo.js"></script>
<script src="../lungo.js"></script>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script>
	Lungo.init({
		name: 'Flexbox',
		version: '2.2',
		history: false
	});

	Lungo.ready(function() {
		//画面表示時に再度メニューを開く
		Lungo.Aside.show("features");

		//Google Map 初期化
		var map = new google.maps.Map(document.getElementById('map'), {
			zoom: 16,
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			center: { lat: 35.906961392699998, lng: 139.622833797 },       
		});
		
		$$("[data-action=point_selected]").tap(function(event) {
			var latlng = this.dataset.latlng.split(",");
			map.panTo(new google.maps.LatLng(latlng[0], latlng[1]));
		});
		
	});

</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

<!doctype html>

<html>

<head>

<title>lungo gmap</title>

<style>

html, body{

margin: 0px;

padding: 0px;

}

html, body, #map {

width: 100%;

height: 100%;

}

</style>

</head>

<body>

<!-------------------------------------------------------------------------------------------------------

サイドメニュー

---------------------------------------------------------------------------------------------------------->

</header>

<ul>

</a>

</li>

<small>タップした地点に移動</small>

</li>

</ul>

</article>

</aside>

<!-------------------------------------------------------------------------------------------------------

メインコンテンツ

---------------------------------------------------------------------------------------------------------->

</nav>

タイトル

</h1>

</header>

</article>

<ul>

<li>

</a>

</li>

<li>

<strong>高崎市役所</strong>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</article>

<!--

<nav>

</nav>

</footer>

-->

</section>

Lungo.init({

name: 'Flexbox',

version: '2.2',

history: false

});

Lungo.ready(function() {

//画面表示時に再度メニューを開く

Lungo.Aside.show("features");

//Google Map 初期化

var map = new google.maps.Map(document.getElementById('map'), {

zoom: 16,

mapTypeId: google.maps.MapTypeId.ROADMAP,

center: { lat: 35.906961392699998, lng: 139.622833797 },

});

$$("[data-action=point_selected]").tap(function(event) {

var latlng = this.dataset.latlng.split(",");

map.panTo(new google.maps.LatLng(latlng[0], latlng[1]));

});

</script>

</body>

</html>

サンプル

投稿者: shimizu