OmniAICreator/Qiita-1.07M huggingface dataset:
Javascriptのonchangeを使用してセレクトボックスで選んだ値を箇条書きで表示させる

<h1>onchangeとは</h1>
onChangeとは、フォーム内のエレメント（要素）の内容が変更された時に起こるイベント処理の事です。
テキストボックスに書き込んだり、セレクトボックスでオプションを選択したりなどの行動によって発動するイベントを処理するします。
今回は、セレクトボックスで選んだ値を箇条書きで表示していきます。
<h1>htmlの部分</h1>

``` messages_test.php
<p>onchangeを使用して選んだ値を箇条書きで表示</p>
<select id="myselectbox" onchange="selectChange()">
	<option value="" selected>Please select...</option>
	<option value="Tokyo">Tokyo</option>
	<option value="Osaka">Osaka</option>
	<option value="Fukuoka">Fukuoka</option>
	<option value="New York">New York</option>
	<option value="New Jersey">New Jersey</option>
	<option value="Denver">Denver</option>
	<option value="Madrid">Madrid</option>
	<option value="Barcelona">Barcelona</option>
	<option value="Ibiza">Ibiza</option>　
</select>
<button id="reset">リセット</button>
<ul id="selected">
</ul>
```
・``` onchange="selectChange()" ```はjavascriptの関数名を指定します。
・```<button id="reset">リセット</button>```は箇条書きで表示された値をボタンを押しリセットさせます。
・```<ul id="selected">```に選んだ値を箇条書きで表示します。親要素でもあります。

<h1>javascriptの部分</h1>
```messages_test.php
<script>
 function selectChange(){
	//セレクトボックスで選んだ値を取得
	const value = document.getElementById("myselectbox").value;
	//値を表示させる為に、"li"を生成
	const li = document.createElement("li");
	//定数liにセレクトボックスで選んだ値を代入
	li.textContent = value;
	//親要素のid=selectedに子要素を追加（この流れで反映される。appendChiをしないとページには反映されない）
	document.getElementById("selected").appendChild(li);
	//ボタンを押したら、削除
	document.getElementById("reset").addEventListener("click",function(){
		li.remove();
	});
 }
</script>
```
・htmlの部分で記述した関数名「selectChange()」に今回の処理を記述します。
・```const value = document.getElementById("myselectbox").value;```はセレクトボックスで選んだ値を定数valueに代入しております。
・```const li = document.createElement("li");```は箇条書きで表示させる為に、liを生成します。
 createElement（要素名）で生成することができます。
・```li.textContent = value;```は生成したliにセレクトボックスを選んだ値を代入します。textContentメソッドはテキストの情報を取得・設定することが出来ます。
・定数liに値が入った状態でページに反映させる処理を行います。```document.getElementById("selected").appendChild(li);```
上記は「document.親要素.appendChild(要素)」とすることでページに反映させることが出来ます。
これによって生成した定数liがページに反映されます。
・箇条書きで書かれている途中でリセットしたい場合は値が入った定数liを削除すれば消える為、removeメソッドを使用し削除させます。
```document.getElementById("reset").addEventListener("click",function()```
上記のコードはボタンをクリックしたら発生するというイベント処理を行うコードでございます。

<h1>画像</h1>
・以下の画像の様に、セレクトボックスで選んだ値が箇条書きで表示されます。
![スクリーンショット 2021-04-20 0.23.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339415/06a1fd18-ab97-b0f3-d8bb-ff05720b4c98.png)

・リセットボタンを押すと、削除され箇条書きがなくなります。
![スクリーンショット 2021-04-20 0.31.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339415/f1e090a1-b160-9571-c5dd-d9ab06c81eb6.png)

以上がJavascriptのonchangeを使用して行う処理でした。
他にも沢山ある為、もっと学習していきます〜
git branch -a で何も出てこない

##git branch -a で何も出てこない
昨日まで使えていたgit branchがなくなっていた。

ビビった。なぜないんだ、と。


##僕の中では魔法のコマンド
```
git fetch origin
```
これで解決。

git fetchコマンドは他のリポジトリのデータを取得するものです。

```
//今回は事前にgit remote -vでリモートの情報を取得していた。
git remote -v
origin  git@github.com:~~~git (fetch)
origin  git@github.com:~~~git (push)
```

魔法のコマンドfetchを要約すると
「originのデータを取得して〜」
となるため、昨日まで使えていたgit branch -aが復活する。

すげー。

##参考記事
>https://www.rough-and-cheap.jp/linux/git-remote-branch-not-show/
position: fixedを使ってスクロールしても常に表示される文字を作成する

## はじめに
自身のコーヒーショップのHPを作成する際、参考にさせていただいたサイトのUIが格好良かったのでトレースしてみました。（[鯛のないたい焼き屋](https://oyogetaiyaki.com/")）

簡単にファーストビューへの文字列固定ができたので自らの備忘録としてこちらに記載いたします。

## 完成図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230656/9f7d8c25-e879-e44a-7240-9ee5190b1470.png)
ファーストビューの左下と右下に文字を固定表示させます。
ユーザーに特に伝えたいメッセージを記載すると、より伝えたいことを表現できるHPに仕上がるでしょう。

## コーディング
```html:index.html
<!-- ヘッダー -->
    <header id="header">
      <div class="logo">
        <h1>N coffee</h1>
      </div>

<!-- 文字位置を固定 -->
      <div class="fixed_bottom hashtext01">
        <p># コーヒーは果物</p>
      </div>
      <div class="fixed_left hashtext02">
        <p># ひとりひとりに合ったコーヒー</p>
      </div>
```

```css:style.css
/* 文字位置を固定 */
.fixed_bottom{
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
}

.fixed_left{
    position: fixed;
    bottom: 0;
    left: 0;
}


/* 文字のスタイルを成形 */
.hashtext01{
    font-size: 25px;
    font-weight: bold;
    text-align: end;
    margin: 20px 20px;
    color: #EB9015;
}

.hashtext02{
    font-size: 15px;
    font-weight: bold;
    text-align: start;
    margin: 20px 20px;
    writing-mode: vertical-rl; 
    color: #159FEB;
}

```

position: fixedで位置を固定して、topやbottomなどでポジションを指定しています。また、縦向きに文字を並ばせたかったのでwriting-mode: vertical-rlを使用して文字の向きを変えています。

これでスクロールしても常に画面左隅と右隅に文字が表示されるビューの完成です！
Nuxt.jsでdotenv はもう古い！runtimeConfigでAPI_KEYを完全に保護する

#概要
Nuxt.jsでAPI_KEYを保護する際今までは@nuxt.js/dotenvを使うことが多かったかと思います。
これでも大丈夫なのですが、最新の完全にAPI_KEYを保護する方法を実装していきます。

##runtimeConfig
Nuxt v2.13より、nuxt.config.jsにpublicRuntimeConfigとprivateRuntimeConfigというプロパティが追加されました。

手順としては
1. .envファイルでAPI_KEYを定義
2. nuxt.config.jsで設定を記述
3. 受け取る際は$configで受け取る
といった形になります。

実際に例を書いてみます。

```　.env
API_KEY='ここにAPIキーが入ります'
```

```nut.config.js
require('dotenv').config();
const { API_KEY } = process.env;
export default {
  privateRuntimeConfig: {
    apiKey: API_KEY
  },
  publicRuntimeConfig: {
    apiKey: process.env.NODE_ENV !== 'production' ? API_KEY : undefined
  },
}
```

```pages/index.vue
<script lang="ts">
@Component({
  async asyncData({ $config }) {
    const { data } = await axios.get(
      'https://~~~~~~~~~~',
      {
        headers: { 'X-API-KEY': $config.apiKey }
      }
    )
    return data
  },
})
</script>
```
このような形になります。

privateRuntimeConfig...こちらはプライベートでフロントエンドでは公開されてはいけない全ての.envファイルのキーを保護します

publicRuntime...フロントエンド、サーバー再度のどちらでも$configを使って受け取ることができます。

Nuxt.jsでは開発モードではサーバーではなくクライアントサイドで返すの、publicRuntimeConfigで記述しておく必要があります。本番環境ではクライアントサイドではキーを保持したくないのでproduction以外はundefindを返します。

受け取る際は$configに指定した形で

```
$config.任意
```
といった感じで受け取っています。

##なぜ他の方法ではダメなのか？
他の方法でダメなことはないですが、セキュリティとして危険な部分もあります。

nuxt.confing.jsのenvを利用してAPIキーを定義し、受け取る方法の記事などもよくみかけますが、こちらの状態ではasyncDataなどのソースコードにはapiキーは変数として定義しているので読み取れないですが、nuxt.config.jsで簡単に　apiKeyを確認することができてしまします。
結構こういった記事は多いですが気をつけましょう。

ではdotenvなどを利用し、環境変数を定義しprocess.envで受け取るといった方法もよく使われます。
こちらはソースの中にはAPI_KEYはなく、かなり安全そうに見えますが、サーバでのビルド時にWebpackにてprocess.env.API_KEYの値は定数に変換されてしまうらしいので、少し不安が残ります。

Nuxt.jsもアップデートしてRuntimeConfigが出てきたので是非こちらを使用していきましょう。
.envファイルをgithubにプッシュなどしたら元も子もないので初学者のみなさんなどは気をつけましょうw
WordPressはテンプレート階層が重要

##WordPressはテンプレート階層が重要
WordPressを勉強するにあたって一番気をつけなければいけないのがテンプレート階層。

本来ならばWordPress独自の関数などに目が行きがちだが、テンプレート階層がわからないとWordPressでテーマ作成は難しい。

というのも、今回テーマ作りを行っていく上で新規テーマをwp-tehmaディレクトリに配置せずに、全く関係のないところに配置したためエラーが消えないという状況に陥ってしまった。

今回のエラーはWordPressを知っている人からするとすぐに分かってしまう内容だったが、WordPressをよく知らない僕からすると全く意味が分からなかった。

CMSはルールを守れば上手に使うことができる〜〜〜〜〜〜〜〜
がんばろ。

>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1161569/2af734bd-3af9-32ad-e589-38267ea74253.png)
http://wpdocs.sourceforge.jp/wiki/images/wp-template-hierarchy.jpg
visual studioで勝手に追加されるプロパティを消したい

