Waipot’s Blog

\vec F = i (\vec l \times \vec B)

พื้นที่ของครึ่งวงกลม คือ
A = (1/2) pi r^2 หรือ
\inline A = \frac{1}{2} \pi r^2 ?

สองสัปดาห์ที่ผ่านมา ผมคลุกอยู่กับการพัฒนา yourequations.com - “ระบบแสดงสมการบนเวบ โดยการติดตั้งเพียง JavaScript เดียว” ซึ่งได้เปิดตัวบนโลกอินเทอร์เน็ต แบบไม่เป็นทางการ เมื่อปลายเดือนที่แล้ว วันที่ 31 มีนาคม 2008

ที่จริงเวบนี้ผมทำขึ้นตั้งแต่เมื่อต้นเดือน สิงหาคม 2007 ปีที่แล้ว โดยตอนนั้นผมอยากทำเวบชุมชนที่ทุกคนช่วยกันแก้สมการ โดยอาศัยพลังของอินเทอร์เน็ตทำในสิ่งที่ยิ่งใหญ่ ซึ่งยอมรับว่า โลกอินเทอร์เน็ตตอบรับเวบของผมเสียเงียบสนิททีเดียว (-__-”)

ต่อมาผมพบว่า ที่จริงแล้ว เวบมาสเตอร์ และ บลอกเกอร์ หรือ แม้กระทั่งผู้ใช้งานในเวบฟอรั่ม ที่ต้องการเขียนสมการลงบนเวบไซต์ ก็มีไม่น้อยทีเดียว แต่ติดตรงที่ว่าการแสดงสมการเป็นเวบนั้นยากพอๆ กับการแก้สมการที่ว่ายากเลยก็ว่าได้ เพราะถึงแม้ว่าเราจะมี MathML แล้วก็ตาม แต่เวบบราวเซอร์ ยังสนับสนุนการแสดงผลได้น้อยมาก

โชคยังดีที่เรามี TeX/LaTeX ซึ่งรู้กันดีว่าเป็นระบบพิมพ์เอกสารวิทยาศาสตร์ที่มีประสิทธิภาพสูงระบบหนึ่ง ใน LaTeX มีระบบพิมพ์สมการที่ให้ผลที่งดงามมาก และโชคดีอีกอย่างที่โลกนี้ได้มีคนพัฒนา LatexRender (PHP) และ อีกค่ายหนึ่ง คือ mimeTeX (C) ซึ่งสองโปรแกรมนี้ทำให้เราสามารถแปลคำสั่งสมการที่เขียนด้วย LaTeX แล้วส่งผลลัพธ์ออกมาเป็นไฟล์รูปภาพ (PNG) ซึ่งแสดงผลได้บนเวบ ได้อย่างน่าอัศจรรย์ แต่กระนั้นก็ตาม การติดตั้งซอฟต์แวร์นี้บนเวบโฮสต์นั้นยากทีเดียว เพราะ LaTeX มีขนาดใหญ่ราวๆ 1GB ซึ่งเวบโฮสต์ทั่วไปไม่รองรับ ทำให้ผู้ใช้งานทั่วไป ที่ไม่ได้มีโฮสต์เป็นของตัวเอง ไม่สามารถใช้งานได้อย่างทั่วถึง

ต่อมาซอฟต์แวร์ทั้งสองนี้ได้ปรับปรุงแก้ไข เพื่อให้ผู้ใช้ทั่วไป ที่ไม่ได้มีโฮสต์เป็นของตัวเอง สามารถใช้งานสะดวกขึ้น โดยการสร้างเป็น public LaTeX renderer ขึ้นมา โดยใช้หลักการของ cgi server script service คือ เปิดให้ผู้ใช้ทั่วไปส่งโค๊ดมา render แล้วส่งผลลัพธ์ออกไปเป็นรูปภาพ เช่น เวลาจะแสดงสมการต้องเขียน HTML คือ <img src=”http://latexrender_server.tld/cgi-bin/mimetex.cgi?f(x)=\int_{-\infty}^xe^{-t^2}dt”> จะเห็นว่า การใช้งานเข้าถึงผู้ใช้ทั่วไปได้มากขึ้น แต่ไม่สะดวกเท่าที่ควร เพราะต้องจำ URL ยาวๆ ทุกครั้ง

ด้วยเหตุนี้ผมจึงมีแนวคิดว่าจะทำอย่างไร ให้ผู้ใช้สามารถใช้งาน LaTeX render ได้ง่ายขึ้น บนทุกระบบ และ กลมกลืนกับเอกสาร HTML ผมจึงปรับปรุงระบบ LaTeX Render ขึ้นใหม่ โดยการทำให้ผู้ใช้สามารถเขียนสมการ LaTeX ได้ ภายใต้ tag

<pre lang="eq.latex">
your_LaTeX_code
</pre>

