プロトタイピングツール Briefs 入門 第2回目『アセット・ホットスポット・スクロール領域』
モバイルアプリ用のプロトタイピングツール Briefs 入門 2回目です。
Briefs ってなんぞやとか、簡単な使い方は 1回目 をご覧ください。
2 回目…っつーかもはや最終回なんですけど、は残りの便利機能「アセット」「ホットスポット」「スクロール領域」、その他細かい表示の解説になります。
1 回目は何もない画面にボタンを足していきましたが、2 回目はデザインカンプはすでに作ってあるので、そこから動くプロトタイプを作りたい、という方向けの内容です。
■事前準備
デザインカンプを用意します。
後に判明しますが、カンプだけだと場合によってはリソース不足となります。。
■カンプを配置する（1 画面編）
まずは「スクロールしない固定の画面同士を遷移させたい」パターンです。
画面上部、真ん中に 3 つの切り替えタブがあるので、左の「構成図モード」にします。
そこへ、配置したいカンプをフォルダからドラッグ & ドロップします。
そうすると、構成図にカンプが加わるので、タブの真ん中「シーンモード」に戻します。
無事に追加されました。ブランクのシーンは必要なければ削除します。
次に、カンプ上のボタンをタップして別画面に遷移する、というアクションを加えてみます。
■カンプに遷移アクションを追加する
メニューから「New Hotspo Actor」を選びます。
ボタン大のホットスポット領域が出現します。ホットスポットはある程度自由に大きさや場所を変えられます。
今回は TabBar の「Genius」ボタンをタップして遷移させてみます。
いい感じにホットスポットが置けたら、1 回目と同様に「Add Action」します。
ジェスチャの種類は適当。
できました！
■実機確認
一度ここで実機確認をしてみましょう。
実機確認の手順は簡単です。まず手持ちの iOS デバイスに Briefscase をインストールします。
Briefs を起動している Mac と Briefscase を起動している iPhone を同じネットワークに繋げた状態であれば、左上のシミュレータ選択ウィンドウにデバイスが表示されているはずです。
デバイスを選択した状態で Publish を行えば iOS デバイスでモックが動きます。
■カンプを配置する（スクロール編、またはアセット編）
さて「スクロールしない固定の画面」に遷移を追加するというオーソドックスな作業はできました。
次は「スクロールする長さの画面を編集する」作業をやってみましょう。
実は、スクロールする画面を Briefs で編集するには少々厄介です。Flinto であれば「バーの外の領域が固定され、バーの内の領域がスクロールされる」つまり縦に長いカンプを1枚用意すればそれで完了だったのですが、Briefs の場合は「スクロールする画面」「その他の固定されている UI」の両方が必要になります。つまり、カンプ作りとは別の作業が発生してしまうわけですね。地味に手間がかかります。
さっそくやってみましょう。
今回はこの 3 つのパーツを使います。NavigationBar、TabBar、あと中身のコンテンツですね。
せっかくなのでアセットスタジオを使ってみます。
アセットスタジオはウィンドウ右のボタンか、⌘+L で表示されます。
アセットスタジオ自体にも 3 つのタブがあり、左から「指定したフォルダ」「ユーザーが登録したアセット」「標準で用意されているアセット」となります。
フォルダを指定すると内包されている画像データが一覧されます。
もちろん、アセットスタジオを使わなくても、この記事の最初でやったように任意のフォルダから D&D で持ってくることもできます。
アセットを配置するときの注意点がひとつあります。
Briefs のキャンバスは Xcode と同じように非 Retina がデフォルトの表示となっているため、@2x…つまり Retina サイズのアセットは、そのまま置くと 1/2 に手作業で縮小しなければいけません。
しかも、標準で置かれたアセットは非 Retina のものとして扱われるため、再度同じアセットを Retina 用として登録しなければいけません（これをしないと端末で開いたときに解像度の低い画面になってしまう。ちなみにバグっぽいけど記事の初めにやった背景画像の D&D 配置は非 Retina のアセットとして置かれてるのに解像度は高い…）。
これを回避するには、同階層に非 Retina と Retina のアセットを作成して置く必要があります。面倒ですねー。
NavigationBar と TabBar を置いてみました。
Briefs はアセット同士をいい感じに密着させるという機能がいまのところ無いので、アセットを別々に配置する際はガイドを引いておいたほうがよいでしょう。
スクロールさせたいアセットを配置します。
ここからこのアセットにスクロール領域を設定します。
メニューから「Define Scrollable Region」を選択します。
すると、こんな感じに上下左右にアセットを表示する領域が出現します。
今回はファーストビューから見切れている下の領域をスクロールさせたいので上図のように領域を設定します。
なお、応用として横に長いアセットを用意すれば横スクロールも可能です。これは Flinto にはない大きな特徴ですね。
こうして一見しただけでは 1 枚のカンプにしか見えないデータが作成できました。
はたしてシミュレータを起動してみると、無事にスクロールができました！ﾜｰﾊﾟﾁﾊﾟﾁ
これで Briefs で作ったモックには
・任意の箇所をタップして画面遷移
・スクロール領域の設定
を適用することができました。
■ジェスチャによる画面遷移
残るはジェスチャによる画面遷移です。
これまではアセットやホットスポットに対してアクションを追加していましたが、ジェスチャは画面単位での設定になります。
A パーツを右にフリックしたら遷移、とかは残念ながらできません。
ジェスチャの追加はとても簡単です。
インスペクタ下部の「Scene Action」に用意されているジェスチャの中から好きなジェスチャと遷移先の画面を結ぶだけです。
ジェスチャの種類は上下左右のフリックとピンチイン・ピンチアウトが用意されていますが、フリックは左右と上下それぞれ 1 つずつしか設定ができないので注意してください。
また、ジェスチャの他に TRIGGERED という項目があるかと思います。
これは「この画面に遷移したら自動的に他の画面に遷移させる」ためのアクションです。起動時のスプラッシュやローディング中の画面など、数秒間待たせて他の状態に遷移するような画面に適用すると効果ばつぐんです。
さて、これで
・任意の箇所をタップして画面遷移
・スクロール領域の設定
・ジェスチャによる遷移
を Briefs で作れるようになりました。
モックを作るために必要な機能は以上で大体終わりです。
いかがでしたでしょうか？これだけの機能があれば、実装されたものと遜色ないプロトタイプが作れるのではないでしょうか。
もちろん細かいところや特殊なアニメーションなどできないこともありますが、あくまでプロトタイピングのためのツールなので、必要十分といった感じかと思います。
個人的にはアニメーション GIF や軽い動画を埋め込めるようになるとそこら辺のカバーができてとても良いんじゃないかと感じます。
いまのところ次期バージョンでどのような機能が追加されるかはよくわからないのですが、これからも開発チームの方々にはぜひ頑張って頂きたいです。
そしてこの記事を読んでBriefsに興味を持った方は、ぜひ使い続けてみてください！あと布教もお願いします！みんなで買おうぜ！
以下は補足情報として、他に知っておくと便利な機能になります。
■他のデバイスのタイムラインを追加する
「Add Timeline」を選択することで、他の解像度のタイムラインを作成することができます。
同じファイルの中に生成されるので、Briefscase で開くとどのデバイスで起動するか選ぶことができます。
iPhone 4S だとどんな風に見えるか知りたい、ユニバーサルアプリだから iPad 版も見たい、といった場合に使えます。まあ容量はかなり重たくなると予想されますが、、
■詳細ビュー
Briefs はデザイナーと開発者のコミュニケーションツールとしても使用できます。
詳細ビューに切り替えれば、アセットのサイズなどが分かります。
ただ個人的にはまだまだこのモードは使うには機能不足だなと感じます。
せめて各アセット間のマージンは表示してほしいかな。あとは開発側も Briefs を購入しないといけないというハードルが。。
