教材開発は難航しています。
いや,あれこれ手を出しすぎて,難航してしまいました。

Nuxt Type Script で開発している中,どうもコードが煩雑になっている気がして,もっと綺麗に書けないものかな・・・と微妙な雰囲気に。
今にして思えば,ちゃんと仕様書を記録,書いていればそんなことにはならなかったのだろう。

そこで,Canvas + JavaScript で,アニメーション豊かな教材開発をしようとしたのですが,Canvas を使用した場合,要素の判定が非常に面倒くさい!

どれくらいかというと,例えば,画面に表示されている,テンポとか拍とかを変更するために,それらをクリックして変更しようとした際の場合。

(1)まず,テンポとか拍とかを描画した位置情報を変数に格納しておく。
(2)そして,Canvas に対してクリックがある度に,マウスの位置情報を取得して,(1)で格納した変数から,マッチするものがあるかループして探す。
(3)それに応じて,任意の関数を呼び出す。
・・・ここからさらに,変数を設定するコードを用意しなければならない。

めちゃくちゃ面倒。
いま,自分がつくりたい教材には全く向いていない。

Canvas の描画自体はとても素晴らしいです。
HTMLのタグ+JavaScript ではできないアニメーションを実現してくれます。

が,

これは,ちょっときつい。

ほかに救いがないか,今週は,「Adobe Animate(昔のFlash)」や「Unity」まで手を伸ばしてみました。

結果,それらを習得する時間が足りないので,それも頓挫。

Adobe Animate に関しては,まず日本語資料が少ない。
「Adobe Edge Animate 標準ガイドブック [CC/1.5対応] (DESIGN & WEB TECHNOLOGY) (日本語) 大型本 – 2013/7/20」

これぐらい。しかも,2013年の本で情報は古く,Edge Animate という,FlashAnimate の間にあったソフトウェアの解説本。Edge Animate は,無償でダウンロードできるということが売りでしたが,現在は無情にも「Edge Animate、Edge Inspect、Edge Reflow、および Edge Code。Adobe Edge のすべての製品が Creative Cloud から削除されました。」とのこと。さすが,Adobe。大企業。

Unity に関しては,資料は豊富にあるものの,リファレンスを読む限り,自分が作ろうと思っている教材を作るのはかなり手間そう(どう取りかかって良いか,想像できない)。
例えば,レスポンシブルデザインで出力する方法や,要素の内容を動的に変更したり,追加したり,Javascript と連携したり(これはできそうだったが),それらを習得している時間が足りない。

そして,最終的には,今年の頭に取り入れていた「Nuxt Ts」に戻ることにしようかと,今考えているところです。最悪

さらに,久しぶり Nuxt TS で作っていたプロジェクトをビルドしたところ,fibers モジュールでエラーが頻発。

ERROR ## There is an issue with node-fibers ##

サーバーが起動しません。

解決方法として,XCode のコマンドラインツールの再インストール(ちょうど,XCode の V.12 がリリースされ,コマンドラインツールもv. 12のGMが配付されていた)。
参考:https://developer.apple.com/download/more/

次に,fibersのアンインストールと,再インストール。
これでビルドできました。

参考:「fibers.nodeが見つからないため、流星バンドルが失敗する

仕様は大きく変わったので,やや1から作り直しに近い部分もありますが,使い回せる部分もあるでしょう。根気強くコーディングしていくのみです。

大会発表まで,あと1ヶ月(切りました)。

====================

ただ,Type Script に関する知識はかなり身についたし,最新のJavaScript の動向も追えている。ループ処理もかなり理解したし,Canvas に取り組んでいたことは無駄ではなかったでしょう。あと,エディターとして,Visual Studio 使うようになりました。大変便利。

Canvas で実装していたView の部分を,HTMLのタグで書き出すようにコーディングしなおせば済む(暴論)ことなので,問題はWEB Audio APIの部分ですね。ここをいかにクリアするか!

 一覧ページへもどる