2017年1月 6日

隠居のブログ:XServerでMovable Typeの日時指定投稿を設定する方法(備忘録)

MT4 で投稿日時指定をするときに、いつも「どのようにするんだっけ」と手さぐりになるので、手順を備忘録として残しておきたい。
  1. レンタル・サーバー Xserver のCon設定画面を開ける。(Xserver へのログインは、サーバーパネルからである)
  2. MT自動投稿とコメントしているコマンドはそのままで、日時を変更する。
    投稿月日を例えば、1月1日1時5分と指定したい時は、以下のように行う。曜日は、月曜が1で土曜日が6だが、日曜日は、0か7である。しかし、*印を入力すれば、何曜日でもOKである。

    cron01.JPG

  3. コマンドについては、以下のようなページを参考にしたようであるが、変更は不要である。
    XServerでMovable Typeの日時指定投稿を設定する方法

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

2016年7月15日

隠居のパソコン備忘録:全ブログ記事リストを表示する

私と同じサイトでブログ投稿を続けている YAMAKOさんから、今まで投稿したブログ記事のタイトル一覧 があれば便利ではないかとの提案があった。
 このようなときには、このサイトのブログを立ち上げるのに導入した MovableType を Version3 から Version4 にアップグレードした時に採用した「小粋空間」さんのテンプレート一式を老人のわずかばかりの知識を総動員して、エキスパートのコードをコピペするなどして対応してきた。
 今回も、いつもの様にネットで解決策を求めたが、うまくヒットしない。ようやく 「小粋空間」さんのサイトで、「ブログ記事に同一カテゴリーのブログ記事リストを表示(MT4版)」というページを探し当てた。ここに示されているコードをコピペしょうとしたが、どのテンプレートに挿入するかの記載はない。試行錯誤で、テンプレート・モジュールである「サイドバー」のここではないかと思われる個所に挿入すると、メインに表示している記事を分類したカテゴリーと同じカテゴリーを持つ記事タイトル一覧が、サイドバーに表示された。

 だが、どうもすっきりしない。いろいろなブログサイトを見ても、過去記事の一覧を簡単に見るページはたくさんある。
 いろいろと試行錯誤してみると、私のサイト環境で望む表示を実現できる方法が分かったので、老人の備忘録として記録しておきたい。

 方法は意外に簡単なことであった。私のサイトでも、最新の10投稿リストを表示するボタンがあった。(現在は、「過去記事タイトルリスト」に置き換えている) これを表示するコードは、次のようになっていた。


<!-- 最新の10投稿  -->
<div class="sidetitle2" id="entryname">
 最新の10投稿
</div>

<div class="side" id="entrylist">
<MTEntries lastn="10">

<MTDateHeader><ul><$MTEntryDate format="%y/%m/%d"$>
</MTDateHeader>
<li><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a></li>
<MTDateFooter>
</ul>
</MTDateFooter>
</MTEntries>
</div>

<script type="text/javascript">
<!--
FoldNavigation('entry','off',false);
//-->
</script>
<script type=\"text/javascript">
<!--
generateNormalTree("entrylist");
//-->
</script>

 このコードの青字部分 lastn="10" は、参考書などによると出力する記事の件数を制限するモディファイア(HTML でいう属性)である。これが、表示する件数に関係していると思われたので、10 から 0 に変えてみると、見事に、この11年間に投稿した全記事のリストが表示された。
 (上のコードで使用されている JavaScript は、小粋空間さんが作成された「Movable Type サイドバー・メニューの折りたたみ」を応用したものである。)

 乏しい知識で、これを応用してサイドバーのテンプレートなどの表示部分をいじってみた。これによって、投稿全記事リストを表示することができるようになり、おまけに副産物があることが分かった。
 副産物は、理屈はよく分かっていないのだが、サイドバーの「Category」ボタンをクリックすると展開されるカテゴリーの一つ(サブカテゴリーを含めて)を選択すると、そのカテゴリーに該当する過去記事のすべてのタイトルリストが、「過去記事タイトルリスト」ボタンをクリックすることで表示されることであった。
今までは、左メイン枠に、該当する記事の最新の10記事(表示するブログ記事の数は、ブログ管理画面ー設定ーブログ記事設定ーブログ記事の表示数 で増減できる)全文が表示されるだけであったので、修正によってタイトルを見て古い過去の記事全文を表示できるようになったので大変便利となった。
 要するに、Movable Type 固有のファンクション・タグなどが十分に理解できていないことが、色々の対応を困難にしている原因であるが、もうこの歳になっての学習は困難となっている。痴呆予防には、助けになるかもしれないが。

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 のインストールについては、別のエントリーで記録しておきたいと思う。

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年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月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年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年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年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年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年4月17日

