[OutSystems]Live Style Guideの情報をまとめてみる

OutSystemsでアプリケーションを作る際に、環境の基盤となるStyle Guideを決め、更にその「動作するドキュメント」としてLive Style Guideを作るとされている。
ただ、その明確な定義が見当たらず、関連するCourseやNext Stepの動画に散らばっているので、各動画の情報を整理してまとめておく。

ほとんどの人は「Live Style Guideとは（まとめと仮の結論）」の部分だけ見てもらえば十分。実際にどのように言及されているか確認したい人だけ、動画を確認して欲しい。

公式のcourse

OutSystemsサイトのTraining > Courses下にあるトレーニング動画で、Live Style Guideに言及している部分。

Style Guide Architectures

環境内のアプリケーションに一貫した見た目を提供するStyle Guideとはなにか、アーキテクチャのオプションは何か、という説明をするコース。

Base Style Guide Architecture

コース内の最初の動画。

00:26あたりから。Style Guide/Live Style Guideとはなにか、の説明がある。
Style Guide:

A document that establishes a clear, consistent and unique visual form of communicating a brand.

要するにOutSystemsで作るアプリケーションについて、「全社的な見た目を提供するためのドキュメント」。

Live style Guide:

A live documentation with brand theme, colors, and patterns.

動画内で口頭でも説明されているが、Style Guideを元に作る、「動作するドキュメント」。

スライド中で、Live Style Guideの構成要素として、以下のものが挙げられている。

• Styles（Themeで定義されるclass群）
• Templates（Screen Template＝画面のテンプレート）
• Patterns（UI部品群）

02:05あたりから。Style Guide Architectureというスライドに以下の記述。

Live Style Guide=PatternsとStyle Guideの見た目の例

Example of the patterns and the look and feel of the Style Guide。

また、口頭で、Live Style Guideは画面例を含めることで、開発者がStyle Guideの見た目やパターンを理解できるようにする、とも言っている。

Live Style Guides in OutSystems

01:45あたりからStyle Guideとは何か。この部分は、↑の「Base Style Guide Architecture」の説明とあんまり変わらない。

A Live Style Guide is a live documentation with brand theme colors and patterns implemented and ready to use

11:35あたりから、Front-End ArchitectureというタイトルのスライドでLive Style Guideが、アーキテクチャ図でどのように位置づけられるかがわかる。

OutSystems UIを基盤に会社のThemeを作り、そのThemeを使ったアプリケーションとしてLive Style Guideを用意する。

22:05あたりからLive Style Guideのサンプルのデモ。実際に動作するOutSystemsアプリケーションで、Themeに定義したclassで利用できるもの・UI部品群・Screen Template群を実際に動作しているところを見られるものになっている。
動画中では触れられていなかった（と思う）が、これは、ForgeにあるOutSystems UI Style Guide Previewというコンポーネントと同じ構造。

過去のNext Step

Next Step 2020: Creating Application Templates to Accelerate Time-to-Market

Template機能を解説するセッションだが、最初にStyle Guideの説明がある。
What are Style Guidesというスライドで示されるStyle Guideの構造は以下の通り。

• Style Guide Preview（上でも触れた、Live Style Guideの元となるForgeコンポーネント）
• Theme
  • Images
  • Patterns
  • Company CSS
• Template
  • Layout
  • App CSS

Style Guideを作る手順が示されている。

1. Style Guideを作るためのForgeコンポーネントをインストールする(OutSystems UI Reactive Style Guide Template、OutSystems UI Mobile Style Guide Template、OutSystems UI Style Guide Theme、OutSystems UI Style Guide Preview)
2. Templateモジュールを作る(1でインストールしたOutSystems UI Reactive Style Guide Template/OutSystems UI Mobile Style Guide TemplateをCloneして改修する）
3. Themeモジュールを作る (1でインストールしたOutSystems UI Style Guide ThemeをCloneして改修する)
4. Style Guide Previewを作る (これがLive Style Guideにあたるはず。1でインストールしたOutSystems UI Style Guide PreviewをClone　→　モジュールのThemeを2に差し替え　→　会社やプロジェクトで作成したUI部品とScreen TemplateをPreviewに追加し、各開発者が閲覧できるようにする)

Next Step 2021: Creating Style Guides With Mobile and Web Support

こっちは、Style Guideをモバイルアプリケーションも含めて作っていく方法についてのセッション。
2:20くらいからStyle GuideとLive Style Guideとはなにかの説明。

What Defines a Live Style Guide?

• Interactive digital rulebook
• Includes coded elements like components, sample screens, and others
• Cotains interface design patterns

Why use a Live Style Guide?

• Promotes consistency
• Easy to maintain and evolve
• Less need for expert skills
• Assists designers on creating new assets
• Helps accelerate development of applications

06:00くらいからLive Style GuideとThemeの違い
ThemeはUIのレポジトリ（UIで共用する画像やclass定義を置いておく）。Live Style GuideはThemeをドキュメント化するアプリケーション。この定義はイメージしやすい。

10:30くらいに以下の説明。このセッションでは、カスタムアプリケーションテンプレートをLive Style Guideに含めている。

Live Style Guide App=Live Style Guide (Preview) + Template App + Template Screens

関連するForgeコンポーネント

• OutSystems UI Style Guide Preview
  • Live Style Guideのテンプレートとなるもの
• OutSystems UI Style Guide Theme
  • Style Guide用に作成する共通Themeのテンプレートとなるもの。どうも普通に作ったThemeとあまり違わないように見えるので、必ずしも使わなくて良さそう
• OutSystems UI Reactive Style Guide Template
  • Reactive用のカスタムアプリケーションテンプレートと、元となるもの。これも別に使わずに自分で通常のReactiveのテンプレートから作っても良さそう
• OutSystems UI Mobile Style Guide Template

Live Style Guideとは（まとめと仮の結論）

Style Guide/Live Style Guideとは何か、各動画によって定義が微妙に違い、かつあまり明確でないが、ここでおそらくこうだろうという考えをまとめておく。

まず、Style Guideとは

OutSystemsを導入する企業等の単位で、UIの基盤となるCSSや画像、レイアウト、UI部品を定義し、ルールを定めたドキュメント。

構成は、以下のようになるのではないか

• Theme（アプリケーション）
  • Theme（モジュール）
  • Assets（モジュール。Themeで使う画像等を格納。なければ作らなくても良い）
• Pattern（UI部品を格納するアプリケーション。通常の環境では複数になると思う）
• Custom Application Template（モジュールのテンプレートを自分で作る機能。通常は、会社やドメイン単位で作成する。Next Step 2021のセッションではLiveの方に含められていたが、標準としてはこっちに含めるべきと思ったので個人的にこっちに含めた）
• Screen Template（画面のテンプレート。同上）
• 標準ドキュメント

Live Style Guide

開発者がブラウザを使ってアクセスし、操作できるOutSystemsアプリケーション。
Style Guideで定義した事項を、実際に動作するアプリケーションで確認できる。
ForgeのOutSystems UI Style Guide Previewを元に自社で作成した要素を追加して作成する。

イメージは、上記モジュールのTry Nowボタンから確認できる。