外部データをhtml上で表示させる方法

Question

HP上で頻繁に更新する部分があるんですが、その部分だけ別のファイルとして更新すれば、自動でhtmlへ反映されるような仕組みはありますでしょうか？

毎回の更新作業が面倒なことと、私以外の人が更新することもあり大変困っています。

どんな方法があるか、また詳しく説明しているサイト等をご存知でしたらご紹介ください。

Dpop · Accepted Answer

Dpop です。

> しかし、CGIの設置しか経験のない私にはそのシステムを作成することは不可能のようです。
> また、既存のものではなく、新たに作成していただく必要があるようです。

そうですね。プログラミングの知識, http の知識の無い方には、少し荷が重いかもしれませんね。

> こういったシステムを代行して作成してくれるサイトはありますでしょうか？
> 個人運営の小さなサイトなのであまり費用がかかるとムリかもしれませんが、ぜひ検討してみたいと思っています。

はい。存在します。
ただし、カスタムCGIの開発は非常に高額です。
開発会社に依頼すると、簡単な物でも独自CGI/PHPの開発は軒並み 10万円～となるでしょう。
弊社の場合、内容にも寄りますが、もう少々頂戴している様です。(営業では無いので、詳しい事は知りません。ごめんなさい。)

ご質問の趣旨とは異なるのですが、簡単な CGI を書いてみました。
このCGIをご利用のサーバーに置いて、試して見て下さい。
このCGIは、まだ荒削りな物ですが、Marmalade_C さんの要望の基本的な部分はクリアしていると思います。

chtml.cgi と、テスト用のページ例を同じフォルダに入れて、
(たとえば、chtmlと言うフォルダを作って、そこに入れるとして。)

http://wwww.savername.com/~username/chtml/chtml. …
http://wwww.savername.com/~username/chtml/chtml. …

などとして見てください。
ただし、ご利用の環境に応じて、

> #!/usr/local/bin/perl

の行は書き換えてご利用下さい。
パーミッションは、755(rwxr-xr-x)を指定して頂ければ良いと思います。
(サーバーによっては、705(rwx---r-x) とする必要があるかもしれません。)

ページの内容が表示されるはずです。

chtml.cgi は、ページ中に(正確には、<body>～</body>の中に)

を発見すると、発見した位置にファイル名の内容を全て展開して、
最後のページの内容として表示する。
と言う動作をしています。

Marmalade_C さんのサイトの場合、固定と部分と、可変部分があると言うことですので、
可変部分に対応する部分に、 指定を書いて頂き、
可変部分を、別ファイルとして保存して頂きます。

可変部分に変更が発生するたびに、 で指定する、
ファイル名を修正して頂ければ、固定部分を修正する事なく、
可変部分のみ修正が可能になります。

可変部分は、通常のHTMLの文法で記述して頂く事が可能なため、
ローカルで表示テストを行ってから、サーバーに組み込めば良いでしょう。

テスト用のページ例を見て頂ければお分かりになると思いますが、
可変部分が複数ある場合でも、可変部分が固定部分と可変部分からなる場合でも、
好きな数, 好きな段数分、別ファイルを取り込んでページを表示する事が可能です。

たとえば、<table>タグは固定部分に置き、その内容部分(の一部分)を可変部分に置く。と言う使い方もできるでしょう。
ただし、ファイルが複数に分割されるため、複雑なタグ構成やCSSの指定方法によっては、意図したい事が旨く表現できない。
と悩む事があるかもしれません。
基本的に、1本のHTMLを分割しているに過ぎませんので、丁寧にデバッグして頂ければ、ミスは発見できると思います。
(chtml.cgiを利用しているからと言って、特別な事はありません。)

今回、 は単純なファイル名指定方式にしましたが、
たとえば、ファイル名の一部に %M と指定すると現在の月に展開する。
など、機能追加をする事も可能です。
たとえば、毎月表の一部が変更になる場合、事前に日付を入れたファイル名で可変部分のHTMLファイルを用意して置いて頂き、
月が変わったら自動的に、その月のファイルを取り込んで表示を行う。などと言うことも可能になるでしょう。
必要でしたら、お申し付け下さい。

