Loading...: 09/01/2013

Inside salon #2 千萬下載等級遊戲開發商 Orange Nose Studio 創業與中國經驗分享 - 重點整理

我是個不太常在手機上玩遊戲的人，大多會玩遊戲就是為了打發時間，而 Orange Nose studio 出的遊戲完全是主打我這族群，無腦的遊戲有助於紓壓(無誤)。

這邊來重點整理一下這次所聽到 Leon 所談的重點，省略前面自家的火力展示，以下未依照演講時順序，未必完全與演講用字相同，僅以當時筆記為主

成功的原因

找到對的TA (不玩遊戲的人)
找到對的市場，市場一定要夠大，並且具發展性
30 秒測試

用 30 秒對一個沒用過的使用者測試，30 秒如果沒辦法提起興趣那這個人就不是你的 TA或你設計根本有問題
測試時什麼都不要說，在旁安靜的觀察使用者
偷偷跑去手機店把要測試的 App 安裝到展示機上，然後躲在旁邊觀察，最好還可以先把 App 打開後再去旁邊觀察，確保使用者一定是看到這 App（先前我自己在寫 Android 也想過這方法 XD，這也許是個 business model）

免費
同時間在多個平台( ios, android )上架，所以類似 cocos2d 這類的 framework 會是你的好夥伴
病毒式成長

前期還是需要打廣告增加曝光量，但前期購買下載量 CP 值不高
廣告再多還是比不上病毒行銷的擴散速度
marketing 再怎樣強還是比不上產品好
app + market = viral

好的評分( rating )

如果評分低於 4 顆星那肯定是產品出問題了，有 1顆星出現那肯定是會有 crash 或無法正常進行遊戲

做一個好的遊戲

選一個屬於你的市場

不一定要做的特別快，但一定要想清楚
維持在高的評分( rating )
別只能跟電腦玩，加入社群元素可以發展更快

e.g. race cars vs race with friends

race cars - 那市場限定在熱愛賽車的人
race with friends - 市場肯定比 race cars 大，重點是妹也會玩

最好是免費的

免費市場肯定比付費市場大
免費第一名下載量大約等於付費的 10 倍

跨平台 ( ios, android )

了解你的市場

觀察同一個市場上其他優秀 App 怎麼做
觀察這些優秀 Apps 的留言，看到其實哪邊還可以再改進，使用者喜好
觀察市場的大小
詢問自己，是否適合這市場

First love in 30s

使用前 30 秒幾乎是掌握會不會再使用下去的關鍵（很多使用者下載後是不會開啟 App 或不了解馬上刪除）
Icon, title 就是吸引用戶的第一步，不好看的 icon 下載機會大幅降低
如果 30s 測試無法成功通過那就表示這 App 有問題
通過 30s 測試後詢問使用者

了解 or 疑惑
是否對某個片段有映像 or 失望
是否喜歡

如果可能一定要做使用者測試

做出產品

計畫 milestone 和上市時間
除了做使用者測試外也要做市場測試

市場測試可以利用國家為範圍，香港是個很好的測試環境，測試結果幾乎會與全球差不多

找出最好的付費點，做 App 是要賺錢的

大多要依靠經驗、測試，然後微調

賣出你的產品

可以考慮 itunes 最為你的第一個平台

Google play 即使得到第一名還是沒比 itunes 有用
Google play 第一名大概只能佔 android 總下載量 60% （因為 android market 太多）
Android user 下載的來源很少透過 Google play 排行，而是其他網站

找出最划算的下載預算

投遞不同方式、種類的廣告，多嘗試幾個不同的通路
想要大量下載基本上還是要靠錢
目前(CPI) 單價越來越高（2~3+ 美金/每個下載）

確保排名在前面

itunes 的規則前兩三個月才又改過，要靠長期觀察

使用率
下載量
刪除率
好的品質（raking）

Google 會依照多少人砍了你的 App
各家 store 都會營造出榜單是活的感覺（常常跳動）
不一定要衝上第一，前幾名一樣很有用

從小的市場開始，早期測試早期修正
考量長期的拓展模式
考慮內至廣告模式賺錢

不同國家使用不同家廣告，找出最自己最有利的
最好設計成可線上切換廣告模式，多測試幾家不會錯
影片廣告 ( e.g. vungle )

3rd 網站廣告購買

freeappaday.com
AppGratis.com
偶爾配合這些網站做限時免費效果很棒
價位通常不高

