オープンソース紹介の最近のブログ記事

オープンソース紹介

wkhtmltoimagを使ってコマンドラインからWebサイトのスクリーンショットを取ってみる

PHPでもサイトのスクリーンショットを取れるオープンソースがありましたので、試しにやってみました。
wkhtmltoimage」というソフトです。

ダウンロード

こちらからダウンロードできます。(ライセンス:GNU GPL)
http://code.google.com/p/wkhtmltopdf/downloads/list

動作環境

一覧を見てみますと、「Mac OS X」 「Windows」 「Linux」で動作するようです。
今回は、「Linux」で試してみます。

インストール

wkhtmltoimage-0.10.0_rc2-static-i386.tar.bz2」(執筆時の最新バージョン)をダウンロードし解凍すると、

wkhtmltoimage-i386」というファイルが作成されます。


このファイルを、「/usr/local/bin/」に移動、または複製します。
複製先のファイル名は「wkhtmltoimage」に設定します。


wkhtmltoimage.jpg

こんな感じになります。

実際にやってみた

では、実際に実行してみましょう!
実行するコマンドはこちら!


wkhtmltoimage http://www.gpol.co.jp gpol.jpg


wkhtmltoimageexec

 

成功するとこうなります。
こんな画像が作られました。

 

wkhtmltoimage_gpol.jpg


その他、下記のようにすると画質も設定できます!

wkhtmltoimage --quality 50 http://www.gpol.co.jp gpol.jpg


オープンソースなので、バグが潜んでる可能性もあり、
ライセンスはGNU GPLなので使用する機会は制限されそうですが、こういう技術を知っていると知識の幅が拡がりますね!

 

ちなみに、PHPで処理する場合は下記のようにすればOKです!

exec('/usr/local/bin/wkhtmltoimage http://www.gpol.co.jp gpol.jpg');

パスをルートパスで指定するのがミソですね。

PDFで書きだす

PDF作成バージョンもありましたので、こちらも同様に試してみました。


wkhtmltopdf-0.10.0_rc2-static-i386.tar.bz2」(執筆時の最新バージョン)をダウンロードし解凍。

wkhtmltopdf-i386」というファイルが作成されます。

 

このファイルも同様に、「/usr/local/bin/」に移動、または複製します。

複製先のファイル名は「wkhtmltopdf」に設定します。

あとは、imageの時と同じようになります。


今度は、実行コマンドが「wkhtmltoimage」から「wkhtmltopdf」です。

wkhtmltopdf

 

wkhtmltopdf_exec


上手く成功できました。
こんな感じのPDFができました。

 

gpol_pdf.jpg

 

PHPで実行する場合も、imageの時と同じです。
exec('/usr/local/bin/wkhtmltopdf http://www.gpol.co.jp gpol.pdf'); 


普段、こういったオープンソースにはあまり触れる機会はないのですが、
たまに触れると楽しいものがありました。 

 

 (hirohito)

オープンソース紹介 Web システムのツボ

郵便番号APIを使った住所自動入力フォーム

今回は実際に郵便番号検索APIを使ったサンプルソースをご紹介します。使用する言語はPHPです。
メールフォーム等でよく使う、郵便番号から住所を自動入力してくれるように組んでいきます。
今回作成したソースはダウンロードできます。

ダウンロード:sample.zip

下記に、メイン関数の処理を記述します。
function main(){

	// 初期処理
	$inputData = getData();

	// 検索ボタン押された場合
	if(isset($inputData['search'])){

		//入力情報GET
		$inputData = getData();

		//入力内容チェック
		$error = check ($inputData);

		if ($error['flg']){
			//エラー表示
			disp($inputData,$error);
			return;
		}

		//郵便番号APIのURLを設定
	  	$url = 'http://zip.cgis.biz/xml/zip.php?zn='.$inputData['zipnum1'].$inputData['zipnum2'];

	    //郵便番号APIから入力された郵便番号の情報を取得
	    $xmlData  =file_get_contents($url);
	    $xmlParser = xml_parser_create();
	    xml_parse_into_struct($xmlParser,$xmlData,$addressData);
	    xml_parser_free($xmlParser);

	    //取得データをセット
	    $setData = setData($addressData,$inputData);

	    //セットされたデータをチェック
	    $error = check($setData);

		if ($error['flg']){
			//エラー表示
			disp($setData,$error);
			return;
		}

		disp($setData);
	}else{
		disp($inputData);
	}

}
【ブラウザ表示】
API2.jpg