## 問題
visual studioでフォームアプリ作成時、自動生成されるプロパティを削除したい。

テキストボックスをダブルクリックするだけでプロパティを自動生成されるが、誤動作で追加すると邪魔。
または後から消したくなることもある。

　
たとえばアドレスというLabelをダブルクリックすると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551636/83660438-cfc3-7d4c-c40b-d2867b957fa1.png)
このように
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551636/8e447d38-4854-7097-3896-b7f7dde9de89.png)

普通にプロジェクトから削除するとエラーになる。

## 解決法
デザイナー画面のプロパティから対象のイベントハンドラを空欄にすればよい
　

デザイナー画面で対象のツールを選択、プロパティでイベントマーク（雷の）をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551636/e3fa994b-68b1-448b-5675-b67c652d3458.png)

対象のアクションの上で右クリック⇒リセットを選択
プロジェクトに戻り、プロパティを削除
Firestoreのセキュリティルール以外でPermissionDenied になった原因と解決策

# 前提
GCP内に作成されたProjectAとProjectBという2つのプロジェクトが登場します。
Cloud Firestoreへのアクセスは、ProjectAに「Firebase Admin SDK Service Agent」というサービスアカウントを作成し、ProjectBからもこのサービスアカウントを使用してFirestoreにアクセスします。
今回のサービスでは、Go言語で作成したAPIをApp Engineにデプロイした例を用いていますが、Cloud Functionsやその他のリソースを使用していても問題ないと思います。ざっくりとした構成図は下記のとおりです。
![sample_architect.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228026/7ba796f6-9b9b-4104-fb46-0fff9cb9b135.png)

# 発生した現象
ProjectA内に作成されたFirestore内のデータにProjectBからアクセスしようとすると、`rpc error: code = PermissionDenied desc = Missing or insufficient permissions.`というエラーが表示され、データを参照することができません。

# 考えられる原因と試したこと
## ①セキュリティルールをオープンアクセスに設定する。
Firestoreのセキュリティルールを全てのユーザーが読み取りと書き込みをできるアクセス権を付与しました。
Firestore関連でPermissionDeniedと検索するとこちらの解決方法が多くヒットしますが、この方法では解決しませんでした。
そもそもサーバーサイドからAdmin権限でアクセスしているため、セキュリティールールは無視されるので、セキュリティルールが原因ではないことはすぐにわかることでしたが、ここに数時間も時間をかけてしまいました。

```
// Allow read/write access to all users under any conditions
// Warning: **NEVER** use this rule set in production; it allows
// anyone to overwrite your entire database.
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}
```

## ②ProjectBでも同様のサービスアカウントを作成する
こちらの方法は実現不可能でした。
理由はProjectBにはFirestoreが存在しないので物理的に作成することができません。

# 原因
①、②から原因はセキュリティルールではなく、ProjectBのApp EngineからProjectAのFirestoreにアクセスする際に使用しているサービスアカウントの権限が不足していることが原因ではないかとの予測が立ちました。
結論を述べるとこちらの予測は当たっていって、ProjectBのサービスアカウントに必要な権限を与えたところ無事アクセスできるようになりました。
解決方法については下記で説明します。

# 解決方法
解決方法から説明すると、**ProjectAに作成した「Firebase Admin SDK Service Agent」というサービスアカウントに、ProjectBで使用しているサービスアカウントのアクセスを許可する**という方法です。
ProjectBではApp Engineを使用しているため、デフォルトで作成される`ProjectB@appspot.gserviceaccount.com`というサービスアカウントを使用して通信を行っています。
上記の作業を行うことでプロジェクトをまたいで、Firestore内のデータにアクセスできるようになります。

具体的な手順は、ProjectAの管理コンソールのメニューから`IAMと管理 > サービスアカウント`と進むと下記のような画面が開き、`アクセスと許可`というボタンをクリックすると、右側に「新しいメンバー」を追加するフォームが表示されます。
このフォームにProjectBのApp Engineで使用しているサービスアカウント(デフォルトでは`ProjectB@appspot.gserviceaccount.com`)を指定すると、ProjectAに設置されたFirestoreへのアクセス権が付与されるようになります。
![スクリーンショット 2021-05-09 23.33.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228026/c77dd37e-d5d2-f230-158b-19bc7dd9e4ec.png)

# まとめ
今回はかなり初歩的な設定ミスにより、エラーの解決までかなり時間を要してしまいました。
Firestoreはエラーメッセージから具体的な原因を特定しにくいのがネックではありますが、この記事が一人でも多くの方の参考になれると幸いです。
今後は初心に戻り、再度IAM周りについて勉強し直してみます。


# 参照
セキュリティルール
https://firebase.google.com/docs/firestore/security/insecure-rules#open_access

Firebase - Admin SDK
https://firebase.google.com/docs/admin/setup
STM32L010と内蔵ADCで抵抗をソフトウェアシリアルに出力


目的
主に抵抗の抵抗値を測る。

説明
表引きでだいたいの範囲を表示


```c++

//抵抗

#include "mbed.h"

//10k6Ωの上側　下側フラグ　1は上側 0は下側
#define DO_UP  0


//アナログ入力の設定
AnalogIn adc_vbat(A3); //PA_4
//AnalogIn adc_vbat(A0); //767

//Serial pc(USBTX, USBRX); // tx, rx
//Serial pc(SERIAL_TX, SERIAL_RX); //767
//Serial pc(PA_2, PA_3); //010
//Serial pc(PA_9, PA_10); //010

#define UART_DELAY 96 //  1/9600

//仮想シリアルの出力ポート
//DigitalOut TX(PA_9);
DigitalOut TX(PA_2);

//仮想シリアルへの一文字出力 9600bps
int pc_putc(char ch) {
        
    TX=1;
    TX=0;//START
    wait_us(UART_DELAY);

    for(int ii=0;ii<8;ii++){
        TX=(ch>>ii)&1;
        wait_us(UART_DELAY);
    }; //for

    TX=1;//Stop
    wait_us(UART_DELAY);
             
    return(0);
    
} //pc_putc

//文字列の表示
int pc_printf(char *str1) {

    int ii = 0; //ループカウンター
    while(str1[ii]!=0){
            
        //一文字出力
        pc_putc(str1[ii]);ii++;
                        
    } //while

    //戻り値
    return(0);
}

char *om_s[] = 
{
/*0*/   "OVER-.2M",
/*1*/   ".2M-.1M",
/*2*/   "100k-50k",
/*3*/   "50k-20k",
/*4*/   "20k-10k",
/*5*/   "10k-5k",
/*6*/   "5k-2k",
/*7*/   "2k-1k",
/*8*/   "1k-.5k",
/*9*/   ".5k-.2k",
/*10*/  ".2k-.1k",
/*11*/  ".1k-.0k",
/*12*/  ".0k-.0k"
};

short om_n[] = 
{   
/*0*/   0,  /*OD-200k*/
/*1*/   198,    /*200-100k*/
/*2*/   372,    /*100-50k*/
/*3*/   682,    /*50-20k*/
/*4*/   1365,   /*20-10k*/
/*5*/   2048,   /*10-5k*/
/*6*/   2730,   /*5-2k*/
/*7*/   3413,   /*2-1k*/
/*8*/   3723,   /*1-.5k*/
/*9*/   3897,   /*.5-.2k*/
/*10*/  4021,   /*.2-.1k*/
/*11*/  4058,   /*.1-.0k*/
/*12*/  4096    /*.0-.0k*/
};

int main() {

    //ポートをhiにする 初期化
    TX=1;

    int jj; //ループカウンター
    
    //無限ループ
    while(1) {
    
        //adcの読み込み 0から4096
        int s = (adc_vbat.read_u16()>>4);
        if(1 == DO_UP) { s=4095-s; } //0は、10kΩは、下側
//        pc.printf("\r\n -S=%d",s); //767

        for(jj=0;jj<12;jj++){
            if(s >= om_n[jj] && s < om_n[jj+1]){
                pc_printf(  om_s[jj]  );
                break;
            } //if
        }//for
                
        //リターン
        pc_printf(  "\r\n"  );

        //1秒の待ち
        wait_ms(1000);
        
    } //while

} //main

//容量削減
void error(const char* format, ...){}



```
AWS-DOPを取得したぞい

