「基礎編Ⅲ【フォントとユニコード】」の編集履歴（バックアップ）一覧はこちら
「基礎編Ⅲ【フォントとユニコード】」(2018/01/02 (火) 01:04:10) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
[[トップページ>コメントアートwiki トップページ]]
----
#blockquote(){コメントアートの解説で「00A0」や「2001」など
良くわからない文字の羅列を見たことはありませんか？
コメントを操るということ。
それはすなわち&bold(){文字を操る}ということ。
当然文字に関する知識が少なからず必要となります。
ここでは、そんな文字・フォントに関する基礎的な知識の解説をさせていただきます。}
※画像は旧プレイヤーのインターフェースとなっていますが、
基本的なボタン配置はほぼ同じなため、解説に支障がないものに
関してはそのまま使用していますのでご了承ください。
&bold(){&sizex(6){◎目次}}
#contents_line(sep=/)
----
*&bold(){&sizex(7){①ユニコード}}
コメントアートを製作する際には普段は使わないような記号・文字を
使用することが多々あります。
&blankimg(unicode 1.jpg,width=305,height=228)
色々な文字の中から取捨選択をして使用するわけです。
でも、一つ一つの文字を説明しようとする場合、
「花の文字」「星の文字」などといった言葉ではどの文字を指しているのか正確にはわかりませんよね・・・。
&blankimg(unicode 2.jpg,width=272,height=192)
この二つの星の文字をどう呼び分けましょうか・・・。
&bold(){&sizex(6){そこで、「ユニコード」の出番です。}}
コンピュータ上で使われる文字には「文字コード」と呼ばれる特定の符号、いわば番号が割り振られています。
文字コードは様々な規格があるのですが、
その中でも&bold(){&color(red){&sizex(6){「unicode(ユニコード)」}}}と呼ばれる文字コードは
全世界の文字を単一の文字コードで表されており、Microsoft Windows、Mac OS X、LinuxやJavaなど
多くのOS、プログラムで使用されています。
&blankimg(unicode 3.jpg,width=272,height=192)
ユニコードを使えば、二つの文字を番号で呼び分けられます。
番号は16進法で表されます。
**&sizex(6){※ユニコード番号の調べ方}
ユニコードの文字番号はどのように調べればよいでしょうか？
・&bold(){IMEパッドから調べる方法}
windowsユーザーの場合、
IMEパッドからユニコード番号を調べることができます。
&blankimg(unicode 4.jpg,width=733,height=311)
文字一覧の表から番号がわかりますが、
調べたい文字にマウスカーソルを動かせば、ポップアップが表示されます。
(vista＆win7の場合)
↓XPの方はこちら
#region(close)
一覧上からは番号はわかりませんが、ポップアップは表示されます。
&blankimg(unicode 6.jpg,width=628,height=264)
#endregion
・&bold(){変換サイトを利用する方法}
⇒ http://code.cside.com/3rdpage/jp/unicode/converter.html
(10進、16進文字コードin HTMLユニコード)
&blankimg(unicode 5.jpg,width=593,height=315)
上記のサイトで任意の文字のユニコード番号を調べることができます。
*&bold(){&sizex(7){②コメントの文字フォント}}
フォントとは、コンピュータ上に表示される文字の書体のこと。
その種類も実に多様なわけですが、
ニコニコ動画のプレイヤー上に表示されるコメントのフォント(書体)は
いくつか種類が決まっています。
大きく分けて、以下の3種類があります&bold(){&sizex(4){(windowsの場合)}}
&bold(){&sizex(7){・&color(orange){ゴシック体}}}
&bold(){&sizex(7){・&color(orange){明朝体}}}
&bold(){&sizex(7){・&color(orange){丸文字体}}}
&blankimg(font 1.jpg,width=408,height=330)
ひらがな・漢字・全角アルファベット・全角数字。
それぞれ書体が変化しています。
**&sizex(6){※ゴシック体}
&bold(){&color(green){&sizex(6){「MS Pゴシック」}}}と呼ばれるフォントです。
プレイヤー上で表示される基本的なフォントはこのゴシック体となります。
&blankimg(font 2.jpg,width=640,height=254)
**&sizex(6){※明朝体}
中国語の表記に用いられるフォント&bold(){&color(green){&sizex(6){「Simsun」}}}というフォントが使用されています。
（なぜ日本で一般的に使われるような「MS明朝」などでないのかは不明・・・。）
&blankimg(font 3.jpg,width=640,height=254)
通常の状態では表示されず、コメント表示に負荷がかかった場合や、
プレイヤー上で必ず明朝フォントで表示される文字(「明朝化文字」などと呼ばれます)を
コメント内に含めた場合に切り替わります。
明朝化文字はいくつか種類がありますが、
&bold(){&sizex(5){「ˋ」}(U+02CB)}、&bold(){&sizex(5){「█」}(U+2588)}といった文字が有名です。
**&sizex(6){※丸文字体}
&bold(){&color(green){&sizex(6){「Gulim」}}}と呼ばれるフォントが使われます。
&blankimg(font 4.jpg,width=640,height=254)
このフォントも明朝フォントと同様、コメント表示に負荷がかかった場合や、
プレイヤー上で必ず丸文字フォントで表示される文字(「丸文字化文字」などと呼ばれます)を
コメント内に含めた場合に切り替わります。
丸文字化文字もいくつか種類がありますが、&bold(){&sizex(5){「그」}(U+ADF8)}、&bold(){&sizex(5){「♥」}(U+2665)}などが挙げられます。
フォントの切り替えは色々な要素が絡むことも多く、
また、プレイヤー上の表示の変化もとても複雑です。
詳しくは「[[知識編Ⅴ【フォント決定ルール】]]」にて解説いたします。
*&bold(){&sizex(7){③コメント幅・高さ}}
コメントの横幅と高さは&bold(){&sizex(5){&color(green){黄枠を基準にして考えます。}}}
&blankimg(width+height 1.jpg,width=408,height=330)
**&sizex(6){※コメント幅}
&bold(){&sizex(5){フォントによってコメント幅は大きく変わります。}}
これはフォントの特徴がそのままコメント表示に反映されるためです。
&bold(){・ゴシック体(MS Pゴシック)の場合}
読みやすさを重視したフォントであるため、個々の文字の幅が異なります。
よって、コメントにおいても&bold(){&color(green){&sizex(5){それぞれの全角文字で幅が変わります。}}}
&blankimg(width+height 2.jpg,width=408,height=288)
ただし、「漢字」は共通の幅を持っており、他のフォントにおける全角文字の幅とも一致します。
&blankimg(width+height 3.jpg,width=408,height=288)
この幅を&bold(){&color(orange){&sizex(6){「漢字幅」}}}と呼びます。
基準のコメント幅として扱われることが多いです。
&bold(){・明朝体(Simsun)、丸文字体(Gulim)の場合}
全角文字は基本的に皆同じ幅を持つフォントであるため、
コメント上でも&bold(){&color(green){&sizex(5){ほぼ全ての全角文字の幅が同じになります。}}}
|&blankimg(width+height 4.jpg,width=326,height=230)|&blankimg(width+height 5.jpg,width=326,height=230)|
かな文字のように、フォントが変わるとコメント幅が変化するものもあります。
頻繁に使う文字である場合は、フォントによるコメント表示の変化&bold(){(&color(orange){&sizex(6){「挙動」}}と言います)}を
正確に把握しておくことが必要です。
個々の文字の挙動については「[[知識編Ⅰ【空白文字】]]」、「[[知識編Ⅳ【文字の挙動】]]」等で解説いたします。
**&sizex(6){※高さ}
高さに関してはコメント幅のようなフォントによる違いはありません。
&bold(){&sizex(5){サイズと、行数によって決まっています。}}
詳しくは「[[制作編Ⅱ【コメント位置調整】]]」等で解説いたします。
----
&sizex(6){&bold(){next:}[[基礎編Ⅳ【製作環境】]]}
&bold(){prev:[[基礎編Ⅱ【コメント機能の仕様】]]}
[[トップページ>コメントアートwiki トップページ]]
[[トップページ>コメントアートwiki トップページ]]
----
#blockquote(){コメントアートの解説で「00A0」や「2001」など
良くわからない文字の羅列を見たことはありませんか？
コメントを操るということ。
それはすなわち&bold(){文字を操る}ということ。
当然文字に関する知識が少なからず必要となります。
ここでは、そんな文字・フォントに関する基礎的な知識の解説をさせていただきます。}
※画像は旧プレイヤーのインターフェースとなっていますが、
基本的なボタン配置はほぼ同じなため、解説に支障がないものに
関してはそのまま使用していますのでご了承ください。
&bold(){&sizex(6){◎目次}}
#contents_line(sep=/)
----
*&bold(){&sizex(7){①ユニコード}}
コメントアートを製作する際には普段は使わないような記号・文字を
使用することが多々あります。
&blankimg(unicode 1.jpg,width=305,height=228)
色々な文字の中から取捨選択をして使用するわけです。
でも、一つ一つの文字を説明しようとする場合、
「花の文字」「星の文字」などといった言葉ではどの文字を指しているのか正確にはわかりませんよね・・・。
&blankimg(unicode 2.jpg,width=272,height=192)
この二つの星の文字をどう呼び分けましょうか・・・。
&bold(){&sizex(6){そこで、「ユニコード」の出番です。}}
コンピュータ上で使われる文字には「文字コード」と呼ばれる特定の符号、いわば番号が割り振られています。
文字コードは様々な規格があるのですが、
その中でも&bold(){&color(red){&sizex(6){「unicode(ユニコード)」}}}と呼ばれる文字コードは
全世界の文字を単一の文字コードで表されており、Microsoft Windows、Mac OS X、LinuxやJavaなど
多くのOS、プログラムで使用されています。
&blankimg(unicode 3.jpg,width=272,height=192)
ユニコードを使えば、二つの文字を番号で呼び分けられます。
番号は16進法で表されます。
**&sizex(6){※ユニコード番号の調べ方}
ユニコードの文字番号はどのように調べればよいでしょうか？
・&bold(){IMEパッドから調べる方法}
windowsユーザーの場合、
IMEパッドからユニコード番号を調べることができます。
&blankimg(unicode 4.jpg,width=733,height=311)
文字一覧の表から番号がわかりますが、
調べたい文字にマウスカーソルを動かせば、ポップアップが表示されます。
(vista＆win7の場合)
↓XPの方はこちら
#region(close)
一覧上からは番号はわかりませんが、ポップアップは表示されます。
&blankimg(unicode 6.jpg,width=628,height=264)
#endregion
・&bold(){変換サイトを利用する方法}
⇒ http://code.cside.com/3rdpage/jp/unicode/converter.html
(10進、16進文字コードin HTMLユニコード)
&blankimg(unicode 5.jpg,width=593,height=315)
上記のサイトで任意の文字のユニコード番号を調べることができます。
*&bold(){&sizex(7){②コメントの文字フォント}}
フォントとは、コンピュータ上に表示される文字の書体のこと。
その種類も実に多様なわけですが、
ニコニコ動画のプレイヤー上に表示されるコメントのフォント(書体)は
いくつか種類が決まっています。
大きく分けて、以下の3種類があります&bold(){&sizex(4){(windowsの場合)}}
&bold(){&sizex(7){・&color(orange){ゴシック体}}}
&bold(){&sizex(7){・&color(orange){明朝体}}}
&bold(){&sizex(7){・&color(orange){丸文字体}}}
&blankimg(font 1.jpg,width=408,height=330)
ひらがな・漢字・全角アルファベット・全角数字。
それぞれ書体が変化しています。
**&bold(){&sizex(6){※ゴシック体}}
HTML5版で仕様が変わったため
新CAwikiを参照してください。
&link(「フォントとユニコード」defontコマンド){https://www65.atwiki.jp/commentart2/pages/16.html#id_2936432e}
**&bold(){&sizex(6){※明朝体}}
HTML5版で仕様が変わったため
新CAwikiを参照してください。
&link(「フォントとユニコード」minchoコマンド){https://www65.atwiki.jp/commentart2/pages/16.html#id_aa0d2fbc}
**&bold(){&sizex(6){※丸文字体}}
HTML5版で仕様が変わったため
新CAwikiを参照してください。
&link(「フォントとユニコード」gothicコマンド){https://www65.atwiki.jp/commentart2/pages/16.html#id_37da8f92}
*&bold(){&sizex(7){③コメント幅・高さ}}
コメントの横幅と高さは&bold(){&sizex(5){&color(green){黄枠を基準にして考えます。}}}
&blankimg(width+height 1.jpg,width=408,height=330)
**&sizex(6){※コメント幅}
&bold(){&sizex(5){フォントによってコメント幅は大きく変わります。}}
これはフォントの特徴がそのままコメント表示に反映されるためです。
&bold(){・ゴシック体(MS Pゴシック)の場合}
読みやすさを重視したフォントであるため、個々の文字の幅が異なります。
よって、コメントにおいても&bold(){&color(green){&sizex(5){それぞれの全角文字で幅が変わります。}}}
&blankimg(width+height 2.jpg,width=408,height=288)
ただし、「漢字」は共通の幅を持っており、他のフォントにおける全角文字の幅とも一致します。
&blankimg(width+height 3.jpg,width=408,height=288)
この幅を&bold(){&color(orange){&sizex(6){「漢字幅」}}}と呼びます。
基準のコメント幅として扱われることが多いです。
&bold(){・明朝体(Simsun)、丸文字体(Gulim)の場合}
全角文字は基本的に皆同じ幅を持つフォントであるため、
コメント上でも&bold(){&color(green){&sizex(5){ほぼ全ての全角文字の幅が同じになります。}}}
|&blankimg(width+height 4.jpg,width=326,height=230)|&blankimg(width+height 5.jpg,width=326,height=230)|
かな文字のように、フォントが変わるとコメント幅が変化するものもあります。
頻繁に使う文字である場合は、フォントによるコメント表示の変化&bold(){(&color(orange){&sizex(6){「挙動」}}と言います)}を
正確に把握しておくことが必要です。
個々の文字の挙動については「[[知識編Ⅰ【空白文字】]]」、「[[知識編Ⅳ【文字の挙動】]]」等で解説いたします。
**&sizex(6){※高さ}
高さに関してはコメント幅のようなフォントによる違いはありません。
&bold(){&sizex(5){サイズと、行数によって決まっています。}}
詳しくは「[[制作編Ⅱ【コメント位置調整】]]」等で解説いたします。
----
&sizex(6){&bold(){next:}[[基礎編Ⅳ【製作環境】]]}
&bold(){prev:[[基礎編Ⅱ【コメント機能の仕様】]]}
[[トップページ>コメントアートwiki トップページ]]
