読者です 読者をやめる 読者になる 読者になる
スポンサーリンク

はてなダイアリーに執筆した記事一覧を,表形式に整理するブックマークレット (アーカイブページを,Excelに貼り付けやすく整形加工)

ブックマークレット javascript shortcoding html hatena


はてなダイアリーの「記事一覧(アーカイブ)」のWebページから情報を抽出して,

Excelに貼り付けやすい,「タブ区切りの表形式」に変換してくれるブックマークレット。

javascript:(function(d,T,b,tb,L,U,byCN,arr,i,git,tr,aul,lis,lisin,s,j,sps,as,ad,al){d=window.document;T="getElementsByTagName";b="<br>";tb="&#x0009;";L="length";byCN=function(src,cn){arr=[];for(i=0;i<src[L];i++){if(src[i].className==cn){arr.push(src[i]);}}return%20arr;};git=function(elm){return%20elm.textContent?elm.textContent:elm.innerText;};tr=function(x){return%20x?x.replace(/</g,"%EF%BC%9C").replace(/>/g,"%EF%BC%9E"):"";};aul=byCN(d[T]("ul"),"archives")[0];lis=byCN(aul[T]("li"),"archive%20archive-date");s="";for(j=0;j<lis[L];j++){ad=lis[j][T]("a")[0];lisin=byCN(lis[j][T]("li"),"archive%20archive-section");for(k=0;k<lisin[L];k++){sps=lisin[k][T]("span");if(sps[1])sps[1].parentNode.removeChild(sps[1]);if(sps[0])sps[0].parentNode.removeChild(sps[0]);as=lisin[k][T]("a");al=as[as[L]-1];tt=tr(git(al));if(tt){s+=git(ad)+tb+al.href+tb+tt+b;}}}d.write("<html><body><pre>"+s+"</pre></body></html>");})();void(0);

(※14/5/1, 一日に複数エントリが存在しても抽出できるように修正しました。)

このブックマークレットをブラウザに登録する。

名称は「記事一覧を表形式に変換」とかにする。


そして,自分のはてなダイアリーのブログの,アーカイブのページを開いて,

このブックマークレットを実行する。


※ブログのアーカイブページのURLは,こんなの。
http://d.hatena.ne.jp/language_and_en...


私の場合,2013年に書かれた記事のアーカイブに対して実行してみると,

実行結果のサンプルは,下記のような感じ。