chtml.cgi

#!/usr/local/bin/perl
#---------------------------------------------------------------------
#
# chtml.html
#
# リエントラント可能な、HTMLファイル読み込み, 出力の例
# created by Dpop
#
# 使い方
# ○ http://www.なんとか.com/~かんとか/chtml.cgi?page=ページ名
# ○ページは、HTMLの文法で書かれていて、
# ファイル名はなんとか.html である事。
# ○ファイルの中に、
# 
# を発見すると、その位置にかんとか.html の内容を展開します。
# かんとか.html の中に、再度  指定があると、
# そのファイルも展開します。
# ○ファイルは全て、chtml.cgi があるフォルダに置かれている事を
# 想定しています。
# ○(展開するべき全ての)ファイルが見つからないと、
# ページが存在しない。というエラーを表示します。
# ○page= パラメータの指定が無いと、
# ページ指定がありません。というエラーを表示します。
# ○chtml.cgiは、ページ内容を全て日本語EUC で表示しようとします。
# 都合が悪ければ、Jcode::convert(\$work, "euc"); の euc を
# sjis などに修正してください。
#
#---------------------------------------------------------------------
use CGI;
use Jcode;
use strict;

my($cgi, %in, $cu, @buff);

$cgi = new CGI;
$in{'page'} = $cgi->param('page');
if ($in{'page'} eq "") {
&error();
}

@buff = ();
$cu = 0;
&getpage($in{'page'}, $cu, \@buff);
&disppage(@buff);
exit(0);

sub getpage {
my($page, $cu, $buff) = @_;
my($IN);
open($IN, $page) or &error($page. " は存在しません。");
while(<$IN>) {
chop;
if ($_ =~ m/^$/i) {
$cu++;
&getpage($1, $cu, $buff);
$cu--;
}
else {
if (($cu == 0) ||
(($cu > 0) && (m/^<body.*>$/i .. m/^<\/body>$/i)
&& ($_ !~ m/^<body.*>$/i))) {
push(@{$buff}, $_);
}
}
}
close($IN);
}

sub disppage {
my(@buff) = @_;
my($work);

print "Content-Type: text/html\n\n";
foreach $work (@buff) {
Jcode::convert(\$work, "euc");
print $work. "\n";
}
}

sub error {
my($err) = @_;
my($work);
$err = ($err eq "") ? "ページ指定がありません。" : $err;
$work =<< "END_HTML";
<html>
<head>
<title>chtml.cgi : $err</title>
</head>
<body>
<center>
エラーが発生しました : $err
</center>
</body>
</html>
END_HTML

&disppage(split(/\n/, $work));
exit(0);
}

テスト用ページ

page1.html

<html>
<head>
<title>page1</title>
</head>
<body>

page1 
単純に表示してみる。

</body>
</html>

page2-1.html

<html>
<head>
<title>page2-1</title>
</head>
<body>

page2-1 
単純に表示してみる。



ここは、page2-1です。



ここは、page2-1です。

</body>
</html>

page2-2.html

<html>
<head>
<title>page2-2</title>
</head>
<body>

page2-2 
取り込みできているかな?

</body>
</html>

page2-3.html

<html>
<head>
<title>page2-3</title>
</head>
<body>

page2-3 
取り込みできているかな?



ここはpage2-3です。

</body>
</html>

page2-3-1.html

<html>
<head>
<title>page2-3-1</title>
</head>
<body>

page2-3-1 
取り込みできているかな?

</body>
</html>

不明点があれば、再度質問してください。

page1
単純に表示してみる。

page2-1.html page2-1

page2-1
単純に表示してみる。

ここは、page2-1です。

page2-2.html page2-2

page2-2
取り込みできているかな?

page2-3.html page2-3

page2-3
取り込みできているかな?

ここはpage2-3です。

page2-3-1.html page2-3-1

page2-3-1
取り込みできているかな?

不明点があれば、再度質問してください。

Dpop · Answer

