【HTML】JavaScriptでテキストデータをファイルとしてローカルに保存。

えー乙です。

パチスロの小役カウンタをkotlin化すべく、なんとなぁく挑戦していましたが機種データを作成させるツールを作りたくなったんですねｗ　んで作成する上でお金を掛けずに無料で作れないか思案した結果、一応HTMLでブラウザで作成してみようと思いました。

が！

やってみるとこれがスゲェめんどくさかった！

まぁHTML自体詳しいワケがないのでグーグルさんでいろいろと調べましたら、まぁ大変でしたね。入力用の画面構成なんかは事細かくレイアウトするにはちょっと大変でしたが、わりと順調に出来ました。いまのところ壁にぶつかったのが入力したデータ内容のファイル化です。

調べてみるとそのへんはJavaScriptのFile APIを使用するようなのですが・・・これも結構めんどくさかったｗ　サンプルコードがいろいろと開示されているんですが、中々やりたいことに合わないというかなんというか・・・　　(´Д｀)ﾊｧ…

１日費やして索敵＋コードの実行をトライ＆エラーして頭痛して来たんで一旦作業を停止して不貞寝して頭をクリアにしたらちょっと閃きましたｗｗｗ

参考サイトをもとに指定したテキストデータをファイル化するサンプルコードでしたが、こちらがやりたいことはブラウザからテキストをタイプした内容をファイル化したいので、そのサンプルコードをもとに変更したのが下記になります。

下記サンプルコードをコピペしてファイル名を「test1.html」とし、ファイル保存時はかならず文字コード：UTF-8で保存してくださいね！

結構、UTF-8で保存することを忘れやすいので注意が必要です！！　htmlはUTF-8でないとブラウザに喰わしても実行出来ないのでご注意を！　自分がやらかしましたんでｗｗｗ

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSSセレクタのスタイルが適用される優先順位について</title>

<script type="text/javascript">
function handleDownload() {
  <!--　サンプルコードのここをコメントアウト
  var content = 'あいうえお';
  var blob = new Blob([ content ], { "type" : "text/plain" });
  -->
  var content = document.getElementById("input").value;
  var blob = new Blob([ content ], { "type" : "text/plain" });

  if (window.navigator.msSaveBlob) { 
    window.navigator.msSaveBlob(blob, "test.txt"); 

    // msSaveOrOpenBlobの場合はファイルを保存せずに開ける
    window.navigator.msSaveOrOpenBlob(blob, "test.txt"); 
  } else {
    document.getElementById("download").href = window.URL.createObjectURL(blob);
  }
}
</script>

</head>
<body>
<!-- ここに本文を記述 -->
<p>ローカルファイルに保存テスト</p>
<p style="margin-bottom:5em;"></p>
<textarea id="input" cols="40" rows="5"></textarea><br>
<p style="margin-bottom:2em;"></p>
<a id="download" href="#" download="test.txt" onclick="handleDownload()">ダウンロード</a>


</body>

んで15行目の「var content = document.getElementById(“input”).value;」部分が、ブラウザのテキストエリアで入力した内容を取り込む部分になります。

このサンプルコードをローカルからブラウザで開くと・・・