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 日本語入力はできない。 

2015年8月 8日

隠居のパソコン備忘録: 500 Internal Server Error の修復

ブログが突如開けなくなったと、当サイトの YAMAKO さんからメールが入った。あわてて自分のブログ(n-shuhei.net/atelier/)にアクセスすると、下のように同じ 500 error がでる。
 レンタル・サーバー先の Xserver のサポートの助けがあって、なんとか修復できたので、備忘録として記録しておきたい。

Error500-01.JPG

"Internal Server Error xserver" (xerver はサイトを置いているレンタル・サーバーである)で原因をネットで探ってみると、次のような回答があった。

Error500-02.JPG

新しいプラグインを設定するなど何も弄っていないので、原因は「CGIやPHPの同時接続数が多くなり、アカウント単位のリソース制限となっている」ぐらいしか考えられないが、急激にアクセスが増えたとは思われない。知識が少ない老人には解決できそうにない。思い余って、xserver のサポートに助けを求めた。

本件はお客様のサーバーアカウントにおきましてプログラム負荷が高まったため、一時的なリソース制限が行われその影響で500エラーが発生しているようです。

当サービスではPHPやCGIプログラムの実行、FTP接続、IMAP接続など全ての動作における合計に「同時稼動数」の上限を設けております。

「同時稼動数」が上限に達しますとPHPやCGIの実行で500エラーや503エラーが発生したり、IMAP接続に失敗するという状況が発生します。

そのような状況下で500エラーが発生している場合はサーバーパネル「ログファイル」にてエラーログを確認していただければリソース制限によるものかどうかをある程度確認することが可能です。

エラーログには以下のようなログが発生しますのでご参考にしていただければと存じます。
------------------------------------
Resource temporarily unavailable(PHP実行時)
suexec policy violation: see suexec log for more details(CGI実行時)
------------------------------------
Premature end of script headers
という旨のエラーメッセージが表示されている場合は、CGIの同時起動数が多くなり、 アカウント単位のリソース制限がかかっている可能性がございます。

(ご参考:突然、または断続的にCGIやPHPが500エラーで動作しない。)
http://www.xserver.ne.jp/faq_service_php.php#11

お客様の場合はCGIプログラムが、この「同時稼動数」を圧迫し、WEBサイト上のPHPなどの実行にも影響を及ぼしております。

大変お手数ですが、お客様が構築なされたプログラムについて構成の見直しを行っていただくことや、該当プログラムを一時削除いただく、またはパーミッション値を000等に変更し無効化することで症状が改善されるかなどお試しいただきましたら幸いです。

自分で分かる範囲で、指示された事項をいじってみたがうまくいかない。それで、"Xserver 500 error" で更にググってみると、次のようなページがヒットした。
http://net10man.com/archives/1836/
ここに書かれているPHP高速化設定(FastCGI化)を XserverPanel で実行してみると、ホームページへのアクセスは出来るようになった。が、MovableType の管理・編集画面でも同じような 500 Internal Server Error が出て、新たにブログを編集することができない。

再び、Xserver サポートに助けを求めた。次のような回答があり、今回の原因は悪質なクローラーが絨毯爆撃的に、robot でクロールしていたことが原因らしいと分かった。

サポートにて確認いたしましたところ、このたびのリソース制限の原因でございますが、お客様設置の【mt-search.cgi】というプログラムが多数稼動しサーバーアカウントにてご利用可能なリソースを大きく圧迫しておりました。

取り急ぎサポートにて該当プロセスを強制終了しましたので、再度状況をご確認くださいますようお願いいたします。

また、これまでと同様のホームページ運用を行っている場合、いずれ同様の500エラーが発生してしまいます。

・該当プログラムへのサーチエンジンロボット(クローラー)からの過剰なアクセスがある場合にはアクセスを拒否する
など、適切なご対応をいただきますようお願いいたします。

 ※mt-search.cgiはMovableTypeにて作成した記事の「全文検索」を行うためのプログラムかと存じます。こちらのプログラムへ集中アクセスが起きた場合、この度のようなリソース制限の原因となってしまいます。

悪質クローラーからのアクセスを拒否する方法について、xserver サポートに問い合わせて見ると、次のような回答があった。以下に記すように、ブログへのアクセス解析サービス Artisan lite を導入しているので、方法をよく考えて実施したいと思う。それにしても、たくさんのクローラー(検索エンジンBot)がネット上では動いているのだ。

検索エンジンBotのアクセス制限につきましては、サーバーパネル「アクセス拒否」設定等にて設定を行っていただければと存じます。
 ※アクセスログ等にて過剰なアクセスがないか等、ご確認ください。
なお、主要な検索エンジンのクローラーからのアクセスを拒否しても問題がないようでございましたら、[public_html]フォルダ直下の[.htaccess]に、下記の記述を追加していただくことで拒否が可能でございます。
########################################
Deny from env=blockbot

SetEnvIf User-Agent "Googlebot" blockbot
SetEnvIf User-Agent "Slurp" blockbot
SetEnvIf User-Agent "bingbot" blockbot
SetEnvIf User-Agent "Yeti" blockbot
SetEnvIf User-Agent "Baiduspider" blockbot
SetEnvIf User-Agent "DotBot" blockbot
SetEnvIf User-Agent "AhrefsBot" blockbot
SetEnvIf User-Agent "bingbot" blockbot
SetEnvIf User-Agent "TweetmemeBot" blockbot
SetEnvIf User-Agent "FlipboardProxy" blockbot
SetEnvIf User-Agent "QuerySeekerSpider" blockbot
SetEnvIf User-Agent "PaperLiBot" blockbot
SetEnvIf User-Agent "Google-HTTP-Java-Client" blockbot
SetEnvIf User-Agent "EveryoneSocialBot" blockbot
SetEnvIf User-Agent "LongURL API" blockbot
SetEnvIf User-Agent "LivelapBot" blockbot
SetEnvIf User-Agent "FlipboardProxy" blockbot
SetEnvIf User-Agent "Twitterbot" blockbot
SetEnvIf User-Agent "help@dataminr.com" blockbot
SetEnvIf User-Agent "MetaURI API/2.0 +metauri.com" blockbot
SetEnvIf User-Agent "Applebot" blockbot
SetEnvIf User-Agent "Jakarta Commons-HttpClient/3.0.1" blockbot
SetEnvIf User-Agent "ShortLinkTranslate" blockbot
SetEnvIf User-Agent "EveryoneSocialBot" blockbot
SetEnvIf User-Agent "OpenHoseBot" blockbot
SetEnvIf User-Agent "MetaURI" blockbot
SetEnvIf User-Agent "ceron.jp" blockbot
SetEnvIf User-Agent "FlipboardProxy" blockbot
SetEnvIf User-Agent "Go 1.1 package http" blockbot
SetEnvIf User-Agent "Applebot" blockbot
SetEnvIf User-Agent "Sogou web spider" blockbot
SetEnvIf User-Agent "YodaoBot" blockbot
SetEnvIf User-Agent "msnbot" blockbot
########################################

おかげで、MovableType のブログ編集画面も元に修復したが、設定している xserver の設定を見直すと、しばらくほってあったので、PHPやデータベース MYSQL のバージョンなどが低くなっている。これらのバージョンをUPすると、今度は ブログへのアクセス内容を解析するサービス Artisan lite が稼働しなくなった。
 5年前にArtisan lite を設定してから、これも見なおしていなかったので、バージョンが上がるなど問題が発生している。色々と修復を試みたが、うまくいかず、仕方なく新たにインストールしなおしたら、ようやく動くようになった。Artisan Lite のインストールについては、別のエントリーで記録しておきたいと思う。

2014年10月17日

隠居のパソコン備忘録:Youtubeをページ内で再生させるYouTube Player API を試してみる


 9月の終わりにあった和泉の国ジャズストリートで録画した Videoをブログにアップした。その時、ブログのページ内で再生できるようにしたかったが、方法が見つからず、YouTube にリンクするしかなかった。YouTube の画面はかなり noisy である。

 最近、ひょんなことで、ブログのページ内で録画を YouTube の機能を使って再生できることが分かった。私的な旅行地図などを作るときに使っている Google Maps API(Application Program Interface) と同じように、Javascript を使う。Codeを自ら作り出す能力はないから、他人様のコードのパクリである。Javascript だから少しぐらいは自分で改訂することが出来る。
 今回は、YoheiM.netYoutubeをサイト内で再生させるYoutube APIの使い方を参考にさせていただいた。

YouTube Player API で表示する動画


 上の YouTube 埋め込みプレーヤは、次のような Javascript コードで実現している。
 青太字部分は、YouTube に登録されたファイル名である。

