Introducing project Kyou

ในบล็อคตอนนี้พักเรื่องอนิเมะและเรื่องดองบล็อคมาถึงอะไรที่มีสาระกันบ้างครับ ก็จะขอแนะนำ project NSC ประจำปี 2013 ครับ “project Kyou”

*(blog post นี้เขียนไว้ล่างหน้าประมาณครึ่งเดือนก่อน publish)*

project Kyou คืออะไร? อันนี้ผมคงโยน teaser ไปมากพอสมควรแล้ว แต่เพื่อป้องกันไม่ให้คู่แข่งที่อาจจะเอาไปวิเคราะห์อะไรได้ เลยปิดข่าวไว้ให้มากที่สุดครับ

เคยอ่านคออนิเมะไหมครับ? คออนิเมะทั้งสองเล่ม ผมโค้ดมือทั้งเล่มครับ ผมเคยคิดว่าห้ามทำระบบออโต้เด็ดขาด เพราะมันจะจำกัดความคิดสร้างสรรค์ให้อยู่ได้แค่ที่ระบบทำได้ แต่พอขึ้นเล่มต่อมาเข้าจริงผมพบว่ามันจะเริ่มเบื่อและขี้เกียจ ใช้วิธีเขียนที่ง่ายขึ้น ทำให้คุณภาพมันตก

อีกส่วนคือทางด้าน NSC ผมวางแผนและประกาศไปแล้วว่าผมจะเอา menome ลง ผมมองแล้วว่ามันจะไม่ได้ที่ 1-3 แน่นอนเพราะ social impact ต่ำ แต่มันไม่ต้องเขียนใหม่และพัฒนามาเป็นปีแล้ว แต่คนที่ทำอีกคนหนึ่งคือ Fantasier ซึ่งอยู่คนละโรงเรียนบอกว่าไม่ลงด้วยและให้เงินรางวัลไปได้เลย ผมก็เลยตะขิดตะขวงใจ ก็เลยตัดสินใจว่าจะทำระบบสร้างคออนิเมะสำเร็จรูป ก็เป็นที่มาของ project Kyou

ทีนี้มันจะมีสองประเด็นที่ผมก็คิดต่อออกไป (ผ่านการสนทนากับหลายท่านทาง Twitter)

1. สังเกตว่า NSC มี “โปรแกรมส่งเสริมการเรียนรู้” แต่เอาเข้าจริงแล้วไม่ใช้แฟลชก็ RPG Maker อะไรประมาณนี้ มันกลายเป็นว่าเราตกอยู่ภายใต้เครื่องมือของต่างประเทศ แต่ไม่ค่อยมีใครคิดเครื่องมือเข้ามา
2. อันนี้ผมไม่ค่อยมั่นใจในข้อมูล แต่เหมือนหมวดโปรแกรมส่งเสริมการเรียนรู้ จะต้องส่งด้วยโปรแกรมที่มีเนื้อหา โปรแกรมผมไม่มีเนื้อหา คนใช้อยากสร้างเรื่องอะไร ใส่เข้าไปได้เลย เพียงแต่ว่าผมเอาคออนิเมะเป็นเครื่องทดสอบว่ามันสามารถทำได้จริง ถ้าอยากทำอย่างอื่นนอกเหนือ อาจจะประยุกต์ได้ หรือเขียนต่อเพิ่มไปก็ได้ ผมก็ไม่แน่ใจว่าโปรแกรมไม่มีเนื้อหามันไม่ใช่ “ส่งเสริมการเรียนรู้” ยังไง (เท่าที่ดูกติกาแล้วไม่ได้มีคะแนนอะไรเฉพาะนะครับ แต่ผมไม่กล้าเสี่ยงเพราะเป็นปีสุดท้ายในระดับมัธยม และยังไม่เคยเห็นคนอื่นส่งอะไรที่ไม่มีเนื้อหาลง จะไปลงโปรแกรมประยุกต์เอาซะมากกว่า)
3. (ประเด็นที่แล้วไม่นับ) ตอนนี้ Tablet ป. 1 กำลังเป็นกระแสนิยม และระบบ content ไม่ดี คือผมเพิ่งรู้ไม่นานเนี่ยครับว่าไอ้ที่เห็นมันทำฟรี แต่ตัว learning object ที่อีกกลุ่มทำ อันนี้ไม่ทราบรายละเอียด ผมเชื่อนะครับว่า คนเดียวที่อ่านเกมออกคือ Apple ที่ออก iBooks Author มา เพราะเราไม่ได้ต้องการ video เปิดสอนให้นักเรียนนะคะนี่คือแบบเรียนวิชาภาษาไทย อันนี้สำหรับชั้นป. 1 ทำได้ แต่ในระยะยาวแล้ว สิ่งที่ควรมีคือ content platform ที่ครูสามารถผลิตผลงานได้เอง

