ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Examplifierはオンライン上でJavaScriptのコードデモを編集し、実行できるソフトウェアです。

Webサイトでライブラリを紹介する際に、その使い方をコードで示すケースがあります。コードを載せるだけでなく、JavaScriptであればその場で実行できるようにしている場合もあります。そしてさらに一歩進めてその場で編集まで可能にしてしまうのがExamplifierです。


背景が黒い部分がデモ部分です。


赤文字、つまりエラーが出ています。


編集してOKになりました。


ダブルクリックでコードを編集できます。Ctrl+S(またはコマンド+S)で保存し、実行できます。


最初は何も出ていません。


10秒後にちゃんと文字が表示されました。

Examplifierを使うと実行結果を含めて確認できるのでよりインタラクティブにデモを楽しめるようになります。ただコードを表示しているだけでなく、コメントは非表示になっていたり、編集中もハイライト表示は継続し、かつ行番号が出るなど細かいところまで気が配られています。

ExamplifierはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。


MOONGIFTはこう見る

よくあるのはWebページでそのライブラリは読み込まれているのでコンソール上で試すといったことがあります。しかしそれでは面白さがちゃんと伝わるとは限らないでしょう。予め用意されているコードをボタン一つで実行するのも便利ですが、与えられた条件下だけでは面白くないかもしれません。

こういった操作ができるのはJavaScriptならではと言えます。他のプログラミング言語の場合、サーバサイドの実行になってしまうので任意のコードを実行させるのは難しいでしょう。JavaScriptライブラリを作ったならばこういったインタラクティブなデモ環境の用意は必須と言えそうです。

Examplifier

Raynos/examplifier

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2