MT奮闘記 tag:td-sys.heteml.jp,2008-07-12:/td-sys/funtouki//3 2008-07-12T03:33:58Z Movable Typeでホームページ作成時の諸問題の解決法 Movable Type 4.13 No.7【写真をイラスト化する】 tag:td-sys.heteml.jp,2007:/td-sys/funtouki//3.87 2007-10-02T23:22:05Z 2008-07-12T03:33:58Z 弊社関連サイト「あらんだまおばさん元気日記」では、顔写真の代わりに、イラスト化し... 弊社関連サイト「あらんだまおばさん元気日記」では、顔写真の代わりに、イラスト化した似顔絵を使っています。
obsn0704.gifobsn0705.gif

このように、デジタル写真を元に似顔絵を自動で作成、髪型やヒゲ、眼鏡などのアクセサリも自由に選べ、さらに、喜怒哀楽などのさまざまな表情の似顔絵が自動で作れ、個性のあるフレンドリーな似顔絵を作成する手順を紹介します。
17-13-2.jpg

]]> 《作成手順》
Microsoft Office Home Style+　ダウンロード版を使用します。
（パッケージ製品のMicrosoft Office Personal Edition 2003、Professional Edition 2003 にも同梱されています。）


〔Home Styleツールバー〕の[似顔絵と絵文字]をクリック

17-1.jpg


[似顔絵作成]をクリック

17-2.jpg


[次へ]をクリック

[開く]をクリックしてファイルを選び[次へ]をクリック


顔全体を緑の枠で囲み[次へ]をクリック


　

似顔絵スタイルを選び[次へ]をクリック

自動調整された顔のラインをドラッグで調整し[次へ]をクリック


髪型、眼鏡、ひげ等のパーツを選択し[次へ]をクリック

服装、着ぐるみ等のパーツを選択肢[次へ]をクリック

保存する表情を選び[次へ]をクリック

保存するフォルダ名と、大きさを選択し[完了]をクリック
（実際使う大きさで保存する事をお勧めいたします。）

作成した似顔絵はアイデア次第で、Outlook 2003 のメールや、Word 2003 の文書に貼り込んだり、さまざまな活用ができます。自分なりの楽しみ方を見つけてください。

]]> No.6【ホームページタイトルバナーの作り方】 tag:td-sys.heteml.jp,2007:/td-sys/funtouki//3.86 2007-10-02T23:20:30Z 2008-07-12T03:33:58Z 弊社関連サイト「あらんだまおばさん元気日記」では、ほぼ月替わりで「タイトルバナー... 弊社関連サイト「あらんだまおばさん元気日記」では、ほぼ月替わりで「タイトルバナー」を差し替えています。

今回は「ホームページタイトルバナーの作り方」について、記載します。とても簡単ですので、お試し下さい。

]]> タイトルバナーの作り方 以下の手順に沿って説明します。
  1. 画像加工ソフトを用意
  2. 画像の用意
  3. トリミング
  4. リサイズ
  5. 「ぼかし」を入れる
  6. 完成

1.画像加工ソフトを用意

画像加工（処理）ソフト（レタッチソフト）は、

  • リサイズ（画像サイズの変更）ができること
  • 「ぼかし」などの加工ができること
  • 簡単な補正ができること

の機能があれば十分です。
今回は、簡単で軽快なレタッチソフト「JTrim」 http://www.woodybells.com/を使います。
インストールの説明は、省略します。JTrim Ring 【画像作成/加工遊びの環】ホームページに詳しい説明がありますのでそちらをご覧下さい。

2.画像の用意

まず、バナーに使う画像を用意します。（下の写真は縮小してあります）
サンプル画像
デジカメで撮った、特に何の変哲もない「サツキの花」の画像ですが、今の季節にマッチしているのでこれを使うことにしました。

3.トリミング

JTrimで開いた状態
「JTrim」を起動し、用意した画像を開きます。

まず、画像をバナーのサイズに切り取ります。
切り抜きボタンをクリックします。
座標指定切取り
「座標指定切取り」ダイヤログボックスが開きます。バナーのサイズ（今回は718px×130px)になるよう入力して、「縦横比を維持する」にチェックを入れておきます。

そのままの状態で、カーソルを画像上に移し、バナーの出来上がりをイメージしながら、切取りたい範囲を指定します。
切取り中
ここがセンスの見せ所ですね。

「座標指定切取り」ダイヤログボックスの「ＯＫ」ボタンをクリックすると、画像の切り取りができました。

表示サイズの変更は、虫眼鏡ボタン表示サイズ変更をクリックして適切な表示サイズにしてください。

