かたつむりくんのWWW

ウェブサイトとブログの構造を分かりやすくするユーザーダッシュボードのカスタマイズ #mt5

Movable Type 5 になってから、「ウェブサイト」と「ブログ」という概念でウェブサイトを構造的に管理できるようになりました、とまではいいんですが、それにしてはちょっとダッシュボードのウェブサイトとブログのウィジェットが、、、全然構造的じゃないじゃん、と思っていたんですね。

そこで「MTAppjQuery 0.06 リリース - ストラクチャー・ウィジェットでウェブサイトとブログの構造を視覚的に確認」ということで、MTAppjQuery プラグインにウェブサイトとブログを構造的に確認できるウィジェットを追加したわけです。

structure_widget.pngのサムネール画像

今日は、MTAppjQuery プラグインを使わずに、alt-tmpl でカスタマイズする方法を、自分の備忘録の意味でも書いておきます。

続きを読む

MTAppjQuery 0.06 リリース - ストラクチャー・ウィジェットでウェブサイトとブログの構造を視覚的に確認

Movable Type 5 の管理画面のスタートページである「ユーザーダッシュボード」。このページのメインのウィジェットで、そのシステム内の「ウェブサイト」「ブログ」が確認できます。

しかし、「ウェブサイト」「ブログ」がタブで分かれているのはいいのですが、ウェブサイトとブログの関係は、イマイチ分かりにくいですよね。

MTAppjQuery をインストールすると、このウィジェットに「構造」というタブが追加され、下図のように、ウェブサイトとブログの関係を直感的に確認することが出来ます。

structure_widget.png

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

$.MTAppSlideMenu() - MTAppjQuery でページの移動をスムーズに

MTAppjQuery - Movable Type 5 の管理画面をjQueryでカスタマイズしやすくするプラグイン」をアップデートしました。細々とバージョンアップしていて、現在 0.05 です。

今回の $.MTAppSlideMenu() は僕的にはかなり気に入ってます!

user.js に次の1行を追加するだけで、Movable Type のメニューが一気に使いやすくなります(バージョン 0.04 より追加)。

$.MTAppSlideMenu();

MTAppSlideMenu-01.png

現在のウェブサイトやブログは、マウスオーバーした状態のカラーで表示されます。

詳細やダウンロードは以下からお願いします(って、今回の記事に関する詳細はとくにありません)。

$.MTAppMsg() の使い方 - MTAppjQuery で管理画面にメッセージを表示

MTAppjQuery プラグインに同梱されている jQuery プラグインのうち、今日は「$.MTAppMsg()」について説明します。

続きを読む

$.MTAppFieldSort() の使い方 - MTAppjQuery でフィールドを簡単に並び替える

MTAppjQuery プラグインに同梱されている jQuery プラグインのうち、今日は「$.MTAppFieldSort()」について説明します。

続きを読む

$.MTAppMultiCheckbox() の使い方 - MTAppjQuery でマルチチェックボックスも簡単に作成

MTAppjQuery プラグインに同梱されている jQuery プラグインのうち、今日は「$.MTAppMultiCheckbox()」について説明します。

続きを読む

$.MTAppCustomize() の使い方 - MTAppjQuery で MT5 の管理画面をカスタマイズしよう

MTAppjQuery プラグインに同梱されている jQuery プラグインのうち、今日は「$.MTAppCustomize()」について説明します。

続きを読む

MTAppjQuery 0.01 リリース - Movable Type 5 の管理画面をjQueryでカスタマイズしやすくするプラグイン

mtappjquery-top.png

Movable Type 5 の管理画面を jQuery でカスタマイズしやすくするプラグイン「MTAppjQuery」を公開しました。当ブログで、MT4 の管理画面に jQuery を適用させるプラグイン「jQuery for MT」というのを公開しているのですが、その MT5 版といったイメージです。

さらに、今回は MTAppjQuery.js というファイルに、MT5 の管理画面を簡単にカスタマイズするための jQuery プラグインがいくつかセットされています。

これを機に、Movable Type の管理画面をカスタマイズして、少しでもクライアントさんが更新しやすいようなサイトにしてあげましょう!

詳細は以下からお願いします。なお、その jQueryプラグインの使い方は、順にブログ記事に書いていきます。

jQueryAutoHeight.js をフォントサイズを変更しても高さがそろうように使う

当ブログで公開している「jQueryAutoHeight.js - 複数のカラムの高さを最大値にそろえるjQueryプラグイン」を、フォントサイズが変更されたときにも高さがそろうように使う方法を紹介します。

ボックスの高さをそろえる JavaScript ライブラリといえば、to-R さんの「heightLine.js」が有名ですね。

このライブラリの中で使われているフォントサイズの変更を取得する方法が「文字サイズの変更を取得するJavaScript」という記事で紹介されているので、そのコードをお借りします。だったら最初から「heightLine.js」を使うよっていう声が聞こえてきますがw

続きを読む

5 Star Comment Rating を使ってブログ記事の評価ランキングを作るテンプレート

当ブログで公開している Movable Type のプラグイン「5 Star Comment Rating」は、Movable Type のコメント機能を利用して、ブログ記事に5つ星の評価を付けることができるプラグインです。

このプラグインについて、以下のような質問を頂きました。

記事の評価が高い順に、ランキング表示できたらさらにプラグインが生きると思うのですが、実装予定は無いですかね

これについては、プラグインで実装しなくてもテンプレートだけで実現できますので、その方法をご紹介します。

プラグインの基本的な使い方は「5 Star Comment Rating」のページを参照してください。

続きを読む

.@yujiro さんの『Movable Type 5 プロフェッショナルガイド』が良すぎる件(その2)

