2017年5月16日

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

A+
emoji-unicode-input-helper-bookmark-Emoji 表情符號輸入小幫手 (書籤工具)前陣子有讀者留言時使用 Unicode 表情符號,覺得效果還不錯,語意看起來活潑許多,因此決定動手做個表情符號的輸入工具。

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

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

(圖片出處: pexels.com)


一、書籤工具介紹


1. 一般外掛的隱憂

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

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

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


2. Unicode 的優點

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

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


3. 書籤版

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


4. 需要有網路空間

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



二、執行效果


emoji-unicode-input-helper-bookmark-1-Emoji 表情符號輸入小幫手 (書籤工具)

上圖為點擊標籤工具後的效果,螢幕上會彈出「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>
首先有幾個地方需要修改:


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

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

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



四、補充說明


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

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

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


更多字型相關文章:

6 則留言:

  1. 謝謝你的程式, 以小視窗方式展示, 有極好效果及便利.
    圖形方面, 可能跟我所使用的 Win10 不太相容.(win10顯示為彩色介面)
    e.g. 時鐘分類, 開首的 1⃣ 到0⃣ 會以半格貼上, 跟隨的文字會貼上它的一半. 1⃣2⃣3⃣4⃣
    and
    我有做 Emoji blogspot 的顯示, 但是沒有輸入的工具.
    http://freetongdiy.blogspot.hk/2016/05/2016-v2-unicode-emoji.html
    這個正好解決輸入問題.
    因為我希望輸入&顯示的都可以相容至 WinXp ~ Win10,
    相信需要修改Emoji的內容, 及出現的方式(類似 コーさん 寫的「表情符號」)
    現請求準許 程式使用,修改內容,修改顯示方式 使用在我的Blog裡. 謝謝.

    回覆刪除
    回覆
    1. 謝謝回報,我用 Win8 測試不會(Win8 也是顯示彩色字型),我再找機會測測 Win10 的效果喔~

      要相容 XP、改程式沒問題的~ 👌

      這程式其實非常簡單,請自行修改吧,但版權部分的 code 需要加密,所以主程式的部分你看不到,只能自己寫了.

      如果主程式不動,只改圖示、CSS 的話,還是會顯示我的版權 logo 喔,提醒一下~ 😉

      刪除
    2. 測試 Emoji 表情符號輸入小幫手 (書籤工具)...
      Windows 10 專業版 版本 1703
      Chrome 版本 58.0.3029.110 (64-bit)

      😄💛☕☕🎨1⃣2⃣3⃣🆗🆕5⃣5⃣6⃣0⃣

      你好, 以上是測試內容. 做了 YouTube 影片, 比文字說明好得多.
      https://youtu.be/ri1jSf7Fjyk

      刪除
    3. 原來如此,我看影片的彈跳視窗中,1⃣ ~ 0⃣ 這幾個符號,就已經顯示不正常了,難怪複製到留言框時,顯示也不正常(不過送出留言後我看顯示都是正常的)。

      猜測也許是每個系統的 unicode 字型檔不太一樣,我的 win10 沒有這樣的狀況。既然 1⃣ ~ 0⃣ 這幾個符號,在不同 unicode 字型的顯示會有相容性問題,也許你可以移除這幾個符號,我們的討論串就讓其他使用者參考,可自行決定是否移除 js 檔中的這幾個字元符號~

      刪除
  2. 我應該用原程式碼,只修改包裝& Emoji.
    謝謝

    回覆刪除
    回覆
    1. 今天有機會測試 win10,使用瀏覽器為 Chrome 最新版本,測試輸入:

      1⃣2⃣3⃣4⃣ → 看起來沒什麼問題
      😄🍖🍙 → 彩色也 ok

      也許請說說使用的瀏覽器版本?

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。