PowerPoint プレゼンテーション

Size: px

Start display at page:

Download "PowerPoint プレゼンテーション"

あきみみねむら
7 years ago
Views:

1 WordPress にバリューコマース提供の WebAPI を組み込もう! 株式会社コミュニティコム星野邦敏東京都荒川区西日暮里 NSO2 階 URL: 1

2 目次 0. 自己紹介 1. WordPressとWebAPIとの連携 2. ワークショップ 3. WordPressの情報の調べ方や勉強会 2

3 目次 0. 自己紹介 1. WordPressとWebAPIとの連携 2. ワークショップ 3. WordPressの情報の調べ方や勉強会 3

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

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

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

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

8 自己紹介公式ディレクトリにプラグインを登録したり Japan Tenki プラグイン全国 142 地域の天気を自動表示 Hello Wapuu プラグインブログ更新を応援 8

9 目次 0. 自己紹介 1. WordPressとWebAPIとの連携 2. ワークショップ 3. WordPressの情報の調べ方や勉強会 9

10 WordPressとWebAPIとの連携この講座の前提 WordPressのテーマカスタマイズや PHPの知識がある程度は必要です WordPress( ワードプレス ) コミュニティに他のスライドや記事があるのでご参考ください 10

11 WordPressとWebAPIとの連携サンプルサイト水族館コミュニティ 11

12 WordPressとWebAPIとの連携同一 URLで PCサイトスマートフォンサイトガラケー ( 携帯 ) サイトの振り分けを自動で実現 12

13 WordPressとWebAPIとの連携プラグインをインストールするだけ! Twitterにツイートするボタン Facebookのいいね! ボタンなどを自分のサイトに設置してソーシャルな流れを作れる 13

14 WordPressとWebAPIとの連携プラグインをインストールするだけ! クリック一つで口コミ評価を出来るようにする & 口コミ評価一覧リストをサイドバーに表示する 14

15 WordPressとWebAPIとの連携プラグインをインストールするだけ! アクセスの多い記事順に自動でリスト化する 15

16 WordPressとWebAPIとの連携プラグインをインストールするだけ! 各記事のコメントを一覧表示する 16

17 WordPress と WebAPI との連携プラグインをインストールするだけ! 条件検索機能 17

18 WordPressとWebAPIとの連携プラグインをインストールするだけ! スマートフォンや携帯電話からのアクセスはスマートフォンサイト携帯サイトを自動的に振り分けて表示させる 18

19 WordPress と WebAPI との連携プラグインをインストールするだけ! メールフォーム 19

20 WordPress と WebAPI との連携 WordPress に元々備わっている機能 WordPress のカスタムフィールド 20

21 WordPress と WebAPI との連携 WordPress に元々備わっている機能新着記事をトップページに表示 21

22 WordPressとWebAPIとの連携 WordPress に元々備わっている機能他のブログの更新情報を RSS で自動取得して表示 22

23 WordPressとWebAPIとの連携 WordPress に元々備わっている機能 WordPress のコメント欄を少しだけカスタマイズ 23

24 WordPressとWebAPIとの連携 WordPress に元々備わっている機能サイトのデザインは WordPressのデフォルトテーマ Twenty Ten を子テーマにして少しだけカスタマイズしただけ 24

25 WordPressとWebAPIとの連携 WordPress と API の連携 (API の活用事例 ) 各地域の天気予報を自動で取得する 25

26 WordPressとWebAPIとの連携 WordPress と API の連携 (API の活用事例 ) 各記事の水族館の位置を Google Maps APIと連携して自動で地図に一覧表示させる & 近いスポットはピンをまとめる 26

27 WordPressとWebAPIとの連携 WordPress と API の連携 (API の活用事例 ) そのスポットの周辺の写真を自動で表示させる 27

28 WordPressとWebAPIとの連携 WordPress と API の連携 (API の活用事例 ) 各記事に関連する画像を自動表示する 28

29 WordPressとWebAPIとの連携 WordPressとAPIの連携 (APIの活用事例) その水族館について Twitterの最新つぶやきを自動表示させる 29

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

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

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

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

34 WordPress と WebAPI との連携 API とは? 要はその WEB サービスにあるデータを自由に使えると言うこと 34

