【django開発】プロフィールの日付(誕生日)入力の3パターン作成方法を公開

ヒロヤンです!!Python(django)とJavaScript(jQUery)で開発を行っています。

今回はプロフィールを作成した際に、誕生日を入力するフォームを作成したのですが、その時に効果的な方法(カレンダー、プルダウン)の方法を3パターン紹介します。

こんな人向けにこの記事を書いています。

読んで欲しい人

・動的なプロフィールの誕生日入力フォーマットを作りたい

・JQueryの使い方を理解している

・DjangoのMVCモデルの基礎を理解している

方法は3パターン

方法はこれから紹介する3パターン以外にもたくさんあるのですが、モダンで手軽にパパッと作成できるものを絞った結果が3パターンになりまして、それを紹介します。どれもすぐに作成できます。

・HTMLのinputタグを使う方法

・jQueryUIという便利なモジュールを使う方法

・djangoのformのウィジェットを使う方法

どれも一長一短があり、人によっては意図する用途には使えないものありますので、それも含めた解説をしていきます。

3つの方法

1つめ:HTML5のinputタグを使う方法

動作環境:HTML5

これがユーザビリティの点では一番動作の負担もなくシンプルではないでしょうか。何よりプログラミングをする必要がありません。

上記のコードはこちらになります。

sample.html

はい!これだけです。たった一行これだけで上記カレンダーの記号をクリックするだけで開封され、セットも容易にできます。

しかしこのinputタグには重大な欠陥が・・・

はい、なんとIE(internet explorer)とSafariの両ブラウザでは使えません。詳細はこちらから。

ぐぬぬ・・・滅びてしまえよ、IE!!(ごめん)

メリット

・とにかくシンプルで簡単

デメリット

・IEとSafariで使用できない

2つめ:jQueryUIにあるDatepickerという日付選択モジュールを利用

動的なカレンダーの中で一番メジャーで使い易いものかもしれません。

仕上がりイメージはこのようになります。

jQueryの使い方を理解している人ならなんなく作成できます。

人目見ても非常にユーザビリティの高いカレンダーですね。

それでは以下に紹介します。

sample.html

jqueryとcssはCDNにしています。

そして、user_add.jsには以下のようにコードを書きます

これだけ。シンプルイズベストです。

メリット

・動的なカレンダーで見易い

デメリット

・強いて言うならファイル数とコード数が増える

3つめ番外編:djangoのformのウィジェットを使う方法

djangoのformsに備え付けの方法です。

先に紹介した2つの動的なカレンダーではありませんが、djangoで使える一番シンプルで確実な方法ではないでしょうか。

sample.html

views.py

1行目でviewsと同じディレクトリにある、forms.pyの中のAddUserFormというクラスを使用することを書いています。

user_add関数ではsample.htmlにdjangoのテンプレートタグ({{ form.birthday}})を使用できるように、contextを返してあげます。

forms.py

1行目ではAdminDateWidgetという便利なウィジェット機能を使うためのコードを書きます。

AddUserForm関数では今回該当のbirthdayというフィールドを用意するためのコードを書きます。

これでsample.html側でもうまく挙動をするようになったと思います。

ちなみにこちらの方法だとカレンダータイプではなくプルダウンでの選択になります。

メリット

・djangoの内部関数を使用できる

デメリット

・先の2つに比べると動的ではない

最後に

いかがでしたでしょうか。

今回はカレンダーのフォームを紹介しました。

どれも一長一短がありますが参考にすべきは昨今のUIのトレンドを作り上げている、メルカリ、Facebook、Twitterなどではないでしょうか。

それらのアプリがユーザープロフィールの誕生日設定をどのように作っているか参考にすることが大切です。

1のhtmlの場合だと、例えばどのブラウザのユーザーが来たかどうかをユーザーエージェントによって判定し、IEとSafariの場合はカレンダーを使わずにプルダウンとして魅せるなどの組み合わせも実現することができます。

自分にとって一番用途にあった使い易いものを組み合わせて使用してみて下さい。


スクールを利用して本格的に学ぶ

いかがでしたでしょうか?

10人中9人が挫折すると言われるプログラミングを、ヒロヤンも実はプログラミングスクールで学習をしてきたからで、結果、今はPythonエンジニアとして働いています。

挫折率が高いプログラミングこそお金を払ってメンターを付けて、道を見失わないように環境を構築する必要があるのではないでしょうか。

これはダイエットで自分一人では痩せられないけど、トレーナーを付けて否が応でもせざるを得ない環境を作ると一緒ですね。

ヒロヤンもプログラミング勉強開始直後はあれこれ悩みましたが、悩むよりも手っ取り早くスクールに登録した方が最短ルートで勉強できるのではないかと考え、結果挫折せずに今に至っています。

今なら無料でキャリアカウンセリングを行っているCodeCampのPythonコースのようなプログラミングスクールもありますのでこれを機会に是非カウンセリングだけでも受けてみてはいかがでしょうか?

CodeCampで無料のカウンセリング

上記リンク先から無料相談ができます。

またこちら(↓)ではPython専用のプログラミングスクールをまとめ紹介しています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です