ユーザープロフィール

ゲストさん

こんなものまでWebブラウザ上で!注目すべきオープンソースのWebアプリケーション×24選

こんなものまでWebブラウザ上で!注目すべきオープンソースのWebアプリケーション×24選

Webアプリケーションが隆盛になり、様々なサービスが提供されるようになっています。それこそ、数年前であればローカルアプリケーションでしか実現できなかったようなものまで、続々とWebアプリケーション化しています。そこで今回はオープンソース・ソフトウェアとしてWebアプリケーションを提供しているソフトウェアについて取り上げてみたいと思います。

ジャンル別にまとめてみました。

画像編集/ペイント

WebGL Filter - Web上で画像にイフェクト。WebGLを使ったデモアプリケーション

WebGL Filterは画像にイフェクトを施すWebアプリケーションです。WebGLを使っているので高速、かつリアルタイムに処理が施せるのが特徴になっています。明るさやコントラスト、ぼかしやズーム効果など様々なイフェクトが用意されています。スライダーを使って処理の程度を変更することや、ポインタを移動して処理の中心を変更することができます。どれもリアルタイムにイフェクトが適用されます。なおWebGLに対応している必要があり、かつ処理は意外と重たいので低速なWebブラウザの方は注意してください。

PaintWeb - ペイントもHTML5で

PaintWebはWebベースのペイントソフトウェアでHTML5のCanvas APIによって実現しています。線や四角、円を描くことはもちろん、ベジュ曲線を引くこともできます。文字を書いたり、画像を埋め込むことも可能です。スポイトツールで絵の色を取得することや、範囲を選択してコピー/ペーストや切り抜きもできます。こうしたソフトウェアはFlashでも実現できます。FlashでできないのはiPhoneなどのFlashをサポートしないブラウザでも使えることや、TinyMCEのようなJavaScript製WYSIWYGエディタに埋め込んで連携させるといった使い方です。画像をエディタの中に埋め込んで、ダブルクリックで編集ができるなんて素晴らしい(デモもあります)。ここまで来るとWebアプリケーションはHTML5によって実現できるものが多くなるのではないかと思ってきます。これからのWebを見据える上でも注目のWebアプリケーションと言えそうなので、ぜひ触れてみてください。

Pixidou - 次の流行か。画像加工を行うWebアプリケーション

Pixidouではまるでローカルアプリケーションのようにメニューが並び、そこから処理を選んで実行できるようになっています。メニューはたくさんありますが実際に機能しているものは多くありません。ですが画像加工の処理についてはおおむね動作しています。明るさを変えたり、切り抜きをしたりすることができます。機能はまだ足りていませんが、PixidouをWebアプリケーションとして開発していこうという意図は伺えます。明るさの調整はスライダでできたり、切り抜きもドラッグで指定できるなどビジュアル的にも分かりやすく使い勝手の良いソフトウェアです。

reichat – 筆圧対応の本格的お絵かきチャット

テキストのチャットは数多くサービスが存在します。メールだってその一つですし、LINEやSlackだってあります。しかし言葉にできない思いを伝える方法は他に考えなければなりません。それがイラストです。イメージを伝えるためにイラストを描いて伝えるのです。相手もいれば、みんなでイラストを仕上げられます。それができるのがreichatです。reichatの良いところとして筆圧およびペンタブレットの消しゴムにも対応しているというのがあげられます。つまり本格的なお絵かきチャットが楽しめるのです。水彩ブラシや透明度を設定することもできるので、実際にいらすとが描ける人が集まって仕上げればすごい作品が生まれる可能性もあるでしょう。

動画

Movie Masher - ここまでできる!オープンソース&Webベースの動画編集

まず素材は音楽、画像、動画さらにイフェクトをまとめたテーマを選ぶことができます。そしてタイトルを追加したり、キャプションで自由に文字が追加できます。なお日本語は利用できないので注意してください。そして画像や動画に対してイフェクトをドロップすれば色を変えたりぼかしや反転など様々な加工を施すことができます。音楽などはグラフを使って状況に応じた音の大きさを簡単に変更できます(フェードイン/アウトのような効果)。複数のイフェクトを同時に行うことはできないようです。保存ができないのが気になりますが、可能なイフェクトは数多く今後の発展に期待がかかります。創造性を膨らまされる、面白いソフトウェアです。

Ajax Animator - アニメーション作成もWeb化の時代へ