隠居のパソコン備忘録:アクセス解析サービス(Research Artisan Lite) の導入について(続)

 フリーのアクセス解析サービスResearch Artisan(RA) が5月の下旬で終了になること、「リサーチアルチザンライト(Research Artisan Lite) (RAL)」というソフトがオープンソースとして提供されており、それの導入に挑戦をしてみたことを前回のエントリーで書いた。

 RAのサービスで便利だったのは「メール送信」というサービスである。前日または前月あるいは選択した期間でのアクセス内容をメールで知らせてくれるサービスである。RALでも、「メール送信」を設定することができることになっている。インストール画面に、設定画面があるので、これに従えばよくて、Outlook などのメールボックス設定が自分でできる人では、それほど難しくはない。ただ、これだけでは手動で「メール送信」ができるだけである。

 例えば、毎日、前日のアクセスを翌日に定期的にメール配信する設定は、RAの場合のように簡単ではない。自動的にプログラムを実行する仕組みの cron というものを設定しなければならない。今までにやったことはない。設定の方法については、インストール・マニュアルにあるが、Web 関連の言語をある程度知っている方を対象にしてあるので、なかなか理解が難しい。この cron は、PHP というスクリプトで書くのであるが、PHP というのも Movable Type のエントリーは拡張子は php となっているがよく分かっていない。
 cron の設定は、レンタルサーバーの XSERVER に用意されている。ここでマニュアル通り設定してみたが、うまくいかない。幸い、サポート・フォーラムという掲示板があり、ここに質問を出すと、管理人の ossi さんという方がど素人の老人に丁寧に答えてくれた。私の借りているサーバー XSRVER では、PHP のバージョンが、php5 でないと駄目らしい。まず、インストールガイドの該当部分を以下のように変えた。XSERVER ではドメイン毎に PHP のバージョンを変えることができるが、これだけでは上手くいかない。
 /user/bin/php  → /user/bin/php5

 だが、エラーメッセージは出なくなったが、手動では届いているメールが、自動(cron)設定では「サイトアクセス状況」のメールが届かない。その原因は、ossi さんによれば、データベースのMySQL に、メール設定を保存するテーブル(ra_mail)にデータが保存されていないではないか(id=1で、メールアドレスのfromとto、smtpサーバーとポート番号が正しく登録されているかどうか)ということだ。指示のあったMySQL の中味を確認するソフト phpmyadmin で確認するとid の数字がおかしかった。( id の意味がよく分かっていないが)リセットの方法がよく分からなかったので、作成したばかりのデータベースを削除し、初めから作りかえた。これで、指定した時間に「サイトアクセス状況」のメールが配信されるようになった。

 この cron設定は、RAL では1週間毎の指定ができるので、これに切り替えようと思っている。5月28日までは、RARAL の二本立てがができるので、RA がなくなるまで、実験的に続けたいと思う。

 

2010年4月11日

隠居のパソコン備忘録:アクセス解析サービス(Research Artisan) の停止について


 私のサイトに訪問してくれる方々のページ毎の訪問者数やそれらの方々が使われている OS やブラウザーなどの% が分かるフリーのアクセス解析サービスResearch Artisan が、下のように5月の下旬で終了になる。Movable Type で作成しているブログを維持していく上で重宝していたので、非常に残念である。

100410_1.jpg なぜ中止するかの詳細な説明を読むと、収益がでる望みがないというのが理由らしい。
 だが、「リサーチアルチザンライト(Research Artisan Lite) 」というソフトが、2009年9月よりオープンソースとして提供されているらしい。私のような初心者ができるかどうか分からないが、インストールに挑戦してみることにした。幸い、Research Artisan Lite が使えるレンタルサーバーには、私がブログ・サイトをおいている XSERVER が、快適に動作することになっている。早速、Version 1.14 をダウンロードした。

 インストールの手順は、Research Artisan Lite - インストールマニュアルに詳しいが、私がつまづいたところを含めて備忘録的に記録しておきたい。なお、この記録は次のようなブログ環境で行った作業の備忘録である。
  • ブログ:MovableType4.1ja 同じドメインで3つのサイト(ブログ)を運営している
  • レンタルサーバー: XSERVER
  • Database: MySQL 
  • FTPソフト:FFFTP

100410_2.jpg
  1. ダウンロードした圧縮ファイルを解凍する。解凍すると右のフォルダー構成になる。
  2. この public_html の下にある ra フォルダーを 私の場合別々に解析したいサイトが3つあるので、ra_atelier, ra_masajii, ra_yamako というように、それぞれ別のフォルダーを設定した。
     FTP ソフト(私の場合:FFTP) を使って、サイトの root (私の場合:/user/public_html )にそれぞれをアップロードした。
  3. 同じように、ra_core フォルダーも root にアップロードした。このフォルダーは共通に使える。
  4. インストール時にシステムに必要な定義ファイルを自動で作成する(書き込みをする)ために、ra_xxxxx フォルダーの下にある setting フォルダーのパーミッション(属性)を 777 に変更する必要がある。インストール後は元に戻すことになっている。戻していなければ、後に Research Artisan にログインしたときに警告メッセージが表示される。なお、XSERVER では、属性を 555 に変更しないと警告は消えない。
  5. 同じように、/xxxxxxx/public_html/ra_core/application/tmp の下にある logs フォルダーのパーミッションも 777 に変更する。これは、元に戻さない。
    これで、サーバーへ Research Artisan Lite ソフトのアップロードは終わりである。
  6. 次に、Research Artisan Lite のデータベース(MySQL)を設定する。私の場合、XSERVERに設定手順があるので、それに従い、それぞれのサイト分の3つのデータベースを追加した。実のところ、サーバーにログインして、いろいろな設定を変更することはほとんどないので、このあたりがもっとも手間取る作業であった。
  7. ここまでの設定が完了すると、http://xxxxxxxxx/ra_xxxxxx/analyze/index.php というURL が設定され、それにアクセスするとインストール画面 が現れる。
     インストール後でに同じURL にアクセスすると解析サービスの画面がでて、初期のインストール画面とはならない。もし、最初からやり直す場合は、 ra_xxxxxx/setting フォルダーに作成されている install_complete (中味は空)というファイルを削除する必要がある。
  8. インストールの初期の画面では、データベース接続設定を行う。ここでよく分からなかったのはホスト名である。それぞれ以下のように設定した。
    ホスト名:localhostDefault のままでよい
    ユーザー名:xxxxxxxxx_xxxxMTのデータベース作成時に作ったユーザー名を使用
    パスワード:xxxxxxxx上のユーザ名のパスワード
    データベース名:xxxxxxx_xxxxxxxXSERVER の命名規則による
    プレフィックス:ra_Default ままでよい
  9. 上の登録が上手くいくと、解析するサイト名とURL、ログイン用のパスワードの登録画面が現れる。
    サイト名: 例えば、Atelier Shuhei どんな名前でもよい。
    URL:例えば、http://n-shuhei.net/atelier/解析タグを置くURL
    パスワード:xxxxxxx解析サービス画面にログインするPW
  10. これで上手く設定できるとページが変わって、次のような解析用タグ(HTMLコード)が表示される。携帯サイト用のタグなども表示される。
    <script type="text/javascript" src="http://n-shuhei.net/ra_atelier/script.php"></script>
    <noscript><p><img src="http://n-shuhei.net/ra_atelier/track.php" alt="" width="1" height="1" /></p></noscript>

  11.  MovableType の管理画面を開き、このそれぞれの解析用タグを各サイトのモジュール・テンプレート 「ヘッダー」の該当部分(従来のリサーチ・アルチザンのためのタグ(コード)を置いていた場所)に貼り付け保存する。
  12.  さきほどの解析用タグが表示されているページの下の方にある「ログイン」をクリックすると、アクセス解析表示画面を表示するためのパスワードが要求される。パスワードを入力すると今までとほぼ同じの解析サービス画面が現れれば、成功である。


 貼り付ける解析用タグを前のタグと相違点を見ると、今まではresearch-artisan.com が預かってくれていたログ・データなどをユーザのサーバーに移したように見える。それ以外にも相違点はあるだろうが、私の知識ではよく分からない。
 従来のサービスで提供されていた「ランキング用タグ」は、なくなっているようだ。ブログ・ページに昨日のページ別アクセス・ランキング ベスト10を表示していたが、終了後はできなくなる。
 上の作業で稼働することは確認したが、終了日時が迫ってから、切り替えようと思っている。

