LunaticNeko

(Photo: Food center, fl. B1)

วันนี้ผมทำกราฟให้กับงานนับอีเมล์ โดยเมื่อวานใช้ Google Chart API แต่ก็ไม่เวิร์ก เพราะพี่บอกว่าอยากให้มีตัวเลขเหนือแท่งกราฟของแต่ละวันด้วย ก็เลยต้องเปลี่ยนไปใช้ jqplot แทน สิ่งที่แตกต่างอย่างเห็นได้ชัดคือ jqplot อ่อนกว่าเรื่อง documentation มาก แต่ก็ยังอยู่ในเกณฑ์ที่ใช้งานได้ง่ายเช่นกัน นอกจากนี้ plugin เยอะและกระจัดกระจายมาก (มี .js ประมาณยี่สิบกว่าไฟล์) ผมเลยแก้ปัญหาง่ายๆ (โค้ดอยู่ตอนท้าย ให้ทายก่อนว่าผมทำอะไรลงไป)

จากนั้นผมจึงส่งงาน (โดยการบอกพี่ว่าเสร็จแล้ว เพราะงานอยู่บนเซิร์ฟเวอร์) แล้วกลับมาทำงานวิดีโอต่อ โดยพี่ทดสอบให้ดูว่า jQuery UI ใช้กับ iPad และอุปกรณ์สัมผัสไม่ได้ สาเหตุก็คือ jQuery UI ใช้ mouse event ในขณะที่การสัมผัสมันไปสร้าง touch event ซึ่งพอไม่เหมือนกัน jQuery ก็ไม่จับ event ให้ ทำให้ไม่สามารถทำงานได้เหมือนปกติ ทางแก้หนึ่งคือการหา plugin ต่างๆ มาใส่ เช่น Touch Punch หรือ jQuery for iPad and iPhone เป็นต้น ซึ่งผมก็ยังไม่ได้ทำ

แต่ส่วนที่ทำแล้วคือ sidebar และเปลี่ยนกล่อง unordered list (UL) ให้แสดงผลเป็นตารางแบบ grid แทนที่จะเป็น list ไล่ลงมาแถวเดียว ซึ่งตรงนี้ไม่ยาก แต่ขอเก็บไว้ตอนท้ายเช่นกัน

Today I fixed the stat graphing for email checker. Yesterday I used Google Chart API but it didn’t go very well because the senior wanted it to display data labels on each bar, which Google Chart API did not support. I switched to jqplot , which was not as well-documented but still very useful. Its another downside is the scattered plugin files (20+ .js files) so I had to kludge it somehow. (Code is at the end)

After finishing the job I told the senior it’s done and got back to work on the video player. The senior tested jQuery UI on iPad which failed because jQuery UI uses mouse events while touchscreens generate touch events, which are not captured by jQuery UI. One way to fix is to install plugins like Touch Punch or jQuery for iPad and iPhone , but I haven’t tried any yet.

There’s something I got done though, and it’s the sidebar and grid-style list.

Kludging scattered files

 cat *jqplot*min*js > jqplot.all.js  

Sidebar CSS

Add a new div over your sidebar, then add these CSS lines to it

 .sidebar{
  position: absolute;
  top: 0;
  right: 0;
  z-index: 199;
} 

Absolute means the item is pinned to a particular spot on the page (while “fixed” pins the element to the window ). Top and Right properties specify how far from each edge this thing needs to be. In this case, it should be on the top-right. Z-index can be anything high enough that it’s in front of everything.

If you want it to be “integrated” into UI, not extending beyond the confines of your window, and also make it scrollable, just add these two more lines to the sidebar CSS

 .sidebar{
  height: 100%;
  overflow-y: scroll;
} 

(Photo: My two friends. This is the only shot of the day, so I couldn’t be picky about quality.)

