モックアップという意味を持つ Maqetta: 第 1 回 HTML5 を使用したモバイル UI をデザインする

ブラウザーでのドラッグ・アンド・ドロップ操作による HTML5 対応オーサリング

HTML5 対応アプリのプロトタイプを作成するのに、コーディングはもう必要ありません。Maqetta を使えば、手と目の動きを合わせた操作だけでプロトタイプを作成することができます。Maqetta は、デスクトップ・アプリケーションとモバイル・アプリ向けのブラウザー・ベースの WYSIWYG ツールです。全 3 回からなる連載の第 1 回目となるこの記事では、無料のオープンソース・プロジェクト Maqetta を紹介します。Maqetta はブラウザー内で動作し、デザイナーがさまざまなウィジェットをドラッグ・アンド・ドロップすることで、ライブ UI モックアップを組み立てられるようになっています。この第 1 回の記事で、実際のモバイル・アプリのプロトタイプを作成しながら、Maqetta の主な機能について学んでください。

Tony Erwin, Software Engineer, IBM

Tony Erwin - author photoTony Erwin は、IBM Emerging Internet Technologies グループに所属するソフトウェア・エンジニアで、Maqetta 開発チームの主力メンバーです。1998年に IBM に入社して以来、さまざまな技術とツールキットを使用して広範な UI デザインと開発経験を積んでいます。IBM に入社する前は、インディアナ大学でコンピューター・サイエンスの修士号、ローズハルマン工科大学でコンピューター・サイエンスの学士号を取得しました。



2013年 5月 30日

はじめに

この連載について

この連載では、Maqetta を使用して HTML5 によるユーザー・インターフェースのプロトタイプを作成する方法を紹介します。

  • 今回の記事では、リッチ・モバイル・アプリのプロトタイプを作成する手順を通して、Maqetta の主な機能について学びます。
  • 第 2 回では、第 1 回で作成したプロトタイプ・アプリを次のレベルに拡張するために、カスタム JavaScript を作成してインタラクティブな機能を追加します。
  • 近日中に公開される第 3 回では、PhoneGap を使用して、Maqetta で生成されたモバイル・プロトタイプを実際の端末にすぐにデプロイできるネイティブ・アプリに変身させます。

developerWorks の Tony のブログで Maqetta の使い方を詳しく学んでください。

Maqetta は、無料で利用できるオープンソースのビジュアル・オーサリング・ツールで、HTML5 ベースのリッチ・ユーザー・インターフェースをデザインする作業を簡単で楽しいものにします。UI デザイナーは (プラグインやダウンロードなしで、ブラウザー内で動作する) Maqetta を使用して、デスクトップ・アプリケーションとモバイル・アプリ両方の、実際に動作するプロトタイプを作成することができます。ウィジェットを端末のキャンバス上にドラッグ・アンド・ドロップして、ライブ UI モックアップを組み立てれば、あとはその UI プロトタイプを開発者に渡してコーディングしてもらうだけです。

Maqetta と Dojo Foundation

Maqetta は、当初 IBM によって作成され、2011年 4月にオープンソース・プロジェクトとして Dojo Foundation に寄贈されました。現在、Dojo の寛大で商用にも対応したオープンソースのライセンス条項の下で使用できるようになっています。Maqetta が一般に利用できるようになってからは、数ヶ月ごとに更新されるのが通常となっており、Maqetta の継続的な改善が続いています。2012年後半のリリースでは、UI が大幅に作り変えられ、パフォーマンスが飛躍的に向上しました。


体重管理アプリの UI デザイン

一般に、モバイル用ユーザー・インターフェースは、「ビュー」と呼ばれる一連の画面 (つまり、パネル) で構成されていて、ユーザーがアプリのさまざまな部分にナビゲートするのに伴い、これらのビューが切り替わります。図 1 のフローチャートに、この記事で作成するサンプル・アプリを構成する 4 つのビューと、ユーザー操作のナビゲーション・フローを示します。

このフローチャートでは、実線の矢印が次のビューへのナビゲーションを表し、点線の矢印が前のビューへのナビゲーションを表しています。各ビューに付けられているラベルは、そのビューを Maqetta で作成するときに割り当てることになる ID です。

図 1. 体重管理アプリのフローチャート

このアプリを構成する 4 つのビューは以下のとおりです。

  • mainView は、アプリを起動すると最初に表示されるビューです。このビューには、ユーザーが入力した体重を表す数値のリストが表示されます。リスト内のいずれかの体重をクリックすると、次のビュー (detailsView) が表示されます。新しい体重を追加する場合には、アプリの表題部分にあるプラス (+) ボタンをクリックします。
  • detailsView には、特定の体重エントリーに関連付けられたプロパティー (体重、その体重を入力した日、メモなど) が表示されます。「Date (日付)」項目をクリックすると、detailsView_Date ビューが表示されます。「Notes (メモ)」項目をクリックすると、detailsView_Notes ビューが表示されます。mainView に戻るには、「Home (ホーム)」ボタンをクリックします。
  • detailsView_Date では、スピンホイールを使って体重エントリーの日付を設定することができます。ここがナビゲーションの終点で、このビューからは detailsView に戻ることしかできません。アプリの表題部分にある「Details (詳細)」ボタンをクリックすると、detailsView に戻ります。
  • detailsView_Notes では、フリー・フォーム・テキスト域に、体重エントリーに関するメモを入力することができます。ここもナビゲーションの終点で、このビューからは detailsView に戻ることしかできません。アプリの表題部分にある「Details (詳細)」ボタンをクリックすると、detailsView に戻ります。

この体重管理アプリのデザインは、複雑なように思えるかもしれませんが、Maqetta ではコードを作成せずに、UI モックアップを視覚的に作成することができます。必要となる作業は、ウィジェットをドラッグ・アンド・ドロップして、いくつかのプロパティーを編集することだけです。


クラウドでの Maqetta の起動

Maqetta のインストール

Maqetta チームでは、クラウドにホストされた Maqetta の非商用版を無料で Maqetta.org から提供しています。この非商用版は、自己責任でそのまま使用できます。

