自動化無しに生活無し

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

  • 【CSS3】チャットのウェブデザインを作る
    HTML <!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> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> </head> <body> <main class="container"> <div class="mine_speech_bubble_area"> <div class="speech_bubble"></div> </div> <div class="others_speech_bubble_area"> <div class="speech_bubble"></div> </div> </main> </body> </html> Django用のHTML {% for topic in topics %} <div class="{% if topic.user.id == request.user.id %}mine{% else %}others{% endif %}_speech_bubble_area"> <div class="speech_bubble">{{ topic.comment|linebreaksbr }}</div> </div> {% endfor %} CSS .mine_speech_bubble_area{ text-align:right; } .others_speech_bubble_area{ text-align:left; } .mine_speech_bubble_area .speech_bubble { /* 自分が送った時は右下の角をつける */ background:lime; border-bottom-right-radius:0; } .others_speech_bubble_area .speech_bubble { /* 相手が送った時は左上の角をつける */ background:silver; border-top-left-radius:0; } .speech_bubble{ text-align:left; word-break:break-all; display:inline-block; max-width:80%; padding:0.5rem; margin:0.5rem 0; border-radius:1rem; } 動かすとこうなる。 ...

  • Ubuntuに環境変数をセットし、Pythonでosモジュールを使って読む方法【os.environ使用、crontabにも対応】
    例えば、gitで管理しているプロジェクトをgitでデプロイする時。 たとえローカルサーバーのDBのパスワードとは言え、ハードコードした状態でコミットするわけには行かない。(gitignoreに入れてしまうとパスワードが含まれない) そこで、環境変数をセットし、Python側でそれを読む。 環境変数をセットする。 #変数名=値 ZZZ=test #変数を環境変数としてセットする。 export ZZZ #↑2つは下記でも可 export ZZZ=test セットした環境変数 ...
    続きを読む

  • PHPでmb_strlenもしくはstrlenがNotFoundのときの対策
    mb_strlen()もしくはstrlen()がNotFoundになるときは、下記コマンドを実行してphp-mbstringをインストールする #PHPのバージョンは合わせる sudo apt install php8.1-mbstring ちなみに、strlen()はバイト数、mb_strlen()は文字列の長さ(マルチバイト文字を1文字とみなす)を返す。 ...

  • 【VanillaJS】Djangoで素のJavaScriptのXMLHttpRequest(Ajax)を使ってリクエストを送信【jQuery不使用】
    POSTメソッドを送信する 前項で取得したCSRFトークンをリクエストヘッダにセットして送信する。 window.addEventListener("load" , () => { const submit = document.querySelector("#submit"); submit.addEventListener( "click", () => { send(); }); }); const send = () => { const form_elem = "#form_area"; const form = document.querySelector(form_elem); const data = new FormData( form ); const url = form.getAttribute("action"); const method = form.getAttribute("method"); // formタグ内のデータを確認。 for (let v of data ){ console.log(v); } const request = new XMLHttpRequest(); //送信先とメソッドの指定 request.open(method,url); // formタグ内にcsrf_tokenが含まれているため不要。 //console.log(csrftoken); //request.setRequestHeader("X-CSRFToken", csrftoken); //送信(内容) request.send(data); //成功時の処理 request.onreadystatechange = () => { if( request.readyState === 4 && request.status === ...
    続きを読む

  • WindowsでPythonをインストールする
    Pythonのインストール Pythonのインストーラーを配布しているサイト( https://www.python.org/downloads/ )へ行く。 Download Python 3.10.6 の部分をクリックする。インストーラーがDLされる。 ( ※下記画像の赤枠部分。3.10.6は2022年9月現在のバージョンであり、今後バージョンが更新される。最新版のPythonインストーラーをDLする。 ) ダウンロードフォルダにて、先ほどDLしたインストーラーのファイルがあるので、ダブルクリックしてPytho ...
    続きを読む

  • composerでLaravel9.xプロジェクトが作れない問題に対処する【php8.1】
    ある日、composerコマンドを実行してLaravelプロジェクトを作ろうにも、エラーが出て作れない。 composer create-project --prefer-dist laravel/laravel testlaraveler1 を実行すると下記が得られる。 Creating a "laravel/laravel" project at "./testlaraveler1" Info from https://repo.packagist.org: #StandWithUkraine Installing laravel/laravel (v9.3.5) - Downloading laravel/laravel (v9.3.5) - Installing laravel/laravel (v9.3.5): Extracting archive Created project in /home/akagi/Documents/programming/php/laravel_test03/testlaraveler1 > @php -r "file_exists('.env') || copy('.env.example', '.env');" Loading composer repositories with package information Updating dependencies Your requirements could not be resolved to an installable set of packages. Problem 1 - spatie/laravel-ignition[1.0.0, ..., 1.4.0] require ext-curl * -> it is missing from your system. Install or enable PHP's curl extension. - Root composer.json requires spatie/laravel-ignition ^1.0 -> satisfiable by spatie/laravel-ignition[1.0.0, ..., 1.4.0]. To enable extensions, verify that they are enabled in your .ini files: - /etc/php/8.1/cli/php.ini - /etc/php/8.1/cli/conf.d/10-opcache.ini - /etc/php/8.1/cli/conf.d/10-pdo.ini - /etc/php/8.1/cli/conf.d/15-xml.ini - /etc/php/8.1/cli/conf.d/20-calendar.ini - /etc/php/8.1/cli/conf.d/20-ctype.ini - /etc/php/8.1/cli/conf.d/20-dom.ini - /etc/php/8.1/cli/conf.d/20-exif.ini - /etc/php/8.1/cli/conf.d/20-ffi.ini - /etc/php/8.1/cli/conf.d/20-fileinfo.ini - /etc/php/8.1/cli/conf.d/20-ftp.ini - /etc/php/8.1/cli/conf.d/20-gettext.ini - /etc/php/8.1/cli/conf.d/20-iconv.ini - /etc/php/8.1/cli/conf.d/20-phar.ini - ...
    続きを読む

  • UbuntuにSambaをインストールしてファイルサーバー化させる
    • 作成日時:
    • 最終更新日時:
    • Categories: インフラ
    • Tags: Ubuntu
    本記事はプライベート用として運用するため、セキュリティは全く考慮していない。 本記事に倣って作ったファイルサーバーは、LAN内の端末であれば、いずれも自由に読み書きできてしまうので注意。 ※ この記事の方法は非推奨です。マウントする箇所が /mnt/ になっておらず、権限もフルアクセスです。 インストールする sudo apt install samba 共有ディレクトリを作る 今回はホームディレクトリに作った mkdir ~/share chmod 777 ~/share 設定する sudo vi /etc/samba/smb.conf を開いて、末尾に下記を記 ...
    続きを読む

  • Heroku有料化の対策を考える【2022年11月28日よりHerokuPostgres(9ドル)、HerokuDynos(7ドル)の有料化】
    2022年8月26日、メールボックスを見るとHerokuからメールが届いていた。内容は下記。 まとめると、こうなる 2022年11月28日からHerokuの一部サービスで無料プランが無くなる 対象はHerokuDynos、HerokuPostgres、Redisの3つ 有料化以降、WEB(7$)+DB(9$)のウェブアプリをデプロイする時、一ヶ月につき16$支払う必要がある さあ困った。 これまでHeroku ...
    続きを読む

  • 【Django】django-admin、python、pip、コマンドが動作しない場合の対処法【環境構築問題】
    いわゆる、PATHが通っていない状態 Pythonのインストーラーでインストールする時、『add Python 3.x to PATH』というチェック項目がある。 そこにチェックを入れることで、pythonコマンドが使えるようになる。 参照元:https://bluebirdofoz.hatenablog.com/entry/2019/01/19/141007 django-adminコマンドが使えない時、 django-admin startproject config . pythonか ...
    続きを読む