<p data-line="1" class="code-line">下記の記事を参考にスマホからVPN経由でSSH接続し、Claude Codeにアクセスできる環境を構築してみました。</p>
<p data-line="3" class="code-line">
    <iframe 
      class="hatenablogcard" 
      style="width:100%;height:155px;max-width:680px;" 
      src="https://hatenablog-parts.com/embed?url=https://zenn.dev/fuku_tech/articles/bba079706955fd" 
      width="300" 
      height="150" 
      frameborder="0" 
      scrolling="no">
    </iframe>       
    </p>
<p data-line="5" class="code-line">上記の記事はiPhoneでの設定方法ですが、Androidでも同様のことができたので備忘録。</p>
<h2 id="%E5%89%8D%E6%8F%90" data-line="7" class="code-line"><a class="header-anchor-link" href="#%E5%89%8D%E6%8F%90" aria-hidden="true"></a> 前提</h2>
<ul data-line="9" class="code-line">
<li data-line="9" class="code-line">Claude CodeがPCにインストール・設定済み</li>
<li data-line="10" class="code-line">Termius、Tailscaleというアプリを使用</li>
<li data-line="11" class="code-line">今回はMacで解説しますが、Windows PCでも同様の手順で可能です。</li>
</ul>
<h2 id="%E8%A8%AD%E5%AE%9A%E6%89%8B%E9%A0%86" data-line="13" class="code-line"><a class="header-anchor-link" href="#%E8%A8%AD%E5%AE%9A%E6%89%8B%E9%A0%86" aria-hidden="true"></a> 設定手順</h2>
<h3 id="mac(pc)%E3%81%AE%E8%A8%AD%E5%AE%9A" data-line="15" class="code-line"><a class="header-anchor-link" href="#mac(pc)%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> Mac(PC)の設定</h3>
<h4 id="claude-code%E3%81%AE%E8%A8%AD%E5%AE%9A" data-line="17" class="code-line"><a class="header-anchor-link" href="#claude-code%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> Claude Codeの設定</h4>
<p data-line="18" class="code-line">下記記事を参考にClaude Codeをインストール・設定します。</p>
<p data-line="20" class="code-line">
    <iframe 
      class="hatenablogcard" 
      style="width:100%;height:155px;max-width:680px;" 
      src="https://hatenablog-parts.com/embed?url=https://zenn.dev/schroneko/articles/a4496472b76477" 
      width="300" 
      height="150" 
      frameborder="0" 
      scrolling="no">
    </iframe>       
    </p>
<h4 id="tailscale%E3%81%AE%E8%A8%AD%E5%AE%9A" data-line="22" class="code-line"><a class="header-anchor-link" href="#tailscale%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> Tailscaleの設定</h4>
<p data-line="23" class="code-line">下記からTailscaleをインストール・設定します。チュートリアルに従って簡単にセットアップできます。</p>
<p data-line="25" class="code-line">
    <iframe 
      class="hatenablogcard" 
      style="width:100%;height:155px;max-width:680px;" 
      src="https://hatenablog-parts.com/embed?url=https://tailscale.com/" 
      width="300" 
      height="150" 
      frameborder="0" 
      scrolling="no">
    </iframe>       
    </p>
<h4 id="mac%E3%81%AEssh%E8%A8%AD%E5%AE%9A" data-line="27" class="code-line"><a class="header-anchor-link" href="#mac%E3%81%AEssh%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> MacのSSH設定</h4>
<div class="code-block-container"><pre><code class="code-line" data-line="29">システム設定 → 一般 → 共有 → リモートログイン をON
</code></pre></div><p data-line="33" class="code-line">詳細を見て確認したい場合は記事を参考にしてください。</p>
<p data-line="35" class="code-line">
    <iframe 
      class="hatenablogcard" 
      style="width:100%;height:155px;max-width:680px;" 
      src="https://hatenablog-parts.com/embed?url=https://zenn.dev/fuku_tech/articles/bba079706955fd#pc%E5%81%B4%E3%81%AE%E6%BA%96%E5%82%99" 
      width="300" 
      height="150" 
      frameborder="0" 
      scrolling="no">
    </iframe>       
    </p>
