Skip to content

API v2に対応した、Qiitaのユーザー情報を表示するTypeScript製ブログウィジェット

License

Notifications You must be signed in to change notification settings

hokkey/qiita-widget-js

Repository files navigation

hokey/qiita-widget-js

npm version build state

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

Acknowledgements

qiita-widget-js uses following libraries:

  • lscache, Apache License Version 2.0

About

API v2に対応した、Qiitaのユーザー情報を表示するTypeScript製ブログウィジェット

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published