Dpopです。まず、専用システムではなく、汎用システムとして組んでいるため、目的を完全自動化、またはそれに近い状況にする事は難しいと思います。現在の作業を、少しでも簡単にする事ができる。と言う程度にお考え頂ければと思います。 > > とすると、page2-2.htmlのページで表示されるもの全て読み込みますよね。はい。その通りです。 > 例えば、page2-2.htmlにいくつかの表を書き込んでいて、その表をそれぞれ別のページに読み込む、といったことが可能でしょうか。 > 専門的な言葉がわからないので、上手に説明できませんが・・・で指定する時に、「page2-2.htmlのここからここまでを読み込む」といった方法があるか聞きたかったのです。なるほど理解できました。「専門的な言葉」と言っても、この機能はここ数日で僕がでっち上げた物なので、専門的もなにも無いのですけどね(^^;) 解決のために、提案と相談があります。提案 page2-2.html上にあるいくつかのテーブルを、別々のファイルに記録して置くと言う事ではダメでしょうか? 具体的には、表1～表10まであったとして、page2-2-1.html, page2-2-2.html・・・の様に、表ごとのファイルを作ると言う方法ではダメでしょうか? 表をそれぞれのファイルに記述して頂けると、現在公開している chtml.cgi の機能だけで十分に対応できると思います。表が変更になった際、その表を読み込んでいるファイルの @include 指示を変更する事で対応可能です。 chtml.cgi を作ってから、「これは、汎用的に利用できるスクリプトだな。。。」と思い、いくつか機能拡張をしたのですが、その一つに、と記述すると、%m を現在の月に置き換え、2月なら table_a_02.html と言うファイルを参照すると言う機能を組み込みました。また、%なんとかによる変換を行った場合、該当ファイルが存在しないと、その展開指示は無視される。と言う機能を組み込みました。もし、その表が月単位に変わるものであれば、この機能と複数ファイルへの分割により、作業が簡素化される事に繋がると思います。この様な使い方(%による展開を含めて)では対応できないでしょうか? また、%による展開機能により対応可能な場合、どの様な展開機能があれば、都合が良いでしょうか? 示して頂いた機能を全て盛り込めるかどうかは、不明ですが、確認させて頂きたいと思います。相談ファイルの一部分を読み込むためには、プログラムがその部分を判断できる仕組みが必要になります。そのため、たとえばファイルの中に、開始マーク, 終了マークを挿入して頂く。と言う事は可能でしょうか? 具体的には、表が書かれているファイルの中に、次の様な開始マーク, 終了マークを事前に挿入して、ファイルを作成して頂きます。 ≪省略≫

≪省略≫

このファイルを読み込む指定で、の様に、読み込みたいブロック名を指定すると、tablepage.html の中の、@st table1 ～ @ed table1 の範囲のみを展開する。と言う事は可能だと思います。 ※ただし、@st, @ed など、指定方法については適当に書いただけで、この様なインターフェースになるとお約束する物ではありません。

Dpop · Answer

Dpopです。

> についてなんですが、html自体を読み込む以外にページ内の一部分を読み込ませることは出来ないでしょうか。

HTML以外に、「ページ内の一部分」と言うのはどう言う意味でしょうか？
テキストファイルの一部分を読み込ませる。と言う意図でしょうか？
他の、サーバー上のページの一部分の様な意図でしょうか？

> html自体を読み込む以外に

と言う部分で、なにを読みたいのか。

> ページ内の一部分を

と言う部分で、「一部分」とはなにを指しているのか。
明確にして頂けないでしょうか。

Dpop · Answer

