今回Webで公開したのは、SPAなサイトというかサービスをやりたいと思っていたのもあって、テストにちょうどよかった。

明日の夜はiPhoneの実機で動かすとこまでやってみたいな。いやすでにiPhoneで動いてはいるんだけど。ちゃんとビルドして開発者用サイドロードみたいな感じで入れてみたい。

昔はちょっとした見落としみたいなことで普通に一晩はまってたしな……。

でもまあ全てはチャットAIのおかげで、分からんとこ教えてくれってした時の回答が早すぎる。Webで何度も検索してたくさん記事見てこんな感じかあ、って理解してたことが10秒で返ってくるのはえぐい。

今日は仕事終わってからReact Nativeを触っていたんだけど、もっと早く触ればよかったとなっている。React Native出始めのときはまあまだネイティブじゃないと性能きついんじゃないの、って感じで見てたのは記憶にある。

統合IDE嫌いでWeb系ではないにせよWeb知らないわけではないのです、という自分的には使いやすそうな感じ。パッケージ類の依存関係えぐそうではあるけども。

ストアで配布するようなものじゃなくて、自分しか使わないけど自分には意味のある程度のものはこれで良さそうね。Windows Formsだったかなんか忘れたやつとか.NETとかも触ったことあるけど、UI作る上で分かりやすいのはWebだよなぁ。

スマートフォンでブラウザ版やると流石に重いな。

ローカルではiPhoneネイティブだからサクサク動くけど……。多分これより適したパズルはあると思う。

BGMは別に流すようにして、もう少し音楽理論を正しく確認して、パズルを解く操作で自動的にメロディのようになると気持ちいいはず。

起動時に無駄に重いのもフォント読み込みに関する遅延処理だから……fontawesomeでもいい感じのあるんじゃないかな……多分ionicだけおかしいんですよね。

Webだけionic.ioのiconセットの読み込みがなぜかうまくいかなくて、結局直せてないんだけど（代わりのフォントが出てくるようにはした）、一応公開しますね。

試しに作ってみたら案外これいいね、ってなったやつ。ボリュームはデフォルト60%とかのほうがよかったね。

melodyslide.oeight.me

HugoでOGP対応を行う方法

Hugoで作成したサイトにOGP（Open Graph Protocol）を適用することで、SNSでのシェア時に適切なタイトルや画像が表示されるようになります。本記事では、HugoでOGP対応を行った手順を備忘録としてまとめます。

生成AIにまとめてもらったので、間違いがあったらごめんなさい。一応、目では見ています。

OGPとは？

OGP（Open Graph Protocol）は、FacebookをはじめとするSNSでURLを共有した際に、適切なメタデータ（タイトル、説明、画像など）を表示するための仕組みです。適切なOGP設定を行うことで、SNSでのクリック率向上や視認性の向上が期待できます。

それと、単純に見た目がかっこいい。

1. layouts/partials にOGP用のテンプレートを作成

まず、Hugoのテンプレートシステムを活用し、OGP用のmetaタグを管理するために layouts/partials/ogp.html を作成します。

1
2
3
4
5
6
7

<!-- layouts/partials/ogp.html -->
{{ with .Title }}<meta property="og:title" content="{{ . }}">{{ end }}
{{ with .Description }}<meta property="og:description" content="{{ . }}">{{ end }}
{{ with .Permalink }}<meta property="og:url" content="{{ . }}">{{ end }}
<meta property="og:type" content="website">
{{ with .Site.Params.ogpImage }}<meta property="og:image" content="{{ . }}">{{ end }}
<meta property="og:site_name" content="{{ .Site.Title }}">

ここでは、ページのタイトルや説明、URLを動的に取得し、OGPのメタタグを出力しています。

2. head.html にOGPテンプレートを組み込む

Hugoでは layouts/partials/head.html にサイト共通のメタタグを記述することが一般的です。この中に ogp.html を読み込むようにします。

macOS SequoiaでReact Nativeの環境整えたくて、gemでcocoapods入れようとしたらrubyのバージョン古いよって言われたので、どうしようかなと思ったけど、おそらくこれ（brewでcocoapods入れる）が良さそう。

zenn.dev/koda_momo…

oeight.meの方はOGP対応できたはずなんです。

というわけでテスト。Xで画像が出てくればよし。（まあXはCardsの方を先に取得するんだが）

oeight.me

URLを受け取って、URLが示している記事が持っているオープングラフをOGPで取得して、コピペしやすい形式に加工して、次のメモあるいはノートアプリにそれを渡すiOSアプリが実際に必要だ。

なんかクリップボード系のツールにそういう機能は付けられてそう。サイトに悪意がある場合に脆弱性が生まれやすい構造なのが懸念か。

