さくらWORKS関内(4)第4回 WordPressとWebAPIを    連携させてみよう!      株式会社コミュニティコム      星野 邦敏      〒116-0013      東京都荒川区西日暮里5-37-5 NSO2階   ...
さくらWORKS関内(4) 目次0. 自己紹介1. WordPressとWeb APIとの連携2. ワークショップ3. WordPressの情報の調べ方や勉強会                           2
さくらWORKS関内(4) 目次0. 自己紹介1. WordPressとWeb APIとの連携2. ワークショップ3. WordPressの情報の調べ方や勉強会                           3
さくらWORKS関内(4)     自己紹介       星野 邦敏(ほしの くにとし)       Twitter : @khoshino       Facebook : 星野邦敏(Kunitoshi Hoshino)株式会社コミュニティコ...
さくらWORKS関内(4)      自己紹介WordPressのイベントである「WordCamp」や「WordBench」にスタッフやスピーカーとして参加。                          5
さくらWORKS関内(4)    自己紹介WordPress日本語サイトの「イベントカレンダー」を更新する係。  ココ                                 6
さくらWORKS関内(4)   自己紹介自社サイト運営から法人化。ASPのイベントでお話する機会も。                    7
さくらWORKS関内(4) 目次0. 自己紹介1. WordPressとWeb APIとの連携2. ワークショップ3. WordPressの情報の調べ方や勉強会                           8
さくらWORKS関内(4)   WordPressとWeb APIとの連携この講座の対象者・既存のテーマや既存のプラグインのインストールは 行っているけれど、 WordPressを自分でカスタマイズしたことが無い人。・WordPressのテーマ...
さくらWORKS関内(4)   WordPressとWeb APIとの連携この講座のゴール・WordPressの既存のテーマを入れるだけでなく、 自分でオリジナルテーマを作って、 自分だけのWEBデザインで、 WordPressに動かせるように...
さくらWORKS関内(4)  WordPressとWeb APIとの連携この講座の流れ講義の時間の比率が高いという指摘がありましたので、ワークショップで実際に作業していただく時間を、第1回・第2回より多く取りたいと思います!          ...
さくらWORKS関内(4)  WordPressとWeb APIとの連携この講座の前提WordPressのテーマカスタマイズやPHPの知識がある程度は必要です。WordPress(ワードプレス)コミュニティhttp://wp3.jp/に、他のス...
さくらWORKS関内(4)   WordPressとWeb APIとの連携          水族館コミュニティサンプルサイト          http://www.japan-aquarium.com/                   ...
さくらWORKS関内(4)   WordPressとWeb APIとの連携同一URLで、PCサイト、スマートフォンサイト、ガラケー(携帯)サイトの振り分けを自動で実現。                                14
さくらWORKS関内(4)  WordPressとWeb APIとの連携プラグインをインストールするだけ!                  ・Twitterに「ツイートする」ボタン                  ・Facebookの「いい...
さくらWORKS関内(4)  WordPressとWeb APIとの連携プラグインをインストールするだけ!                  クリック一つで                  口コミ評価を出来るようにする。           ...
さくらWORKS関内(4)  WordPressとWeb APIとの連携プラグインをインストールするだけ!                  アクセスの多い記事順に                  自動でリスト化する。            ...
さくらWORKS関内(4)  WordPressとWeb APIとの連携プラグインをインストールするだけ!                  各記事のコメントを                  一覧表示する。                 ...
さくらWORKS関内(4)  WordPressとWeb APIとの連携プラグインをインストールするだけ!                          条件検索機能                             19
さくらWORKS関内(4)      WordPressとWeb APIとの連携 プラグインをインストールするだけ!スマートフォンや携帯電話からのアクセスは、スマートフォンサイト・携帯サイトを自動的に振り分けて表示させる。           ...
さくらWORKS関内(4)  WordPressとWeb APIとの連携プラグインをインストールするだけ!                  メールフォーム                            21
さくらWORKS関内(4)   WordPressとWeb APIとの連携WordPressに元々備わっている機能                   WordPressの                   カスタムフィールド        ...
さくらWORKS関内(4)   WordPressとWeb APIとの連携WordPressに元々備わっている機能     新着記事をトップページに表示。                           23
さくらWORKS関内(4)   WordPressとWeb APIとの連携WordPressに元々備わっている機能     他のブログの更新情報を     RSSで自動取得して表示。                           24
さくらWORKS関内(4)   WordPressとWeb APIとの連携WordPressに元々備わっている機能                    WordPressの                    コメント欄を         ...
さくらWORKS関内(4)   WordPressとWeb APIとの連携WordPressに元々備わっている機能                   サイトのデザインは、                   WordPressの       ...
さくらWORKS関内(4)   WordPressとWeb APIとの連携WordPressとAPIの連携(APIの活用事例)                   各地域の天気予報を                   自動で取得する。    ...
さくらWORKS関内(4)   WordPressとWeb APIとの連携WordPressとAPIの連携(APIの活用事例)                   各記事の水族館の位置を                   Google Map...
さくらWORKS関内(4)   WordPressとWeb APIとの連携WordPressとAPIの連携(APIの活用事例)                   そのスポットの周辺の                   写真を自動で表示させる...
さくらWORKS関内(4)   WordPressとWeb APIとの連携WordPressとAPIの連携(APIの活用事例)           各記事に関連する画像を           自動表示する。                   ...
さくらWORKS関内(4)   WordPressとWeb APIとの連携WordPressとAPIの連携(APIの活用事例)    その水族館について、    Twitterの最新つぶやきを    自動表示させる。              ...
さくらWORKS関内(4)   WordPressとWeb APIとの連携WordPressとAPIの連携(APIの活用事例)                   そのスポットから                   2点間の直線距離の    ...
さくらWORKS関内(4)   WordPressとWeb APIとの連携WordPressとAPIの連携(APIの活用事例)                   そのスポットから                   2点間の直線距離の    ...
さくらWORKS関内(4)   WordPressとWeb APIとの連携WordPressとAPIの連携(APIの活用事例)                   記事に関連する商品を                   自動で一覧表示する。 ...
さくらWORKS関内(4)        WordPressとWeb APIとの連携APIとは?Application Programming InterfaceAPI(アプリケーション・プログラミング・インタフェース、Application ...
さくらWORKS関内(4)  WordPressとWeb APIとの連携APIとは?要は、そのWEBサービスにあるデータを、自由に使えると言うこと。                          36
さくらWORKS関内(4)        WordPressとWeb APIとの連携図にすると、                     広告主                                                手数...
さくらWORKS関内(4)    WordPressとWeb APIとの連携Web APIのメリット<WEB制作者のメリット>他社の膨大なデータベースや機能を、無料で利用できるため、Webサイトの開発コストを大幅に削減でき、効率的に制作できる。...
さくらWORKS関内(4)WordPressとWeb APIとの連携       何ができるの?                        39
さくらWORKS関内(4)   WordPressとWeb APIとの連携WordPressに天気情報を自動で取得                   各地域の天気予報を                   自動で取得する。          ...
さくらWORKS関内(4)   WordPressとWeb APIとの連携WordPressの各記事の位置情報を地図に表示                   各記事の水族館の位置を                   Google Maps ...
さくらWORKS関内(4)   WordPressとWeb APIとの連携WordPressに周辺の写真を自動で表示                   そのスポットの周辺の                   写真を自動で表示させる。    ...
さくらWORKS関内(4)   WordPressとWeb APIとの連携WordPressに画像を自動で表示           各記事に関連する画像を           自動表示する。                           43
さくらWORKS関内(4)   WordPressとWeb APIとの連携WordPressにTwitter情報を自動で表示    その水族館について、    Twitterの最新つぶやきを    自動表示させる。               ...
さくらWORKS関内(4)   WordPressとWeb APIとの連携WordPressにカフェ情報を自動で表示                   そのスポットから                   2点間の直線距離の         ...
さくらWORKS関内(4)   WordPressとWeb APIとの連携WordPressにホテル情報を自動で表示                   そのスポットから                   2点間の直線距離の         ...
さくらWORKS関内(4)   WordPressとWeb APIとの連携WordPressに商品情報を一覧表示                   記事に関連する商品を                   自動で一覧表示する。        ...
さくらWORKS関内(4)    WordPressとWeb APIとの連携キーワードは、「カスタムフィールド」「Web API」                    ×                            48
さくらWORKS関内(4)   WordPressとWeb APIとの連携カスタムフィールド                   カスタムフィールドを                   使ってみましょう!                   ...
さくらWORKS関内(4)       WordPressとWeb APIとの連携カスタムフィールドについては、第3回のPDF資料をご参照ください。中級者のためのWordPress講座(第3回 カスタムフィールドを使ってみよう!)のスライドPD...
さくらWORKS関内(4)        WordPressとWeb APIとの連携カスタムフィールド                        カスタムフィールドを出力する                                 ...
さくらWORKS関内(4)             WordPressとWeb APIとの連携カスタムフィールド  テーマに4行の  プログラムを追加  して実現!<?php$custom1 = urlencode(post_custom(na...
さくらWORKS関内(4) 目次0. 自己紹介1. WordPressとWeb APIとの連携2. ワークショップ3. WordPressの情報の調べ方や勉強会                           53
さくらWORKS関内(4)WordPressとWeb APIとの連携       実際に       ワークショップを       してみましょう!                        54
さくらWORKS関内(4)   ワークショップワークショップ(1) - 天気予報APIWordPressに天気情報を自動で取得                   各地域の天気予報を                   自動で取得する。    ...
さくらWORKS関内(4)      ワークショップ(手順1)Web APIを探すお天気Webサービス仕様 - Weather Hacks - livedoor 天気情報http://weather.livedoor.com/weather_h...
さくらWORKS関内(4)      ワークショップ(手順2)パラメーターを確認                                         パラメーターを確認する。                             ...
さくらWORKS関内(4)         ワークショップ(手順3)XMLを生成パラメーターに基づいてXMLを生成する。livedoor 天気情報の場合、http://weather.livedoor.com/forecast/webservi...
さくらWORKS関内(4)         ワークショップ(手順4)一応、XMLを確認(例)http://weather.livedoor.com/forecast/webservice/rest/v1?city=113&day=tomorro...
さくらWORKS関内(4)     ワークショップ(手順5)simplexml_load_fileで     分析(パース)(例)$tenki = (livedoorAPIのXML) ;$xml = simplexml_load_file ($...
さくらWORKS関内(4)      ワークショップ(手順6)レスポンスフィールドを確認                                         レスポンスフィールドを                          ...
さくらWORKS関内(4)  ワークショップ(手順7)出力&表示する echo $xml->title; タイトル・見出し (例) 福岡県 久留米 - 明日の天気                     62
さくらWORKS関内(4)           ワークショップ(手順8)サイトを確認<?php$tenki =   http://weather.livedoor.com/forecast/webservice/rest/v1?city=113...
さくらWORKS関内(4)    ワークショップワークショップ(1) - 天気予報API<応用編>・PHPのif文・WordPressの条件分岐タグ・WordPressのカスタムフィールド・WordPressのプラグインカスタマイズ等を組み合わ...
さくらWORKS関内(4)   ワークショップワークショップ(1) - 天気予報API では、 応用的なワークショップを してみましょう!                       65
さくらWORKS関内(4)   ワークショップワークショップ(2) - 商品APIWordPressに商品情報を一覧表示              記事に関連する商品を              自動で一覧表示する。              ...
さくらWORKS関内(4)   ワークショップワークショップ(2) - 商品API サンプルのPHPファイル productapi.php を配布して解説します。                     67
さくらWORKS関内(4) 目次0. 自己紹介1. WordPressとWeb APIとの連携2. ワークショップ3. WordPressの情報の調べ方や勉強会                           68
さくらWORKS関内(4)    WordPressの情報の調べ方や勉強会調べ方(インターネットで調べる編)・WordPress Codex 日本語版 http://wpdocs.sourceforge.jp/ (英語版のWordPressのC...
さくらWORKS関内(4)        WordPressの情報の調べ方や勉強会WordPressのドキュメントの参照サイトWordPress Codex 日本語版            WordPress Plugins/JSeriesht...
さくらWORKS関内(4)    WordPressの情報の調べ方や勉強会調べ方(書籍で調べる編)・WordPressに関する本は、十数冊、出版されている。 WordPressのバージョンが2系だった頃の情報は 古い場合があるので、3系以降の本...
さくらWORKS関内(4)    WordPressの情報の調べ方や勉強会調べ方(無料で人に聞いてみる編)・WordPressは、カンファレンスや勉強会が盛んで、 その多くは無料や場所代だけなので、参加してみる。 WEB業界やIT業界の人間も多...
さくらWORKS関内(4)   WordPressの情報の調べ方や勉強会調べ方(無料で人に聞いてみる編)・WordPressの日本語公式サイトのイベントカレンダー・IT勉強会カレンダー・ATND・WordBenchなどで、IT関係のカンファレン...
さくらWORKS関内(4)    WordPressの情報の調べ方や勉強会開発プロジェクト・WordPress 日本語作成チーム  http://groups.google.com/group/wp-ja-pkg・日本語版 Codex  htt...
さくらWORKS関内(4)   WordPressの情報の調べ方や勉強会WordPressのコミュニティ活動 まずは、全国各地で行われている WordPressの集まりのご紹介                          75
さくらWORKS関内(4)        WordPressの情報の調べ方や勉強会WordCamp                             ・ユーザー・開発者が集うイベント                            ...
さくらWORKS関内(4)      WordPressの情報の調べ方や勉強会WordCamp                         イベント参加者 約600人                         (直近のWordCamp...
さくらWORKS関内(4)          WordPressの情報の調べ方や勉強会WordCampWordCamp東京2011年11月27日(日曜日)http://2011.tokyo.wordcamp.org/会場:楽天タワー2号館7階参...
さくらWORKS関内(4)      WordPressの情報の調べ方や勉強会WordBench                         ・各地域のユーザーコミュニティ                         ・現在、全国各地 ...
さくらWORKS関内(4)   WordPressの情報の調べ方や勉強会WordBench写真部               ・一眼レフカメラ、写真好きが多い               ・写真を撮る旅行も                   ...
さくらWORKS関内(4)   WordPressの情報の調べ方や勉強会WordBench料理部               ・料理を作ったり               ・料理を食べに行ったり                         ...
さくらWORKS関内(4)    WordPressの情報の調べ方や勉強会WordBenchもくもく部・WordPress に関するワークショップ・サイトのテーマ改良/プラグイン作成/ WordPressドキュメントの翻訳/写真作品の仕上げ等 ...
さくらWORKS関内(4)      WordPressの情報の調べ方や勉強会オープンソースカンファレンス(OSC) (オープンソースカンファレンス2011 Tokyo/Springの出展写真)    全国各地のオープンソースカンファレンス(O...
さくらWORKS関内(4)   WordPressの情報の調べ方や勉強会WordPressのイベントの探し方・WordPressの日本語公式サイトのイベントカレンダー・WordBenchのサイト・IT勉強会カレンダー・ATNDなどで、WordP...
さくらWORKS関内(4)   WordPressの情報の調べ方や勉強会WordPressのコミュニティ活動 WordPressのコミュニティでは、 このように、実際に集まるイベントや勉強会も多くて、 とても交流が盛んです。 もちろん、インター...
さくらWORKS関内(4)    WordPressの情報の調べ方や勉強会WordPress 日本語作成チームhttp://groups.google.com/group/wp-ja-pkgWordPressのコアファイルを日本語化(moファイ...
さくらWORKS関内(4)   WordPressの情報の調べ方や勉強会日本語版 Codexhttp://wpdocs.sourceforge.jp/WordPressの公式オンラインマニュアル(ドキュメント)。英語版の公式オンラインマニュアル...
さくらWORKS関内(4)     WordPressの情報の調べ方や勉強会WordPress Plugins/JSeries http://wppluginsj.sourceforge.jp/ 日本特有の文化(Webサービスや携帯電話等)にそ...
さくらWORKS関内(4)    WordPressの情報の調べ方や勉強会WordPressフォーラム    http://ja.forums.wordpress.org/    WordPressに関する質問や話題を話し合う場。       ...
さくらWORKS関内(4)    WordPressの情報の調べ方や勉強会WordPants                   http://wordpants.org/                   WordPressに関する    ...
さくらWORKS関内(4)    WordPressの情報の調べ方や勉強会WeeklyCMS                http://www.weeklycms.net/                色々なCMSについて、        ...
さくらWORKS関内(4)   WordPressの情報の調べ方や勉強会WordPressで繋がろう!WordPressのコミュニティでは、インターネット上はもちろん、実際の情報交換や交流もあって、楽しい!WordPressのプラグイン開発者や...
さくらWORKS関内(4)    WordPressの情報の調べ方や勉強会WordPressで繋がろう!     WordPressのコミュニティに、ぜひご参加を! WordPressのイベントや勉強会に参加してみませんか?        ht...
さくらWORKS関内(4) 最後に今後のお問い合わせなど 何かありましたら、 Twitter: @khoshino Mail: mail@communitycom.jp URL: http://www.communitycom.jp/     ...
Upcoming SlideShare
Loading in...5
×

中級者のためのWordPress講座[第4回]WordPressと外部のWEBAPIと連携させてみよう!

2,093

Published on

WordPressと外部のWEBAPIを連携させます。これにより、自分のWordPressのサイトに、Yahoo!の画像検索結果を表示させたり、Yahooや楽天やamazonの商品データを表示させたり、Twitterの情報を表示させたりが可能となります。

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,093
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
35
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

中級者のためのWordPress講座[第4回]WordPressと外部のWEBAPIと連携させてみよう!

  1. 1. さくらWORKS関内(4)第4回 WordPressとWebAPIを 連携させてみよう! 株式会社コミュニティコム 星野 邦敏 〒116-0013 東京都荒川区西日暮里5-37-5 NSO2階 URL: http://www.communitycom.jp/ E-MAIL: mail@communitycom.jp 1
  2. 2. さくらWORKS関内(4) 目次0. 自己紹介1. WordPressとWeb APIとの連携2. ワークショップ3. WordPressの情報の調べ方や勉強会 2
  3. 3. さくらWORKS関内(4) 目次0. 自己紹介1. WordPressとWeb APIとの連携2. ワークショップ3. WordPressの情報の調べ方や勉強会 3
  4. 4. さくらWORKS関内(4) 自己紹介 星野 邦敏(ほしの くにとし) Twitter : @khoshino Facebook : 星野邦敏(Kunitoshi Hoshino)株式会社コミュニティコムという会社で、自社運営サイトやアプリ、他企業様向けサイトも作っています。オープンソースの活動をしたり、IT系の勉強会を主催したり、地域の活動をしたり。WordPressをCMSとしてWEBサイトを作ることが増えています。 4
  5. 5. さくらWORKS関内(4) 自己紹介WordPressのイベントである「WordCamp」や「WordBench」にスタッフやスピーカーとして参加。 5
  6. 6. さくらWORKS関内(4) 自己紹介WordPress日本語サイトの「イベントカレンダー」を更新する係。 ココ 6
  7. 7. さくらWORKS関内(4) 自己紹介自社サイト運営から法人化。ASPのイベントでお話する機会も。 7
  8. 8. さくらWORKS関内(4) 目次0. 自己紹介1. WordPressとWeb APIとの連携2. ワークショップ3. WordPressの情報の調べ方や勉強会 8
  9. 9. さくらWORKS関内(4) WordPressとWeb APIとの連携この講座の対象者・既存のテーマや既存のプラグインのインストールは 行っているけれど、 WordPressを自分でカスタマイズしたことが無い人。・WordPressのテーマやプラグイン、カスタムフィールド など(第1回~第3回の講座)を理解して、 実際にテーマ作成に活かしたい人。 9
  10. 10. さくらWORKS関内(4) WordPressとWeb APIとの連携この講座のゴール・WordPressの既存のテーマを入れるだけでなく、 自分でオリジナルテーマを作って、 自分だけのWEBデザインで、 WordPressに動かせるようになる。・WordPressとWeb APIを連携できるように、 WordPressのテーマやプラグインに組み込める ようになる。 10
  11. 11. さくらWORKS関内(4) WordPressとWeb APIとの連携この講座の流れ講義の時間の比率が高いという指摘がありましたので、ワークショップで実際に作業していただく時間を、第1回・第2回より多く取りたいと思います! 11
  12. 12. さくらWORKS関内(4) WordPressとWeb APIとの連携この講座の前提WordPressのテーマカスタマイズやPHPの知識がある程度は必要です。WordPress(ワードプレス)コミュニティhttp://wp3.jp/に、他のスライドや記事があるので、ご参考ください。 12
  13. 13. さくらWORKS関内(4) WordPressとWeb APIとの連携 水族館コミュニティサンプルサイト http://www.japan-aquarium.com/ 13
  14. 14. さくらWORKS関内(4) WordPressとWeb APIとの連携同一URLで、PCサイト、スマートフォンサイト、ガラケー(携帯)サイトの振り分けを自動で実現。 14
  15. 15. さくらWORKS関内(4) WordPressとWeb APIとの連携プラグインをインストールするだけ! ・Twitterに「ツイートする」ボタン ・Facebookの「いいね!」ボタン などを、自分のサイトに設置して ソーシャルな流れを作れる。 15
  16. 16. さくらWORKS関内(4) WordPressとWeb APIとの連携プラグインをインストールするだけ! クリック一つで 口コミ評価を出来るようにする。 & 口コミ評価一覧リストを サイドバーに表示する。 16
  17. 17. さくらWORKS関内(4) WordPressとWeb APIとの連携プラグインをインストールするだけ! アクセスの多い記事順に 自動でリスト化する。 17
  18. 18. さくらWORKS関内(4) WordPressとWeb APIとの連携プラグインをインストールするだけ! 各記事のコメントを 一覧表示する。 18
  19. 19. さくらWORKS関内(4) WordPressとWeb APIとの連携プラグインをインストールするだけ! 条件検索機能 19
  20. 20. さくらWORKS関内(4) WordPressとWeb APIとの連携 プラグインをインストールするだけ!スマートフォンや携帯電話からのアクセスは、スマートフォンサイト・携帯サイトを自動的に振り分けて表示させる。 20
  21. 21. さくらWORKS関内(4) WordPressとWeb APIとの連携プラグインをインストールするだけ! メールフォーム 21
  22. 22. さくらWORKS関内(4) WordPressとWeb APIとの連携WordPressに元々備わっている機能 WordPressの カスタムフィールド 22
  23. 23. さくらWORKS関内(4) WordPressとWeb APIとの連携WordPressに元々備わっている機能 新着記事をトップページに表示。 23
  24. 24. さくらWORKS関内(4) WordPressとWeb APIとの連携WordPressに元々備わっている機能 他のブログの更新情報を RSSで自動取得して表示。 24
  25. 25. さくらWORKS関内(4) WordPressとWeb APIとの連携WordPressに元々備わっている機能 WordPressの コメント欄を 少しだけカスタマイズ 25
  26. 26. さくらWORKS関内(4) WordPressとWeb APIとの連携WordPressに元々備わっている機能 サイトのデザインは、 WordPressの デフォルトテーマ 「Twenty Ten」を、 子テーマにして、 少しだけカスタマイズ しただけ。 26
  27. 27. さくらWORKS関内(4) WordPressとWeb APIとの連携WordPressとAPIの連携(APIの活用事例) 各地域の天気予報を 自動で取得する。 27
  28. 28. さくらWORKS関内(4) WordPressとWeb APIとの連携WordPressとAPIの連携(APIの活用事例) 各記事の水族館の位置を Google Maps APIと連携して 自動で地図に一覧表示させる。 & 近いスポットはピンをまとめる。 28
  29. 29. さくらWORKS関内(4) WordPressとWeb APIとの連携WordPressとAPIの連携(APIの活用事例) そのスポットの周辺の 写真を自動で表示させる。 29
  30. 30. さくらWORKS関内(4) WordPressとWeb APIとの連携WordPressとAPIの連携(APIの活用事例) 各記事に関連する画像を 自動表示する。 30
  31. 31. さくらWORKS関内(4) WordPressとWeb APIとの連携WordPressとAPIの連携(APIの活用事例) その水族館について、 Twitterの最新つぶやきを 自動表示させる。 31
  32. 32. さくらWORKS関内(4) WordPressとWeb APIとの連携WordPressとAPIの連携(APIの活用事例) そのスポットから 2点間の直線距離の 近い順番に、 カフェやレストランを、 自動で一覧表示する。 この部分は、自動で アフィリエイトリンクに なっていて 成果の収益に繋がる。 32
  33. 33. さくらWORKS関内(4) WordPressとWeb APIとの連携WordPressとAPIの連携(APIの活用事例) そのスポットから 2点間の直線距離の 近い順番に、 ホテルを、 自動で一覧表示する。 この部分は、自動で アフィリエイトリンクに なっていて 成果の収益に繋がる。 33
  34. 34. さくらWORKS関内(4) WordPressとWeb APIとの連携WordPressとAPIの連携(APIの活用事例) 記事に関連する商品を 自動で一覧表示する。 この部分は、自動で アフィリエイトリンクに なっていて 成果の収益に繋がる。 34
  35. 35. さくらWORKS関内(4) WordPressとWeb APIとの連携APIとは?Application Programming InterfaceAPI(アプリケーション・プログラミング・インタフェース、Application Programming Interface)とは、アプリケーションから利用できる、オペレーティングシステムやプログラミング言語で用意されたライブラリなどの機能の入り口と なるものである。主に、ファイル制御、ウインドウ制御、画像処理、文字制御などのための関数として提供されることが多い。つまり、簡単にいえば、アプリケーションをプログラムするにあたって、プログラムの手間を省くため、もっと簡潔にプログラムできるように設定されたインターフェースの事である。 (Wikipediaより) 35
  36. 36. さくらWORKS関内(4) WordPressとWeb APIとの連携APIとは?要は、そのWEBサービスにあるデータを、自由に使えると言うこと。 36
  37. 37. さくらWORKS関内(4) WordPressとWeb APIとの連携図にすると、 広告主 手数料こういうイメージ。 契約 直接広告 対象となる (純広告) ユーザーを として報酬 集客して、 成果に貢献する 広告仲介業者や広告代理店 無料で、Web APIや Web APIやWordPressのような オープンソース を公開 提携オープンソース 報酬 Web APIや オープンソースを 世の中に広める 自分の運営サイト 無料で、その分野・テーマに関する情報が手に入り、 得た広告報酬等により、 かつ、ユーザー間での交流ができる サービスをより向上させる インターネットユーザー 37
  38. 38. さくらWORKS関内(4) WordPressとWeb APIとの連携Web APIのメリット<WEB制作者のメリット>他社の膨大なデータベースや機能を、無料で利用できるため、Webサイトの開発コストを大幅に削減でき、効率的に制作できる。<API提供会社のメリット>自社のみでは考え付かないようなWEBサービス等を、外部の誰かが作ってくれるため、結果として、自社サービスの利用者が増えることが期待できる。 38
  39. 39. さくらWORKS関内(4)WordPressとWeb APIとの連携 何ができるの? 39
  40. 40. さくらWORKS関内(4) WordPressとWeb APIとの連携WordPressに天気情報を自動で取得 各地域の天気予報を 自動で取得する。 40
  41. 41. さくらWORKS関内(4) WordPressとWeb APIとの連携WordPressの各記事の位置情報を地図に表示 各記事の水族館の位置を Google Maps APIと連携して 自動で地図に一覧表示させる。 & 近いスポットはピンをまとめる。 41
  42. 42. さくらWORKS関内(4) WordPressとWeb APIとの連携WordPressに周辺の写真を自動で表示 そのスポットの周辺の 写真を自動で表示させる。 42
  43. 43. さくらWORKS関内(4) WordPressとWeb APIとの連携WordPressに画像を自動で表示 各記事に関連する画像を 自動表示する。 43
  44. 44. さくらWORKS関内(4) WordPressとWeb APIとの連携WordPressにTwitter情報を自動で表示 その水族館について、 Twitterの最新つぶやきを 自動表示させる。 44
  45. 45. さくらWORKS関内(4) WordPressとWeb APIとの連携WordPressにカフェ情報を自動で表示 そのスポットから 2点間の直線距離の 近い順番に、 カフェやレストランを、 自動で一覧表示する。 この部分は、自動で アフィリエイトリンクに なっていて 成果の収益に繋がる。 45
  46. 46. さくらWORKS関内(4) WordPressとWeb APIとの連携WordPressにホテル情報を自動で表示 そのスポットから 2点間の直線距離の 近い順番に、 ホテルを、 自動で一覧表示する。 この部分は、自動で アフィリエイトリンクに なっていて 成果の収益に繋がる。 46
  47. 47. さくらWORKS関内(4) WordPressとWeb APIとの連携WordPressに商品情報を一覧表示 記事に関連する商品を 自動で一覧表示する。 この部分は、自動で アフィリエイトリンクに なっていて 成果の収益に繋がる。 47
  48. 48. さくらWORKS関内(4) WordPressとWeb APIとの連携キーワードは、「カスタムフィールド」「Web API」 × 48
  49. 49. さくらWORKS関内(4) WordPressとWeb APIとの連携カスタムフィールド カスタムフィールドを 使ってみましょう! カスタムフィールドは WordPressに 元々備わっている 機能です。 49
  50. 50. さくらWORKS関内(4) WordPressとWeb APIとの連携カスタムフィールドについては、第3回のPDF資料をご参照ください。中級者のためのWordPress講座(第3回 カスタムフィールドを使ってみよう!)のスライドPDFを公開しました。WordPress(ワードプレス)コミュニティhttp://wp3.jp/2011/09/08/sakura-works-wordpres3/ 50
  51. 51. さくらWORKS関内(4) WordPressとWeb APIとの連携カスタムフィールド カスタムフィールドを出力する WordPressのテンプレートタグ例:<?php echo get_post_meta($post->ID,address,true); ?> カスタムフィールドに 入力したデータを 表示しています。 51
  52. 52. さくらWORKS関内(4) WordPressとWeb APIとの連携カスタムフィールド テーマに4行の プログラムを追加 して実現!<?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="" />; }?> 52
  53. 53. さくらWORKS関内(4) 目次0. 自己紹介1. WordPressとWeb APIとの連携2. ワークショップ3. WordPressの情報の調べ方や勉強会 53
  54. 54. さくらWORKS関内(4)WordPressとWeb APIとの連携 実際に ワークショップを してみましょう! 54
  55. 55. さくらWORKS関内(4) ワークショップワークショップ(1) - 天気予報APIWordPressに天気情報を自動で取得 各地域の天気予報を 自動で取得する。 55
  56. 56. さくらWORKS関内(4) ワークショップ(手順1)Web APIを探すお天気Webサービス仕様 - Weather Hacks - livedoor 天気情報http://weather.livedoor.com/weather_hacks/webservice.html 56
  57. 57. さくらWORKS関内(4) ワークショップ(手順2)パラメーターを確認 パラメーターを確認する。 「パラメーター」 →制約やソートの条件を 指定する。お天気Webサービス仕様 - Weather Hacks - livedoor 天気情報 57http://weather.livedoor.com/weather_hacks/webservice.html
  58. 58. さくらWORKS関内(4) ワークショップ(手順3)XMLを生成パラメーターに基づいてXMLを生成する。livedoor 天気情報の場合、http://weather.livedoor.com/forecast/webservice/rest/v1がベース。その上で、パラメーターを付ける。city→地域day→予報日(例)http://weather.livedoor.com/forecast/webservice/rest/v1?city=113&day=tomorrow 58
  59. 59. さくらWORKS関内(4) ワークショップ(手順4)一応、XMLを確認(例)http://weather.livedoor.com/forecast/webservice/rest/v1?city=113&day=tomorrow 59
  60. 60. さくらWORKS関内(4) ワークショップ(手順5)simplexml_load_fileで 分析(パース)(例)$tenki = (livedoorAPIのXML) ;$xml = simplexml_load_file ($tenki); 60
  61. 61. さくらWORKS関内(4) ワークショップ(手順6)レスポンスフィールドを確認 レスポンスフィールドを 確認する。 「レスポンスフィールド」 →出力データを 指定する。お天気Webサービス仕様 - Weather Hacks - livedoor 天気情報 61http://weather.livedoor.com/weather_hacks/webservice.html
  62. 62. さくらWORKS関内(4) ワークショップ(手順7)出力&表示する echo $xml->title; タイトル・見出し (例) 福岡県 久留米 - 明日の天気 62
  63. 63. さくらWORKS関内(4) ワークショップ(手順8)サイトを確認<?php$tenki = http://weather.livedoor.com/forecast/webservice/rest/v1?city=113&day=tomorrow;$xml = simplexml_load_file ($tenki);echo $xml->title;echo "<br />";echo "<img src=".$xml->image->url."/><br />".$xml->telop."<br />最高気温 <font color=#ff0000>".$xml->temperature->max->celsius."℃</font><br />最低気温 <font color=#0000ff>".$xml->temperature->min->celsius."℃</font>";?> 63
  64. 64. さくらWORKS関内(4) ワークショップワークショップ(1) - 天気予報API<応用編>・PHPのif文・WordPressの条件分岐タグ・WordPressのカスタムフィールド・WordPressのプラグインカスタマイズ等を組み合わせると、管理画面から柔軟に対応できます。 64
  65. 65. さくらWORKS関内(4) ワークショップワークショップ(1) - 天気予報API では、 応用的なワークショップを してみましょう! 65
  66. 66. さくらWORKS関内(4) ワークショップワークショップ(2) - 商品APIWordPressに商品情報を一覧表示 記事に関連する商品を 自動で一覧表示する。 この部分は、自動で アフィリエイトリンクに なっていて 66 成果の収益に繋がる。
  67. 67. さくらWORKS関内(4) ワークショップワークショップ(2) - 商品API サンプルのPHPファイル productapi.php を配布して解説します。 67
  68. 68. さくらWORKS関内(4) 目次0. 自己紹介1. WordPressとWeb APIとの連携2. ワークショップ3. WordPressの情報の調べ方や勉強会 68
  69. 69. さくらWORKS関内(4) WordPressの情報の調べ方や勉強会調べ方(インターネットで調べる編)・WordPress Codex 日本語版 http://wpdocs.sourceforge.jp/ (英語版のWordPressのCodexを日本語化している)・WordPressのフォーラムに質問する。 http://ja.forums.wordpress.org/・その他、「WordPress (調べたい事)」で検索する。 69
  70. 70. さくらWORKS関内(4) WordPressの情報の調べ方や勉強会WordPressのドキュメントの参照サイトWordPress Codex 日本語版 WordPress Plugins/JSerieshttp://wpdocs.sourceforge.jp/ http://wppluginsj.sourceforge.jp/ 70
  71. 71. さくらWORKS関内(4) WordPressの情報の調べ方や勉強会調べ方(書籍で調べる編)・WordPressに関する本は、十数冊、出版されている。 WordPressのバージョンが2系だった頃の情報は 古い場合があるので、3系以降の本を参考にする。 具体的には、2010年6月以降出版の本を参考にする。 amazonや楽天で、出版日付順などでソートしてみる。・書籍は、初心者向け、技術者向け、テーマカスタマイズ に特化、プラグインに特化、など、色々。 71
  72. 72. さくらWORKS関内(4) WordPressの情報の調べ方や勉強会調べ方(無料で人に聞いてみる編)・WordPressは、カンファレンスや勉強会が盛んで、 その多くは無料や場所代だけなので、参加してみる。 WEB業界やIT業界の人間も多く参加しているので、 情報交換や交流には、最適な場。・WordPressのカンファレンスや勉強会としては、 (1)WordCamp、(2)WordBench、 (3)OSC(オープンソースカンファレンス)などが あります。 72
  73. 73. さくらWORKS関内(4) WordPressの情報の調べ方や勉強会調べ方(無料で人に聞いてみる編)・WordPressの日本語公式サイトのイベントカレンダー・IT勉強会カレンダー・ATND・WordBenchなどで、IT関係のカンファレンスや勉強会を探すことが可能です。 73
  74. 74. さくらWORKS関内(4) WordPressの情報の調べ方や勉強会開発プロジェクト・WordPress 日本語作成チーム http://groups.google.com/group/wp-ja-pkg・日本語版 Codex http://wpdocs.sourceforge.jp/・WordPress Plugins/JSeries http://wppluginsj.sourceforge.jp/ 74
  75. 75. さくらWORKS関内(4) WordPressの情報の調べ方や勉強会WordPressのコミュニティ活動 まずは、全国各地で行われている WordPressの集まりのご紹介 75
  76. 76. さくらWORKS関内(4) WordPressの情報の調べ方や勉強会WordCamp ・ユーザー・開発者が集うイベント ・世界40以上の都市で開催 ・世界中で150回以上の開催実績 ・日本では年に2~3回 ・今までに 東京・京都・福岡・横浜・名古屋http://japan.wordcamp.org/ 76
  77. 77. さくらWORKS関内(4) WordPressの情報の調べ方や勉強会WordCamp イベント参加者 約600人 (直近のWordCamp Kobe 2011の参加人数) WordPressに関する セッションやワークショップも多数。 スタッフもたくさん! 当日だけお手伝いも大歓迎! (WordCamp横浜スタッフの集合写真) 77
  78. 78. さくらWORKS関内(4) WordPressの情報の調べ方や勉強会WordCampWordCamp東京2011年11月27日(日曜日)http://2011.tokyo.wordcamp.org/会場:楽天タワー2号館7階参加費:無料運営:WordCamp Tokyo 2011実行委員会(主催)楽天株式会社(協力) 78
  79. 79. さくらWORKS関内(4) WordPressの情報の調べ方や勉強会WordBench ・各地域のユーザーコミュニティ ・現在、全国各地 約40地域 ・毎月、日本のどこかで勉強会や 交流会を開催 ・BuddyPressプラグインによる オープンSNS ・写真部、英語部、料理部、 http://wordbench.org/ もくもく部なども 79
  80. 80. さくらWORKS関内(4) WordPressの情報の調べ方や勉強会WordBench写真部 ・一眼レフカメラ、写真好きが多い ・写真を撮る旅行も 80
  81. 81. さくらWORKS関内(4) WordPressの情報の調べ方や勉強会WordBench料理部 ・料理を作ったり ・料理を食べに行ったり 81
  82. 82. さくらWORKS関内(4) WordPressの情報の調べ方や勉強会WordBenchもくもく部・WordPress に関するワークショップ・サイトのテーマ改良/プラグイン作成/ WordPressドキュメントの翻訳/写真作品の仕上げ等 82
  83. 83. さくらWORKS関内(4) WordPressの情報の調べ方や勉強会オープンソースカンファレンス(OSC) (オープンソースカンファレンス2011 Tokyo/Springの出展写真) 全国各地のオープンソースカンファレンス(OSC)に ブース出展&セミナー発表 83
  84. 84. さくらWORKS関内(4) WordPressの情報の調べ方や勉強会WordPressのイベントの探し方・WordPressの日本語公式サイトのイベントカレンダー・WordBenchのサイト・IT勉強会カレンダー・ATNDなどで、WordPress関連イベントを探すことができます。 84
  85. 85. さくらWORKS関内(4) WordPressの情報の調べ方や勉強会WordPressのコミュニティ活動 WordPressのコミュニティでは、 このように、実際に集まるイベントや勉強会も多くて、 とても交流が盛んです。 もちろん、インターネット上でも、 オープンソースを楽しみつつ、貢献! 85
  86. 86. さくらWORKS関内(4) WordPressの情報の調べ方や勉強会WordPress 日本語作成チームhttp://groups.google.com/group/wp-ja-pkgWordPressのコアファイルを日本語化(moファイル、poファイルの作成)、日本ユーザー向けパッケージの配布やサポートを行う。 86
  87. 87. さくらWORKS関内(4) WordPressの情報の調べ方や勉強会日本語版 Codexhttp://wpdocs.sourceforge.jp/WordPressの公式オンラインマニュアル(ドキュメント)。英語版の公式オンラインマニュアルの和訳や日本語ユーザ向けのノウハウ・資料などの共有。Wiki作っていて、誰でも加筆編集できます。 87
  88. 88. さくらWORKS関内(4) WordPressの情報の調べ方や勉強会WordPress Plugins/JSeries http://wppluginsj.sourceforge.jp/ 日本特有の文化(Webサービスや携帯電話等)にそったプラグインや、 マルチバイト圏に対応したプラグインの作成・配布。 88
  89. 89. さくらWORKS関内(4) WordPressの情報の調べ方や勉強会WordPressフォーラム http://ja.forums.wordpress.org/ WordPressに関する質問や話題を話し合う場。 89
  90. 90. さくらWORKS関内(4) WordPressの情報の調べ方や勉強会WordPants http://wordpants.org/ WordPressに関する 電子書籍版の雑誌。 1年に数回の出版。 90
  91. 91. さくらWORKS関内(4) WordPressの情報の調べ方や勉強会WeeklyCMS http://www.weeklycms.net/ 色々なCMSについて、 USTREAM放送。 毎週土曜日午前11時~、約1時間。 WordPressをテーマにした回も、 1ヶ月に一度くらいの割合で放送。 91
  92. 92. さくらWORKS関内(4) WordPressの情報の調べ方や勉強会WordPressで繋がろう!WordPressのコミュニティでは、インターネット上はもちろん、実際の情報交換や交流もあって、楽しい!WordPressのプラグイン開発者やテーマ開発者のお話を生で聞くことができます。IT関係者と知り合うにも、とても良い場です!その後のご縁も広がります。 92
  93. 93. さくらWORKS関内(4) WordPressの情報の調べ方や勉強会WordPressで繋がろう! WordPressのコミュニティに、ぜひご参加を! WordPressのイベントや勉強会に参加してみませんか? http://ja.wordpress.org/ 93
  94. 94. さくらWORKS関内(4) 最後に今後のお問い合わせなど 何かありましたら、 Twitter: @khoshino Mail: mail@communitycom.jp URL: http://www.communitycom.jp/ http://wp3.jp/ などに、ご連絡ください。 ありがとうございました! 株式会社コミュニティコム 星野 邦敏 94
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×