HP作成アーカイブ: Atelier

« Google | Main | Hutte »

2008年7月22日

隠居のBlog備忘録：MT4.1 で TagCloud ページをつくる

　MT3.3 のときに、はじめて TagCloud を設置したときはかなり苦労した。

　MT4.1 では「小粋空間」さんのテンプレート・セットの "two-colomn-liquid-right" を使わせてもらっている。TagCloud は右サイドメニューの中で表示する仕様になっている。Msajii's Blog のようにタグ（キーワード）が多いと「小粋空間」さんの「タグクラウドの折りたたみ for Movable Type 4」を使わせてもらって、折りたたみができる。ただ、私の場合はメッシュを細かくしてタグ（キーワード）をつけたので700 ちかくになっているから、全てを表示すると縦に長くなってしまう。

　それで、MT3.3 のときのようにページで表示できないかネットをググッテみたが、適切なインストラクションがヒットしなかった。それでもいろいろなページを参考に、MT3.3 のときに使っていた「小粋空間」さんの「Movable Type 3.3 エントリー・タグ詳説」のコードを使って、TagCloud ページを作るとうまくいったので備忘録的に書き留めておきたい。

　わかってみれば設置は簡単である。

インデックステンプレートのメインページをまるまる C&P して、新しく名前は何でもいいのだが、TagCloud とでもし、出力ファイル名はこれも名前は何でもいいのだが tagcloud_page.php として保存する。

このテンプレートページの下記の部分を削除し、

<MTEntries>
   <$MTEntryTrackbackData$>
   <$MTInclude module="ブログ記事の概要"$>
</MTEntries>

「Movable Type 3.3 エントリー・タグ詳説」の下方にある次のコードを挿入する。

<div class="module-tagcloud module">
    <h2 class="module-header">Tag cloud</h2>
    <div class="module-content">
        <ul class="module-list">
            <MTTags>
                <li class="module-list-item taglevel<$MTTagRank$>">
                    <a href="<$MTTagSearchLink$>"><$MTTagName$></a>
                </li>
            </MTTags>
        </ul>
    </div>
</div>

<h2> Tag Cloud </h2> の部分には、TagCloud の説明などに変更できる。

スタイルシートには、次のCSS を追加する。

/* (タグクラウド用) */

.module-tagcloud .module-content a {text-decoration: none; }
.module-tagcloud .module-content {text-align: left; }
.module-tagcloud .module-content .module-list { list-style: none; }
.module-tagcloud .module-content .module-list .module-list-item { display: inline; }
.module-tagcloud .module-content .module-list li.taglevel1 { font-size: 32px; }
.module-tagcloud .module-content .module-list li.taglevel2 { font-size: 28px; }
.module-tagcloud .module-content .module-list li.taglevel3 { font-size: 24px; }
.module-tagcloud .module-content .module-list li.taglevel4 { font-size: 20px; }
.module-tagcloud .module-content .module-list li.taglevel5 { font-size: 16px; }
.module-tagcloud .module-content .module-list li.taglevel6 { font-size: 12px; }

.module-tagcloud .module-content .module-list li.taglevel1 a{ color: #000000; }
.module-tagcloud .module-content .module-list li.taglevel2 a{ color: #0000ff; }
.module-tagcloud .module-content .module-list li.taglevel3 a{ color: #000000; }

表示するフォントの大きさや色は、ここでいじれる。ランクの区分は６段階が初期値である。

作ったページへのパス（私の場合：http://n-shuhei.net/atelier/tagcloud_page.php ）でブラウザに TagCloud ページが表示できれば成功である。
あとは適当な位置に　TagCloud ページへのリンクボタンを設定すれば終わりである。右サイドにボタンを置いたので、サンプルはそちらをみて欲しい。

.htaccess で移転先URLページへ誘導する：MT4.1

　MT4.1 で「小粋空間」さんのテンプレート・セットに移行したときに、ブログ名を変更した。とりあえず、元のメイン・ページ（ http://n-shuhei.net/blog/ )へ訪問された方には、以前　ISP のホームページを移転するときに使っていた次のようなメタ・タグをメイン･ページの<head> ～　</head> においた。

　これは、ページの移転の知らせを発信されている方のソースから、何も分からないままいただいたものである。この方法については、「.htaccessを活用する方法（６）」に詳しい。

　このメタタグをおくことで、元のメインページに訪問された方を新しいメインページに誘導できるが、Google search などで個別のアーカイブへ直接訪問される方は新しいページには誘導するには、全ての個別のアーカイブにメタタグを設置しなければならないから大変な作業となる。

　そこで、上の記事にも紹介されている　.htaccess　を使って誘導（redirect）する方法を試してみることにした。以前に、この .htaccess を使ってページへのアクセス制限を設定したことがあるが、redirect を使うのは初めてである。

　説明通りに、次のコードを元のブログ：http://n-shuhei.net/blog/ と同じフォルダーにある .htaccess ファイルに追加した。｛私の場合、FTP ソフトは FFFTP を使っているが、いったんローカル側で、テキスト・エディター（私の場合は、秀丸）でコードを追加したファイルを作り、これを元の位置にアップロードしなければならない。｝

Redirect permanent /blog/index.php http://n-shuhei.net/atelier/index.php

　このコード追加では、先ほどのメタタグの挿入と同じような効果が得られるだけである。

　アクセス解析にはアクセス解析サービスの Research Artisan を使っているが、その解析のひとつである先月のページ別訪問は、screenshot のように、ほとんどが元のブログ（頭に Atelier Shuhei Weblog: とある。新しいブログは、頭に単に Atelier: とあるもの）のアーカイブへの訪問である。また、少ないがカテゴリー・アーカイブへの訪問もある。MT3.3 を単純に MT4.1 へバージョンアップした元のブログ・アーカイブはそのままおいているので、ページが見つからないということはないが、コメント入力などが不備な（実はそのために新しいテンプレート・セットを導入した）ページへの訪問となっている。
　図中にある　「Atelier Shuhei Weblog: 001DIY アーカイブ」への訪問を redirect するには、次のようなコードを .htaccess に追加する。

RedirectPermanent /blog/001diy/ http://n-shuhei.net/atelier/001diy/

　数が少なければ、上のようなコードを追加していけばよいのだが、個別アーカイブごとにコードを追加するのは大変な作業となる。そこで、「小粋空間」さんに紹介されている「.htaccess によるリダイレクト」を参考に、.htaccess に追加するコードを作成することにした。

方法は、

この記事の 3.1 項にあるコードの次の個別アーカイブ部分を
```
<MTArchiveList archive_type="Individual"> RedirectPermanent /blog/archives/<$MTArchiveDate format="%Y/%m"$>/<MTEntries><$MTEntryLink$></MTEntries> <$MTBlogURL$>archives/
<$MTArchiveDate format="%Y/%m/%d_%H%M"$><MTEntries>.php</MTEntries> </MTArchiveList>
```
下のようなコードに書き換え、説明通り「リダイレクト」（出力ファイル名：htaccess.txt)という名前でインデックス・テンプレートを作成した。
```
 <MTArchiveList archive_type="Individual"> RedirectPermanent /blog/archives<$MTArchiveDate format="/%Y/%m/%d-%h%m%s"$>.php  http://n-shuhei.net/atelier/<$MTArchiveDate format="%Y/%m/%d_%H%M"$>.php </MTArchiveList>
```
ここでの　$MTArchiveDate format=　は、元のブログ(blog)のものは「アーカイブ・テンプレート」→「エントリー・アーカイブ」（MT3.3 ではこのような名称である）の「アーカイブ・マッピング」のパスで使っているフォーマットである。新しいブログ(atelier) では、「アーカイブ・テンプレート」→「ブログ記事」「アーカイブ・マッピング」のパスで使っているフォーマットである。
新しく作成したインデックス・テンプレート「リダイレクト」を保存・再構築すると、FFFTP のサーバー側に次のようなファイル（htaccess.txt）が表示される。
```
RedirectPermanent /blog/archives/2008/06/10-110702.php  http://n-shuhei.net/atelier/2008/06/10_1107.php
RedirectPermanent /blog/archives/2008/06/04-102457.php  http://n-shuhei.net/atelier/2008/06/04_1024.php
RedirectPermanent /blog/archives/2008/06/03-194435.php  http://n-shuhei.net/atelier/2008/06/03_1944.php
.
.
.
.
```
　この作成されたコードをコピー＆ペーストで、.htaccess に約400 のエントリー分コードを追加した。
　一見、上手くコード生成していると思われたが、うまく機能しない。
　先ほどのResearch Artisan に表示されるページのURLと作成したコードを子細に照らし合わせてみると元のアーカイブURLの分表示（%M)が月表示（%m)になっている。
2008/06/04-102457　が正解なのだが、参照にいっているURLの表示では、2008/06/04-100657　となっているのだ。どうやら、MT3.3 から MT4.1 にバージョンアップしたときに、アーカイブ・マッピングの指定を間違ったらしい。小文字の %m は月表示であり、大文字の %M は分表示なのだ。２～３の例で .htaccess　に追加するコードを間違った方にしたら、上手く機能するようになった。
この作業を作成したファイルをテキスト・エディターの秀丸にコピー＆ペーストして行った。単純な作業だが、400近くの修正は結構なアルバイトであった。
修正したファイルを、ローカル側の.htaccess にコピー＆ペーストして、サーバー側にアップロードすると、うまくリダイレクトしてくれるようになった。