2010年3月21日

隠居のMT備忘録:Lightbox のカスタマイズ

Internet Explorer 8(IE8:WindowsXP)に変えてから、私が管理しているブログのうち2つのブログ(Atelier Shuhei Weblog と Studio YAMAKO) メインページで lightboxの不具合が起こった。背景が黒くならない。個別ページでは、正常に表示されている。ただ、管理している3つのブログの一つ、Masjii's Blog では上手く機能している。
今まで学習したことを調べたり、ネットでサーチしてみても原因がわからない。両者のソースコードやStylesheet を1ヶ月以上かけて仔細に調べてみたが、全く解決の糸口が見つからなかった。

 先日、Atelier Shuhei Weblog をIE8 のWindows画面を開けようとすると、次のようなエラーメッセージのポップアップ画面が出て停止した。
HTML Parsing Error: Unable to modify the parent container element before the child element is closed

 このエラーについて調べると、どうやら DOM という API に関連しているらしい。DOM については全く知識がないが、どうやらプログラムとくに JavaScript の実行順序が起因しているように思われた。
そこから類推して、Atelier Shuhei Weblog Studio YAMAKOのメインページには、JavaScript を多用した Lightbox で開く写真が沢山あるので時間がかかるのではないか、それが原因ではないかと思われた。Masjii's Blog には、写真はあまりなくテキストが中心である。

 そこで、MovableType4.2 の「ブログ記事の設定」で、表示数を 30 から 10 に変更すると、写真の背景は黒くなり正常に表示されるようになった。Masjii's Blog はもともと10 ブログ記事だけの表示になっていた。メインページの表示が10 件だけでも問題は余りないと思われる。

 懸案の問題が解消したので、解決策をネットでサーチしている中で見つけた lightbox のカスタマイズを参考にいじってみた。以前にも、画面を「閉じる」「Next」「Back」ボタンをカスタマイズしている。
 今回は、写真の台紙を従来の白から薄緑色に(それに伴って、キャプチャーの文字を白に)、背景の overlay を黒一色から模様入りの壁紙風に変えてみた。 Studio YAMAKOの背景は、蝶の柄が入った壁紙にしてみた。私のは青空である。
 三つを並べてみたい。
sample1:Atelier Shuhei Weblog sample2:Masajii's weblogsample3:Studio Yamako

2009年12月23日

隠居のMT備忘録:Google Account でコメント認証する

 Movable Type(MT)の最新バージョンは、MT5 になっている。バージョンアップに伴う煩雑さにかまけて、まだMT4.1 のまま使っている。今のところ、特段の支障はないし、MT4.25 にすると写真を拡大表示するのに多用している lightbox 2.0 が上手く動かないというトラブルも報告されている。

 私と同じように、MT を使ってブログを運営されている友人のエントリーにコメントを入れようとすると認証画面が変わっていて、Google Account でサインインできるようになっている。友人のMT は私よりバージョンは低い。何か新しいプラグインを導入したかと、それこそコメントで聞いてみたが、どうもそうではないようだ。

 ネットで調べてみると、MT4.25 になって標準で、Google 認証や mixi 認証などができる選択肢が増えているらしいが、それ以下のバージョンで動く特別なプラグインはないようだ。
 それで、私のMT4.1 でのブログでコメント認証の動きを再度調べてみると、なんと私のサイトでも、TypeKey でサインインしようとすると、screenshot のように友人と同じ認証画面がでてくることがわかった。


 これは、どうやら TypeKey の認証サービスが、TypePad Connect というコメントサービスに進化したためらしい。 TypeKey でサインインしようとするときに、http://www.typepad.com/services/signin というページにつながり、そこでいろいろな認証サービスを受けらられる仕組みがされているのである。

 このポップアップ画面のセレクトボックスで、Google を選択すると、下のように Google メールアドレスでサインインできる。これなら、コメント用だけのID を入力しなくていいので楽である。私はよく知らないが、Yahoo! や MIXI など他のID も選択できるようになっている。
 もちろん、今まで使っていた TypeKey の ID でもサインインできる。
