2010年4月 Archive

ぬりえの原画配布のエントリ。菜花（なばな）です。

お恥ずかしい話ですが、冬菜を茹でずに置きっぱなしにしていたら、花が咲いてしまいました。瓶に入れて食卓に飾ることにしたのでその時撮影したものです。

もとの写真です。

ぬりえ原画は以下になります。

はてなフォトライフ（Hatena Fotolife）にもぬり絵原画があります。

• maRk's fotolife - maRks-nurie

Continue reading

Movable Type5 (MTOS5)の管理画面で各テーブルにてマウスオーバー時に行をハイライトするというカスタマイズです

tableの行ハイライトのデザインに慣れてしまうと、どうもどこでも実装してみたくなってしまいこのとおりでございます。

「ブログテンプレートの管理」とかtableで構成されているリストのあるページでマウスオーバーの時にハイライトになるというものです。

其レ、CSSで出来るよ（・∀・）というかたはその様にされて構わないのですけれど（んだども、セレクタが使える部分は大きいかなあとかなんとか）。

MTOS5.01-jaにて確認をおこないました（jQueryを使うのでMT5以降用です）。alt-tmplで代替テンプレートとして使用します。

{mtシステム}/alt-tmpl/CMS/include/ 以下に、{mtシステム}/tmpl/cms/include/footer.tmpl のコピーを置いて、以下のコードをfooter.tmplの先頭に追記します。

追記：すみません、selectedのときの背景色を考慮してなかったので書き直しました

<mt:setvarblock name="jq_js_include" append="1">
var addCss='';
addCss += '<style type="text/css">\n'
addCss += '.listTableHighlight { background-color : #e5ecf3 !important; }\n';
addCss += '</style>\n';

jQuery("head").append(addCss);

jQuery('table[id*=listing] tbody tr').hover(function(){
       jQuery(this).addClass("listTableHighlight");
}, function() {
       jQuery(this).removeClass("listTableHighlight");
});

</mt:setvarblock>

tableの縞々の背景色は手抜きでハイライト前の元の色を取得せずclass名、odd、evenに指定されていた背景色を使うことにしてるので、自分で好きな配色にされてるかたは（いるのか？）適宜変更が必要になるでしょう。

あ、いちおうプラグインらしきものも用意してみました。こういうの初めて作ったような気が。上のalt-tmpl使うのと同じです。footerに上記のコードを追加するだけです。それ以上の機能はありません。

• http://www.markdiary.com/sample/haifu/ListTableHighlight.zip (zip)

メモ的に。SetVarBlock（+append）を使った書き方をするのは好みの問題ですので直に代替テンプレートにjQueryのコードとか書き込んでも構わないと思います（自分が使う分には、という前提だけど）。SetVarBlockを使う方法でやってるのは、止めにしたいときに、SetVarBlockタグと中身をまるっと削除すればその部分はなかったことになるので。

そのような関係で、テンプレートに追加したいところに空要素書き込んでおいて流し込ませなくて、jQueryで要素を作って{append()/prepend()}するようなのをしばしばおこないます。

Continue reading

今月（2010年4月）、ブログでカスタマイズしたところをまとめたエントリです。

• 「あわせて読みたい」をウェブページ内にも表示
• タグアーカイブで（部分的に）結果があるかないかで分岐して出力
• これまでつけたタグの種類は幾つか？
• webディレクトリ内のフィードの作成
• utilitiesメニューリストのリストスタイルの変更
• サーバー間移動の実行

あわせて――は書いてあるとおりです。ソレ以上のものはありません。

タグ一覧ページですが、タグ検索の結果があった場合はタイトル内でタグ名が強調表示になるようにしてみました。NoSearchResultsをつかうところですが、この場合にMTUnlessによりNoSearchResultsを評価して分岐しています。以下のようなコードです（無駄に改行してますけども）。

