もうずっと前からコツコツと作っていたのがやっと一段落して、記事でも使えるようになってきたので、ひさびさに牌テクノロジーカテゴリの記事を書きます。
仕組み自体は以前から使っている牌画表示とほぼ同じでして、いわゆる開発っぽい事は何もしていないのですが、とにかく画像を作るのが大変だったのです…

咲-Saki-アイコンシステムを体験してみよう

まず、インタラクティブなデモから。
HTML を全く知らない方にも気軽に試していただけるようにしてあります。

まず、下のテキストボックスに表示されているxxxxの部分を、好きなキャラクターの名前にしてみましょう。
優希→yuki、京太郎→kyotaroのように、ローマ字の小文字で、長音?は無視。
キャラクターは表示されましたか?
書いた名前が登録されていない場合はエラーアイコンが、名前は登録されているけれど画像がまだ無い場合は SOUND ONLYアイコン(jyushisirin様作。仕事早いよ!有難うございます)が、表示されます。

これは、HTML の要素にsaki-icon(キャラクター名)という二つのクラス名を指定して、アイコンを表示させる仕組みです。



キャラクターを指定する

始めに書いたように、クラス名は基本的に下の名前のローマ字表記です。
 宮永咲→saki、原村和→nodoka
みたいな。

その基本から外れる例外について触れておきます。
  1. 重複する名前

    ナンバリングでは味気ないので…
    ちょっと無原則ですが、こんな感じで
    名前(ローマ字)キャラCSSクラス名
    Ayano
    寺平彩乃(清澄高校)
    ayano
    高鴨綾乃(穏乃の母)
    shizuno-mama
    Chihiro
    椋千尋(菰沢中)
    chihi
    八橋千尋(アナウンサー)
    chihiro
    Hina
    池田緋菜(華菜の妹)
    hina
    山谷ひな(吉野山小)
    shozon
    木村日菜(晩成高校)
    hinaK
    穂積緋菜(千里山女子OG)
    hinaH
    ササヒナ(清澄高校)*1
    sasahina
    Hiroko
    室橋裕子(高遠原中)
    muro
    船久保浩子(千里山女子)
    funaQ
    Hitomi
    棟居仁美(千曲東高校)
    hitomi
    江崎仁美(新道寺女子)
    hitsuji
    Kana
    池田華菜(風越女子)
    ikeda
    植田佳奈(立-Ritz-)
    kana-sama
    Kei
    荒川憩(三箇牧高校)
    kei
    岡本渓(千里山女子OG)
    keiO
    原村恵(和の父)
    keiH
    Rio
    多久和李緒(湯町中)
    popma
    余村里生(万原中)
    rio
    Sakurako
    ギバード桜子(吉野山小)
    gibbard
    大滝桜子(千曲東高校)
    sakurako
    Tomoko
    永見知子(菰沢中)
    tomo
    堀之内友子(アナウンサー)
    tomoko
    Yoshiko
    安河内美子(新道寺女子高校)
    yoshiko
    佐々岡よし子(吉野山小)
    yoshikoS
    戒能良子(プロ)
    kaino
    Yoko
    門松葉子(今宮女子高校)
    yokoK
    野上葉子(怜-Toki-)
    yoko
    Yu
    松実宥(阿知賀女子学院)
    yu-ne
    十曽湧(永水女子中)
    yu
    Yuka*2
    森垣友香(劔谷高校)
    de
    巽由華(晩成高校)
    yuka
    Yuko
    真瀬由子(姫松高校)
    yuko
    佐藤裕子(アナウンサー)
    suit
    Yuzuki
    寺崎遊月(射水総合高校)
    yudzuki
    千代延柚希(魚瀬中)
    yuzuki
    • *1)ササヒナ先生はヒナではなくヒナコとかかも知れませんが、もうsasahinaに決めちゃいました。
    • *2)日本語ではユウカ/ユカと別なのに、ローマ字だと同じになってしまうんですね。
  2. 名前が不明(抜萃)

    モブの中でも比較的印象的な人たちです。
    呼び方はアニメ版の役名だったり、なんとなくだったり、適当です。
    キャラCSSクラス名
    食堂のおばちゃん(清澄高校)
    obachan
    図書委員(清澄高校)
    librarian
    教師(清澄高校)*3
    teacher
    ラーメン屋の親父
    ramenman
    受付*4
    recept
    まこの母
    mako-mama
    スイスくん(松江大会出場者)
    switz
    ボンクラくん(全小出場者)
    bonkura
    編集長(シノハユ)
    chief
    部員(風越女子高校)
    kazekoshiGirl-1*5
    部員(千里山女子高校)
    senriyamaGirl-1
    部員(新道寺女子高校)
    shindojiGirl-1
    ボクたち(阿知賀編第6局)
    boku-1
    まふふファン(シノハユ)
    maffer-1
    • *3)この先生に、久が合宿の申請をしに行きました(アニオリ)。
      麻雀部の顧問かどうかは不明です。
    • *4)久とまこが県予選の参加申込に行った時の受附係です(アニオリ)。
      声優はたぶん西田記者と同じ小菅真美さん。
    • *5)さすがにこの辺からはナンバリング対象です…風越の場合いちおう三人分は名前が判明していますが、それが描かれてるキャラの名前なのか、だとしてもどの子がどの名前なのか未確定なので、しばらくこれで。
  3. 外国の名前

    立先生が出していないものについては調べて、アルファベット表記はこうだろう、という綴りにしました。
    欧文表記キャラCSSクラス名
    Què Myeonghwa
    雀明華(臨海女子高校)
    myeonghwa*6
    Hao Huiyu
    郝慧宇(臨海女子高校)
    huiyu
    Què
    雀博士
    que
    Niemann
    ニーマン
    niemann
    Evelyn
    イーヴリン
    evelyn
    Alice
    ハロゲートのアリス
    alice
    Blumenthal
    ブルーメンタール姉妹
    未設定*7
    Nakshatra
    ナクシャトラ(千里山女子高校)
    • *6)立先生がちょっと触れてましたが、姓と名で国が違うということで。
      姓は北京語でいいとして、下の名前は朝鮮語のmyeonghwaがミョンファという発音に近いと思われますが…覚えにくい()
      普通にローマ字でmyonfaの方がいいですかね?
    • *7)このへんはまだ。
  4. 人外の名前

    アイヌのカムイ名は研究論文で使われているような(おそらく原語の発音に近づけた)綴りを使いましたが、わからないので普通にローマ字にしたものもあります。
    あと、セアミィがよくわかりませんでした。
    欧文表記キャラCSSクラス名
    etupirka+penguin
    エトペン
    etupen
    ?
    セアミィ
    seamy
    ka'apiûara
    カピ
    kapi
    tacos
    タコス人間(仮)
    tacosman
    ?
    咏ねこ(仮)*8
    uta-neko
    Shindoji
    しんどうくん
    shindokun
    osoroshii-mono
    恐ろしいもの(仮)
    osoro
    Pakor Kamuy
    パコロカムイ
    pakor
    Atkor Kamuy
    アッコロカムイ
    atkor
    ?
    ホヤウカムイ
    hoyau
    Huri Kamuy
    フリカムイ
    huri
    Pauci Kamuy
    パウチカムイ
    pauci
    Tezcatlipoca
    テスカトリポカ
    tezcatlipoca
    • *8)これもセアミィですか?
  5. アイコンが複数ある場合

    同じキャラを複数登録してある場合、これは単純にナンバリングですが…
    名前(ローマ字)キャラCSSクラス名
    Hayari瑞原はやり
    hayarin18*9
    hayarin28
    Sukoya小鍛治健夜
    sukoya-01*10
    sukoya-02
    • *9)hayarin18は、はやりんの18番目のアイコン、ではなく、十八歳のはやりん、という意味です。
    • *10)通常はこのように名前-数字と、ハイフンを挟みます。
      ちなみにすこやんのアイコンは10個作りましたが、まだ増やすつもりです。
  6. その他のアイコン

    キャラクター以外のアイコンもあります。
    アイコンCSSクラス名
    咲-Saki-のロゴ
    _LOGO-01
    画像無し
    _SOUNDONLY
    バージョン※11
    _VER
    エラー※12
    _ERR
    • *11)スプライト画像のバージョンを表示します。
    • *12)未登録のクラス名を指定した場合に表示されます。
    ※表示がおかしいときはページをリロードして下さい。

