メモログ
💡 Personal notes about somthing I'm interested in いわゆるPinterest風な縦方向にfloatさせるjQueryのpluginが.net Magazineで紹介されていたので、試してみました。floatさせたいコンテンツのclass（と全体を囲っているコンテナのclass）と、1カラムあたりの幅を指定するだけで、縦方向にfloatさせることができます。便利。写真の記事一覧画面とか、写真があるとやはり映えますなあとか、悦に入っています（写真最近撮ってないな）。 オプションもいろいろあって、jQuery Mansoryに書かれています。isFitWidthをtrueにすると、表示幅にあわせて横に配置できるコンテンツの数を自動的に調整してくれるのでそれを指定。 どのように縦方向にfloatさせるかというと、コンテンツのdivにpositio
メモログ
💡 Personal notes about somthing I'm interested in デザインを変更してみました。前回の変更はこちら。今回はコンテンツ部分はほとんど変えずに、ヘッダー/フッター周りとかを中心に。 メインの変更としましては、今年流行のresponsive web design的な対応をしてみました。Breakpoints.jsというjqueryのpluginを使用すると、bodyに「breakpoint-1024」みたいなclassを表示サイズにあわせて追加してくれるので、そこでCSSを追加しただけというシンプルな方法で。あとviewpointの設定をに変更しました。まあとりあえず動作するところまで作りたかったので、もろもろ随時改善はしていきたいなあと思っています（思っているだけ）。 いまのところCSSで非表示にしているだけなので、コンテンツの出力はするし、画
メモログ
💡 Personal notes about somthing I'm interested in Quora - What kind of automated testing does Facebook do? Facebookのテストエンジニアリグの技術リーダーによると、Facebookに専任のQAチームがいないらしいです ( Facebook has no dedicated QA team )。テストエンジニアはいる。どうやら大量の自動テストをエンジニアが作成/メンテナンスしていて、そのテストを断続的に実行し、テスト結果は通知が届くようにしているみたい。QAチームがやるようなことは自動化しているということか。 そんな話がQuora - What kind of automated testing does Facebook do?に掲載されています。下記にリスト部分のてきとう抄訳
本：効率が10倍アップする新・知的生産術--自分をグーグル化する方法
生産性を上げるための方法を著者の経験をもとにまとめた本。「自分をグーグル化する」という意味は、情報を武器に生産性を上げるといった感じです。全体が280ページほどですが、ざっと3時間ほどで読みました。要点箇所は太字になっているので、流し読みはしやすいです。どうも売れに売れているようで、わたしの持っている本は第七刷でした。発売一ヶ月で七刷まで出てるのはけっこうすごいと思います、たぶん。 本書は6章構成で、情報の活用がいかに重要かという話から、IT系ライフハック、情報を見極める技術、インプットとアウトプットについて、そして生活管理といったような流れで話がまとめられています。所感としては、ライフハックに始まり、ライフハックに終わるという感じの内容。幼少のころからIT機器に関心があったようで、おそらく、そもそもIT機器とか生活を便利にする機械を利用するのが好きな人なのではないのかなと憶測しています。
MTPaginate: Movable Typeでページネーションをする
Six Apart - Movable Type プラグインディレクトリ: MTPaginate MT Extensions: MTPaginate 1.28 ふと、Movable Type でインデックスページをページネートしたいなと思い、実践してみました。MTPaginate というプラグインを使って、ページネーションを行います。MTPaginateは、個人は無償ですが、商用利用の場合は20ドルかかります。 MTPaginate のインストールMTPaginateをダウンロードしてきて、pluginフォルダの中身をMTのpluginフォルダに、mt-static/pluginsフォルダの中身をMTのmt-static/pluginsフォルダにそれぞれアップロードします。 phpファイルの生成phpでないと動作しないので、phpファイルのインデックステンプレートを生成します。「インデック
MT4のダッシュボードにMT3ライクなブログ一覧を表示
My Blogs | Movalog Plugins: Movable Type plugins by Arvind Satyanarayan 小ネタ。MT3以前からMT4を使い続けていると、以前のトップページの方が使いやすいかもと思うときもあります。個人で運営しているブログで、ブログのスタッツがあまり必要がないときはとくに（まさに私）。My BlogsのWidgetはMT4のDashboardにMT3ライクなブログ一覧を表示してくれるWidgetです。My BlogsのWidgetをインストールして、所定のフォルダに追加するだけで利用することができます（あとDashboard画面で追加したWidgetを追加するだけ）。詳細はInstalling My Blogs | My Blogs | Movalog Plugins: Movable Type plugins by Arvind Sa
透明度のクロスブラウザ対応
Cross Browser Transparency | Design Shack Opacity - CSS3 . Info 小ネタ。メモログ：MTIfタグを利用したタブ型ナビゲーションのエントリーで作成した、アクティブ以外のタブには透明度をつけて濃淡の差を出しています（別に透明度で濃淡の差を出す必然性はないのですが使ってみたかった）。指定の仕方は下記のような感じ opacity: 0.8;-moz-opacity: 0.8;filter: alpha(opacity=80); opacityはCSS3の、透明度を割り当てるための指定です。safari 2、safari 3、Firefox 2、IE7など最新のブラウザではすでに対応ずみの指定で、この指定だけでもけっこうそのまま使うことができます。ただIE6や古いFirefoxだとopacityは対応していないので、一緒に「-moz-op
MTIfタグを利用したタブ型ナビゲーション
タグリファレンス：MTif ＭＴ４から追加されたＭＴＩｆタグ | MT エンジニアブログ | スカイアークシステム Movable Type 4 から追加されたMTIfタグを利用して、現在いるページがアクティブな状態になるタブ型ナビゲーションを設置してみました。作業内容的にはMTで奇数行、偶数行ごとに背景色をつける方法と変わりません。今回は分岐の条件をテンプレートの種類（名前）にしています。 まずナビゲーションのHTMLがこちら。アクティブにしたいタブに「here」というclassを指定しています。MTUnless を併用するともう少しかしこいHTMLにできるかもしれません。 <div id="banner-image"> <div id="banner-image-inner"> <div id="topnavi"> <div id="topnavi-inner"> <ul> <li c
MTEntryImages を使って最近読んだ本の画像をリスト表示 - メモログ
Six Apart - Movable Type プラグインディレクトリ: EntryImages MTEntryImagesを使って、最近読んだ本（と音楽CD）の画像をリスと表示してみました。MTEntryImageの良いところはAmazonから貼付けている画像でも取得して表示してくれるところです。作業はMTEntryImagesプラグインをインストールして、下記のようなウィジェットを作成しただけです。 メモログでは、本と音楽の記事にはそれぞれ「book」「music」というタグがついているので、その記事にある画像だけを表示させます。 <div class="widget-books module"> <h2 class="widget-header">最近の本と音楽</h2> <div class="widget-content"> <ul><MTEntries tags="book
なぜCSSフレームワークを利用しないのか
Why I don’t use CSS Frameworks - Warpspire メモログ：Blueprint : CSSのフレームワーク Why I don’t use CSS Frameworks - Warpspireの記事について。CSSフレームワークを利用してもそんなに開発効率は良くならないし、避けがたいブラウザのバグはフレームワークを使っても避けられない。その上、自分のコードと書き方になれてしまっているし、CSSフレームワーク由来のバグを抱えるかもしれないし、コーディングの勉強にならない。だからCSSフレームを利用していない。乱暴に要約するとそんな内容。 Please do not Use CSS Frameworks - Monday By Noon CSS - the antithesis of frameworks « AlastairC もう二つの反対意見。一つ目は
アンビエント・ファインダビリティ
ambient（周囲を取り巻く・完全に包囲している）とfindability（位置特定可能な・特定の対象物の発見のしやすさ）を二つあわせて、アンビエント・ファインダビリティ。直訳すると「周囲を取り巻く特定の対象物の発見のしやすさ」というような感じですが、私なりに解釈するとしたら「自分の取り囲む広大な情報の波から特定の情報を発見する」ようなことを表しているのかと思います。アンビエント・ファインダビリティの世界では、個人は「広大な情報から適切な素早く情報を入手する」ことが肝要で、本書では情報とは何か、情報の見つけやすさとは何かを伝え、最後に台頭しつつある情報を選りすぐる社会的な仕組み（タクソノミーとかフォークソノミーとか）などを次々と紹介しています。 ただ、情報について各論的に紹介するのみにとどめていて、実際にこれからの「アンビエント・ファインダビリティ」な世界でどのように行動すべきか、といっ
Blueprint : CSSのフレームワーク
Raging Thunderbolt. Blueprint 0.4 released blueprintcss - Google Code Blueprintとは、いわゆるひとつのCSS のフレームワークです。ライブラリはbutton.css、grid.css、reset.css、typography.cssの4つのCSSで構成されていて、圧縮版のcompressed.css、ライブラリをインクルードするためのscreen.css、印刷用のprint.cssなどが同封されています。それぞれのCSSはその名の通りで、button.cssはボタン用のCSS、grid.cssはグリッドデザイン用のCSS、reset.cssはいわゆるブラウザのデフォルト設定をリセットするためのCSS、typography.cssはタイポグラフィティ用のCSSです。 わりとシンプルな構成のCSSで、Typograp
YSLOW 勉強 : 6: Move Scripts to the Bottom
6: Move Scripts to the Bottom rules for high performance web sitesの六つ目。スクリプトはできるだけ（HTMLの）下に移動させよう。これも5と同じくレンダリングに関わる話で、CSSは読み込みきらないとレンダリングが始まらなかったのですが、スクリプト（javascript）の場合は読み込み始めると、そこから下に記述されている内容のレンダリングがストップしてしまうので、できるだけ下に置く方がいい。 たとえばアクセス解析スクリプトはHTMLの下の方に移動しても大丈夫そうですね。ただ、そうすると今度はページを完全に読み終えるまでアクセスを計上してくれなくなりそうですけど。
YSLOW 勉強 : 3: Add an Expires Header
3: Add an Expires Header rules for high performance web sitesの三つ目。Expires headerを使って構成要素をキャッシュ可能な状態にしよう、という話。キャッシュを持つことによって、キャッシュを読み込んだあとの不必要なHTTP requestを減らすことができる。WebサーバーがApacheであるなら、ExpiresDefaultの設定を使ってキャッシュする時間を設定することができる。 キャッシュを長く効かせるとファイルを更新してもキャッシュを参照してしまう、という問題が出てきます。なのでファイル名を変更するなどしてキャッシュを参照しないように工夫するとよい。
YSLOW 勉強 : 2: Use a Content Delivery Network
2: Use a Content Delivery Network rules for high performance web sitesの二つ目。 ユーザーの待ち時間の大半は画像やCSSなどの構成要素をダウンロードするのに費やされているという視点から、待ち時間を減らす為にCDN（Content Delivery Network ）を利用しようという話。Content Delivery Network (CDN) とは、ユーザーに効率的にコンテンツを配信するために分散化させたネットワークのことをさします（e-wordもあわせてごらんください）。 CDNは自社で構築する方法もあれば、Akamaiなどのサービス（CDS：Content Delivery Service）を利用する方法もある。けれども、いずれにせよ時間も費用もかかる対策ではあるので、なかなかハードルの高い基準であると思います。
YSLOW 勉強 : 1: Minimize HTTP Requests
YSlow for Firebug 内向きに話題になっていたYSLOWをインストールして試してみるという話。YSLOWはrules for high performance web sites（ウェブサイトを高速にするルール）に記載されている法則に則って、ウェブページの表示を遅くしている原因が何かを教えてくれるFirebugzの拡張プラグインです。 rules for high performance web sites のルールは全部で13個。その一つずつを、小刻みに勉強していこうという試みです。 一つ目は「1.Minimize HTTP Requests」。ユーザーの待ち時間の大半は画像やCSS、javascript、Flashなどのページの構成要素のダウンロードに費やされているから、これらの数を減らして HTTP request の数を減らしていこうということ。ページのリッチさを保ち
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
メモログ
メモログ
YSLOW 勉強 : 5: Put CSS at the Top