Polymer-jp.orgを支える技術

[<img src="https://www.polymer-project.org/images/logos/p-logo.png" height="26"> Polymer](https://www.polymer-project.org/) の日本のコミュニティとして立ち上がった [<img src="https://polymer-jp.org/assets/logos/polymer-jp-logo-mark.svg" height=26"> Polymer Japan](https://polymer-jp.org)のサイト構築のお手伝いをしました!

![polymer-jp-top-border.png](https://qiita-image-store.s3.amazonaws.com/0/90678/b37fe56b-6803-0373-bca7-b647ecf53860.png)

リポジトリが[<img src="https://qiita-image-store.s3.amazonaws.com/0/90678/9e29ea54-4414-512a-d7fb-9f0fdd9b9316.png" height="28"> こちら](https://github.com/Polymer-Japan/polymer-jp.org)で突貫作業でしたが、紹介させていただきます。

## 概要
まだサイトの紹介やイベント、コミニュニティへのリンクぐらいしかコンテンツがなくて**10ページ弱**です。

 - **100% pure <img src="https://www.polymer-project.org/images/logos/p-logo.png" height="26"> Polymer Library & Toolbox**
 - **100% only <img src="https://firebase.google.com/_static/images/firebase/touchicon-180.png" height="30"> Firebase Infrastructure**
 - PWA (Lighthouse 100点)
  * オフライン対応
  * プッシュ通知
 - Chrome, Firefox, Safari, Edge, IE11対応 (一部動かないけど)
 - <img src="https://qiita-image-store.s3.amazonaws.com/0/90678/9c6269b4-00e0-456b-d208-cb306c4a16ba.png" width="34" height="31"> Material Design  (レスポンシブ)
 - SEO, Social friendly (Facebook OGP, Twitter Card)
 - ユーザ認証(Google)
 - オンラインエディタ(Markdown、画像アップロード)
 - CI - <img src="https://qiita-image-store.s3.amazonaws.com/0/90678/92dd2a48-b363-6060-11fc-21a62ab6756a.png" height="27"> Travis (Web Component Test & Tagged Deploy)
 - おまけ
   * Powered by **<img src="https://qiita-image-store.s3.amazonaws.com/0/90678/c4014b17-fbc7-6aad-b258-83f225750a74.png" height="27"> Chromebook** & **<img src="https://qiita-image-store.s3.amazonaws.com/0/90678/2f45f001-ff71-9263-d8e1-bcfcb78e95c6.png" height="27">
Emacs**

## 開発期間
:dizzy: **2週間強**。他業務と並行しながらで集中してできたのは3-4日ぐらい。

## 特色
 - **jQuery使ってません**。Pug, SASS, gulp, Webpackも使いません。  
   直書きHTML(Web Components)とES6をES5に自動変換してくれる[Polymer CLI](https://www.polymer-project.org/2.0/docs/tools/polymer-cli)というビルドシステムのみです。(裏側ではbabelが変換してくれていて、あとbowerは使うことになるけど、[Polymer3](https://qiita.com/jtakiguchi/items/b287077c89cf0c1c32a9) からnpmに移行するとのこと)
 - [Firebase Cloud Firestore](https://firebase.google.com/docs/firestore/) (ドキュメントの保存先、NoSQL DB)  
   1ヶ月弱前にベータリリースがあったので早速採用。動きがまだ怪しいけどオフラインに対応してます。
 - [Firebase Cloud Storage](https://firebase.google.com/docs/storage/) (画像ストレージ)  
   コピペやドラッグ&ドロップによる画像アップロードの格納先
 - [Firebase Authentication](https://firebase.google.com/docs/auth/) (編集時の認証)
 - [Firebase Functions](https://firebase.google.com/docs/functions/) (OGP用の初期ロード)
 - Webコンポーネント用のファイル**8個**、divタグ**15個**、cssの**media-query記述無し**  
   設定ファイルを除いた主要なファイルでソースは**合計1500行未満**。

## 感想
 - CSSのセレクタを**クラスではなくタグで指定**していて気持ち悪いと言われた。
 - Firebase Firestoreはベータ版なので、たまに落ちてて**自分が悪いのかサーバのせいなのか**わからず無駄な時間があった。
 - TravisによるWeb Component Testはいいサンプルが見つからず、[無理矢理動かす](https://github.com/Polymer-Japan/polymer-jp.org/blob/cce3ca2b35023462077abc0bd66bbcf806180ce1/.travis.yml#L20)のに苦労した。
 - 自分は元サーバサイドでフロントエンド歴も**2年程度**。もちろんそれなりに学習コストはあれど、さくっと小～中規模のサイトをつくるのに <img src="https://www.polymer-project.org/images/logos/p-logo.png" height="26"> **Polymer + <img src="https://firebase.google.com/_static/images/firebase/touchicon-180.png" height="30"> Firebaseの組み合わせ** はお薦めです。 :fire: :fire: :fire:
 - 他、翻訳チームが[公式ドキュメントサイト](https://docs.polymer-jp.org/2.0/start/quick-tour)を鋭意作業中です! あと [Polymer Advent Calendar 2017](https://qiita.com/advent-calendar/2017/polymer)も是非ご参加ください!