[AWS 認定 DevOps Engineer - Professional](https://aws.amazon.com/jp/certification/certified-devops-engineer-professional/)を受けてきました。

# 目的

2〜3月にAWS研修をいろいろ受講させてもらった件の総仕上げ的な感じでした。
CLF、SAA、DVA、SOA、SOCと併せてAWS6冠を達成できたので、当初の目標はクリアです。

# 勉強方法

- [DevOps Engineering on AWS (Japanese)](https://www.aws.training/SessionSearch?pageNumber=1&courseId=10018&languageId=2&deliveryMethod=3)
 - 仮想クラスルームのものを受講。自宅の使い慣れたPCが使えるので、オンライン講座すごく便利だなと。
 - 後述するExam Readinessで紹介される試験で扱われる内容を一通り学習できるが、資格取得を目指すとなるととっかかりができた程度なので各サービスに関しては追加の勉強が必要。
 - AWSにおけるDevOpsの考え方をある程度理解したところで、Qwiklabを使ってCodeシリーズとかCloudFormationとかを実際のシチュエーションに合わせた内容で体験できるので、直近受講した中での個人的な満足度は1,2を争う感じ（Securityも楽しかった）。
- [Exam Readiness: AWS Certified DevOps Engineer – Professional (Japanese)](https://www.aws.training/Details/eLearning?id=40664)
 - AWSの試験は受験すると決めたらまずは対応するExam Readinessを見るべし（勉強すべき項目を理解して取り組むのが一番近道だと思う）。
 - DevOpsは動画コンテンツは英語だが日本語字幕があるので安心（個人的には講師の人の英語は聞きやすかった）。
 - 問題例は実際の試験と同じ感じで解説もあるので、模擬試験受けるくらいならこちらの受講をオススメ。
- [Black Belt](https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-service-cut/)
 - Codeシリーズ、CloudFormation(DeepDiveも)はDOPで初めてじっくり読んだ。
 - 試験準備に載っているサービスも一通りチェック
 - この記事書きながらOpsWorksやStep Functionsを全然勉強してなかったことに気づく（試験の設問ではそこそこ見かけたはずなのに）

# 試験の感想

一通り回答終わって110分、見直しで10分くらいでした。
設問がAssociateに比べて多いのもありますが、ほとんどが問題文と選択肢を全て読んで要件との適合をチェックする必要がある（選択肢を読んで即答できない）ので結構時間がかかります。
見直し時間が短いのは自分の場合、見直しマーク付けていたのが「そもそも問題中に出てくるオプションを知らない」「2択まで絞れたけど判断ができない」というあんまり見直す意味がないものだったりするのもあります。。

- AWS資格の集大成って感じの印象。
 - SAA/DVA/SOAの内容を理解している前提で「より要件にあった形でDevOpsを提供するには？」を問われている感じ。
 - オンライン研修の内容も1/3くらいは組織とのすり合わせの話だったので、技術的な知識だけを問われているわけではない。
 - 顧客や組織が求めている「要件」を把握して、より適切に実現するプランを提案できる能力が必要。
- トラブルシューティング系の問題はインフラエンジニアとアプリケーションエンジニア両方の観点を持っていると結構楽。
 - 「オンプレだったらこの辺を見るよなぁ」をそれに該当するAWS固有のサービスやモニタリング機能に置き換えるだけ。
 - 逆にオンプレでの実務経験もないとこの辺の問題にピンと来ないと思われるのでユーザーズガイドとか読んだほうが良いのかなと。

２０２１年下期は資格取得とかに時間を使えそうにないなと思ってちょっと無理して取りに行った感じはあるので、SAPは少し時間をかけて勉強してから取りに行きたいところです。
透明なMaterialを作成する(Fade Material)

Materialを作成する
![C41E6110-8A4F-4FEC-BDF3-64891DDDB71A.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/6276ed6a-0976-33b7-401a-a6b9a27426b0.jpeg)

RenderingModeをFadeにし、Albedoを透明にする
![AB4CD023-609F-4BB3-95E5-7B6EE38D55F6.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/d0bfa774-c5c3-0515-960f-4c2f2471dca6.jpeg)
【javascript】配列内で指定した範囲を、指定したINDEXに割り込ませる


`copyWithin()`の移動版？

#引数

||名前|説明|
|--|:--:|--|
|1|arr|扱う配列|
|2|p|移動先のINDEX|
|3|f|移動させる範囲の開始位置 INDEX|
|4|t|移動させる範囲の終了位置 INDEX|

開始位置と終了位置は逆になっても問題ない

#コード

```javascript
const moving = (arr, p, f, t) => {
	if (!Array.isArray(arr)
	 || p===undefined) return arr;
	
	const m = arr.length;
	
	f = f===undefined || f<-m ? 0 : f<0 ? m+f : m<f ? m : f;
	t = t===undefined || m<t ? m : t<-m ? 0 : t<0 ? m+t : t;
	
	if (f===t
	 || (f===0 && t===m)) return arr;
	
	if (f>t) [f,t] = [t,f];
	p = p<-m ? 0 : p<0 ? m+p : m<p ? m : p;
	
	if (f<=p && p<=t) return arr;
	
	if (p<f) {
		return arr.slice(0, p).concat(arr.slice(f, t+1), arr.slice(p, f), arr.slice(t+1, m))
	} else if (t<p) {
		return arr.slice(0, f).concat(arr.slice(t+1, p), arr.slice(f, t+1), arr.slice(p, m))
	}
};

const arr = [...Array(10).keys()];
console.log( moving(arr, -5, -1, -3) );	// [0, 1, 2, 3, 4, 7, 8, 9, 5, 6]
console.log( moving(arr, arr.length, 2, 5) );	// [0, 1, 6, 7, 8, 9, 2, 3, 4, 5]
```

#追記
```javascript:
const moving = (array, p, f, t) => {
	if (!Array.isArray(array) || p===undefined) return array;
	const arr = array.slice();
	const m = arr.length;
	
	p = p<0 ? (p<-m ? m : p+m) : (m<p ? m : p);
	f = f===undefined ? 0 : f<0 ? (f<-m ? m-1 : f+m) : (m<f ? m-1 : f);
	t = t===undefined ? m-1 : t<0 ? (t<-m ? m-1 : t+m) : (m<t ? m-1 : t);
	
	if (f>t) [f,t] = [t,f];
	t++;
	if ((f===0&&t===m) || (f<=p&&p<=t)) return arr;
	
	const range = p<f ? [[0,p],[f,t],[p,f],[t,m]] : [[0,f],[t,p],[f,t],[p,m]];
	const res = [];
	for (let [s,e] of range) while (s<e) res.push(arr[s++]);
	
	return res;
}
```
【初投稿】HTML, CSS, JavaScriptで掲示板システムを作ってみた

# はじめに
普段は競技プログラミングやアルゴリズムを勉強しているのですが、今回はWebプログラミングに挑戦してみました!今回はその成果として、作ったシステムとJavaScriptフロントエンドについて紹介させていただきます！
5月11日追記:書き込みすると500エラーが出ることがある不具合があったので修正しました

# 掲示板の概略
<a href="http://colorful-wall.com/board/boards/">【今回作った掲示板】</a>

まずトピック画面からトピック選択
![掲示板.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1467169/14ede643-2578-a7ba-d3b9-ef0f37d14040.png)


次にトークに参加または自分でトークを開始
![スクリーンショット 2021-05-11 12.17.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1467169/b17caa19-536c-efc5-1067-2f7717614a27.png)

メッセージを送信して会話します
![スクリーンショット 2021-05-09 23.25.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1467169/28d179a1-4e05-4e92-5667-3facdac830f9.png)



# フロントエンドの紹介
フロントエンドはJavaScriptを使っています。今回は当掲示板で使用されているアンカーシステムについて紹介します。基本的には正規表現で>>1などの列を置き換えてリンクにして、そこにマウスが乗るとポップが表示されます。再帰することでポップ上のアンカーでも作用するようになっています。現在、新しいポップが下に表示されてしまっているのでそのうち頑張って直そうと思います。
PS:5月11日現在ではアンカーはクリックして作動するようにアップデートしました
![スクリーンショット 2021-05-09 23.25.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1467169/b926da6d-d963-8351-81b1-8bc65f09a382.png)


```JavaScript:anc.js
(function ($) {
            $("#comment").html($("#comment").html().replace(/&gt;&gt;(\d)/g,"<a href=id$1 class='anc'>" + "&gt;&gt;$1" + "</a>"));
            console.log(document);
            func(0);
            function func(n) {
                var l = 0;

                $(".anc").on("mouseenter", function (e) {
                    if (l == 0) {//ポップは一つだけ
                        l += 1;
                        $(".container").prepend("<div class='pop" + n + "'>");

                        $(".pop" + n).css({//ポップの修飾
                            position: 'absolute',
                            border: '1px solid #ccc',
                            'background-color': 'white',
                            top: '0',
                            left: '0',
                            'z-index': 1,
                            width:'50%',
                        })
                        var anc = $(this).attr("href"),//アンカーのhref取得
                            res = "<table class='table'> <tr><th>番号</th><th class='mes'>メッセージ</th></tr><tr>" + $("#" + anc).html() + "</tr></table>",//id検索
                            x = e.pageX,
                            y = e.pageY;
                        $(".pop" + n)
                            .append(res)
                            .css({
                                transform: "translate3d(" + x + "px," + y + "px,0)"
                            })
                            .show();
                        $(".pop" + n).on("mouseleave", function () {
                            $(this).remove();
                        })
                        func(n + 1);
                    }
                });
            }
        })(jQuery);
```

参考リンク
Simplicity
Simplicity 1 「某スレッド掲示板風」にレスアンカー機能を付けたい
https://wp-simplicity.com/suport/topic/simplicity-1-「某スレッド掲示板風」にレスアンカー機能/
(2016年4月25日)


<a href="https://qiita.com/gakusei_programmer/items/de755894118f9bb03998">次の記事へ</a>
「消費支出」と「ネットショッピングの⽀出額」を、Tableauの複数テーブルのリレーションシップを使い可視化

##家計状況データを使用

もう間もなく総務省統計局から[「家計調査報告」](https://www.stat.go.jp/data/kakei/sokuhou/tsuki/index.html)の2021年3月分が公表されます。
2月分は4月6日に公表されました。
また、同時期に[「家計消費状況調査」](http://www.stat.go.jp/data/joukyou/12.html)の3月分も公開されると思います。
「家計調査報告」の中で公表される**「消費支出」**と「家計消費状況調査」に含まれる**「ネットショッピングの⽀出額」**を同じ画面上で可視化するための準備をしました。
準備にはそれぞれ、2月分（4月公表値）のデータを使いました。

**[「e-Stat」（政府統計の総合窓口）](https://www.e-stat.go.jp/)**からデータを取り出し、**Tableau Public**に取り込みます。
まず、「消費支出」です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/580b8646-5e25-2a33-7f8f-857f1da9472c.png)

##2種類のデータを取り込んでリレーションシップ

次に「ネットショッピングの⽀出額」を**「追加」**します。
先に取り込んだ「消費支出」が線で結ばれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/8af67597-a8af-bb4f-d8f7-960eb884fa78.png)

両方の**「時間軸」（列）**を関連付けます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/5644b163-0b4c-32c8-c72b-5b5dbce8b6cb.png)

これでどちらかの「時間軸」をx軸にし、「消費支出」と「ネットショッピングの⽀出額」の推移グラフを描画する準備ができました。
データの型が想定と違っていたので型の変更をしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/4d2071ea-88b9-cd69-07c1-6c0b7fc2694d.png)

##2本の折れ線を描画

**「列」に「時間軸」**、**「行」に「消費支出」**をドラッグすると折れ線グラフア描画されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/e7ecdea8-8191-e7bc-a43f-dd70fe6396e8.png)

次いで、**「値」（ネットショッピングの支出額）**をグラフY軸付近にドラッグします。
時間軸の範囲が異なるので、右下に**「・・・NULL」**と表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/2ad43ad1-3881-4473-2e1b-7c15930a3c7d.png)

