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

 

2022年おすすめのレンタルサーバー

シン・レンタルサーバー

新しい機能をいち早く取り入れることで、革新的なレンタルサーバーを目指すエックスサーバーの進化版「シン・レンタルサーバー」。

超高速CMS実行環境「KUSANAGI」を採用しており、高速かつセキュリティーに優れた新世代のレンタルサーバーが体験できます。

【2022年12月22日(木) 12:00まで】今ならキャンペーンで50%キャッシュバック!月額385円~利用できます!詳細は、下記ボタンからどうぞ!

\ 10日間無料で利用可能 /
シン・レンタルサーバーはこちら

他サーバーから「シン・レンタルサーバー」への移行方法については下記記事もご覧ください。
≫ シン・レンタルサーバーに他サーバーから移行する方法を図解【2022年版】

エディターとは?

エディターとは、HTMLやCSSなどのコードを書くためのツールです。

HTMLでは、Windowsであれば「メモ帳」Macであれば「テキストエディタ」等でも作成することができます。

但し、コード補完やサーバーにアップロードする機能などの便利な機能があるエディターを使用することをお薦めします。

Web Makerとは?

今回、この初級編では「Web Maker」というエディターを使用していきます。

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

Web Makerは、Google Chromeの拡張機能です。

したがって、この記事を進めていくには、「Google Chrome」が必要となります。

Google Chromeをまだインストールしていないという方は、先にインストールを完了してください。

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

このWeb Makerは、ライブコーディング(リアルタイムで結果をチェックできる)が可能で、コードをテストしたいときや、ちょっとした開発をしてみたいという時に非常に役立つツールです。

通常は、ファイルにコードを記述し、保存後、ブラウザで確認するという作業がこのWeb Makerではすべてリアルタイムで確認が出来てしまいます。

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

それでは、実際にインストールしてみましょう。
(※追記:インストールしなくてもWeb上でも利用できるようになりました。)

Google Chromeで下記ページを開いてください。

https://webmaker.app/

Web Makerのページを開いたら、Web上で作業する場合は「OPEN WEB APP」、Google Chromeの拡張機能を利用する場合は、「ADD CHROME EXTENSION」ボタンをクリックします。

Web上で開いた方がより簡単ですのでおすすめです。

WebMaker

Google Chromeの拡張機能を利用する場合

「Chromeに追加」をクリックします。

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

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

もし、アイコンが表示されていない場合は「拡張機能」アイコンから一覧を表示することができます。

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