2020年1月21日火曜日

htmlでimportみたいなことってできるんですか？

10:14    No comments

https://teratail.com/questions/235419?campaignid=11c8856bd6
勉強の為にシェアしました。


htmlでimportみたいなことってできるの？

例えば、あるサイトを作ろうとしたときに、phpやhtmlファイルを複数作ったとして、bodyのheaderとfooterは全ページ共通の場合、それぞれのファイルにそれをいちいち書くのは面倒だし、変更も一括でしたいですよね？
そういうときってどのような解決方法がありますか？
phpを使ってechoする方法も考えましたが、なんともスマートでない気がする…
追記：たくさんのご回答ありがとうございます。一ヶ月前ほどにhtmlやcss,phpを学び始めたばかりで何ができて何ができないのか全然わからず、曖昧な質問の仕方になってしまいました、すみません。
html単体でも他の言語のように簡単にimportできるものかと思っていましたが、どうやら難しそうなので、phpのincludeで利用するのが一番自分の想定していた使い方に近かったのでベストアンサーとさせていただきます。

回答 8 件

checkベストアンサー
+5
ぶっちゃけPHP使ってるならinclude文で良いような気がします。
<header>
  <div>site header</div>
</header>
<footer>
  <div>site footer</div>
</footer>
<html>
  ...
  <body>
    <?php include "./header.php"; ?>
    <main>
      <!-- Your page content here -->
    </main>
    <?php include "./footer.php"; ?>
  </body>
</html>
投稿 
frodo821
frodo821
score 280
+4
「HTML Importsってものがあったけど普及前に廃止されたので覚えなくていい」ってことを覚えておく。
もう使えない技術を半端に古い情報に騙されて使い出すのは初心者がやりがちな間違い。
https://developer.mozilla.org/ja/docs/Web/Web_Components/HTML_Imports
https://qiita.com/ka-miyata/items/63e41e4105d7aeb44d6c
2013の情報見ても全く役に立たない。
https://www.html5rocks.com/ja/tutorials/webcomponents/imports/
htmlから別のhtmlを読み込むなんて簡単にできそうなことが実はできない。
一番簡単なのはPHP使う方法なので最初はこれでいい。
PHPでも単純なincludeからWordPressのテーマ、フレームワークと徐々に洗練されていくので自分のレベルに合わせて選ぶ。
投稿 
kawax
kawax
score 5223
+3
JavaScript使っていいならAjaxとか？
参考
（参考サイトはjQuery使ってます）
投稿 
asuchi0819
asuchi0819
score 5201
  • m.ts10806
    m.ts10806

    2020/01/16 12:02
    >「bodyのheaderとfooterは全ページ共通の場合、それぞれのファイルにそれをいちいち書くのは面倒だ」

    →なら可変部分だけechoすればviewは1ファイルで済むじゃない

    が私の回答です。
    スマートだと思ったんだけどなあ(コード量も)
  • asuchi0819

    asuchi0819

    2020/01/16 12:03 編集
    PHPが最もスマートだという私の主観。
  • sodiumplus3

    sodiumplus3

    2020/01/16 15:21
    JavaScriptでもできるんですね、jsに関してはほぼ知識がないので今回はPHPでひとまず実装することにしました。いずれ戻ってきてまた見てみます。
+2
コンテンツをパーツに分けて管理したい要件と読みました。
方法は色々ありますが、出力に静的なものを想定しているのであれば、静的サイトジェネレーターで作成するのがお手軽です。
投稿 
te2ji
te2ji
score 18458
  • sodiumplus3

    sodiumplus3

    2020/01/16 07:20
    その要件であってます。
    管理したいパーツは静的なものです。ツールのようなものに頼らずhtmlのみで実現できないのでしょうか？
    今はphpで長い文字列としてheader部分をまとめて変数に入れておいて、それを各ファイルでechoする、という形で管理していますが…
  • te2ji

    te2ji

    2020/01/16 07:34
    質問のままを回答すると、以下の2点

    SSI
    https://ja.wikipedia.org/wiki/Server_Side_Includes

    Web Components の最近の仕様と開発手法
    https://qiita.com/ka-miyata/items/63e41e4105d7aeb44d6c

    ただし、薦めないです。
