
1 タグ付けされた文章のwysiwyg編集機能
コンテンツ入力のためのエディタを開発した。入力された文章には、「MERIT」や「GOAL」などの属性がメタ情報として追加されて、保存管理される。
従来のwikiにあるような編集画面による編集ではなく、見たままの画面で編集(wysiwyg)を実装した。

図4−1 コンテンツ編集の場面
2 入れ子になった文章の編集機能
エディタでは、現在読んでいる画面と分断されることなく、階層化したHowToを自然な形で意識できるよう設計した。画面遷移をすることなく、ユーザの要求に応じてAjaxで動的に取り込み、拡大して覗いて見るような読書感を演出する。これにより、windowの開閉に邪魔されず、快適な読み書きを実行できる。

図4−2 階層を開いた状態での編集の場面
3 見出しのツリー表示機能
HowToの入れ子構造を分かりやすくするためのもう1つの機能として、見出しのツリー表示機能を実装した。画面左にあるツリーには、現在開いているHowToの階層構造が、ツリー形式になって表示されている。
→ 
エディタ部分に表示させるための画像ファイルなどをアップロードし、指定した部分に表示することができる。アップロードされた画像ファイルなどのデータは、写真共有サイト「フォト蔵」のAPIを利用して保存される。

5 新規作成画面&ルートHowTo表示機能
サイトにアクセスした際には、新規作成用のフィールドが表示される。また、他のいかなるHowToの子となっていないHowTo(ルートHowTo)を、新着順に表示することにより、読み応えのある記事を見せることができる。

6 HowToの検索機能
画面左上の検索窓に単語を入力し、検索ボタンを押すことによって、その単語を含むHowTo一覧が更新順に表示される。
図4−6 新規作成とルートHowToの表示場面
|