ブログ記事一覧
このブログのデザインを大幅に変更しました。
変更した経緯としては、2つあります。 以前のブログのデザインは、Astroのfuwariテーマを参考にして作成していたのですが、fuwariベースの派生テーマが公式の方でも増えてきており、ブログのデザインが他の人と被るのが嫌だなとなり思い切ってデザインを大幅に変更してみました。
また、以前は記事にカテゴリーを設定していたのですが、この雑記ブログにはタグのみの方が記事の分類として迷いがなくなって書きやすくなると感じたので、カテゴリーを廃止して一覧性をよくしようと思いました。
この記事では、デザインを変更したAstro製のこのブログについて、サムネイルに記事の一部を表示する方法を紹介します。
このブログのデザインを大幅に変更したいのと、記事の一覧を更新順で表示したいと思ってたのですが、更新日の取得方法に悩んでいました。
Astro の公式のチュートリアルでは更新日は記事のフロントマターに設定する方法が紹介されていましたが、毎回手動で設定するのは面倒です。
そこで自動で取得する方法を考えた結果、Git のコミット日時を取得してその日付を更新日として表示する方法を実装できたので紹介します。
それでは、Git のコミット日時を取得する方法について説明します。
Git 関連の情報はgit logコマンドで取得できます。
次のようにコマンドを打ってみましょう。
# 指定したファイルの最新のコミット日時を取得する
## -1 : 最新の1件のみ取得
## %ai : 日付
## filePath : 調べたいファイル
git log -1 --format=%ai -- filePath
オプションについてはコメントの通りになります。
笠間日動美術館は好きな美術館でよく行きます。今回の企画展は笠間日動美術館所蔵の中から女性たちのファッションの変遷に着目した作品が何点か展示されていました。副社長の長谷川智恵子の肖像画が 7~8 点くらいありました。
ポスターの松樹路人「ベネチアン・グリーン」が印象深かった。グリーンのドレスが透けて見えるような描写と、青リンゴが印象的。
笠間日動美術館には、鴨居玲の展示が一室あり、気になっていて本も購入したので読むのが楽しみ。2 月から石川県立美術館で没後 40 年の企画展があるけれど気になる。3 月くらいに雪が積もっていなければ行ってみたいな。
美術館に行くのが好きなので、忘れないように 2025 年度に行きたい美術館をまとめました。 私は、宇都宮に住んでいるので関東地方の美術館が多くなります。
[!note] Note 開催が近くなったら、ニュース記事などを追記していきます。
| 場所 | 期間 |
|---|---|
| 東京国立近代美術館 | 3 月 4 日 ~ 6 月 15 日 |
https://art.nikkei.com/hilmaafklint/
以前、彼女のドキュメント映画を観てヒルマ・アフ・クリントを知って感銘を受け、いつか生で作品を観たいなと思っていました！今回、初の回顧展を行うとのことで絶対に行きたいと思います！
この本の著者である高田裕美さんと UD デジタル教科書体については、以前 Youtube の SCIENCE CHANNEL(JST)での動画ニュースで紹介されていて知りました。
<Youtube videoId="1JcXa2u7kX0" />
ちょうどフォントについてや、書体デザイナーについても興味があるので、この本を読んでみました。
ロービジョン(弱視)やディスレクシア(発達性読み書き障害)といった症状があることを知っていますか？私は、この本で初めて知り、教科書が読めない子どもたちがいることを知りました。フォントによっては、文字が重なってみえたり、ぼやけて見えたり、フォントの装飾が刺さるように感じる人がいる事実に驚きました。
そのような経緯を知り、著者は UD デジタル教科書体の開発を始めます。UD デジタル教科書体は、開発から 8 年を経てリリースされることになるのですが、その様々な経緯などを本書の中盤から書かれていきます。
水戸芸術館で磯崎新の回顧展を観ました。自分は以前茨城県に住んでいたのですが、恥ずかしながら水戸芸術館を設計者である磯崎新さんのことを今回初めて知ることができました。
回顧展として半世紀以上に渡るキャリアを、建築模型や図面、映像などを用いて紹介されています。自分が好きだったのは、シルクスクリーンとして遺した「還元」シリーズです。
水戸芸術館の塔は水戸市内でも特徴がある建物ですが、三角形ですべてできていることに今回はじめて気づくことができました。
ライブラリを使用せず素の WebGL で書けるようになりたいと思い、最近はいろいろ勉強してます。WebGL を触るうえで行列演算は避けては通れません。WebGL 用の行列演算の既存のライブラリだと glMatrix がありますが、今回は線形代数の勉強も兼ねて自作で作ってみました。(自作といっても、ほぼほぼ OGL の数学演算系をもって来ているだけですが)
足し算などの簡単なのは飛ばして、何をやってるか忘れそうな処理について備忘録的に書いていきます。長くなるので、主に 3x3 行列をみていきます。
数学演算系のコードは以下に置いてます。
https://github.com/nono-k/webgl-study-note/tree/main/src/lib/webgl/math
3x3 (Mat3)行列のクラスは次のようにしてます。
演算系の関数はMat3Funcで書いています。
import * as Mat3Func from "./functions/Mat3Func";
export class Mat3 extends Array<number> {
constructor(
m00 = 1,
m01 = 0,
m02 = 0,
m10 = 0,
m11 = 1,
m12 = 0,
m20 = 0,
m21 = 0,
m22 = 1
) {
super(m00, m01, m02, m10, m11, m12, m20, m21, m22);
}
// ...
}
数式で書くと次のような行列表記になります。
せっかく雑記ブログを作ったので、今月から月報をつけていくことにしました。毎年、1 年が短く感じてしまうので、あとからも振り返られるようにしたいとの思いもあります。
今月は美術館に 2 回行きました。
絵本のひみつ展では、宮城県美術館の絵本原画コレクションが展示されてる企画展でした。 今まで絵本に興味は持っていなかったのですが、はじめて原画で見て、さまざまな画材や技法の質感を目にして、絵本作家に対して興味を持つことができました。
この展示で気になった作家
「リアルタイムグラフィックスの数学」の第 8 章の 3D レンダリングについての勉強ログです。
<AmazonLink imageId="61CP8Asy52L.SY522" linkId="3Iy0agT" title="リアルタイムグラフィックスの数学 ― GLSLではじめるシェーダプログラミング" author="巴山竜来" />
地面とレイの交点を計算し、地面に市松模様をテクスチャとしてマッピングします。市松模様のテクスチャは次のようになります。
float text(vec2 st) {
return mod(floor(st.s) + floor(st.t), 2.0);
}
ここで 3D 空間のカメラの設定をします。カメラの向きを$\bm{x} = (0, 0, -1)$とし、カメラの上方向を$\bm{y} = (0, 1, 0)$とします。この値に対して外積をとることで、撮影する向きに対する水平方向$(1, 0, 0)$を得ることができます。実際の計算は次のようになります。
「リアルタイムグラフィックスの数学」の第 7 章の距離と SDF についての勉強ログです。
<AmazonLink imageId="61CP8Asy52L.SY522" linkId="3Iy0agT" title="リアルタイムグラフィックスの数学 ― GLSLではじめるシェーダプログラミング" author="巴山竜来" />
胞体ノイズでは近傍点との距離を返す関数でしたが、近くの「点」ではなく「図形」との距離を返す関数を考えます。ここでは図形との負の値もありうる距離を返す関数を導入します。これがSDF(Signed Distance Function, 符号付き距離関数)となります。
円の SDF について考えてみます。円は中心点 C と半径 r から決まりますが、C からの距離が r より小さければ円の「内部」、r より大きければ円の「外部」となり、r と等しい場合は円の「境界」です。平面上の点 P に対して、円の外部では値は正、内部では値が負とします。これが円の SDF を定めます。
「リアルタイムグラフィックスの数学」の第 6 章の胞体ノイズについての勉強ログです。
<AmazonLink imageId="61CP8Asy52L.SY522" linkId="3Iy0agT" title="リアルタイムグラフィックスの数学 ― GLSLではじめるシェーダプログラミング" author="巴山竜来" />
値ノイズと勾配ノイズは格子点でのランダムな値を使ったノイズ関数でした。一方この章で学ぶ胞体ノイズは距離を使ってつくられます。胞体（セル）とは生物の細胞などのことで、胞体ノイズは「近さ」によって空間をバラバラに分割します。
胞体ノイズは空間内に点をバラまいて、各点への距離を測ることで得られますが、バラまかれたこれらの点は特徴点と呼ばれます。ここで特徴点を$A_1,...,A_n$とします。空間内の点 P を定めたとき、P から特徴点$A_i$への距離を$d(P, A_i)$で表すと、すべての特徴点までの距離の最小値は次のように求まります。
$$ \mathrm{min}(d(P, A_1), ... , d(P, A_n)) $$
「リアルタイムグラフィックスの数学」の第 5 章のノイズの調理法についての勉強ログです。
<AmazonLink imageId="61CP8Asy52L.SY522" linkId="3Iy0agT" title="リアルタイムグラフィックスの数学 ― GLSLではじめるシェーダプログラミング" author="巴山竜来" />
再帰関数とは、関数の中で自分自身の関数を呼び出すような関数のことです。GLSL では再帰関数は使えませんが、for 文を使って再帰的な処理を行うことができます。
1 以下の定数 G に対し、1 変数ノイズ関数 noise(x)の周波数を 2 倍するごとに値を G 倍して、それを足し合わせてみましょう。式にすると次のようになります。
$$ noise(x) + Gnoise(2x) + G^2noise(4x) + ... + G^knoise(2^kx) $$
ここで素材となるノイズ関数 noise(x)はどのような関数でもいいですが、値の範囲を$[-0.5, 0.5]$区画にずらしておきます。このように加工されたノイズ関数は非整数ブラウン運動(fractional Brownian motion, fBM)と呼ばれます。
「リアルタイムグラフィックスの数学」の第 4 章の勾配ノイズについての勉強ログです。
<AmazonLink imageId="61CP8Asy52L.SY522" linkId="3Iy0agT" title="リアルタイムグラフィックスの数学 ― GLSLではじめるシェーダプログラミング" author="巴山竜来" />
前回は値ノイズについて見てきました。値ノイズは計算量も少なく、簡単につくれるノイズですが、格子で区切っているのでブロック状に見えてしまいますし、ムラが現れやすいです。値ノイズを改善したノイズが勾配ノイズになります。
値ノイズの場合は、格子点での乱数の「値」を使うのに対し、勾配ノイズは乱数のベクトル値を「勾配」として使用します。ノイズ関数でよく使用されるパーリンノイズは、この勾配ノイズの一種であります。この章では、勾配ノイズと 2002 年の Perlin による改良版勾配ノイズ（パーリンノイズ）について見ていきます。
値ノイズは乱数値をエルミート補間してつくりました。ここで別の見方として、$h(0) = 0$,$h(1) = 1$,$h'(0) = h'(1) = 0$ を満たすエルミート補間関数$h(x)$に対して、$w(x)$を次のように定義します。
「リアルタイムグラフィックスの数学」の第 3 章の値ノイズについての勉強ログです。
<AmazonLink imageId="61CP8Asy52L.SY522" linkId="3Iy0agT" title="リアルタイムグラフィックスの数学 ― GLSLではじめるシェーダプログラミング" author="巴山竜来" />
まずは 2 次元の値ノイズの構成法について見てみましょう。
平面上の正方形の 4 つの頂点（格子点）を用いて、値ノイズを構成します。各格子点での乱数値、または乱数ベクトルを使って生成されるノイズを格子ノイズと呼びます。格子点の成分は整数になるようにします。点$(x, y)$に対して床値$[]$を使って、$(x, y)$を取り囲むマスの格子点は次の 4 つのベクトルで表します。
「リアルタイムグラフィックスの数学」の第 2 章の疑似乱数についての勉強ログです。
<AmazonLink imageId="61CP8Asy52L.SY522" linkId="3Iy0agT" title="リアルタイムグラフィックスの数学 ― GLSLではじめるシェーダプログラミング" author="巴山竜来" />
GLSL ES 1.0 ではビット演算が使えないため、ハッシュ関数ではなくサイン関数を使用した乱数生成が行われていました。The Book of Shaders ではサイン関数を使用した乱数生成の方法が紹介されています。
https://thebookofshaders.com/10/?lan=jp
サイン関数自体には乱数性はないですが、サイン関数の値に大きい値をかけて桁を上げ、fractで小数部分を取り出すことで乱数のように見えることができます。
レガシー乱数の 1 変数と 2 変数のコードは次のようになります。
// 1変数のレガシー乱数
float fractSin11(float x) {
return fract(1000.0 * sin(x));
}
// 2変数のレガシー乱数
float fractSin21(vec2 xy) {
return fract(sin(dot(xy, vec2(12.9898, 78.233))) * 43758.5453123);
}
「リアルタイムグラフィックスの数学」の第 1 章の補間についての勉強ログです。
<AmazonLink imageId="61CP8Asy52L.SY522" linkId="3Iy0agT" title="リアルタイムグラフィックスの数学 ― GLSLではじめるシェーダプログラミング" author="巴山竜来" />
GLSL における mix 関数は以下のような数式になります。
$$ \bm{a} + x\overrightarrow{AB} = \bm{a} + x(\bm{b} - \bm{a}) = (1 - x)\bm{a} + x\bm{b} $$
これは、線分 AB があり、その線分上を動く 0 以上 1 以下の x に対して、線分 AB を x: (1 - x)に内分する点の位置ベクトルを表しています。上記の式のベクトルをmix(a, b, x)として定義しています。このように 2 点間をつなぐことを補間と呼び、上記の式は線形補間（Linear Interpolation）の公式です。
コード 1.1 のように、赤(1, 0, 0)と青(0, 0, 1)を mix 関数でつなぐことで 2 色のグラデーションを作ることができます。
vec2 RED = vec3(1.0, 0.0, 0.0);
vec3 BLUE = vec3(0.0, 0.0, 1.0);
vec3 col = mix(RED, BLUE, pos.x);
シェーダに再挑戦したいと思い、「リアルタイムグラフィックスの数学」の本をまた読み直してます。
<AmazonLink imageId="61CP8Asy52L.SY522" linkId="3Iy0agT" title="リアルタイムグラフィックスの数学 ― GLSLではじめるシェーダプログラミング" author="巴山竜来" />
勉強する際に、本に書いているサンプルコードを Web サイトですぐに確認できるように、Astro と Three.js を使用して GLSL コードを表示するサイトを作成しました。サイトはこちらになります。
リポジトリはこちらになります！
https://github.com/nono-k/book-of-realtime-graphics-math
いったん、本を読みながらローカルの VSCode 上で GLSL コードを書いて確認して、Web サイトに GLSL のコードと実行結果のサムネをアップしていきたいと思います。
また、このブログで勉強した内容を章ごとに残していきたいと思います。以下はリンクになります。
何度目の鑑賞だろう。急に思い出し「四月の永い夢」をみたので感想。
<Youtube videoId="pIAA0TsSFXk" />
3 年前に恋人を亡くした滝本初海。音楽教師を辞めた彼女の穏やかな日常は、亡くなった彼からの手紙をきっかけに動き出す。元教え子との遭遇、染物工場で働く青年からの思いがけない告白。そして、心の奥の小さな秘密。初海は喪失感から緩やかに解放され…。
世界が真っ白になる夢を見た。私はずっとその四月の中にいた
この映画が公開されたのは 2018 年だ。その当時、私は就活がうまくいかず実家の仙台に帰っていた。そこで 7 月にフォーラム仙台でこの映画を観た。この映画のことを思い出すと、その当時の記憶が蘇る。
この映画の描かれる時期は、7 月だ。そのことも、この映画をみなおしたいと思ったきっかけかもしれない。
Zettelkasten(ツェッテルカステン)について学びたかったので、TAKE NOTES!――メモで、あなただけのアウトプットが自然にできるようになるを読んだ感想です。
<AmazonLink imageId="71taKZfhhWL.SY522" linkId="4o8lfyX" title="TAKE NOTES!――メモで、あなただけのアウトプットが自然にできるようになる" author="ズンク・アーレンス" />
以前、クリエイティブプログラマーという本を読んだ時に、Zettelkasten という手法を編み出したニクラス・ルーマンのことを知りました。
<AmazonLink imageId="81nmtchuZoL.SY522" linkId="450JeHq" title="クリエイティブプログラマー" author="Wouter Groeneveld" />
この本をきっかけに、ニクラス・ルーマンや Zettelkasten の手法について知りたいと思い、日本語で Zettelkasten について唯一紹介されている本書を読みました。
最近、TAKE NOTES!――メモで、あなただけのアウトプットが自然にできるようになるという本を読みました。この本を読んで、Zettelkasten というメモの方法を知り、自分の言葉で考えてメモを書くことの大切さを知ったので、Zettelkasten の手法を実現できるツールとしてObsidianをはじめてみました。
この記事では、整理のために自分の Obsidian の設定と使い方を紹介します。
<AmazonLink imageId="71taKZfhhWL.SY522" linkId="4o8lfyX" title="TAKE NOTES!――メモで、あなただけのアウトプットが自然にできるようになる" author="ズンク・アーレンス" />
この本の紹介記事はこちら
<RecommendLink items={[ { title: "「TAKE NOTES!――メモで、あなただけのアウトプットが自然にできるようになる」を読んだので紹介", link: "take-notes-book", image: "take-notes-book.jpg", }, ]} />
Obsidian を始める前から、手帳やメモ帳などに、休みの日にやったことや、本や映画の感想を書いていました。このブログをはじめたきっかけも、それらを手書きで書いていても、見返さないのがもったいないのと、どうせなら公開を意識して残しておこうと思い、このブログをはじめました。
ブログをはじめたのは良かったですが、意外に手軽に公開するのもハードルに感じていたので、ローカルでメモを管理できるツールとして Obsidian をはじめてみました。
2025 年は、機動戦士 Gundam GQuuuuuuX(ジークアクス)が放映された年でした。自分は途中からのリアルタイム視聴ができ、いろいろ不満がありながらも面白く一気見しました。
ちょうど 4 年前に「機動戦士ガンダム 閃光のハサウェイ」を劇場で観て、ガンダム熱が再熱してしまってファーストガンダムから V カンダム、F91 までの小説版を購入して読んだので、今回もまた GQuuuuuuX を見たきっかけで小説版を再読しようと思いました！
4 年前のガンダム熱が再熱したツィート...
<Twitter url="https://x.com/kameno_no3/status/1421415599486365697" />
初代ガンダムを小説化したシリーズで、全 3 巻が発売されています。角川スニーカー文庫版を読みました。
<AmazonLink imageId="81GrNu1kooL.SY522" linkId="4o6HLIz" title="機動戦士ガンダム〈1〉 (角川文庫―スニーカー文庫)" author="富野 由悠季" />
小説版のガンダムは、アニメシリーズとは全然別物になっています。具体的には、ララァが第 1 巻の後半で登場するが、あっというまに退場したり、その後に小説オリジナルのニュータイプとして「クスコ・アル」なるキャラが登場したりします。
また、GQuuuuuuX の重要人物のシャリア・ブルはアニメ版では 1 話だけの登場でしたが、小説版では登場回数は多いです。
モビルスーツに関しても、第 1 巻でアムロが乗るガンダムが大破し、マグネットコーティングが施された G-3 ガンダムが登場します。シャアが乗るモビルスーツも、ジオングもゲルググも登場せずにシャア専用リック・ドムが登場します。
技術ブログを複数運営しているのですが、CSS などのプロパティで一部のブラウザのみでしか対応していないものがあります。その際に、ブラウザの対応状況を表示するコンポーネントを入れておくと、ブラウザの対応状況が分かるので、ブログを見ている人にも分かりやすいと思います。
↓ 運営している技術ブログ
https://hypb.dev
https://feylo.dev
今回紹介する Baseline Status Web コンポーネントは、ブラウザの対応状況を表示するための Web コンポーネントです。このコンポーネントをブログ内で使用することで、ブラウザの対応状況を簡単に表示することができます。この Web コンポーネントを Astro 製のブログと Nuxt 製のブログで使う方法を紹介します。
使用イメージは ↓ のような感じになります。
<BaseLineStatus featureId="anchor-positioning" />
npm でbaseline-statusをインストールします。
npm install baseline-status
使用する際はそのまま import して表示する featureId を指定するだけで上記のような感じで表示されます。
import "baseline-status";
<baseline-status featureId="anchor-positioning" />
この度、初学者向けの Web 制作についてのメディアサイト「Feylo」を作成したので紹介します！ 技術的には、Nuxt.js を使用して作成しました！技術的な部分はコードを見ていただければなので、この記事ではデザインに関して参考にしたサイトなどを紹介します。
https://feylo.dev
リポジトリは下記で公開してます！
https://github.com/nono-k/feylo
このメディアサイトを作成するにあたり、参考にしたサイトを紹介します。
https://jy-contents.com/
前から Web 製作についてのメディアサイトを作りたいと思っていたのですが、当初はブログサイトみたいな感じなのでアニメーションなどは付ける予定はありませんでした。
ですが、このサイトを見てブログサイトなのに、すごく目立っていて印象に残るサイトで良いなと思ったので自分が作ったサイトもアニメーションを駆使して初見で目立ち印象に作るサイトにしたいと思い作成しました。
文字の無限ループや、ホバーアニメーション、ハンバーガーメニュー、ブログ詳細のページ、ランダム記事など多くの部分で参考にさせていただきました。
個人開発で Nuxt.js を使用していたのですが、Vue は 2 の知識しかなく、最新の Vue3 を使ったことがなかったので、どの部分が Nuxt.js の部分なのか分からず、一度書籍で体系的に Vue3 を学びたいと思ったのでこの本を読みました！
<AmazonLink imageId="81OflqP3DAL.SY522" linkId="44xq4c4" title="Vue 3 フロントエンド開発の教科書" author="WINGSプロジェクト 齊藤 新三" />
「Vue3 フロントエンド開発の教科書」は、Vue.js の最新バージョンである Vue 3 と TypeScript を使って、フロントエンド開発を本格的に学びたい人におすすめの書籍です。この書籍では、Vue3 の基礎から Vite を使用した実行環境の作成、Vue Router を使ったルーティングの設定、Pinia による状態管理、Vitest を使ったユニットテストの方法まで体系的に学ぶことができます。
この本は全 13 章で構成されており、全ページ数は 415 ページになります。
ざっとこの本の章を紹介します。
普段、仕事では Astro などのフロントエンドフレームワークは使えず、Pug と Gulp で制作しています。
毎回、imgタグにwidthとheight属性を手動で付けるのは大変なので、自動で付与されるようにしました。
以前、技術ブログの方で解説した Gulp と Pug の制作環境に追加していきますので、こちらの記事も参考にしてください。
https://hypb.dev/articles/gulp-template
リポジトリはこちらになります。
https://github.com/nono-k/gulp-template
ざっくりとした方針としては、Pug で画像を表示する Mixin を作成し、その引数に画像のパスを渡すことで、画像のサイズを取得して、widthとheight属性を自動で付与できるようにします。
インストールするものとして、Node.js から Pug ファイル内にデータを渡せるように、pug-dataを。また、画像ファイルのサイズを取得できるimage-sizeもインストールします。
npm install --save-dev pug-data [email protected]
Web クリエイターボックスみたいに読んだ本リストを自分のプラットフォームで管理したいと思い、このブログ内に読んだ本リストを追加しました。サイドバーにリンクがあるので覗いてみてください！
読んだ本の管理に microCMS を使ったので、Astro 製のブログで本の管理を microCMS で行う方法をまとめます。まだ、データ数が少ないのでページネーションは実装してないのですが、実装したら追記します。
microCMS のアカウントを作成して、コンテンツ(API)を作成し API 設定をしましょう。下記のように設定します。
読んだ本リスト API のエンドポイントは book にしました。
本のリストなので、自分は下記のように設定しました。
| フィールド ID | 表示名 | 種類 |
|---|---|---|
| title | タイトル | テキストフィールド |
| review | レビュー | リッチエディタ |
| url | Amazon リンク | テキストフィールド |
| cover | 表紙画像 | テキストフィールド |
| author | 著者 | テキストフィールド |
| publishedDate | 発売日 | 日時 |
| category | カテゴリー | コンテンツ参照 |
| postlink | 紹介記事 | テキストフィールド |
このブログと技術ブログは、Astro の Content Collection を使ってマークダウンでブログを書いていて、記事は GitHub で管理してます。
Astro の Image コンポーネントを使うために、ブログ記事の画像も src/assets/images/配下に配置していました。しかし、ローカルで画像を管理したくないなと思ったので Cloudinary を導入してみました。
Astro での Cloudinary の導入方法について、この記事では紹介します。 Cloudinary の詳しいオプションなどは解説しないのと、Cloudinary のアカウントが既にあるのを前提に説明します。
まだの方は下記 URL からアカウントを作成してください。
https://cloudinary.com/
Astro で使える Cloudinary のコンポーネントが用意されてます。下記コマンドで Astro Cloudinary をインストールしましょう。
npm install astro-cloudinary
インストールできたら、プロジェクトのルートに.envファイルを作成して、Cloudinary のアカウント情報を記述します。
PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"
Web 制作に関して書いている技術ブログの方で、1 年越しでアドセンスに合格したので、その経緯について書いていきます。
同じようにブログをやっていて、なかなかアドセンスに受からない…と悩んでいる方の参考になれば幸いです。
https://hypb.dev
未経験から Web 制作会社に転職してから半年が過ぎた頃、日々の学びや試行錯誤をアウトプットする場所が欲しくてブログを始めました。（あとは少しの収益が欲しかった笑）
技術系の内容がメインで、以下のような記事を書いていました。
「どうせ書くなら収益化もできたら嬉しいな」と思い、ブログ開設から数記事でアドセンスに申し込んでみたのですが…
最初の審査結果は「不合格」。理由は「価値の低いコンテンツ」とのことでした。
2025-05-11 に「まど・みちおのうちゅう」宇都宮美術館の企画展に行ったのでその日記 すごく刺激になった。
「ぞうさん」「やぎさん ゆうびん」など、誰もがいちどは口ずさんだことのある童謡の作詞者として、また平明な日本語で生命や事物の存在を寡黙に言祝ぐ詩の紡ぎ手として親しまれ、2014 年に 104 歳でこの世を去った詩人まど・みちお(1909-2014)。 50 代前半の一時期、彼は人知れず絵の制作に没頭しました。その多くは「この世にあるもの」をなぞらずに生まれて来た抽象画です。詩人の故郷に建つ周南市美術博物館のコレクションから精選した作品群を中心に、ときに苛烈さを秘めながらも慈しみをたたえ、宇宙に直結するかのような深い響きを宿す絵の数々をまとめて展観します。 絵画作品約 60 点に加え、原稿、創作ノートや書籍などの資料約 240 点を展示。この稀有な詩人の足跡、そしてその心に映った宇宙の姿をたどります。
まど・みちおさんは童謡の作詞や詩人として有名ですが、絵を描いていたことを知らなかったので、その絵を見ることができて良かったです。
絵を描いていた時期は、1961 年から 1964 年にかけての 4 年間が主で、本展覧ではその時期に描かれた抽象画が展示されていました。また、スケッチや創作ノート、まど・みちおさんの 100 歳を超える生涯の歩みをたどれる資料も展示されていました。
https://www.artpr.jp/u-moa/madomichio2025
フォントやタイポグラフィについて勉強したいと思い、フォント関連の本を読んでいきたいと思います。 手始めに読んだ「フォントのふしぎ」が良かったので紹介します。
<AmazonLink imageId="51Dtxr9LBSL" linkId="4nIcZFK" title="フォントのふしぎ ブランドのロゴはなぜ高そうに見えるのか？" author="小林章" />
この書籍は 2011 年に出版された本です。著者は「小林章」さんで、ドイツ在住の欧文フォントの書体デザイナーです。他にも欧文書体などの本も書かれております。
海外に在住している書体デザイナーの著者が、街角で見つけたロゴや看板などの文字に関して写真を載せ、それをもとにフォントの話を展開していくという構成になっています。
カラーで写真も豊富に載っているので、見ていてとても楽しいです。
この本の魅力のひとつが、タイポグラフィの専門書でありながら、とても親しみやすい口調で書かれていることです。
たとえば、こんな一文があります。
「いっぽうで、1 とアイがまったく同じようなデザインのフォントもある（183 ページ）。別にどっちがイイとか悪いとかじゃないんで。」
こんなふうに、小難しい話をわかりやすく、時にはちょっと笑えるような軽やかさで解説してくれるので、まるで話のうまい先生の授業を聞いているような気分になります。
また、ヨーロッパで撮影された実際の看板や街中の文字を写したスナップ写真も豊富に掲載されていて、「フォントが使われている現場」の臨場感をリアルに感じられるのも大きな魅力です。そこにはきちんとフォント名とメーカー名も添えられているので、実用的な知識としても役立ちます。
2025-05-05 に大川美術館と館林美術館に行ったのでその日記
リニューアル記念展とのことで、GW に行きたいと思っていた大川美術館に行ってきました。
松本竣介は 1912(明治 45)年に生まれました。太平洋美術研究所(後に学校)に学び、二科会、新人画会、自由美術家協会を中心に作品を発表、戦後間もない 1948(昭和 23)年に亡くなっています。この間、当時の多くの日本の洋画家達がヨーロッパの新しい美術思潮に大きな影響を受けその画業に反映してきましたが、松本竣介もその一人で、とりわけエコール・ド・パリの画家たちに強い関心を寄せます https://artscape.jp/exhibitions/35350/
大川美術館の創設者大川栄二（1924－2008）が、美術コレクションをはじめるきっかけとなったのが松本竣介の作品でした。その松本竣介が関心を寄せていたエコール・ド・パリの画家たちと松本竣介の作品を展示していました。
松本竣介が集めたエコール・ド・パリ関連の蔵書やスクラップブックなどを展示してあり良かったです。
今回の展示の松本竣介作品で街が印象的でした。どことなくシャガールに影響を受けた感じがして好きでした。
また、ポスターのメインビジュアルにあるモディリアーニの「少女の肖像(ジャンヌ・ユゲット)」も見られて良かったです。
余談ですが、モディリアーニの伝記映画の「モンパルナスの灯」は自分の好きな映画の一つです。
Astro で作ったサイトを GitHub Pages にデプロイする方法について紹介します。 GitHub Pages を使うことで簡単に作ったサイトを公開することができます。
基本的には公式サイトのドキュメント通りにやればできるでしょう。 ここではカスタムドメインを使わないリポジトリ名が後ろにつくデプロイ方法を紹介します。
https://docs.astro.build/ja/guides/deploy/github/
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 にはデプロイするリポジトリ名入れてください。
雑に書ける場所が欲しくなったので、Astro で 2 個目の個人ブログを作成しました。 普段は、👇 の技術ブログで主にフロントエンドに関しての記事を書いています。
https://hypb.dev
上記のブログでは、技術系しか書けない感じになっていたので、こちらではもっと雑にインターネット上に残していきたいと思います。
Aboutページに書いてある通り、音楽・映画・小説などが好きなので、それらに関する記事を書いていきたいです。
デザインに関しては、Astro テーマのFuwariを参考にして作成しました。 ほぼ丸パクリですが、Fuwari テーマを見て雑記ブログを作りたいと思ったのでこれで良しとします。
フォントは日本語はKiwi Maru、英語はIBM Plex Monoを使っています。フォントのおかげで可愛い感じが出て良かったです ✨
Fuwari テーマの方は、Svelte や swup を使ってたりでカスタマイズするのが難しそうな感じですが、自分の作成した本ブログはコードも分かりやすく作成したので、サクサク作成することができました！
## レベル1
### レベル2
#### レベル3
ネストも可能。
- ul-1
- ul-2
- ul-2-1
- ul-2-2
1. ol-1
2. ol-2
kamenono / かめのの
音楽・読書・数学・プログラミングが好き。
SNS 関係は下記です。フォローはお気軽にどうぞ。
私を構成する 42 枚は下記です。
趣味が合う人がいたら仲良くしてください。