android 可以考慮跟 Tapjoy 合作
跟發行商合作 Chillingo

中國市場

市場大小

250m 智慧型手機
超高成場率
中國市場幾乎等同於全球（中國以外國家）市場

中國境內大約有 200 個以上的 android apps store

主要的大概有 360, 91, baidu, ....等
360 佔有 40% 中國市佔率（360 自己說的）
來源

電信商

中國移動，中國聯通
收費靠電信商，簡訊收費，月結

網路發佈者

360, 91, baidu, 安卓
360 防毒起家，感覺比較可靠

中國使用社群

手機出場 bundle app 也是常見的行銷方法
收費

管道

電信商

抽 30%
提供小額付費
一定要包自家的SDK（每一家都不同）
還可能會被電信商要求改介面（不改不能上架）

在地出版商

抽 40 ~ 60%（也有抽到 90%）
360, 91, baidu, ....等
很可能會要求簽首發（eg. 一個月內只能在某個 store 賣）
一定要包自家的SDK（每一家都不同）

代理出版

抽 50%
你中國的窗口
會幫你想辦法打擊盜版

Leon 提到當地盜版商甚至會把你的 App 盜版後要求正版下架，除非你花 XXX 元來買通

會幫你進行手機測試，中國很多沒牌的手機
會幫你通過審核

一般審核約 1~2 個月，透過合作出版商大約 1 週

在中國沒有設立公司妹辦法透過電信商收費
一般來說大概僅剩下 12% 實際收益

在地化

一定要用中國用語
但不一定要翻譯的很完整，因為太完整可能會被當做中國本土產品

收費模式

中國 IAP 模式收費為 2, 4, 6 元（人民幣）
6 元（人民幣）已經是最貴
以 causal game 來說中國會玩的人收入大多不高，2 元（人民幣）是非常願意付費
不要讓使用者玩太久，玩太久就不付錢，所以有些 App 甚至是限定時間，超過 5 分鐘就需要付費

中國 App 不能放廣告

中國在地遊戲 vs 全球遊戲比例大約為 6 : 4
在地出版商合作

營收拆帳 + MG（保證金，超過XXX量後再跟你算）
360 不給 MG
有 MG 比較有保障，多少就是靠談判
MG 越高，因為電信商想賺回來，所以會更努力賣
貨比三家不吃虧

進入中國市場需要擁有的特殊技能

整合各家 SDK （各家都有自己的）

如果放心的話可以直接給 source code，對方會幫忙整
如果是好遊戲，其他平台版本對方都可以幫忙做

翻譯成中國用語

如何進入

找到一個好的管道
整合當地的付費方式
GOOD LUCK

sublime ascii plugin

自從看到這張圖（圖一）馬上笑了出來，想到之前在 LiveAll 以及做 Trend Micro yeoman generator 的時候也一樣畫了很多 ASCII 圖片，但從來沒想到這些 ASCII 的圖片可以在 Sublime 的 minimap 變得如此方便！

這邊來介紹幾個 Sublime 目前的幾個畫 ASCII 的 plugin

ASCII-Decorator
ASCII-Decorator 提供了很簡易但又實用的功能，也是最接近這次我們所需要的功能，其中預設字體為 slant ，雖然與看到的圖片中不太相同，但這其實可以換字型的！在 package settings 中可以設定你想要的字體，字體列表中可以來慢慢的找到你想要的字型，選取字型後按下 super+shift+K or alt+shift+K 就可以把字轉換

ASCIIPresentation
ASCIIPresentation與ASCII-Decorator其實很類似，但功能上又更多了點，可以加上顏色，還可以畫出些視窗的外框等功能

ASCII-Cowpletions
最後介紹這個算是這次的意外發現，內建了相當多種的牛可以快速的畫出，還提供了下拉選單來選取XD，可參照下圖

相信很多人家裡的水、電、瓦斯等帳單都是使用紙本，由於紙本實在是不好管理加上電子化公文等理由，其實水、電、瓦斯帳單不但可以直接銀行、信用卡扣款，還可以線上申請把原本的紙本帳單轉為電子郵件，當然如果想要保留原本的紙本帳當寄送（同時有電子帳單 + 紙本帳單）也是可以。

