はじめに
こんにちは。
業務改善エンジニアのこめまるです。
今回は、業務改善/効率化とは話がそれますが、自作のWindowsアプリを手元のiPhoneから操作できるようにしたくて、ローカルPC上にWebサーバーを立て、iPhoneからブラウザ経由で操作する構成を試しましたので備忘として残しておきます。
この記事はこんな人におすすめ
- 自宅PCやWindowsアプリを、外出先のiPhoneから安全に操作したい方
- Tailscaleを使った安全なリモート接続に興味がある方
- 自作アプリをスマホから触れるようにしたい方
- VPNやポート開放は難しそうで敬遠していた方
ただ、単に外部公開するのは避けたかったので、今回は Tailscale を使ってPCとiPhoneを同じプライベートネットワークに参加させる形にしています。
結果として、以下のような構成にできました。
- Windowsアプリ本体はローカルPC上で動かす
- PC側でWeb APIと簡易UIを提供する
- iPhoneはSafariでそのUIにアクセスする
- 通信はTailscale経由で閉じる
この記事では、構成・実装の考え方・やってみてよかった点をまとめます。
やりたかったこと
今回やりたかったのは、ざっくり言うと以下です。
- Windows上で動く自作アプリを操作したい
- 操作端末はiPhoneにしたい
- できれば専用のiPhoneアプリは作りたくない
- 外部に公開せず、安全寄りに使いたい
- 自宅や外出先からも触れるようにしたい
この条件だと、iPhoneネイティブアプリを作るよりも、PC側にWebサーバーを立ててブラウザから操作するほうがかなり現実的でした。
全体構成
今回の構成は以下のイメージです。
[iPhone Safari]
|
| Tailscale
|
[Windows PC]
|- 自作Windowsアプリ
`- ローカルWebサーバー
|- 操作用UI
`- API
ポイントは、Windowsアプリを直接iPhoneで動かすのではなく、PC側のWebサーバーを介して操作することです。
iPhone側はブラウザさえあればよいので、クライアント実装をかなり軽くできます。
なぜTailscaleを使ったのか
最初に考えたのは、普通に自宅PCのポートを開けてiPhoneからアクセスする方法でした。
ただ、この方法は以下の点が気になりました。
- ルーター設定が必要
- 外部公開の管理が面倒
- セキュリティ面の不安がある
- 家のネットワーク構成に依存しやすい
そこで、今回は Tailscale を使いました。
Tailscaleを使うと、PCとiPhoneを同じ仮想ネットワーク上に置けるので、外部公開なしで「同じLANにいるような感覚」でアクセスできます。
つまり、今回の構成では以下のようにできます。
- Webサーバー自体はPCのローカルで動かす
- ただしTailscale経由でiPhoneから到達できる
- 公開インターネットに直接さらさない
この構成は、個人開発で安全性と手軽さのバランスを取りたいときにかなり相性がよいと感じました。
実装方針
構成としては、PC側に以下を持たせました。
1. Windowsアプリ本体
本来の処理を行うアプリです。
動画処理でもファイル操作でもバッチ実行でもよいのですが、今回はこのアプリをiPhoneから操作したい対象とします。
2. Webサーバー
PC上で動くローカルサーバーです。
役割は主に2つです。
- iPhone向けの操作画面を返す
- 操作内容を受けてWindowsアプリ側に渡す
3. Windowsアプリとの橋渡し処理
Webサーバーが受けたリクエストを、そのままアプリの処理につなげる部分です。
たとえば以下のような流れです。
- iPhoneで「開始」を押す
- Webサーバーが
/startを受ける - サーバー側でWindowsアプリの処理を呼ぶ
- 実行結果や状態を返す
この構成にすると、iPhone側は単なるフロントになり、処理本体は全部Windows側に寄せられます。
iPhone側をブラウザにした理由
iPhoneから操作するだけなら、ネイティブアプリ化も選択肢にはありました。
ただ、今回の用途ではブラウザUIのほうがメリットが大きかったです。
メリット
- App Store公開が不要
- iPhone側の実装が軽い
- 修正がPC側だけで完結しやすい
- Safariでそのまま使える
- 同じ仕組みをiPadや別端末にも流用しやすい
つまり、専用アプリを作るほどではないが、スマホから触りたいというケースにかなり向いていました。
実際に作ったUIのイメージ
UIはかなりシンプルにしました。
- 処理開始ボタン
- 停止ボタン
- ステータス表示
- プログレスバー表示
- ログ表示
- 必要ならファイル選択やパラメータ入力
いわゆる管理画面に近い見た目です。
スマホで使う前提なので、凝ったUIよりも以下を優先しました。
- ボタンが押しやすい
- 状態がすぐわかる
- 誤操作しにくい
このあたりは、PC向けアプリをそのままスマホに持ってくるのではなく、スマホは「操作パネル」に割り切ると設計しやすかったです。
実装時に意識したポイント
1. Windowsアプリ本体とWeb層を分ける
最初からUI操作込みで密結合にしてしまうと、後で保守しづらくなります。
そのため、以下はなるべく分けました。
- アプリ本体の処理
- Web API
- 画面表示
たとえば、処理本体は関数やクラスとして呼べるようにしておき、デスクトップUIから呼んでもWeb APIから呼んでも同じ処理が動く形にすると扱いやすいです。
2. 長時間処理は非同期前提で考える
PC側で時間のかかる処理を動かす場合、HTTPリクエストの応答をずっと待たせる構成だと扱いにくくなります。
そのため、以下のようにすると安定しやすいです。
- 開始APIではジョブ起動だけ返す
- 状態確認APIを別で持つ
- 必要ならログ取得APIも持つ
イメージとしてはこんな感じです。
POST /startPOST /stopGET /statusGET /logs
iPhone側は定期的に status を取りに行くだけでも、かなりそれっぽく動きます。
3. ファイルパスなどをそのままiPhoneに持ち込まない
Windowsアプリを遠隔操作する場合、つい「iPhoneからPC上の細かいパスを直接指定したい」と考えがちです。
ただ、これはUIも複雑になりやすく、ミスも増えます。
そのため、スマホ側では以下のように寄せるほうが使いやすいです。
- 事前に決めた入力フォルダを使う
- プリセットを選ぶ
- サーバー側で解決する
スマホは自由入力を頑張るより、操作を限定してミスを減らすほうが相性がよいと感じました。
4. 認証や到達範囲は最初に考える
Tailscaleを使うことでかなり閉じた構成にはできますが、だからといって何もしなくてよいわけではありません。
たとえば、以下の点は最初に考えたほうがよいです。
- サーバーを
0.0.0.0で待ち受けるか - TailscaleのIPだけで使うか
- 追加の簡易認証を入れるか
- 危険な操作に確認を入れるか
個人利用でも、「押したら即危険な処理が走る」ような設計は避けたほうが安心です。
Tailscaleを使ってよかった点
実際に使ってみて、特によかったのはこのあたりです。
セットアップが比較的楽
ポート開放や固定IPのような話をかなり避けやすいです。
個人開発だと、この手の周辺設定で止まりがちなので助かりました。
公開範囲を絞りやすい
インターネット全体にさらさず、接続端末を限定しやすいのは大きいです。
iPhoneからの接続が自然
Tailscale経由でPCのアドレスにそのままアクセスできるので、「VPNっぽい何かを頑張って意識する」感じが薄いのがよかったです。
自作ツールの操作パネル化と相性がよい
Windowsアプリそのものをスマホ向けに作り直すのではなく、操作だけWeb化するという分担がかなり現実的でした。
やってみて感じた課題
もちろん、よいことばかりではありませんでした。
スマホUIは割り切りが必要
PC向けの機能をそのまま全部スマホに載せようとすると使いにくくなります。
スマホでは「よく使う操作だけ」に絞るのが大事でした。
リアルタイム性には工夫がいる
状態更新やログ表示を気持ちよく見せるには、ポーリングかWebSocketのような仕組みを考える必要があります。
最初は単純なポーリングで十分でしたが、要件が増えると改善余地があります。
PC側が起動していることが前提
当然ですが、Windows PCが起動していて、アプリとサーバーが動いていないと使えません。
ここはSaaSとは違う、セルフホスト構成らしい制約です。
この構成が向いているケース
今回のやり方は、特に以下のようなケースで相性がよいと思います。
- 自作のローカルWindowsツールをスマホから触りたい
- 外部公開はできるだけ避けたい
- iPhoneアプリを新規開発するほどではない
- 個人利用や小規模運用で使いたい
- 管理画面や操作パネルのような用途にしたい
逆に、多人数利用や本格公開サービスにするなら、認証・監査・可用性・配布方法まで含めて別構成を考えたほうがよさそうです。
まとめ
Tailscaleを使ってPCとiPhoneを同じプライベートネットワークに参加させ、PC上のWebサーバー経由で自作Windowsアプリを遠隔操作する構成を試してみました。
この方法のよかった点は、単に「遠隔操作できた」だけではなく、以下のバランスのよさにありました。
- 外部公開を避けやすい
- iPhone側をブラウザで済ませられる
- Windowsアプリ本体を大きく作り変えなくてよい
- 個人開発でも現実的に導入しやすい
個人的には、既存のデスクトップアプリをスマホ対応したいときの落としどころとしてかなり良い構成だと感じています。
同じように「Windowsの自作ツールをiPhoneから安全寄りに触りたい」と考えている方の参考になればうれしいです。