Ajax AnimatorはまるでFlashのようなアニメーションが作成できるソフトウェアです。まだ機能的には多くありませんが、タイムラインベースで、レイヤーによる階層化が可能です。丸や四角を配置して、フレームごとに動かしていけばアニメーションが作成できます。できあがったアニメーションはパブリッシュすることでFlashが生成されるので、それをダウンロードすれば良いようです。使い方は不明ですがマクロの機能があったり、将来的にActionScriptのエディタ機能やGoogle Gearsによるオフラインのサポートを予定しているなど、今後に期待がかかるソフトウェアです。

Whammy - すごい!Canvasの内容をWebM動画に変換

WhammyはJavaScriptでクライアント上でWebM動画を生成するライブラリです。なんとCanvasタグに描いた内容をWebMフォーマットに変換するJavaScriptライブラリです。WhammyはCanvasタグやdataURIを引数として受け取り、コンパイルメソッドで動画に変換します。生成された動画はもちろんダウンロードも可能です。

テキストエディタ/コードエディタ

SourceKit - 触れる価値あり。Google Chromeをプログラミングエディタ化する

SourceKitはGoogle Chromeの機能拡張として提供されます。左側にファイルツリー、右側に編集画面が表示されます。開発者向きに各言語向けのハイライトに対応しています。さらにテーマも幾つも用意されており自分好みの配色を選択できます。面白いのはファイルの場所としてDropboxを選んでいるところです。DropboxのOAuth認証を行うとそこにあるファイルやフォルダが表示されて編集できる、という仕組みです。Textmateライクを謳っていることからも分かる通り、使い勝手はいいです。ぜひ一度触れてみてください。

ドロー

whiteboard - 複数人で同時に書けるnode.js製ホワイトボード

whiteboardは複数人同時に編集が可能なホワイトボードシステムです。マウスでクリックして線を引くことができます。その内容はリアルタイムに別なブラウザに反映されます。クリアボタンを押せば全て消えます。このままでは実用するのは難しいですが、使える場面はありそうです。ドロー系のWebアプリケーションはもとより、チャット等でも活躍するかも知れません。反応が速く、スムーズに線を引けるのも嬉しいです。Flashで同様のソフトウェアはありますが、動作が重たいのが難点でした。whiteboardが実用レベルになれば、色々な場面で活躍するでしょう。

SVG-edit - 見るべし、試すべし!オンラインのSVGエディター

まるで画像編集ソフトウェアのようなインタフェースを持ち、右側に並んだツールアイコンを使ってドローができます。文字を書いたり、円や四角を描くこともできます。直線や自由線を描き、色を変更することだって可能です。オブジェクトは描画後にドラッグして移動したり回転させることもできます。線はポイントを掴んで位置を変えたりベジュ曲線のような曲線をえがく操作も可能です。画像のパスを指定して埋め込んだり、拡大/縮小もできます。SVGを描くために必要な機能は殆ど揃っているでしょう。レイヤーにだって対応しているので複雑な描画も可能です。

Js Vector Editor - ぜひ触れてください。WebベースのSVGエディター

Js Vector Editorは何とWebブラウザ上でドローを描けるソフトウェアです。IE6はさすがに無理でしたが、対応ブラウザはIE/Firefox/Google Chrome/Safari/Operaと幅広いです。左側にパレットが表示され、そこから選んで右側にベクター画像を描けるようになっています。直線、四角、円、曲線、文字、画像、連続線、テキスト等が使えます。配置したオブジェクトは後から自由に移動させられる他、回転も自由にできます。塗りつぶしや線の太さ、色を変更することも可能です。保存ボタンを押すとXMLが表示されます。これをコピーしておけば、後から同じデータを復帰できます。非常に面白いソフトウェアです。

IDE

Cloud9 IDE - Node.jsを使ったWebベースのJavaScript IDE

Cloud9 IDEはNode.JSで作られたNode.JS用の開発環境です。JavaScriptとあってWebブラウザとの親和性も高いです。基本は2ペインの構成で、左側にファイルやフォルダのブラウザ、右側に選択したファイルの内容が表示されます。行番号やハイライトにも対応しています。Cloud9 IDE上でスクリプトを実行してテストすることもできます。さらにデバッグモードにすればより開発がしやすくなるような情報が表示されます。Cloud9 IDE自体は機能拡張に対応し、自分で拡張することもできます。若干動作が重たいのが難点ですが、今後の開発に期待がかかるソフトウェアです。

Maqetta - 必見。スマートフォン対応、WebベースのHTML5オーサリングソフトウェア

