Instagram風のカメラアプリを作る際に参考にしたい·DLCImagePickerController MOONGIFT
DLCImagePickerControllerはInstagram風のライブフィルタを備えたカメラアプリです。 カメラアプリであるInstagramはとても人気があります。その最大の特徴と言えば、撮影した後のライブフィルターでしょう。そんなフィルタリングを実現できるライブラリがDLCImagePickerControllerです。 メイン画面です。Show pickerをタップします。 カメラで撮影します。 イフェクトが表示されました。下のアイコンで風合いを変更し、さらにぼかしなどを加えられます。 ぼかしを適用した白黒写真。 結果はカメラロールに保存されます。 四角くなった写真です。 DLCImagePickerControllerは撮影した直後にフィルタが表示されます。その中のアイコンから選択していけばその場でフィルタがかかって効果が確認できます。さらにぼかしを加えることもできます。カ
200を越えるアイコンが揃ったBootstrap向けWeb Font·Font Awesome MOONGIFT
Font AwesomeはBootstrapと組み合わせて使えるアイコンを集めたWeb Fontです。 Twitter Bootstrapの便利な機能の一つにアイコンパックがあります。ちょっとした装飾を手軽に付け加えられるのは便利です。そんなBootstrapに200以上のアイコンを追加するのがFont Awesomeです。Web Fontで作られたアイコンパックです。 全てのアイコンです。 ソーシャルアイコンも揃っています。 例です。ドロップダウンやボタンにつけています。 大きさが自由に変更できるのもフォントならではです。 ドロップダウンにつけると機能がより分かりやすくなります。 カスタマイズすればレーティングに使ったりもできます。 ファイル構成です。SVGやフォントが提供されます。 Font AwesomeはTwitter Bootstrapで提供されているものに加えて色々な場面で役立
すごいぞ！HTML5で顔認識·HTML5 Face Detection MOONGIFT
HTML5 Face DetectionはHTML5を使って動画から顔をリアルタイム認識します。 HTML5はどこまで行くのか、それを改めて思い起こさせる凄いソフトウェアがHTML5 Face Detectionです。何と動画の顔認識をリアルタイムに行ってしまいます。 デモ動画です。上が動画、下がそれを解析して顔認識しているものです。 顔を動かしても付け目がね＋鼻が追いかけてきます。 筆者トライの図。Glassesをタップすると認識処理が開始されます。 デモ動画 HTML5 Face Detectionは動画のフレームを読み込み、JavaScriptで顔認識をした後、Canvasタグに鼻眼鏡とともにレンダリングしています。はっきり言ってかなり重たいのですが、技術的にはとても面白いソフトウェアです。 HTML5 Face DetectionはHTML5/JavaScript製のソフトウェア（
手軽に使える。フィードを取り込んでePubファイル化·feed2epub-clj MOONGIFT
feed2epub-cljはコンソールベースのソフトウェアで、フィードを取り込んでePub化します。 フィードを電子書籍にしたいと思ったらぜひ使ってみてほしいのがfeed2epub-cljです。シンプルなコンソールベースのツールで、簡単にフィードの内容をePub化してくれます。 実行しました。フィードのURLをオプションにするだけです。 ePubファイルができあがっています（ブログタイトル.epubというファイル）。これをiPhone、iPadなどの電子書籍リーダーに送ります。 閲覧しています。問題なく表示されます。 画像も表示されています（ダウンロードはしていないようです）。 feed2epub-cljはRSS2.0/Atomに対応しています。また、iBooksやStanzaといった電子書籍リーダーで閲覧できます。なお筆者環境ではMac OSX用のePubリーダーでは閲覧できませんでした
Webの表現力はここまで来た。Canvasタグを使ったアニメーションライブラリ·CAKE（Canvas Animation Kit Experiment） MOONGIFT
CAKEはCanvasタグを使ってグラフィカルなアニメーション描画を行うJavaScriptライブラリです。 HTML5のCanvasタグによってWebの表現力は格段に増したと言えます。今回紹介するCAKE（Canvas Animation Kit Experiment）はCanvasタグを使ってアニメーションを実現します。多彩なデモがあるのでぜひ公式サイトでチェックしてみてください。 最もシンプルなデモです。サークルが回転します。 それを描いているHTMLタグです。結構複雑ですが、見がたい訳ではありません。 色々なデモあります。 流れるような動きが格好いいです。 マウスで大きさを変えられます。 大きなモデルの周囲を小さなモデルが回ります。 ベジュ曲線調に光が下りていきます。 枝が進んでいくデモです。 四角が回転するデモです。 SVGを表示するデモです。 デモ動画です。 CAKEはアニメー
これは便利！Mac OSX/Linuxで動くIE7〜9のVirtualBox用仮想イメージを作成·ievms MOONGIFT
ievmsはMicrosoftが提供するIE動作検証用Virutal PC向け仮想イメージをVirutalBox向けに変換するソフトウェアです。 IEで見たWebサイトの確認をしたいと思ったらWindows機が必要です。さらにIE7/8/9と各バージョンを用意しなければなりません。そんなのは面倒だ！というMac OSX/Linuxユーザの方は今すぐievmsを実行しましょう。ievmsはIE7〜9のVirtualBox用の仮想イメージを作成してくれるソフトウェアです。 インストール中です。数GB以上あるものばかりでかなりの時間を要します。 とりあえずIE7とIE8の仮想イメージができあがりました。VirtualBoxで確認できます。早速起動してみます。 Windows7が使われています。なお最初の起動時にライセンスが切れていましたがオンライン認証で通りました。 アクティベート後、再起動すれ
Inkscape機能拡張。ドローデータをHTML5/Canvasへ出力·Ink2canvas MOONGIFT
Ink2canvasはInkscapeで作成したドローをHTML5/Canvasに保存するソフトウェア。 Ink2canvasはInkscape用、Python製のオープンソース・ソフトウェア。オープンソースのイラストレーションソフトウェアとして有名なInkscape。数年前はまだまだ不安定だったが、最近ではずいぶん実用的になっているようだ。 出力例 描いた図をSVGで出力できるので、Webとの親和性も高い。だがSVGはXMLベースなので修正するのが大変かも知れない。そこでさらに便利にCanvasタグ化してしまうソフトウェア、Ink2canvasを使ってみよう。 Ink2canvasはInkscape用の機能拡張だ。インストールすると、Save asの項目にHTML5が出るようになる。そして保存するとHTMLファイルが生成される。中にはJavaScriptを使ってCanvasタグにレンダリ
プレビューがあればさらに作りやすい。HTML5のスライド作成ソフトウェア·Editable HTML5 Slides MOONGIFT
Editable HTML5 SlidesはHTML5のスライドをプレビューを見ながら作成できるソフトウェア。 Editable HTML5 SlidesはHTML5/JavaScript製のフリーウェア（ソースコードは公開されている）。最近はHTMLファイルをベースにしたプレゼンテーションを作成する人が増えてきた。動画を埋め込んだり、外部コンテンツを取り込んだりしてよりダイナミックで面白いプレゼンテーションが作成できる。 左にプレビュー しかしHTMLで作成する場合の欠点としては、作成中はテキストエディタ等を使っているため実際に表示した際の見え方が分かりづらいということだ。その問題点を克服できるのがEditable HTML5 Slidesだ。 Editable HTML5 Slidesは左側にプレビューが表示されるスライド作成ソフトウェアだ。右側にプレゼンテーションのためのHTMLが表
楽譜をWeb上に表示するJavaScriptライブラリ·Audiofile.cc MOONGIFT
Audiofile.ccはHTMLタグを楽譜化して表示するJavaScriptライブラリ。 Audiofile.ccはHTML5/JavaScript製のオープンソース・ソフトウェア。Webベースのアプリケーションが増えるに従って、表現したい内容も増えている。テキスト、画像、動画、音楽以外にも様々なデータを表示したいと思っているはずだ。 表示例 HTML4以前ではFlashが活躍した。だが時代はHTML5に移り変わろうとしている。今はCanvasタグで様々なコンテンツを表示する。Audiofile.ccはその一つ、楽譜を表示するソフトウェアだ。 楽譜についてはMMLと呼ばれるマークアップ言語があるが、Audiofile.ccではそれは用いていない。あくまでも独自の記法に則って記述する必要がある。具体的にはdivタグに対してdata-note/data-pitch/data-octaveとい
圧倒的な存在感。HTML5/CSS3/JavaScriptで作られたイラストレーションアプリ·Ghost Writer MOONGIFT
Ghost Writerは万年筆、マジック等をリアルに再現した絵描き用ソフトウェア。 Ghost WriterはHTML5/JavaScript製のフリーウェア（ソースコードは公開されている）。HTML5は徐々に本格導入されつつあるが、まだまだ実験的なプロダクトが多い。だがプログラマーにとっては、今こそ遊べる状況だ。色々試し、遊ぶ中で新しい可能性を見いだすことができる。 ものすごくリアル 今まではローカルでしかできなかったような操作がWebベースで実現するようになっている。特にペイント系は面白い。そこで今回はGhost Writerを紹介しよう。 Ghost Writerは古めかしい紙のようなボックスにペンを使って書き込めるソフトウェアだ。驚くのはそのリアル感ある存在感だろう。万年筆、マジック、スプレーといったペン種があり、切り替えて絵を描くことができる。なお筆者環境では色を変えることはで
画一的なプレゼンテーションにさよならを。HTML5/JavaScript/CSS3によるプレゼン·CSSS MOONGIFT
CSSSはHTML5/JavaScript/CSS3で作られたWebベースのプレゼンテーションテンプレート。 CSSSはHTML5/JavaScript/CSS3によるオープンソース・ソフトウェア。最近はHTMLやJavaScriptを使って作られたプレゼンテーションが増えている。JavaScriptでキーの動きに合わせてスライドを動かす類のものだ。 奇麗なHTMLプレゼン コンテンツがHTMLベース、つまりテキストで作れるのが大きな魅力だろう。そして最新のWeb技術を盛り込んで作られたのがCSSSだ。 CSSSは矢印キーによるスライドと切り替えと、Ctrlキーと組み合わせたキーボードショートカットをサポートしている。Ctrl+Hでスライドのサムネイル一覧を作ることもできる。矢印を押すたびに文字が追加表示されていくと言ったアクションも実装できる。 スライド一覧 良いと思ったのは、スライドの
Aptana/NetBeans/TextMate/Codaと連携するHTML/CSS補完ツール·Zen-coding MOONGIFT
CSSやJavaScriptが多用されるようになり、一般的なオーサリングツールでは求めるデザインが容易にはうまくいかなくなっている。そのため技術者の場合は手打ちでHTMLを描く人も多いはずだ。だが、面倒なのは確かだ。 各種エディタで利用可能 もっとシンプルにタグ入力を行いたい、そう考える方に使ってみて欲しいのがZen-codingだ。 今回紹介するオープンソース・ソフトウェアはZen-coding、各種エディタと連携するHTML/CSS補完ライブラリだ。 Zen-codingは単なる入力補完ではない。その書き方が変わっていて、div#headerと書けば、<div id="header"></div>に展開される。もちろんクラスの場合はドットでつなげば良い。複数のクラス指定も可能になっている。詳しくは下記のチュートリアル動画を参考にされたい。なおTextMateで試したところ、一部うまくい
URLを引数に本文抽出を行うJavaライブラリ「Boilerplate」 | MOONGIFT | オープンソース・ソフトウェア紹介を中心としたITエンジニア/Webデザイナー向けブログ
BoilerplateはURLを与えると本文部分を抽出するライブラリ。 BoilerplateはJava製のオープンソース・ソフトウェア。Webサイトをクローリングしたり、そのサイト内にあるテキストを使って別なWebサービスを構築すると言った手法はよく存在する。そんな時に必要になるのが本文抽出というテクニックだ。 デモ Webサイトには本文以外にも多様なコンテンツが存在する。例えばヘッダー、サイドバー、フッター、広告などだ。そうした無用なコンテンツを除去し、必要な部分だけ取り出すためのライブラリがBoilerplateだ。 BoilerplateはURLを引数に、後は自動的にコンテンツを取得して本文だけを返却してくれるという手軽なライブラリだ。Javaのライブラリなので、既存のJavaシステムに組み込むのはもちろん、Google App Engineを使ってWeb APIとしてコンテンツ抽
HTML5 + Canvas + JavaScriptによるWebベースの顔認識「ccv」 | MOONGIFT | オープンソース・ソフトウェア紹介を中心としたITエンジニア/Webデザイナー向けブログ
ccvはHTML5とCanvasタグを使ってWeb上で顔認識を行う。C言語によるライブラリもある。 [/s2If] ccvはWebベースまたはC言語製のオープンソース・ソフトウェア。最近の写真管理ソフトウェアの流行として顔認識がある。デジカメやプリンタでも顔認識機能を搭載し、自動的に明るくしたりするものもある。風景写真なども良いが、やはり人が写っている写真のが楽しいのだ。 そんな顔認識技術はWebベースでも提供されるようになっている。特にFacebookのようにSNSの中で使う場合は友人を自動認識させることでより活発な交流を促せるのだ。Webベースでの顔認識をHTML5/Canvasで行うのがccvだ。 実行例 via Tibetan Girl near Mount Everest | Flickr - Photo Sharing! ccvは元々C言語で開発されているコンピュータビジョンラ
マインドマッピング的にデータを視覚化する·Visual Understanding Environment MOONGIFT
Visual Understanding EnvironmentはWindows/Mac OSX/Linux向けのオープンソース・ソフトウェア。プロジェクトを企画する際、頭の中で考えていることをまとめる時には、それに特化したツールを使うとうまくいく。例えばマインドマッピングだ。 情報整理、視覚化に だが必ずしもノードがつながっているとは限らない。それ以外にも可視化したい情報はたくさんある。地図や写真に付加情報をつけたいなんてニーズもあるかも知れない。そんなあらゆるデータを視覚化、まとめあげるツールがVisual Understanding Environmentだ。 Visual Understanding Environmentはいわゆるマインドマッピングではない。ノードを配置して、線でつなぐこともできるというだけだ。ノードは写真やファイル、リンク、メモをつけることができる。キーワードを
邪魔にならない、小さなCPUモニタ·CPU History MOONGIFT
Mac OSXは堅牢なシステム（Unixベース）で、快適な操作性が良く言われるのだが、個人的には不明なタスクが突如CPUの使用率を上げ、動作が鈍くなることが良くある。FirefoxのCPU使用率も、タブをたくさん開いていることもあって、相当に高くなっている。 Dockに格納すると便利 そのため、アクティビティモニタは常に開いて注視していたのだが、邪魔と言えば邪魔だった。その点、CPUの状況をモニタリングするのにこのソフトウェアはぴったりだ。 今回紹介するオープンソース・ソフトウェアはCPU History、CPUの利用率をモニタリングするソフトウェアだ。 CPU Historyはごく小さなウィンドウ（最大128×128）にCPUの使用率をこくこくとモニタリングし、描画してくれる。ユーザ、システム、アイドル、Niceの4つに分かれている。普通に起動した状態では、常に最前面に表示されるので邪魔
MOONGIFT: » Mac OSX向けの洗練されたSubversionフロントエンド「Versions」:オープンソースを毎日紹介
開発時にバージョン管理システムを導入することによるメリットは言うに及ばないが、それはプログラマのみならずデザイナーにとっても同様だ。だが、バージョン管理をデザイナーまで普及させるのは非常に困難だ。 メイン画面 やはりインタフェースが鍵を握っている。使い勝手の良い、分かりやすいインタフェースのバージョン管理システムがあれば利用してくれる可能性はありそうだ。 今回紹介するフリーウェアはVersions、Mac OSX向けのSubversionフロントエンドだ。 Versionsは既存のワーキングコピーも簡単に登録でき、HTTP/SSH/SVNプロトコルに対応してリポジトリを登録することができる。何よりファイルの一覧やログの閲覧などが分かりやすいインタフェースでできる点が便利だ。 比較の確認画面 また、ファイルを選択してDiffを表示したり（DiffはFileMergeを利用）、履歴をするのがボ
MOONGIFT: » デザインもオープンソース化「Open Designs」:オープンソースを毎日紹介
技術者にとって、デザインは鬼門だ。システムはどんどん作れても、デザインが乏しいと急速にやる気をなくしたり、プロジェクト自体が頓挫してしまう。 そこで私自身はデザインは極力外部から持ってくる事にした（または手伝ってもらう）。そうした時に役立つのがこのサイトだ。 今回紹介するのはOpen Designs、オープンソースのデザインテンプレート配布サイトだ。 Open Designsでは600種類を越えるWebページデザインがアップロードされている。ライセンスはCreative Commons、GPL、Public Domainになる。非常に様々なクールなデザインテンプレートが数多く存在している。 特にブログ向けなどのカテゴライズはないので、Webサイト全般で利用できるだろう。カラム数や色合い、バリデーションを指定しての検索も可能だ。 システムがいくら素晴らしくとも、デザインがさえないサイトはそれ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
