新規タブを書いたコードをその場で動かすオフラインCodepen.io化するWeb Maker拡張 - 適宜覚書-Fragments

新規タブを書いたコードをその場で動かすオフラインCodepen.io化するWeb Maker拡張

      2016/05/22

Codepen.ioJsfiddlejsdo.itってとても楽しいですよね。HTML、CSS、JavaScriptを書いたその場で動かせるオンラインエディタですから、結果をすぐに確かめることが出来ます。書いたコードを共有公開して、それを他の誰かが学習したり、アレンジしたり出来ます。技術的な理解が追い付いていない筆者でも動く現物を目にすれば「わっ!こんなこと出来るんだ!?」と驚き、ソースを見て「え、これで出来ちゃうの?」と更に刺激を受けて、ちょこちょこ弄り回してみたり…。

今回は、これらと同じようにHTML、CSS、JavaScriptを書いたその場で動かせるオフラインエディタをChromeの新規タブに作っちゃうWeb Maker拡張を紹介します。

Web Maker拡張とは

この拡張を導入すると、Chromeで新規タブを開くと、HTML、CSS、JavaScriptと結果表示の4エリアが表示されます。HTMLやCSS、JavaScriptを記入していくと即座に結果表示エリアに反映していくというそのまんまのブツです。とはいえ、実のところCodepen.ioJsfiddlejsdo.it程高機能ではありませんし、エディタらしい機能も無く入力欄があるだけです。超シンプル!シンプル過ぎ!!

でも、オフラインで動くこと、それと書いてその場で動くという二点は大きいです。これというコードがあれば、ペタリと張り付ければ面倒な準備なしに動いちゃう。楽しい!根源的な気持ちよさがあります。

一画面にコードと実行結果を表示

一画面にコードと実行結果を表示

上図は、Codepen.ioSpherical Spiral #3のコードをそれぞれペタペタと張り込んだだけなのです。

レイアウト変更や保存、連係など

レイアウト変更や保存、連係など

画面左下にあるボタンを押すとソースと結果の表示位置を変更することが出来ます。また、オンラインであればWeb Maker拡張上で記入したコードをそのままCodepen.ioにコピーして実行させるボタンもあります。

Web Maker拡張の導入

  1. ChromeウェブストアでWeb Maker拡張ページを開きます。
  2. 「Chromeに追加」ボタンをクリックします。
    Chromeに追加

    Chromeに追加

  3. ポップアップした画面で「拡張機能を追加」ボタンをクリックします。
    拡張機能を追加

    拡張機能を追加

  4. Chromeのメニューバー上に拡張のアイコンが追加されます。
    拡張アイコンの追加

    拡張アイコンの追加

実はWeb Makerにはストア以外に公式サイトがあり、そちらからもインストール可能です。ただ、今後の提供はストアから行われると思いますので上記導入法を紹介しました。

終わりに

既にBracketsNitrousやAtomがあるから、こんなの要らないよ!というご意見も出るでしょう。しかしですね、これエディタやIDEみたいな高機能ツールと競合するものじゃないと思います。拡張として、とにかく手軽に開いてその場で動かす。要が無くなったら閉めちゃう。そういうオフラインの環境が手に入るのです。「よっこらしょ!」と気合を入れて起動する必要が無いというところに魅力があります。

もし、ChromeBookを持っているなら猶更いいですね。起動も軽くサクサクと試しては捨てみたいな感じで、とにかくお気軽に試せます。

適宜覚書-Fragmentsは、筆者が興味をもった様々な情報やネタを筆者が忘れても後で思い出せるよう覚書として公開するBlogです。Google Chrome拡張、Facebook、Google、Twitter、Windows、各種Webアプリなどを扱うことが多いです。この覚書が、もし何かお役立ちになれば幸いです。

 - Google , , ,