週報 4週目(2020/03/28)

2020/03/28 Up

仕事が忙すぎて先週サボりました。今週も忙しかったので書くことがない。

サイト更新

vue-analyticsを追加した。公式ドキュメント通りにやってもGoogle Analyticsが動かなかったが、routerを利用する形にすると動作した。 よくわからんがまぁよし。

ついてにvue-routerも追加した。公式ドキュメントどおりにやっても動かなかったが下記宣言を追加すると動いた。

// これがないと
// [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
// 的なエラーが出る
Vue.use(VueRouter)

公式には載っていなくて辛い。。と思ったら済っこの方に載っていた。。辛い。。

[https://github.com/vuejs/vue-cli/issues/3999]([Vue warn]: Unknown custom element: · Issue #3999 · vuejs/vue-cli)
[https://router.vuejs.org/ja/guide/#html](はじめに | Vue Router)

来週はファビコン作りたい。

週報 3週目(2020/03/16)

2020/03/16 Up

サイト更新

なし

web1weekでアプリを作った

一週間でWebアプリ作るイベントに参加して、「都道府県ランキングバトル」というゲームを作った。

都道府県ランキングバトル

都道府県別ランキングで戦う一人用ゲームをつくりました (3/9~3/15)1週間でWebサービスを作るイベント - お題「Home」 - Boards - Crieit

ソースコード - github

各種統計データと手札として、都道府県ごとに対戦していくゲーム。 手札の強さが相手ごとに変わるという点で、どの手札をどのタイミングで使うかという戦略性や、どの手札がどれだけ強いのかを推理するというリプレイ性が出せた(と思う)。

ゲームを作るのは初めてだったので、できるだけ柔軟に対応できるようにjQueryで書いた。
Prototype形式の書き方は分からなかったので、疑似クラス形式で書いたところ、それなりにスムーズに書けた。イベント周りをEventController的なもので管理してみたが、このあたりはもう少しやりようがあったかもしれない。

パラメータを渡して該当のclassのtextを変える関数を作って、textを書き換える処理はすべてこの関数に任せる形とした。結果的にこれが一番便利に機能していた。

ランキングデータの入力が面倒だったので、ランキングデータごとに「北海道,福岡県, ... 」というように、一位から都道府県を並べる文字列を静的に格納し、ページアクセス時にこれらをコンマでsplitしてデータ構造を構築する処理を作ることでデータ入力を簡易化した。

topコマンドを理解する

2020/03/09 Up

topコマンド

$ top          # CPU使用率順にソート
$ top -a       # メモリ使用率順にソート
$ top -p [PID] # 特定のプロセスを監視
$ top -d [s]   # s秒ごとに更新

表示後のソート方法

Shift+o: 表示された特定のキーを押してEnterすると任意の列でソートできる
Shift+p: CPU使用率順にソート
Shift+m: メモリ使用率順にソート

topコマンド表示内容

top - 14:29:38 up 1 day, 21:07,  1 user,  load average: 1.18, 1.27, 1.11
Tasks: 424 total,   1 running, 350 sleeping,   0 stopped,   0 zombie
%Cpu(s): 25.2 us,  5.4 sy,  0.2 ni, 68.0 id,  0.1 wa,  0.0 hi,  1.2 si,  0.0 st
KiB Mem : 14280684 total,  1613724 free,  8094220 used,  4572740 buff/cache
KiB Swap:  1003516 total,   999952 free,     3564 used.  5545680 avail Mem 

load_average
1CPUにおける単位時間あたりの実行待ちとディスクI/O待ちのプロセスの数。
(値の導出はそれぞれ左から過去1分、過去5分、過去15分のデータが元となる)

I/O負荷が0の場合、load_averageがCPUのコア数と同じであればCPU利用率が100%となる。
逆にCPU負荷が低い場合にload_averageが高い場合はI/O負荷が高いことを表している。

CPUのコア数はコマンドから確認できる。

物理CPUの数
$ grep physical.id /proc/cpuinfo | sort -u | wc -l
1

CPUごとのコア数
$ grep physical.id /proc/cpuinfo | sort -u | wc -l
cpu cores: 4

%Cpu(s)

  • us: ユーザプロセスの使用時間
  • sy: システムプロセスの使用時間
  • ni: 実行優先度を変更したユーザプロセスの使用時間
  • id: アイドル状態の時間
  • wa: I/Oの終了待ちをしている時間
  • hi: ハードウェア割込み要求での使用時間
  • si: ソフトウェア割込み要求での使用時間
  • st: ホスト上でゲストOSとVMがCPUを取り合ったことによる待ち状態の時間

メモリ不足かどうかの判断

「Freeなメモリが少ない!」 ->
キャッシュされたメモリだけで上手く動いていることもあるのでなんとも言えない。

「Swapメモリめっちゃ使ってる!」 -> 使用頻度が少ないメモリはSwap領域に移動させられるので、これもなんとも。

何を見て判断すべき?
リアルタイムなページング状況をvmstatで確認する。

$ vmstat 1 5  # 1秒ごとに5回実行する

procs -----------memory---------- ---swap-- -----io---- -system-- ------cpu-----
 r  b   swpd   free   buff  cache   si   so    bi    bo   in   cs us sy id wa st
 1  0   4588 1524292 775096 3803980    0    0    24    79  303  245 21  6 73  0  0
 0  0   4588 1523968 775120 3803844    0    0     0   336 1914 2915  1  0 99  0  0
 6  0   4588 1523788 775128 3803980    0    0     0   232 2040 2904  1  0 99  0  0
 1  0   4588 1523788 775128 3803980    0    0     0     0 1930 2767  1  0 99  0  0
 0  0   4588 1524040 775136 3803980    0    0     0   444 2087 2985  1  1 98  0  0
  • r: ランタイム待ちのプロセス数
  • b: 割り込み不可なsleep状態のプロセス数
  • si: ディスクからスワップインされているメモリ量(KB/s)
  • so: ディスクからスワップアウトされているメモリ量(KB/s)
  • bi: ブロックデバイスから受け取ったブロック (blocks/s)
  • bo: ブロックデバイスに送られたブロック (blocks/s)
  • in: 一秒あたりの割り込み回数。クロック割り込みも含む
  • cs: 一秒あたりのコンテキストスイッチの回数

ブロックデバイスとはブロック単位でデータを読み書きできるデバイスのこと。 ハードディスクはこの方式で、キーボードのような文字ごとのやり取りを行う装置はキャラクタデバイスという。

基本的にsiとsoは0となるが、メモリが不足してる場合はメモリ管理を行う必要が出るため、スワップイン・スワップアウトが頻繁に発生することとなる。

コンテクストスイッチはプログラムの切り替え回数。プロセッサは高速で切り替えを行うことで並列処理を行っているかのように見せているが、このコンテクストスイッチが多いとその分オーバーヘッドが生じる。

参考文献

[topコマンドの使い方 - Qiita] (https://qiita.com/k0kubun/items/7368c323d90f24a00c2f)

[LinuxのI/OやCPUの負荷とロードアベレージの関係を詳しく見てみる - Qiita] (https://qiita.com/kunihirotanaka/items/21194f77713aa0663e3b)

[【Linux】Load Averageに関するいろは - Qiita] (https://qiita.com/ryuichi1208/items/3b21aee6c38bcfdb12b1)

[Load Average はどうやって算出されているのか | TECHSCORE BLOG] (https://www.techscore.com/blog/2017/12/08/how_is_load_average_calculated/)

[物理 CPU、CPU コア、および論理 CPU の数を確認する - Red Hat Customer Portal] (https://access.redhat.com/ja/solutions/2159401)

[CPU使用率は間違っている | Yakst] (https://yakst.com/ja/posts/4575)

[linux - What does %st mean in top? - Server Fault] (https://serverfault.com/questions/230495/what-does-st-mean-in-top)

[LinuxのCPU使用率の%stealについて - Qiita] (https://qiita.com/thatsdone/items/e9592126ec0f8d445113)

[vmstatコマンドについて調べてみた | 技術情報ブログ | マネージドホスティングのディーネット] (https://www.denet.ad.jp/technology/2017/10/vmstat.html)

週報 2週目(2020/03/08)

2020/03/08 Up

サイト更新

前回の記事はHTMLで直書きしていたのでmarkdownで記事を書けるようにした。 ローカルのmdファイルを読み込んでビルドする場合、必要なモジュールが多い。 あとから不必要に和る設定が増えるのも嫌だったので、ヒアドキュメントで書いたmarkdown形式の文字列をmarkedでparseし、コンポーネントに渡す形にした。

marked - github

Peek

MacではGyazo Teamsを使っていたが、Ubuntuでは使えないのでgif撮影するためにPeekを入れた。 当たり前だが撮影直後にGyazoに自動アップロードされることはないけど、それ以外は全く問題ない。

phw/peek: Simple animated GIF screen recorder with an easy to use interface

拡張ディスプレイにおけるワークスペースの設定

Macでは主要ディスプレイと拡張ディスプレイは個別のワークスペースとなっていたが、Ubnutu18.04だとどちらも同一のワークスペースとしてみなされる。 拡張ディスプレイの表示だけそのままで主要ディスプレイのワークスペースを変えたい、というシーンが結構あるので設定方法を調べて設定した。
(思ったより簡単にできた)

ubuntu 18.04のデュアルモニターワークスペース

ターミナルの「ヴッ」をならないように設定

ターミナルのビープ音、それなりに好きなんだけどZoomで会議通話してるときとか自然環境音流しながら作業してるときに小うるさいので消した。

Ubuntuの「端末」で耳障りな「ビープ音」を消す方法 | LFI

その他

  • マスクがないので花粉が辛い。加湿器購入のきざし。
  • ショートカットコマンドで即座に起動してメモを取れるアプリ欲しい。
  • SHIROBAKO観たい。けどコロナが。。
  • スマホからTwitterを削除することに成功。代わりの余暇が増えた気はしないので、おそらくTwitterの代わりにはてブを見てるだけ。

週報 1週目(2020/02/28)

2020/02/28 Up

ブログ(これ)を公開。
思考の言語化や長文読解などを行う機会を増やした方が良いと思うところがあったので。

仕事でVueを使う必要が出てきたので予習がてらVueで書いた。 記事含め、静的に記述しているだけなので、記事と並行してアーキテクチャも段階的に更新していく。 とりあえずVuex・サーバレス・Nuxt.js・SSRあたりが最初に目指すところだけど、まずはParser周りの環境整えたい。

記事という意味でのブログだけじゃなくて、やったことを細かく記録するDoneリストにしたい。 記録したデータを後から見返すのが好きなので、そのあたりのモチベーションで駆動予定。 技術だけじゃなくてわりと自分用メモの意味合いが強い。 最低でも週一でアップデートしたいので、週報という形でやったことをまとめることにする。