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

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

Transcript

1. コンテンツ設計手法で
   変更に強いアプリケーション
   を実現する
   ローコードによるWebアプリの
   バックエンド実装
   ゼロベース株式会社 石橋秀仁
   アクイアジャパン 丸山ひかる
   

   View Slide

2. – コンテンツファーストでの
   設計アプローチのエッセンス
   – Drupalによる構造化コンテンツの実現
   – クラウドネイティブなPaaS環境
   「Acquia Cloud Platform」について
   – まとめ
   アジェンダ
   

   View Slide

3. コンテンツファースト
   での設計アプローチの
   エッセンス
   

   View Slide

4. 情報アーキテクト
   information architect (IA)
   World IA Day 福岡オーガナイザー (2020-)
   ゼロベース株式会社 代表取締役 (2004-)
   前半のスピーカー：石橋秀仁
   

   View Slide

5. 監訳書：
   Designing デザイニング
   Connected コネクテッド
   Content コンテント
   デジタルプロダクトの
   長期的な成長を支える
   構造化コンテンツ
   今回お話しする内容
   

   View Slide

6. ● ユーザー・インターフェイス(UI)を改造しやすい
   ● アプリケーションを改造しやすい
   ● コンテンツ管理システム(CMS)を改造・置換しやすい
   ● コンテンツを編集・移設しやすい
   ● コンテンツ構造を改造しやすい
   「変更に強いアプリケーション」とは？
   

   View Slide

7. “
   そもそも、なぜ変更が生じるのか？
   変化の剪断層
   構成要素の変化速度が異なるた
   め、建物は常に自分自身を引き
   裂いている。
   スチュアート・ブランド
   せんだん
   How Buildings Learn: What Happens After They're Built by Stewart Brand (1994)
   

   View Slide

8. 文明のペース・レイヤリング
   ‘The order of civilization’ from The Clock Of The Long Now: Time and Responsibility by Stewart Brand (2008)
   

   View Slide

9. 情報アーキテクチャのペース・レイヤリング
   ユーザー・インターフェイス (UI)
   コンテンツ管理システム (CMS)
   コンテンツ
   コンテンツ構造
   ドメイン構造
   アプリケーション
   

   View Slide

10. “
    アプリケーションは生魚のように足が早く、
    コンテンツはワインのように熟成する。
    Applications age like fish,
    content ages like wine.
    なぜ「コンテンツ・ファースト」は変化に強い？
    

    View Slide

11. ● つながりあったコンテンツ
    ● 細かく切り刻まれたコンテンツ
    ● コピペせず、再利用するコンテンツ
    変化に強い「構造化コンテンツ」
    structured content
    connected
    chunked
    COPE (create once, publish everywhere)
    

    View Slide

12. コンテンツのかたち：ブロブよりチャンク
    blob chunk
    図版引用元：『 DESIGNING CONNECTED CONTENT デジタルプロダクトの　長期的な成長を支える構造化コンテンツ』
    マイク・アザートン、キャリー・ヘイン共著、石橋秀仁監訳
    

    View Slide

13. チャンクを再利用して、リソースを構成する
    図版引用元：『 DESIGNING CONNECTED CONTENT デジタルプロダクトの　長期的な成長を支える構造化コンテンツ』
    マイク・アザートン、キャリー・ヘイン共著、石橋秀仁監訳
    

    View Slide

14. つながりあったコンテンツ
    人物ページにセッション セッションページに人物
    人物のインデックス
    図版引用元：『 DESIGNING CONNECTED CONTENT デジタルプロダクトの　長期的な成長を支える構造化コンテンツ』
    マイク・アザートン、キャリー・ヘイン共著、石橋秀仁監訳
    

    View Slide

15. 1. ドメインの調査
    2. ドメイン・モデリング
    3. コンテンツ・モデリング
    4. コンテンツ設計
    5. コンテンツ管理システムの設計・実装
    6. コンテンツの制作・パブリッシュ
    構造化コンテンツの開発プロセス
    

    View Slide

16. ドメイン・モデル
    図版引用元：『 DESIGNING CONNECTED CONTENT デジタルプロダクトの　長期的な成長を支える構造化コンテンツ』
    マイク・アザートン、キャリー・ヘイン共著、石橋秀仁監訳
    

    View Slide