クリックして**「データのフィルター」**を実行します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/280453a4-eb00-a8f9-44f3-3d0996b9b8e9.png)

共通する時間軸の範囲のみ表示されるようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/def942e0-0c0d-4ef8-7b13-f1f334e06eff.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/221e45dd-7382-3400-09ad-f42da5d34b4a.png)

##2つのY軸に変更

金額の値が異なるので、右側に別のY軸を追加しようと考えました。
今のグラフではできないようで、右側のパネルから**「二重線」（折れ線）**に切り替えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/68d68fc8-d737-8847-7c62-aa3f5ee4a1df.png)

Y軸が追加されました。

11
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/2302b694-f386-e04f-a8bb-34b0b1c59825.png)

見やすい感じがしたので、左側のY軸を「消費支出」に変更し、目盛りの数字の表示スタイルも変えました。
そのほか、**「データラベル」**を追加したり、**「傾向線」**を追加したりなどしました。
目盛りについては、推移が比較しやすいように、「消費支出」の10分の1が「ネットショッピングの支出」になるように調整しました。
「値」は「ネット支出」に名称変更しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/6fbfeeeb-979b-ee65-c404-f3e831622db9.png)

今週、2021年3月分の数字が公表されると思います。
公表されたら更新します。

**了**
LPICレベル1合格体験記

# まえがき
LPICレベル1に合格したので、自分がやった勉強やおすすめの本を紹介させていただきます。

# 目次
- 自己紹介
- 使用した教材
- 受験結果
- おわりに

# 自己紹介
情報系の学部を卒業し現在M1。
研究室PCがLinuxだが、よく使うLinuxコマンドはcd, lsコマンドぐらい。

