テクノロジー

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

はるか先生's icon'
  • はるか先生
  • 2021/09/25 15:12
Content image

 

サービス供養

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

ヒートマップ

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

GitHubに合わせた設定で縦が週になっており1マスが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本供養記事を描く予定です。

ではまたね。

Supporter profile iconSupporter profile iconSupporter profile iconSupporter profile icon
Article tip 10人がサポートしています
獲得ALIS: Article like 219.07 ALIS Article tip 236.57 ALIS
はるか先生's icon'
  • はるか先生
  • @haruka
ブロックチェーンの技術ビジネス/dAppsとProtocol周りが得意/ブロックチェーンの技術関連の寄稿

投稿者の人気記事
コメントする
コメントする
こちらもおすすめ!
Eye catch
他カテゴリ

ALISのシステム概観

Like token Tip token
5.00 ALIS
Eye catch
クリプト

Bitcoinの価値の源泉は、PoWによる電気代ではなくて"競争原理"だった。

Like token Tip token
59.32 ALIS
Eye catch
クリプト

ジョークコインとして出発したDogecoin(ドージコイン)の誕生から現在まで。注目される非証券性🐶

Like token Tip token
38.31 ALIS
Eye catch
テクノロジー

なぜ、素人エンジニアの私が60日間でブロックチェーンゲームを制作できたのか、について語ってみた

Like token Tip token
270.93 ALIS
Eye catch
クリプト

Bitcoin史 〜0.00076ドルから6万ドルへの歩み〜

Like token Tip token
947.13 ALIS
Eye catch
クリプト

Uniswap v3を完全に理解した

Like token Tip token
18.92 ALIS
Eye catch
他カテゴリ

機械学習を体験してみよう!(難易度低)

Like token Tip token
8.82 ALIS
Eye catch
クリプト

ブロックチェーンの51%攻撃ってなに

Like token Tip token
0.00 ALIS
Eye catch
テクノロジー

オープンソースプロジェクトに参加して自己肯定感を高める

Like token Tip token
54.95 ALIS
Eye catch
ゲーム

ドラクエで学ぶオーバフロー

Like token Tip token
22.10 ALIS
Eye catch
クリプト

スーパーコンピュータ「京」でマイニングしたら

Like token Tip token
1.06k ALIS
Eye catch
テクノロジー

彼女でも分かるように解説:ディープフェイク

Like token Tip token
32.10 ALIS