Movable Typeでの最近の開発トレンドやMT8の取り組み

MTDDC2023の資料になります！

Transcript

1. Movable Typeでの 最近の開発トレンドや MT8の取り組み 株式会社COLSIS（コルシス） 桐田 寛之 きりた ひろゆき
2. 自己紹介 • 桐田寛之（きりた ひろゆき） • 株式会社COLSIS 代表取締役社長 • Movable Type歴は18年目 COLSISは10年目
3. 強みであるCMS開発のノウハウをベースにエンタープ ライズ向けのウェブサイト・ウェブシステムを作ってい る会社です。 UIUX・デザインからインフラ・運用まで幅広く提供し ております。 「つなげて、つくりあげる」 ウェブサイト・システム構築事業 トラベルソリューション事業 株式会社COLSISについて 主力事業
4. サーバー配信とワークフローを中心にした、エンタープライズ向けの用途に 必要な機能をMovable Typeにバンドルしたパッケージです。 Movable Type SmartSync Packについて サーバー配信 機能 ワークフロー 機能 管理画面 カスタマイズ CSVアップ ロード ファイルアップロード 拡張
5. 海外とのコミュニケーションを行う プロジェクトが増え、今後より多言 語・多拠点も増えていくのを見据え て、今年はタイに現地法人を作りま す！ 日本人・タイ人合わせた制作・開発 拠点を作っていく予定です。 今年はタイに制作・開発拠点も作っています。
6. Movable Typeでの 最近の開発トレンドや MT8の取り組み ということで本題
7. Movable Type 8がリリースされました🙌 2018年5月リリースから約5年が立ちまして、Movable Type 8がリリースされました。
8. MT7ではCOLSISも様々な企業のCMS導入を行いました。 今も数十社のCMS・インフラをサポートしております。
9. • Movable Type 7が出て5年あまりで構築のトレンドなども変わってきている のではないかと思います。 • 今回は僕らの構築事例も交えながら、この5年で変わった構築方法のトレ ンドなどをご紹介できればと思います。 今回は
10. 多言語化のトレンド Trend1
11. • この5年でDeepLやGoogle Translator、またChatGPT等も含めて機械翻訳が非 常に進んだなと思っています。 • これまではサイトのごく一部だったものがほぼ全コンテンツ対象になった のも多くなってきています。 機械翻訳が非常に進んだ
12. • ある程度のサイト規模だとMovable Type構築と相性が良いものだと WOVN.ioが上げられるのではないかと思います。 • コンテンツ自動検知やライブエディター等、翻訳に特化した様々な機能が SaaS形式で提供されています。 Movable Typeと相性が良いWOVN.io ウェブサイト 日本語 ウェブサイト ウェブサイト 英語 ウェブサイト JS/ PHP 実際は同じ HTML 翻訳文リクエスト 翻訳分レスポンス （英語） 翻訳機能 辞書機能 ライブプレビュー
13. 対訳表形式の翻訳設定画面
14. ライブエディター機能
15. • WOVN.ioのサービス費用やインフラ環境などが懸念がある場合などは COLSISで作っているプラグイン“MTTranslator”での利用も増えています。 • 特に機械翻訳が弱いところである辞書機能と組み合わせる事で多言語サイ トの翻訳が可能です。 MTTranslatorも導入が増えています。 ウェブサイト 日本語 ウェブサイト ああああああ タイトル テキスト 内容 保存 AAAAAA お知らせタイトル TEXT 内容 保存 ウェブサイト 英語語 ウェブサイト 再構築 再構築 MTTranslator 翻訳機能 辞書機能 プレビュー機能 サイト複製機能
16. 翻訳設定画面
17. 共通辞書機能
18. 対訳プレビュー機能
19. サーバーレス化 Trend2 エンジニアにも手伝ってもらいつつ･･･
20. CMS＋システムインテグレーション • 最近CMSに関連するシステムインテグレーション（≒スクラッチでの開発）が COLSISでは増えてきています。 • 会員認証関連、iOSアプリ開発、イントラの業務アプリなど･･･ • これらをサーバーレス技術で実装する流れが増えています。
21. おさらい：静的サイトのメリット/デメリットとは？ • CDN による高速化の恩恵を受けや すい • 脆弱性の影響を受けづらい • 高負荷時にも安定して動作させや すい メリット • 動的コンテンツを導入すると、、、 メリットが消滅！ (半減じゃないよ) • でも、動的コンテンツがちょっと は必要なことが多い • そういうのをハイブリッドウェブ サイトと呼ぶけど、その場合 MT のメリットはなくなっちゃうの? デメリット
22. 「動的要素があるとメリットが消滅」ってどういうこと? 指標 動的サイト向け技術 静的サイト向け技術 △の理由 応答性 △ ロードバランサ ◦ CDN （Contents Delivery Network) LB はトラフィックの急増に耐えら れないことがある 安全性 △ Apache ◦ S3 Apache は脆弱性に気を配る必要 がある 可用性 △ Auto scaling ◦ CDN+S3 動的サイトはオートスケールが使 いづらく2台を常時起動する必要 応答性が良く、安全性と可用性が高く、安くてメンテナンスが不要になる （つまり、サイトがニュース番組に取り上げられて膨大なアクセスが来ても、関係者全員 がソファでごろごろしたり晩酌していられる） ↓ Apache や PHP を入れると、CDN でキャッシュしづらくなり、脆弱性の影響を受けやすく、 高負荷にも弱くなる （今日テレビで紹介されるなどと言われると、みんなそわそわして晩酌どころではない）
23. Apache がないなら「あれ」はどうするの? 動的要素 IaaS(apache) SaaS/PaaS セキュリティヘッダ ◯ mod_headers ◯ CloudFront Functions リダイクレト ◯ mod_rewrite △ CloudFront Functions （料金かかる） Basic 認証 ◯ mod_auth_basic ◯ CloudFront Functions • 開発時に欲しくなる Basic 認証は CloudFront で実現できる • セキュリティヘッダの付与やリダイレクトは CloudFront Functions の無料枠で十分に 実現できる • リダイレクトについては 0.1$/100万リクエストの料金がかかる (月に1億回のリダイレクトで 100$)
24. ハイブリッドウェブサイトの実現は? • 基本静的だけど、モザイク状に動的なコンテンツが混ざってくる昨今の普通のウェ ブサイトを「ハイブリッドウェブサイト」と呼ぶ • 静的ウェブサイトにシングルサインオンを導入し、パーソナライズされたコンテン ツを提供してみたのでご紹介
25. 会員認証やパーソナライズを実装 • コンテンツ作成はMovable Typeで行って、S3にサーバー配信して完全静的化 • 会員認証やパーソナライズもサーバーレス技術を使って機能を実現。 （次ページ参考） ◦◦さん ようこそ あなたの利用しているサービス ◦◦◦◦◦◦◦ ◦◦◦◦◦◦◦ ◦◦◦◦◦◦◦ ◦◦◦◦◦◦◦ ◦◦◦◦◦◦◦ ◦◦◦◦◦◦◦ Movable Type コンテンツ管理 コンテンツ DB 共通会員 認証基盤 コンテンツは 静的出力 会員認証認可や 情報取得
26. この分野は Astro が有名だ けれど MT とは混ぜづらい ので Svelte と Lambda で頑 張らないで実装する セッションや会員情報取 得を Lambda で実装して Svelte で JSON を取得しコ ンテンツを表示するだけ
27. 結果 • スモールスタートなので動的要素は「常時無料枠」で動作している • マルチAZなので AWS の大規模障害以外では停止しない • スパイクアクセスがあっても、AWS の障害があっても、関係者はソファでごろごろ したり晩酌していられる このように静的サイト＋サーバーレスでハイブリッドウェブサイトの実現が可能にな ります。 余談： アラートが一度もならないので、本当に設定されてるのかたまに不安になる
28. フロントエンドのトレンド Trend3
29. • 別デバイスへの配信、一覧処理、動的な表示処理等をJavascriptに任せる形 が増えてきました。 • 静的だけで完結する場合はJSON、検索処理がある場合などはDataAPIなどを 利用したりしています。 ヘッドレス的な利用方法 導入事例 サービス情報 Movable Type 管理画面 DB コンテンツ 管理・投稿 お知らせ HTML ウェブサイトは CMSから出力 API/ JSON アプリ・サイネージ はJSONかAPIで 表示
30. 大林組のイントラポータルではほぼAPI処理
31. • これまでは公的機関に限られていたアクセシビリティが企業サイトでも対 応が求められるケースが増えていく。 • Web制作側が知らないといけない知識の一つに。 アクセシビリティ対応 障害者差別解消法 の改正 これまでは公的機関が義務だっ たものが民間企業にも義務化 デザイン面での配慮 フロントエンドの実装での配慮 コンテンツ面での配慮
32. 未来館でのアクセシビリティの取り組み
33. • 開発環境の変化 （ビルドツールからデプロイ・テストまでの周辺ツールの拡充） • コンポーネント実装方法の変化（Storybook） • ウェブサイト表示高速化 • Cookie制御 フロントエンドの移ろいがはやく、また比重が大きくなってきて、日々追い かけるのは大変（そう） ･･･😅 その他でいうと･･･
34. • CI/CDの環境を整えてもテンプレートには基本は手作業で移行しなければな らない （ファイル連携だけでは足りないケースが） • 本番環境と開発環境の同期ももっとにスムーズにできないか （このあたりはWPEngineとかはよくできている） とはいえ悩ましいフロントエンドとMT
35. まとめ
36. • 僕らベンダーサイドとしては、複数CMSを取り扱っていくことが大事 • やはり各CMSにはそれぞれの良さがあり、またその特性を知る 他のCMSのトレンドや良さを知る 豊富なテーマ・プラグイン Gutenbergの作成のしやすさ モジュールによる高度な機能拡張 多言語機能の標準装備 厳密な権限管理 高度なDAM機能 大人数のサイト運用に耐えうる機能 アドビの他のアプリケーションとの連携
37. 僕らが考えるMovable Typeの強み 静的出力機能 複数サイトへの 対応しやすさ プラグインによる 拡張 日本国内での導入実績 継続的なアップデート やサポート Pronetを中心とした 国内ベンダーが豊富 機能面による強み 非機能面での強み
38. Movable Type 8の強みを活かす構築を • どのようなCMSにも得手不得手があるので、選定したCMSにあっ た構築方法をとることが大切 • 外部サービスやクラウドのサーバーレス技術などは積極的に活用 をしていく。 • 足りない部分はプラグインなどで補っていく COLSISとしても情報発信やプラグイン開発を頑張っていく予定なので Movable Type 8を盛り上げていければと思います。
39. COLSISのMovable Type 8の取り組み
40. 2024年はMovable Typeに力を入れていきます！ 2023年はタイ設立や受託開発で忙しかったのですが･･･
41. • 現在鋭意対応を行っております。 • 画像軽量化や通知関係など少しづつ アップデートをしていっています • MT8のタイミングでいくつか機能を追 加していきます。 • 2024年1月目処 SmartSync PackのMT8対応
42. • こちらもMT8対応を進めていく予定で す。 • 機械翻訳がベースになっているので翻 訳エンジンの追加等も含めて対応を 行っていきたいと思います。 MTTranslatorのMT8対応
43. • Movable Typeをはじめて触る人や、昔 触っていたけど最近の状況がわからな い人向けのコンテンツを作成していま す。 • まだ1回目ですが、毎月アップデート していきます。 Movable Typeの 解説コンテンツの作成
44. メンバー（業務委託）も募集中です ・プラグイン企画/仕様検討 ・開発ディレクション ・問い合わせ/サポート 製品企画 ・プロジェクト管理全般 ・UIUX設計 ・CMS設計 ディレクター （ポテンシャルもOK！） ・フロントエンド開発 ・CMSテンプレート実装 フロントエンドエンジニア ・システム設計/開発 ・CMSプラグイン開発 バックエンドエンジニア 本日会場にも弊社スタッフいるので、もし興味があればお声がけください！
45. おわり ご清聴ありがとうございました！