FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

ハイブリッドアプリ開発に役立てたい。Onsen UIを使いこなすための8つのコツ

f:id:mbaasdevrel:20180322103103p:plain

Onsen UIはスマートフォンのハイブリッドアプリを作る際に便利なUIフレームワークです。特にMonacaとの相性がいいです。Monacaはニフクラ mobile backendと組み合わせるのがとても簡単なので、私自身Monacaアプリを作る際によく使っています。

しばらく使っていく中で、Onsen UIの便利な使い方が分かってきましたので紹介します。これからOnsen UIを使っていく方は参考にしてください。

インストール

今回はMonacaではなくOnsen UIについて紹介したいので、npmを使っていきます。適当なディレクトリを作ってnpmを初期化し、さらにOnsen UIをインストールします。

mkdir your-project
cd your-project
npm init .
npm install onsenui --save

これで node_modules/onsenui/js/onsenui.min.jsnode_modules/onsenui/css/onsenui.min.cssnode_modules/onsenui/css/onsen-css-components.min.css を読み込めば利用できます。

HTMLの基本

まずごく簡単なHTMLを書きます。先ほどのファイル群を読み込んでいるだけです。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta charset="utf-8" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="node_modules/onsenui/css/onsenui.min.css" />
    <link rel="stylesheet" href="node_modules/onsenui/css/onsen-css-components.min.css" />
    <!--[if lt IE 9]>
    <script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="shortcut icon" href="" />
  </head>
  <body>
    <!-- Example: <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
    <script src="node_modules/onsenui/js/onsenui.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

コツ1:ons-navigatorを組み込む

ons-navigatorはアプリのような画面遷移や、その遷移履歴を管理してくれる機能です。アプリが画面遷移するか否かに関わらず、まず定義しておくことをお勧めします。

<body>
  <ons-navigator swipeable id="nav" page="main.html"></ons-navigator>
  <!-- 省略 -->
</body>

そして最初に表示するページを main.html としていますので、main.html を作成します。このページは index.html のbodyタグ内に追加されるのでheadタグは不要です。ただしルートは <ons-page />タグになっている必要があります。

<ons-page>
  <h1>Hello Wolrd</h1>
</ons-page>

この状態で簡易的なWebサーバを立ててWebブラウザからアクセスすると、main.htmlの内容が表示されるはずです。

f:id:mbaasdevrel:20180322102752p:plain

コツ2:画面を作る

では次に画面を作っていきます。これは Onsen UIのサイトを見て、必要な画面部品を追加していけば良いでしょう。カルーセル、リスト、テキスト入力、リンク、ボタン、メニューなど様々に用意されています。

イベントの処理ですが、以下の二つがあります。

  1. onClickイベントを使う
  2. ID/クラスを指定する

onClickを使った場合、ページが読み込まれる度にイベントが定義されてしまいます。その結果、イベントが複数回呼び出されます。ページ遷移する際に消せば問題ありませんが、それは面倒です。そのため、ID/クラスを使ってイベントを指定するのがお勧めです。

例えば入力欄とボタンを押せるようにします。今回はボタンに #send を指定しています。

<ons-page>
  <h1>Hello Wolrd</h1>
  <ons-input id="message" modifier="underbar" placeholder="メッセージを入力" float></ons-input>
  <ons-button id="send">送信</ons-button>
</ons-page>

コツ3:コンポーネント化する

Onsen UIはWeb Componentsに準拠しているので、各画面ごとにJavaScript/CSSをまとめられます。これによって各機能が画面ごとにまとまるので、管理しやすくなります。アプリの場合、二つの画面が相互に関連し合うことはほぼありません。別な画面に移動する際に必要な情報さえ渡せれば問題ないはずです。

そこで、この main.html の中にスクリプトを書いていきます。以下のsendメソッドは入力されたメッセージを受け取って、別な画面(detail.html)に遷移するものです。最初に定義したons-navigatorにはnavというIDを指定しています。ons-navigatorにはpushPageというメソッドが定義されており、これを使うことでアニメーションしながら画面遷移してくれます。

コツ4として、別な画面に情報を渡す時にはdataというオプションを使います。

<ons-page>
  <h1>Hello Wolrd</h1>
  <ons-input id="message" modifier="underbar" placeholder="メッセージを入力" float></ons-input>
  <ons-button id="send">送信</ons-button>
  
  <script>
    ons.getScriptPage().onInit = function() {
      this.querySelector('#send').onclick = (e) => {
        const message = document.getElementById('message').value;
        if (message === '') {
          ons.notification.alert('メッセージを入力してください');
          return;
        }
        document.getElementById('nav').pushPage('detail.html', {
          data: {
            message
          }
        });
      }
    };
  </script>
</ons-page>

コツ5:画面遷移を作る

では次にdetail.htmlを作ります。これもまずはmain.htmlと変わらない形で作ります。

<ons-page>
  <h1>Detail</h1>
</ons-page>

ons-navigatorでは画面遷移もサポートしています。そこで以下のようにons-toolbarを追加することで画面を戻る操作が実現します。

<ons-page>
  <ons-toolbar>
    <div class="left"><ons-back-button>Back</ons-back-button></div>
    <div class="center"></div>
  </ons-toolbar>
  <h1>Detail</h1>
</ons-page>

たったこれだけで戻る操作が実現します。

f:id:mbaasdevrel:20180322102827g:plain

コツ6:データを受け取る

先ほど main.html で受け取ったデータを受け取る処理は ons.getScriptPage().onShow を使います。onShowはページが表示される度に実行されるイベントになります。対して onInit イベントは初回に一度だけ実行されます。

document.addEventListener('show') を使う方法もありますが、これはページが読み込まれる度に処理が追加されてしまい、複数回実行されます。onShowで関数を上書きするのがコツです。

<ons-page>
  <ons-toolbar>
    <div class="left"><ons-back-button>Back</ons-back-button></div>
    <div class="center"></div>
  </ons-toolbar>
  <h1>Detail</h1>
  <script>
    ons.getScriptPage().onShow = function() {
      ons.notification.alert(this.data.message);
    }
  </script>
</ons-page>

ons.getScriptPage().onShow は自分のページを読み込んだ時だけ実行されます。そして this がページ自身になります。受け取ったデータは this.data で取得できます。

f:id:mbaasdevrel:20180322102845p:plain

コツ7:アプリ全体に関係する変数

例えばmBaaSのように、アプリ全体に渡って共通した変数を使いたい場合はindex.htmlで読み込んだapp.jsにて定義しましょう。そして使うのは ons.ready になります。

ons.ready(() => {
  const ncmb = {};
  window.ncmb = ncmb;
});

例えばこうしておけば ncmb という変数はどのHTMLからでも使えるようになります。

コツ8:コンポーネントの欠点

コンポーネント化する際の欠点としては、それぞれのファイルで import が使えないことでしょう。そうした場合にも app.js 側で定義してアクセスするようにするのが良いかと思います。

まとめ

今回のコードは以下で試せます。

Onsen UIを使いこなせれば、ハイブリッドアプリ開発がとても素早く行えるようになります。独自のタグを使うので慣れるまでに時間を要するかも知れませんので、今回の記事を参考にメンテナンスしやすく、分かりやすい開発に取り組んでください。

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。