福野泰介の一日一創 - create every day

パソコンとスマホ、どちらが入力速いですか?

日本人、実はスマホ派の方が多いのかもしれません。 実際、日本語入力であれば、フリック入力方式と変換予測と慣れによって、あまりストレスなく使えています。(編集機能が貧弱なので、長文はまだ面倒)

パソコンとスマホのいいとこ取りをすべく、スマホでコントロールするパソコン第一弾、シンプルなプレゼンクリッカーを作成。

キー操作や、マウス操作をプログラミングするAPIをネット越しに呼び出せばOKです。今回はサーバー側は Python3 + Flask で作りました。 pyautogui を使うと、Javaで言う java.awt.Robot と同様、キー操作、マウス操作をエミュレートできます。

from flask import Flask, render_template app = Flask(__name__) @app.route('/') def home(): return render_template("index.html") import pyautogui @app.route('/api/left') def left(): #pyautogui.click() pyautogui.keyDown('left') return "" @app.route('/api/right') def right(): #pyautogui.rightClick() pyautogui.keyDown('right') return "" app.run(host = '0.0.0.0', port = 8001)

templatesフォルダに、操作するクライアント側プログラムを HTML+CSS+JavaScriptで以下のように記述。

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width"/> <title>clicker</title> </head><body> <div class=btn id=left>←</div> <div class=btn id=right>→</div> <style> body { text-align: center; font-family: sans-serif; } .btn { display: inline-block; margin: 5vh 1vw; width: 40vw; height: 50vh; line-height: 50vh; background-color: gray; color: white; font-size: 30vw; } </style> <script> left.ontouchstart = function(e) { fetch('api/left') e.preventDefault() } right.ontouchstart = function(e) { fetch('api/right') e.preventDefault() } </script> </body> </html>

パソコンとスマホを同一ネットワーク内で起動して、IPアドレスを ifconfig (Mac) か ipconfig (Windows) で調べて、スマホで表示してみましょう(QRコード連携が便利です)

スライド表示して、スマホから左右ボタンを遠隔操作できました。
機能を増やしたり、マウス替わりにしてみたり、WebSocket化して高速化したり、いろいろ試すベースができあがり!

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY 福野泰介 - Taisuke Fukuno / @taisukef / アイコン画像 / プロフィール画像