MJ検索サイトToDo

最終更新 2013/10/02 21:51:17

 

Twitter BootStrapの導入。

IE9以前でもHTML5対応するためのmetaタグ

・詳細画面をつける。

・部首は4カラム方式で単純化する。←DB、ロジックでは4カラム限定は無しとした。ビューの編集ボックスで4カラム限定にした。

・部首の選び方、ポップアップ、2方式(部首名、イメージ選択)。

・検索結果の表組みをtableタグに変える。

・検索キーをクリアするボタン。

・ボタンにbootstrapのアイコンをつける。

・検索画面は画面いっぱいを使う。検索キーではなく部首画面が右に張り出す感じ。

CSSのクリーニング

・検索結果一覧には、サムネイル画像を表示するようにする。

・部首画面をselect2で作り直す。

・paginationのbootstratp対応。KAMIRAIを使用。

・部首検索を実装する。

・部首の読みを実装する。 

・読みは空白を入れて続けると、or検索になるようにする。

・検索の説明を入れたい。説明ダイアログをbootstrapで入れたい。

・検索キーと検索結果の件数を表示する。検索キー編集画面は結果表示時は不要。

・検索キーが不正のときの表示。メッセージの色(bootstrapのalerts)。不正キーの色。

 ・javascriptの挙動の違いを調査、修正する。

・画面構成を再考する。検索キーが画面左、検索結果一覧が画面中央。詳細が画面右。下にワークエリア

・CHISEの部品検索を実装する。 

UNICODEの表示箇所はコードと文字の二つ表示する。

・画像をインラインにして、リクエスト回数を削減する。

・ CHISEの部品データのアップロードスクリプト改善(IdsKeyと紐付けるPropertyをUCSをキーに探すときにfind_by_ucsを使っているのでヒットしたうちの最初の1件にしか割り当てていない。複数ヒットしたらそれぞれにセットする。)

・画像をインラインに埋め込んで、リクエスト数を削減する。(MJ画像は効果高いはず。部首画像はどうだろうか。)

・IDS部品検索を高速化する。

 1.ActiveRecordのクエリを使わず、SQL直書きにすると速いらしい。こんな感じが良いらしい。モデル.connections.select_rows(モデル.クエリ.to_sql) 本当? やっぱりSQL直書きが良いかも。インジェクションに注意するためにエスケープ付けるとかして。

 2.セッションキー毎に検索キーセット(SearchFormプロパティセット)をキーにして検索結果の配列をmemcachedに入れる。有効期限を付ける。ページネーションで威力を発揮するはず。

 3.インデックス設計やMySQLの設定チューニング。(sqaleでmySQLのシステム設定チューニングできたっけ?)

 4.Gem Parallelを使って並列処理。

 5.インメモリDBの活用A案。sqaleではmemcachedなので、キーに対して値1つ。となるとIdsKeyの検索キー毎に結果を圧縮して入れればOKかも。検索キーセット毎に格納すべきか、検索キー単体に分解して格納すべきか、検討が必要。sqaleではmemcachedの割り当て容量が少なすぎるので、やっぱりAWSに乗り換えることも考える。AWSなら、memcachedに限定する必要はない。Redis、MongoDBなども検討する。

 6.インメモリDBの活用B案。ランキングの高いIDS部品1文字単位でキーにして、その検索結果の配列をmemcachedに入れる。有効期限は付けない。DB更新することは滅多に無いので、memcachedを更新するアクションをサイト上のフォームボタンで実装。と思ったけど、タイムアウトしそうなのでrailsのバッチ処理の方で要検討。

 7.DBにキャッシュテーブルを作って、IDS部品キーセット(ids_keys_stringの文字列をソートしたもの)と検索結果のペアを入れていく。クエリでは、最初にそのテーブルを見てヒットしたらそれを使うようにする。

 参考サイト

 http://magazine.rubyist.net/?0018-BundledLibraries

 http://qiita.com/mosa_siru/items/ea2c5f7faec66347a10f

 http://d.hatena.ne.jp/akishin999/20130611/1370902178

 http://dotinstall.com/lessons/basic_redis

 http://www.atmarkit.co.jp/news/200902/26/redis.html

→インメモリDBを使うまでもなく、高速化を達成できた。さらにインメモリを実装しても良いけど・・・、そこまでやらなくても良さそう。

