自動化無しに生活無し

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

  • Laravelのプロジェクト名を書き換える【設定に依存していないのであれば、普通にディレクトリ名を書き換えるだけでOK】

    既存のLaravelのプロジェクトを、プロジェクト名だけ書き換えて編集する。 環境 Ubuntu 18.04 Laravel Framework 7.30.4 結論 下記コマンドでプロジェクトを作ったとする。 composer create-project --prefer-dist laravel/laravel [プロジェクト名] 上記コマンドで生成された[プロジェクト名]のディレクトリ名を書き換えれば良いだけの話である。 理屈 まず、プロジェクトを作った後、プロジェクトのディレクトリに移動して、下記コマンドを実行してもらいたい。 grep -rl "[プロジェクト名]&qu ...
  • 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とかボット対策をしていると当然突破できない。そこで予めブラウザでログインをしておいて、そのプロファイルを読み込めば良い。 プロファイルを読み込みするコード 下記コードをコピペすれば良いだけである。 ...