自動化無しに生活無し

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

  • PostgreSQLインストールから、ユーザーとDBを作る
    PostgreSQLのインストールからユーザー作成、そのユーザーが扱うDBの作成を行う。 インストール Ubuntuであれば、aptコマンドでインストール可能 sudo apt install postgresql 下記コマンドを打って、active(running)と表示されればOK。active (exited)でも可 sudo systemctl status postgresql.service ユーザー作成から、権限割り当て、DB作成まで sudo -u postgres -i これでpostgresユーザーのターミナルになる。dockerを使用して ...
    続きを読む

  • Djangoのforms.pyが提供するフォームテンプレートは使わない
    Djangoのforms.pyはユーザーから受け取った値のバリデーションだけでなく、フォームのテンプレートも提供してくれる。(widgetを使うなどしてクラス名やHTMLタグの指定ができる) しかし、私はこのforms.pyの提供するフォームのテンプレートは使わない。本記事ではその理由を列挙する 理由1:フロントサイドとサーバーサイドの分業問題 そもそも、テンプレートの開発はフロントサイド開発者のするこ ...
    続きを読む

  • LaravelをUbuntuにデプロイする【Nginx+PostgreSQL】
    構成について タイトルの通り、下記構成にてデプロイを行う Laravel Framework 7.30.4 Ubuntu 18.04 nginx version: nginx/1.14.0 (Ubuntu) psql (PostgreSQL) 10.16 (Ubuntu 10.16-0ubuntu0.18.04.1) なぜPostgreSQLなのか？(MySQLではないのか？) MySQLは使わない。なぜなら、Laravelのtimestamp型とMySQLが組み合わさると2038年問題が発生するから。 コード側を合わせるという方法もあるが、今回はデプロイが主目的であるため、安全なPostgreSQLでデプロイする。 https://qiita.com/ucan-lab/items/99ee14ad6bb24614980c デプロイまでの流 ...
    続きを読む

  • JavascriptからCookieを扱う【動画の設定音量の記録と読み込み】
    JavaScriptからCookieを扱う。これで、サイトのデータをユーザーのブラウザに保存できる。 Cookieにvideoタグで設定した音量情報を格納、読み込みするコード 実例を交えながら解説する。下記はvideoタグで指定した音量をCookieに記録する。 window.addEventListener("load" , function (){ const video = document.querySelector("video"); video.addEventListener("volumechange",(event) => { document.cookie = "volume=" + decodeURIComponent(event.target.volume) + ";Path=/single;SameSite=strict"; }); set_video_volume(); }); function set_video_volume(){ let cookies = document.cookie; console.log(cookies); let cookiesArray = cookies.split(';'); let volume = 0; for(let c of cookiesArray) { console.log(c); let cArray = c.split('='); if( cArray[0] === "volume"){ volume = Number(cArray[1]); console.log(volume); break; } } const video = document.querySelector("video"); video.volume = volume; } Cookie ...
    続きを読む

  • jQueryのコードをJavascriptに書き換える【セレクタ、属性値の参照、イベントなど】
    jQueryに依存したコードをそのままにするのは再利用性に欠け、開発効率にも関わる。そこで、今回はjQueryのコードを適宜javascriptに書き換える。 セレクタ まずは基本のセレクタ以下のように書き換える。 var test = $(".test"); //↓以下に書き換え var test = document.querySelectorAll(".test"); //←全ての.textクラスの要素を抜き取る var test = document.querySelector(".test"); //←.testクラスの1番最初の要素を抜き取る jQueryが提供するメソッドや属性などは使用できなく ...
    続きを読む

  • Laravelで1対多、多対多のリレーションを作る【トピックに対してコメントの投稿、トピックタグの指定】
    1対多、多対多のリレーションのウェブアプリのサンプルを作りつつ、方法を解説する。 状況 元にして作るアプリの状況を解説する 1対多のリレーションを作る Topicに対して、Commentを投稿できるようにする。そのために、1対多のリレーションを作る。 コメントのモデルの作成・トピックのモデルの編集 1対多のリレーションを作るため、まずは、Commentのモデルを作る。ついでに--migrationオプションを ...
    続きを読む

  • Laravelの全体像、ファイル・ディレクトリごとの役割と関係性を俯瞰する【各コンポーネントごとに解説】
    Laravelのプロジェクトを作ると、大量のファイルやディレクトリで溢れかえり、気後れしそうになる。 そこで本記事では開発をスムーズにするため、Laravelの全体像、とりわけよく使うファイル・ディレクトリの役割と関係を解説する。 Laravelの全体像 Laravelの全体像はこのようになっている。 流れ マイグレーションファイルに基づき、マイグレーション。DBのテーブルを作る クライアントがリクエストを送 ...
    続きを読む

  • HUGOにシェルスクリプトとJavaScriptの記事検索機能を実装させる
    タイトルの通り。 静的サイトジェネレーターのHUGOはサーバーサイドのスクリプトが存在しない(全てフロント言語)。そのため、検索機能を実装させるとなると、検索対象と検索機能の全てをフロントに記述する必要がある。フロントで完結する検索機能に必要になるのが、JavaScript。 それから、検索対象である記事の文字列をJSが読み取れる形式でジェネレートしてあげる必要もある。その際にコマンド一発でジェネレー ...
    続きを読む

  • SeleniumでFirefoxブラウザのプロファイルを読み込む【Recaptcha突破、Cookie+アドオン読み込み】
    めったに使うことのないSeleniumではあるが、いざ使おうとするとかなり手間取る。 特にログイン。Django等の管理サイトでログインする際にはパスとIDを控えておけば良いが、GoogleのRecaptchaとかボット対策をしていると当然突破できない。そこで予めブラウザでログインをしておいて、そのプロファイルを読み込めば良い。 プロファイルを読み込みするコード 下記コードをコピペすれば良いだけである。 ...
    続きを読む

  • CSS3とHTML5だけでタブを作り、複数のページを表示させる【JS不要】
    例えば、こんなふうにタブでページを切り替えて表示させるフロント。 かつてはJSじゃないと成立しなかったが、今となっては、JS不要でCSS3とHTML5だけで再現できる。 コード まず、HTML。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>タブシステム</title> <link rel="stylesheet" href="style.css"> </head> <body> <input id="tab_radio_1" class="tab_radio" type="radio" name="tab_system"><label class="tab_label" for="tab_radio_1">タブ1</label> <input id="tab_radio_2" class="tab_radio" type="radio" ...
    続きを読む