Emoji 表情符號輸入小幫手 (書籤工具)

前陣子有讀者留言時使用 Unicode 表情符號，覺得效果還不錯，語意看起來活潑許多，因此決定動手做個表情符號的輸入工具。

其實這類的留言輔助工具，在網路上已經可以找到一些，而寫部落格的初期，也曾思考過是否安裝這類的外掛。但這畢竟算是使用率較低的工具，如果為了花俏的功能而拖慢網頁載入的速度，我認為並不值得，因此一直擱置這個構想。

那麼現在重啟這個計畫，是因為找到了不錯的解決方案，部落格不用特別安裝外掛，自然也不會影響網頁載入速度。

(圖片出處: pexels.com)

一、書籤工具介紹

1. 一般外掛的隱憂

目前在網路上能找到的解決方案，主要是用 "圖片" 的方式來顯示表情符號，那麼會有兩種隱憂：

• 外掛連結：作者不再維護、或網頁空間失效
• 圖片連結：圖床失效

不管是哪種失效，將來都會很麻煩，可能表情符號的圖片會變成叉燒包，或是留下一串亂碼字串。詳情的說明可參考「Emoji 表情符號輸入小幫手 (網頁版)」→「二、其他工具」→「使用圖案、表情圖案外掛」


2. Unicode 的優點

使用 Unicode 表情符號，就不用擔心圖片連結失效的問題，而且還可以跨平台顯示，能確保文章、留言使用的符號，將來都不會不見。

而為了讓不同作業系統版本可以顯示，此工具只挑選 Win7 可顯示的 Unicode 特殊符號，以確保相容性。


3. 書籤版

將這個外掛工具做成書籤執行，網站就不必每次載入頁面時都執行外掛，把執行權交給使用者決定，需要輸入表情符號時，才點擊書籤執行工具。。


4. 需要有網路空間

為了能用書籤執行，使用者必須有網路空間存放 js 外連，例如 Dropbox、Github 等，安裝步驟會多一些。

二、執行效果

上圖為點擊標籤工具後的效果，螢幕上會彈出「Emoji 表情符號輸入小幫手」視窗，點擊圖案後，即可貼在留言框。

想要先測試這個工具的效果，可在「Emoji 表情符號輸入小幫手」操作網頁版的功能，基本上跟書籤版的介面大同小異。

三、安裝步驟

<a href="javascript:var emojiTop = 50, emojiRight = 10, getScript=function(d,f){var e=document.createElement('script');if(e.readyState){e.onreadystatechange=function(){if(e.readyState=='loaded'||e.readyState=='complete'){e.onreadystatechange=null;if(f){f()}}}}else{e.onload=function(){if(f){f()}}}e.src=d;document.documentElement.firstChild.appendChild(e)},callback=function(){jQuery.getScript('https://drive.google.com/file/d/0BykclfTTti-0WkNQRXZWQ1BUaDg/view')};getScript('https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js',callback);">將此連結拖曳到書籤列或加入書籤</a>
首先有幾個地方需要修改：

• 藍色數字 50 及 10 分別代表執行後，彈出視窗與螢幕上方、及右方的距離(px值)
• 由於「Google Drive 關閉外連」功能，綠色字串的 JS 網址是無法外連的，請參照「WFU BLOG 外連 JS 變更及操作說明」，將這個連結下載後存成 JS 檔，上傳到自己的空間，或使用「Dropbox 外連產生器」。取得自己的 JS 檔外連後，置換原本的綠色網址字串。

完成以上修改後，可以開始製作書籤連結，有兩種方式：

1. 如果熟悉如何製作書籤的話，請將全部有顏色的字串(含改過的 js 連結)複製，貼到書籤的連結即可使用

2. 如果對書籤製作不熟悉，以 Blogger 為例，可開一篇新文章，貼上所有程式碼(含改過的 js)，儲存後即可看到文章內的這個超連結。然後直接將超連結拖曳到書籤列即可使用。

四、補充說明

1. 要叫出「表情符號輸入小幫手」時，點擊製作好的書籤即可。

2. 第一次執行時，可能會花個 3~5 秒鐘，因為必須載入一個 jquery 連結 + 外掛 js 連結。

3. 第二次以後執行就很快了，應該 1 秒內就會出現，因為瀏覽器會對這兩個連結檔案快取，不會真的讀取 js 外連。

更多字型相關文章：