[Flex][AS3]ブラウザのタイトル表示変更方法と注意点

ブラウザのタイトル設定方法を紹介します。
設定方法は難しくないのですが、いくつか注意すべき点が存在します。


mxmlの<Application>のpageTitleプロパティを使用すると、
ブラウザのタイトル部分に表示するタイトルを設定する事が可能です。

■メインアプリケーション（mxml）
 

<?xml version="1.0" encoding="utf-8"?>

	

実際にswfコンテンツがのっているhtmlは、ビルド時に
index.template.htmlを元に生成されますが、この時<Application>のpageTitleの値を参照し
htmlの<titlle>に設定を行います。


■index.template.html

<title>${title}</title>

  ↓ビルドでhtmlが生成される

■XXXXX.html

<title>mxmlで設定したタイトル名</title>

わざわざアプリケーション側で設定しなくても、index.template.htmlのtitleを直接変更すれば
シンプルな設定となりますが、実はこの方法ではtitleに日本語を設定してしまうと
タイトルが文字化けしてしまいます。



■index.template.html

<title>テストページ</title>

  ↓
■XXXXX.html

<title>繝�繧ｹ繝医�壹�ｼ繧ｸ</title>

その為、タイトルの設定は<Application>のpageTitleプロパティで設定する必要がありますが、更に注意点が存在します。

通常、自動生成されるhtmlのエンコードはUTF-8ですが、
エンコーディングをUTF-8以外に変更した場合、title部分が文字化けしてしまいます。

文字化けしてしまった部分を直接修正する方法もアリですが、
ビルドの度に生成されるファイルなので、都度修正が必要になってしまいます。
（デグレード等を引き起こす可能性があるため危険です）

そこでオススメなのが、JavaScriptでタイトルを設定する方法です。
この方法ならば文字化けも解消でき、かつ動的にタイトルの設定を行う事が可能となります。
以下がサンプルです。
■アプリケーション側

//　ウインドウの切り替え
ExternalInterface.call('setTitle',viewName);

■html側（JavaScript)

<script language="JavaScript" type="text/javascript">

	// windowのタイトルを設定
	function setTitle(ttl)
	{
		window.document.title = ttl;
	}
</script>

html側(index.template.htmlに実装)にタイトル設定用のJavaScriptを用意し タイトル設定を行うタイミング時、画面側でExternalInterfaceを使用しJavaScriptの呼び出しを行います。 この方法を使用した場合、動的にタイトルの値を変更する事も可能となるのでオススメです。