(Статья на японском языке доступна здесь.)

Привет, я инженер-программист из Японии, обычно разрабатываю приложения для iOS. В этой статье я представлю программу, прототип которой я создал для создания диаграмм перехода между экранами на основе файлов YAML. Он доступен для общего доступа по адресу https://github.com/takeshi-1000/y2p.

Диаграмма перехода между экранами — это диаграмма, представляющая «список экранов» и «переход от одного экрана к другому» с помощью прямоугольников и стрелок.

Фон

Я сделал прототип на основе следующего фона:

  1. Когда я ранее пробовал библиотеку под названием XcodeGen, мне показался интересным механизм создания отдельного файла (.xcodeproj) из содержимого, определенного в файле YAML.
  2. У меня был опыт использования диаграмм перехода между экранами для эффективного понимания системы (в данном случае приложения для iPhone).

Что делает программа

Когда вы предоставляете программе файл YAML, определяющий переходы между экранами, и запускаете его, диаграмма переходов между экранами будет создана в формате SVG.

Сгенерированная диаграмма перехода между экранами начинается с основного экрана (в данном случае экрана «Заставка») в качестве отправной точки. Экранные объекты, представленные в виде прямоугольников с именами экранов, расширяются по горизонтали слева направо, указывая на переходы от исходных экранов к экранам назначения. Диаграмма имеет древовидную структуру.

О YAML

Контент, написанный в YAML, в основном относится к следующим категориям:

  • Настройки
  • Взгляды

Настройки

В разделе «Настройки» вы можете указать значения для настройки общего стиля диаграммы перехода экрана.

Например, вы можете определить цвет границы и цвет заливки экранных объектов, а также установить поля для горизонтального и вертикального расстояния между объектами.

# Excerpt
settings:
 object:
  borderColor: "000000" # Border color of the screen objects
  contentColor: "FFFFFF" # Fill color of the screen objects
  textColor: "000000" # Text color of the screen objects
  fontSize: 13 # Font size of the screen objects
  verticalMargin: 16 # Vertical margin between screen objects
  horizontalMargin: 100 # Horizontal margin between screen objects
  size: # Size of the screen objects
   width: 100
   height: 50
 lineWidth: 1 # the thickness of the lines

Взгляды

В разделе «представления» вы в основном перечисляете экраны и указываете, куда переходит каждый экран. Вы также можете включить дополнительную информацию, такую ​​как URL-адреса и спецификации стиля для экранных объектов. Пожалуйста, обратитесь к этому разделу для получения более подробной информации о том, как назначить эти свойства объектам экрана.

# Excerpt
views:
 Splash:
  name: "Splash Screen"
  url: "https://www.google.com"
  isRoot: true
  contentColor: "D5E8D4"
  borderColor: "82B366"
  views:
   - Hoge1
   - Hoge2

Обратите внимание, что обязательно указывать один корневой экран для экранных объектов, и вы можете назначить параметр «isRoot: true» для нужного вида.

Особенности диаграммы

Чтобы выводить все переходы экрана как переходы состояний, инструмент имеет некоторые уникальные функции. Прежде чем представить эти функции, позвольте мне сначала предоставить некоторую справочную информацию о том, как они появились, и о возникших проблемах.

(1) При переходе одного экрана с нескольких экранов

Например, давайте рассмотрим сценарий, в котором экран B переходит как с экрана A, так и с экрана C. Кроме того, с экрана B есть дополнительные переходы на экран D, экран E и так далее. В этом случае переходы экрана B будут дублироваться между переходами с экрана A на экран C.

На приведенной ниже диаграмме показана ситуация, когда верхний экран переходит из двух экранов, экрана-заставки и экрана входа в систему. Это демонстрирует проблему дублирования переходов после верхнего экрана.

(2) Когда экран возвращается к исходному источнику

Если экран возвращается к исходному источнику, для представления этого цикла на диаграмме потребуется бесконечное количество экранных объектов.

Подход

Для решения вышеупомянутых проблем я принял следующий подход:

  • Когда экран (A) переходит из двух или более экранов, а сам экран (A) переходит на другой экран, я разделяю текущую древовидную структуру и создаю новую древовидную структуру, чтобы расширить новые переходы между экранами. (На диаграмме ниже верхний экран соответствует экрану (A).)

Это устранило проблему дублирования пунктов назначения перехода верхнего экрана и решило проблему размещения бесконечного количества объектов.

В пояснении выше к изображению была добавлена ​​дополнительная строка, указывающая на разделение верхнего экрана. Однако изначально такой линии не было. Когда экраны разделены, становится довольно трудно проследить, где и как произошло разделение, если только цвета экранных объектов не продуманы так, чтобы указывать на разделение.

Поэтому я также принял следующий подход:

  • При разделении новой древовидной структуры предоставляется возможность добавления вспомогательных строк, указывающих на возможность перехода к этим объектам экрана, чтобы облегчить понимание разделенных объектов экрана. (По умолчанию добавляются вспомогательные линии, если не указано иное с помощью «showGuideLines: false» в конфигурации YAML.)

Принимая во внимание все эти соображения, окончательный результат, который в конечном итоге был достигнут, показан ниже.

Преимущества инструмента:

  • Легко создавайте диаграмму перехода между экранами с разумно настроенным макетом, используя минимальные конфигурации стилей, определяя информацию об экране и отношения перехода в YAML.
  • Легко управляйте файлами YAML в системах контроля версий, таких как Git.
  • Добавляйте или удаляйте информацию об объекте экрана, когда требуются изменения.

Недостатки инструмента:

  • Точная настройка деталей компоновки (например, определение того, когда следует разделять объекты, как размещать отдельные экранные объекты, размещение стрелок, дизайн вспомогательных линий и т. д.) может не соответствовать личным предпочтениям.
  • Для идентификации экранов и мест их перехода требуются ручные усилия, что может занять много времени.
  • Поскольку выходные данные представлены в формате SVG, необходимо подготовить программу просмотра. В целях личного развития удобным вариантом может быть использование веб-браузера, такого как https://www.svgviewer.dev/. Кроме того, в macOS приложение Gapplin кажется удобным для пользователя.
  • В настоящее время инструмент не распространяется в виде бинарного файла, поэтому процесс установки может быть громоздким. (Мы планируем сделать его доступным в виде бинарного дистрибутива в будущем.)

Дополнительный

Название библиотеки «y2p» было вдохновлено ChatGPT. В первоначальной концепции идея заключалась в том, чтобы преобразовать YAML в PlantUML, поэтому «p» в «y2p» представляет собой PlantUML. Но PlantUML трудно контролировать с точки зрения компоновки и легче включать URL-адреса в SVG, поэтому был выбран этот подход.

Планы на будущее

Я планирую проверить, насколько полезен этот инструмент для личного использования, и при необходимости внести изменения с учетом открытого исходного кода (например, улучшить тестовый код, сделать код более удобным для чтения и упростить его использование в качестве приложения CLI).

Кроме того, вклады всегда приветствуются. Пожалуйста, создайте проблему или запрос на извлечение по мере необходимости. 🙂