OmniAICreator/Qiita-1.07M huggingface dataset:
ubuntu/bionicにインストールしたConcrete5でRedisをキャッシュサーバとして利用する

RedisサーバとPHP拡張をインストールする

```sh
sudo apt install -y redis php-redis
sudo systemctl restart apache2
```

Concrete5の設定を修正

```/public/application/config/concrete.php
<?php

$redisDriver = [
    'core_filesystem' => [
        'class' => \Concrete\Core\Cache\Driver\RedisStashDriver::class,
        'options' => [
            'servers' => [
                [
                    'server' => 'localhost',
                    'port' => 6379,
                    'ttl' => 30
                ],
            ],
            'prefix'=>'core',
            'database'=> 2
        ],
    ],
];

$cache = [];
$session = [];

$cache = [
    'page' => [
        'adapter' => 'redis',
        'redis' => [
            'servers' => [
                [
                    'server' => 'localhost',
                    'port' => 6379,
                    'ttl' => 30
                ],
            ],
            'prefix'=>'page',
            'database'=> 1
        ],
    ],
    'levels' => [
        'overrides' => [
            'drivers' => $redisDriver,
        ],
        'expensive' => [
            'drivers' => $redisDriver,
        ],
        'object' => [
            'drivers' => $redisDriver,
        ],
    ],
];

$session = [
    'name' => 'CONCRETE5',
    'handler' => 'redis',
    'redis' => [
        'database' => 0,

    ],
    'servers' => [
        [
            'server' => 'localhost',
            'port' => 6379,
            'ttl' => 10
        ],
    ],
];

return [
    'cache' => $cache,
    'session' => $session,
    'misc'              => [
        'app_version_display_in_header' => false,
    ],
    'updates' => [
        // Skip the automatic check of new concrete5 versions availability
        'skip_core' => true,
    ],
];
```

## 参考

