Qiitaのブログパーツをのせてみた
ブログでたまにサイドバーにQiitaのブログパーツを載せている人がいたので、
どうやっているのだろうと調べてみたところ、なんとQiita Widgetなるものを発見。
早速導入してみようと思ったら、そのまま載せてみると表示件数が多く、サイドバーに表示するには縦に長すぎる。。。 できればあまり画面を専有したくないので、記事で紹介されている Qiita Widget をカスタマイズしてみました。
Widgetをカスタマイズする
いきなり実装せずに、「すでに同じことをやってる人はいないかなー？」と調べてみたところと、
まさにやりたいことそのまま紹介されている方を発見。
Qiitaのブログパーツをはてなブログのサイドバーに設置する方法
よし！これでいけると思い、 Google Driveをホスティングしようと調べてみると、まさかの事態が発覚。
Google Driveのホスティングサービスは2016/8/31に終了します．
Google DriveにJSやCSSのファイルを置いて読み込む より
なんと。。。
このままでは、どこか レンタルサーバーを借りてごにょごにょしないといけない。 なんとかならんものか。。。
Gist + RawGit
考えた結果、「Gist なら URL として公開できるじゃないか！」と気付き、 Gist で編集したファイルを公開するという手段を思いつきました。 早速 Gist で js を作成！
そして、jsのsrcの部分に、gistのurlを設定！
<a class="qiita-timeline" href="https://qiita.com/users/kei-p" data-qiita-username="kei-p">kei-pのtips</a><script src="//gist.githubusercontent.com/kei-p/602acbbae5f13bf0122927ad815ebdaf/raw/3e31d6030aab1e62eb1a39f82ab74a54185be5cc/qiita-widget.js"></script>
よし、これでイケル！！！
が、なかなかうまくいかない。というか何も起きない。
なんでだろうと、原因を探っていると、CDN代わりにgithubを使いたい場合は外部サービスrawgithubを利用しようという記事を発見。
どうやら、取得したデータはtype='plain/text'であるため、jsとして認識されていないらしい。
そして、それはRawGitを使えば解決できるらしい！！
早速、gist の url を貼り付け、 rawgit の url へと変更。
結果、無事画面に Qiita widget を表示できるようになりました。
めでたし。
