PHP DOM操作における文字化け

PHPで、次のHTMLを読み込んで、title の
テキストノードを取得し表示するものとします。

(1) HTMLコード(sample.html)

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    こんにちは
  </body>
</html>

(2) PHPコード(sample.php)

$sou = file_get_contents(./sample.html);
$dom = new DOMDocument();
@$dom->loadHTML($sou);
// <title>タグの値を取得する
$title = $dom->getElementsByTagName('title')->item(0)->nodeValue;
print "$title\n";

プログラムのソースは共に utf-8 で格納しており、php.ini の設定も utf-8 にしている
ので問題ないはずなんですが・・・・

なんと「HTMLの練習」が正しく表示されない!
文字化けします。

その原因は?
私にゃ分からないので、Gooleさんにお願いしてみると、
素晴らしいご託宣がここにありました。
かいつまんで言うと、

<meta charset="utf-8">

この書き方では、文字コードの判定できないらしく

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

のように書かなければならないとのことである。

お陰様で問題が解決しました。
が、他にも同じような問題があったような???
HTMLのバージョンがアップしても、PHPが追随してないようなイヤ~な感じがします。

Scoutが動かない

標記のソフトをインスト-ルしようとするとエラーが発生する。
インストールに失敗したのかと思いきや、java.exe の位置が探せずに起動でき
ことが原因でした。
< /gecko >に対策が書いてあります。
大変お世話になり感謝申し上げます。

少々手間取った点をメモします。
(1) インストール(解凍したものをコピーしただけのよう見えますが)先の、
C:\Program Files (x86)\Scout\javascripts\app\フォルダ内にある process_interaction.js を開きます。
(2) 秀丸では、更新不可のメッセージが出るので、一旦別フォルダ(デスクトップなど)へコピーしてから開いた方が良いでしょう。
(3) < /gecko >さんのページでは95行目とありましたが、最新のものでは108行目を変更します。

