Download to read offline
![初心者の頃：WebエンジニアのAPI入門課題
(JS)エンドポイント：
const URL = "http://weather.livedoor.com/forecast/webservice/json/v1?city=130010";
const getWeather = async () => {
const res = await axios.get(URL);
const item = res.data;
return item.forecasts[0].telop;
};
結果：
"forecasts": [
{
"dateLabel": "今日",
"telop": "曇り",
}
]
Copyright (C) 2022 Toranoana Inc. All Rights Reserved.](https://image.slidesharecdn.com/gcpapi1-220309055830/85/GCP-API-8-320.jpg)
![Cloud FunctionでCloud Vision APIの使用例
import * as vision from '@google-cloud/vision';
export const imageVisionFunc = functions.storage.bucket('//bucket名前').object().onFinalize(async event
=> {
const docRef = admin.firestore().collection('photos').doc(event.name);
const imageUri = `画像のファイルパス`;
const visionClient = new vision.ImageAnnotatorClient();
const results = await visionClient.labelDetection(imageUri); // ラベル解析の関数を呼ぶ
const labels = results[0].labelAnnotations.map(obj => obj.description);
return docRef.set({labels, imageUri}); // ファイル名と分析した結果をDBに書き込む
});
Copyright (C) 2022 Toranoana Inc. All Rights Reserved.](https://image.slidesharecdn.com/gcpapi1-220309055830/85/GCP-API-17-320.jpg)
![Cloud FunctionでTranslate APIの使用例
function createTranslationPromise(text, imageUri, docRef) {
let label: string;
return requestP(createTranslateUrl('ja', text), {resolveWithFullResponse: true}).then(response => {
if (response.statusCode === 200) {
const resData = JSON.parse(response.body).data;
label = resData.translations[0].translatedText;
const labels = label.split('、');
return docRef.set({labels, imageUri});
}
else throw response.body;
});
}
Copyright (C) 2022 Toranoana Inc. All Rights Reserved.](https://image.slidesharecdn.com/gcpapi1-220309055830/85/GCP-API-18-320.jpg)
![Cloud FunctionでTranslate APIの使用例
function createTranslateUrl(lang, text) {
const apiKey = '[API KEY]'
return
`https://www.googleapis.com/language/translate/v2?key=${apiKey}&source=
en&target=${lang}&q=${text}`;
}
Copyright (C) 2022 Toranoana Inc. All Rights Reserved.](https://image.slidesharecdn.com/gcpapi1-220309055830/85/GCP-API-19-320.jpg)
GCPの画像認識APIの紹介
- 1. GCPの画像認識APIの紹介 虎の穴ラボ株式会社 片岡 宏 2022/3/8 WebAPI LT会 - vol.3 Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
- 2. ● 所属 :虎の穴ラボ株式会社 ● 担当 : DXチーム ● 経歴： 2015 ~ 2017 オンラインゲーム会社 2018 ~ 2021 高知に移住、Webエンジニア 2021 ~ 虎の穴ラボ株式会社、Webエンジニア 自己紹介 Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
- 3. アジェンダ 1.Web API とは 2.APIを使う場合の注意点 3.WebAPIの実用例 - GCPのCloud Funtionで画像認識Vision APIの実装 4.まとめ Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
- 4. Web API (Application ProgrammingInterface)は何？ ● エンジニア1年目のときの疑問 Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
- 5. 例：171時報 = API 今何時？ 19:55分 Copyright(C) 2022 Toranoana Inc. All Rights Reserved.
- 6. なぜWeb APIが必要か？ APIはアプリケーションの開発工程を大幅に削減するメリットがある ● 地図情報が欲しい: Google MapのAPIを使う ● 天気情報が欲しい : Weather APIを使う 巨人の肩に立つ Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
- 7. 初心者の頃：WebエンジニアのAPI入門課題 東京都の現在の天気を取得し、画面に表 示する livedoor apiで取得できた (天気サービス は2020/7/31で終了) 右側は取得したデータの一部の内容 "forecasts":[ { "dateLabel": "今日", "telop": "曇り", "date": "2020-04-23", "temperature": { "min": null, "max": null }, "image": { "width": 50, "url": "http://weather.livedoor.com/img/icon/8.gif", "title": "曇り", "height": 31 } }, Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
- 8. 初心者の頃：WebエンジニアのAPI入門課題 (JS)エンドポイント： const URL = "http://weather.livedoor.com/forecast/webservice/json/v1?city=130010"; constgetWeather = async () => { const res = await axios.get(URL); const item = res.data; return item.forecasts[0].telop; }; 結果： "forecasts": [ { "dateLabel": "今日", "telop": "曇り", } ] Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
- 9. APIを使う場合の注意点 1.OSS以外のAPIはほとんど課金必要がある Google Map API(従量課金) OpenWeather API (Free ~ Enterprise)個人開発、商業使用までのプランがあ る aws rekognition (従量課金) リアルタイム顔認証システム実装可能 Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
- 10. APIを使う場合の注意点 2.APIがバージョンアップなどする際に、自分のプログラムを対応必要がある 例：api v1 =>api v2アップデートされる、v1はxx月xx日から使えなくなるみたいな 通知が来る、対応を忘れたら、自分のプログラムが動かなくなる APIバージョンアップ時によくある変更点： ● 引数が変わる ● 返すデータが変わる もちろんテストが必要 Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
- 11.
- 12. Web APIの実用例 Copyright (C)2022 Toranoana Inc. All Rights Reserved.
- 13. GCPで画像認識Vision APIの実装 FrontEnd: ionic Nativeフレームワーク (カメラ、デバイスストレージなどを利用） Google Cloud API: Vision APIで画像認識（ラベル付け）する、 Translate APIで英語を日本語に翻訳する システム仕様： 1.写真を撮影し、バックエンドにアップロードする 2.FireStoreの写真ファイルをCloud Function上で実装したコードを実行し、画像を認識する、ラベルを付ける 3.検知した画像のラベルをTranslate APIで日本語化してからデータベースに保存する 4.FireBaseのデータベースからラベルデータを取得し、アプリの画面上に表示する Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
- 14. Vision API 今回の例： AutoML Visionを使用して、カスタムラベルで画像を分類する機械学習モデルを利 用しました。 デモ(Google) Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
- 15. Translate API Google TranslateAPIは、グーグルが提供するREST形式の翻訳APIです。APIに渡した文字列がど の言語で記述されたものかを検出したり、翻訳したりできます。そしてテキストだけじゃなくて音声も翻 訳できます。 Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
- 16. Translate API Copyright (C)2022 Toranoana Inc. All Rights Reserved.
- 17. Cloud FunctionでCloud VisionAPIの使用例 import * as vision from '@google-cloud/vision'; export const imageVisionFunc = functions.storage.bucket('//bucket名前').object().onFinalize(async event => { const docRef = admin.firestore().collection('photos').doc(event.name); const imageUri = `画像のファイルパス`; const visionClient = new vision.ImageAnnotatorClient(); const results = await visionClient.labelDetection(imageUri); // ラベル解析の関数を呼ぶ const labels = results[0].labelAnnotations.map(obj => obj.description); return docRef.set({labels, imageUri}); // ファイル名と分析した結果をDBに書き込む }); Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
- 18. Cloud FunctionでTranslate APIの使用例 functioncreateTranslationPromise(text, imageUri, docRef) { let label: string; return requestP(createTranslateUrl('ja', text), {resolveWithFullResponse: true}).then(response => { if (response.statusCode === 200) { const resData = JSON.parse(response.body).data; label = resData.translations[0].translatedText; const labels = label.split('、'); return docRef.set({labels, imageUri}); } else throw response.body; }); } Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
- 19. Cloud FunctionでTranslate APIの使用例 functioncreateTranslateUrl(lang, text) { const apiKey = '[API KEY]' return `https://www.googleapis.com/language/translate/v2?key=${apiKey}&source= en&target=${lang}&q=${text}`; } Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
- 20. APIのレスポンス結果:（Google translate apiを経由して、英語→日本語変換しました) "床" "フローリング" "ウッドフローリング" "ラミネートフローリング " "ハードウッド" "ウッド" "インテリアデザイン" "ロビー" "ロフト" "オフィス" Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
- 21.
- 22.
- 23.