<p data-line="1" class="code-line">Claude Code UIをスマホから使えるように設定してみました。備忘録として残します。</p>
<p data-line="3" class="code-line">Claude Code UIの基本的な使い方については下記の記事を参照してください。</p>
<p data-line="5" class="code-line">
    <iframe 
      class="hatenablogcard" 
      style="width:100%;height:155px;max-width:680px;" 
      src="https://hatenablog-parts.com/embed?url=https://clameyes.com/posts/claude-code-ui-guide" 
      width="300" 
      height="150" 
      frameborder="0" 
      scrolling="no">
    </iframe>       
    </p>
<h2 id="%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%A7%E4%BD%BF%E3%81%86%E5%88%A9%E7%82%B9" data-line="7" class="code-line"><a class="header-anchor-link" href="#%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%A7%E4%BD%BF%E3%81%86%E5%88%A9%E7%82%B9" aria-hidden="true"></a> スマホで使う利点</h2>
<p data-line="9" class="code-line">Claude Code UIはGUI操作でClaude Codeを使えるため、スマホとの相性が良いです。</p>
<ul data-line="11" class="code-line">
<li data-line="11" class="code-line"><strong>キーボード不要</strong>：タップ操作でファイル選択やGit操作ができる</li>
<li data-line="12" class="code-line"><strong>視認性が高い</strong>：ファイルエクスプローラーやコードが見やすく表示される</li>
<li data-line="13" class="code-line"><strong>どこでも作業</strong>：外出先でもちょっとしたコード修正ができる</li>
</ul>
<h2 id="%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%8B%E3%82%89%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%99%E3%82%8B%E4%BB%95%E7%B5%84%E3%81%BF" data-line="15" class="code-line"><a class="header-anchor-link" href="#%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%8B%E3%82%89%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%99%E3%82%8B%E4%BB%95%E7%B5%84%E3%81%BF" aria-hidden="true"></a> スマホからアクセスする仕組み</h2>
<p data-line="17" class="code-line">Claude Code UIはローカルPCで動作するため、そのままではスマホからアクセスできません。Cloudflare Tunnelを使うことで、インターネット経由でローカルサーバーに安全にアクセスできるようになります<sup class="footnote-ref"><a href="#fn-bdb5-1" id="fnref-bdb5-1">[1]</a></sup>。</p>
<p data-line="19" class="code-line">構成は以下のようになります。</p>
<div class="code-block-container"><pre><code class="code-line" data-line="21">スマホ（ブラウザ）
    ↓ HTTPS
Cloudflare Tunnel
    ↓
ローカルPC（Claude Code UI）
    ↓
