BlogTop > MTカスタマイズ Archive

MTカスタマイズ Archive

9 of 10

< Previous Page｜ Next Page >

メモ：mt.Vicuna simpleにSyntaxHighlighter 3.xの設置

Posted by: maRk
2011年6月15日 10:26
Last update: Jan 12, 2015 22:07
MTカスタマイズ

mt.Vicuna simple pluginテーマにSyntaxHighlighterを置いてみました。

コード表記の表示でみやすくするライブラリなのですが、mt.Vicuna simpleに設置をしてみましたので、そのときのメモとして記録しておきます。

mt.Vicuna Simpleはmt.Vicuna Simple - Movable Type Plugins and Themes Directoryから

行程の概要

大雑把な流れは以下のリストのようなものとなっています。

SyntaxHighlighter(version 3.x)の入手
必要なファイルをアップロード
テンプレートモジュールの作成とインクルード
mt:entrybody,mt:entrymoreの改行出力の調整
記事内のclass属性の変更

SyntaxHilighterの入手先：

SyntaxHighlighter (alexgorbatchev.com)

ファイルのアップロード：

自分の場合ですが、サイトのディレクトリ下にlibフォルダを作りその下にSyntaxHighlighterフォルダ、その配下にscripts,stylesフォルダとしてアップロードしています。

lib
- SyntaxHighlighter
  - scripts
  - styles

テンプレートモジュールの作成とテンプレート修正について

以降はmt.Vicunaテンプレート向けの話として記述しています。

管理上の都合でモジュールテンプレートとしてインクルードする形としました。コード内で使っている変数名は任意のものです。

具体的には専用の変数をあらかじめセットしておき、その値によりSyntaxHilighterを使えるようにするかどうかを判断して分岐させます。

ということで作成したSyntaxHighlighterという名のモジュールテンプレートは以下です。

<mt:SetVars>
Shlib=http://localhost/lib/SyntaxHighlighter/
</mt:SetVars>
<link href="<$mtvar name="Shlib"$>styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="<$mtvar name="Shlib"$>styles/shCoreDefault.css" type="text/css" rel="stylesheet" />
<script src="<$mtvar name="Shlib"$>scripts/shCore.js" type="text/javascript"></script>
<script src="<$mtvar name="Shlib"$>scripts/shAutoloader.js" type="text/javascript"></script>
<script type="text/javascript">
setTimeout ( function(){
    SyntaxHighlighter.autoloader(
         "bash                      <$mtvar name="Shlib"$>scripts/shBrushBash.js"
         ,"css                      <$mtvar name="Shlib"$>scripts/shBrushCss.js"
         ,"html xml xhtml           <$mtvar name="Shlib"$>scripts/shBrushXml.js"
         ,"js jscript javascript    <$mtvar name="Shlib"$>scripts/shBrushJScript.js"
         ,"perl pl                  <$mtvar name="Shlib"$>scripts/shBrushPerl.js"
         ,"plain                    <$mtvar name="Shlib"$>scripts/shBrushPlain.js"
         ,"php                      <$mtvar name="Shlib"$>scripts/shBrushPhp.js"
    );

SyntaxHighlighter.all();
},0);
</script>

この例ではあらかじめ変数に共通するSyntaxHighlighterのあるフォルダをセットしてmtvar(MTGetVar)で呼び出しをしています。使いたいテンプレートで階層に変化があっても困らないようにhttp://から始まるパスにしています。

Autoloaderについて簡単に触れておくと、使いたい言語のハイライトのためのJSを読み込んでくれるメソッドのようです。詳しくはよく知らなかったりします。

モジュールテンプレートをインクルード

先に示したモジュールのインクルードです。取り込み箇所は、今回はhead要素内にということにしてみました。

以下をHTMLヘッダーモジュールテンプレート内に記述します。場所はmeta要素より下ならば任意の箇所で。自分は<$MTCCLicenseRDF$>の上に記述するとしました。

<MTIf name="Shenabled" eq="1">
<mt:include module="SyntaxHighlighter" />
</MTIf>

以下を必要なアーカイブテンプレートなどの先頭のSetVarsテンプレートタグの中に追加しておきます。

