この投稿は インタープリズムの面々が、普段の業務に役立つ記事を丹精込めて書き上げる！ Advent Calendar 2016 - Qiitaの19日目 の記事です。
寒さと怠惰は例年通り
週３はコタツに埋もれて朝日を拝むようになりました.
ニシヤマです.
引き続きプレゼン資料作成ツールSoziのチュートリアルです.
interprism.hatenablog.com
今回の内容
前編では主要な機能を紹介しながら
簡単なプレゼン資料を作成するところまでいきました.
後編ではより詳細な設定や便利な編集機能を紹介します.
- フレーム制御
- トランジション制御
- レイヤ
- ブラウザ画面の操作
改めて編集画面の紹介から始めましょう.
（命名は非公式です）
前２つのドックは前編でその大半を紹介しました.
残ったディティールドックに触れながら各種操作をみていきましょう.
| 記号 | 説明 | 記号 | 説明 |
|---|---|---|---|
| a | フレームタイトル入力 | j | フレームリスト表示スイッチ |
| b | フレームID入力 | k | フレーム番号表示スイッチ |
| c | フレーム表示時間入力 | l | フレームリンク（同期）スイッチ |
| d | SVG要素ID入力 | m | フレーム切り取りスイッチ |
| e | レイヤ透明度調節バー | n | フレームタイムアウトスイッチ |
| f | トランジション持続時間入力 | o | SVG要素自動参照スイッチ |
| g | トランジション種類プルダウン | p | 参照SVG要素非表示スイッチ |
| h | 相対縮尺（％）入力 | q | 参照SVG要素フォーカススイッチ |
| i | トランジションパスID入力 | r | トランジションパス非表示スイッチ |
フレーム制御
コントロールドックで選択されたフレーム毎に
付加的な操作や設定をします.
フレームタイトルとID [a,b]
各フレームにはタイトルがつけられます.
タイトルは主に管理のために付ける名前です.
コントロールドックの一覧や出力するHTMLに含むフレームリストに表示されます.
IDは出力するHTMLやJSONに含まれますが
表示への影響は特に確認できませんでした.
内部的な識別に用いられていようです.
フレームリスト [j,k]
出力したHTMLをブラウザ表示すると
画面左上に表示中のフレーム番号を表示します.
これをクリックしてフレームリストを引き出します.
リストの項目は設定したフレーム名で
これは各フレームへのリンクです.
クリックするとリンク先のフレームへジャンプします.
番号およびリストの表示は
スイッチで表示・非表示を切り替えます.
表示時間 [c,n]
フレームに表示時間を設定して自動遷移をつけます.
スイッチでタイムアウトを有効にしてから
表示時間を入力します.
タイムアウトを付けない場合は手動でフレーム遷移です.
ブラウザ表示画面のでの操作は最後にまとめます.
要素検出 [d,o,p,q]
SVG上の要素をIDで参照します.
フォーム入力での参照と自動参照があります.
参照の後に行える操作は要素の非表示設定と要素へのフォーカス操作です.
レイヤ透過度 [e]
各レイヤの透過度を調整します.
レイヤについては後で説明します.
トランジション制御
前編では自動でつくトランジションのみでしたが
さらに効果を付け加えます.
フレーム選択状態でトランジションの設定を行うと
直前のフレームから選択中のフレームへ移る
選択中のフレームから直前のフレームへ戻る
２つのトランジションに設定を適用します.
持続時間 [f]
トランジション開始から終了までの時間です.
トランジション種類選択 [g]
以下の選択肢があります.
連続 （持続時間をスムースに遷移）
- Linear （一定スピード）
- Ease （始まり少し緩やか、終わり緩やか）
- Ease in （始まり緩やか）
- Ease out （終わり緩やか）
- Ease in-out （始まり緩やか、終わり少し緩やか）
非連続 （持続時間にステップ遷移）
- Step start （開始時）
- Step middle （中間）
- Step end （終了時）
言葉で説明してもわかりにくいのでサンプルを用意しました.
白丸の移動が各種トランジションに対応しています.
画面向かって左から順に
Linear, Ease, Ease in, Ease out, Ease in-out,
Step start, Step middle, Step end.
相対縮尺 [h]
平たく言うと遷移中のズームイン・アウトを設定です.
正の値はズームイン、負の値はズームアウトになります.
遷移パス [i,r]
IDで指定したSVG上のパスに沿って遷移します.
パスの非表示も設定できます.
上のサンプルで灰色の丸はある曲線に沿った動きをさせています.
正確には丸を動かしているのではなくて「視点」を動かしています.
丸の動く方向と「視点」の動く方向は上下左右逆さまです.
ややこしいです.
レイヤ
説明の都合で随分先延ばしになりましたが
ようやくレイヤの紹介です.
やや一般的な説明をすると
レイヤはアイテムや効果を層状に重ねて一枚の絵をつくる機能です.
各要素を別々に取り扱って管理しやすくしたり
組み合わせで複雑な効果を実現します.
SVGを出力する描画ツールでは一般的な機能かと思いますが
もし無くても簡単なテキスト編集でレイヤを作成できます.
SVGでは
例えば下のSVGは真円と楕円を含んだ二層のレイヤがを表現しています．
<svg> <g id="layer0"> <g id="g3340"> <circle r="27.142857" cy="410.93362" cx="118.57143" id="path3336" style="fill:#ff5555" /> </g> </g> <g id ="layer1"> <g id="g5555"> <ellipse ry="27.142857" rx="25.714285" cy="559.50507" cx="177.14285" id="path3338" style="fill:#ff5555" /> </g> </g> </svg>
Soziの場合は、一層以上のレイヤを重ねて一つのフレームをつくります.
少し飛躍があるかと思いますので繰り返すと
今まで一枚の紙だと思っていたフレームは
実は複数のレイヤが重なってできていた、ということです.
そして今まで紹介してきた編集の多くは各レイヤ毎に適用可能です.
例が古い気がしますが「紙が透明の紙芝居」をつくる感じです.
ID付けしたレイヤを含むSVGをSoziで読み込むと
コントロールドックの "Add layer" のプルダウンに各レイヤを示します.
クリックして追加し、さらにフレームを追加します.
縦がレイヤ、横がフレームのテーブルを展開します.
このテーブルのセルが、各フレーム時点のレイヤの表示に対応します.
例えば下の画像では "alph fornt" フレームの "Numbers" レイヤが選択されています.
セルを選択してレイヤ毎に編集できるのは大まかに次の通り.
- 視点（平行移動、拡大縮小、回転移動、切り取り）
- 透明度
- トランジション（持続時間を除く）
- リンク（直前レイヤとの同期）
トランジションの持続時間はフレーム毎（全レイヤまとめて）の設定です.
レイヤのアイデアから操作まで一息にまとめました.
簡単にでもレイヤがどういうものかを掴んでいただければ幸いです.
レイヤは「どういうものか」よりも「どう使うか」に頭を使うと思います.
変化する背景や奥行きのあるトランジションなど
使い方次第で表現の幅が大きく広がる機能です.
（絵の描ける人にもっとカッコイイ例をつくってほしい...）
ブラウザでの表示操作
最後に出力したHTMLをブラウザで表示したときのキー操作をまとめます.
フレーム遷移
| キー | 操作 |
|---|---|
| → or ↓ or Page_Down or Enter or Space or 左クリック | 次のフレームへ遷移 |
| ← or ↑ or Page_Up or 右クリック | 前のフレームへ遷移 |
| Home | 最初のフレームへ遷移 |
| End | 最後のフレームへ遷移 |
これらのキー操作は設定したトランジションになぞって遷移しますが
Shiftと合わせてキーを押すことでトランジションを無視したフレーム移行が可能です.
その場合は遷移先のフレームタイムアウトが無効になりフポーズ（一旦停止）します.
表示操作
| キー | 操作 |
|---|---|
| p | ポーズ／再開 |
| + | ポーズしてズームイン |
| - | ポーズしてズームアウト |
| r | ポーズして時計回り回転 |
| R | ポーズして反時計回り回転 |
| F11 | 全画面表示 |
ポーズした時点で次のフレームへの遷移は完了した扱いになります.
（p→とすると感覚的には次の次のフレームへの遷移になります）
終わりに
二回に渡ってプレゼンツールSoziのチュートリアルをまとめてきました.
実はまだ紹介していない機能もあります.
（音声や映像の埋め込み、一般的なスライド形式への出力など）
また、少しづつですが機能の拡張も行われているようです.
しかし残念ながら筆者が面倒くさくなってしまったので時間の都合で
ここまでの内容でおしまいにします.
Soziは一般的なスライドをつくるツールと違っていて、ややとっつきにくいかもしれません.
その分、独特な効果や自分で作り込める要素が多いと思います.
ちょっと興味が湧いたなら、手遊びにでも触ってみてください.
インタープリズムの面々が、普段の業務に役立つ記事を丹精込めて書き上げる！ Advent Calendar 2016 - Qiitaの20日目の記事
