自動化無しに生活無し

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

  • 【Django】getlistを使って複数枚の画像をまとめて送信する【サムネイルが表示される専用フォームあり】

    以前解説した、 inputタグのtype=‘file’で画像のサムネイルを表示させる を使って、複数の画像をgetlistを使ってアップロードできるように仕立てる。 通販サイトでは、1つの商品に複数枚の画像がセットされることが多いので、そちらに対応させる。 解説 近日追記予定 ソースコード https://github.com/seiya0723/django-multisend-image 関連記事 inputタグのtype=‘file’で画像のサムネイルを表示さ ...
  • 【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- ...
  • 【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 } ] }); //カレンダー ...
  • 【LPIC】Level1で出てくるコマンドと用語の一覧

    順不同。LPICレベル1で出たコマンドと用語の簡単な説明を一覧にしておく。 コマンド コマンド 簡単な説明 set シェル変数やシェルオプションを設定・表示するコマンド env 環境変数を表示するコマンド history コマンド履歴を表示するコマンド mkdir ディレクトリを作るコマンド ls カレントディレクトリのファイル、ディレクトリを表示するコマンド(list segmentsの略) man マニュアルを表示するコマンド whoami ユーザー名を表示するコマンド pwd ...
  • 【Django】GitとSSHを使ってUbuntuへデプロイする(virtualenvでPythonライブラリの管理)【hookでmigrateコマンドも】

    要求される知識が非常に多いため、下記対象読者に該当する方のみ、閲覧を推奨します。 対象読者 Linuxのコマンドがわかる CUIエディタ(nanoもしくはvim)が扱える すでにDjangoプロジェクトをUbuntuへデプロイをしたことがある gitを使ったことがある(ステージング→コミット→プッシュができればOK) SSHでUbuntuへリモートログインをしたことがある(パスワード認証ができればOK) vir ...
  • react-route-domの使い方【Reactでルーティング】

    ページが複数あるサイトをReactで作る場合、react-route-domでルーティングを行うと良いだろう。 npm install react-route-dom 使い方 コンポーネントを作る src/components/に以下ファイルを配置。 Home.jsx Portfolio.jsx Profile.jsx Home.jsx import { Link } from "react-router-dom"; export const Home = () => { return ( <> <div>ここはホームです</div> <Link to={`/portfolio`}>ポートフォリオ</Link> <Link to={`/pro ...
  • 【React】Helloworldの仕組みの解説

    勉強途中で書いているものなので、やや間違いがあるかも Reactの内部構造 srcに書かれたJavaScriptを発動させ、指定した内容を、publicにあるindex.htmlへレンダリングする。 プロジェクトを作ってHelloWorldまで プロジェクトを作る。 create-react-app myproject cd myproject 以下コマンドで、プロジェクトを起動させる。 npm start index.jsを作る srcディレクトリ内のファイルを全て削除して、新しくindex.j ...
  • 【JavaScript】marked.jsでマークダウン記法をHTML上でプレビューしてみる

    以前、Pythonでマークダウンを実現させてDjangoに実装したが、最近のサイトは皆、マークダウンを書いたら即時で隣のプレビュー欄に表示させる仕様になっている事が多い。 それはJavaScriptでマークダウンを作っているからで、Pythonでマークダウンを実現させているようでは難しい。 そこで、JavaScriptマークダウンのライブラリとして名高い marked.js を使うことにした。 とりあえず作ってみたソースコ ...
  • 【Django】FontAwesomeで星のアイコンを使ったレビューの投稿と表示

    最終的にこのようになる。 今回はテンプレートのwithとcenterは不使用とした。 そして、5つ星の内、4つ星でレビューした場合、空の星を1つ描画する仕様に仕立てた。 モデル from django.db import models from django.core.validators import MinValueValidator,MaxValueValidator MAX_STAR = 5 class Review(models.Model): comment = models.CharField(verbose_name="コメント",max_length=500) star = models.IntegerField(verbose_name=&qu ...