みやまのアトリエ

スマホアプリ開発 ペンタブ備忘録 お絵描き

Uca - スマホが左手デバイスになるアプリ Android版リリースしました

スマホが左手デバイスになるアプリ「Uca」 Google Playにてリリースしました。

f:id:M_Atelier:20180704205431j:plain

 

 左手デバイスって何?

 お絵描きをされてある方は、キーボードの「戻る(Ctrl+Z)」や「消しゴムへ切り替え( e )」等のショートカットキーを使われてある方が多いのではないでしょうか。キーボードは本来文章を打つために作られているため、ショートカットキーとは関係のないボタンも多いだけでなく、ショートカットキーを覚えないと使うことが出来ません。

 

 「左手デバイス」はあらかじめ自分がよく使う機能を登録しておき、ボタン一つでペイントソフトの機能を呼び出せる入力装置です。絵を描かれる方は右手にペンを持つことが多いことから「左手デバイス」と呼ばれています。

 代表的なところで、セルシスのTab-MateやWACOMのExpress Key Remoteがあります。

https://pbs.twimg.com/media/DZ6kM-HWAAEvf3l.jpg:large

※画像はペイントツール開発会社セルシス様のTwitterリンクから頂いております。 

 

 

 みやまのアトリエでは、スマートフォンを左手デバイスとして活用するアプリを開発しています。

 

アプリ概要 

 f:id:M_Atelier:20180618234627p:plain

 

  • スマートフォンからパソコンのペイントツール(クリップスタジオ等)を操作出来るようになります。
  • 「キャンバスの拡大」「キャンバスの回転」の他、「操作のやり直し」「鉛筆や消しゴムへのツール切替」などのキーボードショートカットを設定することができます。
  • スマートフォンAndroid、パソコンはWindowsのみ対応です。
  • 無料配布中です。

 

 スマートフォン側のアプリのレイアウトです。上半分はキャンバス関連操作、下半分は「戻る」「保存」等のショートカットキーを設定できます。

       f:id:M_Atelier:20180820130003p:plain

 

 上半分にある円部分を指でなぞることで、キャンバスを回転させたり、拡大縮小させたりできます。

 キャンバスを操作している様子です。カクカクの動作ではなく、スムーズに操作できるメリットがあります。

f:id:M_Atelier:20180804005807g:plain

 

 下半分にある矢印付近を使いたいツールの方向にフリックすることで、キーボードショートカットを飛ばすことができます。

 ツール切り替えの様子です。

f:id:M_Atelier:20180722215059g:plain

 


注意

  • お使いのWindowsパソコンに「Bluetooth機能」が必要です。
  • アプリ設定の前に、あらかじめパソコンとスマートフォンを「ペアリング」しておく必要があります。下のページでペアリング方法を説明しています。 

atelier.hatenadiary.com

 

 Ucaのダウンロード

 紹介しているアプリ「Uca」のダウンロードとインストール、設定方法はこちらのページをご覧ください。

atelier.hatenadiary.com

 

 

 ご意見ご感想、バグ等あれば、Googleお問い合わせフォームにてお願いいたします。

docs.google.com

 

個人情報に関するプライバシーポリシーは以下になります。

・ネットワークへのフルアクセス
 本アプリのダウンロード、インストールの際に必要となります。メールアドレス、個人名などの個人情報は収集しておりません。

 

Bluetoothバイスのペア設定、Bluetoothの設定へのアクセス
 パソコンとスマートフォン間のBluetooth接続に使用されます。

 

・カメラ(QRコードのスキャン及びBluetoothアドレスの保持)
 カメラ機能はQRコードを用いたパソコン、スマートフォン間の接続のみに使用します。取得する情報はパソコンのBluetooth機器アドレスであり、該当アドレスはスマートフォンアプリ側に保持されます。また、本アプリには写真の撮影機能はございません。

 以上です。

左手デバイスアプリUca トラブルと解決方法について

 Ucaに関するトラブルと解決方法をまとめます。

 

 

ペアリング関係

Windowsスマートフォンがお互い検索画面で出てこない。

 