35 WordPressとWebAPIとの連携図にするとこういうイメージ広告主契約手数料 Web API やオープンソース直接広告 ( 純広告 ) として報酬無料で Web API やオープンソースを公開対象となるユーザーを集客して成果に貢献する提携広告仲介業者や広告代理店 ( 例 ) バリューコマース報酬 Web API やオープンソースを世の中に広める自分の運営サイト無料でその分野テーマに関する情報が手に入りかつユーザー間での交流ができる得た広告報酬等によりサービスをより向上させるインターネットユーザー 35

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

37 WordPress と WebAPI との連携何ができるの? 37

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

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

40 WordPressとWebAPIとの連携 WordPress に周辺の写真を自動で表示そのスポットの周辺の写真を自動で表示させる 40

41 WordPressとWebAPIとの連携 WordPress に画像を自動で表示各記事に関連する画像を自動表示する 41

42 WordPressとWebAPIとの連携 WordPressに Twitter 情報を自動で表示その水族館について Twitterの最新つぶやきを自動表示させる 42

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

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

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

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

47 キーワードはプログラミング実習室第 22 回 WordPressとWebAPIとの連携カスタムフィールド Web API 47

48 WordPressとWebAPIとの連携カスタムフィールドカスタムフィールドを使ってみましょう! カスタムフィールドは WordPressに元々備わっている機能です 48

49 WordPressとWebAPIとの連携カスタムフィールドについては第 3 回のPDF 資料をご参照ください中級者のためのWordPress 講座 ( 第 3 回カスタムフィールドを使ってみよう!) のスライドPDFを公開しました WordPress( ワードプレス ) コミュニティ 49

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

51 WordPressとWebAPIとの連携カスタムフィールドテーマに4 行のプログラムを追加して実現! <?php $custom1 = urlencode(post_custom('name')); $yahoo_gazou_api = " アプリケーション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="" />'; }?> 51

52 目次 0. 自己紹介 1. WordPressとWebAPIとの連携 2. ワークショップ 3. WordPressの情報の調べ方や勉強会 52

53 ワークショップ実際にワークショップをしてみましょう! 53

54 ワークショップワークショップ (1) - 天気予報 API WordPress に天気情報を自動で取得各地域の天気予報を自動で取得する 54

55 ワークショップ ( 手順 1)Web API を探すお天気 Web サービス仕様 - Weather Hacks - livedoor 天気情報 55

56 ワークショップ ( 手順 2) パラメーターを確認パラメーターを確認するパラメーター制約やソートの条件を指定するお天気 Web サービス仕様 - Weather Hacks - livedoor 天気情報 56

57 ワークショップ ( 手順 3)XML を生成パラメーターに基づいて XML を生成する livedoor 天気情報の場合がベースその上でパラメーターを付ける city 地域 day 予報日 ( 例 ) 57

58 ワークショップ ( 手順 4) 一応 XML を確認 ( 例 ) 58

59 ワークショップ ( 手順 5)simplexml_load_file で分析 ( パース ) ( 例 ) $tenki = (livedoorapi の XML) ; $xml = simplexml_load_file ($tenki); 59

60 ワークショップ ( 手順 6) レスポンスフィールドを確認レスポンスフィールドを確認するレスポンスフィールド出力データを指定するお天気 Web サービス仕様 - Weather Hacks - livedoor 天気情報 60

61 ワークショップ ( 手順 7) 出力 & 表示する echo $xml->title; タイトル見出し ( 例 ) 福岡県久留米 - 明日の天気 61

62 ワークショップ ( 手順 8) サイトを確認 <?php $tenki = ' $xml = simplexml_load_file ($tenki); echo $xml->title; echo " "; echo "<img src='".$xml->image->url."'/> ".$xml->telop." 最高気温 ".$xml->temperature->max->celsius." 最低気温 ".$xml->temperature->min->celsius." ";?> 62

63 ワークショップワークショップ (1) - 天気予報 API < 応用編 > PHPのif 文 WordPressの条件分岐タグ WordPressのカスタムフィールド WordPressのプラグインカスタマイズ等を組み合わせると管理画面から柔軟に対応できます 63

64 ワークショップ応用的なワークショップをしてみましょう! 64

