自動化無しに生活無し

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

tips

  • Todoリストのウェブアプリの要件定義書の書き方
    要件定義書の書き方 にて、要件定義書に必要な項目をまとめた。 では、実際に要件定義書を書くとなった場合、具体的にどうかけば良いのか。 本記事では、Todoリストのウェブアプリを作る想定で要件定義書をまとめた。 業務要件 背景 1日のうちにやることが不明瞭で無下に時間を過ごしている やることを紙に書いているが、紙資源がもったいない いつまでに何をやるのか、わかりやすく管理したい 目的 紙ではなくウェブアプリでやることを ...
    続きを読む

  • 【Django】管理サイトで任意のJavaScript、CSSを発動させる【管理サイトのカスタム】
    前提 前もって、プロジェクト直下のtemplatesが作られており、settings.pyのTEMPLATESでもそれが読まれている状況であるとする。 TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [ BASE_DIR / "templates" ], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ] 作業 templatesの中にadminディレクトリを作る。 mkdir templates/admin/ templates/admin/base.htmlを作る。内容は下記。 {% extends 'admin/base.html' %} {% block extrastyle %}{{ block.super }} <style> body{ background:orange; } </style> <script>console.log("test;");</script> {% endblock %} これで管理サイトの全ページでC ...
    続きを読む

  • 【Vimでスニペット】snipmateプラグインをインストールして使ってみる【爆速コーディング】
    vim-snipmateはVimのスニペットプラグイン。スニペットとは、コードの断片のこと。このプラグインは、スニペットを即時呼び出して貼り付けできる。 同じようなコードを何度も何度も書くのは大変。だからスニペットプラグインを使用して爆速コーディングを実現させる。 環境はUbuntu22.04より インストール方法 snipmateはtlibとvim-addon-mw-utilsに依存しているので、まとめ ...
    続きを読む

  • JavaScriptのイベントリスナのアロー関数でthisは使わない【event.currentTargetを使おう】
    モダンなJavaScriptに慣れるため、無名関数を書くときにもアロー関数を使い、そしてthisを使おうとすると、意図したとおりにはならない。 アロー関数式とfunction関数ではthisの仕様が異なるからだ。下記ソースコードを元に動作を確かめよう。 <!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://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <button class="button" value="1">ボタン1</button> <button class="button" value=" ...
    続きを読む

  • 【CSS】変数を使用する【テーマカラーの統一、スキンの作成などに】
    SCSSなどではなく、素のCSSで変数が使えることに今になって気づいた。 ということで、実際に扱っていく。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Welcome to my portfolio site !!</title> <style> :root{ --base-color: #111111; --theme-color: #00ffcc; --font-color: white; } body { background:var(--base-color); color: var(--font-color); margin:0; } h1 { background: var(--theme-color); } </style> </head> <body> <h1>Welcome to my portfolio site !!</h1> <h2>Profile</h2> <h2>Portfolio</h2> </body> </html> :root{}で宣言した変数 --base-color等がプロパティの値として呼び出すことができる。 予めテーマカラーなどをまとめて冒頭に書いておけば、それを書き換えるだけですぐに対応できる。 この変数 ...
    続きを読む

  • 【JavaScript】Enterキーが押されたときにイベントを実行する【.addEventListener('keydown')】
    Enterのキーコードは13なので、イベント引数のeからkeyCodeを取り出す。 <!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> </head> <body> <input id="input" type="text"> <script> const input = document.getElementById("input"); input.addEventListener("keydown", (e) => { if( e.keyCode === 13 ){ console.log("Enter"); } }); </script> </body> </html> 他のキーと組み合わせて発火させるには？ 例えば、ShiftキーとEnterキーの組み合わせの場合、こうなる。 <!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> </head> <body> <input id="input" type="text"> <script> const input = document.getElementById("input"); input.addEventListener("keydown", (e) => { if( e.keyCode === 13 && e.shiftKey ){ console.log("Enter"); } }); </script> </body> </html> ...

  • JavaScriptで動的に増減する要素に対してイベントを発動させる【Vanilla.js】
    動的に増減する要素に対して、以下のようなやり方ではイベントをセットすることはできない。(クリックして追加されたあと、ボタンをクリックしても追加はされない。) <!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> </head> <body> <button class='test'>test</button> <script> const test = document.getElementsByClassName("test")[0]; test.addEventListener("click", () => { document.body.innerHTML += "<button class='test'>test</button>"; }); </script> </body> </html> jQueryではこのようにするが <!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://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <button class='test'>test</button> <script> $(document).on("click", ".test", () => { $("body").append("<button class='test'>test</button>"); }); </script> </body> </html> Vanilla.jsではこのように書く <!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> </head> <body> <button class='test'>test</button> <script> //動的 ...
    続きを読む

  • 【Ubuntu22.04】スクリーンショットのショートカットキーを修正する
    • 作成日時:
    • 最終更新日時:
    • Categories: others
    • Tags: ubuntu tips
    Ubuntu22.04は問題が多すぎる。 例えば、20.04まではPrintScreenキーを押したらすぐにPCの全画面のスクリーンショットを撮影してくれたが、Screenshot Toolなるふざけた機能が邪魔をしてスムーズなスクショの妨げになっている。 そこで、Ubuntuの設定からキーボードのショートカットキーを修正し、この問題を解決する。 『設定』→『キーボード』→『ショートカットの表示とカスタマ ...
    続きを読む

  • 【Ubuntu】最新版PHPがインストールできるようにリポジトリを追加する
    • 作成日時:
    • 最終更新日時:
    • Categories: インフラ
    • Tags: Ubuntu PHP tips
    このリポジトリを前もってインストールしておかなければ、最新(2023年1月時点)のPHP8.1がインストールできない sudo apt-add-repository ppa:ondrej/php 参照元 https://www.itzgeek.com/how-tos/linux/ubuntu-how-tos/how-to-install-php-8-0-on-ubuntu-20-04-ubuntu-18-04.html 背景 GitHubからDLしたLaravelプロジェクトを手元で動かすため、 composer update を実行したものの、以下のエラーが出た。 Loading composer repositories with package information Info from https://repo.packagist.org: #StandWithUkraine Updating dependencies Your requirements could not be resolved to an installable set of packages. Problem 1 - Root composer.json requires simplesoftwareio/simple-qrcode ^4.2 -> satisfiable by simplesoftwareio/simple-qrcode[4.2.0]. - simplesoftwareio/simple-qrcode 4.2.0 requires ext-gd * -> it is missing from your system. Install or enable PHP's gd extension. Problem 2 - laravel/cashier[v14.6.0, ..., 14.x-dev] require moneyphp/money ^4.0 -> satisfiable by moneyphp/money[v4.0.0-beta1, ..., v4.1.0]. - moneyphp/money[v4.0.0-beta1, ..., v4.1.0] require ext-bcmath * ...
    続きを読む

  • 【Node.js】npmとは、npmコマンドについて
    • 作成日時:
    • 最終更新日時:
    • Categories: others
    • Tags: npm tips
    そもそもnpmとは npmはNode.jsのパッケージ管理ツールのこと。Node Package Manager の略。 例えば、Reactを使用するために、Reactを動かすために必要なソフトウェア一式をインストールする必要がある。このソフトウェア一式のことをパッケージという。 npmはこのパッケージのインストール、アンインストールなどの管理を行うことができる。 npmコマンドについて npm install パッケージ パッケージのインストールをする。こ ...
    続きを読む