【2.12】文字装飾機能内部設計書 ebihara@tejimaya.com takai@tejimaya.net http://trac.openpne.jp/ticket/333.

Presentation on theme: "【2.12】文字装飾機能内部設計書 ebihara@tejimaya.com takai@tejimaya.net http://trac.openpne.jp/ticket/333."— Presentation transcript:

1 【2.12】文字装飾機能内部設計書 ebihara@tejimaya.com takai@tejimaya.net

2 <op:b> 装飾したい文字列 </op:b>
【A-1】文字装飾タグの基本仕様 例： <op:b> 装飾したい文字列 </op:b> 基本的な形式はXMLに準拠 要素名はHTMLの文字装飾のための要素名になるべく準拠する（上の例は<b></b>に対応している） 要素名には op という名前空間を与え、他のHTMLタグと明確に区別する 【プライオリティ順】 日記本文（必須） トピック・イベントの親記事 トピック・イベント・日記コメント 上記3つ・プロフィール項目のテキストエリアなど、できる限りのテキストエリアで使用可能にする ※使用箇所が２つ以上になる場合、adminの文字装飾設定で反映箇所を選択可能にする （その場合、ボタン毎の使用設定よりこちらのほうが優先度が高い）

3 【A-2】文字装飾タグの変換規則 以下の文字装飾タグは無効な指定とする。これらの扱いは各変換処理に依る（「無効な文字装飾タグ」）
開始タグのみの指定 終了タグのみの指定 ネストが正しくない指定 <op:要素名>の形式であるが、要素名が文字装飾変換表に存在しない （携帯版のみ）「使用しない」に設定された文字装飾タグ 以下のタグは文字装飾タグとして認めない（「文字装飾タグでないタグ」） HTML タグなど、<op:要素名>の形式でないタグ 「1. 」 に当てはまらない文字装飾タグ（「有効な文字装飾タグ」）を以下のように変換する <op:要素名> は <span class=“op_要素名”> に変換する 例外として、 op:color:#(カラーコード) は <span class=“op_要素名” style=“color:#(カラーコード)”> に変換される 「1. 」～「3. 」のいずれにも当てはまらないものは通常の文字列と見なす 【プライオリティ順】 日記本文（必須） トピック・イベントの親記事 トピック・イベント・日記コメント 上記3つ・プロフィール項目のテキストエリアなど、できる限りのテキストエリアで使用可能にする ※使用箇所が２つ以上になる場合、adminの文字装飾設定で反映箇所を選択可能にする （その場合、ボタン毎の使用設定よりこちらのほうが優先度が高い）

4 【A-3】文字装飾変換表 文字装飾タグ 意味 PC版記述 PC版スタイル 携帯版記述 備考 op:b 太字 <span class=“op_b”> .op_b {font-weight:bold} <b> op:u 下線 <span class=“op_u”> .op_u { text-decoration: underline} <u> op:s 取消線 <span class=“op_s”> .op_s { text-decoration: line-through } <s> op:i 斜体 <span class=“op_i”> .op_i { font-style: italic} <i> op:large フォントサイズ大 <span class=“op_large”> .op_large { font-size:20px } <font size=“”> op:small フォントサイズ小 <span class=“op_small”> .op_small { font-size:8px} op:color:#(カラーコード) 文字色 <span class=“op_color” style=“color:#(カラーコード)”> .op_color {color: #(デフォルト文字色) ! important} <font color=“”> この文字装飾を使用しない場合に「PC版スタイル」を適用する 【プライオリティ順】 日記本文（必須） トピック・イベントの親記事 トピック・イベント・日記コメント 上記3つ・プロフィール項目のテキストエリアなど、できる限りのテキストエリアで使用可能にする ※使用箇所が２つ以上になる場合、adminの文字装飾設定で反映箇所を選択可能にする （その場合、ボタン毎の使用設定よりこちらのほうが優先度が高い） ※op:color を除き、文字装飾を使用する設定になっている場合、「.名前空間_要素名」の class にスタイル指定を与える ※PC版では文字装飾変換処理時には使用設定を見ない ※携帯版では文字装飾変換処理時に使用設定を見る