<div id="player"></div>
<script>

    var tag = document.createElement('script');
   tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
   firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

   var player;
   function onYouTubeIframeAPIReady() {

  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'rL--g6q7zu4',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) {
}


function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
    alert('finish');
  }
}
</script>

追記(2015/10/26): Youtube の Webページヘ内で再生させるのに、上のコードでは、Internet Explorer では表示されないことが、最近になって分かった。現在では Yutube が iframe を使ったコードを提供しており、更に便利にWebページ内に埋め込むことが可能になっている。方法など詳細については、別に記録したいと思う。
 現在は、新しい埋め込みコードで、表示している。



2013年12月19日

隠居のパソコン備忘録: IE10 でページが最新に更新されないとき


 私は、ブラウザは Internet Explorer 10(IE10) と Google Chrome とを使っている。同じように動くのであるが、いろいろなことで反応がことなる。

 ブラウザを使って何か作業をするときには、主に Google Chrome にしている。何かと便利だからだ。特に、Movable Type 4 でブログの記事を作成するときには、Google Chrome の方が反応がいい。
 例えば、文中に写真を挿入する場合、Google Chrome では、カーソルがあるところに、挿入する画像を表現するHTMLコードを置いてくれる。IE10 にかぎらずIE では、本文作成の上部に表示される。いちいちコードを切り取って 挿入する場所に、cut&paste しなければならない。その他、細かい部分で、 Chrome と IE では表示が異なる。HTML のコード解釈が異なるのだ。
 ところが、ブログを見にきてくれる方は、大部分(約50%)は IE であるから、公開前に IE での確認が必要である。

 ブログの新しい記事を作成・公開するときには、上に書いたように Chrome で MT の記事作成画面を開いて、記事を書きながらときどき保存し確認ボタンで、仕上がりを確認する。この場合、仕上がりは Chrome での表示モードでの確認となる。私のブログでは、最近訪問してくれる人の20%ほどは、 Chrome であるが、50%近くは、相変わらず IE であるから IE での確認も欠かせない。
 IEでの確認は、 Chrome で作成した記事を公開してから、開いてあるIE でページの更新ボタンrenovation-01.JPGをクリックすると更新表示されるはずである。 が、変化がない。Chrome ではブログを修正し保存した時には、最新に更新されるのに、IE ではされない。それで、ググって見ると、解決方法が紹介されていた。方法は、以下のとおりである。

「ツール」⇒「インターネットオプション」⇒「設定」をクリック
renovation-02.JPG


「Webサイトを表示するたびに確認する」を選択 初期設定は、「自動的に確認する」になっている
renovation-03.JPG


 ということは、ほとんどの方がIEでご覧になっているから、ページを修正してもタイムラグが生じると心しておかねばならないということのようだ。

2013年12月14日

隠居のパソコン備忘録: Google Map で緯度・経度を求める


 Google のソフトは、メール(gmail)でも、地図検索(google map) でも、カレンダー(スケジュール帳)でも、どんどん進化?している。だから、ちょっと前までできていたことが、突然できなくなったりする。

 このブログに掲載している私的な観光地図(例えば、【京都・滋賀・奈良私的観光地図】 )では、Google Maps API というアプリを使っている。このアプリも進化しているが、いまここでは触れない。
 このような地図を作るときには、ピンマークを建てる位置の経度・緯度(10進法での)が、必要である。今までは、Google の地図検索で探した地点の赤ピンマーク map-09.JPG の根元を右クリックするとセレクトボックスが出て、その中から、「この場所について」を選択すると検索地点入力ボックスに、10進法の緯度・経度が表示されるので、これを使っていた。

 だが、最新のGoogle 地図検索では、セレクトボックスは出てこないし、緯度・緯度を表示してくれる機能が見当たらない。困ったので、緯度・経度を表示するサービスはないかと検索してみると、【Googleマップで緯度・経度を求める (拡張版)】というサービスが見つかった。最新のGoogle 地図検索では、検索した時に、検索入力ボックスに検索地点の住所が表示されるので、上のサービスの検索入力ボックスに Copy&Paste すれば、その地点の緯度・緯度を10進法と60進法の両方で表示してくれる。

 ところが、この記事を書くために、再度最新の Google 地図検索を開いてみると、右下の方にあるヘルプアイコンmap-07.JPGをクリックすると「以前のマップに戻る」という項目が用意されていて、これを選択すると、Google 地図検索の前のバージョンになる機能が追加されていた。Google のアプリは基本的に無料であるから、自由気ままに変えているのかなと思ってしまう。

最新のGoogle 地図検索 画面
map-01.JPG

ヘルプアイコンをクリックすると
map-02.JPG

以前のGoogle 地図検索 画面
map-03.JPG

検索地点の赤ピンマークの根元をクリックする
map-04.JPG

「この場所について」を選択する
map-05.JPG

Googleマップで緯度・経度を求める (拡張版)
map-06.JPG


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年2月18日

隠居のブログ備忘録:InternetExplorer 9 で MovableType4 の記事編集ができないを修復する


 順調に動き始めた新しいパソコンの Windows 7 であったが、ブログに新しい記事を投稿しようとしてつまづいた。
 私が使っているMovable Type 4.1(MT4.1)のブログ管理画面で記事の本文を入力しようとしたが、どうしても入力することができない。このブログ記事の投稿作業は、ある意味ではクラウド型で、レンタルしているサーバー(私の場合、XSERVER )にネットからアクセスして、ブログ管理画面を開くことになっている。このアクセスの方法が間違っていたのかと思い、URL を再確認するなど何度もトライしてみたが、うまくいかない。

 "なんでやねん?" と思いを廻らしてみたが、原因が検討もつかない。きっとまた単純なミスをしているに違いない。こういうときは、早く休んで頭をスッキリさせるにかぎると、ベッドに入ってみたが、気になって寝付けない。

 よく早朝、リビングのこたつの上に置いているタブレット(XPERIA)で、ブログ管理画面に入ってみた。ブログの少しぐらいの修正なら、タブレットでもできるようにと設定してあったのを思い出した。そうすると、なんのことはない Android タブレットからすんなりと管理画面に入ることができ、記事の本文修正も問題なくできる。

 どうやら、新しいパソコンだけの問題のようだ。新しいパソコンでネットワークに関係するのは、Internet Explorer(IE) である。新しいパソコンでは、IE は version9になっている。"MT4.1" "IE9" でネットサーチしてみると、ヒットした。どうやら、IE9 では、MT4 や MT5 の管理画面が正常に機能しないらしい。

 ブラウザの問題であることが分かったので、新しいパソコンで、Gmail などのために設定している Google chrome からアクセスしてみると、問題なくブログ管理画面が表示された。結果論ではあるが、それなら焦る必要はなかったのである。

 IE9 での解決法をネットで探っていくと、いつもお世話になっている小粋空間さんから、対処のための「IE9でMovable Typeの管理画面を操作できるようにする「EmulateIEプラグイン」」というプラグインが用意されていることが分かった。
 新しいパソコンでのファイル転送ソフト:FFFTPの設定に、少々手間取ったが、早速、インストールした。ブログ管理画面は、問題なく機能するようになった。

 どうやら、市場占有率の高い IE だけの問題のようだ。CSS などでも微妙に異なるブラウザ間の互換性は早く統一してほしいものだ。

2013年2月17日

