wh.imで自作ゲームを登録するまで

# はじめに
こんにちは。普段は情報系の学科で大学生をしている者です。
[この記事](https://qiita.com/aitaro/items/8a97d320f5586c6e7bb6)に紹介されている、[wh.im](https://wh.im)というサービスの立ち上げに関わっているのですが、その一環でwh.im上で楽しめるゲームを開発しました。
このサービスの特徴として、**誰でもゲームを投稿** できます！そのやり方を知っていただきたく、記事を書きますので、興味を持った方はぜひゲーム開発を試してみてください！
簡単な[アプリ開発のためのドキュメント](https://docs.wh.im/developer)はありますが、やや不親切な部分があるので詳しく説明します。

#### 5/28更新
- ゲームの登録が**審査不要**でできるようになりました(審査なしの場合はIDを知っている人のみゲームをアクセスできるようになります)。
- 開発環境が大きく変更となりました。デバッグも可能となりました。

# ゲーム登録するまでの流れ(5月28日更新)
実際にwh.imにゲームを登録するまでの流れは次のようになります。
- ゲームを作る
- デプロイする
- ゲームを登録してテスト
- 全員が見られるように公開の申請(運営が審査します)
- 審査が通ったら、公開完了！！

# ゲームの開発環境(5月28日更新)
ゲームの開発環境が新しくなりました。今度は一度wh.imで入室したのち、URLの末尾に`&develop=true`とすることで開発環境にアクセスできるようになりました。
つまりwh.im/room/?id= [ルームID] &develop=trueからアクセスできます。
この状態でアプリ選択画面を出すと、「開発用(port:8080)」というのがあります。ここを起動することで`localhost:8080`で起動しているアプリをテストすることができます。`localhost:3001`のものもありますので、お好みの方をご利用ください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365308/e54e9dce-f232-02da-4301-9547aad9de6d.png)

# まずは実際に動かしてみる
Vue.js版で簡単にデータベースとの通信ができるnpmパッケージ`whim-client-vue`をご用意しました。Vue.js以外をご利用したい場合は、[下のpostMessage](#vuejs以外でのゲーム作りについて)をご利用いただくことになります。React版も作りたいと思っておりますのでお待ちください。

```bash
$ npm install -g vue-cli # or yarn global add vue-cli
$ vue create [appname]
```
ここで色々設定しますが、whim-client-vueで使うので、Vuexは必ず入れるようにしてください。他はお好みで大丈夫です。

```bash
$ cd [appname]
$ npm install whim-client-vue # or yarn add whim-client-vue
```
で準備完了です。

```bash
$ npm run serve # or yarn serve
```
でサーバーを立ち上げてください。これで開発環境での起動ができるようになります。
その後、次のようなファイルを追加します。

```javascript:src/main.js
import Vue from "vue";
import App from "./App.vue";
import VueCountdown from "@chenfengyuan/vue-countdown";
import whimClientVue from "whim-client-vue";
import "whim-client-vue/dist/whim-client-vue.css";
import "./assets/main.scss";

Vue.config.productionTip = false;
Vue.use(whimClientVue);
Vue.component(VueCountdown.name, VueCountdown);

new Vue({
  render: h => h(App)
}).$mount("#app");
```
ここからはお好きなように開発できますが、じゃんけんやNGワードゲームのように中央と4分割された各プレーヤーの上に画面を表示させるためには、次のような構成にするのがおすすめです。

```
.
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── components
│   │   ├── main
│   │   │   └── Index.vue
│   │   └── player
│   │       └── Index.vue
│   ├── main.js
│── vue.config.js
└── yarn.lock
```
画面中央にある表示は`src/components/main`内に、各プレイヤーの画面は`src/components/player`内に実装していくのがいいと思います。

```vue:src/App.vue
<template>
  <div id="app">
    <Main class="main" />
    <Player
      v-for="user in $whim.users"
      :key="user.id"
      class="box"
      :class="`pos${user.positionNumber}`"
      :displayUser="user"
    />
  </div>
</template>
<script>
export default {
  name: "App",
  components: {
    Main: () => import("@/components/main/Index"),
    Player: () => import("@/components/player/Index")
  }
};
</script>
<style lang="scss" scoped>
.main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: rgba(256, 256, 256, 0.7);
  z-index: 1;
  border-radius: 10px;
}
.box {
  width: 50%;
  height: 50%;
  position: absolute;
  text-align: center;
  &.pos1 {
    top: 0%;
    left: 0%;
  }
  &.pos2 {
    top: 0%;
    left: 50%;
  }
  &.pos3 {
    top: 50%;
    left: 0%;
  }
  &.pos4 {
    top: 50%;
    left: 50%;
  }
}
</style>
```
ここまでで、ゲームの実装の下準備は完了です！ここまでのコードにplayerやmainの簡単な画面を加えたものは[こちら](https://github.com/whimRTC/whim-template)に置いておきます。
# デプロイする
Netlify、GitHub Pages、Firebase Hosting など、お好きな環境でデプロイしてください。個人的には、GitHub連携できるNetlifyがおすすめです。GitHubにpushするたびにbuild&deployできる、CI環境が簡単につくれます。

# ゲームを登録する(5月28日更新)
サンドボックス環境は廃止し、次のように気軽にゲーム登録をしていただけるようになりました！！
ゲームを登録すると即時で固有のIDが与えられ、すぐにテストできるようになっています。

まず[developer.wh.im](https://developer.wh.im)にアクセスします。すると、Googleのログインが求められるのでログインをお願いします(現在、アプリの登録にはGoogleアカウントが必要です)。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365308/0c3ab902-2d64-bd27-0b29-86f4a0133cad.png)

そして「新規アプリ」をクリックします。すると次のような画面が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365308/01d4398b-7cd2-ad70-3e63-f23082b0c135.png)

必要事項を記入します。ゲーム登録はこれで完了です。

ただし、全員に公開されるわけではなく、ゲーム検索画面でIDを検索することによってのみ表示されます。登録後、ゲームのところに表示されるIDを検索してください。


# 公開審査への登録(5月28日更新)

登録したゲームを公開したいときには、再度[developer.wh.im](https://developer.wh.im)の同一アカウントでログインします。そして、公開したいゲームの編集アイコンをクリックします。

すると、再度上と同様の登録画面が出ます。下の方までスクロールすると、「公開する」というチェックボックスが現れるので、それをチェックしてSAVEボタンを押しします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365308/e450803c-9584-b854-a4cb-581be282ab2f.png)

これで、公開審査への登録は完了です。wh.im運営が審査を行い、問題がなければ公開いたします。審査結果はGmailにお送り致します。

# ゲーム作りの方法
具体的なゲーム作りの方法は別の記事にじゃんけんを例にして説明~~する予定です。~~
[記事を公開](https://qiita.com/ttttkkkkk31525/items/c0e4eec05d7cb3600c0e)しました。よろしくお願いします。
# Vue.js以外でのゲーム作りについて
先ほど説明した方法では、すべてのデータベース操作は`whim-client-vue`に隠蔽されているのですが、Vue.js以外では、以下の方法を用います(Reactについてはライブラリを公開したいと思っています)。
ゲーム作りで不可欠となる利用者どうしでのデータのやり取りのやり方をご説明します。技術としてはJavaScriptの`postMessage`を利用しています。
記法ですが、

```javascript:
window.parent.postMessage({hogehoge}, document.referer);
```
とします。wh.imではiframeを利用しているので、`window.parent`でwh.im本体の画面から通信できます。`document.referer`を用いることで安全性を高めています。
詳細は[開発者ドキュメント](https://docs.wh.im/developer/#サンプルアプリ)をご覧ください。
# 終わりに
次の記事として、実際に公開されている[じゃんけんの実装を説明した記事](https://qiita.com/ttttkkkkk31525/items/c0e4eec05d7cb3600c0e)もご用意しました。そちらもぜひ読んでみてください！