4.リサイズ

切り取った画像は、縦横比率はバナーと合っていますが、サイズが大きいままです。
リサイズボタンリサイズボタンをクリックし、
リサイズダイヤログボックス
表示された「リサイズ」ダイヤログボックスで、サイズ（今回は718px×130px)を指定して「ＯＫ」をクリックするとリサイズ完了です。

5.「ぼかし」を入れる

これで、「完成」としても良いのですが、サイトタイトル、説明の文字が表示されるところなので、このままでは、バックが少し、やかましいようです。文字が重なる部分に少し「ぼかし」を入れてみます。

「JTrim」は、矩形でしか範囲指定ができないので、ぼかしを入れる部分を数回に分けて範囲指定します。
まず、ぼかしを入れたい部分をクリックして範囲指定します。
リサイズ画像
画像の左上から画像中央よりすこし右まで、手前の「サツキの花」にかからない範囲を指定しました。（わかりやすくするために、青線を書き入れてあります）

次に、「メニューバー」から、「加工」→「ガウスぼかし」をクリックします。
ぼかし範囲指定
「ガウスぼかしダイヤログボックス」でぼかしの強さを指定します。
今回は「2」に指定しました。

境界範囲指定 画像にぼかしを入れた部分と、元のままの部分の境界線が目立ってしまいましたので、境界部分を再度範囲指定します。
今度は、「ガウスぼかし」のぼかしレベルを「1」で指定して、先の「2」で指定した部分と、ぼかしをなじませました。

ぼかしの範囲を細かく指定したい場合は、上記の作業を繰り返します。
範囲指定の際、矩形範囲指定以外の「自由選択」「投げ縄ツール」で指定できるレタッチソフトであればぼかし処理は一度で済みますね。

6.完成

バナー

これで完成です。加工前は割りと平坦な画像でしたが、一眼レフカメラで撮ったような、奥行きのある画像に変更することができました。
ぼかしの際の範囲指定が「矩形」以外で、（なげ縄選択機能のある、PictBear SEなど）できるレタッチソフトであれば、もっと簡単に作ることができるでしょう。
．．．でも、「JTrim」でも問題なくできし、簡単なのでお勧めです。

]]> No.5【楽にブックマークを更新する】 tag:td-sys.heteml.jp,2007:/td-sys/funtouki//3.85 2007-10-01T07:24:19Z 2008-07-12T03:33:58Z Movable Type(MT)を利用したページに「ブックマーク（リンク集）」を... さとぱぱ Movable Type(MT)を利用したページに「ブックマーク（リンク集）」を追加する場合、使用しているテンプレートにそれぞれブックマークのhtmlソースを追加していきます。通常ブログ形式でサイト構成していれば、メインページ、エントリーアーカイブ、カテゴリーアーカイブ、日付アーカイブの４種類のテンプレートそれぞれに追加していかなければいけません。

今回は、楽にブックマークを行使する為に「モジュール」を使用する方法の紹介です。

]]> ブックマークの追加

メインページのテンプレートのサイドバーに「Bookmark」として、リンク集を追加する場合に、「メインメニュー」→「テンプレート」→「インデックス」→「メインページ」と開き、ブックマーク（リンク）を表示させたい箇所に

<h2>Bookmark</h2>
<div class="link-note">
<ul>
<li><a href="http://www.aaa.jp/" target="_blank">リンクＡ</a></li>
<li><a href="http://www.bbb.com/" target="_blank">リンクＢ</a></li>
<li><a href="http://www.ccc.biz/" target="_blank">リンクＣ</a></li>
</ul>
</div>

といったhtmlソースを書き込みます。が、リンクを追加するたびに前述の４種類のテンプレートに「追加」して「保存」を繰り返すのが面倒です。

そこで、「モジュール」を使ってみましょう。

モジュールは、テンプレートの中で繰り返し記述される部分をパーツ（部品）として抜き出し、利用しやすくする仕組みです。

モジュールの作り方

モジュールテンプレートの追加

「メインメニュー」→「テンプレート」→「モジュール」→と開き、「モジュールを新規作成」という文字をクリックします。

新しい画面が表示され、それぞれ以下のように入力します。

  • 「テンプレート名」→ bookmark（半角英数で任意です）
  • 「このテンプレートにリンクするファイル」→ 記入不要です。
  • 「モジュールの内容」→ 部品化したい箇所のhtmlソースを記入します。

こんな感じです

<ul>
<li><a href="http://www.aaa.jp/" target="_blank">リンクＡ</a></li>
<li><a href="http://www.bbb.com/" target="_blank">リンクＢ</a></li>
<li><a href="http://www.ccc.biz/" target="_blank">リンクＣ</a></li>
</ul>