ตอนเช้าทำ YouTube Player ต่อนิดหน่อย พี่ก็เอางานใหม่มาให้ทำก่อน งานใหม่ที่ว่าคือ เซิร์ฟเวอร์มีระบบดูดเมล์จาก mailbox เข้าฐานข้อมูลอยู่แล้ว แต่ต้องการให้มีการนับจำนวนด้วย และแสดงผลออกมาว่ามีเมล์เข้ามาเท่าไหร่ในแต่ละวัน และแต่ละเดือน ซึ่งระบบดังกล่าวมี filter ด้วย ซึ่งจะแยกเมล์ออกเป็นชนิดต่างๆ ซึ่งผมไม่สามารถบอกได้ว่าแต่ละชนิดคืออะไร (ทั้งในเชิงเทคนิคและนโยบาย) รู้แต่ว่า เมล์แต่ละชนิดจะมีรหัสเป็นของตัวเองอยู่

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

พฤติกรรมการเขียนโค้ดของผมจะแปลกๆ อยู่อย่างนึง คือผมจะยอมใช้ SQL ที่ยากและซับซ้อน แต่จะพยายามทำให้ PHP ทำงานได้ง่ายที่สุด ตรงนี้อาจสะท้อนอะไรบางอย่างก็เป็นได้ ดังนั้น ในตัวอย่างที่จะให้ตอนท้ายจะเป็นอะไรที่แบบ … (นะ)

ในที่สุด ข้อมูลที่ดึงออกมาจากฐานข้อมูลแล้วจะถูกดึงออกมาจนถึงระดับ jQuery ซึ่งจะโยนให้ Google Chart API ต่อไป ได้ภาพออกมา เป็นอันเสร็จพิธี

I continued the YouTube Player for a bit before senior gave me a new job. I was tasked to add counting tool for an existing email checker solution, which opens mailbox (via POP3) and retrieves them into database. This solution also has filters, which divides emails into different types. I cannot tell what types exist in this solution, for technical and policy reasons. All I can tell is each email type has its unique “filter ID.”

When I inspected the database however it had no primary key. This means it’s really intended just to collect data and nothing else. Additionally, this database solution stores timestamps as text, not the appropriate date-time type. Therefore, I created a new table which collects every email entry, strip everything except filter ID and timestamp (which I changed to appropriate type now) then used various commands to count daily mail arrivals.

My coding style is a bit strange however, as I tend to use more complex SQL commands but always keep PHP as simple as possible. It might reflect something very strange in me. I don’t know.

Finally, this data, now in PHP form, is passed to jQuery layer, then to Google Chart API. We get a nice chart. End of story.

Code after the break.

Read the rest of this entry »

(Photo: In case of fire, run downstairs, three steps at a time.)

วันนี้ผมแก้งานต่อ โดยสร้างหน้าต่างจัดการ playlist แบบลากวาง (drag-and-drop) โดยแม้ว่าหน้าตาจะไม่คล้าย YouTube เท่าไหร่ แต่ก็ออกแบบและใช้งานได้ง่าย ไม่ซับซ้อนเช่นกัน สำหรับการเล่นวิดีโอก็ใช้ iframe API ซึ่งใช้งานง่ายมาก โดยสามารถทำตามขั้นตอนที่กำหนดให้ หรือจะสร้าง <iframe src…> เอาเองก็ได้ โดยเปิดการใช้งาน JavaScript API เอาไว้ เพื่อควบคุมการเล่นวิดีโอผ่าน JavaScript อีกที โดยสามารถกดดูวิดีโอจากหน้าการจัด playlist เพื่อเป็นตัวอย่างได้ด้วย ส่วนที่ยากคือการเล่นไฟล์ออกมาจริงๆ เพราะเราต้องดัก event แล้วต่อไฟล์ให้ถูก แต่ถ้าเข้าใจหรือเคยทำมาแล้วก็ทำใหม่ไม่ยากเช่นกัน

อีกส่วนหลักๆ ที่ทำคือการปรับฐานข้อมูลให้เปลี่ยนไปใช้ character set แบบ utf8 แทน เนื่องจากชื่อไฟล์บน YouTube อาจมีอักขระที่ไม่ใช่ภาษาอังกฤษอยู่ ซึ่งเราต้องรองรับด้วยเวลาที่เอาใส่ในฐานข้อมูล (ที่เก็บข้อมูลชื่อไฟล์ไว้เองเพราะจะได้ไม่ต้องดึง API ใหม่บ่อยๆ)

