WordCamp Osaka 2019 参加レポート

2019年12月8日 WordPress

こんにちは、高橋でした。

仕事で大阪にはしょっちゅう行っていたけど、自費で行くのは初めて。というか、帰省以外で遠いところに出かけること自体15年ぶり以上かもしれない。

そんなわけで、行ってきました。新幹線で前泊、アフターパーティの後は人生初の夜行バスに乗って。

前夜祭（→コチラ）やアフターパーティを含め、いろんな人との交流があまりにも楽しい素敵なイベントだったのでロスト感がかなりあります。帰り着いた早朝の新宿バスタでしばらく放心してみたり。

でも本当に参加してよかったです。

セッション自体はあとで動画やスライドで公開されますが、リアルで聞くことの臨場感はまじ半端ないですね。
自分はコーディングもデザインもできない（HTMLやCSSをちょっと改造したり、簡単なPHPを書いたりするくらいはやるけど）ので、WordPressのほんの一部分ですら使いこなせていないんだなと改めて実感しつつ、無限の可能性があるんだなと感じました。そして、WordPressを支えるコミュニティの底知れないパワーも感じることができました。

とにかく、無事イベントが大団円を迎えられてよかったです。スタッフの皆さん、登壇者の皆さん、参加者の皆さん、お久しぶりにあった皆さん、初めましての皆さん、お疲れ様でした。そして、本当にありがとうございました。

アフターパーティではまだまだ話し足りなかったです。またいつの日か、ゆっくり語り合いたいですね。

以下、忘れないうちにWordCamp Osaka 2019セッションデイで参加したセッションについて書いておきます。自分メモ的な感じだけど。

WordPressでも大丈夫！実例で見るウェブパフォーマンス改善

最初のセッションはこちらから。Kiteさん講演。主にWordPressサイトのパフォーマンス改善について。WordPressにサイトヘルスなんていう機能があったんですね。知りませんでした。

まずはパフォーマンスの計測から

実態を知らなきゃ始まらないということで、ツールを色々と紹介。Lighthouseは知っていたけどそれ以外にもいろいろ。

PageSpeed Insights（パフォーマンスのみ）
Site Kit（Google謹製プラグイン）
Test My Site（モバイル向け）
WebPageTest

など。ほえー、色々あるんだな。Google謹製のがあるとか意外。試してみなきゃ。

改善施策①コーディングなしでできること

まずはサーバの移転を検討

比較項目は以下のようなもの。

Webサーバ。NginxはApacheに比べて、大量の同時アクセスに最適化しており突発的なアクセス集中にもサイトが安定。LightSpeedはApacheの上位互換。ロリポップが採用。
HTTP/2は必須。そりゃそうだよね。
その他、PHP7、PHPモジュールロード、FastCGI、LSAPI、SSDの対応状況など。

不安なプラグインをアンインストールしよう

とあるプラグインで、DB容量を多く消費していた事例あり。

最適な画像形式を選択しよう

JPEG、GIF、PNG、WebP（ラスター形式）
SVG（ベクター形式）

色数が少ない画像であればSVG、写真ならJPEGまたはできればWebP。GIFやPNGの出番はなくなってきている。

SVGの書き出しはそのままで問題ない。圧縮は最適化されている。（Illustratorはいくつか種類があるので注意）

SVGの最適化ツールはいろいろある。

デフォルトのWordPressはセキュリティの関係でSVGが使えない。なのでfunctions.phpに書く。ただし面倒なので、プラグインを使うのがよい。Safe SVGを使うのが無難。ただしOGPはサポートしていないので、別途手動でJPEGやPNGなどを指定する必要がある。

WebP。一部のブラウザ（Safariなど）では対応できていないので注意。

オフスクリーン画像の遅延読み込み

画面上に表示されていない画像を最初に読み込まず、スクロールで表示された時に読み込むようにする。

Imgタグにloading=“lazy”をつけるのがおすすめ（今のところChromeの場合のみ。Lighthouseでも評価してくれる）
Native Lazyloadプラグインで対応できる。

最終手段は最適化

Shifterなど。使ってみたいな。静的なHTMLに吐いたらそりゃ爆速だろうなあ。

改善施策②コーディングによる改善施策

ページによってCSSやJSの読み込みを制御
レンダリングを妨げるリソースの除外

