オリエンテーション WebサービスAPI 勉 強 会 勉 強 会 を 始 める 前 の 準 備 事 項 と 学 習 方 法 ガイダンス
WebサービスAPI 勉 強 会 について 1 主 催 者 のwackeyがPHPの 勉 強 に 挫 折 している 中 ある 瞬 間 API の 扱 い 方 がわかったというブレークスルー 起 きたのが2009 年 2 月 それを 人 にも 伝 えたいという 思 いから 始 まりました HTMLやCSSが 修 正 できる 人 であれば3 時 間 もあれば PHPを 少 し 教 えてAPIを 扱 えるんじゃないか? 1WebサービスAPI 勉 強 会 の 公 式 ページをブックマーク http://web-service-api.jp/ 2WebサービスAPI 勉 強 会 の 第 2クールサークルを 見 て 今 までのや りとりや 参 加 メンバーの 雰 囲 気 を 掴 んでおく http://www.c-player.com/ad62110/message と 半 ば 無 理 難 題 気 味 な 勉 強 会 を 開 催 したところ なんとかご 好 評 いた だ き シ リ ーズ 化 し ま し た その 中 参 加 メンバーによるWebサイト 開 発 合 宿 や 集 中 開 発 日 など のイベントも 始 まり 2010 年 からはリンクシェア ジャパン 様 のご 協 力 で 勉 強 会 のための 会 議 室 をお 借 りすることが 出 来 メンバーも 徐 々に 増 え そして 各 種 コンテストでの 受 賞 者 も 出 てくるにまで 至 りました 第 3クールでは 第 1クール 第 2クール 同 様 に 初 めての 方 でも 参 加 しやすい 導 入 部 分 を 入 れますが 同 様 にスピードも 速 いと 感 じられる かもしれません しかし なるべく 最 低 限 のことに 絞 っているため 覚 え ることは 少 ないはずです 予 習 復 習 を 繰 り 返 していれば 最 低 限 のことを 身 に 付 けられるの で 問 題 はないでしょう 足 りない 情 報 は 後 でゆっくり 身 につければ 良 いのですから 開 発 合 宿 では 1 泊 2 日 の 中 で 数 回 行 われるレビュー 会 がそれぞれの 開 発 を 劇 的 に 進 めます 集 中 力 を 高 めるだけでなく アイデアや 意 見 も 短 期 間 に 集 めて 軌 道 修 正 し 目 標 に 到 達 することを 目 指 します 2 3
2 勉 強 会 の 進 め 方 WebサービスAPI 勉 強 会 では 毎 回 必 ず 約 1 週 間 前 にテキスト( 下 書 き 版 の 場 合 もあります)を 配 布 します これは 勉 強 会 当 日 までにあら かじめ 読 んでいただくことによって わからない 部 分 や 知 りたいことを 明 確 にするためです そうすれば 勉 強 会 当 日 は 特 にその 部 分 に 集 中 して 聞 くことが 出 来 当 日 のやその 他 の 新 しい 情 報 を 入 手 するのにも 余 裕 ができ ます これは 学 校 で 言 う 予 習 と 同 じです また 事 前 準 備 をお 願 いする 場 合 もあります 具 体 的 にはAPIキーの 取 得 やECサイトとの 提 携 などです 中 には 申 請 から 時 間 がかかるものがあるので 早 めに 終 わらせておくのが 良 い でしょう また 特 に 初 めての 方 にはソフトのインストール 等 をお 願 い しております 1 手 帳 やカレンダーに 勉 強 会 の 日 時 場 所 を 書 き 込 みましょう 現 在 決 まっているのは 10/9( 土 ) 11/13( 土 ) 12/11( 土 )の 13:30 17:30 来 年 以 降 は 決 まり 次 第 ご 連 絡 します 2テキストが 配 信 されて 目 を 通 す 時 間 時 間 がかかりそうな 事 前 準 備 があるかチェックできる 時 間 を 確 保 しましょう 当 日 は 早 めに 会 場 にお 越 しください 特 に 初 めての 方 はネット 接 続 やコンセントの 場 所 確 認 などに 時 間 がかかるため 勉 強 会 に 出 遅 れてしまいます 会 場 の 時 間 制 限 もある ので 有 意 義 に 過 ごすためにもすばやく 着 席 運 営 の 進 行 にご 協 力 く ださい 主 に1 時 間 目 と2 時 間 目 でショップ 形 式 で 説 明 と いう 流 れで 進 行 します 3 時 間 目 では 各 自 で 課 題 を 決 めて オリジナル のアウトプットを 作 り 4 時 間 目 でレビュー 会 を 行 ないます サイボウズliveでは 勉 強 会 全 体 のカレンダーやToDoリストを 共 有 し て つながり からモチベーションを 高 め 合 ったり その 他 アフィリエイ トイベントなどをシェアしたりしています 4 5
3 この 勉 強 会 の 特 徴 この 勉 強 会 の 特 徴 としては APIを 使 ったサイトやツールをつくるの に 必 要 最 低 限 の 知 識 に 絞 っていることです 第 二 クール 以 前 では PHP 未 経 験 者 でもすこしずつPHPを 学 びながらAPIを 自 在 に 扱 え るようになることを 目 指 す という 思 想 のもとに 勉 強 会 を 進 めていました 今 回 はJavascriptを 軸 に 同 様 に 進 めていきます 本 来 であればPHPやJavascriptの 文 法 についてきちんと 説 明 す べき 点 もありますが ある 程 度 飛 ばして 進 めていき ゴール(APIを 使 って 何 か 表 示 させる)に 最 短 距 離 で 突 っ 走 るスタイルで 進 めていきま す まずは 画 面 に 出 力 されるような 形 で 結 果 を 出 して やる 気 を 引 き 出 し そこからさらに 細 かいことを 知 りたいという 欲 求 から 各 自 で 細 かい ことを 勉 強 していく 流 れで 考 えています 1PHPやJavascriptを 学 ぶための 参 考 書 籍 を 調 べてみる まずは 買 わなくても 良 いので 立 ち 読 みなどで 自 分 に 合 いそうな 入 門 書 を 一 冊 を 持 っておくと 有 利 です WebサービスAPI 勉 強 会 公 式 サイトでもオススメ 書 籍 をリストアッ プしています http://web-service-api.jp/%e5%8f%82%e8%80%83%e6% 9B%B8%E7%B1%8D/ 2 参 考 サイトをリストアップ Googleなどで 検 索 することは 元 より 体 系 的 に 説 明 しているサイト を 探 してブックマークしておく 例 : Saity 先 生 のPHP 基 礎 講 座 http://www.phppro.jp/school/phpschool/ 本 当 に 最 低 限 のことに 絞 っているので 逆 に 考 えるとその 最 低 限 の ことさえクリアすれば あとは 応 用 で 他 のAPIにチャレンジすることも 可 能 です その 最 低 限 のことをマスターしていきましょう 6 7
4 ショップ 形 式 にこだわって います すでにお 気 づきだと 思 いますが ページの 右 側 は となって います これはそのページごとに 必 ず 参 加 者 が 考 えて 手 を 動 かすタイ ミングとしていれています この 勉 強 会 の 大 きな 特 徴 でもありますが は 参 加 者 が 自 発 的 に 答 えを 出 していくために 手 を 動 かします そのため 単 にセミナー を 聞 くことに 比 べ 記 憶 に 残 りやすい つまり 身 につけやすい 勉 強 会 に なります 同 時 に 同 じ 会 場 同 じタイミングで 同 じように 勉 強 している 仲 間 も い る の で 集 中 力 も 上 が りま す また わからなければ まわりの 人 に 相 談 し 合 いながら 進 めてすぐに 解 決 できるので 学 習 スピードも 上 がります ワ ー クシ ョップ 形 式 だ か らこそ 頭 だ け で なく 手 も 使 って 覚 え るこ とが 可 能 となるのです 1 過 去 のWebサービスAPI 勉 強 会 のテキストやサンプルを 閲 覧 して どんなをやっているか 調 べてみる http://web-service-api.jp/text-sample/first-cool-text/ http://web-service-api.jp/text-sample/second-cool-text/ 2 試 しに 第 2クールのPart1.1 時 間 目 だけでもやってみてください ( 上 記 URLからテキストやサンプルがダウンロードできます) また 自 分 の 手 で 自 分 のパソコンで 動 いたという 成 功 体 験 を 積 み 重 ねることによって やる 気 を 引 き 出 すことも 出 来 ます 講 師 のパソコンではなく 自 分 のパソコンで 自 分 が 作 ったプログラ ムが 動 いていることが 大 切 なのです 8 9
5 レビュー 会 とは? 主 に3 時 間 目 に 各 自 オリジナルのを 行 っていただきます これ はその 日 にならったことをアレンジしたり 自 分 のサイト 用 に 作 ってみ たり 自 由 課 題 をとして 行 っていただきます 1 過 去 の 録 画 済 みのUstream 動 画 を 見 てその 時 のレビュー 会 の 様 子 を 見 てみましょう 一 方 4 時 間 目 にはレビュー 会 というのを 行 ないます これは 各 自 が それぞれの 作 品 を 発 表 し 第 三 者 の 客 観 的 な 評 価 や 意 見 をもらうものです 自 分 では 気 付 けないことや さらにプラスにな るアイデアをもらえる 機 会 になります 逆 に 意 見 を 言 う 側 もその 人 のサイトを 見 て 考 えることを 繰 り 返 す ので どこが 良 いのか 悪 いのか またどうすればよくなるかのトレーニ ングになります そして 参 加 者 人 数 分 のサイトやツールについてそのアイデアを 一 度 に 聞 くことができるので 刺 激 にもなり 他 の 参 加 者 の 話 題 でも 自 分 のサイトに 活 かせることがあるかもしれません そういう 意 味 ではとても 意 義 のあるレビュー 会 ですので 恥 ずかし が らず に で き なくて も 何 か 発 言 をして アドバ イ ス を もらって 勉 強 会 参 加 メンバーでシェアしましょう そして 勉 強 会 全 体 で 刺 激 しあって みんな 一 緒 にスキルアップして いくことがこの 会 としても 重 要 なことになります 10 11
6 APIとは? APIとはApplication Programming Interface(アプリケーショ ンプログラミングインタフェース)の 略 です といってもこれだけではな んのことかわからないでしょう おそらくこの 勉 強 会 に 参 加 されている 皆 様 の 場 合 にはWebを 通 じ ての API について 学 ぼうとされていると 思 います それらのAPIのこ とを 一 般 的 には Web API WebサービスAPI 等 の 呼 び 方 をしま す 1 勉 強 会 当 日 に 提 供 される スライドをご 覧 ください 2マッシュアップアワードのサイトにて160 種 類 以 上 のAPIが 整 理 さ れています これを 見 ているだけでも どんな 情 報 やコンテンツが 引 っ 張 り 出 せるか イメージを 膨 らませてみましょう http://ma6api.mashupaward.jp/ APIはリクエストに 応 じてコンテンツ( 商 品 )データや 機 能 を 提 供 し ているものです 逆 に 言 えば 自 分 のサイトでコンテンツ( 商 品 )データ を 持 たなくても 良 いというメリットがあります これがどのように 役 に 立 つのかというと API 提 供 者 側 で 商 品 の 品 切 れや 新 商 品 追 加 などのメンテナンスを 追 加 しているので 最 新 の 商 品 データベースをもつAPIにアクセスして 自 分 のサイトに 表 示 するこ とが 出 来 ます これはリンク 切 れを 防 いだり またサイトを 更 新 しなくても 最 新 情 報 や 商 品 価 格 などを 表 示 することなどに 役 立 ちます しかし APIはそれだけではありません これから 少 しずつ 勉 強 して いきましょう! 初 心 者 向 けAPI 説 明 資 料 を 別 途 作 成 しましたので そちらでご 確 認 ください 12 13
7 APIの 利 用 イメージ 基 本 的 にユーザがサイトにアクセスしたときにAPIへもアクセスし ブラウザ 上 に APIを 利 用 したコンテンツや 商 品 リンクを 表 示 させるこ とができます APIからは 基 本 的 に 構 造 的 に 整 理 されたデータのみが 帰 ってくるの で プログラムなどで 見 た 目 をHTMLのテンプレート( 定 められたパタ ーン)で 表 示 されるように 調 整 が 必 要 です ま た 逆 に A P I へ アク セ ス す るとき も 定 め ら れ た ル ー ル に 従 い リ クエストする 必 要 があります 一 番 多 く 使 われているのがREST 形 式 (XML)で http://から 始 めるURLを 組 み 立 ててアクセスします 1 各 種 APIの 仕 様 書 を 見 て どんな 項 目 で 検 索 したり 条 件 を 指 定 し たり 絞 り 込 みできるか 確 認 してみましょう 例 :ヤフーデベロッパーネット http://developer.yahoo.co.jp/ 2 各 種 APIの 仕 様 書 を 見 て どんな 項 目 が 返 ってくるか 確 認 してみま しょう API ユーザーのPC レンタルサーバー 14 15
8 事 前 準 備 :ソフトのインストール 今 回 は 初 めての 方 向 けのオリエンテーションでもあるので 事 前 に 準 備 していただきたいことがあります ひとつは 必 要 なソフトのインストール もうひとつは APIキーの 取 得 などです まず 必 要 なソフトは XAMPP テキストエディタ FTPソフト などです テキストエディタは EmEditor 秀 丸 TeraPad などがおすすめです なお Windowsのメモ 帳 でもUTF-8の 文 字 コー ドが 扱 えるようになりましたが 問 題 があるので これでPHPファイル は 編 集 しないでください 1XAMPPのインストール 参 考 : http://musilog.net/work-style/software/xampp_install_ memo.php 最 新 版 では 黒 い 画 面 が 出 てきて 質 問 される 感 じですが それにはデ フォルトで 答 えておき 最 後 x/1-7 と 聞 かれた 場 合 x で 一 旦 イ ンストールを 終 了 させましょう Skypeをインストールされている 場 合 は XAMPPと 競 合 し て XAMPPが 動 きません Skypeの 設 定 ネットからポート 番 号 のチェックを 外 してください 2テキストエディタのインストール(デモではEmEditorを 使 います) a.デフォルトの 設 定 文 字 コートはUTF8(BOM 無 ) 改 行 コードはLF と 指 定 しておくこと b.ルーラ( 定 規 )を 表 示 させます c.phpのカラーリングが 必 要 な 場 合 はその 設 定 をしてください 16 17
9 事 前 準 備 :APIキーの 取 得 次 にAPIキーの 取 得 を 行 ないます APIキーとは APIへアクセスするための 鍵 のようなものです 誰 に でもアクセスできるAPIもありますが ユーザー 登 録 制 で 使 う 人 を 制 限 したりする 例 がほとんどです また キー とあるように 鍵 でもあるので 第 三 者 に 漏 れてしまっ たり 貸 出 したりすることは 規 約 違 反 になる 例 があります 取 扱 には 気 をつけましょう 特 に 盗 まれキーで 大 量 のアクセスされて 自 分 のキー が 剥 奪 さ れ て は 困 りま す か ら ね なお APIキーは 別 名 がいくつかあります ト ー ク ン ( リ ン ク シ ェ ア 等 ) デベロッパーID ( 楽 天 Webサービス 等 ) アプリケーションID (ヤフーデベロッパーネット 等 ) 1 楽 天 ウェブサービスのサイトにて 自 分 のアフィリエイトIDやデベロ ッパーIDを 確 認 してください http://webservice.rakuten.co.jp/ 初 めて 楽 天 のAPIを 使 う 方 は 登 録 が 必 要 です 2リンクシェアのトークンを 取 得 してください http://www.linkshare.ne.jp/ ログイン 後 サイトを 選 択 して リンク Webサービスの 下 の 方 で 取 得 できます また そのサイトでマーチャンタイザー 対 応 のものと 提 携 していないと データが 取 得 できません 3ヤフーのアプリケーションIDを 取 得 してください http://developer.yahoo.co.jp/ 通 常 APIキーはすぐに 発 行 されるシステムになっていますが 早 め に 準 備 できるものは 取 得 しておくと 良 いでしょう これとは 逆 にアフィリエイトASPのAPIなどで 商 品 を 表 示 させたい 場 合 ECサイトと 提 携 していないと その 商 品 は 表 示 されません EC サイトとの 提 携 承 認 には 時 間 がかかる 場 合 もあるので サイトを 作 って 早 めに 申 請 しておくと 良 いでしょう 取 得 したIDなどは テキストエディタなどにコピペで 保 存 しておき 無 くさないようにしてください ( 特 にヤフーのIDはどのサイト 用 のIDかわからなくなるので サイト 名 とIDを 一 緒 にメモしておきましょう) なお 対 象 サイトについてですが 開 発 用 のAPIキーは 自 分 の 持 ってい るサイトのものであればどれでも 構 わないので 一 番 取 りやすいサイト のIDで 取 得 して 開 発 を 進 めるのもひとつの 手 です 18 19
10 XAMPPの 使 い 方 XAMPPは 自 分 のパソコンの 中 でレンタルサーバのようにサーバの 機 能 やPHPが 動 く 環 境 を 一 式 自 動 的 に 作 ってくれるソフトです これを 起 動 しただけで 自 分 のパソコンのとあるところにおいた 場 所 のファイルが サーバで 処 理 されてブラウザで 見 ることができます 1 左 側 の 指 示 に 従 ってXAMPPを 起 動 させてみよう スタート プログラム Apache Frends XAMPP XAMPP Control Panel デスクトップにショートカットアイコンも 置 くことが 出 来 ます が Windowsのタスクバーのあたりにあるクイックスタートに 入 れて おいたほうが 今 後 便 利 かもしれません 2XAMPPの 起 動 が 確 認 できたら http://localhost/ とブラウザに 入 力 して XAMPPロゴが 表 示 されるのを 確 認 しよう ( 一 番 右 側 の 日 本 語 をクリックしていろんなページを 見 てみよう) XAMPPを 移 動 すると 上 記 のようなコントロールパネルが 表 示 され ます Apache と 表 示 されているところの 右 側 の 開 始 ボタンを 押 すと 停 止 ボタンに 切 り 替 わり その 左 側 に 起 動 と 表 示 されます ここで http://localhost/ にアクセスされてブラウザに XAMPP のロゴが 表 示 されればOKで す 20 21
11 Web 上 で 主 に 使 われる 言 語 Webサイトを 制 作 するときにはまずはHTML そしてスタイルシー トなどを 使 ってブラウザ 上 の 表 示 を 制 御 してきました これらは 画 面 上 の 表 示 を 司 るのに 対 し Javascriptはブラウザ 上 で 動 くプログラミング 言 語 です 逆 にWeb APIを 使 ったプログラミングでよく 使 われる 言 語 にPHP やPerl Rubyなどもありますが これらはブラウザ 上 ではなくサーバ ー 上 で 動 くプログラミング 言 語 です 今 回 の 第 3クールでは 主 にクライアントサイド つまりブラウザ 上 で 動 くJavascriptを 中 心 に 勉 強 していきます 一 方 でより 表 現 を 深 める ためにも サーバ 上 でのプログラミング 言 語 としては 第 1クールや 第 2 クールで 勉 強 したPHPを 採 用 します まずはそれらのプログラム 言 語 がどこで 実 行 されているかの 関 係 を 確 認 しましょう 1Wikipediaなどで 下 記 用 語 を 検 索 してさらっと 流 し 読 みしてみまし ょう HTML CSS Javascript PHP 2それぞれのわかりやすそうなサイトを 探 してみましょう スタイルシート 辞 典 などリファレンスなどをブックマークしておきま しょう これらの 準 備 をしておくと 限 られた 勉 強 会 時 間 中 にさっと 検 索 し たり 調 べられたりすることが 出 来 ます 決 まった 検 索 サイト リファレンスを 持 っておくと 探 すのもググるよ りも 素 早 く 見 つけられるので 便 利 です 22 23
12 PHPやJavascriptを 編 集 すると きの 注 意 事 項 WebサービスAPI 勉 強 会 第 3クールテキスト HTMLはテキスト 文 書 の 意 味 合 いが 強 かったので 全 角 文 字 で 適 当 なところに 文 字 を 入 れても 画 面 が 崩 れるレベルで 気 づいて 治 すこ とができますが PHPやJavascriptの 場 合 はそうはいかないことが 多 々あります PHPの 文 中 に 書 いてはいけない 全 角 文 字 が 混 ざると 真 っ 白 が 画 面 で 英 語 のようなエラーメッセージが 出 てパニックになってしまうこ とがあります 慣 れると 冷 静 に 対 処 できるのですが それを 防 ぐために PHPやJavascriptを 書 くときにコーディングルールを 身 につけておき ましょう 1 全 角 文 字 や 特 に 見 た 目 でわからない 全 角 スペースはプログラムの 中 に 絶 対 書 かない 例 外 はもちろんあります 例 :echo " 日 本 語 英 語 "; このようにブラウザ 上 に 表 示 させる 内 容 は 全 角 文 字 でも 大 丈 夫 です ただし そのブラウザに 表 示 させる 範 囲 を 示 す 記 号 " " (ダブ ル ク ォ ー テ ー シ ョ ン マ ー ク )で 囲 う 必 要 が あ り ま す 例 :// コメント このように // を 付 けた 場 合 その 行 のそれ 以 降 の 文 字 列 は PHPやJavascriptに 無 視 されます 主 に プログラムを 作 っていると きにコメントを 書 いて 何 をしているかメモするのに 役 立 ちます ちょうどHTMLのコメントタグと 同 じです 1 左 側 のルールに 従 って テキストエディタで 書 いてみよう echo " 日 本 語 英 語 "; // コメント 2コメントを 複 数 行 で 書 く 場 合 は 下 記 の 用 に 書 いてみましょう /* コメント1 行 目 コメント2 行 目 日 本 語 交 えて 自 由 に 記 述 出 来 る コメント3 行 目 */ /* ではじめて */ で 終 わらせます 必 ず 対 になる 必 要 があります 複 数 行 だと 文 字 の 飾 りを 付 けて 長 いプログラムの 中 でも 見 つけやす くなります テキストエディタでカラーリングが 出 来 る 場 合 は コメント 部 分 の 色 が 明 確 になり より わかりやすくなります 24 25
13 PHPを 使 ってみよう まずはカンタンにブラウザ 上 に 文 字 を 表 示 させるだけのHTMLを 生 成 するPHPプログラムを 作 ってみます 1テンプレートサイトからHTML 一 式 をダウンロードし ファイル 名 を 変 えて( 拡 張 子 を 変 えて) 左 記 PHPを 埋 め 込 んで 表 示 を 確 認 する ファイル 名 :text.php 格 納 ディレクトリ ( 環 境 によって 異 なります) アクセスURL:http://localhost/text.php 2PHPの 中 でコメントを 書 いて それをブラウザで 表 示 したときにコ メントが 表 示 されないことを 確 認 しよう まずはテキストエディタでファイルを 新 規 作 成 し 下 記 のように 入 力 します <?php?> この 間 にPHPのプログラムを 書 いていくことが 出 来 ます ファイル 名 を test.php 改 行 コードLF 文 字 コードUTF-8で 保 存 してくださ い そ れ で は プ ロ グ ラ ム の ひ と つ と して echo "こんにちは"; と 文 字 を 表 示 させてみましょう 26 27
14 簡 単 に 使 えるAPIを 使 ってみよう ここでは 簡 単 に 使 えるAPIを 紹 介 します これらもプログラムと 組 み 合 わせることが 出 来 れば 魅 力 が 倍 増 します ぜ ひ お 試 しくだ さ い 1 自 分 が 持 っている 携 帯 サイトのURLのQRコードを 作 成 し どこか にimgタグとして 貼 りつけてみる それを 携 帯 電 話 で 読 み 取 って 実 際 に 表 示 されるか 確 認 する QRコード 生 成 のAPI Googleで 用 意 されているAPIでを 使 って QRコードを 作 りま す imgタグだけで 呼 び 出 せるAPIです 今 プログラミング 知 識 がなく てもすぐ 使 えます Google Chart Tools http://code.google.com/intl/ja/apis/charttools/ 参 考 :[N] Google Chart API でQRコードを 生 成 http://netafull.net/lifehack/026508.html <img src="http://chart.apis.google.com/chart?chs=150x1 50&cht=qr&chl=http%3a//musilog.net/" /> URLはURLエンコードが 必 要 です これを 利 用 して 個 別 ページの 携 帯 版 のページURLのQRコードを 自 動 的 に 作 成 することなども 実 現 します QRコードはデンソーウェブの 商 標 です 28 29