このブログを検索

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

Atelierで“スクリプト”が含まれるブログ記事

2018年12月10日

隠居のPC備忘録:Xserver - Movable Type 7 での指定時投稿の方法

Movable Type をバージョンアップする前(MT4.0) にはできていたのに、7 にアップしてから指定日時投稿ができなくなった。普段あまりそのようなことをすることはないのだが、年賀状の記事投稿を元旦の早朝に上げるような時に使っていた。今年は 9月に Movable Type をバージョンアップしているので、一度試しておこうとテストしてみた。が、うまくいかない。
 MT の記事編集画面で公開日時を指定し、サーバー上で同時に(私は、MovableType の運用は、レンタル・サーバーの Xserver を使っている。)cron 設定で日時を指定することまでは覚えていた。cron を使う方法は変わっていないと思うのだが、以前は見よう見まねで、どこからかひらってきたコマンドでうまくいっていたのだ。こうなると基本的な知識がないから、原因がさっぱり検討がつかない。
 このようなページで、cronとは何かの学習から始めなければならなかったが、なんとか自力で公開日時投稿ができるようになったので、備忘録として記録しておきたい。歳とともに、記憶力は極端に減衰してきている。

【MT の記事編集画面で公開日時を指定する】
 編集画面の右カラムで、【公開】の「ステータス」で 日時指定 を選択する。その下の「公開する」で日付ボックスをクリックするとカレンダーが表示されるので、記事をアップしたい日付を選ぶ。その下の時刻表示では、時間(24時間):分(2桁):秒(2桁)で設定する。
【保存】ボタンをクリックして保存する。MT の記事編集画面でする作業はこれだけである。

【Xserver での cron 設定】

  • Xserverのサーバーパネルにログインする。
  • 【アカウント】のグループにある「⇒Cron設定」を選択する。
  • 【Cron設定】画面で、「CRON一覧」タブの、「予約投稿テスト」の「変更」ボタンをクリックする。
    一般的な解説ページでは、「CRON追加」タブを選択し、新たに、日時指定と実行するコマンドを入力するように説明されているが、一回限りの日時指定投稿では、すでに作成しているコマンドを利用する方が楽ちんである。
  • 出てきた画面で、下の表のルールで日時指定をする。例えば、1月1日午前1時ちょうどならば、分:0 時間:1 日:1 月:1 曜日:* という風に設定する。* は何曜日でも適応される。 

    cron-04.JPG

  • コマンド欄には、次のように入力する。
    cd /home/ユーザ名/ドメイン/public_html/cgi/mt77; ./tools/run-periodic-tasks
    「変更」の場合には、コマンドはすでに表示されているから、編集する必要はない。実は、つまづいたのはこの部分である。指定日時投稿を実行する run-periodic-tasks というスクリプトは、MT アプリケーションファイルが収納されているフォルダー(私の場合:/public_html/cgi/mt77 )にある tools というフォルダーにある。このフォルダーへのパスである /home/ユーザ名/ドメイン/public_html/cgi/mt77 の後ろに /(trailing slash) をつけているとうまくいかない。それと、./tools/run-periodic-tasks へのつなぎ(;)もよく理解できていない。Linux script の書き方らしいが。マネするしかしかたない。

    cron-03.JPG


【FTPで、run-periodic-tasks のパーミッション設定】
FFFTPを使って、ファイル [run-periodic-tasks] のパーミッションを 755 に設定した。ネットサーチをしていると、そのような記述があったので、修正しておいた。

この記事も、実験的に、12月10日13時に、予約投稿にしてみた。

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羽 】などで確認できます。

  

2012年9月30日