（追記：2008/7/4）元のカテゴリー別のアーカイブにも訪問が割合あるので、上と同じような方法で、.htaccess に追加するコードを「小粋空間」さんの記事を参考に作成した。数が少ないので、マニュアルにいじってもそれほどの作業ではない。ただ、バージョンアップしてから、カテゴリー名を変更している場合は、特別なひもつけが必要である。
（追記：2008/7/8） Research Artisan をつぶさにみると、数は少ないが元の月別アーカイブに訪ねて来る人があるようなので、先ほどの「リダイレクト」インデックス・テンプレートを次のコードに書き換えて、.htaccess に追加するコードを作成した。月別アーカイブについては、コードの修正は全くなかった。
　この「リダイレクト」インデックス・テンプレートは、コードを生成するためのテンプレートなので、書き換えても問題はない。
　これで、元のブログはサーバーから削除しても大丈夫と思うが、まだ容量にゆとりがあるのでしばらくおいておくことにしている。

<MTArchiveList archive_type="Monthly">
RedirectPermanent /blog/archives/<$MTArchiveDate format="%Y/%m"$>/index.php http://n-shuhei.net/atelier/<$MTArchiveDate format="%Y/%m"$>/index.php
</MTArchiveList>

　Monthly Archive の後尾には、index.php をつけないと、individual archive のリダイレクトに不都合が起こる。

Kinarie&Mayさんの横長Flash CalendarをMT4.1に設置する

　MT4.1 にアップグレードしてから、Kinarie&May さんのFlash Calendar が使えなくなっていた。MT3.3 のときに、アーカイブテンプレートのところにおいていた　月別XML の XML ファイルをどのように置き、アーカイブマッピングをどのように設定するのかの知識がなかったためである。

　それで、「小粋空間」さんが提供している「Ajax 月送りカレンダー（MT4版）」を３つ運営しているブログのうちひとつに導入した。うまく動くようなので、メインのこのブログにも導入してみた。ところが、はじめのブログでは上手く動いているのに、こちらではカレンダーは表示されるもののエントリーがある日のリンクをクリックすると、アドレスはリンク先のエントリーになっているのに

error in template: found but mtifnonzero was expected

というエラー・メッセージが表示されるだけである。

　この原因を探るうちに、Kinarie&May さんのFlash Calendar でつかう XML ファイルの置き場所とアーカイブマッピングの仕方が分かった。忘れないうちに書き留めておきたい。
　なお、エラーの原因はあとで判明したことであるが、テンプレートをいじっている間に、テンプレート・タグの残骸が「ブログ記事」テンプレートに残っていたためらしい。いつものように初歩的なミスである。

横長Flash Calendar 3.0 のダウンロードと解凍、アップロードなどについては、Kinarie&May さんのページ　「Falsh」→「MT用横長Flash Calendar 3.0」に詳しくでているのでそちらを参考にする。
　私の場合、MT3.3 のときに使っていた Flash File があったので、これを使った。
MT4 になって、XML ファイルの設定が異なる。
1. ブログ管理画面で（MT4 からダッシュボードという）設置するブログを選択し、「デザイン」→「テンプレート」→「アーカイブテンプレート」を選択する。
2. 上段の「アーカイブテンプレートを作成」→「ブログ記事リスト」を選択する。
3. 空白のテンプレート作成画面がでるのでファイル名を「月別XML」（なんでもいいようだが）とし、Kinarie&Mayさんの「月別XMLファイルのテンプレート修正」のページから、呈示されている XML ファイルを C&P して保存する。
4. 保存すると、テンプレートの下に「アーカイブマッピング」が表示されるので、「新しいアーカイブマッピングを作成」をクリックし、種類「月別」を選択し追加ボタンをクリックする。「パス」はカスタムを選び、次のパスを入力（C&P）し保存する。
  xml/<MTArchiveDate format="%Y_%m"$>.xml
5. Kinarie&Mayさんの手順にはないが、MT4では「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事リスト」の下部にある「アーカイブマッピング」で「日別」のパスを表示しておく必要がある。表示がない場合は、「新しいアーカイブマッピング作成」をクリックしてでてくるリストボックスから「日別」を選び「追加」をクリックする。パス表示はそのままでよいようだ。
あとは、Kinarie&Mayさんの手順とおりに、Flash を貼り付けるHTMLソースをつくって、テンプレートに貼り付けるだけである。
私の場合、MT3.3 のときのソースが残っていたので、URL のパス部分を変更して、MT4 の「テンプレートモジュール」→「ヘッダー」の<div id="header">　～　</div> の部分に貼り付けた。ただし、私は「小粋空間」さんのテンプレート・セットを使わせてもらっている。

