読者です 読者をやめる 読者になる 読者になる

daiizの自由帳

フレンチフライ トリュフ塩仕立て

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

web-components Polymer chrome-dev-editor tech

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

f:id:daiiz:20140828232221p:plain

開発の準備

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

1. Chrome Dev Editor を開きます

f:id:daiiz:20140828224734p:plain

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

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

f:id:daiiz:20140828225221p:plain

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

f:id:daiiz:20140828230313p:plain

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

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

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

f:id:daiiz:20140828231601p:plain

f:id:daiiz:20140828231509p:plain

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