BUSINESS TIPS発注担当者の方へ、発注成功の為のお役立ち情報

ユーザーが検索したキーワードをハイライト表示してUIを改善させる。

目次

ユーザーが検索したキーワードをハイライト表示してUIを改善させる。

検索文字のハイライト

ページ検索などで検索したテキストの背景がハイライト(着色、リンク化など)されているページを見たことはないでしょうか? 簡単そうに見えて、実は複雑なロジックが組み込まれています。 真っ先に思い浮かぶ方法は、検索された文字列を本文から検索して、対応する箇所を置換するだけだと思います。 しかし、実はそうではありません。 例えば、 --- ログ 開発 プログラミング プログラミング開発 --- 上記4つのワードで検索されていたとします。 そうすると、ハイライトしたい文章で「ログ」「開発」 「プログラミング」プログラミング開発」が含まれていたとしたら、 置換だけでは正常にハイライトを行うことができません。 例えば「ログ」をハイライトの対象とすると「プ「ログ」ラミング」、「プ「ログ」ラミング開発」のようにマッチしてしまい、実現したいハイライト表示は行えません。 では、文字列が長い(文字量が多い)ものから順番に処理すればいいのではないかというと、そうではありません。 「プログラミング開発」は正常にハイライトできますが、次の「プログラミング」を置換する際に、 同じ文字列に対してハイライト処理を行ってしまいます。そして次々に「ログ」や「開発」がマッチしてしまいます。 一度マッチした文字列は除外するように条件分岐をす必要がありそうです。 さらに、この単語が複数出現する場合、マッチしないような条件分岐の条件がさらに複雑になります。

プログラムを組む

今回の場合は、下記のような手順でプログラムを組むことにより、正常にハイライトを行うことができます。 1) 全単語を取得する 2) 全単語の出現位置を記憶する(=メモリ上に格納する) 3) 文字列の長さが長い順にソートする 4) 単語の出現位置+単語の文字列の長さの範囲を計算する 5) 上記の範囲に単語の出現位置が含まれており、かつ対象の単語より文字列の長さが   短いものを除外する (二重ハイライトにしないため) 6) 出現開始位置より手前の文字列と対象の文字列を文字列結合する 7) 1)〜6)上記をハイライトが終わるまで(ハイライト対象の文字列の終点まで)繰り返す 8) 最後に残った文字列を結合する 日本語で書くと手順は上記の通りとなります。 利用するプログラム言語によって実装方法は異なりますが、単語の出現位置を for文で一字一句探すコードを書かなければならない場合や、文字列の長さでのソートが デフォルト関数として備わっていない場合などを考えると更に手順が長くなることも考えられます。

検索された文字列を自然にハイライトさせるために

自然言語処理などでは、パフォーマンスを高めるために様々な研究が行われています。 検索された文字列が、名詞なのか人名なのかなど自然言語処理を取り入れることで、より自然にハイライトを行うことが出来るでしょう。

ソフトウェア・業務システム開発依頼先探しなら、
リカイゼンにおまかせください!

相談するだけ!プロがあなたにぴったりの会社をご紹介いたします!

かんたん3ステップ
お急ぎの方はお電話で 03-6427-5422
※サポートデスク直通番号
受付時間:平日10:00〜18:00

ソフトウェア・業務システム開発依頼先探しでこんなお悩みはありませんか?

お悩み
  • 会社の選び方がわからない
  • 何社も問い合わせるのが面倒くさい
  • そもそも依頼方法がわからない
  • 予算内で対応できる会社を見つけたい

発注サポート経験豊富な専任スタッフが
あなたのご要望をお聞きし、最適な会社をご紹介いたします!
ご相談から会社のご紹介まで全て無料でご利用いただけます。
お気軽にご相談ください!

ソフトウェア・業務システム開発
依頼先探しなら
リカイゼンにおまかせください!

相談するだけ!プロがあなたにぴったりの会社を無料でご紹介いたします!

サポートデスク

まずはご質問・ご相談なども歓迎!
お気軽にご連絡ください。

この記事の監修
リカイゼン サポートデスク 
吉田・新町
BtoBマッチングサービスであるリカイゼンにおいて、発注企業からのご相談のヒアリング、企業選定のフォローなどを行う部門の担当です。出展企業であるシステム開発やWEB制作、クリエイティブ制作会社ともコミュニケーションを取りながら、年間数百件の受発注のサポートを行っています。

ソフトウェア・業務システム開発の関連記事

【RPA開発|初心者の方向け】シナリオ作成から失敗回避のポイント、導入支援まで

【RPA開発|初心者の方向け】シナリオ作成から失敗回避のポイント、導入支援まで

単純な業務の自動化に非常に有効なRPAですが、RPAツールの機能向上や生成系AIとの連携により、さらに複雑な業務の自動化にも効果的になってきました。 しかし、いざRPAツールを導入し...

ソフトウェア開発の制作工程とは?各工程の目的や役割を解説

ソフトウェア開発の制作工程とは?各工程の目的や役割を解説

 ソフトウェアの開発には、基本的な制作工程が存在します。決められた手順に沿って進めることで、高品質なソフトウェア開発が可能になります。しかし、この制作工程について、一般の方は知らないことが多いのではないでしょうか。...

【発注初心者向け】システム開発の失敗リスクを減らす発注ガイド

【発注初心者向け】システム開発の失敗リスクを減らす発注ガイド

初めてシステム開発を行うを行うときに知っておきたい記事コンテンツをまとめました。 ぜひ、こちらを参考にしていただき、失敗リスクを最小限に、システム開発を進めていただければと思います! ...

システム開発におけるドキュメントの目的とは?種類や改定タイミングなどについて徹底解説!

システム開発におけるドキュメントの目的とは?種類や改定タイミングなどについて徹底解説!

システム開発を外注先に依頼するとプログラムが納品され、開発過程で作成されたドキュメント類も一緒に納品されることがあります。このドキュメントがなんのために存在するのかと疑問に感じたことはありませんか。 ドキュメ...

【IT用語】システムのリプレースとは?4種類ある方式の特徴、成功事例を解説

【IT用語】システムのリプレースとは?4種類ある方式の特徴、成功事例を解説

業務システムなどを長く使い続けていると、パフォーマンスが落ちて使い勝手が悪くなっていきます。しかし、システムを新しいものに変えたくても業務を止められない、システムを変えると弊害が起きるかもしれないなど、変更をためらうケースは...

記事を探す

キーワードで探す

カテゴリーで探す