福岡のホームページ制作[BULANCO(ブランコ)]のWeb制作のこぼれ話

もう結構前になりますが、紹介するつもりが忘れていたので、今更ですがご紹介します。

以前IDEA×IDEA様のMT本プレゼント企画に応募させて頂きました。

【書評】 MovableType 4.x 本格的CMSサイトを構築するためのMTスーパーテクニック（5名にプレゼント！） | IDEA*IDEA

くじ運が悪いと自負している私が、なんとまぁ当たってしまいました。管理人の田口様から直々に当選のメールを頂き本当に喜びました。

その1週間後ぐらいに書籍が届きました。
「Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニック クリエイターが身につけておくべき新・100の法則。」


百式の田口様また出版社様本当にありがとうございました!
穴があくほど拝見させてもらっています。

例えが合っているか分かりませんが、「バットの振り方」や「ボールの投げ方」といった基礎的な内容はなく、「左中間方向へのヒットの打ち方」「カーブの投げ方」のように、より実践的な内容がメインでした。

私のように、MTをある程度使ったことある人間には、非常に楽しめる内容だと思います。記述も、非常に分かり易く、楽しんで読んでいます。明日のMT構築にすぐ生かせそうな内容がばかりでした。

全体的に使えるテクニックが多めに紹介されていましたが中でも、勉強のなったのが、ブロックタグの中での変数を使う方法です。

例えば、エントリーアーカイブの中に、今現在いるカテゴリーのエントリーのみ表示させたい時に、以前はPHPの変数などを使っていましたが、上記のテクニックを知ることによって、MTタグのみで出来ます。

<mt:SetVar name="HereCategory"><$mt:CategoryBasename$></mt:SetVar>
<mt:Entries category="$HereCategory">
<mt:EntriesHeader>
<ul>
</mt:EntriesHeader>
<li><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></li>
<mt:EntriesFooter>
</ul>
</mt:EntriesFooter>
</mt:Entries>   

こんな感じで、1行目でHereCategoryってMT変数に入れた、現在のカテゴリーベースネームを、2行目のmt:Entriesのブロックタグの中で参照しています。このテクニック、色々と応用が利くものなので、覚えて損は無い感じです。

以前書いた
MovableTypeで関連記事をプラグイン無しで作る
でも、使っています。

完全に雑記帳になってきました。

最近あまりに寒いので、UNIQLOで真っ赤なダウンジャケットを買いました。
インナーは結構買うのですが、UNIQLOでアウター買うのは初です。
5800円と安いのに、割といい感じです。発色も良いし。馬鹿に出来ないねぇ〜

オンラインストアーでは、黄緑とかもあるんですね。リアルショップでは見かけませんでした。黄緑ありだったなぁー。

あとは、THE NORTH FACEのコートでも買えば今年の冬は乗り越えられるかな。

前回のエントリーに引き続きPhotoshopの小ネタです。

Webでよく見かけるこんな写真枠をサクっと作っちゃいます

四角い枠を書いて、その上に写真を乗っけるという方法を以前はやっていましたが、もっとお手軽です。

MTネタばかり書いていると、そっち側の人だと思われるので、たまにはWebデザイナーぽいネタを。

Photoshopの小ネタです。

グローバルメニューでよくやるこんな感じ

上と下、微妙に違うんですが分かりますか?

実は下の区切りのラインですが、微妙に2重になっています。
この微妙な2重ラインが、微妙に立体的に見えて微妙に素敵だったりします。

この2重ラインですが、2本ラインを書いている訳ではなくて、1本のラインをレイヤースタイルのグラデーションで、2重に見せています。結果は一緒なんですが、2本ライン書くより、断然楽で、良さげですよ。お試しあれ〜

FirefoxのアドオンScribeFireを入れてみたけど、あまり使えない。

ScribeFire Blog Editor :: Firefox Add-ons

マークアップを期待して入れたんだけど、MT標準のものとさほど変わらず、よろしく無いね。
取りあえず、brを連発するのだけでも回避して欲しかったのに、無理でした。pとbrの使い分けって意外に難しいのかな。。。

タグを付けると、なぜかMTのキーワードに入力されてしまう。これは致命的。
UIは、日本語もされているし、非常に使い易いのに、惜しい。

MovableTypeで、文字コードを変えたい時に、パッパっとやっちゃいたい時用のやり方です。

今回は、うちのトップページが3年前に作ったのもありShift-JISで書かれていて、ブログ部分はUTF-8なので、そのギャップを埋めるために使っています。

MTで携帯サイトをプラグイン無しでやりたい時なんかにも使えます。

<?php
$news=<<<_END_
<mt:Entries lastn="10">
<mt:EntriesHeader>
<dl>
</mt:EntriesHeader>
<dt><$mt:EntryDate format="%Y.%m.%d"></dt>
<dd><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></dd>
<mt:EntriesFooter>
</dl>
</mt:EntriesFooter>
</mt:Entries>
_END_;
$news = mb_convert_encoding($news, "SJIS", "UTF-8");
echo $news;
?>

