HTMLに埋め込む

WEBサイトでもっと広く紹介したい

HTMLの中にプロジェクトを埋め込んで、WEBサイト上で作品を紹介したり、ゲームプレイしたいということもあるんじゃないでしょうか。

Scratch3.0からは、iOSのスマホやタブレットでもWEBブラウザからプログラミングできます。

Scratch公式サイトの中だけでなく、もっと広く公開するためにも、ぜひWEBサイトに埋め込む方法を覚えておきましょう。

まずは共有から

そのために、まずはプロジェクトを共有しなければなりません。

メニューバーの「共有ボタン」を押し、共有設定のページに行きます。

続いて、「リンクをコピー」をクリック。

新しくウィンドウが開き、「リンク」と「埋め込みコード」という項目があります。

「リンク」は文字通り、Scratch公式ページ内にあるプロジェクトへのリンク先URL。

ここで使用するのが、「埋め込みコード」。

コピペの間違いを防止するためにも、右上の「埋め込みコードをコピー」をクリックしてコピーしましょう。

iframeを使った埋め込み

ScratchプロジェクトのHTML埋め込みでは、iframeを使用しています。

このiframeの中をちょっと見ていきたいのですが、まずはwidthとheight。

スクラッチのプレイ画面は、幅485pixel、高さ402pixelということです。

画面比でいえばおよそ82.88%で、このあたりの設定はcssで必要になってきますね。

実際にプレイしてみると、ゲーム音楽もしっかり鳴っていて、画面タップしたときの動作もかなりスムーズ。

これからは、タップやスライドなど、スマホでの操作を想定したゲーム制作もいいかもしれません。