この辺はちょっと高度であまり理解できなかった。まずはコーディングなしでやれることもたくさんあると思うので、ヒントにしていこうと思う。

Google検索最新情報2020

Google金谷さん。スライドは掲載不可とのことで、備忘録的にメモ。タイトルの2020は誤りとのこと。

Site Kit

Google開発のプラグイン。WCT2019開催と同時期くらいにリリース。Search Console/Google Analytics/Adesnse/PageSpeedのツールがWordPressから使える。サイト全体のデータ+ページ単位のインサイトが得られるツール。簡単に導入できる。ただしまだ日本語化はされていない。

新しいrel属性

Nofollowの取り扱いはかわったが、リンクについてのガイドラインは変わっていない。（nofollowをつけていても、PageRankに影響を与えたり、クローラーが辿ることがある）

rel=“sponsored” 広告や有料プレースメントへのリンク
rel=“ugc” ユーザー作成コンテンツ（UGC）のリンク

rel=“nofollow” リンクにその他の適切な値がなく、そのリンクとサイトを関連づけたくない場合、またはリンク先のページをサイトからクロールさせないようにする→既存のnofollowを慌てて変更する必要はない。

大量の低品質のリンクを発見した場合
クローキング（クローラーには盗んだコンテンツを見せ、利用者には別のコンテンツ(404など)を見せる）されている可能性がある。→本質的にはハッキングの問題。 →リンクの削除や対策ではなく、サチコから不正である旨の通知をしてほしい。

混合コンテンツ（httpとhttps混在）

httpでリンクされたコンテンツ自体が読み込まれなくなる。（ページ全体が読み込まれなくなるわけではない）動画などはまだ読み込まれているが、段階的に移行すること。

10年以上前の古い記事の扱い

SNSで検索不可になるという流布があったが、事実ではない。Googleの使命に照らすと、どんなに古い情報でも検索できる。検索ボックスで「Before:1999-01-01」という指定方法があるが、まだ正確にはサーチできない。

コアアップデート

アルゴリズムの変更に伴い順位が下がった場合はどうする？→変な対応策に惑わされず、コンテンツを改善することが重要。ほか、品質評価ガイドライン、E-A-Tを理解しておくこと。

5G到来で高速化は不要か？

5Gになったからといって、すべての回線が5Gになるわけはない。よって、常に改善が必要。PageSpeed Insightsで改善のポイントを探る。（ぜひ使ってみたい）

今後の情報収集

g.co/webmasters

を参考に。ほか、「検索エンジン最適化（SEO）スターターガイド」など。ウェブマスターオフィスアワーは次回、12/17（火）12:00より。仕事中だけど参加しようかな。これは聞いておきたい。

お昼のLT

お昼ご飯をどうしようかモタモタしている間にランチツアーが行ってしまったのが心残り。皆さんと交流したかったなあ。

ということで、会場裏のすき家でぼっち飯w

その後急いで戻ってきてLTを3本ほど。

お昼のLT① WordCamp Osaka 2003

という一見『？？？』なお題。この翌年にWordPress1.0がリリースされたんですよね。まだ僕はWordPressの存在すら知りませんでした。この頃は会社のイントラサイトをMovable Typeを使って構築していた気が。NetScapeとか懐かしい。

お昼のLT② 神奈川WordPress MeetUpの箱根温泉のお誘い

1月に箱根に行って、勉強会をやりながら温泉に浸かるという企画のお誘い。これはそそる…w　20名ほどが定員だそうで、僕みたいな初心者が行っていいものかどうか迷うけど、ちょっと考えよう。

お昼のLT③動画マンがおすすめする動画埋め込みをヤベェくらい軽くする神プラグイン

マツオカさんのLT。タイトルからしてそそられるんだけど、まだ動画を使って何かをやる機会があまりなさそうなので、今後の参考に。
Lazy Load for Videoについて。YouTubeやVimeoの埋め込みに対応。

運用も最大限考慮！コーポレートサイトでブロックエディタフル活用の事例紹介

長谷川広武（ハム）さんのセッション。受講者が多すぎて通路にまで溢れて、通路に体育座りする人もたくさん。

もうちょっと広い部屋だったらよかったかも。

