takanorip blog

Polymer 3.0でウェブサイトを作ってみた

created at:

2018-12-24

tags:

    TOC

    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 早く来い。

    Share on Twitter