はてなブログ用Twitter貼り付けブックマークレットを作りました

こんにちは、くみです。

はてなブログ用に、TwitterのTweetを貼り付けるブックマークレットがあればいいのにと思い、自作を試みました。
f:id:arfecia:20140706114241p:plain

【追記】

高レベル黒魔道士の@koshianさんに教えていただきブックマークレット完成しました!文末においてあります。

目次

経緯

はてなブログではTwitterのTweetを貼り付けることが出来ますが、記事投稿画面からは

  • 自分
  • お気に入り
  • タイムライン

の3種類からしか選ぶことが出来ません。
これだと他人のTweetはすぐに貼り付ける(タイムラインから選ぶ)か、お気に入りに入れるかでないと貼り付けられない。個別のTweetのURLは分かっているのに…

はてな記法にはTwitter記法があり、

[twitter:485603721162678272:detail]

と書けばできるのですが、デザインが違うんです。

【貼り付け】

【Twitter記法】

うーん。前者のほうがいいなあ。

なので、はてなブログで使える貼り付けタグをTwitterの個別ページからブックマークレットで 生成できたらいいなあと思い、挑戦してみました。本当はもっと簡単な解決策があるのかも知れないですが…

はてなブログのTwitter貼り付けタグの分解

はてなブログでTwitter貼り付けを行うと、

[https://twitter.com/kum_i/status/485603721162678272:embed#おはようございます(`・ω・´)]

こんなタグが貼り付けられます。分解すると、
"[" + URL + ":embed#" + ツイート内容 + "]"
ですね。
これをブックマークレットで取得できればいいわけだ。特に難しいことはなさそうではないか。

ブックマークレットを作る…?

…うん。( 'ー')
自慢じゃないですがブックマークレットはユーザとしてしか利用したことがありません。
こういう時はGoogle先生の出番だ!

ブックマークレット 作り方 - Google 検索

出てきたサイトをいくつか読むと、HTMLとJavaScriptの知識があれば作れるらしい。JavaScript、すっかり忘れてはいるが、他人のコードを改変するくらいは出来るはず。昔とった杵柄…仕事で使ってたの、もう10年前だよ…。ひゃー。
10年ひと昔とはよく言ったものです…

ブログ拾い読み用ブックマークレットを作ってみました | 56docブログ

こちらのソースを参考に、作ってみることにしました。

ここでひとつ問題が。

どうやってTweetの内容を拾うのか?

URLの取得も難しくないですし(document.URL)、カッコとか他の文字を埋め込むのも難しくありません。ただどうやってTweetの本文を引っ張ってくるの…?
ソースを見たらCSSのclassが”js-tweet-text tweet-text”の部分なんですけど…どうすれば…titleとかだと長いと省略されちゃうし…

きっと上級黒魔道士(プログラマ)であればなんなく取ってこれるんだろうけど、長らく赤魔道士(何でも浅く広く)をやってきて最近黒魔道士に転職したいと思っているだけの私にはNo Ideaです(´・ω・`) RubyとかPHP使えたら簡単なんだろうなあ…

なので解決策として、
『選択テキストを埋め込む』
ようにしました。Tweetを手動選択するという手間はかかりますが、これなら目的は達成できる。(これがこの記事のタイトルに「不完全」と入っている理由です)

はてなブログ用Twitter貼り付けブックマークレットコード(不完全)

というわけで、書いた(というか改変した)コードがこちら。

javascript:
var selTxt;
selTxt = window.getSelection().toString();
selTxt = '[' +document.URL+ ':embed#' + selTxt + ']'; prompt('',selTxt);

自分用なので、ブラウザの切り分けとかは省きました。

テストしてみる。ドキドキ…

 

おお、無事に出来たようです。よかった。

本当はブックマークレットを押すとクリップボードに格納されるのがいいなと思っていたのですが、先ほどのブログにも

今となってはどのブラウザもJavaScriptで直接クリップボード操作はできないようになってますのでそこが残念なとこですね。

ブログ拾い読み用ブックマークレットを作ってみました | 56docブログ

と書かれているし、仕様上無理なのかな。
自分が詳しくない分野は調べても無理そうなら早めに諦めるGoogle世代です。

 

これでブログにTweet埋め込みがすんなりいきそうです( ´∀`) 文章を選択するのをうっかり忘れて空のコードを何回か作ったりしていますが…
Tweet本文を抜き出す方法が分かれば改良しようと思います。そんな日はやってくるのだろうかー。

【追記】

下が高レベル黒魔道士の@koshianさんに教えて頂いた完成版ブックマークレットです!文章を選択しなくても、Tweet個別ページでこれを押すだけで抜き出してくれます。Javascriptだけで出来たんや…RubyもPHPもいらなかったんや…

javascript:var selTxt;selTxt = document.getElementsByClassName('js-original-tweet').item(0).getElementsByClassName('tweet-text').item(0).innerHTML.replace(/<.*>/, '');selTxt = '[' +document.URL+ ':embed#' + selTxt + ']';prompt('',selTxt);

(折り返したもの)

javascript:
var selTxt;
selTxt = document.getElementsByClassName('js-original-tweet').item(0).getElementsByClassName('tweet-text').item(0).innerHTML.replace(/<.*>/, '');
selTxt = '[' +document.URL+ ':embed#' + selTxt + ']';
prompt('',selTxt);

なるほどー getElementsByClassName()でとってくるんですねー…で、innerHTMLをとってきて、タグ(/<.*>/)をreplaceで消すのかー。勉強になります。item(0)ってなんだろう…
うーん、やっぱりちゃんと基礎は勉強したほうがいいなあ…ちょっとした事ができない><

※ はてなブログにはJavascriptのリンクを設置できないようなので、空のブックマークを作って上記のスクリプトをペーストしてご利用ください。

 

▼伝統のオライリーさァん…私にはちょっと難しいですが(;´ρ`)
JavaScript 第6版

David Flanagan オライリージャパン 2012-08-10
売り上げランキング : 21394
by ヨメレバ
仕事で使ってた時、クックブックがすごく役に立ったし面白かったのだけど、Amazonの人気順でなかなか出てこなかったので今は内容古くなってしまったんだろうか。なんせAjaxとか言われる前にコード書くのやめてしまったので…
▼私が使ってた本  
▼新版??

はてなブログカスタマイズ関連記事


はてなブログのスマートフォン版にカテゴリー選択のプルダウンメニューを追加しました - @kum_i log


正規表現を使った置換ではてなブログのソースクリーニングを効率的に行う - @kum_i log


iPhoneの写真が勝手に回転している事に悩まされた話(解決策あり) - @kum_i log


ATOMフィードを設置しました - @kum_i log