Web scratch

Archive for the ‘その他’ Category

前提知識として以下が必要です。

• リンクのようなボタンを作る: Days on the Moon
• javascript scheme でボタンを作るのは ? | ヨモツネット

clickイベントに使うためだけに<a href=”#”>text</a>とか(下の例の1,2番目)やるのが嫌いで、どうやるのがスマートorシンプルなんだろと思って書き出したもの。input、button 要素がでてこないのはスタイルシート考えるのが面倒で何となくです。button要素をCSSでリンクのようなデザインにできるならそれでもいいじゃないでしょうか。

• クリッカブルなボタンとRoleのデモ

1番目は今時ない気がするし、1,2番目は状態が遷移しないのにhref指定してると、ミドルクリックなどで別のページとして開けたりしちゃうのでそれを抑制するコードも必要になるのが何か嫌で、3番目当たりが個人的には好きだった。(4番目は何か気持ちわるい)

<div><a href="javascript:void 0;">javscript:ボタン</a></div>
<div><a href="#">#なボタン</a></div>
<div><a role="button">hrefがないroleボタン</a></div>
<div><span role="button">リンクじゃないspanボタン</span></div>

Note: If pressing the link triggers an action but does not change browser focus or page location, authors are advised to consider using the button role instead of the link role.
The Roles Model | Accessible Rich Internet Applications (WAI-ARIA) 1.0

そして、A要素のroleはnativeでlinkですが3.2.5 Content models — HTML Standardを見ると、 link, button, checkbox, menuitem, menuitemcheckbox, menuitemradio, tab, treeitem のいずれかのroleであれば上書きすることができると書いてあります。(そう読み取れたんだけどあってるのかね)

<a role="button">hrefがないroleボタン</a>

• 4.2. Conflicts between native markup semantics and WAI-ARIA
• 3.2. ネイティブなマークアップセマンティクスとARIAとの衝突

  翻訳版をみるとnativeなroleがlinkであっても、roleでbuttonと指定すれば上書きできるべきであるみたいな内容。

何で、上書きできるかが気になったかというとjavascript scheme でボタンを作るのは ? | ヨモツネットのコメント欄で、できないかのように読み取れる内容があったため。多分多分、strong native semanticsというのはa要素が本来持っているのはlinkというroleの事で、<a role=”button” />のようにそれぞれのa要素におけるroleは上書きできるけど、a要素本来のlink(strong native semantics)というroleは上書きできないよって話なのかなーとか思った。(仕様読んでないので自信ない)

ちなみに、jQuery UIの$.button()は<button role=”button”>という感じでbutton要素を使用している。

• jQuery UI – Button Demos & Documentation
• jQuery UI に見る WAI-ARIA の実装：dialog 編 – アークウェブアクセシビリティWiki(結構前)

• WAI-ARIA Implementation in JavaScript UI Libraries – updated | The Paciello Group Blog

というわけで、ここに書かれている内容はあまり自信がありません。以上

• Accessible Rich Internet Applications (WAI-ARIA) 1.0

サイトに訪れた人がどんな文章や単語をCtrl+Cや右クリックから選択してコピーしていったのかを調べるスクリプトです。

Webページ上のテキストコピーを監視し, 貼り付けにはリンクバックを付けるTyntが$8Mを調達

http://jp.techcrunch.com/archives/20100416tynt-gets-8-million-for-ctrl-c-action/

この記事を読んでどんなものをコピーしたのかを解析すれば面白いと思ったので、かなり適当にでっち上げてあります。
言語はJavaScript+PHPで結果をtxtファイルにするという適当な感じです。

• copylogger.zip

上のファイルをダウンロードすると

copylogger
├──copylogger.js　　
└──dataStorage.php

となっているので、二つのファイルを同じ場所において(もしくはフォルダごとアップして)、

<script type="text/javascript" src="http://example.com/lab/copylogger.js"></script>

みたいにjsファイルを読み込んでおくと、テキストコピーに反応して、log.txtに

という感じで出力されていきます。

正直、見やすくもなく実用的でもないですが、コピーされてる文章からどういう行動をとってるのかが分かって面白いです。
例えば

