スポンサードリンク

Firefoxの最新版にFirebugの日本語版がインストールできない件について。

【講座名】
Ajax初心者入門講座 に関する質問

【質問】
はじめまして。

この度は、こちらのサイトでお勉強をさせて頂こうと思い
Firebug Japanese1.05をインストールしようとしたら

「Firefox 3.6.6 では利用できません」とでました。

どうしたらいいか教えて頂ければ幸いです。

どうぞ宜しくお願い致します。

・Firefox 3.6.6
・Firebug 1.5.0

【回答】
これは、FirefoxとFirebugのバージョンの組み合わせによる影響です。

日本語版のFirebugは、現状では最新のFirefoxには対応していません。

したがって英語版を利用してください。

「互換性」の部分に、対応できるFirefoxのバージョンが書かれています。

Firebug 英語版

Firebug 日本語版

英語版でも慣れれば、操作に戸惑うことはありません。

また、これらのソフトウェアは、日々改良が重ねられて、パージョンアップしているので、

当講座を作成した時の画面(画像)や、操作方法と変わっている場合があります。

あらかじめご了承ください。

firebugでスクリプトが表示されない件について。

【講座名】
Ajax初心者入門講座 に関する質問

【質問】
初歩的な質問ですいません。

firebugをインストールして、起動等をしてみたのですが、コンソール・スクリプト・接続の項目がそれぞれ、

「〜パネルは無効化されています」

というメッセージが出てしまい、表示できません。

どうしたら良いのでしょうか?

ちなみに、ご説明のところにありました、「Firebug を有効」をクリックします。の「Firebug を有効」といった画面は出てきませんでした。

お忙しいところ申し訳ありませんが、ご回答よろしくお願い致します。

firefox バージョン3.6
firebug バージョン1.5.0

【回答】
Firefoxは、あるバージョンから、firebug のコンソール、スクリプト、接続の3つが、デフォルトで無効になっています。

これが原因です。

Firefox全体のパフォーマンス低下を避けるためのようです。

したがって、これらの機能を有効にするには、手動での設定が必要です。

図を掲載したので、ご覧ください。

(1)JavaScriptのプログラムが使われているWebサイトを、Firefoxで表示する。


http://ws.bzen.net/pgtop/sample003/pref.html

デバッグしたいWebサイトを表示するということ。


(2)firebugを起動する。
もちろんfirebugをインストールしていないと、起動できません。


(3)スクリプトを有効にする。

qa-41.gif


(4)目的の「.js」ファイルを選択する。

qa-42.gif


(5)JavaScriptのプログラムが表示される。

qa-43.gif


*この設定はサイト毎に有効です。

それでも上手く表示されない場合は、設定後にFirefoxを再起動してみてください。

また、コンソール、接続側でも機能を有効にできます。どれか一つを有効にすれば大丈夫です。


【補足】
Firefoxやfirebugは、Webサイトの開発にとても便利なツールです。

これらは日々改良が重ねられているので、当講座を作成した時の画面や操作方法と変わっている場合があります。

あらかじめご了承ください。

Ajax IISサーバーでは、プログラムが動作しないことについて。

【講座名】
Ajax初心者入門講座 に関する質問

【質問】
sample004フォルダに、「pref.php」を作成して、phpにアクセスする部分に関してです。
このページ: http://ajax.pgtop.net/category/4495932-1.html

webサーバーで、ローカルの「pref.php」にアクセスすると、xmlが表示されるはずですが、
当方の環境で行うと、ブラウザで次のメッセージが表示されてしまいます。
---
XML ページを表示できません
スタイル シートを使用した XML 入力は表示できません。
エラーを訂正してください。 [更新] ボタンをクリックするか、
または後でやり直してください
---

webサーバーは Apacheではなく「IIS」で行っていますが、PHPは別途インストールしており、PHPの確認ページは見えてます。

次のstepに進まれず残念です。何か原因があるのでしょうか?

想定される原因があれば、何でも良いので教えて頂けますか?
宜しくお願いします。

【回答】
原因が文字コードでなければ、PHPやサーバーの設定の影響だと思います。

