スタートガイド

ProtoPie 3.9から数式と変数を支援します。インタラクションで固定値ではない四則演算および関数を組み合わせた可変的な数値を活用することができます。特に、レイヤのプロパティの値を参照したり、変化する値が保存できる変数を組み合わせて、インタラクションをよりダイナミックで簡潔に作ることができます。

数式入力

四則演算にレイヤのプロパティを参照して可変的な数値が入力できる入力機です。変数と関数が同時に使用できます。プロパティインプットの開くボタンを押すと現れ、数式入力のための自動完成機能が使用できます。

数式入力

チュートリアル

数式

Formular(数式)機能の基本的な使い方です。レスポンスに値を入れるときに、レイヤの座標を直接参照することで、固定された値で変化するインタラクションではなく、動的に状況によって変わるインタラクションが作れます。

変数

Variable(変数)の基本的な使い方です。Variable(変数)には数字、文字、色の値が割り当てられ、アサインレスポンスを用いてvariable(変数)の値を変更してそれに従って変化するインタラクションが作れます。

タブメニュー

レスポンスの数値に固定値でない数式が入力でき、他のレイヤプロパティが数式に使用できます。青いレイヤをMenu2の位置に移動したい場合、’Menu2’.xのように書くことができます。

スピンナー

変数を使って1ずつ増加したり1ずつ減少するspinner (スピンナー)が作れます。

リップル効果

擬似変数を使って画面をタッチする位置の座標値を持ってくることができます。タッチする位置からリップル効果を作るにはリップルレイヤの移動レスポンスの座標にそれぞれ$touchX, $touchYを入力します。

テキスト入力

`layerName`.text プロパティを使用するとテキストインプットに入力されたテキスト値が参照できます。数式インプットで文字列演算を使うと他の文字列との組み合わせもできます。

変数

変数が生成できます。変数にはテキスト、数字、色の値が入れられます。アサインレスポンスを生成して変数の値が変更でき、Detect Triggerを用いて変数の値が変わると動作するインタラクションが作れます。レスポンスを使用するとき、プロパティに定数の代わりに変数を直接入力してムーブ、スケール、回転などの値が変えられます。

全体シーン変数
ProtoPieの全てのシーンで使用できる変数です。シーン間のインタラクションを作るときに活用できます。例えば、Aシーンで ”全体シーン変数”の値を変えてBシーンで変わった変数に反応するように作れます。
現在シーン変数
変数を生成したシーンだけで使用できるローカル変数です。Aというシーンで作った変数をBシーンでは使用できません。各シーンごとに変数の値を独立的に活用するとき使用します。

変数タイプ

変数には保存できる値のタイプがあります。数字、文字列、色のタイプの中で一つが指定でき、値を保存したり使用するときに指定されたタイプに応じて動作します。

文字列
文字列形式の値だけ使用できます。数字を割り当ててもシステムは文字列だと認識します。
数字
数字形式の値だけ使用できます。文字列を割り当てるとエラーが発生します。
#FFFFFF形式の色値だけ使用できます。他の形式の値を使うとエラーが発生します。

Variable Display

変数の値を画面に表示できます。変数に意図した値が正しく割り当てられているか確認する用途で使えます。

定義済み変数

ProtoPie内にあらかじめ生成されている変数です。マウスポインタの座標またはモバイルでのキーボード高さの値などを持ってくることができます。

  • $touchX 画面をタッチした時のX座標が得られます。
  • $touchY 画面をタッチした時のY座標が得られます。
  • $touchVelocity タッチした状態で指を動かす速度の値が得られます。
  • $touchVelocityX タッチされた状態で指を動かす速度のX軸方向値が得られます。
  • $touchVelocityY タッチされた状態で指を動かす速度のY軸方向値が得られます。
  • $touchPointerCount 画面にタッチした指の数がわかります。
  • $keyboardHeight モバイルでキーボードが上がってきたときのキーボード高さの値がわかります。
  • $deviceOS 現在使用中のデバイスのOSがわかります。

数式シンタックス

リテラル バリュー

数式インプットでレイヤ名を参照したり、数字、文字列などを使用するとき、下記の表記法に合わせて使用しなければなりません。

レイヤ名

レイヤ名の両端にバッククォートを使用しなければなりません。

レイヤ名

文字列

