OmniAICreator/Qiita-1.07M huggingface dataset:
swagger yaml → html変換！ 但し、1ファイルにまとめたい

# 目標
検索結果から回答までの最速を目指します。

# 対象
HTML と CSS が分離されてしまうのが嫌という方向け

# 概要
INPUT : swagger.yml
OUTPUT : swagger.html

# 手順
```shell
npm install -g bootprint
npm install -g bootprint-openapi
mkdir target
bootprint openapi swagger.yml target

npm -g install html-inline
html-inline target/index.html > target/swagger.html
```

以上！

# 参考

inspire : https://qiita.com/mokkos/items/3dc977b8b231adbbedf7
see also : https://github.com/bootprint/bootprint-openapi
Intellij等のエディタでWSLのディレクトリを開きたい

## 概要
WSL(Windows Subsystem for Linux)上のプロジェクトをIntellij等のWindows上にあるエディタで開きたいときにどうすればいいか。

## 環境
Windows10

## 解決方法
WSLを開いてエディタを使いたいプロジェクトのディレクトリに移動し

```
explorer.exe .
```

を実行する。

そうするとWindowsでのパスが表示されるので、そのパスでエディタを開けばよい。

Intellijの場合[File]→[Open]を選択してこのコマンドで表示されたパスを入力する。

## 補足 - IntellijのターミナルをWSLに設定する

IntellJを開いて
[File]→[Setting]→[Tools]→[Terminal]を選択

Application SettingのShell pathの欄で

```
C:\Windows\System32\wsl.exe
```
を入力または選択してOKすればよい。
Chocolateyを使ったWindowsのJava環境最新化

[Chocolatey](https://chocolatey.org/)でWindows10 64bitのJava開発環境を最新化します。
[Chocolatey](https://chocolatey.org/)は、Ubuntu/Debian系のapt-getのWindows版といった感じのソフトです。
年に1度ほどする作業で、当然次にするときに忘れているので、メモしておきます。
[記事「Chocolateyを使った環境構築の時のメモ」](https://qiita.com/konta220/items/95b40b4647a737cb51aa)を参考にしています。

とあるチュートリアルに従ってChocolateyをインストールしてごく稀に使っているだけなので、素晴らしいソフトかまるで判断できないです。ただ、[リリースノート](https://chocolatey.org/docs/release-notes-choco-cli)があまりされていないのが気になります。

# 手順
まずは、**Powershellを管理者権限で起動**します。コマンドプロンプトだと警告でるのでやめました。

## インストール済パッケージ確認
`choco list -lo`でインストール済みパッケージを一覧確認です。

```powershell:Powershell管理者権限
> choco list -lo
adoptopenjdk8 8.242.8
chocolatey 0.10.15
maven 3.6.3
3 packages installed.
```

## 一括アップデート
`choco upgrade all -y`でインストール済みパッケージを一括でアップデートします。

```powershell:Powershell管理者権限
choco upgrade all -y
```

## 個別アップデート(おまけ)
個別にパッケージをアップデートする場合は`choco upgrade [packageName]`です。

```powershell:Powershell管理者権限
choco upgrade [packageName]
```
【チーム開発】マイグレーションの更新作業

## 概要
チーム開発において、DBの修正が発生することもあり！！
安易に更新してしまうとサーバーがおかしくなってしまうのでは？？？
チームに迷惑かけちゃう:confounded:
と、私も更新することが怖かったのですが、以下の手順を踏んだら問題なくできました:relaxed:

## 実施方法

```
$rake db:drop
 #DBの情報を全て削除！！登録したユーザー情報なども削除されます！
$rake db:create
 #DBの更新
$rake db:migrate
 #マイグレート
$rake db:migrate:status
 #きちんとマイグレートできているかを確認
```

ちなみに、、、
カテゴリーなどをテキストエディタに作成していたら、下記のコードもマイグレートした後に行なってください！！

```
$rake db:seed
```

これでDBの更新OK:laughing:
この手法は、登録したユーザー情報なども合わせて削除されるので、また登録する必要があります！

## 参考文献
https://qiita.com/parsetree/items/e9b08c6b11f762b949de
Visualforce template の理解

<apex:composition>というのは、Visualforceのテンプレートの一種。
それについて、今日悟った内容をメモ。

<h1>テンプレート</h1>
```
<!--template.page-->
<apex:page controller="compositionExample">
    <br /><br /><br /><br />
    <apex:form >
        <apex:outputLabel value="❶　myFormTemplate: " for="nameField"/>
        <apex:inputText id="nameField" value="{!nameField}"/>
        <br />
        <apex:commandButton action="{!save}" value="Save" id="saveButton"/>
    </apex:form>
</apex:page>
```

まず、<form>1個、配下には<outputLabel>と<inputLabel>だけ。
これがテンプレートと認識（他のpageがこれを利用できる）で大丈夫です。

```
<!-- myFullForm.page -->
<apex:page controller="compositionExample">
    <apex:messages/>
　　myFullForm.page
    <apex:composition template="myFormComposition">
    </apex:composition>
</apex:page>
```

<apex:composition template="myFormComposition">これ一行で、myFormComposition.pageの内容がこのページに表示できるようになる。
画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550974/69d7df30-4b8f-b30a-f09a-76887a5de62a.png)

<h1>ページ分離</h1>
```
<!--template.page-->
<apex:page controller="compositionExample">
    <br /><br /><br /><br />
    <apex:form >
        <apex:outputLabel value="❶　myName: " for="nameField"/>
        <apex:inputText id="nameField" value="{!nameField}"/>
        <br />
        <!-- 以下のInsertは選択できる -->
        <apex:insert name="age" />
        <br />
        <apex:insert name="meal" />
        <br />
        <apex:commandButton action="{!save}" value="Save" id="saveButton"/>
    </apex:form>
</apex:page>
```
<apex:insert>2個追加した。
<apex:insert>は「とりあえず枠だけ用意して、後は引っ張るpage側が気まぐれで1個、2個実現すれば」

```
<!--template.page-->
<apex:page controller="compositionExample">
    <apex:messages/>
    myFullForm.page
    <apex:composition template="myFormComposition">
        <apex:define name="meal">
            <apex:outputLabel value="❷　myMeal: " for="mealField"/>
            <apex:inputText id="mealField" value="{!mealField}"/>
        </apex:define>
    </apex:composition>
</apex:page>
```
画面：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550974/86cc757b-1e5d-c235-a33a-0ba6b206ded9.png)

ユーザの権限、ロールによって、表示する項目が違ったりするので、
テンプレートを使って、分離するのがよりベター。

参考：
Visualforce 開発者ガイド (<apex:composition> を使用したテンプレートの定義)
JavaScriptでCORS対策で叩けないAPIを強引に叩く

## 起こったこと
とあるAPI叩きたくてフロントとなるJavaScriptからFetchやXMLHttpRequestを使ってアクセスしようとすると、
そのAPIのサーバのCORSの設定でアクセスできなかった。
![スクリーンショット 2020-05-22 16.23.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179803/1f0d40cc-e561-1d99-b7dd-d9fcacb2bab6.png)

もちろん、普通にブラウザで開くと表示はされる。

本来これはサーバー側で許可を与えればよいが、それはAPIを作った側がやることになるので利用する側の自分は諦めるしかないのかと思っていた。

##解決方法
フロントとなるJavaScriptからFetchやXMLHttpRequestを使ってアクセスするとアクセス制限でエラーが出るが、PHPでcurl使ってアクセスしてみるとデータ取得できた。

てことは、

```
自分が持っているサーバーでPHPでcurl使ってそのCORS対策されているAPI叩く
↓
その結果を取得できたデータを、自分のサーバーのAPIとしてデータ取得できるようにする
(とあるAPIから得られたデータをそのまま返すAPIを作る)
↓
自分のサーバーでCORSの設定を変えて全てのサイトからアクセスできるようにする
```
つまり、外部のAPIを、自分のサーバーを介したAPIにしちゃうことで成功する。

APIを叩くPHPファイルに以下を追加したら全てのサイトからアクセスできるようになる。

```php:anime-suko.php
header('Access-Control-Allow-Origin: *');

```

## 感想
これはあくまでも個人利用にとどめておいたほうがよさそう
lf (RangerのGo版)

* Rangerに影響を受けた開発されたファイルマネージャ
* https://github.com/gokcehan/lf/

## help

```
lf -doc
```

## lfrc

* `~/.config/lf/lfrc`
* https://github.com/gokcehan/lf/blob/master/etc/lfrc.example

## コマンド実行

```shell_session
$
```

ここから `bash` など呼べる。

rangerのように`S`だけでshellを起動するには

```:~/.config/lf/lfrc
map S $bash
```

## アイコン表示

```:~/.config/lf/lfrc
set icons
```


## マーク

```sh
# 現在のディレクトリをaに記憶
ma

# aに記憶したディレクトリに移動
'a
```
Windows10のWSLでJupyterLab+Javaを使う

Windows10でJupyterLab+Javaを使いたかったので試してみた．
Jupyter Notebook上でJavaが動いたらなんか便利そうじゃない？

#インストール
## Jupyterインストール
$ sudo pip install jupyterlab widgetsnbextension
$ jupyter lab --generate-config
$ cd .jupyter/
$ emacs jupyter_notebook_config.py

```jupyter_notebook_config.py
# c.NotebookApp.use_redirect_file = True
c.NotebookApp.use_redirect_file = False
```

## Jupyter用JavaKernelのインストール
$ git clone https://github.com/SpencerPark/IJava.git
$ cd IJava/
$ ./gradlew installKernel

#実行
$ jupyter lab
または，Windows上で以下のようなショートカットを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394500/6bcf2d09-23dd-b825-1aef-0ad4b088afa7.png)

ショートカットを実行すると，ブラウザ上にJupyterLabが無事立ち上がる．
すごいすごい．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394500/d43dd821-9c54-71d7-b7f7-068b9b2631f0.png)


