วันอาทิตย์, กุมภาพันธ์ 16, 2557

ทดลองเขียน Java Script สำหรับเปลี่ยน Background ตาม Flickr Interesting List

หลังจากไม่ได้ทำ Project ของตัวเองมานานมาก วันนี้ขอเริ่มนิดๆ หน่อยๆ ก่อนจะจัดโครงการใหญ่ โดยหยิบโจทย์ว่า "ไม่อยากให้หน้า Login มันน่าเบื่อ" ขึ้นมา จากนั้นก็วางแผนแก้ปัญหาโดยจะหาภาพสวยๆ จาก Flickr แล้วก็ไปพบว่า การหาภาพที่น่าสนใจบน Flickr แบบสุม แล้วจะออกมาสวยมันยากมาก

โชคดีที่ Flickr มันทำ Interesting List รายวัน ไว้ให้ http://www.flickr.com/explore/interesting/

จากนั้นก็หาทางอ่าน feed ออกมา แต่มันดันไม่ทำเป็น feed แต่ต้องใช้ API ในการเรียก เลยต้องมาอ่าน API ของ Flickr อีกหน่อย โชคดีอันที่สองคือมันมีคำสั่งสำหรับอ่าน interesting list มาให้เลย แต่โชคร้ายที่มัน return เป็น xml ไม่ใช่ json

แต่ด้วยความบังเอิญเราดันไปขอ json จากฟังก์ชั่นนั้น แล้วมันดันมีส่งกลับมา >_< ก็ดีใจไป แต่ก็เจ็บใจที่โดนหลอก ไปตามหา xml lib บน Java Script อยู่ตั้งนาน

ขั้นตอนต่อมาก็ไปหาท่าสำหรับแสดง background บนเว็บ แบบ Responsive เพราะเราไม่รู้ว่าหน้าจอผู้ใช้ใหญ่แค่ไหน

จบบน jsfiddle

ตอนแรกกะจะใช้ image-background ใน <body> แต่กลายเป็นว่าควบคุมได้ยาก สุดท้ายเลยกลายเป็น <image> แทน

ถ้าสนใจ code ลองดูที่ http://jsfiddle.net/apirak/u4dbb/2/ ครับ


วันพฤหัสบดี, กันยายน 29, 2554

แสดง Library ใน Lion

ใน Lion ทาง Apple ตัดสินใจที่จะซ่อน Folder Library ไปซะ เข้าใจว่าผู้ใช้ส่วนใหญ่จะรู้สึกดี เพราะไม่มีมันมารบกวน แต่ผู้ใช้ส่วนน้อยอย่างเรากลับมีปัญหา ต้องคอยเปิด terminal เป็นประจำ

ทางแก้ที่หนึ่งในกรณีที่ไม่ได้ใช้ Library เป็นประจำ ให้เราไปที่โปรแกรม Finder แล้วเลือก Menu Go พร้อมกดปุ่ม option หรือปุ่ม alt ค้างไว้ จะทำให้ Library โผล่ออกมา

ภาพแสดง Menu Go เมื่อกด option ค้างไว้

แต่ถ้าใครใช้ Library เป็นชีวิตประจำวัน ให้ไปที่โปรแกรม Terminal แล้วพิมพ์ดังนี้

chflags nohidden ~/Library/

ต่อไปเวลาเปิด Finder มันจะไม่ซ่อน Library อีกต่อไป และถ้าต้องการให้มันกลับไปซ่อนเหมือนเดิม ก็ใช้คำสั่ง

chflags hidden ~/Library/

เท่านี้เราก็เข้าถึง Library ได้สบายใจเฉิบเหมือนเดิมแล้วครับ

วันเสาร์, กันยายน 03, 2554

แสดง branch name ใน terminal

ปัญหาหนึ่งเวลาที่เราใช้ Git คือ เราไม่แน่ใจว่าตัวเองอยู่ใน branch ไหน ปกติแล้วเราจะพึ่ง

git status หรือ git branch

พอต้องทำทุกครั้งก็จะเริ่มหน่าย วันนี้ไปเจอหน้าจอ termianl ของน้องเก้า @neokain เลยได้ script สำหรับแสดง ชื่อ branch บน terminal มา


หลังจากปรับเล็กน้อย ก็ได้ script แบบนี้ครับ


function parse_git_branch {
  git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/(\1)/'
}

GREEN="\[\033[0;32m\]"
YELLOW="\[\033[0;33m\]"
GRAY="\[\033[1;30m\]" 