+2
PHPでもテンプレート的に組めばいいと思います。
全コントローラーから最後に読み込ませて可変部分だけ渡してそこだけechoすると良いです。
雑な例(動作未確認)
tmp.php
<html> 
<title>hoge[ページ<?=$title?>]</title>
<body>
<p><?=$hello?></p> 
</body>
</html>

a.php
$title='a';
$hello='こんにちは';
require_once 'tmp.php';

b .php
$title='b';
$hello='ニーハオ';
require_once 'tmp.php';

テンプレートエンジン(Smarty,Twigなど)使えばもっとそれっぽく簡潔な記述でできます。
投稿 
編集 
m.ts10806
m.ts10806
ユーザーランキング月間2位
  • sodiumplus3

    sodiumplus3

    2020/01/16 15:15
    同じ構造のページの作成には変数を利用してテンプレート的にやるのが効果的そうですね、ありがとうございます。
  • m.ts10806

    m.ts10806

    2020/01/16 15:21
    frodo821さんの回答との違いをご理解の上でコメントいただいているのでしたら良いのですけど。
+1
以下のHTMLパーツ２つが、それぞれHTMLファイルとして/partsディレクトリ直下にあるとします。
<!-- /parts/header.html -->
<p>ここは、共通ヘッダーです。<a href="/parts/header.html">このhtmlファイル</a>を読み込んで表示しています</p>
<!-- /parts/footer.html -->
<p>ここは、共通フッターです。<a href="/parts/footer.html">このhtmlファイル</a>を読み込んで表示しています</p>

各ページにFilament GroupのScott JehlさんのHTMLインクルード手法を使って、以下のように取り込みます。
<!-- /index.html -->
<!DOCTYPE html>
<html lang="ja">
<head><title>テスト</title></head>
    <body>
        <iframe src="/parts/header.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
        <p>ここは、ページ固有のコンテンツです。</p>
        <iframe src="/parts/footer.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
    </body>
</html>
ブラウザで表示させChromeデベロッパーツールのElementsタブなどで現在のDOM状態を確認すると、以下のようになっていると思います。
<!-- /index.html -->
<!DOCTYPE html>
<html lang="ja">
    <head><title>テスト</title></head>
    <body>
        <p>ここは、共通ヘッダーです。<a href="/parts/header.html">このhtmlファイル</a>を読み込んで表示しています</p>
        <p>ここは、ページ固有のコンテンツです。</p>
        <p>ここは、共通フッターです。<a href="/parts/footer.html">このhtmlファイル</a>を読み込んで表示しています</p>
    </body>
</html>

この手法だとJSがOFFになっていても通常のiframeにフォールバックします。
また共通部分の内容を変えただけで変更がないメインコンテンツ部分のブラウザ側キャッシュが無駄になることもありません。
その他メリット・デメリットについては上で挙げたリンク先の記事をご覧ください。
要件に合うようでしたらご検討ください。
投稿 
shinji709
shinji709
score 507
0
質問者さんが使っているフレームワークは何ですか？ 例えば、ASP.NET ならマスターページという機能があって、やりたいこと (複数ページで共通のヘッダーとフッターを使う) は容易に実現できます。質問者さんが使うフレームワークもしくは開発環境 (オーサリングソフト？) にそう言う機能がないか探してはいかがです？
投稿 
編集 
SurferOnWww
SurferOnWww
ASP.NET総合1位
0
自分もあまり詳しくないのですが、
HTMLだけで完結したいのであれば、
<iframe>タグで似たようなことは可能かと思います。
(正しい使い方かどうかはわかりませんが)
しかし、一般的にはサーバーサイド言語のフレームワーク(Laravelやexpressなど)、その他使っているツール(WordPressなど)の機能で実現するものだと思います。
各フレームワークやツールのドキュメントを読むと、大体そういう機能は載ってると思います。
その機能を主軸としてググりたいなら、「使ってる機能の名前」+「テンプレート」とググると見つかると思います。
「テンプレート」だけだと色んな意味や機能がヒットしてしまうので、このワードが最適解かどうかはわからないです。
もっと適切な探し方を思いつく方がいたら、コメントいただければ幸いです。
投稿 
H40831
H40831
score 685

    0 コメント:

    コメントを投稿