ブラウザ上にLauncherが立ち上がるので，Javaを選べばとりあえずは動く．
しかし，classpathの読み込み方がわからん．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394500/a4d97e84-d949-27e2-d7e6-a51ea9258c70.png)

ClassPathが設定できなきゃ何もできないなあ．
とりあえずClassPathの設定方法を調べよう．

ClassPathの設定の仕方はこちら．
https://qiita.com/toritorix/items/6f1675166223960a1e85
ECCUBE4 のコアコードに手を加えて twig にグローバル変数を登録する簡単な方法

## はじめに
タイトルの通りEC-CUBE4のコアコードをカスタマイズしてtwigで扱えるグローバル変数を追加します。
アップデートが単純に出来なくなるため、あまり褒められた方法ではないですが、他の方法が調べても出てこなかったためここに残しておきます。
このページを参考にする際は十分注意して下さい。
もっと良い方法があるならば教えていただけると嬉しいです。　

## 方法
`src/Eccube/EventListener/TwigInitializeListener.php`を編集します。
例えばセッションから取ってきた値をグローバル変数に追加したい場合は以下のように追記します。
元からあるコードについてはほぼ省略しています。

```php:TwigInitializeListener.php
private $session;
# 略
public function __construct(
# 略
    SessionInterface $session
) {
# 略
    $this->session = $session;
}

public function setFrontVariables(GetResponseEvent $event){
# 略
    $this->twig->addGlobal('Hoge', $this->session->get('hoge')); #twig にグローバル変数を追加
}
```

これだけでtwigで`{{Hoge}}`のようにすることが出来るようになります。

なお `TwigInitializeListener.php` の `__construct` を編集した場合は prod 環境だと
`bin/console cache:clear --nor-warmup`
を実行しないとエラーが出るようなので注意して下さい。
XAMPPのmysqlを起動できないエラー

いつものようにxamppを起動しようとしたところ、apcheは起動できるのにmysqlは起動できない。検索してmy.iniのportの部分を3306から3308にしたりもしたけど解決しない。
エラーログを見たところ、次のような記述がありました。

>2020-05-22 14:00:03 0 [ERROR] c:\xampp\mysql\bin\mysqld.exe: unknown variable 'default-character-set=cp932'

そういえば前回xamppを使った時、データベースに入れたデータを日本語で表示させたくて’default-character-set=utf8’をmy.iniの中の何か所に書いた。結果的にこれでデータベースの内容が日本語になることはなかったものの、元に戻し忘れていた。

#default-character-set=utf8の前に＃を付けることで解決

……と思いきや、いざ起動してmysql -u rootと打ち込むと、以下のようなエラーが。

>ERROR 2002 (HY000): Can't connect to MySQL server on 'localhost' (10061)

少し調べた結果、ポート番号などが関係している模様。
mysqlが起動できなかった時に書き換えたmy.iniの **port = 3308 を port = 3306 に戻す。**
すると無事解決しました。

今回の教訓：試しても効果の得られなかった解決法はきちんと元の状態に戻しておくこと。
PRML　演習問題 2.26（標準）　解答

　この記事では統計学・機械学習の教科書である、C. M. Bishop 著「パターン認識と機械学習」（略称：PRML）の演習問題を私が解いた結果を載せています。この本は私が所属する研究室の輪読会で現在扱われていて、勉強の一環として演習問題を解いています。

# 問題

非常に有用な線形代数の結果である Woodbury 行列反転公式 (Woodbury matrix inversion formula) は

```math
\mathbf{
  (A + B C D)^{-1}
    = A^{-1} - A^{-1} B (C^{-1} + D A^{-1} B)^{-1} D A^{-1}
}
```

である。この両辺に $\mathbf{(A + B C D)}$ を掛けて。この公式を証明せよ。



# 解答

***証明***

```math
\mathbf{
  (A + B C D)^{-1} (A + B C D) = I \\
}
```

```math
\begin{align}
  
   & \ \mathbf{
       \left[
         A^{-1} - A^{-1} B (C^{-1} + D A^{-1} B)^{-1} D A^{-1}
       \right]
       (A + B C D)
     } \\

 = & \ \mathbf{
       I + A^{-1} B C D -
       A^{-1} B (C^{-1} + D A^{-1} B)^{-1} D + 
       A^{-1} B (C^{-1} + D A^{-1} B)^{-1} D A^{-1} B C D
     } \\

 = & \ \mathbf{
       I + A^{-1} B C D -
       A^{-1} B
       \left[
         (C^{-1} + D A^{-1} B)^{-1} + 
         (C^{-1} + D A^{-1} B)^{-1} D A^{-1} B C
       \right]
       D
     } \\

 = & \ \mathbf{
       I + A^{-1} B C D -
       A^{-1} B
       \left[
         (C^{-1} + D A^{-1} B)^{-1} C^{-1} + 
         (C^{-1} + D A^{-1} B)^{-1} D A^{-1} B
       \right]
       C D
     } \\

 = & \ \mathbf{
       I + A^{-1} B C D -
       A^{-1} B
       (C^{-1} + D A^{-1} B)^{-1} (C^{-1} + D A^{-1} B)
       C D
     } \\

 = & \ \mathbf{
       I + A^{-1} B C D - A^{-1} B C D
     } \\

 = & \ \mathbf{ I }

\end{align}
```

以上より、示された。（証明終）
AtomでRの文字化けを防ぎたい

# AtomでRのスクリプトを開くと文字化けする
RguiでRを使っており、基本的にはGUI上で実行しながらスクリプトを書くのですが
「ちょっと直したいな、コメント書きたいな」というときに普段使っているAtomで開くといつも文字化けするし、
いちいち文字コードを手動で選ぶのも面倒なので解決方法はないか調べてみました。

R以外でも「auto-encodingの設定をしたのに上手く動かない！」という方にも有効な解決ではないかと思います。

## auto-encodingの設定
まずはこのサイトを参考にauto-encodingの設定をします。
https://rfs.jp/sb/atom-github/auto-encoding.html

|![atom-1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507580/b65d7b93-a2cc-5863-b13f-032bd6fdbcf3.png)|
|:--|

Rguiのスクリプトは「shift-jis」の文字コードで保存されているのですが
auto-encodingの設定をするだけでは、「iso88592」と判断されてしまい、まだ文字化けが治りません。

## 文字コードを不許可にする
[Settings]>[Packages]>[auto-encoding]を検索
さらにauto-encodingの[Settings]を開くとこのような画面になります。

上で紹介したサイトでも触れられていますが、
許可したくない文字コードがある場合は[Disallow some encoding types]に追加することでそれを弾くことができます。

しかし「iso88592」をこれに追加しても今度はutf-8で読まれてしまい、意味がありません。

## 文字コードを無理やり置き換え

結果的に、[Force some encoding types]にこれを書き加えることで解決しました。
`iso88592:shift-jis`

| ![atom-2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507580/a4a15f4e-17a4-e23c-62ce-f1635ff1edba.png)|
|:--|

Rではありませんが、CSSで同じような問題に直面されていた方のものがありましたのでこちらに載せておきます。
https://github.com/t-ishii/auto-encoding/issues/24


## 結論
今回はRguiで作成したスクリプトをatomで文字化けなく開く方法についてまとめました。
ちょっと無理やり置き換えているので他で支障がないとも言い切れませんが、基本的に開くスクリプトの種類も限られているので、また問題が発生したら対応すればいいかなと考えています。

RguiやShift-JIS以外でも、auto-encodingが上手くいっていない人はこれらの解決を試してみてはいかがでしょうか。

