เมื่อ Web/Windows Developer จะกระแดะไปทำ iOS App ชีวิตมันก็ไม่ง่าย

เมื่อวันเสาร์ที่ผ่านมาไปงาน Bangkok Adobe Camp ได้พบทางอีกทางที่น่าจะโอเคสำหรับคนใช้ Windows แต่อยากทำ App บน iOS แน่นอนว่ามันต้องทำด้วย HTML5 + jQuery Mobile สิ่งที่ต้องการไม่มีอะไรมากมาย ให้มันทำงานได้บนนั้นและ call พวก native api ทั่วๆ ไปได้ เช่นพวกกล้องถ่ายรูป ฯลฯ พวก sync data ต่างๆ

ซึ่งผมก็รู้จักกับ Build.PhoneGap.com มาได้สักพักใหญ่ๆ แล้ว แต่ไม่ทราบว่ามัน Compile in the Cloud ได้ เพราะจำได้ตอนที่ได้ลอง PhoneGap ตอนแรกผิดหวังมารอบแล้ว เพราะว่ามันไม่สามารถ build บน Windows ให้เป็น ipa ได้ เพราะขาด SDK ของ iOS นั้นเอง

แต่เมื่อวันเสาร์พอทราบ ผมก็นั่งๆ ลองๆ หาข้อมูลต่อไป ซึ่งสุดท้ายแล้วการจะ Build ตัว iOS App บน Build.PhoneGap.com ต้องใช้ Signature Certificates ของ Apple ด้วย สุดท้ายวันอาทิตย์ตอนดึกๆ ก็เลยสมัคร Apple iOS Developer ไปซะเลย หมดไป $99 ซะอย่างงั้น (นี่มันลองของจริง เสียเงินแพงมาก!!!)

พอสมัครเสร็จรอ confirm อีเมล ตอนเช้ามาก็ได้ลองของ สิ่งที่ไม่คาดคิดก็เกิดขึ้น ขั้นตอนการสร้าง Certificates บางตัว ต้องใช้ Keychain Access บนเครื่อง Mac …. T_T

ผมก็เลยไปยืมเครื่องพี่ที่ทำงานเค้าทำให้แทน ขั้นตอนมันก็มีประมาณนี้

  • ไป generate ตัว Certificate Signing Request จาก Keychain Access บนเครื่อง Mac ก่อน เสร็จแล้วไป submit ในเว็บ Apple ที่ iOS Provisioning Portal เมนู Certificates
  • รอสักพักจะได้ developer_identity.cer ออกมา แล้วให้ import cert ตอนนี้เข้าเข้า Keychain Access แล้ว Export เป็น Certificates .P12
  • เสร็จแล้วกลับไปที่ เว็บ Apple ที่ iOS Provisioning Portal ก่อนหน้านี้
  • สร้าง Profile ของ Devices
  • สร้าง App ID จาก App IDs
  • สุดท้ายสร้าง Provisioning Profiles เพื่อให้ได้ mobileprovision ออกมา
  • แล้วเอาทั้ง Certificates .P12 และ mobileprovision จากเว็บ Apple ที่ iOS Provisioning Portal มา submit ที่ Build.Phonegap.com

พอได้ Certificates .P12 และ mobileprovision แล้วอะไรก็ไม่ยากแล้วครับ ^^/

เดี่ยวขอเวลาไปลองเล่นสักแป็บ ^^

ร่วมด้วยช่วยกัน Say No To IE 6! สำหรับเว็บที่ใช้ jQuery (และพวก Prototype JavaScript ตัวอื่น ๆ ด้วย)

จาก entry หมดเวลา Internet Explorer 6 แล้ว เลิกใช้มันได้แล้ว !!! และจาก Campaign “Say No To IE 6!” จากเว็บ SaveTheDevelopers.org นั้นเค้าให้เอา code ด้านล่างนี้ไปใส่

  1. <script src="http://www.savethedevelopers.org/say.no.to.ie.6.js"></script>

