自動化無しに生活無し

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

Posts

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

  • 【Django】バッチ処理のOpenCVが撮影した画像をDBに保存する
    Djangoのバッチ処理を実行し、DBにデータを格納させる。ただし、OpenCVで撮影した画像をDBに保存させる。本記事ではその手順を記す。 実行環境・やりたいこと 実行環境 Django 2.2以上 Ubuntu 18.04 やりたいこと 流れはだいたいこんな感じ OS起動時、バッチ処理がCrontabから実行される バッチ処理はOpenCVを使用し、撮影した画像を保存 保存した画像とコメントをDBに記録 1秒経ったら、2に戻る つまり、コマ撮りし ...
    続きを読む

  • Ubuntu18.04にnode.jsとnpm、vue-cliをインストールする
    環境 Ubuntu 18.04 Bash インストール nodejsとnpmをインストールする。 sudo apt install -y nodejs npm npmからnパッケージをインストール sudo npm install n -g nパッケージを使ってnodeをインストール sudo n stable 旧バージョンのnodejs及びnpmをアンインストールする。 sudo apt purge -y nodejs npm exec $SHELL -l 下記コマンドを実行して、バージョンが表示されれば完了 node -v permission denied問題への対処 下記コマンドを実行する。 npm config get prefix 出力された文字列が/usr/localで ...
    続きを読む

  • Djangoで動画投稿時にサムネイルもセットでアップロードする【DRF+Ajax(jQuery)+canvas】
    Djangoで動画をアップロードする時、ffmpegなどを使ってサムネイルの自動生成を行うが、クライアントが自分で動画のサムネイルを指定したいときはこの限りではない。 サムネイルに指定したい画像は動画内にあり、クライアントがサムネイルの画像をまだ作っていない場合、アップロードフォームでサムネイルを作る必要がある。 本記事では動画を投稿する際、サムネイルをクライアントが指定した上でアップロードする手法を ...
    続きを読む