Quasar + SSR + Quill WYSIWYG Editor

透過 npm 安裝 quill editor

npm install vue-quill-editor

在 Quasar SSR 模式之下需要另外設定 boot file，首先在 boot 資料夾內新增 quill.js 檔案 :

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme

Vue.use(VueQuillEditor, /* { default global options } */)

export default ({ app, ...

...

Read More

NodeJS 後端取得 Google Play Games 玩家資訊

玩家在 Android 裝置登入 Google Play Games 之後可以取得 Server Auth Code (參照 這裡)，後端可利用 Server Auth Code 取得玩家的 Access Token，再由 Access Token 取得玩家資訊 (取得玩家資訊的 API 參照 這裡)。

底下是 NodeJS 利用 Server Auth Code 取得...

Read More

Bootstrap 4 Navbar Style 調整

此文記錄在 Vue 架構下調整 Bootstrap 4 Navbar style，讓它與 Bootstrap 3 Navbar 相同。調整項目如下 :

1. 點選 Dropdown Menu 時不出現藍色外框 ( 似乎是 Safari 上才會出現 )。
2. 被滑鼠指標 hover 的 Dropdown Menu 項目顯示藍底白字。
3. Active Navbar 項目顯示深底色白字。
4. Dropdown Menu 增加陰影。

下圖是 Bootstrap 4 Navbar 在 Safari 上點選 Dropdown Menu 時的擷圖 :

...

Read More

Vue 2.6 + Bootstrap 4

1. 首先安裝 vue-cli ( 安裝的版本是 4.1.2 )

npm install -g @vue/cli

2. 利用 vue-cli 建立 project

vue create my-vue-project

出現 present 選項時直接選擇預設選項 default (babel, eslint)，完成之後會建立一個 my-vue-project 資料夾，在資料夾內執行 npm run serve 之後用瀏覽器連線至 http://localhost:8080/，成功的話可以看到 welcome to vue 的預設畫面。

3....

Read More

Konva.js + Spot light effect (Masking)

這篇文章提供利用 Konva.js 實現 Spotlight 效果之範例。

...

Read More

Unity 3D + V-HACD

碰撞偵測在物理動力模擬是不可缺少的功能，兩個複雜多邊形物體在執行碰撞偵測時需要做很多幾何運算，因此若要遊戲的畫面能夠流暢顯示，遊戲中的碰撞偵測就必須要能達到 real-time 的等級，目前能夠快速執行碰撞偵測的演算法[1][2]幾乎都是基於 Convex Collider 去計算(Unity 3D 使用的物理引擎 PhysX 也包括在內)。

現實世界裡大部份物體都不屬於 Convex 多邊形物體 (Nonconvex Polyhedra)，這些 Nonconvex 多邊形物體也稱為 Concave 多邊形物體，為了解決無法對 Concave Collider 進行碰撞偵測的問題，可以把 Concave 多邊形分解成多個 Convex 多邊形。V-HACD[3]就是一個分解 Concave 多邊形的演算法，它所產生的 Convex 多邊形並非完全等於原始多邊形，它的目標是以少量的...

Read More

Facebook BUCK with multidex

程式開發後期通常會遇見 Building Apps with over 65k methods 的問題，底下是利用 BUCK 執行編譯時遇到此問題的解決方法 (啟用 multidex 功能之設定檔的筆記) 。

BUCK :

...

# setup multidex jar
prebuilt_jar(
  name = 'support_multidex',
  binary_jar = 'com.android.support/multidex/1.0.0/jars/classes.jar',
 ...

...

Read More

Android DexClassLoader 續

之前介紹的方法讓我們的程式可以在執行時期動態載入其它的程式碼，後來發現 Facebook 的 Buck 當中也有類似的功能 ( Exopackage )，但它實作的方法和之前介紹的方法不同，底下敘述使用 Buck 的方法，並套用在前一篇範例上的流程 :

1. 製作 dex 檔案 :
與前一篇介紹的方法相同

2....

Read More

Android : 建立並安裝 自我簽署憑証 ( Self-Signed Certificate authority )

在安全性的需求之下我們使用 https 代替 http 連線，而 server 端開啟 https 服務需要設定相關的憑証，這些憑証要向具有公信力的機購購買，但在開發時期我們可以自己產生，根據這裡的資料，製作 X.509 version 3 的 self-signed CA certificates 可以避免大多數行動裝置無法安裝的問題，底下步驟是敘述製作以及在 Android 上安裝 self-signed CA certificates 的流程。

A. 製作 self-signed CA certificates

1....

Read More

Android webview 處理 Line it intent

最近有個需求是要在 webview 上處理 LINE it 按鈕的連結，這裡做個筆記 :

1. 使用 shouldOverrideUrlLoading 攔截轉跳的 url 連結。
2. 攔截 intent:// 開頭的 url
3. 此時應該會有一個 intent 看起來像這樣 :

intent://msg/text/DUMMY_MESSAGE#Intent;scheme=line;action=android.intent.action.VIEW;category=android.intent.category.BROWSABLE;package=jp.naver.line.android;end

4....

Read More