Google Chrome 拡張機能対応

Google Chromeの正式版(?)が拡張機能に対応したようです。
家ではβ版で既に使っていましたが、これで心置きなく使えるようになりました。

・ブラウザのダウンロードはこちら
http://www.google.com/chrome/intl/ja/landing.html?hl=ja

・テーマ
https://tools.google.com/chrome/intl/ja/themes/index.html

・エクステンション(Firefoxでいうアドオン)
https://chrome.google.com/extensions



ただ、IE、Firefox、Safari等で問題なかったページがChromeで崩れていたことがあったので、あんまり流行ると1個確認が増えることに(その頃には直ってると良いなぁ)。

スクリーンリーダー(NDVA)でアンカーリンク(ページ内リンク)がおかしい時

■問題
音声ブラウザ用にメニュー読み飛ばしのページ内リンクを設定して、NVDA(フリーのスクリーンリーダー)で試したところ上手く機能しない。ページ内の指定の場所に飛ぶはずが、何故かデスクトップにいってしまう(なんでまたデスクトップに)。


■解決
<li>に"display:block;"を追加したら上手くいった。


■補足
・何故<li>かというとこうする↓ことが多いから。
<ul>
　<li>メニュー1</li>
　<li>メニュー2</li>
　<li>メニュー3</li>
</ul>

・<p>は何もしなくても大丈夫だった。
<p>○○へ</p>


ということは、block要素にすればokなのかも。
他のソフトでも試してみたかったけれど、有名どころの体験版がことごとく無くなっていて残念。

Firefoxで使っているアドオン

家ではChromeだけど、仕事ではなんだかんだでFirefox。
ということで、入れてるアドオンを紹介します。


■html編
コーディングの作業に関わるもの。

◇Html Validator
Validかどうかがステータスバーに表示される。
alt抜けとかタグ閉じ忘れとかの細かなチェックに便利。

◇Web Developer
Javascript無効、CSS無効、ブラウザサイズ変更、など、いろんな人の環境でチェックしたいときに便利。

◇MeasureIt
ページの上に任意のピクセルの四角をつくって長さを調べられる。
厳密に測る場合はfirebugで画像のサイズ調べたり、キャプチャとって画像の空き調べたりするけど、大体が知りたいときはさっと使えて便利。

◇Popup ALT Attribute
IEみたいに画像にマウスオンでaltが出るようになる。altチェックするとき便利。

◇Flash Switcher
Flashのバージョンを切り替えられる。
バージョンいくつ以上対応とか確かめるときに超便利。



■Firebug関係
これもhtml関係なんだけど多いので独立させました。

◇Firebug
使う率ナンバー1。プレビュー見ながらhtmlやcssを書き換えられるのが超便利。まだ使い切れてないほどなんでもできる。

◇FiddlerHook
FirefoxでFiddlerが使えるようになる。完全体。

◇Firecookie
Firebugと合わせて使う。cookieの情報を便利に扱えるらしい(普段あまり使わない)。

◇YSlow
Firebugの友達。ページの開く速度をチェック＋こうしたらもっと早くなるよを教えてくれる。



■携帯編
携帯サイトをつくるとき役立つもの。

◇FireMobileSimulator
携帯の機種を指定するとブラウザ上で表示が確認できる。機種沢山選べて凄い。

◇Mobile Barcoder
ステータスバーに出たアイコンにオンマウスすると、開いているページのアドレス情報が入ったQRコードが表示される。携帯サイトつくってPC確認後、実機で検証するときに超便利。

◇lori (Life-of-request info)
ページのサイズ、読み込むまでの時間などをステータスバーに表示。
特にサイズ制限がある携帯サイトチェックするとき便利。

◇User Agent Switcher
PCなのに携帯から見てる、ってことにできる。
同じページでも[PCと携帯][携帯のメーカー]等で表示を振り分けてるのを確認するとき便利。



■設定編
一度入れたら常時機能しているアドオン達。ある意味一番使っている。

◇ツリー型タブ
タブの位置を右にできるのが便利。
沢山タブを開いたとき初期のように上に横並びだとスペース足りず縮まって、どれがなんだかわからなくなるので。

◇Tab Mix Plus
タブの挙動を自由に変えられる。
ツールバーのgoogle検索の結果を新規タブで開くとかを設定。



■便利機能編
日常使うこまかい動作をスピーディーにしてくれるもの。

◇GMarks
googleブックマークに簡単に登録できる。
いちいちiGoogle開かなくても良い。

◇Google Reader Watcher
Googleリーダーの様子がステータスバーに表示される。
いちいちiGoogle開かなくても良い。

◇PageDiff
2つのページの差分が取れる。
ソース開いて、差分用のソフト起動して、コピペして～という手間が減る。

◇pearl crescent page saver
開いているページの画面キャプチャ(png/jpg)が撮れる。
表示領域だけとページまるごとが選べて便利、操作も単純で良い。
プリントスクリーンしてPhotoshopで切って～より断然早い。

◇qtl
英語をドラッグ⇒検索で翻訳文がポップアップで出る。普段はoff。
翻訳サイトで翻訳するより早い。

◇Site Launcher
ブラウザの中のランチャーソフト。
よく使うページを登録してるとショートカットキーですぐ開ける。
お気に入り開いてそこから探して～より早い。

◇分割ブラウザ
ブラウザを左右や上下に分割して複数のページを同時に表示できる。
2つのページちょっと見比べたいけど新しいウィンドウ開くのは面倒ってときに便利。

powerpointを軽くする(図の圧縮)

提出やプレゼン等では軽いほうがさっと開けて良いので軽くしようという話の図編。

■まず
jpeg等の画像を置いて縮小・トリミングをしてもファイルサイズは変わらない。
というのは縮小で小さくなった図はあくまで「大きい図が小さくなっている状態」だし、トリミングした図も見えなくなった部分の情報は残ったままだから。


■でも
資料つくり終わったらもうその図は「小さい図」として扱い、トリミングで見えなくなった部分は無いものとして扱えればファイルは軽くなる。そこで図の圧縮。


■方法

・適当な図をダブルクリック
・「図」のタブの「圧縮」を選択
・「図の圧縮」ウィンドウが開く

そのウィンドウで↓にチェックつけて圧縮。


◇設定の対象
・選択した図
・ドキュメント内のすべての図

どちらか。一括でやるときは「すべての図」のほう。


◇解像度の変更
・Web/画面(96dpi)
・印刷(200dpi)
・変更なし

目的に合わせて上2つのどちらかを選ぶ。
もちろん「Web/画面」のほうが軽くなるからPC上で使うならこっちだけど、
大抵のパワポ資料は印刷する可能性も秘めているのでなんとも。


◇オプション
・図を圧縮する
当然チェック

・図のトリミング部分を削除する
トリミングで見えなくなった部分が無かったことになって軽くなる。チェック。


■やった結果
画像多かったので、8MB⇒3MBとなかなか軽くなった。


■注意
トリミング部分が消えたり解像度落ちたりしてその後の修正がしにくくなるので、最後の最後にやることと、元データのバックアップを忘れないこと(イラレのアウトライン化のようなイメージ)。

safariでcssが効かないとき

safariだけどうもcssが効かない。
何かと思ったら[@charset "Shift_JIS";]を1行目に書いてなかったから。

------------------------
/* コメントコメント */
@charset "Shift_JIS";
------------------------
は駄目。

------------------------
(空白)
@charset "Shift_JIS";
------------------------
も駄目。

------------------------
@charset "Shift_JIS";
(空白)
------------------------
で解決。

・ありがたい参考サイト
http://www.ichiro.to/item/673