JoosyはRailsと連携するWebアプリケーションフレームワークです。 Webアプリケーションを開発しようとした際にフロントエンドのフレームワークは多数ありますが、バックエンドはあまり用意されていません。しかしJoosyはRuby on Rails連携型であり、フロントエンド/バックエンドを効率的に開発できるWebアプリケーションフレームワークになっています。 アプリケーションベースを生成します。 この二つのコマンドで準備は完了です。 最初の表示です。 ファイル構成です。 コントローラ部の実装です。 ビューはHAMLで記述します。 JoosyはRailsの中にJavaScriptを使ったMVCフレームワークを組み込みます。肝になるのはCoffeeScript、jQuery、HAMLそしてSuger.jsとなっています。そしてデータをAjaxでサーバサイドとやり取りし、その結果をレンダリ

Balloons.IOはnode.js+Redisで作られたWebチャットサーバです。 node.jsを使ったWebアプリケーションとしてよく取り上げられるのがWebチャットではないでしょうか。WebSocketsとノンブロッキングなnode.jsの特徴を引き出したサービスです。そんなWebチャットを自分でも立ててみたいと思ったらBalloons.IOを使ってみましょう。 トップページです。認証はTwitterを利用します。 ログインしました。ついで部屋を作成します。 チャット画面です。 アイコンが表示されていませんが会話は出来ます。 日本語も特に問題なく使えます。 Balloons.IOはnode.js + Socket.io + Redisの組み合わせで実装されています。さらにTwitterによるOAuth認証も使われており、WebフレームワークにExpressを利用するなど今時の技術

Mozilla Thimble AppはMozillaの開発したWebサイト作成ツールです。 インターネットはみんなにとって身近なものになっていますが、Webサイトを作るという行為はまだまだ敷居が高いように見えます。しかし、それはとっても簡単なことなんだよ、と教えてくれるのがMozilla Thimble Appです。 左側がソースコード、右側にプレビューが表示されます。 入力中はリアルタイムにコードチェックが行われて、エラー通知が出ます。 問題がすぐに分かります。 HTMLページを公開できます。 タグを選択するとこうやってフローティングで説明が表示されます。 サンプルです。動物紹介ページです。 公開用URLです。 実際に作成されたページです。 こんな感じのテストページもあります。 Mozilla Thimble Appはあえてオーサリングツールを使わずコードを直に書いてコンテンツを作成し

FilePadはWebブラウザベースのファイルブラウザとテキストエディタが組み合わさったソフトウェア。 FilePadはnode.js/JavaScript製のオープンソース・ソフトウェア。Webアプリケーションは多数存在するが、なかなか変わらないのはテキストエディタだ。やはりローカルで手になじんだものを使うのが一番良いのだろうか。いや、まだまだ狙うべき所はある。 編集画面 Webサーバ上、クラウド上にあるファイルに対してはWebブラウザを通じて編集した方が早いはずだ。直接編集するのはセキュリティ的に怖いが、FilePadはそれを可能にする一つの答えだ。 FilePadは特定のディレクトリを指定して実行する。そうすると9573番ポートでWebサーバが立ち上がる。Webブラウザからアクセスすると、左側にファイルの一覧が表示されている。ファイルを選択すると右側で編集できる仕組みだ。 テキストエ

最近は、HTML5で組む機会も増えてきたので、いろいろ調べていたらHTML5ベースのWYSIWYGエディタを発見しました。 WYSIWYGエディタといえば、TinyMCEが有名どころですが、そんなにスタイルを変更させたくなかったり、高機能すぎて少し重たかったりするので、贅沢な不満もありました。 今回ご紹介するのは、高速でかつ軽量なHTML5ベースのオープンソースWYSIWYGエディタ「wysihtml5」です。 「wysihtml5」は、HTML5の技術とプログレッシブエンハンスメント（Progressive Enhancement）のアプローチに基づいたオープンソースのリッチテキストエディタです。 高度なセキュリティの概念を使用して、メンテナンスが困難なタグとインラインスタイルの混在を防止することにより、 完全に有効なHTML5のマークアップを生成 することを目指しているそうです。 jQ

OpauthはPHP向けの認証ライブラリです。抽象化することで多様なプロバイダーに容易に対応できます。 Webサービスで認証を用意すると言っても今は多様な技術が存在します。単なるID/パスワードに限らず、OpenIDやOAuthもあります。サービスプロバイダーごとに実装も若干変わったりします。そうした認証技術を統合して使えるのがOpauthです。 デモです。 Facebook認証です。 問題なく認証できました。各種データも取得できているのが分かります。 こちらはGoogle認証です。 こちらもユーザプロフィール含めて取得できています。 最後はTwitterです。 はい、問題ありません！ OpauthはRubyの認証ライブラリOmniauthにインスパイアされて作られており、認証部分を抽象化することでプロバイダーを切り替えて容易に様々なサービスに対応できるようになっています。技術的にはOpe

