Online XSLT 2.0 Service
Online XSLT 2.0 ServiceはW3Cが提供するXSLTってくれるサービス。Amazon Web ServicesのXSLT機能の汎用版といった感じ。これをJavaScriptで叩けば、XMLHttpRequestとか使わずにいろいろゴニョゴニョできそう、というかできるとかなんとか。 要するに、用意したXSLファイルのURLとか変換元になるXMLのURLなんかをURLエンコードして連結するとかそれくらいのグダグダなアプローチで、XMLをJSONに出来るということ(はしょりすぎ)。で、「フィードはあるけどJSONはないなー」とかいうサービス(90%以上のサービスで提供してないけど)でも、JavaScriptから気軽にダイナミックにデータを参照できたりとか。 洒落でMSN SearchのRSSフィードを利用したサイト内検索とか作ってみたけど、想像よりもサクサク動いてこのサイトに
hail2u.net - Weblog - CSSで指定するフォント
CSSで指定するフォントは、訪問者のマシンにその指定したフォントがインストール済みでないと(大抵の場合は)反映されないため、手に入れやすいまたは多くのOSでインストールされているフォントを指定することが多い。手に入れやすいフォントとして代表的なものはCore fonts for the WebというMicrosoftが提供しているフォント群で、具体的にはArialやTrebuchet MS、Verdana、Georgia、Times New Roman、Courier Newなど。あえてLucida GrandeやTahomaを使うというのなら違和感の少ない代替になりそうなフォントを指定しておいて挙げると良いかもねとかいう話。 Core fonts for the Webに含まれる多くのフォントはWindows 98以降では予めインストールされており、Mac OSでもInternet Ex
JSONP
前回のエントリで触れたJSONP。初出はRemote JSON - JSONPというMochiKitの中の人によるエントリ(多分。一言で言うなら「JSONデータを括弧でくくった上でこっちが指定した文字列を頭につけて返してね？」というもの。文章で説明するとわけわからん。 つまり、 http://example.com/data.json?jsonp=beverly_hills とリクエストしたら、 beverly_hills({ foo: 'This is foo.', bar: 'This is bar.', foobar: 'This is foobar.' }); と返す。また、 http://example.com/data.json?jsonp=beverly_hills%5B90210%5D とリクエストしたら、 beverly_hills[90210]({ foo: 'This
hail2u.net - Weblog - よく使うライセンス・フリーのフォント
OSより高かったりする値段のフォントを気軽に使えるわけがないので、ライセンス・フリーのフォントは重要。Webページでロゴやら何やらで使う分にはまるで問題ないクオリティなものを見つけては保存、見つけては保存てな感じ。その中で好んでよく使うものを5つ挙げてみる。 Lacuna Regular Italicの方がスタイリッシュで使いやすそうではあるけど、ところどころに独特の味があるRegularの方が好き。 MiloTF-Text 小さいサイズでもかなり使える。 Lexia Readable Comic Sans MSの系統だが、ふざけた感じが少ないため場所を選ばずに使える。 Fontin-Regular セリフのヒゲの部分のあしらい方がきれい。 Devroye スクリプト系ではあるけれどもしっかりした感じで使いやすい。 IdentifontのFree fontsとかライセンス・フリーのフォント
hail2u.net - Weblog - permalinkのスタイルを変えた
どうやら、Googleではアンダースコアよりもハイフンの方が単語をつなげる文字に適しているそうなので、少し前からハイフンで単語をつなげた形のpermalinkというかファイル名にしてたりします。 Googleでは単語をつなげる文字がアンダースコアの場合、全てをひとくくりの単語とみなしてしまうそうです。つまり、 foo_bar_baz という文字列をURLに含む場合、foo/bar/bazのどの単語でもヒットせず、foo_bar_bazという単語でのみヒットするということ。対して単語をつなげる文字がハイフンの場合は、それぞれを単語とみなしてくれるそうです。例えば、 foo-bar-baz という文字列をURLに含む場合は、foo/bar/bazのどの単語でもヒットするわけ。 基本知識とか言われたよ！
Centering Vertically
高さの決まったボックスの中で縦方向の真ん中に内容物を配置するという、タイトル・ロゴなどで良くある配置をCSSで実現するとなると、結構戸惑うこともあるんじゃないかと思います。実はこれの実現は単純で、そのボックスの高さと同じだけline-heightを確保してやれば良いだけです。 つまり、ボックスの高さが120pxなら、そのボックスにline-height: 120px;と指定してやるということになります。 div#container { height: 120px; line-height: 120px; } コードで語る(カコイイ)とこんな感じ。 この挙動はCSS2の仕様のline-heightの項にも、 User agents center glyphs vertically in an inline box, adding half-leading on the top and bot
hail2u.net - Weblog - IEでフロートさせたボックスのマージンが倍になるバグ
WindowsのIE5.5や6など(5とか5.01は知らない)にはfloatさせたボックスへ指定した左右のmarginが正常に反映されない(倍になる)というバグがあります。最近はfloatを使ってゴニョゴニョする機会も多いと思うので厄介に考えている人も多いでしょう。実はdisplay: inline;とか指定してやると回避できちゃったりとかします。ネタ元はThe IE Doubled Float-Margin Bugだったような気がしますが、別なところで見つけたような気もする。 バグの状況自体は上記CSSバグリストのURLを参照していただければわかりやすいです。と言いつつ回避手段の使用前/後を並べてみたHTMLを用意してみました。IEで見れば一目瞭然で、1つ目のコンテナ内のフロートさせたボックスの左のマージンは倍(80px)になっているのに対し、2つ目のコンテナ内のフロートさせたボックスの
hail2u.net - Weblog - 二重枠線ボタン
どこかで「フォーム・ボタンのボーダーにdoubleを指定するとカッコイイぜ！」みたいなのを見つけて、1週間ほど前から使ってみてたりするわけですが、これはなかなか良い気がする。とりあえず憶えておくと即戦力になります。 doubleだとカッコイイとは言っても、実は単にdoubleにすれば良いわけではないようで、四辺のborderを別個に指定し、うまいことベベルっぽくしないとダメな感じ。 僕はシャイで口下手(エイプリルフールは過ぎたのにネタっぽい)なので、言葉では説明できないため、デフォルトのボタンからCSSのルールを増やしていってかっこよさげなボタンを作るプログレスをHTMLでまとめてみました。 borderのサイズはいろいろ試してみればわかりますが、3pxじゃないとうまいことまとまってくれません。 フォーム部品のスタイリングは困ったものなので、こういった即戦力なテクニックを憶えておくとなかな
JavaScriptのリファレンス
Microsoftの提供しているWindows Script、その5.6のドキュメントではJScriptとなっていますが、JScriptはJavaScriptと文法は互換のなので、そのままリファレンスとして流用できます。HTMLヘルプなのでエディタから単語拾ってジャンプとかも結構魅力。JavaScriptギークにはマスト！ とか。 また、今は亡きNetscape DevEdgeで配布していたCore JavaScript Reference 1.5は、Wayback MachineにZIPアーカイブ共々残っている模様です。こちらはHTMLなので、どんな環境でも扱いやすく、英語ではありますがこちらも抑えておきたいところ。 以上の2つがあればJavaScriptのリファレンスとしては十分なんじゃないかなと。少なくとも基本は抑えられるはず。 今ではJavaScriptで何かやろうとすると避けては
XHTML Meta Data Profiles
a要素のrel属性にリンク先のURLとその文書の関係を示す文字列を記述する、いわゆる小文字のセマンティック・ウェブ(書いてみたかった)とかいうシロモノで、(X)HTMLの仕様に明記されていない値を利用するには、プロファイルをきちんと定義しなければなりません(このサイトではまだ定義してないのに使っちゃってるんだけど)。XHTML Meta Data Profiles(以下XMDP)は、そのプロファイルを定義する文書の仕様です。 XMDPはサンプルを見てもわかるように、とても簡単明瞭なもので、プロファイルとして新たに定義したいプロパティ名をdt要素、その説明をdd要素で定義し、それらを抱合するdl要素のclass属性の値にprofileを指定してやるだけ。 <dl class="profile"> <dt id="author">author</dt> <dd>A person who wro
正規表現のeオプションをJavaScriptでエミュレート
Perlなどの置換系の正規表現ではeというオプション(フラグ)をつけると、置換後の文字列をプログラム・コードとみなしてくれるわけですが、JavaScriptのreplace()の第一引数で指定する正規表現にはeオプションなどというモノはありません。しかし、replace()の第二引数である置換後の文字列にはStringオブジェクトや文字列リテラル以外にも関数を指定することもできるので、事実上eオプション相当のことが実現できます。エミュレートというのは正確ではない気がするけど気にしない。 具体的には、 var s = "asdf123asdf123456asdf123asdf"; document.write( s.replace( /123/g, function (num, idx, old) { return parseInt(num) + 333; } ) ); という感じ。上記例で
フォーム部品周り
CSS漬けな今日この頃にふさわしく、フォーム部品のスタイリングのガイダンス、Styling even more form controlsを見つけてみた。様々なブラウザでのCSSによる装飾の無いフォーム部品の見栄えを一覧にしてあり、更にそれにスタイルを適用するとどのようになるかも一覧になってます。フォームはウェブ・デザインにおいて最も悩まされるモノのひとつなので、結構便利な気がする。 単なるボタンとSubmitボタンで結構違いがあることなんかは何気に知らなかった。あわせて、 Fun with forms Styling forms Fieldset, legend and label Tableless forms なども参照すると気持ちよいフォームが作れるかもしれません。 ユーザビリティ的には、フォーム部品にヒステリックにCSSを適用するとユーザーの混乱を招きかねないため、フォーム部品は
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