也因為這次想要申請電子帳單的緣故讓我了解到，原來我家的自來水並不是台灣自來水公司，而是台北自來水事業處，這兩個要怎樣分呢？
首先先看一下你家水費帳單上左上部分有個紅色區塊分別寫著「大區、小區、戶號、檢」這四個欄位，如果有的話那你家的自來水是屬於台北自來水事業處
如果沒有就表示你家自來水來自台灣自來水公司，而台灣自來水公司使用為「站所(2碼)、編號(8碼)、檢算號(1碼)」
當然更快的方式就是看你家是不是在台北市Orz...

台灣電力公司 - http://www.taipower.com.tw/

台灣電力公司電子帳單申請 - https://ebpps.taipower.com.tw/EBPPS/NAEBCG0_00001.jsp

大台北瓦斯 - http://www.taipeigas.com.tw/

大台北瓦斯電子帳單申請 - http://www.taipeigas.com.tw/applyemail.htm

台灣自來水公司 - http://www.water.gov.tw/

台灣自來水公司電子帳單申請 - http://newebill.water.gov.tw/WaterWeb/wSite/mp?mp=100

台北自來水事業處 - http://www.twd.gov.tw/

台北自來水事業處電子帳單申請 - https://waterpark.twd.gov.tw/www/pg/p_suply/ps_16/AA/AA14/AA1401.aspx

*重點
如果要申請電子帳單各家都需要各家自己的「編碼 (id)」這些「編碼 (id)」在帳單上都有，申請前先準備好之前的帳單可以減少很多不必要浪費的時間

相關連結
台灣電力公司
台灣電力公司電子帳單申請
大台北瓦斯
大台北瓦斯電子帳單申請
台灣自來水公司
台灣自來水公司電子帳單申請
台北自來水事業處電子帳單申請

Facebook like button document.domain issue

今天遇到了一個 facebook like button 的問題，錯誤訊息如下

Blocked a frame with origin "https://www.facebook.com" from accessing a frame with origin "https://platform.twitter.com". The frame requesting access set "document.domain" to "facebook.com", the frame being accessed set it to "twitter.com". Both must set "document.domain" to the same value to allow access. l5vDWYcNnY2.js:41
2
Blocked a frame with origin "https://www.facebook.com" from accessing a frame with origin "https://apis.google.com". The frame requesting access set "document.domain" to "facebook.com", but the frame being accessed did not. Both must set "document.domain" to the same value to allow access. l5vDWYcNnY2.js:41
2
Blocked a frame with origin "https://www.facebook.com" from accessing a frame with origin "https://accounts.google.com". The frame requesting access set "document.domain" to "facebook.com", but the frame being accessed did not. Both must set "document.domain" to the same value to allow access. l5vDWYcNnY2.js:41

以及跳出（下圖） popup 然後怎麼點 "Post to facebook" 都沒辦法順利送出（成功送出 popup 會關閉）

當下看到這錯誤訊息只想到兩個可能性
1. https
2. 可能跟其他家（ twitter, google+ ）按鈕衝突

twitter, google+ 都可以正常的運作，唯獨 facebook 在按下 like 後跳出的 popup dialog 無法順利送出，經過 Google 大神的協助後發現案情並不單純，like button 是使用 facebook 所提供的 html5 版本，內容沒做任何修改，理論上 facebook 發生這種問題的機率肯定比我低，經過許久的查詢發現了 Facebook Debugger，顯示內容如下

其中中間那段為：There was an error in fetching the object at URL 'http://***************************/', or one of the the URLs specified via a redirect or the 'og:url' property including one of http://*********************.

Debugger 很清楚的寫出 og:url 連結是不是有錯？請再確認，因為 og:url 要連的頁面不但 redirect 到另一個頁面，並且由 https 變為 http ，facebook 認為是有問題（就甘心）

結論（廢話結束...）
需要使用 Like button 時可在產生 Like button 的頁面先行測試看是否可以正常使用（把 URL 先帶入試試看），如果不行請先到 Facebook Debugger 查看問題點在哪

相關連結
Facebook Debugger
Facebook like button

Facebook and google+ share title description thumbnail link display

先前寫過一篇社群分享按鈕總整，整理了各大社群分享的連結，但分享後長什麼樣子也是與分享後的成效有相當的關係，這邊來介紹一下 Facebook, Google+ 的分享內容。

可以設定的如簡單幾項，更多細節可以參考官網文件，或參考下方圖片（圖一）

