Альтернативные заголовки для жёлтой прессы: "Android пробивается к обычным современным браузерам", "Opera Mobile на Android с юзерстилями для habr.ru", "На Хабре началась неделя Андроида".Статья, на самом деле, не о Хабре, не об Опере, не о мобильных телефонах с Андроидом, а о пользовательских стилях. Имелся серьёзный вопрос: заработают ли пользовательские стили где-нибудь, в каком-либо браузере на Андроиде? Но, поскольку наиболее важная часть из этих 4 компонент — Андроид, то и статья — о нём.
У меня нет ни одного устройства на Андроиде. Тем не менее, возникла причина, заставившая самостоятельно ознакомиться с браузером, написать статью со скриншотами и рассказать всему миру (да, поиск по Гуглу показывает полное отсутствие публикаций о юзерстилях на Андроиде) о том, как работать в недавно вышедшей Опере для мобильных Андроид-устройств.
История вопроса
Начали появляться попытки создать специальные приложения для Хабра на Андроиде с возможно более полной поддержкой всех функций сайта. Понятно, что раньше была и есть адаптация Хабра к мобильным браузерам вообще (m.habr.ru), но с рядом ограничений, главное из которых — что можно читать, но нельзя авторизоваться и писать через него.
Увидев такие попытки и зная тенденции развития мобильных браузеров (обзоры Opera, Firefox, ...FF Mob. 4b4), я предложил в комментариях использовать пользовательские стили. Для Хабра, в частности.
Завязался по-своему интересный диалог, который закончился ничем. Никто, видимо, не стал исследовать Оперу на своём мобильном, чтобы запустить в ней стили. Значит, чтобы получить ответ на вопрос о готовности мобильных браузеров к полноценному CSS, понадобится самостоятельно поисследовать этот вопрос.
Зато, появилось окончание, удивительное для серьёзного сайта по ИТ-тематике. Некоторые читатели посчитали мои возражения против приложения на Андроиде и «проталкивание» решения с юзер-стилями — «вражескими» (примерно как в холиварах между ОС), а меня, видимо, «врагом».
Цитата: habrahabr.ru/blogs/android/112788/#comment_3614652
«Ты наркоман чтоли? Прога для Андроида, и тут обсуждается как на Андроиде с телефона читать обновления Хабра. На Андроиде сейчас есть: стандартный webkit-браузер, opera mobile 10, opera mini, dolphin, очень урезанный firefox. Нигде там нет ни Stylish, ни аддона Habr Netbook. Не понимаю к чему ты тут толкаешь свою тему с пеной у рта?»
В то время как в Firefox уже могут поддерживаться дополнения, а для юзерстилей необязательно устанавливать Greasemonkey. Впрочем, этот читатель потом вполне адекватно и с пользой ответил на вопросы. Но другие, вооружившись копьями и стрелами, встали на тропу войны: определённый процент (немного, человек 5) пользователей решил поставить минус в карму за желание показать решение по работе с Android и явные просьбы проверить решение (странно для IT-ресурса, да?) и живописно оценили своё отношение к предложениям.
Мои аргументы: habrahabr.ru/blogs/android/112788/#comment_3615924
«Преимущества юзер-стилей перед приложением на Андроид —
1) не надо писать и отлаживать приложение;
2) не надо привязываться к JS-функциям вызова операций на Хабре или парсить страницы, чтобы выцарапать нужную информацию, а потом ещё её оформлять.
3) Привязываемся только к стилям Хабра, но, как показывает опыт 5 месяцев пользования, меняют стили немного и нечасто;
4) Вся функциональность Хабра оказывается доступной и на привычных местах.»
Итак, придётся не только для себя убедиться, что стили на Хабре пройдут для Андроида, но и показать некоторым анонимным читателям свою правоту, чтобы они «забрали свои минусы обратно». Неплохо, если «забравшие» отпишутся — вопрос будет исчерпанным.
Почему меня интересует показ Хабра на Андроиде, если нет андроид-устройства? По историческим причинам, мне полностью хватает стационарных компьютеров для работы с интеренетом. Необходимости в переносном устройстве не возникало, но известно было, что браузеры на них ещё не вышли из стадии «мобильности», что означает нелестное для них свойство не поддерживать полноценно CSS и, возможно, JS. Вот только последние версии Opera (10.1 mob. beta) и Firefox (4.0 mob. beta) вселяли надежду, что эти времена пришли. И тогда, как только возникнет вопрос просмотра сайтов на Андроиде, я буду знать, что там есть полноценный браузер.
Поставим на компьютер эмулятор (Android SDK and AVD manager, статья), чтобы убедиться в настраиваемости и работоспособности стилей.
Квест по инсталляции браузера
Инсталляция эмулятора прошла без запинок на Win XP. Он запущен из скачанного архива Zip.
.. (рис. 1)Выберем какую-нибудь реализацию браузера, предоставляемую по ссылке с сайта Оперы. Если попытаться зайти на сайт и «просто скачать» мобильный браузер, то сайт Оперы эмулируемому Андроиду 2.3.1 на m.opera.com предлагает скачать Opera Mini, которая нам не нужна. Пришлось выбрать какой-нибудь телефон (с шириной экрана 480px и поддержкой как можно более старых ОС) из другой ссылки, слева («Загрузка через ПК»). Им оказался Motorola Milestone / Droid / A853.
Проще оказалось загрузить через эмулятор страницу по прямой ссылке, чем листать её через спадающие списки, которые во встроенном браузере работают плохо.
http://www.opera.com/mobile/download/motorola/milestone/
Видим страницу с таким текстом:
Motorola Milestone / Droid / A853
Device support
Based on testing performed by Opera Software, this device supports Opera Mini 5.1 and Opera Mobile 10.1 beta.
Download Opera Mini 5.1
Android – International
Download Opera Mobile 10.1 beta
Android 1.6+ – International
Отлично. Страница говорит, что скачанная Опера будет работать на Андроидах от версии 1.6, хотя эмулируем сейчас версию 2.3.1.
Загружаем Opera Mobile 10.1 beta, и в загрузках видим файл Opera_Mobile_10.1_beta.apk размером 6.63 МБ. Соглашаемся на установку. Запускаем. Видим страницы и панель управления браузером. Значит, заработал наш клиент, хотя он не соответствовал точно модели устройства (какая модель у эмулятора? — никакая). Занимает памяти — 20.5 Мб; данные занимают ещё примерно 2 Мб, объём должен меняться.
.. (рис. 2)Установим размер шрифта по умолчанию не 140%, а 100%, чтобы протестировать максимально плотный текст (увеличить шрифты всегда сможем, если ширина поля позволяет). Кроме того, надо помнить, что есть много устройств с шириной 240px, которые в круг тестирования сейчас не входят, но более распространены. Другими словами, в экспериментах больше интересуют блоки вёрстки и правильность отработки правил CSS, чем читаемость букв на мелких реальных экранах. Размер шрифта на реальном экране всегда сможем увеличить.
Вписываем в панель быстрого запуска стартовую страницу habr.ru, чтобы посмотреть как она выглядит. Пришлось ждать очень долго. Может быть, зависла страница и браузер, а может быть, она так показывает свою неполную загруженность (или следствие «беты»). Приходится нажимать на «Стоп» (крестик внизу). Видим страницу сайта.
Как ожидалось, читать стандартную страницу сильно неудобно, она широкая. Нужно адаптировать ширину окна и размер шрифтов стилями. Правильный вид страницы Хабра уже косвенно подсказывает, что стили на странице интерпретированы в основном правильно, значит, парсер CSS в Опере полноценный. Насколько — узнаем, посмотрев на юзер-стили. Конечно, для каждого браузера приходится что-то дорабатывать, но тут для близкого родственника — Оперы они уже были сделаны.
.. (рис. 3 (1,2,3))Работа с настройками браузера сильно нагружает процессор при эмуляции. Даже трудно понять, зависло ли приложение или завис эмулятор. Наконец, эмулятор сообщил, что Опера не отвечает, пришлось приложение снять. Возможно, тоже следствие беты.
Включение «мобильного» режима просмотра в настройках приводит к более читабельному виду (рис. 3-3, крайний справа). Фактически, достигается то же, что делает стилизатор с убиранием правой колонки. Делает это он по некоторому эвристическому алгоритму, поэтому не создаст стиля просмотра, нужного нам.
Квест по способу установки юзер-стилей
Вот что говорят об этом на форуме по юзерстилям (August 2010):
1. There is no Firefox app available for android phones yet
2. I don't believe the Mobile version of Opera supports it.
Прямых настроек в браузере нет, поэтому ищем решение на странице opera:config.
(При создании второй вкладки Опера снова надолго зависает.)
Открываем opera:config.
(На рисунках красным помечены параметры, на которые надо обратить внимание для настройки стилей.)
.. (рис. 4 (1,2,3))Ищем что-либо, связанное с путями к юзер-стилям. Для ориентировки, нечто подобное в «большой Опере» лежит в настройках в районе 90% прокрученного текста (раздел User Prefs, далее «User Style Info File»). Можно просто выполнить поиск по странице в специальном окне — Опера предоставит найденные ключи и необходимые кнопки сохранения, ничего лишнего.
Видим близкое по теме поисков: «User CSS» (checked) (рис. 4-3 вверху).
Видим путь файлов настроек, с которым придётся иметь дело: /data/data/com.opera.browser/opera/profiles/smartphone/styles/user/ (часть каталогов и файлов не видна прямо из браузера, поэтому путь приблизительный)
И, наконец, путь к Local CSS file. ( .../smartphone/styles/user.css )
В исходной поставке браузера путь прописан, но сам файл отсутствует (рис. 5-1).
Всё; поскольку в настройках браузера этот путь прописан и стили пользователя включены, осталось написать наш файл стилей для Хабра, чтобы
1) проверить полноценность работы парсера CSS в браузере Opera 10.1 Mobile;
2) без Mobile Mode смотреть Хабр в нужных нам стилях;
3) полноценно использовать всю функциональность Хабра без написания специальных приложений для Андроида.
С этого момента стало понятно, что догадки верны, и часы времени, потраченные на инсталляцию эмулятора, скачивание Оперы Mobile и поиски решения, дадут положительные плоды.
Есть в Опере и реализация юзер-скриптов (рис. 4-3 внизу).
Теперь нужно из внешнего мира взять подготовленный файл стилей и положить в нужное место файловой системы, путь к которому прописываем в opera:config в поле "Local CSS File".
При переносе Оперы на SD-карту (возможно в OC версии 2.2+) память (20 МБ) освобождается. Но данные остаются во встроенной памяти. В каталоге /data почему-то пусто.
При работе с Оперой через эмулятор чувствуется заметная медленность её интерфейса по сравнению со встроенным браузером (раза в 3-4 больше времени на отрисовку ввода букв) на настоящем «железе» это должно быть незаметно.
Подготовка файла стилей
Очевидно, мы имеем в мобильной Опере сейчас не самую полноценную реализацию юзерстилей. В полной Опере стили имеют возможность применяться к некоторым сайтам или быть общими. Здесь — пока виден механизм только общих стилей, но, вероятно, User Style Info File — есть описание индивидуальных стилей.
Общие стили не мешают работать решению для Хабра: такие стили при создании уже отлаживались в Сафари и IE как общие стили (в тех браузерах тоже нет индивидуализации по сайтам) и были написаны с указанием конкретных имён классов, характерных для стилей Хабра.
Чтобы создать файл для Хабра, берём кроссбраузерный файл CSS со страницы userstyles.org/styles/36690 (кнопка "Show code") и удаляем несколько начальных и конечных строк, как написано там в сопровождении:
Для работы в юзер-стилях Оперы, Safari, IE8 нужно взять часть всего кода — после строчки "@-moz-document domain(«habrahabr.ru»){" до строчки "}", расположенной за 7 строк до конца файла.
Чтобы переместить правую панель вниз, нужно раскомментировать код, начинающийся строкой "/* для нетбуков (сайдбар внизу) * /", удалив из этой строки пробел между "*" и "/".
Задача решена. На эмуляторе Андроида видим стилизованный Хабр в виде, похожем на тот, в каком он был описан для «больших» полноценных браузеров для PC-компьютеров. Некоторые правила стилей, к сожалению, работают не так, как в большой Опере, под которую была сделана адаптация и работа которой запечатлена в видеоролике (8 мин.). Чтобы сделать стили конкретно для Хабра и чтобы они были удобными, понадобится адаптация под мобильную Оперу, но для этого совершенно необходим не эмулятор, а настоящий смартфон.
Однако, упражнения с эмулятором показали принципиальную возможность установки пользовательских стилей на мобильное устройство на Андроиде. Это значит, что можно не так изощрённо поработать над стилями, как в Habr Prettifier, взять стили попроще, но обеспечить вхождение текстов в ширину и 420, и 320 px.
Инструкция по установке стилей
Итого, прививка стилей Хабра (равно как и других) на Андроид выглядит так.
1. Установить Opera 10.1 Mobile.
2. Иметь или скачать файловый менеджер Root Explorer (или работать из командной строки с рутовыми правами).
3. Скачать файл стилей androidOperaHabr.user.css с переименованным расширением "zip" (без какого-либо сжатия), чтобы сохранить как файл. Допустимо в нём же иметь стили для других сайтов. Подготовленный и специально переименованный в расширение ".zip" стиль — по ссылке. В папке /sddisk/download увидим этот файл (рис. 5-2). (Не все стили будут правильно работать, но лучшего на сегодня, 3.02.2011 — нет, адаптации под мобильную Оперу не производилось.)
4. Переименовать расширение в ".user.css" (рис. 5-4; через файловый менеджер в папке /sddisk/download; переименование — через длительное удержание кнопки мыши над файлом, рис. 5-3).
5. Прописать в браузере Opera на странице opera:config в поле "Local CSS file" путь к файлу стилей (в конце обязательно расширение ".user.css") /mnt/sdcard/download/androidOperaHabr.user.css.
6. Нажать кнопку «Сохранить» (!) в самом низу секции "User Prefs". Увидеть сообщение о сохранении настроек (рис. 6).
7. Проверить страницы сайта, чтобы быть уверенным в сохранении настроек.
.. (рис. 5 (1,2,3,4)) (рис.6) |
|---|
Наконец, после этих трудов видим страницы Хабра в формате, адаптированном пользовательскими стилями.
.. (рис. 7 (1,2,3))Видно, что некоторые стили не срабатывают, в частности, position: fixed;, который отвечает за плавающее в углах окна меню. (Рис. 7-2 вверху; придётся эмулировать юзерскриптами.) Некоторые блоки (заголовок?) не выполнили сжатие в окне и раздвинули страницу по горизонтали. На реальном тестовом устройстве с нормальной скоростью отображения эти места, скорее всего, были бы вскоре отлажены.
На логин (надеюсь, исключительно благодаря скорости работы эмулятора) было затрачено порядка часа (сильно занята была память в компьютере), поэтому комфорт работы с ним оценить совершенно невозможно. Тем не менее, доказано, что логин работает.
Ещё один скриншот — страница обсуждения статьи. Грузилась она минут 15 и явилась в виде полной страницы и мелкого шрифта. Обычно в следующие движения страницы масштаб становится указанным в настройках (100%). Небольшие ошибки с шириной страницы тоже есть, но воодушевляет, что полупрозрачные развёрнутые кнопки «Ответить» слева от сообщений отрисовались правильно, в соответствии со стилями CSS3. (Загрузку картинок я сам прервал, с ними всё правильно то, что загружены менее чем наполовину.) Дальнейшее поведение ставит больше вопросов, чем даёт ответов. Кликнуть по кнопке ответа ни разу не удалось — то ли движения страницы, то ли клики 3-4 раза приводили к закрыванию браузера.
.. (рис. 8)Вполне возможно, что условия мобильного интерфейса продиктуют некоторую дополнительную правку стилей под юзабилити тачскрина: что-то сделать больше, где-то поставить кнопку (например, в поиске). Но на сегодня пользовательская стилизация заработала на ещё одной мобильной платформе. (На Symbian и Win Mobile она работала в Опере раньше).
Поддержка написанного кода
Статья на Хабре годится для мимолётной публикации, но не подходит для поддержки темы и замечаний, которые приходят со временем. Будет удобно, если организуем обсуждение и поддержку стилей в другом месте — в форуме по Андроиду или по Опере на другом ресурсе. Предлагайте варианты.
Хорошо бы, всё же, убедиться, что на разных реальных устройствах стили работают (то самое, с чего начинался диалог в комментариях к андроид-приложению для Хабра). Жду отзывов о реальном портировании стилей на живые устройства (должно занять не больше 30 мин.).
Вместо этого ряда не очень привычных действий по установке, конечно, напрашивается создание простого приложения, в которое они будут спрятаны, которое портирует извне пользовательские стили для заданного сайта. Даже простое копирование файла CSS через загрузку в браузер наталкивается на отсутствеие привычного способа сохранения «Сохранить как...». Очевидно, что оно получится неизмеримо проще приложения с полным дублированием интерфейса сайта. (Остаётся открытым вопрос — насколько медленнее будет браузер по сравнению с приложением? Примерно в разы, но станет ли от этого просмотр в полноценном браузере менее комфортен?)
Стили для Fifefox Mobile
Скорее всего, они тоже будут работать, но он не проверялся, потому что основная цель уже достигнута проверкой на одном браузере. Если кто-то решит проверить и установить стили на Firefox, хотелось бы тоже получить адрес страницы обсуждения по нему. Или дождёмся более поздней и стабильной версии браузера.
