BlogTop > MTカスタマイズ Archive

MTカスタマイズ Archive

all of 10

すべてのページ

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

今月（2022年 4月）、サイトでカスタマイズした点をまとめたページです。

  • * テンプレートテーマ mt.Vicuna-HTML5 を lab に適用
  • * lab の Google Analytics を GA4タグに移行

MovableType向けテーマは、 HashiM 運営の mt.Vicuna 専用サイトにて配布されています。

https://mtvicuna.kita2.net/

mt.Vicuna-HTML5 ですと、Googleアナリティクス向けモジュールの読み込みが、</head> 付近にあったと思いますが、

GA側で指定されていますように、HAED 開始タグの直下にインクルードモジュールされた方が良いかと思われます。

（おそらく後で修正してくださるかと）

GA4 は、Google アナリティクス ユニバーサル アナリティクス 終了するとのアナウンスがありましたので対応しています。

https://support.google.com/analytics/answer/11583528

今月のカスタマイズは以上です。バックナンバーは以下です。

今月のいらんことしい（2020年 12月）

今月（2020年12月）、本年最後のサイトでカスタマイズした点をまとめたページです。

  • labs.markdiary.com のvicuna HTML5テンプレートの パンくずリストの修正

パンくずリスト（topic_path）には、マイクロデータとして、data-vocabulary.org のスキーマが採用されていたのですが、Google のコンソール側でサポートが終了するといった警告が出ていましたので、schema.orgに移行しました。

参考：

構造化データを伝える方法として、JSON-LD という方法が割と楽に実装できるらしいのですが、そのために別にモジュールを作成したりなどする必要があり、今回は見送りHTMLを修正するようにしました。

しかしながら、 vicuna テンプレートの topic_pash は条件分岐が複雑なのでかなり苦労しました（何回もリッチリザルトのチェッカーに怒られてる）。

今月のカスタマイズは以上です。バックナンバーは以下です。

今月のいらんことしい（2020年 11月）

今月（2020年11月）、サイトのカスタマイズした点をまとめたページです

  • labs.markdiary.com を https ~ に変更

今月のカスタマイズは以上です。バックナンバーは以下です。

今月のいらんことしい（2020年 10月）

今月（2020年10月）、サイトのカスタマイズした点をまとめたページです

  • Google Analytics 4 プロパティへ移行開始
  • ブログ記事のタグアンカーの文字の前にハッシュマークを付与

タグのハッシュマークは、SNS上でハッシュタグの共有が行われている傾向に合わせたものです。

Google Analytics は GA4としてリリースがありました。

改善点は幾らかあるのですが、個人としては、基本的なイベント計測が自動で行われるので、こちら側が計測用スクリプトを用意しなくて済むのは大きいと考えました。

副作用というか、GA4には今の時点で、データにアクセスできるようなAPIが用意されてないようでした。

したがって、これまでのタグを全て変えてしまいましたので、MovableType管理ページからのAPI経由の情報が取れなくなっています。（GA4では以前のプロパティを使わないようになってる）

iOSアプリからも参照できることから、あえてMovableTypeのダッシュボードでみる必要もそれほどなくなっているのは事実ではあります。

今月のカスタマイズは以上です。バックナンバーは以下です。

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

今月のいらんことしい（2019年 6月）

今月（2019年 6月）、サイト内でカスタマイズした点をまとめたページです

  • * はてなブックマークページのHTTPS化に伴い、リンク先スキームをhttps:に変更
  • * WordPress プラグインで、Twitter Blackbird Pie 不使用につき、使用した記事を編集
  • * MTGetVar テンプレートタグ（現在非推奨）をMTVarタグへ変更
  • * ActionStreams で「はてな」関係のストリームを削除

はてなブックマークのHTTPS変更は以下に情報があります。

基本、http始まりのリンクはリダイレクトされるらしいですが、修正することをおすすめする、としています。

Blackbird Pie はツイートの内容を簡単に埋め込むためのものですが、エディタでリンクをペーストするだけで事足りてしまうので使用しないことにしました。

MTGetVar は非推奨タグになっていたため、MTVarへ置換しました。

（MTVar の説明ページでは、今現在でmt:getvar のエイリアスという記述となっています。）

ActionStreams では、はてなブックマークへの情報取得に失敗してエラーがログに記録されており、調べてところフィードが、ほぼ死んでる状態にあったので、はてなの他サービスも終了しているものもありましたので、プラグインごと削除しました。

今月のカスタマイズは以上です。バックナンバーは以下です。

今月のいらんことしい（2018年12月）

今月（2018年12月）、本年最後のサイトでカスタマイズした点をまとめたページです

  • WordPress 5.0xへアップデート
  • WordPress oEmbed 対応
  • Movable Type oEmbedテンプレートの吐き出すJSONの author_url をHTTPSへ変更

oEmbed が機能していなかったので修正。

テーマの functions.php にwp_oembed_add_provider() を追記

以下に説明があります。（英語）

今月のカスタマイズは以上です。バックナンバーは以下です。

今月のいらんことしい（2018年6月）

今月（2018年6月）、サイトでカスタマイズした点をまとめたページです

  • * XML-RPCのCGI停止

XML-RPC APIに対応したクライアントを現在使用していないため、停止（パーミッション変更）にしました。

今月のカスタマイズは以上です。バックナンバーは以下です。

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

今月（2018年5月）、サイトでカスタマイズした点をまとめたページです

  • WordPress で公開後1年以上経過の記事にメッセージを挿入
  • 検索ぺージが動いていなかったのを修正
  • target=_blank のあるリンクに rel=noopener を付与した

古い内容の記事に注意書きをするのに、「WP Posts Date Alert」というプラグインを使いました。

プラグインについては、以下のページに詳細があります。DL先も記載されています。

今月のカスタマイズは以上です。バックナンバーは以下です。

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

今月（2018年4月）、サイトでカスタマイズした点をまとめたページです

  • はてなブログ (maRkの)の　HTTPS設定
  • TypePad API キー 解除
  • Action Streams のページリンクを本ブログ外のディレクトリーのほうに変換

はてなブログ側で読み込んでいるファイルを、https://からのURLで読むように変更しました。

TypePad APIキーは、コメントで使う必要性がなくなってましたので、TypePad側から、登録済みキーを空欄にしてクリアしておきました。

今月のカスタマイズは以上です。バックナンバーは以下です。

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

今月（2018年3月）、サイトでカスタマイズした点をまとめたページです

  • * Movable Type を 6.3.7 向けのパッチを適用
  • * サイトトップページの Feedly 登録ボタンのURLが違っていたのを修正

Movable Type 6.3.7 へのパッチが提供されていましたので、ダウンロードしてあてておきました。

今月のカスタマイズは以上です。バックナンバーは以下です。

今月のいらんことしい（2017年10月）

今月（2017年10月）、サイトでカスタマイズした点をまとめたページです

  • www.markdiary.com をSSL化
  • サイトSSL化につき、Google Search Console に https://~ サイトを登録
  • Google Analytics のビューで 使用するURLを http から httpsに
  • FancyBox 動作不具合で調整
  • 個別記事ページの「はてなスター」を削除
  • MovableType 6.3.6 へアップデート

CoreServer.jpの無料SSL対応につき、本サイトもSSL化にしてみました。

簡潔にまとめると、サーバーの管理画面で無料SSLを利用する設定にする、ドメインウェブの調整をする（新しいコントロールパネルだと細かい調整がやりにくいので旧コントロールパネルを利用）。

Movable Typeの設定でサイトのURLをhttpsに直す。

混在コンテンツの問題を解消する（テンプレートで読み込むファイルを httpsから読むように直す）。CSSで画像に対して、直接URLで指定されている箇所を変更する。

といった感じです。

Google Analytics 設定も「https」に変えておきました（トラッキングコード自体は変更なし）。

Search Console の方は、www ありとなしとで両方 https:// で始まるURLに登録するようですので、これも登録しました。

はてなスターは反応状況からと、はてなスターのJSが、PageSpeed Insights に必ず引っ掛かるので削除することとしました。

MovableType は、セキュリティアップデートがありました。

今月のカスタマイズは以上です。バックナンバーは以下です。

今月のいらんことしい（2017年9月）

今月（2017年9月）、サイトにカスタマイズした点をまとめたページです

