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

MovableTypeプラグインPostToTwitterを入れてみました。

MTで投稿すると、自動でTwitterにお知らせしてくれるというもの。

MovableType用PostToTwitterプラグイン v1.1.0 (エムロジック放課後プロジェクト)

プラグインの設定画面からの「エントリーの状態を未公開(下書き)から公開に変更した場合に投稿します。」ってやつは、欠かさずやった方が良いっぽい。

[追記]
ちゃんと動いているぽい。確認しました。

[08.12.02追記]
コメントとトラックバックを新たに付いた時の再構築でも投稿してしまう模様。
使用を中止します。

まだ、どんなだったか思い出しながらだけど、今更Twitterに復活してみました。
アカウント残ってて良かった。

極力更新コストを下げる為に、取りあえずこれを入れてみる。
TwitterPod - drikin.com
(他に、Mac用のクライアントで、良いのがあれば教えて下さい)

結局何がしたかったかというと、自分のブログに現在の自分の状況を表示出来たらいんじゃないかなって思ったからで、それ用に専用のブログを作って投稿しようかなっとも思っていたんだけど、よくよく考えたらTwitterでそんなことが出来るんじゃないかと気が付きました。

最近、ブログの更新頻度を上げたのは、仕事が暇になったからって分けではなくて、肩肘を張らずに、ブログを更新するという方針に変えたこととで、妙なプレッシャーがへり気軽に更新出来るようになったことと、自分のことを知ってもらうことで、新しい何かが産まれるんじゃないかというものへの期待感で、その一環で、Twitterのように、たわいのない日常を発信するのも、私を知ってもらうって意味では良いことじゃないかと思った訳です。


で、検索。

発見。
Twitter ブログパーツ（Badgesカスタマイズ）と素材 - WEBデザイン　BLOG


よし，頑張って導入。


っと思ったら、オフィシャルでも普通に提供されていることに気が付く
試しにこのエントリーにいれたらどうなるんだろう?

何の問題も無く動くやん。。。 しばくこれで良さそう!あとでテンプレートに取り込んでみよう。

最近まで、Adobe AIRになんの魅力も感じてなかったんですが、先日echoというタスクマネージメントソフトに出会ってから。印象が変わりました。

echo - スポーツのような、チームワークを。

正直こんなに使えるとは思っていませんでした。
逆になぜ使えないかと思っていたかは

1. インストールが面倒そうっと思ってた。
2. 結局AIRってソフトの中で動くと思っていた。
3. JAVAアプレットみたいなもんだろって思ってた。

それがechoを使うことによって思ったこと。

1. インストールが面倒そうっと思ってた。
   >Airをインストールしたことすら気が付かない。普通のアプリを入れるのと全然変わらない。
   
   
2. 結局Airってソフトの中で動くと思っていた。
   >Airって言われなければ気がつかない。素人はなおさら分からないんじゃないか。
   
   
3. JAVAアプレットみたいなもんだろって思ってた。
   >上記同様全然違った。

そこで、ちょっと思ったのが、
Adobe AIR でMovableType専用の投稿クライアント作れないかな
ってこと。

自分が使う用にもそうなんだけど、お客さんに納品する時に、カッコ良さそうだし、見せなくて良い機能なんかのフィルタリングなんかも出来そう。

お客さんもなんだかすごいものを作ってもらった感じしないかな?制作者側としたら納品のしがいがありそう。

まずはAIRの勉強会から参加しようかな。

かゆい所に手が届く的な、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本ライン書くより、断然楽で、良さげですよ。お試しあれ〜