DYNATABLEはJSONデータからtableを生成するjQueryプラグインです。目的はシンプルですが、仕様を見る限りでは結構高性能のようですね。同じようなスクリプトは既にありますが、JSONデータのテーブル化は出来ると便利なのでこういったライブラリを覚えておいて損はなさそうです。 DYNATABLE

FontPunk.comは、フォントファイルをアップロードして、アウトラインや太さを調節し、別のフォントとしてDL出来る、というWebサービスです。加工は斜めにしたり3D化したりと様々。まだ細かい加工は出来ませんが、なかなか面白い試みですね。尚、アップロードするフォントのライセンスにはご注意下さい。 FontPunk.com

なかなか便利そうだったのでメモがてらご紹介。コーディング不要のプロトタイピングツールです。Dropboxに保管してある画像データやPSDから簡単に作成する事ができます。 手軽にプロトタイプを作れるWebツールです。試してないですけどタッチデバイスにも対応しているみたい。 手軽にプロトタイプを作成出来る、というもの。Dropboxのアカウントが必要になります。 使い方 ↑ まずはDropboxのアカウントでログインします。ログインしたら、まずプロジェクト名を決定。 ↑ Dropboxから画像を複数読み込み、Editで編集します。 ↑ 編集画面です。画像内でボタンにしたい範囲をドラッグで決め、ボタンクリック後の移動先とエフェクトを下部から選択します。ボタンは一つの画像内に複数つけられます。 ↑ Previewでボタンの動作を確認します。問題なければURLを、プロトタイプを見せる必要がある方に教

GistoはGistのコードスニペットを管理するためのソフトウェアです。Gistoでコードを変更するだけで自動的にGist上のコードも更新されます。OSもWin、Mac、Linuxに対応しています。手軽に使えるのでスニペットの管理に良さそう。 Gisto

