かたつむりくんのWWW

Movable Type 4.23 にアップデート

Movable Type 4.23 の提供が開始されています。セキュリティアップデートであるため、さっそくアップデートしておきました。

アップデート作業にもだいぶ慣れました。

Movable Type においてクロスサイトスクリプティングによる脆弱性が確認されました。この問題に対処するため、Movable Type の修正バージョンを公開致します。脆弱性の修正バージョンとなりますので、アップデートを推奨致します。

jQuery のセレクタを Firefox と Greasemonkey で練習する

最近、jQuery のセレクタをマスターするのに最適ということで「 Selectors 」というサイトが話題になっています。

jquery_selectors01.gif

実際にそのサイトを使ってみるとかなり良い感じで、ビジュアルで jQuery のセレクタが理解できるので本当に役立ちます。後は実践をこなして練習するのみですね。

さて、その「実践で練習する方法」ですが、ちょっとオススメなのが、 Firefox と Greasemonkey を使ってやる方法です。

続きを読む

Gmailの検索オプションや定型文を簡単に取り出せるGreasemonkeyスクリプトを作ってみた

Gmailの検索オプションや定型文を簡単に取り出せるGreasemonkeyスクリプトを作ってみた

最近ハマっている jQuery を使って、Gmail の検索オプションや定型文を簡単に取り出せる機能を追加する Greasemonkey のユーザースクリプトを作ってみました。素人くささはモロに残っていますが。

今や Gmail は、仕事でもプライベートでも、なくてはならない Web サービスの一つです。その魅力は多々あれど、「検索」が優れていることはかなりの高ポイントです。

Gmail の検索は、検索オプションを使うことで威力が倍増します。検索ボタンの横にある「検索オプションを表示」から検索しても結構絞り込めますが、それよりも自分で検索フォームに検索オプションを打ち込んだ方が絞込み精度が高まります。

続きを読む

Custom Field GUI Utility の使い方などの FAQ

当ブログで公開している WordPress のプラグイン、Custom Field GUI Utility について、訪問者さんからご質問をいただいたのでブログ記事にしてお答えします。

続きを読む

google-code-prettify + jQuery でソースコードをハイライトする

ソースコードを見やすくするハイライト表示

ソースコードをハイライト表示してくれる JavaScript ライブラリは数多くありますが、今回、このブログに google-code-prettify というライブラリを導入してみました。

少し前までは dp.SyntaxHighlighterソースコードをカラフルに読みやすくする - dp.SyntaxHighlighter )を使っていましたが、どうもイマイチ好きになれなかったので使用をやめていましたので、久しぶりのハイライト表示です。

続きを読む

jQuery でファイルをインクルードする ( jQuery によるモジュール化)

jQuery でシンプルにファイルをインクルードする

通常のスタティックな Web サイトにおいて、Web ページの中で更新頻度の高いパーツを別ファイルにして、それをインクルードするシーンは多々あるかと思います。

Movable Type でも、モジュールやウィジェットを「インデックステンプレートのコンテキストで全ページに表示させたい」なんてとき、インデックステンプレートに読み込み用のファイルを作って、それを MTInclude で読み込むという手法で実現するのが一般的だと思います。

さて、ファイルを読み込む方法には、大きく分けると、サーバーサイドインクルード( SSI )とクライアントサイドインクルード( CSI )、がありますが、今回は後者の「クライアントサイド」で読み込む方法を jQuery を使ってやってみました。

いわゆる「 jQuery によるモジュール化」と言ったところです。

続きを読む

ブログ記事を「公開した日時」を自動的にカスタムフィールドで保存するカスタマイズ

Movable Type で日付に関するタグはいくつかありますが(タグ date を含むテンプレートタグ一覧)、ブログ記事を「未公開(原稿)」からはじめて「公開」にしたときの日付を表示するタグは無いようです。

そこで、ブログ記事の編集画面をカスタマイズして、カスタムフィールドに自動的に「公開した日時」を表示するカスタマイズをやってみました。

公開日時フィールド

某コミュニティにこのような内容と思われる質問があったので、自分なりにやってみました。

続きを読む

CSS Nite ビギナーズに参加した感想とか要望とか

