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

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

スポンサーリンク

Scratchとは?

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

コワーキングスペース八王子 8Beatでは昨年12月から子ども向けプログラミング道場 CoderDojo八王子を開催しています。Dojoでは主にScrathというプログラム学習

12月に子どものためのプログラミングイベント「第1回 CoderDojo 八王子」を開催することとなりました(^^)/ CoderDojo(コーダー道場)とは小中学生のための

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

という部分を

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

     

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

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

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

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

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

[Amazon sponsored link] scratch 関連本
兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

フォローする

スポンサー広告
スポンサーリンク
スポンサーリンク
トップへ戻る