プロトタイピングツール：Pixateの導入方法と簡単な使い方

2015.09.07

こんにちは、今回の技術ブログ執筆担当の舘林です。
今回はプロトタイピングツールのPixateについて紹介いたします。

１．プロトタイピングとは

最低限の機能や操作画面を実装した原型（プロトタイプ）を用意して、
業務に適用することを想像しながら操作してもらうことにより、利用者の要求を引き出していく技法。
ユーザー側が納得するまで、先に進めないという短所はあるものの、
利用者側と開発者側で同じ画面などを見て会話をすることができることで,
認識が異なるまま開発を進めた結果,後になって要望に沿わないことが発覚する・・・
などといった問題を抑えることが出来ます。

２．プロトタイピングの種類

プロトタイプ開発には、「使い捨て型プロトタイプ開発」と、「進化型プロトタイプ開発」の大きく分けて二種類の開発方法があります。

・使い捨て型プロトタイピング（ラピッド（高速）プロトタイピング）

システムの単純な動作モデルをつくり、最終的にシステムがどのように見えるかをユーザーに見せることで
そのモデルをユーザーの要求をさらに明確化させる方法。
正式な開発が開始されるまでに仕様を固めることを目的とするため、この工程で作るプロトタイプは基本的に使い捨てになります。
仕様が固まるまで何度もプロトタイプを作る都合上、速さが重要となります。
そのため、本番システムで使う開発ツールとは異なるプロトタイプ専用のツールを用いることもあります。
今回紹介するPixateも、使い捨て型プロトタイピングに適するツールです。

・進化的プロトタイピング（ブレッドボード・プロトタイピング）

開発者はシステム全体を一気に開発するのではなく、仕様のはっきりしている部分から先に開発し、
部分的に実装されたシステムが顧客側に渡すことで、新たな要求や改善点を見つけていく方法。
概要仕様だけを決めてプロトタイプの開発に取り掛かりそれをベースにじっくりと仕様検討していくため、
開発期間と開発工数（費用）を大幅に節減することができます
進化型プロトタイプ開発で用いるプロトタイプは最終的に本番システムとしても使うため、
開発に用いるツールは本番用のものと同じになります。そのため実際に進化型プロトタイプに使えるツールは限られます。

３．PixateStudioとは

PixateStudioは、「iOS」および「Android」で動くモバイルプロトタイプの構築を支援するソフトウェアです。
元々有償ツールだったものが、2015年7月23日にGoogleに買収されたことで無償化されました。Pixateの開発は続行されるようです。
国内でもモバイルプロトタイピングツールはグッドパッチが提供している「Prott」がありますが、こちらは有料であり、
無料かつローカルベースアプリであるPixateはセキュリティやコストの観点で優れています。

なお、有料ではありますが、Pixateでも月あたり5＄でクラウドサービスを利用する事が出来ます。
30日間限定の試用版があり、こちらは無料で利用出来ます。　http://www.pixate.com/getstarted/

４．ダウンロード～セットアップまで

Pixateを実際に使用するためにはＰＣと実機の両方に設定が必要となります。
本体のダウンロードからプロトタイプを動作できる状態までの手順は、以下のようになります。

手順１．
http://www.pixate.com/よりダウンロードします。

手順２．
落としてきたファイルを解凍し、PixateSetupを起動すると、
自動でC:\Users\［ユーザー名］\AppData\Localにインストールされ、デスクトップにショートカットが作成されます。

手順３．
携帯端末の設定をします。
GooglePlayやAppStoreなどから、使用するスマホやタブレットにPixateアプリをダウンロードします。

５．ＰＣと実機の同期

手順１．（ＰＣ）プロジェクトの新規作成またはプロジェクトを開きます。
新規作成の場合はプロジェクトの名前を設定した後、開発対象機種を選択します。
これは後からいつでも変えられます。

手順２．（ＰＣ）
画面右上のCONNECTボタンを押下します。

connectPC

手順３．（実機）
Pixateアプリを起動します。

手順４．（実機）
Studioタブにて接続先を選択します。

※接続先が表示されない場合

手順１．（ＰＣ）
ポップアップ右下のiボタンを押下します。IPアドレスとQRコードが表示されます。

ipSetup

手順２．（実機）
画面下部のCONNECT USING IP ADDRESS　ボタンを押下します。

