Astro

ブログのデザインを大幅に変更しました
image

はじめに

このブログのデザインを大幅に変更しました。

変更後のTopページ

変更した経緯としては、2つあります。 以前のブログのデザインは、Astroのfuwariテーマを参考にして作成していたのですが、fuwariベースの派生テーマが公式の方でも増えてきており、ブログのデザインが他の人と被るのが嫌だなとなり思い切ってデザインを大幅に変更してみました。

また、以前は記事にカテゴリーを設定していたのですが、この雑記ブログにはタグのみの方が記事の分類として迷いがなくなって書きやすくなると感じたので、カテゴリーを廃止して一覧性をよくしようと思いました。

この記事では、デザインを変更したAstro製のこのブログについて、サムネイルに記事の一部を表示する方法を紹介します。

Meta Data
公開日:2026-02-06
Tags:
#ブログ
#Astro
Astroで作ったブログで更新日時を自動で取得する方法

はじめに

このブログのデザインを大幅に変更したいのと、記事の一覧を更新順で表示したいと思ってたのですが、更新日の取得方法に悩んでいました。

Astro の公式のチュートリアルでは更新日は記事のフロントマターに設定する方法が紹介されていましたが、毎回手動で設定するのは面倒です。

そこで自動で取得する方法を考えた結果、Git のコミット日時を取得してその日付を更新日として表示する方法を実装できたので紹介します。

Git のコミット日時を取得する

それでは、Git のコミット日時を取得する方法について説明します。 Git 関連の情報はgit logコマンドで取得できます。 次のようにコマンドを打ってみましょう。

# 指定したファイルの最新のコミット日時を取得する
## -1 : 最新の1件のみ取得
## %ai : 日付
## filePath : 調べたいファイル
git log -1 --format=%ai -- filePath

オプションについてはコメントの通りになります。

Meta Data
公開日:2026-01-25
更新日:2026-02-04
Tags:
#Astro
技術ブログにブラウザの対応状況を表示するBaseline Status Webコンポーネントを入れる方法

はじめに

技術ブログを複数運営しているのですが、CSS などのプロパティで一部のブラウザのみでしか対応していないものがあります。その際に、ブラウザの対応状況を表示するコンポーネントを入れておくと、ブラウザの対応状況が分かるので、ブログを見ている人にも分かりやすいと思います。

↓ 運営している技術ブログ

https://hypb.dev

https://feylo.dev

今回紹介する Baseline Status Web コンポーネントは、ブラウザの対応状況を表示するための Web コンポーネントです。このコンポーネントをブログ内で使用することで、ブラウザの対応状況を簡単に表示することができます。この Web コンポーネントを Astro 製のブログと Nuxt 製のブログで使う方法を紹介します。

使用イメージは ↓ のような感じになります。

<BaseLineStatus featureId="anchor-positioning" />

Baseline Status Web コンポーネントの使い方

npm で使う場合

npm でbaseline-statusをインストールします。

npm install baseline-status

使用する際はそのまま import して表示する featureId を指定するだけで上記のような感じで表示されます。

import "baseline-status";
<baseline-status featureId="anchor-positioning" />
Meta Data
公開日:2025-07-16
Tags:
#ブログ
#Astro
Astro製のブログで読んだ本リストを管理するためにmicroCMSを使ってみた
image

はじめに

Web クリエイターボックスみたいに読んだ本リストを自分のプラットフォームで管理したいと思い、このブログ内に読んだ本リストを追加しました。サイドバーにリンクがあるので覗いてみてください!

読んだ本の管理に microCMS を使ったので、Astro 製のブログで本の管理を microCMS で行う方法をまとめます。まだ、データ数が少ないのでページネーションは実装してないのですが、実装したら追記します。

microCMS の準備

microCMS のアカウントを作成して、コンテンツ(API)を作成し API 設定をしましょう。下記のように設定します。

APIスキーマ

読んだ本リスト API のエンドポイントは book にしました。

API スキーマの例

本のリストなので、自分は下記のように設定しました。

フィールド ID 表示名 種類
title タイトル テキストフィールド
review レビュー リッチエディタ
url Amazon リンク テキストフィールド
cover 表紙画像 テキストフィールド
author 著者 テキストフィールド
publishedDate 発売日 日時
category カテゴリー コンテンツ参照
postlink 紹介記事 テキストフィールド
Meta Data
公開日:2025-05-31
Tags:
#Astro
#CMS
Astro製のブログにCloudinaryを導入する
image

はじめに

このブログと技術ブログは、Astro の Content Collection を使ってマークダウンでブログを書いていて、記事は GitHub で管理してます。

