Hatena::ブログ(Diary)

ちずのメモ帳

2010-06-08 BrowserLabをChromeから、少し便利に使う

AdobeBrowserLabという、いっぺんに様々なブラウザとOSでの組み合わせでウェブページの表示結果をテストしてくれるという、ちょっと便利なサービスがあります。

しかしこれ、ブラウザから使おうとするとクリック数が多くて結構めんどくさいんです。なので、Google Chromeから簡単にBrowserLabにアクセスできるようにしてみます。

まず、BrowserLabにログインしてから自分のブラウザセットを作っておきます。そして任意のURLでテスト実行すると、アドレスバーのURLはこんな感じになっていると思います。

https://browserlab.adobe.com/ja-jp/index.html#delay=0;zoom=100;url=http%3A%2F%2Fgoogle.com%2F;state=use;showDelay=true;…

途中にあるurl=〜;の部分がURLの指定なので、これを%sに変更してGoogle Chrome検索エンジンに追加します。

f:id:llcheesell:20100608235021p:image

(このウィンドウは環境設定の検索エンジン→「管理」で出てきます)

キーワードには分かりやすくて短い文字を指定しておくと、使うときに便利です。

設定が終わったら、あとはChromeのアドレスバーにキーワードを入力してTabキーを押します。

するとこの様な表示に。

f:id:llcheesell:20100608235026p:image

あとはURLを入力してEnter(+altで新規タブ)でBrowserLabに一発アクセスできます。このChromeの検索キーワード機能、知っている人も多いかとは思いますが、すごく便利ですよね!常用してます。

もちろん、他ブラウザBookmarkletでも同じようなことをすれば可能です。


ちなみにこのBrowserLabですが、画像がJpeg圧縮なおかげで正確な表示ができない(ピクセルがにじむ)のと、画像のロードが非常に遅いのが難点ですね。

2010-02-26

Google Buzzパーマリンク(とwordpressのそれ)

あめーばなうでつぶやいてたけど再掲


Google Buzz、やってますか?

毎日見ているGmailに統合されてるので、Buzzのほうも自然と見てしまうし、マップのBuzzは意外と楽しいですね。最近各所から見放され気味のWindows MobileGoogle MapsアプリでもBuzzバッチリ対応してます。


それはさておき、Buzzのパーマリンクについてちょっと気になったのです。パーマリンクは発言右上の▼メニューか、投稿日時をクリックすると見ることが出来ます。以下のような感じ。


http://www.google.com/buzz/che.chu.jp/T1VzyhswAvD/自分の起こしたアクションに


構成としては

http:// www.google.com/buzz/ユーザー名/発言の固有ID/発言の冒頭テキスト

(関係ないけどユーザー名ってメールアドレスじゃないのこれ)


気になるのは最後にある発言冒頭の文字列です。発言の識別子としてのURLは固有のIDまでで確定しており、その後の文字列は無視されます。つまり、識別子としてのURLではなく、人間のため(+検索エンジンのため?)の文字列なのだろうと思います。

ちなみに、決められた文字列と異なる場合は301 Moved Permanentlyによってパーマリンクへリダイレクトされます。(link relによる固定URLの指定は無いようでした)

これって、やっぱGoogle的に良いURLということなんですかね?




wordpressパーマリンクについて

wordpress他でもタイトルの文字列をURLに含むというのは一般的に行われていますが、それ自体が識別子であって、BuzzのようにID+テキストというのはあまり見かけない気がします。なお、wordpressのタイトル文字列パーマリンクも割とかしこく、識別出来る範囲で自動的に補完してくれます。

(例)hoge.com/2010/02/about-usというURLの場合、hoge.com/2010/02/a へアクセスすると正しいURLへ301でリダイレクトされる。/2010/02/とした場合は2010年2月の記事一覧へ

wordpressGoogle Buzzと同じようなURL構造にしたい場合、設定のURLカスタム構造から/%post_id%/%postname%とすればOKです。Buzz的に考えるならば、post_idのあとに日付やらカテゴリやらつけて最後にpostnameとかでもいいかもしれません。

しかしpost_id先頭に持ってきたとしても、あとの文字列はちゃんと無視してくれるのですが、Buzzみたいにリダイレクトで正しいURLに飛ばさず、無視された文字列のまま200 OKで表示してしまうのがBuzzとは違うところですかねー(以下のように)

f:id:llcheesell:20100226222319p:image

関係ないけどはてなダイアリーって本当に使いづらいですね。残念すぎる日本のWebサービス

2009-10-09 codename: ROME

Adobe codename:ROME

AdobeMAX 2009のスニークピークでちょっと気になった「コードネームROME」の話。

あんまり情報出てないようなので、書いちゃまずいかな。こっそりメモ。

まじいをこっにくこんてはかろやて家らしきねで9にみ

ROMEは多目的パブリッシングソフトウェアというか、簡単に言えばPhotoshopFlashIllustratorなんかのデザイン・オーサリングツールを全部一つにしちゃったActionscript製アプリケーション。

AS製だからAIRとしてデスクトップでも動くし、もちろんウェブブラウザ上でも動く。

紙のドキュメント、名刺、CD/DVDカバー、アニメーション、プレゼンテーション、ウェブサイトといったものを全部これ一つで!ということらしい。



Adobeが最終的にはこれをプロユース向けに出していきたいのかどうかは分からないけど、たぶん、コンシューマ向けかな。

