Onsen UI Advent Calendar 2016 20日目の記事です。
はじめに言っておきますが、今回の記事は割としょーもない内容なので読むだけ時間の無駄です。
忘年会シーズンですね！
一年の労を労うということで、会社等で大々的な飲み会が開催されるんじゃないでしょうか？
でも大規模な飲み会になると、ちょっと残念なことがありますよね、、、
それは、遠くに座っている人と乾杯ができないことです！
そこでOnsen UIとMonacaを使って、離れた場所にいる人とでも乾杯した気分になれるスマホアプリを作ってみました。
ソースコード
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<script src="lib/onsenui/js/onsenui.min.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
<link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
<link rel="stylesheet" href="css/style.css">
<script>
// Page init event
document.addEventListener('init', function(event) {
var page = event.target;
if (page.matches('#first-page')) {
page.querySelector('#push-button').onclick = function() {
document.querySelector('#navigator').pushPage('page2.html');
};
} else if (page.matches('#second-page')) {
// 加速度計測開始
var watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, { frequency: 100 });
// 加速度取得成功時
function onSuccess(acceleration) {
// いいぐあいに傾けた時
if(Math.abs(acceleration.x) > 7) {
// 計測を止める
navigator.accelerometer.clearWatch(watchID);
// バイブレーション
navigator.vibrate(300);
// カンパイ！を表示
page.querySelector('#message').style['display'] = 'block';
}
}
// 加速度取得失敗時
function onError() {
alert('Error!');
}
}
});
</script>
</head>
<body>
<ons-navigator id="navigator" page="page1.html"></ons-navigator>
<ons-template id="page1.html">
<ons-page id="first-page">
<ons-toolbar>
<div class="center">Page 1</div>
</ons-toolbar>
<div class="content" style="text-align: center">
<p>グラスを持って乾杯の準備をしよう！</p>
<ons-button id="push-button">OK</ons-button>
</div>
</ons-page>
</ons-template>
<ons-template id="page2.html">
<ons-page id="second-page">
<ons-toolbar>
<div class="left"><ons-back-button>Page 1</ons-back-button></div>
<div class="center">Page 2</div>
</ons-toolbar>
<div class="content" style="text-align: center">
<p><ons-icon icon="ion-beer" size="300px"></ons-icon></p>
<div id="message" style="font-size:60px;color:red;display:none">カンパイ！</div>
</div>
</ons-page>
</ons-template>
</body>
</html>
Monacaの「Onsen UI V2 JS Navigation」をテンプレートとして作成したので、実装時間は３分くらいでした。
プリセットのアイコンの中にビールが入ってました。なんでもありますね。
デモ動画
（音声が出るので注意）
かんぱーい！ pic.twitter.com/apQhHDmKMw
— coboco (@_coboco) December 22, 2016
動画だとうまく伝わらないのが残念ですが、端末を傾けるとグラスをぶつけたときのように軽く振動するので、このうえなくリアルなUXが得られます！！
これは忘年会で大活躍間違いなしです。みなさんも使ってみてはいかがでしょうか。
私はもしこのアプリを使っている人を見かけたら、乾杯の時くらいスマホ置けよって思います。