Onsen UI 2をはじめよう

Onsen UIを使ったモバイルアプリ開発はこんなに簡単です!

Cordovaハイブリッドアプリ開発を行うための、ローカル開発環境のセットアップ方法について説明します。Monacaを使うと、リモートビルドや高度なデバッグ機能をご利用いただけます。Monaca CLIはCordova CLIと共にご利用いただくこともできます。

  1. Monaca CLIをインストールします

    まずはNode.jsをインストールしてください。次に、npmを通じてMonaca CLIをインストールし、Onsen UIの開発環境をセットアップします。GUI環境をご希望の方は、Monaca Localkitで、WindowsとmacOSに対応したデスクトップアプリをご利用ください。

    npm install -g monaca
    環境構築がうまくいかない場合は、クラウドを使用するMonacaクラウドIDEを是非お試しください。
  2. プロジェクトを作成する

    テンプレートから作りたいOnsen UIアプリを選択します。Onsen UIのバージョンと、一緒に使用するフレームワークを選択できます。

    
                    monaca create helloworld
                  
  3. デバイス上で実行する

    previewコマンドを実行すると、ブラウザー上で実行できます。モバイル端末上で動作させるには、debugコマンドを実行してください。

    
                    cd helloworld
                    monaca preview # ブラウザー上でプレビュー
                    monaca debug # デバイスのデバッガー上で実行
                    monaca remote build # アプリをビルド
                  

MonacaクラウドIDEを使うと、コーディングからリモートビルドまでをクラウド上で簡単に開発することができます。

  1. Monacaアカウントを作成

    Monacaアカウントを作成し、ダッシュボードにアクセスしてください

    Monacaアカウントの作成(無料)

  2. 新しいプロジェクトを作成

    プロジェクトの作成をクリックし、Onsen UI 2.0テンプレートを選択してください。Angular 2+やReactを使う場合は、Monaca CLIをご利用ください。

  3. クラウドIDEを開く

    プロジェクトの開くをクリックすると、開発をスタートできます。

  4. デバッガーでプロジェクトを実行し、コードをビルドしてみましょう。

    Monaca Debuggerをモバイル端末にインストールすると、簡単にアプリを実行することができます。

    リモートビルドを使うと、Android、iOS、Windowsアプリ向けのパッケージを簡単に作成して配布できます。

Onsen UIはnpmやBower経由でもインストールできます。

  • NPMを用いたダウンロード

    下記のようにしてパッケージをインストールできます。

    npm install onsenui

    Onsen UIはCommonJSとAMDの両方に対応しています。Browserify、RequireJS、WebPackといったバンドラーと共にご利用ください。

    フレームワーク用のバインディングも提供されています: react-onsenui, angular2-onsenui, vue-onsenui. AngularJS向けのバインディングは、onsenuiパッケージに付属しています。
  • Bowerを用いたダウンロード

    Bowerを用いてOnsen UIをインストールできます。

    bower install onsenui
  1. 配布パッケージ

    すべてのリリース情報は、Onsen UI配布リリースにまとまっています。

  2. 完全なソースコード

    ソースコードとビルド方法の説明は、GitHubレポジトリに記述されています。

    最新のmasterブランチをダウンロードするにはこちら