その他

Monacaが正式リリースしました!

はじめまして!Monacaエバンジェリストの生形です。
長い間パブリックベータ版として皆様にご愛顧頂いておりましたMonacaが、
9/12、ついに正式リリースを迎えました!

本日は、正式リリースで追加された新機能のうち、目玉の2機能をご紹介します!

UIフレームワーク Onsen UI

Onsen UIは、シンプルなコードでモバイル用UIを構築することができる、HTML5ベースのUIフレームワークです。

ここでは、基本的な利用方法を解説します。
まず、プロジェクトのプラグイン設定で、Onsen UIを有効にします。

続いて、ページを構成するhtmlファイルにOnsen UIをロードするための記述を追記します。

以上で、Onsen UIを利用するための準備が整いました。

Onsen UIには”ons-“で始まる様々な独自タグが用意されており、それらをhtmlファイルに記述することで、
モバイルアプリライクなリストやボタンなどのコンポーネントを簡単に作ることができます。

今回は、コンポーネントの1つである、タブバーを定義するタグの使い方を見てみましょう。

htmlファイルの構成は以下の通りです。

    • index.htmlタブバーを定義

 

    • left.html左側のタブに関連付いたページを定義

 

    • right.html右側のタブに関連付いたページを定義

index.htmlは以下のように定義します。

[index.html]


<body>
    <ons-tabbar>
        <ons-tabbar-item page="left.html" active="true">
            left
        </ons-tabbar-item> 
        <ons-tabbar-item page="right.html">
            right
        </ons-tabbar-item> 
    </ons-tabbar>
</body>

<ons-tabbar>タグは、タブバー全体を定義します。
<ons-tabbar-item>タグは、タブバー内の1つ分の項目を定義します。
page属性にはタブ選択時に表示するページのURLを指定します。
また、active属性をtrueに設定することで、タブが選択された状態にすることができます。
今回の例では、初期表示時に左側のタブが選択された状態にしています。

left.htmlとright.htmlはそれぞれ以下のようになっています。

[left.html]


<body>
    <h1>ひだり</h1>
</body>

[right.html]


<body>
    <h1>みぎ</h1>
</body>

実行すると、以下のような画面になります。

Onsen UIの詳細は、以下のドキュメントをご確認ください。
Onsen UI

チーム開発機能(一部機能は有料プランのみ利用可能)

これまでご要望の多かった、1つのプロジェクトを複数名で開発できるチーム開発機能がMonaca IDEに追加されました。

・開発者としての参加(プロジェクトの編集、チームメンバの管理)

Professional、Business、Enterpriseプランのみ利用可能

・テスターとしての参加(Monacaデバッガーによるテスト、チャット機能)

無料プランを含むすべてのプランで利用可能

チーム開発機能のイメージ

さらに、今回の正式リリースに伴い、Monacaデバッガーが2.0.0にバージョンアップしました。
(9/12時点でAndroid版のみ。iOS版は近日中に配信予定)
新機能として、アプリのスクリーンショットをキャプチャし、IDEにアップロードしてチームで共有することが可能になりました。

チャット画面

これらの機能により、中規模以上のアプリ開発時にチーム内での連携作業をスムーズに行うことができるようになります。

その他の新機能や各種料金プランの詳細が知りたい方は、以下のページをご確認ください。

正式リリース案内
料金プラン

今後も新機能の第二弾、第三弾が控えております!
パワーアップしたMonacaを、これからもどうぞよろしくお願いいたします。

author img for asial

asial

前の記事へ

次の記事へ

一覧へ戻る
PAGE TOP