[VS Code] Markdown 編輯與預覽

自從 Visual Studio Code(以下簡稱 VS Code)推出之後,Atom 就被我移除了,並和 Sublime Text 一起使用,以彌補 VS Code 的不足。目前使用 Sublime Text 做網頁開發(因為許多網頁開發的插件用習慣了),其他的程式開發和檔案編輯則使用 VS Code。我覺得 VS Code 有兩個強大之處,首先是開大檔案的速度,其次是編輯 Markdown。關於開大檔案的速度,我之前的文章有分享過,就不再介紹了,本篇要介紹的是 VS Code 的 Markdown  功能。

Markdown 編輯與預覽

安裝

其他包括 Atom 或是 Sublime Text 編輯器,在編輯 Markdown 檔案時都要另外安裝插件。至於 VS Code 則不需要額外安裝其他插件,它內建就提供了 Markdown 的編輯與預覽功能。所以只要裝好 VS Code 就能編輯 Markdown,根本可以把其他 Markdown 編輯器丟了!

編輯與預覽

在 VS Code 上開啟 .md 檔,因為 VS Code 已內建 Markdown 功能,當辨識到 md 檔時,就會自動顯示 Markdown 高亮語法。
VS Code

按下快捷鍵 Ctrl + Shift + V(Mac的快捷鍵是 Command + Shift + V),會開啟 Markdown 的預覽畫面。但另開一個預覽畫面,編輯檔案和預覽畫面還要切換,不是很方便。
VS Code

沒關係只要改成並排顯示,左畫面是編輯,右畫面是預覽,當編輯檔案時,預覽畫面會即時變更,不管捲動哪邊的畫面,另一邊也會一起捲動,所看即所得喔!
VS Code

分類:

[Cloudflare] 新舊網址的轉址

網站如要更換網域名稱,一般來說有很多種作法,能讓用戶從舊網址瀏覽時,自動轉址到新網址,其中使用Cloudflare的「Page Rules」轉址服務可能是最方便的,不僅不用寫程式,還能自訂很多規則,真是太好用了!

設定


登入Cloudflare之後,到舊網域的「Page Rules」,按下「Create Page Rule」新增規則 。(設定轉址規則之前,請先完成新網域的設定與轉換)


Cloudflare的「Page Rules」提供很多規則,其中我們使用「Forwarding URL」來設定網址轉址,選定Forwarding URL之後,右側要選「301 - Permanent Redirect」,它會使用 HTTP 的狀態 301 來做轉址。網站設定的部分,假如要從 http://blog.aaa.com/ 包含以下所有連結都轉址到 http://blog.bbb.com/,就按照下圖方式設定。上方的星號(*)對應到下方的($1),星號代表變數,因此如有多個星號,下方要增加相對應的($1, $2...)等符號。然後按下「Save and Deploy」,等待幾分鐘後,規則就會生效了。

這裡的設定表示,將 http://blog.aaa.com/ 以下全部路徑都 Redirect 到 http://blog.bbb.com/ 相對應的路徑,也就是說 http://blog.aaa.com/2017/01/01/post.html 這個路徑會自動轉到 http://blog.bbb.com/2017/01/01/post.htm。

轉址全部的 CNAME

當然也能設定更複雜的規則,例如我們想將某個網域下全部的 CNAME,都轉址到新網域相對應的 CNAME,只要按照下面的方式設定一個規則就行了!


分類:

非付費開發者的 iOS 實機測試

在過去,只有付費開發者才能在實機上安裝 iOS App,但自從 Xcode7之後, 已經放寬限制,允許非付費開發者,在申請 Apple 開發者計畫之前,也能在實機上測試 App。

設定步驟可參考這篇文章

不過這篇文章沒說的是,以這種方式產生的開發者憑證只有七天效期,憑證到期之後,只要再透過 Xcode 重新將 APP 部署到實機,就能恢復使用,憑證效期也自動延長七天,當然七天後仍需重新部署,否則仍然無法使用。

