JavaScript概要Githubmodels.pyurls.pyviews.pybase.htmlpost_list.htmlBulmaのMessageウィジェットで表示するメッセージ毎にNotificationを作る概要Djangoのメッセージフレームワークの簡単なサンプルです。BulmaのNotificationやMessageを使った表示もしていきます。データの作成や更新、削除をすると、次のように上側にフラッシュメッセージが表示されます。これは各ユーザーに向けた一過性の通知メッセージで、1度表示されたら消去されます。Github少し長めなので、Githubにソースコードを置きました。models.pyモデルは次のようなものを使いましたが、何でもよいです。self.titleurls.py適当なURLとビューを紐づけます。name='post_delete')]views.pygeneric.ListView、generic.UpdateView、generic.DeleteViewを使い、form_valid()やdelete()メソッドを上書きしています。f'記事を作成しました。f'記事を更新しました。f'記事を削除しました。メッセージ)のように使います。これにより、そのユーザーへの通知メッセージが保存され、テンプレートでそれを取り出すのが一般的な流れです。=という記述が幾つかあります。redirect(self.get_success_url())としてリダイレクト先に遷移させたいのですが、get_success_url()を呼び出すためにはself.objectとしてモデルインスタンスを格納しておく必要があるのです。f'記事を更新しました。pk:{self.object.pk}'のようにいちいちself.objectをつけるのは面倒なので、postという変数名でも同様に扱えるようにしています。notificationを×押下で閉じれるように。}</script></body></html>Bulmaのスターターテンプレートを基に、ナビバーと、フラッシュメッセージをNotificationというBulmaのウィジェットで表示しています。スマホ等のサイズでナビバーを開閉、Notificationを×閉じするためのJavaScriptも書いています。フラッシュメッセージを取り出しているのは次の部分です。%}}テンプレートへは、messagesという名前でメッセージオブジェクトの詰まったリストが返されます。場合によっては、メッセージは1つだけではなく複数になることもあります。%}としてメッセージを格納していきます。type="button"></button>として×閉じ部分を作っています。実際に閉じる処理は、次の部分です。notificationを×押下で閉じれるように。is-info">にis-hiddenを足して見えなくしているだけです。class="box">で各記事をカッコよく線で囲んで、10列をタイトル部分、残り2列を更新・削除ボタン部分にしています。%}BulmaのMessageウィジェットで表示するBulmaにはMessageというウィジェットもあり、こちらも中々に見た目が良いです。Messageを×押下で閉じれるように。}メッセージ毎にNotificationを作るメッセージ1つにつきNotificationを作りたいこともあるかもしれません。これは簡単で、テンプレートの記述を次のようにします。for毎にNotificationを作る感じですね。%}ビューでは、例えば次のように。messages.info()を複数回呼ぶだけですね。f'記事を作成しました。redirect(self.get_success_url())もしかしたら、警告やエラーなどの他のメッセージを、色も別にして表示したいかもしれません。テンプレートを、次のようにします。}}とするとinfoという文字列が取得できます。ビューで呼び出した関数の種類によってタグ的なものがつけられるということですね。is-danger等の色が使えます。実際のビューのコードも見てみましょう。f'記事を作成しました。successに関してはDjangoにもBulmaにもあるのでそのまま使えます。extra_tags='danger')のようにして、extra_tagsにそれを指定することで実現できます。PostsBulmaでよく使うJavaScriptコードCSSフレームワークBulmaにはjsファイルは付属しません。幾つかの処理は自分でJavaScriptを書く必要があります。使うものを、今回紹介していきます。JavaScript予約サイトの、予約送信ページDjangoで、シンプルな予約サイトの作成シリーズの1つです。前回は予約状況のカレンダーページを作りましたので、今回は実際に予約をするためのページ・機能を作っていきます。ここの記事が一番近いかと思って質問しました。