A24.net: 2009.07

2009/07/21

ブラウザの表示領域を取得とか

ブラウザの表示領域を取得とか。CommentsAdd Star

JavaScript

javascriptでブラウザの表示領域(非表示部分も含む)を取得するには、

標準モードか後方互換モードかで使えるプロパティが変わってくる。

そこらへんの話は、下記サイトがとてもわかりよいです。

DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含んだ 2008 年版 )

ブラウザの表示領域のサイズを取得する方法

ブラウザのスクロールバーで隠れている領域を含むサイズを取得する方法。

で、自分でhtmlを書く分には標準or後方互換にするかを決めれるものの

ぐりもんのようにブラウザに組み込んでつかう場合は標準or後方互換の

どちらのモードでも動かないといけないし、ライブラリにするのなら

標準or後方互換に加えブラウザ間も考慮しないといけなくなる。。

標準か後方互換かは、document.compatModeで判別が可能のようで

→ドキュメントモードを調べる

標準モードの場合(IE6/IE7/Firefox3.0.7/Opera9.6.4/Chrome1.0.154.48/Safari3.2.1)

CSS1Compat という文字列が返ってきます。

後方互換モードの場合(IE6/IE7/Firefox3.0.7/Opera9.6.4/Chrome1.0.154.48/Safari3.2.1)

BackCompat　という文字列が返ってきます。

ちなみに、表示領域を取得する際のプロパティについて

最近のブラウザの対応状況をチェックしてみました。
タイププロパティ IE6 IE7 FF3 Op9 Ch1 Sa3
標準 document.documentElement.clientWidth/Height OK OK OK OK OK OK
標準 document.body.clientWidth/Height NG NG NG NG NG NG
後方互換 document.documentElement.clientWidth/Height NG NG NG NG OK OK
後方互換 document.body.clientWidth/Height OK OK OK OK OK OK

これなら、標準or後方互換の振り分けでだいじょぶですね。

標準→document.documentElement.clientWidth

後方互換→document.body.clientWidth/Height

同様に、非表示領域を含むサイズを取得するプロパティについて
タイププロパティ IE6 IE7 FF3 Op9 Ch1 Sa3
標準 document.documentElement.scrollWidth/Height OK OK OK OK NG NG
標準 document.body.scrollWidth/Height NG NG NG NG OK OK
後方互換 document.documentElement.scrollWidth/Height NG NG NG NG NG NG
後方互換 document.body.scrollWidth/Height OK OK OK OK OK OK

ブラウザによる場合分けも必要ですね・・・

Chrome || Safari || 後方互換→ document.body.scrollWidth/Height

標準→　document.documentElement.scrollWidth/Height

結局こんな感じになるのかな？？

ブラウザの振り分けは、JavaScript によるユーザエージェント判別を使用しました。

//表示領域のサイズ
var x, y;
if(document.compatMode == "CSS1Compat"){
x = document.documentElement.clientWidth;
y = document.documentElement.clientHeight;
}else if(document.compatMode == "BackCompat"){
x = document.body.clientWidth;
y = document.body.clientHeight;
}

//非表示領域も含むサイズ
var x_all, y_all;
var uai = new UAIdentifier();
if(uai.chrome || uai.safari || document.compatMode == "BackCompat"){
x_all = document.body.scrollWidth;
y_all = document.body.scrollHeight;
}else if(document.compatMode == "CSS1Compat"){
x_all = document.documentElement.scrollWidth;
y_all = document.documentElement.scrollHeight;
}

最近のブラウザのみならこんな感じでよさそうですね。

下記に上記コードのテストページで確認できます。

→標準モードのページ

→後方互換モードのページ

ただし．．．

macのFirefox3で見る限り

表示領域のx方向(Width)が416より小さくならないです　汗

他(macのsafari3/Opera9)は大じょぶでした。

それと・・・

ブラウザのスクロール量を取得するプロパティって変な挙動をするんですね。

