How to watch Speaker Deck comfortably in mobile
Speaker Deck is a service that shares slides.
After a particularly large conference is held, a lot of presentation material will be uploaded to this service.
I like to browse these slides.
Speaker Deck has no particular problem for browsing on PC.
However, it is a little disappointing when browsing in the mobile.
Because Speaker Deck only has layout for PC.
I think it is common to browse Twitter and RSS while commuting.
At that time, the slides that flowed to the timeline will be watched on a smartphone.
Despite accessing from mobile, These slides are displayed as PC layout so it feels very inconvenient.
So, I made a site that allows you to comfortably browse Speaker Deck in mobile environment.
Mobile Speaker Deck: https://mspeakerdeck.com/
This is only viewable in mobile. If access except mobile, redirect to original page.
Try to access to https://mspeakerdeck.com/qrush/the-graphql-way-a-new-path-for-json-apis in your mobile phone.
How to use
(1) Access Speaker Deck presentation material page
(2) Add m to the initial letters of speakerdeck.com in the domain
(3) It will be the optimum layout for mobile environment
In short,
https://speakerdeck.com/qrush/the-graphql-way-a-new-path-for-json-apis
↓ Only add m to the head of domain.
https://mspeakerdeck.com/qrush/the-graphql-way-a-new-path-for-json-apis
That’s all!
Then, it is displayed like this.
How it works
This service is running with this kind of flow.
(1) First, access https://mspeakerdeck.com/ <user-name> / <slide-name>
(2) The SPA page made by Nuxt.js running on Firebase Hosting will be displayed
(3) Analyze URL to obtain <user-name> and <slide-name>
(4) Send request to Cloud Functions with necessary parameters
(5) Cloud Functions will access Speaker Deck and get the necessary information
(6) Build and display the slide image URL using the acquired information
Some technical points
■ Use dynamic routing with Firebase Hosting
When running Nuxt.js with Firebase Hosting, the default setting does not support dynamic routing.
In order to avoid this it was necessary to add the following description in nuxt.config.js of Nuxt.js.
{
generate: {
fallback: true,
},
router: {
fallback: true,
},
}■ Find the last slide
Speaker Deck’s page does not have information on the total number of slides.
So, I do not know how many sheets of presentation materials are final.
In order to solve this problem, some of the slide images are prefetched and recognized the number of images whose response was 404 as the last slide.
Specifically, it is such a code.
// 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;■ Prevent zooming with double tap
“User-scalable = no” has been invalidated from iOS 10.
So, if you double tap a button on a terminal with iOS 10 or later it will be zoomed.
To prevent this, I set an event listener on the touchmove event and disabled double tap.
Specifically, it is such a code.
containerElement.addEventListener('touchmove', (e) => {
e.preventDefault()
}, false);■ Cache the response of Cloud Functions on CDN
Cloud Functions’ response can be cached in Firebase Hosting.
https://firebase.google.com/docs/hosting/functions#managing_cache_behavior
Specifically, I just added such a code.
res.set('Cache-Control', 'public, max-age=300, s-maxage=600');Disclaimer
Finally, this service is an informal service of Speaker Deck.
Especially Slide URL uses Speaker Deck image url as direct link.
This is inappropriate implements.
If the GitHub Inc. contacts me to stop this service immediately, we will respond immediately.
The source codes are here.
“YuheiNakasaka/speakerdeck-gcf” is the Cloud Functions repository.
“YuheiNakasaka/speakerdeck-mobile” is the frontend website repository.