MaqettaはHTML5用のオーサリングツールで、Webブラウザ上でHTML/CSSを作成することができます。DojoやYUIといったUIウィジェットに対応しており、ドラッグアンドドロップで画面を作成していくことができます。配置したウィジェットはプロパティやサイズを変更して表示を修正します。HTML5なのでサポートされているブラウザはFirefox/Safari/Google Chromeなどになっています(筆者環境ではGoogle Chromeでは動きに問題がある箇所もありました)。iPhoneやiPadといったスマートフォンのデバイス枠を表示することもできます。Webサイトのデザインはもちろん、ワイヤーフレームの作成にも利用できます。

Chain - Webベースのビジュアルプログラミング環境

タブレットが普及するのに伴ってビジュアルプログラミングに注目が集まっています。小学生や中学生向けのプログラミング学習として使われるのはもちろん、よりプログラミング学習の敷居を下げられるのが魅力的です。今回はビジュアルプログラミング環境の一つとして、Chainを紹介します。Webブラウザ上で動くのですぐに試せるのが魅力になります。幾つかブロックを貼り付けました。右と左をドラッグ&ドロップでくっつけていきます。

メール

ukijs mail - これがWebメーラーと驚くほどのUIを持ったWebアプリケーション

ukijs mailはWebベースのメーラーなのですが、よく作れたと思うくらいに良くできています。3ペインの構成になっており、フォルダ/メール一覧/詳細となっています。Gmailのインタフェースにどうも慣れないという人はローカルメーラーに似ているので違和感なく使えるでしょう。メールの取得、スパム処理、返信、検索、メールの作成と一通りの処理ができるようになっています。Webベースなので、外部のシステムとの連携も容易でしょう。サーバのパワーを使って処理できるのも魅力です。何よりこれでWebアプリケーションなのかという衝撃があります。ぜひ一度そのUIと操作を体験してください。

dracMail - リッチなインタフェースを持った、IMAP対応Webメーラー

dracMailはIMAP接続にも対応したWebベースのメーラーです。ExtJS(現Sencha)を使っており、UIがとても優れています。メールの作成にはTinyMCEを使い、WYSIWYGエディタを備えています。さらにメールのソートや添付ファイルの表示にも対応しています。メーラーとしての基本機能はもちろん、カレンダーやノート機能も備わっています。テーマ機能もあって、色を自分好みに変更することもできます。現在は表示できないがフィードリーダー機能もあります。GmailなどでWebメーラーに慣れた人にとっては使い勝手の良いメーラーになるのではないでしょうか。

マインドマップ

Mind Notes - HTML5でマインドマッピング

Mind NotesはGoogle App Engine/Javaを使っているので、誰でも自分だけのマインドマッピングを開始できます。中央にノードが一つあり、その周囲にノードを広げていく。兄弟、子ノードどちらも作成が可能です。マウス主体の操作ですが、使い勝手はいいです。さらにWebベースとあってWebサービス連携もあります。ノードには画像を埋め込めるが、その時に使うのはGoogle画像検索です。ノードのテキストで画像を検索し、そこからピックアップして埋め込む事ができます。さらにGoogleマップやHTMLテキストを埋め込む事も可能です。作成したマップはローカルストレージに保存したり、オンラインに保存することができます(要ログイン)。さらに共有機能(現在は閲覧のみ)もあります。いつでもどこからでも編集できるマインドマッピングシステムが欲しい方はぜひ。

プレゼンテーション

Slimey - チェック必須!Web上で動作するプレゼンテーションソフトウェア

実現できることはまさにGoogleドキュメントのプレゼンテーションやKeynoteと同様のプレゼンテーション作成です。スライドの追加、テキストの追加、画像の追加などはもちろん、リストや各オブジェクトのインラインでの編集やマウスでの移動もサポートしています。UndoやRedoもできるし、画像の拡大縮小も可能。画像の指定やフォントの色変更などでまだこなれていない部分はありますが、今後の発展を十分に感じさせる。保存時のアクションはポストされたデータをそのままダンプするだけですが、それ以外はすべてJavaScriptとHTMLなので、自分なりの工夫をすれば良いでしょう。個人的には後はテキストの回り込みや、スライドの入れ替えが欲しい所ではあります。動作ブラウザとしてはIE6以上、Firefox2以上、Opera9以上そしてSafari3以上となっています。ぜひ一度触れて楽しさを体感してください。

Swinger - オンラインでHTMLプレゼンを作成、公開する

