オレンジブログ

オレンジブログ

自作ゲームについてとか色々

【enchant.js】自作のブラウザゲームをレンタルサーバーで公開する方法②

前回に引き続き、enchant.jsで作ったゲームをレンタルサーバーにアップロードする方法について話していきます。

f:id:orangeLily:20200730170156p:plain:h200
enchant.js

前回の記事を読んでいない方は前回の記事を読んでからの方がわかりやすいと思います。
orangelily.hatenablog.com

レンタルサーバーを借りる


まずは準備としてレンタルサーバーを借りましょう。

自分でサーバーを建ててもありですが、レンタルサーバーの方が手取り早いです。

今回使わせていただくレンタルサーバーは「スターサーバー」さんです。

理由としては、私が愛用しているからですね笑。

登録→申し込み


スターサーバーのレンタルサーバーをお借りするため、登録をしてサーバー申し込みをします。

StarServerトップページに飛んで、右上にある「お申し込みボタン」をクリックしましょう。

f:id:orangeLily:20200730113219p:plain:h200
出典:スターサーバー

申し込みフォーム画面に飛んだら「新規登録ボタン」をクリックします。

新規登録画面になったら、登録したいメアドを入力して認証IDを取得します。

f:id:orangeLily:20200730144941p:plain
出典:スターサーバー

認証IDを取得ボタン」を押したら、入力したメアドにスターサーバーからメールが届いていると思います。

そのメールの中にある認証IDをコピーします。
(下の画像の黒い部分に認証IDが書いてあるので、その部分を確認してください)

f:id:orangeLily:20200730145003p:plain

この認証IDを先ほどの新規登録画面の下にある認証ID登録フォームに入力して「登録ホームへ移動」をクリックすると登録情報入力画面に移動します。
コピペしましょう。

f:id:orangeLily:20200730122411p:plain:h200
出典:スターサーバー

そこからはサイトに従って会員IDやパスワードを決めていきます。
全て入力して利用規約に同意をしたら下の「確認ボタン」を押しましょう。
会員IDやニックネームが被っていなかった場合、次の画面にいけます。

次は本人確認のためSMS認証または電話認証を行います。
手元のスマホの電話番号を入力してSMSで認証を行うのが一番手取り早いでしょう。

スマホに送られてきた番号を入力して認証することで登録完了です!
長かったですが、これでやっと登録完了です笑。

StarServerFreeを使えるようにする


認証に成功したら下の画像のようなページに飛んでいると思います。

f:id:orangeLily:20200730145210p:plain
出典:スターサーバー

このページの左上にある「サービス一覧」のところにマウスを持っていきます。
そしたらこのようなメニューが出てくるので、「StarServerFree」の部分をクリックします。

f:id:orangeLily:20200730125502p:plain:h200
出典:スターサーバー

クリックしたらレンタルサーバー申し込み画面に移動するので、「今すぐ始める」ボタンを押しましょう。
ログイン画面が出てきたら先ほど登録したメアドとパスワードでログインしてください。

次にプランを選択します。自分の用途にあったプランを選びます。
よくわからなければ1番左のフリープランを選んで大丈夫です。

f:id:orangeLily:20200730141252p:plain
出典:スターサーバー

次にサーバーIDを決める画面に移動します。
サーバーIDとは、自分がゲームを公開した時にURLが作られると思いますがそのURLの

http://この部分.starfree.jp/hogehoge/index.html
この部分」にあたる文字のことを指します。
公開情報になるので、自分のサイトだとわかりやすく尚且つ個人情報を晒さないような文字にしましょう。

サーバーIDを決めて利用規約に同意したら「確認画面ボタン」をクリックします。

サーバーIDに問題がなければプラン確認画面に移動します。
今回決めたプランの情報が載っているので、確認して問題がなければ選択したプランで申し込むをクリックしましょう。

これでフリーのレンタルサーバーをお借りすることができました。

レンタルサーバーにゲームのアップロード


