net Archive

旧Wimax は、2020年3月31日をもって停波となりました。これまでの接続の切り替えを2+に変えましたため、IPv6の設定も併せて行ってみました。

注：WiMAXプロバイダーによっては、IPv6提供されていない場合がある点をご留意ください。本記事投稿者の環境では UQ WiMAX本家によるものです。

今のところは、 NAD11(NEC) を使っております。

まずは、ルーター設定画面に入って、IPv6も使えるようにしておきます。

(NECなので クイック設定Webとなってます)

ネットワーク設定の「プロファイル設定」にIPタイプというのがあるので、「IPv4&IPv6」にしておけばいいかと思います。

次はMacのネットワーク設定の場合です。

「ネットワーク環境設定」で詳細ボタンで、TCP/IPというタブに切り替えます。

ここで IPv6の設定を「自動」にしました。

で、接続状態を確認したら、 IPv6がチェックできるようなサイトを訪問します。

ちなみに、IPv6接続の準備が整ってるか確認できるサイトがありました。

＊注意・リンク先に行くと間髪入れずにチェックが始まります。

• https://test-ipv6.com/
• https://support.biglobe.ne.jp/ipv6/option.html

KDDIのページでは、画面右上に接続IP状態がわかるようになっています。設定によっては、v4のままになってることがあリます。

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

• Bookmarkページで、 YQLによるフィード取得ができなかったのでこの部分を削除

YQLはサービスそのものがなくなっていたので、ブックマークページのRSSから最新を取り込むことができなくなったので削除しました

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

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

Google Analytics で AMPページのレポートもできるようにしましたが、AMPページのみのフィルターを作りました。

AMPページのレポートについては、トラッキングIDを別に設定する、といった方法もありますが、比較のしやすさという点で、自分では既存のIDと同じもので計測をしています。

で、AMPからのトラフィックだけを見たい、という時にフィルターをかける必要が出てきます。

方法としては、各レポートのテーブルの上にある、検索窓から任意文字列を入れて絞りこむのですが、逐次このような作業を行うのは手間です。

なので、フィルターずみのレポートを Analytics 側に保存する、という形を使うのが一般的でしょう。

その方法としては、大きく2つあり、1つは、「カスタムセグメント」を作成して、保存しておくやり方。2つめは「カスタムレポート」を作成して保存するといった方法です。

本エントリーでは、前者のやり方をみていくこととします。

カスタムセグメントの作成

公式の作成方法は以下となっています。

• セグメントの作成 - アナリティクス ヘルプ

まずは、どのようなデータから切り出ししたいのかを決めておきます。

今回は、訪問されたページの URL から AMPページであるものだけ抽出したいので、以下のようなものになります。

（あくまでも、私個人の評価による設定ですので、統計の方針により異なります）

• ランディングページの URLで、「amp.html」を含むもの
• 端末として、 iOS Android そのほかであるもの

具体的な操作としてはこのようになります。

※ Analytics の画面は不定期に更新されることがあります。項目の名称及びスクリーンキャプチャの相違についてはご容赦下さい。

• 適当なレポートを表示させて、上部の「+ セグメント追加」をクリックします
• 「+ 新しいセグメント」をクリック
• リスト名に適当に自分がわかりやすいセグメントの名称を入れます（入力がないと操作の途中に警告が出ることがあるので先に入れておくのがいいです）。
• 左の「テクノロジー」タブを押します。「オペレーティング システム」の項目に 「iOS」「Android」「(not set)」(これは任意)を設定します。（改行で内容の区切りになることに注意します）

• 左の「条件」タブを押します。フィルターのセッションのプルダウンで、「ランディングページ」（「ページ」でも可能）を選びます
• 条件は「含む」で 「amp.html」（AMPページで使用しているURLに含まれてる文字列。人によって条件は違います）を入力。候補が絞り込み表示されて、右ペインにフィルターされてる結果がでます

あとは、上部の「プレビュー」を押して確かめるなどして、「保存」を押します。

これで、セグメントのリストに AMP用のセグメントが追加されました。見たい時は、「セグメントの追加」で、保存されたAMP用セグメント選び「適用」すればいいだけです。

それと、 iOSの Analytics アプリ（Google提供）にもカスタムセグメントの機能が反映されます。出先でも確認が取れて便利になります。

「カスタムレポート」で作ることもできますので、簡単に触れておきます。

• カスタムレポートのタブを押します
• 「新しいカスタムレポート」
• 指標やディメンションは任意のものを決めておきます（ページタイトルとか）
• フィルタ - オプションのところで、ページURLにAMPページに採用してる文字列を入れておきます
• 「保存」を押して完了です。

カスタムレポートは他のレポートと独立しているので、使い方次第なのですが、セグメントで扱う方がいいように感じます。

Yahoo Pipes およびYQL経由でAjax による、Feedly の購読者数の取得が出来なくなったため、改修をおこないました。そのメモです。

これまで、以下のページにあるような方法で取得していたのですが、いつからか不明ですが、取得できないようになっていました。

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

先般、 Yahoo Pipes のほうで、Pipesの終了に向けてのアナウンスがありました。

• Yahoo Pipes Blog - Pipes End-of-life Announcement

とりあえず、このまま使っていても進展しないようなので、別の方法で取得するようにしました。

PHPによる取得

PHPの file_get_contents ファイルシステム関数を利用すれば、APIの返すソースを得ることができます。

基本的なものは以下のようなかんじに。

<?php
    $url = "http://example.com/feed/";     // 対象URL
    $json = @file_get_contents("http://cloud.feedly.com/v3/feeds/feed%2F".rawurlencode($url));    // データ取得
    $feedId = json_decode($json, true);    // JSONをデコードし配列へ
    $count = isset($feedId['subscribers']) ? $feedId['subscribers'] : 0;    // isset()で内容を調べ $count へ代入。登録されてないときは 0
    print  $count;

参考：

• ソーシャルカウントの取得方法まとめ(全9サイト)

ウチのとこみたいに増減がほとんどないようなら、キャッシュいれたほうが、あちらのサーバーにはやさしいとおもいます（使ってるページ自体がアスセス少ないとか言わない）。

PEAR の Cache_Lite パッケージを用いた例です。

都合で、コメントに説明をいれています。

<?php
    header("Content-Type: text/html; charset=UTF-8");   // text/plain でもいいような気もするけどとりあえず

    // チェックURL
    $url = "http://example.com/feed/";    // フィードURL

    require_once "Cache/Lite.php";    // Cache_Lite 呼び出し

    // キャッシュオプション

    $cacheOptions = array(
        'cacheDir' => '/var/www/tmp/cache/',  // キャッシュディレクトリを指定。適切なパーミッションをセットしておく
        'lifeTime' => '3600', //  キャッシュ期限  (1時間) 
    );

    // キャッシュID と キャッシュオブジェクト生成
    $id = "feedlysubscribers";
    $Cache_Lite = new Cache_Lite($cacheOptions);

    // データ取得
    if($count = $Cache_Lite->get($id)){  // 
        echo $count;
    } else {

        // キャッシュがないときに、フィード購読者数の取得にいく

        $json = @file_get_contents("http://cloud.feedly.com/v3/feeds/feed%2F". rawurlencode($url));
        $feedId = json_decode($json, true);
        $count = isset($feedId['subscribers']) ? $feedId['subscribers']: 0;

        echo $count;
    //  キャッシュ登録でこの条件が真になるようにする
        $Cache_Lite->save($count, $id);
    }

参考：

• Manual :: Cache_Lite の導入

これを、 subs_count.php とでもして、サイトのどこかに置きます。

で、取り出す側は jQuery でテキストファイル読み込みなんかを使っていきます。

jQuery本体の呼び出しは済ませてあるものとします。

ファイル呼び出し

表示ページが PHP なときは、include するとかでいいかと。 以下は、jQueryで先ほどのPHPファイルを取り込みます。

テンプレート上の購読者数表示する場所に以下の要素をいれておきます。

<div id="feedly_subscribers"></div>

複数あるようなときは、class属性にしておき、以下の読み込むときのセレクターもそれにあうようにしておきます。

単に読むだけなので、.load() にしてますが、各種処理が必要な場合は .ajax() のほうにします。

<script>
$(document).ready(function (){
  $("#feedly_subscribers").load("//path/to/subs_count.php");
});
</script>

シックス・アパートより、スマートフォン向けの投稿サイト、「ShortNote」ベータ版がリリースされました。無料で利用可能とのことです。

SixApartからお知らせメールは受けとっているのだけど、完全に通過してしまったみたいで、ちょっと出遅れてしまいました。

• スマートフォン向けブログ風投稿サイト「ShortNote」をベータ版としてリリースしました |　Six Apart

ShortNoteは以下より

• ShortNote

なお、お知らせ・ヘルプなどの情報を発信するブログは、Movable Typeで作成されているサイトのようです。

登録は今のところ、メールアドレスによる新規入会、Facebook、Twitter、Google+ のアカウントからの新規入会に対応しています。

