Noratetsu Lab

動じないために。

タグの定義・詳細

Noratetsu Houseの作り方

Noratetsu Houseの仕組みと技術を解説したシリーズ記事。

  • コードの用意(HTML、CSS、JavaScript)
    • GitHubへのアップロードとホスティングサービスでのデプロイ
    • APIの使い方
    • Dynalist APIの使い方
    • Dynalistでのデータの書き方と利用方法

Backlinks

他の「Series」カテゴリの語句

「Noratetsu Houseの作り方」タグの記事一覧

2024/01/23

サイトの作り方④取得したデータを加工する

 Noratetsu Houseの作り方の続きです。
 今回はDynalist APIで取得したデータの加工について。

2023/12/12

サイトの作り方③Dynalist APIを理解する

 Noratetsu Houseの作り方の続きです。
 今回はDynalist APIの利用について。

2023/12/10

サイトの作り方②APIを利用してみる

 Noratetsu Houseの作り方の続きです。
 今回はAPIの利用について。

2023/12/09

サイトの作り方①ホスティングサービスを使って公開してみる

 Noratetsu Houseの作り方(概要)の続きです。
 今回はホスティングサービスを実際に使ってみるところまで。


(問い合わせフォームにいただいたコメントは拝読しております。ありがとうございます!)

 手順としては三つの工程があります。

  1. HTMLを用意する
  2. GitHubのリポジトリを用意する
  3. ホスティングサービスにGitHubを紐づける

 手順さえ分かればあとはそれぞれキーワードで検索すればよろしいかと思いますが、多少ショートカットできるようにわかりやすそうなページを貼っていくことにします。親切な先人が労力を割いて解説してくれているわけなので、新たに書くよりそちらにアクセスしてもらった方がみんなハッピーでしょう。

HTMLを用意する

 HTMLとは、というところからスタートすると果てしなく話が広がってしまうので、詳しい書き方をここで解説することはしません。参考になるサイトのリンクを貼っておきます。

 私もHTMLに詳しいわけではないので、これらのサイトの内容を読むとあちこちで「へえー」と思ったりします。必要な分だけその都度知っていけば良いでしょう。
 さて、今回必要なのはホスティングサービスが利用できることを確認するためのファイルなので、超簡単なHTMLをサンプルとして置いておきます。表示したいファイルが既にあるならそちらをお使いください。

  
  
  
  
      
      
    Sample  
      
      
  
  
  
    

Hello World!

GitHubのリポジトリを用意する

 私が使っているホスティングサービスは、GitHubに作ったリポジトリ内のファイルを用いてサイトを構築します。なので、GitHubのアカウントを取得し、リポジトリを用意する必要があります。
 まずアカウント取得について。

 リポジトリの作成について。公式ドキュメントが十分親切なのでこれだけ貼っておきます。

 リポジトリ名は適当なもので大丈夫です。また、今回使うホスティングサービスではリポジトリがPrivateでも問題ないので、とりあえず公開設定はPrivateにしておくとよいでしょう。

画像

(左端の真ん中あたりに余計なボタンが写っていますが気にしないでください。)
 なお、ここではGitについては省略します。Gitが分かる方はGitHubとの連携方法はすんなりわかるでしょうし、ホスティングサービスの利用にGitは直接は関係ないので(今必要なのはGitHubのリポジトリにファイルがあることだけなので)、ひとまず置いておくことにします。今回はGitHub上で直接ファイルを追加します。

 リポジトリを用意できたら、「index.html」を作成します。
 今作ったリポジトリはこうなっています。

画像

 緑の「Code」ボタン左の「Add File」から「Create new file」を選択します。既にローカルにファイルがあるなら「Upload files」でもいいです。
画像

 「Create new file」を選んだ場合はエディタが表示されるので、ファイル名を「index.html」とし、用意したHTMLをペーストしましょう。
画像

 右上の緑の「Commit changes...」をクリックします。するとコミット(バージョン管理のための履歴を新たに作ること)の画面になります。以後もファイルを更新する度にコミットメッセージを記述することになります。後々更新作業をした時はその内容をここにわかりやすく書いておくのが望ましいです。descriptionは必要なければ省略できます。記述したら右下の「Commit changes」をクリック。
画像

 GitHubについてはこれで最低限の用意ができました。
 ちなみに、GitHubは「GitHub Pages」という静的サイトホスティングサービスを提供しています。

 あんまりあっちこっちにアカウントを作りたくないという人はこちらを試してみてもよいでしょう。ずっと使う本拠地としては頼りないですが、気軽にページを作れるので「ちょっと公開してみたい」という場合には十分かもしれません。

ホスティングサービスにGitHubを紐づける

 静的サイトのホスティングサービスとしてメジャーなのは、「Cloudflare Pages」「Netlify」「Vercel」の三つかなと思います。私はNetlifyは試したことがあり、Noratetsu HouseではCloudflare Pagesを使っています。Vercelは使ったことがありません。

 Cloudflare Pagesの長所短所はこちらの記事が詳しく解説してくれています。

 ホスティングサービスの比較記事や違いが見える記事はこちら。

 ただし情報は最新のものとは言えません。正確な情報は適宜お調べになってください。

 ここではCloudflare Pagesの導入について紹介します。

 こちらの記事はわかりやすく参考になりますが、今回はHugoは使わないので、その部分だけ飛ばして読んでください。
 先程作ったリポジトリで実際にサイトを作ってみましょう。GitHubのリポジトリを選択すると、このような画面に遷移すると思います。

画像

 プロジェクト名はサイトのURLになるので気をつけて設定してください。後から変更はできないと思います。(自分が契約しているドメインと紐付けることならカスタムドメイン設定にてできます。)
 上記の記事内では「フレームワーク プリセット」にHugoを指定していましたが、今回は何も使わないので「なし」のままでいいです。そのまま右下の「保存してデプロイする」をクリックしてください。ファイルの中身に問題がなければ数秒でデプロイ(=ユーザーが実際に使えるようにすること)は完了します。

 今回できたサイトはこちらです。

 以後はGitHubのファイルを更新する度に自動でサイトの内容も更新されます。ファイルが有効でないなど何らかの理由でデプロイが上手くいかなかった場合は、公開データは前バージョンのまま維持されます。
 色々と機能などはありますが、最低限のところはこんな感じになります。お疲れ様でした。

2023/11/06

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(ライブラリ) ↩︎

管理人

アイコン画像

のらてつ Noratetsu

キーワード

このブログを検索

検索

ブログ アーカイブ

2025
2024
2023
2022
2021