POSTORO: 2011/02

2011年2月28日月曜日

IEには br要素を連続すると偶数個目の brが無視されるバグがあるらしい

スタイルシート［CSS］/テキスト・フォント/文字の間隔を指定する - TAG index Webサイト

【IEの不具合について】

このスタイルを設定した要素内でbr要素を連続させると、2つ目（偶数個目）のbr要素が無視されてしまいます。例えば、5つのbr要素を連続させた場合は、2番目と4番目のbr要素が無視され、3つ分の改行しか入らなくなります。

br要素に対して letter-spacing: 0 または letter-spacing: normal を指定すると、この不具合を回避することができます。

※IE 8では、上記の不具合は発生しないようです。

上記のようにbrのletter-spacingに0かnormalを指定することでこの現象は起きなくなる。
上記にはIE8では発生しないと書いてあるが、手元のIE8では発生した。（互換モードとかの関係？）

印刷用CSSのフォントサイズ等の単位は ptがいいらしい

印刷用CSSの文字サイズ単位はpt？ | アイビーネットblog

この事からわかるとおり、ptの場合はモニター解像度(dpi)が変わっても印刷サイズは変わりませんが、pxの場合はモニター解像度が変わると印刷サイズが変わります。

mmとかはどうなんだろ？

ウィザード形式でAmazon EC2で Webアプリを立ち上げられるサービスが開始

【AWS発表】 AWS CloudFormation: 複雑なシステムもクラウドレシピからワンクリックで作成可能に！ - Amazon Web Services ブログ

さて、まとめますと、CloudFormationを使うことにより、アプリケーションスタック全体を非常に簡単に、作成、管理、破棄することができます。AWSが、重要な基盤レベルについては面倒を見ますので、皆様は、素晴らしいアプリケーションを作成することに、集中することができます。

上記では難しく説明しているが、具体例を見たほうが分かりやすい。

WordPressの場合：AWS CloudFormationでWordPressを立ち上げてみました: Amazon EC2でWordPressをやってみる　～カスタマイズまで
Redmine（Rails製のプロジェクト管理ツール）の場合：AWS CloudFormationを使ってみよう - redmine編 -

他にも下記のサンプルテンプレートが提供されている。

Drupal
Gollum Wiki
Joomla
PHP Hello World Application
Rails Hello World Application
Tracks Management System
Insoshi Social Networking Platform
Amazon ElasticBeanstalk Hello Wolrd

Gollum、Tracks、Insoshiは聞いたことないけど海外では有名なのかな？WikiはGollumしかないのが意外。
Hello World ApplicationsはDBも入れてくれるのかな？

起動や管理はおなじみのManagement Console（Amazonが提供しているAWSを管理できるWeb画面）からできる。（Management Consoleのタブがどんどん増える．．．）
↓
AWS Management ConsoleのAWS CloudFormationサポート - Amazon Web Services ブログ

2011年2月25日金曜日

本当は奥深いユニコードの世界

UTF-8コード表(1)

e38bb0 ㋰㋱㋲㋳㋴㋵㋶㋷㋸㋹㋺㋻㋼㋽㋾
e38c80 ㌀㌁㌂㌃㌄㌅㌆㌇㌈㌉㌊㌋㌌㌍㌎㌏
e38c90 ㌐㌑㌒㌓㌔㌕㌖㌗㌘㌙㌚㌛㌜㌝㌞㌟
e38ca0 ㌠㌡㌢㌣㌤㌥㌦㌧㌨㌩㌪㌫㌬㌭㌮㌯
e38cb0 ㌰㌱㌲㌳㌴㌵㌶㌷㌸㌹㌺㌻㌼㌽㌾㌿
e38d80 ㍀㍁㍂㍃㍄㍅㍆㍇㍈㍉㍊㍋㍌㍍㍎㍏
e38d90 ㍐㍑㍒㍓㍔㍕㍖㍗㍘㍙㍚㍛㍜㍝㍞㍟

こんな（誰も使わないような）ものまであるんだ．．．

