WordPress | WebとかIoTのブログ

WordPress用のコーディング環境整備方法(with VSCode)
複数人での開発する上で、タブやブラケットなどのコーディングポリシーが曖昧だと、Pull Requestなどで差分をチェックする際に余計な差分が出てしまったり、それにより一貫性のないコードが増えていくという悪循環が生まれてしまうといった問題が発生してしまいます。

最近WordPressのオリジナルテーマを制作する案件で複数人での開発を行う機会を得たため、どのようなガバナンスの方法があるのかを話し合ってみることにしました。その内容を記事化します。

コード整備の方法

コードベースの一貫性を保つための仕組みを作成する方法として、一般的に次のような方法が挙げられます。

なお、上に位置するものはシステム化の度合いが高い方法であるという並び順になっています。
- Formatterの利用
  - 例：Prettier
- Linterの利用
  - 例：ESLint, JSLint, PyLint
- 静的コード解析ツールの利用
  - 例：SonarQube
- CI/CDツールの利用
  - 例：PR作成時に規定のルールに沿っているかチェックしてfeedbackする
- コードレビュー
  - GitHub、GitLab、Bitbucket
- ペアプログラミング
- ドキュメンテーション
  - 例：コーディングルールの策定
どれを使うべきなのか

色々な方法がある中で、どういう観点でどれを選択するのがよいのでしょうか。いくつかの問いや注目すべきポイントを挙げてみます。
- あなたのチームで重要なことは何でしょうか
  - Quality
  - Cost
  - Delivery
- 例えば、今回の我々のチームに当てはめると、予算は潤沢とまでは言えず、スピード感ある対応が求められます。となると、Costがかけられず、Deliveryを優先せざるを得ないならQualityは最小限というバランスを取るべきでしょう。なお、これは悪いことではないと筆者は考えます。「最小限」だけチームで定めましょう。
  - 空白とかのポリシーだけ定めて、あとはプルリクで解決とか、カットオーバー（納品・公開）できてから振り返るのでも全然いいのではないか？
    
    空白だけでも定めたほうがよいと思った理由は、差分が分かりづらくなること
気になること

どの方法を取るべきかの合意が取れたところで、一旦立ち止まって考えるべきことがあります。それは本当に実現性があるのでしょうか？
- FormatterやLinterは各メンバーのエディタ設定に依存するため、本来守るべき規約に沿っていないコードがコミットされうることの回避は難しい
  - CI/CDツールでLinterを利用してエラーを検出する、というのは良さそう
- Formatterが期待動作しないことで全体の進捗が犠牲になる場合がある
  - コードで管理することで防げるのでは？
WordPressにおける開発で注意すべき点は次の通り

大まかな方法が固まってきたところで、WordPressにフォーカスしたやり方を考えていきました。結論、WordPressのコーディング規約をベースにし、その上で納品先のコーディングルールに合わせてアジャストするべきでしょう。
- 納品先のコーディングルール
- WordPressの標準コーディングルール（CSS/HTML/JavaScript/PHP）
  - WordPress コーディング規約 – Japanese Team https://ja.wordpress.org/team/handbook/coding-standards/wordpress-coding-standards/
コーディングルール作成観点

WordPressにフォーカスするという合意は得られた上で、それでもチームでやりたいスタイルを追求すべきでしょう。というのも、別にWordPressコアのコードベースにコミットするわけではないのですから、チームがやりたい方法を多少取り入れても問題はないばかりか、モチベーションの維持に良い作用が期待できるでしょう。

今回はこのような点について話し合ってみました。
1. インデントスタイル：タブを使うか、スペースを使うか。また、何文字分のスペースをインデントに使用するか。
2. 命名規則：変数、関数、クラスなどの命名についてのルール。キャメルケース、スネークケースなど。
3. コードの長さ：一行の文字数や、一つの関数・メソッドあたりの行数、クラスあたりのメソッド数など。
4. コメント：コメントの書き方、また必要な場合と必要でない場合の区別。
5. コードの構造：クラスや関数の設計、モジュールの分割、パッケージ構造など。
6. エラーハンドリング：例外をどのように扱い、どのように報告するか。
7. テスト：単体テストや統合テストの範囲と方法。
8. ドキュメンテーション：関数やクラスの説明をどの程度詳しく書くか。
9. 使用言語の特性：特定の言語の特性をどの程度使用するか。たとえば、Pythonのリスト内包表記やJavaScriptの三項演算子など。
10. ユニットテストと統合テストの範囲：どの部分に対してユニットテストを書くべきか、どの部分に対して統合テストを書くべきか。
11. コードの再利用：コードを再利用するための最低限の要件。
12. データ構造とアルゴリズムの選択：特定の状況下でのデータ構造とアルゴリズムの選択。
13. ソースコードのレイアウト：ブレース（{}）の位置、空行の使用など。
ちなみに、我々のチームでは、意外と、タブじゃなくて空白スペースにしたい・・という意見が強くて驚きでした。これは一番意見が分かれたところです。

