こんにちは、雨ですね。今年は日本で全国ツアーをする台風が多い気がする。気がする、というか、実際に多いんじゃないの。
最近は忙しいのだけれど、なぜかブログを更新する時間だけは取れなくもないので、色々書いてみてます。たまには世の中の役に立つことを書いてみようかと。
さて、webサイト開発を始めたばかりの方なんか、こんなことをしたいと思ったことはないでしょうか？
データベースを使わずにフォームが作りたい！
このような問題が出るのは例えば次のような時です。
・誰か「個人のために」本人が更新できるサイトを作ってみたい
・スマホからサイトを更新したい
まぁ、こういうときって往々にしてありますよね。ありますよね？ない？あるよね！！
ということで今日は、実際に僕が友人のために制作したサイトで使っている、フォームの裏技的なものをご紹介します。今のところ、同じ方法でやってる人見たことない。今回は、あるサイトを既に持っていて、テキスト部分などを外部のフォームで入力することで更新できるような仕組みを紹介します。
1.更新したいテキスト部分を選ぶ
まずはこれ。更新したいテキスト部分のコードが仮に、
<p>このテキストは更新できるよ！</p>
<p>こっちのテキストも更新できるよ！</p>
となっていたとします。まずはこの部分を、
<p><script type=”text/javascript”>
document.write(rewritable_text1);
</script></p>
<p><script type=”text/javascript”>
document.write(rewritable_text2);
</script></p>
なんて書き換えておきます。rewritable_textの部分は自分の好きな変数名で。この時ついでに、更新したいページの<head>内で、
<script src=”js/drive.js”></script>
という一行を足しておいてください。後でjsフォルダ内にdrive.jsというファイルを作成します。というか、生成されます。後述。
2.フォームと受取ファイルを別ファイルで作る
form.phpとregist.phpというファイルを同じ階層に作成します。form.phpのコードはこんな感じ。
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>フォーム</title>
</head>
<body>
<form action=”regist.php” method=”post”>
書き換え内容1：<br>
<input type=”text” name=”text_get1″ size=”100″ /><br>
書き換え内容2：<br>
<input type=”text” name=”text_get2″ size=”100″ /><br>
<input type=”submit” value=”登録する” />
</form>
</body>
</html>
この↑ファイルはただの登録フォームで、regist.phpに情報を送るだけです。てかform.phpに関していえば別にphpじゃなくてhtmlファイルでも問題ありません。そして記入欄の名前、ここではtext_getとしてますが、この辺は統一性が取れていればなんでもOKです。次はregist.phpを作成し、以下のように記述します。
<?php file_put_contents(“js/drive.js”, ‘rewritable_text1=”‘.$_POST[“text_get1″].'”;’.”\n”); ?>
<?php file_put_contents(“js/drive.js”, ‘rewritable_text2=”‘.$_POST[“text_get2″].'”;’.”\n”,FILE_APPEND); ?>
<!DOCTYPE html>
<html>
<body>
<div>
<a href=”index.html”>サイトが変わったか確かめよう！</a>
</div>
</body>
</html>
これ↑のphp部分はいったい何をしているかというと、phpのfile_put_contentsという関数について調べてみればわかりますが、ここでは、jsフォルダの直下にdrive.jsというファイルを作成し、その中に
rewritable_text1=”書き換え後の文章1″;
rewritable_text2=”書き換え後の文章2″;
と記述する作業を示しています。ここで一番のポイントは、「フォームで登録ボタンを押すと、自動的にjsフォルダにdrive.jsというファイルが生成される」ということです。既にdrive.jsが存在する場合は上書きされます。これで作業は終わり。
後は実際にサイトを確認して、変わっているかどうかを試してみるだけです。セキュリティ的に心配ならば、フォームは別階層において.htaccessか何かでアクセス制限をかけておきましょう。
やり方が正攻法でないうえに、初心者感にあふれているというかツッコミどころ満載のコードですが、案外ちゃんと動きます。このやり方を真似する人が本当にいるのであれば、セキュリティに気を付けてやってくださいね。おわり。
