Shifter Online Meetup_1104

11月4日に行われた Shifter オンラインミートアップ、ヘッドレスCMS の Shifter Headless 活用特集のスライドです。

Transcript

1. 活用特集 #JP_GetShifter の基本と 最新アップデート情報
2. #JP_GetShifter HIROMI ITO DigitalCube Co. Ltd. Customer Marketing Manager • コミュニティ大好き！ Community Passionate Contributor • 好きが高じて？AWS Community Hero に選ばれました • Shifter 推しのプラグインは WP Search with Algoliaです • 目指せ！新米Youtuber ということで動画撮影に励んでます TW : @hiro_baila FB : https://www.facebook.com/hirobailaora
3. • Shifter の会社「DigitalCube」について • Shifter について • 最新アップデートの紹介 • Shifter Headless 活用特集に向けたウォーミングアップ #JP_GetShifter
4. の会社 について #JP_GetShifter
5. の会社 について #JP_GetShifter • AWS Advanced Technology Partner • WordPress のためのホスティング、制作、保守、コンサルティング • OSS への貢献とコミュニティへの参加・支援 ➔ 提供 WordPress プラグイン：100+ ➔ プラグインダウンロード数： 200万+ ➔ WordCampでの登壇：70+ ➔ Shifter コミュニティイベント支援プログラム： 16
6. 業界、規模、用途、国 さまざまなお客様を笑顔に！ハッピーに！ #JP_GetShifter
7. に新たな仲間が増えました！ #JP_GetShifter SHUSEI TODA DigitalCube Co. Ltd. Product Marketing & Sales Facebook：https://www.facebook.com/shusei.toda Twitter：https://twitter.com/shuseitoda 本日の通訳サポートをします！
8. について #JP_GetShifter
9. 世界に広がる の輪 • 世界をリードする企業、思想家、クリエイティブの方々、教育機関などが利用 • 世界約55ヵ所の国と地域であらゆるレベルのユーザー • 2016年に誕生、現在 スタンドアローンプロダクトから WordPress 用の Jamstackプロダクトを備えたプ ラットフォームへユーザーと共に進化 #JP_GetShifter
10. 個人ブログ、コーポレート、プロダクト、ブランド #JP_GetShifter
11. 非営利団体にも ！ #JP_GetShifter NEW！サクセスストーリー Blog : https://www.getshifter.io/ja/case-eboard/
12. 各種事例は サイト でご覧いただけます #JP_GetShifter Blog : https://www.getshifter.io/ja/showcase/
13. チュートリアルや機能情報は サイト でご覧いただけます #JP_GetShifter Blog : https://www.getshifter.io/ja/blog/
14. 頼れる パートナーに総合的な相談ができます #JP_GetShifter Blog : https://spn.getshifter.io/
15. お気づきの点、導入に関する質問、技術的な質問、私たちへのリクエストなど 思い立ったら即サポートチャットに連絡できるので安心です #JP_GetShifter Shifter サイト、Shifter ダッシュボードの右下をクリック。 日本語で話しかけてください！
16. #JP_GetShifter Shifter は 皆さんのフィードバックで 進化しています
17. • Shifterウェブサイトをリニューアル日本語に対応しました！ 最新アップデート情報 #JP_GetShifter https://www.getshifter.io/ja/
18. • Webhook を手動で再実行できるようになりました！ 最新アップデート情報 #JP_GetShifter https://www.getshifter.io/ja/shifter-webhook/ 「Outgoing Webhook at Generate」は、静的化済みの サイト（Artifact）を外部サービス・環境へデプロイを可能に する機能です。 これまで、Artifact の作成完了時に一度実行されるだけで した。今回のアップデートで、 Artifact 一覧から実行をした い Artifact を選んで外部サービス・環境へ Webhookを 実行できるようになりました。
19. • Shifterのアップデートで静的化処理速度が最大2倍に！高速化の実績と効果的な設 定を紹介。 最新アップデート情報 #JP_GetShifter https://www.getshifter.io/ja/shifter-update-subsequent-results/ このブログでは、パフォーマンスの状況がどのように変化し たのか更新後の報告を実際の数値に基づいて報告してい ます。 • 静的化の所要時間が大きく改善 • 静的化処理と Shifter Media CDN の関係
20. • Static / Headless ともに WordPress 5.5.3 に更新 • 各種 WordPress プラグインを更新 -- Static /「All-in-One WP Migration」バージョン 7.28 から 7.29 に適応。 -- Headless /「All-in-One WP Migration」バージョン 7.28 から 7.29 , Redirection 4.9 から 4.9.1 　に更新。 -- Headless / 「WP-GraphQL」バージョン 0.13.3 から 0.14.0 に更新。 -- Headless / 「WP Gatsby」バージョン 0.5.3 から 0.5.4 に更新。 -- Headless / 「ACF to REST API」バージョン 3.3.1 から 3.3.2, Redirection 4.8 から 4.9 に更新。 • Headless に WordPress プラグインを追加 -- 「Yoast SEO」バージョン 15.2 、「Add WPGraphQL SEO」バージョン 4.8.0 を追加。 • Static で利用する WordPress プラグイン「Search Everything」非推奨リストに追加 • Headless の headless-theme を 0.4 から 0.5 にマイナーアップデート 最新アップデート情報 #JP_GetShifter
21. アップデート情報 #JP_GetShifter • Shifter ダッシュボード / Static の各種サイトごとに 直近の WordPress PHP エ ラーログが確認できるようになります。どのプランでも確認できます。
22. #JP_GetShifter Shifterは、 WordPress のための Jamstack ソリューション
23. #JP_GetShifter Jamstack ってなに？
24. 公式サイトによると、、、 #JP_GetShifter Jamstack is an architecture designed to make the web faster, more secure, and easier to scale. It builds on many of the tools and workflows which developers love, and which bring maximum productivity. Jamstackは、Webをより速く、より安全に、そしてより簡単に拡張できるように設 計されたアーキテクチャです。これは、開発者が愛用し、最大の生産性をもたらす 多くのツールとワークフローに基づいて構築されています。
25. は 専門メディア でこう話しています #JP_GetShifter Matt Mullenweg and Jamstack Community Square Off, Making Long-Term Bets on the Predominant Architecture for the Web： https://wptavern.com/matt-mullenweg-and-jamstack-community-square-off-making-long-term-bets-on-the-pr edominant-architecture-for-the-web
26. 先日掲載された ではこのように紹介されています #JP_GetShifter Shifter hosts the WordPress site for you. You have two options: 1) run it headlessly (so you’re just hitting the API, REST or GraphQL, for data) or 2) run it statically (so when you have everything in WordPress where you want it, you deploy it, which creates a static version of your site, which they also host, or you can push it elsewhere e.g. Netlify). Chris Coyier, CCS Tricks Shifter は WordPress サイトをホスティングします。 Shifter を利用するには、2つのオプションがありま す。1) Headlessで使用する（つまり、データのために REST API や GraphQL を利用するだけ）か、 2) 静的ホスティングする（つまり、 WordPress 上での準備が整ったら、デプロイして静的バージョンのサイト を作成し、それを Shifter がホストするか、または Netlify など他の場所にプッシュする）。 WordPress and Jamstack： https://css-tricks.com/wordpress-and-jamstack/
27. つまり、、、 #JP_GetShifter Shifter は WordPress の利点、ユーザーエクスペリエンスと Jamstack の利点を併せ持つ SaaS です。
28. コンセプト #JP_GetShifter WordPress をモノリシックなスタックからマイクロサービスへシフトする SaaS を Shifter という形で提供しています。
29. メンテナンス不要、安全・高性能な WordPress 環境を実現した「Shifter Static」 #JP_GetShifter • WordPressサイトを独自のスタティックサイト ジェネレーターで静的化 • WordPress管理画面は必要なときだけ起動 • 世界100拠点以上のグローバルCDN経由で高 速・セキュアに配信できるオールインワン環境
30. あらかじめ ヘッドレス CMS として最適化された WordPress がセットアップ済のヘッド レス CMS「Shifter Headless」 #JP_GetShifter • Webフロントを WordPress テーマ以外で構 築、CMSは学習コストの低い WordPress を活 用 • ヘッドレスCMSに最適化済み・メンテフリーな常 時起動のWordPress環境を自動セットアップ • WAFやMediaCDN (メディアファイルの Amazon S3へのオフロード機能)を標準装備
31. #JP_GetShifter ヘッドレスCMS ってなに？
32. ヘッドレス のおさらい #JP_GetShifter ヘッド ＝ 表示画面（ビュー） レス ＝ がない CMS ＝ コンテンツ管理システム（WordPress）
33. ヘッドレス のおさらい #JP_GetShifter 主にグローバルを中心にヘッドレス CMS サービスがいくつかあります。 Shifter Headless もその中の一つです。
34. ヘッドレス のおさらい #JP_GetShifter 1. 柔軟な UI/UX デザインのサイト開発・実装が可能 フロントエンド開発が行えるため、多彩な開発手法の選択ができる。 自由度の高いデザインを構築することができる。 マルチデバイス管理ができる。
35. ヘッドレス のおさらい #JP_GetShifter 2. マルチサイト管理が可能 1レコード（データソース）として取り扱いができる。 同じコンテンツデータソースを複数サイトに表示させることができる。
36. ヘッドレス をおさらい #JP_GetShifter 3. コンテンツをモジュール化してサイトに組み込むことが可能 （例）ニュースだけコンテンツ管 理で更新
37. #JP_GetShifter 加えて、 Shifter Headless には 大きな利点があります
38. #JP_GetShifter ヘッドレス CMS の CMS 部分が WordPress であること
39. ・よくわからないCMSを更新者に使わせたくない ・誰もがわかるCMSなら使っても良い ・安心して決済できるサービスなら使っても良い 部分が だと嬉しいこと #JP_GetShifter 1. Jamstack / ヘッドレスCMS の導入に障壁となる開発者のジレンマを解消 ・UI/UX にこだわりたい！ ・開発を効率よくしたい！ ・新しい手法を取り入れたい！ ・もっと最適な方法で運営したい！ ＜エンジニア・システム運用＞ ＜マネージャー＞
40. 部分が だと嬉しいこと #JP_GetShifter 2. データソース更新における管理画面の学習コストやリソースを軽減 ・WordPress 聞いたことあるぞ、見たことあるぞ！ ・前使っていた画面と同じだ！ ・新しいことを新たに覚えなくても良さそう！ ＜更新者＞
41. つまり、、、 #JP_GetShifter Shifter Headless は、開発者の発想と実装を自由にし、更新者は無理のない効率の良いコンテンツ更新がで き、マネージャーは一元管理を可能にした、 WordPress が備わった Headless CMS です。 各ステークホルダーが集中して業務を行うためには、チームワーク・コミュニケーション・明確なワークフロールールが ヘッドレス CMS を使う場合においても重要なカギを握ります。
42. を使った基本の構成イメージ #JP_GetShifter
43. を使った サイト及びデザインシステム構成イメージ #JP_GetShifter
44. マーケティング部門の私が を使ったデザインシステムへの期待 #JP_GetShifter • 各種サイト（コーポレート、Shifter 、AMIMOTO）のコンテンツ更新の二重作業か らの解放、漏れなく・ミスなく管理 • システム環境、コンテンツ管理環境の統一・一元化
45. #JP_GetShifter Shifter Headless を使った基 本のチュートリアルを やってみよう！
46. #JP_GetShifter https://www.getshifter.io/ja/gatsby-shifter-headless/
47. #JP_GetShifter https://www.getshifter.io/ja/ionic-shifter-headless/
48. #JP_GetShifter https://www.getshifter.io/ja/frontity-shifter-headless/
49. オンラインミートアップ 回も参考に、ヘッドレスコマースも。 #JP_GetShifter 高崎さんの発表 https://speakerdeck.com/nplusone/shopifytoga tsbyjswoshi-tuta-hetudoresukomasuru-men https://www.getshifter.io/ja/shifter-meetup-august5-report/ 岡村さんの発表 https://speakerdeck.com/benzookapi/shifterdef alseshopify-headless-commercefalsehuo-yong
50. 次回イベントの案内 #JP_GetShifter
51. イベント情報 #JP_GetShifter テーマ「 」と のコラボレーション企画 月 日（火） と テーマを 使って で安全な静的 サイトを作ってみよう！ https://vektor.connpass.com/event/193768/
52. イベント情報 #JP_GetShifter 今年最後の オンラインミートアップ 月 日（水） 大忘年会 ＜予定＞ • サクセスストーリー、活用シェア LT大会 • ウルトラクイズ大会 https://eventregist.com/e/hmIbFvGC9Oic
53. フィードバックお待ちしてます #JP_GetShifter