2023年3月18日土曜日

【大阪梅田】Kansai WordPress Meetup『WordCamp Asia 2023を振り返ろう!』に参加して #WMKansai #Ashibinaa

 久しぶりに対面での Kansai WordPress Meetup ということで参加しました。
WordCamp Asia 2023は、折り悪く他のイベントが重なってしまい、参加できなかったため、その話を楽しみにしていました。もともと中止となった WordCamp Asia 2020 については、WordCamp Asia 2020 の会場に行ってみよう!で紹介していたように事前にタイに行く機会があったので会場の下見をするなど、準備万端にしていたのですけどね (^^;

さて本日は、グランフロント大阪 タワーC 16階 アールスリーインスティテュート 大阪本社オフィスで開催されました。非常にスタイリッシュなデザインのオフィスでした。参加者は30名以上いたように思います(参加登録は41名)。

   Photo by Horie (https://twitter.com/keikeisuke/status/1637002545435676672)

久しぶりにあった方々もいて、懐かしく思いながら歓談していました。

皆さん、久しぶりの対面なのでウキウキ感が伝わってきますね!インドネシア出身、カナダ出身の方も会場に来られた方が来られていて、またいろいろな職種の方もいるようでバラエティの富んでいるなとも思いました。


プログラム


関連情報

  • WordPress プラグイン「Elementor(エレメンター)」
  • GetGenie という AI プラグイン
    • SEO的なキーワードやタイトルをいれると、そこから記事を生成してくれる(日本語対応)
  • ChatWP(自分のブログを ChatGPTに学習させて回答させようという試み)

WordPress Meetup 説明


WordCamp Tokyo 2023は計画(2023年10月21-22日)されているとのこと。

WordCamp Kansai もやろうよ!というムードになっているとのこと!

WordCamp Asia 2024台湾で開催(2024年3月)される!

また、これまでの WordCamp などのグッズ提供もあった。
WordCampとは、WordPress に関する大きなイベント。500名、1000名規模で開催されたりしている。



以下、筆者が聞いて理解した内容を筆者なりに補足しながらメモしたものです。したがって発表者の意図した説明でない可能性があるかもしれない点はご留意ください。また # から始まる内容は、筆者の感想的なものになります。

振り返りLT by Shusei Toda




WordCampは WordCamp Tokyo, Kansai など地域別にしていたが、それより一段上のアジア大陸での位置づけで開催された。これは、WordCamp US, WordCamp Europe に続いて3つ目にできた大きなイベント。WordCamp Asiaの発表は動画で公開されている。日本語字幕はもう少しまつと、WordPress TVで公開されるはず。

今回の WordCamp Asia は Scholarship の枠を設けて参加費すべてをフォローしてきてもらう枠を設けたとのこと。

# スポンサーに Googleが入っているのですね。Google AdSenseや広告系で WordPress が使われているからですかねぇ。

チーム内で20以上のグッズを作成した。


なぜ WordCamp をするのか。日本では知り得ない、あるいは普段体験できないことが体験できるから。さらに様々な人達と知りあいにもなれる

振り返りLT by 丸山さん



開催日についたが、前日にベンダー主催のプレイベントがあったことを知らずに参加できず失敗した。

日本からのブースは巨大なおみくじが目立っていたとのこと。

懇親会も「自由さ」があって楽しかった(短い動画を再生)

振り返りLT by Hideokamoto



GetGenie という AI プラグインについて紹介したい。
SEO的なキーワードやタイトルをいれると、そこから記事を生成してくれる(日本語対応)

もちろん記事内容をチェックしないと公開するの危ないが、参加になる記事を生成してくれるのでかなり参考にできるのではないか。

CMSの「C」とは一体なにかを考えてしまう。

アンケート内容を microCMSで管理している場合もある。レコード型のように加工前提のコンテンツ作成もある。

組み換え可能なコンテンツ(再利用可能なコンテンツ)を見せていくことが考えられる。

これを可能にするのが、 ChatGPT-4 の活用も注目すべきところである。

ChatWP という自分のブログを ChatGPTに学習させて回答させようという試みもある。

https://zenn.dev/kentarok/articles/a99e51079a8071 あたりが参考になりそう?

WordCamp Asiaスピーカー振り返りトーク by 石川さん・大串さん・Hideokamoto



パネルディスカッションでは、オープン的な質問を受けるときが非常に大変だった。

マルチバイトのデータをインポートしたときに、表示が崩れてしまうような話をすると、同じマルチバイトを扱う国の人から、「そうそう、そういうことある」と後で言われたことをきいて、「ああ、そういうことは日本だけでなくあるんだー」と思った。

テーマ:セッションを応募したきっかけは、

1. 参加チケットの確保に失敗した(10分ぐらいで売り切れてしまった感じだった)
2. とりあえず応募してみようと何も考えずに応募
*様々な人に英語のチェックをしてもらった

# 発表用の英文(英語の上に日本語で読みを入れるとかも含めて)は事前用意するなど入念に準備をしたなど苦慮された点もあったが、やってよかったという感じ。1000人ぐらい入ることができるような部屋もあって、そうしたところでの発表は一般では体験できない得難いものとなったなど楽しそうだった。

テーマ:WordCamp Asia で喋ってみたい方にひとことお願いします

*WordCamp Asia 2023では日本人は3名発表した。次回は別の人に発表してもらいたいなーと思っている。

まだ WordPress にそこまで関わっていない人は、自分がしゃべるなんて恐れ多いと感じるかもしれない。また WordPress に深く関われば関わるほど、自分よりも上の人がいるので不安だと思うかもしれない。

自分が話したいと思うことは審査に落とされて、まぁこれも話してもいいかぁと思うほうが、審査に通ったりする(#スピーカーは審査がある)。

ネタとして、目新しい話でなくても共感できる内容でも面白くなってくる。あるいはコミュニティでの活動体験など、それぞれの WordCamp にテーマはあるにせよ、気軽に話すこともいいかも。

また英語ができなくても海外の WordCamp で発表する人もいるので、やりたいなと思ったら誰でも発表はできると思う。

写真を見ながらWordCamp Asiaを振り返ろう


WordCamp Asia で公開された写真(末尾あたりにある Share Your Memory)かなとおもったら、ちょっと違った模様。



WordCamp Asia 2023に参加した人たちが前に出て、当時の写真を見ながら振り返るというセッション。

コントリビューターDAYはみんな真面目だった。

発表場所については、小さいといってもホテルのホールぐらい広さがあった。大きいところは映画館のシアター並(製品の発表会をする場みたいない)だった。

海外の発表者は割と動くので写真を撮るのが大変だった。

MCの人も英語が得意でない人もいて、原稿を用意して読んでいる場合もあった模様

最後の Closing remarks ではその動画を皆で視聴。

WordCamp Asia 2020 が直前で中止したこともあって、3年越しに開催できたことはスタッフとしてはぐっと来るものがあった。

交流会(お菓子・飲み物あり)




マンゴーのポテトチップ風のお菓子があったり、


カナダのユニクロでかったシャツをきたカナダ在住の方(今回、日本への旅の途中で立ち寄ったとのこと)がいたりと、わずか1時間ではありましたが、楽しく歓談できました。

今後 WordCamp も対面になりつつあるので、WordPress Meetup も対面が復活していくことを願っております。

2023年3月18日 @kimipooh


2022年11月21日月曜日

【備忘録】Backwpup プラグイン 4.0.0 に起因するサイトエラーに対する対応について

2022年11月21時点で自身が管理する WordPress サイトがエラーで表示できないトラブルが出てきました。ブログやTwitterを見ていると、11月16日に Backwpup 4.0.0 へメジャーバージョンアップしたときkらのようですね。エラーログをチェックしていると、Backwpup プラグインの影響であることが判明。数日前に問題のある Backwpup 4.0.0 をリリースしたようです。

下記のプラグイン開発者の投稿を見る限り、本来含めるべきファイルを含めるのを忘れていたということでした。

エラーとしては、Fatal error : require(): Failed opening required  から始まって

wp-content/plugins/backwpup/vendor/composer/autoload_real.php on line 59

あたりまでような感じです。ファイルが読み込めないというエラーになりますね。


対処方法は?

まず現在問題は修正され、Backwpup 4.0.0 として公開されています。この時点で新規インストールする場合には、問題ありません。

問題のある Backwpup 4.0.0 へアップデートやインストールしてサイトがエラーになる(キャッシュの影響でサイトはエラーになっていない場合もあります)、あるいは管理画面にログインしようとするとエラーになっている場合には対処が必要です。

  1. FTPやSSHなどでサーバーに直接アクセスし、WordPressをインストールしたフォルダの wp-content/plugins/backwpup フォルダを別の場所に移動するか削除します。
  2. これで WordPress が正常に表示されていると思うので、管理画面にログインして、再び backwpup をインストール&有効化します。

上記の方法であれば、Backwpup に設定した以前のバックアップ設定はそのまま表示されているはずです。

参考:https://wordpress.org/support/topic/4-0-0-crashed-multiple-sites-again/


2022年11月21日 @kimipooh

2022年1月29日土曜日

[福井] Fukui WordPress Meetup #15 - サイトの表示速度改善 & 壊して戻そうバックアップと復帰の手順 の会 に参加して #wpfukui #wordpress

 

プログラム:https://www.meetup.com/ja-JP/Fukui-WordPress-Meetup/events/283042791/

今回は、仕事で利用しているさくらインターネットのレンタルサーバーを扱うということで、参加しました。筆者は、サーバー管理者をしていることもあり、皆さん、サーバーのバックアップや復元をどのようにされているのか、考えているのかも知りたいところですね!

WordPress 5.9(フルサイトエディティング機能が実装、これは昨年参加した Kansai WordPress Meetup で体験した)がリリースされたばかりの模様(2022年1月26日)。これについて Meetup が開始されるまで雑談されてました。

以下、各セッションについては筆者が聞いて理解・体験した内容の備忘録です。

「壊して戻そうハンズオン」前半 … サイトのバックアップと破壊編


バックアップ方法は下記のようにいくつか方法がある。しかし重要なのは、「いかに簡単に復元できるか」ということ。

  1. FTP/phpMyAdmin等で手動
  2. プラグイン
    1. All-in-One WP Migration(有償版にしないと使いづらい / uploadの容量制限等がある)
    2. UpdraftPlus今回これでハンズオンにつかう / ドメインを変更する場合には有償版が必要)
    3. BackWPup(バックアップに特化、復元作業は煩雑)
  3. ホスティング業者のバックアップサービス

UpdraftPlusを使ったバックアップとサイトを壊すハンズオン


下記のように、UpdraftPlus プラグインをインストールして、有効化

設定 > UpdraftPlusバックアップを選択

「今すぐバックアップ」ボタンを押してバックアップ
*WordPress フォルダ内にバックアップされる

バックアップができると、「既存のバックアップ」の項目にある5つのボタン「データベース」「プラグイン」「テーマ」「アップロード」「その他」をそれぞれクリックします。

すると下図のようにダウンロードできるようなウィンドウができるので、ダウンロードボタンを押して端末にバックアップデータをダウンロードします。

そして下記のように5つのバックアップが存在することを確認します。

壊す前のサイトトップ画面


そして WordPress を壊します。
まずはさくらインターネットのクイックインストールを使った場合、下図のパッケージに表示されているのでアンインストールします。

次にデータベースも削除します。



これで完全に消えたということになります。

表示速度改善のヒント


サーバー自体のレスポンスが遅く表示が遅い場合には、サーバーのプラン変更やサーバー変更などをするのは大前提。

Google の PageSpeed Insights は、LCP(First Contentful Pain) やCLS(Largest Contentful Paint)、画像フォーマット(次世代フォーマット(webp)で配信しているか等)など最新の評価項目がでているため、評価情報がガラリと変わっている。JQueryは重い。また読み込み時にレイアウトが崩れていると評価が低くなる。

単にサイト表示が速いだけでは高得点にはならない。
表示速度が早くても画像の軽量化をしていない場合などは、点数が伸びない。

また読み込みを遅延する、Native Lazyload(WordPress 5.5から標準サポート)を導入する。head にいれたものを footer に持ってくるとか(jQuery系には影響がでるので、そのあたりは対応が必要)。

WebP への変換(WebPはかなり圧縮率が良い。ただしアイコンなどの場合には逆に増えてしまうこともあるので注意)
Google:https://squoosh.app/
TinyPNG: https://tinypng.com/
WebP Converter for Mediaプラグインを使う。

いろいろ対応すると 95%を超えることもできる。

WebP Converter for Mediaプラグイン:

https://ja.wordpress.org/plugins/webp-converter-for-media/ を使えばメディア画像を WebPに変換できる。
こちらで重要なのは、利用している Webサーバの仕組みが、 Apache(.htaccessが使えること)かそれ以外(NGINX)によって、設定変更が必要だということ。デフォルトは、Apache(.htaccess)が利用できる(さくらインターネットのレンタルサーバ含む)設定となっている。


プラグインインストール後、設定の末尾にある 「Regenerate All」ボタンをクリックして変換をする。

私の持つサイトの一つのケースでは下記のようにそれなりに圧縮できた感じ。

実際の Chromeの要素の検証(Develoer Tools)で png 画像が webpとして読み込まれていることを確認

元を図り忘れてしまったこと、もともと重いサイトだったことを加味すると、まぁそれなりの効果はでているかもしれない。

質疑応答
  • 画像の Alt を設定していないとどうなるか
    • アクセシビリティが悪くなるので、かなり評価が下がる。ChromeのLighthouse 拡張機能を使えば、ユーザ補助の項目がアクセシビリティとなる。
  • 外部画像の読み込みが遅い点はどうしたらよいか(アフィリエイターの視点)
その他の質問応答
  • テーマのテスト環境用のローカル環境は wp-env がおすすめ

「壊して戻そうハンズオン」後半 … サイトの新規作成とバックアップからの復帰編

インストールしたフォルダと同じところに復元する必要がある。
これがわからなくなった場合、先程バックアップしたファイルのうち、 gzip圧縮されたものを展開してファイルをテキストエディタで開くと情報が書かれている

クイックインストールを開始

インストールURLは、壊したサイトのものを選べばよい(まだ残しているなら)。ドメインごと消してしまっているなら、ドメインを新規作成して以前と同じフォルダを指定。データベース作成ボタンから、データベースは新規作成する。こちらは新しい名前でも構わない。

これで WordPressにログインできるようになったはずなので、再び UpdraftPlus プラグインをインストールし、有効化する。



「既存のバックアップ」項目から「バックアップファイルをアップロード」リンクをクリックして、以前バックアップした5つのファイルをアップロードしましょう。



アップロードが終わるとその下に、「復元」ボタンでてきます。これをクリックします。

すると復元する項目がでてくるので、すべてチェックして「次」のボタンをクリックします。

うまくいけば、下記のように Restore successful! という成功のメッセージがでてきます。
その後、「UpdraftPlus 設定に戻る」ボタンをクリックします。

サイトが完全に復元データに置き換わっているので、つまりはユーザー情報も新しくなっていますので、ログインを求めてきます。そのためバックアップする前のユーザーでログインしてください。


うまくいけば、下図のようにもとに戻っていることが確認できるでしょう。
実際には他にもメディアや投稿、固定ページ等いくつか確認するとよいと思います。


質疑応答

筆者は、サイトリニューアルを依頼するときに、以前はMAMPのサイトクローンをいれてデザイナーの人に渡してました(MacなどMAMPごと圧縮して手渡していた)が、いまはもうクローン用のデモサイトを立ち上げて使ってもらってます。

なお筆者はサーバー管理者でもあるので、CUIツールである WP-CLIを組み合わせて自動バックアップ、WordPress更新をしてます。

2022年1月29日 @kimipooh

2021年12月18日土曜日

【オンライン開催】@神戸 #029 &大阪 #6 &京都#2 「サイトまるごと編集が可能になる、Full Site Editingを体験しよう!」・・・ #wpmeetup #WMKOBE #WPMeetupOsaka #WPMeetupKyoto

 今回は、もうすぐリリースされる WordPress 5.9 に実装される、Full Site Editing についてどういうものか先行体験しようとおもって、Kansai WordPress Meetup 参加しました。まだ Gutenberg に非対応な WordPress もある中で、何がどう変わったのかこのあたりで知っておこうということですね。



事前準備(前日)

プログラム

によると、ローカル開発環境として Local を使うということだったので、これをインストール。前日となる 2021年12月17日に、WordPress のデモサイトを1つ立ち上げておきました。

デフォルトでは、PHPバージョンが 7.3系で、WordPress 5.9ベータ版のヘルスチェックで警告がでるので、 PHP7.4系にしておきました。またログイン後の言語を日本語に変更し、タイムゾーンも Asia/Tokyoに変更にしておきました。

 


WordPress Beta Tester プラグインをインストールし、ツール > ベータテストより、下記のように、最前線、ナイトリーに設定変更。

あとは更新メニューから、5.9 ナイトリービルドへ更新します。
2021年12月17日時点では、5.9-beta3-52383 でした。日々更新されるバージョンのため、本番では若干バージョンアップしているかもしれません。

この時点ではテーマが、Twenty Twenty-One となっているので、外観より Twenty Twenty-Two に変更します。

そうすると、従来の外観テーマメニュー(左図)から、新しいテーマメニュー(右図)になります。



これが新しい編集機能の一つになりますね。とりあえずこれで準備は整ったと言えるでしょう、たぶん。

以下、筆者が理解したことのメモを残します。

当日



今年度の初雪であり、さらに積もりました。これをZoomの背景にして参加しました。
冒頭、軽く皆で雑談したあと、始まりました。
参加者数は登録サイトをみると 48名、始まった当初は28名でした。途中 36名になっていました。

冒頭今回の Meetup 開催側で注意事項や WordPress, WordCampの紹介がされた。
その中で気になったものをメモ。

  • 参加したホスティングサーバー側で WordPressのテストを定期的に行って、WordPress がホスティングサーバーで問題なく動くかどうかチェックするプロジェクトとのこと。

自己紹介はブレイクアウトルームにて


最初の4名は、全員知ってるメンバーだったので自己紹介せずに雑談をしていた。
2度目は、過去に新聞記者をされていた方がいた。いまは会社を起こして最近はWeb制作部門を作ったとのこと。話していると時間が足りない。一回5分だそうだ。それを知らずにダラダラと話してしまった。
最後の3度目は7分になった。出版社のインハウスデザイナーが参加された。知り合いもいたので時間が足りないですね。
いずれにしても、話足りないほど楽しかったですね!

その後10分休憩。その間に Local 環境を構築していない人は構築してね!というノリですね。

Full Site Editingをみんなで触ってみよう!


Full Site Editing(フルサイト編集)とは、設定、スタイルからテンプレートやテーマまで、サイトのあらゆるパーツにブロックの操作性と拡張性を導入するもの。
これを実現するためには、WordPress コア(5.9以降)とテーマ(現行は Twenty-Twenty Two)となる。

まずは前日インストールした WordPress 5.9のナイトリービルドを更新(5.9-beta3-52384)。

コンテンツを試すのは、テーマユニットテストデータ日本語版が活用できるよ!
https://github.com/jawordpressorg/theme-test-data-jaから、ZIPダウンロードする。
利用するのは、wordpress-theme-test-data-ja.xml
これを WordPress にインポートするには WordPress Importer プラグインをインストールして有効化する。
するとツール > インポートより、WordPress のインポートが増える。


WordPress のインポーターの実行のリンクをクリック


ファイルを選択ボタンをクリックして、先程の wordpress-theme-test-data-ja.xml を選択。そして、ファイルをアップロードしてインポートボタンを押した上で、出てくる画面の一番下にある「添付ファイルのインポート」をチェックしておきます。


これで実行ボタンを押して待つと、投稿、固定ページ、メディアにサンプルデータがいろいろ入ります。

投稿ページ

固定ページ

メディア


クエリループブロック


  • 投稿一覧を表示するなどをすることができる。

上記のようにクエリループブロックを追加して、「選択」ボタンを押すと、ブロックの設定ができるようになる。ソートもできるようだ。


プレビューという機能が実質なくなっている


編集画面自体がプレビューという考えに対して、様々な意見が飛び交っていた。

自前でフロントページを指定したい場合には、別途フロントページ(テンプレートで作成できるのか)を作って指定してあげる必要あり。フロントページを作ってしまうと、それが優先されてしまうようだ。テンプレートのフロントページを削除したら、ホームのテンプレートがベースになっている模様。

画面上からは page-◯◯.php は作成できない。直接作成(FTP等)で作成できるようだ。ただしテーマに対応している必要あり。子テーマを作ってやる感じ? 

外観を消すなどユーザーが誤操作しないようなツールはあるのか。以前、外観のカスタマイズメニューを削除する方法についてはネットで載っていたので、そこを参考にやってみた。

管理者も含めて、外観のサブメニューの Editor を非表示にする


利用側も管理者権限を有する場合は結構ある。となると、テーマの functions.php に下記のコードをいれておけば、Editorを非表示にできますね。
// のコメントした部分で権限によって除外できたりするようだ。

function remove_menus() {
//  if (!current_user_can('administrator')) {
    remove_submenu_page('themes.php', 'site-editor.php'); // 外観->Editorを非表示  
//  }
}
add_action('admin_menu', 'remove_menus');

従来のテーマエディタを開くためには


  • wp-admin/theme-editor.php
に直接アクセスすると利用できる。


theme.json とかあるけど?


上記をみると、テーマのスタイル変更が JSON によってできる(それまで CSS/PHP でガリガリしなくてよくなるようだ)そうだ。

WordPress のデフォルトテーマはレスポンシブWebデザイン対応しているのか


そういうやり取りがあったので、調べてみた。


をみると、Twnty Twelve の項目のところに
--
The 2012 theme for WordPress is a fully responsive theme that looks great on any device.
--
とあるので、このときからレスポンシブに対応したものと思う。

スクラッチでテーマを作る場合、ブロックも一つずつ作らないといけないのか


ブロックデータがいろいろはいっているプラグインを活用するのもよし。

誰かが作ったデザインを使って、それをテーマとしてカスタマイズする必要がある場合にはどうしたらいいのか


そういう場合には、フルサイト編集はそぐわないケースが多そう。結局は CSS のことを考慮してデザインしてくれないと難しい(非効率でお金がかかる)。

以上、いろいろ議論が活発に続いているところで時間となりました。
今回は知らなかったことをいろいろ聞けてよかったと思います。

その後、オンライン懇親会に突入。22名。
特にフルサイト編集を案件として取り扱う場合にどうすればいいのか、どういう問題があるのか、支払いや見積もりをどうしてる?などの雑談が熱かったですね。19時付近は、パソコン教室のような雑談が続いていました。Windows11の使用感、外部ディスクを接続するとどこにディスクが出てくるのか等。

筆者も家族と夕食を食べたりしていたのでミュートにしながらも、雑談されているのを楽しく聞いておりました。

その他チャット等で出てきた情報メモ



2021年12月18日 @kimipooh