<h1>Tag Archives : 
<mt:unless tag="NoSearchResults">
<strong><$MTSearchString$></strong>
<MTElse>
<$MTSearchString$>
</mt:unless>
</h1>

さて、これまでにつけてきたタグの種類（プライベートタグは含めない）は幾つか？と疑問におもったので、Tag一覧のページで表れるように改造しました。Cutoff Parameter機能のところで、数値を追加していってそれ以上加算されなくなった数値がタグの種類を示しています。

うまい方法がみつからなくて、タグリストをMTTagsのループで作り、__counter__変数の値を別の変数に渡して、そのテンプレートをページの本体でインクルードしたときに変数の値をもらってきて、あとごにょっとしてるという感じです（単にリストをolで出力すればよかったりもする）。

webディレクトリ内のウェブページの更新情報としてフィードを作成しておきました。特定のフォルダ内の（以下略）ということです。テンプレートはカスタムインデックステンプレートにて。RSS1.0の書式でサマリー程度のものです。RSS1.0の構文をみればあとは、MTのテンプレートタグで組むだけですのでそれ程面倒なことはしていません。関係ないのですが、フィードのテンプレート作成はMTタグのループの練習にいいのでないでしょうか（謎

• webページのフィード

ウェブページにつけられているタグをtaxonomyというモジュールを利用して分類を試みています。(あまりよい書き方でないのかもしれませんが)その箇所だけコードを抜粋しておきます。

rdf:resource属性ですが、タグアーカイブへのリンクとしましてmod_rewriteで変換されたURIをいれています。

<MTPageIfTagged><MTPageTags><dc:subject><$MTTagName normalize="1" encode_xml="1"></dc:subject>
</MTPageTags></MTPageIfTagged>
    <MTPageIfTagged><taxo:topics>
      <rdf:Bag><MTPageTags>
         <rdf:li rdf:resource="<$MTBlogURL$>tags/<$MTTagName encode_url="1" encode_xml="1"$>" />
      </MTPageTags></rdf:Bag>
    </taxo:topics></MTPageIfTagged>

なお、taxonomyモジュールによる拡張のため、ルート要素に名前空間宣言を追記しておきます。（xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/"）

サイドバーメニュー(utilities)内のリストスタイルを変えました。実際にはリスト内のa要素に対する背景画像を止めにした、といったところです。

これについては

• 次期Firefoxでは:visited疑似クラスのスタイルが制限される 水無月ばけらのえび日記

という記事を読んでの当方のアクションなのですけれども、今回は些か過剰反応気味でスタイルの変更に踏み切ってしまったかなあというおもい（反省はしてなくて）。

そういえば、自分が見てるときは、Firefoxで閲覧の履歴を残さないようにしてるので、訪問済みのカラーもスタイルが変わることはなかったような。。

サーバー間移動ですが、以下のページ等が参考になります。

• http://bizcaz.com/archives/2008/09/23-044634.php Movable Type 備忘録 - CORESERVER のサーバ間コピーやってみる
• CORESERVERのサーバー移動（作業手順メモ） | 普通のサラリーマンのiPhone日記

＊いちおう、自分がやったときの手順メモは残しておいたんですが、矢鱈に類似情報が増えるのもなんですしローカルに保存ということで（但し、最新の情報をチェックするということも勿論大切なことではあります）。

今月のカスタマイズは以上です。

これまでのカスタマイズリストは以下にあります。

• 当ブログのカスタマイズ記録

マジックブレットを使ってコーヒー豆を挽いてコーヒーを飲んでいます。

商品名儘ですけども、ミルサーを使われているかたは置き換えていただいて構わないです(たぶん)。

マジックブレットをコーヒーミルとして使ってる家庭も多いと思うんですけど、うちのとこも此れまで手動のミルでやっていたのを、マジックブレットにかえました。

コーヒー豆の量なのですが、豆の煎り方にもよるとおもいますが、1人分でだいたい8グラムから10グラムくらい。＊うちの場合、淹れる度に重さを軽量してます。