なお、CTL キーを押しながら「サインイン」をクリックすると別のWindowタブでコメントすることができる。
GoogleAccountでの認証画面
 クラウド・コンピューティングというのであろうか、ネットのサーバー側でいろいろと処理してくれるのはいいが、知らない間に処理法が変わってくると、古い頭ではなんとなく危なっかしい気持ちになる。  

2008年11月10日

隠居のブログ備忘録:MovableType4.1 での Captcha 設定

 スパム・コメント対策のために、MovableType(MT)3.3 の時には Scode というランダムに発生させた6桁の数字をいれないとコメントできない仕様にしていた。
 MT4.1 にバージョンアップして、この Scode プラグインが使えなくなった。MT4 以降になって、Captcha がデフォールトで取り入れられたためかもしれない。

 しかし、これを機能させるためには、サーバーに Image::Magic という CGI スクリプトがインストールされている必要がある。私がブログを置いているレンタル・サーバー Xserver には当初見あたらなかったので、他のプラグイン(reCaptcha)を試してみたが上手くいかなかった。仕方なく、MovableType か TypeKey に登録してもらうことを推奨して認証できる方のみがコメントできるようにしていた。

 最近になって、ブログにあまり詳しくない友人からコメントをいただくことがでてきたので、再度MovableType 既定の Cpatcha の利用を調べてみると、Xserver に Image::Magic がインストールされていることが判明した。MT4 のガイドに従って、Captcha を active にしてみるとすんなりと機能するようになったので、手順について備忘録として記録しておきたい。

  1. 環境:Windows XP, Vista
       MovableType 4.1
       レンタル・サーバー:Xserver
       テンプレート・セット:「小粋空間」
  2. http://userdomain/cgi/mt/mt-check.cgi で、 Image::Magic がインストールされていることを確認する。
    「確認中: オプションモジュール」の項に「サーバーに Image::Magick がインストールされています(バージョン 6.0.7)。」とある。
  3. クリックすると大きくなりますNinsho_1.jpgMovableType 4 のドキュメント「コメントに CAPTCHA 認証を利用する」のガイドに従って、「ブログの設定: 登録 / 認証設定」を行う。
     右のスクリーンショットのように、該当ブログ管理画面→設定→ブログの設定→登録/認証 で「認証なしコメントにチェック」、私の場合「メールアドレスを要求」にもチェックをいれた。
    なお、MovableType または TypeKey の認証はそのままコメントが表示されるようにしている。
  4. 同じブログの設定→コメント で「コメントポリシー」→「即時公開する条件」 で「認証サービスで認証されたコメント投稿者のみ」にチェックをいれ、「表示オプション」→「CAPTCHAプロバイダ」 で「MovableType 既定」を選択している。
  5. 「テンプレートモジュール」の「コメント入力フォーム」でコメントをいただくときの注意事項をいささかくどいと思ったが、挿入した。


 MT4.1 での CAPTCHA の設定は、以上のように非常に簡単である。ネットサーチをしてみると MT4.0 ではいろいろとトラブルがあったようであるが、MT 4.1 では解消されている。先人に感謝しなければならない。

  

2008年11月 3日

隠居、MovieMaker でデジカメ AVI ファイルを編集してブログに載せてみる

 最近手にいれた Canon IXY900IS は、このごろのコンデジには普通になっている動画が撮れる機能がついている。この機能を使って簡単な動画を編集し、ブログMT4.1 にエントリーしたので記録として残しておきたい。

 メタボ管理のために最近始めた早朝ウォーキングはただ歩くだけではつまらないので、このコンデジを小さなウエストポーチに入れていき、新しい発見を記録することにした。
 泉北ニュータウンに30年以上住んでいるのに東西南北がいまだによくわからないが、自宅を中心にして、往復1時間~2時間、歩数計にして 6,000--10,000 歩ほど、なるべく車が走らない道を選んで歩くと、今まで気づかなかった新しい発見が待っている。

 川がそちらの方向に流れているので、阪神間で育った人間にはとても北とはおもえないが、今まであまり歩いたことのない北部を歩いてみることにした。ニュータウンができる前からの地元で、小さな田畑や建設会社の資材置き場や工場などが散在しているゴミゴミしているところという印象であった。それに比べれば、ニュータウンは公園・緑道が整備され草刈りや樹木の剪定など税金が沢山使われている。ちょっと本題から離れた。

 この泉北ニュータウンの北部地域には、昔からのため池がたくさんあるようだ。その中でも大きな「小田之池」に農家(?)の間の細い道を辿っていくと、なんと水鳥が群れている。 動画を試してみることにした。Canon IXY900IS を取り出し、モードダイヤルを動画に設定して、池の中央あたりに群れている水鳥にズームした。コンデジの動画撮影は、ほとんどがカメラ任せである。

 自宅PCで、動画ファイルの拡張子を確認すると AVI ファイルになっている。写真(jpg ファイル)のPCへの取り込みは、カメラ購入時に付属しているソフトは使わずに、Google の Picasa でしているが、 AVI ファイルを取り込む機能はない。そこで、「マイコンピュータ」でフォルダー表示を行い、USB接続でつないだカメラのフォルダーに表示される AVI ファイルをPC のディスクにコピーして取り込んだ。
 avi ファイルは、Windows Media Player で再生できる。ただ単純にこのファイルをブログにUPするだけではつまらないので、タイトルをつけるなどの編集をすることにした。

 「 AVI ファイルの編集」でググッて見るとたくさんヒットするが、検索結果の一番に表示される "動画編集 ソフト - k本的に無料ソフト・フリーソフト"に多くの動画ファイル編集ソフトが紹介されている。そのなかの、WindowsXP に付属するMicrosoft の「Windows ムービー メーカー」で編集することにした。この MovieMaker というソフトは、Program Files → Movie Maker フォルダーの中にある moviemk.exe を実行すれば起動できる。

 先のエントリーにも紹介した題材をもとに左のような動画を作成した経験をメモしておきたい。初めての経験なので、多分もっと良い方法があったり多彩な編集ができたりすると思うが、今後経験を積んでいけば書き加えていきたい。
 画像をクリックするとWindows Media Player が立ちあがり、ファイルがダウンロードされるはずである。ファイルは 10MB ほどあるのでダウンロードに少し時間がかかる。
 これを再生するには、Windows Media Player の「ツール」→「オプション」→「ファイルの種類」で、Windows Media ビデオファイル(wmv) にチェックが入っている必要がある。