　友人が原稿を書いているもう一つのブログでは、「小粋空間」さんの「月送りカレンダー」を設置しているが、どちらも甲乙がつけがたい。「小粋空間」さんの「月送りカレンダー」では、スタイルシートでデザインをいじれるのがいい。
Kinarie&Mayさんのカレンダーは横長があるのと、投稿している日にカーソルを合わせるとエントリーのタイトルが出てくる。どちらも愛用させてもらっている。　

コメント認証のためのTypeKeyエラー

　私の場合、スパム・コメントを防止するために、コメントをいただくときには面倒だが　TypeKey の取得とその登録によるサイインインをお願いしている。ところが、MT4.1 を運営しだしてから、一見上手く機能していたように見えた　TypeKey　でもサインインできないと友人に指摘された。

　さっそく、ググッテ見ると MT3 でも起こる問題のようである。MT3 のときから認証問題には困ってきた。対処を施したところ、解決しているようなので、備忘録として記録しておきたい。

問題：正確な TypeKey でサインインしても受け付けてくれない。
対処：いつもお世話になる「小粋空間」さんの古いエントリー「TypeKeyの使い方」は、MT のバージョンが低いときの記述だが、ここからヒントを得た。
　原因は、MovableType の設定ではなくて、TypeKey の設定である。
　既に TypeKey を取得している人が、コメントするときのログインではなくて、アドレスを指定するなどしてTypekey にログインするとTypeKey の設定画面が出てくるはずである。
　この設定画面の下部に、スクリーンショット（クリックすると大きくなります）のような、「コメント登録するウェブログの指定」枠がある。ここに記述するURLは、MT4.1 の場合 mt-config.cgi で指定した CGI Path （MT をおいたフォルダー）を指定しなければならない。ここが間違っていた。
問題：上の修正をしても、ブログ管理者である人が、自分のブログにコメントするために、サインイン（はできる）し、コメントを投稿すると
コメントの登録が失敗しました:
というメッセージがでて投稿できない。
対処：これもググッテみたが的確なサジェッションはヒットしなかった。
　いろいろと設定をいじって得た結果は、理屈はよく分からないが、MovableType の「ブログの設定」→「登録・認証」（スクリーンショット）に、認証方式を指定するところがあるが、ここで　MovableType と TypeKey の両方にチェックを入れると先ほどのエラーはなくなった。 TypeKey のみのチェックでは、先ほどのエラーがでるようである。

　MT4 では、MT3 からはかなりの部分が改定されており、ようやく慣れた MT3 での操作が役に立たないことが多いが、新しい操作に慣れてくるとこちらの方が簡単なのかもしれない。いずれにしろ、老化で硬化した頭では、慣れるのにいじりまわすしか仕方がないかと観念している。　

隠居、MT4.1 でのコメント編集HTMLタグボタンを設置

　MT3.3 のときには、コメント入力ボックスの縁に、HTMLタグボタンをカストマイズで設置していた。MT4 にバージョンアップして、新たに「小粋空間」さんの MT4.1 テンプレートセットを導入したが、「コメント入力フォーム」には、このHTMLタグボタンがついていない。

　コメントも単純なテキスト文書でなく、冗長な絵文字までいらないが、文字の一部分を太字にしたりリンクを張ったりしたい。HTMLタグは使える設定にしているので、タグを書けばよいのだがいちいち面倒である。それで、新しい「コメント入力フォーム」にもHTMLタグボタンをつけることにトライすることにした。

　「MT4 コメント編集ボタン」でググルとすぐにでもありそうなのに的確にヒットしない。そこで、MT3.3 のときにお世話になった「小粋空間」さんの「コメントにHTMLタグ挿入ボタンをつける（改）」を参考にさせてもらって、MT4 に応用してみた。カスタマイズの記録として記しておきたい。

　「小粋空間」さんのエントリーの順に従って、変更した部分を書き留めたい。

コメント欄でのHTMLタグの使用を有効にする。
→MT4 では、「ブログの設定」→「コメント」→「コメントポリシー：HTMLを許可」をチェック
編集ボタン用画像のコピー
→バックアップでおいてあった MT3.3 のときのファイルを <$MTBlogURL$> （私の場合：http://n-shuhei.net/atelier/ )に images フォルダーを作ってアップした。
JavaScriptファイルの作成>
→提供されている JavaScript のスクリプトを秀丸に文字コードを UTF-8 として Copy&Paste とし、ファイル名を commentButton.js として保存した。このファイルを <$MTBlogURL$> のフォルダーにアップした。

編集ボタン表示スタイルの追加

/* field buttons */
.field-header {
width: 400px; /* ボタンを配置するエリアの幅 */
height: 30px; /* ボタンを配置するエリアの高さ */
position: relative;
}

.field-label {
position: absolute;
bottom: 30px;
left: 0px;
}

.field-buttons {
position: absolute;
bottom: 0px;
right: 0px;
}

.field-buttons img {
border: 0;
margin: 0px 0px 0px 3px;
}

テンプレートの修正（JavaScriptファイルのインクルード追加）
→モジュール・テンプレート　「ヘッダー」の </head> 直前に、
<script type="text/javascript" src="<$MTBlogURL$>commentButton.js" charset="utf-8"></script>　
を挿入した。
テンプレートの修正（個別エントリーアーカイブへ編集用ボタン設定）
→モジュール・テンプレートの「コメント入力フォーム」の次の部分をコメントアウトし、その直後に提供されているコードを挿入した。

以上で、「コメント入力フォーム」にコメント編集ボタンは表示されるようになった。MT4 では、「コメント入力フォーム」がモジュール化されているので、コメントの「確認」画面でも、コメント編集ボタンは表示される。

隠居、キリ番アクセス・カウンターを設置する

　５月にレンタル・サーバーを引っ越ししてから気になっていたのは、元のレンタル先 lolipop のカウンターを変更しなければならないことである。 lolipop のレンタル契約は前払いで来年の２月まで契約が残っているので急ぐことはないが、いずれ変更しなければならない。

　また、今までは、表示桁数が５桁だった。この頃の訪問アクセス数は、１日300 くらいだから 10万に到達するのはそんなに遠くないので、６桁にして100万までは OK にしたいと考えていた。そうしておけば、死ぬまで大丈夫のはずである。

　新しいレンタル先の Xserver にも簡便なカウンターが提供されているが、もう一つである。それで、ググッてみると　Free のカウンターが数多く提供されている。なかでも掲示板など様々なソフトを提供している Kent Web というサイトには、種々の Access Counter が提供されており、導入方法についても丁寧に書かれている。

　この中の「キリ番カウンター」というカウンターを導入してみた。このカウンターの説明に、

カウンターの値が指定の「キリ番」になったら記念メッセージを表示させ、訪問者に記念の一言を入力してもらうことのできるカウンターシステムです。