<meta property="fb:app_id" content="FACEBOOK_APP_ID" />
<meta property="og:type" content="SHARE_METADATA" />
<meta property="og:url" content="SHARE_URL" />
<meta property="og:title" content="SHARE_TITLE" />
<meta property="og:description" content="SHARE_DESCRIPTION"/>
<meta property="og:image" content="IMAGE_URL" />
<meta property="og:site_name" content="SITE_NAME"/>

如果不知道或是沒有的請隨手把他刪掉，這時候如果有疑問 "都沒設定那會show出什麼" ，這時候只好說《侏羅紀公園》（Jurassic Park）中的經典台詞：「生命總會找到出路。」（Life will find the way.），可以使用官方提供的工具來檢查分享後的樣子，以及哪些部分需要調整。

Google 大神更是提供了簡單的網頁工具提供你快速產生 Web Snippet，可參考下方圖片（圖二）

<body itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Shiny Trinket</h1>
<img itemprop="image" src="{image-url}" />
<p itemprop="description">Shiny trinkets are shiny.</p>
</body>

Google 提供了幾種不同的方式，如果你不依照上方的設定方式，優先會去查找 Open Graph "og:title, og:image, og:description" 的參數，如果還是都沒定則會以 page title 以及 meta description 來設定。

相關連結
社群分享按鈕總整
Facebook Using Self-Hosted Objects
Facebook Debugger
Google+ Snippet
圖一 - http://kb.mailchimp.com/article/how-can-i-choose-the-image-thumbnail-that-shows-up-on-facebook
圖二 - https://developers.google.com/+/web/snippet/

Insert CSS style into html head in build process

網頁速度慢除目前看起來最大問題就是 http request 數量太多，因為每次的 request 都需要一定的時間，如果能夠壓縮在同一個 request 是最棒的狀況，前面幾篇有把 Javascript 用 uglify 把檔案壓成一支，以及把小的圖片轉換為 data uri 隨著 html/css 一同載入，這次要做的是把 CSS 直接以 <style> tag 直接塞入 html 的 head 中，讓 CSS 的隨著 html 一起載入，請小心使用

這次的 script 一樣是由 coffeeScript 寫成，以及使用 cheerio 來作 dom select

立馬下載使用

相關連結
image in csshtml from url to uri
html script tags combined a js flie
uglify
coffeeScript
cheerio

image in css/html from url to uri

上次寫了一個單獨一個檔案轉換為 data uri ，但在網站圖片尚未完全確定前這樣做事相當花費時間而且難以驗證檔案，所以再寫了一個 script 夾帶再出 build 流程中，方便的把圖片轉換為 data uri，當然 data uri 沒辦法適用所有的圖片，所以 script 中的 minSize 就是設定要轉換的圖片尺寸上限，單位為 pixel （大約計算出檔案大小），由於 html parse 重寫一次比較麻煩，所以使用了 cheerio 方便做 dom selector

由於許久沒寫 coffeeScript 決定用這 script 快速複習一下

相關連結
cheerio
nodejs image to Data uri
coffeeScript

html script tags combined a js flie

最近每天都在做網頁效能優化，過去 javascript 可能因為很多 plugin 增加了很多 request 次數，或許可以使用 parallel 方式來加速，但始終沒解決浪費頻寬問題，使用 uglify 可以方變得解決需要壓多個 javascript ，但如果網站有一堆頁面都要這樣做一次，每次出 build 都要做一次是非常累人的事，因此寫了一個 script 來處理這個累人的問題。之後再找時間來處理些 error handle 以及，包成一個完整的 module

使用方法很簡單，下載檔案後要先設定好幾個重要的路徑

// javascript 資料夾路徑（相對路徑，相對於 uglify.js這檔案）
JSRootUrl = __dirname + '/js/',

// html 資料夾路徑（相對路徑，相對於 uglify.js這檔案）
viewRoot = __dirname+ '/../application/views',

// 要略過的檔案名稱（ html 資料夾）
skipFiles = ['.DS_Store', 'mail'],

// 壓縮完的檔案名稱後需要加上哪些文字，例如 main.min.js
suffix = '.min',

// 要壓縮哪些 scripts 設定（ html 資料夾的 tag 名稱）
jsTagRegex = /\\<\/script\>/ig,

設定完後只要下簡單的一行，就會進行兩件事 1. 把 html files 符合 "jsTagRegex" 這規則的 javascript 拿掉，取代為 <script src="XXXXX.min.js"></scrips> 2. 把 html 頁面中會需要用到的 javascript 壓成一支

