カランのブログ

Kalan 頭像照片,在淡水拍攝,淺藍背景

四零二曜日電子報上線啦!訂閱訂起來

ソフトウェアエンジニア / 台湾人 / 福岡生活
このブログはRSS Feed をサポートしています。RSSリンクをクリックして設定してください。技術に関する記事はコードがあるのでブログで閲覧することをお勧めします。

今のモード ライト

我會把一些不成文的筆記或是最近的生活雜感放在短筆記,如果有興趣的話可以來看看唷!

記事のタイトルや概要は自動翻訳であるため(中身は翻訳されてない場合が多い)、変な言葉が出たり、意味伝わらない場合がございます。空いてる時間で翻訳します。

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

Medium 本身はコードブロックの編集をサポートしていません。その背後の理由はわかりませんが(おそらくエンジニアが主なターゲットではないためかもしれません)、したがってコードをハイライトするためには、画像を直接貼り付けるか、gistに貼り付けてから埋め込む方法があります。

コードを画像で表示することはハイライト効果を実現できますが、エンジニアにとっては非常に使い勝手が悪いです。コードを実際にテストするためにコピー&ペーストすることはできず、記事を編集する際には手動で画像を修正する必要があります。

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

  • モバイル版では表示できず、リンクが表示されるだけです。
  • 自分でコードをgistに貼り付けるのは面倒です。(ただし、VSCodeやSublimeなどの拡張機能を使用してgistにアップロードする方法もあります)

Mediumでハイライトされたコードブロックをできるだけ表示するために、最終的にはAWS Lambdaを使用することにしました。

AWS Lambda

Lambdaについて詳しく知らない読者のために、既にインターネット上には多くのリソースがありますので、ここでは詳細は省略します。LambdaはAWSにあなたの関数を実行させるためのもので、実際にサーバーを作成する必要がありません(もちろん、内部にはサーバーがあります)。この方法を使用することで、関数を作成してマシンにデプロイする必要がなくなり、さらにそれをメンテナンスする必要もありません。

GitHub Issue

Lambdaのエンドポイントとの連携のために、GitHubのWebhookを使用することにしました。GitHubではissueを使用してマークダウンを書くことができ、画像のアップロード(GitHubがホストしてくれます)、プレビュー、コードブロックなどができるため、非常に便利です。記事を公開する際には、issueをクローズしてWebhookをトリガーし、Lambdaを介してコードブロックをgistにアップロードし、最後にMedium APIを呼び出して記事を作成します。

Medium API

MediumのAPIは小さくて軽量ですが、使いやすいです。まず、個人ページの設定 > Integration tokensに移動してトークンを生成し、そのトークンを使用して記事作成のAPIを呼び出すことができます。

Gist API

gist APIも同様です。自分のgistが混乱しないようにするために、記事で使用するコードを専用のアカウントで別に作成することをお勧めします。設定 > 開発者設定 > パーソナルアクセストークンの生成に移動してトークンを作成し、gistの権限をチェックすることを忘れないでください。

Lambdaの連携

前提条件が整ったら、Lambdaとの連携を開始できます。

まず、作成したLambdaエンドポイントをGitHubのWebhookに設定し、任意のマークダウンをHTMLに変換するパッケージ(私はmarkedを使用しています)を組み合わせるだけです!

簡単な実装例はこちらにあります。少し手間がかかるかもしれませんが、実際には非常に便利です。いつになったらMediumはコードブロックをサポートするのでしょうか。QQ

次の記事

リアクト16 ハイライト

前の記事

カーニバルダブル 11 — ハッピーバースデートゥミー

この文章が役に立つと思うなら、下のリンクで応援してくれると大変嬉しいです✨

Buy me a coffee