I continued to revise my work today. First I finished building a drag-and-drop playlist manager. Even though it didn’t look like YouTube as specified, it was easily designed and simple to use. Video playback also simply uses iframe API which is also easy. User can preview the video in playlist manager screen. The main view is a bit harder due to use of events required to make file joining easy, but if you have done it before, you can do it again.

Another important part was changing the database system to use utf8 . This is simple, just use ALTER TABLE and a few other commands. This is done so we can store file titles directly in our database, because we do not want to re-query the API over and over when loading the playlist for modification.

(Photo: MRT in “Holiday Gap”. Time for hourly workers like us to enjoy the train!)

วันนี้ผมตัดสินใจเปลี่ยนจาก mysql ไปใช้ mysqli ซึ่งเป็นตัวที่พัฒนาขึ้นมาให้ดีขึ้น ซึ่งผมวางแผนว่าน่าจะขยับไปใช้ prepared statements ได้ในอนาคต ขั้นตอนการแปลงก็ไม่ยากเลยครับ แค่ แก้คำว่า mysql_ เป็น mysqli_ ให้หมด จากนั้ันไปเก็บ error ให้หมด (โดยปกติ หากเราใช้ mysqli แบบ procedural เราจำเป็นต้องใส่ตัวแปร mysqli resource ด้วย ไม่เหมือน mysql ธรรมดาที่ไม่ใส่ก็ได้) จากนั้นผมจึงยุบคำสั่งซ้ำๆ ให้กะทัดรัดมากขึ้นไปอีก เพื่อให้ใช้งานและพัฒนาต่อได้ง่าย

ต่อมา มีการอธิบายงานเพิ่มเติม โดยสรุปคือ ไม่เอาการโหลดไฟล์เข้าเครื่องแล้ว แต่ใช้การเล่นจาก YouTube โดยตรง โดย playlist ต้องสร้างจากการ search YouTube ผ่าน API แล้วเลือกติ๊กๆ เอา หน้า search ที่ว่าต้องหน้าตาเหมือน YouTube แต่ไม่ใช้ user script ดึงมา ผมจึงสรุปและชี้แจงข้อจำกัดต่างๆ ไป จนสรุปว่าจะพยายามสร้างหน้าตาให้ใช้งานง่ายที่สุดเท่าที่จะเป็นไปได้ โดยยังคงทำงานได้ตามที่ต้องการ โชคดีที่ Google Data API ใช้งานค่อนข้างง่าย จึงทำให้ดึงข้อมูลและรายละเอียดต่างๆ ของวิดีโอออกมาได้มากพอ

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

Today I decided to change from mysql to mysqli, where “I” stands for “improved.” I planned to allow for prepared statements in the future. The transition process is easy. Just change all occurrences of “mysql_” to “mysqli_” and fix any errors that appear (we have to add resource variable e.g. $connection to all function calls). Then, I grouped similar code for compactness and ease of further development.

My work was further clarified today. In short, no more downloads, play from YouTube directly. Playlist must be built by searching YouTube via API and use checkboxes to add them. Search page looks like YouTube but user scripts seem unfeasible for this cause. Finally, I decided to keep the UI as simple as possible while retaining necessary functions. Fortunately, Google Data API is quite easy to use, and I could pull detailed data from it.

I was given more work. The department receives notification and alert emails. They want me to summarize the frequency and amount of each predefined types. I haven’t seen the source yet, but reckon if there’s a kind of event that is fired into the database, I might be able to tap that for use.

(Photo: PC-Ception again)

มิน่าละ pageview ไม่ขึ้น ผมลืม publish นี่เอง 555+ // Yeah. No pageviews because I forgot to publish lol

(Photo: Water cooler. Ah yes, THAT part of the office!)

หลังจากที่เมื่อวานผมสร้างระบบเก็บกวาดไฟล์ที่ไม่ได้ใช้ไป วันนี้ผมสร้างสิ่งที่เสริมกันสำหรับการรักษาสภาพการทำงานของระบบ นั่นคือ ระบบตรวจสอบและดาวน์โหลดไฟล์ซ้ำ ซึ่งจะทำงานเวลาที่ไฟล์ (physical file เช่น .mp4) ที่มีที่มาจาก YouTube ถูกลบทิ้ง แต่ยังมีบาง playlist ต้องการใช้มันอยู่ ระบบนี้ก็จะตรวจซ้ำว่ามีไฟล์ใดที่ต้องโหลดใหม่หรือไม่ แล้วสั่งให้ระบบโหลดไฟล์ดูดไฟล์เข้ามาใหม่