PS1="$GREEN\w$YELLOW \$(parse_git_branch)$GRAY \n\$ "
เอา script ชุดนี้ใส่ไว้ใน file ~/.bash_profile ตอนที่เปิด termianl ขึ้นมาใหม่ ก็มีจะชื่อ branch ขึ้นมาให้เราดูครับ

วันอังคาร, มิถุนายน 07, 2554

เปิด Sub lime text จาก terminal

เพราะคุ้นเคยกับ "mate ." และ "mvim" ทำให้เคยตัว และรู้สึกว่า Sub lime text มันควรจะทำได้สิ

หน้าตา sub lime text 2

ลองค้นดูพบวิธีง่ายๆ โดยการแก้ไฟล์ ~/.bash_profile แล้วเพิ่มบรรทัดนี้ลงไป

alias subl='open -a "Sublime Text 2"'


หลังจากนี้ถ้าต้องการเปิดไฟล์ ก็ให้สั่ง

subl application.rb


หรือต้องการเปิด Folder ปัจจุบันก็ให้สั่ง

subl .

เท่านี้ก็ได้ slt แบบ mate แล้ว

edit: แก้ comment เป็น subl ให้ตรงกับ command ใน Sublim Text 2.app

เปิด Terminal ใหม่บน Folder เดิม

บน Mac เวลาทีเปิดหน้าต่างบน Terminal ใหม่ มันจะกลับมาที่ Home ทุกครั้ง ตอนแรกๆ ก็คิดว่าพอรับได้ หลังๆ พบว่าสำหรับ Developer หรือ Admin เราต้องการเปิด Terminal ใหม่ใน Folder เดิม มากกว่า Folder Home แต่ก็ไม่รู้จะแก้ยังไง จะใช้ท่ายากก็ขี้เกียจ

ล่าสุดผมเปลี่ยนมาใช้ iTerm 2 แทน Terminal เพราะมันแบ่งหน้าจอได้เหมือน Terminator

แบ่งหน้าจอบน iterm 2


ทำให้พบว่าปัญหาที่ค้างมาสี่ห้าปี มีทางออกง่ายๆ แล้วโดยตัว Preference ของ iTerm 2 นั่นเอง

หน้า preference ของ iterm 2

ขั้นตอนมีดังนี้
  1. เปิด Preference ของ iTerm 2 
  2. แล้วกด Profile แล้วเลือก Tab General
  3. เลือก Reuse previous tab's directory  ใน  Work Directory

เสร็จแล้วครับ หลังจากนี้ไม่ว่าจะเป็นการเปิด Tab ใหม่ หรือ split หน้าจอ มันจะอยู่ใน Folder เดิมตลอด

วันพุธ, พฤษภาคม 18, 2554

วิธีแก้ปัญหา Photoshop สั่ง Save for web แล้วทำให้สีเพี้ยน

ปัญหาของสีเพี้ยนตอนที่ save รูปจาก Photoshop ไปเป็น Png หรือ Jpeg เป็นเพราะว่า เราตั้ง Profile ของสีที่จะใช้กับสีที่แสดงบนหน้าจอเป็นคนละ Profile กัน ทำให้ได้ผลดังรูป


compare_image_save_for_web
ภาพแสดงความแตกต่างของ original กับ save for web

ภาพล่างคือภาพที่ได้จากการ save for web ส่วนภาพบนเป็นต้นฉบับ จะสังเกตุว่าภาพล่างสีซีดกว่าภาพบน ทางแก้คือต้องปรับ Color Profile โดยเข้าไปที่ Edit > Color Settings จากนั้นเลือก Monitor Color ตามรูป

color_setting
ภาพแสดงการตั้งค่า Color profile

จากนั้นตอนแสดงผลให้เราปรับ Proof Setup ให้เป็น Monitor RGB  โดยเลือกที่เมนูตามภาพ

select_color_profile
ภาพแสดงการเลือก Monitor RGB

จากนั้นตอนที่เราสั่ง save for web ให้เราระวัง อย่าไปสั่ง convert to sRGB เพื่อให้แน่ใจว่าภาพที่ออกมาจะเหมือนกับที่เราออกแบบไว้

unselect_convert_to_srgb
ภาพแสดงว่าไม่ต้องเลือก Convert to sRGB

ที่ค่าเริ่มต้นของ Photoshop ไม่ได้เป็น RGB แต่เป็น CMYK คาดว่าเป็นเพราะบน Mac ผู้ใช้มักจะทำงานสิ่งพิมพ์มากกว่างานที่ออกหน้าจอทำให้เราต้องมาปรับค่า view กันทุกเครื่องไป

ดูรายละเอียดเพิ่มเติมได้ที่ embedded JPEG profiles

ออกแบบ Action Bar ให้ Android Honeycomb

