Djangoカスタムウィジェット概要タグの一覧をお洒落にするもっと便利にする紐づく記事数も表示する概要Djangoで、ブログを作るシリーズ1の1つです。ブログの検索フォームを改良していきます。タグの一覧をお洒落にする今回、タグは複数指定が可能です。検索の際も複数のタグで絞り込みができるようにしたいのですが、プルダウン選択だと複数選択がちょっと難しいです。チェックボックスを使います。通常のチェックボックスだと見た目的にアレなので、Django、カスタムチェックボックスの作成のような、カスタムチェックボックスを作ろうと思います。アプリケーション内にwidgets.pyを作り、次のようにしておきます。'custom-checkbox'templates内にwidgetsディレクトリを作ります。その中に2つファイルを作ります。}}</label>今作ったウィジェットを使うようにします。forms.pyです。"""記事検索フォーム。)カスタムチェックボックスのCSSを追記します。0.5;}ここまでで、次のような見た目になります。記事の部分を、よくある横スクロールにしましょう。slickといったjQueryプラグインを使ってもいいのですが、今回はシンプルに実装します。次のCSSを追記します。0;}すると、横スクロールできるようになりました。入力欄とボタンもオシャレにしましょう。次のCSSを追記します。initial;}だいぶ良くなりました。便利にする検索フォームを、もっと使いやすいようにしていきます。チェックボックスをクリックすると、すぐに検索されるようにしましょう。いちいち「検索」ボタンを押さなくて済むようにします。これは簡単で、チェックボックスが押されたらフォームをサブミットすれば良いのです。次のscript要素をどこかに入れておきます。私はbase.htmlの</body>の直前に書きました。});</script>検索フォーム内のタグですが、毎回ここをスクロールしてお目当てのタグを探すのは大変です。記事一覧内にあるタグも、クリックすればタグ選択したり解除できるようにしましょう。さきほどのscript要素を書き換えます。持たせるように予めしていました。現在選択しているタグを上部に表示するようにもしましょう。post_list.htmlに追記します。}}</span>としています。これにより、記事一覧内のタグと同じように、クリックで選択したり解除できます。検索フォーム内のタグ記事一覧内のタグ「選択しているタグ:」に表示されているタグの3か所にあるタグ名をクリックすれば、絞り込んだり解除ができるということです。選択しているタグのCSSを追加しておきます。14px;}これで、次のGIFのような便利なタグ検索ができるようになりました。紐づく記事数も表示する最後に、検索フォーム内のタグに紐づく記事数を表示するようにしましょう。Python(100)みたいな感じですね。forms.pyを編集します。"""記事検索フォーム。).annotate(post_count=Count('post'))の部分ですね。いった集計に関する処理は、Djangoで、集計処理でも紹介しています。models.pyを開いて、Tagモデルの__str__を書き換えて、件数用の属性があればそれを表示するようにします。検索フォーム等では、紐づいた記事数を表示する。その場合はpost_countという属性に記事数を持つ。self.nameこれで、検索フォーム内のタグに件数が表示されるようになりました。PostsDjangoで、集計処理Djangoで、データの平均値を求めたり、何個のデータが紐づくか、といった集計処理のサンプルを紹介しています。DjangoDjango、カスタムチェックボックスの作成Djangoで、カスタムチェックボックスを作成する方法を紹介していきます。HTML・CSSDjangoで、ブログを作るシリーズ1Djangoでブログを作っていくシリーズです。シリーズ・まとめComment記事にコメントするまだコメントはありません。幾つかの方法で、ブログの更新を受け取れます。