จากนั้น ผมนำระบบ cleanup กับระบบ recheck มารวมกัน แล้วเรียกมันว่า DB/FS consistency fixer (ง่ายๆ คือผมไม่ได้ตั้งชื่อ 555+) โดยสามารถเรียกแบบ manual ได้จากหน้าเว็บทันทีที่ต้องการโดยผ่าน jQuery.get หรืออาจใช้ cron ก็ได้ถ้าต้องการ (ผมยังไม่ได้ลองเอาไปใส่ใน cron เหมือนกันครับ) แต่เนื่องจากระบบพวกนี้ทำงานช้ากว่าส่วนอื่นๆ มาก (ยิง system call เยอะมาก) จึงไม่ควรรันบ่อยๆ โดยไม่จำเป็น

นอกจากนั้น ผมสร้างตัวช่วยสร้างโค้ดสำหรับนำไปแปะเพื่อให้เล่นไฟล์ได้ หน้าตาก็คล้ายๆ ที่ใช้กันตาม YouTube ของจริง ในกรณีของผมมีตัวเลือกแค่สองอัน คือ playlist ที่จะใช้ กับ จะให้ปิดเสียง (mute) ไว้หรือไม่ (ได้แนวคิดนี้มาจาก Steam ที่โดยปกติจะปิดเสียงเวลาเปิด trailer ขึ้นมาครั้งแรก) โดยสถานะ mute จะยังคงไว้แม้ว่าจะเปลี่ยนไฟล์แล้วก็ตาม (ผมใช้วิธีการทำลาย <video> ทิ้งแล้วสร้างใหม่ทุกครั้ง จึงต้องคอยกำหนด property mute ให้ใหม่ตลอด)

สำหรับงานสุดท้ายที่ทำคือลดปริมาณโค้ดที่เกี่ยวข้องกับ mysql ลงโดยย้าย connection phase ไปไว้ใน config.php ทั้งหมด แต่ทางแก้ที่ดีกว่าคือการเปลี่ยนไปใช้ mysqli ซึ่งเร็วกว่า ดีกว่า และปลอดภัยกว่า

After making a cleanup system to clear unused files, today I created a complementing feature that helps maintaining system consistency. I give you… okay… it is a recheck-and-redownload system that triggers redownload of content if the physical file is removed but the related entries remain in the database. The recheck-and-redownload system will just ask loading module to download the file again.

Then, I combined this new recheck module with cleanup, and produced the DB/FS consistency fixer that is manually called from web interface through jQuery.get , though you might be able to use cron too (haven’t tried it yet). This part runs slow due to many system calls, so I recommend against running it frequently.

Additionally, I created an embed code generator like those in YouTube. For my piece, it gets only two values: playlist name, and mute-or-not. I got the idea from Steam that initially mutes its trailers unless you decide to turn it on later. My system correctly maintains mute status when loading a new file. (I have to do it extra because I destroy the old <video> tag and rebuild from scratch every time, so I must assign this property every time, too.)

Finally, I reduced the amount of mysql-related codes by moving connection phase into config.php completely. The better thing to do is to use mysqli which is all-around better than normal mysql.

This is the result of code generation. It will play with playlist named ‘portal’ and starts out muted. The limitation is that you can have one and only one player per page…

 <!--Begin vplay code block-->
<script type="text/javascript" src="players.js"></script></pre>
<div id="player" data-plname="portal" data-startmuted="true"></div>
<pre>
<!--End vplay code block--> 

P.S. At first, I intended to use this picture:

… but I didn’t want to die a horrible death (killed by blog readers? Not sure. I’m not a ‘net idol’ or similar so I never know.) hence the change above. (NOTE: It’s not photoshopped. Note the different item on the left side of the screen.)

And YES, my grades are out. See what I got!

… just kidding. I’m not stupid enough to post all my grades online.

(Photo: You have to go deeper.)

