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

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

2013年12月05日

私が考えるエンドユーザプログラミングの世界とは

私は「エンドユーザプログラミングの世界の実現」を掲げ、去年Technical Rockstarsを創業しました。

エンドユーザプログラミング
たぶんいろんな言い方があります。
『作る』から『使う』への変化、とも言います。
例)GeneXusを使ってアプリを業務自動生成、kintoneを使ってアプリを構築。

私が考えるエンドユーザプログラミングの世界とは、自分の問題を自分で解決できる世界です。
別にあらゆる人が、スマートフォンアプリを作れるようになるとかそんなことじゃなく。
人が抱えている問題を簡単に解決できるようにしたい。ルンバが思い通りに動いてくれない、スマートフォンから家の電気が消えているかチェックしたい、Excelのデータをこういうふうに変換処理したい、そんな日常の問題を、簡単に解決したい。もちろんもっと複雑なソフトウェアも直感的に作りたいと思っています。
たぶんプログラミングという概念を根本的に変えないといけないです。
ソフトウェアが簡単に作れるというよりは、むしろソフトウェアを作るという考えをこの世から無くしたい。
「ソフトウェアを作る」ということを特別なことにしたくないのです。

我々はそれに対して、単に新しいツールを開発して解決しようとした訳ではないです。

cloocaのアプローチ
それぞれの分野ごとのソフトウェア開発ツール(=モデリング言語)を共有する仕組みです。
モデリング言語は十分抽象化されていてソースコードが自動生成される、その分野の人は自分たちの業界用のソフトウェアを自分たちで作れる。これは共有がポイントで、充分に分野に特化したソフトウェア開発ツールを、充分にそろえることで、簡単にソフトウェアが作れる世界を目指します。
現状、うまくいってないです。
clooca


別のアプローチ
cloocaを2年近くやって、色々反省しました。プラットフォーム化に凝りすぎました。プラットフォームは色々大変すぎます。
ということで初心にかえり、考えました。

改めて私がエンドユーザプログラミングに必要なことは以下のようなことだと思います。
・ユーザに「作っている」と思わせないこと
・ソフトウェアとは、元来目に見え、修正しやすく、結果もすぐにわかるものである(と思わせること)
ソフトウェアやその実行を目に見えるようにし、触れられるようにすること、そして触ることで反応があること。それらが人間にとって直感的であること。実行中にも自然に変更でき、変更による振る舞いの変化も理解しやすいこと。

今のプログラミング言語は、人間の直感に合わせた抽象化がされていなくて、コンピュータに合わせた言語です。私は、こうなったら次こうなる、ということが直感で分かる言語を作りたいです。
多分実際作るのは、ノイマン型コンピュータとソフトウェアの間に挟んで、ソフトウェアを直感的に見せる「何か」なんだと思います。

新しい試み
posted by Syuhei Hiya at 01:39| Comment(2) | TrackBack(0) | 日記
Powered by さくらのブログ