最近は「ChatGPT-4o」が公開されたり、SiriがChatGPTと連携したり、話題が途絶えないAIですが、新しいもの好きな私はもちろんこのAIというビッグウェーブに乗ることにしました。
ということで、ChatGPTやGeminiなどを搭載した、最新のコードエディター「Cursor」を使用して、時計のWebアプリケーション「nanji（読み：なんじ）」を制作しました。
AIを搭載したコードエディター「Cursor」とは
まずタイトルにある「AIを搭載したコードエディター『Cursor』」が何かについてご紹介します。まあその名の通り、ChatGPTなどの生成AIを搭載したコードエディターになります。
コードエディターでいうと、僕は普段VS Codeを用いていますが、Adobe Dreamweaverやさくらエディターなどあります。これらのエディターは当然ではありますが、自分の手でソースコードを入力します。
しかし、この「Cursor」は、極論コードを入力しなくても良くなります。ChatGPTなどのAIに「こんなのつくってよ」と伝えれば、AIがコードを書いてくれるんです。これを使って「人の仕事がAIに奪われる未来」をひしひしと感じました。。。つらい。
詳しい使い方はYouTuberの方が紹介してくださっているので、ぜひ下記の動画をご覧ください。
生成AIでは度々著作権や肖像権など権利の問題が話題になりますが、この記事の公開時点（2024年6月14日）では、Cursorで生成したコードはユーザーのものとなり、商業目的での利用も含めて自由に利用できると公式サイトに記載があります。
ということはクライアントワークでも問題なく使用できるということ。これは素晴らしい。
時計Webアプリ「nanji」の紹介
前置きが長くなりましたが、ここから今回制作した「nanji」についてご紹介します。
「nanji」の機能
nanjiの機能としては、メインの「時計」機能はもちろんのこと、アラームとタイマー機能もつけました。
時計の画面では、画面をクリックすると下部のナビゲーションが非表示となり、シンプルに時間だけが表示されるようにしています。タブレットやスマホなどでシンプルに時間だけ表示させたいというときに便利かなと。
アラームでは「時刻」と「タイトル」、「メモ」を入力でき、リマインダー代わりとしても使えるようなものにしました。たとえば「10:00に友人と待ち合わせ」とか、「18:00に買い物、買うもの：人参・じゃがいも」のように、買い物のメモとしても使えるかななんて。
タイマーはもうシンプルに時間を設定してただただカウントダウンするだけですね。一時停止ができたり、途中で不要になったらタイマーを削除することもできるようにしています。Androidに標準搭載されている時計アプリを参考にしているので、Androidユーザーの方は使いやすいのではないかと思います。このタイマー機能は後述しますが、ちょっと改善すべき点があります。。。
アプリ全体のことですが、背景には空をイメージしたグラデーションを使用しています。日の出の時間では日の出っぽい空、日中は青空、夜は夜空をイメージしたグラデーションにしています。アプリを起動した瞬間に背景の色で大体の時間が分かればなと思いこのような仕様にしています。
また、PWAにも対応しており、Android Chromeの方は右上の三点ドットをタップし「アプリをインストール」を押下していただくと、ホーム画面にアイコンが追加されネイティブアプリのように機能します。
改善すべき点
バグがある状態でリリースするなという話ですが、アジャイル開発ということで許してください（言い訳）。
画面遷移をするとタイマーがリセットされる
これが一番改善すべき点だと自認しています。タイマー画面でタイマーをセットした後に、時計画面やアラーム画面などに遷移をすると、タイマーが動作を停止・リセットされます。
これなぜ改善できないかというと、僕に学がないからです（自白）。AIに「タイマーつくってちょ」と言ったらつくってくれたのですが、残念ながらこれを修正する学が私にはございません。
Vue.jsというフレームワークを使用しているのですが、僕自身これを学習する機会が少なく、普段の業務でも使用しないので、まだ知識が少ないんです。。。
ですがこの「nanji」を制作して、Webアプリ制作が楽しいということに気がついたので、きちんと学習して修正しようと思います。
背景のグラデーションが表示されるまでのちらつき
アプリを起動した瞬間、一瞬ですがnanjiのロゴカラーが背景に表示されます。これは原因らしきものを特定できているので、修正しようと思います。原因が考えているものと違ったら修正に時間がかかるかもしれませんが。。。
タイマー・アラーム完了時の通知
公開前に家族などに使ってみてもらったのですが、「タイマー・アラームが終わった後になんか知らせてくんないの？」と言われました。現状音楽を流すことで通知はしていますが、ミュート状態だとたしかに気が付かないですよね。。。
ということで、プッシュ通知にしようか、アプリ内でのトースト通知にしようか検討中ですが、これも近いうちに実装できればと思っています。
デザインのお話
「Cursor」を使ったものの、Cursorにつくってもらったのはコードで、UI・UXに関わる部分は自分で追記しています。
ロゴとビジュアル
ビジュアルですが、こちらもグラデーションを使用しています。「グラデーション好きすぎだろ」とツッコまれそうですが、前述の「時刻に合わせてアプリの背景色を変える」ということは企画段階から考えていて、それをビジュアルでも再現した形です。
左上あたりの空色は日中の青空を、下の方のオレンジは日の出・日の入りごろの空を、右上あたりの紫は夜空をイメージしたものです。
ロゴはシンプルに時計マーク。ホーム画面に追加したときなどに「時計アプリ」であることをアピールするためです。
タイプはシンプルに。最近のトレンドですよね。HelveticaとかDINとか、スタンダードなフォントを使用したロゴタイプが多くなっているので、それに乗っかっています。「JI」だけ大文字なのがポイントです。
名称の話
名前「nanji」ですが、読みはそのまま「なんじ」です。「今って『なんじ』だろう」というときにこのアプリを開いてもらえればと。
シンプルに「時計」とか「Clock」とかでもよいかなと思ったんですけど、Androidでプリインストールされている時計アプリの名前が「時計」だし、iPhoneの時計アプリの名前も「Clock」みたいなので、かぶりを防ぐために「nanji」にしました。
変に凝った名前だと何のアプリなのか分からなくなるしシンプルが一番ということで。
過去に「僕がXを嫌う理由」という記事を書きましたが、その中でも名前については話していますね。名前から「どんなことができるんだろう」と簡単に想像できる方がユーザーにとっても良いのではないかと思います。
あと愚痴ですが、「イオンウォレット」と「Googleウォレット」の略称がどちらも「ウォレット」なので、僕のスマホには「ウォレット」という名前のアプリが2個入っています。アイコンがあるとはいえ、一瞬「ん？」となるので、どちらか変えてほしい。
LPもつくりました
そして、この「nanji」を簡単に紹介するLP（ランディングページ）も制作しました。
できること・特長・基本情報を載せただけのシンプルなものですが、今後は更新情報もここでお知らせしようと思っています。
あと今回ファーストビューのアニメーションもいつもより遊んでいます。nanjiのおしゃれ感、心地よさというものを体験していただきたく、曲線をつかったりしています。
自慢じゃないんですけど、このランディングページ、先週の土曜夜にデザイン制作を始めて、日曜にコーディング・サーバーにアップしたので、実質1日で公開が完了しています。
自主制作なのでクライアントさんとのやり取りがないのもありますが、「まだまだ人間だってAIに負けてねえぞ」ということをAIに見せつけました。とはいってもAIが作ったコードをまともに理解できていない時点ですでに敗北していますが笑。
AIにまかせっきりはNG
笑ってますけど、これは笑い事じゃないですね。コードを理解できていないって言うことは、今後機能を追加したり、バグが発生して修理しようというときに、「あれ、どこ触ればいいんだろう」と編集箇所が分からないということになります。
分からないまま適当にいじって、どんどんどんどん複雑になったり、つぎはぎだらけになったり。。これは良くないですよね。
そんなことをやっている僕が言うのもなんですが、AIにすべてまかせっきりはダメだと思います。ちゃんと知識を持った人が、あくまでも「効率化」を目的として使うべきだと思いました。
どうやって作るかを分かっていても、1からコードを書くのは億劫だし、スケジュールもあまり余裕がない。そんなときに使うべきものだと個人的に思いました。「お前が言うなよ」と総ツッコミが入りそうですが。
AIをがっつりと使ったのはこれがはじめてですが、いやはやすごいですね。何の知識がなくてもWebアプリを簡単に作れるのですから。AIが人間を超えるのは2045年と言われていますが、本当ですかね？なんかもう2030年頃には超えていそうな気がします。。。
Cursorは回数制限こそありますが、この記事の公開時点（2024年6月14日）では無料で使えるので、ぜひこのすごさを体験してみてください。