隠居のパソコン備忘録: ブログ(MT4)に、動画(You tube)をアップロードする


 ブログに動画を載せたい場合がある。Jazz street での楽団演奏の録画や水鳥の動きなどである。このごろのデジタルカメラは、動画撮影機能がついているのが普通である。
 今年も開催された和泉の国ジャズストリートでは、Nikon Coolpix P510 で、SLMC(泉陽高校軽音楽部)の演奏を録画した。設定は、初期設定のままである。初期設定では、HD 1080p(1920x1080) となっている。それ以外のファイルに関する情報は取説には記載されていない。
 デジカメで撮った写真や動画は、Picasa3 でパソコンにとり込む。取り込んだファイルの拡張子は、写真の場合 .jpg であるが、動画は .MOV となっている。ファイルの種類は、Quick Time ムービーとなっている。
 これでは、Microsoft のWindows Media Player では再生できない。Quick Time ムービーは、Apple が開発したソフトだから無理もない。撮影した動画をタイトルをつけたりして編集するのは、フリーのソフト(Windows XP service pack2 に付属している)である moviemaker を使っている。
 デジカメで撮った動画の最初は、Canon IXY900IS であった。これでの動画の形式は、Microsoft の AVI ファイルだったので、moviemaker で編集することができた
どうやら、Canon と Nikon はこんなところでも張り合っているらしい。

 使い慣れた moviemaker で編集するためには、MOV を AVI に形式変換しなければならない。今年の冬に、ハシビロガモの集団採餌行動を NikonD7000 で録画編集した時には、ファイルの形式変換は、AVS video converter を使用した。今回も、AVI に形式変換し、moviemaker に読み込んで見ると、次のようなメッセージが出てファイルを読み込めない。
ファイルの再生に必要なコーデックがコンピュータにインストールされていないため、aviファイルを読み込むことができません。必要なコーデックを既にダウンロードしてインストールしている場合は、Windows ムービー メーカーを閉じてから再度開始し、もう一度ファイルを読み込んでください。

 必要なコーデックというのを探すソフトを導入して、探してみたが要領がよく分からない。AVS video converter の最新バージョンをインストールして動かそうとしたが、確か以前は無料(お試し期間中?)だったのが有料になっている。しかも、結構高い。それで、試行錯誤してみると FREESTUDIO というパッケージの中に、Free AVI Video Converterというソフトがあるのがわかった。
 このソフトで MOV を AVI に形式変換してみると、今度は moviemaker で変換後のファイルを読み込むことができた。タイトルをつけるなどの簡単な編集をして、レンタルサーバーにアップロードし、ブログ本文からリンクすると再生するようになった。

 和泉の国ジャズストリートでのランブリンフェローズという楽団のデキシーを、Sanyo(現在、この会社名はなくなっている) の PCM レコーダーで録音した .mp3ファイル を Yahoo Media Playerを使ってブログに記載しようと再調査していると、Yahoo Media Player は Yahoo webplayer と名前が変わって、動画(You Tube)も簡単にアップロードできるようになっている。
アップロードの方法は簡単である。Yahoo が提供するつぎのような JavaScript を、ブログのHTML <head> 部に置く。Instruction では、<body>部の下部におけとあるが、Movable Typeでは、 上手くいかなかった。 
<script type="text/javascript"> var YWPParams = { theme: "silver" }; </script>
<script type="text/javascript" src="http://webplayer.yahooapis.com/player.js"></script> 
上の行は、ブログで表示するときに、枠を黒ではなく、灰色にするために入れたスクリプトである。なくても問題はない。
 YouTubeの動画をブログで表示するには、次のようなコードを挿入したい場所に、記述するだけでよい。
<a href="http://www.youtube.com/watch?v=elg9OjDJIB8&feature=youtu.be"><img alt="DSCN0641.jpg" src="http://n-shuhei.net/atelier/photo_senboku/DSCN0641.jpg" width="200" height="133" /></a>

イメージファイル部分をテキストにしても問題はない。イメージ写真にすると、真ん中に再生アイコンが表示される。

 ブログ上にYouTube の動画を表示するには、もちろんYouTube に動画をアップロードしておく必要がある。今まで、YouTube に動画をアップロードした経験はないが、それほど難しい作業ではない。
  YouTube にアクセスすると YouTube は Google の一部になっているので、すでにGoogle にアカウント(普通は、gmailのアドレスがID )を持っておれば、マイチャネル(登録チャネル)が表示されるようだ。

