絵文字の表示について - Segoe UI emoji フォントの表示 - C#

絵文字の表示について紹介します。

Windows Form アプリケーション : TextBox

Windows FormアプリケーションのTextBoxには絵文字を表示できます。ただし表示される絵文字はモノクロの絵文字になります。

コード

Windows Formアプリケーションで下記コードを記述します。
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace EmojiWindowsForm
{
  public partial class FormTextBox : Form
  {
    public FormTextBox()
    {
      InitializeComponent();
    }

    private void button1_Click(object sender, EventArgs e)
    {
      textBox1.Text = "🥝";
    }

    private void button2_Click(object sender, EventArgs e)
    {
      textBox1.Text = "\U0001F95D";
    }
  }
}

表示結果

プロジェクトを実行し[button1]または[button2]をクリックします。テキストボックスに絵文字が表示されます。

Windows Form アプリケーション : DrawString

Windows Formアプリケーションで DrawString メソッドを利用して画面に文字列を描画する場合は、フォントに "Segoe UI emoji" を指定すると絵文字を描画できます。ただし描画される絵文字はモノクロの絵文字になります。

コード

Windows Formアプリケーションで下記コードを記述します。
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace EmojiWindowsForm
{
  public partial class FormDrawText : Form
  {
    public FormDrawText()
    {
      InitializeComponent();
    }

    private void button1_Click(object sender, EventArgs e)
    {
      Graphics g = panel1.CreateGraphics();
      Font DrawFont = new Font("Segoe UI emoji", 12.0f);
      g.DrawString("\U0001F95D \U0001F95D \U0001F95D", DrawFont, new SolidBrush(Color.Black), 0,0, StringFormat.GenericDefault);
    }
  }
}

表示結果

プロジェクトを実行し[button1]をクリックします。Panelのキャンバスに下図の文字列が表示されます。絵文字が描画できていることが確認できます。

Universal Windows アプリケーション :TextBlock

Universal Windows アプリケーションのTextBlockを利用した場合は、色付きの絵文字が表示できます。

コード

下記コードを記述します。
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// 空白ページの項目テンプレートについては、https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x411 を参照してください

namespace EmojiUniversalApp
{
    /// <summary>
    /// それ自体で使用できる空白ページまたはフレーム内に移動できる空白ページ。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
      TextBlock1.Text = "\U0001F95D \U0001F423";
    }
  }
}

表示結果

プロジェクトを実行し、[Button]をクリックします。TextBlockに絵文字の文字列が表示されます。Universal Windowsアプリケーションではカラーの絵文字が表示されることが確認できます。

Universal Windows アプリケーション :TextBox

Universal Windows アプリケーションのTextBoxを利用した場合も色付きの絵文字が表示できます。

コード

下記のコードを記述します。
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// 空白ページの項目テンプレートについては、https://go.microsoft.com/fwlink/?LinkId=234238 を参照してください

namespace EmojiUniversalApp
{
  /// <summary>
  /// それ自体で使用できる空白ページまたはフレーム内に移動できる空白ページ。
  /// </summary>
  public sealed partial class PageTextBox : Page
  {
    public PageTextBox()
    {
      this.InitializeComponent();
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
      TextBox1.Text = "\U0001F95D \U0001F424";
    }
  }
}

表示結果

プロジェクトを実行し[button]をクリックします。テキストボックスに下図の文字が表示されます。

ASP.NET Web アプリケーション

ASP.NET Webアプリケーションの場合はWebブラウザが絵文字を表示できるかに依存します。

コード

下記のWebフォームを作成します。
HTML中での絵文字の表記は16進数表記のUnicode文字として記述しています。詳しくはこちらの記事を参照してください。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EmojiAspNet.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
          <div>&amp;#x1F95D;&amp;#x1F424;</div>

          <hr />

          <input type="text" value="🥝🐤"/>
        </div>
    </form>
</body>
</html>

表示結果

Webアプリケーションプロジェクトを実行し、上記のWebフォームをWebブラウザで表示します。

Microsoft Edge の場合

画面表示文字、テキストボックス内の文字ともに色付きの絵文字が表示できます。

Microsoft Internet Explorer の場合

画面表示、テキストボックス内の文字どちらも絵文字が表示できますが、カラーの絵文字ではなくモノクロの絵文字の表示になります。

Google Chrome の場合

画面表示文字、テキストボックス内の文字ともに色付きの絵文字が表示できます。

Mozilla FireFox の場合

画面表示文字、テキストボックス内の文字ともに色付きの絵文字が表示できます。

著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
掲載日: 2018-11-13
iPentec all rights reserverd.