ブラウザのスクロール量を取得するには？

せっかくなんでこれも上記サイトで扱っているプロパティについて

標準or後方互換とでどんな挙動をするか比較してみました。
モードプロパティ IE6 IE7 FF3 Op9 Ch1 Sa3
標準 window.scrollY - - OK - OK OK
標準 window.pageYOffset - - OK OK OK OK
標準 document.body.scrollTop 0 0 0 0 OK OK
標準 document.documentElement.scrollTop OK OK OK OK 0 0
後方互換 window.scrollY - - OK - OK OK
後方互換 window.pageYOffset - - OK OK OK OK
後方互換 document.body.scrollTop OK OK OK OK OK OK
後方互換 document.documentElement.scrollTop 0 0 0 0 0 0

表で言うとこの

ーのところは、undefinedでした。

0のところは、常に0でした。

OKのところは、きちんと値を返してくれました。

テストに使ったのは、下記ページ。

いろいろごっちゃまぜになってますが　汗

→標準モードのページ

→後方互換モードのページ

var y_scroll =;
if(document.compatMode == "BackCompat"){
y_scroll = document.body.scrollTop;
}else if(document.compatMode == "CSS1Compat"){
y_scroll = window.pageYOffset || document.documentElement.scrollTop;
}

上記コードで動くかのテストのページ

→標準モードのページ

→後方互換モードのページ

2009/07/13

Eco-Soft EcoMhtEd 2 MHT ファイル簡易編集ツール

Eco-Soft

（ソフトウェアの部屋）
最終更新日：09/07/09
スクリーンショットは先頭のアイコンをクリックしてください。
変更履歴は説明ページの最後です。

ソフトの対応 OS は XP/Vista です。
公開中ソフト
screen shot EcoMhtEd 2 MHT ファイル簡易編集ツール Update! 2009/07/09
ver 2.1.0 説明ページへダウンロード

* 要 .NET 3.5

screen shot EcoPassNET ブラウザ自動入力ツール 2009/07/02
ver 1.3.3 説明ページへダウンロード

* 要 .NET 2.0
* IE / Firefox 3 対応
* 32bit 環境のみ (64 bit はたぶん不可)
* ⇒ EcoPassIE II 用データ変換ツール (download)
(エクスポートファイルを EcoPassNET 用インポートファイルに変換します)

窓の杜
screen shot EcoGrep テキスト検索ツール 2009/03/07
ver 1.0.0 説明ページへダウンロード

* 要 .NET 2.0
* 速くもなく多機能でもないごく普通の GUI Grep

Firefoxでmhtファイルを扱えるようにする「UnMHT」拡張

Firefoxでmhtファイルを扱えるようにする「UnMHT」拡張 - SourceForge.JP Magazine

Firefoxでmhtファイルを扱えるようにする「UnMHT」拡張
2009年06月23日 09:01AM 1 2

* スラッシュドットにタレコむ
* あとで読む
*

Firefoxでmhtを扱えるようにする「UnMHT」拡張

　Internet Explorer（以下、IE）からFirefoxに乗り換えたユーザーには、FirefoxがWebページのmht（MHTML）形式での保存/閲覧に対応していないことを不満に思う人も多いのではないだろうか。今回紹介するのは、Firefoxでこのmht形式ファイルを扱えるようにする「UnMHT」拡張である。
Ads by Google
Googleツールバー:便利機能 toolbar.google.com
株価検索から英和辞書まで。無料ダウンロードはこちらから！
IBMのファイル転送システム IBM.com
FTPとメッセージングを１つのソフトで一元管理し、運用を効率化
メール検索ならバラクーダ ad.barracuda.co.jp/ma/
68万円台からのアプライアンス低価格・簡単設定
メールアーカイブならIIJ www.securemx.jp
現在のメールシステムそのままに素早くお手軽、最新機能導入
猫の心臓病に www.peace7.com
12万ユーザーから喜びの声!自然治癒力を高めるペット用健康用品“イフ”。

