qiita-widget

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への公開準備
  • コードレビュー指摘箇所の修正

Author

• Yuma Hori

Acknowledgements

qiita-widget-js uses following libraries:

• lscache, Apache License Version 2.0