自作 HP 作成のための備忘録【GitHub Pages】

bakkyalo.github.io

↑ コレを作る上で考えたことや調べたことを忘れないようにここにまとめることにします。

とりあえず雑多な状態で公開しておきますが、随時更新予定。

目次
(筆者の) 環境
KeyWords
前提*1
おおまかな方針
HTML のインクルード
テーマ
Jekyll
- レスポンシブ
SEO
はてなブログのリンクカードを使う
- 参考
更新履歴の管理
HTML & CSS Tips
- dl/dt/dd の見た目をデフォルトの ul/li っぽくする
csv を読み込んで table にする
CSS 関連
JavaScript 関連
OGP
𝕏 関連
- カード
- ポストする
所感

(筆者の) 環境

Windows10 Pro → Windows11 Pro
WSL2 (Ubuntu 20.04 LTS) → Ubuntu 22.04.06 LTS
VcXsrv → WSLg
VSCode
- Remote WSL

KeyWords

CORS

前提*1

Windows10 に Ubuntu を入れ、VcXsrv と fcitx を導入する。

Windows11 の場合、 WSLg のお陰でデフォルトで GUI が使えるらしいので、Ubuntu を入れるだけで良いっぽい。いいね。
Ubuntu は Microsoft Store で導入可。むしろ (後に更新することを考えると) そうした方が良い。
(以下 Windows10 での話) VcXsrv はスタートアップに入れておくと楽。
- WSL2 でやろうとすると案外難儀する。~/.bashrc等に以下を追記してうまくいくことを祈る。

export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}'):0

日本語入力メソッドはいろいろあると思うが、ここでは fcitx-mozc を使うことにする。

$ sudo apt install fcitx-mozc
$ export QT_IM_MODULE=fcitx
$ export DefaultIMModule=fcitx
$ export GTK_IM_MODULE=fcitx
$ export XMODIFIERS=@im=fcitx

をして、~/.bashrc 等に

fcitx-autostart

を追記すればいいと思う。シェル起動前に X11 が動いていないとエラるのでそこだけ注意。

おおまかな方針

GitHub Pages で HTML + CSS + JavaScript する
- About Github Pages
- サーバー無料*2
- Ruby, PHP, MySQL ... 等のサーバーサイドの言語は使えない
VSCode
- Windows 上にインストール*3
- ターミナルを WSL2 にする*4
- 拡張機能 Live Server を入れる*5

HTML のインクルード

PHP が使えないので必然的に JavaScript になる。

jQueryのAjaxを使って外部HTMLの一部を抜き出し挿入する - Qiita

GitHub Pages でも SSI (Server Side Include) は使えるっぽいので、これでもできるかも？

ウェブ開発全般/Github Pages - yanor.net/wiki

fetch API を使う方が楽？？

The Simplest Ways To Handle HTML Includes | CSS-Tricks

もしくは、後述する静的サイトジェネレーターを利用する手もある。

テーマ

HTML の include 以上の何か抽象化をしないと全ページの一括レイアウト変更に対応できない。GitHub Pages でも可能な選択肢としては

css + js でゴリ押し
Jekyll
HUGO
Next.js

Jekyll

jekyllrb-ja.github.io

静的サイトジェネレーター。

テーマの概念を具現化できる。パンくずリストの自動生成や、大体同じものが入る <title>, <h1>, <meta property="og:title"> に自動で同じ文字列を与えることなどはこれでできる。

Jekyll の何となくのイメージ図。`_layouts/default.html` が骨組みとなる部分で、`_includes/` 以下には共通になる部分などを入れておく。`jekyll serve` コマンドを打つなどすれば `_site/` 以下にレンダリングされたファイル群が生成されるが、GitHub Pages ではこの処理を自動でやってくれるので、`_site/` 以下を `.gitignore` に入れておく。

GitHub Pages が自動で deploy してくれるが、いちいち push する必要があるし、反映に十数分掛かる。ローカルで挙動を確かめるには Ruby やその他一式をローカルに入れる必要がある。あとは公式の document を読んでくれ。

bundle init
bundle

Gemfile ができるので、以下を追記

Gemfile

gem "jekyll"
gem "jekyll-sitemap"
gem "jekyll-seo-tag"

bundle install

ビルドをするには

jekyll build

これで _site/ 以下に deploy されたサイト群ができる。作られたサイト群がすべて _site/ 以下に入るので、事前に .gitignore に入れておくとよい。

jekyll serve

をすると更新のたびに自動で生成してくれ、

http://127.0.0.1:4000/

