By: neizod 
on 18 January 2011 - 13:38
Tags:
Forums:
แนวคิด
เนื่องจากอินเตอร์เน็ตเป็นช่องทางการสื่อสารที่ถูกใช้อย่างแพร่หลายในปัจจุบัน ความรู้จากมากมายหลายสาขาถูกเขียนลงเพื่อสื่อสารกันผ่านเว็บ แต่น่าแปลกที่คณิตศาสตร์ซึ่งเป็นภาษากลางของการคำนวณ กลับไม่มีมาตรฐานกลางในการเขียนผ่านเว็บที่แน่ชัด
ส่วนตัวผมไม่กี่วันก่อน ได้ไปเห็น SyntaxHighlighter จึงเกิดแนวคิดว่า น่าจะมีเครื่องมือกลางสำหรับเขียนสมการผ่านเว็บด้วย
แนวทางพัฒนา
เรียกไฟล์โปรแกรมซึ่งเป็น JavaScript เพื่อตรวจหา tag <math> ถ้าพบว่าข้อความภายใต้ tag เป็น pain text จะทำการเรียกฟังก์ชันแปลภาษาขึ้นมาใช้ โดยจะทำการแปล pain text ไปเป็นภาษา MathML แล้วจึงส่งต่อให้ MathJax ซึ่งเป็น JavaScript สำหรับวาดสมการคณิตศาสตร์มาจัดการต่อไป
สำหรับข้อความที่เขียนภายใต้ tag <math> นั้น จะเน้นรูปแบบที่เรียบง่าย สามารถอ่านได้เข้าใจทันที ไม่ต้องจำวิธีเขียน (เช่นเดียวกับภาษา Python ที่เรียบง่าย, ไม่เหมือนภาษา LaTeX ที่ยุ่งยาก)
ตัวอย่างข้อมูลรับเข้า Int f(x) dx from a to b ควรจะได้ผลลัพท์ออกมาเหมือนตัวอย่างแรกใน wiki ครับ
(แก้ไขครั้งที่ 1 เปลี่ยนจากการใช้ canvas element ใน HTML5 เพื่อวาดสมการคณิตศาสตร์)
ระยะเวลาพัฒนาโครงการ
สัปดาห์แรก ออกแบบวิธีการรับข้อมูลแบบ pain text ภายใต้ tag <math>
2 สัปดาห์ต่อมา สร้างตัวแปลภาษา เพื่อแปล pain test ไปเป็นภาษา MathML
ก่อนจบเดือนแรก เชื่อมโยงโปรแกรมให้ทำงานกับ MathJax ได้
สัปดาห์แรกของเดือนถัดมา เก็บกวาดและ debug งานขั้นต้น
3 สัปดาห์ถัดมา พัฒนารูปแบบสมการทางคณิตศาสตร์ที่สามารถอ่านเข้ามาให้ได้มากขึ้น
ขึ้นเดือนที่ 3 debug และตรวจสอบความเรียบร้อยของโครงการขั้นสุดท้าย
2 สัปดาห์สุดท้ายก่อนปิดงาน สร้างเอกสารแนะนำการใช้งาน
ขอบเขตของโครงการ
สามารถวาดสมการทางคณิตศาสตร์เบื้องต้นได้ (บวก ลบ คูณ หาร ยกกำลัง มากกว่าน้อยกว่า)
สามารถวาดสมการปริพันธ์ (Integral) ได้
สามารถวาดสมการเมตริกซ์ได้
สามารถวาดตัวแปรเป็นภาษาอังกฤษและภาษากรีกได้
ประวัติผู้ฝึกงาน
ชื่อ ณัฐวุฒิ เพ็ชรมาก ชื่อเล่น กอล์ฟ
นามปากกา เนยสด (neizod)
อายุ 21 ปี
การศึกษา
เข้าร่วมโครงการโอลิมปิกวิชาการ สาขาฟิสิกส์-ดาราศาสตร์ ปีการศึกษา 2546
สำเร็จการศึกษาระดับมัธยมศึกษาจากโรงเรียนปรินส์รอยแยลวิทยาลัยปีการศึกษา 2550
ปัจจุบันศึกษาที่มหาวิทยาลัยเชียงใหม่ คณะวิทยาศาสตร์ ภาควิชาคณิตศาสตร์ ชั้นปีที่ 3
ความสามารถ
คณิตศาสตร์
ดาราศาสตร์
ฟิสิกส์
ทักษะ
HTML & JavaScript
Java
Python
ความคาดหวัง
1. ความสามารถในการเขียน HTML, JavaScript (และ CSS จะได้เขียนเป็นซักที!) ที่เพิ่มมากขึ้น
2. โครงการที่พัฒนาขึ้น มีผู้นำไปใช้อย่างแพร่หลาย (และกลายเป็นมาตรฐานกลางการเขียนสมการบนเว็บ)
3. ป้าย trainee จาก blognone (ถ้าแถมป้าย writer ให้จะดีมากเลยครับ อิอิ)
สุดท้ายนี้ก็ขอคำแนะนำการเขียนข้อเสนอโครงการหน่อยนะครับ เพราะสาขาที่ผมเรียนไม่มีฝึกงานอะครับ :'(
Get latest news from Blognone
Follow @twitterapi
แท็ก < math > นี่ใช้กับ MathML ไปแล้วครับ ซึ่งใน browser รุ่นใหม่ๆ ก็สนับสนุนกันแล้ว แต่ก็จะเป็นการเขียนสมการโดยใช้แท็กตามข้อกำหนดของ MathML ไม่ใช่เขียนเป็นสมการง่ายๆ อย่างที่เสนอมา
pittaya.com
พอดีตอนที่พึ่งคิดโปรเจคออกแล้วค้นๆ ดูไม่เจอตัวนี้ครับ ขอบคุณครับ
ตรงเรื่อง tag < math > คิดว่าถ้าจะใช้จริงๆ ไม่น่ามีปัญหานะครับ เพราะดูจากตัวอย่างใน wiki แล้ว MathML นั้น ถัดจาก tag < math > จะเรียกใช้ tag < apply > หรือ < mrow > ทันทีเลย ดังนี้เขียนดักไว้ว่าถ้าเจอ input เป็น pain text ก็ให้ rander แบบง่าย แต่ถ้าเจอ tag ตามข้างบนก็หยุดการทำงานของเราก็ได้ครับ
ผมว่าน่าสนใจดีครับ :-)
ถ้าเป็นการแปลงจาก plain text ที่เข้าใจง่ายไปเป็น MathML น่าจะดีกว่ามั้ย เพราะการแสดงสมการจาก MathML มีคนทำไว้อยู่แล้ว
http://www.mathjax.org/
onedd.net
คล้ายๆ กับ mark down หรือเปล่าครับ?
ปัญหาที่พบตอนนี้คือ ถ้าจะแปลไปให้ MathML ทำงานแทนตรงๆ (ตามตัวอย่างที่โพสต์ไว้ใน wiki นะครับ)
Chrome กับ Safari พังครับ พวก sqrt ยกกำลัง 2 และหารแบบแบ่งบรรทัดบน-ล่างแสดงผลเป็นสี่เหลี่ยม
Opera แสดงผลได้ถูกต้องครับ โดยตัวอักษรมีขนาดใหญ่เท่ากับคำทั่วไป อ่านง่าย แต่ sqrt ไม่สวยครับ
FireFox แสดงผลถูกต้อง วาด sqrt ได้สวย แต่ตัวสมการที่อยู่ภายใต้เส้นหารแบบแบ่งครึ่งบรรทัดนั้น ตัวอักษรเล็กจนอ่านยากครับ
ถ้าแปลให้ MathJax ก็ดีขึ้นหน่อย (ซะที่ไหน เยอะเลย ตามตัวอย่างบนหน้าเว็บนี้ครับ)
FireFox render ออกมาได้ยอดเยี่ยมครับ (ใช้ HTML-CSS ถ้าเป็น MathML จะดูไม่สวยไปบ้าง)
Opera, Safari, IE 8 แสดงผลสมการได้ถูกต้อง แต่มีบางจุดที่ดูไม่สวยไปบ้าง
ส่วน Chrome 8 เป็นอะไรไม่รู้ พังครับ เขียนสมการผิดซะงั้น - -" (แต่ตัว canary กลับแสดงผลถูกแฮะ)
แนวคิดนี้น่าสนใจครับ ตอนนี้กำลังชั่งใจว่าจะเปลี่ยนมาทำแบบนี้ดีมั้ย เพราะว่าดูแล้วตอนนี้เบาร์วเซอร์ทุกตัวยัง render ออกมาไม่ค่อยเหมือนกันเท่าไหร่แฮะ
รบกวนแชร์ข้อมูลเพื่อช่วยตัดสินใจเพิ่มเติมด้วยครับ
ไปอ่านเอกสารและทดลองเล่น MathJax แล้วนะครับ ใช้ได้เลยครับ
โครงการใช้สัญญาอนุญาตแบบ Apache 2.0 ครับ (ผมลองอ่านแล้วเข้าใจอยู่ 50% อยู่เลยครับ)
งั้นขอปรับปรุงข้อเสนอโครงการเป็นการทำ extension สำหรับ MathJax นะครับ
เหมือนกับ asciimathml เลยครับ
ต่างกันแค่ asciimathml จะแปลงไปเป็น mathml โดยใช้ javascript เท่านั้นเอง
แต่ syntax ของ asciimathml ผมว่า ยือหยุ่นมากแล้วนะครับลองไปศึกษาดูได้
อู้วววว แบบนั้นเลยครับ แบบนั้นเป๊ะเลย
เสียดาย render บน chrome ไม่ได้แฮะ
นี่เป็นสาเหตุหนึ่งที่ยังไม่ใช้ chrome
จริง ๆ แล้วอยากได้แบบที่รวม showdown.js asciimathml และ syntaxhilighter
มากกว่านะครับ
เพราะมันจะกลายเป็น super script ที่สามารถเขียน markdown ที่แทรก mathml ลงไปได้พร้อมทำ syntax hiligher แล้วใส่ chart ที่เป็น svg ลงไปได้ด้วย แต่เคยลองใช้รวมกันดูเทพมาก
โดยอาจจะใส่ตัว render mathjax ในตัวไปเลยก็ได้
อาจจะไม่เกี่ยวนะ
game ox ด้วย asciimathml
หน้าทดสอบ MathML จาก W3C
http://www.w3.org/Math/testsuite/overview.html
ปล. แค่หา plugin แสดง MathML
ให้ browser ที่ไม่ support แค่นี้ก็แสดงผล MathML ได้แล้ว
ตามความเข้าใจส่วนตัว plug in นี้ต้องให้ผู้ใช้ติดตั้งเอง ซึ่งในระดับเราคงไม่มีปัญหาครับ แต่ทางฝั่งผู้ใช้ที่มีความสามารถด้านคอมพิวเตอร์ไม่สูงมากนักอาจพบปัญหาได้
นายกอล์ฟเนยสด เราเข้าค่ายเดียวกับนาย ไม่รู้จำกันได้ป่าว 555+
โจ๊กนี่เอง ไม่เข้าไปดู face จำไม่ได้นะเนี่ย ^^"
ผมมีคอมเมนต์อยู่บ้างนะครับ
อย่างเช่น
P(E) = {n \choose k} p^k (1-p)^{ n-k}
อะไรอย่างนี้ก็รองรับด้วย MathJax อยู่แล้ว (แถมฝั่ง server ก็ยังมีตัว render LaTex)
lewcpe.com, @wasonliw
ง่ายกว่า LaTeX ในระดับที่ใกล้เคียงกับภาษามนุษย์ครับ เช่น
n Choose k = (n-1) Choose (k-1) + (n-1) Choose k
Int f(x) dx from a to b = F(b) - F(a)
[[1, 2, 3], [0, -6, 7]]^T = [[1, 0], [2, -6], [3, 7]]
Sum x[i] from (i=m) to n = x[m] + x[m+1] x[m+2] + ... + x[n-1] + x[n]
e^x = lim (1+x/n)^n when n -> infinity
A/B * C/D = (AC)/(BD)
ฟีเจอร์ ในระยะเวลาฝึกงาน อาจต้องตัดหลายอย่างอยู่ครับ
ครั้งแรกที่นึกออก เลือกใช้ < canvas > บน HTML5 เพราะต้องการให้ใช้ JavaScript เพื่อทำงานบนฝั่ง client ทั้งหมดครับ
พอเห็นคุณ wiennat ทักว่ามี MathJax อยู่แล้ว เลยลังเลครับ ว่าจะพัฒนาต่อจากตัว MathJax ดีหรือเปล่า หรือว่าจะเริ่มต้นตั้งแต่ 0 บน < canvas > เลยดี
รับแนวคิดจาก Python เพราะว่า syntax ของ Python ใช้เวลาไม่นานมากนักเพื่อทำความเข้าใจครับ (ไม่ได้ใช้ Python พัฒนานะครับ)
เท่าที่ผมอ่านๆ ดูแล้ว มันเป็นงานสองส่วนผสมกันนะครับ
สำหรับข้อ 2. วิธีที่คุณเสนอตอนนี้มี 2 แบบคือ
ผมคิดว่า ประเด็นสำคัญของโครงการนี้ อยู่ที่การสร้าง syntax ใหม่ (อันนี้ถือว่าคุณยืนยันว่าสร้าง syntax ใหม่ ดีกว่า syntax ของเดิม) มากกว่าการ implement ให้ syntax ใหม่สามารถแสดงผลได้ เพราะการสร้าง syntax ที่ใช้งานได้จริงนั้นซับซ้อนและต้องการการทดสอบ (ในเชิงตรรกะ) พอสมควร
ผมเสนอว่าถ้าจะทำงานนี้จริงๆ scope ของงานควรจะเป็นการสร้าง syntax ใหม่ และสร้างตัวแปลงไปเป็น MathML (and/or TeX) ได้ เพื่อเกาะภาษาที่ได้รับความนิยมอยู่แล้ว (ตัวแปลงอาจจะเป็น script ไฟล์เดียวก็ได้) ส่วนจะแปลงตรงเข้า MathJax หรือเปล่า เป็นขั้นตอนถัดๆ ไป
เข้าใจแล้วครับ ขอบคุณครับ
ว่าจะมาบอกเหมือนกับลิ่วเลยว่า ผมชอบ LaTex และเคยชินกับมันมากๆครับ เคยไปใช้ภาษา GAMS กับ AMPL สำหรับแก้ปัญหา linear programming ก็ยังรู้สึกเลยว่า ถ้าเปลี่ยนเป็น LaTex ได้จะง่ายมากๆ
ไอเดียของน้องกอล์ฟถือเป็นจุดเริ่มต้นที่ดีครับ เมื่อได้เริ่มต้นคิดแล้วและมีคนมาแนะนำ/ติชมเรื่อยๆ ผมเชื่อว่าถ้าทำเสร็จแล้ว งานจะออกมาดีมากครับ
My Blog
ขอบคุณครับ ^__^
จริงๆ สายการศึกษาของผม น่าจะต้องได้ข้องแวะกับ LaTeX จนเรียกได้ว่าเป็นภาษาที่สองไปเลยก็ได้
แต่ผมว่า มันยังดูยากๆ ไปอยู่ครับ และไม่เหมาะกับทุกคนด้วยครับ (โดยเมื่อเว็บเข้ามามีบทบาทมากขึ้นในปัจจุบัน)
ถ้ามีปัญหาเกี่ยวกับการใช้ LaTeX ลองไปถามคนแถว
http://tex.stackexchange.com/
ดูสิครับ อาจจะได้ความรู้สึกแปลก ๆ ใหม่ ๆ
ขนาดผมใช้มาเป็นสิบปี ยังรู้สึกว่ามันจะเก่งอะไรกันขนาดนั้นฟะ
ขอบคุณครับ ^__^