【GAS不要】Googleスプレドシート クリックで表示切り替え出来るToDoリストを作ろう

少し前に xに こんなネタを投稿しました。

今回はこの「Googleスプレッドシートでクリックで「完了」や「未完了」の表示切替が出来るToDoリストの作り方」を紹介します。

先週のnoteは、タイムリーな Gemの共有機能実装について、手順や注意点などを中心に書きました。（スキ多数感謝です）

クリックで表示切替できるToDoリスト

今回の完成イメージは 👇こんな感じです！

いわゆるインタラクティブなToDoリスト、これがGAS無しで標準機能と数式だけで実現できます！

クリックで表示切替できるToDoリストの作り方

今回使ったGoogleスプレッドシートの機能や関数が以下になります。料理で言うところの材料ですね。

• 交互の背景色

• チェックボックス

• 条件付き書式

• フィルタビュー（旧フィルタ表示）

• ハイパーリンク機能

• SUBTOTAL関数

これらを総動員することで、GAS無しでクリックでタブ表示切替風のTodoリストを実現しています。

作り方を解説していきましょう。

1. 交互の背景色でベースの表を作る

まず、こんな感じで適当にA2:C20 に ToDoリストの表を作ります。

1行目は切り替え用の行
2行目は見出し

とします。2行目は太字としておきましょう。

今回は見出しの背景色を切り替え制御するので、テーブル機能は使いません。

ちなみにテーブルにした場合でも、見出し行は条件付き書式で制御できるんですが、

このピョコっと飛び出た部分（テーブルタブ）の色をコントロールできません。（そもそもコレ 邪魔になることが多い。。。）

このテーブルのぴょっこり部分、非表示設定できるといいんですけどね。

というわけで便利なテーブル機能は今回はお休みです。

👇とりあえず試したい人はサンプルデータをコピペで使ってください

サンプルデータ

⚠️未完了	✅完了	📝全て
完了	ToDo	期限
	歯を磨く	8/25
	顔をあらう	8/29
	よく噛んで食べる	9/1
	買い物に行く	8/30
	天気予報をチェック	9/5
	部屋の掃除	8/31
	お風呂に入る	8/28
	宿題をやる	9/10
	散歩に行く	8/26

次に 範囲A2:C20（最終行は必要に応じて拡張してください）に交互の背景色を設定。

この時のヘッダーの色が後で全てを表示する時のタブの色です。グレーや赤系は避けて青系か緑を選択しましょう。

1行目の切り替えタブとして利用する3つのセルを塗りつぶします。

色はお好みでアレンジを。

さらに切り替えタブの文字色も設定しておきましょう。

ここは非選択時の色としたいので、白ではなく目立たない明るいグレー2を選択。

文字は後でもう一度設定する必要があるんですが、とりあえず白系の方が見やすいので一旦先に設定します。

2. チェックボックスを挿入しカスタマイズ

チェックボックスは

挿入 ＞ チェックボックス

で設定するのが一般的ですが、今回は後の処理の都合で 適当にA列の範囲（ここでは A3:A19）を選択して

データ ＞ データの入力規制

から ルールを追加で、

チェックボックスを を選らび、

「カスタムのセル値を使用する」にチェックを入れて

として「完了」とします。

チェックありなしを 1, 0 としたのは、数値を後で数式で利用する為です。

👆 Googleスプレッドシートのセル内 チェックボックスに関しては、コチラで詳しく触れています。

3. 条件付き書式でチェックした行のグレーアウト設定

次に完了したタスクがわかるように、チェックを付けたらその行をグレーにする条件付き書式を設定しましょう。

A3:A19を選択して 表示形式 ＞条件付き書式から

「条件を追加」を選択。

書式ルールは カスタム数式を選び、

 =$A3

とします。

条件付き書式でカスタム数式を使う時のポイントは 👇こちら。

丁寧に書くと =$A3=1 なんですが、 チェックありの1はTRUE、チェックなしの0は FALSEとして扱われるので、

=$A3 だけでOK。

ここで 行単位で見た時に、A列のチェクボックスを条件として A～Cの複数列に条件付き書式を設定したいので、

列を絶対参照　$A
行は相対参照　3　（👈 条件付き書式を適用する範囲の開始行）

と、列を絶対参照で記述して固定するのがポイントです。

書式は文字色、塗りつぶしの色を以下のように設定

テストしておきましょう。

チェックをつけた行の文字と背景がグレーになりましたね。

