2013年1月19日土曜日

Node.js+Connectでシンプルなウェブサーバー

HTML5のFile APIを試したらNOT_READABLE_ERRになってうまくアクセスできなかった。
調べてみるとどうやらfile://..のようなURLでアクセスしたページでこのAPIを使ってファイルを読み込もうとするとこのエラーとなるらしい。
そこでhttp経由でアクセスできるようNode.jsを使ってローカルに静的コンテンツを返すだけのシンプルなウェブサーバーを立てました。

  1. Connectをnpmでインストール。

    % npm install connect
    
  2. 以下の内容でserver.jsを作成。

    ‘/Users/shinichy/hoge’の部分はドキュメントルートにしたいディレクトリを指定して下さい。
    ポート番号もお好みで。

    var connect = require('connect');
    connect.createServer(
      connect.static('/Users/shinichy/hoge')
    ).listen(8080);
    
  3. Node実行。

    % node server.js
    

ブラウザでhttp://localhost:8080にアクセスすると、/Users/shinichy/hoge/index.htmlの内容が表示されます。
このページ内でFile APIを実行すると無事ローカルのファイルを読み込むことができました。

2013年1月8日火曜日

Chromium Embedded Framework (CEF) チュートリアル (Mac)

HTML+CSS+JavaScriptでデスクトップアプリを作れるフレームワークの調査でも紹介しましたが、Chromium Embedded Framework (CEF)はChromeブラウザの機能を自分のアプリケーションで使えるようにするためのブラウザコントロールです。

ダウンロードしたバイナリに含まれるcefclientというサンプルプログラムがあるのですが、README通りには素直にビルドできなかったので、今回はMac版CEFのビルドの仕方を紹介します。
ちなみにCEFにはシングルプロセスアーキテクチャのCEF1とマルチプロセスアーキテクチャのCEF3の2種類あります。
CEF3の方がパフォーマンスが良いらしいので、今回はCEF3を試しました。

試した環境はMac OS X Lion + Xcode 4.5.2です。

  1. http://code.google.com/p/chromiumembedded/downloads/listからcef_binary_3.1180.823_macosx.zipをダウンロードします(バージョンは最新のものをダウンロードして下さい)。
  2. 解凍した中にあるcefclient.xcodeprojをXcodeで開きます。
  3. そのままビルドすると以下の様なエラーが出ます。

    image

    これはArchitectures -> Base SDKの設定がOS X 10.6 (Snow Leopard用)になっているためで、Snow Leopard以外の人はこれをOS X 10.7やCurrent OS Xなどに変更する必要があります。

  4. プロジェクトツリートップのcefclientをクリックするとTARGETSにALL、cefclient、libcef_dll_wrapper、cefclient_helper_appが表示されるので、それぞれのターゲットをクリックしてBuild Settingsから上記のBase SDKの設定を行います。

  5. 次にBuild Options -> Compiler for C/C++/Objective-CをLLVM GCC 4.2に設定します。
  6. 上記の手順を全てのターゲットについて行い、ビルドを行います。
  7. ビルドが成功するとcefclient.xcodeprojのあるディレクトリにxcodebuildというディレクトリが作られていると思うので、その中のDebugディレクトリにcefclient.appがあります。
  8. cefclient.appを実行して以下のようなウィンドウが表示されれば成功です。

ネイティブなウィンドウメニューとどうやってやり取りするかはまた今度調べてみます。

2013年1月7日月曜日

HTML+CSS+JavaScriptでデスクトップアプリを作れるフレームワークの調査

Win、Linux、Mac上で動くクロスプラットフォームなデスクトップアプリケーションを開発したいと思い、最近流行り?なHTML+CSS+JavaScriptのWeb3種の神器でデスクトップアプリケーションを開発できるフレームワークを調べました。

TideSDK

元々Appceleratorという会社がTitanium Desktopという名前で開発していたフレームワーク。
モバイル版のTitanium Mobileの方が有名ですよね。
Titanium Mobileに注力するためかTitanium Desktopは捨てられ、TideSDKという名前に変えてコミュニティ主導の開発になりました。

