SlideShare a Scribd company logo
1 of 41
Download to read offline
ノーコーディングでやってみよう!
写真を色々加工して自動ツイートする
LINE Botを作ってみた話。
2020/08/29 LogicFlow-ja online #3
Noriko Matsumoto
2
自己紹介
• 株式会社オルターブース デザインアーキテクト
• 香蘭女子短期大学 非常勤講師「Webデザイン論」担当
• LINE API Expert
• Microsoft MVP for Business Applications ,
Microsoft Azure
• 好きなもの:デザイン、Logic Apps / Power Automate、
古代エジプト文明、民俗学 etc…
松本 典子(Noriko Matsumoto)
@nori790822
Blog:https://zuvuyalink.net/nrjlog/
3
ASCII.jp
「Azure Logic Apps」超入門
https://ascii.jp/elem/000/001/736/1736136/
https://ascii.jp/featuredarticles/1647224/
• Azure Logic Appsとは?
• Azure Logic AppsとPower Automateの違い
• 写真を色々加工して自動ツイートするLINE Bot
• [共通]LINEから画像を送る処理をトリガーにする
• 1.人物の顔に「ぼかし」を入れる
• 2. 写真を絵画風に加工する
• [共通]画像付きで自動ツイートする
• まとめ
4
本日お話したいこと
Azure Logic Appsとは?
5
• Microsoftが提供するiPaaSサービス
• コードを 1 行も書かなくてOK
• ブラウザでワークフローを作成できる
• 必要に応じて条件式を組み込める
• 料金は使用したリソース分のみ(従量課金)
• 提供されているコネクタは390以上
6
Azure Logic Apps とは?
7
コネクタの概念
• イベントがあったら動く
先頭に選ぶコネクタ
コネクタ:サービス連携を行うためのコンポーネント
• 2番目以降に選ぶコネクタ
(複数あり)
※全てのコネクタにトリガーとアクションがあるわけではない。
8
デザイナー画面
トリガー
ワークフロー
イベントをトリガで受け取り、後続のアクションで処理を行う
アクション
@twit_ahf さんと @yugoes1021 さんが共同で作成されている PowerBI Report 9
コネクタの種類を確認するには?
Azure Logic AppsとPower Automateの違い
10
11
Microsoftが提供する iPaaS サービス
Power Automate Azure Logic Apps
12
2つのサービスの違いは?
Power Automate Azure Logic Apps
人とサービスをつなぐ サービスとサービスをつなぐ
人が関わる、業務プロセスの
自動化。
システム間の連携をIT部門
などが設定・管理。
「適材適所」で使い分けるのがオススメ!
- ユーザーごとに1日のAPI利用上限あり - API利用上限なし(従量課金)
写真を色々加工して自動ツイートするLINE Bot
13
1. 人物の顔に「ぼかし」を入れる
14
今回ご紹介する仕組み
2. 写真を絵画風にする
15
利用するサービス
LINE
Messaging API
Cloudmersive
Azure
Logic Apps
この3つのサービスを利用してノーコーディングで実装
• 自身のサービスとLINEユーザーの
双方向コミュニケーションを可能にする機能
• リクエストはJSON形式でHTTPSを使って送信
• 応答メッセージを送る
• プッシュメッセージを送る
• ユーザーが送ったコンテンツを取得(画像、動画、音声、およびファイル)
16
LINE Messaging API
etc・・・
17
Cloudmersive
• MicrosoftやGoogleアカウントを利用可能
• 新規にアカウントを取得しなくてもOK
• 無料プラン(Free Tier)あり
• 月間1000コールまで
• 秒間1コールまで
Cloudmersive は、OCRや自然言語処理、
ドキュメント変換、そして画像処理や顔検出といった
ビジネス向けAPIを提供するクラウドサービス
18
19API Console:https://api.cloudmersive.com/swagger/index.html
20
提供中のCloudmersiveコネクタ(プレビュー)
Cloudmersive Barcode
バーコード画像を生成、バーコードの画像から値を
認識。
Cloudmersive Data Validation
データの検証に役立つ検証API。メールアドレス、ド
メインが本物かどうか、IPアドレスの確認など。
Cloudmersive
Document Conversion
ファイル形式とタイプを簡単に変換。
Cloudmersive File Processing
ファイルを簡単に作成、処理、変換、および更新。
Cloudmersive Image Processing
機械学習を使用して画像を認識および処理し、さら
に有用な画像修正操作を実行。
Cloudmersive NLP
強力な自然言語処理API(v2)を使用すると、品詞
のタグ付け、エンティティの識別、構文解析などを実
行。非構造化テキストの意味を理解。
Cloudmersive PDF
PDFファイルを簡単に作成、変換、処理、編集、操作、
暗号化、および署名ができる。
Cloudmersive Virus Scan
ファイルとコンテンツのウイルスをスキャンし、コンテ
ンツのセキュリティ問題を特定。
コネクタリファレンスの概要:https://docs.microsoft.com/ja-jp/connectors/connector-reference/
[共通]
LINEから画像を送る処理をトリガーにする
21
22
トリガー:HTTP要求の受信時
「HTTP POSTのURL」の内容を
LINE DevelopersのWebhook URLに
コピペする
23
アクション:For eachとHTTP
concat('https://api.line.me/v2/bot/
message/',items('For_each’)?
['message']?['id'],'/content')
1.人物の顔に「ぼかし」を入れる
24
1. 画像内の顔を検出して見つける
• Detect and find faces in an image
2. 画像を長方形の領域に切り抜く
• Crop an image to a rectangular area
3. 入力画像にぼかしを実行
• Perform a guassian blur on the input image
4. 2つの画像を合成する
• Composite two images together
25
Cloudmersive Image Processingをフル活用
26
「顔を検出してぼかす」処理の手順
顔部分だけを切り抜き、その画像にぼかし処理をかけたうえで、元画像
と合成する必要がある。今回はこれらの手順を全てノーコードで!
27
トリガー:LINEから画像が送信されたら
①透明画像を利用する準備
⑥変換後の画像をDropBoxに保存
②写真の顔を検出
③写真の顔部分を切り抜いて「ぼかし処理」
④ぼかし処理済みの画像と透明画像を合成
⑤④で作成した画像と元の写真を合成
28
①透明画像を利用する準備
• 画像合成に必要となる
「透明画像」ファイルを
用意
• 透明画像のサイズは
使用する元画像の
サイズよりも大きく
• 透明画像の「高さ(タ
テ)」と「幅(ヨコ)」を
指定する変数2つを
初期化
29
②写真の顔を検出
LINEで送信した画像
(GETで取得)
first(body('Detect_and_find_faces_in_an_image’)?
['Faces'])
今回はAPIの制約があるので「複数の人物が写った写真」の処理は
向かない。「最初に検出した顔だけを対象」とする。
30
トリガー:LINEから画像が送信されたら
①透明画像を利用する準備
⑥変換後の画像をDropBoxに保存
②写真の顔を検出
③写真の顔部分を切り抜いて「ぼかし処理」
④ぼかし処理済みの画像と透明画像を合成
⑤④で作成した画像と元の写真を合成
31
詳しい説明はこの記事をご参考に!
[ASCII.jp]
人物写真の顔をAIが検出し、
ぼかしてツイートするLogic Appsを作ろう
https://ascii.jp/elem/000/004/020/4020587/
2. 写真を絵画風に加工する
32
33
トリガー:
LINEから画像が送信されたら
画像を取得し、Cloudmersive
コネクタでPNGに変換後、
画像を絵画風に変換
変換後の画像をDropBoxに
保存
34
Logic Appsのコネクタを利用する際のポイント
JPEG画像をPNG画像に変換する
• Udnie
• Wave
• la_muse
• rain_princess
• 画像を自動的に芸術的な絵画に変換
• Transform an image into an artistic painting automatically
• 機械学習を使用して画像を自動的に芸術的な絵画に変換
• 画像サイズによっては最大20秒かかる場合がある
• PNG形式のみ(2020年8月現在)
• 使用する写真は、風景の方が絵画っぽくなる
35
Logic Appsでこのコネクタを利用する際のポイント
[共通]画像付きで自動ツイートする
36
37
トリガーを実行する頻度は適宜調整
「メディア」に加工済み画像を選択
DEMO
38
39
実行結果
元の写真
Udnie
Wave la_muse rain_princess
• ノーコードでもコネクタを組み合わせると画像処理が可能
• Azure Logic AppsとPower Automateは適材適所で
• Power Automate:ユーザーごとに1日のAPI利用上限あり
• Logic Apps:API利用上限なし(従量課金)
• Cloudmersive は色々なサービスがあるので試してみて!
40
まとめ
ご清聴ありがとうございました。
Azure Logic Apps / Power AutomateのFacebookグループがあります
ぜひご参加ください!!
https://www.facebook.com/groups/logicflowja/

More Related Content

More from 典子 松本

ノンコーディングで LINE Bot 開発! Azure Logic Apps × Azure Cognitive Services ×LINE メッセー...
ノンコーディングで LINE Bot 開発! Azure Logic Apps × Azure Cognitive Services ×LINE メッセー...ノンコーディングで LINE Bot 開発! Azure Logic Apps × Azure Cognitive Services ×LINE メッセー...
ノンコーディングで LINE Bot 開発! Azure Logic Apps × Azure Cognitive Services ×LINE メッセー...典子 松本
 
非エンジニアでも安心!ノンコーディングでもココまでできる!LINE × Azure Logic Apps
非エンジニアでも安心!ノンコーディングでもココまでできる!LINE × Azure Logic Apps非エンジニアでも安心!ノンコーディングでもココまでできる!LINE × Azure Logic Apps
非エンジニアでも安心!ノンコーディングでもココまでできる!LINE × Azure Logic Apps典子 松本
 
ノンコーディングでやってみよう!音声テキスト変換 - LINE × Logic Apps × Speech to text -
ノンコーディングでやってみよう!音声テキスト変換 - LINE × Logic Apps × Speech to text -ノンコーディングでやってみよう!音声テキスト変換 - LINE × Logic Apps × Speech to text -
ノンコーディングでやってみよう!音声テキスト変換 - LINE × Logic Apps × Speech to text -典子 松本
 
古代エジプトの魅力について
古代エジプトの魅力について古代エジプトの魅力について
古代エジプトの魅力について典子 松本
 
はじめよう!PowerAppsキホンのキ kintone × Microsoft Flow / Logic Appsの話
はじめよう!PowerAppsキホンのキ kintone × Microsoft Flow / Logic Appsの話はじめよう!PowerAppsキホンのキ kintone × Microsoft Flow / Logic Appsの話
はじめよう!PowerAppsキホンのキ kintone × Microsoft Flow / Logic Appsの話典子 松本
 
ノンコーディングでここまでできる!LINE BOT を作ってみよう!
ノンコーディングでここまでできる!LINE BOT を作ってみよう!ノンコーディングでここまでできる!LINE BOT を作ってみよう!
ノンコーディングでここまでできる!LINE BOT を作ってみよう!典子 松本
 
ノンコーディングでも!ここまでできるkintone
ノンコーディングでも!ここまでできるkintoneノンコーディングでも!ここまでできるkintone
ノンコーディングでも!ここまでできるkintone典子 松本
 
【Logic Apps編】ノンコーディングでデキる!お問い合わせフォーム機能拡張
【Logic Apps編】ノンコーディングでデキる!お問い合わせフォーム機能拡張【Logic Apps編】ノンコーディングでデキる!お問い合わせフォーム機能拡張
【Logic Apps編】ノンコーディングでデキる!お問い合わせフォーム機能拡張典子 松本
 
ノンコーディングでサーバーレス体験。Azure Logic Apps のすゝめ
ノンコーディングでサーバーレス体験。Azure Logic Apps のすゝめノンコーディングでサーバーレス体験。Azure Logic Apps のすゝめ
ノンコーディングでサーバーレス体験。Azure Logic Apps のすゝめ典子 松本
 
もっとサーバーレスを手軽に便利に!Azure Logic Apps
もっとサーバーレスを手軽に便利に!Azure Logic Appsもっとサーバーレスを手軽に便利に!Azure Logic Apps
もっとサーバーレスを手軽に便利に!Azure Logic Apps典子 松本
 
LogicFlow 実践編~LogicFlowでいろいろつくってみた ~
LogicFlow 実践編~LogicFlowでいろいろつくってみた ~LogicFlow 実践編~LogicFlowでいろいろつくってみた ~
LogicFlow 実践編~LogicFlowでいろいろつくってみた ~典子 松本
 
ノンコーディングでやってみよう!Logic Appsのすゝめ
ノンコーディングでやってみよう!Logic Appsのすゝめノンコーディングでやってみよう!Logic Appsのすゝめ
ノンコーディングでやってみよう!Logic Appsのすゝめ典子 松本
 
アクセシビリティを考えたalt属性を自動生成してみよう!
アクセシビリティを考えたalt属性を自動生成してみよう!アクセシビリティを考えたalt属性を自動生成してみよう!
アクセシビリティを考えたalt属性を自動生成してみよう!典子 松本
 
はじめてのAzure Azure的ピタゴラスイッチのススメ- PaaS・サーバーレス 初級編 -
はじめてのAzure Azure的ピタゴラスイッチのススメ- PaaS・サーバーレス 初級編 -はじめてのAzure Azure的ピタゴラスイッチのススメ- PaaS・サーバーレス 初級編 -
はじめてのAzure Azure的ピタゴラスイッチのススメ- PaaS・サーバーレス 初級編 -典子 松本
 
お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~
お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~
お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~典子 松本
 
ノンコーディングでLINE BOTを作ってみた話
ノンコーディングでLINE BOTを作ってみた話ノンコーディングでLINE BOTを作ってみた話
ノンコーディングでLINE BOTを作ってみた話典子 松本
 
Webデザイナーの私がMicrosoft Azureを使うようになったワケ
Webデザイナーの私がMicrosoft Azureを使うようになったワケWebデザイナーの私がMicrosoft Azureを使うようになったワケ
Webデザイナーの私がMicrosoft Azureを使うようになったワケ典子 松本
 
Web制作に便利な機能いろいろ!Microsoft Azureの概要
Web制作に便利な機能いろいろ!Microsoft Azureの概要Web制作に便利な機能いろいろ!Microsoft Azureの概要
Web制作に便利な機能いろいろ!Microsoft Azureの概要典子 松本
 
Web制作的SendGridのススメ SendGridで色々やってみた話
Web制作的SendGridのススメ SendGridで色々やってみた話Web制作的SendGridのススメ SendGridで色々やってみた話
Web制作的SendGridのススメ SendGridで色々やってみた話典子 松本
 
簡単・お手軽!ノンプログラミングで便利BOTを作ってみた話
簡単・お手軽!ノンプログラミングで便利BOTを作ってみた話簡単・お手軽!ノンプログラミングで便利BOTを作ってみた話
簡単・お手軽!ノンプログラミングで便利BOTを作ってみた話典子 松本
 

More from 典子 松本 (20)

ノンコーディングで LINE Bot 開発! Azure Logic Apps × Azure Cognitive Services ×LINE メッセー...
ノンコーディングで LINE Bot 開発! Azure Logic Apps × Azure Cognitive Services ×LINE メッセー...ノンコーディングで LINE Bot 開発! Azure Logic Apps × Azure Cognitive Services ×LINE メッセー...
ノンコーディングで LINE Bot 開発! Azure Logic Apps × Azure Cognitive Services ×LINE メッセー...
 
非エンジニアでも安心!ノンコーディングでもココまでできる!LINE × Azure Logic Apps
非エンジニアでも安心!ノンコーディングでもココまでできる!LINE × Azure Logic Apps非エンジニアでも安心!ノンコーディングでもココまでできる!LINE × Azure Logic Apps
非エンジニアでも安心!ノンコーディングでもココまでできる!LINE × Azure Logic Apps
 
ノンコーディングでやってみよう!音声テキスト変換 - LINE × Logic Apps × Speech to text -
ノンコーディングでやってみよう!音声テキスト変換 - LINE × Logic Apps × Speech to text -ノンコーディングでやってみよう!音声テキスト変換 - LINE × Logic Apps × Speech to text -
ノンコーディングでやってみよう!音声テキスト変換 - LINE × Logic Apps × Speech to text -
 
古代エジプトの魅力について
古代エジプトの魅力について古代エジプトの魅力について
古代エジプトの魅力について
 
はじめよう!PowerAppsキホンのキ kintone × Microsoft Flow / Logic Appsの話
はじめよう!PowerAppsキホンのキ kintone × Microsoft Flow / Logic Appsの話はじめよう!PowerAppsキホンのキ kintone × Microsoft Flow / Logic Appsの話
はじめよう!PowerAppsキホンのキ kintone × Microsoft Flow / Logic Appsの話
 
ノンコーディングでここまでできる!LINE BOT を作ってみよう!
ノンコーディングでここまでできる!LINE BOT を作ってみよう!ノンコーディングでここまでできる!LINE BOT を作ってみよう!
ノンコーディングでここまでできる!LINE BOT を作ってみよう!
 
ノンコーディングでも!ここまでできるkintone
ノンコーディングでも!ここまでできるkintoneノンコーディングでも!ここまでできるkintone
ノンコーディングでも!ここまでできるkintone
 
【Logic Apps編】ノンコーディングでデキる!お問い合わせフォーム機能拡張
【Logic Apps編】ノンコーディングでデキる!お問い合わせフォーム機能拡張【Logic Apps編】ノンコーディングでデキる!お問い合わせフォーム機能拡張
【Logic Apps編】ノンコーディングでデキる!お問い合わせフォーム機能拡張
 
ノンコーディングでサーバーレス体験。Azure Logic Apps のすゝめ
ノンコーディングでサーバーレス体験。Azure Logic Apps のすゝめノンコーディングでサーバーレス体験。Azure Logic Apps のすゝめ
ノンコーディングでサーバーレス体験。Azure Logic Apps のすゝめ
 
もっとサーバーレスを手軽に便利に!Azure Logic Apps
もっとサーバーレスを手軽に便利に!Azure Logic Appsもっとサーバーレスを手軽に便利に!Azure Logic Apps
もっとサーバーレスを手軽に便利に!Azure Logic Apps
 
LogicFlow 実践編~LogicFlowでいろいろつくってみた ~
LogicFlow 実践編~LogicFlowでいろいろつくってみた ~LogicFlow 実践編~LogicFlowでいろいろつくってみた ~
LogicFlow 実践編~LogicFlowでいろいろつくってみた ~
 
ノンコーディングでやってみよう!Logic Appsのすゝめ
ノンコーディングでやってみよう!Logic Appsのすゝめノンコーディングでやってみよう!Logic Appsのすゝめ
ノンコーディングでやってみよう!Logic Appsのすゝめ
 
アクセシビリティを考えたalt属性を自動生成してみよう!
アクセシビリティを考えたalt属性を自動生成してみよう!アクセシビリティを考えたalt属性を自動生成してみよう!
アクセシビリティを考えたalt属性を自動生成してみよう!
 
はじめてのAzure Azure的ピタゴラスイッチのススメ- PaaS・サーバーレス 初級編 -
はじめてのAzure Azure的ピタゴラスイッチのススメ- PaaS・サーバーレス 初級編 -はじめてのAzure Azure的ピタゴラスイッチのススメ- PaaS・サーバーレス 初級編 -
はじめてのAzure Azure的ピタゴラスイッチのススメ- PaaS・サーバーレス 初級編 -
 
お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~
お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~
お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~
 
ノンコーディングでLINE BOTを作ってみた話
ノンコーディングでLINE BOTを作ってみた話ノンコーディングでLINE BOTを作ってみた話
ノンコーディングでLINE BOTを作ってみた話
 
Webデザイナーの私がMicrosoft Azureを使うようになったワケ
Webデザイナーの私がMicrosoft Azureを使うようになったワケWebデザイナーの私がMicrosoft Azureを使うようになったワケ
Webデザイナーの私がMicrosoft Azureを使うようになったワケ
 
Web制作に便利な機能いろいろ!Microsoft Azureの概要
Web制作に便利な機能いろいろ!Microsoft Azureの概要Web制作に便利な機能いろいろ!Microsoft Azureの概要
Web制作に便利な機能いろいろ!Microsoft Azureの概要
 
Web制作的SendGridのススメ SendGridで色々やってみた話
Web制作的SendGridのススメ SendGridで色々やってみた話Web制作的SendGridのススメ SendGridで色々やってみた話
Web制作的SendGridのススメ SendGridで色々やってみた話
 
簡単・お手軽!ノンプログラミングで便利BOTを作ってみた話
簡単・お手軽!ノンプログラミングで便利BOTを作ってみた話簡単・お手軽!ノンプログラミングで便利BOTを作ってみた話
簡単・お手軽!ノンプログラミングで便利BOTを作ってみた話
 

ノーコーディングでやってみよう!写真を色々加工して自動ツイートするLINE Botを作ってみた話。