Edited at 2016-12-15

アプリビジネスを超加速させたい営業・企画担当者向け！Onsen UIによるプロトタイプ作成のススメ

More than 1 year has passed since last update.

Onsen UI Advent Calendar 2016 16日目の記事です。

今回は営業・企画担当者の方向けにOnsen UIをおすすめしてみようと思います。
Onsen UIは技術者向けのツールではありますが、プロトタイプ作成段階までであれば、
「HTMLとCSSの基本くらいならわかるけど、JavaScriptとかプログラムはよくわからない」という方でも十分使えます！

なぜ、プロトタイプが必要なのか？

めまぐるしく変化を遂げるモバイルアプリ業界においては、スピード感が命ですよね。
しかし案件の初期の初期段階はアプリのイメージが沸かず、要件を詰めようとしてもなかなか次の段階に進まなくて困ることがあります。
そんなとき実際に動くものがあると説得力が違いますし、非常にスムーズに話が進みます！
100枚の資料より1つのプロトタイプですよ！

Onsen UIとは？

HTML5モバイルアプリのUIを実装するためのフレームワークです。プロトタイピング用のツールではありません。
詳しくは以前書いた記事を見てください。

なぜ、Onsen UIなのか

プロトタイピングツールには色々なものがありますが、
そこであえてプロトタイプ作成に特化したツールではなくOnsen UIを薦めるのには理由があります。
一般的なプロトタイプはあくまで企画段階で使い捨てられてしまうものであるのに対し、
Onsen UIで作成したプロトタイプは、ソースコードをそのまま実開発に流用することができるのです。
プロトタイピングツールのようにGUIだけで誰にでも簡単に作れる、とはいかないですが、HTMLやCSSが多少書ける方にはおすすめです！

利用するための準備

Onsen UIの導入方法は、開発環境によって異なります。
環境構築の手順をすっ飛ばして今すぐ使いたい、という場合はMonacaを推奨します。
Monacaは、モバイルアプリ開発に必要な様々なツールが含まれている開発環境です。
クラウドサービスなので、ブラウザを立ち上げれば何の準備もせずに開発をはじめることができます。

作り方

Monacaにログインして、プロジェクトの作成を行います。
Onsen UIのテンプレートがいくつか用意されているので、イメージに近いものを選びます。

ここでは「Onsen UI V2 JS Tabbar」を選択します。

起動すると、すでにタブバーが表示されています。これは<ons-tabbar> というOnsen UIのタグによって実装されています。

タブにアイコンを表示したい場合は、以下のサイトからアイコンを探して、<ons-icon> のicon属性にアイコン名を指定します。
- Font Awesome
- Ionicons
- Material Design Icons

変更前（37行目あたり）

<ons-tabbar position="auto">
  <ons-tab label="Tab 1" page="tab1.html" active>
  </ons-tab>
  <ons-tab label="Tab 2" page="tab2.html">
  </ons-tab>
</ons-tabbar>

変更後

<ons-tabbar position="auto">
  <ons-tab label="Home" page="tab1.html" active icon="home">
  </ons-tab>
  <ons-tab label="Favorites" page="tab2.html" icon="star">
  </ons-tab>
</ons-tabbar>

変更すると以下のような画面になります。

次にタブで選択されたページの内容を変えてみます。
Onsen UIでは、各ページを <ons-template> と <ons-page> の組み合わせで作ります。
<ons-template> で仮想的なHTMLファイルを作成し、 <ons-page> 内に表示するコンテンツを定義します。
これはお約束みたいなものだと思ってください。

変更前（45行目あたり）

<ons-template id="tab1.html">
  <ons-page id="first-page">
    <p style="text-align: center;">
      This is the first page.
    </p>
  </ons-page>
</ons-template>

変更後