こういう歴史もあるので先行きが若干不安ですが、コミットログやブログ等を見る限り更新は順調に続けられているようです。
元々会社主導で開発していたためかクオリティも高くドキュメントもそこそこ充実しています。
特徴的な機能としてはJavaScriptの他にRuby, Python, PHPを使うこともできるので、これらの言語を使ってクロスプラットフォームなデスクトップアプリケーションを作るならかなり魅力的な選択肢になるのではないかと思います。

Wunderlistという最近流行りのクロスプラットフォームなTodo管理ソフトはこのTide SDKで作られているらしい。

Chromium Embedded Framework (CEF)

Google Chromeのコア部分を抜き出してブラウザコントロールとして他のアプリケーションに埋め込めるようにしたもの。なのでChromeでサポートされている最新のHTML5やCSS3のテクノロジーと高速なV8 JavaScriptエンジンを手軽に使用できるのが魅力(ちなみにTide SDKはJavaScriptCoreが使われているらしい)。元々のAPIはC/C++だが、.NET、Delphi、Java、Python用のバインディングも存在します。

Googleのプロジェクトではなく普通のオープンソースのプロジェクトですが、開発は活発に行われているようです。
ドキュメントはWikiにちょろっと書いてあるだけで、Wikiを読んでも結局詳しくはヘッダーのコメント見てね(・ω<)ってのが多いです。
しかもTide SDKみたいに日本語の入門記事はおろか英語の入門記事すらもほとんどないので、素人お断り感が半端ないです。

採用例としてはEvernoteやSpotifyのクライアントアプリケーションがあるので、本格的なアプリを開発するのにも十分使えそうです。
AdobeのBracketsというオープンソースのエディタもCEFが使われています。

AppJS

上のCEFに加えて今流行のNode.jsをバックエンドに使い、Nodeモジュールを読み込めるようにしたもの。
ポテンシャルはあるが更新頻度がイマイチなのが残念。

node-webkit

AppJSと同様Node.jsを組み込んでNodeモジュールを使えるようにしたフレームワーク。
AppJSはCEFとNodeが別々に動いてお互い通信しあう形だが、こちらは両者のソースコードを抜き出してイベントループを1個にまとめて無理やり1つのスレッドで動かすという荒業をやってのけている。
そのためAppJS方式よりもパフォーマンス面で有利だと主張している。
開発はオープンソースだがIntelのOpen Source Technology Centerが主導で行なっている。

実際試したがまだかなりバグがある模様。
でも更新はかなり頻繁なのでこれからに期待!

まとめ

Nodeモジュールが使用出来るAppJSとnode-webkitの2つはかなり魅力的だが、まだどちらも開発途上で本格的なアプリケーション開発に使用するにはまだしばらく様子見といった所。
現状でHTML+CSS+JSで本格的なデスクトップアプリケーションを作るならTide SDKかCEFになるが、Tide SDKはフルスタックなフレームワークなのでネイティブなウィンドウメニュー等もサポートしており、フレームワーク内で完結するのであればこちらを使用した方が楽にできると思います。
CEFはフレームワークというよりブラウザコントロールなので、ネイティブなメニューを作ったりするのは自分でコード書かないといけませんが、その分自由度があります。
高速なV8が使えるのも魅力ですね。

それにしても最近Node.jsであったりTitaniumであったりJavaScriptでサーバサイドからモバイル、デスクトップアプリまでかなり応用例が増えてきてますね。
これからもJavaScript界隈には注目していきたいです。

2013年1月6日日曜日

はてなからBlogeerに移転しました。

昨年6月にアメリカにJ1インターンで来てから遊んでばっかで全然ブログ更新してなかったので、年も変わったことだし今年はもっとプログラミング方面でも遊んでどんどんアウトプットしていこうと思います。

ついでに独自ドメインでブログを運用したくなったのですが、以前使っていたはてなは有料会員にならないと独自ドメインが使えなかったので、無料でも使えるBloggerに移転しました。

移転の際には以下の記事通りにしてうまくいきました。

はてなダイアリーからBloggerへの移行

いくつか記事の日付がインポートした日になってた以外は特に問題なさそうです。