このブログを検索

大文字小文字を区別する 正規表現

Atelierで“秀丸”が含まれるブログ記事

2016年7月18日

隠居のパソコン備忘録:Windows10 を使う:新しいブラウザ Microsft Edge で Google IME ユーザ辞書を使う

6月になって、しばらく無視していた Windows10 へのアップグレードへの誘いで、無料アップグレードは7月一杯で打ち切ると言ってきた。パソコンのOSは、Windows にしているから、いずれアップグレードはしなければと思っていたので、暇を見てアップグレードを実行した。なにやかやと支障は出るだろうと覚悟はしていたが、今回はいつものアップグレード(例えば、XP から 7 に)に比べて、何事も無くすんなりと終わった。
 Windows10 には、Windows7 にはない(ちなみに私は、Windows8 は経験していない)機能が多くあるが、Windows7 でしていたことは、少々手順は異なるもののできるようだった。
 例えば、見失ったファイルの検索は、Win7 では、スタートメニューの下に表示される検索ボックスにファイル名(フォルダー名)の一部を入れて探していたが、Win10 では検索ボックスはパソコン画面下にツールバーに表示され、検索対象も Web も含まれる広範囲になっている。自分のPC内を検索するには、エクスプローラを開いて、目指す場所(例えば PC ドライブ ) を選択して、画面右上部に表示される検索枠にファイル名(フォルダー名)の一部を入力しすると検索を始めてくれる。実は、Win10にアップグレード時に見失ったフォルダーはこのようにして発見した。(実は、Win7 でも同様の方法で検索できることを今になって知ったのだが。)
詳細な方法については、「Windows 10で、フォルダー内のファイルを検索する方法について教えてください。」を参照。

 Win10 になって最も大きな変化は、インターネットのブラウザが、従来の Internet Explorer に変わる Microsoft Edge が出現したことである。もちろん、InternetExplorer(11) も動くのであるが、どうやら Microsoft は Edge に移行していこうとしているようだ。
  早速、Microsoft Edge でネットサーフィンを始めた。操作方法は、Google Chrome とほぼ同じである。新しいタグページを開くと、Chrome と同じように画面中央に検索ボックスが表示される。検索エンジンは、マイクロソフトのBingということである。(新しいタブページでの検索エンジンを Google に変更することを試みたが、現在のところ上手くいっていない。)
 ネットサーチするときには、この検索ボックスに検索ワードを入力して目標とするページを探すのであるが、 MS Edge では Google IME による日本語入力ができない。
 Movable Type でのブログ記事作成は、ブラウザ Chrome で行う。 Chrome の作成画面の方が、Internet Explorer より何かと便利がいいからだ。それに、メールは専ら Gmail をつかっている。その結果として、Google IME のユーザー辞書にかなりの単語登録がされている。例えば、"さんくす"と入力し変換すると"ありがとうございます。"と表示される。また、ブログ作成では、しばしば HTML コードを入力するが、あまり使わないコード、例えば、フォントを青色にするときに使うコード "<font color="#0000ff">" は、"あお"と入力して変換すれば出てくるようにしておけば、6桁の番号を覚えていなくてもいい。だが、Microsoft Edge ではこの辞書が使えない。
 Google IME には、MS IME のユーザ辞書をインポートする機能はあるのだが、その逆はない。それで、ネットで方法を探ってみると次の方法で、できることが分かったので備忘録として記録しておきたい。

Google IME ユーザ辞書をMS IME にインポートする方法

  1. Google日本語入力の辞書をエクスポートする
    • Google Chrome を開き、使用辞書をGoogle IME にすると下のように画面下段ツールバー右に、Google IME のアイコンと文字種(ここでは"あ")が表示される。

      IME-01.JPG

    • この文字種"あ"(小文字の場合は"A")を右クリックして出るセレクトボックスから「辞書ツール」を選択すると出る画面で、上の「管理」タブをクリックすると、下のような画面になる。

      IME-02.JPG

    • このセレクトボックスから、ユーザ辞書1を選んで「選択した辞書をエクスポート」をクリックすると名前をつけて保存することを要求してくるので、デスクトップにでも、"Google-IME" とでも名前をつけて保存する。

  2. 辞書の文字コードを変更する
        
    • Google-IMEの辞書コードは、UTF-8 なので、MS IME の辞書コードである ANSI に変換する必要がある。この変換方法は、このエントリーを書くにあたって参考にさせてもらったTanweb.net というサイトの「Google日本語入力の辞書をMicrosoft IMEへ引き継ぐ方法」では、辞書保存の画面下部には、文字コードを示すボックスがあるが、私の環境では表示されない。表示する何か方法があるのかもしれないが、見つけられなかった。
       それで、愛用しているテキストエディターの「秀丸」で、UTF-8 を Shift-JIS に変換した。Microsoft の ANSI というコードは、Shift-JIS をベースにMicrsoft 独自の加工をしている。
    • Shift-JIS に変換したファイルは、同じくデスクトップに保存する。

  3. Microsoft IME ユーザー辞書へインポートする
    • 今度は、MS Edge を開いて、日本語入力を Microsft IME にすると下のように画面下段ツールバー右に、Microsoft IME のアイコンと文字種(ここでは"あ")が表示される。

      IME-03.JPG

    • この文字種"あ"(小文字の場合は"A")を右クリックして出るセレクトボックスから「ユーザ辞書ツール」を選択すると出る画面で、上の「ツール」タブをクリックすると、下のような画面になる。

      IME-04.JPG

    • ここで、「テキストファイルからの登録」をクリックし、さきほどコード変換したテキストファイルを読み込むとユーザ辞書に Google IME の辞書が読み込まれている。


