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) | メモ

2014年02月06日

Flowerを作って

弊社でFlowerというプログラミング言語を作りました。
URLはこちら
@nobkzと作りました。

logo.png

使い方は彼のブログを見てください。
Flowerの使い方(@nobkzのブログより)

Flowerを作って、いろいろ思ったことがあるので書きます。
Flowerは福岡ビジネスデジタルコンテンツ賞の公開審査にて、ヤング賞を頂きました。ありがとうございます!福岡県のコンテストで、プログラミング言語が受賞できたことは、非常に嬉しく思います!!

ここでの発表を皮切りに、Flowerを公開し色々なコメントを頂いたのですが。まだ何となく、プログラミング言語とかソフトウェア開発ツールが重視されてない感じを受けました。ずいぶん古い言語やツールを持ち出されて、それ似てるんじゃないかと言われるわけです。ただそういう意見はすごくありがたいので、これからもよろしくお願いします!たぶん僕らの思いの伝え方が下手だったのだと思います。

今日僕が言いたいことは「プログラミング言語とかソフトウェア開発ツールはもっといっぱい出て来て競争するべき。」だということです。そうすることで、ソフトウェア開発自体がもっと楽になっていくわけです。「プログラミング言語とかソフトウェア開発ツール」もサービスと同じで、ユーザの抱える問題を解決する訳です。それが大事な訳です。ユーザ(開発者)がソフトウェアを作って利用可能にするまでを、全力でサポートするのです。だから「プログラミング言語とかソフトウェア開発ツール」も独自の色を持つのです。つまり言語が似てるとかじゃなくて、その言語がどんな問題を解決するのかが大事な訳です。

実際に業務アプリケーションやゲームの領域では、競争が起こっているわけで。でもなぜか古いツールをいつまでも使っている領域もあるんですよね。今まで「プログラミング言語とかソフトウェア開発ツール」を作ることは非常にコストだった訳ですが、様々なツールによりそれは改善されて来ています。MetaEdit+、clooca、DSL toolを使えば、簡単にグラフィカルな言語が作れます。xtextを使えば、DSLが作れます。

つまり私としては「プログラミング言語とかソフトウェア開発ツール」のレイヤーも、もっとリフレッシュしていきたい訳です。

下手な文章ですみません。
これからもよろしくお願い致します。
posted by Syuhei Hiya at 19:52| Comment(0) | TrackBack(0) | 日記
Powered by さくらのブログ