emojioneを使う - k01ken’s b10g

開発環境は、Windows 7 Professional(32bit)+Firefox 58.0.2(32ビット)+jQuery 3.2.1。

1.サイトへアクセスする
GitHub - emojione/emojione: EmojiOne™ is the open emoji standard. #iwantemojione
2. /lib/js/emojione.min.jsへアクセスし、コピペしてemojione.min.jsという名前で保存する。
3./extras/css/emojione.min.cssへアクセスし、コピペしてemojione.min.cssという名前で保存する。
4.簡単なコードを書いてみる

<!-- headタグ部分 -->
<script src="jquery-3.2.1.min.js"></script>
<script src="emojione.min.js"></script>
<link href="emojione.min.css" rel="stylesheet">
<script>
$(function(){
	$(document).on('click','.emojione',function(){
		var i = $('.emojione').index(this);
		var title = $('.emojione').eq(i).attr('title');
		$('#add_emoji').append(emojione.toImage(title));
	});

	$("#emoji_btn").on('click',function(){
		$('#emoji').html( emojione.toImage($('#emoji').html()) );
	});

	$("#emoji_btn2").on('click',function(){
		alert( emojione.toImage($('#emoji').html()) );
	});
});
</script>

<!-- bodyタグ部分 -->
<input type="button" id="emoji_btn" value="絵文字変換">
<input type="button" id="emoji_btn2" value="HTMLチェック">
<div id="emoji" style="margin:10px;border:1px solid #eee;border-radius:5px;width:300px;">
:smile: :cry: :rage: :joy: :blush: :smirk: :heart_eyes: :fearful: :imp: :angry: :yum: :heart: :broken_heart: :thumbsup: :thumbsdown: :shit:
</div>
<div id="add_emoji"></div>

絵文字変換と書かれたボタンをクリックすると、文字列が対応した絵文字の画像に変換します。画像は持っていないのに、どこから入手しているかというと、CDN経由でダウンロードしているみたいです。別にサーバーを立ち上げた環境でやらなくても、ダウンロードできました。HTTP/2.0 304 Not ModifiledというHTTPステータスコードでした。

今度は、HTMLチェックと書かれたボタンをクリックすると、文字列が画像に置き換わっているHTMLコードが確認できます。

最後に、各絵文字の画像をクリックすると、下部に、その絵文字の画像と同じ画像が表示されます。

実行結果
f:id:k01ken:20180524212335p:plain