Windowsアプリ側のトラブル

WindowsアプリにQRコードや Bluetoothアドレスが表示されない

  • ご使用のパソコンに Bluetoothが搭載されているかご確認ください。
  • Windows側のアプリを再起動してみてください。
  • Windowsを再起動してみてください。

 

アプリにCOMポートが表示されない

  • ご使用のWindows Bluetoothが搭載されているかご確認ください。
  • Windowsにて、「COMポート」が設定されているか確認してください。COMポートの設定方法はこちら

atelier.hatenadiary.com

 

Windowsアプリのダウンロードの際、セキュリティソフトが働く

  • 本アプリに対してセキュリティソフトを一時的に停止させてください。各セキュリティソフトの操作方法はセキュリティソフト開発会社にご確認ください。

 

以下の画面が出て、Windowsアプリの実行ができない。

  • 次の操作に従ってください。

「詳細情報」➡「実行」を押してください。

f:id:M_Atelier:20180613002845p:plain f:id:M_Atelier:20180613002848p:plain

 

Androidアプリ側のトラブル

QRコードを読み込んでも「接続失敗」と表示される

以下を試していただき、その後スマートフォンからQRコードを読み込んでみて下さい。

  • Windowsアプリを一度「切断」「接続」してみてください。
  • COMポートが複数ある場合は、別のCOMポートを試してみてください。
  • パソコンとスマートフォン Bluetoothを「オフ」⇨「オン」してください。
  • パソコンとスマートフォンがペアリングされているかを確認してください。ペアリングされていない場合、ペアリングを完了した後にWindowsアプリ、Androidアプリを再起動してください。
  • Windowsにて、「COMポート」が設定されているか確認してください。

 

キャンバス操作が出来ない

 キャンバスの拡大や回転などの操作は、現在のマウスポインタの位置を軸にして操作されます。以下を確認してください。

  •  マウスポインタはキャンバス上に置いて操作してください。
  •  操作したいペイントアプリがアクティブウインドウになっているかを確認してください。

 

 

 

現在の不具合情報

 高グラフィックのゲームアプリと交互に起動すると、Ucaがクラッシュする場合がある不具合を確認しております。次回アップデートにて対策を取らせて頂きます。

 クラッシュする場合、できるだけUcaを端末の「ホームボタン」ではなく、端末の「戻る」ボタンで終了してください。

 

最後に

 設定したキーボードショートカットと異なるキーが送られる、アプリがクラッシュした、等がある場合、操作前後の状況、操作内容、スマートフォンの機種名などを教えて頂けると助かります。

 

これからも開発を続けて参りますので、よろしくお願いします。

Bluetooth通信の為のCOMポート設定手順

WindowsパソコンのCOMポート番号を設定

 パソコンのCOMポート番号を設定します。COMポート番号は、スマートフォンからの信号をパソコンに伝える為の「通路」の役割をします。

 

 Windowsの設定 ⇒ デバイス ⇒ Bluetoothとその他のデバイス に進みページ下部にある「その他のBluetoothオプション」を選んでください。(ウインドウによっては、右の方にあるかもしれません。)

f:id:M_Atelier:20180602215831p:plain


 「Bluetooth設定」が開きますので、「COMポート」タブを選んでください。

f:id:M_Atelier:20180602215855p:plain

 

COMポートタブを選択したら、「追加」を選んでください。

f:id:M_Atelier:20180602215913p:plain

 

「着信」ボタンを選択し、「OK]

f:id:M_Atelier:20180602215939p:plain

 

下の画面のように、ポート番号、方向、名前が表示されたと思います。これで、COMポート設定は完了です。

 

f:id:M_Atelier:20180722220317p:plain

パソコンとスマートフォンを「ペアリング」する方法

 

ペアリングって?

 Bluetooth機能を持ったパソコンやスマートフォンBluetooth接続して通信するには、はじめに「ペアリング」する必要があります。ペアリングすることで、「ペア」になったもの同士がファイルやデータを送受信出来るようになります。

 ここでは、スマートフォンとパソコンのペアリング方法を説明します。

 

 


スマートフォン側の操作

 設定メニューを押し、「無線とネットワーク」の「Bluetooth」を選びます。

f:id:M_Atelier:20180602214942p:plain 

 

下の図のように、Bluetooth画面を表示させておいてください。この状態でパソコンを操作します。

f:id:M_Atelier:20180602215040p:plain


パソコン側の操作

Windowsの設定」から「デバイス」を選択します。

f:id:M_Atelier:20180602215221p:plain

 

 

「+Bluetoothまたはその他のデバイスを追加する」を選びます。

f:id:M_Atelier:20180602215237p:plain

 

Bluetooth」を選んでください

f:id:M_Atelier:20180602215308p:plain

 

左手デバイスとして使用したいスマートフォンを選択します。

f:id:M_Atelier:20180602215334p:plain


 スマートフォンとパソコン、それぞれ次のような画面になります。 スマートフォンの「ペア設定コード」とパソコンの「PIN」という番号が一致していれば、

  1. スマートフォン側 → 「ペア設定する」
  2. パソコン側 → 「接続」

を選んでください。

f:id:M_Atelier:20180602215404p:plain


下の画面がパソコン側に表示されれば、ペアリング完了です。

f:id:M_Atelier:20180602215604p:plain

 

これで、スマートフォンとパソコン間で相互にデータやファイルの送受信を行う準備が出来ました。

 

以上です。

 

 「スマホが左手デバイスになるアプリUca」をご使用の方は、続いて次の「ダウンロードと設定手順」にお進みください。

atelier.hatenadiary.com

 

Uca - スマホが左手デバイスになるアプリ Android版リリースしました

スマホが左手デバイスになるアプリ「Uca」 Google Playにてリリースしました。

f:id:M_Atelier:20180704205431j:plain

 

 左手デバイスって何?

 お絵描きをされてある方は、キーボードの「戻る(Ctrl+Z)」や「消しゴムへ切り替え( e )」等のショートカットキーを使われてある方が多いのではないでしょうか。キーボードは本来文章を打つために作られているため、ショートカットキーとは関係のないボタンも多いだけでなく、ショートカットキーを覚えないと使うことが出来ません。

 

 「左手デバイス」はあらかじめ自分がよく使う機能を登録しておき、ボタン一つでペイントソフトの機能を呼び出せる入力装置です。絵を描かれる方は右手にペンを持つことが多いことから「左手デバイス」と呼ばれています。

 代表的なところで、セルシスのTab-MateやWACOMのExpress Key Remoteがあります。

https://pbs.twimg.com/media/DZ6kM-HWAAEvf3l.jpg:large

※画像はペイントツール開発会社セルシス様のTwitterリンクから頂いております。 

 

 

 みやまのアトリエでは、スマートフォンを左手デバイスとして活用するアプリを開発しています。

 

アプリ概要 

 f:id:M_Atelier:20180618234627p:plain

 

  • スマートフォンからパソコンのペイントツール(クリップスタジオ等)を操作出来るようになります。
  • 「キャンバスの拡大」「キャンバスの回転」の他、「操作のやり直し」「鉛筆や消しゴムへのツール切替」などのキーボードショートカットを設定することができます。
  • スマートフォンAndroid、パソコンはWindowsのみ対応です。
  • 無料配布中です。

 

 スマートフォン側のアプリのレイアウトです。上半分はキャンバス関連操作、下半分は「戻る」「保存」等のショートカットキーを設定できます。

       f:id:M_Atelier:20180820130003p:plain

 

 上半分にある円部分を指でなぞることで、キャンバスを回転させたり、拡大縮小させたりできます。

 キャンバスを操作している様子です。カクカクの動作ではなく、スムーズに操作できるメリットがあります。

f:id:M_Atelier:20180804005807g:plain

 

 下半分にある矢印付近を使いたいツールの方向にフリックすることで、キーボードショートカットを飛ばすことができます。

 ツール切り替えの様子です。

f:id:M_Atelier:20180722215059g:plain

 


注意

  • お使いのWindowsパソコンに「Bluetooth機能」が必要です。
  • アプリ設定の前に、あらかじめパソコンとスマートフォンを「ペアリング」しておく必要があります。下のページでペアリング方法を説明しています。 

atelier.hatenadiary.com

 

 Ucaのダウンロード

 紹介しているアプリ「Uca」のダウンロードとインストール、設定方法はこちらのページをご覧ください。

atelier.hatenadiary.com

 

 

 ご意見ご感想、バグ等あれば、Googleお問い合わせフォームにてお願いいたします。

docs.google.com

 

個人情報に関するプライバシーポリシーは以下になります。

・ネットワークへのフルアクセス
 本アプリのダウンロード、インストールの際に必要となります。メールアドレス、個人名などの個人情報は収集しておりません。

 

Bluetoothバイスのペア設定、Bluetoothの設定へのアクセス
 パソコンとスマートフォン間のBluetooth接続に使用されます。

 

・カメラ(QRコードのスキャン及びBluetoothアドレスの保持)
 カメラ機能はQRコードを用いたパソコン、スマートフォン間の接続のみに使用します。取得する情報はパソコンのBluetooth機器アドレスであり、該当アドレスはスマートフォンアプリ側に保持されます。また、本アプリには写真の撮影機能はございません。

 以上です。

(Python) スレッドを実行、変更、終了するGUIアプリのサンプル

概要

f:id:M_Atelier:20180719002000p:plain

  • スクリプトを実行するとウィンドウが開きます
  • ウインドウの「スレッドのスタート」ボタンでスレッドが開始されます。サンプルとして1秒毎にprint文で番号を実行するようにしています。
  • ウインドウの「処理内容変更」ボタンでスレッドの処理内容を変更します。ここでは、printする番号に+1しています。
  • ウインドウの「アプリ終了」ボタンで、スレッドを破棄してアプリを終了します。
  • GUIにはtkinter を使っています。
  • 動作確認環境:PyCharm CE 2018.1.4

 

 基本無限ループで処理をしたいんだけど、途中で処理内容を変更したり、途中で止めたい場合に、ご参考までに。
Arduinoraspberry piでLEDを光らせる他、通信確認用のパソコン側にお使いください。


※注意
 勉強中の身ですので、コードの効率悪かったり、正式な使い方をしていない、間違いがあるかもしれません。もしご使用される場合、とりあえず動かしたい時用にお願いします。Pythonの標準機能を用いずに、スレッドを終了させています。標準機能で何故か動かない場合などにどうぞです。

 

プログラム

#!/usr/bin/env python
# -*- coding: utf-8 -*-

 

import time
import threading
import sys
import tkinter

 

#スレッド処理のクラス
class Receive():
    def __init__(self): #初期化
        self.ROOP = False #ループのフラグ
        self.num = 1

 

    #ループ処理関数
    def target(self):
        while (self.ROOP):
        #ループさせたい処理をここに記述
        print ("number : ", self.num)
        time.sleep(1) #1秒待機

 

    #スレッドをスタートさせる
    def start(self):
        self.thread = threading.Thread(target = self.target)
        self.thread.start()


if __name__ == '__main__':
    #ウインドウ本体の設定
    root = tkinter.Tk()
    root.title(u"サンプル")
    root.propagate(True)

 

    #ボタンの処理内容

    def startEvent(event):#最初の接続ボタン押下処理
        r.ROOP = True
        r.start()

 

    #接続変更ボタン押下処理
    def changeEvent(event):
        r.num = r.num + 1

 

    # 終了ボタン押下処理
    def finishEvent(event):
        r.ROOP = False #ループ停止 -> 自動的にスレッド破棄
        root.quit() #ウインドウを消す
        sys.exit() #アプリ終了

 

    #ボタンの生成
    strButton = tkinter.Button(text=u'スレッドのスタート')
    strButton.bind("<Button-1>", startEvent)
    strButton.pack()

 

    chaButton = tkinter.Button(text=u'処理内容変更')
    chaButton.bind("<Button-1>", changeEvent)
    chaButton.pack()

 

    finButton = tkinter.Button(text=u'アプリ終了')
    finButton.bind("<Button-1>", finishEvent)
    finButton.pack()

 

    #スレッド処理のインスタンス生成
    r = Receive()


    #ウインドウ生成
    root.mainloop()

 

