ゆるめ

ゆるめなのは公開範囲です。

はてブの id と最近の let

先日はてなブックマーク向けのブックマークレットを書いていて気付いたのですが、はてなブックマークマークアップスタイルってロックですね。個別エントリのページでユーザ別に bookmark-user-はてな ID みたいな ID がふってあるのですが、その ID が同時に複数個所で使われていました。

人気コメント、新着コメント、すべてのブックマークの三か所にそれぞれ同じ ID がどーん。document.querySelector('#bookmark-user-はてな ID') したらどこのが取れてくるか分かりません。海のものか、山のものか、人気のものか、新着のものか。

以前 Lhankor_Mhy さんが奥歯にものが挟まったようなセレクタ指定をしていた理由はこれだったのかな、と思いました。

結局その辺の部分は使わず全く別のアプローチでやりたいことを実現しました。

初めて async/await を使いました。うちのブラウザでは実装されたバージョンと今使ってるバージョンが同じでした。新しそうだとは思っていましたが、そこまでできたてほやほやだったとは。基本的におおもとの仕様書やリリースノートは読んでなくて*1、風の噂で新機能を知るので、const くらいの新しさだと思っていました。

そういえば最近やってみて知ったのですが、const と let が古めの IE で文法エラー扱いになって丸々動かなくなるみたいです。それってむしろ半端に動いて変なとこでエラー出るより好都合じゃんねと思い、以前より積極的に使うようになりました。出戻り前は可能な限り手持ちのブラウザで動くようにしていましたが、今は確認と修正の手間が取れないのでほったらかしです。

そんな最近の let (ダブルミーニング) です。

ちょっと話が戻りますが、はてなブックマークマークアップは他にも SPAN 要素の中に DIV 要素ぎゅうぎゅう詰め込んでたりしてて自由だなと思いました。

はてなブックマークも自由ですが、最近またこういうちゃらんぽらんなスクリプトを思い付きで書けて、自分の自由っぷりも実感できました。私が出戻ったのは自由時間が取れたからで、逆に言うとここしばらく自由時間がほとんどない生活をしていた訳で、スクリプトを書き上げる度に自由のありがたみを感じます。

以前より割ける時間は減りましたが、ありがたみが増えた分充実している気がします。

それとはまたちょっと違う自由の形の話なんですが、私が変数名も考えずにスクラッチパッドをごりごりしているときに感じる自由は、多分井之頭さんがモノを食べるときに求める自由と同じテイストなんじゃないかなと思っています。

今そんな自由の余裕がいくばくかあるので、まだこのブログに出ていない自作ブックマークレットをついでにまとめて置いておこうと思います。

Twitter 連携している ID を調べるもの

二つでワンセットです。CSP のオンオフ*2がめんどい場合はコンソールに以下を貼り付けて実行して、出てきた URL に飛ぶとはてなプロフィールはてな ID が出たり出なかったりします。

(function(u) {
	//何故か twitter では console.log() が封じられてるから console.dir() になった
	if (u) console.dir({
	 'プロフィール': `http://profile.hatena.ne.jp/${u}%40twitter/`,
	 'ID 判別': `http://n.hatena.ne.jp/${u}%40twitter/profile/image`,
	 '説明': 'プロフィールは別途 http://let.hatelabo.jp/pacochi/let/hLHVp_u9oskI を使用、ID 判別は URL にはてな ID が含まれた画像にリダイレクト。'
	});
})(document.querySelector('.ProfileNav').getAttribute('data-user-id'));

この人ってはてなで見たあの人かな?という確認や、はてな公式アカウント系のはてな ID がいっこいっこ用意されてることに感嘆したりするのに使えます。

