JavaScript Hand Tracking·HTML5/JavaScriptによる手の認識ライブラリ MOONGIFT
CV（コンピュータビジョン）はここ数年でどんどん盛り上がっています。2Dもあれば3Dによる認識もあります。認識精度があがることで、様々なアプリケーション、サービスが生まれてくるでしょう。 まるで映画の中のコンピュータのような世界ができるかも知れません。それをWeb上で手軽に体感できるのがJavaScript Hand Trackingです。 JavaScript Hand Trackingの使い方 こちらがデモです。手の部分が赤い線で認識しています。 動かしても認識が追従しています。 動画によるデモ。手の形を変えても認識しているのが分かるでしょうか。 JavaScript Hand TrackingはWebカメラだけで手軽に手の認識技術が試せ、遊ぶことができます。肌の色は設定で認識幅を調整できるようになっています。 JavaScript Hand TrackingはHTML5/JavaSc
Suave UI – AngularJSと組み合わせて使いたいUIフレームワーク
JavaScriptを活用したWebアプリケーション開発の流れが広まっています。JavaScriptアプリケーションが大型化すれば、自然とフレームワークを欲するようになります。AngularJS、Ember、Backboneあたりが有名でしょうか。 今回はAngularJSをターゲットにしたプロダクト、Suave UIを紹介します。AngularJSと組み合わせて使うと便利なUIフレームワークになります。 Suave UIの使い方 Suave UIはAngularJSに対応した部分において、su-*というプリフィックスを持っています。スタイルシートについてもsu-*をつけて使います。UI周りで従来のライブラリを使うと、そこだけAngularJSと違う書き方になって浮いてしまうことがあります。Suave UIを使ってUIとスクリプトが親和性高い状態を維持しましょう。 Suave UIはJav
Alasql.js - オンメモリで動作するJavaScriptデータベース MOONGIFT
JavaScriptを活用したWebアプリケーションを開発している際に、一時的に保存したいデータをどのように扱うかは大きな問題です。何となく変数や配列、ハッシュに保存してしまいがちですが、そのデータの取り出しや更新が面倒だったりします。 そこで使ってみたいのがAlasql.jsです。JavaScriptだけで作られたクライアントサイド向けのSQLデータベースになります。 Alasql.jsの使い方 使い方の例。データを配列で放り込んで、SQLで取り出せます。 デーブルの作成を含めてSQLが書けます。 データはlocalStrageに保存することもできるので、再読込時に復元も可能です。 Alasql.jsはHTML5仕様の中で検討されていたWeb SQLとは異なる実装で、オンメモリで動きます。高速で動作し、かつデータはlocalStrageに保存しておくこともできるので容量は小さいながらも永
Material Icons - マテリアルデザイン向けに作られたGoogle製アイコン集 MOONGIFT
Googleが提唱しているフラットUIを発展させたデザインがマテリアルデザインです。アイコンを単純化して情報構造を明確にするだけでなく、さらにマウスオーバーやタップ時のアニメーション、色の変化をつけることでシステムがどういう状態にいるかが明確になります。 そんなマテリアルデザインにフォーカスして作られたアイコン集がMaterial Iconsです。 Material Iconsの使い方 Material Iconsは数百種類のアイコンが提供されています。 アクション系。 特徴としては一つのアイコンで終わりではなく、その状態によって斜線を引いたり、アイコンを重ねたアイコンがあることでしょう。 アラート、AV、コミュニケーション。 音量アイコン一つとっても、音量の大小、ミュート、設定不可などとパターンが作られています。 コンテンツとデバイス。 スマートフォンでも利用も想定されていますのでデバイ
jQuery Photoset Grid - Tumblrでも使える写真グリッド表示ライブラリ
写真は見せ方一つで大きくインパクトが変わります。単純に並べているだけではダメで、数多くのサービスが写真の見せ方に苦心しています。そんな中、一つのシンボルになっているのがTumblrではないでしょうか。 大きく一つの写真を見せるUIは写真を好む人たちに受け入れられ、今なお写真コンテンツが多く投稿されています。そんなTumblrでも使える写真グリッド表示ライブラリがjQuery Photoset Gridです。 jQuery Photoset Gridの使い方 小さい写真は正方形で表示されるようになっています。多くの写真をグリッドで表示するのに良さそうです。写真とは関係ないですが、背景色などの全体のバランスもいいです。 jQuery Photoset GridはjQuery製、MIT Licenseのオープンソース・ソフトウェアです。 jQuery Photoset Grid - Style
jQuery.GI.TheWall.js - Google画像検索ライクな表示/アニメーションライブラリ MOONGIFT
Googleの画像検索をよく使うのですが、一覧に並んだ画像に加えて、それをクリックした時のアニメーションや説明表示など使い勝手がとてもいいです。さすがGoogleといった所ですが、そのUIを真似ると色々な場面で使えるかも知れません。 そこで使ってみたいのがjQuery.GI.TheWall.jsです。jQueryベースであのGoogle画像検索ライクな表示が実現します。 jQuery.GI.TheWall.jsの使い方 こちらが画像一覧です。適当な画像をクリックします。 アニメーションしながら画像の詳細が出ます。デモなのでクリックした画像と表示される画像は関係ありません。 左右の矢印で次の写真に切り替えられるようになっています。 テキストの説明を出すことも可能。 単純に写真を出すだけでなく、アニメーションしながら大きな写真を出すというのは格好いいです。また説明文も出せますので、自分の撮った
Etch.js - コンテンツを見たままに編集するWYSIWYGエディタ MOONGIFT
最近のCMSはユーザ画面と管理画面を分けるのではなく、ユーザが見ている画面上で直接コンテンツを編集できるようにしています。その方が実際に反映された時にどのように表示されるのかが分かりやすく、管理画面にログインして修正したいコンテンツを探す必要もありません。 そんなCMSの機能を独自のWebシステムでも実装してみたいと思ったら使ってみて欲しいのがEtch.jsです。 Etch.jsの使い方 こちらが編集画面です。背景色が違う場所が編集できます。 文字をクリックするとツールバーが表示されます。 太字の装飾を消しました。 コンテンツによって使える機能を制限できます。 リストを追加しました。 Etch.jsには保存ボタンがあるので、それを押すとコンテンツをAjaxでサーバに飛ばせるようになっています。実際の保存処理などは作らないといけませんが、インライン編集機能を提供する上で使っていると便利ではな
Octicons - GitHubで使われているWebFont
他のサイトで使われているリソース、フレームワーク、画像などが気になるということはよくありますよね。そんなとき、有償のものだとちょっと高くて手が出せない場合もあります。 しかしGitHubが自社サイトで使っているアイコンリソースをOcticonsとして公開しました。これでGitHub内で気になったアイコンであればすぐに使えるようになります。 Octiconsの使い方 OcticonsはSVG、TrueTypeフォントで公開されています。そのためWebFontとしてプロジェクトに組み込めるようになっています。 16px/32pxの両方で表示できるようになっています。アイコンはユニコードとして設定されています。実際に使われているものなので、どういったアイコンがどういった意図で作られているのかも分かりやすいですね。 OcticonsはSIL Open Font Licenseのオープンソース・ソフ
WonderCMS - 大きなCMSに辟易しているなら試して欲しいDBいらずのCMS MOONGIFT
Webサイトを作る際、殆どの場合CMSが欲しくなりますよね。かといって大型なものは入れるとデザインを変更するのも大変ですし、運用も面倒です。もっとシンプルに扱えるものが欲しいと思うのではないでしょうか。 そこで試して欲しいのがWonderCMS、ごくごく小さなPHP製のCMSです。データベース不要で、手軽に使えそうです。 WonderCMSの使い方 ログインした後の画面です。ログインする前とはSettingsのバーがあるかないかくらいの違いしかありません。 Settingsをクリックすると設定メニューが表示されます。テーマの変更やサイトタイトルなどが変更できます。 ナビゲーションも動的に追加できます。 右上にTestというリンクが追加されました。クリックしてみます。 自動的にページが生成されます。この辺りはWikiっぽいですね。後はコンテンツエリアをクリックすると編集モードになります。 編
wri.pe - OSS化されたMarkdownベースのメモアプリケーション MOONGIFT
個人的にもよく使っているwri.peがオープンソース化されました！Ruby on Railsで作られており、本家はHerokuで動作しているなど自前でWebベースのメモ環境を作るのがとても手軽になりそうです。 ということで早速触ってみましょう。Web APIのトークン設定をすればすぐに動かせます。 wri.peの使い方 トップページです。見たまま本家のwri.peそっくりです。 ログインしました。早速メモを作ってみましょう。 右側にプレビューもあって分かりやすいですね。 カレンダー。メモを作った日付が分かります。 検索はSolrを使っており日本語も対応しています。 バックアップはEvernote、Dropboxにできます。 殆どの機能がJSON出力に対応していたり、iCalでの出力や多数のWeb API、OAuth対応がされているなど今風のWebサービスを作るのに参考になる点が多いと思いま
HTML5-Packer – HTML5アプリケーションを1ファイルにパッキング
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webアプリケーションはブラウザさえあればどの環境でも動かせる便利な仕組みですが、大きな欠点としてはネットワークがないといけないというのがあります。オフラインでも対応しようと思うとダウンロードと設定がとても面倒です。 その点、バイナリの実行ファイルはダウンロードしてすぐに実行できます。同じような仕組みをWebアプリケーションでも可能にするのがHTML5-Packerです。 HTML5-Packerのインストール まずはインストールします。npmでインストールできます。 $ npm install html5-packer --save-dev これで準備は完了です。 HTML5-Packerの使い方 ローカルにあるWebアプリケーションをパッキングします。この時、gruntと組み合
Iconion - 素敵なアイコン画像が簡単に作れちゃう！ MOONGIFT
これは素敵すぎる！ アイコン画像の作成は大変です。小さな画像ながら、それを見て内容が理解できないとアイコンとしての意味がありません。最近ではIconfinderのようなサイトもできていますが、色味やサイズがほんの少し合わないと言ったことも多いはずです。 そこで使ってみて欲しいのがIconionです。アイコンのピックアップと設定変更だけで簡単に素敵なアイコン集ができてしまいますよ！ Iconionの使い方 Windows版とMac OSX版がありますのでお好きな方をダウンロードし、起動しましょう。 メイン画面です。これだけでほぼ使い方が分かってしまいますよね。左側にアイコンが並んでいますので好きなものを選択しましょう。 アイコンを選択すると中央のプレビューが変わります。さらにその下にアイコンが登録されます。 色や角丸のサイズなどを自由に変更できます。 さらにスタイルを変更するとまとめて設定が
Bootflat - フラットUIで格好いいBootstrapテーマ！ MOONGIFT
創造意欲がかき立てられますよ！ Boostrap臭を嫌って導入に踏み切れないという方は多いですが、それもあって多彩なテーマが開発されています。それらと入れ替えると、イメージががらっと変わって見えるはずです。 今回は最近流行のフラットUIを取り入れたBootflatを紹介します。フラット＝角張っているというイメージも壊してくれる素敵なテーマです。 Bootflatのスクリーンショット 今回はスクリーンショット多めで紹介します。 基本カラー。パステル系ではっきりとしていますね。 まずはボタンとボタングループ。 ボタン＋ドロップダウン、ラベル、バッジ、ツールチップなど。 ドロップダウンはもちろん階層対応です。 フォーム。 フォームの横にドロップダウンを付けることもできます。何かと応用できそうですね。 アラート。 タブ。4辺全てに対応しています。 ナビゲーションバー。 パン屑、通知、プログレスバー
winsw - 任意のプログラムをWindowsのサービスに
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました これは覚えておくと便利そう！ Windowsのサービスを作ろうと思うと若干敷居が高くなります。全て自作であればまだしもダウンロードしてきたソフトウェアをサービス化するとなると大変な印象があります。 そこで使ってみたいのがwinswです。任意の実行ファイルをサービス化してくれるソフトウェアです。 winswの使い方 winswをダウンロードしてきたら、まずは実行ファイルをリネームします。名前はサービス名と同じである必要があります。例えば今回はjenkinsをサービス化するとしましょう。 その場合、winswはjenkins.exeになります。そして同じフォルダにjenkins.xmlというファイルを作成し、以下のように記述をします。 <service> <id>jenkins</id
Glyphr - ここまで出来るとは！Webベースのフォントエディタ MOONGIFT
フォントエディタとしては十分な機能ですね！ Web Fontの影響もあって、フォント自体の魅力が見直されています。特徴的なフォントはもちろん、プログラミングしやすいフォントや可読性高いフォントなど普段使いできるものを知っていると重宝するでしょう。 そんなフォントをWebベースで作成、編集できるのがGlyphrです。HTML5で作られており、自由にフォントの作成が可能になります。 Glyphrの使い方 デモが用意されていますのでそちらを見てみましょう。 トップページ。fが編集中です。 クリックで部品の端がポイント表示されます。 ドラッグで位置を変更できます。 別な要素を追加したりできます。ベジュ曲線なので綺麗に描けます。 他の文字に変更することもできます。 例えばg。 デザイナー向けツールとあって、Glyphr自体のデザインも格好いいです。使っていて手に馴染む良さがあります。これからフォント
jQuery.dotdotdot·溢れるテキストの末尾処理はこれで！ MOONGIFT
システムでHTMLを出力する場合に良くあるのが想定よりも文字数が多くて溢れてしまうケースです。スタイルシートのオーバーフローで切り捨ててしまっても良いですが、突然文字が切れてしまうのは何となく違和感があります。 そこで用いるのが一定の文字数以上の場合、…で締めるというものですが、文字数と切れる場所が常にちょうど良いとは限りません（特に日本語、英語が混ざった場合）。そこで使ってみたいのがjQuery.dotdotdotです。 jQuery.dotdotdotは指定した行数で文字数を区切ってくれます。同様のライブラリとしてはtrunk8が知られています。 左側が溢れた場合。右側はjQuery.dotdotdotによる補正後です。 …だけでなく、Read moreのように文字を指定することもできます。 HTMLにも対応しており、マークアップが適切に反映されています。単純にちょん切る訳ではありませ
jQuery Social Shares - ソーシャルサービスのカウントをまとめて取得！ MOONGIFT
シェア数大事！ 今はソーシャルサービス全盛の時代です。Facebook、Twitterはもちろんのこと、Google+やPinterestといったサービスも追いつこうとしています。さらに日本であればトラフィックを増やすためにはてなブックマークの存在は欠かせません。 そんな各ソーシャルサービスのカウント数を取得してくれるライブラリがjQuery Social Sharesです。 使い方は簡単で、JavaScriptでデータが取れる仕組みです。 var shares = new SocialShares({ success: function(data) { alert(data.count); //総シェア数 alert(data.value.facebook.count); //いいね数 alert(data.value.twitter.count); //ツイート数 alert(data
jQuery Lively Layout - サイト訪問者に強烈なインパクトを残すWebサイトアニメーション MOONGIFT
これはインパクト大！が、多用は禁物なようです。 動きのあるWebサイトは目を引きます。Flashや画像を使ったアニメーションは多いですが、jQuery Lively LayoutはさらにWebサイト自体をアニメーションさせてしまうという凄いソフトウェアです。 何はともあれまずは動画を見てもらうのが良いと思います。 ということで凄さは分かってもらえたと思いますので使い方です。まずJavaScriptファイルを読み込みます。 <script type="text/javascript" src="/path/to/jquery.js"></script> <script type="text/javascript" src="/path/to/jquery.easing.js"></script> <script type="text/javascript" src="/path/to/jqu
Free PixelKit Bootstrap UI Kits - Bootstrapを一変させるフラットUIテーマ
Bootstrapは良いのだけれど、Bootstrapっぽさが如実に感じられるのが嫌だなぁと思っているプログラマーの方は多いはず。そこで使ってみて欲しいのがFree PixelKit Bootstrap UI Kitsです。フラットなUIでがらっと雰囲気を変えてくれること請け合いです！ 見てもらうのが一番だと思うので、まずはデモサイトから。 ということで実際に細かな部品を紹介していきたいと思います。 ベースはBootstrapながら、雰囲気が一変しているのでどこにもらしさを感じさせません。この辺りのカスタマイズ性の高さがBootstrapの良さなのかも知れませんが、全体を統一してデザインするのは相当大変な労力であろうと思われます。なお一部の部品はjQueryやjQueryプラグインを利用しています。 しかしBootstrapで制作しておけば後々流行が変わったとしてもそのテーマを取り入れてサ
O/Rマッパー当たり前な時代だからこそSQLテクニックを磨こう·SQL Fiddle MOONGIFT
SQL FiddleはColdFusion製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 開発環境をセットアップするというのは意外に面倒で、せっかく学習しようと思ってもその時点で頓挫してしまいます。もしあなたがSQLを学んでみたいと思うならばSQL Fiddleを使ってみましょう。 こちらがメイン画面です。左に構造、右に実行するSQLを書きます。 実行例。結果はテーブルで下に表示されます。 SQLを変えれば実際に結果も変わります。 対応するデータベースは多様です。 SQL FiddleはJSFiddleに代表されるWebプレイグラウンドサービスで、SQLをWebブラウザ上で実行、確認ができます。最初のテーブルのCreate文からはじまり、任意のSQLを実行してその結果をテーブル表示で確認できます。MySQL/PostgreSQL/MS SQL Se
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
