@blog.justoneplanet.info

JavaScript、PHP、MySQLを使ったり

Firefox3.6で旧バージョン用のプラグインを動かす

URL欄に以下のように打ち込む。

about:config

右クリックで項目を追加する。「真偽値」を選択だ。項目名は以下の通りだ。

extensions.checkCompatibility.3.6

値は「偽」(=false)だ。

false

3.6にアップデートしたらlive http headersが動かなくなってしまったので対処。

ZendFrameworkビュースクリプトでのbodyタグ

以下のように記述するとcssで装飾しやすい気がする。

■コントローラ

public function init(){
    $this->_view->module     = $this->_getParam('module');
    $this->_view->controller = $this->_getParam('controller');
    $this->_view->action     = $this->_getParam('action');
}

■ビュー

<body class="<?php print($this->controller); ?>" id="<?php print($this->controller); ?>_<?php print($this->action); ?>">

ちなみに以下のようになっている。

print($this->module);//モジュール名
print($this->controller);//コントローラ名
print($this->action);//アクション名

出力例

<body class="category" id="category_register">

参考

以下の例の場合を考えてみる。

<body class="<?php print($this->module); ?> <?php print($this->controller); ?> <?php print($this->action); ?>">
出力例
<body class="category" id="category_register">

一見素晴らしいが、IEが以下のセレクタに対応していないため使用できない。

body.admin.category.register {
	background-color: red;
}
body.register {
	background-color: blue;
}

上述のように記述するとIE6のみbodyの背景色がblueになるはずだ。

IEではJavaScriptでobject要素にembedを挿入できない

以下のコードを実行した時にIE6~8でエラーが発生する。appendChildやreplaceChildを使用してもできない。

var objectElm = document.createElement('object');
objectElm.setAttribute('classid', 'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000');
objectElm.setAttribute('codebase', codebase);
objectElm.setAttribute('width', '240');
objectElm.setAttribute('height', '320');
var embedElm = document.createElement('embed');
embedElm.src = url;
embedElm.setAttribute('quality', 'hign');
embedElm.setAttribute('pluginspage', pluginUrl);
embedElm.setAttribute('type', 'application/x-shockwave-flash');
embedElm.setAttribute('width', '240');
embedElm.setAttribute('height', '320');
objectElm.appendChild(param1);
objectElm.appendChild(param2);
objectElm.appendChild(embedElm);//error - invalid argument(引数が無効です。)

クライアント側で

■解決策1

条件分岐して、IEのみobject要素に包括せず、embedのみを出力する。

var embedElm = document.createElement('embed');
embedElm.src = url;
embedElm.setAttribute('quality', 'hign');
embedElm.setAttribute('pluginspage', pluginUrl);
embedElm.setAttribute('type', 'application/x-shockwave-flash');
embedElm.setAttribute('width', '240');
embedElm.setAttribute('height', '320');
objectElm.appendChild(param1);
objectElm.appendChild(param2);
if(!!(window.attachEvent && !window.opera)){
    document.getElementById('flash').appendChild(embedElm);
}
else{
    objectElm.appendChild(embedElm);
    document.getElementById('flash').appendChild(objectElm);
}

■解決策2

object要素の後ろに殻のembed要素を挿入する。恐らくオリジナル。

var embedElm = document.createElement('embed');
embedElm.src = url;
embedElm.setAttribute('quality', 'hign');
embedElm.setAttribute('pluginspage', pluginUrl);
embedElm.setAttribute('type', 'application/x-shockwave-flash');
embedElm.setAttribute('width', '240');
embedElm.setAttribute('height', '320');
objectElm.appendChild(param1);
objectElm.appendChild(param2);
document.getElementById('flash').appendChild(objectElm);
if(!!(window.attachEvent && !window.opera)){
    document.getElementById('flash').innerHTML += '<embed></embed>';
}
else{
    objectElm.appendChild(embedElm);
}

なぜかチャント動くようになる。

