JavaScriptとPHPを用いてテキストの入出力を行うプログラムについて解説する。HTMLでは textareaタグ で編集を行う。また、XMLHttpRequestによる通信を行い、ページの更新はしないようにする。
テキストを編集するエディタコントロールは以下のようになっているとする。
<textarea id="idData" name="comment" cols="80" rows="40"></textarea>Load()によって、読み込まれるようにする。data.txtを読み込む。
<script>function Load(){ var c = new XMLHttpRequest(); c.open("GET", "data.txt", true); c.send(null); c.onload = function () { if (c.status === 200) { document.getElementById("idData").innerHTML = c.responseText; } };}</script>保存にはsaver.phpにアクセスする。引数textに本文を代入する。改行は<br>に置き換えておく。
function Save(){ var c = new XMLHttpRequest(); c.onreadystatechange = function(){ if (c.readyState == 4 && c.status == 200) { } } var t = document.getElementById("idData").value.split('\n'); t = t.join('<br>'); c.open("get", "saver.php?text=" + t, true); c.send(null);}次に、saver.phpを示す。置き換えた<br>を戻す。
<?php if (isset($_GET["text"])) { $t = preg_split("/<br>/", $_GET["text"]); $t = implode("\n", $t); file_put_contents("data.txt", $t); }?>file_put_contentsで保存する。
ここからはおまけ。
ファイル名はdata.txtで固定だったが、ファイル名を設定できるようにする。以下のHTMLタグを用意する。
<label for="id">名前</label><input type="text" id="idName" name="id" placeholder="" value="" size="6">読み込み関数Loadは「c.open("GET", "data.txt", true);」の第2引数を変更する。
c.open("GET", document.getElementById('idName').value, true);保存関数Saveも同様「c.open("get", "saver.php?text=" + t, true);」の第2引数を変更する。HTML引数にfilename
c.open("get", "saver.php?text=" + t + "&filename=" + document.getElementById('idName').value, true);saver.phpはfile_put_contents関数を変更する。
file_put_contents($_GET["filename"], $t);読み込みの際、先頭行と末尾行を取り除くコードを示す。
var text = c.responseText; { var st = text.split('\n'); st.shift(); st.pop(); text = st.join('\n'); }保存の際、先頭行と末尾行を追加するコードを示す。先頭では「var texts = [」を、末尾では「];」を追加する。
var t = document.getElementById("idData").innerHTML.split('\n'); { t.unshift("var texts = ["); t.push("];"); } t = t.join('<br>');