ゆるめ

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

サブブログへのリダイレクト URL

blog diary

はてなにログインする際、ドメインが hatena.ne.jp の URL を クエリの location= に設定しておくと、ログイン後にその URL にリダイレクトしてくれます。

Twitter の アカウントでログインした後にメインブログにリダイレクトする URL は、以下になります。

https://www.hatena.ne.jp/oauth/twitter/oauth?location=http%3A%2F%2Fblog.hatena.ne.jp%2Fはてな ID%2F

これのサブブログ版が欲しくてちょくちょく検索していたのですが見つからず、諦めかけていたのですが、久しぶりに公開範囲を全体公開からはてなにログインしているユーザのみ公開に変更してテストしていたら、偶然サブブログのリダイレクトに使えそうな URL を発見しました。

http://blog.hatena.ne.jp/login?blog=http%3A%2F%2Fブログのドメイン

これを location= に入れて試してみたら、ばっちり成功して、サブブログでもリダイレクトできました。

https://www.hatena.ne.jp/oauth/twitter/oauth?location=http%3A%2F%2Fblog.hatena.ne.jp%2Flogin%3Fblog%3Dhttp%253A%252F%252Fブログのドメイン

今までは Twitter のアカウントでスムーズに読めるよう、公開範囲が狭い (Twitter のフォロワー + α程度) 日記をあえてメインブログに据えて、なぞなぞ認証の文面に Twitter アカウントでのログイン用リンクと、はてなプロフィールから来た人向けにここへの誘導リンクを併記していました。

これからはそんな面倒なことをせずにシンプルに記述できます。嬉しい。

というわけで意気揚々とここをメインブログにしましたが、他の人視点のプロフィールからはてなブログのリンクが消えていました。

f:id:pacochi:20170212191736p:plain

さっきさらっと言いましたが、実験的に全体公開にしていた公開範囲を元に戻したので、全てのはてなブログがカスタムの公開範囲になったため、消えたのだと思います。

ちなみにはてなダイアリーも全て公開範囲がカスタムなのですが、こちらはずっとアイコンが出続けています。先日のスターの件でもそうなんですが、プラスが切れたダイアリーは色々と挙動が怪しいので、はてなポイントシステムがリセットされたらまた色々調べてみたいなと思っています。

http 記法の :sound オプションを使い続けたい

blog

はてな記法のひとつである http 記法には :sound というオプションがあります。

そのURLが「.mp3」で終わるmp3ファイルを示している場合、「:sound」と記述すると再生プレーヤーを表示します

リンクを簡単に記述する（http記法、mailto記法） - はてなダイアリーのヘルプ

メロディ記法と違ってはてなブログでもこの再生プレイヤーが利用できるのですが、Flash なので限られた環境でしか再生できません。

以前別のブログで「じゃあ audio タグで囲っとこっか」と思い、該当の記法部分を audio タグで挟んだところ、ダウンロードリンクまで挟みこんでしまい不便になってしまいました。

あと個人的にはてなプレイヤーの外観がはてなっぽくて好きなので、やっぱりできる限りこっちを表示させたいなと思いました。

そこで「じゃあはてな記法展開後に audio 要素を object の中に滑り込ませるのが正解かな」と思い直し、そういうスクリプトを書きました。

