プロトタイプを作るときによく行いたくなることのひとつは、ユーザーがテキストフィールドに入力できるようにすることです。ProtoPie なら、これをとても簡単に実現できます。このチュートリアルでは、ユーザーにテキストを入力してもらい、その内容を使って何かをすることが、どれほど簡単かを見ていきます。
概要
必要なもの
学べること
インタラクティブなテキストフィールドをプロトタイプ化する方法
ステップ1: テキスト入力ボックスを追加する
ステップ2: 入力ボックスをカスタマイズする
ステップ3: デバイスでプレビューする
ステップ4: インタラクションを追加する
ステップ5: もう一度プレビュー！
これで完了！バナナクリームパイのように簡単です！
インタラクティブなテキスト入力フィールドについてさらに学ぶ
ほかのプロトタイピングレッスンを見る
必要なもの
このチュートリアルに沿って進めるには、このサンプル Pie をダウンロードして Studio で開いてください。
また、体験を進めながらデバイス上で直接プレビューしていきます。そのためには、スマートフォンまたはタブレットに ProtoPie Player アプリをインストールする必要があります。ProtoPie Player は、あなたや、あなたが共有した Pie を受け取った人が、ネイティブのモバイル体験のように自分のデバイス上でプロトタイプを実行できる、強力で無料のアプリです。
学べること
このチュートリアルを終えるころには、次のことができるようになります。
Pie（プロトタイプ）にテキスト入力ボックスを追加する
テキスト入力ボックスをカスタマイズする
ユーザーがキーボードの Return キーを押して入力完了を示したときに反応する
Web URL を作成して呼び出す - これは、次の記事でさらに詳しく扱う、Formulas と呼ばれる ProtoPie の高度な機能の先取りです。
デバイス上で体験をプレビューする
所要時間: 15分以内
インタラクティブなテキストフィールドをプロトタイプ化する方法
動的なテキスト入力フィールドの作り方を学ぶには、ビデオチュートリアルを見るか、以下の詳しい手順ガイドに従ってください。
ステップ1: テキスト入力ボックスを追加する
サンプルの Pie ファイルを開きます。Google の画像検索 UI のように見える、1つの背景画像レイヤーがあります。
検索フィールドを機能させましょう！
左上のアイコン群にある Text メニュー項目を探してください。それをクリックして Input を選びます。****
ステージ上の好きな場所にドラッグして入力フィールドを描画します。
完璧でなくても心配いりません。次のステップで正確に配置します。
入力ボックスが背景のピル形状の内側にぴったり収まるサイズになるようにしたいです。
コントロールをドラッグして調整してもよいですし、ここにある値をそのまま使ってもかまいません。
テキストボックスをもっと意味のある名前に変更しましょう。レイヤーをダブルクリックし、Search. と名付けます。これは後で正確に
Search（大文字小文字を区別） という名前であることが重要です。そのため、もし代わりに小文字の s でsearchと名付けてしまっている場合や、Search以外の名前になっている場合は、ここで修正してください。
ステップ2: 入力ボックスをカスタマイズする
入力ボックスが背景になじむようにしたいです。プロパティパネルで Fill の横のチェックを外し、テキストボックスのグレーの背景色を削除してください。
現在、テキストボックスのプレースホルダーテキストは "placeholder" です。プロパティパネルの PlaceHolder セクションで変更できます。
search for imagesと入力してください。
💡 ヒント: ここではプレースホルダーテキストの色や不透明度も変更できます。
ほかにも調整できるオプションがあります。たとえば、フィールドにフォーカスしたときに表示されるキーボードの種類や、入力ボックスをパスワードフィールドにするかどうかを選べます。
Keyboard Options までスクロールし、Type の横にあるドロップダウンを探してください。
Text、URL、Email、Number のいずれかを選ぶと、取得したい情報の種類に合わせてキーボードが調整されます。たとえば、Number を選ぶと、フィールドにフォーカスしたときに数字キーボードが表示されます。パスワード系のオプションを選ぶと、入力した文字はそのまま表示されず、伏せ字になります。
左から右へ: Type に Text、Number、Password を選択した場合です。
今回は検索語句を取得したいので、Type には Text を選びましょう。
Keyboard Options の2つ目のオプションは、画面上のキーボードで Return キーに表示されるラベルです。
検索用のインタラクションを作成しているので、Search を選びましょう。
最後に、iOS 向けにデザインしている場合は、ライトテーマとダークテーマのどちらにするかを選べます。
好きな方を選んでください。
ステップ3: デバイスでプレビューする
Studio のプレビューでテキストボックスをクリックしてください。画面上のキーボードが表示されるはずです。最初は、入力するためにキーボードのキーをクリックしたくなるかもしれません。試してみると、それではうまくいかないことがわかります。テキストボックスのフォーカスが外れて、キーボードが隠れてしまうだけです。
デスクトップの Studio でテキスト入力をプレビューするときは、物理キーボードで入力する必要があります。画面上のキーボードは、Studio では単なるプレースホルダー画像です。
代わりに、デバイス上で実行して、直接キーボードで入力できるようにしましょう。そのためにデバイス上の ProtoPie Player アプリを使います。まだインストールしていない場合は、上の 必要なもの セクションにあるリンクから ProtoPie Player をデバイスにインストールしてください。
Studio で右上のアイコン群にある Device をクリックします。QR コードが表示されます。あとで必要になるので、このまま表示しておいてください。
デバイスで ProtoPie Player アプリを起動します。次の画面が表示されます:
Scan QR Code をクリックし、先ほど表示したコードをスキャンしてください。これであなたの Pie がデバイス上で起動するはずです。
💡 注: これを機能させるには、デバイスが Studio を実行しているコンピューターと同じ WiFi に接続されているか、USB ケーブルでそのコンピューターに接続されている必要があります。デバイス上で Pie が起動しない場合は、スマートフォンがこの2つの方法のいずれかで接続されているか再確認してください。
デバイス上のテキストボックスをタップしてください。入力できる実際のキーボードが表示されます。使用しているデバイスに応じて、iOS か Android の標準キーボードが表示されます。
ステップ4: インタラクションを追加する
ユーザーがキーボードの Search キーをタップして入力完了を示したら、体験が動作するようにしたいです（ステップ2で Return キーのラベルを Search に変更したことを思い出してください）。このときに反応するよう、Return トリガーを使います。
Studio で Return トリガーを追加します。プロパティパネルで、
Search入力レイヤーに関連付けるよう設定してください。
このトリガーの下に追加した Responses は、Input Layer にフォーカスがあるときにユーザーが Return（つまり Search）ボタンをタップすると実行されます。
次の部分は少しわかりにくいかもしれません。ProtoPie の高度な機能のひとつである Formulas を使って URL を作成し、ブラウザーに送ります。初めて見る内容でも心配いりません。Formulas については次の記事でさらに詳しく説明します。今は手順どおりに進めてください。
Link Response を追加します。Link Response は、特定の URL を開くための Web ブラウザータブを起動できます。
Google 画像検索を実行するために、ユーザーが入力した内容を使って動的な URL を作成したいです。Return が押されるまでユーザーが何を入力したかわからないため、その場で URL を組み立てる必要があります。そのために Formula を使います。Link の下にある一覧で Formula を選んでください。
このドロップダウンの下にあるボックスをクリックすると、小さな
∫xアイコンが表示されます。これは、リンクの URL に式を作成できるという意味です！∫xアイコンをクリックしてください。フィールドが展開され、入力スペースが広がります。
次の文字列を、引用符を含めて正確に入力するか、コピーして数式フィールドに貼り付けてください:
"https://www.google.com/search?q=" +Search.text + "&tbm=isch"
OK をクリックします。
先に進む前に、今行ったことをもう少し説明します。入力ボックスに何かを入力すると、その内容の値はそのレイヤーの text というプロパティに保存されます。私たちは、3つのテキスト片をつなぎ合わせて式を作成しました:
既知のテキストの一部 — この部分は常に同じです:
"https://www.google.com/search?q="未知のテキストの一部 — Search 入力ボックスの text プロパティ: ``Search
.textもう1つの既知のテキスト — これも常に同じです:
"&tbm=isch"
💡 注: 最初のステップで入力レイヤーを正確に Search と名付けたことを覚えていますか？今回の式では Search レイヤーに名前で直接アクセスしました。このように使う場合、レイヤー名は 大文字小文字を区別 します。
繰り返しますが、複雑に見えても心配いりません。Formulas については次の記事でさらに詳しく説明します。ここで重要なのは、ユーザーが入力ボックスに入力した内容は、そのレイヤーのプロパティとして保存され、Pie の中で利用できるということです。
ステップ5: もう一度プレビュー！
最新の変更でデバイスを更新するには、右上のアイコン群にある Run をクリックします。
これで画像検索を実行できるはずです。検索したい内容を入力し、Search.**** をタップしてください。
検索を実行すると、結果を表示するためにデバイスがブラウザーアプリに切り替わったことに気づくでしょう。iOS を使っている場合は、もう1つ調整できます。
Return トリガーの下にある Link Response をクリックします。
プロパティパネルで Open In-app Browser にチェックを入れます。
もう一度 Run をクリックして、最新の変更でデバイスを再読み込みします。検索を実行すると、ブラウザータブは ProtoPie Player アプリ内で開き、Done をタップして Search ボックスに戻れます。
これで完了です！バナナクリーム Pie のように簡単です！
このチュートリアルでは、テキスト入力フィールドとその設定方法について学びました。また、Input Layer の text プロパティにアクセスすることで、ユーザーが入力した内容を使えることも学びました。最後に、ProtoPie の高度な機能のひとつである Formulas の強力さを少し体験しました。次の記事では Formulas をさらに詳しく見ていきます！
インタラクティブなテキストフィールドについてさらに学ぶ
** **
ほかのプロトタイピングレッスンを見る
このシリーズを最初から追ってきた方なら、前回の記事で Voice と Speech を扱ったことを覚えているでしょう。どちらもモバイルデバイスで快適に動作します。すべてのレッスンをチェックして、プロトタイピングスキルを高めましょう。
レッスン6: タイピングインタラクションを作成する方法
もっと学びたいですか？ProtoPie School に登録して、プロトタイピングの達人になり、修了証を無料で手に入れましょう！
ProtoPie でインタラクティブなテキストフィールドを作成する
プロトタイピングを始める準備はできましたか？それなら ProtoPie を無料でダウンロードし、インタラクティブなテキスト入力を使ったプロトタイプ作成を始めましょう。