17. コンテンツ・タイプ
    図版引用元：『 DESIGNING CONNECTED CONTENT デジタルプロダクトの　長期的な成長を支える構造化コンテンツ』
    マイク・アザートン、キャリー・ヘイン共著、石橋秀仁監訳
    

    View Slide

18. コンテンツ・モデル
    図版引用元：『 DESIGNING CONNECTED CONTENT デジタルプロダクトの　長期的な成長を支える構造化コンテンツ』
    マイク・アザートン、キャリー・ヘイン共著、石橋秀仁監訳
    

    View Slide

19. コンテンツ・リソース
    図版引用元：『 DESIGNING CONNECTED CONTENT デジタルプロダクトの　長期的な成長を支える構造化コンテンツ』
    マイク・アザートン、キャリー・ヘイン共著、石橋秀仁監訳
    

    View Slide

20. CMSフィールド仕様
    図版引用元：『 DESIGNING CONNECTED CONTENT デジタルプロダクトの　長期的な成長を支える構造化コンテンツ』
    マイク・アザートン、キャリー・ヘイン共著、石橋秀仁監訳
    

    View Slide

21. Drupalのコンテンツ・タイプ
    図版引用元：『 DESIGNING CONNECTED CONTENT デジタルプロダクトの　長期的な成長を支える構造化コンテンツ』
    マイク・アザートン、キャリー・ヘイン共著、石橋秀仁監訳
    

    View Slide

22. ユーザー・インターフェイス
    図版引用元：『 DESIGNING CONNECTED CONTENT デジタルプロダクトの　長期的な成長を支える構造化コンテンツ』
    マイク・アザートン、キャリー・ヘイン共著、石橋秀仁監訳
    

    View Slide

23. ● 作る、使う、考える
    のサイクルを高速に回す
    ● みんなを巻き込んで
    ● ノーコード／ローコードで
    ● デプロイ自動化(CI/CD)で
    構造化コンテンツのプロトタイピング
    調査
    実装
    設計
    評価
    

    View Slide

24. Drupalによる
    構造化コンテンツの
    実現
    

    View Slide

25. Drupal Meetup Tokyo オーガナイザー (2022-)
    アクイアジャパン テクニカルトランスレーター (2004-)
    後半のスピーカー：丸山ひかる
    

    View Slide

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を採用していま
    す。
    

    View Slide

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サービス
    プラットフォームに対応させる取り組みが始まっています。
    

    View Slide

28. Drupalでの
    プロトタイピングデモ
    

    View Slide

29. Drupalで高速プロトタイピング
    1. コンテンツモデルをDrupalで表現する
    2. DrupalのWeb API化
    3. フロントエンドとの統合
    

    View Slide

30. 1. Drupalでコンテンツモデリングをしよう
    Drupalで高速プロトタイピング
    – Drupalには「コンテンツエンティティ」と呼ばれる、コンテンツ
    の永続的なストレージに使用されるオブジェクトがありま
    す。
    – Drupalでデータを扱う方法の一つであり、データやコンテン
    ツのモデリングを行います。
    – 標準で「コンテンツ」「タクソノミー」「ユーザー」「メディア」な
    どいくつか型が用意されており、 Drupalの管理画面でそれ
    らの設定を定義できます。
    – コンテンツエンティティとして生成されたインスタンスは共通
    の仕様でデータの操作が行えます。
    

    View Slide

31. 2. Web APIに対応させる
    Drupalで高速プロトタイピング
    – Drupalで標準採用されているREST API
    – Drupalには、標準機能としてREST APIに対応しています。これ
    は、コンテンツエンティティをJSONでCRUD操作できるもので
    す。
    – JSONでAPIを作成するためのオープンスタンダードな仕様
    「JSON API」に準拠しており、共有された規約に従うことで
    RESTful APIを迅速かつ一貫して作成できます。
    – 拡張機能でより実用的に
    – Drupalのコントリビュートモジュールの中にはGraphQLフォー
    マットを提供するもの、OAuth認証を実現するものなどがあり、
    コードを書かずにこれらの機能を実現できます。
    

    View Slide

