Webブラウザだけでhtml5ゲームを作成して公開する

3 min read読了の目安(約3200字

はじめに

  • ゲームを作っている人なら、自分の作ったゲームを誰かに遊んでもらいたい気持ちは皆持っていると思います。
  • 今では、スマホアプリを作ってプラットフォームで公開する方法がメジャーですが、初心者にとってはそう簡単にはいかないものです。
  • そういう中でも、アプリ化まではいかないけど何かゲームを作って公開してみたい と思っている人もいるでしょう。その場合は、javascriptでhtml5ゲーム を作って、Webで公開することをおすすめします。(もちろんhtml5ゲームをアプリ化する方法もあります)

Webブラウザだけでゲームを作成して公開する

今回は、特別な環境構築をせずに、Webブラウザだけを使ってhtml5ゲーム を公開する方法を紹介します。大まかな流れは以下のとおりです。

  1. Webブラウザ上で動作するrunstantでコーティングする
  2. runstantプロジェクトをhtmlファイルとしてダウンロードする
  3. GitHubにゲーム公開用のリポジトリを作る
  4. htmlファイルをGitHubのリポジトリにアップロードする
  5. GitHubのリポジトリの設定でGitHub Pagesを有効にする

それでは、順番に説明していきます。

runstantでコーティングする

  • runstantは、phina.jsの生みの親であるphiさんが開発したWebブラウザ上で動くオンラインエディタで、ユーザー登録すれば誰でも利用することができます。
  • phina.jsの公式エディタでもあり、実際に様々なプログラムが作られて公開されています。

phina.jsのひな形からゲームを作成

普段私が使っているphina.jsのひな形から作ることで、簡単に始められます。

今回作ったゲーム

サンプルとして、制限時間内にどれだけ円をタッチできるかを競う単純なゲームを作りました。
touchthecircle

Touch The Circleをプレイする

runstantプロジェクトをhtmlファイルとしてダウンロードする

  • ゲームを作ったら、Webに公開するファイルの準備をする必要がありますが、runstant の便利な機能として、プロジェクトのダウンロードがあります。
  • ダウンロードされたファイルはhtml形式でjavascriptのコード部分もパッケージ化されているので、このファイル1つあればゲームとして動作します。

プロジェクトのダウンロード方法

runstantdownload.gif

  • runstantの画面下部にあるボタンをクリックすると、プロジェクトのダウンロードができます。
  • ダウンロード先は任意の場所にして、ファイル名をindex.htmlに変更して下さい。

GitHubにゲーム公開用のリポジトリを作る

  • GitHubは、今や有名になった、主にソースコードのバージョン管理を目的としたサービスです。
  • 今回は、このGitHubをゲームの公開用サーバとして利用します。
  • ユーザー登録を行ったら、ゲーム公開用のリポジトリを作成します。
  • ユーザーホーム画面で「New」ボタンをクリックします。

newrepository.gif

  1. 作成画面でリポジトリ名を入力します。
  2. 公開範囲が「Public」になっているのを確認します。
  3. 「リポジトリをREAD ME で初期化」にチェックを入れます。
  4. 「Create repository」ボタンをクリックします。

htmlファイルをGitHubのリポジトリにアップロードする

リポジトリの用意が出来たら、runstant からダウンロードしたhtmlファイルをリポジトリにアップロードします。GitHub は、ローカル環境からgitのコマンドを駆使して使うイメージがありますが、GitHub 上のGUI操作でもファイルのアップロード程度はできます。

uploadfile.gif

  • 「Upload files」ボタンをクリックします。

uploadfile2.gif

  1. 上の領域にダウンロードしたhtmlファイルをドラッグするか、ファイル選択ダイアログでファイルを選択します。
  2. 「Commit Changes」ボタンをクリックします。

uploaded.gif

  • ファイルがアップロードされたのを確認します。

GitHubのリポジトリの設定でGitHub Pagesを有効にする

setting.gif

  • 上部メニューから「Setting」をクリックします。

ghpages.gif

  • 「github pages」を有効にします。以前は、gitgh-pages名でブランチを切って、pushする必要がありましたが、現在は不要になっています。

ghpagescheck.gif

  • 上部に表示される アドレスが公開先のアドレスになります。
  • 反映されるまでには、少し時間がかかる場合もあるようです。

runstantプロジェクト

Touch The Circle(runstant)