コンテンツ設計手法で変更に強いアプリケーションを実現する〜ローコードによるWebアプリのバックエンド実装 #CNDF2023

https://event.cloudnativedays.jp/cndf2023
https://event.cloudnativedays.jp/cndf2023/talks/1908

Transcript

1. コンテンツ設計手法で 変更に強いアプリケーション を実現する ローコードによるWebアプリの バックエンド実装 ゼロベース株式会社 石橋秀仁 アクイアジャパン 丸山ひかる
2. – コンテンツファーストでの 設計アプローチのエッセンス – Drupalによる構造化コンテンツの実現 – クラウドネイティブなPaaS環境 「Acquia Cloud Platform」について – まとめ アジェンダ
3. コンテンツファースト での設計アプローチの エッセンス
4. 情報アーキテクト information architect (IA) World IA Day 福岡オーガナイザー (2020-) ゼロベース株式会社 代表取締役 (2004-) 前半のスピーカー：石橋秀仁
5. 監訳書： Designing デザイニング Connected コネクテッド Content コンテント デジタルプロダクトの 長期的な成長を支える 構造化コンテンツ 今回お話しする内容
6. • ユーザー・インターフェイス(UI)を改造しやすい • アプリケーションを改造しやすい • コンテンツ管理システム(CMS)を改造・置換しやすい • コンテンツを編集・移設しやすい • コンテンツ構造を改造しやすい 「変更に強いアプリケーション」とは？
7. “ そもそも、なぜ変更が生じるのか？ 変化の剪断層 構成要素の変化速度が異なるた め、建物は常に自分自身を引き 裂いている。 スチュアート・ブランド せんだん How Buildings Learn: What Happens After They're Built by Stewart Brand (1994)
8. 文明のペース・レイヤリング ‘The order of civilization’ from The Clock Of The Long Now: Time and Responsibility by Stewart Brand (2008)
9. 情報アーキテクチャのペース・レイヤリング ユーザー・インターフェイス (UI) コンテンツ管理システム (CMS) コンテンツ コンテンツ構造 ドメイン構造 アプリケーション
10. “ アプリケーションは生魚のように足が早く、 コンテンツはワインのように熟成する。 Applications age like fish, content ages like wine. なぜ「コンテンツ・ファースト」は変化に強い？
11. • つながりあったコンテンツ • 細かく切り刻まれたコンテンツ • コピペせず、再利用するコンテンツ 変化に強い「構造化コンテンツ」 structured content connected chunked COPE (create once, publish everywhere)
12. コンテンツのかたち：ブロブよりチャンク blob chunk 図版引用元：『 DESIGNING CONNECTED CONTENT デジタルプロダクトの　長期的な成長を支える構造化コンテンツ』 マイク・アザートン、キャリー・ヘイン共著、石橋秀仁監訳
13. チャンクを再利用して、リソースを構成する 図版引用元：『 DESIGNING CONNECTED CONTENT デジタルプロダクトの　長期的な成長を支える構造化コンテンツ』 マイク・アザートン、キャリー・ヘイン共著、石橋秀仁監訳
14. つながりあったコンテンツ 人物ページにセッション セッションページに人物 人物のインデックス 図版引用元：『 DESIGNING CONNECTED CONTENT デジタルプロダクトの　長期的な成長を支える構造化コンテンツ』 マイク・アザートン、キャリー・ヘイン共著、石橋秀仁監訳
15. 1. ドメインの調査 2. ドメイン・モデリング 3. コンテンツ・モデリング 4. コンテンツ設計 5. コンテンツ管理システムの設計・実装 6. コンテンツの制作・パブリッシュ 構造化コンテンツの開発プロセス
16. ドメイン・モデル 図版引用元：『 DESIGNING CONNECTED CONTENT デジタルプロダクトの　長期的な成長を支える構造化コンテンツ』 マイク・アザートン、キャリー・ヘイン共著、石橋秀仁監訳
17. コンテンツ・タイプ 図版引用元：『 DESIGNING CONNECTED CONTENT デジタルプロダクトの　長期的な成長を支える構造化コンテンツ』 マイク・アザートン、キャリー・ヘイン共著、石橋秀仁監訳
18. コンテンツ・モデル 図版引用元：『 DESIGNING CONNECTED CONTENT デジタルプロダクトの　長期的な成長を支える構造化コンテンツ』 マイク・アザートン、キャリー・ヘイン共著、石橋秀仁監訳
19. コンテンツ・リソース 図版引用元：『 DESIGNING CONNECTED CONTENT デジタルプロダクトの　長期的な成長を支える構造化コンテンツ』 マイク・アザートン、キャリー・ヘイン共著、石橋秀仁監訳
20. CMSフィールド仕様 図版引用元：『 DESIGNING CONNECTED CONTENT デジタルプロダクトの　長期的な成長を支える構造化コンテンツ』 マイク・アザートン、キャリー・ヘイン共著、石橋秀仁監訳
21. Drupalのコンテンツ・タイプ 図版引用元：『 DESIGNING CONNECTED CONTENT デジタルプロダクトの　長期的な成長を支える構造化コンテンツ』 マイク・アザートン、キャリー・ヘイン共著、石橋秀仁監訳
22. ユーザー・インターフェイス 図版引用元：『 DESIGNING CONNECTED CONTENT デジタルプロダクトの　長期的な成長を支える構造化コンテンツ』 マイク・アザートン、キャリー・ヘイン共著、石橋秀仁監訳
23. • 作る、使う、考える のサイクルを高速に回す • みんなを巻き込んで • ノーコード／ローコードで • デプロイ自動化(CI/CD)で 構造化コンテンツのプロトタイピング 調査 実装 設計 評価
24. Drupalによる 構造化コンテンツの 実現
25. Drupal Meetup Tokyo オーガナイザー (2022-) アクイアジャパン テクニカルトランスレーター (2004-) 後半のスピーカー：丸山ひかる
26. Drupalとは 作者 Dries Buytaert 言語 PHP ライセンス GPL v2以降 初回リリース 2001年1月15日 公式サイト drupal.org ソースコード git.drupalcode.org/project/drupal 最新バージョン 10.1.x (2023年8月時点) – デジタル体験を提供する、オープンソースの CMS(コンテンツ管理システム)です。 – LAMPスタックで動作します。 – 企業サイト、多言語サイト、ポータルサイト、 ヘッドレスCMSとして利用事例が多々ありま す。 – NASA、オーストラリア政府、NASDAQなど の金融機関から、ネスレ、ファイザー、IBM など様々な組織がDrupalを採用していま す。
27. バックエンドAPIサービスとしてのDrupal DrupalはCMSとして有名で、企業サイトでの利用事例が圧倒的に多いですが、DrupalはバックエンドAPI サービスとして利用するに十分なプラットフォームです。 1. コンテンツモデリング：Drupalでは柔軟なコンテンツ構造を構築できるアーキテクチャとUIを備えて います。 2. モダンな技術スタック：Twig/DI/Routing等のSymfonyコンポーネント、Twig、Composer、PHPUnit がDrupalに組み込まれていることで、Webアプリケーションフレームワークさながらの実装が行えま す。 3. 豊富な拡張機能：巨大なOSSコミュニティから提供される数万個ものコントリビュートモジュール（拡 張機能）を活用することで、カスタムコードを最小限に抑えながら機能拡張できます。 4. Web APIへの対応：近年ではAPI-Firstを掲げてより良い構造化データエンジンおよびWebサービス プラットフォームに対応させる取り組みが始まっています。
28. Drupalでの プロトタイピングデモ
29. Drupalで高速プロトタイピング 1. コンテンツモデルをDrupalで表現する 2. DrupalのWeb API化 3. フロントエンドとの統合
30. 1. Drupalでコンテンツモデリングをしよう Drupalで高速プロトタイピング – Drupalには「コンテンツエンティティ」と呼ばれる、コンテンツ の永続的なストレージに使用されるオブジェクトがありま す。 – Drupalでデータを扱う方法の一つであり、データやコンテン ツのモデリングを行います。 – 標準で「コンテンツ」「タクソノミー」「ユーザー」「メディア」な どいくつか型が用意されており、 Drupalの管理画面でそれ らの設定を定義できます。 – コンテンツエンティティとして生成されたインスタンスは共通 の仕様でデータの操作が行えます。
31. 2. Web APIに対応させる Drupalで高速プロトタイピング – Drupalで標準採用されているREST API – Drupalには、標準機能としてREST APIに対応しています。これ は、コンテンツエンティティをJSONでCRUD操作できるもので す。 – JSONでAPIを作成するためのオープンスタンダードな仕様 「JSON API」に準拠しており、共有された規約に従うことで RESTful APIを迅速かつ一貫して作成できます。 – 拡張機能でより実用的に – Drupalのコントリビュートモジュールの中にはGraphQLフォー マットを提供するもの、OAuth認証を実現するものなどがあり、 コードを書かずにこれらの機能を実現できます。
32. 3. フロントエンドの実装 Drupalで高速プロトタイピング – モダンJavaScriptフレームワークとの統合 – DrupalのフロントエンドとしてNext.jsと連携する プロジェクトがあります。 https://next-drupal.org/ – Drupalはそもそも「CMS」なので・・・ – フロントエンドの画面はDrupal側で簡単に用意 できます。 – Drupal.orgで数多くのテーマ（＝フロントエンド のレイアウト）が公開されています。
33. Drupalで高速プロトタイピング まとめ 1. コンテンツモデルをDrupalで表現する データやコンテンツのモデリングをUI上から行えます。作成されたコンテンツは全てコン テンツエンティティとして共通の仕様でデータ操作ができます。 2. DrupalのWeb API化 標準機能としてREST APIに対応している他、様々な拡張機能によって実用的なWeb APIを実装できます。 3. フロントエンドとの統合 Next.jsとDrupalをシームレスに連携するプロジェクトが立ち上がっており、素早くフロン トエンドを実装できます。要件によってはCMSでバックエンドもフロントエンドも賄うことも 可能です。
34. クラウドネイティブな PaaS環境、Acquia Cloud Platformについて
35. Drupalの開発ワークフロー 1. 計画：機能やデザインの開発をいつまでにどれだけ行 うかを決めます。 2. ビルド：機能実装（コーディング）とコンパイルを行いま す。 3. テスト：コードをテストします。 4. レビュー：コードのレビューを行います。 5. デプロイ：ホスティング環境にコードを反映します。 これらはすべて でシームレスに行うこと ができます。
36. – Drupalサイトを運用、サポートする環境を PaaSとして提供します。 – デプロイプロセスをサポートするセキュア なインフラと開発ツールを備えています。 Acquia Cloud Platform Drupalを開発/ホスティングするためのクラウドプラットフォーム
38. 2021年3月〜、KubernetesとAWSの最新技術をフル活用し て、Acquia Cloud Platformを完全に再設計した次世代のプ ラットフォームに生まれ変わりました。 コンテナ化と動的スケーリングにより、Cloud Platformを利用 するお客様の体験をより最適化できるようになりました。 大規模なリプラットフォームを実施 https://www.acquia.com/jp/blog/acquia-cloud-next-journey-platform-modernization-scale
39. Acquia Cloud Platformのインフラ構成 RESILIENT EDGE CLUSTER* データベース層 (HA) AWS Aurora Provisioned (Pooled by Default) ファイルサーバー層 (HA) AWS EFS (Pooled by Default) NEW WEB LAYER AMAZON EKS Pods for: Apache / PHP, Memcache, Cron, & SSH EC2 - AZ1 EC2 - AZ2 EC2 - AZ1 EC2 - AZ2 KUBERNETES CLUSTER (Pooled Capacity by Default) • ファイルシステムは 10GB/秒高速データ配信 • 1TB以上ストレージ拡張 • データベースは最大 5倍スループット • Web層ソフトウェアの分離することで、 Drupal、 Memcached、Cron、SSHが互いに干渉することなく パフォーマンスを発揮 • 高負荷に対して瞬時にリソース増強 (オートスケール) • コンテナが常にリフレッシュされ、不健全な Podが自 動的に削除される自己修復型インフラストラクチャ • コードデプロイ時に新しいコンテナへのクリーンビルド を保証するアトミック・コードアップデート
40. Acquia Cloud Platformのアドオンツール Cloud Platformと完全に統合する クラウド型のIDE(統合開発環境) アクイアがホスティング /管理するGitLab環境 CDN/WAF
41. Drupalの開発サイクルを加速する 1. 計画：Code Studioでバックログ/issue管理 2. ビルド：Cloud IDEでDrupal開発に特化された開発環境を数 分で起動し、クラウド上でコード実装 3. テスト：Code Studioで、事前定義されたCI/CDパイプライン により静的コード解析や自動テストを実施 4. レビュー：Code Studioでマージリクエストを作成をトリガーに レビュー用環境を起動 5. デプロイ：Cloud Platformでドラッグ&ドロップによるデプロイ
42. Acquia Cloud Platformのプラン 個人向けから企業向けまで、あらゆる規模のビジネスをサポートします。 本番Webサイトを開発、デプロイするために構築されたセル フサービス環境を提供します。 セキュアでスケーラブルな、エンタープライズクラスのインフ ラとサポートを提供します。 Cloud Platform Professional Cloud Platform Enterprise 月額クレジットカード払い 利用するリージョン、メモリ、ストレージによって料金を算 出 年額一括払い 月間PVを元に料金を算出 * 開発環境 ×1、ステージング環境 ×1、本番環境 ×1 がベー ス (追加可能) フルサービス式のキャパシティ管理 × 高可用性 Cloud API, Cloud IDE, Code Studio, Edge 東京リージョン選択可能 24時間365日サポート × アップタイムSLA99.95% 開発環境 ×1、ステージング環境 ×1、本番環境 ×1 セルフサービス式のキャパシティ管理 Cloud API のみ 選べるリージョン(※東京リージョン未対応) ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ cloud.acquia.comでアカウント登録後、環境を作成、す ぐに利用可能 オーダーフォーム受理後、2週間前後でセットアップ完 了、利用開始 ✔ ✔ $148(2万円)/月〜 クレジット決済 お見積もり https://www.acquia.com/choosing-right-acquia-cloud-platform * ユーザーや管理者数は価格や性能に影響いたしません。
43. まとめ
44. まとめ – コンテンツファーストのアプローチにより、 変更に強いアプリケーションが実現できます。 – 最適なコンテンツモデルを素早く見極めるには、 作って評価するサイクルを高速に 回すことが 求められます。 – オープンソースソフトウェアのDrupalを使用することで、作りたいものを素早く形に落とし込む こ とができます。 – アクイアが提供する、Drupalに最適化されたPaaS、Acquia Cloud Platformをホスティング環 境として使用することで、開発者がやるべきことに注力できるようになります。
45. 参考 – 書籍：DESIGNING CONNECTED CONTENT デジタルプロダクトの長期的な成長を支える構造化コ ンテンツ https://www.amazon.co.jp/dp/4862465196 – チュートリアル：Drupal×Next.jsでヘッドレスCMSを高速で立ち上げる https://dev.acquia.com/tutorial/nextjs-acquia-setting-acquia-cms https://dev.acquia.com/tutorial/nextjs-acquia-nextjs-starter-kit-acquia-cms-headless-starter-kit-drupal – ブログ記事：DrupalのJSON:API入門 https://www.acquia.com/jp/blog/introduction-to-json-api – ブログ記事：Acquia Cloud Next - 大規模プラットフォームのクラウドジャーニー https://www.acquia.com/jp/blog/acquia-cloud-next-journey-platform-modernization-scale – 動画解説：Acquia Cloud Platform入門シリーズ https://www.youtube.com/playlist?list=PLVkpj3GMKNm2xTDE6gMYesBaFikMaZU3m
46. Thank you!