今月は、Coreserver 側で無料SSL (Let's Encrypt)の準備ができていたため、それに関する設定等です。

  • PHPのバージョン設定を全て 7系に
  • tsuredurebox.geo.jp に対してSSL設定
  • Movable Type の環境変数、SSLVerifyNoneを削除

以下にバリュードメイン(以下、VD)からのお知らせがあります。

マニュアルには、SSLサイトを「新規作成」する方法で説明されていますが、実際のところは既存サイトごとの設定の変更で、無料SSLの利用設定をすればいいようです。

今回は、お試しで VD提供のサブドメインのサイトでSSL設定をしてみました。

設定方法は、新コントロールパネルでの説明になりますが、サイト一覧から目的のサイトを選んで、「サイト設定の変更」を押下、SSLの設定のところで、「無料SSL」を選択してから反映させます。

WordPress側では、「設定」の一般で WordPressアドレス・サイトアドレスをそれぞれ https://　から始まるようにします。

VDのサブドメインで行ったため、http:からのリダイレクトは設定ずみのようで、.htaccessに記述しなくても問題ないようでした。

あとは、http:から始まるファイルのリンクを書き換えするなどです。（混在コンテンツとして、ブラウザで警告表示が出たり、表示ブロックがなされたりするので）

記事内では、検索系のプラグインを使って一気に書き換えるといった情報がWebでは幾つか見られます

今月のカスタマイズは以上です。バックナンバーは以下です。

今月のいらんことしい（2017年8月）

今月（2017年8月）、ブログでカスタマイズした点をまとめたページです

  • Live Dwango Reader登録リンクを削除した
  • LDR Pocket 登録ボタンを削除した
  • その他フィード登録のモジュールのインクルードを解除

Live Dwango Reader 及び LDR Pocket のサービス終了のアナウンスが出ていましたので、登録リンク等を削除しました。

今月のカスタマイズは以上です。バックナンバーは以下です。

今月のいらんことしい（2017年7月）

今月（2017年7月）、サイトでカスタマイズした点をまとめたページです

  • Movable Type を 6.3.5 へアップデート

v6.3.5が提供されていましたので適用しておきました。

なお、このバージョンにはパッチが提供されています。

今月のカスタマイズは以上です。バックナンバーは以下です。

今月のいらんことしい（2017年6月）

今月（2017年6月）、ブログのカスタマイズした点をまとめたページです

  • jQuery のバージョンをアップデート
  • jQuery Cookie を js.cookie.js へ
  • カテゴリーページの関連ツイート表示を削除

3.0.0 だった jQuery を 3.2.1へ上げました。

jQuery Cookie も古いバージョンだったし、動作してないことがあったので修正しました。

jQuery Cookie の時と使用方法が若干異なっているので注意します。

Cookies.set('name', 'value');

基本、Cookies.xxxx() といった形式に変わります。

今月のカスタマイズは以上です。バックナンバーは以下です。

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

今月（2017年3月）、ブログでカスタマイズした点をまとめたページです

  • Movable Typeを v6.3.3へアップデート

Movable Type 6.3.3は、主にクラウド版への対応がメインですが、そのほか、バグ修正・パッチ等々取り込まれているとのことです。

今月のカスタマイズは以上です。バックナンバーは以下です。

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

今月（2017年1月）、今年最初のサイトでカスタマイズした点をまとめたページです

  • Movable Type 6.3.x 向けパッチ適用を差し戻し
  • AMPページに Analytics を設定

Movable Type にパッチが提供されていましたが、ダイナミックなページにエラーがでるようになっていたので差し戻ししました。原因は不明です。

AMPページの計測をするために、AMPページ向けアナリティクスを設定しました。

説明は以下にあります。

今月のカスタマイズは以上です。バックナンバーは以下です。

今月のいらんことしい（2016年12月）

今月（2016年12月）、今年最後のサイトでカスタマイズした点をまとめたページです

  • Movable Type 6.3.x 向けパッチを適用した
  • 記事ページの Evernote Clip it ボタンを外した

Movable Type にパッチが提供されていましたので、ダウンロードして適用しました。

今月のカスタマイズは以上です。バックナンバーは以下です。

今月のいらんことしい（2016年11月）

今月（2016年11月）、ブログでカスタマイズした点をまとめたページです

  • 月別アーカイブインデックスページの修正

月別アーカイブインデックスを復活させて、サイドバーのリンクも戻しました。

今月のカスタマイズは以上です。バックナンバーは以下です。

今月のいらんことしい（2016年10月）

今月（2016年10月）、ブログでカスタマイズした点をまとめたページです

  • - PHPカスタムテンプレートの修正

拡張子 .php のカスタムインデックステンプレートで、純粋なPHPのみのテンプレートがあるので、これらテンプレートの閉じタグ（?>）を入れないようにしました。

今月のカスタマイズは以上です。バックナンバーは以下です。

今月のいらんことしい（2016年9月）

今月（2016年9月）、サイトのカスタマイズした点をまとめたページです

  • - Movable Type を6.3にアップデート
  • - PHPのバージョン変更
  • - テクノラティプロフィールのリンク削除
  • - 月別アーカイブページへのリンク削除

Movable Type 6.3 がリリースされました。PHP7対応と幾つかの追加機能・修正等が含まれています。

PHP 5,5系は Security fixes のサポートが切れているので、サーバの設定画面から切り替えを行いました。

今月のカスタマイズは以上です。バックナンバーは以下です。

今月のいらんことしい（2016年6月）

今月（2016年6月）、サイトのカスタマイズした点をまとめたページです

  • movabletype.jp がSSL化されたようなので、記事内のリンクを置換
  • ページ上でトグルを行うためのJS (toggle.js) が必要のない個別記事ページで読み込まれていたのを修正
  • Feed の登録リンクで、My Yahoo! への登録リンクを削除
  • jQueryのバージョンを 3.0 に変更した

RSSの My Yahoo! への登録は、My Yahoo! サービス終了とのお知らせがありましたので、外すことにしました。

jQuery は 3.0 が正式にリリースされました。

上記ページを参考に当サイトで部分的に書き換えをしておきました。

具体的には、$.ajax() 周りと、document-readyが、$(fn)の形式になるように等。

今月のカスタマイズは以上です。バックナンバーは以下です。

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

今月（2016年5月）、サイトのカスタマイズした点をまとめたページです

  • - WordPress のプラグイン、　Ktai Style を削除
  • - WordPress の 4.5.2 セキュリティリリースを適用
  • - サイトの使用PHPバージョンの設定変更
  • - header要素に role = banner とある箇所の属性削除

Movable Type 、WordPress 運用のPHPバージョンをそれぞれあげました。

WordPress は、Plupload ライブラリに脆弱性があるとのことで、アップデートをおこないました。

role = banner はバリデータで、不要だと言われるので削除しました。

今月のカスタマイズは以上です。バックナンバーは以下です。

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

今月（2016年4月）、サイトのカスタマイズした点をまとめたページです

  • mixiCommenter プラグインを削除した
  • WordPress を4.5 にアップデート
  • 使わない WordPress テーマを削除
  • Bookmarks ページのブックマークリストを delicious から Hatena::Bookmarkに変更した

mixi の OpenIDサービスは提供を終えているため、システムから削除しました

（v6.2.4から同梱されず）

DISQUSコメントにとっくしてあって、MTのOpenIDの方は使っていない状態でしたが、削除することで、これまで mixi IDでコメントされた方についていた mixiアイコンが出なくなります。

参考：

WordPress テーマは未使用でもアップデートがあれば更新に出てくるので、使わないテーマは削除しました。（管理画面のテーマのところで可能）

Delicious ですが、オーナーが変わったり、サイト変更があったりなど、サービスとして不安定な状態が継続してるため、はてなブックマークの方でブックマークしたリストで掲載しています。

はてなブックマークのフィードを YQL(Yahoo! Query Language)へ渡し、JSONで返ったものを処理する形にしています。

YQL側でキャッシュされていることと、取得方法を一度覚えたら、ほとんど統一された形式で他のフィードの取得ができるなどのメリットがあります。

Movable Type ならば、Action Streamsプラグインのテンプレートタグで表示できたりしますが（はてなブックマーク用の Streams configが必要）、cronジョブ等で定期更新しないと反映のタイムラグが大きい、といったことがあります。

今月のカスタマイズは以上です。バックナンバーは以下です。

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

今月（2016年3月）、サイトのカスタマイズした点をまとめたページです

  • Movable Type を 6.2.4 に
  • Movable Type 6向け修正パッチを適用
  • LiveDwango リーダーへの登録リンクを reader.livedwango.com サブドメインに変更した
  • 個別記事アーカイブをAMP対応させた

あまり Google Chrome で編集したりはしないのですが、Chrome での問題修正パッチが出ています。

AMP (Accelerated Mobile Pages) は、モバイル端末向けページを高速表示させるためのプロジェクトで、米グーグルと Twitter共同で立ち上げたものです。

Movable Type 関係では、以下のとおり

などでまとめられています。

てっとり早く対応するには、記事アーカイブテンプレートに AMP用のテンプレートを作成してマッピング設定して、記事内の禁止されている、タグ・属性群を削除・変換して運用することです（対応させるまでに手間がかかるのが現実なんですけれども）。

このブログで使っているもののベースのようなテンプレートです。 Google Analytics など AMP付随のモジュールを使っていません。

今月のカスタマイズは以上です。バックナンバーは以下です。

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

今月（2016年2月）、本年最初のサイトでカスタマイズした点をまとめたページです

  • スタイルシートで、Mac IE5向けのCSSハックを削除した

Mac IE5は、現状まず、その環境の訪問者が皆無なので削除にしておきました。対応環境以外はコメント扱いなのでそのままでも実害はないのですが。

今月のカスタマイズは以上です。バックナンバーは以下です。

今月のいらんことしい（2015年12月）

今月（2015年12月）、今年最後のサイトでカスタマイズした点をまとめたページです

  • Movable Type を 6.2.2 にアップデート
  • サイトで使用する PHP のバージョンを変更した
  • 使用している WordPress を4.4 にアップデート

WordPress は 4.4から oEmbed プロバイダー機能がつくようになりました。他のWebサービスで、oEmbed 対応していれば、URL 張り付けだけで、記事埋め込み用 HTML を取得できます。

今月のカスタマイズは以上です。バックナンバーは以下です。

今月のいらんことしい（2015年11月）

今月（2015年11月）、サイトでカスタマイズしたものを記録したページです

  • Movable Type を 6.2 のパッチ適用
  • Pinterest アイコンが読み込めなかったのを修正

Movable Type 6.2 でエントリーのベースネームに関係する不具合修正パッチが配布されていたので、適用しておきました。

Pinterest でアイコンの場所が変わったか何かでしばらく読み込みできなかったようなので、こちら側の環境にアイコンを置くようにしました。

法人向けではありますが、以下のページでアイコンをダウンロードすると、各種サイズのアイコンが同梱されています。ガイドラインもあるので一応、目をとおしておいたほうがいいように思います。

今月のカスタマイズは以上です。バックナンバーは以下です。

今月のいらんことしい（2015年10月）

今月（2015年10月）、サイトでカスタマイズしたものを記録したページです

  • - Movable Type を 6.2 にアップデート
  • - SSL証明書の検証のアラートがでるのを環境変数で無効に
  • - Akismet の APIキーが有効期限切れとのことなので更新した

SL 証明書の検証ができません。

このメッセージを消すには、Mozilla::CA モジュールをインストールするか、mt-config.cgi に "SSLVerifyNone 1" を指定してください。

Mozilla::CA は自前でいれてはいたんだけど、パスをとおしてなかったんで警告がでてました。 とりあえずは 、環境変数に指定して、SSL 証明書の検証なしの設定にしておきました。

WordPress で設定などみたいたところ、Akismet のところで、有効期限切れといったアラートがでていました。

再度登録するのですが、実際のところは WordPress.com でサインインして、再び選びなおし（自分の場合はフリーのプラン。スライダーを左のほうにもっていくと課金が0になる）。

新しい API キーが発行されるとおもっていましたが、前に使用したものでした。

今月のカスタマイズは以上です。バックナンバーは以下です。

今月のいらんことしい（2015年9月）

今月（2015年9月）、サイトのカスタマイズを記録したページです

  • ダッシュボードウィジェットに今日のアクセス記事とページビューを表示するウィジェットを作成した

PHPで Analytics のデータを処理できるようになったので、Movable Type 管理画面に入った当日のアクセスの多い記事のリストを表示させるダッシュボードウィジェットを作成してみました。

これで、サイト情報のウィジェットとあわせれば、ちょっとした情報をみたいとき、Analytics にいくことなくチェックできる、ということになりました。

今月のカスタマイズは以上です。バックナンバーは以下です。

今月のいらんことしい（2015年8月）

今月（2015年8月）、サイトのカスタマイズを記録したページです

  • Movable Typeのテンプレートタグのリファレンスリンクを補助するボタンで、リンク先を正規のURLに変更
  • Google Analytics からのアクセスランキング表示の取得をPHPにした
  • ダッシュボードにAnalytics でのリアルタイム訪問者数のウィジェットをいれた
  • 拡張子が.php などのカスタムインデックステンプレート編集で CodeMirrorが適用できるようにした

Analytics データのPHPでの取得方法は、以下のページを参照しましした。

ほとんどチュートリアルに沿っておこなうだけでした。要点だけまとめます。

  • API コンソールのクライアントIDの作成のところで、「サービスアカウント」を選択します
  • 秘密キーファイルがダウンロードされます。サーバーにアップロードして認証のときにつかいます
  • アナリティクスで、ユーザー管理にて、クライアントのユーザを追加します
  • 前掲のページにあるような取得データを表示するページをPHPで作成します（MTで管理する場合は、公開プロファイルは手動としておきます
  • そのページ内で $array = json_decode($json,true); とかして、JSONパースしてHTML出力になるようにしておきます
  • ブログテンプレートのインクルードでランキングページを取り込むようにします
  • Ranking.php は表示に若干時間かかるので、Cache Lite使うなどしてキャッシュさせておきます

Analytics API のリアルタイムの取得には以下を参考にしました。

出力用のPHPを用意して、JSONを読み取るダッシュボードウィジェットを作成するだけです。

編集の シンタックスハイライトのやりかたは以下にメモしてあります

realtime-active-user-widget.jpg

今月のカスタマイズは以上です。バックナンバーは以下です。

今月のいらんことしい（2015年7月）

今月（2015年7月）、サイトでカスタマイズした箇所をまとめたエントリです。

  • RSD （Really Simple Discovery）テンプレートへのリンクをHTMLヘッダから削除した
  • labs.markdiary.com の管理をMTOSから、個人無償版のほうへ移動した
  • スマートフォン向けページでページ上部のサイト内検索などをClose するボタンをつけた
  • 記事ページのTrackback表示に overflow : hidden をつけた

rsd.xml は、外部ツールへAPIの場所を伝えるものなのですが、実質使用していないこと、Data APIを使用したツールを使うと必要がないという理由から、link要素によるオートディスカバリーを削除することにしました。

MTOS の 製品ライフサイクルが 2015年9月30日をもって終了となることから、 MTOSで運用していた maRk labをこっちのほうに移動するとしました。

リポジトリのほうは存在するようですが、今後セキュリティパッチが提供されなくなることから、移行を検討せざるを得なくなりました。

ライセンス上から、ブログのバックアップ復元のためのアップグレードインストールができないので、記事をエクスポートして取り込むという方法で移動させました。

幸いなことに、記事数が少なかったので確認にそれ程手間はかかりませんでした。

テーマは、これを期にレスポンシブにも対応している、mt.Vicuna の HTML5 版を使ってみました。

おおまかな移行手順を書きます。

  • あらかじめ、 labs.markdiary.com/ 以下のバックアップをとる ( cp コマンドだとプロセスkillになるんで、サーバー提供のコピーツールを使いました )
  • 記事のエクスポートからブログの記事のエクスポートファイルをダウンロード
  • 先述のmt.Vicuna の HTML5 版のテーマを /themes/ にいれておく (ウェブサイトとして作成するときに、mt-static/以下に入れると選択ができないため)
  • 「ウェブサイトの作成」で新規ウェブサイトを作る
  • ウェブサイトURL（サブドメイン使用） http://labs.markdiary.com/
  • ウェブサイトパス /var/www/html/labs.markdiary.com
  • アーカイブをウェブサイトパスとは別のパスで公開する (以下上記のように任意のURLとパスを指定)
  • 記事のインポートで先ほどのエクスポートファイルを取り込む
  • 再構築前に、テンプレートをプレビューを使いながら編集
  • 状態の良いテンプレートから随時再構築していく

といった感じです。/blog/ ディレクトリを持たないサブドメイン型ブログ（サイト）ですので、そのままウェブサイトにブログを作らないで、そのまま記事を取り込んでいます（ウェブサイト下でブログ作成したものを、ブログURLをサイトトップにあげて作ると ブログID（blog_id）の1つが余計になってしまうので）。

Close ボタンは、mt.js 内に mtHide() があるので、これを onclick 属性に仕込んでおけば、jQuery を使わなくても簡単に特定要素の非表示ができます。

<div id="hideElem">text</div>
<div class="btn" onclick="mtHide('hideElem');">×</div>

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

今月のいらんことしい（2015年6月）

今月（2015年6月）、サイトのカスタマイズした点をまとめたエントリです。

  • AccessRankingGA プラグインを、Google OAuth 2.0に対応できるように修正した
  • AccessRankingGA テンプレートタグの出力するページ(.json ファイル)の再構築方法を変更した
  • カテゴリー mt4 をサイドバーで表示しない
  • カテゴリー mt6 を新設
  • Trackback のCGI へポストに関する.htaccessの設定みなおし
  • 利用していないプラグインを plaginsディレクトリから削除

OAuth 対応は、以下に詳細ページを用意しました

特定カテゴリーのリストからの除外は、運用のしやすさから、カテゴリラベルでフィルターをかけるのが一般ですが、カテゴリーIDで指定すれば、あとからのラベル変更でも一意なものとして機能します。

mt4カテゴリーは、バージョン４は製品ライフサイクル終了からだいぶたっているので、カテゴリーリストから除外するとしました。

以下はカテゴリーID 1をリストから除外する例

<MTTopLevelCategories>
<mt:Unless tag="CategoryID" eq="1">
...
</mt:Unless>
</MTTopLevelCategories>

mt6のカテゴリーを追加しました。今のところ、タグにmt6を付けてあるものにカテゴリーを与えましたが、徐々に設定していく予定。

先日、以下の記事にて再構築ツールを紹介しましたが、

これにより、対象のファイルを MovableTypeのrun-periodic-task スクリプトから切り離してcron 実行できるようになりました。

AccessRankingGA（のテンプレートタグが生成するファイル） は www-rebuilder経由の再構築にするので、テンプレートの再構築オプションでは「手動」にしておきました。

具体的にプラグイン名は挙げませんが、不要となったプラグイン（長い間使ってなくかつ無効としていたもの・コア機能として統合されているものなど）を削除しました。

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

メモ： www-rebuilder を使って、任意のテンプレートを再構築

スカイアーク様提供の Movable Type用の再構築ツール、www-rebuilder を使ってみたので、設定等の記録です。

用意するもの

  • www-rebuilder 本体
  • 必須モジュール：WWW::Mechanize
  • ターミナルソフト
  • 編集用エディタ

MT6で Data APIがでていて記事更新などは管理画面を介さなくてもできるようになっています。特定のテンプレートとなると、ちょっと Data APIではそれらしき、エンドポイントがないみたいです。というか、Data APIと再構築のツールとでは、目的がそもそも違うという。

で、本体のほうは、スカイアークの以下のエントリーにリンクがあります。

なお、GitHubにリポジトリがあるようです。

先に本題的なことをいいますと、そのまま使うと、ファイル mt.cgi に対して、BASIC認証をかけてある場合、基本認証が通らなくてプログラム終了となってしまいました。

... Authorization Required at ./www-rebuilder line 30

ベーシック認証突破するように、オプションコマンドを追加する必要があるようです。

GetOptions (Array) に以下を追加します。

    "bauth_name=s"  => \my  $bauth_name,
    "bauth_pwd=s"   => \my  $bauth_pwd,

（ターミナルで入力するのに手間がかかるので、略してます。basic_authorization_password というような意味です）

サブルーチン do_task()の 一番始めの $mech->get($uri); の上の行に以下を追加します。

# Basic Authorization
    $mech->credentials( $bauth_name => $bauth_pwd ) if ( $bauth_name && $bauth_pwd );

あと、自分がおこなった環境だと、WWW::Mechanize の set_fields で checkbox の設定があると、 

No such field 'checkbox' at /PATH/TO/WWW/Mechanize.pm

とかでてしまうので、 checkbox => undef, はコメントにしておきました。

編集が終わったら、SSHでサーバーに入って、どこかの /tools/ ディレクトリとか任意の場所にアップロードしておきます。

そのディレクトリに移動します。

$ cd /var/www/html/cgi-bin/tools

サンプルとして必要項目が以下だったとします。

MovableTypeのURL　　　　： http://example.com/{MT_SysDir}/mt.cgi
ログインユーザー名　　　　： Melody
ログインパスワード　　　　： Nelson
ブログID　　　　　　　　　：1
再構築したいテンプレートのタイプ : index 
再構築したいテンプレートID : 1
ベーシック認証ユーザ名 　　: name
ベーシック認証パスワード　 : XXXXXXXX

各オプション（-- のあと）の対応は (* は必須)

mt_uri　: MovableTypeのURL *
username　： ログインユーザー名 *
password　： ログインパスワード *
type  : 再構築したいテンプレートのタイプ (archive|index)
template_id : 再構築したいテンプレートID

※ template_idを指定している時は、type が必須となる、とあります。

ベーシック認証用に以下のオプション

bauth_name : ベーシック認証ユーザ名
bauth_pwd : ベーシック認証パスワード

これを反映させた www-rebuilder でのコマンドラインはこのようになります。

$ ./www-rebuilder --mt_uri=http://example.com/{MT_SysDir}/mt.cgi --username=Melody --password=Nelson --type=index --template_id=1 --blog_id=1 --bauth_name=name --bauth_pwd=XXXXXXXX

（注：サンプルなので、実際の使用ではオプションは環境にあわせた値をいれます）

これで、ターミナルから、curl で再構築したテンプレートのヘッダーをみるか、ブラウザでアクセスするなどして、Last-Modified: を見てみます(GMTの場合は日本時間で+9:00 、計算の面倒ならばブラウザからアクセスしてページ情報みるほうが楽かも)。 

$ curl -s --head http://example.com/再構築したテンプレートが生成するファイル

Last-Modifiedが直前の時刻になっていれば成功しているとおもわれます。

以上、 MovableType 6.1.1にて動作確認しました。

元記事にもありますが、十分な検証をおこなったうえで利用しましょう。

参考

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

今月（2015年5月）、ブログでカスタマイズした箇所をまとめたエントリです。

  • LDR Pocket をスマートフォン表示時に表示されるようにした
  • ウェブマスターツールの名称変更があったので、過去記事にその旨を追記した

以下のページを参照しました。

※ご注意：LDR Pocketはスマートフォン向けサービスのため、「LDR Pocket に登録するボタン」もスマートフォン向けページに掲載いただくようお願いいたします。

Google ウェブマスターツールのGoogle Search Console への名称変更は、2015/5/20 付け記事により告知されています。

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

Movable TypeでoEmbed提供 (仮)

oEmbed は、URLよりページに埋め込み可能なコードを得るのに便利なしくみです。Movable Typeのサイトでこれを提供するための方法(正式なものではありませんが)のメモです。

oEmbed については、以下のページが詳しく解説されています。

設計の概要は以下の通りです。

  • URL情報から、必要な情報を取得するのに Data-API を使用する
  • Data-API から、URLに対応する記事の情報を返すAPIのカスタムインデックステンプレートを作る。APIはとりあえず、PHPで作成する
  • APIは外部サイトからのクロスドメインアクセスの都合上、 Access-Control-Allow-Originヘッダー 出力で対策しておく
  • APIで返す内容は、パーマリンク、ページタイトル、ページコンテンツくらいでよい。タイプはrich（iframe 利用）にすることで、概要・記事で使用している画像サムネイル等も掲載できる
  • ページコンテンツは EntryExcerpt （Data-API でのキーは excerpt）を利用する（毎記事適切な概要入力されていること前提として）
  • iframe で返すためのアーカイブテンプレートが必要
  • エンベッド用アーカイブをアーカイブテンプレートに追加する
  • エンベッド用アーカイブのURIと元記事のURIを紐付けしないと呼び出しができない。このブログではパーマリンクに記事IDを含めていないため、そのままでは無理
  • 元記事のURI（/path/to/archives/記事ファイルネーム/）は /path/to/archives/embed/記事ファイルネーム/ のように置換する方針とする
  • /embed/* は robots.txt 等に検索でインデックスされないようにしておく
  • エンベッド用アーカイブは、使用頻度からダイナミックパブリッシングのほうで採用。表示パフォーマンスは不利になるが、仕組上、エンベッド記事の実体（静的なファイル）はないので、全体の再構築のときに響かない

流れとして、もう少し簡単にまとめます。

  • Data-APIをつかって、記事に関係するデータをJSON形式であらかじめ出力しておく
  • 記事URLのリクエストから、記事情報を得る
  • 必要な情報をパースして、oEmbedの仕様に合った形式で返す
  • エンベッド用のアーカイブを用意してこれを iframe にて埋め込む形にする

概説になりましたが、oEmbed対応については以上です。

以下に API のテンプレートのサンプルがあります。実際に使用しているもので、直に記述している部分をテンプレートタグに置き換えしたものです。

※ このブログのURLの構成に基づいているので、そのままコピーしただけでは使えません。

※ Movable Typeのテンプレートタグが入っていますので、他のCMSでも同様にそのままの状態では使用できません。

※ Data-APIの同梱されていない Movable Typeでは動作しません。出力のJSONのキャッシュとして、bit-part/mt-plugin-DataAPIPHPCache を使っています。

※ 作成したのが Data-API のバージョンが 1のときのもので現在は v2 が出ていますが、/v1/ のフォルダがのこっていればそのまま使えています。

実際に使用している記事は以下にあります。WordPressでは、標準で、oEmbedのサイトはホワイトリスト方式になっていますので、wp_oembed_add_provider()に追加しておくなどします。

（上の記事は出力結果の例で、oEmbed の使用は、記事作成の画面のところで記事URLのコピーを貼付けします）

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

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

  • サイトルートのみ、Analytics トラッキングコードを外した
  • FCブログ閉鎖にともない、過去記事からリンクを外すなど
  • Movable Type を 6.1.1 へアップデート

昨年より一部話題になっていた、Google Analytics でのリファラスパムの件ですが、スパムが後を絶たないため、トップページだけ外すということにしました。

これに至る理由は

  • 対策に時間をとられるのはばかばかしい
  • ランディングページでトップページは極端に少ない

ということからです。

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

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

今月（2015年3月）、ブログのカスタマイズした点をまとめたエントリです。

  • シングルカラムのページに Media Queries と viewport を指定した
  • MTInclude タグのモジュールテンプレート階層化の見直し
  • 「ブローク」サービスはとっくに終了していたので、サイドバーから削除。ShortNoteプロフィールリンクを追加
  • PHPのバージョンを、ここと tsuredurebox.geo.jp とでサーバー管理画面の設定よりバージョンアップ
  • Vicuna CMS のサイトへのリンクを解除
  • Actionstreams テンプレートに noindex, nofollow METAタグを付与

Movable Type 6.0.4 より、PHP 5.5 への対応が済んでいるのがわかったので使用するPHPのバージョンをあげました。CoreServer では管理画面のPHP設定の項目からドメインごとで切り替えることができました。

Vicuna CMS および、 mt.Vicuna へのリンクは、リンク先が存在しなくなり、別の第三者がドメイン取得されているようなので、この時点でリンクウェア（造語）としての意味を持たなくなったということで、リンクを解除ということで対応しました。

ちなみに、Movable Type向けテンプレートは、 HashiM氏により、mt.Vicuna HTML5 theme として管理されているようです。

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

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

今月（2015年2月）、ブログでカスタマイズした箇所をまとめたエントリです。

  • カスタマイズ記録（今月のいらんことしい、バックナンバー）ページでテンプレートタグでやっていたのを、DATA APIで読み込むように変更
  • Fancybox の JS、CSS 等更新
  • ブログの一部記事、oEmbed 配信に対応
  • HTTP ヘッダ X-UA-Compatible: chrome=1 削除してなかったページを更新
  • Movable Type用DataAPI Disablerプラグイン 導入でDATA API 使用ブログを制限（6.1導入後削除）
  • Movable Type のバージョンを6.1に、MTOSバージョンを5.2.12へ
  • Action Streams 更新フィードで、title要素 に二重引用符（エンコードしたもの含む）があると、パースできないケースがあったので削除するように置換した

Movable Type DATA API を使ってみることにしました。

使用箇所は、カスタマイズ記録ページのリスト表示と、oEmbed プロバイダ用のAPI

oEmbed については、以下が詳しいです。

以下に実際の動作をまとめておきました。対応するエディタで記事URLをペーストすると読み込みにいってrich形式でかえします。

Movable Type｜MTOS のバージョンアップをおこないました。

<mt:ActionStreams replace="&quot","" replace="&#34;","">

(なぜか、regex_replaceで複数指定するとうまくいかなかった)

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

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

今月（2015年1月）、今年最初のブログのカスタマイズした箇所をまとめたエントリです。

  • コード掲載ページに SyntaxHighlighter を導入
  • XML-RPC cgiの実行権限を解除
  • サイトのルートへの Analytics スニペットを出力しないようにした
  • 個別記事ページにもアクセスランキングを表示するようにした
  • サイトトップのトラッキングスニペットのカスタマイズ

記事内にコードのある場合に SyntaxHighlighter による表示になるようにしました。

カスタムフィールドに以下のように設定

システムオブジェクト
  記事
名前
  SyntaxHighlighter
説明
  SyntaxHighlighterを使用する
種類
  チェックボックス
オプション
  なし
必須
  チェックを外す
規定値
  SyntaxHighlighterを使用する
ベースネーム
  cfsyntaxhighlighter
テンプレートタグ
  cfSyntaxHighlighter

作成された、mt:cfSyntaxHighlighter タグを使って、テンプレートに SyntaxHighlighter (ver.3系)を読み込むように組みます。 

<mt:If tag="cfSyntaxHighlighter">
SyntaxHighlighter を呼び出すコードを入れる。
</mt:If>

スクリプト部分は、フッター側に、スタイルシートは、head要素内に設置しています。

カスタマイズしたサイトトップのGoogle Analytics コードは、ShortNote に記載したとおりです。

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

今月のいらんことしい（2014年12月）

今月（2014年12月）、今年最後のブログのカスタマイズした箇所をまとめたエントリです。

  • Action streams ブログテーマをセットしなおしした
  • 一部ページに、テンプレートの種類を示す、data-page-type属性を付与。setvars の設定を可視化するとした
  • フッタの subscribe で livedoor reader の表記を Live Dwango Reader へ書き換え
  • Movable Type バージョンアップ。6.0.6 および、MTOS 5.2.11
  • トラックバックのリストのページのマークアップを変更

Movable Type のセキュリティアップデートのアナウンスは以下より。

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

今月のいらんことしい（2014年10月）

今月（2014年10月）、ブログのカスタマイズした箇所を記したエントリです。

  • 記事投稿時Ping送信先でYahoo!ブログ検索を登録から外した
  • Movable Type を 6.0.5 にバージョンアップ

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

今月のいらんことしい（2014年9月）

今月（2014年9月）、ブログのカスタマイズした箇所を記したエントリです。

  • Movable Type 6.0.4 にアップデートした
  • Blog Ajax 検索専用ページで、form のクエリによるページ読み込みを廃止

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

今月のいらんことしい（2014年8月）

今月（2014年8月）、ブログのカスタマイズした箇所を記したエントリです。

  • labs にTwitter ウィジェットをいれた

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

今月のいらんことしい（2014年7月）

今月（2014年7月）、ブログでカスタマイズした箇所をまとめたエントリです。

  • FancyBox プラグインをバージョンアップ
  • CoreServer 、PHP／Apache バージョンアップメンテナンスに伴い、WordPressでのPHPのCGI版による動作を解除

FancyBox は以下からダウンロード。

トラブルをさけるために、展開後のフォルダ階層をオリジナルと同じにしてアップロードします。

FancyBox 用のモジュールテンプレートを更新して、FancyBox を適用している記事をフィルタして再構築。

サムネイル（50x50pix）使用する表示のときオーバーレイが真っ黒になるので、デフォルトの状態に修正しました。

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

今月のいらんことしい（2014年6月）

今月（2014年6月）、サイトのカスタマイズした箇所をまとめたエントリです。
  • webアーカイブページの公開設定をスタティックから手動へ
  • 上位サイトで META Description を設定
  • Google Chrome frame 用のヘッダ出力を停止した
  • 「あとで読む」ボタン撤去と Pocketボタンの場所を移動
  • Pocketボタンをカテゴリーアーカイブページに設置

テンプレートタグによる、meta Description の方法は以前もやった記憶があるんですが、おさらいとして。

ちなみに、テンプレート向けのカスタムフィールド使えば、もう少し楽に設定出来るかもしれないです。（ローカルがgithubから持ってきた movabletype で動かしてるために、カスタムフィールドが使えないという事情でテンプレートタグによる書き方になってます）

インデックステンプレートでは、こんなかんじで変数セットしておきます

(SetVarsはテンプレートの先頭部分に置きます。改行区切りで複数の変数指定を一括しておこなえますが、ここでは対象のものしか記述しておきません)

<mt:SetVars>
metadesc=hogehoge
</mt:SetVars>

ウェブページ／ブログのエントリーアーカイブテンプレートの SetVars には、以下のようにしておきます。

no_generate モディファイアによって、概要のフィールドが空のとき何も出力しないようにしています。

metadesc=<$mt:EntryExcerpt no_generate="1" remove_html="1"$>

HEAD要素の内容にあたる箇所には以下のようにしておきます。

<mt:if name="metadesc" ne="">
<meta name="description" content="<mt:getvar name="metadesc" remove_html="1">" />
</mt:if>

ウェブページのテンプレートで no_generate を指定しましたので、概要フィールドが空の場合に出力しないという条件が可能となってます。

no_generate指定なしで概要フィールドの有無はこだわらないならば、<mt:if name="metadesc">だけの条件でよくなります。

Chrome Frame for IE は開発が終了していることと、このエージェントによるアクセスがほとんどないためサポートしないことにしました。

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

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

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

  • Google Analytics スニペットをglobalのほうに変更した
  • run-periodic-tasks の warning 問題

このブログのほうもグローバルのトラッキングコードに差し替えしました。特に問題となる部分はありません。

クリックイベントトラッキングを analytics へ送る方法がanalytics.js 用に用意されているので、これも差し替えるようにしました。

具体的には、

_gaq.push() メソッドを使用していたのは、ga('send', 'event' ,,, といった形になります。

詳しくは、公式の イベント トラッキング - ウェブ トラッキング（analytics.js） に記載されています。

Movable Type 6 のアップデートしたあとに、cron による処理で Unrecognized escape K passed through の警告がでるようになってきたので、ちょっとツールのほうに手を入れることにしました。

\シーケンスなんですが、以下のドキュメントを参照したところ、Perlバージョン 5.10からの機能とあります。

また、6.0.3 〜 で run-periodic-tasks に修正が加えられた件については以下にて確認できました。

借りているサーバーのバージョンが5.8系のために、これ（\Kによる置換）を使わないようにするか、以前のバージョンに差し戻すかなのですが、ここはとりあえず \K を使わないようにするようにしました。（今の時点で動作検証まではしていません）

追記 2014/05/27：Cron Daemon のエラーメッセージはかえってこなくなったみたい。MITに変わったからコード示さなくてよくなったとおもうんで掲載はしません。推奨環境で運用するのがたぶん正解だと思います。

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

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

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

本文中の「ウェブマスターツール」ですが、名称変更があり(http://goo.gl/tjQxT4)、Google Search Console となりました。

  • sitemap.xml でフォルダの出力にフィルタ
  • MTOS 5.2.10 、Movable Type 6.0.3 へアップデート

sitemap.xml はGoogle 等に送信するものとして作成していますが、ウェブマスターツールで警告がでるので、問題となるフォルダを出力しないようにしてみました。

対象フォルダが、フォルダメニューの一覧にあることを確認します。

次に、サイトマップテンプレートのMTPagesタグの folder モディファイアに NOT をつけることで、指定フォルダ以外の出力となります。

<MTPages folder="NOT exceptfolder">

前掲ページにおいて、アップデート後の必要な作業として、テンプレートのリフレッシュを行なう、とあります。

当方は同梱テーマではないので、手動による変更をおこないました。その他いくつかの問題が修正されているようです。

メモ書きですが、更新作業の際に、CGIエラーがでてしまいました。

これはCGIへのリソース制限にかかってしまったみたいです。FTPクライアントとターミナルと同時でおこなってたからなのかも。

特にサーバー管理画面からの負荷とかプロセスとかはこちらでは確認ができませんでした。

制限解除までに時間がかかってしまったので、次回気をつけようと思います。

参考：

  • 記事閲覧 (ユーザーフォーラム:CGI/PHP/DB関連 - VALUE-DOMAIN.com)

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

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

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

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

本文中の「ウェブマスターツール」ですが、名称変更があり(http://goo.gl/tjQxT4)、Google Search Console となりました。

  • ブログの microformats 見直し

microformats は vicuna テンプレートには microformats のサポートはありましたが、完全でないらしく、Google ウェブマスターツールの構造化テストツールでみるとエラーがおこっていました。

具体的には、author 、updated がないというものです。

これらの対処として、last updated の記述もメタ情報のラインに含めるようにしました。

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

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

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

  • はてなブログのAction Streams (プロフィール)の追加
  • labs のほうで Google Analytics のユニバーサルのほうに切り替えした

Action Streams は最近触ってなかったので登録のしかたも忘れていたりしますが、はてなブログのフィードは Atom のほう （*/feed）を設定ファイルには典型的なAtom feed なので　atom : 1 を記述しておけばいいです。

Analytics のユニバーサルの件は、設定のトラッキング情報で、トラッキングコードがユニバーサルに切り替わってましたので、そのまま以前の非同期のコードと全て差し替えるだけで利用可能のようでした（この時点公開時点ではまだこのブログサイト内では以前のトラッキングコードです）。

イベントトラッキングについて、特定の要素にイベント付与する方法がこれまでと違うので下記を参考に直しました。

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

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

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

  • Movable Type 6.0.2 へアップデート

ver. 6 で見つかったいくつかの問題の修正版で、セキュリティに関するものは含まれていないとのことです。

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

Movable Type：アイテムの編集のページ内で、画像サムネイルつき画像リンクのコードを生成するブックマークレット

Movable Type の管理画面のアイテムの編集のところで、アイテムの埋め込みにサムネイルつきの画像へのリンクのコードを追加表示させるためのブックマークレットです。

（なお、Movable Type 6.0.1での動作確認です）

画像アイテムのページでは、「アイテムの埋め込み」にはURLしか表示されていません。

記事内で使用するときには、それほど問題はないのですが、他の場所でその画像を使いたい場合、自前でHTMLをかく必要があります。

このブックマークレットでは、このページでの情報から、画像へのサムネイルつきの画像リンクを作成して、ページ内の「アイテムの埋め込み」に追加します。プロンプトで表示します。

コードを Hatena::Let に置いておきました。

リンク先の Movable Type アイテム埋め込みコード作成のリンクを右クリックからブックマークするか、ツールバーにドラッグするなどしてブラウザに登録します。

使用すると、プロンプトで埋め込みコードが入って出力されます。

コードの中身を提示しておきます（はてなからの呼び出しは気持ちよくない場合に。画像以外にも改造できるかと）

(function($){
  var itemview = $("div.asset-preview");
  if(!itemview) return;
  var imgthumb, imgthumb_src, imgthumb_w, imgthumb_h, imgthumb_htm, item_embed;
  var item_uri = $("#asset-url").val();
  if($(itemview).hasClass("asset-type-image")){
    imgthumb = $("div .thumbnail img");
    imgthumb_src = imgthumb.attr("src");
    imgthumb_w = imgthumb.attr("width");
    imgthumb_h = imgthumb.attr("height");
    imgthumb_htm = '<img src="' + imgthumb_src + '" width="' + imgthumb_w +'" height="' + imgthumb_h +'" alt="" />';
    item_embed = '<a href="' + item_uri + '">' + imgthumb_htm + '</a>';
    return prompt("　　　　　　　　　　　アイテムの埋め込み　　　　　　　　　　", item_embed);
  } else {
    return;
  }
})(jQuery);

以上を適当にJavaScriptファイルとして作成してサーバーにあげておき、このファイルのJS Loader ぽいコードを作り、それをブックマークレットにすれば同じような動作になるはずです。

余談ですが、アイテムの編集のところでform要素のなかにtextarea を流し込むと、「説明」というフィールドがおかしくなるみたいでした（なので、とりあえずプロンプト）。

具体的には、上で作ったHTMLをappendToする、その後textareaが追加・表示されてから、「変更を保存」を押すとappendしたほうのフィールドが説明のフィールドに置き換わってしまいます。

今月のいらんことしい（2013年12月）

今月（2013年12月）、サイトでカスタマイズした点をまとめたエントリ。2013年最後の回です。

  • WPTouch プラグインを完全に削除
  • WordPress を 3.8 アップデート

3.8でWordPress 管理画面がレスポンシブになり、スマートフォンなどからの見やすさが向上しているようです。

さて、今年の振り返りとして、これまでのまとめからピックアップしてみようとおもいます。

２月

  • Movable Type を4.x から 5.x にアップグレード
  • Tag archive ページにて、記事内に画像のあるときサムネイル表示

３月

  • MT-Akismet プラグイン をMTOS 5に

（ちなみに、このブログでも入れてあります）

５月

  • sitemap.xml のカスタムインデックステンプレートの作成
  • AccessRankingGA を導入

６月

  • トラックバックの受け入れを開始

７月

  • Bing Web マスターツール利用開始、登録

10月

  • Movable Type 6.0 および Movable Type 5.2.8 へアップデート
  • Movable Type 6.0の新機能、Google Analytics 連携を設定

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

今月のいらんことしい（2013年11月）

今月（2013年11月）、サイトのカスタマイズした点をまとめたエントリです。

  • Movable Type 　6.0.1 および、MTOS 5.2.9 にアップデート

[重要] 6.0.1、5.2.9 セキュリティアップデートの提供を開始 | Movable Type

（全くカスタマイズと違う内容になってしまいましたが）ちなみに www.movabletype.jp 上の Movable Type ダウンロードバナーのリンク先は、個人無償版ダウンロードのページとなっていました。

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

今月のいらんことしい（2013年10月）

今月（2013年10月）、ブログのカスタマイズした点をまとめたエントリです。

  • mt.js の非同期ロード
  • Movable Type 6.0 および Movable Type 5.2.8 へアップデート
  • Movable Type 6.0の新機能、Google Analytics 連携を設定
  • Google Analytics 連携の関係で同名のプラグインが使えないのでプラグイン名から全部修正
  • Movable Type ロゴマークの入れ替え

なお、mt.js は cookie などログイン認証、コメントに関わるものがはいっていますので、（自分はコメントを外部のサーヴィスでおこなってますけれども）これを行なったことにより、一部機能に上手く動作しないかもしれません。

<script>
(function(){
  var mtjs, d=document, node;
  mtjs = d.createElement('script');
  mtjs.src = '<$mt:Link template="javascript"$>';
  mtjs.type = 'text/javascript';
  node = d.getElementsByTagName('script')[0];
  node.parentNode.insertBefore(mtjs, node);
})();
</script>

Movable Type 6 (v6.0) は2013年10月17日（日本時間） より出荷開始されました。これとともに、5.2.8、5.16 セキュリティアップデートも提供されています。

6.0 はセキュリティアップデートも含まれているということでアップデートすることにしました。

Google Analytics 連携機能 は少し説明がややこしいのでリンクにて。以下に SixApart によるドキュメントがあります。

（※ 今の時点で Google APIs Console にアクセスすると、Cloud Console を試すアラートがでていますが、上記ページでは、これまでのコンソールの画面での説明になっています）

Google Analytics 連携はプラグインとしての同梱でしたので、同名の plugin が働かないため、手持ちのもの（配布してない）をプラグイン名、id、key、提供するタグ名のすべてを変更しました。

Google Analytics連携の設定が済むと、サイト情報ウィジェットで、日ごとのアクセス数が表示できるようになります。

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

今月のいらんことしい（2013年 9月）

今月（2013年 9月）、サイトでカスタマイズした箇所をまとめたエントリです。

  • テンプレートのシャドウの撤去および背景画像の削除
  • 見出し要素の背景画像の削除

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

今月のいらんことしい（2013年 8月）

今月（2013年 8月）、サイトでカスタマイズした箇所をまとめたエントリです。

  • Vicuna テンプレートのCSSリセットを YUI 3.11.0
  • Status ページを更新（Feedly 購読者数取得）
  • sitemap.xml に 画像URL

Feedly の購読者数取得は、サイトのFeedly購読者数を確認するためのブックマークレット | 代助のブログ にてまとめられていました。

YQL(Yahoo! Query Language)を利用することでJSONPより得られるとのことです。

従って、Feedly の購読者数取得は以下のようになりました（ use jQuery）。

<div id="feedly_subscribers"></div>
$(document).ready(function (){
  var feedly = "http://cloud.feedly.com/v3/feeds/feed%2F";
  var rss = "http://www.markdiary.com/blog/atom.xml";
  var target =feedly + encodeURIComponent(rss);
  var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from json where url="' + target + '"') + '&format=json&callback=?';
$.getJSON( yql, function(data){
  $("#feedly_subscribers").append("<p>" + data.query.results.json['subscribers'] + "</p>");
  })
});

sitemap.xml についてですが、Google ウェブマスターツール のヘルプページ(https://support.google.com/webmasters/answer/183668)には、画像・動画が1つあるページの例としてサンプルが公開されていました。

image:image 要素を追加するには、まず、名前空間を urlset に追加してあげます。（ xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"）

image:image 要素は、url 要素下に入れることになっています。

以下は、ウェブページの部分を抜粋してみたものです。（提示用のインデントですので、そのままコピーで使用すると、他の要素のインデントとあわなくなります）

<MTIfArchiveTypeEnabled archive_type="Page"><MTPages lastn="0">
  <url>
    <loc><$MTPagePermalink encode_xml="1"$></loc>
    <lastmod><$MTPageModifiedDate format="%Y-%m-%dT%H:%M:%S"$><$MTBlogTimezone$></lastmod>

<!-- 以下が追加する部分 -->
<mt:EntryAssets type="image" lastn="1">
    <image:image>
      <image:loc><mt:AssetURL></image:loc>
    </image:image>
</mt:EntryAssets>
<!-- 追加ここまで -->
  </url>
</MTPages>
</MTIfArchiveTypeEnabled>

エントリー内で、アイテムとして挿入した以外のメディアファイルのURLを得るのに、該当部分を正規表現とかで抽出しないといけなくなるので、諦めて上のようなものに落ち着きました(MTElse で細工とかできるんだけど、エントリーに置いてないような画像URLを送信しても仕方ないので)。

完成したら、ウェブマスターツールにいって、サイトマップのところで、「サイトマップの追加/テスト」より、生成されたサイトマップテンプレートをテストしてエラーがでていないことを確認しておきます（ここで、サイトマップ自体送信することが可能ですが、自分はチェックのみしかおこなっていません）。

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

今月のいらんことしい（2013年 7月）

今月（2013年 7月）、カスタマイズした点をまとめたエントリです。

  • テンプレートのインデントを変更した
  • Movable Type を 5.2.7 へアップデート
  • MTCanonicalLink を採用
  • X-Content-Type-Options: nosniff 付与
  • Feedly 登録ページへのリンクを追加
  • About ページの更新
  • Bing Web マスターツール利用開始、登録
  • Movable Type に関する過去の Tips系記事を未公開にした
  • つれづれぼっくす（tsuredurebox.geo.jp）でVoxプログ時代にクロスポストを行なっていた記事を削除した
  • YouTube アカウントを切り替えしたので、アップロード動画へのリンク先を変更されたものと差し替え

Movable Type は、5.2.6 よりスマートフォンオプションが同梱（※ Movable Type Professional , Movable Type Advanced が対象）されることになりましたので、アップデートすることにしました（主にスマートフォン等からの管理画面が影響します）。

インデントは vicuna デフォルトでタブ文字を採用していたものでしたが、半角スペースへと変更をしました（基本としては半角スペース２くらい（？）のつもり。テンプレートがごちゃごちゃしてきたのでうまくいっていない部分もあったりします）。

Google リーダーが終了となりましたので、 Feedly へ登録するページへのリンクをフッターに追加しました。

Feedly ボタン作成ページ（http://www.feedly.com/factory.html）を参考にすると、テキストリンクでも出来ることが分かりました。

MT関連記事の未公開（表面上は削除）ですが、何処かからの削除要請があったわけでなくて自主的なものです。

今後も内容など検討した上、削除を決定する記事があるとおもいます。

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

今月のいらんことしい（2013年 6月）

今月（2013年 6月）、カスタマイズした点をまとめたエントリです。

  • 不要になったCSS セレクターの削除
  • サイト内検索ボックスを撤去（一部アーカイブページは除く）
  • Google Reader への登録リンクを削除
  • 手動公開のテンプレート、更新していないウェブページなどを再構築
  • トラックバックの受け入れを開始した

サイト内検索はあまりにも使われていないということで取り外すことにしました。記事ページ、トップページなどで表示されなくしました。

長らく停止していたトラックバックを受け付けることにしました（ブログ開始当初は設定いれてたのですよ、 設定を確認したページの trackback ID がはじめの番号からスタートしてなかったので）。とはいえ、過去の記事について一括変更はプラグインを使うなどする必要があるのでおこなっていません。トラックバック受信の必要があると判断したら都度設定するようにします（かもしれません）。

参考までに、トラックバック設定のメモとして、以下に書いてます。

http://tsuredurebox.geo.jp/post/mtos-trackback-customize/

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

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

今月（2013年 5月）、カスタマイズした点をまとめたエントリです。

  • 404 ページの作り直し
  • sitemap.xml のカスタムインデックステンプレートの作成
  • AccessRankingGA を導入してみた
  • HTML5 なテンプレートで html5.jpでなく、 html5shiv.js のほうを使用するように変更
  • Pocket ボタンを置いてみた
  • MyBlogLogのメタタグの撤去
  • labs.markdiary.com のMTOS をv5.2 から v5.2.3 にアップデート

404 エラーページですが、Movable Type 5.2 への切り替えでトップページの階層も管理できるようになっため、そのようにテンプレートを作り直ししました。

この場合のテンプレートですが、ウェブサイトのカスタムインデックスのほうで作成しました。ウェブページアーカイブのほうで作成すると、アーカイブ系でループさせようとすると、除外しないといけないようなことがあるなど扱いに面倒であると判断したものによります。

sitemap.xml も同様にしてインデックステンプレートで作成しています。

AccessRankingGA は、Google Analytics のAPI経由でレポート情報を得てランキングとして表示するMovable Type用プラグインです。

WEBデザイン　BLOG の ＠cool_ni_ikou さんより提供されています。（https://github.com/coolniikou/mt-plugin-AccessRankingGA）

とりあえず気をつけたい点として以下の項目をあげておきます。

  • プラグイン設定の プロファイル ID というのは、特定のプロパティ下に作られているプロファイルのIDであるということで、Google Analytics トラッキングコードを設置するときのものとは違うということ
  • Google アカウントの 2段階認証プロセスを利用している場合、アプリケーション固有のパスワードを使う。ローカルでテストする場合もローカル用でアプリケーション固有パスワードを生成しておくということ

本来ならば、jQuery などでJSONファイルを扱うのですが、敢えてPHPにて JSON 処理をしています。

Pocket ボタンは、特定の要素を見つけてはdata-* 属性を追加する形での設置です。要するに、HTML5採用していれば特に必要のない処理です。

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

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

今月（2013年 4月）、カスタマイズした点をまとめたエントリです。

  • Atom feed に LINEで送る のリンクを追加
  • FOAF とXSLT を Movable Type で作成上書き
  • Disqus コメントのコメント数表示を、メインインデックス・アーカイブページに導入
  • ActionStreams プラグインのプロフィールイベントリスト、利用サービスリストのテンプレート修正とCSSを5.x 用に修正
  • ウェブページにTwitterボタン のリンク共有ボタンを設置した

LINE で送るリンクの設置方法については、以下のページを参照しました。

なお、ガイドラインの、 4. 利用条件の（2）(* 便宜上の番号です。規約改訂で変更の場合もありうるという意味です) では、「専用アイコン」の利用の命令がなされていますが、設置者が専用アイコンの代わりに、「LINEで送る」「LINE」というテキスト文字の利用が許可されています。

以上ふまえて、テキスト形式にて、フィードにLINEで送るというリンクを設置いたしました。

オワコン[感]?な FOAF （Friend of a Friend）ですが、しばらく放置してたので更新してみることにしました。

Movable Type が様々な形式のファイルを出力するツールであることを知ってる人は知っているとおもうのですが、 rdf XSL も出力できます。XSLTスタイルシートは以前に使ったものをそのままで、Generator がMovable Type になったため、Powered by Movable Type のリンクを出力するように追加しました。

ActionStreams はGitHubから、2.3~ を持ってきたのですけど、5.x 系だと表示されるテーブルがえらい崩れてるので、テンプレートからなおしてみることにしました。この際なのでいっておくと、もう 5.x系用に fork されていてもいいとおもうんですよね。。

自分の修正点の覚えとして簡略したもので示しておきます（細かく書いてもいいのだけど雑多になるし）。主に Firefox で使っている状態にあわせているので、他のブラウザではどうなっているかまでは分かりませんのであしからず。

スタイルシート action-streams.css

position: static;　は無効にしておかないと、リンクをクリック出来ない箇所がでてくるのでコメントにしてしおく。

list_profileevent.tmpl で、table 要素の部分

  • button 要素に class => button （ 5.xのスタイルに合わせる必要がなければそのままで ）
  • チェックボックスのところは class => cb col
  • th 要素に class => col head
  • th.primary-col は th.primary へ変更する

fixed_style_actionstreams.jpg

Twitterボタンはdata-* をdata-* をもたない文書型向けに改造。

Twitterボタンは、 Twitter / Twitterボタン から作成。

ボタン部は id 付与のため以下に。

<div id="tweetbtn_" style="display:inline;"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a></div>

スクリプト本体が読み込まれる前に、data-* を追加する。

<script type="text/javascript">
  void function(){var twID = document.getElementById("tweetbtn_")||false;
  if(!twID){return;}else{
  // ボタンのコード中の、data-* の内容をsetAttribute に置き換え
  twID.firstChild.setAttribute("data-url","<$mt:PagePermalink$>"); // ページのパーマリンク。URL統一のため
  twID.firstChild.setAttribute("data-size","large");  // ボタンサイズを大で選んだとき
  twID.firstChild.setAttribute("data-dnt","true");  // カスタマイズされたTwitterからのオプトアウトを true にしたとき 
  }
}();
</script>

bodyの終了タグ前付近にスクリプト本体をそのままで。

<script type="text/javascript">!function(d,s,id){...省略...</script>
</body>

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

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

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

  • はてなブックマーク、エントリーページへのリンクURL をはてな内と同一のものにした
  • DISQUS コメントのコードをファンクションタグ化
  • MT-Akismet プラグイン をMTOS 5に入れた
  • Mac カテゴリーを追加
  • CMSHead プラグイン導入で モバイル 向けCSSを追記

はてなブックマークのエントリーページのURLについては、 エントリーページの URL 変更について - はてなブックマーク日記 - 機能変更、お知らせなど を参照します。

コメントのあるページへは、はてな側でリダイレクト処理されるのでどちらでもいい話ではあるのですが、出力が調整できるならばこちら側でやってもいいでしょう、という理由ではてな側と URL を合わせることにしました。

方法は、replace="foo","bar" あたりを使い、http://の部分を取り除けばいいのですが、あえてグローバルフィルターにしておこなっています。理由は、xx="foo","bar" の形式のモディファイアの見た感じが好みでないからです。

MT-Akismet(Akismet development - libraries and plugins より入手可能) ですが、labs.markdiary.com においてはトラックバックを受け付ける設定のため使用することにしました。

あまり取りあげられていないようですが、typepad.com で TypePad Anti-Spam をとりやめ、Impermium に変更するといったアナウンスが先月にありました（参照：Retiring Typepad Anti-Spam and Switching to Impermium - Everything Typepad）。

これ以上の情報を入手できていないので、今後の TypePad Anti-Spam について(APIとか)はよくわかりません。キー取得のための、TypePad AntiSpam へのリンクは everything.typepad.com へリダイレクトとなっていることから、新規にAPIキー取得はできないというのが現状です。

さて、MT-Akismet は旧ヴァージョンのころのプラグインであるため、5.x系ではシステムのプラグイン設定ページで警告が表示されます（指示通りに書き換えれば警告は出ないのですが、出ないようにする方法は割愛）。

CMSHeadプラグイン は、小粋空間にて配布されている、head要素内に任意のコードを追記することを可能にするプラグインです。

設定したのは以下のようなものです。

<meta name="viewport" content="width=320">
<style>
@media only screen and (max-device-width: 320px) {
    body{
        font-size:110%;
    }
    .top-menu-link :hover{background-color:yellow;}
    #menu .toggle-button{width: 40px;}
}
</style>

適用後のキャプチャは撮りませんが、左サイドバーメニューをタップしやすくするというものです。

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

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

今月（2013年 2月）、サイト内の管理上の変更、カスタマイズした点をまとめたエントリです。

  1. Movable Type を4.x から 5.x にアップグレード
  2. MovableType カテゴリーページに Twitter 検索のタイムラインのウィジェット設置
  3. Tag archive ページにて、記事内に画像のあるときサムネイル表示
  4. Hatena Bookmark Button の Retinaディスプレイ対応版が表示できるようにした
  5. Twitter ウィジェットを Join the conversation 表示のものを新しいウィジェットに変更
  6. mt.config の DBSocket を明示的に指定

アップデート関連の記事について

Twitter 検索タイムラインウィジェット作成までの手順は下記のとおりです（*2013年2月時点 仕様変更等で名称など変わるかもしれません）。

  1. Twitter にログインします
  2. Twitter 検索のページで任意の(検索保存ずみでないもの)キーワードをいれます
  3. 結果が表示されたら、ギヤアイコンをクリックして、「この検索をサイトに埋め込む」をクリックします
  4. 使用するドメインに設置するドメインをいれます。複数の場合は,(カンマ)で区切ります
  5. ウィジェットを作成でウェジェット設置のコードが表示されます
  6. 作成後の編集は、Twitter アカウントの設定の項目のウィジェットのところからおこなえます。フォーム内で指定できるものを変更していきます。「変更を保存」で右のプレビューに反映されます。
<mt:CategoryLabel setvar="catLabel"> <mt:Ignore>カテゴリラベルを変数セット</mt:Ignore>
<mt:If name="catLabel" like="使用するページのカテゴリラベル">
<div id="twWidget_time_line">
__ Twitter ウィジェットのスニペット __
</div></mt:If>

記事内に画像のあるやなしやの改造について

<li class="textBody">
<mt:EntryAssets type="image" lastn="1"><img src="<$MTAssetThumbnailURL height="64" square="1"$>" alt="<$mt:AssetLabel escape="html"$>" width="64" height="64" /> </mt:EntryAssets><$MTEntryExcerpt escape="html"$>
</li>

Hatena Bookmark Button の Retina 対応画像のバージョンですが、 data-* 属性をきちんとしていしてあげていないと昔のほうの画像ででてくるようなので、無理やり data-* 属性をセットするようにして動作させました (頑にHTML5 にしない)。

// require jQuery
$(document).ready(function(){
    $(".hatena-bookmark-button").attr('data-hatena-bookmark-layout','standard-balloon');
})
// attr() の第2引数は、ボタンのタイプ (はてなブックマークボタン作成のページを参照)setTimeout (function(){
 var h = document.getElementsByTagName("head")[0] || document.documentElement;
 var script = document.createElement("script");
 script.src = 'http://b.st-hatena.com/js/bookmark_button.js';
 script.type = 'text/javascript';
 script.async = 'true';
 h.appendChild(script);
} ,800);
// はてなブックマークボタンの画像リンクの a 要素には class="hatena-bookmark-button"を付与しておきます

環境変数 DBSocket の設定は、Can't connect to local MySQL server through socket '/tmp/mysql.sock'が出ることがあったためです。

エラーについては、「Can't connect to local MySQL server through socket」エラーについて が参考になりました。

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

mt.Vicuna Simple にカスタマイズした Pin it ボタンをつけてみる

mt.Vicuna Simple テンプレートに Pinterest の Pin it ボタンを設置してみます

はじめに

すでに使っている人向けで記述してますので、HTML構造については、本家サイト(vicuna.jp)など参照してください。

参考にしているのは、 Pinterest ブログ上に設置されているコードで、旧タイプのボタンをカスタマイズしたものです。

通常は、Pin It Button for Web Sites （http://pinterest.com/about/goodies/）のフォームにサイトのURL をいれて得たコードをもとに URLのパラメータを Movable Type 用のテンプレートタグに置き換えするなどしてカスタマイズします（このページではこの方法の説明はしません）。

表題のとおりに、mt.Vicuna テンプレートでの貼付け法で、ほぼ初期の状態で設置の動作を確認したものです。カスタマイズされたものについてはこのとおりに動作しない場合もあり得ます。

設置について

ボタンをつける箇所は、ブログ記事テンプレートの タイトル下の ul .info のリストに追加するということとして説明しています。

Pin itボタンパーツ

<li class="pint">
     <a class="pinit" onclick="pinitbtn(this);return false;" href="http://pinterest.com/">
        <img src="http://passets-ec.pinterest.com/images/pinit_preview_none.png" width="49" height="25" alt="pin it" />
     </a>
</li>

<ul class="info"></ul> 内にいれます。

Pin it をおこなう部分

前掲のコードはすでに設置されているものとして、以下のコードを</body> より前に設置

以下は、テンプレートタグを利用して直接 JavaScript コードを埋め込む場合です。

<script type="text/javascript">
//<![CDATA[
var pinitbtn = function(elm){
  var desc,url,media='', image='', section;
  desc = '<$mt:EntryTitle remove_html="1" encode_js="1"$>';
  url = '<$mt:EntryPermalink encode_js="1"$>';
 
  section = elm.parentNode.parentNode.parentNode.getElementsByTagName('DIV')[0];

      if (section) {
        image = section.getElementsByTagName('IMG')[0];
        if (section.getAttribute('class','textBody') && image && image.src) {
          media = image.src;
        }

      if (desc && url && media) {      
        window.open( 'http://pinterest.com/pin/create/button/?url='
        + encodeURIComponent(url)
        + '&media='
            + encodeURIComponent(media)
        + '&description='
            + encodeURIComponent(desc)
       , 'signin'
       , 'width=665,height=300,scrollbars=1,resizable=1');
      }
}
};
//]>
</script>

詳細

外部ファイルにしたいとき

タイトルなどの情報を JavaScript から取得する形にしたいときはそれぞれ url は location.href とか、rel=canonical(指定してあるとき)など、 desc はPin itしたときテキストエリアに入るテキストで、タイトルでいいときは document.title などです。

section でエントリの部分を拾ってきます。要素がカスタマイズされているとノードの取得がうまくいかないかもしれませんので適宜調整がいるでしょう。

記事に画像があるときとないときがあるような場合、記事中の画像の有無でふり分けて出力といった方法が考えられます。

Pinterest ブログのほうでは、ボタン設置の a要素の内容は空として、背景画像にボタンの画像をあてているようです。

mt.Vicuna Simple テンプレート

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

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

  • Vicuna テンプレートの枠にbox shadow を適用

このブログ（Vicuna テンプレート使用）にbox shadow をつけてみました。

Vicuna の場合、ヘッダーとフッター、コンテンツと分けられて構成されています。

影のために外枠でラッピングするのもなんですので、今ある要素のままでスタイルを適用したいとおもいます。

そのためには、それぞれ3つの要素ごとにbox shadow をかける必要がでてきます。

これをやると、影の広がりの距離の関係で、水平方向の影が要素の上下で重なって不自然な影のつきかたになってしまいます。

そこで、影の位置をそれぞれずらすことによって（なるべく）不自然につながらないようにみせています。

div#header には

  • box-shadow: 0px -6px 10px 4px rgba(0, 0, 0, 0.6);

div#content には

  • box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.6);

