Azure API Managementの開発者ポータルでカスタムHTMLウィジェットを使う

いわさです。

Azure API Managementでは管理しているAPIを利用者へ提供するための開発者向けポータルを提供することが出来ます。

先日のアップデートで任意のHTMLコードをiframeベースで埋め込むことが出来るようになったので、試してみました。

アクティブなAPI Managementですぐに利用可能

開発者ポータルはPremium、Standard、Basic、Developerで利用が可能です。
API Managementがアクティブになると、開発者ポータルの起動ボタンが使えるようになります。

以下はデフォルトの状態です。
このポータルはAPIドキュメントから自動生成される部分もありますが、ウィジェットを配置するなどCMSのように様々なカスタマイズが可能です。

ウィジェットの挿入が可能な箇所でボタンを押すと選択画面が表示されます。
様々なウィジェットが用意されており、利用することが可能です。

今回のアップデートで、Custom HTML codeウィジェットが利用出来るようになりました。

このウィジェットは以下のように任意のHTMLコードをウィジェットとして埋め込むことが出来ます。
設定したHTMLコードはiframeを使って埋め込まれる形となります。

自由にHTMLの記述が可能です。

Publish前にSaveを忘れないようにしましょう。
Publishのみだと反映されません。

こちらはいつもブログで使っている、はてブ風のカードを埋め込みました。

以下はYouTubeの埋め込みです。こちらは表示されませんでした。
本当はこれを使いたかったんですよね...

さいごに

本日はAzure API Managementの開発者ポータルでカスタムHTMLウィジェットが利用出来るようになったので試してみました。
CMSのような自由度の高いカスタマイズがビジュアルエディターを使って、ドラッグアンドドロップですぐに作成出来るのはとても魅力的です。

注意点としてはカスタムHTML自体がiframeで埋め込まれるという点と、動画など一部コンテンツが表示出来ない場合があるということでしょうか。YouTubeについてはもう少し調べてみたいと思います。
ドキュメントによると、ビデオプレイヤーを埋め込むことはカスタムHTMLのユースケースとして想定されているようなので、設定方法がありそうです。