ซึ่งจำได้ง่ายกว่าและเวบมาสเตอร์ส่วนใหญ่น่าจะคุ้นเคยกับ tag นี้ดี จากนั้นแปลงโค๊ด LaTeX โดยอาศัยความสามารถของ JavaScrip และ DOM ในการตรวจหาสมการ LaTeX ภายใต้ tag PRE ในหน้าเวบ แล้วส่งไป render ที่ public LaTeX render แล้วแสดงผลออกมาที่หน้าเวบทันที ซึ่งพบว่าทำงานได้ผล ข้อดีของ JavaScript คือการทำงานบนเครื่องฝั่ง client ดังนั้นผู้ใช้งานทั่วไปสามารถติดตั้งได้ง่าย เพียงฝัง JavaScript LaTeX render ไปบนเวบเพจของตัวเอง ก็สามารถเขียนสมการ LaTeX บนเวบได้เพียงง่ายดาย โดยไม่ต้องติดตั้งซอฟต์แวร์เพิ่มแต่อย่างใด

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

เอกสารอ้างอิง

http://www.mathcenter.net/forum/showthread.php?t=3231

http://www.mayer.dial.pipex.com/tex.htm

http://www.forkosh.com/mimetex.html

ผมกำลังทดสอบ วิธีใหม่ ในการเขียนสมการ LaTeX ของ yourequations.com ด้วย … (เวลาเขียนจริงๆ $$ ต้องติดกัน) แทนการใช้ <pre lang="eq.latex">...</pre> ซึ่งจำยากและใช้งานลำบากกับพวก Visual Editor

ตัวอย่าง

This is my first equation, \inline \int_{-\infty}^{\infty}e^{-x^{2}}\;dx=\sqrt{\pi} and the second equation, \inline c=\sqrt{a^2+b^2} .
If I have $100, I will give you $20.

Output:

This is my first equation, $$ \inline \int_{-\infty}^{\infty}e^{-x^{2}}\;dx=\sqrt{\pi} $$ and the second equation, $$ \inline c=\sqrt{a^2+b^2} $$.
If I have $100, I will give you $20.

Dowload:
สำหรับผู้ที่ใช้ WordPress ดาวน์โหลด plugin ที่นี่ และ ผู้ที่ใช้ Blogger สามารถนำ code นี้ไปติดตั้ง

<script type="text/javascript"
 src="http://tex.yourequations.com/d/"></script>

อ่านคู่มือ http://www.yourequations.com/docs/

[Update 17/04/2008] ต้องขอขอบคุณ คุณ Top แห่ง mathcenter.net - ศูนย์กลางคณิตศาสตร์ไทย ที่แนะนำ feature นี้เข้ามา และ ให้คำปรึกษาเกี่ยวกับเรื่องนี้

ปล. นี่เป็นการทดสอบเท่านั้น ยังไม่รับประกันผลเต็ม 100%

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

ผมได้เขียนวิธีการติดตั้ง jsTeXrender ระบบแสดงสมการ LaTeX บน Web ด้วยการติดตั้ง JavaScript เพียงบรรทัดเดียว ซึ่งจะทำให้เวบไซต์ต่างๆ ที่อยู่บนระบบ Blogger, WordPress, phpBB สามารถเขียนสมการ LaTeX ได้อย่างง่ายดาย อ่านวิธีการติดตั้งบนระบบต่างๆ

• How to install jsTeXrender for Blogger
• How to install jsTeXrender for WordPress
• How to install jsTeXrender for phpBB 2.0.x
• How to install jsTeXrender for phpBB 3.0.x

ถ้าคุณมีเวบ บลอก หรือ ฟอรัม บนระบบนี้ และต้องการสนทนากันผ่านสมการคณิตศาสตร์ โปรดลองติดตั้ง jsTeXrender ตัวนี้ดู ผมหวังไว้สูงสุดว่า jsTeXrender จะเป็นเครื่องมือที่เป็นประโยชน์ต่อชุมชนเวบเพื่อการศึกษา

Link: yourequations.com

ผมเพิ่งเพิ่ม feature ใหม่เข้าไปที่ http://yourequations.com - Online JavaScript TeX/LaTeX equation render for Webs นั่น คือ การสนับสนุน <code> tag ในการเขียน คำสั่ง LaTeX บนเวบ (อ่านคู่มือ) ดังนั้นเราจะสามารถเขียน LaTeX บนเวบได้ด้วย

<pre lang="eq.latex">
 your_LaTeX_code
</pre>

– หรือ –

<code lang="eq.latex">
 your_LaTeX_code
</code>

ข้อแตกต่างระหว่างการใช้ PRE และ CODE tag คือ PRE มักจะชอบขึ้นบรรทัดใหม่ แต่ CODE ไม่เป็นเช่นนั้น ทำให้ CODE tag นี้สามารถทำงานได้ดีกับสมการแบบ inline (โดยใช้คำสั่ง \inline) ลองพิจารณาตัวอย่างต่อไปนี้

1. Using PRE tag

Source:

The equation using PRE tag, <pre lang=”eq.latex”>
\int_{-\infty}^{\infty}e^{-x^{2}}\;dx=\sqrt{\pi}
</pre>, and here is the following text.

