【コラム】

Yet Another 仕事のツール

107 TYPO3の文字化けを解消

    鶴田展之  [2006/05/17]

    まずは、前回の宿題の解答から。TYPO3でコンテンツを編集した時に起きる、日本語の文字化けの原因とその対策である。設定方法を知っていればすぐ解決できるのだが、知らないとかなりハマる。なお、今回はMac OS X環境上のTYPO3 3.8.1で検証を行った。TYPO3 4.0についても同様の現象が起きるかは、次回以降でチェックしてみたい。

    さて、前提から考えていこう。TYPO3はLAMPアプリケーションであるから、文字化けの原因は様々なレイヤで起きていることが考えられる。ざっと思いつくところで以下のようなポイントが気になるところだ。

    • MySQLデータベースに格納されるデータの文字エンコーディング
    • PHPの内部文字エンコーディング
    • ApacheのDefaultCharset
    • HTMLのMETAタグによるcharset指定
    • TYPO3内部における国際化関連の処理

    MySQL、PHP、Apacheに関しては、TYPO3インストーラ版はXAMPPを使用している。デフォルト設定のままだと、おそらくマルチバイト文字のことなど考慮されていないだろう。まずはここから潰していこう。XAMPPの各設定ファイルは、/Applications/xampp/etcディレクトリにすべて置かれている。使用する文字エンコーディングだが、時代の趨勢を考えると全体的にUTF-8で統一しておくのが良いだろう。

    最初はMySQLだ。XAMPPに含まれるMySQLのバージョンは5.0系なので、UTF-8を問題なく扱える。PHPからMySQLデータベースに接続する際に、必ずUTF-8を使用するよう設定しよう。my.cnfの[mysqld]セクションに、以下の一行を追加する。

    init-connect=SET NAMES utf-8

    次はPHP。php.iniのmbstring設定を有効にする。

    [mbstring]
    mbstring.language = Japanese
    mbstring.internal_encoding = UTF-8
    mbstring. http_input = auto
    mbstring.http_output = UTF-8
    mbstring.encoding_translation = Off
    mbstring.detect_order = auto
    mbstring.substitute_character = none;
    mbstring.func_overload = 0

    Apacheも、AddDefaultCharsetがLatin1エンコーディングに設定されている。noneに変更しておこう。

    AddDefaultCharset none

    すべて設定したら、一度XAMPPを再起動する。TYPO3フォルダの「Stop XAMPP.term」「Start XAMPP.term」を順にダブルクリックして実行しよう。

    XAMPPの設定上は、これで日本語を正しく扱えるようになったはずだ。バックエンドから記事の編集を行ってみよう…… と言いたいところだが、XAMPPの設定を変えたことで、今度はせっかく日本語化したTYPO3のメニューが化けてしまった。

    ページのソースを見てみると、なぜか「<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />」と、METAタグでシフトJISが指定されている。ためしにフロント側、FC BogfeetのWebサイトのソースを見てみると、こちらは「iso-8859-1」、Latin1だ。TYPO3は、charset指定を動的に変更しているのである。

    そこで、charset指定をTYPO3に任せずにUTF-8に統一してしまうことにしよう。これは、「/Applications/xampp/htdocs/quickstart/typo3conf」ディレクトリにあるTYPO3の設定ファイル「localconf.php」に指定できる。以下の一行を追加するだけだ。

    $TYPO3_CONF_VARS["BE"]["forceCharset"] = "utf-8";

    ブラウザでバックエンドをリロードすると、文字化けが解消されている。METAタグによるcharset指定もUTF-8に変わっているはずだ。いよいよ、コンテンツの編集を行ってみよう。

    メニューから[Web] - [リスト]を選択し、サイトツリーの[Home] - [News]をクリックする。画面右側に表示される「新規レコード」アイコンをクリックすると、新しいニュース記事が作成できる。

    日本語で記事を書いて保存し、念のためメニューから「フロントエンドキャッシュを削除」を実行しておく。コンテンツが登録できたら、ブラウザからフロント側を開き、文字化けしていないことを確認しよう。

    新着記事

    特設サイトの情報

      人気記事

      一覧

        イチオシ記事

        新着記事

        特別企画

        マイナビニュースマガジン