ちなみに筆者ははじめコマンドからauto-encodingの設定をしたため、auto-encodingの設定がどこにあるのか分からず右往左往しましたので、画像もつけておきました。
Kubernetes基礎(5)：Service-ClusterIP, NodePort, LoadBalancer

#Serviceの特徴

Serviceは基本的に自分のCluster IPを持っています。
ServiceをPodに接続しておけばService IPでPodへのアクセスが可能になります。

Podは性能障害またはKubernetes障害などに、いつでも再生成することができるように設計されているObjectです。Podが再生成されると、PodのIPアドレスも変わるため、PodのIPは外部からの接続には使えません。
ところがServiceはユーザーが削除しない限り、再生成されてIPアドレスが変わることがないため、Serviceにアクセスをすると常にServiceと連携されているPodにアクセスすることができます。
Serviceの種類はいくつかあり、種類に毎にPodにアクセスする方法が違います。

###1. ClusterIP
![kubernetes_service1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519254/00b04274-7491-4ea4-662c-464358a2be3f.jpeg)
Cluster内でアクセス可能なIPで外部からのアクセスはできません。
Serviceは1つ以上のPodへ接続できます。
複数のPodに接続している場合、ServiceはTrafficを分散してPodに配信をします。

<b>1-1) Pod</b>

```Yaml
apiVersion: v1
kind: Pod
metadata:
  name: pod-1
  labels:
     app: pod
spec:
  nodeSelector:
    kubernetes.io/hostname: k8s-node1
  containers:
  - name: container
    image: <image file name>
    ports:
    - containerPort: 8080
```
<b>1-2) Service</b>

```Yaml
apiVersion: v1
kind: Service
metadata:
  name: svc-1
spec:
  selector:
    app: pod
  ports:
  - port: 9000
  　type: ClusterIP　　←省略可能
    targetPort: 8080
```
###2. NodePort
![kubernetes_service2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519254/5842c629-9984-0dd6-4f4e-0c041dd12e08.jpeg)
ServiceをNodePort Typeで生成しても、基本的にClusterIPは割り当てられます。
NodePortはKubernetes Clusterの全てのNodeに同じPortを割り当てて、外部からどのNodeのPortに接続をしても
該当Serviceに接続され、またServiceに接続されているPodにtrafficが配信されるのが特徴です。
注意すべき点は、Podが属しているNodeのみPortが設定されるのではなく、全てのNodeに同じPortが設定されるのが大きな特徴です。

<b>2-1) Service</b>

```Yaml
apiVersion: v1
kind: Service
metadata:
  name: svc-2
spec:
  selector:
    app: pod
  ports:
  - port: 9000
    targetPort: 8080
    nodePort: 30000
  type: NodePort
  externalTrafficPolicy: Local
```
※nodePort：30000から32767まで設定が可能です。（Port値を設定をしないと上記の範囲で自動に設定される）
※externalTrafficPolicy:Local：特定のNode IPでアクセスしたtrafficは、ServiceがそのNodeに属しているPodにtrafficを配信します。（Node1のURIからアクセスした場合はNode1のPodにtrafficを配信し、Node2のPodには配信しない）

###3. Load Balancer 
![kubernetes_service3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519254/f5313fb6-67df-4b8c-4519-50ac5c7e30fb.jpeg)
Node Portの全ての機能を持っており、さらにLoad Balancerの機能が追加されてそれぞれのNodeにtrafficを分散させます。
注意すべき点は、Load balancerにアクセスするためのIPアドレスは、自動に生成されません。
別途、外部接続のIPアドレスを割り当てるPluginをインストールしないといけませんが
Cloud Platformを使用するときは、独自のPluginがインストールされていて、Load Balancer TypeのServiceを作成すると、自動に外部接続のIPアドレスを作ってくれるので、アクセスが可能となります。
#Referenece
* Service : https://kubernetes.io/docs/concepts/services-networking/service/
* Kubernetes NodePort vs LoadBalancer vs Ingress? : https://medium.com/google-cloud/kubernetes-nodeport-vs-loadbalancer-vs-ingress-when-should-i-use-what-922f010849e0
git checkoutでブランチ名全部打ってるのがバカバカしくなった話

#背景
業務中でgit-bashを使っているのですが、git-flow運用をしているせいで予測変換も上手く使えずイライラしてました。
おかげでfeatureをタイプする速度は職人技になりつつあります。
工数削減として対策をした結果をお話します。

#はじめに

```bash
$ git checkout -
```
↑のコマンドで直前のブランチへチェックアウト出来る事は知っていましたか?
私はこれを知った時感動しました。とても重宝しています。
ですが、いくつかのタスクを並行してると直前のブランチが何だったか思い出すのも大変ですよね。

#直前のブランチ何使ってたっけ?

```bash
$ git --no-pager reflog | awk '$3 == "checkout:" && /moving from/ {print $8}' | uniq | head | nl
```
このコマンドは直近checkoutをしたブランチの履歴を頭から10件表示してくれます。
直近のブランチが表示されるので、常に必要なやつだけが表示されて非常に便利ですよね。
私はこれを__brlog__というコマンドで呼び出せるようにしました。
これで前章の問題は解決されました。
最後のnlで行番号を表示した理由を次章でお話します。

#指定行のブランチ名をクリップボードにコピーしよう
指定した行番号のブランチをクリップボードにコピー出来れば、pullやcherry-pickにも使えて便利だと考えました。
そこで私はshellを書いて、__brcopy__というコマンドに登録しました。

```bash
#!/bin/bash

#validate
if [ $# != 1 ]; then
        echo 'You should input argmen'
        exit 1
fi

#main
ESC=$(printf '\033')
# ↓ head -n $1 | tail -n 1で特定行から一行だけ抽出してます。
OUT=`git --no-pager reflog | awk '$3 == "checkout:" && /moving from/ {print $8}' | uniq | head -n $1 | tail -n 1`
printf "${ESC}[32m%s${ESC}[m\n" "coping '$OUT' to clipboard"
powershell set-clipboard $OUT #これでクリップボードに任意の文字がコピーできます(Windows専用)
```
<br>
以下が実際に使用した場合の挙動です。

```
$ brlog
     1  release/patch_20200530
     2  feature/develop_test3-name
     3  feature/develop_test2-name
     4  feature/develop_test1-name
     5  develop

$ brcopy 4
coping 'feature/develop_test1-name' to clipboard
```
上記のコマンドでクリップボードへのコピーが完了してますので、checkoutするなりpullするなり好きに使ってください!


#さいごに
皆さんはこの問題ってどのように対応しているのでしょうか?
何か対応方法がありましたらコメントで教えていただけると嬉しいです:)
(参考資料があったのですが、履歴をたどっても見つからなかったため、見つかり次第貼ります)
initialAdminPasswordが見つからない

Windows10 64bit環境でJenkinsをインストールしたときにAdmin Passwordの入力を求められたが"initialAdminPassword"が見つからなかったときのメモ｡
![adminPasswrd.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364023/9a10a9ba-8e1f-5e06-911d-61898f54384c.png)

C:\WINDOWS\system32\config\systemprofile\AppData\Local\Jenkins.jenkins\secrets\initialAdminPassword
このファイルが見つからない｡
C:\WINDOWS\system32\config\systemprofile\AppData\Local\内に"Jenkins.jenkins"フォルダがそもそも作成されていない｡


探したらここにありました｡
![initialAdminPassword.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364023/d3a9459d-198d-8bda-5d31-7cce2e1426dc.png)
C:\Windows\SysWOW64\config\systemprofile\AppData\Local\Jenkins.jenkins\secrets
wpa_supplicant のエラーをチェック ( Raspbian BUSTER Desktop で WiFi設定できなかった )

Raspbian に ssh でログオンすると、

```

Wi-Fi is currently blocked by rfkill.
```

という表示が出てました。？？？と思いながら

```

sudo raspi-config
```

とし、WiFiの設定をしようとすると、


```

 Could not communicate with wpa_supplicant

```
                                                
と出てしまいます。

ifconfig にも wlan0 が表示されていませんでした。

/etc/wpa_supplicant/wpa_supplicant.conf に以下のように記述しましたが改善しません。

```

ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
ap_scan=1
update_config=1
country=JP
network={
ssid="myssid"
psk="mypassphase"
}
```

あれれ〜 と思って /etc/dhcpcd.conf の末尾に以下のように追加しましたが改善せず。


```

interface wlan0

```



https://saitetu.net/entry/2018/05/01/010428
ここを見て、

```

pi@raspberrypi:~ $ sudo killall wpa_supplicant
```


してから、

```

pi@raspberrypi:~ $ sudo wpa_supplicant -c/etc/wpa_supplicant/wpa_supplicant.conf -iwlan0
```

とすると

```

Successfully initialized wpa_supplicant
rfkill: WLAN soft blocked
rfkill: WLAN soft blocked
nl80211: Failed to open /proc/sys/net/ipv4/conf/p2p-dev-wlan0/drop_unicast_in_l2_multicast: No such file or directory
nl80211: Failed to set IPv4 unicast in multicast filter
```

