KDE BLOG

Webデザインやコーディングについて書いています

【Origami Studio】Coming From Code の翻訳

アニメーションのプロトタイピングを作るのに最適なツールを探していて、Origami Studio を使い始めました。
最初はちょっと取っ付きにくくて「やっぱタイムライン式のほうがいいかな…」と思ったけれど、チュートリアルをやっていくうちに大体使い方を分かって、かんたんなものなら思ったように作れる様になりました。

もっとOrigami Studio についての理解を深めたく、 Coming From Code というページが気になったので翻訳しておこうと思います。
(例のごとく Google 翻訳使います)

origami.design

Using functions and adding logic to your prototypes is straightforward in Origami, but a little different to what you might expect if you come from a programming background. If you haven’t touched code before, feel free to skip forward to Adding Logic.

関数の使用とプロトタイプへのロジックの追加はOrigamiでは簡単ですが、プログラミングのバックグラウンドから来た場合に期待することとは少し異なります。
これまでにコードに触れたことがない場合は、ロジックの追加に進んでください。

Patches and functions(パッチと関数)

The basic building blocks in Origami are called patches. They are similar to functions as far as they take data input(s), perform an action on it, and produce a result.

Origamiの基本的な構成要素はパッチと呼ばれます。
データ入力を取り、それに対してアクションを実行し、結果を生成するという点では、関数に似ています。

Origami patches work in the same way; taking a single or multiple input(s), performing an action, and producing an output — albeit using a slightly different format.

Origami のパッチも同じように機能します。
1つまたは複数の入力を取り、アクションを実行し、出力を生成します。
ただし、形式は少し異なります。

f:id:jinseirestart:20200606172425p:plain

What makes Origami unique is the suite of pre-made patches that allow you to listen for various types of interaction, create natural animations, manipulate layer properties, and more. Just like functions in code, you can also create your own patches.

Origamiのユニークな点は、さまざまな種類の相互作用を聞いたり、自然なアニメーションを作成したり、レイヤープロパティを操作したりできる、事前に作成されたパッチのスイートです。

Inputs and outputs(入力と出力)

We are using an example of converting Fahrenheit to Celsius. Fahrenheit being our Input value, and Celsius being our returned value, or Output.

華氏を摂氏に変換する例を使用しています。華氏は入力値、摂氏は戻り値または出力です。

In programming languages such as JavaScript, this calculation would look something like this:

JavaScriptなどのプログラミング言語では、この計算は次のようになります。

function fahrenheitToCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}
var text = fahrenheitToCelsius(86);

Calculations done in patches are hidden from view by default. The patch simply presents the published Input(s) and Output(s).

パッチで行われる計算は、デフォルトでは非表示になっています。パッチは、公開された入力と出力を提示するだけです。

f:id:jinseirestart:20200606172915p:plain

Entering this custom-made patch through Patch > Enter Patch Group ⌘↓ reveals the same calculations as in code.

Patch > Enter Patch Group )からこのカスタムパッチを入力すると、コードと同じ計算が表示されます。

※ ドキュメントと 使用しているorigami studio のバージョン(Version 131604203)が違うからなのか不明ですが、Patch > Enter Patch Group が見当たりませんでした。
代わりに、component をダブルクリックあるいは option(⌥) で表示できました。

f:id:jinseirestart:20200606172929p:plain

One important thing to take note of is the order of calculations. Code usually follows the traditional order of mathematical operations; prioritizing some operators (/,*) over others (+, -). Origami simply calculates from the order in which the patches are connected.

