2012年7月25日

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

こんにちは、斉藤です。

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


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

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

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

Monacaを使ったことのある方なら、ご存知だと思うのですが、MonacaはWebViewベースのアプリケーション開発環境です。
そのため、iPhoneやAndroidが独自で持っている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ベースのアプリケーションを開発することができます。