実際にこれだけ引き出しがあるギタリストだからこそということなんだろうと思うし、やはりそれは、様々なバンドでギターを弾き、サポートギターとして数々のアーティストを支えてきた経験の積み重ねがあるからなんだろう。 The Youth も LOST IN TIME もステファブも la la larks もぜんぜん違うバンドだし。
ちなみにステファブの現在のドラムは School Food Punishment でドラムを務めた比田井修氏で、最近は緑黄色社会のサポートドラムとして活躍中。「ぼっち・ざ・ろっく！」でもドラムの演奏を担当しており、8話の『ギターと孤独と蒼い惑星』のもたついたドラムは氏の演奏による。もたついたドラムの再現うますぎひん……？というのと、紅白に出るようなバンドのサポートドラムにこんなことさせるの贅沢～というのがある。ていうか虹夏のドラムをこんなイケオジが叩いてるの渋すぎるでしょ……。
Google アナリティクスを設定するかどうか聞かれる。どちらでもよいと思うが、ごく個人的な意見としては、アナリティクスを眺めてサイトの運営を熱心にやっていくつもりでなければ、特に設定しなくてもよいと思う。アナリティクスを無効にして先に進めると即座にプロジェクトが作成される。アナリティクスを有効にする場合は「続行」して各種設定を行うこと。
というコマンドで c:\projects\my-website に移動する。cフォルダを移動するには cd というコマンドを使うと覚えてほしい。
移動したら、
firebase init
を実行。
「 Are you ready to proceed?（準備はいい？）」と聞かれるので、Enter。
なんか選べと言われるので、
上下キーでカーソルを移動し、「Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys」にカーソルをあわせ、スペースキーを押してチェックを入れる。チェックが入ったら Enter。
「Please select an option」 と言われるので、「Use an existing project」を選んで Enter。
「What do you want to use as your public directory?」と聞かれる。アップロード対象のフォルダをどうするかという質問で、デフォルトは public というフォルダになっている。基本はこのままでよいが、今回は _site という名前にする。_site とタイプして Enter。続く「Configure as a single-page app (rewrite all urls to /index.html)?」は設定する必要はないので、そのまま Enter を押せばよい。「Set up automatic builds and deploys with GitHub?」も同様に何も設定しなくてよいので、そのまま Enter。ここまでで設定が完了する。
11ty のテンプレート機能を使うと、テンプレートとなる HTML に内容を流し込んで完成された HTML を出力することができる。head 要素の中身を毎回書くのは大変なので、使い回したい。使い回したい部分はテンプレートに書き、ページごとに変わる内容だけを各ファイルに書いていくというのがやりやすいし更新しやすいし持続可能である。そして、流し込む内容を Markdown で記述すれば、HTML を書かずに、プレーンテキストに近い形でサイトの内容を記述できる。
というわけで、実際のページの内容が書かれた index.md を作ろう。
---
layout: index.njk
title: 今すぐはじめられる個人ウェブサイト
---
# 個人ウェブサイトのつくりかた
個人ウェブサイトの最小構成は一枚の HTML ファイル。「最近は CSS を覚えないとうんぬんかんぬん」ということを20年前から言われているが、まずやるべきことは一枚の HTML を書くこと。CSS はその後。
# HTML とはなんぞや
原稿となるテキストデータに対して「ここは見出しにしたい」「ここは太字にしたい」という注釈をつけるとウェブブラウザがその注釈にそってきれいに表示してくれるというファイル形式。これが一番シンプルな説明だと思う。この注釈をつけることをマークアップすると呼ぶから HTML のようなものを指してマークアップ言語と呼ぶし、HTML の ML は Markup Language の略である。
個人ウェブサイトの最小構成は一枚の HTML ファイル。「最近は CSS を覚えないとうんぬんかんぬん」ということを20年前から言われているが、まずやるべきことは一枚の HTML を書くこと。CSS はその後。
HTML とはなんぞや
原稿となるテキストデータに対して「ここは見出しにしたい」「ここは太字にしたい」という注釈をつけるとウェブブラウザがその注釈にそってきれいに表示してくれるというファイル形式。これが一番シンプルな説明だと思う。この注釈をつけることをマークアップすると呼ぶから HTML のようなものを指してマークアップ言語と呼ぶし、HTML の ML は Markup Language の略である。
HTML の中でブラウザに表示される本文は body 要素のコンテンツ、つまり <body> から </body> までの中身である。 head 要素は、「この HTML はこのような属性を持った文書である」ということを示すための内容で、言ってみればその HTML ファイル全体についての属性づけを行う部分である。title 要素がブラウザのタイトルバーとかタブとかに表示されるページ名になるので、ここは適宜書き換えてよい。最小限の HTML では、それ以外は特にいじらなくてよい。
p 要素は段落を表す。なぜ段落をあらわすためにタグがあるのか。body 要素を以下のようにして実際に HTML として表示するとどうなるか見てみよう。
<body>
【個人ウェブサイトのつくりかた】
個人ウェブサイトの最小構成は一枚の HTML ファイル。「最近は CSS を覚えないとうんぬんかんぬん」ということを20年前から言われているが、まずやるべきことは一枚の HTML を書くこと。CSS はその後。
【HTML とはなんぞや】
原稿となるテキストデータに対して「ここは見出しにしたい」「ここは太字にしたい」という注釈をつけるとウェブブラウザがその注釈にそってきれいに表示してくれるというファイル形式。これが一番シンプルな説明だと思う。この注釈をつけることをマークアップすると呼ぶから HTML のようなものを指してマークアップ言語と呼ぶし、HTML の ML は Markup Language の略である。
</body>
<body>
<p>【個人ウェブサイトのつくりかた】</p>
<p>個人ウェブサイトの最小構成は一枚の HTML ファイル。「最近は CSS を覚えないとうんぬんかんぬん」ということを20年前から言われているが、まずやるべきことは一枚の HTML を書くこと。CSS はその後。</p>
<p>【HTML とはなんぞや】</p>
<p>原稿となるテキストデータに対して「ここは見出しにしたい」「ここは太字にしたい」という注釈をつけるとウェブブラウザがその注釈にそってきれいに表示してくれるというファイル形式。これが一番シンプルな説明だと思う。この注釈をつけることをマークアップすると呼ぶから HTML のようなものを指してマークアップ言語と呼ぶし、HTML の ML は Markup Language の略である。</p>
</body>
だいぶ読める
段落わけをしたことでだいぶ読めるようになった。
さて、見出しのために 【 と 】 と括っているが、こういうものこそ HTML で表現すべきだろう。
<body>
<h1>個人ウェブサイトのつくりかた</h1>
<p>個人ウェブサイトの最小構成は一枚の HTML ファイル。「最近は CSS を覚えないとうんぬんかんぬん」ということを20年前から言われているが、まずやるべきことは一枚の HTML を書くこと。CSS はその後。</p>
<h1>HTML とはなんぞや</h1>
<p>原稿となるテキストデータに対して「ここは見出しにしたい」「ここは太字にしたい」という注釈をつけるとウェブブラウザがその注釈にそってきれいに表示してくれるというファイル形式。これが一番シンプルな説明だと思う。この注釈をつけることをマークアップすると呼ぶから HTML のようなものを指してマークアップ言語と呼ぶし、HTML の ML は Markup Language の略である。</p>
</body>
一気に HTML になった
これが HTML である。まだハイパーテキストではないが、少なくともマークアップされた文書になった。基本的にこれだけわかればよい。
これ以外にも CSS でできることはたくさんあるが、たったこれだけで、世にあるブログとそんなに変わらない本文の HTML になる。もうちょっと余白を調整したりということをしたくなったら都度 CSS を調べる必要はあるし、HTML もこれ以外に画像を表示したり太字にしたりリンクを張ったりということをしようと思うとそれぞれ調べる必要がある。ただ、本当にたったこれだけで文章だけの日記レベルのことは表現できる。思ったよりむずかしくないでしょ？
今書いたことは、インターネット老人がたびたび話す「昔はメモ帳で HTML を書いて FTP でアップしてホームページを運営していたのじゃ……」から実はそんなに変わっていない。当時の人々はこういうものを書いていた。実際にはウェブサイトのトップページなどはもうちょっと複雑だったりするが、更新されるコンテンツはだいたいこのようなものである。
もし HTML に興味を持って、HTML を勉強してみようかなと思った人は、MDN に極めて丁寧かつ正確なガイドがある。
ちょっと硬めの内容だが、過不足なく、ほぼ正確な HTML の仕様を、実践と知識の両面で学ぶことができる。作っているのは Firefox の開発などを行っている Mozilla という組織で、非営利なので Google や Microsoft に比べて中立だし、だからこそ責任を持ったコンテンツになっている*1。
Alias over the Azure
2004年に開設した個人ウェブサイト。サイトの名前も URL も、自分のハンドルネームさえも当時からは変わったけれど、ここをベースに情報発信をしてきた。昔はドット絵掲示板が置いてあったりしたし、コミケへのサークル参加情報もここに集約されてきた。一時 Wordpress によって管理されていたことがあるが、Wordpress の DB 破損によって吹き飛んでしまったのがかなしい。
今は半手書きの HTML のサイトになっている。