Shenabled=1

MTEntryBody等の出力の修正

pre要素を使ったときに、出力で改行コードが減らされているために整形済のテキストを示せなくなるので（強制改行を使えば表現できますが）以下のようにモディファイアを取り去ります。

<MTIf tag="EntryBody" strip_linefeeds="1" trim="1">

上記の箇所を、以下のように。MTEntryMoreについても同様です。

<MTIf tag="EntryBody">

実際の利用

あとは、記事のなかのコードの箇所にコードを記述します。pre内で表示するのに、&などは文字実体参照に置き換えをします。これは面倒だというときの方法があるのですが、自分はMT記事編集画面で文字実体参照に一発変換するボタンを利用してるのでそのままの状態で使っています。

そしてその対象とする要素にclass="brush: js;"のように言語に応じてclass名を指定しておけば完了です。

ちょっと書き足りてない気はしますが、だいたいこのような形です。

Comments
TrackBack Closed

MT：カスタムボタン：公開日の秒数を切り上げ0に設定してフォームに投げるボタン

Posted by: maRk
2011年6月 4日 08:46
Last update: Jan 12, 2015 22:09
JavaScript | MTカスタマイズ | plugins

久々のCustom Editor Button用追加ボタンです。投稿日のフォームへ秒数を00にして切り上げた状態のものをセットします。

最近公開時間の秒数を00にそろえるというのが自分のマイブームとなっています（何をやってるんだか）。ようするにきっちりと揃えたいというだけなのです。前は現在時刻をフォームにいれるボタンを使っていましたが、秒数だけ修正するのに面倒になってきたのでボタンを作ることにしました。

config.yamlファイル

name: PublishDateSetZeroSecondsButton
id: PublishDateSetZeroSecondsButton
key: PublishDateSetZeroSecondsButton
author_link: http://www.markdiary.com/
author_name: maRk
description: utility button for Custom Editor Button2 plugins
version: 0.1
#
# require Custom Editor Button 2 Plugin https://github.com/aklaswad/mt-plugin-custom-editor-button-2/
#
buttons:
    util_curtime2:
        title: Publish Date would set as zero seconds to Current Time
        image: images/now0.png
        code: |
            function ceb_util_curtime2 (text, args) {
                function zp(num) {
                    if(num < 10){num = '0' + num;}
                    return num;
                }
                var now = new Date();
                    if (zp(now.getMinutes()) < 59 ){
                        var date = '' + now.getFullYear() + '-' + zp(now.getMonth() + 1) + '-' + zp(now.getDate());
                        var time = zp(now.getHours()) + ':' + zp(now.getMinutes() + 1) + ':00';
                        document.entry_form.authored_on_date.value = date;
                        document.entry_form.authored_on_time.value = time;
                    } else if (zp(now.getHours()) != 23 && zp(now.getMinutes()) == 59) {
                        var time = zp(now.getHours()+1) + ':' +'00:00';
                        document.entry_form.authored_on_time.value = time;
                    } else { var time = zp(now.getHours()) + ':' + zp(now.getMinutes()) + ':00';
                      alert('wait few minutes');
                }
                return undefined;
            }

config.yamlは、PublishDateSetZeroSecondsButtonフォルダにいれてpluginsディレクトリへ。now0.pngは適当な画像を/mt-static/plugins/PublishDateSetZeroSecondsButton/images/.にいれるとします。

＊　Custom Editor Button 2プラグインが必要です

Comments
TrackBack Closed

今月のいらんことしい（2011年5月）

Posted by: maRk
2011年5月22日 10:15
Last update: May 22, 2011 10:15
MTカスタマイズ | myown | net

今月（2011年5月）サイト内でカスタマイズした箇所をまとめたエントリです

アクションストリームから「Delicious」のサーヴィスを削除した
個別エントリーのパンくずリストではカレントページのタイトルを表示しないようにした
Google Chrome Frame対応のため、ヘッダーでX-UA-Compatibleの出力
MyBlogLogで発行したスクリプトを撤去した
いくつかのnofollow属性の削除

すでにDelicious(del.icio.us)利用者には通知が来ているのですが、Deliciousサーヴィスが米AVOSに買収となりました。

