• 締切済み

HTMLファイルに外部HTMLファイルを読み込ませる方法

Webサイトのページをフレームで左右に分けて作成しています。 (ちなみに左がmenu.htmlで右がmain.html) このmain.htmlにmenu.htmlの入るスペース現在の場所に作り、現在使っているmenu.htmlをそのまま読み込ませられる方法を探しています。 実は、menu.htmlをmenu.phpとし、menu.htmlの表示させたい場所に <?php include('menu.php'); ?> として表示しようとしたのですが、menu.phpにはJava Scriptが幾つも使われているので表示できませんでした。 そこでphpファイルにJava Scriptを表示させる方法を調べて、外部JSを作ってそれを読み込ませる方法があるらしいのですが、この外部JSの作り方が良く分からず困ってしまいました。 よって、menu.phpとして読み込ませる方法以外にmenu.htmlのまま読み込ませる方法を探し、幾つか試してみたのですが表示できません。 どんな方法でも良いので、どなたか知っていましたら教えていただけないでしょうか? 宜しくお願い致します。 また、あまり説明が上手くないのでどこまで理解して頂けたか少々不安です。申し訳ありません。 分からない場合は追記いたしますので聞いて下さい。 宜しくお願い致します。

みんなの回答

回答No.8

少し読み込めて来ました(汗) index.phpはそのままにして頂き、読み込むテンプレートをtop.tplにしていただけますか? そして、現在使用しているmain.htmlをmain.tplに、そしてmenu.htmlをmenu.tplに変更して下さい。 先ず最初に、top.tplはindex.phpにアクセスした時に表示されるテンプレートになる訳ですが、top.tpl内にて今まで使用していたhtml(tpl)を使用します。 top.tpl内のタグは以下の通りに、 <html> <head> </head> <body> <div id="contener"> <div id="left"> {include file="menu.tpl"} </div> <div id="main"> {include file="main.tpl"} </div> </div> </body></html> また、外部CSSを想定してCSSでは簡単にこんな感じで如何でしょうか? div#contener { width:; ←menu.tplとmain.tplの横幅の合計+10px margin: 0; padding: 0; } div#menu { width:; ←menu.tplの横幅の合計+5px margin:; padding: 0 5px 0 0; float: left; } div#main { width:; ←main.tplの横幅の合計+5px margin: 0; padding: 0 0 0 5px; float: right; } 上記でどうでしょうか? ちなみに、参考URLのサイトではSmartyを使用してサイトを制作している様子を確認できます。

参考URL:
http://www.food-factory.biz/
RRHH
質問者

補足

>index.phpはそのままにして頂き、読み込むテンプレートをtop.tplにしていただけますか? >そして、現在使用しているmain.htmlをmain.tplに、そしてmenu.htmlをmenu.tplに変更して下さい。 これですと、トップページ以外の他のhtmlファイルも全てテンプレートファイルを作る事になるようですので少々面倒です。 また、説明するのに複雑になるようだったのでmenuとmainのみとして説明しておりましたが 実際には、ヘッターやフッターなどもあるので、この通りに作る事は無理があるようです。 CSSまで考えて頂いたのにすみませんでした。 いろいろ考えましたが、JavaScriptを使わずにmenu.phpを作り、当初の方法にした方がいいかもと考えています。 本当に長々と有難うございました。

回答No.7

何もエラーが表示されないとなると、基本的にはSmartyを含むテンプレートはきちんと読み込まれているとなりますが、おかしいですね(汗) 下記の、 ------- 引 用 -------------------------------------------------- ちなみにindex.phpにある内容だけが表示され、sample.tplを表示させたい場所には何も変化なしといった具合です。 sample.tplについては、ちゃんと表示されているのでファイルが壊れているわけでもアップに失敗したわけでも無いようです。 ------------------------------------------------------------------ 上記にてindex.phpにある内容だけが表示されると言うのはどういう事でしょうか? 今回の例で行くと、index.phpにアクセスした際に表示されるものはsample.tplの内容のみです。 あと参考までにサーバはレンタルサーバでしょうか?それとも自サバでしょうか? 逆質問になり申し訳ありませんがお願いします。

RRHH
質問者

補足

