スクロールは制御するな - Weblog - Hail2u.net
WWD Japanのウェブサイトがリニューアルして、スッキリした見やすそうな印象のものに変わった。しかし実際のところ見やすさは見せかけだけで、ナビゲーションをクリックしても見当違いのタブに切り替わったり、ニュース一覧からニュースをクリックしたら、要約ページへ移動するだけで、本文へはもう一度クリックしなければならなかったりする。中でもひどいのがMobile Safariでの閲覧だ。 このウェブサイトではスクロールをほぼ自前で制御しようとしているため、常にこのようにMobile SafariのURLバーとツールバーが上下にそれぞれ表示され続ける。その上、最上端にロゴとグローバル・ナビゲーション、最下端に広告がそれぞれ固定位置であるので、コンテンツの領域がかなり制限されている。iPhone 5SやSEどころか6+や7+でさえも致命的なのではないかと感じられる狭さだ。 とにかく文書を読ませようとい
Dribbble Highlights of the dayのフィード
ちょっとした考えがあってパーソナライズされたフィードをフィード・リーダーで読むことをやめはじめた。そこでDribbbleはPopularフィードを読みはじめたのだけど、とてもじゃないけど読める量ではない。Popular以外にも前日に人気のあったショットが9つほどピックアップされるHighlights of the dayというページがあるので、このページからPipesでフィードを作成して読むことにした。 1日に100以上記事が流れてくるPopularと違って、Highlights of the dayだと多くても10記事くらいに抑えられる。そのままだとサムネイルが小さいが、少しいじって大きなものにしておいた。Pipesなのでやはり常に遅延があるけれども、元が前日のダイジェストなので数時間の遅延は問題にならないはずだ。更新も日本時間の9時くらい(UTCで日付が変わる辺りに更新されているようだ
Grid Overlay: The Lasy Way
before擬似要素を利用したグリッド・オーバーレイを作成してみました。pointer-eventsプロパティでnoneを指定することによって、グリッド画像が手前にあるのにも関わらず普通に文字列を選択したりリンクをクリックしたりできるようになります。 Demo: Grid Overlay: The Lazy Way 詳しくはデモページを読んでください。グリッド画像はCSSグラデーションなので、最後にちょろっと書いてあるようにグリッドサイズは変更可能です。溝とカラムの比率は変更できませんが……。 poiner-eventsプロパティはなかなか奥が深そうです。 追記 ダブルクリックでグリッドをトグル出来るようにしてみたのでデモにも反映させました。 <style> body.hide-grid::before { background-image: none; } </style> <scrip
Draw lightning in Photoshop 7
1. 適当な大きさ(ここでは384*256でやってます)で新規画像を作成 2. 黒(#000000)→白(#FFFFFF)の線形グラデーションで、上端から下端まで塗りつぶし 3. メニューから、フィルタ→描画→雲模様 2を適用。 4. メニューから、イメージ→色調補正→階調の反転(Ctrl+I)を適用 5. メニューから、イメージ→色調補正→レベル補正(Ctrl+L)を、入力レベルを左から73/0.10/255で適用 6. メニューから、イメージ→カンバスの回転→90°(時計回り)を適用(もちろん半時計回りでも可) 7. メニューから、イメージ→色調補正→カラーバランス(Ctrl+B)を適用し、色を調節 以上。
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"の評価を下げてくれれば、場合によっては無視してくれれば、良いんじゃないかとかそんな感じです。まぁユーザーのページがサブドメインで切られて
preの背景をブラウザの幅いっぱいに拡大する
ここ最近のコードブロックのスタイリングの流行りに、本文よりもコードブロックが左右に飛び出すようなデザインがある。有名所だとQuirksModeで見ることができる(ここが発祥かもしれない)。このデザインはmarginプロパティで負の値を指定し、paddingプロパティでその分戻すことによって実現している。そのため非幅固定か幅固定でもQuirksModeのように左寄せならこの方法で実現できるが、うちのサイトのように幅固定で中央寄せな場合は左右のマージンが不定なため実現できない。しかし:before及び:after擬似要素を使うまったく別の方法でも実現することができた。 Demo: Expand pre Background ブラウザをリサイズしても幅固定と中央寄せのレイアウトを崩すことなくpre要素の背景がブラウザの幅いっぱいに拡大しているように見えるのが確認できると思う。 pre { pos
リスト項目内に見出し
2つ前のエントリで書いてしまったウェブページ全体の見出しをli要素にぶち込むという案に関してTwitterで言及されていた。これについてはエントリを書いた後ちょっと考えたので、返答がてら(簡単にリプライしといたけど)エントリにする。 まずTwitterでの言及について。HTML 4.01においてdt要素は、 <!ELEMENT DT - O (%inline;)* -- definition term --> なので、インライン要素しか含めることが出来ない。つまり、そもそも見出しを入れることは許可されていない。対してli要素だと、 <!ELEMENT LI - O (%flow;)* -- list item --> なので、だいたい何でも入れることが出来る。つまり文法的な話だとli要素ならOKで、dt要素だとよろしくないとなる。これはHTML5でも似たような話で、dt要素の内容モデルはフ
物事をシンプルにするます
ヘッダが主張しすぎな感じとかがちょっと飽きてきたので、ちょっとだけリニューアルした。ロゴとヘッダ変えただけ。緑ももうやめようかな……とは考えたが面倒になったのでそのままで……。Ctrl+F5！ ロゴ 手持ちのフォントで"h"だけを打ち出して良さそうなのを選んだだけという。使ったフォントはJandlesで、MyFontsから無料で手に入る。ベベルるかグラデるか迷った末グラデった。もうアルファチャンネル付きのPNGファイルでいいよね？ いいよね！ ロゴの配置はちょっと悩んだ。マージンに負の値を入れてfloatさせればいけそうな気がしたが、それではコンテンツとかぶさるように配置するのは無理な感じだった。また、コンテンツの左右のマージンが一定ではないので、absoluteでも正確に配置できない。とりあえず親要素をrelative、ロゴ部分をabsoluteにしてやって、親要素を基準にしてロゴを絶対
mod_rewriteでコメント・スパム対策の効果
そういや以前書いて実際に利用しているmod_rewriteによるスパム対策の効果のほどをまったく書いてなかったので、どれくらい効果があったのか書いてみようかなと。結論から言うと、これ以外対策は必要ないかもくらいな絶大な効果を発揮しています(多分)。 多分としたのはちゃんとログを読んでないからです。ここ2週間ほどのログをざっと調べた感じでは誤爆が5件、撃墜失敗が2件、撃墜が1000件以上という感じですね。これくらいの誤爆率なら許容範囲だと思います。結局リファラをチェックすればそれでお終いとかそういう話なのか。 対策コード自体は、以前のエントリの時と少し変わっており、 RewriteEngine on RewriteCond %{REQUEST_METHOD} POST RewriteCond %{REQUEST_URI} \.writeback$ RewriteCond %{HTTP_REF
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・正の値を返すことによって要素の順序を決定するので、その関数がランダムに値を返せばランダ
未整理のブックマークをブックマークツールバーに表示
最近はブックマークを適切なフォルダに整理することを放棄して、どんどん未整理のブックマークに放り込み、ロケーションバーから絞込みしやすいように適当に半角英数でタグ付けするだけな感じで生活している。これで大抵の場合は問題ないが、Fx3.5では未整理のブックマークには履歴とブックマークの管理のウィンドウからしかアクセスできない(よね？)ので、一覧したい時などにかなり不便。ブックマークツールバーにでも表示させられれば良いのになぁとちょっと調べてみたら結構簡単に出来たのでメモ。 未整理のブックマークはFirefox内では以下のようなで参照されているので、これをブックマークすれば良い。 place:folder=UNFILED_BOOKMARKS 具体的には下記スクリーンショットのようにしてブックマークを作成するだけ。いきなりブックマークツールバー上に作成すると、フォルダにならずクリックしても「pla
jQueryプラグイン: Query YQL
Yahoo! Query Language - YDNに式を指定するだけでクエリを投げられ、コールバック関数で結果を受け取れるようにするQuery YQLというjQueryのプラグインを作った。jQuery.getJSON()でもそんなに手間がかかるわけではないけど、エンドポイントとかcallback=?とか書くのがちょっと面倒だったのでプラグインにした。実装するのに2分、名前を考えるのに15分。 ソースを見ればわかる通り、jQuery.getJSON()とほぼ同じで、jQuery.get()のラッパー。将来を見据えてエンドポイントは設定で指定できるようにしようかと少し考えたけど、それは別にQuery YQL v2(またはQuery YQL v1)プラグインとか作ってやれば良さそうだと思ったので実装しなかった。色々オプション設定できるようにして複雑化させたらこのプラグインを書いた意味ないし
はてなブックマークの新着ブックマークとlivedoor Reader
このサイト全体のはてなブックマークでの被ブックマークをトラッキングしようとsitemap.txtを元にしたPipeを作ったのだけど、あんちぽさんに「URLで絞り込んで新着ブックマークのトラッキングできるよ」と教えてもらった。はてなにはなんでもあるな。この機能にはフィードも用意されているので、これをlivedoor Readerで購読すればOK……と思いきや、明らかに被ブックマーク情報が飛び飛びでしか閲覧できなかった。原因はフィード側ではなく、LDR側の仕様によるものみたいだ。 LDRではフィードの記事はlink要素の値で管理されているようで、link要素の値が同じitem要素が複数存在するフィードの場合、常に新しいitemの方で上書きされてしまう。そのため場合によって、LDRのクローラーが巡回する合間に複数のユーザーにより同じURLがブックマークされた時など、は記事が欠落することになる。
rev="canonical"
海の向こうで一気に議論が過熱したrev="canonical"ネタ。ざっくりまとめると、TwitterやSMS等の文字数制限のあるメディアで長いURLを投稿するためによく使われてるURL短縮サービスはアレだよね……というところから始まって、じゃぁ個々が自前で短いURLを用意してやって機械的に辿れる仕組み、rev="canonical"を使おうぜ！ という感じ。 URL短縮サービスの提供する短いURLは、on url shortenersで触れられているようにいくつもの問題点がある。一番身近なのはスパムの温床になっていること。インバウンドリンクの追跡が不可能であることなんかも気になる人が多いかもしれない。この話題が再燃した一番大きな原因はDiggBarの登場で、そこらへんの細かいところは短縮URLは必要悪か、単なる悪か。に詳しい。 「短縮URLは必要悪か、単なる悪か。」の最後で触れられている
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
@biglobe.jp
Mr