ホーム > ブログ [果報は寝て待て]

ブログ [果報は寝て待て]|Blog

RSS

PHP で DOM をいじくって href や src の内容を書き換えてみる

2017年3月17日 14:14

しばらくブログをまーったく書いていなかったので、久しぶりにちょいと技術的なメモを。

今回は、とある HTML ファイル(HTMLのパーシャル)をメインの PHP に取り込んで表示させるっていう必要に迫られたんですが、その HTML の中身は直接編集不可…という罰ゲームっぽいものになっておりますw

で、直接編集不可な上に、a タグの href やら img タグの src なんかに記載されている相対パスにベース URL をくっつけるという…何やら魔術的なことを行うと・・・w

js でちょちょっとやろうかとも思ったんですが、パーシャルなので PHP 側で取り込む時にどーにかしたいなと…色々調べた結果、ありました!「PHP の DOM 拡張」。

何はともあれ…書いてみる。

<?php
// DOMDocument クラスのインスタンス作成
$dom = new DOMDocument();
 
// 何はともあれ取り込みたいファイルの内容を取得
$doc = mb_convert_encoding(file_get_contents('test.html'), 'UTF-8', 'sjis-win, sjis');
 
// 中身の HTML をパース
@$dom->loadHTML($doc);
 
// a タグを全て取得
$anchors = $dom->getElementsByTagName('a');
 
// 取得したタグの href 属性値を書き換える
foreach ($anchors as $anchor) {
    $value = $anchor->getAttribute('href');
 
    if (preg_match('/^https?/', $value)) continue;
 
    $anchor->setAttribute('href', 'http://shape-design.jp/' . $value);
}
 
// HTML はパーシャルで欲しいのでいらないもの削除
$html = preg_replace('/^<!DOCTYPE.+?>/', '',
    str_replace(
        array('<html>', '</html>', '<body>', '</body>'),
        array('', '', '', ''),
        $dom->saveHTML()
    )
);
 
// 表示(ホントはこれを PHP 側に取り込む)
echo $html;
?>

こいつは便利じゃないかーっ!

ちなみに、文字化けしちゃう場合は以下のようにしてエンティティ化すればよいとか…。

$doc = mb_convert_encoding(file_get_contents('test.html'), 'HTML-ENTITIES', 'sjis-win, sjis');