Google Analytics では、日々進化しており、気づかないときに機能が追加されていることがよくあります。いつもよくみるレポートをショートカットに登録することで、すばやく目的のレポートにたどり着くようにします。

なお、先述のとおりにGoogle Analytics (以下、「GA」と略記します)で機能の追加／変更がおこなわれますから、この記事の内容も現在のものとあっていないことがありますので、ご了承ください。

この前、GAでレポートを見にいったとき、セカンダリディメンションでの項目が増えていたことがありました。

これにともなっって、項目の位置についてもカテゴリが移動になっていたりして、探すのに手間取ったりもしました。

例えば、ページ訪問に使われた「キーワード」に関しては、以下の通りになっています。

キーワードの場所は、このキャプチャでいくと、「広告」のなかにカテゴライズされています。いちおう、検索窓がつけられていますので、そこで、キーワードと入力すればすぐにキーワードにマッチするものを表示してくれるようになります。

毎回検索窓に入力するのは多かれ少なかれ手間になりますので、すぐにこのレポートにたどり着くために、ショートカットを活用します。

例えば、すべてのページでキーワードのレポートをみるとします。　まず、行動＞すべてのページ でセカンダリディメンションでキーワードを設定した状態で、上部のメニューにある、「ショートカット」をクリックします。

ダイアログがでますので、そこで識別用の名前を入力して、OKをクリックでショートカットに登録されます（プロパティ単位での登録で全てに共有されるものではないようです）。

あとは、左メニューの「ショートカット」のなかから任意のものを選ぶことですばやく目的のレポートを表示できるようになります。

Google Reader がサービス終了するとのアナウンスをうけて、サービスに頼らない形も用意出来たらと思ってrss2email を仕込んでGmail に送りつけるというのを考えました。

というのは立前でして、海外サイトですがちゃんと Google Reader の後釜として紹介されていたのであります。

• Triumph Over Madness: Hooray! I don't need Google Reader - rss2email works better for me anyhow
• Turning Gmail into Google Reader | W. Caleb McDaniel
• Replacing Google Reader with rss2email(magnatecha.com)

（適当に検索して上位にきていたものですので、細かく探せばいろいろとあるとおもいます）

参考にならないことですが、いちおう書いておきますと、自分ではこれまで RSSリーダーは分散させていて、livedoor リーダーとGoogle リーダーとで登録フィードは切り分ける形で利用していました。

他サービスに移行するのと比べてよいと考える点は以下です。

• アカウントを取らなくてもいい（OAuth 利用だとあまり関係ないですけど）
• Gmail は普段使っているものであり、新規に操作性に慣れる必要がない
• Google お得意の検索機能の享受

ただし、以下の項目を許容できるとして

• セットアップまでが手間
• メールを経由するので、他サービスとの共有もメールでの連携という形になってしまう
• どちらかというと、フィードを読んでシェアするというよりは、ログとしてストックしておくという使い方むけ
• Gmail のフィルターを使って振り分けしないと受信トレイがフィードで埋め尽くされる
• Gmail 依存なので Gmail 自体のサービス変更の影響を受ける可能性がないとはいえない

大雑把に設定までの流れをしめしますと

1. Mac の Postfix を設定して、usr/sbin/sendmail を呼び出せるようにしておく
2. 今回は、Gmail の SMTP を利用するという形にする
3. rss2email を落としてきて任意の場所に展開する
4. rss2email の設定ファイル作成
5. rss2email のコマンドからデフォルトの送信先メールの登録と読み込むフィードを登録
6. 送り先のメールで受信したフィードに対し、フィルタリングをして振り分けする

----自分の場合だと、送り先メールアドレスは Gmail 以外にしておき、メールクライアントで受信した時点でGmail へ転送、 Gmail 側のフィルタにより登録フィードを整理、といった運用です。

• Official Google Reader Blog: Powering Down Google Reader

バザールでござーるのオフィシャルウェブサイトのゲームコーナーの そろえてパッパ！に関してのネタです

http://jpn.nec.com/bazar/game/papa/ (※ Flash が必要)

ゲームの説明はページ内にあります。簡単にいえば絵柄を揃えて消していくパズル系のゲームです。

著作物である関係上、面倒なのでスクリーンショットの掲載を控えていますのでご了承ください。

通常のスタート画面には、「はじめる」「説明をみる」のボタンがあるだけです。

ゲームを進めていって、10000点以上のスコアでゲームオーバーとします（だいたいステージ5から6以上です）。

そして、再度ゲームのトップ画面に戻ると、はじめるのボタンの下に、「ファミリーモード」というボーナスステージへの入り口が表示されています（ ゲームの得点が10000点未満でおわったときは表示されていません）。

このボーナスステージのボタンからゲームをはじめますと、なんと、バザールファミリーのキャラのみで構成されたゲームとなっています。それぞれのキャラの識別が難しく、難易度があがっています。

バザールでござーる オフィシャルホームページ

http://jpn.nec.com/bazar/

Google ウェブマスターツールのLabsの機能のサイトのパフォーマンスのサポートが終了していたようでした。

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

時期を逃してしまったかもしれませんが、昨日、ウェブマスターツールをみてみましたら、サポートを終了したとのことが明記されていました。

サイトのパフォーマンス サイト パフォーマンスは Webmaster Labs の機能でしたが、現在はサポートを終了しています。

• ウェブマスター - Google

サイトのパフォーマンス機能を以下のサービスを利用されるよう示されていました。

• Google Analytics (Google アナリティクス) のサイトの速度
• PageSpeed Insights

ネットプリントというサービスを利用して、写真をL判プリントについて。

ネットプリントは、セブンイレブンのマルチコピー機を使ってあらかじめ登録しておいたファイルを予約番号で呼び出してプリントできるといったサーヴィスです。

文書などのプリントのほかにも、L判（版）のプリントもサーポートされていますので、撮影した写真でL判プリントでいいものは最近はこのネットプリントを使って印刷するようにしています。

個人的に便利だと感じている点は以下です（他サーヴィスで何とでもなるものもあります）。

• メディアの抜き差しの作業がない
• プリントに必要なものだけを登録するので、メディアからプリントするファイルを探す作業がない
• 注文して発送待ちしなくてよい
• 自分の加工したものでプリントできる

以下は自分がよくおこなっている手順です。

ファイル加工について

まずはプリントした画像をフォトエディタなどで加工しておきます（登録したファイルをサーヴィス上で加工することが出来ないため）。

画面の向きが縦のものは横に回転させておいたほうがいいように思います。16:9 のような比率の写真はトリミングとか必要かと。

上の例ではドキュメントのサイズを、L判にあわせているものです。これは特にこだわらなくても構いません。

ただし、ネットプリントでのL判のプリントは端の数ミリがカットされる、といった仕様になっています