div#footer には

  • box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.6);

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

Movable Type のエディタにCodeMirror を設定する

Movable Type 上で使用するエディタに CodeMirror を設定するやりかたです

もともとMovable Type（ここではヴァージョン5.2 以上ということです）に CodeMirror は同梱されているのですが、使えるようにするのにあれこれしないといけなくなるわけです。

探しましたところ、CodeMirror を使えるようにするためのプラグインが GitHub にありました。

CodeMirror for Movable Type として提供されています

簡単な導入手順は以下の通りです。システム管理者権限の有る者がおこないます。

  1. 前掲のページより master.zip をダウンロードして、展開しておきます
  2. plugins 内のフォルダを Movable Type の plugins ディレクトリに入れます
  3. mt-config.cgi に SourceEditor CodeMirror を追加します。参考：SourceEditor | 環境変数リファレンス
  4. TinyMCE を使わない場合は、システムメニューのプラグイン設定のところで、TinyMCEを無効にします

で、設定後のキャプチャは以下です(ローカルのMTOS v5.2.2で試しています)。

editor_codemirror.jpg

以下は、表示できる補助ボタンをカスタマイズした例で、リンク挿入を入れています。

カスタマイズの参考までに。プラグインの editor.tmpl のコードを追ってみると参考になります。

editor_codemirror_customized.jpg

