HTMLでローカルのテキストファイルを読み込む方法についてです。
これめちゃくちゃハマったのでメモに残しておきます。
結論、HTMLでローカルファイルを読み込むのは無理（笑）。
なので今回は代替案を考えてみた。
先に言っておきますが、絶対に今回の代替案を普段のシステム開発で使用しないようにお願いします。
使用する場合は自己責任でお願いします。
代替案の前に自分がやろうとしている内容を書いてみる。
ちょっと自分用のアプリとしてローカルで動作する想定（サーバーで動かさない）の簡単なWebアプリを
HTMLとJavaScriptを使用して作成していた時、ローカルのテキストファイルに設定的なものを持たせたくなった。
まあ、こういうのってローカルのHTMLとJavaScriptだけでなく、ちゃんとWebサーバーとデータベース使えば楽なんだけど、
そこまでやるほどでもないなあって感じ。
んで、そのテキストファイルの中身は単純な行毎の設定ではなく、改行を含む文章的なものも持たせたいと考えていました。
使いたいブラウザはChrome。
ちなみに読み込もうとすると、Access-Control-Allow-Origin エラーになる。
自分の要件としては、自分がローカル上でだけ使うだけなのでセキュリティ要件はない。
つまりノーガードでOK。
なぜ無理なのか。
ローカルのファイルでは、XMLHttpRequestができないため。
ネットで調べた時の解決策としては、
①File APIを使用。
自分でファイルを選択して、アップロードして読み込むというもの。
いやいや、毎回その手間はやりたくないので却下。
アップロード操作しないで読み込みたいです。
②Google Chrome の実行ファイル「chrome.exe」のショートカットファイルを作成し、リンク先の最後に次のオプションを追加。
んー自分だけが使いたいだけならこれでもいいいか。。？
しかし、環境いじると他の開発で問題起こりそうなので却下。
③WEBサーバーを利用
いや、サーバーわざわざ立てたくないので却下。
④object要素を利用
HTML上にファイル内容を表示するだけなら、これでもいい。
ただ、object要素から内容を読み込むのは難しそうなので却下。
⑤iframe要素を利用
これもHTML上にファイル内容を表示するだけなら、これでもいい。
ただ、同じように内容を読み込むのは難しそうなので却下。
⑥どこかのサーバーにアップロードして、そこから読み込む
設定ファイルをわざわざ外に配置するとか面倒なので却下。
ということで打つ手がなくなりました。
はい、やっと代替案についてです。
HTML内にコメントとして改行を含む文章を記載して、JavaScriptでコメント内容を読み込む。
まず、HTML内に下記のような記述を追加。
<div id = "setting"> <!-- ここに設定1 ここに設定2 文章とか 文章とか 文章とか --> <div>
// コメントを取得する。
// コメントを格納する変数を初期化
var comment_text = "";
// ノード一覧を取得
var comment_content = document.getElementById('setting');
var comment_nodes = Array.prototype.slice.call(comment_content.childNodes);
// nodeTypeが8のものを抽出
var comments_all = comment_nodes.filter(function(node) {
return node.nodeType === 8;
});
//取得
comments_all.map(function(node) {
comment_text = node.data;
});うん、力業（笑）。
そして、セキュリティ０。
このやり方のいいところお手軽なのと改行のある文章を扱えるところ。
普段のシステム開発でこの代替案を行わないようにお願いします。
当サイトは責任は負いません。
使用する場合は自己責任でお願いします。