とある。「小粋空間」さんも、このカウンターを使っておられるようだ。「小粋空間」さんのテンプレート利用者で「院長室」というサイトを運営しておられる方が、400万のキリ番をゲットされたようだ。
　ところで、この「小粋空間」さんのカウンターが壊れたようだ。カウンターは、570万を超えていたということである。

　この「キリ番カウンター」のインストール方法は、ダウンロード・ページに詳しい。説明通り作業を進めると、ほぼブログページに表示されるが、数字の画像表示が説明通りでは上手くいかなかった。数字画像を表示させるためには、
kiriset.cgi の 27 行目あたり

# カウンタCGI【URLパス】
$cntprog = './kiricnt.cgi';　を

# カウンタCGI【URLパス】
$cntprog = 'http://xxxxxxxi.xxx/kiricnt/kiricnt.cgi';　

のように、フルパスで書かねばならないようだ。

　私の場合、１日300アクセスくらいだから、キリ番は 10000 くらいに設定するのがいいのだろうが、反応がどんなものか、はたしてメッセージをいただけるのかの興味もあって、100 に設定してみた。どなたか、75000 をゲットされた方は「記念の一言」をいただければ幸いである。
（追記：2008/6/23）後で気づいたことであるが、 Kent Web には掲示板機能があり、ここで Kent Web の様々な製品について、Q&A がされている。覗くためにはメンバー登録が必要であるが、上のような問題の回答はこの掲示板で見つかる。
（追記：2008/6/24）lolipop のカウンターや Research Artisan のカウント数が非常に差がでるので、その原因を探るためこの掲示板の過去ログを検索してみたが、そのようなスレッドはなかった。それで、この掲示板に質問を出してみた。
　するとエキスパートの Pachira さんという方が、素人老人でも理解できるような丁寧な回答をいただいた。
　原因は、ソフトの作りの基本的相違にあるようで、ブラウザーの JavaScript を無効化しておられる方のアクセスはカウントしないようだ。詳しくは、Kent Web のサポート・ページで「kiricnt　のカウント数」というスレッドを覗いてください。ただし、KENT-WEBサポート掲示板に入るには、ログインIDの登録が必要です。
（追記：2007/6/29）アクセス解析で導入している Research Artisan との差異があまりにも大きいので、画面上から削除した。　

隠居のMT4.1 バージョンアップ備忘録

　MT3.35 から MT4.1 へ「小粋空間」さんの「Movable Type 3 からへのアップグレード方法」を参考にアップグレードした。一見上手く成功したと思ったが、コメント入力での認証などで不具合が出て丸１日くらい調べてみても対処の方法が見つからなかった。

　 MT3.35 を引きづりながら、素人があれこれいじっても時間ばかりかかるので思い切って　「小粋空間」さんの4.1 用（XHTML 1.0 Strict（utf-8 版）：スタイル対応版）のテンプレートセット（この言葉も 4.1 から初めて使われている）に切り替えることにした。

　MT3 からは全面的に改定されているので、新しい構成や言葉になれるのが大変である。
　「Movable Type 4.1 テンプレートセット（スタイル対応版）」の設定方法に従ってインストールしたが、多くの問題に遭遇した。（している。）

　忘れないうちに（もう忘れていることもあるが）、遭遇した問題と対処したことがらを備忘録として思いつくまま記録しておきたい。

　

問題：MT3.35 では、ファイルを php としてきたが、MT4 での設定がよく分からない。
対処：我楽さんの「Movable Type 4.0 新規インスコ覚書」を参考にというかそのまま利用させてもらって、ファイル名を書き換えた。
問題：メインページから、（例えば最近のエントリーのリストから）アーカイブページが開かない。また、MT4 から MT3 では　Plugin で対処していた Preview 画面がディフォールトで編集画面の「確認」ボタンで用意されているが、 Preview 画面が表示されない。
対処：「ブログの設定」→「公開」→「公開に関するオプション」の公開方法で「アーカイブのみダイナミックで構築する」を選択する。
原因推定：MT3 のときから、php化をしていたからと思われる。なお、このことによって、ファイルの再構築が劇的に速くなった。
問題：FFFTP で確認しても投稿したファイル名が見えない。
対処：「ダイナミックパブリッシング」の理解が十分でなかった。「小粋空間」さんの「Movable Type の再構築を不要にする「ダイナミック・パブリッシング」（その1：概要）」を読んで納得。
注意点：リンクするページのURL特定は、「ブログ記事あるいウェブページの編集」での公開にある出力ファイル名でする。
問題：右サイドメニューのカテゴリの中身が空白となる。
対処：HTML 記述部分に、<MTTopLevelCategories >　テンプレートタグを挿入。詳細は、「小粋空間」のエントリー「カテゴリーアーカイブで全サブカテゴリーリストを表示」を参照。
問題：「小粋空間」さんのテンプレート・セットでは、「Category」「Recent Entries」などは折りたたみやツリー表示になっていない。
対処：「小粋空間」さんのプラグイン：サイドメニューの折りたたみ (V4.0) を導入。基本的には、MT3.35 のコードを利用して、テンプレートモジュールの「サイドバー2」の既存のコードと置き換える。
注意点：スタイルシートへの追加項目が忘れがちである。
問題：MT3.35 では、[Kinarie&May]さんのフラッシュカレンダーを愛用してきたが、アーカイブテンプレートに設置するXML ファイルの設置方法がよく分からないので、「小粋空間」さんのテンプレート・セットのカレンダーを使うことにしたが、月送りできず十分ではない。
対処：プラグイン：「Ajax 月送りカレンダー（MT4版）」を導入。
注意点：「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事リスト」を選択し、アーカイブマッピングの「新しいアーカイブマッピングを作成」をクリックして、「日別」を選択して「追加」をクリックしておかねばならない。
問題：私は、スタイルとして two-column-liquid-right を使っているが、画面の解像度を 1024x768 にしていても機種によっては、右サイドメニューと本文部分のカラムが重なるようである。
対処：「小粋空間」さんのテンプレート説明エントリーの下の方にある FAQ を参考に、スタイルシートをいじって修正した。
注意点：友達などのPC でうまくいっているか確認してもらう必要がある。
問題：MT3.35 ではCategory 表示順を「藤本壱」さんの cutfirstchar のプラグインを利用して、カテゴリー名の頭に３桁数字をつけて表示順を決めてきたが、MT4 では上手くいかない部分がある。
対処：カテゴリー名の頭３桁の数字を外した。表示順は、数字→英語→ひらがな→カタカナ→漢字の順となるが、あまり違和感もないので当分この表示でいくことにした。
展開：「藤本壱」さんが、「カテゴリーとフォルダを並べ替えるプラグイン（MT4以降用）」のカスタマイズを発表されているので、これを導入するつもりである。
問題：MT3.35 ではインデックス・テンプレートとしてホームページの変更履歴を整理していたが、MT4 ではそのようなテンプレートは作成できないようである。
対処：MT4 ではウェブページのテンプレートが用意されており、これを利用してページの変更履歴を記録していくことにした。
問題：MT3.35 で表示していた「パンくずリスト」のMT4 では上手く動かないようにみえる。
対処：MT4 のものをサーチしてインストールしたが、サブカテゴリーが表示されないのはMT3.35 と同様なので、古いコードをブログ記事（旧エントリーアーカイブ）とブログ記事リスト（旧カテゴリーアーカイブ）にインストールして使用した。
問題：list-style-type が、circle 表示となり変えられない。
対処：style-cite.css の ul 定義している部分をコメント・アウトし、ブログ記事編集画面で直接　<ul type="square">というように指定した。ブログ記事の編集画面は、フォーマット　「なし」を選択し、HTML タグを使っている。
発展：list mark をリスト画像にできる id属性をCSS に設定した。~~画像は「シェルの素材工場」からいただいた。~~ ここで使っているように画像を自分で作ってみた。
問題：ブログ記事を書く編集画面が小さい。
対処：気がつかなかったが、記事を書く枠下のラインをドラッグすることによって、広げたり小さくしたりできる。

