trleeemark 發表的全部文章

使用 iOS 11 中的相機與 Safari 來辨識 QR Code

現在 iOS 11 終於內建 QR Code 辨識,主要是透過相機與 Safari 來支援此功能。
Android 則要用 ZXing Team 的 條碼掃描器 來掃 (部分手機商則是整合在相機中)。
兩邊通用幾乎就是直接照抄 ZXing Project 一樣
以下是針對 QR Code 的原始內容,只要格式正確就能觸發各種不同功能。

 


相機

URL QR Code

https://www.apple.com
URL QR Code

 


Location QR Code

geo:37.33182,-122.03118
Location QR Code 1

http://maps.apple.com/?address=1,Infinite+Loop,Cupertino,California
Location QR Code 2

 


Message QR Code

sms:1-408-555-1212
Message QR Code 1

SMSTO:1-408-555-1212:Hello World
Message QR Code 2

 


Email QR Code

mailto:john.appleseed@apple.com
Email QR Code

 


Phone Number QR Code

tel:+1-408-555-5555
Phone Number QR Code

 


Contact QR Code
vCard format

BEGIN:VCARD
VERSION:3.0
N:Appleseed;John;;Mr.;
FN:John Appleseed
ORG:Apple Inc
TEL;TYPE=WORK,VOICE:(408) 555-1212
EMAIL:john.appleseed@apple.com
END:VCARD

Contact QR Code 1

 


Contact QR Code
MeCard format

MECARD:N:Appleseed,John;TEL:14085551212;EMAIL:john.appleseed@apple.com;;

Contact QR Code 2

 


Event QR Code
iCalendar format

BEGIN:VCALENDAR
BEGIN:VEVENT
SUMMARY:My event
LOCATION:My Office
DTSTART:20170125T090000
DTEND:20170125T100000
END:VEVENT
END:VCALENDAR

Event QR Code

 


WiFi QR Code

WIFI:T:WPA;S:mynetwork;P:mypasscode;;

WiFi QR Code

 


Safari

使用 Safari 在 QR Code 的圖片用 3D Touch 就能叫出選單,對於有些只有 QR Code 圖片卻沒有超連結的網頁很實用。
因為我部落格有裝 Lightbox ,所以進到 Lightbox 後再用 3D Touch 才有效。

 


 
資料來源
https://developer.apple.com/videos/play/tech-talks/206/
 

啟用 Brave Payments 來賺取 BAT 或其他獎勵

Brave Payments 是一個可以讓內容商獲利的方式,改進傳統廣告的缺點,打造用戶、內容商、廣告商三者之間的獎勵循環機制。想知道更多關於 Brave 瀏覽器與 Basic Attention Token (BAT) 可參考這篇文章

 

註冊 Brave Payments

先去 Brave Payments 註冊,經過驗證 Email 、輸入名字、兩步驟驗證後,就會進入儀表板畫面。

Brave Rewards 儀表板
空無一物的儀表板,請先連接 Uphold 帳號

 


連結 Uphold

點選 Connect to Uphold ,註冊或登入並連結 Uphold 。
步驟一 註冊基本資訊
步驟二 完成個人資訊填寫
步驟三 兩步驟驗證 (必須搭配 Authy)

 
註冊或登入 Uphold

 
Uphold 儀表板

 


選擇獎勵種類

回到 Brave Payments 儀表板並重新整理
選擇每月結算的法幣或加密貨幣

選擇轉換後的貨幣
可以選擇法幣或加密貨幣,這裡為避免麻煩直接用 BAT

 


新增頻道

點選 add channel

新增頻道
這裡以網站來示範,另外兩種只需授權帳號即可

 

選擇 Website 並輸入 domain ,不需管子網域。

 

選擇驗證方法
請選擇簡單的 trusted file 方法

依照指示下載檔案上傳至對應位置 .well-known
假如你的網址是 example.com ,那檔案完整網址就是 example.com/.well-known/brave-payments-verification.txt
可信任的檔案
依照指示下載檔案上傳至對應位置 .well-known

從信中點選 Private access link 完成驗證。

 


客製化贊助選單

點選 Tipping Banner 可設定贊助選單細項

贊助選單
從文字、圖片、連結均可設定

 

Brave 瀏覽器與 Basic Attention Token (BAT)

Brave 不僅僅是個瀏覽器,除了擋廣告的功能外,更想打造的是用戶、內容商、廣告商三者互利的獎勵機制,其中是透過 Basic Attention Token (BAT) 在三者之間流動。
 