2013-12-29	http://language-and-engineering.hatenablog.jp/entry/20131229/p1	はてブのマイページから,情報を一括して整形・抽出するブックマークレット
2013-12-02	http://language-and-engineering.hatenablog.jp/entry/20131202/CatchCOMeventsOfIEinVBA	Excel VBAでIEを自動操作する際,COMイベントを利用する方法 (WithEventsでブラウザの挙動を細かく把握する)
2013-12-01	http://language-and-engineering.hatenablog.jp/entry/20131201/p1	スマホからブログを更新しやすくなる,ユーザ辞書の登録単語リスト
2013-11-19	http://language-and-engineering.hatenablog.jp/entry/20131119/ElementaryParticlePhysicsNoteLinks	素粒子物理学の講義ノートのリンク集 (大学で配布される教科書やPDF)
2013-11-16	http://language-and-engineering.hatenablog.jp/entry/20131116/BATLoopNumberIncrementByDelayedExpansion	BATのforループで,「0埋めされた数値」を連番で出力しよう (環境変数の遅延展開と,数値の大小比較判定の方法)
2013-11-15	http://language-and-engineering.hatenablog.jp/entry/20131115/UWSCReadCSVSampleCode	UWSCで,CSVファイルの行・列を読み込んで処理するサンプルコード
2013-11-09	http://language-and-engineering.hatenablog.jp/entry/20131109/GenerateImageThumbnailAlbumByExcelVBA	Excel VBAで,フォルダ内の画像ファイルを一括でシートに取り込み,サムネイルのアルバムを自動生成
2013-11-03	http://language-and-engineering.hatenablog.jp/entry/20131103/VietnameseTonesAndAlphabetPronunciation	ベトナム語の6声調と母音・子音の発音を,独学で習得するまとめ
2013-10-28	http://language-and-engineering.hatenablog.jp/entry/20131028/RegExpProgrammingSkillCheck	あなたが正規表現の中級者か判別する10問テスト (文字列処理の必須知識)
2013-10-21	http://language-and-engineering.hatenablog.jp/entry/20131021/p1	東南アジアの「ざっくり地図」を,手書きで描く方法を覚えよう
2013-10-03	http://language-and-engineering.hatenablog.jp/entry/20131003/TaiwaneseChurchRomanizationVowelCharacterWithTone	台湾語のピンイン文字の,コピペ用一覧表 (声調符号付きアルファベットで発音を表記)
2013-09-27	http://language-and-engineering.hatenablog.jp/entry/20130927/FiveBestFavoriteProgrammersIRespect	私が尊敬するプログラマー,5人 (「好みを持つこと」の重要性について)
2013-09-16	http://language-and-engineering.hatenablog.jp/entry/20130916/GenerateCircleGraphAsSummaryOfTableData	Excelで,表データを「要約」した円グラフを作成する方法 (SUMIF関数のワイルドカードで,情報をまとめる)
2013-08-20	http://language-and-engineering.hatenablog.jp/entry/20130820/LatinVerbsConjugateTenseAndAspectSummary	ラテン語の動詞の「時制」をシンプルにまとめた図 (活用語尾を整理した覚え方のコツ)
2013-07-27	http://language-and-engineering.hatenablog.jp/entry/20130727/JapaneseHistorySummaryByCentury	日本史の概要を,100年刻みで「ざっくり把握」する (世紀ごとに歴史を要約したまとめ)
2013-07-13	http://language-and-engineering.hatenablog.jp/entry/20130713/GuitarChordTechniqueLinks	ギターのコード検索・チューニング・弾き方テクニックなどのリンク集
2013-07-09	http://language-and-engineering.hatenablog.jp/entry/20130709/LevelOfFreedomAndLanguageStudy	外国語の勉強時間の,効率的な作り方 (忙しい中でも学習時間を捻出するための時間術)
2013-07-08	http://language-and-engineering.hatenablog.jp/entry/20130708/KoreanAlphabetsVowelAndConsonant	韓国語の文字(ハングル)の覚え方。母音・子音ごとに図解で暗記
2013-07-07	http://language-and-engineering.hatenablog.jp/entry/20130707/KoreanFirstStepPhrases	韓国語(ハングル)で会話するための,最初歩の必須フレーズ
2013-07-03	http://language-and-engineering.hatenablog.jp/entry/20130703/p1	マレーシアの言語「マレー語」で会話するための,最初歩の必須フレーズ
2013-07-02	http://language-and-engineering.hatenablog.jp/entry/20130702/ListOfCommonLanguageBasicPhrases	外国人に出会った時に仲良くなるための,最低限の必須フレーズ集 (どの言語にも当てはまる,基本の初歩会話集のテンプレート)
2013-07-01	http://language-and-engineering.hatenablog.jp/entry/20130701/MalayLanguageHowToCountNumbers	マレー語の数字の数え方を暗記するための一覧表
2013-06-30	http://language-and-engineering.hatenablog.jp/entry/20130630/KoreanCountNumbers	韓国語(ハングル)で,数の「数え方」の覚え方 (漢数詞と固有数詞の記憶法)
2013-06-29	http://language-and-engineering.hatenablog.jp/entry/20130629/UtoAztecanGroupAndYoremnokkiMayoLanguage	南北アメリカ先住民の言語として,ユト・アステカ語族を概観
2013-06-15	http://language-and-engineering.hatenablog.jp/entry/20130615/ChineseExamLicenceGradeFour	中国語検定 4級に合格するためのリンク集 (中検四級のレベルや勉強法)
2013-06-12	http://language-and-engineering.hatenablog.jp/entry/20130612/HowToDrawRoughChinaMap	中国の「ざっくり地図」の書き方を覚えよう (地方区分を概観するための簡略図形)
2013-06-10	http://language-and-engineering.hatenablog.jp/entry/20130610/KoreanLicenseLevelFive	ハングル検定5級に独学で合格するための対策リンク集 (過去問や単語など)
2013-05-24	http://language-and-engineering.hatenablog.jp/entry/20130524/ChineseWordListsOfIT	IT用語を中国語で覚えるための,単語の一覧表へのリンク集 (ピンイン付きのIT用語集)
2013-05-02	http://language-and-engineering.hatenablog.jp/entry/20130502/PatternsOfMSDOSorBAT	開発に役立つ,BATファイルの書き方・パターン集 (コマンドプロンプトの定石を体系的に学び,バッチ中級者になろう)
2013-05-01	http://language-and-engineering.hatenablog.jp/entry/20130501/WinXPLongUse	Windows XPを高速化し,長持ちさせて使い続けるTips
2013-04-17	http://language-and-engineering.hatenablog.jp/entry/20130417/p1	手放せない,便利なブックマークレットのコレクション (翻訳やWeb開発など)
2013-04-16	http://language-and-engineering.hatenablog.jp/entry/20130416/LearnKoreanOnline	韓国語を独学で入門・マスターするためのリンク集 (辞書や自動翻訳など)
2013-04-15	http://language-and-engineering.hatenablog.jp/entry/20130415/CantoneseChineseBasicPhrases	広東語の学習の最初歩,あいさつフレーズ集 (発音とピンイン付き)
2013-04-13	http://language-and-engineering.hatenablog.jp/entry/20130413/LearnAmisLanguageInTaiwan	阿美語(アミ語)を学ぶためのリンク集 (台湾の原住民,アミ族の言語)
2013-04-03	http://language-and-engineering.hatenablog.jp/entry/20130403/LanguagesSpokenInChina	中国の言語を学ぶ
2013-04-02	http://language-and-engineering.hatenablog.jp/entry/20130402/LearnTibetanLanguage	チベット語を学ぶためのリンク集
2013-03-29	http://language-and-engineering.hatenablog.jp/entry/20130329/LearnUyghurLanguageBasics	ウイグル語を独学で学習するためのリンク集
2013-03-28	http://language-and-engineering.hatenablog.jp/entry/20130328/ChineseAndEnglishLicenseTable	「中国語検定」と「英検」のレベルを,級別に比較した一覧表 (学習時間や単語数で,難易度を級ごとに概観)
2013-03-26	http://language-and-engineering.hatenablog.jp/entry/20130326/p1	中国語で,スマホとAndroidについて語ってみよう
2013-03-25	http://language-and-engineering.hatenablog.jp/entry/20130325/LearnZhuangLanguages	チワン語を学ぶためのリンク集 (中国最大の少数民族が話す「壮語」)
2013-03-24	http://language-and-engineering.hatenablog.jp/entry/20130324/ChineseDialectsMinorities	中国語のマイナー方言を概観: ミンの福建語・潮州語・海南語,湘の長沙語,カンの江西語(南昌語)など
2013-03-22	http://language-and-engineering.hatenablog.jp/entry/20130322/CantoneseChinesePinYinOrJyutPingConverter	広東語を,声調付きのピンインに自動変換するサイト (漢字を入力して,発音を知るWebサービスのリンク集)
2013-03-21	http://language-and-engineering.hatenablog.jp/entry/20130321/p1	資格試験等の年間スケジュール (語学やIT関連)
2013-03-20	http://language-and-engineering.hatenablog.jp/entry/20130320/p1	Daft Punkの「Harder, Better, Faster, Stronger」のリミックスを貼り付けるページ
2013-03-19	http://language-and-engineering.hatenablog.jp/entry/20130319/HowToMemorizeWithSmartPhoneEasily	スマホを「暗記帳」や「単語カード」のように使う,もっとも簡単な方法 (使い方と作り方のアイデア)
2013-03-15	http://language-and-engineering.hatenablog.jp/entry/20130315/p1	ミャオ・ヤオ語族の代表として,「ミャオ語」の概要を知る  ※苗(フモン)語の入門
2013-03-14	http://language-and-engineering.hatenablog.jp/entry/20130314/ChinesePinyinSillableTable	中国語のピンインで,表記が紛らわしい母音の発音を間違えないポイント (音節表で全ピンインを一覧し,正しい音声を確認)
2013-03-11	http://language-and-engineering.hatenablog.jp/entry/20130311/HakkaChineseLanguagePronunciationTones	中国語の方言「客家語」の発音の基礎として,声調を覚えよう
2013-03-10	http://language-and-engineering.hatenablog.jp/entry/20130310/ShanghaineseChineseTonesChangeRules	上海語の発音の声調と,声調変化の規則の覚え方 (連続変調の記憶方法)
2013-03-09	http://language-and-engineering.hatenablog.jp/entry/20130309/Linux64BitAndroidDevelopmentEnvironment	Linux上にAndroid開発環境を構築し、実機でテストする手順 (CentOS 6.3 x64にUSBケーブルで端末を接続)
2013-03-08	http://language-and-engineering.hatenablog.jp/entry/20130308/BasicGreetingsInTaiwaneseChinese	台湾語のあいさつなど日常会話フレーズ集 (ピンインと声調,カタカナ付き)
2013-03-07	http://language-and-engineering.hatenablog.jp/entry/20130307/p1	中国・内蒙古自治区でのモンゴル語のポジション (チャハール方言の学習法の概観)
2013-03-04	http://language-and-engineering.hatenablog.jp/entry/20130304/p1	翻訳系の記事 目次
2013-03-03	http://language-and-engineering.hatenablog.jp/entry/20130303/p1	中国語でWeb技術を学ぶ(1)JavaScriptの紹介
2013-03-02	http://language-and-engineering.hatenablog.jp/entry/20130302/AndroidSDKProgrammingAPILinks	Android SDKプログラミング APIリファレンスのリンク集
2013-03-01	http://language-and-engineering.hatenablog.jp/entry/20130301/p1	短時間で最新情報をチェックするための,IT関連のRSSのリンク集 (技術者向けに,フィード購読をおすすめ)
2013-02-23	http://language-and-engineering.hatenablog.jp/entry/20130223/TaiwaneseChineseAndToneChangeRules	台湾語の声調の覚え方と,声調変化の一覧表
2013-02-14	http://language-and-engineering.hatenablog.jp/entry/20130214/DevelopersSummitReport	デブサミ2013 参加レポート
2013-02-03	http://language-and-engineering.hatenablog.jp/entry/20130203/LearnWebTechBasicsInChinese	中国語(簡体字)で,Web技術やプログラミングを学ぶリンク集
2013-01-21	http://language-and-engineering.hatenablog.jp/entry/20130121/UnitTestOfAndroidAppOnEclipse	今から5分で,開発中のAndroidアプリを単体テストしよう (JUnitで自動テストする方法)
2013-01-16	http://language-and-engineering.hatenablog.jp/entry/20130116/AndroidLibraryProjectOnEclipse	Androidでライブラリ・プロジェクトを作成し,Eclipse上でコードを共有しよう
2013-01-11	http://language-and-engineering.hatenablog.jp/entry/20130111/p1	Javaの動かないコード(初級編) メソッド引数の 「参照のコピー渡し」を理解していない
2013-01-07	http://language-and-engineering.hatenablog.jp/entry/20130107/SmartyPHPTemplateEngineIntroduction	今から3分で,Smartyの使い方を覚えよう (PHPテンプレートエンジンの入門)
2013-01-06	http://language-and-engineering.hatenablog.jp/entry/20130106/AntiDepressionMedicinesMemo	私が実際に目にした,利用されている抗うつ剤と,その働くメカニズムに関するメモ
2013-01-05	http://language-and-engineering.hatenablog.jp/entry/20130105/p1	私の趣味,好きな事柄
2013-01-03	http://language-and-engineering.hatenablog.jp/entry/20130103/p1	2012年のトップ記事のまとめ
2013-01-02	http://language-and-engineering.hatenablog.jp/entry/20130102/p1	北京語を使って,中国語の7大方言を学習するためのリンク集(広東語,台湾語,客家語,上海語など)