参考

Firefox3.5

インストールしました。ほとんど見た目は変わらないのですが、タブをドラッグしたときの挙動が少しだけ異なってますね。あと、新しいタブを追加するボタンが追加されてますが、個人的にはありがたくないボタンです。ただし、ほとんどのユーザには使いやすいと思われます。

credit

噂の通りJavaScriptの速度が半端なく早いですね。Google Chromeも早いんですが、使い慣れている+性能となるとFirefoxしかない、というのが個人的な結論です。Gmailもすぐに立ち上がります。

gmailスタンバイ

Firefox3.5ダウンロード

Internet Explorer 8インストール(画面キャプチャ付き)

■まずIE8のダウンロード

http://www.microsoft.com/japan/windows/products/winfamily/ie/function/default.mspx

Internet Explorer 8がインストールできるのはWindows XP, Vista, Server2008のみだ。気になるのだがMicrosoft(マイクロソフトは)簡単に過去製品(Windows2000とか)を見捨てないであげて欲しい。サポートは長めにしてやるってのが誠意だろうに。それに古いブラウザを使ってる人が結構残ってしまうから、Web開発の立場からしても困るんです。

■さてダウンロードしたら

ダブルクリックしてインストール。するとまぁこんなのが出てくる。

インストール時の警告画面

実行をクリック

■クリックすると

インストールの開始といわれる。後で再起動が必要になるのでココで全てのアプリを終了させておく事をお勧めする。

インストールの開始

ロゴが横に潰れてるのが正直気になった(笑)。中身が潰れてなければイイが・・・

■次へをクリックすると

ライセンスの同意

当然だがライセンスには同意しなくちゃならん。同意したくないアウトローな人は諦めるべし

■同意したら

更新プログラムのインストールも勧められる。

更新プログラムのインストール

やはりセキュリティには気をつけた方がイイ世の中なのでチェックは入れておくべきだろう。

■次へを押すと

インストールが進む。んで完了。

再起動

最初に触れたが、この時点で再起動を迫られる。無理せず再起動することを勧める。

■再起動するとIE8が使えるようになる

初めての起動をすると、コンナ画面が出る

Internet Explorer 8へようこそ

こんにちは的な挨拶だ。「以前よりも早く動く」とか「アクセラレータ・・・」との事。まぁ使ってみなけりゃ分からないわな。

■次へをクリックすると

お勧めサイトを有効にする

おすすめサイト機能を有効にするか聞いてくる。面白そうなので「はい」にしてみた。どうやらユーザーの好みに応じたサイトをお勧めしてくれるらしい。

■次へいくと

設定の選択画面だ

設定の選択

細かい設定が変更できるらしいのだが時間もないので「高速設定」で今までの設定を引き継いでしまう事にする。マイクロソフトは大半のユーザーが「高速設定」を選ぶ事を知ってるはずだ。

■次はお気に入りのインポート

お気に入りのインポート

普段使ってるブラウザがIEでない人はココでチェックを入れよう。コレで設定は終わりだ!

■実際に使ってみた

実際の画面

まぁレイアウトが崩れることはない。マイクロソフトがプッシュするだけあって動きもIE7に比べたら全然滑らかである。

アクセラレータ

こんな感じでテキストを選択すると右側に半透明のアイコンが出る。

アクセラレータ

うーん便利。似たような機能は他のブラウザでも使えるが相手サイトに行かずとも翻訳が出来るのは素晴らしい。

URL蘭

アドレスバー

Google Chromeと同じように「履歴」と「検索へ」をマージして表示してくれる。

開発者ツール

開発者ツール

Firefoxは開発者に好かれてシェアを伸ばした。Microsoftはそれを学んだのだろう。

ウェブスライス(Web Slices)

一番注目されている!?機能だ。対応しているページに行くとツールバーに小さな緑色のアイコンが表示される。

ウェブスライス