自分が所有するイントラネット・サーバーに Maqetta をインストールすることもできます。それには、Maqetta ダウンロード・ページから Maqetta を取得します。この連載の例に従うには、Maqetta 8.0 以降のバージョンが必要です。

これから説明する手順に従ってサンプル・アプリを作成すれば、この記事を最大限に活用することができます。Maqetta を使い始めるのは、簡単 (しかも、無料) です。

  1. Chrome、Firefox、または Safari の最新リリースを使用して Maqetta.org にアクセスします。
  2. Launch Maqetta (Maqetta を起動)」ボタンをクリックします。
  3. すでにアカウントを持っている場合は、以下のようにします。
    1. 登録されている e-メール・アドレスとパスワードを入力します。
    2. 「Log In (ログイン)」をクリックします。
  4. アカウントを持っていない場合は、以下のようにします。
    1. ページの一番下にある「Register (登録)」ボタンをクリックします。
    2. 「Create an Account (アカウントの作成)」ページで、e-メール・アドレスを入力してから、「Sign up (登録)」をクリックします。
    3. 登録を確認するためのリンクが記載された e-メールが届いたら、そのリンクをクリックします。
    4. リクエストの確認が完了したら、e-メール・アドレスとパスワードを入力して、「Log In (ログイン)」をクリックします。

Maqetta ウェルカム・ページ

Maqetta にログインすると、ワークベンチに Maqetta ウェルカム・ページが表示されます。Maqetta の主要な機能には、このウェルカム・ページ (図 2 を参照) から簡単にアクセスすることができます。ウェルカム・ページは、新しいアプリを作成する際の出発点になるとともに、このページには Maqetta のドキュメント、チュートリアル、チート・シートへのリンクも記載されています (「参考文献」を参照)。ウェルカム・ページに示されているすべての機能には、ページ上部にあるプルダウン・メニューからアクセスすることもできます。

図 2. Maqetta ウェルカム・ページ

クリックして大きなイメージを見る

図 2. Maqetta ウェルカム・ページ


新規プロジェクトの作成

Maqetta を初めて使用するときには、project1 という名前のデフォルト・プロジェクトに含まれるファイルを扱うことになります。絶対にそうしなければならないわけではありませんが、開発するアプリごとに 1 つのプロジェクトを作成すれば、整理された状態にしておけるので、他のツールで使用する際に成果物をエクスポートしやすくなります。それでは、今から体重管理アプリ用の新規プロジェクトの作成を開始します。

  1. Maqetta ページの最上部にあるツールバーから、「Create (作成)」 > 「Project... (プロジェクト…)」の順にメニュー・オプションを選択します。
  2. 「New Project (新規プロジェクト)」ダイアログに、プロジェクトの名前として「weightTracker」と入力します (図 3 を参照)。
    図 3. 「New Project (新規プロジェクト)」ダイアログ
    「New Project (新規プロジェクト)」ダイアログ
  3. Create (作成)」ボタンをクリックします。

project1 (または他のプロジェクト) に戻るには、「Files (ファイル)」パレットに表示されたプロジェクトのリストから目的のプロジェクトを選択します。

モバイル・アプリの作成

次に、このアプリで使用する HTML ファイルを作成します (この記事の手順を完了した後、作成した HTML ファイルと、「ダウンロード」セクションに用意されている HTML ファイルを比較することができます)。

  1. 「Create (作成)」 > 「Mobile Application... (モバイル・アプリケーション…)」の順にメニュー・オプションを選択します。
  2. 「Create a Mobile Application (モバイル・アプリケーションの作成)」ダイアログ (図 4 を参照) で、ファイル名として「index.html」と入力します (PhoneGap を使用してモバイル端末にデプロイすることを目的とした体重管理アプリを作成する場合には、index.html が必須のファイル名であることに注意してください。この方法については連載の第 3 回で詳しく説明するので、現時点で正しいファイル名を設定しておくことをお勧めします)。
  3. 「Device (端末)」フィールドは、「iphone」オプションに設定された状態のままにします。端末のタイプは、必要に応じて後から変更することができます。
    図 4. 「Create a Mobile Application (モバイル・アプリケーションの作成)」ダイアログ
    「Create a Mobile Application (モバイル・アプリケーションの作成)」ダイアログ
  4. Create (作成)」ボタンをクリックします。

モバイル・ページ・エディター

「Create a Mobile Application (モバイル・アプリケーションの作成)」ダイアログを閉じると、Maqetta ウェルカム・ページが Maqetta のモバイル・ページ・エディターに置き換わり、そのエディターには画面に何も表示されていない iPhone のシルエットが表示されます (図 5 を参照)。Maqetta はiPhone の他、iPad、Android、Blackberry といったよく使用されている携帯電話やタブレットのオーサリングもサポートしています。どの端末を選択したかに関わらず、モバイル・ページ・エディターには、その端末の実物大のレプリカが表示され、その中に作成中のアプリが表示されます。モバイル・ウィジェットをこのシルエットにドラッグ・アンド・ドロップすると、そのウィジェットはターゲット・プラットフォームのルック・アンド・フィールでレンダリングされます。

図 5. iPhone のシルエットが表示された新規モバイル・アプリのキャンバス
iPhone のシルエットが表示された新規モバイル・アプリのキャンバス

メイン・ビューの作成

HTML ファイルの作成が完了したら、今度はフローチャートに示されている mainView を作成します。