一番驚いたのが1文字の「㍿」。「㈱」や「㏍」ならまだわかるが．．．

2011年2月24日木曜日

jQueryで動的に CSSファイルを追加する方法

他の要素と同じようにappend()とかappendTo()しても、CSSファイル（link要素）の追加ができない。（IE8のみで確認。）

でも下記で紹介されているやり方ならなぜかできた！

How-To: Load Javascript and CSS dynamically with jQuery | TopSecretProject

$("head").append("<link>");
css = $("head").children(":last");
css.attr({
rel: "stylesheet",
type: "text/css",
href: "/javascripts/jwysiwyg/jquery.wysiwyg.css"
});

append()の後、メソッドチェーンしないでchidleren(":last")で取得するのがポイントらしい。
メソッドチェーンでappend(..).attr(..)ってやるとうまくいかない。
なぜかは分からないが。link要素だけ特別なのか？

ちなみにchildren(..).attr(..)の方はメソッドチェーンしてもOK。

IEが width / heightを無視してボックスを拡大してしまうバグの回避方法

要素のはみ出しの処理の不具合（IE/overflow）：スタイルシート（CSS）辞典 - HTMLタグボード

しかし、IEでは要素やボックスに「widthとheightプロパティ」を設定していて、かつ「overflow」プロパティが指定されていない、または「overflow:visible;」を指定している場合でも、文字が要素に収まりきらないとき、本来なら文字がはみ出て表示されるはずのボックスが勝手に拡大してしまうという不具合があります。

枠線の中に表示して、はみ出す場合はそれが分かるようにしたいのに、IEがボックスを勝手に大きくしてしまうのではみ出すはずがはみ出さない問題が発生。

今回はボックスで囲うのを諦めて、下記のような枠線を表示にすることにより回避した。

div#waku {
    width: 100px;
    height: 100px;
    z-index: -1;
    position: absolute;
    top: 10px;
    left: 10px;
    border: solid 1px black;
    background-color: white;
}

z-indexを付けてるのは枠内の背景を白にしたら他の要素が見えないように塗りつぶされたので、他の要素の後ろにするため。

jQueryで HTML文字列から DOM要素を生成する場合の注意点

jQuery(html, [ownerDocument]) - jQuery 日本語リファレンス

また、スラッシュを含むような文字列（imgタグのパスなど）を渡す場合は、これをエスケープしてやる必要があります。

$('<a href="foo">bar</a>')のようにDOM要素（jQeury要素？）を生成できるけど、文字列にスラッシュがある場合はエスケープが必要らしい。
何でエスケープ？バックスラッシュ？？

JavaScriptで動的に CSSファイルを追加する方法

floatingdays: JavaScriptによって動的に CSSを追加する場合のブラウザごとの挙動の違い

var link2 = document.createElement("link");
link2.rel = "stylesheet";
link2.href = "test2.css";
document.getElementsByTagName("head")[0].appendChild(link2);

このやり方でないとIEが対応していないらしい。

JavaScriptファイルを追加する場合は → floatingdays: JavaScriptによって動的に script要素を追加する場合のブラウザごとの挙動の違い

AdSenseポンパレ祭りは終了か？

あちこちのサイトでGoogle AdSenseで、ポンパレとグルーポンの画像ばっかり表示される状態が続いてたけど、今日あたりから少し減った気がする。
ポンパレは温泉のお姉さんからすき焼きに変わっちゃったし。インパクトが減った。
グルーポンの頻度は変わってない気がするので、ポンパレが一歩引いたのか？

2011年2月21日月曜日

Windowsで Apache + PHP5.3が動かない場合の対処法

Andante PHP、Windows+PHP5.2.6以降でPostgreSQLに接続できない

Apacheを再起動後、
と記述したスクリプトにアクセスし、pgsql(PostgreSQL)の欄があるか確認します(駄目な場合はOSを再起動して再確認)。

Windows環境変数のPathにPHPのフォルダのパスを追加して、Apache再起動、それでも駄目ならWindowsを再起動。

