on
แนวคิด
เนื่องจากอินเตอร์เน็ตเป็นช่องทางการสื่อสารที่ถูกใช้อย่างแพร่หลายในปัจจุบัน ความรู้จากมากมายหลายสาขาถูกเขียนลงเพื่อสื่อสารกันผ่านเว็บ แต่น่าแปลกที่คณิตศาสตร์ซึ่งเป็นภาษากลางของการคำนวณ กลับไม่มีมาตรฐานกลางในการเขียนผ่านเว็บที่แน่ชัด
ส่วนตัวผมไม่กี่วันก่อน ได้ไปเห็น 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
ความคาดหวัง
- ความสามารถในการเขียน HTML, JavaScript (และ CSS จะได้เขียนเป็นซักที!) ที่เพิ่มมากขึ้น
- โครงการที่พัฒนาขึ้น มีผู้นำไปใช้อย่างแพร่หลาย (และกลายเป็นมาตรฐานกลางการเขียนสมการบนเว็บ)
- ป้าย trainee จาก blognone (ถ้าแถมป้าย writer ให้จะดีมากเลยครับ อิอิ)
สุดท้ายนี้ก็ขอคำแนะนำการเขียนข้อเสนอโครงการหน่อยนะครับ เพราะสาขาที่ผมเรียนไม่มีฝึกงานอะครับ :'(
แท็ก < math > นี่ใช้กับ
pittaya Tue, 18/01/2011 - 14:10
แท็ก < math > นี่ใช้กับ MathML ไปแล้วครับ ซึ่งใน browser รุ่นใหม่ๆ ก็สนับสนุนกันแล้ว แต่ก็จะเป็นการเขียนสมการโดยใช้แท็กตามข้อกำหนดของ MathML ไม่ใช่เขียนเป็นสมการง่ายๆ อย่างที่เสนอมา
พอดีตอนที่พึ่งคิดโปรเจคออกแล้
neizod Tue, 18/01/2011 - 20:05
In reply to แท็ก < math > นี่ใช้กับ by pittaya
พอดีตอนที่พึ่งคิดโปรเจคออกแล้วค้นๆ ดูไม่เจอตัวนี้ครับ ขอบคุณครับ
ตรงเรื่อง tag < math > คิดว่าถ้าจะใช้จริงๆ ไม่น่ามีปัญหานะครับ เพราะดูจากตัวอย่างใน wiki แล้ว MathML นั้น ถัดจาก tag < math > จะเรียกใช้ tag < apply > หรือ < mrow > ทันทีเลย ดังนี้เขียนดักไว้ว่าถ้าเจอ input เป็น pain text ก็ให้ rander แบบง่าย แต่ถ้าเจอ tag ตามข้างบนก็หยุดการทำงานของเราก็ได้ครับ
ผมว่าน่าสนใจดีครับ :-)
mr_tawan Tue, 18/01/2011 - 14:10
ผมว่าน่าสนใจดีครับ :-)
ถ้าเป็นการแปลงจาก plain text
wiennat Tue, 18/01/2011 - 15:36
ถ้าเป็นการแปลงจาก plain text ที่เข้าใจง่ายไปเป็น MathML น่าจะดีกว่ามั้ย เพราะการแสดงสมการจาก MathML มีคนทำไว้อยู่แล้ว
http://www.mathjax.org/
คล้ายๆ กับ mark down
AlninlA Tue, 18/01/2011 - 17:37
In reply to ถ้าเป็นการแปลงจาก plain text by wiennat
คล้ายๆ กับ mark down หรือเปล่าครับ?
ปัญหาที่พบตอนนี้คือ
neizod Tue, 18/01/2011 - 20:51
In reply to ถ้าเป็นการแปลงจาก plain text by wiennat
ปัญหาที่พบตอนนี้คือ ถ้าจะแปลไปให้ MathML ทำงานแทนตรงๆ (ตามตัวอย่างที่โพสต์ไว้ใน wiki นะครับ)
Chrome กับ Safari พังครับ พวก sqrt ยกกำลัง 2 และหารแบบแบ่งบรรทัดบน-ล่างแสดงผลเป็นสี่เหลี่ยม
Opera แสดงผลได้ถูกต้องครับ โดยตัวอักษรมีขนาดใหญ่เท่ากับคำทั่วไป อ่านง่าย แต่ sqrt ไม่สวยครับ
FireFox แสดงผลถูกต้อง วาด sqrt ได้สวย แต่ตัวสมการที่อยู่ภายใต้เส้นหารแบบแบ่งครึ่งบรรทัดนั้น ตัวอักษรเล็กจนอ่านยากครับ
ถ้าแปลให้ MathJax ก็ดีขึ้นหน่อย (ซะที่ไหน เยอะเลย ตามตัวอย่างบนหน้าเว็บนี้ครับ)
FireFox render ออกมาได้ยอดเยี่ยมครับ (ใช้ HTML-CSS ถ้าเป็น MathML จะดูไม่สวยไปบ้าง)
Opera, Safari, IE 8 แสดงผลสมการได้ถูกต้อง แต่มีบางจุดที่ดูไม่สวยไปบ้าง
ส่วน Chrome 8 เป็นอะไรไม่รู้ พังครับ เขียนสมการผิดซะงั้น - -" (แต่ตัว canary กลับแสดงผลถูกแฮะ)
แนวคิดนี้น่าสนใจครับ ตอนนี้กำลังชั่งใจว่าจะเปลี่ยนมาทำแบบนี้ดีมั้ย เพราะว่าดูแล้วตอนนี้เบาร์วเซอร์ทุกตัวยัง render ออกมาไม่ค่อยเหมือนกันเท่าไหร่แฮะ
รบกวนแชร์ข้อมูลเพื่อช่วยตัดสินใจเพิ่มเติมด้วยครับ
ไปอ่านเอกสารและทดลองเล่น
neizod Tue, 18/01/2011 - 23:02
In reply to ปัญหาที่พบตอนนี้คือ by neizod
ไปอ่านเอกสารและทดลองเล่น MathJax แล้วนะครับ ใช้ได้เลยครับ
โครงการใช้สัญญาอนุญาตแบบ Apache 2.0 ครับ (ผมลองอ่านแล้วเข้าใจอยู่ 50% อยู่เลยครับ)
งั้นขอปรับปรุงข้อเสนอโครงการเป็นการทำ extension สำหรับ MathJax นะครับ
เหมือนกับ asciimathml
sukoom2001 Tue, 18/01/2011 - 20:32
เหมือนกับ asciimathml เลยครับ
ต่างกันแค่ asciimathml จะแปลงไปเป็น mathml โดยใช้ javascript เท่านั้นเอง
แต่ syntax ของ asciimathml ผมว่า ยือหยุ่นมากแล้วนะครับลองไปศึกษาดูได้
อู้วววว แบบนั้นเลยครับ
neizod Tue, 18/01/2011 - 20:49
In reply to เหมือนกับ asciimathml by sukoom2001
อู้วววว แบบนั้นเลยครับ แบบนั้นเป๊ะเลย
เสียดาย render บน chrome ไม่ได้แฮะ
นี่เป็นสาเหตุหนึ่งที่ยังไม่ใช
sukoom2001 Tue, 18/01/2011 - 22:32
In reply to อู้วววว แบบนั้นเลยครับ by neizod
นี่เป็นสาเหตุหนึ่งที่ยังไม่ใช้ chrome
จริง ๆ แล้วอยากได้แบบที่รวม showdown.js asciimathml และ syntaxhilighter
มากกว่านะครับ
เพราะมันจะกลายเป็น super script ที่สามารถเขียน markdown ที่แทรก mathml ลงไปได้พร้อมทำ syntax hiligher แล้วใส่ chart ที่เป็น svg ลงไปได้ด้วย แต่เคยลองใช้รวมกันดูเทพมาก
โดยอาจจะใส่ตัว render mathjax ในตัวไปเลยก็ได้
อาจจะไม่เกี่ยวนะ
game ox ด้วย asciimathml
หน้าทดสอบ MathML จาก
saknarak Tue, 18/01/2011 - 21:21
หน้าทดสอบ MathML จาก W3C
http://www.w3.org/Math/testsuite/overview.html
ปล. แค่หา plugin แสดง MathML
ให้ browser ที่ไม่ support แค่นี้ก็แสดงผล MathML ได้แล้ว
ตามความเข้าใจส่วนตัว plug in
neizod Wed, 19/01/2011 - 08:53
In reply to หน้าทดสอบ MathML จาก by saknarak
ตามความเข้าใจส่วนตัว plug in นี้ต้องให้ผู้ใช้ติดตั้งเอง ซึ่งในระดับเราคงไม่มีปัญหาครับ แต่ทางฝั่งผู้ใช้ที่มีความสามารถด้านคอมพิวเตอร์ไม่สูงมากนักอาจพบปัญหาได้
นายกอล์ฟเนยสด
GuBaRaK Wed, 19/01/2011 - 18:26
นายกอล์ฟเนยสด เราเข้าค่ายเดียวกับนาย ไม่รู้จำกันได้ป่าว 555+
โจ๊กนี่เอง ไม่เข้าไปดู face
neizod Wed, 19/01/2011 - 19:43
In reply to นายกอล์ฟเนยสด by GuBaRaK
โจ๊กนี่เอง ไม่เข้าไปดู face จำไม่ได้นะเนี่ย ^^"
ผมมีคอมเมนต์อยู่บ้างนะครับ โ
lew Sat, 22/01/2011 - 08:26
ผมมีคอมเมนต์อยู่บ้างนะครับ
อย่างเช่น
P(E) = {n \choose k} p^k (1-p)^{ n-k}
อะไรอย่างนี้ก็รองรับด้วย MathJax อยู่แล้ว (แถมฝั่ง server ก็ยังมีตัว render LaTex)
ง่ายกว่า LaTeX
neizod Sat, 22/01/2011 - 21:25
In reply to ผมมีคอมเมนต์อยู่บ้างนะครับ โ by lew
ง่ายกว่า 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)
ฟีเจอร์ ในระยะเวลาฝึกงาน อาจต้องตัดหลายอย่างอยู่ครับ
ถ้าเทียบกับ LaTeX พวก Advanced Mathematics ตัดออกหมดครับ
การใช้ข้อความธรรมดาผสมกับสมการ ไม่ทำครับ
เครื่องหมายเปรียบเทียบค่า ตัดพวกแปลกๆ ไม่ค่อยมีโอกาสได้ใช้ออกให้เหลือแค่ = ≈ ≠ ≡ ≤ ≥ < >
ครั้งแรกที่นึกออก เลือกใช้ < canvas > บน HTML5 เพราะต้องการให้ใช้ JavaScript เพื่อทำงานบนฝั่ง client ทั้งหมดครับ
พอเห็นคุณ wiennat ทักว่ามี MathJax อยู่แล้ว เลยลังเลครับ ว่าจะพัฒนาต่อจากตัว MathJax ดีหรือเปล่า หรือว่าจะเริ่มต้นตั้งแต่ 0 บน < canvas > เลยดี
ถ้าพัฒนาต่อจาก MathJax ตัว extension นี้จะทำงานบนฝั่ง client แปลงข้อความที่รับไปเป็นภาษา MathML, LaTeX แล้วจึงส่งต่อให้ MathJax ทำการ rander ออกมาเป็น HTML-CSS ครับ ส่วนเรื่องติดต่อ server เพื่อทำงานนี้สารภาพว่าไม่ทราบครับ
syntax สำหรับอ่าน pain text แล้วแปลไปเป็น MathML, LaTeX อันนี้ไม่น่ายากครับ น่าจะพัฒนาได้ใน 2 สัปดาห์ครับ แต่ต้องพัฒนาส่วนติดต่อกับ MathJax เพิ่มด้วยครับ ตรงนี้น่าจะยากอยู่ เพราะยังไม่รู้เรื่อง server และการส่งงานต่อครับ
ถ้าเริ่มพัฒนาใหม่หมดบน < canvas > อันนี้ต้องสร้าง syntax วาดสมการเอง เท่าที่นึกออกจะเป็นการไล่อ่านคำไปทีละคำ เปรียบเทียบคำว่าเป็นสัญลักษณ์อไร วาดสัญลักษณ์พร้อมกับขยับเคอร์เซอร์ไปตำแหน่งถัดไปแล้วจึงอ่านคำต่อไป คิดว่าน่าจะอยู่ในระดับกลางๆ ครับ ไม่ง่ายแต่ก็ไม่น่ายากจนเกินไป ถ้าพัฒนาเองน่าจะใช้เวลาประมาณ 1 เดือนครับ
รับแนวคิดจาก Python เพราะว่า syntax ของ Python ใช้เวลาไม่นานมากนักเพื่อทำความเข้าใจครับ (ไม่ได้ใช้ Python พัฒนานะครับ)
เท่าที่ผมอ่านๆ ดูแล้ว
mk Sun, 23/01/2011 - 22:53
In reply to ง่ายกว่า LaTeX by neizod
เท่าที่ผมอ่านๆ ดูแล้ว มันเป็นงานสองส่วนผสมกันนะครับ
สำหรับข้อ 2. วิธีที่คุณเสนอตอนนี้มี 2 แบบคือ
ผมคิดว่า ประเด็นสำคัญของโครงการนี้ อยู่ที่การสร้าง syntax ใหม่ (อันนี้ถือว่าคุณยืนยันว่าสร้าง syntax ใหม่ ดีกว่า syntax ของเดิม) มากกว่าการ implement ให้ syntax ใหม่สามารถแสดงผลได้ เพราะการสร้าง syntax ที่ใช้งานได้จริงนั้นซับซ้อนและต้องการการทดสอบ (ในเชิงตรรกะ) พอสมควร
ผมเสนอว่าถ้าจะทำงานนี้จริงๆ scope ของงานควรจะเป็นการสร้าง syntax ใหม่ และสร้างตัวแปลงไปเป็น MathML (and/or TeX) ได้ เพื่อเกาะภาษาที่ได้รับความนิยมอยู่แล้ว (ตัวแปลงอาจจะเป็น script ไฟล์เดียวก็ได้) ส่วนจะแปลงตรงเข้า MathJax หรือเปล่า เป็นขั้นตอนถัดๆ ไป
เข้าใจแล้วครับ ขอบคุณครับ
neizod Wed, 26/01/2011 - 00:47
In reply to เท่าที่ผมอ่านๆ ดูแล้ว by mk
เข้าใจแล้วครับ ขอบคุณครับ
ว่าจะมาบอกเหมือนกับลิ่วเลยว่า
javaboom Sun, 23/01/2011 - 00:12
In reply to ผมมีคอมเมนต์อยู่บ้างนะครับ โ by lew
ว่าจะมาบอกเหมือนกับลิ่วเลยว่า ผมชอบ LaTex และเคยชินกับมันมากๆครับ เคยไปใช้ภาษา GAMS กับ AMPL สำหรับแก้ปัญหา linear programming ก็ยังรู้สึกเลยว่า ถ้าเปลี่ยนเป็น LaTex ได้จะง่ายมากๆ
ไอเดียของน้องกอล์ฟถือเป็นจุดเริ่มต้นที่ดีครับ เมื่อได้เริ่มต้นคิดแล้วและมีคนมาแนะนำ/ติชมเรื่อยๆ ผมเชื่อว่าถ้าทำเสร็จแล้ว งานจะออกมาดีมากครับ
ขอบคุณครับ ^__^ จริงๆ
neizod Sun, 23/01/2011 - 00:55
In reply to ว่าจะมาบอกเหมือนกับลิ่วเลยว่า by javaboom
ขอบคุณครับ ^__^
จริงๆ สายการศึกษาของผม น่าจะต้องได้ข้องแวะกับ LaTeX จนเรียกได้ว่าเป็นภาษาที่สองไปเลยก็ได้
แต่ผมว่า มันยังดูยากๆ ไปอยู่ครับ และไม่เหมาะกับทุกคนด้วยครับ (โดยเมื่อเว็บเข้ามามีบทบาทมากขึ้นในปัจจุบัน)
ถ้ามีปัญหาเกี่ยวกับการใช้
p-joy Sat, 29/01/2011 - 16:05
In reply to ขอบคุณครับ ^__^ จริงๆ by neizod
ถ้ามีปัญหาเกี่ยวกับการใช้ LaTeX ลองไปถามคนแถว
http://tex.stackexchange.com/
ดูสิครับ อาจจะได้ความรู้สึกแปลก ๆ ใหม่ ๆ
ขนาดผมใช้มาเป็นสิบปี ยังรู้สึกว่ามันจะเก่งอะไรกันขนาดนั้นฟะ
ขอบคุณครับ ^__^
neizod Tue, 01/02/2011 - 15:19
In reply to ถ้ามีปัญหาเกี่ยวกับการใช้ by p-joy
ขอบคุณครับ ^__^