ワークベンチの左側にある「Palette (パレット)」タブには、デザイン中のアプリケーションのタイプ (この例の場合は、モバイル・アプリ) に適用可能なすべてのウィジェットが含まれています。これらのウィジェットは、その目的に応じて、セクションごとに編成されています。「Views (ビュー)」、「Heading (表題)」、「Lists (リスト)」、「Controls (コントロール)」、「Containers (コンテナー)」の各フォルダー内にあるのは、Dojo Mobile ライブラリー (「参考文献」を参照) のウィジェットです。体重管理アプリでは、これらのフォルダーに格納されている約 50 個のウィジェットのうち、ほんの一部を使用します。

  1. 「Views (ビュー)」セクションを開いて、使用可能なビュー・ウィジェットを表示します (図 6 を参照)。
    図 6. Maqetta のモバイル用ビュー・ウィジェット
    Maqetta のモバイル用ビュー・ウィジェット
  2. 「Views (ビュー)」セクションの先頭にある ScrollableView ウィジェットを選択し、端末のシルエットにドラッグ・アンド・ドロップします。この操作により、図 7 に示すスクリーン・ショットのような画面になります。
    図 7. iPhone のシルエットに追加された ScrollableView

    クリックして大きなイメージを見る

    図 7. iPhone のシルエットに追加された ScrollableView

    以下の点に注目してください。

    • ページ・キャンバスの背景が、青味がかったグレーになっています。これは、ページに追加された最初の Dojo Mobile ウィジェットによって、特定のモバイル端末にネイティブのルック・アンド・フィールを提供する CSS スタイルシートが適用されているためです。
    • ページ全体が四角い枠で選択されています。これは、ScrollableView が選択されていて、このビューの幅と高さはデフォルトで 100% に設定されているためです。
  3. ここで、Maqetta ワークベンチの右側にある「Widget (ウィジェット)」タブをクリックします。この操作によってプロパティー・パレットが展開され、フォーカスがウィジェット固有のプロパティー・セクションに置かれます (図 8 を参照)。ID がデフォルトで「ScrollableView_0」に設定されていること、そしてプロパティー・パレットの最上部に「for: ScrollableView #ScrollableView_0」 (これは、プロパティーの対象となっているウィジェットのタイプおよび ID です) と表示されていることに注目してください。
    図 8. プロパティー・タブが表示された Maqetta ワークベンチ

    クリックして大きなイメージを見る

    図 8. プロパティー・タブが表示された Maqetta ワークベンチ

  4. ID」フィールドに「mainView」と入力した後、Return キーを押して変更を確定します。図 9 を見るとわかるように、プロパティー・パレット最上部の表示が「for: ScrollableView #mainView」に変わります。この ID は、記事の最初に掲載したアプリのフローチャートに示されているデザインと一致します (図 1 を参照)。
    図 9. ビューのプロパティー・パレット
    ビューのプロパティー・パレット
  5. ビューの ID は重要です。Dojo Mobile ウィジェット・ライブラリーは、ユーザーによるナビゲーション時にビューの非表示/表示を切り替えるために、ビュー ID を使用してビューを参照します。Maqetta を使ってアプリのナビゲーション・フローをセットアップするときには、この点を念頭に置いて、ビュー ID を参照することになります。また、連載の第 2 回では、コード内でこれらのビュー ID を使用することになります。したがって、ビュー ID を正しく設定しておくことが重要になります。
  6. ワークベンチの右下隅に表示されている「Scenes (シーン)」パレットに注目してください (図 10 を参照)。作成したビューはすべて、このパレットの「Dojo Mobile Views (Dojo Mobile ビュー)」ノードの下に表示されます。この例では、現時点でこのノードには「ScrollableView #mainView」が含まれているはずです。
    図 10. シーン・パレット
    シーン・パレット

表題の追加

mainView の作成を続けましょう。今度は表題を追加します。

  1. ウィジェット・パレットの「Heading (表題)」セクションから、Heading ウィジェットを端末のシルエットの中央にドラッグ・アンド・ドロップします (ウィジェットが見つからない場合は、ウィジェット・パレットの最上部にある検索ボックスに、ウィジェットの名前を入力して検索することができます)。
  2. 表示されるテキスト・ボックスに「Weight Tracker (体重管理)」と入力し (図 11 を参照)、「OK」ボタンをクリックすることで表題のテキストを設定します。後で表題のテキストを変更したくなったら、表題をダブルクリックすればテキスト・ボックスが再び表示されます (このプロセスは、最初にウィジェットを作成するときにデータ入力ダイアログが表示されるすべてのウィジェットに当てはまります)。
    図 11. 表題の追加
    表題の追加
  3. プロパティー・パレットの「Widget (ウィジェット)」セクションで (図 12 を参照)、fixed 属性を「top」に変更します。このように設定すると、ビュー内で縦のスクロールが必要になったとしても、表題は定位置 (アプリ画面の最上部) に固定されます。
    図 12. 表題のプロパティーの設定
    Set the heading properties

体重のリストの追加

測定単位

このプロトタイプでは、米国慣用系 (United States Customary System) でもある、英語圏諸国の測定単位 (English units of measurement)、つまりヤード・ポンド法を使用します。ただしデプロイする前に、ユーザーが測定単位をヤード・ポンド法とメートル法から選択できるようにする必要があります。

次のステップでは、ユーザーが入力した体重のリストを表示するウィジェットを追加します。

  1. ウィジェット・パレットの「Lists (リスト)」セクションにある EdgeToEdgeDataList を、前の手順で iPhone のシルエットに追加したペインの上にドラッグ・アンド・ドロップします。この操作により、データ・リストが作成され、リストの内容を設定するためのダイアログが表示されます (図 13 を参照)。ダイアログの各行の最初の値は、その行に表示されるラベルです。2 番目の値は、その行がクリックされたときにアプリのナビゲーション先となるビューの ID です。
    図 13. EdgeToEdgeDataList の追加
    Add EdgeToEdgeDataList
  2. テキスト・ボックスの内容をリスト 1 に記載する一連の体重 (ポンド単位) に変更してから、「OK」をクリックします。ある特定の行または体重の値がクリックされたときに、アプリのナビゲーション先となるビューの ID は、detailsView であることに注目してください。このナビゲーションは、記事の最初に掲載したアプリのフローチャートで定義したものです (図 1 を参照)。
    リスト 1. EdgeToEdgeDataList への入力内容
    149, detailsView
    150, detailsView
    151, detailsView
    148, detailsView
    146, detailsView
  3. プロパティー・パレットに戻って、リストの ID を「weightList」に変更します。これで、mainView はほぼ完成しました。現時点で、このビューは図 14 のスクリーン・ショットのように表示されているはずです。
    図 14. iPhone がレンダリングされたモバイル・ページ・エディターのメイン・ビュー
    Main view in the Mobile Page Editor with iPhone renderingID をここで設定した理由は、この ID が第 2 回で重要になるからです。一般にUI デザイナーは、(weightList のように) ビューではないウィジェットには ID を設定しません。このような作業は、アプリの UI をコーディングする際に行われるのが通常です。

