こんにちは！
私は日々業務でパソコンと格闘しており、効率よく仕事をするためにショートカットをできるだけ覚えたいと思っています。しかし、使わないとすぐに忘れてしまう...
ショートカット一覧マウスパッドや壁紙といった便利なものもありますが、自分が実際に知りたいショートカットが載っていなかったり、使いたいときにいちいちWeb検索するのも手間です。そこで、サクッとショートカットを検索できるWebアプリを作ってみました！
WEBアプリ完成品
※試作品の為、ショートカットのカテゴリは整理途中。登録は現在中止しています。
このアプリで何ができるの？
シンプルに言うと、使いたいアプリのショートカットをサクッと調べられ、
自分でショートカットも記録することができます。
名付けて【ショートカットの達人】✨
できること
- 📱 使いたいアプリのショートカットをパパッと検索
- 🔍 メニュー別に「コピー系」「編集系」などカテゴリで絞り込み
- ✏️ 新しく見つけたショートカットを追加・保存
- 📋 「全部見せて！」モードでアプリごとのショートカット一覧表示
使った技術
- Google Apps Script（GAS）
- Google スプレッドシート（データベースとして活用）
- HTML / CSS（フロントエンド）
- ChatGPT（コード生成支援）
作り方
1. 検索の元データをスプレッドシートで作成 📊
スプレッドシートには以下の列を設けています：
- アプリ名（Excel、Word、Chrome など）
- メニュー（ファイル操作、編集、表示など）
- 操作内容（コピー、貼り付け、全選択など）
- ショートカットキー（Ctrl+C、Alt+Tab など）
2. Webアプリ用コードの作成 📝
Google Apps Script(GAS)で2つの主要ファイルを作成します。
１．検索用のGASコード（コード.gs）
Webアプリを動作させるバックエンドスクリプト
２．Webアプリ表示用のHTMLコード（index.html）
ユーザーインターフェースを提供するフロントエンド
各コードは、ChatGPTなどの生成AIを活用して効率的に作成しました。
3. 階層構造で直感的な検索を実現 🔍
単にアプリの一覧を表示するだけでは、目的のショートカットを見つけるのが大変です。
そこで、スプレッドシートのデータをアプリ名 ➡ メニュー ➡ 操作内容という階層構造で整理し、ユーザーがステップバイステップで絞り込める設計にしました。最終的に必要なショートカットだけが表示されるので、効率的に情報を見つけられます。
4. ユーザー自身によるショートカット追加機能 ✏️
新しく発見したショートカットや、特に覚えておきたいショートカットをアプリ上から直接登録できる機能を実装しました。アプリを選択し、各項目（メニュー、操作内容、キー組み合わせ）を入力して登録ボタンを押すと、元データのスプレッドシートに自動的に追加されます。
5. 「全部見せて！」機能で一括表示 📋
「このアプリのショートカットを全部見たい」というニーズに応えるため、アプリ名をクリックするだけで全ショートカットを一覧表示する機能も追加しました。
作ってみた感想 🎉
今までありそうでなかった、自分専用のショートカット検索Webアプリを作ることができました。
特にこだわった点は
- 操作手順をシンプルに最小化
- スマホでもパソコンでもサクッと調べられるレスポンシブデザイン
- 自分が覚えたいショートカットを登録・管理できる柔軟性
- 覚えたショートカットはスプレッドシートから削除して、常に「覚えるべきリスト」を最新に保てる
また、スプレッドシートのデータ内容を変更すれば、英単語帳や資格試験の暗記用アプリなど、様々な学習ツールとしても応用できると考えています。
今後の展望 💭
- 検索APIや生成AIのAPIを組み込んで、より高度な検索機能を追加
- ショートカット登録画面のUX/UI改善
- デザインをよりモダンで使いやすいものに刷新（現状はシンプルすぎる...😅）
- よく使うショートカットのお気に入り登録機能
- ユーザー別プロファイル機能の追加
生成AIの活用により、WebアプリはGASを使って比較的簡単に作れるようになりました。完全自動生成のAIツールもありますが、自分専用の便利ツールを作るなら、GASとスプレッドシートの組み合わせがコスト面でも開発スピードの面でもちょうど良いバランスだと実感しています。
この「ショートカットの達人」ぜひご自身の業務に合わせてカスタマイズし、最強の相棒としてご活用ください！