何某日和

「カメラ」のち「ハンダゴテ」ところにより「プログラミング」 ── そんな私“かめきち”のウェブサイト

作業ログ閲覧・検索アプリ「WeeklyAllViewer」【JavaScript】

概要

テキストの見出し閲覧や複数条件検索を可能にする

 私は、日々の業務内容をテキストファイルとして記録しています。しかし、何十〜何百もの作業ログが1つのテキストファイルに蓄積されているだけで、検索もやりづらく、活用に至っていません。 この問題を解消するため、ある一定のフォーマットで記述しているテキストファイル(ここでは「作業ログ」)の見出し閲覧や複数条件検索を可能にするアプリケーションを拵えました。

WeeklyAllViewer

(1)作業ログの吸い出し

 以下のボタンを押下すると作業ログを吸い出します。

(2)見出し閲覧/検索

 検索キーワードを指定して[Search]を押下してください。空欄の場合は全件表示します。(正規表現で書いてください)
キーワード欄をダブルクリックすると否定キーワードを指定できます。

(3)一覧表示

 ここに検索結果が表示されます。

技術的なこと

仕様

 JavaScriptで動作します。ローカルに保存すればスタンドアロンPCで利用可能です。ただし、GoogleChromeはローカル非対応です。
またIEの場合は、HTMLソースのコメントタグ「saved from url」のURLを保存先のローカルパス(file:///C:/Users/...)に変更し、かつ、metaタグ(X-UA-Compatible)のコメントアウトを外してください。 あるいは、下記のzipアーカイブを解凍して使用してください。(こちらの場合はmetaタグ削除は不要です。)

 IEで動作しない場合、headタグ内に下記のタグを挿入してください。[6]

<meta content="IE=9.000" http-equiv="X-UA-Compatible">

リソース

 ソースコードと作業ログ(サンプル)とzipアーカイブを公開しています。

開発履歴

2013.11.26:未実装です!!!
2013.11.29:目次表示に対応しました。内容表示と検索処理はまた後日。
2014.01.16:Ajax仕様に変更。検索できるようになりました。キーワード欄を増やせるようにする予定です。(Chromeのローカル非対応)
2014.01.18:IE/ローカルで動作するように対処しました。キーワード欄増減対応済み。職場で使ってみます。
2014.05.31:作業タイトル押下によるトグル表示、ボタン配置変更、検索結果のリスト表示に対応。
2014.06.01:作業ナンバーのリンク化、否定検索(キーワード欄をダブルクリック)に対応。職場で感じた不満はこれで解消されるはず。

経緯(言い訳)

 当初は、2013年11月中の完成を目指していました。テキストエリアに作業ログを貼り付け、解析・検索を実現しようと考えていました。 しかし、作業ログが多すぎたためか、テキストエリアに貼り付ける段階でウェブブラウザが落ちてしまいます。実装の方針を再検討する必要が生じました。(ここで一度鋭気を失いました(笑))
 2014年1月に鋭気を取り戻したので、Ajaxでローカルファイルを吸い出そうと試みましたが、GoogleChromeでは対応できませんでした。(クロスドメインの問題[1]
 HTML5のAPI「FileReader」の利用を考えるも、いちいちファイルを選択する必要があるため好きではありませんでした。[2]
 上記の迷走を踏まえ、「職場ではChromeを使わないから」という理由で、Ajaxによるローカルファイル吸い出しを採用することにしました。が、いざ職場で試してみるとIEでも同じ理由で動作しませんでした。(クロスドメインの問題)
 ローカルに保存したhtmlファイルの上部には「saved from url」というコメントタグが付記されますが、調べたところ、このタグの 中にあるURLをローカルのURLに置換し、XMLHttpRequestのオブジェクトをActiveXObject("Microsoft.XMLHTTP")にすれば動作すると判明。[3] この対応により、IEでAjaxを用いたローカルファイル吸い出しは成功しました。が、今度はJavaScriptのString.split()の挙動が異なるために動作しませんでした。(正規表現のキャプチャがIEでは機能しないらしい)[4] さらに、String.replace()のgオプションもIEでは動作しないらしいのです。[5]
 いや、ちょっと待って、動作しなかったのはローカル版のみで、Webサーバ版は正しく動作したはず... ひょっとして、そこにも違いが... と疑って試行錯誤してみたところ、 IEのドキュメント互換モードという機能が働いていたために、想定の挙動が得られなかったのでした。Webサーバ版では「IE9標準」、ローカル版では「Quirksモード」になっていました。 metaタグ(X-UA-Compatible)でドキュメント互換モード「IE9標準」を指定し、想定の挙動を得ることが出来ました。[6]

こんなに迷走するとは...。


[1] ローカルのHTMLファイルからどこまで読み取れるか選手権 2011 http://subtech.g.hatena.ne.jp/mala/comment?date=20110425

[2] JavaScript でのローカル ファイルの読み込み - HTML5 Rocks http://www.html5rocks.com/ja/tutorials/file/dndfiles/

[3] IEのローカルファイルをXHRでどこまで読みとらせるか - 葉っぱ日記 http://d.hatena.ne.jp/hasegawayosuke/20110426/p1

[4] unwind-protect: javascript の split のキャプチャが動かない...らしい http://saltyduck.blog12.fc2.com/blog-entry-26.html

[5] Javascript/String.replaceメソッド - 俺の基地 http://yakinikunotare.boo.jp/orebase/index.php?Javascript%2FString.replace%A5%E1%A5%BD%A5%C3%A5%C9

[6] ドキュメント互換性の定義 http://msdn.microsoft.com/ja-jp/library/ie/cc288325(v=vs.85).aspx