端末のタイプの変更

多くの場合、UI デザイナーは複数の異なる環境で UI デザインがどのようにレンダリングされるかを確認する必要があります。幸い、Maqetta では簡単に端末のタイプを変更してレンダリングすることができます。

  1. 「Document Settings (文書設定)」メニュー (モバイル・ページ・エディターのツールバーの右から 2 番目にあるアイコン) を開いて、「Choose device (端末の選択)」をクリックします (このメニューには、端末を回転するオプションもあります)。
    図 15. 文書設定メニュー
    Document Settings menu
  2. HTML ファイルの変更内容を保存していない場合は、端末を切り替える前に変更を保存する必要があることを伝える警告が表示されます (図 16 を参照)。この警告が表示されたら、「Save (保存)」ボタンをクリックします。
    図 16. 警告!
    警告メッセージのスクリーン・ショット
  3. 「Save (保存)」ボタンをクリックすると、端末のシルエットを選択するためのダイアログが表示されます。このダイアログのドロップダウン・リストには、さまざまな端末の選択肢があります (図 17 を参照)。
    図 17. 端末のシルエットの選択
    Choose a device silhouette
  4. UI がどのようにレンダリングされるかを確認したい端末を選択して (例えば、android_340x480)、「Select (選択)」をクリックします。すると、Maqetta にレンダリングされる端末は、選択した端末に対応するように変更されます (図 18 を参照)。
    図 18. Maqetta ページ・エディターで Android 用にレンダリングされた mainView
    The Maqetta page editor renders mainView for Android
    端末の変更は行われなかったかのように、引き続きウィジェットをドラッグ・アンド・ドロップしてウィジェットのプロパティーを編集することができますが、ルック・アンド・フィールは新しく選択された端末に対応しています。
  5. レンダリングをリセットするには、「Document Settings (文書設定)」メニューから「Choose device (端末の選択)」を選択して、端末リストから「iphone」を選択し、「Select (選択)」をクリックします。

詳細ビューの作成

次は、図 1 に示したアプリのフローチャートにおける詳細ビュー (detailsView) の作成に取り掛かります。このビューには、特定の体重エントリーの詳細を表示します。

  1. ウィジェット・パレットの「Views (ビュー)」セクションにある ScrollableView を、mainView にドラッグ・アンド・ドロップします。このアクションによって、新しいビューが現在のビュー (この例では、mainView) の兄弟として (つまり、要素ツリーの同じレベルに) 追加されます。新しく追加されたビューは選択された状態となりますが、ビューには何も表示されません。
  2. プロパティー・パレットで、新規ビューの ID を「detailsView」に変更します。前述のとおり、ビュー ID を正しく設定することが非常に重要になります。detailsView は、mainView 内で EdgeToEdgeDataList を構成したときに、このリストのナビゲーション先とした新規ビューの ID です。
  3. 図 19 に示す「Scenes (シーン)」パレットを見てください。
    図 19. 新規ビューが表示された「Scenes (シーン)」パレット
    新規ビューが表示された「Scenes (シーン)」パレット
    以下の点に注意してください。
    • Dojo Mobile Views の下にあるビューが、ScrollableView #mainViewScrollableView #detailsView の 2 つになりました。新規ビューは、最初のビューの兄弟となっています。
    • 2 番目のビュー (新しく追加されたビュー) が選択された状態になって表示されます (新しいウィジェットを追加すると、必ずこのようになります)。その一方、最初のビュー・ウィジェットは非表示になることにも注目してください。Dojo Mobile の場合、一度に表示できるビュー・ウィジェットは 1 つだけです。Maqetta はこの実行時の振る舞いをデザイン時に模倣するために、1 つのビューが表示されているときには、そのビューのすべての兄弟ビュー・ウィジェットを非表示にするようにビュー・ウィジェットの表示/非表示を管理します。
    • ビュー・ウィジェットを切り替えるには、Dojo Mobile Views の下に表示されているビュー・ウィジェットをクリックします。すると、このパレットで選択されているビューが、端末のシルエットに表示されます。

詳細ビューの表題の追加

detailsView の作成を続けましょう。今度は表題を追加します。

  1. 「Scenes (シーン)」パレットで detailsView が選択されていることを確認します。
  2. ウィジェット・パレットの「Heading (表題)」セクションで Heading ウィジェットを選択し、ビューにドラッグ・アンド・ドロップします。
  3. この操作によって表示されるダイアログのテキスト・ボックスに「Details (詳細)」と入力し、「OK」をクリックして表題のテキストを変更します。
  4. 図 20 に示されているように、プロパティー・パレットで以下の変更を行います。
    • back 属性を「Home (ホーム)」に変更します。これにより、「Home (ホーム)」というラベルが付いたボタンが表題部分に作成されます。これは、ユーザーを前のビューに戻すためのボタンです。
    • ボタンの moveTo 属性を「mainView」に変更するために、プルダウン・メニューから「mainView」を選択します。この設定により、アプリは、「Back (戻る)」ボタンがクリックされると常にメイン・ビューにナビゲートすることになります。
    • ボタンの fixed 属性を「top」に変更します。
    図 20. 表題のプロパティー・パレット
    Properties palette for heading

以上の変更を行った後の detailsView の表示は、図 21 のスクリーン・ショットのようになります。

図 21. 表題が追加された詳細ビュー
表題が追加された詳細ビュー

アプリのプレビュー表示とアプリの実行

