WordPressは、インターネット上で何百万ものウェブサイトを支える人気のコンテンツ管理システム（CMS）です。ユーザーフレンドリーなインターフェースと幅広いカスタマイズオプションを搭載しています。
WordPressサイトの作成には（繰り返しの手作業が伴うことを考えると）時間がかかることがあります。Kinstaでは、コントロールパネル「MyKinsta」を使ってこのプロセスを簡単に実行することができます。これにとどまらず、Kinsta APIの導入により、開発者に嬉しい、サイト作成ワークフローとカスタムインターフェースの開発も可能になっています。
今回の記事では、Kinsta APIを活用してWordPressサイトを作成する方法をご紹介します。また、Reactを使用して、MyKinstaを直接触ることなくWordPressサイトを作成する手順も扱います。
こちらがサイトビルダーアプリケーションのライブデモです。
Kinsta APIを理解する
Kinsta APIは、KinstaのWordPress専用マネージドホスティングを遠隔で操作することのできる便利な機能です。サイトの作成、サイト情報の取得、サイトのステータスの取得など、Kinstaが提供するサービスに関連する様々なタスクを自動化することができます。
APIを使うことで、WordPressサイトのセットアップが簡潔になります。KinstaのAPIを使用するには、MyKinstaに少なくとも1つのWordPressサイト、アプリケーション、またはデータベースのアカウントが必要です。また、APIを通してアカウントを認証し、APIキーを生成する必要があります。
APIキーを生成する方法は以下の通りです。
- MyKinstaに移動
- APIキーページに移動（「（客様の名前）」＞「企業の設定」＞「APIキー」）
- 「APIキーを作成」をクリック
- 有効期限を選択するか、「カスタム」を選択し「開始日」と「時間」を指定
- キーに固有の名前を付ける
- 「生成」をクリック
APIキーを作成したら、コピーして安全な場所に保管してください（一度しか表示されませんので、パスワードマネージャを使用して保管することをお勧めします）。複数のAPIキーを生成することができ、その結果は「APIキー」ページに一覧表示されます。APIキーを取り消す必要がある場合には、対象のAPIキーの横にある「アクセス取り消し」をクリックします。
Kinsta APIでWordPressサイトを作成する
APIキーの準備ができたので、Kinsta APIでWordPressサイトを作成してみましょう。これには/sitesエンドポイントを使用します。このエンドポイントには、次のデータを含むペイロードが利用できます。
- company：このパラメータは、MyKinstaの設定に表示される一意の企業IDです。WordPressサイトに関連付けられている会社を識別するのに利用できます。
- display_name：MyKinstaのサイト名と同じ表示名で、サイトを識別するのに有用です。MyKinsta内の概念として、WordPressサイトとWordPress管理画面の一時ドメインに使用されます（Kinsta APIでは、display_name.kinsta.cloudとdisplay_name.kinsta.cloud/wp-admin）。
- region：このパラメータでは、37箇所からウェブサイトのデータセンターの場所を選択できます。ターゲットとするユーザーに最も近い地域を選択することで、ウェブサイトのパフォーマンスと速度を向上させることが可能です（利用可能なリージョンはこちらをご覧ください）。
- install_mode：このパラメータは、WordPressのインストールのタイプを決定します。デフォルト値は「plain」で、通常のWordPressサイトをセットアップできます。他にも、新規インストール用の「new」や、特定の要件に応じたその他のモードがあります。
- is_subdomain_multisite：このブール値（true/false）は、WordPressサイトをサブドメインを使用するマルチサイトとして設定するかどうかを指定します。
- admin_email：このパラメータはWordPress管理者のメールアドレスを指定します。管理目的および重要な通知の受信に使用されます。
- admin_password：WordPress管理者ユーザーアカウントのパスワードを設定します。サイトを保護するために、安全なパスワードを選択してください。
- admin_user：WordPress管理ユーザーアカウントのユーザー名を設定します。WordPress管理画面にログインし、サイトを管理するために使用します。
- is_multisite：
is_subdomain_multisiteと同様に、このブール値によって、WordPressサイトをマルチサイトとして設定するかどうかを決定します。 - site_title：このパラメータはWordPressサイトのタイトルを表します。サイトの各ページの上部に表示され、後でいつでも変更することができます。
- woocommerce：このブール値は、WordPressサイト作成時にWooCommerceプラグインをインストールするかどうかを決定します。
- wordpressseo：このパラメータは、サイト作成時にYoast SEOプラグインをインストールするかどうかを決定します。
- wp_language：このパラメータには、WordPressサイトの言語/ロケールを表す文字列値を指定します（WordPressロケールの確認はこちら）。
各パラメータを理解したところで、Kinsta APIに送信するペイロードの例をご紹介します。
{
"company": "54fb80af-576c-4fdc-ba4f-b596c83f15a1",
"display_name": "First site",
"region": "us-central1",
"install_mode": "new",
"is_subdomain_multisite": false,
"admin_email": "[email protected]",
"admin_password": "vJnFnN-~v)PxF[6k",
"admin_user": "admin",
"is_multisite": false,
"site_title": "My First Site",
"woocommerce": false,
"wordpressseo": false,
"wp_language": "en_US"
}お好みのモードを使用して、Kinsta APIにPOSTリクエストを送信することができます。APIキーを設定するだけで簡単にWordPressサイトを作成できます。この例では、JavaScript Fetch APIを使用してみます。
const createWPSite = async () => {
const resp = await fetch(
`https://api.kinsta.com/v2/sites`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer <YOUR_KEY_HERE>'
},
body: JSON.stringify({
company: '54fb80af-576c-4fdc-ba4f-b596c83f15a1',
display_name: 'First site',
region: 'us-central1',
install_mode: 'new',
is_subdomain_multisite: false,
admin_email: '[email protected]',
admin_password: 'vJnFnN-~v)PxF[6k',
admin_user: 'admin',
is_multisite: false,
site_title: 'My First Site',
woocommerce: false,
wordpressseo: false,
wp_language: 'en_US'
})
}
);
const data = await resp.json();
console.log(data);
}上記のコードでは、JavaScript Fetch APIを使用して、Kinsta APIにPOSTリクエストを送信しWordPressサイトを作成しています。createWPSite関数が処理を担います。そして、関数内で、関連するデータを指定するかたちでFetchリクエストがKinsta APIの/sitesエンドポイントに送られます。
レスポンスは、resp.json()を使用してJSONとして解析され、結果がコンソールに記録されます。Kinsta APIを使用してWordPressサイトを作成するには、<YOUR_KEY_HERE>を実際のAPIキーに置き換え、ペイロードの値を調整し、createWPSite()を呼び出すようにしてください。
レスポンスは以下のようになります。
{
"operation_id": "sites:add-54fb80af-576c-4fdc-ba4f-b596c83f15a1",
"message": "Adding site in progress",
"status": 202
}Kinsta APIで操作を監視する
Kinsta APIでサイト作成を開始したら、操作の進行状況を追跡することが重要です。これには、Kinsta APIの/operationsエンドポイントを使用します。
操作を監視するには、WordPressサイトの作成などの操作を開始するときに取得したoperation_idを使用します。/operationsエンドポイントにパラメータとしてoperation_idを渡します。
const operationId = 'YOUR_operation_id_PARAMETER';
const resp = await fetch(
`https://api.kinsta.com/v2/operations/${operationId}`,
{
method: 'GET',
headers: {
Authorization: 'Bearer <YOUR_TOKEN_HERE>'
}
}
);
const data = await resp.json();
console.log(data);上記のコードでは、/operationsエンドポイントにoperation_idを指定してGETリクエストを送信することで、操作に関する情報を取得しています。リクエストには認証用のAPIキーが含まれます。
APIから応答データを受け取ると、コンソールにログが記録されます。レスポンスからは、操作のステータスと進捗に関する情報が確認できます。例えば、WordPressサイトの作成がまだ進行中である場合、レスポンスは次のようになります。
{
"status": 202,
"message": "Operation in progress",
"data": null
}同様に、操作が正常に完了すると、以下のようなレスポンスになります。
{
"message": "Successfully finished request",
"status": 200,
"data": null
}Kinsta APIを使用してWordPressサイトを作成したら、今度はその動作を確認することができます。それでは、この機能を強化するために、さらに一歩進んで、ユーザーインターフェース（UI）を開発したいと思います。これにより、専門知識のない人であってもAPIの機能を活用できるようになります。
Kinsta APIでWordPressサイトを作成できるようにReactアプリケーションを構築する
始めに、Reactプロジェクトの構造をセットアップし、必要な依存関係をインストールする必要があります。Fetch APIまたはAxiosなどのHTTPリクエストライブラリを使用して、Kinsta APIをReactアプリケーションに統合します。
前提条件
このプロジェクトを進めるにあたり、HTML、CSS、JavaScriptの基本的な理解とReactにある程度精通していることが理想です。ここでの主な焦点はKinsta APIを活用することですので、この記事ではUIの作成やスタイリングの詳細については掘り下げません。
はじめに
プロジェクトのセットアッププロセスを効率化するために、スタータープロジェクトを利用します。以下のステップに従って進めてください。
1. GitHub でこちらのテンプレートを使ってGitリポジトリを作成します。「Use this template」＞「Create a new repository」を選択して、スターターコードをGitHubアカウント内の新しいリポジトリにコピーします。
2. リポジトリをローカルコンピュータにプルしてstarter-filesブランチに切り替えます。
git checkout starter-files3. npm installコマンドを実行して、必要な依存関係をインストールします。インストールが完了したら、npm run startを使ってローカルコンピュータ上でプロジェクトを起動できます。プロジェクトには http://localhost:3000/からアクセス可能です。
プロジェクトファイルを理解する
このプロジェクトのsrcフォルダ内には、componentsとpagesという2つの重要なサブフォルダがあります。componentsフォルダには、HomeページとDetailsページの両方で利用されるheaderやfooterなどの再利用可能なコンポーネントが含まれています。
このプロジェクトでは、スタイリングとルーティングはすでに完了しているので、HomeページとDetailsページのロジックを実装することに主眼を置きます。
Homeページには、Kinsta APIに渡されるさまざまなデータフィールドを収集するフォームがあります。このページからのレスポンスはlocalStorageに保存されます（ステータスをチェックする上で重要な操作IDを保存するのに、別の方法を利用することも可能です）。
Detailsページでは、操作IDがloaclStoageから取得され、操作のステータスを確認するためのパラメータとしてKinsta APIの/operationエンドポイントに渡されます。このプロジェクトでは、ステータスを断続的にチェックできるボタンを実装しています（このプロセスを自動化するには、setIntervalメソッドを利用できます）。
ReactでKinsta APIと対話する
ユーザーインターフェース（UI）が配置できたので、次のステップではHomeページでフォーム送信に関連する操作を処理し、Kinsta APIの/sitesエンドポイントにPOSTリクエストを送信します。このリクエストには、収集したフォームデータがペイロードとして含まれ、WordPressサイトの作成に使うことができます。
Kinsta APIとやり取りするには、企業IDとAPIキーが必要です。これらの認証情報を取得したら、Reactアプリケーションの環境変数として安全に保存します。
環境変数を設定するには、プロジェクトのルートフォルダに.envファイルを作成します。このファイルの中に、以下のコードを追加します。
REACT_APP_KINSTA_COMPANY_ID = 'YOUR_COMPANY_ID'
REACT_APP_KINSTA_API_KEY = 'YOUR_API_KEY'プロジェクト内でこれらの環境変数にアクセスするには、process.env.THE_VARIABLEという構文を使用します。例えば、REACT_APP_KINSTA_COMPANY_IDにアクセスするには、process.env.REACT_APP_KINSTA_COMPANY_IDを使用します。
Reactでフォームデータを取得する
Home.jsxファイルにはフォームがあります。フォームにロジックを追加してデータを取得し、送信されたときにそれを検証する必要があります。Reactアプリケーションでフォームデータを取得するには、コンポーネントとuseStateフックを使用します。これにより、各フォームフィールドの状態を作成し、ユーザーがデータを入力するたびにそれを更新することができます。
まず、useStateフックをファイルの先頭でインポートします。
import React, { useState } from 'react';次に、関数コンポーネント内の各フォームフィールドにstateの変数を設定します。たとえば、「サイトタイトル」の入力フィールドがある場合、siteTitleという変数を作成します。
const [siteTitle, setSiteTitle] = useState('');siteTitleは「サイトタイトル」入力フィールドの値を保持する変数であり、setSiteTitleは対応するstateを更新する関数です。
フォームフィールドをそれぞれの値に紐づけるには、valueとonChange属性を各入力要素に追加します。例えば、「サイトタイトル」入力フィールドは以下のようになります。
<input
type="text"
className="form-control"
value={siteTitle}
onChange={(event) => setSiteTitle(event.target.value)}
/>この例では、value属性がsiteTitle変数に設定され、入力フィールドが現在の値siteTitleを表示するようにしています。onChangeイベントハンドラはsetSiteTitle 関数に設定され、ユーザーが入力フィールドに入力するたびに、siteTitleが新しい値に更新されます。
各フォームフィールドに対してこのようなアプローチをとることで、必要なstateの変数を作成し、ユーザーがフォームを操作するたびにその内容を変更できます。これにより、フォームが送信されたときに入力された値に簡単にアクセスし、フォームデータを使ってさらなるアクションや検証を実行することが可能です。
これをすべてのフォームフィールドに対して行うと、Home.jsxファイルは次のようになります。
import Header from '../components/Header';
import Footer from '../components/Footer';
const Home = () => {
return (
<div className="app-container">
<Header />
<div className="container">
<div className="container-title">
<h1> className="title">Site Builder with Kinsta API</h1>
<p> className="description">
This is a React app that uses the Kinsta API to create WordPress sites, without needing to access MyKinsta dashboard.
</p>
</div>
<form>
<div className="form-container">
<div className="input-div">
<label>Display name</label>
<span>Helps you identify your site. Only used in MyKinsta and temporary domain</span>
<input type="text" className="form-control" />
<span> className='error-message'>Ensure this has more than 4 characters</span>
</div>
<div className="input-div">
<label> WordPress site title</label>
<span>Appears across the top of every page of the site. You can always change it later.</span>
<input type="text" className="form-control" />
<span> className='error-message'>Ensure this has more than 4 characters</span>
</div>
<div className="input-flex">
<div className="input-div">
<label>WordPress admin username</label>
<input type="text" className="form-control" />
</div>
<div className="input-div">
<label>WordPress admin email</label>
<input type="email" className="form-control" />
<span> className='error-message'>Ensure this is a valid email</span>
</div>
</div>
<div className="input-div">
<label>WordPress admin password</label>
<span>Ensure you remember this password as it is what you'll use to log into WP-admin</span>
<input type="text" className="form-control" />
</div>
<div className="input-div">
<label>Data center location</label>
<span>Allows you to place your website in a geographical location closest to your visitors.</span>
<select className="form-control">
<option> value=""></option>
{/* add options */}
</select>
</div>
<div className="checkbox-flex">
<div className="checkbox-input">
<input type="checkbox" />
<label>Install WooCommerce</label>
</div>
<div className="checkbox-input">
<input type="checkbox" />
<label>Install Yoast SEO</label>
</div>
</div>
<button> className='btn'>Create Site</button>
</div>
</form>
</div>
<Footer />
</div >
)
}
export default Home;useRefフックによるフォームフィールド検証の実装
Reactでフォームフィールドのバリデーションを実装する手順は以下の通りです。「Display name」と「WordPress admin email」フィールドのバリデーションを実装することに集中します。
まず、エラーの表示についてはuseRefフックを使って参照を作成し、エラーメッセージの表示を制御します。useRefフックをインポートし、各フィールドに必要な参照を以下のように作成します。
import { useRef } from 'react';
const displayNameRef = useRef(null);
const wpEmailRef = useRef(null);次に、フォームフィールドの対応するエラーメッセージ要素にこれを紐付けます。例えば「Display name」フィールドでは、エラーメッセージを保持するspanタグにrefを追加します。
<div className="input-div">
<label>Display name</label>
<span>Helps you identify your site. Only used in MyKinsta and temporary domain</span>
<input type="text" className="form-control" value={displayName} onChange={(e) => setDisplayName(e.target.value)} />
<span className='error-message' ref={displayNameRef}>Ensure this has more than 4 characters</span>
</div>同様に、「WordPress admin email」フィールドは以下の通りです。
<div className="input-div">
<label>WordPress admin email</label>
<input
type="email"
className="form-control"
value={wpAdminEmail}
onChange={(e) => setWpAdminEmail(e.target.value)}
/>
<span> className='error-message' ref={wpEmailRef}>Ensure this is a valid email</span>
</div>入力値をチェックし、エラーメッセージを表示するかどうかを決定するバリデーション関数を作成します。以下は「Display name」と「WordPress admin email」の関数です。
const checkDisplayName = () => {
if (displayName.length < 4) {
displayNameRef.current.style.display = 'block';
} else {
displayNameRef.current.style.display = 'none';
}
}
const checkWpAdminEmail = () => {
let regex = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;
if (!wpAdminEmail.match(regex)) {
wpEmailRef.current.style.display = 'block';
} else {
wpEmailRef.current.style.display = 'none';
}
}これらの関数は、対応する入力フィールドが変更されるたびに呼び出されます。そして、入力値をバリデーションの基準と比較し、エラーメッセージ要素のstyle.displayプロパティを操作してエラーメッセージの表示を行います。
もちろん、追加のバリデーションを実装したり、要件に応じてバリデーションロジックをカスタマイズしたりすることも可能です。
Reactでフォームから送信された情報を処理する
フォームの送信イベントを処理する際には、いくつかのタスクを実行する必要があります。まず、<form>要素にonSubmitイベントハンドラを付与します。createSite関数の内部で、event.preventDefault()を呼び出して、デフォルトのフォーム送信動作を防ぎます。これにより、プログラムで送信操作を処理できるようになります。
送信を続行する前にフォームデータが有効であることを確認するために、検証メソッドcheckDisplayNameとcheckWpAdminEmailを呼び出します。これらのメソッドにより、必須フィールドが指定された基準を満たしていることを確認できます。
const createSite = (e) => {
e.preventDefault();
checkDisplayName();
checkWpAdminEmail();
// Additional logic
};すべてのバリデーションがパスし、必須フィールドに有効なデータが含まれていると仮定して、APIレスポンスと表示名を保存するクリーンな状態を確保するために、localStorageをクリアします。
次に、fetch関数を使用してKinsta APIにAPIリクエストを行います。リクエストは、https://api.kinsta.com/v2/sitesエンドポイントへのPOSTメソッドとなります。必要なヘッダとペイロードをJSONで用意します。
const createSiteWithKinstaAPI = async () => {
const resp = await fetch(
`${KinstaAPIUrl}/sites`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
},
body: JSON.stringify({
company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,
display_name: displayName,
region: centerLocation,
install_mode: 'new',
is_subdomain_multisite: false,
admin_email: wpAdminEmail,
admin_password: wpAdminPassword,
admin_user: wpAdminUsername,
is_multisite: false,
site_title: siteTitle,
woocommerce: false,
wordpressseo: false,
wp_language: 'en_US'
})
}
);
// Handle the response data
};
ペイロードには、企業ID、表示名、リージョン、インストールモード、管理者メールアドレス、管理者パスワードなど、Kinsta APIで必要なさまざまなデータフィールドがあります。これらの値は、対応するstateの変数から取得されます。
APIリクエストを行った後、await resp.json()を使用してレスポンスを待ち、関連するデータを抽出します。操作IDと表示名で新しいオブジェクトnewDataを作成し、localStorage.setItemを使用してlocalStorage に格納することになります。
const createSiteWithKinstaAPI = async () => {
const resp = await fetch(
// Fetch request here
);
const data = await resp.json();
let newData = { operationId: data.operation_id, display_name: displayName };
localStorage.setItem('state', JSON.stringify(newData));
navigate('/details');
}最後に、createSiteWithKinstaAPI関数を呼び出して、ユーザーがフォームに入力してボタンをクリックすると、Kinsta APIを使用してWordPressサイトが作成されます。さらに、コードでは、Kinsta APIでの操作を追跡するために、ユーザーがdetails.jsxページにリダイレクトされる旨が述べられています。ナビゲーション機能を有効にするには、react-router-domからuseNavigateをインポートし初期化します。
補足）コード全体はGitHubリポジトリで公開しています。
Kinsta APIで操作ステータスチェックを実装する
Kinsta APIで操作のステータスをチェックするには、localStorageに保存された操作IDを使用します。この操作IDはJSON.parse(localStorage.getItem('state'))を使ってlocalStorageから取得し、変数に代入します。
操作ステータスを確認するには、/operations/{operationId}エンドポイントにGETリクエストを送信して、Kinsta APIに別のAPIリクエストを行います。このリクエストには、APIキーを含むAuthorizationなど、必要なヘッダが含まれています。
const [operationData, setOperationData] = useState({ message: "Operation in progress" });
const KinstaAPIUrl = 'https://api.kinsta.com/v2';
const stateData = JSON.parse(localStorage.getItem('state'));
const checkOperation = async () => {
const operationId = stateData.operationId;
const resp = await fetch(
`${KinstaAPIUrl}/operations/${operationId}`,
{
method: 'GET',
headers: {
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
}
}
);
const data = await resp.json();
setOperationData(data);
}レスポンスを受信したら、await resp.json()を使用して、レスポンスから関連データを抽出します。次に、setOperationData(data)を使用して、操作データの情報をもとにstateを更新します。
コンポーネントのreturn文では、operationData.messageを使用して操作メッセージを表示します。また、checkOperationを呼び出すことで、ユーザーが手動で操作ステータスをチェックできるボタンも用意しています。
さらに、操作ステータスが正常に終了した場合には、表示されるリンクを使ってWordPressの管理画面とサイト自体にアクセスすることができます。リンクはlocalStorageから取得したstateData.display_nameを用い生成されます。
<a href={`http://${stateData.display_name}.kinsta.cloud/wp-admin/`} target="_blank" rel="noreferrer" className='detail-link'>
<p>Open WordPress admin</p>
<FiExternalLink />
</a>
<a href={`http://${stateData.display_name}.kinsta.cloud/`} target="_blank" rel="noreferrer" className='detail-link'>
<p>Open URL</p>
<FiExternalLink />
</a>リンクをクリックすると、WordPressの管理画面とサイトのURLがそれぞれ新しいタブで開き、MyKinstaに移動することなくアクセスできます。
これで、オリジナルのアプリケーションから簡単にWordPressサイトを作成できるようになりました。
KinstaでReactアプリケーションをデプロイする方法
KinstaのアプリケーションホスティングにReactプロジェクトをデプロイするには、お好みのGitサービスにプロジェクトをプッシュする必要があります。プロジェクトがGitHub、GitLab、またはBitbucketのいずれかでホストされている場合、それを使ってKinstaへのデプロイに進むことができます。
リポジトリをKinstaにデプロイするには、以下の手順に従ってください。
- MyKinstaでKinstaアカウントにログインするか、アカウントを作成
- 左側のサイドバーで「アプリケーション」をクリックし、「サービスを追加」をクリック
- ドロップダウンメニューから「アプリケーション」を選択して、KinstaにReactアプリケーションをデプロイ
- 表示されたポップアップで、デプロイしたいリポジトリを選択（複数のブランチがある場合は、希望のブランチを選択し、アプリケーションに名前を付ける）
- 25のデータセンターから好きな場所を1つ選択（Kinstaにより自動的にアプリケーションのstartコマンドが検出される）
最後に、APIキーをGitサービスのようなパブリックホストで公開するのは安全ではありませんのでご注意ください。ホスティング時には、.envファイルで指定された同じ変数名と値を使用し環境変数として追加することができます。
アプリケーションのデプロイを開始すると、プロセスが開始され、通常は数分以内に完了します。デプロイが成功すると、https://site-builder-ndg9i.kinsta.app/ などのアプリケーションリンクが生成されます。
まとめ
この記事では、Kinsta APIを使用しWordPressサイトを作成し、APIをReactアプリケーションに統合する方法をご紹介しました。APIキーを安全に保管し、一般に公開してしまった場合には失効の上、新しいものを作成するようにしてください。
Kinsta APIは、WordPressサイトを作成するだけでなく、WordPressサイトやドメインなどの情報を取得するのにも使用できます。また、データベースやアプリケーションのようなKinstaの他のサービスにアクセスすることも可能です。
次にKinsta APIに追加してほしいエンドポイントや、Kinsta APIで次に構築してほしいものはありますか？コメント欄でお聞かせください。
コメントを残す