団塊世代の黄昏 – ページ 12 – 私が作成したものやブログのフロントページです。

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 の親要素のみを指定する必要
があります。

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のようには行かないようだ。

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

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

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

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

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

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

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

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

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

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

（１）コマンドプロンプトを管理者モードで立ち上げ、次のコマンドを実行する

# 管理者モードで実行する
cd c:\xampp\htdocs
mklink /D weblink f:web

# 管理者モードで実行する

cd c:\xampp\htdocs

mklink /D weblink f:web

（２）上記シンボリックリンクを削除する場合

cd c:\xampp\htdocs
rmdir weblink

1 2	cd c:\xampp\htdocs rmdir weblink

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

サムネイル画像の自動生成

イメージギャラリーを作成する際、画像ツールによりサムネイル画像を

事前に準備するのが面倒なので、オリジナルの画像から自動的に生成

する方法を考えてみた。

（１） PHP による画像サイズの変更

次の関数は、オリジナル画像を指定のサイズに変更するものです。


<?php
function thumbImg($in_image, $in_width, $in_height){
// 出力する画像サイズの指定
$width  = $in_width;
$height = $in_height;

// サイズを指定して、背景用画像を生成
$canvas = imagecreatetruecolor($width, $height);

// コピー元画像の指定
$targetImage = $in_image;

// ファイル名から、画像インスタンスを生成
$image = imagecreatefromjpeg($targetImage);
// コピー元画像のファイルサイズを取得
list($image_w, $image_h) = getimagesize($targetImage);

// 背景画像に、画像をコピーする
imagecopyresampled($canvas,  // 背景画像
$image,   // コピー元画像
0,        // 背景画像の x 座標
0,        // 背景画像の y 座標
0,        // コピー元の x 座標
0,        // コピー元の y 座標
$width,   // 背景画像の幅
$height,  // 背景画像の高さ
$image_w, // コピー元画像ファイルの幅
$image_h  // コピー元画像ファイルの高さ
);

ob_start();       // 出力のバッファリングを有効にする
imagejpeg($canvas, NULL, 100);  // jpeg 画像をブラウザあるいはファイルに出力する
// 出力用バッファの内容を取得し、base64 にエンコードする
$content = base64_encode(ob_get_contents());
ob_end_clean();   // 出力のバッファリングをオフにする
imagedestroy($canvas);
echo $content;        // エンコードデータを返す
}
?>

（２）HTML から関数呼び出し

<?php
// ディレクトリの位置確認
if ($handle = dir('./img')) {  <!-- 画像ファイルのディレクトリ指定 -->
while (false !== ($file = $handle->read())) { <!-- ディレクトリ内の全画像を処理する -->
  if (is_file('./img/' . $file)) {
?>
    <!-- base64に変換された画像をHTMLに直接貼り付ける -->
    <img class="img-responsive" src='data:image/jpeg;base64,<?php thumbImg("./img/$file",348,235); ?>'>
<?php
  }
}
//closedir($handle);
} else {
  echo("ディレクトリのオープンに失敗");
}
?>

wordpressの子テーマによるフォント変更

wordpress デフォルトのフォントスタイルを変更して使用していたのだが、

様々な更新が入っていたので、最新バージョンにアップデートしたところ

元の醜いフォントに逆戻りしてしまった。

wordpress 付属の無償テンプレート全てにも更新が入っていたので、

多分その所為で、以前の設定が消されてしまったのだろう。

再設定しようにも、前のやり方をメモっていなかったので、設定方法の検索

から再スタートすることに。

キーワード「子テーマ」を失念していたため中々意中の対策が検索できず

多くの時間を浪費してしまった。

と言うことで、今回はしっかりメモをしておこうと投稿している次第。

【手順】

（１）外観→テーマの編集

（２）テキスト編集画面に以下を入力

(先頭に10行程のコメントがあるが、削除せずその直下に以下を入力すること）

body{
  font-family: “メイリオ”, Meiryo, sans-serif;
}

sans-serif は不要かと思うが、メイリオを持っていない人のための保険です。

RからExcelシートを入力する

R から直接 Excel シートを入力できるというので
試してみました。
Ⅰ．xlsx パッケージ
（１）JDK のインストール
Apache POI を使用しているので JDK が必要とのこと（真偽不明）。
2015-9-2 現在の最新バージョン jdk-8u60-windows-x64.exe
をダウンロードしてインストール。
（２）xlsx のインストール
RStudio より、次のコマンドで xlsx をインストール

    install.packages("xlsx")

（３）読込みのテスト
適当な Excel シート（test.xlsx）を作成し、次のコマンドを
R コンソールに入力

    > library("xlsx")
    > data = read.xlsx("test.xlsx", 1, encoding="UTF-8")
    > data

read.xlsx の引数の内容は
① Excel の book（ファイル）名
② シート名
③ エンコーディング（大文字小文字を区別するので UTF-8 と大文字で）
以上で、読み込んだ Excel の内容が表示されるハズです。

Ⅱ．XLConnect パッケージ
（１）XLConnect のインストール

    install.packages("XLConnect")

（３）読込みのテスト
適当な Excel シート（test.xlsx）を作成し、次のコマンドを
R コンソールに入力

    > library("XLConnect")
    > data = readWorksheetFromFile("test.xlsx", 1)
    > data

2026年1月
日	月	火	水	木	金	土
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31