注意すべき重要な点の1つは、計算の順序です。
コードは通常、従来の数学演算の順序に従います。
一部の演算子/*)を他の演算子+-)よりも優先します。
Origamiは、パッチが接続されている順序から単純に計算します。

Multiple outputs(複数の出力)

Returning multiple outputs is easy in Origami. This means patches can be used beyond what functions are typically used for. As an example, here is our temperature calculating patch going beyond Fahrenheit to Celsius:

Origamiでは、複数の出力を返すのは簡単です。
これは、パッチが通常使用される機能を超えて使用できることを意味します。
例として、華氏を超えて摂氏に達する温度計算パッチを次に示します。

f:id:jinseirestart:20200606175532p:plain

Values calculated inside the patch simply need to be published as outputs:

パッチ内で計算された値は、出力として公開する必要があるだけです。

f:id:jinseirestart:20200606175552p:plain

Logic and conditionals(論理と条件)

Logic in code, called conditionals, is a little different from the way Origami handles logic. Code usually runs linearly from top to bottom, and requires calculations to be done before moving to the next line.

条件文と呼ばれるコード内のロジックは、Origamiがロジックを処理する方法とは少し異なります。
通常、コードは上から下に直線的に実行され、次の行に移動する前に計算を行う必要があります。

In Origami’s visually-focused Patch Editor, information flows from left to right (including logical operations), depending on what is being interacted with and/or triggered. For that reason, you won’t find patches analogous to if, else, else if, or while found in code. Instead, information passed through patches (usually from an interaction) will only continue to flow unless the comparison is false.

Origamiの視覚に焦点を当てたパッチエディタでは、情報のやり取りやトリガーに応じて、情報が左から右へ(論理演算を含む)流れます。 そのため、コード内で if、else、else if、またはwhileに類似したパッチは見つかりません。
代わりに、パッチを介して渡された情報(通常はインタラクションから)は、比較が false でない限り、流れ続けるだけです。

Doing math(数学をする)

Math in Origami is largely the same as arithmetic operators in code. Origami has patches for most standard operators.

Origamiの数学は、コードの算術演算子とほとんど同じです。
Origamiには、ほとんどの標準オペレーター用のパッチがあります。

3+2
3-2
3*2
3/2

f:id:jinseirestart:20200606171814p:plain

Comparing items(アイテムの比較)

Origami is able to take values and output a true or false boolean value, similar to comparison operators in code.

Origamiは、コードの比較演算子と同様に、値を取得して true または false のブール値を出力できます。

3>2
3<2
3==2

f:id:jinseirestart:20200606171604p:plain

Comparing with logic(ロジックと比較する)

This is where things start to diverge. Origami has built-in patches which allow for common logic to be done quickly and easily. For example:

これは、物事が分岐し始めるところです。 Origamiには、一般的なロジックをすばやく簡単に実行できるようにするパッチが組み込まれています。例えば:

3>=2

f:id:jinseirestart:20200606171439p:plain

In code, a logical operator is usually paired with a comparison operator (as shown above). Origami makes it easy to make comparisons with dedicated patches for common logic:

コードでは、論理演算子は通常、比較演算子とペアになります(上記を参照)。
Origamiを使用すると、一般的なロジック用の専用パッチと簡単に比較できます。

&&
!
||

f:id:jinseirestart:20200606171336p:plain

These patches are useful for checking conditionals—similar to if or else. Take an example of checking to see if a calculation is true:

これらのパッチは、ifまたはelseと同様に、条件をチェックするのに役立ちます。計算が正しいかどうかを確認する例を見てみましょう:

if (3>2 && (2==3||2<3) && 2!=>3) {
  code to be executed if true
}

Origami takes the information flowing left to right (analogous to 3>2 && (2==3||2<3) && 2!=>3 above) and outputs either true or false, represented by the output on the And patch:

Origamiは、左から右に流れる情報(上記の 3>2 && (2 == 3 || 2 <3) && 2 !=> 3に類似)を取り、And パッチの出力で表されるtrueまたはfalseを出力します。

f:id:jinseirestart:20200606171245p:plain

Chaining multiple calculations can become complex and difficult to manage in code. This task becomes intuitive and flexible when built in Origami.

複数の計算の連鎖は複雑になり、コードでの管理が困難になる可能性があります。
このタスクは、折り紙に組み込むと直感的で柔軟になります。