移管後のことを考えていまして、今回は利用サーヴィスから外すという方向でいくとしました。

パンくずリストにつては同タイトルのテキストが複数ページにあるのが気になってきたので試しにとることにしました。

トピックパスのところでclass=currentな箇所をmt:Unless name=tempName like=entryのような具合で分岐してあります。

MyBlogLogサーヴィスは今月24日をもって終了との発表がなされています。放置状態ともいわれていたこのサーヴィスですが、ブログやサイト運用にあたって支援となるツールも提供されていたのでちょっと残念ではあります。後継？にはYahoo! Pulseというサーヴィスをすすめられているようです。

Yahoo! MyBlogLog discontinuation details. | Yahoo Help

Yahoo! Pulse

Google Chrome Frame（Internet ExplorerでGoogle Chromeのエンジンで動作できるようするプラグイン）の対応は、ブラウザの判別分岐させて、PHPで以下のようにヘッダで出力するようにしました（アクセス解析だと滅多に訪問されるかたいらっしゃらないので何ですが）。

header('X-UA-Compatible: chrome=1');

これはmetaタグを使っても可能でして詳細は、Chromium Projectsの以下のページにあります。

Chrome Frame: Developer Guide - The Chromium Projects

今月のカスタマイズは以上です。以下に過去のカスタマイズ記録リストがあります

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

Comments
TrackBack Closed

今月のいらんことしい（2011年4月）

Posted by: maRk
2011年4月21日 08:32
Last update: Apr 21, 2011 08:32
MTカスタマイズ | myown

今月（2011年4月）サイト内でカスタマイズした箇所をまとめたエントリです

Mozilla Firefox ダウンロードのバナーを撤去
つれづれぼっくす（tsuredurebox.geo.jp）でWordPressのDBのテーブル最適化のためCRON設定
つれづれぼっくすでスマートフォン向けにWPTouchプラグインを導入

使用中のWordPressで特にこれといってオーバーヘッドが頻発したりするようなことはないのですが、定期的にということでCRON設定おこないました。実行間隔はやや多めにとっておきました。WordPressのヴァージョンアップ（3.1.1）もおこないました。

WPTouchは有名なプラグインで説明することもありませんが、スマートフォン用にページを最適化してくれる拡張です。実は先月いれていたのですがネタがなかったので。

このごろはWordPressばかりやってるみたいですが、Movable Typeもローカルのほうで5.1ベータ試していたりしています。

今月のカスタマイズは以上です。以下に過去のカスタマイズ記録リストがあります

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

Comments
TrackBack Closed

今月のいらんことしい（2011年3月）

Posted by: maRk
2011年3月21日 14:34
Last update: Jan 12, 2015 22:14
MTカスタマイズ | myown

今月（2011年3月）サイトでカスタマイズした点をまとめたエントリです

Tabアーカイブページでユーザーエージェントによる振り分けでiPhoneのときページカラムを変更

タグアーカイブページについてですが(例：tag movabletype)、iPhoneなどからみたときに1カラムのページになるようにclass指定で振り分けをおこなってみました。

Vicunaテンプレートでは、body要素に特定のclassを当てることで容易に変更が可能になっており、シングルカラムにしたい場合は、class="single"を、２カラムにしたければ、class="double"をつければよいわけです。ただし、CSSの記述の優先度などから、これらの値を混在させずに条件ごとに切り分けする必要があります。

ユーザーエージェントの情報取得には、mt-xsearch.cgi側から変数を渡す方法がわからなかったので、小粋空間さま提供のプラグインを利用させていただきました。

小粋空間: HTTPUserAgent プラグイン

ほんの一例にすぎませんが、以下のような形で。

<mt:SetVarBlock name="agent"><mt:HTTPUserAgent /></mt:SetVarBlock>

分岐させるのは、body要素の部分にて。

<body class="individual system<mt:if name="agent" like="iPhone|iPod|Android"> single<MTElse> double</mt:if>">

＊変数セットせずにタグの評価だけで分岐できるっぽいけどためしてないです。

今月のカスタマイズは以上です。以下に過去のカスタマイズ記録リストがあります

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

Comments
TrackBack Closed

