Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

ubuntu18.04インストールして必要最低限をセットアップ

ubuntu

参考にさせて頂いたページ

sshキーを生成

sshキーを生成する

ssh-keygen -t rsa

アプリケーションをインストール

setup.sh ファイルを以下のような感じで作成します。

sudo apt-get update -y
sudo apt-get upgrade -y
# sudo dpkg --configure -a
sudo apt-get install -y vim
sudo apt-get install -y pinta
sudo apt-get install -y git

# dockerをインストールしてHelloWorld
# sudo apt-get install -y docker-ce

sudo apt-get install -y \
  apt-transport-https \
  ca-certificates \
  curl \
  software-properties-common

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
sudo apt update
sudo apt install -y docker-ce
sudo docker run --rm hello-world

# Chromeをインストール
sudo sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
sudo wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
sudo apt-get update
sudo apt-get install google-chrome-stable

後日セットアップ用のリポジトリ作成しつつsetup.shを更新していこうと思います。

ubuntu18.04でdockerのHelloWorldまでやってみる

ubuntu docker

参考にさせて頂いたページ

コマンド

参考にさせて頂いたページのinit_docker.shを実行するとHelloWorldができました。

init_docker.shの内容は以下の通り。

sudo apt-get update
sudo apt-get install \
  apt-transport-https \
  ca-certificates \
  curl \
  software-properties-common
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
sudo apt update
sudo apt install -y docker-ce
sudo docker run --rm hello-world

Ubuntu18.04でアプリケーションを選択して起動する（ターミナルを起動する）

ubuntu

アプリケーション一覧を表示する

左下の「アプリケーションを表示する」をクリックします。

f:id:motomichi_works:20180923183353p:plain

アプリケーションを選択して起動する

下部のすべてをクリックします。

右の円をクリックしてページを切り替えます。

今回はターミナルを例とします。

「端末」をクリックするとターミナルが起動します。

f:id:motomichi_works:20180923183406p:plain

Windows7を削除してUbuntu18.04に変更する

ubuntu

参考にさせて頂いたページ

Ubuntuをインストールする方法

コマンドでwifiに接続する方法

isoをDVDに書き込む方法

はじめに

Windows7のサポートが切れて放置していた端末がありました。

端末が故障しているわけではないので、OSをインストールしなおしました。

Ubuntuは、Linuxディストリビューションのひとつですが、以下のキャプチャのようにウィンドウでフォルダを開いたり、マウスで操作できて使いやすいです。

f:id:motomichi_works:20180923185028p:plain

準備したもの

USBメモリでもできるそうですが、以下を使用しました。

  • 外付けDVDドライブ
  • DVD-R（1枚）

UbuntuのisoファイルをダウンロードしてDVDディスクに焼く

isoのダウンロードとディスクイメージの書込みはWindows10で行っています。

「Ubuntu ダウンロード」などで検索すると公式サイトが見つかると思います。

f:id:motomichi_works:20180923152911p:plain

isoファイルはおよそ1.8GBありました。
ダウンロードには時間がかかると思いますのでのんびり待ちます。

「ubuntu-ja-18.04.1-desktop-amd64.iso」をダウンロードしました。

isoファイルを右クリックして「ディスクイメージの書込み」をクリックします。

f:id:motomichi_works:20180923152926p:plain

Windows7を削除してUbuntuをインストールする

Bootの設定を変更する

biosを起動して、Bootの設定を変更します。

通常はハードディスクにインストールされているWindowsを最初に実行するようになっていますが、DVDドライブを最初に読み込ませたいので変更します。

bios起動方法はメーカーによって違うかもしれませんが、私はF2を押したまま電源を入れたらbios起動できました。

画面の構成もメーカーによって違うと思いますが、Bootタブを選択して、プライオリティを変更したり、EnabledとかDisabledとかドライブ毎に設定して、設定を保存します。

Bootタブを選択

f:id:motomichi_works:20180923165022j:plain

設定を変更したら「Save & Exit」してbiosを終了します。

f:id:motomichi_works:20180923165159j:plain

Ubuntuをインストールする

「Ubuntuを試す」「Ubuntuをインストール」という選択肢が表示されます。

インストールせずにDVDからそのままUbuntuを起動して試すこともできるようですが、「Ubuntuをインストール」を選択して先に進みます。

wifiの設定や、その他設定のダイアログが表示されるので、ラジオボタンを選択したりしてそのまま進めていきます。

初期設定はとてもかんたんなので心配無用です。

設定されるのをしばらく待つ

さきほど選択、入力した項目をもとに設定が行われるのを慌てずしばらく待ちます。

待っていると、以下のようなUbuntuの説明が表示されたりします。
右上にシステムメニュー、左下にアプリケーションボタンがあるのがわかります。

f:id:motomichi_works:20180923201225p:plain

「Canonical Livepatch Service」とは、カーネルを再起動することなく、深刻な脆弱性などに対する修正を適用するサービスです。

f:id:motomichi_works:20180923201235p:plain

アプリケーションの紹介です。

f:id:motomichi_works:20180923201245p:plain

もう少し待つとソフトウェアアップデートを促されるのでインストールします。

