noteからGitHub Gistのコードを参照する

noteにGitHub Gistのコードを貼れることを最近知りました。
GASのコードを修正した後に、noteの過去記事も修正しなきゃいけないのが面倒だったので、「こりゃ便利！」と思って使ってみました。

比較

【noteのコードブロック】

var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheets()[0];

//実行メニューを作成
function onOpen() {
 var ui = SpreadsheetApp.getUi();
 var menu = ui.createMenu("GAS実行");
 menu.addItem("Googleグループメンバー出力", "exportGoogleGroupMembers");
 menu.addToUi();
}

function exportGoogleGroupMembers() {
 //対象ドメイン
 var domainName = 'example.com';
 
 //取得するグループの最大数（デフォルトは200）
 var maxResults = 500;

 //シートをクリア
 sheet.clear();
  
 var values = [];
 
 //ヘッダー追加
 values.push([
   "メールアドレス",
   "グループ名",
   "説明",
   "メンバー数",
   "メンバー",
 ]);
 
 //グループ一覧の取得
 var groupsList = AdminDirectory.Groups.list({domain: domainName, maxResults: maxResults});
  
 if(groupsList) {
   for(var i = 0; i < groupsList.groups.length; i++){
     var value = [];
     
     //グループの基本情報を取得
     value.push(groupsList.groups[i].email); //メールアドレス
     value.push(groupsList.groups[i].name); //グループ名
     value.push(groupsList.groups[i].description); //説明
     value.push(groupsList.groups[i].directMembersCount); //メンバー数

     var strMembers = '';

     //グループのメンバーを取得
     var members = AdminDirectory.Members.list(groupsList.groups[i].email).members;
     
     if(members != null)
     {
       for (var j = 0; j < members.length; j++){
         //社外ドメインのアドレスの場合、ドメイン部以外はマスクする
         if(members[j].email.match(/@example.com/)){
           strMembers += members[j].email + '\r\n';
         }else{
           var splitEmail = members[j].email.split('@');
           strMembers += '*****@' + splitEmail[1] + '\r\n';
         }
       }
     }
     value.push(strMembers.trim());

     values.push(value); 
   }
   
   //取得したデータをスプレッドシートにセット
   sheet.getRange(1, 1, groupsList.groups.length + 1 , 5).setValues(values);
   sheet.getRange(1, 1, groupsList.groups.length + 1 , 5).setVerticalAlignment('top')
 } 
}

【Gist】

Gistの方が拡張子を指定できるので、予約語やメソッドの色分けが正確で見やすいですね。

Gistのいいところ

・Gitの概念を知らなくても気軽に使える（pushもcommitも不要）
・Gitの環境が無くてもブラウザ上からコードを編集できる
・note以外のblogにも埋め込み易く、手軽にコードを公開できる

Gistのコード参照方法

意外とやり方に戸惑ったので、スクリーンショット付きで解説します。

1.GitHubのアカウントが無い場合は、まずGitHubのアカウントを作成

2.GitHubにログインし、プロファイルメニューから「Your gists」をクリック

3.自身が今までアップしたGistの一覧が表示されます。
　右上の「+」をクリックして新規作成。

4.アップするスクリプトの説明、ファイル名（GASの拡張子は.gs）と
　コードを入力して「Create Gist」をクリック。
　※Gist自体を非公開にしたい場合は"secret"を、公開したい場合は
　　"public"を選択。なお、Gist自体を"secret"にしても、
　　URLを知っていれば誰でもアクセスできてしまうので注意。

5.READMEや他のファイルも置きたい場合は、「Add file」から追加。
　1つのGistに複数ファイルをアップロード可能ですが、現状では
　ファイルの並び順はファイル名のアルファベット順で固定なので、
　READMEが一番上に来てほしい場合は"0_"などのサフィックスを付ける。

6.作成したGistの詳細画面で「Share」を選択し、共有用のURLをコピー

7.noteの本文にコピーしたURLを貼り付けて改行すると、Gistの内容が
　表示されます

気になった点

・ChromeでGist参照を表示すると画面が小刻みに揺れる
　※眼とCPUへの負荷がすごい…
　※環境によっては問題なく表示される模様
　※バグっぽいのでnoteサポートに問い合わせしてみます

・Gistに複数ファイルアップしている場合、特定のファイルは指定できず
　全ファイルが参照される
　※READMEを置いていた場合は説明が冗長になるかもしれません

おわりに

Gitを使えるエンジニアであればGitHubで事足りるかもしれませんが、そこまで厳密なコード管理は必要なく、単一ファイルで完結するシンプルなスクリプトを一元管理して手軽に共有するための用途としてGistは非常に便利だなと思いました。

ちなみに今回サンプルでさらっと出した「Googleグループのメンバーを出力するGAS」は、トリガーで日次実行するように仕込んでおくと、最新の社内メーリングリストの一覧を毎日出力してくれて便利なので、よければお使いください。