2013年4月 Archive

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

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

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

Movable Typeのウェブページ用カスタムフィールドで次のページURL を示すフィールドをつくってみました。

背景など

ウェブページの link 要素のrel=next および、rel=prev に入れるURLをあつかうとき、MTPageNext　や MTPagePrevius がありますが、これはページの作成順序を考慮していないと、「本当はあのページを次のページとして指定したかったのに」なんてことがおこるかどうかは定かでありませんけれども、そんな環境を想定してみました。

細かな前提とかおいておき、さっそく作成例として示しておきます。

ざっと NextURL のほうだけですが以下のようなものです。previous は文字列変更するだけですので省略。

名前のところは、管理画面の「表示オプション」などが使用するので、わかりやすくて簡潔な名前のほうがいいでしょう（ここの例は思いつきでつけただけですので）。ベースネームは他のと重ならないもの、テンプレートタグも既存のものと違うもので、CFなどの接頭辞をつけてテンプレートタグとわけておくのがいいです。

システムオブジェクト

      ウェブページ

名前
      nextURL

説明
       次のページ

種類
      テキスト

必須?
      なし

規定値
      なし

ベースネーム
   cf_pagenexturl

テンプレートタグ

   CFPageNextURL

テンプレートの例

<mt:If tag="CFPageNextURL">
nextURL: <mt:CFPageNextURL>
</mt:If>

使用する場合は、 ウェブページのそれぞれのページ編集のところで、表示オプションで作成したフィールド名にチェックを入れてフィールド表示させておきます。

あとは、URLを入力すれば、MTCFPageNextURLは入力したURLに展開されます。

以下は、簡単な link要素の next prev の設置です。

head 要素内に以下を追加します。

<mt:If tag="CFPageNextURL"><link rel="next" href="<mt:CFPageNextURL>"></mt:If>
<mt:If tag="CFPagePreviousURL"><link rel="prev" href="<mt:CFPagePreviousURL>"></mt:If>

title 属性を入れたい場合は、 :title=XXX とか独自に記法を決めておいて、URLとtitle部分を regex_replace で取り出すか、新たにタイトル用のフィールドも作るかになるとおもいます。

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

URoad-8000 の 11nモードで、アクセスポイントを5GHz帯へコンバートした環境をつくってみたのでそのメモです。

やりたいことは、以下のブログエントリーとほとんど一緒です。当然、公式でない接続のしかたなので、リスクは自分で負うということになります。

• WiMAX Speed Wi-Fi を 5 GHz 帯にコンバート - gwaw.jp

URoad-8000 の11nモードでは、2.4GHzのみサポートであり、 MacBookとの接続で速度低下がおきたといった情報が（それほど多くはみられないものの）インターネット上にあがっています。

今回使用した機器は以下のとおりです。

• MacBook Pro 15-inch, Early 2011 (10.7.5)
• URoad-8000 （WiMAX WiMAX Speed Wi-Fi）11b/g/n 混在モードに設定済にしておく
• MZK-SC300D（PLANEX 11n/a/g/b 対応 高速300Mbps Wi-Fiシンプルコンバータ　以下「SC300D」）
• MZK-MF300D（PLANEX 11n/a/g/b 対応 高速300Mbps Wi-Fiマルチポケットルータ 以下「MF300D」）

（このほか、 コンバータとルータとの接続に別売LANケーブル 1本）

実際に機器を並べた写真が以下になります。

Continue reading