今月のいらんことしい（2012年12月）

今月（2012年12月）、今年最後のサイトでカスタマイズした点をまとめたエントリです。

本文中の「ウェブマスターツール」ですが、名称変更があり(http://goo.gl/tjQxT4)、Google Search Console となりました。

  • CSSファイルの読み込みを mt/mt-static 外に移動し、そちらから読み込みように変更した
  • Action Streams でTwitterからのアクション取得を停止

CSSファイルの読み込みですが robot.txt によってCSSファイルを置いているディレクトリを ブロック（Disallow）している場合にGoogle インスタンスプレビューでCSSファイルを読み込めずにCSSが適用されない形でプレビューされることへの対処です（この件はGoogle ウェブマスターツールのLabs内のインスタントプレービューの機能より、確認することができました）。

Twitter のタイムラインフィードですが、'http://twitter.com/statuses/user_timeline/{{ident}}.atom' は以前より取得不可でしたので（Twitter側は2013.3 以降JSONのみ提供を決めており、Action StreamsプラグインがJSONにも対応してないといけないので対処は見送りに。Githubにあるstreams.yamlは、ざっとみたところ scraper 使ってるけど、これがスクレイピングにあたるのか微妙なので） Twitterのストリーム設定で取得しないようにチェックを外すとしました。

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

今月のいらんことしい（2012年11月）

今月（2012年11月）、サイトでカスタマイズなどをした箇所をまとめたエントリです。

  • Google Analytics のサイトの速度レポート用のコードを削除した
  • トップページ / において、MTOS運用サイトの新着記事情報も追加
  • レスポンスヘッダで文字コード出力するようにした
  • 関連記事の見出しは Other entries you might get interested をやめて、Similarity Content とした

Google Analytics のヘルプの「サイトの速度について」に、"ページ速度の測定はトラッキング コードで自動的に有効になり、改めて設定を行うことなく、サマリー レポートとページ速度レポートにデータが表示されます。"とありますので、これまでつけていたトラッキングコードの関数（_trackPageLoadTime）は削除しました。

なお、これをやるとサンプルとなるサンプリング レートがこれまでより引き下がるとのことで、サイトの速度レポートでサンプルとなった数は減少しました。

PHPにしているページはテンプレート上に追記の形で以下の通りです。

  • header('Content-Type: text/html; charset=UTF-8');

Similar content だとMTはじめた頃のカスタマイズを思うので、Similarityのほうにしてみました。

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

今月のいらんことしい（2012年10月）

今月（2012年10月）、サイトでカスタマイズをおこなった点をまとめたエントリです。

Firefox をヴァージョン16 へアップデートして以降、カテゴリが選択できずに、新規記事作成でカテゴリをつけた記事として投稿できない、といった不具合がおこっていました。以下に修正のパッチファイルとして提供されています。なお次のリリースでパッケージとして提供されるようです（参照）。

4.38用のもので適用しています。（FileMergeで確認したところ、指摘されていた変更による影響のあった個所　〈modest の「Firefox 16 サイト互換性に関わる修正のまとめ」10/15 追記分に詳細があります〉の修正でしたのでとりあえず近いヴァージョンという判断で適用しています。もちろん、ヴァージョン違いによる適用で、動作保証されないという認識で）将来を見据えると4.x 系のMovable Type は可能であればversion 5のほうに移行しておいたほうがいいと考えています（----とここで書いていても説得力がありませんけれども）。

Twenty Twelveテーマは、WordPress 3.5 ベータ1 発表時のボーナスとして紹介されていたものです（記事）。これにともない、スマートフォン向け表示の WPtouch の使用をやめることとしました（以上tsuredurebox.geo.jp内の変更点です）。

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

今月のいらんことしい（2012年9月）

今月（2012年 9月）、サイト内でカスタマイズをおこなった箇所をまとめた記事です。

  • Twitter widget を Embedded Timelines に切り替えた
  • はてなスターの追加ボタン画像の変更

以下、Embedded Timelines の設置メモです。

Twitterにログインしておき、以下の場所にいきます。

まだ移行していない状態だと何も出ていないので[新規作成]をクリック。

あとはフォームに必要事項を入力して貼付け用コードを得るだけです。

注意点として、同じウィジェットを複数サイトで使い回したい場合、ドメインのところは貼付けたいサイトのURLをドメイン単位でカンマ区切りで入力します。

＊設置ページと設定ドメインがあっていないと設置しても表示されません。

詳細は、https://dev.twitter.com/docs/embedded-timelines のページにあるとのことです

はてなスターの画像の変えかたは、もっとカスタマイズをしよう - はてなスター日記 にあるとおりです。

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

今月のいらんことしい（2012年7月）

今月（2012年7月）、サイト内のカスタマイズ、変更をおこなった点を纏めたエントリーです。

  • Movable Type 4 のロゴを復帰
  • Fastladder への登録リンクを削除

ロゴマークについては、しばらく表示をやめていたのですが再び使うことにしました。Movable Type 4系とMovable Type 5系の記事が混在してますので、このブログではヴァージョンが４であるというのを明示したいためです。

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

今月のいらんことしい（2012年6月）

今月（2012年6月）、サイト内のカスタマイズ、変更をおこなった点を纏めたエントリーです。

  • ブログの説明を変更
  • XML宣言をはずした
  • new DISQUS 2012 をアクティベーション
  • タグ一覧ページの各タグのリンクカラーで、ステータスの区別を色の濃さによる違いへと変更した

ブログの説明（BlogDescription）を「週末はコピペコーダー」に変更しました。特に意味はなく、はてなのプロフィールの説明でつかっているのと同じものでそのままです。

XML宣言ですが、ウェブページ（Movable Typeのシステム上での名称）においては、既に宣言をつけない形で以前から公開していました。これを記事ページ等にもXML宣言なしに切り替えをおこないました。

Disqus が新しい feature を公開されていましたので使えるようにしてみました。

設定が済むと、コメントで使用していたフォームが新しいものに切り替わっています。

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

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

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

  • あわせて読みたいブログパーツを撤去
  • CSS ファイルの修正
  • WordPress のSocial Media Widgetプラグインをいれてみた
  • MTOS 、5.14 へアップデート
  • MTOS で使用中のDisqus プラグインの 「disqus_post_message」の出力を変更した

「あわせて読みたい」のブログパーツですが、表示に変化がおこっていない状態なので普通に画像を貼っているのと違いが無いという理由で外すことにしました。

Social Media Widget はウィジェットに各ソーシャルメディアのアカウントとアイコンを一括設定して、follow usなウィジェットとして利用できるといったプラグイン。

つれづれぼっくす にて導入してみました。

表示のサポート的なもので、ソーシャルメディアアカウントが少ない場合は自前でウィジェット作ってもそんなに時間的なものは変わらないのかな、----と使ってみた感想です。

利用中のMTOSを5.13 -> 5.14 にしました。

Disqus プラグインで、disqus_message が記事全文そっくり出力しているのに加えて、二重引用符に対し、バックスラッシュのエスケープ文字（と改行コード）を差し込む（<div "id="disqus_post_message">"></div>内に収められる内容）といった問題がありました。但し、この要素自体はdisplay:noneによって隠されています。

ということで、応急の対応として以下のように変更をおこないました。text をみないようにして、 excerptのほうを呼び出すように変更しました。

対象ファイル
  • /disqus/lib/DisqusCommentSystem/Tags.pm
変更箇所

116行目付近。

    #    my $text = encode_php($entry-&gt;text, 'qq');
    my $text = encode_php($entry-&gt;excerpt, 'qq');

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

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

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

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

  • Tag Archives (タグアーカイブ)のタイトルの表示形式を変更
  • はてな ふるふるブックマーク機能を削除
  • WordPress の404ページにもGoogle のリンクヘルプ導入
  • FancyBox ライブラリをヴァージョン 2.x系に変更
  • サイト内検索がサイドバーメニューで上位に表示されるように変更した
  • Googleカスタム検索ページのカスタマイズ
  • Disqus コメントのpadding がなくなっていたのを修正

Tag Archives テンプレートにおいては、

  • Tag Archives : タグネーム « ブログ名

という形式でしたが以下のように階層に変更

  • タグネーム « Tag Archives « ブログ名

WordPressのテーマには、今使っているテーマだと、ランダムリンクとタグ一覧がでるようになっていますが、Google検索のヒントから探すことも出来るように設置してみました。

404 ページのカスタマイズ - ウェブマスター ツール ヘルプ

設置はテーマ編集で404テンプレートを編集（当該テンプレートファイルに対して一時的にパーミッションを書込み可能にしておく必要があります）。上のリンク先にスニペットがでるのでブログトップURLをいれればOK

利用中のFancyBoxのヴァージョンを2に移行しました

FancyBox(ヴァージョン2以降） は 以下から

設置方法は説明ページにあるとおり。

ダウンロードファイルを任意のスクリプト用のディレクトリにアップロード

jQury 1.7.x を読み込む

jquery.fancybox.css、jquery.fancybox.pack.js をそれぞれ読み込む。

折角なので、Thumbnail Helper という機能も使ってみる事にしました。

Optionally add button and/or thumbnail helpers　というコメント以下のコードで、今回はthumbnail helpers のほうだけ使用することにしたので、jquery.fancybox-thumbs.cssとjquery.fancybox-thumbs.js を読み込むようにしました。

Thumbnail Helpers を使う場合は、特定のclassを割り当て、jQueryのコードをThumbnail Helpers対応のコードを読み込む必要があります。

この機能は、モーダル表示中に下部にサムネイル画像が表示されてそのサムネイルをクリックすることでも画像を表示させることができるというものです（このエントリにて動作を確認できます）。

そして記事毎で「使う」・「使わない」を選択しておきたいので、MTIFタグによる振り分けを行うことにしました。

条件分岐が以前のものより複雑になるため、fancybox用のモジュールを新たに新設して、モジュール内で分岐処理した後にinclude で取り込むという形であります。

Googleカスタム検索では、テーマを「シャイニー」から「デフォルト スタイル」（Google検索結果風）へと変更。ラベルによる絞り込み機能も追加してみました。これらは、管理画面からの操作で可能です。テーマ変更後は新たにコード取得しなおして検索ページを編集し更新する必要があります。

Disqus コメントの端のの余白が無い状態は以下を追加で対処しました。

  • .comments-open-content { padding:2.5em; }

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

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

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

  • コメントをDisqusに切り替え
  • Disqus導入に伴い、コメント数カウント表示を廃止
  • サイト内検索をGoogle カスタム検索に置き換え
  • Internal linkへのrel=nofollowの削除

Disqus導入については以下に記事にしています

単に設置するだけならば、それほどに時間のかからない Disqus ですが、カスタム設定とかしようとおもうと、結構時間をとったりします（Helpページが英文のみというのもあって）。

disqus_identifier という変数名のセットがあって、そこにユーニークなIDを入れることになっているのですが、説明をみてもよくわからない部分があったので、WordPressのプラグインが出すコードを参考にすると以下のようなパターンなようでした。

  • var disqus_identifier = エントリID エントリーパーマリンク

よって、これに値するMTタグは以下のようにしてみることにしました。

ウェブページに「webpageの接頭辞＋ページベース名」を入れることにして、エントリーページはエントリーID＋パーマリンクという形です。

<MTIfCommentsActive>
<$mt:EntryClassLabel setvar="entrytype"$>
・・・・・
var disqus_identifier = <mt:If name="entrytype" eq="ウェブページ">'webpage:<$mt:PageBasename encode_js="1"$>'<MTElse>'<$MTEntryID$> <$mt:EntryPermalink$>'</mt:If>;

＊（注）上のコードは一部抜粋のため、そのままペーストして使うと正常に出力されない場合がありあます。

内部リンクに対するnofollow指定の解除ですが、検索結果ページでパンくずリストか反映されていたりするなど、重要度が低くなってきたので内部リンクへのnofollow は解除していくということとしました。

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

ブログのコメントにDISQUSを導入

これまで使用していたMovableTypeシステムのコメント機能をDISQUSのほうに切り替えをしました。

既に、使用中のMTOSとWordPressのほうでは導入しており、ずいぶんと出遅れていますが、このブログとおよびwww.markdiary.com内のページにDISQUSを入れました。

MovableType への DISQUS の設置ですが、DISQUSよりプラグインが提供されています（入手はDISQUSの管理画面よりおこなうことができます）。ですが、今回はプラグイン使用をせずに、Universal Code のほう（install のページで下のほうにある）を利用して行なう事にしました。プラグインとの違いですが、自分でテンプレートを編集の作業がでてくるのと、これまでのMTシステムのコメントからインポートするという機能が利用できないといったくらいです。

WordPressのほうのDISQUSプラグインでは、管理画面からフレーム内にDISQUSサイトの表示ができて管理画面で操作できるのですが、MovableTypeのDISQUSプラグインにはそういった機能はありません（ヴァージョンアップもWordPress用ほどにはおこなわれていないようです）。

ということで、これまでいただいたコメントはDISQUS上で管理しないと割り切っていれば(WXR 自作すればなんとかなりそうだけど、ここでは触れないでおきます)、プラグインでなくて、Universal Code でも特に問題なく使うことができます。

切り替えのメモ

ここからは、MovableTypeでの切り替えのメモとして記しておきます。そもそものDISQUSの登録方法とかは省略します(新UIのほうの画面でみています)。

コードスニペットの入手は、自分が登録したサイト(ドメイン単位とおもわれる)のSettingsタブからInstallタブへ、下部にDisqusアイコンがあるのでクリック。

Embed code に記載されているコードを、コピーしてテキストエディタにペースト。エディタでvar disqus_shortname = 'example' のexampleの文字を、登録したサイトに設定しておいた「ショートネーム」に置き換えします(このショートネームは設定すると後から変更できないことになっているので注意)。

コメントのテンプレートをDISQUS用に差し替える

テーマごとに構造が違うので大雑把な形で書くと以下のようなテンプレートモジュールを作成しておいて、いままでインクルードしていたコメントモジュールと差し替えるだけです。

<mt:Comments>
MTCommentsのループ
これまでいただいたコメント表示を残すためのもの
</mt:Comments>
<!-- DISQUSのコードスニペットここから -->
<div id="disqus_thread"></div> 
・・・・・・・
<!-- コードスニペット最後まで -->

なお、この例ではもとのコメントフォームを一切取り払った形のものです。

コメントフォームは残す形にするとか、noscript要素に独自のフォームをいれてスクリプト停止の環境にもつかえるようにするなどといったカスタマイズも考えられます。

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

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

  • 更新されない過去記事にメッセージをだすようにした
  • Google Website Translatorを一部ページに設置

更新する予定（=気）のない記事には、 @プライベートタグを付与、それによってMTIFタグにより振り分けという、よくある処理です。

Google Website Translatorは、ブログ外のwebページのほうに試験的に設置。これは設定にて、Google Analyticsのプロファイルを使うようにすると、翻訳がつかわれたかどうかも計測（？）できるのだそうです。

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

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

今月（2012年1月）本年最初カスタマイズ記録をまとめたエントリです

  • 利用中のGoogle Analytics での「サイトの速度レポート」を追加した
  • 背景画像の変更

サイトの速度レポートは、簡単にいうと、ページの読み込みの時間を測定するというもののようです。

読み込みの遅いページなどがわかるとのことで、詳しい説明は以下のヘルプページにあります。

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

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

今月（2011年12月）本年最後のサイトでカスタマイズした箇所をまとめたエントリです

  • rel=canonical を個別記事に採用した
  • WordPress を3.3にアップデート

canonical リンクは重い腰をあげていれてみることにしました。

MTArchiveLinkで分岐を駆使していれてもいいのですが、いつもの通り当該アーカイブテンプレート内でのカスタマイズがお好みなのでそのように。SetvarBlock でテキトーな変数名設定しておいて、append=を使っておけばなんかスッキリした気分に。

WordPress がついにリリースされましたので、例によって自動アップデート機能でアップデート完了させました。

3.3 「Sonny」と名付けられていまして、これはサキソフォン奏者のSonny Stitt に敬意を表してつけられたのだそうです。（というのは、WordPress日本語のblogのアナウンスに記載されていました。「ソニー・スティット」でWikipediaにのっています。ジャズに明るくないので自分で調べてたりします。WordPressでは、Jazzにちなんだ名前が命名されているようであります）

今回のWordPressアップデートによる不具合への対処等は今のところおこなっていません。

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

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

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

  • カスタマイズ記録のページで指定したタグを表示するようにした
  • OpenSearchのXMLを変更。Googleカスタム検索へ

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

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

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

  • utilities カテゴリリストの上下paddingの値を少し増やした
  • Lightbox表示は、Fancyboxに切り替え
  • カテゴリアーカイブページのGooglebotへのアーカイブ拒否
  • サイト内検索をGoogleカスタム検索に移行

display:blockのリンク要素のpaddingですが、あまりよくわかっていないのですけれど、タッチパネル系で選択しやすくなるかも（？）というあたりでしょうか。

カテゴリ一覧ページには、metaタグによりGoogleのキャッシュを作らないようにしました。（投稿ごとに変化するので）月別のほうは当月分のみが変化するものなので特に指定してなくてもいいのでないかと判断しました。どちらもnoindexでもいいんですけどアーカイブページをエントランスとするかたもいらっしゃるだろうってことで今の時点ではそのままにしてます。

サイト内検索でAjax Searchを使っていましたが、ブログトップページと一部ウェブページにおいてGoogleカスタム検索のほうに移行しています。

カスタム検索専用ページの作成ですが、「デザイン」の項目で、「2ページ」というのを選択すると、検索結果を表示させるページのURIとクエリ文字の設定ができるフォームがあらわれますのでそこで必要事項を入力していきます。そのあと「保存してコードを取得」で表示されたコードをコピーします。

あとは、Movable Typeからでもいいので、適当な検索用ページを用意して取得したコードをそのページ内に埋め込んでおきます。

そのあとサイドカラムなどにある検索用のformの行き先(action属性)に作成したページを指定して、クエリで設定した文字（標準ではq）が検索フォームから渡せるようにしておけば完成です。

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

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

今月（2011年9月）サイトでカスタマイズした点をまとめたエントリです今月カスタマイズした点は以下のとおりです。

  • comment CGIに対するpost制限IPアドレスの更新
  • Feedのgenerator要素(atom:generator)のuri属性値をmovabletype.comに変更

参考は以下です。

各ユーザー様での自己防衛について

  • http://sb.xrea.com/showthread.php?t=10838#post77290

確認したら、sixapart.com/movabletype/ はmovabletype.comに移動するようなので、テンプレートのほうで書き換えをおこないました。

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

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

今月（2011年8月）サイト内の修正やカスタマイズなどをした箇所のメモをまとめたエントリです

今月カスタマイズした点は以下のとおりです。

  • 過去の記事で公開不要となったものを削除
  • Internet Explorer用の条件付きコメントをIE9未満に変更
  • GoogleにクロールされるページのURLパラメータをマスターツール側で設定

過去記事の一部を、Evernoteのほうにおくことにしました（アーカイブの削減 ≈ 再構築(の数)の削減のため）。下書き扱いにしてサーヴァに残しておいてもよかったのですが、後からの取り出しやすさとか考えたらEvernoteのほうがよさそうだったのでそのようにしました。

EvernoteのURLで公開する予定はいまのところありません。

URLパラメータの調整ですが、ウェブマースターツールで「サイト設定」の「URLパラメータ」のところからおこなえます（詳細はマスターツールのほうを参照するなど）。

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

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

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

  • meta要素でのX-Frame-Optionsの記述をやめにした
  • FOAF(q.v. http://www.foaf-project.org/)のAuto-Discoveryを一部ページで削除
  • WordPressのヴァージョンを3.2にアップグレードしてみた
  • ブログトップページのサイドカラムの新着記事一覧を廃止に

X-Frame-Optionsをヘッダーに出力する例です。このブログ記事内でこれを適用したページはいまのところありません

<FilesMatch "\.(html|htm)$">
Header set X-Frame-Options "DENY"
</FilesMatch>

WordPress3.2へのアップグレードに関する参考ページは以下です

WordPressですが、前回のメジャーリリースのときに自動アップグレードにコケたことがありましたので、今回は自分で落としてきてアップグレードする作業をおこないました。

余談ですが、WordPressではメジャーリリースのときジャズミュージシャンにちなんだ名前がつけられるという、WordPress使いなら知っていそうなトリヴィアがあります。

手動とかいってもほとんどSSHによるリモートですのであっさりとおわってしまいます。

データベースをダンプしておいてからwgetで新しいのをもってきて、旧フォルダをリネームしておいてから展開、あとは.htaccessや、wp-config、/wp-content/内の必要なファイル、フォルダを旧フォルダからコピーするというものです。あとはログインすればアップグレード作業が走ったのちに完了します。

新着記事のリストですが、トップページに同じページのリンクが複数できてしまうことからやめにしました。

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

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

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

  • Evernote登録ボタン（サイトメモリー）を記事ページに設置
  • mt-search.cgiを復活させてみた

今更ながらですが、Evernoteのアプリケーションをいれてみましたので、それとともにサイトメモリーのボタンを設置してみることにしました。設置は以下のページを参考にコードをMovable Typeのものに置き換えしておこないました。

なおVicunaテンプレートの構造からそのままでは指定する範囲（id属性）が広くなってしまうので、エントリー部分をdivで新たに括ることとしました。

mt-search.cgiでタグ検索で使ってるXSearchと共存できなかったなどの理由で止めてたりしたのですが復活させてみました。が、まだテスト中で実際にAjax検索のほうから戻すのかどうかまでは未定です。

カスタマイズとは別な話ですが、今月はMovable Type 5.1正式版がリリースされましたが、それとともにセキュリティアップデートもおこなわれていました。

アップデートは4.29、4.291、4.292と合計で3回おこなわれました（もしかしてまだある？）。セキュリティ問題の修正がおこなわれているそうですのでまだなかたはおこなっておいたほうがいいでしょう。

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

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

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の入手先：
ファイルのアップロード：

自分の場合ですが、サイトのディレクトリ下に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名を指定しておけば完了です。

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

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

久々の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プラグインが必要です

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

今月（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! Pulse

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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>">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

今月（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ほかのモバイルデバイスをサポートするプラグインでして以下からダウンロードできます。

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

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

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

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

今月のいらんことしい（2010年12月）

今月（2010年12月）ブログのカスタマイズした点ををまとめた記事です

今月でいよいよ2010年もお終いとなります。今年最後のカスタマイズは以下です。

  • 「あわせて読みたい」のパーツ登録と貼り直し
  • Tag Archiveページでタグの表記を小文字に統一
  • Movable Type 4.28へアップデート

「あわせて読みたい」が、株式会社ユーザーローカルにより買収されたことをうけまして、パーツも再登録という形にしました。この件はトップページにいけば登録のフォームが用意されているので（今の状況に基づいていってます）、とくに説明は必要ないですね。

Movable Typeのヴァージョンをアップした際にタグアーカイブページに不備があったためなおしたついでに思いつきまして、タグの表記を小文字で統一するようにしてみました。lower_case="1"というモディファイアを利用しています。

Movable Typeのセキュリティアップデートがなされましたので、アップデートをおこないました。

余談ですが、Twitter上ではアップデートの方法がわかりにくいといった内容のツイートがいくつかみられました。このあたりはWordPressの自動アップデート機能とか使っていますと、やっぱりわかりにくいかもしれないなあ、という感想をもちました。

何回も（MTの）アップデートを繰り返してる者にとってはいつもの作業でしかないわけですが。。

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

今月のいらんことしい（2010年11月）

今月（2010年11月）ブログでカスタマイズした箇所ををまとめた記事です

今月はお休み、といきたかったのですがほんの少しですが弄っています。

  • コメント認証にTwitterを追加
  • コメントの即時公開を認証のものに変更
  • 関連記事の「Relatedentry」を変更

コメントの公開のタイミングを認証コメントに変更しました。

（本当はコメントを認証のみにおもっていたんですけれど）Twiiterによる認証コメントを導入することとしました。

Twitterの認証には、小粋空間様で提供されている「TwitterCommentプラグイン」を利用しています。

導入は、リンク先にあるとおりで自分のMTヴァージョンにあったプラグインパッケージをダウンロードして展開後のファイルを指定されているディレクトリにアップします。

あとは説明にあるとおりに、Twitter側でアプリケーションの登録などを済ませて、「Consumer key」と「Consumer secret」を得たらプラグインの設定画面（ブログ単位で）フォームに入力して設定を完了します。

なおコメントを投稿する際の流れは小粋空間様のプラグインページにあるとおりです（＊説明の画像はヴァージョン5.xです）。

導入のときに認証で進まなくてはまっていたので、プラグイン紹介ページのコメント欄にあるような方法で対処することにしました。

関連記事のリストのタイトルでRelatedってのもどうかなというので、関心を持つかもね、みたいな感じにしてみました。怪しげな英語なので全然間違ってるかもです。

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

今月のいらんことしい（2010年9月）

今月（2010年9月）ブログでカスタマイズした点などををまとめた記事です

今月のカスタマイズは以下のとおりです。Voxサービス終了にともなう変更がメインとなっています。

  • ActionStreamプラグインからVoxのサーヴィスを削除
  • PostVoxプラグインの停止（削除）
  • コメント認証のサービスからVoxを外した

カスタマイズというものとは違うとはおもいますがいちおう。削除後はモジュールテンプレートなどインクルードしてる部分があるので再構築をおこなって完了しました。

PostVoxプラグインは利用の停止ではなくてプラグインディレクトリからごっそり削除しました。

それと、Voxでやっていました「maRkのつれづれぼっくす」ですが、

にてブログを続けていくつもりです（フィード登録はこちら：http://tsuredurebox.geo.jp/feed/）

移行後それほど手を加えてないので一部表示がおかしい部分はあります。

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

今月のいらんことしい(2010年8月)

今月（2010年8月）サイト内でカスタマイズした点を記す記事です

グローバルナビゲーションからaboutページを削除（ウェブページ内で表示されるようになってる）してみました。

そのかわりというか、ウェブページのときはaboutがでてくるように振分けしてはあります（これはコードわざわざ示さなくてもいいですね、単純な振分けだし）。

それと同時にナビゲーションにサイトのトップ（/）とBookmarkページをいれることにしてみました。

まあ殆ど機能してないといってよさそうなナビゲーションなので何がはいっても大差ないとおもうんですがまた今度考えるかもです。

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

今月のいらんことしい(2010年7月)

今月（2010年7月）テンプレートなどカスタマイズした点をまとめた記事です

今月はほとんど触ってなくて、あれこれ弄ってないほうが安定しているというか普通なのですが。

  • カテゴリページのはてなスターをはずした
  • search_data.txtのXML宣言をとってみた
  • search_data.txtのMIME Typeをapplication/jsonにしてみた

まったくカスタマイズというかんじではないのですが、気にせずいきます。

Ajax JSON検索のsearch_data.txtの先頭のXML宣言の役割とか未だにわからなくて、おそらくとりはずしても動くのでないかと思って外してみました。外すとまずいのかなあ、どうなんでしょうか。

3番目のやつはネタがなかったので無理矢理です。通常は配布元が説明されているとおりで動くことになってます（のはず）。

さてJSONのMIMEタイプですが、RFC 4627でapplication/jsonとして公開されています。

Ajax検索用のJSONファイルはtext/planeでも動いてたわけですがあえて（？）かえてみました。以下、.htaccessへの追加コード。備忘用です。

<Files "search_data.txt">
AddType application/json .txt
</Files>

あー、あとMTで拡張子.jsonなファイルができたかどうか試してなかった。。変更後の置換が面倒だったので（というよりお試し程度のことで再構築したくないような）.txtのまま使うことにしました。.jsonでやったとしても（httpd.confになければ）AddTypeはいるかも。

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

バックナンバーは以下にあります。

MT：メモ：alt templateを使い変数jq_js_includeにappendする場合について

Movable Typeの管理画面カスタマイズで、プラグイン経由でフッターのJavaScriptにコードを追加しようとするときに、jq_js_includeにappendするとダイアログ表示にもコードが追加されることがあります。

MTの管理画面でjQueryを追加してカスタマイズするとき、footer.tmplファイルにある、<mt:var name="jq_js_include">にappendする（append=1として変数に追加する）という方法を以前このブログ内において公開していたのですが、これをおこなったときにダイアログを表示（テンプレートの初期化とか、エントリ編集画面のファイル・画像アップロードのときとか）したときにも追加されることがあるのを確認できました（MTOS 5.02）。

追加したコードの書き方によっては必要もない箇所でカスタマイズしたコードの読み込みがおこなわれることもあるのでないかとおもい、その対処を考えてみました。

なお、これが再現されるのはTransformerプラグインでsetvarblockを使いappend=1というオプションを利用したなどの場合で、直接当該テンプレートのコピーをalt-templeでカスタマイズした場合には問題ないものとおもわれます。

（１）footer.tmplの代替テンプレートを作り、カスタマイズ用の変数をセットする

先述の現象は、/MTシステムフォルダ/tmpl/cms/dialog/footer.tmpl で<mt:var name="jq_js_include">が記述されていることによります。

つまるところダイアログのテンプレートを除外すればいいわけなんですが、ここは条件式なしで変数をセットしておいてそこに追加させるという方法で対処してみます。

  • /MTシステムフォルダ/tmpl/cms/include/footer.tmplファイルをコピーしてalt-tmplフォルダ以下に/cms/include/footer.tmplをおきます
  • （コピー先の）footer.tmplをエディタで開いて、このリスト下に示すコードを追加します
  • 編集後はサーヴァにローカルと同じ構成でアップロードします
footer.tmplに追加するコード。

追加の場所は</body>の上に。ここでは変数名をjq_custom_includeとした。

<script type="text/javascript">
jQuery(function($){
<mt:var name="jq_custom_include">
});
</script>
<!-- 追加コードここまで -->
    </body>
</html>

勿論、上記コードのscript内およびjQuery(function...内に直接になんらかの処理のコードを書くということもできます（このエントリではプラグイン等でappendを利用することを想定したつもりですが）。scriptタグ自体を追加側（setvarblock内）のコードに委ねるというのであれば変数の呼び出し（mt:var name=）だけ置けばよいことになるでしょう。

ちなみに追加させるほうのコードについては、jQuery()といった書き方を$()で書くことができるという寸法であります。

jQueryのコードの追加

あとは、setvarblockで任意のコードをappendです。

<mt:setvarblock name="jq_custom_include" append="1">
/* append code
 $("#foo").css("background", "#ffffff");
*/
</mt:setvarblock>

（２）スクリプトがダイアログのとき動作しないようにする

コードを書くにあたって、ダイアログと当該テンプレートで共通しないidかclassを参照するようにするのがコツなのですが、カスタマイズのスクリプトがダイアログのときは動かないようにコードで分岐しておく、ということも考えられます。

これには、dialog.tmplでルート要素にdialogというIDがつけられていることを利用します（ヴァージョンアップ等でなくなる可能性はあるかもです）。

以下は、jQuery('#dialog')でIDをgetして分岐するコードです。＊else{以降は適当な（動作に影響をおよぼさない）コードを。

<mt:setvarblock name="jq_js_include" append="1">
var gt_html_id = jQuery('#dialog');
if(gt_html_id==""){return;} 
else {
//  Do Something
jQuery('#bootstrapper').removeAttr('class');
}
</mt:setvarblock>

この例では、ID bootstrapperのclassがダイアログのiframeでリムーヴされずに残っているはずです。（Firebug等のツールで確認します）

追記（2010.07.22）プラグインでの追加方法の対策で微妙ですが公開しておきます。

（３）プラグインで対策してみる

例えば、include/header.tmpl でrelated_contentという変数がセットされており、/dialog/header.tmplではセットされていないことからこれを置換する形で。。

   my $old = qq(<mt:setvarblock name="related_content">);
   my $new = <<EOT;
#
# ここにappend予定のsetvarblock !
#
<mt:setvarblock name="related_content">
EOT

   $$tmpl_ref =~ s/$old/$new/;

あとこまかな事など

cms/dialog/header.tmplにおいて、<mt:var name="html_head">、<mt:var name="js_include">の記述があるので、appendする場合についても同じ状況になることがあるかも知れません。

以上の内容は自分が試した環境に基づいています。早い話、MT編集画面のカスタマイズをしていなければこれらの問題はまずおこらないということです。確認にはFirefox + Firebug でダイアログ表示のiframeを別のウィンドウで表示させたうえでページのHTMLをチェックしました。

個人的には、何かの操作ボタンを追加するとかいったカスタマイズについて、或る操作の時だけ必要というようなものはブックマークレットでもいいのではないかと考えています。

おもいつくままで整理できずにまとめたので、ちょっと何いってるのか分からないかんじで申し訳ありません。

メモ：regex_replaceとダイナミックとスタティック

regex_replaceモディファイアでスタティックパブリッシングとダイナミックパブリッシングで分岐させてみようとおもったので動作のメモとして記しておきます。

小粋空間さんの以下のページにはダイナミックパブリッシングにおいて正規表現の後方参照の$をエスケープしないと期待どおりに出力されないといったことが記されております。

（これといって重要なことでもないのですが）それならばダイナミックとスタティックで振り分けてみようかと思ってやってみたのです。解説できるほどのスキルはありませんので、動作を試したテンプレートのコードをそのまま載せておきます。（確認はMTOS5.02/Movable Type Pro 4.27-jaによる）


<!-- 
     ex1
-->

<ul id="ex1">
<MTFor var="x" from="1" to="10">
<MTIfDynamic>
<li><MTVar name="x" regex_replace="/(\d)/","No.\$1"></li>
</MTIfDynamic>
<MTIfStatic>
<li><MTVar name="x" regex_replace="/(\d)/","No.$1"></li>
</MTIfStatic>
</MTFor>
</ul>

<!-- 
     ex2
-->
<$MTSetvar name="regexp" value="/(\d)/"$>
<$MTSetvar name="rep" value="No.$1"$>
<ul id="ex2">
<MTFor var="x" from="1" to="10">
<li><MTVar name="x" regex_replace="$regexp","$rep"></li>
</MTFor>
</ul>

まあキャプチャする必要のないサンプルですが失敗してるか成功してるかわかりやすそうなものということで。

ざっと思いつくのは、ex1のようなコードかと。それから奮闘した結果、いいのかわるいのか分かりませんが、結局変数に渡してドル記号つきで参照することでどちらでも同じといった感じでした。

いちおうコンパイルされたほうのテンプレートでsetvarの部分です。

<?php $this->_tag_stack[] = array("mtsetvar", array (
  'name' => 'regexp',
  'value' => '/(\\d)/',
));  echo smarty_function_mtsetvar(array('name' => 'regexp','value' => "/(\d)/"), $this); array_pop($this->_tag_stack); ?>

<?php $this->_tag_stack[] = array("mtsetvar", array (
  'name' => 'rep',
  'value' => 'No.\\$1',
));  echo smarty_function_mtsetvar(array('name' => 'rep','value' => "No.\$1"), $this); array_pop($this->_tag_stack); ?>

今月のいらんことしい(2010年6月)

今月（2010年6月）、ブログ内でカスタマイズにした点をまとめるエントリです。

  • Google1 Buzzへの投稿リンクをAtomフィードに挿入
  • 各記事ページのAddClipsのボタン外した
  • カテゴリアーカイブのページ送りの部分

Google Buzz廃止決定につき、以下の内容は破棄とします。

Google Buzzへ（以下「Buzz」にて表記）Postするリンクですが、公式のBuzzボタンがでていますのでウエブサイト内に設置するにはそちらのほうが簡単に設置できることかと思います。

で、BuzzへPostするリンクは、http://www.google.com/buzz/post?message=Message Here&url=http://yoursite.example.com/のような形式です。以下を参考にするといいようです。

mt:entriesのループ内でMTEntryBody、MTEntryMoreのあとに以下のようなものをいれます。なおコードはCDATA区間にいれています。

  • <a href="http://www.google.com/buzz/post?url=<$MTEntryPermalink encode_url='1'$>">Buzz It</a>

カテゴリアーカイブでMTPaginateによるページ分割をおこなっていました。

プルダウン形式のページ送りでは、ページがコンパクトになるのはいいのですが、ページの分だけoption要素が増えてくるというのがちょっと気になりました。

ページ送りの部分だけに関していえば、分割するページの最大数さえわかれば、JavaScriptによって作ることも可能なのでないかと考えました。

そのひとつの方法として、今回はjQuery Spin Buttonというプラグインを利用する形でいれることにしました。このプラグインは、jQuery日本語リファレンスのページ内で掲載されています。

動作は各アーカイブのページで確認できます。スピンボタンにsubmitを組み合わせたような形です（やっつけですので体裁はいまいちです）。

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

バックナンバーは以下にあります。

Index of all entries

BlogTop > MTカスタマイズ Archive

Search
Categories
Feeds
Elsewhere

Action Streams

logo

Comment powered by DISQUS

Return to page top