コマンド一発で.html、.cssや.jsなどの雛形を一斉に用意してくれるスクリプトを書きました。また、さきほどGitHubに公開しました。是非ご利用ください。
準備編
~/tools/ 内などの、自作のコマンドを置けるようにパスが通っている場所で、以下のコマンドを実行してください。
$ git clone https://github.com/daiz713/html.git
そして以下のように、メインのスクリプトファイルを実行できるようにファイルの権限を変更します。
$ cd html/ $ chmod 755 html
これでhtmlコマンドの準備が完了しました。
シンプルなHTMLを書く場合
最もシンプルなファイル構成の例です。ワーキングディレクトリで以下のコマンドを実行してください。
$ html
すると、以下のように、基本構成のファイルがコピーされます。コピーされたファイル内には共通の必要事項が記述済みです。
🍺 template/basic_html.html as index.html 🍺 template/icon.png as icon.png 🍺 template/basic_app.js as app.js 🍺 template/basic_app.css as app.css 🍣
Polymerを使ったHTMLを書く場合
引数にpを与えるとPolymerを使うために必要な事項が書かれたファイルbower.jsonと、カスタムエレメントを作るときの土台となるmy-element.htmlが付属してきます。さきほどと同じ要領で
$ html p
を実行すると、
🍺 template/polymer_html.html as index.html 🍺 template/polymer_bower.json as bower.json 🍺 template/polymer_my-element.html as my-element.html 🍺 template/icon.png as icon.png 🍺 template/basic_app.js as app.js 🍺 template/basic_app.css as app.css 🍣
のようにファイルがコピーされます。 仕上げに
$ bower install
を実行して完了です。
Polymerを使ったChromeアプリをつくるためにHTMLを書く場合
引数としてcaを追加して実行します。これを付加すると、Chromeアプリとして実行するときに欠かせないmanifest.jsonとbackground.jsが付いてきます。また、Polymerライブラリのインラインスクリプトを外部スクリプトに変更するツールrefactorcsp*1ももれなく付いてきます！
以下の順番でコマンドを実行してください。
$ html p ca
$ bower install
$ python bower_components/refactor_csp/index.py
このプロジェクトを chrome://extensions/ のパッケージ化されていない拡張機能を読み込む...ボタンから読み込んで開発を始められます！