　以前紹介した「IE Tab」拡張を導入すれば、Firefox中でIEエンジンを利用できたが、それはあくまでもFirefoxの中でIEを使っているだけであって、Firefoxでmhtが扱えているわけではない。いっぽう、UnMHT拡張を導入すると、FirefoxでもWebページやその構成ファイルを1つのmht形式アーカイブファイルにまとめて保存したり、すでに保存されたmhtファイルをFirefox内で表示することができるようになる。

　インストールするには、FirefoxアドオンサイトのUnMHTのページで「Firefoxへインストール」をクリックする。するとユーザーライセンス契約のページが開くので、「同意してインストール」ボタンをクリックしよう。確認ダイアログが表示されるので、「今すぐインストール」ボタンをクリックする。ほかのアドオンと同様、インストールが終わったら指示に従ってFirefoxを再起動すればよい。

　UnMHTをインストールすると、メニューバーの「ファイル」－「MHTで保存」もしくは「全てのタブをMHTで保存」で、mht形式でWebページを保存できるようになる。また、Webページを右クリックした際に表示されるショートカットメニューに「MHTで保存」や「選択範囲をMHTで保存」が追加される（図1）ほか、ステータスバーにもアイコンが追加され、ここから「MHTで保存」や「全てのタブをMHTで保存」を選択できるようになる（図2）。
図1 Webページのショートカットメニューに「MHTで保存」などが追加される
図1 Webページのショートカットメニューに「MHTで保存」などが追加される
図2 ステータスバーにアイコンが表示され、MHT形式での保存やMHTファイルの展開といった機能にアクセスできる
図2 ステータスバーにアイコンが表示され、MHT形式での保存やMHTファイルの展開といった機能にアクセスできる

　Webページを「MHTで保存」する際は、ファイルの種類としてデフォルトの「Webアーカイブ(.mht)（現在の状態）」以外に「Webアーカイブ(.mht)（元のファイル）」や「Webアーカイブ(.mht)（現在の状態）＋追加ファイル」、「Webアーカイブ(.mht)（元のファイル）＋追加ファイル」が選択できる（図3）。
図3 Webページを保存する形式としては4種類から選択できる
図3 Webページを保存する形式としては4種類から選択できる

　また、「全てのタブをMHTで保存」を選択した場合は、まず「全てのタブをMHTで保存」ダイアログが表示される（図4）。
図4 「全てのタブをMHTで保存」ダイアログ。保存形式や保存方法などを設定できる
図4 「全てのタブをMHTで保存」ダイアログ。保存形式や保存方法などを設定できる

　「対象」としては「現在のウィンドウ」と「全てのウィンドウ」が選択可能で、それぞれ該当するタブがリスト表示される。「ディレクトリ」で保存場所を指定し、「保存形式」ではタブごとに単独のファイルにするか、単一のファイルにするかを選択できる。「保存方法」は「現在の状態」もしくは「元のファイル」が選択でき、「ファイル名」はデフォルトの「元のファイル名」以外にも「ページタイトル」や「通し番号付き」、「カスタム」が選択可能だ。設定を確認したら、「保存」ボタンをクリックしよう。

　なお、もし同じ名前のファイルがすでに存在した場合は、上書きを確認するダイアログが表示される。もし上書きを行いたくない場合は名前を変更するか、処理を中断することも可能だ（図5）。
図5 ファイルがすでに存在する場合は上書きを行うか、もしくは名前を変更するか選択できる
図5 ファイルがすでに存在する場合は上書きを行うか、もしくは名前を変更するか選択できる

　また、Webページのクリッピングなどに便利なのが「選択範囲をMHTで保存」機能だ。これは選択した範囲のみを一つのmhtファイルとして保存するもので、メニューなどを省いて本文のみを保存したい場合などに利用するとよいだろう。もちろん画像も選択すれば、レイアウトもそのままで1ファイルに保存される。
1 2 次のページ »
森川拓男

* Firefox拡張
* Mozilla
* ブラウザ
* プラグイン/拡張機能
* 森川拓男
* オープンソース

2009年06月22日 05:21PM 更新

2009/07/07

FirefoxPortable.ini

ひがんばな日記録 - 忍者 FirefoxPortable.ini

FirefoxPortable.ini
2007/11/05 13:50:37
FirefoxをUSBメモリ等に入れて持ち運べるFirefoxPortableというものがあるということはかなり知られていて便利に使用している人も多いかと思います(ただ実際に持ち運ぶには重いし、激しいもので注意が必要だと思います)。
が、起動時のスプラッシュスクリーンがどうにも……というような声も聞かれます。これはFirefoxPortable.iniのDisableSplashScreenをfalseにしてFirefoxPortable.exeと同じディレクトリに置くことで簡単に回避できます。
その他のオプションもReadme.txtに書かれていますが和訳すらなかったので適当に邦訳してみました。が、訳であって解説ではありません。大体わかると思いますし、下手に変更しないほうがいいのですが一応かいておきますね。

--------
インストールディレクトリ構造
==================================
標準では以下のような構造になっています。

-\ <--- Directory with FirefoxPortable.exe
+\App\
+\firefox\
+\Data\
+\profile\
+\settings\
+\plugins\ (optional)

標準ではFirefoxPortableディレクトリの中にFirefoxPortable.exeが置かれその下のディレクトリににその他のファイルが置かれることになります。

FirefoxPortable.iniをFirefoxPortable.exeと同じディレクトリに置き適切に編集することでこれらの設定を変更することも可能です。

FIREFOXPORTABLE.INI 設定
=================================
Firefox Portableランチャーは実行したディレクトリに存在するFirefoxPortable.iniを読み込みます。標準の設定で問題がない場合はこれらの設定は必要ありません。
FirefoxPortableをインストールしたディレクトリの下の
Other\FirefoxPortableSourceの下にFirefoxPortable.iniのサンプルがあります。
サンプルは標準の状態で以下のようになっています。

[FirefoxPortable]
FirefoxDirectory=App\firefox
ProfileDirectory=Data\profile
SettingsDirectory=Data\settings
PluginsDirectory=Data\plugins
FirefoxExecutable=firefox.exe
AdditionalParameters=
LocalHomepage=
WaitForFirefox=false
DisableSplashScreen=false
AllowMultipleInstances=false
DisableIntelligentStart=false
SkipChromeFix=false
SkipCompregFix=false
RunLocally=false

FirefoxDirectory、ProfileDrectory、SettingsDirectory、PluginsDirectoryのエントリーはそれぞれfirefox.exe(Firefox本体)のディレクトリ、Firefoxのプロファイルのディレクトリ、設定のディレクトリ、プラグインのディレクトリを相対パスで指定します。これらはFirefoxPortable.exeのあるディレクトリのサブディレクトリでないといけません。標準では『インストールディレクトリ構造』にある構成になっています。

FirefoxExecutableはFirefox Portableが呼び出す実行ファイルの名称を設定するエントリーです。これを変更することでfirefox.exeではない(スタブ等の)実行ファイルを指定することができます。

AdditionalParametersはfirefox.exeに与える追加の引数を設定するエントリーです。

LocalHomepageはホームページ(ブラウザの起動時に表示するページ)を設定するエントリーです。このファイルも必ずサブディレクトリに入れてください。たとえば、
LocalHomepage=homepage.html
や
LocalHomepage=homepage/homepage.html
といったように設定します。

WaitForFirefoxはFirefoxが閉じられるまでFirefox Portableが終了しないで待ち続けるエントリーです。たとえばfirefox.exeが%APPDATA%\Mozilla\Firefoxに書き込んだ設定を消去するような場合に役立ちます(true/falseで設定すること)。

