WEBフォントで外字をHTML表示する方法

JavaScript

外字をWEB画面表示する要件が存在するシステム開発は、頻繁ではないですが時より発生します。
筆者の肌感覚としては、官公庁案件に多い気がしています。


その場合、外字をWEBフォントとしてシステムに登録しておく方法が一般的だと思います。
今回は、WEBフォントを使って外字をHTML表示する方法を紹介します。


流れとしては以下になります。
「TTEファイルをWOFFファイルに変換」→「外字のコードを確認」→「font-familyを作成」→「HTML表示」


TTEファイルをWOFFファイルに変換


一般的に、外字フォントはTTEファイル形式で受領します。
TTEファイルをHTMLでも使用できる形式であるWOFFファイルに変換します。
WOFFファイルは「Web Open Font Format」の略です。


変換はツールを使用した方がよいです。
「WOFFコンバート」がシンプルで使いやすいかと思います。


変換する際、「サンプルHTMLファイルを作成する」チェックを付けておくと、あとのHTML表示での確認が楽なのでチェックしておきましょう。


出力するWOFFファイルは、わかり易く「gaiji.woff」としておきます。


外字のコードを確認する


外字で使用するコードを確認する。
こちらもツールを使用した方がよいでしょう。
「FontForge」を使用します。


画面をひらくと、設定されている文字の一覧が表示されます。
定義しているグリフィスのみを確認するためには「エンコーディング」→「Compact」を選択します。

font-familyを作成


HTMLに外字を表示するためには、CSSにWOFFファイルを作成するためのフォント指定をおこなう必要があります。
CSSとしては以下になります。
以下のコードはWOFFファイルに変換で出力したHTMLファイルに記載されております。


「font-face」で「gaiji.woff」を使用したフォントを定義し、「myFontClass」の使用箇所に外字表示が適用されます。


HTML表示


HTMLに外字を表示してみます。
「FontForge」で、unicodeで表現されている外字の文字コードを確認します。
左メニューの下に表示されています。


HTML上で確認するために、FontForgeで確認したunicodeを16進数表現でHTML表示します。


サンプル文字列は「※ここにunicode16進数を記述」です。


“myFontClass”クラスだけではなく、画面全体に外字表示をおこなうためには、body・html の初期化で外字フォントを指定します。
一応、外字フォントを読み込めなかった場合の考慮もおこなっておいた方がよいでしょう。

/* Webフォント指定 */
@font-face {
  font-family: "Gaiji";
  src: url("gaiji.woff")  format('woff');
}

/* 初期化 */
body, html{
    font-family: "Gaiji", "メイリオ", Meiryo, "Noto Sans JP";
}

PythonをApache上でCGIとして動作させる方法

apache

Pythonを使ってWEBアプリケーションを構築する場合、Apacheを使ってCGIとしてPythonを動作させるのが一般的です。
PythonをApache上で動作させるには、PythonとApacheをインストールして、Apacheの設定ファイルを環境にあわせて修正するだけでよいです。


今回は、PythonをApache上で動作させる方法について紹介していきます。


環境情報


  • OS:Windows10
  • Apache:Apache 2.4.41
  • Python:Phton3.9

Pythonスクリプトの格納


まず、使用するPythonスクリプトファイルをApacheの所定の場所に格納します。
ApacheのCGIとしてPythonを動かすので、Apacheのルートディレクトリに存在する「cgi-bin」に格納します。


PythonをCGIとして動作させる場所

今回は、以下の”Hello,World!”を表示するだけのスクリプトで動作確認をおこないます。


#! C:\Python34\python

print('Content-Type: text/html')
print('')
print('Hello,World!')

1行目は、pythonのインストールパスを記載する必要があります。
筆者のマシンでは、「C:\Python34\python」にPythonをインストールしています。


Apacheのインストールについては省略しましたが、以前書いた記事があるので、そちらを参照してください。


Apache設定ファイルの修正


次に、PythonをApacheのCGIとして動かすためにApacheの設定ファイルを修正します。
修正するのは、Apacheの設定ファイルである「httpd.conf」になります。


筆者のマシンのApacheは「C:\Apache24」にインストールしているのですが、「httpd.conf」の格納先は以下になります。


・C:\Apache24\conf\httpd.conf

「httpd.conf」の修正箇所は大きくわけて2カ所になります。 まず、Scriptエイリアスの設定で、「cg-bin」フォルダをcgi実行スクリプトフォルダとして有効にします。


<IfModule alias_module>
    #
    # Redirect: Allows you to tell clients about documents 
    # exist in your server's namespace, but do not anymore.  
    # will make a new request for the document at its location.
    # Example:
    # Redirect permanent /foo http://www.example.com/bar

    #
    # Alias: Maps web paths into filesystem paths and is used to
    # access content that does not live under the DocumentRoot.
    # Example:
    # Alias /webpath /full/filesystem/path/
    #
    # If you include a trailing / on /webpath then the server will
    # require it to be present in the URL.  You will also likely
    # need to provide a <Directory> section to allow access to
    # the filesystem path.

    #
    # ScriptAlias: This controls which directoriesscripts. 
    # ScriptAliases are essentially the same as
    # documents in the target directory are treated 
    # run by the server when requested rather than as 
    # client.  The same rules about trailing "/" apply
    # directives as to Alias.
    #
    ScriptAlias /cgi-bin/ "${SRVROOT}/cgi-bin/"
