Rainbow
Rainbowはコードのシンタックス・ハイライトをやってくれるJavaScriptライブラリ。拡張の仕組みが凄く書きやすそうで良さそう。名前は悪い。しかもリダイレクト先のURLはrainbowsだし……。まぁとにかく乗り換えようかなとちょっと思った理由をちょっと書いておく。「ちょっと」なのでまだあんまり乗り換える気ない。 書きやすいといっても所詮は正規表現なので、定義フォーマットがGoogle Code Prettifyの黒魔術的なアレよりもちょっとシンプルだとかそういう意味にすぎない。なのでこの点だけでは既存の様々なシンタックス・ハイライトしてくれるライブラリから乗り換えるという程のパワーがあるわけではないと思う。他にもpre要素の子ではないそこらのcode要素のハイライトにも対応している所とかすごいと思うんだけど、おまけ機能的な感じでこれも乗り換えの動機にはならなそう。 僕が乗り換えよ
Data URIに変換するPerlスクリプト
Data URIはまだそれほど使いまくっているわけでもないので、ブラウザーでやったりVimからWSHでやったりいろいろしてたけど、必要な時はだいたい複数ファイルを何回も変換する必要があったりしていろいろ大変なのでPerlで書き直して右クリックから使う方法も考えた。@cho45が書いたのを見て重い腰が上がった。 #!/usr/bin/env perl use strict; use warnings; use MIME::Base64; use MIME::Types; use Path::Extended qw(file); my $mt = MIME::Types->new(); my @r; foreach (@ARGV) { my $f = file($_); my $t = $mt->mimeTypeOf($file->stringify); push(@r, 'data:' .
JavaScriptとYQLでReadabilityの短縮URLを作る
Readabilityにはrdd.meという短縮URLサービスがあり、それを使ってReadability化された読みやすい状態の記事を共有することができます。短縮URLの取得はWeb UIやReadability化したページで行える他、ウィジェットもありますが、APIも用意されているのでWebアプリケーションへの統合にはこちらを使った方が自由度が高いでしょう。YQLを使えばJavaScriptだけでも何とかなります。 APIは認証不要の単純なHTTPリクエストで叩きます。 $ curl https://readability.com/api/shortener/v1/urls -d url=http://hail2u.net/documents/diveintohtml5-semantics.html cURLで短縮URLの作成APIを叩く場合はこのようにリソースにurlパラメータとして任
Pinterestのnopin
「対策しました！」みたいなニュースが普通に注目されちゃうとかPinterestの勢いはすごいな。「対策」っていうのはおかしい気がするけど(どちらかというとPinterest寄りの目線なので)。それはまぁともかくnopinは実装がおかしい気がしてしょうがない。あまり興味もなかったのでnopinの話は読み流していたため「えっ？ alert()？」とか思っただけだった。ちょっと追ってみたところクライアント側のJavaScriptでチェックしてるだけで、実際にはPinterestはnopinをチェックしていないと言って良いと思う。 PinterestのBookamrkletでは以下のようにチェックしているだけだった(読みやすいように整形しておいた)。 var i = document.getElementsByTagName("meta"); for (var g in i) { var e =
なぜnormalize.cssなのか
リセットでは弊害がありすぎるとか、ノーマライズの控えめなところが良いとか、まぁいろいろだとは思う。僕はそもそもリセットとかノーマライズとか自分で書いていないルールを取り込むのが好きではないので、なるべくその類のものの使用は最小限に抑えたい。YUI CSS Resetなどでは好むと好まざるに関わらず全て取り込まないとならないけど、normalize.cssではブラウザ間での差異を統一するための各コードが独立しているので、必要なものだけを取り込むなどというような使い方も難しくない。そういった自分の書くCSSとブラウザー側の実装の緩衝材(polyfill)として機能するというところがnormalize.cssを気に入った理由で、これからも使っていきたい理由。 各ルールを個別にインポートできるようにした形でnormalize.scssを作ったのはつまりそういうことで、Sassで手軽に使えるように…
Flexbox、おもしろいですよ？
Translation of: Learn You a Flexbox for Great Good! | The Haystack. written by Stephen Hay Flexboxについて知っていますか？ 多分、名前は聞いたことがあるでしょう。もしかしたらチュートリアルくらいは読んだことがあるかもしれません。既に試していたりしますか？ Flexboxという代物についてあまり聞いたことがなかったり、前に試してから随分と経つなら、そのFlexboxに関する知識のことは一旦全て忘れてしまいましょう！ 現時点での最新版である2011年11月29日にリリースされた仕様では完全に別物になっています。 訳注 2012年3月22日に新しく公開されたWorking Draftでもまた大きな変更が加わり、この文書の一部はそのWDにそぐわないものになっています。大筋は変わりませんし、2012年3
Pinterest #2
PVがジャンプアップしたことと資金調達に大成功したことで国内でもPinterestのことがちょくちょく話題になっていますね。ソーシャル分野においてショッピングと絡めることが注目されていることもあって、買いたいもの・買ったもののメモ的なウェブサービスという取り上げられ方をしていますが、それはちょっと違うんじゃないかなーと思います。使ってる感覚からするとTumblrとFFFFOUND!、Svpplyを足して3で割ったけどどれともちょっと違うような感じです。 Tumblrに近い所 RepinとLike ニヤニヤできるDashboard 複数のBoardを簡単に作れる FFFFOUND!に近い所 画像への特化 UIの簡素さと選択の狭さ Svpplyに近い所 ライフスタイルの演出 値段による整理 どれに近いかといえばFFFFOUND!が一番近いとは思いますが、それよりももっとセンス自慢的な側面が強い
Sassで行こう！
Translation of: Getting Started with Sass - A List Apart CSSの持つその簡明さは欠かせない特徴の一つで、それは最も歓迎されている点でした。CSSによるスタイルシートは、セレクターといくつかの適用したいスタイル情報を含むルールを羅列したものに過ぎません。しかし、WebサイトやWebアプリケーションが巨大に、そして複雑になり、様々なデバイスや画面サイズに対応せざるを得なくなった現在、この簡明さという特徴―fontタグやテーブル・レイアウトの淘汰に大いに役にたったもの―が大きな足かせになっています。 簡単な計算機能や変数を追加するなどといったCSSの修正案が過去に提示されましたが、どれもブラウザー・ベンダーには採用されませんでした。仮にこういった新しく素晴らしい拡張されたCSSがあるブラウザーに実装されたとしても、それが実用に耐える程度に
JSONPに同期リクエスト
コールバック関数を指定する形のJSONPへforループなどで複数回リクエストする場合、コールバック関数の実行される順はforループで回した順と一致するとは限らない(Opera除く)。そのため何番目にリクエストした結果に実行されたコールバック関数なのかといった処理状況をコールバック関数内で知ることが面倒だったりする(不可能というわけではない、多分)。それをあえて同期リクエストにすることでどうにかしてみようとかいう話。 同期リクエストするためには、forループなどでJSONPへのリクエストを一気に処理するのではなく、リクエストをひとつに留めてコールバック関数内で次に進むといった形で実装するが良さそう・・・とアイディアをバソキヤ求めて三千里の人に貰った。 つまり、 var urls = [ 'http://del.icio.us/feeds/json/cho45', 'http://del.ic
インバウンド・リンクのリスト
TrackBackの代わりにWebサービスAPIを利用してインバウンド・リンクをリスト化して表示しようかと考えた。blogにTrackBackの機能を持たせるのは悪くはないのだけどコストが高いと思うので、WebサービスAPIを利用して低コストでTrackBack的な情報をページに持たせることが出来たら良いなと。結果はうまくいかなかったのだけど。 TrackBackがコストが高いというのはやはりスパムの問題が大きい。規模の小さいサイトならTrackBack受信の仕組みが稼動するのはスパムを受けた時ばかりという状態になったりするだろうし、規模の大きいサイトならとてつもなく大量のスパムを戦うことになるだろう。つまり、TrackBackを受けることよりもスパムを弾くことに注力せざるを得ない。その結果としてpermalinkからTrackBack Auto-Discoveryを削除して、目視でTra
はてなブックマークでつけられたコメントをblosxomにインクルード
はてなブックマークエントリー情報取得APIを利用して、blosxomのエントリ個別ページにはてなブックマークでそのエントリに付けられたコメントを引っ張ってこようとかいうネタ。blosxomでの話ということになっているけど、実装自体はほぼPure JavaScriptなので、どんなページにも応用できるはず。 プラグインは特に必要は無い。プラグインにする必要も無いとも言える。必要なのはflavourへのコードの追加とJavaScriptファイル。 head.html <script type="text/javascript" src="/scripts/prototype.js"></script> <script type="text/javascript" src="/scripts/hatena/bookmark.js"></script> prototype.jsが必要。インクルード
hail2u.net - Weblog - pre要素へのスタイル指定
idea * ideaでエントリになっていたので、言及されていることだしうちのサイトのことだけちょっと書こうかなとか考えてみたら結構色々あって、エントリのネタになりそうだったのでまとめてみた。どっかにもちょろっと書いたけど。 実際にスタイル指定を書く前に抑えておくべき知識として以下のようなものが挙げられると思う。 ほとんどのブラウザでpreは等幅フォントで表示される ほとんどのブラウザでpreのwhite-spaceはpreになっている フォント・ファミリを指定する場合は最後にGeneric font familiesが必要になる overflow: scroll;では縦横どちらにあふれた場合でも縦スクロール・バーと横スクロール・バーが両方とも出る overflow: auto;ではあふれた方向にのみスクロール・バーが出る Internet Explorerではoverflow: auto
hail2u.net - Weblog - よく使うライセンス・フリーのフォント
OSより高かったりする値段のフォントを気軽に使えるわけがないので、ライセンス・フリーのフォントは重要。Webページでロゴやら何やらで使う分にはまるで問題ないクオリティなものを見つけては保存、見つけては保存てな感じ。その中で好んでよく使うものを5つ挙げてみる。 Lacuna Regular Italicの方がスタイリッシュで使いやすそうではあるけど、ところどころに独特の味があるRegularの方が好き。 MiloTF-Text 小さいサイズでもかなり使える。 Lexia Readable Comic Sans MSの系統だが、ふざけた感じが少ないため場所を選ばずに使える。 Fontin-Regular セリフのヒゲの部分のあしらい方がきれい。 Devroye スクリプト系ではあるけれどもしっかりした感じで使いやすい。 IdentifontのFree fontsとかライセンス・フリーのフォント
JavaScriptで配列をシャッフル
配列をシャッフル、つまりランダムに要素の位置を入れ替えるというのを、sortメソッドを使ってやってみたのだけど、明らかにダメダメなものになってしまった。その後、あーでもないこーでもないと考えたのだけど、算数が得意すぎて頭が痛くなった。ということを某所でぼやいたらはてのくんがコードを見つけてくれた。どうやらFisher-Yatesという有名なアルゴリズムでやると良いらしい。 最初に書いたコードは、 var a = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9); a.sort( function (a, b) { return Math.ceil(Math.random() * 3) - 2; } ); というもの。sortメソッドは、パラメータに与えられた関数が負の値・0・正の値を返すことによって要素の順序を決定するので、その関数がランダムに値を返せばランダ
getComputedStyle()を利用した既読チェック
COLLECTION & COPYのそのリソースを訪問済みか判定するやHatebu Addictionなどで使われている既読チェック。これらとは違う、getComputedStyle()メソッドを利用して文字色を取得し訪問済みリンクの文字色かどうかをチェックという手法で既読チェックを実現している、Jeremiah Grossman: I know where you've beenというページを見つけた。FirefoxやSafariなどではこれで既読チェックが可能。 getComputedStyle()メソッドはstyle属性やJavaScriptで設定されたスタイル以外のスタイル情報をまとめて取得するメソッドで、ComputedCSSStyleDeclarationオブジェクトを返す。そして、ComputedCSSStyleDeclarationオブジェクトのgetPropertyVal
アスタリスクをプロパティ名の頭につけるというCSSハック
CSSの各セレクタのブロック内でInternet ExplorerとFirefoxやOperaなどで分けてプロパティを設定するハックとしてUnderscore Hackという有名なものがあるが、Details on our CSS changes for IE7によるとInternet Explorer 7では修正されている。だが、アンダースコアのかわりにアスタリスク(*)をプロパティ名の頭につけるというAsterisk Hack (勝手に命名)は健在だったりとか。 Asterisk HackはUnderscore Hackとほとんど同じで、 #menu { position: fixed; *position: absolute; } というような記述をするハック(サンプル・ページ)。結果はInternet Explorerでabsolute、FirefoxやOperaなどではfixed
JSONScriptRequest
動的にscript要素を追加してやることによってクロス・ドメインのJavaScriptファイルを読み込むというテクニック。Firefoxの場合は動的に追加するscript要素のonload属性で読み込んだJavaScriptファイルを処理するfunctionを指定してやれば問題ない。しかし、これをクロス・ブラウザで実現するには違ったアプローチが必要になる。そのひとつがJSON and the Dynamic Script Tag: Easy, XML-less Web Services for JavaScriptで取り上げられているJSONScriptRequest。XmlHttpRequestと比較するとかなり機能が限定されたものだけど、扱いが手軽で限定された環境ではなかなか威力を発揮するっぽい。 JSONScriptRequestはどうやらJSONPと呼ばれている、JSONデータをc
3px Double Border Button
Progress: 5 Add effect at :hover, :focus and :active.
FirefoxのuserContent.cssネタ #2
今回はurl-prefix()を使った奴とか書いてみたり。いろいろやってたらuserContent.cssが2000行超えたりしましたが、特にページの表示が遅くなるとかいう感じは無いので、いくらでもCSSルールを書いて良さそう。限界はあるでしょうがね。 @-moz-documentとurl-prefix()を組み合わせて使えばURLの先頭一致でルールの適用を制限できたりします。具体的には、 @-moz-document url-prefix(http://www.example.com/~foobar/) { body { font-size: 100% !important; } p { line-height: 1.5 !important; } } とか、こんな感じで"http://www.example.com/~foobar/"で始まるURLのページだけに適用されるブロックを作成
hail2u.net - Weblog - FirefoxのuserContent.cssネタ
Firefox 1.5 Beta 1よりURLやドメインなどでCSSルールを切り分けることが可能になりました。これによりuserContent.cssがとてもいじりやすくなった(あるサイト向けにテキトウに書いても他のサイトに誤爆しなくなった)ので、userChrome.cssと同じくガリガリいじると楽しいようなそうでもないような感じです。 _blankなリンクのカーソルを変更 a[target="_blank"] { cursor: alias !important; } cursor: crosshair !important;とかやってる人が多いことと思われますが、1.5 Beta 1から先取りサポートされたaliasにするとより直観的に把握できるようになると思います。 View Page Sourceのフォントを固定する body#viewsource * { font-family
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
