miriwoのブログ

IT系の技術や少し趣味よりのことも投稿してゆくよ😊

MacでもWindowsでも使えるように外付けHDDをフォーマットする(Windows編)

概要

  • MacでもWindowsでも使えるように外付けHDDやSSDをフォーマットする方法をまとめる。

ご注意

  • フォーマットを行うと当該のHDDもしくはSSDの中に保存されているデータは削除されるのでご注意ください

方法

  1. Windowsにフォーマットを行うHDDもしくはSSDを接続する。
  2. 「コントロールパネル」→「システムとセキュリティ」を開く。
  3. 「管理ツール」→「コンピューターの管理」→左サイドバーの「ディスクの管理」をクリックする。
  4. フォーマットするディスクのパーティションを選択(Dとかのやつ)→右クリック→フォーマット
  5. ボリュームラベル → デフォルト ファイルシステムexFAT アロケーションユニットサイズ → 既定値 クイックフォーマット → チェック入れる 確認してOKをクリックする。

MacでもWindowsでも使えるように外付けHDDをフォーマットする(Mac編)

概要

  • MacでもWindowsでも使えるように外付けHDDやSSDをフォーマットする方法をまとめる。

方法

  1. Macにフォーマットを行うHDDもしくはSSDを接続する。
  2. 「Finder」を開き、「移動」の「ユーティリティ」をクリックする。

    f:id:miriwo:20220321211406p:plain

  3. 「ディスクユーティリティ」をクリックする。

    f:id:miriwo:20220321211520p:plain

  4. ディスクユーティリティの左サイドバーにて、フォーマットするHDDもしくはSSDをクリックする。

    f:id:miriwo:20220321211627p:plain

  5. 「消去」をクリックする。

    f:id:miriwo:20220321211739p:plain

  6. 「名前」には任意の内容を入力し、「フォーマット」は「exFAT」を選択して「消去」をクリックする。

    f:id:miriwo:20220321212012p:plain

  7. エラーが出ずに完了できたら、無事にフォーマットが完了している。

Mac UbuntuのインストールUSBを作成する

目的

  • MacOSの端末でUbuntuのインストールUSBを作成する方法をまとめる

実施環境

項目 情報
OS macOS Catalina(10.15.3)
ハードウェア MacBook Air (11-inch ,2012)
プロセッサ 1.7 GHz デュアルコアIntel Core i5
メモリ 8 GB 1600 MHz DDR3
グラフィックス Intel HD Graphics 4000 1536 MB

前提情報

  • Ubuntu20.04のインストール用USBを作成する。

概要

  1. Ubuntu20.04のisoファイルのダウンロード
  2. USBの作成

