日本語 ![]() | English ![]() | 简体中文 ![]() | 繁體中文 ![]() |
このページに書かれた内容は、上級者向けです。
グリフウィキに投稿された全グリフデータは、1日ごとに1つのファイルにまとめられた上で公開されています。URLは以下となります。
http://glyphwiki.org/dump.tar.gz
このアーカイブファイルには2つのデータファイル(dump_newest_only.txt および dump_all_versions.txt)が含まれます。それぞれ1行ごとにグリフ名、関連字、グリフデータの並びで記述されています。dump_newest_only.txtに含まれるのは最新バージョンのみのデータです。dump_all_versions.txtに含まれるのは各グリフのすべてのバージョンのデータです。ただしいずれも有効なデータのみ含まれます。
また、以下の場所にてミラーを公開しています。
http://kage.osdn.jp/glyphwiki/
このデータは、KAGE/engineを用いて漢字字形に変換して活用することが可能です。
KAGE/engine紹介ページ http://kamichi.jp/engine.html
GitHubリポジトリ https://github.com/kamichikoichi/kage-engine
以下のURL記述により個別のグリフをJSON/JSONP形式で取得できます。
http://glyphwiki.org/json?name=[グリフ名]{@[バージョン番号]}{&callback=[コールバック関数名]}
http://glyphwiki.org/json?name=u4e00
http://glyphwiki.org/json?name=u4e00@2
http://glyphwiki.org/json?name=u4e00&callback=callback
取得データの内容は以下の通りです。
name | グリフ名 |
version | バージョン番号 |
related | 関連字(U+[符号位置]) |
data | KAGEデータ |
なお、無効なグリフ名の場合には空のオブジェクトが返ります。無効なバージョン指定の場合、dataとrelatedにはnullが入ります。コールバック関数形式の場合は関数名を指定してください。先頭はアンダースコアか英字、それ以降はアンダースコアか英数字を指定してください。無効な場合はcallbackとなります。
以下のURL記述については、「Access-Control-Allow-Origin」を「"*"」に設定しています。今後、上記URLから以下に移行予定です。
https://glyphwiki.org/api/glyph?name=[グリフ名]{@[バージョン番号]}{&callback=[コールバック関数名]}
https://glyphwiki.org/api/glyph?name=u4e00
https://glyphwiki.org/api/glyph?name=u4e00@2
https://glyphwiki.org/api/glyph?name=u4e00&callback=callback
(「json」を「glyph」に変更しました)
(HTTP通信の場合は non-ssl.glyphwiki.orgをお使いください)
https://glyphwiki.org/api/related?code=[符号位置]}{&callback=[コールバック関数名]}
https://glyphwiki.org/api/related?code=4e00
https://glyphwiki.org/api/related?code=4e00&callback=callback
(HTTP通信の場合は non-ssl.glyphwiki.orgをお使いください)
符号位置は大文字小文字関係なく16進数4桁または5桁を指定します。戻り値は"related"で、グリフ群ごとに「,」で区切られ、エイリアスグリフは2つ目以降に「=」区切りで列挙されます(JSONらしくない数珠繋ぎになります)。グリフページの「関連グリフ」における指定した符号位置の「関連字」に並ぶグリフ群のグリフ名が得られます。
グループとして登録したものや、登録したグリフ1字をウェブフォント(@font-face)として呼び出すことができます。閲覧ブラウザがウェブフォントに対応している必要があります。
先に、グループページを開いてフォントが生成済みであることを確認してください。
HTMLの<head>内に以下を記述してください。
<link rel="stylesheet" type="text/css" href="http://glyphwiki.org/style?page=(ページ名)&label=(任意のラベル)">
たとえば以下のようになります。ページはバージョン付にも対応しています。ラベルは英数字60字以内です。ラベルを付けなかった場合は「glyphwiki」というラベルになります。
<link rel="stylesheet" type="text/css" href="http://glyphwiki.org/style?page=Group:ウェブフォント&label=webfont"> <link rel="stylesheet" type="text/css" href="http://glyphwiki.org/style?page=Group:ウェブフォント@1&label=webfont"> <link rel="stylesheet" type="text/css" href="http://glyphwiki.org/style?page=Group:ウェブフォント">
上記1行を記述すると、実際には以下のように解釈されます(一番目の例)。
@font-face { font-family: webfont; src: url(http://glyphwiki.org/font/gw465758.ttf); } .webfont { font-family: webfont; }
あとは、<span class="webfont">■</span> の形式でフォントを使うことができます。または直接スタイルで「style="font-family: webfont;"」と指定できます。
ラベルを書き分けることによって複数のグループページのフォントを呼び出すことができます。
HTMLの<head>内に以下を記述してください。
<link rel="stylesheet" type="text/css" href="http://glyphwiki.org/style?glyph=(グリフ名)">
たとえば以下のようになります。
<link rel="stylesheet" type="text/css" href="http://glyphwiki.org/style?glyph=sandbox">
グリフ1文字の場合はバージョンを指定することはできません。また、「〓」にそのグリフが割り当てられていますので、その文字を使いたい部分に以下を記述します。ラベルはグリフ名となります。
<span class="sandbox">〓</span>
使用サンプル をご覧ください。
またグリフウィキのドキュメントページでは簡単にウェブフォントを利用できるようになっています(現在試行中)。詳細はGlyphWiki:フォント生成をご覧ください。
ブログなど<head>内に記述ができない場合、もし<script>の記述が許可されているならばGoogle Font APIを活用することができます。以下のように記述すれば同じようにグリフウィキの文字を呼び出すことができます。
<script type="text/javascript"> WebFontConfig = { custom: { urls: ['http://glyphwiki.org/style?glyph=sandbox'] } }; </script> <script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js" type="text/javascript"></script>
文字の出し方は<link>の場合と同じです。
<span class="sandbox">〓</span>
<script type="text/javascript"> WebFontConfig = { custom: { urls: ['http://glyphwiki.org/style?page=Group:ウェブフォント'] } }; </script> <script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js" type="text/javascript"></script>
文字の出し方は<link>の場合と同じです。
<span class="glyphwiki">雨</span>
classを指定したい場合は
WebFontConfig = { custom: { urls: ['http://glyphwiki.org/style?page=Group:ウェブフォント&label=(任意のラベル)'] } };
とし、呼び出すときは
<span class="(任意のラベル)">雨</span>
となります。