WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！
株式会社コミュニティコム
星野 邦敏〒116-0013
東京都荒川区西日暮里5-37-5 NSO2階
URL： http://www.communitycom.jp/
E-MAIL： mail@communitycom.jp

1

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

目次
０． 自己紹介（2分）
１． WordPressの概要と導入（12分）
２． WordPressとWeb APIとの連携（12分）
３． WordPressでのスマートフォン対応（12分）
４． WordPressの情報の調べ方や勉強会（2分）
2WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

目次
０． 自己紹介（2分）
１． WordPressの概要と導入（12分）
２． WordPressとWeb APIとの連携（12分）
３． WordPressでのスマートフォン対応（12分）
４． WordPressの情報の調べ方や勉強会（2分）
3WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

自己紹介
星野 邦敏(ほしの くにとし)
Twitter ： @khoshino
Facebook : 星野邦敏（Kunitoshi Hoshino）
株式会社コミュニティコムという会社で、自社運営サイトやアプリ、他企業様向けサイトも作っています。
オープンソースの活動をしたり、IT系の勉強会を主催したり、地域の活動をしたり。
WordPressをCMSとしてWEBサイトを作ることが増えています。
4

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

自己紹介
WordPressのイベントである「WordCamp」や「WordBench」にスタッフやスピーカーとして参加。

5

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

自己紹介
WordPress日本語サイトの「イベントカレンダー」を更新する係。

ココ6

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

自己紹介
自社サイト運営から法人化。
ASPのイベントでお話する機会も。

7

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

目次
０． 自己紹介
１． WordPressの概要と導入
２． WordPressとWeb APIとの連携
３． WordPressでのスマートフォン対応
４． WordPressの情報の調べ方や勉強会
8WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

サンプルサイト水族館コミュニティ
http://www.japan-aquarium.com/

9

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
同一URLで、PCサイト、スマートフォンサイト、ガラケー（携帯）サイトの振り分けを自動で実現。

10

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
プラグインをインストールするだけ！

・Twitterに「ツイートする」ボタン
・Facebookの「いいね！」ボタンなどを、自分のサイトに設置してソーシャルな流れを作れる。

11

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
プラグインをインストールするだけ！
クリック一つで口コミ評価を出来るようにする。
＆
口コミ評価一覧リストを
サイドバーに表示する。

12

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
プラグインをインストールするだけ！
アクセスの多い記事順に自動でリスト化する。

13

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
プラグインをインストールするだけ！
各記事のコメントを一覧表示する。

14

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
プラグインをインストールするだけ！

条件検索機能15

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
プラグインをインストールするだけ！

スマートフォンや携帯電話からのアクセスは、
スマートフォンサイト・携帯サイトを自動的に振り分けて表示させる。
16

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
プラグインをインストールするだけ！

メールフォーム17

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
WordPressに元々備わっている機能
WordPressのカスタムフィールド

18

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
WordPressに元々備わっている機能

新着記事をトップページに表示。

19

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
WordPressに元々備わっている機能

他のブログの更新情報を
RSSで自動取得して表示。

20

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
WordPressに元々備わっている機能
WordPressのコメント欄を少しだけカスタマイズ

21

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
WordPressに元々備わっている機能
サイトのデザインは、
WordPressのデフォルトテーマ「Twenty Ten」を、子テーマにして、少しだけカスタマイズ
しただけ。

22

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
WordPressとAPIの連携（APIの活用事例）
各地域の天気予報を自動で取得する。

23

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
WordPressとAPIの連携（APIの活用事例）
各記事の水族館の位置を
Google Maps APIと連携して自動で地図に一覧表示させる。
＆
近いスポットはピンをまとめる。

24

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
WordPressとAPIの連携（APIの活用事例）
そのスポットの周辺の写真を自動で表示させる。

25

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
WordPressとAPIの連携（APIの活用事例）

各記事に関連する画像を自動表示する。
26

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
WordPressとAPIの連携（APIの活用事例）
その水族館について、Twitterの最新つぶやきを自動表示させる。

27

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
WordPressとAPIの連携（APIの活用事例）
そのスポットから２点間の直線距離の近い順番に、
カフェやレストランを、自動で一覧表示する。
この部分は、自動でアフィリエイトリンクになっていて成果の収益に繋がる。
→バリューコマース対応
28

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
WordPressとAPIの連携（APIの活用事例）
そのスポットから２点間の直線距離の近い順番に、
ホテルを、
自動で一覧表示する。
この部分は、自動でアフィリエイトリンクになっていて成果の収益に繋がる。
→バリューコマース対応
29

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
WordPressとAPIの連携（APIの活用事例）
記事に関連する商品を自動で一覧表示する。
この部分は、自動でアフィリエイトリンクになっていて成果の収益に繋がる。
→バリューコマース対応

30

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

WordPressとは？
・CMS（コンテンツ・マネジメント・システム）・ブログだけでなく、企業サイトやコミュニティサイトも・オープンソース（GPLライセンス）
・無料
・機能拡張が柔軟
・利用者が多い
・情報が多い・プログラムはPHP、データベースはMySQLで構成

31

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
世界トップ100万サイト中、WordPress利用率

１４．９％

マクラケン直子さんのブログより引用
http://detlog.org/2011/09/12/wordcamp-kobe-2011/32

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
CMSでのWordPressのシェア

５６．６％

マクラケン直子さんのブログより引用
http://detlog.org/2011/09/12/wordcamp-kobe-2011/33

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
世界の検索トレンド

Google トレンド34

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
日本の検索トレンド

Google トレンド35

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

ブログとしてもカイ士伝
IDEA*IDEA

BOOK・OFFスタッフブログ（「WordPress を使ったサイト –WordPress Codex 日本語版」より引用）
http://wpdocs.sourceforge.jp/%E5%88%A9%E7%94%A8%E8%80%85:Nao/WordPress_%E3% 36
82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

マガジンサイトとしても

TechCrunch Japan

ロイター通信

美的.com（「WordPress を使ったサイト –WordPress Codex 日本語版」より引用）
http://wpdocs.sourceforge.jp/%E5%88%A9%E7%94%A8%E8%80%85:Nao/WordPress_%E3% 37
82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入企業のサイトとしても

クックパッド株式会社

株式会社ベクター
IR・会社情報サイト

さいたまスーパーアリーナ（「WordPress を使ったサイト –WordPress Codex 日本語版」より引用）
http://wpdocs.sourceforge.jp/%E5%88%A9%E7%94%A8%E8%80%85:Nao/WordPress_%E3% 38
82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

学校のサイトとしても

昭和女子大学

神戸芸術工科大学

長岡工業高等専門学校（「WordPress を使ったサイト –WordPress Codex 日本語版」より引用）
http://wpdocs.sourceforge.jp/%E5%88%A9%E7%94%A8%E8%80%85:Nao/WordPress_%E3% 39
82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

海外のサイトとしても

Nikon

フォルクスワーゲン

PEPSI （ペプシ）のブログ（「WordPress を使ったサイト –WordPress Codex 日本語版」より引用）
http://wpdocs.sourceforge.jp/%E5%88%A9%E7%94%A8%E8%80%85:Nao/WordPress_%E3% 40
82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

震災の時にはスピーディな情報公開に貢献

助けあいジャパン

prayforjapan.jp

小出裕章 (京大助教)
非公式まとめ（「WordPress を使ったサイト –WordPress Codex 日本語版」より引用）
http://wpdocs.sourceforge.jp/%E5%88%A9%E7%94%A8%E8%80%85:Nao/WordPress_%E3% 41
82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
WordPressのアフィリエイト活用方法
１．ブログとして使う。
２．ポータルサイトとして使う。
３．ブログサービス運営側として使う。
４．APIやCSVデータと連動させて使う。
５．ニュース集約配信サイトとして使う。
６．メールマガジン配信サイトとして使う。
７．SNS（会員制サイト）として使う。
８．TwitterやFacebookと連動させたサイトとして使う。
・・・・・・などなど、WordPressの使い方はアイデア次第！
42

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

WordPressを利用すると・・・（１）好きな独自ドメイントで運営できる。
（２）自分の意図しない広告は入らない。
（３）文章や写真のデータを自分で管理できる。
（４）突然のサービス停止の心配がない 。
（５）自由にデザインや機能を追加できる。
43

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

WordPressを利用すると・・・（１）好きな独自ドメイントで運営できる。
無料のブログでは、
例えば、
http://ameblo.jp/（自分のアカウントID）
http://blogs.yahoo.co.jp/（自分のアカウントID）といった形になりますが、
WordPressをサーバーに設置して独自ドメインを取得すれば、自分のURLでサイトを運営することができます。
44

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

WordPressを利用すると・・・（２）自分の意図しない広告は入らない。
無料のブログでは、
その無料ブログサービスのPR広告が勝手に入ってしまうことも多くあります。そのPR広告を外すために有料版に切り替えてお金が掛かることもあると思います。
WordPressでは、レンタルサーバー代は掛かりますが、その分、自分の意図しない広告が入ることは今後もありません。
45

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

WordPressを利用すると・・・（３）文章や写真のデータを自分で管理できる。
無料のブログでは、文章や写真などのデータは、その無料ブログサービスのサーバー上にあり、データにアクセスできないことが多いです。
WordPressでは、自分の管理しているサーバーに全てのデータがあるので、いつでもアクセスが可能です。

46

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

WordPressを利用すると・・・（４）突然のサービス停止の心配がありません。
無料のブログでは、サービス停止で、ブログが強制的に無くなってしまう可能性もあります。
例）「さるさる日記」（http://www.diary.ne.jp/）
WordPress.orgは、サーバーインストール型なので、サービス停止によるブログ閉鎖などの心配がありません。

47

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

WordPressを利用すると・・・（５）自由にデザインや機能を追加できます。
無料のブログでは、デザインできる箇所に制約がある場合もあります。また、欲しい機能がサービスに備わっていない場合もあると思います。
WordPressでは、後述する「テーマ」と「プラグイン」により自由にデザインと機能を、選択して設置することができます。
慣れている人は、自分のイメージ通りに作ることもできるので、カスタマイズの柔軟性がとても高いです。
48

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
WordPress.com と WordPress.org＜WordPress.com＞＜WordPress.org＞

フリーのブログサービス

サーバーインストール型

・サーバーを用意する必要なく作れる。
・データベースの管理権限、FTP の・サーバーを用意する必要がある。
・自由度が高い。

アクセス権などが無く、テーマやプラグインのアップロードに制約。
・独自ドメインNG、一部に広告表示（有料オプションあり）

今回はorgの説明。
49

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

WordPressが動く環境
PHP バージョン 5.2.4 以上
MySQL バージョン 5.0.15 以上もし、レンタルサーバーを借りる時は一応、仕様を確認しましょう。
→ほとんどのレンタルサーバーで対応しています！
50

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

レンタルサーバー情報
WordPress Codex 日本語版
http://wpdocs.sourceforge.jp/レンタルサーバ情報のページが便利です。
さくらのレンタルサーバ、ロリポップ！、CORESERVER.JP、heteml、XREA、CPI、
チカッパ！、ファーストサーバ、ABLENET、め組サーバ、オーシャンインターネット、
MEDIAWARS、エックスサーバー、シックスコア、ハッスルサーバー、ギガーン、
livedoorレンタルサーバ、FC2レンタルサーバー、使えるねっと、美ら海レンタルサーバー、
フューチャースピリッツ、SpeeVer、カゴヤ・ジャパン、OCN ホスティング、WADAX、
ExpressWeb、BlueHost、DreamHost、Exclusive Hosting、Laughing Squid、
lunarpages、Media Temple、West Hosting・・・などなど。
51

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入「４分で解説！WordPressインストール」

http://www.youtube.com/watch?v=dfI9cnc8ac052

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

ワンクリックインストール
http://wpdocs.sourceforge.jp/WordPress_のインストール/ワンクリックインストール
国内の２０近いレンタルサーバーが、
WordPressワンクリックインストールに対応。
レンタルサーバーの管理画面から導入。
53

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

ワンクリックインストール
レンタルサーバーの「heteml（ヘテムル）」を例にして、
http://heteml.jp/「heteml（ヘテムル）」の管理画面からのワンクリックインストールを見てみましょう。
54

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

ワンクリックインストール①
55

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

ワンクリックインストール②

56WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

ワンクリックインストール③
57WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

ワンクリックインストール④
58WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

ワンクリックインストール
インストール完了！
ワンクリックインストールを使えば、インストールに１分も掛からない！？

59

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

wp-config.php
ワンクリックインストールの場合は、データベース情報を意識することが少ないので、必要になったら、
wp-config.phpファイルを見ましょう！

60

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

データベース情報などの確認
wp-admin /wp-content /wp-includes /index.php
license.txt
readme-ja.html
readme.html
wp-activate.php
wp-app.php
wp-atom.php

wp-blog-header.php
wp-comments-post.php
wp-commentsrss2.php
wp-config.php（wp-config-sample.php）
wp-cron.php
wp-feed.php
wp-links-opml.php
wp-load.php
wp-login.php

wp-mail.php
wp-pass.php
wp-rdf.php
wp-register.php
wp-rss2.php
wp-rss.php
wp-settings.php
wp-signup.php
wp-trackback.php
xmlrpc.php
61WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

投稿と固定ページ

記事を書くのに使うのは、基本、この２箇所。
※WordPress3.0から「カスタム投稿タイプ」ができましたが、これは応用的なので詳細はお話しません。
興味のある方は、検索などで調べてみてください。

62

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

投稿と固定ページ
投稿

固定ページ

・時系列の記事・カテゴリー＆タグなどで分類・投稿間で親子関係は無し
・投稿毎の専用テンプレートの選択は不可
例：ブログ記事、新着ニュース

・時系列ではなく、順序でソート・カテゴライズは無し
・階層化（親と子）構造が可能
・投稿毎の専用テンプレートの選択が可能
例：自己紹介、会社概要
63WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

投稿
新規投稿をクリック。

64

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

投稿

記事を書いて・・・

公開！
65

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

投稿
表示されました！
※表示の仕方は、テーマのコードの書き方によって変えられますが、
デフォルトテーマでは、時系列に表示されます。

66

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

投稿「カテゴリー」や「タグ」を使うことで、投稿記事を、分類することができます。
※WordPress3.0から「カスタムタクソノミー（カスタム分類）」ができましたが、これは応用的なので詳細はお話しません。
興味のある方は、検索などで調べてみてください。
67

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

投稿本に例えると・・・「カテゴリー」は、『章』。
「タグ」は、『付箋』。
というイメージ
68WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

投稿と固定ページ
投稿

固定ページ

・時系列の記事・カテゴリー＆タグなどで分類・投稿間で親子関係は無し
・投稿毎の専用テンプレートの選択は不可
例：ブログ記事、新着ニュース

・時系列ではなく、順序でソート・カテゴライズは無し
・階層化（親と子）構造が可能
・投稿毎の専用テンプレートの選択が可能
例：自己紹介、会社概要
69WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

固定ページ

新規追加をクリック。

70

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

固定ページ

記事の書き方は投稿と同じ
71

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

固定ページ
表示されました！
※時系列を意識せずに表示されます。

72

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

固定ページ
ページは、
・階層化して使うことができます。
・デザインテンプレートを複数用意して、切り替えることができます。
・順序も変えられます。

73WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

投稿と固定ページ

入力方法には、①ビジュアル、②HTMLの２種類があります。
①ビジュアルは、公開した記事の表示をイメージしながら直感的に編集することができます。
②HTMLは、HTMLコードを書いて編集します。（HTMLが分かる人向け）
74

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

投稿と固定ページ
・記事にパスワードを掛けたり、・下書き保存したり、・未来の日付で予約投稿したり、
できます。

75

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

投稿と固定ページ
画像の編集がWordPress上で出来ます！

ココをクリック76

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

投稿と固定ページ
画像の編集がWordPress上で出来ます！

77

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

投稿と固定ページ・画像の回転、・画像の反転、・トリミングなどができます。
※本格的な画像編集は、Photoshopなどのソフトを使いましょう。

78WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

投稿と固定ページ

アイキャッチ画像※WordPress3.0からの新機能。

79

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

テーマとは？
WEBデザインを変えるためのモノ。
ブログの「着せ替え」。
見た目の調整だけでなく、表示する内容を操ることもできます。
テーマは、自分で作ることも出来ます。
慣れてきたら、自分でカスタマイズすると、自由度が高まります。
80WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

テーマフォルダの確認
wp-admin /wp-content /wp-includes /index.php
license.txt
readme-ja.html
readme.html
wp-activate.php
wp-app.php
wp-atom.php

languages /plugins /themes /upgrade /uploads /index.php

twentyeleven /twentyten /index.php

ココにテーマフォルダを入れる！
81WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

テーマは管理画面からも選べます！
検索もできます！

82

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

テーマは管理画面からも選べます！

83

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

テーマはWordPress.orgからも選べます！

http://wordpress.org/extend/themes/
84WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

プラグインとは？
「追加機能」。
WordPressの本体はシンプルなので、自由に機能を追加するイメージ。
プラグインは、自分で作ることも出来ます。
慣れてきたら、自分でカスタマイズすると、自由度が高まります。

85WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

プラグインフォルダの確認
wp-admin /wp-content /wp-includes /index.php
license.txt
readme-ja.html
readme.html
wp-activate.php
wp-app.php
wp-atom.php

languages /plugins /themes /upgrade /uploads /index.php

akismet /wp-multibyte-patch /hello.php
index.php

ココにプラグインフォルダを入れる！
86WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

プラグインも管理画面から選べます！
検索もできます！

87

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

プラグインもWordPress.orgから選べます！

http://wordpress.org/extend/plugins/88WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

デフォルトのプラグインのご紹介有効化すると使えます！

・Akismet
コメントスパム対策
・Hello Dolly
プラグインの開発サンプルコード
・WP Multibyte Patch
マルチバイト文字による不具合の修正と強化

89

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入

プラグインの具体例
・Contact Form 7
メールフォームを作成
・inquiry-form-creator
確認画面付きメールフォームを作成
・Ktai Style
日本の携帯電話＆スマートフォン対応
・WPtouch
スマートフォン対応
・PS Auto Sitemap
サイトマップを自動作成
・Custom Field Template
カスタムフィールドのテンプレート設定

・Welcart
ショッピングサイト構築
・BuddyPress
SNS構築
・Subscribe2
メールマガジン構築
・Admin SSL
SSL対応
・WP Super Cache
キャッシュ生成、表示の高速化
・ WP-DB-Backup
データベースのバックアップ
・ Advertising Manager
広告管理90

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
Q：他のブログサービスからの移行、他のブログサービスへの移行は、できますか？
A：できます。
WordPressに元々備わっている機能である、「インポート」機能で、他のブログサービスからWordPressへの移行ができます。
「エクスポート」機能で、WordPressから他のブログサービスへの移行が
できます。

91

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
Q：他のブログサービスからの移行、他のブログサービスへの移行は、できますか？
A：できます。
「インポート機能」

92

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの概要と導入
Q：他のブログサービスからの移行、他のブログサービスへの移行は、できますか？
A：できます。
「エクスポート機能」

93

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

目次
０． 自己紹介（2分）
１． WordPressの概要と導入（12分）
２． WordPressとWeb APIとの連携（12分）
３． WordPressでのスマートフォン対応（12分）
４． WordPressの情報の調べ方や勉強会（2分）
94

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携

APIとは？
Application Programming Interface
API（アプリケーション・プログラミング・インタフェース、Application Programming Interface）とは、
アプリケーションから利用できる、オペレーティングシステムやプログラミング言語で用意されたライブラリなどの機能の入り口と なるものである。主に、ファイル制御、ウインドウ制御、画像処理、文字制御などのための関数として提供されることが多い。
つまり、簡単にいえば、アプリケーションをプログラムするにあたって、プログラムの手間を省くため、もっと簡潔にプログラムできるように設定されたインターフェースの事である。
（Wikipediaより）95

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携

APIとは？
要は、

そのWEBサービスにあるデータを、自由に使えると言うこと。

96WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携
広告主

図にすると、
こういうイメージ。

手数料
契約
直接広告
（純広告）
として報酬

Web APIや
オープンソース

無料で、
Web APIや
オープンソースを公開

Web APIや
オープンソースを世の中に広める

対象となる
ユーザーを
集客して、
成果に貢献する

広告仲介業者や広告代理店（例）バリューコマース
提携
報酬

自分の運営サイト

無料で、その分野・テーマに関する情報が手に入り、
かつ、ユーザー間での交流ができる得た広告報酬等により、サービスをより向上させる

インターネットユーザー

97

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携

Web APIのメリット＜WEB制作者のメリット＞
他社の膨大なデータベースや機能を、無料で利用できるため、
Webサイトの開発コストを大幅に削減でき、効率的に制作できる。
＜API提供会社のメリット＞
自社のみでは考え付かないようなWEBサービス等を、外部の誰かが作ってくれるため、結果として、自社サービスの利用者が増えることが期待できる。
98WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携

何ができるの？

99WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携
WordPressに天気情報を自動で取得
各地域の天気予報を自動で取得する。

100

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携
WordPressの各記事の位置情報を地図に表示

各記事の水族館の位置を
Google Maps APIと連携して自動で地図に一覧表示させる。
＆
近いスポットはピンをまとめる。

101

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携
WordPressに周辺の写真を自動で表示

そのスポットの周辺の写真を自動で表示させる。

102

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携
WordPressに画像を自動で表示

各記事に関連する画像を自動表示する。
103

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携
WordPressにTwitter情報を自動で表示

その水族館について、Twitterの最新つぶやきを自動表示させる。

104

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携
WordPressにカフェ情報を自動で表示
そのスポットから２点間の直線距離の近い順番に、
カフェやレストランを、自動で一覧表示する。
この部分は、自動でアフィリエイトリンクになっていて成果の収益に繋がる。
105→バリューコマース対応

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携
WordPressにホテル情報を自動で表示
そのスポットから２点間の直線距離の近い順番に、
ホテルを、
自動で一覧表示する。
この部分は、自動でアフィリエイトリンクになっていて成果の収益に繋がる。
→バリューコマース対応

106WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携
WordPressに商品情報を一覧表示

記事に関連する商品を自動で一覧表示する。
この部分は、自動でアフィリエイトリンクになっていて成果の収益に繋がる。
→バリューコマース対応

107WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携
バリューコマースAPIを使えば、広告主を横断したAPIの利用が自動で可能になります。

http://devcenter.valuecommerce.ne.jp/108WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携
キーワードは、「カスタムフィールド」「Web API」

×109

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携

カスタムフィールド
カスタムフィールドを使ってみましょう！
カスタムフィールドは
WordPressに元々備わっている
機能です。
110

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携

カスタムフィールド

カスタムフィールドを出力する
WordPressのテンプレートタグ例：<?php echo get_post_meta($post->ID,'address',true); ?>カスタムフィールドに入力したデータを表示しています。
111

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携

カスタムフィールド
テーマに４行のプログラムを追加
して実現！
<?php
$custom1 = urlencode(post_custom('name'));$yahoo_gazou_api = "http://search.yahooapis.jp/ImageSearchService/V2/imageSearch?appid=<アプリ
ケーションID>&query=" . $custom1 ;$yahoo_gazou_api_xml = simplexml_load_file($yahoo_gazou_api);
foreach($yahoo_gazou_api_xml->Result as $gazou_output) {echo '<img src="' . $gazou_output->Url . '" alt="" />'; }?>112

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携
バリューコマースのAPIサンプルコードを
WordPressに組み込むこともできます

