docomo 이모티콘을 스마트폰 사이트에서 표시 ①

6859 단어 유니코드자바스크립트이모티콘

  • 유니코드 형식의 docomo 이모티콘을 스마트폰 사이트(for iOS/Android)로 표시합니다.
  • 이모티콘의 예 : 맑은 마크의 경우 → 
  • HTML 파일은 UTF-8 형식을 가정합니다.

  • 이것은 중요합니다만, 결국은 이미지(CSS스프라이트)로 표시로 합니다.
  • iOS와 Android의 차이나, Android 단말의 기종 의존을 생각하면, 이미지로 표시하는 것이 현재 베스트 프랙티스일까라고.
  • 그래서 특히 스마트폰에 한정하지 않고, PC등에서도 표시할 수 있습니다.

  • docomo 이모티콘에 한정되지 않고, 이번 이용하는 JS 라이브러리는 au, SoftBank 의 이모티콘도 대응하고 있는 것 같습니다(미검증).

    • 데모


  • 이쪽을 봐 주세요.
  • h tp : // h 쿠스. 기주 b. 이오/에모지_js_에서도/


    • 사용하는 라이브러리


  • 이 JavaScript 라이브러리를 사용합니다.
  • htps : // 기주 b. 코 m / 후엔 gmk2 / 에모지
  • 변환 맵은 이것과 같습니다.
  • htp : // 여기. 오, m? 코 m/php/에모지/



    • docomo 이모티콘 정보


  • docomo 사이트에서 설명합니다.
  • 기본 이모티콘
  • htps //w w. 응 t 어디도. 이. jp/세 rゔぃせ/에서 ゔぉぺr/마케/곤텐 t/피 c와 g 등 ph/바시 c/ 어서 x. HTML

  • 확장 이모티콘
  • htps //w w. 응 t 어디도. 이. jp/세 rゔぃせ/에서 ゔぉぺr/마케/곤텐 t/피 c와 g 등 ph/에 x 텐치온/그리고 x. HTML


  • docomo 이모티콘 입력 도구
  • docomo는 입력 도구 "i 이모티콘"을 제공합니다 (단, Windows 용).
  • htps //w w. 응 t 어디도. 이. jp/세 rゔぃせ/에서 ゔぉぺr/마케/콘텐 t/피 c와 g ら ph/와 l/이어 x. HTML

  • Mac 쪽은 이 사이트가 편리합니다.
  • htp : // 여기. c로. 코m/이모데/에모지모데/#
  • 이 사이트의 「유니코드」란을 복사하면 OK입니다.



    • 배포 절차 참고


  • 이번은 Bower 로 JavaScript 라이브러리의 패키지 관리를 하기로 하겠습니다.

    • 절차


  • Bower에서이 라이브러리 (htps : // 기주 b. 코 m / 후엔 gmk2 / 에모지)를 설치합니다.
    $ bower install emoji --save
  • index.html에서 CSS 파일 포함

    • index.html
    <link rel="stylesheet" href="bower_components/emoji/lib/emoji.css">
  • index.html 로 JS 파일 을 인클루드 ※jQuery도 필요합니다.

    • index.html
    <script src="bower_components/emoji/lib/emoji.js"></script>
  • HTML에의 기재
  • 실제로는 JavaScript의 기재는 외부 파일로 하는 것이 좋습니다.
  • class="emojstext" 는 한 곳 밖에 쓸 수 없는 것 같습니다.
  • 그래서 페이지 전체를 이모티콘 대응하고 싶다면 body 의 바로 아래의 레이어에서 div 로 정의한다.



    • index.html
    <body>
    <div class="emojstext">
        これは&#xE63E;晴れマークです。
        これは&#xE63F;曇りマークです。
    </div>
    <script>
        $(function () {
            var $text = $('.emojstext');
            var html = $text.html().trim().replace(/\n/g, '<br/>');
            //html = jEmoji.softbankToUnified(html);
            //html = jEmoji.googleToUnified(html);
            html = jEmoji.docomoToUnified(html);
            //html = jEmoji.kddiToUnified(html);
            $text.html(jEmoji.unifiedToHTML(html));
        });
    </script>
</body>

    결과


  • 브라우저로 표시하면 이런 느낌.


  • 잘 움직이지 않는다! 라는 쪽을 위해서, 데모의 소스는 이쪽에 두어 둡니다.

  • htps : // 기주 b. 이 m / h 쿠스 / 에모지 _js_
  • index.html를 참조하십시오.

  • 몇개인가 변환할 수 없는 것이 있습니다만(□같은 표시), i어플리마크등 docomo 고유의 이모티콘이 그렇게 되는 것 같습니다.
  • 「맑음」과 「흐림」이 계속되면 「맑은 후 흐림」의 이모티콘이 된다? 수수께끼.


    • 그 외


  • PHP 버전도있는 것 같습니다.
  • htps : // 기주 b. 코 m / 오 m 또는 l / php 에모지
  • 그러나 결국 CSS 스프라이트로 이미지를 표시하는 것 같습니다.


    • 사이고에게


  • 유니코드로 입력하는 것 귀찮아요 단순히 장식으로서 이모티콘을 사용하고 싶어요, 라고 하는 것도 있을까 생각하기 때문에, 그것은 다른 투고로 씁니다.
    • Linux의 Terminal에서 맥주 아이콘(Beer Mug)을 표시한다.
    리눅스에서도 유니 코드 이모티콘을 표시하는 글꼴

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage