Speaker Deck — сервис для обмена слайдами.
После проведения особо крупной конференции на этот сервис будет загружено много презентационного материала.
Мне нравится просматривать эти слайды.
У Speaker Deck нет особых проблем с просмотром на ПК.
Тем не менее, это немного разочаровывает при просмотре на мобильном телефоне.
Потому что Speaker Deck имеет макет только для ПК.
Я думаю, что во время поездок на работу обычно просматривают Twitter и RSS.
В это время слайды, перенесенные на временную шкалу, будут просматриваться на смартфоне.
Несмотря на доступ с мобильного устройства, эти слайды отображаются в виде макета для ПК, поэтому это очень неудобно.
Итак, я сделал сайт, который позволяет вам удобно просматривать Speaker Deck в мобильной среде.
Мобильная колонка: https://mspeakerdeck.com/
Это видно только в мобильной версии. Если доступ кроме мобильного, редирект на исходную страницу.
Попробуйте получить доступ к https://mspeakerdeck.com/qrush/the-graphql-way-a-new-path-for-json-apis на своем мобильном телефоне.
Как пользоваться
(1) Доступ к странице с презентационными материалами Speaker Deck
(2) Добавьте m к начальным буквам Speakerdeck.com в домене.
(3) Это будет оптимальная компоновка для мобильной среды.
Короче,
https://speakerdeck.com/qrush/the-graphql-way-a-new-path-for-json-apis
↓ Добавляйте только m в заголовок домена.
https://mspeakerdeck.com/qrush/the-graphql-way-a-new-path-for-json-apis
Это все!
Затем это отображается так.
Как это работает
Эта служба работает с таким потоком.
(1) Сначала зайдите на https://mspeakerdeck.com/ ‹user-name› / ‹slide-name›
(2) Будет отображаться страница SPA, созданная Nuxt.js, работающей на Firebase Hosting.
(3) Проанализируйте URL, чтобы получить ‹имя пользователя› и ‹название слайда›.
(4) Отправить запрос в Облачные функции с необходимыми параметрами
(5) Cloud Functions получит доступ к Speaker Deck и получит необходимую информацию.
(6) Создайте и отобразите URL-адрес изображения слайда, используя полученную информацию.
Некоторые технические моменты
■ Используйте динамическую маршрутизацию с Firebase Hosting
При запуске Nuxt.js с хостингом Firebase настройка по умолчанию не поддерживает динамическую маршрутизацию.
Чтобы избежать этого, необходимо было добавить следующее описание в nuxt.config.js Nuxt.js.
{
generate: {
fallback: true,
},
router: {
fallback: true,
},
}
■ Найти последний слайд
На странице Speaker Deck нет информации об общем количестве слайдов.
Итак, я не знаю, сколько листов презентационных материалов являются окончательными.
Чтобы решить эту проблему, некоторые изображения слайдов предварительно загружаются и распознаются как количество изображений, ответ которых был 404, как последний слайд.
Конкретно это такой код.
// Find out total slide count by checking response of each imgs
const img = new Image();
img.onerror = () => {
vm.slideCount = id - 1;
}
img.src = baseURL + id + ext;
■ Запретить масштабирование двойным нажатием
«User-scalable = no» был признан недействительным в iOS 10.
Таким образом, если вы дважды нажмете кнопку на терминале с iOS 10 или более поздней версии, она будет увеличена.
Чтобы предотвратить это, я установил прослушиватель событий на событие touchmove и отключил двойное касание.
Конкретно это такой код.
containerElement.addEventListener('touchmove', (e) => {
e.preventDefault()
}, false);
■ Кэшировать ответ Cloud Functions в CDN
Ответ Cloud Functions можно кэшировать в Firebase Hosting.
https://firebase.google.com/docs/hosting/functions#managing_cache_behavior
Конкретно я просто добавил такой код.
res.set('Cache-Control', 'public, max-age=300, s-maxage=600');
Отказ от ответственности
Наконец, этот сервис является неофициальным сервисом Speaker Deck.
В частности, URL-адрес слайда использует URL-адрес изображения Speaker Deck в качестве прямой ссылки.
Это неуместные орудия.
Если GitHub Inc. свяжется со мной, чтобы немедленно остановить эту службу, мы немедленно ответим.
Исходники здесь.
«YuheiNakasaka/speakerdeck-gcf» — это репозиторий облачных функций.
«YuheiNakasaka/speakerdeck-mobile» — репозиторий внешнего интерфейса веб-сайта.