Dpop です。で取り込んだページの、を取り払うのを忘れていました。スクリプト本体は、こちらをご利用下さい。なお、このスクリプト中で、CGI.pm, Jcode.pm と言うものを利用しています。 CGI.pm は多分、ご利用のサーバーにもあるとは思いますが、 Jcode.pm は無い可能性があります。 http://openlab.jp/Jcode/Jcode.pm から、Jcode.pm をダウンロードして、chtml.cgi と同じフォルダに入れてください。パーミッションはput時のままで問題ありません。(通常は 644(rw-r--r--)に成っていると思います。) 失礼しました。 chtml.cgi #!/usr/local/bin/perl #--------------------------------------------------------------------- # # chtml.html # # リエントラント可能な、HTMLファイル読み込み, 出力の例 # created by Dpop # # 使い方 # ○ http://www.なんとか.com/~かんとか/chtml.cgi?page=ページ名 # ○ページは、HTMLの文法で書かれていて、 # ファイル名はなんとか.html である事。 # ○ファイルの中に、 # # を発見すると、その位置にかんとか.html の内容を展開します。 # かんとか.html の中に、再度指定があると、 # そのファイルも展開します。 # ○ファイルは全て、chtml.cgi があるフォルダに置かれている事を # 想定しています。 # ○(展開するべき全ての)ファイルが見つからないと、 # ページが存在しない。というエラーを表示します。 # ○page= パラメータの指定が無いと、 # ページ指定がありません。というエラーを表示します。 # ○chtml.cgiは、ページ内容を全て日本語EUC で表示しようとします。 # 都合が悪ければ、Jcode::convert(\$work, "euc"); の euc を # sjis などに修正してください。 # #--------------------------------------------------------------------- use CGI; use Jcode; use strict; my($cgi, %in, $cu, @buff); $cgi = new CGI; $in{'page'} = $cgi->param('page'); if ($in{'page'} eq "") { &error(); } @buff = (); $cu = 0; &getpage($in{'page'}, $cu, \@buff); &disppage(@buff); exit(0); sub getpage { my($page, $cu, $buff) = @_; my($IN); open($IN, $page) or &error($page. " は存在しません。"); while(<$IN>) { chop; if ($_ =~ m/^$/i) { $cu++; &getpage($1, $cu, $buff); $cu--; } else { if (($cu == 0) || (($cu > 0) && (m/^$/i .. m/^$/i) && ($_ !~ m/^$/i) && ($_ !~ m/^$/i))) { push(@{$buff}, $_); } } } close($IN); } sub disppage { my(@buff) = @_; my($work); print "Content-Type: text/html "; foreach $work (@buff) { Jcode::convert(\$work, "euc"); print $work. " "; } } sub error { my($err) = @_; my($work); $err = ($err eq "") ? "ページ指定がありません。" : $err; $work =<<"END_HTML"; chtml.cgi : $err エラーが発生しました : $err END_HTML &disppage(split(/ /, $work)); exit(0); } 不明点があれば、再度ご質問下さい。

Dpop · Answer

Dpopです。

> PHPやperlの使用が可能なサーバーなので、そのあたりを検討してみたいと思います。

そうですね。合理的な選択です。


> インラインフレームに関してはすでに使用しております。
> エクセルファイルで更新しwebページ保存しているのですが、元のデータも更新しなければいけない為に通常の保存も必要になり、少々面倒です。
> （xls保存し忘れた場合等、特に面倒になると思います。）

xlsファイルを直接読み込むと言うのは難しいのですが、csvファイルとして保存して頂ける形式であれば、
csvファイルを読み込んで、そこから表を生成するスクリプトを作成する事も難しい事ではありません。
その様な方法を検討されると良い様な気がします。


> 注文フォームで商品を選択すると、単価と在庫、代金の合計金額などが自動で読み込まれたのですが、それと同じようなシステムでしょうか？

注文フォームの場合、商品データをどの様に管理するのか、注文フォームの入力結果をどの様に利用するのか。
など、別の問題もあるので、「同じ」と考えるのは少し乱暴ですが、
静的HTMLではなく、プログラムによって動的にHTMLを生成するという意味では同様です。


> そちらも興味があるのですが、例えば1つのデータをcgiやhtmlで共有し、連動させることが可能なのでしょうか。

HTMLと言うのは、静的HTMLの事ですよね?
静的HTMLは人間が、HTMLソースを作って挙げる必要があるため、CGIとデータを共有するためには、
人間の手作業が入るという意味になってしまい、CGIを用いる意図が分らなくなります。

例えば、Excelなどでデータを作成し、csvファイル化しておいて、それをCGIやPHPを利用し、
加工して動的HTMLを生成し、利用者に見せるという事は可能です。