32. 3. フロントエンドの実装
    Drupalで高速プロトタイピング
    – モダンJavaScriptフレームワークとの統合
    – DrupalのフロントエンドとしてNext.jsと連携する
    プロジェクトがあります。
    https://next-drupal.org/
    – Drupalはそもそも「CMS」なので・・・
    – フロントエンドの画面はDrupal側で簡単に用意
    できます。
    – Drupal.orgで数多くのテーマ（＝フロントエンド
    のレイアウト）が公開されています。
    

    View Slide

33. Drupalで高速プロトタイピング
    まとめ
    1. コンテンツモデルをDrupalで表現する
    データやコンテンツのモデリングをUI上から行えます。作成されたコンテンツは全てコン
    テンツエンティティとして共通の仕様でデータ操作ができます。
    2. DrupalのWeb API化
    標準機能としてREST APIに対応している他、様々な拡張機能によって実用的なWeb
    APIを実装できます。
    3. フロントエンドとの統合
    Next.jsとDrupalをシームレスに連携するプロジェクトが立ち上がっており、素早くフロン
    トエンドを実装できます。要件によってはCMSでバックエンドもフロントエンドも賄うことも
    可能です。
    

    View Slide

34. クラウドネイティブな
    PaaS環境、Acquia Cloud
    Platformについて
    

    View Slide

35. Drupalの開発ワークフロー
    1. 計画：機能やデザインの開発をいつまでにどれだけ行
    うかを決めます。
    2. ビルド：機能実装（コーディング）とコンパイルを行いま
    す。
    3. テスト：コードをテストします。
    4. レビュー：コードのレビューを行います。
    5. デプロイ：ホスティング環境にコードを反映します。
    これらはすべて
    でシームレスに行うこと
    ができます。
    

    View Slide

36. – Drupalサイトを運用、サポートする環境を
    PaaSとして提供します。
    – デプロイプロセスをサポートするセキュア
    なインフラと開発ツールを備えています。
    Acquia Cloud Platform
    Drupalを開発/ホスティングするためのクラウドプラットフォーム
    

    View Slide

37. View Slide

38. 2021年3月〜、KubernetesとAWSの最新技術をフル活用し
    て、Acquia Cloud Platformを完全に再設計した次世代のプ
    ラットフォームに生まれ変わりました。
    コンテナ化と動的スケーリングにより、Cloud Platformを利用
    するお客様の体験をより最適化できるようになりました。
    大規模なリプラットフォームを実施
    https://www.acquia.com/jp/blog/acquia-cloud-next-journey-platform-modernization-scale
    

    View Slide

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が自
    動的に削除される自己修復型インフラストラクチャ
    ● コードデプロイ時に新しいコンテナへのクリーンビルド
    を保証するアトミック・コードアップデート
    

    View Slide

40. Acquia Cloud Platformのアドオンツール
    Cloud Platformと完全に統合する
    クラウド型のIDE(統合開発環境)
    アクイアがホスティング /管理するGitLab環境
    CDN/WAF
    

    View Slide

41. Drupalの開発サイクルを加速する
    1. 計画：Code Studioでバックログ/issue管理
    2. ビルド：Cloud IDEでDrupal開発に特化された開発環境を数
    分で起動し、クラウド上でコード実装
    3. テスト：Code Studioで、事前定義されたCI/CDパイプライン
    により静的コード解析や自動テストを実施
    4. レビュー：Code Studioでマージリクエストを作成をトリガーに
    レビュー用環境を起動
    5. デプロイ：Cloud Platformでドラッグ&ドロップによるデプロイ
    

    View Slide

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 * ユーザーや管理者数は価格や性能に影響いたしません。
    

    View Slide

43. まとめ
    

    View Slide

44. まとめ
    – コンテンツファーストのアプローチにより、
    変更に強いアプリケーションが実現できます。
    – 最適なコンテンツモデルを素早く見極めるには、
    作って評価するサイクルを高速に
    回すことが
    求められます。
    – オープンソースソフトウェアのDrupalを使用することで、作りたいものを素早く形に落とし込む
    こ
    とができます。
    – アクイアが提供する、Drupalに最適化されたPaaS、Acquia Cloud Platformをホスティング環
    境として使用することで、開発者がやるべきことに注力できるようになります。
    

    View Slide

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
    

    View Slide

46. Thank you!
    

    View Slide