>上記にてindex.phpにある内容だけが表示されると言うのはどういう事でしょうか? >今回の例で行くと、index.phpにアクセスした際に表示されるものはsample.tplの内容のみです。 最終的に私の希望する形は、現在のmain.htmlをindex.htmlとし、その左側に外部ファイルとしてmenu.html(ファイルの種類はhtmlでなくても良い)を読み込ませたいので今回のテスト用サンプルはindex.htmlをindex.phpとしmain.htmlで表示されている部分をそのまま残してみました。 ですが、 >index.phpにアクセスした際に表示されるものはsample.tplの内容のみです。 との事ですので、index.phpはindex.htmlに戻しsample.tplを表示するphpを新たにsample.phpとしてsample.phpでsample.tplを読み込み、index.htmlでsample.phpを読み込むようにしました。 ですが、やはり結果は同じでした。 >あと参考までにサーバはレンタルサーバでしょうか?それとも自サバでしょうか? サーバーは、レンタルサーバーです。 それから、前回 「いままで/home/public_html/にアップするという事が無かったので分からないのですが、このディレクトリは普通ではいじれないものなのでしょうか?」 と質問してしまいましたが、アップする事が無かったのは、/home/public_html/ではなく、一つ上の階層/home/にでした。 間違えてすみません。宜しくお願い致します。

回答No.6

--- 引用 ------------------------------------------------------ /home/Smarty/libs/ ←【libs】フォルダのみを設置しました /home/public_html/ ←HP公開データのindex.phpを設置しました /home/public_html/Smarty_tpl/ ←フォルダ名をSarty_tplとしました  そして /home/public_html/Smarty_tpl/内に以下のフォルダを作り ・cache ←空 ・configs ←空 ・templates ←取り込み用のsample.tplを設置しました ・templates_c ←空 -------------------------------------------------------------- 上記の設定で行くと、/home/public_html/index.phpでの内容は、 <?php define("SMARTY_DIR","/home/Smarty/libs/"); require_once(SMARTY_DIR."Smarty.class.php"); $smarty = new Smarty(); $smarty->template_dir = './Smarty_tpl/templates/'; $smarty->compile_dir = './Smarty_tpl/templates_c/'; $smarty->config_dir = './Smarty_tpl/configs/'; $smarty->cache_dir = './Smarty_tpl/cache/'; $smarty->display('sample.tpl'); ?> となります。 現在の設定では、Smartyの呼び出しに関してrequire_once('Smarty.class.php');となっておりますが、正確にはrequire_once('../Smarty/libs/Smarty.class.php');となりますので現状で表示するときに何かのエラーは表示されませんでしょうか? ちなみに、require_once('../Smarty/libs/Smarty.class.php');の設定でも間違いではありませんが 表示する.phpファイルごとに設定Smartyまでの階層を指定しなければならず面倒なので今回は以下の様に、 define("SMARTY_DIR","/home/Smarty/libs/"); と予めSmarty本体へのパスを設定し、 require_once(SMARTY_DIR."Smarty.class.php"); と各ファイルからのSmartyへのパスとして設定します。 この2行を全ての表示する.phpファイルに書き込むことによって「../」とか記入しなくても済むので楽だと思います。 $smarty = new Smarty();以下、 $smarty->template_dir = './Smarty_tpl/templates/'; $smarty->compile_dir = './Smarty_tpl/templates_c/'; $smarty->config_dir = './Smarty_tpl/configs/'; $smarty->cache_dir = './Smarty_tpl/cache/'; は、設置するindex.phpからのパスになります。 $smarty->display('sample.tpl'); は、表示したい.tplファイルになりますが、 $smarty->template_dir = './Smarty_tpl/templates/'; でテンプレ-トまでのパスを設定しているのでファイル名だけ記入すれば大丈夫です。 これで、もう一度試していただけませんか?

RRHH
質問者

補足

