スクロールは制御するな - Weblog - Hail2u.net
WWD Japanのウェブサイトがリニューアルして、スッキリした見やすそうな印象のものに変わった。しかし実際のところ見やすさは見せかけだけで、ナビゲーションをクリックしても見当違いのタブに切り替わったり、ニュース一覧からニュースをクリックしたら、要約ページへ移動するだけで、本文へはもう一度クリックしなければならなかったりする。中でもひどいのがMobile Safariでの閲覧だ。 このウェブサイトではスクロールをほぼ自前で制御しようとしているため、常にこのようにMobile SafariのURLバーとツールバーが上下にそれぞれ表示され続ける。その上、最上端にロゴとグローバル・ナビゲーション、最下端に広告がそれぞれ固定位置であるので、コンテンツの領域がかなり制限されている。iPhone 5SやSEどころか6+や7+でさえも致命的なのではないかと感じられる狭さだ。 とにかく文書を読ませようとい
遅延読み込み用のぼやけた画像
Mediumでとある記事を高速にスクロールして読んでいたら、さりげなく画像を遅延読み込みしていることを知った。読み込み発火のタイミングがうまいのかあまり遅延読み込みの存在を感じさせないのもすごいと思ったが、プレースホルダー画像の実装方法が良さそうだった。単純に元の画像を幅30px程度まで小さくしてそれをブラウザーにリサイズさせることでぼやけた画像をプレースホルダーとして表示しているだけだが、十分に機能していそうで目から鱗だった。 画像の遅延読み込みはなかなか曲者で、読み込むタイミングやプレースホルダーとしている画像が悪いと大きくユーザーにストレスを与える。プレースホルダーでよく使われるローディング画像は読み込み中のインジケーターではあるが、同時に何か遅いことをやっていますというネガティブな印象も与えてしまう。ユーザーはローディング画像を見るとスクロールを止めなくてはならないのかと感じること
WebhookからPubSubHubbubへの翻訳
少し前に公開されたIFTTTのMakerチャンネルを使って、GitHubリポジトリーのWebhookをPubSubHubbubの公開POSTリクエストに翻訳するようにした。GETを使った公開リクエストがあまり行儀が良くなさそうなことが前から気になっていたので、Makerチャンネルを使えば良いかなと試したところうまくいった。 Makerチャンネルの有効化 まずはMakerチャンネルのページへ行き、Connectボタンを押す。するとユーザーごとに専用のエンドポイントURLが作成されるので、How to Trigger Eventsというリンクをクリックして、それを確認しておく。 https://maker.ifttt.com/trigger/{event}/with/key/{secret_key} エンドポイントURLはこのような形になっている。{event}は後ほど好きに指定することになる
RSS 2.0 Notes
この文書はRSS 2.0 Specificationを元に、RSS 2.0を解説したものです。正確な仕様についての情報を得たい方は、上記URLを参照してください。 Index RSS 2.0とは何か RSS 2.0の例 channel要素 title要素 link要素 description要素 language要素 copyiright要素 managingEditor要素 webMaster要素 pubDate要素 lastBuildDate要素 category要素 generator要素 docs要素 cloud要素 ttl要素 image要素 rating要素 textInput要素 skipHours要素 skipDays要素 item要素 title要素 link要素 description要素 author要素 category要素 comments要素 enclosure
CSSできれいな斜め線
CSSで斜めに線を引くようなことをするには多少なりとも工夫が必要だった。つまりCSSで作る吹き出し(もう5年前の記事だ)のようにborderプロパティーを使って頑張るしかなかったわけだ。今はlinear-gradient()があるので直観的に作ることができるようになった。しかしきれいに引くとなるとまだ工夫が必要そうだ。 Demo: CSS Diagonal Line borderプロパティーを使ったもの、linear-gradient()を背景で使ったもの、Data URI化したSVGを背景に使ったもの、以上の計3つのデモを作った。 .lg { background-image: linear-gradient( to right bottom, transparent 50%, #f0f 50% ); background-repeat: no-repeat; background-si
フルスクリーンでオーバーレイの検索ボックス
増えてきたフルスクリーンでオーバーレイの検索ボックスだが、まだこれといった無難な実装方法はないように見える。今だとvw/vh/vmin/vmax単位を使ってレイアウト、:target擬似クラスを使ってトグルという形にすれば、ほぼCSSで実現できそうだ。 Demo: Fullscreen Overlay Searchbox デモではShow Searchboxというリンクをクリックすると検索ボックスが表示され、検索ボックスの左上にある✖をクリックすると閉じることができる。実際のウェブサイトではリンクの代わりに虫眼鏡のアイコンでも使ってやれば良いだろう。 マークアップ <aside id="search" class="searchbox"> <h1>Search this site</h1> <form> <input class="query" placeholder="Enter sea
rel=subresourceを併用したCSSの遅延読み込み
クリティカルなんとかの関係やウェブ・フォントにおいて、CSSの遅延読み込みを行う気運は高まっている。様々なアイディアがあって、普通にCSSの内容を読み込んでhead要素に追加するものや、link要素を動的に追加するもの、予めlink要素をrel=stylesheetなしで書いておいて後で追加するものなどがその主なものだ。最後の手法ではrel=subresourceを追加して書いておくと、一部ブラウザーでダウンロードが速く始まるんじゃないかというアイディアを持った。 サポートが広いのでprefetchかなと思ったけど、書いたそのページ内で使うリソースの先読みに使うものではないような印象で、すぐさま使う場合はsubresourceの方が適切なようだ。Chromeがそういうイメージで実装してるという話で、ウェブ標準では特に細かく規定はないようではある。 <html> <head> <style>
xargsからのcURL
1200くらいのURLのリストを渡され、そのURLのファイルをダウンロードする必要があった。今更ダウンローダーをダウンロードしてきて、インストールして、使って、アンインストールするのも面倒だったので、xargsからcURLをつなげてやった。 $ xargs -n 1 -P 4 curl -OL < urllist.txt xargsは、-n 1で標準入力を一行ずつの処理でき、-P 4で指定したコマンドを4つ並行に走らせることができる。cURLでは-Oを使ってURLから保存するファイル名を取り、-Lでリダイレクトを辿るようにする。これで4つ並行にファイルをダウンロードできた。 xargsはもちろん、cURL程になっても使い方を覚えてなくても--helpでなんとなくわかる。こういう--helpやGoogleで使い方や利用例がわかるCLIツールは、ほとんど何も覚える必要がない(どういう目的のツー
InkscapeのインストーラーがChromeでのSVG表示を壊す
Inkscapeのv0.91pre2が出たのでインストールしたところ、ローカルのSVGファイルがChromeで表示できなくなった。どうもInkscapeのインストーラー(多分安定版のインストーラーでは起こらない)が関連付けを変える時に間違ったContent-Typeを設定してしまうことが原因のようだ。 修復はレジストリ・エディターで行うのが一番早そう。 HKEY_CLASSES_ROOT\.svg を開き、Content Typeという名前の文字列の値をimage/svg+xmlにするか削除する。 Chromeに限らずFirefoxでも同様のことが起こるらしい。またBracketsのような内部でWebKitを利用しているものでも似たような現象としてツールバーのアイコンが表示されなくなることがあるらしい。これらで困っている人も同じ手順で直る。
CSSの簡略プロパティー - Weblog - Hail2u.net
CSSの標準仕様では一部のプロパティーに簡略(ショートハンド)プロパティーが用意されている。marginやbackground、fontプロパティーなどがそれ。うまく使うとCSSをかなり短くできるので、積極的に使いたいけど、なかなかの複雑さでそうもいかない。かといって機械的に処理するのも、CSSは人が簡単に書けることを想定して仕様が作られている節がある(根拠はない)のでまた難しい。 先日知ったCSS Shorthand Generatorの内部で使われているshrthndパッケージはまさに機械的に処理するためのもの。でも予想通り、全然ちゃんと機能するものではなかった。 例えばshrthndパッケージでは複数のfont-*プロパティーをまとめることができることになっている。 .test { font-family: serif; font-size: 1.5em; } このように書くと、以下
HTML5 Shivの削除
このウェブサイトは、rem単位を使っていたりと、Internet Explorerだと事実上バージョン9以降でしかうまく閲覧できないようになっている。となるともうHTML5 Shivを使う意味もあまりないので削除した。これでようやく不格好な条件付きコメントを見ないで済む。 条件付き○○というものはうまく機能するが、それの利用には継続したメンテナンスが必要になる。条件付きで何かを特別視するので、プラットフォームに変化が加わるごとに、意図した通りに機能してくれるかどうかや追加で特別視する必要があるかどうかを確認しなければならない。そうしないと古く時代遅れのプラットフォームに依存し続けることになる。 現実世界の多くの仕組みではメンテナンスなしでも大体うまくいく。それはプラットフォームに変化が加わることがあまりないからだ。人々も大体そう感じているので、何もしなければそのまま動くはずだと考えている。
Sassでの色管理
Sassでは色を変数として定義でき、また様々な関数でそれを操作することが可能になっている。そのため色を論理的に管理することが可能になっているが、これといった手法が確立されているわけではない。このウェブサイトでは少しややこしい形で管理するようにしている。どういう目的でこういう複雑な構造になっているのかを簡単に書いておきたい。 基本色の定義 基本色、つまりテーマカラーであったり、本文の背景色や文字色といった見た目のイメージを決定する色は、色コードを直接指定して定義する必要がある。これはほぼ間違いなくみんな同じように書いているだろう。 $color-dark: rgb(60, 51, 48); $color-light: rgb(252, 249, 240); $color-accent: rgb(17, 136, 187); これらは背景色であったり文字色、そしてリンクの文字色として使っている
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で画像を六角形にくり抜く - Weblog - Hail2u.net
Swarmで使われている六角形のプロフィール画像はちょっと流行りそう。CSSだけで行えるように考えておくとなんかの時に役に立つはず。難しく考えずに擬似要素で三角形を作るテクニックを反転させて重ねるだけでも良かったけど、CSSグラデーションで重ねた方がフレキシブルに作れた。 Demo: CSS HEX Clip 切り抜きはCSSグラデーションを上に重ねて行うので、何らかの要素で括る必要がある以外には特別なマークアップは必要ない。 .hexclip { display: inline-block; position: relative; line-height: 1; background-image: linear-gradient( 30deg, #fff 0, #fff 18%, transparent 18%, transparent 100% ), linear-gradient(
CSSのローディング・アイコンのコスト
今までは主にアニメーションGIFで作られていたローディング・アイコンをCSSアニメーションで作るみたいなのが流行っている。面白いとは思うし、ちゃんと作ればスケーラブルなので便利そうでもある。けれどもローディング・アイコンを表示するための空要素が必要になり、かつ後にそれを消さなくてはならない。CSSだけだと面倒くさそうだ。 どういうローディング・アイコンかはこの際問題ではないので、とりあえずmain要素以下に何かしら(仮にサムネイルとする)をロードするまでローディング・アイコンを表示することを考えてみる。普通はJavaScriptでローディング・アイコンの追加→サムネイルのビルド→ローディング・アイコンの削除→サムネイルの追加とやるわけだけど、ローディング・アイコンの追加と削除でDOM操作を伴うのはコストがある気がする。 <main id="result"> <div class="spin
display: noneとレスポンシブ・ウェブ・デザイン
レスポンシブ・ウェブ・デザインとその設計を語る時にdisplay: noneが引き合いに出されることが多いなと感じる。その多用は設計ミスというような具合だ。そういうところは確かになくはないが、多用自体はCSSの貧弱さからくるHTMLの複雑さを意味するだけなのではないかと思う。 レスポンシブ・ウェブ・デザインはコンテンツを様々なデバイスで「収まる」ようにレイアウトを調整することではない。実装としてはそうなることは多いが、実際には多様なデバイスでのコンテンツの一貫性を確保するアプローチであると考えた方が適切なはずだ。その一貫性とはほぼコンテンツへのアクセス性と言って良い。様々な画面でそれを同じように確保するためには、レイアウトの調整だけではなく、構成部品の間引きや移動などが必要となる。 そういった一貫性の確保を同じHTMLを通して行う、とすると実装はほぼCSSに限られることになる。そして今のC
アクティブなナビゲーション項目とmark要素
アクティブなナビゲーション項目、つまり現在のページへのナビゲーション項目はclass属性を使ってactiveなどと付けられることが多い。特に間違ってはいないんだけど、いまいちピンとこない。というかしっくりこない。大体は流されてそうしているけど、このウェブサイトではmark要素を使ってる。 HTML5仕様ではmark要素は以下のようになってる。 The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. mark要素が含まれる要素のコンテキストとは別のコンテキストでの関係性をハイライト等で表したい時に使うと解釈してる(同じコンテキストならemやstrong、そしてb
wildfire.vimでVim力を下げる
wildfire.vimという、カーソルがある辺りのテキストオブジェクトをなんとなく選択してくれるVimプラグインを使い始めた。Vim力が下がる代わりに魂の平穏が得られる。ような気がする。 デフォルトではノーマル・モードで<Enter>を押すとカーソルのある辺りのテキストオブジェクトを選択してくれる。HTMLファイルを編集中なら属性値の上で発動させると、クオートの間を選択してくれる。その状態でもう一回<Enter>を押すとその上位にあるテキストオブジェクトをなんとなく選択してくれる。属性値のクオートの間を選択した状態だと、HTMLタグで括られた全体(など)まで拡大される。 逆方向に縮小することも出来るので、適当にタカタカ<Enter>を押して拡大しつつ、広げ過ぎたら<BS>で狭めるみたいな感じで使えて、とてもいい加減に使える。僕は狭める方だけを<S-Enter>に変えて、サクサク感を上乗せ
Sassの変数名での-と_
SassでBEMを利用して変数名を付けようとして、今までハイフンのみでどうにかしていた変数名を書き換えていた時に気づいたんだけど、Sassの変数名ではハイフン(-)とアンダースコア(_)が同一視される。バグだと思ってIssue立てたら、3.0.0でSCSS記法を追加した時に入れた仕様だという返事だった。 -と_が同一視されるということはどういうことかというと、以下の変数はすべて同じとみなされるということで、すべての変数の値は最後に定義した変数の値になる。 $foo--bar: "foo--bar"; $foo-_bar: "foo-_bar"; $foo_-bar: "foo_-bar"; $foo__bar: "foo__bar"; .test-foo--bar { content: $foo--bar; } .test-foo-_bar { content: $foo-_bar; }
つまらないGruntタスク
Gruntfile.jsをサッと開く手段としてeditという簡単なタスクを勢いで書いたんだけど、無意味でつまらないGruntタスクだった。Gruntには様々なタスクがあり、自分でもNode.jsを駆使して自由に書けるので、色々やりたくなる。けれどもグッとこらえて、ワークフローにおける定型作業の自動化に絞った方が、ワークフローと開発環境、そしてGruntfile.jsに優しい。 grunt-contrib-watchを使ったSassの自動コンパイルやLiveReloadのタスクは確かに便利なんだけど、開発から公開までのワークフローの段階として必須というわけじゃない。これらはタスクというよりも環境なので、別に自分好みの環境を作った方が集中できるし、好みでない環境を押し付けずに(そして押し付けられずに)済む。 また、Gruntでなんでもやることに慣れてしまうと、設定されてるしそれで良いかみたいな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
