【ワテの備忘録 Html編】絵文字を表示する

この記事は約6分で読めます。
スポンサーリンク

プロの人が作ったWEBサイトを作っていると、見易い絵柄のアイコンを上手く使っていい感じでまとまっている。
一方、ワテの場合にはデザインセンスが全く無いのではっきり言って素人感丸出しのウェブページとなる。
例えば今皆さんが見て頂いているこのページだ。

当記事では、ウェブページで絵文字を使う方法を解説したい。

では、本題に入ろう。

スポンサーリンク
ワテ推薦のプログラミングスクールで学ぶ
スポンサーリンク
スポンサーリンク

ワテが使っているのはエックスサーバー

ワテの場合、契約しているXサーバー社のX10プランにワードプレスという無料のブログソフトをインストールして使っている。

月額1000円程度だがとっても安定しているのでお勧めだ。サポートも良い。ワテ推薦だ。


大まかな画面レイアウトはそのワードプレスがやってくれる。
また、ワードプレスに追加で入れられるテーマ(Theme)が沢山あるが、Simplicity2と言うのを使っているのだが、そのSimplicity2を使うとこのページのような左右に段組みをしたレイアウトが簡単に作れる。
とっても便利だ。

しかしながら、同じワードプレスやテーマを使ってもワテがやった場合とプロの人がやった場合とではウェブページの見栄えが全然違う。
その原因は何だろう。たぶん、ワテに扇子が無いのかな?ウチワなら有るんだが。
駄洒落のセンスは自信があるのだが、デザインセンスは無い。

さて、そう言うワテのようなデザインセンスの無い人はお手軽に使えるアイコン画像や絵文字を使うと、ウェブページの見栄えを少しは良く出来ると思う。

世の中には無料のアイコン画像ダウンロードサイトも沢山あるので、そういうところから借用する事も良くある。

Unicode6.0の絵文字

今日は、そう言う無料アイコン画像ではなくて、Unicode6.0というコードで仕様が規定されている絵文字を使う方法を覚えたので備忘録としてこの記事にメモしておく。

表1. Unicode 6.0 の絵文字

 

使い方は簡単で、その文字を貼り付ければ良いだけだ。

例えば温泉マークを使いたい場合には、上の表の上から五行目にあるので、その文字をコピペして貼り付ければ良い。

こんな感じか。

文字なのでフォントサイズを変える事も可能だ。

 

Unicode 6.0とは

ちなみに、Unicode 6.0とは、Unicodeコンソーシアムが策定している文字コード「Unicode」の、2011年2月に新たに公開された仕様だ。

携帯電話の絵文字対応をするために2088文字が新規に追加されたらしい。

 

しかしまあ、全世界で統一した文字コードを制定する目的で1980年代にUnicodeが制定されたと思うのだが、それにも関わらずチョコチョコと仕様を拡張して行くともうUnicode本来の目的とは違う方向に進んでいる気がする。

文字コードがSJIS, JIS, EUC, UTF8, UTF16, …などとアホみたいに種類が増えて未だに統一出来ない理由は、Unicodeの仕様が間違っているのだろうと思う。

つまりUnicodeは固定長でデータを持つのではなくて、可変長(1-4バイト)で文字を符号化する形式だ。

英語圏のアルファベットなら a,b,c,d,e,… は 1バイト

それ以外の文字なら2~4バイトを使って表現する。

日本語   漢字、ひらがな、カタカナ、カタカナ…

タイ語   ภาษาไทย

アラビア語 اللغة العربية

まあ、コンピュータのメモリが数メガバイト程度しか無かった時代に制定された仕様なので、1~4バイトを使うと言うメモリ節約型の文字コードを採用した気持ちは分からないでは無いが。

でもそれが原因で文字コードを益々ややこしくしていると思う。

ワテが文字コード仕様を決めるならWatecode128を制定するなあ

もしワテが世界征服をしたら、全宇宙統一文字コードを制定したい。

固定長16バイトだ。16バイトなら128ビットなので、

3.4028236692093846346337460743177e+38

種類の文字を表現出来る。

これくらい有れば、今後100年くらいは文字コードが足りなくなる事は無いだろう。

地球人の文字コードだけでなく、金星人や火星人の文字コードも含められる。

あるいは太陽系外の知的生命体の文字コードも全て含めても十分に足りるだろう。

一応、名前を付けるなら、

Watecode128

と呼んで頂きたい。

補足

WordPressの場合には、このUnicode6.0絵文字を正しく表示出来ない問題があるようだ。

実際にワテも最初にこのページを作成するにあたり、上記の 表1. Unicode 6.0 の絵文字 が半分以上が正しく表示されなかった。

原因をネットで調べたところ、WordPressが使うMySQLデータベースの文字コードDB_CHARSETがデフォルトでは

'utf8'

だが、それを

'utf8mb4'

にすれば良いみたいだ。

ただし、一旦作成したWordPressのデータベースの文字コードを途中で変更しても良いのかどうかワテは知らない。

自分のWordPressの文字コードを確認する方法

ワテの場合、エックスサーバーのX10プランを使ている。

WordPressを簡単インストールすると、

/wareko.jp/public_html/サイト名

にWordPressのPHPプログラムなど一式がインストールされる。

その中に、wp-config.php と言うファイルがあるのでその中身を確認する。

ワテのこのサイトの場合は以下のようになっていた。

/** データベースのテーブルを作成する際のデータベースの文字セット */
define('DB_CHARSET', 'utf8');

/** データベースの照合順序 (ほとんどの場合変更する必要はありません) */
define('DB_COLLATE', '');

確かに ‘utf8’ だ。だからUnicode6.0絵文字が出ないのだ。

 

ではどうやって表1. Unicode 6.0 の絵文字 を表示しているかと言うと、それは簡単でiframeを使って埋め込んでいるだけだ。

これなら埋め込んだiframe内に表示されるhtmlページはWordPressの影響を受けないので、文字化けせずに正しくUnicode6.0の絵文字が表示される。

まとめ

 

Unicode

 ゆにコード

  ウニコード

   ウニ食うど

    今日はウニを食うぞ!

 

作者さんの名前がウニと関連あるのか。

スポンサーリンク
ワテ推薦のプログラミングスクールで学ぶ
コメント募集

この記事に関して何か質問とか補足など有りましたら、このページ下部にあるコメント欄からお知らせ下さい。

HTML
スポンサーリンク
warekoをフォローする
スポンサーリンク
われこ われこ

コメント