Webデザイナー、プログラマー向けの可読性高いコーディング用フォント·Source Code Pro MOONGIFT
Source Code ProはAdobe社の開発したコーディング用のフォントです。 プログラマー、Webデザイナーは日々コンピュータに向き合ってソースコードを書いています。そんな中でより可読性の高いフォントを用いるのは生産性をあげるためにも大事なことでしょう。そこで使ってみたいのがAdobe社の開発したSource Code Proです。 ボールド。太くても可読性が高いです。 セミボールド。 レギュラー。 ライト。 Source Code Proは全部で6つの太さが用意されています。等幅フォントであり、できるだけ見た目で紛らわしい文字にならないように設計されています。ローカルで使えるTrueType、OTFの他、Google Web FontやAdobe Edge Web Font、Typekit、WebINKを経由してWeb Fontとして使えるようにもなっています。 Source C
iPhone用のすっきり見やすいカレンダービュー·VURIG Calendar MOONGIFT
VURIG CalendarはiPhone用のカレンダービューです。白い表示ですっきりしたデザインになっています。 iPhoneアプリでカレンダー表示を行いたいと思っている方に使ってみてもらいたいのがVURIG Calendarです。標準っぽい雰囲気ではないですがシンプルで見やすいかと思います。 メイン画面です。デモなので特に他にアクションはありません。 日付をタップするとハイライト表示されます。 白い表示で見やすいこともさることながら標準のカレンダーは画面の殆どをカレンダーで埋め尽くされるのに対してVURIG Calendarは半分程度というのが利点です。より下のスペースを有効に使えるでしょう。アニメーションもスムーズです。 VURIG CalendarはiPhone用、Objective-C製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOO
帯域をセーブ。画像をアップロードする前にクライアントサイドで縮小·resize MOONGIFT
resizeは画像のアップロード前に事前にCanvasタグを使って縮小処理を行ってアップロードを行うソフトウェアです。 これは面白いアイディア。resizeはアップロード前にCanvasタグを使って画像のリサイズ処理を行い、小さな画像としてアップロード処理を行います。 最初の画面です。まず写真を選択します。できるだけ大きいのが良いでしょう。 アップロードしました。選んだ画像は5MBくらいあります。 ダウンロードしてみると37KBになっています。 最近のデジカメ、スマートフォンでは画像のサイズも大きくなっていますが、実際のWebサービスではそこまで必要としないケースも多いです。そのような場合にクライアントサイドで変換してしまうというのは面白いアイディアではないでしょうか。 resizeはRuby/Sinatra製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）
iOS Enterprise Program向けアプリ配布用アプリ·In-House AppStore for iOS MOONGIFT
In-House AppStore for iOSはiOS Enterprise Developer Programを使っている企業向けのApp Store風アプリ配布用アプリケーションです。 iOSアプリを配布する場合、App Storeに出す以外にも幾つか方法があります。テスト用途であればTestflightを使うのが良いでしょう。しかし企業向けにiOS Enterprise Developer Programを使っているならIn-House AppStore for iOSを使うと面白そうです。 iPad版です。一番上にアプリが登録されています。Downloadをタップするとダウンロードが開始します。 テストなのでエラーが出てしまいましたが、通常であればダウンロードされるはずです。 In-House AppStore for iOSはplistファイルを配置したURLを指定する必要が
インパクトのあるフローティングを求めるなら·Avgrund MOONGIFT
Avgrundはクリックすると背景をぼかして表示されるフローティングライブラリです。 リンクやボタンをクリックするとフローティングで情報を表示すると言ったイフェクトはたくさんあります。ありすぎて食傷気味なくらいです。しかしAvgrundは見た瞬間のインパクトがかなり大きい表示になっています。 クリック前です。 こんな感じになります。背景のぼやけ具合がいい感じです。 背景が黒く、または白くなるタイプはよくありますがぼかしがかかるというのはなかなか斬新ではないでしょうか。さらに元々のコンテンツが若干小さくなって表示されるのもいい感じです。アニメーション付きなので、ユーザの目を引くダイアログができること請け合いです。 AvgrundはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る Colorboxに代表されるフローティ
Yahoo Pipesのような表現やマインドマップにも·jsPlumb MOONGIFT
jsPlumbはWeb上でオブジェクト同士のつながりを表現できるJavaScriptライブラリです。 情報は有機的に結びついています。マインドマップやネットワーク図などを描く際には必ずオブジェクト同士が何らかの連結しあっているでしょう。そんな図をWeb上で描くのに使えるライブラリとしてjsPlumbを紹介します。 Yahoo! Pipesに似た連結です。 アニメーションもできます。 マウスでドラッグして接続もできます。 複雑に結びつけました。 一つのオブジェクトから複数のオブジェクトに派生するデモ。 jsPlumbはレンダリング先としてSVG、Canvas、VMLが選択できます。また、ライブラリとしてjQuery/MooTools/YUI3が切り替えられます。オブジェクトはマウスで自由に場所を変更でき、コネクトしているラインは自動で再描画されます。 jsPlumbはJavaScript製、
折り畳まれたメニューを展開するように表示するiOSライブラリ·PaperFold for iOS MOONGIFT
PaperFold for iOSは地図やテーブルを折り畳まれたように表示できるiOS用ライブラリです。 iPhoneは画面の小さなデバイスなので、情報を効率よく並べないとごちゃごちゃになってしまいます。そこでメニューを隠したりするのですが、今回紹介するPaperFold for iOSもその一つになります。スライドさせると紙のように折り畳まれたメニューや地図が展開しながら表示される、そんな面白い効果のライブラリです。 デモアプリです。一見すると単なるテーブルですが… 横からずずっと情報が引き出せます。 引き出すとこんな感じ。二つの情報が表示できます。 地図を出すこともできます。まるでガイドマップのようです。 折り畳まれている情報を展開して閲覧するというのは直感的なUIと言えそうです。折り畳んでいる時には全くメニューが見えないので、その点はちょっと工夫が必要かも知れません（そもそも気付いて
多数の言語のAPIドキュメントを一元管理·DocHub MOONGIFT
DocHubはHTML、JavaScript、PHPなどに対応したAPIドキュメントサーバです。 プログラミングをある程度やっていると、解決法を探すのにAPIドキュメントを当たるのが一番早くなっていきます。そこで社内でも使えるAPIドキュメントサーバとしてDocHubを紹介します。 メイン画面です。今はCSS/HTML/JavaScript/DOM/jQuery/PHP/Pythonに対応しています。 検索はインクリメンタルです。入力するたびに絞り込まれていきます。 後は関数名を選択すればその説明が表示されます。 こちらはJavaScript。ユニークなURLが付くので後で見直すのも簡単です。 DocHubの特徴としてデータは常にオンラインにあるものを使用しているということがあります。そのためデータの更新を行う必要はなく、常に最新のドキュメントが参照できます。問題はインターネットを使う分、
iOSライクな惰性スクロールをデスクトップでも·Overscroll MOONGIFT
OverscrollはデスクトップのWebブラウザでiOSに似たスクロールを可能にするライブラリです。 iOSが直感的なデバイスである特徴の一つに惰性のスクロールがあります。指で弾くとその流れでスクロールが続く機能です。あの直感的スクロールをjQueryで再現したのがOverscrollです。 デモはiPhone風のデバイスになります。 クリックして滑らせると惰性でスクロールしていきます。 デモ動画です。スペックが高くないのでうまく再現できていませんので自分で試す事をお勧めします。 画面をドラッグしてスクロールさせるUIとして思いつくのはGoogleマップでしょう。他にも広い範囲のデータをさまよいながら見ていくようなUIとして使ってみると面白いかも知れません。より直感的で面白い効果が臨めそうです。すべりの具合を設定で変更したり、スクロール時のアクションをキャッチすることもできます。 Ove
何に使えるかな。シンプルなWebベースの年表ライブラリ·Chronoline.js MOONGIFT
Chronoline.jsは左右に展開するシンプルな年表ライブラリです。 万人誰にとっても共通で変わらないリソースが時間です。時間ごとに変化するデータ、その時に起きたイベントなどを見せるのに最適なのが年表です。そこで紹介したいのがChronoline.js、シンプルなUIのWebベースの年表ライブラリです。 日ごとの年表。左右への移動はスムーズです。 今日の日付部分が四角く囲まれています。 こちらは月ごと。メモリが大きくなっています。 Chronoline.jsは月、四半期、年といった単位で表示できるようになっています。プロットしたデータにはフローティングを使って情報を追加できます。イベントは日付とタイトルという形でハッシュを作り、それを配列としてJSONデータにするだけです。複雑な情報は表示できませんが、時間軸に沿って何が起きたのかといった表現に良さそうです。 Chronoline.js
Googleマップをもっと簡単に使おう·gmaps.js MOONGIFT
gmaps.jsはGoogleマップを使いやすくするJavaScriptライブラリです。 GoogleマップではJavaScriptのAPIも提供されていますが、使い勝手が良いとは言えません。活用していくならばもっと使いやすいgmaps.jsを利用しましょう。 まず普通の表示。GMapsに位置情報を渡すだけです。超簡単。 イベントも取れます。クリックやドラッグなど様々なイベントが使えます。 マーカーの追加も分かりやすいです。マーカーにイベントをつけるのも簡単。 HTMLコンテンツを表示するのも手軽です。 HTML5の位置情報取得にも対応しています。 住所を検索してジオコーディング。 ドローです。指定は大変ですが。 オーバーレイ表示です。 ルート検索です。二つの位置情報を渡すだけです。 ルート検索をさらにポイントごとに表示していくこともできます。 こちらは静的なマップ。画像として表示できます
これはいい！ドロップダウンに画像と説明文を追加·ddSlick MOONGIFT
ddSlickはドロップダウンメニューにアイコン、説明文を追加できるjQueryライブラリです。 常々HTMLのコンポーネントは貧弱だと思っていた。特にドロップダウンの使い勝手の悪さったらない。テキストしか表示できず、情報選択のUIとしてあまりに粗雑ではなかろうか。そしてみんなが望んでいたライブラリが登場した。それがddSlickだ！ 見よ、この格好いいドロップダウン！テキストに加えて画像が表示できるようになっています！ ダイナミックに変更も可能です。まず普通のドロップダウン。実にいけてない。 じゃじゃーん！ もちろん普通のドロップダウンライクに値が取得できます。選択した項目のデータも取れます。 外部から値を与えて表示項目を変更することもできます。 コールバック対応！ デフォルトの選択もできます。 画像を右に寄せられます。 さらに説明をつけて行ごとに高さを可変にもできます。 画像がない場合
1行のコードで既存のテーブルにソート機能を追加·Table Sorting MOONGIFT
Table Sortingは既存のHTMLテーブルにソート機能を追加するJavaScriptライブラリです。 業務システムなどでテーブルを表示すると常に足らない機能を求められます。その第一が並べ替え機能でしょう。DBを操作しても良いですが、もっと単純に解決したいならTable Sortingを使ってみても良さそうです。 デモです。 カラムのクリックでソートが実行されます。 金額部分もきちんとソートされます。 JavaScriptのコードです。単純にクラスを指定するだけ。 HTMLのコードです。数値部分にも特に設定を行っていないところに注目。 Table Sortingは既存のテーブルを渡すだけで自動的にソート機能を追加してくれます。オブジェクトの型も判断して並び替えてくれるので手間いらずです。 Table SortingはJavaScript製、GPL v3のオープンソース・ソフトウェアで
iOSアプリでツリーマップを表示·TreemapKit MOONGIFT
TreemapKitはiOSにおいてツリーマップ表示を行うライブラリです。 データをビジュアル化する手法は幾つかありますが、その一つにツリーマップがあります。HDD内容を表示するといった際にも良く使われています。そんなツリーマップ表示をiOS上で実現するのがTreemapKitです。 デモアプリです。色分けされたツリーマップが表示されます。 タップするとその場所のサイズが大きくなります。それによって他のブロックが影響を受けて配置が変わります。 どんどん大きくしていくこともできます。 デモ動画です。タップするたびにブロックが移動しているのが分かります。 ツリービュー表示は利用できるケースを選びますが、ぴたりと当てはまるケースもあるでしょう。覚えておくと使える場面がありそうです。 TreemapKitはObjective-C製、iOS向けのオープンソース・ソフトウェア（MIT License）
ガントチャートからiTunes風表示まで。Dojoを使ったグリッドライブラリ·dgrid MOONGIFT
dgridはDojoを使ったWebブラウザ向けグリッドライブラリです。 jQueryなどと並んで有名なJavaScriptライブラリのDojo。そんなDojoで使える高機能グリッドフレームワークがdgridです。 iTunes風の表示です。アルバムやアーティストを選択すると内容が変わります。 ガントチャート風表示です。タスク同士の関連性が表現できています。 サブタスクも表示できます。 テーブル表示です。 クリックで説明を表示します。 詳細リスト表示です。 ギャラリー表示です。 Todoデモです。 消し込めます。データはローカルストレージに保存されるので再読みしても消えません。 dgridの特徴としてはモダンなアーキテクチャ、機能拡張対応（カラムのリサイズ、ドラッグアンドドロップによる並べ替えなど）、スキン、モバイル対応、キーボード操作対応となっています。デスクトップブラウザはもとより、iO
レガシーなWebブラウザでもリアルタイムコミュニケーション·Firehose MOONGIFT
FirehoseはWebSocketsを使わないリアルタイム通信ライブラリです。 Webベースのリアルタイムコラボレーションを実現させるためにはWebSocketsを使うのが手軽ですが、レガシーなWebブラウザでは使えません。そこでロングポーリングを手軽に実装できるのがFirehoseです。 サーバを起動しました。 クライアントから接続しています。 別なクライアントからデータを送信します。 データを得ました。ここで一旦接続は切れます。 Firehoseのデフォルトの動作ではデータを受け取ったタイミングで一旦接続が切れるようになっています。別途用意されているRackアプリケーション用のJavaScriptライブラリを使うと、接続が切れても自動的に再接続を開始します（その間にデータがポストされているとすぐに受け取ります）。Firehoseはレガシーなブラウザや接続が持続的でない環境下でもリアル
JavaScript/CSSを使ってスクロールによるアニメーションを実現·skrollr MOONGIFT
skrollrはCSSを使ってスクロールによってアニメーションを実行するライブラリです。 最近プロジェクトやアプリ紹介ページで見られるようになったスクロールアニメーション。それを実現するライブラリがskrollrです。 デモです。スクロールを開始します！ 回転しながら飛んでくる文字！ 下から上がってくる文字！ 横からスライドも。 色が変わりました。それに合わせてテキスト色も変わっています。 上下からボックスが迫ってきます。 終了です。逆に上に上がっていくとアニメーションが逆に展開されていきます。 デモ動画です。スクロールすると次々と内容が変わっていきます。 実用性という意味ではあまり大きくなさそうですが、インパクトは強烈です。サイト全体を作るというよりも、ランディングページや紹介ページで使うと効果的でしょう。 skrollrはJavaScript/CSS製のオープンソース・ソフトウェア（M
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
ワンクリックでMac OSX上にRuby on Rails開発環境を構築·Rails One Click MOONGIFT
Rails One ClickはMac OSXのRuby on Rails開発環境をボタン一つで整えてくれるソフトウェアです。 Mac OSXにおけるRuby on Rails開発環境を一気に整えてくれるのがRails One Clickです。ウィザード方式でボタンクリックだけでRuby on Railsが開発できるようになります。 メイン画面です。ボタンを押すとインストールが開始します。予めXcodeがインストールされている必要があります。 ダウンロードやコンパイルも同時なのでちょっと時間がかかります。 ログです。 完了しました。 この画面が表示されていれば完了です。 デモ動画です。 Rails One ClickはDocuments以下に一通りの環境をインストールするので、ルート権限不要で使えるのが便利です。 Rails One ClickはMac OSX用のオープンソース・ソフトウェ
FirebugのJavaScript/HTML/CSS表示をハイライト処理·FireRainbow MOONGIFT
FireRainbowはFirebugのJavaScript/HTML/CSS表示をハイライト化するソフトウェアです。 FirefoxのWeb開発デバッグツールとして知名度の高いFirebug。そんなFirebugはJavaScriptの表示がハイライトされておらず不便に感じる人も多かったのではないでしょうか。そこでFireRainbowをインストールしましょう。 インストールしました。再起動します。 こちらはインストール前。単なるテキストとして表示されています。 インストール後。ハイライトされていると可読性が格段に違います。 ミニファイされていてもある程度読めます。 こちらはインストール前のHTML。 こちらもハイライトされます。 FireRainbowをインストールするとFirebugにおけるJavaScript/HTML/CSSがハイライト表示されます。パースの際にはWebWorke
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