と出てきます。

```

pi@raspberrypi:~ $ rfkill unblock wifi
```

としてブロックを解除すると

```

pi@raspberrypi:~ $ sudo wpa_supplicant -c/etc/wpa_supplicant/wpa_supplicant.conf -iwlan0
Successfully initialized wpa_supplicant
wlan0: Trying to associate with SSID 'myssid'
wlan0: Associated with 10:6f:3f:33:ed:1c
wlan0: CTRL-EVENT-CONNECTED - Connection to 10:6f:3f:33:ed:1c completed [id=0 id_str=]
wlan0: CTRL-EVENT-SUBNET-STATUS-UPDATE status=0

```

となって使えるようになりました。


# 原因

なぜ rfkill が有効に！？ と思って調べたら、そもそも

Raspbian Buster Lite (2020-02-13-raspbian-buster-lite)

のつもりで

Raspbian Buster with desktop and recommended software (2020-02-13-raspbian-buster)

 を使っていたからでした。

microSDに書き込んだ後、Lite のつもりでヘッドレス で ssh でログインして、CUIだけでやろうとしたら上記の状態になりました。


# GUI での設定

デスクトップログインするとfilesystem-expandが走った後このウィンドが出てきます。


![2020-05-22-052748_498x338_scrot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/87fc1e71-edc7-6a40-9e3d-4b7520d3489b.png)
![2020-05-22-052816_498x338_scrot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/4e484e28-377c-478a-f9fd-aa140f697d44.png)
![2020-05-22-132829_498x338_scrot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/8302779e-e2d4-ac91-b593-84fa93363281.png)

![2020-05-22-132848_498x338_scrot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/f704da98-6123-a9b4-efc1-75a793e226e0.png)

これらを設定すると、その後はWiFiも使え、また raspi-config もエラー無く動作するようになりました。
【初級】JavaScriptのfor文について

今回はJavaScriptのFor文について解説していきたいと思います。
似たような効果のある文にwhileなどがありますが、現在はfor文がよく使われているのでこちらを勉強していきましょう♪

## 📗 for文ってどこに使われる？

結論から言うとfor文は***繰り返し処理***の際に使われる書き方となります。
また、JavaScript（以降JSと記載します）には、3つのfor文があります。

1.for　　　←繰り返しの回数を指定する場合に使う。
2.for in　　←オブジェクトを繰り返す時に使う。現在はあまり使われないようです。（今回は触れません）。
3.for of 　←配列の中身を出力する時に使われる。これはES６から使用OK！

まずはfor ofに焦点を当てていきたいと思います。

## 📗 for of

基本形【配列を扱う場合】

```javascript
const numbers =[1,2,3];　//適当な配列

for(　引数 of 配列){
  処理(引数)
}
このようになります。
実際にnumbersの中身をコンソールに表示させて見ましょう。

for(number of numubers){
  console.log(numuber);
};
コンソール上の出力は1,2,3,とそれぞれ出力されているかと思います。
このように、引数の部分は、配列名の単数形で記入するのが良いです。
```
for(　of  )このofの部分の考え方は
***one of them***に似ています。
one of themは英訳すると***それらの中の一つ***と訳されます。
them【配列】を指定して、one【個々の値】を定義して,繰り返し順番に出力していくというイメージです。

***配列のデータを全部出したいときはこのような書き方をすれば良いと思います。***
オブジェクトを取り扱うときはもうひと手間かかるので、今後の記事で紹介していければと思います。

## 📗 for文

基本形

```javascript
for(初期値;繰り返す条件;増減++ --); //このような形になります。
どういうことか分かりづらいので簡単にコードを書いていきたいと思います。

for(let i = 0; i<=100; i++){ 
 console.log(i);
}
```
for文のカッコの中を解説すると、
for（i=0に定義　;　iが100より小さい場合  ; iに+1を足していく）
日本語化するとこのような意味のコードになります。
コンソール上には、0~100までの数値が順番に出力されていると思います。

***繰り返す回数を決めたい場合はfor文を使ってあげると良いかと思います。***


