質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.47%
Swagger

Swaggerは、REST APIを定義するための標準仕様に基づいて構築された一連のオープンソースツール。REST APIの設計や構築、文書化、使用に便利なツールを提供。Swagger Specを書くことでドキュメント生成まで自動的に行い、さらにドキュメントから実際のリクエストを投げられます。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

176閲覧

redoclyのHTMLテンプレートをカスタムしたい

Ricky_koh

総合スコア3

Swagger

Swaggerは、REST APIを定義するための標準仕様に基づいて構築された一連のオープンソースツール。REST APIの設計や構築、文書化、使用に便利なツールを提供。Swagger Specを書くことでドキュメント生成まで自動的に行い、さらにドキュメントから実際のリクエストを投げられます。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2024/03/04 07:27

編集2024/03/04 07:43

redoclyのHTMLテンプレートをカスタムしたい

  • build-docsをして作成されたhtmlファイルをカスタムして、<script src="https://cdn.jsdelivr.net/npm/redoc/bundles/redoc.standalone.js">などの外部参照してるところを内部のファイル参照にしたい

前提

OpenAPIの形式でAPI仕様書を会社の開発端末で書いています。
yamlファイルは出来上がり、npx @redocly/cli build-docs xxx.yaml -o xxx.htmlを実行したら問題なくHTMLファイルが作成されてWEB上でも表示できるところまできました。
開発環境、試験環境では問題ないのですが、本番環境ではセキュリティが厳しく、
WEBに表示する際に外部参照しているCSSファイルなどが参照できないので
内部のcssファイルやjsファイルを参照できないかと調査しています。
(redoc.standalone.jsなど)

直接HTMLファイルを書き換えれば出来ますが、ビルドオプション等でビルドする際に自動的に書き換わるようにしたいです。
色々方法は試してみているのですが実現できず困っています。

試したこと

  • build後に直接HTMLファイルを書き換え
  • カスタムHTMLテンプレートを作成し、build-docsのオプション-templateで実現できるか試してみたが{{title}}以外のプレースホルダーが効かない
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>{{title}}</title> <style> {{redoc-styles}} </style> </head> <body> <div id="redoc-container"></div> <div id="redoc-content" class="redoc-content"> {{redoc-html}} </div> <script srcr="js/redoc.standalone.js"> //WEBからファイルをダウンロードし内部に設置 {{redoc-script}} </script> </body> </html>
  • 公式でTemplateを編集できると書いてあるが、会社のPCでredocのアカウント登録をしてはいけないとのことなので使用できず

公式:https://redocly.com/docs/api-registry/settings/template/

補足情報(FW/ツールのバージョンなど)

Windows11
@redocly/cli : v1.9.0
Node.js : v20.11.0
npm : 10.2.4
VScode

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

プレースホルダーについては記述方法が間違ってました!

{{ redoc-html }}⇒{{{ redocHTML }}}
{{ redoc-styles }}, {{ redoc-script }}⇒ {{{ redocHead }}}

この記述にしたら、機能しました!

HTML出力時にプレースホルダーで置き換えた内容を直接カスタムテンプレートにコピーして、
変更したい部分<script src=xxx>をカスタムテンプレート上で修正したら反映されたので、
解決できそうです。

投稿2024/03/05 05:51

Ricky_koh

総合スコア3

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問