Maqetta での作業中には、いつでもライブ・プレビューを実行することができます。これまでの作業で 2 つのビューを作成し、これらのビューの間のナビゲーションを定義したので、今のところすべてが正しく設定されていることを確認するために、体重管理アプリのプロトタイプのライブ・バージョンをプレビューしてみましょう。

  1. 「Scenes (シーン)」パレットで、まずは mainView を選択します。プレビューの実行時に選択されているビューが、プレビューで最初に表示されるビューとなります。
  2. ツールバーで、「Preview in Browser (ブラウザーでプレビュー)」アイコン (ツールバーの最後の項目) をクリックします。この操作によって新しいブラウザー・タブが起動され、そこに iPhone モバイル端末のシルエットとそのシルエット内で実行されている体重管理アプリが表示されます (図 22 を参照)。
    図 22. iPhone のシルエット内で実行されている体重管理アプリのプレビュー
    Weight tracker preview running in the iPhone silhouette
  3. 体重のドロップダウン・リストのエントリーのいずれかをクリックして、mainView に代わって detailsView が表示されることを確認します。プレビュー・モードでは、アプリのウィジェットが端末上で実際に実行されているかのようにユーザーの操作に反応します。
  4. detailsView の表題に示されている「Home (ホーム)」ボタンをクリックし、mainView が再び表示されることを確認します。

以上の動作を確認できたら、このプロトタイプのテストは成功です!

プレビューでの端末の変更と向きの変更

プレビューに役立つその他の情報として、まず、ライブ・プレビューには端末を切り替えるためのコントロール、ズーム・レベルを制御するためのコントロール、そしてアプリのビューの向きを縦から横に変更するためのコントロールがあります。これらのコントロールを試すには、別の端末に切り替えて、「Angle (回転)」ボタンでビューの向きを変えてみてください。図 23 に、更新後のレンダリングの一例を示します。

図 23. Android 端末の横向きプレビュー

コードは引き続き実行されているので、更新後の新しい構成で mainViewdetailsView 間のナビゲーション・フローのテストを続けることができます。

モバイル・ブラウザーでのアプリの実行

最後に、Maqetta でのプレビューで「Previewing」ラベルの横に示されている URL に注目してください (図 24 を参照)。

図 24. URL が示されているプレビュー・ツールバー

この URL を、例えば iPhone の Safari ブラウザーに貼り付けることで、プロトタイプをモバイル端末のブラウザーで表示することができます。モバイル・ブラウザーでアプリをプレビューすることは (特に、Web でホストされるアプリにすることが最終目的の場合は) 有用なことですが、モバイル・ブラウザーでプレビューすることと、アプリを正真正銘のネイティブ・アプリとしてインストールして実行することは、別のことであるということを頭に入れておいてください。後者の方法は、連載の第 3 回で Maqetta と PhoneGap を組み合わせて使用するときに説明します。


詳細ビューのスピンホイールの作成

サンプル・モバイル・アプリの基本的な機能とナビゲーションをプレビューしたところで、詳細ビューに戻り、今度はユーザーが体重を指定するためのウィジェットを作成します。

これから、SpinWheel ウィジェットのコンテナーとしての役割を果たす (「RoundRectCategory」というラベルが付いた) RoundRect を作成します。SpinWheel は、見た目が少し体重計に似ています。まず、このウィジェットに体重をポンドで表す数字を入力し (このアプリのプロトタイプには意図的にヤード・ポンド法を使用していることを思い出してください)、その後に表示を微調整します。このプロセスでは、まだ取り上げていないプロパティー・パレットの構成要素をいくつか使用します。それらは、「Layout (レイアウト)」タブと「Margins (余白)」タブです。

RoundRect と SpinWheel の作成

  1. Maqetta ページ・エディターに戻り、「Scenes (シーン)」パレットで「detailsView」を選択します。
  2. ウィジェット・パレットの「Lists (リスト)」セクションで RoundRectCategory ウィジェットを選択し、detailsView キャンバスにドラッグ・アンド・ドロップします。このウィジェットの役割は、SpinWheel のラベルです。したがって、表示されるテキスト・ボックスには「Weight (lbs) (体重 (ポンド))」と入力して (図 25 を参照)、「OK」をクリックします。
    図 25. 詳細ビューへの RoundRectCategory の追加
    Adding RoundRectCategory to the Details view
  3. 今度は、ウィジェット・パレットの「Containers (コンテナー)」 > 「Dojo」セクションから RoundRect を、ビューの RoundRectCategory の下にドラッグ・アンド・ドロップします (図 26 を参照)。
    図 26. 詳細ビューへの RoundRect の追加
    詳細ビューへの RoundRect の追加
  4. ウィジェット・パレットの「Controls (コントロール)」 > 「Pickers (ピッカー)」セクションから SpinWheel ウィジェットを RoundRect 上にドラッグ・アンド・ドロップして、長方形のウィジェットの子となるようにします (つまり、長方形の中に含まれるウィジェットにします)。

図 27 に示す SpinWheel は、文字を表示する 2 つのスロットで構成されています。最終的には数字を表示する 3 つのスロットにすることで、体重計をシミュレートします。

図 27. 詳細ビューのデフォルト SpinWheel
The default SpinWheel in the Details view

