自動化無しに生活無し

WEBとかAIとかLinux関係をひたすら書く備忘録系ブログ

  • 【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 ...
  • 【Restful】Django+Reactビギナーが40分で掲示板アプリ(SPA)を作る方法【axios】

    『Djangoビギナーが40分で掲示板アプリを作る方法 』を終え、DjangoとReactを組み合わせ、SPAを作りたいと思った方向け。 40分はあくまでも目安なので、ご了承ください。 内部構造に関しては、『DjangoとReactを組み合わせる方法論と問題の考察 』に解説がある。 2023年5月3日現在、編集機能の実装を考慮中。近日追記予定。 流れ React、Djangoの各プロジェクトを作る Djangoの ...
  • DjangoとReactのTodoアプリ(SPA)を解析する

    DjangoとReactを組み合わせる方法論と問題の考察の続き。 コードを書いてみたので、それを元にわかった事をまとめていく。間違いが有るかもしれないので、ご注意をば。 動作原理と全体像は↑の記事で解説しているので、本記事では割愛。コードの意味をまとめていく。 サーバーサイド(Django) config/setttings.py 編集した箇所のみ掲載 INSTALLED_APPS = [ "todo", 'corsheaders', 'rest_framework', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', ] MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', 'corsheaders.middleware.CorsMiddleware', ] CORS_ORIGIN_WHITELIST = [ 'http://localhost:3000' ] アプリ、django-cors- ...
  • 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', start : '2023-04-09T12:30:00', allDay : false // will make the time show } ] }); //カレンダー ...
  • 【Django】Stripeでサブスクリプション決済を行う

    1回限りの決済を行いたい場合は、下記。 【Stripe】Djangoにクレジットカード決済機能を実装させる 対象読者は、カスタムユーザーモデルと認証機能(django-allauthも可)をすでに実装済みとする。 参照: 【Django】allauthとカスタムユーザーモデルを実装した簡易掲示板を作る【AbstrastBaseUser】 Stripeにてサブスクリプション商品を作る まず、Stripeにてサブ ...
  • 【django】summernoteを使用してwysiwygエディタを表示させる【マークダウンよりも簡単】

    wysiwygエディタとは? このようなエディタのことである。 入力した内容と、ページに表示される内容が全く同一。 MSwordのようなエディタをウェブ上で扱うことができる。(.docxファイルがウェブ上で扱えるわけではないので注意。) 今回も40分DjangoをベースとしてDjango-summernoteを実装していく。 Djangoでwysiwygエディタを使うならdjango−summernote 以 ...
  • inputタグのtype='file'で画像のサムネイルを表示させる

    fontawesomeを使用しているので、アイコンの表示は別途CDNをインストールしておいてほしい。 ソースコード HTML <label class="image_input_area"> <input class="image_input" type="file" name="icon" accept="image/*"> <div class="image_input_icon"><i class="fas fa-image"></i></div> <img class="image_input_preview" src="" alt=""> </label> CSS .image_input_area { display:inline-block; border:dashed 0.2rem var(--gray); width:5rem; height:5rem; position:relative; cursor:pointer; } .image_input{ display:none; } .image_input_preview{ width:100%; height:100%;position:absolute; } .image_input_icon{ width:100%; height:100%;position:absolute; } .image_input_icon i{ font-size:2rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } JavaScript(jQuery) $(".image_input").change(function() { const label = $(this).parent("label"); const file = $(this).prop("files")[0]; // 画像以外は処理を停止 if (! file.type.match("image.*")) { $(this).val(""); return; } // 画像表示 const reader = new FileReader(); reader.onload = function() { label.children(".image_input_preview").prop("src", reader.result ); } reader.readAsDataURL(file); }); 【別解】JavaScript(バニラ) window.addEventListener("load" , function (){ document.addEventListener("change", (event) => { // type="file ...