「保存」ボタンをクリックしてテンプレートモジュールを保存します。

「bookmark」というテンプレートが追加されました。

20071001c.jpg

次に、できたテンプレートモジュールを、メインページ、エントリーアーカイブ、カテゴリーアーカイブ、日付アーカイブの４種類のテンプレートそれぞれで書き換えます。モジュールを呼び出すには、<$MTInclude module="モジュール名"$>と記載します。

モジュールの呼び出し

後は、それぞれのテンプレートを保存し、再構築すれば、反映されます。
以降の、リンクの追加と削除は「テンプレートモジュール」のみ変更し、「再構築」をかけるだけで、容易にブックマークの更新できます。

応用編

各テンプレートで共通の部品をモジュールにすると、それぞれのテンプレートがシンプルでわかりやすいものになります。例えば

  • ヘッダー
  • フッター
  • カレンダー
  • コメント一覧
  • トラックバック一覧
  • etc.........
]]> No.4【「MovableTypeの『指定日投稿』」について】 tag:td-sys.heteml.jp,2007:/td-sys/funtouki//3.84 2007-06-05T00:11:53Z 2008-07-12T03:33:58Z 今回は、「MovableTypeの『指定日投稿』」についての紹介です。... 今回は、「MovableTypeの『指定日投稿』」についての紹介です。

]]>

MobavleType（MT）では、記事の指定日（予約）投稿ができますが、そのためには、MTの置かれているサーバーの「cron」の設定を行う必要があります。（参照：シックスアパート社 MovableType3.2マニュアル)

しかし、「cron」の設定とは、サーバーを直接編集することでもあるため、セキュリティ及びユーザーによる誤設定を避ける為、多くのサーバーでは利用できないようです。弊社の利用しているサーバーでも利用できません。

そこで、「cronを使わずに（ほぼ）指定日投稿をする」というツールを活用してみました。
The blog of H.Fujimoto様のcronを使わずに（ほぼ）指定日投稿をするというツールです。H.Fujimoto様まことにありがとうございます。
「cronを使わずに（ほぼ）指定日投稿」は、「Flash」を利用するものと、「Flash」を利用しない「『ほぼ』指定日投稿（JavaScript版）」があります。
「Flash」をページに貼り付けるためHTMLタグ<embed>が必要になることと、「Flash」を使うことに少し抵抗があったので、弊社では「『ほぼ』指定日投稿（JavaScript版）」を使ってみました。

設置の流れを以下に記します。

  • RunPeriodicTasks_2_01.zipをダウンロードして解凍
  • 「RunPeriodicTasks」と「image」フォルダができる
  • 「RunPeriodicTasks」を、Movable Typeの「plugins」ディレクトリにアップロード
  • 「RunPeriodicTasks」内の「mt-run-periodoc-tasks.cgi」のパーミッションを755等（弊社利用サーバーでは701）に変える
  • 「ほぼ指定日投稿」の結果を表示したい箇所をテンプレートに書き加える
  • 指定日投稿を行う
  • 指定日投稿ができたか確認

「ほぼ指定日投稿」の結果を表示したい箇所を書き加えるテンプレートは、「メインページ」のみにしました。
サーバーの負荷を軽減する為、「ほぼ指定日投稿」の動作可能な間隔を標準の15分から60分に変更しました。他にもカスタマイズについて詳しく記載されていますので、「『ほぼ』指定日投稿（JavaScript版）」をよくご覧下さい。

]]> No.3【携帯電話でブログを閲覧、投稿する】 tag:td-sys.heteml.jp,2007:/td-sys/funtouki//3.83 2007-05-30T00:11:09Z 2008-07-12T03:33:58Z 弊社関連サイト「あらんだまおばさんの元気日記」は、携帯電話からも閲覧可能になりま... 弊社関連サイト「あらんだまおばさんの元気日記」は、携帯電話からも閲覧可能になりました。

「あらんだまおばさんの元気日記 mobile ver.」
http://www.td-sys.com/obs/m.cgi
http://www.td-sys.com/obs/

今回は、「MT4i／MovableType用 携帯電話向け変換プログラム」の紹介です。

]]> MovableType(以後MT)で作成したブログは、サーバーにMTをインストール時に設定する「mt-config.cgi」に追記していなければ、文字コード設定標準設定の「utf-8」のままです。

パソコンのブラウザで、閲覧する分には、ブラウザが[utf-8]と自動判別して表示してくれます。（古いブラウザでは未対応あり）

