jump to navigation

[ブックマーク] Firefox アドオン 11月 14, 2009

Posted by hyhy in 技術情報.
Tags:
comments closed

随時更新

WEB開発者のためのFirefoxアドオン20選「Top 20 Essential Firefox Add-ons for Web Designers」

Mozilla、拡張機能の次世代実行エンジン“Jetpack”のギャラリーサイトを開設

Firefoxは誰でも機能を拡張できるようになる

『SpeedyFox』の強力バキュームでFirefoxを更にスピードアップ!

入れておきたいFirefoxアドオン – ジャンル別リスト「地図編」

Firefoxで効率よく検索する方法 11月 4, 2009

Posted by hyhy in 技術情報.
Tags:
comments closed

1)Ctrlを押しながらT→Kと押す
新しいタブが開いて検索窓にカーソルがあわさった状態になります。
※Macの場合は、Ctrlの代わりにCommandキー
※Firefoxのキーボードショートカット
* Ctrl+T → 新規タブを開く
* Ctrl+K → 検索窓にカーソルをあわせる
* Ctrl+L → カーソルがアドレスバーに移動

参考サイト

見てる動画を簡単にダウンロードできるFirefoxアドオン「FlashCatch」 11月 4, 2009

Posted by hyhy in 技術情報.
Tags: ,
comments closed

https://addons.mozilla.org/ja/firefox/addon/13605

Firefoxにアドオンをインストールして、後はFLV動画閲覧中にブラウザの「FlashCatch」ボタンを押して、動画のタイトルを押すだけ。
シンプルすぎるので説明は以上です。

IE環境でのテストツール「IETester」 10月 31, 2009

Posted by hyhy in 技術情報.
Tags: ,
comments closed

IEはくせのあるブラウザで、いつまでもIE6でテストをやられている方も多いかと思います。
かといって、IE6環境、IE7環境、IE8環境と用意するのは大変です。

そこで、IEの各バージョンをそれぞれテストできるツール、それが「IETester」です。
公式サイト

ietestter

IETesterは、IE 5.5、6、7、8の4種類のレンダリングエンジンおよびJavaScriptエンジンに対応しているため、これ1つで4種類のIEのWebページの見栄えをチェックできます。

現在の最新バージョン0.4.2では、キャッシュや画像表示、Javascriptなどのオンオフをメニューで切り替えることが可能となった。また、クラッシュしたタブの通知と再オープンするボタンが追加され、Windows 7ではクラッシュ時のタスクバー・オーバーレイ・アイコンが追加されました。

パケット解析ソフトについて 10月 31, 2009

Posted by hyhy in 技術情報.
Tags: ,
comments closed

自分メモ

Wireshark ・・・Windows 7対応
Microsoft Network Monitor

実践 パケット解析――Wiresharkを使ったトラブルシューティング
picture978-4-87311-351-7

Greasemonkeyについて 10月 27, 2009

Posted by hyhy in 技術情報.
Tags:
comments closed

■Greasemonkey(グリースモンキー)とは
Firefoxでユーザースクリプトを実現するためのエクステンション(拡張機能)の一つで、読み込んだウェブページをクライアント(ユーザー)側でカスタマイズ可能にするもの。
ユーザスクリプト形式に従ったJavaScriptを組み合わせて、ウェブページ閲覧時に実行することができる。
他のブラウザでは、同様の機能が、Opera8以降では標準で、IEではTrixieやIE7Proを導入することで、SafariではGreaseKitを導入することで実現できる。

■ユーザスクリプト形式
まずユーザスクリプトはその名称や実行許可などで構成されるメタ情報を埋め込んだコメント文で始まる。 また、ユーザスクリプトのファイル名は「.user.js」で終わる。
人気のユーザスクリプト
1)AutoPagerize
様々なサイトで次のページへのリンクをクリックする事なく、画面の表示領域がページ終端に近付くと自動的に次ページの内容をページ末尾に継ぎ足す。
2)Greased Lightbox
画像へのリンクをクリックした時に画面遷移する事なく、現在のページに画像をフローティング表示し、次や前の画像への遷移などを可能にする。
3)Auto Save Forms
フォームに入力したテキストをクッキーに保存し、いつでも復元可能とする。

■サイト
Greasespot
Firefoxのアドオン
wiki


CSSとHTMLをリアルタイムに書き換えてプレビューできる「rendr」

GreasemonkeyからXMLRPCプロトコルでブログに投稿する

UR×Grani Webブラウザー 10月 15, 2009

Posted by hyhy in ART DESIGN MOVIE, ファッション.
Tags: ,
comments closed

セレクトショップのアーバンリサーチがデザインしたオリジナルWEBブラウザー登場。
って8月の話なんだけどさー。。。

grani
アーバンリサーチNEWS

国産ブラウザーのGraniとのコラボレーションで、やはりファッションとの融合だけあってデザインはお洒落。
ページ閲覧中に出てきたワードをすばやく検索したり、気になるページのキャプチャを保存したり、機能もなにげに優れています。

ダウンロードはこちらから

サイトの表示速度を検証する 10月 14, 2009