しかし、個々の読者の環境に対応するのは、とても困難なので、プログラミングの学習中は、「phpdev」で統一していただくようにお願いしています。

phpdevなら問題なくプログラムが動きます。
また、レンタルサーバーの ロリポップ! でも、動作することを確認しています。
初心者でも安心なレンタルサーバー。200MBで263円から。CGI・SSI・PHPが使えます。

【解説】
Ajax初心者入門講座では、中継プログラムとして PHP を使います。そのため Apache や PHPのインストールが必要です。

でも、個別にインストールして、設定まで行なうと、手間がかかります。

そこで、「phpdev」という便利なソフトを使っています。

phpdevを使うと、一発でApache、PHP、MySQLをインストールできます。しかも作業時間はたった1分程度で済みます。

まずは以下のページを参考に、phpdevをインストールしてください。
PHP phpdevで一発インストール

Ajax sample003の動作確認で、エラーが出ることについて。

【講座名】
Ajax初心者入門講座 に関する質問

【質問】
sample003の pref.js で、以下の部分を何度打ち直しても、
$("btnData").onclick = prefDisp;
IEでは「オブジェクトを指定してください。」というエラーが出るのですが、どうすればいいでしょうか?Firefoxで確認しても、エラーがでます。

ソースコードをコピーペーストしてもだめでした。IEは7で、Firefoxは3.0です。

【回答】

(1)まずWebブラウザが対応しているか確認します。Webブラウザで以下のURLを開き、動作を試してください。

http://ws.bzen.net/pgtop/sample003/pref.html
↑このページが正常に開けるのなら、Webブラウザの対応は大丈夫です。

(2)次にAjax初心者入門講座に掲載してある sample003 のプログラムを、全てそのまま「コピー&ペースト」してから、動作を確認してみてください。

js側ではなく、html側が間違っている可能性もあるからです。(id名など)

(3)あと考えられるのは、prototype.js の配置場所です。
sample003と同じ階層に libフォルダ を作り、その中に prototype.js を配置しないと動きません。

../lib/prototype.jsの位置
qa-22.gif

以下のステップをもう一度確認してみてください。
Step9・prototype.jsを入手する

Ajax UTF-8形式で保存した時の BOM(Byte Order Mark)について。

【講座名】
Ajax初心者入門講座 について

【K.Fさんよりご指摘】
既にご存知かと思いますが,「Step20・中継プログラムを使う 」において

・ (2)UTF-8 形式で保存すると header() の部分がうまく動きませんでした
・ UTF-8 で保存すると何故そうなるのか原因はわからないのですが

とのことですが,この原因はUTF-8で保存したときに自動でファイルの頭に付く
Unicodeサイン(BOM)にあると思います。

BOMをはずしてUTFで保存すると, http://localhost/ajax/sample004/pref.php
xmlとして表示することができました。

以前PHPでセッション関数を使用した時に,やはりUTF-8で保存し,エラーが出て
ひっかかったことがあったので,このケースもそうではないかと思いました。
※PHPのセッション関数では,session_start()以前にゴミが入るとエラーが返る


【補足】
K.Fさん、ご指摘ありがとうございました。

Unicode の UTF-16 だけでなく、UTF-8 などでも先頭に BOM(Byte Order Mark) が付いている場合があるようです。

(1)sample004 の pref.php は SHIFT-JIS 形式で保存しましたが、これをWindows用のバイナリエディタで開くと、以下の図のようになります。

・Stirling(スターリング)というバイナリエディタで開いた例
qa-13.gif

↑「3C」から始まる先頭に注目してください。これが正常な状態です。
画面右側には、対応するソースコードが表示されています。


次は pref.php を UTF-8形式で保存してみましょう。

(2)pref.php をTeraPadで開き、メニューから「ファイル→文字/改行コード指定保存」を選択します。

qa-14.gif


(3)文字コードに「UTF-8」を選択し、「OK」をクリックします。

qa-15.gif


(4)TeraPadの下部の表示が、「UTF-8」に変わりました。

qa-16.gif

これで準備OKです。TeraPadは一度閉じてください。


(5)もう一度、pref.php をバイナリエディタで開くと、先頭に記号が挿入されています。

qa-17.gif

