最近ハマっている jQuery を使って、Gmail の検索オプションや定型文を簡単に取り出せる機能を追加する Greasemonkey のユーザースクリプトを作ってみました。素人くささはモロに残っていますが。
今や Gmail は、仕事でもプライベートでも、なくてはならない Web サービスの一つです。その魅力は多々あれど、「検索」が優れていることはかなりの高ポイントです。
Gmail の検索は、検索オプションを使うことで威力が倍増します。検索ボタンの横にある「検索オプションを表示」から検索しても結構絞り込めますが、それよりも自分で検索フォームに検索オプションを打ち込んだ方が絞込み精度が高まります。
当ブログで公開している WordPress のプラグイン、Custom Field GUI Utility について、訪問者さんからご質問をいただいたのでブログ記事にしてお答えします。
google-code-prettify + jQuery でソースコードをハイライトする
- 2008年11月11日 13:17
- Webデザイン, JavaScript
ソースコードをハイライト表示してくれる JavaScript ライブラリは数多くありますが、今回、このブログに google-code-prettify というライブラリを導入してみました。
少し前までは dp.SyntaxHighlighter（ソースコードをカラフルに読みやすくする - dp.SyntaxHighlighter ）を使っていましたが、どうもイマイチ好きになれなかったので使用をやめていましたので、久しぶりのハイライト表示です。
jQuery でファイルをインクルードする （ jQuery によるモジュール化）
- 2008年11月10日 17:37
- JavaScript, テンプレート
通常のスタティックな Web サイトにおいて、Web ページの中で更新頻度の高いパーツを別ファイルにして、それをインクルードするシーンは多々あるかと思います。
Movable Type でも、モジュールやウィジェットを「インデックステンプレートのコンテキストで全ページに表示させたい」なんてとき、インデックステンプレートに読み込み用のファイルを作って、それを MTInclude で読み込むという手法で実現するのが一般的だと思います。
さて、ファイルを読み込む方法には、大きく分けると、サーバーサイドインクルード（ SSI ）とクライアントサイドインクルード（ CSI ）、がありますが、今回は後者の「クライアントサイド」で読み込む方法を jQuery を使ってやってみました。
いわゆる「 jQuery によるモジュール化」と言ったところです。
ブログ記事を「公開した日時」を自動的にカスタムフィールドで保存するカスタマイズ
- 2008年11月 5日 12:41
- Movable Type, テンプレート
Movable Type で日付に関するタグはいくつかありますが（タグ date を含むテンプレートタグ一覧）、ブログ記事を「未公開（原稿）」からはじめて「公開」にしたときの日付を表示するタグは無いようです。
そこで、ブログ記事の編集画面をカスタマイズして、カスタムフィールドに自動的に「公開した日時」を表示するカスタマイズをやってみました。
某コミュニティにこのような内容と思われる質問があったので、自分なりにやってみました。
記事投稿時間の横に Twitter みたいな「約～前」を表示する
- 2008年11月 2日 07:07
- JavaScript
Movable Type や WordPress の記事投稿時間の横に、Twitter のように、その記事を投稿したのが現在時刻から「約時間～前」というのを表示する JavaScript （ jQuery ）です。
経過時間を解析する仕組みは、「一定時間で自動的に消える New マークを付ける JavaScript の jQuery 版」のカスタマイズのときとほぼ同様で、小粋空間さんのところで紹介されている「新着エントリーのあるカテゴリーに New マークをつける」を参考にさせていただきました。
Movable Type で CAPTCHA 認証を使わないでスパム対策をしてみる
- 2008年10月28日 06:21
- Movable Type, テンプレート
CAPTCHA 認証は、ブログに限らず多くの Web サービスで取り入れられている代表的なスパム防止策です。もちろん Movable Type でも利用できます。しかし、 Web サービスによっては結構見づらかったり、そもそも規則性のない文字列を入力するのは面倒だったりします。
そこで、効果があるかは分かりませんが、もう少しユーザーに手間をかけないスパム対策を考えてみました。
Movable Type のブログ記事の公開日時を年号（元号）で表示する
- 2008年10月27日 00:17
- Movable Type, テンプレート
Movable Type のブログ記事の公開日時（ entryData ）などを「平成」などの年号（元号）にする方法を考えてみました。
例えば、このブログ記事の公開日時を次のようなタグで出力してみます。
<$mt:EntryDate format="%x (%a)"$>これを再構築すると次のように出力されます。
2008年10月27日 (月)こういった出力形式であれば、「日付に関するテンプレートタグのモディファイアリファレンス | Movable Type 4 ドキュメント」にあるとおり、format モディファイアで対応可能です。しかし、「平成」などの元号表示には、format モディファイアでは対応できません。
そこで変数を使って「年号表示」をする方法を考えてみました。
Movable Type の記事投稿画面の UI をカテゴリごとに変えるカスタマイズ （ jQuery 版）
- 2008年10月24日 06:21
- Movable Type
Movable Type の記事投稿画面で、各入力フォームのラベルや位置などのインターフェースを、カテゴリごとに変えられるように管理画面をカスタマイズしてみました。
カスタマイズといっても、管理画面のテンプレートはほとんどいじらずに、jQuery で書いた JavaScript テンプレートを読み込むだけです。もう少し正確に言えば、本体のテンプレートは一切いじらず、コピーをカスタマイズして、別のディレクトリに置くだけです。
カスタムフィールドのない MTOS や、マルチブログにするほどでもないけどちょっとインターフェースを変えたいんだよなーってときに役立つと思います。
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に参加した感想と実践です。実践したCSSを反映させるために個別ページでご覧ください。
僕が愛用している Firefox のアドオンの中に、Make Link というアドオンがあります。
これは、リンク用のソースコード等を右クリックから色々な形式でコピーすることができるようになるアドオンで、その形式も自由にカスタマイズ可能ということもあり、ブログを書くときに重宝しています。
今回は、この Make Link を使って、Amazon.co.jp アソシエイト（アフィリエイト）の「個別商品テキストリンク」を簡単に作成できるようにしてみました。
ちなみに、今回作成するのは、「本」についての以下のような形式の個別商品リンクです。
<a href="http://www.amazon.co.jp/o/ASIN/10桁のISBN/トラッキングID/">書名</a>WordPressの記事作成・編集画面で、各入力フィールドへジャンプするリンクをサイドバーに生成するプラグインを作ってみました。「投稿」「ページ」どちらにも対応しています。
Custom Field GUI Utility でフィールドを追加していたり、管理画面をカスタマイズして不要なフィールドを display:none; にしていたりしても、それらに合わせてリンクが生成されます。
使い方やダウンロードは以下のページからお願いします。
ブログのタイトル画像をアイテムで管理する
- 2008年10月 2日 12:15
- Movable Type, テンプレート
ブログのタイトルを画像にする方法としては、テキストを画面外へ飛ばして背景画像を表示させたり、単純に img 要素を使ったりと、いくつかの方法があります。
このブログでは、シンプルに img 要素を使って表示させています。ブログのタイトル（サイトタイトル）を img 要素にするのって、アクセシビリティ上敬遠されがちかもしれませんが（最近はどうなんだろう？）、ちゃんと alt 属性に適切な言葉を入れればいいじゃん、という考えです。
さて、今回は、知っている人には今更何をっていう感じかもしれませんが、ブログのタイトル画像を Movable Type のアイテムで管理してみます。
「出力ファイル名」と「公開日」を同時に変更する管理画面のカスタマイズ
- 2008年10月 1日 06:32
- Movable Type
今回のカスタマイズは少し前の「Movable Type のブログ記事の出力ファイル名を変更する管理画面のカスタマイズ」の続きです。
前回のカスタマイズでは以下のような機能を持つ「出力ファイル名を設定して保存」ボタンを追加しました。
- 出力ファイル名のロックを解除する。
- 出力ファイル名を「日-時分秒」のフォーマットで書き換える。
（例） 9月22日 6 時50分30 秒の場合：22-065030 - 書換え後にブログ記事を保存する。
- ただし、既に出力ファイル名がこのフォーマットになっている場合は、確認メッセージを表示し、書き換えて保存するか、書き換えずにそのまま保存するか分岐する。
今回は、この機能に次の機能を追加してみたいと思います。自分で使っていてかゆかったところに手を届かせた感じです。
- 出力ファイル名を書き換えるときに、同時に「公開日」も書き換える。
- 出力ファイル名を既に書き換えているか否かに関わらず、書き換えて保存するか確認する。
- その確認画面で「公開状態」のステータスを明示する。
『Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニック クリエイターが身につけておくべき新・100の法則。』を読みました。
Movable Type 4 に関する書籍はすでに多数出版されていて、この本はどちらかというと後発本ですが（ 4.2 対応としては早いです）、他の本とかぶっている内容があまりないので、すでに MT 本を何冊か持っている人でも役立つと思います。実際に僕も MT に関する書籍はこれで 8 冊目になりますが、それでもこの本はけっこう勉強になりました。
一言でこの本の印象を言うなら「MT 初中級者に役立つ 100 のTips 集」といった感じです。
Movable Type でアップロードするファイルサイズの上限を変更するとバックアップ時にエラーがでるっぽい
- 2008年9月27日 06:50
- Movable Type
特に必要に迫られたわけではないのですが、『Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニック クリエイターが身につけておくべき新・100の法則。』の法則90を読んで、なんとなく自分もアップロードするファイルサイズの上限を変更してみました。
それはそれで問題がなかったのですが、その後の法則92 を読んで思い出したように Movable Type のバックアップをやったわけですが、その時以下のようなエラーが発生しました。
何度か試しましたが、僕の環境では mt-config.cgi に CGIMaxUpload 環境変数を追加するとダメみたいでした。
一応、ご参考までに。
一定時間で自動的に消える New マークを付ける JavaScript の jQuery 版
- 2008年9月25日 05:36
- Webデザイン, JavaScript
小粋空間さんのところで紹介されている「新着エントリーのあるカテゴリーに New マークをつける」の jQuery 版を作ってみました。
このブログの「 Recent Entries 」（最近のブログ記事）のところにある星マーク（New マークのこと）がそれで（下図参照）、3日以内に作成されたブログ記事に表示されるようにしています。
このテクニックは、荒木さんご自身の著書『 Movable Type 4.2 パーフェクトガイド』の中でも紹介されていますし（573ページの「6.39 新着表示」）、WWW WATCHさんらの共著本『 Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニック クリエイターが身につけておくべき新・100の法則。』でも紹介されていました（146ページの「法則65 一定時間で自動的に消える New マークを付ける」）。
この JavaScript で New マークを表示するロジックは以下のようになっています。
Movable Type のブログ記事の出力ファイル名を変更する管理画面のカスタマイズ
- 2008年9月22日 05:53
- Movable Type
Movable Type のブログ記事の出力ファイル名は、デフォルトのままだと、タイトルから判断してシステムが自動的に作成します。
基本的には、タイトルに含まれる英数字を拾い出し、スペースはアンダースコア「 _ 」、すべてが日本語だったら「 post-1 」のようになります。
このシステムが自動的に作成するファイル名が結構イケてなくて、異様に長かったりアンダースコアやらハイフンやらがバンバン入っていたりすることがあります。また、異様に長いファイル名があったと思ったら「 post-1 」というファイル名があったりして、サイト内での統一が全く取れていないことに気付き、悲しくなったりもします。
Movable Type の知識がある程度あれば、最初からアーカイブマッピングを設定し、ブログ記事の ID をファイル名にしたり、投稿日時をファイル名にしたりして、統一することができますが、僕のように「とりあえず始めてみた」的な人は、こういった状態に陥ることは少なくないのではないでしょうか。
だからと言って、途中でアーカイブマッピングを変更するわけにもいかないし、毎回手動で変更するのも面倒なので、目をつむってしまうことも少なくないかもしれません。
そこで、ブログ記事の編集画面に、「出力ファイル名を設定して保存」というボタンを作るカスタマイズをしてみました。
