net Archive

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。ウィンドウを最大化した状態です。以上です。