Brave

瀏覽網頁比 Chrome 與 Safari 快最高 8 倍
行動端 8 倍,桌面端 2 倍

不用因下載不想要的內容造成多餘的流量花費
一個月省23元,一年可省 276 元

預設會阻擋不想要的內容並計算次數
受歡迎的網站平均都有 70 個廣告及追蹤,最領先的廣告阻擋器甚至還會允許追蹤你的位置、行為及瀏覽活動

賺取獎勵及回饋給最喜歡的內容商
透過捐獻區塊鏈代幣的小額付款贊助內容創作者

阻擋那些跟蹤分析的軟體程式碼
其他瀏覽器的隱私瀏覽模式並不是真的隱私,Brave 瀏覽器的 Tor 隱私視窗提功能供停止追蹤以及更深度的保護

 

整體 UI
簡單乾淨的介面

 

Brave Shields 預設值
通用設定,也可針對網站做個別設定。

 

Brave Shields 個別網站設定
點擊數字可以看更詳細的資訊

 

Brave Rewards 個別網站設定
有參與 Brave Rewards 計畫的網站會特別標示

 

Brave Rewards 開關

 

廣告
使用者透過觀看廣告取得分潤 (封閉測試中)

 

自動捐獻
可以選擇是否對未驗證的網站捐獻、對影片捐獻

 

小費
影片、推文、網站都可用單次的小費來贊助

 

錢包
備份及還原錢包、充值等操作都在這裡

 

Brave 是使用 Chromium 改來的,所以完全支援 Chrome 的擴充套件。
使用此推廣連結下載 Brave 瀏覽器,我能獲得一些 BAT ,當然也可以從官網上下載。

 


Basic Attention Token (BAT)

 

BAT 生態
BAT 生態

 

BAT 運作圖解
BAT 運作圖解

 

傳統的廣告,用戶面臨不必要的流量及耗電量、惡意軟體、侵犯隱私。內容商被廣告平台拿走大部分的營收、擋廣告的插件日益流行。廣告商被假冒網站及流量機器人欺騙,並且無法知道資金流向何方,用戶也無視廣告。

用戶觀看內容及廣告的同時保護用戶隱私,並根據本地機器學習注意力會被測量並轉成注意力代幣,代幣大部分將分給內容商,用戶也可捐獻給自己喜歡的內容商達到良性互動。

如果捐獻給未加入 Brave Rewards 的網站,每達到 100 美金就會先保留 90 天,並且會寄信給網域持有者,期限後則會回到使用者成長推廣池 (User Growth Pool) 裡。

目前只有加入封閉測試才能體驗到廣告,聽說是原版位直接置換成他家的廣告真是有夠邪惡。我也很好奇廣告商能看到的後台長怎樣,因為上一張圖廣告商及內容商之間是沒有匿名的。

如果有在經營網站、 Twitch 、 Youtube ...等等的內容創作者,可參考這篇文章取得 Brave Rewards 。前陣子也宣布將計畫支援 Twitter 及 Reddit ,可以期待一下。

 

產生針對 AR 優化的 USDZ 檔案

USDZ 可以想成 USD (Universal Scene Description) 的加強版,這是 Pixar 和 Apple 合作的新格式並針對 AR 優化,雖然是以 zip 封裝,但並沒有壓縮及加密,所以其他程式能直接調用。

目前沒有任何的 3D 繪圖軟體能原生支援此格式,也沒有插件可以使用,原因可能是因為要依附 Xcode 10 的 usdz_converter 工具來產生的關係,所以作業系統必須是 macOS 。

輸入來源可以是 obj 或 usda 格式,大部分的 3D 模型分享網站一定都會有提供 obj 的下載格式,可以從 SketchfabGoogle Poly 找免費的試試看。

 



xcrun usdz_converter cube.obj cube.usdz

使用此指令就能產生 usdz 格式了,但是 obj 使用後只有模型沒有材質!
usdz 採用的是 PBR (Physically based rendering) ,這方面我不懂就不多提了。


xcrun usdz_converter cube.obj cube.usdz \
-g cubeMesh \
-color_map cube_Albedo.png \
-metallic_map cube_Metallic.png \
-roughness_map cube_Roughness.png \
-normal_map . cube_Normal.png \
-emissive_map cube_Emissive.png \

反正就是依照圖檔名稱對應相對的指令即可。

 