Twitter検索の Topsyに待望の公式Widgetが登場！

Topsy ウィジェットの設定について | Unformed Building

Topsy で検索すると、検索結果の詳細ページの右側にウィジェットが表示されています。
この下にお持ち帰りコードがあるので、ちょっと使うだけならそのまま貼れば OK です。

これはよいかも。
Twitter本体でやればいいのに。@Anywhereなんて中途半端なのやってないで。

Topsyの検索結果が少ないと思ったらメンテナンス中だった

Index maintenance and fresh results only mode from Feb 18th to Feb 22nd. - Topsy Service Status

This maintenance operation that will start Feb 18th at 9AM PST and is expected to finish within 96 hours. During this maintenance window, search queries will be answered by a fresh index that is based on tweets posted after Feb 17th 2011.

日本時間の2011/2/19深夜2時に始まり、予定通りなら2/23の深夜2時に終わるということか。

2011年2月20日日曜日

表示しているページを含むTweetを表示する例

デジモノに埋もれる日々: Topsy APIで「言及tweet」をブログに表示 - ブログへの言及はブログ外で行われる時代

今回はこのAPIの「trackbacks」というメソッドを使い、
URLを渡してその言及tweetをjsonp形式で取得、それをそのまま
表示用のjavascript functionに喰わせて表示するようにしました。

TopsyのAPIはKEYが要らないのか。これはシンプルでよさそう。

2011年2月9日水曜日

Eメールの終わりの始まり

ティーンはもうメールを使わない–メッセージングに賭けたFacebookは正しかったかも

“高校生たちはメールを使わない。SMSを大量に使っている。お互いにメッセージを送り合いするためには、SMSやIMのような軽いものがよいようだ。”

そもそもEメールは（もともとは）内輪で使う程度の仕様しかなくセキュリティに無防備で、その場凌ぎの仕様追加が歴史的に積み重なって仕様はもはや後戻りできず、かつ実際の現状としてはその過半がSPAMであるという出来の悪いシステムであるにも関わらず、その代替がないため今まで生き残ってきたものだ。
（Google Waveがそれに立ち向かおうとして砕け散ったのは記憶に新しい。）

アメリカでは以前からBlackberryのSMSが主流で、Facebookのメッセージングを使うという素地はできていた。かつAndroidの普及により、PC FreeでFacebookが使える（のだろう多分。知らないけど）。
日本では携帯キャリアの都合で異なるキャリアとのショートメールができないためSMSはいまいちだが、その垣根をFacebookが打ち破ってくれたらうれしい。

ただ問題は、Facebookのメッセージングが結局Eメールのように仕様追加を繰り返してスパゲッティになってしまう恐れがあることと、もう1つは（そして最大の問題は）既にミニ・インターネットであるFacebookに、さらに社会的インフラを預けても大丈夫かという問題がある。
（Googleに替えがない以上に、Facebookに替えはないかもしれない。いや、やってみれば他のものが充分に替えになるかもしれないが。）

まあ米Yahooが退場しつつあるように、10年後にはFacebookもないかもしれないけどね。

Google Maps API V3についに AdSense登場

Google Geo Developers Blog: Monetize your Maps API v3 application with AdSense for Maps

In response to this we are happy to bring AdSense for Maps to Maps API v3. The Maps Ad Unit overlays a set of AdSense ads on the map, in any of the supported formats.

地図上にAdSenseを表示できるようになった。

これにともない、V3にV2のGoogleBarを付けて欲しいという要望は却下された。（Issue 1697 - gmaps-api-issues - GoogleBar & AdSense - Project Hosting on Google Code）
これはまた論議を呼びそう。GoogleBarは独特な検索だけど割りきって使えばそれなりに便利だからなあ。

2011年2月8日火曜日

Apacheでリダイレクトさせる時に URLのパス部分を引き継がせる設定

まったりSE備忘録 » サイト移転のための Apache でのリダイレクト

apache でリダイレクトする主な方法は以下２通り。