文字の両端にダブルクォーテーションマークまたはシングルクォーテーションマークを使用しなければなりません。

文字列

文字列改行

改行が必要な部分に \nを使用します。

文字列改行

数字

記号が含まれていない1234形式の数字を使用しなければなりません。

数字

#FFFFFF形式の色の値を使用しなければなりません。

色

変数

記号が含まれていないvariableName形式を使用しなければなりません。

変数

四則演算

足し算(+), 引き算(-), 掛け算(*), 割り算(/), 剰余演算(%)など四則演算ができます。

剰余演算(%)

割り算をした後の剰余を求めます。例えば5%2は5を2で割った後の剰余である1になります。

文字列演算

他の演算は全て数字どうしの演算だけを支援しますが、足し算は文字列に使用できます。文字列で足し算をしたときには文字列をつなげる用途で使用されます。たとえば、文字列”1”と文字列”2”で足し算をすると,”12”になります。

文字 + 文字

"helloworld"

"12"

文字 + 数字

"hello1234"

レイヤプロパティ

レイヤの座標、大きさなどのプロパティ値が参照できます。

  • `layerName`.x レイヤのX座標値を求めます。
  • `layerName`.y レイヤのY座標値を求めます。
  • `layerName`.width レイヤの幅の値を求めます。
  • `layerName`.height レイヤの高さの値を求めます。
  • `layerName`.scaleX レイヤのscale factor X値を求めます。
  • `layerName`.scaleY レイヤのscale factor Y値を求めます。
  • `layerName`.rotate レイヤの回転値を求めます。
  • `layerName`.opacity レイヤの不透明度を求めます。
  • `layerName`.radius レイヤの半径を求めます。
  • `containerName`.scroll 現在スクロールされた値を求めます。
  • `layerName`.color レイヤのColor HEX値を求めます。
  • `layerName`.fillOpacity レイヤの塗りつぶしの不透明度の値を求めます。
  • `layerName`.text テキストレイヤの文字列を求めます。

Function

文字列操作

  • length(source: TEXT)NUMBER
    • 文字列の長さを返します。
    • e.g. length("hello")5
  • left(source: TEXT, count: NUMBER)TEXT
    • 文字列と数字を入力すると左側から入力した数字までの文字列を返します。
    • e.g. left(“hello”, 3)“hel”
  • right(source: TEXT, count: NUMBER)TEXT
    • 文字列(“hello”)と数字(3)を入力すると右側から数字(3)までの文字列を返します。
    • e.g. right(“hello”, 3)"llo”
  • concat(source1: TEXT, source2: TEXT)TEXT
    • 二つの文字列を入力すると一つになった文字列を返します。
    • e.g. concat("hello", "world")"helloworld"
  • replace(source: TEXT,from: TEXT, to: TEXT)TEXT
    • 文字列の一部を他の文字列に置換して返します。
    • e.g. replace("helloworld","world", "protopie")"helloprotopie"
  • trim(source: TEXT)TEXT
    • 文字列両端の空白を消します。
    • e.g. trim(" helloworld ")"helloworld"
  • ltrim(source: TEXT)TEXT
    • 文字列左側の空白を消します。
    • e.g. ltrim(" helloworld ")"helloworld "
  • rtrim(source: TEXT)TEXT
    • 文字列右側の空白を消します
    • e.g. rtrim(" helloworld ")" helloworld"
  • indexOf(source: TEXT, searchValue: TEXT)NUMBER
    • source 文字列で searchValueの位置を返します。位置の値は0から始まり、searchValueが見つからなかったら-1を返します。
    • e.g. indexOf("hello world", "world")6
  • lowerCase(source: TEXT)TEXT
    • 文字列を小文字に変更します。
    • e.g. lowerCase("Hello")"hello"
  • upperCase(source: TEXT)TEXT
    • 文字列を大文字に変更します。
    • e.g. upperCase("Hello")"HELLO"

