เนื่องจากรับหน้าที่ไปสอนนักศึกษามหาวิทยาลัยกลุ่มหนึ่ง หัวข้อที่สอนคือ CSS เราก็อยากจะทำเอกสารประกอบการสอนให้เข้ากับเรื่องนี้ ก็เลยมาลงที่การทำสไลด์ด้วย HTML เพื่อให้นักศึกษากลุ่มนี้เกิดความรู้สึกว่า “สิ่งที่เขาเรียนไป มันใช้ทำอะไรได้ขนาดนี้เลยเหรอ”
ตอนแรกก็ลอง ๆ หาก็พบ html5slides ซึ่งก็ถือว่าใช้งานได้ง่ายเลยทีเดียว แต่มีข้อจำกัดว่าขณะใช้งานต้องเชื่อมต่ออินเตอร์เน็ต เนื่องจากการอ้างอิง js, css, ฟอนต์ในนั้น อยู่ภายนอกหมด ก็เลยต้องออกแรงแก้ไขดัดแปลงนิดหน่อยให้สามารถใช้งานแบบ Offline ได้
แต่ Template ชุดนี้ก็ดันมีปัญหากวนใจสำคัญเรื่องหนึ่งคือการแสดงผล iframe ใน Google Chrome ที่จะทำให้หน้าสไลด์เลื่อนจนไม่เหมาะสมแก่การใช้งาน ซึ่งในจุดนี้ก็จนปัญญาจะแก้เหลือเกิน (คงเป็น Internal ใน Google Chrome นี่แหละทำให้เกิดปัญหาการแย่งซีนของ iframe ขึ้นมา)
ในเวลาเดียวกัน ก็ลองค้นหาต้นแบบอื่น ๆ ก็ไปพบกับต้นแบบที่คล้าย ๆ กับของที่ปรากฏใน slides.html5rocks.com อีกตัว เข้าใจว่าเขาคง port ออกมาจากสไลด์ตัวนี้แหละ ชื่อ g5 ซึ่งตอนแรกคิดว่าจะมีรูปแบบการทำงานเดียวกับแบบแรก แต่ที่แท้จริงแล้ว ตัวนี้ต้อง build ผ่านทางคำสั่ง slideshow ซึ่งเป็นแพคเกตตัวหนึ่งใน gem นั่นก็นำมาสู่ขั้นตอนการติดตั้งอันแสนจะวุ่นวายยามค่ำคืน
อันดับแรก ติดตั้ง slideshow ก่อนผ่านทาง gem
sudo gem install slideshow
ขั้นต่อมาติดตั้ง Template ของ g5 ผ่านคำสั่ง
slideshow -f https://github.com/geraldb/slideshow-google-html5-slides/raw/master/g5.txt
ต่อมาก็ทำการสร้าง Directory ว่าง ๆ ซักที่ แล้วเข้าไปเรียกใช้คำสั่งนี้ เพื่อสร้างไฟล์ทั้งหมดออกมา
slideshow -t g5.txt tutorial
ที่นี้ปัญหาคือ เราจำเป็นต้องมีไฟล์ tutorial นี้เสียก่อน ซึ่งจริง ๆ ก็เป็นแค่ text file ธรรมดานี่แหละ แต่ในเว็บเขาไม่ได้บอกเอาไว้ว่าต้องทำ (แหมเราก็ซื่อนะ ไม่เคยใช้นี่) ก็วนเวียนสาระวนกับเรื่องนี้มา 1 คืน ไปเอา rvm มาติดตั้งโหลด ruby 1.9 มาติดตั้ง แล้วก็ไม่ได้อะไรขึ้นมาหนำซ้ำยังไปติดปัญหาอื่นที่งงกว่าเดิม สุดท้ายก็ถอนออก แล้วจึงทำการสร้าง tutorial ขึ้นมา (ผมเลือก Markdown แทนการใช้ Textile นะ) โดย
touch tutorial.text
แล้วจึงทำการเรียกใช้งานคำสั่งที่แล้วอีกครั้ง ก็จะสามารถสร้างสไลด์ตัวอย่างออกมาได้
การกำหนดหัวข้อให้เรากำหนดได้ใน tutorial ของเราตามรูปแบบที่เขียนในเว็บได้เลย แล้วก็ใช้หัวข้อลำดับ 1 ในการแบ่งสไลด์ไปเรื่อย ๆ ขั้นต่อไปคงจะมาดูขั้นตอนการปรับขนาดอักษรภายในให้ใหญ่ขึ้นอีกหน่อย เพราะด้วยปัจจุบันค่อนข้างเล็กมาก