また、CGIにより、動的HTMLを生成させ、それをブラウジングするのではなく、
HTMLファイルを出力させて、現在のHTMLファイルに置き換えてしまう。と言う方法もあります。
BlogなどSNSはこの手法を利用しています。
ただし、HTMLファイルを生成する時、そのHTMLファイルが参照されていると都合が悪いので、
ファイルロックなどを用いて、生成する。などの配慮が必要になります。


不明点があれば、再度質問してください。

Dpop · Answer

Web屋です。OkWebの様なサイトを設計, 構築する仕事をしています。 HTMLの盲点と言える問題ですね。HTML標準では外部ファイルの取り込みは基本的できません。そのページがどの様な使われ方をしているのか。によって、攻め方が変わります。特定のブラウザや、ある一定のバージョン以上のブラウザに依存しても構わない。ページ印刷が、見た目通りでなくても構わない。と言う事であれば、 #1, #2 さんの示されている、インラインフレーム（）が簡単な方法で、 HTMLの機能で、外部ファイルを取り込む方法でもあります。ただし、前に書いた制限が付いていることを理解する必要があります。 #3さんの示されている、JavaScript(JScript)やVBScriptを利用した外部ファイルの取り込み方法は、個人のページで良く利用される方法です。セキュリティー対策のため、JavaScript を OFF にしている利用者が多い昨今、僕らの世界では、JavaScriptなど外部スクリプトに頼る方法は極力利用しません。この方法を利用する場合には、ページの目立つ場所に「当サイトは、JavaScriptを利用しています。」などのメッセージを明記する必要があるでしょう。ただし、セキュリティー問題が社会問題化している今、その様な表記をする事が企業として適当かは、経営者判断が必要となるでしょう。ご利用のサーバーが、PHPやPerl(CGI)が利用できる環境があるのであれば、 #4 さんの示される通り PHP や、Perl の HTML::Template モジュールを利用して、ページの一部を外部ファイル化する方法が、手軽で効率が良いです。弊社では、HTML::Template を利用する方法を推奨しています。理由は、PHPの場合 PHP ソース自体を修正する必要があるのに対して、 HTML::Template では、取り込みファイルを修正すれば良いため、一般の利用者(Marmalade_C 様の様な方)が、プログラムコードを修正してしまって、動作がおかしくなる。と言う事を避けやすくなるためです。ただし、HTML::Template は Perl の開発経験を持っていないと、利用できない可能性が高いため、全て、自前で行おうということがあれば、リスクを理解した上で PHP を利用する方法は非常に良い方法といえます。もう一つ方法があります。プログラムの力を借りて、ローカルPC上で複数のファイルから静的HTML を作成してしまう方法です。 Blog などの SNS がやっている事を、自前でやってしまおう。と言う方法です。テンプレートを用意して頂いて、プログラムにそのテンプレートを読み込ませると、 HTMLを生成してくれるというものです。ご利用のPCに、Active Perlをインストールして頂けば、簡単なスクリプトで、静的HTML作成を利用する事が可能になります。不明点があれば、また質問してください。

partita · Answer

＞自動でhtmlへ反映されるような仕組

思い切ってPHPなどは？
うちの会社では、自社専用ログインページを作り、Web上で更新できるようにしています。素人でも更新できます。

もしくは、IE限定でテキストファイルを読み込む方法もあります。が、説明が長くなるのでMarmalade_Cさんの返事を待ちましょう。

todo36 · Answer

外部javascriptファイルで

document.write("頻繁に更新する部分");

non-chan1234 · Answer

インラインフレーム（）がおすすめですね。ただしNetscapeはVer6以上でしか表示されませんので注意してください。参考URLにリファレンスが載っていますので見てみてくださいね参考URL：http://www.htmq.com/html/iframe.shtml

urazen-sie · Answer

インラインフレームを使ってみてはどうでしょうか？

外部データをhtml上で表示させる方法

Dpop です。

Dpopです。

Dpopです。

この回答への補足

Dpop です。

この回答への補足

Dpopです。

この回答への補足

Web屋です。

この回答への補足

＞自動でhtmlへ反映されるような仕組

外部javascriptファイルで

インラインフレーム（<IFRAME></IFRAME>）がおすすめですね。

インラインフレームを使ってみてはどうでしょうか？

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング