jQuery – @FordAntiTrust

เมื่อวันเสาร์ที่ผ่านมาไปงาน 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 แล้วอะไรก็ไม่ยากแล้วครับ ^^/

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

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

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

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

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

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

jQuery(document).ready(function(){
var now = new Date();
var time = now.getTime();
var div = document.createElement('a');
var id = 'saynotoie6_div_' + time;
div.setAttribute('id',id);
div.setAttribute('href','http://www.savethedevelopers.org/');
div.setAttribute('target','_blank');
div.style.display = 'block';
div.style.color = '#1d1d1d';
div.style.textAlign = 'left';
div.style.fontFamily = 'Arial';
div.style.fontSize = '11px';
div.style.background = 'url(http://webhost.domain/path/to/savethedevelopers/PopDown.gif)';
div.style.padding = '0';
div.style.position = 'absolute';
div.style.top = '0';
div.style.right = '40px';
div.style.zIndex = '999999';
div.style.width = '330px';
div.style.height = '63px';
div.style.marginTop = '-80px';
div.style.filter = 'alpha(opacity=95)';
document.body.appendChild(div);

var animate = function(){
var myDiv = document.getElementById(id);
var value = parseInt(myDiv.style.marginTop)
myDiv.style.marginTop = value + 1 + 'px';
if(parseInt(myDiv.style.marginTop) < -1){
            var timer = setTimeout(animate,30 * 80/Math.abs(value) * .27);
        }else{
            var timer = setTimeout(hide,25000);
        }
    }

    var hide = function(){
        var myDiv = document.getElementById(id);
        var value = parseInt(myDiv.style.marginTop)
        myDiv.style.marginTop = value - 1 + 'px';
        if(parseInt(myDiv.style.marginTop) > -80){
var timer = setTimeout(hide,1.4 * 80/Math.abs(value) * 3.70);
}
}

setTimeout(animate,1000);
});

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

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

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

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