«Улучшаем» Sports.ru: пользовательские скрипты, ч. 1
Не чини, обычно говорят, что не сломано. Разумный подход, не правда ли? А что если дело не в том, что что-то сломано, а просто хочется, чтобы работало не так, по-другому, для себя?.. «Для себя» применительно к web-сайтам означает «с помощью пользовательских скриптов». «Черный список для Трибуны», улучшенная лента комментариев и еще несколько примеров таких «надстроек» для sports.ru с описанием и инструкциями.
В прошлой записи я предложил веб-программистам, читающим «Трибуну», помочь мне реализовать некоторые идеи, потенциально способные сделать Sports.ru более дружелюбным к пользователям. К моему огорчению, нашелся только один доброволец. К мой радости, он оказался очень продуктивным. 90% заслуги в том, о чем вы прочитаете ниже, принадлежит пользователю Ежелоко – не забудьте поставить ему «+», когда он отметится в комментариях.
Итак, пользовательские скрипты.
Начнем с того, что разберемся с тем, что и как такие скрипты делают, что они могут и чего не могут и как начать ими пользоваться.
Что такое скрипт?
Скрипт – это небольшая программа, позволяющая изменить внешний вид и содержание сайта локально на вашем компьютере. К примеру, вам не нравится, что в Google по умолчанию белый цвет фона. Вы пишите (или берете готовый) скрипт, который специально для вас, только в вашем браузере меняет фон на странице www.google.com на голубой. Ерунда, можно сказать, но кому-то очень полезная. Или вот менее дурацкий пример: некий пользователь sports.ru у вас в «друзьях» (потому что вы хотите переписываться с ним через почту сайта). Но вам, при этом, не интересно то, что этот друг пишет в своих статусах. Вы пишите (или берете готовый) скрипт, который автоматически скрывает все обновления статусов от вашего друга.
Идея понятна, надеюсь.
Что скрипты могут?
С помощью скриптов можно менять внешний вид страницы – как угодно. Можно перекрашивать, перемещать, скрывать, и т.п. Можно подгружать данные с других страниц (представьте, к примеру, вы наводите курсор мышки на аватар пользователя, и во всплывающей подсказке видите полную информацию из профиля этого пользователя).
Чего скрипты не могут?
Нельзя получить информацию, которой нет. Например, нигде на странице, нигде в коде sports.ru, доступном пользователям, нет данных о том, кто ставит «плюсы» и «минусы».
Нельзя изменить страницу для других читателей. Все изменения, которые делают скрипты, локальны – их видите только вы.
Нельзя «сломать» сайт. Скрипты в основном безопасны (*), они могут создавать дополнительную нагрузку на сервер, но в целом навредить с их помощью довольно трудно.
(* – держим в уме поговорку про то, что если постараться, можно сломать все что угодно).
С чего начать работу со скриптами?
Самим программировать ничего не придется – все уже сделано за нас. Но скрипт, как и любую программу, потребуется установить.
Поскольку у меня не очень много времени на написание этого поста, сегодня я дам инструкции только для тех, кто пользуется браузером Firefox. Пользователям Chrome, Opera и т.п. поможем позже.
Итак, для начала нам потребуется установить плагин Greasemonkey:
Идем на страницу аддона.
Нажимаем кнопу «Добавить в Firefox».
Ждем, пока аддон установится.
Перегружаем браузер.
Проверяем, что у нас появилась иконка с мордочкой обезьяны (на скриншоте справа).
Теперь мы можем устанавливать скрипты, которые Ежелоко написал для Sports.ru.
Для того, чтобы установить скрипт, потребуется только кликнуть по ссылке (все ссылки ниже). Появится окошко вроде такого:
Соглашаемся на установку (кнопка «Install» или «Установить»).
Теперь мы должны убедиться в том, что скрипт включился. Нажимаем на кнопку со стрелкой рядом с кнопкой Greasemonkey на панели инструментов браузера:
Галочка напротив названия скрипта (внизу списка) означает, что скрипт включен.
Теперь посмотрим, какие «улучшения» для sports.ru мы можем установить. Улучшения не зря взяты в кавычки – кому-то вся эта дополнительная функциональность может показаться бесполезной или даже вредной. Так что решайте сами, нужно оно вам или нет.
Для установки скрипта кликаем на заголовок.
Скрипта автоматически подсвечивает ваши комментарии светло-зеленым цветом, ответы на ваши комментарии – розовым. Кроме того, есть возможность скрыть все комментарии с рейтингом меньшим чем «+1» и загрузить все комментарии (если они не умещаются на одной странице).
Выглядит это так:
Кнопка «Load all» подгружает все комментарии, а «+1» работает как переключатель, скрывающий все коментарии с низким рейтингом, и показывающий их по повторному нажатию.
Разумеется, не всем понравится розовый цвет. Как изменить скрипт так, чтобы подсветка выполнялась другим цветом, и вообще о том, как менять скрипты, я напишу в конце.
«Черный список» и плавная загрузка ленты сообщений
Позволяет вести «черный список» блогов на «Трибуне». Бонусный функционал – позволяет подгружать сообщения в ленте блогов не переходя на новую страницу.
Для того, чтобы добавить блог в «черный список» и никогда не видеть его в ленте, нужно кликнуть на иконку с крестиком (рядом с иконкой «Добавить в избранное», в правой части шапки записи»):
Список блогов, добавленных вами в «черный список» будет отображаться справа от ленты:
Нажав на «Удалить» вы вернете блог из немилости – записи в нем снова станут видимыми (требуется перегрузить страницу).
У данного скрипта есть один побочный эффект – если вы внесете слишком много блогов в «черный список» может получиться так, что ваша страница «Трибуны» будет полупустой:
Для того, чтобы не листать постоянно страницы, можно пользоваться кнопкой «Далее...» – она подгрузит записи со следующей страницы ленты.
«Список для быстрой навигации / Избранное»
На Sports.ru существует возможность добавлять статьи в «Избранное», но нет возможности быстро получить доступ к этому «избранному», и нет возможности «избирать» целые разделы сайта. Данный скрипт устраняет эти недоделки.
На любой странице теперь под заголовком находится ссылка «Добавить в избранное». Нажав на нее вы сможете добавить текст, или целый раздел в персональный список «любимых ссылок». Доступ к списку осуществляется через выпадающее меню справа от кнопки «Стиль» или «Оффтоп».
«Дополнительный редактор для новых записей»
Помните, я писал про то, как вставлять цитаты? Требовалось использовать демо-версию FCKEditor, в котором эта возможность не заблокирована и потом копировать текст оттуда в редактор Sports.ru. Теперь есть возможность делать это все не отходя от кассы.
Нажимаем ссылку «Показать/скрыть адекватный текстовый редактор» и получаем в добавок к имеющемуся еще один:
Зачем это нужно?
Во-первых, в новом редакторе можно нормально расставить цитаты и вставить картинки, выравненные по левому или правому краю.
Во-вторых, видите блоки, отмеченные буквой «P» - это абзацы. «Старый» редактор грешит тем, что «съедает» абзацы из скопированных текстов. В новом сразу видно, будет абзац или нет.
Итак, мы можем подготовить запись для публикации в новом редакторе; после этого нужно скопировать ее в старый и опубликовать.
Внимание! В данном скрипте обнаружены два досадных недочета! Рекомендую подождать с установкой скрипта до их исправления!
Недочет 1: При вставке картинки в новом редакторе не видно кнопки «Ок» в окне свойств изображения.
Недочет 2. Форматирование картинки по левому и правому краю не работает: в новом редакторе картинка выравнивается как положено, но при публикации выравнивание сбрасывается.
* * * * * * * * * * * * *
Как видим, начало положено. Не всем, повторюсь, нужны эти изменения. А кто-то давно мечтает о других «фенечках» для «Трибуны». Напишите в комментариях, чего не хватает именно вам, может быть ваше предложение получит поддержку у других читателей и Ежелоко сделает соответствующий скрипт.
* * * * * * * * * * * * *
Теперь последняя тема на сегодня: как исправлять скрипты «под себя».
Чем хороши скрипты – они написаны на относительно простом языке программирования JavaScript. Если вы учили программирование в школе или институте, то без особого труда сможете понять, как они работают и, при необходимости, изменить в них что-нибудь.
Возьмем, к примеру, подсветку комментариев розовым.
Открываем скрипт для редактирования (третий сверху пункт меню под кнопкой Greasemonkey):
Дальше выбираем, какой скрипт мы хотим изменить, кликаем правой кнопкой мыши на нем, выбираем пункт меню «Edit» / «Редактировать» / «Изменить»:
В текстовом редакторе, который у вас установлен по умолчанию, откроется текст скрипта. В нем можно найти строчку, отвечающую за цвет и изменить ее:
Поменяв значение «bbffbb» на другое и сохранив изменения в скрипте, можно получить, допустим, грязно-желтый цвет:
И вообще, комментарии в тексте скрипта помогут разобраться, что к чему.
* * * * * * * * * * *
Не забываем поблагодарить автора (Ежелоко) и отписываемся в комментариях о недочетах, ошибках, если таковые будут найдены, и своих идеях для скриптов.
Спасибо за внимание.
По редактору хотелось бы узнать, у всех ли такой баг? Одна из последних правок как раз увеличивала окно редактора, потому что добавление картинки не влезало.
Но это будет мало кому интересно использовать, а уж таких странных людей, которые бы это реализовывали просто так из интереса - и вовсе единицы :)
Ежелоке сенкс, за труд
Ну или написать новые скрипты для чего-нибудь другого.
Идея, как Вы понимаете, не в том, чтобы всех перевести на «улучшенный» Sports, а, скорее, обрисовать направление. И, возможно, дать идеи разработчикам.
у нас накидывают целую авоську задач в начале семестра и разгребай это все потом..