日々之良日

ものづくりと新しいことを学ぶのが好きです。学んだことの走り書き。

JavaScriptでミリ秒を'00:000.000'表記にする

こんにちは。

JavaScriptで久々にストップウォッチを作ってみたのですが、 ミリ秒の変換に手こずりました。
まだまだ初歩的な部分でも詰まってしまいますが、焦らずに、自分で調べながら力をつけていきたいと思うこの頃です。
さて、いきなりですが、ストップウォッチのように、'00:000.000'という時間表記で表したい場合のミリ秒変換についてのソースを2通りメモ。

ミリ秒からの変換

方法その1: sliceメソッドを使う

      const d = Date.now() - startTime + elapsedTime;
      //ミリ秒を00:00.000に変換する(m:s.ms)
      let m = Math.floor(d / 1000 / 60);
      let s = Math.floor(d / 1000 % 60);
      let ms =Math.floor(d % 1000);

      m = ('0' + m).slice(-2);
      s = ('0' + s).slice(-3);
      ms = ('0' + ms).slice(-3);
      timer.textContent = `${m}:${s}.${ms}`;


方法その2: padStartメソッドを使う

    const d = new Date(Date.now() - startTime + elapsedTime);
    const m = String(d.getMinutes()).padStart(2, '0');
    const s = String(d.getSeconds()).padStart(2, '0');
    const ms = String(d.getMilliseconds()).padStart(3, '0');
    timer.textContent = `${m}:${s}.${ms}`;

どちらもやってること自体は、同じです。
数値を文字列として切り取って、0字詰めにする。 初めはslice使うなら、数値を文字列に変換してから切り出す必要があるのではと考えたのですが、JavaScriptの場合は、Javaと違って明確な型指定が必要ないので、letで変数として宣言するだけで、数値(文字)の加工ができてしまうんですね。 Java的思考からすると、違和感ありました。

ではでは。

Canvasにピカチュウのドット絵を書いてみた

こんばんは。最近、夜はちょっと冷え込みますね。
リモートワークで運動不足がひどいので、一日5000歩を目標に歩いているこの頃です。

今日はQiitaで面白い記事*1を見つけたので、
それにあやかって、ピカチュウのドット絵を書いてみました。
サイズとかの調節がうまくいかなかったので、課題は多いですが、一応メモとして残しておくことにします。


【イメージ図】

f:id:makiharu3939:20210426203134p:plain
やせいの ピカチュウがでた!


ソースコード

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="utf-8">
    <title>野生のピカチュウが出現した!!!</title>
  </head>
  <body>
    <canvas id="canvas" width="256" height="256"></canvas>
    <script>
      // 設定するドット絵!
      const dotData = 
          "□□□□□■□□□□□□□□" +
          "■■■□■□■□□□□■■■" +
          "■■□■□□■□□□■□■■" + 
          "□■□□■■■■■■□□■□" + 
          "□□■□□□□□□□□■□□" +
          "□□■□■□□□□■□■□□" +
          "□□■□□□■■□□□■■□" +
          "□■□■□■■■■□■□■□" +
          "□■□□□□□□□□□□■□" +
          "□■□□■□□□□■□□■□" +
          "□■□■■□□□□■■□■□" +
          "□■□□□□□□□□□□■□" +
          "□□■□□■■■■□□■□□" +
          "□□□■■□□□□■■□□□";

      // キャンバスを取得
      let canvas = document.getElementById("canvas");

      // 作画するためのコンテキストを取得
      let context = canvas.getContext("2d");

      // キャンバスを黒く塗りつぶす
      context.fillStyle = "black";
      context.fillRect(0, 0, canvas.width, canvas.height);

      // イメージデータを作成
      let imageData = context.createImageData(14, 14);

      // イメージデータにドット絵のデータを設定
      let dotDataArr = dotData.split("");
      for (let i = 0; i < dotDataArr.length; i++) {
        switch(dotDataArr[i])
        {
          case "■": // 黄色
            imageData.data[i * 4 + 0] = 255; // 赤
            imageData.data[i * 4 + 1] = 255; // 緑
            imageData.data[i * 4 + 2] = 0; // 青
            imageData.data[i * 4 + 3] = 255; // アルファ
            break;
          default: // それ以外は黒色
            imageData.data[i * 4 + 0] = 0; // 赤
            imageData.data[i * 4 + 1] = 0; // 緑
            imageData.data[i * 4 + 2] = 0; // 青
            imageData.data[i * 4 + 3] = 255; // アルファ
        }
      }
      // イメージデータを作画する
      context.putImageData(imageData, 55, 100); // 1匹目
      context.putImageData(imageData, 80, 100); // 2匹目
      context.putImageData(imageData, 105, 100); // 3匹目
      context.putImageData(imageData, 130, 100); // 4匹目
      context.putImageData(imageData, 155, 100); // 5匹目
    </script>
  </body>
