Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

201802 WordBench Nagoya

570 views

Published on

201802 WordBench Nagoya

Published in: Software
  • Be the first to comment

201802 WordBench Nagoya

  1. 1. 備えあれば憂い無し!  Gutenbergについて知ろう! 2018.02.10 WordBench Nagoya @1shiharaT
  2. 2. PROFILE ・熊本県天草市 出身 ・色んな分野を浅く広く ・5人兄弟の長男 ・貧乏 ・反骨心 ・SF好き ・マリオの縄跳びが飛べない 石 原 隆 志ishihara takashi  @1shiharat
  3. 3. GrowGroup株式会社 URL: https://grow-group.jp/
  4. 4. GrowGroup株式会社 人、ぼしゅうしています ちょっとだけ宣伝
  5. 5. 事の発端
  6. 6. ん?
  7. 7. あれ?
  8. 8. ハードル高い... http://onocom.net/blog/wordpress-gutenberg/ https://qiita.com/kurudrive/items/5b0d763367e4177eefbb
  9. 9. 目次 1. Gutenberg って? 2. Gutenberg でできること 3. WordPress 5.0 更新時の影響・注意点 4. Gutenberg をカスタマイズする
  10. 10. 1. Gutenbergって? What’s
  11. 11. 1. Gutenbergって? ・WordPress 5.0から搭載予定のブロック型の新しいエディタのプロジェクト名 ・2017.01.05にMatt Mullenwegさんがキックオフ ・Github上で開発されており、現状プラグインとしてインストール可能 概要
  12. 12. 1. Gutenbergって? 名前の由来
  13. 13. 1. Gutenbergって? 目的 目標は、新しい投稿およびページ編集経験を創り出し、  誰でもリッチなレイアウトの記事が簡単に作成できるよう  にすること。 by Google 翻訳 The goal is to create a new post and page editing experience that makes it easy for anyone to create rich post layouts. https://wordpress.org/gutenberg/handbook/
  14. 14. 1. Gutenbergって? 特長 なんで?
  15. 15. 1. Gutenbergって? 特長 今のWordPressには、  どんな執筆方法があるのか?
  16. 16. 1. Gutenbergって? 特長 ・TinyMCEのエディタ操作  ・ショートコード  ・URL埋め込み  ・カスタムフィールド  ・カスタムHTML
  17. 17. 1. Gutenbergって? 特長 UIが統一されていない  =   学習コストが高い  =   執筆の障壁が高くなる
  18. 18. 1. Gutenbergって? 特長 Gutenberg  1. ブロックを探して
  19. 19. 1. Gutenbergって? 特長 Gutenberg  2. 追加して
  20. 20. 1. Gutenbergって? 特長 Gutenberg  3. 編集する
  21. 21. 1. Gutenbergって? 特長 Gutenberg  すべての執筆操作は、ブロックを介して行うようにUIを統一  =   ユーザーの経験が統一される  =  学習コストが低くなる
  22. 22. 1. Gutenbergって? 特長 Gutenberg  目標は、新しい投稿およびページ編集経験を創り出し、  誰でもリッチなレイアウトの記事を  簡単に作成できるようにすること。
  23. 23. 1. Gutenbergって? 特長 Gutenberg  https://ja.wordpress.org/philosophy/
  24. 24. 1. Gutenbergって? 特長
  25. 25. 1. Gutenbergって? 特長 でも、  怖い、、、、
  26. 26. 2. Gutenbergでできること Can
  27. 27. 2. Gutenbergでできること ブロック  追加  編集・設定  削除  並替  再利用 記事設定 ・公開ステータス  ・カテゴリ  ・アイキャッチ画像  ・公開日 ・抜粋文  ・投稿フォーマット  ・コメント設定
  28. 28. 2. Gutenbergでできること ブロック ・たくさんブロックが用意されています。 詳細は以下の記事を参照 http://onocom.net/blog/wordpress-gutenberg/  追加
  29. 29. 2. Gutenbergでできること ブロック ・追加したブロックに対して、編集  編集・設定
  30. 30. 2. Gutenbergでできること ブロック ・追加したブロックに対して、設定  編集・設定
  31. 31. 2. Gutenbergでできること ブロック ・追加したブロックを削除  削除
  32. 32. 2. Gutenbergでできること ブロック ・追加したブロックの並び替え  並替
  33. 33. 2. Gutenbergでできること ブロック ・追加したブロックを保存  再利用
  34. 34. 2. Gutenbergでできること ブロック ・再利用可能なブロックに変換  再利用
  35. 35. 2. Gutenbergでできること ブロック ・保存したブロックはブロックの追加から簡単に呼び出せる  再利用
  36. 36. 2. Gutenbergでできること ブロック ・再利用可能なブロックは、編集すると他に利用している箇所すべてにおいて変更される  再利用
  37. 37. 2. Gutenbergでできること ブロック ・再利用可能なブロックは、切り離して通常のブロックに戻すことも可能  再利用
  38. 38. 2. Gutenbergでできること 記事設定 ・これまでと同じような項目の設定ができる(ようになる)
  39. 39. 2. Gutenbergでできること デモ
  40. 40. 2. Gutenbergでできること その他こんな機能もあったんだ的なこと ・複数選択操作 ・テンプレート機能 ・貼り付けサポート
  41. 41. 2. Gutenbergでできること グリッドや、ブロックをネストできる
  42. 42. 3. WordPress5.0へ更新時の注意点 Warning
  43. 43. 3. WordPress5.0へ更新時の注意点 ・そもそもいつ? 2017年11月27日時点では9%
  44. 44. 3. WordPress5.0へ更新時の注意点 実際に入れてみた
  45. 45. 3. WordPress5.0へ更新時の注意点 ・デフォルトで有効になる ・TinyMCEで開くすべは残っている -> いつまで残るかは怪しい ・そのまま編集すると、Classic ブロックに変換  -> 普通に変換すると、崩れる可能性大
  46. 46. 3. WordPress5.0へ更新時の注意点 ・プラグインは注意が必要  ・すでにインストールしているプラグインは、5.0に対応しているかどうか   確かめた上で更新 ・メタボックス系はカバーされているが、ACF等は現状正常に動作しない ・編集画面に何か追加するようなプラグインは、動作しない可能性あり
  47. 47. 3. WordPress5.0へ更新時の注意点 ・ステージング環境があれば、一度プラグインを入れてみて確認。 ・更新しても、しばらくはこれまでのエディタがサポートされる可能性高い ・リテラシーの高い人だと大丈夫。受託系だと先方担当者の学習コストかかる
  48. 48. 3. WordPress5.0へ更新時の注意点 前もってこころの準備をしておきましょう
  49. 49. 4. Gutenbergのカスタマイズ Customize
  50. 50. 4. Gutenbergのカスタマイズ https://wordpress.org/gutenberg/handbook/
  51. 51. 4. Gutenbergのカスタマイズ どんなカスタマイズが可能なのか
  52. 52. 4. Gutenbergのカスタマイズ 4.1 テンプレート機能 ・投稿タイプごとに、予めブロックの組み合わせを用意できる ・ロック(削除も並び替えもできない)も可能
  53. 53. 4. Gutenbergのカスタマイズ 4.1 テンプレート機能 function register_post_type_templae() { $args = array( ‘public’ => true, ‘label’ => ‘Books’, ‘show_in_rest’ => true, ‘template’ => array( array( ‘core/image’, array( ‘align’ => ‘left’, ) ), array( ‘core/heading’, array( ‘placeholder’ => ‘Add Author…’, ) ), array( ‘core/paragraph’, array( ‘placeholder’ => ‘Add Description…’, ) ), ), ); register_post_type( ‘book’, $args ); } add_action( ‘init’, ‘register_post_type’ );
  54. 54. 4. Gutenbergのカスタマイズ 4.2 ブロックAPI ・自作ブロックの作成 ・React を利用している ・es5でも書ける
  55. 55. 4. Gutenbergのカスタマイズ 4.2 ブロックAPI ・カスタムフィールドにも保存できる -> ちょっと面倒 ・REST APIから呼び出したりも可能   -> 動的なブロックの作成もわりと簡単 https://github.com/WordPress/gutenberg/blob/master/docs/blocks-dynamic.md
  56. 56. 4. Gutenbergのカスタマイズ 4.2 ブロックAPI ・ジェネレーター的なツールも着々とでている ・WP CLI   ・ Create Guten Block https://github.com/ahmadawais/create-guten-block
  57. 57. いろんな機能がてんこ盛りの Gutenberg
  58. 58. きっとアイデア次第でみらいは広がる
  59. 59. Gutenbergでできることを考えてみよう!

×