Claire's Blog – 第 47 頁 – I'm a mother of two precious kids and a professional programmer.

相關技術

CDN – 內容傳遞網路

Post By Claire Chang 2013-01-10 下午 1:56

CDN(內容傳遞網路)

在wiki上的解釋是:
內容傳遞網路（Content delivery network或Content distribution network，常簡寫成CDN）是指一種透過網際網路互相連接的電腦網路系統，提供高效能、可擴展性、及低成本的網路將內容傳遞給使用者。

簡單來說，CDN就是在全球各地怖署節點，讓使用者可以就近從最近節點取得快取檔案，像是我們架網站時，可把一些共用的如JQuery函式庫、靜態圖片等檔案放置到CDN伺服器(如這篇文章: [JQuery]使用CDN來載入JQuery)來加快網站的讀取速度。也可以避免被攻擊者使用DDos的方式來癱瘓伺服器。

CDN的功能及優點包括

高效能：CDN可以讓使用者「就近取得檔案」，內容提供者事先將檔案推到全球的 CDN 節點，在台灣的下載者儘量從台灣取得檔案，在日本或香港的下載者也儘量從當地的伺服器取得檔案。並且因為下載者透過 CDN 下載靜態元件，可以減少原始 server 的負荷。
ps: 要決定使用者到那個節點要決定使用者應該要到哪組 server 通常有這些方法：
1. GeoDNS
2. Anycast
3. HTTP Redirect (會比較差)
高可靠度：當今天主要網站當機了，使用者可以從CDN的備援網站去讀取檔案，不至於讓整個網站癱瘓。也可以避免DDos的大量機器人攻擊來癱瘓網站。
低成本：因為內容提供者不需要在一個 data center 上建立非常粗的水管。舉例來說，如果傳遞需要 100Gbps 的流量，利用 CDN 架構(將資料提供者分散在世界各地)，每個 data center 也許只需要 5Gbps 的流量。由於十個 10Gbps 網路與 100Gbps 網路的成熟度不同，成本也會不相同。

CDN提供的服務者包括Akamai、Amazon CloudFront等等(請見下圖)

這是我從別的網站找來的CDN運作示意圖
原本我們讀取網站的模式如下圖，我們會先去和DNS從網址要到伺服器ip，
再去用ip和我們的網頁伺服器讀取網頁內容

clip_image010
使用CDN的架構後，使用者用網址和DNS伺服器要ip位置時，
CDN的DNS伺服器會從使用者所傳來的資訊，去判別離使用者最近的CND節點，
然後使用者再去和該CDN伺服器要取檔案，
因此當某個節點壞掉時，網站還是可以藉有其他節點去正常運作

clip_image012

下面有一些我找的資源

CSS css

CSS Vertical Align(用純CSS解決div垂直置中)

Post By Claire Chang 2013-01-08 下午 3:27

本文出處:http://blog.yam.com/hanasan/article/35806444

本次要介紹的是CSS垂直置中(Vertical Align with css)的完整解決整理。
說實話這並不太容易，雖然不像水平置中 {margin:0 auto;} 那樣單純, 但仍有幾種方式可以作到，以下共有五種方式一一介紹。

每種使用方式各有其優、缺點，端看自己要置中的內容是「區塊」或是「文字」來取捨。

方法一

使用CSS table-cell屬性來完成，什麼是table-cell？簡單說就是針對一些html object附于它table的屬性(詳見此)，如果曾經使用過table來排版的網頁開發者，應該知道td的既有屬性valign，古早以前根本不會有垂直置中的問題，因為td下個 valign=”middle”就行了。而table-cell即是可以將div模擬成表格(table)的儲存格(td)，讓原本不存在vertical-align的div可以使用。

Sample Code

HTML

<div id="wrap">
    <div id="cell">
        <div id="content">
            要被置中的內容
        </div>
    </div>
</div>

CSS

#wrap { display:table; }
#cell { display:table-cell; vertical-align:middle; }

優點:

因為是CSS2.1釋出的標準屬性，正規的解決方法。
被置中的內容增加後，垂直置中的block會自動調整。

缺點:

支援性不佳，IE8以上才支援(IE7以下不支援display:table語法)
太多巢狀標籤(有種回到過去table排版的fu)

方法二

