Polymer 3.0でウェブサイトを作ってみた
created at:
2018-12-24
tags:
Web Components Advent Calendar 2018 24日目の記事です。
Web Components Advent Calendar 2018 - Qiita
_Web ComponentsやPolymer、lit-html、LitElementに関することまでなんでも大歓迎！_qiita.com
Polymer 3.0を使って日本ウェブフォント協会という架空の協会のサイトを作ってみた。
Japan Web Font Association
_Website | Japan Web Font Association_jwfa.netlify.com
リポジトリはこれ。
takanorip/Japan-WebFont-Association
_Contribute to takanorip/Japan-WebFont-Association development by creating an account on GitHub._github.com
今回はその過程をまとめるよ。
Polymer 3.0
Polymer 3.0はWeb Componentsの利用をサポートしてくれるJavaScriptフレームワークです。詳しくはドキュメントを読んでね。
なんでLitElementじゃないのかって言うと、v1.0になってなくて安定してないからとPolymer 3.0出たばっかなのに「お前は用済みだ」みたいな感じになってるのが可愛そうだなと思ったから。
平成も最後だし供養してやろうという気持ち。
Welcome - Polymer Project
_Edit description_www.polymer-project.org
あとこの本に詳しい解説が載ってるので買って読むと良いと思います（宣伝）
イヌでもわかるWeb Components 改訂版 - 犬テトラ+ - BOOTH（同人誌通販・ダウンロード）
_「イヌでもわかるWeb Components」の内容を大幅に改定しました！ ・Polymer2.0から3.0へアップグレード ・最新の動向を反映 ・lit-htmlの章を追加 Web…_inutetraplus.booth.pm
使用したコンポーネント
@polymer/iron-ajax
PolymerElements/iron-ajax (3.0.1)
_Easily make ajax requests_www.webcomponents.org
その名の通りajax通信するためのコンポーネント。
コンポーネントからAPIにアクセスし、結果を直接他のコンポーネントに渡せる。JavaSriptを書かなくて良いので、詳しくない人にとっては良いかも。
ローディング中とかも判定できる。
polymer-starter-kit
Polymer/polymer-starter-kit
_A starting point for Polymer apps. Contribute to Polymer/polymer-starter-kit development by creating an account on…_github.com
Polymer 3.0でアプリケーションを作るための雛形。
こういうのあるとアプリケーション作りやすくて助かる。
今回app-drawerは使用しなかった。
困ったこと
環境変数の扱い
今回、contentfulでコンテンツの管理をしているのだけど、polymer cli に環境変数を渡すことができずアクセストークンが見えてしまうので困った。
結局環境変数を渡すにはwebpackを使うしかなさそうで、それはちょっとめんどくさかったので、BFFを作りcontentfulへのアクセスはBFFから行うようにした。
BFFはnow.shにデプロイした。無料で使えるなんて素敵。
webpack使うならこいつが参考になりそう。
PolymerX/polymer-skeleton
_skull: Skeleton for Polymer 3 app with Webpack, PostCSS and Service Workers ready. - PolymerX/polymer-skeleton_github.com
使わなかったけど使えそうなコンポーネント
今回使わなかったけど使えそうなコンポーネントたちをご紹介。
ally関連
PolymerElements/iron-a11y-announcer (3.0.2)
_An element that helps with announcing text through screen readers._www.webcomponents.org
PolymerElements/iron-a11y-keys-behavior (3.0.1)
_A behavior that enables keybindings for greater a11y_www.webcomponents.org
webcomponents.org - Discuss & share web components
_Edit description_www.webcomponents.org
国際化対応
PolymerElements/app-localize-behavior (3.0.1)
_Polymer behaviour to help internationalize your application_www.webcomponents.org
Web Animations
PolymerElements/neon-animation (3.0.1)
_Polymer + Web Animations_www.webcomponents.org
marked
PolymerElements/marked-element (3.0.1)
_Element wrapper for the marked library_www.webcomponents.org
toast
PolymerElements/paper-toast (3.0.1)
_A Material Design popup toast_www.webcomponents.org
リサイズを監視してくれるやつ
PolymerElements/iron-resizable-behavior (3.0.1)
_Edit description_www.webcomponents.org
まとめ
まあふつうにアプリケーション作れるなーという感じ。
LitElement v1.0 早く来い。