普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
横にはみ出すナビゲーション
今回(2014年9月)のAppleのウェブサイトのリニューアルにはいくつもの興味深い点がある。ナビゲーションの二本線とバツ印が共にインラインのSVGなことなどもそうだし、多くのポーションがモダナイズされたにも関わらずPrototype.jsを継続利用したこともすごく気になる。その中でも一番気になったのは狭い画面向けの横にはみ出すナビゲーションだ。 これまでの通常は隠されている狭い画面向けのナビゲーションの多くは、次の3つに大別されていた。 ドロップダウン オーバーレイ ドロワー 極稀にアイコンのみのコンパクトに横へ並べたものもあったが、いずれの場合もナビゲーションの項目は縦に並んでいることがほとんどだ。一覧性に富み、アクセス性が高く、ユーザーの学習コストも低い。 これに対して横にはみ出すナビゲーションは、項目を画面外にはみ出すように横に並べ、スワイプでスクロールして探させるという形のものだ
Webフォントのホスティング
Webフォントのホスティングのみを提供するようなサービス、つまりWebフォント専用のカスタムCDNを探していた。しかし、Webフォントがメジャーになったとはいえ、そこまでニッチなサービスはあんまりないようだ。代表的なものだとTypeFront。が、かなり制限厳しい。試してすらいないけど、$15/月は払わないとまともに機能しそうもないような仕様だった。 Webフォント専用にこだわらずに、GitHub PagesやDropboxを利用するという手もありそうだけど、Internet Explorer 9以降やFirefox 3.5以降におけるCORSによる制限に対応できない。また、パフォーマンスに難点があったり、Content-Typeでトラブりそうとかも。 Google Drive Google Driveだとどうかなーとテストしてみたら、Access-Control-Origin: *となっ
たった一行で人生が変わった.vimrcでの設定とその意味 - Weblog - Hail2u.net
僕はVimを使うまでは秀丸エディタを長いこと使用していました。両者の間に設定の項目数やキーバインドに割り当てられる機能に大きな差があるとも思わなかったので、使い始めた当初は「そんな言うほど高機能でもないよなー」とか思っていました。しかし色々なプラグインを試したり、様々な設定を.vimrcに書いているうちに、Vim (やEmacs)がその他エディタと決定的に違うのは設定の豊富さではなく、設定の自由さがもたらすアプローチの多様性なのではないかと考えるようになりました。というわけでそういう設定の自由さを最初に実感した話をVim Advent Calendar 2011の6日目のエントリーとして書かせてもらいます。 昨今のWebサイトではCMSなどを利用することが多く、共通のHTMLコードはテンプレートとして作成されます。その場合そのテンプレートの利用されるパスが様々な場所や階層になりうるので、例
Hashbang(#!)なURLの恐怖
諸方面からお叱りの言葉しかいただけない#!なURLは様々な問題をはらんでいますが、来るべき未来(もうすぐですよ！)におけるメンテナンス性という問題についてAdactioで取り上げられていました。#!の表面的な凶悪さに思考停止していて、こういった本質的な問題についてはまったく考えていなかった気がします。 その問題というのは、#!なURLからHistory APIなどを利用してクリーンなURLに乗り換えよう(戻そう)としても、古い#!なURLを有効なままにするためにはサーバー側の何か(単純なリダイレクトやmod_rewriteなど)ではどうしようもないので、クライアント側での(JavaScriptを利用した)リダイレクトを提供する機能を提供し続けなければならないというメンテナンス性の悪さです。 この#!なURLのメンテナンス性の悪さという問題は、URLの#以降はクライアント側の扱いなので、クラ
rel="canonical"はhead要素の先頭に置いてね
Googleでのrel="canonical"の扱いについての中の人の話。rel="canonical"が適切ではないURLを指していた場合に、Googleとしては無視したいし、多くの場合無視するので、万全を期すのなら(「If you really want to be safe」)head要素の先頭に書けと言っている。わかるけどHTMLの書き方が検索エンジンの意向に左右される世の中は嫌だなぁ……。 こういったネガティブなURL評価だけでなく、rel="canonical"のhref属性の値がスラッシュで始まる相対URLで書いてあれば信用してくれるとか、そういうポジティブなURL評価も欲しいですね。要は違うドメインを指しているrel="canonical"の評価を下げてくれれば、場合によっては無視してくれれば、良いんじゃないかとかそんな感じです。まぁユーザーのページがサブドメインで切られて
Twitterのテキストのリンク張り
Twitterではツイートの表示にいくつか規制がある。例えばTwitterの鳥さんを表示しなければならないとかユーザーのプロフィールへのリンクでは#!/のアレはダメだったりとかかなり細かい。ということでユーザー名やURL、ハッシュタグにまとめてリンクを張るJavaScriptをjQueryで普通に書いてみた。 まず正規表現の定義。 var url = "https?://\\S+"; var mention = "@[0-9a-zA-Z_]{1,15}"; var hashtag = "#[0-9a-zA-Z]+"; var re_url = new RegExp("^" + url); var re_mention = new RegExp("^" + mention); var re_hashtag = new RegExp("^" + hashtag); var re_token =
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>
Google Web Fontsの全書体をプレビュー
Google Web Fontsの全書体を一気にプレビューするツールを作った。公式のFont Previewerを使ってるとサンプル文字列が突如リセットされたりとかアレだったので……。 使い方は左の入力ボックスにプレビューに使う文字列を、右のテキストボックスにフォントサイズをpx単位の数字で入力してボタンをクリック。クリック！ 手抜きなのでEnter押してもダメ！ すると下にズラッとプレビューされる。太字にしたりスモールキャプスにしたりとかの細かいスタイル指定はFirebugやDeveloper Toolsとかでやれば良いと思う。.previewというクラスのスタイルをいじれば反映される。contenteditable使ったスタイル編集機能とかなら付けてもいいかもしれない。 ソースを見ればわかる通りYQLで公式のFont Previewerをスクレイピングしてフォント名一覧を入手し、あとは
結局どうすればいいの？ - Dive Into HTML5
Translation of: What Does It All Mean? - Dive Into HTML5 Diving In The Doctype The Root Element The <head> Element Character Encoding Friends & (Link) Relations rel = stylesheet rel = alternate Other Link Relations in HTML5 New Semantic Elements in HTML5 A long digression into how browsers handle unknown elements Headers Articles Dates and Times Navigation Footers Further Reading 訳注 Diving In この章で
Pinterest
使い始めたのでなんか書いてみる。モノ的にはTumblrとAmazonのなんでもほしい物リストの中間的なウェブサービスで、ウェブ上の画像をクリッピングしていくだけ。自分の好きなデザインの製品を集めたりとかに使っている人が多い。参加は既存ユーザーからの招待制ということになっているが、公式の登録フォームでメールアドレスを登録すれば数日で招待される(一日くらいで招待された)。 サービスの概念としてはboardとpinがある。boardがおおまかなカテゴリでpinが各画像みたいな感じ。 boardにはpinのサムネイルが並ぶ。ここにはコメントを付けたりはできないが、フォローすることによってPinterestのトップページにそのboardが表示されるようになる。サムネイルは単に縦横に並ぶのではなく、適当に間を詰めて隙間なく並んでくれるのでウヘヘってするのに最適。 各pinにはコメントが付けられ、rep
既に起動しているgVimの新しいタブでdiffを行う
Vimのdiffがすごく楽なので使いまくり始めた。単にgVimを新たに起動してdiffを行うだけならば、-dオプションとファイルを2つ渡してやれば良い。が、既に起動しているgVimの新しいタブでdiffを行う方法がわからない。--remote-tab-silentオプションを追加するだけではうまくいかないようだ。色々調べたところ、公式MLのアーカイブにあったスレッドで、--remote系のオプションではExコマンドを1つ指定して実行することができるので、それを利用してvertical diffsplitを実行してやれば良いことがわかった。 つまり、foo.txtからbar.txtとの差分を既に起動しているgVimで開く場合は、 $ gvim --remote-tab-silent +"vertical diffsplit bar.txt" foo.txt とする。foo.txtを既に起動し
Google Closure Compiler ServiceでJavaScriptファイルをコンパイルするPerlスクリプト
Google Closure Compiler ServiceでJavaScriptファイルをコンパイルするPerlスクリプト 最近になってGoogleのClosure Compiler Serviceを良く使うようになった。今まで使っていたYUI Compressorと比較すると、複数のJavaScriptファイルをまとめて圧縮出来ることと圧縮にとどまらない最適化を行うことも出来ることがメリットで、CSSの圧縮には対応していないことがデメリット。ウェブのUIで圧縮するのは面倒になってきたので、REST APIを利用してウェブのUIと同じようにコメントで設定を記述してコンパイルするPerlスクリプトを書いてみた。タイトル長い！ #!/usr/bin/perl # gccs.pl - Compile your JavaScript code with Google Closure Compi
FeedBurnerからTwitterへ
最近になって「エントリ書いた」つぶやきをTwitterに投げるようになった。Twitterfeedとかを使うのは何かに負けた気がすると思ったので、エントリをPublishするPerlスクリプト内でTwitterに投げていたが、FeedBurnerでできるようになったらしいのでそれに乗り換えてみた。設定してActivateボタンを押したら502エラーとか出たけど設定は正常に行われたらしい。 と、導入出来たかどうか確認のためにエントリを書く。 設定画面はまだ日本語化されていない。TwitterのアカウントはFeedBurnerのアカウントに対しては複数設定可能だが、フィードに対しては1つだけなので、フィードが更新されたらTwitterの複数アカウントでつぶやくとかは無理そう。Hash tagsはcategory要素をハッシュ・タグとして付加してくれる。RSS 1.0でtaxo:topicsとか
スマートキーワードは後ろが良い
IE5(やそれを利用したタブブラウザ)を利用していた頃からロケーション・バーで検索していたので、特に操作性が優れているわけでもない検索バーなどはまったく使う気になれずスマートキーワードしか使ってない。最近はロケーション・バーで履歴やブックマークの絞込みも可能なので、ますます重要度が上がった。このスマートキーワード機能自体に特に不満があるわけではないのだけど、キーワードは前に付けるのではなく後ろに付けるのが良いのじゃないかと、履歴やブックマークの絞込み機能が付いて以降は考えるようになった。「g foobar」じゃなくて「foobar g」というように。 上述の通り、今の多くのブラウザは履歴やブックマークをロケーション・バーから手軽に検索できるので、 とりあえず探したい情報に関係ありそうな単語をロケーション・バーで入力する 見つかった: そのままドロップダウンから選択して開く 見つからなかった
Firefox 3.6以降でＭＳ Ｐゴシックを無効にする
CSSの@font-faceではユーザーがインストールしていないフォントをウェブ上に用意してやりそれをダウンロードさせてページ上で利用することを主眼としているが、ローカルのフォントを置換、つまりＭＳ Ｐゴシックをメイリオに置換するなどということもできる。Firefoxでは3.6から可能になった(Beta版でももちろん可能)。ユーザー・スタイルシートでの利用が中心になると思う。 ＭＳ Ｐゴシックをメイリオに置換する場合は以下のようにuserContent.cssに記述する(userChrome.cssではない)。 @font-face { font-family: "ＭＳ Ｐゴシック"; src: local("メイリオ"), local("Meiryo"), local("ＭＳ Ｐゴシック"); } @font-face { font-family: "MS PGothic"; src:
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
Atomのmodifiedとissued、created
Atomのentry要素では、最終更新時刻を示すmodified要素と公開時刻を示すissued要素、そして作成時刻を示すcreated要素の3つで各エントリの様々な時刻を表現できるわけですが、統一感に欠ける印象の仕様で厄介かなぁと。ま、知ってりゃ機械的に処理できるので問題無いといえば問題無いんですが。 最新の0.3の仕様書によると、 modified The content of an atom:modified element MUST have a time zone whose value SHOULD be "UTC". issued The content of an atom:issued element MAY omit a time zone. created The content of an atom:created element MUST have a time
Vimで"gf"をスラッシュで始まる相対URLに対応させる
Vimではファイル名らしき箇所でgfを押すと、見つけることができればそのファイルを開いてくれる。この機能はとても便利なのだが、HTMLファイルにスラッシュで始まる相対URLでCSSファイルやJavaScriptファイルのURLを書いた場合は、そこでgfを押してもうまく開くことができない。これを解決するためにvimでHTMLとかを編集するときに絶対パスのファイルを開くで公開されているプラグインをちょっと使っていたのだけど、どうやらpathオプションとincludeexprオプションを設定することでも対応できるようだ。Vimすげー。 とりあえず設定から。 autocmd FileType html :setlocal path+=W:/www/test,W:/www/hail2u.net,W:/www/blosxom.info autocmd FileType html :setlocal i
Pure CSSな吹き出し
Twitterで「CSSで吹き出し作るのブクマし忘れててどこにあったか忘れた……」とかつぶやいたらe_luckさんがImage-free CSS Tooltip Pointers - A Use for Polygonal CSS?を探してきてくれた。このエントリでは枠線をつけるために入れ子になっていたりちょっとわかりづらかったので、ものすごく単純化して解説してみようとかなんとか。 Pure CSSな吹き出しのサンプル: Speech Bubbles とりあえず、吹き出しの尻尾を左下に出すもの(サンプル内では4つめのサンプル)を例にして説明していく。HTMLコードは以下のようなもので、bubbleというクラス名を振ったdiv要素がコンテナ、bodyというクラス名を振ったp要素が吹き出しのベース、tailというクラス名を振った空のdiv要素が尻尾になる。 <div class="bubble
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