これなら,Excelなどの表計算ソフトに簡単に貼り付けられる。

そうすれば,各記事についてのアクセス解析や,1年間に執筆した記事の振り返りなどに役立つ。

ブックマークレットのソースコードの解説


JavaScriptのショートコーディングとしての新たなノウハウも,一応含まれている。

(function(d,T,b,tb,L,U,byCN,arr,i,git,tr,aul,lis,s,j,sps,as,ad,al){
	// 短縮名の定義
	d=window.document;
	T="getElementsByTagName";
	b="<br>";
	tb="&#x0009;";
	L="length";

	// ある親要素の内部から,特定のクラス名を持った要素だけを配列として抽出する関数
	byCN=function(src,cn){
		arr=[];
		for(i=0;i<src[L];i++){
			if(src[i].className==cn){
				arr.push(src[i]);
			}
		}
		return arr;
	};

	// innerTextを取得するクロスブラウザな関数
	git=function(elm){
		return elm.textContent ? elm.textContent : elm.innerText;
	};

	// タグ記号をトリムする関数
	tr=function(x){
		return x ? x.replace(/</g,"%EF%BC%9C").replace(/>/g,"%EF%BC%9E") : "";
	};

	// アーカイブ画面から,日付ごとにLI要素を取得
	aul=byCN(d[T]("ul"),"archives")[0];
	lis=byCN(aul[T]("li"),"archive archive-date");

	// 日付ごとに文字列を構築・追加してゆく
	s="";
	for(j=0;j<lis[L];j++){

		// star系の邪魔なリンクを削除
		sps=lis[j][T]("span");
		if(sps[1])
			sps[1].parentNode.removeChild(sps[1]);
		if(sps[0])
			sps[0].parentNode.removeChild(sps[0]);

		as=lis[j][T]("a");
		ad=as[0];
		al=as[as[L]-1];
		tt = tr(git(al));

		if(tt){
			s+=git(ad)+tb+al.href+tb+tt+b;
		}
	}

	// 画面表示
	d.write("<html><body><pre>"+s+"</pre></body></html>");

})();
void(0);