おすすめ

さて、色々とここまでで目線合わせがかなり進みました。

最後に、ディスカッションの中で興味深い話が出ましたのでリストアップしておきます。読者の参考になれば幸いです。
- CIでLinterを走らせる方法がある
  - actionsで、pushされた時に、npm commandsとかで、linterを実行する
- 言語ごとにコーディング規約、ツールの導入難易度が異なる
  - Goとかは容易、PHPは難あり
  - コーディング規約自体のゆらぎ
- WordPressのコーディングルールについて
  - 日本人向けには少し合わない部分もある
  - 非常に多くの人が関わる
- PHP Standards Recommendations – PHP-FIG https://www.php-fig.org/psr/
  - FIGというワーキンググループに参加している団体で認識合わせするためのものなので、PHPユーザ全体をメインターゲットにしている訳では無い
- WordPress公式テーマの利用
- WordPressの案件には是非コーディング規約を導入してください！ – Qiita https://qiita.com/yousan/items/35e64ba6492e9c459c12#composerでのphpcswpcsphp-compatibilityのインストール
- Airbnbのコーディング規約、理由とか実例が充実しててよい
  - Airbnb JavaScript スタイルガイド() { | javascript-style-guide https://mitsuruog.github.io/javascript-style-guide/
- コメントを書きましょう
- 名書「Readable Code」読みましょう
hirobel

7月 12, 2023

Programming, WordPress, 勉強会
ブロックテーマを作成してみる＠勉強会2023/5/30
はじめに

WordPressは「テーマ」を利用してサイト全体のデザインやレイアウトを管理できますが、「ブロックテーマ」を利用すると、Gutenbergエディタを生かしてより効率的なサイト編集を行うことができます。

この勉強会では、実際にミニマムなブロックテーマを作成する方法について取り上げました。

まとめ

やったこと

Create Block Themeプラグインのインストールと有効化

まずはCreate Block Themeプラグインを導入。

Create Block Theme

WP Multibyte Patchプラグインのインストールと有効化

必須ではないですが、マルチバイト対応のプラグインも入れます。

WP Multibyte Patch

固定ページのテンプレートを作ってみる

Create Block Themeプラグインが有効化されると、外観メニュー内に項目が出るためクリックして作成ページへ遷移します。

作成ページで空白のテーマを作成するoptionを選び、テーマ名を決定して「生成」をsubmitします。

するとテーマメニューにブロックテーマが生成されます。

生成されたテーマの「カスタマイズ」を選択し、編集画面へ遷移します。

編集画面はこのようになっています。

左ペインのメニューから「＋」ボタンを押すことでテンプレートを追加したりすることができます。

今回は個別投稿を追加してみました。

追加した段階では、内容はブランクになっていますので、個別投稿としてふさわしい表示をするために、投稿タイトルなどのブロックを追加します。これにより動的に内容がセットされます。

オリジナルのcssを管理画面とフロント画面（ユーザ向け画面）の両方へ適用する

空のブロックテーマを作成した段階では、ファイル構成は次のようになっています。

style.cssに記述した内容を管理画面（ダッシュボード）とフロント画面の両方へ反映することで、実際の表示を想像しながら編集することができるようになります。

例えば次のようにstyle.cssの編集とfunctions.phpの追加を行います。
```
/*
Theme Name: 20230530
Theme URI: 
Author: 
Author URI: 
Description: 
Requires at least: 5.8
Tested up to: 6.2
Requires PHP: 5.7
Version: 0.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 20230530
Tags: 
*/
h1,
h2,
h3 {
  color: blue !important;
}
```
```
<?php

function mytheme_support() {

	// コアブロックの追加分のCSSを読み込む
	add_theme_support( 'wp-block-styles' );

	// テーマのCSS（style.css）をエディターに読み込む
	add_editor_style( 'style.css' );

}
add_action( 'after_setup_theme', 'mytheme_support' );

function mytheme_enqueue() {

	// テーマのCSS（style.css）をフロントに読み込む
	wp_enqueue_style( 
		'mytheme-style', 
		get_stylesheet_uri(),
		array(),
		filemtime( get_theme_file_path( 'style.css' ) )
	);

}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue' );
```
これにより、次のように両方へ見出しの色が適用されて一致することがわかります。

今回は以上です。
hirobel

5月 30, 2023

WordPress, 勉強会
スタティック（静的）なサイトをWordPress化する方法 1/2
はじめに

ただ空っぽなWordPressのサイトを作ってみるだけ

対象のサイトを組み込む部分は次回。

やってみたこと

WordPress化対象のサイトコンテンツを取得
- コンテンツをダウンロード
  - 【著作権表示なし・商用可】無料ホームページテンプレート｜フリーホームページ.net https://free-hp.net/
  - 「飲食店向けテンプレート」をダウンロードしてみる
WordPressの最小環境を構築
- wp-envのインストール
```
$ cd /path/to/workdir
$ mkdir wordpress
$ npm init
$ npm install @wordpress/env --save
```
- wp-envの起動
```
$ npx wp-env start
```
- ブラウザでアクセス（http://localhost:8888）
こんな感じで動作が確認できる
- ブラウザでアクセス（http://localhost:8888/wp-admin）
最小テーマの作成
```
$ code index.php
$ code style.css
$ code .wp-env.json
```
>index.php
```
hoge
```
>style.css
```
@charset "UTF-8";
/*
Theme Name: sample-theme
*/
```
>wp-envの設定ファイル
```
{
  "themes":["."]
}
```
WordPressならではのコンテンツを追加
- WordPressは、テンプレートファイルに、登録データを対応付けて、動的にページを表示する
- とあるロジックに基づいて、利用するテンプレートを決めている。
  - https://ja.wordpress.org/team/handbook/theme-development/basics/template-hierarchy/#%E5%A4%96%E8%A6%B3%E5%9B%B3
- ロジックの詳細はこちらに書いてある
  - https://ja.wordpress.org/team/handbook/theme-development/basics/template-hierarchy/#%E6%A6%82%E8%A6%81
最後に
- とりあえず最小構成をつくって、いじって、どう変わるかを試してみるとよい
- できれば、テンプレート階層や表示ロジックも把握しつつ試せるとよい
- 対象のサイトを組み込む部分は次回。
参考
- Theme Developer Handbook | WordPress Developer Resources https://developer.wordpress.org/themes/
  - テーマ開発の方法について書かれている
- 【著作権表示なし・商用可】無料ホームページテンプレート｜フリーホームページ.net https://free-hp.net/
  - 無料でWEBサイトのテンプレートが使えるので便利
hirobel

11月 8, 2022

WordPress, 勉強会
WordPressの基礎について学んでみた
3人でこのひとのyoutube動画をみて勉強しました。
- WordPressの基礎解説とデモサイト制作（連結講座#1） – YouTube https://www.youtube.com/watch?v=n_-hCvsyq3E
勉強した内容を、せっかくなので、備忘録と自分たちの学習記録的にブログ化しておくことにしました。なお、これは上記動画の劣化版焼き増しですので、動画を見たほうがいいと思います。
- WordPressのサイトを作るためにはどうすればいいか、というと。。。
- 前提知識として、必要なことを理解する
  - Webサイトが表示される仕組み
    PC/スマホ→サーバ→DB→サーバ→PC/スマホ
    サーバ上でPHP処理され、HTMLファイルを生成
    生成されたHTMLファイルをPC/スマホでブラウザが処理し、人が見えるようにする
    WordPressのサイトを作るためにはどうすればいいか
  - WordPressとは
    世界の3割以上のWebサイトがWordPress
    HTMLが直接いじれないひとでも、管理画面から簡単に更新可能にするもの
  - WordPressテーマについて
    WordPressの中に含まれる「テーマ」ディレクトリのファイル
    テーマを自作すれば、100%自由にデザインできる
    テーマを自作せずに、公開されているものを購入したりしてショートカットすることもできる
    経験上、カスタマイズが不要になるケースがほぼないので、自作する方がおすすめ
  - 投稿と固定ページについて
    投稿：ブログの1記事。増えていく前提のもの
    固定ページ：TOPページや会社紹介など、増えない前提のもの
- 既存WEBをWordPress化する方法は次の通り
  - 既存WEBサイトのファイル構成を確認
  - WordPressの基本的なファイル構成（ページとテンプレートファイルの対応付け）を理解
    TOP：front-page.php
    固定ページ：page.php
    投稿：single.php
    アーカイブ：archive.php
    カテゴリー：category.php
    タグ：tag.php
  - テンプレートファイルの基本的な構造を理解
    header.php
    コンテンツ(front-page.phpやpage.phpなど)
    footer.php
  - 既存ファイルをWordPressのテンプレートへ変換
    例）index.html→
    header.php
    front-page.php(index.php)
    get_xxxでheaderとfooterを読み込む
    footer.php
    テンプレートタグを利用して、テーマに合わせたURLを動的に取得できるようにする
  - 変換したファイルをサーバに配置
    配置先は wp-content/themes/<テーマディレクトリ>
  - 管理画面から配置したテーマを有効化
  - 固定ページ・投稿の記事を作成
    既存のページから、本文などを移す
hirobel

6月 7, 2022

WordPress
掲載するコンテンツの作り方（Gutenbergエディタの使い方編）

本記事では、WordPressを利用して、投稿ページを作る方法について書きます。

Gutenbergで、テキストだけの状態から、画像を入れてレイアウトした状態まで、イチから作り上げていく様子をご紹介します。

テキストだけ

テキスト＋画像＋レイアウト

とりあえずテキストだけ

ダッシュボードから[投稿]-[投稿一覧]-[新規追加]と辿り、新規ページを作成します。

投稿に書きたい文章を入力していきます。
段落内で改行を行う際はShift + Enterを入力します。

見栄えを確認するために、上部メニューから[プレビュー]-[新しいタブでプレビュー]を選択します

問題なければ、編集画面のタブに戻って上部メニューから[更新]を選択します。これで作成が完了しました。

見出しを入れてメリハリを付ける

先程の状態で、とりあえず必要な情報を入れることができました。

ただ、文章にメリハリがないので、ぱっと見で構造を掴むことができず、ちょっとストレスフルに感じる人がいるかも知れません。

見出しを入れて文章を区切るといいでしょう。

例えば、始めのサクションに「お知らせ」という見出しを入れる場合についてです。

「お知らせ」と入力し、入力箇所にポイントします。
それから[見出し]-[H2]と選択しH2(2段階目の見出し)の設定とします。

同様に見出しを作り、「アイスコーヒーの良コスパ」「お持ち帰り用の粉も売ってます」という区切りにしてみましょう。また、そちらはH4(4段階目の見出し)としましょう。

これで保存すれば、こんな見え方になります。

画像を入れて直感的な情報を追加する

ここまでで、読みやすい投稿を作ることができました。

しかし、テキストだらけなので単調なのと、テキストを読むまで雰囲気が伝わりにくいので、最後まで読みたい雰囲気にできないかもしれません。
そこで、画像を入れて直感的に情報の要点を伝えるのと、楽しげな雰囲気？になってもらいましょう。

左上の+ボタンを押してドロワーを表示し、そこから[画像]-[メディアライブラリ]-[ファイルをアップロード]-[ファイルを選択]と辿り、画像のダイアログを出します。

ダイアログで画像を選択して、「メディアの選択またはアップロード」の画面に遷移することを確認します。
挿入したい画像にチェックが入っていることを確認したら、続行を押します。
すると、投稿編集画面に画像が挿入されます。

ただ、このままでは画像の配置が左によっていると思います。
そこで、配置メニューから中央揃えを選択します。
これで画面の中央に収まってくれます。

横がそろったら縦をそろえます。
ドラッグメニューを利用して、位置を調整します、

次に、レイアウトします。
画像を左・テキストを右に表示させるようにしていきます。

まずは、レイアウトしたい位置をポイントして、カラムブロックを配置します。
ブロックは50:50を選択します。

カラムブロックができたら、左・右のエリアにそれぞれ画像とテキストをドラッグして配置します。
以下の動画を参考にしてください。

同様に、他のエリアも整えていきます。これで画像とテキストがバランス良くレイアウトされたページになりました。

アイキャッチ画像を入れる

ここまでで、読みやすいページができました。

ただ、このままでは記事一覧などから見た時に、アイキャッチ画像がセットされていないので、そもそも記事を読んでくれないかもしれません。

例えばこんな見え方になります。

メニューの右上から歯車アイコンを選択し、[投稿]-[アイキャッチ画像]と辿り「アイキャッチ画像」ダイアログを開きます。
ダイアログで画像を選択してください。

これで、以下のように魅力的なアイキャッチ画像がセットされた状態になります。

さいごに

本記事では、gutenbergエディタを利用して投稿を作成する具体的な方法を紹介しました。

ただ、紹介した機能はほんの一部ですので、ぜひ他のオプションも試して自分がやりたいことをやりつくしてみてください。

hirobel

6月 27, 2021

WordPress
掲載するコンテンツの作り方
本記事では、WordPressを利用して文章や画像などの「Webサイトの中身」を作る方法について書きます。

Webサイトは通常、たくさんのページで構成されます。
閲覧者が迷わずに目的のページにアクセスできるように、コンテンツを整理して、見やすくすることが重要です。

必要なページのリストアップ

まずはどんなページが必要かリストアップしていきます。
ここは以前の記事（）も参考にしてください。

例えば、コーヒー屋さんを例とすると、こんな情報が欲しいと考えられます。
- お店の名前
- 所在地
- メニュー・料金
- お知らせ
- 雰囲気
その上で、お店への問合せもできるといいですね。
ページ単位に分けるとするとこんな形が考えられます
- トップページ
  - お店の名前
  - 所在地
  - お知らせ（一部・タイトルとリンクのみ）
  - メニュー・料金
  - 雰囲気（一部・メインビジュアルのみ）
- お知らせ
  - キャンペーン情報
  - 店長・従業員ブログ
- ギャラリー
  - 雰囲気
    店内の写真
    店外の写真
- お問合わせ
すぐに伝えたい情報はトップページにあると良いでしょうし、まとめてみなくてもいい情報は別ページにしても良いでしょうからギャラリーやお知らせは別ページに。ただし、お知らせはタイトルやお店の写真は1枚くらいはすぐ伝えたい、ということでトップページに。
みたいなコンセプトです。

投稿か固定ページか決める

余談：フレームワーク

WordPressはCMSです。
CMSはフレームワークです。
フレームワークは、制限の代わりにショートカットさせてくれるものです。

例えば、誰かに「来年もよろしくね」を紙で伝えたいとしたとき、はがきを使うと思います。
これを1から作るのは大変です。

まず、郵便局がないと大量に裁けないのではがきのフォーマットを考える必要があります。その上で、必要な分生産する必要があります。
受け取る側もちょっと大変です。バラバラなフォーマットで来ると、何の目的で送られたものか、とか大きさがバラバラだからどこにしまおうとか管理がしづらかったりします。

なので、はがきというフォーマットに沿ってみんなが作るのが最適解になります。
少なくとも、その体裁に沿っていれば、最小限の労力でみんな目的を果たせるでしょう。

ただ、デメリットもなくはないです。例えば以下です。
- 情報を書く場所が決まっている
  - ゆえに同じような感じになるので目立たない
はがきもフレームワークだと思っています。
フレームワークは、一定の制限を課す代わりに処理をショートカットできるものと思っています。

で、WordPressですが、誰がどうつかっても「ブログになる」「悪くない」感じになります。
その代わりに「多少、めんどくさい」作りになっている面もあります。

一番の特徴が、WordPressのコンテンツは「投稿」か「固定ページ」かで作るという点です（他にも種類はありますがここでは割愛）

投稿と固定ページ

投稿は、ページが時系列で整理される機能です。
「クリスマスセール」とか「当日限定10%オフ」とか「お正月セール」とかで使うとよいでしょう。
新しい情報ほど前に、古い情報ほど後ろに掲載されます。

固定ページは、常に決まった位置で情報を掲載する機能です。
「トップページ」とか「ギャラリー」とか、あとは「メニュー詳細」とか作るとしたら固定ページがよいでしょう。

どちらで作るか

で、WordPressでコンテンツを作る場合、このどちらかしか選べません。どちらを使って作るか決めましょう。

コーヒー屋さんの例で言えば、お知らせが投稿、その他は固定ページとするのがよいでしょう。

how to

投稿の作り方は公式のドキュメントを参考にしてください
https://ja.wordpress.org/support/article/posts-screen/

固定ページの作り方も公式のドキュメントを参考にしてください
https://ja.wordpress.org/support/article/pages/
hirobel

6月 22, 2021

WordPress
ブログサイトのデザイン方法
ブログサイトを構築する際に、筆者が心がけていることについて述べます。
なお、この方法が常に正解というものではありません。あくまで筆者の経験に基づく一つの方法である、ということをご了承ください。

「誰のため？何のため」を明確にする

ブログサイトを構築するにあたって、想定する読者を明確にします。

読者に有益な情報が伝わるようにしたいと考えています。しかし、ターゲットが全年齢・全性別・全職種など万人向けというだけでは、逆に言うと誰もターゲットにしていないということになります。ですので、本当に有益な情報が得られる状況をできるだけ具体的にイメージします。

例えば、コーヒー屋さんのサイトを構築する場合には、以下のポイントを決めます
- 性別
- 年齢
- 収入
- 仕事
- 家族構成
- 住んでいるところ
- 趣味
なぜなら、コーヒー屋さんに来てもらうには、自分にとって「料金が値ごろ」で「住居から通える距離」にあり、「行きたい時間」に空いている必要があり、かつ「自分と近い年齢層がいても入りづらくない」「好きな雰囲気である」といったことがお店の選定条件になると考えられるためです。

そういった選定条件を満たす人物を想像した時に、関係するパラメータは主に上記のようになると思いました。

パラメータを考えたら、お店に来てほしい方をできる限り具体的に想像してみます。
- 性別：男
- 年齢：40代
- 収入：平均より高め
- 仕事：川崎駅前の会社に務めるサラリーマン
- 家族構成：妻と子供2人
- 住んでいるところ：23区内
情報を整理する

その方が「サイトを見つけてくれるか」「サイトを見てくれるか」「お店に来たいと思ってくれるか」を考えてデザインします。

まずは、サイトが伝えるべき情報を一覧します。例えば以下です。
- お店の名前
- 所在地
- メニュー・料金
- 雰囲気
- お知らせ
これをどういう順番で見せるかを考えます。

お店の名前と所在地は、サイトを開いて真っ先に見えるところに配置したいです。なぜなら、いくら料金や雰囲気が良くても、生活ゾーンから遠すぎては行きたいと思わなくなってしまいます。
次に、メニュー・料金を見えるところに配置したいです。
最後に、お知らせを配置したいです。

ただ、ここまではどちらかというと「新規のお客様」を想定した作りを考えてきました。リピーターのお客様にとってはどうでしょうか？
おそらく、お店の名前や所在地、メニューや料金・雰囲気は既に知っているので、お知らせを期待して見ていただく、あるいは見ていただきたいでしょう。

どちらを優先すべきかはお店のビジネスモデルにも寄りますが、フロー型のビジネスであれば新規のお客様は優先したいでしょうから、新規のお客様を中心として、リピーターのお客様にも配慮した構成、という優先度がいいのではないでしょうか。そうすると、以下の優先度で配置すべきだと考えます。
- お店の名前
- 所在地
- メニュー・料金
- お知らせ
- 雰囲気
構成を考える

伝えるべき情報が整理できたら、画面レイアウトを考えます。

まずは、「ワイヤーフレーム」で考えてみます。

以下のように、あえて色などの情報を極力排除し、構成だけを突き詰めて考えます。

作る

コンテンツを作り込んでいきます。

このサイトでは、今後主にWordPressを使ったコンテンツの構築方法について紹介していく予定です。

さいごに

今回は、カフェと例とした、シンプルなシングルページのデザイン方法についてご紹介しました。

企業サイトや、ECサイトなど、規模の違うサイトではまた違った設計になると思いますが、今回の例が読者の方の参考になれば幸いです。
hirobel

6月 15, 2021

WordPress