2022/7/7

静的サイトジェネレーターつきブログエディターを作ってみた1

エディター機能付き静的サイトジェネレーターをJavascript + NW.jsで作ってみました。

作ったきっかけ

ゲーム開発の技術ブログでもはじめようかなあと思ってたんですがどう公開するか悩んでました。

1, オンラインのブログサービスを使う

はてなブログやBlogger、qiita、zenn等 使いやすさや記事の露出という点ではいい選択だと思います。 しかしながら無料で使えるものはユーザビリティーの低くなるような広告がつくか内容が縛られたりできることが限られる傾向がありました。 また、無料サービスは突然サービス終了したり有料化したりといった事もよくあります。

2、CMSを使う。

wordpressの公開にはデータベース等が使えるサーバーが必要なためサーバー代がかかります。 また、静的サイトと比べて少し重めになる傾向があります。

3、静的サイトジェネレーターを使う。

HUGO、Gatsby、Jekyll等 静的サイトなのでサイトがとても軽いです。 しかしコマンド操作やマークダウンを直接書くのはたまにしか書かないであろう自分の用途には適さない気がしました。 短い期間書き続ける分には慣れるためとても速く記事を書けるようになると思いますが、期間が空く場合コマンドや記述法を確実に忘れる自身があります。

4、GUI付き静的サイトジェネレーターを使う。

Publii、Gitbook、Catalpa、Phest等 調べてたらGUI付きの静的サイトジェネレーターというものもあるようでした。かなり理想に近いものもありそうでしたがここまで来ると欲がでてしまいます。

ほしい機能

  • GitHubPages等無料のホスティングサービスを使いたいためCMSではなく静的サイトジェネレーターで。
  • 操作はすべてGUIでできるようにする。
  • 欲を言うなら自分で使いやすくカスタマイズできるエディター付きで。
  • コードが汚れるのが嫌なのでエディターはWYSWYGではなくマークダウンで。なおかつHTMLも使えるようにしたい。
  • マークダウンはGUIコンテキストメニューで簡単に挿入できるようにしたい。
  • 基本はHugo等でも使われるマークダウンだけど見やすさ重視で日本語入力でも入力しやすい独自マークダウンも導入したい。
  • エディターではテキストとして入力したいが作りこみたい時はVSCodeでタグを打てるようにしたいのでビルド元のデータはHTMLファイルで。
  • 見た目を確認するビュアーはサイズをいろいろ変えて見たいので別ウィンドウがいい。
  • VSCodeのように保存していないデータも自動でバックアップを取りたい。

何でつくるか

いろいろ新しい技術に挑戦してみたくはあったんですが、ほとんどがHTMLのDOM操作的な内容になってくるためHTMLと親和性の高いJavascriptで全部作る事にしました。 プラットフォームはシンプルにWebサイトをデスクトップアプリとして表示する事が得意なNW.jsにしました。

いざ制作！

できました。 とりあえず最低限の機能が完成したのでブログを書いてみたのがこの記事です。 作ってみてわかった事

やっぱり広く使われてるジェネレーターやサービスはすごい！

だけど自分で自由にカスタマイズできるのはやっぱり楽しいのでよしとします。

なぴぃ
Twitter：@napiiey

フォロー
library_books 関連記事

forumコメント