Qiita-widget NPM

hokey/qiita-widget-js

Qiita API V2に対応した、Qiitaのユーザー情報を表示するTypeScript製ブログウィジェットです。コピペで簡単に導入できるiframe版と、柔軟にカスタマイズできるライブラリ版があります。

npm/webpackでの利用方法

npm i qiita-widget --save-dev

import QiitaWidget from 'qiita-widget';

const 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();

開発ビルド

git clone https://github.com/hokkey/qiita-widget-js.git
cd qiita-widget-js
npm i

# プロダクションビルド
npm run build

# ユニットテスト
npm run test

# カバレッジ表示
npm run test:verbose

仕様

InternetExplorerに非対応です。
公開されている投稿の「いいね」の合計値からユーザーのContributionを算出しているため、Qiitaのプロフィールページの数値と完全に一致しないことがあります。

Changelog

2.2.0
- コンパイルに使うNode.jsのバージョンを12から16に変更
- 依存パッケージのアップグレード
- ライブラリ部分のビルドターゲットをES5からES2020へ変更(バンドル版はES5のまま)
- 軽微な修正
2.1.1
- index.jsの向き先となるコードはバンドル化しない方式に変更
- ライブラリ部分のコンパイル先を/distではなく/libへ変更
- /srcフォルダ内の階層を整理
2.1.0
- ユニットテスト導入
- Webpackをv4系からv5系に置き換え
- linterをtslintからeslintに置き換え
- prettier導入
- tsconfigの設定を厳格可
2.0.1
- 軽微なバグフィックス
2.0.0
- axiosを廃止してFetch APIに置き換え
- Webpackをv3系からv4系に置き換え
- browser-syncをdevDependenciesから削除
1.0.1
- バグフィックス
1.0.0
- キャッシュの実装をlscacheへ変更
- breaking パラメータ名cacheAgeMin, data-cache-age-minを追加
- breaking パラメータ名cacheAge, data-cache-ageを削除
0.4.4
- package.jsonを修正
0.4.3
- ビルド失敗の修正
- package-lock.jsonを追加
- CIで利用するNodeバージョンを変更
- ドキュメント更新
0.4.2
- tsconfig.jsonでstrictNullChecksを有効化
- axios-cache-adapterを2.0.0へ更新
- localforageを1.5.3へ更新
0.4.1
- axiosをdependenciesからdevDependenciesへ移動
0.4.0
- いいね数で表示記事をフィルタできるパラメータfilterByLikesFromを追加
0.3.1
- ライブラリ版がimportできなかった問題を修正
0.3.0
- 依存ライブラリをバンドルした配布用ファイルを追加
0.2.1
- ビルド設定の修正
0.2.0
- 同じページ内へ複数のインスタンスを作成できるように修正
0.1.0
- NPMへの公開準備
- コードレビュー指摘箇所の修正