jQuery+phpQueryで指定したURLのページ情報をAjaxで取得する

phpQueryのダウンロード

まずはライブラリを下記URLからダウンロードしましょう。

phpquery

解凍してできたphpQuery-onefile.phpファイルを適当なディレクトリに入れます。

スクレイピングライブラリは他にもありますが、phpQueryはjQueryのSizzleのような要素選択の要領で扱えますので、jQueryに慣れている人ならわかりやすいと思います。あと1ファイルなので手軽えるところもいいですね。

どんな記述になるかちょっと見てみましょう。
今回はタイトルとディスクリプションを取得したいので次のようになります。

PHP

$html = phpQuery::newDocumentFile('取得するURL');
// タイトルを取得
$html->find('title')->text();
// ディスクリプションを取得
$html['meta[name=description]']->attr('content')

要素の指定はfindを使ってもいいし、配列で指定しても大丈夫です。
ここはほんとにjQueryっぽいですね。

GETで指定したURLのページの情報をJavaScriptで扱えるようにjsonで吐き出してみます。

get.php

<?php
header("Content-Type: text/html; charset=UTF-8");

if (empty($_GET['url'])) {
    return false;
}

// URLチェック
if(!filter_var($_GET['url'], FILTER_VALIDATE_URL)) {
    return false;
}

$getUrl = $_GET['url'];

// phpQueryの読み込み
require_once("libs/phpQuery-onefile.php");
// HTMLの取得
$html = phpQuery::newDocumentFile($getUrl);

$out = array();
$out['title'] = htmlspecialchars($html->find('title')->text(), ENT_QUOTES, 'UTF-8');
$out['description'] = htmlspecialchars($html['meta[name=description]']->attr('content'), ENT_QUOTES, 'UTF-8');

echo json_encode( $out , JSON_PRETTY_PRINT );

ファイル名を適当につけて保存します。ここではget.phpとしました。
これでget.php?http://example.comにアクセスするとタイトル・ディスクリプションがjsonで表示されます。

HTML

input-urlinput-titleinput-description3つの入力欄があり、input-urlに入力してフォーカスが外れるとinput-titleinput-descriptionに情報が自動的に入力されるということをします。

HTML

<form>
	<div class="form-row">
		<div class="form-group">
			<label for="input-url" class="form-label">URL</label>
			<input type="text" class="form-control" id="input-url">
			<div class="invalid-feedback" style="display: none;">
				URLの書式が正しくありません。
			</div>
		</div>
		<div class="form-group">
			<label for="input-title" class="form-label">タイトル</label>
			<input type="text" class="form-control" id="input-title">
		</div>
		<div class="form-group">
			<label for="input-description" class="form-label">概要</label>
			<textarea class="form-control" id="input-description" rows="6"></textarea>
		</div>
	</div>
</form>

JavaScript

5〜10行目は入力された値がURLか確認しています。
13行目から先ほど作成したget.phpに入力したURLを送って、getJSONで取得しています。

JavaScript

$(function() {
    $('#input-url').change(function() {
        var url = $(this).val();

        // 入力されたURLが正しい書式か
        if (!url.match(/^(https?|ftp)(:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)$/)) {
            $(this).next('.invalid-feedback').show();
            return true;
        } else {
            $(this).next('.invalid-feedback').hide();
        }

        $.getJSON('/admin/get.php?url=' + url , function(data) {
            $('#input-title').attr('value',data['title']);
            $('#input-comment').text(data['description']);
        });
    });
});

わりと局地的にしかつかえませんが、以上です。