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

数式

数式と変数を使えば、本当に命を吹き込んだようなプロトタイプを作成できます。数式は、インタラクションにロジックを追加できる式です。パスワードの検証からショッピングカート内の商品数のカウント、さらには口座残高の合計計算まで、数式があればすべて実現できます。

ProtoPieの数式機能を使えば、レイヤープロパティにアクセスし、計算を行い、文字列操作や高度な数学などのタスクに幅広い関数を利用できます。

数式は数式入力フィールドを使って追加します。必要に応じて、レイヤープロパティ、関数、変数を入力するだけです。すぐに参照したいですか? + アイコンをクリックして、利用可能なレイヤーと変数を確認できます。


{'_type': 'localeString', 'en': 'formulaInput'}

ヒント: Labs改良された数式入力フィールド を有効にすると、数式内で使われている変数がローカルかグローバルかをすばやく判別できます。ローカルはアクティブなシーンでのみ使用できることを意味し、グローバルはすべてのシーンで使用できることを意味します。


{'_type': 'localeString', 'en': 'An icon indicating the variable scope appears when typing out a variable name.'}

数式は初めてですか?心配いりません。ProtoPieの数式を最大限活用するためのリソースをご紹介します。

  • 構文 — どんな言語にもルールと原則があるように、数式にも独自のルールと原則があります。構文を学んで、自信を持って最初の数式を作成しましょう。

  • レイヤープロパティ — 幅広いレイヤープロパティを使って、インタラクションに命を吹き込みましょう。レイヤープロパティを使いこなすことは、動的なプロトタイプを作る第一歩です。

  • 関数 — 特定のタスクを実行するあらかじめ用意された数式を活用しましょう。関数はデータを処理して結果を返し、プロトタイプをさらに強力にします。

  • ユースケース — 数式を効果的に使う実践例を見てみましょう。実際のシナリオから学び、その知識を自分のプロジェクトに活かしてください。

数式と変数の違い

数式と変数は連携して、プロトタイプをさらに高めます。ここで、その関係を簡単に説明します。

変数: 変数は値を保持する便利な「かご」のようなものです。データを保存して取り出せるため、プロトタイプ全体で情報を再利用しやすくなります。変数は単独でも、数式と組み合わせても使用できます。たとえば、変数に保存された値を取得するために数式を使います。

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

数式と変数の相乗効果により、プロトタイプを次のレベルへ引き上げることができます。変数には数式で利用できる値を保存でき、数式自体も変数内に保存して、シーンをまたいで再利用できます。

要するに、数式と変数は互いを補完し、プロトタイプ開発の柔軟性と効率を高めます。

詳しく見るで変数について学びましょう。

基本を学ぶ

数式は難しそうに見えるかもしれませんが、思うよりずっと取り組みやすいものです。ほんの少しの数式で、誰でも動的なインタラクションを作成できます!

このビデオチュートリアルでは、ProtoPieを使って魅力的なインタラクションを作成する方法を学びます。シーンのどこにあっても、ある長方形レイヤーを別の長方形レイヤーの位置へ移動する様子をご覧ください。

レイヤープロパティについて、また簡単な計算の方法について学びましょう。

例で練習する

タブバーを作る

動的に反応させるには、固定値ではなく数式を使います。このビデオチュートリアルでは、数式を使ってシンプルなタブのインタラクションをアニメーション化する方法を紹介します。

レイヤープロパティについて、また簡単な計算の方法について学びましょう。


{'_type': 'localeString', 'en': 'formula menu'}

入力レイヤーのテキストを使う

変数に保存されたテキスト情報を表示するためにも数式を使えます。このビデオチュートリアルでは、シンプルな数式を使ってテキストを入力し、別の場所に表示する方法を紹介します。

入力レイヤーレイヤープロパティについて学びましょう。


{'_type': 'localeString', 'en': 'formula input'}

実践的なユースケースをお探しですか? 詳しく見るで数式の実践的なユースケースをご覧ください。