Пользуясь Telegram я заметил как удобно в нем отображаются картинки. Полноэкранные изображения, возможность листать — идеально для веб комиксов. Вот только не все авторы имеют свой канал, более того некоторые не озаботились даже RSS и ещё больше публикуют в рассылке только ссылки на страницы, поэтому из rss-аггрегатора приходится переходить в браузер. Совсем не так удобно, как хотелось бы.
Как можно решить эту проблему с помощью бота? Наш бот должен регулярно заходить на заглавную страницу комикса, просматривать её, находить ссылку на изображение, проверять, что это новое изображение и если да, то публиковать её в выбранном канале.
Итак приступим. В качестве жертвы выберем Sinfest, у которого нет даже rss-рассылки. Находится по адресу http://www.sinfest.net/, обновляется ежедневно. Бота
Начнем совсем с основ, создадим проект. Идем на GitHub, создаем новый проект, создаем README и .gitignore под Node. Результат примерно такой https://github.com/TogusaRusso/sinfest-feed-bot
КАК С НУЛЯ СОЗДАТЬ СВОЙ КОМИКС
В качестве IDE я выбрал https://c9.io/, довольно удобную онлайн среду разработки. Идем туда, регистрируемся и клонируем проект, получая готовую среду разработки с уже установленным git и Node.js. Единственное что нужно это поменять версию Node на более свежую, чтобы в дальнейшем было меньше проблем с выгрузкой на Heroku.
nvm install v7.0
nvm use v7.0
nvm alias default v7.0
Теперь создадим package.json
npm init
И сообщим о нашем достижении git
git add .
git commit -m’Initial commit’
В процессе создания я оставил точкой входа index.js, но им мы займемся позже. Также для красоты кода установим билиотеку Standard
npm install standard -g
Теперь нам в консоли стала доступна команда standard, которая проверяет код на соответствие модным стандартам.
Также зайдем в меню Cloud9 -> Open Your Project Settings и исправим tabSize на “2”, а semi на false, чтобы редактор не ругался на отсутствие точек с запятой, а лесенки были менее размашистыми.
Начнем мы с обработчика страницы.
touch parser.js
Заходим в редактор и пишем данный код.
‘use strict’const http = require(‘http’)function ParseTitlePage () const options = hostname: ‘www.sinfest.net’,
path: ‘/index.php’,
method: ‘GET’,
headers: ‘user-agent’: ‘Mozilla/5.0’
>
>
let data = »
http.get(options, (res) => res.on(‘data’, (chunk) => data += chunk)
.on(‘end’, () => console.log(data))
>)
.on(‘error’, (e) => console.error(e))
>ParseTitlePage()
module.exports = ParseTitlePage
node parser.js
Любуемся на код заглавной страницы в консоли. Нам от него толку мало, поэтому надо его направить в обработчик, который и выловит из него нужный нам адрес. В качестве обработчика я выбрал htmlparser2, который ещё нужно установить и добавить в зависимости.
npm install htmlparser2 —save
Теперь куски данных, которые получает http.get надо перенаправить в обработчик, настроенный для вывода содержимого всех IMG тэгов. Наш код превращается в следующий.
Как сделать комикс / мангу ? + Розыгрыш комиксов
‘use strict’const http = require(‘http’)
const htmlparser = require(‘htmlparser2’)function ParseTitlePage () const parser = new htmlparser.Parser( onopentag: (name, attr) => if (name === ‘img’) console.log(attr.src)
>
>, )
const options = hostname: ‘www.sinfest.net’,
path: ‘/index.php’,
method: ‘GET’,
headers: ‘user-agent’: ‘Mozilla/5.0’
>
>
http.get(options, (res) => res.on(‘data’, (chunk) => parser.write(chunk))
.on(‘end’, () => parser.end())
>)
.on(‘error’, (e) => console.error(e))
>ParseTitlePage()
module.exports = ParseTitlePage
В результате получаем список изображений на главной странице
../images/bright_sinfest.gif
btphp/comics/2016-11-27.gif
../images/first.gif
../images/prev.gif
http://www.projectwonderful.com/nojs.php?id=13807 if (name === ‘img’ attr.src.indexOf(‘btphp’) !== -1) console.log(`Parsed url: $`)
callback(hostname + ‘/’ + attr.src)
>
>
>, )
const options = hostname: hostname,
path: ‘/index.php’,
method: ‘GET’,
headers: ‘user-agent’: ‘Mozilla/5.0’
>
>
http.get(options, (res) => res.on(‘data’, (chunk) => parser.write(chunk))
.on(‘end’, () => parser.end())
>)
.on(‘error’, (e) => console.error(e))
>// Uncomment if want to test this module alone
// ParseTitlePage((url) => console.log(url))module.exports = ParseTitlePage
Поскольку мы не хотим, чтобы при обращении require(‘./parser.js’) происходило выполнение ParseTitlePage, я закомментировал вызов в теле модуля. Если убрать комментарий и выполнить модуль, можно увидеть, что всё работает.
Отметим пройденный этап в git
git add .
git commit -m’We parsing title page’
git push origin master
echo «export TOKEN=»» >> /.profile
Теперь надо создать канал, в который бот будет публиковать записи и сделать его администратором (не единственным, надо же и самому контролировать канал). Имя канала так же загоним в переменную.
echo «export CHANNEL=’SinfestUnofficialFeed'» >> /.profile
Перезагрузим рабочее место (Cloud9 -> Restart Workspace) и проверим результат.
$ node
> process.env.CHANNEL
‘SinfestUnofficialFeed’
Отлично. Теперь собственно бот, ради которого всё затевалось. Для него я использую библиотеку node-telegram-bot-api
npm install node-telegram-bot-api —save
touch bot.js
И вносим в файл следующий код.
Запустим нашего бота
node bot.js
И увидим что нужная картинка прилетела в канал. Возникает резонный вопрос: “А какой же это бот если его каждый раз надо запускать вручную?” Эту проблему мы решим при переходе на Heroku.
Дело в том, что бесплатный аккаунт Heroku накладывает на программу довольно много ограничений. Он не люби когда код работает подолгу и норовит его усыпить поэтому просто запустить таймер и запускать по нему бота не получится. НО! Среди его пакетов есть простенький но вполне нам подходящий Heroku Scheduler.
Следующая особенность состоит в том, что это всё таки платформа для веб-приложений и поэтому у нашего бота на Heroku будет страница при обращении к которой надо что-то запустить и ответить. Поэтому нам нужен простенький сервер. Сохраним наш прогресс и создадим его.
git add .
git commit -m’Now with working bot’
git push origin mastertouch index.js
Код сервера крайне прост.
‘use strict’const http = require(‘http’)const ip = process.env.IP || ‘localhost’
const port = process.env.PORT || 8080
const url = «» rel=»noopener ugc nofollow» target=»_blank»>https://telegram.me/$`const server = http.createServer((request, response) => response.writeHead(200, )
response.end(`This is Sinfest bot on ‘>$ `)
>)server.listen(port)console.log(`Server listening at :$/`»>http://$:$/`)
Добавим его в package.json
.
«main»: «server.js»,
«scripts»: «test»: «echo «Error: no test specified» exit 1″,
«start»: «node server.js»
>,
.
Теперь проверим как всё работает
Теперь отправим наш проект на Heroku чья утилита уже установлена на Cloud9. Если вы ещё не зарегистрированы https://www.heroku.com/, сейчас самое время это сделать.
$ heroku login
Enter your Heroku credentials.
Email:
Password (typing will be hidden):
Logged in as
$ heroku create sinfest-feed-bot
Теперь, когда мы создали наше приложение, надо не забыть зайти в настройки и задать глобальные переменные TOKEN и CHANNEL
$ git add .
$ git commit -m’Now with server’
$ git push origin master
$ git push heroku master
После этого добавляем add-on Heroku Scheduler и настраиваем его на регулярное выполнение следующей команды.
node bot.js
Теперь бот, в принципе работает. С периодичностью, заданной в Scheduler он идет на заглавную страницу, находит там картинку и публикует её в Telegram. Если настроить запуск раз в сутки, то получим вполне приемлемый результат. Но если мы хотим чтобы публикация происходила сразу после размещения на сайте или чтобы одна и та же картинка не появлялась в чате дважды, если автор пропустил день, то нас такое поведение не устроит.
Необходимо настроить планировщик на проверку каждый час и при этом проверять, публиковали ли мы уже эту картинку. Вроде бы всё просто: запомнить адрес последней опубликованной картинки, но и тут Heroku затрудняет нам задачу. Глобальная переменная может потерять свое значение, когда приложение пойдет баиньки, записывать файлы из приложения Heroku не даёт, изменять переменные среды — тоже. Но есть выход.
Установим бесплатный пакет mLab MongoDB и изменим наш код так, чтобы перед публикацией приложение искало ссылку в базе данных и публиковала её только в том случае, если ничего найти не удалось. Выглядит это так.
Теперь настраиваем перезапуск на каждый час и всё работает. Неожиданный бонус состоит в том, что в базе данных теперь хранится архив ссылок на предыдущие комиксы и при желании с ними можно будет что нибудь сделать.
Источник: medium.com
Как создать комикс в онлайне: обзор 5 сервисов с видеоинструкциями
Понравился комикс от Алексея и Дарьи Александровых, и вы захотели создать свой – в онлайне, без установки программ на компьютер? Тогда вам пригодится наша подборка.
Дата публикации: 9 января 2019
Время чтения: 2 минуты
Лия Канарская Редакция «Текстерры»
Как создать идеальный комикс. 19 советов от Пола Холдена
Пол Холден, ирландский художник, рассказал о своих техниках рисования и трюках, а также дал несколько советов, которые помогут вам создать свой собственный комикс в Manga Studio.
Рисование комиксов – это своеобразный навык, который требует знания анатомии, света и тени, архитектуры и многих других вещей, и все они работают на одну цель – рассказать историю.
Одна из опасностей – это возможность потеряться в мелочах. Вы очень часто будете обнаруживать, что вы влюбились в какой-то элемент комикса, но в контексте истории этот элемент не работает.
1. Читайте сценарий!
Все всегда начинается с прочтения сценария, ведь вам нужно понимать суть истории. Чтобы ознакомиться с ним достаточно хорошо и привыкнуть к нему, стоит прочесть сценарий несколько раз, пока вы не ощутите, что вы готовы рисовать миниатюры. Так как комикс должен доносить сценарий до читателя, вы обязаны досконально понимать историю, которую вы рисуете.
2. Миниатюры
Разбивать сценарий на миниатюры необходимо. На этой стадии постарайтесь поработать с расстановкой персонажей в кадре и размерами самого комикса.
Обычно, чем больше диалогов в одном окне, тем больше оно должно быть. Относитесь к этому этапу с должной ответственностью, так как вы не должны упустить детали.
3. Планировка
Стоит еще немного поработать с миниатюрами. Планировка – это немного скучно, как и остальные начальные стадии проработки комикса. Но этому стоит уделить время.
Нужно, чтобы страница выглядела, как полноценный и самостоятельный рассказ. Для этого можно сделать длинную и большую панель для одного из кадров. Хотя, после прочтения этой панели, она быстро отойдет на второй план и более играть роли не будет.
4. Дизайн персонажей
Обычно дизайн персонажей идет после прочтения сценария. На тех персонажей, которые появляются раз или два за весь комикс, можно не тратить особо много времени, так как вам не нужно будет продумывать их эмоции и характер. Ну а главные герои, конечно, потребуют гораздо больше усилий.
5. Создаем страницу
Никогда не забывайте о размерах страницы. Если они указаны в вашем задании – удостоверьтесь, что вы выставили правильные цифры. Если вы не уверены в том, каких размеров должен быть комикс, то лучше спросите об этом у заказчика.
Разрешение выставляем в 600DPI, это выше, чем обычно требуется, но вы никогда не знаете, будут ли ваши работы вновь опубликованы. А технологии двигаются вперед с ошеломительной скоростью, поэтому лучше перестраховаться.
Горячие клавиши:Двигайте страницу с помощью Shift+Space (только для ПК). Зажмите эти клавиши и используйте мышку или графический планшет, чтобы двигать страницу. Очень удобно для рисования.
6. Грубые разметки
Набросайте пару сцен. Грубо расположите все, что вы хотите поместить на вашу страницу. Разбейте страницу на панели и, начиная с первой, проработайте сцену.
Все еще помните о сценарии на этой стадии и о том, что сценам должно хватить места на странице.
7. Разрезаем страницу
Используя свой макет, как руководство, создайте новый “Frame Folder” в Manga Studio, и разрежьте страницу, используя инструмент “Cut Frame”.
Это разделит страницу на панели комикса. Каждая панель будет иметь свою собственную папку, способную иметь несколько слоев в себе. Ширину границы панели вы можете настраивать на свой вкус.
8. Устанавливаем кадр
На этом этапе ты работаем над постановкой кадра. Это очень важно, если вы хотите вовлечь читателя в свой мир.
Так как было решено сделать одну панель высотой в страницу, начнем с построения города: настраивать сетку перспективы очень просто и быстро, если вы используете линейки Manga Studio.
9. Старик и дерево
Теперь стоит сфокусироваться на выражении лица старика. Дерево помогает обрамить его лицо, в то время, как голова человека и его плечи позволяют обрамить роботов позади него.
10. Текст
Диалоги в комиксах располагаются слева направо, поэтому вы должны убедиться в том, что сцены и персонажи расставлены правильно, учитывая это правило. Пренебрегая этим, вы рискуете остаться в итоге с перекрещивающимися диалогами или, что еще хуже, с неправильным диалогом для данной панели.
11. Панель к панели
Панель четыре является маленькой копией панели два, в то время как панель пять является сменой сцены, двусторонним зеркалом, которое позволяет видеть переход от одной панели к другой.
Помните, что фон каждой панели должен соответствовать сцене и показывать, что сцены связаны друг между другом. Короче говоря, фон должен следовать за общей историей.
Горячие клавиши:Переключать цвета между цветом переднего плана и цветом заднего плана можно с помощью клавиш Х и С (для ПК только).
12. Выключите свет!
Робот входит в более темную комнату. Оставляя эту панель в тени и добавляя силуэт, мы легко даем понять, что сцена и настроение комикса сменились. Предполагая, что робот выходит из двери, а старик расположен в большом окне, можно сказать, что изображено что-то вроде комнаты для испытаний.
13. Робот в тени
Оригинальная идея заключалась в том, чтобы показать полностью лицо робота. Но затем стало понятно, что оставляя некоторую загадку, мы сделаем робота более мощным персонажем. Поэтому было решено оставить его лицо в тени, создавая таким образом ощущение таинственности.
14. Полная остановка
Последняя панель последней страницы комикса должна резонировать – это финальный пунктуационный знак во всей истории.
Сюжет и макеты рассказывали о старике, который заботится о своем дереве, но в последний момент было решено использовать более сильное изображение, которое изображало само дерево. Это сильное изображение, которое предполагает, что старик больше не способен ухаживать за деревом.
15. Изменения
На этом этапе вы показываете свою работу заказчику и вносите в нее изменения. Возможно, получится придумать иное развитие сюжета, возможно, возникнет новая идея. Также иногда получается, что вы совсем в другую степь ушли, и ваш комикс не соответствует желаемому результату. Тогда придется все переделать.