แต่ถ้าเว็บใครใช้ jQuery นี่อาจจะไม่ได้ แบบ Theme K2 ของผม วิธีอีกแบบที่สามารถทำได้ และทำงานร่วมกับ jQuery ได้ก็คือใช้ CSS – Conditional comments นั้นเอง โดยกำหนดไว้ว่าถ้า IE ที่ version น้อยกว่า 7 ให้โชว์ตัว popDown นี้ขึ้นมาครับผม

  1. <!--[if lt IE 7]>
  2. <script type="text/javascript" src="path/to/savethedevelopers.js"></script>
  3. < ![endif]-->

เสร็จแล้วในไฟล์ savethedevelopers.js ก็ปรับแก้เป็นแบบนี้ครับ

javascript

  1. jQuery(document).ready(function(){
  2.     var now = new Date();
  3.     var time = now.getTime();
  4.     var div = document.createElement('a');
  5.     var id = 'saynotoie6_div_' + time;
  6.     div.setAttribute('id',id);
  7.     div.setAttribute('href','http://www.savethedevelopers.org/');
  8.     div.setAttribute('target','_blank');
  9.     div.style.display = 'block';
  10.     div.style.color = '#1d1d1d';
  11.     div.style.textAlign = 'left';
  12.     div.style.fontFamily = 'Arial';
  13.     div.style.fontSize = '11px';
  14.     div.style.background = 'url(http://webhost.domain/path/to/savethedevelopers/PopDown.gif)';
  15.     div.style.padding = '0';
  16.     div.style.position = 'absolute';
  17.     div.style.top = '0';
  18.     div.style.right = '40px';
  19.     div.style.zIndex = '999999';
  20.     div.style.width = '330px';
  21.     div.style.height = '63px';
  22.     div.style.marginTop = '-80px';
  23.     div.style.filter = 'alpha(opacity=95)';
  24.     document.body.appendChild(div);
  25.    
  26.     var animate = function(){
  27.         var myDiv = document.getElementById(id);
  28.         var value = parseInt(myDiv.style.marginTop)
  29.         myDiv.style.marginTop = value + 1 + 'px';
  30.         if(parseInt(myDiv.style.marginTop) < -1){
  31.             var timer = setTimeout(animate,30 * 80/Math.abs(value) * .27);
  32.         }else{
  33.             var timer = setTimeout(hide,25000);
  34.         }
  35.     }
  36.    
  37.     var hide = function(){
  38.         var myDiv = document.getElementById(id);
  39.         var value = parseInt(myDiv.style.marginTop)
  40.         myDiv.style.marginTop = value - 1 + 'px';
  41.         if(parseInt(myDiv.style.marginTop) > -80){
  42.             var timer = setTimeout(hide,1.4 * 80/Math.abs(value) * 3.70);
  43.         }
  44.     }
  45.    
  46.     setTimeout(animate,1000);
  47. });

ลองเทียบกับของเก่าเค้าก็ได้นะครับ อันนี้ผมปรับให้โชว์ไว้สัก 25 วินาทีครับผม ส่วนถ้าเอาไปใช้กับ mootools หรือตัวอื่น ๆ ก็เปลี่ยนการ windows.onload เป็นแบบอื่น แทนการใช้ jQuery(document).ready(); ครับ

เรามาร่วมด้วยช่วยกันประกาศครับผม เอาพวกไม่ได้มาตรฐานออกไปจากสังคมสักทีนึงครับผม

เมื่อ jQuery อยู่ร่วมโลกกับ Prototype/Mootools ไม่ได้ (โดยเฉพาะใน Drupal)

ถ้าใครใช้ jQuery, Prototype และ Mootools นั้นจะรู้ว่ามี namespace ตัวนึงคือ $ ซึ่งจะเป็นตัวอ้างอิงเสมือนเวลาอ้างอิงการทำงานใด ๆ ใน ถ้าอ่านในเว็บ jQuery ก็จะบอกไว้เลยว่า

By default, jQuery uses “$” as a shortcut for “jQuery”

ปัญหาก็คือ …..

มันดันใช้วิธีที่ไปเหมือนกับ Prototype, MooTools และ YUI นั้นดิ

