scratchblocksを使ってScratchのブロックをサイトに埋め込む

#読む前に
この記事ではHTML5を使ったサイトでの作成を想定しています。
WordPressを使用する場合は、[プラグイン](https://github.com/tkc49/scratchblocks-for-wp)があるのでそちらをご覧下さい。

#そもそもscratchblocksとは
blob8108氏が開発している、scratchのブロックをサイト上に埋め込むことの出来る、javascriptのプログラムです。
ソースコードは[Githubで公開](https://github.com/scratchblocks/scratchblocks)されています。
#下準備
`head`タグ内に以下の二行を入れます。

```html:html
<script src="https://scratchblocks.github.io/js/scratchblocks-v3.4-min.js"></script> 
<script src="https://scratchblocks.github.io/js/translations-all-v3.4.js"></script>
```
一行目ではscratchblocksのプログラムを、二行目ではブロックの翻訳ファイルを読み込んでいます。
英語でのみ使う方は、二行目はなくても大丈夫です。

#ブロックを描写してみる
`body`タグ内にブロック名を入力し、それを任意のタグで囲みます。(今回はclassに`scratchblocks`を指定したdiv)

```html:html
<body>
<div class="scratchblocks">
    hide
</div>
</body>
```
そして、`</body>`の直前に、以下の一行を追記します。

```html
<script>scratchblocks.renderMatching('.scratchblocks');</script>
```
引数には、CSSセレクタと同じ要領で、タグやclass、idを指定します。
この状態でファイルを開くと、以下の様に表示されます。

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="poteto143" data-slug-hash="NWqBYqQ" data-preview="true" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="scratchblocks sample1">
  <span>See the Pen <a href="https://codepen.io/poteto143/pen/NWqBYqQ">
  scratchblocks sample1</a> by Poteto143(活動少なめScratcher) (<a href="https://codepen.io/poteto143">@poteto143</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

`hide`と入力した部分がScratchのブロックに置き換わりました。

#言語を指定する
このままの状態だと英語のブロック名しか使えません。
日本語でもブロックを正しく変換できるようするためには、`scratchblocks.renderMatching()`の第二引数に、オブジェクトで`languages`というオプションを指定します。

```html:html
<script>scratchblocks.renderMatching('.scratchblock', {languages: ["en", "ja"], style: "scratch3" });</script>
```
言語の指定はリストを渡します。
また、複数の言語を同時に指定することも可能です。
`en`(英語)と`ja`(日本語)を指定して、「hide」と「隠す」をそれぞれブロックに変換すると以下の様になります。

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="poteto143" data-slug-hash="WNvgRyv" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="scratchblocks sample2">
  <span>See the Pen <a href="https://codepen.io/poteto143/pen/WNvgRyv">
  scratchblocks sample2</a> by Poteto143(活動少なめScratcher) (<a href="https://codepen.io/poteto143">@poteto143</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#ブロックの見た目を最新の物にする
ここまでで描写されたブロックは全てバージョン2.0のScratchの物です。
先ほどのオブジェクトに`style`というオプションを追加することで、バージョン3.0仕様のブロックの描写にも対応できます。

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="poteto143" data-slug-hash="abOapRq" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="scratchblocks sample3">
  <span>See the Pen <a href="https://codepen.io/poteto143/pen/abOapRq">
  scratchblocks sample3</a> by Poteto143(活動少なめScratcher) (<a href="https://codepen.io/poteto143">@poteto143</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

3.0仕様のブロックを使う場合は`scratch3`と入力します。
2.0仕様のブロックを使う場合は省略するか、`scratch2`と入力します。

#ブロックをインライン表示する
文と文の間にブロックを描写したい場合は、まず変換する部分を`span`タグで囲みます。
次に、`scratchblocks.renderMatching()`の第一引数でspanタグを選択します。
最後に、第二引数のオブジェクトに`inline`というオプションを追加します。

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="poteto143" data-slug-hash="eYNLgbR" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="scratchblocks sample4">
  <span>See the Pen <a href="https://codepen.io/poteto143/pen/eYNLgbR">
  scratchblocks sample4</a> by Poteto143(活動少なめScratcher) (<a href="https://codepen.io/poteto143">@poteto143</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
インライン表示にする場合は`true`を、しない場合は省略するか`false`を入力します。

#ブロックの記述方法
ブロックの記述方法については、Japanese Scratch-Wikiに記事がありますので、そちらをご覧下さい。
[ブロックプラグイン (3.0)](https://ja.scratch-wiki.info/wiki/%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3_(3.0))