一番小さい専用のカップにコーヒー豆をいれて、カッター部と合わせていつも使うとおりにマジックブレットを動作させます。

1人分の量ですとおよそ5秒くらいで挽けるようです。＊あまり短い時間で挽きますと、荒削りがめだちますので少し慣れが必要に感じます。

あとはいつものようにドリップすればコーヒーの完成です。

淹れ方はコーヒーの専門家でないので割愛です。個人的にドリップ式がいいようにおもいます。

Movable Type 5のテンプレート編集画面において、左ペインのメニュー（以下省略して「メニュー」とします）を表示させたり隠したりするボタンをjQueryを使って作成

MT5では管理画面に3カラムが採用されました。テンプレートの編集画面では、XGAな環境には（テキストエリアの横幅がせまくて）一寸厳しい部分があります。

編集するテキストエリアを全画面表示されるプラグインはありますが、メニューを表示させないだけでも少しは違います。

スクリーンショット

• メニューが開いている状態

  

• メニューが閉じられている状態

  

ということで、FirefoxのアドオンStylishで確認して作成してみたのが以下のカスタムスタイルです。

下記に示すコードは当方が普段使っているモニタの解像度に基づいてるものですので、もし使われる場合は各自で（Stylish使うなど）確認しながら調整をおこなわれたほうがよいでしょう。

#menu{
clear:left !important;
position:absolute;
left:-170px;!important
}

#content{
width: 115%!important;
clear:left!important;
position:relative!important;
left:0!important;
}

そのままStylishにいれて、有効・無効を切り替えて使ってもいいのですが、折角ですので管理画面上に切り替えボタンがあればそのほうが使いやすそうですよね。

テンプレート編集画面の代替テンプレートを使って、このボタンを作成してみたいとおもいます。

注意点です。Movable Typeのヴァージョンが変わった際、構造が変更となった場合はその都度代替テンプレートの変更が必要となります。
＊この記事では、MTOS 5.01 jaを元にカスタマイズしております。

代替テンプレートの作成

1. 先にCSSファイルを用意します。下記のファイルを（任意のファイル名でいいのですが）ここではeditor-toggle.cssとして（mt-static/css/editor）以下に保存します
   

   
   .wide_view_menu{
    clear:left !important;
    position:absolute;
    left:-170px;!important
   }
   
   .wide_view_content{
    width: 115%!important;
    clear:left!important;
    position:relative!important;
    left:0!important;
   }
   
   #toggle_view{
    display: block;
    position:relative;
    padding-left: 4px;
    left: 0px;
    width: 145px;
    text-align : center;
    background-color:#ccc;
    cursor: default;
   }
   
   #toggle_view:hover { background-color: #eee; }

2. mt/tmpl/cms/ のedit_template.tmplファイルを開きます
3. edit_template_tmplを任意のエディタで開き全選択してコピーし、エディタの新規作成に貼り付けします

4. 貼り付けしたほうで、<mt:include name="include/footer.tmpl">という記述の上に以下のようなコードを追記します。

   <mt:setvarblock name="jq_js_include" append="1">
    var toggle_htm= '<a href="#" id="toggle_view"> &#62;&#62; </a>';
    jQuery("#container").prepend(toggle_htm);
   
   // toggle view actions
   
    jQuery("#toggle_view").toggle(
     function () {
       jQuery(this).text(" \u003E\u003E ");
       jQuery("#menu").addClass("wide_view_menu");
       jQuery("#content").addClass("wide_view_content");
     },
     function () {
       jQuery(this).text(" \u003C\u003C ");
       jQuery("#menu").removeClass("wide_view_menu");
       jQuery("#content").removeClass("wide_view_content");
     }
   );
   
   </mt:setvarblock>

