読者です 読者をやめる 読者になる 読者になる

すなばいじり

はてなブログを使って、トンピーを揃えるまで止めないブログ。ふっくらかわいい。


こちらは、水先案内です。
最新仕様のパンくずリスト を どうぞご利用ください。
あわせて読みたい 機能 をどうぞご利用ください。
Proxy Hacking Protection を どうぞご利用ください。


Hatena::diary ネタまとめ
Hatena::blog SLview+ 開発日誌
Develop::site Cosmonaut
人気記事表示するやつと、それをTwitterへアナウンスするやつ

(例えば、)はてなブログで特定の要素を抽出したい

sandbox JavaScript はてな

 色々試行錯誤をされて解説していただいたエントリー。

記事中でも「3つ目のh3の前」などと指定ができるので、これを記事一覧でもできないか考えて改善していきたい。最終的には他人のgithubコードを利用せずに、DOMオブジェクト生成して、自分で場所を決めて出力したいな。

はてなブログのトップページ記事一覧にアドセンスを挿入する方法 - ゼロツク

そもそもドキュメントが足りていなかったという部分と、技術的に可能であるという実証で止まっているコードであった為に、試行錯誤する事になってしまったので、もう少し何とかしたいと考えています。

※「何か」は独立したコードになります。

 

さて、引用している部分の解説を一つ。

 

querySelectorAllを使う

jQueryにも似たようなものがありますが、最近のブラウザで一般的に利用できるquerySelectorAllを使います。

document.querySelectorAll(".entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6")

ザックリと説明すると、このように利用します。

 

例えば、Proxy Hacking Protectionの紹介エントリーにて、ブラウザの「F12」キーを押してデベロッパツールを開き、上記コードを実行すると、

psn.hatenablog.jp

 

document.querySelectorAll(".entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6")
/*
[<h3 id="Proxy-Hacking-Protection">Proxy Hacking Protection</h3>,
 <h4 id="機能と特徴">機能と特徴</h4>,
 <h5 id="Webサイト上のコンテンツを複製されることによる検索順位低下を防止">Webサイト上のコンテンツを複製されることによる検索順位低下を防止</h5>,
 <h4 id="優位性">優位性</h4>,
 <h4 id="動作条件">動作条件</h4>,
 <h3 id="導入要件">導入要件</h3>,
 <h3 id="インストール">インストール</h3>,
 <h4 id="はてなブログ版">…</h4>,
 <h4 id="WordPress版のProxy-Hacking-Protection">…</h4>,
 <h3 id="サポート免責事項">サポート・免責事項</h3>,
 <h3 id="ライセンス等">ライセンス等</h3>,
 <h3 id="資料関連リンク">資料・関連リンク</h3>,
 <h4 id="ソースコード">…</h4>]
*/

このように、本文中の見出し(h1~h6)の一覧が取得できます。

 

また、スッキリと書きたい場合は

document.querySelectorAll(".entry-content")[0].querySelectorAll("h1,h2,h3,h4,h5,h6")
// documentから「.entry-content」一覧を抽出して、抽出した一覧の「0番目(一番最初)」から「h1,h2,h3,h4,h5,h6」を抽出する

このように書くこともできます。

 

指定して、その下に追加したい

希望する要素の一覧が取得できました。それでは次に、insertAdjacentHTMLを利用して新しい要素を追加してみましょう。

 

例えば、この見出しの上に広告が表示されていますが、これと同じことができます。*1

 

一例として、このように利用します。 

var _entrys = document.querySelectorAll(".entry-content")[0].querySelectorAll("h1,h2,h3,h4,h5,h6")
_entrys[0].insertAdjacentHTML('afterend','<h1>追加された要素です</h1>');

この例の場合は、「最初に出てくるh1~h6の『下』に要素を追加」するよう動作します。

要素が追加されます

 

insertAdjacentHTMLには4つの指定方法があり、

  • beforebegin (その要素の直前に)
  • afterbegin (その要素の「中の」先頭になる様に)
  • beforeend (その要素の「中の」末尾になる様に)
  • afterend (その要素の直後に)

beforeendによく似たものに、.appendChildがあります。

 

それぞれを利用して任意の位置に要素を追加してみましょう :)

 

真面目に書かれた説明一覧

developer.mozilla.org

 

developer.mozilla.org

 

developer.mozilla.org

 

ところで何故「二番目」に固定されているのですか?

ここ

_entrys[0]として決め打ちされている為ですね。
柔軟に対応できるよう、新しいやつを作っています。

 

 

 

進撃のはてなブログ

NEW リズムでともだち こぐまのトンピー

NEW リズムでともだち こぐまのトンピー

 

 

*1:実験コードとして埋め込まれています。探してみましょう:)