はじめに
これまでは、Webページを作成しているときは、絶対パスを使用していました。
理由は、相対パスは、使ってみて、難しかったからです。ソースファイルをあとで見ても、どこのパスだったのかが、すぐに思い出せないことでした。./や../をだとってゆくのが面倒なこともあります。
絶対パスならば、直感的にわかります。
しかし、多くのWebページを作成していると、どうしても同じソースファイルを移行もしたくなります。しかし、その都度、絶対パスの修正もしなければなりません。これが、結構手間で、また、修正ミスも多くなります。
これを解決する手段が相対パスであることはわかっていました。しかし、わかりずらかったため、手を付けていませんでした。
今回、とうとう、勇気を出して、再チャレンジしてみました。以下に、その時の顛末を記述します。
移行前のWebページの概要
このページのURLは、以下の通りです。
https://favorite.tecoyan.net./slim_2/index_ameba_simple.php?lnm=都はるみ
このslim_2フォルダー内のすべてのファイル(入れ子を含む)に、相対パスにする修正を加えました。
パスの変更箇所
実行部分のパスがすべて相対パスで書かれていれば、修正する箇所はありません。外部サイト参照やコメントなどには絶対パスの記述が残っていることもありましたが、実行には影響しません。
使用例(フォルダー毎の移行)
サイトのサブドメイン(ドメイン)が異なっていても、フォルダー毎(例 slim_2)移行すれば、問題なく動作します。
例えば、以下のようなサイト(サブドメイン、ドメインが異なるケース)があるとします。
サイトA https://favorite.tecoyan.net/slim_2/index_ameba_simple.php?lnm=都はるみ
サイトB https://jukebox.tecoyan.net/slim_x/index_ameba_simple.php?lnm=都はるみ
これは、サイトAのslim_2フォルダーの中身をそのまま、サイトBのsilm_xフォルダーに移行した例です。
サイトのサブドメイン名、ドメイン名が異なりますが、slim_2フォルダー下では、絶対パスは使用していない(外部参照は除く)ため、slim_xフォルダーへ移行しても問題なく動作します。
相対パスで書かれていれば、基本的には、どのサイトのどのフォルダーへそのまま移行しても、動作するはづです。但し、移行するフォルダーの外のフォルダーを参照するケースには注意が必要です。移行先のサイトに参照する外側のフォルダーがない場合はエラーになります。あくまでも移行するフォルダー内で参照するケースに相対パスは使用できますが、外側のケースはケースバイケースで対応します。
この移植性の高さを別の表現をすると、「花を別の花壇に移植して咲かせる」ようなものです。そのまま移植しても正常に動作します。
相対パスでなすべきこと
例 フォルダー構成
左側の黒枠で囲まれた部分が、slimフォルダーです。基本的に、このフォルダー内での参照を相対パスにします。この枠外にあるcssフォルダーなども相対パスで参照できますが、slimフォルダーだけの移行を考えるとそのcssフォルダーもslim内に取り込んだほうがベターです。
今回のテストで行いたいことは、このslimフォルダーだけを別のサブドメインのサイトへ移行することです。
今回は、「jukebox.tecoyan.net/slim_x/」フォルダーへ移行します。
FTPクライアントソフトを使って、サーバーへslimフォルダー毎、アップロードします。
次は、https://jukebox.tecoyan.net/slim_x/index_ameba_simple.php
をリクエストしてみます。(デフォルトで「喫茶店の片隅で」を再生します。)
見事に成功しました。
この画面は、slim_xフォルダーにある、index_ameba_simple.phpを起動したものです。jukeboxのサイトは単にslim_xフォルダーを追加しただけです。入れ物として借りただけです。
このように、相対パスにすると、移行が楽になります。
開発環境と本番環境
開発環境は、xamppで、ApacheとMySQL、Php環境を構築しました。本番環境は、レンタルサーバで構築しました。統合IDEは、Apache Netbeans 26を使用しています。
OSはwindows 10 Home editionです。Windows 11にしたいところですが、システム要件が厳しく、今のパソコンでは無理だとメッセージがでました。そのうち、要件をもう少し緩くするようなニュースも最近、流れているようなので、期待して待っています。
パスを相対にしたいきさつは、この開発環境で作成したソースコードをそのまま、本番環境へアップロードしたかったからです。これまでは、本番環境へアップロードするために、絶対パスを書き換えていました。相対にすれば、そのわずらわしさがなくなると考えたからです。しかし、これまでは、相対パスに変更すための頭の整理がうまくゆかず、パスの今の位置から、どう相対パスを書き換えたらいいのかが、いつもわけがわからなくなり、あきらめていました。今の位置の上と下のフォルダーにあるファイルの参照でこんがらがっていました。
しかし、いよいよ、決心を定めて取り組むことにしました。なんとか、相対パスで、動作することができました。
今回は3つのjavascriptファイルを修正しました。
・favoriteClassSimple.js
・gnplayer_simple.js
・main_simple.js
以上のファイルで、主に$.ajax()コールのurlのパスを相対にしました。ここでは、phpファイルでデータベースをアクセスしています。
あと、メインのindex_ameba_simple.phpにも多少変更する箇所がありました。ファイルの最後にある、<script type='module' src="./js/main_simple.js"></script>のところです。ここで、main_simple.jsを呼び出しています。
絶対パスを残しているところ
外部のサイトへリクエストを出すところは、絶対パスのままです。jQueryやwindow.open()を使用して、外部ページを表示するところです。
この辺は、フォルダー毎移行しても変更する必要がないとこです。
開発環境のフォルダーをそのまま、本番環境へアップロード
相対パスにしたことで、そのまま、アップロードしても問題なく本番環境でも動作することを確認しました。
同じslimフォルダーを使用したローカルとリモートサーバーで動作テスト
このslimフォルダーは、youtubeの動画を再生します。また、再生リストはそれぞれのサーバーのMYSQLデータべースから取得しています。
まず、何をテストするかですが、ローカルでは、次のURLを実行します。
URL http://localhost/favorite.tecoyan.net/slim/index_ameba_simple.php
リモートサーバーでは、ローカルのページから、window.open("https://favorite.tecoyan.net/slim/index_ameba_simple.php");のリクエストを出します。すると、タブにローカルと同様のページが開きます。
今回のテスト環境図
関連個所のパスを相対パスにしておくと、slimフォルダー毎、一括アップロードしてもそのままで、本番環境で動作します。
あとがき
最初は、エラーが相当出ましたが、ひとつずつ、こまめに修正してゆき、最終的には、エラーをなくし、相対パスに書き換えて、動作しました。
(テスト時の大前提)
これは、忘れやすいのですが、履歴のキャッシュはクリアしておきます。それから、テストを実行します。
相対パスの一番のメリットは、フォルダー毎、どこのサイトでも移行できることです。サイトのドメイン、サブドメインにかかわらず、フォルダーだけ移行すれば、どこにも、もってゆけます。そのフォルダー内のパスは、ドメイン、サブドメインを見ていないからです。フォルダー内に/images,/css,/js,phpファイルなどがあれば、webページを作成できます。
例えば、どのサイトにも共通のページを入れることができるので、ヘルプ機能に利用るとか、内容はサイトごとに異なるので、そこはカスタマイズ可能にしておくとか、使い方は、いろいろあると思います。
次の課題は、何をするか、検討中です。構想としては、やはり、webアプリの作成で一番苦労するところです。どこかというと、イベント関連で処理が複雑多岐にわたると、最適なリスナーの登録場所を見つけるのが大変です。どのタイミングで登録すれば、セレクターが用意されて登録可能になっているかとか、javascriptファイルが複数ある場合はimportの実行順序を間違いなく決めておくとかあります。
また、パス切れで、必要なデータが取得できない不具合については、過去のメンテナンスで、不用意に削除したフォルダーなどがあると、しばらくしてから、見つかる不具合です。このようなうっかりミスをなくすにはどうしたらいいかとかの課題もあります。一気に大幅なメンテナンスを行ったときによく発生します。その時の狭い視野で実施すると起こります。