いつもFF14というゲームの話を書いているブログですが、今回はきっかけがFF14の話であり、話の内容自体はプログラミングの話です。
きっかけ
現在、FF14を主にしたサイトを作成している
サイトはこちらです。
www.gelehrte.com
こちらのサイトを見ていただくとわかるのですが、レスポンシブ対応されていないのがわかります。それもそもはず、VSCodeとMarkdown PDFという環境で、PDFの代わりにHTMLを吐き出しているからです。
そのHTMLをそのまま公開しているため、スマホで見るには辛い環境になっています。
Markdown PDF で生成されるHTMLがレスポンシブ対応されていない
上記で書いたとおりですが、レスポンシブ対応されていないのが問題です。もちろんMarkdownからどうレスポンシブ対応させたHTMLを生成させるかという問題はありますし、どうきれいなサイトを作るかは好みによるかと思いますが、ある程度のことはできるかと思います。
簡単に言うと、HTMLを素のコードを書くのが辛いからです。少なくとも可読性の高い・拡張性の高いHTMLファイルをMarkdownから吐き出すことができれば問題ないと思います。
拡張機能は自作できるのか？
こちらのサイトを参考にできそう
zenn.dev
こちらのサイトが参考になりそうです。いくつかの拡張機能開発に関するブログ記事のリンクも張ってあるので、それらを参考に開発環境を整えたい・作成してみたいなと思います。
Qiitaのサポートしている範囲内を参考に
あくまでも目的はMarkdownでHTMLを簡単に吐き出したいだけなので、全てのMarkdown記法をサポートする気はありません。 もしかすると、Qiitaでの記法を全てはサポートしないかもしれません。
方針
bootstrapを利用したレスポンシブHTMLを作る
位置からcss jsを書くのはつらすぎるし、可読性も落ちるので、bootstrapを利用したいと思います。
bootstrapのバージョンは？
ある程度固定させます。もしかすると、拡張機能にbootstrapを含めておくかもしれません。一応、執筆時最新版の bootstrap v5.0を利用したいと思います。
bootstrapのバージョンが上がったものを使えるようにはできるようにする？
設定で
- CDMでbootstrapのリンクを貼れるようにする
- 自前のbootstrapへのリンクを貼れるようにする
などができるようにはしたいと思います。
未定です。そもそもVSCodeの拡張機能を作ったことのないので、手探りになると思います。何かしら今後ご報告できれば良いなと思います。
「Markdown to HTML with bootstrap」とかにしようかなと思います。仮名ですが。
終わりに
思いつきで書き始めた備忘録的記事でした。次回があるかはわかりませんが、せめて VSCodeの拡張機能を作り始めた記事ぐらいは書ければいいなと思います。
