サイトについてコメントをいただいたので、回答を兼ねてサイトについてもう少し詳しく書こうと思います。

• Noratetsu House

• 個人サイトを作りました

　

　問い合わせの内容についてそのまま掲載する可能性があるというような断りを事前にしていないので、差し障りがないよう要点だけ書いておくことにします。

• アウトライナーをブログ化できたらいいなと思っていた

• 同じ仕組みでサイトを作ってみたい

• プログラミング、特にサーバー周りの知識が乏しいため何をやればいいかわからない

　ご感想ありがとうございます！　コメントをもらえるとはあまり思っていなかったのでとても嬉しいです。

　

サーバーの知識はあまり要らない

　さて、まずサイトの仕組みとして根幹の方からお答えします。

　サーバー周りの知識がないのでどうしたらというお話ですが、サーバーについては私もよくわかっていません！　というのは、このサイトに関しては自前のサーバーでもレンタルサーバーでもなく、Cloudflare Pagesというホスティングサービス（という言い方でいいのかどうか）を利用しているからです。同種のサービスには他にNetlifyやVercelがあります。

　Cloudflare Pagesは何をしてくれるのかと言うと、サイトを作るのに必要なファイル（html、css、js、favicon.ico等）をGitHubにプッシュしておけば、それを使って自動でサイトを生成して公開してくれるのです。レンタルサーバーを兼ねてくれているということになろうかと思いますが、ユーザーがサーバー周りの知識を持っていなくてもうまいことやってくれるので便利です。（知識があればより細かい設定ができます。）

　つまりサイトの公開に最低限必要なのは、①html等のファイル、②GitHubのリポジトリ、③Cloudflare Pagesなどのホスティングサービスのアカウント、ということになります。

　なおGitHubは本来Gitを通してファイルをアップロードするものですが、Gitを使わずにサイト上で手動でファイルを更新することもできるので、Gitの知識がなくてもサイトの公開は可能です。

　各サービスのアカウント取得方法や設定方法は、検索すれば私よりずっと詳しい人の親切な解説が色々あるのでそちらをご参照ください。

　

同じ仕組みでやるには

　同じ仕組みでサイトを作ってみたいというお話でしたが、Dynalistを使うのは結構大変かもしれないというのは予め申し上げておきます。もし全く同じようにやるとしたら以下の知識が必要となります。

• HTMLとCSSの知識

• JavaScriptのDOM（≒HTML要素の操作）と配列周りの知識

• 正規表現の知識

• サーバーサイド言語のどれか（Node.js、Pythonなど）の知識

• APIの使い方の理解

• Gitの知識

　ひとつひとつはそんなに難しくはないですが、ゼロから慣れるまでにはちょっとかかるかもしれません。多分絶対的にそれなりの時間がかかります。

　

玄人の方へ

　JavaScriptとか余裕だぜヘイヘイヘーイという方向けの説明を簡単にしておきます。データの取得と変換の流れは以下の通りです。（非プログラマーなので表現が変だったらすみません。）

1. Dynalistの特定のドキュメントに決まった書式で記事データを用意する

   • 本文部分はMarkdown形式で書いておく

   • findやfilterで抽出しやすい書式を自分で考える

2. サーバーサイドでDynalist API^*1を叩いてドキュメントのデータを取得し、頑張って記事単位のデータを作ってjsonで保存

   • この段階で本文はmarkedライブラリ^*2を利用してhtmlにしておく

3. クライアントサイドのjsではfetchでjsonの中身を取得してDOM構築

　複雑なことは特にないと思いますが、Dynalist APIで取ってくるデータは全てのノードのデータがフラットに並んだ配列なので、記事の親ノードがどれで本文はどこからどこまでかを解釈するために工夫が必要です。私はnoteに「date:」という文字列が含まれるかどうかで親ノードを判定していますが、headingやcolorを利用するのも簡便で良いと思います。

　本文を取得するのもちょっと面倒くさいですが、childrenプロパティに子ノードのidが上から順番に入っているのでそれを再帰的に処理して取得します。データには開閉状態の情報も含まれているので、畳んでいるものは子ノードを取得しないといった判定をするようにすると、没になった文は畳んでおけばよくなるので楽です。

　本文はMarkdownで書いておいてmarkedでhtmlに変換しますが、それだけでは十分でない部分はreplace+正規表現で変換します。例えば自分のブログ記事のリンクをサイト内リンクに変換するなどです。markedで処理する前にやっておきます。

　htmlへの変換はクライアントサイドでもいいですが、予め変換しておいたjsonを読み込んだ方が処理速度が速くなるんじゃないかなと思って事前にやっています。

　なお私はひとつのjsonにまとめて出力していますが、記事単位でmdファイルにした方が使い勝手が良いという人も多いかもしれません。

　

ビギナーの方へ

　「これをこうするだけで実は誰でも簡単にできるんですよ」と言ってさらっと書いてしまいたいところなのですが、どうしても簡単にはならない要素が色々あります。（私は一年九ヶ月くらいJavaScriptと格闘し続けてやっとこういうことができるレベルに到達しました。）

　なので、記事一本で説明するのはちょっと無理なのですが、書き残さないと私としても勉強が財産にならないので、ステップを分解してひとつひとつ書いてみようかと思います。各ステップとしては、

• まずサイトとして最低限成り立つHTML（およびCSS、JavaScript）を書いてみる

• それをGitHubにアップロードし、ホスティングサービスでデプロイしてもらう（＝サイトとして成り立つように構築して公開する）

• APIというものを利用してみる

• Dynalist APIを理解する

• Dynalist APIで返ってくるデータを解釈して自分好みの形に変換する

こんなところでしょうか。

　説明のためには私自身勉強しながら書くことになるので時間がかかると思いますが、社会の端っこにあるようなこのブログにて偶然ご縁が生まれた皆様の生活が少しでも豊かになれば私も嬉しいので、私に書けることは書いていきたいと思います。（時間的・気分的に負担にならない範囲でやりますので更新はのんびりになるでしょう。）

---

*1: Dynalist API

*2: Marked（ライブラリ）