myown Archive

今月（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採用していれば特に必要のない処理です。

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

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

phpMyAdminの操作などのアイコン表示されている部分の表示方法のコンフィギュレーションについてのメモ

Coreserver.jp のデータベースの管理ページからphpMyAdminを自動インストールしたあと、アイコンと説明の文字が表示される状態になっていました

このままでもいいのですが、横にスペースをとるのでウィンドウサイズを広げないと横スクロールが発生して少し使いにくくなります。

これを下のようにしたい、というときの設定です。

まず、config.inc.php をエディタで開きます。

以下の設定を追記あるいは、変更します。

// Tabs display settings
$cfg['PropertiesIconic']      = TRUE;

コメントの部分を転載しますと、

// Use icons instead of text for the table display of a database (TRUE|FALSE|'both')

ドキュメント（Documentation.html#config [ phpmyadmin 配下にあるHTMLドキュメント ]）より

$cfg['PropertiesIconic'] stringIf set to TRUE, will display icons instead of text for db and table properties links (like 'Browse', 'Select', 'Insert', ...).

Can be set to 'both' if you want icons AND text.

When set to FALSE, will only show text.

まとめますと

• TRUE アイコン表示
• FALSE テキストのみ
• both アイコン + テキスト

確認したヴァージョンは、3.5.1 、3.5.2。　以上です。

今月（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>

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

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

Firefox開発ツールバーのコマンドの export html は、ページのHTMLのスナップを別タブで表示できます。

※この記事では、 Firefox 20.0 ( for Mac) での動作をもとに書いています。

New Firefox Command Line helps you develop faster Mozilla Hacks - the Web developer blog の説明より

The "export html" command opens a new tab with an HTML snapshot of the current state of the page.

Ajax feed サンプルのような動的ページのスナップでソースを確認するなどのときにいいのかもしれません。

対象とするページを開いた状態で、開発ツールバーを表示して ( 自分はCustomizable Shortcutsというアドオンをいれてショートカットで開けるように設定しています )、使用する時は、export html と入力してenter です。

新規タブで、表示されたページのソースがみられます。ロケーションバーにはdata:text/plain;charset=utf8, のあとエンコードされたソースが入る形式のようです。

このページを、command +S（ファイル - 別名でページを保存） で保存することもできます。

この件とは別に（おまけで）、選択したテキストを新規ページで開くブックマークレットを作ってみました。

おもにWebページ上で提示されたコードをコピーしてファイル保存するのに使うのを目的としています。

置き場

Google Analytics を使っていて、サポートページが子ウィンドウで開かれて読みにくいとき、親ウィンドウでみるためのリンクを追加するGreasemonkeyスクリプトを作ってみました。

たまに、スクロールが無効になっていて全文表示できずに、不便なページがでることがあるので（Firefox で閲覧時）。

主に左サイドバーのヘルプセンター内のリンクをクリックしたときに、子ウィンドウでの表示になるようです。

適用すると、子ウィンドウの上部に「Open with Parent Window」のリンクがついて、クリックすると親ウィンドウで表示され子ウィンドウは閉じます。

// ==UserScript==
// @name        GA Help Parent Window Open
// @namespace   http://labs.markdiary.com/
// @include     https://support.google.com/analytics/*
// @version     1.0
// @license     MIT License
// ==/UserScript==

setTimeout ( function(){
  var id = document.getElementById("gm_open_parent_window");
  if(window.opener.closed){
    id.parentNode.removeChild(id);
  } else {
    link_();
  }
}, 200);

function link_(){
  var a = document.createElement("a");
  a.id="gm_open_parent_window";
  a.appendChild( document.createTextNode("Open with Parent Window"));
  a.href = "#";
  a.addEventListener( "click", open_ ,false );
  document.body.insertBefore( a, document.body.firstChild );
}

function open_(){
  if(window.opener){
  window.opener.location=location.href;
  window.close();
  }
}
;

repository

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

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

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