OmniAICreator/Qiita-1.07M huggingface dataset:
【今日のアブストラクト】Creating High Resolution Images with a Latent Adversarial Generator【論文 DeepL 翻訳】

1 日 1 回 論文の Abstract を DeepL 翻訳の力を借りて読んでいきます.

この記事は自分用のメモみたいなものです.
ほぼ [DeepL](https://www.deepl.com/home) 翻訳でお送りします.
間違いがあれば指摘していだだけると嬉しいです.

翻訳元
[Creating High Resolution Images with a Latent Adversarial Generator](https://arxiv.org/abs/2003.02365)

# Abstract

### 訳文

現実的な画像を生成することは難しく, 最近では多くの定式化が提案されている. しかし, ある特定のクラスの画像を生成することに限定すると, このタスクはより扱いやすくなる. すなわち, 自然画像の多様体から任意の画像をサンプルとして生成するのではなく, 自然画像の特定の "部分空間" から, 同じ部分空間の低解像度画像を用いて画像をサンプルとして生成することを提案する. 我々が扱う問題は, 単一画像の超解像問題の定式化に近いものだが, 実際にはかなり異なっている. 単一画像超解像問題は, 比較的低解像度の画像から最も基底真実 (ground truth) に近い画像を予測する問題である. Latent Adversarial Generator (LAG) と呼ばれる新しい手法を用いて, 非常に小さな入力を与えられた高解像度画像のサンプルを生成することを提案する. 我々の生成的サンプリングフレームワークでは, ネットワークが生成すべきサンプルのクラスを指示するために, (おそらく非常に低解像度の) 入力のみを使用する. そのため, 我々のアルゴリズムの出力は, 入力に関連するユニークな画像ではなく, 自然画像の多様性からサンプリングされた関連画像の可能性のあるセットである. 我々の手法は, 知覚損失を用いて敵対者の潜在空間のみで学習する．

### 原文

Generating realistic images is difficult, and many formulations for this task have been proposed recently. If we restrict the task to that of generating a particular class of images, however, the task becomes more tractable. That is to say, instead of generating an arbitrary image as a sample from the manifold of natural images, we propose to sample images from a particular "subspace" of natural images, directed by a low-resolution image from the same subspace. The problem we address, while close to the formulation of the single-image super-resolution problem, is in fact rather different. Single image super-resolution is the task of predicting the image closest to the ground truth from a relatively low resolution image. We propose to produce samples of high resolution images given extremely small inputs with a new method called Latent Adversarial Generator (LAG). In our generative sampling framework, we only use the input (possibly of very low-resolution) to direct what class of samples the network should produce. As such, the output of our algorithm is not a unique image that relates to the input, but rather a possible set of related images sampled from the manifold of natural images. Our method learns exclusively in the latent space of the adversary using perceptual loss -- it does not have a pixel loss.
V8ランタイムのGoogle Apps Script(GAS)で、JSON文字列をparseして特定のフィールドを取り出す関数を書く

気づいたらGoogle Apps Script(GAS)でV8ランタイムが利用できるようになっていました。

* [V8 Runtime Overview  |  Apps Script  |  Google Developers](https://developers.google.com/apps-script/guides/v8-runtime?hl=ja)
* [GASがV8エンジンに対応したのでドキュメント読んだ](https://qiita.com/UtaMori/items/ce83672cecca20964899)
* [祝！Google Apps Scriptが「V8ランタイム」をサポート！モダンなECMAScript構文が使えるようになった](https://tonari-it.com/gas-v8-runtime/)


公式ドキュメントにもハッキリ書いてあり、日本語の記事もたくさんあります。

何が嬉しいかって言うと、いままで太古のJavaScriptの構文しか使えなかったGASでアロー関数やclassや分割代入が使えるようになったのです。ReactやVue.jsなどでこういった新しい構文にどっぷり浸かった状態でGASに来ると「あれもダメこれもダメ」と言われまくるストレスから開放されるのです。最高です。

# 本題


今回はGASでモダンなECMAScript構文を使いつつ、JSON文字列をparseして特定のフィールドを取り出すGoogleスプレッドシート用の関数を書いてみます。
といっても、「アロー関数を使えるからスッキリ書けた」ってだけです。

GoogleスプレッドシートならJSONをparseする関数くらい用意されているかなと思いましたが、案外なかったので備忘録として残しておきます。

「Google Apps Scriptってなんぞ」や、GoogleスプレッドシートでGoogle Apps Scriptを利用できる方法についてはこの記事で解説しません。検索したらたくさん出てくると思います。

# 手順

このようなJSON文字列から、nameというフィールドの値を取り出します。

|json_string|
|:--|
| {"name": "Apple"} |
| {"name": "Banana"} |
| {"name": "Coffee"} |

セルを一つ受け取ってparseしてnameを返すだけならこう書けますね。parseが失敗することも考慮して、try catchも挟みます。

```javascript
function extractNameFromJSON(cell) {
  let obj;
  try {
    obj = JSON.parse(cell);
  } catch(e) {
    console.error(e);
    return null;
  }
  return obj.name;
}
```

cellにはこのような文字列が入ってくるので、JSON.parse関数でparseしてnameを取り出しているだけです。

```javascript
"{ \"name\": \"Apple\" }"
```



また、配列関数としても使えるように、範囲で入力を受け取っても対応できるようにします。
範囲を関数の入力としたときは、以下のような値を処理することになります。

```json
[["{ \"name\": \"Apple\" }"], ["{ \"name\": \"Banana\" }"], ["{ \"name\": \"Coffee\" }"]]
```

行×列の二次元配列です。これも処理できるように調整した関数がこちらです。

```javascript
function extractNameFromJSON(range) {
  const parse = (jsonString) => {
    let obj;
    try{
      obj = JSON.parse(jsonString);
    } catch(e) {
      console.error(e);
      return null;
    }
    return obj.name;
  };

  if (Array.isArray(range)) {
    return range.map(row => row.map(cell => parse(cell)));
  } else {
    return parse(range);
  }
}
```

配列かどうかを確認して、配列だったらその中から行に相当する配列を取り出し、その中からJSON文字列を取り出してparseします。同じ構造の配列で返せばGoogleスプレッドシート側では結果を範囲として扱ってくれるので、map関数を利用します。

配列ではなかったらmap関数を使わずにそのままparseして結果を返します。同じ処理が重複しないよう、内部でparse関数を定義しています。

map関数や内部関数をアロー関数でサクッと定義できるのは助かります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201031/3ab8474a-b423-646e-771c-efd1768551b2.png)

GASで定義した関数はこんな感じで使えます。
【CSS】attr()でhtml属性から値を取得する

#attr()

属性に与えた値をそのままCSSで利用できる。すごい。
でも値の管理ってcssとjsどちらに持たせるかでややこしくなりそうなのは気のせいですか。

```html:HTML
<div class="hw" hoge-label=", world.">Hello</div>
```

```css:CSS
[hoge-label]::after {
 content: attr(hoge-label);
}
```

```:結果
Hello, world.
```
Pythonで毎日AtCoder #15

### はじめ
[前回](https://qiita.com/taxfree_python/items/855eee1fc022f3d1a678)
今日からC。書くの忘れていたので一問だけです。

### #15
[問題](https://atcoder.jp/contests/abc085/tasks/abc085_c)

**考えたこと**
昨日のB問題の類題です。forループを3つから2つに減らすことでTLEを防いでいます。

```python
n ,y = map(int,input().split())

for i in range(n+1):
    for j in range(n+1):
        noguti = (y - (i * 10000 + j * 5000)) // 1000
        if noguti + i + j == n and noguti >= 0:
            print(i,j,noguti)
            quit()

print(-1,-1,-1)
```
ちなみに、Python3→1567ms、PyPy3→276msでした。PyPyつよい

### まとめ
昨日の類題だったので、すぐにできた。Python3とPyPy3で結構な速度差があるので、for文使うのはPyPyを使ったほうがいいかな。では、また
EC2の処理が突然遅くなったときはCPUクレジットを確認しよう

# はじめに
EC2のインスタンス上で画像処理をする機能を社内用に提供していました。
ところが、変換するのに通常より時間がかかってくるとの声が上がってきました。
しかも、午前中は大丈夫だが、午後になると遅くなって使い物にならなくなるとのこと。

調査してみると、CPUクレジットが枯渇していることが原因となっているようでした。
CPUクレジットとは何か、なぜ午後に遅くなってしまったのかをまとめます。

# まずは調査
まずはともあれEC2のモニタリングを確認です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402550/bb4a040a-bb78-1b96-1552-c9feb0374b05.png" width="50%">

CPUクレジット残高を見てみると、遅いと言われている時間に0になっていることがわかりました。
その前にCPUクレジットとは何なのでしょうか。

# CPUクレジットとは
ここで一旦インスタンスタイプを確認します。今回使用していたインスタンスタイプは`t2.micro`でした。
12か月間の無料利用枠の対象にもなっているので、とりあえず選択する方も多いのではないでしょうか。
T2, T3, T3aインスタンスは**バースト可能パフォーマンスインスタンス**に分類されます

## バースト可能パフォーマンスインスタンスとは
バースト可能パフォーマンスインスタンスには、ベースラインがインスタンスタイプ毎に設定されています。
例えば、`t2.micro`では**vCPUは1**で、**ベースラインは10%**になります。

普段はベースラインでのパフォーマンスを提供するが、必要なときにはベースラインを超えて提供してもらえます。
ここでベースラインを超えて提供してもらえる時間を管理しているのが、CPUクレジットになります。
**CPU100%で1分間処理する**には、CPUクレジットを**1払う**必要があります。

CPUクレジットは基本的には時間経過によって貯まります。（T2シリーズのみ起動時にも付与されます）
`t2.micro`の場合、**1時間あたりに6**貯まり、**最大144**まで貯めることが出来ます。

つまりCPUクレジットとは名前の通り本当にお金のようなもので、
ベースラインの10%を超えてCPUを使いたいときは、CPUクレジットを払ってCPUのパフォーマンスを高められます。
しかし、CPUクレジットの残高がなくなってしまった場合は、ベースラインでの動作になります。

今回の私のケースでは、ユーザーが使用しない深夜のうちにCPUクレジットが144の最大まで溜まっていたが、
業務時間になると徐々にCPUクレジットを消費し、午後にはCPUクレジットの残高が0になってしまいました。
CPUクレジットの残高が0になったことで、CPUがベースラインの10%でしか動作しなくなってしまったため、
処理が極端に遅くなってしまったということになります。

## インスタンスサイズの違い
上記の例は`t2.micro`の例でしたが、1時間あたりに受け取れるCPUクレジットの数などは、インスタンスサイズによって異なります。

|インスタンスタイプ|1時間あたりに受け取るCPUクレジット|蓄積可能な最大獲得クレジット|ベースライン|料金（東京リージョン)|
|:------------|-------------------------:|--------------------:|--------:|--------------:|
|t2.nano      |                         3|                   72|       5%| 0.0076USD/時間|
|t2.micro     |                         6|                  144|      10%| 0.0152USD/時間|
|t2.small     |                        12|                  288|      20%| 0.0304USD/時間|

1時間あたりに受け取るCPUクレジットが2倍になると、価格も2倍になるとことがわかります。
サイズが大きくなるとベースラインも上がっているので、その分はお得というイメージでしょうか。

その他詳しくはこちらをご覧ください。
[バースト可能パフォーマンスインスタンスの CPU クレジットおよびベースラインパフォーマンス](https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/burstable-credits-baseline-concepts.html)

# おわりに
今回は`t3.small`にすることで対応をしました。その後は遅いとの報告も上がらず順調です。
T2, T3, T3aの違いも書こうかと思ったのですが、CPUクレジットと話が逸れるのでまた機会があれば。
（無料利用枠を使いたい場合以外は、基本的にはT3 or T3aを使ったほうが良いかと思います）
AWSで料金アラートの設定

最近UdemyでAWSを学び始めた。AWSは無料期間が一年間あるが、有料サービスを利用してしまったり、無料期間の終了に気づかず使用してると料金が知らない間に発生してしまう。
そうならないためにも、CloudWatchという機能を使ってアラートを設定していく。

#料金アラートの設定
AWSにログインすると以下の画面になるので、ユーザー名の書いてある赤枠部分を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558865/bf5bff55-b7b0-96de-b065-a44334c4d6fb.png)
マイ請求ダッシュボードを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558865/cfb9d1b1-2dc1-aa97-4eae-7c99d13bf139.png)
Billingの設定を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558865/485c9b75-fde0-10e1-bbee-2843537734d1.png)
請求設定にチェック、メールアドレスの設定をして、「請求アラートを管理する」を設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558865/840d734f-4576-36d2-f6d9-75226f69a435.png)
左のメニューの請求を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558865/ea076366-f06a-12b5-2abb-eb7989e3f40f.png)
アラームの作成を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558865/3cc1fd80-7215-55d1-b8ea-932aa076135b.png)
料金の設定。今回は10ドルを超えたらアラートするように指定して「次へ」を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558865/1fb6a49b-b337-3dee-fb18-dd1610a65b43.png)
メールアドレスを設定して、「次へ」を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558865/aef43014-cf0d-046e-48ae-5219a1f94d98.png)
エラーが出てるけどとりあえず次へ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558865/4d3c5393-4e60-efc7-3f1a-9974935edf57.png)
プレビュー画面の一番下の「アラームの作成」を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558865/765d8b49-5b85-3f54-d384-17e07d45cd0b.png)
一応正常に作成された。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558865/b2bea1a0-8468-9f73-1201-9ea5894376a7.png)
#終わりに
とりあえず作成できたから、超えたら通知が来るはず・・・。
【小ネタ】GoogleChromeでオンマウス時にしか表示されないDOMのデバッグ方法