</IfModule>

通常、上記の設定はデフォルトで有効になっているので、特に設定変更する必要はないかもしれません。


もう1か所の変更箇所が、「cgi-bin」フォルダのディレクトリ設定です。
拡張子「.py」をスクリプトファイルとして認識します。

以下の例では、「.py」ファイルだけではなく「.cgi」「.pl」もスクリプトファイルとして設定しています。


<Directory "${SRVROOT}/cgi-bin">
   AllowOverride none
   AddHandler cgi-script .cgi .pl .py
   Options +ExecCGI
   Require all granted
</Directory>

上記の設定をおこなった後にApacheを再起動し、ブラウザでアクセスして格納したPythonスクリプトが動作するかを確認します。


以下の画面が表示されれば設定成功です。



PythonスクリプトとHTMLを共存させる場合


「cgi-bin」下にはスクリプトファイル(上記例では「.cgi」「.pl」「.py」)だけではなく、通常のHTMLファイルも格納したいことはあると思います。
その場合は、「cgi-bin」のディレクトリ設定で「AddHandler text/html」の設定をおこない、.htmlも有効にする必要があります。


以下の例では、「cgi-bin」下に「.html」「.htm」「.txt」「.css」「.js」の配置を許可しています。


<Directory "${SRVROOT}/cgi-bin">
   AllowOverride none
   AddHandler cgi-script .cgi .pl .py
   AddHandler text/html .html .htm .txt .css .js
   Options +ExecCGI
   Require all granted
</Directory>

この設定をいれることで、「cgi-bin」下にスクリプトファイル以外の静的HTMLについても格納可能になります。




CSSだけで画像っぽい表示をやってみる。画像は使わない!

CSS

WEBページを作成していく上で、ちょっとした画像を使用したい場合があります。

ひと昔まえであれば、本当にいちいち画像を作成する必要がありましたが、HTML5・CSS3が主流の現在においては、ちょっとした画像は準備する必要はありません。

CSSを使えば、画像を作成しなくても画像っぽい表現が可能となります。


今回は、簡単な例ですが、WEBページ上で”画像っぽい”表示をおこなう方法を紹介します。


環境情報


  • ブラウザ:Chrome81

WEB画面にマークを付ける


例として、一覧画面上に新着の記事については新着であるマークをつける場合を考えます。

よくあるパターンですよね。

恰好良いマークをつけたいのでデザイナーさんに頼んで画像をつくってもらいたいところですが、そんな必要はありません。


以下のような表示であれば、わざわざ画像を作る必要はなく、HTMLとCSSで表現できます。


::after疑似要素を使用した新着マークの表示サンプル

実際のWEBページはこちら


::after疑似要素を使ったサンプルコード


実際は、CSSの::after疑似要素を使ってマーク表示をおこなっています。
::after疑似要素は、選択した要素の最後の子要素として擬似要素を作成します。
よく content プロパティを使用して、要素に装飾的な内容を追加するために用いられます。


まずは、HTMLのサンプルです。

マークを付けたい要素に対して「newクラス」を付加します。

    <table>
        <tr>
            <th>No</th>
            <th>タイトル</th>
            <th>日時</th>
        </tr>
        <tr>
            <td class="new">1</td>
            <td>画像を使わずに画像っぽい表示をさせる①</td>
            <td>2020/06/14 11:27</td>
        </tr>
        <tr>
            <td>2</td>
            <td>画像を使わずに画像っぽい表示をさせる②</td>
            <td>2020/06/13 23:05</td>
        </tr>
        <tr>
            <td>3</td>
            <td>画像を使わずに画像っぽい表示をさせる③</td>
            <td>2020/05/03 08:11</td>
        </tr>
    </table>

次に、CSSのサンプルです。

一応、サンプルWEBページに使用しているCSSを全て紹介していますが、実際にマーク表示で使用している箇所は、「::after」属性部分のみとなります。

        body {
        }
        table, tr, th, td {
            border: solid 1px gray;
        }
        table {
            width: 800px;
        }
        table tr th:nth-child(1) {
            font-weight:bold;
            width:10%;
            background:#FFFFCC;
        }
        table tr th:nth-child(2) {
            font-weight:bold;
            width:60%;
            background:#FFFFCC;
        }
        table tr th:nth-child(3) {
            font-weight:bold;
            width:30%;
            background:#FFFFCC;
        }
        .new::after {
            content:"新";
            font-weight:bold;
            background:#FF0000;
            height:30px;
            width:30px;
            border-radius:21px;
            text-align:center;
            line-height:30px;
            display:inline-block; 
            color:#FFF;
            margin-left:20px;
        }

::after疑似要素の使い方


サンプルを例にして、::after疑似要素の使い方について図で説明します。
あまり難しいものではないです。


CSSでのマーク表示方法

「border-radius」で丸みを表現して画像っぽいスタイルを作成するところがポイントですね。


まとめ


HTMLとCSSだけで、ひとむかし前だと画像を準備する必要があったようなデザインも表現できることが解っていただけたかと思います。


まとめ
  • 指定要素の後に別要素を付加するのは::after疑似要素を使えばよい
  • ちょっとした画像っぽい表現は、HTMLとCSSで可能

それではまた。