かたつむりくんのWWW

Movable Type の記事投稿のエディタ部分を全画面表示するカスタマイズ

Movable Type の記事投稿のエディタ部分を全画面表示にできるように管理画面をカスタマイズしてみました。このブログ記事も全画面表示で投稿していますが、我ながらかなり便利です。

fullscreen02.gif

エディタ部分だけでは、使い勝手が悪いので、その他のフィールドや、保存ボタンなども一緒に表示されるようにしてあります。

続きを読む

MTParentCategories タグを入れ子の ul、li 要素で表示する

Movable Type の MTParentCategories タグを入れ子の ul、li 要素で表示してみました。使用用途は少ないかもしれませんが、このブログでは、ブログ記事の下の記事に関する情報として使ってみています(2008/12/15 現在)。

MTParentCategoriesタグを入れ子のul,li要素で表示したイメージ

続きを読む

Gmail のタスク管理機能(ToDo リスト)の使い方

Gmail のタスク管理機能(ToDo リスト)

Gmail にタスク管理機能が追加されたと色々なところで記事が上がっています。

このブログで今更取り上げても、ちょっと出遅れた感じがするので、ここでは初心者向けに丁寧にかつ具体的な使い方をちょこっとプラスして紹介してみます。

続きを読む

jQuery を使って長いソースや文章をアコーディオンさせるサンプル

長いソースコードや文章を簡単にアコーディオンさせる jQuery のサンプルを作ってみました。

ブログを書いていて、長いソースコードが出てきた場合、それをそのまま pre 要素で掲載しちゃっていいものか迷うときがあります。ソースコードを見て理解したい人には親切だけど、使い方とかだけを見たい人には邪魔だろうなーと。そういったときに、とりあえず非表示にしておいて、見たい人はクリックしてアコーディオンして見られれば便利かな、という単純な発想で作ってみました。

続きを読む

jQuery でテキストエリア内の文字はどのメソッドで取得する?

「jQuery でテキストエリア内の文字はどのメソッドで取得する?」と、ちょっと疑問に思ったので実験した備忘録です。

jQuery では、指定した要素の中の文字列は「 .text() 」、指定した要素の中のHTML は「 .html() 」で取得できます。また、input 要素( type="text" )の value については「 .val() 」で取得できます。

さて、では textarea 要素の中の文字列については、上記のすべてのメソッドで取得できそうなのですが、実際のところどうなの?というのが今回の疑問です。

続きを読む

Movable Type の管理画面にプラグイン無しでブックマークを追加するカスタマイズ

Movable Type の管理画面のメニューバーに、ブックマークを追加するカスタマイズを行ってみました。

tmpl_bookmark01.gif

このブックマークの追加については、「Bookmarks」というプラグインでも実現できるようですが、なんとなく僕の中で「自分で簡単にカスタマイズできるものは自分でやる」というポリシーみたいなものがあるので、今回もテンプレートのカスタマイズで実現してみました。

続きを読む

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 に参加した感想と実践

続きを読む