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

かゆい所に手が届く的な、JSです。非常に便利です。

開発元
inputlog - yuga.js 0.6.3 - 優雅なWeb制作のためのJavaScript

デモ
yuga.js 0.4.2 - 優雅なWeb制作のためのJS｜CSS HappyLife
参考
yuga.js 0.6.0　優雅なWeb制作のためのJS「yuga.js」 | CSS Lecture

jqueryとセットで、色んな機能が追加出来るものです。
特に、liタグなんかに奇数、偶数でclassをoddとeven振ってくれものや、first-child, :last-childが自動でつくものなんて、かなり有り難いです。

ただ、MTにこれを入れると、 「外部リンクは別ウインドウ」「画像へ直リンクするとthickboxで表示」あたりが私の環境では上手く動いてくれませんでした。

また後日試してみます。

ある案件で、A-Formをインストールしたので、ついでにうちのブログにも入れてみました。

A-Form：MovableTypeにフォーム設置できるMTプラグイン｜Web制作のアークウェブ

本当に便利ですよね。
簡単に結構立派なお問い合わせフォームが作れちゃいます。
PHPで作ると結構手間かかりますが、A-Formなら、ものの30分ぐらいで作れちゃいます。

といっても、デザインのカスタマイズすると結構時間はかかっちゃうとは思いますが。。。

インストールログでも書こうと思ったんですが、オフィシャルのGoogleグループに立派なものがあるので、そちらをどうぞ。

インストールと初期設定 - mt-a-form | Google グループ
チュートリアル（基本的な使い方） - mt-a-form | Google グループ

インストールの注意点

1)以下の3つのファイルに実行権限(755)を与えること

•  [plugins]/AForm/aform_engine.cgi
•  [plugins]/AForm/aform_logger.cgi
•  [plugins]/AForm/aform_checker.cgi

2)該当テンプレートに以下のコード書き足す

<$MTEntryBody$> → <$MTEntryBody aform="1"$>
(私はウェブページにやったので、<$MTPageBody aform="1"$>こんな感じになりました)

3)テンプレートによってはエラーが出る

テンプレートモジュールの有無で、エラーが出るこがあります。
4.1ぐらいをベースにテンプレート作っているみたいで、「HTMLヘッダー」「バナーヘッダー」「ヘッダー」「フッター」「バナーヘッダー」の5つのテンプレートモジュールが揃ってないとエラーが出ます。

無い場合は、上記のテンプレートモジュールを制作するか、
[plugins]/AForm/tmpl
上記配下にあるテンプレートファイルを書き換えてみて下さい。恐らく

• aform_confirm_field.tmpl
• aform_confirm.tmpl
• aform_error.tmpl
• aform_finish.tmpl
• aform_form.tmpl

ぐらいを書き換えれば問題なく動くと思います。フォームの設定によってはもう少し少なくてもいけるかも。

MTの管理画面から、コンバージョン率なんかも見れて非常に便利ですよ。


お仕事のご依頼・お問い合わせに是非フォームから!

本日は、天神で打ち合わせがあり、その帰りに久々に本屋さんに寄れたので、不定期購読のデザイン系の雑誌を2冊ほど買ってきました。

Web Designing (ウェブデザイニング) 2008年 12月号


Webの配色セオリーとAdobe CS4の新機能紹介。
やっぱり、Dreamweaverは期待大ぽいですね。
CSSのライブビューもそうだけど、Javascriptもライブビュー出来るそうな。
Firebugぽいことも出来ると勝手に妄想。


MdN (エムディーエヌ) 2008年 12月号


デザインアイディア特集。本来紙よりの話題が多いんだけど、今回はWebも色々特集してあったから、思わず購入。
テクスチャーを手作りして(たとえばコーヒーしみを実際に紙に付けてそれをスキャンとか)Photoshopで加工している所なんか使えそうだったかな。

84ページのインタビュー記事での、「これまでの歩み」って時系列で見せている図の感じがシンプルでクールだった。参考にします。

雑記

本の最大の欠点って、検索出来ない所と思うんですよね。文字の可読性なんかは本の方が絶対良いのに勿体ない。
で、結構雑誌かって、「なるほど!」って思う記事あるんだけど、あとで「そういえばあんな記事あったな」って時に、本棚を探すんですが、なっかなか見つからないですよね。こんな感じに、買った本の感想をブログに書いちゃえば、あとで検索出来て便利と思いません?

Blogを自分用のメモって思っちゃえば、やっぱ便利ですよね。

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

以前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開発日誌

09.02.08追記
新たにXMindの記事を書きました。詳しくはこちらから(Web制作者的な『XMind』の使い方)(タグ:XMind)

最近、仕事の打ち合わせなんかで、マンドマップツールでメモを取ることが多いです。

マインドマップツールでメモを取る理由は

• 系統がはっきりしているメモが取れる
• 系統がハッキリしているので、あとで議事録などを作るときが楽
• 書くのが意外に早い

特に3番目の書くのが意外に早いってのが大きいかもしれません。
早い割に、系統がハッキリしているので、言うこと無いです。

マウスに手をやること無く、ガンガン書き進められます。


始めに手をつけたのが、FreeMindというソフト(Mac,Win,Linux)でした。これはこれで良かったのですが、見た目がイマイチでした。ただ、操作性は非常に良かったので使っていたのですが、ちょっと前に新たなフリーマインドツールを発見し、それに乗り換えました。

それが、XMind(Mac,Win,Linux)です。

先日のサト研で、nisiaki氏に紹介したところ、意外に好評で、さらにブログでご紹介までいただいたので、私もそれに乗っかる形でご紹介させて頂きます。

詳しくは、nisiaki氏のブログを参考に!

っと、すごい投げやりな更新でした。はい。

私たち零細Web制作者の最大の営業は、アウトプットということ。

今更だけど、やはりこれは大事なんだなっと再認識。
ということで、今後ブログの更新頑張ります。

最近ちゃんとした文章を書かないと、という気持ちが更新の頻度を下げてたように思います。今後は、駄文(もともと駄文かなw)でもガンガン更新します。

 

プログラマーの35歳限界説は嘘。

向上心が無くなった所が限界らしいです。

 

 詳しくはここら辺で。

• [レポ] vol.3 in AIPcafe 2008/11/23  
•  サイト運営・管理研究会 Vol.3 に参加してきました - devworks
• 【レポート】FWW_サイト運営・管理研究会（仮）Vol.3 | MutsuLog
• Nishiaki's Log: やっぱりアウトプットが重要という事やね
• Nishiaki's Log: 「これからはマインドマップはXMindでしょ」という受け売り