htmlでテキストファイルの中身を自動で表示したい

締切済

質問者：---yamaori---
質問日時：2014/09/16 02:35
回答数：4件

htmlの中で、ユーザへのお知らせ欄を設けたいと考えています。
その際、以下のようにtextareaの中に内容を直書きする方法ですと、
内容が変わる度に毎回htmlファイル自体の更新が必要となってしまうため、
更新する方々にとってメンテナンス性が悪くなってしまうことを懸念しております。

--------------------
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url("global.css");
</style>
<title>お知らせ</title>
</head>
<body>

<textarea rows="5" cols="150" readonly>
■お知らせ■
・あいうえお１２３４５ＡＢＣＤＥ
・かきくけこ６７８９０ＦＧＨＩＪ

</textarea>

</body>
</html>
--------------------

対処として、お知らせの内容をテキストファイル（例：announce.txt）に記載し、
html側でそのテキストファイルの内容を読み込んで表示するようにできれば、
そのテキストファイルを入れ替えるだけで内容を更新できるのではないか・・・
と考えております。
※お知らせ内容の表示の最新化（ユーザ側）は、リアルタイムで行うのは難しいので、
　 F5等でhtmlの表示を更新したタイミングで反映できれば良いと判断しております。

textareaにテキストファイルの内容を表示する方法について調べてみたところ、
「参照」ボタンをクリックして表示するテキストファイルを選択する、というような
動的な方法はネットでも事例が見つかりました。

しかし、今回のように管理者がhtmlと同じフォルダに置いたテキストファイルの中身を
自動的にhtmlに表示させる方法については、事例が見つけられませんでした。
知識不足で申し訳ありませんが、htmlでテキストファイルを読み込んで中身を自動で
表示する方法があるようでしたらご教授下さい。textareaでは実現できない場合は、
textareaを使用せずにhtml上に表示させるだけでも構いません。
もし可能であれば、簡単なサンプルソース等も教えていただけると大変助かります。

お手数おかけしますが、よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： tracer
回答日時：2014/09/18 02:01

いろいろ方法はありますが、もっとも簡単な方法を紹介します。

PHPが使えることが前提(今どきPHPを使えない環境はかなり珍しい)です。

1.
読み込むテキストファイルを作成します。
ここでは読み込みを行う側のHTMLと同じ階層にnews.txtとして保存することを仮定します。

2.
対象HTMLファイルの拡張子を.htmlから.phpに変更します。
次に、同ファイル内の読み込みを行いたい箇所に以下を追記します。

<?php include('news.txt');?>

以上です。
とても簡単ですよね!
他にもAjaxを使う方法などいろいろありますが、おそらく今回の方法が最も簡単です。

- 1
- 件

通報する

この回答へのお礼

ありがとうございました。参考にさせて頂きます。

通報する

お礼日時：2016/09/06 09:26

No.3

回答者： Ogre7077
回答日時：2014/09/16 17:01

SSIなりCGIなりで処理するのが真っ当でしょうが

真っ当ではない方法もあります

IE8 未満では動作しないので注意

<!DOCTYPE html>
<meta charset=utf-8>
<link rel=stylesheet href=./notice.css>
<div class=notice><p>お知らせ</p></div>

-- notice.css
@charset "UTF-8";
*.notice:after { content: "健康と美容のために食後には一杯の紅茶を" }

- 4
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2014/09/16 08:29

通常はSSI-Server Side Includes(

http://ja.wikipedia.org/wiki/Server_Side_Includes )。とても古く古典的で枯れた技法を使うのが一般的です。
　古くからの技術なので情報は山ほどある。

★タブは＿に置換してあるので戻す。
★拡張子.htmlをSSIとして動作させるには、.htaccessで
XBitHack on
　このHTML(例:index.html)だけは、パーミッションを744としておく
　他にも
AddType text/html .shtml .html
AddOutputFilter INCLUDES .shtml .html
　として.shtml,.htmlすべてをSSIとして解釈させる方法もある。

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="ORUKA1951">
<style media="screen">

</style>
</head>
<body>
＿<header>
＿＿<h1 id="title">Your title</h1>
＿＿<aside>

＿＿＿<p></p>
＿＿</aside>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="#">Some</a></li>
＿＿＿＿<li><a href="#">navigation</a></li>
＿＿＿＿<li><a href="#">links</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<h2>A smaller heading</h2>
＿＿<p>
＿＿</p>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿</footer>
</body>
</html>

[news.html]
＿＿＿<h3>お知らせ</h3>
＿＿＿<ul>
＿＿＿＿<li>あいうえお１２３４５ＡＢＣＤＥ</li>
＿＿＿＿<li>かきくけこ６７８９０ＦＧＨＩＪ</li>
＿＿＿</ul>

結果的に
<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="ORUKA1951">
<style media="screen">

</style>
</head>
<body>
＿<header>
＿＿<h1 id="title">Your title</h1>
＿＿<aside>
＿＿＿<h3>お知らせ</h3>
＿＿＿<ul>
＿＿＿＿<li>あいうえお１２３４５ＡＢＣＤＥ</li>
＿＿＿＿<li>かきくけこ６７８９０ＦＧＨＩＪ</li>
＿＿＿</ul>
＿＿＿<p>10/30/14</p>
＿＿</aside>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="#">Some</a></li>
＿＿＿＿<li><a href="#">navigation</a></li>
＿＿＿＿<li><a href="#">links</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<h2>A smaller heading</h2>
＿＿<p>
＿＿</p>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿</footer>
</body>
</html>