以上です~。

pyautoguiで押したキーボードイベントが異なる記号になる問題の解決方法

 pyautoguiを使用していると、「@」「^」「:」のキーボードイベント入力が「`」 「~」「*」になる場合があります。

 

 例えば、Pythonコード中で、

keyDown('@')

 

 と記述すると、当然メモ帳等で「@」と入力してほしいのですが…

 実際には「`」が入力されてしまったり…。「シフトキー」が押された状態で入力されているようです。

 

この問題、日本語キーボードを使用している場合に発生するようです。

 

 

解決方法

 以下のファイルを修正します。IDLEなどのエディタで開いてください。

 

C:\Users\(ユーザー名)\AppData\Local\Programs\Python\ (Pythonのバージョン)\Lib\site-packages\pyautogui\_pyautogui_win.py

 

修正箇所

 関数「def _keyDown(key):」の中身を修正します。

 

(略)

    needsShift = pyautogui.isShiftCharacter(key)

 

    # 以下の3文を追加します----------

    if key == '@': needsShift = False

    if key == '^': needsShift = False

    if key == ':': needsShift = False  

    #追加、ここまで--------------------

 

(略)

 

 

関数「def_keyDown(key)」全体は以下のようになります。


修正前 

def _keyDown(key):
    """Performs a keyboard key press without the release. This will put that
    key in a held down state.

 

    NOTE: For some reason, this does not seem to cause key repeats like would
    happen if a keyboard key was held down on a text field.          Args:
        key (str): The key to be pressed down. The valid names are listed in
        pyautogui.KEY_NAMES.

 

    Returns:
        None
    """
    if key not in keyboardMapping or keyboardMapping[key] is None:
        return

 

    needsShift = pyautogui.isShiftCharacter(key)  
    """
    # OLD CODE: The new code relies on having all keys be loaded in   keyboardMapping from the start.
    if key in keyboardMapping.keys():
        vkCode = keyboardMapping[key]
    elif len(key) == 1:
# note: I could use this case to update keyboardMapping to cache the VkKeyScan results, but I've decided not to just to make any possible bugs easier to reproduce.
        vkCode = ctypes.windll.user32.VkKeyScanW(ctypes.wintypes.WCHAR(key))
        if vkCode == -1:
            raise ValueError('There is no VK code for key "%s"' % (key))
        if vkCode > 0x100: # the vk code will be > 0x100 if it needs shift
            vkCode -= 0x100
            needsShift = True
   """
    mods, vkCode = divmod(keyboardMapping[key], 0x100)

 

    for apply_mod, vk_mod in [(mods & 4, 0x12), (mods & 2, 0x11),
        (mods & 1 or needsShift, 0x10)]: #HANKAKU not suported! mods & 8
        if apply_mod:
            ctypes.windll.user32.keybd_event(vk_mod, 0, 0, 0) #
    ctypes.windll.user32.keybd_event(vkCode, 0, 0, 0)
    for apply_mod, vk_mod in [(mods & 1 or needsShift, 0x10), (mods & 2, 0x11),
        (mods & 4, 0x12)]: #HANKAKU not suported! mods & 8
        if apply_mod:
            ctypes.windll.user32.keybd_event(vk_mod, 0, KEYEVENTF_KEYUP, 0)

 