Claude Code
</code></pre></div><h2 id="%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E6%89%8B%E9%A0%86" data-line="31" class="code-line"><a class="header-anchor-link" href="#%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E6%89%8B%E9%A0%86" aria-hidden="true"></a> セットアップ手順</h2>
<h3 id="claude-code-ui%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" data-line="33" class="code-line"><a class="header-anchor-link" href="#claude-code-ui%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> Claude Code UIのインストール</h3>
<p data-line="35" class="code-line">まず、ローカルPCにClaude Code UIをインストールします。</p>
<p data-line="37" class="code-line">リポジトリをクローンします。</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="39"><span class="token function">git</span> clone https://github.com/siteboon/claudecodeui.git
</code></pre></div><p data-line="43" class="code-line">クローンしたディレクトリに移動します。</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="45"><span class="token builtin class-name">cd</span> claudecodeui
</code></pre></div><p data-line="49" class="code-line">依存パッケージをインストールします。</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="51"><span class="token function">npm</span> <span class="token function">install</span>
</code></pre></div><p data-line="55" class="code-line">開発サーバーを起動します。</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="57"><span class="token function">npm</span> run dev
</code></pre></div><p data-line="61" class="code-line">起動すると <code>http://localhost:3000</code> でアクセスできます。ブラウザで開いて動作を確認してください。</p>
<h3 id="cloudflare-tunnel%E3%81%AE%E8%A8%AD%E5%AE%9A" data-line="63" class="code-line"><a class="header-anchor-link" href="#cloudflare-tunnel%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> Cloudflare Tunnelの設定</h3>
<p data-line="65" class="code-line">次に、Cloudflare Tunnelを使ってローカルサーバーを外部に公開します。事前にCloudflareアカウント（無料）を作成しておいてください。</p>
<p data-line="67" class="code-line">cloudflaredをインストールします（Macの場合）。</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="69">brew <span class="token function">install</span> cloudflare/cloudflare/cloudflared
</code></pre></div><p data-line="73" class="code-line">Cloudflareにログインします。ブラウザが開くので認証を完了してください。</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="75">cloudflared tunnel login
</code></pre></div><p data-line="79" class="code-line">トンネルを作成します。</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="81">cloudflared tunnel create claude-code-ui
</code></pre></div><p data-line="85" class="code-line">ローカルサーバーを公開します。</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="87">cloudflared tunnel run <span class="token parameter variable">--url</span> http://localhost:3000 claude-code-ui
</code></pre></div><p data-line="91" class="code-line">コマンド実行後に表示されるURLにスマホのブラウザからアクセスすれば、Claude Code UIを操作できます。</p>
<h2 id="%E4%BD%BF%E7%94%A8%E4%B8%8A%E3%81%AE%E7%95%99%E6%84%8F%E7%82%B9" data-line="93" class="code-line"><a class="header-anchor-link" href="#%E4%BD%BF%E7%94%A8%E4%B8%8A%E3%81%AE%E7%95%99%E6%84%8F%E7%82%B9" aria-hidden="true"></a> 使用上の留意点</h2>
<p data-line="95" class="code-line">Claude Code UIを使う際は、以下の点に注意してください。</p>
<ul data-line="97" class="code-line">
<li data-line="97" class="code-line"><strong>PCの起動が必要</strong>：ローカルPCが起動していないとアクセスできません</li>
<li data-line="98" class="code-line"><strong>ネットワーク環境</strong>：PCがインターネットに接続されている必要があります</li>
</ul>
<h2 id="%E5%9B%BA%E5%AE%9Aurl%E3%81%A8%E8%AA%8D%E8%A8%BC%E3%81%AE%E8%A8%AD%E5%AE%9A" data-line="100" class="code-line"><a class="header-anchor-link" href="#%E5%9B%BA%E5%AE%9Aurl%E3%81%A8%E8%AA%8D%E8%A8%BC%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> 固定URLと認証の設定</h2>
<p data-line="102" class="code-line">上記の方法では毎回URLが変わり、認証もないためセキュリティ上の懸念があります。独自ドメインを持っている場合は、Cloudflareダッシュボードから固定URLでのアクセスやメール認証の追加が可能です。</p>
<p data-line="104" class="code-line">
    <iframe 
      class="hatenablogcard" 
      style="width:100%;height:155px;max-width:680px;" 
      src="https://hatenablog-parts.com/embed?url=https://clameyes.com/posts/cloudflare-tunnel-fixed-url-auth" 
      width="300" 
      height="150" 
      frameborder="0" 
      scrolling="no">
    </iframe>       
    </p>
<h2 id="%E4%BB%96%E3%81%AE%E6%96%B9%E6%B3%95%E3%81%A8%E3%81%AE%E6%AF%94%E8%BC%83" data-line="106" class="code-line"><a class="header-anchor-link" href="#%E4%BB%96%E3%81%AE%E6%96%B9%E6%B3%95%E3%81%A8%E3%81%AE%E6%AF%94%E8%BC%83" aria-hidden="true"></a> 他の方法との比較</h2>
<p data-line="108" class="code-line">スマホからClaude Codeを使う方法は他にもあります。用途に応じて選んでください。</p>
<p data-line="110" class="code-line">手軽にスマホからClaude Codeを使いたい場合は、公式Web版が設定不要で便利です。</p>
<p data-line="112" class="code-line">
    <iframe 
      class="hatenablogcard" 
      style="width:100%;height:155px;max-width:680px;" 
      src="https://hatenablog-parts.com/embed?url=https://clameyes.com/posts/claude-code-web-android-browser" 
      width="300" 
      height="150" 
      frameborder="0" 
      scrolling="no">
    </iframe>       
    </p>
<p data-line="114" class="code-line">SSH経由でローカルPCに接続する方法もあります。Termiusアプリを使えばスマホからターミナル操作が可能です。</p>
<p data-line="116" class="code-line">
    <iframe 
      class="hatenablogcard" 
      style="width:100%;height:155px;max-width:680px;" 
      src="https://hatenablog-parts.com/embed?url=https://clameyes.com/posts/claude-code-smartphone-setup" 
      width="300" 
      height="150" 
      frameborder="0" 
      scrolling="no">
    </iframe>       
    </p>
<p data-line="118" class="code-line">Claude Code UIは、GUIで操作したい場合やファイルエクスプローラーを使いたい場合に向いています。</p>
<section class="footnotes">
<span class="footnotes-title">脚注</span>
<ol class="footnotes-list">
<li id="fn-bdb5-1" class="footnote-item"><p data-line="120" class="code-line"><a href="https://zenn.dev/nogu66/articles/claudecodeui" target="_blank">Claude Code UI と Cloudflare Tunnelでスマホから快適にAIコーディング - Zenn</a> <a href="#fnref-bdb5-1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>


Claude Code UIにスマホからリモートアクセスする