Astro の Image コンポーネントを使うために、ブログ記事の画像も src/assets/images/配下に配置していました。しかし、ローカルで画像を管理したくないなと思ったので Cloudinary を導入してみました。

Astro での Cloudinary の導入方法について、この記事では紹介します。 Cloudinary の詳しいオプションなどは解説しないのと、Cloudinary のアカウントが既にあるのを前提に説明します。

まだの方は下記 URL からアカウントを作成してください。

https://cloudinary.com/

Astro Cloudinary のインストール

Astro で使える Cloudinary のコンポーネントが用意されてます。下記コマンドで Astro Cloudinary をインストールしましょう。

npm install astro-cloudinary

インストールできたら、プロジェクトのルートに.envファイルを作成して、Cloudinary のアカウント情報を記述します。

PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"
Meta Data
公開日:2025-05-19
Tags:
#Web
#Astro
Astroで作ったサイトをGitHub Pagesにデプロイする
image

はじめに

Astro で作ったサイトを GitHub Pages にデプロイする方法について紹介します。 GitHub Pages を使うことで簡単に作ったサイトを公開することができます。

基本的には公式サイトのドキュメント通りにやればできるでしょう。 ここではカスタムドメインを使わないリポジトリ名が後ろにつくデプロイ方法を紹介します。

https://docs.astro.build/ja/guides/deploy/github/

GitHub Pages 用に Astro の設定をする

astro.config.mjs にsiteとbaseオプションの設定を追加します。

import { defineConfig } from "astro/config";

export default defineConfig({
  site: "https://<username>.github.io",
  base: "<your-repo-name>",
});

ここでsiteの username にはご自身の GitHub のユーザー名を、baseの your-repo-name にはデプロイするリポジトリ名入れてください。

Meta Data
公開日:2025-04-27
Tags:
#Astro
#GitHub
Astroで雑に書ける個人ブログを作りました
image

雑に書ける場所が欲しくなったので、Astro で 2 個目の個人ブログを作成しました。 普段は、👇 の技術ブログで主にフロントエンドに関しての記事を書いています。

https://hypb.dev

上記のブログでは、技術系しか書けない感じになっていたので、こちらではもっと雑にインターネット上に残していきたいと思います。

Aboutページに書いてある通り、音楽・映画・小説などが好きなので、それらに関する記事を書いていきたいです。

デザインについて

デザインに関しては、Astro テーマのFuwariを参考にして作成しました。 ほぼ丸パクリですが、Fuwari テーマを見て雑記ブログを作りたいと思ったのでこれで良しとします。

フォントは日本語はKiwi Maru、英語はIBM Plex Monoを使っています。フォントのおかげで可愛い感じが出て良かったです ✨

Fuwari テーマの方は、Svelte や swup を使ってたりでカスタマイズするのが難しそうな感じですが、自分の作成した本ブログはコードも分かりやすく作成したので、サクサク作成することができました!

Meta Data
公開日:2025-04-01
Tags:
#ブログ
#Astro
読んだ本リスト
誤解学
誤解学
誤解学
人文・思想・社会
著者
西成 活裕
発売日
2014年5月22日

「渋滞学」で著名な西成活裕氏は、誤解のことをこう書く

誤解とは、コミュニケーションの流れにおける渋滞のようなものである。誤解はそれまでの流れの様子を一気に変化させ、関係者にとって好ましくない状態を作り出してしまう

そもそも誤解が発生してしまうメカニズムとは何であるのか。
第二章では誤解の理論を構築していく。

理論構築のためには因果関係を表すモデルを作成し分析する。このモデルをIMV分析と呼ぶ。それぞれ下記の頭文字をとったものだ。

  • Iはintension(真意・意図)
  • Mはmessage(情報)
  • Vはview(見解)

誤解は自分の意図と相手の見解のズレで発生する。つまりI ≠ Vのときだ。

その他にも、自分の意見がどれぐらい保持するのかを表す頑固度K、VとIがどれくらいズレるかという指標、ズレを表す伝達度Gの変数も分析には含まれる。

ここで数理モデルの面白さを感じたのは、頑固度Kと伝達度Gが一定で変化しない条件のときではあるが、二者のコミュニケーションの最終合意がどこに行きつくかがシミュレーションで予測できることだ。

この条件の元だと、先手有利の法則になり、最初に話しかけた方が有利になるとのことだ。
このようなことが理論的に示せるのが興味深いと思った。

もちろん実際には、変数である頑固度や伝達度は会話のやり取りで変化するので、より複雑になるであろう。このことも本書で書かれていたらよかったが、残念ながら本書ではカバーしきれていない。