お酒のメーカー、バカルディのコーポレートサイトをブロックエディタを使い作りきったという話。昨年末ごろから着手したそうだけど、その時点ではまだブロックエディタ自体リリースされて本当にまもない頃だったわけで、ハムさんの先見の明は素晴らしいなと思いました。自分の会社でサイトを企画するときも考えなきゃいけない内容。

実際、自分の会社の某商品サイトがメンテ性がとても低くて今頃になって色々としわ寄せがきているという現実があったり。当時はWordPressの知識もほとんどなかったので、制作会社の言われるがまま検収せざるをえなくて、記事の追加にHTMLをゴリゴリかかなきゃならないという状況。この頃からハムさんのこと知ってたらなあ…。

と、後悔してもしょうがないので、今後のサイト作りや企画の参考にしようと思う。

エンタープライズ向けにWordPressを提供するためにあなたとコミュニティができること

西川さんのセッション。

まず、エンタープライズとは何か。人、お金などのリソースを使って、リスクをとりながら。商品やサービスを市場に投入し、大きなインパクトを与え、利益をえようとする企業のこと。エンタープライズ向けの世界観というかプレーヤー。

僕の会社でもガートナーのレポートはよくみているんだけど、世界レベルのプレーヤーがどういう繋がりなのかがよくわかる。ガートナーのレポートはちょっと難解なので、こうやって噛み砕いてくれる人がいるというのはすごくありがたいのかも。

DXPについて。仕事で日々使っているツールについて。でもこれって、大企業だけのツールじゃなくなっている。顧客と理解してコミュニケーションをしたいとか、エンゲージメントを高めたいというのは、どこも同じなんじゃないかな。

企業がウェブサイトを持つことの意味がかわってきている。で、WordPressはハブとして機能する。など、ここまでが序章。序章かよ！（笑）確かにWordPressがエンタープライズ向けだ、という認知はされていないかもしれない。理由はWordPressにセールスがいないから、というのも納得。

それからWordCamp Ogijimaのお話し。「私はこういう風に生きていて、WordPressをこう使う」みたいなコンセプト。仲間がいればできることがたくさん。いいね、こういう生き方。

西川さんとはアフターパーティでもお話ししたけど、こうした生き方をしているからかな。目がキラキラ輝いていたなあと。話しているだけで元気がもらえた気がする。今はまだ何もお返しできることはないんだけど、コミュニティで何かしらコントリビュートできたらいいな。

ブロックエディタで誰でもカンタンに運用しやすいサイトを作ろう！

アカリホノカニ　土居安佳里さんのセッション。パティシエ出身という変わった経歴のお方。

実は今日、一番衝撃的なセッションで、一番の収穫になったセッションでした。

おそらくWordCampに参加している多くの人はWordPressを深く知り、使いこなしているんだけど、僕みたいに表面的にしか使っていないとか、コーディングなんてやったことがないというレベルだと全然WordPressのことがわかっていない。

もちろんブロックエディタも。それまでは「ふーん、ブロック単位で編集できるのか」くらいにしか思っていなかったけど、彼女のセッションを聞いてWordPressの世界が一気に変わった気がしました。

小学生みたいな感想だけどブロックエディタすげえ。再利用ブロックもすげえ。

いろんなデモを交えてブロックエディタがなぜ素晴らしいのかをじっくりと解説。本当に明日から使えると思いました。この記事はひとまずあまり手を入れずに標準的なブロックで書いていますが、これからの記事はいろんなブロックに挑戦していきたい。

いろいろなTipsや、ブロックエディタがもっと便利になるプラグインを紹介。

デフォルトのカラーパレット変更できるようにする方法（functions.phpに追記）
YouTubeなどの埋め込みコンテンツをレスポンシブル対応する方法
スタイルのバリエーションを増やす方法
エディタとフロントを同じスタイルで表示する豊富
インラインの装飾強化（TinyMCE…部分的な色変更ができる）
Snow Monkey Blocks（手順をあらわす、みたいなの）
ブロックの種類を増やす（CoBlocks）
Lazy Blocks（ノンプラグラミングでカスタムブロックを作成）

アフターパーティがほとんど終わりかけの頃、ようやく土居さんにご挨拶と感謝の意を伝えられたので心残りなく帰路につけました。いやあ、本当によかった。

最後はアフターパーティで締め。たくさんの人と語り合いました。
まだまだお話ししたかったなあ。

そんな感じで、また。