http://devcenter.valuecommerce.ne.jp/113

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携
バリューコマースのAPIサンプルコードを
WordPressに組み込むこともできます
APIサンプルコードがディベロッパーキット（SDK）
として提供されているので、それをWordPressで応用することもできます。
http://devcenter.valuecommerce.ne.jp/sdk

114

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携
バリューコマースのAPIサンプルコードを
WordPressに組み込むこともできます
商品シンプルリストを
WordPressを使って、決め打ちのキーワードから各ページごとでキーワードを変えられるようにしてみる。
http://devcenter.valuecommerce.ne.jp/api/productapi_simple_list
115

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携
バリューコマースのAPIサンプルコードを
WordPressに組み込むこともできます
サンプルコードでは、「iPad」というキーワードに固定されている。

http://devcenter.valuecommerce.ne.jp/samples/pdb/productapi_simple_list.php
116WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携
バリューコマースのAPIサンプルコードを
WordPressに組み込むこともできます
WordPressを使えば、ページごとに
自由にキーワードを変えられるようにできる。
117

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携
バリューコマースのAPIサンプルコードを
WordPressに組み込むこともできます「熱帯魚」に関連するWeb APIが、アフィリエイトリンクで自動表示。

118

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携
既存のPHPコードをWordPressのプラグインにするコツ（１）プラグイン用のヘッダーを書く（２）ファイルの読み込みを相対パスにする（３）functionで関数を定義（４）アクションフック or フィルターフック or
ショートコード
119WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携
既存のPHPコードをWordPressのプラグインにするコツ（１）プラグイン用のヘッダーを書く/*
Plugin Name: ProductAPI Simple List
Plugin URI: http://wp3.jp/
Description: WordPress Plugin : ValueCommerce ProductAPI Simple List.
Author: Kunitoshi Hoshino
Version: 0.1
Author URI: http://wp3.jp/
License: GNU General Public License version 2 or any later version.
*/120

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携
既存のPHPコードをWordPressのプラグインにするコツ（２）ファイルの読み込みを相対パスにする
require_once('VCPDBDriver/VCPDBDriver.php');↓
require_once dirname(__FILE__) . '/VCPDBDriver/VCPDBDriver.php';

121

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携
既存のPHPコードをWordPressのプラグインにするコツ（３）functionで関数を定義
function productapi_shortcode {}122WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携
既存のPHPコードをWordPressのプラグインにするコツ（４）アクションフック or フィルターフック or
ショートコード
add_shortcode("productapi","productapi_shortcode");123

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携
バリューコマースでWeb APIを使う準備①［オファー検索］をクリック②［商品オファー/ウェブサービス対応］
をクリック③［検索］をクリック

バリューコマース内の広告主約200社が、Web APIに対応しています。

124

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携
バリューコマースでWeb APIを使う準備①同じ広告があったら「PDB」と付いている方がWeb APIに対応しています。

②［広告を選ぶ］をクリック。

125WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携
バリューコマースでWeb APIを使う準備①［ウェブサービス］をクリック②［コードを取得］をクリック

バリューコマースの場合、広告提携をしても、ウェブサービスのコードを取得しないと、APIが表示されない仕様なので、注意しましょう。
126WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressとWeb APIとの連携
バリューコマースでWeb APIを使う準備①「トークン」を確認する②「sid」と「pid」を確認する

APIに使います。

127

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

目次
０． 自己紹介（2分）
１． WordPressの概要と導入（12分）
２． WordPressとWeb APIとの連携（12分）
３． WordPressでのスマートフォン対応（12分）
４． WordPressの情報の調べ方や勉強会（2分）
128

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応

サンプルサイト水族館コミュニティ
http://www.japan-aquarium.com/

129

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応
同一URLで、PCサイト、スマートフォンサイト、ガラケー（携帯）サイトの振り分けを自動で実現。

130WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応

アフィリエイトリンクの成果対象
PCサイト

スマートフォンサイト

PC用
アフィリエイトリンク

モバイルサイト（ガラケー携帯）モバイル用
アフィリエイトリンク

バリューコマース・A8・リンクシェアなど、多くのASPはこの仕様。
PC用とモバイル用で振り分けないと、収益の成果対象にならない。
※楽天アフィリエイトのように、PC用とモバイル用のアフィリエイト
リンクを統一したASPもある。
131

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応
もしPC用とモバイル用で振り分けられなかったら・・・
こんな感じにしないと成果報酬に繋がらない。
→ユーザーがちゃんとクリックしてくれるか分からない。機会損失。
→そもそも見た目が２行になる。
では、別URLで、PCサイト・スマホサイト・ガラケーサイトを作る？
→手間が掛かる。ミラーサイトのようになる危険性も。
被リンクが分散してしまうので、SEO的にもマイナス傾向。
132

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応
WordPressでは、無料で、 PC用・スマホ用・モバイル用に、同じURLで振り分けることができます。
（１）
各端末ごとに自動で最適な表示
・ユーザーも見やすい
・収益の機会損失が無くなる（２）
同一URLで自動で振り分け（例）
水族館コミュニティ
http://www.japan-aquarium.com/

・コンテンツを複数書く手間が無い
・ミラーサイトにならない
・被リンク分散が無くSEOにも合う133

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応
しかも、PCサイト用バナーと、携帯サイト用バナーを切り替えるなど、表示させるコンテンツも変えられます。
＜PC用のバナー＞＜モバイル用のバナー＞

134

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応
（難易度）
低

高

（方法１）
スマートフォンに自動対応するプラグイン（方法２）
Media Queryを使ってテーマで対応（方法３）
ユーザーエージェントで振り分けて、
PC・スマートフォン・ガラケー、それぞれのサイトを作る
135

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応
（難易度）
低

高

（方法１）
スマートフォンに自動対応するプラグイン（方法２）
Media Queryを使ってテーマで対応（方法３）
ユーザーエージェントで振り分けて、
PC・スマートフォン・ガラケー、それぞれのサイトを作る
136

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応（方法１）スマートフォンに自動対応するプラグイン「WPtouch」プラグインを
インストールして有効化すると、
スマートフォン対応が自動でされた上に、デザインもスマートフォンっぽくなっています。
137

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応