からそのサイトが見れる。ただし、_config.yml を更新したら再度 jekyll serve し直す必要がある。 これが分からずに 30 分くらい無駄に苦悩した。

レスポンシブ

スマホと PC で表示を変えること。CSS 自作はかなり大変。勉強を頑張る。

Bootstrap

viewport を設定しないとスマホ / PC 判定ができない。VSCode の HTML 拡張で「!」で出るスニペットには書いてある。

SEO

やれなくはないらしい。

GitHubのリポジトリがGoogle検索に引っかからないのでやったこと #GithubPages - Qiita

はてなブログのリンクカードを使う

bakkyalo.github.io

↑ こういうカードをはてなブログ以外でも手軽に挿入する方法。

Chromium なら Create Link の拡張機能を入れて

chromewebstore.google.com

Formats に次のようなものを追加する。

<iframe class="hatenablogcard" style="width: 100%; height: 155px; max-width: 500px; margin: 10px 0;" title="%text%" src="https://hatenablog-parts.com/embed?url=%url%" frameborder="0" scrolling="no"></iframe>

Firefox の場合は例えば Link Text and Location Copier の拡張機能を入れて

addons.mozilla.org

次のようなものを追加する。

<iframe class="hatenablogcard" style="width: 100%; height: 155px; max-width: 500px; margin: 10px 0;" title="%T" src="https://hatenablog-parts.com/embed?url=%U" frameborder="0" scrolling="no"></iframe>

すると、載せたいページ上で右クリックするとはてなブログのリンクカードを貼る HTML をクリップボードにコピーできるようになる。

ただし、はてなブログに依存することになるのでどこまで利用するかは要検討。

参考

ブログ記事内にカード型のリンクを貼る方法3選 | DevelopersIO

更新履歴の管理

JSONの利用？

HTML & CSS Tips

dl/dt/dd の見た目をデフォルトの ul/li っぽくする

styling defaults を調べる。

Styling lists - Learn web development | MDN

The <ul> and <ol> elements have a top and bottom margin of 16px (1em) and a padding-left of 40px (2.5em).

The list items (<li> elements) have no set defaults for spacing.

The <dl> element has a top and bottom margin of 16px (1em), but no padding set.

The <dd> elements have margin-left of 40px (2.5em).

そのため、<dl> タグの padding-left を 2.5em にすればよい。

<dt> と <dd> にはデフォルトではマーカー (list-item) が付かないので、display: list-item; を付記する。

See the Pen Untitled by bakkyalo (@bakkyalo) on CodePen.

csv を読み込んで table にする

Papa Parse というライブラリが存在する。

www.papaparse.com

後は document を読むなり GPT に訊くなりして書く。

<!-- コイツを head に追記 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script>

<!-- 以下を body に -->
<table id="csv-table"></table>

<script>
    const csvUrl = ('/path/to/file.csv');
    
    // Papa Parse で csv をダウンロードして解析
    Papa.parse(csvUrl, {
        download: true,
        complete: function(results) {
            const data = results.data;
            const table = document.getElementById('csv-table');

            // csv を html table に変換
            data.forEach((row, rowIndex) => {
                const tr = document.createElement('tr');
                row.forEach((cell, colIndex) => {
                    const cellElement = ;/*  ここで th なり td なりを createElement() する */
                    cellElement.textContent = cell;

                    tr.appendChild(cellElement);
                });
                table.appendChild(tr);
            });            
        }
    });
</script>

種類	リンク
実行例	少年ヤンガス経験値テーブル \| あかり描像のページ
GitHub	mypage/yangus_exp_table.html at master · bakkyalo/mypage · GitHub

ちゃんとは読んでないが、Jekyll でもできるっぽい。

CSVデータをテーブル化 | Jekyll • シンプルで、ブログのような、静的サイト

他には D3.js とか SheetJS とか。

CSS 関連

目次機能の追加

それ用のツールもあるかもしれない。(【2024/10/31 追記】あるじゃーんw　→ Tocbot )

キーワードは position: sticky; と top: 0;。適当に親要素を設ける必要あり。 sidebar で目次の位置を固定するのに使うのは

#idname {
    position: sticky;
    position: -webkit-sticky;
}

私も手探りでやっているので、実演例は以下を参照の事。随分と回りくどいことをやっている気がする。

種類	ソース
実行例	金色ラブリッチェプレイ日記 \| あかり描像のページ
本体 html	mypage/kinkoi-diary.html at master · bakkyalo/mypage · GitHub
サイドバー html	mypage/side-bar.html at master · bakkyalo/mypage · GitHub
目次用 html	mypage/kinkoi-toc.html at master · bakkyalo/mypage · GitHub
本体 css	mypage/css/style.css at master · bakkyalo/mypage · GitHub
目次用 css	mypage/css/kinkoi-toc.css at master · bakkyalo/mypage · GitHub