## どんなときに役立つの？

タイトルにもあるとおり、オンマウス時にしか表示してくれない要素のデバッグ時に役立ちます。
（ツールチップやオンマウス時にだけ表示されるプレビューのDOM内容確認、CSSをブラウザ上で確認/調整など）

## 一応環境

macOS : Mojave 10.14.6
GoogleChrome : 80.0.3987.149


多分どちらも関係なく、Windowsでもできるはず（未検証）

## やり方

検証ツールを開いて `Sourcesタブ` を開いたあと、オンマウス要素など表示させてから `F8` キーを押して停止させる。

※たまに `F8`が反応してくれないときがあります。そのときはもう一度`Sourcesタブ`をクリックしてあげてください。

## 実際にやっているとこ

### `F8`で停止することで、DOM要素を確認できる！
![after.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108431/cdc18c32-cefb-61d6-606d-8bb13807874d.gif)

### 普通にやろうとすると、inspectで選択ができず、DOM要素をみることができない。

![before.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108431/52b28783-ffbe-a06f-0893-15a09cb8e885.gif)


よきWEBデバッグライフを！
GitHub Actionsでbitrise.ymlを追跡可能にする

GitHub Actionsでbitrise.ymlをダウンロードしてPRを作る

## bitrise.ymlを追跡可能にする

Bitriseはワークフローエディターがよくできているので、基本WebインターフェースでWorkflow作っています

が、変更履歴がわからなかったり設定ファイルはGitで管理したいです。
しかしbitrise.ymlをワークフローで使うには制約があったり、いろいろと大変なのであまりやりたくない。

そこで、bitriseからダウンロードしてきてGitに反映させる方法を取ります。

FastfileとBitriseで動かしてるやつはあったから、GitHub Actionsでやってみる

## 準備するもの

- BitriseのPersonal access tokens
    - こちらから生成: https://app.bitrise.io/me/profile#/security
- GitHub リポジトリ
    - SecretsにBITRISE_APP_SLUGとBITRISE_ACCESS_TOKENを登録

## Github Actions

```yaml:.github/workflows/sync_bitrise.yml
name: sync_bitrise

on:
  schedule:
    # 平日前の2時に実行(UTC)
    - cron: "0 17 * * 0-4"

jobs:
  sync:
    runs-on: ubuntu-latest

    steps:
    # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
    - uses: actions/checkout@v2

    - name: Download bitrise.yml
      run: |
        curl -O 'https://api.bitrise.io/v0.1/apps/${{ secrets.BITRISE_APP_SLUG }}/bitrise.yml' -H 'Authorization: ${{ secrets.BITRISE_ACCESS_TOKEN }}'
      shell: bash

    - name: Create pull request
      uses: peter-evans/create-pull-request@v2
      with:
        token: ${{ secrets.GITHUB_TOKEN }}
        commit-message: Sync bitrise.yml
        branch: ci/sync-bitrise
        branch-suffix: timestamp
```

## 参考

- https://api-docs.bitrise.io/#/application/app-config-datastore-show
- https://blog.kishikawakatsumi.com/entry/2019/06/19/160150
MacのSafariでQiitaにアクセスできない場合

# Qiitaにアクセスできない病
MacのSafariでQiitaにアクセスできなくなることがあります（割と頻繁に）
開発関連のワードで検索すると上位がQiitaの記事ばかりになるのでイライラしますね。
最初はQiitaのサーバーが落ちてるのかと思ってましたが、Windowsでは普通にアクセスできるし、
なんならMacのChromeで普通にアクセスできたので、Safariの問題とわかりました。
# 解決方法
Safariのメニューから「開発」→「キャッシュを空にする」
これだけで治りました。
（根本的な原因はわかりません。誰か教えて下さい。）
# この記事に意味はあるのか？
ここに書いてもこの記事に辿り着けないので意味ない可能性がありますねｗ
tkinterで背景が透過するFrameを作る【Python】

tkinterで背景が透明なFrameを作る。

#環境
Windows10
Python3.7

※本記事ではWin環境のみ扱います。他OSでは正常に動かない可能性が高い。
#サンプルコード
```python
from tkinter import ttk
import tkinter

root=tkinter.Tk()
root.wm_attributes("-transparentcolor", "snow")
#root.attributes("-alpha",0.5)
ttk.Style().configure("TP.TFrame", background="snow")
f=ttk.Frame(master=root,style="TP.TFrame",width="400",height="300")
f.pack()

label=ttk.Label(master=root,text="薄くならないで…",foreground="red",background="snow")
label.place(x=150,y=150)
root.mainloop()


```
`root.wm_attributes`の`transparentcolor`に透過させたい色を指定する。今回は`snow`に設定。
これより、`background`が`snow`な`f`と`label`の背景が透明になる。

#実行結果
![コメント 2020-03-24 220613.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240141/8b3f8635-c2f5-eae1-1a4f-5d395a0e9819.png)
FrameとLabelの背景が透過して後ろの壁紙が見えています。若干Labelにsnowが見えていますが、これはどうにもなりません(気持ち悪い)

#-alphaオプション
上のコードの`root.wm_attributes("-transparentcolor", "snow")`を
`root.attributes("-alpha",0.5)`のようにすると確かに-alphaの値で透明度を[0,1]で変更することができます。
しかし、
![コメント 2020-03-24 220522.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240141/3a117f62-9dea-7bb4-a0b8-ba89ebc3fc19.png)
このようにrootにあるLabelなどオブジェクト全体に透過率が適用されるので注意が必要。