Posted by hyhy in 技術情報.
Tags: , ,
comments closed

■■Yslow
サイト表示を重くする原因を解析、測定するツール「Yslow」がyahooより提供されています。
現在、Firefoxのアドオンという形で公開されています。

http://developer.yahoo.com/yslow/
https://addons.mozilla.org/ja/firefox/addon/5369

このツールは、高速化のための判定項目が最新版では全部で22項目に分かれており、内容もHTMLコーディングの方法からサーバの設定まで多岐にわたりますが、すべての項目でA~F判定で表示され、そのサイトが抱える問題点をわかりやすく指摘してくれます。

■導入手順
1) Firefoxのアドオンである、「Firebug」をインストールします。
2) 「YSlow」 をインストールします。

■実行手順
yslow

1) Firefoxを起動し、ツールからFirebugを立ち上げる。
2) 検証したいサイトを開く。
3) Firebugより「YSlow」タグを開く。
4) Autorun YSlow each time a web page is loadedにチェックを付け、「Run Test」をクリック。

■■Page Speed
http://code.google.com/intl/ja/speed/page-speed/

Googleにより、Webサイトのパフォーマンスを向上させるための解析/最適化アドオン「Page Speed」がリリースされました。Page SpeedはFirefox上で動作するアドオンです。Webサイトを構成するCSSやJavaScript、画像ファイルなどをあらかじめ用意されたチェック項目に沿って解析し、問題点や改善方法をリスト化してくれます。またFirebugの「ネットワークモニター」をさらに強力にしたような機能「Page Speed Activity」では、Webサイトの表示にかかった時間をDNSやキャッシュヒット、JavaScriptのパースや実行時間を計測することができます。

■導入手順
1) Install Page Speed.
2) Run Page Speed against your web pages.
3) Read about the Page Speed performance best practices

参考サイト

米ヤフー、サイト高速化を実現する「Traffic Server」をオープンソース化
「ウェブサービスのパフォーマンスとスケーラビリティ」
High Performance Web Design ~デザインから考えるハイパフォーマンスWebサイト~

ブウラザのレンダリングエンジンについて 10月 7, 2009

Posted by hyhy in 技術情報.
Tags: ,
comments closed

とあるサイトで今まで表示動いていたものが動かなくなっていたことが判明。
やっていることは、
javascriptでwindow.onloadイベント発生時に、swf生成用のObjectを取得して、
setVariable()メソッドでFlashに変数と値を渡しているのですが、
どうもFireFox3.5のときだけ動かないのです。

setVariable()実行時にFlash側の変数が見つけられないことが原因らしく。

FireFoxのバージョンを3.0や2.0にダウングレードしてみたり、
Flashが絡んでいることからFlashPlayerを10から9にダウングレードしてみたり、
やってみたところ、正常に動くことが確認されました。

対応策として、jsのonload直後のObject取得及び、setVariable()メソッドの実行のタイミングを遅らせることで、正常動作が確認できました。

以上のことより、FireFox3.5+FlashPlayer10の組み合わせによる問題?
FireFox3.5は前バージョンより、HTMLレンダリングのスピードが若干ダウンしている?
と勝手に納得してしまいましたが、

ここで、疑問が。
onload直後のDOM操作について、ブラウザ毎に搭載されているレンダリングエンジンの仕組みについて、調べてみました。

HTMLレンダリングエンジン

HTMLレンダリングエンジンとは、HTMLをはじめとしたウェブページ記述用言語で書かれたデータを実際に画面に表示するための計算をするプログラムです。

[主要ブラウザのレンダリングエンジン]
Trident (Internet Explorer)
Gecko (Firefox, Camino, SeaMonkey他)
WebKit (Safari, Google Chrome,シイラ, OmniWeb他)
Presto (Opera)

あ、SafariもGoogle Chromeも同じレンダリングエンジンを使っているから、Google Chromeでページを閲覧しても、UA(ユーザーエージェント)に「Safari」が含まれるのかな?

ちなみに、よく聞くWebKit(ウェブキット)(個人的にだけど)は
アップルが中心となって開発されているオープンソースのHTMLレンダリングエンジン群の総称です。

先日、GoogleがIEでChromeのレンダリングエンジンを利用可能にするプラグイン「Google Chrome Frame」を公開しました。

Chrome開発者らによるThe Chromium Blogによると、最近のJavaScript実行環境のパフォーマンス向上やHTML5などの最新技術によってWebアプリケーションはデスクトップアプリケーションを置き換えるまでに進化しているが、いっぽうでIEは最新技術をサポートしていないため、開発者はIE向けの対応に追われている、と述べている。Google Chrome Frameを利用することで、IEでもこれらの最新技術を利用できるようになり、Web開発者がIEへの対応に苦しめられることもなくなる、ということらしいです。

ちょい書きかけなので、時間ある時に追記。

[Firefox] はてなスクリーンショット拡張 9月 26, 2009

Posted by hyhy in 技術情報.
Tags: ,
comments closed

めちゃ便利
だってスクリーンショットをそのままイメージとして保存できる!

https://addons.mozilla.org/ja/firefox/addon/14198

FireFoxは使いやすいなー