kotaro Money Blog

**FTP（File Transfer Protocol）**は、インターネット上でファイルを転送するための標準的なプロトコルです。

ウェブサイトのファイルをアップロードしたり、ダウンロードしたりする際に使用します。

FTPクライアントというソフトウェアを使って、ローカルコンピュータ（あなたのMac）とリモートサーバー（エックスサーバー）間でファイルをやり取りします。

FTPクライアントの選択とインストール

今回は、FileZillaという無料で信頼性の高いFTPクライアントを使用します。

MacでもWindowsでも使えて信頼性の高い無料のソフトです。

FileZillaのダウンロード

1. 公式サイトにアクセス: FileZilla公式ダウンロードページ にアクセスします。
2. 適切なバージョンを選択:
   • 「FileZilla Client」のセクションで、Macの場合は、macOS用のダウンロードリンクをクリックします。
3. インストーラーのダウンロード:
   • ダウンロードが自動的に始まらない場合は、手動でダウンロードリンクをクリックしてください。

FileZillaのインストール

1. ダウンロードしたファイルを開く:
   • ダウンロードフォルダ（通常は「ダウンロード」フォルダ）に移動し、FileZilla_x.x.x_macos-x86.app.zip（バージョンによって異なります）をダブルクリックして解凍します。
2. アプリケーションフォルダに移動:
   • 解凍後、FileZilla.appが生成されます。このファイルを「アプリケーション」フォルダにドラッグ＆ドロップします。
3. FileZillaの起動:
   • 「アプリケーション」フォルダからFileZilla.appをダブルクリックして起動します。

エックスサーバーのFTPアカウント情報の確認

FileZillaを使用してエックスサーバーに接続するには、FTPアカウント情報（ホスト名、ユーザー名、パスワード、ポート番号）が必要です。

これらの情報はエックスサーバーの管理パネルから確認できます。

エックスサーバーの管理パネルにログイン

1. エックスサーバーのログインページにアクセスします:
   • エックスサーバー ログインページ
2. ログイン情報を入力:
   • サーバーパスワードとサーバーIDを入力して「ログイン」をクリックします。

FTPアカウント情報の確認

1. サーバーパネルにログイン後:
   • 「サーバー情報の確認」または「FTPアカウントの設定」などのセクションを探します。
2. FTP情報を確認:
   • ホスト名: 通常はftp.yourdomain.comやサーバーのIPアドレスです。ユーザー名: FTPアカウントのユーザー名。パスワード: FTPアカウントのパスワード。ポート番号: 通常は21です。

FileZillaでエックスサーバーにファイルをアップロード

以下の手順で、FileZillaを使用してエックスサーバーに接続し、ファイルをアップロードします。

FileZillaの設定

1. FileZillaを起動します。
2. クイック接続セクションに移動します（画面上部）。
3. 以下の情報を入力します:
   • ホスト: エックスサーバーから取得したFTPホスト名（例: ftp.yourdomain.com）。
   • ユーザー名: FTPアカウントのユーザー名。
   • パスワード: FTPアカウントのパスワード。
   • ポート: 21（通常のFTP）または22（SFTP、推奨される場合）。
4. クイック接続をクリックします。

ファイルのアップロード

1. 接続が成功すると、FileZillaの画面が2つに分かれます。
   • 左側: ローカルコンピュータ（あなたのMac）のファイル。
   • 右側: リモートサーバー（エックスサーバー）のファイル。
2. ローカル側でアップロードするファイルを探す:
   • 例: あなたが作成したimage_converter_appフォルダ内のpkgとstaticディレクトリ。
3. リモート側の適切なディレクトリに移動:
   • 通常、WordPressのファイルはpublic_htmlフォルダ内にあります。
   • public_html/wp-content/themes/your-theme/内に新しいフォルダ（例: image_converter_app）を作成します。