#参考
[【Python】【TkInter】透明なFrameを生成する](https://qiita.com/zero-en/items/75e0c4dca646838da2d1)
↑Mac環境下ではこの記事の内容で再現できるそうです(手元に環境がないので未確認)。

Linuxでも再現できないか調べはしたが、結局解決できず...
上のサンプルコードをそのまま手元のubuntu18.04.4環境下で実行すると、

```
Traceback (most recent call last):
  File "hoge.py", line 5, in <module>
    root.wm_attributes("-transparentcolor", "snow")
  File "/usr/lib/python3.6/tkinter/__init__.py", line 1788, in wm_attributes
    return self.tk.call(args)
_tkinter.TclError: bad attribute "-transparentcolor": must be -alpha, -topmost, -zoomed, -fullscreen, or -type
```
となった。
LGTMについて思うこと

文字と数値がくっついていて、大きさが似ていて、色合いも同じで、著者名やタグの長さによって配置される位置が異なります。
結果として、ぱっと見で数値が全く読み取れません。

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/5a5e0a0e-0a3e-765e-afef-25b7e9919651.png)


前は色つきの記号だったので自然にそこで分割することができていたのですが、意味のある文字にしたせいで文字と数値が脳内でくっついてしまい、パースに詰まります。

もっと文字と数値を無意識に分てるようにUIを考えてほしいところです。