AS限界的にもプロユースの機能を搭載させるのはもうしばらく難しいのでは・・?これはPhotoshop.comしかり。


しかしUIの出来やそのメニューアイテム量から察すると、試しにちょっと作った段階という感じもしないので、そう遠くないうちに発表されるのかもしれない。


ROMEのスニークピークはこっちのほうが高画質だけど途中で切れてる。

YouTube - [at MAX] Sneak Peek - Adobe ROME

にしてもローマって。壮大な名前つけちゃって。。


RIAの動向としてはSilverlightも目を離せない感じ。

今までCとかで書いたきたコードを活かしつつ、そのままウェブアプリケーションとして動かせるのはSilverlightの強みかなあ。後発な分その点はよく考えられているよね。




あ、そうそう、同じくスニークピークから、DreamweaverのSmart Pasteの紹介

YouTube - [at MAX] Sneak peek - DreamWeaver CS5

FlashのアニメーションXMLコピーやIllustratorベクタデータをCANVASで表示するというもの。

表示データはFXGを使用。その場でレンダリングしているので動的なデータを楽に表示できるのも特徴。

FXGはSVGを元にしたXMLベースのフォーマット。詳しくは以下。

Adobe Edge: 2009年8月 アドビの新しい画像ファイルフォーマット「FXG」

2009-07-04 Google Chromeのtext-shadow処理について

前々から気になってはいたのだけど、今回ちゃんと検証したのでメモ

text-shadowによるテキストシャドウの適用は、Safariではかなり早い段階から採用されていましたが(CSS2.1)、今回Firefox3.5にてtext-shadowプロパティのレンダリングが可能になったので、補助レベルでは使えるものになってきたのではと思います。


text-shadowの仕様については他サイトやドキュメントを見て頂くとして、問題はGoogle Chromeでのテキストシャドウのレンダリングです。(当初Windowsの問題としていましたがMac版でも同じでした)

おそらくテキストシャドウを生成するときにフォントのアウトラインを取る処理に起因するものだと思うのですが、ぼかしのついたシャドウをかけるとフォントのレンダリング結果が通常の場合と変わってしまいます


どちらが綺麗とかいうわけではありませんが、一応違うということだけデザイナーは知っておくといいのではと思います。

なおtext-shadowプロパティの3番目の引数、ぼかしの値が0の場合レンダリングは通常通りになります


今回検証ページで、フォントとシャドウの有無などの組み合わせを並べた検証ページを作りましたので気になる方はGoogle Chromeで以下のページを見てみてください。

Google Chrome における text-shadow のフォントレンダリング


検証ページのスクリーンショットから、シャドウなし

f:id:llcheesell:20100305002322p:image

シャドウあり

f:id:llcheesell:20100305002317p:image


この他にもChromeレンダリングにアラが見えますね。ブラーの品質はFirefoxSafariと比べて低めです。

また、リンクに下線がある場合なんかも別々にシャドウを落とすので重なった部分が不自然になってしまいます。

Firefox

f:id:llcheesell:20100305011519p:image

Chrome

f:id:llcheesell:20100305011525p:image




余談ですが、流行の使用法としてはテキストシャドウを影として使うのではなく、色のある背景に白シャドウを指定して立体感を出す、という感じの使われ方が多いように思えます。

(検証ページで言うと青背景で囲まれた部分)

その場合は0pxのレンダリング結果のほうが映えますね。




※追記:これを回避する方法

この問題は特にMacだとフォントが細く見えてしまい、色の組み合わせによっては見づらくなってしまうケースがあります。

その場合、text-shadowを指定する時に1つ目のシャドウはぼかしなし、2つ目はぼかしありにするとテキストのレンダリングを変化させることなく影をぼかせるようです。

こんな風に> text-shadow: black 0px 0px 0px, black 0px 1px 2px;

ちょっとCSSハック的なのであんまオススメはできないかもしれません!

2009-05-27 ChromeのFlashプラグインを自動バージョンアップ出来なかった件

特定の一台のマシンだけGoogle ChromeのAdobe Flash Player Pluginがバージョン9のままで、インストーラーや手動でのインストール(NPSWF32.dllのコピー)を試みてもうまくいかず、特に困ってもいなかったので放置していたのですがようやく原因が分かりました。


どうやらChromeはまずFirefoxプラグインフォルダを読みにいって、そこにプラグインがインストールされていればそれをそのまま使用するようです。

Firefoxがインストールされていない場合はOperaのインストールディレクトリとかも読みに行くのかもしれません)


そこで、問題の一台はFirefoxがインストールされていたのですが、デフォルトのディレクトリ(Program Files/Mozilla Firefox)ではなく別の名前のディレクトリにインストールされており

しかもデフォルトのディレクトリにはインストールしたまま使っていない古いFirefoxがインストールされていたのでした。

なのでChromeは起動時に古いFirefoxプラグインディレクトリを探しにいって古いプラグインを読み込んでいたということですね。

ちなみにこの場合自動インストーラーはちゃんと普段使っている方のFirefoxディレクトリにプラグインをインストールするのでChromeが使用するプラグインはバージョンアップされずということなのでした。


ということで古いFirefoxのディレクトリを削除したら無事Flash Player version 10が読み込まれましたとさ

いくら検索しても同じ問題で悩んでいる人がいなくて、どうせ自分の環境が異常だからだろうと思っていたのですがまさにその通りでしたね、ハイ。