xcrun usdz_converter -h

使用此指令能看到更詳細的說明


USAGE:
[options...]
Options:
-g groupName [groupNames ...] Apply subsequent material properties to the named group(s).
-m materialName [materialNames ...] Apply subsequent material properties to the named material(s).
-h Display help.
-a Generate a .usda intermediate file. Default is .usdc.
-l Leave the intermediate .usd file in the source folder.
-v Verbose output.
-f filePath Read commands from a file.
-texCoordSet set The name of the texturemap coordinate set to use if multiple exist (no quotes).
-opacity o Floating point value 0.0 ... 1.0
-color_map filePath
-normal_map filePath
-emissive_map filePath
-metallic_map filePath
-roughness_map filePath
-ao_map filePath
-color_default r g b a Floating point values 0.0 ... 1.0
-normal_default r g b a
-emissive_default r g b a
-metallic_default r g b a
-roughness_default r g b a
-ao_default r g b a

(*) Specify infield only with -v (Verbose) to display group information.
(*) '#' in the first character position of a line in a command file interprets the line as a comment.

 


查了一下能直接線上轉的網站只有 Vectary ,大概要等 Adobe 支援才會有更多人用吧。
有了 usdz 檔案就可以參考這篇文章在網站及 App 中顯示。

 


參考資料
https://developer.apple.com/arkit/
https://graphics.pixar.com/usd/docs/Usdz-File-Format-Specification.html

 

AR Quick Look 讓你在網站及 App 中展示 3D 模型及拍照

AR Quick Look 是 iOS 12 的新功能,可以在網站及 App 中展示 3D 模型,更可以在 AR 模式與之拍照。

以下分別是網站及 App 的程式碼,素材皆來自 AR Quick Look Gallery ,若想自行產生 usdz 格式的檔案請參考這篇文章

 


網站 (只有 iOS 12 Safari 實機才有效果)


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>AR Test</title>
</head>
<body>
<h1>AR Quick Look in Websites</h1>
<p>這是從 https://developer.apple.com/arkit/gallery/ 下載的模型,僅供測試用。</p>
<p>需使用 iOS 12 的 Safari 觀看。</p>
<a href="cupandsaucer.usdz" rel="ar">
<img src="cupandsaucer.jpg" width=200>
</a>
</body>
</html>

 


App (只有 iOS 12 實機才有效果)


import UIKit
import QuickLook

class ViewController: UIViewController, QLPreviewControllerDataSource, QLPreviewControllerDelegate {

override func viewDidLoad() {
super.viewDidLoad()

}

func numberOfPreviewItems(in controller: QLPreviewController) -> Int {

return 1
}

func previewController(_ controller: QLPreviewController, previewItemAt index: Int) -> QLPreviewItem {

let url = Bundle.main.url(forResource: "cupandsaucer", withExtension: "usdz")!
return url as QLPreviewItem
}

@IBAction func buttonPressed(_ sender: UIButton) {

let previewController = QLPreviewController()
previewController.dataSource = self
previewController.delegate = self
self.present(previewController, animated: true)
}
}

 


參考資料
https://developer.apple.com/arkit/

實現 iOS App 與網站之間互通的 Universal Links

Universal Links 是網站與應用程式之間的橋樑,可以將使用者從網站導引至應用程式。比如說有個網址是 http://www.example.com/book/12345678 ,在 iOS 上用 Safari 瀏覽時剛好也有安裝 App 端,網頁最上方就會出現一個  "在「XXX」App 中打開" 的橫幅,點擊就會開啟 App 端進到指定的頁面。

你可能對於 URL Schemes 不陌生,以前要從網頁連到 App 需要判斷是否有安裝該 App,然後分別連到 App 下載頁面或是開啟 App 到某一頁。現在有了 Universal Links 確實方便許多,至少已安裝的部分系統已經幫你處理好了。

 

Apple Developer 設定

先去 iOS App IDs 確定該 ID 的 Associated Domains 為啟用狀態。

 

Xcode 專案設定

Target → Capabilities → 打開 Associated Domains → + → "applinks:example.com"

 

Web 設定

新增一個 apple-app-site-association 檔案(沒有副檔名),內容如下:


{
"applinks": {
"apps": [],
"details": [
{
"appID": "D3KQX62K1A.com.example.DemoApp",
"paths": [
"*"
]
}
]
}
}

