カテゴリー別アーカイブ: Bower

customelements.io に Web Componentsを登録する

1. まずは, bowerが必要になるのでインストールしておきましょう.

$ npm install -g bower

2. 次に, (プロジェクトのディレクトリで) bower.jsonを生成します.

$ bower init

いろいろきかれると思いますが, あとから書き換えもできるので,
とりあえずわからない質問はenterキーでとばしましょう.

以下のようなjsonファイルが生成されます.

{
  "name": "x-piano",
  "version": "0.0.0",
  "homepage": "https://github.com/Korilakkuma/x-piano",
  "authors": [
    "Korilakkuma <rilakkuma.san.xjapan@gmail.com>"
  ],
  "description": "Piano illust with Polymer Web Components",
  "main": "x-piano.html",
  "keywords": [
    "Polymer",
    "web-components"
  ],
  "license": "MIT",
  "dependencies": {
    "core-component-page": "Polymer/core-component-page#^0.5",
    "webcomponentsjs": "~0.5.5"
  },
  "ignore" : [
  ],
  "private" : false
}

customelements.ioにWeb Componentsを登録する場合に特に重要なポイントは3つです.

  • kyewordsに “Polymer”と”web-components”を記述する
  • “ignore”キーを指定する (対象ファイルがなければ空配列の指定でOKです)
  • privateキーの値をfalseにする

3. customelements.ioに登録します

$ bower register [タグ名] [GitHubのリポジトリ]

例えば, x-pianoの場合,

$ bower register x-piano git://github.com/Korilakkuma/x-piano

となります.

4. 登録の確認

$ bower search [タグ名]

上記のコマンドでSearch resultsが表示されればOKです.

例えば, x-pianoだと,

$ bower search x-piano
Search results:

    x-piano git://github.com/Korilakkuma/x-piano.git

と表示されます.

ただ, customelements.ioには数時間経過しないと検索結果に反映されないので, ご注意してください. 適当に時間をおいて検索すれば, 自作したWeb Componentsがヒットするはずです.