読者です 読者をやめる 読者になる 読者になる

ふんわりした生活

本を読んだり仕事でやってみたことなどの日常から、ふんわりと気づきなどを書いていきます

オフラインでhtmlの練習ができるもっといいものがあった - WebMaker

なんだ、そんないいものがあったのか、という気持ちでいっぱいです!

m0t0k1m0t0k1.hatenablog.com

小学生向けにhtmlを教えるとき、エディタによる補完とかの補助を受けたいけどインターネットに接続されてなくても使えるものがないかと探していた。そこで、簡易なエディタを以前につくりかけていたのだが…

もっといいぞ

偶然に他の調べ物をしていると、Google Chromeのアドオンとして動作する「Web Maker」というものを見つけた。これならWindowsパソコンだろうがmacだろうが、関係ない!やった!

webmakerapp.com

使ってみたところ、ブラウザ内でサーバーが動作しているのか、ライブプレビューされる。CodePenやJSBINのようにhtml、cssJavaScriptの3つのペインで記述することができて、プレビューへ結構すばやく反映されていく。それぞれのペインはhtml固定というわけではなく、次のように設定で切り替えすることができる。

htmlペイン cssペイン JSペイン
html css JavaScript
markdown scss CoffeeScript
pug sass ES6(Babel)
LESS TypeScript
Stylus

以下が使ってみた、非常に面白くないサンプル。 f:id:m0t0k1m0t0k1:20170407123314j:plain 外部ライブラリもインポートしてくれるので、主なところはこれだけでサクッとなにかつくれそう。

f:id:m0t0k1m0t0k1:20170407123410j:plain Chromeさえ動いてくれたらなんとかなりそうというのが非常に素晴らしい。中古のPCでもなんとかなりそうな予感があたりに満ちてきた。

個人的に素晴らしいと思うところ

標準でエディタでインテリセンスが有効になっていること、そして構文ハイライトがされるところが素晴らしい。それに、もっと大事なこととして、ハイライトのテーマを選択することができるようになっている!!!さきほどのスクリーンショットではmonokaiだが、Solarize Darkなど、わたしの好きなテーマも入っている。VisualStudio系のものも入っていると良かったんだけどね… f:id:m0t0k1m0t0k1:20170407123331j:plain フォントサイズも変更できる。フォントは変更できないが、見やすいので問題ないだろう。

マークダウンではテーブルも問題なさそう。どういうフレーバーなのかわからないけど、それはまた後で調べてみる。 f:id:m0t0k1m0t0k1:20170407123458j:plain

アプリ内に保存することもできるが、ファイルへのエクスポートやインポートも装備されているので、困ることは少なそうだ。スクリーンショットを撮ることもできるので、サンプルをつくって他人へ見せるというのもオフラインでできるので便利すぎる。

気になるとしたら、日本語メニューでないので避けたいと思う方がいくらかはいそうだ。それに、Chromeアプリっていつまで続くんだろうね。あとは、これでマークダウンを書き続けることはしんどいので、やはりスニペットくらいの利用になるとは思う。

次回、htmlを教えるときにはこれを使うかな。