若已有這個檔案,只要加入 applinks 這個層級並保持 JSON 結構即可。
D3KQX62K1A 為 Team ID ,可以從這裡找到。
com.example.DemoApp 為 Bundle Identifier 。
paths 裡寫 "*" 代表整個網站都會處理,初期為測試方便所以先全部接收,如果只想接收 /book 就寫 "/book"。另外除了 "*" 也能搭配使用 "?" 及 "NOT" 使用。

將此檔案放在網站的 .well-known 資料夾下,整個網址就像這樣 https://example.com/.well-known/apple-app-site-association ,需注意必須要 https:// 開頭,如果有子網域也要分別作設定。每當 App 安裝或是更新版本才會去抓 apple-app-site-association 。

 

程式碼設定


func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([Any]?) -> Void) -> Bool {

// 來源是網頁或網址
if userActivity.activityType == NSUserActivityTypeBrowsingWeb,
let incomingURL = userActivity.webpageURL,
let components = NSURLComponents(url: incomingURL, resolvingAgainstBaseURL: true),
let path = components.path {

print("path = \(path)")

// 如果之前有做 URL Schemes 處理,可以搭配使用
/* 書籍資訊
https://www.example.com/book/12345678
com.example.DemoApp://book/12345678
*/
if path.hasPrefix("/book/"), let bookID = path.components(separatedBy: "/").last, bookID.count >= 10 {
// 跳轉到書籍詳細資訊
return true
}
return false
}

return false
}

 


 在 iOS 使用 Safari 瀏覽此網址,可以看到上方的橫幅。若沒有看到可以捲動一下頁面,它有時會隱藏。接著把網址放到備忘錄並對他長按放開,會多出一個 "在「XXX」中打開" 的選項。

 Apple 也有提供工具來檢驗,如果出現 Error no apps with domain entitlements 也不用太糾結,可能是有此功能的新版本未正式上線的關係,只要確定網頁上方有出現橫幅就是成功了。

 


 
參考資料
https://developer.apple.com/ios/universal-links/
https://developer.apple.com/documentation/uikit/core_app/allowing_apps_and_websites_to_link_to_your_content
https://developer.apple.com/documentation/uikit/core_app/allowing_apps_and_websites_to_link_to_your_content/enabling_universal_links
https://developer.apple.com/documentation/uikit/core_app/allowing_apps_and_websites_to_link_to_your_content/handling_universal_links

在 iOS App 裡實現密碼自動填寫

想像一下這個使用情境,某個服務有 Web 也有 App,若使用者有用 Safari 登入並記住密碼,那麼在 App 裡點擊 Text Field 的鍵盤會提示是否要用已儲存的密碼,點擊後帳號密碼就會填入對應的 Text Field 中,使用者完全不用自行輸入非常方便。

若要實現這功能需要從 App 以及 Web 兩邊都做設定,且系統需求為 iOS 11 以上。

 

Apple Developer 設定

先去 iOS App IDs 確定該 ID 的 Associated Domains 為啟用狀態。

 

Xcode 專案設定

Target → Capabilities → 打開 Associated Domains → + → "webcredentials:example.com"

 

Web 設定

新增一個 apple-app-site-association 檔案(沒有副檔名),內容如下:

{
    "webcredentials": {
        "apps": [
            "D3KQX62K1A.com.example.DemoApp",
            "D3KQX62K1A.com.example.DemoAdminApp"
        ]
    }
}

若已有這個檔案,只要加入 webcredentials 這個層級並保持 JSON 結構即可。
D3KQX62K1A 為 Team ID ,可以從這裡找到。
com.example.DemoApp 為 Bundle Identifier 。

將此檔案放在網站的 .well-known 資料夾下,整個網址就像這樣 https://example.com/.well-known/apple-app-site-association ,需注意必須要 https:// 開頭,如果有子網域也要分別作設定。每當 App 安裝或是更新版本才會去抓 apple-app-site-association 。

 


現在你可以試試先在網站登入並儲存密碼,儲存的密碼可在 設定 → 帳號與密碼 → App 與網站密碼 裡找到。

然後回到 App 的登入畫面裡點擊 Text Field 應該就可使用儲存的帳號密碼了,雖然這只是單向的。

 


你可能會發現並非所有的 Text Field 都會出現,因為預設是以 secureTextEntry 這屬性來判斷是否為密碼,若沒指定則需要另外要用 textContentType 來指定:


userTextField.textContentType = .username
userTextField.keyboardType = .emailAddress
passwordTextField.textContentType = .password

