http 記法の :sound オプションを使い続けたい
はてな記法のひとつである 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><
ここに動作確認用サンプルを書いておきます。
この記事用に音源を作る時間が割けなかったので、昔色々あってお蔵入りした音源の一部を使いました。ライセンスのゆるさを基準にしてチョイスしました。フル音源および歌詞とその訳は SoundCloud にあります。
viewport が設定されていないか特殊な設定だと、hatenablog.js の document.documentElement.scrollWidth <= window.outerWidth
に引っかかって FastClick が発動して audio 要素のコントロールが操作不能になるので、viewport を設定していない場合は勝手に付け足します。特殊な設定で操作不能になる場合はご自身でコードを書き換えてご利用ください。
ダイアリーの影が差すはてなスター
先日なぜか移行前のダイアリー (d.hatena.ne.jp) の方にスターを貰いました。
貰う数日前に、誤ってはてなスターのブログ一覧ページからここに移行する前のはてなダイアリーを削除してしまって、その影響か上記ページの Entries でダイアリー時代に書いたエントリがずらっと並んでいたので、そこから直接スターをつけたりしたのかなとなんとなく思っていました。
スターがついた時点ではこのブログ上にはてなスターを設置しておらず、ブックマークも締め切っていたため、スターをつけるとしたら何かしらアクロバティックな行動を起こさないといけないので、ブログの URL が勢い余ってダイアリーに戻っていても別に不思議はないなと思っていたのです。
それで、ダイアリーの URL にスターがついたエントリはブログの方でもスターが表示されるのかどうか気になったので、スターを有効にして、ついでにちょっと調整しました。
表示してびっくり、思った以上にたくさんついていました。
でも他のエントリについたスターの通知は来ていません。おそらくこれらのスターも同時期に貰ったものだと推測できますが、☆レポートのページはもちろん、冒頭で出したブログ一覧ページのこのブログのところにも一切スターは反映されていません。久々の迷子スターです。
通知が来た分はレポートには載っていますが、やはり d.hatena.ne.jp 宛になっているためブログには反映されていません。逆になんでこの一エントリだけスターの通知が成功したのか謎でした。
真相を探るべく試行錯誤してみたところ、大体こんな感じの結果になりました。
- 移行後に書いたエントリにスターをつけると特に問題のない挙動をする。
- 旧ダイアリーから移行した記事にスターをつけると URL が旧ダイアリーのものになる。
- 通知は来る、一度スターかスターコメントをつけたところは二回目から通知が来ると予想。
- 引用がすべて失敗する。リダイレクトページにつけたスターに一切引用ができないのは以前からの仕様。
- 記事を編集しても挙動は変わらない。カスタム URL を変更すると当然ながら今までについたスターが消える。
- スターコメントが表示されていない場合がある。
- 記事一覧ページやトップページでは表示される。挙動がおかしくないページと一緒にまとめてスター情報を取ってくると表示されるっぽい。
- 2 ページ目以降や個別エントリではまちまち。スターがつけられたエントリでは表示されてる率が高いけど絶対ではない。
- どこか表示されている場所で一旦コメントすると、以降いつでも表示される。コメントを削除しても表示される。
後でまた別の気付きがあるかもしれないので、ちょっと長いですが各エントリのリクエストとレスポンスも載せておきます。スターコメントを表示させるべくあくせくしたので、現在は値が違います。絵文字は RKS の文字列を私が削除した跡です。
続きを読むゆるアイキャッチ
Hatena::Let のマイページをさかのぼっていると、まだハッピィが表示できることに気付きました。ハッピィの着せ替えはもうできないので、変なかっこにしたままだと悔やまれるなあと思いつつ自分のハッピィを見てみました。
目がありませんでした。
せっかくなので「め」を描いて、ついでに「ゆ」と「る」も描いてアイキャッチ画像にしました。ゆる👁キャッチ。
はてブの 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
、はてなブログを開設していてサイドバーにフォローボタンを表示した Profile モジュールがあったらdiv.hatena-module-profile a.twitter-follow-button
の href が連携しているアカウントの URL になっています。はてなブックマークで a[data-twitter-clicks-marked="true"]
の href を見ると個別ツイートの URL になりますが、こちらでもアカウントが分かります。
ちなみにはてなプロフィールに書かれてある Twitter のリンクは自己申告制なので、連携しているアカウントと同じであるという保証はありません。
Myはてな「アカウント・アドレス設定」項目に 外部アプリケーションアカウントの設定欄がありますが、こちらは、ご自身のプロフィールとして外部アプリケーションアカウントを広く第三者もしくはフレンドに宣伝するための機能として運用します。設定は、ユーザー自身が手入力で行う必要があり、特に他サービスでの連携設定に本稿が連動するといった実装は行いません。
はてなIDと外部アプリケーションアカウント紐付け情報の取扱いについて - お問い合わせ - はてな
同じページにこんなことが書かれているので戸惑いますが、七年前の情報らしいので、忘れ去られているのかもしれません。
はてなIDと外部アプリケーションアカウント紐付け情報の取扱いについて - お問い合わせ - はてな
- ただし積極的に第三者に開示することは行わない。例えばMyはてなのプロフィールのように連携を行ったサービス以外での場所へは、公開しない
私は人力検索で連携を行った覚えがないのですが、ばっちりアカウントが表示されています。ブックマークコメントによるとはてなモノリスでも表示されていたそうです。「積極的」の解釈が私とはてなで違うだけなのかもしれません。
Hatena::Let でブックマーク数を確認するもの
増田のはてブ数を手前 Fork しました。トップページの他にマイページでも使えます。
Fork に使わせてもらったブックマークレットを紹介しようとしたらなぜか Google から消えていたので探索に時間を要しました。
はてなブックマークでアイキャッチ画像を確認するもの
RSS リーダーから各エントリに飛んでるので、画像は見ているはずなのに、すぐどんな画像だったか忘れてしまいます。そんな時に画像に言及されると気になってしょうがないのですが、RSS リーダーの方では既読のものは非表示になってて再表示がめんどくさいので、はてなブックマークに直接出すことにしました。
Togetter の引用ツイート乱舞を止めるもの
twitter で元ツイートの URL を検索した結果をばしばし載せまくったようなまとめに当たると、おんなじ引用が連なってスクロールが大変なので、省略しました。複数の引用ツイートがまぜこぜになってる場合、どれがどれだか分かりにくくなると思います。
うるおいの雨が降るもの
ダジャレを思いつくままに書いたら肌色の手が降ってきて、なんとなく後に引けなくなったので緑化させて、ゴルフも何もあったもんじゃないコードになったので後から変数名を考え直しました。
色々書き替えてる時に h:id:noromanba さんからはてなハイク経由でアドバイスを貰い、そのまま使わせていただいたのですが、コード中にお礼を書くのを忘れて無礼な人みたいになってしまいました。
お礼の付け足しだけでまた新着一覧のトップに浮上するのもためらわれるので、この場でお礼を言わせていただきます。ありがとうございました。
昔見たハンドクリームの CM がひたすらいろんな手を映してるだけのもので、それをぼんやりと思い出しつつこれを書いたのですが、そのハンドクリームが atrix だったのかどうかは定かではないです。
ちなみにうちで使っているのはニベアです。かかと用に買ったのですが、以前使ってたパックスナチュロンを切らして以来手もこっちを使っています。ほぼ毎日塗り忘れるのでなかなか減りません。
ひとごこち
新しいはてラボサービスが始まっていました。
クイズ認証を組み込んだサービスは以下の通りです。
http://labo.hatenastaff.com/entry/2016/12/01/115210
- 大チェッカー
- Hatena::Let
- はてな匿名ダイアリー
とのことなので、早速 Hatena::Let に行ってきました。
サービスがリリースされたのは十二月ですが、スパム自体は 11/12 以降は投稿されていないか、削除されたみたいです。運営の方が日々頑張ってくださってたようで、ありがたいです。
人間性のチェックは作成ページへ行った際に行われました。「公開」ボタンを押したときにチェックされるものだとばかり思っていたので、心の準備が不十分でしたが、何とか人間ラインに到達できました。以前 github でロボ扱いされてアカウントが凍結されたのでしょぼくれながら人の心を持つ旨をメールしたことがある程度には人間です。
猿と蟹と蜂と臼が出てくる昔話を答える質問で「さるかにがっせん」と書いたら不正解だったのが気になります。漢字と仮名の表記ゆれくらい今の時代なら楽々吸収できるイメージがあったのですが、そういったライブラリのライセンスなんかがどうなってるか等は全く知らない世界なので、私のイメージとは裏腹に結構難しいものなのかもしれません。
トップページを見たとき、投稿がほとんどないに等しい状態だったので、みんな人間性チェック落ちちゃったのか…今まで便利なブックマークレットを提供してくれていたあの方たちは実はみんな脳みそがカリカリ言うタイプの方だったのか…いや SSD ならカリカリしないか…そうカリカリしなさんな…とか余計なことを考えていたのですが、みんなチェックだけ済ませて満足して投稿までしなかったんだなという結論に達しました。
私はもう投稿する覚悟で行ったので、そのまま投稿してきました。
投稿したら早速スターをいただいたので、まだ人間がいてよかった、人間やってて良かった、と思いました。
これを書いているときにテンプレートリテラル中に URL を入れるとそこでスクリプトが途切れることに気づきました。RAW はそのままですが、圧縮されてるのは全滅です。
多分圧縮に使っているものが昔のままで、JavaScript の新仕様についていけなくなってるんだと思います。
今テストしたら http:\u002F\u002F みたいな書き方で回避できたので、今度別のところを修正する機会があればついでに直そうと思います。
Hatena::Let のスターとアンテナ
そういえばいつの間にか 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 アンテナを作りました。みんながいることを実感したいので、あと今は休止状態でも私のように出戻ってくる可能性も捨てきれないので、節操無く購読しています。
ご新規さんの捕捉ができないのが残念ですが、この現状を見てなお初参加する猛者の方もそんなにいらっしゃらないだろうと思うので、諦めることにします。
近況
最近久しぶりに Hatena::Let に行ってちょこちょこ書きました。
発言小町で曜日確認するもの
すこし前の人気エントリー経由で発言小町を見たのですが、話者が当然のように曜日で日時を表現しているにもかかわらず日付に曜日が付いてなくて、途方に暮れて書いたものです。
義母と話し合えと言われますが : 家族・友人・人間関係 : 発言小町 : 大手小町 : YOMIURI ONLINE(読売新聞)
こういう感じのページに使うと曜日が出てきて時間感覚がつかみやすくなります。
小町ヘビーユーザの方は多分ツェラーの公式とか脳内でバンバン回して暗算できるので、曜日が付いていないのかなと思いました。
はてな匿名ダイアリーでブックマーク数を確認するもの
トップページとかの記事がずらっと並んでるとこでブックマークがあれば便利なんじゃないかと思いついて書きました。
オートページャのこととか全然考えずに書いたので、そういうの導入してる場合は 50 件毎に切って送らないと API が困っちゃうと思います。
はてなブックマークのコメント一覧ページへの道筋が絶たれてる時のもの
ブックマークレットというかユーザスクリプトとして書いて、ついでにこちらにも書きました。
普段は Android の Firefox でインタネッティンするのですが、同じタブでブックマークページを読み込むにはコメント一覧ページへのリンクが必要になるんです。
ブックマークがめっちゃ使いづらいのでブックマークレットで location.href = "http://b.hatena.ne.jp/entry/" + location.href
とかするわけにもいかず。
大体自分が見るページにははてなブックマークへのリンクが有るのでそれを有効活用しているのですが、それが時々コメント一覧ページじゃなく追加用ページヘのリンクになってるんですよ。
そんなリンクを開いたら、一抹の寂しさを感じた後に、同じタブで開くのを諦めてはてブコメント表示というアプリでコメントページを呼び出すのですが、これまた時々閲覧してたページが実は Canonical じゃない URL でコメントが閑古鳥だったりして、寂しさに拍車がかかります。
そういう寂しさを事前に回避するために書きました。
はてなブログで datetime を挿入するもの
はてなブログに移行したら ins, del 要素に自動的に datetime がついてくれなくなってて、でも手書きで ISO8601 を間違わずに書ける自信がないので、書きました。
そもそも移行したのは久々に日記をつけようと思ったからで、どうして思ったかというと Hatena::Let が荒野になっててその悲しみをどこかに書き残そうと思ったからで、書き残そうとしたことによってさらなる悲しみが生まれて、悲しみを和らげるためにまた悲しみの Hatena::Let に書きに行くのが悲しみエコシステムみたいでむしろ面白くなってきました。
はてなブログで q 要素の cite 属性を展開するもの
なんかダイアリーだと展開してくれてたのですが、してくれなくなったので自分でしました。
はてなブログの 設定>詳細設定>head に要素を追加 あたりに下記をコピペするとはてなダイアリーっぽく展開するようになります。
<script type="text/javascript" src="https://cdn.rawgit.com/pacochi/dc32751856514ec4bf40d44e6abf2050/raw/hatenablog_q_cite_expander.js"></script>
はてなブログで MML を鳴らすもの
なんかメロディ記法もなかったことにされてたのでなんとかしてみました。鳴らない環境も多々あると思いますが、多分対応できません。
ダイアリーから移行して鳴らなくなった MML の記事内に下記をコピペするとプレイヤーが復活します。
(はてな記法での書き方なので、別の編集方法を採用している場合は別途読み替えてください。)
><script type="text/javascript" src="https://cdn.rawgit.com/pacochi/44442c2279cfb2ae0cff3893a4158f57/raw/hb_mml_player.js"></script><
ここに動作確認用サンプルを書いておきます。元ネタは消えてるみたいですがうまいこと辿って行ったらまだ聞けると思います。
t125; l8 o5 r1r1ar<c+r>ar<c+r>arb<c+f+ec+>bar<er>arbr<c+4r4>br4.ar<c+r>ar<c+r>arb<c+f+ec+>bar<er>arbra4r2.brbrbr<c+rdrc+r>br<c+rdrdddddf+e4r2.f+rf+rf+rerdrdrdrc+r>ar4.ar<c+re4r2.>aaaaaaab<e4r2.>ar<er>ar<er>ararbr<er>aa<ee>ar<ee>ararb2ar1; l4 o2 aeaeaeaeaaaaaaaaaaaa<c+c+>bbaaaaaaaaaaaaaaa2bbbb<c+c+c+c+ddddeee2f+f+f+edddc+>aaaa<eee2>a2ab<er>eraaaaaab<e>aaaaaab2aeaea
お題「シンタックス・ハイライト機能で対応してほしい言語」というのをさっき見かけたのですが、個人的には MML がまたプレイヤー付きで復活してくれると嬉しいです。