CSS Niteビギナーズ

11月 1日、晴天に恵まれた三連休の初っ端、CSS Niteビギナーズに行ってきました。6 時間みっちりと CSS に関する基礎を復習することができました。

続きを読む

記事投稿時間の横に Twitter みたいな「約~前」を表示する

記事投稿時間の横に Twitter みたいな「約~前」を表示する

Movable Type や WordPress の記事投稿時間の横に、Twitter のように、その記事を投稿したのが現在時刻から「約時間~前」というのを表示する JavaScript ( jQuery )です。

経過時間を解析する仕組みは、「一定時間で自動的に消える New マークを付ける JavaScript の jQuery 版」のカスタマイズのときとほぼ同様で、小粋空間さんのところで紹介されている「新着エントリーのあるカテゴリーに New マークをつける」を参考にさせていただきました。

続きを読む

Movable Type で CAPTCHA 認証を使わないでスパム対策をしてみる

CAPTCHA 認証

CAPTCHA 認証は、ブログに限らず多くの Web サービスで取り入れられている代表的なスパム防止策です。もちろん Movable Type でも利用できます。しかし、 Web サービスによっては結構見づらかったり、そもそも規則性のない文字列を入力するのは面倒だったりします。

そこで、効果があるかは分かりませんが、もう少しユーザーに手間をかけないスパム対策を考えてみました。

続きを読む

Movable Type のブログ記事の公開日時を年号(元号)で表示する

Movable Type のブログ記事の公開日時( entryData )などを「平成」などの年号(元号)にする方法を考えてみました。

例えば、このブログ記事の公開日時を次のようなタグで出力してみます。

<$mt:EntryDate format="%x (%a)"$>

これを再構築すると次のように出力されます。

2008年10月27日 (月)

こういった出力形式であれば、「日付に関するテンプレートタグのモディファイアリファレンス | Movable Type 4 ドキュメント」にあるとおり、format モディファイアで対応可能です。しかし、「平成」などの元号表示には、format モディファイアでは対応できません。

そこで変数を使って「年号表示」をする方法を考えてみました。

続きを読む

Movable Type の記事投稿画面の UI をカテゴリごとに変えるカスタマイズ ( jQuery 版)

Movable Type の記事投稿画面で、各入力フォームのラベルや位置などのインターフェースを、カテゴリごとに変えられるように管理画面をカスタマイズしてみました。

uichanger01.gif

カスタマイズといっても、管理画面のテンプレートはほとんどいじらずに、jQuery で書いた JavaScript テンプレートを読み込むだけです。もう少し正確に言えば、本体のテンプレートは一切いじらず、コピーをカスタマイズして、別のディレクトリに置くだけです。

カスタムフィールドのない MTOS や、マルチブログにするほどでもないけどちょっとインターフェースを変えたいんだよなーってときに役立つと思います。

続きを読む

Custom Field GUI Utility 1.0.0 にバージョンアップ

Custom Field GUI Utility をバージョン 1.0.0 にバージョンアップしました。WordPressのカスタムフィールドが、より使いやすくなると思います。

主な変更点は以下のとおりです。WordPress 2.6.x をご利用の方は、最新版がお勧めです。

  • 「投稿」及び「ページ」の作成・編集画面に生成されるフォームのインターフェースを、WordPress 2.6.x の他のフィールドと同じにしました。カスタムフィールドを増やしても管理画面上の違和感がなくなります。
  • イメージフィールドに、WordPress オリジナルのアップローダーを使用して URL を挿入できるようになりました。
  • 画像のサムネイル表示が Facebox 1.2を使ったオーバーレイ表示になりました。

WordPress でカスタムフィールドを使おうと思っている方は、是非チェックしてみてください。

CSS Nite in Ginza, Vol.27 に参加した感想と実践

続きを読む

Make Link を使って Amazon アソシエイトの個別商品リンクを作る

僕が愛用している Firefox のアドオンの中に、Make Link というアドオンがあります。

これは、リンク用のソースコード等を右クリックから色々な形式でコピーすることができるようになるアドオンで、その形式も自由にカスタマイズ可能ということもあり、ブログを書くときに重宝しています。

