技術日誌

野球関係のサービスを個人開発しています。

pixela APIを使ってアクセス数を可視化する

f:id:ckoshien:20200202000311j:plain

作っているサービス

cap-baseball.com

pixelaという草を生やすAPIチームページのアクセスカウンタに使ってみます。

pixelaとは

pixe.la

pixelaのAPIドキュメント

docs.pixe.la

開発者(a-knowさん)

blog.a-know.me

実装に使う技術

API

言語など:NodeJS

pixelaの3rd partyライブラリを使います。 github.com

実装

createGraphincrementPixelというメソッドを作って、各チームページにアクセスされるたびに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); 
        }
      })

  }
}

生成されたグラフのリスト

ckoshien Graph List | Pixela

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