プログラム開発ツールScratchで作ったカードをWebサイトに埋め込む方法

CoderDojo八王子ではScratchを使って、お子さんがプログラム作成体験をしています。Scratchはゲームやアニメーションが簡単に作れるツールです。
作品を公開すればWebサイトに埋め込むこともできます。今回はその機能を使ってインタラクティブなクリスマスカードを作ったものを、WordPressサイトに埋め込んでみました！

Scratchとは？

すでに何回かこのサイトでもご紹介していますのでScratchってどんなもの？については、

[ryus_blogcard url=’https://usortblog.com//childprgramiroiro/’]
[ryus_blogcard url=’https://usortblog.com//scratch/’]

これらの記事を参考にしていただけると分かりやすいかと思います。

Scratchでクリックするとなにかが現れる、というものを作ってみる

どんなカードにしようかなぁ？と思ったときになにかをクリックすると何かが現れて、少しずつ増えていく、というようなカードにしようかな、と思いつきました。

https://scratch.mit.edu　にログインして作ります。

緑の旗がクリックされたとき　から始めて

最終的にはこのぐらいブロックができますが、一つずつものを追加していくのと中身はほとんど同じですので、それほど難しくはありませんでした。

実際にScratchを使ってインタラクティブなカードを作る方法、については

クリックするとものが現れるカードの型　CoderDojo八王子

こちらに詳しい方法を書きました。よろしければご覧ください(^^)/

Scratchで作った作品を埋め込む方法

Scratchで作った作品をWebサイトに埋め込むには、

作品のページで、　埋め込み　をクリックします

そうすると、このように埋め込み用のコードが表示されます。

      <iframe allowtransparency="true" width="485" height="402" src="//scratch.mit.edu/projects/embed/91254807/?autostart=false" frameborder="0" allowfullscreen></iframe>
    

ソースは　iframe　になっているので貼り付けるだけで埋め込みができます。

実際に埋め込むとき、今回のようにカードの場合は緑の旗を押す部分を省略したいと思いました。

そこでこの貼り付け用コードの、

?autostart=false

という部分を

?autostart=true

としました。これで埋め込むと、

     

こんな感じになります(^^)/。実際に動くので触ってみてください↑

おまけ:実際にScratchを体験したいというお子さんは12月19日(土)に八王子へGo！

CoderDojo八王子は次回12月19日(土)に開催します。詳しくは「第13回 CoderDojo 八王子は12月19日(土)開催です」をご覧ください。

今回はCoderDojo八王子が始まってちょうど1年、ということでお祝いを兼ねてケーキも出ることになってます。当日は今回のカードではなくもっと動きのあるものを作る予定です♪

是非お気軽にご参加ください(^^)/

[amazon_searchlink search=”scratch”]