SlideShare uma empresa Scribd logo
1 de 66
Baixar para ler offline
WordPressと外部APIとの連携 
「お城めぐりGPSスタンプラリー・戦国攻城記」サイトの裏側
自己紹介
名古屋で株式会社ベクトル というウェブ制作会社をしています。 
普段はWordPressを使って企業サイトなどを制作しながら生きています。 
デザイナー上がりなので高度なPGやサーバー・DBなど、バックエンドの 
部分は苦手です… 
名前:石川栄和 
Twitter : @kurudrive 
2013 WordCampTokyo セッションパネラー 
2013 WordFesNagoya セッションスピーカー 
2013 WordCrab Fukui セッションスピーカー 
2012 WordCamp Tokyo セッションスピーカー 
その他セミナーやLTも少し… 
最近のWordPressコミュニティでの活動
書籍 
いちばんやさしい WordPress の教本 
人気講師が教える本格Webサイトの作り方 
現場でかならず使われている 
WordPressデザインのメソッド
テーマ作ってます 
bizvektor.com
お城めぐりGPSスタンプラリー
WordPressで出来てます。
GeolocationAPIとの連携(1) 
今いる場所から近い順に並べて表示する
紹介するGeolocationAPIの活用例1 
位置情報を取得して、 
今いる場所から近い順に 
表示する。
処理概要 
ボタンを押したら位置情報を取得 
1 
2 
取得した位置情報をURLに 
くっつけて近くのお城一覧ページへ 
移動 
http://kojoki.jp/nearby/?lat=緯度&lng=経度
処理概要 
URLに付いた位置情報を 
受け取る 
3 
4 
DBからお城のデータを全件取得 
5 
位置情報が近い順に並び替えて 
表示する
位置情報を扱う機能を作る前に 
この投稿データを位置情報と連携して使用するので、 
カスタムフィールドに緯度・経度を登録します。 
各お城の情報の作成 
投稿又はカスタム投稿タイプに 
お城の写真や説明文などと共に 
登録。
処理概要 
ボタンを押したら位置情報を取得 
1 
2 
取得した位置情報をURLにくっつけて 
近くのお城一覧ページ(固定ページ)へ移動 
URLに付いた位置情報を受け取る 
3 
4 
DBからお城のデータを全件取得 
5 
位置情報が近い順に並び替えて表示する
ユーザーの位置情報を取得するトリガー 
<a href =“#” id=“nearbyBtn”> 
近くのお城を探す 
</a> 
Jsファイルへの記述 
// ボタンがクリックされたら 
jQuery('a#nearbyBtn').click(function(){ 
// 位置情報取得の処理を実行 
get_gps(); 
}); 
ここで位置情報取得の処理をする。 
詳細は次へ…
位置情報を取得するjs 
function get_gps(){ 
if (navigator.geolocation) { 
// Geolocationが使える場合 
// 現在の位置情報を取得 
navigator.geolocation.getCurrentPosition( 
// (1)位置情報取得に成功したとき 
function (position) { 
lat = position.coords.latitude; 
lng = position.coords.longitude; 
location.href=" /nearby/?lat=" + lat + "&lng=" + lng; 
}, 
// (2)位置情報の取得に失敗した場合 
function (error) { 
window.alert("位置情報の取得ができませんでした。"); 
} // function (error) 
); 
} else { 
// Geolocationが使えない場合 
window.alert("このブラウザでは位置情報が取得出来ないためご利用できません。"); 
} 
} // get_gps
取得した位置情報元に移動 
function get_gps(){ 
if (navigator.geolocation) { 
// Geolocationが使える場合 
// 現在の位置情報を取得 
navigator.geolocation.getCurrentPosition( 
// (1)位置情報取得に成功したとき 
function (position) { 
lat = position.coords.latitude; 
lng = position.coords.longitude; 
location.href=" /nearby/?lat=" + lat + "&lng=" + lng; 
}, 
// (2)位置情報の取得に失敗した場合 
function (error) { 
window.alert("位置情報の取得ができませんでした。"); 
} // function (error) 
); 
} else { 
// Geolocationが使えない場合 
window.alert("このブラウザでは位置情報が取得出来ないためご利用できません。"); 
} 
} // get_gps 
緯度 
経度 
近くのお城一覧用固定ページ 
(スラッグ:nearby)へ移動。 
その際に取得した緯度経度情報を パラメーターとしてくっつける。 
http://kojoki.jp/nearby/?lat=35.164844099999996&lng=136.8965278
Jsファルに記述するサンプルコード 
jQuery(document).ready(function(jQuery){ 
function get_gps(){ 
if (navigator.geolocation) { 
// Geolocationが使える場合 
// 現在の位置情報を取得 
navigator.geolocation.getCurrentPosition( 
// (1)位置情報取得に成功したとき 
function (position) { 
lat= position.coords.latitude; 
lng= position.coords.longitude; 
location.href=" /nearby/?lat=" + lat + "&lng=" + lng; 
}, 
// (2)位置情報の取得に失敗した場合 
function (error) { 
window.alert("位置情報の取得ができませんでした。"); 
} // function (error) 
); 
} else { 
// Geolocationが使えない場合 
window.alert("このブラウザでは位置情報が取得出来ないためご利用できません。"); 
} 
} // get_gps 
// ボタンがクリックされたら 
jQuery('a#nearbyBtn').click(function(){ 
// 位置情報取得の処理を実行 
get_gps(); 
}); 
}); 
この記述をしているjsファイル自体の読み込み場所に よっては不要
処理概要 
ボタンを押したら位置情報を取得 
1 
2 
取得した位置情報をURLにくっつけて 
近くのお城一覧ページ(固定ページ)へ移動 
URLに付いた位置情報を受け取る 
3 
4 
DBからお城のデータを全件取得 
5 
位置情報が近い順に並び替えて表示する
お城一覧用ページで位置情報を受け取る 
近くのお城一覧ページ用のテンプレートファイルで 
URLについている位置情報を受け取る 
<?php 
// パラメターから位置情報を取得 
$lat = (isset($_GET['lat'])) ? esc_html($_GET['lat']) : ''; 
$lng = (isset($_GET['lng'])) ? esc_html($_GET['lng']) : ''; 
?> 
http://kojoki.jp/nearby/?lat=緯度&lng=経度
処理概要 
ボタンを押したら位置情報を取得 
1 
2 
取得した位置情報をURLにくっつけて 
近くのお城一覧ページ(固定ページ)へ移動 
URLに付いた位置情報を受け取る 
3 
4 
DBからお城のデータを全件取得 
5 
位置情報が近い順に並び替えて表示する
登録されているお城情報を取得 
データベースに登録されているお城の情報(投稿 データ)をとりあえず全件取得して、 
$spot_items に入れます。 
/*-------------------------------------------*/ 
/* 現在登録されている城情報を全て取得 
/*-------------------------------------------*/ 
$spot_items = get_posts( array( 
‘post_type’ => ‘post’, // お城情報が入っている投稿タイプ 
‘posts_per_page’ => -1, // 全件 
) );
処理概要 
ボタンを押したら位置情報を取得 
1 
2 
取得した位置情報をURLにくっつけて 
近くのお城一覧ページ(固定ページ)へ移動 
URLに付いた位置情報を受け取る 
3 
4 
DBからお城のデータを全件取得 
5 
位置情報が近い順に並び替えて表示する
取得したお城情報に距離情報を追加したい 
Array 
( 
[0] => WP_Post Object 
( 
[ID] => 001 
[post_title] => 名古屋城 
(以下略) 
[distance] => (距離の数値) 
) 
[1] => WP_Post Object 
( 
[ID] => 002 
[post_title] => 清洲城 
投稿ID 
投稿タイトル 
距離で並べ替えるために 
こんな感じで距離の情報を 
追加したい 
取得したお城情報 $spot_items の中身
現在地との距離を算出して追加 
foreach ($spot_items as $key => $spot_item) { 
// カスタムフィールドから緯度経度情報を取得 
$spotLat = get_post_meta($spot_item->ID,'Map_lat',true); 
$spotLng = get_post_meta($spot_item->ID,'Map_lng',true); 
if (($spotLat) && ($spotLng)) { 
// 現在地からの距離の算出 
$distanceLat = $spotLat - $lat; 
$distanceLng = $spotLng - $lng; 
$distance = sqrt(pow($distanceLat,2)+pow($distanceLng,2)); 
// 並び替え用の数値として距離「distance」を追加 
$spot_items[$key]->distance = $distance; 
} 
} 
※本当は地球の「丸さ」を 
考慮した計算式の方が良い
お城情報の並び替え 
/* 距離で並び替えるという比較関数を定義 
/*-------------------------------------------*/ 
function itemsort_by_distance( $a , $b ){ 
//距離を比較 
$spot_items = strcmp( $a->distance , $b->distance ); 
return $spot_items; 
} 
/* 比較関数に書いたルールで並び替え 
/*-------------------------------------------*/ 
usort( $spot_items , "itemsort_by_distance" );
並び替えたデータの出力 
foreach ($spot_items as $key => $post) { 
the_title(); 
echo '<br />'; 
} 
wp_reset_postdata(); 
近い順に並んだお城情報 $spot_items を 
ループして順番に表示する。
サンプルソース 
/*-------------------------------------------*/ 
/* URLのパラメター(緯度と経度の位置情報)を取得 
/*-------------------------------------------*/ 
$lat = (isset($_GET['lat'])) ? esc_html($_GET['lat']) : ''; 
$lng = (isset($_GET['lng'])) ? esc_html($_GET['lng']) : ''; 
/*-------------------------------------------*/ 
/* 距離チェック 
/*-------------------------------------------*/ 
/* 現在登録されている城情報を全て取得 
/*-------------------------------------------*/ 
$spot_items = get_posts( array( 
'post_type' => 'post', // カスタム投稿タイプチェックイン 
'posts_per_page' => -1, // 全件 
) ); 
/* 各お城情報について、現在地からの距離を算出してデータに追加 
/*-------------------------------------------*/ 
foreach ($spot_items as $key => $spot_item) { 
$spotLat = get_post_meta($spot_item->ID,'Map_lat',true); 
$spotLng = get_post_meta($spot_item->ID,'Map_lng',true); 
if (($spotLat) && ($spotLng)) { 
$distanceLat = $spotLat - $lat; 
$distanceLng = $spotLng - $lng; 
// 距離の算出 pow = 乗算 / sqrt = 平方根 
$distance = sqrt(pow( $distanceLat ,2) + pow( $distanceLng ,2)); 
// 並び替え用の数値として距離「distance」を追加 
$spot_items[$key]->distance = $distance; 
} 
} 
/* 距離で並び替えるという比較関数を定義 
/*-------------------------------------------*/ 
function itemsort_by_distance( $a , $b){ 
//距離を比較 
$spot_items = strcmp( $a->distance , $b->distance ); 
return $spot_items; 
} 
/* 比較関数にそって並び替え 
/*-------------------------------------------*/ 
usort( $spot_items , "itemsort_by_distance" ); 
/*-------------------------------------------*/ 
/* 並び替えた城情報を出力 
/*-------------------------------------------*/ 
foreach ($spot_items as $key => $post) { 
the_title(); 
echo '<br />'; 
} 
wp_reset_postdata();
GeolocationAPIとの連携(2) 
チェックインの判定と保存処理
処理概要 
各お城の詳細ページでチェックイン 
ボタンを押したら位置情報を取得 
1 
2 
お城の位置情報と、取得した位置 
情報を比較して判定。 
3 
チェックイン成功だったら 
そのデータを保存する。
チェックインの判定 
位置情報を取得して対象と近いか判定
お城詳細画面のチェックインボタン 
未ログイン 
ログイン済 
ログインしている時だけチェックインボタンが 
表示されるようにします。
ログインしていたら チェックインボタンを表示 
<div id="message"></div> 
<div class="sectionFrame" id="checkinSection"> 
<?php if ( is_user_logged_in() == TRUE ) { ?> 
<p class="center"> 
<a href="#" id="checkinBtn"> 
攻略の狼煙を上げる!(現地でGPSチェックイン) 
</a> 
</p> 
<?php } else { ?> 
( ログインしていない時の表示 ) 
<?php } ?> 
</div>
位置情報の取得 
<script type="text/javascript"> 
jQuery(document).ready(function($){ 
// チェックイン処理開始 
jQuery('#checkinBtn').click(function(){ 
if (navigator.geolocation) { 
// Geolocationが使える場合 
// 現在の位置情報を取得 
navigator.geolocation.getCurrentPosition( 
// (1)位置情報取得に成功したとき 
function (position) { 
lat = position.coords.latitude; 
lng = position.coords.longitude; 
ここでは single.php に 
直接記述 
チェックインボタンが 押されたら実行 
緯度 
経度
位置判定用の座標生成 
latMax = <?php echo esc_html(post_custom("Map_lat")) ?> + 0.015; 
latMin = <?php echo esc_html(post_custom("Map_lat")) ?> - 0.015; 
lngMax = <?php echo esc_html(post_custom("Map_lng")) ?> + 0.015; 
lngMin = <?php echo esc_html(post_custom("Map_lng")) ?> - 0.015; 
お城の位置情報をカスタムフィールド 
から取得して判定合格エリアの 
座標生成 
( post_custom("Map_lat"),post_custom("Map_lng") )
位置判定処理 
// チェックインの判定処理 
if ( 
( latMax > lat ) && 
( lat > latMin ) && 
( lngMax > lng ) && 
( lng > lngMin ) 
) { 
// チェックイン成功 
} else { 
// チェックイン失敗 
jQuery(“#message”).html(‘離れています'); 
} 
( lat , lng ) 
失敗したらボタンの上にメッセージを表示
// チェックイン成功ページ(固定ページ)へ移動 
location.href="<?php echo site_url(); ?>/page-checkin_post/"; 
移動先の固定ページ(スラッグ:page-checkin_post/) 
チェックイン成功時の処理 
// 判定の場合、成功したお城のID(投稿ID)をcookieに保存 
// ※ あらかじめ別途 jquery.cookie.js の読み込みが必要 
jQuery.cookie(“checkinSpotID”, “<?php the_ID(); ?>”, 
{ expires: 1 , path: '/page-checkin_post/' }); 
チェックインしたお城の ID(投稿ID) 
移動先のページでお城のIDを受け取って保存します。
サンプルソース 
<div id="message"></div> 
<div class="sectionFrame" id="checkinSection"> 
<?php if ( is_user_logged_in() == TRUE ) { ?> 
<p class="center"> 
<a href="#" id="checkinBtn"> 
攻略の狼煙を上げる!(現地でGPSチェックイン) 
</a> 
</p> 
<?php } else { ?> 
( ログインしていない時の表示 ) 
<?php } ?> 
</div> 
<script type="text/javascript"> 
jQuery(document).ready(function($){ 
// チェックイン処理開始 
jQuery('#checkinBtn').click(function(){ 
if (navigator.geolocation) { 
// Geolocationが使える場合 
// 現在の位置情報を取得 
navigator.geolocation.getCurrentPosition( 
// (1)位置情報取得に成功したとき 
function (position) { 
lat= position.coords.latitude; 
lng= position.coords.longitude; 
// お城の位置情報をカスタムフィールドから取得して判定合格エリアの座標生成 
latMax = <?php echo esc_html(post_custom("Map_lat")) ?> + 0.015; 
latMin = <?php echo esc_html(post_custom("Map_lat")) ?> - 0.015; 
lngMax = <?php echo esc_html(post_custom("Map_lng")) ?> + 0.015; 
lngMin = <?php echo esc_html(post_custom("Map_lng")) ?> - 0.015; 
// チェックインの判定処理 
if ( ( latMax > lat ) && ( lat > latMin ) && ( lngMax > lng ) && ( lng > lngMin ) ) { 
// 判定OK 
jQuery.cookie("checkinSpotID", "<?php the_ID(); ?>",{ expires: 1 , path: '/page-checkin_post/' }); 
// チェックイン成功ページへ移動 
location.href="<?php echo site_url(); ?>/page-checkin_post/"; 
} else { 
// 判定失敗 
jQuery("#message").html('離れている場合に表示するメッセージ'); 
} 
// 判定ここまで 
}, 
// (2)位置情報の取得に失敗した場合 
function (error) { 
window.alert("位置情報の取得ができませんでした。"); 
} // function (error) 
); 
} else { 
// Geolocationが使えない場合 
window.alert("このブラウザでは位置情報が取得出来ないためご利用できません。"); 
} 
}); 
}); 
</script>
チェックイン情報の保存
保存するチェックイン情報 
ユーザーのチェックイン情報を保存したい。 
最低限保存する情報 
•チェックインしたユーザーは誰か? 
ログインユーザーID 
•チェックインしたお城はどこか? 
お城ページの投稿ID 
どこに保存するか?
チェックイン情報の保存先 
カスタム投稿タイプを追加して、 
そこに投稿としてに保存! 
最低限保存する情報 
•チェックインしたユーザーIDの保存先 
投稿者に設定 
•チェックインしたお城ID(投稿ID)の保存先 
タイトル又はカスタムフィールドに保存
保存したデータの引き出し例 
$posts = get_posts(array( 
'post_type' => 'checkin', 
'posts_per_page' => -1, 
'author' => $userID, 
)); 
ユーザーIDが $userID の人のチェックイン履歴 
投稿タイプが’checkin’ 
作成者が $userID 
投稿者アーカイブページでも同様にユーザーの 
チェックイン履歴ページになる。
ログインユーザーIDと チェックインしたお城のIDを取得 
ログインしているユーザーID 
global $user_ID; 
get_currentuserinfo(); 
クッキーからチェックインした城のIDを取得 
if(isset($_COOKIE["checkinSpotID"])) { 
$checkInId = $_COOKIE["checkinSpotID"]; 
} 
チェックイン成功ページでの処理
重複投稿チェック 
/*-------------------------------------------*/ 
/* 今日の同じ城でのチェックイン情報を取得 
/*-------------------------------------------*/ 
$args = array( 
'post_type' => 'checkin', // カスタム投稿タイプチェックイン 
'orderby' => 'date', // 日付で並び替え 
'order' => 'DESC', // 新着順 
'posts_per_page' => 1, // 1件のみ(最新だけで良いので) 
'author' => $user_ID, // 現在のログインユーザー 
'meta_query' => array( // カスタムフィールドの絞り込み条件 
array( 
'key'=>'checkin_spot_id', 
'value'=>$checkInId // 今回のチェックインIDと同じ城番号 
), 
), 
'date_query'=>array( 
array( 
'year'=>date_i18n( 'Y' ), 
'monthnum'=>date_i18n( 'm' ), 
'day'=>date_i18n( 'd' ), 
) 
) 
); 
$todayCheckinData = get_posts($args);
重複投稿チェック 
// 今日のGPS攻略が無い場合投稿 
// (その他のパラメーターは余分な処理の実行を防止するため) 
if ( 
!$todayCheckinData && 
isset($checkInId) && 
$checkInId && 
$user_ID ){ 
/*-------------------------------------------*/ 
/* チェックイン情報を投稿 
/*-------------------------------------------*/ 
} 
今日同じ城でのチェックインが無い場合
チェックイン情報を 投稿するためのデータを作成 
$checkin_post = array(); 
// 投稿タイプ 
$checkin_post['post_type'] = 'checkin'; 
// 投稿の状態 
$checkin_post['post_status'] = 'publish'; 
// 投稿のタイトル 
$checkin_post['post_title'] = get_the_title($checkInId); 
// 投稿の作成者 
$checkin_post['post_author'] = $user_ID; 
※お城のIDはカスタムフィールドなので別の場所で指定 
タイトルはチェックインしたお城の名前
チェックイン情報を投稿 
$posted_ID = wp_insert_post( $checkin_post ); 
カスタム投稿タイプ ’checkin’ に自動で投稿 
新規投稿する関数 
新規投稿する情報 
投稿に成功した時に、成功した投稿のIDが返ってくる 
カスタムフィールドにお城のIDを保存する 
add_post_meta($posted_ID, 'checkin_spot_id', $checkInId); 
上記で成功したチェックイン情報の投稿ID 
保存先のカスタムフィールドのキー 
チェックインしたお城ID
サンプルソース 
// ユーザー情報を取得 
global $user_ID; 
get_currentuserinfo(); 
// クッキーからチェックインした城のIDを取得 
if(isset($_COOKIE["checkinSpotID"])) { 
$checkInId = $_COOKIE["checkinSpotID"]; 
} 
/*-------------------------------------------*/ 
/* 重複チェック 
/*-------------------------------------------*/ 
/* 今日の同じ城でのチェックイン情報を取得 
/*-------------------------------------------*/ 
$args = array( 
'post_type' => 'checkin', // カスタム投稿タイプチェックイン 
'orderby' => 'date', // 日付で並び替え 
'order' => 'DESC', // 新着順 
'posts_per_page' => 1, // 1件のみ(最新だけで良いので) 
'author' => $user_ID, // 現在のログインユーザー 
'meta_query' => array( // カスタムフィールドの絞り込み条件 
array( 
'key'=>'checkin_spot_id', 
'value'=>$checkInId // 今回のチェックインIDと同じ城番号 
), 
), 
'date_query'=>array( 
array( 
'year'=>date_i18n( 'Y' ), 
'monthnum'=>date_i18n( 'm' ), 
'day'=>date_i18n( 'd' ), 
) 
) 
); 
$todayCheckinData = get_posts($args); 
// 今日のGPS攻略が無い場合投稿(その他のパラメーターは余分な処理の実行を防止するため) 
if ( !$todayCheckinData && isset($checkInId) && $checkInId && $user_ID ){ 
/*-------------------------------------------*/ 
/* チェックイン情報を投稿 
/*-------------------------------------------*/ 
// 投稿するためのデータを作成 
$checkin_post = array(); 
$checkin_post['post_type'] = 'checkin'; 
$checkin_post['post_status'] = 'publish'; 
$checkin_post['post_title'] = get_the_title($checkInId); 
$checkin_post['post_author'] = $user_ID; 
if ($user_ID) { 
// データベースに投稿を追加 
$posted_ID = wp_insert_post( $checkin_post ); 
// 今投稿したチェックインデータのカスタムフィールド「checkin_spot_id(チェックインした城のID)」に値を追加 
add_post_meta($posted_ID, 'checkin_spot_id', $checkInId); 
} 
}
保存結果
結果出力応用例
WebAPIとの連携
WebAPIとは? 
ざっくり言うと 
他のウェブサービスが提供している 
データを自由に使える 
使用例 天気情報 
お城のある 
地域の天気を 
表示
WebAPIとは? 
各お城ページに該当する地域の 
天気を毎日調べて手動で更新 
しているわけではありません!
天気予報データが提供されている 
http://weather.livedoor.com/weather_hacks/webservice
データの取得方法 
指定のURLにアクセスすると 
データが取得出来ます。 
http:// APIデータ提供元URL + パラメーター 
http://weather.livedoor.com/forecast/webservice/json/v1 
?city=400040 
city が 400040(福岡県・久留米市)の情報
パラメーターの確認 
提供されているAPIごとに 
用意されているパラメータは違う 
Livedoor天気情報の場合 
「city」というパラメーターと、 
その値が用意されている。 
お城のページごとに地域に 
あった city の 値を登録
各お城詳細ページに天気の地域IDを登録 
お城のページごとに、 
そのお城のある地域に該当する 
city の 値を登録します。 
ここではカスタムフィールド 
‘weatherID’ を用意して、そこに手動で 登録します。
天気情報の結果をリクエストするURLを作成 
$city = esc_html(post_custom('weatherID')); 
お城の詳細ページで、カスタムフィールドに 
保存した地域の天気IDを取得する。 
$url = "http://weather.livedoor.com/forecast/webservice/json/v1?city=".$city; 
リクエストするURLを作成
リクエストした結果を受け取って配列に 
$json_tenki_data = file_get_contents($url); 
リクエストURLにアクセスすると、その地域の 
天気情報データが得られます。 
Livedoor 天気情報の場合データは json 形式なので、変 数名もわかりやすいように $json_ としています。 
jsonのままだと使いにくいので配列に変換 
$tenkis = json_decode($json_tenki_data);
取得した天気データの中身の確認 
print '<pre>';print_r($tenkis);print '</pre>'; 
このへんが使えそう
取得した天気データの中身の確認 
•日付のラベル 
•天気(文字) 
•天気の画像 を使いたい
必要な部分の取り出して出力 
$tenkis_forecasts = $tenkis->forecasts; 
今日明日の天気情報部分のみ格納 
<?php foreach ($tenkis_forecasts as $key => $dayTenki) { ?> 
<dl> 
<dt class="today"><?php echo $dayTenki->dateLabel ?></dt> 
<dd class="data"> 
<img src="<?php echo $dayTenki->image->url ?>" alt" /><br /> 
<?php echo $dayTenki->telop ?> 
</dd> 
</dl> 
<?php } ?> 
※実際にはエスケープ処理します。
サンプルソース 
// お城の詳細ページで、カスタムフィールドに保存した地域の天気IDを取得する 
$city = esc_html(post_custom('weatherID')); 
// 地域のIDが入っていたら実行 
if ($city): 
// リクエストするURLを作成 
$url = "http://weather.livedoor.com/forecast/webservice/json/v1?city=".$city; 
// 指定のエリア(都市)の情報をjson形式で取得 
$json_tenki_data = file_get_contents($url); 
// 配列に格納 
$tenkis = json_decode($json_tenki_data); 
// 今日明日の天気のみ $tenkis に格納 
$tenkis_forecasts = $tenkis->forecasts; ?> 
<?php foreach ($tenkis_forecasts as $key => $dayTenki) { ?> 
<dl> 
<dt class="today"><?php echo esc_html($dayTenki->dateLabel); ?></dt> 
<dd class="data"> 
<img src="<?php echo esc_html($dayTenki->image->url); ?>" alt="<?php echo esc_html($dayTenki->image->title); ?>" /><br /> 
<?php echo esc_html($dayTenki->telop) ; ?> 
</dd> 
</dl> 
<?php } ?> 
<?php endif; ?>
参考資料 
http://www.communitycom.jp/2012/07/14/wordvolcano/ 
WordPressプラグイン & WebAPI 活用ガイドブック 星野邦敏、西川伸一 WordPressの機能を簡単に拡張できる「プラグイン」と、外部 のWebサービスの機能や情報をWordPressサイトで使うこと のできる「WebAPI」を、辞典形式に紹介している書籍です。 
いろんなAPIが探せる 
http://wafl.net/
WordPress + API で 
面白いサービスを作りましょう!
ご清聴ありがとうございました。

Mais conteúdo relacionado

Mais procurados

データ収集の基本と「JapanTaxi」アプリにおける実践例
データ収集の基本と「JapanTaxi」アプリにおける実践例データ収集の基本と「JapanTaxi」アプリにおける実践例
データ収集の基本と「JapanTaxi」アプリにおける実践例Tetsutaro Watanabe
 
組織にテストを書く文化を根付かせる戦略と戦術
組織にテストを書く文化を根付かせる戦略と戦術組織にテストを書く文化を根付かせる戦略と戦術
組織にテストを書く文化を根付かせる戦略と戦術Takuto Wada
 
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)Takuto Wada
 
ドメイン駆動開発 勉強会 ①
ドメイン駆動開発 勉強会 ①ドメイン駆動開発 勉強会 ①
ドメイン駆動開発 勉強会 ①Kakeru Kikuchi
 
事業成長にコミットするエンジニア組織への道のり
事業成長にコミットするエンジニア組織への道のり事業成長にコミットするエンジニア組織への道のり
事業成長にコミットするエンジニア組織への道のりRecruit Lifestyle Co., Ltd.
 
グラフ構造のデータモデルをPower BIで可視化してみた
グラフ構造のデータモデルをPower BIで可視化してみたグラフ構造のデータモデルをPower BIで可視化してみた
グラフ構造のデータモデルをPower BIで可視化してみたCData Software Japan
 
「実践ドメイン駆動設計」 から理解するDDD (2018年11月)
「実践ドメイン駆動設計」 から理解するDDD (2018年11月)「実践ドメイン駆動設計」 から理解するDDD (2018年11月)
「実践ドメイン駆動設計」 から理解するDDD (2018年11月)A AOKI
 
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門増田 亨
 
事業のグロースを支えるDataOpsの現場 #DataOps #DevSumi #デブサミ
事業のグロースを支えるDataOpsの現場 #DataOps #DevSumi #デブサミ事業のグロースを支えるDataOpsの現場 #DataOps #DevSumi #デブサミ
事業のグロースを支えるDataOpsの現場 #DataOps #DevSumi #デブサミ@yuzutas0 Yokoyama
 
ゼロから作るKubernetesによるJupyter as a Service ー Kubernetes Meetup Tokyo #43
ゼロから作るKubernetesによるJupyter as a Service ー Kubernetes Meetup Tokyo #43ゼロから作るKubernetesによるJupyter as a Service ー Kubernetes Meetup Tokyo #43
ゼロから作るKubernetesによるJupyter as a Service ー Kubernetes Meetup Tokyo #43Preferred Networks
 
これからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきことこれからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきこと土岐 孝平
 
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」Takuto Wada
 
今なら間に合う分散型IDとEntra Verified ID
今なら間に合う分散型IDとEntra Verified ID今なら間に合う分散型IDとEntra Verified ID
今なら間に合う分散型IDとEntra Verified IDNaohiro Fujie
 
Singularityで分散深層学習
Singularityで分散深層学習Singularityで分散深層学習
Singularityで分散深層学習Hitoshi Sato
 
データモデリング入門2021
データモデリング入門2021データモデリング入門2021
データモデリング入門2021Koichi Inami
 
3週連続DDDその1 ドメイン駆動設計の基本を理解する
3週連続DDDその1  ドメイン駆動設計の基本を理解する3週連続DDDその1  ドメイン駆動設計の基本を理解する
3週連続DDDその1 ドメイン駆動設計の基本を理解する増田 亨
 
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込む45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込むYoshiki Hayama
 
モジュールの凝集度・結合度・インタフェース
モジュールの凝集度・結合度・インタフェースモジュールの凝集度・結合度・インタフェース
モジュールの凝集度・結合度・インタフェースHajime Yanagawa
 
PySparkによるジョブを、より速く、よりスケーラブルに実行するための最善の方法 ※講演は翻訳資料にて行います。 - Getting the Best...
PySparkによるジョブを、より速く、よりスケーラブルに実行するための最善の方法  ※講演は翻訳資料にて行います。 - Getting the Best...PySparkによるジョブを、より速く、よりスケーラブルに実行するための最善の方法  ※講演は翻訳資料にて行います。 - Getting the Best...
PySparkによるジョブを、より速く、よりスケーラブルに実行するための最善の方法 ※講演は翻訳資料にて行います。 - Getting the Best...Holden Karau
 

Mais procurados (20)

データ収集の基本と「JapanTaxi」アプリにおける実践例
データ収集の基本と「JapanTaxi」アプリにおける実践例データ収集の基本と「JapanTaxi」アプリにおける実践例
データ収集の基本と「JapanTaxi」アプリにおける実践例
 
Docker Compose 徹底解説
Docker Compose 徹底解説Docker Compose 徹底解説
Docker Compose 徹底解説
 
組織にテストを書く文化を根付かせる戦略と戦術
組織にテストを書く文化を根付かせる戦略と戦術組織にテストを書く文化を根付かせる戦略と戦術
組織にテストを書く文化を根付かせる戦略と戦術
 
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
 
ドメイン駆動開発 勉強会 ①
ドメイン駆動開発 勉強会 ①ドメイン駆動開発 勉強会 ①
ドメイン駆動開発 勉強会 ①
 
事業成長にコミットするエンジニア組織への道のり
事業成長にコミットするエンジニア組織への道のり事業成長にコミットするエンジニア組織への道のり
事業成長にコミットするエンジニア組織への道のり
 
グラフ構造のデータモデルをPower BIで可視化してみた
グラフ構造のデータモデルをPower BIで可視化してみたグラフ構造のデータモデルをPower BIで可視化してみた
グラフ構造のデータモデルをPower BIで可視化してみた
 
「実践ドメイン駆動設計」 から理解するDDD (2018年11月)
「実践ドメイン駆動設計」 から理解するDDD (2018年11月)「実践ドメイン駆動設計」 から理解するDDD (2018年11月)
「実践ドメイン駆動設計」 から理解するDDD (2018年11月)
 
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
 
事業のグロースを支えるDataOpsの現場 #DataOps #DevSumi #デブサミ
事業のグロースを支えるDataOpsの現場 #DataOps #DevSumi #デブサミ事業のグロースを支えるDataOpsの現場 #DataOps #DevSumi #デブサミ
事業のグロースを支えるDataOpsの現場 #DataOps #DevSumi #デブサミ
 
ゼロから作るKubernetesによるJupyter as a Service ー Kubernetes Meetup Tokyo #43
ゼロから作るKubernetesによるJupyter as a Service ー Kubernetes Meetup Tokyo #43ゼロから作るKubernetesによるJupyter as a Service ー Kubernetes Meetup Tokyo #43
ゼロから作るKubernetesによるJupyter as a Service ー Kubernetes Meetup Tokyo #43
 
これからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきことこれからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきこと
 
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
 
今なら間に合う分散型IDとEntra Verified ID
今なら間に合う分散型IDとEntra Verified ID今なら間に合う分散型IDとEntra Verified ID
今なら間に合う分散型IDとEntra Verified ID
 
Singularityで分散深層学習
Singularityで分散深層学習Singularityで分散深層学習
Singularityで分散深層学習
 
データモデリング入門2021
データモデリング入門2021データモデリング入門2021
データモデリング入門2021
 
3週連続DDDその1 ドメイン駆動設計の基本を理解する
3週連続DDDその1  ドメイン駆動設計の基本を理解する3週連続DDDその1  ドメイン駆動設計の基本を理解する
3週連続DDDその1 ドメイン駆動設計の基本を理解する
 
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込む45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
 
モジュールの凝集度・結合度・インタフェース
モジュールの凝集度・結合度・インタフェースモジュールの凝集度・結合度・インタフェース
モジュールの凝集度・結合度・インタフェース
 
PySparkによるジョブを、より速く、よりスケーラブルに実行するための最善の方法 ※講演は翻訳資料にて行います。 - Getting the Best...
PySparkによるジョブを、より速く、よりスケーラブルに実行するための最善の方法  ※講演は翻訳資料にて行います。 - Getting the Best...PySparkによるジョブを、より速く、よりスケーラブルに実行するための最善の方法  ※講演は翻訳資料にて行います。 - Getting the Best...
PySparkによるジョブを、より速く、よりスケーラブルに実行するための最善の方法 ※講演は翻訳資料にて行います。 - Getting the Best...
 

Destaque

WordPress APIで作るモバイルアプリ
WordPress APIで作るモバイルアプリWordPress APIで作るモバイルアプリ
WordPress APIで作るモバイルアプリアシアル株式会社
 
リクルートAPIとValuecommerceと WordPressの組み合わせで 便利で成果の出る サイトをつくろう
リクルートAPIとValuecommerceと WordPressの組み合わせで 便利で成果の出る サイトをつくろうリクルートAPIとValuecommerceと WordPressの組み合わせで 便利で成果の出る サイトをつくろう
リクルートAPIとValuecommerceと WordPressの組み合わせで 便利で成果の出る サイトをつくろうTakahiro Nakahata
 
WordPressで提供するWeb API
WordPressで提供するWeb APIWordPressで提供するWeb API
WordPressで提供するWeb APIYuko Toriyama
 
WordPressといろんなAPIを組み合わせてWebアプリを作ろう
WordPressといろんなAPIを組み合わせてWebアプリを作ろうWordPressといろんなAPIを組み合わせてWebアプリを作ろう
WordPressといろんなAPIを組み合わせてWebアプリを作ろうTsuzurahara Tohru
 
Mtddc meetup TOKYO 2014 LT SSL証明書と現実
Mtddc meetup TOKYO 2014 LT  SSL証明書と現実Mtddc meetup TOKYO 2014 LT  SSL証明書と現実
Mtddc meetup TOKYO 2014 LT SSL証明書と現実Masaki Osugi
 
最新UIフレームワーク Onsen UI2で カッコイイWordPress連携アプリを作る方法
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
最新UIフレームワーク Onsen UI2で カッコイイWordPress連携アプリを作る方法アシアル株式会社
 
Google Play Developer APIを使ってみた
Google Play Developer APIを使ってみたGoogle Play Developer APIを使ってみた
Google Play Developer APIを使ってみたshinya sakemoto
 
オープンデータプラグイン紹介資料
オープンデータプラグイン紹介資料オープンデータプラグイン紹介資料
オープンデータプラグイン紹介資料Naokazu Nohara
 
WordPressサイトをiPhoneアプリにしてみた
WordPressサイトをiPhoneアプリにしてみたWordPressサイトをiPhoneアプリにしてみた
WordPressサイトをiPhoneアプリにしてみたKiharu Sasaki
 
YAPC::Kansai 2017 - macOSネイティブアプリ作成におけるPerlの活用
YAPC::Kansai 2017 - macOSネイティブアプリ作成におけるPerlの活用YAPC::Kansai 2017 - macOSネイティブアプリ作成におけるPerlの活用
YAPC::Kansai 2017 - macOSネイティブアプリ作成におけるPerlの活用純生 野田
 
WordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoyaWordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoyaShinichi Nishikawa
 
http://skyblueactivityhub.blogspot.com/2010/09/plot-diagrams.html
http://skyblueactivityhub.blogspot.com/2010/09/plot-diagrams.htmlhttp://skyblueactivityhub.blogspot.com/2010/09/plot-diagrams.html
http://skyblueactivityhub.blogspot.com/2010/09/plot-diagrams.htmlBISS
 
OSS Bar Camp - The growing usage of Open Source desktop client SW in IBM
OSS Bar Camp - The growing usage of Open Source desktop client SW in IBM OSS Bar Camp - The growing usage of Open Source desktop client SW in IBM
OSS Bar Camp - The growing usage of Open Source desktop client SW in IBM Brian O'Donovan
 
Adwords tartalmi (display) halozat
Adwords tartalmi (display) halozatAdwords tartalmi (display) halozat
Adwords tartalmi (display) halozatKlikkmarketing
 
Intelligent Operations Center for Mocial Media Analytics
Intelligent Operations Center for Mocial Media AnalyticsIntelligent Operations Center for Mocial Media Analytics
Intelligent Operations Center for Mocial Media AnalyticsBrian O'Donovan
 

Destaque (20)

WordPress APIで作るモバイルアプリ
WordPress APIで作るモバイルアプリWordPress APIで作るモバイルアプリ
WordPress APIで作るモバイルアプリ
 
リクルートAPIとValuecommerceと WordPressの組み合わせで 便利で成果の出る サイトをつくろう
リクルートAPIとValuecommerceと WordPressの組み合わせで 便利で成果の出る サイトをつくろうリクルートAPIとValuecommerceと WordPressの組み合わせで 便利で成果の出る サイトをつくろう
リクルートAPIとValuecommerceと WordPressの組み合わせで 便利で成果の出る サイトをつくろう
 
WordPressで提供するWeb API
WordPressで提供するWeb APIWordPressで提供するWeb API
WordPressで提供するWeb API
 
WordPressといろんなAPIを組み合わせてWebアプリを作ろう
WordPressといろんなAPIを組み合わせてWebアプリを作ろうWordPressといろんなAPIを組み合わせてWebアプリを作ろう
WordPressといろんなAPIを組み合わせてWebアプリを作ろう
 
Wb tokyo 2013
Wb tokyo 2013Wb tokyo 2013
Wb tokyo 2013
 
Mtddc meetup TOKYO 2014 LT SSL証明書と現実
Mtddc meetup TOKYO 2014 LT  SSL証明書と現実Mtddc meetup TOKYO 2014 LT  SSL証明書と現実
Mtddc meetup TOKYO 2014 LT SSL証明書と現実
 
最新UIフレームワーク Onsen UI2で カッコイイWordPress連携アプリを作る方法
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
最新UIフレームワーク Onsen UI2で カッコイイWordPress連携アプリを作る方法
 
Google Play Developer APIを使ってみた
Google Play Developer APIを使ってみたGoogle Play Developer APIを使ってみた
Google Play Developer APIを使ってみた
 
オープンデータプラグイン紹介資料
オープンデータプラグイン紹介資料オープンデータプラグイン紹介資料
オープンデータプラグイン紹介資料
 
WordPressサイトをiPhoneアプリにしてみた
WordPressサイトをiPhoneアプリにしてみたWordPressサイトをiPhoneアプリにしてみた
WordPressサイトをiPhoneアプリにしてみた
 
YAPC::Kansai 2017 - macOSネイティブアプリ作成におけるPerlの活用
YAPC::Kansai 2017 - macOSネイティブアプリ作成におけるPerlの活用YAPC::Kansai 2017 - macOSネイティブアプリ作成におけるPerlの活用
YAPC::Kansai 2017 - macOSネイティブアプリ作成におけるPerlの活用
 
WordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoyaWordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoya
 
改善脹氣
改善脹氣改善脹氣
改善脹氣
 
http://skyblueactivityhub.blogspot.com/2010/09/plot-diagrams.html
http://skyblueactivityhub.blogspot.com/2010/09/plot-diagrams.htmlhttp://skyblueactivityhub.blogspot.com/2010/09/plot-diagrams.html
http://skyblueactivityhub.blogspot.com/2010/09/plot-diagrams.html
 
OSS Bar Camp - The growing usage of Open Source desktop client SW in IBM
OSS Bar Camp - The growing usage of Open Source desktop client SW in IBM OSS Bar Camp - The growing usage of Open Source desktop client SW in IBM
OSS Bar Camp - The growing usage of Open Source desktop client SW in IBM
 
Adwords tartalmi (display) halozat
Adwords tartalmi (display) halozatAdwords tartalmi (display) halozat
Adwords tartalmi (display) halozat
 
O jornal...
O jornal...O jornal...
O jornal...
 
Intelligent Operations Center for Mocial Media Analytics
Intelligent Operations Center for Mocial Media AnalyticsIntelligent Operations Center for Mocial Media Analytics
Intelligent Operations Center for Mocial Media Analytics
 
Word presslt
Word pressltWord presslt
Word presslt
 
O jornal...
O jornal...O jornal...
O jornal...
 

Semelhante a WordPressと外部APIとの連携

iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得Atsushi Tadokoro
 
SparqlEPCUが提供するlod開発プラットフォーム
SparqlEPCUが提供するlod開発プラットフォームSparqlEPCUが提供するlod開発プラットフォーム
SparqlEPCUが提供するlod開発プラットフォームChubu University
 
自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた
自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた
自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみたYuki Takei
 
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用Yatabe Terumasa
 
Develop Web Application with Node.js + Express
Develop Web Application with Node.js + ExpressDevelop Web Application with Node.js + Express
Develop Web Application with Node.js + ExpressAkinari Tsugo
 
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めようAdvancedTechNight
 
Infrastructure as code for azure
Infrastructure as code for azureInfrastructure as code for azure
Infrastructure as code for azureKeiji Kamebuchi
 
Data apiで実現 進化するwebの世界
Data apiで実現 進化するwebの世界Data apiで実現 進化するwebの世界
Data apiで実現 進化するwebの世界Yuji Takayama
 
モバイル開発@symfony
モバイル開発@symfonyモバイル開発@symfony
モバイル開発@symfonyDaichi Kamemoto
 
「Windows 8 ストア アプリ開発 tips」 hokuriku.net vol.11 (2013年1月26日)
「Windows 8 ストア アプリ開発 tips」  hokuriku.net vol.11 (2013年1月26日)「Windows 8 ストア アプリ開発 tips」  hokuriku.net vol.11 (2013年1月26日)
「Windows 8 ストア アプリ開発 tips」 hokuriku.net vol.11 (2013年1月26日)Fujio Kojima
 
初めての Data api cms どうでしょう - 大阪夏の陣
初めての Data api   cms どうでしょう - 大阪夏の陣初めての Data api   cms どうでしょう - 大阪夏の陣
初めての Data api cms どうでしょう - 大阪夏の陣Yuji Takayama
 
Apache Torqueについて
Apache TorqueについてApache Torqueについて
Apache Torqueについてtako pons
 
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会Yukihiro Kitazawa
 
Jqm20120210
Jqm20120210Jqm20120210
Jqm20120210cmtomoda
 
Ruby Postgres 2009
Ruby Postgres 2009Ruby Postgres 2009
Ruby Postgres 2009Akio Ishida
 

Semelhante a WordPressと外部APIとの連携 (20)

iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
 
SparqlEPCUが提供するlod開発プラットフォーム
SparqlEPCUが提供するlod開発プラットフォームSparqlEPCUが提供するlod開発プラットフォーム
SparqlEPCUが提供するlod開発プラットフォーム
 
自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた
自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた
自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた
 
test
testtest
test
 
Try Jetpack
Try JetpackTry Jetpack
Try Jetpack
 
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
 
Develop Web Application with Node.js + Express
Develop Web Application with Node.js + ExpressDevelop Web Application with Node.js + Express
Develop Web Application with Node.js + Express
 
emc++ chapter32
emc++ chapter32emc++ chapter32
emc++ chapter32
 
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
 
Infrastructure as code for azure
Infrastructure as code for azureInfrastructure as code for azure
Infrastructure as code for azure
 
Data apiで実現 進化するwebの世界
Data apiで実現 進化するwebの世界Data apiで実現 進化するwebの世界
Data apiで実現 進化するwebの世界
 
モバイル開発@symfony
モバイル開発@symfonyモバイル開発@symfony
モバイル開発@symfony
 
「Windows 8 ストア アプリ開発 tips」 hokuriku.net vol.11 (2013年1月26日)
「Windows 8 ストア アプリ開発 tips」  hokuriku.net vol.11 (2013年1月26日)「Windows 8 ストア アプリ開発 tips」  hokuriku.net vol.11 (2013年1月26日)
「Windows 8 ストア アプリ開発 tips」 hokuriku.net vol.11 (2013年1月26日)
 
後期03
後期03後期03
後期03
 
初めての Data api cms どうでしょう - 大阪夏の陣
初めての Data api   cms どうでしょう - 大阪夏の陣初めての Data api   cms どうでしょう - 大阪夏の陣
初めての Data api cms どうでしょう - 大阪夏の陣
 
Apache Torqueについて
Apache TorqueについてApache Torqueについて
Apache Torqueについて
 
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会
 
Gdg geo2
Gdg geo2Gdg geo2
Gdg geo2
 
Jqm20120210
Jqm20120210Jqm20120210
Jqm20120210
 
Ruby Postgres 2009
Ruby Postgres 2009Ruby Postgres 2009
Ruby Postgres 2009
 

Mais de Hidekazu Ishikawa

WordPressテーマ Lightning G3
WordPressテーマ Lightning G3 WordPressテーマ Lightning G3
WordPressテーマ Lightning G3 Hidekazu Ishikawa
 
人気テーマ(自称)には理由がある! Lightning Pro 便利機能
人気テーマ(自称)には理由がある! Lightning Pro 便利機能人気テーマ(自称)には理由がある! Lightning Pro 便利機能
人気テーマ(自称)には理由がある! Lightning Pro 便利機能Hidekazu Ishikawa
 
Lightning オンライン勉強会 #005 新バージョン解説簡易資料
Lightning オンライン勉強会 #005 新バージョン解説簡易資料Lightning オンライン勉強会 #005 新バージョン解説簡易資料
Lightning オンライン勉強会 #005 新バージョン解説簡易資料Hidekazu Ishikawa
 
初心者がつまずかないための、いちばんやさしい WordPress の用語解説
初心者がつまずかないための、いちばんやさしい WordPress の用語解説初心者がつまずかないための、いちばんやさしい WordPress の用語解説
初心者がつまずかないための、いちばんやさしい WordPress の用語解説Hidekazu Ishikawa
 
Gutenberg あれこれ in WordPress Meetup in 松本 Vol.14
Gutenberg あれこれ in WordPress Meetup in 松本 Vol.14Gutenberg あれこれ in WordPress Meetup in 松本 Vol.14
Gutenberg あれこれ in WordPress Meetup in 松本 Vol.14Hidekazu Ishikawa
 
超初心者のためのWordPressのサイトのデザインの微調整方法
超初心者のためのWordPressのサイトのデザインの微調整方法超初心者のためのWordPressのサイトのデザインの微調整方法
超初心者のためのWordPressのサイトのデザインの微調整方法Hidekazu Ishikawa
 
WordPress初心者のためのサイト運営虎の巻
WordPress初心者のためのサイト運営虎の巻WordPress初心者のためのサイト運営虎の巻
WordPress初心者のためのサイト運営虎の巻Hidekazu Ishikawa
 
WordCamp Haneda 2019 WordPress初心者のためのサイト運営虎の巻 #wchaneda
WordCamp Haneda 2019 WordPress初心者のためのサイト運営虎の巻 #wchanedaWordCamp Haneda 2019 WordPress初心者のためのサイト運営虎の巻 #wchaneda
WordCamp Haneda 2019 WordPress初心者のためのサイト運営虎の巻 #wchanedaHidekazu Ishikawa
 
簡単!自動バックアップ設定でWordPressを安心運用
簡単!自動バックアップ設定でWordPressを安心運用簡単!自動バックアップ設定でWordPressを安心運用
簡単!自動バックアップ設定でWordPressを安心運用Hidekazu Ishikawa
 
WordPressで給与明細管理!BillVektor Salary を作った!(改訂版)
WordPressで給与明細管理!BillVektor Salary を作った!(改訂版)WordPressで給与明細管理!BillVektor Salary を作った!(改訂版)
WordPressで給与明細管理!BillVektor Salary を作った!(改訂版)Hidekazu Ishikawa
 
WordPressで給与明細管理!BillVektor Salary を作った!
WordPressで給与明細管理!BillVektor Salary を作った!WordPressで給与明細管理!BillVektor Salary を作った!
WordPressで給与明細管理!BillVektor Salary を作った!Hidekazu Ishikawa
 
いしかわの発表 Gifu WordPress Meetup 20181124
いしかわの発表 Gifu WordPress Meetup 20181124いしかわの発表 Gifu WordPress Meetup 20181124
いしかわの発表 Gifu WordPress Meetup 20181124Hidekazu Ishikawa
 
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネスHidekazu Ishikawa
 
実録 情熱と苦悩のテーマ・プラグインビジネス
実録 情熱と苦悩のテーマ・プラグインビジネス実録 情熱と苦悩のテーマ・プラグインビジネス
実録 情熱と苦悩のテーマ・プラグインビジネスHidekazu Ishikawa
 
愛と涙のWordPress無理やりカスタマイズ事例集
愛と涙のWordPress無理やりカスタマイズ事例集愛と涙のWordPress無理やりカスタマイズ事例集
愛と涙のWordPress無理やりカスタマイズ事例集Hidekazu Ishikawa
 
テーマ・プラグイン開発の光と闇 #wctokyo
テーマ・プラグイン開発の光と闇 #wctokyoテーマ・プラグイン開発の光と闇 #wctokyo
テーマ・プラグイン開発の光と闇 #wctokyoHidekazu Ishikawa
 
Lightning ✕ ExUnit の開発背景と設計思想
Lightning ✕ ExUnit の開発背景と設計思想Lightning ✕ ExUnit の開発背景と設計思想
Lightning ✕ ExUnit の開発背景と設計思想Hidekazu Ishikawa
 
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
WordPress公式ディレクトリにテーマを登録しよう #wctokyoWordPress公式ディレクトリにテーマを登録しよう #wctokyo
WordPress公式ディレクトリにテーマを登録しよう #wctokyoHidekazu Ishikawa
 

Mais de Hidekazu Ishikawa (20)

WordPressテーマ Lightning G3
WordPressテーマ Lightning G3 WordPressテーマ Lightning G3
WordPressテーマ Lightning G3
 
人気テーマ(自称)には理由がある! Lightning Pro 便利機能
人気テーマ(自称)には理由がある! Lightning Pro 便利機能人気テーマ(自称)には理由がある! Lightning Pro 便利機能
人気テーマ(自称)には理由がある! Lightning Pro 便利機能
 
Lightning
LightningLightning
Lightning
 
Lightning オンライン勉強会 #005 新バージョン解説簡易資料
Lightning オンライン勉強会 #005 新バージョン解説簡易資料Lightning オンライン勉強会 #005 新バージョン解説簡易資料
Lightning オンライン勉強会 #005 新バージョン解説簡易資料
 
初心者がつまずかないための、いちばんやさしい WordPress の用語解説
初心者がつまずかないための、いちばんやさしい WordPress の用語解説初心者がつまずかないための、いちばんやさしい WordPress の用語解説
初心者がつまずかないための、いちばんやさしい WordPress の用語解説
 
Gutenberg あれこれ in WordPress Meetup in 松本 Vol.14
Gutenberg あれこれ in WordPress Meetup in 松本 Vol.14Gutenberg あれこれ in WordPress Meetup in 松本 Vol.14
Gutenberg あれこれ in WordPress Meetup in 松本 Vol.14
 
超初心者のためのWordPressのサイトのデザインの微調整方法
超初心者のためのWordPressのサイトのデザインの微調整方法超初心者のためのWordPressのサイトのデザインの微調整方法
超初心者のためのWordPressのサイトのデザインの微調整方法
 
WordPress初心者のためのサイト運営虎の巻
WordPress初心者のためのサイト運営虎の巻WordPress初心者のためのサイト運営虎の巻
WordPress初心者のためのサイト運営虎の巻
 
WordCamp Haneda 2019 WordPress初心者のためのサイト運営虎の巻 #wchaneda
WordCamp Haneda 2019 WordPress初心者のためのサイト運営虎の巻 #wchanedaWordCamp Haneda 2019 WordPress初心者のためのサイト運営虎の巻 #wchaneda
WordCamp Haneda 2019 WordPress初心者のためのサイト運営虎の巻 #wchaneda
 
簡単!自動バックアップ設定でWordPressを安心運用
簡単!自動バックアップ設定でWordPressを安心運用簡単!自動バックアップ設定でWordPressを安心運用
簡単!自動バックアップ設定でWordPressを安心運用
 
WordPressで給与明細管理!BillVektor Salary を作った!(改訂版)
WordPressで給与明細管理!BillVektor Salary を作った!(改訂版)WordPressで給与明細管理!BillVektor Salary を作った!(改訂版)
WordPressで給与明細管理!BillVektor Salary を作った!(改訂版)
 
WordPressで給与明細管理!BillVektor Salary を作った!
WordPressで給与明細管理!BillVektor Salary を作った!WordPressで給与明細管理!BillVektor Salary を作った!
WordPressで給与明細管理!BillVektor Salary を作った!
 
いしかわの発表 Gifu WordPress Meetup 20181124
いしかわの発表 Gifu WordPress Meetup 20181124いしかわの発表 Gifu WordPress Meetup 20181124
いしかわの発表 Gifu WordPress Meetup 20181124
 
いしかわの発表
いしかわの発表いしかわの発表
いしかわの発表
 
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
 
実録 情熱と苦悩のテーマ・プラグインビジネス
実録 情熱と苦悩のテーマ・プラグインビジネス実録 情熱と苦悩のテーマ・プラグインビジネス
実録 情熱と苦悩のテーマ・プラグインビジネス
 
愛と涙のWordPress無理やりカスタマイズ事例集
愛と涙のWordPress無理やりカスタマイズ事例集愛と涙のWordPress無理やりカスタマイズ事例集
愛と涙のWordPress無理やりカスタマイズ事例集
 
テーマ・プラグイン開発の光と闇 #wctokyo
テーマ・プラグイン開発の光と闇 #wctokyoテーマ・プラグイン開発の光と闇 #wctokyo
テーマ・プラグイン開発の光と闇 #wctokyo
 
Lightning ✕ ExUnit の開発背景と設計思想
Lightning ✕ ExUnit の開発背景と設計思想Lightning ✕ ExUnit の開発背景と設計思想
Lightning ✕ ExUnit の開発背景と設計思想
 
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
WordPress公式ディレクトリにテーマを登録しよう #wctokyoWordPress公式ディレクトリにテーマを登録しよう #wctokyo
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
 

Último

[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略Ryo Sasaki
 
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A surveyToru Tamaki
 
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)Hiroki Ichikura
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムsugiuralab
 
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...Toru Tamaki
 
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNetToru Tamaki
 
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdftaisei2219
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものですiPride Co., Ltd.
 
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Yuma Ohgami
 

Último (9)

[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
 
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
 
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
 
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
 
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
 
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
 
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
 

WordPressと外部APIとの連携

  • 3. 名古屋で株式会社ベクトル というウェブ制作会社をしています。 普段はWordPressを使って企業サイトなどを制作しながら生きています。 デザイナー上がりなので高度なPGやサーバー・DBなど、バックエンドの 部分は苦手です… 名前:石川栄和 Twitter : @kurudrive 2013 WordCampTokyo セッションパネラー 2013 WordFesNagoya セッションスピーカー 2013 WordCrab Fukui セッションスピーカー 2012 WordCamp Tokyo セッションスピーカー その他セミナーやLTも少し… 最近のWordPressコミュニティでの活動
  • 4. 書籍 いちばんやさしい WordPress の教本 人気講師が教える本格Webサイトの作り方 現場でかならず使われている WordPressデザインのメソッド
  • 7.
  • 11. 処理概要 ボタンを押したら位置情報を取得 1 2 取得した位置情報をURLに くっつけて近くのお城一覧ページへ 移動 http://kojoki.jp/nearby/?lat=緯度&lng=経度
  • 12. 処理概要 URLに付いた位置情報を 受け取る 3 4 DBからお城のデータを全件取得 5 位置情報が近い順に並び替えて 表示する
  • 13. 位置情報を扱う機能を作る前に この投稿データを位置情報と連携して使用するので、 カスタムフィールドに緯度・経度を登録します。 各お城の情報の作成 投稿又はカスタム投稿タイプに お城の写真や説明文などと共に 登録。
  • 14. 処理概要 ボタンを押したら位置情報を取得 1 2 取得した位置情報をURLにくっつけて 近くのお城一覧ページ(固定ページ)へ移動 URLに付いた位置情報を受け取る 3 4 DBからお城のデータを全件取得 5 位置情報が近い順に並び替えて表示する
  • 15. ユーザーの位置情報を取得するトリガー <a href =“#” id=“nearbyBtn”> 近くのお城を探す </a> Jsファイルへの記述 // ボタンがクリックされたら jQuery('a#nearbyBtn').click(function(){ // 位置情報取得の処理を実行 get_gps(); }); ここで位置情報取得の処理をする。 詳細は次へ…
  • 16. 位置情報を取得するjs function get_gps(){ if (navigator.geolocation) { // Geolocationが使える場合 // 現在の位置情報を取得 navigator.geolocation.getCurrentPosition( // (1)位置情報取得に成功したとき function (position) { lat = position.coords.latitude; lng = position.coords.longitude; location.href=" /nearby/?lat=" + lat + "&lng=" + lng; }, // (2)位置情報の取得に失敗した場合 function (error) { window.alert("位置情報の取得ができませんでした。"); } // function (error) ); } else { // Geolocationが使えない場合 window.alert("このブラウザでは位置情報が取得出来ないためご利用できません。"); } } // get_gps
  • 17. 取得した位置情報元に移動 function get_gps(){ if (navigator.geolocation) { // Geolocationが使える場合 // 現在の位置情報を取得 navigator.geolocation.getCurrentPosition( // (1)位置情報取得に成功したとき function (position) { lat = position.coords.latitude; lng = position.coords.longitude; location.href=" /nearby/?lat=" + lat + "&lng=" + lng; }, // (2)位置情報の取得に失敗した場合 function (error) { window.alert("位置情報の取得ができませんでした。"); } // function (error) ); } else { // Geolocationが使えない場合 window.alert("このブラウザでは位置情報が取得出来ないためご利用できません。"); } } // get_gps 緯度 経度 近くのお城一覧用固定ページ (スラッグ:nearby)へ移動。 その際に取得した緯度経度情報を パラメーターとしてくっつける。 http://kojoki.jp/nearby/?lat=35.164844099999996&lng=136.8965278
  • 18. Jsファルに記述するサンプルコード jQuery(document).ready(function(jQuery){ function get_gps(){ if (navigator.geolocation) { // Geolocationが使える場合 // 現在の位置情報を取得 navigator.geolocation.getCurrentPosition( // (1)位置情報取得に成功したとき function (position) { lat= position.coords.latitude; lng= position.coords.longitude; location.href=" /nearby/?lat=" + lat + "&lng=" + lng; }, // (2)位置情報の取得に失敗した場合 function (error) { window.alert("位置情報の取得ができませんでした。"); } // function (error) ); } else { // Geolocationが使えない場合 window.alert("このブラウザでは位置情報が取得出来ないためご利用できません。"); } } // get_gps // ボタンがクリックされたら jQuery('a#nearbyBtn').click(function(){ // 位置情報取得の処理を実行 get_gps(); }); }); この記述をしているjsファイル自体の読み込み場所に よっては不要
  • 19. 処理概要 ボタンを押したら位置情報を取得 1 2 取得した位置情報をURLにくっつけて 近くのお城一覧ページ(固定ページ)へ移動 URLに付いた位置情報を受け取る 3 4 DBからお城のデータを全件取得 5 位置情報が近い順に並び替えて表示する
  • 20. お城一覧用ページで位置情報を受け取る 近くのお城一覧ページ用のテンプレートファイルで URLについている位置情報を受け取る <?php // パラメターから位置情報を取得 $lat = (isset($_GET['lat'])) ? esc_html($_GET['lat']) : ''; $lng = (isset($_GET['lng'])) ? esc_html($_GET['lng']) : ''; ?> http://kojoki.jp/nearby/?lat=緯度&lng=経度
  • 21. 処理概要 ボタンを押したら位置情報を取得 1 2 取得した位置情報をURLにくっつけて 近くのお城一覧ページ(固定ページ)へ移動 URLに付いた位置情報を受け取る 3 4 DBからお城のデータを全件取得 5 位置情報が近い順に並び替えて表示する
  • 22. 登録されているお城情報を取得 データベースに登録されているお城の情報(投稿 データ)をとりあえず全件取得して、 $spot_items に入れます。 /*-------------------------------------------*/ /* 現在登録されている城情報を全て取得 /*-------------------------------------------*/ $spot_items = get_posts( array( ‘post_type’ => ‘post’, // お城情報が入っている投稿タイプ ‘posts_per_page’ => -1, // 全件 ) );
  • 23. 処理概要 ボタンを押したら位置情報を取得 1 2 取得した位置情報をURLにくっつけて 近くのお城一覧ページ(固定ページ)へ移動 URLに付いた位置情報を受け取る 3 4 DBからお城のデータを全件取得 5 位置情報が近い順に並び替えて表示する
  • 24. 取得したお城情報に距離情報を追加したい Array ( [0] => WP_Post Object ( [ID] => 001 [post_title] => 名古屋城 (以下略) [distance] => (距離の数値) ) [1] => WP_Post Object ( [ID] => 002 [post_title] => 清洲城 投稿ID 投稿タイトル 距離で並べ替えるために こんな感じで距離の情報を 追加したい 取得したお城情報 $spot_items の中身
  • 25. 現在地との距離を算出して追加 foreach ($spot_items as $key => $spot_item) { // カスタムフィールドから緯度経度情報を取得 $spotLat = get_post_meta($spot_item->ID,'Map_lat',true); $spotLng = get_post_meta($spot_item->ID,'Map_lng',true); if (($spotLat) && ($spotLng)) { // 現在地からの距離の算出 $distanceLat = $spotLat - $lat; $distanceLng = $spotLng - $lng; $distance = sqrt(pow($distanceLat,2)+pow($distanceLng,2)); // 並び替え用の数値として距離「distance」を追加 $spot_items[$key]->distance = $distance; } } ※本当は地球の「丸さ」を 考慮した計算式の方が良い
  • 26. お城情報の並び替え /* 距離で並び替えるという比較関数を定義 /*-------------------------------------------*/ function itemsort_by_distance( $a , $b ){ //距離を比較 $spot_items = strcmp( $a->distance , $b->distance ); return $spot_items; } /* 比較関数に書いたルールで並び替え /*-------------------------------------------*/ usort( $spot_items , "itemsort_by_distance" );
  • 27. 並び替えたデータの出力 foreach ($spot_items as $key => $post) { the_title(); echo '<br />'; } wp_reset_postdata(); 近い順に並んだお城情報 $spot_items を ループして順番に表示する。
  • 28. サンプルソース /*-------------------------------------------*/ /* URLのパラメター(緯度と経度の位置情報)を取得 /*-------------------------------------------*/ $lat = (isset($_GET['lat'])) ? esc_html($_GET['lat']) : ''; $lng = (isset($_GET['lng'])) ? esc_html($_GET['lng']) : ''; /*-------------------------------------------*/ /* 距離チェック /*-------------------------------------------*/ /* 現在登録されている城情報を全て取得 /*-------------------------------------------*/ $spot_items = get_posts( array( 'post_type' => 'post', // カスタム投稿タイプチェックイン 'posts_per_page' => -1, // 全件 ) ); /* 各お城情報について、現在地からの距離を算出してデータに追加 /*-------------------------------------------*/ foreach ($spot_items as $key => $spot_item) { $spotLat = get_post_meta($spot_item->ID,'Map_lat',true); $spotLng = get_post_meta($spot_item->ID,'Map_lng',true); if (($spotLat) && ($spotLng)) { $distanceLat = $spotLat - $lat; $distanceLng = $spotLng - $lng; // 距離の算出 pow = 乗算 / sqrt = 平方根 $distance = sqrt(pow( $distanceLat ,2) + pow( $distanceLng ,2)); // 並び替え用の数値として距離「distance」を追加 $spot_items[$key]->distance = $distance; } } /* 距離で並び替えるという比較関数を定義 /*-------------------------------------------*/ function itemsort_by_distance( $a , $b){ //距離を比較 $spot_items = strcmp( $a->distance , $b->distance ); return $spot_items; } /* 比較関数にそって並び替え /*-------------------------------------------*/ usort( $spot_items , "itemsort_by_distance" ); /*-------------------------------------------*/ /* 並び替えた城情報を出力 /*-------------------------------------------*/ foreach ($spot_items as $key => $post) { the_title(); echo '<br />'; } wp_reset_postdata();
  • 30. 処理概要 各お城の詳細ページでチェックイン ボタンを押したら位置情報を取得 1 2 お城の位置情報と、取得した位置 情報を比較して判定。 3 チェックイン成功だったら そのデータを保存する。
  • 32. お城詳細画面のチェックインボタン 未ログイン ログイン済 ログインしている時だけチェックインボタンが 表示されるようにします。
  • 33. ログインしていたら チェックインボタンを表示 <div id="message"></div> <div class="sectionFrame" id="checkinSection"> <?php if ( is_user_logged_in() == TRUE ) { ?> <p class="center"> <a href="#" id="checkinBtn"> 攻略の狼煙を上げる!(現地でGPSチェックイン) </a> </p> <?php } else { ?> ( ログインしていない時の表示 ) <?php } ?> </div>
  • 34. 位置情報の取得 <script type="text/javascript"> jQuery(document).ready(function($){ // チェックイン処理開始 jQuery('#checkinBtn').click(function(){ if (navigator.geolocation) { // Geolocationが使える場合 // 現在の位置情報を取得 navigator.geolocation.getCurrentPosition( // (1)位置情報取得に成功したとき function (position) { lat = position.coords.latitude; lng = position.coords.longitude; ここでは single.php に 直接記述 チェックインボタンが 押されたら実行 緯度 経度
  • 35. 位置判定用の座標生成 latMax = <?php echo esc_html(post_custom("Map_lat")) ?> + 0.015; latMin = <?php echo esc_html(post_custom("Map_lat")) ?> - 0.015; lngMax = <?php echo esc_html(post_custom("Map_lng")) ?> + 0.015; lngMin = <?php echo esc_html(post_custom("Map_lng")) ?> - 0.015; お城の位置情報をカスタムフィールド から取得して判定合格エリアの 座標生成 ( post_custom("Map_lat"),post_custom("Map_lng") )
  • 36. 位置判定処理 // チェックインの判定処理 if ( ( latMax > lat ) && ( lat > latMin ) && ( lngMax > lng ) && ( lng > lngMin ) ) { // チェックイン成功 } else { // チェックイン失敗 jQuery(“#message”).html(‘離れています'); } ( lat , lng ) 失敗したらボタンの上にメッセージを表示
  • 37. // チェックイン成功ページ(固定ページ)へ移動 location.href="<?php echo site_url(); ?>/page-checkin_post/"; 移動先の固定ページ(スラッグ:page-checkin_post/) チェックイン成功時の処理 // 判定の場合、成功したお城のID(投稿ID)をcookieに保存 // ※ あらかじめ別途 jquery.cookie.js の読み込みが必要 jQuery.cookie(“checkinSpotID”, “<?php the_ID(); ?>”, { expires: 1 , path: '/page-checkin_post/' }); チェックインしたお城の ID(投稿ID) 移動先のページでお城のIDを受け取って保存します。
  • 38. サンプルソース <div id="message"></div> <div class="sectionFrame" id="checkinSection"> <?php if ( is_user_logged_in() == TRUE ) { ?> <p class="center"> <a href="#" id="checkinBtn"> 攻略の狼煙を上げる!(現地でGPSチェックイン) </a> </p> <?php } else { ?> ( ログインしていない時の表示 ) <?php } ?> </div> <script type="text/javascript"> jQuery(document).ready(function($){ // チェックイン処理開始 jQuery('#checkinBtn').click(function(){ if (navigator.geolocation) { // Geolocationが使える場合 // 現在の位置情報を取得 navigator.geolocation.getCurrentPosition( // (1)位置情報取得に成功したとき function (position) { lat= position.coords.latitude; lng= position.coords.longitude; // お城の位置情報をカスタムフィールドから取得して判定合格エリアの座標生成 latMax = <?php echo esc_html(post_custom("Map_lat")) ?> + 0.015; latMin = <?php echo esc_html(post_custom("Map_lat")) ?> - 0.015; lngMax = <?php echo esc_html(post_custom("Map_lng")) ?> + 0.015; lngMin = <?php echo esc_html(post_custom("Map_lng")) ?> - 0.015; // チェックインの判定処理 if ( ( latMax > lat ) && ( lat > latMin ) && ( lngMax > lng ) && ( lng > lngMin ) ) { // 判定OK jQuery.cookie("checkinSpotID", "<?php the_ID(); ?>",{ expires: 1 , path: '/page-checkin_post/' }); // チェックイン成功ページへ移動 location.href="<?php echo site_url(); ?>/page-checkin_post/"; } else { // 判定失敗 jQuery("#message").html('離れている場合に表示するメッセージ'); } // 判定ここまで }, // (2)位置情報の取得に失敗した場合 function (error) { window.alert("位置情報の取得ができませんでした。"); } // function (error) ); } else { // Geolocationが使えない場合 window.alert("このブラウザでは位置情報が取得出来ないためご利用できません。"); } }); }); </script>
  • 40. 保存するチェックイン情報 ユーザーのチェックイン情報を保存したい。 最低限保存する情報 •チェックインしたユーザーは誰か? ログインユーザーID •チェックインしたお城はどこか? お城ページの投稿ID どこに保存するか?
  • 41. チェックイン情報の保存先 カスタム投稿タイプを追加して、 そこに投稿としてに保存! 最低限保存する情報 •チェックインしたユーザーIDの保存先 投稿者に設定 •チェックインしたお城ID(投稿ID)の保存先 タイトル又はカスタムフィールドに保存
  • 42. 保存したデータの引き出し例 $posts = get_posts(array( 'post_type' => 'checkin', 'posts_per_page' => -1, 'author' => $userID, )); ユーザーIDが $userID の人のチェックイン履歴 投稿タイプが’checkin’ 作成者が $userID 投稿者アーカイブページでも同様にユーザーの チェックイン履歴ページになる。
  • 43. ログインユーザーIDと チェックインしたお城のIDを取得 ログインしているユーザーID global $user_ID; get_currentuserinfo(); クッキーからチェックインした城のIDを取得 if(isset($_COOKIE["checkinSpotID"])) { $checkInId = $_COOKIE["checkinSpotID"]; } チェックイン成功ページでの処理
  • 44. 重複投稿チェック /*-------------------------------------------*/ /* 今日の同じ城でのチェックイン情報を取得 /*-------------------------------------------*/ $args = array( 'post_type' => 'checkin', // カスタム投稿タイプチェックイン 'orderby' => 'date', // 日付で並び替え 'order' => 'DESC', // 新着順 'posts_per_page' => 1, // 1件のみ(最新だけで良いので) 'author' => $user_ID, // 現在のログインユーザー 'meta_query' => array( // カスタムフィールドの絞り込み条件 array( 'key'=>'checkin_spot_id', 'value'=>$checkInId // 今回のチェックインIDと同じ城番号 ), ), 'date_query'=>array( array( 'year'=>date_i18n( 'Y' ), 'monthnum'=>date_i18n( 'm' ), 'day'=>date_i18n( 'd' ), ) ) ); $todayCheckinData = get_posts($args);
  • 45. 重複投稿チェック // 今日のGPS攻略が無い場合投稿 // (その他のパラメーターは余分な処理の実行を防止するため) if ( !$todayCheckinData && isset($checkInId) && $checkInId && $user_ID ){ /*-------------------------------------------*/ /* チェックイン情報を投稿 /*-------------------------------------------*/ } 今日同じ城でのチェックインが無い場合
  • 46. チェックイン情報を 投稿するためのデータを作成 $checkin_post = array(); // 投稿タイプ $checkin_post['post_type'] = 'checkin'; // 投稿の状態 $checkin_post['post_status'] = 'publish'; // 投稿のタイトル $checkin_post['post_title'] = get_the_title($checkInId); // 投稿の作成者 $checkin_post['post_author'] = $user_ID; ※お城のIDはカスタムフィールドなので別の場所で指定 タイトルはチェックインしたお城の名前
  • 47. チェックイン情報を投稿 $posted_ID = wp_insert_post( $checkin_post ); カスタム投稿タイプ ’checkin’ に自動で投稿 新規投稿する関数 新規投稿する情報 投稿に成功した時に、成功した投稿のIDが返ってくる カスタムフィールドにお城のIDを保存する add_post_meta($posted_ID, 'checkin_spot_id', $checkInId); 上記で成功したチェックイン情報の投稿ID 保存先のカスタムフィールドのキー チェックインしたお城ID
  • 48. サンプルソース // ユーザー情報を取得 global $user_ID; get_currentuserinfo(); // クッキーからチェックインした城のIDを取得 if(isset($_COOKIE["checkinSpotID"])) { $checkInId = $_COOKIE["checkinSpotID"]; } /*-------------------------------------------*/ /* 重複チェック /*-------------------------------------------*/ /* 今日の同じ城でのチェックイン情報を取得 /*-------------------------------------------*/ $args = array( 'post_type' => 'checkin', // カスタム投稿タイプチェックイン 'orderby' => 'date', // 日付で並び替え 'order' => 'DESC', // 新着順 'posts_per_page' => 1, // 1件のみ(最新だけで良いので) 'author' => $user_ID, // 現在のログインユーザー 'meta_query' => array( // カスタムフィールドの絞り込み条件 array( 'key'=>'checkin_spot_id', 'value'=>$checkInId // 今回のチェックインIDと同じ城番号 ), ), 'date_query'=>array( array( 'year'=>date_i18n( 'Y' ), 'monthnum'=>date_i18n( 'm' ), 'day'=>date_i18n( 'd' ), ) ) ); $todayCheckinData = get_posts($args); // 今日のGPS攻略が無い場合投稿(その他のパラメーターは余分な処理の実行を防止するため) if ( !$todayCheckinData && isset($checkInId) && $checkInId && $user_ID ){ /*-------------------------------------------*/ /* チェックイン情報を投稿 /*-------------------------------------------*/ // 投稿するためのデータを作成 $checkin_post = array(); $checkin_post['post_type'] = 'checkin'; $checkin_post['post_status'] = 'publish'; $checkin_post['post_title'] = get_the_title($checkInId); $checkin_post['post_author'] = $user_ID; if ($user_ID) { // データベースに投稿を追加 $posted_ID = wp_insert_post( $checkin_post ); // 今投稿したチェックインデータのカスタムフィールド「checkin_spot_id(チェックインした城のID)」に値を追加 add_post_meta($posted_ID, 'checkin_spot_id', $checkInId); } }
  • 52. WebAPIとは? ざっくり言うと 他のウェブサービスが提供している データを自由に使える 使用例 天気情報 お城のある 地域の天気を 表示
  • 55. データの取得方法 指定のURLにアクセスすると データが取得出来ます。 http:// APIデータ提供元URL + パラメーター http://weather.livedoor.com/forecast/webservice/json/v1 ?city=400040 city が 400040(福岡県・久留米市)の情報
  • 56. パラメーターの確認 提供されているAPIごとに 用意されているパラメータは違う Livedoor天気情報の場合 「city」というパラメーターと、 その値が用意されている。 お城のページごとに地域に あった city の 値を登録
  • 57. 各お城詳細ページに天気の地域IDを登録 お城のページごとに、 そのお城のある地域に該当する city の 値を登録します。 ここではカスタムフィールド ‘weatherID’ を用意して、そこに手動で 登録します。
  • 58. 天気情報の結果をリクエストするURLを作成 $city = esc_html(post_custom('weatherID')); お城の詳細ページで、カスタムフィールドに 保存した地域の天気IDを取得する。 $url = "http://weather.livedoor.com/forecast/webservice/json/v1?city=".$city; リクエストするURLを作成
  • 59. リクエストした結果を受け取って配列に $json_tenki_data = file_get_contents($url); リクエストURLにアクセスすると、その地域の 天気情報データが得られます。 Livedoor 天気情報の場合データは json 形式なので、変 数名もわかりやすいように $json_ としています。 jsonのままだと使いにくいので配列に変換 $tenkis = json_decode($json_tenki_data);
  • 62. 必要な部分の取り出して出力 $tenkis_forecasts = $tenkis->forecasts; 今日明日の天気情報部分のみ格納 <?php foreach ($tenkis_forecasts as $key => $dayTenki) { ?> <dl> <dt class="today"><?php echo $dayTenki->dateLabel ?></dt> <dd class="data"> <img src="<?php echo $dayTenki->image->url ?>" alt" /><br /> <?php echo $dayTenki->telop ?> </dd> </dl> <?php } ?> ※実際にはエスケープ処理します。
  • 63. サンプルソース // お城の詳細ページで、カスタムフィールドに保存した地域の天気IDを取得する $city = esc_html(post_custom('weatherID')); // 地域のIDが入っていたら実行 if ($city): // リクエストするURLを作成 $url = "http://weather.livedoor.com/forecast/webservice/json/v1?city=".$city; // 指定のエリア(都市)の情報をjson形式で取得 $json_tenki_data = file_get_contents($url); // 配列に格納 $tenkis = json_decode($json_tenki_data); // 今日明日の天気のみ $tenkis に格納 $tenkis_forecasts = $tenkis->forecasts; ?> <?php foreach ($tenkis_forecasts as $key => $dayTenki) { ?> <dl> <dt class="today"><?php echo esc_html($dayTenki->dateLabel); ?></dt> <dd class="data"> <img src="<?php echo esc_html($dayTenki->image->url); ?>" alt="<?php echo esc_html($dayTenki->image->title); ?>" /><br /> <?php echo esc_html($dayTenki->telop) ; ?> </dd> </dl> <?php } ?> <?php endif; ?>
  • 64. 参考資料 http://www.communitycom.jp/2012/07/14/wordvolcano/ WordPressプラグイン & WebAPI 活用ガイドブック 星野邦敏、西川伸一 WordPressの機能を簡単に拡張できる「プラグイン」と、外部 のWebサービスの機能や情報をWordPressサイトで使うこと のできる「WebAPI」を、辞典形式に紹介している書籍です。 いろんなAPIが探せる http://wafl.net/
  • 65. WordPress + API で 面白いサービスを作りましょう!