自動化無しに生活無し

WEB開発関係を中心に備忘録をまとめています

初心者向け

  • Vue.jsでTODOを作る【CRUD】
    Codepenに掲載されていた偉い人のコードを元に、Todoを作ってみた。変数名がベストプラクティスとは異なる可能性があるため、あくまでもvue.jsの全体の機能確認用としている。 ソースコード まずはindex.html <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.jsでTodo</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.2.1/vue-router.js"></script> <script src="script.js"></script> </head> <body> <header class="text-center" style="background:orange;color:white;"> <h1>Vue.jsでTodo</h1 ...
    続きを読む

  • Vue.jsでモーダルダイアログを作る
    jQueryであれば、モーダルダイアログを実装する時、対象の要素(DOM)を指定して、.show()と.hide()を行えば良いのでそれほど難しくはないが、vue.jsの場合はそうは行かない。 本記事ではvue.jsを使用したモーダルダイアログの実装方法をまとめる。 ソースコード 今回はモーダルダイアログの範囲外をクリックしたら閉じるように仕立てた。 まず、HTML。開発版のvue.jsのCDNを指定して ...
    続きを読む

  • Django Templates Language(DTL)でincludeを実行する時に引数も与える
    Djangoでテンプレートファイルを分離させ、includeするときがある。複数の箇所で同じフォームを表示したりする時がそうだ。 ただ、フォームのIDをそれぞれの箇所で別々とする場合、引数を指定する必要がある。 結論 結論から言うと、こうなる。 {% include "[パス]" with [引数名]=[値] %} includeするhtmlのパスを指定した後、withを指定することで引数の指定が可能になる。指定した引 ...
    続きを読む

  • 【日付入力】flatpickrの実装方法(ロケール日本語化、日時入力対応化)
    ウェブアプリを開発していると、避けて通ることができない日付もしくは日時入力。HTMLのSELECTタグを使用しても良いが、うるう年に対応させないといけないし、何よりユーザビリティに問題がある。 そんな時、flatpickrを実装すれば、日時入力が非常に簡単になる。しかもjQueryに依存していないので、流行のvue.jsなどを使いたい場合にも有効。 flatpickrの実装方法 まずHTML。flatp ...
    続きを読む

  • Djangoで多対多のリレーションの構造と作り方、テンプレートで表示する方法【ManyToManyField】
    多対多のリレーションの作り方 多対多のモデルは以下のように作る。 from django.db import models class Allergy(models.Model): name = models.CharField(verbose_name="アレルギー名",max_length=10) def __str__(self): return self.name class Menu(models.Model): name = models.CharField(verbose_name="品名",max_length=20) breakfast = models.BooleanField(verbose_n ...
    続きを読む

  • DjangoでYou are Trying to add a non-nullable fieldと表示されたときの対策【makemigrations】
    Djangoのモデルにフィールドを追加して、さあマイグレーションしようとすると、こんな表示がされることがある。 これはなんなのか、対策も兼ねて解説する。 この警告文の解説 要するに、既にレコードが存在する状態で、NULL禁止かつデフォルト値指定なしのフィールドを追加するとこうなる。 デフォルト指定していないので、既存のレコードにはNULL禁止であるにも関わらず、NULLが入ってしまう。そこで既存のレコード ...
    続きを読む

  • DjangoでHelloWorld【HttpResponse及びレンダリング】
    Djangoのハローワールドは、やり方が何通りもある。 普通のPythonであれば、 print("HelloWorld") ほぼこの一通りであるが、Djangoの場合は主にHttpResponseの他に、テンプレートをレンダリングして返す方法がある。 一般的な開発においてはテンプレートのレンダリングが主流である。しかし、Django初心者、フレームワーク未経験者には難度が高い。故に、本記事では難度の低いHttpResponseから解説する ...
    続きを読む

  • Djangoでスペース区切りでOR検索、AND検索をする方法【django.db.models.Q】
    普通、検索エンジンで検索する時、こう検索するであろう。 Django UUIDFields 使い方 Djangoのモデルオブジェクトで検索しようとすると、こうなる。 Model.objects.filter(title__contains="Django UUIDFields 使い方") これでは検索結果が出てこない。検索時にスペースも文字列の1つとして考えるからだ(『Django UUIDFields 使い方』を含むタイトルを表示) そこで、スペース区切りのキーワード検索をするときは、Qクラスを使用する。 40分Djangoをベースに検索できるように改良す ...
    続きを読む

  • Djangoのマイグレーションのエラー時の対処法
    Djangoで開発を進めている時、マイグレーションのエラーにぶち当たるときがあるが、大抵はmigrationsディレクトリを編集していけばいいだけなので、それほど難しいものではない。 本記事ではmigrationsディレクトリ内のファイル編集を行うことで、マイグレーションのエラー時の対処法をまとめる。 サンプルコード まず、マイグレーションエラーの再現をするために、サンプルのコードを下記に公開した。プロ ...
    続きを読む

  • fontawesomeの実装と利用例のまとめ
    fontawesomeを使用することで、簡単なアイコンをページ内に使用することができる。無料の場合は制限があるが、CDNをheadタグ内に書き込めばいいので実装は簡単。 実装方法 headタグ内に下記を追加する。 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> これだけでOK。 fontawesome CDN などで検索してくると、下記サイトが出てくるので、バージョンをチェックして最新版をコピペする。 https://fontawesome.com/v5.15/how-to-use/customizing-wordpress/snippets/setup-cdn-webfont#load-all-styles 追記 2022年9月現在、fontawesome 6.20が最新である、 ...
    続きを読む