「RefControl」でリファラを偽装しておくべきサイト | Web scratch<>http://efcl.info/2009/0923/res1352/<>blogs.yahoo.co.jp<>2010/4/19 20:21
「RefControl」でリファラを偽装しておくべきサイト | Web scratch<>http://efcl.info/2009/0923/res1352/<>fc2.com<>2010/4/19 20:22
「RefControl」でリファラを偽装しておくべきサイト | Web scratch<>http://efcl.info/2009/0923/res1352/<>plusd.itmedia.co.jp<>2010/4/19 20:22

という感じのlogがあると、このページには登録すべきサイトをまとめたテキストとインポート方法も書いてあるのに一個一個コピーしてるところを見ると、気づかなかったのかもしくはすべてを登録する必要はないからコピペしてるのかなーとか想像できます。

まあ、copyloggerって名前にしてるように閲覧者は気持ちよいものではないと思うので、お遊び程度にしてみた方がいいかもしれないです。(PHPファイルの方も作りが適当なので安全か怪しいし)

JavaScript部分の参考資料

<script>タグから読み込んだjsのディレクトリを取得 – prog*sig

http://efcl.info/adiary/%3cscript%3e%e3%82%bf%e3%82%b0%e3%81%8b%e3%82%89%e8%aa%ad%e3%81%bf%e8%be%bc%e3%82%93%e3%81%a0js%e3%81%ae%e3%83%87%e3%82%a3%e3%83%ac%e3%82%af%e3%83%88%e3%83%aa%e3%82%92%e5%8f%96%e5%be%97

TwilogというTwitterのつぶやきを日付毎に記録してくれるサービスが便利なので、
twitterのユーザーページ(https://twitter.com/azu_re )とかからそのユーザーがTwilogを利用してるかをチェックするGreasemonkeyを書きました。

ユーザー名の横にアイコンがでる

Twilogに登録していると、ユーザー名の隣にアイコンを表示します。

• Twilog checker

登録してるかを判定するAPIがないかなーってつぶやいたら作ってくれたみたいなので、それを使わしてもらっています。

ユーザーが登録済みかを判定
true : 1
false: 0
e.g)http://twilog.org/user-exist.cgi?id=azu_re // 1

ややこしいタイトルになってますが、HatebuCommentなどのLDR上ではてブコメントをみる機能を
Tomblooとはてなブックマーク拡張を使って同じ事をするTomblooパッチです。

1. Tombloo
2. はてなブックマーク拡張

をインストールしておく必要があります。 ((元々両方を使ってる人向けが前提だったり))

ここからインストール

リンク上で 1)右クリック 2)tombloo 3)tomblooパッチのインストール で簡単にインストールできると思います。
初期設定のショートカットキーはSHIFT + Dになってるので適当に変えて使ってください。

利点としてははてな公式の拡張を使ってるので仕様変更には強いぐらいだと思います。
何か落ちやすかったりするのでイマイチかも。

Instapaperというウェブサービスを使用する事で簡単にiPhoneでもあとで読むが実現できます。

iPhone用のアプリもあり、ブックマークレットで”あとで読む”サイトを追加していくことができる。
アカウントもユーザネームだけで使用する事ができるので、パスワードなどの登録手続きはありません。
iPhoneからの閲覧はアプリ上から行えて、safariで見ることもできる。

また応用すれば簡易的なTODOみたいなものも実現できます。
InstapaperにTODOを追加するブックマークレット書いた – anatoo勉強記

PCの連携が簡単なのでとても便利。

最近livedoor クリップも使うようになった。
はてブみたいにGreasemonkeyなどがたくさんあるわけではないけど、基本的な機能ができていて使い分けすれば結構いけてるSBMだ。

登録方法が公式のブックマークレットしか見あたらないので、少しだけ改造して新しいタブで開くようにした。

clip!

上のリンクをブックマークツールバーにD&Dすればいいと思う。
Firefox3でしか動作確認はしてません。

大量のタブを開いているとタブの文字幅が小さくなったり、単純にごちゃごちゃして見づらくなる。
そんな時にタブをファビコンで見分けやすくするアドオン。
これとあわせて見ると面白いかも。

Firefoxでタブの使い勝手を大きく変える5つのアドオン – Web scratch

http://efcl.info/2008/0514/res182/

