ブックマークのおっかけ
ソーシャル・ブックマークはまだそれなりに機能するが、いまだに追いかけるのが難しい。その中ではてなブックマークのお気に入り機能は出色の出来栄えと言えそうだが、やはりブラウザーであのページを見るのは辛い。かといってRSSリーダーで読むのもなかなか難しいと感じる。HBFavは良いものだが、やはりデスクトップでどうにかしたい。 ストック型では色々試した末にはてなブックマークのお気に入りRSSからIFTTTのEmail Digestに貯めて毎日深夜に送っておくという形でしばらく落ち着いた。RSSリーダーでお気に入りフィード読むのは本当に苦行だったが、相当マシな気もする。特に気が向かなかったら読まずにとっておくこと(未読でプレッシャーかかったりしない)も、捨てることもできる。僕は送る時間を夜中の3時にして余裕のある朝にチェックできるようにしているが、みながウェブページを見てブックマークし終わる午後3時
Hender Schemeの財布
どんな財布を買おうか色々悩んだ結果、Hender Schemeのものにした。この財布は同型でシーズンごとに出ていて、これは2015 SSシーズンのブライドルレザーのもの。色で3日悩んだけど、結局黒にした。使いやすいとか機能性が高いとかではないけど、自分の欲しい機能は満たしていることと革の感じが良かったのでこれに決めた。16200円。 ようやく財布(とついでにスマフォ)を鞄に入れるのに慣れてきた。まだポケットが空だと心もとないけれど、財布持ってたっけと鞄を確認することはほぼなくなった。でもポケットに入れないと財布の革がうまく馴染んでこないかもなーと思ってたりもする。
雑
雑な情報を知りたい。キュレーション・メディアに偏ると、知りたいことを集めることしかできないので世界が広がらない。有名人ベースだと多少改善されるけれども、彼らもまた自分のあるべき姿みたいなイメージを持って活動しがちであるので、あまり意味が無い。 ライフハックみたいな概念があるじゃないですか。自分が必要な物だけをクリッピングする。そうすると自分の好きな情報だけが集まってしまって、そこに進化はないんですよ。 書店であったり雑誌のようなサイズがある程度決まっている媒体ならば、入店した・購入した人がさばける範囲で雑な情報を提供することも難しくない。ウェブサイトのような成長し続ける媒体の場合、アクセスした人がストレートに興味を持ちそうな記事の提供は可能ではあるが、雑な情報であるところのアクセスした人を刺激するような記事を提供することがとても難しくなる。 ジャンル特化でウェブログを使い分けたりであるとか
ターミナル画面のマークアップ
Markdown (やその派生)のpre要素になる記法では、問答無用にその中はcode要素でマークアップされる。多くの場合はコードの断片なのでそれでいいんだけど、そうじゃないことももちろんある。例えばCLIプログラムでの操作手順を記載する時のターミナルの画面のコピー。 プログラムによる出力はsamp要素で、キーボードによる入力はkbd要素になるので、以下のようにマークアップするのがベストに近い。 <pre><samp>$ <kbd>node --help</kbd> Usage: node [options] [ -e script | script.js ] [arguments] node debug script.js [arguments] Options: ... NODE_DISABLE_COLORS Set to 1 to disable colors in the REPL
Markdownなど
Markdownは、Markdownを知らない人が適当に書いたテキストでもなんとなく良い感じにHTMLにできちゃうみたいなものだったように思う。HTMLを簡単に書くための記法ではなくて、メールとかで使われてきたプレーンテキストなりの記述方法を良い感じにHTML化してくれるツール。巷に溢れるMarkdownモドキは、HTMLを簡単に書くという目的を持って拡張してしまっているので、その記法がちょっとなーという気がしてあんまり使いたくなかったりする。 有名所だとGitHub Flavored Markdownのフェンス型コード・ブロック記法。```...```とか覚えやすいし書けるけど、「えーこれはなんなんだろう……」という感じしかしない。jQueryで書いていると思いきや、突然のinnerHTML的な気持ち悪さがある。そこだけ違和感が満載というような。 プレビューとかも要らない気がしてしょうが
Style Guide - hail2u.net
Posted on 07 Dec, 2011 in Web Design? hail2u.netで使われているスタイルの解説兼プレビューのページです。スタイルのコードそのものについてはその公開リポジトリを参照してください。このページのマークアップにはおかしいところが多々ありますが、その多くはやむを得ない事情によるものです。 コンテンツの見出しはh2でマークアップされます。ブログでは見出しに続けてfooterが配置され、更新日時とカテゴリをそこで示します。 FacebookのLikeボタンやはてなスターはその対象の最後にまとめて配置されます。つまり、それらが記事に対するものの場合はarticle要素内の最後になりますが、ページに対するものの場合はdiv#mainの最後になります。対してAdSenseの広告は常に最初のセクションの直後に挿入します。 ベース ブラウザーのデフォルト・スタイルシー
Sass - チュートリアル
この文書は古いSassウェブサイトに載っていたチュートリアルの訳で、2013年12月現在もう新しいウェブサイトには存在しません。新しいウェブサイトでのチュートリアルにあたるSassの基本の日本語訳を参照してください。 Translation of: Sass - Tutorial Ruby と Sass のインストール まず、Sass がちゃんと動作するようにします。OS X を使用しているのなら、既に Ruby がインストールされているでしょう。Windows ユーザーならば Ruby のWindows インストーラーで、Linux ユーザーならパッケージ・マネージャーでそれぞれ Ruby をインストールすることが出来ます。 Ruby のインストールが完了したら、以下のようにして Sass のインストールを行います: gem install sass 最初の Sass スタイルシート 非
Vimのstatuslineを最適化する
FuzzyFinderのbufferモードやmrufileモードの補完メニューでパスの真ん中が省略されているのがわかりやすかったので、statuslineにも導入してよりわかりやすくしようという試み。インストール済みのGreasemonkeyスクリプトをちょっと編集する時など、ものすごく長いパスのファイルを編集する時のみ便利。 Vimのデフォルトのstatuslineは以下のようなもの。 これにファイルの種類や文字コード・改行コードなどあると便利な情報を追加した上で、ファイル名を先頭に持ってきて、残りのパスを%<を利用して省略させるようにすると、 こんな感じになる。このstatuslineのコードは、 set statusline=%{expand('%:p:t')}\ %<\(%{expand('%:p:h')}\)%=\ %m%r%y%w%{'['.(&fenc!=''?&fenc:&
HTTPエラーページに意味を持たせよう
Translation of: Adding meaning to your HTTP error pages! by Stuart Colville This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license はじめに ウェブ上で何かを検索しようとすると、既に存在しないページしか検索結果になく、それらへのリンクをクリックすることはよくあるだろう。その開いたページにデフォルトのエラー・メッセージの他に何も情報が載っていなかった場合、多くの人々は戻るボタンを押し次の検索結果を開こうとするだろう。 サイト製作者である我々はもっと訪問者に意味のあるエラーページを作成することができる。そうすればたとえエラーページであっても訪問者をサイトに留まらせ、彼ら
Version Control for Designers
このドキュメントは Version Control for Designers の日本語訳であり、元のドキュメントと同じくソースコード管理に予備知識がまったくない人を想定している はじめに リポジトリの構造 ブランチ 作業の流れ ブランチを切る その他の便利なツール ベスト・プラクティス はじめに What have you done for me lately? バージョン管理、ソース管理やリビジョン管理とも呼ばれているものはあらゆる開発に必須である。なぜなら基本的にはメールやインスタント・メッセンジャーと同じようなコミュニケーションをとることができるツールでありながら、人々の会話ではなくソースコードを元にして機能することができるからだ。 バージョン管理 他のプログラマと簡単に意思の疎通を図ることができる 開発チームでコードを共有することができる デプロイしている「製品」バージョンを別個
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
Linksをサムネイル化した
Linksをサムネイル化してみた。各サムネイルはSimpleAPIのウェブサイトサムネイル作成API頼みなのでNOW PRINTINGばかりだったりするけど、それはそのうち解消されるはず。無駄にポップアップとかさせてみたり。 Simple APIのウェブサイトサムネイル作成APIが返す画像は決まったサイズなので、ポップアップはかなり前に考えたposition: relative;を利用したテクニックでやった。CSSのコードは、 div#contents div.story ul.thumbnail { margin: 1em 0; width: 100%; line-height: 1; list-style-type: none; } div#contents div.story ul.thumbnail li { margin: 0 1em 1em 0; float: left; wi
Last.fm Cover Art
自分のマシンで聞いている曲を記録してくれるLast.fm。その記録からアルバムのジャケット画像を取得し、任意のサイトの一枚絵にしてくれる、Last.fm Cover Artというサービスを見つけた。ジャケット画像を眺めるのが大好きな人にはたまらない。 使い方は至って簡単で、基本はユーザー名(自分の出なくても良い)を指定するのみ。あとは生成する画像のサイズやJPEGの画質、一般的な画像の補正・効果の指定などがオプションであるだけ。横にプレビューが出るので画像補正の指定なんかは確認しながら調整できる。 日本人アーティストのジャケット画像には対応してるような、してないような感じ。よくわからない。 WindowsだったらWebページをデスクトップに表示出来るので、適当な間隔で同期するようにすれば、曲の再生に準じて刻々と変化する壁紙みたいなこともできそう。うざったいけど。個々のジャケット画像のサイズ
prototype.jsの開発メモとGecko DOM ReferenceのHTMLヘルプ
未だにちょくちょくみてしまうprototype.jsの簡単なリファレンスであるDeveloper Notes for prototype.jsの日本語版とThe Document Object Model in Mozillaで配布されているGecko DOM ReferenceのZIP version (古い奴)をHTMLヘルプにしてみた。HTMLヘルプはちょっと作ってみちゃったりすると、HDD上にあるありとあらゆるHTMLのドキュメントをHTMLヘルプにしたい欲求に駆られてしまう・・・のは僕だけですか、そうですか。 prototype.jsの開発メモ Gecko DOM Reference prototype.jsの開発メモの方はHTMLに手を入れて、メソッドやプロパティにidを振り、キーワードでジャンプできるようにした。HTMLヘルプ向けにCSSもちょっと調整。チェックしきれてない説
CSSバグ@IE6: :first-letter
p.valid:first-letter { font-size:200%; } p.invalid:first-letter{ font-size:200%; } と言うように、":first-letter"と"{"の間に半角スペースが入って無いとInternet Explorer 6では無視されるようです。こんなバグもあったのか。30分くらいこれで悩んでしまった。 慣れた書き方を変更するのは苦痛だ・・・。CSS/DHTMLバグ辞典スレッド ver2.0の334に載ってた。セレクタに続けて中括弧書く奴って少ないのかね。 追記@2006/08/31 Quirksモードだと上記バグは発生しない模様。
フォーム部品周り
CSS漬けな今日この頃にふさわしく、フォーム部品のスタイリングのガイダンス、Styling even more form controlsを見つけてみた。様々なブラウザでのCSSによる装飾の無いフォーム部品の見栄えを一覧にしてあり、更にそれにスタイルを適用するとどのようになるかも一覧になってます。フォームはウェブ・デザインにおいて最も悩まされるモノのひとつなので、結構便利な気がする。 単なるボタンとSubmitボタンで結構違いがあることなんかは何気に知らなかった。あわせて、 Fun with forms Styling forms Fieldset, legend and label Tableless forms なども参照すると気持ちよいフォームが作れるかもしれません。 ユーザビリティ的には、フォーム部品にヒステリックにCSSを適用するとユーザーの混乱を招きかねないため、フォーム部品は
hail2u.net - Weblog - 二重枠線ボタン
どこかで「フォーム・ボタンのボーダーにdoubleを指定するとカッコイイぜ！」みたいなのを見つけて、1週間ほど前から使ってみてたりするわけですが、これはなかなか良い気がする。とりあえず憶えておくと即戦力になります。 doubleだとカッコイイとは言っても、実は単にdoubleにすれば良いわけではないようで、四辺のborderを別個に指定し、うまいことベベルっぽくしないとダメな感じ。 僕はシャイで口下手(エイプリルフールは過ぎたのにネタっぽい)なので、言葉では説明できないため、デフォルトのボタンからCSSのルールを増やしていってかっこよさげなボタンを作るプログレスをHTMLでまとめてみました。 borderのサイズはいろいろ試してみればわかりますが、3pxじゃないとうまいことまとまってくれません。 フォーム部品のスタイリングは困ったものなので、こういった即戦力なテクニックを憶えておくとなかな
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 - 圧縮フォルダを使わないようにするとエクスプローラがキビキビ動く
Windows XPの圧縮フォルダというほとんどの人が使っていないと思われる機能(私見)を解除したら、エクスプローラがキビキビ動くようになった気がする。というようなことを某所で言ったら、試した人が「すげぇかるくなった kyo++」とかインクリメントしてくれたので、エントリにしておこうとか。 圧縮フォルダ機能の解除の方法は、コマンド プロンプトで、 regsvr32 /u zipfldr.dll regsvr32 /u cabview.dll と、入力してやるだけ。多分再起動は必要ない。 これにより特にエクスプローラのツリー表示なんかが高速化する気がする。エクスプローラ以外ではファイラーっぽいので特に高速化する感じで、僕の環境ではACDSeeのツリー表示がとんでもなく高速化した。 また、デフォルトの検索機能が圧縮フォルダ内を探さなくなるため高速化し、いつまでたっても終わらないということは少な
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
216 Cross Platform Colors