หลังจากผมพอได้ไอเดียการออกแบบโปรแกรมในหัวแล้ว ก็ตาม flow มาตรฐานครับ คือผมต้องปรึกษาโคช (คุณพ่อ) ก่อนว่าโอเคมั้ย พ่อฟังผมอธิบายแล้วยังไม่เห็นภาพในหัว เลยบอกว่าอยากให้มัน drag & drop ได้เลย (ซึ่งจริงๆ อยู่ในแผนแล้ว) ตอนนั้นผมก็แย้งไปแล้วก็จัดการทำโดยไม่สนใจอะไร

ถัดมา ก่อนเริ่มโครงการ ผมต้องเลือกชื่อโครงการครับ ก็จะมีหลายชื่อที่คิดเอาไว้ (ซึ่งมาจากอนิเมะ เหมือนเป็น naming scheme ผมแล้ว เพราะว่าตั่้งชื่อลอยๆ มันน่าจะดู geek ไป) เช่น menma (Ano Hana), akira (พระเอก EOTE), alice (นางเอก Kamisama no Memochou แต่ชื่อนี้ผมใช้เป็น database server แล้ว), kirino (oreimo), kurisu (Steins;Gate), mirai (TM8.0) แล้วก็ตัดสินใจไม่ได้จนนอน วันต่อมา ผมตื่นมาคิดว่าเลือก Kyou (Clannad) เพราะไม่มีอยู่ในรายชื่อแรก (surprise!)

ถ้ายังจำภาพเปิดตัวได้นะครับ เคียวปาหนังสือโดดถีบใส่ซุโนฮาร่า สโลแกน Kickass. Flying Books. มันเป็นภาพที่ผมนึกขึ้นมาตอนเลือกชื่อโครงการ และสโลแกนมันก็เหมือนจะตรงตามภาพ แต่ความหมายที่จะสื่อก็คือมันเจ๋ง (Kickass) และมันปฎิวัติหนังสือ (Flying books) สำหรับ slogan ที่ใช้แบบเป็นทางการผมก็จะใช้ว่า Books. Made interactive.

พาร์ทต่อไปที่จะเขียน จะขอเล่าถึงประวัติการพัฒนาตั้งแต่ต้นเลยนะครับ ไม่รู้ว่าจะจบกี่ part ผมถึงจะเบื่อ

Building Book: CoreAnime 0