・部首のプルダウンの速度が若干気になる。CSSにインライン化するなど考えたい。→select2で表示する部首プルダウンメニューの画像をインラインにする。gem GONで渡す。

 ・IDS部品検索の検索キーで、UCS検索もするようにする。

・キーボードで操作できるようにする。

・検索キー表示 検索キーを文字列で表示する。フォームのエリアがもったいないので。→今のところ不要。

・待ち中にスプラッシュを表示するか、または画面遷移をアニメーションにして待ち時間をごまかす。プログレスバーにした。

・ナビバーのblandとメニューの再構成

・table内で、矢印キーでフォーカス移動

 

 

 

・IDS検索ロジックを検証する。

 今の問題、検索キーの順番を変えたら検索結果が変わってしまう。

 「火水」→MJ039867、MJ039219、MJ015636

 「水火」→MJ039867、MJ039219、MJ002262

  →パフォーマンスを改善するために同じロジックでキャッシュを構築したら、解決してしまった。何か理由があるはず。気になる。

 

・検索処理中はボタンだけでなく、フォームのオブジェクト全部、disableにしたい。ページネーションのリンクもそうできたらうれしいんだけど。もしくはスプラッシュをモーダルにして、ESCキーを押したら検索キャンセルされるとか、そんなやつ。

 →Javascriptのプラグインでそんなのがあった。div要素に半透明なレイヤをオーバーレイして、そのdiv要素の領域をまるごと使用不可にするやつが。

 

・IDS部品検索の同じ部品を複数指定したときの検索を検討する。(優先度は低い。)

 ・検索キーを充実させて、タブで分ける。

UNICODEの検索はコードベースと文字ベースの二つの方法を用意する。

・詳細画面から、UNICODEでグループ文字検索。

・読みキーワードで、濁音・半濁音・促音・拗音を無視して検索できるようにする。

 (ほう=ぼう、ほう=ぼう、かつ=かっ、きよう=きょう)

・クリックでコード、イメージをクリップボードにコピーする。

・ユーザー認証機能を入れて、ユーザー毎にワークエリアを持つ。ワークエリアに文字を確保して、見比べられるようにする。ワークエリアの文字もクリックすると詳細画面が出るようにする。詳細画面で、ワークエリアから消去するボタン、ワークエリアの中で並べ替えるボタンを設ける。ワークエリアと詳細画面エリアの背景色を薄い青などにすればわかりやすい。ワークエリアに入れた文字はDBで保存する。

 ・検索結果画面 検索キーセットをキーにして、検索結果のID配列をキャッシュに持つ。スコープで、キャッシュにキーがあったらそのID配列でクエリー発行する。キーがなかったら普通に検索して、ID配列をキャッシュに入れておく。

 ・AWSを使う。キャッシュやmamcachedを多く使えるようになる。あと、Railsだけでなく、Webサーバー、リバースプロキシまで最適化できるはず。

 ・読みをselect2にする。

 コントローラで受け取ったパラメータの書式が変わるので修正する。

 改行でフォーカス移動するjavascriptの配列のところも修正する。

 

・アンケートを準備する。

・IDSの代替キー機能(変換テーブルを作って、検索ロジックに組み込む。)

・ログイン機能、ユーザー毎でワークエリアを管理する。

・文字にフォーカスがある状態でEnterを押すと、カスタムメニューを出したい。

 文字のaタグのリンク先をjavascriptにすればよいかも。

 カスタムメニューでは詳細表示とワークエリアへの確保の2通りを選択する。

  メニュー1 ワークエリア登録 でワークエリアに文字を載せる。

  メニュー2 文字詳細 で詳細画面表示

  http://s-yadav.github.io/contextMenu.html#intro

  http://phpspot.org/blog/archives/2013/07/jquerycontextme_1.html

  http://www.blinderhidden.com/contextmenu-r2-js-right-click-meno-custom-664.html

  http://www.trendskitchens.co.nz/jquery/contextmenu/

  http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_contextmenu#a_jcontext

  http://s-yadav.github.io/contextMenu.html#demo

 

・ワークエリアで文字削除、順番変更、改行挿入、改行削除

・モーダルをどこかで使えるかも?

 http://dotinstall.com/lessons/basic_twitter_bootstrap_v3/8817