あとで表示切替の検証をするので、ダミーで幾つかチェックを入れた状態にしておきましょう。

4. フィルタビューで各画面の表示を設定

リストの表示切替はフィルタビュー（フィルタ表示）を使います。

フィルタビューは非常に優秀な機能で

こんなことが出来ます。

👇超絶便利なフィルタビューについては、全5回のマガジンにまとめています

2行目の見出しを含めた広めに取得した範囲（とりあえず A2:C200とする）を選択した状態で

フィルタ表示を作成を選択。

3つのフィルタ設定を作成していきます。

未完了 は、 フィルタ条件として A列が0（チェック無し）で、

B列が「空白でない」とします。

「空白ではない」は 値でフィルタではなく、

必ず「条件でフィルタ」から「空白はない」を選択しましょう。

C列の期限は、未完了の場合は古いものがよりヤバいので、

昇順で並び替えとして 古いものが上に表示されるとしましょう。

正しく表示がフィルタされたら 右上の「名前を付けて保存」を押して

ビューの名前を「未完了」として保存。

左上のフィルタビューの名前が 「未完了」という表示になればOKです。

同じく「完了」のフィルタビューを作成するのですが、

ここは新規ではなく、そのまま ビューを複製から作ると楽です。

「完了」したタスクだけを表示するので、A列のフィルタを 1（チェックあり）に変えて

完了ビューでは、C列の期限は 終わった中でより最近のものが上にくるように「降順」としましょう。

フィルタ名は左上をクリックすると、直接編集できます。（自動保存です）

「完了」のフィルタビューも完成です。

最後に 全てそのまま表示するフィルタビューを作成します。

内容はフィルタビュー無しと一緒なのですが、この後設定するハイパーリンクによる切り替えでは、他のフィルタビューには切り替えできても、フィルタビューなしの画面に切り替えることが出来ません。

その為、そのまま表示させるフィルタビューが必要となります。

一旦 ✖で フィルタビューを終了して。

再度 A2:C200を選択して 「フィルタ表示を作成」を選択。

なにもせず「全て」と名前を付けて保存。

フィルタビューをクリックした際、設定した3つのビューが保存されていればOKです。

5. フィルタビュー毎のハイパーリンクを設定

名前をつけて保存したフィルタビューは、それぞれ URLの末尾に fvid=**** が付いたユニークなURLが付与されています。

これを1行目のタブ用セルにハイパーリンクとして設定していきます。

未完了のフィルタビューを表示させた状態で、URLをコピーして

A1の未完了のセルを　右クリック ＞ リンクを挿入 として

URLを貼り付けて 「適用」をクリック

こんな感じになればOK。文字はハイパーリンク化で青＋下線になってしまいます。

ちなみに同じスプレッドシート内なので、URLは全部でなく、

このようにURLの末尾部分だけでもハイパーリンクとして機能します。

同じスプレッドシート内の特定セルにジャンプするハイパーリンクを作る時と同じ要領ですね。

他の「完了」と「全て」のビューも、同じようにハイパーリンクを設定

最後にハイパーリンク化で青字になってしまった A1:A3の文字色を 明るいグレー2に再設定

ハイパーリンクで表示が切り替わることを確認しておきましょう。

6. 条件付き書式の為のSUBTOTAL関数を使った数式を作成

ここから細かい見た目を制御する設定に入っていきます。

クリックでフィルタ表示を切り替えた際に2行目の見出し行の色を変えたいのですが、これを実現する方法が

SUBTOTAL関数 + 条件付き書式

です。

フィルタで非表示となったセルを計算対象から除外するSUBTOTAL関数の特殊な仕様、これはフィルタビューでも機能します。

クリックによるフィルタ表示切替、連動してSUBTOTAL関数の結果の数値が変化、これを条件付き書式のカスタム数式で参照することで、クリックと連動させて見出し行を変化させましょう。

ただし注意点があって、SUBTOTAL関数の計算は条件付き書式内で式を記述しても機能しません。

作業セルに一度計算結果を出力して、その結果を条件付き書式で使用する必要があります。

とりあえず 同じシートの1行目または2行目の適当なセル2つを作業セルとして使いましょう。

今回はE1とF1を使うとして、それぞれ

とします。こうすることで

未完了フィルタでは、A列は全て0（チェック無し）である為、F1の最大値が0となります。

同じように完了フィルタでは、

A列は全て1（チェックあり）である為、E1の最小値が1に。

全てフィルタでは、

A列に0と1が混在するので、E1は0、F1は1となります。