単純に、変数にコードをつっこんで、mb_convert使って、文字コード変えているだけです。
簡単にやっちゃいたい時に、使えます。

MacOSX版のPhoshop(たしかFireworksでも)で、MSゴシックをアンチエイリアス無しで表示させると、ジャギーが妙な具合に出て汚くなります。

これが嫌で、最近までデザインカンプで使うフォントはヒラギノのアンチエイリアスを使っていましたが、これだと最終的にサイト出来上がった時に、お客様に「デザインカンプと随分イメージが違うねぇー」っと言われることがありました。

Macをユーザーの方は、ヒラギノのアウトライン付きを使っても、普段見ているブラウラザがそうなので違和感がないはずですが、Winユーザーの方は、アンチエイリアスがかかっていないフォントを見慣れているので、どうしてもイメージが違ってきます。

最近発見したのですが、MacOSX版のPhotoshopで、ジャギーを無くす方法です。



「フォントの水平比率を100%以外にする」

よく原因は分からないのですが、98%〜105%ぐらいの間に、奇麗に見える場所があります。
同じフォント使っているのに、配置している場所でそのパーセンテージが変わってきます。そのため毎回フィットする数字を探す必要があり、結構面倒ですが、一応奇麗に見えてくれます。

コメントスパムが多くて、色々と悩んでいたけど、MT4って、デフォルトで、CAPTCHAついているんだね。
知らなかったです。いつから付いたんだろう?

Six Apart - 技術情報提供ブログ: CAPTCHA 認証機能も簡単設定可能に

なんと、MT4リリース時から標準装備になったんですね。
知らなかったです。お恥ずかしい。。。

どれぐらい使えるものか分かりませんが、とりあえず手軽なので、使ってみます。

あとは、トラックバックスパム防止ぐらいかなぁ〜

MT4の場合、変数を使うことで、関連記事をプラグイン無しで作ることが可能です。
$を付けることでブロックタグの条件中で変数が使えます。

<MTEntryIfTagged>
<div id="relatedentries">
    <h3 class="relatedentries-header">関連記事</h3>
    <mt:SetVarBlock name="relatedEntry"><MTEntryTags glue=",">
    <$MTTagName$>
    </MTEntryTags></mt:SetVarBlock>
    <?php $EntryLink="<$MTEntryPermalink$>"; ?>
    <ul>
        <mt:Entries lastn="6" tags="$relatedEntry">
        <?php if($EntryLink != "<$MTEntryPermalink$>"){
        echo "<li><a href=\"<$MTEntryPermalink$>\"><$MTEntryTitle encode_html="1"$></a></li>";
        }?>
        </mt:Entries>
    </ul>
    <!-- /relatedentries -->
</div>
</MTEntryIfTagged>

こんな感じです。
10行目あたりの、phpのコードで、現在のエントリーを除外しています。


このエントリーを書くにあたり、参考リンクを探していて、もっとよいエントリーを発見してしましましたorz

MTSetVar(Block)/MTIfタグの具体的な利用例。 (Junnama Online (Mirror))

こっちのほうが間違いなく正解です。
<MTUnless name="eid" eq="$thisid">
ここら辺のコードが参考になります。
<MTUnless>を使うという発想が無かったです。。。

あと、ANDの発想も参考になりますが、これはエントリーが、かなり多いブログ向けかもです。


このBlogのURLを、本体サイト(http://www.bulanco.net)配下のディレクトリに移動しました。
サブドメイン変えていたので、mtの本体ごと移動しました。DBは変わらないので楽でした。

特に面倒なことは無く、mtconfig.cgiの18行目あたりの「StaticFilePath」の設定を変えることと、MTの公開設定のURLをいじるぐらいで終わりました。

もしかしたら、mtconfig.cgiをいじらないと、インストールウィザードが立ち上がる可能性があります。
(おそらくDBが空でなければ問題ないと思います)

あとは、もとBlogがあった所に、移転したよっと伝えればいいのですが、それも来てくれる方には面倒だろうし、下層に直接アクセスがあったときに404になるのもどうかと思うので、.htaccessを使って飛ばすことにしました。これだと、移転したことに気が付かずにページを閲覧することができるし、rssなんかを登録している人にとっても、そのまま読めてユーザービリティーは高いと思います。

参考までに、コードをさらしておきます。

RewriteEngine On
RewriteCond %{http_host} ^blog.bulanco.net
RewriteRule ^(.*) http://www.bulanco.net/blog/$1 [R=301,L]

• http://blog.bulanco.net/→http://www.bulanco.net/blog/へ移動
  
• mod_rewriteがサーバーにインストールされている必要があります。
• 301転送なのでSEO的にも安心
• 直接下層のエントリーにアクセスされても、構造さえ変わってなければ、そのまま新しいページを読んでもらえる。
  

参考リンク

301 リダイレクト (完全に移動) の実装 - ウェブマスター向けヘルプ センター
サイト移転時の301リダイレクト処理の具体例:phpspot開発日誌