</html>


以上です~。

*1:参考にさせていただいた記事
qiita.com

AWS実務未経験でAWSクラウドプラクティショナー に合格しました

AWSクラウドラクティショナー に合格したので備忘録です。

1回目の試験で830点で合格しました。

確信が持てなくて不安だなっていう問題が10問ちょいあったので、スコアもまぁ妥当だなという結果でした。

 

今回は、AWSクラウドラクティショナー に受かるまでの背景だとか流れとかを記しておきます。

 

【どんな人】

現場に入って4ヶ月目、AWSを業務で一切触ることない人。

一応、個人的にはAWSを使用した経験あるくらい。

ポートフォリオ作る時にAWS使ってデプロイしましたって程度です。

 

【対策期間】

 3週間

 

一気に詰めて2週間で受けたかったのですが、会社に補助金申請する関係で余裕を持って試験を受けることになりました。

時間としては、だれる前は平日3h, 休日6hくらい使って詰め込みました。

 

【合格して得たこと】

AWSの膨大なサービスを幅広く知ることができました。

今までEC2とかVPCとかRoute53とかなんとなく知っている程度の知識だったけど、知識を広く体系的に学べた点がよかったです。

 

【使用した参考書】

AWS認定資格試験テキスト AWS認定クラウドラクティショナー』

 

www.amazon.co.jp

 

こちらの一冊です。緑が目印の本です。

 

【問題集】

Amazon WEB問題集で学習しよう」

を使用しました。問題総数が430問程度あるので、バンバン解きます。

 

aws.koiwaclub.com

 

 

【学習の流れ】

①まずは参考書を一冊、流し読み。

細かいことは気にせず、とにかくさらっと流すのが吉です。

 

②次は問題集をひたすら解く。

2, 3周くらいしましたかね。

最初は正答率1, 2割くらいで分からないことばっかりだったので、じゃんじゃん答えと解説を見て、雰囲気を掴むことに専念しました。

そしてある程度、雰囲気に慣れてきたら、分からないところは随時ぐぐり、

覚えられない用語は、隙間時間に何度も反復するという戦法でいきました。

 

とにかく問題集をやり込む。

 

これが今回の勝因ですかね。

とまぁざっくりですがこんな感じで受かりました。

 

【感想】

今回受けて思ったのが、CLFの試験に関しては、

とにかくAWSの用語・サービスに慣れることが大事なので、初めは解説がチョット何言ってるのか全然ワカラナイって状態でもどんどん問題流してみてみるのがいいんじゃないかと思いました。

例えばS3とか頻出のサービスは、一回の解説で理解しようとしなくても、いろんな形で問題に出されるから、問題を解いていく内に自然と慣れていきます。

最初はまず問題を浴びて慣れることが大事だと思います。

で、問題に徐々に慣れてきたら、今度は解説を読んでみて、理解が曖昧な点を解説リンクを読んだり、amazonが提供してる3分くらいの動画を見たりなんかして、とにかくインプットする。インプットしたらまた問題解く。

 

ホワイトペーパーとかハンズオンとかは今回特に触らずに試験に臨みました。

まぁその辺も本当はやった方がいいんでしょうけど、実務と試験はまた別ものと割り切ってやりました。

 

とりあえず、試験が無事に終わってよかった!

次は、SAA頑張ります!

 

 

 最後に。なんとなくスコアレポート載せときます。

f:id:makiharu3939:20210425190828p:plain

試験を受けた翌日にスコアレポートを受け取りました

 

