オープンソース紹介の最近のブログ記事
オープンソース紹介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 http://www.gpol.co.jp 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」です。


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

PHPで実行する場合も、imageの時と同じです。
exec('/usr/local/bin/wkhtmltopdf http://www.gpol.co.jp gpol.pdf');
普段、こういったオープンソースにはあまり触れる機会はないのですが、
たまに触れると楽しいものがありました。
(hirohito)
郵便番号APIを使った住所自動入力フォーム
メールフォーム等でよく使う、郵便番号から住所を自動入力してくれるように組んでいきます。
今回作成したソースはダウンロードできます。
ダウンロード: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);
}
}
【ブラウザ表示】
使用方法を説明させて頂きます。
入力項目の住所検索ボタンを押すと郵便番号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: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を使ったサンプルソースを紹介します。
利用規約についてはこちら:利用規約ページへ
「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を出力すると以下のようになります。
どうなる事かと内心思ってましたが、成功です!
とりあえずRSS情報を引っ張ってくることができました!!
やはり単純なhtmlだと少し寂しいですね。。。
htmlの装飾をする場合は、下記の箇所、
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)




