Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 1
PHP実践∼外部APIを使って情報を取得する∼
アシアル株...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 2
自己紹介
• 名前
– 岡本雄樹 (ハンドルネーム:ジャス...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 3
外部APIを使うメリット
• 自分のWebサービスに様々な...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 4
事前準備
• APIアカウントの用意
–今回は不要
• P...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 5
アジェンダ
• 第一回
– WebAPIとは
• 主なAP...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 6
WebAPIとは
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 7
WebAPIとは
• そもそもAPIとは
– Applic...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 8
APIの例
• APIの例
– ブラウザ(HTML5)
•...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 9
WebAPIとは
• Web APIの特徴
– 提供元
•...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 10
主なAPI提供サイト
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 11
Yahoo! JAPAN
• 主な提供機能
– 検索
–...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 12
Google
• 主な提供機能
– Google Map...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 13
楽天ウェブサービス
• 主な提供機能
– 楽天市場
– ...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 14
Amazon
• 主な提供機能
– 商品検索
– AWS...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 15
Twitter
• 主な提供機能
– 検索
– ツイート...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 16
WebAPIを公開する理由
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 17
WebAPIを提供する側のメリット
• API利用が売り...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 18
WebAPIの活用方法
• WebAPIの活用方法
– ...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 19
APIを利用するための技術
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 20
APIプロトコル
• REST(Representati...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 21
データ形式
• JSON(JavaScript Obje...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 22
WebAPIを活用するためのPHP関数
• file_g...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 23
WebAPIを試してみよう
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 24
WebAPIを試す
• 郵便番号検索API
– URL
...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 25
郵便番号検索APIの結果
<ZIP_result>
<r...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 26
郵便番号検索APIの結果
<ADDRESS_value>...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 27
結果をPHPで取得してみよう
• 結果をPHPで取得して...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 28
取得結果
• ブラウザで開いてHTMLソースを確認した様子
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 29
XMLについて
• 先ほどの結果情報はXML形式のテキス...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 30
PHPでXMLを扱う方法
• PHPでXMLを扱う方法
...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 31
郵便番号APIの活用例
• 郵便番号APIの活用例
– ...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 32
WebAPIを試す∼その2
• お天気API(OpenW...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 33
OpenWeatherMap APIの結果
{"coor...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 34
JSONについて
• 先ほどの結果情報はJSON形式のテ...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 35
取得結果
• ブラウザで開いてHTMLソースを確認した様子
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 36
GETではなくPOSTしたい場合
• GETではなくPO...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 37
POSTの実験
• POSTの実験
– 『認証なし』で利...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 38
POSTの実験
• 手順
– curlのセッションを初期...
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 39
【次回予告】マッシュアップ
URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 40
マッシュアップとは
• 複数のWebAPI(と自分のコン...
Prochain SlideShare
Chargement dans…5
×

PHP実践 ~外部APIを使って情報を取得する~

11 952 vues

Publié le

https://schoo.jp/class/1999

Publié dans : Business
  • Soyez le premier à commenter

PHP実践 ~外部APIを使って情報を取得する~

  1. 1. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 1 PHP実践∼外部APIを使って情報を取得する∼ アシアル株式会社 岡本雄樹
  2. 2. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 2 自己紹介 • 名前 – 岡本雄樹 (ハンドルネーム:ジャスティス岡本) • 職業 – アシアルという会社で教育事業を営んでおります • 略歴 – プログラミングを始めたきっかけ • 高校生の時に「プログラミングコンテスト」があるのでプログラムを作るよう 部活の顧問に指示されたため、簡単そうだったのでPHPを独学で始める。 – プログラミングの仕事をしながら大学に通う • ベンチャー企業で勤怠管理システムの開発に携わったり、通販企業で働いてい たらいつの間にか社内SEになっており、システム構築からサーバの運用などシ ステム面を一手に引き受ける。 – 新卒(?)でアシアル入社 • 主にECサイトの自社パッケージ開発や多数のEC案件に関わる。 – 教育事業を独立させる • 新規事業会議で、新規も良いですが既存の教育事業を強化しましょうと提案、 3ヶ月後に配置配属。1年後にマネージャーとなる。 • ブログ:ジャスティス岡本の週末ハッカー – http://j801.com/ • 著書 – 「イラストでよくわかるPHP はじめてのWebプログラミング入門」
  3. 3. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 3 外部APIを使うメリット • 自分のWebサービスに様々な情報を取り込めます – ニュース、天気、通販サイトの商品情報など • アイディア次第で面白いサービスや便利なサービスを作 ることが出来るようになります
  4. 4. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 4 事前準備 • APIアカウントの用意 –今回は不要 • PHP実行環境 • 実習用のソースコード –今回は配布なし
  5. 5. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 5 アジェンダ • 第一回 – WebAPIとは • 主なAPI提供サイト • PHPからAPIを利用するための技術 – WebAPIを試す • 郵便番号APIを試してみよう • お天気APIを試してみよう • POSTリクエストをPHPで行う方法 • 第二回 – 複数のAPIを組み合わせてマッシュアップを行う • 第三回 – Twitter検索アプリの作成
  6. 6. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 6 WebAPIとは
  7. 7. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 7 WebAPIとは • そもそもAPIとは – Application (アプリケーション) – Program(プログラム) – Interface(インタフェース) • 他のアプリケーションに対して特定機能 を簡潔に呼び出せるように、インタ フェースを規定したものです。
  8. 8. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 8 APIの例 • APIの例 – ブラウザ(HTML5) • 位置情報を取得するAPIや画面に絵を描くためのAPIが提供 されています。 – OS • フォルダやファイルの管理、ウィンドウの表示をはじめ様々 な機能がAPIとして提供されています。 – Webサービス • 一部のWebサービスは外部のWebサービスやアプリから連携 できるように、WebAPIを開放しています。
  9. 9. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 9 WebAPIとは • Web APIの特徴 – 提供元 • 色々なWebサイトが提供しています – 楽天やTwitter、Googleなど – 代表的な機能 • 情報を取得する機能 – 例:商品一覧など • 情報を加工する機能 – 例:数字を渡すとグラフで返してくれるAPIなど
  10. 10. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 10 主なAPI提供サイト
  11. 11. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 11 Yahoo! JAPAN • 主な提供機能 – 検索 – 地図 – オークション – ショッピング – ニュース • 情報源 – デベロッパーネットワークトップにて公開 • http://developer.yahoo.co.jp/
  12. 12. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 12 Google • 主な提供機能 – Google Maps – Custom Search API • 情報源 – https://developers.google.com/
  13. 13. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 13 楽天ウェブサービス • 主な提供機能 – 楽天市場 – 楽天ブックス – 楽天オークション – 楽天トラベル • 情報源 – http://webservice.rakuten.co.jp/
  14. 14. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 14 Amazon • 主な提供機能 – 商品検索 – AWSの管理API • 情報源 – http://www.amazon.co.jp/gp/feature.html?docId =451209
  15. 15. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 15 Twitter • 主な提供機能 – 検索 – ツイート – 他、殆ど全ての機能 • 情報源 – https://dev.twitter.com/
  16. 16. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 16 WebAPIを公開する理由
  17. 17. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 17 WebAPIを提供する側のメリット • API利用が売り上げと直結しているケース – 課金、 EC2、商用地図など • 自社サイトの宣伝やアフィリエイトと結びついている ケース – 楽天やAmazon等 • エコシステムの構築(サードパーティー製アプリなど) – TwitterやFacebookは多くの機能をAPI提供している • サードバーティ製のサイトやクライアントアプリが豊富。 – サードパーティーが盛り上がれば利用者が増える » それに伴い「会員」や「データ」などの資産が増える
  18. 18. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 18 WebAPIの活用方法 • WebAPIの活用方法 – 表現力向上 • 地図やグラフを描画するAPIで表現力を向上させる – 利便性向上 • お天気APIやニュースAPIを利用してサイトの利便性を向上させる – アフィリエイト • サイトにAmazonや楽天の商品を自動掲載してアフィリエイト収入 を得る – 口コミマーケティング • Twitter連携を行うことで口コミに乗りやすくする。 – 記事を投稿すると自動的にTwitterにURLを投稿 – 自社サイトを宣伝するBotを作る – 課金 • オンライン決済会社が提供するAPIを利用し課金を行う
  19. 19. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 19 APIを利用するための技術
  20. 20. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 20 APIプロトコル • REST(Representational State Transfer) – 特定のURLにGETやPOSTでリクエストすることにより、データ の取得などの何らかの操作を行うことができます。現在の主流 です。 • SOAP – 古くから利用されているXMLを応用したオブジェクトデータ通 信の規格です。拡張性の高さが強みですが複雑なため近年では 廃れつつあります。
  21. 21. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 21 データ形式 • JSON(JavaScript Object Notation) – JavaScriptにおけるオブジェクトの記述方法と同じ文法のデータ形式です。データが軽量か つJavascriptから楽に扱えるため、Webアプリケーションと相性が良いのが特徴です。この ため、最近のWebAPIはJSONをサポートしているものが多いです。 – JavaScript以外の言語からの呼び出し • PHPからもjson_encode/decode関数を使うことで、簡単に扱うことが可能です(PHP5.2以降) • XML – 独自のフォーマットを作成することができる、汎用性の高いデータ形式です。RSSなどの フォーマットとして採用されています。 – メリット • 情報を規格化することができる • 人間にも読みやすい形式である – デメリット • タグ構造のためデータが冗長で重たくなる • PHP等でデコード(パース)やエンコードする負担も大きい
  22. 22. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 22 WebAPIを活用するためのPHP関数 • file_get_contests()関数 – file_get_contestsは元々サーバ上のファイルを開くための関数で すが、外部サイトのURLにリクエストを送信し、結果を変数に 格納することができます。 – GETメソッドでリクエストを送信します。 • cURL – cURLはhttp等の通信プロトコルをサポートする高機能なクラス です。 – POSTメソッドで情報を送信したい場合や、厳密なエラー処理・ エラーコードの取得を行いたい場合に利用します。
  23. 23. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 23 WebAPIを試してみよう
  24. 24. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 24 WebAPIを試す • 郵便番号検索API – URL • http://zip.cgis.biz/ – 機能 • 郵便番号を元に住所情報を返してくれるAPIです。 – 使い方 • SimpleAPIのURLに続けて知りたい郵便番号を渡します – 例:http://zip2.cgis.biz/xml/zip.php?zn=1130033
  25. 25. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 25 郵便番号検索APIの結果 <ZIP_result> <result name="ZipSearchXML"/> <result version="1.01"/> <result request_url="http%3A%2F%2Fzip.cgis.biz%2Fxml%2Fzip.php%3Fzn%3D1130033"/> <result request_zip_num="1130033"/> <result request_zip_version="none"/> <result result_code="1"/> <result result_zip_num="1130033"/> <result result_zip_version="0"/> <result result_values_count="1"/> <ADDRESS_value> ※次ページに記載 </ADDRESS_value> </ZIP_result>
  26. 26. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 26 郵便番号検索APIの結果 <ADDRESS_value> <value state_kana="トウキョウト"/> <value city_kana="ブンキョウク"/> <value address_kana="ホンゴウ"/> <value company_kana="none"/> <value state="東京都"/> <value city="文京区"/> <value address="本郷"/> <value company="none"/> </ADDRESS_value>
  27. 27. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 27 結果をPHPで取得してみよう • 結果をPHPで取得してみよう – file_get_contents()関数 • URLを元にコンテンツを取得する <?php $url = "http://zip2.cgis.biz/xml/zip.php?zn=1130033"; $result = file_get_contents($url); echo $result; //echo htmlspecialchars($result, ENT_QUOTES, "UTF-8"); ?>
  28. 28. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 28 取得結果 • ブラウザで開いてHTMLソースを確認した様子
  29. 29. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 29 XMLについて • 先ほどの結果情報はXML形式のテキストです – XMLとは? • HTMLのようなタグで意味づけするマークアップ言語 • 汎用的に利用することが出来る • ブログの更新情報をまとめたRSSなどもXMLを活用し ている
  30. 30. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 30 PHPでXMLを扱う方法 • PHPでXMLを扱う方法 – SimpleXML拡張モジュール • XMLをオブジェクトとして変換する • 値をオブジェクトのプロパティとして参照できる • foreachなどで繰り返し処理にかけることができる <?php $url = "http://zip2.cgis.biz/xml/zip.php?zn=1130033"; $xml = simplexml_load_file($url); // オブジェクトを確認 var_dump($xml); // 市区町村情報を文字列として出力 echo (string) $xml->ADDRESS_value->value[5]->attributes()->city; ?>
  31. 31. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 31 郵便番号APIの活用例 • 郵便番号APIの活用例 – 住所入力補助を行うデモが同サイトで公開されています • http://zip.cgis.biz/sample/zip_search_xml.php
  32. 32. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 32 WebAPIを試す∼その2 • お天気API(OpenWeatherMap) – URL • http://openweathermap.org/ – 機能 • 都市名や緯度経度などから天気情報を返してくれるAPIです – 使い方 • 例:東京の天気情報を取得 – http://api.openweathermap.org/data/2.5/weather?q=Tokyo,jp
  33. 33. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 33 OpenWeatherMap APIの結果 {"coord":{"lon":139.69,"lat":35.69},"sys":{"message":0.0881,"country":"JP","sunrise ":1425330515,"sunset":1425371868},"weather":[{"id":500,"main":"Rain","descript ion":"light rain","icon":"10n"}],"base":"cmc stations","main":{"temp":278.308,"temp_min":278.308,"temp_max":278.308,"pres sure":1022.61,"sea_level":1027.62,"grnd_level":1022.61,"humidity":100},"wind":{" speed":1.67,"deg":333},"clouds":{"all":92},"rain":{"3h":1},"dt":1425397219,"id":185 0147,"name":"Tokyo","cod":200}
  34. 34. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 34 JSONについて • 先ほどの結果情報はJSON形式のテキストです – JSONとは? • JavaScript言語でオブジェクトを表現する時の表記方法 • PHPでも利用可能 – json_decode()やjson_encode()関数を使う <?php $url = "http://api.openweathermap.org/data/2.5/weather?q=Tokyo,jp"; $json = file_get_contents($url); $result = json_decode($json); // オブジェクトを確認 var_dump($result); // 天気情報を出力 echo $result->weather[0]->main; ?>
  35. 35. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 35 取得結果 • ブラウザで開いてHTMLソースを確認した様子
  36. 36. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 36 GETではなくPOSTしたい場合 • GETではなくPOSTしたい場合 – POSTやその他複雑なリクエストを送りたい場合はcURLが便利です • cURLとは – HTTPをはじめとした様々な通信に対応したライブラリ • クッキーなどのヘッダーも送れます
  37. 37. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 37 POSTの実験 • POSTの実験 – 『認証なし』で利用できる手頃なAPIを見つけられませんでした • 自分のサイトの掲示板に投稿します – http://illustphp.com/5/index.php name comment submit POSTで投稿可能
  38. 38. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 38 POSTの実験 • 手順 – curlのセッションを初期化 – 送り先のURLと送り方(POST)、送信データをcurlに設定 • http_build_queryでデータをURLエンコード – curlのセッションを実行 – curlのセッションを終了 <?php $url = "http://illustphp.com/5/write.php"; $data = array('name' => '岡本', 'comment' => 'スクー出演!', 'submit' => 1); $ch = curl_init(); curl_setopt($ch, CURLOPT_POST, true); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data)); curl_exec($ch); curl_close($ch); ?>
  39. 39. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 39 【次回予告】マッシュアップ
  40. 40. URL : http://www.asial.co.jp/ │ Copyright © 2015 Asial Corporation. All Rights Reserved. │ 40 マッシュアップとは • 複数のWebAPI(と自分のコンテンツやアイディア)を組み合わせて、新 しいサービスを作り上げることを「マッシュアップ」と呼びます。 • 次回予告! – 楽天商品検索とYahoo!ショッピング商品検索を組み合わせて、複数のショッ ピングサイトから商品を検索するアプリを作ってみましょう。

×