Интерактивная книга «Радугоны» на HTML5 и JavaScript для Windows 8 (неделя в Store)

Уважаемый хаброчитатель, поведаем тебе сегодня об опыте практической разработки приложений для Windows 8, подготовке, отладке и публикации проектов под этой платформой, и про применение одного из методов метопрограммирования (о чем мы писали раньше) для анимации в стеке технологий HTML5 + JavaScript + Metro style apps. Ведь теперь в Windows 8 можно применять JavaScript не только в браузере, но и для создания нативных «оконных» приложений. И вот, мы уже 6 дней в сторе, приложение можно установить бесплатно, более того, мы не приводим тут код, т.к. его можно свободно посмотреть после установки приложения прямо по папочкам js, css, html, fonts, images. Можно качать и смотреть, обфускацию мы не применяли. Пока HTML5 приложения ни как не защищены в маркете, но Microsoft обещает в самое ближайшее время реализовать защиту.

Повествование пойдет в контексте электронной интерактивной детской книги с анимацией, текстами и озвучкой на трех языках (русский, украинский, английский). Итак, название книги «Радугоны» (The Rainbow Dragons) и она содержит множество интересных анимационных эффектов, которые ранее были недоступны для JavaScript программиста и у нас самих все еще не проходит ощущение волшебного, когда мы видим результат на экране. Книгу сейчас уже можно бесплатно загрузить из Windows 8 Store. В издательстве Glowberrybooks над контентом трудилось много людей, которым мы чрезвычайно благодарны за профессионализм и творчество, а так же, хотим сказать спасибо Сергею Байдачному, представителю компании Microsoft, за оперативную поддержку по платформе Windows 8 и Дмитрию Шимкову, генеральному директору Microsoft Украина.

Подробности ниже, а пока видео:

Архитектура и подход к разработке

Даже игровая анимация требует архитектурного подхода, который экономит время и нервы. Для книги мы выбрали использование мета-аннотации в качестве декларативного способа формирования страниц. Это позволяет иметь один и тот же JavaScript для всех страниц книги, более того, мы можем добавлять страницы не меняя программного кода, если, конечно, это не требует добавления нового типа анимации или нового события, по которому анимация активируется. Теперь подробнее о мета-аннотации: мы ввели целый ряд атрибутов с префиксом «data-», а во время запуска страницы проходим по тегам, читаем атрибуты и навешиваем соответствующие события и анимационные эффекты. Это не новая идея, самый близкий к нашей тематике пример — библиотека для разработки презентаций impress.js. Таким вот образом, мы абстрагировали JavaScript код от разметки страниц и теперь, контент верстается по внутренним правилам, а потом оживляется «рантаймом» (библиотекой анимации). Мета-аннотация (в виде набора атрибутов) является прослойкой между платформой запуска и контентом, таким вот абстрактным интерфейсом. Для портирования книги на другую платформу нужно только реализовать рендеринг того же интерфейса, т.е. набора атрибутов, для нужной платформы, например для браузера или для устройств под управлением Android и iOS. Контент при этом не меняется, а просто включается в сборку или организовывается динамическая подгрузка контента (для веб-варианта). В данном архитектурном решении высока повторная используемость кода, ведь наш JavaScript разделен на платформо-зависимый и платформо-независимый, и при портировании нужно реализовать только платформо-зависимую часть библиотеки. Более того, после портирования, без всякого изменения библиотек, можно применить «рантайм» для отображения другой книги. А верстка новой книги сводится к очень простой html-разметке, которая не требует навыков программирования и может выполняться аниматором или верстальщиком.

Metro приложения в Windows 8

Нужно сказать, что Радугоны уже были реализованы под iOS (был доступен в AppStore, но сейчас временно на доработке и будет опять доступен с 1 июля 2012) и Android (пилотный образец). Делала это не наша команда, но главное, что есть возможность сравнить производительность и удобство интерфейса и скорость отрисовки. Несомненно, это очень зависит от способа реализации, но платформа так же влияет.

Реализация для iOS:

Пробный пилотный образец для Android:

Общий стиль Windows 8 повлиял на книгу только с хорошей стороны, многие навигационные моменты, которые были решены раньше неудобно, уже продуманы в Metro Style и мы использовали нативные возможности платформы.

Все управляющие кнопки находятся в AppBar'е, что позволяет занять всю область контентом, не отвлекая внимания. Первоначально в блок AppBar'а можно вставлять элементы только с атрибутом data-win-control=«WinJS.UI.AppBarCommand», но так как стандартные кнопки нам не подходят по стилю, то их заменяем на свои. Для этого указываем в опциях <<layout:'custom'>> и прописываем кнопками такие атрибуты

