自動化無しに生活無し

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

  • CSS3でiOS風のトグルスイッチを作る方法【transition+checkbox】

    CSS3で実装されたtransitionと兄弟要素のセレクタを組み合わせることでiOS風のトグルスイッチは簡単に作れる。 何も装飾を施していないinputタグのチェックボックスは小さくて見づらいが、この装飾を施すことで、視覚的にも押すことができるスイッチであると認識できるし、押せる範囲が広がる。 iOS風のトグルスイッチの作り方 まずはHTML5から。 <div class="ui_demo_area"> <input id="ios_chk_01" class="ui20-input_chk" type="checkbox"><label class="ui20-ios_conf" for="ios_chk_01"></label> </div> 続いて、CSS3。 /* ios button */ .ui20-input_chk { display:none; } ...
  • SQLiteの操作方法【テーブル一覧表示、SQLなど】

    インストールと基本操作 Ubuntuであればaptコマンドで簡単にインストールできる。 sudo apt install sqlite3 ファイルの閲覧はsqlite3コマンドで実行できる。対象のsqlite3ファイルを指定するだけ。 sqlite3 db.sqlite3 テーブル一覧表示 テーブル一覧表示。 .table 基本的なSQL文 SELECT文。指定したテーブルを参照する。 SELECT カラム名 FROM テーブル名 INSERT文。指定したレコードを追加する。文字列型はダブルクオーテーションでくくる。数値 ...
  • DjangoをDEBUG=FalseでHerokuにデプロイする方法

    プロジェクトのディレクトリ構造は、『現場で使えるDjangoの教科書 基礎編』に準拠している。 requirements.txt もし、仮想環境を使用していない場合、virtualenvを使って必要なライブラリをpipコマンドにてインストールする。 -- HerokuCLIをインストール Herokuではherokuコマンドを実行して、事前にログインをした上でデプロイを行う。下記からインストールする。 https://devcenter.heroku.com/ja/articles/heroku-cli herokuコマンドを実行して、デプロ ...
  • DjangoをLinux(Ubuntu)サーバーにデプロイする方法【Nginx+PostgreSQL】

    DjangoをLinuxサーバーにデプロイできれば、クラウドとは違ってハードウェアの性能を余すこと無く使うことができる。 高度なAIを運用したり、それなりにセキュリティが求められるウェブアプリを運用する予定であれば実機のLinuxサーバーにデプロイしたほうが良い。 デプロイまでの流れ PostgreSQLとNginxのインストール settings.pyの修正 ホームディレクトリにプロジェクト一式を設置 必要 ...
  • Djangoで開発中、データベースへ初期データを入力する【バックアップしたデータをloaddataコマンドでリストア】

    Djangoで開発中にテストしたい時、デプロイ後に初期データを突っ込んで即公開したい時、どうしてもデータの入力作業が出てくる。 Seleniumで入力作業を自動化する方法もあるが、わざわざそんなことをしなくても初期データを突っ込む方法がある。それが python3 manage.py loaddata bbs/fixture/data.json このようにアプリディレクトリ内にfixtureディレクトリを作り、jsonのデータを指定して、リストアする models.pyに基づいたjsonファ ...
  • Djangoで『このページを表示するにはフォームデータを..』と言われたときの対処法

    『このページを表示するにはフォームデータを再度送信する必要があります。フォームデータを再送信すると以前実行した検索、投稿や注文などの処理が繰り返されます。』 POST文を実行した直後に更新ボタンを押すと、こんなふうに表示される時。こういうときはリダイレクトすればOK。 views.pyを修正する redirectをimport。POST文のreturnにredirect関数を返せばいいだけ。 from django.shortcuts import redirect #P ...
  • Djangoで数値のカンマ区切りを実装させる

    在庫とかお金とか扱うウェブアプリだとカンマ区切りは必須。 JSに任せてもいいけど、結局正規表現になる上にユーザーに負担を強いるのはどうかと。 ということでDjango側でカンマ区切りを簡単に実装させる。 settings.pyの追記 INSTALLED_APPSに以下を追加。 'django.contrib.humanize', 下記をINSTALLED_APPSの上に追加。これで3桁区切りになる。 NUMBER_GROUPING = 3 3桁区切りで表示させたいテンプレートの追記 htmlの冒 ...
  • 【メール認証】Django-allauthの実装方法とテンプレート編集【ID認証】

    ここに、Django-allauthの実装方法をまとめる。主にsettings.pyを操作することになる。 また、allauth付属のテンプレートではHTMLのみなのでテンプレート及びCSSによる装飾も付せて説明する。 はじめに django-allauthは外部ライブラリなので、pipコマンドでインストールする必要がある。 pip install django-allauth ユーザーIDとパスワードを使用した認証方法の実装 ユーザーIDとパスワードを ...
  • DjangoにPythonスクレイピングを実装した簡易検索エンジンの作り方【BeautifulSoup】

    DjangoにPythonスクレイピングを実装させるだけで簡易的な検索エンジンを作ることができる。 しかも、モデルの定義は不要でビューとテンプレートだけなので初心者の演習におすすめ。 流れ Djangoの環境構築、プロジェクトの作成等は割愛します。 アプリを作る urls.pyを修正 views.pyを作る テンプレートを作る スクレイピングのコードを作る views.pyを修正 テンプレートを修正 開発サーバーを起動 ...
  • JavaScriptほぼ不使用のサイトを作ってGoogle PageSpeed Insightsでスコアを調べてみた

    先日作った自分のサイトなんですけどね。使っているJavaScriptはせいぜいAnalyticsとAdsenceぐらいです。 パソコンのスコア ご覧ください。パソコンのスコア、99点です。直すべきは画像の圧縮とBootstrapの読み込み場所ぐらいでしょう。 改善できる項目、『サーバーの応答時間を速くしてください』….。Netlifyさんなんとかできませんか?とは言え、無料だからやむなし。 ...