幾何学計算アニメーションを作ってみよう

第3回 JavaScript座標回転プログラムをPHPサーバで動画にしてみよう

この記事を読むのに必要な時間:およそ 5 分

マウス操作をPHPサーバで記録するには

さて,これを動画にしようとするわけですが,JavaScriptでは画像が作れません。そこで,座標をサーバのPHPに渡して,サーバ側で画像を作ることにします。これには,いくつかのやり方があります。1つ1つ見ていきましょう。

1つ目の方法は,ドラッグ操作と平行してサーバにリクエストを出し,リアルタイムに動画を作る方法です。今をときめくAjaxというやつです。ですが,これはとても処理がややこしくなります。個人的には,他の方法がないかを調べておきたいところです。

2つ目の方法は,ドラッグ中の情報をフォームに書き出しておき,あとでまとめて送信する方法です。リアルタイムにはなりませんが,フォームをチェックすればデバッグも簡単ですし,wikiなどに出力するような拡張もできます。

もう1つのポイントは,サーバ側に渡すデータの抽象度です。矢印の始点と終点の座標を記録するのが一案です。この方法だと,PHP側ではJavaScript側と同じやり方で矢印の矢の座標を計算する必要があります。つまり,同じことをするコードを,PHP版とJavaScript版の2つ用意して保守しなければならないということです。類似の案として,オブジェクトをシリアライズして渡すという方法があります。

別のやり方としては,計算済みの多角形(polygon)の座標をPHP側に渡す方法もあります。JavaScript側では矢印の始点と終点から矢の座標を計算し,多角形のSVGにしていますが,PHP側はこれをimagefilledpolygonなどに渡すことになります。コードの重複がないので,JavaScript側のコードで矢の形を変えれば,PHP側にも自動的に反映されることになります。ただし,この多角形が矢印であるといった情報は失われてしまいますので,PHP側で特定の矢印だけ形を変えたい,といった対応はできなくなります。

これは喩えていうと印刷のときに文字データを渡すか,ビットマップにしたデータを渡すかのような違いです。文字データを渡す場合,両方に同じフォントが必要になります。ビットマップの場合,追加の加工をしたい場合などに制限が出てきます。

どちらも一長一短あるのですが,今回はデータの送信はフォームを使ってまとめておこなうようにし,送るデータは多角形の座標としました。理由ですが,少なくとも最初のうちはできるだけシンプルにしたく,またコードの重複も避けたいと考えたからです。具体的なやり方ですが,フォームを使ってテキストエリアを送信します。テキストエリアの内容は,時刻,多角形,テキストが1行ごとに並んでいます。PHP側ではこれを読み,画像を生成します。

まず,これがうまく動くかを見てみましょう。送信ボタンを作り,これを押したときにそのときの座標データを生成して送信します(formのonsubmitを使っています⁠⁠。PHP側ではここから画像を作り,ブラウザに返します。

図1 vector3.phpの動作① ドラッグした時点ではまだ入力されません

図1 vector3.phpの動作① ドラッグした時点ではまだ入力されません

図2 vector3.phpの動作② 送信した瞬間に入力されます

図2 vector3.phpの動作② 送信した瞬間に入力されます

図3 vector3.phpの動作③ PHP側で作った画像が表示されます

図3 vector3.phpの動作③ PHP側で作った画像が表示されます

うまくいったら,次はドラッグの都度テキストエリアに出力するようにしてみましょう。テキストエリアにはドラッグが完了するたびに座標データが追記されていきますので,デバッグはしやすいと思います。PHP側は複数の画像を生成することになりますから,画像はファイルに出力し,IMGタグを並べたHTMLをブラウザに返すようにしました。実はこのPHPは,前回の画面キャプチャで使ったものです。

図4 vector4.phpの動作① ドラッグの都度,入力されます

図4 vector4.phpの動作① ドラッグの都度,入力されます

図5 vector4.phpの動作② 1つずつの画像が生成され,リンクが表示されます

図5 vector4.phpの動作② 1つずつの画像が生成され,リンクが表示されます

なお,送信したあとに,別の操作をして再び送信すると,前回生成したファイルは上書きされてしまいます。サーバサイドではありますが,これは同時に1人しか使えませんので,webで公開するには向きません。サーバ側に画像ファイルを作る手段と考えるとよいと思います。

最後に,ドラッグの経過をリアルタイムに出力するバージョンです。onmousemoveのたびにテキストエリアを書き換えると遅くなりますので,文字列は変数に保持しておき,送信時にテキストエリアに入れるようにしました。PHP側は,時刻データを見て同じ画像をいくつも出力し,マウス操作を再現するようにしています。

図6 vector5.phpの動作① ドラッグ中の動きも記録されています

図6 vector5.phpの動作① ドラッグ中の動きも記録されています

図7 vector5.phpの動作② 送信した瞬間に入力されます。コマ数が多いのでスクロールバーが小さくなっています

図7 vector5.phpの動作② 送信した瞬間に入力されます。コマ数が多いのでスクロールバーが小さくなっています

図8 vector5.phpの動作③ 1コマずつの画像が生成されます

図8 vector5.phpの動作③ 1コマずつの画像が生成されます

今回はマウスカーソルは表示しませんでしたが,簡単に表示できるはずです。たとえばボタン操作をわかりやすく表示するなど,いろいろな応用が考えられます。ぜひ,うまく利用してみてください。

著者プロフィール

木元峰之(きもとみねゆき)

独立系ソフトハウスに8年間勤務,パッケージソフトの開発や記事執筆などを行う。現在はフリーのコンサルタント。SWESTなどのワークショップで分科会のコーディネータを務める。デジタル回路設計歴30年,プログラミング歴27年。

きもと特急電子設計
URL:http://business.pa-i.org/