4. フォルダの作成方法:
   • リモート側のディレクトリツリーを右クリックし、「ディレクトリの作成」を選択します。
   • フォルダ名を入力（例: image_converter_app）し、「OK」をクリックします。
5. ファイルのアップロード:
   • ローカル側でimage_converter_appフォルダを開き、pkgとstaticディレクトリを選択します。
   • これらのフォルダをリモート側のimage_converter_appフォルダにドラッグ＆ドロップします。
   • アップロードが開始され、進行状況が表示されます。完了するまで待ちます。
   注意: 大量のファイルや大きなファイルをアップロードする際は、時間がかかる場合があります。アップロード中はネット接続が安定していることを確認してください。

接続の確認

1. リモート側にファイルが表示されるか確認:
   • アップロードが完了すると、右側のリモートファイルリストにpkgとstaticディレクトリが表示されます。
2. エラーの確認:
   • FileZillaの下部にエラーメッセージが表示される場合があります。エラーが表示された場合は、再度接続情報を確認し、必要に応じて修正してください。

エックスサーバーの設定方法

エックスサーバーのサーバーパネルにログイン

1. ブラウザを開き、エックスサーバーのサーバーパネルにアクセスします。

FTPアカウント情報の確認

1. サーバーパネルにログインしたら、メインメニューから 「FTPアカウント設定」 をクリックします。
2. FTPアカウント一覧が表示されます。既存のFTPアカウントを使用するか、新しいFTPアカウントを作成します。既存のFTPアカウントを使用する場合
   • 一覧から使用したいFTPアカウントを見つけます。アカウント名、ホスト名、ユーザー名、パスワードを確認します。
3. 新しいFTPアカウントを作成する場合
   1. 「FTPアカウントを追加」 ボタンをクリックします。必要な情報を入力します:
      • FTPアカウント名: 任意の名前（例: image_converter）。FTPパスワード: 強力なパスワードを設定します。アクセス先: サイトのルートディレクトリ（例: /public_html/）を指定。
      「追加」 ボタンをクリックしてアカウントを作成します。
   重要: 作成したFTPアカウント名とパスワードは安全な場所に保存してください。

必要なFTP情報の整理

以下の情報が必要です。事前にメモしておきましょう。

• ホスト名: 通常 ftp.yourdomain.com またはサーバーのIPアドレス
• ユーザー名: FTPアカウント名
• パスワード: FTPパスワード
• ポート番号: 通常 21

例:

• ホスト名: ftp.example.com
• ユーザー名: image_converter
• パスワード: your_secure_password
• ポート番号: 21

---

FileZillaの設定とサーバーへの接続

ステップ1: FileZillaで新しいサイトを設定

1. FileZilla を開いている状態で、メニューから 「ファイル」 > 「サイトマネージャー」 を選択します。
2. サイトマネージャー ウィンドウが開きます。
3. 新しいサイトの追加:
   • 左上の 「新しいサイト」 ボタンをクリックします。
   • 新しいサイトに名前を付けます（例: Xserver Image Converter）。
4. 接続情報の入力:
   • ホスト: 先ほど取得したホスト名を入力します（例: ftp.example.com）。
   • ポート: 21 と入力します。
   • プロトコル: FTP - File Transfer Protocol を選択します。
   • 暗号化: 明示的なFTP over TLSを使用する を選択します。
   • ログオンの種類: 通常 を選択します。
   • ユーザー: FTPアカウント名を入力します（例: image_converter）。
   • パスワード: FTPパスワードを入力します。
   注意: パスワードは他人と共有しないでください。
5. 設定の保存と接続:
   • 入力が完了したら、「OK」 をクリックします。
   • サイトマネージャー から設定したサイトを選択し、「接続」 ボタンをクリックします。

サーバーへの接続確認

1. 接続が成功すると、右側（リモートサイト） にサーバー上のファイルとフォルダが表示されます。
2. 左側（ローカルサイト） に、あなたのMac上のファイルとフォルダが表示されます。

接続に失敗した場合の対処

