Corredor

ウェブ、プログラミングの勉強メモ。

2020-11-28 : このブログは2020年末をもって更新停止する予定です。
2021年以降は Neo's World (https://neos21.net/) で記事を公開していきますので、今後はコチラをご覧ください。
このブログの記事は2021年以降、Neo's World に順次移行していきます。元記事および本ブログは移行次第削除する予定です。

Remark・Rehype で Markdown から HTML に変換してプレビューを確認できるオンラインエディタを作った

メインサイト Neo's World は、自作のビルドシステムでブログを配信している。Markdown で記事を書くと、Remark・Rehype プラグインを駆使して HTML 形式に変換して配信できるのだが、ローカル開発環境を用意せずとも簡単にプレビューできたらいいなと思い、オンラインエディタを作った。その名も Remark Editor

Vercel にデプロイしているので、以下からドウゾ。

remark-editor.vercel.app

ソースコードは以下。

github.com

左カラムがエディタで、Markdown を入力後、「Parse」ボタンを押すと右カラムにプレビューが表示される。フロントエンドは Vanilla で、Vercel Serverless API にパースさせた内容を innerHTML でブチ込んでいるだけ。フロントエンドとしてクエリパラメータを受け付けたり、データを保存したりしないので、こういう雑な作り。

Remark・Rehype はブラウザ上でも動かせるっぽいように見えたのだが、どうしてもうまく行かなかったので、諦めてサーバレス API として動かすことにした。POST リクエストボディをパースしてレスポンスするだけ。このためだけに Vercel を使っている。見出し ID とリンクを振ったり、Prism.js を適用したりなど、パースの仕様はメインサイトで使用している変換処理と合わせている。

リアルタイムにパース・プレビューできたらカッコイイのかもしれないが、自分は基本的に脳内でパースができるし、タイポなどのミスがないかを最終確認するだけなので、「Parse」ボタンを手動で押すことにした。アクセスキーは用意したので、コレで少しは楽になるか…。w

徹底解説Visual Studio Code

徹底解説Visual Studio Code

  • 作者:本間咲来
  • 発売日: 2019/09/27
  • メディア: 単行本

静的サイトでも自前で RSS (Atom) フィードを配信する

2020年11月1日、メインサイト Neo's World でついに独自ドメインを取得した。あわせて RSS フィードを配信しようと思い、やり方を色々調べたのでメモ。

フィード配信は簡単・XML ファイルを配置・更新するだけ

コレまで10数年、Google リーダや Feedly を使ってきたが、実のところ RSS の仕組みがよく分からないまま使っていた。しかし仕組みは簡単で、RSS フィードと呼ばれる XML ファイルを各サイトが配信していて、RSS リーダはそれを定期的にクロールしているだけなのだ。

つまり、ブログサイトでなく静的サイトであっても、XML ファイルを更新して配置できれば RSS フィード配信ができるワケだ。CGI も、特殊な技術やアプリも要らない。ただ規格どおりに XML を書いて同じところに配置すればそれで良いのだ。

RSS 1.0、RSS 2.0、Atom の違い

RSS の他に、Atom という単語も聞いたことがある。サイトによってフィードの URL が rss.xml だったり atom.xml だったりするので、規格の違いなのは何となく理解していた。調べてみたらこういうことだった。

  • RSS 1.0 は Netscape が策定したモノがベース。シンプルに書ける
  • RSS 2.0 は RSS 1.0 の後継ではなく、開発が停滞していた RSS 1.0 に代わってフォーマットを拡張した、UserLand Soctware 社による規格。リッチなコンテンツ配信ができるが、その分書くのが面倒
    • RDF (Resource Description Framework) Site Summary とか、Rich Site Summary とかの略
  • Atom は RSS 1.0 の停滞や RSS 2.0 への分裂を傍目に「もっと自由にやりたくね?」と立ち上げられた別規格。IETF という標準化団体が策定しており企業が絡んでいないのが特徴で、RSS 2.0 よりはシンプルな仕様

つまり、「RSS」は総称ではなく単独の規格で、「Atom」は「RSS」とは似て非なるモノだ。3つの規格が混在し、どれも一定の利用率があるため、「RSS リーダ」側が3つの規格をどれも扱えるようにしてあるのが実情だ。