この結果（セル）を条件として条件付き書式で表示を切り替えましょう！

※1件もチェックがない状態や全てチェック済みの場合は正しく機能しません。これらのケースはそもそも切り替えがあまり意味を持たないので条件付き書式の切り替え対象外としています。

7. 見出し行の条件付き書式を設定

まず見出し行のA2:C2の条件付き書式を設定しましょう。

初期値は「全て」の時のタブの色としているので、「未完了」と「完了」の2つのフィルタビューのケースだけ 条件付き書式を設定すればOK。

まずE1（MIN）が1になるのは「完了」ビューの時なので、

カスタム数式　 =$E$1
太字
文字色 白
塗りつぶし 暗いグレー1

とすればOK。

ここも 数値1はそのままTRUEとして扱われるので 　=$E$=1 としなくてもOKです。

カスタム数式のセル参照を絶対参照にするのを忘れずに！

次に「未完了」の設定ですが、1つ目の「完了」を設定したら「完了」ボタンを押すのではなく、その下の「条件を追加」を使うと 同じ範囲と同じ書式設定を引き継いで連続で違う条件設定が可能です。

未完了フィルタではMAX （F1セル）は0となるので

カスタム数式の部分を =$F$1=0　として、塗りつぶしをレッドベリーに変更。

あとはそのままで「完了」とします。

ここで 以下のような「注意表示」が出ますが、

今回条件付き書式を設定しているのはフィルタの見出しなんで、並び替えの影響はありません。気にしなくてOKです。

リンクを押してビューを切り替えた時、見出し行の色が連動するかを確認しておきましょう。

選択したビューに合わせて見出しの色が変更できました。

8. 1行目のタブセルの条件付き書式設定

最後にタブとして利用している1行目の条件付き書式を設定します。

初期値の文字色を白ではなく 明るいグレー2としているので、選択時に文字色を白の太字とすることで際立たせます。

式を整理してもう少しシンプルに出来るんですが、それは次回修正するとして、とりあえず今回は 未完了・完了・全て の３パターンを1つずつ条件付き書式を設定しましょう。

このように、A1,B1,C1 それぞれのセルに条件付き書式を設定。

書式は 太字、文字色：白、背景色：なし　とします。

👆選択したビューが太字・白文字で目立つようになりましたね！

完成したら作業セルは、列の非表示で隠しておきましょう。

この条件付き書式の作業セルの数式を整理して、別シートに移す方法は次回紹介します。

以上、8つの工程を経て

未完了、完了、全て をクリックして 動的なHTMLっぽいタブ切り替え風を実現した Todoリストを Googleスプレッドシートで、GAS無しでつくることが出来ました～！

ToDoリストをさらにブラッシュアップ

今回はここまでとしますが、

実はもう一段階機能アップした ToDoリストが作れます。

条件付き書式で利用する作業セルを整理して 別シートのA2:C2セルに集約した上で、

👆本日と日付を比較し期限を超過した未完了のタスクを赤字表記に切り替えできる 期限超過スイッチ（チェックボックス）を実装。

また、A列を作業列とすることで、ToDoリストの次に入力する行だけを条件付き書式でフォーカスし、それより下の行のチェックボックスや プルダウンを非表示に。

担当者列を追加したことでチームで利用も可能に。（一人で使う場合はここはカテゴリとして利用可能）

ビュー切り替えと合わせて担当者での絞り込みも出来ます。

そして、たまに知恵袋でも「これをやりたい！」という書き込みがある、タスクの 入力ボックス（入力行）が常に一番上に表示される機能 👇

これを「全て」タブに実装します。

入力後 「全て」のリンクをクリックすれば、入力たタスクは一番下に追加され、再び1番上が入力行になる仕様となっています。

これらも GASなしで出来るんです！！

次回は、これらとその他の機能も追加した 改良版スプレッドシートToDoリストについて書きたいと思います！

実用的か？と言われると・・・

最後に補足です。今回は ToDoリストをGoogleスプレッドシートで自作してますが、

普通に使う分には Todoリストは、スマホアプリもある GoogleのTodoリストを使っても十分使いやすいですし、

ToDoリストアプリを自作する場合は、 Gemini Canvasで作成したり

AppSheetで作る方法もあります。

本来はスプレッドシートでここま作り込むようなものじゃないかもｗ

Googleスプレッドシートの機能や関数を学びつつ、ツールづくりを楽しむ お遊びだと思ってください。

次回、後編！