Web Makerをインストールして、エディターを準備しよう

   

LINEで送る
Pocket

この記事の目次

  1. エディターとは?
  2. Web Makerとは?
  3. Web Makerをインストールしてみよう

1.エディターとは?

エディターとは、HTMLやCSSなどのコードを書くためのツールです。HTMLでは、Windowsであれば「メモ帳」Macであれば「テキストエディタ」等でも作成することができます。但し、コード補完やサーバーにアップロードする機能などの便利な機能があるエディターを使用することをお薦めします。

2.Web Makerとは?

今回、この初級編では「Web Maker」というエディターを使用していきます。実際に、サイトを構築するに当たっては使用することは少ないかもしれませんが、初心者がコードに触れるという場合には素晴らしいツールですので、今回はこのエディターを使用していきます。

Web Makerは、Google Chromeの拡張機能です。したがって、この記事を進めていくには、「Google Chrome」が必要となります。Google Chromeをまだインストールしていないという方は、先にインストールを完了してください。

Google Chromeのインストールはこちら

このWeb Makerは、ライブコーディング(リアルタイムで結果をチェックできる)が可能で、コードをテストしたいときや、ちょっとした開発をしてみたいという時に非常に役立つツールです。通常は、ファイルにコードを記述し、保存後、ブラウザで確認するという作業がこのWeb Makerではすべてリアルタイムで確認が出来てしまいます。

3.Web Makerをインストールしてみよう

それでは、実際にインストールしてみましょう。Google Chromeで下記ページを開いてください。

https://webmakerapp.com/

Web Makerのページを開いたら、「ADD TO CHROME」ボタンをクリックします。

「拡張機能を追加」をクリック

下記の画面が出れば正しくインストールできています。

ちなみに、「Don’t show in new tab」というのは、新しいタブを開くたびにエディターを開くかどうかの設定です。今回はこちらにチェックを入れて「Let’s start」をクリックしましょう。

次回から開く場合は画面右上にWeb Makerのアイコンが表示されていますので、そちらをクリックすると起動することができます。

これで、HTMLを記述できるようになりました。次回から実際にHTMLに触れてみましょう。

LINEで送る
Pocket