function javaDir() {
  if(air.Capabilities.os.match(/Windows/)) {
    path = air.File.applicationDirectory.resolvePath("C:\\Program Files\\Java\\jre1.8.0_77\\bin\\java.exe");
    // (以下略)

以上です。
jreにバージョンが付いているけど大丈夫なのかな?
自分の環境変数が不安になってしまう・・・。
(追)
環境変数:C:\ProgramData\Oracle\Java\javapath
このフォルダ内に、java.exe へのシンボリックリンクが張られているので
v-up 時には、このリンクを張り替えているようですので心配は無用でした。

EnterキーによりSubmitされるのを防ぐ方法

Bootstrapを使用して、次のような簡単なフォームを作成した。


<form class="form-inline" role="form">

<div class="form-group">
    <input class="form-control" id="yy" type="text">
    <label for="yy">年</label>
    <button type="button" class="btn btn-success" id="run">実行</button>
  </div>

</form>

ここで想定外の問題発生。
入力フィールドに、数値(年)を入力して Enter キーを押すと
何事も起きていないのに、入力値がスーッと消えてしまうのです。

先ずは。Bootstrap を疑ってググって色々調べてみると、Bootstrapとは無関係
で、原因はブラウザのデフォルト動作で

Enter キー押下 = Submit

になり、送信データを受信するプログラムがないためらしい。

受信用のプログラムがないので、対策として、以下のように Enter キーを無効に
することで暫定対策。

$("input"). keydown(function(e) {
  if ((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) {
    return false;
  } else {
    return true;
  }
});

これだと、Enter キーを無効にはできるが、

数値を入力 → 右手をマウスに持ち換え → ボタンをクリック

との一連の動作が、如何にも面倒。

数値を入力 → Enter キー押下

とできれば、入力がかなり改善される。
と言うことで、Enter キーを無効にすることをやめて
次のようなコードに変更。

$("#yy").keydown(function(e){
  if(e.keyCode=='13'){
    var year = $("#yy").val();
    dispData(year);  // データ表示
  }
});

ここで、またまた問題が・・・・
データは、一瞬表示されるが直ぐに消えてしまうような現象が発生。

これは、「Enter キー」のSubmit 機能が活きているため、データを
一旦表示した後に、フォームが送信されてしまうことが原因。
(この原因を掴むのに、随分苦労しました。)

送信機能を無効にするため、最後に、false を返す一文を
するだけで、上の問題が解決できました。

$("#yy").keydown(function(e){
  if(e.keyCode=='13'){
    var year = $("#yy").val();
    dispData(year);  // データ表示
    return false;    // Submitを無効に
  }
});

Google Map に Bootstrap を適用する

見映えの問題で、標記のことについて実施しているところですが
問題が発生しました。
例えば

<html lang="ja">
<head>
<meta charset="UTF-8">
<title>GoogleMap Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- GoogleMaps API -->
<script src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
  #map_canvas { height: 100% }
</style>
<script>
$(function(){
  var latlng = new google.maps.LatLng(35.66, 139.69);
  var options = {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map($('#map_canvas').get(0), options);
});
</script>
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div id="map_canvas"></div>
    </div>
  </div>
</body>
</html>

は、正しくMapが表示されます。
このソースの先頭に

<!DOCTYPE html>

を追加すると、途端に表示されなくなります。
色々調べて行くと、原因は行の高さにあるらしい。

<style>
  #map_canvas { height: 500px }
</style>

のように、明示的に高さを指定すると確かに表示されるようになります。
でも、これじゃBootstrapを使用する意味がないではないか!
と言うことで、再び「%」に戻すため「height %」でググり、cssの勉強し直し。
“height 100%” が有効になるためには、親要素全てが “height 100%” で
なけれならないとのこと。されば、

<style>
  html,body,body > div,body > div > div { height: 100%; }
  #map_canvas { height: 100%;}
</style>

としたところ、見事表示されました。
先ずは、目出度し目出度しと言いたいところだが
Bootstrapを使用すると、どうしてもコンテナの階層が深くなるので
これを適用するのが良いのか悪いのか?
悩ましい問題ではあります。

なお、指定をもっと簡単にしようと

<style>
  html,body,body div { height: 100%; }
  #map_canvas { height: 100%;}
</style>

等とすると、map_canvas 内に設定された要素(Google Map)にまで
影響が出るので、丁寧に map_canvas の親要素のみを指定する必要
があります。

オブジェクトの中身を簡単に確認する

他の方からの貴重な情報です。
(1) FireFox の場合

var person = {Name:"John", 
    Hobby:[{Hobby1:"Tennis"},{Hobby2:"Golf"}]};
console.log(person);

/* 結果
Object { Name: "John", Hobby: Array[2] }
*/

Array[2]の部分も表示するには、以下のようにします。

var person = {Name:"John", 
    Hobby:[{Hobby1:"Tennis"},{Hobby2:"Golf"}]};
console.log(person.toSource());

/* 結果
({Name:"John", Hobby:[{Hobby1:"Tennis"}, {Hobby2:"Golf"}]})
*/

なお、Chromeでは toSource() がないので、以下のようにするそうです。

var person = {Name:"John", 
    Hobby:[{Hobby1:"Tennis"},{Hobby2:"Golf"}]};
console.log(JSON.stringify(person));

以上です。

GoogleMapとjQuery

これから長い呟きを開始します。
独り言かも・・・

随分以前から、GoogleMap API と共にjQueryが
使えないかと悩んだり、調べまくったりしてきた
のですが、今日、その答えが出ました。

問題点を整理すると、地図を表示する場合

var myOptions = {
  zoom: myzoom,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP    //デフォルトの道路地図を表示
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

とすると、latlngで指定した地点を中心とした地図が表示されます。

jQueryを知っている(多少齧った)人間には

document.getElementById("map_canvas")

の部分が気に入らず、

$("#map_canvas")

と書きたいのです。
でも、そう書くと地図が表示されないのです。

その理由が、今日判明した次第です。
結論を先に言うと

$("#map_canvas").get(0)

と書くことで、地図は表示されるようになります。

なぜ?
id属性はユニークでなけれならないので、getElementById は単一の要素に
マッチします。jQueryの$(“#map_canvas”)も当然単一の要素にしかマッチ
しませんが、結果が配列で返されるので、get(0) によりその先頭要素のみを
返すようにする必要があるのです。

ここさえ押さえれば、GoogleMapにjQueryを大手を振って使用できます!

以後は、余談です。
本件について、いろいろ調べていると、jQueryを指定するのに

</script>
  google.load("jquery", "1.3.2");
</script>

のように、jsapi を使用してjQueryをロードしているケースが、複数のサイトで
見受けられました。
このロード方法には、特段何の意味もなく、一般的な方法で

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

と、書くことと同じです。
もしろ、google.load でロードできるのは jQuery-1.7 までで、それ以降のバージョンはロードできませんので、このメソッドは使わない方が無難です。

最後に、簡単な使用例を以下に示しますので参考にしてください。

<html>
<head>
<title>Enjoy with Google Map</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<!--<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("jquery", 1.7);
</script>-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;region=JP"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#abtn").click(function() {
    if (marker != null) {
      marker.setVisible(false);
      delete marker;
    }
    codeAddress($("#aname").val());
  });

  var codeAddress = function(areaname) {
    if (geocoder) {
      geocoder.geocode({'address': areaname}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
          });
        } else {
          alert("Geocode was not successfull for the following reason: " + status);
        }
      });
     }
  }

  var myOptions = {
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  var marker = null;
  var geocoder = new google.maps.Geocoder();
  // get(0)に注目:マッチした要素の配列から、その先頭要素を返します。
  var map = new google.maps.Map($("#map_canvas").get(0), myOptions);
  codeAddress("甲府");
});
</script>
</head>
<body>

