【HTML 初心者】どこでもコードが書けるWEBアプリ「Web Maker」のご紹介

WEB関連
2021.07.23

1.WEB Makerとは

コードがブラウザ上で書けるWEBアプリケーション

引用:https://webmaker.app/ アクセス2021/07/23

WebMakerとは、ブラウザ上でHTML、CSS、Javascript等のコードを書くことが出来るWEBアプリケーションです。HTMLコードを書くには、「テキストエディター」を使用して書くことが一般的ですがこちらはVscodeやAtomなどのテキストエディターを使わずに作業ができるので、テキストエディターがインストールが出来ない環境や出先のパソコンでコードを書かなければならないなど緊急の場合もすぐに対応ができます。

実際にWebMakerでコードを書いた映像を下記に掲載しました。（コードを打つのが遅いです・・ｗ）

このようにコードがかけます。また、コード欄のすぐ横には入力したものがすぐに反映されます。HTMLを始めたばかりでとりあえず動きが見たいという方はこちらがおすすめです。Vscodeなどのテキストエディターはプラグインを入れないとライブプレビューが出来ません。（Bracketsというテキストエディターはライブプレビュー機能はあります。）

Web Makerの利用方法

まず、WebMakerのサイトにアクセスします。

引用:https://webmaker.app/ アクセス2021/07/23

OPEN WEB APPは、クリックするとすぐにWebMakerが起動します。こちらをブックマークに入れておけば使用したいときに起動することが出来ます。

ただ、毎回毎回ブックマーク開くのは面倒ですよね？もし、起動ブラウザがGoogle Chromeなら個人的には拡張機能で追加しておくほうがおすすめです。追加方法は下記です。

ADD Chrome Extension をクリックします。その後Chromeの拡張機能エリアにジャンプします。

Chromeから削除しますと書いてあるのは、私のMacに既に入っているためです。
引用:https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh アクセス:2021/07/23

右上の青色のボタンをクリックすると追加することが出来ます。既に私は追加してしまっているので、削除しますと出ていますが初めての場合はここに追加しますと出ているはずです。

無事にインストールが出来たら、今度は起動方法です。

Google Chromeの拡張機能（アドオン）はインストールしただけでは、ブラウザのバーの部分に表示されません。そのためピン留めをして常時表示する必要があります。動画に動きをまとめました。

ピン留めしてしまえば、マークをクリックすればいつでも使うことが出来ます。ブックマークよりこちらほうが起動しやすいのでおすすめです。

2.WebMakerの機能説明

全体レイアウト

レイアウトはシンプルで見やすいですね。

操作画面は、上記でも出てきましたがこのようなレイアウトになっています。

上から順番にボタンを見ていきましょう。

Add library

JavascriptとCSSのライブラリーを入れることが出来ます。Choose from popular librariesのプルダウンリストには、よく使われるライブラリーの候補が入っていますのでこちらから検索すると良いでしょう。BootstrapやjQuary等もCDNを拾ってくる事なく使用することが出来ます。CDNの説明はここでは割愛しますが、興味のある方は検索してみてください。

いろんなライブラリーを入れて遊んでみましょう！
New

このボタンを押すと、新しいレイアウトを作成できます。レイアウト作成の際にVueやReactなどを選択するとライブラリーが入った状態でレイアウトを作成できます。目的に応じて新しいレイアウトを選ぶと良いでしょう。作成できるアレイアウトは、以下のとおりです。

  • Start Blank(デフォルトレイアウト）
  • React
  • Vue
  • Preact
  • Kontora Game Engine
黄色で囲った部分がレイアウトです。左端を選ぶとデフォルトのレイアウトが作成できます。
Save

文字通り、保存です。保存を押さないとセーブされません。ボタンを押さない場合は、Windows場合はCtrl + s ,Macの場合はCommand + sで保存ができます。

Open

Neｗで作成し、保存したレイアウトを開くときに使用します。複数ファイルを作成した場合はこちらから開くことが出来ますので、ローカルのように使うことも出来ますね。Exportは、json形式で保存したデータを落とすことが出来ます。Importは、Jsonデータを取り込むことが出来ます。

Login/signup

ログインとサインアップを行えます。ログインは、Github,Google,Facebookで行えます。ログインを行うメリットは、Saveしたデータを引き継げるのでデバイスが変わってもログインさえすれば別のデバイスでも保存したコードを扱うことが出来ます。また、ログインしていない場合で作業しても後からログインすればサインイン前のデータを取り込むかアラートが出ます。

フッターの各種ボタン

こちらは多いのでまとめて動画で掲載します。

  • ヘルプボタン：ヘルプが確認できます。
  • キーボードショートカット：ショートカットのコマンドが確認できます。
  • Twitter：Twitterにシェア出来ます。
  • Save as HTML file:コードで書いたHTMLファイルをダウンロードできます。
  • Edit on Codepen:WebMakerで書いたコードをCodepenに表示させることが出来ます。
  • レイアウトボタン：レイアウトの変更ができます。（動画参照）
Settings

WebMakerの設定が行なえます。基本的にはいじることは少ないと思いますが、カスタマイズをしたくなったらいじってみましょう。デフォルトのプリプロセッサーの変更（CSSをSCSSなど）テーマの変更やデフォルトのフォントサイズなども変更できます。

オフラインでコードが書ける

ブラウザで起動ができてたとしてもインターネットに繋げない場合もありますよね？その場合は、テキストエディターを使うしかないと思いますが心配無用です。WebMakerも同様にオフラインで起動可能です。証拠の動画がこちらです。※オフラインで使用するには予め拡張機能をインストールしている必要があります。

オフラインで出来るのはありがたいですよね。まぁ逆にオフラインが出来ないとテキストエディター一択になっちゃいますがｗ

しっかり動いていますよね、これでオフライン環境でも安心して作業が可能です。

まとめ

いかがでしたでしょうか？機能が豊富ですが、レイアウトもシンプルで初心者にはとても使いやすいかなと思います。

本格的にWEB制作をしない方でも、例えば楽天やyahoo！ショッピングに出店をしているEC担当者や個人事業主の方はHTMLでのコーディングが必須のはずなので、商品登録する前にWebMakerで作成すると登録後に修正の手間などが減ると思います。

個人的にはオフライン環境で作業ができて、データもダウンロード出来るのが個人的には気に入っています。まだ使用していない方は試してみてください！

それでは！

コメント

スポンサーリンク