見出し画像

GDevelopで作ったゲームを公開するには

e

前回の記事で、HTML5のファイルを作成したので、Webサーバにアップロードする


前提

必要なモノは下記の通り

詳細

特に今回は見せられない情報が多いので、公式ドキュメントを調べてトライしてほしい。また、開通までは時間が掛かるので２～３日余裕を見た方がよい

Topページのindexファイルを用意する

Webサーバにはindex.htmlが必要なので準備をする。なお、5年振りくらいにHTMLを書いたので何か不足していることはあるかもしれない
一旦、目的としてはindexファイルはスマホでも見られるようにviewportを指定した

<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width">
    <title>
        ようこそ
    </title>
</head>
<body>
    <a href="./browser_game/index.html">Game</a>
</body>
</html>

GDevelopのindexファイルにOGPを追記する

また、GDevelopをHTML5でエクスポートしたフォルダの中に、index.htmlがあるが、上記のindexファイルとは別モノであることを記しておく
こちらには、noteでリンクを貼り付けたときにサムネイル表示をできるようにしたかったのでOGPの設定を追記した。こちらも理解が浅いので別途、調べてほしい
なお、index.htmlの中にはheadタグ（開始タグと終了タグ）の記述が既にあるので、必要な部分を追記すること

<head prefix="og:https://ogp.me/ns#">
    <meta property="og:url" content="https://eupdate.sakura.ne.jp/browser_game/index.html" />
	<meta property="og:type" content="game" />
	<meta property="og:title" content="ずんだもんはずんだのシェイクを飲みたい" />
	<meta property="og:description" content="ずんだもんにずんだのシェイクを飲ませてあげるゲーム" />
	<meta property="og:site_name" content="eupdate.sakura.ne.jp" />
	<meta property="og:image" content="https://eupdate.sakura.ne.jp/browser_game/ogp.png" />
	<meta name="note:card" content="summary_large_image">
</head>

note用にサムネイル用の画像を用意する、robots.txtを用意する

note:cardを定義したのでサムネイル画像を表示させる

※ 指定した画像サイズが横600px 縦315px以上の場合に大きく表示されます。（解像度が足りない場合は画像が小さいカードで表示されます）
※ サイトがhttpsであることを確認してください。
※ noteクローラー（User Agent: notebot）がサイトにアクセスできることを確認してください。

https://www.help-note.com/hc/ja/articles/360000338721-note-card

特に大事なことは、サイトがhttpsであることにに注意すること
ここが原因でサムネイルが表示されず、かなりの時間を取られていた
なお、画像のサイズは1280*670で用意をした

※summary_largeのときには、1.91:1の比率がよいと書かれている記事があったが、何を根拠に判断しているのか分からなかった。残念ながら、根拠となっているリソースもよく分からなかった

また、robots.txtを用意した。noteクローラについてもオフィシャルな仕様を見つけられなかったが、notebotにはとりあえずアクセスさせるように設定した

User-agent: notebot
Allow: /

User-agent: *
Disallow: /

Webサーバへアップロードする

準備が出来たらアップロードをしよう

  1. FileZillaでWebサーバにアクセスする

  2. 必要なファイルをフォルダ毎、アップロードする

  3. アップロードが完了したらブラウザでアクセスしてみる

※ちなみに、申し込みからサーバの反映までラグがあったせいかFTPパスワードが認証しなかったが最終的には認証した。待つしかない

他のWebサーバではダメなのか

仕様を見て自分で判断してねとしか言えない。サポートに聞くのもありかとは思うが。実は今回、別のWebサーバにファイルをアップロードするという作業自体までは２時間程度で完了できたのだが、Webサイトにアップしてnoteにリンクを反映しようとしたときにサムネイル画像が表示されないことに気付いたのが対応の始まりだった。試行錯誤しながら対処していたが、問題に気付いたのもかなり最後の方で、気付けば５時間以上も掛かっていたのはかなり痛い話だ

そもそも、さくらのインターネットを使う前に、XREAというwebサーバで本件を試していた。XREA Freeプランは無料で使えるのでリリースしたものを公開する分にはよいと思った。（過去にもWordPress等、ホームページも含めて無料で使用していた記憶がある）

ところが、robots.txt等の設定など試行錯誤を繰り返した上で、本件、サイトのhttps化が必要な事態に気付いたのでXREAでも確認をした。XREAでもSSLを無料で使えるとあるのだが、どういうわけかXREAでは単一のドメインに対して共有SSLを使用することが出来なかった。

恐らく、この部分が答えなのだけど、XREA Freeで貰えるドメインだけでは実行不能だ

「Main」に設定されたドメインには設定できません。「Sub」に設定ください。

無料SSLの新規設定

他のプランに関しては分からない。正確にはXREA Freeプランでも1年間無料のshopドメインを付与されるので可能ではあるのだが、１年後にshopドメインは使わないので設定をしなかったら本問題にぶち当たった。サポートに問い合わせたわけではないので正式な回答にはならないが、言っていることは合ってはいるけど、とんだトラップだった。ちょっと不信感は感じた。ただ、この問題を対処する必要がなければ、普通に使用していたし、結果的には余計な時間が掛かったが、サービスとしては問題ないと思う

ということから、年間1600円弱を支払ってさくらのレンタルサーバ、ライトを利用することにしたというのが経緯だった。問題はそこだけだったので。無料の共有SSLを使用することが出来るとあり、トラップがないことを祈りながら結果的に出来たのでよかった

さくらのインターネットも過去に使用していたし、年間1600円弱で使用できるので何かあるときには今後もどんどんアップロードしていこうと思う。今回の案件に関連するメリットとしては下記の通り

  • 広告は出ないこと

  • 無料SSLが使える

広告が表示されないことも地味にポイントが高い

余談 - ドメインを取得するときには

過去にGoogleAdsを試す関係で、さくらのインターネットでドメインを取得したことはないのだが、別な会社でドメインを取得したことがある、設定を誤り、whoisで個人情報がダダ漏れして迷惑メールが飛んできたことがあるので、万が一に備えてよく確認すること

まとめ

ちょっと成果物をアップロードするだけのつもりが、とんでもなく時間は掛かったが、何かの役に立てば幸いである。次回、アップロードしたゲームを公開する

おわり！

この記事が参加している募集

#やってみた

42,544件