信じられるようなカメラインタラクションを作成したいですか？ このチュートリアルでは、わずか数クリックでそれらをプロトタイプ化する方法をご紹介します！
デモ動画を見て、カメラインタラクションを使ってどれほど素晴らしいプロトタイプを作成できるかを確認してください。
刺激を受けましたか？ 以下のチュートリアルに沿って、自分だけのカメラインタラクションのプロトタイピングを始めましょう。
概要
必要なもの
学べること
カメラインタラクションのプロトタイプを作成する方法
ステップ1: Camera Layer を作成する
ステップ2: カメラを起動する
ステップ3: プレビュー！
ステップ4: インタラクションを追加する
これで完了！ カメラインタラクションの準備ができました！
カメラインタラクションについてさらに学ぶ
プロトタイピングのレッスンをもっと見る
ProtoPie Schoolでさらに学ぶ
必要なもの
まだProtoPieを使っていないなら、ProtoPie Studioを無料でダウンロードしてください。
次に、以下のPieファイルをダウンロードして、このプロトタイプを自分で作成しましょう。
実際のデバイス上でインタラクションをプレビューするので、スマートフォンも手元に用意してください。まだの場合は、デバイス上でプロトタイプを直接プレビューしてテストできるProtoPie Playerアプリがインストールされていることを確認してください：
学べること
このチュートリアルの最後には、次のことができるようになります：
Camera Layer を作成する
カメラを起動する
写真撮影や前面・背面カメラの切り替えといった機能を、Camera Responseを使って実現するインタラクションを作成する
スマートフォンでインタラクションをプレビューする
フィードバックと操作感を向上させるために体験をアニメーション化する
所要時間：15分以下
カメラインタラクションをプロトタイプする方法
ステップ1: Camera Layer を作成する
さっそく始めましょう！ まず、上でダウンロードした開始用のPieファイルをProtoPie Studioで開きます：
カメラアプリのインターフェースの作り始めは、すでに用意されています。
新しい Camera layer を作成しましょう。
Media メニューで、Camera を選択します。
マウスカーソルが十字アイコンに変わります。シーンに Camera layer を描画します。
まだ行っていなければ、Camera layer のサイズを画面全体に合わせます。
これを行うにはコントロールポイントをドラッグするか、プロパティパネルに値を入力します。
UIコンポーネントである
Shutter ButtonとSwitch Cam Buttonを、カメラレイヤーの上に配置したいです。
Camera layer をスタックの一番下にドラッグします。
ステップ2: カメラを起動する
シーンが始まったらカメラも起動させたいですよね。ProtoPieなら簡単です：
プロパティインスペクターで、Auto Start の横のボックスにチェックを入れます。
使用するカメラを選べます。Rear を選択します。
ステップ3: プレビュー！
これは、カメラが見ているものにはあまり見えませんよね？ カメラの映像を見るには、Pie をデバイス上で直接プレビューする必要があります。
Studio の Preview ボタンをクリックすると、これが表示されます。
そこで登場するのが ProtoPie Player アプリです！ これは強力で無料のアプリで、あなたや、あなたが Pie を共有した相手が、ネイティブのモバイル体験のようにスマートフォンやタブレットでプロトタイプを実行できるようにします。
さらに、スマートフォンのカメラのような内蔵デバイスセンサーを使う唯一の方法でもあります。まだなら、上の 必要なもの セクションのリンクを使って、デバイスにアプリをインストールしてください。
Studio で、右上のアイコン群の中にある Device をクリックします。QRコードが表示されます。あとで必要になるので、このまま表示しておいてください。
デバイスで ProtoPie Player アプリを起動します。すると、この画面が表示されます：
［QRコードをスキャン］をタップします。
上で表示したQRコードをスキャンしてください。これで Pie がスマートフォン上で動作し、シーンは背面カメラの映像で埋まるはずです。
💡 注：これを機能させるには、スマートフォンが Studio を実行しているコンピューターと同じ WiFi に接続されているか、デバイスが USB ケーブルで Studio を実行しているコンピューターに接続されている必要があります。デバイス上で Pie が起動しない場合は、スマートフォンがこの2つの方法のいずれかで接続されていることを再確認してください。
ステップ4: インタラクションを追加する
デバイスで Pie をプレビューする方法がわかったので、Switch Cam ボタンと Shutter ボタンを接続しましょう。
Tap トリガーを追加します。
Switch Cam Buttonレイヤーを選択します。
Camera レスポンスを追加します。
Camera 1レイヤーを選択します。
プロパティパネルで、Camera の選択ドロップダウンから Switch を選択します。
別の Tap トリガーを追加します。
Shutter Buttonレイヤーを選択します。
Camera レスポンスを追加します。
Camera 1レイヤーを選択します。
Shutter ボタンをタップしたときに Pie で写真を撮りたいです。ProtoPie では、カメラを停止することでこれを実現します。
プロパティパネルで、Action の横にある Stop を選択します。
スマートフォンの Player でプレビューを更新するには、Studio の Run アイコンをクリックします。これで変更が反映された状態で、デバイス上の Pie が再読み込みされます。
これで、前面カメラと背面カメラを切り替えたり、写真を撮ったりできるはずです。
これで完了！ カメラインタラクションの準備ができました！
これで、Camera Layer オブジェクトと Camera Response を使ってデバイス内蔵カメラを使うプロトタイプを作成する方法がわかり、ProtoPie Player アプリを使って、あなたの素晴らしい作品をスマートフォンやタブレットで実行する方法も学びました。よくできました！
体験を改善したい場合は—現時点では Pie では写真を1枚しか撮れず、フィードバックもほとんどなく、前面カメラと背面カメラの切り替えももう少し洗練できるはずです—この続編動画をご覧ください。今作成した内容を基に、かなり信じられるカメラアプリのデモへと仕上げます。
カメラインタラクションについてさらに学ぶ
プロトタイピングのレッスンをもっと見る
このシリーズを通して見てきた方なら、前回の記事が Voice と Speech について扱っていたことを覚えているでしょう。どちらもモバイルデバイスで見事に動作します。プロトタイピングスキルを高めるために、すべてのレッスンを見てみましょう。
レッスン5: カメラインタラクションをプロトタイプする方法
ProtoPie Schoolでさらに学ぶ
プロトタイピングを極めて修了証明書を取得したいですか？ それなら ProtoPie School へ、完全無料です！