ショートコーディングのツボとしては,

  • 「ある親要素の内部から,特定のクラス名を持った要素だけを配列として抽出する関数」

を定義して,うまくコード量を減らしているところがポイント。

複雑なDOM操作は,共通した手続きとして関数にしてしまうのだ。

ソースコードの可読性も向上する。


ちなみに,HTML上でタブ記号を出力して,半角スペースではなくちゃんとタブとして表示させるためには,preタグを使えばよい。

HTML-LABS : CSS(スタイルシート)解説 - 半角スペース・タブ・改行の表示方法 : white-space
http://www.html-labs.com/css/white-sp...


ブラウザ(HTML)でタブ文字の表示、入力 - Develo.org
http://develo.org/2008/07/13/0203.html


HTMLの特殊文字一覧(&〜) | HTML WEB道
http://web-dou.com/html/t023b.html


特殊文字
http://www.tees.ne.jp/~pokochan/java_...


ぜひ,このブックマークレットを,自分のブログに対しても実行してみよう。

関連する記事:

はてブのマイページから,情報を一括して整形・抽出するブックマークレット
http://language-and-engineering.hatenablog.jp/entry/20131229/p1


JavaScript ショートコーディングの10のコツ (ブックマークレット作成時に重宝するテクニック集)
http://language-and-engineering.hatenablog.jp/entry/20081009/1223469525


手放せない,便利なブックマークレットのコレクション (翻訳やWeb開発など)
http://language-and-engineering.hatenablog.jp/entry/20130417/p1