id の割り振りや <a> の挿入などは現状全部手動でやっている。何とも...

要調査。

Sass

入れ子構造を使えるようになった CSS。拡張子は .sass ではなく .scss にする。ブラウザでは直接読めないので随時コンパイルする必要あり。

VSCode なら Live Sass Compiler という拡張機能がある。

marketplace.visualstudio.com

右下部分に「Watch Sass」が出てくるのでそれを押す。

Tailwind CSS

なんか強そう

JavaScript 関連

D3.js

d3js.org

svg を扱うライブラリ。

low-level toolbox を謳っている通り、相当な知識を要求されるが、使えるとめちゃくちゃ強い。json や csv も扱える。Plotly のようなインタラクティブなグラフも描ける。

種類	ソース
実演	D3.js test \| あかり描像のページ
html	mypage/d3js-test.html at master · bakkyalo/mypage · GitHub

まぁ、インタラクティブなグラフを作るだけなら Plotly.js の方が手軽で楽かも。もしくは Python 環境の Plotly で write_html() するとか。

bakkyalo.hatenablog.jp

↑ これを Web ブラウザ上に埋め込みたい。

Tocbot

tscanlin.github.io

目次を自動で生成するライブラリ。目次にしたい部分を .js-toc-content (class 名は何でもいい) で囲って、挿入したい場所に .js-toc (class 名は何でもいい) を置く。見出しタグには id が振られている必要あり。

デフォルトでは <ol> が作られるようになっているが、<ul> の方が良い場合は tocbot.init() で orderedList: false を定めるとよい。

highlight.js

github.com

ソースコードの挿入をする定番のライブラリ。

プラグインもいくつか

GitHub - wcoder/highlightjs-line-numbers.js: Line numbering plugin for Highlight.js
- 行番号の追加
GitHub - arronhunt/highlightjs-copy: 📋❇️ A simple, accessible highlightjs plugin to add a copy button to your code blocks.
- コピーボタンの追加

OGP

ogp.me

ページを張り付けた時のサムネイル画像や概要を設定するのはコイツ。

𝕏 関連

カード

Cards markup | Docs | Twitter Developer Platform

埋め込みの際に表示されるサムネイルなどをこれで設定する。ただし、OGP と違って、画像は絶対パスで指定しないといけない。

ポストする

Guides | Docs | Twitter Developer Platform

https://x.com/intent/post に ? を続けて、投稿させたいポスト内容や、共有したい URL、ハッシュタグ、ID をそれぞれ

text=
url=
hashtags=
via=

を使い & でつなげていく。ハッシュタグは , で複数付けられる。半角スペースは +、改行は %0A。それでおかしかったら

URLエンコード・デコード｜日本語URLをサクッと変換 | すぐに使える便利なWEBツール | Tech-Unlimited

等を使う。

例えば

https://x.com/intent/post?ハイっ!アッカリーン%0A&url=https://bakkyalo.hatenablog.jp/entry/2022/12/27/195422&hashtags=bakkyalo

で

ハイっ!アッカリーン
 https://bakkyalo.hatenablog.jp/entry/2022/12/27/195422 #bakkyalo

になる。→ テスト

所感

無料で静的サイトを作れるのは魅力だが、更に凝ったことをやろうと思うと若干面倒な感じ。レンタルサーバーを借りるか、セキュリティー勉強して自作サーバー作ってやりたい放題してみたい感。

はてなブログや note といったサービスがいかによくできているかを痛感します。特にこのはてなブログに関しては、自分で 1 からサイトを作れば作るほど、何でここまで面倒見の良いブログサービスが全部無料で使えるんだ。。。ってなります。

*1:一番難しいところともいえますが、この辺は余り覚えてないのでざっくばらんにしか書けないです。ごめんなさい。

*2:1GB 未満の容量制限があるので、重い画像や動画は別の場所に置いた方が良いかも

*3:以前 WSL 側にインストールして Remote WSL で動かしていたのですが、あまりに重くなったので止めました。

*4:これは半ば趣味。cmd や PowerShell を使い慣れている方の場合はいらないかも。

*5:jQuery をローカルで試そうとすると、同一生成元ポリシー (Same-Origin Policy) に反すること多々。ローカルサーバーを構築すれば解決 (ローカルでもプレビュー) できるが、その中で最も手軽なのはこれな気がする。

あかり描像のブログ

思ったことや学習記録を適当に書いていきます。お気軽にコメントください