検索ボックスまたは検索バーは、訪問者が探しているものを検索するためにWebアプリケーションで使用される一般的な機能です。優れたUX検索機能は、情報検索の旅程を大幅に短縮し、ユーザーエクスペリエンスを向上させることができます。この記事では、Flaskを使用して基本的な検索機能を設定し、pandasデータフレームでデータを返す方法について説明します。
Flask Search Bar Plus Dynamic Data Table Return Using Pandasの材料
目次
検索バー
検索バーを追加するには、クライアント側のHTMLスクリプトフォルダーにフォームメソッドと検索タイプの入力メソッドを追加する必要があります。 Flaskでは、テンプレートフォルダーに保存された新しいHTMLスクリプトを作成する必要があります。 以下は、コードです。
2つの変数値を確認してください。1つ目は、Pythonスクリプトファイルで作成したFlaskルート名と同じであるアクションパラメーターに「symbolResult」というルート名を追加することです。
もう1つは、入力ID値がサーバーサイドのフォーム名値と同じである必要があります。 後でさらに説明します。
検索結果とEasy2Digital API
検索バーページまたは任意のページに埋め込まれた検索バー機能を作成した後、ユーザーが検索した後に検索結果のデータを返す必要があります。 基本的に、データ通信には2つのセクションがあります-サーバーサイドとクライアントサイド
サーバーサイド-Python、Pandas
まず最初に、ユーザーに検索結果を返すルートを作成する必要があります。 ここでのルート名は、クライアント側のHTMLフォームアクション名と同じでなければなりません。 これらを接続するためです。
次に、キーワードをキャプチャするフォーム変数を作成して、ユーザーが入力したキーワードで情報を検索できるようにします。 get（）内の値は、上記のクライアント側のフォームのIDと同じでなければなりません。
また、キーワードに基づいて、データベースに接続することができます。 ここでは、Easy2Digital APIを例として取り上げ、財務比率を選択します。 Easy2Digital APIコレクションに興味がある場合は、このページで詳細を確認してください。
Easy2Digiatal APIエンドポイントでリクエストメソッドを使用し、関連するパラメータを追加することで、検索バーからキーワードに関連するデータを取得します。
最後に、検索結果に表示するデータのテーブルを返すために、pandasのデータフレームを利用することができます。コードサンプルは以下の通りです。
financialRatioDataは、テーブルのヘッダーを追加するためのものです。Row_dataは、各ヘッダーからの値を追加するためのものです。
クライアントサイド – HTML、CSS、Jinja
サーバーサイドのコードとルートが準備できたら、検索キーワードに関連する情報をクライアントサイドに返します。問題は、HTML、CSSのクライアントサイドで、サーバーサイドからデータを表示する方法です。この場合、Jinja2とfor loop、zip()メソッドを使用することができます。以下にコードが示されています。
FlaskとPandasを使用したWebアプリの検索バーの完全なPythonスクリプト
Easy2Digital APIに興味がある場合、Chapter 65 – Flask Search Bar Plus Dynamic Data Table Return Using Pandas and Pythonの完全なPythonスクリプトについては、「Chapter 65」というメッセージを追加してニュースレターに登録してください。スクリプトをすぐにメールボックスに送信します。
Chapter 65 – Flask Search Bar Plus Dynamic Data Table Return Using Pandas and Pythonを読んで楽しんでいただけると嬉しいです。もしそうであれば、以下のリストのうちの1つを行って、私たちのチャンネルをサポートしてください。
- PayPal（paypal.me/Easy2digital）を介してチャンネルをサポートして寄付する
- 私のチャンネルに登録して、通知ベルをオンにする Easy2Digital Youtubeチャンネル
- 私たちのFacebookページ Easy2Digital Facebookページをフォローして、いいね！を押す
- ハッシュタグ#easy2digitalを使用して、ソーシャルネットワークで記事を共有する
- Easy2Digitalの最新記事、ビデオ、割引コードを受け取るために、週刊ニュースレターに登録する
- Patreonを通じて月間会員に登録して、独占的な特典を楽しむ（www.patreon.com/louisludigital）