upload00.JPG


 右上のツールタグの【アップロード】をクリックすると下のスクリーンショットようになる。
upload01.JPG

 PC にある動画(この場合、hashibiro.wmv というファイル:形式は、ほとんどOK のようだ)を選んで、アップロードすると、下のような画面となり、YouTube のファイル名(URL)が右上に表示される。
upload03.JPG
 下の Sample画像は、ブログの中に、次のように上のURL 組み込んで表記している。
<a href="http://www.youtube.com/watch?v=v4kdwpAnmGM&feature=context-gau"><img alt="ハシビロガモ動画" src="http://n-shuhei.net/atelier/photo_birds/120208_0181-thumb-150x100.jpg" width="200" height="133" /></a>

Sample 動画(YouTube)
ハシビロガモ動画

2012年9月14日

隠居の旅:久しぶりの東京と福島磐梯朝日あたり ー(2):高湯温泉など

 
 バス観光の出発場所は、東京八重洲口の鉄鋼ビル前である。バスはサロンカー、車内宴会用のビールをディスカウントストアで買い付けるために、出発は30分遅れ。首都高を抜けて東北道へ。昼食を予定している宇都宮までの車中では、持ち寄りの酒・ブランデーなどもでて、宴会である。

 昼食は、東北道を宇都宮で一旦降りて、インターチェンジ近くの豪華中華料理店。宇都宮名物の焼き餃子は出なかったが、水餃子・飲茶が美味しかった。
 再び、東北道に戻って、福島西IC で出て多くの果樹園が広がる飯坂町へ。果樹園では、桃(白桃)と梨(幸水)狩りをする。もぎたてを食べるとさすがにジューシーだ。土産に白桃と黄色い桃の詰め合わせを宅急便で送ったら、24時間後にはついていたらしい。なかなか好評だった。
フルーツラインから、県道70号線で曲がりくねった急坂を登って、磐梯吾妻スカイラインの入り口近くの硫黄の匂いがする高湯温泉に到着。乳白色の掛け流し温泉で、残暑でかいた汗を流した。宿の花月ハイランドホテルの大浴場は、大きいいが露天風呂は10人も入ればいっぱいだ。
 夕食後、メンバーの一人の落語まで飛び出して、楽しい飲み会となった。

 翌朝もいい天気だ。朝食前に、宿から1kmあまりの山道を登って、不動の滝といわれるとところに行ってみた。期待した野鳥も蝶々も姿がない。
朝食後、宿からすぐ近くの磐梯吾妻スカイラインへ。現在このあたりの湯量道路は無料開放中である。途中、有毒ガスのため草木が生えていないところを通る。看板には、駐車するなと書いてある。
 吾妻山の山頂付近浄土平レストハウス駐車場には、高級なバイクがずらり並んでいた。どうやら、この道路は、ツーリング族のメッカらしい。
 浄土から桧原湖までの道の両側は、緑の林一色である。下に降りてくると樹々の間から、秋元湖などが見えてくる。バスは桧原湖で小休憩を入れて、会津若松鶴ケ城を経て、南会津の大内宿まで走る。昼食は、大内宿にある三澤屋という蕎麦屋である。大ぶりのあゆの塩焼き、白ネギをかじりながらの大根おろしの辛味がよく効いたぶっかけ冷やし蕎麦(というんだろうか)が、遅めの昼食の腹に沁み込んだ。

 ツアーの行き先はここまでである。あとはひたすら東京まで帰るだけであったが、運転手さんが気を利かせてくれて、ライトアップした東京スカイツリーを一周するように、首都高を走ってくれた。
 1時間半ほど予定より遅れた到着時間に合わせて、大阪までの新幹線の列車は、スマホで簡単に予約変更ができた。世の中便利になったものだ。
 いつもながら、楽しい旅ができるのは、詳細に計画を練ってくれる仲間がいるからだ。Thanks a lot!! 多謝!

 行った先々を、Google Maps API V3 でプロットしてみた。今回は、少し学習して、吹きだしからクリックしてでる写真が、Lightbox (同一画面上に画像を上乗せ表示するためのスクリプト)で見られるようにしてみた。あんまりいい写真はないが。



 

