どうも、まさとらん（@0310lan）です。
今回は、誰でも気軽にブラウザ上で「パラパラ漫画」のようなアニメーションを作成できるWebエディタのご紹介です！
このエディタが面白いのは、JavaScriptで動きを制御できるところで、活用次第ではインタラクティブなWebコンテンツやゲームなども制作することが出来ますよ！
【 Wick Editor 】
■基本的な使い方！
それでは、実際に「Wick Editor」を使いながら、どのようなサービスなのかを見ていきましょう！
まずは、サイトにアクセスして「Launch Editor」ボタンをクリックします。
すると、すぐに専用のエディタが起動します！
面倒な「ユーザー登録」などは一切不要です。
このページをブックマークしておけば、いつでも即座に作業を始められるのでオススメです。
最初に、このエディタの使い方を簡単にご紹介しておきます！
画面上部にあるのが、アニメーションの「シーン」を構成する「タイムライン」と「レイヤー」になります。
それぞれ、横軸が「タイムライン」で縦軸が「レイヤー」になっており、「＋」アイコンをクリックすることでどんどん追加していくことが可能です。
画面左にあるのが「ツールバー」で、一般的なお絵描きソフトではお馴染みの機能ですね。
テキストやシェイプ画像、フリーハンドでのお絵描きも可能です。
さらに、各「シーン」や「オブジェクト」には、それぞれJavaScriptによるコードを追加することが可能です！
コードエディタが搭載されており、この画面上でほぼすべての作業が行えるのは非常に便利です。
■簡単なアニメーションを作ろう！
それでは早速ですが、簡単なサンプルとして「シェイプ画像」を使った簡易的なアニメーションを作ってみましょう！
まずは、「円」のシェイプ画像だけを使って、次のような「顔」を作ります。
「Ctrl + A」かマウスのドラッグで、全部のパーツを選択します。
選択できたら、「Ctrl + C」でコピーしておきましょう。
次に、タイムラインの「＋」アイコンをクリックして、新しい「シーン」を追加します。
シーンを追加したら、「Ctrl + V」で先ほどコピーしたパーツを貼り付けます。
同じ作業を繰り返して、6枚の「シーン」を追加しましょう！
それぞれの「シーン」で、目を少し移動させたり、口の形状を変えたりしておきます。
パラパラ漫画のように、前後のシーンが繋がるように変化を付けるとスムーズになりますよ。
変化を付け終わったら、画面上部にある「Run」ボタンをクリック！
すると、こんな感じにアニメーションします！
適当にシェイプ画像をいじっただけですが、立派に動いてくれますね。
ちなみに、「Wick Editor」は「GIF」ファイルはもちろんのこと、Webコンテンツ用として「HTML」ファイルへの書き出しにも対応しているので便利です！
■インタラクティブなWebコンテンツを作ろう！
「Wick Editor」の基本的な使い方を把握したところで、今度はJavaScriptも使ったインタラクティブなアニメーションに挑戦してみましょう！
簡単に作れるサンプルとして、「おみくじ」コンテンツを作ってみます。
ボタンをクリックすると、「おみくじ」がアニメーションして結果をランダムに表示するというものです。
こんな感じ！
簡単な作りですが、「Wick Editor」を使ったJavaScriptプログラミングとしては、良い勉強になるサンプルとなっています！
それでは「新規プロジェクト」を作り、最初に「シェイプ画像」と「テキスト」を組み合わせて「スタートボタン」を作ってみましょう！
そして、タイムラインの2フレーム目以降に「おみくじ箱」を作り、上下に動かすアニメーションを作ります。
コツとしては、PCのキーボードにある「矢印キー」を使って、少しずつ上下に移動させると良いでしょう。
次に、「おみくじ箱」の下から「棒」を出す「①アニメーション」を作ります！
この時に、シェイプ画像が重なり合うと思いますが、この「重なり順序」は右クリックで表示されるメニューから指定することができます！
そして、「おみくじ」の結果画面も作成しておきましょう！
今回は、「大吉」「中吉」「小吉」の3つにしていますが、お好みで追加・編集してみてください！
これでアニメーションの部分は完成なので、あとはJavaScriptによるプログラムを書いていきましょう！
まず、1フレーム目に戻り、「スタートボタン」を右クリックして「Convert to Button」を選択します。
これにより、ボタンとしての機能を組み込めるようになります。
画面右の「スクリプトボタン」をクリックします！
すると、コードエディタが表示されるので、ここにボタンをクリックした時の処理を書いていきます！
処理の内容としては、ボタンをクリックしたら「おみくじ」のアニメーションを再生すれば良いので、2フレーム目に画面遷移すればOKです！
//ボタンをクリックした時の処理 function mousedown() { // 2フレーム目に移動して再生 gotoAndPlay(2); }
フレームを移動するために「gotoAndPlay()」メソッドが使えるようになっています。
また、このままだとボタンをクリックしなくても、自動的にフレームを移動してアニメーションしてしまうので、1フレーム目で停止させておく必要があります。
そこで、1フレーム目をクリックすると、このフレームだけに適用されるJavaScriptコードを書くことができます。
この状態で、次のようなコードを書いておけば良いでしょう！
//フレーム全体に共通の変数を定義する parent.count = 0; //このフレームを停止する stop();
「stop()」メソッドを使うことで、この1フレーム目は停止するため、ボタンをクリックしない限りアニメーションが再生されることはないというわけです。
また、変数定義に「parent」を付与すると、このフレームだけでなく、すべてのフレームで共通して利用できる変数が作れます。
（ここで作成した「parent.count」については後述します…）
次に、「おみくじ箱」を上下に振るアニメーションの最後のシーン（6番目）をクリックします！
この上下に振るアニメーションを3回繰り返したいので、「IF文」を使ってループさせています。
コードは次のとおり！
//parent.countの数値を比較する if(count > 3) { //3回繰り返したら7フレーム目から再生する gotoAndPlay( 7 ); } else { //3回未満なら、カウントアップして2フレーム目から再生する count += 1; gotoAndPlay( 2 ); }
ここでは、1フレーム目に定義した「parent.count」の数値を比較させており、3回アニメーションを繰り返すまで「count」の数値をカウントアップさせて条件分岐させています。
「おみくじ箱」から棒が出て来る最終フレームは、ランダムに結果を表示するプログラムを作ります！
乱数の生成には「random.integer()」というメソッドが提供されているので、こちらを使って「大吉・中吉・小吉」それぞれのフレームに振り分けていきます！
// 1〜3の乱数を生成 var rnd = random.integer( 1, 3 ); if( rnd == 1 ) gotoAndStop( 12 ); // 大吉 if( rnd == 2 ) gotoAndStop( 13 ); // 中吉 if( rnd == 3 ) gotoAndStop( 14 ); // 小吉
生成した乱数を変数「rnd」に代入し、それを「IF文」で振り分けるという流れです。
ポイントは、「gotoAndPlay()」で画面遷移するのではなく、「gotoAndStop()」メソッドを使う点です。これは、目的のフレームに移動した後に再生を停止するという機能があるためですね。
結果が表示されたフレームで、もう一度「おみくじ」を実行するために、最初に定義していた変数「count」を初期化しておきましょう！
これは、単純に「count」へ０を代入するだけで良いでしょう。
count = 0;
また、「もう1回！」ボタンをクリックしたら、再度「おみくじ」が実行できるように次のコードを「ボタン」にプログラムしておきます！
// ボタンがクリックされた時の処理 function mousedown() { // 2フレーム目に移動して再生する gotoAndPlay(2); }
これで、「もう1回！」ボタンをクリックすれば、「おみくじ箱」を振るアニメーションからスタートするというわけですね！
これで、今回の「おみくじ」コンテンツは完成です！
今回のサンプルをHTMLファイルに書き出して、GitHubにアップロードしているので、ぜひダウンロードして試してみてください！
また、プログラミングに興味のある方は、「Wick Editor」で利用できるメソッドをまとめたリファレンスガイドもあるので、参考にしてみてください！
■まとめ
「Wick Editor」は、まだ「Alpha版」のため現在も活発にバージョンアップが繰り返されています。
エディタのUIなども今後もっと改良されていくと思いますが、今回の記事で解説した本質的な部分は変わらないと思いますので、ぜひオリジナルのアニメーションをJavaScriptでコントロールしてみてください！
Webサイトなどで使うGIFアイコンを自作しても良いし、Webゲームや教育用のコンテンツとしても大活躍するでしょう！
■JavaScript講座も好評公開中「paizaラーニング」
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数用意しております。
もちろん今回の記事で使用したJavaScriptなど、言語ごとに基礎を学べる入門講座も好評公開中です！
まずはスキルチェックだけ、という使い方もできます。すぐには転職を考えていない方でも、自分のプログラミングスキルを客観的に知ることができますので、興味がある方はぜひ一度ご覧ください。
また、paiza転職をご利用いただいている企業の人事担当や、paiza転職を使って転職を成功した方々へのインタビューもございます。こちらもぜひチェックしてみてください。
詳しくはこちら