詳細

  1. Ubuntu20.04のisoファイルのダウンロード
    1. 下記のいずれかにアクセスする。
    2. いずれかの「ISOイメージ」と書かれたリンクをクリックする。

      f:id:miriwo:20201121214456p:plain

    3. ダウンロードに時間がかかる場合がある。

  2. USBの作成
    1. USBメモリMacのPCに接続する。
    2. 「アプリケーション」→「ユーティリティ」と進み「ディスクユーティリティ」をクリックする。

      f:id:miriwo:20201121181213p:plain

    3. 左上の表示切り替えボタンをクリックして「すべてのデバイスを表示」をクリックする。

      f:id:miriwo:20201121222203p:plain

    4. 形式を変更したいUSBメモリを選択し「消去」をクリックする。

      f:id:miriwo:20201121222247p:plain

    5. 「フォーマット」のプルダウンメニューをクリックし「MS-DOS(FAT)」を選択後に「消去」をクリックする。「方式」はデフォルトの状態からいじらない。(ちなみにフォーマット後にUSBのファイルシステムを確認すると「FAT32」と表示されているがこれはMacOS側がUSBメモリの容量に応じて自動で「FAT32」に設定してくれたものなので気にしなくて良い、「FAT」を選択してフォーマットするとOS側で自動で判断して適切なファイルフォーマットに変えてくれる。)

      f:id:miriwo:20201121222430p:plain

    6. 一旦USBを抜き差しする。

    7. 下記にアクセスする。
    8. 「Download for macOS」をクリックする。

      f:id:miriwo:20201121190232p:plain

    9. 「ダウンロード」フォルダにダウンロードされた「balenaEtcher-1.5.105.dmg」をダブルクリックで開く。

      f:id:miriwo:20201121190723p:plain

    10. 下記のようなウインドウが開いたら、開いたウインドウ上の緑色のアイコンをドラックして「Applications」フォルダに入れる。

      f:id:miriwo:20201121190953p:plain

    11. 「アプリケーション」フォルダの「balenaEtcher」のアイコンをダブルクリックしてアプリを起動する。

      f:id:miriwo:20201121191206p:plain

    12. Flash from file」をクリックする。

      f:id:miriwo:20201121191349p:plain

    13. 先にダウンロードしたUbuntuのisoファイルを選択する。

      f:id:miriwo:20201121191520p:plain

    14. 「Select terget」をクリックする。

      f:id:miriwo:20201121191737p:plain

    15. 先程フォーマットを行ったUSBメモリにチェックマークを入れて「Select(1)」をクリックする。

      f:id:miriwo:20201121191859p:plain

    16. Ubuntuのisoファイル、書き込むUSBメモリが正しいことを確認して「Flash!」をクリックする。

      f:id:miriwo:20201121192007p:plain

    17. 下記のようなウインドウが出たらMacのユーザにログインするときのパスワードを入力して「OK」をクリックする。

      f:id:miriwo:20201121192221p:plain

    18. アプリケーションがMacのファイルにアクセスすることを許可するかを聞かれるので許可する。一度焼き込みに失敗することがあるが落ち着いて再度USBメモリを選択し直し「Flash!」をクリックする。

    19. 焼き込みが完了するまで待機する。

      f:id:miriwo:20201121192745p:plain

    20. 下記のウインドウが開いたら「取り出す」をクリックする。

      f:id:miriwo:20201121192821p:plain

    21. balenaEtcherのウインドウで下記のように書き込みが完了した表示がされていたら作業完了である。

      f:id:miriwo:20201121192917p:plain

参考文献

メモ

Windows10 CrystalDsikMark 導入方法

目的

方法

  1. 下記にアクセスする。
  2. 「Standard Edition」の「zip」をクリックする。(特にこだわりがなければ最新版のzipをクリックすることをおすすめする。)

    f:id:miriwo:20210320212624p:plain

  3. ダウンロードしたzipを解凍し、中に入っている64bit版(ほとんどのPCはこちら)のWindows10の方は「DiskMark64.exe」をダブルクリックしてソフトを起動する。

  4. 問題無く起動できれば導入は完了である。

Vue.js propsと$emitの個人用メモ

概要

  • Vue.jsのpropsと$emitについて理解にかなり時間がかかったので簡単にまとめておく

propsって?

  • コンポーネント化したときに使うものだよ。
  • コンポーネントから子コンポーネントにデータを渡したい時に使うよ。
  • htmlのタグの要素(aタグのhref要素)と同じ感じで親コンポーネントのタグ内で渡す値を指定するよ。
  • コンポーネントのタグ内で渡したい値をpropsに格納することができるよ。
  • コンポーネントのVueインスタンス内で定義した変数をv-bindでpropsに紐付けることができるよ。
  • コンポーネントから配列が渡ってきて、子コンポーネント側で変更を加えちゃうと親側にも影響を与えるよ。(参照渡し)関数を用いてから値を変更しようね。
  •   <!DOCTYPE html>
      <html lang="ja">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
          <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
          <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
          <style>
              .parent {
                  width: 800px;
                  margin: 0 auto;
                  border: 1px red solid;
              }
              .child {
                  width: 30%;
                  margin: 0 auto;
                  border: 1px blue solid;
              }
          </style>
      </head>
      <body>
          <div id="app" class="parent">
              <emit-test class="child" @custom-event="parentMethod">
              </emit-test>
          </div>
    
          <script>
              let emitTest = {
                  template: `<div>
                      <button @click="childMethod">
                          子側のボタン
                      </button>
                  </div>`,
                  methods :{
                      childMethod(){
                          this.$emit('custom-event', '子の値')
                      }
                  }
              }
              let app = new Vue({
                  el: '#app',
                  components: {
                      emitTest
                  },
                  data(){
                      return{
    
                      }
                  },
                  methods: {
                      parentMethod(e){
                          console.log(e)
                      }
                  }
              })
          </script>
      </body>
      </html>
    

