アシアルブログ

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

Monacaネイティブコンポーネント

こんにちは、斉藤です。

今回は、自社サービスのMonacaについての宣伝と講座です!
先日リリースしたネイティブコンポーネントという機能の使い方についてご説明します。
今回はこんなことをお伝えしようと思います。


・ネイティブコンポーネントとは
・ネイティブコンポーネントの一つ、ツールバーを表示させる方法


※この記事はMonacaを使ったことがある方向けになりますので、Monacaを使ったことが無い方は、まずはこちらから。


* ネイティブコンポーネントって?


Monacaを使ったことのある方なら、ご存知だと思うのですが、MonacaはWebViewベースのアプリケーション開発環境です。
そのため、iPhoneAndroidが独自で持っているUIコンポーネントを使うことが出来ませんでした。



iPhoneを使ったことのある方なら分かると思いますが、あのUIって結構リッチですよね!
あれがあるだけでも、アプリって見栄えが良くなりますよね?
僕たちは、あのUIをネイティブコンポーネントと呼んでいます。

社内では、それを使ったアプリケーション開発環境を整えるべく、いろいろと画策をし、Monaca製アプリでも可能にしました!
というわけで、その使い方について語ります。
実際にどのように使うのかを、Monacaを使って見てみましょう!



* ネイティブコンポーネントの一つ、ツールバーを表示させる


ここでは、ネイティブコンポーネントの一つである、ツールバーを使います。
まずは、Monacaでプロジェクトを作ります。
お試しということで、こんな感じで作りました。



プロジェクトを開いたら、index.uiというファイルを作ります。
この.uiというファイルが、ネイティブコンポーネントを表示するための重要なファイルです。
index.htmlには、index.uiというように、htmlでネイティブコンポーネントを使いたい時は、その対の.uiファイルを作る必要があります。



index.uiには、以下の形で編集を行いました。JSON形式によって、それぞれの定義を書いています。


{
    "top": {
        "container": "toolbar",
        "style": {
            "title": "Demo"
        },
        "right": [{
            "component": "button",
            "style": {
                "text": "tap me!"
            },
            "event": {
                "onTap": "onTapButton()"
            }
        }]
    }
}


この辺りの詳しい書き方は、Monacaドキュメントをご覧ください。index.uiファイルには、


・画面上部(top)にはツールバー(toolbar)を使う
・タイトル(title)には、"Demo"と表示させる
・右側(right)にボタン(button)を置く
・ボタンを押したとき(onTap)にJavaScript(onTapButton())を走らせる

といったことを書いています。

ちなみに、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>
        native component demo
    </body>
</html>


ここまでの作業を行った後、デバッガで確認してみます。
どうでしょうか?




ネイティブコンポーネントが表示されました。
上側の画面がネイティブコンポーネントを使っているもの、下側が使っていないものです。
見比べれば分かりますが、わざわざCSSを書いて、ヘッダを作らなくても、これを使ってOSが持つUIを表示した方が、より早く見栄えを整えられますね!

次に、ボタンを押した時の挙動も作ってみます。
index.htmlに、先ほど.uiファイルに記述したJavaScriptの関数(onTapButton)の定義を書きます。



<!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});
            function onTapButton(){
                alert("ネイティブコンポーネントからでも、JavaScriptが走ります!");
            }
        </script>
    </head>
    <body>
        native component demo
    </body>
</html>


ここもデバッガで確認しましょう。
右上のボタンをタップすると、index.htmlに書いたJavaScriptが走ります!
このように、ネイティブコンポーネントを使うと、OSの持つリッチなUIを置きつつも、JavaScriptを利用したWebViewベースのアプリケーションを開発することができます。




* まとめ


これを使ってみると分かっていただけると思うのですが、htmlベースだからクロスプラットフォーム、さらにネイティブコンポーネントによるリッチさ。
Monacaでは、そんな新しいアプリケーション作成環境を用意しています!
読んでくれた方々に、使っていただけることを期待しつつ、この辺りで。

この次は、ネイティブコンポーネントと同時にリリースした機能"トランジション"についてご紹介しますね!
それではまた!

8/4追記:Monacaトランジションについての記事を書きました。

* リンク


MonacaWebサイト
ネイティブコンポーネントについて