Azure 静的 Web アプリを活用してみました

2021 年 11 月 22 日は Ignite 2021 recap ということで、 MSIgnite 秋まつりが開催されました。

今回は聴く側だったのですが、映像は youtube 、コメントは Twitter とで分かれていたため若干の視聴づらさが。

これを改善する方法、何かないかなーということで、両方のページを一つの画面に表示させてみることにしました。

見ながら方法を考えていたのですぐにできる方法で。ということで、 Azure 静的 Web アプリを活用し、その上に HTML を書いてまとめてみようと思います。

Azure ポータルからリソースの作成を行います。

https://portal.azure.com/#home

f:id:mohessu:20211122195708p:plain

リソースグループとアプリ名称の決定、プランを選びます。

個人利用だと Free プランが利用できるようですね。

f:id:mohessu:20211122195828p:plain

この画面では隠れていますが、この下に元ファイルのリポジトリを決め、設定する必要があります。

GitHub や Azure DevOps を選べる感じですね。

今回は GitHub を利用します。事前にアカウントを用意し、リポジトリを作っておきましょう。そのうえで HTML ファイルを展開しておけば用意は完了です。

用意を終えたらログインボタンを押します。

f:id:mohessu:20211122200903p:plain

ログイン後、組織、リポジトリ、分岐を選択します。分岐に値がない場合はまず 1 つファイルをアップロードしてください。

f:id:mohessu:20211122202024p:plain

作成後、 GitHub アクションの実行をクリックすると GitHub から 静的 Web アプリに展開されます。展開後 URL にアクセスしてみてください。

これで利用可能となります。

f:id:mohessu:20211122202258p:plain

静的 Web アプリの使い方はこんなものなのですが、今回の目的である youtubeTwitter を合体させた画面を作っていきましょう。

まず youtube 側の情報を取得します。

こちらは youtube を開き、共有ボタンを押していきましょう。

f:id:mohessu:20211122201304p:plain

一番左に埋め込むというのがあるのでこれを利用すると動画を内包した HTML が取得できます。

f:id:mohessu:20211122201318p:plain

この HTML は iframe でした。

そのまま HTML に入れることで対応できそうですね。

f:id:mohessu:20211122201335p:plain

もう一方の twitter は、ちょっとだけ考えなくてはならないようです。

というのは現在ハッシュタグ検索の埋め込みはできないようになっているようで、誰かユーザーのタイムラインを流すことくらいしかできません。

今回は司会者をターゲットに取り込んでみました笑

 

twitter の埋め込みは以下の URL から埋め込み用の情報を取得する流れとなります。

https://publish.twitter.com/#

 ここに出てくるアドレス入力欄に Twitter の URL を入力していきます。

f:id:mohessu:20211122204737p:plain

 すると下方にどんな表示にするか出てきます。

左側のタイムラインを選択しましょう。(右のパターンだけ出る場合は、ハッシュタグを指定している状態なので、別の URL を指定してください。)

f:id:mohessu:20211122204752p:plain

この 2 サイトで得られた URL をテキストファイルに書き込み、 HTML タグで囲みます。

ざっとこんな感じなれば OK です。

f:id:mohessu:20211123023116p:plain

ファイルは GitHub にアップロードしていきます。

ここでは index.html にしたので、 静的 Web アプリへのアクセス時にファイル名が不要となりました。

f:id:mohessu:20211122201856p:plain

出来上がった画面は以下のような形となり、 youtubeTwitter が同居してくれ、見やすくなりました。

f:id:mohessu:20211122204726p:plain

若干手順は長いですが比較的簡単に作れるので、気になる方はぜひどのような形になるのか試してみてください。

音楽:聖音波