↑先頭に「EF BB BF」が加わっています。
UTF-8形式だと、このBOMが原因で正常に表示できませんでした。右側のソースコードを見ても、何か文字が加わっていることが分かります。


(6)BOMを外すには、TeraPadで保存する時に、「UTF-8N」を選択するだけです。

qa-18.gif


(7)TeraPadの下部の表示が、「UTF-8N」に変わりました。

qa-19.gif


(8)再度 pref.php をバイナリエディタで開くと、先頭の記号がなくなりました。

qa-20.gif

これで pref.php が正常に動作し、XMLが表示されるようになります。


【ワンポイント】
UTF-8N 形式で保存したファイルを、再び TeraPad で開くと、自動的に SHIFT-JIS 形式と判断されるので、注意してください。

qa-21.gif

もし編集する場合は、UTF-8N 形式で再度保存することを、忘れないようにしてください。

Ajaxの非同期通信がうまくできないことについて

【講座名】
Ajax初心者入門講座楽天ウェブサービス初心者入門講座 に関する質問

【質問】
Ajax初心者入門講座の「Step13・非同期通信」と、楽天ウェブサービス初心者入門講座の「Step9・楽天から商品データを取得する」のいずれも非同期通信を使って、データを取得してみましたがうまくいきません。

Ajaxのほうは、Step13でpref.htmlはきちんと表示されますが、「データ取得」ボタンをクリックしても何も変化がおこりません。

これはファイル名pref.jsに問題があるのでしょうか?

楽天ウェブサービス初心者入門講座の方は、index.html、index.js、item.js、index.css、をきちんと決められたファイル先に保存しているのに、何も表示されません。

http://localhost/ はきちんと動くので、Webサーバーに問題はないと思います。ファイルの保存形式も UTF-8でしています。

何が原因なのでしょうか?お手数ですがよろしくお願いします。


【回答】
非同期通信ができないとのことなので、多分原因は同じです。

まず「Ajax初心者入門講座」のほうから解決しましょう。「楽天ウェブサービス初心者入門講座」は、同じ手順で解決できると思います。

少し長くなりますが、原因が特定できれば、すべて行なう必要はありません。


(1)Webブラウザ側の設定を確認します。

Webブラウザで以下のURLを開き、動作を試してください。
http://ws.bzen.net/pgtop/sample003/pref.html

上記のプログラムは sample003 をレンタルサーバーにアップロードしただけです。もしこのURLで動くなら、ブラウザ側の設定の問題ではありません。

*動かないなら、ブラウザかセキュリティソフト側で、JavaScriptがブロックされている可能性があります。


(2)次は「prototype.js」の配置場所が正しいか、もう一度確認してください。

C:\phpdev\www\ajax\lib フォルダの中に配置します。
*「\」はWindowsでは円記号のことです。

つまり以下のようなパスになります。
C:\phpdev\www\ajax\lib\prototype.js

「Step12・localhostのファイルを表示」で、

---引用---
これまでCドライブの直下にあった ajaxフォルダ を、「C:\phpdev\www」にフォルダごと移動します。
------

という操作を行なっていれば、prototype.jsが正しく配置されていると思います。


(3)「phpdev」でローカルのWebサーバーを起動し、「pref.xml」が正しく表示されるか確認してください。
http://localhost/ajax/sample003/pref.xml

XMLデータが表示されないと、もちろんプログラムで取得できません。


(4)それでも動かない場合は、どこでプログラムが動かなくなるか特定します。

プログラムに以下の1文を加えます。
alert("OK");



var response = data.responseXML.getElementsByTagName('Response');
alert("OK"); ←こんな使い方
var item = response[0].getElementsByTagName('Item');


アラートを書く場所を少しずつ変えます。アラートが表示されなくなった直前のプログラムに問題がある可能性が高いです。

キャッシュを表示しないためには、"OK2"のようにアラートで表示する文字列を毎回変えたほうが確実です。

ここで動かないのは、プログラムの入力ミスなどによるものです。問題箇所を特定できれば、修正するだけです。


(5)あとは文字コードですが、これは UTF-8 にしているとのことなので大丈夫だと思います。

