ホーム›AIを使った自作アプリ記録›Lyric Machine 開発記›Mac で作ったアプリをスマホから使う|Tailscale と Cloudflare Workers(無料枠)で歌詞を同期した方法

Mac で作ったアプリをスマホから使う|Tailscale と Cloudflare Workers(無料枠)で歌詞を同期した方法

Lyric Machine 開発記(7本目) 公開日 2026年10月15日

自分専用の作詞アプリ「Lyric Machine」は Mac のアプリです。でも、歌詞を思いつくのは机の前とは限りません。この記事では、お金をかけずにスマホから歌詞を見たり書いたりできるようにした 2 つの方法を書きます。どちらも Claude Code(文章で頼むとプログラムを書いてくれる AI)に作ってもらいました。

何を作りたかったか

最初は、こう相談しました。

私

このアプリ、スマホからでもアクセスできるようにしたいのだが。どんな方法がある?金は一旦かけたくない

Claude Code

無料でできます。データと AI とのやり取りは Mac の中にあるので、どの方法でも、使うときは Mac が起きている必要があります。

Claude Code

おすすめは Tailscale です。外出先からでも、自分の Mac だけに安全につながります。

スマホから使いたいと相談した(やりとりを再現したもの)

そのあと、使いながら要望が少しずつはっきりしていきました。

やったこと

方法 1:Tailscale で Mac のアプリをスマホから開く

最初に作ったのは、Tailscale を使う方法です。Tailscale は、自分の Mac とスマホを、インターネット越しに安全につなぐ無料のサービスです。

  • Mac とスマホに Tailscale を入れておく
  • スマホのブラウザで、Mac と同じアプリの画面が開く
私

Tailscale でやろう。作って

Claude Code

スマホから使えるようにしました(v0.25.0)。

Claude Code

Mac と iPhone の両方に Tailscale を入れて、同じアカウントでログインします。アプリに出る QR コードを iPhone のカメラで読むと、Safari で開いてつながります。

Tailscale で作ってもらった(やりとりを再現したもの)

設定は、アプリの「使い方」タブの手順どおりに進めました。たしか、スマホに Tailscale のアプリを入れてアカウントを作りました。そのあとアプリの QR コードを読み取ったら、スマホでも開けました。

そのあと、こう頼みました。

私

パスコードとかはめんどいな。スマホでも最新の歌詞がリアルタイムでみれるようになれば一旦いいかな

Claude Code

スマホでは今書いている歌詞がリアルタイムで見られるようにして、Tailscale の iPhone ならパスコードなしで開けるようにしました(v0.26.0)。

Claude Code

開くと「ライブ」画面になり、Mac で打った内容は 2 秒ほどで反映されます。

パスコードが面倒だった(やりとりを再現したもの)

こうして、Tailscale でつながった自分の端末はコードなしで入れるようになり、Mac で書いている歌詞がスマホに約 2 秒で出る「ライブ」画面もできました。

ただ、この方法には弱点があって、Mac が起きていないと使えません。

方法 2:Cloudflare の無料枠に自分専用の置き場を作る

そこで、Mac が寝ていても、スマホで書ける形を頼みました。

私

これって現状のものはのこしつつ、ウェブアプリ版も作って連携すればスマホからもみれて同期できたりしない?

Claude Code

はい、できます。しかもかなりの部分はもう入っています。弱点は、使っている間 Mac が起きている必要があることです。

私

スマホでいつでもみれて歌詞がかければいい。Cloudflare とかで無料で行けない?

Claude Code

無料でできます。Cloudflare の無料枠で、作詞データの置き場とスマホ用の歌詞エディタを作ります。Mac のアプリはそのまま残して、両方を自動で同期させる形です。

Mac が寝ていても使いたくなった(やりとりを再現したもの)

使ったのは Cloudflare の無料枠です。Cloudflare は、Web サービスを動かす場所を貸してくれる会社で、小さな仕組みなら無料で動かせます。

できあがった「スマホでいつでも」の仕組みは次のとおりです。

  • 自分の Cloudflare アカウントに、歌詞の置き場と、スマホ用の歌詞エディタを置く
  • 必要な作業は、Cloudflare の API トークン(合言葉のようなもの)を 1 回貼ることだけ。置き場はアプリが自動で組み立てる。ターミナルは使わない
  • Mac が起きている間は、15 秒ごとに自動で同期する
  • スマホで書いた歌詞は「スマホで書いた版」として Mac に入る。Mac の版は消えない
  • 合言葉は QR コードでスマホに渡す。スマホをなくしたら合言葉を変えられる

スマホの画面でできるのは、歌詞を見ることと書くことだけです。スマホで新しい曲を書くと、Mac にも曲ができます。

あとから、ホーム画面に追加したときのアイコンも、アプリと同じ絵にしてもらいました。

私

スマホ保存用の画像出して

Claude Code

ホーム画面のアイコンですね。アプリのアイコンがすでにあるので、それをスマホ用の画面にも入れます。

Claude Code

ホーム画面用のアイコンを入れました(v0.39.1)。絵は Mac のアプリと同じです。

ホーム画面のアイコンを頼んだ(やりとりを再現したもの)

詰まった所と解決

両方で同時に直したときの扱い

Mac とスマホの両方で同じ曲を直したときにどうするかは、大事だなと思ったところです。Lyric Machine では、どちらも消さない形にしています。

  • スマホの歌詞は、新しい版として足す
  • Mac 側に書きかけがあれば、それも先に版として残す
  • スマホで書いている途中は受け取らず、手が止まって約 12 秒たってから受け取る(版が細かく増えすぎないように)

確認中に見つかった不具合

確かめている途中で、ページを開いたまま QR のリンクを開き直すと、合言葉が読み込まれない不具合が見つかりました。リンクの変化を受け取るように直しています。

また、Cloudflare のトークンを作る画面で、アカウントやゾーン(ドメインのまとまり)の範囲も聞かれることが分かり、手順に書き足しました。

本物の Cloudflare での動作確認

Claude Code の側には私の Cloudflare アカウントがないため、本物の Cloudflare での動作は確かめていません。代わりに、Cloudflare と同じ動きをする偽物を手元に用意して、Mac、置き場、スマホの画面を通しで確かめました。そのあと自分の Cloudflare で使ってみたところ、ちゃんと動いています。

使ってみた感想

どこでも歌詞が書けるのは、やっぱり便利です。

同じことをやりたい人へ

  • まずは「Mac が起きているときだけでいいか」を考えてみてください。それで足りるなら、Tailscale だけで十分いけます。
  • Mac が寝ていても使いたいなら、無料のクラウドも選択肢になります。手順はアプリが組み立ててくれるので、ターミナルを使わずに済みました。

まとめ

  • Mac が起きているなら、Tailscale(無料)でスマホから Mac のアプリを開ける
  • Mac が寝ていても書きたいなら、Cloudflare の無料枠に自分専用の置き場を作る方法がある
  • データは自分のアカウントの中だけにある
  • 同時に直したときは「どちらも消さず、新しい版として足す」と決めておくと安心

次の記事では、自作の曲に AI で架空の監督やクライアントを立てて、歌詞の指摘をさせてみる仮想クライアント機能の話を書きます。