# 使用した教材
使用した教材は、
①あずき本
[Linux教科書 LPICレベル1 Version5.0対応](Linux教科書 LPICレベル1 Version5.0対応 https://www.amazon.co.jp/dp/B07P5S98SK/ref=cm_sw_r_cp_api_glt_PBHFV0GWF16T8E13ADD5)
![image.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488191/fe6df967-d150-1928-9e89-a129b6229e58.jpeg)


②スピマス
[Linux教科書 LPIC レベル1 スピードマスター問題集 Version5.0対応](Linux教科書 LPIC レベル1 スピードマスター問題集 Version5.0対応 https://www.amazon.co.jp/dp/B07TVTKW2C/ref=cm_sw_r_cp_api_glt_BPSZQY67ZE3TCTJSDV82)
![image.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488191/a669c72f-4f5a-fa51-da00-5d401c1f0031.jpeg)


③[LPICレベル1　Version5.0対応　問題集](LPICレベル1　Version5.0対応　問題集 https://www.amazon.co.jp/dp/B08975KXH2/ref=cm_sw_r_cp_api_glt_2BXVB4WVN6Q1SF2MPZKS)
![image.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488191/d7ea2346-e6f8-26ab-f0d6-e461b562c7ba.jpeg)


です。


勉強のやり方としては、
1. スピマスの問題と③の一問一答を一通りやって、ある程度覚える
2. スピマスの模試とあずき本の模試を解いて、あずき本の章末問題(とても少ない)も一応確認
3. 試験日まで苦手な問題を中心に復習


という感じでやりました。

③の本には一問一答と模擬試験がありますが、スピマスとあずき本の模擬試験で十分そうだったので一問一答の箇所しかやっていません。


101試験の勉強の最初の方はping-tというよく紹介されている有名なサイトで問題を解いて勉強していましたが、いちいちブラウザを開くのが面倒なので使うのをやめました。
ping-tのレベルが6/40あたりになる程度しかやっていません。


③の本は紹介されているのを見たことがないですが、kindleで安かった(750円)ので購入してみたところあずき本にもスピマスにもない問題が沢山あり、とても参考になりました。
kindleで読みやすいように問題の次のページにすぐ解答が書かれている点も良く、オススメです。


本番ではスピマスで見たことのある問題が多数出題されたように思います。
③でしか見たことない問題もいくつかありました。


# 受験結果
![FF065E0C-35C5-4381-88AF-7736539785FD.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488191/c789b1db-8c8d-8d86-6cf4-a6004e706744.jpeg)
101試験は770/800
102試験は710/800
という結果でした。


101試験は1ヶ月
102試験は2週間
で合格しました。


多くの方が使っているping-tをほぼ使わなかった点が不安でしたが、余裕を持って合格することができました。


# おわりに
初投稿で読みづらい点が多いと思います。すいません🙇‍♂️
次はAWS-SAAを受けようと思っているので、受かったらまた合格体験記を書こうと思います。
読んでいただきありがとうございました。
まとめ：VSCodeでLaTeXを使う

## 概要
どの記事のどの部分を参考にすれば良いのかをまとめたもの（自分用）。

## LaTeX

- [TeXインストーラ 3](https://www.ms.u-tokyo.ac.jp/~abenori/soft/abtexinst.html) 
指示に従うのみ。

- [latexmkを使えるようにする](https://gist.github.com/ishidur/e69ded2544ee1ad723ae7ee4fa497192)
手順4のperlを入れる部分までで良い。

## LaTeX Workshop

- [VSCode で LaTeX を書く (2018)](https://qiita.com/popunbom/items/7d02fc75ad23b735d28c)
指示通り（日本語化は必要であれば）。このままだとbuildでエラーが発生するので以下で解決。

- [VSCode で LaTeX をビルドできるようにする](https://qiita.com/wdwd5454/items/10ff1aa27afd9f6ce7a9)
settings.jsonにptex2pdfを追記。

以上。
【Vue.js】Vue.jsを使ったアプリケーションのデータフロー

#概要
今回は表題の通り、Vue.jsを使ったアプリケーションにおける
データの流れについて書いていきます。

#Vue.jsにおけるデータフロー
Vue.jsを使用したアプリケーションを「データの流れ」という観点捉えると、
View,Action,Stateという３つの要素に分けることができます。
（この３要素はビュー、更新処理、状態と呼ばれたりする場合もあります）

・View…Stateの内容に応じてブラウザ表示
・Action…Stateの内容を更新
・State…ブラウザ表示に必要なデータの保持

では、実際のコードを元に３要素の流れを確認していきます。

```vuejs:script.js
new Vue({
    el: '#app',
    data() {
        return {
            count: 0
        };
    },
    methods: {
        increment() {
            this.count++;
        }
    }
});
```

```vuejs:index.html
<body>
    <div id= "app">
        <button @click="increment">+1</button>
        <p>{{ count }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./script/script.js"></script>
</body>
```
こちらはボタン押下すると+1されるカウンターアプリです。
（そのままコピペしてJSFIddleで簡単に動かすことができます！）

このアプリでは以下の①〜③の流れを確認できると思います。

①countプロパティの初期値がブラウザに表示される（State→View）
②ボタン押下により、
　countプロパティの内容が書き換えられる（Action→State）
③変更されたcountプロパティの内容が、
　ブラウザに即時反映される（State→View）

このあと再度ボタンを押下した場合も同様の流れです。

ViewはStateによって規定され、 StateはActionによって規定される、
つまり、全体の処理の中には「State→View→Action」という流れがあり、
この流れの繰り返しがアプリケーションの動きを実現しています。

この流れは「単方向のデータフロー」とも呼ばれ、
データフロー設計において意識すべきポイントの一つになります。

#参考資料
・書籍「Vue.js入門 基礎から実践アプリケーション開発まで」
・書籍「たった1日で基本が身に付く！ Vue.js 超入門」
セットアップ - フォント

# はじめに

[**セットアップ シリーズ**](https://qiita.com/yokarikeri/items/a4e41a36c610bb1c798b)、フォント編。

## フォント形式の種類

> cf. [和文フォント大図鑑[STUDY]](http://www.akibatec.net/wabunfont/study/study.html)

現在、主に使われるフォント形式は以下の 3 種類。
（CID フォントは [Adobe Creative Cloud 製品でもサポート終了](https://helpx.adobe.com/jp/x-productkb/policy-pricing/end-of-support-cid-font-jp.html)しているので割愛）

- **TrueType フォント**（`.ttf`、`.ttc`）
    - 古くからある形式のため、互換性が高い。
    - Windows で利用する場合は、この形式を推奨されることが多い。
- **OpenType フォント**（`.otf`）
    - 後発の形式のため、TrueType と比較して高機能。
    - 古いアプリケーションでは OpenType に対応していない。
    - macOS は早くから（2001 年以降）から OpenType に対応しているので、この形式を推奨されることが多い。
- **WOFF**（Web Open Font Format）（`.woff`, `.woff2`）
    - Web フォントのための形式で、OpenType または TrueType 形式のフォントを圧縮し、XML によるメタデータを追加したもの。
    - WOFF 1 が登場後、圧縮アルゴリズムを変更した WOFF 2 が登場。

## フォントのインストール方法

フォントファイル（`.ttf` や `.otf` など）を入手できたら、以下の手順でインストールできる。

- ログイン中のユーザーにインストールする場合:
    - フォントファイルをクリックしてプレビューを開き、`インストール` をクリック。（Windows / macOS 共通）
- すべてのユーザーにインストールする場合:
    - Windows: フォントファイルを右クリックして、`すべてのユーザーに対してインストール` をクリック。
    - macOS: フォントファイルを `/Library/Fonts/` へ移動する。

# 👑 フォント: Source Han Code JP

Adobe 社がオープンソースで開発した、日本語のテキスト表示も考慮されたコーディング向けのフォント「**Source Han Code JP（源ノ角ゴシック Code JP）**」(「Source Code Pro」+「Source Han Sans JP（源ノ角ゴシック JP）」)。

今回は主に VS Code のフォントに使う。

**インストール:**

- [Releases · adobe-fonts/source-han-code-jp](https://github.com/adobe-fonts/source-han-code-jp/releases) から、最新の「**Fonts version XXX (OTF, OTC)**」の `SourceHanCodeJP.ttc` をダウンロードする。
- `SourceHanCodeJP.ttc` をインストールする。

**注意:**

- Source Han Code JP は、一般的な「**全角 1 文字 = 半角 2 文字**」の文字幅ではなく、「**全角 2 文字 = 半角 3 文字**」と特殊。
    - 良い点: 半角の幅が広いので可視性が高い。
    - 悪い点: この特殊性ゆえ、ターミナル用フォントには向かない、マークダウンの表をフォーマットしても罫線が揃わない、など。

# 👑 フォント: HackGen

> cf. [【文字幅 半角 3:全角 5 も追加】Ricty を神フォントだと崇める僕が、フリーライセンスのプログラミングフォント「白源」を作った話 - Qiita](https://qiita.com/tawara_/items/374f3ca0a386fab8b305)
> cf. [プログラミング用フォントの選び方とおすすめフォント | Output 0.1](https://pouhon.net/font-programming/4990/#toc2)

「源ノ角ゴシック」の流れを組む、フリーライセンスのプログラミングフォント「**白源 (はくげん／HackGen)**」(「Hack」+「源柔ゴシック」)。

ターミナル用のフォントとして使うので、[Nerd Fonts](https://www.nerdfonts.com/) が合成された `HackGenNerd Console` をインストールする。

**インストール:**

- [Releases · yuru7/HackGen](https://github.com/yuru7/HackGen/releases) から、最新の `HackGenNerd_vX.X.X.zip` をダウンロード。
- ZIP 内の `HackGenNerdConsole-*.ttf` をインストール。
    - 今回はターミナル用途なので `HackGen35` 系はインストール不要。（英字フォント Hack 準拠の「半角 3:全角 5」の文字幅比率）

**補足:**

- 他に好みで「**Myrica**」(「Inconsolata」+「源真ゴシック」) や「**MyricaM M**」(「Inconsolata」+「Mgen+」) といった選択肢も。
    - cf. [Myrica/Myrica.md at master · tomokuni/Myrica](https://github.com/tomokuni/Myrica/blob/master/product/Myrica.md)
Golang のテストカバレッジを効率的に確認する

# Golang のテストカバレッジを効率的に確認する

前回の記事でテストカバレッジをシェルスクリプトにしてそれを実行することで確認していました。
https://qiita.com/k_yuda/items/86f40bdf3e040560ade4

今回これをDockerfileとMakefileにまとめてよりテストカバレッジを確認しやすいようにしたメモ。

# 流れ

+ マルチステージビルドのstage1においてテストカバレッジを確認するためのcover.outなどを生成する
+ stage2において、stage1のファイルをコピーする
+ Dockerコンテナーないにあるファイル、cover.outをhtmlにコンバートしたファイルをローカルにコピーする
+ Makefileで各種コマンドをまとめる


## マルチステージビルドを実現しているDockerfileを記述し直す。

```docker:Dockerfile
FROM golang:latest AS stage1-buildphase
WORKDIR /go/src
COPY . .
RUN go test main_test.go main.go -v
RUN go build -o tail main.go
RUN go test main_test.go main.go -coverprofile=cover.out
RUN go tool cover -html=cover.out -o convert.html

FROM alpine:latest
RUN apk --no-cache add ca-certificates
WORKDIR /root
COPY --from=stage1-buildphase /go/src/ .
CMD ["./start.sh"]
```

ここで生成されるconvert.htmlはグラフィカルにテストカバレッジを確認することができます。
![](https://storage.googleapis.com/zenn-user-upload/g411uv4kwai1n41037jniytlxuo6)

## Makefileで各種コマンドをまとめる

```bash:Makefile
NAME := gotail
NAME-C := gotailcheck
DATE := $(shell date +"%Y%m%d%I%M%S")

.PHONY: all
all: docker-build docker-run

.PHONY: test
test:
	go test main_test.go main.go -v

.PHONY: docker-build
docker-build:
	docker build -t $(NAME) .

.PHONY: docker-run
docker-run:
	docker run --rm $(NAME)

check: docker-build docker-run-covercheck open clean

docker-run-covercheck:
	docker run --rm --name $(NAME-C) -itd $(NAME) /bin/sh
	docker cp $(NAME-C):/root/convert.html $(shell pwd)
	docker stop $(NAME-C)
	cp convert.html $(shell pwd)/coverchecklog/$(DATE).html

.PHONY: open
open:
	open $(shell pwd)/coverchecklog/$(DATE).html

.PHONY: clean
clean:
	rm -f cover.out convert.html

```

このように記述すると`/coverchecklog`にテストカバレッジを確認できるhtmlファイルを保存し、自動でブラウザを立ち上げて確認できます。


```bash
docker-run-covercheck:
	docker run --rm --name $(NAME-C) -itd $(NAME) /bin/sh
	docker cp $(NAME-C):/root/convert.html $(shell pwd)
	docker stop $(NAME-C)
	cp convert.html $(shell pwd)/coverchecklog/$(DATE).html
```

`docker run --rm`でdockerイメージを処理が終わった後に自動で削除してくれます。

また、`--name`オプションを使用することで、IDではなくてnameで`docker cp`を実行することができます。

dockerの`cp`が終わったらイメージを停止します。

最後に現在の時間をファイル名として、`coverchecklog`にコンバートされたhtmlを記録します。

```bash
cp convert.html $(shell pwd)/coverchecklog/$(shell date +"%Y%m%d%I%M%S").html
```
`$(DATE)`の中身を表記している。

全ての設定が終わったら、次のコマンドでテストカバレッジを瞬時に確認でき、記録も残してくれます。

```bash
make check
```

これでテストカバレッジを意識した開発を手軽に行うことができそうです。

# 最後に

今回はdocker cpの使い方に詰まっておりました、dockerコマンドは結構覚えることが多いのでたまに混乱してしまうのですが、Makefileにまとめておくと安心です。
まだまだgolangは始めたばかりで分からないことばかりですが、golangにおけるMakefileの記述のベストプラクティスを追求していきたいと思います。
Windows10 homeへのDockerインストール方法メモ

# 作業時期
本記事は私が2021年4月時点でDockerをインストールした時のメモです。
振り返り用。
# 実行環境
OS：Windows10 Home 64bit
バージョン：20H2
CPU：Intel Core i7-7700HQ 2.80GHz
仮想化環境：WSL2 (Windows Subsystem for Linux 2)
Docker：Docker Desktop 3.3.1
# Windows10のbit版とバージョンを確認する
Windows10 homeでDockerを使用するにあたり、以下条件を満たす必要があります。

* Windows10が64bit版
* Windows10がバージョン1903/1909以上

確認方法は以下の順番になります。
1.スタートメニューから「設定」クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390453/30f06b95-7def-89aa-e001-bb776b9a0969.png)

2.「設定」画面で「システム」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390453/c46b2a46-9220-c396-74fe-af4bc466d7fe.png)

3.「詳細情報」をクリックし、「システムの種類」と「バージョン」を確認
![バージョン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390453/30d8a110-31a3-ebc3-0f23-eece24ac6c6b.png)
※バージョンが1903未満の場合はWindows Updateからバージョンアップが必要

# WSL2とLinuxカーネルを使用可能にする
1.スタートメニューから「Windowsシステムツール」→「コントロールパネル」→「プログラムと機能」→「Windowsの機能の有効化または無効化」とクリックしていく。
![Windows→コントロールパネル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390453/2781c8b0-5163-b04f-a8dd-4f5cd4b6ad02.png)
![コントロールパネル→プログラム.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390453/64af8829-a9c4-5f7f-0ef3-4a785b9a127f.png)
![プログラム→有効化.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390453/7d56324a-68a8-43e5-c902-b3981256fb20.png)

2.開かれた「Windowsの機能」で「Linux用 Windows サブシステム」と「仮想マシン プラットフォーム」にチェックを入れて「OK」して、変更が完了したら「今すぐ再起動」を実行する。
![Windowsの機能.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390453/4139c881-b48b-1949-cf47-cae447087e1c.png)
![Windowsの機能→変更完了.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390453/18c06905-3b5c-8aeb-d8b6-c892403b94a7.png)

# Linuxカーネルをアップデートする
下記のURLからLinuxカーネルをダウンロード後、起動してLinuxカーネルをアップデートする。
https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi

# Docker Desktop for Windowsインストーラをダウンロードして実行する
1.下記のURLを開き、「Get Started」→「Download for Windows」とクリックしてDocker Desktop for Windowsのインストーラをダウンロードする。
https://www.docker.com/
![Docker_home.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390453/b24f5547-b7f9-2384-6f33-7a511bc6f918.png)
![Docker_dl.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390453/e7aebfa5-2f56-ddcc-f303-d07412e9242d.png)

2.ダウンロードしたインストーラ「Docker Desktop Installer.exe」を実行する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390453/db47b6ab-5c97-58b7-a62b-f0e6ae54b20e.png)

3.環境の設定が表示されるので、すべてにチェックを付けて「OK」をクリックすると必要なファイル一式がダウンロードされ、インストールする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390453/4eede0f6-e471-dece-ffa6-43267544ab41.png)

4.インストールが完了後、「Close and log out」をクリックして再起動します。再起動後にデスクトップを確認すると「Docker Desktop」のアイコンが追加される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390453/72792c97-05ac-378c-7fad-c5b4d497cd58.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390453/91692c8f-2e21-facb-f8e3-eacde21a72f5.png)

# 参考資料
[仕組みと使い方がわかる Docker＆Kubernetesのきほんのきほん](https://www.amazon.co.jp/dp/B08T961HKP/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)
【Ruby】任意の3つの数値の合計を出力するメソッドを作成せよ。 ただし、同じ数が含まれている場合は 合計にカウントしない。

```ruby
def lone_sum(ary)
  # 配列から、重複しない要素のみ取り出す
  uniq_nums = []
  ary.each do |num|
    count = 0
    ary.each do |i|
      if num == i
        count += 1
      end
    end
    if count < 2
      uniq_nums << num
    end
  end

  # uniq_nums配列内の合計
  sum = 0
  uniq_nums.each do |unique_num|
    sum += unique_num
  end

  puts sum

end


lone_sum([3, 2, 3])   # 出力結果→２
lone_sum([3, 2, 1])   # 出力結果→６

```
3〜14行目で重複しない値のみ取り出す処理を、

17〜20行目で重複しない値のみになった配列内の合計を求める処理を行っている。

たとえば、lone_sum([3, 2, 3])でメソッドを呼び出した場合を考えてみて！。

この場合、4行目で最初にnum=3となる。その後6行目でi=3, 2, 3となり、

それぞれに対してnum=iとなったとき、つまり重複したときにcountが増えるようになる。

そして11行目で重複した値が1つのときだけuniq_nums配列に値を追加している。

num=3のときはcount=2となるのでuniq_nums配列に値は追加されない。

これを後2回繰り返した結果、uniq_nums配列には2だけが追加される。

そして18行目以下でuniq_nums配列内の合計を求める。

この場合、sum = sum + 2、つまりsum = 0 + 2となります。最終的に合計は2と出力される。



※↓別のやり方

```ruby
def lone_sum(numbers)
  numbers
    .tally
    .filter_map { |number, count| number if count == 1 }
    .sum
end

lone_sum([3, 2, 3]) #=> 2
lone_sum([3, 2, 1]) #=> 6
```
Microsoft Graph API を利用した Azure AD B2C のユーザー操作（削除編）

Microsoft Azure 上でクラウドネイティブなシステムを作る際は、ユーザー情報管理や認証処理を Azure AD B2C を利用して実現することが一般的です。
本記事では、Microsoft Graph API を利用して Azure AD B2C 上のユーザー情報を作成、更新、削除する方法を紹介します。

## 前提条件
- Azure AD B2C テナントが作成済みであること
- [Azure AD B2C テナントに Azure AD B2C 用ユーザーが作成されている](https://qiita.com/ksper/items/66961c66d3447f59c24a)こと
- [Microsoft Graph アプリケーションを登録されている](https://docs.microsoft.com/ja-jp/azure/active-directory-b2c/microsoft-graph-get-started?tabs=app-reg-ga)こと
- クライアント側は Spring-Boot ベースの Java アプリケーション  

## pom.xml
[作成編](https://qiita.com/ksper/items/66961c66d3447f59c24a#pomxml)を参考にしてください。

## Azure AD B2C ユーザーの ObjectId を確認する
Azure AD B2C ユーザーの削除は、対象ユーザーの ObjectId が必要になります。
ObjectId は、ユーザーのプロファイル画面から確認できます。
![スクリーンショット 2021-05-09 22.45.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1408709/a7d282d1-957f-b6d9-7dd9-d984b024a36c.png)


## Azure AD B2C ユーザーの削除
```java:TestGraphApi.java
    @Test
    void deleteUser() {

        /**
         * Azure AD B2C 上にユーザーを削除
         */
        createIGraphServiceClient(
                CLIENT_ID,
                CLIENT_SECRET,
                DOMAIN_NAME).users(OBJECT_ID_FOR_DELETE)
                .buildRequest().delete();  //  (*1) (*2)

    }
```
(*1) IGraphServiceClient オブジェクトの users メソッドの引数は、削除対象ユーザーの ObjectId になります。
(*2) ユーザー作成時は post メソッドでしたが、ユーザー削除時は、delete メソッドになります。

##削除時の Exception について
指定した ObjectId のユーザーが Azure AD B2C 上に存在しない場合は、以下の Excepiton が発生します。

```java
重大: Throwable detail: com.microsoft.graph.http.GraphServiceException: Error code: Request_ResourceNotFound
```

エラーハンドリング処理の記述を忘れないように気をつけてください。


##実行結果
上記を実行すると、Azure AD B2C 上の指定した ObjectId のユーザーが削除されていることが確認できます。
![スクリーンショット 2021-05-09 22.48.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1408709/72a63017-cf9a-90f6-1a9a-9228a27dabbe.png)

以上で「Microsoft Graph API を利用した Azure AD B2C のユーザー操作」の記事は終わりになります。
本記事の前段で、ユーザー作成と更新の方法を紹介していますので、良ければご覧ください。
[ユーザー作成編](https://qiita.com/ksper/items/66961c66d3447f59c24a)
[ユーザー更新編](https://qiita.com/ksper/items/6d304deb1311883cae3c)

Azure AD B2C では、MFA 認証もサポートしており、ユーザー作成と一緒に、2 要素認証用電話番号の操作（作成、更新）を実施したい場合もあるかもしれません。
現時点（ 2021/4 現在）で Graph API は、2 要素認証用電話番号の操作を Beta 版でサポートしています。
別の記事で、2 要素認証用電話番号 を Graph API で操作する方法について、ご紹介します。
読んで頂きありがとうございました。

####検証コード
https://github.com/ksper911/graphapi-for-azureadb2c

####Graph API リファレンス
https://docs.microsoft.com/ja-jp/graph/api/user-delete?view=graph-rest-1.0&tabs=http
［Swift］Array から Dictionary　への変換

## Struct Array から Dictionaryに変換処理（メモ）

### １。reduce を利用し、変換
#### reduce(_:_:)
指定されたクロージャを使用してシーケンスの要素を組み合わせた結果を返します。

```
func reduce<Result>(_ initialResult: Result,
                    _ nextPartialResult: (Result, Element) throws -> Result) 
                    rethrows -> Result
```

[reduce(_:_:) Developer Document](https://developer.apple.com/documentation/swift/array/2298686-reduce)　
#### code
```dic1.swift
items.reduce([String: Item]()) { (dic, item) in
    var resultDic = dic
    resultDic[item.id] = item
    return resultDic
}
```

>結果　[String, Item]
>["3": Item(id: "3", title: "title3"), 
> "1": Item(id: "1", title: "title1"), 
> "2": Item(id: "2", title: "title2")]

### ２。Dictionary(uniqueKeysWithValues:) を利用し、変換①

#### init(uniqueKeysWithValues:)
指定された順序でキーと値のペアから新しい辞書を作成します。

```
//Creates a new dictionary from the key-value pairs in the given sequence.
init<S>(uniqueKeysWithValues keysAndValues: S) 
where S : Sequence, S.Element == (Key, Value)
```
[init(uniqueKeysWithValues:) Developer Document](https://developer.apple.com/documentation/swift/dictionary/3127165-init)
#### code

```dic2.swift
Dictionary(uniqueKeysWithValues: items.map { item in
    (item.id, items.filter { $0.id == item.id }.first)
})
```


>結果　[String, Item?]
>["2": Optional(Item(id: "2", title: "title2")), 
> "3": Optional(Item(id: "3", title: "title3")),
> "1": Optional(Item(id: "1", title: "title1"))]


### ３。Dictionary(uniqueKeysWithValues:) を利用し、変換②

#### collections zip(_:_:)
2つの基礎となるシーケンスから構築されたペアのシーケンスを作成します。

```
func zip<Sequence1, Sequence2>(_ sequence1: Sequence1, _ sequence2: Sequence2) 
 -> Zip2Sequence<Sequence1, Sequence2> 
where Sequence1 : Sequence, Sequence2 : Sequence
```
[collections zip(_:_:) Developer Document](https://developer.apple.com/documentation/swift/1541125-zip) 
#### code

```dic3.swift
Dictionary(uniqueKeysWithValues: zip(items.map {$0.id}, items))
```


>結果　[String, Item]
>["3": Item(id: "3", title: "title3"), 
> "1": Item(id: "1", title: "title1"), 
> "2": Item(id: "2", title: "title2")]
laravel ビューファイルが存在していることを確認する

# 目的

- ビューファイルが存在しているかどうかを判定する方法をメモ的にまとめる

# 方法

- 下記のようにコントローラーなどに記載することで指定したビューファイルが存在しているか判定する事ができる。

    ```php
    // ファイル上部のエイリアス作成の部分に下記を記載する
    use Illuminate\Support\Facades\View;

    $viewFlag = View::exists('ビューファイル名');
    ```

- Viewファサードのexistsメソッドは引数として指定されたビューファイルが存在しているときにtrueを、存在していないときにfalseを返す。
- 下記のように記載することでビューファイルの有無で処理を分ける事ができる。

    ```php
    // ファイル上部のエイリアス作成の部分に下記を記載する
    use Illuminate\Support\Facades\View;

    if (View::exists('ビューファイル名')) {
        // ビューファイルが存在していた時の処理
    } else {
        // ビューファイルが存在していなかった時の処理
    };
    ```

# 参考文献

- [https://readouble.com/laravel/8.x/ja/views.html](https://readouble.com/laravel/8.x/ja/views.html)
VSCode でインデントのスペース数を言語別に設定する方法

プログラミング言語ごとに推奨されるインデントのスペース数は違います。
デフォルトのタブ幅は4であることが多いと思います。
では、Ruby等の推奨のインデントがスペース2つの言語などを利用するときにだけ、タブ幅を2に変更するにはどうしたら良いでしょうか?
今回はVSCodeでの設定の方法を記したいと思います。
#　settings．jsonで言語ごとのタブ幅を設定する
settings.jsonを開きます。
そして、以下のように追加します

```settings.json
"[ruby]": {
        "editor.tabSize": 2
    }
```
言語によっては、インデント幅を変えるとerrorになる場合も多いので、言語ごとのコーディング規約を確認してから設定した方が良いです。

また、右下のSpacesと書かれた部分を確認すると、現在のタブ幅がわかります。
マインドマップでAWSのデータ分析サービスを勉強【データ処理編】第２回 − EMR

AWSのデータ分析系のサービスを体系的に勉強シリーズです。

一般的なデータ分析流れに含まれる、データ収集、データ保存、データ処理、データ分析、データ可視化、といったステップにそれぞれが利用するサービスを学び、マインドマップに整理しました。
今回はデータ処理編のEMRです。

※ こちらの記事は、AWSのホワイトペーパー、クラウドサービス活用資料集とUdemyにあるAWS Certified Data Analytics Specialty 2021 - Hands onコースを参照しております。

![AWS Processing Services - EMR.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544279/5b71382d-7977-2f18-75a1-5af3452a216c.png)
http://localhost:3000/ をしたらActiveRecord::NoDatabaseErrorが起こった場合の解決策

オリジナルアプリを作成する為に環境構築しました。すべての環境構築が完了したので、rails sでサーバーを立ち上げました。その際に下記↓のエラーに遭遇しました。


試したこと：http:rails s
発生したエラー画面：https://gyazo.com/f1127958ab633e4e78e718160d4b34a7
エラー内容：”データベースが作られていません”
解決策：

```
$ rails db:create
```

再度rails sでサーバーを立ち上げます
すると・・・
https://gyazo.com/029929ba99fa65205ab2494d7fe78edc

無事サーバーが立ち上がりました🎉🎉🎉
古いMinecraft ForgeでInvocationTargetExceptionと出て怒られる問題の対策

この記事の本体はファイルのアップロードに関する問題のため、次の場所に移転しました。
この記事は同じ問題に遭遇した人が検索でたどり着くために残されています。
https://www.notion.so/Minecraft-Forge-InvocationTargetException-e51ed7150dab49fbbd714912c0fafd49

# 症状
Minecraft Forgeのインストーラーのjarやexeファイルを実行すると、次のような、`Java6Gate`や`getSponsorMessage`を含むメッセージが出て、何も起こりません。

```
> forge-1.12.2-14.23.5.2768-installer-win.exe
Setting up logger: C:\████████\installer.log
java.net.preferIPv4Stack=true
Exception in thread "main" java.lang.reflect.InvocationTargetException
        at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
        at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
        at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
        at java.lang.reflect.Method.invoke(Unknown Source)
        at net.minecraftforge.installer.Java6Gate.main(Java6Gate.java:48)
Caused by: java.lang.ExceptionInInitializerError
        at net.minecraftforge.installer.ClientInstall.getSponsorMessage(ClientInstall.java:401)
        at net.minecraftforge.installer.InstallerAction.getSponsorMessage(InstallerAction.java:60)
        at net.minecraftforge.installer.InstallerPanel.updateFilePath(InstallerPanel.java:334)
        at net.minecraftforge.installer.InstallerPanel.<init>(InstallerPanel.java:315)
        at net.minecraftforge.installer.SimpleInstaller.launchGui(SimpleInstaller.java:167)
        at net.minecraftforge.installer.SimpleInstaller.main(SimpleInstaller.java:54)
        ... 5 more
Caused by: java.lang.ArrayIndexOutOfBoundsException: 1
        at net.minecraftforge.installer.MirrorData.buildMirrorList(MirrorData.java:84)
        at net.minecraftforge.installer.MirrorData.<init>(MirrorData.java:63)
        at net.minecraftforge.installer.MirrorData.<clinit>(MirrorData.java:17)
        ... 11 more
```
実務未経験がSNSサービスを作ってみた

#はじめに
私は２０２０年８月からphp、１１月頃からLaravelを勉強し始めました。今までは、勉強の中で、ECサイトや掲示板などを作成して１からCRUD処理ができるレベルになりました。今回は、学習のアウトプットと自分の思い描くサービスを作ってみたいと考え、SNSサービスを作成した記録を残します。

#環境
制作期間は１ヶ月ほど　
勉強時間は最低平日2時間、休日6時間
htmlとcssは最低限しか分からないです。

スキル
MAMP/php/Laravel5.5/mysql/git/vim/linux

#作ってみたもの
**WEBアプリ名**　[Destiny 保険](https://xs970147.xsrv.jp/)
**目的**　保険が大好きで優柔不断な日本人に後悔のない保険選びをサポートすること
**内容**　保険の悩みを共有するSNSです。会員登録したユーザーは保険に対して抱えている悩みを投稿することができます。他のユーザーからコメントでアドバイスを受けることができます。プロフィール欄も充実しているためユーザーが保険のプロなのか？同じような悩みをかける主婦なのか？すぐに分かる事ができます。気になったユーザーがいた場合はチャット機能で２人だけの会話を頼むことができます。より深い内容の提案を受けることを期待できます。
**機能**
全ユーザー
・投稿を見ることができる
・コメントに「いいね」評価をいただけた数ランキングを見ることができる
・管理者にお問い合わせをすることができる
・悩み投稿を検索することができる。

会員登録したユーザーのみ
・保険に対する悩みを投稿することができる
・ユーザーの投稿にコメント(アドバイス)をすることができる。
・他のユーザーとチャットすることができる
・投稿についたコメントを確認することができる
・プロフィール機能

投稿したユーザーのみ
・投稿を削除することができる
・投稿のコメントに「いいね」をすることができる

管理者のみ
・全ユーザー確認機能
・全お問い合わせ確認機能
・対応したお問い合わせのステータスを変更機能


[**トップ画面**](https://xs970147.xsrv.jp/)
![スクリーンショット 2021-04-27 14.53.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050579/9c7fde44-0d59-ee7b-47a0-4b801f0983c9.png)

[**悩み投稿の一覧ページ**](https://xs970147.xsrv.jp/index)
![スクリーンショット 2021-04-27 14.54.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050579/e19bdad3-54eb-d13d-ec78-15ddbff17563.png)

**保険の投稿をクリックすると詳細画面**
![スクリーンショット 2021-04-27 14.55.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050579/0330783a-9823-0250-7c95-287779fa9ae4.png)

**保険の悩みを投稿するページ**
![スクリーンショット 2021-04-27 15.01.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050579/049b3dc6-5086-0677-9e23-6f7521d36162.png)

#個人的に気に入っている点
**・フッター**
黒と白を貴重にしたシンプルなデザインと人生初のcopyrightがかっこいい、、
![スクリーンショット 2021-04-27 14.56.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050579/6218a3dd-3011-077e-8e66-d066faf80191.png)
**・デフォルトのプロフィール写真**
プロフィール写真を設定していないとかわいいピカチュウのシルエット写真になります。遊び心を入れました。
**・「Destiny　保険」というサービス名**
**・コメントにいいねをたくさんいただいたランキング**
Fontawesomeでcrownのロゴを使いました！　色とロゴが合ってて抜群に好き
![スクリーンショット 2021-05-12 20.06.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050579/2f5eb7b0-080f-3bd2-06e7-8e45b29a8e4f.png)
**・チャット機能**
![スクリーンショット 2021-05-12 20.05.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050579/0c62c667-2d61-2282-a9b3-0b35ad7a668b.png)


#反省点
各作業にかかった時間計測していない
fatコントローラー
cssがきたない

#サービスに導入したいこと
提案書作成機能
レスポンシブ対応
非同期通信
リファクタリング

#サーバーに公開する流れ
[xserverで公開する際に参考にした記事](https://kekaku.addisteria.com/wp/20200919095532)を参考に公開しました。
少しだけ躓いた場面があります。
**①ssh接続時**　
公開鍵の権限を600に変更すること
サーバーIDはメールで送られてくるIDとは違うこと(エックスサーバーと契約すると様々なIDがあるため勘違いしてログインに失敗しました)
[ssh接続時に参考にした記事](https://qiita.com/ryo2132/items/38b5a93b3df476dd2b44)

**②サーバー公開後にローカルからimageデータをリモートサーバーに移す時**
FTPのログインするときに設定を何度も間違えたせいで、ログインできなくなりました。
[xserver公式のFTPに関するQ&A](https://www.xserver.ne.jp/manual/man_server_ssh.php)
そのため、VSCodeでRemote sshで接続して、ローカルにあるimageフォルダーをドラッグアンドドロップで移動させました。
FPGAボード SOY2 で Lチカ ー その１(ソース変更まで)

## 概要

[SOY2](https://www.bbtech.co.jp/products/soy2/) で Lチカ をやってみます。
Ethernet を介して、データを渡し、FPGA で計算をしてみたいのですが、まずは、サンプルソースを少し変更して、動作確認をしてみます。
今回は、ソース入手と、変更を加えるところまでです。
([「その2」](https://qiita.com/guinea_pig_t/items/e98f12aace6e665c613e) へつづく)

## ソース入手

「SOY2 出荷時ソース」と「SiTCP ライブラリ」をそれぞれダウンロードします。

* 「SOY2 出荷時ソース」  
  「[SOY2 関連 ダウンロードページ](https://www.bbtech.co.jp/download-files/soy2/index.html)」の
  SOY2 関連ファイル一式(SOY2-1.3.zip) をダウンロードします。
* 「SiTCP ライブラリ」  
  GitHub [BeeBeansTechnologies/SiTCP_Netlist_for_Spartan7](https://github.com/BeeBeansTechnologies/SiTCP_Netlist_for_Spartan7) から入手します。  
  Xilinx の Spartan 7 用 の Netlist など置いてあります。
  Git で clone するか、[Donload ZIP] をクリックしてダウンロードします。

<img width="300" alt="download_zip.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1205335/c00360fc-060b-c057-d6a1-9d4f8ccda46c.png">


## ソースコード修正

SOY2 基板上の LED を、点滅させてみます。
3色LED の緑色に対して変更を加えます。
ディップスイッチ 2番 を ON にしたとき点滅するように、ダウンロードしたソースに変更を加えます。
赤LED の点滅時より早い点滅にします。
SOY2-1.3.zip 内の SOY2.v に以下のように変更を加えました。

~~~verilog
--- SOY2_org.v	2018-09-25 16:44:16.000000000 +0900
+++ SOY2.v	2021-05-09 22:00:06.000000000 +0900
@@ -733,7 +733,7 @@
 
 
 
-	assign	PNLLED_G	=  1'b1;
+	assign	PNLLED_G	=  DIPSW[1]? 1'b1: CNTLED[6];
 	assign	PNLLED_Y	= ~DIPSW[0]?	SiTCP_OPEN_ACK:	USR_ACTIVE;		// TCP Session(Demo mode) or USR_ACTIVE
 	assign	PNLLED_R	=  SiTCP_RST | (~FORCE_DEFAULTn & CNTLED[7]);	// During SiTCP_RST or Force Default
~~~

ソースと一緒にダウンロードした回路図を見ると、DIP SW は GND に接続されています。
また、以下の様に、内部プルアップされてるので、
DIP SW OFF で 1、DIP SW ON で 0 となります。

~~~verilog
	generate
		genvar JMPR_var ; 
		 for (JMPR_var=0;JMPR_var<4;JMPR_var=JMPR_var+1) begin : JMPR_LOOP
			IBUF								DIPSW_IB	(.O(DIPSW[JMPR_var]), .I(DIPSW_IN[JMPR_var]));
			PULLUP								JMPR_PU		(.O(DIPSW_IN[JMPR_var]));
		 end
	endgenerate
~~~

来週末にでも、インプリと SOY2 での動作確認を行って見たいと思います。