lacolaco

Google Developers Expert for Angular / 技術的なことや技術的じゃないことを書きます

はてなブログにDouble OのAsk Meボタンを設置する

Double O というサービスがWeb ComponentsやPWAなどアグレッシブにWeb技術を取り入れていて応援したい気持ちなので、まずはユーザーとして使っていこうと思います。

ooapp.co

「よくある質問」がDouble Oの公式アカウントとして運用されてるの面白いですね https://ooapp.co/DoubleO

で、Ask Meボタンをどこに設置するのがよいかなーと考えた結果、ブログで記事を読んだあとに目に留まるところがいいんじゃないかと思い、はてなブログ上に設置してみました。 まさにこの記事の -> あたりに Ask Meのボタンが出ていると思います。

設置手順

Double Oのタグを入手する

Double Oのアカウントを作成し、ボタンのスクリプトを入手します。

f:id:lacolaco:20180410234637p:plain

スクリプトscriptタグと、oo-buttonタグの2つからなり、scriptタグで読み込まれるJavaScriptによりoo-buttonタグがWeb Componentsとして認識されるようになります。

headタグ内でoo-buttonタグを登録するためのスクリプトを読み込む

はてなブログの設定画面から詳細設定を開き、下の方にある head要素にタグを追加 のところにscriptタグだけを追加します。

f:id:lacolaco:20180410234518p:plain

これで、このはてなブログ内ではどこでもoo-buttonタグが使えるようになりました。

サイドバーにHTMLモジュールを配置

デザイン設定からサイドバーにHTMLモジュールを追加し、oo-buttonタグを配置するだけです。

f:id:lacolaco:20180410234836p:plain


質問だけでなく、マイクロナレッジの共有にも使えるサービスになっていくようなので、ブログにまとめるほどでもないようなこともぼちぼち書いていきつつ、マイクロナレッジのまとめをブログでサマライズするようなやりかたができるといいのかなーと思ってるところです。

ちなみに4/23に登壇する Web Components Cafe #2でもオンラインの質問場所としてDouble Oが使われますので、ぜひこちらもよろしくお願いします!

polymer-japan.connpass.com

amas.ooapp.co

すごいステマ記事みたいになってしまった。