そんなわけで、いろいろなタグやら属性値に対応できるように関数化してできあがったのがこちらっ!
※細かいこと言えば、ページ内リンクとかその他色々どーするんだよって話ですが…。
※ちなみに、この記事向けに書き直したので、このままで動くかは不明です(汗

<?php
$base_url = 'http://shape-design.jp/';
 
echo convert_paths();
 
/**
 * 全てのタグ属性のファイルパスを絶対 URL に変換
 *
 * @return string
 */
function convert_paths() {
    $dom = new DOMDocument();
    $dom->preserveWhiteSpace = false;
    $dom->formatOutput       = true;
    @$dom->loadHTML(mb_convert_encoding(
        file_get_contents($base_url . 'test.html'), 'HTML-ENTITIES', 'sjis-win, sjis'
    ));
 
    $tag_anchors = $dom->getElementsByTagName('a');
    convert_path($tag_anchors, 'href');
 
    $tag_images = $dom->getElementsByTagName('img');
    convert_path($tag_images, 'src');
 
    $tag_forms = $dom->getElementsByTagName('form');
    convert_path($tag_forms, 'action');
 
    // パーシャルな HTML のみに整形
    $html = preg_replace('/^<!DOCTYPE.+?>/', '',
        str_replace(
            array('<html>', '</html>', '<body>', '</body>'),
            array('', '', '', ''),
            $dom->saveHTML()
        )
    );
    return $html;
}
 
/**
 * タグ属性のファイルパスを絶対 URL に変換
 *
 * @param object $nodes
 * @param string $attribute
 * @return object
 */
function convert_path($nodes, $attribute) {
    foreach ($nodes as $node) {
        $value = $node->getAttribute($attribute);
        if (preg_match('/^https?/', $value)) continue;
 
        $node->setAttribute($attribute, $base_url . $value);
    }
 
    return $nodes;
}
?>

ちなみに、サーバーにインストールされている PHP に DOM 拡張モジュールが必要なので、使用する際は phpinfo() なんかで要確認ってとこでしょうか。
そんなわけで、今回はここまで!ではまたっ!←いつになるやら(苦笑

※このスクリプトにおいて、動作の検証は行っていませんので、責任は一切負いません。
※参考 URL
PHP: DOMDocument - Manual
絶対URLから相対URLに変換する処理(PHP)|teratail
PHP5のDOM拡張モジュールでHTMLをパースする | Firegoby
【PHP】DOMDocument::loadHTML()で日本語が化けるときの対処法と残った謎 - Fatal Error: Unexpected BLOG

HTML5 と文書構造(アウトライン)について考えてみた。

2012年6月5日 07:16

おはようございます。

HTML5 でマークアップしてみてるのですが、なかなかいい感じです。
CSS のセレクタをうまく使うと相当すっきりします。

いろいろ調べつつって感じでやっていってるんですが、HTML5 って h1 タグいっぱい使っても大丈夫なんですね。
SEO的にどうなのか若干気になりますが…仕様としてそうなってるのでそうしていってますが(汗)

例えばなにかページを一枚作る場合、以下のようになったりします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>ほげほげのページ</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
 
<body>
  <header>
    <hgroup>
      <h1>ほげほげのページ</h1>
      <h2>ここはほげほげのページです。</h2>
    </hgroup>
    <nav>
      <ul>
        <li>メニュー1</li>
        <li>メニュー2</li>
        <li>メニュー3</li>
      </ul>
    </nav>
  </header>
 
  <article>
    <header>
      <h1>ページのタイトルとか入れちゃいます</h1>
      <h2>リード文とか入れちゃいましょう</h2>
    </header>
    <section>
      <h1>コンテンツ1のタイトルでーす</h1>
      <p>コンテンツ1の内容でーす。</p>
    </section>
    <section>
      <h1>コンテンツ2のタイトルでーす</h1>
      <p>コンテンツ2の内容でーす。</p>
    </section>
  </article>
 
  <footer>
    copyright.
  </footer>
</body>
</html>

これが正解なのかどうなのか分からないですけど、僕がW3Cとか見た解釈で書いてみました。
上のHTMLを文書構造(アウトライン)としておおまかに見ると以下のようになると思います。

・ほげほげのページ
  ・ページのタイトルとか入れちゃいます
    ・コンテンツ1のタイトルでーす
    ・コンテンツ2のタイトルでーす

ちなみに『article』はそれ単体で自己完結できるブロックそのままどこか違う場所に持っていってもそれのみで意味が通じるもの『section』はいわゆる章や節という個人的な解釈です。

タグにもそれぞれ意味があるようなので、スタイルあてるだけとかの場合は今までどおりdivタグを使ってマークアップしましょうってことらしいですね。

実際問題…ページを普通に閲覧する人からするとどうでもいいことではありますね(汗)
今はじみ〜な感じだけど API を試し出すともっと楽しくなるんでしょうね・・・。
使えるブラウザはまだ若干限られてしまうけど、File API は早急に実務で使えるようになりたい今日この頃です。

■参考にしたサイト
HTML5.JP - 次世代HTML標準 HTML5情報サイト
World Wide Web Consortium (W3C)

お仕事として HTML5 と CSS3 を見る。

2012年6月1日 02:23

こんばんは。
最近、また生活リズムが昼夜でややこしくなりつつある掛尾です。

ここ数日、PCサイトを前提に HTML5 と CSS3 をいろいろ調べて『お仕事で使い物になるのか?』を考えていました。
書籍・Webなどを参考にしながら実際にマークアップして試してたのですが、いかんせん新旧の情報が特にWebの場合散在しすぎていて、現時点でどれがどこまで使えるのか確認するだけでも一苦労します(汗)

そして、その情報のどれもが『HTML5 と CSS3 を使えばこんなことやあんなことが、こんなに簡単にできるようになるんですっ!』的に書いてるわけです。
それはそれでとてもいいことなんですが、実際『じゃあお仕事としてどうなの?』っていう視点から見ると、はっきりいいます・・・

さらに複雑かつ難解になり、ものすごく手間が増えます(笑)

ついでに、いろいろ試してみた感想としては、IE8 以下に対応させようと頑張ると・・・

Java Script のライブラリだらけになる可能性があります(笑)

※ちなみに、IE9 は Windows XP にはインストール出来ないみたいです。(そんな記事に何度も会いました)

新しい技術はやはり皆さん注目するものだと思いますし(特にWebデザイナーと呼ばれる方々は、今までも様々なブラウザに対応させるべく精進されてるはずだと思いますし)、生産性が上がるのであれば尚更と思います。

だけど、前述したような複雑なことやJava Scriptを読み込みまくるのって、本来の HTML5 や CSS3 を使うことの意義というか主旨というか、なんかそういうのがすり替わってしまってるように感じるんですよね…本末転倒って感じでしょうか。
もしかすると、僕の調べ方が悪いのかも知れないし、やり方がまずいのかもしれないです。本当はいろいろ使ってもっと手軽にできるのかも知れません。

趣味でするとか、スマートフォンのサイトなら問題ないと思うのですが、いざ『仕事で』となるともうエゴでしかなくなると思うので、結論として『現時点で HTML5 + CSS3(特にCSS3)は仕事では使えない』という結論に至りました(苦笑)

現時点ではサンプルサイトやスマートフォンサイトなどを作ってしっかり使えるようにしておき、来る時期に備えるというスタンスがいいのかなと思いました。
ただ、HTML5 に関してはそれ程ややこしいことをしなくても(若干JSライブラリーが必要ですが)それなりにマークアップできると思うので、少しずつ使うようにしていってもいいかなと思っています。
※スタイルあてるだけに意味不明な id や class を付ける頻度は大幅に減りそうな感じなのでお仕事でも使っていく価値はあると思います。

HTML5 と (特に)CSS3。
魅力的な(Webデザイナーにとっては特に)ものがたくさん盛り込まれているので、早く一般的な使い方が出来るようになるといいですね!

存在を伝えられるよろこび。

2012年5月22日 20:25

こんばんは。
随分前にヒザを痛めて、未だに痛みが解消しなくて動く度にストレスを感じている掛尾です。

先日、弊社でホームページの制作および管理を任せていただいてる音楽アーティスト様のステージを拝見させていただきに東京まで行っておりました。
経費を抑えようと往復夜行バスにしたのですが、さすがに9時間近く車内に缶詰になるのはきついですね(汗
帰りは疲れていたので結構眠れたのですが、行きが全然眠れなくて(=暇)とっても困りました(苦笑

ステージはとても迫力がありとても楽しい時間となりました。
また、存在感や人を引き込む力・・・気づきをいただけたところもありました。

さらに、その日同じステージをされていた方は、僕が音楽と現在の仕事をしようと思うきっかけになったアーティス様で、若かりし頃のことを思い出したりして感激でしたね!

ステージの後、招いていただいたアーティスト様には挨拶だけでもできればと思っていて、ひとまず短時間ですがお話しすることができました。
そして・・・まさかとは思っていたのですが、同じステージをされていたアーティスト様に紹介していただけるという機会を設けていただき、これも短時間でしたがご挨拶&握手までさせていただき、さらに僕自身がその方の活動を通して現在に至っていることも伝えられ、頭の中がまっしろになるほど感無量でした。
わかりにくい表現かも知れませんが、一生会えないかも知れないあこがれの人物に自分の存在と自分がその人の活動によって現在に至っているということを伝えられるって、凄いことだと思いませんか?

確かに、その方の僕の印象はとっても薄いものだと思いますけど、それでも僕自身の存在をその場だけでも知っていただけたというだけで、奇跡のような気がしてしましますね!(おおげさでしょうか?笑)

ヒザを痛めていて、歩くのも結構ままならない状態だったので、行くのも一瞬躊躇したりもしましたが、そういうのも忘れてしまうぐらい印象深い1日となりました。
あまりに感激過ぎて、その後別口で飲みに行ったのにほとんどお酒飲めませんでした(笑

スタッフや関係者の方々には「何者!?」と思われたかも知れませんが、忙しい折に貴重なお時間をいただいたこと皆々様に感謝いたします。ありがとうございました。

こんな感じで、また一段とどんな形でも再び音楽したいな〜と思ってしまって、気持ちを抑えつつお仕事を頑張っているところです(苦笑
僕自身も、他の人の行動を突き動かすような存在になれるよう精進していきたいと改めて思いました。

制限されるからこそ見えてくるモノ。

2012年5月1日 16:59

こんにちは。
少しお仕事が落ち着いた上にゴールデンウィークへ突入したもので、なんだかまったり気味な掛尾です。

最近、単色の広告チラシをいくつか作らせていただく機会がありました。
いつもは、当然フルカラー全開のホームページ等のWebのデザインをすることがほとんどです。

この度のお仕事をさせていただいて思ったのは、情報を整理する大切さ、ジャンプ率やフォント、またそのサイズをしっかりと把握した色に頼らない表現、アイキャッチやキャッチコピー、見る人の目の誘導方法などなど、勉強になることがたくさんありました。

また、稚拙ではありますがイラストなども描かせていただいたりして、本当に自分自身の身になるお仕事をさせていただいたと感謝している次第です。

昨今のホームページでは、Java Script や Flash 等を使って相当凝ったことが比較的簡単にできるようになってきました。
しかし、“情報を整理し、見る人が欲しいと思う情報が無意識的にスムーズに手に入る”という当たり前のことが、本当に大切なことなのだなと改めて気付かされた感じがします。
そして、Simple is best はそういう部分をしっかりと考えて創りあげられた場合に限って当てはまるんだろうな…と、そんな気がします。

また、ミクロの視点や技術だけでなく、マクロの視点や多種多様な知識や技術が相まることで、融合され影響し合いよりよいモノができあがってくるんじゃないかと思えます。

とてもよい経験をさせていただけたので、今後は前述のような事柄を意識的に持って、お客様に喜んでいただけるようにしていければと思います。

≪ 前へ 1 2 3 4 5 ... 7 次へ ≫ (33件中 1 - 5件を表示)

shape DESIGN - シェイプデザイン, 徳島県徳島市名東町, tel/fax 088-635-5859, 営業時間 平日10:00〜18:00

まずはお気軽にお問い合わせください
お問い合わせ・お見積り・ご相談はこちら
すべてお任せ! パッケージプラン

Webデザイン・管理システム・ドメイン取得・サーバー

ホームページを開設したいけれど、ドメイン取得やサーバー探しなど、よく解らないし何かと面倒だと思っていませんか?
そんな方にオススメの『初期費用 0円、月額 7,000円〜』でホームページを開設できるプランをご紹介いたします!

パッケージプランを確認する

お気軽にご相談ください

徳島県徳島市名東町
tel/fax 088-635-5859
営業時間 平日 10:00〜18:00

※打ち合わせ等で不在の場合は、お電話でのお問い合わせに対応できない場合がありますので、ご了承ください。

フォームからのお問い合わせ

徳島・香川・愛媛・高知および大阪・京都を中心にご依頼を承ります。その他の地域でも、メール・お電話・FAX・Skype等での作業が可能であれば柔軟に対応いたします。

  • Become our fan on Facebook, facebook.com/shape.design