DisableSplashScreenはFirefox Portableが起動時に表示するスプラッシュスクリーンを非表示にするオプションのエントリーです(true/falseで設定すること)。

AllowMultipleInstancesはFirefoxを複数起動可能にするためのオプションのエントリーです(true/falseで設定すること)。

DisableIntelligentStartは起動時にchromeとcomponentの登録の修正を行います。パスの変更が起きた場合(例えば別のPCで起動した場合)にこれらの絶対パスが変化しますがそのような場合に設定の変更を行います。これを行わない場合には起動が高速になりますが、Firefox Portableのセッション中にプロファイルをコピーしても(初回起動時に自動で起こる)プロセスはそれを知ることができなくなります。例えばローカルPCとUSB上のFirefoxを同期させるような場合に起こりえます。trueに設定すると起動ごとにこの作業を行います。
＃訳意味不明
＃falseにしているとchrome.rdfが初回起動時にだけ設定されるがtrueならば毎回チェックし、変更を更新するようになる。と思う。

SkipChromeFixをtrueにするとエクステンション(拡張機能)がために使用するchrome.rdfを適切に設定しなおす動作を行わなくなります。拡張機能を使用していない場合などにこれをtrueにすると起動が高速化します。

SkipCompregFixはコンポーネントレジストリ(compreg.dat)のパス情報のチェックを行わなくするためのオプションエントリーです。コンポーネントレジストリを使用する拡張機能(Forecast FoxやMozilla Calendar等)をインストールしていない場合はtrueにすると起動が高速になります。

RunLocallyはprofile、plugins、Firefoxの実行ファイルをローカルマシンの一時ディレクトリにコピーして実行するためオプションのエントリーです。Firefox PortableをCDのような読み込み専用デバイスから実行するようなときに役立ちます。スパイウェアやウィルス等が自分のメディアに感染するのを防ぐためにもリードオンリーデバイスは役立ちます。ただし当然ブックマークやcookieはデバイスに保存されず破棄されます。これらのファイルは終了時に削除されます。Firefox本体のバージョンを取得できないのでAllowMultipleInstancesオプションとは同時に使用できません。

Boolean(論理型/true or false/真偽値)の値はtrueかfalseと、小文字で書かないといけません。
--------

注意：翻訳ではなく、超訳、勘訳です。
それ以外の部分については設定とは関係ありませんので省略。

DisableSplashScreenなんかはほかのPortableAppsにも設定がありますから覚えておくとスプラッシュが表示されなくて助かります。

Bolgger にアップした画像の URL

無聊を託つ: FancyBox

生成されるHTMLは

border="0" height="160" width="240" />

こうなる(Picasaだからね)。このアンカーのリンク先はHTMLで画像じゃないんだけど、中身は↓。

アンカーとのURLの違いはHTMLが/s1600-h/で、画像が/s1600/。なのでこれをfancybox適用前に書き換えてしまいましょう。

$(function(){
$("a[href*=ggpht.com]").each(function(idx,elem){
elem.href = elem.href.replace('/s1600-h/','/s1600/');
$(elem).fancybox();
});
});

全然、他のパターンを考慮してないけど、いいよね。これで、画像表示も見やすくなりました。

Costa Rican Frog metalking

HighslideでもLiteboxでも「s1600-h」でエラー

まれにblog: 10月 2008

Highslide導入テスト2
投稿者 gonsuke 時刻 1:12
1410月2008