演算

  • min(source1: NUMBER, source2: NUMBER)NUMBER
    • 二つの数字の中で小さい数字を返します。
    • e.g. min(0, 1)0
  • max(source1: NUMBER, source2: NUMBER)NUMBER
    • 二つの数字の中で大きい数字を返します。
    • e.g. max(0, 1)1
  • abs(source: NUMBER)NUMBER
    • valueの絶対値を返します。
    • e.g. abs(-1)1
  • round(source: NUMBER)NUMBER
    • 小数点を四捨五入した値を返します。
    • e.g. round(1.5)2
  • floor(source: NUMBER)NUMBER
    • 小数点を切り捨てした値を返します。
    • e.g. floor(1.5)1
  • ceil(source: NUMBER)NUMBER
    • 小数点を切り上げした値を返します。
    • e.g. ceil(1.5)2
  • sqrt(source: NUMBER)NUMBER
    • 数字の平方根を返します。負の値を入れるとエラーが発生します。
    • e.g. sqrt(9)3
  • pow(source1: NUMBER, source2: NUMBER)NUMBER
    • number1をnumber2だけ累乗した値を返します。
    • e.g. pow(2, 3)8
  • sin(radian: NUMBER)NUMBER
    • 数字のサインの値を返します。
    • e.g. sin(90)-0.89
  • cos(radian: NUMBER)NUMBER
    • 数字のコサインの値を返します。
    • e.g. cos(90)-0.45
  • tan(radian: NUMBER)NUMBER
    • 数字のタンジェントの値を返します。
    • e.g. tan(45)1.62
  • asin(value: NUMBER)NUMBER
    • アークサイン値をラジアンで返します。
    • e.g. asin(0)0
    • e.g. asin(1)1.5707963267948966(PI / 2, 90°)
  • acos(value: NUMBER)NUMBER
    • アークコサイン値をラジアンで返します。
    • e.g. acos(0)1.5707963267948966(PI / 2, 90°)
    • e.g. acos(1)0
  • atan(value: NUMBER)NUMBER
    • アークタンジェント値を-PI/2とPI/2間のラジアンで返します。
    • e.g. atan(0)0
    • e.g. atan(1)0.7853981633974483(PI / 4, 45°)
  • random()NUMBER
    • 0~1の間のランダムな数字を返します。
    • e.g. random() ➔ 0~1の間のランダムな数字を返します。
  • random(min: NUMBER, max: NUMBER)NUMBER
    • 指定した数字間のランダムな値を返します。
    • e.g. random(1, 5) ➔ 1-5間のランダムな数字
  • randomInt(min: NUMBER, max: NUMBER)NUMBER
    • 指定した数字間のランダムな整数値を返します。
    • e.g. randomInt(1, 5) ➔ 1-5間のランダムな数字

  • color(red: NUMBER, green: NUMBER, blue: NUMBER)COLOR
    • RGB値を入れると色の値に変換されます。
    • e.g. color(255, 255, 255)#FFFFFF
  • red(source: COLOR)NUMBER
    • 色の値を入れるとその色のred値を返します。
    • e.g. red(#FF0000)255
  • green(source: COLOR)NUMBER
    • 色の値を入れるとその色のgreen値を返します。
    • e.g. green(#FF0000)0
  • blue(source: COLOR)NUMBER
    • 色の値を入れるとその色のblue値を返します。
    • e.g. green(#FF0000)0

タイプ変換

  • text(source: NUMBER)TEXT
    • 数字を文字列に変換します。
    • e.g. text(1234)"1234"
  • number(source: TEXT)NUMBER
    • 文字列を数字に変換します。文字列が正しい数字でない場合、エラーを返します。
    • e.g. number("1234")1234
  • color(source: TEXT)COLOR
    • 文字列を色の値に返します。文字列はHEX RGBで表現された文字列(例: #FF0000)でなければならなず、そうでない場合はエラーを返します。
    • e.g. color("#FFFFFF")#FFFFFF
  • format(value: NUMBER, format: TEXT)TEXT
    • 数字を希望する形式の文字列に変換します。数字を何文字ずつ、どんな文字で区切って表現するか、小数点の表現文字と小数点以下の桁数が指定できます。
      number: 文字列に変換しようとする数字
      formatText:数字形式を指定する文字列。定数部分は#で、少数部分は0で表示し、セパレータで使用する文字を途中追加できます。
    • e.g. format(1234.567, "#,###.00")1,234.58
    • e.g. format(1234567, "#,###.00")1,234,567
    • e.g. format(1234.567, "#.###,00")1.234,57
    • e.g. format(1234.567, "#,##.00")12,34.57
    • e.g. format(1234.567, "#,###")1,235
    • e.g. format(1234.567, "#")1235
Language selector
TOP