苦労したところメモ：Pixivのタグに「Pixortでの検索結果」へのリンクを追加するGreasemonkeyスクリプト

Greasemonkey Pixiv

初めてJavaScriptでコードを書いたので、苦労した点をメモしておきます。
他の人の疑問がこれで解決したら嬉しいな、ってことで。


まず参考にしたサイトを紹介


やりたいことは決まってるのですから、あとはそれを実行してくれるコードを書くだけです。
渡しの場合、「ピクシブ百科事典アイコン（リンク）の隣に、文字のリンクを追加する」ということでした。
翻訳PDFを読むと「HTML要素」とか「ある属性を持った要素」なんて言葉が出てきます。
コードにはgetElementByIDとか、createElementというものが書いてあって、要素=elementだということは見当がつきましたが、要素がいったいなんなのか、ということは分かりませんでした。

  • 苦労した：要素がなんなのか分からない

そこでWikipediaでHTMLについて検索したところ

要素は開始タグ、内容、終了タグの3つで構成される。

ということでした。
私はHTMLについて、リンクを張ったり画像を表示する程度には知ってたので
<a href="tags.php?tag=%E5%85%AC%E5%BC%8F%E4%BC%81%E7%94%BB">公式企画</a>
のようなのを要素と呼ぶのだと分かりました。
この場合のhrefが属性名で、"tags.php?tag=%E5%85%AC%E5%BC%8F%E4%BC%81%E7%94%BB"が属性値のようです。


要素とは何かを知ったら、自分の書きたいスクリプトに必要なのはPDFの第4章の
4.3 あるページが特定のHTML要素を含むかテストする（Pixivのイラストページかどうかチェック）
4.8 要素の後にコンテンツを挿入する（ピクシブ百科事典のリンクの後ろにPixortへのリンクを挿入）
ので2つだと分かりました。

  • 苦労した：スクリプトが動いたり、動かなかったりする

厄介です。
私は始め、「4.3 あるページが特定のHTML要素を含むかテストする」について、上で紹介したサイト（Firebugで作るGreasemonkeyスクリプト〜入門と実践(From Kanasan.JS) ）と同じやり方で（XPATHをコピーして）やってたのですが、どういうわけか同じページを開いてるのに書いたスクリプトが動作したりしなかったり、となってました。
始めに/html/body/div[2]/div[2]/div[2]/div/div[2]/div[4]/p/aと指定したのですが、div[4]の部分がたまにdiv[3]となるのでうまくいかなかったみたいです。
これはXPATHでリンクを直接指定してたのですが、イラストのタグがそのページにあるかどうかを調べるのですから、そのタグを指定すればよかったんですね。
この場合では、tagsというID（属性のひとつ）を持つ要素を探すようにすれば（XPATHは//*[@id="tags"]でした）うまくいきました。
このことで、どうしてHTMLのタグにいちいちidをつけてるのか分かりました。便利なんですね。
ここで一番時間を食われました。

  • 苦労した：リンクの挿入箇所がおかしい

要素というのはタグの始めから終わりまでです。
ですから
<span id="tags">
<a href="tags.php?tag=%E5%85%AC%E5%BC%8F%E4%BC%81%E7%94%BB">公式企画</a>
・
・
・
</span>
このときに[@id="tags"]の要素を取得したら、<span id="tags">と</span>に挟まれた部分も一緒に取得してるそうで、この挟まれた部分にある要素は子ノードと呼ばれています。
[@id="tags"]の子ノードには、イラストのタグ1つにつき2個の要素aが含まれてました。
タグ検索・ピクシブ百科事典・タグ検索・ピクシブ百科事典……の順番でした。
[@id="tags"]の子ノードのうち要素名(tag name)がaであるものを取り出して、始めが0番目ですから、1番目の要素の後ろ、3番目の要素の後ろ、5番目の要素の後ろ……にリンクを挿入していけばいいと思って、「4.8 要素の後にコンテンツを挿入する」を見ながら、そういうループを書きました。
うまく動きませんでした。
挿入という言葉の響きから、てっきり私はリンクを直接HTMLソースに書き込んでるものだと思ったのですが、あくまで取得した要素名aのリストに挿入してるだけでした。
そのため、1つ挿入すると順番は
タグ検索・ピクシブ百科事典・ピクソート・タグ検索・ピクシブ百科事典……となります。
次に挿入すべきは3番目ではなくて4番目の要素aの後ろでした。
それを理解して書きなおしたら無事に動きました。

  • 苦労した：リンクってどうやって書けばいいの？

createElementを使えばいいのだと分かりました。
createElement('a')で<a></a>を作って属性hrefとかにPixortでの検索結果のURLを入れて、innerHTML（開始タグ、内容、終了タグの内容にあたるところ）にPxと書いた。
その作った要素をピクシブ百科事典のリンクの後ろに挿入するようにして、完成しました。
var linkElem = document.createElement('a');
linkElem.href = URL;
linkElem.target = "_blank";
linkElem.innerHTML = "Px";
リンクを作る部分はこんな感じになった。


