NewSpeechBalloon - ぺったんR Wiki - ぺったんR

フキダシ新案

テンプレート

フキダシテンプレート SpeechBalloonTemplateModel

カラム

name	和名	type	default	null	limit	note
name	フキダシ管理名	string		FALSE	50	フキダシを区別するための名前
classname	フキダシクラス名	string		FALSE	50	jsのクラス名
caption	表示名	string		FALSE	30
t	表示順	integer	0	false		フキダシエクスプローラーなどでのソート
settings	テンプレートjson	string		FALSE		設定データ
created_at		datetime
updated_at		datetime

相違点

• name
• classname
  • 追加
• default_width
  • 削除。settings内に移動したため。
• default_height
  • 削除。settings内に移動したため。
• settings
  • 追加。

解説

これまでjsonで記述されたテンプレートデータは展開されてdbに保存していた。しかし、今後は展開せず文字列としてsettingsカラムに保存する。

参考speech_balloon_templates.json

クライアントは、エディタでフキダシが貼られたときclassnameのクラスのインスタンスを生成する。たとえばclassnameの値が'Square'のフキダシだったとき、Squareクラス(フキダシを実装したクラス)を生成する。このとき初期化データとしてsettingsを渡す。Squareクラスはsettingsをjson文字列としてパースしてフキダシに必要な情報を取得する。settingsには、default_widthやdefault_heightなどが入っている。これらのプロパティはjsのフキダシクラスとテンプレート間で合意があればどんな形式でもよい。「このクラスにはdefault_widthとdefault_heightが必要です」と決めてあればフキダシの初期サイズが設定できる。

フキダシ枠テンプレートとセリフテンプレートに相当するデータもsettingsから取得する。クライアントは、これらのプロパティからベクターフキダシの編集パネルを稼働させ、投稿ボタンが押された際には、(ベクターがない環境のために)最も相応しい画像フキダシを(これまたsettingsから得たプロパティから)算出してフキダシデータを作成する。

書式

基本形はこんな感じ。

 "name": {
   "classname": ''
   "caption": "",
   "settings": {
       "speech_balloon": {
         フキダシのプロパティ
       },
     "name": {
       "balloon": {
         "system_picture_id":{
             "text":"BASE64ENCODEDATA"
         }
       },
       "speech": {
       }
     }
   }
 }

nameをキーに追加更新。クラス名と表示名はdbにも保存したいので必須項目としておく。フキダシテンプレートはたくさんのメーカーが作成するので、nameが被ると管理不能になってしまう。そこで、ドメインを末尾に付ける慣習を。

フキダシ枠に対応するフキダシ画像がどれなのかを記述する方法に難がある。

• フキダシ画像はシステム画像で保存される。
• よってフキダシ画像はsystem_picture_idで指定しなければならない。
• しかし、システム画像はサーバによってidがバラバラ。
• このままだとシステム画像の中からidを拾ってテンプレートを書き換えるハメに。
• 座長にそんな作業をさせるなんて有り得ない。
• テンプレートでは、フキダシ画像をBase64でエンコしたテキストで記述しましょう。
• しかし、ある程度はフォーマットが決まってないと困るね。

という流れになったので、さすがに「どんな形式でもよい」とはいかなくなった。フキダシ枠とセリフのセットは、settingsの下に連想配列で突っ込み、フキダシ枠はballoonで、セリフはspeechで定義することになった。

• このフォーマットさえ満たしていれば、あとは「どんな形式でもよい」

ちなみにサーバは、このテンプレートをインポートするときは、次の処理を行う。

• いったんテンプレートをjsonパース
• 全テンプレートをループ処理
• nameをキーに既存のフキダシテンプレートを探して、あれば更新、なければ作成
• system_pictureをエンコ
• jsonをテキストに戻す
• dbにフキダシテンプレート作成
  • クラス名とフキダシ名称とsettings(テキストに戻したjson)

フキダシ枠テンプレート BalloonTemplateModel

消滅

セリフテンプレート SpeechTemplateModel

消滅

テンプレートサンプル

HowToMakeSpeechBalloon 通りの考え方だよ。

• Square
  • 簡単な例の通り。
  • セリフのdiv位置サイズを比率で指定。
  • デフォルトサイズを拡張している。
• SquareWithSize
  • サイズのバリエーション追加
  • 基本構造はSquareと同じ
  • サイズを三種類用意
    • 便宜的に名前を"small""middle""large"とつけた
    • それぞれにフキダシ画像があって、サイズを0・1・2で管理
    • エディタは、そのsizeをjsonテキストにしてフキダシデータに追加する
  • サイズを切り替える式のため、オフセットとステップを用意
    • 拡張方法を変えれば、MinMax式のフレキシブルな管理もできる
• Circle
  • 尻尾の向き拡張
  • サイズのバリエーション拡張はなし
  • 尻尾の向きを四種類用意
    • 右上・右下・左下・左上をtail0・1・2・3で管理
    • エディタはrを拡張データとしてjsonテキスト保存
