ヒロヤンです!!Python(django)とJavaScript(jQUery)で開発を行っています。
今回はプロフィールを作成した際に、誕生日を入力するフォームを作成したのですが、その時に効果的な方法(カレンダー、プルダウン)の方法を3パターン紹介します。
こんな人向けにこの記事を書いています。
・動的なプロフィールの誕生日入力フォーマットを作りたい
・JQueryの使い方を理解している
・DjangoのMVCモデルの基礎を理解している
コンテンツ
方法は3パターン
方法はこれから紹介する3パターン以外にもたくさんあるのですが、モダンで手軽にパパッと作成できるものを絞った結果が3パターンになりまして、それを紹介します。どれもすぐに作成できます。
・HTMLのinputタグを使う方法
・jQueryUIという便利なモジュールを使う方法
・djangoのformのウィジェットを使う方法
どれも一長一短があり、人によっては意図する用途には使えないものありますので、それも含めた解説をしていきます。
3つの方法
1つめ：HTML5のinputタグを使う方法
動作環境:HTML5
これがユーザビリティの点では一番動作の負担もなくシンプルではないでしょうか。何よりプログラミングをする必要がありません。
↓
上記のコードはこちらになります。
sample.html
|
1 |
<input type="date"> |
はい！これだけです。たった一行これだけで上記カレンダーの記号をクリックするだけで開封され、セットも容易にできます。
しかしこのinputタグには重大な欠陥が・・・
はい、なんとIE(internet explorer)とSafariの両ブラウザでは使えません。詳細はこちらから。
ぐぬぬ・・・滅びてしまえよ、IE!!(ごめん)
・とにかくシンプルで簡単
・IEとSafariで使用できない
2つめ：jQueryUIにあるDatepickerという日付選択モジュールを利用
動的なカレンダーの中で一番メジャーで使い易いものかもしれません。
仕上がりイメージはこのようになります。
jQueryの使い方を理解している人ならなんなく作成できます。
↓
人目見ても非常にユーザビリティの高いカレンダーですね。
それでは以下に紹介します。
sample.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang=ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"> </head> <body> <p>Birthday</p> <input type="text" id="datepicker"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="/static/アプリ名/ディレクトリ名/user_add.js"></script> </body> </html> |
jqueryとcssはCDNにしています。
そして、user_add.jsには以下のようにコードを書きます
|
1 |
$("#datepicker").datepicker(); |
これだけ。シンプルイズベストです。
・動的なカレンダーで見易い
・強いて言うならファイル数とコード数が増える
3つめ番外編：djangoのformのウィジェットを使う方法
djangoのformsに備え付けの方法です。
先に紹介した2つの動的なカレンダーではありませんが、djangoで使える一番シンプルで確実な方法ではないでしょうか。
↓
sample.html
|
1 |
{{ form.birthday }} |
views.py
|
1 2 3 4 5 6 |
from .forms import AddUserForm def user_add(request): form = AddUserForm() return render(request, 'アプリ名/ディレクトリ名/sample.html', context={'form': form}) |
1行目でviewsと同じディレクトリにある、forms.pyの中のAddUserFormというクラスを使用することを書いています。
user_add関数ではsample.htmlにdjangoのテンプレートタグ({{ form.birthday}})を使用できるように、contextを返してあげます。
forms.py
|
1 2 3 4 |
from django.contrib.admin.widgets import AdminDateWidget class AddUserForm(forms.Form): birthday = forms.DateField(widget=forms.SelectDateWidget()) |
1行目ではAdminDateWidgetという便利なウィジェット機能を使うためのコードを書きます。
AddUserForm関数では今回該当のbirthdayというフィールドを用意するためのコードを書きます。
これでsample.html側でもうまく挙動をするようになったと思います。
ちなみにこちらの方法だとカレンダータイプではなくプルダウンでの選択になります。
・djangoの内部関数を使用できる
・先の2つに比べると動的ではない
最後に
いかがでしたでしょうか。
今回はカレンダーのフォームを紹介しました。
どれも一長一短がありますが参考にすべきは昨今のUIのトレンドを作り上げている、メルカリ、Facebook、Twitterなどではないでしょうか。
それらのアプリがユーザープロフィールの誕生日設定をどのように作っているか参考にすることが大切です。
1のhtmlの場合だと、例えばどのブラウザのユーザーが来たかどうかをユーザーエージェントによって判定し、IEとSafariの場合はカレンダーを使わずにプルダウンとして魅せるなどの組み合わせも実現することができます。
自分にとって一番用途にあった使い易いものを組み合わせて使用してみて下さい。
プログラミング学習を効率良く進めるには…
私ヒロヤンがプログラミングを始めた頃は以下のような感じでした。
何から手をつけていいのか、わからない。
プログラミングを始めてみたけど、エラーが解決できない。
そしてネットで調べていくうちに膨大な時間が過ぎていきました。
私ヒロヤンの実体験より、プログラミングを効率的に学ぶために大切なことは以下のことだと考えています。
1. いつまでもダラダラとやらないで、目標を決定して短期集中する
2. マンツーマンで、わからない箇所は直ぐに質問をして即レスをもらう
.proでは私ヒロヤンが学習してきたプログラミング経験0からのpython/django、その他webサイト・サービス開発のコースが用意されています。
カウンセリング自体は無料なので話を聞いてみるだけでもいかがでしょうか？
また以下のリンク先ではdjangoを教えてくれるスクールをまとめ紹介しています。
コメントを残す