TinyPNG API を使って PNG 画像を最適化する grunt-tinypng 使ってみた
PNG ファイルの最適化 （減色 / 圧縮） を行うオンラインツールとして TinyPNG は有名ですが、開発者向けの API も提供されています。 この TinyPNG API を使った画像の最適化を Grunt タスクとして実行できる 「grunt-tinypng」 をここのところ試していたんですが、いい感じだったので紹介。これまでは 「grunt-pngmin」 を使っていたのですが grunt-tinypng に移行して試しています。 grunt-tinypng ： marrone/GitHub TinyPNG ： Compress PNG images while preserving transparency ちなみに、TinyPNG API は処理する画像の数によって有料になりますので、その点は注意が必要です。現時点での価格設定は下記のようになっています。 Free プラン
SVG と背景色を使ってサイズやカラーが自在な汎用性のあるアイコンボタンを作る
SVG によるアイコンデータと CSS による背景色の指定を組み合わせてサイズやカラーを自在に変更可能なアイコンボタンを作るお話。あわせて主要 Web サービスのロゴデータを SVG で用意する方法や注意点なども。 透過 GIF や PNG 画像に背景色を組み合わせることでアイコンボタンのカラーバリエーションを簡単に作るっていうやり方は昔からありますが、これを SVG （Scalable Vector Graphics） でやることでサイズ変更にも対応しやすいやつを作るっていうお話。 手法的には目新しいことは何もありませんが、この前この Blog のデザインをリニューアルしたときに視覚的に左側サイドメニュー上部 （スマートフォン表示だと隠れてると思いますが） にある 「Follow」 メニュー部分で使ったので紹介。 やってることは簡単です。白抜きにしたい部分をそのまま白色、背景は透過するよ
ntpd の脆弱性に関連して、さくら VPS の設定を確認した件
ntpd の monlist 機能を悪用した DDoS 攻撃に関して JPCERT/CC から注意喚起が発表された件について、自前で契約しているさくら VPS の ntpd 設定を確認してみたお話 ntpd の monlist 機能を悪用した DDoS 攻撃に関して、1ヶ月ほど前の 1月 15日付けで JPCERT/CC から注意喚起が発表されていましたが、昨日、2月 12日付けで、さくらインターネットさんからも、本件についてユーザー向けのアナウンスが出されました。 ntpd の monlist 機能を使った DDoS 攻撃に関する注意喚起 【重要】NTPの脆弱性について ： さくらインターネット で、残念なことに JPCERT/CC からの注意喚起の際は気がついていなかったんですが、今回のさくらインターネットさんからのアナウンスで本件を認識したのと、この Blog も現在、さくらインター
Sass の基本から応用まで 1冊でわかる 「Web 制作者のための Sass の教科書」
いや、あの... もう発売から半年近く経ってて、今さら感ハンパないんですが、やっと全部読む時間が取れましたので、気にせず紹介です。もうすでに購入済みの人も多いのかもしれませんが。 Web 制作者のための Sass の教科書 - これからの Web デザインの現場で必須の CSS メタ言語 （インプレスジャパン） 「Web 制作者のための Sass の教科書」は、CSS HappyLife の平澤氏、Sou-Lablog の SOU 氏共著による SASS の導入から、制作現場で実際に使える実践的な Tips まで網羅した書籍。 個人的にはタイトルに 「教科書」 って付けるの勇気あるな...... と思いますが、その名に恥じず、Sass について入門から実践まで網羅していて、最初に手に取る書籍として文句なしにオススメできるのわかりやすさと、内容の濃さだと思います。 第4章までで基本は網羅 こ
Firefox 27 が正式リリース、all:unset で CSS のリセットが可能に
Firefox の最新版、Firefox 27 が正式リリースされ、自動更新も提供開始されました。 CSS 関連では、all プロパティと unset 値に対応し、CSS のリセットが簡単に行えるようになった他、cursor プロパティ用の -moz-grab、-moz-grabbing 接頭辞が外れました。ベンダプレフィックスなしで使用できます。 Firefox 27.0 リリースノート Firefox 27 サイト互換性情報 Firefox 27 for developers all: unset で何ができるか 仕様的には下記にあります。 3.1 Resetting All Properties: the all property ： CSS Cascading and Inheritance Level 3 The all property is a shorthand that
世界各国の地図がベクターデータでダウンロードできる 「Free Vector Maps」
すでに他でも紹介されているかもしれませんが、ちょっと便利だったので紹介。 「Free Vector Maps」 は、世界各国の地図を、ベクター形式のデータ （ダウンロードデータには .ai, .esp, .jpg, .pdf, .png が含まれています） でダウンロードできるサイト。提供されるデータは、基本的に無料で、個人 / 商用利用を問わず利用できます。 Free Vector Maps ： Royalty-Free Vector Maps Free Vector Maps is a growing library of highly detailed free* and premium royalty-free vector maps created for designers all over the world. View the Library (*Attribution r
jQuery Core 1.9 アップグレードガイド 日本語訳
ちょっと話題としては乗り遅れた感が漂いますが、先月末に jQuery 1.9 の正式版、および jQuery 2.0 のベータ版がリリースされました。 jQuery 1.9 final, jQuery 2.0 beta, Migrate final released ： Official jQuery Blog これに際して公開された、jQuery 1.9 への移行ガイド 「jQuery Core 1.9 Upgrade Guide」 を翻訳してみたので下記に公開してみます。 jQuery 1.9 / 2.0 とは？ jQuery 2.0 は IE 6/7/8 への対応をやめることで、より軽量で高速、そして安定化を目指した jQuery のメジャーバージョンアップ版ですが、jQuery 1.9 は 2.0 と 完全な互換性を持ちつつも、レガシーブラウザへの対応が可能なバージョンで、IE 8
W3C が HTML5 仕様策定完了を発表
日本時間では昨日の深夜でしたが、W3C が HTML5 （および、Canvas 2D） に関する仕様策定完了を発表いたしました。両仕様とも、勧告候補 （Candidate Recommendation） となり、実装、運用テストによる検証段階に入ります。 また、同時に HTML 5.1、HTML Canvas 2D Context, Level 2 の草稿も公開され、次バージョンの仕様策定がスタートします。この辺は以前から発表されていた予定 （こっちも参照） に則っています。 W3CがHTML5仕様策定完了を発表、相互運用性テストおよびパフォーマンス向上へ ： W3C プレスリリース なお、勧告候補になっても、以前から続いている、例えば hgroup 要素どうすんの？的な議論は継続していますが、こういう個々の機能の話が全体の仕様策定を遅延させないように、仕様をモジュール化する、拡張仕様 （
Google+ は OGP より Microdata を優先するみたい
Google+ にリンクを投稿する際、ページに指定された OGP よりも Microdata の方が優先されることで起こった問題と、その解決方法について解説します。 この Blog では、Google+ ページも運用していて、記事を更新した際にそっちにも投稿しています。 ところが、ちょっと前からリンクを投稿したときに、OGP （Open Graph Protocol） に指定した概要文 （og:description の値に入れてるテキスト） とかが無視されて、Blog 自体の概要が出ちゃって、なんでかなぁって思いながらも今度調べよってことで放置していたわけですが、さっきちょっと時間を見つけてテストしてみたら、どうも Microdata の指定の仕方でこういう現象が起こるらしいことがわかったので、共有します。 具体的にどういう現象が起こるか OGP に指定した概要文が無視される件ですが、例
NYTimes が所蔵する膨大な量の写真を Tumblr で公開
NYTimes が所蔵する膨大な量の写真を Tumblr を利用して定期的に公開していく試みが始まったようです。 How many? We don't know. Our best guess is five million to six million prints and contact sheets (each sheet, of course, representing many discrete images) and 300,000 sacks of negatives, ranging in format size from 35 millimeter to 5 by 7 inches -- at least 10 million frames in all. The picture archive also includes 13,500 DVDs, each storin
iOS Safari で border-radius : <percentage> が使えない件
いや、これは単純に私が知らなかったというか、普通に使えると思い込んでいただけなんですけどね。 前のエントリで 「HTML5 + CSS でコバトン描いてみた」 っていうお遊びを紹介したのですが、その後 iPhone / iPad で確認してみたらコバトンさんのお顔が四角い顔になっていて、そこで初めて気がつきました。結論から言ってしまえば単なる勘違いという間抜けなお話ではありますが、メモ代わりにエントリ。 2012年5月14日追記 iOS のバージョンアップで border-radius プロパティに 「%」 値が使えるようになりましたので文末に関連エントリを追加しました。 iOS で見たらこんな感じになっていました… で、冷静に考えれば、PC 版 Safari も 5.0 系 （Webkit） までは 「%」 値が使えなかったので、同じ Webkit ベースの iOS 版で使えないのは当た
Tumblr から EPUB を生成する Puble
無料ブログサービス 「Seesaaブログ」 などを運営する シーサーが、Tumblr のコンテンツを EPUB ファイルに変換するサービス 「puble（パブル）」 を公開したので早速使ってみました。puble は Tumblr アカウントを指定してあげると、そのアカウントの投稿を自動取得し、そこから選択したもの最大 50件を EPUB 形式で書き出してくれるサービスです。 無料ブログサービス 「Seesaaブログ」 などを運営する シーサーが、Tumblr のコンテンツを EPUB ファイルに変換するサービス 「puble（パブル）」 を公開したので早速使ってみました。 Tumblr から EPUB 形式のファイルを生成するサービスとしては、1年くらい前に ssig33 氏が公開した 「Tumblr 2 ePub」 があり、一部では話題になりましたが、puble もこれと同様、アカウント
Firefox 4 がサポート予定の calc() とは
Twitter でもポストしましたが、Mozilla Hacks で次期 Firefox 4 における calc() 機能の実装についてアナウンスされていました。calc() 自体は CSS3 で策定中の機能としてかなり前から存在しますが、まだサポートしているブラウザがないので、馴染みはないかもしれません。Firefox にしてもまだサポート予定の段階ですし、正式に使えるようになるのは先の話ではありますが、calc() を使うことでどんなことができるようになるのか簡単に触れてみたいと思います。 Twitter でもポストしましたが、Mozilla Hacks で次期 Firefox 4 における calc() 機能の実装についてアナウンスされていました。 calc() 自体は CSS3 で策定中の機能としてかなり前から仕様が存在しますが、まだサポートしているブラウザがないので、馴染みはない
ハンディスキャナー × Evernote がいい感じ
Evernote で名刺管理をしている方にオススメな、ハンディーワンタッチスキャナーをサンコーレアモノショップさんで見つけたのでご紹介。 以前、「個人的に使っている Web サービスまとめ」 というエントリーでも書いたのですが、かなり前から仕事とかで交換させていただいた名刺は、Evernote にデータとしてぶっ込んで管理してます。 Evernote は画像内の文字を自動認識 （残念ながら今のところ日本語はダメですが） してくれますので、こうしておくと後から名刺を検索した時でも名刺内にあるアルファベット表記の読み仮名や、メールアドレスの一部などから簡単に探し出せますし、さらにタグ付けなんかとうまく併用すれば、多くの名刺をかなり効率的に管理できます。 ※ ちなみに日本語のみの名刺の場合は、手書きでいいのでキーワードになりそうな単語を英語 （もしくはアルファベット表記） で書いておくといいです
Thunderbird 3 から Google Calendar を使う
Thunderbird 3 に対応した Lightning と Provider for Google Calendar アドオンが公開されたという話を聞いたので、早速 Thunderbird 3 に導入。その設定方法を紹介します。この2つのアドオンを使用すると Thunderbird 3 上で Google Calendar を操作できます。 個人的なスケジュール管理には Google Calendar を使用していますが、いちいちブラウザで Google Calendar にアクセスしなくても、メールソフト上でスケジュールの確認や追加ができると、「予定確認→メールで連絡」 とか、「メールで予定を調整→カレンダーに追加」 といった作業がスムーズに行えるので便利です。 私は 2年ほど前からメールソフトに Thunderbird を使用していますが、以前は Lightning と Provi
CSS3 セレクタ チートシート
以前、CSS3 セレクタをまとめたエントリーを 3回にわたって上げましたが、それらをまとめる意味で CSS3 セレクタのチートシートを作ってみました。 本当は、サンプルソースとか、セレクタに関する説明とか色々入れようと思ったんですけど、A4 サイズ 1枚にまとめるのはスペース的に不可能だったので、単純な CSS3 セレクタ一覧になっちゃいました。残念。 CSS3 セレクタチートシート （PDF） ※PDF ファイルは URI が変わる可能性がありますので、ブクマする際はできればこのエントリーにして頂いた方が安全です。 今回、チートシートのフォーマットは、Microformats Cheat Sheet を参考に作らせてもらいました。右サイドに IE7、IE6、Firefox、Opera、Safari それぞれでの各セレクタ対応状況を簡単にまとめてあります。 なお、対応状況のチェックには、c
新・100の法則、新刊プレゼント
インプレスジャパンが展開する Web クリエイティブ関連の新シリーズ、「新・100の法則。」 ですが、同シリーズ最初の書籍となった、「Web 標準 XHTML＋CSS デザイン クリエイターが身につけておくべき新・100の法則。」、及びその姉妹本、「Web ユーザビリティ・デザイン Web 制作者が身につけておくべき新・100の法則。」 に続き、シリーズ 3作目となる最新刊、「SEM : 検索連動型キーワード広告 Web 担当者が身につけておくべき新・100の法則。」 が発売されることになりました。 無事シリーズが続いて、シリーズ初刊を執筆させていただいた身としてはひと安心ですが、この新刊発売を記念して、インプレスジャパンさんでプレゼント企画がスタートしています。 「新・100の法則。」シリーズ 最新刊発刊記念プレゼント企画 ： インプレスジャパン オススメの Dコースは、「新・100の法
GRDDL で広がる XHTML の可能性
XHTML （XMLも） から XSLT （じゃなくてもいいんだけど） によって汎用的にメタデータを抽出するための仕様、GRDDL （Gleaning Resource Descriptions from Dialects of Languages） が 11日に W3C 勧告として公開されました。同時に W3C のプレスリリースにも GRDDL についての発表がされています。 GRDDL の公開について (W3C 勧告) ： W3C プレスリリース（日本語） 基本的に (X)HTML は人間様向けの言語であって、アプリケーション等、機械から利用するには微妙な存在。機械向けのメタデータを提供する手段としては RDF （Resource Description Framework） が存在するわけですが、人間向け、機械向け別々のデータが必要な場合、今までは両方とも制作者が用意するのが普通だっ
12 のレイアウトを切替可能なテンプレート
1つのテンプレートで 12度おいしい XHTML + CSS テンプレートを公開してみたいと思います。といっても、ごく普通のテンプレートに CSS 切り替え機能を付けただけなんですが、Blog や Webサイトを作られる際のベースとして役立てて頂けたらうれしいです。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら （zip ファイル / 50KB） 8/10 追記 初期に配布したテンプレート内に、結構な量の誤字等がありましたので、現在の最新版を下記からダウンロードしてください。 では使い方などの説明を。 ファイルをダウンロードして解凍すると下記のようなフォルダ構成になっています。 index.html （XHTML テンプレート） css （CSS ファイル格納フォルダ） img （画像ファイル格納フォルダ） js （JavaScript ファイル格納フォルダ） 基本的に
CSS セレクタに関するおさらい | WWW WATCH
CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X... CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X)HTML、CSS コーディングを行う上で、セレクタを理解しているとそうでないのでは生産性に差が出ます。 CSS3 は現在 Working Draft の段階ですので、まだ正式な勧告はなされていませんが、多くのモダンブラウザにおいてそのほとんどが先行実装されていることから、現状でも利用価値が高いといえます。 ということで、ここでは自分へのメモの意味も込めて、CSS3 で定義されているものも含めた各 CSS セレクタについてリファレンスしてみようと思います。 今回の解説
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
