2011年4月28日木曜日

さらに改良されたclearfix

[CSS]スタイルシートの量を少し減らした、新しいclearfix -micro clearfix | コリス
この新しいclearfixの対応ブラウザは、下記の通りです。

Firefox 2+
Safari 2+
Chrome
Opera 9.27+
IE 6+, IE Mac

IE6があるうちはclearfixもそう変わらないだろうなと思っていたが、先日改良版が出たと思ったらさらに改良版が出た。

dispaly:tableという珍しいのを使うのが肝かな?

YouTube創業者が Delicious.comを Yahooから買い取った

Yahoo、DeliciousをYouTubeのファウンダー2人に売却(公式発表)
本日(米国時間4/27)、YouTubeの共同ファウンダー、Chad HurleyとSteve ChenはDeliciousのテクノロジーをYahoo!から買収したことを発表した。彼らはユーザーに愛されてきたこのサービスの運営を継続し、さらにウェブでもっとも興味あるコンテンツを発見する機能をさらに改良、拡充する予定だ。

これでしばらくはDeliciousも安泰か?

2011年4月25日月曜日

Google検索結果で Greasemonkeyが動かなくなった問題を回避する方法

Twitter / @「にわかダンサー」: Google検索結果がスニペットを非同期に取るように ...
Google検索結果がスニペットを非同期に取るようになって、Greasemonkeyで独自に情報付加するツールが効かず困った。右上の歯車ボタンから「検索設定」→オートコンプリートの「検索ボックスに予測を表示しない。」を選択→保存で回避。いずれガード不能になるんだろうか。

GreasemonkeyやアドオンのOptimizeGoogleのフィルタが効かなくなって困っていたら、Googleリアルタイム検索で上記を見つけた。
真似してみたら解決した。

IE9では 正しいContent-Typeでないと JavaScriptがブロックされる場合がある

IEのMIMEタイプ取扱い方法の変更 - 技術ブログ読み日記
SCRIPT要素の応答にサーバが「X-Content-Type-Options: nosniff」ヘッダをつけた場合、正しいMIMEタイプでなければスクリプトをロードしない*1。
JSONPを使っているサイトは、MIMEタイプをちゃんと設定しないとうまく動かなくなるとのこと。

これかー。

PHPでJavaScriptファイルやCSSファイルを生成してるときにContent-Typeを指定しないと「☓☓☓☓からのスクリプトはMIMEのタイプが一致しないためブロックされました」ってなる。

2011年4月22日金曜日

IE6以下では botder-styleの dottedが dashedになるらしい

点線と破線の表示(IE/dashed、dotted):スタイルシート(CSS)辞典 - HTMLタグボード
CSSで定められる線種のスタイルはいくつかありますが、この中に点線(dotted)、破線(dashed)という線種があります。通常のブラウザでは、点線を構成する1点は「丸」で、一方、破線を構成する1点は「四角形」で表示するのが一般的です。

しかし、IEでは線の太さを1ピクセル(px)で表示した場合に限り、この点線と破線のスタイルに違いがなく、点線が破線で表示されてしまいます

ふむふむ
.

Twitter Searchも Thriftを採用したらしい

【これはすごい】Twitter検索を3倍高速化した記事の翻訳 - nokunoの日記
BlenderはNettyを使って構築されたThriftとHTTPのサービスである。NettyとはJavaで書かれた高スケーラブルなNIO(JavaのNew IOライブラリ)クライアントサーバーライブラリであり、Nettyによって様々なプロトコルのサーバーやクライアントを素早く簡単に開発できるようになる。我々は他の様々な競合、例えばMiraやJettyの中からNettyを選んだ。なぜならNettyはクリーンなAPIとよいドキュメントを持っていたし、より重要なことにTwitterの他のプロジェクトがこのフレームワークを使っていたからだ。NettyをThriftと組み合わせるために、我々は簡単なThriftのコーデックを書いた。ソケットから読み込むときにはNettyのチャンネルバッファから来るThriftのリクエストをデコードし、ソケットに書きこむときにはThriftのレスポンスにエンコードできるようにした。

ThriftはFacebookが作ったプログラム連携用のプロトコル。プログラム言語を越えてやりとりでき、わりとオーバーヘッドが少ないらしい。
キャズムを超えるか?

2011年4月21日木曜日

Google Page Speedのオンラインサービス版が出たらしい

Page Speed Online

そして、Page SpeedとYSlow!を同時に試してくれるオンラインサービスもあるらしい。

Page Speed Online も出たよ  |  gaspanik weblog
たまたまオンライン版のPage Speedが出ましたが、「GTmetrix」というサイトではYahoo!のYSlow!とGoogleのPageSpeedの双方を同時にチェックできます。

試してみたらなかなかよいが、YSlow!のCDNの登録が(たぶん)できないのでそこが残念。

ディレクトリ内を再帰的にgrepする方法

