Hiển thị iOS emoji với shortname cho PHP/Laravel
PHP
74
Laravel
20
Package
1
Composer
4
White

Cùi Bắp viết ngày 05/04/2016

Giới thiệu

Việc dùng shortname để thay cho emoticon thật không xa lạ gì với mọi người. Chẳng hạn ngay trong Kipaplog, khi bạn gõ :joy: thì bài viết sẽ hiện emotion :joy: tương ứng.

Việc xử lý parse alias sang emoji thì không hề khó, chỉ đơn giản là sử dụng regex và replace đoạn text nhập vào. Vấn đề mình thấy khó hơn cả là việc kiếm được một bộ dữ liệu ảnh và shortname dùng được trên cả client vào server.

Khi bắt đầu code một ứng dụng liên quan tới chat, mình đã gặp phải vấn đề này. Có rất nhiều hướng để thực hiện phần emoji Picker ở client và phần emoji Parser trên Server.

Trong bài này mình sẽ đi về hướng giống Kipalog đang làm. Sau khi tham khảo ý kiến từ anh @VuNhatMinh
Khi nhìn vào hình bên dưới mình cứ nghĩ đó là 1 list các ảnh liên tiếp, nhưng thực tế không phải vậy :astonished: . Đó là 1 ảnh background duy nhất. Vậy làm sao kiếm ra được bộ CSS Image Sprites cũng là cả một vấn đề.
alt text
Và bộ Sprites đó còn có bộ shortname trùng với gem RubyKipalog đang dùng để hiển thị ảnh emoji.
alt text

Giải quyết

1. Dữ liệu shortname/image tương ứng

  • Để giải quyết được vấn đề trên thì trước hết chúng ta cần có bộ dữ liệu shortname và ảnh tương ứng. Phần này mình đã làm bằng cách đọc file font của Apple với đường dẫn sau: /System/Library/Fonts/Apple\ Color\ Emoji.ttf
  • Cần một chút kiến thức về utf-8
  • Dữ liệu lấy được lưu lại vào file .txt hoặc .json
  • Ảnh thu được có thể resize tùy bạn :v

2. Client: Emoji Picker

  • Code một đoạn mã nodejs để ghép các ảnh lại thành file .svg, đồng thời gen ra file .css từ file json lấy được ở phần một. alt text
  • Sau cùng dùng imagemagick chuyển file .svg sang .png. Chẳng hạn như ảnh bên dưới: alt text
  • Khi nào có thời gian mình sẽ publish toàn bộ phần xử lý và thư viện phần này lên bower.

3. Server: Emoji Parser

  • Do không rành ruby, vả lại hệ thống đang phát triển chạy trên PHP, nên đành phải code lại, cũng khá đơn giản, chỉ cần dùng regex là ok. Hiện tại đã publish nó lên Packagist.org . Mọi người có thể tải về và dùng, bên trong Package cũng có bộ data cho shortname và ảnh luôn.
  • Để sử dụng chỉ cần thêm vào file composer.json rồi chạy composer update là được.
{
    "require": {
        "laravel/framework": "5.*",
        "euclid1990/php-ios-emoji": "~1.0"
    },
    "minimum-stability": "stable"
}
  • Thư viện có thể chạy trực tiếp mà không cần Laravel 5. Tham khảo code demo/run.php
  • Kết quả:
$text = "Parse the emotions: :smiley: :smile: :baby: :blush: :relaxed: :wink: :heart_eyes: :kissing_heart: in this string.";
Emoji::parse($text);

alt text

Kết luận

  • Sau khi mất công đi làm lại tất cả từ A-Z thì phát hiện cũng có một cơ số thư viện hỗ trợ :joy: và làm tốt hơn mình :cry:
Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Cùi Bắp

16 bài viết.
78 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
66 3
Bài viết này được dịch từ (Link) https://code.facebook.com/ mà theo mình khá hữu ích đối với web developer. Trong hai năm qua, Facebook đã làm việ...
Cùi Bắp viết 1 năm trước
66 3
White
44 9
Bài viết này xin đề cập tới Nginx Load balancing 1. Thế nào Load Balancing Load Balancing hay còn gọi là Cân bằng tải ?? một kỹ thuật thường đượ...
Cùi Bắp viết hơn 1 năm trước
44 9
White
18 0
Nhân tiện vừa đọc bài viết liên quan tới OpenCV trên Kipalog, nên em xin giới thiệu về giải thuật sinh ảnh mosaic từ một ảnh gốc. Không hiểu sinh ả...
Cùi Bắp viết gần 2 năm trước
18 0
Bài viết liên quan
White
2 2
Bash script to fast serve Laravel project Lười gõ dòng lệnh quá nên tạo ra cái script để gõ nhanh :D laravelstart.sh /bin/bash if z "$1" ] ...
Vũ Hoàng Chung viết 11 tháng trước
2 2
White
24 8
Hi cả nhà, đây là bài viết đầu tiên của mình trên Kipalog nên có gì không hay mong các bạn thông cảm :D Realtime là gì ? Như chúng ta đều đã biế...
Nguyễn Thế Huy viết 3 tháng trước
24 8
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
16 bài viết.
78 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!