C++で競プロ環境構築 その2

円周率を求める問題で、

#include <bits/stdc++.h>

M_PI

を使いたかったのですが、自分の環境下では使えませんでした。

以前、記事に書いた方法では、単純にコンパイラのみをできるようにしたもので、競プロ必須と言っても過言ではない #include <bits/stdc++.h>ライブラリは使えない状態だったようです。

ので、こちらの記事を参考に、ライブラリを使えるように環境構築をしました。

 

qiita.com

 

こちらの手順の5.1まで行うことで、

#include <bits/stdc++.h>

が無事に使えるようになりました。

 

 

gccのバージョンが9でしたが、今回の自分の場合は、バージョンが10でしたので、その辺は適宜変えながらで。

詳細は上記記事を参照で、一応自分の使用したコマンド群だけメモしておきます。

 

brew doctor
brew cleanup
brew install gcc
which g++
ls /usr/local/
ls /usr/local/bin/
ln -s /usr/local/bin/g++-10 /usr/local/bin/g++ //参考記事とバージョン異なる
which g++
echo $PATH
cd /usr/local/
ls -la
find . -name "stdc++.h"
mkdir /usr/local/include/bits
ls -la
ls include/
cp ./Cellar/gcc/10.2.0_4/include/c++/10.2.0/x86_64-apple-darwin19/bits/stdc++.h /usr/local/include/bits

 

 

以上で。 

 

SVNアカウントの確認方法

Windowsが対象です。SVNのアカウントを確認する方法のメモ。

 

エクスプローラーを開いて、上のタブの"表示"を押す

②隠しファイルのチェックボックスにチェックをいれる。

③以下に目的のファイルが格納されているので、サクラエディタとかメモ帳でいいので、開く。

C:\Users\(ユーザ名)\AppData\Roaming\Subversion\auth\svn.simple\認証情報のファイル

  

以上です。git使いたいです、はい。

Visual StudioでC++の開発環境を構築。標準入力もできるように(Mac版)

実現したこと

Visual Studioを使って、C++の開発環境を構築しました。

gccなど入れずに、お手軽にさくっと環境構築できたかなと思っています。

何でそうしたかった?

C言語の学習をラクに始めたかったからです。

アルゴリズムの勉強として競プロ をC言語でやりたいけど、コンパイラの導入とかめんどくさいし、普段使ってるエディタでさくっとC++の学習環境を整えられないかと思ったのがきっかけで調べました。

ちなみに普段扱っている言語はJavaなので、Javaでやれたら良かったのですが、どうも調べたところ、C言語の方が競プロやるにあたっては良さそうな感じがしたので、今回新たに手を広げて勉強してみることにしました。
ちなみにC言語の方が良さそうだと判断した理由については、

C言語の場合はJavaと違ってGC(ガベージコレクション)がないこと、そしてポインタ構造を持つということで、アルゴリズムを考えるのに良い(らしい)ためです。

あとは私が今読み進めようとしている本がまさにC/C++でコードの解説をしているからとか、AtCoderの解説動画で使用されるのがCってこととか。その辺で判断しています。
さて、それでは前置きはこの辺にして、以下で導入方法について具体的に記述しておきます。

環境

MacOS Catalina:10.15.7

Visual Studio Code:1.48.2

 

実施手順

1. Visual Studio Codeに二つの拡張機能を入れる。

⇒ 「C/C++」&「CodeRunner」

まず、メニューの拡張機能からプラグインを入れます。

(Shift + command + X)

→「C/C++」で検索

→インストールボタン押下で完了

→「CodeRunner」で検索

→先ほどと同様、インストールボタン押下で完了

 

こちらの手順について*1

 

2.Code Runnerの設定を変更する 

これだけでは、標準入力が扱えないので、CodeRunnerの設定を変える必要があります。変え方は以下の通りです。

 

 CodeRunnerを再び開く

→基本設定

拡張機能

→CodeRunnerを選択

→歯車アイコンをクリック

Code-runner: Run In Terminalという項目にチェックをつける

GitHubでの認証かMicrosoftアカウントでの認証を求められるので、好きな方でログイン

→VSコードを再起動する

 

