SVGのフィード・アイコン
背景を完全に透明にして白い丸と円弧の部分だけのフィード・アイコンを作ってみました(上の画像は背景がオレンジ色になっていますが、CSSで背景色を指定しているだけです)。Wikimedia CommonsにあるSVGアイコンをエディタでいじっただけですけどね。SVGファイルのソースにコメントとして書いてあるように元ファイルと同じくMPL/GPL/LGPLのトリプル・ライセンスです。 Demo: SVG Feed Icon SVGファイルのソースはデモ・ページの最後に載せてあるのでそれをHTMLファイルにコピペしても良いですし、普通にドラッグ・アンド・ドロップや右クリックで保存してimg要素で参照しても良いでしょう。このページやデモ・ページではData URIスキーム化したものを直接使っています。500バイト強の小さなものなのでData URIスキーム化して使うのが良いと思います。 アイコンの丸
Bashmarks
ちょっと前からBashにブックマーク機能を持たせるシェルスクリプト、Bashmarksを使ってます。bookmarkでカレント・ディレクトリをブックマークして、いつでもgoで移動できるようになるというただそれだけのものですけど、結構便利に使ってます。補完もあるのでブックマーク名忘れても安心です！ インストールは適当な場所に保存して、~/.bashrcでsourceするだけです。 source ~/bin/bashmarks.sh ブックマークするのはbookmarkコマンドです。 $ bookmark foo これでカレント・ディレクトリがfooという名前でブックマークされます。入力のしやすさを考慮して小文字でブックマークすると良さそうです。 $ go foo とするといつでも移動できるようになります。 $ bookmarksshow でブックマークの一覧が参照できますが、goコマンドには
mit-license.org
Open Source InitiativeのMITライセンスのページのURLを使ってMITライセンスと明示している人は結構多いと思います。ライセンス全文コピペするの面倒ですしね……。ただその場合は権利者の名前等を予め書き、ライセンス条項については以下のURLを参照……などと注意書きも含めた方が無難です。そういうのを「忘れるし！ 面倒だし！」と思ったRemy Sharpがmit-license.orgというウェブサービスを作ってくれました。 登録するとユーザー名をサブドメインとしたURLが確保されます。例えば僕の場合はhail2u.mit-license.orgです。このページを見るとわかるように権利者の名前と発行年、オプションとしてWebサイトのURLにリンクを張れたりもします。 curlでJSONを送りつけるという方法でも登録できるみたいですが、JSONファイルの登録とバッティングした
CSSでモーダル・ウィンドウ
pointer-eventsプロパティでnoneを指定すると最前面に置いた要素を無視して普通にページ操作が可能になります。なので、そういう風にしておいた要素をopacityプロパティで非表示にしておけば、普段は見えないけど特定の操作で最前面に飛び出すモーダル・ウィンドウとかも簡単に出来ます。pointer-eventsプロパティってこういう使い方するためにあるの？ Demo: Pure CSS Modal Window .window { opacity: 0; pointer-events: none; } で、見えない・操作できないウィンドウが作れるので、:target擬似クラスで表示の切替を行えばOKです。 .window:target { opacity: 1; pointer-events: auto; } 簡単！ デモのようにposition: fixed;とかしておくとよりら
hAtomに対応した
フィードの将来を模索してるとやはりhAtomは避けて通れないかなーという感じなので、今更ながら対応した。blosxomのビルトイン変数とフレーバーで実現できるのでそんなに面倒でもない。 <div class="hentry" id="$fn"> <h3 class="entry-title"><a rel="bookmark" href="$url$path/$fn.$default_flavour">$title</a></h3> <div class="entry-content">$body</div> <p> Posted on <abbr class="published" title="$yr-$mo_num-$da6$ti:00+09:00">$da $mo, $yr</abbr> in <a rel="tag" href="$url$path/">$path</a>
lorempixel
簡単なクエリー・パラメーターで好きなサイズのランダムな画像を返してくれるlorempixelというウェブサービスを見つけた。主にウェブサイトのプロトタイピングに使うことになると思う。多少遅い気もするが、それに目をつぶってでも使いたくなる簡便さ。 クエリーは非常に簡単で、横320px・縦180pxのランダムな画像が欲しいなら以下のようにする。 http://lorempixel.com/320/180/ このエントリの最初の画像はこのクエリーでリクエストしたもの。指定できる縦横のサイズは最大1920pxまでのようだ。縦横のサイズ以外にもいくつかパラメーターがあり、 http://lorempixel.com/320/180/abstract/ とテーマ名を最後に付けると、 テーマで絞り込みができる。 http://lorempixel.com/g/320/180/ 縦横サイズの前にgを挟むと
CSS Color Keywords
CSSでは色の値として#RRGGBBやrgb(r, g, b)等の他にキーワードでも指定できる。CSS3では大幅に拡充され、140種類のキーワードのサポートが明記された。今まであまり使ったことがなかった上に、英語力の欠如からDarkOrangeやLavenderとかならまだしもBlanchedAlmondとか言われてもどんな色か想像すらできないので、一覧してクリックで背景色としてプレビューできる簡単なツール、CSS Color Keywordsを作った。DarkOliveGreenとかRGBで考えるとなかなか大変だけどキーワードなら簡単！ ページを開くと色のキーワードを背景色としたブロックが並ぶ。最初のbodyの背景色はランダムに決定されるが、その後はそれぞれの色のブロックをクリックするとその色が背景色になり、プレビュー出来る。 見出しや色のキーワードのフォントはYanone Kaffee
枠線付きの吹き出し
ミニブログの隆盛以降ウェブ上でよく見かける吹き出しをCSSで作るお話。単色のものはかなり前に書いた。今回はそれに枠線をつけてみよう！ みよう！ みよう！ Demo: Bordered Speech Bubble 枠線は単なるsolidなborderで少し角を丸めただけ。 尻尾を付ける :before擬似要素を使う。デモの3番目のサンプルのように、まず枠線と同じ色で三角形を作る。三角形は以前のエントリで書いた手法と同じで、左右のborderをtransparentにすることによって作る。 .speech-bubble:before { border-top-width: 16px; border-right-width: 16px; border-bottom-width: 0; border-left-width: 16px; border-color: #369 transparent;
What Does It All Mean? - Dive Into HTML5の日本語訳
多くの人がDive Into HTML5のコンテンツの中で最も気になるであろう(X)HTML( 4)からHTML5への移行を題材として、HTML5の書き方や新しい要素などの説明したWhat Does It All Mean?の日本語訳、「結局どうすればいいの？」を公開した。前に二度全部訳そうと思って、言い回しの複雑さにさじを投げたが、今回はとりあえず自分が一番最初に熟読したWhat Does It All Mean?に絞って訳した。 この章は既存のウェブページのHTML5への移行を題材としているだけで、移行法についての解説とは少し違う。そう読んでもそんなに期待外れではないが、脱線が特に序盤に多いので、細かいことに興味はないならHeadersあたりから読んでも良いかも。もちろんこの文書はHTML5の完全な解説ではないので、例えばaside要素やsection要素の詳しい説明などは欠けているし
回転しながらズームイン・ズームアウト
オブジェクトを回転しながらズームさせるにはCSS3のtransitionとtransformを組み合わせるだけで良い。ぐるぐるぐるぐるどっか～ん。Ch9とFx4b9、Op11、Sf5あたりなら動く。 Demo: Rotate and Zoom CSSコードはややこしくはないが、imgのリサイズをCSSでまかなったりマイナー寄りの書き方かもしれない。読みづらいのでベンダー拡張プリフィックスは省略した。実際に書く時はプロパティ名の頭に-webkit-/-moz-/-o-を付けてコピペすれば良い。 #zoom { width: 400px; height: 400px; } #zoom img { margin: 150px; border: none; display: block; width: 100px; height: 100px; transition-duration: 3s; }
物事をシンプルにするます
ヘッダが主張しすぎな感じとかがちょっと飽きてきたので、ちょっとだけリニューアルした。ロゴとヘッダ変えただけ。緑ももうやめようかな……とは考えたが面倒になったのでそのままで……。Ctrl+F5！ ロゴ 手持ちのフォントで"h"だけを打ち出して良さそうなのを選んだだけという。使ったフォントはJandlesで、MyFontsから無料で手に入る。ベベルるかグラデるか迷った末グラデった。もうアルファチャンネル付きのPNGファイルでいいよね？ いいよね！ ロゴの配置はちょっと悩んだ。マージンに負の値を入れてfloatさせればいけそうな気がしたが、それではコンテンツとかぶさるように配置するのは無理な感じだった。また、コンテンツの左右のマージンが一定ではないので、absoluteでも正確に配置できない。とりあえず親要素をrelative、ロゴ部分をabsoluteにしてやって、親要素を基準にしてロゴを絶対
Amazon Product Advertising APIで返されるProductGroupの日本語訳
Amazon Product Advertising APIでSearchIndex=Allを使って検索すると、複数のカテゴリの商品が検索結果として返ってくる。検索結果の各商品がどのカテゴリの商品かはItemAttributes/ProductGroupの値を参照すれば良いのだが、「家電&カメラ」が「CE」だったりとそのままではいまいちよくわからない。ということでAmazon.co.jpのカテゴリ分けのラベルに訳した。 { "Apparel": "アパレル&ファッション雑貨", "Baby Product": "ベビー&マタニティ", "Book": "本・漫画・雑誌", "CE": "家電&カメラ", "DVD": "DVD", "Grocery": "食品&飲料", "Health and Beauty": "ヘルス&ビューティー", "Kitchen": "ホーム&キッチン", "M
FeedBurnerからTwitterへ
最近になって「エントリ書いた」つぶやきをTwitterに投げるようになった。Twitterfeedとかを使うのは何かに負けた気がすると思ったので、エントリをPublishするPerlスクリプト内でTwitterに投げていたが、FeedBurnerでできるようになったらしいのでそれに乗り換えてみた。設定してActivateボタンを押したら502エラーとか出たけど設定は正常に行われたらしい。 と、導入出来たかどうか確認のためにエントリを書く。 設定画面はまだ日本語化されていない。TwitterのアカウントはFeedBurnerのアカウントに対しては複数設定可能だが、フィードに対しては1つだけなので、フィードが更新されたらTwitterの複数アカウントでつぶやくとかは無理そう。Hash tagsはcategory要素をハッシュ・タグとして付加してくれる。RSS 1.0でtaxo:topicsとか
CSSのプロパティをソートするPerlスクリプト
CSSを書く時に「セレクタ内でCSS仕様書でのプロパティの出現順序に従ってソートする」という個人的なルールを守っている。何かコーディングにおいて便利な理由があるからというわけではなく、第三者に説明する時に「仕様書の出現順で書いてます！」とかで済ませられるから。今まではファイル全体を処理するオレオレPerlスクリプトで適当にやっていたのだけど、Vimで選択範囲だけをソートとかやりたくなったので、普通に標準入力を読んで結果を標準出力に吐くように書き直した。ついでにCSS3のプロパティとFirefox(Mozilla)やSafari(WebKit)、Opera(Presto)、Internet Explorer(Trident)の独自拡張などへも対応させたりとか。 #!/usr/bin/perl # Author: Kyo Nagashima <kyo@hail2u.net>, http://h
FirefoxのuserChrome.cssネタ #12
久々。Firefox 3になったときにずいぶん減らしたんだけど、だんだん増えてきたので整理しつつここではまだ書いてなかったものだけ。別のところで書いたやつもあるけど、ここでは初出ということで。 ロケーションバーや検索バーでIMEをオフにする #urlbar input, #FindToolbar input { ime-mode: inactive !important; } 「g 検索語」などキーワード検索機能を多用する場合、IMEがオンだと悲しいことになるので設定。検索バーでもオフにするかどうかは好みで。 進むボタンを無効な時は隠す #forward-button[disabled="true"] { display: none !important; } 進むは戻るを使った時にしか有効にならないので、ほとんどの時間は無効。そのためにスペースを割くのはもったいないので無効なときは削除す
404エラーページの改善
404エラーページに大幅に手を入れた。今まではフッタに載せていた人気のあるページなどを整理して、URLが間違っていることへの注意の喚起と修正候補の推薦をメインにし、その下に人気のあるページのリストを、最後に大きめの検索フォームを配置ということにした。JavaScriptが無効だとほとんど意味をなさないのが欠点。403や410、500などの他のエラーページにはまだ手をつけていない。 まずはページが見つからないということをよくある理由(ミスタイプとか)と共に訪問者に知らせるメッセージを。これは今までどおりではあるのだけど、箇条書きにして読みやすくした。横に長いと読まれないことが多いので、こういった読んで欲しいメッセージは短く箇条書きの方が向いていると思う。その上でURL修正候補を見つけることができたら、その箇条書きの前に「もしかして」というキャッチーな単語と共に挿入するようにした。この時URL
無料で400以上のフォントを手に入れよう！
インターネット上で公開されている無料のフォントは数多くある。しかし、それらを効率的に探すとなると大変だ。無料のフォントをまとめたサイトやページは数多く見つかるが、50程度のまとめのものであったり、ライセンスについてあやふやなだったりする。そこで便利なのがMyFontsの検索機能だ。MyFontsではフォント名や作者、その他色々な条件で検索できるが、その条件のひとつに値段があり、その条件だけで検索することができる。何も考えずに"$0以下"という条件で検索するだけで400以上見つけることができるのだ。 検索結果のページでは任意の文字列でのプレビューをすることもできる。オプションとして色やサイズの指定もできるので、サイトのロゴに良さそうなフォントを探している時などはとても重宝するだろう。多くはないがSmall-Capsなどのファミリを持つ場合はそれらのプレビューに切り替えることもできる。Gall
Aex: Amazon.co.jpの全商品から検索するよ！
Amazon Product Advertising APIのItemSearchオペレーションのパラメータとしてSearchIndex=Allが日本でも利用できるようになったらしいので、とりあえずAexという名前でAmazon.co.jpの検索サイトを作ってみた。これでドロップダウンでカテゴリを選択とかいう腐ったUIから解放される。 SearchIndex=Allを指定すると全商品からKeywordsに指定した文字列で検索してくれる。SearchIndex=Blendedとはまったく違い、カテゴリごとに検索結果が分けられて返ってきたりはしない。色々検索してみたところ、Amazon.co.jpでの検索と同じ結果で、概ね期待通りの検索結果が返ってくるようだ(ItemSearchオペレーションのデフォルトではCondition=Newなので中古商品などが含まれないというような違いはあったりもす
Version Control for Designersを訳した
Gitを使い始めた時に読んだドキュメントのひとつであるVersion Control for Designersを日本語に訳した。for Designersとタイトルについているが、そのことは忘れて読んだ方が良いと思う。 このドキュメントは開発者向けではない。かといってデザイナ向けの特別な何かがあるわけでもない。主にターゲットになるのは、 バージョン管理システムをほとんど触ったことがない人 ちょっとは使っているけどブランチとか良くわからない人 他のを覚えるのがやっとでGitとか言われても困るという人 あたりになると思う。内容はGitの基本的なコマンドの使い方を通して、バージョン管理システムをざっと説明するとかそういう感じ。これを読めばあとはヘルプだけで良いというようなものではないが、Gitを始める時のとっかかりにはなると思う。 deployとかcodebaseとかうまい訳語が思いつかない。
Amazonの商品個別ページでのwindow.productTagsオブジェクト
Amazon.co.jp(Amazon.comでも)の商品個別ページのDOMにはwindow.productTagsというオブジェクトがあり、その中にASINをはじめ商品のタイトルや商品画像のURL、著者名(CDとかならアーティスト名)など基本的な情報が格納されている。これを使えば簡単な商品紹介リンクならば外部のサービスを介することなく作成することが出来る。 window.productTagsオブジェクトは商品個別ページにあるタグをつける機能のために用意されているものみたい。Perlクックブック〈VOLUME1〉のページを例にwindow.productTagsオブジェクトを探してみると、 productTags: { asin: "4873112028", image: "http://ec2.images-amazon.com/images/I/51FHW5B8GQL._SL75_P
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
