JavaScript でGUI音遊びソフト作り(1) - 始めづらいぞJavaScript

前回の記事で音遊びソフト「Orbit」を公開しました。
思っていたようなソフトとして形にすることができ、おおむね満足なのですがいくつか不満があります。

• Tkinter のUIがダサい（古い）
• 配布→DLという形式である以上、いくら更新しても見てもらえるとは限らない
• もっと気軽に体験できる形にしたうえで、さらなるバージョンアップをしたい

というわけで、以前から考えていたことではありますが、JavaScript で書きなおすことにしました。
Web プログラミングはまったくわからないのでとんちんかんなことも書くと思いますが頑張ります。

1. JavaScript って何やねん

自分の場合、「JavaScript で Webアプリケーションが書けるんだ」ということだけわかっており、どのようにして実現するかはわかりませんでした。何事も学ぶ(ググる)ことから始めます。
ここがわかりやすかったです：　超絶初心者のためのフロント入門（HTML、CSS、JavaScript）

HTML、CSS、JavaScript の三つ巴でWEBページが作られるというわけですね。
3者のなかでは HTML が要であり、CSS と JavaScript は HTML に直接記述することも、別ファイルに記述することもできるようです。
JavaScript やりたいのに HTML とか CSS もやんなきゃならんのか、とウンザリしましたが、実際にプログラミングをするのは JavaScript メインで、 HTML と CSS については置きたいものやしたいことで検索すればすぐ出る印象です(今のところは)。

このへんまだよくわかっていませんが、 JavaScript はライブラリによって全然異なる記法になるみたいです。とりあえず「図形が書ける + 有名なやつ」で選んで、jQuery というライブラリを使っていきます。JavaScript 単体だとめっちゃ記述量多いコードを、かんたんにかけるようになるすごいやつです。

2. どうやって動かすねん

書き方はわかったけどどうやってデバッグするの？コンパイルはいらないの？というところで困り、なかなかコードを書き出せませんでした。
結論から言うと、html ファイルをブラウザにドラッグ＆ドロップするとデバッグすることができます。
HTML + CSS + JavaScript のテスト→公開が簡単にできるサイトは「codePen」とか「JSFiddle」とか「jsdo.it」とかいろいろと見つかったのですが、すべて記述しなくてよいということが勉強の妨げになり、また外部依存にどれだけ対応してるかもわからないので、ドラッグ＆ドロップによるデバッグを選びました。とくに公開しないのであればこれで十分だと思います。

3. 公開したいんやけど…

 さっき言ったようなサイトを使うか、サーバーを用意することになります。まだよくわかっていませんが、将来的にデータをガンガンやりとりするような動的なページを作る場合は後者のほうがよさそうです。「heroku」や「Amazon Web Service」をおススメされました。heroku を使っていますが、OneDrive に上げるだけで公開できなかなかいい感じです。
静的ページを公開するためにはひと手間かかるようでした。
こちらが参考になりました：Herokuで静的ページを公開する
あとscriptやcssをURLで指定している場合はhttps://～にしないとはじかれるっぽいので注意。

4. これから作りたいもの

設計図です。やりたいことはざっくりいうと

• オービットを自由に置けるようにしたい(以前は中心固定)
• 音を増やしたい(以前はパーカッションサウンドのみ)
• スマホでもできたらいいな～…

な感じです。イチから前の状態まで作るだけでも大変だと思うのでかなりやばそうです。
現状、クリックするとオービットがポンポン置けるとこまで作りました。以下が謎。

• コメット(軌道上の白丸)はちゃんと動くの？
• 音出すための判定ってどうやるの？
• そもそも音出せるの？

ほんとはいつものように完成できるかどうか調べてから始めたかったんですけど、いかんせん JavaScript は深く踏み込みづらいように感じました。そのため見切り発車です。完成できるよう頑張ります。
構成ファイル：https://gitlab.com/takasa5/orbit-web
webページ：Orbit proto → https://takasa5.github.io/orbit/ (2019年5月，移動しました)
2017/8/7時点、理想的な動作は以下 随時更新され機能が変わります

リンクへ飛ぶと国旗みたいなカラーリングのページが現れます。紺色の部分をクリックしてください。

直径を指定するダイアログが出てくればクリック成功です。長押しだと反応しません。
スライドバーを動かして直径を指定してください(直接入力もできますが想定外です)。

作成ボタンを押してもダイアログは消えませんが、同じ中心で作りたい場合もあるかな～と考えたためです。作り終えたら×を押して閉じてください。画面上に見慣れた(？)オービットが現れているはずです。

オービットはドラッグ＆ドロップで自由に動かせるようになっています。

Windows10、Mozilla Firefox では予想通りの挙動でした。Android7.0、Google Chrome でもおおむね予想通りの反応でしたが不安定であり、スライドバーが動かせないという問題がありました。
いろいろな環境で開ける代わりに、すべてに対応しないというのがWEBプログラミングのつらそうなところだと感じました。とりあえずWin10、 Firefox でちゃんと動くことを最優先にがんばります。