概要

wh.imはVue.js用に簡単に開発するためのclientライブラリを提供しているので、Vue.jsを用いれば以下の4ステップで、簡単に開発をはじめられます。

入門記事

Vue.js入門者用の記事をQiitaで公開しております。合わせてご覧ください。

プロジェクトの立ち上げ

vue-cliをインストールし、以下のコマンドでVue.jsのプロジェクトを作成します。各選択肢はデフォルトのままで大丈夫です。(必要に応じて機能を追加してもかまいません。)

$ vue create app_name
$ cd app_name

開発環境の構築

1. vue.config.jsを編集します。

クロスドメインでアプリを呼び出すために、hostをlocalhostと明示します。

module.exports = {
  devServer: {
    host: "localhost"
  },
};

2. Vue.jsのサーバーを起動します。

$ npm run serve
# or
$ yarn serve

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

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

wh.imより、ルームを作成ボタンを押します。

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

URLに&develop=trueを付与してください。以下のようなurlになります。

https://wh.im/room?id=someRoomId&develop=true

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

右上のwh.imボタンより、アプリを選択を選択し、アプリ一覧画面を表示します。

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

開発用(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 whimClientVue from "whim-client-vue";
import "whim-client-vue/dist/whim-client-vue.css";

Vue.config.productionTip = false;
Vue.use(whimClientVue);

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

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

import whimClientVue from "whim-client-vue";
import "whim-client-vue/dist/whim-client-vue.css";

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

Vue.use(whimClientVue);

whim-clientの使用例

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

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

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

// stateの書き込み
this.$whim.setState("phase", "start")

より詳細にはAPI一覧をご覧ください。

サンプルアプリ

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

目次ページに戻る

目次へ