newPasswordTextField.textContentType = .newPassword
confirmPasswordTextField.textContentType = .newPassword

singleFactorCodeTextField.textContentType = .oneTimeCode

 

參考資料
https://developer.apple.com/documentation/security/password_autofill/
https://developer.apple.com/documentation/security/password_autofill/setting_up_an_app_s_associated_domains
https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_a_text_input_view

WordPress 關閉 wptexturize 功能避免符號被轉換

WordPress 會自動轉換一些符號,例如 "--" 會顯示成 "–" ,由於我會在部落格裡放 bash 語法,裡面一定會有 "--help" 這種字串,不解決會十分困擾。

查到的原因是 wptexturize 方法導致,雖然放在 pre, code, kbd, style, script, tt 標籤內的內容將會忽略而不會觸發 wptexturize 方法,但是這樣就會改變排版。

 

以下是變換前變換後的對照

"---"
"—"

" -- "
"—"

"--"
"–"

" - "
"–"

"..."
"…"

``

"hello
“hello

'hello
‘hello

''

world."
world.”

world.'
world.’

" (tm)"
" ™"

1234"
1234″

1234'
1234′

'99
’99

Webster's
Webster’s

1234x1234
1234×1234

 

將以下程式碼儲存成 disable-wptexturize.php 上傳放到 /wp-content/plugins 底下,再到後台安裝啟用這個外掛就能解決。


/*
Plugin Name: Remove the wptexturize filter
*/

add_filter( 'run_wptexturize', '__return_false' );

 

參考資料
https://codex.wordpress.org/Function_Reference/wptexturize
https://codex.wordpress.org/Plugin_API/Filter_Reference/run_wptexturize
https://geeksterminal.com/wordpress-double-dash-problem/1399/

海外遊戲進入中國市場的相關政策規範及如何克服涉入障礙 筆記

本文是 2018 台北遊戲開發者論壇 的其中一個主題演講筆記

海外遊戲進入中國市場的相關政策規範及如何克服涉入障礙
郭珈瑜 Abby (TapTap)

TapTap 是有媒體屬性與玩家有高互動性的第三方 Android 平台。

特色:
1. 推薦是根據遊戲本身是否好玩以及與該平台的玩家契合度
2. 未上市也可以用預約狀態來露出
3. 禁止刷榜或違規評論
4. 社區玩家的評論牆
5. 不需接 SDK
6. 下載方式有三種,從本平台或是 Google Play 、 App Store 上下載

建議從預約期間就建立遊戲頁面,並且使用論壇功能發布消息。發文內容可以從開發角度或是遊戲本身,像是開發日誌或是遊戲設定的分享,官方帳號會有藍色勾勾作為識別。

版號:遊戲在中國合法發布提供下載必須要有版號
1. 必須要有中國落地的發行商
2. TapTap 會免費協助版號申請
3. 遊戲需注意文字的內容及選題的規範

建議開發進度50~70%進行遊戲內容的評估,70%時進行軟體著作權的申請,100%申請版號。

利潤均不分成,商業模式為廣告系統。

「不只是美術而已」技術美術之路 筆記

本文是 2018 台北遊戲開發者論壇 的其中一個主題演講筆記

「不只是美術而已」技術美術之路
黃香菱 (曉數碼)

何謂技術美術
懂技術的美術人員、程式與美術的溝通橋樑
技術向TA:渲染、特效、優化等的工具製作
美術向TA:美術資深人員懂得與程式人員溝通,且對於新技術接受度高
廣義 TA:任何工作內容同時包括程式與美術的人員

技術美術的工作內容
工作核心:綜合的問題解決,沒有明確答案的問題

1. 建立美術的工作流程
2. 美術相關工具製作 (自動化)
3. 美術效果的研究 (特效、粒子等)
4. 效能優化
5. 大量的溝通

專案支援的三階段變化
1. 前期配合企劃、美術的需求去研究會用到的技術
2. 中期整理好美術流程、美術工具的開發
3. 後期優化效能及解決美術相關 Bug

美術轉職成TA
1. 有完整的參與美術製作流程的觀念
2. 學習遊戲引擎與shader引擎
3. 學習電腦圖學
4. 3D 繪圖
5. Google 力
6. 程式語言、英文能力

技術美術的特質
1. 具有美術基礎
2. 好奇心
3. 善於溝通
4. 耐心
5. 熱情