<h1 id="%E6%A6%82%E8%A6%81" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E6%A6%82%E8%A6%81" aria-hidden="true"></a> 概要</h1>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p data-line="2" class="code-line">この記事は細かいことは置いといて今すぐ日本語と絵文字を使いたい人向けの記事です。<br>
言ってしまえばizmさんが公開しているものを使用しているだけです。圧倒的感謝。</p>
</div></aside>
<p data-line="5" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/e7c7d3fa4a20-20250301.png" alt="イメージ" loading="lazy" class="md-img"><br>
多分これが一番早いと思います<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__eb14452328f46" src="https://embed.zenn.studio/card#zenn-embedded__eb14452328f46" data-content="https%3A%2F%2Fdic.nicovideo.jp%2Fa%2F%25E5%25A4%259A%25E5%2588%2586%25E3%2581%2593%25E3%2582%258C%25E3%2581%258C%25E4%25B8%2580%25E7%2595%25AA%25E6%2597%25A9%25E3%2581%2584%25E3%2581%25A8%25E6%2580%259D%25E3%2581%2584%25E3%2581%25BE%25E3%2581%2599" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://dic.nicovideo.jp/a/%E5%A4%9A%E5%88%86%E3%81%93%E3%82%8C%E3%81%8C%E4%B8%80%E7%95%AA%E6%97%A9%E3%81%84%E3%81%A8%E6%80%9D%E3%81%84%E3%81%BE%E3%81%99" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://dic.nicovideo.jp/a/多分これが一番早いと思います</a></p>
<h1 id="%E6%89%8B%E9%A0%86" data-line="9" class="code-line">
<a class="header-anchor-link" href="#%E6%89%8B%E9%A0%86" aria-hidden="true"></a> 手順</h1>
<h3 id="1.-textmeshpro%E3%81%AE%E5%B0%8E%E5%85%A5" data-line="10" class="code-line">
<a class="header-anchor-link" href="#1.-textmeshpro%E3%81%AE%E5%B0%8E%E5%85%A5" aria-hidden="true"></a> 1. TextMeshProの導入</h3>
<p data-line="11" class="code-line">最近のUnityではデフォルトでパッケージ自体は入ってます。</p>
<details><summary>TextMeshProがインストールされていない場合</summary><div class="details-content">
<p data-line="13" class="code-line">[Window]-&gt;[Package Manager]を開き、左上を[Packages:Unity Registry]にしTextMeshProを検索します。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--Zmo3PFdl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://qiita-user-contents.imgix.net/https%253A%252F%252Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%252F0%252F142886%252Fc002490b-86d9-e655-db14-fc48a0b905b7.png%3Fixlib%3Drb-4.0.0%26auto%3Dformat%26gif-q%3D60%26q%3D75%26s%3D21b1ca9f1c770fc2b0e69f4485fb4bc2" alt="Image" loading="lazy" class="md-img"></p>
</div></details>
<p data-line="17" class="code-line">結局必要になるので最初に[Project Settings]-&gt;[Text Mesh Pro]-&gt;[Import TMP Essentials]で基本コンポーネントをインポートしましょう。<br>
<a href="https://gyazo.com/0275c2c0d59d9880114ef29b9d54a749" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/0275c2c0d59d9880114ef29b9d54a749.png" alt="Image from Gyazo" loading="lazy" class="md-img"></a></p>
<h3 id="2.-%EF%BC%88%E4%BB%BB%E6%84%8F%EF%BC%89full-emoji-support-api%E3%81%AE%E5%B0%8E%E5%85%A5" data-line="20" class="code-line">
<a class="header-anchor-link" href="#2.-%EF%BC%88%E4%BB%BB%E6%84%8F%EF%BC%89full-emoji-support-api%E3%81%AE%E5%B0%8E%E5%85%A5" aria-hidden="true"></a> 2. （任意）Full Emoji Support APIの導入</h3>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p data-line="22" class="code-line">絵文字が必要ない場合は次に進んでください。</p>
</div></aside>
<p data-line="24" class="code-line">[Window]-&gt;[Package Manager]を開き、[import package from git URL]をクリックします。<br>
そして、以下のURLを入力し、Installします。</p>
<div class="code-block-container"><pre><code class="code-line" data-line="26">https://gitlab.com/KyubInteractive/emojisearchapi.git#com.kyub.emojisearch-1.1.5
</code></pre></div><p data-line="29" class="code-line"><a href="https://gyazo.com/76bc157dc7ba9b7511f782a4be0b8853" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/76bc157dc7ba9b7511f782a4be0b8853.png" alt="Image from Gyazo" loading="lazy" class="md-img"></a><br>
<a href="https://gyazo.com/ac3b1bf0aa88bc241442fdad09ad3914" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/ac3b1bf0aa88bc241442fdad09ad3914.png" alt="Image from Gyazo" loading="lazy" class="md-img"></a></p>
<details><summary>Installでエラーが出る場合</summary><div class="details-content">
<ol data-line="32" class="code-line">
<li data-line="32" class="code-line">PCがインターネットに接続されているか確認してください</li>
<li data-line="33" class="code-line">
<a href="https://raspberly.hateblo.jp/entry/UnityPackageManager_NoGit" target="_blank" rel="nofollow noopener noreferrer">PCにgitがインストールされているか</a>確認してください</li>
</ol>
</div></details>
<p data-line="36" class="code-line">ImportしたらProjectフォルダ内の[Assets/TextMesh Pro/Resources/TMP Settings]をクリックし、TMPの設定ファイルを編集します。</p>
<p data-line="38" class="code-line">下記画像のようにしてください。これで絵文字が出せるようになります。<br>
<a href="https://gyazo.com/80fb8268a0d912881169732fc48a2b94" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/80fb8268a0d912881169732fc48a2b94.png" alt="Image from Gyazo" loading="lazy" class="md-img"></a></p>
<h3 id="3.-unitytextmeshpronotosansforrude%E3%81%AE%E5%B0%8E%E5%85%A5" data-line="41" class="code-line">
<a class="header-anchor-link" href="#3.-unitytextmeshpronotosansforrude%E3%81%AE%E5%B0%8E%E5%85%A5" aria-hidden="true"></a> 3. UnityTextMeshProNotoSansForRudeの導入</h3>
<p data-line="42" class="code-line">本来日本語対応したフォントを使用するには<a href="https://zenn.dev/mingos/articles/5061f0121cd495" target="_blank">自前で作成する</a>必要があるのですが、izmさんがGitHubですぐ導入できるようにUPMで公開してくださっています。(MITライセンス）<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__cb658a6971e21" src="https://embed.zenn.studio/card#zenn-embedded__cb658a6971e21" data-content="https%3A%2F%2Fgithub.com%2Fneon-izm%2FUnityTextMeshProNotoSansForRude" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/neon-izm/UnityTextMeshProNotoSansForRude" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/neon-izm/UnityTextMeshProNotoSansForRude</a></p>
<p data-line="45" class="code-line">こちらをありがたく使わせていただきます。ただし、このフォントはNoto sansフォントのみです。<strong>逆に言えば、このリポジトリを参考に自分の良く使うフォントをGitHubで管理すればお好みのフォントを複数プロジェクトで使い回すことが出来ます。</strong></p>
<aside class="msg alert"><span class="msg-symbol">!</span><div class="msg-content">
<p data-line="47" class="code-line">フォントを使用する際は必ずライセンスを確認しましょう。</p>
</div></aside>
<p data-line="50" class="code-line">本題に戻ります。導入は簡単で、2.でやったように<a href="#2.-full-emoji-support-api%E3%81%AE%E5%B0%8E%E5%85%A5(%E4%BB%BB%E6%84%8F)">Unity Package Manager経由でインストール</a>します。</p>
<div class="code-block-container"><pre><code class="code-line" data-line="51">https://github.com/neon-izm/UnityTextMeshProNotoSansForRude.git#upm
</code></pre></div><p data-line="54" class="code-line"><a href="https://gyazo.com/9cbf1f3fab1ac5204e73a19c6d786dae" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/9cbf1f3fab1ac5204e73a19c6d786dae.png" alt="Image from Gyazo" loading="lazy" class="md-img"></a></p>
<h3 id="4.-%EF%BC%88%E4%BB%BB%E6%84%8F%EF%BC%89%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%81%A8%E7%B5%B5%E6%96%87%E5%AD%97%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%81%8B%E3%81%AE%E7%A2%BA%E8%AA%8D" data-line="56" class="code-line">
<a class="header-anchor-link" href="#4.-%EF%BC%88%E4%BB%BB%E6%84%8F%EF%BC%89%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%81%A8%E7%B5%B5%E6%96%87%E5%AD%97%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%81%8B%E3%81%AE%E7%A2%BA%E8%AA%8D" aria-hidden="true"></a> 4. （任意）日本語と絵文字が表示されているかの確認</h3>
<p data-line="57" class="code-line">最後に正しく導入が出来ているかの確認を行いましょう。<br>
UnityTextMeshProNotoSansForRudeにはサンプルシーンが用意されているのでそれを使用します。</p>
<p data-line="60" class="code-line">[PackageManager]-&gt;[In Project]でインストールしたUnityTextMeshProNotoSansForRudeを選択し、[Samples]タブを押しImportします。<br>
<a href="https://gyazo.com/2961e9db2846130d09fd7273440d6e3c" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/2961e9db2846130d09fd7273440d6e3c.png" alt="Image from Gyazo" loading="lazy" class="md-img"></a></p>
<p data-line="63" class="code-line">Importすると[Assets/Samples/RudeUiAssets/0.0.3/VisualSample/RudeUiAssetsSample.unity]にサンプルシーンが配置されるのでそのシーンを開きます。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/e7c7d3fa4a20-20250301.png" alt="イメージ" loading="lazy" class="md-img"><br>
画像のようになればOKです。絵文字部分が文字化け（「□」のような状態）になれば<a href="#2.-full-emoji-support-api%E3%81%AE%E5%B0%8E%E5%85%A5(%E4%BB%BB%E6%84%8F)">2.の手順</a>を確認してください。</p>
<h1 id="material-icons%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9" data-line="67" class="code-line">
<a class="header-anchor-link" href="#material-icons%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9" aria-hidden="true"></a> Material Iconsの使い方</h1>
<p data-line="68" class="code-line">手順を全て行うとGoogleの<a href="https://fonts.google.com/icons" target="_blank" rel="nofollow noopener noreferrer">Material Icons</a>をUnity内で利用することが出来ます。この際に2通りのやり方があります。</p>
<h3 id="%EF%BC%88%E3%81%8A%E3%81%BE%E3%81%91%EF%BC%89%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%81%AE%E6%8E%A2%E3%81%97%E6%96%B9" data-line="70" class="code-line">
<a class="header-anchor-link" href="#%EF%BC%88%E3%81%8A%E3%81%BE%E3%81%91%EF%BC%89%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%81%AE%E6%8E%A2%E3%81%97%E6%96%B9" aria-hidden="true"></a> （おまけ）アイコンの探し方</h3>
<p data-line="71" class="code-line"><a href="https://fonts.google.com/icons" target="_blank" rel="nofollow noopener noreferrer">Material Icons</a>で検索やフィルタを利用して使いたいアイコンを探しましょう。アイコンを見つけたらクリックして右端の詳細欄からCode pointをコピーしておきます。この値をUnityで利用します。<br>
<a href="https://gyazo.com/87d5f24b5eb0330b4385059887dc3b76" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/87d5f24b5eb0330b4385059887dc3b76.png" alt="Image from Gyazo" loading="lazy" class="md-img"></a></p>
<aside class="msg alert"><span class="msg-symbol">!</span><div class="msg-content">
<p data-line="74" class="code-line">バージョン差分などで一部アイコンが利用できないことがあります。</p>
</div></aside>
<h3 id="a.-mateiral-icon%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E4%BD%BF%E3%81%86" data-line="77" class="code-line">
<a class="header-anchor-link" href="#a.-mateiral-icon%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E4%BD%BF%E3%81%86" aria-hidden="true"></a> A. Mateiral Iconコンポーネントを使う</h3>
<p data-line="78" class="code-line"><a href="#4.-%EF%BC%88%E4%BB%BB%E6%84%8F%EF%BC%89%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%81%A8%E7%B5%B5%E6%96%87%E5%AD%97%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%81%8B%E3%81%AE%E7%A2%BA%E8%AA%8D">手順の4.で開いたシーン</a>を見るとMaterialUIsampleというGameObjectがあり、その子にいくつかのアイコンが用意されています。<br>
例えばCameraを選択すると画像のようになっており、これがコンポーネントを利用した例になります。<br>
Code pointは<a href="#%EF%BC%88%E3%81%8A%E3%81%BE%E3%81%91%EF%BC%89%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%81%AE%E6%8E%A2%E3%81%97%E6%96%B9">こちら</a>で見つけたCode pointと一致します。<br>
<a href="https://gyazo.com/aed369e3cc1475026be8922ff9f5ffd6" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/aed369e3cc1475026be8922ff9f5ffd6.png" alt="Image from Gyazo" loading="lazy" class="md-img"></a><br>
Iconを押すとアイコン選択画像になります。検索欄を使いCode pointか名前で検索することができます。<br>
<a href="https://gyazo.com/340c448873390339a9b503ea30d67b83" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/340c448873390339a9b503ea30d67b83.png" alt="Image from Gyazo" loading="lazy" class="md-img"></a><br>
このようにuGUIのコンポーネントとしてアイコンを利用することが出来ます。</p>
<h3 id="b.-textmeshpro%E3%81%AE%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%A8%E3%81%97%E3%81%A6%E4%BD%BF%E3%81%86" data-line="86" class="code-line">
<a class="header-anchor-link" href="#b.-textmeshpro%E3%81%AE%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%A8%E3%81%97%E3%81%A6%E4%BD%BF%E3%81%86" aria-hidden="true"></a> B. TextMeshProのテキストとして使う</h3>
<p data-line="87" class="code-line">通常のテキストと同様にアイコンを出すことができます。<br>
例えば、<strong>Code pointがe9cd</strong>である電話アイコンは下記のようにTextを入れると表示されます。<br>
また、テキストと同様アイコンをタグを使って装飾することもできます。</p>
<div class="code-block-container"><pre><code class="code-line" data-line="90">\ue9cd
</code></pre></div><p data-line="93" class="code-line"><a href="https://gyazo.com/189b75ef88456c1c23375e74a9cd3b4f" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/189b75ef88456c1c23375e74a9cd3b4f.png" alt="Image from Gyazo" loading="lazy" class="md-img"></a></p>


TextMeshProで手っ取り早く日本語や絵文字を使う

2. （任意）Full Emoji Support APIの導入

3. UnityTextMeshProNotoSansForRudeの導入

4. （任意）日本語と絵文字が表示されているかの確認

A. Mateiral Iconコンポーネントを使う

B. TextMeshProのテキストとして使う

Discussion