あなたのサイトに草をはやそう (サービス停止供養記事）

サービス供養

さてサービスを停止する前の供養記事になります。こちらのサイトではブログサービス ALISのプログラミング系記事だけを抽出してリストアップをしていました。

ヒートマップ

そのトップにヒートマップと呼ばれるグラフを掲載しています。こちらはGitHubでの掲載が有名で、活動の状態が手にとるようにわかる優秀な表示手法です。

GitHubに合わせた設定で縦が週になっており１マスが1日を示します。この1年でどういった傾向で活動が行われたのか手にとるようにわかります。

ALSIのプログラミグ記事ですと1年前にブームがありました。右の現在に近いあたりでは活動を示す緑の部分が少ないです。また傾向として1年前のブームでは週の真ん中での投稿が圧倒的におおく週末は少なかったですね。

近々ですとどなたかが、毎週金曜日の投稿をつづけていることも見えます。

ちなみにGithub界隈では草を生やすといいます。緑がいっぱいだとお仕事いっぱいしていることを表すわけですね。

さてこの優れた表記をあなたのサイトにも追加しませんか？最近はパーツがJavaScriptで用意されていることが多く高機能な機能を簡単にあなたのサイトに入れ込めます。

このサイトは Reactで作成されており、Reactのコンポーネントを使いサクッと作成してあります。

ヒートマップ作成の要点

私の使用したライブラリーは react-calendar-heatmap となります。こちらをyarn add react-calendar-heatmap しましょう。

こちらがライブラリー情報です https://www.npmjs.com/package/react-calendar-heatmap

import CalendarHeatmap from 'react-calendar-heatmap';

---省略---

   for(var i in data){
      let articleLink = `https://alis.to/${data[i].user_id}/articles/${data[i].article_id}`;
      
---省略---

      let dt = new Date(data[i].published_at * 1000);
      let month = "";
      let day = ""
      if(dt.getMonth()+1 <10){month = `0${dt.getMonth() + 1}`;}
      else{month = `${dt.getMonth()+1}`;}
      
      if(dt.getDate() <10){day = `0${dt.getDate()}`;}
      else{day = `${dt.getDate()}`;}

      let formatDate = `${dt.getFullYear()}-${month}-${day}`;

      if (publishStatics[formatDate]){
        publishStatics[formatDate] += 1;
      }else{
         publishStatics[formatDate] = 1;
      }
      if(publishStatics[formatDate] > 4){
         publishStatics[formatDate] = 4;
      }
   }
   
   for(let key in publishStatics){
      pubData.push({date: key, count: publishStatics[key]});
   }

---省略---

render{

---省略---
            <h1>ALIS プログラミング記事一覧</h1>
            <img src={logo} className="App-clock" alt="logo" />
            <p>トータルの記事数は<b>{this.state.NumOfArticle}</b>本</p>

            <CalendarHeatmap
              startDate={this.state.startDate}
              endDate={this.setState.endDate}
              showWeekdayLabels ={true}
              showMonthLabels={true}
              values={this.state.pubData}
              classForValue={(value) => {
                if(value ===null){
                  return `color-github-0`;
                }
                return `color-github-${value.count}`;
              }}
            />
---省略---

}

さて該当部分を抜き出してきました。コンポーネントにパラメーターを上記のように与えてあげます。

一番面倒なところの value のデータは草の生やし方を構成する重要なデーターです。真ん中部分の {pubDataに date: count:}の配列としてあらかじめ用意してあげる形になります。それ以外は表記のパラメータなので適当に値をいれてサクッとつくりましょう。

とデータさえちゃんと用意できれば綺麗なヒートマップが描けます。GitHubの色もあらかじめプリセットがあるのでそれも指定してあげるだけです。

このヒートマップの表記はいろいろ使えると思うのでぜひみなさんもためしてみてね。Twitterのヒートマップとか怖くてみれませんよね。絶対濃い緑だらけだ。

最後に

この記事はサービス供養のために作成しました。この経験がどなたかのお役に立てれば、本望というものです。このサービスではSVLTEについても実験をおこなっているので別途来週あたりにもう1本供養記事を描く予定です。

ではまたね。