CSS3 Facebook ButtonsはCSS3で作られたFacebook風ボタンデザインです。 最近はFacebookアプリの開発も増えてきました。そんな開発の際に使えそうなのがCSS3 Facebook Buttons、Facebook風ボタンをCSS3で作成したソフトウェアです。 色は3種類から選択できるようです。 classを指定するだけ。使い方は簡単です。 サイズが少し大きいバージョンです。 classにlargeをつけるだけです。こちらも簡単です。 グループ化です。こちらも需要がありそうです。 div.uibutton-groupをつけるだけです。 こんな感じに混ぜた表示もできます。 ツールバーという指定を使います。 アイコン付き表示もあります。これは便利そう。 addやeditといったclassをつけるだけ。簡単です。 色付きボタンはもちろん、大きさやアイコンをつけたボタ

BoilerplateはURLを与えると本文部分を抽出するライブラリ。 BoilerplateはJava製のオープンソース・ソフトウェア。Webサイトをクローリングしたり、そのサイト内にあるテキストを使って別なWebサービスを構築すると言った手法はよく存在する。そんな時に必要になるのが本文抽出というテクニックだ。 デモ Webサイトには本文以外にも多様なコンテンツが存在する。例えばヘッダー、サイドバー、フッター、広告などだ。そうした無用なコンテンツを除去し、必要な部分だけ取り出すためのライブラリがBoilerplateだ。 BoilerplateはURLを引数に、後は自動的にコンテンツを取得して本文だけを返却してくれるという手軽なライブラリだ。Javaのライブラリなので、既存のJavaシステムに組み込むのはもちろん、Google App Engineを使ってWeb APIとしてコンテンツ抽

PdfMasherはPDFファイルを解析してテキストを編集後、HTMLに変換するソフトウェア。 PdfMasherはWindows/Mac OSX/Linux用のオープンソース・ソフトウェア。iOSをはじめ、多数のデバイスでPDFの閲覧がサポートされている。そのため、PDFをそのまま電子書籍フォーマットにすることだって不可能ではない。だが何となく嫌だ。 メイン画面 自由がなさ過ぎるフォーマットであるし、文字や図を表示するのみで電子書籍ならではの面白さも感じられない。そこでPDFをコンバートするためのPdfMasherを紹介しよう。 PdfMasherはPDFファイルを開いて解析し、テキストに置き換えてくれる。認識されたテキストは自由に変更ができる。そしてテキストはMarkdown形式で出力ができる。Markdown形式からさらにHTMLへコンバートして保存することも可能だ。 生成したHTM

dgridはDojoを使ったWebブラウザ向けグリッドライブラリです。 jQueryなどと並んで有名なJavaScriptライブラリのDojo。そんなDojoで使える高機能グリッドフレームワークがdgridです。 iTunes風の表示です。アルバムやアーティストを選択すると内容が変わります。 ガントチャート風表示です。タスク同士の関連性が表現できています。 サブタスクも表示できます。 テーブル表示です。 クリックで説明を表示します。 詳細リスト表示です。 ギャラリー表示です。 Todoデモです。 消し込めます。データはローカルストレージに保存されるので再読みしても消えません。 dgridの特徴としてはモダンなアーキテクチャ、機能拡張対応（カラムのリサイズ、ドラッグアンドドロップによる並べ替えなど）、スキン、モバイル対応、キーボード操作対応となっています。デスクトップブラウザはもとより、iO

LibrePlanは中〜大規模開発において有効なWebベースのプロジェクト管理です。 LibrePlanはまるでローカルアプリケーションのようなリッチなUIをもったWebベースのプロジェクト管理システムです。 ログインします。 ダッシュボードです。格好いいガントチャートが表示されています。 タスク同士の関連性も表現されています。 WBSです。 タスクの詳細です。 ワーカー一覧です。 どの機能もメニューから素早くアクセスできます。 ワーカーレポートです。他にも多様なレポートが揃っています。 主な機能としてはリソースマネジメント、WBS/ガントチャートを用いた計画表、各タスクのモニタリング、進捗度合いのトラッキング、APIを使ったデータ共有などとなっています。十数名くらいのプロジェクト規模であれば使いやすいのではないでしょうか。 LibrePlanはJava製のオープンソース・ソフトウェア（G

今日のポストはWebRTCについて。Webでリアルタイム通信サービスを実現するためのAPIです。ブラウザで、plug-inを使わずにテレビ電話サービスを作ることが出来るようになります。 WebRTCってなーに？ WebRTCのプロジェクトページの冒頭で、WebRTCを以下のように定義しています。 WebRTC is a free, open project that enables web browsers with Real-Time Communications (RTC) capabilities via simple Javascript APIs. The WebRTC components have been optimized to best serve this purpose. ベタに訳すると「WebRTCはオープンなプロジェクトです。簡単な複数の Javascript