苦労したところメモ：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に入ってるものの型が分からない。
考えなくてもいいようにできてるんだろうけど、なんかもやもやする。