65 ワークショップバリューコマースのAPIサンプルコードを WordPressに組み込むこともできます 65

66 ワークショップバリューコマースのAPIサンプルコードを WordPressに組み込むこともできます API サンプルコードがディベロッパーキット (SDK) として提供されているのでそれをWordPressで応用することもできます 66

67 ワークショップバリューコマースのAPIサンプルコードを WordPressに組み込むこともできます商品シンプルリストを WordPressを使って決め打ちのキーワードから各ページごとでキーワードを変えられるようにしてみる 67

68 ワークショップバリューコマースのAPIサンプルコードを WordPressに組み込むこともできますサンプルコードでは ipad というキーワードに固定されている 68

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

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

71 ワークショップ既存の PHP コードを WordPress のプラグインにするコツ (1) プラグイン用のヘッダーを書く (2) ファイルの読み込みを相対パスにする (3)functionで関数を定義 (4) アクションフック or フィルターフック or ショートコード 71

72 ワークショップ既存の PHP コードを WordPress のプラグインにするコツ (1) プラグイン用のヘッダーを書く /* Plugin Name: ProductAPI Simple List Plugin URI: Description: WordPress Plugin : ValueCommerce ProductAPI Simple List. Author: Kunitoshi Hoshino Version: 0.1 Author URI: License: GNU General Public License version 2 or any later version. */ 72

73 ワークショップ既存の PHP コードを WordPress のプラグインにするコツ (2) ファイルの読み込みを相対パスにする require_once('vcpdbdriver/vcpdbdriver.php'); require_once dirname( FILE ). '/VCPDBDriver/VCPDBDriver.php'; 73

74 ワークショップ既存の PHP コードを WordPress のプラグインにするコツ (3)function で関数を定義 function productapi_shortcode { } 74

75 ワークショップ既存の PHP コードを WordPress のプラグインにするコツ (4) アクションフック or フィルターフック or ショートコード add_shortcode("productapi","productapi_shortcode"); 75

76 ワークショップバリューコマースで Web API を使う準備 1[ オファー検索 ] をクリック 2[ 商品オファー / ウェブサービス対応 ] をクリックバリューコマース内の広告主約 200 社が Web APIに対応しています 3[ 検索 ] をクリック 76

77 ワークショップバリューコマースで Web API を使う準備 1 同じ広告があったら PDB と付いている方が Web API に対応しています 2[ 広告を選ぶ ] をクリック 77

78 ワークショップバリューコマースで Web API を使う準備 1[ ウェブサービス ] をクリック 2[ コードを取得 ] をクリックバリューコマースの場合広告提携をしてもウェブサービスのコードを取得しないと API が表示されない仕様なので注意しましょう 78

79 ワークショップバリューコマースで Web API を使う準備 1 トークンを確認する 2 sid と pid を確認する API に使います 79

80 目次 0. 自己紹介 1. WordPressとWebAPIとの連携 2. ワークショップ 3. WordPressの情報の調べ方や勉強会 80

81 WordPress の情報の調べ方や勉強会調べ方 ( インターネットで調べる編 ) WordPress Codex 日本語版 ( 英語版のWordPressのCodexを日本語化している ) WordPressのフォーラムに質問するその他 WordPress ( 調べたい事 ) で検索する 81

82 WordPress の情報の調べ方や勉強会 WordPress のドキュメントの参照サイト WordPress Codex 日本語版 WordPress Plugins/JSeries 82

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

84 WordPress はカンファレンスや勉強会が盛んでその多くは無料や場所代だけなので参加してみる WEB 業界や IT 業界の人間も多く参加しているので情報交換や交流には最適な場 WordPress のカンファレンスや勉強会としては (1)WordCamp (2)WordBench (3)OSC( オープンソースカンファレンス ) などがありますプログラミング実習室第 22 回 WordPress の情報の調べ方や勉強会調べ方 ( 無料で人に聞いてみる編 ) 84

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

86 WordPress の情報の調べ方や勉強会開発プロジェクト WordPress 日本語作成チーム日本語版 Codex WordPress Plugins/JSeries 86

87 WordPress の情報の調べ方や勉強会 WordPress のコミュニティ活動まずは全国各地で行われている WordPress の集まりのご紹介 87