ここまでできたら一旦スターサーバーのメンバー管理ページへ戻りましょう。
先ほどのトップページから「ログイン → メンバー管理ツール」とクリックし、移動した後のページで左のメニューにある「スターサーバー管理」をクリックすると戻ってこれます。

f:id:orangeLily:20200730134516p:plain:h200
出典:スターサーバー

先ほどと違って、スターサーバー管理のメニューの中に少し小さく「無料プラン管理」が追加されています。

f:id:orangeLily:20200730143021p:plain:h300
出典:スターサーバー

無料プラン管理」をクリックするとサーバーアカウント一覧が表示されます。
その中にさっき追加したプランのサーバーがあると思うので、そのサーバーの「サーバー管理ツール」をクリックして開きます。

このページでは借りているサーバーの情報などを見ることができます。今回はゲームデータのアップロードが目的ですので、左のメニューから「FTPアカウント設定」をクリックし、先ほど設定したドメインのサーバーを選択します。

次にFTPアカウント一覧ページに飛ぶので、先ほど設定したサーバーIDのWebFTPにログインします。

これでやっとファイルマネージャーにたどり着きました。ここにゲームデータをアップロードします。

まずは「新規作成」をクリックしてフォルダを作りましょう。
このフォルダ名も最終的なゲームのURLに載るので、雑に決めず、わかりやすい名前にします。

私はゲームデータを入れるフォルダと言うことで「Games」に決めました。

f:id:orangeLily:20200730135221p:plain:h200
出典:スターサーバー

次に今作ったフォルダをダブルクリックします。するとそのフォルダのディレクトリに移動するので、またここでもフォルダを「新規作成」しましょう。
このフォルダの名前は今からアップロードするゲームの名前にします。

f:id:orangeLily:20200730141821p:plain
出典:スターサーバー

前回の記事で作ったフォルダ名の「TestEnchant」です。安直

現在のディレクトリツリーはこうなっています。

f:id:orangeLily:20200730141732p:plain:h200
出典:スターサーバー

では先ほど作ったフォルダ(私の場合はTestEnchantフォルダ)をダブルクリックしてTestEnchantディレクトリに移動します。

そしたら次は「アップロード」をクリックしましょう。

クリックするとアップロードするファイルを選択する画面に移動しますね。ここでファイルを同時に5個までアップロードできます。

①の記事で作成した4つのファイルを選択して「アップロード」をクリックします。

f:id:orangeLily:20200730142159p:plain
出典:スターサーバー

アップロードに成功したら「このウィンドウを閉じる」をクリックします。

最終的にこのような形になっていれば成功です。

f:id:orangeLily:20200730142253p:plain:h200
出典:スターサーバー

◆重要◆ 今回はアップロードするファイルが4つで澄みましたが、本来であればもっと多くのファイルが存在します。さらにフォルダ分けをして管理していると思われるので、このように1つ1つアップロードしていく方法では流石にめんどくさいです。

そこで「FTPソフト」を使用することをオススメします。FTPソフトを使うことでPC上のゲームのフォルダ事アップロードすることができたりしてとても便利です。

FTPソフトを使いたい場合はスターサーバーのFTPソフトの設定説明サイトを見るとわかりやすいです。
FTPソフトの設定 | レンタルサーバー【スターサーバー】

これでアップロード終了です!

アップロードしたゲームをプレイ


ゲームのアップロードが成功したなら、あとはプレイするだけですね。

アップロードをしたゲームのURLは「http://アップロードしたサーバーのドメイン/index.htmlのアドレス」です
今回の私の場合だと「http://mikanmikan.starfree.jp/Games/TestEnchant/index.html」になります。

アップロードしたサーバーのドメインは、FTPアカウント設定のページで確認することができます。
index.htmlのアドレスは、ファイルマネージャーのページでindex.htmlの操作のところにある「歯車マーク」をクリックすると確認することができます。

f:id:orangeLily:20200730143715p:plain
出典:スターサーバー


実際にPCやスマホで開いてみましょう。バグなどがなければ動くはずです。
あとはこのURLをプレイさせたい人に公開すればOKです。やっとゲームが公開できましたね!!お疲れ様です!!