プラグインとは？
「追加機能」。
WordPressの本体はシンプルなので、自由に機能を追加するイメージ。
プラグインは、自分で作ることも出来ます。
慣れてきたら、自分でカスタマイズすると、自由度が高まります。

138

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応

プラグイン、管理画面からも選べます！

「WPtouch」
で検索！

検索できます！

139

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応

WordPress.orgからも選べます！

http://wordpress.org/extend/plugins/140

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応

プラグインフォルダの確認
wp-admin /wp-content /wp-includes /index.php
license.txt
readme-ja.html
readme.html
wp-activate.php
wp-app.php
wp-atom.php

languages /plugins /themes /upgrade /uploads /index.php「wptouch」フォルダ

akismet /wp-multibyte-patch /hello.php
index.php

ココにプラグインフォルダ
を入れる！
141

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応
（難易度）
低

高

（方法１）
スマートフォンに自動対応するプラグイン（方法２）
Media Queryを使ってテーマで対応（方法３）
ユーザーエージェントで振り分けて、
PC・スマートフォン・ガラケー、それぞれのサイトを作る
142

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応（方法２）Media Queryを使ってテーマで対応
WordPress3.2からの新デフォルトテーマ「Twenty Eleven」テーマは、Media Queryに対応したテーマですので、このテーマをベースにカスタマイズすることもできます。
143

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応（方法２）Media Queryを使ってテーマで対応「Whiteboard」テーマなど、
Media Query対応テーマは増えてきています。
144
http://whiteboardframework.com/

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応（方法２）Media Queryを使ってテーマで対応
style.css→横幅に応じて自動対応させている。
/* =Responsive Structure----------------------------------------------- */@media (max-width: 800px) {・・・・・}@media (max-width: 650px) {・・・・・}@media (max-width: 450px) {・・・・・}@media only screen and (min-device-width: 320px)
and (max-device-width: 480px) {
・・・・・
}

145

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応

テーマとは？
WEBデザインを変えるためのモノ。
ブログの「着せ替え」。
見た目の調整だけでなく、表示する内容を操ることもできます。
テーマは、自分で作ることも出来ます。
慣れてきたら、自分でカスタマイズすると、自由度が高まります。
146

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応

テーマは管理画面からも選べます！
検索もできます！

「テーマ名」
で検索！
147

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応

テーマは管理画面からも選べます！

148

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応

テーマはWordPress.orgからも選べます！

http://wordpress.org/extend/themes/149

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応

テーマフォルダの確認
wp-admin /wp-content /wp-includes /index.php
license.txt
readme-ja.html
readme.html
wp-activate.php
wp-app.php
wp-atom.php

languages /plugins /themes /upgrade /uploads /index.php「テーマ名」フォルダ

twentyeleven /twentyten /index.php

ココにテーマフォルダを入れる！
150

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応（方法２）Media Queryを使ってテーマで対応
jQueryMobileでのレスボンシブウェブデザインも可能です。
// @media all and (max-device-width:
480px)
if ( window.screen < 480 ) {// jQuery Mobile 読み込み
document.write('<script' +' src="jquery.mobile.js"></' +'script>');}・端末ごとに出力するコンテンツ量を変えたい。
・ガラケー（携帯電話）にも同時に対応をしたい。
→その場合は、（方法３）へ。

151

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応
（難易度）
低

高

（方法１）
スマートフォンに自動対応するプラグイン（方法２）
Media Queryを使ってテーマで対応（方法３）
ユーザーエージェントで振り分けて、
PC・スマートフォン・ガラケー、それぞれのサイトを作る
152

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応
ユーザーエージェントで振り分けて、PC・スマートフォン・（方法３） ガラケー、それぞれのサイトを作る
PCサイト

スマートフォンサイト

モバイルサイト（ガラケー携帯）ユーザーエージェントで振り分け（方法１）WPtouchプラグインをそのまま使う or カスタマイズ（方法２）MobilePressプラグインをそのまま使う or カスタマイズ（方法３）Ktai Styleプラグインをカスタマイズ（方法４）ユーザーエージェントを振り分けるプラグイン（「iPhone theme switcher」「Mobile Theme Switcher」「UserAgent Theme Switcher」など）（方法５）$is_iphone関数で条件分岐（$is_iphone＝iPhone＆AndroidのSafariでtrueになる。）

Ktai Styleプラグイン
・パケット量節約
・画像を自動縮小など、日本のガラケー
独特の仕様に対応
153

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応
ユーザーエージェントで振り分けて、PC・スマートフォン・（方法３） ガラケー、それぞれのサイトを作る
PCサイト

スマートフォンサイト

モバイルサイト（ガラケー携帯）ユーザーエージェントで振り分け（方法１）WPtouchプラグインをそのまま使う or カスタマイズ（方法２）MobilePressプラグインをそのまま使う or カスタマイズ（方法３）Ktai Styleプラグインをカスタマイズ（方法４）ユーザーエージェントを振り分けるプラグイン（「iPhone theme switcher」「Mobile Theme Switcher」「UserAgent Theme Switcher」など）（方法５）$is_iphone関数で条件分岐

Ktai Styleプラグイン
・パケット量節約
・画像を自動縮小など、日本のガラケー
独特の仕様に対応（$is_iphone＝iPhone＆AndroidのSafariでtrueになる。）

今回はKtai Styleプラグインで、スマホ＆ガラケーの両方に対応

154

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応
PCサイト

スマートフォン

ガラケー（携帯）同じURLで、端末に応じて見え方が変わります。
ユーザーエージェントで振り分け。

水族館コミュニティ
http://www.japan-aquarium.com/
155

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応「Ktai Style」プラグイン（手順１）
スマートフォンサイトに対応したテーマや、ガラケーサイトに対応したテーマを作る。
（手順２）
ktai-themesフォルダに、作ったテーマを入れる。
（手順３）
管理画面のKtai Styleの［テーマ］をクリックして、各端末ごとで使うテーマを振り分ける。
156

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応
Ktai Styleプラグイン［いますぐインストール］をクリックして、有効化します。