隠居のパソコン備忘録:メインのPCをWindows7 のDELL ディスクトップに変える


 マザーボードを変え、システム・デスクATX電源も入れ替えるなどして10年以上にもわたって使ってきた自作パソコンの動きが、おそくなってきていた。年初の e-Tax の作業では、Windows XP の Service Pack 3 へのグレードアップを求められたが、長年のゴミが溜まっていたせいか、インストールができなかった。それで、毎日長時間使う道具でストレスが溜まるのも嫌なので、思い切って新しいパソコンに変えることにした。

 部品を買ってきて、自分で組み上げる楽しみ(苦しみ)を感じる歳でもなくなったきたので、DELL にディスクトップ本体を発注した。DELL は、部品を自分で選べるところがいいところである。それに一般メーカー製のように、余計なソフトが入っていないのがいい。
 ところが、発注した時期が悪かった。2月1日に、DELL のウェブページから発注したのであるが、当初配送予定日が 2月9日となっていたのが、2月9日になって諸般の事情により配送が遅れる見込みであるとのメッセージが現れた。(DELL では、発注毎の進捗状況が表示される) 
 1日、2日たっても、メッセージは変わらない。どうやら、春節休暇にかかってしまったらしい。(DELL は、日本向け製品を中国東南部の福建省・厦門の工場で製品を組み上げている) 製品は春節明けの16日土曜日に配送されてきた。

   新しいパソコンは、私のブログ・サイトを訪問される方の多くが使われているOS の Windows7(35%) 、ブラウザは Internet Explorer 9 (45% IE53%中)にした。(アクセス解析サービスResearch Artizan での結果) 早速、立ち上げた。
 新しいパソコンには、無線LANのカードが組み込まれているので、自動的に無線LAN ルーターを探しに行き、ルーターに記載されている keyコードを入力するだけで、インターネットに繋がった。インターネットに繋ぐのに、四苦八苦した昔のことを思えば夢のようである。
 Microsoft の更新プログラムのインストールに少々の時間(2時間ほど)を要したが、まことにサクサクと動くようになった。

 旧のパソコンでは、システム・ディスク以外は、外付けのHDDにしていた。(1TB(テラバイト)でも、一万円を切っている。)これらの外付けHDDにあらたにパーティションを切って、C:ドライブにあったプログラム・ファイルなどを、事前にコピーしておいた。これらの外付けHDDのデータはほとんど写真と音楽であり、ファイルシステムは NTFS なので、Windows7 64bit でも問題なく読み込むことができた。

 このごろパソコンに向かって作業するアプリケーションのほとんどは、クラウド型である。メールは、Gmail を使っているので、Google Chrome をダウンロードして、自分のアカウントでログインすれば、Gmail を立ち上げるだけで表示してくれるし、ブックマークの表示なども、旧のパソコンと同じように表示される。
 パソコンで音楽を聴くのは、専ら Web Radio であるから、インターネットにつながっておれば問題はない。オーディオにつないでいるケーブルを古いPCから、つなぎ変えて、Radio Senbokuを聴くとなかなかいい音がするし、途中で息をつくというようなことはない。
 音楽を聞きながらのウェブページの表示もはやく、リンクもスムースに動くので、ストレスは感じなくなり、パソコンに向かうのがますます楽しくなってきた。

2013年2月16日