　MT4.1 での「小粋空間」さんのテンプレート・セット導入はまだまだ苦戦しているが、なんとか形となった。悪戦苦闘のサイド・プロダクトとして、Ｖｅｒｓｉｏｎ４の理解も少し進んだ。今後は、MT4.1 の進化しているところを取りいれて充実していきたいと思っている。

（続）隠居、MovableType 3.35 から 4.1 へのアップグレード（全面改定）

　MovableTYpe3.35 から　MOvableType4.1 へのアップグレードは、3.35 でのテンプレートをそのまま引き継いで実行した。一見上手く成功したかに見えたが、コメント入力での認証で不具合が出て丸１日くらい調べてみても対処の方法が見つからなかったので、思い切って　4.1 用のテンプレートに切り替えることにした。

　新しいテンプレートは、従来と同じように「小粋空間」さんの MovableType4 用のテンプレートセットを導入した。これはこれで、分からないことの連続であったが、同じ苦労でも今後につながると思っている。

　手を入れなければならないことがたくさんあるが、一つずつ勉強しながら治していくつもりである。いくつかの新しい発見があったり、これからも出てきそうなので、詳細についてはぼちぼちと記録していくつもりである。

隠居、MovableType 3.35 から 4.1 へのアップグレードに苦戦する

　手狭になったレンタル・サーバーを lolipop 500MB から xserver 3GB へ引っ越しをしてから、いろいろな障害がでていた。

　その中で最も大きな障害は、ブログの管理画面から「テンプレート」を開こうとすると

maketext doesn't know how to say: _SYSTEM_TEMPLATE_SEARCH_RESULTS as needed at lib/MT.pm line 917

というエラーメッセージがでてテンプレートの編集ができないことである。

