INDUSTRIES

自動車

航空・宇宙

金融

ゲーム

メドテック

IoT

デジタルプロダクト

USE CASES

エンタープライズ向け

個人向け

チーム向け

教育向け

KEY FEATURES

ハードウェア・システム統合

Beta

ProtoPie MCP

マルチデバイス・プロトタイピング

インタラクション・ロジック

開発者へのハンドオフ

ProtoPie AI

New

ユーザーテスト

PLUGINS

Figma

Sketch

Adobe XD

INSIGHTS & INSPIRATION

ブログ

eBook

カスタマーストーリー

イベント&ウェビナー

ProtoPie ギャラリー

PRODUCT LEARNING & SUPPORT

ProtoPieスクール

ProtoPieをダウンロード

製品ドキュメント

コミュニティ

INDUSTRIES

自動車

航空・宇宙

金融

ゲーム

メドテック

IoT

デジタルプロダクト

USE CASES

エンタープライズ向け

個人向け

チーム向け

教育向け

KEY FEATURES

ハードウェア・システム統合

Beta

ProtoPie MCP

マルチデバイス・プロトタイピング

インタラクション・ロジック

開発者へのハンドオフ

ProtoPie AI

New

ユーザーテスト

PLUGINS

Figma

Sketch

Adobe XD

INSIGHTS & INSPIRATION

ブログ

eBook

カスタマーストーリー

イベント&ウェビナー

ProtoPie ギャラリー

PRODUCT LEARNING & SUPPORT

ProtoPieスクール

ProtoPieをダウンロード

製品ドキュメント

コミュニティ

Menu

変数

変数は、価値ある情報を格納する「バスケット」のようなものとして説明できます。これらのバスケットには、名前、パスワード、アカウント残高などのさまざまなデータを後で使用できるように保存できます。変数内の値を変更し、それらの値がどのように変化するかを検出することで、動的なインタラクションを柔軟に作成できます。

変数を使うのが初めてですか?このページの例をチェックして、この強力な機能を最大限に活用してください。

  • 定義済みの変数 — プロトタイプ内でいつでもアクセスできる変数のセットです。保存されている値は自動的に更新されます。

  • ユースケース — 変数を使用した実用的なユースケースのセレクションです。

変数と数式の違い延

数式と変数はシームレスに連携して、プロトタイプを強化します。それらの関係の簡単な内訳は次のとおりです。

  • 変数: 変数を、値を保持する便利な「バスケット」と考えてください。データを保存して呼び出すことができるため、プロトタイプ全体で情報を簡単に再利用できます。変数は単独で使用することも、数式と組み合わせて使用することもできます。たとえば、変数に格納されている値を呼び出すために数式を使用します。

  • 数式: 数式は、結果を計算して「返す」式です。動的なインタラクションを作成するための強力なツールです。数式を使用して、計算の実行、テキストの操作、さまざまなタスクの実行を行うことができます。数式には、保存された値にアクセスするための変数を含めることもできます。

数式と変数の相乗効果により、プロトタイプを次のレベルに引き上げることができます。変数には数式で使用できる値が格納され、数式を変数に格納してシーン間で再利用することもできます。

要約すると、数式と変数は相互に補完し合い、プロトタイプ開発プロセスに柔軟性と効率性をもたらします。

数式について詳しくはこちら

変数スコープの選択

選択できる変数のタイプは2つあります。

すべてのシーンで利用可能

すべてのシーンで利用可能な変数は、プロトタイプ内のすべてのシーンでアクセスできます。シーン間でデータを転送するのに最適です。たとえば、シーンAですべてのシーンで利用可能な変数の値を変更すると、その変更はプロトタイプ全体でその変数が使用されているすべてのインスタンスに影響します。

このシーンのみで利用可能

このシーンのみで利用可能な変数は、それを作成したシーンに固有のものです。シーンAで作成された場合、シーンBでは使用できません。また、このタイプの変数には数式を格納することもできます。

データ型の使用

変数には、テキスト数値カラーの3種類のデータを保存できます。

テキスト

テキスト変数は、テキスト値を格納するために使用されます。数値を値として使用した場合、テキスト変数はそれをテキストとして使用します。

数値

数値変数は数値を格納します。数値以外のデータは格納できません。

カラー

カラー変数は、カラーコード(HEX値)を格納します。カラーコード以外のデータは格納できません。

「代入 (Assign)」と「検出 (Detect)」の使用

変数は通常、検出 (Detect)トリガーと代入 (Assign)レスポンスで操作されます。

代入 (Assign) レスポンス

変数に新しい値を代入するために使われます。データ型は、テキスト、数値、またはカラーになります。さらに、これらの値は直接入力することも、数式を介して動的に生成することもできます。

代入について詳しくはこちら

検出 (Detect) トリガー

変数の変化を監視するために使用されます。特定の変数でどのような変更が発生したかに基づいて、レスポンスをトリガーできます。

検出について詳しくはこちら

変数の表示

変数内の値は、専用のデバッガーを使用することで、ProtoPie Studio のキャンバスおよびプレビューウィンドウに表示できます。変数パネルの変数名の横にある虫のアイコンをクリックすることで、デバッガーを有効にできます。これにより、変数に格納されている値が正常に更新されているかどうか、常に確認できます。


{'_type': 'localeString', 'en': 'displaying-variables', 'ja': 'displaying-variables', 'ko': 'displaying-variables', 'zh': 'displaying-variables'}

基本を学ぶ

ProtoPieで変数を使用してインタラクションを作成することは、思っているよりも簡単です。この動画では、変数を使用して動的なアニメーションをすばやく作成する方法を紹介します。

サンプルで練習する

スピナーを作成する

変数を使用して簡単なスピナーをアニメーション化できます。この例では、変数の値を1ずつ増減する方法を示します。テキストレイヤーは、値が変更されるたびに変数の値を表示します。


{'_type': 'localeString', 'en': 'making a spinner'}

リップルエフェクト(波紋効果)を作成する

定義済みの変数を使用して、素早いリップルエフェクトをアニメーション化します。この例では、タッチイベントが発生した場所に基づいてリップルエフェクトを作成する方法を示します。

定義済みの変数について詳しくはこちら。


{'_type': 'localeString', 'en': 'ripple effect'}

実用的なユースケースをお探しですか?変数を使用した実用的なユースケースを詳しくはこちらで確認してください。

スキルを次のレベルに引き上げる準備はできましたか?ProtoPieマスタクラスに参加して、プロトタイプに宿る変数のパワーを解放しましょう。テキスト、数値、カラー、定義済みの変数を使用して動的なインタラクションを作成する方法を学びます。

ProtoPieマスタクラスに参加することで、スキルが急速に向上し、高度なプロトタイプを簡単に作成できるようになります。このレベルアップの機会をお見逃しなく!