使用方法を説明させて頂きます。
入力項目の住所検索ボタンを押すと郵便番号APIを呼び出し、
取得したxmlファイルのデータを各入力項目に代入させています。
ブラウザ表示の処理はdisp関数で行っております。
disp関数の引数は郵便番号APIから取得したデータの配列で、htmlを生成させて表示しています。
また、郵便番号APIを使用する際の規約について、
画面のどこかにリンクを貼り付けることになっていますので、
今回は画面の下方に「利用しているAPI 郵便番号API」と表示させています。

郵便番号APIを呼び出す時は以下のようにしています。

//郵便番号APIのURLを設定
$url = "http://zip.cgis.biz/xml/zip.php?zn=".$inputData["zipnum1"].$inputData["zipnum2"];
//郵便番号APIから入力された郵便番号の情報を取得
$xmlData  =file_get_contents($url);

変数の「$inputData["zipnum1"]」や「$inputData["zipnum2"]」においては、getData関数で指定していります。
getData関数ではサーバーにpostで送信した郵便番号と各入力項目を配列で設定しています。
getData関数の配列のキーは以下の通りです。

設定フラグ:flg
郵便番号1:zipnum1
郵便番号2:zipnum2
都道府県:state
都道府県カナ:state_kana
市区町村:city
市区町村カナ:city_kana
住所:address
住所カナ:address_kana
番地:company
番地カナ:company_kana

取得したxmlファイルのデータを配列に置き換えている処理は以下のソースで処理しています。
	    $xmlParser = xml_parser_create();
	    xml_parse_into_struct($xmlParser,$xmlData,$addressData);
	    xml_parser_free($xmlParser);
	    //取得データをセット
	    $setData = setData($addressData);
上記のsetData関数で取得したxmlファイルを各データに配列でセットしています。
入力された郵便番号のデータがない場合、setData関数で設定フラグを「false」にし、check関数でエラーを表示するように設定しています。
郵便番号setData関数の内訳は以下の通りになります。

設定フラグ:flg
郵便番号1:zipnum1
郵便番号2:zipnum2
都道府県:state
都道府県カナ:state_kana
市区町村:city
市区町村カナ:city_kana
住所:address
住所カナ:address_kana
番地:company
番地カナ:company_kana

check関数では、以下のチェック処理をしております。

データの有無:入力された郵便番号のデータチェック
郵便番号1:郵便番号桁数チェック(3桁)+数字チェック
郵便番号2:郵便番号桁数チェック(4桁)+数字チェック

上記チェック処理に当てはまった場合はエラーメッセージを表示するようにしております。
ダウンロードして頂いて、試しに使っていただいたら非常に嬉しい限りです。

参照URL
郵便番号API:郵便番号APIのページへ
XML処理:WEBシステム開発の情報サイト


(kozo)
オープンソース紹介

郵便番号検索APIの紹介

郵便番号を基にした住所は全国に何千件・何万件とあり、全国の郵便番号を検索するとなると非常に膨大な量の住所や都道府県を登録しないといけなくなります。この膨大な量を登録しないで、使えるAPIがあります。それが郵便番号検索APIです。

郵便番号検索API:http://zip.cgis.biz/

APIの機能について

・日本郵政社に登録されている住所情報を検索。
・検索方法は郵便番号をGET方式でサーバーに送信し、当てはまった情報をCSVファイルかXMLファイルで出力。
・データベースの情報は、毎月10日のAM3:00に日本郵政社からダウンロード出来るデータを基に更新されています。

使い方

下記のように「zn=」の後に検索したい郵便番号を入力してアクセスするとXMLデータ・CSVデータで扱えます。

URL(XML)
http://zip.cgis.biz/xml/zip.php?zn=○○

URL(CSV)
http://zip.cgis.biz/csv/zip.php?zn=○○

但し、このAPIは無料ですがリンクウェアである為、必ず利用規約を守ってご使用ください。
利用規約につきましては、このページの最後にございますリンクをクリックして参照してください。

例として、大阪駅の郵便番号「5300001」を入力してみます。
入力方法は以下のとおりです。

・XMLデータ

http://zip.cgis.biz/xml/zip.php?zn=5300001

