2014年03月01日

最近のWebアプリの作り方

弊社でコミュニケーションツールを作りました。友達とぺたぺた付箋を貼るようにコミュニケーションが取れます。

付箋アプリ(安直な名前)
http://fusen.mlkcca-app.com/
ソースコード

トピックを作成し白い部分をクリックすると、ダイアログが出ます。文字を入力すると付箋メモが貼れます。付箋は、このページを見る人達の間で、リアルタイムに共有されます。じつはこのサイトはほぼ一枚のHTMLでできています。(jQueryなどのライブラリは別途利用していますが・・サーバサイドコーディングはしていません。)このアプリを2時間ほどで作れます。利用した技術・サービスを3つご紹介します。

スクリーンショット 2014-03-01 3.13.54.png

見た目の部分はsnap.svgを利用しています。snap.svgは2次元ベクターイメージを扱う技術であるSVGを簡単に利用できるライブラリです。これを利用するとダイアグラムエディタのようなツールを作ることができます。FLOWerでも利用しています。とくに要素に対して.drag()を呼ぶだけでドラッグできるようになる当たりが気に入っています。

2つ目に付箋アプリはbitbaloonというホスティングサービスにデプロイしています。ドラッグアンドドロップでデプロイでき、HTML5アプリケーションを公開するのに便利です。

3つ目にリアルタイム共有の部分ですが。本来ですと、これを実現するためにはWebsocketに対応したサーバアプリケーションが必要です。しかし今回の付箋アプリはHTMLファイル1枚です。 実はmilkcocoaというBaaS(Backend as a service)を利用しました。フロエントエンドの技術だけで、Webアプリが作れます。今回はJavascriptです。サーバ側の準備は1分ほどで済みます。

以上Webアプリを作るときの3つの技術・サービスをご紹介しました。

ちなみに3つめのmilkcocoaは弊社Technical Rockstarsのサービスです。すみません、宣伝です。

よろしくお願いします。
タグ:web websocket
posted by Syuhei Hiya at 01:08| Comment(0) | TrackBack(0) | 日記
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/88578485
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック
Powered by さくらのブログ