「ページビルダーとGutenbergを理解する!- 中島良子・真洋、北島卓」WP ZoomUP #4 レポート

11/14(水)に行われたオンラインWordPress勉強会『WP ZoomUP』の第4回は「ページビルダーとGutenbergを理解する!」と題しまして、「コードを書かないサイト制作」と「Gutenbergのブロック総ざらい」のデモ二本立てをおこないました。

WP ZoomUP の概要、参加方法、運営者情報はこちらにまとまっています。

WP ZoomUPは月に2回。スペシャリストを招いて話してもらう「セッション回」と関連する内容についてワイワイみんなで話し合う「座談会」を一度ずつ開催しています。

開催概要

全体の流れ

Mentimeterという双方向プレゼンツールを使ってWP ZoomUPの説明やアンケートを行い、その後まず中島良子真洋さんによるWordPressページビルダーのプラグイン Beaver Builder を使った「コードを書かないサイト制作」のデモをおこなっていただき、その後、北島卓さんによるWordPress 5.0 から標準搭載が決まっている次世代エディター「Gutenbergのブロック総ざらい」のデモをおこなっていただきました。

動画

#4 WP ZoomUP ページビルダーとGutenbergを理解する!- 中島良子・真洋、北島卓

中島良子真洋さん、北島卓さん、わかりやすいデモをありがとうございました!
インターネット黎明期、Webサイトを作るということは限られた人の技術によるものでした。WordPress によって「誰でもサイトが作れる」が近くなったものの、どこまでの満足度が得られるかというのはまた少し違ったレイヤーにあったように思います。そして最近はテンプレートを利用してサイトを作成できるWebサービスが多く出てきています。
その中でWordPressがどう変わっていき、どういった可能性を持っているか。
今回のコーディングをしなくて良いサイト作りのデモによって、 より多くのものが見えたように思っています。

今回スピーカーをしてくださった北島卓さんのAmazon ウィッシュリストはこちらです。投げ銭の代わりにぜひお贈りしましょうー!

WP ZoomUP の今後をフォローしよう!

#5 WP ZoomUP 座談会 WordPressでサイトを作ってみよう

第二回目の座談会のテーマは[WordPressでサイトを作ってみよう]

実際にサーバーのレンタル、ドメインを取得・設定をその場で行い、WordPressをインストールするまでをやってみます!

#5 WP ZoomUPの流れ

  1. はじめの挨拶・本日の説明
  2. ロリポップ!』でWordPressをインストールするデモ(額賀)
  3. さくらインターネット』でWordPressをインストールするデモ(西川)
  4. エックスサーバー』でWordPressをインストールするデモ(村上)
  5. 質問タイム
  6. 懇親会

まだWordPressをインストールしたことがない方、インストールしたことはあるけど復習したい方、いろんなレンタルサーバーの様子が気になる方。ぜひご参加ください。

詳細、お申し込みはconnpassのイベントページをご覧ください。

チャットログ

