デプロイしたアプリを記事に埋め込んでみた

完成図

今回はglitch.comにてデプロイしたアプリを、glitch.comの機能を使って埋め込んでいます。

See the Pen Qiita_emb_mahjong_runk_navi by Kohki_Takatama (@Kohki-Takatama) on CodePen.

glitch.com から embed code を取得する

glitch.com では、デプロイしたアプリの埋め込みiframeタグを取得可能です。

<!-- Copy and Paste Me -->
<div class="glitch-embed-wrap" style="height: 800px; width: 100%;">
  <iframe
    src="https://glitch.com/embed/#!/embed/mahjong-runk-navi?path=README.md&previewSize=100&attributionHidden=true"
    title="mahjong-runk-navi on Glitch"
    allow="geolocation; microphone; camera; midi; encrypted-media; xr-spatial-tracking; fullscreen"
    allowFullScreen
    style="height: 100%; width: 100%; border: 0;">
  </iframe>
</div>

しかし、これを直接Qiitaに貼り付けても、何も表示されません。

エディタ上は貼り付けているが、記事に表示されない

そこで、CodePenを使うことにしました。

CodePenにcodeを貼り付け、Qiitaに埋め込む

QiitaではCodePenの埋め込みが可能です。

そこで、CodePenに先程のコードを貼り付けたものを、記事に埋め込んでみました。

これが成功し、冒頭に表示したものになっています。

こだわりポイント

最後に、見やすくするために調整したポイントを紹介して終わります。

glitch

• アプリ部分をデフォルトで表示に変更（通常はコード表示）

CodePen

• デフォルトでResultのみ表示
• 高さ調整