88 WordPress の情報の調べ方や勉強会 WordCamp ユーザー開発者が集うイベント世界 40 以上の都市で開催世界中で150 回以上の開催実績日本では年に2~3 回今までに東京京都福岡横浜名古屋 88

89 WordPress の情報の調べ方や勉強会 WordCamp イベント参加者約 600 人 ( 直近の WordCamp Kobe 2011 の参加人数 ) WordPressに関するセッションやワークショップも多数 (WordCamp 横浜スタッフの集合写真 ) スタッフもたくさん! 当日だけお手伝いも大歓迎! 89

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

91 WordPress の情報の調べ方や勉強会 WordBench 写真部一眼レフカメラ写真好きが多い写真を撮る旅行も 91

92 WordPress の情報の調べ方や勉強会 WordBench 料理部料理を作ったり料理を食べに行ったり 92

93 WordPress の情報の調べ方や勉強会 WordBench もくもく部 WordPress に関するワークショップサイトのテーマ改良 / プラグイン作成 / WordPress ドキュメントの翻訳 / 写真作品の仕上げ等 93

94 WordPress の情報の調べ方や勉強会オープンソースカンファレンス (OSC) ( オープンソースカンファレンス 2011 Tokyo/Spring の出展写真 ) 全国各地のオープンソースカンファレンス (OSC) にブース出展 & セミナー発表 94

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

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

97 WordPress の情報の調べ方や勉強会 WordPress 日本語作成チーム WordPress のコアファイルを日本語化 (mo ファイル po ファイルの作成 ) 日本ユーザー向けパッケージの配布やサポートを行う 97

98 WordPress の情報の調べ方や勉強会日本語版 Codex WordPressの公式オンラインマニュアル ( ドキュメント ) 英語版の公式オンラインマニュアルの和訳や日本語ユーザ向けのノウハウ資料などの共有 Wiki 作っていて誰でも加筆編集できます 98

99 WordPress の情報の調べ方や勉強会 WordPress Plugins/JSeries 日本特有の文化 (Web サービスや携帯電話等 ) にそったプラグインやマルチバイト圏に対応したプラグインの作成配布 99

100 WordPress の情報の調べ方や勉強会 WordPress フォーラム WordPress に関する質問や話題を話し合う場 100

101 WordPants プログラミング実習室第 22 回 WordPress の情報の調べ方や勉強会 WordPressに関する電子書籍版の雑誌 1 年に数回の出版 101

102 WordPress の情報の調べ方や勉強会 WeeklyCMS 色々なCMSについて USTREAM 放送毎週土曜日午前 11 時 ~ 約 1 時間 WordPressをテーマにした回も 1ヶ月に一度くらいの割合で放送 102

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

104 WordPress の情報の調べ方や勉強会 WordPress で繋がろう! WordPressのコミュニティにぜひご参加を! WordPressのイベントや勉強会に参加してみませんか? 104

105 WordPress の情報の調べ方や勉強会 WordCamp WordCamp 東京 2011 年 11 月 27 日 ( 日曜日 ) 会場 : 楽天タワー 2 号館 7 階参加費 : 無料運営 : WordCamp Tokyo 2011 実行委員会 ( 主催 ) 楽天株式会社 ( 協力 ) 105

106 WordPress の情報の調べ方や勉強会 WordBench WordBench 東京 2011 年 11 月 26 日 ( 土曜日 ) 会場 : KDDIウェブコミュニケーションズ 6 階セミナールーム参加費 : 無料運営 : WordBench 東京 ( 主催 ) KDDIウェブコミュニケーションズ ( 協力 ) 106

107 最後に今後のお問い合わせなど何かありましたら Mail: URL: などにご連絡くださいありがとうございました! 株式会社コミュニティコム星野邦敏 107

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション WordPressと外部 WebAPIを連携してオリジナルのWebサービスを作ろう! 株式会社コミュニティコム星野邦敏 116-0013 東京都荒川区西日暮里 5-37-5 NSO2 階 URL: http://www.communitycom.jp/ E-MAIL: mail@communitycom.jp 1 目次 0. 自己紹介 1. WordPressとWebAPIで出来ること 2. WordPressとWebAPIの実装の流れ