Google Maps Image APIs

Google Maps Image APIs คือบริการสร้างรูปภาพแผนที่จากตำแหน่ง Latitude และ Longitude ที่เราส่งเข้าไปใน API เราสามารถกำหนดขนาดของรูปภาพ ระยะการ Zoom ได้ ใส่ Marker เข้าไปเองได้ นอกจากนั้น ยังสามารถแสดงมุมของของแผนที่ในแบบ Street View ได้อีกด้วย ข้อดีของ Google Maps Image APIs คือ เราสามารถ save รูปภาพที่ได้จากการเรียกใช้ API แล้วนำมาวางไว้บน Server ของเราเอง ทำให้สามารถแสดงผลได้รวดเร็วกว่าการใช้ Google Maps แบบปกติ แต่ข้อเสียก็คือ ไม่สามารถ Zoom หรือโต้ตอบใดๆกับแผนที่ได้ เนื่องจากแผนที่ที่เราจะได้ออกมาจะเป็นเพียงรูปภาพธรรมดาเท่านั้น แต่สำหรับผู้ที่ต้องการเพียงแค่แสดงภาพแผนที่ เพียงเท่านี้ก็เพียงพอกับความต้องการแล้วครับ ลองดูตัวอย่างการใช้งานเบื้องต้นดังนี้ครับ

แบบแรก เรียกว่า Static Map Image API เป็นการแสดงแผนที่ในมุมมองปกติ (Terrain or Sattellite)

<img src="http://maps.googleapis.com/maps/api/staticmap?center=-15.800513,-47.91378&zoom=11&size=200x200&sensor=false">

แบบที่สอง เรียกว่า Street View Image API เป็นการแสดงแผนที่ในมุมมองแบบ Street View

<img src="http://maps.googleapis.com/maps/api/streetview?size=200x200&location=40.720032,%20-73.988354&heading=235&sensor=false">

สำหรับผู้ที่สนใจ สามารถศึกษารายละเอียดเพิ่มเติมได้ที่นี่ครับ http://bit.ly/Y8NcJo

How to output image in PHP

จากบทความก่อนหน้านี้ที่เคยแนะนำเกี่ยวกับการ Resize Image ใน PHP ไปแล้ว สำหรับบทความนี้ผมอยากจะมาแนะนำวิธีการ Output Image ใน PHP ดังนี้คือ เริ่มต้นจากการเตรียม Image File ก่อน (โดยอาจจะเป็น Image File ที่เตรียมไว้ล่วงหน้า หรือมาจากการ Resize) จากนั้นเราจะใช้คำสั่ง readfile เพื่ออ่าน content ที่อยู่ใน file พร้อมกับ output ออกมา แต่เนื่องจาก readfile จะส่งแค่ content ที่อยู่ใน file เท่านั้น ไม่ได้ส่ง header ตามมาตรฐาน HTTP ทำให้ browser ไม่รู้จัก ดังนั้นเราจะต้องสร้าง HTTP Header ขึ้นมาเอง โดยใช้คำสั่ง header โดยในที่นี้เราจะส่ง header 2 ตัว ซึ่งได้แก่ Content-Type และ Content-Length ไปพร้อมกับ Image เดี๋ยวลองดูในส่วนของ coding กันนะครับ

$file = 'images/todd_64x64.jpg';
header('Content-Type: image/jpg');
header('Content-Length: '.filesize($fle));
readfile($file);

ใน code ไม่มีอะไรยาก คงไม่ต้องอธิบายอะไรมาก ก็เริ่มจากการเตรียมตัวแปร จะนั้นก็สร้าง HTTP Header และใช้คำสั่ง readfile เพื่ออ่าน content ที่อยู่ใน file และส่งกลับคืนไป

หากใช้เทคนิคนี้ร่วมกับการ Resize Image จะช่วยให้เราไม่ต้องเตรียม Image สำหรับหน้าจอหลายขนาด เพียงแค่เตรียมภาพสำหรับขนาดหน้าจอใหญ่สุดที่จะรองรับ แล้วเราค่อย Resize โดยการ Scale Down ลง จะทำให้ภาพไม่เสียคุณภาพไปมาก

Open CUE file บน WinAmp v.5.6 ด้วย CUE Player Plugin

ปกติผมชอบฟังเพลงจากแผ่น Audio CD แต่ตอนนี้เครื่องเล่น CD ของผมเสียอยู่ ก็เลยต้องเปลี่ยนมาฟังจากไฟล์ที่ RIP เก็บเอาไว้ใน Hard Disk แทน ปกติผมมักจะใช้ WinAmp เป็น Player ซึ่งโดยทั่วไปก็สามารถเปิดเล่นไฟล์ต่างๆทั่วไปได้ไม่มีปัญหา แต่มาติดที่ไฟล์ที่ผมเก็บเอาไว้ ซึ่งส่วนมากจะเป็น FLAC ซึ่งเป็น compression ในแบบ Lossless (ซึ่งจะให้คุณภาพเสียงคงเดิม หรือใกล้เคียงต้นฉบับมากที่สุด) ซึ่งในเวลา RIP จากแผ่น Audio ผมมักจะชอบ RIP ออกมาเป็น FLAC ไฟล์ใหญ่ๆเพียงแค่ไฟล์เดียว โดยที่จะมี CUE ไฟล์เป็นตัวคอยระบุ Track ที่อยู่ใน FLAC อีกที ซึ่ง Player หลายๆตัวที่ไม่รู้จัก CUE ก็จะไม่สามารถเปิดอ่านไฟล์ CUE ได้ ทำให้ไม่นำข้อมูลของแต่ละ Track ขึ้นมาแสดงให้ดูได้ (แต่สามารถเล่น FLAC ไฟล์นะครับ ยังฟังเพลงได้ตามปกติ  เพียงแต่จะไม่สามารถเลือก Track ที่ต้องการได้) ซึ่งใครที่ใช้ WinAmp v.5.6 เหมือนกับผม และอยากจะทำให้ WinAmp สามารถเปิดไฟล์ CUE ได้ วันนี้ผมมีวิธีมาแนะนำครับ ให้ไป download CUE Player Plugin สำหรับ WinAmp (แต่ต้องดูด้วยนะครับ ว่ารองรับ WinAmp version ไหน) สำหรับตัวที่ผมจะมาแนะนำ จะเป็นตัวที่สามารถใช้งานได้กับ WinAmp v.5.6 เริ่มต้นโดยเข้าไป download ไฟล์ Plugin จากใน Blog นี้ก่อนครับ http://bit.ly/UlJVCz จะได้เป็นไฟล์ ZIP มา จากนั้นให้เปิดไฟล์ ZIP ออกมา จะพบไฟล์ .dll อยู่ในนั้น 2 ไฟล์ ให้ copy ทั้ง 2 ไฟล์ เอาไปวางไว้ใน puglins folder ของ WinAmp จากนั้นให้ปิดแล้วเปิด WinAmp ใหม่ ก็จะสามารถเปิดไฟล์ CUE และสามารถมองเห็น Track ต่างๆได้แล้วครับ

Resize Image using PHP

การพัฒนาเว็บในปัจจุบันจำเป็นที่ต้องแสดงผลบนหลาย screen ที่มีขนาดแตกต่างกัน ไม่ว่าจะเป็น Desktop, Tablet หรือ Smartphone ดังนั้นการ Resize Image ให้เหมาะสำหรับการแสดงผลในแต่ละ screen จึงเป็นสิ่งที่จำเป็น สำหรับในบทความนี้ ผมอยากจะมาแนะนำ PHP Script สำหรับใช้ในการ Resize Image ซึ่งเขียนขึ้นโดย Simon Jarvis สามารถ Resize รูปได้หลายแบบ ไม่ว่าจะเป็นการ Resize โดยยึดจากความสูงเป็นหลัก หรือจะยึดจากความกว้างเป็นหลักก็สามารถทำได้ สำหรับตัว Script มีการใช้ GD Library เป็น Graphic Engine สำหรับทำงานเกี่ยวกับรูปภาพ สำหรับผู้ที่่สนใจ สามารถเข้าไปอ่านบทความ พร้อมทั้ง download script ไปใช้งานได้ที่นี่ครับ http://bit.ly/TUT8x2

เทคนิคการสร้าง Unique Array ใน JavaScript

สำหรับบทความนี้ผมจะมานำเสนอเทคนิคในการสร้าง Unique Array (คือ Array ที่มีค่า Value ไม่ซ้ำกัน) สำหรับเทคนิคที่จะนำมาใช้งานเป็นการปรับปรุงความสามารถของ Class Array ผ่านทาง Prototype ลองดูตัวอย่างนะครับ

 Array.prototype.getUnique = function(){
   var u = {}, a = [];
   for(var i = 0, l = this.length; i < l; ++i){
      if(u.hasOwnProperty(this[i])) {
         continue;
      }
      a.push(this[i]);
      u[this[i]] = 1;
   }
   return a;
}

เมื่อเราปรับปรุงความสามารถของ Array เรียบร้อยแล้ว เราก็จะมาลองใช้งานดูดังนี้ โดยเริ่มจากการประกาศ Array ขึ้นมาก่อน โดยเราจะลองทำให้ Array มีค่าซ้ำๆกันอยู่ ดังนี้ครับ

var arr = [1,2,3,3];  // สังเกตุว่า มี 3 ซ้ำกันอยู่ 2 ตัว

alert(arr.getUnique()); // ค่าที่ Alert ออกมาจะเป็น [1,2,3] สังเกตุว่าค่าที่ซ้ำจะถูกกำจัดออกไปแล้ว

แหล่งที่มา : http://bit.ly/TbfHie

tablesorter - Flexible client side Table Sorting

สำหรับบทความนี้ผมอยากจะมาแนะนำเกี่ยวกับ jQuery Plugin ตัวนึงที่มีชื่อว่า tablesorter ซึ่งมีหน้าที่ในการปรับปรุงความสามารถของ Table ให้สามารถ Sort ได้ โดยเขียน Code แค่ไม่กี่บรรทัด ตาม Style ของ jQuery เดี๋ยวลองมาดูตัวอย่างการใช้งานกันนะครับ

เริ่มต้นด้วยการเรียกใช้งาน jQuery กับ tablesorter กันก่อน

<script type="text/javascript" src="/path/to/jquery-latest.js"></script>
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>

ส่วน HTML tag สำหรับ Table ของเรา ก็หน้าตาประมาณนี้ครับ

<table id="myTable" class="tablesorter">
<thead>
<tr>
    <th>Last Name</th>
    <th>First Name</th>
    <th>Email</th>
    <th>Due</th>
    <th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
    <td>Smith</td>
    <td>John</td>
    <td>jsmith@gmail.com</td>
    <td>$50.00</td>
    <td>http://www.jsmith.com</td>
</tr>
<tr>
    <td>Bach</td>
    <td>Frank</td>
    <td>fbach@yahoo.com</td>
    <td>$50.00</td>
    <td>http://www.frank.com</td>
</tr>
<tr>
    <td>Doe</td>
    <td>Jason</td>
    <td>jdoe@hotmail.com</td>
    <td>$100.00</td>
    <td>http://www.jdoe.com</td>
</tr>
<tr>
    <td>Conway</td>
    <td>Tim</td>
    <td>tconway@earthlink.net</td>
    <td>$50.00</td>
    <td>http://www.timconway.com</td>
</tr>
</tbody>
</table>

คราวนี้มาถึงส่วนสำคัญ คือ การเรียกใช้งาน tablesorter สามารถเรียกใช้งานได้ดังนี้ครับ

$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
); 
      

ในกรณีที่ต้องการตั้งค่าการ Sorting ไว้ล่วงหน้า ก็สามารถทำได้ โดยกำหด options เพิ่มเติมดังนี้

$(document).ready(function() 
    { 
        $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); 
    } 
); 

คราวนี้เมื่อ Table แสดงผล ข้อมูลก็จะถูกเรียงลำดับไว้เรียบร้อย โดยใน Code ที่แสดงให้ดู กำหนดไว้ว่า ให้เรียงลำดับข้อมูลใน columns ที่ 0 และ 1 โดยเรียงในแบบ ascending ครับ

สำหรับผู้ที่สนใจ สามารถศึกษาเพิ่มเติมได้ที่ http://tablesorter.com

moment.js - javascript date library for parsing, validating, manipulating, and formatting dates

moment.js คือ JavaScript สำหรับช่วยในการทำงานเกี่ยวกับวันที่และเวลา มีขนาดเพียง 3.5kb ลองดูตัวอย่างการใช้งานเบื้องต้นดังนี้ครับ

moment().format('MMMM Do YYYY, h:mm:ss a');
moment().format('dddd');
moment().format("MMM Do YY");
moment().format('YYYY [escaped] YYYY');
moment().format();

นอกจากนี้ยังรองรับการแสดงผลวันที่และเวลาเป็นภาษาต่างๆ (แต่ลองดูตัวอย่างจากในหน้าเว็บ ยังไม่เห็นภาษาไทยครับ) สำหรับผู้ที่สนใจ สามารถศึกษาข้อมูลเพิ่มเติมได้ที่ http://momentjs.com/