JavaScriptって変数の型を宣言しなくてもいいんですよね。
何が代入されてるのかよく分からないから困る。
上のを例にして言うと、var linkElem = document.createElement('a'); と書いたときにlinkElemに入ってるものの型が分からない。
考えなくてもいいようにできてるんだろうけど、なんかもやもやする。

Pixivのタグに「Pixortでの検索結果」へのリンクを追加するGreasemonkeyスクリプト

Greasemonkey Pixiv

Pixivのタグ検索は投稿日時でしかソートできない。
デイリーランキングとかあるんだから、そういう人気順に並べ替えることもできたらいいのになあ。
探したらそういうサイトがありました。
Pixort


便利だけど、Pixiv非公式のサイトだから、当然Pixivからは飛べない。

  • ある日のこと

Pixortで検索するようになってからも、Pixivのデイリーランキングはチェックを続けてた。
デイリーランキング上位の画像をクリックして、気になるタグをクリック。
イラストがたくさん投稿されていたから、人気順で見たいと思い、タグをコピーして、Pixortを開いて、検索窓にペーストして……
ちょっと面倒だったので、PixivでタグをクリックしたらPixortでの検索結果に飛ぶ、そんなリンクが欲しくなりました。

  • そんなわけで

スクリプトを書きました。
Greasemonkeyのスクリプトだから、Firefoxでしか動きません。
Greasemonkeyを持ってない人はまずそれをダウンロードしてください。
すぐに済みます。

（他サイト）Greasemonkey入門 〜よくわかるグリースモンキーの使い方 〜 | Google Mania

  • ダウンロード

Greasemonkeyのダウンロードは済みましたか？
だったらあとはこのGreasemonkeyユーザースクリプトをダウンロードするだけ！
ダウンロードページへ飛ぶ

「Install」と書かれたボタンをクリックすれば、ダウンロードは完了です。
Pixivに行ってその便利さを実感しましょう。

  • 使い方

イラストのページに飛ぶと、ピクシブ百科事典アイコンの隣に、「Px」という文字のリンクが追加されています。

Pxをクリックすると、Pixortでの検索結果に飛びます。

  • 新ウィンドウで開きたくないよ？

スクリプトのソースコードを編集してください。
Greasemonkeyをダウンロードしていたら右上にお猿さんがいると思います。

その隣の三角から「ユーザースクリプトの管理」を選択すると「アドオンマネージャ」が立ち上がります。
add_links_to_pixort 上で右クリックして「内包するフォルダを表示」。
フォルダの中に「add_links_to_pixort.user.js」というファイルがあると思いますので、これをテキストエディタで開いてください。
メモ帳を起動して、そこにファイルをドラッグアンドドロップすれば簡単です。
開いたら、22行目、全体で言うと真ん中より下のあたりに「linkElem.target = "_blank";//新ウインドウで開きたくない場合はこの行を削除」と書かれた行があります。
この行を削除すれば、現在のウィンドウでリンクを開く設定に変わります。

  • 新タブで開きたいのに新ウィンドウで開くよ？

Firefoxの設定をご確認ください。
Firefoxの「ツール」-「オプション」-「タブ」の「新しいウインドウではなく新しいタブで開く」（T）にチェックを入れれば解決すると思います。

ニコニコ動画で15パズル

ニワン語

ニワン語というスクリプト言語を使って、ニコニコ動画上でプレイできる15パズルを作ったよ。
※操作の仕様上、ニコニコ動画にログインする必要があります。
動画へ飛ぶにはここをクリック（nm13682526）
リンク貼ってから思い出した。まだパズルが完成したかどうかの判定がついてない。
現在はまだパズルをスライドできるだけ。
とりあえず、クリア判定をつけます。クリアしたらどっかの動画に飛ばす。陰陽師でいいか。


22:38　とりあえず完成。スクリプトをコピペすればきみの動画でも使えるゾ
みたいな状態に持って行きたい。いじりやすくしたい。でも現在は眠すぎてダメだ。


2011/05/15　Macだと動かなかった。
Mac環境だと上下左右のボタンを押しても反応がなかった。（パネルのシャッフルまでは正常に動作した）
@ボタンの挙動がWindowsと違うのだろうか。
ニコニコの不具合報告掲示板を覗いたら、MacでブラウザとしてFirefox 4.0.1を使ってるとコメントできないと言ってる人がいた。
入力できないってのはコメント欄になのか、それとも投稿してもコメントが反映されないということなのか、どっちだろう。後者ならしかたない問題として片付くのだけれど。
手元にMac環境がないからどうしようもない。