Web Componentsを公開しよう!

5
Like
0
Comment

howking

Edited at 2017-10-15

Polymer Japan Meetup #0 で挑戦したLTのテキスト資料です。

Web Componentsを公開しよう!

自己紹介

ハンドルネーム howking

好きなもの: Emacs, Chromebook, Android
Polymer歴 2年ぐらい (2015-07〜)
Polymerと Firebase で社内の行先掲示板を運用中
フロンエンド歴 2年ぐらい
元サーバ管理者(Gentoo Linux)、サーバサイド(PHP,PostgreSQL,MySQL)
HTML5プロフェッショナル認定 L2取得 (2015-12)
jQuery知らない、gulp書いたことない
活動
今年からQiitaデビュー、主にPolymerのサンプルコードを投稿
ちびちびコントリビュート (polymer-docs-jp, marked-element, polymerfire)

今日話すこと

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

WebComponents.orgとは?

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

コンポーネントの利用

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

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

コンポーネントの公開

登録画面: https://www.webcomponents.org/publish
1. Check requirements 必要条件の確認
→ GitHubに公開リポジトリを作成、ソースを登録
2. Create inline demo インラインデモの作成
→ プレビューで動作確認、リポジトリでリリースタグの設定
3. publish! 公開ボタンをクリック!
→ 5-10分で自動的に公開される(審査とか無し)
→ 以後、バージョンを上げると更新される

登録してみた

習作 sanitize-element

<sanitize-element> HTMLサニタイザ

marked-elementが表示するHTMLから不要な要素、属性を取り除くコンポーネント
- Sanitize.jsを利用してるだけのもの
- 設定はjsonで渡す(動的に変更も可能)
marked-elementを単体で使うにはセキュリティを考慮する必要がある(XSS攻撃)
実コードはほんの数行

前提条件 `Check requirements`

Requirements(必須)

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

Recommended(推奨)

ドキュメント化する
デモ・テストを書く

May be...

英語で書くこと

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

英語はほぼコピペ! (WebComponents.orgから似たようなコンポーネントを検索)
メソッドやプロパティの英語コメントも最低限入れておけば、Polymer/polymer-analyzerが解析してそれっぽく自動生成

デモをつくる `Create inline demo`

オンラインエディタのinline demo creatorを使って作りつつ、、
下記のようなコードをREADME.mdに埋めこむとWebComponents.orgでデモが動きます

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にバージョンをつけて、そのコミットに対してタグをつけます

bower.json

  "version": "0.2.2", -> "version": "0.2.3",

あとは登録画面にリポジトリを指定してpublishボタンを押せば公開されます!
のバッチも忘れずに

[![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のテストも連携できた)

(Polymerを使って)どんどん Webコンポーネントを増やしていきましょう!

以上!

ご静聴、ありがとうございました!

<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とは?

- 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)

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

```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

[&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

```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: 以上!
ご静聴、ありがとうございました!

Edit request

Web Componentsを公開しよう!

Web Componentsを公開しよう!

自己紹介

今日話すこと

WebComponents.orgとは?

コンポーネントの利用

コンポーネントの公開

登録してみた

習作 sanitize-element

前提条件 Check requirements

ドキュメント化する Check requirements

デモをつくる Create inline demo

公開! publish!

まとめ

以上!

人気の投稿

Report article

Feedback

前提条件 `Check requirements`

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

デモをつくる `Create inline demo`

公開! `publish!`