締切済み

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

2014/09/16 02:35

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上に表示させるだけでも構いません。もし可能であれば、簡単なサンプルソース等も教えていただけると大変助かります。お手数おかけしますが、よろしくお願い致します。

---yamaori---
お礼率76% (23/30)

HTML
回答数4
ありがとう数9

みんなの回答 （4）
専門家の回答

みんなの回答

tracer
ベストアンサー率41% (255/621)

2014/09/18 02:01 回答No.4

いろいろ方法はありますが、もっとも簡単な方法を紹介します。 PHPが使えることが前提(今どきPHPを使えない環境はかなり珍しい)です。 1. 読み込むテキストファイルを作成します。ここでは読み込みを行う側のHTMLと同じ階層にnews.txtとして保存することを仮定します。 2. 対象HTMLファイルの拡張子を.htmlから.phpに変更します。次に、同ファイル内の読み込みを行いたい箇所に以下を追記します。 <?php include('news.txt');?> 以上です。とても簡単ですよね! 他にもAjaxを使う方法などいろいろありますが、おそらく今回の方法が最も簡単です。

Ogre7077
ベストアンサー率65% (170/258)

2014/09/16 17:01 回答No.3

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: "健康と美容のために食後には一杯の紅茶を" }

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/09/16 08:29 回答No.2

通常は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>