3 つのスロットによる SpinWheel のカスタマイズ

  1. プロパティー・パレットで、SpinWheelID を「weightSpinWheel」に変更します。次に、1 番目の SpinWheel スロットを選択してダブルクリックし、表示されるテキスト・ボックスに「0,1,2,3,4,5,6,7,8,9」と入力し、「OK」をクリックします。
    図 28. 1 番目の SpinWheel スロットの表示内容の変更
    1 番目の SpinWheel スロットの表示内容の変更
  2. 1 番目のスロットが選択された状態のまま、プロパティー・パレットの「Widget (ウィジェット)」セクションで value属性を「1」に変更します。図 29 に示されている labels 属性の値が、前のステップで指定した内容と一致していることに注目してください。
    図 29. 1 番目の SpinWheel スロットのプロパティーの設定
    Set properties for the first SpinWheel slot
  3. プロパティー・パレットの「Layout (レイアウト)」タブをクリックし、1 番目の SpinWheel スロットの width 属性を「70px」に変更します (図 30 を参照)。これにより、ページ・エディターに表示されているスロットのサイズが変わり、数字の周りのスペースが小さくなります。
    図 30. 1 番目の SpinWheel スロットのレイアウト・プロパティー
    Layout properties for the first SpinWheel slot
  4. 2 番目の SpinWheel スロットを選択してダブルクリックします。表示されるテキスト・ボックスに「0,1,2,3,4,5,6,7,8,9」と入力し、Return キーを押します。
  5. 2 番目のスロットが選択された状態のまま、プロパティー・パレットの「Widget (ウィジェット)」セクションで value 属性を「5」に変更し、「Layout (レイアウト)」セクションの width 属性を「70px」に設定します。
  6. 今度は、ウィジェット・パレットの「Controls (コントロール)」 > 「Pickers (ピッカー)」セクションから SpinWheelSlot をドラッグして、2 番目のスロットの右側に (3 番目のスロットとして) ドロップします。この新しいスロットは、SpinWheel の子となり、他の 2 つのスロットに対しては兄弟となります。
  7. 表示されるテキスト・ボックスのテキストを「0,1,2,3,4,5,6,7,8,9」に変更してから、「OK」をクリックします。
    図 31. 3 番目のスロットの追加
    Adding the third slot
  8. 3 番目のスロットが選択された状態のまま、プロパティー・パレットの「Widget (ウィジェット)」セクションで value 属性を「0」に変更し、「Layout (レイアウト)」セクションで width 属性を「70px」に変更します。これで、3 番目のスロットは図 32 に示すように表示されます。
    図 32. 完成した 3 番目のスロット
    The finished third slot

ヒント!

子ウィジェットを選択できる状態になっていると、親ウィジェットを選択するのが難しい場合があります。親ウィジェットを選択する簡単な方法は、子ウィジェットを選択して右クリックし、「Select parent (親を選択)」オプションを選択することです。

レイアウトの調整

SpinWheel の幅は 3 つのスロットには広すぎますが、SpinWheelwidth 属性を変更することでレイアウトを修正できます。

  1. 3 番目のスロットの横のエリアをクリックすることによって、SpinWheel を選択します。
  2. プロパティー・パレットの「Layout (レイアウト)」セクションで、width 属性を「222px」に変更します。これで、SpinWheel の表示は図 33 のようになります。
    図 33. 改善された SpinWheel
    Improved SpinWheel

次に注目する点として、iPhone キャンバス内の SpinWheel には、右側だけに空白のスペースができています。したがって、SpinWheel をセンタリングすれば、UI のレイアウト全体が改善されることになります。SpinWheel の余白は、以下のようにして調整することができます。

  1. プロパティー・パレットの「Margins (余白)」セクションをクリックします。
  2. Show t/r/b/l (上下左右を表示)」の横にあるボックスにチェック・マークを付けます。
  3. margin-rightmargin-left を両方とも「auto」に変更します。

以上の調整内容を図 34 に示します。

図 34. SpinWheel の余白の調整
SpinWheel の余白の調整

完成した SpinWheel は、値 150 を表示し、角丸の長方形の中でセンタリングされます (図 35 を参照)。

図 35. 完成した SpinWheel
The completed SpinWheel

詳細ビューの仕上げ

詳細ビューを完成させるために、特定の体重エントリーに関連付けられた日付とユーザーのメモを表示する RoundRectList ウィジェットを追加します。アプリのユーザーはこの RoundRectList を使用して、日付ビューとメモ・ビューへのナビゲートを行うことになります。RoundRectList を作成する前に、日付ビューとメモ・ビューのプレースホルダーを作成する必要があります。こうすることによって、ナビゲーション・フローを構成しやすくなります。

プレースホルダー・ビューの追加

まず初めに、2 つのプレースホルダーを作成します。

  1. ウィジェット・パレットから ScrollableView ウィジェットをドラッグして、現在のビュー (表題、またはグレーのエリアのいずれか) にドロップします。前と同じように、この操作によってビューが作成され、選択された状態になりますが、ビューには何も表示されません。
  2. プロパティー・パレットで、新規ビューの ID を「detailsView_Date」に変更します。
  3. ウィジェット・パレットから別の ScrollableView ウィジェットを detailsView_Date にドラッグ・アンド・ドロップします。
  4. プロパティー・パレットで、新規ビューの ID を「detailsView_Notes」に変更します。

以上の作業を終えると、「Scenes (シーン)」パレットのフローチャートから 4 つすべてのビューを確認できる状態になります (図 36 を参照)。

図 36. 4 つすべてのビューが表示されたシーン・パレット
Scenes palette showing all four views

ビュー・ナビゲーションのリストの作成

次のステップでは、RoundRectList ウィジェットを追加します。このウィジェットにより、ユーザーが特定の体重の詳細ビューから、日付ビューやメモ・ビューにナビゲートできるようになります。

  1. 「Scenes (シーン)」パレットで detailsView を選択し、これをアクティブ・ビューにします。
  2. ウィジェット・パレットから RoundRectList をドラッグし、この detailsView 内で SpinWheel が配置されている RoundRect のすぐ下にドロップします。
  3. 表示されるテキスト・ボックスでは、各行が新規 ListItem のラベルに変換されます。1 行目に「Date (日付)」と入力し、2 行目に「Notes (メモ)」と入力します (図 37 を参照)。
    図 37. RoundRectList への入力内容
    RoundRectList への入力内容
  4. OK」をクリックします。