　テンプレートは「小粋空間」さんオリジナルをいろいろといじっているから、なにかにつけ手直しが必要である。当然、スタイルシートもいじれないない(FFTP で弄れないこともない）から、テンプレートの改良ができない。海外のサイト：Movable TYpe Community Forum でも同じような障害が報告されているが、これといった解決策はないようだ。

　それに、MT3.3 では spam comment 対策に入れていた SCode が上手く働かない。思い切って、準備をすすめていた MT4.1 へアップグレードすることにした。
　手順は、「小粋空間」さんの「Movable Type 3 から Movable Type 4 へのアップグレード方法」を参考にさせてもらった。
　いろいろとつまずいたので、備忘録的に、注意事項を順を追って記録しておきたい。

MT3.3 のままレンタル・サーバーを lolipop から xserver に引っ越しことを機会に、データベースを SQLite から MySQL へ変換した。
アップグレードするまえに、データベースのバックアップが勧められている。xserver には、MySQLのバックアップは、phpMyAdmin を利用する。
恥ずかしながら SQL スクリプトなんて書いたことがないから理解が進まない。先の「小粋空間」さんの記事にでている「MySQL + phpMyAdmin によるバックアップ」を参照して、いろいろと試みた。この件ついては理解するまでかなりの時間を要したので、別エントリーで記録することにしたい。
MySQL のバックアップがなんとかできたので、上記記事の手順に従って、FFFTP を使い、MT3.35 の /cgi/mt のフォルダーをアップグレードが上手くいかない場合にすぐに元に戻せるように /cgi/mt33 と名前を変えて残し、新たに空白の /cgi/mt/　フォルダーを作成し、あらかじめダウンロードし展開していた MT4.1 の mt フォルダーにある addons 以下 tools までのフォルダーなどと　index.html ～ readme.html までのファイルをアップロードした。　
mt-config.cgi は、あらかじめダウンロードしていた MT3.35 のファイルをそのままアップロードした。
ここで、サーバーの .cgi ファイルのパーミッション（属性）を 700 （xserverの場合）にしなければならない。先の手順書に書かれていなかったので、つい忘れたので /cgi/mt.cgi にアクセスしても開かなかった。
手順書では、ここで /cgi/mt.cgi にアクセスすると「アップグレード開始」が始まることになっているが、私の場合、いろいろといじっていたためか、MT4.1 のダッシュボードがいきなり表示された。エクスポートしていた最新の MySQL をインポートしたためかもしれない。
MT4.1 のダッシュボードは、MT3.35 の時の管理画面とかなり変わっているのでとまどったが、あちこちとクリックしてみると MT3.35 のときの設定はカバーされているようである。
　心配だったテンプレートも、左上のタブで該当のブログを選択し、「デザイン」→「テンプレート」をクリックすると自分で追加して作ったインデックス・テンプレートなども表示されている。
　「メインページ」のテンプレートで手直ししたかった部分も訂正することができた。
「一覧」→「ブログ記事」で最新順に表示されているエントリーを見ると最近投稿したエントリーが３つほど見えない。私が運営している友人のブログでも同じ現象が出ている。念のため一覧を最後の方まで見ると作成日付が抜けて一覧の最後に見つかった。
　原因ははっきりしないが、再編集画面を開けてみると右サイドに表示される公開（注：表示するには表示オプションで「公開」にチェックを入れる必要がある）で、公開日が空欄になっている。この部分を埋めて「保存」ボタンをクリックすると再構築が始まる。
再構築を行うとエラーが表示される。ほとんどは、現在使っていなくてコメントアウトしていたテンプレートタグ（Google の Mapper とか SCode 関連である）である。これらを削除するとほとんどはエラー表示はなくなった。
ただ、カテゴリー・アーカイブのテンプレートでエラーで表示されたテンプレートタグの MTEntriesWithSubCategories の原因がよく分からず、色々と探ってみたが丸１日ほど徒労に終わった。
　別の再構築で、カスタマイズで入れているインデックス・テンプレートの calendar.xml というテンプレートでエラーが表示された。MTEntryDate テンプレートタグのエラーも同時に表示される。日付タグのフォーマットを変更するとエラー表示がなくなった。ここからヒントを得て、カテゴリー・アーカイブのテンプレートでエラーで同時に表示されていたMTEntryDate テンプレートタグの日付フォーマットを変更するとうそのようにエラー表示がなくなった。（この現象については、別に記録しておきたい。）
まだまだ、バグが出てきそうだが、ようやく MT3.35 の正常だったときと同様の作業ができるようになった。MT4.1 では、いろいろな機能が付加されているようなので、順次取り入れていきたい。

Permalink | Category : HP作成, MovableType | Comments [0] | Trackbacks [0]

2008年5月18日

隠居、MT3.3 でのDB 移行：SQlite→MySQL

　 Movable Type 4.1 を勉強しようとMovable Typeの世界ではそうそうたるメンバーが執筆した「Movable Type プロフェッショナル・スタイル」を奮発して購入した。テンプレートなどを使わせてもらっている「小粋空間」の管理者荒木勇次郎さんも一部を執筆されている。

　この本の最後の章「設置・運用に関するTIPS」（Online Digital Clock Works：丹羽章さん担当）に、

セキュリティやパフォーマンス、管理ツールの充実度で MySQL を推奨します。

とある。MT4.1 では、データベースは MySQL がいいらしい。
MT3.3 から　MT4.1 へのアップグレードの準備として、現在使用している MT3.3 でのデータベース移行を実施した。
移行手順を自分用の備忘録として書いておきたい。

　上の丹羽章さんの「設置・運用に関するTIPS」では、小川宏高さんの移行ユティリティ（MTデータベースの相互変換CGI スクリプト）が紹介されている。データベース変換をググッテみると、皆さん、このスクリプトを使用されている。私の場合、レンタル・サーバーはXserver なので、この環境での実施順を書き留めておく。実際は試行錯誤したが。

1.　まず、Xserver のサーバーパネルにログインし、「DATABASE」→「MySQLの設定」を選択し、新たに MySQL Database を設定する。MySQL Database の設定は、小川宏高さんのインストール手順にはない。そんなことは、当然のことかもしれない。

2.　「MySQLの追加」で、例えば nshuhei_mt33 を追加する。

3.　「MySQLユーザーの追加」で、例えば nshuhei_mt33 を追加する。ホスト名は、localhost をそのまま使う。（変えない）　適宜なパスワードを設定する。

4.　「MTデータベースの相互変換CGI スクリプト」で指示されている方法で、[mt-db-convert.cgi] をFFTP で mt.cgi と同じディレクトリーにアップロードする。FFTP では、名前を変えてアップロードするという機能があるので、[mt-db-convert33.cgi]の"33"部分をはずしてUPし、パーミッション（属性）を 700 とする。

5.　ブラウザーのアドレス部分に、[http://xxxxxxxx.xxx/cgi/mt/mt-db-convert.cgi] を入力し実行すると左のスクリーンショット（クリックすると大きな図で別画面に表示されます）のような画面が現れる。（この画面は、レタッチソフトでいじっている）

6.　画面の指示に従って、必要な事項を入力する。Source DB が SQLite の場合、フルパスが既に表示されている。DBUser, DBPassword, DBHost は入力しない（できない）。

7.　右側のDestination DB には、MySQL を選択し、DataSource 欄は空欄のまま（入力できない）で、DataBase, DBUser, DBPassword, DBHost をそれぞれXserver のサーバーパネルで MySQL を設定したときの name などを使う。DBHost は、 Xserver では、初期値が　localhost となっているのでそのまま使用した。

8. 左下の [convert] ボタンをクリックすると変換が始まる。何か設定が間違っている場合は、エラー・メッセージが表示され変換は中止する。
　途中で、Warning がでたりするが大丈夫のようだ。上手くいくと　"Done copying data from DBI::sqlite to DBI::mysql! All went well."　というようなメッセージがでる。

9. 無事にデータ移行が完了したようなので、mt/mt-config.cgi を「秀丸」で修正してアップロードした。修正する部分は、MySQL Configuration の設定と SQLite DB をコメントアウトするところである。それぞれ以下のように修正する。

### MySQL Configuration - Add the name of your database, username
# password and, optionally database host given to you by your web
# hosting provider.
#
ObjectDriver DBI::mysql
Database nshuhei_mt33
DBUser nshuhei_mt33
DBPassword xxxxxxxxxx
DBHost localhost

### SQLite Configuration - SQLite requires only the path to your SQLite
# database file.
#
#ObjectDriver DBI::sqlite
#Database /home/xxxxxxxx/n-shuhei.net/public_html/cgi/mt/db/sqlite.db

　これで完了である。見た目は変わらないが、ページ展開などが早くなったような気がしている。なによりも、MT4.1へのアップグレード準備が一つできたので喜んでいる。歳をとっての作業はなにをしても時間がかかる。困ったもんだ。

　なお、DB変換にあたっては、「MOvableType備忘録」の下のページを参考にさせて頂いた。ありがとうございました。http://bizcaz.com/archives/2006/08/02-065216.php#復旧手順　

隠居、reCAPTCHA をインストール

　前回、<レンタル・サーバーの引っ越しし>で書いたように、lolipop で使っていた spamcomment 対策に導入していた　Scode が Xserver ではうまく作動しなかった。今回、reCAPTCHA というプラグインを導入すると上手くいったので備忘録的に書き留めておく。

　Scode の修復は諦めて、Xserver MT3.3 で動く何かよい Captcha はないかとググッてみると　MagicBox というサイトの「CAPTCHA　によるコメントスパム対策」というページがヒットした。

　このページでは、Tinny Gimpy というプラグインを紹介しているが、これではなしに、Gimpy というところからたぐると英語のサイトだが、 The Official CAPTCHA site というところに行き当たった。
　"Get a Free CAPTCHA For Your Site" をクリックすると "Use reCAPTCHA on Your Site!" というページの説明となり、さらに"easy-to-install plugins" というリンクをクリックすると "Resources" というページとなり、そのページの "Application Plugins" の中に、MovableType 用のプラグインがあることを示している。

　この MovableType をクリックすると "Adding reCAPTCHA to Movable Type" というページにたどりついた。MT4.1 用のものも用意されている。
"Installing in Movable Type" の説明とおりにインストールすると、ブログ管理画面の「設定」→「プラグイン」で表示される。作動するためには、事前に"Use reCAPTCHA on Your Site!" というページで Sign Up しておく必要がある。 Sign Up すると Public Key と Private Key がもらえる。これらの Key がブログのプラグイン設定で必要である。

　後はエントリー・アーカイブを再構築すれば、コメント画面に現れる。このとき、default では英語の表示になるから、エントリー・アーカイブのテンプレートに挿入する（私の場合、従来Scodeを表示させていたところ）ときに、日本語表示にするようにHTMLを修正すればよい。（下図）
　また、システムのコメント・プレビュー・テンプレートも同様に修正した。

　ただ、TypeKey　との相性が悪い。TypeKey でサインインしても、reCAPTCHAの文字を入力しなければならない。それに、管理者の承認がなければ表示されない。これでは、TypeKey サイイン・インの意味がないので、TypeKey サイイン・インの方には申し訳ないが、reCAPTCHA だけにさせてもらった。
　しかし、おかげで　spam comment はおさまったようだ。　

隠居、レンタル・サーバーの引っ越し：lolipop　→　Xserver

　2006 年２月に、ブログを MovableType で始めだしてから、２年と３ヶ月が経過した。その当時、最も安かった（現在もそうかもしれないが） lolipop という変わった名前のレンタル・サーバーを、ディスク容量 200MB 月額 263円で契約した。
　と同時に同じ系列の、ムームードメインサービスで、n-shuhei.net という独自ドメインを取得した。現在でも、ここが独自ドメイン取得・維持では最安らしい。　

　さすがに 200MB ではすぐ余裕がなくなり、2006年10月に、月額 105円を足して500MB とした。それも容量が残り少なくなってきたので、もう少しディスク容量が大きなレンタル・サーバーを物色していた。
　 lolipop の系列に、chicappa とか hemtel といったレンタル・サーバーがあるが、ネットにあまり名前が出てこないのでもひとつ乗り気ではない。
　「小粋空間」さん（現在は引越しされたようだ）など有名な方が使われている SAKURA Internetは、自分用に MP3 ファイルをおいて楽しんできたが、MovableType を移管するにはなんとなく難しそうだ。それに、債務超過も噂されている。音楽は、RadioSenboku を専ら聴いているので無駄遣いはやめて契約を解除した。

　もう少しググッテみると、ディスク容量 3GB で月額 1050円の Xserver というレンタルが見つかった。MovableType との相性も良さそうである。
　このサーバーに、一気に MT4.1 を導入して、現在の MT3.3 を移管したいと思ったが、 MT4.1 を理解するには時間がかかりそうなので、とりあえずディスク容量を確保することを優先することにした。

　一日 200人を越える人が訪問してくださるようになったので、URL は変えたくない。幸い、独自ドメインを取得していたので URL を変更せずにサーバーの引っ越しができそうである。
　Xsever には、このような場合のマニュアルが丁寧に書いてある。ただ、ドメイン管理とかDNS とかいった言葉は familiar ではないので、加齢化現象が起きている頭では理解するのになんども読み返すことになった。

引っ越しの要領は、マニュアルの「他社からの乗り換えについて」→「サーバーだけ移転したい」を参考に、

まず、ドメインの設定で、保有している独自ドメイン名（私の場合、n-shuhei.net)で、xserver にドメイン設定をする。
次に、FTPソフト（私の場合、FFFTP）で、新しいドメインに、lolipop からダウンロードしておいたファイルを xserver の新しいドメイン（/n-shuhei.net/public_html/) にアップロードする。
次に、ネーム・サーバー（プライマリーとサブがある）を lolipop のネームから　xserver のネームに変えて、浸透するのを待つだけである。この作業で世の中に、サーバーを変えたことを知らしているが、浸透するまでは２日間くらいかかるそうである。
　ドメイン名が同じだから、ほんとに引っ越ししているかどうか分からないが、アップロードする画像ファイルなどを故意に外しておくと表示されないから確認ができる。

