2020-08-07

MacBook proを買った！！！最初からいろいろ入れる！！！

MacBook proを買いました！！

前までmacbookだったんだけど、受験の合格祝いでproになった！！

いろいろ設定とかしていきましょー

Xcode入れた！
home-brew 入れた！
fish入れた！！

config.fishにproxyの設定書いた

brew cask install google-chrome入れた！！！
brew cask install visual-studio-codeでVScode入れた！！
google file streamを入れた！！
brew cask install sourcetreeでsourcetreeを入れた！！
slack入れた！！
brew install gibo でgiboを入れた
brew install gitでgit入れてみた
brew cask install alfredでalfred入れた
spectacle入れた！！
office入れた！！
clipy入れた！！
mathpix-snipping-tool入れた！！
appCleaner入れた！！
brew cask install sublime-text
brew cask install keyboardcleantool
brew install icarus-verilog
brew cask install gtkwave

ssh で鍵の設定！

ssh-keygen

鍵をbitbucketに追加

pbcopy < ~/.ssh/id_rsa.pub

接続できたー！！

yarnを入れる！！！

brew install yarn

追加

yarn add global @vue/cli
yarn add global @vue/cli-init

yarnでjsonを動かす

yarn serve

server動いたー！！

2020-07-26

vueのいじってみた2

なんかいろいろやってみる webpack?? veu init

gakugaku@gakunoMacBook ~/g/s/veu (master)> vue init webpack test2/

? Target directory exists. Continue? Yes
⠋ downloading template
? Project name test2
? Project description A Vue.js project
? Author gaku <m16095@g.metro-cit.ac.jp>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

動かしてみる

nmp run dev

で動いた

Circuit.vueを作成し、以下を記入

<template>
  <div class="circuit">
    <img alt="test" src="../assets/test.png" />
    <p v-if="msg.length > 0">
      {{ msg }}
    </p>
    <h1></h1>
    <input type="number" v-model="msg" />
    <button @click="clear()">clear</button>
    <canvas id="board" width="460" height="460"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello World!"
    };
  },
  methods: {
    clear() {
      this.msg = "";
    }
  }
};

window.onload = () => {
  // canvas準備
  const board = document.getElementById("board"); //getElementById()等でも可。オブジェクトが取れれば良い。
  const ctx = board.getContext("2d");

  // 画像読み込み
  const chara = new Image();
  chara.src = "/images/test.png"; // 画像のURLを指定

  console.log(chara.src);
  chara.onload = () => {
    console.log("a");
    ctx.drawImage(chara, 0, 0);
  };
};
</script>

index.jsに以下を追加

{
    path: "/circuit",
    name: "Circuit",
    component: () => import("../views/Circuit.vue")
  }

App.vueに以下を追加

<router-link to="/circuit">Circuit</router-link>

回路の画像はassetsだとwebpackされてしまい、画像として認識されなかったので、publicにimagesフォルダを作成しそこに追加

canvasで画像を編集し始めてみる

window.onload = () => {
  // canvas準備
  const board = document.getElementById("board"); //getElementById()等でも可。オブジェクトが取れれば良い。
  const ctx = board.getContext("2d");
  const scale = 1; // 縦横を50%縮小
  // 画像読み込み
  const chara = new Image();
  chara.src = "/images/test2.png"; // 画像のURLを指定
  chara.onload = () => {
    var dstWidth = chara.width * scale;
    var dstHeight = chara.height * scale;
    ctx.drawImage(chara, 150, 100, dstWidth, dstHeight);
  };
};

これで、画像の位置と大きさを変更できるようになっ