也許蘋果用這種方式強迫開發者付費,因為付費後拿到的憑證效期是一年。

分類:

繁簡中文轉換 OpenCC

最近在做繁簡中文的科技翻譯,我本身用的是繁體中文,市面上雖然有不少繁簡轉換的工具,例如「同文堂」,但它僅能用於網頁,Word也有繁簡轉換的功能,可是它是逐字翻譯,實際使用起來,功能上仍有不足。

我們都知道,繁簡中文轉換最困難的是術語的轉換,例如 Document,台灣叫「文件」,大陸叫「文檔」;File,台灣叫「檔案」,大陸叫「文件」;Column,台灣叫「欄位」,大陸叫「字段」。關於術語的轉換,前輩侯捷大師有先見之明,早在二十多年前就整理了一份繁簡術語對照表

今天,在 GitHub 上則出現了一個「開放中文轉換」的開源專案,這個專案能轉換大陸、台灣、香港三地的習慣用詞,非常強大。

可以使用這個網站做線上中文轉換 http://opencc.byvoid.com/

因為開源的關係,也產生不少相關的應用,如果你有使用 Sublime Text 編輯器,可以安裝 ChineseOpenConvert 這個套件,就能在 Sublime 直接做繁簡中文的轉換。


分類:

WordPress 搬移方法

如果將 WordPress 放置在免費的 VPS 空間,可能時常會遇到因為環境不穩定,而需要搬遷到其他 VPS 的狀況。以下就來說明  WordPress 搬遷的步驟:

資料匯出

多數 VPS 無法直接備份資料庫,要匯出資料,只能透過 phpMyAdmin 介面。先登入到舊站的 phpMyAdmin,選擇「匯出」功能

(phpMyAdmin 的介面,可能會因爲 VPS 提供的版本而有差異)

 選擇「儲存為檔案」

為了簡化程序,這裡只勾選資料,我們只需要將資料匯出後,再匯入到新站的資料庫

指定資料新增前先清除舊資料,以避免資料重複,最後按下「執行」,下載 SQL 檔


檔案匯出

使用 FTP 工具,或 VPS cPanel 提供的線上檔案工具,將 wp-content 資料夾匯出。如果 VPS 有提供線上壓縮功能,可以先將該資料夾壓縮,再下載壓縮檔,以節省檔案下載的時間


新建環境

在新站建立全新的 WordPress 環境,某些 VPS 會提供一鍵安裝的功能來安裝 WordPress,或者可直接從 WordPress 官網下載安裝檔來安裝

資料匯入

登入新站的 phpMyAdmin,使用「匯入」功能,將剛才從舊站匯出的 SQL 資料檔上傳,選擇不要自動遞增,然後按下「執行」開始匯入


檔案匯入

使用 FTP,或 VPS cPanel 提供的線上檔案工具,將舊站的 wp-content 資料夾上傳到新站,並覆蓋原先的檔案

設定網址

如果要搬遷的 WordPress 有自訂網址,請將網址指向新站
如果沒有自訂網址,則要從 phpMyAdmin 將 wp_options table 的 siteURL 和 home 修改成新站 VPS 提供的網址。





分類:

[iOS] 使用 AVSpeechSynthesizer 實現文字轉語音 (TTS) 功能

iOS 7 開始提供 TTS(Text to Speech) API,可以實現文字轉語音的功能。

範例程式畫面如下,由 Text Field 和 Button 組成的簡單畫面。
首先要在專案中加入 AVFoundation.framework 這個函式庫
然後開始撰寫程式,要先匯入 AVFoundation 函式庫
import AVFoundation
Button 的程式碼如下:
let synth = AVSpeechSynthesizer()
    var myUtterance = AVSpeechUtterance(string: "")
 
    @IBAction func textToSpeechButton(_ sender: UIButton) {

        myUtterance = AVSpeechUtterance(string: txtFieldText.text!)
        myUtterance.rate = 0.4
        myUtterance.pitchMultiplier = 1.2
        myUtterance.postUtteranceDelay = 0.1
        myUtterance.volume = 1
        myUtterance.voice = AVSpeechSynthesisVoice(language: "zh-TW")
        synth.speak(myUtterance)
        
    }