サーバーをレンタルしている業者と独自ドメインを管理している業者は別である。
独自ドメインを持っておれば、サーバーレンタル会社のネーム・サーバー名（基本的には、IPアドレス）を、ドメイン管理業者（ここの場合、ムームードメインサービス）に用意されているコントロールパネルで書き換えるだけでよい。

mt-config.cgi のCGI Path は変えなくてよいが、Database へのパスはフルパスが変わっているので変えなければならない。（私の場合、SQLite を使っていたので）
ブログ管理画面の「設定」→「公開」でのサイトパスも絶対パスを変える必要がある。
cgi ファイルの属性（パーミッション）は、xserver の場合 700 に変えねばならないが、プラグインで使っている cgi ファイルも plugins のフォルダーを展開してさがし、属性を変えておく必要がある。私の場合、plugin の RebildPreView の cgi ファイル属性を変えていなかったのでエラーを起こした。

　ここまではなんとかたどり着いて、新しいサーバーで運営ができているが、spam comment 対策の Scode plugin がかなり時間をかけて検討してみたが、どうしても上手く動かない。仕方なく、１日20通近くくる　Junk Comment は手動で削除している。MT4 には対策方法があるらしい。やっぱりアップグレードを考えねばならないだろう。

　

隠居、MTでのParse error に苦戦

　現在契約しているレンタル・サーバーが手狭になってきたので、引っ越しを考えている。「MT　サーバー　引越し」でググって（若い人たちの間では、Googleでサーチすることをググルというらしい）みるとそう簡単ではないようだ。

　引っ越しをされた先達のエントリーには、大抵の人が引っ越しには準備を十分にしておくことが重要のように書いている。特に、サーバーを変えることによって、新しいドメインへのサイト・パスに注意を払う必要がある。

　初期の段階にわけのわからないまま見よう見まねで、テンプレートなどをいじってきたので、コードがくちゃくちゃになっている。コメントアウトしたコードがそのままのこっていたり、サイトパスがテンプレート・タグを使わずに、直接フルパスで書いている部分もある。まず、これらの掃除をしようとしたところでつまずいた。また、同じような過ちを犯しそうなので、備忘録的に書き留めて起きたい。

　メイン・ページ・テンプレートを掃除をしたあと、「S&R」（保存・再構築）をしてみると、なんと下のようなエラー表示がでて、ブログが立ち上がらない。　

Parse error: syntax error, unexpected ':' in /home/sites/lolipop.jp/users/lolipop.jp-dpxxxxxxxx/web/blog/index.php on line 156

　MTをなんとか立ち上げたころに見たエラー・メッセージである。どのように見るのかすっかり忘れている。これも、"parse error MT" でググッてみると、PHP化が影響していることが分かってきた。よく使うコード部分を「小粋空間」さんのPHPモジュール化を参考にPHP化して、よく理解できないまま使っていたのだ。

　さらに、"Parse error syntax" でググルと私でもなんとか理解できるページがヒットした。「ホリデープログラミング入門」というサイトのページである。

　ここに書かれている内容を頼りに、メイン・ページ・テンプレートテンプレートの156行目あたりを眼を凝らしてみると、次のような記述が見つかった。