クリックすると大きくなります
  1. moviemk.exe を実行すると右の screenshot のような画面になるので、ツールアイコンの「作業」をon状態にする。画面の下部の作業ウインドウのツールバーの右端が「ストーリーボードの表示」となっておれば、それをクリックすすると screenshot のような画面になる。この画面の上部は、新しいビデオを編集するための素材を提供し、下部はそれらを利用して新しいビデオを作成する画面と考えると分かりやすい。
  2. 上部3分割画面の左欄「ムービー作業」の 「1.ビデオの取り込み」 「ビデオの読み込み」 をクリックすると読み込むファイルを指定するポップアップ画面がでるので、デジカメからコピーしたAVI ファイルを指定し、「読み込み」ボタンを押す。読み込んだファイルは、中央の作業画面に表示される。異なるファイルを異なるフォルダーから読み込むと新しい画面に表示され、個々に異なる「コレクション」ファイルとして保存される。コレクションとは編集するためのライブラリーと考えればいいだろう。上部ツールアイコンの「コレクション」をクリックすると上部3分割画面の左欄に表示される。コレクションのひとつをクリックすれば、それに付随するファイルが上部3分割画面の中央部に表示される。なお、読み込んだファイルは「クリップ」と呼ばれる。
  3. クリックすると大きな写真になります
  4. 撮影してきたAVI ファイル(クリップ)が長かったので、半分程度をトリミングして短くすることにした。
    トリミングを行うには、作業ウインドウのツールバーの右端アイコン「タイムラインの表示」をクリックする。表示は「ストーリーボードの表示」となる。
    コレクションからトリミングするファイルを選択し、作業画面にドラッグする。
    トリミング部分はクリップの開始部分からか終了部分からかのどちらかからしか指定できない。screenshot のようなマークがでるので、トリミングする部分までドラッグする。中間をトリミングするには、はじめにクリップの分割が必要である。分割の方法については割愛するが、ヘルプを見れば分かる。
  5. クリックすると大きくなりますクリックすると大きくなります
  6. 次にクリップを連結した。クリップを連結するには、連結するクリップがあるコレクションを開き、連結するクリップを連結する位置にドラッグする。ドラッグするとストーリーボードは右の screenshot のように表示され、再生ボタンをクリックすると2つのクリップが連続して再生される。
  7. このままでは愛想がないので、タイトルや効果を入れることにした。
    1. クリックすると大きくなります画面上部のツールアイコンで「作業」を選択する。
    2. ムービー作業欄の「 2. ムービーの編集」→「タイトルまたはクレジットの作成」をクリックするとタイトルを入れる場所を聞いてくるので、この場合、「タイムラインで選択したクリップにタイトルを追加する」を選んだ。
    3. するとタイトルを入力する画面が現れるので、タイトルを入力する。
    4. クリックすると大きくなります
    5. 下の「詳細オプション」→「タイトル・アニメーションを変更する」をクリックするとタイトルの表示方法(アニメーション)やタイトルの字の大きさや色などを変更することができる。ここでは、アニメーションを変更で「新聞」を選んだ。「終了、タイトルをムービーに追加する」をクリックしてセーブするとクリップの頭に取り込まれる。アニメーション「新聞」では、字の大きさや色などを変更することはできないようだ。
    6. クリックすると大きくなります
    7. クリップのつなぎ目をすこし格好良くするには、下部のビデオ編集を「ストーリーボードの表示」にして、「作業」画面→「ムービーの編集」→「ビデオ切り替え効果の表示」をクリックすると出てくるビデオ切り替え効果から好みのものをクリップのつなぎ目にドラッグすればよい。



    8. クリックすると大きくなります
    9. 編集したムービーの最後に、撮影日・場所などを表示する画面(クレジットと言われる)を追加することができる。
      クレジットの作成は、ムービー作業欄の「 2. ムービーの編集」→「タイトルまたはクレジットの作成」をクリックすると出てくるポップアップ画面で、「ムービーの最後にクレジットを追加する。」を選択する。
      入力画面が出てくるので、表示したい情報を入力し、「終了、タイトルをムービーに追加する」をクリックしてセーブすればよい。
    10. クリックすると大きくなります
    11. BGM として何か音楽を流したい場合には、BGM にする曲(mp3でOK)を「ムービー作業」→「ビデオの取り込み」→「オーディオまたは音楽の読み込み」で表示されるポップアップ画面でファイルを指定し、「取り込み」をクリックすると、開いているコレクションに読み込まれる。
      このファイルをタイムライン画面にある「オーディオ/音楽」欄にドラッグすればよい。
      BGM とするファイルは、あらかじめ Sound Engine をつかって、ムービーの長さにトリミングしたり、フェードイン・フェードアウトをほどこしておいた。
  8. これらの作業は「プロジェクト」と呼ばれ、作業途中でも「ファイル」→「名前をつけてプロジェクトを保存」すれば、あとで続けることができる。
  9. 作成したムービーは、作業画面の「ムービーの完了」→「コンピュータに保存」でブログにアップできるファイルを保存できる。保存後のファイルの拡張子は、wmv となる。


 このエントリーを投稿するには、ずいぶん時間を要した。初めての経験を確認しながら、再度作業をし、screenshot などを用意したためである。
 このようにして記録しておかないと老人のぼけた頭ではすぐに再現できないし、記録にすることで復習することができる。