SwingerはWebベースのプレゼンテーション作成、公開ソフトウェアです。プレゼンテーション作成ソフトウェアほどではないものの、Web上でテキストを入力してその場でプレゼンテーションを作成できます。画像やリンクの埋め込みにも対応しています。作成したプレゼンテーションはSwingerのトップページに一覧表示され、そのまま再生することができます。まさにプレゼンテーションプラットフォームです。社内勉強会の資料を一元管理したりすると検索も自由にできて便利ではないでしょうか。

表計算/計算

TOMUSS - 複数人で同時に編集するWebベースの表計算アプリ

TOMUSSはThe Online Multi User Simple Spreadsheetの略で、表計算について複数人での同時編集が可能なWebアプリケーションになっています。システムはPythonで作られており、Webサーバも内包するのですぐに利用できます。編集可否をフィールド単位に設定でき、数値のみや指定した文字群のみといったフォーマット指定もサポートします。編集した瞬間にセルにアイコンが表示され、サーバ側でコミットするとアイコンの色が変わります。もちろん他のユーザにもリアルタイムで変更が反映されます。企業で最も良く使われるオフィススイートと言えば表計算ではないでしょうか。そんなもっともよく使われるものだからこそ、コラボレーションの魅力が加わると生産性向上に繋がるかもしれありません。インタフェースはちょっとこなれありませんが、技術的には非常に興味深いソフトウェアです。

ZK Spreadsheet - Excelファイルを操作できるAjax表計算アプリケーション

ZK SpreadsheetはまるでExcelのような操作性をもったWebアプリケーションで、簡易的な計算まで行うことができます。公式サイト内ではグラフも表示できているのですが、方法は分かりませんでした。なお、一部機能については日本語化もされています。最大の特徴はExcelのファイルをそのまま読み込ませることができる点でしょう。Webからのパスを指定して開けば、グラフ等のオブジェクトを除けば簡易的な文字装飾等もきちんと再現されます。ライブラリとしての提供なので、自分たちのWebアプリケーションに組み込んだりして利用することも簡単にできます。さらにJavaScriptならではのインタラクティブ性を追加したり、イベントを関知したりすることもできます。

CalcSS3 - CSS3で作られた実際に使える計算機

CSS3を駆使すれば、驚くほどの機能が実現できます。JavaScriptはブラウザでオフにされることがありますが、CSSは殆どオフになりません。そのため、JavaScriptが使えなくとも動くというのは大きな利点があります。CalcSS3はCSS3で作られたiPhoneの計算機風アプリケーションです。単純に見た目を再現しただけではなく、実際に計算を行うこともできます。ボタンを押せば計算ができるのです。

エミュレータ

jor1k - なんと!Webブラウザ上で動作するLinuxエミュレータ

jor1kは何とJavaScriptによるLinuxエミュレータです。X Windowも実装されています。速度はあれですがちゃんと動くだけですごいです。jor1kはOpenRISCを使ってJavaScriptで作られたLinuxエミュレータになります。速度面では多少の難がありますが、10年くらい前のマシンはもっと遅かったイメージがあるので十分満足できる速度ではないかと思います。

JsDOSBox - これは凄い。Webブラウザ上でDOSをエミュレート

DOSをJavaに移植したのがjDosboxですが、それをさらにJavaScriptに移植してしまったのがJsDOSBoxです。昔懐かしいDOSの世界をWeb上で体験できる…すごい時代になっています。ゲームの実行速度はかなり遅いです。遊べるレベルとは言いがたいですが、スペックが高いPCであれば大丈夫かもしれません。正直パフォーマンスは高くないので、実用レベルではないと思われます。しかしJsDOSBox自体はもちろん、今後JavaScriptエンジンがパワーアップしていけばWebブラウザ上でDOSを動かし遊べるなんてことになるかも知れません。

まとめ

WebサービスとしてWebアプリケーションを提供しているサービスとしてはZohoやGoogleが有名ですが、ソフトウェアとしてダウンロードができるものであれば自社内でセキュアに利用したり、ベースに利用して機能を追加することも容易です。また別なサービスの中で、画像編集部分に使ったりドロー機能を提供するといった連携も考えられます。 何よりWebブラウザ上でこのレベルのソフトウェアが実現するという点が驚きです。学べる点はとても多いのではないでしょうか。最近のものであればHTML5ベースで作られているものも多いので、その研究材料としてもお勧めです。

PR_infeed

PR_Relative

オウンドメディア運営会社の皆様へ

s

ページトップ