要注目！高機能なjQuery製のCalDAVクライアント·CalDavZAP MOONGIFT
CalDavZAPはjQuery/JavaScriptで構築されたCalDAV対応のフロントエンドです。 CalDAVというのはGoogleカレンダーやiCloudのカレンダーでも実装されているカレンダー用のプロトコルです。そんなCalDAVをWebベースで扱うソフトウェアがCalDavZAPです。 ログインします。 最初の表示は今日の予定表示になっています。 カレンダーを選択すると予定が表示されました。 月表示です。 予定の詳細です。 編集モードです。 検索すると対象外の予定が薄くなります。 新規予定の作成です。 カレンダーで期間を選択して予定作成も可能です。 ドラッグで予定を移動させられます。 Todoも登録できます。 CalDavZAPはjQuery/JavaScriptで作られており、サーバサイドを必要としていません。バックグラウンドでデータ同期を行う仕組みであったり、イベントやT
なんと！JavaScriptだけでテキスト読み上げ·Speak.js MOONGIFT
Speak.jsはJavaScriptだけでテキストを読み上げるソフトウェアです。 Webブラウザで音声ファイルを指定してJavaScriptで解析、なんてソフトウェアもありますが今回は一から“音声”を生み出してしまう驚きのソフトウェア、Speak.jsを紹介します。 ボタンを押すとHello Worldと話します。 こんな感じで任意の言葉を話させることもできます。 Speak.jsはジェネレータを通じて音声を動的に生み出します。対応しているのは英数字のみとなっており、日本語には対応していません。常に動的に生成しているので自由なテキストを読み上げさせることができます。 Speak.jsはJavaScript製のオープンソース・ソフトウェア（GPL）です。 MOONGIFTはこう見る テキストを外部サーバに送って、それを音声ファイルにして返すAPIも世の中にはあります。当然、こちらの方が英語
jQueryのようにCanvasで描画、操作·Canvas Query MOONGIFT
Canvas QueryはCanvasをjQueryのように扱えるライブラリです。 HTML5の新機能で知られるCanvasですが、あまり一般的に活用されているとは言いがたい状態です。それは扱いやすさに起因している気がしますが、今回紹介するCanvas Queryを使えばぐっと身近な存在になりそうです。 デモです。色をそれぞれ変えています。 こちらも様々な処理を施しています。 ミサイルの色を変えているデモ。 Canvas QueryはCanvasをjQueryのように扱えるようにするライブラリとなっています。キャンバスを生成し、.fillStyle('#FF0000')のようにしてメソッドを実行します。チェーンメソッドも使えます。多彩に用意されたメソッドを使えば、Canvasを手軽に扱えるようになりそうです。 Canvas QueryはJavaScript製、MIT Licenseのオープ
Webアプリケーション開発に使えるJavaScriptフレームワーク·ComponentJS MOONGIFT
ComponentJSはWebアプリケーション開発用のMVC対応JavaScriptフレームワークです。 ここ数年JavaScriptのフレームワークが幾つも登場していますが、今回紹介するのはComponentJS、HTML5のリッチWebアプリケーション開発用のJavaScriptフレームワークです。 デモのログイン機能。 ビジュアルデバッガーが売りの一つです。 ComponentJSは階層化されたコンポーネント、MVC、イベント駆動型、状態管理などが特徴になっています。他のライブラリへの依存がなく、jQuery UIやSencha Touchなどとも連携できます。さらにビジュアルデバッガーという強力なライブラリが提供されています。 ComponentJSはJavaScript製、Mozilla Public Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る
多彩なデバイスに対応したWebサイト構築に最適なデザインフレームワーク·Centurion MOONGIFT
CenturionはレスポンシブWebデザインに対応したCSSフレームワークです。 レスポンシブなWebサイトを構築するためには様々なデバイスでの表示を考慮したり、そのためのノウハウが必要になります。そこでベースとして取り入れてみたいのがCenturionです。 デスクトップでの表示です。 スマートフォンレベルまで幅を狭めた場合。 メニューはスライドして表示されます。 タブレットはこれくらい。 グリッドもあります。 Centurionはシンプルなフレームワークなので、それほど束縛は強くないと思います。カスタマイズ性も考慮されているとのことなので、Centurionをベースにしつつ独自の要素を盛り込んでWebサイトを構築できるでしょう。 CenturionはHTML5製のオープンソース・ソフトウェア（GPL/MIT License）です。 MOONGIFTはこう見る Bootstrapは個人
取り扱い注意！JavaScriptを使ってMD5ハッシュをクラック·MD5-Password-Cracker.js MOONGIFT
MD5-Password-Cracker.jsはJavaScriptを使ってMD5のハッシュ値から元テキストを検索するソフトウェアです。 パスワードをハッシュ化して保存しておくのは基本と思われますが、その際によく使われるのがMD5ではないでしょうか。SHA-1/SHA-2のが良いと思うのですが、それをまざまざと知らしめてくれるのがMD5-Password-Cracker.jsです。 パスワードクラック開始！Web Workersが8つ使われています。 パスワードはheyaでした。1ワーカーあたり1秒間に約7万の解析が行われています。4文字のパスワードに対して23秒で解析されました。 網羅的に文字列を試しているので時間は要しますが、4文字程度のパスワードであればあっという間に解析されてしまうというのが分かるかと思います。パスワードの取り扱いについてはくれぐれもご注意を。 MD5-Passwo
JavaScriptでXLSX形式を扱う·XLSX.js MOONGIFT
XLSX.jsはJavaScriptでExcelファイル（Base64エンコード）を読み込んだり、ダウンロードさせられるソフトウェアです。 Googleスプレッドシートをはじめ、Webブラウザ上で表計算表示を行ったり、編集したりするWebアプリケーションがあります。しかし最も有力なのはExcelでしょう。そこで試したいのがExcelファイルを読み書きできるJavaScriptライブラリ、XLSX.jsです。 ダウンロードされたファイルです。ちゃんとXLSXとして認識されます。 ファイルを読み込む処理のデモです。Base64エンコードされたデータが解析されています。 XLSX.jsはbase64のXLSXファイルを読み込み、JavaScriptオブジェクトに変換できます。後はいかようにも表示できるでしょう。また、シート名と各セルの値をHTMLテーブルから読み込んでXLSXファイルに変換してダ
試そう。Webブラウザ上で3Dモデリング·Shapesmith MOONGIFT
ShapesmithはWebブラウザ上で3Dオブジェクトのモデリングを行うソフトウェアです。 テキストを書くサービスはたくさんあります。最近ではWeb上で画像編集を行えるサービスもあります。YouTubeなどは動画の編集にも対応しています。次にくるのはそう、3Dです。ShapesmithはWeb上で3Dモデリングが行えるソフトウェアです。 図面です。座標軸が表示されています。 右クリックしてオブジェクトを選択します。 配置しました。 次に別なオブジェクトを配置します。 高さを変更しています。 めり込んだ図形です。 基本オブジェクトはいくつもあります。 拡張メニューです。 デモ動画です。 Shapesmithは基本的なオブジェクトを使ってそれらを組み合わせてモデルを作り上げていきます。慣れるまではなかなか思い通りに動かないかも知れません。が、3D空間でモデルを作り上げていく感覚はとても面白い
ゲームに使える。オブジェクトと光源によって生まれる影を描画·Illuminated.js MOONGIFT
Illuminated.jsは光とオブジェクトの影を自動計算するJavaScriptライブラリです。RPGゲームやアクションゲームで効果的です。 光があるところには必ず影がある、どこかの大魔王もそういってやられていきました。ということでJavaScriptを使ってオブジェクトと光、そして影を計算するライブラリIlluminated.jsを紹介します。 デモです。オブジェクトやライトを配置していきます。 まずライトを配置してみました。 次にオブジェクトを配置します。ライトとオブジェクトの配置によって光と影が変化しています。 別な光源を配置しました。さらに複雑な計算になっているはずです。 オブジェクトを動かすと自動で影が変化します。 色を変更した場合です。光源の強さも変更できます。 Illuminated.jsではオブジェクトや光源をドラッグで移動すると、それに合わせて影も自動的に変化します。
マウスを動かすと影が動く、そんなちょっとしたアニメーション·Real Shadow MOONGIFT
Real Shadowはマウスを動かすとオブジェクトの影が動く、そんな目を引くアクションができるJavaScriptライブラリです。 マウスを追従する仕組みは目を引きやすいです。そんな仕組みの一つとしてReal Shadowを紹介します。マウスを動かすと影が動く仕組みです。 多数のオブジェクトが並び、その影が描かれています。ライトはマウスがある場所になります。 マウスを動かせば影もリアルタイムに動きます。 Real Shadowでは5つの形に対応しており、そのオブジェクトの影が描画されます。意味もなくマウスをぐりぐりと動かしてみたくなる、そんな面白さがあります。 Real ShadowはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る GitHubの404ページやルパン三世の最新作「峰不二子という女」の公式サイトで
Gmailの添付ファイルをGoogle Driveへ保存·Gmail Attachments To Drive MOONGIFT
Gmail Attachments To DriveはGmailの添付ファイルをGoogle Driveに保存してくれるGoogle Chrome機能拡張です。 話題沸騰のGoogle Drive。既にGoogle Driveを利用したサービスも登場しています。そして早速GmailとGoogle Driveを連携させるGmail Attachments To Driveが登場です。 Chrome Webストアで配布されています。インストールします。 添付ファイルの下にSave To Driveの文字が表示されます。 クリックで保存されます。 Gmail Attachments To Driveはクリック一つでGoogle Driveへファイルを保存してくれます。オンラインで読めるファイルならGoogleドキュメントでも良いでしょうが、汎用的なファイルであればダウンロードよりもGoogle
ローカル/リモートの写真に対応したiOS向けフォトビューワー·FGallery MOONGIFT
FGalleryはiOS用のフォトギャラリーアプリです。 iOSには写真を楽しむアプリがとても多いです。自分でもそんなアプリを作ってみたいと思ったならばFGalleryを参考にすると良いかもしれません。 メイン画面です。3つのタイプに分かれています。 まずローカル。アプリ内の写真を表示しています。 一覧のタイル表示です。 こちらはリモート。外部の写真をURL指定で表示します。 こちらはカスタム。ボタンをカスタマイズして設置しています。 FGalleryはシングルタップによるフルスクリーン化、ダブルタップでのズーム、ピンチによるズーム、キャプション表示、サムネイルグリッド表示、回転のサポート、ローカルまたはURLによる画像読み込み、タブバーのカスタマイズに対応しています。 FGalleryはObjective-C製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFT
ファミコンからゲームボーイ、PCエンジンまでサポートするマルチエミュレータ·BizHawk MOONGIFT
BizHawkは多数のゲーム機をサポートしたエミュレータです。 PC上で昔のゲーム機を動かす、いわゆるエミュレータは高い人気があります。BizHawkは多数のゲーム機をサポートしています。ファミコン、セガマスターシステム、SG-1000、ゲームギア、PCエンジン、SuperGrafx、TI-83、実験的なレベルとしてセガジェネシス、ゲームボーイが一つのソフトウェアで使えます。 設定です。 NESを動かしたところ。サウンドも再生されます。操作もスムーズです。 BizHawkはフルスクリーン、ジョイパッドをサポートしています。他にも速度を変化させたり、ゲーム中のセーブにも対応しています。 BizHawkはWindows用C#製のオープンソース・ソフトウェア（MIT License）です。 MOONGIFTはこう見る ゲーム機は年々進化しています。それに対して実際に儲かっているのはグリーやMob
JavaScriptで処理を同期的に行いたいと考えている人向け·JSDeferred MOONGIFT
JSDeferredはJavaScriptの非同期処理を扱うライブラリです。 JavaScriptの魅力は非同期処理にあると思いますが、これまでのコーディングスタイルと異なるのでやりづらいと感じる人も多いのではないでしょうか。そこでJavaScriptで同期処理的な実行を可能にするライブラリJSDeferredを使ってみましょう。 サンプルコードです。wait(3)で3秒間処理を停止しています。 サンプルのコードです。 ステップ実行のデモコードです。クリックアクションを受けて処理が実行されます。 Beforeです。ネストが深くなって非常に見づらい、汚いコードです。 Afterです。パラレルを使って平行にデータを読み込みつつ、全てが終わった段階でresultsに結果をまとめて次のメソッドを実行しています。 JSDeferredを使わずに書いている場合に比べて、コードがとても見やすいのが分かる
スクロールによってリストの表示をダイナミックに変化させる·stroll.js MOONGIFT
stroll.jsはCSS3を使ったスクロール時に多彩なイフェクトを実現するJavaScriptライブラリです。 WebページはJavaScriptによってどんどんダイナミックに変化させられるようになっています。そこにさらにCSS3を組み合わせることでスクロール時のイフェクトをこんなにダイナミックにできます。それを実現するのがstroll.jsです。 例です。スクロールさせるとリスト部の描画が滑らかに変化します。 3Dを使っている場合は特に奇麗です。 様々な変化があります。 スクロールは上から下、下から上の両方に対応しています。 ソースです。ul.classでアニメーション方式を指定しています。後は単純なリストです。 デモ動画です。全部で13種類のアニメーションがあります。 stroll.jsではリストのスクロールに伴うイフェクトを容易に実現できます。スクロールの速度によってイフェクトの幅
自分で立てよう。Pinterestクローン·Pinry MOONGIFT
PinryはPython製のPinterestクローンです。 ECサイトや雑誌サイトから熱い注目を集めているPinterest。そんなPinterestクローンというべきソフトウェアがPinryです。 最初の画面です。まだ画像はありません。 ログイン画面です。新規登録もできます。 登録する画面です。まだブックマークレットはないようで、直接画像のURLを指定する必要があります。 幾つか画像を登録してみました。 画像をクリックした後のフローティング表示です。 今の所シンプルな機能しかなく、画像URLと説明の登録のみ可能となっています。とは言え写真の見せ方はPinterest風で自己ブランドを高めたいという時にはぴったりなサービスになりそうです。 PinryはDjango+Python製、BSD Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る Webデザインの模倣
CSVやJSONデータを管理、ビジュアル化·Miso Dataset MOONGIFT
Miso Datasetはクライアントサイド、node.jsで利用できるデータ変換&管理ライブラリです。 データのビジュアル化（グラフ化）をする際に書かせないのが元データです。DBに入っていたり、XMLだったりと形式は色々考えられますが敢えてCSVを使ってグラフを描くのがMiso Datasetです。 デモです。CSVデータをグラフにプロットしています。 データはこのようなCSVです。 コード部です。デリミタを指定したり、フォーマットの指定もできます。 Miso DatasetはCSVやJSONを取り込んで自由に操作が出来ます。カラムの定義をしておくことで行をオブジェクトとして扱えるようになります。その他ソートしたりカウントやグルーピングしたりとSQL的な操作もできるようになっています。なおコードはnode.js/クライアントサイドのどちらでも動作します。 Miso DatasetはJav
（笑）や (爆)をアイコンで表現·Emolett MOONGIFT
EmolettはWeb Fontsを使って漢字による感情表現をアイコン化します。 インターネットが普及する前からパソコン通信などで使われてきた「（笑）」や「（泣）」といった文字。これをもっと今風に表現してくれるのがEmolettです。 フォントの一覧です。見事に顔アイコンが表示されています。 実際のHTMLです。class="emo"で書かれている文字を当てはまる顔アイコンに変換します。 Emolettは専用に作られたWeb Fontsを使って特定の漢字についてアイコン化してくれます。Web Fontsに対応していない場合はそのまま文字が出るので問題にならず利用できます。 EmolettはCSS/Web Fontsによるオープンソース・ソフトウェア（SIL Open Font License）です。 MOONGIFTはこう見る Web Fontsの使い方として非常に面白いです。一見すると画
スマホ最適化サイトで使いたい。jQuery Mobile用アイコンパック·jQuery Mobile Icon Pack MOONGIFT
jQuery Mobile Icon PackはjQuery Mobileで使えるアイコン集です。 jQuery Mobileを使ってスマートフォン最適化サイトを構築する際に使ってみたいのがjQuery Mobile Icon Packです。スマートフォンにマッチしたシンプルなアイコン集となっています。 アイコンの一覧です。 実際に使っている例。data-iconで指定するだけで使えます。 多数のアイコンが揃っています。 シンプルで使い勝手が良さそうです。 アイコン画像は全て一つの画像となっており、CSS Spriteで切り出すようになっています。このアイコン群を使う限り読み込みは一度なので高速に表示が可能です。 jQuery Mobile Icon PackはCSS製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFTはこう見る 3Gを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
業務で使えるオープンソース（28）·Webデータベース MOONGIFT