♨️

新サービス「パケットベース」に公開APIドキュメント設定機能を追加！

2025/07/27に公開

パケットベース - Packetsbase

先日個人で開発した新サービス「パケットベース」に、新機能を追加しました！

 概要「パケットベース」は、組織間・個人間でJSONデータをやりとりでき、データをAPI公開できるサービスです。
今回、公開APIのドキュメント表示機能を追加して、公開APIの使い方や案内を設定できるようにしました。

 準備せっかくだから、ドキュメントは Markdown で書けるようにします。

「パケットベース」は Markdown を使っていなかったので、モジュールを追加します。

今回は Marked モジュールと highlight.js を使いました。
bun install marked marked-highlight highlight.js

 実装
 入力欄「パケットベース」の公開API設定には、もともと「メモ」を入れる機能があったので、そこをそのまま「ドキュメント」欄に置き換えてしまいました。

 Markdown を表示するところMarkdownを表示するところは、今回はバックエンドから表示するようにしたいと思います。

バックエンドのフレームワークは「Hono」を使用していますので、JSXで記載します。
※一部抜粋
  const marked = new Marked(
    {
      breaks: true,
    },
    markedHighlight({
      highlight(code: string, lang: string) {
        const syntax = hljs.getLanguage(lang) ? lang : 'plaintext'
        return hljs.highlight(code, { language: syntax }).value
      },
      langPrefix: 'hljs language-',
    }),
  )
  documentHTML = await marked.parse(publish.document ?? '')

  return c.render((
    <DocsLayout name={publishName} path={path}>
      <div className="flex flex-col min-h-screen">
        <DocsHeader />
        <main className="flex flex-col grow w-full h-full mx-auto">
          <div className="mx-6 doc" dangerouslySetInnerHTML={{ __html: documentHTML }} />
        </main>
        <DocsFooter />
      </div>
    </DocsLayout>
  ))
Markdown のパーサー Marked のインスタンスを作成するところで、設定をいくつか追加しています。

特に、コードの部分のシンタックスハイライトを入れるために、ハンドラーを追加しています。
HTMLの埋め込みは dangerouslySetInnerHTML で入れます。名前からしてアブナイ属性っぽいのであまり使わない方が良さそうではあるのですがやむを得ず……

divタグに doc というクラスを定義していますが、これは Markdown 中のタグに独自のCSSを定義するために入れています。

 完成公開APIのURLにGETリクエストでアクセスすると、ドキュメントが表示されます。
これで、API公開時に案内を作るのも「パケットベース」内でできるようになりました。

 さいごにいかがでしょうか？機能はシンプルですが、その分簡単にデータのやり取りやAPI公開ができるようになっています。
パケットベース - Packetsbase
制限はありますが基本無料で使えるので、よかったら使ってみてくださいね！

概要

準備

実装

入力欄

Markdown を表示するところ

完成

さいごに

Discussion