Web Components を学ぶ #3 「Chrome Dev Editor を準備する」

いよいよコンポーネント製作に挑戦です。今回と次回でChrome Dev Editorを使って初めてのお手製Polymerコンポーネントを作りたいと思います。「Chrome Dev Editorのインストール方法は？」という方はこちらの記事を参照ください。

開発の準備

以下の手順で準備を進めて下さい。ここで紹介する手順は、Polymerコンポーネントを新たに創るor使う場合はプロジェクトごとに毎回行ってください。

1. Chrome Dev Editor を開きます

chromeのアプリ一覧を開き,オレンジ枠内のようなアイコンをクリック

2. 「縦に並ぶてんてんてん」をクリックして、「New Project...」をクリックします

3.「Project name」を適当に入力し、「Project type」を以下のように選択します

今回はデモとして「看板」を作ってみようと思ったので、Project nameは「my-signboard」としました。また、上記のようなProject typeを選択すると、カスタムエレメントを作るだけでなくマテリアルデザインのタグも使えるようになります。

4. 必要ファイルがファイルが構成されますので、しばらく待ちます

ウィンドウのエディタ部分（背景が黒い領域）の下部に、構成中のメッセージが表示されます。これが「Successfully ran bower install」になるまで30秒ほど待ちましょう。

↓

以上で、準備は完了です。 次回は実際にコードを書いていきます！