個人開発日記：LINEの「アプリ内ブラウザで開けない問題」を1秒で解決するWebツールを作った話

こんにちは！個人開発をしている morinosugi です。

今回は、最近リリースしたWebツール**「アウトサイト」**の開発日記として、

  • なぜこのツールを作ろうと思ったのか？（日常のプチストレス）
  • たった1つのパラメータで解決する仕組み
  • 個人開発ならではの技術的こだわり（維持費0円・完全クライアント完結）
  • デザイン・UIで意識したこと

を裏話も含めてまとめてみました。

個人開発に興味がある方や、LINEのリンク挙動に悩んでいる方の参考になれば嬉しいです！

1. 開発のきっかけ：「またログイン画面出たんだけど…」

発端は、日常で本当によくある小さなストレスでした。

友達にgoogle photosの写真を送ったとき
あるいは、自分の運営しているサービスやイベントの申込ページをLINEで案内したとき。

「リンク開いたけど、ログイン画面になって買えなかった」
「戻る押したらトーク画面に戻ってしまう」

という声がめちゃくちゃ多かったんです。

スマホって、普段SafariやChromeを使っていれば、パスワードも自動入力されるし、Amazonや楽天もログインしっぱなしですよね。

なのに、LINEの中でリンクを踏むと「LINEアプリ内の簡易ブラウザ」で開いてしまい、ログイン情報やCookieが全部ゼロクリアされた状態で表示されてしまうんです。

「これ、めちゃくちゃ機会損失だし、送られた側もめちゃくちゃ面倒くさいのでは…？」と思ったのが開発のスタートでした。

2. 発見：LINE公式に「外部ブラウザで開かせる裏技」があった

どうにかして「LINEからタップした瞬間に、最初からChromeやSafariを立ち上げさせる方法はないのか？」と調べたところ、実はLINE公式の仕様として存在していました。

それが、URLの末尾に付ける ?openExternalBrowser=1 というパラメータです。

【通常】example.com/item/123 （LINEの中で開く）
【裏技】example.com/item/123?openExternalBrowser=1 （SafariやChromeで開く！）

copy

「これだ！！」と思いました。

しかし、実際に手動で使おうとするとある問題にぶつかります。

⚠️ 手動入力の罠：? と & のルール

すでに ? が含まれているURL（例：キャンペーンタグや検索結果ページなど）の場合、末尾にそのまま ?openExternalBrowser=1 をつけると、URLの構文エラーでリンクが壊れて開けなくなります。

  • ❌ https://example.com/search?q=shoes?openExternalBrowser=1 （壊れる）
  • ⭕️ https://example.com/search?q=shoes&openExternalBrowser=1 （2つ目以降は & にする）

「これだけのことなのにWEBツールが存在しない！」
ということでWEBサイトを開発することにしました

そこで、**「URLを貼るだけで、自動判別して1秒で変換・コピーできる専用ツール」**を作ることにしました。

3. 作ったもの：「アウトサイト」

こうして完成したのがこちらです。

👉 アウトサイト｜LINEのURLをChromeで開く自動変換ツール

使い方は超シンプル。

  1. URLを入力欄に貼り付ける
  2. 「変換する」を押す
  3. 「ワンタップでコピー」を押して、LINEで送るだけ。

4. 開発におけるこだわりポイント

① 完全クライアントサイド完結（プライバシーの担保）

個人開発ツールを使うとき、ユーザーが一番不安になるのは「入力したURLが勝手にサーバーにログ保存されたり収集されたりしないか？」という点だと思います。

アウトサイトは、すべてのURL解析・パラメータ付与処理をブラウザ上のJavaScript（クライアントサイド）だけで完結させています。
サーバーに入力データが一切送信されないため、社内URLや個人情報を含むリンクでも安心して使っていただける設計にしました。

② 爆速表示＆ミニマルな1ファイル構成

「使いたいときに一瞬で開いて、一瞬でコピーできる」のがツールの命です。
余計な重いライブラリを削ぎ落とし、HTML/CSS/Vanilla JSで軽量に仕上げています。スマホの通信制限時でも一瞬で表示されます。

③ 押し心地と片手操作を意識したUI/UX

  • 入力欄にフォーカスしやすい大きめのフォントサイズ
  • 親指が届きやすい大きなアクションボタン
  • コピー完了時に視覚的にわかりやすいフィードバック（「コピーしました！」アニメーション）
  • 目に優しく清潔感のあるグリーン×アースカラーの配色

5. 個人開発を通じて感じたこと

最初は「自分が使いたいから」という些細な理由で作り始めたツールでした。

でも、作っていくうちに

  • 「LINE公式アカウントを運用しているEC事業者さん」
  • 「セミナーやイベントの参加登録を案内する主催者さん」
  • 「PDFの資料やマニュアルをLINEで送りたい方」

など、想像以上に多くの人がこの「アプリ内ブラウザ問題」で困っていることに気づきました。

巨大なサービスを作るのも面白いですが、**「日常の1つの困りごとを、最短・最小の手数でキレイに解消するツール」**を作る個人開発の面白さを改めて実感しています。

6. ぜひ使ってみてください！

「LINEで送ったリンク、相手にスムーズに見てほしいな」というときは、ぜひブックマークして使ってみてください！

アウトサイト｜LINEのURLをChromeでLINEや各種SNSのアプリ内ブラウザを回避し、SafariやChromeなどの外部ブラウザで強制的にページを開くためのサイト

OUTSITE使い方ガイド

もし気に入っていただけたら、X（Twitter）やnoteでシェアしていただけると開発の励みになります！