RSS 1.0 と RSS 2.0 は機能的に新旧が別れているワケではないので、2020年のコレから RSS 1.0 の形式でフィードを作ることも、ない話ではない。

自分は今回、あまり企業が関係していない「インターネット標準」に近い規格である、Atom 規格を選んだ。ということで以降は Atom 形式でのフィードを組み立ててみることにする。

コピペで作れる Atom フィードのテンプレート用意しました

なかなか仕様が分かりづらかったのだが、色んな文献を漁って、以下のテンプレートに行き着いた。最小構成はこんな感じ。

<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="ja">
  <title>【サイト名】</title>
  <id>【フィード ID・特に思いつかなければサイトのトップページ URL とかでいい】</id>
  <author>
    <name>【管理人の名前】</name>
  </author>
  <link rel="alternate" type="text/html" href="【サイトのトップページ URL】"/>
  <link rel="self" type="application/atom+xml" href="【このフィードの URL】"/>
  <updated>YYYY-MM-DDTHH:mm:ssZ</updated>  <!-- フィードの最終更新日時 -->
  
  <!-- 以下の entry 要素を、新しいモノから古いモノへと順に連ねていく -->
  <entry>
    <title>【記事タイトル】</title>
    <id>【記事 ID・特に思いつかなければ記事 URL などユニークなモノでいい】</id>
    <link rel="alternate" type="text/html" href="【記事 URL】"/>
    <updated>YYYY-MM-DDTHH:mm:ssZ</updated>  <!-- 記事の投稿日時 -->
    <summary>【記事の概要。Feedly なんかだとタイトルの下に表示される本文がココにあたる】</summary>
  </entry>
  
  <entry> …… </entry>
  
</feed>

僕のサイトの情報でサンプルを作ってみると、以下のような感じ。

<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="ja">
  <title>Neo's World</title>
  <id>https://neos21.net/</id>
  <author>
    <name>Neo</name>
  </author>
  <link rel="alternate" type="text/html" href="https://neos21.net/"/>
  <link rel="self" type="application/atom+xml" href="https://neos21.net/feeds.xml"/>
  <updated>2020-11-02T12:13:14Z</updated>
  
  <entry>
    <title>2日目の記事です</title>
    <id>https://neos21.net/example-2.html</id>
    <link rel="alternate" type="text/html" href="https://neos21.net/example-2.html"/>
    <updated>2020-11-02T12:13:14Z</updated>
    <summary>より新しい記事ですね。どうもどうも</summary>
  </entry>
  
  <entry>
    <title>1日目の記事です</title>
    <id>https://neos21.net/example-1.html</id>
    <link rel="alternate" type="text/html" href="https://neos21.net/example-1.html"/>
    <updated>2020-11-01T02:03:04Z</updated>
    <summary>より古めの記事ですね。やぁやぁ</summary>
  </entry>
  
</feed>
  • id 要素はお好みでユニークな値にできれば良い
  • feed 要素直下の updated 要素は、フィード XML ファイルを更新するたびに、最新の日時に書き換える。コレが古いままだと正しくクロールされないかもしれない
  • entry 要素直下の updated 要素は、記事の投稿日時だと思って良い

過去の記事をどれだけフィード配信するかにもよるが、大抵のサイトは最新10件とか30件とか、そのぐらいの記事だけフィード配信しているようだ。entry 要素は一定数で古いモノが消されて、ローテートされていくようなイメージだろうか。

ちなみに Feedly は、一度クロールしたフィード情報を自分のサーバでキャッシュしているようで、実際のフィード XML ファイルが配信していない古いエントリも見えることがあったりする。RSS リーダって頑張ってたのね…。

バリデータでチェックする

自分が作ったフィード XML ファイルが正しく作れているか確認したければ、以下のサイトで確認できる。

コレでエラーが出なければとりあえずは OK だろう。

link 要素による案内

Atom フィードを作ったら、次のような link 要素をサイトに埋め込むことで、Atom フィードの存在を知らせられる。

<link rel="alternate" type="application/atom+xml" title="My Atom Feeds" href="/atom.xml">

実際に XML ファイルを組み立てる手順は扱わず…

今回の記事は、テンプレート的なところが確認できたところまで。コレを実際に自動で組み立てるスクリプトとかは、今回は紹介しない。

まずはこのテンプレートを基に、自分で Atom フィードを組み立ててみて欲しい。