Faviconとはサイト毎のアイコンでアドレスバーのとこにでてる小さな画像の事です。
有名なサイトなんかだとファビコンをちゃんと設定してありますが、設定していないサイトも多いです。
ファビコンがあるサイトでないサイトがタブバー内に混在してると分かりづらくなるので、こちら側で適当なファビコンを作ってしまうアドオンを紹介。

1. IdentFavIcon

IdentFavIconはサイトのドメインネームからCRC32でハッシュを作り、適当なファビコン画像を割り当てるアドオンです。

ハッシュで分けているので重複する事はほとんどないです。

1. HashColouredTabs

HashColouredTabsはファビコンの部分に一色の画像を表示するアドオンで、元から表示してあるファビコンを上書きして表示する事もできます。

使ってるタブ関係のアドオンによってはファビコンがないとタブサイズに違いがでてしまうことがあるので、そういうのを防止する意味でも導入する価値はありそうです。

Firefox3に移行するための準備

バージョンはFirefox2からFirefox 3 Beta 5へ
パソコンはWindows Vista

まずはバックアップから

Firefox3をインストールする前に、まずは今使ってるFirefoxのバックアップから開始するべき。
FEBE :: Firefox Add-onsで拡張やプロファイルをバックアップしておき、CLEO :: Firefox Add-onsでFirefox3に持って行きたいアドオンを固める。
CLEOでアドオンを固めたものはCLEOを入れたFirefoxでしかインストールできないので注意。

必要なアドオンを選別ための情報

• Slashcolon /: » Firefoxアドオン3系対応状況
• 主な拡張機能の Firefox 3 対応状況 | Bowz::Notebook

基本的にはバージョンがあってなくても動く場合の方が多い。(PCに優しいかどうかは置いといて)
タブやブックマーク関係は更新されてないと動かないことが多い。
セキュアなインストールしか受付なくなったので野良アドオンはインストールできないことがある。

Latest topics > Firefox 3でのアドオンの自動更新に関する仕様変更（セキュアじゃないアドオンは全部蹴られる件） – outsider reflex

設定も移行できるものはエクスポート

Tab mixなど設定やブックマークなどエクスポートできるものはエクスポートしておく。

Firefox3をインストール(まだ起動しない)

それからFirefox3をインストールを開始するが、インストールしてもすぐには起動させないように注意する。
(インストーラー画面でボタン連打は危険)
Firefox２と共存させる場合は

• 小粋空間: Firefox2 と Firefox3（ベータ版）の共存
• 次世代ブラウザ Firefox – Firefox 3 ベータ版ダウンロード

をよく見て、プロファイルを別に作るようにしておく。
まだFirefox3を起動させないように。

パスワードやフォームなどの履歴のコピー

自動的に入力されるパスワードやフォーム履歴を移行したい人は
新しいプロファイルにデータを移行する Firefox Hacks 翻訳日記/ウェブリブログ

をよくみてFirefox2で使っていたプロファイルから新しく作ったプロファイルへコピーする。
プロファイルの場所は以下の通り
C:\Users\(自分のユーザー名)\AppData\Local\Mozilla\Firefox\xxxxxxxx.プロファイル名
（xxxxxxxxの部分には8桁の英数字が入ります）

パスワードの移行は少し複雑なので(上手く認識しなかったりするので)コメント欄に書いてように場合によって少しやり方を変える。
移行するときにFirefoxは停止してからやらないと上書きされる場合があるので注意。
まだ一度もFirefox3を起動してない場合

1. インストールしたら「すぐに起動」せず、プロファイルマネージャを起動。 2. 新規のプロファイルを作成。（この時点では signons3.txt は生成されない） 3. Fx 2 のプロファイルから signons2.txt と key3.db をコピー。 4. 新規のプロファイルでおもむろに Fx 3 を起動。 でもいいようです。 3. で history.dat もコピーして、bookmarks.html を上書きコピーしておくと places.sqlite にコンバートしてくれる模様。

一度Firefox3を起動してしまった場合

・起動してプロファイル・フォルダが完成したら終了 ・プロファイル・フォルダから signons3.txt を削除 ・2.0.0.x の signons2.txt と key3.db を 3.0b のプロファイル・フォルダにコピー ・3.0 を起動して、設定を読み込んだ signons3.txt を生成させる ・パスワード設定が有効になっていれば signons2.txt を削除しても構わない

ブックマークはエクスポートしたものをインポートした方が上手くいくので、ここれ移動させるのは微妙かも。

