Instagram.cssはインスタグラムのようなフィルターを画像に付与できるスタイルシートです。以前ご紹介したCSSフレームワークのSpectre.cssと同じ開発者の方が公開したCSSで、CSSgramからインスピレーションを得て開発したそうです。CSSgramは公開時より開発が進んでいませんのでCSSgramの後発であるInstagram.cssの方が選べるフィルターが多くなっています。使い方も簡単で、画像を包括する要素に指定のclassを与えるだけです。ライセンスはMIT。 Instagram.css

Tracyは任意の画像を解析してパスを生成、単色のSVGに変換してダウンロードできるツールです。基本的には紙で書いたものを即SVGにする、というのが目的のようです。トレースするからTracy、って事なんですかね。色の選択は可能ですが単色（モノクローム）のみで、色も形も見た目をそのまま、というものではありません。精度は思ったよりよさげでしたが、細かな部分はまだ難しいみたいです。シンプルなロゴやシンボルなら問題なさそう。精度が向上すれば、例えばロゴを紙に書いて即SVGに、といった使い方が期待できますね。テストしてませんがスマホからでもできるみたいです。何か描いて写真撮ってそのままコンバート、みたいな流れが作れると捗りそうです。 Tracy

Angled edgesは要素を斜めにカットするためのCSSライブラリです。clip-pathを使っています。class付与で上デモのように手軽に斜めにカットできます。斜めにカットしなくちゃいけないシーンは個人的に思いつきませんがなんとなくよく見かける気はしますね。 需要はさておき、clip-pathがわけあって使えない！主にIEが！って場合は代替となるか分かりませんがtransformでも一応可能です。 雑なサンプルで済みませんがclip-pathではなくtransformを使った実装例です。単純に親要素を斜めにして子だけ元の角度に戻してるだけです。親要素はpositionプロパティで位置調整しています。 clip-pathの方が当然応用しやすいので代替とは言えない方法ですが一応。 Angled edgesのライセンスはMITとなっています。 Angled edges

RestyaboardはTrelloのようなカンバンボードを実装できるオープンソースのソフトウェアです。Webサイト上でもTrelloとの特徴の比較表が作られており、ざっくりとした違いを把握できます。後発故、Restyaboardに多少利便性が高く、さらに有償カスタマイズを依頼する事でさらに機能を追加できるようになっているようです。デモを触った感じ、個人的にはTrelloよりもとっつきやすい印象は受けました。本体はOSSなので有償カスタマイズサービスを使わずとも技術のある方なら自身での拡張も可能ですね。ライセンスはOSL 3.0とのこと。 Restyaboard