複雑さまで書かれていないのが不満ではあったが、数理モデルの面白さを知る上での良い入門書ではあるだろう。

関連サイト(外部サイト)
「誤解学」の参考文献一覧

Meta Data
公開日:2026-09-22
Tags:
#人文・思想・社会
本屋という仕事
本屋という仕事
本屋という仕事
本屋
著者
三砂 慶明
発売日
2022年6月14日

日本全国各地の書店員たちが、本について、本屋という仕事についての語る。

ただ本が好きだから売るのではなく、本屋として商売としてどう成り立たせるのか様々な思いが綴られている。

また、ある書店員さんは、本屋の「棚づくり」について語られており、本屋さんの思いがあらわれる場所なのだと感じた。

紙の本が好きだし、本屋という場所が好きなので、これからも微力ながら応援したい場所だ。

Meta Data
公開日:2026-09-22
Tags:
#本屋
鏡映反転――紀元前からの難問を解く
鏡映反転――紀元前からの難問を解く
鏡映反転――紀元前からの難問を解く
心理学
著者
高野 陽太郎
発売日
2015年7月15日

紀元前プラトンからの難問であった鏡映反転の謎について見ていく。
鏡映反転とは、「鏡に映ると左右が反対に見える」現象だ。

実をいうと光学的にいえば、「鏡面に垂直な方向だけを反転し、鏡面と平行な方向は反転しない」となる。
なので、鏡と正対しているときは、前後は反転するが、上下も左右も反転しないといえる。純粋に物理的な観点からみれば、「鏡が左右を反転するのはなぜか?」という問題は存在しないともいえる。

だが、実際に左右が反対に見えるし、それはなぜなのかという疑問が残るだろう。なので、鏡映反転の問題は物理的な問題ではなく、人間の認知の問題となってくる。

いままでに鏡映反転のさまざまな説明が、著名な物理学者や心理学者から出されていたが、どれも矛盾や批判があり、定説がないのが鏡映反転の現象である。自分自身の鏡映反転を説明しようとすると、文字の鏡映反転に矛盾が生じ、逆もしかりである。

そこで著者は、自分自身の鏡映反転と文字の鏡映反転は、それぞれ別の原理から生じると考える。
「表象反転・視点反転・光学反転」の3つの現象からなる多重プロセス理論を提唱する。

4章からは、実験結果をもとに多重プロセス理論の説明を行う。また、理解を深めるために他説の反証なども行っている。

レビューなどにあるように、この多重プロセス理論にも批判はあるようだ。
本書を読んで鏡映反転現象を説明する複雑さを感じる。そもそも鏡映反転という現象が複雑なのだ。理論を単純にすると、説明できない現象が出てきてしまうし、他説とのせめぎ合いもある。

装丁だけ見たら面白サイエンス本だと思ったが、実際には精緻に科学的な説明を行っており、誠実な本でありました。また光学的な現象だと思ったら、心理的認知の話でもあるなど、色彩関連と似たような現象が鏡映反転にもあることを知れてよかったです。

関連サイト(外部サイト)
「鏡映反転――紀元前からの難問を解く」の参考文献一覧

Meta Data
公開日:2026-09-21
Tags:
#心理学
これからの本屋読本
これからの本屋読本
これからの本屋読本
本屋
ビジネス
著者
内沼 晋太郎
発売日
2018年5月25日

「本の惑星」というポットキャストのパーソナリティでもある内沼さんの著書になります。
本屋をめぐる状況と、本の仕入れ方、流通の仕組み、本屋の経営について書いてあります。

前半は本と本屋の魅力について書かれています。
「本が好き」「本屋が好き」とことばにする人が増えたとありますが、今ほど情報に簡単にアクセスできない、昔は「好きだから」ではなく「必要だから」本屋に人が来ていました。けれどいまは、必ずしも生活に必要なものではなくなったことで、逆に「好き」という気持ちが健在化してきたからなのでは、という分析はなるほどなと思いました。

本を売る場所のことばとして、「書店」と「本屋」ということばがありますが、これらの違いにも触れられています。「書店」は空間・場所寄りの意味になり、「本屋」は「屋」の字から、本をそろえて売買する人、本を専門としている人のことで、人寄りのことばになります。

内沼さんは一貫として「本屋」ということばを使っています。本を専門としている人のことも積極的に、広義の「本屋」と呼んでいき、本というものは、そういう人たち抜きには成立しないからです。

このことは、後半の小さな本屋を続ける考え方につながっています。現状、本を売るだけで生計を立てることは難しいでしょう。「本」と「何か」の掛け算の本屋運営のすすめが書かれています。

