かんたんオンラインランキング

Recipe#01

Googleスプレッドシートでつくる！　かんたんオンラインランキング

こんな人にオススメ：お金をかけたくない！　とにかく楽に作成・管理したい！

つくるもの：名前と得点と日時が並んだ20位までのランキング

難易度：★★★★☆　所要時間：30min～(ウディタ上でデコレーションする時間は除く)

下準備：エディターオプションから、上級者向けコマンドを有効化しておいてください。

下準備：Googleアカウントを所持していない場合は作成しておいてください。

設計

送信するときはmode=set、name=(名前)、score=(得点)の3つを送信。ランキングが文字列で返ってくる。

送信せずに受信するときはmode=getを送信。ランキングが文字列で返ってくる。
Googleドライブの[新規]から空のスプレッドシートを作成します。適当にタイトルをつけておきます。

[拡張機能] > [Apps Script] を開きます。適当にタイトルをつけておきます。

コードをすべて消して、新しくスクリプトを打ち込みます。(面倒ならコピペも可)

function doGet(e){
  var q = e.parameter;
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0];
  var data = sheet.getRange("A1:C20").getValues();
  if(q.mode=="set" && q.name && q.score>=0){
    for(var i = 0; i<20; i++){
      if(data[i][1]<=q.score){
        var stamp = new Date();
        data.splice(i, 0, [q.name, q.score, stamp]);
        data.pop();
        sheet.getRange("A1:C20").setValues(data);
        break;
      }
    }
  }
  var res = "";
  for(var i = 0; i<20; i++){
    if(!data[i][0]){
      break;
    }
    res += data[i][0] + "," + data[i][1] + "," + Utilities.formatDate(new Date(data[i][2]), "JST", "yyyy-MM-dd HH:mm") + "\n";
  }
  return ContentService.createTextOutput(encodeURIComponent(res)).setMimeType(ContentService.MimeType.TEXT);
}

2行目の前に、テスト用として

e = {parameter:{mode:"set",name:"test",score:100}};

を追加してから一度実行して、エラーが出ずに登録されていることを確かめてください。

その後、追加した部分は消去してください。

ウディタの方を作ります。

コモンのひな形+エンコードコモンをダウンロードして、読み込んでください。

RttフォルダをDataフォルダに投入してください。

1行目にはURLの記入欄があります。あとで変更します。

10行目は待機中に表示するピクチャです。あとで自由に変更してください。

13行目は返ってきたランキングをとりあえず文字列のまま表示しています。あとでお好みの表示に変更してください。

スクリプトの解説と改造(しないなら飛ばしてもOK)

function doGet(e){
//関数を定義。ウディタにおけるコモンに相当。
//eはウディタの「入力する値」に相当。
//ウディタではGETメソッドという方式で通信を行うのでこの名前。
  var q = e.parameter;
  //よく使う変数e.parameterに、qという別名をつける。
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0];
  //スプレッドシートの1枚目を取得。
  var data = sheet.getRange("A1:C20").getValues();
  //シートのA1:C20の範囲のデータを、配列dataに代入。
  //ウディタのデータベースのように、配列dataにはたくさんのデータが入っている。
  //読みだすときはdata[y][x]の順番で指定。ただし1からではなく0から数える。
  if(q.mode=="set" && q.name && q.score>=0){
  //(条件分岐)送信モードのとき、しかも名前が指定されていて、しかも得点が0以上のとき、
    for(var i = 0; i<20; i++){
    //変数iを0から19まで1ずつ足しながらループ
    //つまりランキングを1行目から20行目まで上から順番に見ていって、
      if(data[i][1]<=q.score){
      //登録する得点以下のエントリーがあったら、
        var stamp = new Date();
	//現在時刻を取得して、
        data.splice(i, 0, [q.name, q.score, stamp]);
	//そのところに「名前 得点 日時」の順番で挿入。
        data.pop();
	//21個に増えちゃったから一番下を削除。
        sheet.getRange("A1:C20").setValues(data);
        //シートのA1:C20の範囲に、dataを戻す。
        break;
	//ループ中断。
      }
    }
  }
  //ここから先はウディタに戻す用の文字列を作る処理。
  var res = "";
  for(var i = 0; i<20; i++){
  //もう一度上から下までループ。
    if(!data[i][0]){
      //名前が空だったらループ中断。(「!」は「逆」の意味)
      break;
    }
    res += data[i][0] + "," + data[i][1] + "," + Utilities.formatDate(new Date(data[i][2]), "JST", "yyyy-MM-dd HH:mm") + "\n";
    //「名前,得点,日時」を文字列に足す。さらに改行を足す。
    //「JST」は日本標準時のこと。「yyyy-MM-dd HH:mm」は表示形式。例えば「2017-03-09 09:10」。
  }
  return ContentService.createTextOutput(encodeURIComponent(res)).setMimeType(ContentService.MimeType.TEXT);
  //ウディタに、テキストとして返す。
}

公開する

[デプロイ] > [新しいデプロイ]
- 種類の選択：ウェブアプリ
- 次のユーザーとして実行：自分
- アクセスできるユーザー：全員
アクセス許可を求められた場合は、[アクセスを承認]、警告画面 > [詳細] > [～～（安全ではないページ）に移動] > [許可] を選択。

公開したらURLをコピーして、コモンの方に貼り付けてください。URLは「https://script.google.com/macros/s/{~~~}/exec」となっていれば正しいです。

※コード変更後、2回目以降のデプロイ：[デプロイ] > [デプロイを管理] から、（アクティブなデプロイを選択した状態で）編集アイコン、バージョンを[新バージョン]に変更して[デプロイ]
試しに実行してみる

コモンを呼び出してみて、登録・取得ができるか確認してください。
飾りつけ

文字列操作とピクチャ表示を使って自分好みにデコレーションしてください。

Have a nice day!

質問・要望等はTwiiter(@rtt398)までどうぞ！

このテキストは2017/3/16現在での情報を記載しています。誤りがありましたらお知らせください。

2017/3/28 改訂。日本語に対応しました。

2017/12/1 追伸【PLiCy対応】~~現状、最終行の下に「doPost=doGet」って書いておくといいと思います。~~
同日さらに追記：仕様変更によりこの変更は必要なくなりました。そのまま使用できます。

2020/9/2 公開手順に英語の場合の表記などを追記しました。

2022/12/25 Apps ScriptのUI変更に対応しました。

Googleスプレッドシートでつくる！ かんたんオンラインランキング

Googleスプレッドシートでつくる！　かんたんオンラインランキング