今回は、この Make Link を使って、Amazon.co.jp アソシエイト(アフィリエイト)の「個別商品テキストリンク」を簡単に作成できるようにしてみました。

ちなみに、今回作成するのは、「本」についての以下のような形式の個別商品リンクです。

<a href="http://www.amazon.co.jp/o/ASIN/10桁のISBN/トラッキングID/">書名</a>

続きを読む

WordPress の記事編集画面で各フィールドへジャンプするリンクを生成するプラグイン

WordPressの記事作成・編集画面で、各入力フィールドへジャンプするリンクをサイドバーに生成するプラグインを作ってみました。「投稿」「ページ」どちらにも対応しています。

field_navi01.gif

Custom Field GUI Utility でフィールドを追加していたり、管理画面をカスタマイズして不要なフィールドを display:none; にしていたりしても、それらに合わせてリンクが生成されます。

使い方やダウンロードは以下のページからお願いします。

ブログのタイトル画像をアイテムで管理する

sitename_asset01.png

ブログのタイトルを画像にする方法としては、テキストを画面外へ飛ばして背景画像を表示させたり、単純に img 要素を使ったりと、いくつかの方法があります。

このブログでは、シンプルに img 要素を使って表示させています。ブログのタイトル(サイトタイトル)を img 要素にするのって、アクセシビリティ上敬遠されがちかもしれませんが(最近はどうなんだろう?)、ちゃんと alt 属性に適切な言葉を入れればいいじゃん、という考えです。

さて、今回は、知っている人には今更何をっていう感じかもしれませんが、ブログのタイトル画像を Movable Type のアイテムで管理してみます。

続きを読む

「出力ファイル名」と「公開日」を同時に変更する管理画面のカスタマイズ

basename2_01.gif

今回のカスタマイズは少し前の「Movable Type のブログ記事の出力ファイル名を変更する管理画面のカスタマイズ」の続きです。

前回のカスタマイズでは以下のような機能を持つ「出力ファイル名を設定して保存」ボタンを追加しました。

  • 出力ファイル名のロックを解除する。
  • 出力ファイル名を「日-時分秒」のフォーマットで書き換える。
    (例) 9月22日 6 時50分30 秒の場合:22-065030
  • 書換え後にブログ記事を保存する。
  • ただし、既に出力ファイル名がこのフォーマットになっている場合は、確認メッセージを表示し、書き換えて保存するか、書き換えずにそのまま保存するか分岐する。

今回は、この機能に次の機能を追加してみたいと思います。自分で使っていてかゆかったところに手を届かせた感じです。

  • 出力ファイル名を書き換えるときに、同時に「公開日」も書き換える。
  • 出力ファイル名を既に書き換えているか否かに関わらず、書き換えて保存するか確認する。
  • その確認画面で「公開状態」のステータスを明示する。

続きを読む

Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニック クリエイターが身につけておくべき新・100の法則。 - 感想

9784844326090.jpg

Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニック クリエイターが身につけておくべき新・100の法則。』を読みました。

Movable Type 4 に関する書籍はすでに多数出版されていて、この本はどちらかというと後発本ですが( 4.2 対応としては早いです)、他の本とかぶっている内容があまりないので、すでに MT 本を何冊か持っている人でも役立つと思います。実際に僕も MT に関する書籍はこれで 8 冊目になりますが、それでもこの本はけっこう勉強になりました。

一言でこの本の印象を言うなら「MT 初中級者に役立つ 100 のTips 集」といった感じです。

続きを読む

Movable Type でアップロードするファイルサイズの上限を変更するとバックアップ時にエラーがでるっぽい

特に必要に迫られたわけではないのですが、『Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニック クリエイターが身につけておくべき新・100の法則。』の法則90を読んで、なんとなく自分もアップロードするファイルサイズの上限を変更してみました。

それはそれで問題がなかったのですが、その後の法則92 を読んで思い出したように Movable Type のバックアップをやったわけですが、その時以下のようなエラーが発生しました。

backerror.jpg

何度か試しましたが、僕の環境では mt-config.cgi に CGIMaxUpload 環境変数を追加するとダメみたいでした。

一応、ご参考までに。