Comments
Description
Transcript
デコメ絵文字pop コンテンツ制作ガイドライン
Copyright © 2011-2013 NTT DOCOMO, INC. All rights reserved. コンテンツ制作ガイドライン デコメ絵文字pop・デコメピクチャpop コンテンツ制作ガイドライン Version :0.9.0 Date : 2011/7/1 第 2.03 版 平成 25 年 11 月 11 日 株式会社 NTT ドコモ Page 1/28 Copyright © 2011-2013 NTT DOCOMO, INC. All rights reserved. コンテンツ制作ガイドライン 改版履歴 版 1.00 版 1.01 版 項番 1.1 1.3.1 1.3.2 3.2.1 3.2.5 3.3.1 3.3.2 1.02 版 1.03 版 2.00 版 2.01 版 1.3.2 5.5.2 3.3.1 3.3.2 1.2 1.3.2 1.3.3 2.3 2.02 版 全体 2.03 版 2.1 4.1.2 4.3 4.4 全体 項目 1.00 版作成 デコメ絵文字 popSWF、デコメピクチャ SWF の用語説明を削 除 サービス特徴について、文言を修正 サービス特徴について、イメージ差替え デコメ絵文字 pop 動作端末について修正 ステージサイズの注意事項について修正、追記 図 1.のイメージ差替え 素材 SWF のデータサイズについて、追記 アニメ絵文字オーサリングツールの提供方法を更新 表 1.「インライン添付ファイル」の内容を修正 表 2.「本文文字数」→「本文」に変更し、サイズについて修正 表 2.「インライン添付ファイル」のサイズについて修正 データサイズの注意事項について追記 全体的に文言修正 Android 2.2 以降の非対応機種に L-06C を追記 深度の変更方法について、注意点に補足を追記 オーサリングツールの名称を修正 表 1.「本文」のサイズを修正 表 2.「本文」のサイズを修正 サイズ制限または高さ制限のためデコメ絵文字 pop として再 生されない場合の説明の曖昧さを修正 方式変更にともない全面改訂 新方式対応開始にともない文言を修正（現方式→従来方式な ど） オーサリングツールのダウンロード URL および問い合わせ先 メールアドレスを変更 sp モードメールがバージョンアップでドコモメールと名称変更さ れることにともない、sp モードメールとドコモメールを併記 （デコメ絵文字 pop･デコメピクチャ pop コンテンツの作成には 影響しません） 利用可能なエレメント画像から JPEG を削除 一般公開に向けて表現を修正 Page 2/28 Copyright © 2011-2013 NTT DOCOMO, INC. All rights reserved. コンテンツ制作ガイドライン Table of Contents 1 Introduction .....................................................................................................................................5 1.1 用語説明 ........................................................................................................................................5 1.2 はじめに ..........................................................................................................................................6 1.3 デコメ絵文字 pop サービス概要 .......................................................................................................6 1.3.1 サービスの特徴 .......................................................................................................................6 1.3.2 デコメ絵文字 pop 動作端末について.........................................................................................7 1.3.3 デコメ絵文字 pop 非対応端末の動きについて ...........................................................................7 1.3.4 デコメ絵文字 pop メール表示の仕組みについて ........................................................................8 2 デコメ絵文字 pop ファイル ..................................................................................................................9 2.1 デコメ絵文字 pop ファイルの概要 ....................................................................................................9 2.2 デコメ絵文字 pop のファイルフォーマット ..........................................................................................9 2.3 デコメ絵文字 pop ファイルの作成 ..................................................................................................11 3 コンテナ GIF ファイルの作成 .............................................................................................................12 3.1 データフォーマット ..........................................................................................................................12 3.2 画像縦横サイズ ............................................................................................................................12 3.3 データサイズ .................................................................................................................................12 4 アニメ素材データの作成....................................................................................................................14 4.1 概要 ..............................................................................................................................................14 4.1.1 JavaScript によるアニメーション .............................................................................................14 4.1.2 利用可能なエレメント画像 ......................................................................................................14 4.1.3 データサイズ ..........................................................................................................................15 4.2 絵文字のプロパティ情報 ................................................................................................................15 4.2.1 制作者名・絵文字名の命名規則 .............................................................................................15 4.2.2 連携絵文字名 ........................................................................................................................15 4.2.3 コメント ...................................................................................................................................15 4.2.4 テキスト連携 ..........................................................................................................................15 4.3 アニメ素材データの構成 ................................................................................................................16 4.4 デコメ絵文字 pop 本文 HTML のファイル構成 ...............................................................................16 4.5 アニメ素材データ作成時の注意点 .................................................................................................16 4.5.1 エレメント画像 ........................................................................................................................16 4.5.2 実機検証 ...............................................................................................................................17 5 JavaScript ......................................................................................................................................18 5.1.1 self パラメータ ........................................................................................................................18 5.1.2 emoji パラメータ .....................................................................................................................18 5.1.3 フレーム処理 .........................................................................................................................18 5.1.4 画像操作 ...............................................................................................................................19 5.1.5 _META 変数..........................................................................................................................26 5.1.6 文字列連携............................................................................................................................27 5.1.7 制限 ......................................................................................................................................27 Page 3/28 Copyright © 2011-2013 NTT DOCOMO, INC. All rights reserved. コンテンツ制作ガイドライン ｢i モード｣、｢sp モード｣、「デコメ絵文字 pop」、「デコメピクチャ pop」は、株式会社 NTT ドコモの登録商標です。 「アニエモ」はネオス株式会社の登録商標です。 Page 4/28 Copyright © 2011-2013 NTT DOCOMO, INC. All rights reserved. コンテンツ制作ガイドライン 1 Introduction 本資料は、デコメ絵文字 pop・デコメピクチャ pop を作成する為のガイドラインです。 1.1 用語説明 用語 アニメ素材データ 素材 GIF（コンテナ GIF） デコメ絵文字 pop ファイル デコメピクチャ pop ファイル デコメ絵文字 pop メール デコメ絵文字 pop 本文 HTML アニエモライブラリ 説明 実際の演出部分となる画像や JavaScript などのファイ ル。 合成前や非対応機種での表示部分となる GIF ファイル。 素材 GIF 中にアニメ素材データを含む特定フォーマットの GIF ファイルのうち、縦 20dot×横 20dot のサイズのファ イル。デコメ入力パレットでは通常の GIF 画像として表示 される。 特に明記がない場合、本書内における「デコメ絵文字 pop ファイル」はデコメピクチャ pop ファイルも含んでいる。 デコメ絵文字 pop ファイルであるが、縦 20dot×横 20dot 以外のサイズのファイル。 デコメ絵文字 pop ファイルやデコメピクチャ pop ファイルを 含むメール。 デコメ絵文字 pop ファイルやデコメピクチャ pop ファイルと 本文の HTML 情報を合成してできるメール本文。 デコメ絵文字 pop ファイルやデコメピクチャ pop ファイルを 制作する際に利用される JavaScript のライブラリ。 Page 5/28 Copyright © 2011-2013 NTT DOCOMO, INC. All rights reserved. コンテンツ制作ガイドライン 1.2 はじめに デコメ絵文字/ピクチャ pop は、スマートフォンで初めて i モードを超えるデコメ機能として搭載されるものです。 コンテンツ提供者様のご協力なしに、この市場を活性化していくことはできないため、様々なコンテンツの提供 など、ご協力をどうぞよろしくお願い申し上げます。 今後、デコメ絵文字 pop・デコメピクチャ pop の従来方式の技術が Android OS でサポートされなくなることが 予定されております（サポートされなくなる技術を利用したコンテンツ、sp モードメールを従来方式版と呼びま す）。そこで、今後デコメ絵文字 pop・デコメピクチャ pop の既存の仕様を、JavaScript を利用した新方式の仕 様に変更致しました。それに伴い sp モードメールも新方式対応版をリリースしております。また、sp モードメ ールのバージョンアップ版であるドコモメールは新方式にのみ対応しております。 本書では、新方式に対応するコンテンツ制作について説明します。 突然の仕様変更によりコンテンツを提供頂いているコンテンツ提供者様には大変ご迷惑をおかけしますが、 ご理解頂けますようお願い申し上げます。 1.3 デコメ絵文字popサービス概要 1.3.1 サービスの特徴 デコメ絵文字 pop では、i モードからある従来のデコメ絵文字/ピクチャの枠を超えた動きを実現します。 ・メール全体に広がるような、画面枠一杯を利用したアニメーションが可能です。 ・2 つ以上のコンテンツが連携して、お互いのコンテンツに動作しあうような動きが可能です。 ・メール本文の内容や画面のタップ等に応じて動く、ユニークな表現もできます。 画面枠一杯の動作 （雪が降る） デコメ同士が連携 （弓でハートを射る） 文字に反応して動作 （「食」に反応する） デコメ絵文字 / ピクチャと同様の入力方法により、デコメ絵文字 pop 入りメールを作成可能 ・デコメ入力パレットから対象のデコメ絵文字/ピクチャ pop を選択するだけで、簡単に入力できます。また、機 種によっては IME のパレットからもデコメ絵文字/ピクチャ pop を入力可能です。ただし、IME のパレット上は デコメ絵文字/ピクチャ pop の識別子が付加されません（改善を検討中です）。 ・デコメ絵文字/ピクチャ pop 選択前に、デコメ入力パレット上で長押しすることでプレビュー機能 / 説明文で動 作イメージを確認できます。 Page 6/28 Copyright © 2011-2013 NTT DOCOMO, INC. All rights reserved. コンテンツ制作ガイドライン ・2 つ以上が連携するデコメ絵文字 pop の入力を簡単に行えるように、セット候補をデコメ入力パレットに 「Combo」表示します。 デコメ入力パレットイメージ プレビュー表示 デコメ絵文字と同じように かんたんに入力することが可能！ デコメ入力パレットに混在させて表示 デコメ絵文字pop/ピクチャpopに識別子（ 実際にどのような動きをするか 事前に確認することも可能！ ）表示 選択前に簡易プレビュー/ コンテンツの説明文を表示可能 連携候補の表示 連携するセットの素材をオススメして くれるから入力しやすい！ 入力したデコメ絵文字pop/ピクチャpopと 連携可能な素材を分り易く表示 ※ＵＩはイメージであり、変更となる場合があります。 1.3.2 デコメ絵文字pop動作端末について ・Android OS 2.2 以降 ・sp モードメール(バージョン 5900 以降)およびドコモメール 1.3.3 デコメ絵文字pop非対応端末の動きについて ・デコメ絵文字 pop 非対応端末/メーラでは、デコメ絵文字 pop ファイルはメール本文と合成されずにデコメ絵 文字 pop に含まれる素材 GIF 部分をデコメ絵文字（または、ピクチャ）として認識、表示します。 デコメ絵文字pop 入りメール 対応機種 かつ 対応メーラ 非対応機種 または 非対応メーラ ◎デコメ絵文字pop として再生表示 ○デコメ絵文字/ピクチャ として表示 ・ドコモメール／sp モードメールとコンテンツの対応方式による互換性一覧は下記の通りです。 [1] コンテンツ：新方式 sp モードメール：新方式またはドコモメールの場合 デコメ絵文字 pop・デコメピクチャ pop（新方式）として表示します Page 7/28 Copyright © 2011-2013 NTT DOCOMO, INC. All rights reserved. コンテンツ制作ガイドライン [2] コンテンツ：新方式 sp モードメール：従来方式の場合 デコメ絵文字・デコメピクチャ（GIF）として表示します [3] コンテンツ：従来方式 sp モードメール：新方式またはドコモメールの場合 デコメ絵文字・デコメピクチャ（GIF）として表示します [4] コンテンツ：従来方式 sp モードメール：従来方式の場合 デコメ絵文字 pop・デコメピクチャ pop（従来方式）として表示します [新方式]デコメ絵文字pop 入りメール 新方式対応 メーラ 従来方式対応 メーラ [従来方式]デコメ絵文字 pop入りメール 新方式対応 メーラ 従来方式対応 メーラ 1.3.4 ◎デコメ絵文字pop(新方式) として再生表示 ○デコメ絵文字/ピクチャ として表示 ○デコメ絵文字/ピクチャ として表示 ◎デコメ絵文字pop(従来 方式)として再生表示 デコメ絵文字popメール表示の仕組みについて デコメ絵文字 pop 対応ドコモメール／sp モードメールアプリに搭載された合成エンジンによって、メール本文 に挿入されたデコメ絵文字 pop ファイルと本文 HTML 情報とが合成され、デコメ絵文字 pop 本文 HTML コン テンツとして展開されます。 図 1. デコメ絵文字 pop メールの合成から表示までの流れ ドコモメール／sp モードメールアプリ デコメ絵文字 pop 入りメール 合成エンジン デコメ絵文字 pop 本文 HTML コンテンツ Page 8/28 Copyright © 2011-2013 NTT DOCOMO, INC. All rights reserved. コンテンツ制作ガイドライン 2 デコメ絵文字popファイル 2.1 デコメ絵文字popファイルの概要 デコメ絵文字 pop ファイルはアニメーション用のアニメ素材データを含む GIF ファイルです。デコメ入力パレッ ト・データフォルダ上では GIF 画像として表示され、デコメ絵文字 pop 本文 HTML になった際は、文字枠、画 像枠を超えたアニメーション表示が可能となります。 アニメ素材データは素材画像（GIF/ PNG）や JavaScript ファイルで構成され、デコメ絵文字 pop オーサリン グツール（アニエモオーサリングツール）にて制作します。 デコメ絵文字 pop ファイル コンテナ GIF コンテナ GIF アニメ素材 データ アニメ素材 データ ※デコメ絵文字/ピクチャとしてのコンテンツのイメージと、合成後の動きのイメージが出来るだけ一致するよう、 デコメ絵文字 pop ファイルの作成に配慮願います。（デコメ絵文字では動くハートだったコンテンツが、合成す ると割れる表示となる場合、送信者のメッセージを正しく伝えられない可能性があるためです）。 2.2 デコメ絵文字popのファイルフォーマット デコメ絵文字 pop のフォーマットの説明を以下に記載します。 コンテナ GIF の表示に影響のない拡張ブロック（Application Extension Block）に、zip 圧縮後のアニメ素材 データを格納します。 コンテナ GIF の表示に影響のない拡張ブロック（Comment Extension Block）に、デコメ絵文字 pop 識別子、 連携デコメ絵文字 pop 識別子、コメントを格納します。 表 1デコメ絵文字 pop ファイルのファイルフォーマット Block 名 アニメ 素材デ ータ 省略不 可 Application Extension Block Extension Introducer Extension Label Block Size #1 Application Identifier Application Authentication Code Block Size #2（※1） バイト 数 1 Byte 1 Byte 1 Byte 8 Byte 3 Byte 1 Byte 内容 0x21 0xFF 0x0B 0x48 0x54 0x4D 0x4C 0x45 0x4D 0x4A 0x49 （HTMLEMJI） 0x31 0x2E 0x30 （1.0） Application Data の Page 9/28 Copyright © 2011-2013 NTT DOCOMO, INC. All rights reserved. コンテンツ制作ガイドライン デコメ 絵文字 pop 識 別子 連携デ コメ絵 文字 pop 識 別子 省略不 可 省略可 Comment Extension Block Comment Extension Block Application Data（※ 1） Block Terminator Extension Introducer Comment Label Block Size（※2） n Byte Comment Data（※ 2） n Byte Block Terminator Extension Introducer Comment Label Block Size（※2） 1 Byte 1 Byte Comment Data（※ 2） n Byte 1 Byte 1 Byte 1Byte 1 Byte 1Byte 1 Byte データサイズ （例：255 bytes の場 合は 0xFF） zip 圧縮後のアニメ素 材データ 0x00 0x21 0xFE Comment Data のデ ータサイズ （例：255 bytes の場 合は 0xFF） 0x43 0x72 0x65 0x61 0x74 0x6F 0x72 0x3D XXXXXX 0x0D 0x0A 0x4E 0x61 0x6D 0x65 0x3D YYYYY 0x0D 0x0A 0x45 0x6D 0x6F 0x6A 0x69 0x49 0x44 0x3D ZZZZZZ （Creator=XXXXX Name=YYYYY EmojiID= ZZZZZZ） （XXXXX は製作者、 会 社 名 を 指 す 。 YYYYY は絵 文字名 を指す。 ZZZZZZ は絵文字 ID を指す。） （※3） 0x00 0x21 0xFE Comment Data のデ ータサイズ （例：255 bytes の場 合は 0xFF） 0x6C 0x69 0x6E 0x6B 0x43 0x72 0x65 0x61 0x74 0x6F 0x72 0x3D XXXXXX 0x0D 0x0A 0x6C 0x69 0x6E 0x6B 0x4E 0x61 0x6D 0x65 0x3D YYYYY （linkCreator=XXXXX linkName=YYYYY） （XXXXX は連携する 製作者、会社名を指 す。YYYYY は連携す Page 10/28 Copyright © 2011-2013 NTT DOCOMO, INC. All rights reserved. コンテンツ制作ガイドライン コメント 省略可 Comment Extension Block Block Terminator Extension Introducer Comment Label Block Size（※2） 1 Byte 1 Byte る絵文字名を指す。 複数指定する場合 は 、 改 行 （ 0x0D 0x0A ） に 続 け て 繰 り 返す） （※3） 0x00 0x21 0xFE Comment Data のデ ータサイズ （例：255 bytes の場 合は 0xFF） n Byte 0x44 0x65 0x73 Comment Data（※ 0x63 0x3D XXXXX 2） （Desc=XXXXX） （XXXXX はコメントの 内容を指す） （※4） Block Terminator 1 Byte 0x00 ※1・・・Block Size #2 と Application Data はアニメ素材データサイズに合わせて繰り返される。 ※2・・・Block Size と Comment Data は Comment Data に格納されるデータにあわせて繰り返される。 ※3・・・XXXXX と YYYYY に指定できる文字は半角英数字、ハイフン「-」、ドット「.」、アンダーバー「_」とす る。デコメ絵文字 pop 識別子ブロックの制作者名、絵文字 ID が設定されていない場合は通常の GIF とし て合成される。 ※4・・・XXXXX には日本語を指定可能とすること。文字コードは UTF-8 とする。 2.3 1Byte 1 Byte デコメ絵文字popファイルの作成 あらかじめコンテナ GIF を作成し、デコメ絵文字 pop オーサリングツール（アニエモオーサリングツール）を使 用して作成したアニメ素材データをコンテナ GIF に格納することでデコメ絵文字 pop ファイルとなります。 オーサリングツールはネオス株式会社の以下サイトよりダウンロード願います。 http://www.neoscorp.jp/tools/ オーサリングツールの使用方法はオーサリングツール付属のヘルプファイルを参照してください。 オーサリングツールについてのお問い合わせは、ネオス株式会社の以下メーリングリスト宛にご連絡ください。 [email protected] Page 11/28 Copyright © 2011-2013 NTT DOCOMO, INC. All rights reserved. コンテンツ制作ガイドライン 3 コンテナGIFファイルの作成 コンテナ GIF はデコメ入力パレット上や非対応機種での表示部分となる GIF ファイルです。 コンテナ GIF ファイルの作成方法について以下に記載します。 3.1 データフォーマット コンテナ GIF ファイルの Version は GIF89a である必要があります。 3.2 画像縦横サイズ 縦 20dot × 横 20dot の場合、デコメ絵文字 pop ファイルとして扱われます。 縦 20dot × 横 20dot 以外の場合、デコメピクチャ pop ファイルとして扱われます。 横サイズを大きくすると、端末の画面幅やメールアプリの文字サイズ設定によっては、デコメピクチャ pop が 画面に収まらず、切れて表示される場合があります。どのような画面幅や文字サイズ設定でもデコメピクチャ pop が画面に収まるようにするには、横サイズ 240dot を目安としてください。 3.3 データサイズ コンテナ GIF 単体としては特に上限の規定はございませんが、オーサリングツールのパブリッシュ機能により アニメ素材データが格納された後のコンテナ GIF としてはメールアプリにて挿入可能なサイズに依存します。 メールアプリのデータサイズについては、以下の表を参照ください。 但し、現行 i モードでは、インライン画像として表現できるファイルの上限値が 90Kbytes と設定されています。 i モード携帯電話との疎通性を加味し、コンテンツ１つあたりのサイズは 90Kbytes 以下にしていただくことを 推奨しております。 表 1．ドコモメール／sp モードメールアプリ送信サイズ 項目 メール全体 本文 インライン添付ファイル (HTML メールサポート時) 通常添付ファイル サイズ 最大 10MB 最大 500KB(インライン画像除く) 個数：20 種類 サイズ： 2MB まで 個数：制限無し サイズ：メール全体サイズ依存 Page 12/28 Copyright © 2011-2013 NTT DOCOMO, INC. All rights reserved. コンテンツ制作ガイドライン 表 2．ドコモメール／sp モードメールアプリ受信サイズ 項目 メール全体 本文 インライン添付ファイル (HTML メールサポート時) 通常添付ファイル ※ ※ サイズ 最大 10MB 最大 500KB(インライン画像除く) 個数：制限無し(ただし、表示は 20 種類まで) サイズ：メール全体サイズ依存(ただし、メモリ不足により 表示できない場合がございます。) 個数：制限無し サイズ：メール全体サイズ依存 メール本文編集完了時に、text/html 部が 100Kbytes を超えた場合は、サイズ制限のため送信 先ではデコメ絵文字 pop メールとして再生されません。この場合、デコメ絵文字 / デコメピクチャ として表示されます。 １メールに挿入できるデコメ絵文字 pop は最大 20 個です。同じデコメ絵文字 pop が複数挿入 された場合は、その個数分カウントされます。20 個を超えた場合もメールの送受信は可能です が、デコメ絵文字 pop メールとして再生されず、デコメ絵文字 / デコメピクチャとして表示されま す。 Page 13/28 Copyright © 2011-2013 NTT DOCOMO, INC. All rights reserved. コンテンツ制作ガイドライン 4 アニメ素材データの作成 アニメ素材データの作成方法について以下に記載します。 なお、アニメ素材データの作成には、デコメ絵文字 pop オーサリングツール（アニエモオーサリングツール）を 使用してください。 オーサリングツールの使用方法はオーサリングツール付属のヘルプファイルを参照してください。 アニメ素材データは、オーサリングツールのパブリッシュ機能により圧縮されてコンテナ GIF へ格納されます。 4.1 概要 アニメ素材データは、画像ファイル（エレメント画像）と JavaScript から構成されます。 エレメント画像のアニメーションを JavaScript を用いて記述します。 4.1.1 JavaScriptによるアニメーション デコメ絵文字 pop では JavaScript によるアニメーションを実現するために、タイムラインとフレームの概念を 取り入れています。 オーサリングツールのタイムライン上で各フレーム（またはフレームグループ）に画像を操作する JavaScript を記述することで、時間経過に沿ったアニメーションを作成することができます。 タイムラインは最大で 10 本まで作成することができます。 利用可能な JavaScript については別章を参照してください。 各デコメ絵文字 pop は合成後、アニエモライブラリに実装されたメインループによりフレーム処理毎の処理が 呼び出されることでアニメーション再生されます。 4.1.1.1 フレームレート 各フレームは 20fps で再生されます。 4.1.1.2 フレームグループ 連続する複数のフレームを１つのグループにまとめたものをフレームグループと呼びます。連続する複数のフ レームで実行したい JavaScript が同じであるような場合、連続する複数のフレームを１つのグループとして纏 め、１つの JavaScript で複数フレームの処理を記述することができます。 フレームグループは全てのタイムラインを通して 100 グループまで作成でき、それぞれのフレームグループに は 100000 文字まで JavaScript を記述することができます。 4.1.1.3 フレーム処理 フレーム処理については 5.1.3 章を参照してください。 4.1.2 利用可能なエレメント画像 以下のファイルがエレメント画像として利用可能です。 ・GIF ・PNG エレメント画像ファイルにはファイルサイズが 90KB 未満のデータが利用可能です。 Page 14/28 Copyright © 2011-2013 NTT DOCOMO, INC. All rights reserved. コンテンツ制作ガイドライン 4.1.3 データサイズ 特に上限の規定はございませんが、オーサリングツールのパブリッシュ機能によりアニメ素材データが格納さ れた後のコンテナ GIF としてはメールアプリにて挿入可能なサイズに依存します。 ※3.3 参照 4.2 絵文字のプロパティ情報 4.2.1 制作者名・絵文字名の命名規則 デコメ絵文字 pop を一意に特定するため、アニエモライブラリでは制作者名+絵文字名を絵文字 ID として扱 います。絵文字 ID は JavaScript 内の変数として利用されるため、異なる絵文字で絵文字名が重複すると予 期しない動作となる場合があります。 他の制作者との重複を避けるため、以下のネーミングルールに従うようにしてください。 ・制作者名はドメイン名を逆順にし、ドットはアンダーバーに変換した文字列とする。 ・小文字のみ利用する。 ・最初の文字は英字もしくはアンダーバーのみ ・２文字目以降は英数字もしくはアンダーバーのみ 制作者名の例） jp_ neoscorp 絵文字名の例） heart ※上記の例の絵文字では、絵文字 ID は以下となります。 jp_ neoscorp _heart 4.2.2 連携絵文字名 オーサリングツール上で、デコメ絵文字 pop が連携動作を行う対象のデコメ絵文字 pop の「制作者名」と「絵 文字名」を設定することができます。 連携絵文字名を設定をすると、対応メールアプリケーション上で連携する絵文字の候補が表示されます。 連携絵文字名の設定が省略された場合においても、連携動作には影響ありません。 4.2.3 コメント オーサリングツール上で、デコメ絵文字 pop のコメントを設定することができます。 コメントを設定すると、対応メールアプリケーション上でユーザにコメントが表示されます。 最大サイズは 60 文字です。 コメントの設定の有無は、アニメーション動作には影響ありません。 4.2.4 テキスト連携 オーサリングツール上で、デコメ絵文字 pop が連携動作を行う対象のテキストを設定することができます。 テキスト連携を行うデコメ絵文字 pop を作成する際は必ず設定が必要です。メール本文中に設定するテキス トが存在する場合に、テキストの座標を連携 ID で参照することが可能になります。 詳細は 5.1.6 章を参照してください。 Page 15/28 Copyright © 2011-2013 NTT DOCOMO, INC. All rights reserved. コンテンツ制作ガイドライン 4.3 アニメ素材データの構成 オーサリングツールによって作成されるアニメ素材データは、デコメ絵文字 pop ファイルのパブリッシュ時に１ つのフォルダ（絵文字フォルダ）に出力され、ZIP 圧縮された絵文字フォルダのデータがコンテナ GIF に格納 されます。 アニメ素材データは以下のファイルから構成されます。 image1.xxx ・ ・ imageN.xxx ・・・ アニメーション用エレメント画像ファイル(GIF, PNG) ・・・ アニメーション用エレメント画像ファイル(GIF, PNG) frame0.js frameN.js frameM-L.js ・・・ ・・・ ・・・ アニメーション用の JavaScript（0 フレーム目） アニメーション用の JavaScript（N フレーム目） アニメーション用の JavaScript（M～L フレーム目） numframe.txt alignment.txt ・・・ ・・・ フレーム数設定ファイル 連携文字列設定ファイル 4.4 デコメ絵文字pop本文HTMLのファイル構成 合成後に展開されるデコメ絵文字 pop 本文 HTML は以下のファイル構成となります。 index.html index.js jp_co_xxxx_emoji1 jp_co_xxxx_emoji2 ・ ・ jp_co_xxxx_emojiN ・・・ ・・・ ・・・ 合成結果の HTML ファイル アニメーション用の JavaScript 合成結果に含まれるデコメ絵文字 pop の画像格納フォルダ 各画像格納フォルダには以下のファイルが含まれます。 main.gif ・・・ デフォルト画像（コンテナ GIF） image1 ・・・ アニメーション用エレメント画像(GIF, PNG) image2 ・・・ アニメーション用エレメント画像(GIF, PNG) ・ ・ ・ imageN ・・・ アニメーション用エレメント画像(GIF, PNG) 4.5 アニメ素材データ作成時の注意点 4.5.1 エレメント画像 １つのデコメ絵文字 pop に含むことができるエレメント画像の数に上限はありませんが、メール中に含まれる 全デコメ絵文字 pop のエレメント画像の総数が一定数（300 ファイル）を超えると再生がされません。 また、多数のエレメント画像を利用すると再生時のパフォーマンスに影響するため、エレメント画像の数はむ やみに増やさないよう作成ください。 Page 16/28 Copyright © 2011-2013 NTT DOCOMO, INC. All rights reserved. コンテンツ制作ガイドライン １つのメール中に挿入可能なデコメ絵文字 pop は 20 個であるため、エレメント画像は 15 ファイル以下を目 安とすることを推奨します。１つのデコメ絵文字 pop に含むことができるエレメント画像数の上限は、オーサリ ングツール上は 100 ファイルに制限しています。 エレメント画像のアニメーション GIF は正しくアニメーションされない場合があります。 また、PNG 画像を使用する場合、8bitα情報付き 24bit カラーかつ 8192 画素以上の PNG 画像は Android2.2 端末において正常に表示できないことがあるため、①256 色に減色する ②画素数を 8192 未満 に抑える いずれかの条件を満たした PNG 画像を使用してください。 4.5.2 実機検証 オーサリングからプレビューは PC ブラウザで行われますが、必ず実機での動作検証を行なってください。 特に、実機上でのパフォーマンスに配慮してコンテンツを制作してください。 また、非推奨の API を利用した場合、実機では動作しない可能性があります。 Page 17/28 Copyright © 2011-2013 NTT DOCOMO, INC. All rights reserved. コンテンツ制作ガイドライン 5 JavaScript デコメ絵文字 pop で記述可能な JavaScript について以下に記載します。 アニエモライブラリで定義された API を利用してアニメーションを記述してください。 5.1.1 selfパラメータ self オブジェクトより当該絵文字のパラメータの取得が可能です。 変数名 self.x self.y self.w self.h self.viewWidth self.viewHeight self.directory self.myId self.main self.alignment 5.1.2 説明 当該絵文字のx座標（スクリーン座標） 当該絵文字のy座標（スクリーン座標） 当該絵文字の幅 当該絵文字の高さ 表示領域の幅 表示領域の高さ 当該絵文字のディレクトリ名（絵文字ID） 当該絵文字のid（絵文字ID+1,2,3...） 当該絵文字のデフォルト画像（コンテナGIF）のDOMオブジェクト 文字列連携のオブジェクト（後述） emojiパラメータ emoji オブジェクトよりメール中のデコメ絵文字 pop のパラメータの取得が可能です。 変数名 emoji ['id'] emoji['id'].x emoji['id'].y emoji['id'].frame emoji['id'].type 5.1.3 説明 idで指定した絵文字のオブジェクト idで指定した絵文字のx座標（スクリーン座標） idで指定した絵文字のy座標（スクリーン座標） idで指定した絵文字の現在のフレーム idで指定した絵文字の絵文字名 フレーム処理 フレームは、frame0 -> frame1 -> frameN -> frameLAST まで実行され、その後 frame1 から再開されます 再開時にはガベージコレクションにより、loadImage 関数で作成されたオブジェクトが全て削除されます フレーム処理中に、frames[1]();と別フレームの関数を呼び出す事が出来ます 以下のパラメータの取得が可能です。 変数名 frame length frames 説明 現在のフレーム 当該絵文字のフレーム数 フレーム関数のオブジェクト 以下の関数の使用ができます。 関数名 function jumpTo( f ) 説明 指定したフレームfにジャンプします。 Page 18/28 Copyright © 2011-2013 NTT DOCOMO, INC. All rights reserved. コンテンツ制作ガイドライン function pause( t ) function stop( ) 指定した時間tの間、絵文字のアニメーションを停止します 絵文字を停止します。再開できません。 jumpTo、pause、stop のフレーム処理関数は、関数の実行後その後のフレーム処理を実行しません。 これらのフレーム処理関数は例外を throw することでフレームの実行を抜け出しています。 そのため、try～catch セグメントの中でこの関数を呼び出すと、予期しない例外が catch される、フレーム処 理関数実行後の処理が継続するなどします。 絵文字のフレーム処理内で try～catch セグメントを使用する際には、発生した例外を監視し、予期した例外 以外の例外は throw するようにしてください。 try { ...処理 } catch(e) { if(e instanceof Error) { ...エラー } else { throw e; // 上位に例外を throw する } } 5.1.4 画像操作 画像操作のために、以下の関数が使用できます。 関数名 function loadImage( fileName ) 説明 画像をロードして画面に表示します。 例： var image = loadImage('hana.png'); ※ディレクトリ名の指定は不要で、自分の絵文字内にある ファイルがロードされます。 function removeImage( image ) function getPosition( image ) function setPosition ( image, x, y ) function getOrigin(image) function setOrigin(image, x, y) function getRotation( image ) function setRotation( image, r ) 画像を削除します。 画像のローカル座標を取得します。 例： var pos = getPosition(image); pos.x // x座標 pos.y // y座標 画像のローカル座標を設定します。 変形時の参照点を取得します。 例： var x = getOrigin(image).x var y = getOrigin(image).y 変形時の参照点を設定します。 例： setOrigin(image, 0.45, 1.0) 画像の角度を度数で取得します。 この関数は、setMatrixと同時に使用できません。 画像の角度rを度数で設定します。 この関数は、setMatrixと同時に使用できません。 Page 19/28 Copyright © 2011-2013 NTT DOCOMO, INC. All rights reserved. コンテンツ制作ガイドライン function getSkew(image) function setSkew(image, x, y) function getMatrix(image) function setMatrix(image, matrix) 画像の傾斜角度を度数で取得します。 この関数は、setMatrixと同時に使用できません。 例： getSkew(image).x getSkew(image).y 画像の傾斜角度を度数で設定します。 例： setSkew(image, 20, 20) 画像の表示に使用する変換行列を取得します。 この関数は、以下の関数による変形と同時に使用できま せん。 getScale, getRotation, getSkew setScale, setRotation, setSkew 例： var m = getMatrix(image) 画像の表示に使用する変換行列を設定します。 行列は6個の数値の配列として設定します。 1: 水平方向の縮尺 2: 垂直方向の傾斜率 3: 平方向の傾斜率 4: 垂直方向の縮尺 5: 水平方向の移動距離 6: 垂直方向の移動距離 この関数は、以下の関数による変形と同時に使用できま せん。 getScale, getRotation, getSkew setScale, setRotation, setSkew 例： ■基準（変形なし） setMatrix(image,[1.0, 0.0, 0.0, 1.0, 0.0, 0.0]) function getAlpha( image ) function setAlpha( image, alpha) function getScale( image ) function setScale( image, s ) function setScaleXY( image, xs, ys ) function getVisible( image ) function setVisible( image, visible ) ■左右反転 setMatrix(image,[-1.0, 0.0, 0.0, 1.0, 0.0, 0.0]) 画像の透明度（0.0～1.0）を取得します。 ※0.0で完全に透過。1.0で不透明。 画像の透明度alpha（0.0～1.0）を設定します。 ※0.0で完全に透過。1.0で不透明。 画像のスケールを取得します。 1.0がオリジナルの大きさです。 例： var scale = getScale(image); var w = scale.x; // 横のスケール var h = scale.y; // 縦のスケール 画像のスケールsを設定します。 1.0がオリジナルの大きさです。 画像の縦スケールxs,横スケールysを設定します。 画像の表示・非表示を取得します。 true: 表示 false: 非表示 画像の表示・非表示を設定します。 true: 表示 false: 非表示 Page 20/28 Copyright © 2011-2013 NTT DOCOMO, INC. All rights reserved. コンテンツ制作ガイドライン 画像の表示階層を取得します。 画像の表示階層を設定します body内のテキストが１で、デフォルトは１（同階層）となりま す。負の値も指定する事が出来ます。 function getZIndex( image ) function setZIndex( image, zIndex) function localToScreen( x, y) function screenToLocal( x, y) function transition.moveTo(image, frame, toX, toY, easing) function transition.rotateTo(image, frame, centerX, centerY, angle, depend, easing) function transition.scaleTo(image, frame, toX, toY, easing) function transition.alphaTo(image, frame, toAlpha, easing) function transition.cancel( tween ) function createMask( fileName ) function setMask( image, mask ) Image.addEventListener( type, listener, useCapture ) Image.removeEventListener( listener, useCapture ) 5.1.4.1 type, 例： setZIndex(image,2) ローカル座標をスクリーン座標に変換します。 スクリーン座標をローカル座標に変換します。 トゥイーン関数についてを参照 トゥイーン関数についてを参照 トゥイーン関数についてを参照 トゥイーン関数についてを参照 トゥイーン関数についてを参照 マスク関数についてを参照 マスク関数についてを参照 画像に対してタッチイベントのイベントリスナーを登録しま す。 typeは “touchstart“のみが有効です。 ※“touchstart“を登録すると、内部的に“mousedown“も登 録されます。 1つの画像に対しては同時に１つのリスナーしか登録しな いようにしてください。 画像に設定されたイベントリスナーを削除します。 typeは “touchstart“のみが有効です。 ※“touchstart“を指定すると、内部的に“mousedown“も削 除されます。 スクリーン座標とローカル座標 絵文字メール中にはスクリーン座標とローカル座標が存在します。 絵文字の画像操作関数では、画像の表示位置を絵文字のローカル座標で扱います。 文字列連携や絵文字連携で使用する位置はスクリーン座標になります。 また、ローカル座標と画像操作関数で操作する画像の参照点は、中央になります。 つまり、ローカル座標（0,0）は、スクリーン上の、絵文字の表示位置の中央です。 また、画像の表示位置を（0,0）に設定すると、画像の中央が、絵文字の表示位置の中央にきます。 四つの画像に対し、 setPosition(image1,100,100) setPosition(image2,-100,100) setPosition(image3,100,-100) setPosition(image4,-100,-100) とすると、絵文字の表示位置のサイズ、画像のサイズによらず、絵文字の表示位置の中央の周りに四つの画 像がきます。 スクリーン座標で取得される座標： self.x ... 絵文字の表示 X 座標 self.y ... 絵文字の表示 Y 座標 Page 21/28 Copyright © 2011-2013 NTT DOCOMO, INC. All rights reserved. コンテンツ制作ガイドライン emoji[id].x ... 絵文字連携で使用する絵文字の表示 X 座標 emoji[id].y ... 絵文字連携で使用する絵文字の表示 Y 座標 self.alignment.align1[N].x ... 文字列連携で使用する文字列の表示 X 座標 self.alignment.align1[N].y ... 文字列連携で使用する文字列の表示 Y 座標 ローカル座標で取得される座標： getPosition(image).x ... 絵文字の表示 X 座標 getPosition(image).y ... 絵文字の表示 Y 座標 なお、ドコモメール／sp モードメールでは表示領域にマージンを設けており、スクリーン座標はマージンを含 んだ値となります。マージン値は画面解像度や文字サイズにより異なりますので、コンテンツを作成する際は この点を考慮いただけますようお願いいたします。 5.1.4.2 画像関連プロパティ 以下のプロパティは、フレーム関数の実行後、値が反映されます。 Image.id Image.title Image.lang Image.dir Image.className Image.style Image.lowSrc Image.name Image.align Image.alt Image.border Image.height Image.hspace Image.src Image.vspace Image.width 5.1.4.3 トゥイーン関数について トゥイーン関数で使用する画像は、loadImage で作成した画像である必要があります。 トゥイーン関数で使用する座標系は全て絵文字のローカル座標です。 5.1.4.3.1 moveTo ・transition.moveTo(image, frame, toX, toY, easing) image で指定した画像を、frame で指定したフレーム数かけて、toX、toY に移動します 移動の際のイージング関数を easing で指定します 例： 20 フレームかけて画像を現在位置から(100,100)に移動させる var e = loadImage("allow.gif"); transition.moveTo(e, 20, 100, 100, transition.linear); 5.1.4.3.2 rotateTo ・transition.rotateTo(image, frame, centerX, centerY, angle, depend, easing) Page 22/28 Copyright © 2011-2013 NTT DOCOMO, INC. All rights reserved. コンテンツ制作ガイドライン image で指定した画像を、frame で指定したフレーム数かけて、centerX, centerY を中心に、angle 度回転さ せます 回転の方法は時計回りです 回転の際のイージング関数を easing で指定します depend が true の場合、画像そのものは回転しません。 例： var e = loadImage("allow.gif"); transition.rotateTo(e, 20, 100, 100, 360, false, transition.linear); 注意点： 回転後の画像座標計算は小数点以下を切捨てるため誤差が生じることがあります。 繰り返し rotateTo を使用する場合、都度 setPosition で正しい座標位置を設定する等で回避してください。 5.1.4.3.3 scaleTo ・transition.scaleTo(image, frame, toX, toY, easing) image で指定した画像を、frame で指定したフレーム数かけて、toX, toY で指定した倍率まで拡大・縮小しま す 拡大・縮小の際のイージング関数を easing で指定します 例： var e = loadImage("allow.gif"); transition.scaleTo(e, 20, 2.0, 2.0, transition.linear); 5.1.4.3.4 alphaTo ・transition.alphaTo(image, frame, toAlpha, easing) image で指定した画像の透過率を、frame で指定したフレーム数かけて、toAlpha で指定した透過率まで変 化させます 変化の際のイージング関数を easing で指定します 例： var e = loadImage("allow.gif"); transition.alphaTo(e, 20, 0.0, transition.linear); 5.1.4.3.5 イージング関数 トゥイーンで使用できるイージング関数には、以下の物があります transition.linear transition.bounceEaseOut transition.bounceEaseIn transition.bounceEaseInOut transition.regularEaseIn transition.regularEaseOut transition.regularEaseInOut transition.strongEaseIn transition.strongEaseOut transition.strongEaseInOut Page 23/28 Copyright © 2011-2013 NTT DOCOMO, INC. All rights reserved. コンテンツ制作ガイドライン ※ Linear: 等速のアニメーションになります。 easeIn: Tween の頭にイージング効果がつきます。 easeOut: Tween の後ろにイージング効果がつきます。 easeInOut: Tween の頭と後ろ両方にイージング効果がつきます。 regular: 通常のイージングです。 strong: regular より加減速が強くなります。 bounce: 開始点・終了点を超えてバウンドします。 5.1.4.3.6 トゥイーンのキャンセル 実行中のトゥイーンをキャンセルするには、transition.cancel を呼び出します ・transition.cancel(tween) 実行中のトゥイーンをキャンセルします。 引数はトゥイーンの作成関数の戻り値です。 例： トゥイーンを開始するフレーム var e = loadImage("allow.gif"); var t = transition.moveTo(e, 20, 100, 100, transition.linear); self.myTransition = t; トゥイーンをキャンセルするフレーム var t = self.myTransition; transition.cancel(t); 5.1.4.4 マスク関数について マスク関数を利用して、画像に対してマスクを設定することができます。 マスク画像はアルファチャネルを含んだ PNG ファイルを指定します。透明部分は表示されず、不透明部分だ けに画像が表示されます。 マスクを設定する画像も PNG ファイルである必要があります。 また、マスクを設定した画像を、拡大縮小すると正しくマスクされない場合があるため、 マスクを設定した画像は拡大縮小しないようにしてください。 Page 24/28 Copyright © 2011-2013 NTT DOCOMO, INC. All rights reserved. コンテンツ制作ガイドライン 例：マスクの設定 var img = loadImage("red.png"); var mask = createMask(“circle.png”); // 画像をロードしてマスクを作成 setMask( img, mask ); // 画像にマスクを設定 red.png（60x60） circle.png（20x20） 結果： 設定したマスクを削除するには、マスクを null に指定して setMask を呼び出します。 例： setMask(image,null); createMask で作成したマスクには、以下のプロパティを指定することができます。 プロパティは setMask を呼び出す前に設定しておく必要があります。 createMask で作成したマスクは、複数の画像で使い回すことができます。 また、マスクのプロパティを設定した後、もう一度 setMask することで、マスクの位置やリピートを変更すること ができます。 5.1.4.4.1 box マスクを画像に対して拡大して適合させます。 例： mask.box = true; 結果： Page 25/28 Copyright © 2011-2013 NTT DOCOMO, INC. All rights reserved. コンテンツ制作ガイドライン 5.1.4.4.2 positionX マスク画像の X 位置をピクセル数で指定します。 repeatX が設定されている場合は無効になります。 例： mask.positionX = 10; 結果： 5.1.4.4.3 positionY マスク画像の Y 位置をピクセル数で指定します。 repeatY が設定されている場合は無効になります。 例： mask.positionY = 10; 結果： 5.1.4.5 DOM関数の利用について DOM 操作は推奨されません。画像操作関数を使用するようにしてください。 ※DOM 操作を利用した場合の動作は保証されません。 5.1.4.6 ガベージコレクション frame1 以降のフレームで loadImage されたエレメントはフレームがループする際に自動的に削除されます。 削除されないエレメントが必要な場合は、frame0 で作成してください。 ガベージコレクションは 1 フレーム目の処理の開始時に実行されるため、 jumpTo 関数で 1 フレーム目に戻った場合もガベージコレクションが実行されます。 5.1.5 _META変数 絵文字メールの情報にアクセスするために、_META 変数が利用できます。 _META 変数の内容は変更しないでください。 変数名 _META.numEmoji _META.fontSize _META.emojiDir _META.emojiId _META.imgFile _META.imgFile[filename].width _META.imgFile[filename].height 説明 メール中のデコメ絵文字popの数 メールのフォント表示サイズ デコメ絵文字popのリソースが入っているディレクトリ名の配列 メール中にあるデコメ絵文字pop絵文字IDの配列 メール中にあるデコメ絵文字popの画像リソースの一覧 filenameの画像の幅 filenameの画像の高さ Page 26/28 Copyright © 2011-2013 NTT DOCOMO, INC. All rights reserved. コンテンツ制作ガイドライン _META.imgFile[filename].orgWidth _META.imgFile[filename].orgHeight _META.imgFile[filename].ext _META.emoji _META.current _META.garbage[emojiId] 5.1.6 filenameの画像の元々の（ストレッチされる前のファイルオリジナル） 幅 filenameの画像の元々の（ストレッチされる前のファイルオリジナル） 高さ filenameの画像の拡張子 JavaScriptで使用できるemoji変数の実体 self.myIdと同じID ガベージコレクション用の配列 文字列連携 オーサリングツール上で連携したい文字列と参照用の連携 ID を指定することができます。 指定された文字列はタグで括られ、JavaScript から参照が可能になります。 self.alignment に連携 ID のプロパティがオブジェクトの配列として使用できます オブジェクトから取得できるプロパティは、 object.x ... 連携文字列部分の X 座標 object.y ... 連携文字列部分の Y 座標 object.width ... 連携文字列部分の幅 object.height ... 連携文字列部分の高さ object.text ... 連携文字列 つまり、メール本文中にある align1 という連携 ID を持つ連携文字列の最初のもののプロパティは、 self.alignment.align1[0].x self.alignment.align1[0].y self.alignment.align1[0].width self.alignment.align1[0].height self.alignment.align1[0].text から取得できます 5.1.7 5.1.7.1 制限 アクセス不可オブジェクト 以下のオブジェクトにはアクセスをしないでください。 ・window ・navigator ・location 5.1.7.2 取得不可プロパティ 以下のプロパティは、値の取得は出来ません。 *.parentNode *.childNodes *.firstChild *.lastChild *.previousSibling *.nextSibling *.attributes *.ownerDocument Page 27/28 Copyright © 2011-2013 NTT DOCOMO, INC. All rights reserved. コンテンツ制作ガイドライン document.domain document.URL document.images document.applets document.links document.forms document.anchor document.cookie UIEvent.view 5.1.7.3 非推奨 this の使用は推奨されません。 prototype の使用は推奨されません。 ローカル変数の使用は推奨されません。 Page 28/28