はてなの技術ブログ企業一覧をRSSリーダーにインポートしたい

はじめに

みなさんは技術に関する知識をどこから仕入れていますか?
Twitterや書籍、Reddit、Hacker Newsなど様々あるかと思いますが、企業の技術ブログもメインの情報源になっている方が多いのではないでしょうか?
そんな技術ブログ界隈ですが、最近はてなさんが企業技術ブログを集めたページを公開しました。

企業技術ブログ: エンジニアの技術ブログコミュニティ

このページで、はてなブログで技術ブログを公開しているブログエントリーや企業を一括で見ることができるようになりました。はてなブログの技術トレンドについてはこれを追いかければOKになったのですが、個人的にはどちらかと言えば以下のことができればなと思いました。

1. 公開している技術ブログ全部追いかけたい!

2. はてな以外のブログも追いかけているのでRSSリーダーで読みたい!

さきほどの技術ブログまとめページには参画している企業一覧がありますので、そこからURLを引き抜き、OPML形式に変換してRSSリーダーに読み込ませればよさそうです。ではやっていきましょう。

忙しい人向け

1年以内に更新のあった技術ブログの企業一覧をOPML形式にしたものをアップロードしました。

hatena_20221229.xml

58.6 KB

ファイルダウンロードについて

ダウンロード

RSSリーダーのfeedlyをお使いの場合は以下の手順でインポートできます。

New OPML Import

OPML作成手順

ブラウザ(ChromeやFirefox)で企業一覧のページを開きます。

企業一覧 - 企業技術ブログ

ブログの最終更新日が1年前になるまで下にスクロールしていきます。これで大方の企業一覧を取り出すことができます。
より正確に全件を取り出したい場合はDeveloper ToolのNetworkを開き、都度呼び出されるGraphQL APIのレスポンスのhasNextPageの値がfalseになるまで下にスクロールし続けます。
このあとでDeveloper ToolのConsoleを開いて以下のJavascriptを入力します。なおコード内のXPathはページのレイアウト変更などで変わる可能性がありますので適宜変更していただければと思います。また、const category = “hatena”; の箇所はRSSリーダーにインポートする際のカテゴリー名なので好きな名前に変更していただければと思います。

(function() {
  const category = "Hatena";
  
  const opmlTitle = "Engineering Blogs from Hatena";
  const blogs = $x("/html/body/div/main/div/ul/li/div/div/a").map(e => {
    const title = e.outerText.replace("\n\n", " - ");
    const htmlUrl = e.href;
    return {
      "htmlUrl": htmlUrl,
      "xmlUrl": htmlUrl + "feed",
      "title": title
    };
  });

  let doc = document.implementation.createDocument("", "", null);

  // xml declaration
  const dec = doc.createProcessingInstruction('xml', 'version="1.0" encoding="UTF-8"');
  doc.insertBefore(dec, doc.firstChild);

  // opml
  let opmlElem = doc.createElement("opml");
  opmlElem.setAttribute("version", "1.0");

  // head
  let headElem = doc.createElement("head");
  let titleElem = doc.createElement("title");
  titleElem.innerHTML = opmlTitle;
  headElem.appendChild(titleElem);
  opmlElem.appendChild(headElem);

  // body
  let bodyElem = doc.createElement("body");
  let outlineCategoryElem = doc.createElement("outline");
  outlineCategoryElem.setAttribute("text", category);
  outlineCategoryElem.setAttribute("title", category);
  blogs.forEach(b => {
    let outlineElem = doc.createElement("outline");
    outlineElem.setAttribute("text", b.title);
    outlineElem.setAttribute("type", "rss");
    outlineElem.setAttribute("xmlUrl", b.xmlUrl);
    outlineElem.setAttribute("htmlUrl", b.htmlUrl)
    outlineCategoryElem.appendChild(outlineElem);
  });
  opmlElem.appendChild(outlineCategoryElem);
  
  doc.appendChild(opmlElem);

  let serializer = new XMLSerializer();
  console.log(serializer.serializeToString(doc));
})();

ログにOPML形式の企業一覧が出力されていますのでコピペでテキストエディターに貼り付けてファイル保存してください。

おわりに

はてなの技術ブログの企業一覧ページからURLを抜き取りOPML形式に変換するまでのやり方について書きました。
いま一気に技術ブログを読み始めていますので面白い記事があったらまた紹介しようと思います。ではでは。