あるディレクトリ以下を再帰的に grep する方法 - Shoulder.jp
あるディレクトリ以下を再帰的に grep するには、いくつかの方法があるが、よく使うのは、検索したいあるディレクトリまで行ってから以下のコマンドを打つやり方である

メモメモ。
.

2011年4月19日火曜日

Amazon Web Serviceに Flash Media Serverが追加された

【AWS発表】 Adobe Flash Media Serverを用いたライブストリーミングを従量課金で簡単に利用可能に - Amazon Web Services ブログ
今回の発表により、AWS上でAdobe Flash Media Serverを用いて、音声/ビデオのライブストリーミングを安価な従量課金で用いることが可能になりました。今回の構成では、Amazon EC2、 Amazon CloudFront、Amazon Route 53を用いており、 CloudFormationのテンプレートを用いて即座に起動することが可能です。

これは驚きの選択。Flash Media Server(以下FMS)といえば動画のLIVEストリーミング以外にも(録画済み)動画のストリーミング配信や音声のみの配信、チャットなどの双方向なやりとりもできるはずだが、やはりメインディッシュはLIVE動画(と音声)のストリーミングなのだろう。

配信側のクライアントはAdobe Flash Media Live Encoderというのを使うと楽らしい。
視聴側のクライアントはやはりFlashで自分で作るのかな。オープンソースなビューワはたくさんあるから、簡単にすませるならそういうのもありか。

Subversionで変更のあるファイルだけコピーする方法

Subversion のリポジトリから、変更されたファイルのみを取り出す方法 | バシャログ。
さて、Subversion のリポジトリから、「修正をかけたファイルのみをエクスポートしたい。しかもディレクトリ構成も維持したまま」という事例はよくあるかと思います。それが取り出せれば、そのまま上書きするだけで修正をアップでき、ミスも少なくなると思います。

RevisionのCompareした後にExportするのがポイントか。

HTTPS + Basic認証の脆弱性

どさにっき
Basic 認証は平文で送られるから盗聴される危険がある、HTTPS ならば暗号化されるから安全、といわれることがあるが、上記の手法は HTTPS を使っていても防ぐことはできない。

HTTPSを使ってるWebサーバでディレクトリごとに別の管理者がいて、なおかつ自由にBasic認証をかえられるというレアなけーすではあるが。

2011年4月15日金曜日

ブラウザ上でRubyを実行できるサイト

try ruby! (in your browser)
Try out Ruby code in the prompt above. In addition to Ruby's builtin methods, the following commands are available:

ブラウザ上でコンソールのようにRuby(1.9)を実行できる。
さらにhelpのチュートリアルに従って入力していけば、Ruby初心者用の操作を覚えられる。
すごい。

clear fix (子要素のfloatを 親要素:afterの clear: bothで解除する)

いまどき ? いまさら ? clear fix のコード | ヨモツネット
float によるレイアウトフローをクリアランスする手法として知られる通称 "clear fix"、昔は長いコードを書いていましたが、今ならもっと短くても問題ないです。

古典的な方法よりシンプルでスマートなclear fix。
探しても見つけにくそうなのでメモ。

2011年4月14日木曜日

Google Chromeに印刷プレビューがやってくる

Google Chromeに印刷プレビューが隠しコマンドで実装されてる!! …だけどうまく動かない >_< - オタしましょっ

…確かにプレビューページなんだけど、肝心の内容が表示されないのだ。

Chrome12(dev)で試してみたら、使い物にはならなかったけど内容が少し表示された。
(Google Adsenseのとこだけ普通に表示されて、その他の部分は真っ黒。)
開発は進んでいるようだ。

Web Fontsのスマートな書き方

Webフォント (Webfonts)を使う際の最新記述方法 Fontspring Syntax (The New Bulletproof@Font-Face Syntax) - フォントブログ
IE9以下ではsrc:で複数のフォントを指定すると無視されてしまう。
というバグがあり、かつローカル上のフォントをも探そうと試みます。これを回避するためには、EOTを先に指定しておき、かつ.eotの後に ? をつけておきます。こうすることで、IEには残りの記述をクエリーとして認識させることができるため、残りのWOFFやTTF/OTF、SVGの処理を無視させることができます。

なんというハック。
Google WebFonts Directoryに日本語フォントが登場するのはいつの日か...

2011年4月13日水曜日

日本語に適用できるWebFontsのまとめ

WebFonts として利用できるフリーの和文フォント | ヨモツネット
WebFonts はとても便利で今まで似なかった表現ができる仕組みですがフォントファイル使用時のライセンスは難しく、本当に使えるのかがわかりづらいです。そこで一つずつライセンスを読み、WebFonts として利用できるフォントをまとめてみました。

おお素晴らしい。けっこう色いろあるのね。
で、一通り読んで、コメント欄のフォントが読みやすい!と思ったらメイリオだった。

VMwareの VMをコピーする方法