connectDevice

手順３．（実機）
ＰＣに表示されているIPを手打ち、または画面下部のScan QR Codeボタン押下してＱＲコードをスキャンします。

useIP

手順４．（PC）
承認を求められるので、チェックボタンを押して承認。すると現在開いているプロトタイプの一覧が実機の画面に表示されます。

approve

以上で、PC上で作成中のプロトタイプを実機で操作できるようになります。
プロトタイプ操作中は音量調節ボタンまたは画面をトリプルタップすることでメニューを表示できます。
プロトタイプ操作中の動画キャプチャやプロトタイプ再起動が出来ます。

PC側での変更を逐一同期してくれるため便利ですが、電池を食うので充電器をさしておくことをお勧めします。

６．Pixateの画面の見方と簡単な使い方

PCと本体の同期が終わったらいよいよプロトタイプ作成です。
Pixateはほとんどの操作をドラッグ＆ドロップで行うことが出来ます。

各機能の詳細を説明するときりがないため、ここでは公式サンプルのPhotogramを用い、
画面の見方と各項目の簡単な説明をさせていただきます。

LayerView_status

A．画面切り替え（レイヤ）

プロジェクト立ち上げ直後はこちらの画面になっています。
ほとんどの作業はこの画面で行います。

B．画面切り替え（アセット）

自分で用意した画像をレイヤとして使用したい場合は用意した画像をドラッグ＆ドロップすることでリストに追加され、
使用可能になります。画面に配置する際もリストに追加された画像をプロトタイプ上にドラッグ＆ドロップです。

C．LAYERS

作成したレイヤがリスト表示されます。Pixateでは、このリストの順に手前から重なっていきます。

サンプルでは、最も手前にNavBarが表示され、一番後ろにBGがある状態です。
Animationなどで動かしてもこの順序は変わらないため、
仮にSampleのPhoto1をInfo1の上に移動させた場合、説明が写真の裏に回り込んでしまいます。

D．ACTIONS

初期状態では、選択したレイヤを特定の場所に移動させるスクリプトや、サイドバー作成のテンプレートなどが使用できます。
これは自由に追加、編集できるので、よく使う機能があれば作ってしまうことも出来ます。

E．INTERACTIONS

レイヤにドラッグ＆ドロップすることで、そのレイヤが指定した操作を受け付けるようになります。

スクロール機能だけは単にレイヤに設定するだけでは機能しません。
スクロール範囲は、スクロールを設定した
レイヤの直下にあるレイヤによって決定するため、配下のレイヤがなければスクロールはしません。

サンプルではScrollView直下にContainer1～5があるため、スクロール上限はContainer1上底、
下限はContainer5の下底になります。

直下のレイヤしか参照しないため、ContainerのいずれかをのContainer5の下底より下までスクロール範囲は広がりますが、
コンテナ5配下のPhoto5はいくら伸ばしてもScrollViewのスクロール範囲には影響しません。

F．ANIMATIONS

特定の操作がなされたときのレイヤの挙動を設定します。
各項目はドロップダウンで選択する形になっているため、事前に基点となるINTERACTIONを設定しておく必要があります。
サンプルではContainer１がタップされたとき、Info１を左に90pt動かすアニメーションが組まれています。

以上がPixateの基本的な機能となります。言葉にすると複雑に思えますが、直感的な操作でプロジェクトを作成でき、
作成中いつでも動作確認が出来るため、使ってみると案外扱いやすいと感じるのではないでしょうか。
Pixate公式のビデオチュートリアルは英語ですが、音声無しでも大体わかるほどよく出来ているため、
英語が聞き取れなくても一度見てみることをお勧めします。全部見ても20分程度です。

http://www.pixate.com/education/video-tutorials/

７．まとめ

プロトタイピングにはなじみのない方も多いと思いますが、
業務の効率化を考える上で、非常に有効なのではないかと思います。
プロトタイピングサービスの多くがオンラインサービスであるのに対し、ローカルアプリであるPixateは、
セキュリティの観点からオンラインの共有サービスを使えない業務での利用が可能です。
また、無料である点も導入のハードルを下げてくれるでしょう。
業務をより効率的に進める手段の一つとして、
Pixateを用いたプロトタイピングの導入を検討してみてはいかがでしょうか。