- 締切済み
htmlでテキストファイルの中身を自動で表示したい
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)
いろいろ方法はありますが、もっとも簡単な方法を紹介します。 PHPが使えることが前提(今どきPHPを使えない環境はかなり珍しい)です。 1. 読み込むテキストファイルを作成します。 ここでは読み込みを行う側のHTMLと同じ階層にnews.txtとして保存することを仮定します。 2. 対象HTMLファイルの拡張子を.htmlから.phpに変更します。 次に、同ファイル内の読み込みを行いたい箇所に以下を追記します。 <?php include('news.txt');?> 以上です。 とても簡単ですよね! 他にもAjaxを使う方法などいろいろありますが、おそらく今回の方法が最も簡単です。
- Ogre7077
- ベストアンサー率65% (170/258)
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)
通常は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> <!--#include file="news.html" --> ＿＿＿<p><!--#config timefmt="%x" --><!--#flastmod file="news.html" --></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>
- nerimaok
- ベストアンサー率34% (1125/3220)
SSIくらいは今時のサーバーならば機能は有るでしょう。 http://www.tohoho-web.com/wwwssi.htm
関連するQ&A
- テキストボックス
テキストボックスを作成したのですが、更新用にしたいので文字を打てないようにしたいのですが、苦難しています。 どなたか、教えてください。 <head> <style type="text/css"> <!-- body { scrollbar-arrow-color:#000000; scrollbar-face-color:#90eeaa; scrollbar-highlight-color:#ffffff; scrollbar-3dlight-color:#000000; scrollbar-track-color:#ffffff; scrollbar-shadow-color:#000000; scrollbar-darkshadow-color:#ffffff; } textarea { scrollbar-arrow-color:transparent; scrollbar-face-color:transparent; scrollbar-highlight-color:transparent; scrollbar-3dlight-color:transparent; scrollbar-track-color:transparent; scrollbar-shadow-color:transparent; scrollbar-darkshadow-color:transparent; } --> </style></head> <body> <FORM> <TEXTAREA rows="3" cols="70">
- ベストアンサー
- HTML
- テキストファイルの改行の変換
テキストファイルの改行の変換で困っています。 下記がNotepadで開いたテキストファイルの中身の一部なのですが・・・・ -------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">↑<html lang="ja">↑<head>↑<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">↑<META HTTP-EQUIV="Content-Style-Type" content="text/css">↑<STYLE TYPE="text/css">↑<!--↑body,tr,td,th { font-size:10pt }↑a:hover { color:#DD0000 }↑small { font-size:9pt }↑-->↑</STYLE>↑・・・・<更に大量のデータが続く> -------------------------------- "↑"が改行を表しているようなのですが、このままだとEXCELに取り込む際に全体を一行として取り込んでしまうため、不具合が生じてしまいます。
- ベストアンサー
- その他（プログラミング・開発）
- 外部ファイルにするとテキストが書き込めない
こんにちは、javascript初心者です。 HTMLのtextarea内のテキストを変えたいのですが、HTMLにJSを埋め込むと動作するのですが、外部JSファイル読み込みだとなぜか何も表示されません。 なぜでしょうか。原因のわかる方、説明をどうかよろしくお願い致します。 ●HTML <head> <script src="test.js" type="text/javascript"></script> </head> <body> <form name="form1"> <textarea name="message" id="msg" rows="5" cols ="50"></textarea> </form> </body> ●JS window.onload = message(); function message(){ alert("hello"); //←これはちゃんと動作します。 document.getElementById("msg").value="hello"; //← 動作せず。 document.form1.message.value="hello"; //← これも上と同じく片方ずつ試しましたが、ダメでした。 }
- 締切済み
- JavaScript
- テキストファイルの中身について
あるフォルダしたのテキストファイルとそのファルダしたのフォルダ中のテキストファイルについて、 例えば、”日本”と言う文字が有ったら、そのテキストファイル名を表示するようなの機能を実現したいです。 何を使ったら、いいですか？ サンプルが欲しいです。 教えてください！お願いします。 ーーーーーーーーーーーーー temp-------a.txt |------b.txt |------temp1 |--------a1.txt |--------b1.txt … などなど、 テキストファイルの中身に、”日本”という文字が存在したら、そのテキストファイル名を出力 ーーーーーーーーーーーーー
- ベストアンサー
- その他（プログラミング・開発）
- HTML内にTEXTファイルを表示させる方法
現在、HTML・CSSでHPを制作しています。 HTMLファイル内に、サーバ上に設置された別のtextファイルを指定(URLを記述)し、そのファイルのテキストを表示させたいのですが、そのようなことができましたら教えてください。 (イメージとしては、インフレーム内にtextファイルを引っ張ってくる) 因みに用途としては、会社のHPに使用します。 トップページに表示させる『更新履歴』の内容のみを他の社員達が自由に編集する為、更新履歴のテキストのみのファイルを別に設置したいのです。 制作環境はIE7、ユーザに関しては把握しきれないので様々なブラウザに対応できるものを希望。 よろしくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
- C# テキストファイルの中身のみを削除
テキストファイルの中身（内容）だけを削除したいのですが... フォルダやファイルを削除するのはできます。 しかし、中身（内容）のみを削除するにはどうしたらよいかわからずにいます。 教えていただけませんか?? お願いします。
- 締切済み
- C・C++・C#
- テキストボックスが、縦長になる
このokwaveの質問テキストボックスのようなテキストボックスを作りたいです。 パソコンだけの利用です。スマホ対応は不要です。以下のようなcgiを書きました。 textarea{ のwidtを増やしたり、col=を増やしたりしていますが、横幅が狭いままで、縦長のテキストボックスになります。 どうすればよろしいでしょうか？ <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style type="text/css"> textarea { width 1000ptx; height 40em; } </style> </head> <form action="insert_data.cgi" method="post"> <input type="hidden" name="mode" value="display_data"> Data text<br> <textarea name="data_text" value="" col="1000" rows="50"></textarea> <input type="submit" value="SUBMIT" style="font-size:x-large;" /> </form>
- ベストアンサー
- CGI
- テキストやリンクの表示・非表示
Javascriptでテキストやリンクの表示や非表示をできるようにしたいです。 基本はテキストやリンクを非表示にして、”表示”リンクを表示させ、 ”表示”リンクをクリックすると、テキストと”非表示”リンクを表示させます。 しかし下のソースで実行をすると 最初、”表示”リンクのみ表示→”表示”リンクをクリック 次、テキストと”非表示”リンクを表示→”非表示”リンクをクリック 次、全て非表示 と、なってしまい、再度表示させることができなくなってしまいます。 よい解決方法があったら教えてください。 よろしくお願いします。 ========================================================== <html> <head> <title>表示・非表示テスト２</title> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script language="javascript"> <!--// var typ; var typ2; function setDisplay(typ,typ2){ document.getElementById("myText").style.display = typ; document.getElementById("myText2").style.display = typ2; } //--> </script> </head> <body> <DIV ID="myText" style="display:none"> Display Sample<br> <a href="javascript:setDisplay('none','blcok');">非表示</a><br> </DIV> <br> <DIV ID="myText2"> <a href="javascript:setDisplay('block','none');">表示</a><br> </DIV> <br> </body> </html>
- ベストアンサー
- JavaScript
- テキストエリアをリアルタイムに表示したい
こんにちは。 下記のテキストエリア部分をフォーム内に入れると、リアルタイムに表示されません。リアルタイムに表示させようと思うとどうすればよいのでしょうか？ いろいろ試しては見るのですが、まだ勉強不足で思うように表現できませんでした。 わがままを言って申し訳ありませんが、どうかお力添えをお願い致します。<html> <head> <script language="javascript"> function myFunc() { dispArea.innerHTML = sourceArea.value; } var defaultStr = "<h1>hello</h1>\n<p>ここを書き換えると下の表示も変化します。</p><button onclick=\"alert('Hi')\">TEST</button>\n<hr>" </script> </head> <body onload="sourceArea.value=defaultStr;myFunc()"> <h2>HTML編集をリアルタイムに反映させる例</h2> <hr> <textarea name="form1" id="sourceArea" style="width:450px;height:200px;" onkeyup="myFunc()"> </textarea> <div id="dispArea" style="width:450px;height:200px;"> </div> </body> </html>
- ベストアンサー
- JavaScript
- テキストエリアの表示文字
result の中身を以下のようにして、テキストエリアで表示させようと思いました。 結果は、表示はされるのですが、データとデータの間に数行の改行が入って表示されてしまいます。 <c:forEach item="${result}"> <textarea><c:out value="${result}"></textarea> </c:forEach> <textarea>、<c:out value="${result}">、</textarea>の位置を変えたりしてみたのですが、結果は同じでした。 同じ方法で、セレクトボックスには改行なく期待通りに表示されたので、テキストエリアでもできると思ったのですが・・・ アドバイスよろしくお願いします。
- ベストアンサー
- HTML
