Asial Blog

Recruit! Asialで一緒に働きませんか?

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

カテゴリ :
Monaca
タグ :
Tech
Monaca
HTML5
iPhone
Android
はじめまして!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]
  1. <body>
  2.     <ons-tabbar>
  3.         <ons-tabbar-item page="left.html" active="true">
  4.             left
  5.         </ons-tabbar-item> 
  6.         <ons-tabbar-item page="right.html">
  7.             right
  8.         </ons-tabbar-item> 
  9.     </ons-tabbar>
  10. </body>
<ons-tabbar>タグは、タブバー全体を定義します。
<ons-tabbar-item>タグは、タブバー内の1つ分の項目を定義します。
page属性にはタブ選択時に表示するページのURLを指定します。
また、active属性をtrueに設定することで、タブが選択された状態にすることができます。
今回の例では、初期表示時に左側のタブが選択された状態にしています。

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

[left.html]
  1. <body>
  2.     <h1>ひだり</h1>
  3. </body>

[right.html]
  1. <body>
  2.     <h1>みぎ</h1>
  3. </body>

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




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

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


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

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

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

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

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

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




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

チャット画面




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


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

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

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