![サブシステム1：音声入力→Slack
● IFTTTのアプレットで実現
○ この部分はコーディング無し
● コマンドの指定方法
○ 固定文字列 [＋任意文字列1種] [＋任意数字列1種]
16](https://image.slidesharecdn.com/rcc20190927okgooglebanktransfer1000yen-190928111920/85/OK-1000-16-320.jpg)
![サブシステム2：Slackからコマンド起動
19
slack_token = 'XXXXXXXXXXXX'
[[commands]]
keyword = '振込 *'
command = 'banking/cli.js 振込 * -v'
timeout = 900 # 15min
config.toml](https://image.slidesharecdn.com/rcc20190927okgooglebanktransfer1000yen-190928111920/85/OK-1000-19-320.jpg)
More Related Content
Similar to 「OKグーグル! 銀行振込1000円」 (20)
More from Yoshio Hanawa (20)
「OKグーグル! 銀行振込1000円」
- 2. 誰？ ● 所属: KLab株式会社 ○ スマートフォンゲームを作ってます ○ 色々な方面に詳しい技術者がいます ● Twitter: @hnw / GitHub: hnw ○ 興味：Web技術、クラウド、セキュリティ 2
- 3. 今日お話しすること ● 夏休みに趣味で作っていたシステムの紹介 ○ 概要と動機 ○ デモ ○ システム構成?知見の紹介 3
- 4. 今日お話しすること ● 夏休みに趣味で作っていたシステムの紹介 ○ 概要と動機 ○ デモ ○ システム構成?知見の紹介 4
- 6. コレ必要？ ● 各銀行の公式機能では残高確認どまり ○ 自作するしかない ● 銀行のシステムって手数が多くて面倒 ○ 自動化して少しでも楽したい ● もはや要不要ではない ○ プログラムからマネーを触るのスリルある 6
- 7. 今日お話しすること ● 夏休みに趣味で作っていたシステムの紹介 ○ 概要と動機 ○ デモ ○ システム構成?知見の紹介 7
- 8. 今日お話しすること ● 夏休みに趣味で作っていたシステムの紹介 ○ 概要と動機 ○ デモ ○ システム構成?知見の紹介 8
- 9. システム構成 9
- 10. 今回は銀行サイトを自動操作したい ● 銀行サイトはJavaScriptなしでは使えない ○ セキュリティ上の理由? ● スクレイピングライブラリは不適当 ○ 例：Beautiful Soup, Nokogiri 10
- 11. そこでPuppeteerを使います ● ヘッドレスChrome用ライブラリ ○ Node.jsでブラウザ操作を記述 ○ ブラウザのフル機能が使える ■ JS必須サイトの自動操作ができる ○ ディスプレイが無い環境でも動く ■ 例：クラウド環境、サーバ機 11
- 12. Slackは何に使うのか ● NAT越えに利用 ○ 0円で済むのが良い ○ 有料なら他にも選択肢はある ● 家の外から家のマシンを使うのは面倒 ○ 本来ならクラウドに置いた方がシンプルになる ○ 今回はどうしても家でやりたかった 12
- 14. 家の中に置くか外に置くか ● 銀行パスワードを家の外に置きたくない ○ 心情的な理由が大きい（本当に家の方が安全か？） ● 銀行振込以外の部分は大丈夫なのか ○ 音声入力やSlackも攻撃されたら怖い ○ 対策については後述 14
- 15. サブシステムの詳細 ● 音声入力→Slack ● Slack→コマンド起動 ● 銀行振込コマンド 15
- 16. サブシステム1：音声入力→Slack ● IFTTTのアプレットで実現 ○ この部分はコーディング無し ● コマンドの指定方法 ○ 固定文字列 [＋任意文字列1種] [＋任意数字列1種] 16
- 18. サブシステム2：Slack→コマンド起動 18 ● hnw/slack-commander ○ Goで自作 ● メッセージを受け取り外部コマンドを起動 ○ コマンドの出力をメッセージとして返す ● 起動コマンドをTOMLで指定できる
- 19. サブシステム2：Slackからコマンド起動 19 slack_token = 'XXXXXXXXXXXX' [[commands]] keyword = '振込 *' command = 'banking/cli.js 振込 * -v' timeout = 900 # 15min config.toml
- 20. サブシステム3：銀行振込 20 ● Puppeteerでプログラミングするだけ ○ CSSセレクタやXPathで要素を辿っていく ● 開発時はブラウザを表示することもできる ○ ヘッドレスで実行するとデバッグが大変 ○ 非ヘッドレスだとChrome DevTools が使えるので楽
- 21. サブシステム3：銀行振込 21 ● リスク回避策 ○ スマホ認証のある銀行を使う ○ 銀行サイトの登録済口座に振り込む ■ 赤の他人に送る事故は起きない →こわいけど大事故は起きないはず…
- 22. 銀行振込の動作例 22
- 23. 知見: 実用的だった 23 ● 当初の予想より便利 ○ 音声認識の精度はかなり高い、その意味で実用的 ○ 移動中など文字打つより音声の方が早いこともある ○ テレホンバンキングの代わりになりそう
- 24. ハマったところ: 銀行に怒られた 24 ● 銀行サイトでデバッグしすぎて怒られた ● 電話したら「2回目はないよ」って言われた お客さまの振込先口座確認サービスのご利用を制限させていただいています。振込先登録 口座の情報に誤りが無いかご確認のうえ、振込手続を行ってください。なお、振込先口座確 認サービスの利用再開をご希望される場合、新生パワーコール (0120-456-858 ：＊1→2＜スマホ認証サービス?操作方法などに関するお問い合わせ＞ ) までご連絡くだ さい。
- 25. さらに詳しい内容 25 ● 「KLab Tech Book Vol.5」に寄稿しました ○ 技術書典7で同人誌を頒布します&電子版ダウンロード ページ ● 読んでもらえると嬉しいです！
- 26. 26 完