arveltのソフトウェア技術メモ

Arvelt's software technology memo

Webアプリ「Chat for YOU!」公開

Chat For YOU!

 

はてダはからの移行記事。

このたび、Webアプリ「Chat for YOU!」を公開しました。

ルーム作成、ルーム入室パスワードの設定も可能なWebチャットです。勉強がてらつくったものなので、予告なく停止させる可能性があります。ご了承ください。

 

 

仕事ではJavaCobolを使う業務系SEです。業務で触るのは10年選手のサーバークライアントシステム。しかも業務部分のロジックを書くだけの定型処理。それでは技術も何もあったもんではりません。身近なチャットの仕組みをWebでやってみようと手を動かしてみました。

ServletJSPでサーバー側を作成。画面はhtmlとCSSjavascriptで構成しています。いずれも今回初めて触るものとなりました。以下では開発中に気づいたことなどを挙げていきます。

 

○Postってなんだろう?

 webの仕組み的なところを知るところから始めました。Webサーバーはブラウザが要求したものを返すだけなのかーとかそういうところからスタート。

 

ServletJSPMVC、、、聞いたことはあるよ!

 htmlファイルをとりあえず作ってみてブラウザで見て見たりしました。次はservletにhtmlを吐かせて見たりしました。コードが書くのがたるいのでJSPを使ってみたり。なるほどそれぞれ使われる理由があるのですね。今回は勉強目的なので、フレームワーク等は使わずにやっています。

 

○チャット的な仕組みをwebに組み込むにはどうすればいいだろう?

 チャットを実現させるために必要なクラス。・・・チャットサーバーとチャットルームとチャットユーザーとメッセージのクラスがあればいける!とかそういう感じで見切り発車です。

 

○DBはMySQLで!、、、え?

 サバクラならサーバーが発言をプッシュすれば終わりですが、Webではサーバーは応答するだけなのでそれはできません。COMETなんて技術もあるようですが、とりあえず普通のやり方をやってみようと思いました。発言はDBにつっこんでおいて、毎回返せばいいかーと思って作ってみたら、メモリ上に載っているのを返せば済む話だと気づいたりしました。発言をログとして残すつもりはないのですから。

 

○最近流行のAjaxってなんだろう?

 言葉はよく聞くけど、よくわかっていなかったAjax。GoogleMapみたいなあれでしょ、というのは知ってても何をしているのかはわかっていませんでした。Javasxriptを自分でごりごり書く事で何をしているのかがやっとわかったしだい。XMLHttpRequestを使えばなんとかなる! 発言が更新されるたびに画面全体を読み込みに行くのがうざいので、発言部分のみ非同期通信させることにしています。

 

○JSONなにそれおいしいの

 Ajaxのデータをやり取りする上で、テキストオンリーだとどうにもやりにくいことに気が付きました。どうやらJSONというデータ形式Javascriptと相性がよいとのこと。Evalすればそのまま読み込める! すごい! ただし、外部からとった悪意のあるスクリプトもそのまま読んでしまうので使いどころは気をつけねばなりません。とかいっておいて、内部で使ってるデータ形式はJSONと呼ぶのがためらわれるような恥ずかしい形をしています。

 

○ではデプロイ!ってどこに?

 できたものをサーバーに載せて公開しようとしたとします。単純に自宅サーバーがレンタルサーバーの選択肢がありました。ハードの用意やメンテは面倒なので借りることに。自作PCも楽しいですが、今回の目的とはずれます。とはいえレンタルでServletを使えるところはあまりありません。調べてるうちにVPSにたどり着きました。root権がもらえるのでTomcatもインストールできるぜ!

 

○さくらVPSのセットアップ

 サーバー設定は思ったより大変な感じです。最近はやっていたからか、ぐぐると最低限やるべき設定、とかCentOSを使うための設定とか、なんか色々見つかります。とりあえずその通りに設定してみましたが、なんだかよくわからないうちにできてしまったようなそんな感じ。まあもし間違っていてもOS再インストールがコンパネからボタン一発でできるのもVPSの良い点ですね。設定の勉強のために、頭から何度か試すなんて荒業も可能です。

 

 

というわけで、Webチャットでした。webで何かを作るってことのイメージはなんとなくわかったので、次はおもしろそうなものであるとか、手早くつくるやり方であるとか、別の観点でなにかやってみたいです。