今月のいらんことしい（2011年2月）

Posted by: maRk
2011年2月20日 10:17
Last update: Feb 21, 2011 14:51
MTカスタマイズ

今月（2011年2月）ブログのカスタマイズしたところをまとめた記事です

最初の月のカスタマイズは以下のとおりです。

新しいほうのはてなブックマークボタンをアーカイブページにつけてみた
インクルードしてるjQuery（本体）のヴァージョンをあげてみた
はてなブックマークのエントリページ用のRDFを追加

ブックマークボタンの記事は以下です。

カテゴリー、月別アーカイブに新はてなブックマークボタンをつけてみました

jQueryですが特にヴァージョンあげてなくても問題はなかったようなんですが、なんとなく。Google Ajax APIからのものをcode.jquery.comのCDNにしてみました。

詳細は以下に掲載されているRDFのコードです。

エントリー情報更新ボタンの利用範囲を拡大しました - はてなブックマーク日記 - 機能変更、お知らせなど

これをブログ記事のページとかウェブページ内に埋め込んでおきました。rdf:aboutには、MTEntryPermalinkとかMTPagePermalinkを、foaf:accountNameには「自分のはてなのID」をいれておけばいいわけです。あとこのRDFのコードはhead内におくとき、でラッピングしておかないとヴァリデーションサーヴィスなどで指摘されるみたいです。

これをファンクションタグ化してみようとしていたのですが、エントリページごとに出力するところまではできたんですが、アーカイブテンプレート毎での制御のしかたがいまいちわからなくて頓挫中（？）

とりあえず、作ってみましたよ。動くかどうかあやしいですけど。

今月のカスタマイズは以上です。以下に過去のカスタマイズ記録リストがあります

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

Comments
TrackBack Closed

今月のいらんことしい（2011年1月）

Posted by: maRk
2011年1月24日 11:33
Last update: Jan 24, 2011 11:33
MTカスタマイズ | myown

今月（2011年1月）サイトでカスタマイズしたところをまとめた記事です

今年（2011年）最初の月のカスタマイズは以下のとおりです。

Ajax JSON 検索のページにiPhone対応版を作ってみた
Movable Typeの管理ページのiPhone対応プラグイン、iMTをいれてみた
Yahoo!サイトエクスプローラーの認証用ファイルを削除
Google Analyticsのトラッキングコードスニペットをテンプレートタグに

Ajax JSON SearchのテンプレートをカスタマイズしてiPhone、iPod touch 対応のページを用意してみました。

実は試験的にiPhone向けページを作っていたりしたのですけれども、ある時期から止めてしまっています。今回検索ページのiPhone対応にこの時使っていた、cremaさん提供の「iPhoneテンプレートセットfor MT」を利用しました（とはいってもほとんど機能を使いこなせてなかったりします。iUIライブラリとか）。

iPhoneかiPod touchで検索のページをみていただきますと、iPhone向けのリンクが下に表示されます。

iMTプラグインはiPhoneほかのモバイルデバイスをサポートするプラグインでして以下からダウンロードできます。

movabletype/mt-plugin-imt - GitHub

iPhone向けページの確認中に気づいたのですが、ブラウザでUserAgent偽装して確認作業をしてるとき、MT管理ページ側で再構築をおこなってはなりません。（管理ページがiMTプラグインにより、iPhone用ページに切り替わり、その状態で再構築が実行され途中でエラーが帰ってくるので）もし再構築の必要があるのならば、ブラウザの偽装をデフォルトのUAに戻すなどします。

米Yahoo!のSite Explorerのほうも使っていましたが、どっちがどっちのファイルだか忘れてしまって、再び米Yahoo!の管理ページまでみにいってしまったという。。

Google Analyticsのコードはこれまでテンプレートモジュールでやっていたのをファンクションタグにしてみました。たぶんこの手のプラグインは探せばすぐ見つかるようなきがするのですけど、プラグイン作成練習のつもりで自分でプラグインにしてみました。好みの問題かもしれませんが、テンプレートタグを使うことでテンプレートの見た感じがすっきりするような気がします。

今月のカスタマイズは以上です。以下に過去のカスタマイズ記録リストがあります