1. エラーメッセージの確認:
   • 接続が失敗すると、下部の 「メッセージ」 パネルにエラーメッセージが表示されます。
2. よくあるエラーと対処法:
   • 認証エラー: ユーザー名またはパスワードが間違っています。再度確認してください。
   • 接続タイムアウト: ホスト名やポート番号が間違っている可能性があります。再度確認してください。
   • TLSエラー: 暗号化設定がサーバーと一致していない可能性があります。設定を再確認してください。
3. 再試行:
   • 情報を再確認し、設定を修正した後、再度接続を試みてください。

---

ファイルのアップロード

ステップ1: WordPressテーマディレクトリの確認

1. リモートサイト（右側）のペイン で、WordPressテーマディレクトリ に移動します。通常のパスは以下の通りです：

アップロードしたファイルの配置場所

WordPressのテーマディレクトリ内にimage_converter_appフォルダを作成し、その中にpkgとstaticディレクトリを配置しました。これにより、ウェブサイト上でこれらのファイルにアクセスできるようになります。

ファイルのパス例:

public_html/
└── wp-content/
    └── themes/
        └── your-theme/
            └── image_converter_app/
                ├── pkg/
                │   ├── image_converter.js
                │   ├── image_converter_bg.wasm
                │   └── その他のファイル
                └── static/
                    ├── index.html
                    └── script.js

ブラウザからのアクセス確認

アップロードしたファイルが正しく配置されたか確認するため、ブラウザからアクセスできるかテストします。

アクセスURLの確認

index.htmlファイルにアクセスするためのURLは以下のようになります：

https://yourdomain.com/wp-content/themes/your-theme/image_converter_app/static/index.html

ドメインがexample.comで、テーマがtwentytwentyoneの場合：

https://example.com/wp-content/themes/twentytwentyone/image_converter_app/static/index.html

となります。

ブラウザでアクセス

1. ブラウザを開く（Safari、Chrome、Firefoxなど）。
2. アドレスバーに上記のURLを入力し、Enterキーを押します。
3. ページが正しく表示されるか確認します：
   • 「画像をJPEGに変換」というタイトルやドラッグ＆ドロップのエリアが表示されればOKです。
   注意: 初めてアクセスする場合、ブラウザがファイルの種類やセキュリティに関する警告を表示することがあります。その場合は、警告を無視してアクセスを続行してください。

まとめ

以上の手順で、FTPクライアント（FileZilla）を使用してエックスサーバーにファイルをアップロードし、ウェブサイト上でWebAssemblyを利用した画像変換ツールを動作させることができます。

以下にポイントをまとめます：

1. FTPクライアントのインストール:
   • FileZillaをダウンロード・インストールし、設定します。
2. FTPアカウント情報の確認:
   • エックスサーバーの管理パネルからホスト名、ユーザー名、パスワードを確認します。
3. FileZillaを使用して接続:
   • 入力した情報を基にエックスサーバーに接続し、ファイルをアップロードします。
4. ファイルの配置場所:
   • WordPressのテーマディレクトリ内にimage_converter_appフォルダを作成し、必要なファイルを配置します。
5. ブラウザからのアクセス確認:
   • アップロードしたindex.htmlにアクセスし、アプリケーションが正しく動作することを確認します。

補足:

• セキュリティ: FTPはデータを暗号化せずに送信するため、可能であればSFTP（SSH File Transfer Protocol）を使用することをお勧めします。エックスサーバーがSFTPをサポートしている場合、FileZillaで接続時にポート番号を22に設定し、SFTPを選択してください。
• パスの正確さ: アップロード後、ファイルのパスが正確であることを確認してください。特に、WordPressのテーマ名やディレクトリ名が正しいことが重要です。
• WordPressとの統合: 前回の回答で述べたように、WordPressのページにアプリケーションを埋め込むためのiframeやカスタムHTMLブロックを利用してください。これにより、ウェブサイトの一部として画像変換ツールを利用者に提供できます。