slick - もうこれで十分！なカルーセルライブラリ MOONGIFT
画像をスライドで切り替えていくカルーセル機能は数多くのWebサイトで実装されています。サイトの機能を紹介するのに使ったり、ギャラリーとして画像を切り替えるのにも使えます。アイディア次第で使いところが多い機能です。 便利さゆえに多数のライブラリが出てきていますが、もうこれで十分ではないかと思わせるのがslickです。多彩な機能を揃え、オプションも豊富なカルーセルライブラリです。 slickの使い方 まずはサンプルと一緒に。これが一番ベーシックな使い方です。 $("target").slick() で実現されます。 レスポンシブにも対応しています。 フリック操作で切り替えも可能です。 複数のスライドを同時に見せることもできます。 画像読み込みを遅延させることもできます。 左右からの表示だけでなくフェードインなどのアニメーションもできます。 スライドを追加したり削除するのも自由です。 スライドを
使えるWebサービス・オープンソース（27）·類自画像検索 MOONGIFT
今回のテーマは類似画像検索です。スマートフォンが流行るのにつれて、写真コンテンツは爆発的に増えています。テキストよりも画像の方が役立つケースも多く、写真コンテンツは今後も増え続けるでしょう。 そこで求められるのは従来のテキスト検索ではない情報提供方法です。その一つ、画像を検索するための技術である類似画像検索を取り上げてみたいと思います。 VisualSeeker - Yahoo!ラボ Yahoo! Japanの実験的プロダクトのサービスです。空間に漂っている画像をクリックし、その類似画像を検索します。ドリルダウンしながら辿っていくので、新しい画像に出会えるかも知れません。精度としては全く同じ画像を並べるのではなく、そこから連想される似たような画像を出すと言った仕組みになっているようです。 TinEye Reverse Image Search 画像またはURLを指定して類似画像を検索できま
AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT
これで十分でしょ！ Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも！ アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で
Bootflat - フラットUIで格好いいBootstrapテーマ！ MOONGIFT
創造意欲がかき立てられますよ！ Boostrap臭を嫌って導入に踏み切れないという方は多いですが、それもあって多彩なテーマが開発されています。それらと入れ替えると、イメージががらっと変わって見えるはずです。 今回は最近流行のフラットUIを取り入れたBootflatを紹介します。フラット＝角張っているというイメージも壊してくれる素敵なテーマです。 Bootflatのスクリーンショット 今回はスクリーンショット多めで紹介します。 基本カラー。パステル系ではっきりとしていますね。 まずはボタンとボタングループ。 ボタン＋ドロップダウン、ラベル、バッジ、ツールチップなど。 ドロップダウンはもちろん階層対応です。 フォーム。 フォームの横にドロップダウンを付けることもできます。何かと応用できそうですね。 アラート。 タブ。4辺全てに対応しています。 ナビゲーションバー。 パン屑、通知、プログレスバー
これは凄い！RubyでPhotoshopファイルを解析·PSD.rb MOONGIFT
PSD.rbはRuby製のオープンソース・ソフトウェア（MIT License）です。 Webやアプリのデザインの際にPhotoshopを使う事がよくあります。そんな時に出来上がった画像を分析してコーディングに落とし込んだりします。それの自動化さえできるようになるのではないかというライブラリがPSD.rbです。 インストールはRubygemsで行えます。 適当なPSDファイルを読み込んでparse!を実行します。trueが返ってくれば解析完了です。処理はファイルサイズにもよりますが結構重たいです。 treeで木構造を出力します。こちらもファイルが大きければ膨大になります。 PSD.rbでは構造、サイズ、レイヤー/フォルダサイズと名前、フォントデータ、カラーモード、ベクターマスク、フラットな画像データなどが読み取れます。Photoshopのファイルを使ったサービスが捗りそうです。 MOONG
Torrentクライアントいらず。Google ChromeでTorrentネットワークからダウンロード·OneClick MOONGIFT
OneClickはGoogle ChromeにTorrentのダウンロード機能を加えるGoogle Chrome機能拡張です。 日本ではP2Pに対するイメージの悪さからかなかなか普及しないTorrent。ダウンロード技術としてみると分散処理による速度向上は見逃せません。しかし専用クライアントを用意するのが面倒でした。そこで使ってみたいのがOneClick、Google Chrome機能拡張のTorrentダウンローダーです。 Google Chrome機能拡張がダウンロードできるようになっていますが、筆者が確認した時にはJSONのエラーでした。ソースからJSONを修正してインストールできます。 インストールします。 Torrentファイルをダウンロード後、一気に複数ファイルがダウンロード開始します。Torrentクライアントは不要です。 OneClickは普通にTorrentファイルをダウ
Rails開発を補助するGoogle Chrome機能拡張·RailsPanel MOONGIFT
RailsPanelはGoogle ChromeのインスペクタにRails用パネルを追加するソフトウェアです。 Ruby on Railsは開発速度を飛躍的に向上してくれますが、サーバサイドのログとWebブラウザでの表示を交互に確認するのは面倒に感じていました。そこで使ってみたいのがRailsPanelです。 Google Chrome機能拡張をインストールします。別途Rails側でのライブラリインストールも必要です。 サンプルです。インスペクタにRailsPanelが追加されています。 実行されたSQLも確認できます。 レンダリングに使われたファイルも確認できます。MacVimなどであればここからクリックして開けます。 設定です。TextMate、MacVimが対応に上がっています。 RailsPanelを使えば実行されたアクション、使われたテンプレート、実行されたSQLが一目で確認でき
潜むセキュリティ問題を事前に暴きだす·Rails Brakeman MOONGIFT
Rails BrakemanはRailsアプリケーションのリポジトリを読み込んでセキュリティチェックしてくれるサービスです。 セキュアなプログラミングをするためのノウハウは幾つかあります。つまりそれに沿って現状のコードを確認すれば、万一のセキュリティインシデントを未然に防げるかも知れません。Railsアプリケーションについてそれを行うのがRails Brakemanです。 プロジェクト詳細。こうやって一覧で確認できます。 セキュリティウォーニング、モデル、ビューのセキュリティウォーニングが出ています。 クロスサイトスクリプティング関係のウォーニングが多いです。 クリックするとどの行における警告か確認できます。 Rails Brakemanでは盲目的にパラメータを放り込んだり、その結果をそのままリダイレクトに使ったりすることを禁じています。なおこのチェックはバグを発見している訳ではなく、セキ
業務で使えるオープンソース（49）·リコメンドエンジン MOONGIFT
特集「オープンソース×10年」 予算ゼロからのIT環境整備2014/01/30 特別寄稿：センチメンタル・ジャーニー ~OSSはまだ16だから~2014/01/30 EC-CUBE – オープンソース・Eコマースの雄の進化を見る！2014/01/30 Zabbix Japanに聞いたオープンソース×ビジネスを成功させるための3つの基本2014/01/30 MOONGIFTの運営で大事にしている3つのこと2014/01/30 2007〜8年の大きな変動まとめ！2014/01/30 なぜプレミアム？そこから得られた経験教えます2014/01/30 2006〜09年、各年の人気オープンソース・ソフトウェアベスト52014/01/30 狙われやすいサイトはどんなサイト？オープンソース×セキュリティについてペンタセキュリティシステムズに聞く2014/01/30 aegifが考える企業でOSSを開発す
まるで魔法。GitリポジトリをHerokuに直接デプロイ·Heroku Installer MOONGIFT
Heroku InstallerはGitリポジトリを指定してHerokuへの新規インスタンス立ち上げからデプロイまで自動化してくれるソフトウェアです。 ローカルで動作するソフトウェアはバイナリの配布ができるのでダウンロードしてすぐに試せます。Webアプリケーションの場合、サーバのセットアップからアップロードなど様々な手順を踏まなければなりません。しかしHeroku Installerを使えば魔法のように簡単にサーバのセットアップが完了してしまいます。 メイン画面です。アプリケーション名とHerokuのAPIキーを設定します。 自動的にダウンロードやデプロイが行われます。 完了しました！バックグラウンドでタブが開いています。 おおー。見事に立ち上がりました。 Heroku InstallerはHerokuのAPIを使い、指定したGitリポジトリからソースコードを取り込み、Heroku上に新し
こんな手が…。Dropbox上で動的システムを動かす「Drapache」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
DrapacheはDropbox内のファイルを読み込んで動的に動かすWebサーバです。 DropboxではPublicに入れたファイルをHTTPを通じて読み込めるようにしています。この機能を使って静的なWebサイトを提供している人もいます。しかしそれで十分ではありません。時代は動的システム、Dropbox内のファイルを動的システムに対応させるソフトウェアがDrapacheです。 まずドメインを取ります。 次にDropboxをコネクトします。 接続を許可します。 完了です。そうするとアプリフォルダの中にDrapacheフォルダができあがります。 ファイル構成はこんな感じです。 サンプルのスクリプトです。確かに動的ファイルが動いています。 動的です。もちろん修正すれば若干のタイムラグはあれど反映されます。 Drapacheの仕組みとしては登録したユーザのデータを読み込み、DrapacheがWe
Webプログラマ必見。HTML5のセキュリティチートシート·HTML5 Security Cheatsheet MOONGIFT
HTML5 Security CheatsheetはHTML5のセキュリティに関するチートシートです。問題点と対象Webブラウザ、対処法が一覧になっています。 HTML5 Security CheatsheetはHTML5におけるセキュリティホールになりえる問題点をコードを通じて広めていこうというプロジェクトです。Webプログラマ必見と言えるでしょう。 トップページです。様々な項目が並んでいます。 左側は各セキュリティチェックすべき項目で、対象になるWebブラウザとそのバージョンが並んでいます。問題点の提示とともに、その回避策についても書かれていますのでとても参考になります。 まだ日本語化されていない部分もあります。 ほぼ全てのWebブラウザが対象になる部分もあるようです。 項目は非常に多いですが、セキュリティを重視するためにもチェックしておくべきです。 HTML5ではありますがIE6など
Tumblrのテーマをローカルでさくさく作り上げる·Fumblr MOONGIFT
FumblrはTumblrのテーマをローカルで作成できるようにするソフトウェアです。 Tumblrにはデザインをカスタマイズする機能がありますが、オンラインで行うには色々修正した後、確認して…という作業を繰り返す必要があります。そこでFumblrを使ってももっと効率的にTumblrのテーマを作成してみましょう。 インストールします。必要なライブラリはbundleでインストールできます。 インストール中です。 起動しました。まんま、Tumblrのデザインです。 Fumblrは独自のWebサーバを起動するのでWebブラウザで結果を確認しつつ、CSS/JavaScript/画像を配置してデザインを作っていけます。CSSはSassやCompassに対応しています。さらにインポートコマンドによって既存のTumblrコンテンツを取り込んだ上でデザインを行うこともできます。 FumblrはRuby製、M
高度な表現力を実現したJavaScriptフレームワーク·toxiclibs.js MOONGIFT
toxiclibs.jsはtoxiclibsをJavaScriptにポーティングするプロジェクトです。 コンピュータでプログラミングされたデザインを描き出すフレームワークにProcessingを用いたtoxiclibsがあります。それはJavaで開発されているのですが、何とJavaScriptにポートしたプロジェクトが登場しました。それがtoxiclibs.jsです。 デモを実際に試した動画です。以下はそれらの解説です。 こんな感じにボールが舞い降りてきます。 マウスの動作に追従して円の大きさが変化します。 マウスを動かすと色が変化します。 鎖を引っ張って動かします。 クリックするとアニメーションしながら一直線になります。 マウスの動きで変化します。 渦巻き模様がマウスの動きで大きくなったり小さくなったりします。 マウスで適当に引いたラインがスムーズに描かれます。 クリックする度に三角形が
試そう！ターミナル上でカラーのグラフを描く·term-canvas MOONGIFT
term-canvasはターミナル上でCanvasを使ってグラフや図形を描画するソフトウェアです。 コンソールで表現できるのは白と黒、できてもANSIカラーレベルのテキスト描画と思われてきました。しかしそんな現状を一気に打ち破ってしまうのがterm-canvasです。なんとターミナル上でCanvasを使った図形描画を行います。 サンプルを実行しました。ターミナル上にグラフが描かれます。なんという違和感。 アニメーションするグラフも描けます。 キーボード操作で左右に動くグラフも作れます。 線を引くデモです。 四角を何重にも描くデモです。 四角を描画しています。 上の四角を描くデモのコードです。色と描画場所を決めるだけのシンプルさです。 自動で更新されるのはsetIntervalで制御しています。 term-canvasを使うとMac OSXのターミナル上でCanvasを使ってグラフや図形を描
面白い！JavaScript+Canvasによる画像差分表示·JS-ImageDiff MOONGIFT
JS-ImageDiffはJavaScript+Canvasタグを使って二つの画像の差分表示を行うライブラリです。 GitHubでは差分をWebブラウザ上で閲覧できますが、その時に画像の差分表示も行えるのを知っているでしょうか。スライダーで動かしたりして差分を確認できるのですが、その一つの差分表示をオープンソースで再現するのがJS-ImageDiffです。 サンプルです。上が元、中間が変換後そして下が差分となります。どこが違うのか一目で分かります。 左が影無し、右が影ありです。一致している部分だけが表示されています。 サイズが違う場合の差分表示です。 JS-ImageDiffはCanvasタグを使って画像を読み込み、その差分を表示しています。各ピクセル単位で画像を比較して同じであれば黒、違う場合はうまく表示するというやり方でここまで見事に表示できるのが面白いですね。 JS-ImageDif
Webブラウザ上でviクローンを実現·Web vi MOONGIFT
Web viはCanvasタグを使ったWebブラウザ上で動作するviクローン。 Web viはHTML5/JavaScript製のオープンソース・ソフトウェア。Webブラウザ上で動作する高機能なテキストエディタが出てきて欲しい、それは皆が願っていることではないだろうか。Webブラウザでもっと自在にテキストが書けるようになれば、Webアプリケーションの可能性を飛躍的に向上させられる。 実行中 そのためにはまずITリテラシーの高い人たちが好んで使うような環境をWeb上に用意しなければならない。ITリテラシーの高い層といえばプログラマー、プログラマーの好きなエディタと言えばvi、そこで作られたのがWeb viだ。 Web viはその名の通りWebブラウザ上で動作するviだ。変わっているのはCanvasエレメントを使って動作している点だ。そのためか日本語の入力には対応していない。カーソル移動はもち
一つのコードから各Webブラウザに対応した機能拡張（アドオン）を生成·Kango MOONGIFT
Kangoは多数のWebブラウザに対応したWebブラウザ機能拡張（アドオン）フレームワーク。 KangoはPython製、Google Chrome/Safari/IE/Firefox/Opera用のフリーウェア（ライセンスは独自）。スマートフォンの世界が広がるにつれて、iOSではObjective-C、AndroidではJavaと言語を選択するのに苦痛を覚えるようになった。そのためTitaniumのような統一言語のフレームワークに注目が集まる。 サンプルをGoogle Chromeで実行 同様のことがWebブラウザでも起こっている。IEのシェアは低下しつつもまだまだ高く、さらにFirefox、Google Chrome、Safari、OperaといったWebブラウザが存在する。これら全てに機能拡張を提供するのはとても大変なことだ。そこで注目したいのがKangoだ。 Kangoは一つのコー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptに便利なメソッドを盛り込んだライブラリ·mofmof.js MOONGIFT
秋と言えばスポーツ。健康を維持するための11のソフトウェア&最近の話題 MOONGIFT