157

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応
Ktai Styleでのテーマフォルダの確認
wp-admin /wp-content /wp-includes /index.php
license.txt
readme-ja.html
readme.html
wp-activate.php
wp-app.php
wp-atom.php

languages /plugins /themes /upgrade /uploads /index.php
ktai-themes/

フォルダを追加！

（注意）
plugins/ktai-style の中のthemesフォルダに入れると、プラグインバージョンアップ時に作ったテーマが消えてしまうので、必ずこの方法で行いましょう！
ktai-tokyohanami /smart-tokyohanami /ココに、作った
テーマフォルダを入れる！

158

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応
Ktai Styleプラグイン「Ktai Style」プラグインを有効化すると管理画面のメニューに左のような項目が追加されるので、スマートフォンや携帯表示の設定ができます。
［テーマ］をクリックして、各端末で使うテーマを、振り分けます。
159

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応
Ktai Styleプラグイン「Ktai Style」プラグインを
インストールすれば、各端末のユーザーエージェントに応じて、同一URLで、サイトを振り分けることが
できます。

160

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応
Q：PCと携帯のリンクを自動で振り分けできますか？
A：できます。「Ktai Style 2.1 ベータ版」
http://www.yuriko.net/arc/2010/05/10/ktaistyle-210-beta1/[pc-only]...[/pc-only][mobile-only]...[/mobile-only]
で振り分ける。
（注意）
この方法で行わないと、Ktai Styleの次期バージョンに対応しないので注意しましょう。

161

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応
Q：PCと携帯のリンクを自動で振り分けできますか？
A：できます。

PCサイト用バナーと、携帯サイト用バナーで、同じURLで表示を分けられます。
162

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応
jQuery Mobileは、簡単で便利。

jQueryhttp://jquery.com/

jQuery Mobile
http://jquerymobile.com/
163

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応
jQuery Mobileのタグはリファレンス等を参考に。
・ jQuery Mobileのタグ
・ PHP・ WordPressテンプレートタグ
・ WordPress条件分岐タグを組み合わせるのがコツ。
Designs | jQuery Mobile
http://jquerymobile.com/designs/

164

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応（１）テーマの色もタグだけで実現。
<body><div data-role="page" data-theme="c"><div data-role="header" data-theme="a"><h1><?php echo get_bloginfo('name'); ?></h1></div><div data-role="content" data-theme="c">～～～</div><div data-role="footer" data-theme=“a">～～～</div></div>

165

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応（２）アイコンもタグだけで実現。
<div data-role="header" data-theme="a"><a href="<?php echo get_bloginfo('url'); ?>"data-icon="home">TOP</a><h1><?php echo get_bloginfo('name'); ?></h1></div>

サイトURL（WordPressのテンプレートタグ）

166

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応（３）リストビューもタグだけで実現。
<ul data-role="listview" data-inset="true"><li data-role=“list-divider”>○○○</li><li><a href=“×××.html“>△△△</a></li><li><a href=“×××.html“>□□□</a></li>
</ul>

167

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応（４）折り畳みもタグだけで実現。
<div data-role="collapsible" data-collapsed="true">～～～</div>

168

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応（５）フッターナビゲーションもタグだけで実現。

<div data-role="footer" data-position="fixed" data-theme="c"><div data-role="navbar">～～～</div></div>

169

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応
WordPressでのアフィリエイトリンク対応まとめ
PCサイト

スマートフォンサイト

PC用
アフィリエイトリンク（方法１）スマートフォンに自動対応のプラグイン（方法２）Media Query対応テーマ（方法３）ユーザーエージェントで振り分け

モバイルサイト（ガラケー携帯）モバイル用
アフィリエイトリンク

Ktai Styleプラグイン
170

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応
バリューコマースではスマートフォン専用のバナーもあります①［オファー検索］をクリック②［スマートフォン対応］をクリック③［検索］をクリック

171WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応
バリューコマースではスマートフォン専用のバナーもあります①［スマートフォン広告］をクリック②［コードを取得］をクリック③そのコードを</body>の直前にコピー＆ペースト

172

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressでのスマートフォン対応
バリューコマースではスマートフォン専用のバナーもあります

スマートフォン専用のバナーが表示される。

173

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

目次
０． 自己紹介（2分）
１． WordPressの概要と導入（12分）
２． WordPressとWeb APIとの連携（12分）
３． WordPressでのスマートフォン対応（12分）
４． WordPressの情報の調べ方や勉強会（2分）
174

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの情報の調べ方や勉強会

調べ方（インターネットで調べる編）
・WordPress Codex 日本語版
http://wpdocs.sourceforge.jp/（英語版のWordPressのCodexを日本語化している）
・WordPressのフォーラムに質問する。
http://ja.forums.wordpress.org/
・その他、「WordPress （調べたい事）」で検索する。
175WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの情報の調べ方や勉強会

WordPressのドキュメントの参照サイト

WordPress Codex 日本語版
http://wpdocs.sourceforge.jp/

WordPress Plugins/JSeries
http://wppluginsj.sourceforge.jp/176

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの情報の調べ方や勉強会

調べ方（書籍で調べる編）
・WordPressに関する本は、十数冊、出版されている。
WordPressのバージョンが２系だった頃の情報は古い場合があるので、３系以降の本を参考にする。
具体的には、2010年6月以降出版の本を参考にする。
amazonや楽天で、出版日付順などでソートしてみる。
・書籍は、初心者向け、技術者向け、テーマカスタマイズに特化、プラグインに特化、など、色々。
177

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの情報の調べ方や勉強会

調べ方（無料で人に聞いてみる編）
・WordPressは、カンファレンスや勉強会が盛んで、その多くは無料や場所代だけなので、参加してみる。
WEB業界やIT業界の人間も多く参加しているので、情報交換や交流には、最適な場。
・WordPressのカンファレンスや勉強会としては、（１）WordCamp、（２）WordBench、（３）OSC（オープンソースカンファレンス）などが
あります。
178

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの情報の調べ方や勉強会