พบกันอีกแล้วครับ กับซีรีส์ Building ในฉบับนี้เป็นเรื่องของ [CoreAnime](http://facebook.com/coreanime) นิตยสารออนไลน์ HTML5 เกี่ยวกับอนิเมะซีซั่นล่าสุดครับ

ย้อนกลับไปช่วงสักสิงหา (ที่เป๊ะๆ คือ 27 สิงหา 2011) อยู่ดีๆ ผมก็โดนจับเข้าทีมงาน Sunburn Group ซะงั้น โดยไม่รู้ว่ามันคืออะไร และไม่ได้เลือกเข้ามาซะด้วย.. ในชื่อสโลแกนว่า “กลุ่มคนไร้งาน ที่มีงาน” วันนึงคุณอ้นแถลงการณ์ “อยากทำหนังสือแบบโอตาคุแมก อะ แบบคุณภาพดี(มาก) ราคาย่อมเยา กรั่ก” `(and yes, this is copied verbatim)` เราก็เลยเริ่มศึกษางานกัน

ผมเสนอคนแรกไปว่าเราน่าจะทำเป็น iPad ebook โดยทำแบบหนังสือที่ผมชอบมากตอนนั้น คือ [The Final Hours of Portal 2](http://www.thefinalhoursofportal2.com/) (ใครยังไม่ได้อ่าน แนะนำให้อ่านนะครับ ได้ความรู้เกี่ยวกับการพัฒนาเกม การดูแลลูกค้าและอื่นๆ คุ้มราคามาก) ส่วนต้นกล้าเสนออันที่มันเป็นไปได้คือ[ฟ้อนสุดฯ](http://f0nt.com/f0ntsud) ถึงตรงนี้เรา offer ไปว่าให้ยืม @madokasv เครื่องเราไปก่อน

ผมตั้งโจทย์กับตัวเองไว้และพยายามดันเรื่องนี้ในกลุ่มว่าสิ่งที่ฟ้อนสุดฯ ทำมันไม่ใช่สิ่งที่ถูก มันคือหนังสือเป็นเล่มๆ ที่ไม่มีต้นทุนไปพิมพ์ขาย หรือไม่อยากพิมพ์ขาย หรืออะไรก็แล้วแต่ แต่นี่คือ new media ที่เราต้องใช้ประโยชน์จากมัน อย่างเช่น Final Hours ที่มีลูกเล่น interactive น่าสนใจทั้งเล่ม และสิ่งแรกที่เราต้องมีคือ engine ผมเลยลอง build engine สมุดพับแบบในฟ้อนสุดฯ ด้วย HTML5 แต่พบว่ามันไม่ง่ายอย่างที่คิด และ[นี่คือรุ่นแรกของสมุดพับ](http://sunburn.whs.in.th/)​

ปกฉบับทดสอบระบบ สังเกตชื่อนิตยสาร "ดอทอนิเมะ"

พูดถึงชื่อบ้างครับ เราประชุมกันนานและเถียงกันนานมาก เพราะแต่ละคนก็อยากได้ชื่อในใจ ผมก็ยังอยากให้มันเป็น “ซึนนิแมก” อยู่ สุดท้ายประชันกันโดยตั้งทวิตโพลล์และดอทอนิเมะคะแนนนำไปอย่างฉิวเฉียด

พอมาได้ระดับนี้แล้วปัญหามันเริ่มเกิดครับ ว่าขนาดในทีมกันเอาไปดูแต่ละ environment กันมันแสดงผลไม่เหมือนกัน ไม่ว่าฟอนต์ที่ไม่โหลด เอฟเฟกท์กระตุกบ้างหายบ้าง ตอนนั้นผมบอกไปว่างั้นเอางี้ เราออกเล่ม interactive เสร็จแล้วเราจะออกเล่ม PDF ตาม (ปัจจุบันคงลืมกันทั้งทีมแล้วล่ะครับ)

ต่อมาเราประชุมกันแบบเจอตัวกันครั้งแรก ตอนเราไปสอบ สอวน. กัน ซึ่งก็มีแค่ผม @winwanwon อ้นที่เข้าประชุม ก็สรุปคอลัมน์ต่างๆ กันมาแล้วอ้นก็ทำบันทึกหายเสียอีก เลยต้องมานั่งเรียงกันใหม่ออนไลน์ หลังจากนั้นเราก็ได้จดโดเมน ซึ่งมันก็ไม่ลงรอยกันอีกเพราะอ้นอยากได้ sunburn.in.th ผมอยากได้ nime.in.th (a.nime.in.th) แต่สุดท้ายก็จด sunburn.in.th มา

หลังจากมีโดเมนกันแล้ว อยู่ๆ ผมก็ดันไปชวน @Fantasier @winwanwon ไปทำ menome (มันลงวันที่ 11 กันยา 2011 แล้วนิตยสารเราก็หาย หาย หาย หาย ไปแล้วไปโฟกัสกันที่ menome กันเต็มที่

ซีซั่น Winter 2011 เริ่มใกล้เข้ามา ผมเองก็ทำ menome ใกล้เสร็จแล้ว แต่ด้วยน้ำท่วมผมต้องย้ายไปบ้านยาย และพี่ผมก็มาเยี่ยม (12 nov 2011) ผมเอาสมุดพับต้นแบบนั่นให้พี่ดู พี่ก็เลยโฆษณาเลยว่าพี่ทำงานอยู่ mars และตอนนี้เขาเพิ่งครบรอบ 1 ปี mars on iPad ไปไม่นาน พอดูแต่ละหน้าเท่านั้นแหละครับมันใช่สิ่งที่เรากำลังจะทำอยู่แน่นอน ผมนั่งแคปทุกหน้าให้ทีมงานที่ไม่มีไอแพดดู และวันต่อมาผมมีแรงเริ่มทำคอลัมน์ แต่เอ๊ะ มันไม่มีใครส่งคอลัมน์เลย.. งั้นผมเขียนเรื่อง menome ก็ได้ ก็ร่างไปได้สักสองบรรทัดก็ตัน ผมเลยนึกไปนึกมา อ้อ มีเพลงอีกอันที่ผมทำได้ แล้วก็นึกถึงเพลง secret base ~Kimi ga Kureta mono~ จาก Ano Hana ที่ผมเคยอ่านเนื้อแปลไทยแล้วทำให้ผมดู Ano Hana และเพลงนี้ทำให้ผมปล่อยน้ำตาออกมาจนอ้าปากร้องเพลงไม่ได้ ก็เลยเอาเพลงใส่แล้วเขียนเอนจิ้นคาราโอเกะ ก๊อปแปลเพลงมาใส่

ปรากฎว่า[หน้านั้น](http://sunburn.whs.in.th/music/)ประสบความสำเร็จครับ ให้ในทีมดูทุกคนชอบ ในทวิตก็ชอบ มีคนแนะนำว่าที่แปลมันไม่ดีและให้ของเขามาลง แต่ผมเองก็ดันเมินไปด้วยเห็นว่าเป็นวิดีโอเลยเปิดผ่านๆ แล้วกลายเป็นโดนงอนซะอีก (ไปขอโทษเค้าแล้วแหละ // ผมเองไม่รู้ตัวจนกระทั่งในทีมบอกว่ามันมีดราม่ากันในทีม ผมก็งงๆ จนไปอ่านดู อ้าว.. งอนกันลับหลังซะด้วย)

จนถึงวันนึงผมนั่งทำ menome พ่อบอกว่าเลิกทำเถอะ มันคืองานที่ทุกคนอยากได้แต่ไม่มีคนอยากทำ ผมก็ไม่ได้คิดอะไรนะ แต่บ่นลงทวิตเตอร์นิดหน่อย แล้วก็เลยมีไฟกันและกำหนดออกเล่มกันเรียบร้อยว่า 16 ธันวาออก คราวต่อไปที่ไปมีทผมก็บอกเนี่ยว่าถ้าจะออก 16 ส่งภายในสัปดาห์นี้แล้วนะ ก็ปรากฎว่าคอลัมน์มันก็ทยอยมาเรื่อยๆ ผมเริ่มลองทำคอลัมน์ UN-GO เป็นอันแรกเพื่อทดสอบเอนจิ้นและการออกแบบ

ถัดมาผมขอให้ไปช่วยอัพเดต menome หน่อยเพราะผมทำนิตยสารอยู่ ทั้งทีมเฉย (จริงๆ คืองงกันหมด) ผมฟิวส์ขาดบ่นยาวลงบล็อคลับไปชุดใหญ่ และบอกในทีมว่าอย่าอ่านถ้ายังอยากจะมีกำลังใจทำงาน แต่สุดท้ายทุกคนก็อ่าน และก็มีคนทนไม่ได้ออกไปแล้ว หลังจากนั้นแล้วคอลัมน์มันออกไวมากจนผมต้องบอกว่าช้าๆ หน่อยเถอะเราทำงานไม่ทัน เพราะคือคอลัมน์นึงที่เป็นเนื้อหามามันต้องนั่งคิดถึงเรื่องนั้นๆ ว่าจะทำ interactive แบบไหน (ผมตั้งเป้า 1 หน้า 1 interactive)

แต่นั่นก็คือเลย 16 ธันวาไปแล้ว จนกระทั่งถึงปีใหม่ผมทำเล่มมาเรื่อยๆ และมันสัก 50% แล้ว พอปีใหม่ผมบอกเลยว่า NSC ผมยังไม่เดิน ผมต้องเริ่มแล้ว ฉะนั้นผมต้องเตะไอ้นี่ออกแล้วไปทำงาน ผมบอกเลยว่าขอปิดเล่มในสัปดาห์นี้และจะทำงานแล้ว แล้วหลังจากนั้นผมเผางานทันที override กองบก. ไปเลยว่าคอลัมน์ไหนไม่ส่งมาผมตัด ยกเว้นอันที่สำคัญมากเช่น editor talk ซึ่งก็โดนไปหลายคอลัมน์ครับ และสุดท้ายแล้วผมปิดทั้งเล่มยกเว้น Fate/Zero ได้ในวันพุธ ถ้าผมจำไม่ผิดนะครับ หลังจากนั้นแล้ว Fate/Zero เป็นอะไรที่ผมบอกจะตัดแต่มีคนรบเร้าไว้เยอะ เพราะผมคิดอะไรไม่ออกเลยเรื่องนี้เพราะไม่ได้ดูและไม่ชอบ ในทีมก็ช่วยกันส่งรูปส่งอะไรมาจนกระทั่งได้เป็น Fate/Zero ในเล่มปัจจุบัน (แบบไม่มี interactive) และเราก็เริ่มปิดเล่มกันห้าทุ่มวันศุกร์ (เพิ่งเปิดเพจคอเมะก็ตอนนั้นแหละครับ) โดยกองบก. นั่งตรวจทานทุกหน้า ผม recode video ปกเป็น webm เพราะเจอบั๊กว่า windows ผมไม่เล่น และตีหนึ่งบก. เงียบไปแล้ว มาด้วยคำสุดท้ายว่า “OK ละ” ผมก็ push ลง Chrome Web Store (เพิ่งคิดออกว่าควรจะลงเมื่อไม่กี่วันก่อนออกเล่ม) และลงเว็บด้วย (ให้ไอแพดอ่าน) และนั่นแหละครับก็ได้เป็น CoreAnime เล่ม 0

มาถึงเบื้องหลังด้านเทคนิคกันบ้าง (ขี้เกียจใส่ภาพครับ เปิดดูในเล่มคู่ไปเลยแล้วกัน)

## ปก

ผมบังเอิญไปเห็น [Flipboard.com](http://flipboard.com) ที่ใช้ HTML5 Video ทำเลยติดใจและได้ไอเดียทำปกทันที หน้าปกใช้ Premiere Pro ตัดออกเป็นขนาดที่เห็นครับ (ขนาดนี้อ้างอิงจากจอไอแพดว่าน่าจะพอดีถ้าผมดูเลขไม่ผิด ไม่รู้มันพอดีหรือเปล่า) ก่อนจะออกผมบังเอิญเข้า Windows เห็นว่าปกมันไม่เล่น เลยเปลี่ยน encoding เป็น [WebM](http://webmproject.org) ลดขนาดไปได้เยอะ

สำหรับเล่มหน้าเนื่องจากปัญหาคลิปไม่เล่นหลายเครื่อง และมีคนติมา รวมทั้งทีมงานเองด้วยว่ามันไม่เหมือนปก ผมเลยคิดว่าจะเปลี่ยนแนวปกแล้วครับโดยจะเป็นแนวนอนแทน (เล่มหน้าประกาศแล้วนะครับว่าจะตัด iPad support ออก ทุกหน้าจะออกแบบโดยคิดถึงแต่ Chrome อย่างเดียวเท่านั้น)

## Guilty Crown

ผมไม่ได้ดูเรื่องนี้นัก (ดูไปสองตอน) และมันคือ cover story ฉะนั้นมันควรจะต้องดีมากๆ แต่ทำยังไง… ผมต้องขอบคุณทีมงานเว็บ official site มาก ที่เว็บมันเป็น HTML5 เข้าถึงข้อมูลง่ายสะดวก และที่ผมชอบจริงๆ คือมันมีแผ่นตัวละครให้ไป print ไปตัด เป็น PDF ผมไปลองเปิดใน Photoshop ปรากฎว่าได้โลโก้มาเป็น transparent + vector ตามที่ต้องการเลย

สำหรับภาพพื้นหลัง อ้น ผู้เขียนคอลัมน์ส่งภาพให้ผมมาชุดนึง ผมเลือกภาพนึงแล้วใส่พื้นหลังแต่ @winwanwon แนะนำภาพนี้มาแทนก็เลยเปลี่ยน ในส่วนของแนะนำตัวละครผมหมดมุขเลยทำเป็นแบบคลิกเลือก เหมือนกับ official site (แนะนำให้ลองเข้าไปดูแนะนำตัวละครของเขาครับ เหมือนแฟลชมากๆ แต่เป็น HTML5) และก็ทำ effect กระพริบด้วย hide/show + setTimeout​ ธรรมดา ส่วน effect พิมพ์ใช้ jQuery จัดการครับ

เสียงตอบรับของหน้านี้คือ นึกว่าไม่มี interactive (เพราะมันไม่เด่น เล็ก) และก็ภาพพื้นไม่ควรจะเลื่อนตามดูแล้วปวดตา

## BEN-TO

อีกคอลัมน์หนึ่งที่ผมเขียน ผมจะจัดเต็มคอลัมน์นี้ แต่ผมหาแนะนำตัวละครไม่ได้ และผมหาโลโก้ไม่ได้ เลยสุดท้ายไปตัดจากฉากในอนิเมะมา ก็ได้ไอเดียทำหัวเลยครับโดยทำเป็น `-webkit-transform: scale()` เอา มันก็จะได้ effect แบบในอนิเมะ แล้วผมกลัวคนอ่านไม่รู้เลยทำให้มันเลื่อนแล้ว effect ทำงานเลย ผลที่ได้คือ กระตุก! แต่ก็ดีกว่าไม่เจอ

สำหรับตรงแนะนำตัวละครผมตัดจากเว็บมันมา (เว็บมันใช้แฟลชครับ หน้าตาประมาณนี้แหละ) ส่วนภาพตัวละคร @ncpeak ส่งมาให้ผมตอนผมฟิวส์ขาดคราวนั้น แล้วมันเป็นภาพสามมุม เลยลองเขียน 3D Transform ก็ได้มาอย่างที่เห็นเลย (ผมเชื่อว่ามีคนที่ไม่รู้ว่ามันมี 3D Transform ตอนคลิกภาพตัวละคร และไอแพดมันบั๊กครับ ผมปิดไว้แล้วไม่ให้ไอแพดใช้)

ในมุมมองด้านงานเขียน ผมเขียนคอลัมน์นี้มีคนทักว่าทำไมสำนวนมันไม่เหมือนกับ UN-GO ที่ผมเขียน คือผมต้องการเขียนให้มันเป็นสไตล์ของเรื่องนั้น BEN-TO เป็นเรื่องฮาและเซอร์วิส ผมปล่อยรั่วได้เต็มที่ (ต้นฉบับที่ผมเขียน “แต่เสียงพากษ์น่าจิ้นเป็นที่สุด!” เขียนว่า “แต่เสียงพากษ์จิ้นจิ้นจิ้นจิ้น” — จริงๆ คือผมก็ไม่รู้ว่าจะเขียนยังไงว่ามันจิ้นอะ เลยปล่อยรั่วไปเลย แต่ฝ่ายพิสูจน์อักษรแก้มาแบบนี้) ส่วน UN-GO เป็นแนวสืบสวนสอบสวนก็จะเขียนซีเรียสหน่อย

ไว้เล่มหน้าจะลองผลักดูครับว่าอยากได้แบบนี้ ไม่รู้เขาจะเอาตามผมหรือเปล่า แต่เขาบอกว่าที่จะปรับแก้สำนวนผมมานี้คือเพราะผมเคยบอกไว้ (ผมเคยบอกไว้แต่แค่ว่าผมกลัวมันไม่เป็นมาตรฐานเดียวกันในเรื่องคะแนนรีวิว แต่เขาเข้าใจว่างานเขียนทั้งหมดเลย)

อ้อ สำหรับคะแนนรีวิวเราจะรีวิวกัน 4 คนตามแบบ Famitsu หนังสือญี่ปุ่นครับ คือมีคนติมาว่ามันอวยแล้วมาบวกคะแนนแบบนี้ไม่ได้ ผมก็เลยบอกว่าเราจะใช้แบบนี้ (จริงๆ วางแผนไว้นานแล้วแต่ผมขอตัดตอนที่ rush ออกเล่ม) คือคนเขียนจะอวยก็อวยไปแต่คนอื่นในทีมมันคงไม่อวยกันหมดและคะแนนมันจะเริ่มเข้ากลางๆ เอง

## Mirai Nikki

ถ้าผมจำไม่ผิดนี่คือคอลัมน์แรกที่ผมทำนอกจากคอลัมน์ที่ผมเขียนเอง โดยผมก็ไม่แน่ใจ layout คือผมดูและชอบเรื่องนี้ พ่อผมก็ดูนะ แต่ว่าไม่รู้จะจัดหน้ายังไงดี และจากการที่ผมเน้น blockquote ไปมากในทั้งสองเรื่อง คอลัมน์นี้คงจะได้อิทธิพลมากระมังเลยได้ blockquote ขึ้นหัว

คอลัมน์นี้ layout ผมใส่สบายๆ ครับ พอได้รูปแล้วใส่ไป หัวก็พยายามปรับ สุดท้ายได้แบบนี้ซึ่งผมว่าไม่สวยนะแต่ไม่มีไอเดียแล้ว สำหรับแนะนำตัวละครใช้ Image Map (โคตรไม่ html5…) แต่ก็ด้วยว่าผมหมดมุขแล้วมันเลยธรรมดาๆ สำหรับท่อน Future Diary นั้น ไอเดียมาจากของ Guilty Crown ครับ

ท้ายหน้ามี Dead end อันนี้คนเขียนเขาแนะนำมาว่ามี ผมก็ใส่ให้ เอาโค้ดพิมพ์ดีดตัดมาจาก Guilty Crown เลย

## Haganai

ชมรมคนไร้เพื่อนเป็นหน้าสุดท้ายที่ทำ ผมใช้ layout UN-GO เพื่อที่ว่าอยากให้เรื่องสักเรื่อง layout พื้นๆ บ้าง คอลัมน์นี้ก็เน้น blockquote เช่นเดียวกันครับ สำหรับแนะนำตัวละครผมก็เอาง่ายๆ เลย.. ตัดมาจาก UN-GO อีก

## Persona 4

คอลัมน์นี้หมดมุขและเผาครับ ผมตัด bg มาจาก official site และเป็นคอลัมน์แรกที่ผมลองทำหัวเว็บใหญ่ๆ ผลปรากฎว่าในทีมบอกว่ามันสวยมาก สำหรับแนะนำตัวละครผมได้ภาพนี้มาไม่รู้จะเขียนยังไง ลูกเล่น HTML5 มีไอเดีย แต่มันยากเกินไป ไม่ก็กินที่เยอะ (ตอนแรกผมอยากให้จบใน 5MB ซึ่งตอนนี้รู้แล้วว่าไม่มีทางและเล่มหน้าผมจะบีบภาพน้อยกว่านี้) เลยเผาด้วย hover ไปเลย

## Tamayura

คอลัมน์นี้เป็นอีกอันที่ผมบอกว่าจัดเต็ม ผมมีไอเดียอยากทำ photo college แต่ดันลืมไปเลยว่าฉากเขียวๆ มันของ Chihayafuru ไม่ใช่เรื่องนี้ สุดท้ายเลยเอาภาพกองๆ แล้วทำให้กดได้ ก็สวยน่ารักไปอีกแบบ หลายๆ คนที่ดูคอลัมน์นี้บอกว่าสวยครับ

ผมบอกตัวเองว่านแนะนำตัวละครอันนี้จะไม่ทำ และจะทำแบบนี้แทน มันดูเข้ากับเรื่องมากกว่ากันเยอะ เลยให้คนเขียนส่งภาพถ่ายมาเยอะๆ และก็ได้ภาพชุดที่เห็น (มีอีกเยอะครับที่เขาถ่ายแล้วผมไม่ได้ใส่)

อ้อ.. คำว่า ~hitotose~ ที่ poster ข้างบนผมใส่เองแหละครับด้วย photoshop ^^ และที่เขาจะมีตัวหนังสือด้วย อันนั้นก็ต้องนั่งลบออก

## Fate/Zero

บ่นไปเยอะแล้วมั้งครับคอลัมน์นี้ งานเผาขั้นเทพ แต่ผมว่าหัวเว็บมันอลังนะ

## UN-GO

คอลัมน์แรกสุดของเล่มครับ ผมเอาภาพจาก OP มาแล้วตัดโลโก้ใส่เข้าไป พอดูในไอแพดผมรู้สึกรูปตอนเล็ก เลยทำให้มันชี้ขยายได้ (เล่มหน้าผมว่ารก จะตัดออกละ)

มีทีมงานบอกว่าหน้ามันไม่ค่อยสวย ผมเลยใส่ภาพ bg หัวข้อ จากอดีต สู่อนาคตและโลกลี้ลับเข้าไป แต่หลังจากนั้นหมดมุขแล้วแหละครับ

สำหรับคะแนนรีวิว ตอนแรกผมใช้หลอด gradient (ยังอยู่ใน source tree เลยครับ ถ้าค้นเป็นลองค้นดู) เป็นช่องๆ แต่วันดีคืนดีผมเห็น [The Verge Review Galaxy Nexus](http://www.theverge.com/2011/11/17/2568348/galaxy-nexus-review) ผมชอบมาก มันคือนิตยสารอีกนั่นแหละ แต่ในรูปของข่าว และ HTML5 แต่อันนั้นเป็นอะไรที่ผมไม่มีปัญญาจัด layout ระดับเขาได้แน่นอน แต่ก็ขอกีอปแถบคะแนนมาหน่อย เลยตัดเหลือสีเดียวแบบที่เห็น ตำแหน่งเลขคะแนน และขีดดำใต้หลอดก็ก๊อปจาก The Verge นั่นแหละครับ

## Event Report

คอลัมน์นี้ทำลวกๆ ครับ แต่ผมไม่รู้สึกว่าลวก คือคิดได้แค่นี้แล้ว ปัญหาที่เจอคือ user บางคนไม่รู้ว่ามันคลิกดูรูปเต็มได้

สำหรับการตัดภาพตอนแรกผมจะใช้ HTML5 ครับ แต่มันหน่วงเครื่องคนอ่าน เลยเขียน script เฉาะกลางมาให้ ใน source น่าจะมีอยู่เหมือนกัน

## สอย

ผมทำสอยน้องปูก่อนระหว่างทำคอลัมน์เมะ เพราะเบื่อๆ แล้วด้วย ผมตัดสินใจเลือกใช้ iScroll เพราะไอแพด และก็ได้จัด layout ไปให้เหมาะกับไอแพดไปด้วย เลยเขียนง่ายครับแล้วสวยด้วย

ปัญหาคือ Chrome Windows พอมี 3D Translation จะไม่ขึ้นฟอนต์ไทย​ (และถ้าปิดไอแพดจะบั๊ก) อันนี้คนเลยบ่นๆ อยู่ครับว่าน่าจะมีคำบรรยายภาพ แต่ @thanik บอกผมว่า Canary Build แก้แล้ว ภาวนาว่าเล่มหน้าออก Chrome Stable ก็จะแก้แล้ว (แต่คงจะไม่ใช้ iScroll แล้วครับเพราะไม่ได้สนใจไอแพดแล้ว)

## Music

มันคือภาคต่อจาก[เล่มทดลอง](http://sunburn.whs.in.th/music/)ครับ ด้วยปัญหาลิขสิทธิ์ผมเลยให้ใส่เพลงกันเอาเอง มีคนบ่นอยู่เหมือนกันว่ามันคือช่องอะไร ทำไมต้องใส่เพลงเอง แต่อันนี้ผมคงต้องยอมโดนด่าดีกว่าได้จดหมาย C&D จากค่ายเพลง สำหรับเนื้อเพลงก๊อปจากบล็อคอ้นเลยครับ (เขาเขียนไว้สำหรับเล่มนี้อยู่แล้ว แต่ลงบล็อคตัวเองก่อน)

ทางด้าน layout ผมมีของเล่มทดลองอยู่แล้ว แต่ด้วยว่ามีเพลงเดียวอยากให้จบในหน้า เลยเลื่อนขึ้นไปด้านบนอีกแล้วก็ฉากหลังก็ตัดหน้า​ Guilty Crown มาเลย ง่ายดี ^^

## Navigation

อันที่จริงมันคืองานเผาครับ โจทย์คือต้องแก้เล่มได้โดยไม่ต้องแก้ทุกหน้า ใช้เป็น JavaScript แบบนี้แก้เล่มง่ายครับ แต่ผมคิดไม่ออกว่าจะทำรายการหน้ายังไง จนต้นกล้าแนะนำมาว่ามี bar ข้างบน ผมเลยโอเคงั้นทำแบบนั้นแหละแต่ใส่ข้างล่าง

(คือในหัวมันมีไอเดียแต่แบบยากๆ แล้วก็ไม่รู้จะเขียนยังไงดี)