Web Componentsを公開しよう!

<img src="https://www.polymer-project.org/images/logos/p-logo.png" height="26"> [Polymer Japan Meetup #0](https://polymer-japan.connpass.com/event/67514/) で挑戦したLTのテキスト資料です。

# :fire: Web Componentsを公開しよう!
## 自己紹介

- ハンドルネーム howking  
  ![howking](https://avatars3.githubusercontent.com/u/13231263?v=4&s=80)  
  好きなもの: Emacs, Chromebook, Android
- Polymer歴 2年ぐらい (2015-07〜)  
  <img src="https://www.polymer-project.org/images/logos/p-logo.png" height="26"> [Polymer](https://www.polymer-project.org/)と<img src="https://firebase.google.com/_static/images/firebase/touchicon-180.png" height="30"> [Firebase](https://firebase.google.com/) で社内の行先掲示板を運用中
- フロンエンド歴 2年ぐらい  
  元サーバ管理者(Gentoo Linux)、サーバサイド(PHP,PostgreSQL,MySQL)  
  [HTML5プロフェッショナル認定 L2](http://html5exam.jp/outline/lv2_v2.html)取得 (2015-12)  
  **jQuery知らない、gulp書いたことない**  
- 活動  
  今年から[Qiitaデビュー](https://qiita.com/howking)、主にPolymerのサンプルコードを投稿  
  ちびちびコントリビュート ([polymer-docs-jp](https://github.com/jtakiguchi/polymer-docs-japanese-translation/pull/3), [marked-element](https://github.com/PolymerElements/marked-element/pull/74), [polymerfire](https://github.com/firebase/polymerfire/pull/268))

## 今日話すこと

  - WebComponents.orgとは?
    * ざっくり見方から公開の仕方まで
  - 簡単なコンポーネントを実際に公開した経験談
    * 前提条件や公開手順について
    * 苦労したこと、よかったこと

## WebComponents.orgとは?

<img src="https://user-images.githubusercontent.com/13231263/31207212-d9d7311e-a9b7-11e7-92f9-acd4a8016123.png" width="35%"> <img src="https://user-images.githubusercontent.com/13231263/31207196-bca4e5e6-a9b7-11e7-8802-1ebd753b846a.png" width="35%">

 - https://www.webcomponents.org/ ~~Polymer~~ Webコンポーネントの情報共有サイト
 - [_Introduction_](https://www.webcomponents.org/introduction) [邦訳](https://qiita.com/jtakiguchi/items/b1315f53b3726ff11b61)
    * 「Webコンポーネントとは、HTMLタグを自分で定義・再利用可能できるようにするもの」
    * `Custom Elements`、`Shadow DOM`等の仕様について紹介
 - 対応ブラウザ状況、最近のニュース、チャットコミュニティ([Gitter](https://gitter.im/webcomponents/community))
 - Webコンポーネントの登録、検索ができる(例: markdown)

## コンポーネントの利用

<img src="https://user-images.githubusercontent.com/13231263/31207008-848235c0-a9b6-11e7-99ef-09240ccc242c.png" width="40%"> <img src="https://user-images.githubusercontent.com/13231263/31207743-10757aca-a9bb-11e7-8d91-b1c883caafde.png" width="50%">

```bash
$ bower install --save PolymerElements/marked-element
# bower.json
 "dependencies": {
   "marked-element": "PolymerElements/marked-element#^2.3.0",
 }
```

 - コンポーネントの概要、APIのドキュメント、デモやその場で動作確認できる`inline demo`
 - [bower](https://bower.io)経由でインストール(ただし来年のPolymer3.0からはnpm経由になる模様)

## コンポーネントの公開

  <img alt="publish-top" src="https://user-images.githubusercontent.com/13231263/31210731-4ec5629a-a9cf-11e7-9622-cd2c95a5a441.png" width="35%"> <img alt="publish-bottun" src="https://user-images.githubusercontent.com/13231263/31211973-4f57499a-a9d8-11e7-9c07-502f47942d64.png" width="35%">
  
  登録画面: https://www.webcomponents.org/publish
  1. `Check requirements` 必要条件の確認
    → GitHubに公開リポジトリを作成、ソースを登録
  2. `Create inline demo` インラインデモの作成
     → プレビューで動作確認、リポジトリでリリースタグの設定
  3. `publish!` 公開ボタンをクリック!
     → 5-10分で自動的に公開される(審査とか無し)
     → 以後、バージョンを上げると更新される

# :rocket: 登録してみた
## 習作 sanitize-element

 <img alt="sanitize-element" src="https://user-images.githubusercontent.com/13231263/31210299-32f47126-a9cc-11e7-9147-296c9f02c04e.png" width="30%">  

 [&lt;sanitize-element&gt;](https://www.webcomponents.org/element/howking/sanitize-element) HTMLサニタイザ
  
 - [marked-element](https://www.webcomponents.org/element/PolymerElements/marked-element)が表示するHTMLから不要な要素、属性を取り除くコンポーネント
   * [Sanitize.js](https://github.com/gbirke/Sanitize.js)を利用してるだけのもの
   * 設定はjsonで渡す(動的に変更も可能)
 - marked-elementを単体で使うにはセキュリティを考慮する必要がある(XSS攻撃)
 - 実コードはほんの数行 
 
## 前提条件 `Check requirements`

  _Requirements(必須)_

 - オープンソースライセンスで公開する
    (関連するライブラリも要確認)
 - タグによるリリース
 - README.mdを置く

  _Recommended(推奨)_

  - ドキュメント化する
  - デモ・テストを書く
 
  _May be..._

  - **英語で書くこと**

## ドキュメント化する `Check requirements`

  - **英語はほぼコピペ!** :smile: (WebComponents.orgから似たようなコンポーネントを検索)
  - メソッドやプロパティの英語コメントも最低限入れておけば、[Polymer/polymer-analyzer](https://github.com/Polymer/polymer-analyzer)が解析してそれっぽく自動生成
  
<img alt="sanitize-github" src="https://user-images.githubusercontent.com/13231263/31217419-dfd7cd96-a9f1-11e7-9d73-a8303098c01a.png" width="40%"> <img alt="sanitize-webcomp" src="https://user-images.githubusercontent.com/13231263/31217394-cc9dea44-a9f1-11e7-8470-7e209dcf5996.png" width="40%">

## デモをつくる `Create inline demo`

  - オンラインエディタの[`inline demo creator`](https://www.webcomponents.org/publish)を使って作りつつ、、
  - 下記のようなコードをREADME.mdに埋めこむとWebComponents.orgでデモが動きます

```html:README.md

     <!--
     ```
     <custom-element-demo>
       <template>
         <link rel="import" href="my-element.html">
         <next-code-block></next-code-block>
       </template>
     </custom-element-demo>
     ```
     -->
     ```html
     <my-element></my-element>
     ```
```
  ※ ここがわかりずらいけど、Markdown表記に`<!-- -->`でコメントを入れ、その後に書いたコードがデモとして動作する(GitHubのREADME.md上はなにも表示されない)

## 公開! `publish!`

  - 例えばbower.jsonにバージョンをつけて、そのコミットに対してタグをつけます

```js:bower.json
  "version": "0.2.2", -> "version": "0.2.3",
```
  - あとは[登録画面](https://www.webcomponents.org/publish)にリポジトリを指定して`publish`ボタンを押せば公開されます! :tada::tada::tada:
  <img alt="publish-bottun" src="https://user-images.githubusercontent.com/13231263/31211973-4f57499a-a9d8-11e7-9c07-502f47942d64.png" width="40%">

  - ![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg) のバッチも忘れずに

```markdown
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/howking/sanitize-element)
```

## まとめ

  - WebComponents.orgとは?
    * コンポーネントの検索・登録できる素敵なサイト
    * 参考になるソース(**英語**)が多くて便利
    
  - 公開してみた経験談
    * 必要条件がGitHubにオープンソースで公開するだけ、審査もなくて手軽
    * 英語が壁だったけどコピペでなんとかなった
    * バージョニングの勉強にもなった([Travis CI](https://travis-ci.org)のテストも連携できた)
   
  **(Polymerを使って)どんどん Webコンポーネントを増やしていきましょう!**
  
  <img alt="polymer" src="https://www.polymer-project.org/images/logos/p-logo.png" width="70"> <img  alt="webcomponents.org" src="https://web-components-resources.appspot.com/static/logo.svg" width="60">. 

# :bow: 以上!
ご静聴、ありがとうございました!