静的サイトジェネレータの Hexo を使ってみる

Node.js 製の静的サイトジェネレータ、Hexo を使ってみた。Gatsby.js が覇権を握るまでは、Ruby に抵抗がなければ GitHub Pages でも使われている Jekyll か、フロントエンドエンジニアなら慣れ親しんだ Node.js だけで扱える Hexo か、という感じで人気だったと思う。

# Hexo CLI をインストールする
$ npm install -g hexo-cli

# Hexo CLI でプロジェクトを作成する
$ hexo init example
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
added 185 packages from 430 contributors and audited 191 packages in 10.455s

13 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

INFO  Start blogging with Hexo!

# 生成されたディレクトリやファイルを見てみる
$ tree -d -I node_modules ./example
./example
├── _config.yml
├── package.json
├── scaffolds/
│   ├── draft.md
│   ├── page.md
│   └── post.md
├── source/
│   └── _posts/
│       └── hello-world.md
└── themes/
    └── landscape/
        ├── package.json
        ├── languages/
        ├── layout/
        │   ├── _partial/
        │   │   └── post/
        │   └── _widget/
        ├── scripts/
        └── source/
            ├── css/
            │   ├── _partial/
            │   ├── _util/
            │   ├── fonts
            │   └── images/
            ├── fancybox/
            │   └── helpers/
            └── js/

# とりあえずスターターのサイトを眺めてみる
$ cd ./example/
$ npm run server

> hexo-site@0.0.0 server /Users/Neo/example
> hexo server

INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

…とまぁこんな感じで、とりあえず簡単に http://localhost:4000/ が起動して、Hexo 製のブログが閲覧できた。

  • package.json を見ると、Hexo 関連の npm パッケージにのみ依存している
  • _config.yml が全ての設定を司るファイルのようだ。サイト名や URL、ディレクトリの指定からシンタックスハイライト機能の設定に至るまで、ココで殆どが管理されている
  • _config.yml 内の theme で、サイトのテーマを指定している。デフォルトの landscape テーマ (./themes/landscape/) は、コレはコレでプロジェクト配下に別の Node.js プロジェクトを抱えたような形になるらしく、テーマ用の package.json が確認できる。テーマを自作するのはちょっと大変そう…
  • ./scaffolds/ 配下の Markdown ファイルが雛形になる様子。Front Matter と呼ばれるメタデータを YAML 形式で書く仕組みと、Mustache のようなプレースホルダが確認できる
  • ./source/_posts/hello-world.md が、先程開発サーバで確認したブログ記事にあたる。Front Matter と Markdown で構成されている
  • ./source/ 配下のディレクトリ名が ./scaffolds/ 配下の Markdown ファイル名と揃っていて、Front Matter 部分はテンプレートで定義してある感じかな

$ hexo new page コマンドで新規固定ページを作ったり、$ hexo new draft で新規下書きを作ったりして、記事を書いていくみたい。

テンプレートは豊富で、とりあえず規制のデザインで良ければ簡単にブログサイトが作れそう。

_config.yml がデカすぎて、独自の用法をいけないのが辛かったのと、テーマを自作したりするのが大変そうだったので断念した。今回自分が欲しかった、かるーい感じの静的サイトジェネレータではなかったので…。

Node.js スクリプトをシングルバイナリにできる boxednode を試してみた

単一の Node.js スクリプトファイルを、Node.js 本体込みのシングルバイナリにビルドできる boxednode というツールを見つけたので試してみる。

github.com

$ echo "console.log('Hello World');" > example.js
$ npx boxednode -s example.js -t example

$ ./example
Hello World

初回は Node.js をダウンロード・コンパイルしているようで、15分くらいかかった。2回目以降は、1回のビルドに3分ぐらいだったかな。

上のコンパイル済み example のファイルサイズは、なんと 76MB。ホントに Node.js をまるっと固めてるだけっぽい…。Go 言語で似たような Hello World をシングルバイナリにすると 2MB 程度で済んだので、コレはちょっと重たいかな。

Not supported

  • Multiple JS files

とあるように、複数ファイルを require() しているようなスクリプトはバイナリ化できない。

うーん、ファイルサイズも大きいし、シングルファイルしか扱えないし、イマイチ使い所が分からないなぁ…。