「Date (日付)」のラベルが付いたリスト項目を選択し、プロパティー・パレットの「Widget (ウィジェット)」セクションで以下の変更を行います。

  1. moveTo フィールドのラベルの横にあるプルダウンから「detailsView_Date」を選択し、このフィールドの値として設定します。この設定により、ユーザーがこの「Date (日付)」項目をクリックすると、体重管理アプリは detailsView_Date ビューにナビゲートするようになります。
  2. rightText を「2012-10-09」に変更します。これにより、このテキストが「Date (日付)」項目の右端に表示されるようになります (このプロタイプでは、日付を特定の地域に合わせたフォーマットにしていないことに注意してください。すべての日付は、一般的な ISO-8601 標準に従ったフォーマットに設定されます。連載の第 2 回ではこのフォーマットが重要になるので、この設定に従ってください)。
  3. ID を「dateListItem」に変更します。
    図 38. 日付リスト項目のプロパティー
    Date list item properties
  4. 「Notes (メモ)」のラベルが付いた 2 番目のリスト項目を選択し、プロパティー・パレットで以下の変更を行います。
    • moveTo フィールドのラベルの横にあるプルダウンから「detailsView_Notes」を選択して、このフィールドの値として設定します。この設定により、ユーザーがこの「Notes (メモ)」項目をクリックすると、体重管理アプリは detailsView_Notes ビューにナビゲートするようになります。
    • rightText を「Ran 5 mi... (5 マイル…)」に変更します。これにより、ユーザーにメモの全内容 (この例の場合、「Ran 5 miles and ate lots of broccoli! (5 マイル走ってブロッコリーを食べた!)」) のプレビューが表示されます。
    • ID を「notesListItem」に変更します。

完成した detailsView は、図 39 のスクリーン・ショットのような表示になります。

図 39. 完成した詳細ビュー
The completed Details view

日付ビューの作成

3 番目のビュー detailsView_Date は、今までの作業に従っていれば、かなり直感的に作成できるはずです。以下の手順に従ってください。

  1. 「Scenes (シーン)」パレットから detailsView_Date ビューを選択します。
  2. ウィジェット・パレットからビューに Heading (表題用のウィジェット) をドラッグ・アンド・ドロップします。表示されるテキスト・ボックスに「Date (日付)」と入力してから、「OK」をクリックします。
  3. プロパティー・パレットで、back 属性を「Details」に、moveTo 属性を「detailsView」に変更して (フローチャートのデザインに合わせるため)、fixed 属性を「top」に変更します。
  4. 「Controls (コンロトール)」 > 「Pickers (ピッカー)」セクションから SpinWheelDatePicker を表題の下にドラッグ・アンド・ドロップします。
  5. プロパティー・パレットで、ID を「dateSpinWheel」に変更します。
  6. プロパティー・パレットの「Margins (余白)」セクションで、「Show t/r/b/l (上下左右を表示)」の横にあるチェック・ボックスをクリックし、margin-top を「10px」に変更します。これは、表題とスピンホイールの間に少し間隔を設けるためです。

完成したビューは、図 40 のスクリーン・ショットのような表示になります。

図 40. 完成した日付ビュー
Completed Date view

メモ・ビューの作成

以下の手順に従って、4 番目の (つまり、最後の) ビューを作成します。

  1. 「Scenes (シーン)」パレットから detailsView_Notes ビューを選択します。
  2. ウィジェット・パレットからビューに Heading (表題用のウィジェット) をドラッグ・アンド・ドロップします。表示されるテキスト・ボックスに「Notes (メモ)」と入力して、「OK」をクリックします。
  3. プロパティー・パレットの「Widget (ウィジェット)」セクションで、back 属性を「Details」に、moveTo 属性を「detailsView」に変更して (フローチャートのデザインに合わせるため)、fixed 属性を「top」に変更します。
  4. 「Containers (コンテナー)」 > 「Dojo」セクションから RoundRect を表題の下にドラッグ・アンド・ドロップします。
  5. 「Controls (コンロトール)」 > 「TextBox (テキスト・ボックス)」セクションから TextAreaRoundRect にドラッグ・アンド・ドロップします。
  6. 新規テキスト域をダブルクリックし、表示されるテキスト・ボックスに「Ran 5 miles and ate lots of broccoli! (5 マイル走ってブロッコリーを食べた!)」と入力して、「OK」をクリックします。
  7. テキスト域のサイズを大きくします。プロパティー・パレットの「Layout (レイアウト)」セクションで、width 属性を「100%」に、height 属性を「150px」に変更します。
  8. ID を「notesTextArea」に変更します。

このメモ・ビューは、図 41 のスクリーン・ショットのような表示になります。

図 41. メモ・ビュー
Notes view

アプリの微調整と仕上げ

この時点で UI プロトタイプはかなり完成したものになっていますが、ユーザーが新しい体重エントリーを追加するためのメカニズムがまだありません。このメカニズムを提供するために、プラス・ボタンを追加します。その後、体重管理アプリの UI に磨きをかける最後の作業として、ユーザーが体重リストの各行で体重エントリーと併せて日付も確認できるようにします。

プラス・ボタンの追加

プラス・ボタンを追加するための手順は以下のとおりです。

  1. 「Scenes (シーン)」パレットで mainView を選択して、このビューをアクティブにします。
  2. ウィジェット・パレットの「Heading (表題)」セクションから ToolbarButton を「Weight Tracker (体重管理)」表題にドラッグ・アンド・ドロップします。表示されるテキスト・ボックス内の値を「+」に変更して、「OK」をクリックします。
  3. モバイル・アプリでは大抵、新規エントリーを追加するためのボタンは表題の右側に配置されます。この配置にならって、プロパティー・パレットの「Layout (レイアウト)」セクションで float 属性を「right」に変更します。
  4. プロパティー・パレットの「Widget (ウィジェット)」セクションで moveTo を「detailsView」に変更することで、ユーザーがプラス・ボタンをクリックすると、詳細ビューへのナビゲーションが行われるようにします。
  5. ID 属性を「addWeightButton」に変更します。

図 42 に、以上の手順を完了した後の mainView の外観を示します。

図 42. 体重エントリーを追加するためのプラス・ボタン
体重エントリーを追加するためのプラス・ボタン

EdgeToEdgeDataList への正しいテキストの追加

