Monacaトランジション
夏真っ盛りですね！
こんにちは、斉藤です。
今回も、アシアルのサービスであるMonacaの宣伝兼講座です！
前回の記事「Monacaネイティブコンポーネント」はいかがでしたか？
この記事では、そのネイティブコンポーネントと同時にリリースした”トランジション”と呼ばれる機能についてお伝えします。
Monacaって何？な方は、まずこちらから。
また、今回の記事はスクリーンショットで全てをお伝えすることが難しいため、実際にデバッガ上で動きをご確認ください。
* 複数画面のアプリが作りたい
iPhone, Androidのアプリケーションを触っていると、”最初の画面から、次の画面へ移る”といったことはよくありますよね？
・一覧画面から、詳細画面へ
・アプリケーション管理画面から、アプリケーションの設定画面へ
・メイン画面から、設定画面へ
などなど、 一つの画面では表示しきれない情報を扱うシーンはたくさんあります。
ところが、HTMLベースのアプリケーションでは、複数の画面を使うインターフェースを構成をすることができません。これは、HTMLを描画している画面（WebView）が違う画面に移る、といったことを標準でサポートしている訳ではないからです。
これを解決する方法として、
・aタグで代用する
・jQueryなどのライブラリを使い、画面遷移アニメーションを表現する
などなどと挙げられます。
もちろん、この方法でも、しっかりとしたものを作ることは可能です！
・・・ですが、aタグだと画面がぱっと変わるし、jQueryは結局複数のページのことを意識したHTMLが出来上がっちゃうし・・・
と、気になる人には気になりますよね。。。
そこで、僕たちからの提案として、”トランジション”という機能を提供します！
* トランジション
この言葉は、ネ イティブのアプリケーションが持つ画面遷移のことを指しています。
このトランジションを使うことで、こんなことが可能です。
・複数の画面を使ったアプリケーションを開発することが出来る
・ネイティブの持つ画面遷移アニメーションを利用することが出来る
それでは、前置きが長くなりましたが、これをMonacaで扱う方法を今回ご紹介します！
* 使ってみる
では、前回と同じように、お試し用のプロジェクトを用意します。
次に、このプロジェクトのIDEを開き、index.htmlの他に適当にhtmlファイルを作ります。
冒頭で述べた、”詳細画面”や”アプリケーション設定画面”といった二枚目の画面のためのhtmlとして作ります。
ここでは、名前をdetail.htmlとしました。
それぞれは、このように編集しています。
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Plain Project Skeleton</title>
<script type="text/javascript" src="plugins/plugin-loader.js"></script>
<script type="text/javascript">
// Set virtual screen width size to 640 pixels (横幅640pxに設定)
monaca.viewport({width: 320});
</script>
</head>
<body>
<h1>最初の画面</h1>
</body>
</html>
detail.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<!-- Please do not remote the following line -->
<script type="text/javascript" src="plugins/plugin-loader.js"></script>
<script type="text/javascript">
// Set virtual screen width size to 320 pixels
monaca.viewport({width: 320});
</script>
</head>
<body>
<h1>次の画面</h1>
<a href="index.html">戻る</a>
</body>
</html>
注意点：トランジションを使う中で、
<script type="text/javascript" src="plugins/plugin-loader.js"></script>
というタグが重要になります。ここは編集しないでください！
アプリケーションを作っていく中で、index.htmlから、detail.htmlに移りたくなったとします。
そんなときは、以下のタグをindex.htmlに書いてみてください。
<a href="javascript:void(0);" onClick="monaca.pushPage('detail.html');">トランジションを使って詳細画面へ</a>
出来たら、デバッガで実行して、このリンクをタップしてみます。
・・・どうですか？
画面がスライドして、切り替わったことが確認できましたか？
これがトランジションです！かっこいいですよね？
試しに、従来の方法である以下のタグでもやってみてください。
<a href="detail.html">トランジションを使わず詳細画面へ</a>
トランジション使っている方が、アプリを触っている気になりませんか？
もちろん、どちらの方法も適材適所で使っていただければ、と思いますが、トランジションの方もなかなかオススメです！
この、
monaca.pushPage('detail.html');
というメソッドによって、実現しています。
このドキュメントはこちら。
さらに。
次の画面を表示したら、元の画面に戻りたい時だってありますよね？
それもできます！
このタグをdetail.htmlに書いてみてください。
<a href="javascript:void" onClick="monaca.popPage();">トランジションを使って戻る</a>
デバッガで実行して、このリンクをタップすると・・・
アニメーションをして、index.htmlに戻ったことが確認できました！
これは、
monaca.popPage();
というメソッドによって、実現しています。
このドキュメントはこちら。
以上のことで、複数の画面をトランジションを使って、行き来することが出来ます。
* まとめ
トランジションという機能を使って、複数画面を行ったり来たりしてみました。
応用例として、.uiファイルの”onTap”に記述することで、ネイティブコンポーネントのボタンを押したときに、トランジションの機能を使うことも可能です。
ネイティブの持つUIと画面遷移を持つことで、より、ネイティブのアプリに近づきますね！
トランジションとネイティブコンポーネント、興味のある方はやってみてください！
それではまた！
* リンク