此方法適用在定義了絕對定位(absolute)的div, 將其top設置為50%, 再設置與div高度一半的「負」值margin-top，意謂著使用本方法必須固定div的高度。

Sample Code

HTML

<div id="center">
    要被置中的內容
</div>

CSS

#center {
    position:absolute; height:400px; top:50%; margin-top:-200px; /* div高度的一半 */
}

優點:

程式碼簡短，且無需為了「垂直置中」的目的多寫巢狀標籤
所有browser都支援，泛用性高

缺點:

div高度需固定，若是動態資料有可能超過的話需要加上overflow:scroll讓溢出的內容可以看見

方法三

在需要被垂直置中的div前放置另一個div，設置為height:50%，margin-bottom:-contentHeight(目標高度的負值)

Sample Code

HTML

<body>
    <div id="floater"></div>
    <div id="middle">
        要被置中的div
    </div>
</body>

CSS

html, body {
    margin:0; padding:0; height:100%;
}
#floater { float:left; height:50%; margin-bottom:-200px;
    width:1px; /* only for IE7 */
}
#middle {  clear:both; height:400px; position:relative; }

優點:

所有browser都支援(Note:IE7必須在#floater追加width:1px才work!)
當內容增加時，垂直置中的div不會被切掉，而是會自動出現scroll-bar

缺點:

沒甚麼缺點，真要說就是一樣高度得固定。另外若置中物件的父層是body, 即使視窗被USER拖曳拉小了，div也一樣會唯持置中(笑)

方法四

本法使用在同樣是絕對定位(absolute)的div上，固定高度，並定義top:0; bottom:0; 和廣為被應用的
{ margin:0 auto; }作div水平置中原理類似

Sample Code

HTML

<div id="middle">
    我要被置中啦~
</div>

CSS

#middle {
    position:absolute; width:70%; height:280px;
    top:0; bottom:0; left:0; right:0; margin:auto;
}

優點:

簡單

缺點:

不支援IE7(含)以下
如果容器不夠裝內文, 也不會有scrollbar自動出現…

方法五

此方法適用於「單行」文字的垂直置中(EX:要作英文網站大Slogan時), container除了設置高度之外，同時也將行距(line-height)設置與高度相等。

Sample Code

HTML

<div id="content">
    一行文字要被置中啦
</div>

CSS

#content { font-size:32px; text-align:center; height:150px; line-height:150px; }

優點:

簡單
所有browser都支援(even IE6!)
即使內容溢出也不會被切掉

缺點:

只有單行文字適合
若div寬度固定，一當有長文字爆行時會很醜，務必小心使用。

以上列出五種使用純CSS(不加js)達成div vertical align(垂直置中)的藥方，可以綜合搭配使用，也可視情況單獨使用…

CSS, JQuery jquery, selector

JQuery選擇器

Post By Claire Chang 2013-01-08 下午 1:55

1. 選擇所有的table

$(document).ready(function() {
     $('table tr').filter(function(index){
          //....
     });
});

2. 選擇第N行(若有很多table則只會選第一個table的第N行)

$(document).ready(function() {
     $("tr:eq(1)").addClass("mytr");
     $("tr:eq(2)").css('background-color','#663300');
});

3. 選擇第N行(若有很多table則會選擇每個table的第N行)

$(document).ready(function() {
     $("table tr:nth-child(1)").addClass("mytr");
});

4. 選奇偶行

$(document).ready(function() {
 $("table tr:odd").addClass("trOdd");
 $("table tr:even").addClass("trEven");
});

3. 選第一個元素

$(document).ready(function() {
 $("table tr:first").addClass("trFirst");
 $("table tr:last").addClass("trLast");
});

下面是相關選擇器的一個小範例

