php で javascript、css を読み込む為の html タグを作る

かしこ 41views 更新:2016年10月28日

タイトル通り。

★ 2016/11/01 : 微修正

■ index.php

メインとなるページです。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="content-language" content="ja">
        <?php
        include_once('./index/init_html.php') ;
        ?>
        <title>動作確認用</title>
    </head>
    <body>
    </body>
</html>

■ include_file_class.php

実際に html タグを作ってる処理です。

<?php
abstract class include_file_class
{
    const CN_REP_STR   = '%path%' ;

    public function __construct()
    {
        /** コンストラクタ */
    }

    /**
     * 外部ファイル読み込み処理:抽象メソッド
     * @param $read_urls => 読み込むファイルの url を格納した配列
     */
    protected abstract function include_file(array $read_urls) ;

    /**
     * 外部ファイル読み込み用 html タグ生成
     * @param $read_urls => 読み込むファイルの url を格納した配列
     * @param $rep_tag   => html タグの形式
     * @return $return_tags => 生成された html タグ
     */
    protected function create_tag(array $read_urls, $rep_tag)
    {
        $return_tags = '' ;
        foreach($read_urls AS $key => $val)
        {
            if(!empty($val) && is_file($val) !== false)
            {
                /** キャッシュ無効化 */
                $val .= '?ver='.filemtime($val) ;
                /** $rep_tag の該当箇所を置換する */
                $return_tags .= str_replace(self::CN_REP_STR, $val, $rep_tag).PHP_EOL ;
            }
        }
        return $return_tags ;
    }
}

final class include_css extends include_file_class
{
    /** css の読み込み */
    const CN_REP_TAG  = '<link rel="stylesheet" href="'.self::CN_REP_STR.'" />' ;

    public function __construct()
    {
        parent::__construct() ;
    }

    /**
     * css ファイル読み込みタグ生成
     * @param $read_urls => 読み込む css の url を格納した配列
     * @return => 生成された html タグ
     * @override
     */
    public function include_file(array $read_urls)
    {
        return $this->create_tag($read_urls, self::CN_REP_TAG) ;
    }
}

final class include_js extends include_file_class
{
    /** javascript の読み込み */
    const CN_REP_TAG  = '<script type="text/javascript" src="'.self::CN_REP_STR.'" charset="UTF-8"></script>' ;

    public function __construct()
    {
        parent::__construct() ;
    }

    /**
     * js ファイル読み込みタグ生成
     * @param $read_urls => 読み込む js の url を格納した配列
     * @return => 生成された html タグ
     * @override
     */
    public function include_file(array $read_urls)
    {
        return $this->create_tag($read_urls, self::CN_REP_TAG) ;
    }
}

■ init_html.php

index.php から呼ばれて include_file_class.php を実際に読み込んでる処理です。

<?php
include_once('include_file_class.php') ;
$include_css = new include_css() ;
$include_js  = new include_js() ;
/** 読み込むファイルもここで設定 */
$css_urls    = [
      './css/common.css'
] ;
$js_urls     = [
      './js/library/jquery/3.1.1/jquery.min.js'
    , './js/self/common.js'
] ;
/** 出力 */
echo $include_css->include_file($css_urls) ;
echo $include_js->include_file($js_urls) ;

■ common.css

css 動作確認用。文字色を変えるだけの css かよ!!

@charset "UTF-8" ;
#font_red
{
    color : #FF0000 ;
}
#font_blue
{
    color : #0000FF ;
}
#font_green
{
    color : #00FF00 ;
}

■ common.js

js 動作確認用。文字出すだけ。

$(function()
{
    var body_append = '<div id="font_red">red</div>'
            + '<div id="font_blue">blue</div>'
            + '<div id="font_green">green</div>'
            ;
    $('body').append(body_append) ;
}) ;

他に jquery (3.1.1) も読み込んでます。

実際に生成された結果は下の通りです(見やすく整形してます)。

<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="content-language" content="ja">
    <link rel="stylesheet" href="./css/common.css?ver=1477661698">
    <script type="text/javascript" src="./js/library/jquery/3.1.1/jquery.min.js?ver=1477661698" charset="UTF-8"></script>
    <script type="text/javascript" src="./js/self/common.js?ver=1477661698" charset="UTF-8"></script>
    <title>動作確認用</title>
</head>
<body>
    <div id="font_red">red</div>
    <div id="font_blue">blue</div>
    <div id="font_green">green</div>
</body>
</html>

普通に一つずつ読み込んだほうが楽ですね。。。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません