【2.11】文字装飾機能 - OpenPNE

【2.11】文字装飾機能
[email protected]
http://trac.openpne.jp/ticket/333
画面遷移図（PC）
【文字装飾使用可能箇所】
日記本文
pc
マイホーム
（page_h_home）
【A-3】日記リスト
（page_fh_diary_list）
【A-1】日記作成
（page_h_diary_add）
【A-2】日記作成確認
（page_h_diary_add_confirm）
【A-4】日記詳細
（page_fh_diary）
色分け
変更なしページ
追加ページ
変更ページ
画面遷移図（携帯）
•携帯から文字装飾機能は使用不可
•PCから装飾された記事を表示する場合、一部の装飾のみ反映される
ktai
マイホーム
（page_h_home）
日記リスト
（page_fh_diary_list）
【B-1】日記詳細
（page_fh_diary）
【B-2】日記編集
（page_h_diary_edit）
色分け
変更なしページ
追加ページ
変更ページ
画面遷移図（admin）
•adminからは使用の可否を設定することが出来る
•監視機能など管理画面で文字装飾された記事を表示する場合、装飾は全て反映させない。タグもでないといいな！
admin
トップ
（page_top）
【C-2】SNS設定
（page_edit_c_admin_config）
【C-3】文字装飾設定
（page_edit_deco）
【C-1】adminメニューバー
【C-4】スキン画像変更
（page_edit_skin_image）
色分け
変更なしページ
追加ページ
変更ページ
【A-1】日記作成（page_h_diary_add）
1)テンプレート挿入領域（h_diary_add 3）の下に文字装飾機能を配置
2)h_diary_editも同様の変更を行う
ラジオボタンを切り替えることで
•プレビューモード
•テキストモード
の切り替えが行える
（ラジオボタン選択変更で即時反映）
テンプレート挿入領域（h_diary_add 3）
プレビューモード
テキストモード
【X-1】文字装飾機能リスト1
ボタン・フォーム
(A1)
プレビューモード
(A2)
テキストモード
(A1)プレビューモード
文字装飾をリアルタイムで反映させる。
(B１) (B２) (B３) (B４) (B５) (B６) (B７) (B８) (B９) (B10)(B11)
表示例
2.11から文字装飾機能が
入ります！
楽しみですね＾＾
こんなことや
(A)
文字装飾を行うエリアの表示方法の切り替え
を行うフォーム（ラジオボタン形式）。
選択を切り替えることで設定が即時反映され
る。
こんなこともでき
ちゃう！
(B)
文字装飾の指定を行うボタン
(A2)テキストモード
文字装飾をタグで表示させ、装飾を反映させ
ない。
デフォルトはテキストモードが選択されている
表示例
2.11から<タグ>文字装飾
機能</タグ>が入りま
す！
楽しみですね＾＾
<タグ>こんなことや</タグ
>
<タグ>こんなこともでき
ちゃう！</タグ>
【X-2】文字装飾機能リスト2
ボタン・フォーム
(A1)
プレビューモード
(A2)
テキストモード
(B1)太字ボタン
文字を太字にさせる
表示例
文字文字
(B１) (B２) (B３) (B４) (B５) (B６) (B７) (B８) (B９) (B10)(B11)
(B2)下線ボタン
(A)
文字装飾を行うエリアの表示方法の切り替え
を行うフォーム（ラジオボタン形式）。
選択を切り替えることで設定が即時反映され
る。
文字を下線を引く
(B3)取り消し線ボタン
文字に取り消し線を引く
表示例
文字文字
表示例
文字文字
(B)
文字装飾の指定を行うボタン
(B4)イタリックボタン
文字をイタリックにする
(B5) 文字サイズ（大）ボタン
文字を大きめにする
(B6) 文字サイズ（小）ボタン
文字を小さめにする
表示例
文字文字
表示例
文字文字
表示例
文字文字
【X-3】文字装飾機能リスト3
ボタン・フォーム
(A1)
プレビューモード
(A2)
テキストモード
(B１) (B２) (B３) (B４) (B５) (B６) (B７) (B８) (B９) (B10)(B11)
(B7)文字色指定ボタン
ボタン押下で表示されているパレットの範囲
内で文字色を指定する
表示例
文字文字赤色指定
(A)
(B8)アルバム画像挿入ボタン
文字装飾を行うエリアの表示方法の切り替え
を行うフォーム（ラジオボタン形式）。
選択を切り替えることで設定が即時反映され
る。
アルバム画像を挿入するポップアップを表示する。ポップアップ・動作につい
てはアルバム画像の仕様を参照
(B)
文字装飾の指定を行うボタン
(B9) 絵文字挿入ボタン(DoCoMo)
ボタン押下でDoCoMoの絵文字パレットが表示され、パレットから絵文字を
選択して挿入することができる
(B10) 絵文字挿入ボタン(au)
ボタン押下でauの絵文字パレットが表示され、パレットから絵文字を選択し
て挿入することができる
（‘OPENPNE_EMOJI_DOCOMO_FOR_PC’がTRUEの場合のみ表示）
(B11) 絵文字挿入ボタン(DoCoMo)
ボタン押下でSoftBankの絵文字パレットが表示され、パレットから絵文字を
選択して挿入することができる
（‘OPENPNE_EMOJI_DOCOMO_FOR_PC’がTRUEの場合のみ表示）
【A-2】日記作成確認（page_h_diary_add_confirm）
1)日記本文に文字装飾を反映させる
2)h_diary_edit_confirmも同様の変更を行う
•本文に文字装飾が反映さ
れる
本
2.11から文字装飾機能が入ります！
楽しみですね＾＾
文
こんなことや
こんなこともできちゃう！
【A-2】日記作成確認（page_h_diary_add_confirm）
1)日記本文に文字装飾を反映させる
•本文に文字装飾が反映さ
れる
2.11から文字装飾機能が入ります！
楽しみですね＾＾
こんなことや
こんなこともできちゃう！
【A-3】日記リスト（page_fh_diary_list）
1) 日記本文が省略されるページは全て同じ表示を行う
•文字装飾を反映しない
•タグを非表示にする
2.11から文字装飾が入ります！楽しみですね＾＾
こんなことや、こんなこともできちゃう！
日記本文
2.11から文字装飾機能が
入ります！
楽しみですね＾＾
こんなことや
こんなこともでき
ちゃう！
【B-1】日記詳細（page_fh_diary）
1) 携帯版の表示はPC版とまったく同じにするのでなく、携帯で表示できるものに変換してから表示する。
•携帯で反映できる文字装
飾は反映させる
2.11から文字装飾機能が入ります！
楽しみですね＾＾
こんなことや
こんなこともできちゃう！
【B-2】日記編集（page_h_diary_edit）
1) タグが表示された状態でテキストエリアに反映させる
2)page_h_diary_addからでもタグを直打ちすれば装飾が反映されるようにする（優先度低め）
•タグが入った状態で表示
させる
2.11から<タグ>文字装飾機能
</タグ>が入ります！
楽しみですね＾＾
<タグ>こんなことや</タグ>
<タグ>こんなこともできちゃ
う！
【B-2】日記編集（page_h_diary_edit）
1) タグが表示された状態でテキストエリアに反映させる
2)page_h_diary_addからでもタグを直打ちすれば装飾が反映されるようにする（優先度低め）
•タグが入った状態で表示
させる
2.11から<タグ>文字装飾機能
</タグ>が入ります！
楽しみですね＾＾
<タグ>こんなことや</タグ>
<タグ>こんなこともできちゃ
う！

Download Report