2008年10月12日

Hütte Hachi でのDIY:京壁塗りとミニデッキの作成

 パートナーと私は腕はかなり違うが、二人とも DIY が趣味である。DIY することには事欠かない山小屋Hütte Hachiでは、何か作業はしているが遊び感覚である。それでも、行き帰りのガソリン代や高速道の料金はかかるし、材料代も馬鹿にはならない。
 だから、孫のためにと大義名分のいいわけをしているのだが、家内は家を空けることには全く反対しないが、金をかけていろいろといじるのは「滅多に行かない」ことに投資?すると不評だ。今回の出費はDIY と食事の材料を合わせて、12,000円ほどだった。パートナーがいうように、1日3千円で遊ばしてもらった思えば安いものだ。

 パートナーが先週は材料不足で完成できなかった壁塗りを仕上げたいといってきたので、今回も一泊ででかけた。彼はまだ仕事をしているが、こちらはサンデー毎日である。医者にいくとか下手なゴルフに出かける以外は、いつでも OK だ。

クリックすると大きな写真になります このように技術を要するインテリア作業はパートナーの持ち分である。しっかりと養生をしてから塗っているので仕上がりが綺麗だ。腰や肩が痛いといいながら、休まずに続けている。
 昨秋、雨漏りの跡が残る天井をやり替えた和室の壁は35年前に建築した当時の安物の繊維壁だった。これに京壁(聚楽壁)に上塗りしようというのだ。材料の袋で成分をみると主成分は木粉である。トイレの壁の珪藻土塗り替えが上手くいったので、引き続いて左官作業がやりたくなったらしい。
 先週塗った壁は少し色が明るくなっているが、しっとりと落ち着いた色合いである。みすぼらしかった和室が見違えるようになった。

 パートナーが室内で作業を続けている間、私は先週やり残しになっていた入り口ポーチの塗装をした。プロにやり替えてもらった庇の木部に防腐用のオイルスティンを塗る作業である。マスキングテープなどの養生はしないから、脚立に昇って刷毛を動かすだけの作業である。私は、エクステリア作業が持ち分である。

 翌日、雨が予報されていたが、幸い小雨がパラついたりするくらいで陽が射したりする天気となったので、3年ほど前に基礎の杭(束柱)だけを立てて放ってあったミニウッドデッキ作りを再開することにした。基礎の枠(根太)を作るための材料は、そのときに購入して床下に置いていた。

クリックすると大きな写真になります 材料は、2X4, 6材やシンプソン金具・ボルトなどである。束柱の基礎は、穴を掘ってコンクリートを流し込んだもので、3年も経つと少し揺れている。作るデッキは、DIY するときの作業台ぐらいと考えているので、ぐらつくようであればあとで補修することにして、根太にする2X6材をシンプソン金具とボルトで取り付けた。水平器を使いながら作業であったが、水平を保つにはベニア板を小さく切ったようなスペーサーを挟むだけで、おおきなゆがみもなく根太を取り付けることができた。
クリックすると大きな写真になります 最終的にコースレッドで固定する前に、防腐用のオイルスティンを塗った。コースレッドやボルトで固定すると思っていた以上に強固にできあがった。
 ここまでできれば、あとは2X4材を買い求めてきて貼るだけである。木材はほとんど普通の2X4材だから、3~4 年は持ってくれればいいと思っている。


 この時期、小鳥のさえずりや虫の音は少ないが、作業をする周りには可憐な秋の野花が咲いている。花の名前をネットサーチしてみたが、野の花は沢山の種類があり判定が難しい。クリックすると大きな写真になりますクリックすると大きな写真になりますクリックすると大きな写真になりますクリックすると大きな写真になります






 (追記) 花の名前がわからない時には、K's Bookshelf 「この花の名は?掲示板」に投稿させてもらう。たいていは10分も立たないうちにどなたが教えてくれる。今回は、左端の花の名について、この掲示板の管理人である小林芳雄さん自らから早々に教えていただいた。ありがとうございました。
葉の形から「ママコノシリヌグイ」ではないかと思います。
下向きのトゲがあります。うっかり触ると、とても痛いです。
葉の付け根に茎を抱くような丸い葉(托葉といいます)があります。
「ミゾソバ」によく似ているのですが、葉は写真のような形です。比較ご検討をお願いいたします。


ハチ高原近辺私的観光地図に掲載 

  

2008年9月21日