でもこれは探すより自分で作ってみるべきなのかな。学習のためにも。

探すと言っても、一文目をインターネットアクセスできるチャットアシスタントに入れるだけだろうが……。

アマゾン、エコーのプライバシーオプションを終了 www.perplexity.ai/page/amaz…

ふむ……。

ちょうど最近、Alexaへの依存率高いけど言うほどいるのか？　Siriあたりに置き換えられないか？（スマートスピーカーを複数系列持っている）

と考えていたところではある。自分が気にしていたのは単にコストの問題だけれど。

Anthropicがちょくちょく出してくる……端的にいうと悪意あるAI対策の研究みたいなやつ、いつも面白いよなあと思って見ている

アンソロピックのブラインドオーディットゲーム www.perplexity.ai/page/anth…

少し前にvibe codingって書いてる人を見て、vibe codingってなんだろ……それはさておきアレをやって……と流してたんだけど、そういう用語なの。

バイブコーディングのソフトウェア開発における台頭 www.perplexity.ai/page/vibe…

なんとか今日中にショート動画できた。初めての……ではなかった。

youtube.com/shorts/Xo…

Github CopilotのProには普通にClaude 3.7 Sonnetが追加されてた。

github.com/features/…

Diabloをやる気力すら残っていないし、そもそも寝れなかった。

でも人はなぜかこの発想に惹かれてしまうんだよなあ。これまでに何度、外でも出来るうんちゃらを考え、そして実際にはやらなかったことか。

出かけてる時も作業できれば仕事がもっと進むじゃんという発想、だいたいうまくいかないんだよな。

人は出かけているときにまで仕事はしたくないし、体力は有限なので時間あたりのパフォーマンスが出せる状況でのみ作業した方が逆にいい。

おそらく一番正しいアプローチはぽちぽちメモるとかもやめて、AIに音声対話モードで話しかけるというか一方的に喋って投稿の下書きになるようにMarkdownにまとめてもらって、それを一応保存しておいて続きは家に帰ってから作業、とすることだな。

ブログ記事なんて公開するつもりで書いてるわけですからね……とは言っても外でそんなことするの恥ずかしくて無理だよなあ。

GitHub Mobileだけでcontent/posts/以下にMarkdown文書作ってコミットしてブログ更新いけた。

既存文書をコピーしてやる感じにすればいい。日時の入力とかが面倒だけど、そこはアプリ内でGithub Copilotに頼むことでほんの少し楽することもできる。

流石に本文は別で作っておいた方がいいと思うけど。

まあその辺はチャットAIと話して下書き作らせて、「枠だけ作成、下書きから本文コピー、ちょっとだけ直し」でできそうかな。

でも、最悪の最悪はこれでもできますというぐらいで、外では下書きだけしといてPublishは家に帰ってからやればいいじゃんってのが多分正しい。

GitHub Mobile Appで記事を新規作成

Hugoならではのテンプレート部分が厄介ではあるが、普通にGithubモバイルアプリがあれば記事を書けそう。

テンプレート部分はGithub Copilotに頼めば時刻ぐらいは入れてくれるので、本文だけ他のアプリで書いて保存しておいて、枠だけ作らせて貼り付け……みたいな作業でいけそう。

エディタそのものもGithub Mobileで代用してもいいけれど、記事作成は別エディタの方が上手いだろう。

外部アプリ開ければいいのにな。

UlyssesからMicro.blogへ投稿できるの知らなかった

Ulyssesの説明を読んでいたら、WordpressやGhostやMicro.blogに直接記事を投稿できると書かれていた。

しばらくUlyssesは使っていなかったし、Micro.blogを使い始めたのが最近なので気づかなかったのは仕方ないとも思うが……長文を書くならUlyssesなので、今後はこっちでブログ記事は書こうかな。

まぁ問題は、Micro.blogでホストしているoeight.spaceではなく、Hugoでホストしているoeight.meへの記事をどうやって（電車の中などの出先で）書くかということなのだが。

Craftを使う手は考えている。でも月額が結構するのよね。

このポストはUlyssesで書きました。

スマートフォンでブログ記事を書きたい。

流石にAIがないと書けないと思う。（スマートフォンで数十分も文字入力するならMacを使うので）

Working Copyを使ってコミットすればいいから、AIで文章書くのを支援してくれる系のMarkdownエディタでも探すか……。

でもClaudeとかChatGPTなら「今の回答を.mdファイルにして」っていえば返してきそうではあるから、それ使ってなんとかできそうな感じもあるな。編集はBearでもUlyssesでもいいといえばいい。