・CSVデータ

http://zip.cgis.biz/csv/zip.php?zn=5300001

取り扱えるXMLデータは下記になります。

・state_kana(都道府県カナ)
・city_kana(市区町村カナ)
・address_kana(住所カナ)
・company_kana(事業所名カナ)
・state(都道府県)
・city(市区町村)
・address(住所)
・company(事業所名)

次回には実際に郵便番号検索APIを使ったサンプルソースを紹介します。

利用規約についてはこちら:利用規約ページへ


(kozo)
続きを読む: 郵便番号検索APIの紹介
オープンソース紹介

「Google AJAX Feed API」を使ってみよう!

ブログのRSS情報をWebサイトトップ等に表示させたい場合、強引にRSSを表示させるプログラムを作成しても可能ですが、せっかくなのでGoogleが公開しているAPIを利用してみましょう。Googleは、いくつかAPIを公開していますので、
どんどんこちらで紹介していこうと思います。

今回は・・・
「ジーピーオンラインの制作実績」のRSSを読み込んで見ましょう!

制作実績のRSSはこちらです!
http://www.gpol.co.jp/works/index.php?action=rss

この情報を、GoogleのAPIを通して、
簡単なTopics形式の表示にチャレンジしてみます!

できたhtmlはこんな感じです!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Google API RSS</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("feeds", "1");

function initialize() {
var feed = new google.feeds.Feed("http://www.gpol.co.jp/works/index.php?action=rss");  // 読み込むRSS

feed.setNumEntries(10);

feed.load(function(result) {

 if (!result.error) {

  var rsshtml = "";

  for (var i = 0; i < result.feed.entries.length; i++) {
   var entry = result.feed.entries[i];
   var dd = new Date(entry.publishedDate);
   var yearNum = dd.getYear();
   if (yearNum < 2000) yearNum += 1900;
   var date = '<br>【' + yearNum + "年"+(dd.getMonth()+1)+"月"+dd.getDate()+"日】 ";
   rsshtml += " " + date +"<a href='" + entry.link + "' title='" + entry.title + "'>" + entry.title + "</a><br />";
   rsshtml += entry.content + "<br /><br />";
  }
  var rssdata = document.getElementById("RssList");
  rssdata.innerHTML = rsshtml;
 }
});
}

google.setOnLoadCallback(initialize);

</script>
</head>
<body>
<ul>
<div id="RssList"></div>
</ul>
</body>


ちょっと単純なものになってしまいましたが、
まぁ上手く表示できればよしとしましょう。

このAPIで気をつけたい箇所は下記の4点です。

【Google APIの読み込み】
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
グーグルのAPI設定をしておく必要があります。


【RSS情報】
var feed = new google.feeds.Feed("http://www.gpol.co.jp/works/index.php?action=rss");  //読み込むRSS
読み込むRSS情報の設定をする必要があります。


【html出力変数】
var rssdata = document.getElementById("RssList");
ここで設定する変数が、htmに出力する変数になります。


【htmlに出力】
<div id="RssList"></div>
この箇所に、スクリプトで設定した変数を記述します。

このhtmlを出力すると以下のようになります。

gpol_seisaku_rss.gif

どうなる事かと内心思ってましたが、成功です!
とりあえずRSS情報を引っ張ってくることができました!!

やはり単純なhtmlだと少し寂しいですね。。。

htmlの装飾をする場合は、下記の箇所、

   var date = '<br>【' + yearNum + "年"+(dd.getMonth()+1)+"月"+dd.getDate()+"日】 ";
   rsshtml += " " + date +"<a href='" + entry.link + "' title='" + entry.title + "'>" + entry.title + "</a><br />";
   rsshtml += entry.content + "<br /><br />";

この箇所にスタイルシート等を記述すれば、
いい感じにできるはずです!

公式サイトでドキュメントも公開していますので、今後ガンガン使っていこう!
と思われる方は、是非参考にしてみて下さい!

Google AJAX Feed API 公式サイト
http://code.google.com/intl/ja/apis/ajaxfeeds/documentation/


(hirohito)

1

Webシステムのツボとは

オープンソースの紹介や、プログラミング講座、フリーソフトのレビューなど、Webエンジニアが送る、つれづれ日記。
【隔週金曜日更新】

運営会社:株式会社ジーピーオンライン

RSSを購読する

Monthly Archive