ファビコンに更新通知の数字バッジ等をアニメーション付きで表示させるスクリプト・favico.jsのご紹介です。メールやソーシャルサイトなどで最近よく見かける、ファビコン通知バッジを実装します。 メールを受信したり、投稿があったらファビコンに数字を表示させる、というもの。アニメーションエフェクトもあるので目が行きやすいかも。対応ブラウザは若干限られます。 更新があると数値が増える。増える時にアニメーションで数値が変わる、みたいなの。動作デモはスクリプトの配布サイトで確認出来ます。 var favicon=new Favico({ animation:'slide' //アニメーションエフェクトの指定 }); favicon.badge(1);エフェクトは上記のようにセッティングします。 var favicon=new Favico({ bgColor : '#5CB85C',//背景色 te

ちょっと調べ物をしたのでメモ。 画像1枚だけで、グレースケール、 マウスホバーでカラー画像に、 みたいなのを実装したい、出来れ ばJavaScriptも使用せず、みたい な内容です。 2枚用意しろよと言われたら実も蓋もないんですけど、画像1枚だけでグレースケール⇔カラー画像を実装したい。画像の数は半分で済むし、加工の時間も不要になるのは大きなメリットです。 1年前に同じ事をunformedbuilding（アップデート版もありました）さんがやってますので合わせてどうぞ。 Sample マウス乗せるとカラーになる、という良くあるホバーエフェクトですが、極力無駄を省きたい。画像が1枚で済めば、20枚必要なところが10枚で済むし、画像が追加されても加工したり、マークアップしなおしたりファイルをアップロードする必要がなくなります。 IE IEはfilterプロパティ使えばいいですね。 img{ f

ブラウザでCSSやJavaScriptのファイルを見たときにソースを自動整形して表示するChromeエクステンション・PrettyPrintのご紹介。地味に便利・・かも。 ブラウザでCSSやJSファイルを見たときにソースをインデントするエクステンションです。便利っちゃ便利かも。

checkboxesとradioボタンをスタイリングするjQueryのプラグインです。カスタマイズ性に優れており、使い方も手軽そうだったので備忘録的にご紹介します。 よくあるプラグインですけど、使いやすそうだったのでメモ。 checkboxesとradioボタンをスタイリングするライブラリ。IE7にも対応しています。 かわいい。 スタイルは最初からいろいろと用意されていますのでカスタマイズの参考にもなりますね。 コード <script src="jquery.js"></script> <script src="jquery.icheck.js"></script> コアとプラグインを読み込みます。 $('input').icheck(); 初期化します。 $('input').icheck({ handle: '', // 'checkbox'か'radio'とすればどちらかに限定できる

無料で使えるアイコンフォントの ホスティングサービスのご紹介。 Google Web Fontsのような形を 目指しているとの事なので応援も 兼ねてご紹介します。 アイコンフォントに関しては賛否ありますし、僕も現状は推奨するものでも無いとは思いますが、まったく利用シーンが無いわけではないのでプロジェクト自体は高く評価したいところです。 便利なGoogle Web Fontsのようにアイコンフォントを利用出来るサービス。オープンソースプロジェクトとして、GitHubでも公開されています。 使い方は難しくないので割愛します（面倒なだけ） どこかで使って見たい・・以下よりどうぞ。 We Love Icon Fonts ご挨拶 さて、今年の記事はこれで最後です。来年は5日くらいから始めようかなと思います。 今年は大変お世話になりました。来年も宜しくお願い致します。 では、良いお年をー

好みのシンプルなWPテーマがあった のでメモ。レスポンシブにも対応 しています。文章が読みやすいデザ インなのでこのまま個人用のブログ に使おうかなと。選択肢が沢山ある のもWPの魅力ですよね。 シンプルな1カラムのテーマです。ブログ向けっぽい感じ。 分かりやすくて読みやすい、好みのレイアウトでした。一応レスポンシブWebデザイン対応です。 スマフォだとこんな感じ。 個人的には信頼してるデベロッパーさん作のテーマですけど、コードは必ず確認してくださいね。公式サイト以外の配布テーマを使う際は自己責任でご利用下さいませ。 Solar Theme

CSS3で～を作った！という類の ものはかなり見かけていました が、今度はbox-shadowだけで 名画モナリザを描いた方が出て 来ました・・・熱意が凄いです。 役に立つかどうかは置いておいて。 今朝見かけたので記事差し替えてご紹介。CSS3のbox-shadowだけでモナリザを描いた鬼才が現れたようです・・tableで絵を描いてる方も以前見かけましたが、こちらのモナリザも劣らず凄い。 CSSモナリザ CSSの記述が多いためか、僕の環境ではCSSのタブを開くとブラウザがフリーズしてしまいました。コードは元サイトでご覧頂くといいかもです。 しかし良く思いつきましたね・・・思いついても普通やらないでしょうしｗ 熱意に感動してのご紹介でした。 (via:Hacker News)

サイズの異なるボックスを綺麗 に配置してくれるスクリプト、 MasonryっぽいjQueryプラグイン、 Freetile.jsです。似たような スクリプトは結構ありますので 参考までに。 よく見かける、異なるボックスを綺麗に並べるスクリプトです。Masonryっぽいやつ。 こういうやつです。ウィンドウサイズが変わってもボックスを再配置してくれます。 $('#foo').freetile(); 本体とプラグインを読み込んでセレクタ指定します。アニメーションオプション等もありました。 ライセンスはBSDです。手抜きな記事ですけどちょい忙しいので今日はこれにて。 Freetile.js

土曜日なので軽い話題。天気 アイコン型のWebフォントです。 スマートフォンのアプリ向け に作られたみたいです。見た目 が可愛いのでアプリ以外にも 何かに利用したいですね。 天気アイコンフォント、というニッチなニーズに応えたフリーフォントです。スマフォのアプリなんかに良さそうな感じ。Webフォントにも利用できますが、PSDやEPSも用意されています。 可愛らしい天気アイコンです。UNIQLO CALENDARにも似たようなテイストのアイコンが使われていましたね。 結構揃ってます。 フォトショやイラレで使えるデータもあります。 商用でも使っていいみたいですけど直に販売したりするのはやめてくれ、との事です。下部に規約あるので目を通してくださいませ。 Climacons Font

結構前からあるみたいですけど、 ちょっといいアイデアだなって 思ったのでシェア。防犯グッズ に見えないネコ型のキーホルダー です。こういうアイデアは広め たいですねー。 一見防犯グッズに見えないネコ型の防犯キーホルダーです。 Kitty Keychain Self-Defense Device 使い方は大体想像出来ますかね・・ こう使う。耳が武器になるんですね・・・ネコに限らず同じアイデアで別のものも作れそうです。ただ、プラスチックとはいえ、刃の部分がむき出しなので扱いに気をつけないとですかね。 一見防犯グッズには見えないと思いますが、見えたほうが防犯効果あるのかな？・・・と一瞬思ったんですが、露骨に防犯グッズを携帯しているのが見えたら見えたで警戒して襲われたりするのかな。犯罪心理的にどうなんでしょうね・・ それはそうと、もう少し可愛いといいんですが安い(500円くらい)のでこんなものでし

土曜日なのでちょっとしたネタでも。 一輪しかないバイク・・・マンガや 合成では見たことありますけど、実際 に製造して販売しているのは始めて 見ました。なんというか、需要がある か別にして実際に作っちゃうのが いいですね。 普通に危ないから作らない、って思ってましたけどうまくバランス取れるようにして速度も出ないようになってるみたいですね・・・ RYNO Motors これは実際に使ってるところ。こういうシュールなものに弱いです。見た感じですけど、電気で走るのかな？座れるセグウェイ的な・・ なんというか、半分に切ってみた的な安直感を抱かずにはいられませんね・・・コンパクトで環境にも優しいのかもしれない。でもちょっと危ないですよね・・バランスうまく取れるんだろうか。 小売価格は4500USDを予定してるそうです。結構高い・・ｗ2013年後半くらいからヨーロッパ展開するそうですよ。一応製品化は出来

結構良かったのでご紹介。ECサイトとか で見かける、マウス乗せると画像が拡大 するやつです。拡大鏡とか言えばいいん でしょうか？ニーズはそこそこありそう ですし、かなり軽量で導入も簡単なので 覚えておくと工数減らせるかもですね。 いわゆるルーペ的なものを作れるライブラリで、プラグイン名もまんま「ルーペ」です。2KBとかなり軽量で、圧縮すると1KBちょっと。導入するとクライアントさんもユーザーさんも喜びそうですし、うまく使えばプロダクトの訴求力も上げられるのではないでしょうか。 こういうやつ。個人的にはこれ付けてくれるとかなり購買意欲湧きます。ECサイトでは現物見れないので写真は大事ですね。 オークションなんかは傷や汚れの関係でトラブルになりやすいので導入してくれるといいんですけどねー。 因みに周りにテキストがあってもそれは拡大しないです。 やっぱりjQuery。IE6でも大丈夫。やっぱりイ

テキストの幅にあわせてテキストの サイズを自動調整してくれる、という jQueryプラグイン。Fittextという、 同じようなライブラリがあるんですが、 このライブラリに影響を受けている みたいです。 ボックスの幅一杯に広がり、それに応じてフォントサイズも調整しますので、ダイナミックな表現が可能ですね。レスポンシブWebデザインとも相性の良いライブラリです。 英語だと素敵に見えますね。こんな感じでボックス内の幅一杯にピッタリ合うようにテキストサイズを調整してくれます。なのでレスポンシブWebデザインにも対応できる、という事になります。 少々問題もありますが、日本語でも使えます。というわけで手抜きですけどデモをどうぞ。 Sample iPhoneとかIE iPhoneでもうまく動作してくれます・・けどもっとちゃんと作ればよかったｗ ↓ IEでもOKでした。 ↓ コード <script sr

iPhoneやiPadなどのホーム画面に表示 させるアイコンを作るためのPhotoshop 用テンプレート・App Icon Template をご紹介。そんなに多用するものじゃ 無いと思うんですけど、便利っちゃ 便利でした。 iOSのホーム画面向けのアイコン用テンプレ。スマートオブジェクトでフレームの変更・追加も容易に出来ます。 iPadやiPhoneなどのアイコン生成用のテンプレートです。フレームみたいなもんですかね。デザインの変更はスマートオブジェクトを利用します。 使ってみた ↑ 上記赤枠がスマートオブジェクトなので開きます。 ↑ 何種類かある中からフレームを決めてスマートオブジェクトを保存すればメインファイルに反映されます。 ↑ インセットも出来るよ。 ↑ テクスチャ追加してみた。スマートオブジェクト側にテクスチャを増やせばテンプレ量産出来ますね。 枠を作ってくれてるので効率的に

なかなか良さそうだったので備忘録。iOSやAndroidなど、スマートフォンでのHTML5環境に合わせて作られた軽量モバイルフレームワークです。jQuery互換なので慣れてる方は使い方もすぐに覚えられると思います。特に軽量なのが嬉しいですね。 現状、jQueryを使うのであればスマートフォンにはjQuery Mobileという選択肢となりますが、やはりファイルサイズが気になります。そこで、jQueryをなんとか軽量に使おう、という動きが少し目立ってきました。 例えばzepto.js。がそうですし、jquipという、目的に合わせてjQueryを細分、モジュール化するライブラリなどもあります。 jQ.Mobiもその一つで、jQueryっぽく使えるHTML5環境のスマートフォン向け軽量ライブラリです。 用途を絞ることで軽量化できる、って事ですかね？こういう動きは個人的に歓迎ですけど、問題は派生ラ