pixela APIを使ってアクセス数を可視化する
作っているサービス
pixelaという草を生やすAPIをチームページのアクセスカウンタに使ってみます。
pixelaとは
pixelaのAPIドキュメント
開発者(a-knowさん)
実装に使う技術
API側
言語など:NodeJS
pixelaの3rd partyライブラリを使います。 github.com
実装
createGraph
とincrementPixel
というメソッドを作って、各チームページにアクセスされるたびにcreateGraphを呼びます。
重複している場合はAPIから400エラーが返ってくるのでハンドリングしつつ、
カウントアップするメソッドを実行します。
export class pixelaLogic { public createGraph(team) { return new Promise(async(resolve,reject)=>{ try { let response = await client.createGraph({ id: "team"+team[0].team_id.toString(), name: team[0].team_name.toString(), unit: "access", type: "int", color: "shibafu" }); //console.log(response.status); resolve(response.status); } catch (error) { resolve(500) } }) } public incrementPixel(team):Promise<number>{ return new Promise(async(resolve,reject)=>{ let response; try { response = await client.incrementPixel('team' + team[0].team_id) console.log(response.status) return resolve(response.status) } catch (error) { console.error(error); return resolve(500); } }) } }
生成されたグラフのリスト
UI側
ReactJS
グラフの埋め込みを行います。
<iframe src={'https://pixe.la/v1/users/ckoshien/graphs/team'+ store.getState().team.team_id +'.html?mode=simple'} height="150" width="600" frameborder="0" />
a-knowさんとmottox2さんは運営者ギルドのギルドメンバーでもあります。 (私も) qiita.com