小学生がhtmlを学びやすくするためにオンラインエディタをつくってみたがボツにしたい
こんにちは。先日は小学生の息子にhtmlを教えるとき普通のテキストエディタだと高機能すぎて使いづらいということをエントリしていた。
今回は、その結果としてオンラインエディタを作ってみたけどボツにする出来栄えだったことをご報告したい。
どんなエディタなのか
つくったのは「presch」というもので、小学生向けなのでPre-Schoolというところから名前はつけた。ウィンドウを左右真っ二つに分割して、左側ペインにエディタ、右側ペインにプレビューアというよくあるものをつくった。左側でタイプしていくと右側でタグの内容が解釈されて表示されるというものだ。
まずはプロトタイプということであまり時間をかけずにおおよそのデザインだけして、エディタ部分だけMonaco-Editorを採用した。これはわたしの愛用するVisualStudio Codeのエディタ部分で使用されているエディタだ。ライブラリとして利用することができる。埋め込むだけならものすごく簡単に埋めることができる。READMEに書いてあるとおりのコードで埋め込むことができる。ここから変更されるごとにエディタ内への記述内容をそのまま右側ペインとしている要素のinnerHMTLへぶち込むという非常に雑なつくりだ。プロトタイプなのでひとまずの使用感がわかればいいかな、というところ。
実際にこれを実装して使ってみたところ、h1タグなど小学生に教えやすい（文字が大きくなるので）ものは大きく見えるのだが、次の点でイケてない。
- どれが見出し１なのかなど書いた要素がプレビューでどれなのかわかりにくい
- 後付けのスタイルシートを有効にするにはインラインで記述するしかない
- html文書構造全体を書いてもinnerHTMLなので意味がない
上記課題のうち、最初のものは事前によくあるタグについてスタイルをあてておくことで「～色の文字が見出し１だよ」と説明しやすくはなった。課題２のスタイルシートについては課題３と同じ原因なので悩むところだ。
課題２と３についてはよくあるオンラインエディタが行っているようなことを行っていないため発生している。それは、iframeによるhtml文書そのものの埋め込みを行っていないということだ。よくあるオンラインエディタ（JS BinとかJS Fiddleとか）はエディタ内の情報をバックグラウンド処理してサーバーへ送信し、htmlドキュメントとしてプレビュー部分にiframeで読み込んでいる。しかも別ドメインにしてあるためクロスドメインによる危険なスクリプト実行もできるだけ回避してあるのだ。たしかにこうすればスタイルシートもjavascriptも存分に記述することができる。JS Binを使ったことのある息子としては「htmlしかダメなの？」と聞いてくるほどなので、つらい。
ボツ
ということで、いまのところプロトタイプ段階でこのpreschエディタはボツになろうとしている。もちろんサーバー側を用意することはできるが、それならJS BinやJS Fiddleでいいじゃんということになる。こういうものはスタート時点がうまくいっていないと、あっという間にボツになるものだ。このエディタに要した時間はそれほどではなかったけれど、大いに学びはあった。
Monaco-EditorはVS Codeのエディタ部分ではあるけれど、かなりVS CodeではMonaco-Editorの標準的な動作に手を入れているように見えた。たとえば、日本語を変換、確定するために入力してあるところでは、その時点ですでにプレビューのほうへその情報が入っていた。つまり入力された内容は変換前に取得できてしまっていたということだ。そうなると、見た目はかなりおかしなことになる。それに、エディタ上で入力するときも同じ場所でずっと文字だけが変わっていくという挙動になった。これはリリース当初のVS Codeにもあった動きだったと記憶しているので、なんらか対策方法があるのだと思う。今現在のVS Codeでは発生しないからだ。
あと、このたびiframeの属性としてsandboxなどセキュリティに関するものについてドキュメントを再読したのだけど、わたしの理解が悪いのかオンラインエディタのiframeの書き方ではsandbox属性が無効になるような危険性があるようだった。ある意味で仕方ないのかな？とも思ったが理解不足であることはいなめない。
そのほか、エディタとしてアプリ内通信を行うようなものでiframeのかわりにElectronのwebview要素を使っているものも調べた。これもiframeと似たような属性を持っているのだが、Electronだけで利用できるもののようだし途中で調査をやめてしまった。インストールするタイプだとディスク容量もかかるしね。
今後エディタを開発するか、別の方法を採用することにするかは少し検討してみたい。
