kiwa@openpne.jp http://trac.openpne.jp/ticket/333 【2.11】文字装飾機能 kiwa@openpne.jp http://trac.openpne.jp/ticket/333

画面遷移図（PC） 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） 【プライオリティ順】 日記本文（必須） トピック・イベントの親記事 トピック・イベント・日記コメント 上記3つ・プロフィール項目のテキストエリアなど、できる限りのテキストエリアで使用可能にする ※使用箇所が２つ以上になる場合、adminの文字装飾設定で反映箇所を選択可能にする （その場合、ボタン毎の使用設定よりこちらのほうが優先度が高い） 色分け 追加ページ 変更ページ 変更なしページ

画面遷移図（携帯） ktai 色分け 変更なしページ 追加ページ 変更ページ 携帯から文字装飾機能は使用不可 PCから装飾された記事を表示する場合、一部の装飾のみ反映される ktai マイホーム （page_h_home） 日記リスト （page_fh_diary_list） 【B-1】日記詳細 （page_fh_diary） 【B-2】日記編集 （page_h_diary_edit） 色分け 追加ページ 変更ページ 変更なしページ

画面遷移図（admin） admin 【プライオリティ順】 SNS設定（必須） 色分け 文字装飾設定 スキン画像変更 変更なしページ 監視機能など管理画面で文字装飾された記事を表示する場合、装飾は全て反映させない。タグもでないといいな！ 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） 【プライオリティ順】 SNS設定（必須） 文字装飾設定 スキン画像変更 色分け 追加ページ 変更ページ 変更なしページ

【A-1】日記作成（page_h_diary_add） 2)h_diary_editも同様の変更を行う ラジオボタンを切り替えることで プレビューモード テキストモード の切り替えが行える （ラジオボタン選択変更で即時反映） テンプレート挿入領域（h_diary_add 3） テキストモード プレビューモード

【X-1】文字装飾機能リスト1 こんなこともできちゃう！ (A1)テキストモード (A2)プレビューモード ボタン・フォーム 表示例 文字装飾をタグで表示させ、装飾を反映させない。 デフォルトはテキストモードが選択されている 2.11から<タグ>文字装飾機能</タグ>が入ります！ 楽しみですね＾＾ <タグ>こんなことや</タグ> <タグ>こんなこともできちゃう！</タグ> (A1) (A2) テキストモード プレビューモード (B１) (B２) (B３) (B４) (B５) (B６) (B７) (B８) (B９) (B10)(B11) (A) 文字装飾を行うエリアの表示方法の切り替えを行うフォーム（ラジオボタン形式）。 選択を切り替えることで設定が即時反映される。 (B) 文字装飾の指定を行うボタン 表示例 (A2)プレビューモード 文字装飾をリアルタイムで反映させる。 2.11から文字装飾機能が入ります！ 楽しみですね＾＾ こんなことや こんなこともできちゃう！ A2は必須 A1はできればやってほしい

【X-2】文字装飾機能リスト2 文字文字 (B1)太字ボタン (B2)下線ボタン (B3)取り消し線ボタン (B4)斜体ボタン ボタン・フォーム 表示例 (B1)太字ボタン 文字を太字にさせる 文字文字 (A1) (A2) プレビューモード テキストモード (B１) (B２) (B３) (B４) (B５) (B６) (B７) (B８) (B９) (B10)(B11) 表示例 (B2)下線ボタン 文字を下線を引く 文字文字 (A) 文字装飾を行うエリアの表示方法の切り替えを行うフォーム（ラジオボタン形式）。 選択を切り替えることで設定が即時反映される。 (B) 文字装飾の指定を行うボタン 表示例 (B3)取り消し線ボタン 文字に取り消し線を引く 文字文字 表示例 (B4)斜体ボタン 文字をイタリックにする 文字文字 表示例 (B5) 文字サイズ（大）ボタン 文字を大きめにする 文字文字 B1・B5・B6は必須 並び順をbiusに変更 表示例 (B6) 文字サイズ（小）ボタン 文字を小さめにする 文字文字

【X-3】文字装飾機能リスト3 (B7)文字色指定ボタン (B8)アルバム画像挿入ボタン (B9) 絵文字挿入ボタン(DoCoMo) ボタン・フォーム 表示例 (B7)文字色指定ボタン ボタン押下で表示されているパレットの範囲内で文字色を指定する 文字文字赤色指定 (A1) (A2) プレビューモード テキストモード (B１) (B２) (B３) (B４) (B５) (B６) (B７) (B８) (B９) (B10)(B11) (A) 文字装飾を行うエリアの表示方法の切り替えを行うフォーム（ラジオボタン形式）。 選択を切り替えることで設定が即時反映される。 (B) 文字装飾の指定を行うボタン (B8)アルバム画像挿入ボタン アルバム画像を挿入するポップアップを表示する。ポップアップ・動作についてはアルバム画像の仕様を参照 （アルバム使用設定が「使用する」の場合のみ表示） (B9) 絵文字挿入ボタン(DoCoMo) ボタン押下でDoCoMoの絵文字パレットが表示され、パレットから絵文字を選択して挿入することができる (B10) 絵文字挿入ボタン(au) ボタン押下でauの絵文字パレットが表示され、パレットから絵文字を選択して挿入することができる （‘OPENPNE_EMOJI_DOCOMO_FOR_PC’がTRUEの場合のみ表示） B7は必須 B9～B11はひとまとめにしても可能（同じパレットにすべての絵文字が表示される） (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_fh_diary） 1)日記本文に文字装飾を反映させる 本文に文字装飾が反映される 2.11から文字装飾機能が入ります！ 楽しみですね＾＾ こんなことや こんなこともできちゃう！ 必須

