自動化無しに生活無し

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

追記予定

  • Django(DRF)+ReactのSPAでJWTを使った認証を実装する
    この構成の場合、Djangoのデフォルトの認証機能でも実現はできるが、SPAのコンセプトが台無しになるため、JWTを使う。 JWT とは？ JSON Web Token の略である。 JWTとは、認証情報や権限を含んだ文字列(トークン)のこと。JSON形式で送受信される。 参照: https://ja.wikipedia.org/wiki/JSON_Web_Token クライアント側が、ログイン用のユーザー名とパスワードを入力 サーバーがその検証をする。検証の結果、問題なければトークンを生成、これがJWTである。 レスポンスと ...
    続きを読む

  • よく出るReactのエラー一覧
    textarea要素には、valueプロパティを使って値を与える 普通のHTMLでは、textareaに最初から値を入れておきたい場合、子要素に直接文字を書くと良い。 しかし、Reactで同じことをやるとエラーになる。 <textarea className="form-control" name="comment" onChange={this.handleChange}>{this.state.activeItem.comment}</textarea> そこで、valueプロパティを使う。 <textarea className="form-control" name="comment" onChange={this.handleChange} value={this.state.activeItem.comment}></textarea> これで、 Use the `defaultValue` or `value` props instead of setting children on <textarea>. というエラーは解決される。 リスト内の要素を識別できるよう、keyプロパティを与える Each child in a list should have a unique ...
    続きを読む

  • 【Vim】ReactでHTMLをコーディングするときだけ改行でインデントしてほしい
    ReactをVimでコーディングしているとき、不自由だと感じることが多々ある。 その1つが、.jsxファイルのHTML部をコーディングしているとき、改行でインデントしてくれないこと。 例えば、下記のコードのHTMLで改行をしても、HTML形式でインデントをしてくれない。 return ( <> <textarea id="textarea" className="form-control"></textarea> <input onClick={ addTopic } type="button" value="送信" /> {topics.map( (topic,i) => ( <div className="border" key={i}> <div> { topic } </div> <div className="text-right"> <input onClick={ deleteTopic } className="btn btn-danger" type="button" value="削除 ...
    続きを読む

  • 【Ubuntu】systemdでPythonファイルを動作させる【常駐スクリプトに】
    このPythonコードを動作させる。ファイルパスは~/Documents/systemd/test.py import datetime, time while True: with open("test.txt", mode="w") as f: f.write( str(datetime.datetime.now()) ) time.sleep(1) 必要最小限度の serviceファイルが以下。ファイルパスは/etc/systemd/system/testpython.serviceとする。 [Unit] Description=write text file After=network.target [Service] ExecStart=/usr/bin/python3 test.py WorkingDirectory=/home/testuser/Documents/systemd [Install] WantedBy=multi-user.target 下記で動作できる。 sudo systemctl start testpython.service 動作中は/home/testuser/Documents/systemd/te ...
    続きを読む

  • 【Django】getlistを使って複数枚の画像をまとめて送信する【サムネイルが表示される専用フォームあり】
    以前解説した、 inputタグのtype=‘file’で画像のサムネイルを表示させる を使って、複数の画像をgetlistを使ってアップロードできるように仕立てる。 通販サイトでは、1つの商品に複数枚の画像がセットされることが多いので、そちらに対応させる。 解説 モデル from django.db import models from django.utils import timezone class Topic(models.Model): dt = models.DateTimeField(verbose_name="投稿日時&q ...
    続きを読む

  • 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 ...
    続きを読む