* Redirect を使う。
* Rewrite を使う。

mod_rewriteでやる。301になる。

Googleの新しい検索用API

JSON/Atom Custom Search API - JSON/Atom Custom Search API - Google Code

Important: The JSON/Atom Custom Search API requires the use of an API key, which you can get from the Google APIs console. The API provides 100 search queries per day. If you need more, simply request additional quota from the console.

Google AJAX Search APIがDeprecatedになって、こっちがそれを引き継ぐAPIらしい。
まだLabsだけど。

（前にもメモったっけ？）

「1行で IEの JavaScriptを高速化」は IE9では動かない問題と解決策

一行で IE の JavaScript を高速化する方法 - IT戦記

/*@cc_on _d=document;eval('var document=_d')@*/

これがIE9だと動かない。

下記のやつなら大丈夫。（「ダウンロード」リンクからダウンロードできる最新版に書いてあるやつ。）

読み込むだけでWebページの「おもてなし度」を向上 - Pryn.js & Pryn.css [ゼロと無限の間に]

/**
 *  IE(8-)高速化（IE9ではエラーになる）
 *  @see http://d.hatena.ne.jp/amachang/20071010/1192012056
 */
/*@cc_on
if (@_jscript_version < 9) {
    var _d = document;
    eval("var document = _d");
}
@*/

（追記）
あれ？今使ったらエラーが出ずに使えてる...？

2011年2月7日月曜日

YUI 3 reset.cssの問題点と対応策

hail2u.net - Weblog - YUI 3: CSS Resetの問題

ブラウザごとのデフォルト・スタイルシートの違いを吸収するためのスタイルシートをメンテするのが面倒になったので、YUI 3のCSS Resetを使うことにした。が、このサイトではちょっとした問題が起こった

メモメモ。
背景画像がおかしくなったらここを見よう。対策も書いてある。

Google CDNの YUI3 CSS Toolsの URL

とりあえずメモ。

https://ajax.googleapis.com/ajax/libs/yui/3/build/cssreset/reset-min.css
https://ajax.googleapis.com/ajax/libs/yui/3/build/cssfonts/fonts-min.css
https://ajax.googleapis.com/ajax/libs/yui/3/build/cssgrids/grids-min.css
https://ajax.googleapis.com/ajax/libs/yui/3/build/cssbase/base-min.css

httpでも可。
バージョンはマイナーバージョン以下の指定も可。

URL等の半角英数字が続く文字列を強制的に改行させる CSS

自動改行(word-break・word-wrap・white-space プロパティ)をコントロールして、テキストがボックスから飛び出さないようにしたい。 | 乱雑モックアップ

divにも指定するとしたら word-wrap: break-word; のみがいいのかな?

preは強制改行させたことないからいいとして、divとtableは別なのか。

2011年2月5日土曜日

WordPressを高速化するなら Quick Cache？

WPのキャッシュプラグインQuick Cache | スラックラインの歩き方

なのでQuick Cacheというのを入れてみました。プラグインのマニュアルを読むと、後発だけあってWP Super Cacheとの比較やこっちが優れている点なども書かれていてなんだか良さそうです。

定番のWP Super Cacheよりさらにいいらしい

2011年2月4日金曜日

jQuery UIが並び替えなどが可能なリッチな表（Grid）をサポートするらしい

Unleash The Grid « jQuery UI Blog

There are already a number of high quality jQuery grid plugins. We recognize they each have an impressive set of features, capabilities, and a level of use by members of the jQuery community. We are studying and applying practices and techniques from today’s most popular grid and data table plugins, including current favorites, SlickGrid, jqGrid, DataTables and a few that have not been updated in a while, like Tablesorter, Flexigrid, and Ingrid. We invite all authors and users of these and any other grid plugins to get involved in the design of the jQuery UI Grid.

同様のものは、日本で人気なのはFlexigridか。
Grid Tableに限らず、jQueryを使ったUIライブラリはいろんなところで作られてるけど、jQuery UIはそれらを飲み込んでいくつもりなんだろうか。