また、本屋を本業に取り込む考え方や、逆に副業としての本屋について述べられており、だれもが広義の本屋としてのライフワークになれるのだと思いました。

自分としては、このブログでやっているように、読んだ本の紹介を続けていきたいのと、街のシェア本棚や一箱古本市に参加してみたいと思いました。

本が好きな人、いつか本屋をやってみたい人におすすめの1冊になります。

Meta Data
公開日:2026-09-19
Tags:
#本屋
#ビジネス
印刷に恋して
印刷に恋して
印刷に恋して
印刷
著者
松田 哲夫
発売日
2002年1月9日

1997年から2001年の印刷現場の体験レポート。今では見ることがなくなった、活版印刷や手動写植などの技術や職人たちの仕事ぶりが描かれている。表紙にある内澤旬子さんのイラストもステキです。

コロタイプのような写真製版、網点などが好きなことを再確認。
箔押しなどの特殊印刷にも触れられており勉強になった。

本の感想はこちらにも書きました!

Meta Data
公開日:2026-09-18
Tags:
#印刷
「読者」の誕生―活字文化はどのようにして定着したか
「読者」の誕生―活字文化はどのようにして定着したか
「読者」の誕生―活字文化はどのようにして定着したか
文化論
人文・思想・社会
著者
香内 三郎
発売日
2004年12月9日

著者の専攻が、マス・コミュニケーション論とイギリス言論史なのもあり、本書は主に十七世紀のピューリタン革命期イギリスを舞台に近代ジャーナリズムの発展をみていく。

これもメディア論といえるのだろう。メディア論というと、どうしてもデジタルやテレビなどの媒体を連想させるが、手書き文字、パンフレット、活字も対象になる。こうした媒体が人びとの意識をどのように変容させてきたか。それにはキリスト教との関連で見ていかなければ理解できない。

なので、本書の前半で中世初期の「イコン論争」の分析から始まる。そこから偶像崇拝のイメージ論争、聖書の読み方の解釈(字義通りの意味など)などをみていく。

イギリス史では、ミルトンやホッブズ、デフォーなどの論客が対象にした「読者像」を考察し、近代ジャーナリズムの発展を追っていく。


タイトルからの想像と外れて、十七世紀イギリスの話が大半であり、特に宗教についても詳しくないので読み進めるのが大変だった。聖書解釈によって論争が生まれるなんて怖いって思ったり。

著者の専攻なので仕方がないが、「読者」を語るのに十七世紀イギリスばかりを扱っていいのかとも思った。もう少しキリスト教との関連もタイトルに含まれていたら...。

この時代に疎いので勉強になったが、日本の「読者」像を知りたくなったので、この本(近代読者の成立)も次は読んでみよう。

Meta Data
公開日:2026-09-14
Tags:
#文化論
#人文・思想・社会
新しい文章力の教室 苦手を得意に変えるナタリー式トレーニング
新しい文章力の教室 苦手を得意に変えるナタリー式トレーニング
新しい文章力の教室 苦手を得意に変えるナタリー式トレーニング
文章術
著者
唐木 元
発売日
2015年8月6日

文章術に関しての本を読んだことがなかったので、中盤からの基礎的な部分が参考になった。だが問題は、自分の文章を客観的に添削してくれる人がいないことなんだよな。文章を読み返したりしても、違和感や正しくない文章を自分では気付けないのが問題だ。文章術の本を他にも読んでいけば身につくのだろうか。

とりあえず文章術に関しての1冊目としては、悪い本ではないと思いました。
若干上から目線なのは気になる部分ではあるが...
他にも文章術についての本を読んでみよう。

Meta Data
公開日:2026-09-11
Tags:
#文章術
働きたくないイタチと言葉がわかるロボット 人工知能から考える「人と言葉」
働きたくないイタチと言葉がわかるロボット 人工知能から考える「人と言葉」
働きたくないイタチと言葉がわかるロボット 人工知能から考える「人と言葉」
AI
言語学
著者
川添愛
発売日
2017年6月16日

機械学習・ディープラーニング・ベクトル化などの理系と、言語学などの文系が関わってくるこの分野の話は、とても興味があり面白い。「言葉が分かる」ことや「意味が分かる」ということは、普段の生活では意識することがないであろう。だが、人間ではない機械のことを考えると、途端に私たち人間の凄さが現れてくるのが人工知能についての話を読む面白さか。

機械で人間の言語能力を再現しようとするときに、難しくなる要因は、「人間の無意識の能力」にあります。無意識の能力とは、言葉の曖昧性や会話的含み、意味理解など多数あり、本書を読むと私たち自身についても考えさせれることとなります。