ถ้าเราออกแบบโปรแกรมตาม Pattern ที่ Platform นั้นๆ กำหนด จะช่วยให้ผู้ใช้ของเรา สามารถนำประสบการณ์ที่เคยเห็นในโปรแกรมอื่นๆ ใช้ในการทำความเข้าใจกับ Application ของเราได้ทันที การจะทำอะไรที่แตกต่างต้องคิดแล้วคิดอีกว่าคุ้มหรือไม่

วันนี้ดูวีดีโอ "Designing and Implementing Android UIs for Phones and Tablets" ของงาน Google IO แล้วไปเจอ Pattern เท่ๆ ของ Honeycomb เข้า ในวีดีโอเล่าว่าเราควรใช้ Action bar ในการตอบคำถามพื้นฐานให้กับผู้ใช้ โดยเรียงเป็นลำดับว่า

  1. ฉันอยู่ที่ไหน?
  2. ฉันเห็นอะไรได้บ้าง?
  3. ฉันทำอะไรได้บ้าง?

ลองมาดูหน้าตาของ Action bar ที่ Google วาง Pattern ไว้ เพื่อตอบโจทย์ข้างต้น

android_ux_concept
หน้าจอ wireframe ของ Action Bar

จะเห็นว่าทั้ง Mobile และ Tablet ต่างก็มี Action Bar ทั้งคู่ ถ้าเป็น Mobile ตัว Action bar จะถูกวางเอาไว้ทั้งด้านบน และด้านล่าง ส่วนของ Tablet จะวางไว้ด้านบนสุดวาดยาวจากซ้ายไปขวา แบบออกได้เป็นสามส่วนเพื่อตอบโจทย์ตามลำดับ

1. ฉันอยู่ที่ไหน หรือ ฉันอยู่ในโปรแกรมไหน

android_ux_example_3
หน้าจอแสดงตัวอย่างตำแหน่ง Logo ของโปรแกรม

Google เลือกตอบคำถามโดยวาง Logo ของโปรแกรมไว้ที่ด้านซ้ายสุดของ Action bar โดยคาดว่าผู้ใช้น่าจะเคยชินกับการอ่านหนังสือจากซ้ายไปขวา ดังนั้นคำถามแรกจึงวางไว้ด้านซ้ายสุด

2. ฉันเห็นอะไรได้บ้าง

android_ux_example_2
ภาพแสดงตัวอย่างเมนูของโปรแกรม

ถัดจาก Logo จะเป็นเมนูเพื่อตอบโจทย์ว่าเราสามารถดูอะไรได้บ้างในโปรแกรมนี้ เช่นโปรแกรมปฏิทินจะแสดงเมนูว่าเราสามารถเลือกดูปฏิทินได้เป็นรายวัน รายสัปดาห์ และรายเดือน โดยแอบบอกเราเล็กน้อยว่าตอนนี้เราดูรายสัปดาห์อยู่นะ ส่วนโปรแกรมแผนที่ จะไม่ได้บอกเป็นเมนูแต่จะแสดงเป็นช่องค้นหา ผมเดาว่าต้องกาสื่อว่าจะดูอะไรก็ค้นเอาได้เลย

3. ฉันทำอะไรได้บ้าง

android_ux_example_1
ภาพแสดงตัวอย่าง Action Button ทางด้านขวา

ส่วนสุดท้ายจะวางชิดขวาสุด ทำหน้าที่บอกว่าเราสามารถทำอะไรกับโปรแกรมนี้ได้บ้าง เช่น ส่งจดหมาย ลบจดหมาย เป็นต้น หากไม่สามารถแสดงชุดคำสั่งทั้งหมดได้ใน Action bar ทาง Google ได้กำหนดให้ใช้ Icon รูปเมนู วางไว้ด้านขวาสุดของ icon ทั้งหมด

พอได้เห็นแบบนี้ก็ทำให้คาดหวังได้ว่าผู้ใช้จะสามารถใช้งานโปรแกรมบน Android Honeycomb ได้ง่ายขึ้นเพราะโปรแกรมดีๆ น่าจะทำตาม Guide line ของ Platform

ถ้ามาดู iOS จะพบว่าไม่มี concept ของ Action Bar แบบ Android แต่จะมีตัว Navigation bar ให้ใช้ ซึ่งวิธีการใช้งานก็ไม่ได้กำหนดไว้อย่างชัดเจนใน Human Interface Guideline แต่ถ้าสังเกตุก็จะพบแนวทางการใช้คร่าวๆ

icons_in_ipad_mail
ภาพแสดง Navigation bar ของ iOS