はてなブログで [http://～.mp3:sound] と書いた時に出るプレイヤーを優しくするもの

mp3 プレイヤーを使った記事の最後に以下のコードを貼り付けると、ちょっとアクセシビリティが上がるかもしれません。

（はてな記法での書き方なので、別の編集方法を採用している場合は別途読み替えてください。）

><script type="text/javascript" src="https://cdn.rawgit.com/pacochi/72fead25eebf75e3d750fe43a47c496b/raw/hb_mp3_audio.js"></script><

ここに動作確認用サンプルを書いておきます。

Download

この記事用に音源を作る時間が割けなかったので、昔色々あってお蔵入りした音源の一部を使いました。ライセンスのゆるさを基準にしてチョイスしました。フル音源および歌詞とその訳は SoundCloud にあります。

viewport が設定されていないか特殊な設定だと、hatenablog.js の document.documentElement.scrollWidth <= window.outerWidth に引っかかって FastClick が発動して audio 要素のコントロールが操作不能になるので、viewport を設定していない場合は勝手に付け足します。特殊な設定で操作不能になる場合はご自身でコードを書き換えてご利用ください。

ダイアリーの影が差すはてなスター

blog diary star

f:id:pacochi:20170206093904p:plain
先日なぜか移行前のダイアリー (d.hatena.ne.jp) の方にスターを貰いました。

貰う数日前に、誤ってはてなスターのブログ一覧ページからここに移行する前のはてなダイアリーを削除してしまって、その影響か上記ページの Entries でダイアリー時代に書いたエントリがずらっと並んでいたので、そこから直接スターをつけたりしたのかなとなんとなく思っていました。

スターがついた時点ではこのブログ上にはてなスターを設置しておらず、ブックマークも締め切っていたため、スターをつけるとしたら何かしらアクロバティックな行動を起こさないといけないので、ブログの URL が勢い余ってダイアリーに戻っていても別に不思議はないなと思っていたのです。

それで、ダイアリーの URL にスターがついたエントリはブログの方でもスターが表示されるのかどうか気になったので、スターを有効にして、ついでにちょっと調整しました。

f:id:pacochi:20170206103130p:plain
表示してびっくり、思った以上にたくさんついていました。

でも他のエントリについたスターの通知は来ていません。おそらくこれらのスターも同時期に貰ったものだと推測できますが、☆レポートのページはもちろん、冒頭で出したブログ一覧ページのこのブログのところにも一切スターは反映されていません。久々の迷子スターです。

通知が来た分はレポートには載っていますが、やはり d.hatena.ne.jp 宛になっているためブログには反映されていません。逆になんでこの一エントリだけスターの通知が成功したのか謎でした。

真相を探るべく試行錯誤してみたところ、大体こんな感じの結果になりました。

  • 移行後に書いたエントリにスターをつけると特に問題のない挙動をする。
  • 旧ダイアリーから移行した記事にスターをつけると URL が旧ダイアリーのものになる。
  • 通知は来る、一度スターかスターコメントをつけたところは二回目から通知が来ると予想。
  • 引用がすべて失敗する。リダイレクトページにつけたスターに一切引用ができないのは以前からの仕様。
  • 記事を編集しても挙動は変わらない。カスタム URL を変更すると当然ながら今までについたスターが消える。
  • スターコメントが表示されていない場合がある。
    • 記事一覧ページやトップページでは表示される。挙動がおかしくないページと一緒にまとめてスター情報を取ってくると表示されるっぽい。
    • 2 ページ目以降や個別エントリではまちまち。スターがつけられたエントリでは表示されてる率が高いけど絶対ではない。
    • どこか表示されている場所で一旦コメントすると、以降いつでも表示される。コメントを削除しても表示される。

後でまた別の気付きがあるかもしれないので、ちょっと長いですが各エントリのリクエストとレスポンスも載せておきます。スターコメントを表示させるべくあくせくしたので、現在は値が違います。絵文字は RKS の文字列を私が削除した跡です。

続きを読む

ゆるアイキャッチ

blog

Hatena::Let のマイページをさかのぼっていると、まだハッピィが表示できることに気付きました。ハッピィの着せ替えはもうできないので、変なかっこにしたままだと悔やまれるなあと思いつつ自分のハッピィを見てみました。

http://cdn1.www.st-hatena.com/users/pa/pacochi/happie.png

目がありませんでした。

https://cdn.mogile.archive.st-hatena.com/v1/image/pacochi/297793964081360138.png

せっかくなので「め」を描いて、ついでに「ゆ」と「る」も描いてアイキャッチ画像にしました。ゆる👁キャッチ。

はてブの id と最近の let

hatenalet bookmark

先日はてなブックマーク向けのブックマークレットを書いていて気付いたのですが、はてなブックマークのマークアップスタイルってロックですね。個別エントリのページでユーザ別に 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 の値を切り替える

ひとごこち

hatenalet

新しいはてラボサービスが始まっていました。

クイズ認証を組み込んだサービスは以下の通りです。

http://labo.hatenastaff.com/entry/2016/12/01/115210

とのことなので、早速 Hatena::Let に行ってきました。
サービスがリリースされたのは十二月ですが、スパム自体は 11/12 以降は投稿されていないか、削除されたみたいです。運営の方が日々頑張ってくださってたようで、ありがたいです。

人間性のチェックは作成ページへ行った際に行われました。「公開」ボタンを押したときにチェックされるものだとばかり思っていたので、心の準備が不十分でしたが、何とか人間ラインに到達できました。以前 github でロボ扱いされてアカウントが凍結されたのでしょぼくれながら人の心を持つ旨をメールしたことがある程度には人間です。

猿と蟹と蜂と臼が出てくる昔話を答える質問で「さるかにがっせん」と書いたら不正解だったのが気になります。漢字と仮名の表記ゆれくらい今の時代なら楽々吸収できるイメージがあったのですが、そういったライブラリのライセンスなんかがどうなってるか等は全く知らない世界なので、私のイメージとは裏腹に結構難しいものなのかもしれません。

f:id:pacochi:20161209001702p:plain
トップページを見たとき、投稿がほとんどないに等しい状態だったので、みんな人間性チェック落ちちゃったのか…今まで便利なブックマークレットを提供してくれていたあの方たちは実はみんな脳みそがカリカリ言うタイプの方だったのか…いや SSD ならカリカリしないか…そうカリカリしなさんな…とか余計なことを考えていたのですが、みんなチェックだけ済ませて満足して投稿までしなかったんだなという結論に達しました。

私はもう投稿する覚悟で行ったので、そのまま投稿してきました。

投稿したら早速スターをいただいたので、まだ人間がいてよかった、人間やってて良かった、と思いました。

これを書いているときにテンプレートリテラル中に URL を入れるとそこでスクリプトが途切れることに気づきました。RAW はそのままですが、圧縮されてるのは全滅です。

多分圧縮に使っているものが昔のままで、JavaScript の新仕様についていけなくなってるんだと思います。

今テストしたら http:\u002F\u002F みたいな書き方で回避できたので、今度別のところを修正する機会があればついでに直そうと思います。

Hatena::Let のスターとアンテナ

star hatenalet daichkr

そういえばいつの間にか Hatena::Let でつけられたスターが自分のところに届くようになっていました。はてなスタッフのその辺担当の方、お気遣いありがとうございます。
メールを検索したら 2016年 3月 12日にレポートがあったのを確認したので、少なくともそれ以前から届くようになっていたみたいです。

本日の☆ : 1
ただいまの☆総数 : 385 (★67 ☆318)

■ [q.hatena]いるかが恋しくなった人のためのブックマークレットFork
http://let.hatelabo.jp/pacochi/let/gYC-xIielLqrFA
のろまんば (id:noromanba) ☆
“http://q.hatena.ne.jp/images/box-curve-header-iruka.gif”

そこで、具体的にいつ頃なのか調べられないかしらと自分が Hatena::Let でもらったスターの一覧ページを開いたら、何故か一度もスターが付いたことのない let も一覧に載っていました。

@private 付きのものも容赦なく載ってます。どこにもリンクせず自分だけで使ってたものなんかは載っていませんでしたが、どこかからリンクした記憶のあるものは大体載っていました。リンクしたけど載ってないのもありました。Google で検索して出るものが載っている仮説を立てましたが、ちゃんと検証していません。

載っていた let は明らかにスターが届かなかった時代のものも混在していて、いつ頃かの手がかりは残念ながらつかめませんでした。時系列もてんでバラバラで、2010年に書いたきりほったらかし三昧のものが 2013年に載ってたりしました。

それはそれとして、荒野に放り出された leter の方々はどうやって他の人の新着を確認してるんだろうと思って調べてみたら、大チェッカーで捕捉するという方法をとっている方がいらっしゃいました。
daichkr.hatelabo.jp

OPMLで吐き出しできますので、自分向けの情報にするなりできるかと思います。

スパムまみれなHatena::Letの新着チェックを大チェッカーにしてる - maRkの

とのことでしたので、ありがたく OPML をいただいて、私もマイ Hatena::Let アンテナを作りました。みんながいることを実感したいので、あと今は休止状態でも私のように出戻ってくる可能性も捨てきれないので、節操無く購読しています。

ご新規さんの捕捉ができないのが残念ですが、この現状を見てなお初参加する猛者の方もそんなにいらっしゃらないだろうと思うので、諦めることにします。