Output:

The equation using PRE tag,

\int_{-\infty%20}^{\infty}e^{-x^{2}}\;dx=\sqrt{\pi}

, and here is the following text.

2. Using CODE tag

Source:

The equation using CODE tag, <code lang=”eq.latex”>
\int_{-\infty}^{\infty}e^{-x^{2}}\;dx=\sqrt{\pi}
</code>, and here is the following text.

Output:

The equation using CODE tag,
\int_{-\infty%20}^{\infty}e^{-x^{2}}\;dx=\sqrt{\pi}
, and here is the following text.

3. Using CODE tag with \inline command

Source:

The equation using CODE tag with \inline command, <code lang=”eq.latex”>
\inline \int_{-\infty}^{\infty}e^{-x^{2}}\;dx=\sqrt{\pi}
</code>, and here is the following text.

Output:

The equation using CODE tag with \inline command,
\inline \int_{-\infty%20}^{\infty}e^{-x^{2}}\;dx=\sqrt{\pi}, and here is the following text.

ดังนั้น CODE tag นี้ทำให้เราสามารถที่จะแทรกสมการระหว่างบรรทัดได้ จึงเพิ่มความสะดวกแก่การใช้งานมากขึ้น

ปล. http://yourequations.com ใช้ jsTeXrender ซึ่งเป็นระบบการแสดงสมการบนหน้าเวบแบบใหม่ที่ผมคิดขึ้น โดยอาศัย JavaScript และ DOM ในการแปลงโค๊ด LaTeX ในหน้า HTML เวบเพจ เป็น open-source ภายใต้ GPL หากท่านสนใจสามารถร่วมกันพัฒนาได้ ที่

http://code.google.com/p/jstexrender/

YourEquations.com ระบบ online JavaScript LaTeX equation render service ได้ออก plugin สำหรับ WordPress เพื่อช่วยให้เวบมาสเตอร์ติดตั้ง JavaScript LaTeX equation render engine ได้ง่ายขึ้น [DOWNLOAD wp-jstexrender-0.1.zip] ทดสอบกับ WP 2.3.x และ WP 2.5.0 แล้ว

การติดตั้ง

1. อัพโหลดโฟลเดอร์ wp-jstexrender ไปที่ /content/plugins
2. Activate plugin ที่ ‘Plugins’ menu ใน WordPress

การใช้งาน

ใช้ WYSIWYG editor ของ WordPress โหมด Visual เขียนบทความได้ตามปกติ เวลาที่ต้องการเขียนโค๊ดให้เปลี่ยนเป็น HTML จากนั้นเราจะสามารถเขียน LaTeX equation ได้ด้วย <pre lang="eq.latex">...</pre> ยกตัวอย่างเช่น

<pre lang="eq.latex">
c=\sqrt{a^2+b^2}
</pre> 

ซึ่ง jsTeXrender จะแปลงโค๊ดเป็นสมการ ได้คือ

c=\sqrt{a^2+b^2}

(ตัวอย่างเพิ่มเติม ที่นี่)

jsTeXrender นี้สามารถทำให้เจ้าของบลอกหรือเวบไซต์ ตีพิมพ์สมการได้สะดวกรวดเร็วขึ้น ขอเชิญใช้บริการฟรีได้ที่

http://yourequations.com

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

นี่เป็นบริการใหม่ล่าสุด http://yourequations.com โดย waipot.com หลังจากใช้เวลาทุ่มเทคิดค้นมาแสนนาน เพื่อให้สมการ LaTeX สามารถโลดแล่นได้บนโลกออนไลน์ (อ่านที่มาและความสำคัญ)

เพียงติดตั้ง jsTeXrender javascript นี้ ในส่วนท้ายของเอกสาร HTML ก่อน </body>

<script type="text/javascript"
src="http://tex.yourequations.com/"></script>

จากนั้นเขียน LaTeX code ในเอกสาร HTML ที่ได้ติดตั้งสคริปต์ด้านบนนี้ โดยใช้แทก pre คือ

<pre lang="eq.latex">
your_LaTeX_code
</pre>

jsTeXrender จะคอมไพล์สมการใน your_LaTeX_code ให้กลายเป็นไฟล์รูปภาพแบบ png ที่สามารถแสดงเป็นเวบได้

ตัวอย่าง

\int_{0}^{1}\frac{x^{4}\left(1-x\right)^{4}}{1+x^{2}}dx=\frac{22}{7}-\pi

<pre lang="eq.latex">
\int_{0}^{1}\frac{x^{4}\left(1-x\right)^{4}}{1+x^{2}}dx =
\frac{22}{7}-\pi
</pre>

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

อย่าลืมสนับสนุน http://yourequations.com ฟรี และ open สำหรับทุกคน

Update 8/4/2008 7:45PM

ผมได้ทำ wp-jstexrender plugin สำหรับติดตั้ง latex render ใน WordPress โดยไม่จำเป็นต้องแก้ไข theme ใดๆ อ่านรายละเอียดที่นี่ Click