試してみましたが、やはり結果は同じで駄目でした。 index.phpに <?php require_once('../Smarty/libs/Smarty.class.php'); $smarty = new Smarty(); $smarty->template_dir = './Smarty_tpl/templates/'; $smarty->compile_dir = './Smarty_tpl/templates_c/'; $smarty->config_dir = './Smarty_tpl/configs/'; $smarty->cache_dir = './Smarty_tpl/cache/'; $smarty->display('sample.tpl'); ?> にしても <?php define("SMARTY_DIR","/home/Smarty/libs/"); require_once(SMARTY_DIR."Smarty.class.php"); $smarty = new Smarty(); $smarty->template_dir = './Smarty_tpl/templates/'; $smarty->compile_dir = './Smarty_tpl/templates_c/'; $smarty->config_dir = './Smarty_tpl/configs/'; $smarty->cache_dir = './Smarty_tpl/cache/'; $smarty->display('sample.tpl'); ?> にしても結果は同じです。 ちなみにindex.phpにある内容だけが表示され、sample.tplを表示させたい場所には何も変化なしといった具合です。 sample.tplについては、ちゃんと表示されているのでファイルが壊れているわけでもアップに失敗したわけでも無いようです。 また、 >現在の設定では、Smartyの呼び出しに関してrequire_once('Smarty.class.php');となっておりますが、 >正確にはrequire_once('../Smarty/libs/Smarty.class.php');となりますので現状で表示するときに何かのエラーは表示されませんでしょうか? こちらですが、前回の間違えている設定でもエラーメッセージは出ていません。 もしかしてサーバー内のアクセス権とかそういったもののせいなのでしょうか? いままで/home/public_html/にアップするという事が無かったので分からないのですが、このディレクトリは普通ではいじれないものなのでしょうか? 何度も質問しちゃって申し訳ありません。宜しくお願い致します。

回答No.5

サイトの構造がわからないのであくまでも憶測のアドバイスとなりますが、SmartyをDLした場合、RRHHさんの言う通り全てのファイルは使用しません。 必要なのは、基本的に【libs】フォルダのみです。 設置階層としては以下のような構図に… /home/Smarty/libs/ ←Smarty本体 /home/public_html/ ←HP公開データ /home/public_html/data/ ←Smartyのテンプレート収納場所 と上記のような感じで設置します。 ※Smarty本体は出きるだけ公開エリア外に設置し一般のユーザーからアクセスできない場所へ設置して下さい。 ※public_htmlはご利用のサーバにより名前が違います。 ※dataは任意の名前で構いません。 そして/home/public_html/data/内に手動で以下のフォルダを作ります。 ・cache ・configs ・templates ・templates_c ※cache、configs、templates_cフォルダ内は空で構いません。 後は、templatesフォルダ内に各ページで表示するテンプレートファイルを収納する訳となります。 ここまでがもう出来てるとは思いますが全般的な設置に関するご説明です。 -- 引 用 ----------------------------------------- サンプル通りに作り全てのSmartyファイルと作ったファイルもサンプルのディレクトリと同じようにアップすれば上手く行くのですが、ディレクトリの場所を変えてしまうと上手くいきません。 ディレクトリは変更前のままでアップしなくてはならないので困っています。 ----------------------------------------------------- 上記の意味が良く理解できないので上手く説明できないかもしれませんが、ディレクトリとは今公開しているホームページのHTMLファイルのディレクトリと理解して宜しいでしょうか? それであれば現行の各ディレクトリはそのままで、例えばsampleと言うディレクトリにtest1.htmlと言うファイルがあるとします。 であればsampleディレクトリ内にtest.phpを作り、test.phpにてSmartyに対しての指示を出せばそのままのディレクトリでページの公開が可能かと思います。 test.phpは簡単に説明すると表示する為のファイルであり実際の表示するデータは/home/public_html/data/templates/内にあります。 今まで使用していたHTMLファイルはtemplatesフォルダ内に移動し、拡張子が.htmlであれば全て.tplに変更しテンプレートとして使用すれば済むと思うのですが、ご理解頂けますでしょうか?

RRHH
質問者

補足

細かく教えてくださって有難うございます。 ですが、何故か上手くいきません。 教えて頂いた通り、 /home/Smarty/libs/ ←【libs】フォルダのみを設置しました /home/public_html/ ←HP公開データのindex.phpを設置しました /home/public_html/Smarty_tpl/ ←フォルダ名をSarty_tplとしました  そして /home/public_html/Smarty_tpl/内に以下のフォルダを作り ・cache ←空 ・configs ←空 ・templates ←取り込み用のsample.tplを設置しました ・templates_c ←空 次にindex.php内のsample.tplを表示させたい場所に <?php require_once('Smarty.class.php'); $smarty = new Smarty(); $smarty->template_dir = 'Smarty_tpl/templates/'; $smarty->compile_dir = 'Smarty_tpl/templates_c/'; $smarty->config_dir = 'Smarty_tpl/configs/'; $smarty->cache_dir = 'Smarty_tpl/cache/'; $smarty->display('Smarty_tpl/templates/sample.tpl'); ?> と入力したのですが、↑ここの指定が間違えているのでしょうか? 本当に素人な質問ですみません。宜しくお願い致します。