次に (最後に)、体重リストの各行に日付と体重を並べて表示する必要があります。そのために利用するのは、EdgeToEdgeDataList をファイル内のデータにバインドする Maqetta の機能です。

  1. 新規データを配置するファイルを作成するために、Maqetta のメイン・メニューから「Create (作成)」 > 「JavaScript File... (JavaScript ファイル...)」を選択します。
  2. 表示されるダイアログで、ファイル名を「weights.json」に変更して、「Create (作成)」ボタンをクリックします。これにより、新しいエディター・タブが表示されます。
  3. エディターの内容をリスト 2 に記載する内容に置き換えます。
    リスト 2. weights.json の内容
    {
        "items": [
            {label: "149", moveTo: "detailsView", rightText: "2012-10-01"},
            {label: "150", moveTo: "detailsView", rightText: "2012-10-09"},
            {label: "151", moveTo: "detailsView", rightText: "2012-10-15"},
            {label: "148", moveTo: "detailsView", rightText: "2012-10-23"},
            {label: "146", moveTo: "detailsView", rightText: "2012-11-01"}
        ]
    }

    お気付きのように、このデータは、最初に EdgeToEdgeDataList を作成したときにスマート入力ボックスに入力したデータと似ています。そのときのテキスト・ボックスには、各行に label の値と moveTo の値をコンマで区切って入力しました。このファイルでは、各行に labelmoveTo、そして新たに rightText といったプロパティーが明示的に含まれています。
  4. ファイルを保存してから閉じます。
  5. ページ・エディターに戻って、ウィジェットが配置されている EdgeToEdgeDataList をダブルクリックします。これによってダイアログが表示されるので、まずはリストの内容を設定します。
  6. プルダウンを「Comma separated data (コンマ区切りデータ)」から「Data file from workspace (ワークスペースのデータ・ファイル)」に変更します。
  7. テキスト・ボックスに「weights.json」(ファイルの名前) と入力し (図 43 を参照)、「OK」をクリックします (テキスト・ボックスの横にあるフォルダー・アイコンをクリックして、ワークスペースのファイルにナビゲートすることもできます)。
    図 43. ワークスペースのデータ・ファイルの指定
    ワークスペースのデータ・ファイルの指定

これで、リストの各エントリーの右側に日付が表示されるようになりました (図 44 を参照)。

図 44. 体重リストに追加された日付
Dates added to weight list

プロトタイプの検証

サンプル体重管理アプリのプロトタイプは、1 行のコードも作成することなく完成しました!アプリをプレビューして (ツールバーの「Preview in Browser (ブラウザーでプレビュー)」アイコンを使用)、すべてのビューにナビゲートできること、そしてすべてのビューから最初のビューに戻れることを確認していないとしたら、この時点でその検証を行ってください。

さらに、スピンホイールを操作して体重と日付の値を変更してみるなど、モバイル・ウィジェットをいくつか実際に使ってみることや、mainView のプラス・ボタンによって detailsView にナビゲートされることを検証してみることをお勧めします。


まとめ

この記事では、個人用モバイル体重管理アプリを対象に、かなり完成度の高いライブ・プロトタイプを手早く作成する方法を説明しました。これが本番用アプリだとしたら、次は以下のいずれかの手順に進むことが考えられます。

  • Maqetta のライブ・プレビュー機能を使用して、以下のことを実行します。
    • 上司の前で概念実証のデモを行って、会社がモバイル体重管理ビジネスに乗り出すべきであることを上司に確信させます。
    • 開発フェーズに進む前に、潜在的顧客を相手にユーザビリティーのテストを行います。
  • Maqetta のレビューおよびコメント機能 (「Create (作成)」 > 「Review... (レビュー…)」メニュー・オプションを参照) を使用して、チームからフィードバックを集めます。
  • 引き続きプロトタイプを作り込みます。例えば、本番用アプリには最終的に、測定単位としてヤード・ポンド法またはメートル法を選択するための設定ビューが必要になります。さらに、複数のユーザーの管理、目標の設定、食事内容の入力、エクササイズのスケジュールや実施状況の管理、などを行うためのパネルを追加する必要もあるかもしれません。
  • Maqetta のモバイル・テーマ・エディターを使用して、アプリのカスタム・テーマを作成します。例えば、会社のブランドを反映した配色で UI のスタイルを設定することができます。
  • デザインが確定していて、開発チームに渡して製品化できる状態にあるかどうかを判断します。その場合、Maqetta のメカニズムを使用してプロジェクトを zip ファイルとしてエクスポートし、そのファイルを Eclipse や IBM Rational Application Developer などの他の開発環境にインポートすることができます。

今回の記事では、モバイル・アプリの UI のプロトタイプとして、洗練されていてかなり複雑なプロトタイプを、コーディングを一切せずに作成する方法を学びました。第 2 回では、ユーザー操作を処理するためのカスタム JavaScript を追加します。そして第 3 回では、PhoneGap を使用して、実際のモバイル端末にデプロイ可能なネイティブ・アプリとして、別のプロトタイプを作成します。次回の記事までは、「参考文献」セクションに記載されているリンクを参照して、Maqetta、HTML5、Dojo Mobile に関する知識を深めてください。

謝辞

この連載記事を慎重にレビューして建設的なフィードバックを提供してくださった Maqetta チーム (Jon Ferraiolo 氏、Javier Pedemonte 氏、Adam Peller 氏、Bill Reed 氏) に深く感謝いたします。


ダウンロード

内容ファイル名サイズ
Resulting HTML filemaqetta_part1.zip3KB

参考文献

学ぶために

製品や技術を入手するために

議論するために

  • Maqetta ユーザー・グループに加わってください。Maqetta を使用してデスクトップ/モバイル用 UI を作成している他のデザイナーや開発者と情報を交換できます。
  • developerWorks コミュニティーに加わってください。ここでは他の developerWorks ユーザーとのつながりを持てる他、開発者によるブログ、フォーラム、グループ、Wiki を調べることができます。

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Mobile development, Open source, Web development
ArticleID=931826
ArticleTitle=モックアップという意味を持つ Maqetta: 第 1 回 HTML5 を使用したモバイル UI をデザインする
publish-date=05302013