Post

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 を読み込むようにします。 ...

Hugoならではのテンプレート部分が厄介ではあるが、普通にGithubモバイルアプリがあれば記事を書けそう。 テンプレート部分はGithub Copilotに頼めば時刻ぐらいは入れてくれるので、本文だけ他のアプリで書いて保存しておいて、枠だけ作らせて貼り付け……みたいな作業でいけそう。 エディタそのものもGithub Mobileで代用してもいいけれど、記事作成は別エディタの方が上手いだろう。 外部アプリ開ければいいのにな。

はじめに フィードリーダーといえば、かつてはGoogle Readerを筆頭に多くのユーザーが活用していました。しかし、Google Readerの終了後、FeedlyやInoreaderといったクラウドベースのサービスが主流となりました。そんな中、ReederはmacOS/iOS向けにローカルで動作するフィードリーダーとして、長年にわたり愛されてきました。 しかし最近、以前のバージョンがReeder Classicと名前が変わり、、新たに大きく設計を刷新したアプリとしてReederがリリースされることになりました。本記事では、この新しいReederの魅力について紹介します。 Reederの特長 1. ローカルで動作するフィードリーダー 多くのRSSリーダーがクラウドベースになっている中、Reederはローカルで動作します。ケースバイケースではありますが、体感的には記事間の移動などの動作が軽快でレスポンスがいいと感じます。 また、iOSとmacOS間でどこまでスクロールしたかを同期してくれるため、デバイスをまたいで快適に記事を読むことができます。（iCloudは若干同期が遅いので……という問題はありますが） 2. RSSだけでなく、BlueskyやMastodon、Reddit、Podcastも Reederは単なるフィードリーダーではなく、Bluesky、Mastodon、Reddit、Podcastの閲覧（Podcastは聴く、ですが）にも対応しています。 筆者自身、Mastodonは別のクライアントアプリで利用していますが、利用頻度の低いBlueskyをReederでついでに確認できるのは便利です。また、RSSフィードを読みながらPodcastを聴く（Picture in Picure……ではないのですが、そういう感じのミニプレーヤーで再生する機能があります）という使い方もできるため、情報収集の効率が向上します。 3. シンプルでクリーンなUI ReederのUIはシンプルでクリーンです。記事を読む際に余計な要素が表示されず、リーダーモードもそこそこ多くのサイトで効果的に機能します。 直感的に操作できるため、新規ユーザーでも迷うことは少ないでしょう。 4. 月額150円（年額1500円） Reederは有料アプリですが、月額150円または年額1500円という価格設定になっています。 この価格は絶妙で、サイトの見方が変わる便利さに払う金額として、高く感じない程度のものです。Feedlyなんかはやっぱちょっと値段がね……となりますよね。特に、RSSリーダーだけでなく他のコンテンツ閲覧もできる点を考えると、コストパフォーマンスは高いと言えます。 Reederをおすすめしたい人 かつてReeder Classicを使っていた人 FeedlyやInoreaderを使っている人で、もう少し安価なソリューションを求めている人 RSSリーダー以外の用途（Bluesky、Mastodon、Reddit、Podcast）にも関心がある人 改善してほしい点 日本語ローカライズの対応 現時点ではUIが英語のみなので、慣れるまでは設定画面などが少し分かりにくいかもしれません。個人的には気になりませんが、気になる人はいるでしょう。 Apple Intelligenceへの対応 将来的にAppleがローカルAI機能をAPIとして提供するなら、Reederで記事の要約などをできるようになって便利そうです。できるかな？ まとめ Reederは、かつてのReeder Classicから進化し、RSSリーダーにとどまらない多機能なアプリになりました。 ローカルで動作し、iOS/macOS間の同期機能を備え、シンプルなUIを持つこのアプリは、フィードリーダーを探している人にとって最適な選択肢の一つです。 RSSリーダーの魅力を再発見したい方は、ぜひ試してみてはいかがでしょうか？ ReederをApp Storeでチェックする

サイトの作成時に地味に厄介なのがfaviconである。さっとロゴをデザインできればいいのだが、まあ一般人にはそんなことは不可能である。 でいつもどうしようとなっていたのだが、最近はそういう人のためにfavicon.ioというサイトがあるのだった。 これは、画像から、テキストから、絵文字からfaviconを作ってくれる。そう。面倒なことにfaviconはいろんなサイズやファイル名で必要なのだ……。 今回はプロフィールに使っているイラスト（地味にちゃんと発注したもの）を元に生成してもらった。 作ったので反映させるの忘れないようにしないと……。

まずはテーマの設定やテストをしないといけないので、記事がいくつか必要。なので特に意味はないけどこの記事が書かれているという背景が存在する。 こういうのはAIに書いてもらったほうがいいだろう……。 テーマはPaperModを使用させてもらった。Paperをベースにしたものとのこと。まあ一目瞭然でブログとしてはとてもクリーンかつ必要な機能があるのではないか。ちなみにブログ以外にもプロフィールページとして稼働させるモードもあるらしい。 んで、このサイトのホスティングは昔やっていたCloudflare Pagesに戻した。 なんだかんだでコストが安いのに転送量制限ないしCDNと至れり尽くせりである。ただしCI/CDのビルド回数には無料プランでは上限があるが。月500回とかだから月に100回記事書いてミスって直すを400回やる……ありえないね、となった。 なお、Cloudflare R2 + Workerの構成もいいらしい。ChatGPTが教えてくれた。 ドメインも取得した。oeight.meだ。 .ioとか.aiとかかっこいいけど高いので、.newsとか.pressとかも悪くないなーと思いつつ、コストの安さで.meか.xyzだなとなって、.meにした。カジュアルさとなんだかんだ見たことあるドメイン名なので怖くないってのが大きいと思うし、個人用途に向いてそうだった。.infoとかでもいいんですけどね。.orgはまあ個人だとあんまり。.comは高い。 しかし、.xyzってそんなイケてるってイメージないけどそこそこ人気らしいんですよね。ふむ。 日本人的な感覚だとシティーハンターぐらいしかないんだけどな……（世代がバレちゃう）。