mt5probook.jpg

前回に続き、今日も小粋空間でお馴染の荒木勇次郎さんの著書『Movable Type 5 プロフェッショナルガイド』の感想その2を書きます。

今回もまた、人にオススメするのはもったいないくらいオススメなのですが、思い切ってご紹介します(なんかこれ、ショボいセールストークみたいですけど、本当ですよ。この本をじっくり読んでいるだけで、人より1段上に登れますからね)。

続きを読む

jQuery Multi-checkbox アップデート - labelオプションでチェックボックス項目を指定可能

昨日公開した「jQuery Multi-checkbox - テキストフィールドを複数選択チェックボックスに変えるjQueryプラグイン」ですが、少しアップデートしました。

最初の仕様は、<input type="text" /> に title 属性を設定することが前提でした。しかし、CMS の管理画面(主にMTを意識しているんですけど)では、title 属性を設定するのは面倒ですよね。

したがって、title 属性が設定できない場合にも対応できるように、label オプションを追加しました。

下記のように、カンマ区切りでテキストを指定すると、たとえ title 属性が設定されていたとしても、label で指定した値が優先されます。

以上です。

普通のinput:textを複数選択チェックボックスに変えるjQueryプラグイン - jQuery Multi-checkbox

昨日の「jQueryでボックスの中の画像の縦位置を中央に揃える」に引き続き、今日も jQuery ネタです。

今日は、普通の input type="text" を複数選択チェックボックスに変えてくれる jQuery プラグインを書いて見ました。選択されたチェックボックスの値が、元のテキストフィールドにカンマ区切りで入力されます。

利用シーンはあまりないかもしれませんが、チェックボックスをいくつも作るのが面倒なとき(笑)や、Movable Type のカスタムフィールドなど、CMS の管理画面でも使えるかも知れません。

詳細は以下からお願いします。

jQueryでボックスの中の画像の縦位置を中央に揃える

商品のサムネイルや商品名を入れたボックスを並べて、商品一覧などを作ることって結構あるのではないでしょうか。

そんなとき、写真のサイズが決まっていれば何の問題もありませんが、縦長だったり横長だったりする写真が混在するとき、それらの写真をボックスの中央に配置するのって結構面倒じゃないですか?

左右中央に配置するのは問題ありませんが、縦を中央に配置するのが結構厄介です。

そこで、そのような場合の縦位置を jQuery で中央に配置してみようという小ネタです。

続きを読む

『すぐわかる オブジェクト指向 Perl』という本を買いました

すぐわかる オブジェクト指向 Perl

藤本壱さんのMovable Type関係の制作者向けのPDF本『Movable Type Developer's Guide Volume 1』(Movable Type Developer's Guide特設ページ)で参考書として紹介されていたので『すぐわかる オブジェクト指向 Perl』という本を購入しました。

またがんばって読んでいこうと思います。

すべては「Movable Type エンジニア」になるために!

.@yujiro さんの『Movable Type 5 プロフェッショナルガイド』が良すぎる件(その1)

mt5probook.jpg

小粋空間でお馴染の荒木勇次郎さんの著書『Movable Type 5 プロフェッショナルガイド』は、期待通りにすごく良い本です。

発売後に急いで購入したものの、まだ全部を読み終えたワケではありませんが、それでも人にオススメするのはもったいないくらいオススメなので、思い切ってご紹介しちゃいます。

続きを読む

複数選択チェックボックスで選択された項目によって内容を変えるにはどうしたらいいの? - Custom Field GUI Utility の FAQ

本当は Movable Type に集中したいんだけど、ブログに質問を頂くので Custom Field GUI Utility 関係(当ブログで公開している WordPress のプラグインです)の記事を書いてしまう今日この頃です。

さて、当ブログに以下のような質問を頂きました。

複数選択チェックボックス(共通表示)で、 チェックを入れ出力された値に、該当ページのURLを自動的にリンク設定したいのです。 この値だったらこのURLにリンクを貼る、なんてことができるでしょうか。 (略)

この解決策を書いておきます。

続きを読む

第2子が誕生しました - 写真をふわっとイン

今日の11:31、無事に第2子が誕生しました。

2950グラムの元気な男の子です。Twitter でお祝いの言葉をくださったみなさま、本当にありがとうございます!!

助産院に着いてから2時間半の安産でした。二人目の子どもでも、安産でも、やはり涙が溢れ出ました。やはり我が子の誕生は嬉しいものです。無事に元気な赤ちゃんを産んでくれた妻に感謝しています。

さて、このブログでは Web関係以外のことは書かないというポリシーがあるので、最後に誕生したばかりの長男と、4年前に産れた長女の写真を「ありそうでなかった?要素をふわっと表示させるjQueryプラグイン whatInOut :: 5509(+1)」を使ってふわっとインします。

似てる。。。遺伝子とはすごいものですね。

jQueryAutoHeight.js を少しアップデートしました

先日公開した「jQueryAutoHeight.js - 複数のカラムの高さを最大値にそろえるjQueryプラグイン」を少しだけアップデートしました。僕のブログにしては、思っていたよりもブックマークされる数が多くて驚いている今日この頃です。

続きを読む

WordPressのカスタムフィールドで最初のn文字だけを表示して、残りを...にする方法は?

コメントで以下のような質問を頂きました。

(カスタムフィールドの)テキストエリアで入力したテキストに文字数制限というのは可能でしょうか?

例えば、トップページにテキストエリアで入力した文字を表示させるとします。

その時に、30文字以上は、「...」というように表示制限をかけることは可能でしょうか?

といことで、これを実現するサンプルを作ってみました。

続きを読む