Web chatツール開発 on the 勉強会

WebChat over WebSocket

好きな技術を勝手につぎ込んで

WebChatアプリを作ってみよう

2013/09/05(木)@本社

今村豊[email protected]


WebChatアプリ開発

1.WebChatアプリ概要2.アーキテクチャ3.使用技術4.開発環境5.ユースケース分析6.今後のマイルストーン

本日は以下のような内容でお送りします。


WebChatアプリ開発

1.WebChatアプリ概要2.アーキテクチャ3.使用技術4.開発環境5.ユースケース分析6.今後のマイルストーン

本日は以下のような内容でお送りします。


1.WebChatアプリ概要

だいたいChatするって言うと



http://limechat.net/



でも

導入めんどうくさい

1.なんのデーモン入れるか調べる2.ngIRCdとってくる

3.iptablesの設定4.iptablesの設定方法を調べる

5.クライアントにLimeChatインストール



インストールのコツさえ解ればかんたんなんですが

誰でもすぐにサクっとインストールして

すぐに使えないものか



ブラウザさえあればいいそういう世界にすみたいんだ



そんななか

Aさん「VPSサーバ借りた。なんか遊びたい」

Bさん「OracleDBと戯れたい。チュッチュしたい」



VPSサーバ上にOracleDBで稼動する

Webアプリケーションを作りましょう！



作るWebアプリケーションのニーズ

1.機能数が少ない2.あまり技術的に挑戦しすぎない

3.インストールだけはバイナリ落としてサーバにのせるだけ（設定不要）

4.でもDBは使いたい


1.WebChatアプリ概要↓

Chatアプリがいいんでないのとなりました

さらに先述の問題を解決すべく簡単なサーバインストールと

ブラウザだけで完結するものがいい

WebChatしかない


1.WebChatアプリ概要だいたいのきのう

●チャネル（チャットルーム）で複数ユーザとメッセージ（発言）共有●最新のメッセージは画面に即時反映●メッセージの履歴もゆるふわに検索（↑これがないとDBの意味がない）


1.WebChatアプリ概要だいたいのきのう

●チャネル（チャットルーム）で複数ユーザとメッセージ（発言）共有●最新のメッセージは画面に即時反映●メッセージの履歴もゆるふわに検索（↑これがないとDBの意味がない）


1.WebChatアプリ概要こんなかんじになるはず

チャネル

おまえら

DB

①発言

「すまない、今にも漏れそうだ」

②発言はチャネルにつながる全てのブラウザに

すぐに反映(Server Push)

「すまない、今にも漏れそうだ」③不用意な発言も

しっかりDBに残す

「すまない、今にも漏れそうだ」


2.アーキテクチャ

必要そうなシステムコンポーネント

1.Webブラウザ2.アプリケーションサーバ

3.DBサーバ4.WebChatアプリケーションモジュール


2.アーキテクチャそうするとだいたいこうなる

ChatDB

アプリケーションサーバ

WebChatアプリケーション

モジュール

Webブラウザなにかの方法で通信


3.使用技術先述のアーキテクチャを実現するための

実装コンポーネント名実装説明Webブラウザ HTML5サポートのモダ

ンブラウザおすきなのをどうぞ

アプリケーションサーバ JettyまたはTomcat

JettyもWebSocketに対応した軽量JavaEEサーバ

DBサーバ OracleまたはJavaDB

JavaDBは組み込み動作するPureJavaデータベース実装

WebChatアプリケーションモジュール

JavaまたはGroovy

GroovyはJVMで走るJavaとよくにた軽量言語

通信プロトコル HTTPとWebSocket 双方向通信を実現するためにはこれしかない


3.使用技術フレームワークはまだ検討中です。

候補としては以下のようなものが。。。（そういえばMVCフレームワークが無いな）フレームワーク名用途

Google Guice SpringFrameworkよりも軽量でフットプリントの小さいDIコンテナとして

Jetty WebSocket JettyからWebSocket系機能を抜き出したもの