逆にはてなから連携している Twitter アカウントを確認する場合、人力検索を利用している場合はプロフィールページの span.oauth-twitter aはてなダイアリーを開設していて連携アカウントを表示する設定にしていたら h1 a#twitter-header-iconはてなブログを開設していてサイドバーにhttp://blog.hatena.ne.jp/images/admin/curation/services/twitter.pngフォローボタンを表示した Profile モジュールがあったらdiv.hatena-module-profile a.twitter-follow-button の href が連携しているアカウントの URL になっています。はてなブックマークa[data-twitter-clicks-marked="true"] の href を見ると個別ツイートの URL になりますが、こちらでもアカウントが分かります。

ちなみにはてなプロフィールに書かれてある Twitter のリンクは自己申告制なので、連携しているアカウントと同じであるという保証はありません。

Myはてな「アカウント・アドレス設定」項目に 外部アプリケーションアカウントの設定欄がありますが、こちらは、ご自身のプロフィールとして外部アプリケーションアカウントを広く第三者もしくはフレンドに宣伝するための機能として運用します。設定は、ユーザー自身が手入力で行う必要があり、特に他サービスでの連携設定に本稿が連動するといった実装は行いません。

はてなIDと外部アプリケーションアカウント紐付け情報の取扱いについて - お問い合わせ - はてな

同じページにこんなことが書かれているので戸惑いますが、七年前の情報らしいので、忘れ去られているのかもしれません。

  • ただし積極的に第三者に開示することは行わない。例えばMyはてなのプロフィールのように連携を行ったサービス以外での場所へは、公開しない
はてなIDと外部アプリケーションアカウント紐付け情報の取扱いについて - お問い合わせ - はてな

私は人力検索で連携を行った覚えがないのですが、ばっちりアカウントが表示されています。ブックマークコメントによるとはてなモノリスでも表示されていたそうです。「積極的」の解釈が私とはてなで違うだけなのかもしれません。

Hatena::Let でブックマーク数を確認するもの

増田のはてブ数を手前 Fork しました。トップページの他にマイページでも使えます。

Fork に使わせてもらったブックマークレットを紹介しようとしたらなぜか Google から消えていたので探索に時間を要しました。

はてなブックマークアイキャッチ画像を確認するもの

RSS リーダーから各エントリに飛んでるので、画像は見ているはずなのに、すぐどんな画像だったか忘れてしまいます。そんな時に画像に言及されると気になってしょうがないのですが、RSS リーダーの方では既読のものは非表示になってて再表示がめんどくさいので、はてなブックマークに直接出すことにしました。

Togetter の引用ツイート乱舞を止めるもの

twitter で元ツイートの URL を検索した結果をばしばし載せまくったようなまとめに当たると、おんなじ引用が連なってスクロールが大変なので、省略しました。複数の引用ツイートがまぜこぜになってる場合、どれがどれだか分かりにくくなると思います。

うるおいの雨が降るもの

ダジャレを思いつくままに書いたら肌色の手が降ってきて、なんとなく後に引けなくなったので緑化させて、ゴルフも何もあったもんじゃないコードになったので後から変数名を考え直しました。

色々書き替えてる時に h:id:noromanba さんからはてなハイク経由でアドバイスを貰い、そのまま使わせていただいたのですが、コード中にお礼を書くのを忘れて無礼な人みたいになってしまいました。

お礼の付け足しだけでまた新着一覧のトップに浮上するのもためらわれるので、この場でお礼を言わせていただきます。ありがとうございました。

昔見たハンドクリームの CM がひたすらいろんな手を映してるだけのもので、それをぼんやりと思い出しつつこれを書いたのですが、そのハンドクリームが atrix だったのかどうかは定かではないです。

f:id:pacochi:20170206160149j:plain
ちなみにうちで使っているのはニベアです。かかと用に買ったのですが、以前使ってたパックスナチュロンを切らして以来手もこっちを使っています。ほぼ毎日塗り忘れるのでなかなか減りません。

*1:最後に仕様書がっつり読んだのが HTML4.01 と CSS2 あたりだった覚えがあります。

*2:Firefox だと about:config で security.csp.enable の値を切り替える