しかし、携帯電話で閲覧すると、判別不能（文字化け）にな状態になってしまいます。

これは携帯電話用Webブラウザで使用している文字コードが「Shift_JIS」のみ対応しているからです。

MTでは、バージョン3.0以降「utf-8」以外に「EUC-JP」「Shift_JIS」にも対応、設定可能になっています。しかし、既にMTをインストール運用後に文字コードの変更をすると、データベースの文字コードも変換が必要など、なかなか厄介です。

MT4i／MovableType用 携帯電話向け変換プログラム

対策として、変換プラグインを使う方法などいろいろ紹介されています。その中で、弊社が選んだのは、

MT4i／MovableType用 携帯電話向け変換プログラム(MT4i)

というcgiプログラムです。「MT4i」のサイトに、インストール方法など詳しく記載されていますのでご覧下さい。

「MT4i」にした理由を以下に列記します。

  • パソコン用Webサイトから、携帯用へ自動で記事転送（ラクチン！）
  • 記事が、携帯用に形成される（見やすい！）
  • 画像もテキストで表示され、クリックすることにより表示する設定が可能（軽い！）
  • 設定画面での設定（わかりやすい！）
  • 携帯電話からの投稿も可能（便利！）

★インストールをされる場合は、MT4iの記事を熟読され、自己責任で実行されますようお願いいたします。

参考サイト

]]> No.2【MovableType へ　カレンダーをつける】 tag:td-sys.heteml.jp,2007:/td-sys/funtouki//3.82 2007-05-02T04:09:35Z 2008-07-12T03:33:58Z 「ブログ(Blog)」には、投稿した日がマーキングされ、その日付をクリックする...

「ブログ(Blog)」には、投稿した日がマーキングされ、その日付をクリックすると当該記事を表示する、【カレンダー】機能がよく使われています。

弊社のWeb Siteは、Movable Typeを使って作成していますが、標準のテンプレートでは、カレンダーは用意されていません。

そこで、今回の「図面屋の技術ブログ」は、No.16「MovableType へ　カレンダーをつける」として、弊社関連サイト「あらんだまおばさん元気日記」に設定した≪カレンダー≫の設定方法について、紹介します。

免責事項について

なお、この記事及びサンプルソースを元に、ご自分のサイト（Web Site）にカレンダーを設定・反映する場合は、MovableTypeの関連書籍等も熟読され、自己責任においてご利用下さるようお願い致します。
当サイトで紹介した、ソースを使用したことによって、何らかの問題が生じたとしても当サイトは一切責任を負いません。

]]> 以下の各テンプレートにカレンダーに関するソースを追記します。

  • スタイルシートにカレンダーを追記
  • メインページにカレンダーを追記
  • エントリーアーカイブにカレンダーを追記
  • カテゴリーアーカイブにカレンダーを追記
  • 日付アーカイブにカレンダーを追記
  • 再構築・サイト確認

■スタイルシートにカレンダーを追記

テンプレート→インデックス→スタイルシート

カレンダーのデザインに関する設定です。現状のスタイルシートに追記します。好みで変更します。

■メインページにカレンダーを追記

テンプレート→インデックス→メインページ

メインページに表示する、カレンダーのソースです。サイドバーなどカレンダーを表示したい箇所へ貼り付けます。

■エントリーアーカイブにカレンダーを追記

テンプレート→アーカイブ→エントリーアーカイブ

個別エントリーページに表示する、カレンダーのソースです。サイドバーなどカレンダーを表示したい、お好みの箇所へ貼り付けます。

■カテゴリーアーカイブにカレンダーを追記

テンプレート→アーカイブ→カテゴリーアーカイブ

カテゴリー別ページに表示する、カレンダーのソースです。サイドバーなどカレンダーを表示したい、お好みの箇所へ貼り付けます。

■日付アーカイブにカレンダーを追記

テンプレート→アーカイブ→日付アーカイブ

投稿日別ページに表示する、カレンダーのソースです。サイドバーなどカレンダーを表示したい、お好みの箇所へ貼り付けます。

■再構築・サイト確認

全てのテンプレートに書き加えたら、MovableTypeのユーティリティ→再構築→全てを再構築を実行します。

再構築が終了後、ブラウザより、サイトにカレンダーが反映され、正常に作動することを確認します。

]]> No.1【Movable Type Version3.35へアップグレード】 tag:td-sys.heteml.jp,2007:/td-sys/funtouki//3.81 2007-05-01T01:20:37Z 2008-07-12T03:33:58Z 2007/4/17に、弊社のホームページでも使用している、Six Apart社の... 2007/4/17に、弊社のホームページでも使用している、Six Apart社のMovable Type（MT)が、バージョン3.35へアップグレードされました。