このように、Microsft IME と Google IME に同じユーザ辞書を登録しておけば、ブラウザが Google Chrome でも、Microsft Edge でも同じユーザ辞書を使うことができる。 ただし、MicrosoftEdge では、Google IME 日本語入力はできない。 

2014年11月 3日

隠居のスマホ備忘録:山旅ロガーを使う。(2)測定結果を Google Map に表示する


 前回、スマホのアプリ山旅ロガーを使う方法について記録した。
 このトラッキング測定結果は、GPX というファイルとKML という形式のファイルでPC に送信することができる。GPX ファイルについては、ネットにあまり自分がやりたいことにぴったり来る情報がない。KMLファイルは、XML ファイルの一種のようなので、多少馴染みがあるので、こちらでトライしてみることにした。
 PC への送信方法は、メールにファイルを添付する方法と Bluetooh で送信する方法がある。PC の近くでの作業では、どちらをとっても大差はない。

測定結果をPCに送信する
測定結果ファイルの機能ボタンをタップすると 左の画面で「共有・出力」ボタンをタップすると;クリックすると大きな写真になります。 ファイル送信方法の選択画面;クリックすると大きな写真になります。"
測定結果一覧で該当ファイルの機能ボタンをタップすると、上のような画面になる。 左の画面で「共有・出力」ボタンをタップすると右の画面になる。 上の画面で Gmail または Bluetooth を選択して、指示に従いPC に送信する。


上の真ん中のスクリーンショットにあるように、KMLファイルを出力するときには、3つの形式から選択できる。
  • ①トラッキングしたルート(ライン)のみを表示する。
  • ② ①に時刻をつける
  • ③ 測定地点にマーカーを立て、時刻と text を表示する

 このような KMLファイルをPC に取り込んで、Google Maps API 表示するサンプルを見つけた。
 このサンプルコードを参考に、自宅から栂・美木多駅までの測定結果の ② の形式KMLファイルを取り込んだHTMLページを作成すると次のように表示された。


 上の地図は、Google Map の機能を持っているので、ストリートビューが見られるなど、駅から自宅までの道案内に有用かもしれない。

 同じトラッキングデータを上の ③ の形式で取り込んで、上のサンプルコードの kml アドレスを変更して Google Map に表示してみると、測定地点のマーカが連なって表示される。
 この時のKMLファイルの中身を覗く方法がわからなかったが、KMLがXMLファイルの一種であることにヒントを得て、XML notepadで開いてみると、これで編集できることが分かった。(もちろん、秀丸のようなテキスト・エディタでもできる)
 だが、固有のタグについては、かなりの学習が必要なようだ。とりあえず、分かりそうなタグに見当をつけて、試行錯誤を繰り返して見た。

 そのようにして作ってみた地図を下に表示する。


  この地図では、もともと38個あったマーカーを間引きして9個にし、
  • 地点1を"自宅"の文字に置き換え、
  • 駅への通り道にある風邪を引いた時などにお世話になる清水内科近く(15の地点)にはGoogle サーチの結果リンクを、
  • 24の地点(池のそば)のマーカ(24の地点)には、その地点で撮った水鳥の写真を表示するリンクを、
  • 終点の栂・美木多駅には、泉北高速鉄道のサイトで表示される栂・美木多駅ページヘのリンク
を挿入してみた。
  写真表示には、撮った写真をかっこ良く表示させる、Google Maps API を使って地図を作成する時に使っている、lightbox のコードを追加してみると上手く動いてくれた。

 上の地図のためのコードは、以下である。

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:v=\"urn:schemas-microsoft-com:vml\">
<head> 
<meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no\" />

<!-- jQuery lightbox2.51 -->
<script type=\"text/javascript\" src=\"http://n-shuhei.net/atelier/Jquery2.51/js/jquery-1.7.2.min.js\"></script>
<script type=\"text/javascript\" src=\"http://n-shuhei.net/atelier/Jquery2.51/js/lightbox.js\"></script>
<link rel=\"stylesheet\" type=\"text/css\" href=\"http://n-shuhei.net/atelier/Jquery2.51/css/lightbox.css\" media=\"screen\" />

