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

うさがにっき

読書感想文とプログラムのこと書いてきます

Polymer, Web Components学習のための開発環境構築

Polymer Web Components Atom

概要

必要に駆られたのでPolymerの勉強を始める
PolymerはWeb Componentsのラッパークラスらしいので、まずはWeb Componentsを理解するため開発環境構築から始める

詳細

Atomダウンロード

GitHubが作ったエディタAtomを利用する
Atom


今注目のテキストエディタ「Atom」の使い方と便利機能まとめ | Code部

を参考に開発環境を構築していく

日本語化

Atom -> Preference -> installを選択するとsettingsタブが開く
[japanese-menu]と押下しエンター、でてきたjapanese-menuのinstallを押下
設定もタブで管理するのが印象的
f:id:tiro105:20151010193528p:plain

日本語化された
f:id:tiro105:20151010193608p:plain

標準機能でできること

画面分割

表示 -> ペインで好きな方向に画面分割できる
f:id:tiro105:20151010193949p:plain

themeの変更

初期は黒を基調としたモダンなデザインだが、themeを変更することにより見た目を変更できる
初期表示
f:id:tiro105:20151010194241p:plain

変更後
f:id:tiro105:20151010194300p:plain

themeのダウンロードも可能

作業が捗るパッケージ群

先ほど日本語化パッケージをダウンロードしたように、いろいろなパッケージをダウンロードすることにより作業がはかどる

autopackage-paths

予測変換にファイルやディレクトリも表示できるようになる

color-picker

カラーピッカーを表示する

ブラウザプレビュー

ctrl + shift + mでブラウザプレビューが表示される
いちいちブラウザで開きなおす必要がないので非常に楽