ทำให้เวลาเอามาใช้ร่วมกันมันจะตีกันสนุกสนานเลยหล่ะ วิธีแก้ไขก็คือให้ jQuery หลีกทางให้กับตัวอื่น ๆ ซะ

จาก

javascript

  1. <script type="text/javascript" src="prototype.js" />
  2. <script type="text/javascript" src="mootools.js" />
  3. <script type="text/javascript" src="jquery.js" />
  4. <script type="text/javascript">
  5. // ต้องใช้ jQuery
  6. $(document).ready(function(){ $("div").hide(); });
  7. // ต้องใช้ Prototype/Mootools
  8. $('someid').style.display = 'none';
  9. </script>

ถ้าเป็นแบบนี้มันจะใช้งานไม่ได้ ครับ จะเกิดการตีกันระหว่างทั้ง 3 ตัวครับ เราต้องเปลี่ยนมาเป็น

javascript

  1. <script type="text/javascript" src="prototype.js" />
  2. <script type="text/javascript" src="mootools.js" />
  3. <script type="text/javascript" src="jquery.js" />
  4. <script type="text/javascript">
  5. // เพิ่มบรรทัดนี้ลงไป
  6. jQuery.noConflict();
  7. // แล้วใช้ jQuery จาก $ เป็น jQuery(...) แทน
  8. jQuery(document).ready(function(){jQuery("div").hide();});
  9. // ส่วน Prototype/Mootools ใช้ $(...) ได้ตามปกติ
  10. $('someid').style.display = 'none';
  11. </script>

แนวทางการแก้ปัญหาก็ ok นะ แต่ …..

ใน Drupal หล่ะ ถ้าเราเอามาใช้เนี่ยทำไง

โดยตัว Drupal 5.2 แล้วมี jQuery 1.0.1 ใส่มาด้วย แต่ปัญหาคือมันดันไม่มี noConflict มาให้ ตอนนั่งแก้ปัญหา นั่งงงไปพักนึง เลยไปนั่งไล่แกะ จนรู้ว่าต้องมา upgrade เป็น jQuery 1.2 เสียก่อน เลยจัดการเอามาใส่ทับลงไปใน /misc แทนตัวเก่า

แล้วทำการแก้ไขไฟล์ต่าง ๆ ที่ Drupal นั้นใช้ jQuery ซึ่งได้แก่

  • misc/autocomplete.js
  • misc/collapse.js
  • misc/drupal.js
  • misc/progress.js
  • misc/tableselect.js
  • misc/textarea.js
  • misc/upload.js
  • misc/update.js
  • misc/farbtastic/farbtastic.js

โดยทำการ replace ‘$(‘ เป็น ‘jQuery(‘ แล้วทำการใส่ JavaScript ตัวนึงลงไปคือ

javascript

  1. jQuery.noConflict();

โดยเอาไปใส่ไว้ด้านล่าง Durpal $scripts ที่ Theme ของเรา ตามด้วยการใส่ mootools.js ไปก่อนหน้า Drupal $head

เฮ้อ ….. เล่นซะมึนไปครึ่งวัน

การมีมาตรฐานและเอามาใช้ร่วมกันนี่ยากเหมือนกันนะเนี่ย ยิ่ง JavaScript ที่มี Prototype หลายค่ายเหลือเกินยิ่งแล้วใหญ่ ความเข้ากันได้ยิ่งยากเข้าไปอีก แถมแต่ละตัวก็ ok ในเรื่องการใช้งาน แต่ว่าบางตัวมีข้อดีแต่ต่างกัน บางตัวใช้งานบางอย่างได้ดี และง่าย บางตัวทำแบบอีกตัวก็ได้ แต่ง่ายกว่ามาก เลยต้องหาจุดลงตัวของมันไป ทำให้ต้องมาปวดหัวกันไป แต่ก็นะเอามาใส่ลงไปในงานของเรา เพื่องานที่ออกมาดีที่สุด และง่ายที่สุดด้วย (ก็มีให้ใช้นิ)

อ้างอิงจาก