<?php readfile(http://n-<$MTBlogURL$>"webtitle.html"); ?>

　どうやら、コードの掃除をしているときに手が滑ったらしい。もともとは、どうやらフルパスで書いていたと思われる。

<?php readfile("webtitle.html"); ?>

と記述しなおすと、すんなり回復してくれた。。

　原因が見つかるまでの当座の間に合わせは、FFTPでダウンロードしていた index.php を使ったが、このファイルはテンプレートタグなどが展開されたあとのファイルなので、元々のテンプレートを置き換えることができない。テンプレートは、秀丸か何かを使って　Copy&Paste でバックアップしておいた方がいいかもしれない。

隠居のお勉強：JavaScript(11) try...catch

　サンデー毎日なのに結構なにやかやと時間をとられて、お勉強がすすんでいない。例によって、W3Schools の tutorial にしたがって、次のステップに進もうと思う。

　ネットでいろいろと調べてみると、try... catch という構文は、Ajaxでほぼ必須になっているらしい。私のJavaScript の勉強は、Web ページをもう少し動的にしたいという、だいそれた願望に基づいているから、Ajax に必須なら、特に力を入れて勉強したいと思う。

　try...catch の構文の文法は、次のように解釈できる。

try{エラーをキャッチしたいcodeの実行}
catch(err){エラーをキャッチしたときの処理内容}

　Script を書いていて、プログラムにバグがないかどうかを確認するときなどに使うらしい。エラーの内容を表示するようにしておくと、バグの箇所と特定するのに役に立つということである。本格的に JavaScript プログラムを書くことはまだまだ先のことであろうが、おぼえておきたい。

　W3Schools には、例示として次のようなコードが示されている。

<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="There was an error on this page.\n\n";
  txt+="Click OK to continue viewing this page,\n";
  txt+="or Cancel to return to the home page.\n\n";
  if(!confirm(txt))
    {
    document.location.href="http://www.w3schools.com/";
    }
  }
}
</script>
</head>


<body>
<input type="button" value="View message" onclick="message()" />
</body>


</html>

　try ブロック部分の adddlert("Welcome guest!");　の　adddlert　は alert のミススペルでエラーとなるから、catch ブロックの処理を行って、confirm-box を表示させることになる。

　あまり意味はないが、テストのために上のコードを少しいじって、このエントリーに取り込んでみた。下のボタンをクリックしてみてください。 Confirm Box が出るはずです。

　　　　
　なお、この JavaScript 部分を外部ファイル化し、テンプレートの head 部分に読み込んで使うことを試したがうまくいかなかったので、直接 head 部分に書き込んでいる。

隠居のお勉強：JavaScript(10) event

　ちょっとサボっていた W3Schools の JavaScript のお勉強を再開した。じつは順序に従って、for..in という構文の学習していたのだが、example の文法がよく理解できない。あとで学習する object のときにも出てくるようなので、スキップすることにした。 object がよく理解できていないことが原因のようなので、その学習の中で理解していくことにした。

　それで今回は、次のステップである event の勉強である。

　Web ページの全ての要素（element）は、JavaScript 関数(function)　のトリガーであるイベント(event）となる。例えば、ボタン element の onClick　event は、ボタンをクリックすると実行される関数を指示する場合に使用される。イベント(event）は、HTMLタグの中で定義する。

　event には次のようなものがある。

マウス・クリック
Web ページあるいはイメージのロード
Web ページ上のホットスポットにカーソルが乗る。
HTML form で input box が選択される。
HTML form をサブミットする。
何らかのキーが叩かれる。

　event は通常、関数との組み合わせで使用される。関数は、event が発生する前には実行されない。

　例えば、 onClick　event は次のように使われる。

Field1: <input type="text" id="field1" value="おはよう!!">
Field2: <input type="text" id="field2">
Click the button below to copy the content of Field1 to Field2.
<button onclick="document.getElementById('field2').value= document.getElementById('field1').value">Copy Text</button>

　このコードを実行すると次のようになる。Copy Text ボタンをクリックしてみてください。

Field1:
Field2:

Click the button below to copy the content of Field1 to Field2.

　JavaScript で認められている event の一覧を、英語であるが W3Schools から引用加工させていただいて、下のテーブルに記載した。
　詳細は、W3Schools の complete Event reference にある。それぞれの event の使い方を詳しく説明している。

　　

Attribute	The event occurs when...
onabort	Loading of an image is interrupted
onblur	An element loses focus
onchange	The user changes the content of a field
onclick	Mouse clicks an object
ondblclick	Mouse double-clicks an object
onerror	An error occurs when loading a document or an image
onfocus	An element gets focus
onkeydown	A keyboard key is pressed
onkeypress	A keyboard key is pressed or held down
onkeyup	A keyboard key is released
onload	A page or an image is finished loading
onmousedown	A mouse button is pressed
onmousemove	The mouse is moved
onmouseout	The mouse is moved off an element
onmouseover	The mouse is moved over an element
onmouseup	A mouse button is released
onreset	The reset button is clicked
onresize	A window or frame is resized
onselect	Text is selected
onsubmit	The submit button is clicked
onunload	The user exits the page

隠居のお勉強：JavaScript Basic (9) Break and Continue

　JavaScript の勉強が、１週間ほど空いているので再開することにした。

　W3Schools の次のレッスンは、Loop で使う break と continue である。

二つの特殊なコマンド break, continue をloop の中で使うことができる。

break コマンドは、loop の途中である条件になれば、その loop を中止する。
例を次に示す。
<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=10;i++)
{
if (i==3)
{
break;
}
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>

結果は次の通りになる。
The number is 0
The number is 1
The number is 2

continue コマンドは、loop の途中である条件になる場合のみloop を実行しないが、loop は続ける。
例を次に示す。
<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3)
{
continue;
}
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>

結果は次の通りになる。
The number is 0
The number is 1
The number is 2
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
The number is 10

　構文は理解できたが、どのような時に使われているのか分からない。

　なお、このようなエントリーを編集するときに、< や > を使う場合には、< >　とエンコードしなければならないが、今回から HTML エンコードホームというサービスを使わせてもらうことにした。
　W3Schools などの example コードをこのページのエンコード前ボックスにコピペ（copy & paste）すれば、エンコードされた結果がエンコード後ボックスに表示されるので、これをエントリー編集画面にコピペすればよい。
　今までは、< などを一つずつ< などと書き直していたのでずいぶん楽になった。
　今頃気がつくのは、老齢化現象の一つと思うが。

隠居の JavaScript ：番号付きリストを降順にする。（追記）

　W3Schools JavaScript Tutorial の Loop の項まで学習して、Customaize History 履歴ページでのリスト番号を降順にする方法に使っている Expert が書いた次の JavaScript が少し理解できるようになったので、私の理解できた範囲でコメント文に記した。

<script>
var o = document.getElementById("hoge");
//getElementById メソッドは指定ID（この場合："hoge"）のエレメント（この場合<ol>を指定する。
//"hoge"は、HTMLの<ol id="hoge"> というように指定している。
var max = o.childNodes.length;
//<ol id="hoge"> 要素内の子ノード（この場合、<li>..</li>）の数を変数 max に与える。参考：AllAbout JavaScript
for(var i = 0;i < max;i ++)
//隠居のお勉強：for loop の例
{
o.childNodes[i].value = max - i;
//子ノード<li>の i 番目に、(最大番号- i )を代入する。結果は、番号が降順になる。
}
</script>

　なお、