Help us understand the problem. What is going on with this article?

Shields.ioと各種APIで独自のバッジを作って遊ぶ

More than 1 year has passed since last update.

https://shields.io のDynamicで遊んでいるだけの記事です。

興味あればこちらも参照ください
Shields.ioを利用して作ったプラグインのユーザー数ダウンロード数のバッジを張る

※説明用のURLは見やすくするためパラメータで改行しています。
また、説明用のURLはラベルを設定して数字を取るだけのものです。
色やラベル名等自由に変更できますので詳しくは公式を参照してください。
(あと、もしかしたらmaxAgeのパラメータは設定しておいた方が良いかもしれません。)

Qiita 記事数

Qiita items

url
https://img.shields.io/badge/dynamic/json.svg
?label=Qiita
&suffix=+items
&query=$.items_count
&url=https://qiita.com/api/v2/users/【ユーザーID】

QiitaのAPI使ってます。
https://qiita.com/api/v2/docs#get-apiv2usersuser_id

Qiita 記事のいいね数

Qiita いいね数

(この記事の「いいね」と連動してるので「いいね」してくれたら数値が変わるはず。ぐへへ:money_mouth:

url
https://img.shields.io/badge/dynamic/json.svg
?label=Qiita
&suffix=+いいね
&query=$.likes_count
&url=https://qiita.com/api/v2/items/【記事のID(?)】

QiitaのAPI使ってます。
https://qiita.com/api/v2/docs#get-apiv2itemsitem_id

Facebook シェア数

Facebook share

url
https://img.shields.io/badge/dynamic/json.svg
?label=Facebook
&prefix=share+
&query=$.share.share_count
&url=https://graph.facebook.com/?id=【URL】

【URL】は要エンコード。難しいので https://shields.io/#/Dynamic で作る方がいい。

Graph APIというものを使ってます。

(普通のHTMLならシェアボタンとかを貼ったほうがいいかも)

はてなブックマーク件数

はてなブックマーク

url
https://img.shields.io/badge/dynamic/json.svg
?label=はてなブックマーク
&suffix=+users
&query=$.count
&url=http://b.hatena.ne.jp/entry/jsonlite/【URL】

【URL】は要エンコード。難しいので https://shields.io/#/Dynamic で作る方がいい。

はてなブックマークエントリー情報取得APIのlite版使ってます。
はてなブックマーク件数取得APIでもよかったのですが、一件取得はJSON形式でないのでうまくいかないのと、複数件取得でもqueryに工夫が必要なのでやめました。

(普通のHTMLならはてなブックマークボタンを使ったほうがいいかも)

Package Control詳細なダウンロード数(installs)

丸めないダウンロード数

下記のように通常のAPIを利用するとk等で丸められてしまう。
Package Control:Package Control https://img.shields.io/packagecontrol/dt/【パッケージ名】.svg

以下のように書くと丸めずに取れる。

Package Control installs

url
https://img.shields.io/badge/dynamic/json.svg
?label=Package Control
&suffix=+installs
&query=$.installs.total
&url=https://packagecontrol.io/packages/【パッケージ名】.json

Package Controlのページでパッケージ表示するページURLの最後に、
.jsonってつけるとjsonで取れる様子。

特定OSのみのダウンロード数

例はWindows
Package Control installs(Win)

url
https://img.shields.io/badge/dynamic/json.svg
?label=Package Control
&prefix=WIN+
&suffix=+installs
&query=$.installs.windows
&url=https://packagecontrol.io/packages/【パッケージ名】.json

他にも"linux" "osx" が出来そう。

天気

東京の天気
東京の天気
東京の天気
東京の天気

url
https://img.shields.io/badge/dynamic/json.svg
?label=東京
&query=$.forecasts[0]['date','telop']
&url=http://weather.livedoor.com/forecast/webservice/json/v1?city=130010

Weather Hacks|お天気Webサービスというものを使ってます。
最後の130010は東京のIDで、各地域のIDは下記リンクのXMLに書いてあるらしい。
http://weather.livedoor.com/forecast/rss/primary_area.xml
詳しくはお天気Webサービス仕様に書いてある。

&query=$.forecasts[0]['date','telop']の部分は
&query=$.forecasts[1]['date','telop']
とすれば明日になる(たぶん)

ota-meshi
会計パッケージ開発10年、独立系SIer5年経験。6歳と1歳の娘と格闘の毎日のJSON色つけ係です。Java8+、ES6+、Vue、ESLint、stylelint、postcss、python、webpack。会社のOSS CheetahGridのメンテナ。Vue.jsのメンバー。stylelintのメンバー。自分の備忘録としても使うので小さい情報も書いていきます。
future
ITを武器とした課題解決型のコンサルティングサービスを提供します
http://future-architect.github.io/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away