ブログ

[読書会]Web上のURL戦略の設定

１．概要

１-１．FlutterウェブアプリにおけるURLベースのナビゲーション方法

　ウェブアプリでのURLのナビゲーションを次の２つの方法で設定できます。

（１）Hashベースのナビゲーション（デフォルト設定）

  • 特徴
    　URLのパス部分が #（ハッシュフラグメント）を使って読み書きされます。
  • 例
    　flutterexample.dev/#/path/to/screen
  • 説明
    　この方法では、ページの完全なリロードが発生しないため、基本的に従来のウェブアプリがURLのハッシュ部分を使って動作するのと同様の挙動になります。
    （ユーザがページのURLを変更しても、#以降の部分が変更されるだけで、ブラウザはページのリロードを行いません。）

（２）Pathベースのナビゲーション

  • 特徴
    　（#を使わずに）URLのパス部分が直接使用されます。
  • 例
    　flutterexample.dev/path/to/screen
  • 説明
    　この方法では、従来のウェブサイトのように、URLのパスがそのまま表示されます。これにより、より「クリーン」なURLを作成できますが、サーバ側の設定が必要になります。
    （例えば、サーバはFlutterアプリが全てのルートを処理できるように設定される必要があります。）

１-２．使用シナリオ

（１）Hashナビゲーション

　（デフォルトの方法であり、サーバの設定を必要としない為）初期の開発や、シンプルなアプリに適しています。

（２）Pathナビゲーション

　（よりクリーンで標準的なURL構造を提供し、SEOの観点からも有利ですが）サーバのリクエストを適切に設定しなければならないため、セットアップがやや複雑になります。

２．URL戦略の設定

　FlutterでパスベースのURLナビゲーションを使用するには、flutter_web_pluginsライブラリに含まれているusePathUrlStrategy関数を使います。これにより（URLのハッシュフラグメント（#）を使用しない）クリーンなパス形式のURLを実現できます。
設定手順は以下の通りです。

（１）flutter_web_pluginsの依存関係を追加

　flutter_web_plugins は、pub addコマンドで直接追加できません。
その代わりに、pubspec.yamlファイルに SDK依存関係として追加する必要があります。

（pubspec.yaml）flutter_web_plugins の依存関係を直接追加する。
dependencies:
  flutter:
    sdk: flutter
  flutter_web_plugins:
    sdk: flutter

（２）usePathUrlStrategy関数の呼び出し

　この関数を runAppの前に呼び出すことで、アプリがパスベースのURLナビゲーションを使用する様に設定されます。

Dart
import 'package:flutter_web_plugins/url_strategy.dart';

void main() {
  //パスベースのURL戦略を設定
  usePathUrlStrategy();
  runApp(ExampleApp());
}

３．Webサーバの設定

　PathUrlStrategy を使用する際、History API が使われます。これはクリーンなパスベースのURLを可能にするものですが、通常のリンクではなく、ブラウザの履歴を制御する為の仕組みを利用しているため、サーバ側での追加設定が必要です。この設定を行わないと、リロードや直接URLにアクセスした際に 404 エラーが発生する可能性があります。

３-１．サーバ設定の必要性

　パスベースのURLを使用するには、全てのリクエストをindex.htmlにリダイレクトする様にサーバを設定する必要があります。
（これはシングルページアプリ（SPA）の一般的な設定で、ユーザが特定のパスにアクセス時に、そのパスが実際にはサーバ上のファイルではなく、アプリによって解釈されるようにします。）

３-２．Firebase Hostingの設定

　Firebase Hosting を使用している場合、firebase init コマンドでプロジェクトを初期化する際に、“Configure as a single-page app“というオプションを選択します。これにより、全てのリクエストが index.html にリダイレクトされる設定が自動的に行われます。さらに、Firebaseの公式ドキュメントに従ってリライトルール（rewrites）を設定することも可能です。

３-３．ローカル開発サーバ

　flutter run -d chromeコマンドで起動するローカル開発サーバは、既にこの設定が組み込まれている為、特定のパスにアクセスしても、適切に index.htm lにフォールバックされ、エラーが発生しない様になっています。

４．ルート以外の場所でFlutterアプリをホストする

　ここでは、Flutterアプリをルート以外の場所にホスティングする方法について触れています。
通常、Flutterアプリはルートディレクトリ（例: example.com/）にホスティングされますが、場合によっては（ルートではなく）サブディレクトリ（例: example.com/flutter_app/）にホスティングしたいことがあります。その際、以下の点に注意が必要です。

４-１．< base href = “/” > タグの更新

　アプリをサブディレクトリにホスティングする場合、web/index.htmlファイル内の< base href = “/” >タグを、アプリがホスティングされる正しいパスに更新する必要があります。
（例えば、アプリが　my_app.dev/flutter_app　にホスティングされる場合、< base href = “/flutter_app/” > の様に変更します。）
これにより、アプリ内で使用されるすべての相対パスが、正しいサブディレクトリを基準に解釈されるようになります。

４-２．リリースビルドでの相対パスの扱い

　リリースビルドでは、相対的な < base href > タグもサポートされていますが、これは、ページが提供される完全なURLを考慮する必要があります。
（例えば、/flutter_app/ や /flutter_app/nested/route といったパス毎に、各々の相対的な < base href > タグは異なります。
具体的には、< base href = “.” / > （現在のディレクトリ）や、< base href = “..” / > （親ディレクトリ）、< base href = “../..” / > （さらにその上のディレクトリ）等が使われる場合があります。

コメントを残す