วันนี้ผมทำงานต่อจากเมื่อวาน (แหงล่ะ) โดยในวันนี้ได้พัฒนาระบบให้สามารถล้างไฟล์ที่ไม่ใช้แล้วออกจากระบบได้ สำหรับขั้นตอนก็คือ เรียก command line เช่น `ls -1 *.mp4` เพื่อให้ได้รายชื่อไฟล์ทั้งหมดมา จากนั้นเอาชื่อไฟล์แต่ละชื่อไปเทียบว่ามีการอ้างอิงในฐานข้อมูล (MySQL) หรือไม่ หากไม่มีให้ลบไฟล์ทิ้งด้วยคำสั่ง `rm -f $filename*` ซึ่งต้องใช้ความระมัดระวัง เพราะหลายครั้งที่ Linux จะปล่อยบรรทัดว่างออกมาด้วย และถ้า $filename กลายเป็นสตริงว่างเมื่อไหร่ ไฟล์ทั้งหมดจะหายไปด้วย

ฟังดูแล้วอาจเหมือนเป็นช่องโหว่ร้ายแรง แต่ไม่ขนาดนั้น เพราะเราสามารถดักได้ ที่สำคัญคือ คำสั่ง cleanup นี้ต้องเรียกจาก control panel เท่านั้น ซึ่งงานในเฟสต่อๆ ไป (ที่ผมอาจไม่ได้ทำ) จะต้องมีการรักษาความปลอดภัยสูงขึ้น อีกอย่างคือ การทำงานของ cleanup ไม่รับ input ใดๆ จากผู้ใช้ ทำให้ผู้ใช้ไม่สามารถที่จะยุ่งกับการทำงานของมันได้เลย

แม้ว่าการทำงานของ cleanup จะช้าเพราะเรียก system call มาก แต่ผมคาดว่าไม่น่าจะต้องรันบ่อย จึงไม่น่าเป็นปัญหาเท่าไหร่ โดยเฉพาะเซิร์ฟเวอร์ที่มี disk quota มากอยู่แล้วยิ่งไม่จำเป็นเข้าไปใหญ่

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

Today I continued my work from yesterday (You don’t say!!) by developing a file cleanup system. It works by calling command line such as `ls -1 *.mp4` to get all files, then check each file against MySQL database to see if it is being used. If not, it will be deleted using `rm -f $filename*`. Caution is needed for this command — one empty line and $filename will be blank, resulting in deletion of all files.

However, I do not consider it a major hole because cleanup can only be called from control panel, which is going to be secured (by someone — I won’t last that long to enter Phase 2) later. Furthermore, cleanup process is completely automatic and does not accept anything from anyone.

Even though cleanup, by its nature, takes a lot of time due to multiple system calls, I still find it satisfactory because it doesn’t need to be run often especially in systems with larger disk quota.

I did not do much on vplay apart from modifying code to be easier to read and allow easier installation. I spent the rest of the time doing paperwork and report for the company.

(Photo: From my desk)

Today’s entry is short so there’ll be no break!

วันนี้ผมก็ทำงานต่อจากเมื่อวาน โดยพัฒนา vplay จนสามารถดูดไฟล์จาก YouTube เข้ามาในระบบได้แล้ว โดยผมสร้างไฟล์ load.php เป็นคำสั่่งที่เรียกได้ง่าย โดยมันจะไปเรียก youtube-dl อีกที แล้วเมื่อทำงานสำเร็จจะปรับฐานข้อมูลให้ชี้มายังไฟล์ที่อยู่ในระบบแทนที่จะชี้ไปยัง YouTube ทำให้ไม่ต้องแก้ฐานข้อมูลมากเท่าไหร่ แล้วก็สร้างหน้า control panel ง่ายๆ ขึ้นมา (ยังไม่มีการระบุตัวตนหรือจำกัดสิทธิการใช้งาน)

งานที่ต้องทำต่อจากนี้คือทำให้งานทั้งชิ้นเป็น package ที่สามารถ install ได้ง่าย โดยสิ่งที่ผมยังต้องทำคือ

• รวบรวมข้อมูลต่างๆ เช่น absolute path ไว้ในที่เดียวกัน
• รองรับการทำ prefix ชื่อตารางฐานข้อมูล
• อาจต้องมี installer เพราะข้อข้างบน
• เอกสารคู่มือการใช้งาน