<h1>Google Map</h1>


<div id="map_canvas" style="width:480px; height:400px;"></div>



  <input type="text" id="aname" value="" />
  <input type="button" id="abtn" value="ポイント表示" />


</body>
</html>

Bluegriffon1.8の xml parsing error

以前、ちょっと使ったことのある Bluegriffon を再度インストールした。
versionは1.8。
しかし、起動しようとするも、次のエラーで立ち上がらない。

XML Parsing Error: undefined entity
Location: chrome://bluegriffon/content/xul/bluegriffon.xul
Line Number 146, Column 4:
   <key id="key_BGdelete" key="&deleteCmd.key;" modifiers="accel" command="cmd_BGdelete"/> 
   ---^

雲をつかむようなエラーメッセージ。
何が気に入らないのか全く分からない。
インターネット上を探してみても、なかなか有効そうな解決手段が見つからない。
その中で、一番可能性がある解決手段は再インストール!
(1) コントールパネルからBluegriffonをアンインストール
(2) C:\Users\username\AppData\Local\Disruptive Innovations SARL ディレクトリを削除
(3) C:\Users\username\AppData\Roaming\Disruptive Innovations SARL ディレクトリを削除
として、Bluegriffonを再インストール。

幸いにも、これで、無事起動するようになりました

私の場合は、古いものが(2)と(3)に残っていたのが原因だったようです。

初めてインストールした方に、同様なエラーが発生する場合は
user名に日本語を使用している
ことが原因との指摘があります。
英字のユーザを登録すれば対策は可能ですが、そこまでしたくない方は、Bluegriffonの対策待ちしかありません。

PowerPoint2010へのスライド番号の設定

PowerPointで作成した資料に、ページ番号を振ろうとしたら、勝手に意図しない場所に

番号が振られてしまう。ExcelやWordのようには行かないようだ。

ということで、好きな場所にページ(スライド)番号の振り方を纏めてみた。


ScreenClip1. 表示タブを選択し
2.スライドマスターを選択する


ScreenClip [1]

3.先頭のスライドマスターを選択し
4.挿入タブに切り換える


ScreenClip [3]
5.横書きテキストボックスを選択し
6.ページ表示領域を設定する


ScreenClip [4]
7.挿入タブを再度選択し
8.カーソルがページ表示領域にあることを確認後、スライド番号を選択する
9.<#>が表示されるので、「-<#>-」等好みに応じ変更する


ScreenClip [5]
10.スライドマスタータブに切り換え
11.「マスター表示を閉じる」ボタンをクリックする

この場合、ページは先頭を除く2頁目からの連番になる。
先頭のページにもページを振る場合は、上の操作を2番目の
スライドマスターにも設定する必要がある。

Outlook2010の不具合

12月9日から、outlook2010の動きが変になっていた。
例えば、Outlookを起動後に設定していた内容が保存されず
(1) 常に全画面で表示される(通常は、画面の1/3位のサイズに設定している)。
(2) メール一覧の下部に設定してある閲覧ウィンドウが未設定になっている。
(3) Outlookを終了時、削除フォルダをクリアする設定とのが「クリアしない」に戻る。
等の現象が起きていた。
12月9日に行った windows update に原因があることは明白なので、次の update を
期待していたのだが、12月18、19日両日の update でも現象の改善は見られなかった。
またダメかと、Outlookを終ろうとしたときに、タイトルバーが
「Microsoft Outlook(セーフモード)」
になっていることには気付いた。
「セーフモード」が何者かは知る由もないが、察するに、機能の一部を制限して
動いているということなのだろう。それ故、様々な設定を Outlook に指定しても無視
され、再起動時には、初期状態に戻されることは理解できる。

その対策を「outlook2010 セーフモード」でググると、影響をまともに食らった人が
多いらしく、簡単に対策が見つかりました。
更新プログラムの中の「KB3114409」のアンインストール
が、その対策です。

更新プログラムのアンインストール方法は以下を参照願いたい。
https://121ware.com/qasearch/1007/app/servlet/relatedqa?QID=011024

シンボリックリンクの作成と削除

(1)F ドライブのファイル web に対し、C:\xampp\htdocs にシンボリックリンク weblink を作成する場合

cd c:\xampp\htdocs
mklink /D f:web weblink

(2)上記シンボリックリンクを削除する場合

cd c:\xampp\htdocs
rmkdir weblink

要するに、ディレクトリを消せばリンクも切れると言うことのようです。