隠居のMT備忘録:lightbox 2.0 の背景 overlay が黒くならない

 lightbox 2.0 の最新バージョン 2.04 の導入は失敗した。導入の手順を間違ったものと思うが、サイトそのものにアクセスできないという致命的な障害がでるので、すぐに元のバージョン 2.03 に戻した。

 そのときのドサクサにまぎれてテンプレートなどをいじったせいか、次の条件のときに、画像が現れるポップアップ画面の背景 overlay が黒くならないという現象がでた。
  • Windows XP SP2
  • Internet Explorer 7
  • MovableType 4.1 テンプレート:小粋空間:two-column-liquid-right メインページ
 アーカイブページやWindowsVista Mozilla(Firefox) では起こらない。
 上記は私の環境で、それ以外については確認していない。

 lightbox2.0 のページの support では、overlay については次の説明がある。

The shadow overlay doesn't stretch to cover full browser window.
Remove the default margin and padding from the body tag. Add body{ margin: 0; padding: 0; } to your stylesheet.

 スタイルシートでは、この設定は既に以下のようになっており、問題はなさそうである。
/* すべて */
* {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, sans-serif;
    word-break: normal;
    line-break: strict;
}


 ネットサーチもしてみたが、的確な示唆はヒットしなかった。見当はずれであるが、「小粋空間」さんの「Lightbox JS の Movable Type での不具合を修正する」のエントリーに、コメントとして質問を投げかけてみた。親切に以下のような返事をいただいたが、結局原因不明である。
>n_shuheiさん
こんばんは。ご返事遅くなってすいません。
事象は確認できましたが、現在のところ原因不明です。

もし何か分かりましたら別途エントリーしたいと思います。
それではよろしくお願い致します。


 アクセス解析サービスの Artisan の分析では、私のサイトへの訪問者は、WindowsXP IE6/7 でのアクセスが最も多いから、早く修復したいと思ったが方途がない。

 運営している友人の2つのブログのひとつを見ていると、なんと上の条件でも、lightbox で拡大画像表示されるポップアップ画像の背景overlay が黒くなっていることが分かった。いじっているうちに偶然うまくいっていたらしい。

 このブログも同じ小粋空間:two-column-liquid-right のテンプレートを使っているので、lightbox 表示に関連していると思われるテンプレートモジュールの「ヘッダー」を子細に見てみると、正常に表示されるブログのテンプレートの<div> タグを閉じる </div> タグがひとつ少ないことを見つけた。
 どうやら、テンプレートモジュールの「ヘッダー」で<div> タグを閉じる </div> タグを余計にひとつつけたことが原因らしく思われた。テンプレートの構成上テンプレートモジュールの「ヘッダー」の<div> タグのひとつは、テンプレートモジュールの「フッター」で閉じられることになっていたのだ。

 「ヘッダー」の余計な </div> タグを削除すると上手く背景overlay が黒くなった。原因は、まったくそのせいと思っていたが、再現性を確認するために、「ヘッダー」テンプレートに余計な </div> タグをつけても、背景overlay は黒くなる。再現性はないのだ。
 どうやら修復は不可逆性だったようで釈然としないのだが、うまく表示されるようになっているので、まあ、いいか という気分である。
 ブラウザーに依存する障害は、いつもよく分からない。

2008年9月 2日

野鳥の写真集を変更しました

 野鳥の写真サムネイルは、Kinarie&May さんの Flash MT用のフォトサムネイラーを使ってきた。このプラグインは、エントリーのカテゴリー(例えば birds )ごとに掲載されている写真をサムネイル化してくれる。

 非常に有用であるが、欠点は各エントリーに掲載されている1枚の写真かすべての写真を選択してサムネイルすることである。私のように、一つのエントリーにいろいろな写真をのせていると雑音の多い野鳥の写真サムネイルができてしまう。
 それとサムネイル化するファイルの拡張子は、小文字の jpg でなければなければならない。大文字の JPG ファイルも結構あり、修正するのは大変である。
 それで、DIY作品集のようにテーブルを利用して web page 作ることにした。

 ひとつづつのセルに写真ファイルを納めていくことは時間のかかる作業であるが、プラグインの lightbox が使えたり、録音したさえずりを再生するプレイ・ボタン を設置できたりするので自由度が高い。

 右サイドメニューに置いていた「野鳥の写真サムネイル」ボタンのリンク先を作った写真集へ付け替えた。興味のある方は、一度覗いてみてください。

 野鳥ばかり追っかけている人のブログなどに出てくる写真と比較すると余りにもお粗末であるが、それぞれの写真のリンクをたどるとその写真を撮ったTPO が分かるので懐かしい。 早い時期にデジスコの体制を整えて、もう少しましな写真集に撮りたいと思っている。 

2008年8月24日