node uglify

相關連結
uglify

Quick launch nodejs expressjs web server

Expressjs 是一套 nodejs 上非常熱門的 web framework ，提供了相當彈性的功能，豐富的社群支持，是個很棒的 nodejs web framework 選擇，但身為前端工程師常常需求只是 "想要建立一個單純的 web server "，這需求達成方法有很多， apache, nginx 等都可以達到想要的功能，但如果是同時間需要多開幾台 servser 模擬，或好多個專案在不同資料夾中透過 apache, nginx 設定可能不是這麼快速（好吧...應該是我手殘）

立馬下載

使用方法
Step1. 安裝 nodejs & npm (download: http://nodejs.org/download/)

Step2. 安裝 expressjs (http://expressjs.com/) 在 global
$ sudo npm install express -g

Step3. 立馬開始使用
$ node app

預設的 PORT 為 3000，根目錄路徑為與 app.js 相同路徑，如果還要再多開一個呢？請多開一個 terminal ，然後再下一次" $ node app "，這時候應該會遇到錯誤訊息告訴你 server 已經開啟，所以提供了另一個功能，可以自訂 PORT 以及根目錄

開啟在 web server 在 8000 PORT 根目錄為 web1
$ node app 8000 ../web1

開啟在 web server 在 9000 PORT 根目錄為 web2
$ node app ../web2 9000

* PORT, 根目錄兩個參數前後順序可以自訂

相關連結
Expressjs
apache
nginx

nodejs image to Data uri

前端為了減少 request 數量可以說是用盡各種方式， Javascript 壓成一支， css 壓成一支，圖片用 image sprite 壓成一張大圖，用盡各種方式把 request 數量減少，讓使用者體驗變得更好。

對於圖片來說 image sprite 是一種很好的方法，但是總會問一下自已「能不能更好？」於是找到了 Data uri 的方式，把圖片轉換為字串，跟著 html, css 一起載入， HTML 的img tag 的 src ，或者 CSS 的 backbround-image 一並載入。產生 Data uri 有些線上工具可以使用，但基於懶人精神懶得按滑鼠、懶得選取檔案、懶得連上網路（那你做 web 幹嘛!?）所以就寫了一個簡單的工具，目的當然很簡單，不用上網（ local 可以解決），不用使用滑鼠（ command line 就可以執行），產生完自動幫我複製到剪貼簿（立馬可使用 ctrl + v）

根據 Caniuse 表示 Data uri 在 IE8+, firefox 2.0+, chrome 4.0+, safari 3.1+, opera 9.0+, 以及所有的 mobile browser 都有支援，所以網站如果是支援 IE8 以上的網頁應該是可以安心服用。

Gist - https://gist.github.com/IskenHuang/6434813

使用方法很簡單在下載後的檔案同目錄下輸入

node img YOUR_IMAGE_PATH

馬上就產出 data uri 並且複製到剪貼簿中，立馬享有 ctrl + v 快速產出的快感( Mac only )，產生出來的字串包含了 data:image/png;base64, 所以直接貼入 HTML img 的 src="PASTE_HERE" ，或 CSS background-image 的 url( PASTE_HERE ) 中。

source

相關連結
Caniuse - datauri
Gist - https://gist.github.com/IskenHuang/6434813

SUNYORY烏龍茶 + CC Lemon

由於看到把檸檬水倒入烏龍茶後我震驚了！覺得蠻神奇的，基於實驗精神決定自己來嘗試看看

首先確認是「SUNYORY烏龍茶」以及「CC Lemon」，雖然CC Lemon不是與影片中相同瓶子，但同一家的產品應該是可以確認的。

先將烏龍茶打開並倒入杯中

最後就是見證奇蹟的時刻

真的很神奇，因為一點反應都沒有！？兩種混合後喝起來有種「檸檬烏龍茶」的感覺(廢話)，說實在不太對味，還是一句老話「認真就輸了」

題外話，為了做這實驗才了解到瓶裝飲料原來這麼貴，我是在住家附近的全家所購買，SUNYORY烏龍茶要價「39」CC Lemon要價「29」新台幣，而且購買後才發現原來兩家都同為SUNYORY公司旗下產品，不禁讓人有種炒作的感覺。

相關連結
SUNYORY烏龍茶
 CC Lemon

訂閱：文章 (Atom)