f:id:motomichi_works:20180923201324p:plain

キーボード選択のプルダウンが表示されますが、ノートPCでよくわからないのでそのまま「Generic 105-key PC (Intl.)」を選択しました。

f:id:motomichi_works:20180923201530p:plain

再起動してBootの設定を戻す

Ubuntuの初期設定が完了すると再起動を促されます。

再起動は画面右上のシステムメニューからできます。

再起動し、再びF2をおしっぱなしにして、bios画面を開きます。

今度はハードディスクにインストールしたUbuntuを最初に読み込ませたいので変更します。

おまけ

最初、もう使えるかと思ってけっこう慌ててFirefoxを起動してしまい、「半角/全角」キーを押しても日本語入力ができなくて困ったりしましたが、設定が完了して落ち着くのを待てばよかっただけのようです。

「Prt Scr」キーを押すとスクリーンショットがとれます。

マウスを右クリックして、「新しいフォルダを作成」してフォルダを開くと「ピクチャ」ディレクトリへのリンクなどもあり、「ピクチャ」ディレクトリにスクリーンショットが保存されています。

慣れないOSで使いにくいと思ったのも束の間、少し慣れてきました。

ついでに以下の記事も書きました。

Windows10でスクリーンショットをとる方法いろいろ

参考にさせて頂いたページ

クリップボードに保存する

クリップボードに保存したあとはペイントなどのアプリケーションにペーストすると良いでしょう。

ディスプレイ全体

  • PrtSc キーを押す

ウィンドウ全体

  • alt + PrtScn キーを押す

範囲指定

  • Windows + Shift + s キーを押す

[ピクチャ] フォルダ内の [スクリーンショット]フォルダにpng画像を保存する

  • Windows + PrtSc キーを押す

vue-test-utilsを試してみる | vue-test-utils その0001

vue-test-utils

参考にさせて頂いたページ

公式ドキュメント(日本語版)

公式リポジトリ

vue-test-utils

vue-test-utils-jest-example

今日の環境

  • Windows10
  • node 8.11.1
  • npm 5.8.0

ひとまずREADMEを読む

とりあえずは読むだけでコマンドは実行しません。

2018年09月17日現在ではbeta版だそうです。

npm install --save-dev @vue/test-utils

または

npm install --save-dev @vue/server-test-utils

でインストールするとのこと。

テスト実行時に使用するため、テンプレートコンパイラも必要です。

npm install --save-dev vue-template-compiler

バージョンについての注意書きがありました。
ここ大事ですね。
Vueのバージョンと同じでないといけないそうです。
以下は引用文とその翻訳です。

You need to install vue-template-compiler which is used to compile components. It should be the same version as the version of Vue you are using.

コンポーネントをコンパイルするために使用されるvue-template-compilerをインストールする必要があります。 これは、使用しているVueのバージョンと同じバージョンでなければなりません。

jestの例をcloneして実行してみる

簡単そうなのでjestを使ってみることにします。

リポジトリをcloneする

GitHub - vuejs/vue-test-utils-jest-example: Example project using Jest + vue-test-utils together から以下のコマンドでリポジトリをcloneします。

git clone git@github.com:vuejs/vue-test-utils-jest-example.git

node_modulesをインストールする

まず移動します。

cd vue-test-utils-jest-example

git cloneするとpackage.jsonも含まれているので、一度node_modulesをインストールします。

npm install

buildを実行してみる

READMEにならって、buildを実行してみます。

npm run build

以下のように表示されました。

> vue-test-utils-jest-example@1.0.0 build C:\Users\motomichi\Desktop\vue_test_utils__samples\vue-test-utils-jest-example> cross-env NODE_ENV=production webpack --progress --hide-modules

Hash: f98dca254ec3566403ca
Version: webpack 3.12.0
Time: 8281ms
       Asset     Size  Chunks             Chunk Names
    build.js  99.2 kB       0  [emitted]  main
build.js.map   847 kB       0  [emitted]  main

build.js と build.js.mapが出力されたことがわかります。

testを実行してみる

READMEにならって、testを実行してみます。

npm test

以下のように表示されました。

> vue-test-utils-jest-example@1.0.0 test C:\Users\motomichi\Desktop\vue_test_utils__samples\vue-test-utils-jest-example
> jest

 PASS  test\Message.spec.js
 PASS  test\List.spec.js
 PASS  test\MessageToggle.spec.js

Test Suites: 3 passed, 3 total
Tests:       5 passed, 5 total
Snapshots:   1 passed, 1 total
Time:        5.635s
Ran all test suites.

以下のspecが実行されたことがわかります。

  • test\Message.spec.js
  • test\List.spec.js
  • test\MessageToggle.spec.js

終わりに

とりあえず簡易的にテストを実行するだけしてみました。

package-jsonを見れば、既存のプロジェクトに導入するのに必要なパッケージもわかりますし、srcとtestの内容を読めば使い方もわかりそうです。

次は軽くsrcとtestのディレクトリ内にあるファイルを読んでみようと思います。

以下の公式ドキュメントにガイドがありますので、基本的な使い方は学習がしやすそうです。

ガイド | Vue Test Utils