GoogleスプレッドシートでWORDLEメーカーを作った【2022年WCE新歓ブログ　第4回】

皆さんこんにちは。ゼノブレイド3が9月発売だと思ったら7月に前倒しされて驚いているWCEの助さんです。表題の通り、Google スプレッドシートでWORDLE(的なもの)メーカーを作ったのでその仕組みとかをちょっとだけ紹介しようと思います。最初に断っておきますが、別にWCEでは普段こういう形式でゲーム作ってるわけではないです。Google Apps Scriptを使ってみたかったので。

WORDLE
Googleスプレッドシート
Google Apps Script
作ったもの
実装
まとめ

WORDLE

流行ってますよね。派生ゲームもいっぱい出てて2048ブーム(正しくはThrees!ブーム？)を思い出します。
ルールは単純で、6回のチャンス内で5文字の英単語(毎日更新される)を当てるというもの。入力した単語は正解の単語と比較され、正解の単語に含まれない文字はグレー、含まれる文字はオレンジ、含まれていて位置も同じ文字はグリーンといったようにヒントが出ます。
知らない人はとりあえずやってみてください。
www.nytimes.com

Google スプレッドシート

Googleが提供する無料サービスの一つです。Google版Excelだと思ってくださいな。

www.google.com
Googleアカウントが必要だったはずなので、ない人は作ると良いかと。

こんな風な見た目。表計算ソフトなのですがこうやってただの表として使っても問題はないはず。ちなみにこの画像は私が趣味でやっているNintendo Direct予想。

Excelと同じように、セルの値を使って計算したりとか色々できます。その辺の詳細は適当に調べてください。

Google Apps Script

Googleが提供する無料サービスの一つです。自分でプログラムを書いて他のGoogleのサービスと連携して色々できるのが魅力。Gmailに届いたメールを転送したり、スプレッドシートを操作したり。

workspace.google.co.jp
上記のサイトからでも始められますが、Google スプレッドシートやGoogleドライブなどからすぐに開始できます。(スプレッドシートの場合は拡張機能>Apps Script、ドライブの場合は新規>その他>Apps Script)

こんな感じ。コードは概ねJavaScriptなので比較的簡単だと思います。書いたコードはエディタ上で手動で実行する他に、Google スプレッドシートなどの方から実行できるようにしたり、特定のタイミングで自動で実行するようにしたりできます。

ファイルに変更が加わった時だったり、5分おきだったり。目的に合わせて設定すると良いでしょう。

作ったもの

スプレッドシート上で遊べるWORDLE的なゲームです。複雑な操作なしでプレイできます。

単語リストは自分で管理できます。様々なオリジナルWORDLEを切り替えて遊べる感じ。ヒント機能を付けることもできたり。

こちらからコピーして自分でいじることができます。(Googleアカウントが必要です)

↑のような画面になるので、「コピーを作成」を選ぶとコピーできます。

シート上のボタンを押すとスクリプト実行の許可が求められるので、続行>自分のアカウント選択>詳細>MAKEDLEに移動>許可の順に選択すると動くようになります。

実際に触るときはまず「HOW_TO_PLAY」シートを読んでくださいね。

実装

どんな風に作ったかを見ていきます。なるべく簡単めに。詳細な部分は実際にコピーして拡張機能>Apps Scriptから確認できます。紹介するのはほんとにちょっとだけなので学ぼうと思っているような人は他のサイトも見てください。

文字列の比較

WORDLEの基幹部分ですね。例えば「FINAL」が正答の時に「FLASH」が入力されたときは1文字目のFは正答と完全一致でグリーン、2文字目のL、3文字目のAは正答に含まれるが位置が違うため部分一致でオレンジ、他は外れでグレー...といったようにヒントが出るやつをどうするか。

この部分だけ抜き出すとこんな感じ。

for(var i=0;i<len;i++){
      var pos = mainsheet.getRange(4+count_ans, 2+i);
      pos.setValue(name[i]);
      if(name.length > i){
        if(name[i] == answer[i]){
          pos.setBackground("green");
        }
        else if(answer.includes(name[i])){
          pos.setBackground("orange");
        }
        else{
          pos.setBackground("gray");
        }
      }
    }

ざっくり言うと入力された文字列の先頭から順にたどって正答の文字列との比較を行っていくプログラムですね。
lenというのは文字列長の最大値です。「pos」が云々ってところで入力するスプレッドシート上の位置を指定しています。数値iを0から1ずつ増やしていき、入力文字列(「name」が対応)のi文字目(先頭は0文字目として扱われます)について正答の文字列(「answer」が対応)と比較します。この比較は、それぞれのi文字目が一致しているか(name[i]==answer[i])、正答の文字列が入力文字列のi番目を含むか(answer.includes(name[i]))を確認するもので、それぞれの場合に適した色で背景を塗っています。

データセットの利用

正答となる単語の選択、入力可能な単語の制限のためにデータセットを参照する必要があります。

今回の実装ではデータセット用のシートから必要な情報を状態の記憶用のシートに写して利用(複数のシートを開くと処理に時間がかかるため)。例えば正答の選択は以下のように行っています。

  var spreadSheet = SpreadsheetApp.getActiveSpreadsheet();
  var worksheet = spreadSheet.getSheetByName("WORK");
  let size = worksheet.getRange("B4").getValue();
  let hintNum = worksheet.getRange("B6").getValue();

  var rand = getRandomIntInclusive(1, size);
  let answer = worksheet.getRange(14+rand, 1).getValue();
  var hints = worksheet.getRange(14+rand, 2, 1, 10).getValues();

まず記憶用の「WORK」というシートからB4の位置にある単語数(size)とB6の位置にある1単語あたりのヒント数(hintNum)を獲得します。それをもとに1から単語数までの間のランダムな数を得てそれに該当する単語とヒントを設定しています。

UIまわり

簡単に操作できるように、ボタンを利用しています。

まずは挿入>図形描画からボタンのデザインを作る

サイズと位置を調整したら右クリックして「︙」をクリックし「スクリプトの挿入」を選択

Apps Scriptで作成した関数の名前を指定して「OK」を押すとボタンとして利用できる

まとめ

Google スプレッドシートやGoogleAppsScriptはこんな風にいろいろなことができるので活用したいですね。自分でプログラムしたものを自分で利用する、というのは気持ちの良いものがあります。このテのサービスを上手く使って、生活を便利にしましょう！

WCE blog

早稲田大学公認　総合デジタル創作サークル　早稲田コンピュータエンタテインメント