HTMLとCSSを書くときに使用するエディタについて調べていたら「Web Maker」というエディタを見つけました。オフラインでのライブコーディングが可能とのこと。
Web MakerはGoogleのChrome拡張機能で使用できるので、すぐにエディタとして使いやすいかどうかの確認ができます。
さっそくWeb Makerで遊んでみようと思いChromeの拡張機能に追加して使用してみました。Web Makerの使い方の参考になればと思います。
Web Makerをchrome拡張機能で追加してみる
Web MakerをChromeの拡張機能に追加する場合にはWeb Maker公式ページからChrome ウェブストアのWeb Maker拡張ページに進むのが分かりやすいです。
下記の画像とURLはWeb Makerの公式ページです。
Web Makerの公式ページを開くと、「ADD CHROME EXTENSION」のボタンがあるのでクリックするとChromeウェブストアのWeb Makerを拡張機能として追加できるページが開きます。
ChromeウェブストアのWeb Makerのページでは「Chromeに追加」をクリック、ポップアップが表示するので「拡張機能を追加する」をクリックすると、使用しているChromeのブラウザ右上にWeb Makerのアイコンが追加されます。
Chromeの拡張機能に追加したWeb Makerを起動するときはChromeブラウザ右上のWeb Makerアイコン(オレンジ色)をクリックするだけで起動します。
Web MakerをChromeの拡張機能として追加しないで使用する方法もあります。
Web Makerの公式ページで「OPEN WEB APP」のボタンをクリックします。するとWeb Makerが、PCで使用しているブラウザで表示できます。
「OPEN WEB APP」のボタンの移動先ページは以下のURLです。
https://webmaker.app/app/
上記のURLを直接Chrome、Firefox、Safariのブラウザでオフライン使用することも可能で、その場合は各ブラウザの検索ボックスにURLを貼り付けてWeb Makerが開きますが、Chrome、Firefoxではブラウザ上部の検索ボックスにURLをコピペして開くようにするとオフラインでも使用できます。
URLを直接ブラウザに貼り付ける方法ならスマホでもwebmakerを立ち上げることができます。
Web Makerの使い方を日本語に翻訳して攻略
Web MakerをChrome拡張機能で追加した場合でも、ブラウザにURLで開いた場合でも、表示するWeb Makerの画面は一緒で、左にHTML、CSS、JSのコードを記述できるペイン、右はプレビュー画面で構成してあります。
そしてHTML、CSS、JSのコードを記述できるペインとプレビューを囲むようにWeb Makerを設定できるボタンはあります。なんとなく英語でも理解できますが、わからない場合は日本語に翻訳して使い方を攻略するのが良いです。
Web Makerの設定を翻訳状態にして見たのが上の画像です。
Web Makerの画面上部に並んだボタンでAdd libraryを日本語に翻訳すると「ライブラリ 追加」です。
Add libraryはWeb Makerでコンテンツ作成するときに必要なライブラリを選択してJS、CSSそれぞれのボックスにライブラリを追加していく使い方をします。
JavaScriptのライブラリとCSSのライブラリの種類にはいくつかあり、例えばJQueryとかFontAwesomeなどのライブラリがあります。
Web Makerの「+New」は日本語に翻訳してもそのまんまの「+新着」ですね。使い方としては、+Newをクリックして「Start Blank」をクリックすると、HTML、CSS、JavaScriptの新しい空のペインが開くという簡単な使い方です。
Web MakerのSaveは「保存」です。Web MakerのエディタでHTMLやCSSのコーディングをした状態を保存するときに「Save」をクリックして保存できます。command+sでも保存可能です。
またWeb Makerのデフォルト設定では自動保存が有効になっています。
Web Makerの「Open」はクリックすると画面右からスルリとパネルが表示して、コーディング状態をSaveしたライブラリを一覧で見ることができます。先に説明した+Newで新しく表示させたエディタにHTML、CSS、JavaScriptを記述してSaveで保存すると、このMy Libraryに追加で保存されていきます。
またMy Libraryに追加する保存名についてはデフォルトでは「Untitled 作成日-時間」のようになりますが、任意名に変更する使い方をしたい場合にはWeb Makerの画面左上で変更可能です。
「Untitled 作成日-時間」のように表示してる入力ボックスをクリックして任意名を入力後にEnterを叩くと勝手に変更になるのです。
Web Makerのエディタや保存に関係する設定をしたい場合には、画面右下の歯車アイコンから開く設定を日本語に翻訳して攻略します。
例えばWeb Makerのエディタでコーディングしてるときの最後に書き込んだ状態を保存できるように設定したり、CSSを記述して新たに適用するデザインを自動でプレビューに反映するように自動プレビュー設定をオンにしておくなどの設定をすることができます。
また、それぞれエディタを使いやすようにインデントやテーマも設定できるので、エディタカスタマイズをしたいときの設定といった感じですね。
HTMLとCSSをWeb Makerのエディタで書いてみた
Chromeに拡張したWeb MakerのエディタでHTMLとCSSを書いてボタンっぽいものを画像の上にデザインして遊んでみました。
HTMLとCSSを書いてみたときの使用感みたいなことを少しお伝えします。
Web MakerのエディタでHTMLを書くときにはタグ名を記述してキーボードのTabを叩けば開始タグと終了タグが補完されるし、属性が必要なタグ、例えばimgタグのsrc属性とalt属性などは属性を補完してくれるのでサクサクとマークアップできます。
head要素も使用できます。Web MakerのHTMLエディタのheadで読み込ませたGooglefontをCSSで表示できました。これにより「Web Makerの設定でライブラリを読み込む」「head要素でライブラリを読み込む」の2パターンのライブララリの読み込ませ方ができますね。
Web MakerでCSSを書く場合は指定したいCSSのプロパティの候補が表示します。
そしてHTML、CSS、JSそれぞれのペインの右上のアイコンで「波括弧｛｝」をクリックするとエディタ内のコードが見やすく整形できます。
ペインの右上には斜め矢印が2つあるアイコンもあり、クリックした場合にはペインの範囲が広がってコードの記述に集中しやすくなる使い方ができます。
またHTMLとCSSのプレビューはWeb Makerの歯車のアイコンからAuto-preview設定をオンにしておけばプレビュー画面に即座に反映できるのでデザインの確認が早いので便利です。
ここまでのWeb MakerのエディタでHTMLとCSSを書いてみた場合のエディタのレイアウトは、上からHTML、CSS、JSのペインが縦並びしたエディタレイアウトです。
Web Makerでコードを書くエディタの書きやすい並び方は人それぞれなので、使いやすようにエディタレイアウトを変更したいと思うかもしれません。
そんなときには立ち上げているWeb Makerの画面右下に表示してるエディタのレイアウトを変更できる6個の選択肢から変更可能です。
- 左ペイン+右プレビュー
- 上ペイン+下プレビュー
- 右ペイン+左プレビュー
- 横並び左ペイン+右プレビュー
- プレビューのみ
- 別タブでプレビュー
個人的には左ペイン+右プレビューが使いやすくて、記述したHTMLとCSSをChromeで検証するときはペインなしの別タブでプレビューして見たら使いやすかったです。
HTMLとCSSをWeb Makerのエディタで書いてみながら、エディタの使いずらさを感じることなくレイアウトを変えたり、自動プレビューを楽しんでみたりと遊んでいたのですが、途中で悩んだこともありました。
Web Makerで画像を貼り付けるのに悩む
HTMLとCSSを書いていたWeb Makerで画像を貼り付けるのに悩みました。
普段使用しているエディタはVS Codeなので、エディタで作成した画像フォルダからパスを繋いで画像の表示をしているのですが、Web Makerではフォルダ作成ができないようで、どこに保存した画像のパスを繋げばWeb Makerで画像表示できるか悩んだのです。
調べたけど解決しなかったので自分で考えた結果、ローカル環境のWordPressにアップロードした画像の絶対パスをimgタグのsrc属性に指定してWeb MakerのHTMLエディタにマークアップすることでプレビューができました。
ローカル環境のWordPressにアップロードした画像URLを貼り付けてるので、もしかするとWeb Makerとローカル環境が同じPCにない場合は貼り付けた画像が表示できないかもしれませんが、知識不足な私が悩んだ末に画像を表示したやり方となっております。
Web Makerで記述したコードを共有する
Webmakeで記述したHTML、CSS、JSのコードを共有する使い方もできるらしいのです。誰も共有できる人がいないので1人共有ごっこをしてみることに…
まずはCodePenにエクスポートして共有する、しかしオフラインではCodePenに接続できないことに気づく。よってCodePenにWeb Makerで記述したコードを共有する場合はWi-FiやLANケーブルでネットを繋いで共有ができます。
HTMLファイルで共有
Web Makerで記述したコードはHTMLファイルでダウンロードしてローカル保存できます。
そしてWeb MakerからダウンロードしたHTMLファイルにはCSSがheadのstyleタグで記述されてダウンロードされるので、Dropboxなどで移動して別のコードエディタで開けば共有できます。
jsonファイルで共有
Web Makerの「Open」で開くとエディタに記述したHTML、CSS、JSをjsonファイルでインポートとエクスポートができます。
このjsonファイルを使用した場合はWeb MakerからWeb Makerにオフラインでもオンラインでも共有ができます。
ネット接続して別のPCへ1人共有するだけならWeb Makerに共通のGoogleアカウントでログインしてしておくと、Web Makerで書いたHTM、CSS、JSのコードが同期できます。
同期をしてWeb Makerで書いたHTM、CSS、JSのコードを共有するときは、Chromeの拡張機能で追加したWeb Makerを使用する必要があります。オフラインでログインできないためです。
オフライン使用ブラウザ完結なWeb Makerでした
Web Makerはインターネットを経由せずにオフライン使用できる、そしてブラウザだけで完結できる特徴を活かして、PCがあれば場所を選ばずコードが書けるため、ネット接続できない環境にいるけど思いついたWebサイトのデザインや、気になってしょーがない作成途中のデザインを隙間時間にWeb Makerを起動して活用できます。
メインのエディタとして使用することはないですが、突然のオフライン環境に備えて時間があるときにでも、Web MakerをChromeの拡張機能に追加して使い方を把握しておくと良いかと思います。