• ネットプリント : 登録できるファイルについて (操作ガイド https://www.printing.ne.jp/help/0200_kojinfolder.htm)

• 仕様・注意制限事項：ネットプリント

加工済のファイルは別名保存してコンピューター側におきます。

Continue reading

Twitterのツイートをサイトに埋め込みするときの埋め込み用HTMLコード内のwidget.js は1回のみ読み込んであればいいようです。

まあ知っている人には分かりきった話ではあるのですが、わざわざ検証しました、ということでサンプルページを作ってみました。

＊ 検証のためだけで人様のツイートを使うのもあれなので、自分の面白くもなんともないツイートになってます。widget.jsを置く箇所は、通常、ツイート（blockquote.twitter-tweet）の一番最後におきます。

• 複数ツイートのサイト埋め込みのテストページ

ReadableはFirefox でSafari のリーダー機能を実現するアドオンです。

普段、FirefoxやSafari とかなんとかを同時に起動していることがほとんどです。

リーダーで見たいようなウェブページは都度Safariのほうでみるなどやっているのですが、FirefoxからSarari へとページを移動させること自体が手間とか、Safari からみても「リーダー」にページが対応してなかった、なんていうケースもあったりするのです。

それならば、Firefox 側からでも同様な機能があればいい、ということでアドオンを探して入れてみました。----というのが事の経緯であります。

• Readable :: Add-ons for Firefox (addons.mozilla.org/ja)

同じような機能のアドオンが幾らかあったりしますが、スクリーンショットのインプレッションだけで選んでしまいました。

インターフェースは、Safari には及ばないようなのですが、それでもシンプルに使えるので、一応の目的は達成できているかな、という感想です。

このブログのトップページをみると以下のようになっています。

不運（？）にして、表示に対応できないようなページがあった場合は、文字を選択してその箇所をリーダー表示できる機能を持っています。

Yahoo!Pipesを利用して、はてなフォトライフのフィールドからバッジ作成までをやってみました

用意するもの

• Yahoo! Pipesアカウント（米国Yahoo!アカウント）
• はてなフォトライフのアカウントとフィードURL

手順

フォトライフからRSSを得ます。ページのヘッダ部分に小さなRSSアイコンがあるのでそのURLがフォトライフのRSSのアドレスとなります

Pipesに入って、Create a pipe

以下ほんの一例です。任意で必要なエレメント等を追加します。

Fetch Feed をドラッグしてfotolifeのRSSをいれる

Create RSS をドラッグ。以下を設定して、Fetch Feed に結合する

• Title item.title
• Description item.title
• Link item.link
• PubDate item.pubDate
• Author item.author
• GUID item.pubDate
• media:content そのまま
• media:thumbnail　そのまま

Rename モジュールをドラッグ

以下のようなマッピングをおこない、Create RSSモジュールに結合してPipe Output

• item.hatena:imageurlmedium Rename media:thumbnail.url
• iitem.hatena:imageurl Rename media:content.url

hatena:imageurlmedium はより小さいサムネイルが必要な場合は、

• hatena:imageurlsmall

を指定できる。

作成したPipeのキャプチャです

Pipes Output を実行して以下の要素を調べ問題がないようならば、Saveします

media:thumbnail

• url ここがフォトライフのサムネイル画像のリンクになっているか

media:content

• url　ここがフォトライフ画像のURLになっているか
• link 　フォトライフのページリンク（ 例 http://f.hatena.ne.jp/{USER}/12345678901234）

完成したら、View Resultsで確かめ、Get as a Badge より必要なコードを取得して任意の箇所にはりつけをします。

今回作成したものは以下にあります。

• Pipes: New in Foto Life
• テスト：Fotolife バッヂ

タイトルのとおり、iPod touch内の画像をはてなフォトライフにアップするやりかたです

他にもうまい方法とかあるような気はするのですが、メールから送信する方法が手っ取り早いとおもうので、試しにやってみることにしました。

1. 投稿メールアドレスを取得しておく

まずは、メール投稿のためのメールアドレスを得る事から始めます。

これは、はてなにログインした状態で自分のフォトライフのページにいき、上部のメニューの「設定」のページを開きます。（f.hatena.ne.jp/{USER}/config）

「メール投稿アドレス」という、項目にメールアドレス（XXXXXXXXXX@f.hatena.ne.jp）があるのでそれをコピーするとか、QRコードリーダーアプリケーションを使うとか、メモをとるなどします。

コピーの場合は母艦のコンピュータ上でコピーしただけではダメでtouch内で使える状態までもっていく必要があります（自分はtouchのSafariでフォトライフを開いてコピーしました）。

ここで、「メール投稿アドレス」を「連絡先」に登録しておけば次にメール経由のアップのときに送信先の入力が楽になります。

2. カメラロールからメールを使って画像を送信する

カメラロールで画像選択しておきます。

左下の共有のアイコンをタップ。

＊iOSのヴァージョンによって項目が異なりますが、メールで送信を選択

宛先にメール投稿用アドレスを指定して送信します。

送信が完了したら、はてなフォトライフの「マイフォト」で確認します。

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

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

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

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

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

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

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

• Yahoo! MyBlogLog discontinuation details. | Yahoo Help

Yahoo! Pulse

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

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

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

• Chrome Frame: Developer Guide - The Chromium Projects

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

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

カテゴリ一覧のページに新はてなブックマークボタンを仕込んでおきました。

• 使いやすくなりました! はてなブックマークボタン

上のページでフォーム内でリンクを入力すると、なんか新しいはてなブックマークボタン作成のコードが作成されるらしいです。

あ、というか本題とはあまり関係ないですね。とかいってそのまま続けますが、このようなブックマークレットをブラウザに登録して使っています（←使っているといっている割にはブログ記事で活用してません）。

javascript:(function(){
var%20h='http://b.hatena.ne.jp/guide/bbutton?url=';
var%20u=encodeURIComponent(location.href)+'&title=';
var%20t=encodeURIComponent(document.title);
window.location.href=h+u+t;
})();

新はてなブックマークボタンのMovable Typeでのつけ方（というよりはコードのvalid指南？）は、小粋空間さんのページにまとめられているので参考になると思います。

• 新しいはてなブックマークボタンを(X)HTML validにする方法: 小粋空間

簡単に要点だけ拾っていくと（勝手に当方で解釈して付け足してる部分があります）以下のようです（「動く」という表現はスクリプトだかが動作するという意味です。いちおう）。

• 属性のdata-*はつけてなくても動く
• data-hatena-bookmark-layoutがないとブックマークボタンのスタイルがスタンダード（ブックマークボタン「B!」とブックマーク数の表示、通常サイズ）になる
• data-hatena-bookmark-titleがなくてもタイトルを自動で読んでくれる（たいていdocument.titleぽいですが、登録済みのエントリはそのブックマークエントリのタイトルなのか？？）
• async属性を外しても動く
• 複数のはてなブックマークボタン設置でもbookmark_button.jsは一回だけロードしておけばよい
• a要素のhref、ブクマエントリのページのリンク(http://b.hatena.ne.jp/entry/)＋MTEntryPermalink

どうでもいいことですが、ワタくシの場合はcreateElement()でスクリプト読み込むようにしてますです。アーカイブリストページにボタンを使う理由は――ええと、何だっけ。以上です

Delicious謹製のブックマークレットを自分で使うとき用に少しカスタマイズしましたのでそのメモです

実のところ、Deliciousが提供するFirefoxアドオンのほうが便利なのでブックマークレットのほうはあまり使う用事がないのですけれども、utm_*といったトラッキングパラメータのあるページに出くわしたときにカスタマイズしたブックマークレットを使うようにしています。

以下はカスタマイズのメモですが、自分がわかればいい程度に省略して記しておきます（そもそも需要なさそうですから）。あとDeliciousが登録の仕様を変えたりしたときに不定期にブックマークレットもヴァージョンがあがったりするようなので、その都度修正していくつもり。

まずはBookmarkletについてのDeliciousアカウントによるツイートです。Show tags panelというところをオープンすると、Tag BundlesなどがでてTag一覧などを利用できるといったものです（たぶん）。この経緯にはDeliciousが登録の仕組を更新したとかいうのがあるのですが、ここで説明する程のものでないので省きます。

• Twitter / Delicious: Want to see your tags when ...

ブックマークレットの入手

Delicious謹製のブックマークレットは以下のページにあります。先に述べましたとおり、ヴァージョンが不定期にあがっていたりするのでたまにチェックしてみるといいかとおもいます。

• Install Bookmarklets on Delicious

v6のブックマークレットのカスタマイズ

Firefox 3.6.x で使うものとしてのカスタマイズとなってます。先の入手先からブックマークレットのリンク（2. Drag this link: Bookmark on Delicious up to your Bookmarks Toolbar）の内容をテキストエディタに貼付けておきます。

f='http://www.delicious.com/save?url=の前に

var r=new RegExp('[\?\&]utm_.+=.*','ig');

url='+encodeURIComponent(window.location.href)を

url='+encodeURIComponent(window.location.href.replace(r,''))に変更。

if(!window.open(f+__略__) を

if(!window.open(f+'noui=1&jump=doclose','deliciousuiv6','_blank')

encodeURIComponent(''+(window.getSelection?__略__:document.selection.createRange().text))は

encodeURIComponent(document.getSelection())

Webでギターコードの閲覧できるサイトで自分がみつけたものを集めてみました

ギターのコードというと、歌本やギタースコアなどを買ってきたりしたものなのですが、インターネットから閲覧できるサイトがいくつかあるようです。

適当に自分がみたものをメモ程度にリストにしてみることにしました。簡単なコメントをつけてみましたが、自分がぱっと見した感想とかメモでしかありませんので。あと同じ曲でもサイトごとで微妙に掲載コードに違いがあったりもするようです。

ギターコード掲載サイトのリスト

• 無料歌詞検索（コード譜とダイヤグラムを表示！）－J-Total Music
  • アーティスト名検索、全文検索のフォームあり。コードのリンクをクリックすると別窓でダイヤグラムが表示される。分数コードには対応されてないみたい
• 14,000曲 無料国内最大の歌詞/コード検索サイト｜楽器.me
  • コードのリンククリックで、右側にダイヤグラムが表示される。ローポジション、ハイポジション等の切り替え表示など
• 楽譜が無料！ギター、ピアノ、バンドスコアなど - GLNET+
  • 楽譜表示にJavaScriptが必要 / XOOPSで運用されてるらしい
• tab譜と楽譜とコード譜の無料掲載サイト！G-Tab!
  • XGAだと表示で少し厳しいかも
• 【Chord Master】最強ギターコード譜・歌詞サイト アコギ用J-POP楽譜がたくさん！
  • キー変調機能など。表示や機能の利用にポイント購入が必要

追加分

• Guitar Chords
  • transeposer(移調)機能もついている。
• Guitar Tabs With Rhythm | Songsterr
  • プレイヤーつき。有料プランで全ての機能を利用できる。iOS/Android アプリあり。

• 無料ギターコード譜&歌詞検索 押さえ方も分かる！ Ｕ-フレット
  • 自分ではほとんど使っていないのですが、ダイアグラムがコードと一緒に記されているので、押さえるコードを覚えていないひとには便利かと思います。

• Learn Classic Rock Songs On The Acoustic Guitar From America to ZZ Top!
  • PDF版（free）のコード掲載がある

宣伝：ギターコード掲載サイトの新着アンテナをはてな大チェッカーにて作成しました。

• ギターコードのタイムライン - 大チェッカー

Twitterを使っていてメッセージのリンクがクリックしにくい状況になっていたので対応してみました

画面キャプチャで示しながらみていきたいとおもいます。

左端のほうにポインターをあわせていきますとリンクのポインターにかわります。

しかし、これをテキストの中央あたりにもっていきましたところクリックできません。

Firebugをつかって該当する要素を確かめてみます。

active-links というクラスのついたブロックが「メッセージ」のリンクにかかっていることがわかります。

以下のコードをFirefoxアドオン、Stylishに追加してみました。

• .active-links{ width : auto !important; }

ちなみに閲覧環境はXGAでブラウザはFirefox。ウィンドウを最大化した状態です。以上です。

iGoogleやブログのガジェットとして利用できる、ピンポイント天気予報のガジェットについてのメモと簡単な紹介です。

ご注意：iGoogle 及びピンポイント天気予報はサービスとして提供されていません。

梅雨の期間で天気も気になるところですし、便利なガジェットということでメモしておきます。登場したのが３年くらい前のものですがまあいいとしましょう。

What's "Pinpoint Weather Japan"?

Pinpoint Weather Japan(ピンポイント天気予報グーグルガジェット)は、tmyymmt氏により提供されている、地域ごとの天気予報の情報を表示するガジェットです。iGoogleに追加したり、ウェブページ内に設置したりすることができます。

• <http://tmyymmt.vox.com/library/post/google-gadget---%E3%83%94%E3%83%B3%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E5%A4%A9%E6%B0%97%E4%BA%88%E5%A0%B1.html>　Google Gadget - ピンポイント天気予報 - Vox

Get the Gadget

iGoogleへは、以下のページから追加することができます。

• Pinpoint Weather Japan

関連情報

• <http://tmyymmt.vox.com/library/posts/tags/%E3%83%94%E3%83%B3%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E5%A4%A9%E6%B0%97%E4%BA%88%E5%A0%B1%E3%82%B0%E3%83%BC%E3%82%B0%E3%83%AB%E3%82%AC%E3%82%B8%E3%82%A7%E3%83%83%E3%83%88/>「ピンポイント天気予報グーグルガジェット」タグの記事：- tmyymmtさんのVoxブログ
• ピンポイント天気予報 Google Gadget

• Google Gadget - ピンポイント天気予報 - tmyymmt's blog

このブログや他のブログサーヴィスおよびその他サーヴィスとの関係を図にあらわしてみました。

とかいっても、エクセルでオートシェイプを使っただけという粗末なものですが。図があれなので本人でないとわかりにくいかも知れません。赤色の形の異なる矢印で、クロスポスト等による投稿の流れを示してみました。

因みにですが、FOAFのファイル（foaf.rdf）をW3C RDF Validation ServiceのGraphで表示させたものが元ネタです。

Google Analyticsより、閲覧ブラウザとよくアクセスのある記事をまとめてみました。

今年ものこり1箇月を切っています。そこで（恒例なのか）、まとめ的な記事をやってみたいと思います。

閲覧ブラウザと記事のクエリは、以前書いた下記の記事をもとにおこなっています。

• メモ：Analyticsで利用ブラウザから閲覧ページを辿る

期間は、2009年1月1日から、2009年12月4日までです。カレンダーとしてはまだ少し日にちがありますけれども、上位はそれほど変化しないものと見なしました。

閲覧ブラウザとよく読まれている記事

2009/01/01から2009/12/04まででよく読まれている記事のタイトルで各上位７エントリです。

Safari

1. インデックス系ページでjQuery Accordion
2. 普段使ってるフライパンで作るだし巻きたまご
3. iPhone風のTwitterブログパーツ。
4. Lightbox2から、jQuery Lightbox Plugin (balupton edition)への移行メモ
5. maRkのMyOwn
6. 最近見かけなくなった屋外のFMアンテナ
7. MTカスタマイズ Archive

Internet Explorer

1. 最近見かけなくなった屋外のFMアンテナ
2. 普段使ってるフライパンで作るだし巻きたまご
3. 差分比較ソフト(DF)で、編集用エディタをTeraPadに
4. 紙で折る「ごみ箱」の最初の折る工程を省略する折りかた
5. 背景用ストライプ画像４種
6. インデックス系ページでjQuery Accordion
7. メモ：HTMLのコメントのつけかたなど

chrome

1. ウェブページで特定のフォルダのトップページを作成してみる
2. インデックス系ページでjQuery Accordion
3. 普段使ってるフライパンで作るだし巻きたまご
4. iPhone風のTwitterブログパーツ。
5. Lightbox2から、jQuery Lightbox Plugin (balupton edition)への移行メモ
6. 差分比較ソフト(DF)で、編集用エディタをTeraPadに
7. 最近見かけなくなった屋外のFMアンテナ

Opera

1. 普段使ってるフライパンで作るだし巻きたまご
2. インデックス系ページでjQuery Accordion
3. 最近見かけなくなった屋外のFMアンテナ
4. iPhone風のTwitterブログパーツ。
5. 差分比較ソフト(DF)で、編集用エディタをTeraPadに
6. maRkのMyOwn
7. メモ：HTMLのコメントのつけかたなど

Firefox

1. maRkのMyOwn
2. Firefoxアドオン、翻訳パネルのバージョンアップ
3. インデックス系ページでjQuery Accordion
4. Firefoxアドオン、ステータスバーの整理にOrganize Status Bar
5. Lightbox2から、jQuery Lightbox Plugin (balupton edition)への移行メモ
6. 差分比較ソフト(DF)で、編集用エディタをTeraPadに
7. MovableTypeのカスタムフィールドで特定キーワードを含む記事をリストアップするテンプレート

XMLファイルはこちら

参考までに、全体でよくアクセスのあるエントリタイトルは以下のようになっています。

• maRkのMyOwn
• インデックス系ページでjQuery Accordion
• 普段使ってるフライパンで作るだし巻きたまご
• Firefoxアドオン、翻訳パネルのバージョンアップ
• 差分比較ソフト(DF)で、編集用エディタをTeraPadに
• 最近見かけなくなった屋外のFMアンテナ
• Lightbox2から、jQuery Lightbox Plugin (balupton edition)への移行メモ

Firefoxがアドオン系の記事が目立つくらいですかね。Fifefox以外のブラウザについてあまり言及してないですし、アクセスの多い記事はどのブラウザでも多いかなといった結果でした。おしまい。

FC2ブログにTypePad Connectを導入してみました。設置は簡単のようです。

ずいぶんと放置していた、http://marksanblog.blog119.fc2.com/ PetBasket (現在運用していません)ですが、ひさびさのカスタマイズということでコメントフォームにTypePad Connectを導入してみました。

設置に関して特にこれといって問題は無いように思います。TypeKeyのアカウントが既にあるかたはそのままTypePad Connectにログインすればいいですし。

設置は指示どおりにおこなえばそれ程むずかしいものでありませんでした。いつもの如く説明が長くなるので、以下のページでメモとしてまとめておきました（説明はVicunaテンプレートの例となっています）。

• FC2ブログにTypePad Connect設置したときのメモ

ブログ記事の書き出し部分で挨拶文や近況報告などの前フリと呼ばれるものについてのおはなし

linker journalのcremaさんによるエントリから。

• ブログ記事の「前ふり」を書くのをやめます。｜linker journal｜linker

なんか横やりなのであまり長くならないよう簡潔に考えを述べておくとします。あ、自分がコレをやっていないのは、頭が固いからとか、気のきいたコメントをできないヒトだからとか、それと、横の繋がりがあまりないですから。そういう理由にしておきます。

記事の冒頭で「こんにちは」とかいれるやつですね。結論的には、entryexcerpt（記事概要を入れるフィールドの値が反映される）を活用しましょう、という流れのようです。

記事のコメント欄より、私の個性を出せる部分とコメントされているようですし、ワタくシが前フリがあっていいとおもうのはその「個性」についてのことです。

コレは御茶の間の意見でしかないですけども、記事で個性が全面に出ていたほうが読者をひきつけるものがあるし、それは、複数人で構成されるブログではプラスな要素であるとおもうからです。

んーと、それとあと、（前フリのようなものを）後方にもってくるみたいな話もでてますが、その系統は関連記事リストだとか広告などと同列の扱いで見てしまいますね。気が向いたら見るかな（読むのでなくて）という。

そういえば、『パシャログ。』さんあたりは前フリがいい味だしてるように感じます。

• バシャログ。 | 横浜・馬車道で働くWEB制作スタッフのブログ。

使用している、ウイルスバスターをウイルスバスター2010にヴァージョンアップしてみました。

まあ月並みなのですが、ウイルス対策ソフトの更新手続きを終え、その年内にヴァージョンのサポート期限が切れるというのはよく経験しております。

つかっていたウイルスバスター2008のサポート期限が2009年12月31日をもって終了とのことなので（参考ページ）、無料のヴァージョンアップを利用することにしました。

指定されているページからダウンロードして手順に従うのみで、ワタくシの環境では特に問題はありませんでした。

あと、ブラウザにTrend Micro Toolbarのアドオンがインストールされるようです。IEとFirefoxをつかってますんでどちらもこのツールバーが入っています。

この件で情報をいくつかあたってみたのですが、どうもツールバー単体でのアンインストールはできないようでして、ウイルスバスター2010をアンインストールする必要があるとのことです。

ちょっとそのツールバーが主張し過ぎかなという感じがしましたので、とりあえずツールバーのアドオンは無効にしておきました。

livedoor Readerで記事の閲覧をしたとき、見出し要素が削除されることによる見え方などについて

まずは、melondogさんのTwitter発言から。

livedoor Readerって<h3>--<h3><h4>--<h4>って感じに連なると改行されないのか。h要素が削られるから。

Twitter status 4578239049 - Stoyoda (melondog)

これはこういうことではないでしょうか。

<h2>見出しA</h2>
        <h3>見出しA-1</h3>
          <p>A-1の内容</p>

記事本文中にある、hn要素がlivedoor Readerで見るとhn要素はリムーブされて以下のようになるかと思います。

見出しA　見出しA-1
          <p>A-1の内容</p>

この例だと、見出しAと見出しA-1はブロック要素でないためにつながって見えます。見出しとしてつけていたのにみにくいよと。また、見出しA-1以下のテキストにはPがついていますので、その箇所で改行されるというかんじです。

この件については、まえからわかっていたのですが、フィードのデータの扱いはRSSリーダーの作り手側でどうにでもなるでしょうから（どのタグは許可するかとか）、配信する側が個個のリーダーの仕様につきあっていられない、したがって放っておくのがよいというのがこの件についてのワタくシの見解なのです。

ハイ、それでおしまい。というのもなんですので、それでもどうにかするためのひとつの案があります。

それは、hn要素の直下にhnを置くのでなくて、段落をはさんでおくというだけです。

前に自分で無意識でやっていたかとおもうのですが、このような場合は自分のところの記事で例を示すより、他のかたのページで確認されたほうが説得力があるかとおもいますので、ページを提示してみます。

SixApartさんのフィードについての記事を参照してみてください。

• フィードとは？ - Six Apart

このページの実際にフィードを利用するには？のセクションに注目してみてください。見出し要素の直下に、説明の文があるかとおもいます。

つまり、先のサンプルで示した書き方はこのようにすれば、少しはマシになるでしょう。

<h2>見出しA</h2>
        <p>見出しAについてのテキスト</p>
        <h3>見出しA-1</h3>
          <p>A-1の内容</p>

こうすることでlivedoor Readerだけに特化させてなんらかの対応をとることもないですし、そのセクションの説明もあれば読み手にもわかりやすいのでないかなと考えます。

まあ、最近はそういうこともあって、記事内にやたらとセクション設けたりしなくなってきたんですけどね。

Google Analyticsで利用ブラウザの情報からどのページを閲覧されているかを たどるためのカスタムレポート設定について

Google Analyticsでは様ざまなアクセス解析と統計がとれるわけですが、 通常、左ペインのレポートの「ユーザー」でPC環境のブラウザから、どのページを閲覧されているかを辿ることができません。

[PC環境]＞[ブラウザ]として次の階層でブラウザのヴァージョンまでがこのレポートの終点となっています（ディメンションによる各レポートを確認できないもよう）。

そこで、カスタムレポート（BETA)を利用して、先の条件にあったレポートを作ることにしました

以降、メモとして設定方法を書いていきますが、将来的にGoogle Analyticsの仕様というか動作が変わってくることがありますので、その点は注意願います。

左ペインより「カスタムレポート」をクリックしてカスタムレポートを新規作成します

そのままですと、タイトルには、「カスタム タイトル 2009年9月21日」のように書かれています。このタイトルは、編集のリンクを押せば変更可能になります。

「指標」は設定が必須ですので、ここではとりあえず、「コンテンツ」の「ページ別セッション」にしておきます。左ペインのリストでコンテンツのところの「ページ別セッション」をドラッグして、メインカラムの指標のところにドロップすればいいわけです。

「指標」の次の階層の「ディメンション」には、始点とするレポートをいれます。ここには、「ユーザー」のリスト内の「システム」配下にある、「ブラウザ」をドラッグしてドロップします。

次の階層になる、「サブディメンション」のところが目的のレポートが入ります。従いましてここには、「コンテンツ」の「ページタイトル」を左ペインの「ディメンション」のリスト内からドラッグアンドドロップすればいいことになります。

あと、サブディメンションとして下位に階層が並びますがここはお好みのものをということで、レポートをプレビューで確認してみます。（別ウィンドウ）

確認して問題ないようならば、レポートを「作成ボタン」押下で設定を終わります。

以上のレポートを階層で示すと以下のようになります。

• 指標　ページ別セッション
  • ディメンション　ブラウザ
    • ブラウザ以下の階層　ページタイトル
      • ページタイトル以下の階層　・・・
        • ・・・以下の階層 ......

1. 左メニュー、カスタムレポートより作成済みのレポートをクリックし表示させます
2. 上部のエクスポートなどのメニューの項目中の「マイレポートに登録」というボタンを押します
3. 以上で作成したカスタムレポートが左メニューのマイレポートに表示されます

本記事は、旧ヴァージョンのAnalyticsでの機能をもとに作成したものです。参考までに、新ヴァージョンでのカスタムレポートについて公式ブログに記事があがっています。

• アナリティクス 日本版 公式ブログ: 新しい Google アナリティクスのご紹介：カスタムレポートをもっと

Movable Typeのプラグイン、PubSubHubbubの紹介と導入について書きます。

「PubSubHubbub」って何？といわれてもよくわかってなかったりしますが、RSSの更新情報の反映をRSSリーダーなどでの時差を解消しようとするものです。

説明不足でアレなので、PubSubHubbubについては、以下のページを参考リンクとして示します。

• ライブドア、ブログとRSSリーダー時差解消にPubSubHubbub対応 -INTERNET Watch（internet.watch.impress.co.jp）
• http://labs.unoh.net/2009/08/what-is-pubsubhubbub.html">ウノウラボ Unoh Labs: PubSubHubbubとは（labs.unoh.net）(注：リンク先ページ不明)

PubSubHubbubプラグイン

PubSubHubbubプラグインは、miyagawa（Tatsuhiko Miyagawa）氏の提供するMovable Type用プラグインです。Movable Type4以降で利用可能のようです。プラグインの入手は以下からダウンロードすることができます。

• miyagawa's MT-PubSubHubbub at master - GitHub

導入について

ダウンロードしたファイルを解凍し、フォルダごとMTシステムのディレクトリのpluginsディレクトリ内にアップロードします。アップロード後に、プラグインの設定画面にて設定をおこないます。なおプラグインはブログ単位で設定をおこなうようになっています。

以下のキャプチャはMT5.0ベータ1によるものです。

設定画面にて、pingを打つ先のURLを入力して、設定を完了します。今のところ、「http://pubsubhubbub.appspot.com/」が利用可能のようです。

設定が済んだら、「最新記事のフィード（feed_recent）」(atom.xml)テンプレートの<link rel="self" ... />以下に<$mt:PubSubHubbubLinks$>を埋め込み、保存・再構築をおこないます。

再構築後のフィードのソースを見ると、<link rel="hub" href="..." />というコードが追加されています。 W3C Feed Validation Service で確認すると、Recommendationsとして、「Unregistered link relationship」が指摘されるのですが、御愛嬌ということで。

あとは、記事を更新するのみです。以上です。

Continue reading

はてなブックマークのカスタムデザイン機能より。自分がカスタマイズしたカレンダーの部分のみ抜粋して控えとしておいておきます。

因みに以前カスタマイズしたCSS等の控えはこちら。

• はてブ：カスタムデザイン控（２００９年２月２日）

だいたいんこんなもんです。地味ですけど。

/* Calendar */
#user-sidebar-calendar table{ color:#000; }
#user-sidebar-calendar table td{
           border-top : 1px #FFFFFF solid;
           border-right:1px #E0E0E0 solid;
           border-bottom:1px #E9E9E9 solid;
           border-left  : 1px #FFFFFF solid;}
#user-sidebar-calendar table a {
           padding:0!important;
           margin:0!important;
           display:block; }
#user-sidebar-calendar table a:link {
           text-decoration: underline!important;
           color:#000!important; }
#user-sidebar-calendar table a:hover {
           color:#FFF!important;
           background:#000 !important; }
#user-sidebar-calendar table{background: #f1f1f1; }

はてな側が要素など構成を変えられるとあわなくなるとは思います。暫定的なものです。

はてなスターの位置を固定表示にするユーザースタイルシートを書いてみました。

引用スターとかいうのをやっていて、引用箇所がページ下部とかで、スクロールする必要のあるとき、ふと思いついたというもの。選択箇所を確認しながらスターをというやつですな。必要あるのかどうか微妙ですけど。

以下のようなスタイルシートですが、Firefoxのユーザースタイルシートで個人的使用のものです。ページに埋め込まれますと、たぶん、何かの嫌がらせに。。

h3 .hatena-star-star-container {
    z-index: 9999;
   -moz-opacity:.7;
    padding-left:3px;
    border-right:1px solid #ddd;
    border-left:5px solid pink;
    position:fixed;
    top:100px;
    left:0;
    width:3em;
    max-height:15em;
    overflow:auto; }
h3 .hatena-star-star-container a {
    display:block; }
h3 .hatena-star-inner-count{
    margin:1em!important; }

追記部分等にあたる、id=moreに対し、ユーザースタイルシートで枠線で囲むスタイルを指定して各サイトを閲覧してきました。その結果からわかったことなどをまとめてみます。

前から追記部分に対してスタイルを指定する試みをしていて、「(総集編：2008)使っているStylishユーザスタイルまとめ」にて紹介していました。そのユーザースタイルシートを再掲しておきます。

#more,
#extended
         {
  background-image:none !important;
  border:1px dotted blue !important;
  padding: 3px !important;
}

ブログで記事の『追記』にあたる、idのmoreがどのような箇所で適用されているのか、というのを巡回していたページのなかからまとめておきます。

個人の巡回範囲なので、あまりアテにはならないとは思います。どこのサイトがどのように指定されているといった情報を閲覧のたびに記録していたというわけでもありません。

なお、「追記部分」という記述については、moreといったidが指定されたブロックを指すものとします。Movable Type 4では「続き」というタブのエリアに書かれた情報のことを言ってると思ってください。

more等が指定されているエリアのパターンについて

1. 書き出しがあり、追記部分はその記事の本文となっている
2. 追記部分は、あとから追加したテキストとなっている
3. 「追記」の文字を明記しておいてその段落にidを指定している
4. 追記は書かれていなくて、追記部分の要素は空となっている
5. 追記ではなく、文書の補足情報･ナヴィゲーションの箇所に指定している

1. はよく使われているパターンです。詳しい事情はわかりませんが、アーカイヴ一覧ページなどで、コンパクトに記事を束ねることができるというのが主な目的なようです（と思われます）。記事先頭部に記事をイメージした画像を使われているのもよく見かけます。

2. ですが、文書を書いてあとから追記したものを、moreの箇所に書かれているというケースです。

3. は1. と似ているのですが、続きの位置ここからである、ということが明示されているパターンです。hr要素にidを指定されているものもありました。

• <p id="more">続きの文章</p>

4. は、テンプレートタグの処理的な問題によるもの、といったところでしょうか。適用したユーザースタイルシートでの見え方としては、「青の点線に空白が囲まれているだけ」となります。

例えばMovable Typeですと、追記をあらわすのに、MTEntryMoreというタグがありますが、<mt:if tag="EntryMore"></mt:if>のように、内容の有無で出力の振り分けがなされずに出力されているものと思われます。MTではなく、ブログサーヴィス等でもこのようなページを確認しています。

5. はカテゴリのリンクや、ナヴィゲーションといった情報群のブロックをid=moreとして指定されているというものです。

はてなブックマークでエントリーページのURIが変更とのこと。既に張られていた旧URI からは全てリダイレクトされるようです。

URI変更については、はてなブックマーク日記の記事を参照します。

• エントリーページの URL 変更について - はてなブックマーク日記

「http://」がURIに含まれない形になるということと、rel="canonical"により正規化されたURIを指定、また既存のURIについては永続的にリダイレクトをおこなうようであります。

ということから、Movable Typeでの「↑B」ボタン設置のリンクについてはこれまでどおりで問題はなさそうです。

で、もしこの変更にあわせた形とするのですと、以下のような感じになるかと。テスト用の簡素なものですから運用レヴェルのものではないです。

<ul>
<mt:Entries lastn="5">
<li><MTEntryTitle>
<a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink regex_replace="/http:///",""$>" rel="nofollow">
<img src="←「↑B」画像までのパス→" width="16" height="12" alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" />
</a>
</li>
</mt:Entries>
</ul>

例のごとく（？）でregex_replaceによる置換です。スラッシュが続いてヘンテコな感じですが期待どおり（何？）な結果がでます。いちおう、nofollowつきで。

んー、あまりスッキリしないですね。リダイレクトしてくれるというのですから、こちらがわざわざ合わせる必要もないのですけれども。

追記：2013/02/24 http スキームを取り除くグローバルモディファイアをつくりました。

以下のようにつかいます

 <a href="http://b.hatena.ne.jp/entry/<$mt:EntryPermalink RemovehttpScheme="1"$>">

• markdiarycom / mt-plugin-RemovehttpScheme -- Bitbucket

このブログでプラグインによってページ分割されたページのパラメタが付いているページについて、NOINEXとしたその後の状況についてです。

先月エントリしました、「今月のいらんことしい(2009年6月)」にて触れていました、「カテゴリアーカイブでパラメタ（page=）の付くページはNOINDEXとしてみた」についてですが、その後の経過をみてみました。

確認の方法ですが、Google Analyticsにて、先月（自2009年6月1日,至2009年6月30日）の範囲で「閲覧開始ページ」の情報から、「page=」が含まれるページというフィルタをかけることで確認をおこなっています。

Analyticsのグラフでみたところでは、パラメタによってメタタグ挿入の振り分けを実施したあとから、「page=」の付いているページの数値が減少していることが、ぱっと見ただけで確認できました。

と、言葉だけで示してもピンとこないので、いちおう参考としてグラフを作ってみました。

先述したフィルタ済みの結果をエクスポートして、Excelにて取り込み、「日付」とパラメタ付きページの「閲覧開始数」のデータを基としたグラフです。

補足およびコメント

ExcelへはAnalyticsから、エクスポートの機能で「CSV形式（Excel）」を選び、出力されたファイルからデータはそのままでグラフ作成をおこないました。

考えついた当初は、パラメタのないページは検索結果にインデックスしておき、パラメタ付きのページをインデックスさせないことでタイトルが同じで内容の異なるものがインデックスされないようにするということを目的としていました。

重複するコンテンツの対処としては、rel="canonical"というのがあるのですが、アーカイブページについては目的が異なるような気がしましたために使わないでいます。

全体のアクセスからみていきますと、アーカイブページから（当サイトに）入るケースは減少傾向となりましたが、個別ページはアクセス数はそれなりにあるようでして、全体としては、極端な変化がみられないという感じでした。

microformatsのrel="tag"の記述について、nofollowも指定したいときの書き方とかのメモです。

先日、WolaWolaさまのページをブックマークしたときにつけたコメントの内容に関しまして（はてなブックマーク - Recent（最近の）言わんといて！ - WolaWola）、元記事に追記がありまして、コメントの内容について,自分で言っておきながらなんですが、妥当かどうか自信がないのでといいますか、突っ込みいれた責任上、メモとしてエントリしておきます。

指摘箇所ですが、タグのリンクについているrel属性のところでrel="nofollow,noindex,TAG"というのを、rel="nofollow tag"にせよ、とそういうことです。いいたかったことを二点にわけますと、一点目が「attributeの値に複数書くときの方法についてとmicrofomatsの件で」と、二点目が「noindexはどうなの？」となります。

rel属性の値に複数指定するとき

これは、以前調べた記憶があって、rel="nofollow"をrel="tag"につけたいときどうしたらいいのよ、ということで調べていたら海外のサイトだったかでスペース区切りにされていたようなので自分のところはそのように書いたと、そう記憶してます。

複数書く（＊Link types）場合の方法ですが、確か仕様書だったかにあるという発言をされていたかたをTwitterかWassr経由で知ったのですが、そのソースも忘れてしまったので、自分で検索してあたってみたのが以下のページになります。

• Links in HTML documents（Attribute definitions）

上記ページにThe value of this attribute is a space-separated list of link types.とありますので、Link Typeをスペースで区切ることになっているようです。

あと、microformatsのrel-tagについては以下を

• rel="tag" · Microformats Wiki

「TAG」という記述に関してですが、「microformatsに従うならば」、という文言をたぶんブックマークコメントにつけておけばよかったのかなと。この点は説明足らずで申し訳ないと思ってます。

Firefoxのアドオン、Operatorによりますれば、大文字でTAGと書いて仕舞うとタグ空間として抽出されないようです。自分のところで、Firebugを使ってtagとあるのをTAGに書き換えたところ、そのタグでは、Operatorで抽出できませんでした。ですが、Operatorはmicrofomatsの仕様ドラフトに忠実なために厳密な部分があります。そのため「microformatsに従う」という但し書がブクマコメントには必要であったということです。

noindexのことと、タグアーカイブページの検索エンジン対策について

nofollowは検索エンジン向けの記述でありますが（此の件はコチラが説明するよりは他のページの解説とかGoogleのウェブマスター向けのヘルプページとかをあたったほうが確実と思います。）、noindexはリンクを張っているページから記述されても（rel="noindex"）値を評価されないのでないかと思うのですがどうなのでしょう。

ページにリンクがあるとして、クローラーがそのリンクを辿る行動をするのがfollow。これをやらないで欲しいと伝えるのがnofollowですよね。これはメタ要素に書いていたことですけど、これを簡単に指示できるようにしましょう、としたのが（その経緯とかはここでは割愛）、rel="nofollow"。それで、noindexはインデックスされたくないページに書くと。そのあたりの件でブクマコメントには、noindexを記述しないでおいたのです。今思えば「自分ならばこのように書くかな」、程度なコメントなのかも。

タグアーカイブの検索エンジン対策

ここからは本題と逸れてしまいますが、タグアーカイブページをインデックスされないようにすることのお話です。

こちらで前から対策とかをやってはいるのですが、100パーセントは無理でないかなという感じがします。といいますのも、クローラーの中に行儀のよくないのがいるようなので......。

で、当方がおこなっているのは、robots.txtへの記述と、metaタグでのnoindexとかです。

Movable Type 4.2xのデフォルトのタグクラウドをみますと、javascript:void(0)でonclickイベントにてページ移動をさせています。こう書くことでrel=nofollowを書くまでも無く検索エンジンのクローラーはこのリンクが辿れないというわけです。

ただしこれだと先述のOperatorではInvalidです。rel-tagを採用していて、かつタグアーカイブページ（実態はタグ検索結果ページですが）microformatsに対応したURIにして使っていてこれでは本末転倒といったところ。

この辺の話になってくると、サイト運営者の方針でしょうから、外野があれこれいうこともないのですが、折角microformats取り入れているならば活用できる方法で記述されてはどうかなというのがワタくシの意見だと、つまるところはそういうことでした。

Twitterの背景画像をメイン領域で透かして見えるようにするためのユーザースタイルの例です。

自分はクライアントやモバイル版経由の投稿が主なのユーザースタイルとか適用してもあまり恩恵は得られないわけですが。。ま、なんというか自己満の世界とでもいいましょうか。

コードは以下です。透過は「-moz-opacity」(*１)で。リンクカラーとかを指定してある場合を考慮してないので透過の割合はヒトによって違ってくるかも。マウスオーバー時の背景色は継承させないやりかたがよくわからなくて、濃い目の色に上書きさせることで対処してます。

例によってFirefoxアドオン、Stylish向けのスタイルシートです。（確認環境は、Stylish1.0.1・Mozilla Firefox 3.0.10です）

twitter背景透過

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("twitter.com") {
#content{ -moz-opacity: .8; }
ol.statuses li:hover,
ol.statuses li.hover{
            background:#E3E3E3 none!important; }
}

Stylish向けのユーザースタイルシート。Analyticsでオンマウスの行をハイライトするというものです。

例によってFirefoxアドオン、Stylishで使用するスタイルシートを書いてみました。

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("https://www.google.com/analytics/reporting/") {

tbody[id^=f_tbody] tr:hover td {
font-weight:bold;
background-color:#D8E4F8 !important; }

}

tr要素にhoverというのは、前からあるテクニックらしくて、IEだとうまく動かないらしいですね。

あと、グラフのある場所がうまいこと表示できてなくて、それほど支障がないので保留状態です。

FIrefoxでスポイトやカラーピッカー機能を使えるColorZillaには、「WebPage DOM Color Analyzer」という機能があります。

ColorZillaの機能については、dncl / デンクラ様にてまとめられています。

• dncl : web用素材サイト デンクラ | スポイト機能だけじゃない"ColorZilla" : Firefoxアドオン（cocoa-project.com）

WebPage DOM Color Analyzerをトップページでためしてみました。メニューから、「WebPage DOM Color Analyzer」を選択します。

以下のようにページで使用されているカラーがひとまとめに表示されます。

ColorZilla（colorzilla.com）のPalette Viewerにパーマリンクを生成することができるそうです。（＃やってみたけど長いので......つhttp://tinyurl.com/cu4wp5）

アドオンは以下のページから。

• ColorZilla :: Firefox Add-ons

カテゴリアーカイブページのようにブログの記事が並んでいるページで、記事の先頭の1行目だけが表示になるようにこのブログ用のユーザースタイルシートを書きました。

前にどこかで書いたと思うのですが、このブログでは先頭一行がブログの概要となるようにしています。

アーカイブページやブログトップなどエントリが並んでいるページでは、記事本文（EntryBodyに該当）が表示されていますが、これを概要だけ表示にするために書いたスタイルシートが以下です。使う場面とかは、ちょっと微妙です。 アーカイブページで記事を流し読みしたいようなときとか(？)

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain(markdiary.com) {

body.double div.textBody :not(:first-child) {
display:none !important; }
}

気づいた点などは以下です

• 厳密には先頭の一行目というわけでないような。見た目がそんな感じなので「先頭一行目」という表現にしてます。
• 全てのページを確認したというわけでもないので、もしかしたら挙動の怪しいものがあるかもしれません。
• Firefox3.0.6 ＋ Stylish 0.5.9にて確認しています。
• VicunaテンプレートではtextBodyの部分は共通なので、ウチとこ以外でもできるかも。
• あと記事先頭行に常にテーマ画像のようなものを入れてるサイトだと画像しかでなくて面白くないかも。

CSS3関連で幾つか読み漁ってみました。（←最近はまってるらしい......）

• CSS 3のセレクタ解説：：root、：not、：empty、：target - builder by ZDNet Japan
• CSS セレクタに関するおさらい 3 | WWW WATCH
• CSSセレクタまとめ1 | CSS-EBLOG
• Selectors W3C Working Draft 15 December 2005
• 実践Web Standards Designのススメ：第6回　CSS3のセレクタを使用してみよう｜gihyo.jp ... 技術評論社
• CSS3 の否定疑似クラスの使いどころ - lucky bag

以下はおまけです。ブクマ登録ボタンを消しやすいようにbookmarkButtonというclassつけときました。

/* =========  Omake

div#main{
background: url(http://www.markdiary.com/csstemplate/img/markdiary.png) no-repeat scroll 0 10em !important;}
.reaction,
.bookmarkButton {
display:none !important;}

*/

Firefoxアドオン、Operatorのユーザスクリプトで、hAtomを抽出するものをためしてみたときのメモ。

ユーザスクリプトの入手（hAtom.js）

Operatorのユーザースクリプトについては、以下のページからコードを入手することができます。今回は一覧のなかにある「hAtom.js」というファイルです。

• Operator User Scripts（Mike's Musings）

ファイルを保存して登録する

jsファイルを開いて中身をコピーして、任意のテキストエディタで開き、（拡張子.jsで）保存します。

このファイルは登録後消してもかまわないので保存場所はデスクトップでもいいです。ワタくシは作業ファイルのフォルダにいれてますが。

オプション設定のユーザースクリプトタブのところで新規に先ほど作成しておいた、jsファイルを登録します。

次にオプション設定のところで以下のように、データ形式（hAtom-hEntry,hAtom-hFeed）を追加してあげます。

実際にウェブページを開いて確認してみる

hAtom対応のページをみて動作を調べてみます。

operatorツールバーを表示しているのならば、Atom Entry(s)、Atom Feed(s)というメニューが追加されています。

このブログでは今の時点でhAtom未対応なので、はじめから対応されている、ActionStreamsのページで確認するとします。

hFeedにhAtom to Atom/RSS transcoderへ送る動作をつけてみた

hAtom-EntryにはFirefoxのブックマークに登録する動作がついているのですが、それだけでもアレなので、hAtom transcoder という、hAtomからフィードに変換するツールに、当該ページを送信するという動作を追加してみました。以下のようなコードです。

ちなみに、或るページを変換するには

http://tools.microformatic.com/transcode/<output format（atom|rss）>/hatom/URL

のような形式です。ブックマークレットでできるよ、みたいな話ですがまぁよしとします。

// hAtom to Atom/RSS transcoder
var hatom_to_transcoder = {
  description: "to hAtom transcoder",
  shortDescription: "to hAtom transcoder",
  scope: {
    semantic: {
      "hAtom-hFeed": "hAtom-hFeed",
    }
  },
  doAction: function(semanticObject, semanticObjectType) {
    if (semanticObjectType == "hAtom-hFeed") {
      var url = window._content.document.location.href;
      return "http://tools.microformatic.com/transcode/atom/hatom/" + url;
    }
  }
};

SemanticActions.add("hatom_to_transcoder", hatom_to_transcoder);

実際の動作は以下のようになります

以下はtranscoderにURLを送ったとき生成されたフィードの状態です。

今年（2008年）を振り返る記事をアクセス解析をみながらまとめてみます。恐らくまとまっていないことと思いますが

今年も残すところあとわずか。ということで年間のまとめ記事でも、と思っていてもアイデアが浮かばないので何気にアクセス解析でもながめながら記事を書くことにします。例によって、リッチテキストエディタを利用しなくてマイペースでいきます。

キーワードと探し求めている情報

あらかじめいっておきますと、解析にはGoogle Analyticsにもとづいてます。期間は2007年の12月31日から2008年12月30日にしました。

ざっと注目しているものをピックアップしてみますと

• カスタムフィールド
• Firefox 翻訳
• アーカイブマッピング

あたりが検索キーワードとして多いようです。Firefoxの翻訳のアドオンは需要があるんでしょうかね。Movable Typeのことをテーマとして主にあつかっているためか、ソレ系のキーワードが大半を占めているようです。

閲覧者のPC環境について

このサイトの閲覧者がどのような環境で閲覧されているか、というのも気になる情報です。ブラウザとOSについてみていこうと思います

ブラウザについて

閲覧者の環境でブラウザの項目をみていきますと、多いほうから順に以下のようになっていました。（）内は全体からの割合（％）で、セッションを基準とした集計です。

1. Firefox （47.60）
2. Internet Explorer （43.16）
3. Safari （5.37）
4. Opera （2.59）
5. Chrome （0.65）

今年はGoogle Chromeが登場した年でもありましたが、このサイトでは（割合は）低めかも。結局、自分もここまでインストールしてなかったり。

因みにInternet Explorerのバージョンはというと、

• 6.0 (50.82)
• 7.0 (47.78)
• 5.5 (0.17)

といった結果となりました。()の数字はIEの利用者のセッション中での割合です。全セッションにおける割合は別に計算しないといけないみたいで、時間の関係（ということにしておきます）で省略しちゃいます。

IE6ユーザはまだまだ多いという印象ですが、これは年間通じてのハナシ。特定期間（一箇月とか一週間など）でみると、IE7のほうが多いもよう。

WindowsとMac以外のOS

ちなみにMac利用者の割合は10パーセントちょっとくらいなのですが、いくつかピックアップします。以下、多い順です

• Linux
• NTT DoDoMo
• iPod
• FreeBSD

このなかでは、Linuxが圧倒的に多いです。それでも全体の１パーセントに満たないですが

最後に

ここでまとめないといけないんですね。いろいろと眺めていて時間ばかりが経過してしまいました。

検索エンジンからの訪問者の割合が多かったです。今後もそうなると思いますが。あと基本的にいえるのは全体でアクセス少ないです。ま、べつに気にはしてない（といえばウソ）ですが。来年のこの時期に同じような内容でどう変化があったか見れればいいなと思いました。それまでサイトが残っていることが条件ですが。全然まとまっておりませんが以上です。

それではよいお年をお迎えください。

謎の文豪（？）海腹先生に文章の添削をお願いしてみることに。その結果は

先生といっても、サービス上の先生なので実在はしないようですが。文章を入力して、その文章を解析してくれるサービスを試してみました。

• みんなの海腹先生 | 水無月ばけらのえび日記
• テキスト解析サービス みんなの海腹先生 (α Version)（umihara.bakera.jp）

添削の海腹先生のモデルは、すぐに想像がつきそうではあります。

で、試した文章ですが、過去のエントリを使うのもアレなんで、このネタのためだけに適当に作成したものが以下です。それゆえに、以下の文には内容は特にありませんのでご了承ください。

凄くどうでもいいことなのだが、Movable Typeでウェブページしか作成しないようなブログを構築することって可能なのだろうか。
例えば、新規で、ブログ作成する。ありきたりだが、/hoge/というブログディレクトリを作ったとする。インデックステンプレートはとりあえず全削除してしまう。ウェブページ作成で初めに作成するページのファイル名をindex.htmlにしておく。
これでとりあえず、http://exsample.com/hoge/のトップページができたというわけである。
とくだらないことを以前考えていた。

それで、添削のほうは以下のようなものでした。

この文章は255文字、36文節あるようだな。

名詞が36、動詞が7、形容詞が1、形容動詞が1、副詞が5、接続詞が1、助詞が26、助動詞が24、接尾辞が1、特殊が22、全部で124あるな。

句点が9、読点が5あるようだ。

58点だな。悪くない。悪くないが......。

採点については、文章のうまい・下手ではないそうです。（使い方と注意事項を参照）

ここからは、スクリーンショットにて

2行目109文字目の「html」という表記だが、以下の件りだけど。拡張子で書いてるんだけどなぁ。いささかお節介な部分も？？

でもって、元の文章から「新しいテキスト」とかいって、提案もしてくださるようです。

なんだ、この文章は。この程度で殿堂入りとは かたはらいたい！

･･････ということで、文章解析のアレでした。

vLetterで筆記体フォントのデモページがありましたので試してみました。

普段あまり英文とか使うことはないんですけど、筆記体で書かれた画像とかページのアクセントにもいいのかなと思っていろいろ探してまして。vLetterというところで、筆記体のフォントがあるみたいでして、以下のページにそのデモンストレーションページがありました。ジェネレーター感覚でフォントですとか、背景のひな型とかいろいろと試して遊べそうな感じです。

• vLetter Free Font Demo Online - Try Our Real Cursive Handwriting Fonts

ためしに作成してみました。左側のテキストエリアに何かタイプして、右にある、Handwriting Optionsあたりでいろいろと指定をして、Previewボタンで表示されます。

拡大・ダウンロード

Firefoxでアドオンをいくつか入れていると、ステータスバーに導入中のアドオンのアイコンが並んできます。Organize Status Barはこれを表示させたり非表示にしたり表示順をいれかえたりするとこのできるアドオンです。

この前、たまたま見たページでなのですが、どういったアドオンなのかわからないけど、キャプチャでGmailのアドレスがステータスバーにでてしまうものだから、その部分にモザイク処理などされています。

＠ITの以下の記事です。

• まずはHTML。ハイパーなタグ付き言語（1/5）＜デザイナーのためのWeb勉強帳（1） - ＠IT

そこまで加工するのなら、ステータスバーを非表示にしてからキャプチャ撮るとか、必要な箇所をトリミングでもしたらいいのではないかなと思うわけで。

また、ステータスバーなどにライターさんの使ってるアドオン群が多く並んでいるのをみると却って引いてしまったりします。＃アドオン記事と関係ないし、みたいに。

ま、自分が思ったことは自分で実践してたらよいだけの話でして、（自分が）キャプチャ撮るときは少し気を遣いたいなというお話でした。

さて、こんな場面でも「Organize Status Bar」を使いますと、ステータスバーに表示させたいアドオンなどコントロールできますので便利そうです。

アドオンは以下のページから

• Mozilla Japan - Firefox 用アドオン - Organize Status Bar

設定画面は下のような感じです。

HTMLのソース中に書くコメントについて、目にとまったサイトなどをメモしておきます

正しいコメントの書き方をしましょうということで（自戒もふくめて）。コメントについての解説は以下のサイトにて。

• 正しいコメントを書こう
• SGMLの注釈宣言@鳩丸よもやま話
• コメントは正しく書く必要があります - Web標準普及プロジェクト

コメントの中身にハイフン（-）が続いてしまうのはマズいというのはおぼえておきたいと感じました。

鳩丸よもやま話のページには、正しい書き方であっても、ブラウザの独自の判断により正しく認識してくれないケースを「ぶったぶたれた」という例で紹介されています。注釈宣言テストというページがあり、Firefox3でみたところでは、問題なく表示されていました。さて、IE6でみると・・・・・・

Open MagicVox.netさまでは、(X)HTMLの終了タグへのコメントのつけ方を紹介されています。

• HTML の閉じタグへのコメントの付け方 - Open MagicVox.net

これは、なるほどと思いました。少し気になったんですが、それは、HTMLでタグが入れ子になるときが割りとあって、Vicunaテンプレートでもそうですが、タブインデント（スペースでもいいんですけど）を利用して整形などしているときにはどうかな、という部分です。

ま、いらんことで特に意味はないんですが、簡単なXMLでコメントの書き方だけためしてみました。ブラウザで、ドキュメントツリー表示でみたところ、「構造上もコメントの所属が明確」という点については、納得できた気がします。そのあたりは、好みの部分もあってアレですけど。

<?xml version="1.0"?>
<root>
<main>
    <title>hoge hoge
        <!-- description element --><description>hoge^2</description>
    <!-- end title --></title>
<!-- end main --></main>
<!-- end root --></root>

<?xml version="1.0"?>
<root>
  <main>
    <title>hoge hoge
        <!-- description element --><description>hoge^2</description>
    </title><!-- end title -->
  </main><!-- end main -->
</root><!-- end root -->