なでしこ3貯蔵庫に投稿したプログラムをCodePen経由でQiitaやnoteに埋め込む

Posted at 2025-05-17

なでしこ3貯蔵庫

では、日本語プログラミング言語なでしこのプログラムを投稿し、Web上で公開することができる。
例として、今回はこのプログラムを投稿した。

投稿したプログラムのページには、「ブログパーツ」と称して、埋め込み用のコードが表示される。

埋め込み用のコードの例

<iframe width="432" height="520" src="https://n3s.nadesi.com/widget.php?3016"></iframe>

しかし、執筆時点において、このコードをそのまま Qiita に貼り付けても、アプリは表示されてくれなかった。

また、note の埋め込み機能で

を指定しても、URLがそのままリンクとして入るだけで、埋め込んでくれなかった。

これでは、記事でプログラムを紹介する際、不親切になってしまう。
そこで、今回は CodePen を経由することで、なでしこ3貯蔵庫に投稿したプログラムをそのまま実行できる形で記事に埋め込む方法を紹介する。

では、HTML・CSS・JavaScript のコードを入力し、Web上で実行・公開できる。

このサービスに保存したコードは、執筆時点で、Qiitaにもnoteにも埋め込むことができる。
Qiita では、コードのページの右下にある「Embed」を押し、表示されるHTMLのコードをコピペすればよい。
note では、コードのページのURLを「埋め込み」で指定すればよい。

最もシンプルな方法は、なでしこ3貯蔵庫の「ブログパーツ」のコードをそのまま CodePen の HTML 欄に貼ることだろう。
CSS・JS の欄は空のままにしておく。

これだけで、ページ遷移せずになでしこ3貯蔵庫に投稿したプログラムを実行できるようになる。
しかし、

という問題があり、あまり見た目が良くない。

なでしこ3貯蔵庫の「ブログパーツ」のコードをそのまま CodePen の HTML 欄に貼るのに加え、CSS 欄に以下のコードを入力する。

html, body, iframe {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
}

これにより、

ことを実現し、アプリを CodePen の枠いっぱいに表示させることができる。

よく考えると、iframe を全体に表示するというのは、iframe の無駄に思える。
わざわざ iframe を使わず、location.href を操作して CodePen の枠に直接アプリを表示させることで、この無駄を回避できる。

そのためには、HTML欄・CSS欄は空にし、JS欄に以下のコード (なでしこ3貯蔵庫の「アプリ(実行ボタンあり)のURL」を location.href に代入するコード) を入れる。

location.href = "https://n3s.nadesi.com/widget.php?3016";

また、「アプリ(実行ボタンあり)のURL」のかわりに「アプリ(即時実行)のURL」を用いることもできる。

location.href = "https://n3s.nadesi.com/widget.php?3016&run=1";

以下のような場合は、「アプリ(即時実行)のURL」を用いたほうが良いと考えられる。

逆に、以下のような場合は、「アプリ(実行ボタンあり)のURL」を用いたほうが良いと考えられる。

CodePen を経由することで、なでしこ3貯蔵庫に投稿したプログラムをそのままでは埋め込めなそうなサービスにも埋め込めることを示した。

この方法は執筆時点では使えるが、今後なでしこ3貯蔵庫・CodePen・各埋め込み先の仕様変更などにより使えなくなる可能性が考えられる。
また、この方法を使うことにより、各サービスからBANされる可能性がないとはいえない。

この方法を使った、または使えなかった・使わなかったことにより生じた一切の損害について、筆者は責任を負わない。
利用の判断は自己責任でお願いする。