回答No.4

一言でSmartyと言っても完璧に使いこなす訳でなければ簡単だと思います。 要するにSmartyの機能をフルに使いこなすのではなく、今回はSmartyの機能を一部利用してサイトを作ると言った感じに捕らえてみては如何でしょうか? 参考サイト↓ http://www.phpbook.jp/smarty/ インストールと言ってもサーバにSmartyのファイルをFTPでアップロードし使用します。 更に簡易的に説明を加えると、表示するページは全て***.phpとなり、***.phpファイル内で表示したいテンプレートを指定するような感じになります。 今回の場合は、今まで制作した.htmlを全てSmartyのテンプレートファイル[ ***.tpl ]に替え、テンプレートファイル内でそれぞれ指示する感じになります。 私も最初は小難しく考えてましたが使うと以外に便利で今後のサイト制作に一役買うと実感しました。 先ずは参考サイトをご覧下さい。

参考URL:
http://www.phpbook.jp/smarty/
RRHH
質問者

補足

お返事遅くなり申し訳ありません。 実は、教えていただいたサイトからSmartyをダウンロードしたのですが、あまりにファイルの量が多くて戸惑いました。 まさかこのファイル全てを今回の作業に使うとも思えず、出来たら不要なファイルはアップせずに済ませたいと思ったのですが上手くいきません。 また、サンプル通りに作り全てのSmartyファイルと作ったファイルもサンプルのディレクトリと同じようにアップすれば上手く行くのですが、ディレクトリの場所を変えてしまうと上手くいきません。 ディレクトリは変更前のままでアップしなくてはならないので困っています。他に違う方法は無いでしょうか?それとも諦めるしかないのでしょうか?

  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.3

No2の書いてるiframeの他にはobjectでもできるよ

RRHH
質問者

補足

objectでは、どうもテキストデータのみが表示されてしまうようなので無理みたいです。 私の使い方が間違えているようでしたらすみません。

  • eroermine
  • ベストアンサー率18% (83/444)
回答No.2

<iframe src=menu.html> 携帯用の記述 </iframe>

RRHH
質問者

補足

この方法では、表示したい場所に小窓のように表示されるみたいですね。 へこんでいるように見えるのも少々気になります。 よって、今回私が望んでいるものとは違うみたいです。 でも、この方法も何かに使えそうですので、その内使わせて頂きます。 有難うございます。

回答No.1

解決策となるかわかりませんが、PHPが使えるのであればSmartyを使用しては如何ですか? ※ 以下、私が説明を理解していないようでしたら申し訳ありません。 上記の説明を見る限りでは現在左右に分けたフレームサイトを一つのページにまとめると言う事で宜しいでしょうか? そしてその際に左側に分けていたフレーム(menu.html)をそのまま新規のページのレイアウト的に左側に表示をしたいと言う事でしょうか? そうであれば、Smartyの利用をおすすめします。 一昔で言うSSI的な表現が安易に可能な上に、簡単にフレームワークなサイトができると思います。 ちなみに説明文でPHPページを利用しているとの事でしたのでSmartyを使えるものと思われます。 参考になるかは不明ですが、現在のページを全て作り直す(修正する)よりは短時間で効率良く済むと思います。

RRHH
質問者

補足

その通り一つのファイルにまとめたいのです。 その際にmenu.htmlをそのまま表示したいというわけです。 ちゃんと伝わったようで嬉しいです。 しかし、回答のSmartyを使う件ですが、私にはPHPの知識は殆どありません。 menu.htmlをmenu.phpにしたと言ってもプログラムが含まれているわけではありません。 ただ<html></html>を外して <? echo <<< HTML HTML; ?> で囲っただけです。(その他のいらないタグは削除しています。) Smartyについても調べてみたのですが、この程度の知識の私にはなかなか難しい限りです。 出来ましたら、どのように設定するのかこちらで細かく教えて頂けないでしょうか? 私も説明やサンプルの載っているサイトを引き続き探してみますが、もしそうゆうサイトをご存知でしたら教えて頂けないでしょうか? 宜しくお願い致します。

関連するQ&A