インタラクティブ・テキストフィールドを作成する方法

2024/05/02

プロトタイプを作成する際にしばしば必要になるのが、ユーザーが入力可能なテキストフィールドです。ProtoPieを使えば、これがとても簡単に実現できます。このチュートリアルでは、ユーザーがテキスト入力できるようにするのがいかに簡単か、そしてそのフィールドで何ができるかをご紹介します。

必要となるもの
このチュートリアルで習得できること
インタラクティブなテキストフィールドのプロトタイプ作成方法
- ステップ1：テキスト入力ボックスの追加
- ステップ2：入力ボックスのカスタマイズ
- ステップ 3：デバイスでプレビューする
- ステップ4：インタラクションの追加
- ステップ 5: 再度プレビューする
完成！
インタラクティブ・テキストフィールドについてもっと知る
プロトタイピング講座はこちら

必要となるもの

このチュートリアルに沿って操作するには、以下のサンプルPieをダウンロードし、Studioで開いてください。

タイピング・インタラクション・Pieファイル

実際に体験しながら、デバイス上で直接プレビューすることができます。これを行うには、携帯電話またはタブレットにProtoPie Playerアプリをインストールする必要があります。ProtoPie Playerは無料ながら高性能なアプリで、自分だけでなく、Pieを共有する誰もが、まるでネイティブのモバイル体験であるかのように、自分のデバイス上でプロトタイプを実行することができます。

iOS
Android

このチュートリアルで習得できること

このチュートリアルを経て、以下のことができるようになります。

Pie（プロトタイプ）にテキスト入力ボックスを追加する
テキスト入力ボックスをカスタマイズする
ユーザーがキーボードのリターンキーを押したときに、入力が終了したことを示すリアクションをとる
Web URLをビルドして呼び出す - これは数式と呼ばれるProtoPieの高度な機能のプレビューです。
デバイスでプレビューする

所要時間：15分程度

インタラクティブなテキストフィールドのプロトタイプ作成方法

インタラクティブなテキスト入力フィールドを作成する方法については、ビデオチュートリアルをご覧になるか、以下の詳しい操作ガイドに従ってください。

ステップ1：テキスト入力ボックスの追加

まずは、Pieファイルのサンプルを開いてください。Googleの画像検索UIのような1枚の背景画像レイヤーが表示されます。

左上のアイコンの中から「Text」メニューを探します。それをクリックして「Input」を選びます。
入力フィールドをドラッグして、画面上の好きな場所に配置します。

入力ボックスは、背景画像の中にあるカプセルのような形の中（上記画像参照）にぴったりと収まるように配置しなくてはなりません。

テキストボックスの名前を分かりやすいように変更しましょう。レイヤーをダブルクリックし、名前を Search とします。この名前は正確に "Search" （大文字と小文字を区別する）」であることが後々重要になります。もし、小文字のsや "Search" 以外の名前を付けてしまっている場合は、今すぐ修正しましょう。

ステップ2：入力ボックスのカスタマイズ

入力ボックスが背景に対してシームレスに見えるようにします。プロパティパネルで「Fill」の横のチェックボックスをオフにして、テキストボックスからグレーの背景色を取り除きます。
現在、テキストボックスのテキストは「placeholder」となっています。これは、プロパティパネルのPlaceHolderセクションで変更できます。テキストの例： "search for images"

💡 ヒント：プレースホルダーテキストの色と透明度もここで変更できます。

さらに自由にカスタマイズできるオプションがあります。例えば、フィールドにフォーカスを当てたときに表示されるキーボードの種類や、入力ボックスをパスワードフィールドにするかどうかを選択できます。

Text、URL、Email、Numberのいずれかを選択すると、取得したい情報に合わせてキーボードが調整されます。例えば、Numberを選択すると、フィールドにカーソルを合わせたときにテンキーが表示されます。パスワードオプションのいずれかを選択すると、入力された文字がそのまま表示されるのではなく、マスクされます。

キーボードオプションの2番目（Return）は、画面上のキーボードでReturnキーを押した時のオプションです。

最後に、iOS用にデザインしている場合は、ライトまたはダークのテーマを選択できます。

ステップ 3：デバイスでプレビューする

Studio Previewで、テキストボックスをクリックします。画面上にキーボードが表示されます。まずは入力しようとキーボードのキーをクリックすると思います。しかし、実際にやってみると、うまくいかないことがわかります。この場合、テキストボックスのフォーカスが失われ、キーボードが隠れてしまいます。

お使いのデスクトップ上のStudioでテキスト入力をプレビューする場合は、キーボードを使って入力する必要があります。画面上のキーボードは、Studioの中では単なるプレースホルダーの画像でしかありません。

代わりに、キーボードを直接入力できるように、これをデバイス上で実行してみましょう。ProtoPie Playerアプリを使用します。まだインストールしていない場合は、上記の「必要となるもの」セクションにあるリンクを使って、ProtoPie Playerをデバイスにインストールしてください。

Studioで右上のアイコンのセットから「Device」をクリックしすると、QRコードが表示されます。すぐに必要になるので、表示されたままの状態にしておきます。

お使いのデバイスでProtoPie Playerアプリを起動すると、以下の画面が表示されます：

「Click Scan QR Code」をクリックし、表示されたコードをスキャンします。これによりお使いのデバイスでPieがプレビューできるはずです。

💡 注：この操作を行うには、デバイスがStudioを実行しているコンピュータと同じWiFi上にあるか、またはデバイスがUSBケーブルでStudioを実行しているコンピュータに接続されている必要があります。お使いのデバイスでPieをプレビューできない場合は、上記の2つのいずれかの方法で接続されているかご確認ください。

デバイスのテキストボックスをタップします。入力可能なキーボードが表示されます。お使いのデバイスに応じて、iOSまたはAndroidのネイティブキーボードが表示されます。

ステップ4：インタラクションの追加

ユーザーがキーボードのSearchキーをタップしたら、入力が終わったことを意味するアクションを実行するように設定したいと思います（ステップ2でReturnキーのラベルを”Search”に変更したように）。Return Triggerを使用して、このアクションを実行できるようにします。

スタジオで Return Trigger を追加します。プロパティパネルで、”Search” 入力レイヤーに関連付けられるよう設定します。

このトリガーの下に追加した全てのResponseは、入力レイヤーにフォーカスがある状態で、ユーザーがReturnボタンをタップした時に実行されます。

次は少し難しいかもしれませんが、ProtoPieの高度な機能の1つである数式を使ってURLを作成し、ブラウザに送信します。パッと読んでピンと来なかった方もいるかと思いますが、他の記事で数式についてもっと詳しく説明する予定ですので、ご安心ください。まずは、順を追って説明していきます。

Link Responseを追加します。これは、Webブラウザのタブを開いて特定のURLにアクセスするために使用します。

Google画像検索を実行するために、ユーザーが入力した情報を使って動的URLを作成したいと思います。ユーザーが何を入力したかはReturnキーを押すまでわからないので、その場で構築する必要があります。そのために数式を使用します。Linkの下のリストで、数式を選択します。

このドロップダウンの下のボックスをクリックすると、小さな "∫x "アイコンが表示されます。これは、リンクのURLの計算式を作成できることを意味します！

"∫x"アイコンをクリックしてください。フィールドが拡張され、入力できるスペースが広がります。

以下のテキストを正確に（引用符を含めて）数式フィールドに入力するか、コピー＆ペーストします。

"https://www.google.com/search?q=" + `Search`.text + "&tbm=isch"

次に進む前に、今行ったことについてもう少し解説します。入力ボックスに文字を入力すると、その値はレイヤーの"text"というプロパティに保存されます。この数式は、3つのテキストを結合して作成しました。

既知のテキスト - この部分は常に同じです："https://www.google.com/search?q="
未知のテキスト - Search入力ボックスのtextプロパティ：`Search`.text
もう1つの既知のテキスト - やはりいつも同じです："&tbm=isch"

💡 注：最初のステップで、入力レイヤーに"Search"という名前を付けたのを覚えていますか？この数式では、"Search"レイヤーに直接名前でアクセスしています。このようにレイヤー名を使用する場合、大文字と小文字は区別されます。

繰り返しますが、難しそうだと感じても心配する必要はありません。他の記事で数式について詳しく説明します。ここで重要なことは、ユーザーが入力ボックスに入力した内容はすべて、そのレイヤーのプロパティとして保存され、Pieで使用できるということです。

ステップ 5: 再度プレビューする

最新の変更をデバイスに反映させるには、右上のアイコンのグループから「Run」をクリックします。

これで画像検索ができるようになります。検索したいものを入力し、「Search」をタップします。

検索を実行すると、結果を表示するためにデバイスがブラウザアプリに切り替わったことに気が付くはずです。iOSを使用している場合、もう1つ微調整ができます。

Return Triggerの下にあるLink Responseをクリックします。
プロパティパネルで、Open In-app Browserをチェックします。

「Run」をもう一度クリックして、最新の変更内容をデバイスに反映させます。検索を実行すると、ブラウザのタブがProtoPie Playerアプリ内で開き、「Done」をタップしてSearchボックスに戻ることができます。

これで完成です！

このチュートリアルでは、テキスト入力フィールドとその設定方法について学びました。また、入力レイヤーの text プロパティにアクセスすることで、ユーザーが入力したものを使用することができることも学びました。最後に、ProtoPieの高度な機能の1つである「数式」の機能を体験しました。次回以降、数式についても詳しく解説したいと思います！