AlmightのノベルゲームをWEBサイトに埋め込む方法

Almightの公式サイトにはサンプル用のゲーム画面が埋め込まれています。 「自分も作ったノベルゲームをサイトに埋め込みたい！」という人のために、その方法を紹介します。

iframeタグを使って埋め込む

iframeタグはhtml内に別のhtmlファイルを読み込むことができます。 そして、AlmightはHTMLで作られたゲームですので、iframeタグにAlmightのゲームのindex.htmlを指定することでサイト内に埋め込むことが可能です。

以前、プラグインを作った時の記事の、「Almightの時間制限機能付き選択肢プラグインを作ってみた」で埋め込んでいるので、それを今回も流用しようと思います。 実際に埋め込んだものが以下のものです。

iframeタグにどういう風に記述しているかというと、以下のようになっています。

<iframe src="/lib/index.html" style="width:420px; height:318px;" rel="nofollow"  ></iframe  >

<!-- ↑はレスポンシブサイトのためwidth, heigth をstyleで指定している --  >
<iframe src="/lib/index.html" width="420" height="318" rel="nofollow"  ></iframe  >

iframeのsrc属性にはAlmightのlibフォルダ内のindex.htmlを指定します。 このサイトはレスポンシブサイトなので、width属性とheight属性は指定せず、styleタグでwidthとheightを指定しています。 もし、あなたのサイトに埋め込むときに、縦横のサイズが固定であれば、width属性、height属性で指定してください。

WEBサイトに埋め込む用のAlmightゲームを作る時の注意点

Almightのゲームを埋め込む時、既に作り終わっていて、一部分をサンプルとしてサイトに埋め込みたい、という意図であると仮定して話します。 そういった際には、埋め込む用のAlmightのゲームを作ると時は、埋め込むときの横幅、縦幅を決めて、それに合わせてAlmightでゲームを作った方がよいです。

ノベルゲームのサイズは、大体「800px x 600px」か、それ以上になるかと思います。 もしそのままのサイズでサイトに埋め込むというのであれば、問題はありません。 ですが、作ったゲームよりも小さいサイズで埋め込みたいという時は、小さいサイズ用に作り直してください。

画像が意図しない表示になったりする可能性がありますし、サイトの読み込み速度にも影響します。 大きな画像を大量に読み込むのは負荷が大きいので、小さいサイズで埋め込むのであれば、画像もそのサイズにリサイズすることをおススメします。

どうしても大きいサイズのまま見せたいという場合は、埋め込むのではなく、aタグを使って、新しいタブや新しいウィンドウで表示するようにしてもよいかと思います。 その際には、iframeのsrc属性と同様に、aタグのhref属性にAlmightのlibフォルダ内のindex.htmlを指定してください。

  <a href="/lib/index.html" target="_blank" rel="nofollow" >Almightのゲーム</a >