2011年8月11日

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


 今まで、自分が収集した音楽ファイル(mp3 ファイル) を戸外や車の中で楽しむには、初期の iPod shuffle や iriver portable mp3 player を長年使ってきた。

 スマートフォン Xperia acro は小さなノートパソコンみたいなものであるから、もちろん音楽ファイル(mp3 ファイルなど) を保存し、再生することができる。Xperia acro SC-02C の内蔵メモリー(RAM)は 512MB であるが、初期にインストールされているソフトなどで、空き容量は 255MB くらい(ホーム画面のメニューボタン⇒ストレージで確認できる)だそうだ。ただ、外部メモリーとして、microSDHC で最大 32GB をもつことができる。しかも、microSDHC 32GB が同梱されている。iPod や iriver では、1GB のものを使っていたから、それに比べれば、保存容量を気にしなくてすむ。ただ、microSDHC には、写真や動画も保存することになるのでむやみに大量に保存できるわけではない。

 私は音楽ファイルの処理は、パソコンで行っている。音源は様々である。古い LP レコードから mp3 ファイルを作ったりeMusic(現在、日本からはダウンロードできない)や Amazon から Net 購入した曲や CD をデジタル化した曲である。クラシック、カントリー、Jazz、Pops などの曲が、Windows Media Player のライブラリーにデータベース化されている。アーカイブの数は数えたことはないが、30GB程度になった。
 iPod やiriver portable mp3 player (車で mp3 ファイルを聞くときに使っている)は、パソコン本体とUSB 接続でファイルを入れ替えるが、iPod では iTunes というApple のソフトを、iriver では iriver Music Manager というソフトを使わなくてはならない。その点、Xperia acro では、USB メモリーと接続するのと同じように、パソコン本体でひとつのドライブとして(SC-02C というドライブ名で)に認識されるので、その下にある music というフォルダーに本体のフォルダーまたはファイルをコピペすればよい。極めて簡単である。
 コピペした mp3 ファイルは、music フォルダー の下に、たとえホルダーを作ってコピペしても、すべて一緒にアーカイブとして保存されるようだ。Xperia acro での「ミュージック」アプリでは、これらのアーカイブを「アーティスト」、「アルバム」、「トラック」、「プレイリスト」と分類してくれる。「トラック」で表示される曲は、music フォルダー にアーカイブされているすべての曲である。「アーティスト」では、mp3 ファイルの ID3 タグに持っている情報の artists 別に、「アルバム」では ID3 タグに持っている情報の album 別に表示される。また、「トラック」を表示しているときに、例えば jazz で検索してみるとID3 タグのジャンルに持っている情報がjazz の曲もヒットするようである。これらをうまく使えば、自分で作成することになっている(Xperia acro の中で)「プレイリスト」にjazz というようなジャンルで曲を集めることができる。
 「プレイリスト」は、「アーティスト」、「アルバム」、「トラック」のどの画面でも、トラックあるいは曲を選択(タッチ:長押し)すると出てくるポップアップ画面で表示される「プレイリストに追加」をタップすると出てくる「プレイリスト」の画面で、「新規プレイリストの作成」をタップして、新しい名前を入力する。すでにあるプレイリストに追加する場合は、プレイリストをタップすればよい。 
アーティスト画面;クリックすると大きな写真になりますアルバム表示画面;クリックすると大きな写真になりますトラック表示画面;クリックすると大きな写真になりますプレイリスト表示画面;クリックすると大きな写真になります
アーティスト表示画面
アルファベット順に表示される
ID3 タグにアーティスト名がないファイルは、不明なアーティストとして表示される
アルバム表示画面
アルファベット順に表示される
アルバムジャケットの情報が得られる場合は表示される
トラック表示画面
アルファベット順に表示される
microSDHCに保存されている全曲が表示される
プレイリスト表示画面
作成したプレイリストが表示される
もちろん日本語にも対応している