emitって

  • コンポーネント化した時に使うものだよ。
  • コンポーネントから親コンポーネントにデータを渡したい時に使うよ。
  • まずは子コンポーネントでthis.$emit('カスタムイベント名', 親コンポーネントに渡したい値)を子側の関数として定義、その関数をv-onとかで発火するように設定するよ。
  • そして親コンポーネントでカスタムイベント名とカスタムイベントが実行された時に実行する親側の関数として定義するよ。その関数の中では子側から受け取った値をどうにかする処理を書くよ。(ログに出すとか、配列に入れるとか)
  • カスタムイベントは必ずケバブケースで定義するよ。
  •   <!DOCTYPE html>
      <html lang="ja">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
          <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
          <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
          <style>
              .parent {
                  width: 800px;
                  margin: 0 auto;
                  border: 1px red solid;
              }
              .child {
                  width: 30%;
                  margin: 0 auto;
                  border: 1px blue solid;
              }
          </style>
      </head>
      <body>
          <div id="app" class="parent">
              <emit-test class="child" @custom-event="parentMethod">
              </emit-test>
          </div>
    
          <script>
              let emitTest = {
                  template: `<div>
                      <button @click="childMethod">
                          子側のボタン
                      </button>
                  </div>`,
                  methods :{
                      childMethod(){
                          this.$emit('custom-event', '子の値')
                      }
                  }
              }
              let app = new Vue({
                  el: '#app',
                  components: {
                      emitTest
                  },
                  data(){
                      return{
    
                      }
                  },
                  methods: {
                      parentMethod(e){
                          console.log(e)
                      }
                  }
              })
          </script>
      </body>
      </html>
    

Gmailが届いた通知をSlackに通知しよう(Slack Botに通知してもらう方法)

概要

  • Gmailにメールが届いた事をSlackに通知する方法をまとめる

方法

  1. Slack側の設定

    1. ワークスペース名をクリックして「環境設定」をクリックする。

      f:id:miriwo:20220225104519p:plain

    2. 「メッセージ & メディア」をクリックする。

      f:id:miriwo:20220225104557p:plain

    3. 「Slackへのメール転送」の「コピー」をクリックする。

      f:id:miriwo:20220225104648p:plain

  2. Gmail側の設定

    1. Gmailの画面の右上の歯車マークをクリックする。

      f:id:miriwo:20220225105521p:plain

    2. 表示されたサイドメニューの「すべての設定を表示」をクリックする。

      f:id:miriwo:20220225163439p:plain

    3. 上部メニューの「メール転送とPOP/MAP」クリックする。

      f:id:miriwo:20220225163623p:plain

    4. 「転送先アドレスを追加」をクリックする。

      f:id:miriwo:20220225163759p:plain

    5. 入力欄に「Slackへのメール転送」でコピーした内容を貼り付ける。

    6. 下記のようなポップアップが出たら「OK」をクリックしてSlack側に転送されているメールを開きリンクをクリックする。
    7. これで当該のGmail宛にメールが来たら、SlackBotが通知を出してくれるようになる。

Laravel とLaravel Mixの関係(自分用にざっくりまとめてみる)

概要

  • Laravel Mixが何なのかちゃんと分かっていなかったのでまとめてみる

Laravel Mix とは

  • Laravelのフロントのコンパイルしてくれるツール
  • scssとかjsとかをコンパイルとかファイルをまとめたりしてくれるツール
  • 設定ファイルにはwebpackを用いる。webpackを用いてどのscssをコンパイルするとか、どれとどのjsファイルをまとめてコンパイルするとかを設定できる
  • 設定ファイルにwebpackを使っているからjsを束ねる(a.jsとb.jsをコンパイルしつつapp.jsにして指定のディレクトリに設置)とかができる
  • Laravel MixはNode.jsが入っていてnpmコマンドが実行できる環境じゃないと使えない

よく使われる例

scssのファイルをコンパイル

jsのファイルをコンパイル

参考文献