ด้าน ซ้ายมือจะใช้วางคำสั่งในการไปยังเนื้อหาที่ต้องการ เทียบได้กับ View Detail ของ Android ตรงกลางจะเอาไว้บอกว่าเราอยู่ที่ไหน ส่วนด้านซ้ายมือจะเหมือนกัน คือเอาไว้ใส่คำสั่งที่สามารถทำกับเนื้อหาที่เลือกอยู่ ส่วนการตอบคำถามว่าเราอยู่ในโปรแกรมไหนจะไม่มีใน iOS ส่วนเหตุผลลองเดากันดูนะครับ

โดยส่วนตัวผมชอบแนวคิดของ Pattern นี้บน Android นะครับ แต่ยังติดอยู่สองที่

  1. แนวคิดนี้บน Mobile อาจจะไม่เหมาะ เพราะพื้นที่แสดงผลบนมือถือมีน้อยมาก การมากำหนดตำแหน่งแบบนี้ทำให้หลายคนปรับวิธีประหยัดพื้นที่ได้ลำบาก เช่นการที่ต้องแสดง Logo ไว้ด้านบนซ้ายเสมอ จะไม่คุ้มเท่าไหรในหลายโปรแกรม หรือการที่ให้ชุดคำสั่งที่เหลือขึ้นมาเป็น popup ด้านล่าง ทำให้ไม่สามารถใส่ คำสั่งที่เหลือได้มากนัก ถ้าขึ้นมาเป็น Table View น่าจะง่ายกว่า
  2. แนวคิดนี้ยังกำกวมอยู่ เช่น ปุ่ม search ของ map ถูกตัดสินใจให้อยู่ที่ View Detail ส่วน search ของ youtube จะอยู่ที่ Action button เป็นต้น ทาง Google อาจจะต้องสร้างโปรแกรมตัวอย่างที่ล้อตามแนวคิดของตัวเองมากกว่านี้ เพื่อให้นักพัฒนาสามารถเข้าใจ แนะนำมาประยุกต์ใช้กับโปรแกรมของตัวเองได้ง่ายขึ้น

แต่อย่างไรก็ตามถ้ายังไม่ได้จับตัวจริง ก็ยังสรุปไม่ได้ ถ้าเดินหาเล่นตามบิกซีได้ จะกลับมาวิเคาะห์เพิ่มเติมนะครับ

วันพุธ, ธันวาคม 15, 2553

Land Meter


LandMeter White

App Store small
Price: free

Description
Land Meter is simple car pitching and rolling monitor for your iPad

Screen short

iPad Screenshot 1
iPad version

LandMeter iPhone
iPhone version

Feature
  • Monitor Pitching and Rolling for your car
  • Show Pitching and Rolling degree
  • Warning by color when danger
  • Reset button for automatic calibration

Waiting feature
  • Warning by sound
  • Map
  • Recoder
  • Support iPhone

Note
iphone version is waiting for approve ;) It's universal application. You can use one for two device.

Any suggestion or comment is welcome

วันพุธ, ธันวาคม 08, 2553

Working on new iPad applicaiton

กำลังทดลองทำโปรแกรม Land Meter สำหรับคนที่ขับรถวิบาก

LandMeter

ความยากอยู่ตรงที่ iPad มันไม่ได้ส่งค่าองศามาให้เราตรงๆ แต่ให้มาเป็นค่าที่แต่ละแกนของ iPhone ถูกแรงโน้มถ่วงกระทำ

Accelerometer axes

ถ้าเราเอียง iPhone แกน X, Y, Z จะถูกแรงโน้มถ่วงกระทำไม่เท่ากัน เมื่อเกิดความเปลี่ยนแปลงเจ้า Accelerometer จะส่งค่าของทั้งสามแกนมาให้ เราก็จับเข้า atan2(y,x) สำหรับหา degree รูปหลังรถ และ atan2(x,z) สำหรับรูปด้านข้าง เมื่อได้ค่า degree เราก็เอามาแปลงเป็นองศาด้วย

radians = degrees * Pi / 180;

เมื่อได้องศา เราก็เอามาใช้หมุนรูปรถทั้งสองแกนอีกทีนึง เป็นอันเสร็จ สำหรับโปรแกรม Land Meter ตอนนี้ส่งขึ้น App Store ไปแล้วรอการอนุมัติอยู่ คาดว่าวันอังคารหน้า น่าจะได้ลอง Download กัน

ตัวทำมาทดลอง iPad ก่อนสำหรับ version iPhone น่าจะตามมาในอีกหนึ่งอาทิตย์เพราะต้องรอให้ Version นี้อนุมัติก่อน ถึงจะส่งอีก Version ขึ้นไปได้