車載用のフォルダー;クリックすると大きな写真になります 私の乗っている古い車では、mp3 ファイルを再生するようなオーディオはついていない。従って、車で mp3 ファイルの音楽を聴くには、少々の工夫が必要である。下記のエントリー【車でMP3を聴く】で書いたように、カセットデッキ式のトランスミッター(私の古い車には、カセットデッキがついている)を iriver portable mp3 player につないで聴いていた。このデバイスを置くための適当なフォルダーがなかったので手作りのものを作っていた。今回、スマートフォンからも、同じようにカセットデッキ式のトランスミッターにつないで、聴いている。幸い、Xperia acro には、車載用のフォルダーが市販されている。
 なお、スマートフォンでの電話・メールの着信音に、ミュージックのトラックから選択できる。ケイタイでは、下のエントリー【隠居のケイタイ:録音した野鳥のさえずりを着信音にする】で書いたように、かなり難しい操作が必要である。Xperia acro では、例えば 小鳥のさえずりを mp3 化して、ミュージック・トラックに取り込めば簡単にできる。

関連するエントリー


 

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 がなくなるまで、実験的に続けたいと思う。

 

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年8月 3日

隠居のお勉強:JavaScript(13) onerror

 梅雨明けから酷暑の日が続き、屋外での活動はほとんどできない。特に、ここ大阪堺市は全国的に見ても暑い都市で連日最高気温が35℃を超えている。老齢を自覚して、クーラーの効いた部屋で過ごすようにしている。

 幸いウェブを開いておれば退屈することはない。JavaScript の学習がおろそかになっていたので、例によって W3Schools の tutorial で再開することにした。今回は、前回に続いてエラー処理の script である。

 onerror イベントハンドラーは、エラーをキャッチしてメッセージを出す古くからの標準的な方法である。

 次はその使い方サンプルである。
<html>
<head>
<script type="text/javascript">
onerror=handleErr;
var txt="";

function handleErr(msg,url,l)
{
txt="There was an error on this page.\n\n";
txt+="Error: " + msg + "\n";
txt+="URL: " + url + "\n";
txt+="Line: " + l + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
return true;
}

function message()
{
adddlert("Welcome guest!");
}
</script>
</head>

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

</html>



上のスクリプトは、alert("Welcome guest!"); とすべきとろころが、adddlert("Welcome guest!"); となっているので、下のボタンをクリックするとスクリプトがエラーとなり、onerror イベントハンドラーが働き、エラーが表示される。



この間違ったスクリプトを訂正すると、"Welcome guest!" と本来のメッセージが表示され、エラーは表示されない。次のボタンをクリックしてみてください。



2008年7月27日

隠居のお勉強:JavaScript(12) throw

 MT のバージョンを 3.35 から 4.1 へアップグレードするのにずいぶん時間をとられて、続けていた JavaScript のお勉強がほったからしになっていた。
 過去の JavaSCript のエントリーを見直していると、 4.1 へアップグレードによってリンク切れを起こしていたり、必要なスクリプトがサーバーにアップされていなかったりしていた。それらを修復しながら復習することができた。

 W3School tutorial の続きで、今回は throw の勉強である。
  throw statement によって、例外処理ができる。前回の try....catch と一緒に使うと適切なエラー・メッセージによってプログラムを流すことができる。
 以下の例では、変数x に値を求め、x が 0 より小さかったり、10 より大きかったり、数字以外の文字がインプットされた場合に、それぞれにあったエラーを表示する。
 
<html>
<body>
<script type="text/javascript">
var x=prompt("Enter a number between 0 and 10:","");
try
{ 
if(x>10)
  {
  throw "Err1";
  }
else if(x<0)
  {
  throw "Err2";
  }
else if(isNaN(x))
  {
  throw "Err3";
  }
}
catch(er)
{
if(er=="Err1")
  {
  alert("Error! The value is too high");
  }
if(er=="Err2")
  {
  alert("Error! The value is too low");
  }
if(er=="Err3")
  {
  alert("Error! The value is not a number");
  }
}
</script>
</body>
</html>


 上の例を実行するボタンを作ってみた。Script は外部化し<head> 部で呼び出している。 

 

 ボタンをクリックしたときに、上の js を実行するためには、関数化しておかねばならない。作った関数は以下である。