<div id="appbar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement:'bottom', layout:'custom'}" ></div>

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

Также используется Semantic Zoom, который вызывает содержание книги (тумбнейлы всех страниц). Так как мы не используем контролы Windows 8 (для переносимости и стилизации), то нам необходимо сделать кастомный зум. Неплохой пример реализации можно посмотреть в SDK: HTML SemanticZoom for custom controls sample.

Анимационные эффекты в Windows 8

Стандартные эффекты Windows.UI.Core.AnimationMetrics очень обширны, но мы понимали, что их использование навсегда привяжет нас к платформе, поэтому они используются только там, где другого выхода не было. Эффекты из WinJS.UI.Animation заточены под анимацию стандартных визуальных контролов (комбобоксов, попапов и панелек), что для книги не совсем подходит. Большинство же эффектов мы реализовали с применением библиотеки jQuery, которая не требует отдельного представления. Из необычных моментов в Windows 8, стоит отметить, что вместо использования селектора по id тега из jQuery, можно добраться к тегу иначе и даже без getElementById. Идентификатор, заданный в атрибуте id любого тега на странице автоматически становится глобальной переменной, удобство такого подхода более чем спорно.

Публикация в Store

Помимо требований для публикации в Store, указанных в правилах, стоит отметить некоторые особенности:
1. Если поддерживаемые языки указываются вручную, необходимо указывать не только «locale», а полностью «locale» / «culture»,

то есть: не <Resource Language="en" />, а <Resource Language="en-us" />

В противном случае, после сертификации приложение будет невозможно скачать.
2. Цвет фона и текста, отображаемый в Store, берется из манифеста при описании плитки (Tile), то есть поля Foreground text и Background color. Если текст будет сливаться с фоном приложение не пройдет сертификацию. UPD: Вот подсказывают, что в RC это уже починили.
3. На этапе заполнения полей с информацией про приложение, для отправки на сертификацию, необходимо использовать именно IE, иначе могут возникнуть проблемы. А именно, невозможность загрузить скриншоты и добавить их описание, соответственно, не удастся загрузить сам пакет.
4. Имя для приложения можно зарезервировать заранее. «Бронь» длится 1 год, за это время нужно выложить готовое приложение в Store.
5. После успешной сертификации, получаем доступ к статистике о приложении. У нас есть возможность узнать количество просмотров/скачиваний, как оценили приложение и увидеть отзывы, среднее время использования приложения в день. Сторов несколько (для разных стран) и можно фильтровать статистику по сторам и по другим параметрам (возраст, пол, тип устройства). Для разработчика особенно полезна будет информации о возникающих исключениях, как часто падает приложение, как часто возникают ошибки, как часто приложение зависает (с указанием причин).

Приводим статистику загрузок (на вечер вторника имеем 2671 загрузок — это 5 дней в сторе):

Установка приложения

Чтоб загрузить и попробовать приложение, нужно установить Windows 8 (http://windows.microsoft.com/en-US/windows-8/download), потом открыть Store -> Books & Reference -> The Rainbow Dragons. Или просто поиском в Store (вызывается Win+Q) поискать по слову «Rainbow» (хватает набрать «ra», как приложения уже выскакивает в рекомендуемых).

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

В ближайшее время мы портируем книгу и «рантайм» (библиотеку для анимации) под Android и iOS, а так же, для запуска в любом современном браузере. Уже через 6 часов после презентации книги под Windows 8, нам удалось запустить ее в браузерах на iPad 3 и Galaxy Note, где она работала не менее шустро. Об опыте портирования мы напишем отдельно, а следующим шагом будет разработка IDE для быстрого создания интерактивных книг с элементами игры и анимационными эффектами. Книги будут компилироваться в особый формат (архив, содержащий картинки, звуки и метанотацию) одинаковый для всех платформ. Будет ли это «читалка» для книг или для каждой книги мы будем компилировать самодостаточное приложение под каждую платформу, вовнутрь которого и будет помещаться файл с контентом, мы еще не решили. Тут нужно исследовать ситуацию с авторскими правами и правилами в разных маркетах. Решения о том, как будет распространяться IDE и «рантайм» для книжек, тоже еще не принято, но не исключено, что самая общая часть программного кода будет доступна по свободным лицензиям.

Ссылки на новости о проекте:
microsoftua.wordpress.com/2012/06/01/raindragons/
itc.ua/news/glowberry-books-i-microsoft-predstavili-pervuyu-ukrainskuyu-interaktivnuyu-knigu-dlya-windows-8/

С уважением,
Всегда Ваши гавнокодеры MarcusAurelius и tblasv

Автор: tblasv