これが[タグページ](https://qiita.com/tags/php)になると、何故かタグがLGTMの右側に移動してくるため、文字列の間に埋没してしまい益々読みにくくなります。

![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/404ad7c2-823c-2792-051e-56ffc39d18a7.png)


[個人ページ](https://qiita.com/rana_kualu)や[新着ページ](https://qiita.com/items)になると、LGTMが右端の固定位置に寄るため、他のページに比べるとずっと見やすくなります。

![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/3c6f2f3a-e168-cda9-3f1e-10cc26f29390.png)


それでも、[かつての👍](https://qiita.com/rana_kualu/items/0797252f00314aadeac8)よりは圧倒的に見難いですけどね。


全体としてデザインがまとまっていればまだマシなのかもしれませんが、見てのとおり何故かページごとに配置がバラバラです。
LGTMの位置を把握するだけでも一苦労です。
Qiitaにはデザインリーダー的な人物はいないのか？？


まあここの運営、[何度も](https://qiita.com/rana_kualu/items/ec860155a4d3a44410a0)[いいねを消した](https://qiita.com/rana_kualu/items/f10a807b9bc6838dd2e2)りしてるので、最終的には全部消したいだけなのかもしれませんけどね。
【Next.js】ページ遷移時に表示するコンポーネント

Next.jsでページ遷移時に表示するコンポーネント。

- next 9.3.0
- typescript 3.7.5

## useRouter
nextでは、useRouterを用いてReact.FCコンポーネント内でルーターにアクセスできる。
ページ遷移する場合、`router.events`が発火される。

### router events
引数に渡されるURLは遷移先のURL。

|  event  |  説明  |
| ---- | ---- |
|  `routeChangeStart(url)`  |  ルートが変更され始めると起動する。  |
|  `routeChangeComplete(url)`  |  ルートが完全に変更されたときに起動する。  |
|  `routeChangeError(err, url)`  |  ルートの変更時にエラーが発生した場合、またはルートのロードがキャンセルされた場合に起動。  |

## component

router.eventで内部stateを入れ替える。
クラス書き換え等でフェードインフェードアウトも可能。

router.eventsは、URLに関係なくリンクを押された時に発火するので、handle関数内でURLが現在のURLかどうかを判定する必要がある。

```tsx
import { useRouter } from 'next/router';
import React, { useEffect, useState } from 'react';

export const Loading: React.FC = () => {
  const router = useRouter();
  const [loading, setLoading] = useState(false);

  const handleStart = url => {
    if (url !== router.pathname) {
      setLoading(true);
    }
  };
  const handleComplete = url => {
    if (url !== router.pathname) {
      setLoading(false);
    }
  };
  useEffect(() => {
    router.events.on("routeChangeStart", handleStart);
    router.events.on("routeChangeComplete", handleComplete);
    router.events.on("routeChangeError", handleComplete);
    return () => {
      router.events.off("routeChangeStart", handleStart);
      router.events.off("routeChangeComplete", handleComplete);
      router.events.off("routeChangeError", handleComplete);
    };
  });

  return loading && <PageTransition>{"Rendering..."}</PageTransition>;
};
```

```tsx
return loading && <PageTransition>{"Rendering..."}</PageTransition>;
```
としているので、
`loading===true`時のみ`<PageTransition>Rendering</PageTransition>`が表示される。
【CSS3】擬似クラスのあれこれ

#概要
自分用の覚え書きです。

## :visited{}
既にクリックしたリンク状態に対して記述できる。

```css:example
a:visited {
  color:red;
}
```

だと、クリック済みのリンクの色が変わる。
昔ながらのWebサイトを思い出すと、リンクを踏むと青から紫になるのが当たり前だったのでイメージが容易につく。が、今はreset.cssなどでリセットしちゃうので存在を忘れがち。ブログではやっぱり役に立ちそうなのでちゃんと設定することを心がけようっと。

## :focus{}
以下の状態に対して記述できる。

- タッチデバイスで触れている要素
- Tab キーでフォーカスが当たった要素

```css:example
a:focus {
 color: red;
}
```
とすると要素を触れる・Tabキーフォーカスされると文字色が変わる。
Tabキーは業務系だとバリバリ使うので気を抜けない。formの入力とかね。
 タッチデバイスも言わずもがな。

リンクに限らず、チップス・注意書き等、なにか動きを出したい時には

- :hover {}
- :focus {}

の組み合わせは使いそうですなー

追記：
[実際に組み合わせた例..](https://qiita.com/homusuke/items/1df7538cb4af04926d5e)

##:target{}

https://qiita.com/homusuke/items/981e1a86319d4a604759
GoogleAnalytics StandardをBigQueryにエクスポートする

#2日目
##GoogleAnalytics StandardをBigQueryにエクスポートする
GoogleAnalytics(以降 GA)をBigQueryにエクスポートしたいけど、GA360は高くて無理！
って思っていたので、GAのAPIを使って、GCS経由でBigQueryにエクスポートするのを実装しました。
まだ、少ししか試していないので、完ぺきではないかと思いますが、毎日投稿する関係上、悪しからず...笑
##大まかな流れ
1. GA APIを使ってrawデータ取得
2. pythonでcsvに整形
3. GCSにエクスポート
4. GCSからBigQueryにエクスポート

この流れで紹介していきます！

##GA APIを使ってrawデータ取得
[GA API クイックスタート](https://developers.google.com/analytics/devguides/config/mgmt/v3/quickstart/service-py?hl=ja)
上のページを参考にクイックスタートをパクります。
すると、rawデータを取得してくれるではありませんか！

ついでにライブラリもインストールしておきます。

```python
pip install --upgrade google-api-python-client
pip install oauth2client
```

このサンプルを自分好みに変更していきます。
まずは一度に取得できる量が少ないのと、毎日更新したいので、日付を変更していきます。

```python
from datetime import datetime,timedelta
maxSize = 10000
dt_now = datetime.datetime.now()
yesterday = dt_now - timedelta(days=1)
yesterday = yesterday.strftime("%Y-%m-%d")
```

###...とここまで来て、素晴らしい記事があることに気が付きました。
こんな素晴らしい記事読んでいれば、もっと早く完成したのに...笑
##わかりやすい記事（神様）
[Google Analytics APIを利用して無料版でもrawデータをBigQueryにエクスポートする方法](https://qiita.com/HuangKY/items/7d5f8403dc3ab1a92071)

##終わり
ということで、わざわざ書かなくても記事があったので今回はこれで！
一応まとまったファイルになっているものが先ほどの記事にはなかったので、コピペするのも面倒な人向けに一応Gitに挙げておきます。

##コード
[day2](https://github.com/HinataAoki/Everyday-AI-life/blob/master/day2.py)

##Day2も無事終了！
まずは3日坊主にならないことが目標です！笑
自己紹介

# プロフィール
都内で働くマーケター及び企画職3年目の27歳
メディアとショッピングの両方を持つ会社で互いをつなぎこむようなサービスを提案
さらに社内のログやアンケートを用いて、プロダクトを提案し、改善を促す。
そう、アプリケーションを作ることは全くできないのである(2020年3月24日時点)

そんな私は、大学院時代に機械学習を学んでおり、データサイエンティストとしてのキャリアを進む予定だった。

しかし、第一志望の企業でバイトをしていた際、
学部卒の超努力家秀才が現れて、熱量に負け挫折。
私は、半ば逃げのような形でマーケターとして文系就職するのであった。

# 学歴及び職歴
・大阪にある大学(電気電子)
・東京にある大学院(機械学習)
・東京にあるIT系企業(ウェブ企業ということになっている)
# 保持スキル
| 言語|経験|
|:-----------------|:-------|
| R|大学院の研究で使っていたので、ある程度できる|
| Python|同上|
| SQL|業務で使っているのである程度できる(アクセス系や購買系)|
| HiveQL|同上|
# 趣味
・サッカー(23年目だがめっちゃ下手・走れるだけ)
・フットサル
・サウナ
・TVゲーム(Apex legendsにはまってます)
・ビリヤード
・お酒
# 休日の過ごし方
・サッカー
・ゲーム

質問随時募集中です！！！
性能の見方を考える：Precisionだけを見ていれば良いのか? 全体の正解率(Accuracy)だけを見ていれば良いのか? について

(※もし間違った認識をしている点がありましたら、編集リクエスト・コメントなどご指摘お願い致します。)

その他の[Precision, Recall系の記事のまとめページ一覧はこちら](https://qiita.com/dl_from_scratch/items/1b6e0b7a60aa881b1930)。

# Precisionだけを見ていれば良いのか?

## 性能が実は悪い時

例えば、りんごカテゴリの識別性能を見るために、りんごのPrecisionの値だけを見ていると、性能を見積り間違える可能性がある。Precisionは高いのに、Recallが低い場合は、その機械学習の性能は実は悪い、ということになる。

以下の例は、りんごの絵を見せても確実にりんごでないとなかなかりんごと言わない機械学習くんのケースで、かつ、テストデータにりんごでないレモンやぶどうなどの絵がかなりたくさん偏って含まれているケース。この時、りんごのPrecisionは90/(90+10)=0.9、りんごのRecallは90/(90+90)=0.5、りんごでない時のPrecisionは10000/(90+10000)=0.991..、正誤合わせた全体の正解率(Accuracy)は(90+10000)/(90+90+10+10000)=0.990..、F値は2･0.9･0.5/(0.9+0.5)=0.643..、となり、どのPrecisionを見ていても0.9以上と良い性能に見えてしまう。たとえ、全体の正解率を見ていても0.9以上と良い性能に見える。

|　|予測=りんご|予測=りんごでない
|---|---|---
|真値=りんご|TP=90回|FN=90回
|真値=他の物|FP=10回|TN=10000回

表にPrecisionとRecallを合わせて書き加えれば、

|　|予測=りんご|予測=りんごでない|(Recall)
|---|---|---|---
|真値=りんご|TP=90回|FN=90回|0.5
|真値=他の物|FP=10回|TN=10000回|0.999..
|(Precision)|0.9|0.991..|F値=0.643..

## 特殊なケース：データセットが均等の時

特殊なケースとして、テスト時に使うデータセットが均等＝各カテゴリの個数がおおむね同じであれば、Precisionの値だけを見ていても性能劣化に気付くことが出来る。

以下の例は、前記と同様に、りんごの絵を見せても確実にりんごでないとなかなかりんごと言わない機械学習くんのケースで、かつ、各カテゴリの個数が180個ずつとなるようにテストデータを用意したケース。この時、りんごのPrecisionは90/(90+10)=0.9、りんごのRecallは90/(90+90)=0.5、りんごでない時のPrecisionは170/(90+170)=0.654..、正誤合わせた全体の正解率(Accuracy)は(90+170)/(90+90+10+170)=0.722..、F値は2･0.9･0.5/(0.9+0.5)=0.643..、となり、りんごでない時のPrecisionが0.654..に低下して性能劣化に気付くことが出来る。

|　|予測=りんご|予測=りんごでない|(Recall)
|---|---|---|---
|真値=りんご|TP=90回|FN=90回|0.5
|真値=他の物|FP=10回|TN=170回|0.9444..
|(Precision)|0.9|0.654..|F値=0.643..

## カテゴリが3種類以上の時

識別するカテゴリが3種類以上の多数ある時には、Precisionの値だけを見て性能劣化に気づけるのか。例えば、5種類のカテゴリを識別する場合、データセットを均等にして各カテゴリの個数が180個ずつとなるように表を作ると、

|　|予測=りんご|予測=レモン|予測=ぶどう|予測=メロン|予測=みかん|(Recall)
|---|---|---|---|---|---|---
|真値=りんご|90回|20回|30回|10回|30回|0.5
|真値=レモン|2回|170回|1回|4回|3回|0.944..
|真値=ぶどう|1回|3回|173回|2回|1回|0.961..
|真値=メロン|4回|2回|4回|167回|3回|0.928..
|真値=みかん|3回|1回|3回|2回|171回|0.95
|(Precision)|0.9|0.867..|0.820..|0.903..|0.822..

5種類のカテゴリすべてのPrecisionだけを見ると、りんご以外のPrecisionが0.8辺りまでやや低下しているものがあるが、低下量が少なすぎて分からない可能性がある模様。カテゴリ数が多ければ多いほどPrecisionの低下量は希釈されて、Precisionがあまり低下しなくなり、たとえすべてのカテゴリのPrecisionを見ていても、性能劣化に気づきにくくなっていく。たとえデータセットが均等であっても、Precisionの値だけを見ていては性能劣化に気づけない模様。また、全体の正解率(Accuracy)は0.857..となり、全体の正解率でも性能劣化に気づきにくい。

## すべてのカテゴリのPrecisionとすべてのカテゴリのRecallを見る

前記の表を見ると、明らかに値が低いのはりんごのRecall=0.5のみで、性能劣化に気づくには、毎回すべてのカテゴリのPrecisionとすべてのカテゴリのRecallをチェックしなくてはならないことになる。

性能劣化に気づくには：
* すべてのカテゴリのPrecisionとRecallの値を、小さい順に並べてグラフにしたり。
* すべてのカテゴリのPrecisionとRecallの中で、最も小さくなる値を見たり。

性能劣化を見逃す可能性がある見方：
* Precisionの値だけを見ていては、性能劣化を見逃す可能性がある。
* 一部のカテゴリだけのPrecision・Recallを見ていても、性能劣化を見逃す可能性がある。
* 全体の正解率(Accuracy)だけを見ていても、性能劣化を見逃す可能性がある。
SplunkのPythonに文字コード変換の外部ライブラリを入れる

今回もカスタムサーチコマンドの作成に関する投稿です。ここでは、カスタムサーチコマンドで使用する外部ライブラリのインストール方法を記載します。なお、この方法は**メーカー非推奨**なので、実施する場合は**自己責任**でお願いします。（Splunk本体がSplunk上のPythonで動いており、勝手にライブラリをアップデートしたり、新しいライブラリを入れると、Splunk本体の動作に影響が出る場合があるという理由で非推奨らしい）
また、Ubuntu18.04で検証していますので**他のOSでは使えない場合がある**こともご承知ください。

#目的

メール関連のログを見ていると、よく下のようなデータを見受けました。メールのタイトルや送信者名が日本語だと、このようにコード変換して出力されるみたいです。

```
=?ISO-2022-JP?B?GyRCJUYlOSVIJWEhPCVrGyhC?=
```
Splunkではこれらのコードはそのまま取り込まれます。更にSplunkにはコード変換用SPLがないため日本語に戻して検索することができません。
そこで、文字コードを変換するカスタムサーチコマンドを作成することを考えたのですが、自分がよく使用する文字変換ライブラリ`nkf for python`がSplunk上のPythonにインストールされていないことに気が付きました。色々調べて何とかSplunk上のPythonに`nkf for python`のライブラリを入ることができたので、その手順を記載します。

#ライブラリの取得

兎にも角にもライブラリを手に入れなければ話になりません。今回はpipを使った方法で行います。まず、Ubuntuの端末で以下のコマンドを入れます。

```
# pip install nkf
```

ライブラリのインストール先を調べるために、Ubuntu上のPythonで`sys.path`を実行します。

```
# python
・・・省略・・・
>>> import sys
>>> sys.path
['', '/usr/lib/python2.7', '/usr/lib/python2.7/plat-x86_64-linux-gnu', '/usr/lib/python2.7/lib-tk', '/usr/lib/python2.7/lib-old', '/usr/lib/python2.7/lib-dynload', '/home/[ユーザ名]/.local/lib/python2.7/site-packages', '/usr/local/lib/python2.7/dist-packages', '/usr/lib/python2.7/dist-packages']
```

このパスをたどると`/home/[ユーザ名]/.local/lib/python2.7/site-packages/`フォルダに、`nkf.so`ファイルが作られていると思います。これが、インストールされた`nkf for python`のライブラリの本体です。

#Splunk上のPythonにインストール

次はSplunk上のPythonに`nkf.so`を入れます。インストール先を調べるために、Splunk上のPythonでsys.pathを実行します。

```
# /opt/splunk/bin/splunk cmd python
・・・省略・・・
>>> import sys
>>> sys.path
['', '/opt/splunk/lib/python27.zip', '/opt/splunk/lib/python2.7', '/opt/splunk/lib/python2.7/plat-linux2', '/opt/splunk/lib/python2.7/lib-tk', '/opt/splunk/lib/python2.7/lib-old', '/opt/splunk/lib/python2.7/lib-dynload', '/opt/splunk/lib/python2.7/site-packages', '/opt/splunk/lib/python2.7/site-packages/bottle-0.12.17-py2.7.egg']
```

パスを見ると移動先のフォルダは同名の`/opt/splunk/lib/python2.7/site-packages/`が適切と思われます。このフォルダに`nkf.so`ファイルをコピーします。

```
# cp /home/[ユーザ名]/.local/lib/python2.7/site-packages/nkf.so /opt/splunk/lib/python2.7/site-packages/
```

#動作確認

本来ならカスタムサーチコマンドを作成して動作確認をすべきなのでしょうが、ただの動作確認だけならSplunk上のPythonで調べる方が楽なので、今回はこっちで動作確認します。

```
# /opt/splunk/bin/splunk cmd python
・・・省略・・・
>>> import nkf
>>> print nkf.nkf('-w','=?ISO-2022-JP?B?GyRCJUYlOSVIJWEhPCVrGyhC?=')
テストメール
```

ちゃんとライブラリを認識し文字変換ができるようになりました。後は、このライブラリを使いカスタムサーチコマンドを作成するだけですね。

#おわりに

他のOSだとパスが違う場合があると思ったので、念のためPythonでパスの調べる方法も載せておきました。他のライブラリのインストールも同様の方法でできると思いますが、今回のように`so`ファイルのコピーだけでできるとは限らないので注意してください。
何度も書きますが**メーカー非推奨**なので**自己責任**でお願いします。

---

動作環境
Ubuntu 18.04.4 LTS
Splunk 8.0.2.1
【Day35】積み上げ日記

##予定
■ポートフォリオの作成

##完了
■まこなり社長のyoutube動画
■WEB系企業の研究

##学習時間
1h

##学習ポイント
■まこなり社長のyoutube動画
・DNSにIPアドレスを聞く→聞いたIPアドレスをサーバーにリクエスト→WEBページ情報ゲット
・言語を習得する際は、一つ覚えてしませば他の言語習得は１ヶ月もあればできると。

■WEB系企業とは？
・CTOがいる。（SIerにはいない）
・自社サービスをスケールすることを目的にしている。
・数名での開発が多いので、より多くのスキルが求められる
・OSはLinuxを用いている。

##計画通り進んだか？
進んでいない。ポートフォリオ作成に着手する上で、１から自分で作ろうとしてデザイン選定に時間がかかっているため、取り組むハードルが高くなってしまっている気がする。テンプレートを用いて１つ、１から作るものを１つと段階を踏んで取り組んでいこうと思う。
webプログラミングの学習まとめ①

webプログラミングの勉強としてhtmlとcssを勉強中です。

学習したことを以下にまとめていきます。
参考にしてください。

<h2>html</h2>
<h3>見出しタグ</h3>
<p>h1~h6を使う</p>
<p>数字が大きくなるほどフォントサイズは小さくなる</p>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>

<h2>段落タグ</h2>
<h3>pタグ</h3>
文章に改行を入れたい場合に使用する
文章を書く場合はpタグを使うようにする

<h2>リストタグ</h2>
<h3>li</h3>
項目を箇条書きで記載したい場合などに使用する
liタグで囲まれた文章の先頭には・がつく
cssを使用することで・を消すことも可能

<h2>ulタグ</h2>
前述したリストタグを使用する前に必要な親タグ(?)
このタグを使用することでリストタグに・をつけられるように解釈される

<h2>classタグ</h2>
タグに名前を付けるイメージ
webページを作成するうえで同一のタグをたくさん使う。
後日記載するが、cssでタグの書式設定を変更する場合に
タグ名を指定すると全タグに反映されてしまう。
それを阻止するためにタグに名前を付けて、付けた名前に対して書式設定を行うようにする

とりあえずこんな感じです。
間違えた解釈があれば教えてください。
故障かな?とおもったら【Git編】

# 故障かな?とおもったら

|現象・症状|ご確認いただくこと|対処方法|
|---|---|---|
|`git`コマンドが使えない|`.git`がありますか|`git init`で初期化する<br>`git clone リポジトリURL`でクローンする|
|`git add`できない|ファイルが`.gitignore`の対象になっていますか|別のディレクトリに配置する<br>追跡対象外のファイルであっているか確認する|
|`git commit`できない|`git config --list`で`user.email`、`user.name`が設定されていますか|`git config --global user.email 'あなたのemail'`と<br>`git config --global user.name 'あなたのお名前'`で設定する|
||`git add ファイル名`でステージングしていますか|`git add ファイル名`でステージングする|
|`git push`できない|`git remote -v`でなにか表示されますか|`git remote set-url origin リポジトリURL`で設定する<br>`git config --global user.name 'あなたのお名前'`で設定してください|
|他の開発者の変更が反映されない|`git fetch`のみではローカルブランチには反映されません|`git merge`でマージを行う<br>`git pull`で反映する|
||ブランチはあっていますか|`git checkout ブランチ名`でブランチを移動する|
||ブランチはマージされていますか|`git merge ブランチ名`でブランチをマージする|
|自分の変更が他の開発者に反映されない|`git push`でリモートブランチに反映しましたか|`git push origin ブランチ名`でプッシュする|
|過去の編集が反映されない or 削除された|編集を行ったブランチですか|`git checkout ブランチ名`で編集したブランチに移動する|
||`git stash list`を確認する|`git stash pop`で直前の編集内容を反映する<br>`git stash stash@{i}`で特定の編集内容を反映する|
||`git checkout ファイル名`を実行した場合、直前のコミットまで編集内容が取り消されます|gitではサポート対象外となっております|
|`git merge`をすると、コンフリクトした|2つのブランチで同一ファイルを編集すると発生することがあります|ファイルを編集して`git add ファイル名`及び`git commit`を実施する|
|`git add` or `git commit` or `git checkout`時、Warningが表示される|Windows環境が開発に関わると、設定によって改行コードが変換されることがあります|`git config --global core.autocrlf [true input false]`で設定する|
|ブランチを削除しているのに、減っていない気がする|リモートブランチは開発者自身で意図的に削除しない限り、ローカルには残り続けます|`git fetch -p`をお試しください|
|編集してないのに`git blame`で未コミットの行が表示される|改行、スペースで影響を受けることがあります|`git blame -w`をお試しください|

# 書こうと思ったきっかけ
どうしてもプロジェクトで数人はGit初心者という方がいるので、その方々がよく引っかかりそうなところで、自己解決できる&もし失敗しても復旧ができそうなところをピックアップしてみました
見逃しや抜けがあると思うので、コメントで教えて下さい
~~気が向いたら他のパートも記事にする予定~~
７つのアクション

今回は、コントローラで使用する7つのアクションについて紹介します！
アクションとは、ルーティングがリクエストを受け取った時に動くものです

アクション毎に行われる処理を分けて記述することによって、役割をわかりやすく分類化できます！


|  アクション名 |  どんなリクエストに対応して動く？  |
| ---- | ---- |
|  index  |  一覧ページを表示する  |
|  new  |  新規投稿ページを表示する  |
|  create  |  データの投稿を行う  |
|  show  |  個別の詳細ページを表示する  |
|  edit  |  投稿編集ページを表示する  |
|  update  |  データの編集を行う  |
|  destroy  |  データの削除を行う  |


この7つのアクションは基本になる所なので、ぜひ覚えて活用できるようにしてみましょう＾＾！
Precisionが大きくRecallが小さい状態とはどういうことなのか? (その逆についても)

(※もし間違った認識をしている点がありましたら、編集リクエスト・コメントなどご指摘お願い致します。)

その他の[Precision, Recall系の記事のまとめページ一覧はこちら](https://qiita.com/dl_from_scratch/items/1b6e0b7a60aa881b1930)。

# PrecisionとRecallのトレードオフの関係

識別のタスクにあっては、一方の性能を上げればもう片方は必ず下がってしまうトレードオフの関係が中にあって呪縛から避けられないらしい(＝それが丁度、PrecisionとRecallの関係だそう)。ここでは、例えとして、適当なタイプと慎重なタイプを引き合いに出してこのトレードオフを見てみることに。

## 1. Precisionが小さくRecallが大きい状態とはどういうことなのか?＝何でもりんごと言う適当なタイプ

例えば、機械学習くんがりんごの正答率を上げようと画策して、**分からなかったら何であってもとりあえずりんごと適当に言うタイプになってしまうと**、りんごの絵が出題された時の正答率は毎回りんごりんご言うので確かに上がるものの、りんごでない絵の時にもすぐりんごと言うので、機械学習くんのりんご発言の信頼性が下がる。この時、**Recallは高くなるが、Precisionが低下している**。総合的には、**発言に信頼のおけない嘘つき機械学習くん**となる。

## 2. Precisionが大きくRecallが小さい状態とはどういうことなのか?＝なかなかりんごと言わない慎重なタイプ

一方、機械学習くんがりんごの正答率を上げようと画策して、**必ず明確にりんごと分かる時にだけりんごと言うようになり、なかなかりんごと言わない慎重なタイプになってしまうと**、絶対分かる時だけりんごと言うので確かに機械学習くんがりんごと言った時にはその発言は信頼できるものの、りんごの絵なのになかなかりんごと言わないので、りんご記憶力テストの点数は悪くなる＝記憶力が悪いとされる。この時、**Precisionは高くなるが、Recallが低下している**。総合的には、**記憶力が悪い不出来な機械学習くん**となる。

まとめると、

|Precision・Recallの大きさ|機械学習くんのタイプ
|---|---
|Precisionが小、Recallが大|何でもりんごと言う適当なタイプ
|Precisionが大、Recallが小|なかなかりんごと言わない慎重なタイプ

## なぜPrecisionとRecallを見るのか?

機械学習くんが何とか正答率を上げようと画策すれば、本当は自分の識別能力は高くないのに、Precisionだけ高くしたり、Recallだけ高くしたり、が簡単に出来てしまう。Recallを高くするには、何でもりんごと言う適当なタイプになればいいし、Precisionを高くするには、なかなかりんごと言わない慎重なタイプになればいい。一方で、自分の識別能力が本当に高くないと、PrecisionとRecallの両方を高くすることは出来ないもの。機械学習くんの画策を見破るためには、PrecisionとRecallが同じぐらい高くて、バランスが取れているかを監視しておく必要があるということ。感覚的に、PrecisionとRecallの両方の大きさ$P+R$のようなもので全体の性能の高さと、PrecisionとRecallの差$|P-R|$のようなものでバランスをチェック。

## なぜF値(＝Precision・Recallの調和平均)を使うのか?

機械学習くんが、適当過ぎるタイプであっても、慎重過ぎるタイプであっても、都合がよろしくないので、実用上は、Precision・Recallが同じぐらい高い、バランスが取れた性能が、おおむね一番都合がいい。その点において、F値は、PrecisionとRecallの差が開けば開くほどF値が下がっていくので、1つの指標で性能を見たい場合、F値はより都合がいい性質を持っているように見えてくる。
AtCoder 生活　5日目

[前回]
(https://qiita.com/flandrescarlet237/items/1d9e300f9e47521044ef)

#5日目
今回も前回と同じように@drkenさんの[AtCoder に登録したら次にやること ～ これだけ解けば十分闘える！過去問精選 10 問 ～](https://qiita.com/drken/items/fd4e5e3630d0f5859067)の第5問から第7問まで解きました。


##第5問　ABC083_B
[Some Sums]
(https://atcoder.jp/contests/abc083/tasks/abc083_b)

```c++

#include <bits/stdc++.h>
using namespace std;

int Sum(int n)
{
	int sum = 0;
	while(n >0){
    	sum += n % 10;
    	n /= 10;
    }
  	return sum;
}
int main(){
	int N , A ,B;
  	cin >> N >> A >> B;
  	int total = 0;
  	for(int i =1;i <= N;i++){
    	int sum = Sum(i);
      	if(A <= sum && sum <= B)total += i;
    }
  	cout << total << endl;
}

```
これは、解説を見たときにこんなやり方をすればいいのかと、驚きました。

##第6問　ABC088_B
[Card Game for Two]
(https://atcoder.jp/contests/abc088/tasks/abc088_b)

```c++

#include <bits/stdc++.h>
using namespace std;

int main(){
	int N;
  	int A[110];
  	cin >> N;
  	for (int i =0;i < N;i++) cin >> A[i];
  	sort(A ,A + N);
  	reverse(A ,A + N);
  	int Alice = 0;
  	int Bob = 0;
  	for(int i =0;i <N;i++){
    	if(i % 2 == 0)Alice += A[i];
        else Bob += A[i];
    }
  	cout << Alice - Bob << endl;
}

```
これは、ある程度までは自力で解くことができました。
少しだけ進歩を感じれた問題です。


##第7問　ABC085_B
[Kagami Mochi]
(https://atcoder.jp/contests/abc085/tasks/abc085_b)

```c++

#include <bits/stdc++.h>
using namespace std;

int main() {
    int N;
    int d[110];
    cin >> N;
    for (int i = 0; i < N; ++i) cin >> d[i];

    int num[110] = {0};
    for (int i = 0; i < N; ++i) {
        num[d[i]]++;
    }

    int res = 0;
    for (int i = 1; i <= 100; ++i) {
        if (num[i] >0) {
            ++res;
        }
    }
    cout << res << endl;
}

```

バケット法というものを知りました。今後は同じようなものが来ても大丈夫そうです。

精選された10問を解いているとなんだか毎回新しいものを知れて嬉しいです
初心者が見落としてしまったメディアクエリの書き順

こんにちは。今回はSASSでメディアクエリを使い始めた頃に詰まってしまった所をお伝えしたいと思います。

```index.html
...（省略）
  <body>
    <h1>hogehoge</h1>
  </body>
...（省略）
```
このhtmlに対して、以下のように設定するとmdサイズのときの設定(`color:blue`)が反映されません。何故でしょうか？

```style.scss
$breakpoints: (
  "sm": "screen and (min-width: 375px)",
  "md": "screen and (min-width: 425px)"
) !default;
@mixin mq($breakpoint: md) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

h1 {
  color: blue;
  @include mq(md) {
    // 「425px以上はcolor: red」
    color: red;
  }
  @include mq(sm) {
    // 「375px以上はcolor: green」
    color: green;
  }
}
```
そう、`@include mq(md)`の後に`@include mq(sm)`を設定しているからです。超基本なことですが、（詳細度が同じだったら）CSSのルールは後に書いた方が反映されます。なので、`@include mq(md)`と`@include mq(sm)`の順番を入れ替えましょう。そうするとちゃんと意図した通りに反映されます。

```style.scss
$breakpoints: (
  "sm": "screen and (min-width: 375px)",
  "md": "screen and (min-width: 425px)"
) !default;
@mixin mq($breakpoint: md) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

h1 {
  color: blue;
  @include mq(sm) {
    // 「375px以上はcolor: green」
    color: green;
  }
  @include mq(md) {
    // 「425px以上はcolor: red」
    color: red;
  }
}
```
JavaアプリをDockerイメージにするならjibを使うと便利だよ

##メリットの多いDocker
コンテナ化技術の一つであるDockerですが、使ってみると数多くのメリットがあります。
実際のメリットについてはネットで検索すると色々出てくるので、この記事ではDockerそのものに関する解説はいたしません。
ただ個人的に強調しておきたいのは、本番環境などへ直接Javaのモジュールやアーカイブなどを配置するようなデプロイしている場合、Dockerイメージをリポジトリにpushするという作業に変えることでたくさんの恩恵を得ることができると思います。

##Dockerの面倒さ
メリットの多いDockerですが面倒な面もあります。
Dockerfileを書かないといけない。書くためのコマンドやベストプラクティスも学習するとなるとそれなりに面倒です。
ローカル開発環境がWindowsの場合にDocker環境を構築するのも面倒です。

##jibが解決
もしDockerコンテナ上で動くアプリケーションがJavaで開発されている場合、Googleが提供している[jib](https://github.com/GoogleContainerTools/jib)を利用することでDockerにまつわるいくつかの面倒さから解放されます。

jibを利用するにあたって必要なのは（gradleを使っている場合） `build.gradle` に

```groovy
plugins {
  id 'com.google.cloud.tools.jib' version '2.1.0'
}
```
という設定だけです。

そして仮に `docker-image-to-push/1.0.0` というイメージ名でpushしたい場合は

```groovy
jib.to.image = 'docker-image-to-push/1.0.0'
```
と `build.gradle` に記述するだけです。
これで `gradle jib` と実行すればDockerイメージが作成されpushされます。
驚くべきはたったこれだけの設定でいいことと、ローカルにDocker環境が必要でないことです。
もしDocker Hubにアカウントを持っているなら

```groovy
jib.to {
  auth {
    username 'account'
    password 'pass'
  }
  image 'account/repository:1.0.0'
}
```

のように `build.gradle` に設定することですぐにjibを試すことができます。
（account, pass, repositoryの部分は環境に合わせて変更してください）

上記の例でわかるようにほとんど設定のいらないjibですが、色々設定することも可能です。
まず設定しておいてほしいのは（JavaのソースファイルのエンコーディングがUTF-8の場合）

```groovy
jib.container.environment = [JAVA_TOOL_OPTIONS: '-Dfile.encoding=UTF-8']
```

という設定です。
これがないとソースファイル中に日本語がある場合にエラーになってしまいます。
設定できる内容については [configuration] (https://github.com/GoogleContainerTools/jib/tree/master/jib-gradle-plugin#extended-usage)から確認できます。

以上、jibの紹介でした。
Cyber Detective CTF wagthetail 200

#問題

https://ctf.cybersoc.wales/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/8058b112-4284-7066-4243-4e1208f9f203.png)

チームは、関心のある人物サラが彼女の犬を散歩させる場所を探しています。 これは彼女の動きのプロファイルを構築することの一部です。

サラが犬を連れて行く傾向のある町を見つけることができるかどうかを確認できますか？

注：この人が誰なのかわからない場合は、他のLife Onlineの課題をご覧ください。これらの人がこれらの人を見つけるためのエントリポイントになる可能性があるためです;）。

#解いてみた

犬飼ってるんですね。
ツイートを見ても犬に関する情報はありませんでした。

プロフィールを見ると意味深な発言があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/546928f5-72a4-b5a8-acb4-a65338c5a4b4.png)

バスターが犬の名前でしょうか。
そうと仮定するとそのあとに座標が書かれているのでこれをgooglemapで確認すれば答えがわかりそうです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/e6d9179d-79b4-b1e4-f80a-12e9c3252373.png)

答え出ました。
exifrを使用したフォルダ内画像のexifデータ一括抽出

プログラミング初心者です。
任意のフォルダ内に格納されている画像のexifを抽出するのに手間取ったため、備忘録として残します。

```php

require 'exifr/jpeg'
require 'csv'

puts Dir.pwd

dir_name = "/Users/任意のフォルダパス"

Dir.chdir(dir_name)
dir = Dir.open(dir_name)
puts Dir.pwd

CSV.open('exif.csv','w') do |csv|
 csv << ['model','lens','f','exposure','iso','date']
  name = p Dir.glob('*.JPG')
  name.each do |syashin|
   exif = EXIFR::JPEG.new(syashin)
    a = exif.model
    b = exif.lens_model
    c = exif.f_number.to_f
    d = exif.exposure_time
    e = exif.iso_speed_ratings
    f = exif.date_time
    csv << [a,b,c,d,e,f]
   end
end
```

画像と同じフォルダにcsvファイルが作成されます。
MySQL データを更新する度にcreated がupdateされちゃう件に関して


問題：
Created(timestamp型)順でデータを表示。
カラムを修正した時Createdの時間も更新されてしまい
最下位に表示されるはずの一番古いデータが
最上位に表示されてしまう。
→不本意...


原因：
mysqlのtimestamp型には、デフォルトで
「CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP」
がついてきてしまう。

解決：ALTER TABLE テーブル名 CHANGE created created TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP;


*参考
https://blog.officekoma.co.jp/2016/11/mysql-timestamp.html
🚧 Hilber Hughes Taylor (HHT) schemeに関する定式化

# 背景
有限要素法の時間積分にはNewmark-β法を使用するのが一般的です。一方、接触問題などのように数値的な減衰が必要な際は[Hilber Hughes Taylor (HHT) scheme](https://escholarship.org/uc/item/18z548gt)が使用されることがあります。本記事ではこの手法を実装するための定式化を説明します。

# 定式化

運動方程式は次式で表されます。

```math
M\ddot{u}+C\dot{u}+K{u}=F
```

ここで、uは変位、Mは質量行列、Cは減衰行列、Kは剛性行列を表します。ここで、時間ステップが$n+1$ステップ目の運動方程式を考えます。

```math
M\ddot{u}_{n+1}+C\dot{u}_{n+1}+Ku_{n+1}=F_{n+1}
```

速度項と変位項を以下のようにするのがHHT法のアイディアです。

```math
M\ddot{u}_{n+1}+C\dot{u}'_{n+1}+Ku'_{n+1}=F_{n+1}
```

ただし、

```math
\begin{align}
\dot{u}'_{n+1} &= \left(1+\alpha\right)\dot{u}_{n+1}-\alpha \dot{u}_{n}\\
u'_{n+1} &= \left(1+\alpha\right){u}_{n+1}-\alpha{u}_{n} 
\end{align}
```

であり、Newmark-$\beta$法と同様に$n+1$ステップの変位と速度を次式で求めます。

```math
\begin{align}
\dot{u}_{n+1} &= \dot{u}_{n} + \Delta t \left(\left(1-\gamma\right)\ddot{u}_{n}+\gamma\ddot{u}_{n+1}\right) \\
u_{n+1} &= u_{n} + \Delta t \dot{u}_{n} + \Delta t^2 \left(\left(\dfrac{1}{2}-\beta\right) \ddot{u}_{n}+\beta\ddot{u}_{n+1}\right)
\end{align}
```

$n$ステップの状態量から、$n+1$ステップの加速度を計算するには以下の式を使用します。

```math
M'\ddot{u}_{n+1}=F_{n+1}-C\dot{u}''_{n+1}-K{u}''_{n+1}
```

ただし、

```math
\begin{align}
M' &= M-\left(1+\alpha\right)\Delta t\gamma C-\left(1+\alpha\right)\Delta t^2\beta K \\
\dot{u}''_{n+1} &= \dot{u}_{n} + \left(1+\alpha\right)\Delta t \left(1-\gamma\right)\ddot{u}_{n} \\
u''_{n+1} &= u_{n} + \Delta t \dot{u}_{n} + \left(1+\alpha\right)\Delta t^2 \left(\dfrac{1}{2}-\beta\right) \ddot{u}_{n}
\end{align}
```

この式を計算した後、先程の式で$n+1$ステップの変位と速度を計算します。

# 実装
ApexでURLにパラメーターを追加した時に起こったバグとその対処

# 概要

[ApexでBlobからStringに変換しようとした時に起こったバグとその対処](https://qiita.com/10kaoru12/items/1594a28f5e15b3e02c15)
の記事で紹介したようなバグが発生するため、暗号化したBlobをbase64形式でencodeしてURLパラメーターに付与する。
その後、別ページでパラメーターを受け取った際、encodeした文字列に「+」記号が含まれていると空白に変換されてしまうバグ（？）が発生したのでその時の対処について記述する。

## 問題が発生したソースコード

```java
    Blob key = Crypto.generateAesKey(128);
    // 暗号化する文字列「00000」
    Blob data = Blob.valueOf('00000');
    Blob encryptedData = Crypto.encryptWithManagedIV('AES128', key, data);
    String encodedEncryptedData = EncodingUtil.base64Encode(encryptedData);
```

## 対処したソースコード

```java
    Blob key = Crypto.generateAesKey(128);
    // 暗号化する文字列「00000」
    Blob data = Blob.valueOf('00000');
    Blob encryptedData = Crypto.encryptWithManagedIV('AES128', key, data);
    String encodedEncryptedData = EncodingUtil.base64Encode(encryptedData);

    // URLパラメーターをUTF-8でエンコード
    encodedEncryptedData = EncodingUtil.urlEncode(encodedEncryptedData, 'UTF-8');
```

## 原因

URLのパラメーターに追加する際はURLエンコードしないと無効な形式になってしまうようです。
URLパラメーターを弄るsalesforce開発者の方は注意して開発して欲しいです。

## 参考文献

- (URL parameter Issue while having '+' sign in the url
)[https://salesforce.stackexchange.com/questions/205344/url-parameter-issue-while-having-sign-in-the-url?noredirect=1]
- (Hash symbol when binding variables in URL)[https://salesforce.stackexchange.com/questions/4704/hash-symbol-when-binding-variables-in-url]
【Java】日付から差分を算出したい

開始日付、終了日付をもとに処理時間を算出したかった。

```java:date.java
import java.text.SimpleDateFormat;
import java.util.Date;

public class date {

	public static void main(String[] args) {

		SimpleDateFormat sdf = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
		Date start = null;
		Date end = null;

		// Date型に変換
		try {
			start = sdf.parse("2020/03/23 12:30:12");
			end = sdf.parse("2020/03/23 12:31:12");
		} catch (java.text.ParseException e) {
			e.printStackTrace();
		}

		long timeStart = start.getTime();
		long timeEnd = end.getTime();
		long processTime = timeEnd - timeStart;

		// ミリ秒
		System.out.println(processTime);
	}
}
```
実行結果：

```
６００００
```
パワーポイント標準機能だけで顔出し技術セッションの動画を作る

最近、コロナのせいで IT 系イベントは特にオンラインでの開催が主流になってきてます。
もしくは、オンラインでの開催が困難な場合は中止になっています。

そのため、登壇機会が減ってヤキモキしてる人が少しでもフラストレーションを発散できるようにパワーポイントでのセッション動画作成機能について紹介したいと思います。

## 完成動画

今回、この記事を書くために作った動画はこちらになります。パワポで作ってます。

<iframe width="560" height="315" src="https://www.youtube.com/embed/CEtY5yuurYg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

https://www.youtube.com/watch?v=CEtY5yuurYg

## 資料を作る

これは普通に PowerPoint でぽちぽちと作ります。

## 録画を行う

資料が出来たらついに録画パートです！
画面上部のタブの「スライドショー」にある「スライドショーの記録」の「先頭から記録…」を選択しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70288/0c69d333-abb7-cf21-0af0-7ce9567dcab2.png)

そうすると、以下のようにスライドショーの記録画面になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70288/43ff8c2c-d103-5a88-bc4e-9eab5f7c9c07.png)

録画したりするうえで気を付けるのは左上と右下になります。左上の録画ボタンを押すと録画が始まります。カウントダウンが入るので気持ちの準備をして録画に取り掛かれます。
顔出し NG の方は右下のボタンでカメラ画像のオンオフなどを切り替えることが出来ます。

注意点としては、スライドごとに音声が記録される関係上、スライド切り替えタイミングで話していると音声が途切れてしまいます。
スライドをめくる前後１秒は何も喋らない方が良いです。

## デモも入れたいんじゃが…

上記機能は基本的にスライドを使った発表の録画になります。デモとかをしたいばあいは、デモの手前まで録画をして録画をいったん止めます。いったんエスケープキーなどで録画のモードを抜けてデモの録画をしましょう。

このデモの録画もパワポだけで出来ます。
デモ動画を挿入するための空白のスライドを作って画面上部のタブの「挿入」にある「画面録画」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70288/429c4d19-65b0-2ee9-fe25-1c3f903a3cf5.png)

そうすると画面を録画する範囲選択のモードになるので録画したい領域の範囲を選択しましょう。そして、デモ用のツールとかページとかを開いて準備が出来たら画面上部にある録画ボタンを押して録画を行います。

この録画もカウントダウンが入るので心を落ち着けてやりましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70288/0cc2ad7c-f026-661d-c8b2-06add9c5c184.png)

録画の停止は Win + Shift + Q なので、これを覚えておくとデモが終わったところでスムーズに録画停止できます。

録画を停止すると、スライドに動画が挿入されます。
このデモ動画がスムーズに開始されるように挿入された動画の上で右クリックすると表示されるメニューから「開始」→「自動」を選択して自動で動画が開始されるようにしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70288/d6e5e0b2-05f1-ab24-7359-e8d61c1eaa79.png)

デモが終わったら、スライドショーの録画機能を再開して続きのスライドから録画を行いましょう。

録画したデモを見る限りだとデフォルトサイズのプログラムのコードは少し小さく感じるので、リアルプレゼンの時ほどではないですが若干大きめにして録画をすると見やすくなると思います。
（Full HD で 100 % サイズがどのように見えるかは私の YouTube 動画で確認してください）

## 出来栄えを確認する

スライドショーの録画が終わってデモ動画も挿入し終わったら出来栄えを確認してみましょう。パワーポイントのウィンドウの右下のほうにある閲覧表示ボタンを押すと再生されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70288/2867b3dc-b3c3-47c2-54d4-65c72074cb83.png)

これで出来栄えを確認しましょう。気に入らない場合はスライドショーの録画の右上のクリアからスライド単位での録音や、スライド全体の録音を消して、やり直すことが出来ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70288/043c026e-547e-77ba-85d3-25c90cb8071e.png)

## 動画ファイルにエクスポート

満足いく動画が出来上がったら動画ファイルにエクスポートします。画面上部の「ファイル」タブを選択して「エクスポート」→「ビデオの作成」→「画質などの選択」→「ビデオの作成」で mp4 形式でエクスポートされます。このとき「記録されたタイミングとナレーションを使用する」を指定することで、これまで頑張って録画してきた内容が動画になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70288/b510b77d-0863-8430-9626-b34130800563.png)

動画生成の進捗はパワーポイントのウィンドウ下部のステータスバーにプログレスバーが表示されるので、それが終わるまではパワポを閉じないようにして見守ってましょう。

## YouTube などにアップロード

最後に、動画ファイルを公開したい場所にアップロードして完成です！！

## まとめ

意外と簡単にパワポでセッション動画が作れることがわかりました。
今回、やり方を知って実際に資料作って録画してアップロードして、この記事を書くということをやっているのですが、大体 1 時間 30 分くらいになります。

是非、発表したくて悶々としている人は試してみてください！
Excel VBAの高速化

## はじめに
Excel VBAは非ITの現場でもよく使われる言語ですが、重い処理をすると処理速度が遅くなってしまうことが良くあります。今回はそんな時に高速化する方法を紹介します。

## 高速化一覧
* [更新設定の変更](#更新設定の変更)
 * [ScreenUpdating](#screenupdating)
 * [Calculation](#calculation)
 * [EnableEvents](#enableevents)
 * [Cursor](#cursor)
 * [一括処理](#一括処理)
* [セルへのアクセスを減らす](#セルへのアクセスを減らす)
 * [配列に入れる](#配列に入れる)
 * [変数に入れる](#変数に入れる)

## 更新設定の変更
###ScreenUpdating
処理中に画面の描写を停止することによって処理を速くする事が出来ます。

```VB
Application.ScreenUpdating = False
```

一連の処理が終われば自動的にTrueに戻ります。


### Calculation
処理中にSheet上の再計算を止めることによって高速化されます。

```VB
Application.Calculation = xlCalclationManual
```

処理後に自動で戻る事は無いので処理の最後に

```VB
Application.Calculation = xlCalclationAutomatic
```
として自動計算を有効にして下さい。
エラーで落ちた時も自動では戻らないので注意して下さい。

### EnableEvents
イベント発生を無効にして高速化します。
無効にすることによってセルのChangeイベント等が発生しなくなります。

```VB
Application.EnableEvents = False
```

Calculation同様に処理終了後にTrueに戻る事は有りませんので注意して下さい

```VB
Application.EnableEvents = True
```

### Cursor

カーソルの表示をwaitにすると高速化されます。
(カーソルの変更を判定したり氏なくなって速くなる？)

```VB
Application.Cursor = xlWait
```

これも自動では戻りませんので最後に戻しましょう

```VB
Application.Cursor = xlDefault
```
### 一括処理
上記は頻繁に使うので纏めてプロシージャにしておくと便利です。

```VB:高速化
Sub EnableAcceleration()
	With Application
		.ScreenUpdating = False
		.Calculation = xlCalclationManual
		.EnableEvents = False
		.Cursor = xlWait
	End With
End Sub
```
```VB:高速化解除
Sub DisableAcceleration()
	With Application
		.Calculation = xlCalclationAutomatic
		.EnableEvents = True
		.Cursor = xlDefault
	End With
End Sub
```
## セルへのアクセスを減らす
セルへのアクセスが増えると処理が遅くなるのでセルへのアクセスを極力減らして高速化します。
### 配列に入れる
一括で配列化する事によりセルへのアクセスが減り処理を高速化出来ます。
Range型をVariant型に代入すると自動では二次元配列として扱われます。

```VB
Dim rng As Variant
rng = Worksheets("Sheet1").UsedRange
```
配列をセルに一括書き込みをする事もできます。
セルへの書き込みは読み込みより重い処理なので特に一括書き込みは有効です。
※但しセル範囲が二次元配列と同じサイズで無くてはなりません。

```VB
Dim arr(1 to 2, 1 to 2) As Variant
arr(1, 1) = "foo"
arr(1, 2) = "bar"
arr(2, 1) = "hoge"
arr(2, 2) = "hage" 

'これはOK
Worksheets("Sheet1").Range("A1:B2").value = arr

'これはNG
Worksheets("Sheet1").Range("A1:B1").value = arr
```
### 変数に入れる
セルに何度もアクセスする場合、変数に代入すると高速化されます

```VB
Dim rng As Range
Dim i As Long
set rng = Worksheets("Sheet1").Range("A1")

For i = 1 To 100000
   rng.Value = i
Next
```
但し一回きりの場合は直接アクセスする方が速いです。

## 関連記事

- [EXCEL VBA 高速化クラス作成](https://qiita.com/loach/items/3372066d7037143a92b4?utm_source=Qiita&utm_medium=referral&utm_campaign=analytics)
- [VBAでよく使うプロシージャ(FileSystemObject)](https://qiita.com/loach/items/fcf3ffb4e445d1e89927?utm_source=Qiita&utm_medium=referral&utm_campaign=analytics)

## My Accounts
<a href="https://github.com/mao2009"><img src="https://mao2009.github.io/qiita_template/GitHub-Mark-64px.png" width="50px"></a><a href="https://twitter.com/loach_mao"> <img src="https://mao2009.github.io/qiita_template/Twitter_Social_Icon_Circle_Color.png" width="50px"></a>
Windows10のSysprepでエラーになったときの対処方法

Windows ServerのReomote Desktop Serviceを構築するために、Windows10を一般化しようとしたら、***”Sysprep で Windows のインストールを検証できませんでした。”*** というエラーが出てしまいました。。。
![error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183585/ee582f6c-fa74-26d5-8078-4493b991cb47.png)
前回はそんなことなかったのに。。。

##エラーの原因は？
どうやら2015年11月のアップデート（1511）からネットに接続していると***ストアアプリが勝手にインストールされる***ようになったらしい。
そして、そのストアアプリがsysprepを実行する妨げになって、前述のエラーになってしまう。

##エラーの回避方法は？
検索すると何通りか対処方法がヒットするのですが
***勝手にインストールされたストアアプリを削除する***のが他の方法と比べると楽そうです。

##勝手にインストールされたストアアプリをどうやって削除する？
検索すると削除の方法も何通りかヒットします。
- インストールされているアプリの一覧を検索して削除していく
- PowerShellのスクリプトで削除していく
などがあるのですが、***ストアアプリはユーザーごとにインストールされてしまう***ので、ユーザーが複数存在した場合などはユーザーごとに実行しなければならなかったり、そのアプリはコアアプリなので削除できませんとかなったり、ポリシー変更する必要があったりと結構面倒くさいなあと思って、さらに検索キーワードを変えてみて検索。
アプリを検索するコマンド（Get-AppxPackage）と削除するコマンド（Remove-AppxPackag）には、***-AllUsersパラメタがあって、ユーザーごとに削除する必要がない***こと、***アプリのパッケージ名にはワイルドキャラクターが使用できる***ことがわかりました。
結局、sysprepを実行してみて、エラーログを見て、パッケージ名をコピペして、アプリを削除することにしました。

##実際にやった手順
1. sysprepを実行
2. エラーになったらエラーログを見る
ログは、***「C:\Windows\System32\Sysprep\Panther」*** フォルダーの***「setuperr.log」*** を見ます。
エラーダイアログには***「setupact.log」*** とありますが、エラーの内容だけを見たいので、***「setuperr.log」*** を見ます。
3. ***「setuperr.log」***に下記のような行があるので、そこからパッケージ名をコピーします。
下記の例では、***「Microsoft.MicrosoftStickyNotes_1.1.24.0_x64__8wekyb3d8bbwe」***がパッケージ名です。
***「_」***の前まで、この例では、***「Microsoft.MicrosoftStickyNotes」***をコピーします。

``` setuperr.log
SYSPRP Package Microsoft.MicrosoftStickyNotes_1.1.24.0_x64__8wekyb3d8bbwe was installed for a user,
but not provisioned for all users.
This package will not function properly in the sysprep image.
```
4.Windows PowerShellの***管理者モード***で、下記を実行する。
この例では、***「Microsoft.MicrosoftStickyNotes」***が先程コピーしたパッケージ名です。
この***パッケージ名をワイルドキャラクタ指定するためにアスタリスクを付加***しています。

``` 
Get-AppxPackage -AllUsers Microsoft.MicrosoftStickyNotes* | Remove-AppxPackage -AllUsers
```
5.再度、sysprepを実行する。エラーになったら、上記2～4を繰り返します。

##まとめ
上記の方法で、少ないときは3回くらい、多いときで7回くらいで、sysprepを実行できました。

##参考情報
[Windows10でプロビジョニングアプリを削除するとSysprepでエラーになる](https://social.technet.microsoft.com/Forums/ja-JP/c97d594d-b70d-410c-bdbb-b3e07240f617/windows1012391125031252512499124721251912491125311246412450125031?forum=win10itprogeneralJP)
【form_with】javascriptと一緒に使う際のヘルパーメソッド nameの使い方

こちらの記事が参考になりました。
https://note.com/sakusaku34/n/naeddc0656cc9

前提
・コントローラ名はBlog。
・Blogモデルはtitleとbodyというカラムを持つ。



```_form.html.erb

<%= form.label :title %>
<%= form.text_field :title %>

<%= form.label :hoge %>
<%= form.text_area :body, id: "summernote", name: "blog[body]" %>
```

上記に入力し、これで生成されるParameterが、こちらになります。

```
 "blog"=>{"title"=>"タイトル", "body"=>"ボディ"}, "files"=>"", "commit"=>"Create Blog"}
```


見るべきポイントは_form.html.erbでヘルパーであるnameという属性を使うことによって、nameで定義されている文字列がHTTPリクエストで送信するパラメーターのkeyとなります。そしてformに記入した文字列がvalueとして格納されてコントローラに送信されます。


私の場合はsummernoteというjQueryで動くエディタを使用する際にidを変更していたので、jQueryを使う場合はname属性を使ってカラムのモデル名を指定する必要がありました。
もしsummernoteを使わないのであれば

```
<%= form.text_area :body %>
```
これでrailsが勝手にname="blog[body]"でHTMLを生成し、blogモデルのbodyカラムだと認識してくれるので動きます。



自分用にパラメータの話もわかりやすかったのでこちらにURLを貼ります。
https://note.com/sakusaku34/n/nc143e418b700