自動化無しに生活無し

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

先日の記事にて、DjangoでAjax(jQuery)を実装する方法を解説した。 ただ、DjangoRESTFrameworkを使用すれば、さらに少ないコードでAjaxを実装することができる。 RestfulAPI、Django REST Frameworkとは RestfulAPIとは、HTTPリクエストに応じてサーバーの処理を切り分けることができるAPIのこと。 HTTPリクエストのヘッダ部には、リクエスト送信 ...

Djangoで画像やファイルをアップロードする方法をまとめる。 40分Djangoを理解している方向け。 流れ 必要なライブラリのインストール アプリの作成 settings.pyの編集 urls.pyの編集 models.pyでフィールドの定義 forms.pyでフォームを作る views.pyで受け取り処理 templatesにフォームを設置 マイグレーション 開発用サーバーの立ち上げ 必要なライブラリのインストール pip ...

以前、Djangoで開発中に初期データを入力する方法をしたが、Djangoではその逆も可能。 つまり、DBに既に格納されているデータをダンプ(バックアップ)する事ができる。それがこれ python3 manage.py dumpdata [アプリ名] > [アプリ名]/fixture/data.json 実際にやってみるとこうなる。 json形式でダンプされ、そのままでは改行が施されていないので、}},の次に改行を設置する。vimなら下記正規表現を実行 s/}},/}},\r/g 整 ...

Heroku postgresの実装方法 プロジェクトのResourcesからHeroku Postgresを指定。 続いて、Submit Order Formを指定する。プランはHobbyを選択。 Add-onsのHerokuPostgresのリンクをクリック、SettingsタブのDatabaseCredentialsのView Credentialsをクリック データベース名などの認証情報が表示される。これをプロジェクトの設定 ...

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

また、checkboxとtransitionのコンボネタ。それでyoutubeとかでよくあるアコーディオンを簡単に作ることができる。 アコーディオンの作り方 まず、HTML5。 <input id="acd_1" class="chkbox" type="checkbox"> <label class="acd_n_button" for="acd_1"> <div class="acd_n_button_title">HTML+CSS</div> </label> <div class="acd_n_body"> <ul> <li>ここに項目を記述する</li> <li>ここに項目を記述する</li> <li>ここに項目を記述する</li> </ul> <p&g ...

ウェブアプリを作って、ユーザーに何かを文字列を入力させる時、大抵表記ゆれが起こる。 例えば、JAと農業協同組合と農協、ラズパイとラズベリーパイとRaspberry Piとraspberry piなど。 このような表記ゆれを一度でも許すと、検索で引っかからなくなる。しかし、SELECTタグを使うと、項目が増えた時、選択に時間がかかりすぎる。 そこで、文字入力(入力補正)と選択が同時にできるオートコンプリートを ...

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が最新である、 ...

背景色と文字色が近い場合、文字の縁取りをすることで、視認性を上げることができる。 あまり使うことは無いが、一応備忘録として。 縁取りの作り方 使用するのはtext-shadowだけ。下記のコードを任意の要素に指定すれば良いだけ。 text-shadow: skyblue 1px 1px 0, skyblue -1px -1px 0, skyblue -1px 1px 0, skyblue 1px -1px 0, skyblue 0px 1px 0, skyblue 0-1px 0, skyblue -1px 0 0, skyblue 1px 0 0; こんなふうに縁取りができる。 2pxの縁取りがしたい場合はこっち。 text-shadow: skyblue 2px 0px, skyblue -2px 0px, skyblue 0px -2px, skyblue 0px 2px, skyblue 2px 2px , skyblue -2px 2px, skyblue 2px -2px, skyblue -2px ...