Enneagram2 (HTML5)

タイトル
タイトル

既存のflash版エニアグラムをHTML5(CreateJS)で書き換えたものです.flash版に対し以下の優位点があります.

  • flashは将来的に心配
  • モダンブラウザを詰んだOS(Android等モバイル端末を含む)であれば実行できる
  • 通信テスト機能を強化
  • JSコンソールから履歴を参照する等が可能

ダウンロード

https://github.com/OUCC/Enneagram2/releases

使い方

セットアップ

index.html,index.css,build/app.bundle.js,assets/等を含むフォルダに静的ウェブサーバーを立てます.nodeならnode-staticパッケージ,pythonならpython -m http.serverを利用してください.このときポート番号とIPアドレスを指定することを忘れないでください.

# node-static
npm install # node-staticをインストール
npm start -- -p 8080 -a 192.168.11.2
# python3
python3 -m http.server --bind 192.168.11.2 8080

サーバーPCとクライアントPCが同一のネットワーク(ルーター)に接続されていることを確認してください.クライアントPCからサーバーPCにアクセスしてください.上記の例なら http://192.168.11.2:8080 です.

起動

以下のページが表示されるので,中央のリンクをクリックし起動してください.

起動
起動

起動時に画面が最大化されます.Androidのブラウザなどは最大化する機能がないので必要性を感じ実装しました.

最初に表示されるタイトル画面はクリック(タップ)すると次の画面に進みます.

通信テスト

起動時に占いサーバーとの通信テストが行われます.通信に失敗した場合アラートが表示されます.

起動時の通信テスト
起動時の通信テスト

また,タイトル画面をクリック時にも通信テストが発生します.

通信テスト
通信テスト

設定変更

名称 詳細 デフォルト
serverName サーバーのIP・ドメイン localhost
serverPort サーバーのポート番号 8080
clientID クライアントの識別ID A

URLクエリパラメータを用いて設定変更します.例) http://localhost:8081/?serverName=192.168.11.2&serverPort=8082&clientID=C

設定はJSコンソールF12で確認できます.

結果の送信

45問の質問が完了したら結果を占いサーバーに登録&印刷します.印刷完了した場合は以下の画面が表示されます.下部にはリクエストのIDが表示されます.

印刷成功
印刷成功

印刷に失敗した場合は以下の画面が表示されます.下部には質問結果が表示されます.占いサーバーの管理画面にて登録しなおしてください.

印刷失敗
印刷失敗

デバッグ

JSコンソールF12で通信テスト・履歴参照等ができます.

開発

言語

TypeScript

開発環境

atomエディター,atom-typescript,linter-tslintで開発.

セットアップ

npm install
npm run init

ビルド

npm run build