キーワードTwitterFacebookRSSその他こんなものまでWebブラウザ上で!注目すべきオープンソースのWebアプリケーション×24選TwitterでシェアFacebookでシェアはてなブックマークGoogle+でシェアこの記事をシェアWebアプリケーションが隆盛になり、様々なサービスが提供されるようになっています。それこそ、数年前であればローカルアプリケーションでしか実現できなかったようなものまで、続々とWebアプリケーション化しています。そこで今回はオープンソース・ソフトウェアとしてWebアプリケーションを提供しているソフトウェアについて取り上げてみたいと思います。ジャンル別にまとめてみました。Web上で画像にイフェクト。Filterは画像にイフェクトを施すWebアプリケーションです。WebGLを使っているので高速、かつリアルタイムに処理が施せるのが特徴になっています。明るさやコントラスト、ぼかしやズーム効果など様々なイフェクトが用意されています。スライダーを使って処理の程度を変更することや、ポインタを移動して処理の中心を変更することができます。どれもリアルタイムにイフェクトが適用されます。WebGLに対応している必要があり、かつ処理は意外と重たいので低速なWebブラウザの方は注意してください。APIによって実現しています。線や四角、円を描くことはもちろん、ベジュ曲線を引くこともできます。文字を書いたり、画像を埋め込むことも可能です。スポイトツールで絵の色を取得することや、範囲を選択してコピー/ペーストや切り抜きもできます。したソフトウェアはFlashでも実現できます。FlashでできないのはiPhoneなどのFlashをサポートしないブラウザでも使えることや、TinyMCEのようなJavaScript製WYSIWYGエディタに埋め込んで連携させるといった使い方です。画像をエディタの中に埋め込んで、ダブルクリックで編集ができるなんて素晴らしい(デモもあります)。ここまで来るとWebアプリケーションはHTML5によって実現できるものが多くなるのではないかと思ってきます。これからのWebを見据える上でも注目のWebアプリケーションと言えそうなので、ぜひ触れてみてください。画像加工を行うWebアプリケーションPixidouではまるでローカルアプリケーションのようにメニューが並び、そこから処理を選んで実行できるようになっています。メニューはたくさんありますが実際に機能しているものは多くありません。画像加工の処理についてはおおむね動作しています。明るさを変えたり、切り抜きをしたりすることができます。機能はまだ足りていませんが、PixidouをWebアプリケーションとして開発していこうという意図は伺えます。明るさの調整はスライダでできたり、切り抜きもドラッグで指定できるなどビジュアル的にも分かりやすく使い勝手の良いソフトウェアです。筆圧対応の本格的お絵かきチャットテキストのチャットは数多くサービスが存在します。メールだってその一つですし、LINEやSlackだってあります。言葉にできない思いを伝える方法は他に考えなければなりません。イメージを伝えるためにイラストを描いて伝えるのです。相手もいれば、みんなでイラストを仕上げられます。それができるのがreichatです。reichatの良いところとして筆圧およびペンタブレットの消しゴムにも対応しているというのがあげられます。本格的なお絵かきチャットが楽しめるのです。水彩ブラシや透明度を設定することもできるので、実際にいらすとが描ける人が集まって仕上げればすごい作品が生まれる可能性もあるでしょう。ここまでできる!オープンソース&Webベースの動画編集まず素材は音楽、画像、動画さらにイフェクトをまとめたテーマを選ぶことができます。タイトルを追加したり、キャプションで自由に文字が追加できます。日本語は利用できないので注意してください。画像や動画に対してイフェクトをドロップすれば色を変えたりぼかしや反転など様々な加工を施すことができます。音楽などはグラフを使って状況に応じた音の大きさを簡単に変更できます(フェードイン/アウトのような効果)。複数のイフェクトを同時に行うことはできないようです。保存ができないのが気になりますが、可能なイフェクトは数多く今後の発展に期待がかかります。創造性を膨らまされる、面白いソフトウェアです。AnimatorはまるでFlashのようなアニメーションが作成できるソフトウェアです。機能的には多くありませんが、タイムラインベースで、レイヤーによる階層化が可能です。丸や四角を配置して、フレームごとに動かしていけばアニメーションが作成できます。できあがったアニメーションはパブリッシュすることでFlashが生成されるので、それをダウンロードすれば良いようです。Gearsによるオフラインのサポートを予定しているなど、今後に期待がかかるソフトウェアです。すごい!Canvasの内容をWebM動画に変換WhammyはJavaScriptでクライアント上でWebM動画を生成するライブラリです。なんとCanvasタグに描いた内容をWebMフォーマットに変換するJavaScriptライブラリです。WhammyはCanvasタグやdataURIを引数として受け取り、コンパイルメソッドで動画に変換します。生成された動画はもちろんダウンロードも可能です。Chromeの機能拡張として提供されます。左側にファイルツリー、右側に編集画面が表示されます。開発者向きに各言語向けのハイライトに対応しています。テーマも幾つも用意されており自分好みの配色を選択できます。面白いのはファイルの場所としてDropboxを選んでいるところです。DropboxのOAuth認証を行うとそこにあるファイルやフォルダが表示されて編集できる、という仕組みです。Textmateライクを謳っていることからも分かる通り、使い勝手はいいです。一度触れてみてください。複数人で同時に書けるnode.js製ホワイトボードwhiteboardは複数人同時に編集が可能なホワイトボードシステムです。マウスでクリックして線を引くことができます。その内容はリアルタイムに別なブラウザに反映されます。クリアボタンを押せば全て消えます。このままでは実用するのは難しいですが、使える場面はありそうです。ドロー系のWebアプリケーションはもとより、チャット等でも活躍するかも知れません。反応が速く、スムーズに線を引けるのも嬉しいです。Flashで同様のソフトウェアはありますが、動作が重たいのが難点でした。whiteboardが実用レベルになれば、色々な場面で活躍するでしょう。見るべし、試すべし!オンラインのSVGエディターまるで画像編集ソフトウェアのようなインタフェースを持ち、右側に並んだツールアイコンを使ってドローができます。文字を書いたり、円や四角を描くこともできます。直線や自由線を描き、色を変更することだって可能です。オブジェクトは描画後にドラッグして移動したり回転させることもできます。線はポイントを掴んで位置を変えたりベジュ曲線のような曲線をえがく操作も可能です。画像のパスを指定して埋め込んだり、拡大/縮小もできます。SVGを描くために必要な機能は殆ど揃っているでしょう。レイヤーにだって対応しているので複雑な描画も可能です。Editorは何とWebブラウザ上でドローを描けるソフトウェアです。Chrome/Safari/Operaと幅広いです。テキスト等が使えます。配置したオブジェクトは後から自由に移動させられる他、回転も自由にできます。塗りつぶしや線の太さ、色を変更することも可能です。保存ボタンを押すとXMLが表示されます。これをコピーしておけば、後から同じデータを復帰できます。非常に面白いソフトウェアです。IDEはNode.JSで作られたNode.JS用の開発環境です。JavaScriptとあってWebブラウザとの親和性も高いです。基本は2ペインの構成で、左側にファイルやフォルダのブラウザ、右側に選択したファイルの内容が表示されます。行番号やハイライトにも対応しています。IDE上でスクリプトを実行してテストすることもできます。デバッグモードにすればより開発がしやすくなるような情報が表示されます。IDE自体は機能拡張に対応し、自分で拡張することもできます。若干動作が重たいのが難点ですが、今後の開発に期待がかかるソフトウェアです。スマートフォン対応、WebベースのHTML5オーサリングソフトウェアMaqettaはHTML5用のオーサリングツールで、Webブラウザ上でHTML/CSSを作成することができます。DojoやYUIといったUIウィジェットに対応しており、ドラッグアンドドロップで画面を作成していくことができます。配置したウィジェットはプロパティやサイズを変更して表示を修正します。Chromeでは動きに問題がある箇所もありました)。iPhoneやiPadといったスマートフォンのデバイス枠を表示することもできます。Webサイトのデザインはもちろん、ワイヤーフレームの作成にも利用できます。Webベースのビジュアルプログラミング環境タブレットが普及するのに伴ってビジュアルプログラミングに注目が集まっています。小学生や中学生向けのプログラミング学習として使われるのはもちろん、よりプログラミング学習の敷居を下げられるのが魅力的です。今回はビジュアルプログラミング環境の一つとして、Chainを紹介します。Webブラウザ上で動くのですぐに試せるのが魅力になります。幾つかブロックを貼り付けました。右と左をドラッグ&ドロップでくっつけていきます。mailはWebベースのメーラーなのですが、よく作れたと思うくらいに良くできています。3ペインの構成になっており、フォルダ/メール一覧/詳細となっています。Gmailのインタフェースにどうも慣れないという人はローカルメーラーに似ているので違和感なく使えるでしょう。メールの作成と一通りの処理ができるようになっています。Webベースなので、外部のシステムとの連携も容易でしょう。サーバのパワーを使って処理できるのも魅力です。何よりこれでWebアプリケーションなのかという衝撃があります。一度そのUIと操作を体験してください。リッチなインタフェースを持った、IMAP対応WebメーラーdracMailはIMAP接続にも対応したWebベースのメーラーです。ExtJS(現Sencha)を使っており、UIがとても優れています。メールの作成にはTinyMCEを使い、WYSIWYGエディタを備えています。メールのソートや添付ファイルの表示にも対応しています。メーラーとしての基本機能はもちろん、カレンダーやノート機能も備わっています。テーマ機能もあって、色を自分好みに変更することもできます。現在は表示できないがフィードリーダー機能もあります。GmailなどでWebメーラーに慣れた人にとっては使い勝手の良いメーラーになるのではないでしょうか。Engine/Javaを使っているので、誰でも自分だけのマインドマッピングを開始できます。中央にノードが一つあり、その周囲にノードを広げていく。兄弟、子ノードどちらも作成が可能です。マウス主体の操作ですが、使い勝手はいいです。WebベースとあってWebサービス連携もあります。ノードには画像を埋め込めるが、その時に使うのはGoogle画像検索です。ノードのテキストで画像を検索し、そこからピックアップして埋め込む事ができます。GoogleマップやHTMLテキストを埋め込む事も可能です。作成したマップはローカルストレージに保存したり、オンラインに保存することができます(要ログイン)。共有機能(現在は閲覧のみ)もあります。いつでもどこからでも編集できるマインドマッピングシステムが欲しい方はぜひ。チェック必須!Web上で動作するプレゼンテーションソフトウェア実現できることはまさにGoogleドキュメントのプレゼンテーションやKeynoteと同様のプレゼンテーション作成です。スライドの追加、テキストの追加、画像の追加などはもちろん、リストや各オブジェクトのインラインでの編集やマウスでの移動もサポートしています。UndoやRedoもできるし、画像の拡大縮小も可能。画像の指定やフォントの色変更などでまだこなれていない部分はありますが、今後の発展を十分に感じさせる。保存時のアクションはポストされたデータをそのままダンプするだけですが、それ以外はすべてJavaScriptとHTMLなので、自分なりの工夫をすれば良いでしょう。個人的には後はテキストの回り込みや、スライドの入れ替えが欲しい所ではあります。動作ブラウザとしてはIE6以上、Firefox2以上、Opera9以上そしてSafari3以上となっています。一度触れて楽しさを体感してください。オンラインでHTMLプレゼンを作成、公開するSwingerはWebベースのプレゼンテーション作成、公開ソフトウェアです。プレゼンテーション作成ソフトウェアほどではないものの、Web上でテキストを入力してその場でプレゼンテーションを作成できます。画像やリンクの埋め込みにも対応しています。作成したプレゼンテーションはSwingerのトップページに一覧表示され、そのまま再生することができます。プレゼンテーションプラットフォームです。社内勉強会の資料を一元管理したりすると検索も自由にできて便利ではないでしょうか。Spreadsheetの略で、表計算について複数人での同時編集が可能なWebアプリケーションになっています。システムはPythonで作られており、Webサーバも内包するのですぐに利用できます。編集可否をフィールド単位に設定でき、数値のみや指定した文字群のみといったフォーマット指定もサポートします。編集した瞬間にセルにアイコンが表示され、サーバ側でコミットするとアイコンの色が変わります。他のユーザにもリアルタイムで変更が反映されます。企業で最も良く使われるオフィススイートと言えば表計算ではないでしょうか。そんなもっともよく使われるものだからこそ、コラボレーションの魅力が加わると生産性向上に繋がるかもしれありません。インタフェースはちょっとこなれありませんが、技術的には非常に興味深いソフトウェアです。SpreadsheetはまるでExcelのような操作性をもったWebアプリケーションで、簡易的な計算まで行うことができます。公式サイト内ではグラフも表示できているのですが、方法は分かりませんでした。一部機能については日本語化もされています。最大の特徴はExcelのファイルをそのまま読み込ませることができる点でしょう。Webからのパスを指定して開けば、グラフ等のオブジェクトを除けば簡易的な文字装飾等もきちんと再現されます。ライブラリとしての提供なので、自分たちのWebアプリケーションに組み込んだりして利用することも簡単にできます。JavaScriptならではのインタラクティブ性を追加したり、イベントを関知したりすることもできます。CSS3で作られた実際に使える計算機CSS3を駆使すれば、驚くほどの機能が実現できます。JavaScriptはブラウザでオフにされることがありますが、CSSは殆どオフになりません。そのため、JavaScriptが使えなくとも動くというのは大きな利点があります。CalcSS3はCSS3で作られたiPhoneの計算機風アプリケーションです。単純に見た目を再現しただけではなく、実際に計算を行うこともできます。ボタンを押せば計算ができるのです。なんと!Webブラウザ上で動作するLinuxエミュレータjor1kは何とJavaScriptによるLinuxエミュレータです。Windowも実装されています。速度はあれですがちゃんと動くだけですごいです。jor1kはOpenRISCを使ってJavaScriptで作られたLinuxエミュレータになります。速度面では多少の難がありますが、10年くらい前のマシンはもっと遅かったイメージがあるので十分満足できる速度ではないかと思います。Webブラウザ上でDOSをエミュレートDOSをJavaに移植したのがjDosboxですが、それをさらにJavaScriptに移植してしまったのがJsDOSBoxです。昔懐かしいDOSの世界をWeb上で体験できる...すごい時代になっています。ゲームの実行速度はかなり遅いです。遊べるレベルとは言いがたいですが、スペックが高いPCであれば大丈夫かもしれません。パフォーマンスは高くないので、実用レベルではないと思われます。JsDOSBox自体はもちろん、今後JavaScriptエンジンがパワーアップしていけばWebブラウザ上でDOSを動かし遊べるなんてことになるかも知れません。まとめWebサービスとしてWebアプリケーションを提供しているサービスとしてはZohoやGoogleが有名ですが、ソフトウェアとしてダウンロードができるものであれば自社内でセキュアに利用したり、ベースに利用して機能を追加することも容易です。別なサービスの中で、画像編集部分に使ったりドロー機能を提供するといった連携も考えられます。何よりWebブラウザ上でこのレベルのソフトウェアが実現するという点が驚きです。学べる点はとても多いのではないでしょうか。最近のものであればHTML5ベースで作られているものも多いので、その研究材料としてもお勧めです。Chrome(136)Webアプリケーション(108)Node.JS(77)インタフェース(22)この記事が役に立ったら「いいね!」してね!TwitterでシェアFacebookでシェアはてなブックマークGoogle+でシェアこの記事を書いた会社のPRMOONGIFTサービスMOONGIFTはオープンソース・ソフトウェアを毎日紹介するブログです。運営会社オウンドメディア運営会社の皆様へライター募集お問い合わせ当サービスでは、掲載許諾を受けたオウンドメディアをご紹介しています。記事掲載のご希望、お問い合わせ等はこちらよりご連絡ください。当サービスはSEデザインが運営しており、翔泳社のメディアとは運営元が異なります。JAPANページトップ。