window.onload = () => {
  // canvas準備
  const board = document.getElementById("board"); //getElementById()等でも可。オブジェクトが取れれば良い。
  const ctx = board.getContext("2d");
  const scale = 1; // 縦横を50%縮小
  // 画像読み込み
  const chara = new Image();
  chara.src = "/images/test2.png"; // 画像のURLを指定
  var wides = window.innerWidth;
  var high = window.innerHeight;
  var text = "5";
  chara.onload = () => {
    var dstWidth = chara.width * scale;
    var dstHeight = chara.height * scale;
    board.width = wides;
    board.height = high;
    var a = 25;
    ctx.font = a + "px sans-serif";
    ctx.drawImage(chara, 150, 100, dstWidth, dstHeight);
    ctx.fillText(text, 280, 270);
    ctx.fillText("", 100, 270);
  };
};

またちょっと変更した

2020-07-17

vueをいじり始めました

vueを入れてみる

ESlint vetur を入れた

vue create gakuで作ってみる

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: Yarn

warning ../package.json: No license field

のwarningに対して package.jsonに以下を記入した

"license": "UNLICENSED",

chokidarで自動コンパイルができるようになった。これは自分でできた

chokidar __tests__/*.js *.js -c "yarn jest"_

でyarnの自動コンパイルができるようになるっぽい

context beforereechってやつを調べて、テストやってみる

yarn jestはできるようになった localファイルにyarn addしたこれでyarn jestができるようになるらしい要調査

yarn add jest babel-jest babel-core@^7.0.0-bridge.0 @babel/core @babel/preset-env
yarn add @babel/plugin-transform-modules-commonjs

よくわかんないけど locaファイルに.babelrcを作成以下を記入

{
  "env": {
    "test": {
      "plugins": [ "@babel/plugin-transform-modules-commonjs" ]
    }
  }
}

自動整形もできるようになった setting.jsonに記入

{
    "workbench.colorTheme": "Default Light+",//ワークベンチのテーマ デフォルトの白
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
      "source.organizeImports": true,
      "source.fixAll": true
    },
    "editor.formatOnPaste": false,
    "editor.formatOnSave": false,
    "editor.formatOnType": true,
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      "vue",
      "typescript"
    ],
    "vetur.format.defaultFormatter.css": "prettier",
    "vetur.format.defaultFormatter.scss": "prettier",
    "vetur.format.defaultFormatter.html": "prettier",
    "vetur.format.defaultFormatter.js": "prettier-eslint",
    "vetur.format.defaultFormatter.ts": "vscode-typescript",
    "vetur.validation.template": false
}

よくわかんないけど

yarn jestのテスト

// __test__/test.js
import { add } from "../r_add";
test("add 1 + 2", () => {
  expect(add(1, 2)).toBe(3);
});

をtest.jsに記入

r_add.jsに以下を記入

// r_add
export function add(a, b) {
  return a + b;
}

ここでyarn jest テスト完了

Vue.js を vue-cli を使ってシンプルにはじめてみる - Qiita

JavaScriptでも単体テストを導入しよう！ってかテストって何？

先週のGASの文

function doGet(e) {
  var no = e.parameter.no;
  var UserInfo = Session.getActiveUser().getEmail();
  var ss = SpreadsheetApp.getActive().getSheetByName('進捗状況');
  var lastRow = ss.getLastRow();
  var flag = false;
  for (var i = 2; i <= lastRow; i++) {
     if (ss.getRange(i, 1).getValue() == UserInfo) {
       ss.getRange(i, no).setValue("AAA");
       flag = true;
       break;
     }
  }
  if (flag == false) {
     return ContentService.createTextOutput("ユーザが見つかりません。");
  } else {
     return ContentService.createTextOutput("User："+UserInfo+"\nNo. " + no + " シートへの登録が完了しました");
  }  
}

2020-06-02

macのよく使うショートカットキー

こんにちは

このブログはmacを買った友達とかに見せられたらなーぐらいで書いてるブログなので

macを初めて買った人にとっては、少しいいかもしれません

まぁ、こんなブログ見てくれた人には感謝を申し上げます！

あと、ブログを書くのが初めてなので、文が読みにくかったらごめんなさいねー

じゃあ、スタート

スクリーンショット
強制終了
並び替え
ウィンドウを移動
Spotlight
カーソル移動？
フルスクリーン
タブ移動
選択したファイルを収納

スクリーンショット

macでのスクリーンショットは

commnd + shift + 3

で画面全体を撮ることができます！

また、

command + shift + 4

では、カーソルでビーーっと引っ張った部分だけ撮ることができます！

あと！

command + shift + 5

では、開いてるウィンドウだけを撮ることができるんでおすすめ！

うーん、なんかコマンドのところ見にくいなぁ

なんか、スクリプトモードみたいなやつあるのかなぁ

強制終了

アプリが応答しなくなった時とかめっちゃ使う強制終了

command + option + esc

で強制終了画面が開けますよー

並び替え

finderでファイルを持って移動してる時とか、微妙に位置がずれてうざいときありません？

右クリックして、整頓もできますがちょっとめんどくさい…

そんな時は、

command + option + 1

か

command + option + 2

で並び替え＆整頓してくれますよー

1と2は、並び替え方が違う感じですねー、まぁ好みの方に

ウィンドウを移動

これ、最近めっちゃ使ってるんですけど

finderとか、めっちゃウィンドウ開いて、いろんなところにアクセスする時とかあるじゃないですか…

f:id:sekigaku1124:20200602202459p:plain

まぁこんな感じ

この時、3本指で上に持ち上げて、ウィンドウ見てみたいな、めんどくさいよね…

この時、

command + F1

でウィンドウ巡回できるんですよー

でもF1使うのに、fnキー押さないといけないのめんどくさいので、自分はデフォルトFキーに設定してますー

ちょっとおすすめ

Spotlight

アプリとか、いろいろ開くのめんどくさい時あるよね

そんな時

command + スペース

押すと、Spotlightが立ち上がって、立ち上げたいアプリを押すと立ち上げてくれるよー

でも自分はあんまり使ってなくて…笑

ここでおすすめなのが

alfredっていうアプリ

spotlightみたいなアプリだけど、アプリとか、ファイルとか、結構順応に見つけてくれるから、良い良い

まぁ詳細書くのめんどくさいから、alfredって調べてみてねー

カーソル移動？

カーソル移動っていうのかわかんないけど、今文字打ってるところに点滅してるやつあるじゃないですか

それ、移動させるのめんどくさくないですか…

ドラッグパッド使ってってのもちょっとめんどくさいし…

って時に使うのが

command + 十字キー

押すと、押した十字キーの方向の一番端っこまで行ってくれるよ

しかも、

command + shift + 十字キー

でやると、その移動した分を選択してくれるっていうね！

結構便利ですよ

あと、もう一つ

option + 十字キー

でやると、端っこまでは行きたくないけど、ちょっと遠いなぁって時に使えますよ

文字の塊ごとに移動してくれる方法です

まぁ、こういう時はドラッグパッド使えって感じもするけど…笑

フルスクリーン

まぁまぁ使うコマンド

command + control + F

これで、フルスクリーンにできるよー

あと、もう一つ紹介したいのが、

ウィンドウを画面右側（左側）にタイル表示

ってやつ

これはコマンドはないんだけど、左上の緑の部分にカーソルおいたり、長押ししたりすると出てくるよ

これは、ウィンドウを2つ画面に表示してくれるやつですよ

説明するのめんどくさいから、やってみてね

あと、これをコマンド化するには、設定でできるよー

設定→キーボード→ショートカットて感じで追加すればできるんよ

まぁ追加の仕方は、書くのめんどくさいから、調べてね笑

タブ移動

これ、結構使う

webとか、finderとか、タブめっちゃ作るじゃないですかー

その時に

command + 数字

で、右から数字番目のタブに移動できるんですよー

でもちょっと気にしないといけないのが、

0は一番最初のタブ

9は一番最後のタブ

ってことかなー

選択したファイルを収納

これも結構使う

finderで

2020-05-19

初はてなブログ!!

こんにちは、がくです

これから、卒研の進捗とか、macの情報とか書いていこーと思ってまーす

よろしくお願いしますー