A look at the user interface

Web Makerのユーザーインターフェースはシンプルで使いやすく作られており、 必要なものはすべて揃っているので、初めての人にも迷うことなく使えるでしょう。

コードペイン

コードペインはコードを実際に記述するセクションです。 HTML、CSS、JavaScriptの3つのペインが表示されます。

プレビュー

コードペインの隣には、コードをプレビューする白い(デフォルト)エリアがあります。 これはHTML、CSS、JavaScriptの入力をリアルタイムで生成してプレビューするiframeです。

タイトル

左上には制作物のタイトルが表示されます。 クリックしていつでも編集することができます。

新規作成/保存/開く

右上には新しい制作物を作成したり、開いているものを保存したりする3つのボタンがあります。 また、OPENボタンを押すとSaved Creationペイン(保存した制作物ペイン)からすべての制作物にアクセスすることができます。

Saved Creationペインでは、一度にすべての制作物をエクスポート、またはインポートすることもできます。 エクスポートするとGoogleDriveやDropbox等でバックアップ可能なJSONファイルが生成されます。

設定

一番右下のアイコンではアプリの設定を開くことができます。 そこには多くの便利な設定項目があります。 設定の詳細についてはこちらを参照してください。

更新履歴

設定ボタンの隣には更新履歴ボタンがあり、 リリースバージョン毎にすべての更新内容を確認することができます。

レイアウト

いくつかのレイアウトを選択することができます。 各自で最適なものを選択してください。 この設定は制作物ごとに保持されるため、制作物によって最適なレイアウトで表示されます。

ダウンロード/共有

Web Makerには制作物をエクスポートして世界に共有するための多くの選択肢があります。 単一のHTMLファイルとして保存してサーバへアップロードしたり、 CodePenで開いたり、プレビューのスクリーンショットを撮ることができます。

エクスポート/インポート

この項目は以下の記事内容を翻訳しています。
https://medium.com/web-maker/importing-exporting-your-creations-d92e7de5c3dc

Web Makerはすべての制作物をlocalStorageに保存します。 それらのすべてをJSONファイルとしてエクスポートして保存することが出来ることを知っていますか？ エクスポートしたJSONファイルはWeb Makerにインポートすることもできます。

エクスポート

制作物をエクスポートする手順は以下の通りです。

• OPENボタンをクリックしてSaved Creationペインを開きます。
• EXPORTボタンをクリックします。
• 初めてエクスポートする場合は、 Web Makerがエクスポートした制作物をダウンロードできるようにするために 「ダウンロードの管理」権限の許可を求められます。 許可をクリックします。
• エクスポートしたファイルをダウンロードするフォルダを選択します。

これで指定したフォルダにJSONファイルがダウンロードされます。 このファイルには保存したすべての制作物が含まれています。

ヒント: Dropbox(や他のクラウド)のフォルダを選択して制作物をバックアップすることもできます。

インポート

Web MakerからエクスポートしたJSONファイルをインポートすることができます。 何故そんなことをしたいのでしょうか？ 例えば新しいコンピュータにWeb Makerをインストールし、 他のコンピュータから制作物を復元したい場合、 インポートするのが一番良い方法です。 インポートする手順は以下の通りです。

• OPENボタンをクリックしてSaved Creationペインを開きます。
• IMPORTボタンをクリックします。
• エクスポートしたJSONファイルを選択します。
• すでにインポートする制作物の一部がある場合、Web Makerは上書きするかどうかの確認ダイアログを表示します。

完了！これで作業の続きに取り掛かれます！

ヘルプ/シェア

左下にはいくつかのヘルプオプションがあり、 そのうちの1つはアプリ内で利用可能なキーボードショートカットを確認することができます。 またtweetボタンもありますので、Web Makerをシェアするのに使うことができます。:)