<html>
	<head>
		<script Type="text/javascript" src="js/jQuery.js"></script>
		<script Type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$('tr:even').removeClass();
					$('tr:even').addClass('myEven');
				});
				$('#btn2').click(function(){
					$('tr:odd').removeClass();
					$('tr:odd').addClass('myOdd');
				});
				$('#btn3').click(function(){
					$('tr:eq(1)').removeClass();
					$('tr:eq(1)').addClass('myEq');
				});
				$('#btn4').click(function(){
					$('#tbd tr:even').removeClass();
					$('#tbd tr:even').addClass('myEven');
				});
			})
		</script>
		<style type="text/css">
			.myOdd
			{
				background-Color:pink;
			}
			.myEven
			{
				background-Color:Yellow;
			}
			.myEq
			{
				background-Color:green;
			}
		</style>
	</head>
	<body>
		<input type="Button" id="btn1" name="btn1" value="測試Even">
		<br />
		<input type="Button" id="btn2" name="btn2" value="測試Odd">
		<br />
		<input type="Button" id="btn3" name="btn3" value="測試eq">
		<br />
		<input type="Button" id="btn4" name="btn4" value="測試tbody內的tr">
		<br />
		<hr />
		<table border="1">
			<thead>
				<tr>
					<th>1,0</th>
					<th>2,0</th>
					<th>3,0</th>
					<th>4,0</th>
					<th>5,0</th>
				</tr>
			</thead>
			<tbody id="tbd">
				<tr>
					<td>1,1</td>
					<td>2,1</td>
					<td>3,1</td>
					<td>4,1</td>
					<td>5,1</td>
				</tr>
				<tr>
					<td>1,2</td>
					<td>2,2</td>
					<td>3,2</td>
					<td>4,2</td>
					<td>5,2</td>
				</tr>
				<tr>
					<td>1,3</td>
					<td>2,3</td>
					<td>3,3</td>
					<td>4,3</td>
					<td>5,3</td>
				</tr>
				<tr>
					<td>1,4</td>
					<td>2,4</td>
					<td>3,4</td>
					<td>4,4</td>
					<td>5,4</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

下面是顯示的結果

1,0	2,0	3,0	4,0	5,0
1,1	2,1	3,1	4,1	5,1
1,2	2,2	3,2	4,2	5,2
1,3	2,3	3,3	4,3	5,3
1,4	2,4	3,4	4,4	5,4

相關文章:
jQuery 參考手冊 – 選擇器 (http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp)

jQuery 選擇器

選擇器	實例	選取
*	$(“*”)	所有元素
#id	$(“#lastname”)	id=”lastname” 的元素
.class	$(“.intro”)	所有的元素
element	$(“p”)	所有 <p> 元素
.class.class	$(“.intro.demo”)	所有且的元素

:first	$(“p:first”)	第一個 <p> 元素
:last	$(“p:last”)	最後一個 <p> 元素
:even	$(“tr:even”)	所有偶數 <tr> 元素
:odd	$(“tr:odd”)	所有奇數 <tr> 元素

:eq(index)	$(“ul li:eq(3)”)	列表中的第四個元素（index 從 0 開始）
:gt(no)	$(“ul li:gt(3)”)	列出 index 大於 3 的元素
:lt(no)	$(“ul li:lt(3)”)	列出 index 小於 3 的元素
:not(selector)	$(“input:not(:empty)”)	所有不為空的 input 元素

:header	$(“:header”)	所有標題元素 <h1> – <h6>
:animated		所有動畫元素

:contains(text)	$(“:contains(‘W3School’)”)	包含指定字符串的所有元素
:empty	$(“:empty”)	無子（元素）節點的所有元素
:hidden	$(“p:hidden”)	所有隱藏的 <p> 元素
:visible	$(“table:visible”)	所有可見的表格

s1,s2,s3	$(“th,td,.intro”)	所有帶有匹配選擇的元素