21:20:06     Takeshi Furusato : https://www.menti.com/6a89eb98
21:20:10 Hiroshi Urabe (torounit) : 次の質問へってところをおせばいいとおもう
21:20:59 Yoshiaki Shizumi : 前回参加できなかった悔しい><
21:21:33 Takeshi Furusato : 画面変わらないなら「スライドに移動する」をクリックするといいよ
21:21:48 Naoko Murakami : 古里さんありがとうございます!
21:23:07 Hiroshi Urabe (torounit) : すみませんはたらいてはないですすみません
21:23:29 Naoko Murakami : 頼りにしています!
21:23:42 Hiroshi Urabe (torounit) : https://www.menti.com/6a89eb98
21:24:01 Atsuko Murashige : というか、「使ったことがある」
21:24:25 Hiroshi Urabe (torounit) : いじったことくらいならあるけど
21:24:29 Noriaki Sugimoto : beaver使ってます
21:26:05 Naoko Murakami : 888888888888888
21:26:09 Chiharu Ebisugawa : 888888
21:26:10 terakawanaoko : こんにちは。
21:26:10 Hiroshi Urabe (torounit) : 中島兄弟
21:26:13 mimi nari : 88888888
21:26:14 晴信 太田 : 888888
21:26:15 Haruko Yamashita : 88888
21:26:17 lunaluna : 888888
21:26:17 Junko Nukaga : 88888
21:26:34 yuki : 8888888
21:26:35 yori3 : 8888888888
21:26:36 Sayoko Miura : 88888888
21:26:42 Chiaki Kouno : 88888
21:26:45 晴信 太田 : ビーバービルダーとはなんぞやの人です
21:26:51 Chiaki Kouno : お姉さん、会社からかな?
21:26:58 mimi nari : 50!
21:27:20 Takeshi Furusato : 録画ーーー
21:27:24 Takeshi Furusato : 録画ー
21:27:27 Hiroshi Urabe (torounit) : 録画ー!!!!
21:27:30 晴信 太田 : 録画してない??
21:27:32 Takeshi Furusato : にしかわさーん
21:27:33 Chiaki Kouno : 録画!!!!!
21:27:35 Takeshi Furusato : 録画ー
21:27:42 mimi nari : 録画?
21:27:53 Naoko Murakami : みなさんありがとうございます!!!
21:28:17 晴信 太田 : 楽しみです。。。
21:28:18 Chiaki Kouno : 88888
21:28:55 terakawanaoko : 録画できるんですか?
21:28:56 Shinichi Nishikawa : https://wordpress.tv/2018/10/27/masahiro-nakashima-ryoko-nakashima-site-buiding-without-code-with-page-builder-tool/
21:29:26 Junko Nukaga : 録画して、Youtubeにて公開させていただいていますー
21:29:40 晴信 太田 : ビーバービルダーってそもそもなんですか??初めて聴きます
21:29:59 Shinichi Nishikawa : WordCamp Tokyo での中島さんたちのセッション https://wordpress.tv/2018/10/27/masahiro-nakashima-ryoko-nakashima-site-buiding-without-code-with-page-builder-tool/
21:30:16 Hiroshi Urabe (torounit) : https://ja.wordpress.org/plugins/beaver-builder-lite-version/
21:30:21 Yamamoto Tatsuo : WordPressの世界で最も利用され評価が高いページビルダープラグインのひとつ
21:30:27 晴信 太田 : 何のプラグインですか??
21:30:31 Haruko Yamashita : 「ウィーバー」ビルダーという検索で、見つからないわけでしたwwwなるほど。
21:30:41 yuki : プロ版は有料??
21:30:50 晴信 太田 : 高いんですか??
21:30:53 masaki hirano : beaver Builderのテーマってあったんだ
21:31:02 munyagu : https://www.wpbeaverbuilder.com/
21:31:03 Hiroshi Urabe (torounit) : Pro 版とかのあんないは、公式サイトにあるよ https://www.wpbeaverbuilder.com/
21:31:31 yuki : 解説ありがとうございます。
21:31:31 晴信 太田 : プロじゃなければプロ版はいらない感じですか??
21:32:12 Junko Nukaga : どこまでの機能を使うかで変わりそうですね〜、デモ終わったら聞いて見ましょうか
21:32:16 tecking : あ、日本語化されてるんだ!
21:32:30 晴信 太田 : ビーバービルダー専用のテーマってのがあるんですね
21:32:35 Haruko Yamashita : おーWIXのようだ!日本語だ!(プラグインででかな?)
21:32:44 taizo fujita : これは、テーマでなく、プラグインでの動きではないのですか?
21:33:10 masaki hirano : 飯テロの写真を見た
21:34:26 Hiroshi Urabe (torounit) : register_nav_menus register_nav_menu とかでたせるやつ。
21:34:55 suzuki atsuko : すごいな!
21:35:04 taizo fujita : 専用テーマでなくても、この作成はできるってことですよね。
21:35:23 キタジマタカシ : プラグイン単体だとページの中身だけで、専用テーマ使うとヘッダーとかフッターもビーバーでできるようになるはず(多分
21:35:38 Junko Nukaga : なるほどです
21:35:40 taizo fujita : なるほど
21:36:28 chefshinnosuke : なるほど!
21:36:30 yuki : おおーーすごいー
21:36:35 Chiharu Ebisugawa : なんと便利な!
21:37:01 tecking : ほほーなんと便利な
21:37:43 masaki hirano : スマホ時用とかにpaddingとか変更できるのかな
21:37:47 sachi majima : svgは使えるのかな
21:37:50 Atsuko Murashige : 昔使った時、重たくて操作しづらかったんですが、だいぶ改善されたのでしょうか
21:38:34 tecking : テキストd
21:39:01 tecking : テキストって日本語フォント対応してるんだろか?
21:39:58 munyagu : 出来すぎてこのプラグインに依存するの怖い気もする・・・WordPressには中毒しといてなんですけど
21:40:01 sachi majima : すごい!
21:40:02 Haruko Yamashita : たとえば「ご飯の行」と「H3」の行に「もう一行なんか入れたい」となった場合、スルッと入れられるんでしょうか。
21:40:03 masaki hirano : 質問拾っていただいてありがとうございます!
21:40:09 mimi nari : 3パターンの閾値はいくつですかー?
21:40:21 Chiharu Ebisugawa : 今まで知らなかったのがもったいないです
21:40:28 Tatamise : 便利そう!
21:40:43 masaki hirano : PCファーストなんですね
21:41:07 Tatamise : paddingはvwやvhでも指定できるのでしょうか?
21:41:25 mimi nari : ありがとうございます!
21:43:51 chefshinnosuke : おー
21:44:06 suzuki atsuko : 出来上がったソースコードが見てみたい。
21:44:17 mimi nari : みたいみたいー
21:44:50 tecking : みたい!>ソース
21:45:25 Junko Nukaga : できた後に聞いてみましょうか。どうなってるんだろうー
21:46:06 taizo fujita : pxのみみたいですね
21:46:15 masaki hirano : リビジョンに残ったりするのかな
21:46:47 Tatamise : -> taizoさん ありがとうございますー
21:47:28 Haruko Yamashita : あー飯テロ
21:47:54 Kosugi Hijili : すごすぎる……私の知ってるワールドプレスじゃない……
21:47:57 yori3 : ご飯食べたばっかりやけど、おいしそう・・・
21:48:08 Hiroshi Urabe (torounit) : データは カスタムフィールドにいるのか。https://kb.wpbeaverbuilder.com/article/129-data-storage
21:49:01 ニー ヤン : マイクから遠いのかな?
21:49:32 Hiroshi Urabe (torounit) : マイクの音量の設定が小さい感じ
21:49:55 munyagu : ハマりポイント教えていただきたい
21:50:03 キタジマタカシ : 「さらに、ページビルダーのレイアウトを変更して公開するたびに、レイアウトの削除されたバージョンがWordPressエディターに保存される」ほー
21:50:34 Hiroshi Urabe (torounit) : サイト内検索とかは機能するってことですね。
21:50:51 キタジマタカシ : ですね
21:51:02 michiko takekoshi : 日本語化されてるのpro版かな?
21:53:25 Hiroshi Urabe (torounit) : 半分くらいはほんやくされてるみたい.Lite版 https://translate.wordpress.org/locale/ja/default/wp-plugins/beaver-builder-lite-version
21:53:45 Hiromi Kitakado : はや!!
21:53:46 mimi nari : 888888888
21:53:53 Haruko Yamashita : 8888888
21:53:55 Tatamise : やばい!
21:53:59 michiko takekoshi : 8888888888
21:54:02 キタジマタカシ : すごすぎる!
21:54:04 Naoko Murakami : すごいー!!!8888888888888
21:54:06 Shuichi Saito : 8888888888888
21:54:08 chefshinnosuke : 早いー
21:54:08 Yuki Shigemi : すごい!
21:54:09 Hiromi Kitakado : まだ食べてないので辛いですね〜w
21:54:15 Kosugi Hijili : YABEEEEEE
21:54:18 tecking : 飯テロ飯テロ!
21:54:33 Naoko Murakami : きたかどさんw
21:54:50 Yoshiaki Shizumi : GoogleMapの読み込みはAPI有料化にはかからないのかしら…
21:54:52 Noriaki Sugimoto : ヘッダーとフッターを別ページで共通化する方法とかあるんでしょうか?
21:55:23 masaki hirano : flexbox大活躍してる感ある
21:56:29 mimi nari : Grid だったらどうしよう
21:57:22 yori3 : 全部divなのか
21:57:26 和季 西島 : SEO的にどうなんでしょうか?
21:57:34 Haruko Yamashita : SEOもですけど、ページスピードインサイトとかでは、どんな塩梅でしょうか?
21:57:48 Hiroshi Urabe (torounit) : まともになったホームページビルダーみがある
21:57:54 Hiromi Kitakado : テーマがついてるのがProからだったような
21:57:56 有道 近藤 : サーバーのリソースがどれくらい必要なのでしょうか?
21:58:31 yuki : サイトごとに有料ですか?1ライセンスで1サイト??
21:58:59 yuki : そうなのですね。ありがとうございます。
21:59:00 Hiroshi Urabe (torounit) : 無効にしたらどんな見た目になるんだろう
21:59:17 tecking : たしかに気になる>無効の時
21:59:29 Hiroshi Urabe (torounit) : https://www.wpbeaverbuilder.com/
21:59:44 Hiroshi Urabe (torounit) : https://www.wpbeaverbuilder.com/pricing/
22:00:09 masaki hirano : やすーい
22:00:58 lunaluna : SVGはそもそもアップロード出来ないので、たぶん別のプラグインが必要…
22:00:59 masaki hirano : そもそも今ってWordPressにSVGアップロードできましたっけ?
22:01:09 キタジマタカシ : できないですね。プラグインがあります
22:01:17 Hiroshi Urabe (torounit) : デフォルトだとできない
22:01:32 lunaluna : https://ja.wordpress.org/plugins/safe-svg/
22:01:33 masaki hirano : (この分野では脂漏ですが><)
22:01:41 キタジマタカシ : 脂漏w
22:01:49 masaki hirano : 素人!
22:01:59 Tatamise : ありがとうございます!
22:02:59 mimi nari : 画面を右クリックして検証をお願いしたい・・・
22:03:39 Kosugi Hijili : 広告用LP量産できそう……(じゅるり
22:03:49 mimi nari : CSS側がみたくて
22:03:52 mimi nari : すみませんw
22:04:05 mimi nari : ありがとうございまっす
22:04:33 tecking : $399わりとさくっと回収できそう
22:04:35 taizo fujita : 2カラムとかは何で横並び?
22:04:47 ghichi : Elementor でがんがんにサイトを作ったときに、サイトが重くなり表示が一部おかしくなってしまったことがあります。ビーバービルダーではそういうことはありませんか?
22:04:53 yori3 : 2カラムのところ見たい!
22:05:21 mimi nari : すみません、どうやって生成してるのかなーと思って。ありがとうございます。
22:05:24 Kosugi Hijili : カスタムフィールドにデータが格納されると遅くなるイメージがあるんですが、そこは過去に重くなるなーって思ったことありますか?
22:05:38 Junko Nukaga : 遅くなる系も聞いてみますねー
22:05:53 lunaluna : 自分のウィンドウドラッグしたわww
22:06:00 (´ ºムº )@札幌 : リモートコントロール要求したほうがたぶんはやいかな(人の画面を操作できるようになります)
22:06:31 masaki hirano : cachepluginを使えばすればそれほど重くならない気がするけど違うのかな
22:06:31 Hiroshi Urabe (torounit) : リモートコントロール要求したほうがたぶんはやいかな(人の画面を操作できるようになります)
22:06:57 lunaluna :fl-module-contentかな?
22:07:10 taizo fujita : これべんり
22:07:12 Naoko Murakami : そんな機能が!ありがとうございます!
22:07:15 Hiroshi Urabe (torounit) : 弊社ではいたづらよう。
22:07:23 Hiroshi Urabe (torounit) : http://demo.wpbeaverbuilder.com/
22:07:27 Hiroshi Urabe (torounit) : でもさいとあるよ!!!
22:07:29 masaki hirano : 御社怖い><
22:07:39 yori3 : ハムワークスの闇が・・・
22:07:39 (´ ºムº)@札幌 : いたづら用ってwww
22:07:45 messi_yuki : IEでもちゃんと表示されるんですかね。。。
22:08:11 masaki hirano : 最悪HTML入れれるからなんでもできそうな気がする。
22:08:13 Hiroshi Urabe (torounit) : CSS ここらへんでみれるよ。http://5bec1c81d9c14.demo.wpbeaverbuilder.com/demo/
22:08:48 mimi nari : ありがとうございますー!
22:08:52 yori3 : とろさん、ありがとう!
22:09:01 Hiromi Kitakado : Elementorより、動作が軽そうに見えますね。
22:09:54 Kosugi Hijili : 最高かよ……!
22:09:58 Hiromi Kitakado : アニメーションも結構豊富についてる感じでしょうか。
22:10:12 キタジマタカシ : デザインの幅もかなりありそうですねー
22:10:15 Chiaki Kouno : いい感じのサイトですね!
22:10:27 Chiaki Kouno : お客さんに文章勝手に描いてもらえるのはとても良い
22:10:28 yori3 : お客さんにビルダー触ってもらったら崩されそうで心配になる・・・
22:10:51 mimi nari : リビジョンあるのでは?
22:11:01 masaki hirano : クライアントさん返事遅いのに納品日無視する人いますもんね(個人の感想です)
22:11:09 晴信 太田 : ライターさんに「ここに入れるコンテンツ書いて、書いたら入れておいてね」って言えますね
22:11:17 yori3 : なるほど、ありがとうございます!
22:11:30 有道 近藤 : サーバーの容量が増えるのかが気になる
22:12:35 Haruko Yamashita : ペライチなイメージですが、このまま下層も簡単につくれるのかな?
22:12:40 Kosugi Hijili : CDNと組み合わせられるのかな
22:12:43 masaki hirano : 素人が書いたHTMLよりはキレイな印象です(個人の感想です)
22:12:56 mimi nari : wwww
22:13:00 Yuki Shigemi : 埋め込んだGoogle MapsはAPI使ってますか?
22:14:23 masaki hirano : https://nskw-style.com/2017/diary/shifter-wordpress-to-static-on-globa-cdn-generator.html
22:14:26 lunaluna : モジュールの入れ子が2階層まで、っていうのも重くなるのをできるだけ避けたいからでしょうね。
22:14:27 taizo fujita : adminが気になる
22:14:29 Kosugi Hijili : あ、ごめんなさい声出せなくて(^_^;) 早速買ってやってみます!!
22:14:48 masaki hirano : 重いの気になるならshifter使えば問題ない気がする
22:14:53 Hiromi Kitakado : admin…たしかに…
22:15:29 晴信 太田 : ビーバーテーマー??両方買っておくってことですか??
22:16:05 lunaluna : BEAVER THEMER = コンポーネントが作れる(D&Dで入れられる)だったかな?
22:16:16 Yuki Shigemi : マップ、ありがとうございます!
22:16:34 晴信 太田 : ダメだ・・・肉が食いたくなってきた・・・
22:16:58 Yuki Shigemi : Ultimate
22:17:09 Hiroshi Urabe (torounit) : https://www.ultimatebeaver.com/
22:17:44 taizo fujita : それは流してください
22:17:50 Hiromi Kitakado : ww
22:17:59 masaki hirano : SnowMonkeyもBeaverBuilder化対応するのかなー(期待)
22:18:00 Hiromi Kitakado : そうそう
22:18:04 Hiroshi Urabe (torounit) : ろーかるだからいいんじゃない???wwww
22:18:14 Hiroshi Urabe (torounit) : ローカル開発環境は admin / admin です。
22:18:15 Hiromi Kitakado : www
22:18:24 mimi nari : ろーかるあるある。
22:18:26 Hiromi Kitakado : すみませーん
22:18:30 キタジマタカシ : 僕も admin : admin w
22:18:38 Yuki Shigemi : ww
22:18:43 mimi nari : デモの速度テストは87
22:18:48 Shuichi Saito : それ気になりますね
22:18:50 Hiroshi Urabe (torounit) : ビーバービルダーやめたくなったときどうするんだ問題
22:18:54 taizo fujita : そうなんですね。admin : admin
22:19:05 tecking : 哀しい感じ(別の意味で期待)
22:19:32 晴信 太田 : Akismet入れてないんですね
22:19:34 Hiroshi Urabe (torounit) : レイアウトも消えるっていってた
22:19:43 Hiroshi Urabe (torounit) : https://kb.wpbeaverbuilder.com/article/129-data-storage
22:19:46 mimi nari : indexってなに?
22:19:48 Kosugi Hijili : CSS無効になっただけ感だから、CSSさえあてとけばいいのかな
22:19:49 yori3 : 古いIEで見てみた感じですね
22:20:02 yuki : プラグイン復帰したら見た目全部もどりますか?(心配性)
22:20:37 yuki : ありがとうございますーーーーー!
22:20:43 mimi nari : ありがとうございました!!!!!!
22:20:44 lunaluna : 88888888
22:20:46 Hiromi Kitakado : 888888
22:20:46 有道 近藤 : 8888888
22:20:48 晴信 太田 : 88888
22:20:48 yori3 : ありがとうございました!
22:20:48 taizo fujita : 8888888888
22:20:49 Chiaki Kouno : 88888!
22:20:49 Junko Nukaga : 888888
22:20:49 Haruko Yamashita : 888888888
22:20:50 tecking : 888888888888
22:20:51 Sayoko Miura : 88888888
22:20:52 Shuichi Saito : 8888888
22:20:52 Tatamise : 8888888888
22:20:53 chefshinnosuke : 888888888888
22:20:53 キタジマタカシ : 8888888888
22:20:55 Naoko Murakami : 8888888888すごいーーー!
22:20:55 miya : 888888888
22:20:56 sachi majima : すごさがわかりましたー!
22:20:56 森 和恵 : ありがとうございました!すごい
22:20:57 Shogo Matsuoka : 88888
22:20:58 ニー ヤン : ありがとうございました!
22:20:59 terakawanaoko : 88888
22:21:01 Yuki Shigemi : 88888
22:21:02 messi_yuki : ありがとうございます!!!タメになりました!
22:21:04 KEISUKE HORIE/移動中… : 88888888
22:21:05 suzuki atsuko : ありがとうございました!
22:21:06 Yamamoto Tatsuo : 888888888
22:21:07 森 和恵 : 88888888888
22:21:08 yori3 : 88888888888
22:21:08 terakawanaoko : 8888888888
22:21:08 chefshinnosuke : 8888888888888888
22:21:11 Hiromi Kitakado : ありがとうございましたー888
22:21:12 Sayoko Miura : ありがとうございました
22:21:12 lunaluna : 88888888888
22:21:13 taka@sinyatyoukou : ありがとうございまし…