@hebyumetan

完全ではないけれど自分で理解して第一の目的を達成できた　〜Blog記事からツイアカ取得に向けたBookmarkletのお勉強　Vol.2〜

Bookmarklet

Blog記事からTwitterアカウントを取得するBookmarkletを作りたいー！ - @hebyumetan

上記の記事を書いたことで、一昨日からBookmarklet（JavaScript）のお勉強を開始した@hebyumetanです。

昨日は衝撃的というか、とっても嬉しいことがありました。

 

ブログ記事内のTwitterアカウントを取得するブックマークレットを作ってみました - もとまか日記乙

なんと、iOSアプリなどを開発なされている@motomakaさんがBookmarkletを作ってくださったのです。めっちゃ嬉しくってたまりませんです、はい（●＾o＾●）

さらにさらに、Twitterでもやり取りさせていただきました。

 

 

ということで、当初（っていっても昨日のことｗ）目指していた「URLとTwitterアカウントを対応表として記述したテキストファイル」を使うっていうのは、私にはまだまだとってもハードルが高そうなのでやめといて、

1. 本文全体を取得（document.body.innerHTML）
2. 余計な文字をカット（replace）
3. 正規表現でTwitterアカウントをすべて検索（match）
4. 検索された文字列を連結（？？？）
5. 結果を表示（promp）

この方法にチャレンジすることにしました。

正規表現については、20年近く前、awkやperlでパソコン通信のログを集計したりするスクリプトを作っていたので、なんとかなるはず。でも、やっぱほとんど忘れている(^^;;

まずは、@motomakaさんが作られたBookmarkletの動きを理解しなくっちゃです。

 

▲あれあれ、あれれ。「javascript:」の後ろに「(」がないではないですか。「function」による関数も「var」による変数宣言と初期化もありません。いきなり頭が混乱です。初心者にありがちなパターンか？(^^;;

なので、自分が理解できる内容に変更することにしました。

 

▲前後の「()」と「var」を追加しただけです。あと、正規表現のところの「1,15」と「i」の意味が理解できずにいます。ちょっと調べてみましたがわからなかったので、この部分の理解は後回しとします。

 

javascript:(var%20tw=/@[0-9A-Za-z_]{1,15}/i;var%20b=document.body.innerHTML;b=b.replace('@gmail','');var%20r=b.match(tw);alert(r);)

半角スペースを「%20」に置換し、改行を削除して実行してみました。

 

………シーン

 

んがー、ダメだ。うんともすんともです(T_T)

 

▲「俺には無理ってことか＿|￣|○」となり、メゲそうになりましたが、めげてなるものかｗ

 

javascript:var%20tw=/@[0-9A-Za-z_]{1,15}/i;var%20b=document.body.innerHTML;b=b.replace('@gmail','');var%20r=b.match(tw);alert(r);

前後の「()」を削除して実行してみました。

 

でけた！やればできるじゃないの！「()」の削除だけｗｗｗ

 

次は正規表現の理解です。「[0-9_a-z]」だと、たしか大文字の英字はヒットしなかったはず。

 

#RyoAnnaBlog

@RyoAnnaさんのBlogをお借りし（勝手にすみませんm(__)m）、実行してみました。

 

▲うむむ？@RyoAnnaさんのTwitterアカウントが表示されないのは、Twitterアカウント自体が記述されていないので理解できるんですが、大文字を含んでいる@StudioLoupeさんがヒットしている。なんでだ？？？

 

▲このように「[0-9A-Za-z_]」に変更して実行してみたところ、結果は同じでした。うーん。「なんとかなるはず」の正規表現でつまづいちゃうのか？

いやいや、こんなところではつまづきませんってば。またまた後回しです(^^;;

 

@motomakaさんからアドバイスいただいているとおり、Twitterアカウント自体ではなく、そのURLを拾ってこないとダメってことがわかりました。

 

http://twitter.com/@[Twitterアカウント]

https://twitter.com/#!/@[Twitterアカウント]

 

このいずれかを正規表現ですべて検索し、その検索された文字列を連結してやればいいってこと。

いきなりそれを目指すのではなく、ひとつひとつを理解して進めます。

 

▲このように、正規表現の部分を「/http:\/\/twitter.com/i」に変更し、また、余計な文字をカット（replace）する記述を削除しました。

 

javascript:var%20tw=/http:\/\/twitter.com/i;var%20b=document.body.innerHTML;var%20r=b.match(tw);alert(r);

「/」のようなエスケープキャラクタを検索する場合には、その文字の前に「\」を付けてやるんですよね。思い出したぜｗ

ほれ、実行！

 

▲やったー！第一の目的達成じゃん（●＾o＾●）

 

トロも笑いだ！ / takumi.412

 

しかし、これだけやるのに、同時にBlogの記事を書きながらとはいえ、なんと2時間もかかった（Togglちゃんがきっちり記録ｗ）。無理はいかんぜよｗｗｗ

つづく。

ツイートする

Permalink | コメント(2) | トラックバック(1) | 04:55