とある方から「コンテンツ主義じゃない?」と言われて少し落ち込んでいる艮鮟鱇です。コンテンツ主義なので、新しいコンテンツを作りました。レポジトリはこちらです:https://github.com/ushitora-anqou/mio友だちに「イントロクイズ作って欲しいんだけど」と打診を受けて作りました。3週間程度でとりあえず形になりました。サーバにはNodeJS・Express・Sequelize・Dockerを使用し、クライアントにはReactを使いました。サーバ・クライアント間の通信にはSocket.IOを使用しました。Heroku」ボタンがついていて、これを押すと簡単にHerokuに展開できるようになっています。Twitterの@ushitora_anqouまでリプライをくださるか、あるいはここのコメント欄に書くか、いっそのことGitHubのIssueを投げて頂ければ、嬉しさのあまり涙を流しながらお答えいたします。AQamlなど、どちらかといえば低レイヤーのコードを書いてきましたが、一転して高いレイヤーのコードを書きました。どちらが良い・悪いではないのですが、強く思ったのは:ところでここ数日Webアプリもどきを作っているのですが、本当に冗談でも何でも無くて、Webアプリ作るよりも言語処理系書くほうが簡単だと思いました。Node.jsでの開発ひとつとっても、HTML・JS・CSSをそれなりに知った上で、Reactとかのフレームワークをある程度把握して、Web周りのセキュリティもおさえて、もちろんデータベースの知識も持って、諸々のツールを把握して、それでやっとスタートラインなわけでしょ。つらいどころの騒ぎじゃない。2019年2月12日フレームワーク的なやつは、うまく使えれば便利なんだろうけど、いかんせん自分が作ったものじゃないから、慣れるまでは「振り回される」部分が大きい気がする。これはWebアプリだけにとどまる話じゃないけど。2019年2月12日Webアプリは需要が大きい分開発も楽だろうと勝手にイメージしていました。実際フレームワークやツールなどが充実しているのは事実で「なんでもかんでも自分で作らないといけない」という状況に陥りにくいのですが、その一方で、そのフレームワークの使い方に振り回されたり、それらを組み合わせたときにどのように動かすべきかなどを理解するのは、そこそこ骨が折れました。それからCSSを用いたページのデザインも、私が今まで扱ってきたプログラミング言語と大きく異なっていて、結局よくわかりませんでした。このあたりはBootstrapを使えばある程度解消するのかもしれませんが、途中から導入するのも面倒だったので、そのままで押し切りました。JavaScriptのスコープJavaScriptと言えば言語仕様が複雑怪奇なことで有名ですが[要出典]、少なくともES6に従って書く分にはそれほど不都合を感じませんでした。JavaScriptのスコープについてはすこし混乱しました:JavaScriptのこの挙動でちょっと悩んだ。2019年2月18日CやC++、および類似の言語では、同様のコードを書くと正常に実行され、「ABC(改行)DEF」と表示されます。一方でJavaScriptではそもそも参照エラーとして実行が為されません。これはconstやletの変数宣言はブロックの先頭に「引き上げ」られる一方で、ブロックの先頭から実際の変数宣言までの間はこの変数が使用できないというECMAScriptの仕様によるものです。zone”として参照されています1。APIとlamejsを利用しました。Socket.IOを通してサーバ経由で各参加クライアントに送信し、各々のクライアントで再びデコードするという方式を取っています。これをそのまま行うと音楽によってはクリッピング(音割れ)が生じるため、送信側でDynamicsCompressorNodeを経由させています。これ1つでクリッピングがほとんど無くなるのは、かなり衝撃的でした。ところで一応クライアント側ではバカでかいファイルを送信できないように制限を掛けているのですが、もちろん野良クライアントからサーバに向けて大きなデータを送信される可能性があります。渡すオプションでmaxHttpBufferSizeを適当に設定してやると、勝手に通信を切ってくれます。500KBに制限しています。手元で実験した範囲では、普通送信される音楽ファイルは300KBを超えることは無いようです。MP3といったところでしょうか。Heroku’ボタン以前からHerokuでDockerコンテナを動かすことは可能でしたが、コンテナのビルド自体はローカルで行う必要がありました。Herokuボタンを押すだけでDockerを用いたデプロイができるようになりました。Mioではこれを活用しています。Mioでの仕組みを簡単に説明します。ビルド及び実行に必要なDockerfileを作成します。Herokuで使用できるDockerのコマンドには制約があるので注意が必要です。デプロイ時にDockerのビルドを走らせるためにheroku.ymlを作成します。heroku.ymlのsetupに、ソフトウェアが必要とするアドオンについて記載しておく必要があります。Herokuボタンをくっつければ出来上がりです。Mioの場合は特に指定すべきパラメタもないので意外と簡単でした。押すとすぐにHerokuに遷移してデプロイの確認画面になります。名前の長さサーバ側ではhapijs/joiを用いてクライアントから送られてくるデータのバリデーションを行いました。その際、ユーザが設定する名前の長さを決めることが必要でした。Joi.string().max(128)としておきました。いまのおきもち注:以下ポエムです。自分が「コンテンツ主義」だと言われて少し動揺しました。確かにaqccとかAQamlとかMioを作って、それを中心に記事を書いたり資料を作成したりしているので、そう見えるのかも知れません。アウトプットの量を増やせばいいのかもしれませんが、中身の薄いものを執筆したところで意味がなく、面白くないものを書いてもやっぱり意味がありません。いう意味で、なにかモノを作ってそれについて書くというのは、自分の経験に基づいた文章を作成できるので、中身が薄くなりにくいのかもしれません。この記事が薄くないのかと言われると少し言葉に困りますが。ぺい、誠文堂新光社、2004)という本があって、よく眺めていました2。思いを馳せていると、人生退屈することはない」みたいなことが書いてありました3。Mioを作っている最中に、今まさに自分がそういう状況だと気づきました。対象は工作ではなくてプログラミングですが、「明日は何を作ろうか」「ここをこうすればもっと上手く書けるんじゃないだろうか」「こういう機能を足そう」等々、なにか作品を作っているときにはずっと考えています。さいごにWebアプリ初心者が作ったので、Mioにはおそらく脆弱性とか死ぬほどたくさんあると思います。request大歓迎です。GitHub右上のStarボタンをポチッと押して頂けると私が喜びます。一度レポジトリを貼っておきます。https://github.com/ushitora-anqou/mio以上艮鮟鱇でした。ここまで読んでいただきありがとうございました。@uint256_tさんにヒントを頂きました。この場を借りてお礼申し上げます。↩タイトルに「作って遊べ!」とあるのに作ったことはほとんどありませんでした。違うので、あとでちゃんと調べて書き直します。