Recommended
More Related Content
Similar to 2023年1月-八王子 WordPress Meetup
Similar to 2023年1月-八王子 WordPress Meetup (20)
More from Naotaka Saito
Recently uploaded
Recently uploaded (8)
2023年1月-八王子 WordPress Meetup
- 1. WordPress Meetup 2023.1.14 ~ LINEとWordPressとの連携 ~ ⿑藤 直孝 道の駅⾜柄 ⾦太郎のふるさと 2023.1.1
- 2. ⾃⼰紹介 ü名前： ⿑藤 直孝 東京都 ü⼋王⼦市在住 ü株式会社 APPLIOT(アプリオ) 代表 ü経歴： Ø1994年4⽉ ⻘⼭学院⼤学卒業後、沖電気⼯ 業の半導体部⾨に⼊社 （現在のラピステクノロジー株式会社） Ø2021年7⽉： 設備の状態を可視化するク ラウドサービスを提供する会社を設⽴ (ラピステクノロジーは2021年12⽉に退職) Ø2022年12⽉： 脱サラしてAPPLIOTに専念 ü株式会社APPLIOTの業務内容： Ø⼯場の設備の稼働状況を可視化するシステム を提供(全国20社で利⽤中) ØWebアプリケーションのPM／開発 IoT、業務系アプリケーション、ポータル ü技術 Øサーバからクライアントまで Ø組込ソフト(C⾔語) ü好きな技術 ØReact/Node-RED/Node.js/WordPress ØAWS(特にサーバーレス)
- 3. LINEとの連携 店舗/ショップ経営などではSNSとの連携が必須になっています。 LINEは、その中で唯⼀PUSH型でメッセージを届けられるSNSです。 活⽤されるSNS： • Instagram PULL型 • Facebook PULL型 • YouTube PULL型 • Google Map PULL型 • Twitter PULL型 • LINE PUSH型 → 唯⼀ • DM PUSH型 → ⾒る⼈がいない 今回は、LINEをWordPressとの連携に使⽤してみたいと思います。 ⾃分の会社では、システムのア ラート通知に使⽤しています 異常 検知 通知
- 4. 作業の流れ 1. LINE Developerにの登録 2. WordPressに投稿した内容をLINEで通知 3. LINEからメッセージを受け取るサーバーを構築 4. LINEに投稿した内容をWordPressにも投稿
- 5. 1. LINE Developerに登録します LINE DevelopperにLINEのアカウントでログインしてDeveloper としての登録を⾏います。 https://developers.line.biz/ja/ コンソールを クリック
- 6. 1. LINE Developper > プロバイダーを作成 プロバイダを作成します
- 7. 1. LINE Developper > チャンネルを作成(1) 作成したプロバイダーを選択して、チャンネルを作成します Messaging APIを選択
- 8. 1. LINE Developer > チャンネルを作成(2) 全項⽬に⼊⼒してチャンネルを作成します
- 9. 1. LINE Developer > チャンネル(基本設定) • チャンネルシークレット：メッセージの投稿時に使⽤します チャンネルシークレット 使⽤します ⾃分のメッセージはこの IDで投稿されます
- 10. 1. LINE Developer > チャンネル(Message API) • QRコード： 友達登録をするときに使⽤します • チャンネルアクセストークン： メッセージの投稿時に使⽤します 友達登録をするためのQR コードです ⾃分のメッセージはこの IDで投稿されます LINEがメッセージを受信したときに内容を 転送する送信先です。今回はNode-REDで webhookのエンドポイントを作成します。 LINEから投稿するための Webhookを有効化します
- 12. 2. WordPressに投稿 > プラグインをインストール • WordPressのプラグインでLINEを検索 • LINE Auto Postをインストールします これをインストール
- 13. 2. WordPressに投稿 > LINE Auto Postの設定 • とってもシンプルなUIですね • LINE Developerの作成したチャンネルからチャンネルアクセス トークンをコピペします • 設定はこれだけです
- 16. 3. システム構成 WordPressのサーバーにNode-REDを動かしてLINEのメッセー ジを受け取れるようにしました Amazon Route 53 DNSサーバ appliot.co.jpが登録 されている AWS内のDNS Amazon Elastic Compute Cloud (Amazon EC2) Elastic Load Balancing ロードバランサー ルート証明 ネットワーク設定 インターネット EC2 https https http
- 17. 3. 導⼊⽅法 詳細は省略します 1. サーバーにNode-REDをインストールする⽅法 https://qiita.com/KotaAma/items/ba14d69cde692ee11936 2. WordPressが動くAWSのサーバー上で /nodered/にアクセスがあったとき、Node- REDに転送するように設定します。proxy.confに以下の設定を追加してapacheを再起 動します。 <Location /nodered/ > RewriteEngine on RewriteCond %{HTTP:Upgrade} ^WebSocket$ [NC] RewriteCond %{HTTP:Connection} Upgrade$ [NC] RewriteRule .*/(.*) "ws://localhost:1880/$1" [P,L] ProxyPreserveHost On ProxyPass http://localhost:1880/ ProxyPassReverse http://localhost:1880/ </Location> /etc/apache2/mods-available/proxy.conf /nodered /wpmu
- 18. 3. Node-REDの評価⽅法 WordPressのサーバーでNode-REDを動かしてLINEのメッセージを受け取 れるようにしました。Node-REDはデバックするときにWebSocketでサー バーとやり取りするため、サーバに直接つなげる必要があります Amazon Route 53 Amazon Elastic Compute Cloud (Amazon EC2) Elastic Load Balancing EC2 Node-REDのデバック経路 https://xxx.xxxx.xxxx/nodered/ http://ec2-xxx-xxx-xxx.ap-northeast-1.compute.amazonaws.com:1880
- 21. 4. Node-REDでLINEのメッセージを受信 functionノードの中⾝: const userId = msg.payload.events[0].source.userId; if ((userId === "U26b01d1fa38670ab769d53f62d24196f") && (msg.payload.events[0].type === "message")) { const messages = msg.payload.events[0].message.text.split("¥n"); const title = messages.shift(); const content = messages.join('¥n’); const status = "publish" return {payload:{title,content,status}}; } ⾃分の投稿以外は無視 メッセージ以外は無視 このプログラムでは、LINEのメッセージの1⾏⽬をタイトルに設定して、 2⾏⽬移⾏を本⽂にしてメッセージを投稿します。