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

# なでしこ3貯蔵庫

[🍯 なでしこ3貯蔵庫](https://n3s.nadesi.com/index.php)

では、[日本語プログラミング言語 なでしこ](https://nadesi.com/)のプログラムを投稿し、Web上で公開することができる。
例として、今回はこのプログラムを投稿した。

[足し算 (埋め込みデモ用)](https://n3s.nadesi.com/id.php?3016)

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

```html:埋め込み用のコードの例
<iframe width="432" height="520" src="https://n3s.nadesi.com/widget.php?3016"></iframe>
```

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

また、[note](https://note.com/) の埋め込み機能で

* プログラムのページのURL `https://n3s.nadesi.com/id.php?3016`
* アプリのURL `https://n3s.nadesi.com/widget.php?3016`

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

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

# CodePen

[CodePen: Online Code Editor and Front End Web Developer Community](https://codepen.io/)

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

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

# 貯蔵庫に投稿したプログラムを埋め込む

## 「ブログパーツ」をそのまま貼る (非推奨)

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

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="LEEvLbB" data-pen-title="nako3 embed test (simple)" data-user="mike_cat" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/mike_cat/pen/LEEvLbB">
  nako3 embed test (simple)</a> by MikeCAT (<a href="https://codepen.io/mike_cat">@mike_cat</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

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

* CodePen の枠に、アプリで使わない無駄な部分が生じる
* CodePen とアプリの二重でスクロールバーが出現する

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

## iframe を枠いっぱいに表示させる

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

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

これにより、

* アプリを枠いっぱいに表示させる (`width`・`height`)
* そのとき、余計な隙間をあけない (`padding`・`margin`・`border`)

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

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="zxxXzNp" data-pen-title="nako3 embed test (CSS)" data-user="mike_cat" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/mike_cat/pen/zxxXzNp">
  nako3 embed test (CSS)</a> by MikeCAT (<a href="https://codepen.io/mike_cat">@mike_cat</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

## location.href でアプリに飛ばす

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

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

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

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="pvvBwPR" data-pen-title="nako3 embed test (location)" data-user="mike_cat" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/mike_cat/pen/pvvBwPR">
  nako3 embed test (location)</a> by MikeCAT (<a href="https://codepen.io/mike_cat">@mike_cat</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

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

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

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="WbbWOOw" data-pen-title="nako3 embed test (location, instant run)" data-user="mike_cat" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/mike_cat/pen/WbbWOOw">
  nako3 embed test (location, instant run)</a> by MikeCAT (<a href="https://codepen.io/mike_cat">@mike_cat</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

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

* 「実行」「クリア」ボタンが不要な場合
* note に埋め込む場合 (CodePen 側の機能で実行ボタンが表示される)

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

* 「実行」「クリア」ボタンを使いたい場合
* Qiita に埋め込み、ページを開いただけでは実行させたくない場合

# おわりに

[CodePen](https://codepen.io/your-work) を経由することで、[なでしこ3貯蔵庫](https://n3s.nadesi.com/index.php)に投稿したプログラムをそのままでは埋め込めなそうなサービスにも埋め込めることを示した。

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

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