- 投稿日：2020-10-17T21:23:39+09:00
【Vue.js】 transitionを使用してfade-in, fade-out
【ゴール】
【Vue.js】 transitionを使用してfade-in, fade-out
【環境】
mac catarina 10.156
Vue.js v2.6.12【実装】
■ifで条件分岐
■transition name="fade"で、fadeモードに
Helloworld.vue<template> <div> <h2>hi</h2> <button @click="show = !show">変更</button> <transition name="fade" > <p v-if="show">trasition</p> <transition> </div> <template> <script> export default ({ data(){ return { show: true } } }) </script> <style scoped> .fade-enter-active, .fade-leave-active { transion: opacity 0.5s; } .fade-enter, .fade-leave-to{ opacity: 0; } </style>以上
【まとめ】
■transitionでアニメーションを作成
■nameでアニメーションの種類を指定してあげる
■style内でtransitionの設定をする【オススメ記事】
■ 【Vue.js】クリック処理 @click
https://qiita.com/tanaka-yu3/items/e578cadf35a7bc024770■ 【Vue.js】 IF文・For文 条件分岐、繰り返し処理
https://qiita.com/tanaka-yu3/items/0ccf9a11525331b764de■ 【Vue.js】 vue-routerを利用してルーティング作成し画面遷移を！！
https://qiita.com/tanaka-yu3/items/1b1f5f2b2d9638f50d33
- 投稿日：2020-10-17T18:18:12+09:00
【2020年版】Macを指定した時間に強制シャットダウンさせる方法
ついついPCを触りすぎてしまった…。そんな経験はないでしょうか。
その時に、「指定した時間に自動的にPCがシャットダウンしてくれたら触りすぎないのに…」と思ったことはないでしょうか。
これを解決する、指定した時間にPCを強制シャットダウンさせる方法についてまとめました。動作環境
- macOS Catalina 10.15.7
方法
cronというものを使用します。
cronとは、多くのUNIX系OSで標準的に利用される常駐プログラム（デーモン）の一種で、利用者の設定したスケジュールに従って指定されたプログラムを定期的に起動してくれるもの。
まずはターミナルを開き、以下のコマンドを実行します。
sudo crontab -eテキストエディタが開くので、指定時間になったらシャットダウンするようにファイルに記載します。
例として、毎日23時にシャットダウンする場合は以下です。* 23 * * * /sbin/shutdown -h nowcronの詳しい書き方については以下を見てください。
クーロン(cron)をさわってみるお最後に保存して終了します。
これで指定した時間に強制シャットダウンされます。「省エネルギー」ではダメなの？
Macには標準アプリとしてシステム環境設定から起動できる「省エネルギー」というものがあります。
このアプリに指定した時間にシャットダウンする機能があるので、これを使えばいいのではないかと思うかもしれません。
ですが、「省エネルギー」には欠点があり、指定した時間になるとダイアログを出すのです。
しかもダイアログはキャンセルすることができ、キャンセルすると無効化されてしまいます。
これではあまり意味がありません。
cronを使う方法であれば、ダイアログは出ずにシャットダウンされます。参考
- 投稿日：2020-10-17T16:46:07+09:00
MacBookとSDカードのみでRaspberry Piのルート直下を確認する
学校の課題中に発生した問題？と結果について簡単にまとめました。
ターミナルのみでの操作になります。
備忘録も兼ねて書きました。当記事の対象者
- OSインストール済のラズパイ(SDカード)はあるが、それ自体を起動することはできない。
- MacBookにmicroSDを接続するすべがある。
しかしラズパイのルート直下の内容を確認したい。
- ルート直下=「var」「etc」「home」などが格納されている場所という認識でおねがします。
あくまで「内容の確認」だけであり、「内容の変更」はできなくて良い。
- コピーは可能です。
環境
- MacBook Pro 2017モデル (ver.10.15.7)
- RaspbianOS (Buster ver.忘れた)
作業手順の確認
- 基本的な流れとしては
→SDカードをMacBookへ接続
→自動的に読み込まれる「boot」をアンマウント
→ext4を用いて「root」をマウント
→見れる！！！bootのアンマウント
diskutil list: bootのMac上での名前の確認僕の場合は「/dev/disk2」でSDが認識されています。
アンマウントしたいのは「disk2s1(Windows_FAT_32 boot)」
内容を確認したいのは「disk2s2(Linux)」ですね。
読み込まれたときの名前は各自異なるため、それぞれ合わせてください。
diskutil umount disk2s1: bootをアンマウント
ext4のインストール
brew update: brew(インストーラ)のアップデートbrew install cask: cask(homebrewの拡張版)のインストールalias cask="brew cask": 「cask=brew cask」と認識させるための設定cask install osxfuse: osxfuse(ext4)のインストールルート直下をマウントする
sudo diskutil mount /dev/disk2s2 Desktop/mnt: マウント
書式としては
sudo diskutil mount /dev/対象の名前 マウント先
としてください。
直後パスワードを求めらるため、Macのパスを入力してください。
僕はデスクトップ上のmntというディレクトリを指定しました。確認
各自指定したディレクトリを確認していただければ、マウントされたのが確認できると思います。
まとめ
今回はMacによるext4を用いたラズパイOSのルート直下のマウントをまとめました。
先にも述べましたが、この方法では書き込みはできません。
内容を確認したい、データだけMacに移したいという方は是非試してみてください。
- 投稿日：2020-10-17T13:39:49+09:00
【PHP】今日、Laravel始めました
ビルトインサーバーでのLaravel導入についての備忘録。
MacのPHPバージョンアップ、Laravel導入、DB（MySQL）への接続まで。環境構築（Mac）
- 現在のPHPの最新バージョン 7.4に、Homebrewを使って、バージョンアップ。
PHPのバージョンアップ% php -v // Macに入ってるバージョン確認 PHP 7.3.11 ... % brew search php@7 // Homebrewコマンドで、インストールができるPHP7系を検索してみる => Formulae php@7.2 php@7.3 php@7.4 % brew install php@7.4 // Homebrewを使って、7.4 をインストール Updating Homebrew... : // インストールが完了したら、PATHを通す設定を上書きする % echo 'export PATH="/usr/local/opt/php@7.4/bin:$PATH"' >> ~/.bash_profile % echo 'export PATH="/usr/local/opt/php@7.4/sbin:$PATH"' >> ~/.bash_profile % source ~/.bash_profile % brew services start php // PHPを起動 // ターミナルを一旦閉じてから、バージョン確認してみる % php -v PHP 7.4.11 ...
- Laravel導入には、以下が必要なのでインストールする。
- Homebrew ： 導入済み
- PHP ： 導入済み
- Composer : ライブラリやパッケージを管理し、それをもとにインストールする機能。
- Laravel
Laravelの導入まで// Composer インストール % brew search composer ==> Formulae composer ==> Casks composercat % brew install composer % composer -v // 導入を確認 ______ / ____/___ ____ ___ ____ ____ ________ _____ / / / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/ / /___/ /_/ / / / / / / /_/ / /_/ (__ ) __/ / \____/\____/_/ /_/ /_/ .___/\____/____/\___/_/ /_/ Composer version 1.10.6 2020-05-06 10:28:10 : // Laravelのインストール % composer global require "laravel/installer" // Laravelのコマンドを使えるようにするために、パスを通す（.zshrcファイル） % vim ~/.zshrc // i(挿入モード)で編集し、escキーで抜け、:wqで保存して終了 export PATH="$PATH:/Users/自分のPC名/.composer/vendor/bin" % source ~/.zshrc // 変更を反映 % laravel -v // 導入を確認 Laravel Installer 4.0.5 :Laravelアプリ作成の実装手順
アプリの雛形作成
- artisan（アーティサン）コマンド : Laravelの機能を呼び出すコマンド。
Laravelアプリの作成% cd ~/projects % laravel new laravel_sample // アプリ名 「 laravel_sample 」 % cd sample % php artisan serve // サーバーを起動し、ブラウザで確認（localhost:8000） // サーバー停止は、 control + C
- localhost:8000 にアクセス↓（※ app/resources/views/welcome.blade.php が表示されてればOK）
laravelアプリのディレクトリ構造
ざっくりしたディレクトリ構造・app └─ Http └─ コントローラー └─ モデル ・database └─ マイグレーション ・resources └─ ビュー ・routes └─ web.php (ルーティング)タイムゾーンと言語だけ設定しとく
- レコード保存時の時間情報の設定など。
タイムゾーンと言語の設定（config\app.php）'timezone' => 'Asia/Tokyo', 'locale' => 'ja', 'faker_locale' => 'ja_JP',DB作成（mySQL）
- DB接続には、 ホスト、ポート、DB名、ユーザー名、PW が必要。
- Laravelでは、
.envファイルに、環境変数を記載。多分、デフォルトのままでok。DB作成のための設定
アプリ作成時に作成された.envファイル（DB関連部分）: DB_CONNECTION=mysql // DBの種類 DB_HOST=127.0.0.1 // 接続先のホスト DB_PORT=3306 // 接続先のポート DB_DATABASE=laravel_sample // DB名 DB_USERNAME=root // ユーザー名 DB_PASSWORD= // PW（なくてok） :config/database.php'mysql' => [ : 'database' => env('DB_DATABASE', 'laravel_sample'), 'username' => env('DB_USERNAME', 'root'), 'password' => env('DB_PASSWORD', ''), :DB作成
- MySQLにrootでログインし、DBを作成する。
ターミナル% mysql -u root // rootでMySQLにログイン mysql> create database laravel_sample; // DB作成 Query OK, 1 row affected (0.01 sec) mysql> show databases; // DB一覧で確認 mysql> exitDBをアプリと接続する
アプリのディレクトリ（ターミナル）% php artisan tinker // 対話コマンド Psy Shell v0.10.4 (PHP 7.4.11 — cli) by Justin Hileman >>> DB::connection(); // DBが接続されてるか確認 => Illuminate\Database\MySqlConnection {#3238} >>> exit // 確認できたら終了しとく % php artisan migrate // マイグレーション実行
- これで、MySQLと繋がり、空のDBが作成できたハズ。
よく使いそうな Laravel artisanコマンド
よく使いそうなコマンド% php artisan --version // バージョンの確認 % php artisan // コマンド一覧の確認方法 （引数の使い方も確認できるみたい） % php artisan list % php artisan make:model -h // モデル作成に、どんなオプションがあるか? % php artisan make:controller -h // コントローラー作成に、どんなオプションがあるか? % php artisan serve // ローカルサーバー起動（8000） % php artisan route:list // ルーティングの確認 % php artisan tinker // 対話コンソールの起動
- 投稿日：2020-10-17T01:04:58+09:00
Dockerのコマンドまとめ
はじめに
Dockerは多くのIT開発企業で導入されている環境構築を楽にする技術です。
Dockerのコマンドをまとめます。今回のDockerコマンド
- docker login
- docker pull
- docker images
- docker run
- docker run --name
- docker run --rm
- docker ps -a
- docker restart
- docker exec -it (コンテナID)or(コンテナ名) bash
- docker commit (コンテナID)or(コンテナ名) (新しいimage名)
- docker tag (source) (target)
- docker push
- docker rmi
- docker stop
- docker rm
- docker system prune
詳細
docker login
Dockerにログインするコマンド。
Dockerを使用する場合は最初に行う。ターミナル% docker login Username: => Dockerに登録したユーザー名を入力 Password: => Dockerに登録したパスワードを入力 => ユーザー名、パスワードが合っていれば、ログインする。(Login Succeededと表示される)docker pull
Docker imageをdockerhubからホストにダウンロードするコマンド。
ターミナル例)hello-worldというimageをダウンロードする時 % docker pull hello-world => hello-worldがダウンロードされる => ユーザー名、パスワードが合っていれば、ログインする。(Login Succeededと表示される)docker images
ホストの中にあるdocker imageのリストを表示するコマンド。
ターミナル例)hello-worldというimageをダウンロードした後 % docker images => REPOSITORY TAG IMAGE ID CREATED SIZE hello-world latest (自動作成のID) (作成した時) (データサイズ)docker run
コンテナを作るコマンド。
ターミナル例)hello-worldというimageをダウンロードした後 % docker run hello-world => hello-worldのコンテナが作成され、実行される。 % docker run -it ubuntu bash => ubuntu(OSの名前、dockerhubに存在するdocker image)のコンテナが作成され、bashというプログラムを実行させる。 (bashはshellの名前。ubuntuのデフォルトのコマンドをbashに上書きして実行している。ちなみにubuntuのデフォルトのコマンドはbashなので、今回はdocker -it run ubuntuでも同じ。)docker run --name
名前をつけてコンテナを作るコマンド。
ターミナル% docker run --name sample ubuntu => sampleという名前のコンテナがubuntuというdocker imageから作成される。docker run --rm
コンテナを起動した後、すぐにコンテナを削除コマンド。
ターミナル% docker run --rm hello-world => hello-worldというdocker imageからコンテナを作成し、実行した後、すぐにコンテナが削除される。 (一度しか使わないコンテナは残さないために、すぐに削除する。)docker ps -a
全てのコンテナを表示するコマンド。
ターミナル% docker ps -a => 全てのコンテナが表示される。 % docker ps => 実行中のコンテナのみされる。docker restart
一度実行したコンテナをリスタートするコマンド。
ターミナル% docker restart (コンテナID)or(コンテナ名) => コンテナIDで指定したコンテナがリスタートされる。(STATUSがUPとなる)docker exec -it (コンテナID)or(コンテナ名) bash
リスタートしたコンテナにプログラムを実行させるコマンド。(bashの部分は適宜、実行したいプログラムに置き換える)
ターミナル% docker exec -it (コンテナID)or(コンテナ名) bash => リスタートしたコンテナの中に入ることができる。(bashにより)docker commit (コンテナID)or(コンテナ名) (新しいimage名)
更新したコンテナを新しいDocker imageとして保存するコマンド。
ターミナル% docker commit (コンテナID)or(コンテナ名) (新しいimage名) => docker imageが保存され、IDが表示される。docker tag (source) (target)
docker imageのimage名を変更するコマンド。
docker imageをdockerhubにpushする前に、ホストのimageのリポジトリ名とpush先の自身のdockerhubのリポジトリ名を同じにするために使う。(dockerhubのリポジトリはdockerhubで作成しておく必要がある)ターミナル% docker tag (ホストのdocker imageのリポジトリ名:タグ名) (dockerのユーザー名/リポジトリ名) => docker imageのリポジトリ名がdockerhubのリポジトリ名と同じになる。(タグ名は指定しなければ、latestとなる。)docker push
docker imageを自分のリポジトリに作成するコマンド。
ターミナル% docker push (image名) => dockerhubにdocker imageがpushされる。(image名はdockerのユーザー名/リポジトリ名と同じにしておく)docker rmi
docker imageを削除するコマンド。(image名はdockerのユーザー名/リポジトリ名と同じにしておく)
ターミナル% docker rmi (image名)or(image id) => 指定したdocker imageが削除されるdocker stop
実行中のコンテナをストップするコマンド。(STATUSをUP→EXITEDにする)
ターミナル% docker stop (コンテナ名)or(コンテナID) => 指定したコンテナがストップされる。docker rm
コンテナを削除するコマンド。
ターミナル% docker rm (コンテナ名)or(コンテナID) => 指定したコンテナが削除されるdocker system prune
ストップしているコンテナ全てを一括で削除するコマンド。
ターミナル% docker system prune => ストップしているコンテナが全て削除される参考
Udemy
かめれおん講師 「米国AI開発者がゼロから教えるDocker講座」
有料ですが、初学者の私にも非常に理解しやすかったです。
最後に
本投稿が初学者の復習の一助となればと幸いです。