<h3 id="android%E5%81%B4%E3%81%AE%E8%A8%AD%E5%AE%9A" data-line="37" class="code-line"><a class="header-anchor-link" href="#android%E5%81%B4%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> Android側の設定</h3>
<h4 id="tailscale%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%A8%E8%A8%AD%E5%AE%9A" data-line="39" class="code-line"><a class="header-anchor-link" href="#tailscale%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%A8%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> Tailscaleアプリのインストールと設定</h4>
<ol data-line="40" class="code-line">
<li data-line="40" class="code-line">Google Play から「Tailscale」をインストール</li>
<li data-line="41" class="code-line">同じアカウントでログイン</li>
</ol>
<h4 id="termius%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%A8%E8%A8%AD%E5%AE%9A" data-line="43" class="code-line"><a class="header-anchor-link" href="#termius%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%A8%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> Termiusアプリのインストールと設定</h4>
<ol data-line="44" class="code-line">
<li data-line="44" class="code-line">Google Play から「Termius」をインストール</li>
<li data-line="45" class="code-line">同じアカウントでログイン</li>
</ol>
<p data-line="47" class="code-line">これで設定は完了です。</p>
<h2 id="%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B" data-line="49" class="code-line"><a class="header-anchor-link" href="#%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B" aria-hidden="true"></a> 使ってみる</h2>
<p data-line="51" class="code-line">スマホでTermiusを開き、PC(Mac)で追加したホストに接続します。</p>
<div class="code-block-container"><pre><code class="code-line" data-line="53">Vaults → Hosts → +を選択 → ホストを探す → Tailscaleのホストを選択 → ユーザ名とパスワードを入力
</code></pre></div><p data-line="57" class="code-line">無事接続できたらHosts一覧に表示されているホストをタップして接続します。</p>
<p data-line="59" class="code-line">接続後、以下のようにClaude Codeを実行できます。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell code-line" data-line="61">claude
</code></pre></div><p data-line="65" class="code-line">成功すれば環境構築完了です。</p>
<h3 id="%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E8%A8%AD%E5%AE%9A" data-line="67" class="code-line"><a class="header-anchor-link" href="#%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> おすすめ設定</h3>
<p data-line="68" class="code-line">スマホで作業する上での便利な設定を紹介します。</p>
<h4 id="%E3%82%B9%E3%83%AA%E3%83%BC%E3%83%97%E9%98%B2%E6%AD%A2" data-line="70" class="code-line"><a class="header-anchor-link" href="#%E3%82%B9%E3%83%AA%E3%83%BC%E3%83%97%E9%98%B2%E6%AD%A2" aria-hidden="true"></a> スリープ防止</h4>
<p data-line="71" class="code-line">Macでスリープしてしまうと、SSH接続が切れてしまいます。以下のコマンドをMacで実行しておくことでスリープを防止できます。</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="73"><span class="token comment"># ターミナルで実行（常時アクセスしたい場合）</span>
caffeinate
</code></pre></div><h4 id="%E3%83%88%E3%83%B3%E3%83%8D%E3%83%AA%E3%83%B3%E3%82%B0" data-line="78" class="code-line"><a class="header-anchor-link" href="#%E3%83%88%E3%83%B3%E3%83%8D%E3%83%AA%E3%83%B3%E3%82%B0" aria-hidden="true"></a> トンネリング</h4>
<p data-line="79" class="code-line">Claude Codeを使っている人の多くはWEB系の開発かと思います。</p>
<p data-line="81" class="code-line">WEB系の開発では、ローカルサーバーを立ててブラウザで確認することが多いです。</p>
<p data-line="83" class="code-line">その場合、ngrokを使ってトンネリングするとスマホからもローカルサーバーに簡単かつ安全にアクセスできます。</p>
<p data-line="85" class="code-line">特に固定urlでブックマーク可能、Google アカウントでのログイン設定で安全にアクセスできるのが良いです。</p>
<p data-line="87" class="code-line">ngrokの使い方は以下の記事を参考にしてください。</p>
<p data-line="89" class="code-line"><strong>固定URLの設定方法</strong><br style="display:none" />

    <iframe 
      class="hatenablogcard" 
      style="width:100%;height:155px;max-width:680px;" 
      src="https://hatenablog-parts.com/embed?url=https://zenn.dev/y_taiki/articles/ngrok_domain" 
      width="300" 
      height="150" 
      frameborder="0" 
      scrolling="no">
    </iframe>       
    </p>
<p data-line="92" class="code-line"><strong>Google認証の設定方法</strong><br style="display:none" />

    <iframe 
      class="hatenablogcard" 
      style="width:100%;height:155px;max-width:680px;" 
      src="https://hatenablog-parts.com/embed?url=https://blog.labol.co.jp/entry/using-and-operating-ngrok#OAuthGoogle%E8%AA%8D%E8%A8%BC" 
      width="300" 
      height="150" 
      frameborder="0" 
      scrolling="no">
    </iframe>       
    </p>


スマホ(Android)からClaude Codeを繋いでどこでもvibe codingする