5. 先に保存しておいた、editor-toggle.cssがテンプレート内に呼び出されるように、以下のコードも追記しておきます
   

   
   <mt:setvarblock name="html_head" append="1">
   <link rel="stylesheet" type="text/css" href="<mt:var name="static_uri">css/editor/editor-toggle.css" />
   </mt:setvarblock>

6. 以上書き換えが済んだら、edit_template.tmplとファイル名にして、mt/alt-tmpl/CMS/以下にファイルを設置します
7. 設定を終えたら、MT管理画面にログインしますと、先に示しましたスクリーンショットのとおりです

• http://www.markdiary.com/sample/haifu/ShowHideLeftMenu.zip" class="event_file">ShowHideLeftMenu.zip

5.1x 以降は、以下にあります。

• https://bitbucket.org/markdiarycom/showhideleftmenu/downloads

Continue reading

ページのテキストを選択し反転表示になってる状態でテキストの内容をフォームにというやつです。

テストページとして作成したものです。

• Selected textの何か

document.getSelectionとか、その辺のです。よくマウスでテキスト選択したら何かあらわれてくるみたいな。ヒトによってはお節介にみえるというか。。

テストページでVicunaテンプレートのID名とか使わせてもらいましたが、本当のところは実装してみようかなとか思ってたのですけど、完成度がいまいちだったので取りやめにしました。

テキストエディタTeraPadで、HTML入力の補助をサポートする、HTML Helperというツールを入れてみました。以下に簡単にまとめておきます。

ダウンロード

• HTML Helper with TeraPadの詳細情報

作者サイト

• Soraneko.net

TeraPad

• TeraPad

HTML Helperのセット

展開後のHelp.htmlを読めばすぐにセットできます。

ツールの設定のところで名前を「HTML Editor with TeraPad」、実行ファイルのところに、HTMLHelper.exeまでのパスをいれてOKを押下します。

使うには

TeraPadのツールのメニューから、HTML Editor with TeraPadを選択でHTMLHelper.exeが起動します。

起動するとツールバーにHTML Editor with TeraPadの各機能ボタンが追加されています。あとは、「T」というボタンをクリックすると登録済みのタグを選択してエディタに文字をおくことができます。

他の機能については、Help.htmlの使い方に記載されています。

登録タグのカスタマイズ

v.1.10からタグの編集・オリジナルタグの追加が可能となっているようです。Tag.iniファイルを編集することで独自のタグなどを登録できます。

&に続くのがタグで、%に続くのが項目名です。気をつけたいのは、項目にタグを追加したいとき項目名の次にしておくということです。仕様だと思うのですが、タグの順番がエディタのメニューではTag.iniと逆になっています。

ということでDOCTYPEだとかMETAタグ、見出し、リストあたりを登録してみました。

Windows＋InstaMT＋Another HTML-lint gatewayの環境をそろえてみました。

Another HTML-lintはHTML文法のチェックだとか、細部にわたってチェックをしてくれるツールです。これを、InstaMTでMovable Typeのローカル環境をそろえた状態に組み込みMTなどと連動させるまでをやっておりました。

• メモ：InstaMT環境にAnother HTML-lintを設置する « maRkdiary.com

手順とかいろいろと整理しながら書いているのですが、言葉とかで説明してると長ったらしくなってきて、なかなか記事作成が思うように完了しないというのが実際のところです（別に需要とかないだろうからどうでもいいけど）。InstaMTはActive Perlが入っており一応AHL動作の環境は揃っていたりします。

そんなわけでとりあえず動かしてみたーよ、というのを一部スクリーンショットにて紹介という形でおおくりいたします。

先ずは、MTの管理画面にHTML-lintのボタンを追加したところです。alt-templateを用いて管理画面の変更をおこなっています。

カスタマイズしたボタンは作成記事のパーマリンクをもとにして、ボタンをクリックしますと、Another HTML-lint gatewayに送られるといった動作です。

以上です。メモ的な記事は長くなりそうなので特設ページとして作成するつもりです。でき次第ここで紹介してみようとおもいます。追記：できました