Contents
- ブラウザのファイル管理
- FTPクライアントの選択とインストール
- FileZillaのダウンロード
- FileZillaのインストール
- エックスサーバーのFTPアカウント情報の確認
- エックスサーバーの管理パネルにログイン
- FTPアカウント情報の確認
- FileZillaでエックスサーバーにファイルをアップロード
- FileZillaの設定
- ファイルのアップロード
- 接続の確認
- エックスサーバーの設定方法
- エックスサーバーのサーバーパネルにログイン
- FTPアカウント情報の確認
- 必要なFTP情報の整理
- FileZillaの設定とサーバーへの接続
- ステップ1: FileZillaで新しいサイトを設定
- サーバーへの接続確認
- 接続に失敗した場合の対処
- ファイルのアップロード
- ステップ1: WordPressテーマディレクトリの確認
- アップロードしたファイルの配置場所
- ブラウザからのアクセス確認
- アクセスURLの確認
- ブラウザでアクセス
- まとめ
**FTP(File Transfer Protocol)**は、インターネット上でファイルを転送するための標準的なプロトコルです。
ウェブサイトのファイルをアップロードしたり、ダウンロードしたりする際に使用します。
FTPクライアントというソフトウェアを使って、ローカルコンピュータ(あなたのMac)とリモートサーバー(エックスサーバー)間でファイルをやり取りします。
ブラウザのファイル管理
ブラウザのファイル管理は、限定的な操作しかできず、大量のファイルを効率的にアップロード・管理するには向いていません。
そのため、FTPクライアントを使用することをお勧めします。
FTPクライアントの選択とインストール
今回は、FileZillaという無料で信頼性の高いFTPクライアントを使用します。
MacでもWindowsでも使えて信頼性の高い無料のソフトです。
FileZillaのダウンロード
- 公式サイトにアクセス: FileZilla公式ダウンロードページ にアクセスします。
- 適切なバージョンを選択:
- 「FileZilla Client」のセクションで、Macの場合は、macOS用のダウンロードリンクをクリックします。
- インストーラーのダウンロード:
- ダウンロードが自動的に始まらない場合は、手動でダウンロードリンクをクリックしてください。
FileZillaのインストール
- ダウンロードしたファイルを開く:
- ダウンロードフォルダ(通常は「ダウンロード」フォルダ)に移動し、
FileZilla_x.x.x_macos-x86.app.zip
(バージョンによって異なります)をダブルクリックして解凍します。
- ダウンロードフォルダ(通常は「ダウンロード」フォルダ)に移動し、
- アプリケーションフォルダに移動:
- 解凍後、
FileZilla.app
が生成されます。このファイルを「アプリケーション」フォルダにドラッグ&ドロップします。
- 解凍後、
- FileZillaの起動:
- 「アプリケーション」フォルダから
FileZilla.app
をダブルクリックして起動します。
- 「アプリケーション」フォルダから
エックスサーバーのFTPアカウント情報の確認
FileZillaを使用してエックスサーバーに接続するには、FTPアカウント情報(ホスト名、ユーザー名、パスワード、ポート番号)が必要です。
これらの情報はエックスサーバーの管理パネルから確認できます。
エックスサーバーの管理パネルにログイン
- エックスサーバーのログインページにアクセスします:
- ログイン情報を入力:
- サーバーパスワードとサーバーIDを入力して「ログイン」をクリックします。
FTPアカウント情報の確認
- サーバーパネルにログイン後:
- 「サーバー情報の確認」または「FTPアカウントの設定」などのセクションを探します。
- FTP情報を確認:
- ホスト名: 通常は
ftp.yourdomain.com
やサーバーのIPアドレスです。ユーザー名: FTPアカウントのユーザー名。パスワード: FTPアカウントのパスワード。ポート番号: 通常は21
です。
- ホスト名: 通常は
FileZillaでエックスサーバーにファイルをアップロード
以下の手順で、FileZillaを使用してエックスサーバーに接続し、ファイルをアップロードします。
FileZillaの設定
- FileZillaを起動します。
- クイック接続セクションに移動します(画面上部)。
- 以下の情報を入力します:
- ホスト: エックスサーバーから取得したFTPホスト名(例:
ftp.yourdomain.com
)。 - ユーザー名: FTPアカウントのユーザー名。
- パスワード: FTPアカウントのパスワード。
- ポート:
21
(通常のFTP)または22
(SFTP、推奨される場合)。
- ホスト: エックスサーバーから取得したFTPホスト名(例:
- クイック接続をクリックします。
ファイルのアップロード
- 接続が成功すると、FileZillaの画面が2つに分かれます。
- 左側: ローカルコンピュータ(あなたのMac)のファイル。
- 右側: リモートサーバー(エックスサーバー)のファイル。
- ローカル側でアップロードするファイルを探す:
- 例: あなたが作成した
image_converter_app
フォルダ内のpkg
とstatic
ディレクトリ。
- 例: あなたが作成した
- リモート側の適切なディレクトリに移動:
- 通常、WordPressのファイルは
public_html
フォルダ内にあります。 public_html/wp-content/themes/your-theme/
内に新しいフォルダ(例:image_converter_app
)を作成します。
- 通常、WordPressのファイルは
- フォルダの作成方法:
- リモート側のディレクトリツリーを右クリックし、「ディレクトリの作成」を選択します。
- フォルダ名を入力(例:
image_converter_app
)し、「OK」をクリックします。
- ファイルのアップロード:
- ローカル側で
image_converter_app
フォルダを開き、pkg
とstatic
ディレクトリを選択します。 - これらのフォルダをリモート側の
image_converter_app
フォルダにドラッグ&ドロップします。 - アップロードが開始され、進行状況が表示されます。完了するまで待ちます。
- ローカル側で
接続の確認
- リモート側にファイルが表示されるか確認:
- アップロードが完了すると、右側のリモートファイルリストに
pkg
とstatic
ディレクトリが表示されます。
- アップロードが完了すると、右側のリモートファイルリストに
- エラーの確認:
- FileZillaの下部にエラーメッセージが表示される場合があります。エラーが表示された場合は、再度接続情報を確認し、必要に応じて修正してください。
エックスサーバーの設定方法
エックスサーバーのサーバーパネルにログイン
- ブラウザを開き、エックスサーバーのサーバーパネルにアクセスします。
FTPアカウント情報の確認
- サーバーパネルにログインしたら、メインメニューから 「FTPアカウント設定」 をクリックします。
- FTPアカウント一覧が表示されます。既存のFTPアカウントを使用するか、新しいFTPアカウントを作成します。既存のFTPアカウントを使用する場合
- 一覧から使用したいFTPアカウントを見つけます。アカウント名、ホスト名、ユーザー名、パスワードを確認します。
- 新しいFTPアカウントを作成する場合
- 「FTPアカウントを追加」 ボタンをクリックします。必要な情報を入力します:
- FTPアカウント名: 任意の名前(例:
image_converter
)。FTPパスワード: 強力なパスワードを設定します。アクセス先: サイトのルートディレクトリ(例:/public_html/
)を指定。
- FTPアカウント名: 任意の名前(例:
- 「FTPアカウントを追加」 ボタンをクリックします。必要な情報を入力します:
必要なFTP情報の整理
以下の情報が必要です。事前にメモしておきましょう。
- ホスト名: 通常
ftp.yourdomain.com
またはサーバーのIPアドレス - ユーザー名: FTPアカウント名
- パスワード: FTPパスワード
- ポート番号: 通常
21
例:
- ホスト名:
ftp.example.com
- ユーザー名:
image_converter
- パスワード:
your_secure_password
- ポート番号:
21
FileZillaの設定とサーバーへの接続
ステップ1: FileZillaで新しいサイトを設定
- FileZilla を開いている状態で、メニューから 「ファイル」 > 「サイトマネージャー」 を選択します。
- サイトマネージャー ウィンドウが開きます。
- 新しいサイトの追加:
- 左上の 「新しいサイト」 ボタンをクリックします。
- 新しいサイトに名前を付けます(例:
Xserver Image Converter
)。
- 接続情報の入力:
- ホスト: 先ほど取得したホスト名を入力します(例:
ftp.example.com
)。 - ポート:
21
と入力します。 - プロトコル:
FTP - File Transfer Protocol
を選択します。 - 暗号化:
明示的なFTP over TLSを使用する
を選択します。 - ログオンの種類:
通常
を選択します。 - ユーザー: FTPアカウント名を入力します(例:
image_converter
)。 - パスワード: FTPパスワードを入力します。
- ホスト: 先ほど取得したホスト名を入力します(例:
- 設定の保存と接続:
- 入力が完了したら、「OK」 をクリックします。
- サイトマネージャー から設定したサイトを選択し、「接続」 ボタンをクリックします。
サーバーへの接続確認
- 接続が成功すると、右側(リモートサイト) にサーバー上のファイルとフォルダが表示されます。
- 左側(ローカルサイト) に、あなたのMac上のファイルとフォルダが表示されます。
接続に失敗した場合の対処
- エラーメッセージの確認:
- 接続が失敗すると、下部の 「メッセージ」 パネルにエラーメッセージが表示されます。
- よくあるエラーと対処法:
- 認証エラー: ユーザー名またはパスワードが間違っています。再度確認してください。
- 接続タイムアウト: ホスト名やポート番号が間違っている可能性があります。再度確認してください。
- TLSエラー: 暗号化設定がサーバーと一致していない可能性があります。設定を再確認してください。
- 再試行:
- 情報を再確認し、設定を修正した後、再度接続を試みてください。
ファイルのアップロード
ステップ1: WordPressテーマディレクトリの確認
- リモートサイト(右側)のペイン で、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
となります。
ブラウザでアクセス
- ブラウザを開く(Safari、Chrome、Firefoxなど)。
- アドレスバーに上記のURLを入力し、
Enter
キーを押します。 - ページが正しく表示されるか確認します:
- 「画像をJPEGに変換」というタイトルやドラッグ&ドロップのエリアが表示されればOKです。
まとめ
以上の手順で、FTPクライアント(FileZilla)を使用してエックスサーバーにファイルをアップロードし、ウェブサイト上でWebAssemblyを利用した画像変換ツールを動作させることができます。
以下にポイントをまとめます:
- FTPクライアントのインストール:
- FileZillaをダウンロード・インストールし、設定します。
- FTPアカウント情報の確認:
- エックスサーバーの管理パネルからホスト名、ユーザー名、パスワードを確認します。
- FileZillaを使用して接続:
- 入力した情報を基にエックスサーバーに接続し、ファイルをアップロードします。
- ファイルの配置場所:
- WordPressのテーマディレクトリ内に
image_converter_app
フォルダを作成し、必要なファイルを配置します。
- WordPressのテーマディレクトリ内に
- ブラウザからのアクセス確認:
- アップロードした
index.html
にアクセスし、アプリケーションが正しく動作することを確認します。
- アップロードした
補足:
- セキュリティ: FTPはデータを暗号化せずに送信するため、可能であればSFTP(SSH File Transfer Protocol)を使用することをお勧めします。エックスサーバーがSFTPをサポートしている場合、FileZillaで接続時にポート番号を
22
に設定し、SFTPを選択してください。 - パスの正確さ: アップロード後、ファイルのパスが正確であることを確認してください。特に、WordPressのテーマ名やディレクトリ名が正しいことが重要です。
- WordPressとの統合: 前回の回答で述べたように、WordPressのページにアプリケーションを埋め込むための
iframe
やカスタムHTMLブロックを利用してください。これにより、ウェブサイトの一部として画像変換ツールを利用者に提供できます。