· 3分で読了

AWS LambdaでMediumの記事を投稿する

この記事は中国語から自動翻訳されたものです。翻訳によりニュアンスが失われている場合があります。

Medium自体はコードブロックの編集に対応していない。背後にある理由は定かではないが(おそらくエンジニアが主要なターゲット層ではないのだろう)、コードをハイライト表示したい場合、画像を直接貼り付けるか、Gistに貼り付けてから記事に埋め込む(embed)かという方法をとることになる。

コードを画像として貼ればシンタックスハイライトの効果は得られるものの、エンジニアにとってはかなり不便だ。コピペで実際にコードをテストすることができないし、記事を編集する際にも手動で画像を修正しなければならず、非常に面倒だからだ。

しかし、Gistを貼り付けるのにもいくつか問題がある。

  • モバイル版では正常に表示されず、埋め込みコンテンツではなくリンクがそのまま表示されてしまう
  • 自分でコードをGistに貼り付けるのが面倒。(VS CodeやSublimeなどの拡張機能を使ってGistにアップロードするのも悪くない方法だが)

Medium上でできる限りハイライトされたコードブロックを見るために、最終的にAWS Lambdaを使ってこの問題を解決することにした。

AWS Lambda

Lambdaについてまだよく知らない読者は、すでにネット上に多くのリソースがあるのでここでは割愛する。Lambdaは、実際にサーバーを立ち上げることなく(もちろん裏側にはサーバーが存在するが)、AWSに実行したい関数を実行してもらう仕組みだ。この方法を使えば、関数を書くたびにマシンへデプロイしたり保守したりする必要はなく、ただ実行するだけで済む。

Github Issue

Lambdaのエンドポイントに連携するために、GitHubのWebhookを使ってトリガーすることにした。GitHubではIssueを使ってMarkdownが書け、画像アップロード(GitHubがホストしてくれる)やプレビュー、コードブロックなども使えて非常に便利だからだ。記事を公開したいときは、IssueをクローズすることでWebhookをトリガーし、Lambda経由でコードブロックをGistにアップロードさせ、最後にMedium APIを呼び出して記事を作成する。

Medium API

MediumのAPIはシンプルだが、便利で扱いやすい。まずは個人ページの Settings > Integration tokens でトークンを生成し、そのトークンを使って記事作成APIを呼び出せばよい。

Gist API

Gist APIも同様だ。自分のGistが散らからないように、記事用のコードを保存するための別アカウントを新たに作成することをおすすめする。Settings > Developer settings > Personal access tokens > Generate token でトークンを作成し、その際にgist権限にチェックを入れるのを忘れないようにしよう。

Lambdaとの連携

事前準備が整ったら、Lambdaとの連携を始められる。

まず作成したLambdaのエンドポイントをGitHubのWebhookに設定し、MarkdownをHTMLに変換できる適当なパッケージ(僕の場合は marked を使用)を見つけて組み合わせれば完成だ!

簡単な実装はここにある。少し手間ではあるが、実際はかなり便利だ。Mediumはいつになったらコードブロックに対応してくれるのだろうかQQ。

関連記事

他のトピックを探索