AtsuTech

プログラミング、転職、本業に関する知識や情報を備忘録として書いてます

AtsuTech

プログラミング、転職、本業に関する知識や情報を備忘録として書いてます

レスポンシブのハンバーガーメニューのヘッダーを作る

はじめにhtml+css+javascriptで、ライブラリ不使用のプレーンなコードで シンプルなハンバーガーメニューのヘッダーを作ります。 完成イメージ レスポンシブ対応の、スマホ画面対応のヘッダーを作ります。まず先に、イメージをお見せします。 PC画面ではこのうな表示です。 これがスマホ画面だとこのようにメニューのテキストが消えて ハンバーガーメニューと呼ばれる横バー3本のボタンが出現します。 ボタンをクリックすると、メニューが展開します。

500
AtsuTech

    • LaravelとReactで始めるSPA

      Laravel(ver.10)でフロントエンドをTtpeScriptで書くReactの環境構築方法を備忘録も兼ねて紹介する。

      300
      AtsuTech

      • 温度制御のオフセットについて

        温度制御のオフセットについてあまり理解しておらず 色々勘違いしていたので書きのこす。 本業で扱っている装置でヒーターで温めてる部分の実際の温度が、温度設定(画面の表示値)値より低いことが判明し、設定値に同等となるように調整したかった。 2℃ほど実際の温度が低いので、直感的にオフセット+2℃でいいやと思って設定するも、温度が2℃近く下がってしまった。 逆に、オフセット-2℃にすると、温度が2℃近く上昇しやりたかったことが実現できた。 なぜオフセット+2℃にすると、温度が

        AtsuTech

        • [超初心]LaravelとReactで開発する時のメモ

          LaravelとReactで開発する時、 Laravelプロジェクト内にReactを導入してるようなプロジェクトでlaravelとReactのローカルサーバーを同時に立ち上げつつ、変更したら即時に結果をブラウザに反映させる方法が分からなかったのでメモしておく。 結論：両方のサーバーを同時に立ち上げるVS codeでコード書いてる前提です。 ターミナルでプロジェクトのフォルダに移動し、まずはターミナルでReactのローカルサーバーを立ち上げます。 npm run dev

          AtsuTech

        レスポンシブのハンバーガーメニューのヘッダーを作る

        AtsuTech

          Laravelでstrageディレクトリに保存した画像の表示

          自分の場合、publicディレクトリに"images"という名前のディレクトリを作っている。 ブラウザのアドレスバーにこのようにURLを書けば、画像を表示(アクセス)できる。 http://127.0.0.1:8000/storage/images/X7DN2jiAsEVmVIr771J39kMcAuVet5gDzvUhXA1B.jpg

          AtsuTech

          Laravelでstrageディレクトリに保存した画像の表示

          AtsuTech

          Tailwindcssで背景色の指定

          よく使う割にすぐ忘れるので、メモ用です。 Tailwindsccで背景色のクラスの指定は bg-(色)-(数字) という形式で表す。 ↓ここを参考にする。↓ https://tailwindcss.com/docs/background-color 実にたくさんの色が用意されているので、 使いたい色がきっと見つかると思います。 実際にコーディングする時は下記のような感じ。 <div class="bg-green-500">Green</div>

          AtsuTech

          Tailwindcssで背景色の指定

          AtsuTech

          ChatGPTを始める〜利用方法(アカウント作成から)〜

          まずは、ChatGPTの公式サイトにアクセス。 Try ChatGPTをクリック クリックすると、しばらくローディング中になり ロボットではないかどうかを聞かれます。 チェックボックスをクリックします。その後、下記のような画面になります。 これから登録して使っていくので、"Sign UP"をクリックします。 押したら、この画面になります。 GoogleやMicrosoftのアカウントからも使えるようですが、 今回はメールアドレスでアカウントを作成してみようと思います

          AtsuTech

          ChatGPTを始める〜利用方法(アカウント作成から)〜

          AtsuTech

          【React】ReactでCookieを使ってみよう

          まずは、インストールから。 npm install react-cookie 続いてcookieのモジュールをインポートします。 cookieを使いたい場所で下記を記載しましょう。 import { useCookies } from "react-cookie"; これでReactでcookieを使う準備が整いました。 では、cookieに値を保存することをやってみましょう。 まずはこんな感じでコードを書きます。 下記の"auth_token"は変数名に該当し、

          AtsuTech

          【React】ReactでCookieを使ってみよう

          AtsuTech

          【tailwindcss】初挑戦

          tailwindcssをお試し感覚で触れる環境を構築する。 今回はサクッと試してみたいので、CDNを利用する。 <head> <script src="https://cdn.tailwindcss.com"></script></head> クラスの一覧はこのサイトが参考になるhttps://tailwindcomponents.com/cheatsheet/ とりあえず、これで簡易的な環境構築できた。

          AtsuTech

          【tailwindcss】初挑戦

          AtsuTech

          【Docker】インストール

          公式サイトからインストールします

          AtsuTech

          【Docker】インストール

          AtsuTech

          【laravel】 Route [login] not defined.エラー

          Jwtで承認APIを組んでいて、logoutを処理を試していたら Route [login] not defined.というエラーが発生した。 色々調べてみると、存在しないURLやtoken認証が外れたときにサイトへアクセスすると、デフォルトの設定ではLoginルートへ遷移するらしい。 (->name('login')を定義していないとこのエラーが出る) そこでlogin以外に遷移させたい場合には、app\Http\Middleware\Authenticate.phpを

          AtsuTech

          【laravel】 Route [login] not defined.エラー

          AtsuTech

          【github】ローカルのプロジェクトをリモートリポジトリにアップする

          前提として、github側でリモートリポジトリを作成ずみ、 プロジェクトをgit管理済みであるとする。 プロジェクトのディレクトリに移動した状態で、下記コマンドにてリモートリポジトリを登録する。 git remote add origin　(githubよりコピーする) 下記コマンドにてリモートリポジトリにプッシュ(ローカルにあるデータをgithubのリモートリポジトリにアップロード)する。 git push origin master この後、パスフレーズの入力を

          AtsuTech

          【github】ローカルのプロジェクトをリモートリポジトリにアップする

          AtsuTech

          【Laravel】Illuminateはどこ？

          laravelをより深く学んでいくと、クラスやメソッドがどうなっているか 知りたくなる。 illuminateフォルダの中に、それらが入っていることが多いが いつも場所を忘れるので、ここにメモしておく 【ルート】 vendor > laravel > src > Illuminate 写真もつけておく

          AtsuTech

          【Laravel】Illuminateはどこ？

          AtsuTech

          Postmanを使う:インストールから

          ここにアクセスしてインストールする https://www.postman.com/downloads/ インストールできたら、アカウントを作成するように求められるので 必要項目を入力してアカウント作成 このあと、スクショを撮り損ねたが、なんかさらに質問(英語であなたの職業は？みたいな内容だったと思う。)を聞いてきて入力する求める画面が出てくる。下部のあたりにskipのボタンがあるのでそれを押したら使える状態になる。

          AtsuTech

          Postmanを使う:インストールから

          AtsuTech

          【Laravel】auth機能を使用する

          プロジェクトを作成する。 auth機能を使用するための準備 下記コマンドを実行 composer require laravel/ui php artisan ui vue --auth npm install npm run dev データベースの準備 データベースを作成する。 touch database/database.sqlite .envファイルを下記のように編集する DB_CONNECTION=sqlite　　　　　　　　//←mysqlか

          AtsuTech

          【Laravel】auth機能を使用する

          AtsuTech

          【Laravel】コマンド集

          ・バージョン確認 php artisan -V ・コントローラ作成 php artisan make:controller コントローラの名前 ・ルート確認 php artisan route:list 随時、更新予定。

          AtsuTech

          【Laravel】コマンド集

          AtsuTech