<script type=\"text/javascript\" src=\"http://maps.googleapis.com/maps/api/js?sensor=false&hl=ja\"></script>
<script type=\"text/javascript\">
  function initialize() {
    var initPos = new google.maps.LatLng(34.490435, 135.482852);
    var myOptions = {
      noClear : true,
      center : initPos,
      zoom : 15,
      mapTypeId : google.maps.MapTypeId.ROADMAP
    };
    var map_canvas = new google.maps.Map(document.getElementById(\"map_canvas\"), myOptions);
    
    var kmlUrl = \"http://n-shuhei.net/atelier/maps/KML-test/141025P.kml\";
    var kmlLayer = new google.maps.KmlLayer(kmlUrl);
    kmlLayer.setMap(map_canvas);
  }

</script>
  </head>

<body onload=\"initialize()\">
  <div id=\"map_canvas\" style=\"width:100%; height:500px\"></div>
</body>
</html>


 ここで、指定しているKMLファイルは、テキストコードは以下である。実際の編集は、XML notepad で作業している。


<?xml version=\"1.0\" encoding=\"utf-8\"?>
<kml xmlns=\"http://www.opengis.net/kml/2.2\">
  <Document>
    <name><![CDATA[2014-10-25 09:15:02]]></name>
    <description><![CDATA[自宅ー駅:2014-10-25 09:15~2014-10-25 09:33]]></description>
    <Placemark>
      <name>自宅</name>
      <description>2014-10-25 09:15:02:</description>
      <TimeStamp>
        <when>2014-10-25T00:15:02.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48277,34.490517,30</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>5</name>
      <description>2014-10-25 09:16:44</description>
      <TimeStamp>
        <when>2014-10-25T00:16:44.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48332,34.49017,37</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>10</name>
      <description>2014-10-25 09:18:55</description>
      <TimeStamp>
        <when>2014-10-25T00:18:55.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48485,34.489635,33</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>15</name>
      <description><![CDATA[<a href=\"https://plus.google.com/104149416183172006475/about?gl=jp&hl=ja\">清水内科</a>]]></description>
      <TimeStamp>
        <when>2014-10-25T00:21:05.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48608,34.488583,45</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>20</name>
      <description>2014-10-25 09:23:15</description>
      <TimeStamp>
        <when>2014-10-25T00:23:15.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48712,34.487377,48</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>24</name>
      <description><![CDATA[<a href=\"http://n-shuhei.net/atelier/photo_birds/DSC04864.JPG\" title=\"\" rel=\"lightbox[]\">マガモ交雑種</a>]]></description>
      <TimeStamp>
        <when>2014-10-25T00:25:00.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48792,34.486824,46</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>29</name>
      <description>2014-10-25 09:27:12</description>
      <TimeStamp>
        <when>2014-10-25T00:27:12.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48877,34.48632,54</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>35</name>
      <description>2014-10-25 09:30:48</description>
      <TimeStamp>
        <when>2014-10-25T00:30:48.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.49054,34.485283,53</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>38</name>
      <description><![CDATA[<a href=\"http://www.semboku.jp/station/toga_mikita/outline/\">栂・美木多駅</a>]]></description>
      <TimeStamp>
        <when>2014-10-25T00:33:30.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48999,34.484875,61</coordinates>
      </Point>
    </Placemark>
  </Document>
</kml>


 もう少し高度な加工ができそうであるが、一段の学習が必要のようだ。痴呆予防には役立つかもしれないので、もうちょっと遊んでみたいと思っている。

2013年10月20日

隠居のパソコン備忘録: フォルダー内のMP3ファイル一覧をコピーしてテキストにする方法


 PCにライブラリとして収納しているMP3ファイルから、車で聞くためなどに音楽CDを作成することは結構多い。(最近の車には、車のオーディオHDDにmp3ファイルを保存できるようであるが)
このようなときには、インクジェット対応の白色CDに、音楽CDを作成し、CDにラベル印刷をしたり、CDケースにCDの内容を印刷したラベルを挿入したい。そのようなときに、例えば次のようなことができれば簡便である。

フォルダー内のファイル一覧
List-02.JPG

⇓⇓⇓⇓
上の情報を下のような表にしたい。(表-1)

List-01.JPG


このようなとき、プリンターメーカーのソフトで上のファイル一覧を見ながら20曲以上の曲名を1つずつ入力するのは、めんどくさい作業である。パソコンには対象とするファイルに、曲名が表示されているのに、これをCopy&Pasteする手立てがない。
 ファイル名だけでもコピーできれば、CDに直接、曲名をプリントする時にも随分楽である。

 それで、何か手立てはないのかとググってみると、Yahoo!知恵袋に次のような方法が紹介されていた。
  1. テキストエディター ( メモ帳等 ) を開く
  2. dir /b > List.TXT の1行を記述
  3. 名前をつけて保存で、一覧を作りたいフォルダーへ、X.BAT のファイル名で保存
  4. X.BAT をダブルクリック


これを応用して、上で例として表示した K: ドライブにある WriteCD フォルダーにある mp3 ファイルの一覧をコピーしてみた。
  1. テキストエディター ( 私の場合「秀丸」 ) を開く
  2. 「秀丸」の一行目に、dir /b > List.TXT と入力する
  3. 秀丸の「ファイル」⇒「名前をつけて保存」で、WriteCD フォルダーへ album.BAT のファイル名で保存する。
  4. エクスプローラでK: ドライブにあるフォルダー WriteCD を開くとalbum.BATというファイルがあるので、これををダブルクリックする。

 すると、次のようにファイル名一覧をテキストにすることができるので、CD に曲名を直接プリントするときの文字入力は随分楽となった。

ファイル名一覧のテキスト「秀丸」
List-03.JPG


 ただ、上の方法では、フォルダー内のファイル名一覧だけしかテキスト化できない。ファイル名だけではなく、ファイルの属性(この例でいえば、Artists、Album や長さなど)もテキスト化できなければ、表-1のような表にするにはめんどくさい入力作業が必要である。
 それでもっと簡便内方法はないのかと、いろいろと探っているうちに、MP3などの音楽ファイルを含むフォルダーに特化しているが、Windows7 用に最近導入したMP3 ファイルのタグ編集ソフトの Mp3tag が、そのような機能を持っていることを見つけた。

 このMp3tag は様々な機能をもっているが、テキスト化したいフォルダーを【ファイル】⇒【ディレクトリ追加】で、選択(例の場合:k:WriteCD)すると、下のような表示になる。(属性として表示する項目は選択できる)

Mp3tag の画面
クリックすると大きくなります。


 このとき、【ファイル】⇒【出力】で出てくるセレクトボックスから、csv を選択するとExcel 用のcsvテキストファイルとなり、デフォールトでは、MP3ファイルがあったフォルダー(例の場合:k:WriteCD)に保存される。Excel を立ち上げ、このcsvテキストファイルを読み込み、Excel 作業をすれば、表-1のような表を作成することができる。
 ただし、曲の長さは、例えば 219 のように トータル秒数表示となっており、次のような関数【 =TEXT(D2/86400,"m:ss") 】(D2は計算対象のセル)で、3:39に表示を変える必要がある。まあこれも Excel 操作の一つではあるが。
 なお、この作業は、Google ドキュメントのスプレッドシートでも同様なのことができる。

 

2013年8月23日

隠居のMT備忘録: テーブル作成時に上部に発生する意図しないスペースを削除する(IEの場合)


 2,012年3月に、【隠居のMT 備忘録:IE で表示した時に出現する意図しないスペースを削除する】で記録した同じ現象が、【24節気・七十二候】の Web page を作成していて発生した。
 この現象は、【隠居のMT 備忘録:テーブル(表)の形式を工夫してみる】で落着したと思っていたのだが、どうも間違っていたことが分かったので、改めて備忘録として記録しておきたと思う。

 起こった現象は、次のようなものである。
space-2_edited-1.jpg

 ネットで再度サーチしてみると、HTMLで table 記述するときに、Internet Explorerでは全角スペースが、<table>~</table> の表記のうち、</tr> や </td> の後ろに挿入されていると、これを認識してはじき出され、table 上部に表現されるためらしい。
 それで、現象を引き起こしたコードを、エディタの「秀丸」で、全角スペースの検索をしてみると、下のように、黄色く表示された。これは、コードを見やすくするために形を整えたときに、挿入したものだった。
space-1.JPG

 この黄色の部分すなわち全角スペースを削除すると、下のようにテーブル上部の余分なスペースはなくなった。ブラウザによって見え方が異なるのは困ったものだ。ページ作成のプロの人達は、いろいろと苦労をされているようだが。
space-3.JPG


2013年3月28日

隠居のドライブ:南紀の私的観光地図とその作成方法。


 南紀をドライブしたときの訪問地点を地図にプロットしてみた。地図作成に使ったのは、【隠居のパソコン備忘録: Google Maps API JS V3 で、番号付きマーカーを表示する】で記録した方法である。この地図は、右メニューの観光地図一覧に【初春の南紀私的観光地図】として追加した。



 この地図を作るためには、Google Map を表示するための HTML ファイルと、このページに呼び込んでくる XML ファイルを記述する必要がある。いずれも、宍道湖周辺を旅行した時の地図を作ったファイルをコピーして作成した。
 html ファイルはテキスト編集ソフト【秀丸】で、xml ファイルは Microsoft が提供する【XML Notepad】で修正をした。XML ファイルは、秀丸でも編集できるが、このXML Notepad は、XMLファイル編集に特化しており、文法の間違いも指摘してくれるので助かる。

 html ファイルで修正・追加する箇所は次の青字部分である。

90行目あたり、
     case "num05": num = "05";
                break;
     case "num06": num = "06";
                break;
--------------------------------------------------------------------------
に、次を追加する。番号マークは、7番目まで設定したので。
    case "num07": num = "07";
                break;  

103行目あたり
    gicons["num05"] = getMarkerImage(category2num("num05"));
      gicons["num06"] = getMarkerImage(category2num("num06"));
-----------------------------------------------------------------------------------
 に、次を追加する。
      gicons["num07"] = getMarkerImage(category2num("num06"));

184行目あたり、
zoom: 10,
      center: new google.maps.LatLng(35.430603,133.012136),   //松江
      zoom: 10,
--------------------------------------------------------------------------------------------------
を、次の地点の経度・緯度に変更する。もう少し、拡大したい場合は、zoom を11と大きくする。

   center: new google.maps.LatLng(33.676354,135.677032),   //熊野古道中辺路道の駅
   zoom: 10,     

193行目あたりの 読み込む xml ファイルを新しい xml ファイルに変更する。
      downloadUrl("http://n-shuhei.net/atelier/maps/V3_sinnjiko_num.xml", function(doc) {
----------------------------------------------------------------------------------------------------------------
      downloadUrl("http://n-shuhei.net/atelier/maps/V3_kisyuu_num.xml", function(doc) {  

221行目あたり、
<tr><td align="center"style="width:1000px; background-color: #ffffe0;" ><br /><h2>晩秋の宍道湖私的観光地図</h2></td></tr>
--------------------------------------------------------------------------------------------------------------
地図のタイトルおよび大きさを指定する。地図の幅を指定する箇所はもう一箇所ある。
<tr><td align="center"style="width:700px; background-color: #ffffe0;" ><h2>初春の南紀州観光地図</h2></td></tr>      
<tr><td><div id="map" style="width: 700px; height: 500px"></div></td></tr><tr>


読み込む XML ファイルは、XML Notepad を使って、宍道湖の地図を作った時のファイルをもとに、番号マークをプロットする地点の経度・緯度とプロット地点の名前や紹介する写真リンク先を 入力すればよい。リンク先のURL などは、ブログのソースを使えば簡単である。参考までに、作成した XMLファイルは次のようなものである。


<?xml version="1.0" encoding="utf-8"?>
<markers>
 <marker name="1:志原海岸" address="<a href="http://n-shuhei.net/atelier/photo_drive/130321_024.jpg" title="志原海岸" rel="lightbox[nanki]">志原海岸</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_003.jpg" title="ハマダイコン:志原海岸" rel="lightbox[nanki]">ハマダイコン</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_004.jpg" title="イソヒヨドリ:志原海岸" rel="lightbox[nanki]">イソヒヨドリ</a>" lng="135.431213" lat="33.570291" category="num01"/>
 <marker name="2:串本海中公園" address="<a href="http://n-shuhei.net/atelier/photo_drive/130321_020.jpg" title="水中トンネル:海中公園" rel="lightbox[nanki]">水中トンネル</a>" lng="135.745783" lat="33.481639" category="num02"/>
 <marker name="3:串本ロイヤルホテル" address="<a href="http://n-shuhei.net/atelier/photo_drive/130321_023.jpg" title="露天風呂:串本ロイヤルホテル" rel="lightbox[nanki]">露天風呂:串本ロイヤルホテル</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_021.jpg" title="日の出:串本ロイヤルホテル" rel="lightbox[nanki]">日の出</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130322_028.jpg" title="小雨にけぶる橋杭岩:串本ロイヤルホテル" rel="lightbox[nanki]">小雨にけぶる橋杭岩</a>" lng="135.784836" lat="33.481281" category="num03"/>
 <marker name="4:潮岬" address="<a href="http://n-shuhei.net/atelier/photo_drive/130321_009.jpg" title="潮岬灯台" rel="lightbox[nanki]">潮岬灯台</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130322_027.jpg" title="潮岬から太平洋を望む" rel="lightbox[nanki]">潮岬から太平洋を望む</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_007.jpg" title="ジョウビタキ雌:潮岬" rel="lightbox[nanki]">ジョウビタキ雌</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_008.jpg" title="トビ:潮岬" rel="lightbox[nanki]">トビ</a>" lng="135.762500" lat="33.433055" category="num04"/>
 <marker name="5:樫野崎灯台" address="<a href="http://n-shuhei.net/atelier/photo_drive/130321_010.jpg" title="樫野崎灯台" rel="lightbox[nanki]">樫野崎灯台</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_025.jpg" title="樫野崎から潮岬の眺望" rel="lightbox[nanki]">樫野崎から潮岬の眺望</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_013.jpg" title="樫野崎から太平洋の眺望" rel="lightbox[nanki]">樫野崎から太平洋の眺望</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_012.jpg" title="内海側の定置網" rel="lightbox[nanki]">内海側の定置網</a>" lng="135.86259" lat="33.473263" category="num05"/>
 <marker name="6:那智の滝" address="<a href="http://n-shuhei.net/atelier/photo_drive/130321_018.jpg" title="那智の滝" rel="lightbox[nanki]">那智の滝</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_014.jpg" title="那智の滝への石段" rel="lightbox[nanki]">那智の滝への石段</a>" lng="135.887704" lat="33.675069" category="num06"/>
 <marker name="7:熊野那智大社" address="<a href="http://n-shuhei.net/atelier/photo_drive/130321_016.jpg" title="熊野那智大社" rel="lightbox[nanki]">熊野那智大社</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_015.jpg" title="イソヒヨドリ:熊野那智大社" rel="lightbox[nanki]">イソヒヨドリ</a>" lng="135.890236" lat="33.668533" category="num07"/>
 </markers>


なお、地図作成と直接関連していないが、Internet Explorer 9 では、ページを編集・更新して、サーバーにアップロードしてもも反映されないことが起こった。(Google Chrome ではすぐに反映される) IE8 のときと違って更新されるタイミングが異なるようだ。
 このようなときは、IE9 で ツール⇒インターネットオプション⇒全般タグ⇒閲覧の履歴の設定で、出てくるポップアップ画面で、インターネット一時ファイルの選択を【Web サイトを表示するたびに確認する】(default では 自動的に確認する となっている)を選択すれば治るようだ。

 

2012年9月 2日

隠居のパソコン備忘録: Google Maps API JS V3 で、カテゴリー別に色違いマーカーを表示する


 酷暑で屋外での活動は歳を考えて自粛していた。それで、自然とパソコンに向かう時間が多くなっていた。取り組んだのは、V3 にバージョンアップした Google Maps JS API で旅行地図などを作成するなどのいろいろなトライである。

 といっても、一から Google Maps JS API で希望する地図を作成する能力はないから、公開されている人様のコードをいじることが主体である。このようなときに、重宝させていただいているのは、Using the Google Maps API v3にあるサンプルである。
 Mike Williams' tutorial というサイトで V2 でサンプル表示されていた More advanced stuff - Part 25 Marker Categoriesを、V3 コードに置き換えた translated to v3というのが紹介されている。これを利用すれば、野鳥撮影地点を種別に表示するときなどに使えそうと思い自分のできる範囲でいじって見ることにした。

 このような作業をする時の手順は、だいたい次のようにしており、備忘録として記録しておきたい。
  1. サンプル画面のソース・コード(IE の場合、メニューバーの表示⇒ソース)を取得する。これを、テキスト編集ソフト(私の場合:秀丸)にコピペし、名前をつけて、適当なフォルダーに、html ファイルとして保存する。
  2. サンプルコードで使用されている Javascript ユティリティ ファイル(今回の例では、downloadxml.js ファイル)や使用するマーカイメージ・ファイル(今回のサンプルでは、marker_red.png のようなファイル)を用意し、ファイル転送ソフト(私の場合:FFFTP )でサーバー(私の場合:Xserver )上の適当なフォルダーにアップロードしておく。
  3. サンプル・コードで使用されている xml ファイル(普通はサンプル・コード内で相対パスで表示されている。これを絶対パスにして、ブラウザで表示させる)をC&P して、秀丸の新しいファイルとする。適当な名前(xmlファイルで)で保存する。これも、先ほどと同じサーバー上の同じフォルダーにアップロードしておく。
  4. 秀丸画面で、自分の環境に合うように、サンプルコードのそれらのファイルの path を書き換える。私の場合、ミスがないように、絶対パスで書くことにしている。
  5. 自分のサーバー環境に合わせたサンプル・コードをブラウザで表示してみる。これで、參照サンプルと同じように表示されたら、サンプルのコピーは成功である。
  6. このサンプルコードを少しづついじって、目的とする地図(今回、地元の公園・ホームセンター・大型電気店を種別( category )に表示することを目指した。)に近づけていく。先ず、地図の中心を地元にするために、地図の center 緯度・経度を置き換えた。
  7. と同時に、xml ファイルも、サンプルで使われているファイルを真似して、新たに日本語を含むファイルを作って(XML ファイルの編集は、XmlNotepad を使っている)サーバー上にアップロードした。(日本語のエンコードは、UTF-8 )
  8. その他、category の名前を変えたことに対応する修正などを加えて保存、サーバーにアップロードして、ブラウザで表示してみた。地図やチェックボックス、日本語のサイドバーは、期待通り表示されたが、肝心のマーカーが表示されない。元のサンプルコードと見比べながら、チェックしてみたが、原因が分からない。
    JavaScriptや HTML のコードは、カンマ一つ抜けても動かないことがあるので、再度やり直すなど作業を続けて見たが、うまくいかない。
  9. 3日間ほど悩んで、諦めかけていたが、原因はどうやら XML ファイルにあるらしいと思われたので、再度フィルを眺めていると、ing(longitude:経度) と lat(latitude:緯度)の数字が入れ替わっていることに気がついた。今まで、このような XML ファイルは lat ⇒ lng という順序で記入していたのに、今回使ったサンプル XML ファイルは順序が逆になっていたのだ。サンプル XML ファイルの経度・緯度が海外の地点を示していたので、気づくのが遅れたらしい。
     数字を入れ替えてみると期待通りに表示されるようになった。ミスというのは大体において、このようにうっかりミスが多いものだが、ついつい難しく考えてしまいがちだ。
  10. このサンプルコードを土台に、マーカーの吹きだし(infowindow) に画像やリンクURL を表示を試みたが、それらも OK のようである。
     なお、写真の表示が、画面の中心に表示され背景がフェードアウトする lightbox も使えるので、今後いろいろな応用ができるのではないかと考えている。


 作成例:泉北ニュータウンの公園・ホームセンター・大型電気店地図 サンプル・ページ

  

2012年3月 3日

隠居のMT 備忘録:IE で表示した時に出現する意図しないスペースを削除する


 MT の Web ページである〘探鳥日誌(current) 〙を Internet Explorer で表示した時に、下のスクリーンショットのように、意図しないスペース(30行くらいの空白)表示されるようになった。ブラウザーを Google chrome に替えて表示してみると、このような現象は起こらない。Internet Explorer だけである。他の Web ページと同じようなコーディングをしているのに、このページだけ、テキスト文の終わりからテーブルの間に、このような現象が起きる。他のページとの違いといえば、テーブルの行(Row )を頻繁に追加していることである。

IE_CCS_1m.jpg

 色々とサーチしてみたが、解決してくれそうな適切なページがヒットしない。どうやら、私のMT Web ページに起こっている特殊な現象らしい。
 仕方ないので、はじめから作り直すつもりで、【ウェブページの編集】画面で入力した内容すべてを、HTML editor(私は、秀丸を使っている)にコピーして、再度【新しいウェブページの作成】で、新しく貼り付けてみたが、結果は同じである。どうも、入力したコードが問題のようであるが、丹念にチェックしても原因は見つけられなかった。
 ところが、入力していたテーブル部分の記述のみを秀丸からコピーして、先ず新しいウェブページに貼り付けてみると、テーブルの上部に空白行が表示されるようなことはない。次に、テキスト部分をコピーして、先程貼り付けたテーブル部分の記述の上に挿入し全体を表示してみると、空白行がなくなった。なんだか、狐につままれるたような気分だが、無事まともな表示にすることができたので、ホッとしている。
 少なくとも、Internet Explorer, Mozilla Firefox, Google Chrome ぐらいは統一の標準にしてほしいものだ。ただ、一番使われている Internet Explorer が標準から外れている部分が多いというのは困りものである。

2012年2月15日

隠居のスマートフォン備忘録:(21)Xperia acro をスキャナーとして使い OCR する。


 前回のスマホ備忘録として、【Xperia acro をEvernote を利用するデジタル・メモ帳として使う】を記事にした。その後、Masajii さんから、B5ルーズリーフのメモが、きれいにスキャンされて、EVERNOTE や DROPBOX にもすぐ保存できる非常に便利な CamScanner というアプリを使っているとのことを教えてもらった。どのようなものか、試しにインストールしてみた。

 このアプリの本来の使い方と異なるかもしれないが、スマートフォンでスキャンして、OCR ソフトと組み合わせて使用したら、印刷物の記事がテキスト化できることが分かったので、備忘録として記録しておきたいと思う。

 従来、読んだ本や新聞の一部をブログに引用するときには、2000年8月に発売されたA4型スキャナー(EPSON GT-8700)を使って印刷物をスキャンし、OCR ソフト【読んで!!ココ】でテキスト化していた。これで十分役に立っているであるが、そのような作業をやるたびに大きなスキャナーをセットしなければならない。スマートフォンで、スキャンできるなら手軽でいい。週刊誌の記事のデジタル(テキスト)化を例に、その方法を書き留めておきたい。

  1. アンドロイド・マーケットから、無料の【CamScanner スキャンPDF作成】 をダウンロードしてインストールした。
  2. CamScanner を立ち上げて、右下メニューボタン⇒設定をする。私の場合、〘自動トリミング〙〘画像鮮明化モード〙〘水平撮影〙にチェックを入れた。
  3. 戻るボタンで、初期の画面に戻る。スキャンする週刊誌の記事をできるだけ平らにして広げる。カメラ・アイコンをタップして印刷物の上に持ってくると対象とする部分がぼんやりながら映るので、画面にスキャンする部分が入るように、できるだけ水平にカメラレンズを上下する。対象が取り込めそうであれば、風車のようなシャッターアイコンCamScanner_8.jpgをタップすればいい。うまく撮れなければ、【撮り直す】ボタンがある。OCR したい部分が写っているようであれば、【確認】ボタンをタップする。
  4. タップするとスクリーンショット1 のような画像処理画面がでるので、4隅の○印をドラッグして、OCR する部分に範囲を決めてトリミングして、右下の✔をタップする。横になっていても構わない。OCR ソフトで回転ができる。
  5. ✔をタップすると保存中と表示が出て、スクリーンショット2 のように新規ドキュメントとして保存される。ここで送信ボタンCamScanner_9.jpgをタップして、出てくる送信画面から【Evernote -ノートを作成する】をタップすると、PDF 文書として送信される。これでは、Evernote の画像を使って、OCR ソフトを使うことができない。(PDF形式のままでも、OCR ソフトで、テキスト化はできるようだ。PDF ・データをテキスト化する、あるいはWord 文章にする方法については、別のエントリーで記載してみたい。)
  6. 画像として、Evernote に送るには、新規ドキュメントをタップして、スクリーンショット3 のような画面にしてから、送信ボタンCamScanner_9.jpgをタップするとスクリーンショット4 の画面になるので、【Evernote -ノートを作成する】をタップする。
  7. タップするとスクリーンショット5 の画面が出てくるので、適切なタトルを入力して【完了】をタップすると Evernote に画像として送信される。
  8. PC本体で、Evernote に接続し同期すると、送信された先ほどの jpeg 画像が一つのノートとして確認できる。ノートを表示するとノートの内容が画像の場合、画像を右クリックするとスクリーンショット6 のように画像全体が反転する。右クリックするとでるポップアップ画面から、〘名前をつけて保存〙を選択し、適当なフォルダーにjpeg 画像として保存する。
  9. 【読んで!!ココ】(私の場合、AI ソフトがEPSON に買収される前のVersion 8、最近は Version 13 となっている。新しく買うと結構な値段がする)を立ち上げて、先ほどのjpeg 画像を開き90°回転して、領域を指定し認識を行うとスクリーンショット7 のように デジタル(テキスト)化される。ただし、週刊誌は紙質や印刷がよくないために、認識度は少し落ちるようだ。
  10. 私は、このデジタル・テキストを【読んで!!ココ】でクリップボードに保存し、スクリーンショット8 のように、テキストエディタの【秀丸】で文書化している。(もちろん、Word にも貼り付けることができる)以前にも持ち歩けるようなスキャナーがあったが、あまり使い物にならなかった。このスマホの CamScanner を使えば、色々な場面で使えそうだ。


 なお、スマホ備忘録の、【Xperia acro をEvernote を利用するデジタル・メモ帳として使う】の記事で、キングジムの SHOT NOTE 、コクヨの CamiApp を紹介したが、これらのアプリは、CamScanner を使えば完全に代替できると思われる。

スクリーンショット 1 スクリーンショット 2 スクリーンショット 3 スクリーンショット 4
画像処理画面;クリックすると大きな写真になります ドキュメント表示画面;クリックすると大きな写真になります トリミング後の画像表示画面;クリックすると大きな写真になります 送信先選択画面;クリックすると大きな写真になります
スクリーンショット 5 スクリーンショット 6 スクリーンショット 7 スクリーンショット 8
CamScanner_6.jpg Evernote(PC) のノート;クリックすると大きな写真になります 読んで!!ココ 画面;クリックすると大きな写真になります テキストエディタ画面;クリックすると大きな写真になります


   

2011年3月27日

隠居のMovableType:データベースをMySQL4 から MySQL5 へ 


 今までのブログ以外にサイトを開設する気になった。新しいサイトをつくるにあたっては、最新の MovableType5(MT5) を導入して見ようと考えた。MT5 では、ブログだけでなくウェブページも管理しやすくなっているらしい。早速、【基本からしっかりわかる Movable Type 5】という参考書を購入して、これに倣ってトライしてみることにした。

 新しいサイトのために、独自ドメインをレンタル・サーバー先の Xserver から取得した。サーバーは、今のところに余裕があるので、これを使うことにした。
 MT5 の導入については、また別のエントリーで記録することにして、今回は MT5 で使用する推奨データベース MySQL5 を設定したときに気をつけねばならない事項を備忘録として記録することにした。
 Xserver では、ドメインが異なっても、同一アカウントではデータベース MySQL のバージョンは複数では運用できないようだ。同じサーバーを使うのだから当然なのかもしれないが。
 知識のない人間がデータベースをいじるので、いささか勇気がいるが、Xserver には MySQL4 から MySQL5 への移行サービスがあるので、これを使って移行した。
 移行の結果、ブログのページを見ると、一見うまく移行しているように見えたが、次のページへリンクできなくなっていた。
  • ブログ内で作成した Webpage
  • ブログ編集画面が開かない
  • アクセス解析の Research Artisan Lite の表示(再設定を求められる)

 対処をネットでググってみると、MT4 のインストール以降いじったことのない mt-config.cgi というファイルにある DATABASE SETTINGS で指定しているデータベース MySql の項にある DBHost をXserver で移行したときに示されたホスト名(私の場合、localhost ⇒ mysql14.xsever.jp )に変更しなければならないことが分かった。
 FFFTP でホストにある mt-config.cgi ファイルを ローカルにダウンロードして、【秀丸】で該当箇所を修正して、再度ホストにアップロードした。すると、今までのブログ編集画面( http://xxxxxx/cgi/mt/mt.cgi )が開くようになった。ここで、ブログごとに再構築を行うと、Webpage へのリンクは復活した。
 また、再設定を求められる Research Artisan Lite は、【「public_html(ドキュメントルート)」ディレクトリの下の階層にある「setting」ディレクトリ】のアクセス権(パーミッション)を書き込み可能("777")に変更する必要があるが、再設定画面でホスト名を変更(他の項目は変更なし)すると、結果が表示されるようになった。
 DB を移行すると文字化けがよく起こるようであるが、文字コードを MT の基本である UTF8 に指定したためか、今のところ文字化けは起こっていない。
 今後も、いろいろと問題が起こるかもしれないが、それぞれで対処していくことになるだろう。これで、MT5 を設定する環境は整った。

   
基本からしっかりわかるMovable Type 5 (Web Designing BOOKS)
田口和裕
毎日コミュニケーションズ
売り上げランキング: 53216
 

2010年7月 4日

隠居のブログ:アクセスカウンターを変更

 MT でブログを始めた頃、レンタルサーバーは lolipop を使っていた。容量が足りなくなってきて、2008年5月、その当時安かったディスク容量 3GB で月額 1050円の Xserverに鞍替した。(現在は、40GB 月額¥1050)
 その当時から、アクセスカウンターは lolipop のサービスを使わせてもらっていた。Xserver に変更してからも、そのカウンターは機能していたのでそのままにしていたが、先日突如カウンターが表示されなくなった。サーバーの契約はとっくに終わっているのだから文句をいう筋合いではない。それで、アクセスカウンターを変えることにした。

 Xserver にもアクセスカウンターのサービスはあるが、単純に累計を表示するだけだし、自分でデザインなどを変更できないのであまり面白くない。
 ネットでググってみるとフリーのサービスがゴマンとある。その中から、私のサイトで運営している Studio YAMAKO, Masajii's Blogに使っている Kent webカウンターを設置してみることにした。この中にある累計と昨日・今日の訪問者を表示する daycounter をインストールすることにした。このカウンターは自由度は高いが、CGI プログラムなので少し敷居が高かった。歳をとってすぐに手順を忘れるので、備忘録として記録しておきたい。詳しくは上のページ(日計カウンタの設置方法)にあるが、私がインストールした手順は次のとおりである。
  1. daycount ver. 2.7(daycount.zip) をダウンロードして、LHUT32 を使って解凍した。
  2. 解凍すると、以下のファイルが展開されるので、daycount という新しいなフォルダーを作り、そこに格納した。
     daycount.cgi
     daycount.dat
     gifcat.pl
  3. 次に、2組の0~9までのカウンタ画像(GIFファイル)を用意しなければならない。私は、上のページで紹介されている海外サイトである【Digit Mania】からいただいた。Top ページの Places To Go の一番上にある Contents をクリックするといろいろな種類のGIFファイルが表示されている。私は、Arial Italic Small を選択し、クリックするとダウンロードのページが開くので、PKZiped をクリックして zip ファイルをダウンロードした。これを解凍すると下の図の左のようなファイル名となるので、これをdaycount の仕樣に合うように、右のようなファイル名に変更する必要がある。
    gousei.JPG
    ファイル名の変更には、Renamin.exe を使って一括変更したが、もちろん1ファイルずつ名前変更してもできる。
  4. 私の場合、同じ数字GIFファイルを累計カウントにも、今日・昨日のカウントにも使ったので、gif1, gif2 というフォルダーを daycount フォルダーの下に作り、ここに先程の名前変更後の数字GIFファイルをそれぞれ収めた。
  5. 次に、daycount.cgi をエディタ(私の場合、【秀丸】)で開いて、 総カウント数の桁数 を、前のカウンタ累計数は正確に記憶していないが、35万台になっていたように思うので、6桁に変更した。Perl のパスなど他の設定は、初期値のままにした。 総カウント用GIF画像のディレクトリへのパスなどは迷ったが、初期値のままでOK だった。
  6. 前のカウンタ累計数を引き継ぐために、正確ではないが、Xserver のカウンターで示していた 360625 から始めることにした。この設定は、daycount.dat ファイルを開くと、 15<>0<>0<>0<><> となっているので、15<>0<>0<>360625<><> とすればよい。
  7. このように設定した daycount ローカルフォルダを、FTP ソフト(私の場合、FFFTP )で、/public_html の下に、アップロードした。
    daycount フォルダーの置き場所を間違って気づくのにずいぶん時間がかかった。私の場合、同じドメインに3つのMT ブログを設置しているのだが、今回カウンターの設置はそのうちのひとつだったので、そのサイトのルートに置けばよいと早合点してしまっていた。
  8. アップロードして、各ファイルのパーミッション(FFFTP では属性)を、Xserver の場合、
     daycount.cgi 【705】
     daycount.dat 【606】
     gifcat.pl 【604】
    とした。
  9. ここまで設定すると、cgi が正常に動くかをチェックできる。ブラウザのURL欄に、http://..(略)../daycount.cgi?check というように check という引数を付けて daycount.cgi を起動してみて、正常に動けば次のような画面が表示される。
    cgi_check.JPG
  10. あとは、カウントしてもらうサイトのホームページに、元のコードを少しいじって、次のようなHTMLコード を貼りつけた。私のブログの場合(MT4 小粋空間のテンプレート使用)、テンプレートモジュールのサイドバーテンプレートに貼り付けている。
    <!-- Kent Counter -->
    <table>
    <tr><td>累計: </td><td><table border=1><tr>
          <td><img src="http://n-shuhei.net/daycount/daycount.cgi?gif"></td>
        </tr></table>
      </td></tr>
    </table>
    本日:<img src="http://n-shuhei.net/daycount/daycount.cgi?today">  昨日:<img src="http://n-shuhei.net/daycount/daycount.cgi?yes">
    


 この日計カウンタは、複数ページに設置することはできないので、Studio YAMAKO, Masajii's Blogとは、従来どおりの dream counter で続けたい。
 アクセス解析については、Reasearch Artisan Lite を導入している。この解析結果ログをうまく処理すれば、アクセスカウンターを表示できるはずであるが、これを実施するには相当な学習とそのための時間が必要である。古希が近づいた老人にはいささか辛い。