隠居のBlog備忘録: MT4.1 で エントリー部分のみを印刷する

 友人から、ブログのヘッダー部分や右サイドメニューを外して、エントリー部分のみを印刷できないかの質問を受けた。確かに、ヘッダー部分や右サイドメニューが印刷されるのは少々うっとうしい。

 方法をググッテみるといつもテンプレートを使わせてもらっている「小粋空間」さんに、「印刷用スタイルシート」というカストマイズがあることが分かった。このカスタマイズは、印刷をするときには、スタイルシートを切り替える仕様になっている。MT4.1、「小粋空間」さんのテンプレート(layout-two-column-liquid-right )の私のブログ環境に導入してみたので備忘録として書き留めておきたい。
 
  1. 印刷用スタイルシート追加を追加する。
     管理画面のデザイン→テンプレート→インデックス・テンプレートの表示で「インデックステンプレートを作成」クリックして、以下のように新しいインデックス・テンプレートを作成する。
    • テンプレートの名前:ForPrinting(なんでもよい)
    • 出力ファイル名:print.css
    • 再構築オプション:チェックを外す
    • このテンプレートにリンクするファイル:(空白)
    • テンプレートの中身:スタイルシート(styles-site.css)の中身を丸ごとコピー
  2. 印刷用スタイルシートの修正
    コピーしたスタイルシートで本体のヘッド部分と右サイドメニューが印刷プレビューで表示されないように、該当スタイルのID属性、クラス属性をいじった。
     私の場合、具体的にはスタイルシートの次の項目を青字で書いた部分を付加した。
    #header 
        {
         /* padding: 15px;
        border-bottom: 1px solid #669;
        color: #999;
        background-image: url("http://n-huhei.net/Libraly/Image/Wood_ipe_01.gif");   
        background: #8fabbe; 
       text-align: left;     */
       display: none;
    }
    
    #links-left-box dl,
    #links-right-box dl {
      /*  margin: 0;
        padding: 0;   */
          display: none;
        }
    
    /* 2カラムリキッドレイアウト(右サイドバー) */
    .layout-two-column-liquid-right #content {
        /* margin: 0 250px 10px 0px;  */
        margin: 0 10px 0px;    
       /* border-bottom: 1px solid #669;
        border-right: 1px solid #669;
        background-color: #ffffff;  */
        border-style: none; 
    }

  3. テンプレートに link 要素追加
     次に、モジュールテンプレートの「ヘッダー」 <head> 部にあるスタイルシートを呼び出している部分を次の青字部分を追加した。
    実際には、この部分を先に付加しておいて、ブログのエントリーを表示し、ブラウザーのツールバー「ファイル」→「印刷プレビュー」で確認しながら print.css をいじる試行錯誤をした。
    
       <link rel="stylesheet" href="<$MTLink template="スタイルシート"$>" type="text/css" media="screen,tv" />
       <link rel="stylesheet" href="<$MTBlogURL$>print.css" type="text/css" media="print" />


  4. カスタマイズの結果
    ForPrintCSS.jpgForPrintCSS_2.jpg 左のスクリーンショットは、このカスタマイズをしていない場合とカスタマイズした後との印刷画面の比較である。
     カスタマイズした後は、ヘッダーと右サイドメニューが印刷画面に出てこないので、エントリー部分のみを印刷できる。




2008年8月18日

隠居のBlog備忘録:MT4.1 での lightbox による画像の挿入を簡略化する

 最近、友人の海外旅行の写真集をブログ Studio YAMAKO に作成していることもあって、画像の挿入する機会が増えた。MT4.1 で写真を掲載することは、MT3.3 のときに比べれば少し楽になっているが、まだいろいろと操作をしなければならない。

 私の場合、写真はブログ本文にサムネイルを掲載し、これをクリックすれば画面全体がブラックアウトして、ポップアップ的に原寸の写真が表示される lightbox というプラグインを使用しているので、その分も操作が多い。そこで、私の知識でもう少し手を抜くことはできないかググッテみた。

 MT4.1 で画像の挿入操作をしたときに自動的に貼り付けてくれるHTMLコードは下のようなコードである。
<form mt:asset-id="227" class="mt-enclosure mt-enclosure-image" style="display: inline;">
<a href="http://n-shuhei.net/studio_yamako/xxxxxx/080818_001.jpg">
<img alt="080818_001.jpg" src="http://n-shuhei.net/studio_yamako/xxxxxx/080818_001-thumb-200x132.jpg" width="200" height="132" class="mt-image-right" style="float: right; margin:  0 0 20px 20px;" /></a></form>

今までは作成してくれたコードを、次の青字のように数カ所属性を追加したり、手を加えたりしていた。
<form mt:asset-id="227" class="mt-enclosure mt-enclosure-image" style="display: inline;">
<a href="http://n-shuhei.net/studio_yamako/xxxxxx/080818_001.jpg" title="ABC" rel="lightbox[aa]">
<img alt="クリックすると大きな写真になります" src="http://n-shuhei.net/studio_yamako/xxxxxx/080818_001-thumb-200x132.jpg" width="200" height="132" class="mt-image-right" style="float: right; margin: 5px;" /></a></form>


 このように手を加えることは挿入する写真が多くなると結構な手間になる。
 「モバイルタイプ備忘録」の関連ページなどを参考に、perl なんてこれから晩学するつもりで全く分からないが、画像の挿入時に使われるソース・プログラムを覗いて、「秀丸」でいじってみた。
 ソース・プログラムは、/cgi/mt/lib/MT/Asset フォルダーにある Image.pm である。この320行目あたりにある行を青字のように変えた。
# '<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>'

 私の場合、lightbox は 2.0 を使っているので、グループ表示のための [] とキャプション挿入の title="" を付け加えた。日本語文字列の「クリックすると大きな写真になります」を入れようとしたが、これは上手くいかなかった。 perl の勉強が必要のようだ。この挿入は、「だい」→「クリックすると大きな写真になります」とIME に単語登録して簡単化することにした。
 初期値では、サムネイル写真を表示するボックスの周囲に余白を作る style の margin が私の場合適切ではないので、この部分も先ほどのソース・プログラムで見つけて(279・282行目あたり)、次のように改定すると上手くいった。
# ' $wrap_style .= q{style="float: left; margin: 0 20px 20px 0;"};
    $wrap_style .= q{style="float: left; margin: 5px;"};

# ' $wrap_style .= q{style="float: right; margin: 0 0 20px 20px;"};
 ' $wrap_style .= q{style="float: right; margin: 5px;"};

 ソース・プログラムが少しいじれるようになったので、ブログつくりも面白みが増えたが、リスクとは隣り合わせのようだ。しっかりとバックアップをとってからいじるようにしたいと思う。それにしても、学習しなければならないことが多いので、もうちょっとの間はボケの進行が止まっていて欲しいと祈念している。