Logback 今からロガー入れるならこれですね

Apache Derby(JavaDB) Oracleが使えない環境向けの組み込み用DB


4.開発環境開発するにあたって必要なローカル環境

Eclipseとブラウザだけあれば充分！

でもプラグインだけは必要です。●Eclipse Jettyプラグインのインストール

http://symfoware.blog68.fc2.com/blog-entry-145.htm

●Eclipse Gitプラグインのインストールhttp://hoshisoft.hatenablog.com/entry/20110808/131276759

6

http://symfoware.blog68.fc2.com/blog-entry-145.htm


4.開発環境

開発するにあたって必要なサーバ環境

ビルドサーバ：

APサーバ：

ソースリポジトリ：

ビルドシステム：


4.開発環境

ビルドサーバ：

いわずと知れたJava製のCIツールです

1.定期的なビルド2.自動テスト

3.コードメトリクスの集計4.リリースプロダクトの配布

などなど、痒いところに手が届く素晴らしいアプリケーションです

これなしで開発したくない


4.開発環境

APサーバ：

ここでは「検証用に用いるアプリケーションサーバ」

の意味です

Jenkinsさんが勝手にデプロイしてくれるので、いつでも好きな時に最新ソースで動作確認できるようになるはず


4.開発環境

ソースリポジトリ：

こちらもそろそろ説明の必要がなくなってきたはず

ソーシャルコーディングの星です開発者的にはGoogle並みにありがたい

オープンソースをクラウド上にホストできる素晴らしいサービスです

チケット管理機能もついていて至れり尽くせり


4.開発環境

ビルドシステム：

Ant、そしてMavenの後継と名高いビルドシステムです

なんといっても今までのAntやMavenのように皆さんのローカル環境に

このビルドシステムをいちいちインストールしなくていいんです！

リポジトリから落としたgradlewを叩くだけ！こいつと結婚して幸せをつかもう！


5.ユースケース分析

ユースケース分析ってなんでしょう



ユーザがどんなことをできるかみんなで考えながら

システムが必要とする機能をモデリングしていきます



モデリングってなんでしょう


5.ユースケース分析システムに必要な要素を

洗い出して

（この場合はJavaに適合する）モデル＝オブジェクト

として

記述してあげることです

よくUMLでみかけますよね


5.ユースケース分析こんなやつ


5.ユースケース分析これは

データモデリングにも応用ができます！

データベースのテーブル設計はこの作業の先にあります

これはクラス図というよりE-R図ですが

クラス図とよく似てますよね


5.ユースケース分析ということで

この分析のゴール

ざっくばらんにデータモデリングまでしてみる



以下のユースケースについて議論してみましょう

ログイン＋トップユーザ登録ユーザ設定

タイムラインチャネル作成チャネル参加

そして必要なデータモデル（テーブル）を見つけてみましょう



あとは

口頭で


5.今後のマイルストーン無理のないペースでやりたいです

でも年内にはα版リリースまでいきたい（だって自分の作ったもの使いたいでしょ）


5.今後のマイルストーン●９月

● 基本検討●１０月

● 情報処理試験● 設計開始/DB構築開始

●１１月● 製造開始

●１２月● 単体テスト● 結合テスト● α版リリース

リリース準備作業がなにげに大変かもしれない

初回起動時のCREATE TABLE準備したり

それのテストしたり


5.今後のマイルストーン

自分の作ったアプリケーションを

公開して色んな人に使ってもらおう

まずは自分が使えるものから作らないと

ということでゆるく楽しくやってみましょう


参考

このアプリのリポジトリGitHub

https://github.com/utky/tilemine試しに使ってるクラウドのビルド環境

Travis CIhttps://travis-ci.org/utky/tilemine

その他、試験環境等については[email protected]に連絡ください

https://github.com/utky/tilemine

https://travis-ci.org/utky/tilemine


5.今後のマイルストーン

ありがとうございました以上です

Web chatツール開発 on the 勉強会

Technology