เขียนโค๊ดให้ Run mobile web อัตโนมัติ
Friday, August 29th, 2008ตอนนี้กระแสของการทำเว็บบนมือถือกำลังระบาดหนักเพราะตอนนี้แทบทุกคนล้วนแล้วแต่มีมือถือแทบทุกคน บางคน 2-3 เครื่องก็มี บริการหลายๆ อย่างหันไปให้บริการบนมือถือมากยิ่งขึ้น มาคิดถึงเขียนโปรแกรมบนมือถือเมื่อก่อน สมัยนั้นจะเขียนโปรแกรมด้วย wml (Wireless Application Protocol) ซะเป็นส่วนมาก และโดยมากเว็บที่มีบริการผ่าน w@p ก็มักจะใช้ URL เป็น
wap.xxx.com
xxx.com/wap/
อะไรทำนองนี้ ซึ่งผมเองก็เขียน w@b site เล่นอยู่เหมือนกัน เป็นการแสดงซื้อขายล่าสุด แต่หลังๆก็เลิกทำเพราะแทบไม่มีคนใช้งานบนมือถือ แหมก็ช่วงนั้นค่า GPRS อย่างแพง ช้า แถมคิดเป็นไบต์อีกใครจะมาเล่น
มาอีกช่วงหนึ่ง Pocket PC หรือ PDA เริ่มระบาดหนัก อีกทั้งใน Pocket PC ก็สามารถใช้งานบราวเซอร์ได้ด้วย แถมรองรับพวก html , Xhtml ก็เลยทำให้สามารถเขียนอะไรได้ง่ายมากขึ้น ยังมีโปรแกรมเมอร์หลายๆคนยังคงคิดว่า การเขียนสคริปเพื่อใช้งานบน Pocket PC ต้องเป็นภาษาเฉพาะ PHP ใช้งานบนมือถือไม่ได้ หากเป็นเมื่อก่อนไม่เถียงครับ แต่ตอนนี้ ใช้งานได้ปกติครับ เขียน PHP เหมือนเว็บปกติเลย แต่ต้องดีไซน์ขนาดให้มันพอเหมาะ พอดีเท่านั้น ซึ่งหลังๆมาก็จะเปลี่ยนชื่อ URL มาเป็น
ppc.xxx.com
xxx.com/ppc/
pda.xxx.com
xxx.com/pda/
อะไรประมาณนี้ ซึ่งเห็นเยอะกับ URL ในลักษณะนี้ อย่างของ tarad.com ก็มีให้บริการทั้ง w@p และ Pocket PC ครับ
อย่าง w@p ก็จะเป็นประมาณนี้ http://wap.tarad.com/belong2u
หรือ Pocket PC หรือ PDA ก็จะเป็น http://pda.tarad.com/belong2u
และในปัจจุบันคนเริ่มหันมาใช้กะ URL แบบนี้ครับ
http://m.xxx.xom
ซึ่งสดๆร้อนๆผมเพิ่งได้รับ SMS จาก SCB Easy net ว่าสามารถเข้าเช็คเงินได้ผ่านมือถือได้ที่ http://m.scbeasy.com ก็ลองใช้แล้วครับ โอเคเลยทีเดียว
อ่ะเข้าเรื่อง กรณีที่จะทำเว็บให้มันเลือกอัตโนมัติเลยหล่ะจะทำไง ว่าใช้เครื่องอะไรเปิดจะได้เปิดโปรแกรมให้ถูกต้อง เช่น ใช้ PC เปิดเว็บก็เข้าหน้าเว็บปกติ หากเข้าด้วย Pocket PC ก็ไปในหน้าของ Pocket PC หรือ แม้แต่ดูผ่าน iphone หรือ ipod ก็ไปอีกหน้านึง
หลักการมันก็เพียงแค่นั่งดึงเอาค่า HTTP_USER_AGENT มาทำการตรวจสอบก็เท่านั้นเอง ผมลองเขียนโค๊ด บรรทัดเดียว ดังนี้
<?php echo $_SERVER[’HTTP_USER_AGENT’] ;?>
ผมทดสอบผ่านเครื่อง PC ก็ได้ผลดังนี้
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727; MEGAUPLOAD 2.0)
ผมทดสอบผ่าน HTC Touch ของผมแสดงผลดังนี้
PPC;240×320;HTC_P3450/1.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 Mozilla/4.0 (compatible;MSIE 6.0; Windows CE; IEMobile 7.6)
ได้ค่านี้มาก็เอามาเปรียบเทียบค่าโดยการเขียนฟังก์ชั่นเช็คค่ามันซะ แล้วก็กำหนดให้มัน redirect ไปที่ไหน โดยสามารถเขียนแบบนี้ได้
<?php
function detect_mobile_device(){
// check if the user agent value claims to be windows but not windows mobile
if(stristr($_SERVER[’HTTP_USER_AGENT’],’windows’)&&!stristr($_SERVER[’HTTP_USER_AGENT’],’windows ce’)){
return false;
}
// check if the user agent gives away any tell tale signs it’s a mobile browser
if(eregi(’up.browser|up.link|windows ce|iemobile|mini|mmp|symbian|midp|wap|phone|pocket|mobile|pda|psp’,$_SERVER[’HTTP_USER_AGENT’])){
return true;
}
// check the http accept header to see if wap.wml or wap.xhtml support is claimed
if(stristr($_SERVER[’HTTP_ACCEPT’],’text/vnd.wap.wml’)||stristr($_SERVER[’HTTP_ACCEPT’],’application/vnd.wap.xhtml+xml’)){
return true;
}
// check if there are any tell tales signs it’s a mobile device from the _server headers
if(isset($_SERVER[’HTTP_X_WAP_PROFILE’])||isset($_SERVER[’HTTP_PROFILE’])||isset($_SERVER[’X-OperaMini-Features’])||isset($_SERVER[’UA-pixels’])){
return true;
}
// build an array with the first four characters from the most common mobile user agents
$a = array(
‘acs-’=>’acs-’,
‘alav’=>’alav’,
‘alca’=>’alca’,
‘amoi’=>’amoi’,
‘audi’=>’audi’,
‘aste’=>’aste’,
‘avan’=>’avan’,
‘benq’=>’benq’,
‘bird’=>’bird’,
‘blac’=>’blac’,
‘blaz’=>’blaz’,
‘brew’=>’brew’,
‘cell’=>’cell’,
‘cldc’=>’cldc’,
‘cmd-’=>’cmd-’,
‘dang’=>’dang’,
‘doco’=>’doco’,
‘eric’=>’eric’,
‘hipt’=>’hipt’,
‘inno’=>’inno’,
‘ipaq’=>’ipaq’,
‘java’=>’java’,
‘jigs’=>’jigs’,
‘kddi’=>’kddi’,
‘keji’=>’keji’,
‘leno’=>’leno’,
‘lg-c’=>’lg-c’,
‘lg-d’=>’lg-d’,
‘lg-g’=>’lg-g’,
‘lge-’=>’lge-’,
‘maui’=>’maui’,
‘maxo’=>’maxo’,
‘midp’=>’midp’,
‘mits’=>’mits’,
‘mmef’=>’mmef’,
‘mobi’=>’mobi’,
‘mot-’=>’mot-’,
‘moto’=>’moto’,
‘mwbp’=>’mwbp’,
‘nec-’=>’nec-’,
‘newt’=>’newt’,
‘noki’=>’noki’,
‘opwv’=>’opwv’,
‘palm’=>’palm’,
‘pana’=>’pana’,
‘pant’=>’pant’,
‘pdxg’=>’pdxg’,
‘phil’=>’phil’,
‘play’=>’play’,
‘pluc’=>’pluc’,
‘port’=>’port’,
‘prox’=>’prox’,
‘qtek’=>’qtek’,
‘qwap’=>’qwap’,
’sage’=>’sage’,
’sams’=>’sams’,
’sany’=>’sany’,
’sch-’=>’sch-’,
’sec-’=>’sec-’,
’send’=>’send’,
’seri’=>’seri’,
’sgh-’=>’sgh-’,
’shar’=>’shar’,
’sie-’=>’sie-’,
’siem’=>’siem’,
’smal’=>’smal’,
’smar’=>’smar’,
’sony’=>’sony’,
’sph-’=>’sph-’,
’symb’=>’symb’,
‘t-mo’=>’t-mo’,
‘teli’=>’teli’,
‘tim-’=>’tim-’,
‘tosh’=>’tosh’,
‘treo’=>’treo’,
‘tsm-’=>’tsm-’,
‘upg1′=>’upg1′,
‘upsi’=>’upsi’,
‘vk-v’=>’vk-v’,
‘voda’=>’voda’,
‘wap-’=>’wap-’,
‘wapa’=>’wapa’,
‘wapi’=>’wapi’,
‘wapp’=>’wapp’,
‘wapr’=>’wapr’,
‘webc’=>’webc’,
‘winw’=>’winw’,
‘winw’=>’winw’,
‘xda-’=>’xda-’
);
// check if the first four characters of the current user agent are set as a key in the array
if(isset($a[substr($_SERVER[’HTTP_USER_AGENT’],0,4)])){
return true;
}
}
function detect_iphone(){
if(eregi(’iphone’,$_SERVER[’HTTP_USER_AGENT’])||eregi(’ipod’,$_SERVER[’HTTP_USER_AGENT’])){
return true;
}
}
// example 1 - detect and redirect mobile browsers
if(detect_mobile_device()){
header(’Location: show.php?name=mobile’);
exit;
}
// example 2 - detect and redirect desktop browsers
if(!detect_mobile_device()){
header(’Location: show.php?name=web’);
exit;
}
// example 3 - send iphone to specific site
if(detect_iphone()){
header(’Location: show.php?name=iphone’);
exit;
}
?>
ฟังก์ชั่นก็เขียนในลักษณะแนวๆนี้แทบทั้งนั้น สำหรับฟังก์ชั่นนี้ผมก็เอามาจาก http://www.andymoore.info/php-to-detect-mobile-phones/ ก็สามารถนำไปใช้ได้เลยนะครับหากขี้เกียจเขียนแล้ว
ในตัวอย่างจะเห็นว่าผมเขียน
header(’Location: show.php?name=web’);
เอาไว้ เพื่อทดสอบเวลามันไปไหน และ ส่งค่าไปถูกต้องหรือไม่ โดยคราวนี้ผมได้ลองทดสอบอีกรอบโดยการสร้างไฟล์ที่ชื่อ show.php โดยเขียนโค๊ดแบบนี้
<?php
echo $_GET[’name’];
?>
<br /><br />
<?php
echo $_SERVER[’HTTP_USER_AGENT’] ;
?>
ผมทดสอบผ่านเครื่อง PC ก็ได้ผลดังนี้
web
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727; MEGAUPLOAD 2.0)
ผมทดสอบผ่าน HTC Touch ของผมแสดงผลดังนี้
mobile
PPC;240×320;HTC_P3450/1.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 Mozilla/4.0 (compatible;MSIE 6.0; Windows CE; IEMobile 7.6)
ซึ่งจากการตรวจสอบถือว่าถูกต้องครับ ดังนั้นเราสามารถเอาค่ามาใช้ได้เลยว่าใช้โทรศัพท์รุ่นไหน อย่างไร แล้วจะกำหนดเงื่อไขอะไรต่อไปก็จัดการทำเองเลย หวังว่าคงไม่ยากสำหรับคนที่อยากทำเว็บที่ใช้งานได้ทั้งคอมพิวเตอร์ และ มือถือนะครับ
อ่านเพิ่มเติมเรื่อง w@p ได้จากที่นี่
http://www.expert2you.com/view_article.php?art_id=236
http://en.wikipedia.org/wiki/Wireless_Application_Protocol