調べ方（無料で人に聞いてみる編）
・WordPressの日本語公式サイトのイベントカレンダー
・IT勉強会カレンダー
・ATND
・WordBenchなどで、IT関係のカンファレンスや勉強会を探すことが
可能です。
179

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの情報の調べ方や勉強会

開発プロジェクト
・WordPress 日本語作成チーム
http://groups.google.com/group/wp-ja-pkg
・日本語版 Codex
http://wpdocs.sourceforge.jp/
・WordPress Plugins/JSeries
http://wppluginsj.sourceforge.jp/
180WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの情報の調べ方や勉強会

WordPressのコミュニティ活動

まずは、全国各地で行われている
WordPressの集まりのご紹介

181

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの情報の調べ方や勉強会

WordCamp
・ユーザー・開発者が集うイベント
・世界40以上の都市で開催
・世界中で150回以上の開催実績
・日本では年に２～３回
・今までに東京・京都・福岡・横浜・名古屋
http://japan.wordcamp.org/
182

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの情報の調べ方や勉強会

WordCamp
イベント参加者 約６００人（直近のWordCamp Kobe 2011の参加人数）

WordPressに関するセッションやワークショップも多数。
スタッフもたくさん！
当日だけお手伝いも大歓迎！
（WordCamp横浜スタッフの集合写真）
183

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの情報の調べ方や勉強会

WordCamp

WordCamp東京
2011年11月27日（日曜日）
http://2011.tokyo.wordcamp.org/
会場：楽天タワー2号館7階
参加費：無料運営：
WordCamp Tokyo 2011実行委員会（主催）
楽天株式会社（協力）184WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの情報の調べ方や勉強会

WordBench

http://wordbench.org/

・各地域のユーザーコミュニティ
・現在、全国各地 約40地域
・毎月、日本のどこかで勉強会や交流会を開催・BuddyPressプラグインによるオープンSNS
・写真部、英語部、料理部、もくもく部なども185

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの情報の調べ方や勉強会

WordBench写真部
・一眼レフカメラ、写真好きが多い
・写真を撮る旅行も186WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの情報の調べ方や勉強会

WordBench料理部
・料理を作ったり・料理を食べに行ったり

187

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの情報の調べ方や勉強会

WordBenchもくもく部

・WordPress に関するワークショップ・サイトのテーマ改良／プラグイン作成／
WordPressドキュメントの翻訳／写真作品の仕上げ等
188WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの情報の調べ方や勉強会

オープンソースカンファレンス（OSC）（オープンソースカンファレンス2011 Tokyo/Springの出展写真）

全国各地のオープンソースカンファレンス（OSC）にブース出展＆セミナー発表
189WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの情報の調べ方や勉強会

WordPressのイベントの探し方
・WordPressの日本語公式サイトのイベントカレンダー
・WordBenchのサイト
・IT勉強会カレンダー
・ATNDなどで、WordPress関連イベントを探すことができます。

190

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの情報の調べ方や勉強会

WordPressのコミュニティ活動
WordPressのコミュニティでは、
このように、実際に集まるイベントや勉強会も多くて、とても交流が盛んです。
もちろん、インターネット上でも、オープンソースを楽しみつつ、貢献！

191

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの情報の調べ方や勉強会

WordPress 日本語作成チーム

http://groups.google.com/group/wp-ja-pkg
WordPressのコアファイルを日本語化（moファイル、poファイルの作成）、
日本ユーザー向けパッケージの配布やサポートを行う。
192

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの情報の調べ方や勉強会

日本語版 Codex

http://wpdocs.sourceforge.jp/
WordPressの公式オンラインマニュアル（ドキュメント）。
英語版の公式オンラインマニュアルの和訳や日本語ユーザ向けのノウハウ・資料などの共有。Wiki作っていて、誰でも加筆編集できます。
193

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの情報の調べ方や勉強会

WordPress Plugins/JSeries

http://wppluginsj.sourceforge.jp/
日本特有の文化（Webサービスや携帯電話等）にそったプラグインや、
マルチバイト圏に対応したプラグインの作成・配布。
194

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの情報の調べ方や勉強会

WordPressフォーラム

http://ja.forums.wordpress.org/
WordPressに関する質問や話題を話し合う場。
195

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの情報の調べ方や勉強会

WordPants
http://wordpants.org/
WordPressに関する電子書籍版の雑誌。
１年に数回の出版。

196

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの情報の調べ方や勉強会

WeeklyCMS
http://www.weeklycms.net/
色々なCMSについて、
USTREAM放送。
毎週土曜日午前11時～、約１時間。
WordPressをテーマにした回も、１ヶ月に一度くらいの割合で放送。

197

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの情報の調べ方や勉強会

WordPressで繋がろう！
WordPressのコミュニティでは、
インターネット上はもちろん、実際の情報交換や交流もあって、楽しい！
WordPressのプラグイン開発者やテーマ開発者のお話を生で聞くことができます。
IT関係者と知り合うにも、とても良い場です！
その後のご縁も広がります。
198

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPressの情報の調べ方や勉強会

WordPressで繋がろう！
WordPressのコミュニティに、ぜひご参加を！
WordPressのイベントや勉強会に参加してみませんか？

http://ja.wordpress.org/
199

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

最後にスライドは既に公開済みです！
WordPress（ワードプレス）コミュニティ
http://wp3.jp/2011/09/30/valuecommerce-expo2011/

PDFファイルにて、公開しています。
バリューコマースEXPOサイト
http://www.valuecommerce.ne.jp/expo2011/にも、後日、同じPDFファイルが公開されるそうです。
200

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

最後に今後のお問い合わせなど
何かありましたら、
Twitter： @khoshino
Mail： mail@communitycom.jp
URL： http://www.communitycom.jp/
http://wp3.jp/などに、ご連絡ください。
ありがとうございました！
株式会社コミュニティコム 星野 邦敏
201