「無料のエディタって、なんでこんなに広告が多いんだ……？」
ブログを書いていると、そんな小さなストレスが積み重なることがあります。
今回は、そのストレスがきっかけになって、とうとう自分専用の「シンプルブログエディタ」をAIに作ってもらいました。
しかも、ただHTMLファイルを作っただけではありません。
GitHubから起動できるようにして、スマホのホーム画面には自分で用意したアイコンまで登録。
やってみたら、思っていた以上に「自分で作るって面白い！」という結果になりました。
■ 無料エディタ、便利なんだけど……
私はブログを書くとき、無料のエディタを使っていました。
無料ですから、もちろんありがたい。
でも、無料サービスには広告が表示される。
普通の広告なら、まあ仕方ないかなと思います。
ところが、ときどき「これは奥さんに見られたらまずいぞ」という海外のセクシーグッズ系広告まで出てくる。
「いやいや、今ブログを書いてるだけなんだけど……」
慌ててエディタを強制終了。
ブログを書くために開いたのに、広告を気にしてアプリを閉じる。
これはさすがに本末転倒です（笑）。
■ 普通の広告でも、意外と面倒
セクシーグッズ広告だけが問題ではありません。
普通の広告でも、
「ちょっと触れただけなのに別のページへ飛んだ！」
ということがあります。
戻る。
エディタに戻る。
また書く。
そして、うっかり広告をタップ。
また飛ぶ。
……。
ブログを書くより、広告との戦いをしている時間のほうが長くなっている気がします。
さらに困ったのが、広告スペース。
以前はそれほど気にならなかったのに、
「なんか広告、大きくなってない？」
と思うことが増えてきました。
広告が大きくなる。
そのぶん、文章を書くスペースが小さくなる。
スマホでは、この差がけっこう大きい。
■ だったら、自分で作ってみよう
そこで、ある日決断しました。
「もう、自分用のエディタを作ろう」
私はプログラミングの専門家ではありません。
でも、最近はAIに相談しながらHTMLやJavaScriptを作ることができます。
そこで今回は、比較的空いている印象だったGemini Pro（無料）を使ってみることにしました。
■ ところが、仕様を考えてみたら……
ここで、ちょっと面白いことに気づきました。
「ブログを書くためのエディタに、どんな機能が必要なんだろう？」
改めて考えてみる。
文字を書く。
そして……。
コピーしてはる。
「あれ？」
意外と思いつかない（笑）。
もちろん、本格的なエディタなら、文字装飾や画像管理など、いろいろな機能が考えられます。
でも、私が欲しかったのは、あくまで「ブログを書くための自分用エディタ」。
余計な機能はいらない。
広告もいらない。
とにかく文章を書いて、必要なところをコピーできればいい。
そう考えると、ものすごくシンプルなエディタで十分でした。
■ プロンプトにしてAIへ丸投げ……いや、依頼！
そこで、欲しいものを文章にしてプロンプトにしました。
そしてGemini Proに、
「こんなエディタを作ってください」
と依頼。
AIにコードを書いてもらい、実際に動かしてみる。
うまくいかなければ、また修正をお願いする。
この繰り返しです。
昔なら「アプリを作る」と聞いただけで、
「そんなの無理！」
と思っていたかもしれません。
ところが今は、AIに相談しながら少しずつ作ることができます。
今回のエディタも、最初から完璧なものを作ったわけではありません。
「ここをこうしたい」
「これはいらない」
「スマホで使いやすくしたい」
そんな感じで、少しずつ自分の道具に近づけていきました。
■ さらにGitHubから起動できるようにした
せっかく作ったHTML版エディタ。
スマホのディレクトリに置いておくだけでは、使いにくい。
そこでGitHubに置いて、そこから起動できるようにしました。
これならスマホのブラウザからアクセスできます。
そして、ここからが今回ちょっと楽しかったところ。
「これ、ホーム画面からアプリみたいに起動できないかな？」
Geminiに聞いてみると、HTMLでも「アプリっぽく」使える仕組みがありました。
#忙しい人はコチラから
■ スマホのホーム画面に自分のアイコンが！
Step1.アイコン用の画像を用意します。
今回はChatGPTでアイコン画像を作りました。
ファイル名は、
icon.png
にして保存。
Step2.GitHubに登録しているindex.htmlの<head>～</head>の中へ、アイコンとアプリ化の設定を追加します。
<title>シンプルブログエディタ</title>
の下あたりに、次の設定を入れました。
<link rel="icon" href="icon.png">
<link rel="apple-touch-icon" href="icon.png">
<link rel="manifest" href="manifest.json">
Step3.manifest.jsonというファイルを作ります。
中身はこんな感じです。
{
"name": "シンプルブログエディタ",
"short_name": "エディタ",
"start_url": "./index.html",
"display": "standalone",
"background_color": "#f4f5f7",
"theme_color": "#2563eb",
"icons": [
{
"src": "icon.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icon.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
ここで重要なのが、
"display": "standalone"
という部分。
これによって、対応する環境ではブラウザのURLバーなどを表示せず、アプリのような見た目で起動できるようになります。
■ GitHubにアップロードしてそこからインストール
あとはGitHubのリポジトリに、
・index.html
・icon.png
・manifest.json
をアップロード。
index.htmlは変更したものに更新します。
そしてスマホのブラウザでGitHub Pagesのページを開き、メニューから、
「ホーム画面に追加」
または
「アプリをインストール」
などの項目を選びます。
すると……。
ホーム画面に、自分で作ったアイコンが登場！
タップすると、ブラウザの枠がない、スッキリした専用アプリのような画面で起動できます。
■ 作ってみて分かったこと
今回、自分でエディタを作ってみて、一番感じたのは、
「自分が本当に必要なものだけ作ればいい」
ということでした。
市販のソフトや無料サービスは、多くの人が便利に使えるように、たくさんの機能が入っています。
それはもちろん便利です。
でも、自分専用なら話は別。
私の場合、ブログを書く。
必要ならコピーする。
それくらいシンプルでも十分でした。
そして、広告を気にしなくていい。
広告を間違ってタップする心配もない。
書込みスペースを広告に占領されることもない。
「だったら最初から自分で作ればよかったじゃん」
という結果になりました（笑）。
■ HTMLでも「アプリ」みたいに使える
今回の制作で、もう一つ大きな学びがありました。
それは、
「HTMLでも、スマホでアプリのように使えるんだ！」
ということ。
もちろん、HTMLをそのままネイティブアプリにしたわけではありません。
でも、GitHub Pagesで公開し、manifest.jsonなどを設定することで、対応するブラウザではホーム画面からアプリのように起動できます。
これなら、
「ちょっとした自分専用ツール」
をAIに作ってもらって、スマホで使う。
そんな遊び方もできそうです。
■ そして、次回は……
ブログを書くために作り始めたエディタ。
最初は、
「広告が邪魔だから、自分で作ろう」
という、かなり単純な理由でした。
でも、実際に完成してみると、
「自分で欲しい道具をAIと一緒に作る」
という面白さに気づきました。
AIを使えば、プログラミングの専門家でなくても、自分の小さな不満を「自分専用ツール」に変えられる。
これは、けっこう面白い時代になったなと思います。
……とはいえ。
いつまでもエディタを作って遊んでいるわけにはいきません（笑）。
次回は、いよいよ本業（？）に戻ります。
そう。
ゲーム作りです。
■ まとめ
今回やったことをまとめると、
・無料エディタの広告が気になった
・広告を間違ってタップするのが面倒だった
・広告スペースが大きくなり、書込みスペースが減った
・自分用のエディタを作ることにした
・Gemini Pro（無料）にプロンプトで制作を依頼した
・必要な機能を考えたら、かなりシンプルでよかった
・GitHub Pagesから起動できるようにした
・icon.pngを用意した
・manifest.jsonを追加した
・スマホのホーム画面に登録した
・HTMLでもアプリっぽく使えることを学んだ
「ないなら作る。」
しかも、AIと一緒に。
今回のエディタ作りは、そんな発想の面白さを実感する出来事になりました。
自分用でとても人さまに見せられないので、今回はリンクなしで失礼します🙇
さて、次はゲームを作ります😊