utterance 可用的屬性如下,上面的數值已經是經過調整後,聽起來較正常的聲音:
  • rate:發音速度,數值越大讀的越快
  • pitchMultiplier:音高
  • postUtteranceDelay:讀完一段話後的停頓時間
  • preUtteranceDelay:讀一段話之前的停頓時間
  • volume:音量
  • voice:使用的聲音(可以指定不同語系的語言)
完成以上的程式,模擬器已經可以正常運作,可是實體機仍沒有聲音,要讓實體機有聲音,請在 viewDidLoad 加入以下程式碼
do{
            try AVAudioSession.sharedInstance().setCategory(AVAudioSessionCategoryPlayback)         
            do{
                try AVAudioSession.sharedInstance().setActive(true)
            }catch{
                
            }
        }catch{
            
        }

完整程式碼如下

分類:

[iOS] CocoaPods 套件管理工具的安裝

最近終於決定踏入 iOS 開發的領域,要寫 iOS,除了要有一台 Mac 之外,還得要安裝 4.43 GB 的 Xcode。然而,Xcode 不像 Android Studio 使用 Gradle 做套件管理和自動化建置,它需要依靠第三方工具來做套件管理,較著名的是 CocoaPods。

安裝 CocoaPods

在安裝之前,請執行下面的指令,先將 Ruby 升級到最新版本
sudo gem update --system

然後開始安裝 CocoaPods
sudo gem install cocoapods

這樣就裝好了

設定 CocoaPods

完成安裝之後,要執行下面的指令,
pod setup
你會發現,它會停在「Setting up CocoaPods master repo」沒有反應,其實背後是在執行程式下載的動作。

也可以使用 --verbose 參數,顯示安裝過程
pod setup --verbose
等待約十五分鐘才會執行完畢,這個設定的動作是將程式下載到 /.cocoapods 目錄下,可以查看這個目錄的大小,有 852 MB!


參考資料:[StackOverflow] Pod install is staying on 「Setting up CocoaPods Master repo」

開始使用 CocoaPods 管理套件

首先,在專案根目錄下執行以下指令,它會自動生成 Podfile 設定檔
pod init
使用文字編輯器編輯 Podfile,加入你要使用的第三方套件。

最後執行安裝指令。
pod install
需等待一段時間,套件會被安裝到 /Pod 目錄下,還會產生 XXX.xcworkspace 檔案,之後要開你的專案就要選這個檔案,不是 XXX.xcodeproj。

分類:

[Android] 使用 Calligraphy 自訂字型

要更改 Android App 的字型,正常的做法是使用 setTypeface,改變 TextView 的字型。可是一旦要變更的 TextView 很多的時候,修改起來相當費時。

Calligraphy 這個函式庫使用注入的方式,自動尋找 Activity 中 TextView,並設置其使用的字型。

先安裝函式庫,然後將你要變更的字型檔放到 assets/ 目錄下
dependencies {
    compile 'uk.co.chrisjenx:calligraphy:2.2.0'
}

在 Application 的 onCleate 初始要使用的字型
@Override
public void onCreate() {
    super.onCreate();
    CalligraphyConfig.initDefault(new CalligraphyConfig.Builder()
                     .setDefaultFontPath("fonts/Roboto-Regular.ttf")
                     .setFontAttrId(R.attr.fontPath)
                     .build()
            );
    //....
}
然後在 Activity 的 attachBaseContext 方法中注入 CalligraphyContextWrapper。
@Override
protected void attachBaseContext(Context newBase) {
    super.attachBaseContext(CalligraphyContextWrapper.wrap(newBase));
}

這個 Activity 中的 TextView 字型就會全部改變了,如果有 BaseActivity 的話,建議加在 BaseActivity。

分類:

Copyright © Andy Cheng

Distributed By My Blogger Themes | Blogger Theme By NewBloggerThemes Up ↑