「Web Maker」とは、ちょっとしたコーディングを、オフラインでも使えるよう、開発されたコーディングに特化したテキストエディタです。

    上記アイキャッチが「Web Maker」のホームぺージです。ついでにリンクも埋め込みましたので、クリックで新しい窓が開き、「Web Maker」のホームページが表示されます。

    コーディングとテキストエディタの関係については、以前、下記記事で触れた事がありました。初めてコーディングを聞いたと言う方は、こちらの記事を読むと、意味が理解できるようになると思います。

    コーディングに特化したテキストエディタは、既に多くの種類が存在していますが、その中から「Web Maker」をお薦めするには、それなりの理由があります。

    作者が「Web Maker」を開発するきっかけは、とてもシンプルなものだったそうです。誰でも既存の物事に対し、もっとこうすればいいのに、もっとああだったらいいのに、と言う思いがあるように、これまでの「Code Pen」等のコーディング用エディタを使いながら思った事を、自分で実現したのです。

    一般的に、コーディングはテキストエディタで書かれ、HTML ファイルとして保存した後に、サーバーに上げてから、ブラウザでその動きが正しいか、デザインが思った通りかを、確認する手順となっています。

    「Web Maker」は表示画面の如く、CSSを書きながら、HTMLを書き、更には右半分の画面で、ブラウザにおけるコードの動きをチェックすると言う、一つの画面で完結できてしまう、コーディングに特化したテキストエディタであります。

    お時間があれば、上記WEBページを一読された方が理解し易いと思います。

「Web Maker」の特徴

    筆者の拙い理解力で、それなりに特徴を簡単に纏めて見ました。

● ちょっとコードをいじりたくなる時、すぐに使える
● Chrome の拡張機能に導入し、オフラインでも使える便利性が魅力
● コーディングからプレビューまで、ブラウザ内で完結する
● サードパーティーのライブラリーを使わないから爆速
● HTML用保存オプションあり、他のエディタでもファイルが使える
● 使用頻度の高い既存プリプロセッサーを全て搭載
● 外部ライブラリーの追加
● エディター自身のレイアウトが選べる
● プレビューのスクリーンショット
● 構成の中で多くのオープンソースを使っている
●「Web Maker」自体オープンソースとしてGitHubで公開

    搭載されているプリプロセッサーの種類はこれだけあります。

    追加できる外部ライブラリーはこれだけあります。

「Web Maker」の導入

    Chrome で使えるその他拡張機能同様、「Web Maker」の導入は、ブラウザメニューからスタートします。

    既に他の拡張機能を導入した経験がある人が殆どとは思いますが、初心者向けに GIF 動画で手順を纏めました。不安な方は、何度でも確認しながら、操作してみて下さい。

「Web Maker」を直接ブラウザで使う！（2020年末更新）

    さて、以前は Chrome の拡張機能として導入する必要がありましたが、拡張機能はメモリをかなり喰うので、ブラウザの動きが遅くなると恐れる事がないよう、今の「Web Maker」は、ブラウザでそのまま使えるようになりました。

    「Web Maker」のページを開いたら、1番目のメニュー「OPEN WEB APP」をクリックすれば、そのまま即コーディングが出来るようになっています。「Web Maker」にあるその他既存機能は、完全にそのまま使う事ができます。

追加！「Web Maker」の活用方法

    使い方色々ですが、筆者は「Web Maker」をテンプレートのカスタマイズに使っています。開発者が特に推薦した活用シーンはこちらです。

    こう言うのが本当のユーザービリティですよね、本当、素晴らしい。いままで振り回されて来たアプリはなんなんだろうと思います。

    まあ、筆者はオープンソースであるからと言って、何もできませんが、折角のコーディング環境を、カスタマイズなどで、「Web Maker」使いこなせるようにする事だけでも、頑張ってみたいと思います。