- [concrete5 (8.5.0 以降) で Redis を使う方法](https://qiita.com/katzueno/items/0f172a2d5bc65fc9acb2)
【小ネタ】Rで関数を実行時に関数名を取得する方法

複雑なコードを書いているときに、どの関数からの呼び出しか
いちいちprintに明記するのが面倒で、動的に関数の名前を取得できたらいいな、というとき用の備忘

つまり、実現したいことは次のようなスクリプトを書たら、```f1()```と出す

```r
f1 <- function(){
  print(get_tihs_function_name())
}

f1()
```

これも素直に関数が用意されているわけじゃなさそうだったので、自作しとく。
```sys.frames()``` と ```sys.calls()```をうまく使えばいけることがわかった。

なお、REPLでの実行とsourceでの実行で違いがあるので、両方対応するためにはちょっと工夫が必要


```r
get_tihs_function_name <- function(){
  tmp_frames <- sys.frames()
  tmp_calls <- sys.calls() 
  
  function_name_ix <- -1
  for(i in seq_along(tmp_frames)){
    if(environmentName(tmp_frames[[i]]) == 'R_GlobalEnv'){
      function_name_ix <- i + 1
    }
  }
  
  this_function_name <- ''
  # REPLで実行するとR_GlobalEnvにたどり着かないはずだから、REPL実行用に分岐用意しとく
  if(function_name_ix >= 0){
    this_function_name <- as.character(tmp_calls[[function_name_ix]])
  }else{
    this_function_name <- as.character(tmp_calls[[1]])
  }
  
  this_function_name <- paste0(this_function_name, '()')
  
  return(this_function_name)
}

```
せくしょにんぐ・こんてんつ～？①

#前回記事の振り返り
2回目まして、あさちゃんです。
前回は
**「HTMLの用語の意味を直訳と意訳を交えて解釈する」**
という内容で投稿したのですが、
いいねやコメントをくださった方ありがとうございました。

コメントで、とても心の優しいユーザーさんたちから

:relieved::point_up_tone1:　**＜　HTMLの歴史を辿ったほうがいいかもね！**

といったアドバイスと共に詳しく解説してくださる方もいて、
とても興味深いなと感じたと同時に、

:girl_tone1:　**｡ O（　ぽんぽん見知らぬ方からレスが返ってくるQiitaすげえ。アクティブ～！　）**

と思いました。

HTMLの歴史については本当に興味が沸いたので、（**<font color=hotpink>CERNってワード、トキメキますよね♡</font>**）
勉強してまた別の機会に記事にしたいなと思います。
改めてコメントくださった皆さんありがとうございました！

#今回のテーマ
月半ばになり、社内では事務職のほうで空き時間が増えてきましたので
とってもありがたいことに毎日たっぷりコーディングの勉強をさせていただいています。

そこで、先輩が貸してくださった参考書に
サラッと記載されていた【セクショニングコンテンツの種類】というタイトル...

:girl_tone1:　**＜　せくしょにんぐ・こんてんつ～？**

となりまして（タイトル回収）

**①そもそも言葉の意味がわからない
②セクショニングコンテンツの種類とは？
③調べてみたらHeader要素とFooter要素はセクショニングコンテンツ組には入ってないらしい
④div要素との使い分けがわからない**

など、まだまともにコーディングしたことない初心者には「？？？」なことが多すぎたので
記事にして深堀りしてみることにしました。

HTMLの初心者仲間さんだけでなく
HTML5になってから結局のところよくわかってない...みたいな方にも
ちょっとはお役に立てる内容になるといいな！
という淡い期待を込めて。

#①言葉の意味を知る：セクショニングコンテンツ
セクショニングコンテンツという概念はそもそも**HTML5から導入**された要素のようです。

Web辞書で検索をかけてみると

Section　⇒　区切り　、Contents　⇒　内容物

という意味になっています。
<font color=lightgray>中学で習う英単語ですが私は調べないとパッと出てきませんでした。（大卒）</font>

つまり、『**WEBサイトの内容を区切る要素**』となりますね！

WEBサイトの内容を区切るというのはつまり、見出しごとに

でもでも、別にあえてHTML上で区切ったりしなくたって、
人間はWEBの内容に『見出し』があれば
「Aの見出しとBの見出しは別の内容」、という風に分けられていることが認識できるし、
新聞のコラムみたいにテーマと少し違う内容が書いてあっても
「ここには蛇足的な内容が書いてあるな」と認識できます。

じゃあなぜ必要なのか。

さらに調べてみると、ちゃんとワケがありました。

##セクショニングする理由
<font color=red>**コンピューターに理解してもらうため**</font>

例えばより多くのユーザーの検索結果に引っかかり、上位に表示させるため、
**SEO対策の一つ**として、きちんとセクショニングする必要があります。

こちらがWEBサイトが検索エンジンに表示されるまで3つのステップ

STEP1：クローリング（検索ロボットがあらゆるページを巡回･情報収集）
**STEP2：インデキシング（集めた情報を整理整頓・データベースに格納）**
STEP3：スコアリング（STEP2までの情報を踏まえて入力されたキーワードとの関連度合いを評価・表示順を決定する）

セクショニングが活きてくるのはSTEP2のインデキシング！
きちんとした文書構造で書かれているかも含め、
WEBページの内容の濃さ･正確さなどの観点から
インデキシングの対象となるか否かが決定するみたいです。

:robot:　**＜　僕に見つけてほしいなら内側までちゃんと作ってね！**

ってことですね！がんばりましょう！

#②４つの種類と利用シーン
セクショニングコンテンツには、article・nav・aside・sectionの4種類がありますが
それぞれどんな時に使うのかをしらべました！

###article要素
articleは日本語で「記事」という意味
その名の通り、記事のようにまとまった内容..ブログ記事やそのコメントなど
それだけで独立した内容となっているセクションを示すための要素。

###aside要素
asideは「余談」とか「脱線」みたいな意味
メインコンテンツの脇で、補足的な情報を載せたいときにつかう要素です。
新聞や参考書の「コラム」とかですね！

###nav要素
navはnavigationの略で、WEBページ上のナビゲーションを指します。
ページ上をスムーズに移動するためのセクションをこの要素で囲っておくみたいです。

###section要素
他の3種（article・aside・nav要素）のどれにも当てはまらない内容を囲います。

勉強したての私は、4種類の中でsectionが一番よく見る要素！っていう印象なんですが
実際に業務で使い始めたらどうなんだろう？
作るWEBページによって変わるのかな。

#次回につづく
文章書くの遅すぎマンなので一旦今回はここまでにして
後半をまた来週頭くらいに投稿したいと思います！

ここまでで間違ってることなどあったらぜひご指導ください！！

#私がおすすめしたい、かわいいQiita記事
私にメンターとしてついてくれている先輩が2人いらっしゃるのですが、
おふたりともQiitaでとてもかわいい制作物を紹介してまして...
HTMLとCSSを使ったものばかりで、読むたびに「わたしもいつか...！」とやる気になります。

**私のような初心者さんたちもこれを読んだらきっともっと勉強したくなる！**

と思うので今回と次回で１つずつシェア！🍂

[[HTML/CSS]チェックボックスの仕組みを使ってえだまめ無限プチプチをつくるぞ](https://qiita.com/mame_hashbill/items/0403db5789c63c77fa35)

みなさんの【勉強がんばろう！】と思えた
おすすめ記事があったら是非教えてください！
asyncな無名関数を使って非同期処理を書く

モダンなjsではasyncFunctionで同期っぽく非同期処理を書きたいわけですが、
何でもかんでもawaitで止めて直列処理にしてしまうのが不適切な場合もあります。

例えば、以下のようなケースです。

* 非同期処理Bは画面を機能させるために必須の処理である。
* 非同期処理Bは非同期処理Aの結果に依存する。
* 非同期処理C及びDは必要な処理ではあるが、画面初期描画時に必須ではない
* 非同期処理Dは非同期処理Cの結果に依存する

この場合、画面を初期描画するのにBが必須なため、AとBに関してはasync functionの中で

``` javascript
const aResult = await a();
const bResult = await b(aResult);
//bResultを基に画面が描画される
```

と書けばOKです。

では、ここでCとDをどう書くか？

``` javascript
const aResult = await a();
const bResult = await b(aResult);
const cResult = await c();
const dResult = await d(cResult);
//bResultを基に画面が描画される
```
という風にとにかくawaitでつなげても動きはします。
が、こう書くと本来はaやbの待ち時間にc,dの処理を始められないため非効率的です。

というわけで、効率化を考えると、以下のようにc,d部分は以下のように書く必要があります。

``` javascript
c()
 .then(cResult => d(cResult))
 .then(dResult => {//dResultを使った処理});
const aResult = await a();
const bResult = await b(aResult);
```

cとdに依存性がなければ

``` javascript
c();
d();
const aResult = await a();
const bResult = await b(aResult);
```
と書いて終わりですが、cとdは直列化しないといけない場合は、thenでつなぐ必要があります。
が、せっかくasyncなのにここでthenが出てくるのはちょっと格好悪い気がします。

# 無名async関数

``` javascript
(async() => {
  const cResult = await c();
  const dResult = await d(cResult);
  //dResultを使った処理
})();
const aResult = await a();
const bResult = await b(aResult);
```

asyncは無名関数でも問題なく利用でき、即時実行すればPromiseを返してくれます。
処理が長かったり、他でも使う場合は関数として切り出した方が良いと思いますが、
他で使う予定がない処理の場合ささっと無名関数で書いてしまうのもアリだと思います。
数値と演算の組み合わせの問題を深さ優先探索で解く

「数値と演算の組み合わせの問題」とはどういうことかと言いますと、先日Twitterに流れてきた投稿をみたらこんなんがありました。（元ネタがアレなので、問題の設定は変えてあります）

> 勇者は５種類の薬を持っている。
>
> A.　MPを半分にする薬
> B.　MPを900減らす薬
> C.　MPを2000増やす薬
> D.　MPを5倍にする薬
> E.　MPを500増やす薬
>
> 今のMPは0である。MPを3000にしたい場合、どの順序で薬を飲めばよいか？

普通に計算してもよいのですが、今回は計算機の力を使い総当たりでやってみしょう。
愚直にfor loopを薬の数だけ書くやり方もありますが、面倒くさいので深さ優先探索を使います。

```python
# n: 計算途中のMP
# lst: 残っている薬
# hist: これまで使った薬
def calc(n, lst, hist):
	# 全て薬を使ったら、3000になっているかチェック
	if len(lst) == 0:
		if n == 3000:
			print(hist)
		return
	# 残っている薬でイテレーション
	for i in range(len(lst)):
		# 元のリストが変わると困るのでコピー
		l = lst[:]
		h = hist[:]
		oper, num = l[i]
		# これまで使った薬リストに選んだ薬を入れる
		h.append(l[i])
		# 使った薬をリストから消す
		l.pop(i)
		# 足し算か掛け算かで分ける
		if oper == '+':
			calc(n + num, l, h) 
		else:
			calc(n * num, l, h)

# 計算する
calc(0, [('*', 0.5), ('*', 5), ('+', -900), ('+', 500), ('+', 2000)], [])
```

再帰を使って総当りを表現した、何の変哲もない深さ優先探索です。
結果は以下。

```
[('+', -900), ('+', 2000), ('*', 5), ('+', 500), ('*', 0.5)]
[('+', 2000), ('*', 0.5), ('+', -900), ('+', 500), ('*', 5)]
[('+', 2000), ('*', 0.5), ('+', 500), ('+', -900), ('*', 5)]
[('+', 2000), ('+', -900), ('*', 5), ('+', 500), ('*', 0.5)]
```

たかだか$5!$=120通りの演算なので楽勝ですね。以上。
MySQLで月の差分をみる

`date_time`の差分を`date_diff`で見るのはいいんだけど、
何ヶ月経ってるのかを計算するとき無造作に30で割るってやったらダメかな...

って思ってたけど

こいつがいたとは

```sql
PERIOD_DIFF(date_format(now(),"%Y%m"), date_format(contract_date,"%Y%m"))
```
ubuntu/bionic64にConcrete5をcomposerでインストールする

パッケージをアップデートする

```sh
sudo apt update
sudo apt upgrade -y
sudo apt install -y zip lamp-server^ php7.2-curl php7.2-xml php7.2-gd php7.2-mbstring php7.2-zip
```

composerをインストールする

```sh
curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/composer
composer global require hirak/prestissimo
```

環境によっては`composer install`がメモリ不足で落ちるので、一旦ApacheとMySQLを終了する

```sh
sudo systemctl stop apache2 mysql
```

Concrete5をインストールするディレクトリに移動し、プロジェクトを作成する

```sh
cd /path/to/your/directory
composer create-project -n concrete5/composer myproject
```

ApacheとMySQLを再度起動する

```sh
sudo systemctl start apache2 mysql
```

MySQLのデータベースとユーザーを作成する

```sh
sudo mysql
```

```sql
CREATE DATABASE concrete5 CHARACTER SET utf8mb4;
CREATE USER 'concrete5'@'%' IDENTIFIED BY 'password';
GRANT ALL PRIVILEGES ON concrete5.* TO 'concrete5'@'%';
FLUSH PRIVILEGES;
exit;
```

インストールコマンドを実行する

```sh
cd myproject
./vendor/bin/concrete5 c5:install \
    --db-server=localhost \
    --db-username=concrete5 \
    --db-password=password \
    --db-database=concrete5 \
    --admin-password=password \
    --language=ja_JP \
    --site-locale=ja_JP
```

Apacheの設定を変更

```sh
sudo vim /etc/apache2/apache2.conf
sudo vim /etc/apache2/sites-available/000-default.conf
sudo a2enmod rewrite
sudo systemctl restart apache2
```

```diff:/etc/apache2/apache2.conf
<Directory /var/www/>
        Options Indexes FollowSymLinks
-       AllowOverride None
+       AllowOverride All
        Require all granted
</Directory>
```

```diff:/etc/apache2/sites-available/000-default.conf
- DocumentRoot /var/www/html
+ DocumentRoot /var/www/html/public
```

## 参考

- [concrete5/composer: concrete5 composer base](https://github.com/concrete5/composer)
HTML/CSSの書き方(ちょっとhaml)

html/cssで作るときにいつも忘れがちなことを個人でメモしているものになります。
都度更新しておりますのでご了承ください。

## いつも参考にさせていただいているサイト
⭐️色の見本
http://www.netyasun.com/home/color.html
⭐️Font-familyメーカー
https://saruwakakun.com/font-family
⭐️命名について
https://qiita.com/pugiemonn/items/eaa597b79fe59a1f1506#html%E3%81%A8css%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%AE%E5%91%BD%E5%90%8D%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6


## 基本
```html
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8" >
  <link rel="stylesheet" type="text/css" href="example.css">
  <script type="text/javascript" src="index.js"></script>　<!-- jsがあれば -->

  <title>サイト名</title>
</head>
  <body>
  <!-- 主にここからコードを書いていく -->

  <!-- ここまでの間にコードを書く -->
  </body>
</html>
```
リセットCSSが必要な場合は、好みのものを貼り付けてください。

## 画像の表示
```html:html
<img src="dog.jpg" alt="［写真］">
```

```erb:haml
<%= image_tag 'dog.JPG'%>
```

### 画像を背景表示する
- background-imageを使う

```html:html
  <section class="works" >
    <div class="l-content">
      <h2 class="heading">Works</h2>
    </div>
  </section>
```
```css:css

.works {
	width: 100%;
	height: 600px;
	background-image: url(画像のパス);
}
```
### 背景画像を透過する（テキストは透過しない）
- opacityだとテキストも透過してしまうため、画像とテキストの間に１つ階層をはさめばOK！


```html:html
  <section class="works" >
    <div class="l-content">　#これを挟む
      <h2 class="heading">Works</h2>
    </div>
  </section>
```
```css:css
.l-content{
  height: 100%;
  background: rgba(255,255,255,0.5);
}
```





### 画像を中央寄せ
- positionを使う

```scss:scss
.top-box {
  background-color: $BaseOrange;
  height: 100px;
  width: 100%;
  margin-bottom: 15px;
  position:relative;
  img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto
  }
}
```
### 画像リンク
```
      <a href="http://www.pckai.net/manboumaru/"><img src="image2.jpg"></a>
```


## リスト（li,ul)
```erb
    <ul class=contents>
      店名：
        <li class=contents__details>
        ジャンル：
        </li>
        <li class=contents__details>
        住所：
        </li>
```


```scss
//リストの点を消す
  li {
    list-style: none;
  }
```

## 要素の加工

### 要素を丸くする
```css:css
.work-block {
	height: 250px;
	width: 250px;
	border-radius: 125px;
}

/*border-radiusを正方形の半分で指定する*/
```
シェルスクリプトとcrontabでrssを自動取得してみる

##免責事項
この記事は初心者視点でザックリとした説明をしています。正確性に欠ける可能性がございますが、ご了承ください。「明らかに違うよ」ということがありましたら、ご指摘くださると幸いです。

##環境
OS：最新版ではないMacOS
VirtualBox：5.2.26
Vagrant：2.2.6
Ubuntu：ubuntu/bionic64 v20181129.0.0


##やること
シェルスクリプトとcrontabコマンドの設定を使い、総務省のニュースを自動取得する仕組みを作っていきます。

#1. ディレクトリをつくる
まずはrssのデータ（xml形式のファイル）が保存されるディレクトリをつくりましょう。

```
$ mkdir ディレクトリ名
```

#2. シェルスクリプトを書くファイルをつくる
シェルスクリプトを書くファイルをつくります。
シェルスクリプトを書くファイル名はなんでも良いです。
ここでは、soumu-rss.shとしておきます。
ついでに実行権限をすべてのユーザーに与えます。

```
//ファイルを作る
$ touch ~/ディレクトリ名/soumu-rss.sh
//ファイルの実行権限の設定
$ chmod a+x soumu-rss.sh
```

#3. ファイルにシェルスクリプトを書く
ファイルには以下のように書きます。

```sh:soumu-rss.sh
#!/bin/bash
dirname="~/ディレクトリ名"
filename1="${dirname}/soumu-news.xml"
curl http://www.soumu.go.jp/news.rdf -s -o $filename1 -H "User-Agent: CrawlBot; 自分のメールアドレス"
filename2="${dirname}/soumu-news-`date +'%Y%m%d%H%M'`.xml"
iconv -s -f Shift_JIS -t utf-8 $filename1 -o $filename2
echo "Save to $filename2"
```
###解説
\#!/bin/bash　は、シバングの設定です。
dirname="~/ディレクトリ名"　は、ディレクトリを**絶対パス**で変数に入れています。
filename1="\${dirname}/soumu-news.xml"　は、RSSを**仮保存する**ファイル名を変数に入れています。
curl http://www.soumu.go.jp/news.rdf -s -o $filename1 -H "User-Agent: CrawlBot; 自分のメールアドレス"　
は、
curl http://www.soumu.go.jp/news.rdf でURLのxmlをコンソールに出力
-s でそのコンソールへの出力をなくします。
-o $filename1で出力を保存するファイルをfilename1に指定。
-H "User-Agent: CrawlBot; 自分のメールアドレス" でHTTP通信のヘッダーの設定を行なっています。詳しくはわかりません。
filename2="\${dirname}/soumu-news-\`date +'%Y%m%d%H%M'`.xml"　は、RSSを**保存する**ファイルを変数に入れています。
iconv -s -f Shift_JIS -t utf-8 \$filename1 -o \$filename2 は、
iconvは文字コードの変更を行います。
-sはコンソールへの出力をなくします。
-fで元の文字コードを指定します。元の文字コードはShift_JISです。
-tで変更先の文字コードを指定します。一般的に使いやすいutf-8に指定しました。
iconv 元のファイル名（filename1）　-o 変更先のファイル名（filename2）とします。
echo "Save to $filename2"で、filename2の保存が終わったことをコンソールに表示します。

#4. シェルスクリプトファイルの実行
先ほど書いたファイルの実行を行います。

```
$ ./soumu-rss.sh
```
とコンソールに打つと、

```
Save to ~/ディレクトリ名/soumu-news-201910281814.xml
```
と言う風にコンソールに表示されると思います。
最初に作ったディレクトリを確認してみると、soumu-news-201910281814.xmlが取得できているはずです。

#5. RSSの自動取得
続いて、先ほどのRSSを毎時間自動取得していきます。
コンソールに、

```
$ select-editor
```
入力すると以下のような画面がでてきます。
今回は1のエディターを選択します。
![スクリーンショット 2019-10-28 18.42.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374924/0173cb1c-cdac-cd56-a062-1fb219614939.png)
エディターを選択したら、続いてコンソールに以下のコマンドを打ちます。

```
$ crontab -e
```
これはコマンドを決めた時間に自動で打つように設定できるコマンドです。
すると、以下のような画面が表示されます。
![スクリーンショット 2019-10-28 18.46.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374924/cc662683-7ca5-e6aa-07ad-83cd439dbb6f.png)
そして、マウス等で一番下まで移動すると以下のような文字が出てきます。
![スクリーンショット 2019-10-28 18.46.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374924/43d0793e-405c-02c2-e7c0-25404ad1b375.png)
一番下に、\# m h  dom mon dow   commandとあり、その下に
10 * * * * ~/soumu-rss.sh
と書き込みます。

これは、毎時間の10分になったら、

```
$ ./soumu-rss.sh
```
が自動的に実行されるという設定になります。

以上でシェルスクリプトとcrontabを使うrssの自動取得が完了しました。

##参考
「N予備校 プログラミングコース」
https://www.nnn.ed.nico/
「iconv - ファイルの文字コードを変換 - Linuxコマンド」
https://webkaru.net/linux/iconv-command/
with sharing 、without sharingと共有ルールの設定

背景：
lightning Componentでapexソースを呼び出す。

APEXにグループチャットのオブジェクトを検索

apex with sharing
共有ルールでグループが公開したら、
グループのメンバーがお知らせ投稿が見えます。

apex with sharing
共有ルールのグループが未公開して
グループのメンバーがお知らせ投稿が見えません。

apex without sharing
共有ルールの共有ルールのグループが未公開して
グループのメンバーがお知らせ投稿が見えます。



http://nodding-off-programmer.blogspot.com/2017/11/salesforce-with-sharing-without-sharing.html
JUnitでMockWebServerを使ってリクエスト送受信ロジックのテスト

Javaアプリケーションに外部APIを使った機能を実装する機会があったのでその時の話を。

# やりたいこと

リクエスト送受信処理を新たに実装した場合、固定レスポンスで期待した動作をするのか確かめたい気持ちになります。
そこで、MockWebServerというライブラリを使って固定レスポンスを返すことにしました。これにより、リクエスト送受信の部分のロジック検証を簡易化できます。

![mockserver.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13766/ab0c0c4f-a0f3-8c4c-a89f-36d980f37f28.png)

# 開発環境

今回試すJava環境は下記の通りです。

```
$ java -version
java version "1.8.0_161"
Java(TM) SE Runtime Environment (build 1.8.0_161-b12)
Java HotSpot(TM) 64-Bit Server VM (build 25.161-b12, mixed mode)
```

ビルドツールはmaven(3.6.0)を使っている想定です。

# 利用方法

pom.xmlに必要なライブラリを追記します。

```
<dependency>
  <groupId>com.squareup.okhttp</groupId>
  <artifactId>mockwebserver</artifactId>
  <version>2.7.5</version>
  <scope>test</scope>
</dependency>
```

実装するにはMockWebServerとMockResponseをimportする必要があります。

MockWebServerがリクエストを受けてレスポンスを返す仕組みを提供するクラスで、MockResponseは専用のレスポンス内容を定義するために使うクラスです。

最低限MockWebServerを動かすためには下記のような実装になります。

```java
import com.squareup.okhttp.mockwebserver.MockResponse;
import com.squareup.okhttp.mockwebserver.MockWebServer;
import org.junit.Before;
import org.junit.Test;

import java.io.IOException;

public class QiitaTest {
    
    private MockWebServer mockWebServer;
    
    @Before
    public void setup() throws IOException {
        this.mockWebServer = new MockWebServer();
        this.mockWebServer.start();
    }

    @Test
    public void qiitaTest() {
        String json = "{\"message\": \"qiita用テスト\"}";
        MockResponse mockResponse = new MockResponse();
        mockResponse.setBody(json);
        mockResponse.setResponseCode(200);
        this.mockWebServer.enqueue(mockResponse);
        
        String mockServerUrl = mockWebServer.url("/").toString();
        // mockServerUrl = http://localhost:59690/
        
        // リクエスト送信処理を書いてレスポンスを受け取ってテスト内容を書く
    }
}
```
ダミーサーバを立ち上げるためにはMockWebServerのインスタンスを生成し、startメソッドを呼び出します。
ここでは使っていないですが、コンストラクタの引数にポートを指定することが可能です。
mockWebServer.start() は IOException が throws で指定されているため、前処理として定義したsetup()も同様にしています。

これにより、Jacksonなどを使ってレスポンス内容をオブジェクトにマッピングする処理を固定レスポンスで検証できたりします。
※具体的にリクエストを送信する処理は割愛します

上記の様に正常系処理も試せますが、 `setBodyDelay` を使うとレスポンスを恣意的に遅延させることが可能です。

```java
import import java.util.concurrent.TimeUnit;
...
    @Test
    public void qiitaDelayTest() {
        String json = "{\"message\": \"10秒遅れて来ます\"}";
        MockResponse mockResponse = new MockResponse();
        mockResponse.setBody(json);
        mockResponse.setBodyDelay(10, TimeUnit.SECONDS);
        mockResponse.setResponseCode(200);
        this.mockWebServer.enqueue(mockResponse);
        ...        
    }
```

リクエスト送信処理の中でタイムアウトの設定をして、わざと閾値を超えた時のエラーハンドリングを試すことができます。

Unitテストではこの様に明示的にjsonを作ってリクエストを送信する方法でテストを実行していますが、MockServerを裏で立ち上げておいて、リクエストの送信先をMockServerに向けたアプリケーションを動かして、動作を確認することも可能です。

# 最後に
MockWebServerのおかげで簡単にresponse指定で動作確認ができました。
テストコード自体が不慣れだったので間違いもあるかもしれないですが、外部APIを経由するロジックの動作を自分なりに検証した時の方法でした。
【Kotlin】JacksonはKotlinの型引数のNullabilityを判別できない【Jackson】



---

`Jackson 2.10.0`で検証しています。

# TL;DR
- `Jackson`は`Kotlin`の`List`等の型引数のNullabilityを判別できない
- 型引数がNonNulな内容に`null`を入れても、`Jackson`によるパース時点では落ちない
- ~~これらのことから、`Jackson`で`JSON`をパースする場合、型引数はNullableにするか、`null`の場合エラーで落ちることを許容する必要がある~~
  - 改めて確認した所、[`KotlinModule`の`strictNullChecks`オプション](https://github.com/FasterXML/jackson-module-kotlin/blob/2ba9307d8495dc83a2e59bf9d160891ea4de6f64/src/main/kotlin/com/fasterxml/jackson/module/kotlin/KotlinModule.kt#L25-L28)を有効にすれば型引数情報に基づく`null`チェックが有効になるようです
  - ただし、ドキュメントに記載されている通り、このオプションを有効にするとデシリアライズ速度に大きな影響が有るようです

# 問題
問題を再現する最小コードは以下のとおりです。
コメントの通り、`null`を含む配列を`List<String>`にパースしているのに、パース時点で落ちていません。

```kotlin
import com.fasterxml.jackson.module.kotlin.jacksonTypeRef
import com.fasterxml.jackson.module.kotlin.jacksonObjectMapper

fun main() {
    val objectMapper = jacksonObjectMapper()

    // Nullを含むリスト
    val list: List<String?> = listOf("hoge", "fuga", null)

    val json = objectMapper.writeValueAsString(list)
    println(json)

    // パース時点では落ちない！
    val fromJson: List<String> = objectMapper.readValue(json, jacksonTypeRef<List<String>>())
    println(fromJson)

    // ここでヌルポで落ちる
    fromJson.forEach { println(it.length) }
}
```

```:実行結果
["hoge","fuga",null]
[hoge, fuga, null]
4
4
Exception in thread "main" java.lang.NullPointerException
	at MainKt.main(Main.kt:16)
	at MainKt.main(Main.kt)

Process finished with exit code 1
```

## 補足
ライブラリは`jackson-module-kotlin`のみ導入しています。

- [Maven Repository: com\.fasterxml\.jackson\.module » jackson\-module\-kotlin](https://mvnrepository.com/artifact/com.fasterxml.jackson.module/jackson-module-kotlin)

# 対処
以下の3通りが考えられます。

- （パフォーマンスを犠牲に）`KotlinModule`の`strictNullChecks`オプションを有効化する
- 型引数は全て`Nullable`で定義する
- `Null`安全が壊れることを許容する
Tensorflow2.0をubuntu18.04LTS on WSL にインストール

# はじめに

WSLで tensorflow 2.0.0 を動かしたときのメモ。
2020/01/20 最新版に追記修正

## 環境

| ソフトウェア   | バージョン | 備考 | 
|---------------|----------------|----------------|
| OS            | Windows 10 Pro 64bit | 最新update適用済 |
| Ubuntu on WSL | ubuntu 18.04.3 LTS | |
| python        | python 3.6.9 | pyenv, venv利用 |
| tensorflow    | 2.1.0 ~~2.0.0~~ | |

## 前提

* WSL で ubuntu 18.04LTS が動作していること
* 基本的な Linux / python の知識があること

# インストール

## ubuntu on wsl

ログイン後パッケージをアップデート。必要なパッケージをインストール

```
$ sudo apt update 
$ sudo apt upgrade 
$ sudo apt install bzip2 zlib1g-dev libssl-dev readline-common sqlite3
$ sudo apt install libssl-dev libbz2-dev libreadline-dev libsqlite3-dev zlib1g-dev libffi-dev gcc make
```

sqlite3などは念のため。

## pyenv

Githubの pyenv-installer を使う方法でインストール

```
$ curl https://pyenv.run | bash
$ curl -L https://github.com/pyenv/pyenv-installer/raw/master/bin/pyenv-installer | bash
```

~/.bashrc に以下を追加し、source ~/.bashrc などで反映。 username は実際のユーザ名にする


```
export PATH="/home/username/.pyenv/bin:$PATH"
eval "$(pyenv init -)"
eval "$(pyenv virtualenv-init -)"
```

Bash on Windows 起動時に~/.bashrcを参照するように ~/.bash_profile に以下の内容を追加。

```
if [[ -f ~/.bashrc ]] ; then
    . ~/.bashrc
fi
```

## python

準備

```
sudo apt install gcc bzip2 zlib1g-dev libssl-dev readline-common libnss3-tools 
```

コンパイルしてインストール

```
$ pyenv install -list # インストールできるバージョンの確認
$ pyenv install 3.6.9
$ pyenv versions      # インストールバージョンの確認
$ pyenv global 3.6.9  # 全体のバージョン指定、必要に応じて変更
$ python --version    # python のバージョン確認
```

python 3.7.5 だと Tensolflow のインストールに失敗したので、3.6系の最新である 3.6.9 を利用。原因不明。

##  venv仮想環境設定

```
$ cd work  # 任意のディレクトリに移動
$ python -m venv tf2  
$ ls -la ./tf2/bin   # ディレクトリの存在確認
$ source ./tf2/bin/activate  # 有効化、常時使う場合は.bashrcなどに書いておく
```

## TensolFlow本体インストール

GPUを使わない場合

```
$ pip install --upgrade pip  # pipの更新
$ pip install tensorflow
```

以上でインストール完了。tensorflowのアッグレードは次のように行う。

```
$ pip install --upgrade tensorflow
```

## 関連ライブラリ等をインストール

必要に応じて開発環境、Pythonライブラリ群をインストール
まずpipでpyhonライブラリをインストール

```
$ pip install tensorflow_datasets
$ pip install numpy pandas pillow opencv-python
```

## （参考）CUDA経由でGPUを使う場合

以下のような手順が必要らしい（未確認）

```
wget http://developer.download.nvidia.com/compute/machine-learning/repos/ubuntu1804/x86_64/nvidia-machine-learning-repo-ubuntu1804_1.0.0-1_amd64.deb
sudo dpkg -i nvidia-machine-learning-repo-ubuntu1804_1.0.0-1_amd64.deb
sudo apt install ./nvidia-machine-learning-repo-ubuntu1804_1.0.0-1_amd64.deb

sudo apt update
```

apt upgrade で、GPG error: ..... NO_PUBKEY .....が出た場合は下記コマンドを実行。

```
curl -s -L http://developer.download.nvidia.com/compute/machine-learning/repos/ubuntu1804/x86_64/7fa2af80.pub |  sudo apt-key add -
```

# 参考

* https://www.tensorflow.org/install
* https://www.tensorflow.org/tutorials
* https://qiita.com/nuka137/items/6966efeddceb96012819
* https://qiita.com/shoji9x9/items/5110ef7f59c678d07aa0
* https://qiita.com/imsk/items/d14be2a7fcca8a080a8d

## 蛇足

昔、インストールでハマったのがウソみたい。
でもバージョンアップでハマった。開発環境あるある。
AWS 異なるアカウントのセキュリティグループを使う

## AWSアカウントをまたいだ VPC Peering 接続手順
  1. VPCで「ピアリング接続」設定
  2. レンジーが重なる場合、新規VPC作成例

```
VPC CIDR 172.23.0.0/16
セグメントB-1 172.23.252.0/24
セグメントB-2 172.23.253.0/24
```

## セキュリティグループのインバウンドのソースに登録

  * AWSアカウントID/SGのID

```
659692xxxxxx/sg-c73axxxx
```

#参考
VPCで「ピアリング接続」設定
http://yoshidashingo.hatenablog.com/entry/2014/03/28/141024

[VPC Peering] 異なるAWSアカウントでのVPCピア接続を試してみた
https://dev.classmethod.jp/cloud/aws/vpc-peering-different-awsaccount/
僕らは複数行のエラーメッセージやスタックトレースのどこを見ればよいのか

# うわー！

```
{ Error: spawn /node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs ENOENT
    at _errnoException (util.js:1024:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:190:19)
    at onErrorNT (internal/child_process.js:372:16)
    at _combinedTickCallback (internal/process/next_tick.js:138:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)
    at Function.Module.runMain (module.js:678:11)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3
  code: 'ENOENT',
  errno: 'ENOENT',
  syscall: 'spawn /node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs',
  path: '/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs',
  spawnargs: [ '/node_modules/html-pdf/lib/scripts/pdf_a4_portrait.js' ] }
```

# しばらく見つめる

こんなに複数行じゃググれもしない。

# もっと見つめる

良さげな1行を見つける。

心を落ち着かせれば見つかるだろう。

`/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs ENOENT`

# ぐぐーる
![image](https://user-images.githubusercontent.com/13635059/67658683-a2526000-f99d-11e9-9ea8-6182bb66248f.png)

# Github issue や Stackoverflow にたどり着く

なんか好リアクションがついてるコメントとかを探して解決策のコードを見る。

![image](https://user-images.githubusercontent.com/13635059/67658693-abdbc800-f99d-11e9-9d12-043fb1def262.png)

# 以上

頑張れ俺ったち。

![image](https://user-images.githubusercontent.com/13635059/67658741-cca41d80-f99d-11e9-87d1-0b8cf3b1e619.png)


# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
processingでcsv, xml, jsonの読み込み比較

※漢字を含むため、読み込むファイルの文字コードはUTF-8にする必要があります。

#CSVファイルの読み込み
```text:student.csv
name,age
伊藤,20
衛藤,20
加藤,22
木藤,22
工藤,24
後藤,24
```

```java:csv.pde
String name;
int age;

void setup() {
  csv = loadTable("student.csv","header");

  for (TableRow row: csv.rows()) {
    name = row.getString("name");
    age  = row.getInt("age");
    print(name);
    println(age);
  }
}
```
#XMLファイルの読み込み
```xml:student.xml
<?xml version="1.0" encoding="UTF-8"?>
<students>
<student>
  <name>伊藤</name><age>20</age>
</student>
<student>
  <name>衛藤</name><age>20</age>
</student>
<student>
  <name>加藤</name><age>22</age>
</student>
<student>
  <name>木藤</name><age>22</age>
</student>
<student>
  <name>工藤</name><age>24</age>
</student>
<student>
  <name>後藤</name><age>24</age>
</student>
</students>
```

```java:xml.pde
XML xml;
XML[] students, name, age;

void setup() {
  xml = loadXML("student.xml");
  //xml.print();
  students = xml.getChildren("student");
  for (int i = 0; i < students.length; i++) {
    name = students[i].getChildren("name");
    age  = students[i].getChildren("age");

    print( name[0].getContent());
    println(age[0].getContent());
  }
}
```

#JSONファイルの読み込み
```json:student.json
[
{
  "name":"伊藤",
  "age":20
},
{
  "name":"衛藤",
  "age":20
},
{
  "name":"加藤",
  "age":22
},
{
  "name":"木藤",
  "age":22
},
{
  "name":"工藤",
  "age":24
},
{
  "name":"後藤",
  "age":24
}
]
```

```java:json.pde
JSONArray  students;
JSONObject student;
String name;
int age;

void setup() {
  students = loadJSONArray("student.json");
  for (int i = 0; i < students.size(); i++) {
    student = students.getJSONObject(i);
    name = student.getString("name");
    age  = student.getInt("age");
    print(name);
    println(age);
  }
}
```
export default しているものをasを使ってimportしたい


都合でdefaultでexportしている名称と同じ名称の変数などを定義したい場合、
適当な名前で適当に回避していましたがちゃんと対応できました(勉強不足がすぎる)。

---

下記のようなmoduleをimportしたい場合、
import先で同じ名前の変数があったりすると重複してしまい困ったことになりますが

```typescript:importしたいmodule

export default class TodoStore extends VuexModule implements TodoList {}
```

`{ default as XXX }` とするとエイリアスをつけてimportができます。

```typescript
import todoStore from '@/store/todo'
import {default as todo} from '@/store/todo' // todoStoreをtodoというaliasでimport

const todoStore = foo
```
RecyclerView内のTextViewをSelectableにする方法

AndroidでRecyclerView内のTextViewをSelectableにする方法です。
今更な感じもあると思いますが、あまり情報がなかったので。

僕の場合は複数のFragmentでRecycledViewPoolを共有しているため、Fragmentを切り替えて戻ってきた時に、再度選択ができない状態になっていました。
また、RecyclerViewのAdapterに設定する方法もありますが、Groupieを使っているためCustomViewを作る形をとりました。

```SelectableTextView.kt
class SelectableTextView @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null) 
    : AppCompatTextView(context, attrs) {

    init {
        // Selectableにする
        setTextIsSelectable(true)
    }

    override fun onAttachedToWindow() {
        super.onAttachedToWindow()
        // 再度アタッチされた時にSelectableにならないバグの回避
        isEnabled = false
        isEnabled = true
    }
}
```

# 参考
http://y-anz-m.blogspot.com/2012/10/androidtextview.html
http://y-anz-m.blogspot.com/2019/06/recyclerview-textview-textisselectable.html
[Rails]秩序感のあるルーティングを書きたい。

#ルーティングのあれこれ
`scope`,`namespace`,`member`,`collection`,`resources`,`resource`
ルーティングを書く際にゴリゴリに一つずつパスを書いていかずに、これらを使っていきたい。
しかし、いまいちどう使っていいのか分からなかったので、自分なりに例をあげて、目的のルーティングを作成してみた。

#目標とするパス

```
GET    user/publishers/{publisher_id}/books                     # 本一覧
GET     user/publishers/{publisher_id}/books/{book_id}/comments　# コメント一覧
POST	user/publishers/{publisher_id}/books/{book_id}/comments  # コメント投稿
DELETE 	user/publishers/{publisher_id}/books/{book_id}/comments/id  # コメント削除
```
ある出版社の本に対するコメントを見たり、投稿したりするケースについて考える。

#scopeとnamespaceの違い
`namespace`は、**URLもcontroller格納フォルダも**、指定のパスになる。
`scope`は**URLのみ**、指定のパスになる。

参照　
[routeのmoduleとnamespaceとscopeの違い](https://qiita.com/blueplanet/items/522cc8364f6cf189ecad)

#resources,resourceの違い
`resources`がHTTPメソッドのGET、POST、PUT（PATCH）、DELETEでidをとるもの。
`resource`がidを取らないもの。

参照
[Railsのresourcesとresourceついて](https://qiita.com/Atsushi_/items/bb22ce67d14ba1abafc5)


ここまでで、一旦下記を作成。

```
GET     user/publishers/{publisher_id}/books        
```

`books_id`を取ることを考えて、`resources`を用いる。

```rb
namespace 'user' do
  resources :publishers, only: [:index]
    resources :books, only: [:index] 
  end
end
```

```
books GET    user/publishers/:publisher_id/books(.:format) 　books#index                                                      
```

# member,collectionの違い

resourcesでroutingを設定しているとき、**resourcesでは自動で生成されないactionへのroutingを設定するときに使用する。**

memberとcollectionの違いは、生成するroutingに、:idが付くか付かないか。
memberは付いてcollectionは付かない。

参照
[railsのroutes.rbのmemberとcollectionの違いをわかりやすく解説してみた。〜rails初心者から中級者へ〜](https://qiita.com/hirokihello/items/fa82863ab10a3052d2ff)

これをもとに

```
GET     user/publishers/{publisher_id}/books/{book_id}/comments　# コメント一覧
POST	user/publishers/{publisher_id}/books/{book_id}/comment  # コメント投稿
DELETE 	user/publishers/{publisher_id}/books/{book_id}/comment  # コメント削除
```
これらを作成する。books_idを必要とするので、使用するのはmember

```rb
  namespace 'user' do
    resources :publishers, only:[:index] do
      resources :books, only: [:index] do
        member do
          resources :comments, only: [:index, :destroy, :create]       
        end
      end
    end
  end
```

```
comments     GET    user/publishers/:publisher_id/books/:id/comments(.:format)  user/comments#index                                             
comment_book DELETE user/publishers/:publisher_id/books/:id/comment(.:format)  user/comment#destroy                                               
             POST   user/publishers/:publisher_id/books/:id/comment(.:format) user/comment#create                                                
       books GET    user/publishers/:publisher_id/books(.:format)             user/books#index                                                            
```
目標どおりのパス作成完了。
きれいに書けた。


#追記

`member`を使用せずとも`resourses`のネストでかけるとのご指摘を頂いたので、修正します。

```rb
  namespace 'user' do
    resources :publishers, only:[:index] do
      resources :books, only: [:index] do
        resources :comments, only: [:index, :destroy, :create]
      end
    end
  end
```
こちらでも同様のルートがとれますね。
【小ネタ】Rでsource()で実行時に自身のソースファイル名を取得する方法

pythonでいうところの

```python print(__file__) ```
やsys.argv()の0番目みたいに実行している自身のソース名を取得する方法がRにもあるはずと思ったら、単純な関数では用意されてなかったのでやり方備忘メモ


```R

get_this_filename <- function(){
  tmp_fn <- sys.calls()[[1]]
  fn <- as.character(tmp_fn)[2]
  
  # Rscript で実行した場合はsys.calls()で取れないので
  # commandArgs()で拾える情報を利用
  if(is.na(fn)){
    fn <- commandArgs()
    idx_file <- grep(pattern = '--file=', fn)
    fn <- gsub('--file=', '', fn[idx_file])
    fn <- gsub('\\./', '', fn)
    fn <- paste0('~/', basename(getwd()), '/', fn)
  }
  
  return(fn)
}



```

これをGlobal envレベルで実行すればOKでした

※ターミナルからRscriptで実行した場合、自己ファイル名が取れないことがわかったので、if()の処理を追加しました
Vue.jsでOSとサイト内からダークモードを設定する

初期表示では、OS側からのダークモードの設定を行い、サイト内からもダークモードの設定をできるようにしてみる。

# 動作
https://vcss.netlify.com
これの右上のトグルボタン

# OSからのダークモード設定
OSからのダークモードの設定はCSSでメディアクエリを使用する。

```scss
:root {
  --base3: #{$base3};
  --base2: #{$base2};
  --base1: #{$base1};
  --base0: #{$base0};
}
@media (prefers-color-scheme: dark) {
  :root {
    --base3: #{$base03};
    --base2: #{$base02};
    --base1: #{$base01};
    --base0: #{$base00};
  }
}
```

これで、ダークモードだった場合は、@media内の設定を読み込むようになる。

# サイト内からのダークモード設定
サイト内での設定では、トグルボタン等から変更を受けた時に、HTMLタグにクラス等を付与して切り替える。

```scss
:root {
  --base3: #{$base3};
  --base2: #{$base2};
  --base1: #{$base1};
  --base0: #{$base0};
  &[data-theme="dark"] {
    --base3: #{$base03};
    --base2: #{$base02};
    --base1: #{$base01};
    --base0: #{$base00};
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --base3: #{$base03};
    --base2: #{$base02};
    --base1: #{$base01};
    --base0: #{$base00};
    &[data-theme="light"] {
      --base3: #{$base3};
      --base2: #{$base2};
      --base1: #{$base1};
      --base0: #{$base0};
    }
  }
}
```

データ属性が付与されたら、既存の変数を上書きする。

```vuejs

<template>
  <div>
    <input type="checkbox" v-model="checked" @change="setScheme"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    };
  },
  created() {
    // ローカルストレージチェック
    if (localStorage.colorThema === "light") {
      this.checked = true;
    } else if (localStorage.colorThema === "dark") {
      document.documentElement.setAttribute("data-theme", "dark");            
    } else if (!window.matchMedia("(prefers-color-scheme: dark)").matches) {
      // darkモードではない時トグルボタンを動かす
      this.checked = true;
    }
  },
  methods: {
    setScheme: function () {
      // ローカルストレージに保存
      localStorage.colorThema = this.checked ? "light" : "dark";
    }
  },
  watch: {
    checked: function(check) {
      // HTMLタグのdata属性に設定
      if (check) {
        document.documentElement.setAttribute("data-theme", "light");
      } else {
        document.documentElement.setAttribute("data-theme", "dark");
      }
    }
  }
};
</script>
```

checkboxに合わせてHTMLタグにdata属性を加えたりローカルストレージに入れたり。

# 課題
data属性にカラースキーマが設定されている状態で、OSの設定からカラースキームを変更されても表示は変更されなくなってしまう:rolling_eyes:
vuex-module-decoratorsでのdecorator関連のエラー

vuex-module-decoratorsを使ったNuxtとtypeScriptのプロジェクトで、
VSCodeで下記のようなエラーが出ました。

```
Experimental support for decorators is a feature 
that is subject to change in a future release.
(略)
```

調べてみると、下記の対応でスッとエラーが表示されなくなりました。

> In VSCode, Go to File => Preferences => Settings (or Control+comma) and it will open the User Settings file. Add "javascript.implicitProjectConfig.experimentalDecorators": true to the file and it should fix it. It did for me.

https://github.com/Microsoft/vscode/issues/45071#issuecomment-371335725

勉強不足でしたが、javascriptでも将来的にdecoratorが採用される可能性が割とあるのですね〜。
なので、vuex-module-decorators使ってるからとかではなく、decoratorを使っていて、まだ正式には対応できてないですよ〜それを許可しますか〜みたいなお話だったんですね。
csvファイルで特定カラムが偶数か奇数のデータだけを抽出する方法

csvファイルで出力されたuser_id, item_idのリストで、user_idの末尾が偶数or奇数のデータのみを抽出する方法のメモ。
`awk`コマンドを利用しているのでterminal上で実行できます。

# サンプルデータ
ヘッダー有り無し、ダブルクォート(")有り無しのサンプルを使います。
## ヘッダーあり
```
$ cat test_header.csv
user_id,item_id
100001,001
100002,003
100003,002
100004,001
100005,003
100006,001
100007,003
100008,002
100009,002
100010,003
```

## ヘッダーなし
```
$ cat test_non_header.csv
100001,001
100002,003
100003,002
100004,001
100005,003
100006,001
100007,003
100008,002
100009,002
100010,003
```

## ダブルクオートに囲まれている
```
$ cat test_non_header_quote.csv
"100001","001"
"100002","003"
"100003","002"
"100004","001"
"100005","003"
"100006","001"
"100007","003"
"100008","002"
"100009","002"
"100010","003"
```

# データ抽出
対象ファイルが存在するディレクトリで作業します。

## ヘッダーあり
```
$ cat test_header.csv | awk '
	BEGIN {FS=",";OFS=","}
	{
		if(NR == 1){print $0}
		else if($1 % 2 == 1 && NR > 1){
			print $0
		}
	}
' >> test_header_odd.csv
```

## ヘッダーなし
```
$ cat test_non_header.csv | awk '
	BEGIN {FS=",";OFS=","}
	{
		if($1 % 2 == 1){
			print $0
		}
	}
' >> test_non_header_odd.csv
```

## ダブルクオートに囲まれている
```
$ cat test_non_header_quote.csv | awk '
	BEGIN {FS=",";OFS=","}
	{
		if(substr($1,length($1)-1,1) % 2 == 1){
			print $0
		}
	}
' >> test_non_header_quote_odd.csv
```
AWS SessionManager で SSH だけを有効にするIAMポリシー

SessionManagerは踏み台不要でサーバに入り、 CLI で操作できる便利なツールですよね。
[SSH不要時代がくるか!?AWS Systems Manager セッションマネージャーがリリースされました!](https://dev.classmethod.jp/cloud/aws/ssm-session-manager-release/)

しかしながら、以下のような辛みがありました。

- パスワードなしで`sudo`できる`ssm-user`でしかログインできない
- ブラウザからしか入れないので、 switch role したらセッション切れる

2つめの辛みは、SSH/SCP が使えるようになったことで解消されました！
[AWS Systems Manager セッションマネージャーでSSH・SCPできるようになりました](https://dev.classmethod.jp/cloud/aws/session-manager-launches-tunneling-support-for-ssh-and-scp/)

そうした時に、1つめの辛みである `ssm-user` でのログインを禁止したくなったので、IAM ポリシーを書いてみました。以下に示します。
キモは2つ。

- `ssm:SessionDocumentAccessCheck` という Condition
- `SSM-SessionManagerRunShell` の `ssm:GetDocument` を `Deny`

公式ドキュメントを見てこの Condition を見つけたので、あとはドキュメントを読んでみてください。
※例示されているポリシーは GetDocument の Statement に `ssm:SessionDocumentAccessCheck` の Condition が記述されていますが、これは間違いだと思います。マネジメントコンソールのビジュアルエディターで警告出たので。
https://docs.aws.amazon.com/ja_jp/systems-manager/latest/userguide/getting-started-restrict-access-quickstart.html

```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "ssm:StartSession",
            "Resource": [
                "arn:aws:ssm:*:*:document/AWS-StartSSHSession",
                "arn:aws:ec2:*:*:instance/*"
            ],
            "Condition": {
                "BoolIfExists": {
                    "ssm:SessionDocumentAccessCheck": "true"
                }
            }
        },
        {
            "Effect": "Deny",
            "Action": "ssm:GetDocument",
            "Resource": "arn:aws:ssm:*:*:document/SSM-SessionManagerRunShell"
        },
        {
            "Effect": "Allow",
            "Action": [
                "ssm:GetConnectionStatus",
                "ec2:DescribeInstances",
                "ssm:DescribeSessions",
                "ssm:DescribeInstanceProperties"
            ],
            "Resource": "*"
        },
        {
            "Effect": "Allow",
            "Action": "ssm:TerminateSession",
            "Resource": "arn:aws:ssm:*:*:session/*"
        }
    ]
}

```

ちなみに、どうやらセッションマネージャー周りのポリシー変更は、変更後すぐは反映されないようです...
一度ログアウト/ログインを実施すると、すぐ反映されます（経験談）。
【ionic】既存プロジェクトにサイドメニューを追加したときにauto-hideを付けた方がいいよという話

#はじめに
どうもzizという開発者チームの田中です。
先日、ionicでつくった既存プロジェクトにサイドメニューを追加した際に、auto-hideをつけ忘れてとてもめんどくさい思いをしたので、繰り返さないように記事を書こうと思います。
既存プロジェクトにサイドメニューを追加する方法を見たい方や、動画で見たい方は[zizのブログ](https://ziz-engineer.com/【ionic4】サイドメニュー付きプロジェクトの作成と/)まで

#auto-hideとは？
サイドメニューから別のページに移動した際に、自動で閉じるかどうかの設定ができます。
auto-hide=trueだと自動で閉じてくれます。
ちなみに、auto-hide=trueの追加位置は__app.component.htmlのion-menu-toggle内__

↓auto-hide=false
履歴ページに移動しても自動で閉じてくれない
![before_gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390321/0140b67c-dd17-45d8-cac7-c653edd7ea04.gif)

↓auto-hide=true
![after_gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390321/95363d73-b80e-e022-fd72-118ee77b3151.gif)




#ソース
上のgifのサイドメニューのソース

``` html:app.component.html
<ion-app>
  <ion-menu menuId="first" type="overlay" side="start">
        <ion-header>
          <ion-toolbar>
            <ion-title>メニュー</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
          <ion-list>
            <ion-menu-toggle auto-hide = "true">
              <ion-item routerLink="/setting" detail="true">目標設定</ion-item>
              <ion-item routerLink="/archive" detail="true">履歴</ion-item>
              <ion-item href="https://ziz-engineer.com/about-diet">プライバシーポリシー</ion-item>
              <ion-item href="https://ziz-engineer.com/contact/">問い合わせ</ion-item>
            </ion-menu-toggle>
          </ion-list>
        </ion-content>
      </ion-menu>
    <ion-router-outlet id="first" main></ion-router-outlet>
</ion-app>
```
magit 2.23 の操作メモ

[magit 2.7の操作メモ](https://qiita.com/eggc/items/948f8df70069334e8296) が古くなってきた & 挙動が変わっているので最新版はこの記事に移行する。

# git log

- `M-x magit-log-buffer-file`
  - 現在開いているバッファの git log を見る。

# git diff
- `M-x magit-diff-unstaged`
  - stage されていない差分を表示する。
  - 特に設定していないなら magit-status に表示される。
  - オプション -b を与えると空白の差分を無視する。magit-status を開いているときなら d -b u
  - デフォルトでは行の diff しかわからないが続けて `D` `t` を叩くと単語の diff を見る事ができる。
  - 設定ファイルで `(setq magit-diff-refine-hunk t)` としておくと hunk の差分の中でも単語に差分がある箇所を強くハイライトする。

# git remote

- `M-x magit-remote-add` 
  - 続けてリポジトリ名、URL を与えるとリモートリポジトリを追加できる。
  - magit-status を開いているときなら M a だけでよい。

# git fetch

- `M-x magit-fetch-other` 
  - 続けてリポジトリ、ブランチ名を与えると一個だけブランチを取得できる。
  - magit-status を開いているときなら f o だけでよい。
  - magit-refs を開いているときリポジトリにカーソルがあたっているならリポジトリ名を省略できる。

# git blame 

- `M-x magit-blame-addition`
  - 以前の magit-blame と同じように振る舞う。ファイル編集は不可。
  - 気になる行にカーソルを当てて Enter を押すとコミットの詳細を見ることができる。
  - `M-w` でハッシュ値をコピーする。
- `M-x magit-blame-echo`
  - 現在開いているバッファを水平線で区切る。
  - 水平線の下にカーソルを持っていくと、その箇所のコミットメッセージをエコーエリアに表示する。
  - magit-blame-addition と違って、そのままファイルが編集可能。
  - ただし `M-w` は素のままなのでハッシュ値が取りたければ `M-x magit-blame-copy-hash` のように実行する必要がある。

# git cherry-pick 

- `M-x magit-cherry-pick`
  - 続いて A を押すと cherry-pick するブランチを選択する。
  - magit-log でコミットを範囲選択して `A A` するやり方もある。

# git reflog

- `M-x magit-reflog-current`
  - 続い任意のコミットへカーソルを当てて `X s RET` でブランチの HEAD をリセットできる。

# git patch

- `M-x magit-patch`
  - 続いて `a` `a` を押すとファイルを選んでパッチを適用できる。
  - magit-stauts では `W a a`
Gnu Bisonのデバッグ/トレースの呼び出し方

# 概要

bisonを利用したオープンソースの中で、構文解析の部分で何が問題なのかわからない問題にぶち当たり、bisonのデバッグ機能を利用しようとした際につまったので、メモとして残します。

# bisonのオプション

デバッグしようとbisonのオプションを確認したところそれっぽいものがありました。

```
  -t, --debug                      instrument the parser for tracing
                                   same as '-Dparse.trace'
      --locations                  enable location support

```

とりあえずbisonのコンパイルオプションに`-t`をつけて実施。

生成されたソースに`YYDEBUG`が定義されたので、問題なさそうに見えた。

```c:parser.c
/* Debug traces.  */
#ifndef YYDEBUG
# define YYDEBUG 1
#endif
#if YYDEBUG
extern int yydebug;
#endif
```

# でも動かない

これで大丈夫かと思い、実行してみると詳細ログはまったくでてこなかった。

そのため生成されたコードを読んでみたところ、`yydebug`の値でコントロールされてそうな部分があった。

```
do {                                                                      \
  if (yydebug)                                                            \
    {                                                                     \
      YYFPRINTF (stderr, "%s ", Title);                                   \
      yy_symbol_print (stderr,                                            \
                  Type, Value); \
      YYFPRINTF (stderr, "\n");                                           \
    }                                                                     \
} while (0)
```

しかし、肝心の`yydebug`には生成されたparser.cで値を設定しているように見えない。

このため、とりあえず、`yyparse`を呼び出しているメイン部分に暫定で`yydebug = 1;`を設定したところ、無事に詳細ログが出てきた。

```
Starting parse
Entering state 0
Reducing stack by rule 1 (line 122):
-> $$ = nterm sqlstate_list ()
Stack now 0
...
```

バージョンによる違いなのか、この辺の設定に関するドキュメントを見つけられなかったため、メモ。
自分の環境のバージョンは`bison (GNU Bison) 3.0.4`だった。

- 追伸

ちゃんとGnuのページにいったら[マニュアル](https://www.gnu.org/software/bison/manual/bison.pdf)がおいてあって、サンプルコードが載ってました。
公式を確認するのが大事ですね。

# 参考文献

- [Gnu Bison](https://www.gnu.org/software/bison/)
[初心者向け]herokuにpushするときに失敗したら

# はじめに
最近ようやくGitやHerokuを使い始めて、色々と詰まった点について自分用のまとめとして、後私と同じような初心者の方があれ？ってなった時の対処方法として見てもらえればと思って投稿します。


# git push heroku masterでエラーが出る
もう、何だよって思いますよね。
例えば**"Could not read from remote repository"**とか出てきます。


ここでは色々な対処法をとりあえず乗っけておきます。



## リポジトリの追加
先ほどの**"Could not read from remote repository"**ですが、
その前に**"'heroku' does not appear to be a git repository"**
とか書かれていることがあるかと思います。

そういうときはリポジトリを追加してあげましょう。

```
$ git remote add heroku 追加したいリポジトリURL
# herokuで言えばHeroku Git URLが追加したいリポジトリURLになります。
```
Herokuのアプリケーション画面のSettingsから確認できます。

![heroku_git_url.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350776/411db44d-c364-943f-1ae8-982f66308032.png)


ちなみにリポジトリ一覧のコマンドは以下。
追加できているかを確認してみて下さい。

```
$ git remote
```

## 公開鍵の作成
ローカルで開発してて、サーバーは初心者って方は公開鍵とか聞くとちょっと嫌になるレベルですよね。
私は完全独学プログラマーなのでこの辺りとか最初マジで意味わからなかったです。← ~~そのくらい理解しろよ~~

以下のようなエラーメッセージ
**"Please make sure you have the correct access rights　
and the repository exists."**が出てきた場合は以下のコマンドで公開鍵を作成してあげて下さい。

```
$ heroku keys:add
```

これで大体は解決すると思います。

## その他検索候補
あとはとりあえず検索した上で、状況に応じて使用してほしいコマンドです。

```
$ heroku auth:token
```
認証に失敗したときにトークンを発行します。
これで発行された文字列をコピーし、pushを行います。

**Usernameは入れずにエンター**
**Passwordに先ほどのトークンをペースト**

これでいける場合もあります。


# 最後に

とりあえず私が詰まって解決策ググりまくった過程をだらだら記述した感じになりますが、これで問題を解決できる人が一人でもいればうれしいです。
また違う問題見つかったらちょっとずつ追記していこうと思います。
#Ruby で特定の桁数の、ランダムな数字を生成する例。ゼロ埋めバージョン。

8桁の場合

```rb
sprintf('%08d', rand(99999999))
=> "15419306"
sprintf('%08d', rand(99999999))
=> "06627530"
sprintf('%08d', rand(99999999))
=> "75424850"
```

別解

```rb
8.times.map { rand(9) }.join
=> "08628150"
8.times.map { rand(9) }.join
=> "88810560"
8.times.map { rand(9) }.join
=> "31853611"

```

# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
自分用メモ: バーチャルマシン

## はじめに
これはコンピュータシステムの理論と実装の第7章に関してのメモです

## [stackマシン](https://ja.wikipedia.org/wiki/スタック#スタックマシン)
wiki引用

> 機械語命令の体系がスタック指向プログラミング言語に類似している、すなわち、命令のオペランドがスタックであるマシンをスタックマシンと言う。最も有名なものとしてバロース B5000がある（B5000は、高水準言語（ALGOL）のサポートを目的として、前述のコールスタックもアーキテクチャでサポートしているが、コールスタックをアーキテクチャでサポートしている、という意味では「スタックマシン」の語は使わない）。

> またx86等でも、スタックポインタ間接参照によってスタックマシンのように使うことはできるが、普通あまりスタックマシンとはしない。

> 多くの仮想機械もスタックマシンであり、例えばp-コードマシンやJava仮想マシンなどがある。x87の命令もスタックマシン的である。

> これに対し、オペランドがレジスタのマシンをレジスタマシンと言う。多くの実機がレジスタマシンであるため実機に対してこの語が使われることは少ない。仮想機械ではLua 5の仮想機械がレジスタマシンである。

要は、stackマシンを使った命令モデルがstackマシンってことですね。

### stackベース算術例
これは疑似コードである。 この例は**コンピュータシステムの理論と実装の141ページ目**を参考にしている

```
(x<7) or (y=8)
```

この命令はまず、x<7が評価され、次にy=8が評価され、それぞれの結果をorで計算する命令である

stackベースに翻訳するとこうなる

```
push x
push 7
lt
push y
push 8
eq
or
```

stackに2つ積んで、ltの結果を積んで、yと8を積んで、eqで積んで、そうするとltとeqの値2つがstackの上にあるのでorでそれを評価する。
stackマシンめっちゃシンプルでわかりやすいですね。

## 最後に
もうちょっと関数とか色々書きたいけど、まぁこの本読めば思い出すと思うのでこれぐらいのメモにする
C#でのプログラム初学者向けのチュートリアルを始めます

もうすぐ、義務教育でもプログラムが始まるんだよ!

プログラム言語って、Ｃ＃だけじゃないけど💛
プログラムを始めるには、一番いいと思うよ

Ｃ＃たんの生みの親の岩さんも言ってるし
https://ufcpp.net/study/csharp/getstarted.html

まあ、色々なプログラム言語のことは、丸さんに聞いてね。
https://ncode.syosetu.com/n1081fh/

第０章 C#でプログラムをする前準備(https://qiita.com/CsharpTan/items/3db4373b924b7d1ab9ec)