まず最初に。作ったサイトはこちらです。
https://gelehrtecrest.github.io/ff14-unending-journey/
追記(2021/12/17)後日サイトを移動させます。
今回はこのサイトを作った経緯などをお話します。
経緯
英語で楽しむFF14
自己プロジェクトとして「英語で楽しむFF14 」というのを行っています。詳しくは以下の記事を。
blog.gelehrte.com
簡単に言うと、「FF14の英語ローカライズ凄いらしいから、紀行録とか強くてニューゲームでも試せない部分も初期キャラを作って楽しんでみようか！」という話です。
あふれる画像ファイル
まぁ、1セリフごとにスクショを撮ったり、それ以外の部分でもスクショを撮ったりしているから、スクショファイルが膨大になるわけです。その管理についても悩ましいところでした。
また、稀に他の人も、「どんなスクショかなー」って覗いてみたい奇特な方もいらっしゃるかも知れません。
ということで、外部に公開できる形でWebページによる公開を行ってみました。
試み
VSCodeとMarkdown PDFを利用したサイト作成
あくまでもこれは個人的な好みというか、勉強のためなのですが
- Windows環境で整えたい
- 静的HTMLサイトを生成するジェネレータ的なものを試したい
ということで、VSCodeとMarkdown PDFの利用を開始しました。これらについては以下のサイトが参考になると思います。ご興味のある方はどうぞ。
lipoyang.hatenablog.com
画像フォルダからMarkdown PDFに読み込ませるためのmdファイルを生成するbatファイルを用意
こんな感じです。
@echo off
rem 作業フォルダ
set DIR=docs\step1
rem 画像フォルダ
set IMG=image_j
rem 対象
set OUTPUT=index_j.md
rem 初期化
if exist %DIR%\%OUTPUT% del %DIR%\%OUTPUT%
rem 残りは画像ファイル
for %%f in (%DIR%\%IMG%\*) do (
echo %%~nxf
echo [![%%~nxf]^(./%IMG%/%%~nxf^)]^(./%IMG%/%%~nxf^) >> %DIR%\%OUTPUT%
)たぶん、今後も少しずつきれいに作り直すと思います。一旦この形で。
サイト先
サイトの改良
今のままでは重い
紀行録サイトを見ていただいた方にはわかると思いますが、非常に重いです。
原因は、スクショのPNGファイルを強引に1ページに並べているから
まぁわかりやすい理由ですね。改良点としては
- サムネイル用の小さいJPGファイルを用意しておく
ことでしょうか。ただ、今後のことを考えるとサムネイル画像の自動生成機構も考えないといけないし、悩ましいですね。batファイルでなんとかできそうな気もしなくもないですが。
終わりに
色んな人が備忘録として・紀行録として見れるような形のサイトを作りました。今後も改良及び画像追加などを続けたいと思います。お付き合いいただければ幸いです。
追記
ImageMagickを使ってJPGサムネイルを表示させるようにしました。バッチファイルは以下のように変わりました。
@echo off
rem 作業フォルダ
set DIR=docs\step1
rem 画像フォルダ
set IMG=image_e
rem サムネイルフォルダ
set IMG_THUMB=image_e_thumb
rem 対象
set OUTPUT=index_e.md
rem 初期化
if exist %DIR%\%OUTPUT% del %DIR%\%OUTPUT%
if exist %DIR%\%IMG_THUMB% rd /s /q %DIR%\%IMG_THUMB%
md %DIR%\%IMG_THUMB%
rem 残りは画像ファイル
for %%f in (%DIR%\%IMG%\*) do (
echo %%~nxf
magick convert -resize 480x270 %DIR%\%IMG%\%%~nxf %DIR%\%IMG_THUMB%\%%~nxf.thumb.jpg
echo [![%%~nxf]^(./%IMG_THUMB%/%%~nxf.thumb.jpg^)]^(./%IMG%/%%~nxf^) >> %DIR%\%OUTPUT%
)
