#読む前に
この記事ではHTML5を使ったサイトでの作成を想定しています。
WordPressを使用する場合は、プラグインがあるのでそちらをご覧下さい。
#そもそもscratchblocksとは
blob8108氏が開発している、scratchのブロックをサイト上に埋め込むことの出来る、javascriptのプログラムです。
ソースコードはGithubで公開されています。
#下準備
headタグ内に以下の二行を入れます。
<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)
<body>
<div class="scratchblocks">
hide
</div>
</body>
そして、</body>の直前に、以下の一行を追記します。
<script>scratchblocks.renderMatching('.scratchblocks');</script>
引数には、CSSセレクタと同じ要領で、タグやclass、idを指定します。
この状態でファイルを開くと、以下の様に表示されます。
See the Pen scratchblocks sample1 by Poteto143(活動少なめScratcher) (@poteto143) on CodePen.
hideと入力した部分がScratchのブロックに置き換わりました。
#言語を指定する
このままの状態だと英語のブロック名しか使えません。
日本語でもブロックを正しく変換できるようするためには、scratchblocks.renderMatching()の第二引数に、オブジェクトでlanguagesというオプションを指定します。
<script>scratchblocks.renderMatching('.scratchblock', {languages: ["en", "ja"], style: "scratch3" });</script>
言語の指定はリストを渡します。
また、複数の言語を同時に指定することも可能です。
en(英語)とja(日本語)を指定して、「hide」と「隠す」をそれぞれブロックに変換すると以下の様になります。
See the Pen scratchblocks sample2 by Poteto143(活動少なめScratcher) (@poteto143) on CodePen.
#ブロックの見た目を最新の物にする
ここまでで描写されたブロックは全てバージョン2.0のScratchの物です。
先ほどのオブジェクトにstyleというオプションを追加することで、バージョン3.0仕様のブロックの描写にも対応できます。
See the Pen scratchblocks sample3 by Poteto143(活動少なめScratcher) (@poteto143) on CodePen.
3.0仕様のブロックを使う場合はscratch3と入力します。
2.0仕様のブロックを使う場合は省略するか、scratch2と入力します。
#ブロックをインライン表示する
文と文の間にブロックを描写したい場合は、まず変換する部分をspanタグで囲みます。
次に、scratchblocks.renderMatching()の第一引数でspanタグを選択します。
最後に、第二引数のオブジェクトにinlineというオプションを追加します。
See the Pen scratchblocks sample4 by Poteto143(活動少なめScratcher) (@poteto143) on CodePen.
インライン表示にする場合は`true`を、しない場合は省略するか`false`を入力します。#ブロックの記述方法
ブロックの記述方法については、Japanese Scratch-Wikiに記事がありますので、そちらをご覧下さい。
ブロックプラグイン (3.0)