ในขณะนี้ เพื่อไม่ให้ตัวเองมึนกับหน้า control panel ที่ทำเอง ผมจึงทำ CSS ง่ายๆ ใส่ลงไปแล้ว แต่ยังไม่ได้ตกแต่งอะไรมาก

ในตอนบ่าย พี่เลี้ยงยกเครื่องกับแผ่นเปล่ามา ให้ลง Windows 8 ให้ ผมก็ลงให้แบบ yes yes yes finish (เพราะมันแทบไม่มีอะไรให้เลือกเลย!!!) ตอนยกเครื่องที่ลงเสร็จแล้วไปให้พี่ๆ ดู ผมคิดว่าอีกนานเลยกว่าผมจะชินกับ Metro UI ไม่ก็คงแทบจะไม่ได้ใช้

I continued yesterday’s work and developed vplay to the point that it can import files from YouTube using load.php script, which is very simple to call, throws everything to youtube-dl, and automatically updates database to point to newly downloaded file instead when finished, too. I also built a control panel page, very simple one that does not even have authentication.

I still need to package it into something that can be easily installed. I think I still have to

• Condense all config files into one or two
• Add database table name prefixing support
• In order to achieve that, I might need to build a proper installer
• Documentation!

I also added a bit of CSS into the control panel. This is for my own convenience.

In the afternoon, my mentor found me a laptop and an empty DVD. She asked me to install Windows 8, so I did a “yes yes yes finish” (because there’s almost nothing to customize), and returned the laptop. Personally, I think it’ll be a long time until I get used to this Metro UI, or maybe never.

Some points I have to remember

• PHP: When using proc_open or anything similar, you must find something to drain buffers with. Program will just excuse itself and die otherwise.
• CSS: Notation for ID is “#”, notation for class is “.”
• jQuery: $.() and $() are different.

(Photo: Our staff room, the oddly-faced laptop to the middle-right is mine. I got a desk of my own today though)

วันนี้มีการเปลี่ยนแปลงความต้องการงานเล็กน้อย จากเดิมผมเข้าใจว่าเขาอยากเล่นไฟล์จาก MP4 บ้าง จาก YouTube บ้างบน HTML5 ผมจึงสร้าง vplay ตัวแรกขึ้นมา ซึ่งตอนนี้เล่น MP4 ได้สมบูรณ์แบบแล้ว แต่ความต้องการใหม่คือต้องการให้เซิร์ฟเวอร์โหลด MP4 จาก YouTube เข้ามาไว้ในเครื่องตัวเอง คราวละ 15 นาที (อาจไฟล์เดียว หรือหลายไฟล์ แต่ต้องเป็น 15 นาที) แล้วค่อยเปิดให้ผู้ชม

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

ถึงจะคิดอย่างนั้นก็ตาม สุดท้ายผมใช้เวลาแทบทั้งวันกับความต้องการของระบบที่จะมาช่วยเหลือผม ผมพยายามไขว่คว้าหา Python 2.6 มาใช้ให้ได้ (มันเป็น 2.4 มา ซึ่งรัน youtube-dl ที่ผมจำเป็นต้องใช้ไม่ได้) ซึ่งผมก็ลองไป add repo ต่างๆ มา ก็เสียบ้าง ร้างบ้าง ทำ yum มึนบ้าง สุดท้ายผมเลยจำเป็นต้อง build แล้ว alt-install (ลงเป็นเวอร์ชันแยก) เอาไว้ในเครื่อง

ต่อมา ผมต้องการเครื่องมือช่วยดูแลฐานข้อมูล ผมพยายามลง phpMyAdmin แต่มันก็ต้องการ PHP 5.2 (ในเครื่องเป็น 5.1) ผมก็ต้องไปเอา php53 มาลงให้ได้อีก ลงเสร็จปุ๊บพังอีก เพราะมัน default ไม่เหมือนกัน ต้องไปปรับให้มันใช้งานได้ก่อน