## 📗 まとめ
- for文は***繰り返し処理***の時に使う
- for ofはES6から使えるようになった
- for( 0f )は （one of them）と覚えると理解がしやすい。
- 配列の中身をすべて出力したいなら for of, 繰り返す回数を決める場合はfor文を使うと良い。
- for文は　for(初期値；条件;増減）

##📗次回予告
次回はswitch文について書いていこうと思います！！！

今後は、Node.jsとJavaScriptの二本立てで両方更新していきたいと思います！！
Nodeも各パート５分で理解できるように基礎的な所から頑張って書いていこうと思うのでよろしくお願いいたします。

***記事を見ていただきありがとうございます。
５分で理解できる内容を目標に日々執筆しております！
ご指摘等有りましたら、ドシドシ編集リクエストお待ちしておりますのでよろしくお願いいたします***
数理ファイナンスまでの道のり

大学院で行われてる金融ファイナンスの講義を履修するために必要な数学の知識

集合と位相
↓
測度論
↓
確率論
↓
数理ファイナンス


非数学科の人間には長過ぎる道のりだよ（；´д｀ ）
Writebox を縦書きエディタとして使う (Firefox のみ)

CSS を編集することで、 Writebox を縦書きエディタにしてみました:

<img width="1440" alt="vertical_writebox.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594390/0aaffb73-a99f-7ca9-e824-bbf2bb4e0f45.png">

Writebox は Dropbox と同期してテキスト編集ができる web アプリです。頻繁にファイル移動をしないなら、快適に使用できると思います。

# 背景

最近のブラウザは、 `writing-mode: vertical-rl` で **縦書き編集** ができます。そこで、 CSS を追加して、 Writebox を縦書きエディタにしてみました。

ただし、縦書き対応にはブラウザごとに差があり、 `textarea` を使っている Writebox に関しては、 Firefox 限定となります。

> Chrome でも `contenteditable` なら縦書き編集が可能です。

# 方法

どちらかの拡張を入れます:

* [Stylus](https://addons.mozilla.org/en-US/firefox/addon/styl-us/)
* [Stylish](https://addons.mozilla.org/en-US/firefox/addon/styl-us/)

[Writebox](https://write-box.appspot.com/) を開き、次のテーマ (書きました) を入れます:

* [Vertical Writebox](https://userstyles.org/styles/184079/vertical-writebox)

すると、冒頭のような画面になります。

> 段組みはできませんでした。

[Greasemonkey](https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/) などから `spellcheck="false"` を設定すれば、スペルチェックの赤線も消せると思います。

# 余談

## 他の縦書きエディタは

Mac 限定ですが、

* [CotEditor](https://coteditor.com/): 縦書き (横スクロール) ができます
* [Jedit Ω](http://www.artman21.com/jp/jeditOmega/): 縦書き段組み (横スクロール) ができます (!)

## 縦書き用デスクトップアプリを作るには

少し検討してみました。
フォントはヒラギノ明朝が良いかもしれません。

### Electron

`contenteditable` で一応縦書き表示ができます。

Chronium のバージョンが古いです。 nightly 版を使っても、カーソルが分裂したように見えることが頻繁にありますし、十字キーがリマップされません。しかし、内部的には正しく動作するので、 `contenteditable` を上手く制御出来れば、快適な縦書きエディタにできるかもしれません。

> なお、 CSS の縦書き段組みは、上下にスクロールします。

### SDL2

IME に対応しています ([TextInput](https://wiki.libsdl.org/Tutorials/TextInput)) 。入力中文字を取得できますが、ちょっと変換候補を取得できるのか分かりません。

Mac では、横方向に変換候補が表示されました。少なくとも Mac では、強引に縦書きエディタを作ることができると思います。
amazon linux2関連のメモ書き

amazon linux2関連のメモ書きです。

####amazon-linux-extrasでEPELをインストール

#####epelインストール前の状態

```
$ amazon-linux-extras list | grep epel
NOTE: The livepatch extra is in public preview, not meant for production use

 24  epel                     available    [ =7.11  =stable ]

$ ls -l /etc/yum.repos.d/
合計 8
-rw-r--r-- 1 root root  985 11月  1  2019 amzn2-core.repo
-rw-r--r-- 1 root root 1015  4月  7 01:52 amzn2-extras.repo

$ yum repolist
読み込んだプラグイン:extras_suggestions, langpacks, priorities, update-motd
リポジトリー ID                                                       リポジトリー名                                                             状態
!amzn2-core/2/x86_64                                                  Amazon Linux 2 core repository                                             19,705
amzn2extra-docker/2/x86_64                                            Amazon Extras repo for docker                                                  26
```

#####amazon-linux-extraコマンドでepelをインストールする

```
$ sudo amazon-linux-extras install epel -y
```

#####epelインストール後の状態

```
$ amazon-linux-extras list | grep epel
NOTE: The livepatch extra is in public preview, not meant for production use

 24  epel=latest              enabled      [ =7.11  =stable ]
 
 $  ls -l /etc/yum.repos.d/
合計 16
-rw-r--r-- 1 root root  985 11月  1  2019 amzn2-core.repo
-rw-r--r-- 1 root root 1907  5月 22 04:28 amzn2-extras.repo
-rw-r--r-- 1 root root 1050  8月 29  2018 epel-testing.repo
-rw-r--r-- 1 root root  951  8月 29  2018 epel.repo

$ yum repolist
読み込んだプラグイン:extras_suggestions, langpacks, priorities, update-motd
193 packages excluded due to repository priority protections
リポジトリー ID                                             リポジトリー名                                                                   状態
amzn2-core/2/x86_64                                         Amazon Linux 2 core repository                                                       19,705
amzn2extra-docker/2/x86_64                                  Amazon Extras repo for docker                                                            26
amzn2extra-epel/2/x86_64                                    Amazon Extras repo for epel                                                               1
epel/x86_64                                                 Extra Packages for Enterprise Linux 7 - x86_64                                   13,088+193
repolist: 32,820
```

#####参考サイト

[Amazon Linux 2のEPELレポジトリを有効にする](Amazon Linux 2のEPELレポジトリを有効にする)
[Amazon Linux 2のExtras Library(amazon-linux-extras)を使ってみた](https://dev.classmethod.jp/articles/how-to-work-with-amazon-linux2-amazon-linux-extras/)


#####ec2のバックアップ。AMI（イメージ）の作成と起動

ec2のバックアップと復元についてです。コンソール画面からバックアップしたいec2を選択し、アクション->イメージ->イメージの作成を押します。イメージの作成ダイアログが表示されるので、イメージ名を入力し、イメージの作成ボタンを押します。これで、AMIにイメージが作られているはずです。

次に復元ですが、作成したAMIを選択し、アクション->起動を押します。そうすると、インスタンスの作成画面に移りますので、あとはいつも通りです。

あと他にはEBSボリュームのスナップショットの作成からもできそう。 

#####参考サイト
[AWS EC2のバックアップとリストア](https://it-ouji.com/2019/08/09/aws-ec2%E3%81%AE%E3%83%90%E3%83%83%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97%E3%81%A8%E3%83%AA%E3%82%B9%E3%83%88%E3%82%A2/)
Ruby: open-uriでのopenは、URLをバイナリモードで開く

#はじめに
通常のファイルのopenと、open-uriを使ってURLをopenするときのオープンモードの違いを把握していなかったのでまとめます。

#通常のファイルでのopen
通常のopenは、ファイルをテキストモードで開きます。

```open.rb
p open('hello.html').read.encoding  #=> #<Encoding:UTF-8>
```
テキストモードで開くため、読み込んだ文字列の文字コードは「ASCII-8BIT」にはなりません。
ここで読み込むファイルの文字コードと、開くときのエンコーディングが異なっていると、readで文字列として表示したときに文字化けを起こします。

openするときのエンコーディングは、メソッドの第二引数に指定することができます。

```open.rb
p open('hello.html', 'r:Shift_JIS').read.encoding  #=> #<Encoding:Shift_JIS>
```

またバイナリモードでファイルを開きたいときには`'rb'`オプションをつけます。（read binaryですね）

```open.rb
p open('hello.html', 'rb').read.encoding  #=> #<Encoding:ASCII-8BIT>
```
バイナリモードで開いているため、読み込んだ文字列の文字コードは「ASCII-8BIT」となっています。

#open-uriのopen
open-uriでのopenは、デフォルトでURLをバイナリモードで開きます。

```openuri.rb
require 'open-uri'

p open('https://yahoo.jp').read.encoding  #=> #<Encoding:ASCII-8BIT>
```
読み込んだ文字列の文字コードが「ASCII-8BIT」となっていることが確認できます。
複数ファイルをフォーマットするなら #VsCode で ( multiple file formatter ) ( #YAML )

# 問題

localで実行できるYAMLの良いFormatterが見つからなかった

# 解決

VsCodeの拡張を利用した

https://marketplace.visualstudio.com/items?itemName=jbockle.jbockle-format-files

- VsCodeの拡張で複数ファイルを一斉にフォーマット出来る拡張があった
- めちゃくちゃタブを開き続けて1ファイルずつ  Format Document をしてくれる様子 ( Format Document の動作自体は VsCode の標準コマンドだったはず )

![image](https://user-images.githubusercontent.com/13635059/82519082-cc4aba00-9b5b-11ea-952d-8e28486e124b.png)

# 設定

拡張の設定から、対象ファイルやディレクトリをワイルドカード指定することもできそう

 自分の場合は変換したいディレクトリをVsCodeでWorkspaceとして開いて、一斉変換した。


![image](https://user-images.githubusercontent.com/13635059/82519315-55fa8780-9b5c-11ea-996d-26114138eb31.png)


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3168











<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Ubuntu Linux で Raspian xz ファイル・zip ファイルを microSD カードに書き込む 

RaspberryPi で RaspberryPi をバックアップ
「https://qiita.com/nanbuwks/items/294e54d9f843e9c35032」

の応用です。

# やること

- xz ファイル・zip ファイルを解凍しながら microSD カードに書き込みます
- dd を使います
- 進捗も表示します


# 環境

以下で試しました。

- Ubuntu 18.04
- Raspbian  2020-02-13-raspbian-buster.zip


2022/7/29 追記：
以下の組み合わせで xz 形式のファイルも OK なことを確認しました。

- Ubuntu 22.04
- Raspberry Pi OS Lite Release date: April 4th 2022 2022-04-04-raspios-bullseye-armhf-lite.img.xz


あらかじめ、Raspbian の zip ファイル または Raspbery Pi OS の xz ファイルはダウンロードしておきます。


# microSD カードを Ubuntu Linux に刺す

刺すとオートマウントされるので、アンマウントします。
ファイルマネージャでアンマウントすると、デバイスファイルも無くなってしまうので以下で。

```

$ sudo umount /dev/sdb1

```


既にRaspbian が書かれている microSDカードなどでは、パーティションが複数あるので全てアンマウントします。

```

$ sudo umount /dev/sdb2

```

# 書き込みの準備


書き込み先を確認します。

```

$ sudo fdisk -l
ディスク /dev/loop0: 2.4 MiB, 2531328 バイト, 4944 セクタ
単位: セクタ (1 * 512 = 512 バイト)
セクタサイズ (論理 / 物理): 512 バイト / 512 バイト
I/O サイズ (最小 / 推奨): 512 バイト / 512 バイト


ディスク /dev/loop1: 4.2 MiB, 4448256 バイト, 8688 セクタ
単位: セクタ (1 * 512 = 512 バイト)
セクタサイズ (論理 / 物理): 512 バイト / 512 バイト
I/O サイズ (最小 / 推奨): 512 バイト / 512 バイト

・・・


ディスク /dev/sdb: 7.4 GiB, 7948206080 バイト, 15523840 セクタ
単位: セクタ (1 * 512 = 512 バイト)
セクタサイズ (論理 / 物理): 512 バイト / 512 バイト
I/O サイズ (最小 / 推奨): 512 バイト / 512 バイト
ディスクラベルのタイプ: dos
ディスク識別子: 0xea7d04d6

デバイス   起動 開始位置 最後から  セクタ サイズ Id タイプ
/dev/sdb1           8192   532479  524288   256M  c W95 FAT32 (LBA)
/dev/sdb2         532480  7397375 6864896   3.3G 83 Linux

```

/dev/sdbというのがわかりました。

書き込みツールは dd を使いますが危険なので、一旦環境変数にコピー元、コピー先を記述することでワンクション置きます。

ZIPファイルの場合は、以下のようにします。

```
$ export SOURCE=2020-02-13-raspbian-buster.zip
$ export DIST=/dev/sdb
```

xz ファイルの場合は同様にして、以下のようにします。
```
$ export SOURCE=2022-04-04-raspios-bullseye-armhf-lite.img.xz 
$ export DIST=/dev/sdb

```


# 書き込み

ZIPファイルの場合は、以下のようにします。

```
$ sudo unzip -p  $SOURCE | sudo dd bs=4k of=$DIST status=progress
```

xzファイルの場合は同様にして、以下のようにします。
```
$ xz -dc $SOURCE | sudo dd bs=4k of=$DIST status=progress
```
以下のように書き込みが進みます。
```
1987784704 bytes (2.0 GB, 1.9 GiB) copied, 14 s, 142 MB/s
```
以下のようになって終わります。メモリバッファがフラッシュしている間は止まっているように見えますが、焦らず待ちます。

```

924672+0 レコード入力
924672+0 レコード出力
3787456512 bytes (3.8 GB, 3.5 GiB) copied, 387.193 s, 9.8 MB/s


```



dd はバッファサイズごとに同期書き込みしているのかな？ しかし念の為にsyncを3回


```
$ sync
$ sync
$ sync

```

microSDカードを取り出して動作確認し、うまく動けばOKです。
WindowsのSpotlight画像を各種コンソールやエディタの背景に設定する

なんとなく日替わりの背景が欲しくなって、PowershellでSpotlight画像を拾ってくるスクリプトを作成した

```powershell:spotlight.ps1
$spotlightPath = "${env:LOCALAPPDATA}\Packages\Microsoft.Windows.ContentDeliveryManager_cw5n1h2txyewy\LocalState\Assets"
# _cw5n1h2txyewyはWindows 10のマイナーバージョンの違いで変化する場合あり
$outputPath = "${env:USERPROFILE}\Pictures\Spotlight" # 任意のパス
$filesize = "400kb" # ファイルサイズフィルター
$num = 5 # 出力画像数
$filenamePrefix = "" # 出力ファイル名のプレフィックス

cd $spotlightPath
$shuffled = dir * | ? {$_.Length -gt $filesize} | % { $_.Name } | sort -prop @{Exp={[Guid]::NewGuid()}}

for ($i=0; $i -lt $num; $i++){
  cp $shuffled[$i] "$outputPath\$filenamePrefix$i.jpg"
}

```

上記SpotlightPathにはSpotlightの背景画像以外の画像も含まれていたため、ファイルサイズでフィルタをかける必要がある
400kbは適当。要調整。
0.jpg, 1.jpg, ... のように出力されるので、それぞれのソフトで別の背景を設定できる。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72854/ff561928-dd7b-1690-e557-a72168754a9e.png)
[Unity] 中身を保持したまま変数名を置き換える

基本的には自分用メモなので結論から言うと
スクリプトの先頭で

```
using UnityEngine.Serialization;
```
を宣言し、

```
[FormerlySerializedAs("previousName")]
var newtName;
```
で変数をpreviousName->newtNameに置き換えます。

---

Unityで変数名を置き換える場合、単変数ならGrepして置き換えて再度Inspectorから適当に値を設定、でいいのですが、例えば

```
[SerializeField] Tile[] m_treasureBaseTileArr = null;
```

のような配列で、既に何十ものオブジェクトが入れてあるような場合だとメンドクセ、、となることがあります。
![2020-05-22_125020.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/1f196652-3cc4-dbcd-32f5-c2972a0eade8.png)

（この例だとパーツがきれいにid順に並んでいるのでまとめてドラッグ＆ドロップしてもOKなのですが・・・。）

例えば上記の例で、中身を保持したまま
m_treasureBaseTileArr をm_treasureTileArr
に変更したい場合は、スクリプトの先頭で

```
using UnityEngine.Serialization;
```
を宣言し、

```
[FormerlySerializedAs("m_treasureBaseTileArr")]
[SerializeField] Tile[] m_treasureTileArr = null;
```

のように
```[FormerlySerializedAs("m_treasureBaseTileArr")]```
を変数の直前についかしてから
m_treasureBaseTileArr をm_treasureTileArr
に全置換します **（FormerlySerializedAs()の中も置換しちゃわないよう注意）**

こうすることでシリアライズされた値を保持したまま変数を変更することができます。

![2020-05-22_130129.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/1f9d4f02-7656-092c-0bc6-7894f68fea52.png)
'rails' は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチ ファイルとして認識されていません。

rails -v　コマンドを実行するとタイトルのメッセージが表示されます。
railsはインストールされていないのでしょうか？

他のバージョンは確認できます。
ruby -v
ruby 2.7.1p83 (2020-03-31 revision a0c7c23c9c) [x64-mingw32]
gem -v
3.1.3
sqlite3 -version
3.31.1 
bundler -v
Bundler version 2.1.4

インストールは古いバージョンでも実行しましたが結果は同じです。
何度インストールしても同じ結果になります。（ほかのパソコンでも同じ結果でした）
どなたか解決策をご存知の方いましたら教えてください。
よろしくお願いします。
disabled属性のフィールドのデータ送信方法

超絶初級レベルなんでしょうが、躓いたので備忘録としてdisabled属性のフィールドのデータを送信する方法をメモメモ、、、、。

#やりたかったこと＆躓いたこと
複数のラジオボタンのうち、１つのラジオボタンだけ権限付けをしておいて、権限がない人は、そのラジオボタンを選択できない。
ラジオボタン以外にもテキストエリアがあって、そのテキストエリアはだれでも編集できる。
権限がある当該のラジオボタンにif文でdisabled属性を付けておいた。
**しかし、初めから権限付きラジオボタンが選択されていて、権限がない人がテキストエリアを編集しようとすると、ラジオボタンの情報が送信されないので、ぬるぽ、、、。**

#disabled
formのフィールドにdisabled属性を付けると、無効状態になって入力できない＆データの送信もできない様になる。

#jsで送信直前にdisabled属性を解除
送信ボタン押下でdisabledを解除する。但しこれは、押下後画面遷移するまで時間がかかる場合、disabledだった項目が選択(入力)できるような状態になってしまうので、これじゃダメな場合もある。(解除の方法をネットで調べると.disabled=falseとか出てくるが、私はそれではできなかった。)

```
<input type="radio"   name="radio" id="radio" value="送信内容" disabled="disabled" /> 
<input type="submit" value="送信" onclick="javascript:unDisabled();" />
<script type="text/javascript">
            function unDisabled()
            {
                $('.radio').removeAttr("disabled");

            }
        </script>
```


#送信直前にdisabledの値をhiddenにコピー
ただし、今回のように権限付けしてあってdisabledが動的に決まるものだと、同じ内容のデータを2度送信してしまう可能性がある。これの回避は結構めんどくさそう。(いい方法があるのか分らんが、、、)

```
<script type="text/javascript">
            function text_copy()
            {
                document.formMain.text2.value = document.formMain.text1.value ;
                return true;
            }
        </script>
<input type="hidden"   name="text2" id="hidden_text" value="" />
            <input type="radio"   name="radio" id="radio" value="送信内容" disabled="disabled" />
            <input type="submit" value="送信" onclick="text_copy();" />

```

#readonlyにしてcssで選択不可にする
https://freelance-jak.com/technology/javascript/553/

こういう方法もあるらしい。

#参考
https://lightgauge.net/language/html/2525/
railsを使ったajaxの非同期通信概要

# 非同期通信って何？
結論、**ネットにつなぐことなく更新できること**です。
具体例としてTwitterのいいね！機能があげられます。
試しにネット環境を遮断していいね！を押してみてください。
いいね！が普通に押せます。
これが非同期通信です。
この実装ができるようになるとページをいちいちリロードせずに
機能を反映することができ、
ユーザーの視点から見るとものすごく便利な機能です。

# 非同期通信をするために何を使うのか
結論、AjaxとJSONです。1個ずつ説明していきます。

## Ajax
非同期通信を英語で言うと"Asynchronous JavaScript + XML"です。
略してAjax！これだけです。
Ajaxと言われたり、そのコードを見かけたら非同期通信のことだと思ってください。

##JSON
結論、サーバからのレスポンスで返す時の形式になるものです。
これだとよくわかりませんので具体例を示しながら説明します。
まず、以下のようなコードがあったとします。

```ruby
{fruits: "orange", vegetable: "onion"}
```
これはrubyの時にも学んだキーとバリューの組み合わせです。
特に何にも設定していなければサーバーからキーとバリューのレスポンスを受け取る時
HTML形式で受け取っています。
<details><summary>**キーとバリューって何だっけ？**</summary>キーはカテゴリーでバリューはカテゴリーの中にある具体例のようなものでした。そしてこのキーとバリューをセットで扱うためにハッシュを用いるのでした。</details>
HTML形式で受け取るとネット通信が始まり、そこでデータが更新されていくようなイメージです。
ではこれをJSON形式で受け取るとどうなるのか？
**ネット通信を始めることなく一部だけページを書き換えるデータを受け取ることができます。**
つまり、これが非同期通信です。
**JSON形式でデータを受け取ることによって非同期通信が可能になる**と理解しておきましょう。

# 非同期通信の実装概要
以下、手順です
**①JavaScriptでリクエストを送り、レスポンスをJSON形式に変更する**
**②JSON形式でレスポンスしてもらうようにコントローラーのアクションにその旨を追記する。**
**③レスポンスするためのJSON形式のビューを追加する**
あと細かい作業もあるのですがこの概要だけ抑えておくと、
実装のタイミングでスムーズに進められると思います。
また具体的な手順は後日、記述しようと思います。
Power BI Servicesに接続する際にゲートウェイが必要となるデータソースについて

## 概要

Power BI Servicesに接続する際にゲートウェイが必要となるデータソースの記載が、見つけにくいとろこにあったので共有します。

下記、マイクロソフト社Power BIドキュメント内の表右側にあります。





![image-20200522125039651.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/6221783e-c092-fbcb-ae02-fdee9b459077.png)


参考リンク　[Power BI データ ソース](https://docs.microsoft.com/ja-jp/power-bi/connect-data/power-bi-data-sources)





手順

1.  [Power BI データ ソース](https://docs.microsoft.com/ja-jp/power-bi/connect-data/power-bi-data-sources)に接続し、表内を右側にスクロール。
![image-20200522124931490.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/c8abf84e-89d6-ab42-82dc-b4ec6181e748.png)


2.  "ゲートウェイ(必須)"列を確認
![image-20200522125042543.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/dc1cb834-a42b-0afb-b811-1c8e91aeb63c.png)
VScodeでMarkdown記法を使用してメモノートをとるための便利な設定

<!-- TOC -->

- [きっかけ](#きっかけ)
- [拡張機能](#拡張機能)
  - [Markdown All in One](#markdown-all-in-one)
  - [Markdown TOC](#markdown-toc)
  - [Paste Image](#paste-image)
    - [おすすめの使い方](#おすすめの使い方)
- [プレビューを分割して表示する](#プレビューを分割して表示する)
  - [プレビューを表示](#プレビューを表示)
  - [プレビューを画面分割で表示する](#プレビューを画面分割で表示する)
- [まとめ](#まとめ)

<!-- /TOC -->

# きっかけ
プログラミングのアウトプットにQiitaを活用しようとMarkdown記法の初期設定を試した

# 拡張機能
VScodeに便利機能を追加していきます

## Markdown All in One
ぶっちゃけこれだけでいいくらいいろんなことに対応できます
- ショートカットキーでマークダウン記法補助
- 目次の作成
- 各種ファイルの出力

## Markdown TOC
Markdown All in One でも目次を作成できますがコマンドを打つのが面倒だったので追加
右クリックメニューから目次を作成できます

## Paste Image
ショートカットキーでクリップボードにある画像データをMarkdown形式で挿入できます  
画像は同じ階層に保存されます
### おすすめの使い方
勉強したことをメモとして残すにはスクショを使うとわかりやすいです
- win + shift + [S]で選択範囲を指定してスクリーンショットをとる
- ctrl + alt + [V]でPaste Imageを利用して画像を挿入

# プレビューを分割して表示する
VScodeは標準でプレビュー対応しています

## プレビューを表示
|OS|Key|
|---|---|
|windows|ctrl + shift + [V]|

## プレビューを画面分割で表示する

|OS|Key|
|---|---|
|windows|ctrl + [K] → [V]|
|mac|command + [K] → [V]|

※VScode下部に「Ctrl+Kが渡されました」と出るのでその後に「V」を押す

# まとめ
かんたんに見た目を整える方法としてMarkdownは手軽です  
学習コストもないんじゃないかぐらいシンプルなので、振り返る目的のメモとしての使い方はアリです
IQ Botインストール手順（２）DBのインストールと設定　③SSMSのインストールとログインの作成

この記事は、以下の記事のサブカテゴリです。

[IQ Bot インストール手順](https://qiita.com/IQ_Bocchi/items/529dc72b6ab3d26dbfe0)　＞　[（２）DBのインストールと設定](https://qiita.com/items/7f02939799347b4db501/)

[前のステップ：②SQL Serverの設定](https://qiita.com/IQ_Bocchi/items/d3001507b313a7849eeb)

#③SSMSのインストールとログインの作成

この記事ではインストーラーの画面が英語になっていますが、日本語のインストーラーを使っている人はボタンや表示の言語が日本語になっているはずです。日本語でも英語でも問題ありません。

##1: SSMSのインストール

SSMSがすでにインストールされている場合は、次の「ログインの作成」まで飛んでOKです。
SSMSのインストール手順は以下のとおりです。

### 1) SSMSのインストーラーを右クリックし、「管理者として実行」をクリックします
### 2)「このアプリがデバイスに変更を加えることを許可しますか？」というメッセージが出てくるので、「はい」を選択します
### 3)「Install」をクリックします
![01_Install.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/0fea6988-95a0-69b9-a056-443a8a3846a0.jpeg)

### 4) 処理完了まで、しばらく待ちます。
### 5) 再起動を要求する画面が出たら、「再起動」をクリックします。
### 6) 下記の画面が出たら、「Close」をクリックします。
![02_Finish.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/9b4055be-fa82-e158-160a-2091e9cd69be.jpeg)

ここから先の手順は、CRおよびIQ BotとSQL Serverの接続をSQL Server認証モードで行う場合の手順です。
Windows認証モードで接続する場合は以下の手順は不要です。

（筆者の環境ではSQL Server認証モードを使っています）

##2: ログインの作成

SQL認証モード用のログインユーザーを作ります。
ステップバイステップの手順は以下のとおりです。

### 1) SSMSを起動します。
![01_shortcut.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/199992e4-cf00-108a-571f-1c02ca7611fa.jpeg)

### 2) まずはWindows認証のまま接続します。
![02_Login.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/5049aa17-5fa5-5baa-f38d-b5b3e385da29.jpeg)

### 3) 「セキュリティ」→「ログイン」から、新しいログインを作成します。
![03_NewLogin.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/775404a9-847a-a417-20cd-fc7610a95699.jpeg)

### 4) SQL認証用のログインを作成します。
![04_LoginInfo.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/750bddce-5d55-58c7-1b1a-2a8d53d9c80a.jpeg)

|#|項目|入力内容|
|:-----------------|:------------------|:------------------|
|①|ログイン名|任意のログイン名を入力します。|
|②|認証モード|SQLサーバー認証モードを選択し、任意のパスワードを入力します。|
|③|パスワードの設定|パスワードポリシーに関するチェックをすべて外します。|

### 5) 「サーバーロール」を選択し、図のとおりチェックを入れて「OK」
![05_roles.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/27aa5be8-63ca-e00e-e800-b18d893f9a9f.jpeg)

### 6) マシンを再起動します。

##3: SQL認証モードでの接続確認

上記の手順で作成したログインで、SQL Serverに正しく接続できることを確認します。

### 1) SSMSを開きます。
![01_shortcut.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/199992e4-cf00-108a-571f-1c02ca7611fa.jpeg)

### 2) SQL Server認証モードでログインします。

![01_確認.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/cd1fe2d8-e185-e84d-300a-9d401b92c5f7.jpeg)

|#|項目|入力内容|
|:-----------------|:------------------|:------------------|
|①|認証モード|SQLサーバー認証モードを選択|
|②|ログインとパスワード|上記の手順で設定したログインとパスワードを入力|

この状態で「接続（connect）」を実施し、正しく接続できることを確認します。

こんな感じの画面が起動すれば大丈夫です（UIの言語は英語でも大丈夫です）
![正常に接続.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/53104939-800c-f7ed-9bee-970b705c641c.jpeg)


#次のステップ

V11.3.4の場合は、[必要なテーブルの手作成](https://qiita.com/IQ_Bocchi/items/cebffe71025bd14f6809)を行ってから[CRのインストール](https://qiita.com/IQ_Bocchi/items/37d0632770bffb1e33f8)に進みます。
それ以外のバージョンの場合は、このまま[CRのインストール](https://qiita.com/IQ_Bocchi/items/37d0632770bffb1e33f8)に進みます。
Twitterのフォロワー数をロギングする

#Twitterのフォロワー数をロギングする
ひとつのアカウントのフォロワー数をロギングするのは以下の記事などで紹介されているが、複数のアカウントのTwitterフォロワーをロギングするスクリプトがなかったので書いてみた。
[Google Apps Script 講座初級編「GASでTwitterのフォローフォロワー数をスクレイピングする」](https://jijyoron.hatenablog.com/entry/2018/12/22/192325)
##スプレッドシートの構成
A1:Aは日付を入れるセル。
B2:D2はIDを入れるセル。
現在数値が入っている箇所にフォロワー数を取得して入力したい。

<img width="1440" alt="スクリーンショット 2020-05-22 12.41.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642082/4a174c91-4ca6-3e05-d6cf-da9b6d62c1e7.png">

##スクリプト

```
function myFunction() {
  //シートを取得
  var sheet = SpreadsheetApp.getActiveSheet();
  
  //RowとColumnの数を取得
  var lastRow = sheet.getLastRow();
  var lastColumn = sheet.getLastColumn();
  
  //日付を取得・入力
  var today = Utilities.formatDate(new Date(), 'Asia/Tokyo', 'yyyy/MM/dd HH:mm:ss');
  sheet.getRange(lastRow+1,1).setValue(today);
  
  //UrlFetchAppのオプションを設定する。
  var options = {
  muteHttpExceptions:true
  };
  
  //各支部のIDからフォロワー数を取得する処理
  for(var i =2; i <= lastColumn; i++){
    var twitterid = sheet.getRange(3,i).getValue();
    console.log(twitterid);
    //URL生成
    var url = 'https://twitter.com/' + twitterid;
    //responseにHTTPリクエストの結果を代入している。
    var response = UrlFetchApp.fetch(url,options);
        var html = response.getContentText('UTF-8');
          var title = html.match(/data-count=(\d.*?)\s/g);
          if(title[2] == undefined||null){
            continue;
            }else{
            var follows = title[1].match(/data-count=(\d.*?)\s/)[1];
            var followers = title[2].match(/data-count=(\d.*?)\s/)[1];
            //フォロワー数を入力
            sheet.getRange(lastRow+1, i).setValue(followers);
            }
          }
   }
```
###困ったこと
UrlFetchAppで参照するリンク先、つまり、対象のTwitterページがアカウント制限されていたり、アカウント削除されている場合に、エラーが出てしまい、途中で処理が止まってしまっていた。
これを回避するためにif文でundefinedの時は処理を飛ばすようにした。
一応これで動くようになったが、完璧とは言えない。

###今後
GASはjavascriptベースと言うことでjavascriptも追加。
コーディングが汚い、醜いのを改善する。

##追記
自分の支部の年間広報計画にGASで毎週自動でフォロワー数を入力するように設定した。
###コード
```
function myFunction() {
  //シートを取得
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = spreadsheet.getSheetByName('年間広報計画');
  
  //RowとColumnの数を取得
  var lastRow = sheet.getLastRow();
  var lastColumn = sheet.getLastColumn();
  
//行先頭列から左方向に取得する
var lastCol2 = sheet.getRange(5, sheet.getMaxColumns()).getNextDataCell(SpreadsheetApp.Direction.PREVIOUS).getColumn();
  
  //UrlFetchAppのオプションを設定する。
  var options = {
  muteHttpExceptions:true
  };
  
  //各支部のIDからフォロワー数を取得する処理
    var twitterid = "study42ku";
    //URL生成
    var url = 'https://twitter.com/' + twitterid
    //responseにHTTPリクエストの結果を代入している。
    var response = UrlFetchApp.fetch(url,options);
        var html = response.getContentText('UTF-8');
          var title = html.match(/data-count=(\d.*?)\s/g);
            var followers = title[2].match(/data-count=(\d.*?)\s/)[1];
            //フォロワー数を入力
            sheet.getRange(5, lastCol2+ 1).setValue(followers);
            }
```
###気をつけること
スクリプトでは5行目の最大行からCtrl+左キーをしたときと同じ動作をするようにしてある。
スプシ編集で気をつけないとエラーを吐くようになる。
CSS　ホバーでテキストに下線をつける（アニメーション）

#CSS　ホバーでテキストに下線をつける（アニメーション）

疑似要素を使ってテキストに下線を入れて
アニメーションで表示してみましょう。

#完成イメージ
[![Image from Gyazo](https://i.gyazo.com/280fa759ad291ff4b3fe27065466ebd9.gif)](https://gyazo.com/280fa759ad291ff4b3fe27065466ebd9)

#完成コード

```html
<ul class="header">
  <li class="link hover-Uline"><a href="">WORKS</a></li>
  <li class="link hover-Uline"><a href="">PRODUCT</a></li>
  <li class="link hover-Uline"><a href="">NEWS</a></li>
  <li class="link hover-Uline"><a href="">ABOUT</a></li>
  <li class="link hover-Uline"><a href="">OTHERS</a></li>
  <li class="link hover-Uline"><a href="">ACCESS</a></li>
</ul>
```

```css
* a,li{ /*リセット*/
  color: black;
  text-decoration: none;
  list-style: none;
}

.header { /*要素の横並び*/
  display: flex;
}

.link { /*要素の整列*/
 margin-left: 1rem;
 text-align: center;
}

.hover-Uline {
  position: relative;　/*疑似要素の親を固定*/
  cursor: pointer;　/*カーソルをポインターへ*/
  text-decoration: none;　 /*ホバーなしは非表示*/
}

.hover-Uline:before {
  content: ""; /*疑似要素の中身は空（記述は必須）*/
  position: absolute; /*子要素として疑似要素を固定*/
  left: 0; /*長さはテキストの両端まで*/
  right: 0; /*長さはテキストの両端まで*/
  bottom: -5px;  /*線の上下位置*/
  width: 100%; /*線の長さ*/
  height: 2px; /*線の太さ*/
  background-color: #9e9c9c; /*線の色*/
  transform: scale(0, 1); /*横方向に0状態から全体まで線を入れる*/
  transform-origin: center; /*中央を起点にアニメーション*/
  transition: transform .2s; /*アニメーションの時間*/
}

.hover-Uline:hover:before {
  transform: scale(1); /*ホバー時に等倍へ拡大*/
}

```

実行結果
[![Image from Gyazo](https://i.gyazo.com/dfb00bffa1be12e8915c7d5f92fdad17.gif)](https://gyazo.com/dfb00bffa1be12e8915c7d5f92fdad17)

プロパティを変えれば左端から線をアニメーションなども可能です。
transform-origin: left;
Power BI Desktop上のテーブルのデータをテキストファイル（CSV、TSV）にエクスポートする方法


## 概要

DAX Studioにて、30,000行をPower BI Desktop上のテーブルのデータをテキストファイル（CSV、TSV）にエクスポートする方法を共有します。



Power BI には、ビジュアルからデータをエクスポートすることも可能ですが、下記のようにレコード数に制約があります。

>   -   **Power BI Desktop** および **Power BI サービス**で**インポート モード レポート**から *.csv* ファイルにエクスポートできる最大行数は、30,000 です。

<br>
>   -   アプリケーションで**インポート モード レポート**から *.xlsx* ファイルにエクスポートできる最大行数は、150,000 です。

引用元：[視覚エフェクトの作成に使用されたデータをエクスポートする](https://docs.microsoft.com/ja-jp/power-bi/visuals/power-bi-visualization-export-data#limitations-and-considerations)



本手順で、上記制約を超えたレコード数のデータをエクスポートが可能となり、下記のような活用ができそうです。

-   Power BI Dataflowに接続して、データをエクスポート
-   Power BI Premiumであれば、データモデルに接続し、データをエクスポート



## 利用ツール　

-   Power BI Desktop
-   DAX Studio



## DAX Query結果をエクスポートする方法

### 手順

1.  Power BI Desktopに、ファイルを開く。必要に応じてでデータをインポート。
![image-20200522100017941.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/9565c1c9-0bd7-e392-0c23-bb619fc8f660.png)

2.  DAX Studioにて、レポートに接続する。
![image-20200522100307786.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/98d0078a-4463-c43f-0eb0-26cb4968d678.png)

3.  DAX Studioにて、"Output"を"File"に設定し、下記のクエリを実施。
![image-20200522100519636.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/e9515e2b-0f46-814a-7907-42491af48142.png)

コードサンプル：

```DAX
EVALUATE
    {テーブル名}
```

実例：

```DAX

EVALUATE
    SalesFact
```

　4.  エクスポートしたファイルを確認（本手順では、ヘッダー行を除き、1,260,752行。）。

![image-20200522100811540.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/db3c56a9-0144-e3bf-1fe5-a6e9e2e0aa2f.png)




### DAX Studioのエクスポート設定について

1.  "ファイル"タブを選択します
![image-20200522101800751.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/08c45e78-4ca0-806f-67d9-823ec066a41b.png)



2.  "Options"→"Standard"→"Custom Export Format"にて、エクスポートする形式を変更可能。
![image-20200522101814263.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/1da99173-3b2f-5896-8c9c-74689471ae16.png)




![image-20200522101907622.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/1643b546-8eaf-190d-65d5-e86e1576a24b.png)



## 複数のテーブルを一括でエクスポートする方法

1.  "Advanced"→"Export Data"を選択。
![image-20200522110340626.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/5da9fc32-98c4-5037-488a-b098f597ab75.png)



2.  "CSV Files"を選択。
![image-20200522110416709.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/bdbe55fa-7368-2c81-97c6-329f7ec6d759.png)




3.  データ保存先、ファイル形式を選択し、"Next >"を選択。
![image-20200522110450960.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/10fe4a91-545c-154e-8869-f7aae7a8b78e.png)




4.  エクスポート対象のテーブルを選択。
![image-20200522110549458.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/db683452-8d0b-1fb6-9e01-3ef712ac210d.png)

5.  ファイルがエクスポートされていることを確認

![image-20200522110734674.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/5bc88b61-57aa-473c-2e41-4684a2f98d8e.png)