このブログでのMarkdown記法の一覧

このブログでのMarkdown記法の一覧

目次

見出し#

見出し
## レベル1
### レベル2
#### レベル3

リスト#

ネストも可能。

リスト
- ul-1
- ul-2
  - ul-2-1
  - ul-2-2
  • ul-1
  • ul-2
    • ul-2-1
    • ul-2-2

番号付きリスト#

番号付きリスト
1. ol-1
2. ol-2
  1. ol-1
  2. ol-2

インラインスタイル#

強調#

強調
これは**強調表現**になります。

これは強調表現になります。

取り消し線#

取り消し線
これは~~取り消し線~~になります。
 
<! -- or -->
これは~取り消し線~になります。
 

これは取り消し線になります。

斜体#

斜体
これは*斜体*になります。

これは斜体になります。

脚注#

脚注
これは脚注です[^1]。
 
[^1]: これは脚注の内容です。

これは脚注です1。

区切り線#

区切り線
---

リンク#

URL 直書き#

URL 直書きでリンクカードになります。

URL直書き
https://hypb.dev
нуль
Web技術を知る・試す・楽しむためのテックブログ
нуль favicon
hypb.dev
нуль

インラインリンク#

インラインリンク
私については[こちら](https://munus.dev/about)

私についてはこちら

画像#

画像は assets/images/blog/[year]/[month]に入れる。

画像
!['ダミー画像'](../../../../assets/images/blog/dummy.webp "ダミー画像")

'ダミー画像'
ダミー画像

表組み#

表組み
| 指定なし | 左揃え | 右揃え | 中央揃え |
| -------- | :----- | -----: | :------: |
| a        | b      |      c |    d     |
指定なし左揃え右揃え中央揃え
abcd

コード#

インラインコード#

インラインコード
`inline code`はこう書きます。

inline codeはこう書きます。

コードブロック#

コードブロック
console.log("Title example");
Highlightingコードブロック
function hoge() {
  console.log("Title example");
}

引用#

ブロック引用

コールアウト#

remark-calloutを使用してます。
コールアウトを使うときは以下のように記述します。

コールアウト
> [!note] Note
> Lorem ipsum dolor sit amet, consectetur adipiscing elit.

現状、以下のようなコールアウトを用意しています。

typedescriptioncolor
Note注釈default
Success成功green
Info情報violet
Example例violet
Faq質問amber
Warning注意red
Bugバグred
Note

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Success

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Info

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Faq

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Warning

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Bug

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

埋め込み#

Astro のコンポーネントを利用していくつかの Web サービスを埋め込むことができます。

Youtube#

Youtube
<Youtube videoId="9GkVhgIeGJQ" />

Spotify#

Spotify
// トラック
<Spotify trackId="3mcxHfLGMkv8PpGatFVkIm" />
 
// アルバム
<Spotify albumId="54DjkEN3wdCQgfCTZ9WjdB" />

SoundCloud#

SoundCloud
<SoundCloud query="367488743" />

Amazon リンク#

Amazon リンク
import AmazonLink from "@/components/markdown/AmazonLink.astro";
 
<AmazonLink
  imageId="41OSXObwCOL._SY425_"
  linkId="4kpJMw8"
  title="バウハウス (コンパクトミディ・シリーズ)"
  author="マグダレーナ・ドロステ"
/>

CodePen#

CodePen
<CodePenEmbed penId="jORZoNe" title="Matrix Rain with Canvas" />

Baseline Status#

Baseline Status
<BaselineStatus featureId="anchor-positioning" />

Twitter / X#

Twitter / X
Twitter url="https://x.com/kameno_no3/status/1784879479430525070" />

数式#

インライン数式#

インライン数式
$a^2 + b^2 = c^2$ はインライン数式です。

a2+b2=c2a^2 + b^2 = c^2 はインライン数式です。

ブロック数式#

ブロック数式
$$
\forall \epsilon > 0, \exists \delta > 0 \text{ s.t. } |x - a| < \delta \Rightarrow |f(x) - b| < \epsilon
$$
∀ϵ>0,∃δ>0 s.t. ∣x−a∣<δ⇒∣f(x)−b∣<ϵ\forall \epsilon > 0, \exists \delta > 0 \text{ s.t. } |x - a| < \delta \Rightarrow |f(x) - b| < \epsilon

Footnotes#

  1. これは脚注の内容です。 ↩

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

はじめに

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

変更後のTopページ

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

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

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

Meta Data
公開日:2026-02-06
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で雑に書ける個人ブログを作りました
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