GASでスプレッドシートを方眼紙にして、ドット絵アニメーションに挑戦

Published 2022-04-12

Updated 2022-04-13

Excel方眼紙とは

Microsoft Excelに代表されるセル結合機能を有した表計算ソフトで、縦横同幅程度の狭幅に設定したセルを方眼紙に見立てる様式。
上記の様式を用いて、セル結合機能と罫線機能を用い、ワードプロセッサ・DTPソフト代わりとして文書作成に用いる、日本独特のビジネス文書作成習慣。

このような様式はネットスラングでネ申エクセル（神エクセル）と呼ばれていたが、この様式を問題視する学術関係者や国会議員などにも広まっている。

根絶やしにされてご存じない方がいるかもだが、Excel方眼紙を用いたドキュメントは非常に嫌われており、問題視されている。今回は文書作成に用いるつもりはなく、ドットフォントやドット絵（ピクセルアート）を作るのに便利そうなので、Googleスプレッドシートを神エクセルにしてみたい。

GASでGoogleスプレッドシートを神エクセル化（方眼紙化）

手動でもまったく苦にならなそうな作業だが、GAS（Google Apps Script）で方眼シートにする。

GASとは

Google Apps Scriptとは、Googleによって開発されたスクリプトプラットフォームである軽量のアプリケーション開発のためのGoogleのワークスペースプラットフォーム。主にGoogleのサービスを自動化するスクリプト言語である。

Googleスプレッドシートで主に使われるが、それ以外でも利用ができる。非常に適応範囲が広いので、例えば、SNSに返信が届いた場合Gmailに届ける。Gmailで期限の近いタスクを自分のSlackで表示する等のこともできる。

出典：フリー百科事典『ウィキペディア（Wikipedia）』

コード紹介

スプレッドシートの操作準備
const spreadSheet = SpreadsheetApp.getActive(); //アクティブなスプレッドシート
const sheet = spreadSheet.getActiveSheet(); //アクティブなスプレッドシートのアクティブなシート

方眼シートにする関数
function hougan() {
  const colNum = sheet.getMaxColumns(); //列数を取得
  const rowNum = sheet.getMaxRows(); //行数を取得
  sheet.setColumnWidths(1, colNum, 10); //全列の幅を10に
  sheet.setRowHeights(1, rowNum, 10); //全行の高さを10に
}

メニュー作成
function onOpen() {
  const ui = SpreadsheetApp.getUi();
  const menu = ui.createMenu('神エクセル化'); //メニュー作成
  menu.addItem('実行' , 'hougan'); // 作成したメニューにアイテムを追加
  menu.addToUi(); // メニューをUiクラスに追加
}

さっそくGASを実行して方眼シートにして、ファミコンのスーパーマリオを模写してみた。

ドット絵アニメーションに挑戦

テスト1

まずはセルの背景色を36色に変更して、最初の色に戻す。
SpreadsheetApp.flush();を使ってリアルタイムに反映する。

const spreadSheet = SpreadsheetApp.getActive();
const sheet = spreadSheet.getActiveSheet();

const colors = ['#E60012','#E60029','#E6003C','#E5004F','#E50061','#E40072','#E4007F','#CC0080','#B00082','#920783','#711485','#4C1C87','#1D2088','#013B96','#0052A5','#0068B7','#007DC8','#0090DA','#00A0E9','#00A0CF','#009FB3','#009E96','#009C79','#009A5E','#009944','#0CA53D','#4FB331','#8EC31F','#BBD400','#E2E300','#FFF100','#FED600','#F9B800','#F39800','#EE7400','#E94C07'];

function test1() {
  const animArea = sheet.getRange(1,1,8,8);//背景色を変更させるセル範囲
  for(let i=0; i<36; i++) {
    animArea.setBackground(colors[i]);
    SpreadsheetApp.flush();
  }
  animArea.setBackground(colors[0]);
}

テスト1では1秒間に3～4フレームぐらい。

テスト2

もっと速くフレームが切り替わるようにしたいため、あらかじめシート内に各背景色に塗ったセルを用意して、スクロールで切り替える方法にする。

const spreadSheet = SpreadsheetApp.getActive();
const sheet = spreadSheet.getActiveSheet();

function test2() {
  for(let i=2; i<37; i++) {
    let komaNum = i*67-1;//シートと表示する画面に合わせて数値は調整
    sheet.getRange(komaNum,27).activate();//アクティブなセルを変更してスクロールさせる
    SpreadsheetApp.flush();
  }
  sheet.getRange(1,27).activate();
}

セルを直接編集するよりは速くなった。

この方法で1秒間に5～6フレームぐらいがマックスで期待できそうな感じ。
本格的にアニメーションさせるには厳しそうな結果となった。

おわりに

ドット絵を書くのには方眼シートは便利です。

ついでに調べたコンピューターやゲームの表現技術として発展したドット絵（ピクセルアート）やファミコン時代の容量削減の工夫などは面白かった。

ただの趣味は非効率で手間暇かかるから面白い。
もっと楽しい時間を作るために、次回はつまらない仕事をさくっと済ませるGASのコードを紹介したい。