Archive for the 'Web/Blog' Category

ブログの記事にタグをつけて関連記事を表示

Books

悲しいことに、ブログの過去の記事はほとんどアクセスされないそうです。昔の記事を埋もれさせないように、タグ分類を使って関連性の高い記事を表示するようにしました。

タグ分類の利点は、階層構造や分類項目を気にすることなく、詳しいキーワードをいくつでも付けられることです。タグ分類には、WordPressのUltimate Tag Warriorという定番プラグインを導入しました。

400以上の記事にタグを付けていくのは大変でした。最初にカテゴリーをタグに変換しておおざっぱに設定した後、下図のようなsuperajaxモードやReTag Post-Extentionプラグインを用いて、それぞれの記事のタグをひとつずつ編集しました。
 
Tag
superajaxモードの表示例。ブログの画面からタグを自由に編集できる。
 
関連する記事の表示にはUTW mod Related Postというプラグインを用いました。複数のタグを付けておくと、より関連性の高い記事を選び出せるようです。例えば「職場の「ご近所づきあい」を活性化する3つのしかけ」という記事には、「あいさつ、コミュニケーション、コミュニケーション、メンタルヘルス、職場巡視、上司」という5つのタグをつけました。使用回数が少ないキーワードほど重んじられるので、「あいさつ」「上司」に関連した記事が最初に表示されます。

DasBlogからWordPressにブログをお引っ越し

P2101033.JPG

このブログに使用しているシステムを DasBlog から WordPress に変更しました。DasBlog は .Net Framework を利用したブログシステムで、Windows IIS サーバー上で動いています。それぞれの記事は投稿日別の XML ファイルとして保存されます。一方、WordPress は PHP を利用したブログシステムで、Apache サーバー上で動きます。記事の保存には MySQL データベースを利用しています。

 
記事の移し替え

ブログを乗り換えるときに大変なのが、これまでの記事を移し替える作業です。最近は記事の書き出しや読み込みができるブログも増えてきましたが、DasBlog と WordPress の間ではサポートされていません。今回は次のような作業を行いました。

(1) copy *.xml entries.xml コマンドで記事を1つの XML ファイルにまとめる。
(2) Microsoft Access にインポートした後、記事を CSV に書き出し
(3) CSV ファイルを MySQL にインポートする

(4) クエリを使ってデータを加工する
 ・ 投稿日のフォーマットを変更
 ・ DasBlog の記事番号と WordPress の記事番号の対応表を作る
 ・ コメント先の番号を置き換える
 ・ コメント数を集計して保存

(5) 記事をひとつひとつ変更
 ・ 本文の HTML タグを修正
 ・ カテゴリを設定しなおし
 ・ リード文の修正

URL の変換

ブログを乗り換えるとき、もうひとつ困るのが、記事の URL(パーマリンク)が変わってしまうこと。Apache サーバーの URL リダイレクトという機能と PHP スクリプトを使って、URL や記事の番号を変換する仕組みを作りました。

(1) DasBlog から WordPress へ URLを転送する

.htaccess ファイルに RedirectMatch コマンドを記述して、アクセス先の URL を次のように書き換えるよう設定しました。

(例) http://e-doc.no-ip.com/blog/PermaLink,guid,abcdefg,aspx
  → http://e-doc.no-ip.com/jump.php/abcdefg

(2) DasBlog から WordPress へ記事の番号を変換

次のような作業を行うスクリプトを記述し、DasBlog の記事番号から WordPress の記事番号を探して、該当する記事にアクセスする仕組みを作りました。

・ PATH_INFO や GET 文で古い記事の番号を取得
・ データベースに新しい記事の番号を問い合わせ
・ 新しい記事の URL を生成してジャンプ

印刷用の画面を用意しました

印刷のときは広告を消すようにスタイルシートを書く」という記事を参考に、CSSスタイルシートの「media」タグを使って印刷用のレイアウトを用意しました。タイトルや記事一覧が消えて、本文が大きく印刷されます。ブラウザの印刷プレビュー画面などで確認してみてください。
 

CSSスタイルシートに「@media」タグを用いると、画面用のスタイルと印刷用のスタイルを自動的に切り替えることができます。例えば、次のようにしてレイヤーの表示・非表示や、表示幅、文字の色などを変更しています。

@media print {
    #layer_mokuji {display: none;}
    #layer_top {display: none;}
    #layer_body {width:100%;}
    .itemBoxStyle {color: #000;}
}

@media screen {
    #layer_top_print {display: none;}
}

「よりよく働く」ための…(中略)…物欲のサイト !?

このブログのデザインを約2年ぶりに変更しました。さわやか青空をイメージした背景にAppleとWindowsのロゴをあしらい、よりよい世界を創造するためにコンピュータ技術を積極的に活用していこうというコンセプトを表しています。
 
さわやかな青空をイメージしたタイトル画像にはAppleとWindowsの両ロゴマークをあしらい、よりよい世界を創造するためにコンピュータ技術を積極的に活用していこうというコンセプトを表現しています (※適当なことを言っています)。

さて、このデザインが、Macの画面でどのように見えるのか、とても楽しみです。
今後ともELECTRIC DOC.をよろしくお願いいたします。

無料のVisual Web Developer 2005 Express

Visual Web Developer 2005 ExpressというMicrosoftが無料で提供している開発ソフトを使って、社員向けに発行しているメールマガジンの配信申し込みサービスと、簡単なアンケートソフトを作ってみました。
 
Visual Web Developer 2005 ExpressはWebアプリケーションの開発環境です。その他、Visual Basic、C++、C#、J#などWindowsアプリケーションの開発環境も無料で公開されています

使いやすくなったデータアクセス機能

Webアプリケーションというのは、Webブラウザを使って操作するソフトウェアのことです。例えば、ブログ、掲示板、乗り換え案内、地図検索、ホテルの予約サービス、ショッピングサイトのシステムなどは、すべてWebアプリケーションです。

Webアプリケーションの主な仕事はデータベースを操作することです。Visual Web Developer 2005 Expressでは、統合環境やクラスライブラリを用いて、SQLデータベースやAccessデータベースを簡単に扱えます。

例えば、AccessDataSourceというクラスと、DataGridなどのコントロールを使えば、マウス操作だけでデータの表示・編集用のフォームが完成します。

データをレコード単位で処理したいときはデータセットを使います。データセットをプロジェクトに追加し、編集画面を開いてクエリを追加するだけで、TableAdapterオブジェクトと、Select、Insert、Update、Delete用の関数が自動的に作成されます(上の画像参照)。

しかし使い方がわかるまで半日以上かかった

ソフト開発をしていると、プログラムのロジックはわかってるし、どのように実装するのかも見当が付いているのに、「どの関数(クラス)を使うのかわからない……」という状況におちいりがちです。

特に.NET Framework 2.0ではデータベース関連の仕様が大きく変更(強化)されています。Accessデータベースの基本的な操作方法を調べるだけで、ヘルプファイルを見たり、Google検索をしたり……半日以上かかりました。

使い方はとても簡単なのに、それを「正確に、漏れなく、体系的に」記述すると、たちまち複雑怪奇なドキュメントになってしまうというのは、技術文書の欠点ですね。

参考

Visual Web Developer 2005 Express Edition 日本語版
Visual Studio 2005 Express Edition