概要

webアプリケーションとして動くものであれば、どのような技術を用いても開発できますが、Vue.js用にclientライブラリを提供しているので、Vue.jsを用いれば以下の4ステップで、比較的簡単に開発をはじめられます。

プロジェクトの立ち上げ

以下のコマンドでVue.jsのプロジェクトを作成します。 whim-clientではvuexを使いますので、vuexをオンにしてください。

$ vue create app_name
$ cd app_name

開発環境の構築

1. vue.jsのサーバーを起動します。

$ npm run serve
# or
$ yarn serve

PortがVue.jsのデフォルト(8080)になっていることを確認してください。 dockerやnuxt.jsを使っている場合はportが8080になるように設定してください。

2. wh.imにアクセスし、部屋を作成します。

wh.imより、遊び場を作るボタンを押します。

3. wh.imを開発モードにします。

URLに&develop=trueを付与してください。

4. app選択画面を開きます。

右上より、アプリを選択を選択します。

5. 開発用アプリを選択します。

開発用(port:8080)というアプリを選択します。


以上のステップでローカルで動いているvue.jsのアプリが確認できます🍺

whim-clientのインストール

以下のコマンドでVue.jsのプロジェクトに追加します。

$ npm install --save whim-client-vue
# or
$ yarn add whim-client-vue

main.jsでのwhim-clientの読み込み

main.jsを以下のような構成にします。

import Vue from "vue";
import App from "./App.vue";
import Vuex from "vuex";
import whimClientVue from "whim-client-vue";

Vue.use(Vuex);

const store = new Vuex.Store();

Vue.config.productionTip = false;
Vue.use(whimClientVue, { store });

new Vue({
  store,
  render: h => h(App)
}).$mount("#app");

1. whim-client-vueの読み込み

import whimClientVue from "whim-client-vue";

2. vueにライブラリの登録

第2引数にnew Vuex.Store()によって生成したstoreオブジェクトを設定します。

Vue.use(whimClientVue, { store });

whim-clientの使用例

this.$whimでVue.js上からwhimのデータの読み出し/書き込みができるようになります。

// user一覧の取り出し
this.$whim.users;

// stateの取り出し
this.$whim.state;

// stateの書き込み
this.$whim.assignState({ phase: "start" })

サンプルアプリ

サンプルアプリをいくつかご用意しました。参考にしてください。

目次ページに戻る

目次へ