弊社では、MTを使い出してまだ日が浅いのですが、「3.34以降に発見されたセキュリティ上の不具合への対策」が図られたということなので、オンラインマニュアルを参考にアップグレードしてみました。以下バージョンアップ操作の覚え書きです。

]]> 操作手順
  1. バックアップ
  2. プログラムのダウンロード
  3. zipファイルの解凍
  4. 設定ファイルの書き換え（今回変更なし）
  5. プログラムをサーバーへアップロード
  6. 属性変更
  7. MTへログイン
  8. テンプレートの修正

1.バックアップ

Movable Type 3.3 マニュアルによると、

  • アプリケーション・ディレクトリ
  • スタティック・ディレクトリ
  • ブログ・ディレクトリ
  • データベース・ディレクトリ（データベースにSQLiteやBerkeley DBを利用している場合）

をバックアップするよう進めています。弊社で使用しているデータベースは[MySQL]なので、ftpソフトでディレクトリを丸々バックアップすればよさそうです。

2.プログラムのダウンロード

有償版はユーザーサイトへログインして、ダウンロードページから[ MT-3_35-ja.zip ]というzipファイルをダウンロードします。

3.zipファイルの解凍

ダウンロードした zip ファイルを解凍します。
以下のファイルが展開されました。（サブディレクトリ以下省略）
[MT-3.35-ja]
├ [alt-tmpl]
├ [default_templates]
├ [extlib]
├ [extras]
├ [import]
├ [lib]
├ [mt-static]
├ [php]
├ [plugins]
├ [search_templates]
├ [tmpl]
├ [tools]
├ index.html
├ mt.cgi
├ mt-add-notify.cgi
├ mt-atom.cgi
├ mt-check.cgi
├ mt-comments.cgi
├ mt-config.cgi-original
├ mt-db2sql.cgi
├ mt-feed.cgi
├ mt-search.cgi
├ mt-tb.cgi
├ mt-testbg.cgi
├ mt-upgrade.cgi
├ mt-view.cgi
├ mt-wizard.cgi
└ mt-xmlrpc.cgi
[ ]：フォルダを表わす

4.設定ファイルの書き換え（今回変更なし）

今回のバージョンアップ（3.34→3.35）では、設定ファイル[ mt-config.cgi ]を変更する必要がありません。そのまま使うことにします。
もっと古いバージョン(3.2以前)からのバージョンアップの場合は[ mt.cfg ]ファイルを[ mt-config.cgi ]という名前に変更し、設定を書き換える必要があるようです。

5.プログラムをサーバーへアップロード

ftpソフト(FFFTP)を使ってサーバーへ3項で解凍したファイルのうち以下のファイル以外をアップロードします。
[default_templates]
※オリジナルのデフォルトテンプレートに書き換えていなければ書換え可能
[plugins]
※追加したプラグイン以外をアップロード mt-config.cgi-original
※今回変更不要
[ ]：フォルダを表わす

6.属性変更

ｆｔｐ画面

アップロードしたファイルのうち拡張子が(.cgi)となっているファイルの属性を(701)にする。 ※属性は、レンタルサーバーのマニュアル等で確認してください。(701)は弊社の使用しているサーバーでの値です。

7.MTへログイン

属性変更がうまくできていれば、Movable Typeにログインした時点で、自動的に最新バージョンへの更新を開始します。

アップグレード完了画面

8.テンプレートの修正

システムテンプレートの「コメント・プレビュー」テンプレートに追記が必要です。
以下のHTMLおよびテンプレートタグを探して、 

<input id="comment-author" name="author" size="30"
 value="<$MTCommentPreviewAuthor$>" />
 
<input id="comment-email" name="email" size="30"
 value="<$MTCommentPreviewEmail$>" />
 
<input id="comment-url" name="url" size="30"
 value="<$MTCommentPreviewURL$>" />

それぞれのテンプレートタグ（<$MTCommentPreview●●●$>）に、「encode_html="1"」属性を追加します。追加後のHTMLおよびテンプレートタグはそれぞれ以下のようになります。

<input id="comment-author" name="author" size="30"
 value="<$MTCommentPreviewAuthor
  encode_html="1"$>" />
 
<input id="comment-email" name="email" size="30"
 value="<$MTCommentPreviewEmail
  encode_html="1"$>" />
 
<input id="comment-url" name="url" size="30"
 value="<$MTCommentPreviewURL
  encode_html="1"$>" />

書換え後再構築してアップグレード完了です。

バージョンアップ後

成功しました！

]]>