Qiita Widget JSQiita API V2対応
Qiitaのユーザー情報を表示するブログウィジェット

iframe版の使い方

ライブラリ版の使い方

1. 以下のコードをbody要素内の好きなところにペーストしてください。必要に応じ、要素の順番や有無はカスタマイズできます。

template要素はJavaScriptによる初期化が完了するまで画面には表示されません。

js-で始まるクラス名はJavaScriptとHTMLの紐付けに使われため変更できません。

<!-- HTMLテンプレート -->
<template id="qiita-user-tpl">
  <p class="qiita-user__image transition transition--s1"><img class="qiita-user__img js-profile-image-url transition__inner" src="" alt="" /></p>

  <div class="qiita-user__title">
    <a class="qiita-user__url js-url transition transition--s2" target="_blank"><h1 class="qiita-user__id js-id transition__inner"></h1></a>

    <p class="qiita-user__items transition transition--s3">
      <span class="qiita-user__items-num js-items-count transition__inner"></span>
      <span class="qiita-user__items-unit transition__inner">Items</span>
    </p>

    <p class="qiita-user__likes transition transition--s3">
      <span class="qiita-user__likes-num js-likes-count transition__inner"></span>
      <span class="qiita-user__likes-unit transition__inner">Contribution</span>
    </p>

  </div>
</template>

<template id="qiita-article-tpl">
  <li class="qiita-article-list__item transition transition--s5">
    <a class="qiita-article js-url transition transition__inner" target="_blank">
      <h3 class="qiita-article__title js-title"></h3>
    </a>
  </li>
</template>
<!-- HTMLテンプレート -->

2. ウィジェットを表示したい位置へ以下のコードをペーストしてください。要素の順番や有無は自由に変更できます。

<section class="qiita-widget js-qiita-widget">
  <header class="qiita-widget__header qiita-user js-qiita-user"></header>
  <section class="qiita-widget__articles">
    <h2 class="qiita-widget__articles-head transition transition--s4"><span class="transition__inner js-subject"></span></h2>
    <ul class="qiita-article-list js-qiita-article"></ul>
  </section>
</section>

3. lib.bundled.jsをHTMLに配置してから、body要素の最下部へ以下のコードをペーストしてください。

<script src="path/to/lib.bundled.js"></script>
<script>
(function () {
  var container = document.querySelector('.js-qiita-widget');
  new QiitaWidget(container, {
    subject: '人気の投稿',      // 見出し
    userId: 'qiita',          // QiitaのユーザーID
    useShuffle: false,        // trueで表示記事をランダムに選択する
    sortByLike: true,         // trueで投稿を「いいね」数順でソートする
    useTransition: true,      // trueでロード直後のアニメーションを表示
    filterByLikesFrom: 0,     // 表示する記事の最低いいね数(0でフィルタ無効)
    maxToShow: 5,             // 最終的に表示する記事の最大件数
    cacheAgeMin: 15,          // JSONレスポンスのキャッシュ有効時間(分)
    perPage: 100              // 一度のリクエストで取得する記事数(1〜100)
    maxRequest: 10            // perPage * maxRequest = 取得を試みる最大記事件数
}).init();
})();
</script>

4. デフォルトのCSSを使うか、好きなCSSを使ってスタイルを実装してください。

See the Pen QiitaWidgetJS (library) by y_hokkey (@hokkey) on CodePen.

開発者向け情報

READMEを参照してください。

ライセンス

MIT License

謝辞

• lscache, Apache-2.0

このライブラリの設計

• 同僚のコードレビューでこんなにクラスの設計が良くなったという話