修正後

 def _keyDown(key):
    """Performs a keyboard key press without the release. This will put that
    key in a held down state.

 

    NOTE: For some reason, this does not seem to cause key repeats like would
    happen if a keyboard key was held down on a text field.

 

    Args:
        key (str): The key to be pressed down. The valid names are listed in
        pyautogui.KEY_NAMES.

 

    Returns:
        None
    """
    if key not in keyboardMapping or keyboardMapping[key] is None:
        return

 

    needsShift = pyautogui.isShiftCharacter(key)

 

    # 以下の3文を追加します----------
    if key == '@': needsShift = False
    if key == '^': needsShift = False
    if key == ':': needsShift = False  
    #追加、ここまで--------------------


    """
    # OLD CODE: The new code relies on having all keys be loaded in   keyboardMapping from the start.
    if key in keyboardMapping.keys():
        vkCode = keyboardMapping[key]
    elif len(key) == 1:
# note: I could use this case to update keyboardMapping to cache the VkKeyScan results, but I've decided not to just to make any possible bugs easier to reproduce.
        vkCode = ctypes.windll.user32.VkKeyScanW(ctypes.wintypes.WCHAR(key))
        if vkCode == -1:
            raise ValueError('There is no VK code for key "%s"' % (key))
        if vkCode > 0x100: # the vk code will be > 0x100 if it needs shift
            vkCode -= 0x100
            needsShift = True
   """
    mods, vkCode = divmod(keyboardMapping[key], 0x100)

 

    for apply_mod, vk_mod in [(mods & 4, 0x12), (mods & 2, 0x11),
        (mods & 1 or needsShift, 0x10)]: #HANKAKU not suported! mods & 8
        if apply_mod:
            ctypes.windll.user32.keybd_event(vk_mod, 0, 0, 0) #
    ctypes.windll.user32.keybd_event(vkCode, 0, 0, 0)
    for apply_mod, vk_mod in [(mods & 1 or needsShift, 0x10), (mods & 2, 0x11),
        (mods & 4, 0x12)]: #HANKAKU not suported! mods & 8
        if apply_mod:
            ctypes.windll.user32.keybd_event(vk_mod, 0, KEYEVENTF_KEYUP, 0) #

 

 これでpyautoguiを使って「@」「^」「:」のキーボードイベント入力が正常にできるようになります。

 

以上です。

MacOSでBluetooth受信した信号を仮想Windowsマシンで受信する設定方法

 需要あるかは分かりませんが…MacOSBluetooth受信した信号を、仮想Windowsマシンで受信したかったので、その備忘録としての設定方法です。

 

 図解するとこうなります。

f:id:M_Atelier:20180701223703p:plain

 

 外部からのBluetooth信号をMacOSBluetoothアダプタで受信し、その信号を仮想Windowsマシンのシリアル通信ポート「COM1」まで届けます。Windows内のTeraTerm等で受信を確認します。

 

動作確認環境

パソコン本体:MacBookPro Early 2011 / macOS High Sierra

仮想アプリ:Oracle VirtualBox 5.2.12

仮想マシンWindows 10 32bit版

その他アプリ:TeraTerm

仮想Windowsマシンの設定

 VirtualBoxマネージャーを開き、設定を選びます。(Windowsを起動していた場合、電源オフにします。)

f:id:M_Atelier:20180701224629p:plain

 

 「ポート」の「シリアルポート」を選択し、空いてるポートに以下のように 設定していきます。

  • 「シリアルポートを有効化」にチェック
  • ポート番号:COM1(任意)
  • ポートモード:ホストにパイプ
  • パス/アドレス:/tmp/trm0 (trm0の文字列は任意) 

f:id:M_Atelier:20180701224800p:plain

 

設定完了したら、「OK]を選択します。設定完了後、Windowsを起動します。

 

MacOSの設定

 

「socat」というアプリを使います。

ターミナルを開き、以下のコマンドを実行して「socat」をインストールします。

$ brew install socat

 

 次に、以下のコマンドでsocatを実行します。コマンドはWindowsが実行されていないと弾かれるので注意してください。

$ socat UNIX-CONNECT:/tmp/trm0 /dev/tty.Bluetooth-Incoming-Port


 これで、MacOSで受信したBluetooth信号が/tmp/trm0 /を経由し て仮想WindowsマシンのCOM1番に送られるようになります。TeraTerm等でCOM1番を見ると、Bluetooth信号が入ってくるかと思います。

 

以上です。