BlazeChariot - ギターを弾き語れ!-11ty/eleventy-

About me

Hidekichi

小学児童の頃、今のNagabuchiではないTsuyoshiと呼ばれていた長渕剛の曲に影響を受けてギターを覚えようとする。10歳上の兄が使っていたCat’s Eyesというアコースティックギターをいじろうとして見つかっては泣かされ、ペグの方向が不揃いだと全部揃えてあげたら頭が変形しそうなほど殴られたりもしながら、10歳ぐらいでなんとかギターを教えてくれと兄に懇願し、数カ月の後、C、Am、Dm、G7という4つのコードと、ドレミの位置だけ教えてもらえる。以降独学でギターを覚える。

小学校の帰り道、自分家の前を同級生の女の子が通る時になんとなしにギターの音が漏れて聞こえはしないかと(よこしま)な考えがギターを始める動機だったが、才能があったのかなかったのか小学5年生の頃にはたいていの曲を弾けるまでになる。

どうしても握力が足りず「F」で3度挫折しそうになったが、体の成長に伴い問題なく弾けるようになると同時に、「あれ?バレーしなくてもいいじゃん」ということに気づき始める。

中学時代、女の子にモテたい気持ちはより一層高まり、サッカーとギターと恋に明け暮れる。毎日ギターを暇があったら弾くようになる。現在のようにインターネットがどこでもあるような時代ではなかったので、テレビで音楽番組を見ながら、どうやって弾いているかを研究したりもするようになった。

高校時代、エレキギターと、エレアコをバイトして購入。エレキを始めたことで聞く曲の幅が広がり、サザンオールスターズやビートルズからLOUDNESSまでわけのわからないぐらいの多岐にわたる曲を聞く。

普通なら、この頃の学生時にはコンサートに行ったり、ライブハウスに入り浸ったりするもんだが「俺は自分で弾けるし」と新譜が出るごとにギターコードを追いかけているような青春であった。

時は2000年ちょっと前。パソコンにも興味を持っていたのも相まって、「ギターを弾き語れ!」を公開する。教本のようなアプローチではなく、もっとアバウトに独自理論で解説はできないものかと試行錯誤し、いくつかのサイト移転などを含めて現在に至る。

サイト概要

このサイトはstatic site generator(静的サイトジェネレーター)である、11ty/eleventy によって作成されています。

static site generator(SSG)とは、Wordpressなどがデータベースからそのデータを読み取り動的にサイトを構築しているのに対して、元になるMarkdownファイルなどからhtmlを生成します。その場でその都度組み立てるのではなく、出来あがったものを表示しているため軽量であるのが特徴の一つです。
もちろんJavascriptは使用できますし、Tailwind.cssなどを組み込む事もできます。他のcssフレームワークも使用できます。

出来あがったものを公開しているということはローカルで組み立てるわけですが、ここにはnode.jsをベースにしているため、VS CodeやZedなどのテキストエディタ(コードエディタ)があれば開発できるようになっています。
Wordpressや昔使用していたGRAVなどであれば、レンタルサーバーにPHPの環境が必要で、またそのバージョンによっては動作しなかったりもあるので、そういったある程度クリアしなくてはいけないそれら環境は不要になります。

  • 2025/2/25現在、Gravで要求するPHPのバージョンは 7.3.6以上 になります。
  • windowsを使用していて、上述リンクからnode.jsへ行くとダウンロード方法がいくつかありますが、全くの初心者は下の方にあるインストーラーをダウ ンロードして導入するのが良いかと思います。
  • LinuxやmaxOSでは、コマンド次第ですがターミナルから入れる感じかと。
  • これら導入方法は他の解説サイトなどを参考にして導入して下さい。

サイトができるまでは、ローカルでいじれるので、その間に色々と下調べしてみてください。
例えば公式サイトには、ここで使用している以外にもいくつもスターターキットがあります。それらで見るべきは面倒な部分が組み込まれているかどうかわかりやすいドキュメントがあるかどうかです。
日本人の作者もどこかを探せばいるのかも知れませんが、たいていは英語で書いてあるので最小限HTMLやその他諸々の知識が必要な場面もあるかと思います。最近ではAIもあるのでたいていは何とでもなります。

Markdownで記事を書き、画像を用意してCSSでスタイルするというだけの事ですのでベースキットがどんなものであろうと後から好きなようにできるわけですが、Tailwind.cssが最初から使えるかどうかやPostCSSでcssを整えて更にはjavascript共にminify化してくれるとか、これらも後でどうとでもなる部分ではあるものの最初からキットに組み込んであればほとんどそのまま使うことができます。

こちらではNetlifyで公開していますが、Github pagesでも公開が可能です。

Youtubeの動画プレイヤー読み込みは、管理人オリジナルのjavascriptによって実装されています。
参考: Youtube address convert to embed iframe

ベースのテンプレートに、 chrissy.develeventy-web-starter を用いて、それを魔改造して使用しています。古いスターターキットなのでもう原型はほぼ無いぐらいになっています。

これらは、githubを見てもらえれば詳細なスペックが書いてありますが、色々面倒くさいところを自動化してくれているので、取っ付きにくくはありますが、一度動作してしまえばとても便利にローカルで開発もできて助かります。