ウェブサイトの GitHub リポジトリから最新のコミット ID を取得し、カラーコードに利用してウェブサイトに表示する

なんのこっちゃ？というタイトルになってしまったが、Hail2u の ながしまきょう さんがブログで話していたアイデア。

コミットのSHA-1ハッシュ……先頭6文字はそのまま色として扱えることに思い至った。

例えばこのウェブサイトのリポジトリーでは、v8.9.4が#a2c5c5（ライトグレー）

アクセント・カラーくらいにしか使えないが、背景色とのコントラストの確保さえすれば、どこでも使えるだろう。

色がコロコロ変わるウェブサイト

つまり、Git リポジトリのコミット ID の先頭6文字を、そのままカラーコードに利用できる、というワケだ。

僕も、自分のメインサイト Neo's World は、GitHub リポジトリでソース管理するようになった。

だから、この GitHub リポジトリから最新のコミット ID を取得して画面上に表示してやれば、サイトを更新するごとにランダムに色が変わるサイトが作れるのだ。

面白そうな企画なのですぐにやってみた。

素の XmlHttpRequest を使い、最低限の実装で動作するようにしたコードは以下のとおり。

// ページ読み込み時に実行する
document.addEventListener('DOMContentLoaded', function() {
  var xhr = new XMLHttpRequest();
  // タイムアウトを設定しておく
  xhr.timeout = 5000;
  
  // 通信完了時の処理
  xhr.addEventListener('load', function() {
    // ステータスエラー
    if(xhr.status !== 200) {
      return console.log('Status Error', xhr.status, xhr);
    }
    
    // 何かエラーがあったら握り潰す
    try {
      // レスポンスを JSON パースする
      var response = JSON.parse(xhr.response);
      // コミット ID (最新の1件) を取得する
      var commitId = response.commit.sha;
      // コミット ID の先頭6文字に「#」を付けてカラーコードを生成する
      var commitColour = '#' + commitId.slice(0, 6);
      
      // 取得した「コミット ID カラーコード」を画面に表示する : ココでは div.commit-colour を生成し設定している
      var commitColourElem = document.createElement('div');
      commitColourElem.className = 'commit-colour';
      commitColourElem.style.background = commitColour;
      document.body.appendChild(commitColourElem);
    }
    catch(error) {
      console.log('Parse Error', error, xhr);
    }
  });
  
  // 通信エラー時の処理
  xhr.addEventListener('error', function() {
    console.log('Error', xhr);
  });
  
  // GitHub API の URL : 取得したいリポジトリ・ブランチを指定する
  xhr.open('GET', 'https://api.github.com/repos/Neos21/neo.s21.xrea.com/branches/master');
  xhr.send();
});

GitHub API を AJAX GET で叩くだけ。自分の Neo's World リポジトリのうち、master ブランチの最新のコミット ID が分かるのは、

という URL になる。このレスポンスを response.commit.sha と辿ると、コミット ID が取得できる。

そしてこのコミット ID 文字列の先頭6文字をちぎり、# を付けてカラーコードにする。

画面に表示する方法はお任せだが、ココでは createElement() で div 要素を作り、大まかなスタイリングは .commit-colour という CSS クラス名を付与して設定し、背景色としてカラーコードを設定している。

実際に Neo's World では、トップページのみ、画面右上にコミット ID カラーを適用したリボンを表示するようにした。

サイトを更新する度にこのリボンの背景色が変わるので、サイトの更新具合が簡易的に認識できるのではないかと思う。