• 円改
  • 円にサイズを拡張した
  • 全部書くと長いから省略したよ
    • エディタはｒとtailを拡張データ保存する

 speech_balloon_templates : {
   "square": {
     "classname": 'Square'
     "caption": "長方形",
     "default_width": 170,
     "default_height": 100,
     templates: {
       "all": {
         "balloon": {
           system_picture: "BASE64ENCODEDATA"
         },
         "speech": {
           "x_rate": 10,
           "y_rate": 10,
           "width_rate": 10,
           "height_rate": 10
         }
       }
     },
   },
   "square_with_size": {
     "classname": 'SquareWithSize'
     "caption": "長方形改",
     "default_width": 300,
     "default_height": 100,
     "size_count": 3,
     "width_offset": 0,
     "height_offset": 0,
     "width_step": 200,
     "height_step": 100,
     templates: {
       "small": {
         "size": 0,
         "balloon": {
           system_picture: "BASE64ENCODEDATA"
         },
         "speech": {
           "x_rate": 10,
           "y_rate": 10,
           "width_rate": 10,
           "height_rate": 10
         }
       },
       "middle": {
         "size": 1,
         "balloon": {
           system_picture: "BASE64ENCODEDATA"
         },
         "speech": {
           "x_rate": 10,
           "y_rate": 10,
           "width_rate": 10,
           "height_rate": 10
         }
       },
       "large": {
         "size": 2,
         "balloon": {
           system_picture: "BASE64ENCODEDATA"
         },
         "speech": {
           "x_rate": 10,
           "y_rate": 10,
           "width_rate": 10,
           "height_rate": 10
         }
       }
     },
   },
   "circle": {
     "classname": 'Circle'
     "caption": "円",
     "default_width": 300,
     "default_height": 100,
     "r_offset": 45,
     "r_step": 90,
     "tail_count": 4,
     templates: {
       "rightup": {
         "tail": 0,
         "balloon": {
           system_picture: "BASE64ENCODEDATA"
         },
         "speech": {
           "x_rate": 20,
           "y_rate": 30,
           "width_rate": 50,
           "height_rate": 50
         }
       },
       "rightdown": {
         "tail": 1,
         "balloon": {
           system_picture: "BASE64ENCODEDATA"
         },
         "speech": {
           "x_rate": 20,
           "y_rate": 30,
           "width_rate": 50,
           "height_rate": 50
         }
       },
       "leftdown": {
         "tail": 2,
         "balloon": {
           system_picture: "BASE64ENCODEDATA"
         },
         "speech": {
           "x_rate": 20,
           "y_rate": 30,
           "width_rate": 50,
           "height_rate": 50
         }
       },
       "leftup": {
         "tail": 3,
         "balloon": {
           system_picture: "BASE64ENCODEDATA"
         },
         "speech": {
           "x_rate": 20,
           "y_rate": 30,
           "width_rate": 50,
           "height_rate": 50
         }
       }
     }
   },
   "circle_with_size": {
     "classname": 'CircleWithSize'
     "caption": "円改",
     "default_width": 300,
     "default_height": 100,
     "r_offset": 45,
     "r_step": 90,
     "tail_count": 4,
     "size_count": 3,
     "width_offset": 0,
     "height_offset": 0,
     "width_step": 200,
     "height_step": 100,
     templates: {
       "rightup_small": {
         "tail": 0,
         "size": 0,
         "balloon": {
           system_picture: "BASE64ENCODEDATA"
         },
         "speech": {
           "x_rate": 20,
           "y_rate": 30,
           "width_rate": 50,
           "height_rate": 50
         }
       },
       "rightup_middle": {
         "tail": 0,
         "size": 1,
         "balloon": {
           system_picture: "BASE64ENCODEDATA"
         },
         "speech": {
           "x_rate": 20,
           "y_rate": 30,
           "width_rate": 50,
           "height_rate": 50
         }
       },
       "rightup_large": {
         "tail": 0,
         "size": 2,
         "balloon": {
           system_picture: "BASE64ENCODEDATA"
         },
         "speech": {
           "x_rate": 20,
           "y_rate": 30,
           "width_rate": 50,
           "height_rate": 50
         }
       },
       "rightdown_small": {
         "tail": 1,
         "size": 0,
         "balloon": {
           system_picture: "BASE64ENCODEDATA"
         },
         "speech": {
           "x_rate": 20,
           "y_rate": 30,
           "width_rate": 50,
           "height_rate": 50
         }
       },
       "leftdown_small": {
         "tail": 2,
         "size": 0,
         "balloon": {
           system_picture: "BASE64ENCODEDATA"
         },
         "speech": {
           "x_rate": 20,
           "y_rate": 30,
           "width_rate": 50,
           "height_rate": 50
         }
       },
       "leftup_small": {
         "tail": 3,
         "size": 0,
         "balloon": {
           system_picture: "BASE64ENCODEDATA"
         },
         "speech": {
           "x_rate": 20,
           "y_rate": 30,
           "width_rate": 50,
           "height_rate": 50
         }
       }
   }
 }

フキダシ

フキダシ SpeechBalloonModel

カラム

name	和名	type	default	null	limit	note
panel_id	所属パネルid	integer		FALSE
speech_balloon_template_id	フキダシテンプレートid	integer		FALSE
classname	フキダシクラス名	string		FALSE	50	jsのクラス名(テンプレートからのコピー)
z	表示順位	integer		FALSE
t	時間軸 順序	integer		false
settings	拡張データ	string				json形式
created_at		datetime
updated_at		datetime

相違点

• classname
  • 追加
• settings
  • 追加

解説

クライアントは、このフキダシを表示するとき、classnameのクラスのインスタンスを生成する。たとえばclassnameの値が'Square'のフキダシだったとき、Squareクラス(フキダシを実装したクラス)を生成する。このとき初期化データとしてsettingsとフキダシ枠とセリフを渡す。Squareクラスはsettingsをjson文字列としてパースしてフキダシに必要な情報を取得する。settingsには、フキダシ全体に影響するプロパティが入っている(今のところ該当するプロパティはない)。これらのプロパティはjsのフキダシクラスとテンプレート間で合意があればどんな形式でもよい。

クライアントのフキダシ編集パネルは、再現性を保てるように(settingsを含めて)データを作成しなければならない。

フキダシ枠 BalloonModel

カラム

name	和名	type	default	null	limit	note
speech_balloon_id	フキダシid	integer		FALSE
system_picture_id	フキダシ素材id	integer		FALSE
x	表示開始位置x	integer		FALSE
y	表示開始位置y	integer		FALSE
width	表示幅	integer		FALSE
height	表示高さ	integer		FALSE
caption	説明	string				フキダシの発言者などの予備情報
settings	拡張データ	string				json形式
created_at		datetime
updated_at		datetime

相違点

• settings
  • 追加

解説

クライアントのフキダシクラスはインスタンスを生成する。たとえばclassnameの値が'Square'のフキダシだったとき、Squareクラス(フキダシを実装したクラス)を生成する。このとき初期化データとしてこのデータ(フキダシ枠)が渡る。Squareクラスはsettingsをjson文字列としてパースしてフキダシ枠に必要な情報を取得する。settingsには、フキダシ画像に関連するプロパティが入っている(今のところ該当するプロパティは円形フキダシのrやサイズのバリエーションsize)。これらのプロパティはjsのフキダシクラスとテンプレート間で合意があればどんな形式でもよい。フキダシ編集パネルでrが60に設定されているなら'{"r":60}'って文字列が入っているから、コマ表示では60度のフキダシを表示し、コマ編集なら60度のフキダシを編集モードにする。

なお、ベクターフキダシが動かない環境では、サーバがsystem_picture_idのフキダシ画像をx・y・width・heightで表示する。このケースに備えて、クライアントのフキダシクラスは、コマ投稿時に表示中のベクターフキダシに最も近いフキダシ画像を選んでおかなければならないし、選べるようなパラメータを用意しておかなければならない。

セリフ SpeechModel

カラム

name	和名	type	default	null	limit	note
speech_balloon_id	フキダシid	integer		FALSE
content	台詞	string
x	表示開始位置x	integer		FALSE		単位は%
y	表示開始位置y	integer		FALSE		単位は%
width	幅	integer		FALSE		単位は%
height	高さ	integer		FALSE		単位は%
settings	拡張データ	string				json形式
created_at		datetime
updated_at		datetime

相違点

• settings
  • 追加

解説

フキダシ枠と同様。 settingsに入るデータは今のところ不明(フォントや書式が入るかも)

フキダシサンプル

長方形フキダシのデータ。座標やサイズは適当。

 speech_balloon : {
   "z":  1,
   "t": 0,
   "classname": "Square",
   "speech_balloon_template_id": 1,
   "balloon_attributes": {
     "new1": {
       "system_picture_id": 1,
       "x": 30,
       "y": 30,
       "width": 50,
       "height": 50
     }
   },
   "speech_attributes": {
     "new1": {
       "content": "hello",
       "x": 30,
       "y": 30,
       "width": 50,
       "height": 50
     }
   }
 }

円フキダシのサンプル。尻尾の向きが保存されている。

 speech_balloon : {
   "z":  1,
   "t": 0,
   "classname": "circle",
   "speech_balloon_template_id": 2,
   "balloon": {
     "system_picture_id": 11,
     "x": 22,
     "y": 30,
     "width": 50,
     "height": 50,
     "settings": "
       {"r": 45}
     "
   },
   "speech": {
     "content": "hello",
     "x": 22,
     "y": 30,
     "width": 50,
     "height": 50
   }
 }

まとめ

サーバとしては、フキダシ(SpeechBalloonModel・SpeechModel・SpeechModel)をベターな形で預かれればいいので、テンプレート⇔フキダシ部分のデータ変換はクライアントで好きにやってねってことです。

テンプレート作成の考え方は HowToMakeSpeachBalloon の流れとまったく変わりません。

SbtSpl