強力にパワーアップした次期FCKEditor·CKEditor MOONGIFT
FCKEditorと言えば、Webベースで使えるWYSIWYGエディタとして有名なソフトウェアだ。しかし既に多数の機能が実装され、コアに手を入れて改造しようとはとても思えない代物になっている。 次期FCKEditor また、多機能ゆえに動作が重たいのが難点だった。そうした問題点を解決できそうなのが次期FCKEditorだ。 今回紹介するオープンソース・ソフトウェアはCKEditor、FCKEditor3.0以降のソフトウェアだ。 FCKEditorは3.0以降から名前が変わり、CKEditorとなる。それに伴って様々な機能拡張がなされている。大きな点として、スキン機能とともに枠の色替え機能が実装されたことだ。なお対応ブラウザはFirefox2以上、IE6以上、Opera9.5以上、Safari3以上となる。 APIによる独自拡張 Ajaxとの親和性も高まっており、ダブルクリックで編集モード
Markdown・Textile・Wiki記法をサポートしたJavaScript製ドキュメントフレームワーク「Invisible.js」を公開しました(オープンソース) - Chrome Life
みなさん、ドキュメントは何を使って書いていますか？ 筆者の場合、提出用のドキュメントは、WordやExcelで作っていますが、その他の多くのドキュメントはテキストエディタで書いています。 最近では、テキストファイルの書式をMarkdown記法に統一するようにしています。 Markdownは、ここで紹介されているように、簡単な文法を覚えるだけでパーサー（変換機）を通すと読みやすいHTMLに変換できる言語です。文法も直感的で比較的覚えやすいので好んで利用するようにしています。 他にもTextileやWikiなど様々な記法があり、好みも分かれますが、どちらにしても後で整形できる書式でドキュメントを書いておけばよいので、軽いテキストファイルでドキュメントを残している人は多いと思います。 しかし、ドキュメントをまとめて見る場合、手動でパーサーを通したりサーバーにアップしてサーバーサイドで変換するのは
HTMLテーブルをリッチに便利な機能を追加する·Grid MOONGIFT
GridはHTMLテーブルにソートやヘッダ固定、行選択と言った機能を追加するJavaScriptライブラリです。 業務システムを作っていると必ず発生するのがテーブルでの一覧表です。WebでExcelレベルのことは実現できませんが、リッチな表としてGridを使ってみるのは良さそうです。 デモです。 必要な場所だけチェックしてハイライトできます。 横スクロールしても左側の列はそのままです。 数値のオーダーも適切に動きます。 縦スクロールしてもヘッダー部はそのままです。 カラム幅の変更もできます。 GridはIE7以上、Google Chrome/Firefox/Safari/Operaに対応しています。jQueryやMootoolsと一緒に使うこともできます。機能はヘッダー、フッター、カラムの固定化やカラムのリサイズ、カラムのソート、行の選択などになります。データフォーマットはJSONの他、X
その場でデータを編集。BootstrapやjQuery UIに対応した·X-editable MOONGIFT
X-editableはBoostrapやjQuery/jQuery UIで使えるIn-place Editorです。 表示されている内容を編集する際にその場ですぐに編集できるようにするのがIn-place Editorです。それをBootstrap、jQuery UIなどに対応させたのがX-editableになります。 こんな感じでポップアップで編集できます。 エラー表示にも対応。 カレンダーでの入力。 選択式も可能です。 インラインで編集もできます。 こちらはjQuery UI版。 この場合も選択式などが使えます。 X-editableは単純な文字列入力の他に、選択やテキストエリアでの入力にも対応しています。入力チェックも可能で、エラーの際にそのまま表示を残せます。純粋なjQueryにも対応しているのでWebサービスに組み込んでみるのはいかがでしょう。 X-editableはJavaSc
JavaScriptでネイティブ並の速度を誇るゲームを開発·Ejecta MOONGIFT
EjectaはCanvasとオーディオ、JavaScriptをサポートしたフレームワークでネイティブ並のiOSアプリ（ゲーム）を開発できます。 iOSアプリでゲームを開発する際にはObjective-Cを使うのが基本でしょう。WebベースであったりTitaniumのようにJavaScriptのエンジンを経由するとそれだけ速度が低下してしまいます。しかしそんな限界に果敢に挑戦するフレームワークがEjectaです。 サンプルです。JavaScriptとは思えないほどスムーズな動きです。 指を動かすと線の太さ、明るさが変化します。 これくらい細くもできます。 線の数をぐっと減らしました。 Ejectaはゲームとアニメーションに特化したソフトウェアで、Canvasとオーディオだけで構成されています。JavaScriptは素のJavaScriptとして実行されます。これによりHTML5のゲームは多少
jQueryに足りない機能を色々追加·jQuery++ MOONGIFT
jQuery++は標準のjQueryにはない機能を幾つも追加するプラグインです。 jQueryはとても優秀なJavaScriptライブラリです。プラグインも多数作られており、それを使えば様々なことができます。そうした多彩な機能をまとめて提供してくれるのがjQuery++です。 ブロックの大きさを自動計算します。ブラウザごとの誤差も吸収してくれるようです。 フォームの各項目を操作するのに便利なメソッドです。 選択している文字、場所を取得できます。 マウスの場所やその時のDOM要素が取得できます。 ドラッグアクションです。 ドロップアクションです。 リサイズです。 jQuery++ではこれ以外にもアニメーション、クッキー、キーボード入力でBackspaceやタブ、エンターキー、ファンクションキーの入力を判定したりできます。全てのライブラリを一括でインストールする必要はなく、必要な機能だけをピッ
Bootstrapを使ったイメージギャラリー·Bootstrap Image Gallery MOONGIFT
Bootstrap Image GalleryはTwitter社の開発したBootstrapを使ったイメージギャラリーソフトウェアです。 最近のWebサービスではTwitter社の開発したBootstrapをベースに提供するものが増えてきました。Bootstrap Image Galleryはそんな中、Bootstrapを使って開発されたイメージギャラリーソフトウェアとなっています。 サムネイル一覧です。奇麗に並びます。 サムネイルをクリックしました。ローディングアイコンが表示されます。 拡大表示されました。 フルスクリーンモードにも対応しています。 Bootstrap Image GalleryはBootstrapのテンプレートに用いることで、ユーザビリティ高いインタフェースを容易に実現しています。またBootsrapのモーダルダイアログを拡張もしています。そうした点も参考になりそうです
Bootstrapを使ったサイトに組み込みたいWYSIWYGエディタ·Bootstrap-wysihtml5 MOONGIFT
Bootstrap-wysihtml5はTwitter Bootstrapで使えるWYSIWYGエディタです。 最近よく目にするようになったTwitter Bootstrapを使ったWebサイト。そんなWebサイトでWYSIWYGエディタを使うならば導入したいのがBootstrap-wysihtml5です。 Bootstrapらしい、すっきりとしたUIです。 漢字を変換した後の動きがちょっと妙です。 テキストのヘッダー変換があります。 リストや装飾もあります。 Bootstrap-wysihtml5は現時点では日本語を入力する際の変換処理を行った後、表示がずれてしまうことがあります。しかしそれさえ修正すればBootstrapとマッチしたデザインで利用できる場面が多いのではないでしょうか。 Bootstrap-wysihtml5はHTML5/JavaScript製、GPLのオープンソース・ソ
IE6から使えるSVG/VMLを使った高機能JavaScriptグラフライブラリ·Highcharts MOONGIFT
HighchartsはSVG/VMLを使って描画するJavaScript製のグラフライブラリです。 Webサービスにおいてグラフを使うとデータのインパクトが違います。だからこそ使い勝手の良いグラフライブラリを積極的に使っていくべきです。HighchartsはSVGを基本として多様なWebブラウザに対応したグラフライブラリになります。 折れ線グラフです。 Ajaxによるデータロード対応です。 グラデーションをかけることもできます。 滑らかな曲線です。 アイコンを貼付ける例です。 プロットのみで。半透明なドットを使っています。 エリアグラフです。 マイナスの値にも対応しています。 積み上げグラフです。 棒グラフです。 左右比較型の棒グラフです。 複数のデータを並べられます。 棒グラフもマイナス値を出せます。 こんな感じの棒グラフも。 さらにドリルダウン対応です。 HTMLのテーブルからデータを
プロジェクト管理に使ってみたい。jQuery製のガントチャートライブラリ·jQuery.ganttView MOONGIFT
jQuery.ganttViewはjQuery製のガントチャート表示ライブラリです。 jQueryを使ってガントチャートを表示するライブラリがjQuery.ganttViewです。表示だけでなくデータのメンテナンスもできるようになっています。 いい感じにガントチャートが表示されています。 ドラッグでタスクを左右に移動させられます。 期間の変更は枠の端をドラッグします。 データはJSONで与えるだけです。 jQuery.ganttViewは表示系のライブラリなのでデータベースに蓄積された内容をガントチャートにして表示すると言った使い方が便利そうです。なお表示はタスクごとに横に表示される形で、複数のタスクを同一線上に表示することはできないようです。 jQuery.ganttViewはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 MOONGI
大型Webアプリケーションを開発する際に使えるJavaScriptフレームワーク·AngularJS MOONGIFT
AngularJSはMVCモデルを徹底したJavaScript製のWebアプリケーションフレームワークです。 Webアプリケーションを開発する際にJavaScriptを素のままで使うのはナンセンスになってきました。JavaScript用Webフレームワークを活用して手早く組み立てていくべきです。そのためのソフトウェアとしてAngularJSを紹介します。 まずごくシンプルなデモから。 クリックでビューが切り替わります。 node.js製のWebサーバも付属しています。 HTMLソースはこんな感じです。 JavaScriptのコードです。ルーティングやテンプレート、コントローラを指定してます。 Hello Worldのサンプルコード。JavaScriptによるハンドリングが見当たりません。 入力チェックを含めたフォームサンプル。こちらもごくシンプルなコードです。 入力チェックはリアルタイムに
すげえ。HTML5/JavaScriptで作られたゲームボーイエミュレータ·JSGB MOONGIFT
JSGBはJavaScriptで作られたゲームボーイエミュレータです。 昔懐かしいゲームボーイのエミュレータは数多いですが、今回紹介するJSGBは何とJavaScriptで作られたゲームボーイエミュレータになります。 2色の感じがゲームボーイっぽさを出しています。 アニメーションもレトロな感じです。 拡大表示できます。 平面なのに立体を感じる、そんなデモ。 レトロな動作がいい感じです。 ワリオが走るデモです。 三倍表示にしました。 こういうアニメーションもいい感じです。 動作デモです。 配布されているROMはムービーレベルで操作することはできませんが、公式サイトでは実際に遊べるゲームがROMとして読み込めるようになっています。音は鳴らないようですが、FPSは60近く出ており十分遊べるレベルです。 JSGBはJavaScript製、GPLのオープンソース・ソフトウェアです。 MOONGIFT
JavaScriptに便利なメソッドを盛り込んだライブラリ·mofmof.js MOONGIFT
mofmof.jsはJavaScriptを積極的に拡張したライブラリで、Number/Array/Stringに便利なメソッドを追加しています。 JavaScriptは今やWebだけでなく、様々な環境で使われるようになっています。そこで基礎になりえるライブラリとして紹介したいのがmofmof.jsです。かゆい所に手が届く、便利なメソッドがたくさん追加されています。 コード例です。コピーメソッド。 日付周りの拡張も多いです。 Hashを取り扱うメソッドも多数用意されています。 二つのHashをミックスします。 Hashからキーと値を取り出します。 Hashのキーだけを抽出します。 mapメソッドです。 実行するたびにインクリメントされるユニークな値を返します。1秒間に100万回実行したとしても285年間ユニークであり続けます。 一気に配列を生成します。 文字列を置換しつつ生成します。 検索メ
リアルタイムプレビューのついたWebベースのJavaScript/HTMLエディター·JS Bin MOONGIFT
JS BinはWebブラウザ上でJavaScriptとHTMLコードを編集しつつ、その結果をプレビューできるエディターです。 JavaScriptは単体で使うというよりもHTMLと組み合わせて使うことのが多いかと思います。そんな時にWebブラウザ上でコードを試しためし実行できるのがJS Binです。 デフォルトの表示です。左側がJavaScript、右側がHTMLとなっています。 レンダー表示です。先ほどのJavaScriptとHTMLを合わせて実行した結果です。 右側にリアルタイムプレビューを追加しました。JavaScriptを修正すると即座にプレビューに反映されます。 HTMLにJavaScriptライブラリを追加できます。 jQueryを追加した場合です。HTMLソースにscriptタグが追加されています。もちろんJavaScript側もjQueryの関数が使えるようになります。 保
無茶しやがる…JavaScriptだけでZipファイルを生成、ダウンロード·JSZip MOONGIFT
JSZipはWebブラウザ上、クライアントサイドだけでJavaScriptを使ってZipファイルを生成するソフトウェアです。 JavaScriptでできることがどんどん増えています。そんな中、注目したいのがJSZipです。なんとJavaScriptだけでZipファイルを作ってしまうというとんでもないソフトウェアです。 デモページです。コードを見て分かる通り、テキストファイルと画像をZip圧縮しています。 実際ダウンロードされたZipファイルを解凍すると確かにフォルダやファイルが入っています。テキストの内容を変えればダウンロードされたファイルの中身も変わっていました。 JSZipが面白いのは動的にZipファイルを作成できることではないでしょうか。ユーザにコンテンツをダウンロードさせたいという時にその場の内容をそのまま圧縮して送れるようになります。アイディア次第で色々な使い方ができそうなソフト
JavaScriptを.NETバイトコードに変換するコンパイラー·Jurassic MOONGIFT
JurassicはJavaScriptを.NETに変換するコンパイラー。.NETバイトコードを生成する。 Jurassicは.NET製のオープンソース・ソフトウェア。ここ数年、JavaScriptのシェア拡大が活発だ。Webブラウザはもとよりnode.jsによるサーバサイド、TitaniumやPhoneGapによるiOSやAndroidへの進出など領域が広がっている。プログラマーにとっては一つの言語で様々な環境で動作するのは願ったりかなったりだろう。 実行例 次の領域はローカルOSでの実行と言えるかもしれない。Windowsでは元々JScriptという言語があったが、スクリプト言語とあって利用範囲は広くなかった。だがJurassicを使えばWindowsにおけるJavaScriptの可能性が飛躍的に高まりそうだ。 JurassicはJavaScript（正確にはECMAScript）の.N
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
オープンソースのWebアプリ開発向けコードエディター「Brackets」Sprint 23が公開
オープンソースのPHP+jQuery製オンラインファイルマネージャ・elFinder - かちびと.net