アイデアマンズ株式会社(ideaman's Inc.)

Home Sitemap

｜特徴｜適用例｜β版ダウンロード｜導入｜美しい文字の種類を追加する｜詳細仕様｜その他｜

特徴

BJKit(BeautifulJapaneseKit)でビューティフルな見出しを生成


htmlソースに簡単なJavascriptを記述するだけで、ページ上の文字列がアンチエイリアスの効いた美しい文字に代わります。日本語にも対応しているので、様々な場面で利用することができます。


  • 動的に表示するので、画像を作成する必要がない
  • 新聞記事風、楷書風、POP調など、書体を自由にアレンジ出来る
  • htmlの構造を崩さず、SEOやユーザービリティを犠牲にしない

など、ページ作成の効率アップと同時に、表現力も向上させる手法です。


適用例

従来は、当ページの見出し（h1タグ）は下記のように表示されます。

従来の見出しの例

BJKitの適用後は下記のようにアンチエイリアスのかかったテキストが表示されます。

適用後の見出しの例

ハイパーリンクにも対応しています。

従来の見出しの例

適用後の見出しの例

フォントの大きさや色、種類、その他様々な変更が可能です。

設定が可能。

綺麗なフォントデータの読込み中は、下記のようにアンチ無しのフォントで代替表示します。(Flashで表示しています。)

綺麗なフォントを読み込み中の表示例

※綺麗なフォントデータはブラウザにキャッシュされるので、一度表示されると次回以降再度の読み込みに時間はかかりません。


β版ダウンロード

現在ベータ版をダウンロードできます。

インストールする環境に次のファイルをダウンロードしてください。 ダウンロードおよびインストールをしてBJKitを利用する前に、利用規約を必ずお読みください。インストールして利用を開始した際は利用規約に同意したものとみなされます。

ZIP版

メールアドレス:


導入

STEP1) サーバーにファイルをアップロードする

  1. ダウンロードしたファイルを解凍してください。
  2. ［common/swf/beautifulJapanese.swf］をご利用のサーバーにアップロードしてください。（例：ディレクトリは変更可能です）
  3. ［common/js/beautifulJapanese.js］を開き、［beautifulJapanese.swf］ファイルのアップロード先に応じて［baseSwfFile = '/common/swf/beautifulJapanese.swf';］(12行目）を変更してください。
  4. ［common/js/beautifulJapanese.js］、［common/swf/fontsData/gothic.swf］、［common/swf/fontsData/mincho.swf］をそれぞれアップロードしてください。

（※アップロード先は変更可能です）

STEP2) htmlページにjavascriptを記述する

下記のコードを例にとって、見出しとリスト項目を美しい文字に変換する手順を説明します。

  1. <head>～</head>タグ内にJavascript［<script type="text/javascript" src="/common/js/beautifulJapanese.js"></script>］を記述します。
  2. アップロード先に応じて、［src="/common/js/beautifulJapanese.js"］のパスを変更してください。
  3. </body>タグの真上に次のJavascriptを記述します。
  1. 美しくする文字列を囲むコンテナタグに任意のid［id="foo"］を付記します。
  2. 見出しの文字列を美しくするために、「"BeautifulJapaneseは～"」の文字列を囲む<h1>タグに［id="beautifu_title"］を記述します。
  3. リスト項目をすべて美しくするために、リスト<li>タグをまとめて囲む<ul>タグに［id="beautifu_list"］を記述します。

STEP3) 美しい文字列の調整する

美しい文字列の表示は、replaceFonts()関数を使用してします。 replaceFonts()関数には10個の引数があり、それぞれの値を変更して文字列の調整を行います。

replaceFonts関数

引数の説明

targetId
変換対象タグのidを入力します。
変換対象タグが複数ある場合は、変換対象タグをまとめて囲むタグのidを入力します。
targetTag
変換対象のタグ名を入力します。
変換対象が複数ある場合にのみ入力します。
targetSwf
美しい文字用flashファイルのファイル名を入力します。
flaWidth
美しい文字列の表示領域の幅を指定します。
fontSize
美しい文字のサイズを指定します。
fontLineHeight
美しい文字の行間サイズを指定します。（美しい文字列下部の余白の高さを意味します。）
charLimit
一行あたりに表示する文字数を指定します。全角ひらがな・カタカナ・漢字は2文字として算定しますので注意してください。
fontColorNormal
美しい文字の色を指定します。16進数の値を'#'をつけずに入力してください。
fontColorLink
美しい文字の、リンク色を指定します。16進数の値を'#'をつけずに入力してください。
fontColorHover
美しい文字の、リンク色（ロールオーバー時）を指定します。16進数の値を'#'をつけずに入力してください。

STEP4) 美しい文字列にハイパーリンクを加える

対象文字列を<a href="foo" target="baa">～</a>で囲むことで、自動的にハイパーリンクが付加されます。


美しい文字の種類を追加する

美しい文字列は、flashムービー(.swf)によって描かれています。日本語フォントのデータを埋め込んだswfファイルを読み込むことで、美しい日本語の表示を実現しています。

Flash で日本語フォントを作成する

  1. flashを起動します。
  2. ダウンロードファイルの［common/swf/fontsData.fla/sample.fla］を開いてください。（FlashMX 2004以降に対応していますが、サンプルの見出しのように文字をフィルタ効果で装飾する場合はFlash8以降の対応となります。）
  3. テキストボックスを選択し、アクティブにします。
  4. ［フォント］サブメニューから新規に作成するフォントを選びます（英文フォントはフリーのものが多くありますが、日本語フォントのほとんどはライセンスが必要です。フォントデータは配布ファイルに同梱されておりませんのでご了承ください。）
  5. テキストボックスの位置を微調整します。（縦、横ともに2pxほどの余白を設けます。）
  6. ［パブリッシュ］してswfファイルを生成します。

追加フォントを使用する

  1. 作成したswfファイルを［/common/swf/fontsData/］ディレクトリにアップロードしてください。
  2. replaceFonts()の第三引数［targetSwf］に［/common/swf/fontsData/新規作成したファイル.swf］を入力し、swfファイルを指定します。

（※ディレクトリ,ファイル名は変更可能です）


詳細仕様

動作環境

  • windows
    • InternetExplorer6.0以上（確認済み）
    • Firefox1.5.0.4以上（確認済み）
  • Mac
    • Safari 1.2以上（確認済み）
    • Firefox1.5.0.4以上（確認済み）
  • FlashPlayer
    • ver7.0以降

その他

sIFRについて

BJKitのJavascriptやActionScriptはオリジナルで作成したものですが、flashによる代替文字表示など、sIFRから多くの発想（ヒント）を得て実現しました。この場を借りてお礼申しあげます。ありがとうございました。

sIFR(scalable Inman Flash Replacement)］
http://www.mikeindustries.com/blog/archive/2005/02/sifr-2.0-release-candidate-4