とりあえず以上のことを、順番に試してみてください。一番可能性が高いのは、「prototype.js」の配置場所です。


関連する記事もご覧ください。
Ajax非同期通信のサンプルで、IEだと正常に動作しないことについて。

Ajax readfile関数とセキュリティについて

【講座名】
Ajax初心者入門講座 に関する質問

【質問】
はじめまして、いつも拝見させて頂いております。

今回 Ajax の講座のRSSサンプルを利用させて頂き、ホームページにブログの見出しをリンク付で読み込ませていた所、レンタルサーバーに上げていたのですが、セキュリティ的に問題があるかもしれないとのことで、RSSを表示するPHPファイルが読み込めなくなってしまっています。

エラーメッセージ
-------------------------------------------------------
file-access is disabled in the server configuration in
-------------------------------------------------------

最初の数日間は読み込めていましたので、おそらくサーバーの設定を変えられたのではと思います。

ローカルでは問題なく動いています。

何か解決方法などご存知でしたら教えて頂きたいです。宜しくお願い致します。


【回答】
PHPはバージョンによって、使える関数が異なります。またWebサーバーの管理者が自由に設定できます。

レンタルサーバーの場合は、ユーザーが設定を変えることができないので、似たような機能の関数を使ってみてください。

readfile関数をPHPマニュアルで調べると、「参考」という項目があります。これが関連する関数です。

http://www.php.net/manual/ja/function.readfile.php

すると file_get_contents という関数が、代わりに使えそうだとわかります。

readfile()

file_get_contents(ここにURL);

詳細はこちら
http://www.php.net/manual/ja/function.file-get-contents.php


***注意点***
(1)file_get_contents関数は、当講座で使用している「phpdev423」のバージョンでは動きませんのでご注意ください。PHPのバージョンの問題です。したがって readfile関数を使っています。

(2)readfile関数や file_get_contents関数は、他のページのデータを扱うため、踏み台にされる危険があるので注意して使ってください。

URLを指定する引数の部分を、第三者が外部から自由に変えられるようなプログラムだと、セキュリティ上問題があるということです。


【ワンポイント】
レンタルサーバーによっては、関連する関数も使えないようになっているかもしれません。ファイルを読み込む方法は、他にもいろいろありますが、一番簡単なのは、使用を許可しているレンタルサーバーに変更することです。

Ajax非同期通信のサンプルで、IEだと正常に動作しないことについて。

【講座名】
Ajax初心者入門講座 に関する質問

【質問】
ステップ13の非同期通信のサンプルなのですが、Internet Explorer だと「処理中です」の画面で止まったままになってしまいます。
FireFox であれば正常に動作するのですが、何が原因と考えられるでしょうか?

【回答】
ステップ13のプログラムは sample003 ですね。私のほうで IE6.0 で確認してみたところ、正常に動きました。そこで以下の方法を試してください。

(1)Internet Explorer で以下のURLを開き、試してください。
http://ws.bzen.net/pgtop/sample003/pref.html

上記のプログラムは sample003 をウェブにアップロードしただけですから、もしこのURLで動くなら、ブラウザの問題ではないです。


(2)各ファイルの保存時の文字コードを、もう一度確認してください。
*多くの場合文字コードで解決します。


(3)どこでプログラムが動かなくなるか特定してください。

FireFox では Firebug を使えば、簡単に問題の箇所を特定できますが、Internet Explorer の場合、動作確認するにはコツがあります。プログラムに以下の1文を加えます。

alert("OK");



var response = data.responseXML.getElementsByTagName('Response');
alert("OK");
var item = response[0].getElementsByTagName('Item');


少しずつアラートを書く場所を変えてみてください。アラートが表示されなくなった直前のプログラムに問題がある可能性が高いです。

*実行する度にブラウザのキャッシュはクリアするようにしてください。プログラムを変更したつもりでも、キャッシュを見ていることがあります。

ツール → インターネットオプション → ファイルの削除

アラートで表示する文字列を毎回変えたほうが確実です。するとキャッシュを見ている場合は、すぐに気付きます。

この方法で問題箇所を大体特定することができます。



スポンサードリンク






プログラミング入門 Q&A TOPへ