OmniAICreator/Qiita-1.07M huggingface dataset:
【情報】センター試験のサンプル問題が公開されたので，あり得ない選択肢にツッコミを入れてみた

（元ネタ，わかります・・かね）

昨日，ネットのニュース読んでたんです．ネットニュース
そしたらなんかサンプル問題がめちゃくちゃいっぱいで公開されたみたいなんです
で，よくみたらなんか科目が増えるみたいで，「情報」とか出題されてるんです
もうね，解いてやろうかと．ツッコもうかと

前書きここまで

# 「情報」が出題されるらしい
ネットニュースで少しだけ話題になっていた，センター試験のサンプル問題を解いてみようという試みです。
ただ，今回 解くだけじゃ模範解答と変わらないので，あり得ない選択肢にツッコミを入れてみましょうかと。
ごゆるりと，ご覧いただければ嬉しいです

試験問題は[こちら](https://www.dnc.ac.jp/sp/albums/abm.php?f=abm00040365.pdf&n=サンプル問題（情報）_修正版.pdf)からどうぞ！

# 第１問

何をもって問と区分けされているか，私はわかりません。(._.)

## 問１

インターネットが，既存の電話回線よりもどうよろしいかということを尋ねられています。
見れば違いが歴然な選択肢が設けられていますので間違いませんが，こんなすごい理由も：

**「大量の回線を用意して大きなデータを一つにまとめたパケットを一度に送出」** できること

怖い。

また，情報格差，いわゆるデジタルディバイドのことと思いますが，この原因を問われる選択肢の中には，**季節の違い** とか **機密性の違い** などのパワーワードがランクインしておりました。

ま，確かに情報処理技術者試験に命をかけていたら春と秋はえげつないほどITに詳しくなれると思いますが。あと情報技術が秘匿されていて一部の人以外には実は機密情報でしたというのも困る。

問１の最後はクラウドサービスの利点についてでした。**手元にある機材を追加して自由に拡張することができる**という選択肢がありましたが，アイデアとしては面白いかもしれないですね。「あっ，ちょっとMySQLがもっさりだから，家のどこかにまだ転がってるはずの512MBメモリをAWSのデータセンターに郵送しないと」みたいな。

## 問２

主に，情報の仕分けとグラフの種類を組み合わせることについて尋ねられています。
研究結果をグラフにして発表するみたいですが，どんな選択肢があるでしょうか。

### 生徒A

「クラスの生徒全員の通学手段」について調べてくれたようです。くれぐれもピラミッド型のグラフは使わないでくださいね〜。手段ごとにクラス内カーストができかねないので，どうぞご注意を。

### 生徒B

PDCAサイクルをうまく表すためのグラフを選びましょう。2軸マトリックスを選んでしまうと，PDCAどこかに偏った感じの雰囲気になりそうですね。問題児とか，金のなる木とか懐かしい（基本情報）。

### 生徒C

パソコンの重量と価格の関係を表すグラフを選びます。ここでもピラミッドを選んじゃうと，カースト制定で重量と価格とどっちが重みつけされたのか気になって寝れなくなるのでお気をつけくださいませ。

##問３

画像データのデジタル化がお題です。符号化とか標本化とか，懐かしいですね。

最後の設問でデジタル化のメリットが尋ねられていますが，良い子のみんなはくれぐれも「**著作権を気にすることなくコピーして多くの人に配布することができる**」を選ばれませんよう！映画泥棒のパトランプが飛んできます。

##問４

今回のお題はいきなりネットワークです。IPv4について，先生と生徒が熱く語り合ってます。
ここは選択肢というより数字を答える問題でしたので，ツッコミは割愛します。

# 続く（この記事が更新されます）

次回の更新はいよいよプログラミングの問題みたいですね〜
と，こんな感じで次の問題以降もだらりと突っ込んでいきますので，どうぞ，よろしくお願いいたします〜
office2013プロダクトキー25桁の調べ方

#条件

office2013プリインストール
Windows10

#１．まずプロダクトキーの下5桁を調べる

http://blog.livedoor.jp/nakamurad3/archives/1015243518.html

下5桁まではgoogleで調べるとたくさん出てきたので省略。

64bitのときは「programfiles(x86)」を見るように案内しているブログも多いが
64 ビット版の Windows で 64 ビット版の Officeを使っている場合は
「programfiles」なので注意！！

> [コマンド プロンプト] 画面で、お使いの環境に合わせて以下のコマンドを入力します。
> •32 ビット版の Windows で 32 ビット版の Office をお使いか、64 ビット版の Windows で 64 ビット版の Office をお使いの場合
> 
> Office 2013 用:
> cscript "%programfiles%\Microsoft Office\Office15\ospp.vbs" /dstatus
> 
> 64 ビット版の Windows で、32 ビット版の Office をお使いの場合
> 
> Office 2013 用:
> cscript "%programfiles(x86)%\Microsoft Office\Office15\ospp.vbs" /dstatus

#２．25桁のプロダクトキーを探す
## (１)レジストリ エディターを起動する
https://support.microsoft.com/ja-jp/windows/windows-10-%E3%81%A7%E3%83%AC%E3%82%B8%E3%82%B9%E3%83%88%E3%83%AA-%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%83%BC%E3%82%92%E9%96%8B%E3%81%8F%E6%96%B9%E6%B3%95-deab38e6-91d6-e0aa-4b7c-8878d9e07b11

タスク バーの検索ボックスに「regedit」と入力します。結果の一番上に表示されるレジストリ エディター(デスクトップ アプリ) を選択します。

## （２）レジストリ エディターで下5桁を検索する

画面左上にある　編集(E)　をクリック
検索　を選択
検索する値　に下5桁を入力
「キー」「値」「データ」のチェックボックスをチェックする
「完全に一致するものだけを検索」のチェックボックスは外す
「次を検索」ボタンを押下し検索する

こちらの環境では

コンピューター\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Office\15.0\ClickToRun\propertyBag
homebusinessretail

にプロダクトキーらしきものを発見できました。
時間帯がかぶらないように時間管理をしたいときの条件式

###実現したいこと
予約やスケジュール管理で、**新しい予定が、すでにある予定と時間帯の重複が無いようにしたい**


###条件式

```
**** 条件式 ****
(os <= ns && ns < oe) || (ns <= os && os < ne)
*******************
※ポイント
=の有無。
終了時間と別の開始時間が同時間でも良い場合です。
インターバルが必要な場合は=を入れないといけませんね。

**** 新しい予定 ****
開始時間： newStart -> 変数名 ns
終了時間： newEnd -> 変数名 ne
*******************

**** すでにある予定 ****
開始時間： oldStart -> 変数名 os
終了時間： oldEnd -> 変数名 oe
*******************


```

###イメージ
新しい予定、すでにある予定の開始時間に注目して、その開始時間が他方の開始時間と終了時間の間にあったらFalseを返したいというイメージです。

###新しい予定とすでにある予定のパターン
OKパターンとNGパターンの２種類です。
いずれも注目しているのは開始時間です。

![Copy of Booking.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668402/3a33ace8-b725-9a21-ff57-fa6e2bb1c693.png)

###使い所
Spring Bootを使った開発の際に使った条件式ですが、フロント側でもJavaScriptで使用しました。

書き方は違えど言語が変わっても同じ条件式になろうかと思います。
JavaScriptで実装したのは、filterメソッドの中で使いました。これで重なっているものとそうでないものを振り分けました。


###あまり調べても出てこなかった・・・
結構悩んだんですよね。イメージではわかっていても、**開始時間にだけ注目すれば良い**ということに気づくのにかなりかかりました。

誰かの参考になればと思います。

冗長な条件式だなとは感じましたが、こんなものか？？？

なにか別の良い実装方法をご存じの方がいらっしゃいましたらコメント下さいm(__)m
Rustと関数実装

# 関数表記
* Rustでは、関数と変数の命名規則は、スネークケースを使うのが慣例のようです。
* また、関数定義は、fnで始まります。

例: 

```Rust
fn main() {
    another_function();
}

fn another_function() {
    println!("Another function.");
}
```

* Rustにおける関数の引数を利用したパターンは下記のように書くことができます。
* 注意点としては、関数は各仮引数の型を宣言しなければなりません。=> (x: i32)

例:

```rust
fn main() {
    another_function(5);
}

fn another_function(x: i32) {
    println!("value = {}", x);
}
```

[実行結果]

```
❯ cargo run
   Compiling variables v0.1.0 (/Users/yoshitaka.koitabashi/Desktop/variables)
    Finished dev [unoptimized + debuginfo] target(s) in 0.24s
     Running `target/debug/variables`
value = 5
```

* Rustでは、関数の最後に式を置くか文を置くかどちらかの形で形成されます。

ちなみに、
**文とは、なんらかの動作をして値を返さない命令です。**
**式とは、結果値に評価されます。**

* 下記の例は、letを使用し変数を生成して、値を代入すること => 文

例：

```rust
fn main() {
    let y = 6;
}
```

* 下記の例は、**エラーになります。**
* 理由は、(let y = 6)は文であり値を返さないので、let文自体を他の変数に代入することはできません。

例: 

```rust
fn main() {
    let x = (let y = 6);
}
```

* 下記は、初めに(let x = 5;)の文宣言していますが、その後(let x = 3;)で再度宣言し直しています。
* その後、(x + 1)で評価を行っているので、yは4に評価されます。
* 注意したいのは、(x + 1)で文末にセミコロンがついていないません。
* 理由は、式は終端にセミコロンを含みません。
* 式の終端にセミコロンを付けたら、文に変わってしまうためです。

例:

```rust
fn main() {
    let x = 5;
    let y = {
        let x = 3;
        x + 1
    };

    println!("value = {}", y);
}
```

* 戻り値のある関数については、**->**の後に型を書いて宣言できます。
* 下記の例を示します。
* let x = five()は、関数の戻り値を使って変数を初期化しています。
* five()関数は、仮引数をもたず戻り値の型を定義しています。

例: 

```rust
fn five() -> i32 {
    5
}

fn main() {
    let x = five();

    println!("value = {}", x);
}
```

[実行結果]

```
❯ cargo run
   Compiling variables v0.1.0 (/Users/yoshitaka.koitabashi/Desktop/variables)
    Finished dev [unoptimized + debuginfo] target(s) in 0.20s
     Running `target/debug/variables`
value = 5
```

* 関数に戻り値の型が指定されていない場合、unitと呼ばれる空のタプルを返します。

例:

```rust
fn make_nothing() -> () {
    return ();
}

fn make_nothing2() {
}

fn main() {
    let a = make_nothing();
    let b = make_nothing2();

    println!("a: {:?}", a);
    println!("b: {:?}", b);
}
```

[実行結果]

```
❯ cargo run
   Compiling variables v0.1.0 (/Users/yoshitaka.koitabashi/Desktop/variables)
    Finished dev [unoptimized + debuginfo] target(s) in 0.27s
     Running `target/debug/variables`
a: ()
b: ()
```


**応用**

* 下記の例はどうでしょうか。
* println!("{} {}", result.0, result.1);では、 戻り値をタプルで返しています。
* println!("{} {}", a, b);では、タプルを2つの変数に分解しています。

例: 

```rust
fn swap(x: i32, y: i32) -> (i32, i32) {
    return (y, x);
}

fn main() {
    let result = swap(123, 321);
    println!("{} {}", result.0, result.1);

    let (a, b) = swap(result.0, result.1);
    println!("{} {}", a, b);
}
```

[実行結果]

```
❯ cargo run
   Compiling variables v0.1.0 (/Users/yoshitaka.koitabashi/Desktop/variables)
    Finished dev [unoptimized + debuginfo] target(s) in 0.82s
     Running `target/debug/variables`
321 123
123 321
```

# 参考文献
* [THE BOOK 3章](https://doc.rust-lang.org/book/)
* [Tour of Rust](https://tourofrust.com/)
JavaScriptでおみくじゲームを作る流れ

<iframe width="100%" height="400" src="https://www.youtube.com/embed/cKJ-NGc2vZs?start=81" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# 「大吉です」とブラウザに表示

```index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>おみくじゲーム</title>
</head>
<body>
  大吉です。
</body>
</html>
```

# JavaScriptで「大吉です！」とブラウザに表示

```index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>おみくじゲーム</title>
</head>
<body>
  <script>
    document.write('大吉です！')
  </script>
</body>
</html>
```

# 関数を使って「大吉です！！」とブラウザに表示

```index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>おみくじゲーム</title>
</head>
<body>
  <script>
    function omikuji() {
      document.write('大吉です！！')
    }
    omikuji()
  </script>
</body>
</html>
```

# 1/3の確率で「大吉です♪」とブラウザに表示
その他は、吉、小吉が出てくる。(仮)

```index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>おみくじゲーム</title>
</head>
<body>
  <script>
    function omikuji() {
      const fortune = Math.floor(Math.random()*3) // 0~2の間でランダムで数字が変化する
      if (fortune == 2) {
        document.write('大吉です♪')
      } else if (fortune == 1) {
        document.write('吉です')
      } else {
        document.write('小吉です')
      }
    }
    omikuji()
  </script>
</body>
</html>
```

Math.random は0以上1未満の数字（小数点以下含む）が取得できます。これに3をかけると、0以上3未満の数字になります。それをさらに Math.floor で処理すると、小数点以下が削られて、0, 1, 2 のいずれかの整数になります。

# 文字の大きさとか色とかを変えたりしてみる

```index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>おみくじゲーム</title>
  <style>
    h1 { color: red; font-size: 200px;}
    h2 { color: green; font-size: 100px;}
    h3 { color: blue; }
  </style>
</head>
<body>
  <script>
    function omikuji() {
      const fortune = Math.floor(Math.random()*3)
      if (fortune == 2) {
        document.write('<h1>大吉です♪</h1>')
      } else if (fortune == 1) {
        document.write('<h2>吉です</h2>')
      } else if (fortune == 0){
        document.write('<h3>小吉です</h3>')
      }
    }
    omikuji()
  </script>
</body>
</html>
```
新入生プログラマーコンテスト夜の部拡張ROTN解説

#解説
これも燃えてそう、怖い。これについても色々後日談として書きます。
##問題リンク
https://yukicoder.me/problems/4824
##解法
この問題には、想定解法が2つあります。
###writer解法
この解法では、 "CpCzNkSuTbEoA" を 1 つずつずらした操作を元に戻るまでの文字列を前計算する方法です。
この前計算をすることで、 $S_0$ のときに数字だった $c$ が、最終的に 10 以上になり、文字列になる場合でも前計算したものから直接使用することができます。
###writer想定解
C++14:https://yukicoder.me/submissions/633770
Python3:https://yukicoder.me/submissions/633973
###tester解法
$min(10,N)$ 回先に操作し、 $10\le N$ のときは $N-10$ 回文字列を1回ずらす操作をする、という方法です。この方法だと、 $S_{10}$ 以降は全て英大文字もしくは英小文字になるため、単純なループで済みます。
###tester想定解
C++14:https://yukicoder.me/submissions/633767
Python3:https://yukicoder.me/submissions/633960
#終わりに
新入生プログラミングコンテスト、どうだったでしょうか？個人的には出来はよかったと思います。燃えていなければ、の話ですが。(燃えるな)
後日談に色々書きますので、こちらも是非見てください！
最後まで読んでくださり、ありがとうございます！
新入生プログラマーコンテスト昼の部和差算解説

最近全然記事出しませんでしたね、そもそも見てる人そんなにいないと思いますが。
#解説
なんか燃えてそうで怖いです。裏側等は後日談として書きたいと思います。
星2~2.5ありそうなので2と2.5どっちがいいかアンケート取ったら1.5になりました。(?)
##問題リンク
https://yukicoder.me/problems/5050
##解法
$N\le10^{18}$ なので、全探索では間に合いません。
少し探索すると、
$p=a_0,q=b_0$ としたとき、
$a_1=p-q,b_1=p+q$
$a_2=-2q,b_2=2p$
$a_3=-2p-2q,b_3=2p-2q$
$a_4=-4p,b_4=-4q$
$a_5=-4p+4q,b_5=-4p-4q$
$a_6=8q,b_6=-8p$
$a_7=8p+8q,b_7=-8p+8q$
$a_8=16p,b_8=16q$
となります。よって、 $a_{8i+j}+b_{8i+j}$ の最大値は $a_j+b_j$ の最大値の $16^i$ 倍になります。
これにより、それぞれの $a_N,b_N$ を求めることができます。
また、最大値になりうる場合は、
$p=A,q=C$
$p=B,q=C$
$p=A,q=D$
$p=B,q=D$
の4つのみです。そのため、計算量は $O(log(N))$ で済みます。
##想定解
C++14:https://yukicoder.me/submissions/633118
PyPy3(Python3):https://yukicoder.me/submissions/633191
#終わりに
夜の部でも1問作問しているので是非解いてください！
最後まで読んでくださりありがとうございました。
iosのsafariで電話番号がリンクになってしまうのを1行で無効化

# どうも7noteです。safariの自動電話リンクを無効化させる方法

iosのsafariには自動的に電話番号をaタグのリンクに変更して表示する機能がありますが、優秀過ぎて逆に電話番号でないものまでリンクにさせてしまったり、リンクが不必要なところでもリンクを設置してデザインを損なってしまうようなことがあります。

最悪の場合、要素はあるのになぜか文字だけが消えてしまってタップしたら電話かけられるけど見えない、なんてことになる場合もあるようです。

## 対策方法

たった一行、`<head>`要素の中に以下を追加するだけ！

```html
<head>

<!-- 以下の1行を追加 -->
<meta name="format-detection" content="telephone=no">

</head>
```

チョー簡単！

## 逆に電話をかけたいものには「tel:」

```html
<a href="tel:09012345678">電話をかける</a>
```
ちゃんと指定しているものは無効にならないので安心。

## まとめ

チェックは全デバイス・全ブラウザでやるべきですね。予期せぬ不具合やレイアウト崩れに繋がるので。チェックの時間は入念にとっておきましょう。



#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
Gitを学ぶ 1日目 Gitとは

# はじめに
　この記事は現代のソフトウェア開発では欠かせない技術となっているGitについて、記事の著者が学習した内容をアウトプットするためのものである。したがって、この記事に書かれた内容は必ずしも正しいとは限らない。
　もし、間違っていることを書いていたり、誤解していることなどが見受けられたら、是非コメント等にて教えていただけるとありがたい。また、著者は「[いちばんやさしいGit&Githubの教本](https://www.amazon.co.jp/%E3%81%84%E3%81%A1%E3%81%B0%E3%82%93%E3%82%84%E3%81%95%E3%81%97%E3%81%84Git-GitHub%E3%81%AE%E6%95%99%E6%9C%AC-%E4%BA%BA%E6%B0%97%E8%AC%9B%E5%B8%AB%E3%81%8C%E6%95%99%E3%81%88%E3%82%8B%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E7%AE%A1%E7%90%86-%E5%85%B1%E6%9C%89%E5%85%A5%E9%96%80-%E3%80%8C%E3%81%84%E3%81%A1%E3%81%B0%E3%82%93%E3%82%84%E3%81%95%E3%81%97%E3%81%84%E6%95%99%E6%9C%AC%E3%80%8D%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA/dp/429500524X)」を用いて学習を行っている。本記事にて興味が湧いた方はぜひご購入いただきたい。

## Gitとは
　GitとはLinuxカーネルのソースコード管理システムとして、2005年に誕生したバージョン管理システムである。特徴としては、次々と発生するファイルの変更をバージョンとして記録し、記録した地点へいつでも戻れる仕組みがあることである。

## コミットとは
　ユーザが記録を保存する操作を「コミット」するという。また、その記録自体もコミットと呼ぶ。これは、ファイルの状態に加え、コミットを行ったユーザの情報やコミットを行った時刻なども記録される。

## リポジトリとは
　コミットを貯めていく作業スペースを「リポジトリ」と呼ぶ。すでにGitで管理されているプロジェクトに参加する場合はリポジトリをクローン(ローカルにコピーする)して使う。新規でプロジェクトを立ち上げる場合は、リポジトリも新しく作成する。
　リポジトリにはローカルリポジトリとリモートリポジトリがある。

+ ローカルリポジトリ -> 手元のパソコンで作成する自分専用
+ リモートリポジトリ -> ネット上の複数人で共有するリポジトリ

　自分の作業はローカルリポジトリで行い、ある程度作業を進めたらリモートリポジトリにそれを反映させる。別の作業を行っている人は、その内容をまた自分のローカルリポジトリに取得して作業を続けていく。

## ワークツリー
　ワークツリーはワーキングツリー、作業ディレクトリとも呼ばれ、編集の開始地点となる。ワークツリーにあるファイルは最後にコミットした状態から手が加わっていない(unmodified)状態にある。そこから何らかの編集を行うと、ファイルは変更済み(modified)状態となる。新規ファイルを作成した場合、そのファイルの状態は未追跡(untracked)状態となる。

## ステージングエリア
　ワークツリーでコミットしたい内容を一度ステージングエリアに登録する。これによってmodified状態のファイルが、staged状態に変化する。ステージングエリアはインデックスとも呼ばれることがある。

## Gitディレクトリ
　Gitディレクトリはコミットを格納する場所である。コミットを行うと、ステージングエリアに追加したファイルが、それ以降変更の入らないデータとしてGitディレクトリへ格納される。コミットによって、ファイルの状態は再びunmodified状態になる。

## ローカルリポジトリの操作
 よく使うコマンドを以下に示す。

- ローカルリポジトリを作成する。

```shell:ローカルリポジトリの作成
$ git init
```
- 指定したファイルをステージングエリアに登録する。

```shell:ステージングエリアに登録
$ git add FilePath
```
- コミットを作成する。
- -mオプションをつけることで、コミットメッセージを書ける。

```shell:コミットを作成
$ git commit
```
```shell:-mオプション
$ git commit -m "コミットメッセージ"
```
- リポジトリの状態を確認する。

```shell:リポジトリの状態を確認
$ git status
```
- ファイルの差分を確認する。
- オプション無しの場合は、ワークツリーとステージングエリアの差分を表示する。
- --cachedオプションをつけると、ステージングエリアとGitディレクトリの差分を表示する。

```shell:ファイルの差分を確認
$ git diff
```
- コミット履歴を確認する。

```shell:コミット履歴を確認
$ git log
```

今回の記事はこれにて終了とする。

次回の記事
[Gitを学ぶ 2日目 Gitコマンドの続き](https://qiita.com/Shiiya0418/items/f97be6657b7fb4aa0b48)

#参考文献
[1]  "Git". Wikipedia. https://ja.wikipedia.org/wiki/Git, (参照 2021-03-25)
機械学習を用いた株価予測

# ユニクロの株価予測

公開データから2012年から2016年までのユニクロの株式情報に関するデータセットを用いて簡単な株価予測をします。

株価予測をするにあたって、「現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル」を参考にさせていただきました。

## 1. データセットの取り込み

必要なライブラリをインポートします。

```python
%matplotlib inline
import datetime
import numpy as np
import matplotlib.pyplot as plt
import pandas as pd
import sklearn
import sklearn.linear_model
import sklearn.model_selection
```

ダウンロードしたデータセットの中身は以下のような状態で、データの欠損等は見られない綺麗なデータセットでした。

![ブログ用 - Jupyter Notebook および他 3 ページ - 個人 - Microsoft​ Edge 2021_03_25 21_23_59 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1234508/1e065b44-8d97-83ee-9ec8-f2fc34258600.png)

![ブログ用 - Jupyter Notebook および他 3 ページ - 個人 - Microsoft​ Edge 2021_03_25 21_33_25 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1234508/18295ece-3125-5e57-7e30-a6cd4f56f08d.png)

## 2. データ前処理

'Close'列、つまり、終値の値を基に株価予測をしたいと思います。
各日にちから30日前の値を入れた'Data 30 days ago'列を作成。'Data 30 days ago', 'Date'列を除いたデータセットの全ての値を標準正規化します。

```python
df['Data 30 days ago'] = df['Close'].shift(-30)

X = np.array(df.drop(['Data 30 days ago', 'Date'], axis=1))
X = sklearn.preprocessing.scale(X)
```

## 3. モデルの学習

訓練データとテストデータに分割して、線形回帰を用いて訓練データを学習させます。

```python
y_pred = X[-30:]
X = X[:-30]
y = np.array(df['Data 30 days ago'])
y = y[:-30]
X_train, X_test, y_train, y_test = sklearn.model_selection.train_test_split(
    X, y, test_size=0.2)

# modelの学習する
model = sklearn.linear_model.LinearRegression()
model.fit(X_train,y_train)
```

## 4. グラフの描画

予測したデータと実際のデータのグラフを描画します。

```python
df['Predict'] = np.nan

last_date = datetime.datetime(int(df["Date"].iloc[-1].split("-")[0]),
                              int(df["Date"].iloc[-1].split("-")[1]),
                              int(df["Date"].iloc[-1].split("-")[2]))

df["Date"] = df["Date"].apply(lambda x: datetime.datetime(int(x.split("-")[0]),
                                                 int(x.split("-")[1]),
                                                 int(x.split("-")[2])))
df.index = df["Date"]

one_day = 86400
next_unix = last_date.timestamp() + one_day

for data in pred:
    next_date = datetime.datetime.fromtimestamp(next_unix)
    next_unix += one_day
    df.loc[next_date] = np.append([np.nan]* (len(df.columns)-1), data)

df = df.drop("Date", axis=1)
fig, ax = plt.subplots(figsize=(15, 6))
ax.plot(df['Close'], color="green")
ax.plot(df['Predict'], color="orange")
plt.show()
```

- 予測データのグラフ


![predict_graph.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1234508/902ff5f8-c19b-4232-2e52-e15ffdcde3d5.png)


- 実データのグラフ

![real_graph.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1234508/fa773dd2-02fa-35ad-8759-8693730b0322.png)



## 最後に

今回の株価予測の精度は良くありませんでしたが、今後も機械学習の勉強を続けて、kaggleやSIGNATEなどのコンペで精度の高いモデルをコーディングしたいと思います。
🚩preloadとeager_loadの使い分けについて

preloadとeager_loadをどのようにして使い分けるかのメモです。

※議論の余地がかなりあるという前提です
### :white_check_mark: 前提条件:全てのレコードを取得するような場合
- 条件を指定する(whereなどを使う)ような場合は、eager_loadを使う。(テーブル結合していなければ、そもそも関連先の情報がわからないためpreloadは使えない)
- 条件を指定しない場合は、preload、each_loadの使い分けはケースバイケース。所得したいデータのカラムが少ないならeach_loadを使って一つのクエリで済ませるべきだし、多いならpreload使った方がいいかも。基本的には、レスポンスタイムはpreload使った方が早い。


### :white_check_mark: 前提条件:全てのレコードを取得する+関連先のデータが1対1であるような場合
- 1対1であるかつ条件を指定しない場合、eager_loadを使うことで結合してからまとめて取得する方が効率が良い場合が多い。
(1対1になるようなデータを持ってくる場合は、抽象的ですが関連度がかなり強いので結合していった方が効率が多い場合が多いという解釈。company_userとcompany_user_profile的な！)
- 1対1であるかつ条件を指定する(whereなどを使う)ような場合は当然eager_loadが当てはまる。

### :white_check_mark: 前提条件:全てのレコードを取得する+関連先のデータが1対多であるような場合
- 1対多であるかつ条件を指定しない場合、includesの挙動通りpreloadを使う
- 1対多であるかつ条件を指定する(whereなどを使う)ような場合、結合しなければいけないのでeager_loadを使うしかない


## :door: 注意点
- ここまでの考えであっているのなら、一対一のときはeager_loadを使う場合が良いのかもしれないが結合してもデータが重複するような場合がある。その時は、preloadを使うのも検討。なぜなら、eager_loadにはdistinctが備わっていないために指定したデータ数以上のデータを取ってきてしまう可能性があるため。
- preloadを使う時に、最初のクエリのデータ取得量が多すぎるとin句内の膨大なデータに対してSQL自体の設定値やメモリサイズの設定値を考慮しなければいけない
- includesはeager_loadとpreloadを判断するのに時間がかかる、また状況を考えたクエリでのデータ取得操作が悪いのであまり使うべきでない。

参考記事
- [ActiveRecordのincludes, preload, eager_load の個人的な使い分け](https://moneyforward.com/engineers_blog/2019/04/02/activerecord-includes-preload-eagerload/)
- [Rails: JOINすべきかどうか、それが問題だ — #includesの振舞いを理解する（翻訳）](https://techracho.bpsinc.jp/hachi8833/2017_09_25/45650)
- [なぜ、SQLは重たくなるのか？──『SQLパフォーマンス詳解』の翻訳者が教える原因と対策](https://eh-career.com/engineerhub/entry/2017/06/26/110000#%E5%8E%9F%E5%9B%A0ORM%E3%81%8C%E7%94%9F%E6%88%90%E3%81%99%E3%82%8BSQL%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%97%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84)
GradleでJavaのコンパイルオプションを設定する方法

## 概要
Javaではコンパイル時に[コンパイルオプション](http://www.ne.jp/asahi/hishidama/home/tech/java/application.html#javac)というものがあり、classファイルの出力ディレクトリやデバッグ情報を含めるかなどを設定できます。普通にjavacコマンドで行う場合はコマンドにオプションをつければ良いのですが、Gradleでビルドしている場合はどこに設定すれば良いのか、今回書きます。

## 設定方法
[こちら](https://stackoverflow.com/a/29593630)のstackoverflowの記事にある通り、pluginに`java`を設定し`options.compilerArgs`項目にオプションを設定します。


## 設定サンプル
上記の記事そのままですが、設定内容のサンプルを記載します。`-parameters`オプションの設定を行うときの設定です。

```gradle:build.gradle
apply plugin: 'java'

compileJava {
    options.compilerArgs << '-parameters' 
}
```
Rooで取り込んだExcelの日時のデータがうまく反映されない

こんにちは
##エラーが出た背景
`roo`を使ってexcelの日時のデータを取り込むよう開発を進めました。
ある程度できあがって確認しようとすると、下記のようなエラーが出ました。
おそらく, `in_time_zone`メソッドがinteger型に対応できていないというエラーでないかと思いました。
下記に
`- エラーメッセージが出た部分`
`- 対応するメソッド(controller)`
`- エラーが発生したファイル`
を載せています。


![Screen Shot 2021-03-22 at 1.02.11 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593744/d9013f00-df80-7e60-56e2-6bc6c8125160.png)


```app/controller/ir/meeting_logs_controller.rb
  def time_from_excel_date_time(excel_date, excel_time)
    date = excel_date.in_time_zone

    if excel_time.is_a?(String)
      time = excel_time.to_time
      hour = time.hour
      minute = time.min
    elsif excel_time.is_a?(Integer)
      hour = (excel_time / 3600)
      minute = (excel_time % 3600 / 60)
    end

    date + hour.hour + minute.minute
  end
```

**普段取り込むexcelファイル（該当箇所のみ）**

| id  | 日付 | 開始時間 |               
|:-|----:|:-------:|
||12/9| 1:00
||12/8| 1:00
||11/27| 1:00
||11/26| 1:00

**今回エラーが発生したexcelファイル(該当箇所のみ)**

| id  | 日付 | 開始時間 |
|:-|----:|:-------:|
||12月9日| 1:00
||12月8日| 1:00
||11月27日| 1:00
||11月26日| 1:00

##原因
上の部分を見ていただければわかる通り、`日付`の区切られている部分が`/`か`月日`かの違いによるものでした。
この部分が違うと、
`/`だとそのまま(String型)、
`月日`だと数字(Integer型)
が変数として取り込まれるので、String型にしか対応していなかったメソッドでエラーが発生してしまいました。
##改善策
そのためcontrollerを書き換えました。

```app/controller/ir/meeting_logs_controller.rb
  def time_from_excel_date_time(excel_date, excel_time)
  EXCEL_EPOCH = 2209078800
  TICKS_PER_DAY = 60 * 60 * 24
    if excel_date.is_a?(String) || excel_date.is_a?(Date)
      date = excel_date.in_time_zone
    elsif excel_date.is_a?(Integer)
      # 日付が漢字の場合、integer型で受け取る => 1899/12/31 からどれくらいの日数がたったかを表している
      # Unixのゼロタイム(基準)が "1970/1/1" に設定されている為、下記ステップで日付を求める
      # 1. TICKS_PER_DAY をかけて、1899/12/31 からどれくらいの秒数がたったかを計算
      # 2. 1から EXCEL_EPOCH 秒をを引き、1970/1/1 からどれくらいの秒数がたったかを計算

      unix_timestamp = excel_date * TICKS_PER_DAY - EXCEL_EPOCH
      date = Time.at(unix_timestamp).to_datetime - 8.hours - 1.day
    end

    if excel_time.is_a?(String)
      time = excel_time.to_time
      hour = time.hour
      minute = time.min
    elsif excel_time.is_a?(Integer)
      hour = (excel_time / 3600)
      minute = (excel_time % 3600 / 60)
    end

    date + hour.hour + minute.minute
  end
```

excelから取り込んだ日付の変数が入っている`excel_date`に対して、if文でString型とInteger型に分けて処理を走らせることにしました。
また、`unix_timestamp`の部分が複雑なので下記に説明をしたいと思います。

## unixとexcel

このコントローラーの記述は主にunixとexcelの基準の時間を合わせるために書きました。
コメントアウトでも書いてありますが、
excelは基準が`1899/12/31`なので帰ってくる変数は、`1899/12/31から何日たっているか`を表します。
しかし、Rubyに限らずunixを基準としているプログラミング言語は`1970/1/1(ゼロタイム)`を基準に作動します。
なので、excelの変数をunixの基準に合わせるために

```
unix_timestamp = excel_date * TICKS_PER_DAY - EXCEL_EPOCH
```
**の記述をしています。**

### 最後に
今回僕の初めての投稿なので至らない点があると思いますが、
僕なりに一生懸命頑張ったつもりです。笑
もし、何かアドバイスなどありましたらぜひ教えていただきたいです！
【Vue.js Composition API】v-forの中で子コンポーネントの参照を使用する with TypeScript

Vue.js の Composition API で`ref`属性を使用した子コンポーネントの参照を`v-for`内で使用する場合の備忘録です。
今回は TypeScript も使用しています。

```vue
<template>
  <div>
    <HelloWorld
      v-for="(item, i) in list"
      :key="item"
      :ref="el => { if (el) helloWorldComponents[i] = el }"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onBeforeUpdate } from 'vue';
import HelloWorld from './components/HelloWorld.vue';

export default defineComponent({
  components: {
    HelloWorld,
  },
  setup() {
    const list = reactive([1, 2, 3]);

    const helloWorldComponents = ref<InstanceType<typeof HelloWorld>[]>([]);

    onBeforeUpdate(() => {
      // Updateの前に必ず参照をリセットする
      helloWorldComponents.value = [];
    });

    return { list, helloWorldComponents };
  },
});
</script>
```

# 参考文献

[Usage inside v-for](https://v3.vuejs.org/guide/composition-api-template-refs.html#usage-with-jsx)
[Vue.js の Composition API における this.$refs の取得方法](https://qiita.com/jay-es/items/6d0279737fb510b0aa6c#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AE%E5%A0%B4%E5%90%88)
PyTorch3DをWindows10にインストールする 

PyTorch3DはWindowsにインストールするのが困難だと思っていたら何の苦もなくインストールできてしまった。
環境は

- RTX3090
- Visual Studio 2019
- PyTorch3D 0.4.0
- pytorch 1.8.0 py3.9_cuda11.1_cudnn8_0

ソースをGitHubからgit cloneしINSTALL.mdに従いcondaとpipで依存ライブラリをインストールし、~~CUBを適当な場所に置きパスを通し~~（←CUDA11.1以降ではCUBが同梱されているので別途のセッティングは不要）、x64 Native Tools Command Prompt for VS 2019で`python setup.py install`を叩くとインストールできた。
**INSTALL.md等々にあるソースコードの修正は不要。**
これまでの苦労はなんだったのか。
RTX30XX+pytorch 1.8+cuda11.1の組み合わせだけでうまくいくのかもしれない。


以下は古い情報。
最初はこの通りブチギレメモをとりながらやっていたがpytorch 1.6+cuda10以下はRTX3090で動かないことがわかり絶望し、pytorch 1.8+cuda11.1を試したらあっさり動いたのであった。
ありがとうFacebook様、お前がナンバーワンだ。

---

PyTorch3Dの2021/03/25の時点でのバージョンがついている最新版はv0.4.0だ。
INSTALL.mdによればWindowsにインストールすることもできそうだ。

https://github.com/facebookresearch/pytorch3d/blob/v0.4.0/INSTALL.md

しかしこのINSTALL.mdに書いてある`Install from local clone on Windows:`は全くメンテされておらず、これに従ってもインストールできない。
最悪だ。こんな不自由なソフトウェアを使うべきではない。

しかしどうしてもPyTorch3DをWindowsで動かさなければならないことは稀に良くあると思います。
偉いので泣く泣くがんばることにする。

ちょくちょくWindowsにインストールできない系のissueが立っており（例えば最新は https://github.com/facebookresearch/pytorch3d/issues/614 ）
そのたびにメンテナのおっさんがこのissue https://github.com/facebookresearch/pytorch3d/issues/323 に誘導している。
なのでこれに従えばよさそうだ。

わかったことは

- pytorchのソースをビルドする必要があるがVisual Studioではコンパイルが通らないため手作業で修正する必要がある（これはINSTALL.mdにも書いてある、Visual Studioという全人類が使ってるIDEでコンパイル通らないのとか舐めてんのか？）
- しかし該当箇所がpytorchのバージョンによって変わる（これがINSTALL.mdではメンテされていない）
- pytorch 1.6の時に動かすための修正方法がこのissueにまとまっている
- pytorch 1.7以降を併用してPyTorch3DをWindowsにインストールする手順を人類はまだ知らない

ビルドに必要なことは

- pytorch 1.6を使う
- cast.hはINSTALL.mdに従って変更する
- argument_spec.hとmodule.hはこのissue https://github.com/facebookresearch/pytorch3d/issues/323 に従って変更する
- 最初に`python setup.py install`したら怒られるのでワーニングに従って`set DISTUTILS_USE_SDK=1`


Facebook様はWindowsという全人類が使っているOSのサポートを真面目にするつもりはないようだ。私はブチ切れている。
Rails  gem bcryptのメソッドが使えない

##はじめに
初めまして。私はプログラミングを勉強してまだ間もない駆け出しのエンジニアです。Qiitaへの投稿も含めまだまだ勉強中です。そしてこれがQiitaへの初投稿となりますのでお手柔らかにお願いします。
主に初心者の方向け、また自分用のメモとしてこれから発信していきます。
##開発環境
Rails 6.1.3　ローカル環境でProgateのTweet_Appを作成中
##概要
今回はタイトルにもある通り、Gemfileへbcryptを追加したにも関わらず、has_secure_passwordやauthenticateといったメソッドが使えない！と言う状況に出くわしたのでそちらを共有していきます。

まず、
Gemfileに `gem 'bcrypt'` を追加。
その後ターミナルで `bundle install` を実行。

パスワードのハッシュ化を実装させていこうと`has_secure_passwordメソッド`を記述

```ruby:models/user.rb
class User < ApplicationRecord  
    has_secure_password
```
確認のため作成中のサイトを見たところ、**そのメソッドは知らないよとのエラーが。**
使えるはずのメソッドが使えずかなり焦った。

原因は、bcryptのバージョン？・・・いやバージョンは指定せず記述したので最新のものが導入されているはず。
じゃあ一体なんでだろうと小一時間悩んだ挙句ようやく原因を突き止めた。

##rails s の再起動
サーバーを立ち上げ直すことでエラーは解消された。
長いこと悩んだ問題の原因はなんとも簡単なことだった。
以前、テーブルのcreated_atカラムを日本時間にしたいなと思い立ち、Qiitaなどを参考にしたときにGemfileの編集をしたことがあった。その時参考にした記事に「サーバーを再起動させて変更完了です。」の一文があったことを思い出した。

##まとめ
自分と同じようなことで悩んでいた方がもしいたら、無駄な時間を過ごすことがなくなればいいなと思います。
rails s の再起動はProgateでGemfileのレッスンで書かれてなかったぞ・・・
それとも正規の解決法が他にあるのか？まあ解決できればそれでいいか！


またネタがあったら投稿したいと思います。

以上
GitHub Actionsで意図しないデフォルトブランチへのPRを阻止する

git-flowに基づいて作業する場合や、公開版と開発版とでブランチを分けていた場合など、mainがデフォルトブランチだけど普段はdevelopで作業するといった状況はよく起こると思います。

プルリクエストを立てるとベースブランチがデフォルトブランチであるmainになります。
そのため気がつかずにそのままマージすると意図せずにdevelopではなくmainにマージされることになります。
そこでこのような事故を防ぐためのGitHub Actionsの小技を考えてみました。

# TL;DR
```
name: Block merge

on:
  pull_request:
    types: [opened,edited]

jobs:
  test:
    runs-on: ubuntu-latest
    if: github.base_ref == 'main' && !(startsWith(github.head_ref,'release/')　|| startsWith(github.head_ref,'hotfix/'))
    steps:
    - name: Fail when base branch is main and branch is not release or hotfix.
      run: |
        exit 1
```

# 何をしているのか
簡単に説明すれば、PRを立てた時にマージしようとしているブランチがリリース(release/\*)や緊急の修正(hotfix/\*)かどうかを判断し、そうでない時にベースのブランチがmainになっているかを確認します。
もしmainブランチにreleaseやhotfix以外のブランチをマージしようとしていた時に`exit 1`でテストを失敗させることでマージ前に気づかせることができます。
さらにブランチの保護をしていればマージを防ぐことができます。

# あとがき
本来ならGitHubで欲しい機能ですが、なくてもなんとかすることはできました。
これで一つでも多くの事故を防ぐことができたらと願っています。
もし間違い等がありましたらご指摘いただければ幸いです。

# 宣伝
ようやく公開できたプロジェクトに今回の小技を実際に使用しています。
もしHackMDのような同時編集と複数のチームやプロジェクトでアクセス制御を行いたいという人はぜひCakemixを試してみてください！
https://github.com/wonder-wonder/cakemix-front
https://github.com/wonder-wonder/cakemix-server

# Reference
- https://docs.github.com/ja/actions/reference/workflow-syntax-for-github-actions
- https://docs.github.com/ja/actions/reference/context-and-expression-syntax-for-github-actions#github-context
- https://docs.github.com/ja/actions/reference/events-that-trigger-workflows#webhook-events
Cask　書き方変わったってよ

#概要
homebrew の cask でインストールしようとしたら
だめだったので色々と調べたら ver 3.0.0 以上は書き方変わってるらしいです。

#Cask打ってみた
```zsh
% brew cask
Error: Unknown command: cask
```

ヽ(ﾟ◇ﾟ )ﾉ！！

色々とパス通したりまたインストールしたりと色々してしまいました。。


#変更になった打ち方
```zsh
% brew casks
```
なんかいっぱいでてきた。
インストールできる一覧を表示してくれるらしい。

肝心の変更になった記述方法はこちら↓

```zsh
% brew install インストールしたいもの --cask
```
試しに vscode が .Net SDK が無いよってうるさいので入れてみる

```zsh
% brew install dotnet-sdk --cask
```


いけた。
#おわりに
もっと色々と調べたら無駄にインストールとかしないでよかったのに、、と後悔
調べるのが大事だと改めておもいました。


#参考
[rcmdnk's blog - Homebrew 3.0.0リリース](https://rcmdnk.com/blog/2021/02/06/computer-mac-homebrew/)
[いつの間にかbrew caskが使用できなくなっていた話](https://www.mathkuro.com/mac/brew-cask-command-error/)
timeseries/fill/offset/sample

#目次
[fill](#fill)
[offset](#offset)
[timeseries](#timeseries)
[sample](#sample)


#fill
データストリームに行を追加して、欠落している日付値を埋めます。

```
q = fill q by (dateCols=(Date_Year, Date_Quarter, "Y-Q"), partition='Type');
```
有効な日付指定

- YearField, MonthField, "Y-M"
- YearField, QuarterField, "Y-Q"
- YearField, "Y"
- YearField, WeekField "Y-W"
- YearField, MonthField, DayField "Y-M-D"

#offset

- filter および order の順序は、入れ替えても結果は変わらないため、入れ替えることができます。
- offset は、order より後に置く必要があります。
- offset は limit より前に置く必要があります。
- foreach ステートメントの後に置ける offset ステートメントは 1 つ以下です

```
q = order q by 'Account_Owner';
q = foreach q generate 'Account_Owner' as 'Account_Owner', 'Account_Type' as 'Account_Type', 'Amount' as 'Amount';
q = offset q 50;
q = limit q 50;
```
#timeseries
既存のデータを使用して将来のデータポイントを予測します。timeseries を使用するには、Einstein Analytics Growth および Plus ライセンスが必要です。

#来年訪問する旅行者の数はどの程度になるか?

- foreachで値を出す
- lengthは必須　
- predictionInterval つまり信頼区間を指定します。使用できる値は 80 と 95 です。
- dateCols使わん場合はorderは必須
- seasonality　 dateCols と一緒に使用


```
q = load "TouristData";
q = group q by ('Visit_Year', 'Visit_Month');
q = foreach q generate 'Visit_Year', 'Visit_Month', sum('NumTourist') as 'sum_NumTourist';

q = fill q by (dateCols=('Visit_Year','Visit_Month', "Y-M"));

q = timeseries q generate 'sum_NumTourist' as Tourists with (length=12, dateCols=('Visit_Year','Visit_Month', "Y-M"));
 
q = foreach q generate 'Visit_Year' + "~~~" + 'Visit_Month' as 'Visit_Year~~~Visit_Month', Tourists;
```



#sample

このクエリは、各フェーズの商談数を返します。クエリで操作されるのはデータセットの 10% であるため、各フェーズでの数は、元の数の約 1/10 になります。

```
q = load "Opportunity" sample(10) repeatable(1);
```

![スクリーンショット 2021-03-25 22.38.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385774/28470b58-80b0-85b6-5e1c-b5335b7b4d29.png)



#参考文献
[Tableau CRM SAQL Reference (Tableau CRM SAQL リファレンス)』](https://developer.salesforce.com/docs/atlas.ja-jp.bi_dev_guide_saql.meta/bi_dev_guide_saql/bi_saql_statement_timeseries.htm)
JavaScriptの関数

#JavaScriptの関数

```rb:メソッド定義
def index
  # 処理
end
```

**Ruby**でいうところの`メソッド`を、

```js:関数定義
function 関数名(引数) {
  // 処理
}
```
**JavaScript**では`関数`と呼ぶ

---
>
今回は`この記述で何がどうなっているのか`に関しては触れません。
>>
デベロッパーツールで読み込んだら出てくるんだぜ？やべーだろ？
>
までで終わります。

---

##早速出力してみる

エディターにある`index.html`ファイルを
Chromeに`ドラック＆ドロップ`でポイッと…


```:index.html
<!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>
</head>
<body>
  <script>
    // ここに書いていくよー
  </script>
</body>
</html>
```
コードを追記したら`デベロッパーツール`で出力結果を確認します

##文字列の結合

```js:Qiita投稿日は？
function hello(what) {
  return '火曜と木曜は' + what + '投稿日';
}
console.log( hello('Qiita') );
```

指定した「what」と文字列を組み合わせて作成し、その文字列をreturnで返す

```:実行結果
火曜と木曜はQiita投稿日
```
その結果
文字列が組み合わされ出力される

>
ちなみに「return」を使わなかったら…
>>
```js:Qiita投稿日
function hello(what) {
  '火曜と木曜は' + what + '投稿日';
}
console.log( hello('Qiita') );
```
>>
```:実行結果
undefined
```
>
値は出力されない。

## 計算結果の出力

```js:掛け算
const num1 = 3
const num2 = 4

function calc(num1,num2){
  return num1*num2
}
console.log(calc(num1,num2))
```
リロードしてデベロッパーツールを確認すると…

```:出力結果
12
```

## 抑えておきたい知識


- `JavaScript`ってのはこんな感じで`ブラウザ側で動作する言語`
- `HTML`と`CSS`はプログラミング言語ではなくて`マークアップ言語`
- `java`と`JavaScript`は別物
- 文字列として扱う場合は…
    - `''`シングルコーテーションで囲う
    - `""`ダブルコーテーションも可
- 数値同士の計算ではRuby同様[こちら](https://qiita.com/iamu_TECH_CAMP/items/ac97eeb3a839289f6ff5#%E6%AF%94%E8%BC%83%E6%BC%94%E7%AE%97%E5%AD%90--%E4%BB%A3%E6%95%B0%E6%BC%94%E7%AE%97%E5%AD%90)の`代数演算子`が使用される
オブジェクト指向プログラミングで作るとき、どういうソースコードにするか

# はじめに

いろんな人が書いていますが、オブジェクト指向プログラミングでプログラムを作るときの説明を、自分も短めに書いてみました。

オブジェクト指向をざっくり知っていて、オブジェクト指向プログラミングでどうすればいいか分からない人向けの説明です。
具体例は書いてないけど短め。

自分なりの理解で書いたの内容なので、参考くらいに見てください。


# オブジェクト指向プログラミング

とりあえず、Wikipediaの
[「オブジェクト指向プログラミング」『フリー百科事典　ウィキペディア日本語版』2021年3月16日 (火) 08:32](https://ja.wikipedia.org/wiki/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0)
から引用。

> オブジェクト指向プログラミング（オブジェクトしこうプログラミング、英: object-oriented programming、略語:OOP）とは、互いに密接な関連性を持つデータ（変数またはプロパティ）とコード（関数またはメソッド）をひとつにまとめてオブジェクトとし、それぞれ異なる性質と役割を持たせたオブジェクトの様々な定義と、それらオブジェクトを相互に作用させる様々なプロセスの設定を通して、プログラム全体を構築するソフトウェア開発手法である。

上手くまとまっていて、これ以上は言うことはないです。

プログラムの完成形の説明としてはこれで十分なのですが、どうプログラムをつくるかわからないと思います。


# オブジェクト指向プログラミングのメリット

まずは、何のためにオブジェクト指向を使うかということから。

オブジェクト指向プログラミングは分かりやすい、理解しやすい、読みやすいプログラムを作るためのものです。
もう少し具体的に言うと次のようなプログラムにするため、オブジェクト指向を使います。

- ソースコードをクラス(オブジェクト)という名前のある固まりにして分かりやすくする。
    - 視覚的にイメージしやすい。
    - クラスの形だと使いやすい。
    - どのクラスにソースコードが実装されているか推測できる。
- どういうソースコードになっているか知らなくても、クラス(オブジェクト)が使える。
    - プログラムを作るとき、読むときにクラスのソースコードを気にせず必要なところだけ考えればいい。
    - 覚えておくことを少なくできる。
- 拡張しやすいプログラムが作れる。
    - クラスを組み替えることで動作を変えることができる。


# オブジェクト指向プログラミングで作るとき、どういうソースコードにするか

オブジェクト指向のメリットは挙げましたが、オブジェクト指向プログラミング言語で作れば、メリットが得られるわけではありません。

逆に言うと、メリットを得られるようにプログラムを作る必要があります。


## クラス(オブジェクト)という名前のある固まりにする

プログラムで必要な処理やデータに名前を付け、名前を付けたクラスに関連するソースコードはできるだけそのクラスに作成するようにします。

名前と関係の薄いソースコードは、別のクラスにするようにします。


## クラスのソースコードを知らなくてもクラスが使えるようにする

クラスは外側からみてどうなっているかを意識しながら作る必要があります。
こんな感じのものが、良いクラスだと思います。

- 何をするクラス/関数かわかりやすい。
- 説明がなくても使えるクラス/関数になっている(できるだけ)。
- 公開されている関数、変数が少ない。
- 関連するクラスが少ない(クラス使うのに必要なクラスとかあったら困る)。

作る側から表現するとこうなります。

- 何をするクラス/関数かわかる名前をつける。
- 使うときの前提条件とか準備とかはなくす(減らす)。
- 外から使うときに必要な関数だけ公開する。
- クラスの関数、変数に使うクラスを少なくする。


## 拡張しやすいプログラムにする

上に書いたように作ると、ある程度拡張しやすいソースコードになります。

また、インターフェースやデザインパターンを使うと、拡張しやすいプログラムを作ることができます。


# オブジェクト指向プログラミングは難しい

これで終わりですが、実際のプログラミングは難しいと思います。

オブジェクト指向プログラミングにはオブジェクト指向プログラミング言語と関数化の能力に加えて、クラスを作る能力も必要となります。
手続きとかアルゴリズムとかと違った思考です。
これは、プログラミング言語を勉強しても、たいていの場合は一緒に書いてあるものではないはずです。

学習も少し難しいと思ってます。
ざっくりした方法論だったり、よくある形だったり、従ったほうがいい原則だったりがありますが、あまりまとまっていなかったりします。

また、どんなクラスを作るかにはトレードオフがあり、正解がありません。
「このクラスを作る/作らないと、この部分が簡単になる」だったり、「このクラスを作ると、この部分に機能追加しやすくなる」だったりということがあるため、必要なクラスを必要な分だけ作成するという形にする必要があります。

順に作っていっても、たぶん途中でクラスを増やしたり減らしたり、関数を移動させたりしないといけなかったりします。


# おわりに

具体的な話とか用語とか書いてないですが、方向性としてはこんなだと思っています。
Splunkの定期取り込みログの欠損を検出する

# はじめに

- cronかなにかで定期的に出力されるログを取り込んでいるとします
- 何らかの原因で取り込みが失敗してログが欠損してしまった場合に検出したいです
（HECで送っていてSplunk再起動のために取り逃してしまった時とか）
- ログ発生時刻には数秒の誤差がありmakecontinuousではうまくいかない場合に動的に検出したい
- そんなSPL作りました

# ログ欠損検出SPL

```go:SPL
| makeresults 
``` テストデータ作成 ```
| eval raw_time="2021/03/25 09:00:00, 2021/03/25 10:00:00, 2021/03/25 12:00:01, 2021/03/25 13:00:03, 2021/03/25 14:00:00, 2021/03/25 17:00:01, 2021/03/25 18:00:01"
| eval time = trim(split(raw_time, ","))
| mvexpand time
| eval _time = strptime(time, "%Y/%m/%d %H:%M:%S")
| fields _time
| sort - _time
``` 欠損行検出 ```
| eval planned_diff = "" ``` 間隔に想定があれば秒数で指定 ``` 
| eval threshold = 0.05 ``` 基準値からn倍の誤差まで許容 ```
| streamstats window=2 latest(_time) as l_time, earliest(_time) as e_time ``` window=2のstreamstats（2行ずつ処理）で前行の_timeをe_time、現在行の_timeをl_timeとして取得 ```
| eval l_time = if(l_time = e_time, now(), l_time) ``` 最新行の場合は比較対象に現在時刻をセット ```
| eval diff = l_time - e_time ``` 前行との時刻差分を計算 ```
| eventstats median(diff) as med_diff ``` 時刻差分の中央値を計算 ```
| eval upper_limit = if(planned_diff != "", planned_diff * (1 + threshold), med_diff * (1 + threshold)) ``` 上限を計算 ```
| eval missing_count = if(planned_diff != "", round((diff - planned_diff) / planned_diff), round((diff - med_diff) / med_diff)) ``` 欠損回数を計算 ```
| eval missing_duration = if(missing_count > 0, e_time.", ".l_time, "") ``` 欠損があった期間を出力 ```
| fields _time, missing_count, missing_duration ``` 必要なフィールドだけ残す ```
```

テストデータは以下のようなものです。

```text:テストデータ
_time
2021/03/25 18:00:01
2021/03/25 17:00:01
2021/03/25 14:00:00 --> 15時、16時のログがない
2021/03/25 13:00:03
2021/03/25 12:00:01
2021/03/25 10:00:00 --> 11時のログがない
2021/03/25 09:00:00
```

上記SPLで欠損数と期間（Unix time）を出力できます。
※22時に実行しているので、最新行である18時以降は欠損としてみなされています

```text:結果
_time,	missing_count,	missing_duration
2021/03/25 18:00:01,	3,	1616662801.000000, 1616677843
2021/03/25 17:00:01,	0,	
2021/03/25 14:00:00,	2,	1616648400.000000, 1616659201.000000
2021/03/25 13:00:03,	0,	
2021/03/25 12:00:01,	0,	
2021/03/25 10:00:00,	1,	1616634000.000000, 1616641201.000000
2021/03/25 09:00:00,	0,	
```

あとはグラフにしたりアラート化すればOK。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1218403/ca36536f-a469-3911-ee5f-240bd89f3bc8.png)
【備忘録】Linux環境上でWindowsのisoをUSBに焼く

諸事情によりWindowsのインストーラーが必要になった。
DVDにisoを焼こうと思ったら容量が余裕でDVDの容量を超えていたのでUSBにインストールする羽目になった。
そしてEtcherはWindowsのiso焼きには使えないらしい。
Unetbootinに関しては(EFIシステムパーティションの)容量不足でインストールできなかった。

調べたところ、WoeUSBというソフトを使えばLinux環境上でもUSBにWindowsのisoを焼けるらしい。
ということで早速インストールする

他のディストリビューションは知らないが、ArchLinuxでかつAURヘルパー(今回はyay)さえ入っていれば

```shell
$ yay -S woeusb
```

でインストールできる。

しかし、参考にしたQiita記事では起動するとGUIが表示されていたのだが自分の環境ではGUIどころかアプリケーションメニューにすら現れなかった。

コマンドとしては追加されてるみたいなので起動してみる

```shell
$ woeusb
```

なんか色々出てくるが少なくともGUIのウィンドウとかは出てこない
コマンドの使い方が普通に書いてあるので

```shell
$ lsblk
```

でインストール先のUSBがどれなのかを確認した上で

```shell
$ woeusb --device [isoファイルのパス] /dev/sdX
```

※`isoファイルのパス`と`/dev/sdX`は環境に合わせて適宜変更

して長々止まっているとUSBにWinwodwsのisoが焼けた。

おわり。


## 参考サイト

- [[Linux][Ubuntu] Windows 10インストール用USBメモリをUbuntu上で作成する](https://qiita.com/sengoku/items/e18e16ed1c268a242131)
vscodeでターミナル開くのに毎回　Terminal[^`]をクリックするのが面倒臭いので、ショートカットを設定した話

#通常のターミナルの開き方

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965248/a2ac554e-fff8-e82f-c117-f0ed296cfb94.png)

##viewをクリック→Terminal[^`]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965248/4b477b98-3a3e-71c2-3d43-a88205c03d07.png)

##無事ターミナルを開けた

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965248/d88cab6b-060c-63dd-0f9f-77fc7e802dcc.png)

#だが、俺はマウスは使わない主義だ、という方はショートカットを作成しよう。

###ショートカットの作成手順
①左下の歯車マークをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965248/94343ce6-8b09-d9ee-a0cd-c2e6ff5f1ede.png)
②KeyBoard Shortcutsをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965248/9edc43fa-2234-b9a8-0880-bffe82005dcf.png)
③検索バーに　「Terminal:Focus Terminal」 と入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965248/59247784-36c5-ca6d-760d-c6fc7ae55781.png)
④defaultではショートカットが決められていないので、下記の 「Terminal:Focus Terminal」をダブルクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965248/d17e38fe-86a5-86dc-e13a-6ed8723d9554.png)
⑤出てきたバーに登録したいショートカットを押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965248/f9d1b0bd-06c1-521e-1b44-def144441efa.png)
⑥「Enter」を押す
⑦右のSourceが「User」になっていたら成功！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965248/acef6e0f-8f3b-f6ba-1fab-528c81563cc2.png)

これで登録したショートカットを使うと、ターミナルが表示されるはずです。

ちなみにショートカットは被らないように設定しましょう。
まあかぶっていたら下記のように警告が出るので大丈夫です。
「1 existing command has this keybinding」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965248/7209a167-41ac-2cf7-67c8-2eef1160308e.png)


##参考記事

https://typememo.jp/tech/vscode-keyboard-shortcut-focus-terminal/

以上です。
ランダムな文字列のファイル名を作成

#概要
blobにランダムなファイル名をつけてアップロードしたい場合の処理をメモします。

#実装

```.js
const imageName = Math.random().toString(32).substring(2)
const formData = new FormData()
formData.append('file', blob, imageName + '.jpg')
const config = {
    headers: {
      'content-type': 'multipart/form-data'
    }
}
await axios.post('/api/post_upload', formData, config).then(()=>{
      alert('画像アップロード完了')
})
```

1. Math.randomで0以上1未満の少数をランダムで生成
2. toString()で32進数に変換
3. substring(2)で3文字目以降を取得

#まとめ
本格的にするならもっとセキュアな名前つけた方がいいかもしれません。
DockerでGitによるバージョン管理

DockerにはデフォルトでGitがインストールされているためPC自体にインストールする必要はありません。

#1.PCにGitがインストールされていない場合
自作の"myapp"にてPCにGitがインストールされていない状態でgitコマンドを入力すると

```
myapp % git init
xcode-select: note: no developer tools were found at '/Applications/Xcode.app', requesting install. Choose an option in the dialog to download the command line developer tools.

```
このようなエラーが表示されます。Gitがインストールされていないので当たり前です。
![スクリーンショット 2021-03-25 21.38.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1236550/650b8fa0-7635-4186-8ee8-2edc539ec04e.png)
ポップアップも表示されます。PCにインストールする必要はないのでキャンセル。

#2.DockerでGitを使うには

アプリを起動

```
docker-compose up
```
Dockerで起動しているコンテナを確認（NAMEを確認）

```
docker ps
```
コンテナに移動

```
docker exec -i -t コンテナ名 bash
```

移動先ではGitコマンドが使えるようになっているはずです。
お疲れ様でした。
Linux　シェル・シェルスクリプト

#シェルとは？
対話機能を提供するもの。コマンドの入力を受け付けそのコマンドを実行し、入力したユーザに対してその結果を返す役割がある。

#シェルスクリプトとは？
繰り返し行う処理を自動化するための手段

#echoコマンド
**echo [オプション]　文字列**

-n　改行を抑制

#シェル変数と環境変数
シェル変数は実行しているシェル内部のみで有効
環境変数はそこから実行されたコマンドうちでも有効

例）
export yamada
(シェル変数yamadaを環境変数yamadaにする)
export yamada=123
(環境変数yamadaを作成し123を代入)

#readコマンド
標準入力からデータを読み込む。すでに変数にデータが入っていた場合、新しいデータに上書きされる

**read 変数名**

#シェル変数と環境変数の一覧表示、削除
シェル変数の一覧表示は**setコマンド**、削除は**unsetコマンド**使用
環境変数の一覧表示は**envコマンド**使用、削除は**unsetコマンド**使用

#引用符
利用できる引用符は「**'**」と「**”**」と「**`**」が利用できる。

「**'**」の場合、文字列の中に$があっても変数は展開されない
「**”**」の場合、$付き変数は展開された文字列になる
「**`**」の場合、コマンドとして解釈され$付き変数があれば、それを展開した上でコマンドが実行される。

#引数、shiftコマンド、sourceコマンド
**引数**
シェルスクリプトは実行時にオプションを引数として参照することができる

**shiftコマンド**
引数の順序をずらす。実行すると、＄2が$1になる。

**sorceコマンド**
bashなどのシェルの内部コマンドで、指定されたファイルを読み込んでシェル環境を設定する。
リモートワークにおけるリーダーの動き方

リモートワークになって早1年たちましたが、少人数プロジェクトではありますがリーダーとしてやって良かったことをメモっておこうかと思います。

ポイントは<font color="red">成果の見える化</font>と<font color="red">メンバーの抱える問題を早めにピックアップする</font>です


# 毎日朝会をする

進捗確認するためだけでなく、コミュニケーションを取るためにもWeb会議で会話する機会を設けます。

- 1日10分前後の朝会をする
- 各自に以下のようなことを簡潔に話してもらう
  - 前日の進捗
  - 当日やること
  - 問題点（概要のみ話す）
        - 全員に関係すること　→　全員で話し合い
        - 個人的な問題　→　朝会後に個別にWeb会議にて話す


# こまめに成果物を出してもらう

朝会で進捗は確認するものの、自分は基本的に口頭での進捗報告は信用してないので、こまめに成果物をアップしてもらうようにしています。
個人的には成果物さえあがっていれば裏でサボっても良いよーくらいに思っています。

【例】

- 設計やテストであれば、共有フォルダに1日1回は成果物をアップする
- 開発であれば1日1回はプッシュする
  - 早めにDraftでプルリクを作る
  - 特に若手の開発者の場合は、こまめにレビューしてあげたほうが良いです
  - コミット履歴は荒れますが、最終的にスカッシュマージしてしまえば良いので、ガンガンプッシュしてもらいます


### タスクは1日（長くて２～３日くらい）で終わるくらいに分割する

そもそもタスクを1日単位で分割してしまえば成果を出さざるを得ないので、可能であれば1日単位くらいのタスクに分割するのが良いと思っています。

レビュー回数は増えますが、一つのレビュー単位も小さくなるので、結果としてレビュー時間は少なくなると思います。
（大き目な画面開発の場合、中間ブランチ作って1機能ずつ開発していく等）

※タスクの分割自体はリーダーがやらず、作業者にやってもらっても良いと思います。


# 「分報」で悩み事を早めにフォロー

リモートワークの一番の欠点は顔が見えないことで順調なのか困っているのかがリアルタイムで把握できないことだと思います。
これを解決するために、メンバー自ら問題を挙げてくれるように`分報`を導入しました。

弊社ではTeamsを使っていますが、開発チーム内に`【分報】氏名`というチャネルをメンバー分作成して、自由につぶやける場所を用意しました。

何でもつぶやいて良いんですが、以下のルールだけは守ってもらうようにして、一人で悩まないようにしました

- 何か分からないことや詰まったタイミングで分報につぶやく
- 15分は自分で調べてもらう
  - 解決した　　⇒　解決した旨をつぶやく
  - 解決しない　⇒　メンションつけて質問してもらう

※リーダーは最初のつぶやきのタイミングで即答できそうであれば即答してもOK

# それ以外にやっておくと良いこと

### ドキュメントを充実させる

設計書をたくさん作れということではありません。

環境構築に手間取ったり、GitHub等のツールの使い方がわからなかったり、メンバーによって熟練度がバラバラなので、フローを明確にしておきましょう。
コマンドを実行する必要があれば、コマンドをコピペするだけで良いようにし、画面での操作が必要であれが画面キャプチャ付きで説明するようにします。

技術や仕様的な質問以外は「ここ見て」で解決できるようになるとベターかと思います。
※メンバーから記載のない質問や指摘があったらドキュメントをメンテしていきましょう。

### 色々と自動化する

- フォーマッターを導入し、ファイル保存時に自動で整形する
- CI/CDツールを活用する
    - Lintやテストをローカルで実施してなかったりするのを防止
    - デプロイ時のヒューマンエラー防止


# 最後に

上記ルールをベースとしてプロジェクトを回してますが、割と順調に回っているかなーと思います。
リモートワークでの管理に困っている方の参考になれば幸いです。
AtCoder Heuristic Contestのタスクランナーを作った


# Marathon Runner

## 開発の背景

AtCoderでHeuristic Contestなる、いわゆるマラソン形式の競技プログラミングコンテストがはじまりました。一回目のAHC 001に参加して面白かったのですが、自分のベストプラクティスがない状態で進めてしまった感がありました。
kimiyukiさんの [マラソンマッチのためのツールセットはどのようなものになるか](https://kimiyuki.net/blog/2021/03/18/what-is-a-toolset-for-marathon-matches/) を読んでなるほどと思い、最小の開発サイクル支援環境 "Marathon Runner" を考えてみました。
コードを書く -> 実行する -> 履歴を見ながら考察 -> コードを書く のサイクルが最小かなということで、「実行する」と「履歴を残す」を補助するツールを作ってみることに。

## 動いている様子

履歴のセットを選んで、画像の下のスライダーでタイムラインから結果を眺めることができます。

![marathon-runner.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20902/c43838ca-fce3-d8a2-703d-ad8775d87b18.gif)

## 開発フロー

このような開発フローを想定しています。

1. 仮説を立ててコードを書く
1. 一通りできたら、チェックインのバッチを実行
1. チェックインのバッチがコードをコピーし、テストケースを実行し、ログを取り、ビジュアライザを呼び出して画像化する
1. webフロントエンドの一番上に結果が足される
1. 結果を眺めて改善点を考える

## 構成

このツールは以下の要素からなります。

### main.cpp: マラソンのコード本体

このサンプルではC++ですが、コマンドラインで実行してファイルと標準エラーが出力できれば何でもいいです。
競技プログラミングでは、1つのソースコードに全てを含めることが多いです。なのでリポジトリの直下にソースコードを置いています。

途中経過もファイルに出力するようになっています。250ms毎に `TTTT.txt` のように経過時間をファイル名として出力します。
標準エラーは先頭に経過時間を含めるようにしてみました。チェックインのバッチでは、その値を見て途中経過のログとして処理します。たとえば開始から10ms後に `10 task 1 start` みたいな標準エラー出力があって `0250.txt` が生成されていたら、そのログは `0250.log` に保存されるようになっています。

これは私がAHC 001に最終提出したコードの簡略版で、以下のような内容です。(単純な山登り)

- phase 1として、セルに上下左右で単純に成長できる余地があるなら成長させる
- phase 2として、以下を4.75秒経過するまでひたすら実行する
    - 任意のセルと、そのセルに隣接するセルを選び、1x1のサイズに戻す
    - 上または下、左または右のそれぞれに対し、セルの成長速度をランダムに決める
    - 決めた方向にセルを成長させる
    - 最初に決めた方向に成長しきったら、反対方向にも成長させる
    - スコアが改善したら、この試行を採用し、そうでなければ捨てる

### run.rb: チェックインのバッチ

Rubyで書かれています。新しめのRubyなら動くと思います。引数にテストケース番号を取ります。
コードをコピーし、テストケースを実行し、ログを取り、ビジュアライザを呼び出して画像化します。
実行ファイルが `a.out`、ビジュアライザが `visualizer/` に置かれていることを想定しています。
1回の実行結果を `public/results/YYYYMMDD_HHMMSS_CCCC/` に置きます。(`CCCC`はテストケースの番号)
標準出力を `9999.txt` として保存します。標準エラーは、途中経過の情報の一部として保存します。
途中経過も含めてビジュアライザを呼び出し、メタ情報を `info.json` として保存します。

サンプルは `make` で実行できます。

### src: webフロントエンド

Vuetifyで書かれています。
`yarn install` でインストールできます。
使い方は `yarn run serve` でローカルのwebサーバを起動しておきます。
ブラウザから `localhost:8080/` で表示できます。
Vueが賢いので、チェックインのバッチが結果を追加すると、勝手にリロードされます。

## visualizer: ビジュアライザ

[AHC 001](https://atcoder.jp/contests/ahc001/tasks/ahc001_a)のビジュアライザをここにコピーしてください。
もちろんビジュアライザを自力で書いたり改善してもいいのですが、そのまま使えると限られた時間でも楽しめるのではと思います。

## ソースコード

ここにあるのが全部です。1つのマッチでリポジトリ全体をコピーして使うことを想定しています。
https://github.com/firewood/marathon-runner

まだまだ未完成ですが、オレオレタスクランナーの参考にしていただければ幸いです。

## おまけ

動画に変換できるようにしました。

https://twitter.com/hotpepsi/status/1375406447001919490

`./convert-to-mp4 実行結果ディレクトリ` でout.mp4ができます。
mimemagicエラー

gemを入れてbundle install を行ったところ、以下のエラーが出ました。

Your bundle is locked to mimemagic (0.3.5), but that version could not be found
in any of the sources listed in your Gemfile. If you haven't changed sources,
that means the author of mimemagic (0.3.5) has removed it. You'll need to update
your bundle to a version other than mimemagic (0.3.5) that hasn't been removed
in order to install.


んん、よく分からん。。とりあえずGemfile.lockで関係してそうな内容を消して再度bundle install をしたら直りました。
Twitter API 登録の仕方(2021年3月17日)

【欲しいもの】
bot を作るために必要なもの。
1. Access Token
2. Access Token Secret
3. Consumer Key
4. Consumer Secret
これらを以下で取得していく。

# 準備編

### 1
ここにアクセスする

https://developer.twitter.com/en

### 2
Apply(右上)

### 3
Apply for a developer account

### 4
目的を選ぶ(今回はbotを作りたいのでhobbyist > making a bot)

### 5 
get start

### 6
名前とかemailとか入力する

### 7
何に使うのか入力する
利用規約に同意する
 色々進めて、、、

### 8 
submit application
メールが送られたっぽい

### 9
メールにある[Confirm your email]をクリック
メールアドレス、パスワードを打って認証完了する。

### 10
「今あなたのレビューをしているよ！！」的なメールが届く。
他の人の記事を見ているとレビュー完了まで数時間かかるそう。

 ###11 メールがかえってくる。
今レビューしていますが、もう少し用途について聞かせてください的な内容。
これは、7.で英文と全く同じのでもOK

### 12 
30程度待っていると、twitterからメールが来る
登録申請がapproveされたメールがきました。

### 13
送られてきたリンクにアクセスして、アプリ名を決める。
Get keyを押す。

### 14
【api key】
【API secret key】
【Bearer token】
を保存しておく。

### 15
作ったアプリの中からAccess token & secretをgenerateする。
そこに、Access token、Access token secretがあるからコピーしてどこかに記録しておく。

### 16
これで最初に述べたAccess Token、Access Token Secret、Consumer Key、Consumer Secretの4つがゲットできた。

# ここからは本格的にTwitter　bot を作っていく。

###
https://qiita.com/ryoya-s/items/bc8a0e39716bb2844f0b
の記事を参考にした。
設計原則

#目次

#明確性
アプリケーションからあいまいさを排除します。明確性があれば、ユーザが自信を持って確認、理解、行動できます。
#効率性
アプリケーションの機能を通じたユーザの動作を予測し、ワークフローを合理化および最適化します。これにより、ユーザはすばやく、スマートに、よりよく作業できます。
#一貫性
同じものには共通の名前を使用し、データの共通部分や同じアプリケーションアクションは似た図の要素で示し、重要性が同じ要素は近いサイズで示します。同じソリューションを同じ問題に適用して、ユーザの知識を育み、共感を強めます。
#美しさ
よく練られて、洗練されたクラフトマンシップを忙しいユーザに提供します。ユーザの時間や関心を奪うものはほかにもたくさん存在します。

#設計とは、どのように機能するか
ジャーニーを進めるうちに、「熟考」する方法を学習することになります。これまでに説明したプロセス全体を通じて、独自のアプリケーション設計と開発に利用できるように実践的な演習を紹介します。そのプロセスを The Motivator に適用し、熟考によって、見た目がよいものがどのように実際によいものに変わるのかを説明します。最終的には、Tableau CRM や他の種類のアプリケーションプラットフォームの実用的に優れた独自のアプリケーションを設計するために必要なツールを得られます。

#アプリケーションの利用者と目的を判断
アプリケーションはユーザをジャーニーにいざないます。最終的にユーザを待つものに関する明確な案が必要です。それには、利用者がどのような人かと、利用者が何を必要とするかをきちんと理解する必要があります。またアプリケーションの目的を知る必要があります。目的とは、アプリケーションを使用して利用者が実現したいと願う目標です

#アプリケーションの構造を思い描く
アプリケーションの機能とコンテンツがアプリケーションの目的を果たせるように、どのように境界を配置しますか? また、論理フローでそれをどのように調整しますか? アプリケーションの構造が優れていれば、ユーザのジャーニーは興味深い発見のプロセスになります。アプリケーションのコンテンツを発見するには、論理的な計画に従う必要があります。それは簡単で楽しいものです。

#正しい外観の要素を選択する。

機能全体でユーザのジャーニーを可能な限り流動的にして、適切なパスを選択できるように、どのような印を設定しますか? アプリケーションに対するユーザの感情的な結びつきを高めるには、どのようなデザインの選択を決定する必要がありますか? どのような視覚要素が、ユーザの目標達成の報酬となりますか?

#順次原則
###F パターン
サマリーや最も優先度の高い KPI を左ペイン (F の左部分) に配置できます。より詳細な総計値の可視化情報は、右に配置します (F の 2 つの水平線)。さらに詳細な情報が右および下に表示されます
![スクリーンショット 2021-04-05 14.02.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385774/d7897a28-2297-b5a2-1746-6a060293a2b5.png)

###Z パターン
ページを上から下に確認します。サマリー情報をページ上部に中央寄せで配置します。付随する可視化情報は、サマリーの下に配置して、コンテンツ領域の全幅を占めます
![スクリーンショット 2021-04-05 14.05.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385774/287b2a56-43e9-26ac-cce3-0b1f7b06ff4b.png)


###横並びパターン
![スクリーンショット 2021-04-05 14.05.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385774/493ca83f-f247-30f2-6e0b-2542adfb0334.png)

要素を並べて配置できるため、2 つの総計値を比較する場合に特に便利です。ユーザは左から右、または右から左に目を移して、総計値を比較します



#参考文献
[よい設計の原則の理解](https://trailhead.salesforce.com/ja/content/learn/modules/analytics-app-design/principles-good-design)