こちらの手順について*2

これでOKです。 

CodeRunnerを入れるだけでは、標準入力はできない、というのはつまりどういうことかといえば、

cin >> name

と書いて実行しても、値を受け取ってもらえないということです。

そしてこの場合、以下のメッセージが表示されてしまいます。

「読み取り専用のエディタは編集できません」

 

これはデフォルトの設定では、プログラムを実行した結果は読み取り専用で表示するようなものになっているからです。読み取りだけでなく、入力を受け取ってもらいたい場合には、ユーザーのキー操作を受け取るように設定を変更する必要があります。

*3

 

ということで、2の手順を実施したわけでした。これでVSCodeで標準入力を使えるようになります。  

 

ではでは〜。 

*1:下記サイトを参考にさせていただきました。

Visual Studio Code Mac 開発環境構築[C++] | 三十路エンジニア Blog

*2:読み取り専用のエディタは編集できませんの解決法はここを参考に記述しています

Cannot edit in read-only editor VS Code - Stack Overflow

*3:手順については下記サイトに紹介されているStackOverFlowを参考にしました。

VSCode: "読み取り専用のエディタは編集できません"の解決法 - 西尾泰和のScrapbox

VS Codeのカラーテーマに「Solarized」を選んだ

Sublime TextからVS Codeに乗り換えるにあたって、カラーテーマの設定を行った。 

 

カラーテーマの設定方法については、

パレット(command + shit + p)を開いて、

検索窓に、「color thema」と検索。

あとは、自分の好きな色を試して確認していけばok。

 

 

カラーテーマは、dark系をベースに検討。

白よりは、断然黒がいい。やはりその方がプログラマーっぽくてかっこいい。

モチベが上がる。

 

以前sublime Textの時で使用していたのは、Monarcheyだったので

VS CodeでもMonarcheyかなーと考えていたが、目に優しくない気がするという理由で断念。

Monarcheyの色合い好きなんだけれども、目への配慮を考えると、ノンチョイス。

 

あれは違う、これも違う、なんて乱雑にみていき、もはやデフォルトのが一番良いのでは・・・と半ば諦め気味で見繕っていたところ、

 

「Solarized」に出会い、一目惚れ・・・!

 

これぞ、恋に落ちる (テーマ) !!!

 

,,,,,,,,,,,,どこかのテキストエディタの文言みたい,,,,,,,,,,,,

 

 

「Solarized」

この子は圧倒的に他よりも、目に優しい気がします。クールで知的。

 

何よこれ、いいじゃないの、他の人はどう思ってるのよ、とか色々気になって、

Solarizedをググってみたところ、良記事を発見。

イーサン・シュノーヴァー氏というプログラマーでありデザイナーの方が創られたとのこと。

彼にとって、何らかの思い入れのあるという青と黄色という二色のカラーをベースに、あとは数学的性質についても吟味をしながら、生み出されたものが「Solarized」であるらしい。

以下、引用文。 

ブルーは、長年にわたる海洋恐怖症(非常に深い水域に対する恐怖心)を自分に思い起こさせる色にした。イエローは、自分の子ども時代を連想させる味と匂いを喚起する色にした。こうした色が聞こえたり言葉に味を感じたりするシナスタジアの体験は、この色を除いては特にないという。

「両親はアーティストです。はっきりとした理由がなくても何かを選ぶことには慣れています」と、彼は話す。

この2色を出発点にして、ほかの色を見つけ出した。要素の違いを十分に、それでいて過剰にならないように引き立たせ、さらにLightとDarkのどちらのヴァージョンでもコントラストの水準が維持される色合いだ。こうして、反転させても関係性が変わらない16色のパレットが完成した。

 

「音符の数を限定した作曲に少し似ているでしょう。制限されているからこそ美しいのかもしれません」

 

参照元  

完璧なカラー設定「Solarized」の魅力は、計算し尽くされたものだった

https://wired.jp/2019/07/09/very-mathematical-history-perfect-color-combination/

 

 上記では他にも、オープンソースについても語られており、イーサン・シュノーヴァーという人物像が見えてくる。

 

 

 この記事を読むと、「Solarized」というカラーテーマを、より好きになるに違いない。