隠居のパソコン備忘録: ブログ(MT4.1)サイトにあるウェブページへリンクできない


 【隠居のパソコン備忘録: (続)ブログ(MT4.1)の表示レイアウトを変更する】に記録したように、表示レイアウトを変更してから、いろいろなトラブルが出てきた。
 MovableType(MT) で構成している私のブログ・サイトには、右サイドメニューに日付やカテゴリーで管理されない 野鳥日誌であるとか、Jazz Player のリストなどの独立したウェブページにリンクするボタンを置いている。これらのリンクボタンをクリックしても、「ページが見つけられません」という表示がでて、リンクできないようになった。ネットをサーチしてみたりして、いろいろと弄ってみたが、知識の乏しい老人では、原因がわからない。思い余って、テンプレート使わさせてもらっている「小粋空間」の荒木さんに、質問を投げかけてみた。だが、上っ面だけの知識では教えてもらったことが、よく理解できない。
 とりあえず、MT のサイトの外に、静的なウェブページを作成し、リンクすることで急場をしのいだ。

 今回、何が原因だったのかがよくわからないのであるが、なんとか修復することができたので、修復した方法を備忘録として記録しておきたい。 
  1. MT ではブログ作成作成画面と同じように、 ウェブページを作成・編集する画面があるのであるが、ブログ作成・編集では、表示するファイル名は、/blog-url/yyyy/mm/dd_HHMM.php (2013/02/06_1131:2013年2月6日11時31分の意)というフィル名が自動的に付けられる。(変更はできるようだが) これに対して、ウェブページのフォルダー名・ファイル名は自分でつける。例えば、、/blog-url/web/birds-diary-2012.php という具合に下線部分を自分で決める。
    ブログの公開で、「アーカイブテンプレートをダイナミックに構築する」を選択し、ファイル拡張子 .php としていると、ファイル名の拡張子はすべて php となる。
  2. このウェブページのファイルを、Blog URL フォルダーの直下に置くなどして、ファイル名を変更し、表示を確認(プレビュー)して問題がなければ、保存する。
  3. ウェブページへのリンクは、「テンプレート・モジュール」の「サイドバー」の中で指定しているので、上で指定したファイル名(例:/blog-url/web/birds-diary-2012.phpを間違えないように書き換える。書き換えた「サイドバー」テンプレートを保存し、サイトの再構築(すべてのファイルの再構築とした)をすると、ブログの右カラムに置いているリンクボタンのクリックで、ウェブページが表示されるようになった。ダイナミック・・パブリッシングになっているので、サイトの再構築はそんなに時間がかからない。

 修復できてみれば、大した作業ではないのであるが、それまでに同じような試みをして、上手くいかなかったのは、きっと入力文字の綴りを間違えるなど初歩的なミスをしていたせいかもしれない。

 MTサイト内のウェブページへのリンクにしておくと、MTサイトでカストマイズしている最新のカレンダーが使えるなど、体裁が良くなる。ただし、内容によっては、MTサイト外で表示したほうがいい場合もある。たとえば、DIY作品集などは、静的なウェブページのほうが、スッキリしていいようだ。

2013年2月 6日

隠居のパソコン備忘録: (続々)ブログ(MT4.1)の表示レイアウトを変更する

 【隠居のパソコン備忘録: (続)ブログ(MT4.1)の表示レイアウトを変更する】 で記録したが、友人の指摘で、ヘッダー部分にある横長カレンダーからエントリーへのリンクが機能していないことがわかった。原因を探ると、プラグインの横長カレンダーを導入した時に作ったアーカイブテンプレートが表示レイアウトを変更した時に、消失していることが判明し、過去の記録を見て修復することができた。
 と思っていたのだが、なぜか2月になって投稿した日の色が変わらないのとその日の投稿タイトルが表示されなく当然のことながら、該当エントリーにリンクしない。

 私が運営している Studio YAMAKO でも横長カレンダーではないが、同じ仕樣のテーブル型のカレンダー(Kinarie&May 作のFlash carender)を使っている。ただ、このカレンダーは正常に機能している。
 このカレンダーの仕樣をそのままコピーすれば、うまくいくはずと考え、横長カレンダーをやめて、通常型カレンダーを設置することにした。だが、かなり注意して、再設置したはずなのに、うまくいかない。Studio YAMAKO のアーカイブ・テンプレートなどあれこれと比較してみたが、原因がはっきりしない。ほぼ諦めかけて、もう一度仔細に、比較してみると、さして気にもしていなかったブログのテンプレートのうちアーカイブ・テンプレートの【ブログ記事】テンプレート行の右側にある「ダイナミックテンプレート」に、Studio YAMAKO の場合はチェックが入っているのに、私のブログ Atelier ではチェックが入っていないことがわかった。

archive-tmp-01_e.jpg これにチェックを入れる方法がわからない。「ダイナミックテンプレート」なるものがよく分かっていなかったので、ネットでサーチしてみたが、理解が進まないが。どうやら「ダイナミック・パブリッシング」という言葉を昔使ったような気がしたので、自分自身のブログをサーチしてみるとありました。
 2008年6月に、MovableType 3.3 から 4.1 にアップグレードしたときに苦労した事項の備忘録である。
 これらの記録を參考に、因果関係がよくわかっていないのだが、ブログ管理画面の【設定】⇒【ブログの設定】⇒【公開】の画面で、【公開方法】セレクトボックスから「アーカイブテンプレートのみダイナミックで構築する」を選択すると、「アーカイブテンプレート」の「ブログ記事」に、ダイナミックテンプレートのチェックが点くようになった。MT4.1にバージョンアップするときに、その辺りを学習したつもりであるが、5年も前のことは、さっぱり記憶が蘇らない。
 そのためにも、ささいなことでも記録していくようにしたいと思う。

2013年2月 3日

隠居のブログ備忘録:JQuery lightbox 2.51 をカストマイズする

 
 昨年夏に、サムネイル写真をクリックするとウインドウ中央に写真が拡大表示される Llightbox を jQuery という JavaScript のライブラリーを使用した Lightbox2.51 を導入した。
 その時、カストマイズしたのは、デフォールトでは黒である背景画面の色を緑にしたのと、写真ページを閉じるボタンを デフォールトのclose.png から、自作の closelabel.gif に変更しただけである。

 私が管理している友人の Lightbox は、prototype.js という JavaScript のライブラリーを使った旧バージョン Lightbox2.0 を使っている。背景画面に、蝶をあしらった壁紙を使っていて、これを Lightbox2.51 で使う方策が分からなかったからである。
  Lightbox2.51 のカストマイズは、【jQueryのlightBoxプラグインの使い方】【jQuery LightBox Pluginの使い方】 などに詳しい。これらのプラグインは、新たに JavaScript を付け加えてカストマイズする方法である。だが、私のやり方が悪かったのか上手く行かなかった。
 そこで、当初導入した時にいじったJavaScript lightbox.js と スタイルシート lightbox.css 再度いじって見ることにした。 私にコードが理解できるわけではないから、やりかたは ここはと思われるスクリプト ないしは CSS をいじって、FTP でサーバーにアップロードし、実際のページでの変化を観察する方法である。幸い、JavaScript と CSS の変更は、すぐにページに現れるから楽である。この結果を備忘録として記録しておきたいと思う。

  1. 自作の closelabel に置き換える。
    lightbox.js の41行目を下のように独自の画像に置き換える。
          this.fileCloseImage = 'http://n-shuhei.net/atelier/Jquery2.51/images/closelabel.gif';

  2. セットで写真を表示している場合の表示を "image"(default) から "画像"に置き換える。44行目
          this.labelImage = " 画像 "; 

  3. セットの写真の何枚目を示す、表示を例えば "1 of 8" を " 1 / 8 "に置き換える。45行目
          this.labelOf = "/";  

  4. 背景画面を単一色から、壁紙画面に変える。lightbox.ccs の7行目あたりの背景色をコメントアウトして、壁紙イメージを挿入する。
    /*  background-color: #000000; */
    background-image: url("http://n-shuhei.net/atelier/lightbox2/images/overlay_1.jpg") ; 

  5. 画像の枠(台紙)の色をかえる。lightbox.ccs の35行目あたり。デフォールトは、"white;"
       background-color: #ffffe0;

  6. 画面の"前画面" "次画面" へのボタンを独自のボタンに置き換える。lightbox.ccs の112行目、117行目あたり。 
        background: url(http://n-shuhei.net/lightbox2/images/prevlabel.gif) left 40% no-repeat;

    background: url(http://n-shuhei.net/lightbox2/images/nextlabel.gif) right 40% no-repeat;

  7. 写真の説明文字の色を変える。lightbox.ccs の145行目あたり。デフォールトは灰色。
     color: #ffffff;

 その他、細かい部分も、CSS をいじることで変えられそうだ。
サンプル画像は、次のエントリー【隠居の探鳥ウォーク:ハリエンジュ 花芽ついばむ 鷽(ウソ)4羽 】などで確認できます。

  

2013年1月22日

隠居のパソコン備忘録: (続)ブログ(MT4.1)の表示レイアウトを変更する


 【隠居のパソコン備忘録: ブログ(MT4.1)の表示レイアウトを変更する】で記録したように、表示レイアウトを変えてから、色々なバグが出ている。今まで、当ページを訪問していただいていて、お気に入り(Bookmark)に登録していただいてような方が、登録しているURLをクリックすると表示が崩れてしまう。変更前のレイアウトのキャッシュを保持しているからである。一旦、古い登録や Cookie(キャッシュ) を削除して、新たにアクセスしていただくと上手く表示されるのだが、メールでもいただかない限り、それを案内する方法が思い当たらない。何かいい方法があれば教えてもらいたいと思う。

 その他にもいくつかの不具合があったが、中でもなかなか原因がつかめなかったバグ(?)は、右サイドメニューに置いている【このブログのキーワードページ】(TagCloud のページ)の表示である。ページの表示が崩れるのである。このページは、自分で乏しい知識をもとに行ったカストマイズである。このページを作った時の記録が、ブログに残っているのであるが、この記録が不完全であった。新たに、tagcloud ページ用のインデックス・テンプレートを作って対処していたのであるが、新たにインデックス・テンプレートを作るとの記述が抜けていた。
 スタイルシート(CSS)も、インデックス・テンプレートの一つであるが、これらを訂正した時には、ブログの再構築が必要である。上述の記録にある方法で、tagcloud 用のインデックス・テンプレートを作成し、再構築を行うと正常に表示されるようになった。
 5年も前のことは、すっかり忘れてしまっている。そのための記録なのだが。

(追記:2013/1/28)修復するのに、多大な時間を使った項目が2つあるので、記録しておきたい。
  1. 先にも記録したようにメインページのおかしなキャッシュが残っていて、ブログ・メインページ(http://n-shuhei.net/atelier/ )にアクセスすると、1月8日現在の形の崩れたページが表示された。
    原因をいろいろと探ったが分からずあきらめていたところ、インデックス・テンプレートのメインページテンプレートでの出力ファイル名が、index.php となっていなければならないところ、index.html となっていた。いつもそうだが、単純なミスである。
  2. いつも訪問していただいている友人の指摘で、ヘッダー部分にある横長カレンダーからエントリーへのリンクが機能していないことがわかった。原因を探ると、プラグインの横長カレンダーを導入した時に作ったアーカイブテンプレートが消失していることが判明した。過去の記録を見て修復することができた。



  

2013年1月11日

隠居のパソコン備忘録: ブログ(MT4.1)の表示レイアウトを変更する


 私のブログ(Atelier Shuhei Weblog)に訪問してくださる方たちの訪問内容を分析するサービスがある。私は、古くから Reasearch Artisan Lite というサービスを使わせてもらっている。

 この分析項目の一つに、訪問者がどのような解像度のモニターで表示されているかが示される下のスクリーンショットのような表がある。最近3ヶ月の訪問内容を調べてみた。

0111_1.JPG
 最近の液晶モニターは、解像度が向上してブラウン管のモニターが大勢であったころの 1024x768 のモニターは少数派となってしまった。私のブログは、1024x768 のモニターで見てもらうことを前提に、ブログのレイアウトを構成してきた。
 ブログのテンプレートは、MovableTypeのエキスパートである小粋空間が提供するテンプレートから、横幅がモニターの解像度に合わせて伸縮するリキッドレイアウト(2段)を使ってきた。もともと横幅を1024ピクセルに合わせて、テーブルなどを作成してきたので、最近の横幅 1280 や 1600 などのモニターで画面一杯表示させると、非常に間抜けた表示になってしまう。多くの方が、このレイアウトの崩れた画面を見ておられることになる。
 実は私も、普段は横幅 1600 ピクセルのモニターを使っていて、自分のブログを表示するときには、縮小モードで横幅を 1024 近くで表示させているのだ。
Google や Yahoo! のページでは、どのような解像度で見ても対応できるように作られているが、このようなページを作るには難易度が極めて高そうだ。
 それで、先の小粋空間さんのページをはじめ多くのページで採用されている横幅が固定したレイアウトに変更することにした。それほど難しくは無いだろうと始めた作業は、結局丸2日ぐらいかかってしまった。今後のために、試行錯誤の作業を記録しておきたい。

  1. 小粋空間のサイトで探し当てた【テンプレートセットの入れ替え】というページにもとづいて、「2カラム(右サイドバー)・リキッドレイアウト(layout-two-column-liquid-right)」から、「2カラム(右サイドバー)・固定レイアウト(layout-two-column-right)というレイアウトにデザイン適用を行った。だが、これからが大変だった。
  2. 後でわかったことであるが、レイアウトを入れ替えると、ブログのテンプレートが初期化された。(追記:2013/1/17)私のブログだけだったようで、初期化されるのはスタイル・シートだけである。 問題は、長い間にわたってカストマイズしてきたインデックス・テンプレートの、スタイル・シート、メインページが、テンプレート・モジュールのヘッダー、サイドバー2、サイドバー、コメント入力フォームが初期化されたことである。幸い私の場合、友人のブログをほぼ同じようにカストマイズしてきていたので、これらの内容をコピペすることで、かなりの部分が助かった。だが、私のブログ用にかなりいじっている部分もあったので、これを修復するのが大変だった。
    カスタマイズしたテンプレートは、事前に別ファイル名でコピー保存しておくことが必要だ。
  3. 一番の苦労は、2カラム(右サイドバー)・固定レイアウト用に、スタイル・シートをいじることであった。レイアウトの全幅は #box、 記事部分は #content 、右サイドメニューは #links-right-box、にピクセル数を与えながら設定した。

まだ、原因が判明できないバグがあるが、おいおいと修正したいと思う。まあ、苦労したお陰で、仕組みの理解は少し進んだかもしれない。
歳をとっての、このような作業は辛いが、ボケ防止になるだろう。

2012年9月 7日

くらしの暦:二十四節気 白露 七十二候 草露白


 二十四節気は白露となったというのに、残暑は収まりそうにもない。
スマートフォンの無料アプリ【くらしの暦】も、今朝、七十二候の草露白(くさのつゆしろし)に変わった。ちょっと拝借して、パソコンに再現してみた。

くらしのこよみ:白露[草露白]
スクロールバーを右端から左へ動かしてください。



 なお、七十二候が替わるたびに、ページの右フレームの下に、掲載している。

2012年8月13日

隠居のパソコン備忘録:スマホのスクロール・イメージをブログに掲載する


 Masajii's Brog で、オーナーの Masajii さんから、【読書日記「くらしのこよみ」】に、スマホのスクロール・イメージを掲載できないかとの相談を受けた。
 今まで画像を横方向にスクロールしながら見るというようなことは試したことはない。興味を引くテーマなので、挑戦してみることにした。
 平凡社が提供するスマホ向け無料アプリ【くらしのこよみ】は、このようなトライをしてみるには格好の材料である。
 少し、時間を要する作業であるがなんとか実現できるので、備忘録として記録しておきたい。

   
出来上がりサンプル
スマホの画面イメージ
スクロールバーを右端へ移動してから左へ動かしてください。


  1. 対象となるスマホの画面をキャプチャーする。(キャプチャーの方法は、【隠居のスマートフォン備忘録:(14)Xperia acro の画面をキャプチャーする 】に記載している。)例題のアプリ「くらしのこよみ」では、26画面(1画面は480x854ピクセルl)をキャプチャーした。
  2. キャプチャーした画像を、Photoshop Elements を使って横に結合していく。この作業が、Photoshop を使い慣れていないせいもあって大変だった。
     先ず、「ファイル」⇒「新規」⇒「白紙ファイル」で、ファイル名を Kooyomi-1 とでもし、横幅2400pixel x 854pixel と指定した。キャプチャー画面を5枚 横に結合するスペースである。横幅、もっと大きくできるが、画像が小さくなり、結合する境界の判定が難しくなる。
  3. 次に、結合するキャプチャー画面を「ファイル」⇒「開く」と、画面下のプロジェクト・エリアに表示される。これを先の白紙ファイルにドラッグ&ドロップして、右端から埋めていく。スマホのスクロールでキャプチャーした画像は、必ずしもきちんと 480pixel となっていないので、ドラッグで重ねあわせ調整して画面を作っていく。連結した画面ができたら、右フレームの下方の「レイヤー」欄に画像名が表示されるので、連結した画像名を選択して右クリックすると出てくるセレクトボックスで、「レイヤー結合」を選択すると、下のスクリーンショットのように、結合した一つのファイルとなる。結合したファイルは、別名で保存しておく。

  4. このようにして、28の画面をグループ(今回の場合、6グループ)に分けて、画像ファイルを保存しておく。その後、6グループのファイルを結合する。この作業は、要するに、キャプチャーしたスマホのスクロール画面を一つの横長画像にする作業である。結果は、12480x854pixel の画像(jpegとした)となる。
  5. 出来上がった画像を、そのままのおおきさでブログに掲載するには、縦幅が大きすぎるので、Picasa のエキスポートを使って、縦・横幅を40%くらいに縮小した。なお、Picasa を使うと結合した結果、はみ出る白紙部分を削除する切り抜きが楽である。
  6. 今回のメインは、画像を横にスクロールするために、HTML <iframe> タグを使ったことである。
    上の出来上がりサンプルのためのコードは、次のようになる。
    <center><caption><strong>スマホの画面イメージ</strong><br /><small>スクロールバーを右端へ移動してから左へ動かしてください。</small></caption></center>
    <center>
    <iframe frameborder="1" scroling="yes" width="250" height="400" src="http://n-shuhei.net/atelier/screenshot/1-koyomi-c2.jpg" /></iframe>
    </center>
    
    <iframe> タグを使うと、上の Photoshop のスクリーンショットのように、横長の画像をスクロールバー付きで、横幅を抑えて表示できる。
 このような方法を使えば、スクロールしてつかうアプリの紹介は楽になるが、いまのところ紹介すべきアプリは思い当たらない。

2012年7月21日

隠居のパソコン備忘録: Google Maps API JS V3 でXML ファイルを読み込む

 
 自作地図を作成するのに便利していた Google Maps API のバージョンが、 V2 から V3 に大幅に変更され、来年5月には V2 で作成した地図が動かなくなりそうだということは、隠居のパソコン備忘録:Google Maps API V3 で旅行地図を作成するで、記録した。

  V2 で作成した多くの地図では、外部ファイルである XML ファイルを読み込んでマーカを立てる地点やマーカをクリックすると出てくる吹きだしの中に、リンク先などの情報を表示していた。年間の旅行先などマーカが順次増える場合には、XML ファイルに経度・緯度や必要なリンクを書き足すだけでいいので便利をしていた。
 今まで V2 で作成してきた地図を V3 にバージョンアップして XML ファイルを読み込むためのサンプル・コードを探し回したが、適切なコードが見つからなかった。一から、作成する能力はからきしない。途方に暮れて、上のブログに記録した前回の方法で、XML ファイルを使わず直接 JavaScript に書き込むことも挑戦しかけたが途方も無い作業のようなのでやめて、今までの XML ファイルが使えそうなサンプル・コードで、再度粘ってみることにした。

 拝借したサンプル・コードは、上のブログに記録した前回の方法ときにも拝借した、【Using the Google Maps API v3】 というページにある【lLoading the data from an XML file translated to v3】のソース・コードである。
 V3 のGoogle Maps API にXML ファイルを読み込む方法は、多くの場合、前回に lightbox 2.51 の導入で紹介した JavaScript のライブラリー jQuery が使われている。拝借したサンプル・コードでは、jQuery ではなく、downloadxml.js というライブラリーが使われている。どうも、jQuery の方が本流らしいが、私にとっては、V3 で今までの XML ファイルが使えるサンプル・コードの方がありがたい。
 一週間以上かなりの時間を使って粘った甲斐があって、下のようなコードで XML が読み込めるようになった。
 

<!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" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps Javascript API v3 Example: Loading the data from an XML</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://n-shuhei.net/XXXXX/XXX/XXXXX/downloadxml.js"></script>

<style type="text/css">
html, body { height: 100%; } 
</style>

<script type="text/javascript"> 
//<![CDATA[
// this variable will collect the html which will eventually be placed in the side_bar 
      var side_bar_html = ""; 

      // arrays to hold copies of the markers and html used by the side_bar 
     // because the function closure trick doesnt work there 

      var gmarkers = []; 

     // global "map" variable
      var map = null;

// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });

    // save the info we need to use later for the side_bar
    gmarkers.push(marker);

    // add a line to the side_bar html
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}

// This function picks up the click and opens the corresponding info window
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}

function initialize() {
  // create the map
  var myOptions = {
    zoom: 12,
    center: new google.maps.LatLng(35.377556,134.534862),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

      // Read the data from hachi.xml
      downloadUrl("hachi.xml", function(doc) {
        var xmlDoc = xmlParse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {

          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new google.maps.LatLng(lat,lng);
          var html = markers[i].getAttribute("html");
          var label = markers[i].getAttribute("label");

          // create the marker
          var marker = createMarker(point,label,html);
        }

        // put the assembled side_bar_html contents into the side_bar div
        document.getElementById("side_bar").innerHTML = side_bar_html;
      });
    }

var infowindow = new google.maps.InfoWindow(
  { 
//    size:  new google.maps.Size(200,50)
  });

    // This Javascript is based on code provided by the
    // Community Church Javascript Team
    // http://www.bisphamchurch.org.uk/   
    // http://econym.org.uk/gmap/
    // from the v2 tutorial page at:
    // http://econym.org.uk/gmap/basic3.htm 

//]]>

</script> 
  </head> 

<body style="margin:0px; padding:0px;" onload="initialize()"> 

    <!-- you can use tables or divs for the overall layout --> 
    <table border="1"> 
<tr>
<td bgcolor="#FFFFCC" align="center" colspan="2"><font color="#000000"><strong><big>ハチ高原近辺私的観光地図</big></strong><br /></font></td></tr>      
<tr> 
        <td> 
           <div id="map_canvas" style="width: 800px; height: 600px"></div> 
        </td> 
        <td width = 200 valign="top"  bgcolor="#ffffe0" style="text-decoration: underline; color: #000000; font-size: small;" >
<!--<td valign="top" style="width:150px; text-decoration: underline; color: #4444ff;">-->
           <div id="side_bar"></div> 
        </td> 
      </tr> 
    </table> 

    <noscript><p><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.</p>
    </noscript> 

  </body> 
</html> 
サンプル地図

 試行錯誤は、拡張子の前につける . (ピリオド)が抜けていたり、ファイルのアップロード先を間違ったりなど実に単純なミスの連続であった。
 とくに、Geekなぺーじの【Google MAPS JavaScript APIでのデバッグ】にも書かれているように、日本語コードで最後までつまづいた。V2 のときには、Shift-JIS でも OK だったXML ファイルが、UTF-8 でないとエラーを起こすというより、全く読んでくれない。
 この試行錯誤のお陰で、Google Maps API について、少し理解が深まったが、JavaScript に十分な知識がない老人にはやっぱり難解な世界である。中断していた JavaScript の学習も再開せねばと思うが、なにしろやりたいことが多すぎる。
 来年5月までに、順次 V2 の地図を V3 にしていくつもりである。

2012年7月17日

隠居のパソコン備忘録: jQuery lightbox (同一画面上に拡大写真をかっこよく表示する)を導入する


 先日来、個人的地図作成サービス Google Maps API V3 を学習してきた。このサービスを使って、加賀地方旅行地図を作成したことを記録している。このサービスを学習中に、jQuery という JavaScript のライブラリーが、いろいろな JavaScript ソフトを導入するときに使われていることが分かった。

 この JavaScript ライブラリーの jQuery を使って、拡大写真の表示を同一画面上に表示する JavaScript の lightbox が新しいバージョン(Version 2.51)になっていることも分かった。(従来のライブラリーは、prototype.js )
 これを、先の加賀地方旅行地図での写真表示に使って見ることにした。
サンプル画像

 インストールについては、Lightbox2 のページから、Lightboxv2.51 をダウンロードし、PC のどこかのフォルダ(例えば、lightbox2.51 を作成し )に解凍する。
  上のページの【How to use】を参考に、ブログをアップロードしているサーバーに新しいフォルダー(例えば、lightbox2.51 )を作成し、ファイル転送ソフト(私の場合、FFFTP )を使ってサーバーにアップロードする。解凍したフォルダーをまるままアップロードしても問題は無いと思う。ただ、サーバーに余裕がない場合には、先ほどのページを参考に、必要なファイルのみをアップロードしたほうが良い。このあたりは、【アクアラングウエスタンver.9.2】というページを参照させてもらった。

 このようにして、lightbox2 が動作するのを確認の上で、次のようなカスタマイズを行った。
  • 初期値では、写真を表示する画面の背景色は黒であるが、これを好きな色に変えるには、lightbox.css の冒頭にある次の青字部分を変更する。
    /* line 6, ../sass/lightbox.sass */
    #lightboxOverlay {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 9999;
      background-color: #408080; 元は、black;
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
      opacity: 0.85;
      display: none;
    }
    


  • 写真ページを閉じるボタンを close.png(close.png) から、自作の closelabel.gif(closelabel.gif) に変更した。変更は、lightbox.js の50行目あたりある次の青字部分を変更した。なお、赤字部分で示したように、imageのありかは、絶対パスで書いておいたほうが無難なようである。
      LightboxOptions = (function() {
        function LightboxOptions() {
          this.fileLoadingImage = 'http://n-shuhei.net/xxxxx/Jquery2.51/images/loading.gif';
          this.fileCloseImage = 'http://n-shuhei.net/xxxxx/Jquery2.51/images/closelabel.gif';
          this.resizeDuration = 700;
          this.fadeDuration = 500;
          this.labelImage = " photo  "; 元は、Image 
          this.labelOf = "of";
        }
    


 この Jquery lightbox2 を、Movable Type 4 で作ったブログの写真(多分1000枚以上ある)の表示に適用した。(従来は、prototype.js の lightbox 2.0 ) Movable Type に適用するには、テンプレートのヘッダーにある lightbox 2.0 の Javascript 表示を lightbox 2.51 のコードに置き換えるだけで、すべての写真表示が新しい lightbox2.51 の表示となるので極めて楽ちんである。(つまり、HTML でのコードは、 lightbox 2.0 でも lightbox2.51 でも同じである。)

2012年3月 4日

隠居のMT 備忘録:テーブル(表)の形式を工夫してみる


 前回の記事【隠居のMT 備忘録:IE で表示した時に出現する意図しないスペースを削除する】で表の上部に余分なスペースが表示される件については、一応落着しているのであるが、それでも原因が探りたくて、色々と大した知識もない中で思いをめぐらしていた。

 どうやら、先の現象が起きるのは、記事の中のテーブルを頻回に修正・追加しているのが原因ではないかと思われた。それで、〘IE CSS Table〙というようなワードでググってみると、 HTML コードでの <table> に関するプロパティを付け焼刃で学習してきたために、十分把握していなかったことが分かった。今後、HTML CSS にあまり知識のないものが、テーブルをいじるときに注意すべき事項を思いつくまま、備忘録として記録しおきたい。

 
  • テーブルやセルの枠を表示する線は、それぞれ太さがあり、隣接するセルのボーダーを重ねて表示したり、間隔をあけて表示したりできる。これは、CSS(スタイル・シート)で指定する。
     重ねての表示は、次のようなコードが紹介されている。
    table  { border-collapse: collapse }

    また、間隔をあけての表示は、次のように設定するとされている。
    table {  border-collapse: separate }

    どうやら、border-collapse を指定しない場合(初期設定)は、separate になっていたようだ。そのために、IE の場合、テーブルを設定し直すたびに、少しずつ sell-space が設定されており、たび重なって大きな空白ができたのではないかと推定される。ど素人のゲスだから、全く的外れかもしれないが。

  • このような学習をしていると、テーブルの枠やセルの線の太さや色などを指定したり、空白のセルにも枠をつけるためのスタイルを設定する方法が分ってきた。テーブルの枠やセルの線は、今まで特別に意識しない場合デフォールトの設定である solid で通してきたが、好きな線の太さや色を設定する方法も分かった。それで、もう少し自分好みにしたくて、新たにスタイルシートに設定した <table> に関するコードは、次のようなものである。
    なお、余談であるが、線の色:#ffcf64 および #48acd0 は私がディスクトップの壁紙として使っているカワセミの写真の腹部および羽の色である。この色コードは、以前から愛用している【ウェブカラークリエイター】というソフトを使って、採取したものである。
    /* テーブルのセル・ボーダーの表示形式 */
    table
     .waku1
      { border-collapse: separate;
        border: 1px solid #ffcf64; }
     .waku2
      { border-collapse: collapse;
        border: 1px solid #48acd0; }
    
    td { border: 1px solid #48acd0 }  


border-collapse: separate の場合(初期設定)
collapse_2.JPG


border-collapse: collapse の場合(新しく設定したスタイルシート)
collapse_3.JPG


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月25日

隠居のパソコン備忘録: 名刺作成ソフト(mPrint)で自分好みの名刺を作る


 ビジネスの世界からまったく離れてしまったので、名刺というものは要らなくなった。ただ、探鳥ウォークなどをしていて話を交わす人もある。ときには、自分のブログを見てもらいたいと思うときもあるので、ブログのアドレスを案内するようなメモ的名刺は、やっぱり持っていたほうがいい。

 従来は、年賀はがきの宛名印刷などで使っている【筆まめ】の宛名面の作成にある名刺というフォームで作成してきた。もう少し、気の利いた名刺作成専用ソフトがないかとサーチしてみると、フリーのソフトで【mPrint】というソフトが見つかった。このソフトを使うと、QR コードも印刷できるようだ。携帯やスマホに、QRコード読み取り機能が付いている時代である。早速、ダウンロードして、QRコードつき新しい名刺を作ってみた。下のスクリーンショットでのQR コードも有効であるので、携帯かスマホで試してみて欲しい。ソフトの操作についてはmPrint のページに詳しいが、この作成方法について備忘録として記録しおきたい。

meishi-1.JPG

  1. ダウンロード・ページから、圧縮ファイルを適切なフォルダーにダウンロードする。解凍すると、MPrint.exe という実行ファイルができる。デスクトップにはアイコンmeishi-2.JPGができる。
  2. このアイコンをクリックして mPrint を立ち上げ【ファイル】から〘テンプレート〙を選択する。(一度、作成を実行すると直前の名刺が表示される)ポップアップ画面にテンプレートが表示されるので、下に並んだボタンの〘次〙をクリックして好みに合うテンプレートを選択する。私の場合、QRコードを入れたいので、四角が表示されているテンプレートを選んだ。選んだテンプレートで〘OK〙ボタンをクリックすると、下のスクリーンショットのようになる。meishi-4.JPG
  3. この画面で、自分の好みの画面に仕上げていく。マークを替えるには、上のツールバーで【MARK】ボタンをクリックして、マークの選択画面を表示する。私の場合、ブログなどで使う Favicon を制作したものがあるので、これを使った。 この Favicon を使うためには、ダウンロードした mPrint の Zip ファイルを解凍した時のフォルダー(mPrint フォルダー)の下に mark というフォルダーができるので、ここにコピーしておく必要がある。マークの位置や氏名の位置などの移動は、該当ボックスにカーソルをあてドラッグすることでできる。
  4. 次に、上のツールバーで【フォント】ボタンをクリックすると、下のような画面が表示されるので、名刺に表示する項目をチェックし、表示しない項目のチェックを外す。この【文字の設定】ページは、3ページあり、15項目を設定することができる。基本的に、どの項目を選んでも文字列欄に入力した文字が、名刺画面に表示されるので、〘部署名〙などの表示にこだわることはない。文字のフォント・大きさ・色などが項目毎に指定できる。 meishi-7.JPG
  5. 名刺の背景を変えるには、Photoshop か何かを使って、背景の壁紙を .bmp ファイルで用意し、mPrint フォルダー下の〘base〙フォルダーにコピーしておき、ツールボタン【BASE】で表示した画面でファイルを指定すればよい。
  6. QRコードの作成は、ツールバーの【QRコードアイコン】をクリックすると出てくる下のような画面の文字列に、ブログの URL およびLive365 サイトに開局している Web Radio の Radio Senboku のURL を入力して、〘OK〙ボタンをクリックするだけでよかった。QRコードの大きさは、セルサイズを 02 x 02・・・05 x 05 の間で選べばよい。 meishi-8.JPG
  7. ツールバーの印刷設定ボタンをクリックすると印刷位置などの詳細が設定できる。私の場合、横書き名刺だから、A4 用紙を縦に使えば、10枚の名刺を印刷できる。印刷は、同じくツールバーの印刷ボタンをクリックすることでできる。
      マット紙に印刷すれば、普通の名刺と同じ感じになる。なお、私は印刷後ペーパーカッターで切りそろえているが、名刺四隅にマークを入れてくれているのでカッターで切りやすい。筆まめで作っていたときは、いつも鉛筆で目印をつけていたのだ。 meishi-9.JPG


 mPrint には、似顔絵や顔写真を貼り付ける機能もあるようだ。隠居にとっては、名刺を作るのも面白い作業だ。

2012年1月 3日

隠居のMT 備忘録:記事を日時指定してアップロードする

 年賀のブログを、1月1日の0時すぎにアップロードしたいと思い、【ブログ記事の編集】画面の右メニュウにある【公開ー公開状態】で、【未公開(原稿):公開:日時指定】と選択肢の中から 日時指定 を選択して、公開する日時を 2012-01-01 00:10:00 (2012年1月1日 0時10分)と設定した。これでうまくいくはずと思っていたが、元旦の未明にトイレに起きて確認すると公開ができていない。原因を探るのは後回しにして、とりあえずいつもの方法で公開した。

 上手く行かなかった原因をググッてみると、どうやら cron 設定をしなければならないということが分かった。cron 設定は、よく理解出来ないまま、アクセス解析サービス(Research Artisan Lite) を導入した時に、した覚えがある。
参照:隠居のパソコン備忘録:アクセス解析サービス(Research Artisan Lite) の導入について(続)
 このときは、Research Artisan Lite のインストール・マニュアルにお世話になり、分からない部分は開発者に質問を出して教えてもらった。
 今回も私の環境(レンタルサーバーは Xserver、ブログソフトは、Movable Type 4)も踏まえて【Xserver MT4 cron設定】のような言葉でネットサーチしてみると、【エックスサーバーでのMT(ムーバブルタイプ)自動投稿cronの設定方法】というページがヒットした。
 Xserver には、Cron 設定というサービスが提供されている。このサービスの中に、コマンドを入力する欄がある。このページに書かれているコマンド例は、次のようになっている。
コマンド:cd /home/【サーバーID】/【mtがインストールされているドメイン】/mt/; ./tools/run-periodic-tasks

この例示通りに、【サーバーID】/【mtがインストールされているドメイン】を入力しても上手くいかない。先のResearch Artisan Lite のインストールをしたときに設定したコマンドと比べてみると、私の場合 /mt/ へ至るパスが異なることがわかった。実際には、以下のように入力してみると、上手く動くことが分かった。
cd /home/【サーバーID】/【mtがインストールされているドメイン】/public_html/cgi/mt/; ./tools/run-periodic-tasks 

このように設定しておくと、今後は Xserver のインフォパネルを開いて日時の数字を変え、ブログ編集画面で日時指定を行えば、投稿日時を指定することができる。
試しに、この記事を2012年1月3日朝6時に、アップロードする指定にして見ることにした。

(追記:2012/1/3) 今朝確認すると、朝6時に公開されていた。あまり、公開日時を指定するような記事を書くことはないが、MT での技がひとつ増えたと思っている。

2011年12月11日

お詫び:Internal server error でアクセスができませんでした



12月9日8時ごろより、12月10日未明(3時頃)まで、Atelier , Studio_YAMAKO, Masajii's Blog へInternal server error でアクセスができなくなっていました。申し訳ありません。

 現在は回復しておりますが、原因を調査中です。

2011年10月 1日

隠居のMovable Type備忘録:ブログの記事に、MP3 Player を埋め込む 


 ブログの記事中に、小鳥のさえずりや虫の声などのMP3 ファイルを記載すると、小さな再生ボタンplay.JPGが表示されて、これをクリックすると音が聞こえてくるという JavaScript で作られた del.icio.us/js/playtagger を提供していたサービスページが閉じられてしまった。これは、URL のページHTML コードのどこかに(<head> 部分がリコメンドされているが)次のコードを挿入するだけでよかった。
<script type="text/javascript" src="http://del.icio.us/js/playtagger">
この playtagger という Javascript を運用してくれていたサイトが突如閉鎖したようでリンクが切れてしまった。非常に便利であったので残念である。
 それで、それに代るものをサーチしてみると【How to Embed MP3 Audio Files In Web Pages】というページがヒットした。
ここでは、Google と Yahoo! が提供するサービスが紹介されている。

Google Reader MP3 Player
 再生したい Mp3 ファイルを次のコードの中で指定すれば、ブログの中で MP3 が Windows Media Player などを介さずに再生される。
<embed type="application/x-shockwave-flash" flashvars="audioUrl=http://n-shuhei.net/xxxxxx/photo_insects/110923_tukutukuhousi.mp3" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="400" height="27" quality="best"></embed>

  sample


Yahoo! Media Player
次のコードを URL の<head> 部分にでも一行書き入れ、
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

ブログの文中に、次のように MP3 file を指定すれば良い。del.icio.us/js/playtagger と同じ方式である。ただし、再生ボタンをクリックすると、下のスクリーンショットのような再生画面が表示される。右端の縮小ボタンで折りたためるが。
<a href="http://n-shuhei.net/xxxxx/photo_insects/110923_tukutukuhousi.mp3">ツクツクボウシ</a>

  sample
ツクツクボウシ
Yahoo_player.JPG

 上記以外にも、カスタマイズすることのできる Flash player を作成できる【MP3 Player】というサイトも見つかった。上の Google Rader MP3 Player とここで紹介されている Mp3 Player も Flash を使っている。
flash-mp3-player.net
コード例
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_button.swf" width="200" height="20">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
    <param name="bgcolor" value="#0000ff" />
    <param name="FlashVars" value="mp3=http%3A//n-shuhei.net/xxxxxx/photo_insects/110923_tukutukuhousi.mp3" />
</object>

  sample

 Yahoo! の Javascript 方式を使えば、今までの記述を訂正しなくても良いので、これを使うことにした。Flash Player を使うとすべての MP3 file の記述を書き直す必要がある。Yahoo! なら、そう簡単に閉鎖をすることはあるまいと思っている。

関連エントリー
隠居のスマートフォン備忘録:(3)Xperia acro で音楽(mp3)を楽しむ

2011年4月18日

隠居のMovableType備忘録:MT5 で lightbox2.05 を動かしてみる 

 限定メンバー用に、新しいサイトを MovableType5(MT5) で作成してみることにした。MT5 は基本的には、MT4 と変わらない。MT5 では、ブログだけでなくウェブページも管理しやすくなっているらしい。早速、【基本からしっかりわかる Movable Type 5】という参考書を購入して、これに倣ってトライしてみた。

 この本の Chapter 2 【Movable Type 5 のインストール】に書かれている通りに行うと、問題なくインストールできた。ただ、レンタル・サーバー(私の場合、xserver )で用意してくれているデータベースMysql はバージョン4から5に上げる必要がある。ここでの注意点は、3月27日の【隠居のMovableType:データベースをMySQL4 から MySQL5 へ】で記録した。

 MT4 で愛用している サムネイル画像をクリックするとWebブラウザ画面上に拡大画像を背景をフェードアウトして表示するためのプラグインである Lightbox を、MT5 でも使いたかったのでインストールした。少々のカスタマイズもしたので備忘録として記録しておきたい。
  • MT4 では、lightbox2.04 はうまく動作しなかったのでlightbox2.03 を使っている。開発元の Lokesh Dhakar のページに訪ねると、バージョンは 2.05 がこの3月18日にリリースされていた。これを導入するとすんなりと動いてくれた。
  • 導入の方法については、ググってみると最近は多くがヒットするが、前にもお世話になったページを参考に導入した。
  • そのページにもあるように、.css .js ファイルを MT5 のヘッダー部に挿入しなければならない。MT5 でも MT4 と同じように、各ブログのモジュールテンプレートの【ヘッダー】の </head> 直前に挿入した。
    <!-- lightbox2.05 -->
    <link rel="stylesheet" href="http://xxxxxxxxx.net/home/lightbox205/css/lightbox.css
    " type="text/css" media="screen" />
    <script src="http://xxxxxxxxx.net/home/lightbox205/js/prototype.js" type="text/javascript"></script>
    <script src="http://xxxxxxxxx.net/home/lightbox205/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    <script src="http://xxxxxxxxx.net/home/lightbox205/js/lightbox.js" type="text/javascript"></script>

  • カスタマイズのひとつは、グループ表示するときに、拡大画像に表示される【PREV】【NEXT】【CLOSE X】ボタンを自分でデザインした に変更したことである。
     変えるのは、自分でデザインしたボタンを、lightbox2.05 の images フォルダーにある prevlabel.gif nextlabel.gif close.gif をファイル名をそのまま直接置き換えることでできる。
  •  MT で画像をアップロードする場合に Lightbox 使うためには、MT で生成されるコードに、title="" rel="lightbox[]" を挿入しなければならない。これをそのたびに挿入するのは面倒なので、MT の /cgi/mt/lib/MT/Asset フォルダーにある Image.pm ソース・プログラムの320行目あたりにある行を、青字のように変えた。これは、MT4 で実施した方法でうまくいった。これが、カスタマイズの2つ目である。
    # '<a href="%s"><img alt="%s" src="%s" %s %s /></a>',
    '<a href="%s" title="" rel="lightbox[]"><img alt="%s" src="%s" %s %s /></a>'

  • 背景色を変えるなどその他の細かいカスタマイズは、以下のページを参考にさせてもらった。


 

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年10月14日

隠居のパソコン備忘録:Xserver での FFFTP の使い方

 レンタルサーバー(私の場合、Xserver) に、ブログからリンクしているHTMLで作成したGoogle Maps API の地図ページや音楽ファイルなどをアップロードするには、ファイル転送ソフト FFFTP を使っている。最近になって突如サーバー側のフォルダー・ファイルが表示されなくなった。
 FFFTP が何かの拍子に具合が悪くなったと思って、FFFTP を再インストールしようとFFFTP のサイトを訪ねてみると、 FFFTP のセキュリティ度を高めるためにFTP 制限設定をしたほうがいいとリコメンドされていた。
 FFFTP をXsrver が用意しているマニュアル通り再インストールし FTP 制限設定してみたが、やはり、サーバー側のフォルダー・ファイルが表示されない。
Xserver に質問メールをだすと、次のような回答があった。
確認を行わせて頂きましたところ、現在許可IPに設定されているIPは、お知らせ頂きましたIPとは異なるものでございました。
お手数ではございますが、再度「■サーバーアカウント共通設定」と「■ドメイン設定」の箇所へと、「119.230.xx.xx」をご設定いただき、FTP接続をお試しいただけますでしょうか。


この接続を許可する IP と入力するところがよくわからなかった。いろいろと探ってみると、【Xserver パネル】⇒【FTP制限設定】⇒■サーバーアカウント共通設定にある接続許可IPに、【 FTP接続許可IPの追加】のページに表示されている【※お客様の現在のIPアドレスは「 119.230.xx.xx 」です。】のIPアドレスを入力すればよいことが分かった。
私が接続している ISP がXserver に接続しているグローバルIP が、ときどき変更になるためらしい。変更後のアドレスは、Xserver の上のページに表示される。
 また接続されなくなった時のために、備忘録として書いておきたい。歳をとって、忘却が激しい。
(追記:2011/8/20):入力する IPアドレスの後ろにブランクが入らないように、注意しなければならない。

2010年7月 9日

Web Radio Senboku:Bebop 特集を世界の人が聴いている

 5月の下旬ごろに、Live365 のサイトで開局しているRadio Senboku で流している Jazz の特集を Vocal から Bebop に変更した。
 Vocal 特集では、日本からのリスナーがつないでいる時間がもっとも多かったが、bebop 特集に変えてから、USA からのアクセス時間が多くなった。
 Wikipedia によれば、2006年10月現在、Live365 のサイトにはおよそ 6500 の放送局があるという。現在も、どうもそのぐらいの局数らしい。
 この Live365 には、cllasical, country, rock などの26 ジャンルが網羅されている。私が運営しているRadio Senboku は、Jazz のジャンルに配置している。Jazz のジャンルに属している stations は、395(7/9/2010現在) ある。
 その中で、Radio Senboku は、上位50位に入るようになり、全体では1900位以内となった。

;クリックすると大きな写真になります

 全世界の29ケ国からの国別アクセス時間(URLをあわせてつないでいる時間)をみると United States がリスナーは少ないが、日本からのアクセス時間に比べると倍以上である。どうやら、私のようにPC に向かっている時のBGM として流しているではないかと思われる。bebop というような少しマニアックなジャンルでは、やはり本場のアメリカのほうがファンが多いのかもしれない。

国別アクセス時間ランク(過去1ヶ月:2010/7/7現在)
Live365_1.JPG

 現在、Radio Senboku で流している曲のリストは、右メニューの【Radio Senboku Playlist】をクリックすると得られる。

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 を導入している。この解析結果ログをうまく処理すれば、アクセスカウンターを表示できるはずであるが、これを実施するには相当な学習とそのための時間が必要である。古希が近づいた老人にはいささか辛い。

2010年6月24日

隠居のGoogle Maps API: データ用XML ファイルの編集

 友人や私が旅行に行ったところなどをプロットする地図を、Google Maps API を使って作成しブログに埋め込んでいる。
 作成する自分用の地図はいろいろとあるが、プロットする地点が少しずつ増えていく旅行地図--例えば、Studio YAMAKO 【国内旅行:2009】などでは、本体の Javascript はいじらずに、行った地点の経度・緯度などのデータを XML ファイルに追加して呼び込んでいる。

 ところがいつも使っているエディタの【秀丸】できちんと XML の文法に則ってファイルを作成しているはずなのに、Google Maps API が読み込んでくれない。原因を乏しい知識のなかでググって見たが、なかなか解決策が見当たらないまま1週間くらいが過ぎてしまった。ひょんなことから、完全な解決ではないが、原因がわかったので、この間に学習したことを備忘録として記録しておきたい。

 XML fileにエラーがある場合、Internet Explorer でこのファイルを開く(フォルダー⇒該当ファイルを右クリック⇒プログラムから開くで出るセレクトボックスから、Internet Explorer を指定する)と、次のようなメッセージがでて開けない。
Internet Explorer
XML_01.JPG
  Google Chromeでは、次のようなメッセージが出る。
Google Chrome
XML_02.JPG

ここで出てくるライン( line) とは、開始タグと終了タグで囲まれたテキストが行を表していると思われる。 それで推定すると、どうやら最後の行の外に、余計な何かが附加されているようである。

いつも使っているエディタの【秀丸】でXML fileを眺めつすがめつしてみたが、よくわからない。
【秀丸】XML_05.JPG
この表示の最後にある [EOF] は、End Of File のことであり、【秀丸】特有のものである。後で分かったことだが、この[EOF] が問題であった。

XML の文法が正しいかどうかは、W3CSchool のXML のセクションにある validator で確認できる。 この validator で【秀丸】で表示されるコードを確認すると no error と表示される。

XML file の中身は、Notepad でも確認できる。IE でエラーとなった XML file をNotepad で開いてみると、下のように【秀丸】の [EOF]部分が黒い四角形の文字となっている。Notepad で、この黒い四角形の文字を削除して保存して、IE で実行してみるとエラーは起こらない。
Notepad XML_07.JPG


 再度、"秀丸 EOF"でググってみると、【秀丸】への理解が十分でなかったことが判明した。【秀丸】の設定で、 [EOF] を保存しない、読み込むときに EOF制御文字を無視するとすると(【秀丸】で「その他」⇒「ファイルタイプ別の設定」⇒「保存の対象」「その他」「保存読み込み」で設定できる)、IE での展開でエラーは起こらなくなった。

 これらを調査するなかで、XML エディタとして【XML Notepad 2007】というユティリティがあることが分かった。今まで、XML file のエディタとしては便宜的に【秀丸】を使ってきたが、これが問題であった。まだ十分に理解出来ているとはいえないが、XML に特化した【XML Notepad 2007】を使うと下のスクリーンショットで分かるように非常に簡便となる。
 今後は、Google Maps API で使うXML file の作成は、このユティリティを使っていくつもりである。
【XML Notepad 2007】
XML_04.JPG