前回、Highslideの導入は出来たものの、画像にカーソルを重ねても虫眼鏡(+)にならなかったり、拡大した画面の周りに白い変なものがくっついて来たりと少々問題がありましたが、原因がわかりました。
「highslide.css」のコードをよくよく見てみると、参照先のURLが間違っておりました。というかデフォルトのままでした(^^;
参照先URLを修正してあげると、無事に虫眼鏡が現れ、拡大後の画像も問題なく表示されましたｗ
ちなみにBlogger固有の問題かもしれませんが、Bloggerに画像をupすると画像の参照先URLに「s1600-h」というのが付いてきます。記事をup後、記事の編集で「s1600-h」を削除してあげなければ正常に動作してくれません。これは、HighslideでもLiteboxでも同様です。少し面倒です。なんとかならないかなぁ・・・。

Lightbox JS v2.0 導入しつつ改造

Lightbox JS v2.0 導入しつつ改造 - LogJET

Lightbox JS v2.0 導入しつつ改造

巷で話題のLightbox JSLightbox JSのリンクを新しいウインドウで開くを導入。しかも v2.0。

* lightbox用サムネイル1
* lightbox用サムネイル2
* lightbox用サムネイル3
* lightbox用サムネイル4
* lightbox用サムネイル5
* lightbox用サムネイル6
* lightbox用サムネイル7
* lightbox用サムネイル8

rel="lightbox"が面倒くさい

ナマケモノだったりするのでアンカーにrel="lightbox"と記述するのが面倒くさいわけですね。ですので問答無用に画像系のリンクはすべてlightboxで出てくるようになっています。

アンカータグのhrefに含まれるURLの最後の拡張子を判別する処理を行っています。
で、今回はとりあえず、拡張子が"jpg"、"gif"、"png"、"ico"の場合にlightbox起動という具合になっています。過去にブログとかで画像投稿しまくってrel="lightbox"入れるの面倒くさいって人にはちょうど良いかもなーな方法です。

弊害としては、lightbox v2.0の魅力的な機能の一つイメージグループ機能が死んでしまうことでしょうか…この辺修正したい。
大きい画像がはみ出しました

さて、これはもう別に自分がやらなくても誰かやってると思うので、ソースを参考に作ってしまえば良かったんですけど、どうせなら自分でやってしまうかということで自力で実装。

スクリーンショット例えば、スクリーンショットとかを載せる場合などに重宝するかもしれません。

開く画像が画面より大きいなと判断したら自動で小さくなります。ついでに、オリジナル画像へのリンクボタンが現れます(同じウインドウで開くボタンと別ウインドウで開くボタン)。

何気に、縦・横両方がはみ出す場合の処理が面倒くさかったりしました。

ボタンにロールオーバー機能つけたかったので例のテキストリンクで背景画像ずらし例のテキストリンクで背景画像ずらしのリンクを新しいウインドウで開く使っています。
ちょっと奇妙なCSSになってたりしますけど(ボタンの重なりあたり)。
姑息なCSS書き出し

ついで、といっては何ですがlightbox用CSSもJavaScriptで書き出してます。理由はCSSがValidじゃ…云々。
まとめ

lightbox用サムネイル9そもそも、lightbox導入の理由は以前から気になっていた「strictで組んだHTMLにtarget="_blank"が使えない」というものでした。画像へのリンクが同じウインドウで開くために誤ってウインドウを閉じてしまう失敗を何度も繰り返していました。

この失敗を画像へのリンクにワンクッションおくことと、オリジナル画像を開く前に告知する(オリジナルを開くボタンを設ける)ことで回避したわけです。
ついでに同じウインドウで開くか別窓で開くか選択肢を設けるポリシーポリシーのリンクを新しいウインドウで開くを盛り込んだ次第です。

とはいえ、このスクリプトちょっと重すぎるなーと思う今日この頃です。
興味ある人はソースを覗いて盗んでいってください。しっかり配布できるほどちゃんとした書き方してないので。触ったのは以下二点と画像追加です。適当に改造してLightBoxな日々をEnjoyして下さい。

* lightbox.jslightbox.jsのリンクを新しいウインドウで開く
* lightbbox.csslightbbox.cssのリンクを新しいウインドウで開く
* 画像リンクボタン(右クリック→保存)

2009/07/21

2009/07/13

2009/07/07

ブログ アーカイブ

ブログアーカイブ