VMWare (on Windows) のVMをコピーする - 大切なものは目に見えない - mahataの日記
コピー後のファイルで、一点だけ変更すべきポイントがある。C:\Virtual Machines\CentOS5_1\Other Linux 2.6.x kernel.vmx のdisplayNameで始まる行である(上の画像で選択反転している部分)。これはVMWare のコンソールで表示される文字列で、これがユニークでないと、「現在どのVMをいじっているのか」が把握できなくなる。

このdisplayNameの変更をしておかないと面倒になる。

ということで手順としては、
  1. VMのディレクトリごとコピー
  2. 上記のdisplayNameを変更
  3. VMware Infrastructure Web Accessで「Commands」の「Add Virtual Machine to Inventory」をしてコピーしたディレクトリ内のvmxファイルを選択する(画面にVMが追加される)

さらに、VMware Infrastructure Web AccessでVMを選択し、「Commands」の「Generate Virtual Machine Shortcut」からショートカットを作成しておくと便利だが、これはIEでしかできない(?)

IE10がダウンロードできるらしい

[速報]Internet Explorer 10をマイクロソフトがデモ。今日からPlatform Preview版を公開。MIX11 - Publickey
このInternet Explorer 10 Platform Preview 1をietestdrive.comで公開する。すでにダウンロード可能だ。

Platform Previewというのはアルファ版くらいの扱いなのかな。
ietestdrive.comからダウンロードするMSIはファイル名にバージョン番号が入ってないけど後で試してみよう。

2011年4月8日金曜日

PDOの MySQLはデフォルトではサーバサイドの Prepared Statementを使わないらしい

ぼくがPDOを採用しなかったわけ(Shift_JISによるSQLインジェクション) - 徳丸浩の日記
PHP5.2.1から、PDO_MYSQLは、デフォルトではクライアントサイドのプリペアードステートメントになったようですね。

いつの間に変えたんだってもうかなり前からずっとそうだったのか!!!

HTML5の input要素の type属性ごとの使用可能な属性値

input-HTML5タグリファレンス
以下は、type属性がどの値の場合に、どの属性を指定できるかを示した表です。

この表がよくまとまってる

HTML5で実装された formの Validationを JavaScriptから操作する

ここに仕様が書いてあった。

制約 - フォーム - HTML要素 - HTML5 タグリファレンス - HTML5.JP
要素は、独自の妥当性エラー・メッセージを持つことができます。当初は、要素は空文字列にセットされた独自の妥当性エラー・メッセージを持たなければいけません。その値が空文字列でないとき、その要素は独自エラーに陥っている ということになります。それは、setCustomValidity() メソッドを使ってセットすることができます。ユーザーエージェントは、コントロールに問題が生じていることをユーザーに警告するときは、この独自妥当性エラー・メッセージを使うべきです。

肝はsetCustomValidity()か。

2011年4月7日木曜日

HTML5の classList APIの仕様

HTML5 classList API
The classList object, added to all nodes within the DOM, provides developers methods by which to add, remove, and toggle CSS classes on a node. classList also allows developers to check if a CSS class has been assigned to a given node.

lengthとかitemはループで回して使うことを想定してるのかな。

2011年4月5日火曜日

IE9で Google Maps API V3の overviewMapControlが表示されない問題が解消した

IE9で Google Maps API V3の OverviewMapControlが表示されない問題が解消するらしいでFixedNotReleasedになり、その後Fixedになってからもしばらく駄目だったけど、ようやく解決したみたい。
アナウンスはないのかな。

2011年4月4日月曜日

PHPの crypt()を自力で実装する例

php - How to create md5 hash as the crypt function generates with a md5 salt using the md5 function, not the crypt function? - Stack Overflow
Here's code in Java that implements the same function. This may help you to do the same in other languages.

For PHP, you may want to look into this code:

思ったよりややこしいのね。base64_encode()とかmd5()は使えないのかしらん。

2011年4月1日金曜日

mb_convert_kana()はクォーテーション等を変換しない

PHP関数 mb_convert_kana() の罠 ( しゃいん☆のブログ| 名古屋市 Webシステム開発 サーバ構築 ネットワーク構築 株式会社コネクティボ )
そして、対象外となるのは以下の四つのみということです。
U+0022: " (ダブルクォート)
U+0027: ' (シングルクォート)
U+005C: / (バックスラッシュ)
U+007E: ~ (チルダ)

半角にしないのはXSS対策か。全角にしないのは対象の特定が半角と同じだからか。
でも大なり小なりを変換したらXSSは可能な場合が多い気がする。

携帯向けにページ全部を半角化するような処理で、全角で書かれたHTMLが半角になってHTMLとして有効になってしまうというのはありそう。
携帯ならJavaScriptが使えなくてXSSとしては成り立たないことが多そうだが。(最近の携帯はそうでもないのか?)

ブログ アーカイブ

カテゴリー