また、言語学は何を目的にした学問なのか、この本を読むまで知らなかったのですが、こうした「人間の無意識の能力」を科学的に解明することを目標にしていることを知れたのもよかったです。

「言葉がわかる機械」をめぐるイタチたちの物語と、その物語からの解説といった形になっており、人工知能について誰でも読みやすく工夫されているのもいいですね。

関連サイト(外部サイト)
「働きたくないイタチと言葉がわかるロボット 人工知能から考える「人と言葉」」の参考文献一覧

Meta Data
公開日:2026-09-11
Tags:
#AI
#言語学
インフィニティ・パワー: 宇宙の謎を解き明かす微積分
インフィニティ・パワー: 宇宙の謎を解き明かす微積分
インフィニティ・パワー: 宇宙の謎を解き明かす微積分
サイエンス
数学
著者
スティーヴン・ストロガッツ
発売日
2020年1月27日

高校時代に微積分で挫折した人は多いと思う。無味乾燥な記号操作をして、その意味を理解することなく、暗記して問題を解いてる人もいたのでは。ストロガッツが書くこの本では、一般の人に伝わるように微積分についての歴史的事実、エピソードや活用事例を、ときには数式も交えながら分かりやすく書いてくれる。

数学に縁がない人にも読めるように、大学数学で登場するイプシロン-デルタ論法などは出てこないで、タイトルにある「無限」の威力をで分かりやすく微積分を説明する。

微積分それ自体については知っている知識ではあったし、例えを用いることでかえって分かりづらくなっていると感じたのが難点か。

この本では、数学史のエピソードの話が面白いと思った。

第4章の「微分の夜明け」では、デカルトとフェルマーが出てくるが、この2人は仲が悪かったらしい。というよりも、デカルトがかなり悪い感じに描かれており、こんな人だったなんて知らなかった。

他の同時代の2人の話では、ニュートンとライプニッツの話が出てくる。彼らの微積分への思いつきは別々のルートで到達したという話は面白い。ニュートンは、運動と流れを好んで無限小を否定して定理にたどり着いたのに対し、ライプニッツは無限小を便利な簡略表記と捉え、極限に関する議論を作り直す有効な手段として定理にたどり着いた。

無限小といったものは、現実に存在しないわけで、ライプニッツと彼の学徒たちにとっての無限小は、有用な「心の創作」として存在したという表現が印象的だった。

簡易的なモデルではあるが、自然を数学で表現できること自体、凄いことである。
「無限」もまた存在しないが、数学の発展に寄与したという物語を知れば、数学への苦手意識も減るのではないか。そんな著者の思いから産み出された1冊なので、ぜひ読んでもらって微積分の素晴らしさを実感してもらいたい。

関連サイト(外部サイト)
「インフィニティ・パワー: 宇宙の謎を解き明かす微積分」の参考文献一覧

Meta Data
公開日:2026-09-09
Tags:
#サイエンス
#数学
服飾文化論: 服飾の見かた・読みかた
服飾文化論: 服飾の見かた・読みかた
服飾文化論: 服飾の見かた・読みかた
ファッション
著者
小池 三枝
発売日
1998年4月30日

人間だけが衣服を着ている。衣服には機能や表現も含まれる。

本書では、衣服を人間と動物とを区別するレベルで考えるのではなく、人間存在として長いあいだに培われてきた文化として考えていく。長い時間を経て、衣服を着ることが、人びとの心とどのようにかかわるのかということに焦点をあてている。

「服飾」という語があるが、「飾」とあるように、単に着るものをあらわすだけでなく、美的な意味を文字から読みとることができよう。何らかの楽しみや喜び、記号とされた制度、あるいは感動を見いだすことのできる衣服をとりあげ語っていく。

そこには文学作品に出てくる服飾も、意味を読みとることができる。文字だけの情報でありながら、服飾それ自体の描写で、身につけている人物の年齢・性別・職業・趣味・教養・性癖・経済状態などを示す一種の記号である情報を付与することができ、登場人物を読者に印象づける役割をもつ。

服飾はつねに、着る人とかかわり、また時代の動きとかかわりながら、さまざまな訴えかたをし、さまざまな美を実現するのだ。

ここでとりあがられる事例のほとんどは日本のものとなる。過去において日本人が服飾にいかにこまやかな感情を抱いてきたかを見つめ直すキッカケになるだろう。長い歴史をもつ衣服について、考えさせられる一冊となる。

関連サイト(外部サイト)
「服飾文化論: 服飾の見かた・読みかた」の参考文献一覧

Meta Data
公開日:2026-09-06
Tags:
#ファッション
Info