<ons-template id="tab1.html">
  <ons-page id="first-page">
    <br>
    <ons-list modifier="inset">
      <ons-list-header>Default</ons-list-header>
      <ons-list-item>Item A</ons-list-item>
      <ons-list-item>Item B</ons-list-item>
    </ons-list>

    <br>

    <ons-list modifier="inset">
      <ons-list-header>Thumbnails and titles</ons-list-header>
      <ons-list-item>
        <div class="left">
          <img src="http://placekitten.com/g/40/40">
        </div>
        <div class="center">
          <span>Cutest kitty</span>
        </div>
      </ons-list-item>
    </ons-list>

    <br>

    <ons-list modifier="inset">
      <ons-list-header>Switch</ons-list-header>
      <ons-list-item>
        <div class="center">
          Turn it on
        </div>
        <div class="right">
          <ons-switch checked></ons-switch>
        </div>
      </ons-list-item>
    </ons-list>
  </ons-page>
</ons-template>

きれいなリストが表示されました！
タブ内での画面遷移も可能です。次は「Favotites」タブを選択して表示されるページから、次のページに画面遷移する仕組みを作ってみましょう。

変更前（84行目あたり）

  <ons-template id="tab2.html">
    <ons-page id="second-page">
      <p style="text-align: center;">
        This is the second page.
      </p>
    </ons-page>
  </ons-template>

変更後

<ons-template id="tab2.html">
  <ons-page>
    <ons-navigator id="navi" page="page1.html"></ons-navigator>
  </ons-page>
</ons-template>

<ons-navigator> というのは、画面遷移のための命令群を持っているコンポーネントです。
page属性に指定されているページが最初に表示されます。

さらに、<body> タグ内の一番下に、以下のコードを追記します。

body内に追記

<ons-template id="page1.html">
  <ons-page style="text-align:center">
    <p>
      <ons-button onclick="getElementById('navi').pushPage('page2.html')">詳細ページへ</ons-button>
    </p>    
  </ons-page>
</ons-template>

<ons-template id="page2.html">
  <ons-page style="text-align:center">
    <p>
      ここは詳細ページです
    </p>
    <p>
      <ons-button onclick="getElementById('navi').popPage()">戻る</ons-button>
    </p>
  </ons-page>
</ons-template>

ちょっとだけ、画面遷移のためにJavaScriptの命令が入ってしまいましたが、覚えれば良いのは以下の3点だけです。

getElementById() で <ons-navigator>要素を取得する
次のページに進みたい場合は pushPage("遷移先ページURL") という命令を使う
前のページに戻りたい場合は popPage() という命令を使う

これでFavoritesタブを選択すると、タブ内でページ遷移ができるようになります。

ソースコード解説は以上です！
Onsen UIの独自タグがたくさん出てきて最初は戸惑うかもしれませんが、タグの種類だけ覚えてしまえば簡単ですよ！

また、Onsen UI + Monacaでクイズアプリを10分で作るという記事も以前書いたので参考にしてください。
これはJavaScriptによる作り込みも含めて10分かかってますが、クイズの問題をHTMLにハードコーディングして、クイズの正誤判定機能も外してただ画面遷移するだけのプロトタイプなら5分くらいで作れると思います。

打合せで「こんなアプリが作りたいんだよねー」なんて話が上がって、5分後に「こんな感じでどうですか？」なんてプロトタイプ見せられたらインパクトありますよー！

プロトタイピングにOnsen UIを使うメリットまとめ

HTML、CSSと簡単なJavaScriptが書ければとりあえず動く
デザインができない人でもiOS/AndroidのUIガイドラインに準拠した画面が作れる
使い捨てのプロトタイプでは終わらず、アプリの雛形として利用できる

（おまけ）営業・企画担当者がMonacaを使うメリット

面倒な環境構築をやらなくていいので手軽
クラウド上にソースコードが置かれているので、外出先でも確認できる（PCやスマホを複数台持ちしている人に便利）
Monacaデバッガー（実機検証用アプリ）をインストールしているスマホがあればアプリをすぐに見せられる

これは実際に私が体験したことですが、懇親会でビジネスの話が盛り上がり「この前作ったサンプルアプリを見せたら話が早そう」という機会が巡ってきても、
「わざわざバッグからPC取り出してきてがっつり営業するのも空気読めない感じがするしなー」って思っちゃうんですよね。
そんなときにMonacaなら、ポケットからサッとスマホを取り出してアプリを見せられるのですごく重宝しています。
さまざま場面に転がっているチャンスを逃さずに済むので、営業マンの方には断然オススメです！

@coboco

If you already have a Qiita account log in.