MTカスタマイズ Archive

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

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

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

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

今月（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月）、カスタマイズした点をまとめたエントリです。

• テンプレートのインデントを変更した
• 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）を参考にすると、テキストリンクでも出来ることが分かりました。

• Feedly に登録

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

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

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

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

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

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

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

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

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

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

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

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

今月（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月）、カスタマイズした点をまとめたエントリです。

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

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

• 設置方法｜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 へ変更する

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月）、サイト内でカスタマイズした点をまとめたエントリです。

• はてなブックマーク、エントリーページへのリンク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要素内に任意のコードを追記することを可能にするプラグインです。

• 小粋空間: CMSHeadプラグイン

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

<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月）、サイト内の管理上の変更、カスタマイズした点をまとめたエントリです。

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 を明示的に指定

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

• 5.2.3へアップグレードした時の設定とトラブルシューティングまとめ
• メモ：Movable Type 4 系から 5.2.3 へアップグレード

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」エラーについて が参考になりました。

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

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