// throwEx sample
function throwEx()
{
  ・
  ・
(上の青字部分)
  ・
  ・
}


これを<body> で実行するボタン(上のボタン)を置く、HTML は、次のコードである。
<input type="button" onclick="throwEx()" value="throw statement Sample" />


2008年6月24日

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

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

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

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

 「小粋空間」さんのエントリーの順に従って、変更した部分を書き留めたい。
  1. コメント欄でのHTMLタグの使用を有効にする。
    →MT4 では、「ブログの設定」→「コメント」→「コメントポリシー:HTMLを許可」をチェック
  2. 編集ボタン用画像のコピー
    →バックアップでおいてあった MT3.3 のときのファイルを <$MTBlogURL$> (私の場合:http://n-shuhei.net/atelier/ )に images フォルダーを作ってアップした。
  3. JavaScriptファイルの作成>
    →提供されている JavaScript のスクリプトを秀丸に文字コードを UTF-8 として Copy&Paste とし、ファイル名を commentButton.js として保存した。このファイルを <$MTBlogURL$> のフォルダーにアップした。
  4. 編集ボタン表示スタイルの追加
    →提供されているコードをスタイルシート(styles-site.css)に追加した。ただし、実際の表示をみて、以下のコードの赤字部分を修正した。
    /*  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;
    }
    

  5. テンプレートの修正(JavaScriptファイルのインクルード追加)
    →モジュール・テンプレート 「ヘッダー」の </head> 直前に、
    <script type="text/javascript" src="<$MTBlogURL$>commentButton.js" charset="utf-8"></script> 
    
    を挿入した。

  6. テンプレートの修正(個別エントリーアーカイブへ編集用ボタン設定)
    →モジュール・テンプレートの「コメント入力フォーム」の次の部分をコメントアウトし、その直後に提供されているコードを挿入した。
     <!--<p id="comments-open-text"><label for="comment-text">コメント:<MTIfAllowCommentHTML>(スタイル用のHTMLタグが使えます)</MTIfAllowCommentHTML></label>-->
    
    <div class="field-header">
    コメント:
    <div class="field-buttons">
    <a title="太字" href="#" onclick="return formatStr(document.comments_form.text, 'strong')"><img class="button" src="<$MTBlogURL$>images/html-bold.gif" alt="太字" width="22" height="16" /></a>
    <a title="イタリック" href="#" onclick="return formatStr(document.comments_form.text, 'em')"><img class="button" src="<$MTBlogURL$>images/html-italic.gif" alt="イタリック" width="22" height="16" /></a>
    <a title="アンダーライン" href="#" onclick="return formatStr(document.comments_form.text, 'u')"><img class="button" src="<$MTBlogURL$>images/html-underline.gif" alt="アンダーライン" width="22" height="16" /></a>
    <a title="ハイパーリンク" href="#" onclick="return insertLink(document.comments_form.text)"><img class="button" src="<$MTBlogURL$>images/html-link.gif" alt="ハイパーリンク" width="22" height="16" /></a>
    <a title="引用" href="#" onclick="return formatStr(document.comments_form.text, 'blockquote')"><img class="button" src="<$MTBlogURL$>images/html-quote.gif" alt="引用" width="22" height="16" /></a>
    </div>
    </div>
    
    

以上で、「コメント入力フォーム」にコメント編集ボタンは表示されるようになった。MT4 では、「コメント入力フォーム」がモジュール化されているので、コメントの「確認」画面でも、コメント編集ボタンは表示される。
(追記:2009/3/2)サインインなしのコメントのための Captcha を設定したときに、HTMLタグのアイコンが消えてしまっていたので、修正した。また、一部の記述を変更した。