[attribute]	$(“[href]”)	所有帶有 href 屬性的元素
[attribute=value]	$(“[href=’#’]”)	所有 href 屬性的值等於 “#” 的元素
[attribute!=value]	$(“[href!=’#’]”)	所有 href 屬性的值不等於 “#” 的元素
[attribute$=value]	$(“[href$=’.jpg’]”)	所有 href 屬性的值包含以 “.jpg” 結尾的元素

:input	$(“:input”)	所有 <input> 元素
:text	$(“:text”)	所有 type=”text” 的 <input> 元素
:password	$(“:password”)	所有 type=”password” 的 <input> 元素
:radio	$(“:radio”)	所有 type=”radio” 的 <input> 元素
:checkbox	$(“:checkbox”)	所有 type=”checkbox” 的 <input> 元素
:submit	$(“:submit”)	所有 type=”submit” 的 <input> 元素
:reset	$(“:reset”)	所有 type=”reset” 的 <input> 元素
:button	$(“:button”)	所有 type=”button” 的 <input> 元素
:image	$(“:image”)	所有 type=”image” 的 <input> 元素
:file	$(“:file”)	所有 type=”file” 的 <input> 元素

:enabled	$(“:enabled”)	所有激活的 input 元素
:disabled	$(“:disabled”)	所有禁用的 input 元素
:selected	$(“:selected”)	所有被選取的 input 元素
:checked	$(“:checked”)	所有被選中的 input 元素

Flex3, Flex4 ActionScript3, Flex, Flex3, Flex4

Flex裡綁定(Bindable)相關函數及使用方式

Post By Claire Chang 2012-12-23 下午 3:38

在flex裡，最強大的標籤應該就是[Bindable]的綁定標籤了
因為某次的需求，我需要研究將Bindable綁定至函數
也順便研究了ChangeWatcher和BindingUtils的使用

【BindingUtils】
官方的說明在此:
http://help.adobe.com/zh_TW/FlashPlatform/reference/actionscript/3/mx/binding/utils/BindingUtils.html
這是Flex內綁定的工具，裡面有兩個屬性，一個是綁定到函數(bindSetter)，另一個則是綁定到某物件的某屬性(bindProperty)

使用範例如下
1. 綁定到函數(bindSetter)

2. 綁定到某物件的某屬性(bindProperty)

【ChangeWatcher】
官方的說明在此:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/binding/utils/ChangeWatcher.html
因為此次我們要綁定的函數裡是有帶多個參數的，因此BindingUtils的bindSetter便無法使用
這時就需要使用BindingUtils所用的ChangeWatcher來自己做綁定的動作
ChangeWatcher的使用方式如下
var model:Model = new Model();
watcherInstance = ChangeWatcher.watch(model,[“totalItems”],itemsChanged);
根據官方文件watch的傳入的東西依序為”要綁定的物件”、”要綁定的屬性”、”要綁定的函數”

下面便是我根據這些所寫的小範例
MyBindingUtils.as
package {
import flash.events.Event;
import flash.events.EventDispatcher;
import flash.system.Capabilities;
import flash.utils.getTimer;

import mx.binding.utils.ChangeWatcher;
import mx.controls.Alert;
import mx.resources.ResourceManager;

public class MyBindingUtils extends EventDispatcher {

private static var _objs:MyBindingUtils;

public static function getInstance():MyBindingUtils {
if (_objs == null) {
_objs = new MyBindingUtils();
}
return _objs;
}

public function changeLanguage(lang:String):void {
ResourceManager.getInstance().localeChain = [lang, “en_US”];
this.dispatchEvent(new Event(“ChangeLanguage”));
}

[Bindable(event=”ChangeLanguage”)]
public function getString(type:String, key:String, parameters:Array = null, locale:String = null):String {
return ResourceManager.getInstance().getString(type, key, parameters, locale);
}

public function bindString(target:Object, prop:String, type:String, key:String, parameters:Array = null):String {
var w:ChangeWatcher = ChangeWatcher.watch(this, [“getString”], null);
var result:String = getString.apply(null, [type, key, parameters]);
if (w != null) {
var invoke:Function = function(event:*):void
{
result = getString.apply(null, [type, key, parameters]);
target[prop] = result;
};
w.setHandler(invoke);
invoke(null);
}
return result;
}
}
}

完整範例檔案可按此下載

Action Script3 ActionScript3, Flex, Flex3, Flex4

在as3裡取得函數呼叫者資訊

Post By Claire Chang 2012-12-17 下午 12:30

補充：這個方法只可以在flash player的debugger版本可用，
因為在一般非debugger的player無法用”e.getStackTrace()”來抓取歷史資訊

再補充：非debugger的版本只需在flex的compiler arguments裡加上
-swf-version=18
這串參數，就會可以正確的取得”e.getStackTrace()”的值了!

如果我們在某個函數兩要知道有關傳進的參數的相關資訊
可以使用arguments去取得

下面網址有介紹arguments的使用方式
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/arguments.html

package {
import flash.display.Sprite;

public class ArgumentsExample extends Sprite {
public function ArgumentsExample() {
println(“Hello World”);
}

public function println(str:String):void {
trace(arguments.callee == this.println); // true
trace(arguments.length); // 1
trace(arguments[0]); // Hello World
trace(str); // Hello World
}
}
}

但是過去在as2裡，arguments可以用caller去知道呼叫此函數的地方
在as3裡，卻將此一屬性拿掉了。
那我們在as3裡該如何知道是誰呼叫了這個函數呢?

我在一個別人的部落格裡找到一個別人寫好的解法
是先丟出一個錯誤訊息，然後去getStackTrace()，再去解析之前呼叫者的資訊
try { throw new Error(); }
catch ( e: Error ) { stackTrace = e.getStackTrace(); }

原始部落格在此
Looking up the calling function

原始碼如下:
var stackTrace:String;

try { throw new Error(); }
catch (e:Error) { stackTrace = e.getStackTrace(); }

var lines:Array = stackTrace.split(“\n”);
var isDebug:Boolean = (lines[1] as String).indexOf(‘[‘) != -1;

var path:String;
var line:int = -1;

if(isDebug)
{
var regex:RegExp = /at\x20(.+?)\[(.+?)\]/i;
var matches:Array = regex.exec(lines[2]);

path = matches[1];

//file:line = matches[2]
//windows == 2 because of drive:\
line = matches[2].split(‘:’)[2];
}
else
{
path = (lines[2] as String).substring(4);
}

trace(path + (line != -1 ? ‘[‘ + line.toString() + ‘]’ : ”));

Action Script3 Action Script3, Flex, Flex3, Flex4

AS3.0中三角函數的使用

Post By Claire Chang 2012-11-28 下午 3:04

先用Math.atan2()去求得圓的弧度
用法是弧度 = Math.atan2(x,y)
x與y指的是在坐標軸上形成三角型的那個點的x,y

然後再用弧度轉角度的公式去求出角度

//弧度轉角度
var arc:Number=1 //弧度
var angle=(arc*180)/Math.PI; //角度

//角度轉弧度
var angle:Number=30 //角度
var arc=angle/180*Math.PI; //弧度

另外Math.sin、Math.cos裡面要傳入的值，則是弧度
所以若我們要算sin60的值，需要這樣去代入
Math.sin(60*Math.PI/180);
那sin = 對邊/斜邊
所以要求出對邊就是 Math.sin(60*Math.PI/180) * 斜邊
其他的亦同。

語法結構：
Math.sin(數值或表達式);
Math.cos(數值或表達式);
Math.tan(數值或表達式);
Math.asin(數值或表達式);
Math.acos(數值或表達式);
Math.atan(數值或表達式);
Math.atan2(數值或表達式);
註：數值或表達式的結果值應介於-1和1之間。
範例：
myNum = Math.sin(60*Math.PI/180);
以表達式60*Math.PI/180的運算結果為參數求取正弦值並存入變量myNum中。
myNum = Math.cos(0.49);
以數值0.49為參數求取餘弦值並存入變量myNum中。
myNum = Math.tan(60*Math.PI/180);
以表達式60*Math.PI/180的運算結果為參數求取正切值並存入變量myNum中。
myNum = Math.asin(45*Math.PI/180);
以表達式45*Math.PI/180的運算結果為參數求取反正弦值並存入變量myNum中。
myNum = Math.acos(0..49);
以數值0.49為參數求取反餘弦值並存入變量myNum中。
myNum = Math.atan(30*Math.PI/180);
以表達式30*Math.PI/180的運算結果為參數求取反正切值並存入變量myNum中。
myNum = Math.atan2(30,50);
求取點50,30到X軸的角度並存入變量myNum中。

Action Script3, Flex3, Flex4 Action Script3, Flex, Flex3, Flex4

AS3.0中製作直式書寫的方式

Post By Claire Chang 2012-11-26 下午 5:04

在as3.0中有 FTE可針對文字去測量其寬度、高度等
針對個別的文字去做處理
相關官網的說明可見此
 http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS6C0BB8ED-2805-467a-9C71-F9D757F33FB6.html

ElementFormat是定義文字的相關屬性(字型、大小、顏色等等)
然後再new一個TextElement設定文字格式和文字內容
再將其放到一個TextBlock裡面

TextBlock裡面則有許多相關的操作函數
可以對個別的文字做旋轉、定位等等
http://livedocs.adobe.com/flex/3_cn/langref/flash/text/engine/TextBlock.html
詳細的手冊說明在上面

裡面的lineRotation將角度設為九十度(TextRotation.ROTATE_90)時
文字就會呈現傳統的中文直式書寫方式呈現

下面的是將文字改為直式文字的範例程式

package {
import flash.display.Sprite;
import flash.text.engine.FontDescription;
import flash.text.engine.TextBlock;
import flash.text.engine.TextElement;
import flash.text.engine.TextLine;
import flash.text.engine.TextRotation;
import flash.text.engine.ElementFormat;

public class TextBlock_lineRotationExample extends Sprite {

public function TextBlock_lineRotationExample():void {
var s:String = “一向批判電影不會「口下留情」的大陸媒體，竟在李安導演《少年PI的奇幻漂流》內地上映後，於中國最大入口網站搜狐，罕見大讚道：『影片美輪美奐的視覺奇觀，身臨其境的3D效果。』”;

var fontDescription:FontDescription = new FontDescription(“MS Mincho”);
var format:ElementFormat = new ElementFormat();
format.fontSize = 15;
format.fontDescription = fontDescription;

var textElement:TextElement = new TextElement(s, format);
var textBlock:TextBlock = new TextBlock();
textBlock.content = textElement;
textBlock.lineRotation = TextRotation.ROTATE_90;

var linePosition:Number = this.stage.stageWidth – 120;
var previousLine:TextLine = null;

while (true) {
var textLine:TextLine = textBlock.createTextLine(
previousLine,
300);
if (textLine == null)
break;
textLine.y = 30;
textLine.x = linePosition;
linePosition -= 24;
addChild(textLine);
previousLine = textLine;
}
}
}
}

Adobe AIR App開發, Flex, Flex3, Flex4

使用Flex編譯出ios的ipa檔案

Post By Claire Chang 2012-10-04 下午 1:59

這邊提供一些我看到的教學影片及連結

1.在Windows上一步步發佈的方式

http://support.brightcove.com/en/docs/step-step-guide-publishing-apple-app-store-using-windows

2. 使用Flex編出ipa的教學

http://tv.adobe.com/watch/adc-presents/build-ios-applications-using-flex-and-flash-builder-45/

3. 怎麼在windows上產生.p12檔案

4. 在Flex裡安裝AIR SDK的方式

http://helpx.adobe.com/flash-builder/kb/error-run-debug-deploy-ios.html

http://www.flashdeveloper.co/post/10985842021/overlay-adobe-air-32-in-flash-builder-46

其實最基本的可以就依照這篇文章去做一步步的發佈設定

如果不想太快買開發者身份也可以到google 打上fake .p12 ，下載破解檔案

就可以直接做發佈的設定了!

===================================

另外也提供不使用flex去做發佈的方式

1.安裝 adobe AIR SDK，請將以下壓縮檔，解到自己電腦任意目錄中

http://www.adobe.com/devnet/air/air-sdk-download.html

例如，我電腦中，我解到：E:\software\AdobeAIRSDK

2.準備 command line 批次檔 build.bat，檔案內容如下：

set SDK_HOME=E:/software/AdobeAIRSDK à 換成你放 air sdk 的位置

set ADT_JAR=%SDK_HOME%/lib/adt.jar

set APP_NAME=HorseRacingDemo à 換成你專案的名稱，會用來找對應的 xxx.swf 與 xxx-app.xml，並發布成 xxx.ipa

set APP_ROOT_DIR=C:/Users/ben.chang/Desktop/新增資料夾 à 所有東西放置的資料夾

set BUILD_DIR=%APP_ROOT_DIR%

set APP_ROOT_FILE=%APP_NAME%.swf

set APP_DESCRIPTOR=%APP_NAME%-app.xml

set IPA_NAME=%APP_NAME%.ipa

set STORETYPE=pkcs12

set KEYSTORE=FakeCert.p12

set STOREPASS=1234

set PROVISIONING_PROFILE=Fake.mobileprovision

java -jar %ADT_JAR% -package -target ipa-debug -provisioning-profile %APP_ROOT_DIR%/%PROVISIONING_PROFILE% -storetype %STORETYPE% -keystore

%APP_ROOT_DIR%/%KEYSTORE% -storepass %STOREPASS% %APP_ROOT_DIR%/%IPA_NAME% %APP_ROOT_DIR%/%APP_DESCRIPTOR% -C %BUILD_DIR% %APP_ROOT_FILE%

pause

3.準備 xxx-app.xml

我的 Flash CS 5.0，設定輸出 ipad 產出的 xml 為：

<?xml version=”1.0″ encoding=”UTF-8″ standalone=”no” ?>

<systemChrome>standard</systemChrome>

<transparent>false</transparent>

<fullScreen>false</fullScreen>

<aspectRatio>portrait</aspectRatio>

<autoOrients>false</autoOrients>

</initialWindow>

<icon/>

<customUpdateUI>false</customUpdateUI>

<allowBrowserInvocation>false</allowBrowserInvocation>

<InfoAdditions>

<![CDATA[<key>UIDeviceFamily</key><array><string>2</string></array>]]>

</InfoAdditions>

</iPhone>

</application>

設定輸出 iphone 的 xml 為：

<?xml version=”1.0″ encoding=”UTF-8″ standalone=”no” ?>

……

<InfoAdditions>

<![CDATA[<key>UIDeviceFamily</key><array><string>1</string></array>]]>

</InfoAdditions>

</iPhone>

</application>

設定輸出 iphone 與 ipad 的 xml 為：

<?xml version=”1.0″ encoding=”UTF-8″ standalone=”no” ?>

……

<InfoAdditions>

<![CDATA[<key>UIDeviceFamily</key><array><string>1</string><string>2</string></array>]]>

</InfoAdditions>

</iPhone>

</application>

4.資料夾中準備好相關檔案：

l xxx.swf

l xxx-app.xml

l build.bat

l FakeCert.p12

l Fake.mobileprovision

譬如，我在自己電腦桌面上開一新資料夾，如下畫面：

執行 build.bat 大約一兩分鐘就可產出 *.ipa

APP企劃專案管理

外行人也能學會的App企劃法

Post By Claire Chang 2012-08-20 下午 7:28

最近買了這本書：
http://buy.yahoo.com.tw/gdsale/gdbksale.asp?gdid=3639539

這本書在第一張的地方，先說出App與一般的電腦程式最大差異點在於『行動性』。
因此好的APP應具備下面幾個特質：

1. 簡單上手
2. 目的單純(一次做一件事)
3. 流暢度和穩定度

在做APP之前要先問自己下面幾個問題：

1. 為什麼要做APP而不是網站，找出做APP的意義。
2. 然後找出APP要扮演的角色，是附屬在某個服務如dropbox，或是一個獨立的服務如Line、或者是一個行銷、廣告的工具。
3. 預期這支APP可以解決什麼問題？
4. 鎖定目標族群
5. 產品所能帶來的效益

在企劃自己的APP之前，應要多去看別人的APP，以下面幾項去切入剖析

1. 是否有善用行動裝置的特性，提供一般網站無法滿足的訴求
2. 這隻APP鎖定的是那一些族群? 提供了那些主要資訊或活動?是否可以一眼吸引目標族群?所提供的功能是否符合族群功能?
3. UI是否清楚明瞭? 操作動線是否流暢?
4. 製作邏輯剖析

我們應該要多去了解市場現有的APP的狀況，或是排行榜上榜的APP遊戲，並學習用上面的觀點去剖析該APP，培養自己對於這個市場的敏銳度，從觀察中找創意。並且應善用情境想像和角色模擬，找出問題點。

在UI與動線規劃上，要了解手機動線是3D的，並且在設計上許多內容是在套入程式之後才會套入，因此程式師必須與美術設計者有較密切的溝通，才能確保美編產生的東西可以使用在程式內。在美術設計上，應該以『好用』為主要訴求。

在上架前我們則需要準備下列東西：

1. 名稱：在Iphone裡最長六個字、app store最長10個字
2. 主icon：應醒目、可表現主題
3. 截圖：以五張為限，應盡量抓可凸顯APP特色的圖
4. 文案：建議用條列式的將內容和主要功能強調出來，並加強特色介紹，讓使用者一目了然。
5. 關鍵字：盡可能把所有的關鍵字都列出來，或者也可以參考競品的APP介紹，將有用的關鍵字納入，增加APP被搜尋到的機會
6. 上架日期：若送審過後要出現在APP Store的日期

敏捷開發專案管理

沒有銀彈 – 軟體工程的本質性與附屬性工作

Post By Claire Chang 2012-08-17 下午 5:58

在人月神話裡，花了兩章的篇幅說明在軟體開發上，
不會有類似銀彈這種，可以快速解決開發時程延誤或發生重大錯誤的捷徑

他們提出了三個原因：

(1) 複雜性：

軟體開發的複雜度與規模大小並非線性的關係，整個複雜度增加情況也會遠遠超過線性預估的結果。也因為結構上的複雜性，當軟體在擴充新功能時，難保不會產生新的副作用。程式裡的狀態難以一一列舉，也更加難以明瞭整個產品也會變的更不可靠。另外因為複雜性關係，開發時也容易遇到溝通困難、時程落後、成本超支的困難。

(2) 配合性：

軟體必須配合其他的領域，例如電腦、不同語言、不同介面等等….。

(3) 易變性：

1. 時常面臨修改，因為軟體是純思考的產物，有無限延展性，修改容易，也因此特別容易面臨修改
2. 成功的軟體生命周期會比硬體來的長，因此時常會需要配合硬體環境上去修改。

(4) 隱匿性：過於抽象、難以理解。

在這邊他們也提出了幾項過去曾讓軟體界有所突破的重大發展，但這些突破都是屬於附屬性的，沒辦法突破軟體工程本質上的複雜性：

(1) 高階語言：高階語言的發行的確是最強而有力的一次突破，對生產力而言至少有五倍以上的提升。並伴隨得到可靠度、簡潔性、理解力上的增益。它把和程式內涵一點關係都沒有的那一整層複雜性給去除了。

(2) 分時技術：分時技術對於程式設計師的生產力及產品品質有了重大的提升。因為分時確保了即時性，使我們得以持續保持住腦子裡對複雜的概觀。但緩慢的回復時間是附屬難題。

ps: 分時系統：作夜系統依中央處理器排程(CPU Scheduling)，將中央處理器的時間切割為極小的時間片段(Time Slice)

(3) 統一的軟體開發環境：Unix和Interlisp是第一個得到廣泛使用的整合開發環境，藉由提供完整的程式庫、統一的檔案格式、管道和過濾器，以促成軟體的共用。

(4) 物件導向程式設計：抽象資料型別和階層式型別的使用。允許介面可以用次一層級的型別去做進一步的細緻化，隱藏類別裡面的實際操作，讓開發者可以在開發時專注於設計該類別的邏輯，排除掉許多附屬性困難。

(5) 人工智慧：ex語音辨識、圖形辨識

(6) 專家系統：一支具有廣義推理引擎與知識庫的軟體程式，被設計成可接收輸入資料和假設條件的軟體程式，然後藉由知識庫來推導出邏輯上的結果。這項技術所帶來最重要的進步，是將應用領域的複雜性從程式中區隔出來。

(7) 『自動化』程式設計：換句話說是用更高階的語言來編寫程式。未來可能我們會是用『建構』的方式來寫程式，也就是更完備的函式庫，可以讓寫程式的複雜度更加的降低。

(8) 圖形化程式設計(graphical programming)：一個博班論文提出的新想法，但本書覺得要有成果應有些困難。

(9) 軟體的驗證：編輯軟體自動驗證程式的某些錯誤。例如比對資料型態、變數是否已宣告等等。

(10) 環境與工具：用來除錯、或是搜尋該類別曾被用在那些地方的開發工具。

(11) 工作站：也就是編輯所消耗的時間，若是機器的編譯時間減少，程式師能花在思考上的時間就會變多。

1,0	2,0	3,0	4,0	5,0
1,1	2,1	3,1	4,1	5,1
1,2	2,2	3,2	4,2	5,2
1,3	2,3	3,3	4,3	5,3
1,4	2,4	3,4	4,4	5,4

1,0	2,0	3,0	4,0	5,0
1,1	2,1	3,1	4,1	5,1
1,2	2,2	3,2	4,2	5,2
1,3	2,3	3,3	4,3	5,3
1,4	2,4	3,4	4,4	5,4

1,0	2,0	3,0	4,0	5,0
1,1	2,1	3,1	4,1	5,1
1,2	2,2	3,2	4,2	5,2
1,3	2,3	3,3	4,3	5,3
1,4	2,4	3,4	4,4	5,4