กว่าจะให้ youtube-dl ทำงานได้ก็เหนื่อยพอสมควร กลายเป็นว่าผมยังหาวิธีการตรวจสอบ error ไม่ได้อีก คือ โค้ดตัวอย่าง ที่ผมได้มาใช้ popen แต่พวกเซียนบอกว่าต้องใช้ proc_open จึงจะเก็บ stderr ได้ พอผมแก้มันก็ไม่ยอมโหลดไฟล์อีก ถามว่าทำไมผมถึงอะไรกับการตรวจสอบความผิดพลาดนักหนา ก็เพราะไฟล์มันใหญ่ๆ ทั้งนั้น

Read the rest of this entry »

Objective Conscience: “You came ALL this way to eat THIS?! And it’s 5 baht more expensive than at faculty!”
Subjective Conscience: “C’mon, I wanna try everything I can!”
Objective Conscience: “It’s more expensive! And there’s a lot more you can eat. Why this?!”
Subjective Conscience: “Maybe he can relate this to his experiences the best.”
Me: “Stop it. I just wanna eat so I can get back to work.”

(Photo: … I don’t think I should need to explain. It’s boiled-chicken on rice. WHO INVENTED THIS? He’s my hero, along with the inventor of Khao Pad Kraprao, or Fried-basil on rice. And yes, the inventor of instant ramen deserves Nobel Culinary Prize, if that even exists.)

เนื่องจากวันนี้ผมมีธุระข้างนอกตอนเช้า ผมเลยเข้างานประมาณสิบโมง งานที่ทำในวันนี้คือปรับโครงสร้างการทำงานของ vplay เล็กน้อย ตอนแรกผมเก็บวิธีการเล่นไฟล์ด้วยฐานข้อมูล เพราะคิดว่าแค่เอา prefix-suffix มาใส่ก็ใช้ได้ แต่ผมคิดผิด เนื่องจากหลายๆ ครั้งที่ API บางตัวมันต้องการทำอะไรแปลกๆ ผมจึงใช้วิธีใหม่ คือเก็บในฟังก์ชันที่ชื่อ {formatName}start() แทน เช่น mp4start(), youtubestart() เป็นต้น การเรียกใช้ฟังก์ชันในลักษณะนี้ก็ไม่ยาก ผมใช้ window ['scriptName'] () ในการรันสคริปต์ที่ชื่อ scriptName ใดๆ ซึ่งก็ปลอดภัยกว่า eval() ที่รันโค้ดอะไรก็ได้ แต่ก็ไม่ได้ปลอดภัยมากนัก (จนกว่าจะหาวิธีที่สะดวกกว่านี้ได้ หรือรู้ว่าจะใช้เทคนิคหลุดโลกอย่าง metaprogramming ระดับเทพฯ มาแก้ปัญหาได้อย่างไร ก็คงต้องไว้เท่านี้ก่อน)

หลังจากแก้โค้ดไปมาอยู่ซักพัก ก็เกิดปัญญาขึ้นมาเล็กน้อย ว่าเราน่าจะสร้าง object ขึ้นมาตัวหนึ่ง แทนที่จะสร้างตัวแปร global มาจับ state ของการเล่นไฟล์วิดีโอ (หมายถึง ลำดับของไฟล์ที่เล่นอยู่ใน playlist) แต่ก็ติดอยู่ตรงนี้ คือผมยังไม่รู้ว่าจะทำให้ระบบรองรับ vplay ครั้งละมากกว่า 1 ตัวบนหน้าเดียวกันได้อย่างไร (แค่ตัวแรกยังเอาให้ใช้ได้ไม่ได้เลย) แต่ก็คิดแบบเข้าข้างตัวเองว่า ใครมันจะไปเล่นวิดีโอทีละเยอะแยะล่ะ

ตอนนี้ผมทำให้ vplay เล่นไฟล์และ “ต่อไฟล์” ชนิด mp4 ได้สมบูรณ์แล้ว (ซึ่งหมายถึงการเล่นด้วย <video> ทุกรูปแบบ) โดยผมใช้ jQuery ช่วยแก้ตัว HTML ให้ทำลาย <video> ของเก่าและสร้าง <video> อันใหม่ขึ้นมาตลอด รวมถึงสร้าง binding ไปจับด้วยว่าเมื่อเล่นจบแล้วให้ทำอะไรต่อ เป็นต้น โดยอาศัยกลุ่มฟังก์ชัน ***start() ที่กล่าวไปแล้วนั่นเอง

