AWS Lambda による中規模記事のアップロード

作成者:カランカラン
💡

質問やフィードバックがありましたら、フォームからお願いします

本文は台湾華語で、ChatGPT で翻訳している記事なので、不確かな部分や間違いがあるかもしれません。ご了承ください

Medium自体はcode blockの編集をサポートしていませんが、その理由は不明です(おそらくエンジニアが主なターゲットではないためでしょう)。したがって、コードをハイライトする方法として、画像を直接貼り付けるか、gistに貼り付けて記事に埋め込むことが考えられます。

コードを画像として貼り付けることでハイライト効果は得られますが、エンジニアにとっては非常に不親切な方法です。なぜなら、コードをコピー&ペーストして実際にテストすることができず、記事を編集する際には手動で画像を修正しなければならないため、非常に面倒だからです。

しかし、gistに貼ることにもいくつかの問題があります。

  • モバイル版では閲覧できず、埋め込まれた内容ではなく、リンクが直接表示されます。
  • 自分でコードをgistに貼るのは非常に手間がかかります。(ただし、vscodeや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はシンプルで使いやすいです。まず、個人ページのsetting > Integration tokensからトークンを生成し、そのトークンを使って記事作成のAPIを呼び出すだけです。

Gist API

gist APIも同様です。自分のgistが混乱しないように、記事用のコードを保存するために別のアカウントを作成することをお勧めします。settings > developer settings > personal access token > generate tokenからトークンを作成し、gistの権限にチェックを入れるのを忘れないでください。

Lambdaの接続

準備が整ったら、Lambdaに接続を開始できます。

まず、作成したLambdaエンドポイントをGitHubのWebhookに追加し、次にMarkdownをHTMLに変換できるパッケージ(私はmarkedを使用しました)を見つけて組み合わせれば完了です!

簡単な実装はこちらで確認できます。少し手間がかかりますが、実際には非常に便利です。Mediumがいつコードブロックをサポートしてくれるのか、待ち遠しい限りです。

この記事が役に立ったと思ったら、下のリンクからコーヒーを奢ってくれると嬉しいです ☕ 私の普通の一日が輝かしいものになります ✨

Buy me a coffee