2014年03月05日

こんな簡単に作れるなんて

bitballoonとmilkcocoaを使って、プログラミング初心者が簡単にWebアプリを作りました。



posted by Syuhei Hiya at 14:53| Comment(0) | TrackBack(0) | 日記

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) | 日記

Node.JS+socket.ioでSSL通信に対応させる

プロキシサーバとしてnginxを利用しました。
nginxとsocket.ioの連携メモ、SSLの場合。

以下はnginxの設定

upstream node {
least_conn;
server 127.0.0.1:3000 fail_timeout=20s;
}

server {
listen 80;
listen 443 ssl;
server_name yourdomain.com

#SSL証明書
ssl_certificate 証明書の場所;
ssl_certificate_key 鍵の場所;

#httpsにリダイレクトする
if ($ssl_protocol = "") {
rewrite ^ https://$host$request_uri? permanent;
}

#Node.js用とsocket.ioのxhr-pilloing用
location / {
proxy_pass https://node;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X_FORWARDED_PROTO https;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_redirect off;
}

#socket.ioでWebsocketで接続する用
location /socket.io/1/websocket/ {
proxy_pass https://node;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection upgrade;
proxy_set_header Host $host;
}
}

Node.JS側は


//node server
http = require('https');
options.key = fs.readFileSync("鍵の場所");
options.cert = fs.readFileSync("証明書の場所");
options.passphrase = "パスフレーズ";
server = http.createServer(options, app);

//socket.io
var io = socketio.listen(server, {secure : true});

posted by Syuhei Hiya at 00:47| Comment(0) | TrackBack(0) | メモ
Powered by さくらのブログ