Getting Started

Web Makerとは

Web Makerは、驚異的な速度とオフラインでも動作するWeb実験のためのPlaygroundです。 Chromeの拡張機能や、ウェブアプリとして利用することができます。 どちらもオフラインで利用可能です！

特徴

• サポートしているプリプロセッサ：
  HTML(Pug、Markdown)、 CSS(SCSS、LESS、Stylus、Atomic CSS)、 JavaScript(ES6、TypeScript、CoffeeScript)
• オフラインでも使えます
• Consoleを内蔵しています
• 制作物を保存して読み込むことができます
• 自動保存にも対応しています
• コードを自動補完します
• よく使うJSやCSSライブラリを簡単に追加することができます
• いつでもどこでもすべての制作物をインポート＆エクスポートすることができます
• たくさんのエディタのテーマと設定可能なオプションがあります
• フォントはオプションで用意されたものや、システムフォントが使えます！
• とても簡単にアクセスできます。ただChromeで新しいタブを開くだけです！
• 複数のレイアウトを選択できます
• プレビューをキャプチャすることができます
• HTMLファイルを保存することができます
• CodePenで編集することができます

インストール

まだWeb Makerをインストールしていない場合は、 Web Makerのホームページからインストールすることができます。

Webアプリ

Webアプリの場合、インストールは不要です。

Chrome拡張機能

Chrome拡張機能のリンクはこちらです。 👉chromeウェブストア

Web Makerをはじめる

Webアプリ

Webアプリはhttps://webmakerapp.com/app/を開くだけです。

Chrome拡張機能

Chrome拡張機能をインストールすると、 Chromeの右上にWeb Makerアイコンが追加されます。 アイコンをクリックすると新しいタブでWeb Makerが開きます。

最初のコード

さて、ここであなたはWeb Makerを開いて何をすれば良いのでしょうか？もう待てません！ 簡単に言えば、Web Makerを使うとHTML、CSS、JavaScriptのコードを書いたり、インスタントプレビューを表示することができます。

HTML、CSS、JSという3つの見出しがあるはずです。 各ペイン(窓)は、それぞれの言語でコードを記述する専用の場所です。 HTMLコードペインをクリックしてフォーカスを合わせてから 以下のHTMLコードを貼り付けてみましょう。

<h1>My first HTML</h1>

コードを貼り付けるとすぐに、白いプレビューエリアにHTMLプレビューが表示されます。

これはたった今作成したとてもシンプルなWebページです。 今後、CSSとJavaScriptを設置する必要が出てくるかもしれません。 その場合も、それぞれのコードペインに書き込んでプレビューを見ることができます。