アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

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と画面遷移を持つことで、より、ネイティブのアプリに近づきますね!
トランジションとネイティブコンポーネント、興味のある方はやってみてください!

それではまた!

* リンク


スマートフォンアプリケーション開発環境 Monaca
トランジションについてのドキュメント