それでは、時間になりましたので、ただいまではのセッションを開始いたします。より便利に、効率よくワードプレス時期エビーター・グーデンベルクの基本的操作を知って評価が使い始めよう。このセッションは、哲園ままさんにご登壇いただきます。いままさんは、株式会社アニマゲートの代表者として、ウェブ再制作をする方々、ご自身で運営する技術ブログや情報発信を活発に行っています。ワードプレス公式で行くと言うでは、プラグインやテーマも公開されています。こちらのセッションでは、時期メジャーリリースとなるワードプレス5.0で導入される新エビーター・グーデンベルクをもっと詳しく知りたい角向けに、この一体によって何が変わるのか、何を準備しないといけないのか、最低限に準備しなきゃいけないことですね。そういったことを、でも交えながらお話ししていただきます。では、よろしくお願い致します。拍手お願いします。それでは、始めます。このセッションの対象となるかかっていうのは、今ご説明あったとおり、これからグーデンベルクを使ってみたいという方とか、正式リリース前に何を準備すればいいのかというのを知りたい方を対象としています。で、これ15分の枠の中でお話をするので、結構駆け足になってしまうんですけど、あとです、このスライドは公開します。で、この発表の様子も、もちろんなんか動画で公開されるようなので、振り返りなどの資料としてご活用いただければなと思います。で、あとこのスライドの撮影ももちろんオッケーなので、バンバンしてください。で、もし撮っていただけるようでしたら、ついでにハッシュタヌ、今ある表示されてると思うんですけど、それをつけて感想などをツイートとかしていただけるととても嬉しいです。僕、後で追いかけます。はい、というわけでよろしくお願いします。はい、で、早速ですけど、文字ご紹介から出ます。この真ん中に、今スクリーに表示されてるようなのが、僕、こんなアイコンでちょっとやってます。で、名前は今村哲ですやってるんですけど、ボーや今村っていうのってやってます。で、出身は豊山県。で、今東京都の順城に住んでいます。僕の略歴をちょっと簡単にご紹介します。2006年からワードプレスを触り始めて、ワードプレスのことわかんないなと思いながら、技術ブログのワードプレスで立ち上げたのが2008年。そこからブログで技術情報を発信していくうちに、だんだんお仕事をいただく、ブログ経営でお仕事をいただく機会が増えまして、2010年に独立をしました。で、その後、2016年に法人化して現在に至ります。で、僕がやってることっていうのは、ちょっといろいろ書いてるんですけど、ウェブサイトの政策とかサービスの運営とかもやってますし、ワードプレスのようなCMSの構築、あとECサイトの構築などもやってます。で、あと意外と思われるかもしれないですけど、一応デザインとかもやってます。名刺とかロゴとかも政策してます。さっきのロゴとかも僕が作りました。で、名刺も僕が作ってるんで。で、あとはウェブ政策会社や技術指導みたいなこともやってまして、ウェブ政策、これからウェブ政策をして、仕事としたいなっていう方とかに技術を教えてたりもしています。で、ワードプレス歴が結構長いので、いろんな案件やったりもするんですけど、ワードプレスを使ったかなりないのが高い政策もやってます。という流れもありつつ、なるべくコードをかかずにメントナイスコンストを抑えるワードプレスの構築もやってます。というわけで、何か困ったらご存在ください。で、ワードプレスに関する活動っていうのをちょっとピックアップしますと、ワードプレスの公式プラグインっていうのをニューポストキャッチっていうのがあるんですけど、それを2012年にリリースして、今も配布中です。で、テーマはワードプレスの公式テーマで、2011年までにしきってやつを2017年の12月くらい公開登録しました。そんな活動をしていると、ワードプレスの全国で開催されているベンチというイベントがあるんですけど、それの公園なのでテーマについてお話させていただいたり、去年のワードキャンプ東京とか、今年の6月に開催されたワードキャンプ大阪などでもお話させていただく機会をいただいてます。それで現在になります。そんなネットでの活動をしながらも執筆活動の機会をいただきまして、現場のためのSWIFT4っていうのを今年の5月に表彰ですけど、執筆して出版しました。これ、ワードプレスに関する情報も載ってまして、ワードプレスレストAPIを使ったiOSアプリの開発ができます。もし、気になる方は近くの音楽書店とかAmazonなどでチェックしてください。というわけで、自己紹介はこれくらいにしてセッションの流れについて簡単にご紹介します。まず、グーテンベルグの概要についてとグーテンベルグで何が変わるのかという話とあと操作でもこの本を見てもらうのと最後に正式リリース前に最低限に準備するのはないかということをご紹介したいと思います。じゃあ行きますね。グーテンベルグの概要をまずお話します。グーテンベルグとは何かということなんですけど、グーテンベルグの名前の由来とかはまた個別でお調べいただくこととして一番知っていただきたいのはワードプレス5.0より実装される新しい名前だということを覚えていただきたいなと思います。この右側に、スクリーンの右側にあるのはロゴマーズですね。かっこいいですね。で、今ワードプレスのバージョンって4.9.8が最新だと思うんですけどグーテンベルグのプラグインを入れることで先行して使うことができます。でですね、逆にっていうのはあれなんですけどプラグインを入れなくても実は今スクリーンの下側にURLが載ってると思うんですけどそこのURLにアクセスするとプラグインを入れなくてもグーテンベルグをお試しすることができます。なので、ちょっと触ってみたいなという方は触ってみてください。じゃあ次いきますね。で、このグーテンベルグっていうのを新エディターっていうことで一体何が変わるのかっていうのを簡単にお話しますと投稿や固定ページの編集画面が変わります。今スクリーンにある左側がQエディター右側がグーテンベルグですね。結構変わってますね。でも編集画、入力位置とかは変わってないんですけど変わってあります。次、グーテンベルグではQエディターと違ってブロックっていうものを使ってページを作成することになります。なので、ブロックにはさまざまな種類があってコンテンツに対応したブロックが用意されてます。もう少し紙具体で説明すると例えば今スクリーンの右側にあるように見出しとか画像とかリストといった専用のブロックを使ってページを作成していくことになります。なのでQエディターとはもう作り方がまるく違うと思っていただいた方がいいと思います。今お話したことっていうのは大学でまとめると操作方法が変わるっていうことなんですよね。ただ変わるものもあれば変わらないものもあります。ということでQエディターとの共通点をシンプルに言いますと本当にシンプルですよ。これですね。コンテンツを作成できるということは共通してるんですよ。コンテンツをページと読み替えてもいいです。つまりどちらのエディターを使ってもコンテンツが作れるんだということさえページが作れるんだということさえ今回のセッションでなんとなく感じいただければなと思っています。というわけでここからは実際に空天ベルグの操作でも再生しながら画面についていくつか紹介します。まずは空天ベルグの特徴の一つでもあるブロックの追加方法をご紹介します。ブロックを追加する方法というのはいくつかあります。今回はプラスアイコンから追加する方法をご紹介します。編集画面の今スクリーンに出ているのが編集画面なんですけどそこの入力エリアの少し左側にマウスを持っていくとプラスアイコンが表示されます。ここから追加するブロックを選ぶことができます。あと今表示されている編集画面の左上にもプラスアイコンがありますよね。ちょっとちっちゃいかもしれないですけどね。あります。どちらでもいいのでアイコンを押すと追加するブロックを選ぶことができます。というわけで動画再生してみますね。お、再生になった。ブロック追加みなしブロック追加みなしちょっと勢いつけてね。次はこれ左上からプラスボタンを押してね。プラスアイコンを押してね。次はリストを追加してますね。リスト1、リスト2みたいな。はい、こんな感じですね。次いきます。次は他のブロックに変換する方法をご紹介します。今このスクリーンには3つの段落のブロックが表示されています。この中から一番上のテキスト1というブロックがあるんですけどそれをみなしブロックに変換します。じゃあ動画を見てみましょう。動くテキスト1をフォーカスさせて変換。みなしに変換。はい、みなしに変換されました。これまた元に戻すこともできますね。他のブロックにさらに変換することもできます。こんなことができます。これQエディターとかでもやっぱりやってましたよね。多分これはいつも使うんだろうなと思います。じゃあ次いきますね。次はブロックにフォーカスする方法をご紹介します。通常ですと作るページのボリュームが増えるにつれてブロックの数も増えると思うんですよ。今のグルテンベルブの仕組みで言うとね。なのでたくさんのブロックがあると今選択しているブロックを見失う場合があります。なのでそんなときはスポットライトモードというものを設定すると選択しているブロックを強調させることができます。じゃあ動画を見てみましょう。右上に詳細名義があるのでそこからスポットライトモードを選択します。すると選択したブロックがこの強調されて表示されるようになりますね。これがスポットライトモードですね。次はエディターを切り替える方法をご紹介します。Qエディターではビジュアルエディターとテキストエディターの2パターンの切り替えができてたんですけどグーテンベルクでも似たようなことができます。じゃあ動画を見てみましょう。これも右上のメニューがあってフォードエディターという切り替えることでセキストエディターっぽいことができる。ビジュアルエディターにも切り替え戻すことができる。ただ今ちょっと見てもらったら分かったと思うんですけどフォードエディターを表示したときにQエディターとは違ってグーテンベルク専用タグみたいなものが追加されていると思います。これは多分今までのQエディターはちょっと違うのでここは注意してください。じゃあ次はソーシャルメディアとか動画の埋め込み方法をご紹介します。動画ではツイッターのツイートを埋め込んでいますので動画を見てみましょう。ツイッターのブロックがあるので選択。ツイートのURLを埋め込みます。こんな感じでこれが登壇決まりましたというツイートですね。こんな感じですね。次いきます。次はショートコードを入力する方法をご紹介します。ショートコードを使ってトーコア固定ページを作っている方は結構いらっしゃると思うので動画を見てみましょう。はい、こんな感じですね。ショートコードのブロックがあるので入り付けると。はい、こんな感じです。次は結構重要なのでぜひとも覚えていただきたいです。Qエディターで作ったトーコア固定ページをグーテンベルクで編集する場合というのは一つのクラシックブロックの中にまとめられています。見出しだろうがリストだろうが全て一まとめにされていますのでこれをグーテンベルクに変換するために対応するためにブロックへ変換というのをします。動画を再生しますね。オーカーさせてブロックへ変換。こうしたら対応するブロックに変換してくれますと。ちょっと時間がないのでもうちょっとかき足していきますね。最後にショートカット系を使ったブロックの追加方法をご紹介します。反覚スラッシュを入力してブロックの一覧を素早く表示することができます。動画を見てみましょう。反覚スラッシュを手に出し、また反覚スラッシュを入れると後部が出てくるのでそこからリスト。また反覚スラッシュを入れて次は引用ですね。引用ブロック。というわけで一部のみご紹介したんですけどどうですかね。他にもこんなことできますかみたいな疑問はあると思うんですけどとても15分間では紹介しきれない上にデータの使い方ってさまざまなと思うんでもし気になるとこがあれば実際に触ってみてください。ということでこれまで操作でも交えてグーテンベルグについて簡単にご紹介しましたがワードプレスの高点0で正式に実装されたときにいきなりグーテンベルグで投稿や固定ページを作りましょうって言っても多分難しいと思うんですよ。なので今お試しできるこの期間中に最低限準備しておいた方がいいことをまとめましたので一番Qエディターとグーテンベルグの両方のエディターを使える状態にしておいた方がいいです。その方法っていうのはクラシックエディターっていうQエディターを使い続けられるプラグインがありますのでインストールしましょう。プラグインをインストールした後に設定画面を開いてグーテンベルグエディターをデフォルトで使いQエディターのプラグインのリングを含めるにチェックを入れると投稿や固定ページを新規作成するときにどちらも選ぶことができます。過去に作成した投稿や固定ページもエディターで編集することなどどちらのエディターでも編集することができます。ということでどちらも使える状態にしとけば正式リリース前までにグーテンベルグの操作や対応に間に合わなかったとしてもQエディターを使い続けることができると思います。ただどちらも使える状態にはなっているんですけどいずれはグーテンベルグの見つかう方法を目指した方がいいと思います。いくつか理由はQエディターよりも断然グーテンベルグと方が便利で早く記事を作成することができます。僕はグーテンベルグは今本をメインに使っています。というわけでもう一つ、両方のエディターを使えるようにした後というのは新しい環境になれるという意味で実際にグーテンベルグを使って投稿や固定ページを作ったり編集などをして操作になれることをお勧めします。つまり実際に触ってみようということですよね。これは一般環境でやるよりはテスト環境を作ってそこで操作したほうがいいです。それでもう一ついきますね。先ほど動画でもご紹介したんですけどQエディターを操作する中でQエディターで作った投稿や固定ページを編集する必要性も出てきます。そんなときはQエディターに対応するためブロックへ変換する作業をしてみたほうがいいです。ブロックへ変換するとQエディターで作ったページが対応するブロックにちゃんと変換されるかどうか実際に確かめてみることをお勧めします。大体は対応できるんですけどページを作り方によっては一部のコードが消えてしまう場合もあります。でですね、ブロックへ変換するとコードが消えてしまったりQエディターで使えた機能が使えないという場合もあるかもしれないんですよね。そんなときはカスタメHTMLブロックを使ってQエディターで作られたコードを維持しておきましょう。このコードを維持する方法というのは僕最近YouTubeチャンネルを始めたんですけどそこで操作法を公開しますのでそちらをご参考ください。というわけで今は正式リリース前ということでリリースに向けて随時機能の追加や修正などのアップデートが行われています。もしグーテンベルグを使ってわからないことがあればプラグインのサポートフォーラムなどで同じ疑問を持っていらっしゃるかともいらっしゃるかもしれないのでそこで確認しましょう。また操作中に意図しない動作などを発見した場合はフィードバックを送るのもいいと思います。そんなグーテンベルグなんですけどワートクプレス5.0で正式に実装される今の間こそ準備期間として操作になれるため使い始めるときではないかなと僕は思っています。もしこの発表を聞いた上でちょっと触ってみようかなとか今日から準備始めようかなとか少しでも感じていただけますと嬉しいです。というわけで僕のメインの発表は終わりなんですけどここからちょっと主な活動をご紹介させていただきたいと思います。僕はワートクプレスの公式テーマの2式というのは公開します。冒頭でもちょっとお話ししましたね。これグーテンベルグの一部対応しますので無料で公式テーマダウンロードできますのでぜひ試してみてください。ワートプレステーマの専用のプラグインで2式専用のプラグインというのがあるんですけど拡張プラグインというものも提供しますのでぜひこちらも使ってみてください。あとですね2式テーマの拡張プラグインというのが一応優勝なんですけど最近9月10日よりアフィリエートプログラムというのを開始しましてアフィリエートプログラムを簡単にご説明するとお持ちのウェブサイトを介して拡張プラグインの販売が成立すると紹介というのが受け取れる仕組みです。これ詳しくは僕のサポート専用サイトのサポートピアというサイトとか今日お話しかけていただければ詳しくご紹介したいと思います。というわけでもし僕の活動とか今お話しした内容とかねワートプレステーマに関する情報というのはTwitterとかYouTubeで発信してますのでぜひともフォローとチャンネル登録よろしくお願いします。先ほども申し上げましたけどもYouTubeチャンネル7月末とかに作り始めてちょこちょこ動画を上げているので今そっちをメインにやってます。というわけでYouTubeチャンネルを利用してワードキャンプ東京今日の発表ですね今日のワードキャンプ東京の登壇した後この後ずっと参加するんですけどその後の感想などを普通の15時からライブ配信しますのでもし良ければ配信中チャットなどでお参加いただければなと思います。というわけで続きはこの深海でよろしくお願いします。以上で発表を終わります。ありがとうございました。