5 【B-1】文字装飾タグの変換処理（日記表示時）
1. DB内データ <op:b> 装飾したい文字列 </op:b> 2. t_truncate 3. t_cmd 4. t_decoration 有効な文字装飾タグ： span 要素に変換 無効な文字装飾タグ： 変換せず出力 文字装飾タグでないタグ： 変換せず出力 【プライオリティ順】 日記本文（必須） トピック・イベントの親記事 トピック・イベント・日記コメント 上記3つ・プロフィール項目のテキストエリアなど、できる限りのテキストエリアで使用可能にする ※使用箇所が２つ以上になる場合、adminの文字装飾設定で反映箇所を選択可能にする （その場合、ボタン毎の使用設定よりこちらのほうが優先度が高い） 5. 日記表示 <span class=“op_b”> 装飾したい文字列 </span> ※<op:b> と </op:b> が span 要素に変換される

6 【B-2】文字装飾タグの変換処理（日記編集時）
（1. DB内データ） <op:b> 装飾したい文字列 </op:b> 2. テキストエリア <op:b> 装飾したい文字列 </op:b> ※変換しない （確認画面） <span class=“op_b”> 装飾したい文字列 </span> ※表示用に変換するのみ ※フォーム内データは変換しない ※変換処理の内容は【B-1】と同一 3. 投稿処理 【プライオリティ順】 日記本文（必須） トピック・イベントの親記事 トピック・イベント・日記コメント 上記3つ・プロフィール項目のテキストエリアなど、できる限りのテキストエリアで使用可能にする ※使用箇所が２つ以上になる場合、adminの文字装飾設定で反映箇所を選択可能にする （その場合、ボタン毎の使用設定よりこちらのほうが優先度が高い） 4. DB内データ <op:b> 装飾したい文字列 </op:b> ※変換しない

7 【B-3】文字装飾タグの変換処理（管理画面・一覧系表示時）
1. DB内データ <op:b> 装飾したい文字列 </op:b> 2. t_strip_decoration ※t_description にオプションを指定する形でも可 有効な文字装飾タグ： 取り除く 無効な文字装飾タグ： 取り除かない 文字装飾タグでないタグ： 取り除かない 【プライオリティ順】 日記本文（必須） トピック・イベントの親記事 トピック・イベント・日記コメント 上記3つ・プロフィール項目のテキストエリアなど、できる限りのテキストエリアで使用可能にする ※使用箇所が２つ以上になる場合、adminの文字装飾設定で反映箇所を選択可能にする （その場合、ボタン毎の使用設定よりこちらのほうが優先度が高い） 3. 一覧表示 装飾したい文字列 ※<op:b> と </op:b> が取り除かれている

8 【B-4】文字装飾タグの変換処理（携帯版日記表示時）
1. DB内データ <op:b> 装飾したい文字列 </op:b> 2. t_decoration_ktai 有効な文字装飾タグ： 対応するHTML要素に変換する 無効な文字装飾タグ： 変換せず出力 文字装飾タグでないタグ： 変換せず出力 【プライオリティ順】 日記本文（必須） トピック・イベントの親記事 トピック・イベント・日記コメント 上記3つ・プロフィール項目のテキストエリアなど、できる限りのテキストエリアで使用可能にする ※使用箇所が２つ以上になる場合、adminの文字装飾設定で反映箇所を選択可能にする （その場合、ボタン毎の使用設定よりこちらのほうが優先度が高い） 3. 日記表示 <b> 装飾したい文字列 </b> ※<op:b> と </op:b> が対応するHTML要素に変換されている

9 【C-1】文字装飾機能の実装にあたり必要なOpenPNEの機能
CSSの動的書き出し機能 実装前は、head要素内に動的にスタイルを書き出す リッチテキストエリア 文字装飾機能開発時に追加 【プライオリティ順】 日記本文（必須） トピック・イベントの親記事 トピック・イベント・日記コメント 上記3つ・プロフィール項目のテキストエリアなど、できる限りのテキストエリアで使用可能にする ※使用箇所が２つ以上になる場合、adminの文字装飾設定で反映箇所を選択可能にする （その場合、ボタン毎の使用設定よりこちらのほうが優先度が高い）