The Internet Archiveのゲームのiframe埋め込みテスト(重さと音に注意):メモ

悩み
悩み

The Internet Archive で10,000以上のゲームが公開されたそうですのでちょっとテストを。

バブルボブルはスタート画面表示後にグレー画面となってとまりましたが、ダブルドラゴンとR Typeはとりあえず動きましたので、この記事の埋め込み箇所で試せます。

[追記 2016.8.11]
なお、2016.8.11現在、ベータテストの終了に伴いゲームは消去されています。

Software Library: Amiga

Software Library: Amiga

上記ページでゲームができます。操作はよく分かりませんでした。

なお、ダウンロードも可能なようです。

Double Dragon

上記リンクはダブルドラゴンのページですが、とりあえず十字キーで移動とshiftで殴るというのは分かりました。

ほかにも以下のようなタイトルが並んでいます。

  • Bubble Bobble
  • R Type
  • Project X
  • King’s Quest II

Dr. Marioもありますが、なんかちがうような…。

大丈夫だから公開していると思いますが、これに限らず権利関係に関してはよくわかりません。

紹介記事

The Internet Archive just uploaded thousands of playable Amiga games

上記の記事で知りました。

埋め込み用ヘルプ

Audio help, tips, and techniques

サンプルも載っているのですが、サンプル自体の表示がおかしく、ゲーム画面になると同時に上に隙間ができ、横もきれます。

本来のページであれば表示は正常なので、埋め込み用の加工がうまくいっていないのかもしれません。

埋め込みテスト

The Internet Archive のiframe埋め込みを試してみました。

下のゲーム画面のスクリーンショットをクリックするとプレイ可能ですが、なにかのタイミングで下にずれたり拡大することがあります。

なんとか埋め込めはしましたが、環境的にもやめた方が良いかもしれません…。

The Internet Archive に移動してプレイするほうがまだ良いです。

なお、操作はそれぞれ違うようで、マウスが使えたり、使えるキーが違ったりと様アマナ模様です。

Double Dragon

音がややおかしいですが、なんとか動かせることは動かせます。

Controlを押してもなにもなさそうですが、「左右どちらが」+「上」+「 Shift 」 でジャンプするようです。

基本的な操作方法は恐らく以下の通り。

  • 移動は十字キー
  • 攻撃は「 Shift 」
  • ジャンプは 「左右どちらが」+「上」+「 Shift 」 でジャンプ

R Type

こちらも動きますが、処理が重くなると音が間延びしたり途切れたりします。

基本的な操作方法は恐らく以下の通り。

  • 移動は十字キー
  • 攻撃は「 Shift 」
  • Bボタン的なものは 「 Control 」

Spay vs Spay

操作を受け付けないと思ったら突然受け付けたりと、いまいち操作がわかりませんが、もしかしたら最初はデモ的なもので、それを見終えたら操作可能なのかもしれません。。

これだけとは思えませんが、基本的な操作方法は恐らく以下の通り。

  • 移動は十字キー
  • 攻撃などの動作は「 Shift 」
  • アイテム選択は 「 Control 」
  • 一時停止は「 P 」

埋め込み時の問題

前述ように、指示された埋め込み用コードのままではだめだったので、以下のようにコードを変更します。


<iframe src="https://archive.org/embed/R-Type_1989_Electric_Dreams" width="720" height="650" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>

ポイントは、iframe の width を720にし、 height を600にする点。

width の値はiframeで表示されたソース内のcanvas要素に設定されている値です。
height の値はcanvas要素の値自体は568pxだったのですが、そのままですとどうもmargin-topが何かを基準に算出されて設定されるようで、下にずれてしまいました。

そのため、ずれた分の値を足してすこし多めに設定するとうまくいきました。

<canvas height="384" width="560" id="canvas" style="width:560px;height:384px"></canvas>

The Internet Archive のページでは上記のようなwidthheightの設定ですから、もしかしたら呼び出し時に何らかの幅を取得してセットしているのかもしれません。

表示された時以外にも、一度クリックされた際に再計算が行われている印象でして、仕組みを理解し切れていません…。

なお、このブログのようにコンテンツ幅が720pxに満たない場合は当然はみ出ます。

そのため、自作のレスポンシブ対応で無理矢理コンテンツ幅に納めており、実際にはもう一手間かかっています。

720px以下のwidthの固定幅で埋め込めればいいという場合は、iframedivなどで囲んで、scaleで縮小率を直接数値を書き込んで指定すればうまく収まると思います。

wordpress.com用

EMBED (for wordpress.com hosted blogs)

埋め込み用コードには上記のような名称で、下記のようなコードが書かれています。


[archiveorg Double_Dragon_1989_Arcadia_US width=560 height=384 frameborder=0 webkitallowfullscreen=true mozallowfullscreen=true]

上記はwidthが560pxですが、どういう表示になるのかは試していないのでわかりません。

スマホで動作するのか?

iPhoneでこの記事を見てみましたが、ゲーム画面をタッチ後に起こる読み込みのタイミングでエラーがでました。

仮に対応していたとして、PCですら重いのでスマホではやらないほうが良いですが。

埋め込み対応テスト済みサイト

ヘルプを見ますと以下のサイトではテスト済みだそうです。

NOTE: We’ve tested EMBED on tumblr.com, boingboing.net, blogspot.com blogs, and WordPress blogs.

Blogger(blogspot.com)には対応していると書かれていますので試してみました。

また、ヘルプ下部には以下の用な文言とリンクもあります。

Advanced/rare: Embed videos or audio from more than one item into a playlist:

There is a basic example here
EVEN SIMPLER text-based simple file: basic embeddable, responsive playlist here (try “view source”!)

上記ではリンクを切っていますが、リンク先に推移しても今回のゲームではなく動画の埋め込みという感じで、そのまま使える感じはありませんでした。

それとも、ここの情報で簡単にレスポンシブ対応で埋め込めるのか…。

結び

試してみましたがいろいろと不安感があるので、自サイトに埋め込まず The Internet Archive に移動して利用する方がよいと思います。

埋め込みの不具合に関しては、私の環境に問題がないのであれば今後対応されると思いますから、無理矢理調整などを施しても無駄になる可能性が高そうです。

0人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