Fork me on GitHub

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

GitHub npm
動作デモ

キャッシュ機能

レスポンスをローカルにキャッシュするため、リロード回数が多くてもAPI制限を回避します。

豊富なオプション

リロードごとにランダムな記事を表示したり、表示件数を自由に変更できます。

簡単で柔軟

コピペで導入できるiframe版と柔軟にカスタマイズできるライブラリ版があります。

iframe版の使い方

iframe.jsをダウンロードし、ウィジェットを表示したい場所へ以下のコードをペーストしてください。

<div class="js-qiita-widget"
  data-subject="人気の投稿"
  data-user-id="qiita"
  data-height="auto"
  data-use-shuffle="false"
  data-sort-by-like="true"
  data-use-transition="true"
  data-filter-by-likes-from="0"
  data-max-to-show="5"
  data-cache-age="900000"
  data-per-page="100"
  data-max-request="10"></div>
<script src="/path/to/iframe.js" defer></script>

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

ライブラリ版の使い方

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をダウンロードし、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,             // 最終的に表示する記事の最大件数
    cacheAge: 15 * 60 * 1000, // 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.

開発者向け情報

npm version Dependency Status

READMEを参照してください。

ライセンス

MIT License

謝辞

このライブラリの設計