クリックし購読すると、画面のようにサイトに行かなくても更新がチェックできるのだ。切り売り、まさにWeb Slicesだ。今後、IE8ユーザーが増えるにしたがってこの機能は一般的になるかもしれない。但し、今のところサイトが対応してないとスライスは出来ない。RSSに似ているが、その違いを簡単に言ってしまうと「ページの要約」と「ページの切り抜き」の違いだ。

■おまけ

タスクバー

今までIE憎しと、テストくらいにしか使ってなかったブラウザだったが、何だかタスクバーに入れてやりたい位の気持ちにはなった。常用するかどうかは今後の気分しだい。

JavaScriptの実行速度については一般ユーザーには気にならない程度になってるだろう。Firefox2では、SetTimeoutを使ったアニメーションが酷くコマ落ちしたが、あんな現象が起こらなければ、JavaScriptの速度をオレのような開発者以外が気にするような事は少ないと思う。Gmailを除けば・・・

■Firefox信者にはコチラ

FirefoxでWebSlices(microformat)には対応できないのっ!?・・・とか思ってしまった方、アドオンで実現できますよ。

Firefox3をインストールしたら…

■…サイドバーが勝手に右に表示された

Firefox2の時はちゃんと左に表示されていたのに…

■以下のように解決

C:Documents and Settingsログインユーザー名Application DataMozillaFirefoxProfilesプロファイルの名前.defaultchromeにある
userChrome.css

window > hbox {
direction: rtl;
}
window > hbox > * {
direction: ltr;
}

との記述があったので、上記の部分を削除し解決!
もちろんCSSが分かる人はコメントアウトでも結構さ!

■一言

Firefox2の時はちゃんと左に表示されていたのに、オカシイですね~。ちなみにコノ現象は起こらない人の方が圧倒的に多いと思います!周囲の人はみんな問題なかったので。

ちなみにですが、まだインストールしてない方は是非ともFirefox3をインストールしてみて下さい。とにかく早い!表示がとんでもなく早い!軽い!とんでもなく軽い!ちょっとコアな話だとJavaScriptの処理が超早い!Flashが大量にあるページでも表示が早い!イイ事だらけ!Mozillaに嫁ごうかと思った!笑

Firefox3をチョットだけ使ってみた

■発見

JavascriptでHTML上の要素をsetTimeoutなどでアニメーション移動させると、マウスの移動などによりFirefox2ではアニメーションが止まったりした。しかしFirefox3では滑らかなアニメーションが実現されている。

Internet Explorerのデバッグツールを使おう

Internet Explorer Developer Toolbar

言語:
英語
料金:
無料
機能:
・ドキュメントオブジェクトモデル(DOM)を探して、修正できる(修正については未検証)
・ウェブページの上で特定の要素をレンダリングビュー上で選べる
・HTMLに、クラス名やIDをはじめ、様々な属性を追加できる
・要素のアウトライン(枠線)を表示できる(制作時のコーディング補助として有用)
・バリデートできる(HTML、CSSなど)
・ブラウザ上にイメージの様々な情報(サイズなど)を表示できる
・キャッシュやクッキーをコントロールできる
・カラーピッカーが使える

IE WebDeveloper

言語:
英語
料金:
有料(トライアル15日、無料)
機能(未検証):
・JavaScriptコンソールがついているらしい
・HTTP通信がモニターできるらしい(但しこれは別のフリーツールがある)
・おおまかに言ってしまうとJavaScriptコンソールが使える分だけ、こちらが上手なようだ

■コメント

前回、IEでのデバッグに困ると書きましたが、一応はこのようにデバッグツールもあるみたい

しかし、Internet Explorer Developer Toolbarでは非同期通信のデバッグなどJavaScriptのデバッグは出来ないようなので、やはりFirebug(Firefox)の方が一歩も二歩も開発しやすい気はする。

IE WebDeveloperは有料という非常に高いハードルがネックではあるが使ってはみたいとおもう。