サイト改修の背景と目的
iPadのことばかり話す、iPadオンリーのポトキャット、iPad Workersポトキャット。
今日は、ごとおはるな.comのトップページを改修したよって話をします。
改修?変えたってこと?
そう、変えました。更新したよ。
もともと、書いて考える技術っていう電子書籍を売るときに、どこで売ろうかなっていうのを考えて、
今回、実験的に個人サイトで売ってみようということで、
1からページを作って、ドメインを契約して、
クラウドフレアページズっていうサービスっていうかオプションみたいなのを使って、
簡単に言うと、今Obsidianで扱ってるファイルみたいなのを、
GitHub経由で、Gitでコミットすると、ページを更新してくれるみたいな、
そのシステムでページを作って、販売をしてたわけ。
ごとおはるな.comには、書いて考える技術の本のことしか書いてなかったのね。
ごとおはるな.comは書いて考える技術しかないのかってなってしまうから、全部にしたと。
で、もともとそれがKindle版になって、
普通にKindleへのページリンクで済むようになったら、
ページは変えようと思ってて。
ごとおはるな.comに、ごとおはるなさんとはこういう人です、こういうことやってます、みたいなやつにして、
そこから書く、今まで出した書籍とか、
ジャンプできるようなサイトにしようっていう計画はずっとあったわけ。
それが実際に本出したから、実際に着手して完成しましたっていうことなわけね。
AIとウェブテンプレートの活用
今、手元にデバイスとかある人は、
ごとおはるな.comを開いてもらうと、
なんか黄色いページがピューって出てくるみたいな。
あれってそういえば、俺スマホでしか見てないんやけど、
あのPCサイトの幅広とかでも同じ感じで出るってことやんね。
そうそう、大丈夫。
で、あれ自体はもうそのテンプレートとして配布してくれてるの。
テンプレート?ペラ1ページのテンプレートみたいなやつ?
そう、富永はるきさんっていうデザイナーさんなんだけど、
最近AIのことすごい強くて、
毎日そのAIと一緒になんかウェブサービス新しいの作りましたとか、
そのプロジェクトの中の一環で、
そのウェブのテンプレートページを作りました。
で、さらにそれをAIと一緒に育てていくことができますよっていう思想で。
ああ、もうその前提で配っているものってことね。
そうそう、もう無料で使っていいよ。
商用利用もOKだし、登録とかもいらなくて、
もうその人のページ行って、このテンプレートがいいって言ってダウンロードすれば、
もうそれだけで使えるみたいなのを配布してくれてて。
で、それをダウンロードして、
そこから自分用にカスタマイズしたいから、
AIを使って編集をするっていう。
もう手でコードなんて書かなくていい。
前の書いて考える技術のページを作った時も、
あれの時はVS CodeにGemini CLIでやってたかな。
うん。
で、こういうコンテンツ、アウトラインだけ渡して、
これを
画像を見せるの?
画像じゃない。
あ、ちゃうか。画像じゃないね。
だから言ったらマークダウンを渡せばいいみたいなイメージの構造的な。
そう、マークダウンの構造を渡して、
これをグラフィカルにコーディングしてくださいみたいな感じにしたら、
なんかできた。
なんかできた。
なんかできたっていうのが前の書いて考える技術のページで、
今もそれはページ遷移として残してあるとか、
下の階層の、
2ページに増えたってことね。
そうそう。
トップページが gotoharuna.comで、
そこの、
下に書いて考える技術がある。
そう、Worksって紹介、今までの実績みたいなので、
何個か並べてるうちのずっと線で考える技術のところをタップすると、
前にGeminiと作ったページがずらーっと出てくるって感じ。
これがさ、やっぱ、結局俺はやってないんだけど、
楽になったよね。
ついに本当に楽になったよね。
めちゃくちゃ楽になった。
で、今回この、
gotoharuna.comを作る時には、
試してみようと思って、
アンチグラビティって、
GoogleのVSコード。
そう、GoogleのVSコードを使ってやってみた。
あいつは、
もう俺触ってみたら、
カーソルと全く一緒やんていうか、
VSコードをラッパー、
ラッピングしてるだけやんていうやつやったんやけど、
確か安い?
ほぼ無料でいろいろ使えるんやんな、あれも。
個人サイト運営のコストと仕組み
今回、自分がやった内容に関しては、
完全に無料のままでできた。
あー、だからペラ一作るのに、
コンピューターがいるという前提はあるとして、
アンチグラビティがあって、
あとさ、
クラウドフレアでドメイン取っただけ?
お金かかったのって。
お金かかったのは、
クラウドフレアでドメイン代が、
年に2500円くらい。
うん、そんだけかな。
で、クラウドフレアページズは無料サービスなんやな、
ドメイン持っとったら。
ドメイン無くっても、
クラウドフレアなんたらかんたら、
みたいな感じのURLで寄ってれば無料でいける。
で、アクセスページビューとかにちょっと制限があるとか?
あー、確かそうかな。
1日のページビュー数に多分制限があって、
GitHubとかNetifyもそうだよね。
めちゃくちゃアクセスが多くなってきたら、
プロにしなよ、みたいな感じ。
いわゆるブログとか運営するには、
ちょっときついんだけど、
個人がポートフォリオサイトを作るっていう観点なら、
ドメインいらんかったら、
完全にタダで余裕ってことかな?
で、今データを置いてる場所は、
Gitを使っているので、
Git上のその容量というか、
Git上の容量。
Gitにアップロードするやん、なんか。
GitHubに入れて、
名前忘れちゃったけど、
同時に動くやつで、
クラウドフレアにアップするみたいなやつをやる?
クラウドフレアにはアップしてない。
GitHubから読んでるだけ。
そういうふうなの?
なんかちょっと分からないけど。
だから、サーバーみたいなのは一切借りてない状態?
それは分かるよ。
でも、データどこに置くのって話で、
Gitのサービス上に置いてるって。
あれ確か上限あったはず。
あれもGitも無料のあれだと。
だから、無限っていうわけではないけど、
簡単なサイトと、
あとその画像みたいなの?
だったら十分無料で運用できそう。
ドメイン代だけでいいよっていう意味では、
そういう個人で何かやるんだったら、
趣味も兼ねてっていうか、
実験も兼ねてっていうので、
十分試してみる価値はある。
あると思う。
今回、アンチグラビティ使ってよかったのは、
プレビューでさ、
HTMLファイルのソースコードと、
右側にプレビューが出て、
この要素についてチャットに送るみたいなのが、
クリックで選べるね。
グラフィカルの方に指示でも出せる。
そうそう。だからこのページの、
コードのここじゃなくて、
見た目のここを変えてで余裕でいける。
もちろんコードのここっていう選択範囲して、
それをチャットに送るみたいなのもできるんだけど、
プレビュー画面の方で、
要素を選択みたいなボタンを押すと、
デベロッパーモード、サファリとかの、
同じ感じのやつやん。
マウスオーバーするとさ、
ここがここみたいな。
四角がピコピコって動くやつやんね。
ここが今選べますみたいな感じの、
要素ごとの選択っていうのができるようになってて、
ここをこうしてほしいみたいな。
簡単に伝えることができる。
もうちょっと行間詰めてとか、
フォントをこんな感じにしてとか、
リンクを貼ってとか、
文章を変えてとか、
何でもいけるわけやん。
トップへ戻るボタンを、
つけて、
捨ててくれって言ったら、
固定にしてくれとか、
左上に。
作ってくれたし、
最初さ、
すごいダッサイボタンやったんやけど、
もっとこれ、
他の要素とテイストを合わせて、
やってくれって言ったら、
かわいい丸いボタンにしてくれたり。
HTMLとかCSS、JavaScriptっていう、
概念の理解はできていたほうがいいけど、
もう分からんくって作れる。
調べることはなくなったね。
AI技術の進化
もう聞くもん。
そのまま。
そのまま聞くね。
途中作業してたら、
表示されない要素が出てきちゃって、
タイトルとかキャプションをつけて、
とか言ったときに、
一回やったら、
うまく出なくて、
出なくなっちゃって、
だから出なくなったよって、
チャットに言ったら、
デバッグして。
ごめん、なんかやっとったっていう。
何って言わんかったけど、
チェックして、
全ファイル、
もう一回見直しますって言って、
ここが原因でした、
みたいな感じで言って、
もう一回直してくれたら、
ちゃんと出るようになったし。
実、コンピューター向かった時間って、
どのぐらいでできたイメージ?
今日午前中だったよね。
2、3時間?
2時間ぐらいじゃない?
今日朝、ちょっと違うことやってたから。
で、できた?
だいたい10時から12時まで。
全然時代が違うけど、
はるなさんが昔、
もしこれを手でコードを書いていたとしたら、
推定どのぐらい?
3日ぐらい。
8時間かける3ぐらい?
ぐらい。
10倍か、単純に。
と思う。
なんか、もう忘れちゃったけど、
例えばその写真をさ、
ワークのところの写真をタップすると、
ペロペロ貼るだけでめんどくさいよね。
プレビューっていうか、
ちょっと大きく表示されるとかさ、
リンク先をこれにするとか、
そういう、なんていうの、
コマゴマしたのとか、
そういうのをさ、調べながら、
で、フレームワークがあって、
これ取ってきて、
その当時は確かなんかあったと思う。
木馬みたいなやつとかあったよね。
メリー・フォーランドみたいな名前のやつとか。
なんか忘れちゃったけど、
で、そのフレームワークを入れて、
ギャラリー風にするみたいなのとか、
この1要素に2、3時間かかったりとか。
そうそうそう。
っていうのがあったり、
あとはその、
プロフィール文みたいなのもさ、
もともと自分で持ってるプロフィール文はあるんやけど、
このサイトにちょうどいい感じに文章量とかさ、
内容を合わせて欲しかったから、
ここを後藤春菜風に、
いい感じに書いてくれって言って、
叩き台を書いてもらって、
で、そこからバリエーションとか。
調整をしたりとか。
それも全部グラビティ。
アンチグラビティ。
アンチグラビティの中って、
結局エージェント選べるんだけど、
今回使ってたのは、
Geminiの3 ProのFastっていうやつ。
めっちゃ賢いのの、
その次のバージョンぐらい。
ただで使えるのはそこになる。
そうそうそう。
っていうやつを使ってたんだけど、
まあまあ賢くてですね。
あと、
たぶん、
もともとがGemini CLIを使ってた関係上、
Geminiの設定ファイルが入ってるんだよね。
自分のフォルダの中に。
Gemini.md読んでくれるの?
読んでくれたと思う。
新規ファイル作った時に、
保存場所とかは違ったんだけど、
ファイルの命名規則が、
Geminiに指定してる命名規則で作ってきた。
同じフォルダを見たわけではなくて、
なんか俺Gemini、
アンチグラビティを触ってみた時に、
あれこれMDでそういう、
設定ファイルとか作れないんじゃないのかって思って、
使うのをやめてしまったんだけど、
動いているのかな?
わかんない。
ただ一個懸念点というか、
VS Codeの設定をそのままインポートしたんだよね。
アンチグラビティを入れる時に。
もしかしたらその設定ファイルの中にも、
なんかあったのかもしれない。
でも基本、
自分がGeminiへの指示は、
Gemini.mdっていうファイルの中に指示を入れていて、
そこに新しくファイルを作る時は、
こういうルールで絶対作って、
こういうやつはここのフォルダに入れろとか。
このフォルダの中に絶対入れろって言ったら、
作られたファイルがフロントマター入ってて、
ファイル名も命名規則通りのやつがここって生まれて、
サイト制作の新たなアプローチ
あれ?なんかそのままいけるやんと思って。
HTMLだって。あれ?HTMLのヘッダーって。
あ、違う。あれは形が違う。
フロントマターとは違う。
かっこで作るやつやな。ヘッドって。
だから、なんか良かった。
アンチグラビティが手軽で楽だった。
その時の。別に他でもいいと思うんだけど。
今回、Webページを制作している。
要はHTMLファイルを編集しているにおいては、
やっぱりプレビューがいちいち。
だいぶ違うよね。
ブラウザ上で確認してとか。
昔は左右に並べて、裏でサーバー走らせて、
コマンドRを押すとリロードされるとか、そういうイメージだよね。
VS Codeももちろん、マークダウンプレビューとか、
HTMLプレビューのプラグインを入れて使っているので、
出るのは出るんだけど、
簡単に指示を送れるっていうのがすごく良かったし、
このアンチグラビティじゃないんだけど、
ちょっと前にカーソルがグラフィカルに
編集できる機能っていうのを出して、
結構話題になってたりとかして。
大雑把に同じことができるってことだよね。
そうそうそう。
そういう機能が出て、
コードしか使えないっていうよりか、
もうちょっと広いデザイナーでも。
コーダーはもうコード書くのが仕事じゃなくなる。
というか、コーダーという仕事では成立せんくなるよね。
そこはそこで重要なことって、
もっとコアな部分がありそうなってことだよね。
コーダーはコードを書くのが仕事でなくなる。
コーダーとか、
そこで重要なことって、
もっとコアな部分がありそうな気がするから。
いわゆるHTMLを書くみたいなコーダーっていうのかな。
っていうのは、
もう今全然知識がない人でも、
AIうまく使ってっていうか、
本当にアプリを入れて聞くだけで作られる。
新規ページも作れるし、
既存のページを編集することも簡単にできる。
メタ知識のほうが、
生産性に寄与するようになってしまった。
作業をしてもらって、
勝手に書き換えてくれるとか、
許可したら、
全部コードとかも書き換えてくれるから、
ページの更新とかもすごい簡単にできるし、
そのプロフィール分とかも、
何パターンか勝手に出してくれて、
3パターンぐらい。
親しみやすいパターンと、
ビジネス寄りのパターンと、
何たらのパターンみたいな。
それを見ながらちょっと編集して、
パターン位置を適用させてって言ったら、
全然別ファイルで作られてたファイルの文章だけど、
このプロフィール案の位置を、
インデックスのページ、
メインの gotoharuna.com のページの中に
組み込むねみたいな感じで、
勝手にやってくれたし。
なんかさ、めっちゃ変な感覚だけどさ、
昔、ムーバブルタイプってさ、
記事を更新するたびにさ、
ウェブサイトを再構築して、
作り直して、
新しいページができましたってなるんやけど、
そういう感じのことを、
AI にやってもらうとかできるよね。
新しい MD ファイルを渡して、
これブログのトップページに記事入れといて、
リンクとかアップロードとかしといてって言ったら、
やれるとかにも、
ブログっぽいものを、
AI と作るとかもできるよね。
あ、めっちゃ簡単にできる。
訂正的サイトを、フレームワークを使わず、
AI で作る。
めんどくさいかい、あらんな。
うん、とは思うけど、
でも基本的に、
デザインもいじれるし、
そういうコンテンツの入れ替えとかも。
このぐらいデザイン作れるなら、
ハードルの低い情報発信
そして、それでそういう情報発信が、
もうちょっと、
セミリアル、
ブログに近い距離感で情報発信ができたら、
楽でいいよね。
自分がワードプレスはやっぱ面倒だったからさ。
そう、ワードプレスも面倒だったし、
その前の時代、
自分でさ、
ファイルをアップロード、
うちのホームページの時代。
サーバーにアップロードして、
っていうのも、
やっぱりどうしても、
手間に感じてしまって。
で、今現状の、
自分の仕組みとしては、
普段使っている
Obsidian の中で、
ページを書き換えて、
それだけでは変わらない。
Obsidian Publish ではないので、
あれなんだけど、
Git にコミットすれば、
それで更新がされるっていう仕組みを、
もう作っちゃったから、
コミットだけで。
RSS ファイルも生成してもらったらいい。
一緒に。
そしたら、更新情報付きのホームページにできる。
RSS を、
自分が使わなくなっちゃったから。
俺の中で、
RSS リーダーは、
帰ってくるかどうかは分からないけれども、
一定程度の層には、
ずっと刺さり続けると思っているし、
俺はずっと使い続けている。
個人を追っかけるのに、
これほど素晴らしい仕組みはない。
サブスタックにあるからいいか。
サブスタックは、
逆の目線で、
簡単にメールアドレスに、
きちんと連絡が届くっていう、
すごく良いシステムではあると。
そんな感じで、
今回、
Goto Haruna.com っていう、
ページの回収、
更新を、
AI を使ってやったら、
すっごく早くて、
理想の形が作れた、
って感じかな。
もうあれだよね。
逆になんか、
ひらがな一文字間違っとったとか、
怒らんもんな。
AI に書いてもらったら。
まあ、
その辺の構成も、
ちゃんとチェックしてって言えば、
間違いは少なくなると思うし、
何よりもやっぱり、
手軽く感がいいよね。
どの部分が一番手軽?
自然言語で、
頼めばやってくれる。
修正ができるっていう。
直接コードを、
触らなくていいっていう感覚。
例えば、
今、ワークのところに、
7 個ぐらい、
項目が並んでるんやけど、
もともとのテンプレートって、
イメージ 1、
イメージ 2、イメージ 3 っていう、
ファイルを上書きしてね、
みたいな。
それをそのまま引き継いで、
上書きすれば、
並びます。
ちょっと旧時代な感じやな。
っていうやつだったけど、
自分の場合はクリックしたら、
物によっては、
別のページにジャンプさせたい。
例えば、Amazon のページだったりとか、
Store のページにジャンプさせたい。
そうじゃなくて、
拡大表示されるだけで、
いいものもある、
みたいな感じだったから、
並び順も、
数字とかをファイル名で、
指定してる場合だとさ、
次じゃあ新しい新規コンテンツ、
増えた時に、
間に入れるとかが、
めっちゃ難しくなる。
全部リネームしないといけない、
とかになるから、
それはちょっと避けたいと思って、
コンテンツの入れ替えを、
簡単にできるようにして、
って頼んだら、
一生懸命考えてくれて、
指定できるようにするわって。
もともとは、
このファイルっていうのを入れとけば、
自動で表示されるっていう感じだったけど、
そうじゃなくて、
上から順番に表示されるんだけど、
その時に、
表示させたいファイル名を指定すれば、
それでOKにしとくね、みたいな。
そういう書き換えとかも、
勝手にやってくれる。
考えてくれるっていう感じかな。
どういう作戦があるかを、
一緒に考えてくれる。
それがすごいやっぱり、
楽しいっていうか、
早くて楽しいって感じかな。
こんな感じで、
アンチグラビティ自体は、
MacとかWindowsとかの、
パソコン用のアプリケーションなので、
今現在、
iPadで使うことはできないんですが、
自分の場合、
その本体というかね、
ファイル自体は、
オブジェクトで、
オブジェクトで、
ファイル自体は、
Obsidianのボルトの中に、
データが全部入っているもんだから、
HTMLとかも置いてあるんや。
全部入ってて、
その一部のファイルを、
じっと管理してるっていう感じ。
特定フォルダの中だけ。
そうそう。
っていうやり方をしているので、
普通に、
AIとなんかして、
みたいなのは使えないけど、
普通にObsidianとか、
そういうテキストエディターっていうの。
ああいうのを使えば、
ファイルエディターを使えば、
ページの書き換えとかもできる。
iPadでもできる。
ああ、そういうことね。
自分の場合、
ワーキングコピーっていうアプリを使っているんだけど、
そのワーキングコピーで、
ファイルを開いて、
文章を打ち替えたり、
コミットすれば、
ページが更新される仕組み自体は作れた。
多分やらんよね。
緊急時でさっき言ってたさ、
文字間違ってるとかでしょ。
ゴジラ辻が見つかったとか、
リンク先が間違っているとか。
そういう人間が直した方が早いレベルだよね。
多分。
でも一応、
iPadでも編集ができる環境を作れたっていうのは、
すごい自分の中で大きくって。
iPhoneでももちろん、
その理屈で今できるわけだよね。
できるので、
これ今後、
どれぐらい更新していくかは、
ちょっとわかんないんだけど、
目標というか、
もともとの gotoharuna.com に、
自分の今までの成果みたいなのを、
並べるみたいなのが、
うまくできたので。
今後の更新が、
あんま腰が重くならんっていうのも、
でかいんじゃないのかな。
そうだよ。
それが間違いなくある。
HTML書こうと思ったら、
せめて30分ぐらい時間ないとつらいよね、
とか思ってしまうのが、
AIに話しかければいいなら楽っていうか。
そうそう。
叩き台的な話で言えば、
別にGPTを使っても、
クロードを使っても、
ジェミニを使っても、
どれを使っても多分全然できる。
で、そのファイルだけ作ってもらって、
で、その後、
ちょっと手を入れようかなと思ったら、
そういうアンチグラビティとかで、
見ながらやればいいんじゃないかなと思った。
ということで、
今日は gotoharuna.com っていう、
自分のサイトの、
更新をしたんだけど、
その時にAIを使ってやったら、
めちゃくちゃ簡単に、
綺麗にできたよっていう、
お話でした。
Obsidianの活用
よかったら、一回どんなもんじゃいって、
見てみてください。
番組への感想やリクエストなどは、
シャープiPadworkersのハッシュタグをつけて、
投稿してください。
それではまた来週。
iPadworkersポテチャンでした。
ありがとうございました。