【A-3】日記リスト（page_fh_diary_list） 1) 日記本文が省略されるページは全て同じ表示を行う 文字装飾を反映しない タグを非表示にする 2.11から文字装飾が入ります！楽しみですね＾＾ こんなことや、こんなこともできちゃう！ 日記本文 2.11から文字装飾機能が入ります！ 楽しみですね＾＾ こんなことや こんなこともできちゃう！ 必須

【B-1】日記詳細（page_fh_diary） 1) 携帯版の日記本文の装飾はPC版とまったく同じにするのでなく、携帯で表示できるHTMLに変換する。 携帯で反映できる文字装飾は反映させる 2.11から文字装飾機能が入ります！ 楽しみですね＾＾ こんなことや こんなこともできちゃう！ 【メモ】 難しそうなら出力されるHTMLはPCと同じでいい 最悪反映させないでもいい

【B-2】日記編集（page_h_diary_edit） 1) タグが表示された状態でテキストエリアに反映させる 2)page_h_diary_addからでもタグを直打ちすれば装飾が反映されるようにする（優先度低め） タグが入った状態で表示させる 2.11から<タグ>文字装飾機能</タグ>が入ります！ 楽しみですね＾＾ <タグ>こんなことや</タグ> <タグ>こんなこともできちゃう！

【C-1】adminメニューバー 1)　SNS設定（admin_page_edit_c_admin_config）で文字装飾機能を「使用する」に設定している場合のみ表示される 【C-3】文字装飾設定（page_edit_deco） に遷移 文字装飾設定 【メモ】 ポイントランク同様使用の可否によって表示がかわる・メールドメイン制限より使用頻度は高そうという理由でこの位置に。

【C-2】SNS設定（page_edit_c_admin_config） 1)　「日記カテゴリ機能使用設定」「cmdタグ使用設定」の間に「文字装飾使用設定」を追加 2)　文字装飾を「使用する」に設定した場合、文字装飾機能が使用可能になる 3)　文字装飾を「使用しない」に設定した場合、文字装飾機能が表示されない 4)　使用設定のデフォルトは「使用する」 　文字装飾機能を有効にするかどうかを設定します 文字装飾使用設定 選択肢は 使用する 使用しない の２種類 使用する設定で記事を書いた後使用しない設定になったら記事はどうなるのか

【C-3】文字装飾設定（page_edit_deco） 1)　「文字装飾使用設定」が「使用しない」の状態でこのページにアクセスした場合、エラーでトップ(admin_page_top）に遷移する 2)　アルバム画像挿入・au絵文字挿入・SoftBank絵文字挿入は各設定が使用できる状態になっていない場合表示しない（設定についてはX-2～X-3を参照） 3)　操作のデフォルトはすべて「使用する」 SNS設定:文字装飾設定 文字装飾設定 【C-3】スキン画像変更(admin_page_edit_skin_image) に遷移 装飾使用設定 メンバーが使用できる文字装飾を設定します。 ボタン画像の変更は[デザイン:スキン画像変更]から行えます。 ID 画像 装飾名 表示例 操作 1 太字 2 下線 3 取り消し線 4 斜体 5 大きめの文字 6 小さめの文字 7 文字色指定 8 アルバム画像挿入 - 9 DoCoMo絵文字挿入 [i:1] 10 au絵文字挿入 [e:1] 11 SoftBank絵文字挿入 [s:1] 使用する 使用しない 使用する 使用しない 使用する 使用しない 使用する 使用しない 使用する 使用しない 【プライオリティ順】 装飾名・操作 画像 表示例 使用する 使用しない 使用する 使用しない 使用する 使用しない 使用する 使用しない 設定を反映し、「文字装飾設定を変更しました」メッセージを表示 使用する 使用しない 使用する 使用しない 変更 絵文字画像を表示する

【C-3】スキン画像変更（page_edit_skin_image） 1)　携帯版画像の上に文字装飾画像を挿入 2)　画像変更の動作はほかのスキン画像に同じ 3)　すべての画像を変更可能にする 画像名は【C-3】文字装飾機能（page_edit_deco）の装飾名に同じ 文字装飾画像 | 携帯版画像 | 文字装飾画像 太字 下線 取り消し線 斜体 大きめの文字 小さめの文字