Result jQuery$(function() { zoom = $('.feature').css('background-size') zoom = parseFloat(zoom) / 100 size = zoom * $('.feature').width(); $(window).on('scroll', function() { fromTop = $(window).scrollTop(); newSize = size - (fromTop / 3); if (newSize > $('.feature').width()) { $('.feature').css({ '-webkit-background-size': newSize, '-moz-background-size': newSize, '-o-background-size': newSize, '

YouPHPTubeはYoutubeやVimeoのような動画共有サイトを構築する為のソフトウェアです。名前の通りPHPで作られています。YoutubeやVimeoなどから動画をインポート→エンコード可能、FacebookやGoogleのIDでログインする事ができるとのこと。ライセンスはGPLです。オンラインデモも用意されれいますのでご興味の有る方は触ってみては如何でしょう。 YouPHPTube

画像のURLからその画像のアタッチメントIDを取得するコード。カスタムフィールドに格納した、どこにも紐付いてない画像の他のサイズのパスを取得する際にどうしても必要になった時に探してもなかなか方法が見つかりませんでしたので同じ内容で困ってる方用に。

modal-video.jsは手軽で簡単に動画をモーダルウィンドウです。jQueryに依存しています。開発元は国産CMSを開発するa-blog cmsの方。スクリプトとCSSを読み込み、任意の要素に用意されたカスタムデータ属性にYoutubeやVimeoの動画IDのを与えるだけでモーダルウィンドウで動画を表示させる事が出来ます。手軽で簡単、ドキュメントも日本語なので使いやすい印象です。ライセンスはMITとの事。 modal-video.jsOn Github

Result つい最近の案件で相談されたので、まだこういうの需要あるかもと思って書きました。 画像のみ、右クリックを防止しています。あんまり期待する効果は得られないとは思いますが・・画像を保護する目的なら最低でも透かしは必ず入れたほうが良いと思います。 jQuery$("img").on("contextmenu", function(e){ return false; });

LoadImgは画像をアップロードする前にプレビューするスクリプトです。jQueryに依存します。上デモのように<>input type=”file”で画像ファイルを選択すると、その画像がアップロードされる前に表示、ユーザーが確認出来るようにしてくれます。オプションでファイルサイズや拡張子の制限が出来るようです。ライセンスはMIT。 LoadImg

placeholder.jsはクライアントサイドでダミー画像を生成する軽量スクリプトです。jquery等の他ライブラリへの依存もなく、2kb以下と軽量なのも良いですね。表示される画像はBase64ですが生成にはcanvasを使っているようですので利用には対応したブラウザが必要になります。CDNも用意されていますのでお試しになってみては如何でしょうか。ライセンスはMITです。 placeholder.jsCDN

[instantgram]はInstagramの写真をダウンロードする為のブックマークレットです。Instagramの投稿ページでブラウザに登録した本ブックマークレットを使えば別窓で写真が表示されますので後は右クリックで保存するだけ。それ以上でも以下でもありませんが、わざわざ拡張機能を使ったりインスペクタを開く必要がないので頻繁にPCで閲覧する方には便利じゃないかなと思います。 [instantgram]

HTMLの構文チェックをその場で できるブックマークレットです。 問題箇所の数や、問題箇所もお しえてくれます。割と便利そう だったのでご紹介してみます。 HTMLのlintです。ブックマークレットを起動させてその場で解析、問題箇所も教えてくれます。 OSSとしてGithubでも公開されてますので日本語に直しての利用も出来ますね。 ↑ 起動させるとすぐに解析してくれます。 ↑ 表示されたボックス下部のView Reportに進むと個別箇所が一覧で表示され、それぞれの問題箇所を上図のようにアイコンで教えてくれます。 errorとwarningの表示/非表示のスイッチも出来ます。なかなか便利ですね。 HTML_CodeSniffer

人気のフレームワーク、Bootstrapを使う際に役立つリソースを大量に集めているWebサイト・The Big Badass Listのご紹介です。現在でも200近くのリソースがまとめられています。既に利用されている方は覗いてみては。 Twitter Bootstrapのリソースまとめサイトです。人気のフレームワークならではのリソース量ですね。 左の影マッチョが気になりますが、それくらい凄いまとめなのでしょう。現在180以上のリソースがまとめられています。 フォームとかデザインとかモックアップとかRubyやPHPにBootstrapを統合する手段とかなんでも揃ってます。 覚えておいて損は無いのでは。また、新たなリソースの情報提供も受け付けてるみたいです。以下よりご利用下さい。 The Big Badass List

JSライブラリのまとめサイトの ご紹介。既知の方も多いかもし れませんが、探すのに便利なの で改めてご紹介します。カテゴ リ分けもしてくれているので探 しやすいです。 様々なJSライブラリがまとめられています。探し物がある際は覗いてみるといいかも。 UIやメディア、グラフィック、ユーティリティなどのカテゴリに分けられています。現在は900ほどのライブラリがまとめられています。 シンプルで探しやすいのではないかと思います。ライブラリはそれぞれ簡単な説明もしてくれています。 パッと見たところ、評価の高い印象のライブラリに絞ってくれている・・・気がしました。（気がするだけかも 困ったら覗いてみようと思います。 Jster

ご連絡頂いて、良さ気だったので ご紹介。以前記事にした、テキスト の両端を揃えるタイポグラフィ系 のスクリプト・slabTextを日本語 でも利用出来るようにし、且つWP で利用出来るようにしてくれました。 今年の1月くらいにご紹介したslabTextをWPで、且つ日本語で利用出来る、というプラグインです。slabTextに関しては以前の記事をご参照下さい。 テキストのサイズを自動調整して幅一杯に広げるレスポンシブWebデザイン対応のjQueryプラグイン・SLABTEXT 過去記事でも書いたように、普通に使っても日本語環境で使うのは若干微妙でした。（単語単位で半角スペースを入れる必要があった）これをうまく解消してくれているので需要も結構あるのでは無いかなと思います。 もともと目をつけていたスクリプトだったので日本語環境で利用出来るようになったのはとても嬉しいです。スクリプトの開発者さんは

コードスニペットを共有できる Webサービスは沢山ありますが、 CSSPopはCSSを専門としたコード 共有サイトです。なかなか珍しい し、結構便利な小技も見かけま した。 CSS専門のスニペット共有サイトです。動作デモも見る事が出来ますよ。 CSSのコード共有サイト。ユーザー登録も出来ますが、しなくてもコードを書いてデモを確認する事も可能です。 Findからコードを探せます。サムネイルがあるので探しやすい。カテゴリはdiv、input、buttonなどのDOM要素で分けられています。 Createでコードを書く画面に進みます。入力項目はHTMLとCSSで、書くと同時にプレビューに繁栄されます。あとはtypeと説明を書けばOKです。 結構見ちゃいますね。数も結構揃っています。 CSSPop

今更ですけどLungo.jsを少し触って 見ました。Lungo.jsはHTML5+CSS3の スマートフォン向けフレームワーク です。jQueryやmootoolsなどを必要 としない非依存型のライブラリです ので覚えておいて損は無いかも。 スマフォ向けフレームワークです。GPLv3ライセンスでOSSとして公開されています。 スマフォ向けのフレームワークは相当出回っていますので珍しくないかもですけど・・触った感じはなかなか使いやすそうでした。コアファイルは非圧縮で40kbほど。 以下、公式サイトのサンプルです。 Sample スターターキット的にも使えそうです。 ↑ 実機でのスクリーンショット この手のは沢山あるので好みで選べばいいですね。詳細は以下でどうぞ。 Lungo.js

よく見かける、ページ遷移のない Webサイトを作る為のjQueryプラ グイン。ですが、高機能な物では なく、極めてシンプルで、ライブ ラリも軽量です。サクッと作りた い時のテンプレにもいいかも。 僕の語彙の無い説明よりサンプル見た方が早そうですね。 ※漢字も間違ってたので修正しました ページ遷移不要で、内容を書き換えた際もフラグメントURLにしてくれます。以下サンプル。 Sample コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7'></script> <script src="pagify.js" type="text/javascript"></script> jQuery本体とプラグインを読み込みます。 $(