自動化無しに生活無し

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

  • DjangoでBootstrapを使う【pip install django-bootstrap-form】

    DjangoのBootstrap関係のライブラリは混在しているので、仕事で使うものを覚書に記録。 pip install django-bootstrap-form をインストールして、INSTALLED_APPSに "bootstrapform" を追加する。 テンプレートで、 {% load bootstrap %} {{ form|bootstrap }} として呼び出す。 ...
  • 【Django】EC2インスタンスへgitを使ってデプロイする

    scpによるファイルアップロードの場合、ローカルで削除した差分ファイルがインスタンス上に取り残されてしまう。 可能であれば、gitを使ったデプロイができるようになっておきたい。 手順 インスタンスにリモートリポジトリを作る ローカルにリポジトリを作る リモートリポジトリとローカルリポジトリをつなげる SSHの設定に.pemファイルを登録する プッシュする インスタンスにリモートリポジトリを作る インスタンスのデフォ ...
  • Django-summernoteでアップロード上限を設定する

    デフォルトで、Django-summernoteにアップロードできるファイルサイズには上限が設定されている。 こちらで上限を開放できる UPLOAD_SIZE = 200 * 1000 * 1000 SUMMERNOTE_CONFIG = { 'attachment_filesize_limit': UPLOAD_SIZE, 'summernote': { 'width': '100%', 'height': '480', } } 参照: https://stackoverflow.com/questions/74588821/how-to-change-file-upload-size-limit-django-summernote ...
  • Django Summernoteを使ったブログで、本文の画像を記事のサムネイルにするには【BeautifulSoup使用】

    Django-summernoteを使ったブログサイトを作るとき。 ブログの記事の一覧表示にはサムネイルの表示が必要になる。 しかし、記事にサムネイル専用のフィールドを割り当ててしまうと、本文の画像とかぶってしまう(サムネイル用の画像を指定した後、記事にも同じ画像を貼り付けるという二度手間) そこで、記事の一番最初に指定された画像をサムネイルとして使えるよう、モデルメソッドを作った。 BeautifulS ...
  • 【Django】2次元配列をCSVファイルとしてダウロードできるようにする【HttpResponse】

    • 作成日時:
    • 最終更新日時:
    • Categories: サーバーサイド
    • Tags: django
    from django.views import View from django.http import HttpResponse import csv class DownloadView(View): def get(self, request, *args, **kwargs): data = [ [ 10,20,30 ], [ 10,20,30 ], [ 10,20,30 ], ] # レスポンスとして返すCSVファイル名 file_name = 'data.csv' # HttpResponseを使ってCSVのデータを書き込む response = HttpResponse(content_type='text/csv') # ファイル名を指定 response['Content-Disposition'] = f"attachment; filename={file_name}" # HttpResponseにCSVファイルデータを書き込む writer = csv.writer(response) writer.writerows(data) return response download = DownloadView.as_view() HttpResponseはこのようにcsv.writer()の引数に指定することができる。 これにより、配列のデータをそのままCSV ...
  • 【Ubuntu】Localをインストールする【WordPressのローカル環境構築】

    LinuxへのWordpressの開発環境の構築はdockerでもできるが、ややdockerの知識が必要。 そこで、簡単にWordpressの開発環境の構築ができるlocalを使用する。 インストール https://localwp.com/releases/ 上記ページから各OSごとのインストーラーが用意されている。 今回はUbuntuなので、.debファイルをDLする。 DL後、下記コマンドを実行 sudo apt install ~/Downloads/local-6.7.2-linux.deb インストール後 規約に同意する。 バツボタン、Nothank ...
  • poetryなしでDjangoをRender.comへデプロイする【Herokuの代替クラウド、アカウント作成から解説】

    2022年11月28日、Herokuのサービスが完全無料で利用できなくなった。 そこで、代替のクラウドクラウドサービスとして最有力候補のRender.comを使用する。 90日間しかDBは持たないとは言え、就活用のポートフォリオとしてウェブアプリを公開するには十分かと思われる。 本記事では、DjangoをRender.comへデプロイする方法を解説する。 Render.comの基本情報 箇条書きで並べる。最 ...
  • Djangoでfullcalendar.jsを使いTodoアプリを作る

    fullcalendar.jsを早速実践運用してみた。 まだまだ足りない箇所は有るかもしれないが、ここから徐々に発展させ、ゆくゆくはReactと組み合わせてSPAを作りたいところだ。 詳細はソースコードを見ていただきたい。これまでのDjangoとほとんど変わりはないので、記事内ではfullcalendar.jsの部分だけまとめる。 テンプレート index.html {% load static %} <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>To ...
  • DjangoMessageFrameworkにJavaScriptとCSSを当てる【ボタンを押して消せるようにする】

    DjangoMessageFrameworkは投稿完了した旨やエラーの理由をクライアント側に表示することができるが、表示させっぱなしになるので少々鬱陶しく感じることもある。 そこで5秒経ったら自動的に消すように仕立てたり、バツボタンを押して消せるように仕立てた。 さらに、fontawesomeを使用している。 ソースコード テンプレート <div class="notify_message_area"> {% for message in messages %} <div class="notify_message notify_message_{{ message.tags }}"> <div class="notify_message_content">{{ message }}</div> <div class="notify_message_delete"><i class="fas fa-times"></i></div> </div> {% endfor %} </div> JavaScript(jQuery) //Django ...
  • 【JavaScriptカレンダー】fullcalendarを使ってみる【ライブラリ】

    JavaScriptを使ってカレンダーを表示する。 基本のカレンダー表示 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.6/index.global.min.js"></script> <script> //ページが読まれたときに下記を実行 document.addEventListener('DOMContentLoaded', function() { //カレンダーの要素を取得 const calendarEl = document.getElementById('calendar'); // オブジェクトを作成 FullCalendar.Calendar() を実行。引数として要素と表示するカレンダーの設定 const calendar = new FullCalendar.Calendar(calendarEl, { initialView: 'dayGridMonth', events: [ { title : 'イベント1', start : '2023-05-01' }, { title : 'イベント2', start : '2023-05-05', end : '2023-05-07' }, { title : 'イベント3' ...