この時間は伊藤ひろあきさんにワードプレス初心者が社内プロダクトで テーマ開発を始めてみたというタイトルでお話をいただきますWebデザイナーからXサーバーに入社され今ではほぼ1人でテーマ開発をされている という伊藤さんからこれからテーマ開発をしたいと考えている 方々に向けいろいろなことをお話しいただくセッションです主にクラシックエディターを作られている 今の立場でどんなことがあったのか伺っていきたい と思いますでは伊藤さんどうぞよろしくお願いいたします 拍手お願いいたしますはい それではセッションの方を 始めさせていただきます私がお話しする内容なんですけれどもワードプレス初心者が社内プロダクトでテーマ開発を始めてみたという お話をさせていただきますテーマ開発と言いましてもこういうテーマ自体がこういう構造 になっているみたいな話だったりCSS設計のお話だったりこういうコード を使うみたいなお話いろいろあると思うんですけれども 今回私はブロックの開発をメインでちょっとお話しさせていただきます よろしくお願いいたしますまず自己紹介させていただきます 今回私 ワードキャンプ初めてきましたそして登壇というものも人生で初めて です非常に緊張してますが 新たな組みを持っていただけると嬉しいです 簡単に経歴の方をお話しさせて いただくと私2022年までウェブ制作会社でウェブデザイナー をしておりました コーディングだったりあとワードプレスのテーマ を使ってお客様のウェブサイトを作るというお仕事をしたりあと メニアのブログの記事を編集したりいろんなことをやっておりました そこから2022年から現在までエクスサーバー株式会社で ワードプレステーマのエクスライトというテーマを開発しております エクスサーバーといえばサーバーのイメージが強いと思うんですけれども 私は入社してからずっとテーマをひたすら作り続けてまして ちょっと会社とは離れてる感じは感じてます 趣味なんですけれども 基本的に引きこもりでずっと家でゲームしてるタイプ なんですけれども たまに外に出て音楽イベントの主催をしたりしてます Twitter という エクスのアカウントがこの広脇アンダースコア2つ 糸という名前でアカウントございます よくこういう猫のアイコン 使っておりますので もし見かけたらフォローしていただけると嬉しい です 今回のセッションの内容に関してなんですけれども 主に5つをお話しさせていただきます一番最初にテーマ開発を学習し始めた 当時のスキル どういったスキルを持った状態からいざテーマ開発 を始めようとしたのかというところをちょっとお話しさせていただきます その後 テーマ開発中でもブロックの作り方をメインで学習した ので どういった内容を勉強していたのかというところをお話し させていただきます その後実際にテーマ開発する上でブロックを開発 して どういったことで詰まづいたかというところをお話しさせていただ きます その後 進挙の変化ですねブロックを開発する前と後で どう いった変化があったのかというところとよかったことをお話し させていただきます 最後にこれからもしブロック開発したいという 方がいれば どういったことをするのかというところを最後にお話し させていただきます 今回のセッションの目的なんですけれども テーマだったり ブロックの開発に興味を持ってくれる人が少しでも増えると 嬉しいなと思ってます 開発者が増えるとそれだけ便利な ブロックが生まれることもあるかと思いますので 増えてくれる と嬉しいなと思います 今回のワードキャンプもそうなんですけれども ワードプレスに興味を持って貢献する人が少しでも増えて くれると嬉しいなと思います最後にこれから開発もし始める 方がいましたら 今回の私のお話で少しでも役に立ってくれる と嬉しいなと思いますそれでは一番最初にテーマ開発を 学習し始めた当時のスキルについてお話しさせていただきます 私 学習し始めた時点では前の会社でWebデザイナーとして ワードプレスのテーマをいろいろ使っていたところもあって ワードプレスの管理画面の使い方だったりブロックのコアのブロック の使い方というのはある程度分かっていました コーディングもしておりました ので 基本的なHTML CSSというものは理解しておりました あとJavaScriptのコードだったり 既存のテーマをPHPを使ってカスタマイズする っていう部分に関してはネットで調べられる範囲でやってた っていう感じですね 最後に英語に関しては本当に苦手で翻訳ツール を使いながら調べながら仕事をしておりました 続いてその状態から テーマ開発の中でもブロックの作り方をメインで学習し始め ました ブロックはほとんどの方が使ってブログだったりウェブ サイトを作られている方多いかと思いますので 自分もその便利なブロック を作りたいということで ブロックの作り方を学習し始めました 最初 に学習し始めた内容としては公式のハンドブックですね 今 ちょっと古くなっているのでタイトルが少し変わっています がブロックの作成チュートリアルのクリエイトブロックパッケージ っていうもので大体ブロックがどういった構造でできているのか っていうのを理解しました 簡単にご説明するとエディットJSっていう 部分が編集画面の部分がを作るためのファイルになって まして セーブJSというものは実際にウェブサイト上に表示される 表示画面のコードがこのファイルに書かれているという内容になって ます ブロック.jsonというものでデータを定義しているので エディットJSの中で設定だったりブロックの設定というものが オンオフの設定みたいなものが作ったとするとオンオフっていう のをデータを定義していることによってオンオフがちゃんと保存 されて ちゃんと画面にそれが反映されるという形になってます SCSファイル っていうものは見た目を変えるためのデザイン関係のファイルになって ます 一取りそのチュートリアルをやった後にGitHubに実際のコアブロック ワードプレスの中で使われているコアブロックのソースコードが あるのでそこからどういうふうにブロックが作られているのかっていう のをソースコード見ながら理解しましたざっくりよく使われているのがインスペクター コントロールスっていう右側のサイドバーに機能を実装 するためのコンポーネントというものが使われていたりとツールバー に設定みたいなものを実装するためのブロックコントロールスみたいな コンポネントが中にはよく書かれています このサイドバーのインスペクター コントロールスの中にボタングループだったりいろんなスライドをする ための設定だったりいろんなコンポネントが中に書かれていてそういった 構造でブロックが作られているということを理解しました 実際にブロック を開発してつまづいたことなんですけれども まずブロック開発の情報 ネットで検索してもあんまり出ないっていうところですね これ今コード 書かれているんですけれどもこれはインナーブロックプロップスとい ましてブロックの中に別のブロックを入れるみたいなブロックを作る ときにこういう書き方をするんですけれども 中のブロックと同じ階層 に何か要素をつけたしたいということが昔はできなかったんですね 当時私 インナーブロックスを調べて見てもハンドブックには書かれて おらず結果開発ノートというところで こういう同じ階層に要素を入れ られるっていうのを知ったので結構深く調べないと出ない情報 が得られないということが結構あります 基本的に公式の開発ノート だったりマニュアルだったりハンドブックを読むことが基本的に多い ですね あんまりネットで検索しても欲しい情報があんま手に入らない っていうふうに思います 続いてハンドブックでも基本翻訳されて ないことが多いです この例としてはデータモジュールリファレンス っていう内容になるんですけれども例えばブロックを操作して 記事の情報を取ってきたり 著者の情報を取ってきたりっていうコアと言われる データモジュールを使用したり親子のブロックを操作する情報 を取ってくるみたいなのもこのコアブロックエディターっていう データモジュールを使わないといけないんですけれども 基本的にこのマニュアル に関しても全て翻訳されていないので 私は翻訳ツールを使って 何とか頑張って理解しているというところです 続いてブロック に後から機能を追加するとよくこの表示が出てきてしまいます リカバリーという状態になるんですけれども これを起きないようにする ために広報互換を考えないといけないというところですね 基本的に 新しい機能を追加するということは 機能を追加する前のブロック は既に記事に挿入されているという状態なので この古いブロック と新しい機能を追加したブロックの要素 save.jsの要素に違いがある と大体こういうブロックリカバリーのエラーが出ることが多いです こちら は一つの例なんですけれども この画像はハンドブックにある内容なんです けれども もともとPタグで文章を出してたものを後から機能を追加 した結果 ディブに変えようというような流れで 対応したときに だいたい要素が変わってしまっているので リカバリーのエラーが出る と それをアップデートするためにはデプリケートの中に機能を追加 する前の要素をきちんと書かないと エラーが出てしまいますという ところで これは私 今までもよくエラーを起きて 毎回ちゃんとデプリケート を書いて修正しているんですけれどもすごく大変な内容かなと思って おります あと Wordpressのコアアップデートの影響を受けることが多いです こちら の画像はバージョン6.2 6.3 6.4のそれぞれ私が経験した影響を 受けた部分なんですけれども まず6.2はこちらは文章にラベルを追加 する機能をツールバーに実装したんですけれどももともとこの並び順は左予定だったん ですね 6.2にアップデートした途端に全て中央予定になってしまう ということがありまして これもやっぱりちゃんと事前に Wordpressベータテスター で動作確認をしておかないとどこでどういったことが起きている のかっていうのを事前に調べて修正している 修正する必要がある というふうに思います6.3に関しても こちらボタンは もともと横並びで3つ置いてたものが全部縦になってしまうという 現象が起きて こちらも6.3のアップデートが配信される前に事前にベータテスター で動作確認をしてきちんと横並びになるように修正をしてました 6.4の時はこちらのリッチテキストっていう文章を作るためのコンポーネント で中にオプションでマルチラインというエンターティーを押すとリスト 上に文字を打てるようにする機能があるんですけれども それでリスト 上のデザインを作っていたんですけれども 何も表示されないとい ますか 今 これはテキストがただ並んでいるだけ ちょっとデザイン を作っていたんですけれどもそれが消えてしまうという 現象が起きてました3.6.5もあるんですけれども 私がちょっと見たところグループブロックの構造がちょっと変わってたんで 今 ちょっと最新はどうなってるか分からないんですけれども 少し前に確認した時はまたグループブロックがちょっと違うなっていう ことに気づいて これもちょっと修正 もしそこにグループブロック に対してスタイルをしていた場合は修正しないといけない かなと考えてます使いやすいブロックを作るのは すごく大変 少し大変って書いてますね 大変かなと思います 例を挙げますと こちら FAQブロックよくある質問でよく使われるような ブロックを私作ったんですけれどもこの親ブロック選択字の設定と 親ブロックというのは挿入した時に最初に選択されてる状態ですね その後に 適当入力しようと思って中に文字のある部分 文字を入れようとクリックすると大体小ブロックが選択されてる っていう状態になりますこの親子関係っていうものは やっぱ ワードプレスを初めて使われる方とか あまり慣れてない方は すごくわかりづらいかなと思ってまして 今 自分が親を選択しているのか こう選択しているのかそもそもその概念もやっぱり初めて の方はないんで そのどちらも同じ設定を用意しようということで こういったものを実装しましたこれは こう選択した状態で設定を変えても きちんと親のブロックの情報というか親の設定も同期して変わる その逆も親のブロックの設定を変えると 中のブロックも全て きちんと同じように設定が変わるっていうようなブロックを作りました これは初めて作った時はすごく大変だなっていうふうに思いました 続いて 新居の変化 ワードプレスのテーマを開発して 開発する前と後で どういった気持ちの変化があったのかっていうところと あと テーマ開発でしてよかったなって思うところをお話しさせて いただきますまず テーマ開発者になる前ですね 自分なら誰よりもいいブロックを作れるっていう謎の自信を持って たんですけれども 実際にテーマ開発をしてみると いろいろつまづくことが多くて先ほどお話しさせていただいた 内容が主なつまづいたところになるんですけれども 設定を追加して 追加してっていうところをやっていくと なんかこの設定 噛み合わないなみたいなことがよくあるんで その辺をすごいきっちり ちゃんと作られている他のテーマ開発者さんが本当に噛みだなという ふうに思ってます大変なんですけれども 実際 ブロックを使っていただいてる方にすごく使いやすいです みたいなこと言ってもらえるとやっぱりめちゃくちゃうれしいんで そこは本当に良かったなと テーマ開発者で ものづくりっていう点で やっぱりこれはすごく大事な気持ちなんだなというふうに思いました あとです ワードプレスコミュニティと関わりを持つ機会が増えたという ところが私の中で一番大きいかなと思います 最初は ワードキャンプは今回初めてなんですけれどもミートアップに参加したり 今進会に参加したりというきっかけもやっぱり ワードプレスのテーマ開発 を知っていたからというところがすごく大きいので その流れから結構いろんな人と知りあえたっていうのは 私の中ですごくいい きっかけと言いますが そこはテーマ開発していたおかげで今があるんだ なというふうに思います 今後に関しては ワードプレスのコアへの貢献だったりあと実行員もすごく興味ある ので いろんな形で今後関われると嬉しいなと思います 最後に これからブロック開発される方今どういった学習をするといい のかなというところをお話しさせていただきます まずチュートリアル初めてのブロック作成という名前に変わりました それまではブロック それまでの過去のハンドブックのタイトル はブロックの作成チュートリアルになっていたんですけれども 新しく初めてのブロック作成というタイトルに変わりました ちょうど先月ぐらいに日本語にも対応されていますので 今始める 方はこれをまずやってみるのが一番いいかなと思います このチュートリアルはコピーライトの著作権の年表示をするための ブロックの作り方を説明しているもので これの前のチュートリアルは トゥードリストだったと思うんですけれども 新しく もう少し 細かい部分まで学べるような内容に変わっているんで こちら をまず始めてみるのがいいかなと思います あと私が一番おすすめしたいのがこの秋山野さんのYouTube動画 カスタムブロック道場というものがありまして 当時 私学習し始めた頃まだ動画3つぐらいしかなかった ので 基本的に公式のハンドブックを読みながらずっと勉強したり 開発を続けていたんですけれどもだいぶ時間が経った後に 見返してみると今すごい動画がいっぱいあって 実際 ある程度知識を知った状態で見てみたんですけれども すごく分かりやすくて本当に結構ハンドブックの内容 自体も私はあんまり理解できないことが多かったんですね その状態から何とか勉強してある程度分かるようになって このカスタムブロック道場を見返してみたんですけれども かなり分かりやすく説明されているんでこれは絶対に見たほうがいいと 私は思います やっぱり難しい部分いろいろあるんですけれども 先ほどお話したように結構昔よりも すごく情報を増えてきたんでそんなに難しくなく作れるようになりましたんで 実際に 実際に作ってみるとやっぱり楽しいっていうのもあって 今後 そうですね 新しくブロック作られる方はプラグイン化できますので それをしていただくことでどのテーマでもそのプラグインを有効化するだけでそのブロック一つでも使えるようになるのでもし今後作られる方がいたら プラグイン化して公開するとみんなでいいブロックを シェアできるのかなと思ってます最後にまとめですね ブロック開発始めることは意外と難しくないっていうところですね情報 それもハンドブックだったり ユーチューダーガーっていうものがあって昔よりも結構情報が充実してるので 作りやすくなっているかなと思いますただやっぱりご完成の対応だったり 新しい情報ですね結構ハンドブックにも書いてないものを 開発ノートで見たりっていうところで新しい情報っていうのも やっぱり大変かなと思ってますやっぱり実際に作ってみると いろんな発見があってすごく楽しいと思うので ぜひ作っていただければと思います以上で私からのお話を 終わらせていただきます ありがとうございましたありがとうございました 井戸ひろやきさんでしたということで井戸ひろやきさんから ワードプレス初心者が車内プロダクトでテーマ開発を始めていた 見たというタイトルでお話をいただきましたけれども少し4時間に余裕もございますので せっかくですので今回の講演を受けて また井戸さんに興味が出た方も多いかと思いますので井戸さんに何か聞いてみたいことがある方 質問をお伺いしてちょっとお答えいただくっていう お時間も取れるかなと思うんですけれども何か悪こそは質問をしてみたいという方 いらっしゃいましたら教師をお願いいたします いかがでしょうかもちろん元々お知り合いの方なんかでも 今日の講演を受けてこの機会に行っている方もいらっしゃると思いますがはい ちょっとはい マイクを通してお願いできますかはいじゃあ今 エクスライトはクラシックテーマだと思うんですけど今後ブロックテーマの開発とかっていうのは 考えられていたりしますかそうですね 私自身はめちゃめちゃ興味がありますやっぱり新しい技術だったり 新しいものを学ぶっていう点ではそこの探究心っていうのはすごくあるんですけれどもまずはその今作ってるテーマっていうものをちゃんといいテーマに作り上げたいっていうところはあるのでまずは今そこを必死でやってるっていうところなので今後もしその機会があれば私はぜひブロックテーマを作りたいと思ってますはい ありがとうございますありがとうございますでは他に質問ございませんでしょうか皆さんよろしいでしょうかぜひこの後の更新会などでもいろいろお話ししてお伺いしてみていただければと思いますそれでは このお時間ですねこのセッションにつきましてはここまでとさせていただきます伊藤さんに改めて大きな拍手をお送りくださいありがとうございました