สำหรับไฟล์ชนิด youtube (นั่นคือ ไฟล์จากเว็บ YouTube) ตอนนี้เล่นได้เฉพาะบางไฟล์ และผมก็ยังไม่แน่ใจว่าจะต่อไฟล์อย่างไร เนื่องจากผมดึงมาเป็น <iframe> โดยตรง ไม่ได้ใช้สคริปต์ของมันที่ใช้ประกอบกับ API ได้ ตรงนี้ผมอาจแก้ไขต่อไป

Read the rest of this entry »

(Picture: Low-Zone Elevator at Cyber World Tower // English version after the break.)

วันนี้ผมไปทำงานเป็นวันที่สาม งานที่ทำคือทำต่อจากเมื่อวาน ซึ่งผมก็ไม่รู้จะเรียกมันว่าอะไร คงจบที่คำว่า Simple Multi-format JavaScript Video Player แต่ผมทำงานกับมันโดยใช้ชื่อว่า vplay (ย่อมาจากคำว่า video player อีกที)

ตอนนี้ผมสามารถ ทำให้ HTML5 <video> เล่นไฟล์ต่อไปเองได้เมื่อจบ แล้ว แต่ยังทำระบบ playlist ไม่สมบูรณ์ ตอนแรกวางแผนว่าจะใช้ JSON เก็บทั้ง playlist และ “วิธีการเปิดวิดีโอ” แต่ละแบบไว้ในไฟล์ เช่น playlist.json ก็จะมีรายชื่อไฟล์และรูปแบบไฟล์ เก็บเป็นคู่อันดับ เช่น (rickroll.mp4, mp4) หรือ ( oHg5SJYRHA0, youtube ) เป็นต้น ในขณะเดียวกันก็มีไฟล์ formats.json เก็บโค้ดที่จำเป็นในการเปิดไฟล์แต่ละชนิด เช่น ชนิด mp4 เปิดได้ด้วย <video> ในขณะที่ youtube เปิดได้ด้วย <iframe> เป็นต้น

แต่ผมก็เพิ่งมานึกได้ว่าต้องอำนวยความสะดวกผู้ใช้ด้วย เพราะ JSON ไม่ค่อยเป็นที่รู้จักนอกวงการนักพัฒนาเท่าไหร่ (จาก Google ค้นคำว่า “JSON” จะได้ 13.3 ล้านผลลัพธ์ ในขณะที่ XML ได้ถึง 179 ล้าน) จึงต้องนำไปเก็บไว้ในฐานข้อมูลแทน แล้วสร้างอะไรบางอย่างไปดึงมันออกมาเป็น JSON อีกที แล้วค่อยโยนเข้า JS player ทีนี้งานก็งอกขึ้นมา เพราะผมต้องเปลี่ยนจาก client-side ล้วนๆ มาทำ three-tier เต็มรูปแบบ

แต่ก่อนที่จะได้ทำอะไร ก็มีพี่มาเรียกให้ไปฟังบรรยายจากแผนก ABN (Access & Backbone Network) เรื่องเครือข่ายหลักหรือ backbone และแนวคิดพื้นฐานเกี่ยวกับเครือข่ายทั่วๆ ไป หลายๆ เรื่องผมก็รู้จักแล้ว เช่น IP addressing, IGP และ EGP, path vector คืออะไร แต่ก็ได้มุมมองจากคนที่ทำงานจริงๆ มาเสริมจากมุมมองในห้องเรียน เพราะการทำงานจริงเราเน้นเครื่องมือมากกว่าทฤษฎี พี่ที่มาบรรยายจึงเสริมเรื่องเครื่องมือ monitor ระบบด้วย เช่น Cacti หรือ What’s Up Gold เป็นต้น

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

สำหรับงานที่ผมทำ ผมอาจลดความซับซ้อนของมันลงไป น่าจะดีกว่า (เปลี่ยนแนวทางรายวันแบบนี้งานมันคงเสร็จหรอก!) ไม่งั้นผมอาจต้องเปลี่ยน “Simple” เป็น “Complex” และอาจต้องตัด “JavaScript” ทิ้งไป!

Read the rest of this entry »