アイコンを使ったわかりやすいビジュアルプログラミング言語を作った

初めまして、ニカチュウと申します。ポートフォリオ（適当）はこちらです。
EmojiCode(えもじこーど)というWebアプリを作りました。

EmojiCodeとは?

ビジュアルプログラミング言語しか使ったことない人や、まったくプログラミング言語を使ったことのない人に向けたビジュアルプログラミング言語です。

利点

• ビジュアルプログラミングができる
  • アイコンを使っていてわかりやすい
  • でも複雑な命令もできる
• テキストプログラミングもできる
  • 内部はJavaScript
• アイコンを使っていて見るだけで分かりやすい

まあ都合のいいアイコンがネットにあるわけないので、テキストの部分も多いです。

作った理由

• 比較的大きなサービスを作ったことがないので作ってみたかったから。
• 自分自身ビジュアルプログラミング言語から次の言語を迷っていた経験があるから。

各部詳細

EmojiCodeのIDE
こんな感じのものです。

左: ビジュアルプログラミングエリア

ビジュアルプログラミングができます。Googleが開発したBlocklyというライブラリを利用しています。
ブロックはすべて自作しました。

右上: ステージエリア

EmojiCodeのステージエリア
Scratchにも存在するおなじみの場所です。
追加したスプライトを動かしたりすることができます。

右下: スプライト・効果音管理＋プログラム実行エリア

スプライトや効果音の管理、プログラム実行ができます。
タブで分かれるようになっています。

スプライト・効果音管理

スプライトを追加したときの様子
スプライトや効果音を追加することができます。
ファイルをアップロードすることができます。

プログラマー向け

全部ローカルでやってるので実際にはbase64に変換してるだけです。
base64がめっちゃ便利なことに気づいた(データサイズ？なにそれ)

プログラム実行

プログラムを実行したときの標準出力を見ることができます。　　
ほかにも変換されたJavaScriptや、ASTなどを見ることができます。

標準出力を置いたコードを実行した時のJavaScript

スプライトがクリックされたらカウントアップして音を鳴らすサンプルコードです。

テキストモード

テキストモードのサンプル
テキストモードはこのような感じでJavaScriptを書くことができます。
Aceを使っているので、Monaco Editorのような高度なIntelliSenseは使えませんが、簡単な予測変換、エラー検出は利用可能です。

「メニュー」から「テキストモードに変更」を押すとテキストモードに変えることができます。

let count;
function start() {
    count = 0;
}

document.getElementById('emojiSprite_button').addEventListener('click', function(){
    count = count + 1;
    log(count);
    emojiau.playSound('click');
});

スプライトがクリックされたらカウントアップして音を鳴らすサンプルコードです。

ドキュメント

ついでにドキュメントも作成しました。
https://emojicode-doc.nikachu.net/
Docusaurus2を使っています。

内容

• スプライト・画像の追加方法
• コードの書き方
• サンプルコード
• すべてのブロックの解説
• 追加関数の解説

などがあります。

内部構造

改めて書き出してみたんですがやっぱり多いですね。

勉強になったところ

• サービスを作るのは大変
  特に一人はマジで無理

• もっとJavaScriptの知識が必要
  事故る面が多かった

• 計画書を作るべき
  頭の中だけでやっていたせい仕様がちぐはぐになったり、バグの発生にもなりました。

• デザインがマジで大変
  センス因子を継承するの忘れたんですよね（ウマ娘風）
  デザインセンスが全くないので意味わからんデザインになってます。

制作中に事故ったところ

スコープ問題

制作がある程度進んできて、コードの実行を作ろうとしていた時にあることに気づきました。
JavaScriptのスコープのせいでBlocklyのデータを取得できなかったり、スプライトの操作ができなかったりしました。
その時は時間がなかったので、CDNに戻し、サーバーを使わないようにすることで事なきを得ました。プロの人はいろいろやるのかもしれませんが、私はよくわからなかったのでこのように修正しました。

コード実行用のプログラム
その名残として、コード実行用のプログラムが、workspace.js(Blocklyのデータにアクセスできるところ)に残っていたりします。

ドキュメントのGIF画像

バカ
ドキュメントのGIF画像が960x540ぐらいのでかいサイズ&減色してない画像だったので、公開サーバー内のほとんどの通信がその画像に持っていかれるという状態になっていました。
まあ自分もこの画像１０秒ぐらい読み込みにかかるなぁと思っていたんですけどね。

改めて確認したら１枚50MBだったらしい。

これから追加or修正していきたいところ

• スプライトの編集機能
  スプライトの圧縮とかちょっとした画像編集ができるほうが良いと思いました。
• クラウドセーブ機能
  Scratchみたいなコミュニティを作れるようにしたいなぁと考えています。
• エラーの日本語化
  初心者向けのものなのにエラーが英語で出るのは結構やばい気がする。
• フォントがいまいち定まっていない
  Macならきれいに表示されるけどWindowsのレンダラーがはっきり言ってごみなので何とかしたいと考えています。

最後に

最後まで読んでいただいてありがとうございました。
これからもEmojiCodeを改善したり、ほかにもサービスを作っていきたいと考えています。

ぜひEmojiCodeを使ってみて、意見や感想があればコメントを書いてください。
(多分バグだらけだけど許して

ついでにTwitterのフォローもよろしくお願いします。