ウェブサーバー上にある複数のテキストファイルを正規表現で一括検索・置換テスト。 WebDAV , VScode 使用。

一括検索・一括置換

ウェブサーバー（レンタルサーバー）上に保存してある、複数のテキストファイル（ txt , html , php , js , css , htaccess ）の中身の文字を、一括で検索して置換まで行うことが出来れば便利そうだと思い、 WebDAV と VScode の組み合わせで試してみました。

パソコンとウェブサーバーを WebDAV 接続しているイメージ図。 — 今回の投稿のイメージ図です。 Windows10 パソコンに、 Visual Studio code （略 VScode ）がインストールされています。パソコンとウェブサーバーは WebDAV 接続の設定を行ってあります。 VScode から、ウェブサーバー上のフォルダを直接開いて、各種ファイル内のテキストを正規表現を使用して検索、置換を行うテストです。

目次まで戻る

レンタルサーバーの種類

今回のテストで使用したウェブサーバーは、「ロリポップ！レンタルサーバー」です。ロリポップ！レンタルサーバーには、 WebDAV （ウェブダブ）の機能がついているので、 Windows パソコンから WebDAV 接続の設定を行えるようです。レンタルサーバー側で WebDAV に対応していないと WebDAV 接続ができないのかもしれません。

ロリポップ！レンタルサーバー | 利用実績170万人突破！無料SSLあり: https://lolipop.jp/

WebDAV / 機能一覧 / サービス - レンタルサーバーならロリポップ！: https://lolipop.jp/service/specs/webdav/

目次まで戻る

WebDAV とはなにか？

WebDAV （ウェブダブ）は、 FTP ソフトを使用しないでも、 Windows のエクスプローラーから、ウェブサーバー上のファイル、フォルダ操作を行うことのできる機能のようです。

今回のテストの前に、私の使用している Windows10 パソコンでロリポップ！レンタルサーバーへの WebDAV 接続の設定をしておきました。

Windows10 での WebDAV 設定の方法については、以前、当ブログに投稿をしたことがありました。良ければ以下のリンクをご覧ください。

Windows10 で WevDAV （ウェブダブ）接続。ロリポップ！レンタルサーバーの場合。 – pulogu.net: https://pulogu.net/blog/020-computer/windows/windows-10-webdav-connection-rental-server/

目次まで戻る

VScode とはなにか？

VScode は Visual Studio code （ビジュアルスタジオコード）の略称で、マイクロソフトが提供している、高機能のテキストエディタのようなアプリケーションのようです。フリー（無料）のソフトで、私もよく使用しています。正規表現（せいきひょうげん）も使えるので便利です。

Visual Studio Code - Code Editing. Redefined: https://code.visualstudio.com/

Visual Studio Codeの使い方、基本の「キ」 (1/6)：特集：Visual Studio Code早分かりガイド - ＠IT: http://www.atmarkit.co.jp/ait/articles/1507/10/news028.html

VScode についても、以前、当ブログに投稿したことがありました。こちらも良ければご覧ください。

無料のテキストエディタ Visual Studio Code – pulogu.net: https://pulogu.net/blog/020-computer/application/free-text-editor/

今回は、 VScode から WebDAV 接続されたウェブサーバー上のフォルダを開いて、複数のテキストファイルの中の文字の検索と置換をテストして見たいと思います。

目次まで戻る

実際にテスト

それでは、実際にテストをしてみたいと思います。Wiondows10 で WebDAV 接続の設定が完了しているものとして説明を書いています。以下 Step.1 - 6 までありますが、良ければご覧ください。

Step.1

まずは、 WebDAV 設定を完了しておきます。以下の画像は、 Windows10 のエクスプローラーの「PC」階層の画面です。 WebDAV 接続の設定が完了していると、この PC 階層の下の方にある、「ネットワークの場所」の中に、 WebDAV 設定したときの名前で、フォルダーのショートカットが作成されていると思います。

Step.2

VScode （Visual Studio code）を起動して、「ファイル」 > 「フォルダーを開く」をクリックします。そうすると、フォルダーの選択画面が表示されるので、 Step.1 で見た「PC」階層の中の WebDAV フォルダーのショートカットを選択してみます。

VScode の「フォルダーを開く」コマンド実行。 — VScode （Visual Studio code）の「フォルダーを開く」コマンド。

Step.3

"VScode" のエクスプローラーに、ウェブサーバー上にある、フォルダ、ファイルの一覧が表示されています。今回のテストでは「test-webdav-vscode」という名前のフォルダを開いたので、「test-webdav-vscode」以下のフォルダ、ファイルの一覧が表示されています。

VScode のエクスプローラー。 — VScode のエクスプローラーに、ウェブサーバー上のフォルダ、ファイルの一覧が表示されている。

開いたフォルダは、以下のような構成になっています。「test-webdav-vscode」フォルダの直下に「folder1」「folder2」フォルダがあり、更にその中に、 htaccess , css , html , js , php , txt の各種ファイルを格納してあります。

test-webdav-vscode
  folder1
    .htaccess
    file.css
    file.html
    file.js
    file.php
    file.txt
  folder2
    .htaccess
    file.css
    file.html
    file.js
    file.php
    file.txt

htaccess , css , html , js , php , txt の各ファイルには、全て同じ、以下のテキストが入力されています。次のステップで、このテキストの検索、置換をしてみたいと思います。

ABCDE
12345
ABCDE
12345

Step.4

VScode > 「編集」 > 「複数のファイルで置換」をクリックしてみます。

VScode の「複数のファイルで置換」コマンド実行。 — VScode の「編集」 > 「複数のファイルで置換」コマンドの画面です。

Step.5

そうすると、検索、置換のキーワード入力の画面が表示されると思います。

「.*」のボタンをクリックして選択状態にすると、正規表現での検索が使用できるようです。「.*」ボタンの選択を解除すれば、メモ帳で行うような検索、置換が行えます。
まずは、検索ワードを入力します。正規表現の書き方で (\d+) と入力してみます。「12345」の数字に一致する予定です。
置換ワードに [$1] と入力して Enter エンターキーを押してみます。 $1 には、 Step.2 の検索ワードの () で囲まれたパターンに一致する文字が代入されるので、「12345」が「[12345]」と置換される予定でいます。
次々と検索、置換候補が表示されてきます。「folder1」と「folder2」の複数のフォルダから検索されてきているようです。このリストにある候補の一つ一つがクリックできるようになっています。試しに一つクリックしてみます。
そうすると、「置換のプレビュー」タブが表示されて、検索結果と置換結果の比較が行えます。
このボタンをクリックすると、 Step.4 のリストの結果を個別に置換していくこともできるようです。
このボタンですべて置換できるようです。