これはカレンダーチュートリアルの第2部です。第1部では、ワークスペースの設定とパララックス画像の追加を順に解説しました。この第2部では、横方向のカレンダーメニュー、ナビゲーションドロワーの追加、そして FAB（Floating Action Button）について説明します。
このチュートリアルは 20〜30 分ほどかかります。まずは、インタラクションなしの基本的な ProtoPie をダウンロード済みであると仮定します。
1. 横方向のカレンダーメニューの追加
目的の効果は、ユーザーがヘッダーバーをタップして領域を縦に展開し、月を横にスクロールして、もう一度タップすると閉じられるようにすることです。
目指す結果
目指す結果は、一般的なProtoPie の概念モデルに従います
ProtoPie の概念モデル
Header object + Tap trigger + Response (高さを 74px にスケール、矢印を 180º 回転、カレンダーの不透明度を 100%)
まず、タップ時にヘッダーを縦に展開するアクションを追加します。同じアクションを使ってヘッダーを縦に縮小することもあるため、Condition を追加する必要があります。この Condition は、header が 74px（閉じた状態）と等しい場合に、ヘッダーの高さを 400px に展開する、というルールに従います。
タップと Condition を追加
左側のレイヤーパネルで Header メニューを選択した状態で、Tap のトリガーと Scale のレスポンスを追加します。Header-BG レイヤーを選択し、新しい高さを 400px に設定します。
Calendar Container に新しい Opacity のトリガーを追加し、不透明度を 100% に設定します。
これで Header が開き、スクロール可能な横方向のカレンダーが表示されます。次のアクションは、Header をタップしたときにこれらを元に戻すことです。これは 3 つのトリガー（Scale、Rotate、Opacity）と、Condition の上に並べて設定します。下を参照してください。
スクロール時にヘッダーの月タイトルを変更する
横スクロールのカレンダーはこのような構成になります。Nov は x=375px から、Dec は x=750px から始まります。
Calendar container に Detect Trigger を追加し、ドロップダウンから Scroll を選択します。最初の条件を追加し、同じくドロップダウンから Scroll を選択して値を 0 にします。これで、スクロールの X 位置が 0 のときに表示したい内容のアクションを追加できます。この場合は October です。
Oct（100% の不透明度）と Nov（0% の不透明度）の 2 つの opacity アクションを追加します。
November についても同じ手順を繰り返し、条件の値を 375px に、December の値を 750px に設定します。
2. ナビゲーションドロワーの追加
Burger container に Tap トリガーを追加し、最初のレスポンスとして Move を設定、NavigationDrawer container に割り当てて X の値を 0 にします。これにより、タップでドロワーがスライドアウトします。
同じ Burger オブジェクトに Opacity トリガーを追加し、Overlay に割り当てて、不透明度を 70% に設定します。これにより白いオーバーレイ効果が生まれ、ユーザーの視線をドロワーに集めることができます。
これで次のようになるはずです。レイヤーに重なり効果を出すために、Overlay と Navigation Drawer の重なり順を並べ替える必要があります。
Bring to front（3番目のオプション）を使って、Overlay と NavigationDrawer レイヤーの順序を入れ替えます。
重要な点として、Reorder を使って複数のオブジェクトを前面に移動すると、プロトタイプは上から下へ実行するロジックに従います。下の例を参照してください。Reorder Overlay が先に実行され、次に Reorder NavigationDrawer が実行されます。
メニューを閉じる
Overlay に Tap トリガーを追加し、Move のレスポンスを NavigationDrawer に割り当てます。
3. FAB ボタンの追加
i. FAB コントロールを開く
ボタンの配置
このプロトタイプでは、FAB が押されたときに下から上へ移動する 2 つの追加ボタンを使用しています。
Open-Fab トリガーに 2 つの Move アクション（btn-2 と btn-3）を追加し、それぞれに次の「Move To」の Y 値を設定します。
btn-2 = Y -36px
btn-3 = Y -98px
ボタンをフェードインする
4 つの新しい Opacity レスポンスを追加し、それぞれのボタンに割り当てます。すべてのボタンは 100%、FAB は 0% に設定します。
ii. FAB コントロールを閉じる
FAB コントロールを開く場合と同様に、これらのレスポンスを逆の効果でそれぞれ繰り返すだけです。レスポンスを手動でコピー＆ペーストし、アクションを個別に変更する以外に、これを素早く行う方法はありません。
iii. 画面のどこをタップしても FAB コントロールを閉じる
簡単な手順です。Close-Fab のタップトリガーから Rotate までのアクションをコピーし、Overlay 用の新しい Tap トリガーに貼り付けます。これで、ユーザーは画面上の任意の場所をタップして FAB コントロールを閉じられるようになります。
以上です。とてもシンプルで、独自のプロトタイプを作るための良い基礎になるはずですし、ProtoPie アプリを学びながらいじってみるきっかけにもなるでしょう。ご質問やコメントがあれば、下に気軽に残してください。次に見てみたいチュートリアルのアイデアがあれば、ぜひご連絡ください。