Firefox3を起動してデータの移行

Firefox2とは別のプロファイルから起動して設定をいじっていく。

上で移行したものが反映しているかを確かめてから、アドオンなどをインストールしていく。

まずはアドオンがFirefox3をサポートしてなくても、インストールできるように

• Nightly Tester Tools
• FEBE

のどちらかをインストールする。(これらのアドオンはバージョンチェックを無効にすることで無理矢理インストールできる状態を作る。)
最初にFEBE+CLEOでアドオンを固めた場合はFEBEとCLEOをインストールする。

Firefox Add-onsで

このアドオンは古いバージョンの Firefox 向けです
とでてインストールできない場合は下の方の
すべてのバージョンを表示
というところからいけばインストールできる。(動くかどうか別)
そしてアドオンをインストールして行きながら動くかどうかを確かめていく。
Firefox Add-onsに対応しているものがない場合は無理矢理インストールしてみるか、作者のところから作者ページに行き
最新版があるかを確認してみる。(まだFirefox Add-onsで公開してない人も多い。)

使ってみての感想

CPUやメモリの使用量については少し減ったかなという感じで、元々量自体はあまり気にしていなかったので、
気にならないがやはり実行スピード自体はかなり改善されてる印象と体感がある。
JavaScriptの実行速度はかなりよくなってる、前とはだいぶ動き自体が違う感じがして重いページでも読み終わるまで
動けなかったのが、普通にうごけるようになってたりとこれは乗り換えていいと思った。

気になるところは、データ実行防止 (DEP)というWindowsの悪質なマルチウェアなどを防止する機能が働いて落ちる事が目立つ。
これはパソコンとの相性やベータ版であることと無理矢理アドオンを動かしてるので、まだ仕方ないかということで無視している。

Firefox2と違うとことしてplaces.sqliteとかurlclassifier3.sqliteによるHDDへの書き込みが頻繁に行われている感じが見られたけど、パフォーマンス自体にはそこまで気にする程度ものでもないかな。

places.sqliteはブックマークのデータベースでFirefox3のPlaces Organizerに関係してるものかな。

ついにFirefox3の新機能「Places Organizer」の全貌が明らかに – GIGAZINE

今回発表された「Places Organizer」の画像を見ると、ブックマークだけでなく、ページ閲覧履歴やダウンロードしたファイルの履歴、さらにはサムネイル画像やタグ付けなど、Firefoxに関するもろもろのものを集中管理するための機能というのが正しい位置づけのようです。

urlclassifier3.sqliteは「攻撃・偽装サイト」のデータベースを、バックグラウンドで頻繁に更新してるので書き込みが見られるみたい。
でも特定のタイミングでやってるのでそこまで気にならない。

もっと詳しく見てみたい人はやってもzillaな備忘録にいろいろ書いてある。

まとめると、動きがよくなったはかなりいい感じで全く動かないアドオンは少なく使用していたヤツの一割ぐらいだった。
次のRCぐらいで安定したら移っても問題ないような気がする。
データ実行防止 (DEP)で落ちるは早く改善してもらいたいところ。

追記:データ実行防止 (DEP)で落ちる原因を調べていたら、Flashのdllが上手く認識してないのが原因かもしれない。

FirefoxでFlash Playerの動作確認 – AS3S.ORG

FirefoxでFlashの動作確認環境を整備するためのメモ。 以下、基本的にWindowsXP SP2の場合。

Firefoxは
C:\WINDOWS\system32\Macromed\Flash\NPSWF32.dll
をみないで
C:\Program Files\Mozilla Firefox\plugins\NPSWF32.dll
を見に行くらしいのでC:\Program Files\Mozilla Firefox\plugins\NPSWF32.dllを確認したら見事になかったので、Flashのフォルダからコピーして入れてみた。

でも、これをする前にflashプレイヤーは動作してたからこれが原因かは不明。

Web scratch » [ニコニコ動画]Greasemonkeyでプレイリスト(Wrraper対応)

の追加的な記事なので flvplayer_wrapperｔを使ってない人には無意味なエントリー。

Read the rest of this entry »

サーバー側の原因？かよく分かりませんでしたがWordpressが日本語で表示されないで、
英語表示になってしまっていたので、修正する方法。

Read the rest of this entry »