アイコンサイズを指定する

やり方は単純で、アイコンを表示する要素にサイズのクラスを追加するだけです。
アイコンサイズHTMLコード
64×64
(既定値)
<div class="saki-icon ikuno"></div>
やで
32×32
<div class="saki-icon ikuno size32"></div>
なんやで
16×16
<div class="saki-icon ikuno size16"></div>
今作ってあるのはsize16(0.25倍)とsize32(0.5倍)の二クラスですが、他のサイズもカスタマイズ可能です。
詳しくは次回。

導入方法

まだ結構穴がありますし、立-Ritz-の方は手つかずで完成したものではないのですが、ちょっと試してみたいという方がいらっしゃいましたら、遊んでみて下さい。
デスクトップでもできますので。
  1. 以下のリンク先ファイルを、サーバーの同じフォルダにアップロードします。
    • saki-icon.css(中身をメモ帳などにコピペし、saki-icon.cssという名前で保存)
    • saki-icon_SP.png(右クリックから画像を保存)
  2. アイコンを表示させたいページのなるべく上の方に、以下の HTMLコードを貼りつけます。
    <link rel="stylesheet" href="http://example.com/my-icon/saki-icon.css" type="text/css">
    http://example.com/my-icon/の部分は、上記ファイルをアップロードしたフォルダパスに書き替えます。
以上


長くなったので記事を二本に分けました。
興味のある方だけ、【蛇足篇】を御覧下さい。
明日あたり更新します。