Maplace.js - 軽量なjQuery × Googleマップライブラリ MOONGIFT
Googleマップをプログラマブルに組み込むのに良さそうです。 GoogleマップはAPIの多彩さ、機能の柔軟さもあって様々なサービスで使われています。位置情報や地図を扱おうと思ったら一番に考えるのではないでしょうか。 そんなGoogleマップをさらに手軽に使えるようにしてくれるライブラリがMaplace.jsです。機能は限られますが広範囲に利用できそうです。 まずは簡単なデモ。地図の表示を行います。コードとしてはたった数行です。 // JavaScript var maplace = new Maplace(); maplace.Load(); // or new Maplace().Load(); // HTML <div id="gmap"></div> その結果は次のようになります。 シンプルな地図表示。 次はドロップダウンやリストを使ったマーカーのデモ。マーカーは自動的に中央に表
外部コンテンツを埋め込むためのJSON生成·Iframely MOONGIFT
Iframelyはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 今はソーシャルサービスが隆盛で、外部サービスにコンテンツを投稿することが多いかと思います。そうして登録したコンテンツを再利用しやすくするサービスがIframelyです。 一例。500pxに投稿した写真を埋め込みやすくします。 アイコンやサムネイルなども取得できます。 Vimeoを埋め込む場合。そのまま動画の再生も可能です。 サムネイルの場合は動画ではなく画像です。 SoundCloudを指定した場合もそのまま音楽再生ができるようになっています。 サムネイルは音楽ジャケット。 ブログ記事の場合。Twitterカードに送る際のデータ確認もできます。 MOONGIFTの場合。メタタグの確認とサムネイル画像の表示ができています。 Open Graph用の確認もできます。 オリジナルデー
OAuth認証を一手に行うOAuth.ioのJavaScriptクライアント·oauth-js MOONGIFT
oauth-jsはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 ソーシャルなサービスが増えるのに伴ってOAuthプロバイダーはどんどん増えています。OpenIDと違って、同じ仕様で全てがこなせないのが辛いところです。そこで使ってみたいのがOAuthをまとめてくれるOAuth.ioで、さらにそれを簡単にしてくれるのがoauth-jsです。 デモの画面です。70を越えるプロバイダが利用できます。 ポップアップ版による実装です。 ウィンドウが閉じるとデモの画面でトークンが表示できています。 GitHubなどもポップアップにできます。 プロバイダによって多少のデータフォーマットの違いはありますが、概ね同じ形のようです。 oauth-jsを使うとリダイレクト方式とポップアップ方式を簡単に切り替えて使えます。いずれの形にしてもサーバサイド
ExcelやCSV、Googleドキュメントで簡単に時系列変化型ヒートマップを実現·OpenHeatMap MOONGIFT
OpenHeatMapは表形式のデータを読み込んで地図上に時系列で変化するヒートマップを展開する。 OpenHeatMapはJavaScript/Flash製のオープンソース・ソフトウェア。データをビジュアル化するととても面白い情報が見えてくる。それが現実世界の情報と結びついていると特に面白い。位置情報はその最たるものと言えるだろう。 Twitterのビジュアル化 ただ数値だけを見せられてもぴんとこないが、地図上にマッピングされその数値によって色や大きさが変わっていると具体的で分かりやすくなる。それを簡単に作成できるのがOpenHeatMapだ。 OpenHeatMapではCSVやExcelファイル、Googleドキュメントのスプレッドシートを読み込んでヒートマップ化することができる。データは三列で、左から住所（地域名でも良い）、年数、そして値となっている。これだけ作れば後はアップロードす
これからHTML5をはじめるならぜひ読みたい·Dive Into HTML5 MOONGIFT
Dive Into HTML5はHTML5の何たるかを著したオンラインブックです。 これからHTML5の勉強をはじめよう、そう思い始めた人に読んでほしいのがDive Into HTML5です。HTML5の機能、特徴などについて網羅されたコンテンツです。 トップページです。ePubやPDFといった電子書籍ではないですが、書籍風に整った構成になっています。 段落分けされていて読みやすいです。 アクションのデモと、そのWebブラウザごとのサポート状況についても書かれています。 位置情報系のデモを試すと実際に有効にするかどうかの確認が出ます。 Dive Into HTML5は章ごとに分かれているので、自分の気になる部分だけを読んでも良いでしょう。ダウンロードしてオフラインでも読んでみたい便利なコンテンツです。 Dive Into HTML5はHTML5製のオープンソース・ソフトウェア（Creati
社内でも立てられるGitHubクローン·GitLab MOONGIFT
GitLabはRuby/Ruby on Railsで作られたGitHubクローンです。 GitHubは有料でプライベートリポジトリが持てますが、それでもセキュリティ上の理由でリポジトリを外だしできないケースはあるかと思います。そんなときに使ってみたいのがGitLab、GitHubクローンです。 ログイン必須になります。 ログインした後の画面です。登録済のプロジェクトが一覧表示されます。 一つのプロジェクトを閲覧しています。ソースツリーが出ます。ソースツリーは右へ右へスライドして表示されます。GitHubに似ています。 ソースコードハイライターも内蔵されています。rawでファイルをダウンロードできます。 タグやブランチを切り替えることもできます。 コミット履歴一覧です。 コミット詳細ではDiffが確認できます。 コミットに対するコメントも確認できます。 チーム設定です。複数人でのコラボレーシ
Vim初級者にお勧め。ショートカットキーをまとめた壁紙·Vim Shortcut Wallpaper MOONGIFT
Vim Shortcut WallpaperはVimのショートカットをまとめたチートシート兼壁紙です。 Vimは慣れると手放せないテキストエディタですが、最初はキーバインドを覚えるのに苦労するでしょう。そこで使ってみたいのがVim Shortcut Wallpaperです。Vimのショートカットキーが載ったチートシート兼壁紙です。 配布内容です。背景色がダークまたはホワイト系で選択できます。サイズは2パターン用意されています。 グレー系はこんな感じです。 ちょっとサイズが合わないのですがデスクトップの壁紙に設定してみました。 MacVimの背景の透明度を設定するといい感じにチートシートが見えるようになります。 Vim Shortcut Wallpaperをすぐ見られるところに配置しておけば、いざ忘れてしまった時にもすぐアクセスできて便利です。 Vim Shortcut Wallpaperは
30分で開発マシンに変身させる魔法のスクリプト·Laptop MOONGIFT
LaptopはUbuntu、Mac OSXのRuby on Rails開発環境をまとめてセットアップします。 これからRailsの勝発をはじめてみたい、そう思ったMac OSX/Ubuntu利用者にお勧めなのがLaptopです。30分であなたのマシンが開発マシンに様変わりします。 例えばこれがMac OSX用。 こちらはUbuntu用。 インストールされるソフトウェアです。 Laptopはたった一行のコードを実行するだけで多種多様なソフトウェアが一気にインストールされます。Homebrew（Mac OSXの場合のみ）/QT/Ack/Tmux/Postgres/Redis/ImageMagick/RVM/Ruby 1.9.2/Rails/Heroku/Tapsなどがインストールされます。ネットワーク状況によりますが、だいたい30分はかかるとのことです。 LaptopはBashスクリプト製、M
多彩な表現をご覧あれ。JavaScriptによるデータビジュアル化ライブラリ·JavaScript InfoVis Toolkit（JIT） MOONGIFT
JITはJavaScriptを使ったデータビジュアル化ライブラリです。 JavaScriptを使ってWeb上でデータを多彩にビジュアル化するライブラリがJavaScript InfoVis Toolkit（JIT）です。その多彩な表現をご覧ください。 積み上げのエリアグラフです。表示の際にはアニメーションが実行されます。 実際のコードです。 棒の積み上げグラフです。 横向き、2Dのグラフです。 関連グラフです。マウスで動かせます。 マウスオーバーで説明が表示されます。 こんなグラフもあります。 星形。格好いいです。 カスタマイズにも多様に対応しています。 容量の表示などによく利用されるツリーマップです。 こちらもパターンが色々用意されています。 グラフを組み合わせたパターンです。 こんな表現も可能です。 派生していくアニメーションが格好いいです。 円グラフです。アニメーションやマウス操作に
面白い！JavaScript+Canvasによる画像差分表示·JS-ImageDiff MOONGIFT
JS-ImageDiffはJavaScript+Canvasタグを使って二つの画像の差分表示を行うライブラリです。 GitHubでは差分をWebブラウザ上で閲覧できますが、その時に画像の差分表示も行えるのを知っているでしょうか。スライダーで動かしたりして差分を確認できるのですが、その一つの差分表示をオープンソースで再現するのがJS-ImageDiffです。 サンプルです。上が元、中間が変換後そして下が差分となります。どこが違うのか一目で分かります。 左が影無し、右が影ありです。一致している部分だけが表示されています。 サイズが違う場合の差分表示です。 JS-ImageDiffはCanvasタグを使って画像を読み込み、その差分を表示しています。各ピクセル単位で画像を比較して同じであれば黒、違う場合はうまく表示するというやり方でここまで見事に表示できるのが面白いですね。 JS-ImageDif
jQueryで作られた本格的表計算ソフトウェア「jQuery.sheet」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
jQuery.sheetはjQueryで作られたWebベースの表計算ソフトウェアです。 業務システムなどではWeb上にテーブルを表示するというケースがよくあります。さらに一歩進んで表計算のように集計したり並び替えたりしたいという無茶な要望が出るかも知れません。そんな時に使ってみたいのがjQuery.sheetです。jQuery製の表計算ソフトウェアです。 カラムはもちろん、グラフの表示までできてしまう本格的な表計算ソフトウェアです。 最大化表示。セルの値を参照することもできます。 テキストだけではなくラジオボタン等も使えます。 関数も多彩に用意されています。 編集しているところ。 文字装飾を変更します。メニューから選択できます。 HYPERLINKはその名の通りリンクを埋め込みます。 データにはHTML/XML/JSONが使えます。エクスポートも各フォーマット向けに可能です。 JavaSc
node.jsで作られたGitリポジトリブラウザ·git.js MOONGIFT
git.jsはnode.jsで作られたWebベースのGitリポジトリブラウザ。 git.jsはnode.js/JavaScript製のオープンソース・ソフトウェア。Gitの面白い所は個々にリポジトリがあることだ。それによって分散化を実現し、かつオフラインでも開発ができるようになった。リポジトリにはこれまでの開発が全て詰まっており、いつでも参照できるのが嬉しい。 ログ Gitリポジトリを取り込んでしまえば、リポジトリを操作するために都度ネットワークアクセスする必要もない。リポジトリブラウザが高速動作するのはとても良い。今回紹介するのはWebベース、JavaScript製のGitリポジトリブラウザであるgit.jsだ。 git.jsはサーバサイドでローカルのGitリポジトリの情報を読み込みつつ、それをWebブラウザ上で表示する仕組みになっている。node.jsを使っているのでどちらもJavaS
まずは見た目で。HTML5製の上品なプレゼンテーション·Landslide MOONGIFT
LandslideはテキストファイルをHTMLベースのプレゼンテーションに変換するソフトウェア。 LandslideはPython/HTML5製のオープンソース・ソフトウェア。最近はHTMLによるプレゼンテーション作成も見られるようになってきた。HTMLの方が表現力が高く、デザインの自由度もあるために格好いいものが多い。画一的なプレゼンテーションは飽きてしまう。 スライド だが皆が使い始めると、より人と違ったものを使いたくなるのが常だろう。そこで新しいHTMLプレゼンテーションであるLandslideを紹介しよう。HTML5を使ったクールなプレゼンテーションが実現する。 Landslideは前後のスライドが左右に表示されるタイプのプレゼンテーションだ。ドキュメントはMarkdownまたはReStructuredTextで記述して、それをLandslideコマンドで変換する。さらにPDFへの
node.js普及の足がかりになるか。node.js/MongoDB製のCMS·Calipso MOONGIFT
Calipsoはnode.jsで作られたCMS（コンテンツマネジメントシステム）。日本語ローカライズも行われている。 Calipsoはnode.js製のオープンソース・ソフトウェア。まだまだ本格的に使われていはいないものの、知名度が高まってきているのがnode.jsだ。サーバサイドJavaScriptの本命とも言えるのではないだろうか。既に数々のライブラリ、モジュールが開発されている。 メイン画面 だが開発者向けのツールだけではシェアを拡大させるには物足りない。HTML5の実験にもたびたび使われているが、そうではなくもっと一般的なWebアプリケーションが必要なのだ。それがCalipso、node.js製のCMSだ。 Calipsoはnode.jsとMongoDBを使って作られているCMS（コンテンツマネジメントシステム）だ。高速な動作、認証システム、プラグインとモジュールによる機能の追加、
MongoDBを使った開発のお供に。マルチプラットフォームで使えるMongoDB管理UI。 MOONGIFT
JMongoBrowserはマルチプラットフォームで動作するMongoDB管理ソフトウェア。 JMongoBrowserはWindows/Mac OSX/Linux用のフリーウェア。NoSQLの採用が増えてきた。メインで使う場合もあるが、今のところは補助にシステムで、特にNoSQLが有効に使える場面で採用することが多いようだ。 メイン画面 使われることが増えれば、自ずと管理インタフェースが必要になる。実際に登録されているデータを閲覧したり更新する、そのためのソフトウェアがJMongoBrowserだ。 JMongoBrowserはGUIアプリケーションとして提供されるのが利点と言える。サーバに接続し、DBを一覧したりコレクションを閲覧することができる。ドキュメントをアップデート、複製、削除することももちろん可能だ。コレクション自体の操作もできる。 クエリーウィンドウ さらにJSON/BSO
仕事で便利。CSVファイルを読み込んでソース/検索可能なHTMLに変換·Latimes Table Stacker MOONGIFT
Latimes Table StackerはCSVファイルを設置し、ソート/検索可能なHTMLで表示するソフトウェア。 Latimes Table StackerはPython/Django製Google App Engine用のフリーウェア（ソースコードは公開されている）。高度なWebアプリケーション、システムが開発され個人のIT利用度はどんどん高くなっている。対してビジネスの場ではあまり大きな変化は起きていない。 CSV一覧 未だにAccessのようなデータベースが使われ、Excelベースのデータ集計がされている。それは決して悪いことではないが、ソフトウェアの依存や再利用性を高めるのには不向きだ。そこで使ってみたいのがLatimes Table Stackerだ。 Latimes Table StackerはCSVファイルを読み込み、テーブル上に表示するソフトウェアだ。一行目がカラムに
解析データの、グラフ化に。JavaScript製統計解析ライブラリ·jStat MOONGIFT
jStatはJavaScriptで作られた統計解析ライブラリ。Canvasタグにデータをプロットする。 jStatはJavaScript/jQuery製のオープンソース・ソフトウェア。単純に一覧化された数値では分からない情報も、データをビジュアル化すると見えているものがある。トレンドや偏差が見えると、次の手や分析する上でのきっかけが掴めるようになる。 二つのデータを描画 統計のビジュアル化をする解析言語としてはMATLABやRが有名だ。しかしそうした言語を覚えないとデータのビジュアル化ができないのは面倒だ。Webブラウザ上でもっと手軽にグラフを描くソフトウェアとしてjStatを紹介しよう。 jStatでは多様な統計解析を行うライブラリだ。描画にCanvasを使っているのでHTML5をサポートしたモダンなWebブラウザがサポート対象になっている。またjQueryを使っている。線で描画すること
Spacesを使いこなす人は要チェック！·Hyperspaces MOONGIFT
Mac OSX 10.5には仮想デスクトップを提供するSpacesが標準で組み込まれている。作業を分けたり、複数のアプリケーションをたびたび切り替える人にとっては使いやすい機能だ。だが若干Appleらしからぬ物足りなさは感じていた。 設定画面 そんなかゆい所に手が届くソフトウェアを紹介しよう。 今回紹介するフリーウェアはHyperspaces、Spacesをもっと便利にしてくれるソフトウェアだ。現在プレビュー版としてフリーウェア版がリリースされている（正式リリース後は完全有料化するかも知れないのでご注意を）。 Hyperspacesを起動するとメニューバーにアイコンが表示される。ここで設定やSpaceの切り替えを行う。まず一つ目の機能として、各Spaceに対して名前をつけることができる。1番、2番といった分かりづらいものではなく「文書用」「メール用」など分かりやすいネーミングを付けられる。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
