OmniAICreator/Qiita-1.07M huggingface dataset:
じゃんけんゲームを作ってみる！ | 初めてのプログラミング実践 ①

##この記事の対象となる方
プログラミングを始めたばかりという方を対象にしています。
この記事では簡単な文法を理解すること、自身で使いたい文法を検索できる様になることを目的にしてます。

##この記事のゴール
この記事内で紹介するメソッドと制御構造を使えば、じゃんけんゲームを作ることができます。
じゃんけんゲームのプログラムの答えは載せていませんが、ぜひご自身で作ってみてください。

##メソッドとは

こちらの記事を参考にさせていただきました。

https://www.sejuku.net/blog/12733

Rubyには多くの便利なメソッドが標準で用意されています。またプログラミングに慣れてくれば、自分自身でメソッドを作ることができます。

今回はRubyに標準で用意されているメソッドの一部を紹介します。

###rand
- rand(n)は 0~n-1 までの数値で無作為に一つを返します。
- rand(1..n)の様にすると、1からnまでの整数をランダムで返します。

```ruby:Ruby
1 puts rand(3)
2 puts rand(1..3)
3
```

以下、私のMacでの出力結果です。

```terminal:ターミナル
myname@MacBook-Pro Desktop % ruby rand.rb
0
1
myname@MacBook-Pro Desktop % ruby rand.rb
2
2
myname@MacBook-Pro Desktop % ruby rand.rb
1
3
```

出力結果の１行目はputs rand(3)の結果、
２行目はputs rand(1..3)の結果が出力されていますね。

###gets
- gets()は外部からの入力を待ちます。

```ruby:Ruby
1 puts "what is your name? Please type below." 
2 a = gets
3 puts "your name is #{a}"
4
```

以下、私のMacでの出力結果です。

```terminal:ターミナル
myname@MacBook-Pro Desktop % ruby rand.rb
what is your name? Please type below.
__ #ここにカーソルが現れます。
```

getsを書いておくことで、外部入力を求められていますね。（#ここにカーソルが現れます。のところ）

```terminal:ターミナル
myname@MacBook-Pro Desktop % ruby rand.rb
what is your name? Please type below.
Shingo #名前などを入力してみると
your name is Shingo #出力結果に先程の入力結果が表示されました。
```

##制御構文
こちらの記事を参考にさせていただきました。

http://www.tohoho-web.com/ruby/control.html

制御構文とは「条件分岐」とか「繰り返し」の処理を行う式のことです。
この記事のゴールはじゃんけんゲームを作ることと先に書きましたが、つまり、自分は「グー」を出したときに、相手が「パー」なら、何かしらの文章を表示させて...とか考えられるわけです。

###if..elsif..else..end
- もし～ならば...という条件を設定できます。
- if xxx （もしxxxという条件が正しいなら）
- elsif yyy （xxxという条件には当てはまらないけど、yyyという条件が正しいなら）
- else （ifのxxxにもelsifのyyyにも当てはまらないなら）

**＼ワンポイント／**
Rubyで「aが0の時（aが0と等しい時）」を表すためには「a == 0」を書きます。
「==」が両辺が等しいという意味になります。

If文は以下実際のコードと結果を見て頂く方が理解が進むと思います。

```ruby:Ruby
a = rand(3)

if a == 0
  puts a
  puts 'Good Luck!'
elsif a == 1
  puts a
  puts 'So so'
else
  puts a
  puts 'Bad Luck' 
end
```

私のMacでは以下のように出力されました。

```terminal:ターミナル
myname@MacBook-Pro Desktop % ruby if.rb
0 # puts aの結果
Good Luck! # puts '文字列'
myname@MacBook-Pro Desktop % ruby if.rb
0
Good Luck!
myname@MacBook-Pro Desktop % ruby if.rb
2
Bad Luck
myname@MacBook-Pro Desktop % ruby if.rb
1
So so
myname@MacBook-Pro Desktop % ruby if.rb
0
Good Luck!
myname@MacBook-Pro Desktop % ruby if.rb
2
Bad Luck
myname@MacBook-Pro Desktop % ruby if.rb
2
Bad Luck
```

##まとめ
最低限ですが以下の様なプログラムを作ってみました（janken.rb）。
勝ち負け判定もできると楽しいかもしれないですね！

```terminal:ターミナル
myname@MacBook-Pro Desktop % ruby janken.rb
じゃーんけん... 0:グー 1:チョキ 2:パー
0 # 僕が0を入力した結果...
あなたの手: グー
相手の手: パー
```


rand、getsそしてif...の構文を使えば、じゃんけんゲームのロジックを作ることが可能です。
ぜひ試してみてください！
React UIフレームワークのトレンド比較

# 概要

React.jsのUIフレームワークを選定するにあたり、
以下の記事を参考に、いくつかのUIフレームワークのGitHub Starの数とNPMダウンロード数を比較しました。

https://themeselection.com/best-reactjs-ui-frameworks/

# Github Starの数

|Name|Github Star|URL|
|:---|:---|:---|
|MATERIAL-UI|66k|https://material-ui.com/|
|React Bootstrap|19.1k|https://react-bootstrap.github.io/|
|Blueprint|17.5k|https://blueprintjs.com/|
|Chakra UI|16.1k|https://chakra-ui.com/|
|Semantic UI React|12.1k|https://react.semantic-ui.com/|
|EVERGREEN|10.6k|https://evergreen.segment.com/|
|Reactstrap|9.9k|https://reactstrap.github.io/|
|REBASS|7.2k|https://rebassjs.org/|
|Grommet|7.1k|https://v2.grommet.io/|
|React Suite|5.3k|https://rsuitejs.com/|
|Ant Design|4.8k|https://ant.design/|

2021.03.17時点の集計結果

# NPMダウンロード数

![スクリーンショット 2021-03-17 13.47.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/802246/b7f796c5-ab51-79a9-e814-02c38802edbb.png)



https://www.npmtrends.com/@material-ui/core-vs-react-bootstrap-vs-semantic-ui-react-vs-reactstrap-vs-antd-vs-rebass-vs-evergreen-ui


# 参考


https://themeselection.com/best-reactjs-ui-frameworks/

https://www.kindacode.com/article/most-popular-react-component-ui-libraries/

https://www.codeinwp.com/blog/react-ui-component-libraries-frameworks/
SideCar 接続できない原因　解決方法

##方法

1, iPadを有線でMacに接続
2, Mac再起動，iPad再起動
3, 再起動後　有線外す
4, メニューバーからディスプレイのiPadを選択

これで接続できた

できなかったら
AppleIDが同じかを確かめもう一度再起動

追記（5月10日AM）
有線を外して接続が切れた場合
Airdropを受信しないに設定している可能性がある
もしくはbluetoothをオンにする

接続が完了後オフにしても動作継続できた
Vuexで連想配列, Hashを更新するときにVueコンポーネントでも動的に取得する方法。

## 連想配列の変更して、それを監視してもらうための方法の$set

Vue, Nuxt の初心者が躓きやすいポイントの一つに配列、連想配列のreactiveがあります。
https://jp.vuejs.org/v2/guide/reactivity.html#%E5%A4%89%E6%9B%B4%E6%A4%9C%E5%87%BA%E3%81%AE%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A0%85

連想配列を更新してもhtmlが更新されない！

という問題ですね。

```javascript

$set(object, key, value)
```
これを使えばうまく更新されます。

## Vuexに保存している連想配列は？

Vuexに連想配列をおいてgetterで呼び出しているときも、$setを使わないと同期して更新されないんです。
VuexはVueの上で動いているので、同じような動作をします。

## Vuex内のmutationで$setを使うには？

公式ドキュメントにしれっと書いてます。
https://jp.vuejs.org/v2/guide/reactivity.html#%E5%A4%89%E6%9B%B4%E6%A4%9C%E5%87%BA%E3%81%AE%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A0%85

```javascript
import Vue from 'vue'

Vue.set(object, key, value)
```

だいぶ省略しているので、よしなにやってください。
こんな感じでできます。
TD-JS-SDK（Treasure data）の実装の検証方法

# Treasure data の TD-JS-SDK を実装する際の実装した値の確認方法
初回の実装時に困ったのでめもしておく。
２種類方法があるが確認したい値によって判断する。

## リクエストの確認方法
1. chrome の Dev tool を立ち上げ、Network から Treasure data で定義したテーブル名でフィルタする。
2. フィルタされたリクエストを選択し、Query String Parameters のdata をコピーする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546029/ddea549d-781b-fa66-564d-b5671b2ca0b7.png)
2. chrome の Dev tool を立ち上げ、console で data 部分をパースする。

```
JSON.parse(atob(""));
```
4. パースされた値を確認することができるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546029/f57eed4e-dccc-480d-e8a1-a0dc1e120bf3.png)


## Dev tool のconsoleから確認する方法
chrome の Dev tool を立ち上げ、console から下記をたたく

```
td.client
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546029/2c12e9c8-a116-6489-83dd-f7969b404c6b.png)
Rails css(scss) 読み込みディレクトリ

_今回は、railsでcssファイルの設定を読み込みディレクト構成について記述していきます。
私は何も考えずcssディレクトリにファイル作成して適当に記述していたのですが
量が多くなるにつれなんのファイルがどこに有るのか全然わからなくて泣きました(T . T)
なので今回の記事を書く事に決めました。_
#Railsディレクトリ構成
```console
app/
　├ assets/
　│　└ stylesheets/
　│　　　　└ application.css
　│
```
```application.css
 *= require_self
 *= require_tree .
```
##*=require_tree .
app配下のassetsディレクトリ配下のstylesheetsのディレクトリ配下にapplication.cssが格納されています。
__application.css__ファイルには、__「=require_tree .」__の記載が初期で記述してあります。
この__「=require_tree .」__の__「.」__の部分は、カレントディレクトリつまり今自分がいるディレクトリを指します。
次に__「=require_tree」__この部分は、現在のディレクトリ以下のCSSファイルをアルファベット順に全て読み込んでねっという命令文になっています。
##*= require_self
次に__「*= require_self」__この命令文は自分自身を読み込んでねっと命令しています。
つまり自分自身とは、__application.css__ファイルになります。
##読み込みの順番
以上のことから、CSSファイルは、__application.css__ファイルと同一ディレクトリ、同一ディレクトリ以下にある
CSSファイルを読み込んでから、自分自信である__application.css__ファイルを読み込んでねっと記述してあります。

#読み込みの注意点
初期設定のままだとアルファベット順にCSSファイルを読み込んでいきます。
なので、CSSファイルをコンパイルする際に、変数などを切り出したCSSファイルより先に、変数を呼び出しているCSSファイルを記述すると変数の呼び出すができないためコンパイルエラーがおきます。

```application.css
 *= require_tree .
 *= require_self
 @import "hoge"; #変数の呼び出し元
 @import "colors"; #各要素のカラーを変数化したファイル
```
#回避するには？
require_treeを削除して、全てのscssファイルに対して@importの記述を行う
VirtualBox上のRedmineでGuest Additionsがインストール出来ないケースの対処方法

# 概要

すでに知っているよー。
という方は大勢いらっしゃるかと思いますが、自分の備忘録として残しておきます。

## やりたかったこと

EC2上に構築しているRedmineをローカルPCで動かしたかった（色々な事情で）

## 調査

ググったところ、Redmineを簡単に構築する方法として、
VirtualBox+Bitnami RedmineのOVAファイルが簡単そう。

## つまづいたところ

構築は[Redmine.JP Blog](http://blog.redmine.jp/articles/way-to-try-redmine/)の方法で簡単に構築は出来たため、
早速、移行元ファイルをVirtualBox上へコピーしようと
共有フォルダ設定を行おうとしたところ・・・
Guest Additionsのインストール時にエラーとなってしまう。。。。

## 解決方法

コピーする手段としては、共有フォルダがダメな場合は、SCPなどがよぎっったのですが、
頑張って、Guest Additionsのインストールエラーを解消してみてみます。

## 実施手順

### CDのマウント

VirtualBoxの設定メニューから「ストレージ」→
左の光学ドライブの追加から「VBoxGuestAdditions.iso」を選択する
以下のコマンドを実行

```
$ sudo mkdir /media/cdrom
$ sudo mount -t iso9660 /dev/cdrom /media/cdrom/
$ cd /media/cdrom
$ sudo ./VBoxLinuxAdditions.run
```

普段はほとんどLinuxに触れていないので、
以下のエラーメッセージからどのコマンドを実行すればいいのか？？？と
エラーを調べるのに少し時間が掛かりました。

|![virtualbox_redmine_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641560/0d5f317b-3fe1-cefb-3323-a74b457d4e46.png)|
|:-:|

> Kernel headers not found for target kernel

上記のメッセージからカーネルヘッダをインストールすればいいのかな？と
カーネルヘッダのインストール方法を調べました。
[How to Install Kernel Headers in Ubuntu and Debian](https://www.tecmint.com/install-kernel-headers-in-ubuntu-and-debian/)

```
$ sudo apt-get install linux-headers-$(uname -r)
```

|![virtualbox_redmine_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641560/35df7e45-5e9b-4604-76b0-86b63c04d006.png)|
|:-:|

|![virtualbox_redmine_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641560/ed124b01-819c-141f-3ace-c3b6513e3c51.png)|
|:-:|

```
$ sudo ./VBoxLinuxAdditions.run
```

今度は（多分）エラーなく実行されました。

|![virtualbox_redmine_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641560/3eeec9ea-524f-cb49-74b8-dac968509c49.png)|
|:-:|

あとはゲストOS側にマウントしたいフォルダを作成し、共有フォルダ設定から
共有したいホストOS側のフォルダ、ゲストOS側のフォルダを設定してからOSを再起動してみます。

```
$ sudo mkdir /mnt/work
$ sudo reboot
```

再起動後、無事にマウント出来て、ホストOS側のフォルダが見えるようになりました。

|![virtualbox_redmine_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641560/c9871555-c827-6ba8-dce2-0ebd6ffb3f10.png)|
|:-:|

誰かのご参考になれば幸いです。
ペアプロをやってみて

## ペアプロとは
1台のPCを2人で利用してプログラミングする手法です。「ドライバー（コーディングする人）」と「ナビゲーター（指示を出す人）」の役割に分担して、業務を担当します。

・ドライバー
コーディングをメインでする人です。
自分よりもレベルが高いナビゲーターの指示に従ってコーディングをすることによって、初心者でも質の良いコーディングをすることができます。

・ナビゲーター
開発内容に応じて、実装するに当たり複数の実装方法があるなかで、適切な実装方法を具体的に想定し、ドライバーに指示を出します。

## 今回のペアプロ方法
今回は、自分とチームリーダーでペアプロを行いました。
主に自分がドライバー、チームリーダーがナビケーターの役割で、1日に約1時間を約1ヶ月ちょっと（合計24時間くらい）。

今回作ったざっくりとしたものは、
ファイル一覧画面>ファイル修正画面>修正確認画面>完了画面
のよくある、「一覧画面」「修正画面」「確認画面」「完了画面」の4つの画面です。

スムーズに実装できる部分はドライバーだった自分がもくもくとコーディングをし、効率化できる部分、間違っている部分があれば随時ナビゲーターから指摘をもらう形が多かったです。

今回はVScodeで実装したため、live shereをし、わからなくなったら途中までナビゲーターが直接書き、イメージがついたらドライバーもそこに書くスタイルでした。
設定方法：https://qiita.com/Yami_37/items/bfd1c5f8ed8f746b5634

## 感想（よかったこと）
・コーディングしながらの議論できたことがよかった。
　→処理時間の短縮だったり、既存の他の似たような機能部分の良いところ悪いところをに気づいたり、どちらでも良い部分についてなぜそっちを選んだのかを議論できた。
・レビューの手間が省けた。
・24時間で画面が完成した→4人日くらいで実装した機能と考えると、とても効率よくできた。
・名前の付け方がスマートなものがつけられた
・デバッグを効率よくできた（https://www.php.net/manual/ja/language.constants.predefined.php を知らなかった、ログを仕掛ける場所等）
・ログファイルの確認を普段はテスト中に確認することが多かったが、ペアプロ中はこまめにログ確認ができた
・コーディング以外の知識の共有があった
　→こういうコマンドがあるんだ！とか、調査方法をついでに教えてもらうことができた
・ペアプロ中にあった、別の問い合わせやトラブル対応を通話しながら優先順位を決め、対応もできた
・普段チームリーダーの時間を確保するのが難しいので、実装以外の質問などしやすかった
・はじめは緊張していたが、だんだん慣れていき、コミュニケーションが取りやすくなった。
【Python】IBM Watson Speech to Text API を使ってみた（初心者向け）

# はじめに
こんにちは、Maiです。
ボランティアで細々と米国本社のシニアマネジメントの翻訳をするという活動を行っています。
Blogは文字なので、翻訳するのは（時間をかければ）まあできるのですが、動画の翻訳となると、
<b>①字幕を書き起こし（動画にはついてるものとそうでないものがある）、
②翻訳し、
③必要なら日本語の字幕をつける</b>、
という手順があって結構しんどいので、どうにか楽をしたいなと思うようになりました。
~~字幕がある動画はTranscriptionを作ってくれたらいいんだけど、そんなに親切じゃない。~~

そこで、弊社Watsonの「Speech to Text」という音声認識のAPIを使用して、文字起こしをしてみることにしました。


# 私のスペック、PCのスペック
Me: 開発経験が少ない悲しき自称エンジニア、pythonは勉強中。
MacOS: Catalina
Python: Python 3.8.0


# 前提
Pythonインストール済
IBM Cloudアカウント作成済


# まずはライブラリをインストールしましょ
```
pip install --upgrade "ibm-watson>=5.1.0"
```

# APIとURLをメモしたらLet's try!
```python:speech2text.py
import sys
import json
from os.path import join, dirname
from ibm_watson import SpeechToTextV1
from ibm_cloud_sdk_core.authenticators import IAMAuthenticator

# 認識する音声ファイルは引数
input_file = sys.argv[1]

# 要変更
apikey = {自分のapi}
url = {自分のurl}

authenticator = IAMAuthenticator(apikey)
speech_to_text = SpeechToTextV1(
    authenticator=authenticator
)

speech_to_text.set_service_url(url)

with open(join(dirname(__file__), './.', input_file), 'rb') as audio_file:
    speech_recognition_results = speech_to_text.recognize(
        audio=audio_file,
        content_type='audio/wav', #オーディオタイプによって変更の必要あり
        word_alternatives_threshold=0.9
    ).get_result()

# print
with open('result.txt', 'w') as f:
  raw_text=[]
  for i in range(len(speech_recognition_results["results"])):
      txt = speech_recognition_results["results"][i]["alternatives"][0]["transcript"]
      raw_text.append(txt)
  for i in range(len(raw_text)):
    f.write(raw_text[i])
```

# 補足
上記は、音声ファイルを引数にして読み込むようにしていますので、コマンド叩く時は引数つけてください。
今回は自分が使いやすいので、テキストで出力させていますが、本来はjsonで返すAPIです。
IBM Cloud無料枠の場合は、1回の音声ファイルは100MBが上限です（非同期HTTPだと1GBでもできるらしいのですが、よくわかりません）

# 参考
以下を参考に進めました。
API公式ドキュメントの日本語版は、翻訳されるのが遅いのと、pythonのコードが載っていないので、先人の方がいなければ意味不明だっただろうと思います。上のコードは下2つのブログのコードを改良しただけみたいなものですし…
本当にありがとうございました。
[Speech to Text API Document](https://cloud.ibm.com/apidocs/speech-to-text)
[IBM Watson Speech to Text API を使ってみた (Python)](https://qiita.com/aki4masaki/items/edac29a01e944a48f931)
[[Python]WatsonのSpeech To Textを使うお話](https://qiita.com/white0221/items/4135b48195f55ee5414b)

# 次の野望
今回は対象が英語音声だったので、比較的問題なく文字起こしできました。
次の野望としては、会議のリアルタイム文字起こし（日本語）ができたらいいなぁと考えています。
それではまた。
Ubuntu20.04のデフォルトshellをfishにする

![Ubuntu-20.04.01](https://img.shields.io/badge/Ubuntu-20.04-brightgreen) ![fish-3.2.0](https://img.shields.io/badge/fish-3.2.0-brightgreen) ![fisher-4.3.0](https://img.shields.io/badge/fisher-4.3.0-brightgreen)

## 目的
Ubuntuでシェルスクリプトを書こうとした際、fishというが便利とのことだったのでインストールしてみた。

### fish インストール
```
# fishのインストール
$ sudo apt-add-repository ppa:fish-shell/release-3
$ sudo apt-get update
$ sudo apt-get install fish

# fishがインストールされているか確認
$ fish -v 
fish, version 3.2.0
```

### デフォルトのシェル変更
```
# デフォルトのshellをfishに変更(デフォルトがbashだと次のコマンドがエラー吐くので)
$ chsh
    パスワード: 
    ------ のログインシェルを変更中
    新しい値を入力してください。標準設定値を使うならリターンを押してください
    ログインシェル [/bin/bash]: /usr/bin/fish
```

### fisher インストール
```
# Fisherのインストール
$ curl -sL https://git.io/fisher | source && fisher install jorgebucaran/fisher
$ sudo apt-get install fonts-powerline

# Fisher バージョン確認
$ fisher -v
fisher, version 4.3.0

# お好みでテーマ等の設定
$ fish_config

# 良さそうなプラグイン
$ fisher install oh-my-fish/theme-bobthefish
$ fisher install jethrokuan/z
```

### その他設定
参考
[【Ubuntu】 shellをfish + fisherman に変えた話 - 0.5から始める機械学習](https://nodaki.hatenablog.com/entry/2018/09/24/213942)
> デフォルトのシェルに設定するのですが、本当に起動時からデフォルト設定にしてしまうと、今まで.bashrcなどに様々な設定を書き込んでいた場合は、その依存関係が読み込めなくなってしまいます。
> 
> そこで、bashを残しつつ、あたかもデフォルトで起動するような設定にします。
> 
> .bashrcの最終行に次の一文を追記します。
> 
> exec fish
Gentoo Linux構築の手順　パート4

#目的

Gentoo Linuxのハンドブックをもとにgentoo linuxを開発しました
ハンドブックでは分かりづらいため、他の方が作る際に少しでも助けになればいいと思い記事にしました
今回は、ハンドブックの25章から41章になります
任意設定のところについては割愛しております

・[Gentoo Linux構築の手順　パート1](https://qiita.com/Goto_Kazuhide/items/9119186f9fb1bede1009)
・[Gentoo Linux構築の手順　パート2](https://qiita.com/Goto_Kazuhide/items/07eb5304c806a2dad793)
・[Gentoo Linux構築の手順　パート3](https://qiita.com/Goto_Kazuhide/items/cf671bf65f5f984abf21)
・[Gentoo Linux構築の手順　パート4](https://qiita.com/Goto_Kazuhide/items/fafe5ba5188f44be0433)
・[Gentoo Linuxを構築する上での用語集](https://qiita.com/Goto_Kazuhide/items/1ea550fe910255b1d24e)

#ネットワーク接続のための情報

## ネットワークを設定する
```
emerge --ask --noreplace net-misc/netifrc
nano -w /etc/conf.d/net
```

## 起動時に自動でネットワーク接続する
cd /etc/init.d 
root #ln -s net.lo net.eth0 
root #rc-update add net.eth0 default

# システム情報
##rootパスワード

```
passwd
```
## initとboot設定

```
passwd
```

# デフォルト: GRUB2
## Emerge

```
emerge --ask --verbose sys-boot/grub:2
echo 'GRUB_PLATFORMS="efi-64"' >> /etc/portage/make.conf
emerge --ask sys-boot/grub:2
emerge --ask --update --newuse --verbose sys-boot/grub:2
```
## インストール

・BIOS を利用する場合:
```
grub-install /dev/sda
```

・UEFI を利用する場合:
```
grub-install --target=x86_64-efi --efi-directory=/boot
grub-install --target=x86_64-efi --efi-directory=/boot --removable
```

# 設定

```
grub-mkconfig -o /boot/grub/grub.cfg
```

システムのリブート

```
exit
cd
umount -l /mnt/gentoo/dev{/shm,/pts,} 
umount -R /mnt/gentoo 
reboot
```

ユーザー管理

```
Login:root
Password: (rootのパスワードを入力してください)
```

```
root #useradd -m -G users,wheel,audio -s /bin/bash larry 
root #passwd larry
```
Reactを学ぶ前にJavaScript基礎を学ぶその1

## はじめに

Rails + Reactでポートフォリオを作ろうと思いReactの勉強を始めたけどJavaScriptの知識があまりにもなかったので、最低限Reactを使うなら知っておいた方がいいJavaScriptの知識をまとめました！

##let const

letは変数で上書きが可能。

```javascript:例

let hello = "おはよう";
console.log(value);  // =>  おはよう

hello = "こんにちは";
console.log(value); // => こんにちは
```


constは定数
文字列や数値では宣言した値を変えることはできないがJavaScriptのオブジェクトや配列では値を変更することができる。

・ オブジェクトの場合、nameが変わっている。

```javascript:例
const profile = {
  name: "asahi",
  age: 25
};
profile.name = "takesi";

console.log(profile);    // => {name: "takesi", age: 25}

``` 


・ 配列の場合、佐藤を山田に変更、佐々木を追加。

```javascript:例
const name = ["佐藤","高橋"];
name[0] = "山田";
name.push("佐々木");

console.log(name); // => ["山田", "高橋", "佐々木"]
```


Reactでは基本constが使われる。

## テンプレート文字列

テンプレート文字列は文字列の中にJavaScriptを埋め込むためのもの
バッククフォーテーションと${}で表記する。

```javascript:例
const name = "asahi";
const age = 25;
const message = `私の名前は${name}です 年齢は${age}歳です`;

console.log(message); // => 私の名前はasahiです 年齢は25歳です
```


## アロー関数
アロー関数とは`=>`を使って関数を記述する書き方。

num1とnum2を計算する関数の場合、

```javascript:例
const cal = (num1, num2) => {
  return num1 + num2;
}

console.log(cal(6, 4)); // => 10
```

今回みたいに処理が1行で終わるなら省略して書くこともできる。

```javascript:例
const cal = (num1, num2) => num1 + num2;

console.log(cal(6, 4)); // => 10
```

##分割代入

毎回`${profile.name}`のように`profile`をつけるのは読みにくく書くのも手間なので分割代入を使ってプロパティを抜き出してまとめて定義することで読みやすくなる。

・分割代入なし(オブジェクト)

```javascript
const profile = {
  name: "asahi";
  age: 25 ;
}

const message = `名前は${profile.name}で${profile.age}歳です`
```

・分割代入あり(オブジェクト)

```javascript
const profile = {
  name: "asahi";
  age: 25 ;
}
const { name, age } = profile;
const message = `名前は${name}で${age}歳です`;
```

・分割代入なし（配列）

```javascript
const profile = ["asahi", 25];

const message = `名前は${profile[0]}で${profile[1]}歳です`;
```

・分割代入あり（配列）
配列の場合は代入する順番に注意。


```javascript
const profile = ["asahi", 25];

const [ name, age ] = profile;
const message = `名前は${name}で${age}歳です`;
```

## デフォルト値

JavaScriptでは変数に値が入っていない場合undefinedと判定される。

```javascript
const hello = (name) => console.log(`こんにちは！${name}さん!`);

hello();
```

```javascript:console
こんにちは! undefinedさん! 
```

`=`でデフォルト値を設定する。

```javascript
const hello = (name = "ゲスト") => console.log(`こんにちは！${name}さん!`);

hello();
```

```javascript:console
こんにちは! ゲストさん! 
```

ちなみに`hello`の引数に値を入力すると入力した値がきちんと表示される。

```javascript
const hello = (name = "ゲスト") => console.log(`こんにちは！${name}さん!`);

hello("asahi");
```

```javascript:console
こんにちは! asahiさん! 
```

####参考にしたもの
[モダンJavaSciptの基礎から始める挫折しないためのReact入門](https://www.udemy.com/course/modern_javascipt_react_beginner/)
UUIDを使用したID生成法

## はじめに
Djangoを使用したwebサービス開発の学習をしている際、画像のデータをUUIDを使用して命名することにした。
この記事にはUUIDを使用したid生成法を記載する。

## UUIDとは

>UUIDとは
>**いつでも誰でも作れるけど、作ったIDは世界中で重複しないことになっているID**

引用：[「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 UUID](https://wa3.i-3-i.info/word13163.html)

UUIDはIDは世界中で重複することがない（重複する可能性が非常に低い）文字列で、このIDを使用しデータの管理をしようと考えた。


## コード

UUID生成プログラム

```python
import uuid

a = str(uuid.uuid4())
print(a)

```

UUIDを生成するだけであれば、uuidをimportし、`uuid.uuid4()`とするだけでidを生成することは可能。
得られたidはstrで型変換を行うことで文字列として扱うことができる。

```python
strの型変換を行わない場合
>> UUID('66d99be0-4b81-47e4-bf66-a34098183806')

型変換を行った場合
>> '66d99be0-4b81-47e4-bf66-a34098183806'
```

django に組み込む

```python:記事作成プログラム
def create(request):
    #投稿された画像名を取得
    name = "media/images/" + str(request.FILES['picture'])
    #投稿された画像名を ユーザー名＋記事タイトル＋UUID+.png に変更
    renamed = ("media/images/" + ((str(request.POST['picture_name']) + str(request.POST['title'])).replace(" ", "_")) + str(uuid.uuid4()) + ".png")
    #テーブルの生成
    table = Register.objects.create(
        title = request.POST['title'],
        owner = request.POST['owner'],
        table_id = request.POST['table_id'],
        picture = request.FILES['picture'],
        picture_name = renamed,
    )
    table.save()
    os.rename("register/" + name,"register/" + renamed)   

```

## まとめ

今回はプログラミングの学習として、自分なりに考えた結果UUIDでのデータ管理を行うことにしたが、データ量を減らすことや他のデータとの紐づけるということを考えるとUUIDは最善のデータの命名方法ではないと考える。今後改善を続けていきたい。
【Kotlin 初心者】ダイアログの作成方法

## Kotlinでダイアログを表示する方法
簡単にですがダイアログを表示する実装になります。
今回はButtonをタップした時にダイアログを表示する想定のコードになります。

```MainActiviy.kt

val button = findViewById<Button>(R.id.button)

button.setOnClickListener {
            AlertDialog.Builder(context)
                .setTitle("ダイアログのタイトルをいれう")
                .setPositiveButton("OK", { dialog, which ->
                  //OKの時の処理
                })
                .setNegativeButton("No", { dialog, which -> 
　　　　　　　　　　　//NOの時の処理
　　　　　　　　　　})
                .show()
        }
```
IPv4: martian sourceで怒られた

# 概要

```bash:/var/log/messages
IPv4: martian source 10.0.1.5 from 10.0.10.3, on dev ens161
```

みたいなログが出力されて、想定通りに通信できない時の一つの対応方法

# 前提

* NICを複数持っている
* セグメントごとにStatic Routeを設定している
* この例では以下のようなNIC設定のイメージ
  * ens161: 10.0.1.5/24
  * ens192: 10.0.10.5/24
  * Static Route: 10.0.10.0/16 -> 10.0.1.1 via ens192 

# 原因

送信元のセグメントがStatic Routeの設定上、別NICから送信されるようになっているとこのエラーとなる
今回のケースだと、ens192向けで広めにStatic Routeを設定していたが、
部分的にはens161を通るべきセグメントがあり、その箇所が設定不足でこの状況になってしまっていた

```bash:route
# route
Kernel IP routing table
Destination     Gateway         Genmask         Flags Metric Ref    Use Iface
default         _gateway        0.0.0.0         UG    103    0        0 ens161
10.0.10.0       10.0.10.1       255.255.0.0     UG    100    0        0 ens192
~~
```

本当はDefault GWの設定に従ってens161から送信されて欲しいが、
Static Routeとして設定されている2行目のRouting Tableに従ってens192から送信すべきとなる

そのため、**あれ？受信NICがそもそもおかしくね？**となって、
martian sourceがこんにちはしていた

# 解決方法

Static Routeを追加しましょう
このケースだとこういった形で設定追加

## 設定永続化

この場合一時的にens161を通る通信がDownするため、注意が必要

```
sudo nmcli con mod ens161 +ipv4.routes "10.0.10.0/24 10.0.1.1"
sudo nmcli con reload
sudo nmcli con down ens161; sudo nmcli con up ens161
```

## 一時的な反映

こちらの場合は即時で反映されるが、再起動等行うと設定が消えてしまうため、
永続化する場合は↑とセットで行う

```
sudo ip route add 10.0.10.0/24 via 10.0.1.1 dev ens161
```
ストレージアカウントのMIME Typeを設定する

そのままアップロード処理を実行するとデフォルトでoctet-streamになってしまうっぽい。
CreateBlockBlobOptionsを使ってMIME Typeを設定、アップロードのオプションパラメータに付与すればOK


```php
use MicrosoftAzure\Storage\Blob\Models\CreateBlockBlobOptions;

$options = new CreateBlockBlobOptions();
$options->setContentType("image/png");

$result = $this->blobClient->createBlockBlob($this->containerName, $fileName, $image,$options);
```

Azureは分かりやすいマニュアルが少ない。。。
ローカルで今いるブランチ以外を削除する

こんな感じ

```shell
$ git branch -D `git branch | sed '/*/d' | tr '\n' ' '
```

`sed '/*/d'`で、現在いるブランチを一覧から削除

```shell
$ git branch
  feature/1
  feature/2
  feature/3
  feature/4
  feature/5
* master

$ git branch | sed '/*/d'
  feature/1
  feature/2
  feature/3
  feature/4
  feature/5
```

この出力を`git branch -D`に渡す

```shell
$ git branch -D `git branch | sed '/\*/d'`'
```
初心者のためのオブジェクト指向

#オブジェクト思考とは？

###いかに効率よく開発を行うかを突き詰めた考え方
例え）新入社員研修の時に御社はこういう考えのもとで働いてもらいますとういう研修を受けるようにオブジェクト指向も何かに基づいた考え方で動いています。



そしてオブジェクト指向には主に4つの考え方があります。1つ目は設計、2つ目はカプセル化、3つ目は継承、4つ目はポリーモーフィズムと言います。

#1 設計
基本的にオブジェクト指向は物と物の関係性を考えて作っていきます。このプロセスを設計と言います。この設計を効率よく無駄なくできるかがオブジェクト指向の最も重要な考え方と言えます。

#2 カプセル化
現在開発しているプログラムが他のプログラムから干渉されないようにするために基本的に決まった設計図で書いていくという考え方です。

例え）自動車の設計をしているときに横から自転車の設計図をもらっても困りますよね？このように自動車の設計をしている時は自動車関連の設計図のみでやるという考え方です。

#3 継承
一口に自動車と言ってもバスやスポーツカーやトラックなど種類は様々です。その時に自動車という基本的な設計のもとその他自動車関連の乗り物を作っていくという考え方がオブジェクト指向の継承です。

例え）バスやスポーツカーを作る時にもタイヤやブレーキなど自動車に基本的に内蔵されている物はどの自動車にも継承して使って行こうという考え方です。

#4 ポリーモーフィズム
汎用的な形で作っていいきましょうという考え方です。

ベースはあるものの自動車の中でもバスやスポーツカーなど様々な種類に分けて汎用的に開発していくという考え方です。
Docker上でGemfile.lockのBUNDLED WITHを変更する方法

## はじめに
この度共同開発を行う機会を頂き、共同開発用の環境構築を行うこととなりました。
そこでbundlerのバージョンを2.1.4に固定する必要があったのですが、一般的にbundlerをバージョン変更する方法を行ってもbundlerのバージョンが変更されませんでした。__デバイス間の差異などに左右されない__ことからDockerで環境構築を行いたかったのでDocker上でGemfile.lockのBUNDLED WITHを変更する方法を模索しました。

以下、バージョン変更のために行った方法（__後に説明しますが、この記事を書いている方が間違っているというわけではないです。むしろほとんどの場合はこれで解決するのではないかと個人的には思います。__）

https://qiita.com/avicii2314/items/769aacd3b5b949dcbcb8

## この記事の対象者
- 何らかの事情があり、docker上でGemfile.lockのBUNDLED WITHを変更する必要がある方

## 構築する環境
- Ruby 2.5.1
- Rails 5.2.4
- bundler 2.1.4
- PostgreSQL 12.4

## 結論
__アプリ側のDockerfileでBUNDLER_VERSIONを上書きする__
※Ruby用のDockerイメージが新しいバージョンの場合は先ほどの記事の通りにやっていただければ解決すると思います。

## 具体例

```:Dockerfile
FROM ruby:2.5.1
RUN apt-get update -qq && apt-get install -y nodejs postgresql-client
RUN mkdir /myapp
WORKDIR /myapp
COPY Gemfile /myapp/Gemfile
COPY Gemfile.lock /myapp/Gemfile.lock
ENV BUNDLER_VERSION 2.1.4 　　#ここにバージョンを記載する！！
RUN gem install bundler -v 2.1.4 #bundlerのバージョンを指定する！！
RUN bundle update --bundler 
RUN bundle install
COPY . /myapp

# Add a script to be executed every time the container starts.
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000   
# Start the main process.
CMD ["rails", "server", "-b", "0.0.0.0"]

```

## なぜBUNDLER_VERSIONを指定する必要があるのか？

>調べてみたところ、BUNDLER_VERSION という環境変数でバージョンが指定されている場合、強制的にそのバージョンが使われるという情報を得ました。また、Docker Hub の提供している Ruby 用の Docker イメージ側で、BUNDLER_VERSION を指定しているということを知りました。
> 引用元：https://r7kamura.com/articles/2019-01-26-docker-bundler-2-0

とのことでした。
ちなみに引用元の記事が書かれたのが2019年の1月でして、その時点で「最近この問題が解消された（Docker イメージ側では BUNDLER_VERSION を指定しなくなった）」と書いているので、Gemfile.lockのBUNDLED WITHが更新されない問題は__古いバージョンでのみ起こる可能性が高そうで__すね。

[Dockerイメージ ruby 2.5.1の画像]
(https://gyazo.com/5a5974ec36ffc54e47aeac6b03affd35)
こちらを見ていただくと、BUNDLER_VERSION = 1.16.6と指定されているのがわかると思います。

ちなみにruby 2.6.6ではBUNDLER_VERSIONは確認できなかったので、少なくともruby 2.6.6以上ではこの問題は起きなさそうですね！

## 最後に
もし、Docker上でGemfile.lockのBUNDLED_WITHを変更できない場合は一度使用しているDockerイメージを確認してみる必要がありそうですね！

この記事が役に立ったと感じたらLGTMをいただけると幸いです。
bind()を使ってイベントハンドラに引数を渡す

どうにかして、イベントハンドラにスコープ外の変数の値などを渡したいときがある。
色々方法があると思うが、最近`bind()`を使ったらいいんじゃないかと思ったので紹介する。
他で紹介されているのを見ない気がするので、もしかしたら欠点があるのかもしれない。

## `bind()`を使う
`bind()` の引数には、thisの値以外にも値が渡せるので、それを利用する。
[Function\.prototype\.bind\(\) \- JavaScript \| MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind#syntax)

**HTML**

```html
<button id="btn">Click!</button>
```

**JavaScript**

```js
{
    let value = "Hello!"; //スコープ外の変数
    let btn = document.querySelector("#btn2");
    let bindedHandler = handleClick.bind(btn, value); // bindにvalueの値を渡す
    btn.addEventListener("click", bindedHandler);
}

//スコープ外にあるイベントハンドラ
function handleClick(val, event) {
    console.log(typeof value); // undefined
    console.log(val);          // Hello!
    event.preventDefault();
}
```

bindの2つ目以降に渡した引数は、新しく生成された関数が呼び出された際に、既存の引数の**先頭**に渡される。
通常、イベントハンドラにはeventオブジェクトが引数として渡されるので、bindに渡した引数はその前に来ることになる。
イベントハンドラの定義に引数が増えてしまうし、イベントオブジェクトが2番目以降に行ってしまうのでので、もう少し工夫したほうがいいかもしれない。

#### 工夫した例
可変長引数をつかって引数の長さに応じて分岐させるようにしてみた。
冗長になったが、これならイベントハンドラを使い回すようなこともできる。

```js
{
    let value = "Hello!"; //スコープ外の変数
    let btn = document.querySelector("#btn");
    let bindedHandler = handleClick.bind(btn, value);
    btn.addEventListener("click", bindedHandler);
}

//スコープ外にあるイベントハンドラ
function handleClick(...args){
    let event,
        len = args.length;
    if (args.length > 1) {
        event = args[len - 1];
        args.forEach((e, i) => {
            if (i + 1 !== len) {
                console.log(e); //Hello!
            }
        });
    }
    else {
        event = args[0];
    }
    event.preventDefault();
}

```



## オーソドックスな方法
一応、bindを使わない、よくある方法も紹介する。

#### イベントハンドラを無名関数にして、イベントハンドラ内から別の関数を呼ぶ

```js
{
    let value = "Hello!"; //スコープ外の変数
    let btn = document.querySelector("#btn");
    btn.addEventListener("click", function(event) {
        event.preventDefault();
        anotherHandleClick(value);
    });
}

anotherHandleClick(val) {
    console.log(val); // Hello!
}
```


#### イベントハンドラを返す関数を呼ぶ

```js
{
    let value = "Hello!"; //スコープ外の変数
    let btn = document.querySelector("#btn");
    btn.addEventListener("click", anotherHandleClick(value));
}

anotherHandleClick(val) {
    //イベントハンドラを返す
    return function(event){
        event.preventDefault();
        console.log(val); // Hello!
    };
}

```
クラウドサービス(SaaS,PaaS,IaaS)について勉強してみた

クラウドサービスについて理解を深めたいと思い勉強を始めました。
勉強してもイマイチ分かりませんがまとめます。


## クラウドの種類

### SaaS(Software as a Service)

インターネットを経由して提供されるソフトウェアパッケージのこと。
ベンダーが提供するクラウドサーバーにあるソフトウェアを、インターネット経由してユーザーが利用できるサービスです。
なんとなく、私の理解としては今までDVDとかでPCに導入していたシステムをユーザーが直接サーバーにアクセスすることで利用できるようにしたから導入が楽だよ、みたいなイメージなのかなと。ネット環境があればデバイスが変わってもOKだし複数人で共有もできるしコストも安いというのが特徴なのかなと思いました。

例：

- Microsoft Office 365
- Gmail
- Dropbox


### PaaS(Platform as a Service)

アプリケーションの実行のための動作環境をインターネット経由で提供しているもの。
作成したアプリケーションなどを、ネットワーク上に公開するためのプラットフォームを提供するサービスです。
PaaSのおかげで作成したアプリを公開できるのですね。
イマイチIaaSとの違いが分かりませんが、PaaSの方が言語やデータベースは限られているが運用が簡単であるという認識になりました。

例：

- Heroku
- AWS(AWS Elastic Beanstalk)
- GCP(App Engine)


### IaaS(Infrastructure as a Service)

ネットワーク経由でハードウェアやインフラを提供しているもの。
サービスを利用するユーザーに、仮想化したCPUやメモリ、ストレージなどをインターネット経由で提供するサービスのことです。
PaaSと似たような感じですが、IaaSの方がユーザーが自分で管理しなければならない部分が多くなってくるのでより開発に知識が必要なのかなと感じました。


例：

- Microsoft Azure
- AWS(EC2)
- GCP(Compute Engine)


以上です。
Hoverした要素と違う要素を操作する方法。

#はじめに

######「(要素名など):hover」

とすると、指定した要素にマウスホバーした際、その要素をどう変化させるか指定することができます。これは多くの方が知っているかと思います。
では、ホバーした要素と違う要素を操作したい場合はどうすればよいのでしょうか？
HTML&CSSを始めたばかりの方は疑問に思うでしょう。
実は、方法はとっても簡単なんです！

##①ホバーした要素と同じ階層にある要素(兄弟要素)を操作させたい場合
兄弟要素を操作させたい場合は、以下の方法で行います！

```
.sibling1:hover ~ .sibling2{
　　(動作指定)
}
```

######例


<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="ryuji0526" data-slug-hash="gOLyerL" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="兄弟要素を変化">
  <span>See the Pen <a href="https://codepen.io/ryuji0526/pen/gOLyerL">
  兄弟要素を変化</a> by Ryuji Watanabe (<a href="https://codepen.io/ryuji0526">@ryuji0526</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


「~」の後に変化させたい兄弟要素をしているだけで簡単に操作できちゃいます！

##②ホバーした要素の配下にある要素(子要素)を操作したい場合
子要素を操作したい場合は、以下の方法で行います!

```
.parent:hover  .child1{
 	(動作指定)
}
```

######例

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="ryuji0526" data-slug-hash="QWGPrvR" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="子要素を操作">
  <span>See the Pen <a href="https://codepen.io/ryuji0526/pen/QWGPrvR">
  子要素を操作</a> by Ryuji Watanabe (<a href="https://codepen.io/ryuji0526">@ryuji0526</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

子要素を変化させたい場合は「+」を付ける必要はありません！
半角スペースを開けましょう！

##③ホバーした要素の兄弟要素の子要素を変化させたい場合
少し複雑になってきました。しかし、①と②で学んだことを応用すれば簡単に操作できます。

```
.parent:hover  ~ .parent2 .child2{
 	(動作指定)
}
```

######例

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="ryuji0526" data-slug-hash="XWNQqqN" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="兄弟要素の子要素を操作">
  <span>See the Pen <a href="https://codepen.io/ryuji0526/pen/XWNQqqN">
  兄弟要素の子要素を操作</a> by Ryuji Watanabe (<a href="https://codepen.io/ryuji0526">@ryuji0526</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

兄弟要素から子要素へと指定することで簡単に操作することができます！

#おわりに
①、②の方法を意識すれば、もっと複雑な階層であっても操作することができます。しっかりと**「階層」**を意識してみなさんの思い通りの操作をしてみてください！
Java PowerPointでグラフにデータラベルを追加

<p><strong>データラベルによって、データ系列またはその個々のデータポイントに関する詳細情報が表示されるので、グラフが理解しやすくなります。今回はSpire.Presentation for Javaを使ってPowerPointでグラフにデータラベルを追加する方法を説明します。</strong></p>
<p><strong>下準備</strong></p>
<p><strong>1.E-iceblueの公式サイトから<a href="https://www.e-iceblue.com/Download/presentation-for-java.html">Free Spire. Presentation for Java</a>無料版をダウンロードしてください。</strong></p>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210317/20210317120248.png" alt="f:id:lendoris:20210317120248p:plain" title="" class="hatena-fotolife" itemprop="image" /><br /><strong>2. </strong><strong>IDEを起動して新規プロジェクトを作成してから、インストールされたファイルにあった相応しいSpire. Presentation.jarを参照に追加してください。</strong></p>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210317/20210317120303.png" alt="f:id:lendoris:20210317120303p:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
<h4><strong>元のファイル</strong></h4>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210317/20210317121128.png" alt="f:id:lendoris:20210317121128p:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
<p><strong> </strong></p>
```JAVA
import com.spire.presentation.FileFormat;
import com.spire.presentation.ISlide;
import com.spire.presentation.Presentation;
import com.spire.presentation.charts.IChart;
import com.spire.presentation.charts.entity.ChartDataLabel;
import com.spire.presentation.charts.entity.ChartSeriesDataFormat;
import com.spire.presentation.drawing.FillFormatType;

import java.awt.*;

public class AddDataLabelsToChart {
    public static void main(String[] args) throws Exception {
        //PowerPointをロードします。
        Presentation ppt = new Presentation();
        ppt.loadFromFile("Chart.pptx");

        //スライドを取得します。
        ISlide slide = ppt.getSlides().get(0);
        //チャートを取得します。
        IChart chart = (IChart)slide.getShapes().get(0);

        //グラフの系列を取得します。
        for (ChartSeriesDataFormat series:(Iterable)chart.getSeries()
             ) {
            //各系列にデータラベルをつけます。
            for(int i = 0; i < 4; i++){
                ChartDataLabel dataLabel = series.getDataLabels().add();
                //ラベルの値を表示します。
                dataLabel.setLabelValueVisible(true);
                //ラベルの系列を表示します。
                dataLabel.setSeriesNameVisible(true);
                //ラベルの枠を設定します。
                dataLabel.getLine().setFillType(FillFormatType.SOLID);
                dataLabel.getLine().getSolidFillColor().setColor(Color.RED);
                //ラベルの塗りつぶしを設定します。
                dataLabel.getFill().setFillType(FillFormatType.SOLID);
                dataLabel.getFill().getSolidColor().setColor(Color.YELLOW);
            }
        }

        //保存します。
        ppt.saveToFile("DataLabels.pptx", FileFormat.PPTX_2013);
    }
}
```

<h4><strong>実行結果</strong></h4>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210317/20210317121158.png" alt="f:id:lendoris:20210317121158p:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
<p> </p>
「C#」9.0のレコード型について

#C＃ 9.0のレコード型
C# 9.0ではレコード型が追加されました。
既存はClassの参照型とStructのValue型がありましたが、9.0はイミュータブル参照型が追加されました。
イミュータブル型を定義するためにはClassキーワードを定義しないで、レコードキーワードを定義して作成します。

####1. 基本
```c#
    class Program : NoteObject
    {
        static void Main(string[] args)
        {
            Note n = new Note("c# 9.0", 0);
            Console.WriteLine($"タイトル：{n.Title}、ページ：{n.Page}");

        }
    }

    class NoteObject
    {
        public record Note
        {
            public string Title;
            public int Page;

            public Note(string title, int page)
                =>(Title, Page) = (title, page);
        }
    }

```


####2. initでsetter
レコード型にはinitというキーワードが追加されました。
setの代わりにinitで作成できます。
initで設定したデータはイミュータブル参照型で読み取り専用になります。

```c#
    class Program : NoteObject
    {
        static void Main(string[] args)
        {
            Note n = new Note("c# 9.0", 0);
            Console.WriteLine($"タイトル：{n.Title}、ページ：{n.Page}");

        }
    }

    class NoteObject
    {
        public record Note
        {
            public string Title {get; init;}
            public int Page {get; init;}

            public Note(string title, int page)
                =>(Title, Page) = (title, page);
        }
    }
```

####3. with
レコード型はインスタンス全体がイミュータブルなので変更することができないです。
withを使用してプロパティの値を変更することができます。

```c#
        static void Main(string[] args)
        {
            Note n = new Note("c# 9.0", 0);
            Note n2 = n with {Title = "再設定"};
            Console.WriteLine($"タイトル：{n.Title}、ページ：{n.Page}");
            Console.WriteLine($"タイトル：{n2.Title}、ページ：{n2.Page}");

        }

```

```
結果
タイトル：c# 9.0、ページ：0
タイトル：再設定、ページ：0
```


読み取り専用のため、エラーが発生している

```c#
        static void Main(string[] args)
        {
            Note n = new Note("c# 9.0", 0);
            Note n2 = n;
            n2.Title = "再設定";
            Console.WriteLine($"タイトル：{n.Title}、ページ：{n.Page}");
            Console.WriteLine($"タイトル：{n2.Title}、ページ：{n2.Page}");

        }
```

エラーメッセージ

```
error CS8852: init 専用プロパティまたはインデクサー 
'NoteObject.Note.Title' を割り当てることができるのは、オブジェクト初期化子の中か、
インスタンス コンストラクターまたは 'init' アクセサーの 'this' か 'base' 上のみです。
```
describeByの出力の個別要素にアクセスする方法

Rのpsychパッケージに入ってるdescribeBy関数は、指定したグループ分け変数に基づいてグループ分けしたうえで、それぞれの記述統計量を返してくれる便利な関数。

で、この関数の出力から個別の要素を取り出したいときのための方法。

とりあえず、目的変数になるのはQ1-1とQ1-2という変数。
グループ分け変数はfQ5-1で、中身は13個ほどにグループ分けされている。

```r
  r<-describeBy(dataset[[c("Q1-1","Q1-2")]],dataset[["fQ5-1"]])
```

とりあえず、あるグループだけを取り出したいとき。以下は例として9番目を取り出す。
`[[]]`と二つ重ねるのがポイント。

```r
> r[[9]]
     vars  n mean   sd median trimmed  mad min max range skew kurtosis   se
Q1-1    1 26 3.35 1.13      3    3.32 1.48   2   5     3 0.29    -1.37 0.22
Q1-2    2 26 3.04 0.72      3    3.00 0.00   2   5     3 0.57     0.44 0.14
```

グループ名でも取り出せる。
ちなみに、数字として9を入れた場合と、グループ名として"9"をいれた場合とで結果が違うのは、グループ名の通りに結果が並んでいるとは限らないため。

```r
> r[["9"]]
     vars  n mean   sd median trimmed  mad min max range  skew kurtosis  se
Q1-1    1 25 3.12 1.01      3    3.19 1.48   1   5     4 -0.46    -0.55 0.2
Q1-2    2 25 2.96 0.98      3    3.00 1.48   1   5     4 -0.18    -0.46 0.2
```

平均を取り出す。

```r
> r[[9]]$mean
[1] 3.346154 3.038462

> r[[9]]["mean"]
     mean
Q1-1 3.35
Q1-2 3.04

> r[[9]][["mean"]]
[1] 3.346154 3.038462
```

さらに問の個別の平均を取り出す。

```r
> r[[9]]$mean[1]
[1] 3.346154

> r[[9]][["mean"]][1]
[1] 3.346154

> r[[9]]["mean"][1] #これはうまくいかない。
     mean
Q1-1 3.35
Q1-2 3.04
```

ということで取り出せる
Java PowerPointでグラフに傾向線を追加

<p><strong>PowerPointでいろいろなグラフを作成することができます。今日はSpire.Presentation for Javaを使ってトレンドグラフを作る方法を紹介します。グラフに傾向線を追加すると、視覚的なデータの傾向を示すことができますね。</strong></p>
<h4><strong>下準備</strong></h4>
<p><strong>1.E-iceblueの公式サイトから<a href="https://www.e-iceblue.com/Download/presentation-for-java.html">Free Spire. Presentation for Java</a>無料版をダウンロードしてください。</strong></p>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210317/20210317120248.png" alt="f:id:lendoris:20210317120248p:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
<p><strong>2. </strong><strong>IDEを起動して新規プロジェクトを作成してから、インストールされたファイルにあった相応しいSpire. Presentation.jarを参照に追加してください。</strong></p>
<p><strong> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210317/20210317120303.png" alt="f:id:lendoris:20210317120303p:plain" title="" class="hatena-fotolife" itemprop="image" /></strong></p>
```JAVA
import com.spire.presentation.FileFormat;
import com.spire.presentation.ISlide;
import com.spire.presentation.Presentation;
import com.spire.presentation.charts.IChart;
import com.spire.presentation.charts.ITrendlines;
import com.spire.presentation.charts.TrendlineSimpleType;

public class AddTrendlineToChart {
    public static void main(String[] args) throws Exception {
        //Presentation　objectを作成します。
        Presentation ppt = new Presentation();

        //PowerPointファイルをロードします。
        ppt.loadFromFile("Chart.pptx");

        //スライドを取得します。
        ISlide slide = ppt.getSlides().get(0);
        //スライドのチャートを取得します。
        IChart chart = (IChart)slide.getShapes().get(0);

        //チャートに傾向線を追加します。
        ITrendlines trendLine = chart.getSeries().get(0).addTrendLine(TrendlineSimpleType.LINEAR);
        //公式を非表示にします。
        //trendLine.setdisplayEquation(false);
        //Rの平方值を非表示にします。
        //trendLine.setdisplayRSquaredValue(false);

        //保存します。
        ppt.saveToFile("AddTrendline.pptx", FileFormat.PPTX_2013);
    }
}
```
<h4><strong>実行結果</strong></h4>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210317/20210317120349.png" alt="f:id:lendoris:20210317120349p:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
<p> </p>
brew upgrade したら vim が開けなくなった

### エラー
```shell
hint: Waiting for your editor to close the file... dyld: Library not loaded: /usr/local/opt/ruby/lib/libruby.2.7.dylib
  Referenced from: /usr/local/bin/vi
  Reason: image not found
error: vi died of signal 6
error: There was a problem with the editor 'vi'.
```

### 解決した方法
```
brew install vim --HEAD
```

https://github.com/macvim-dev/macvim/issues/947
iOS14でLaunchScreen.storyboardに設定した画像が表示されない

## 環境

ReactNative 0.63.4
react-native-splash-screen 3.2.0
iOS14~

## 問題

スプラッシュスクリーンが今まで問題なく表示されていたが、iOSのみアプリ立ち上げ時に黒い画面しか表示されないようになってしまった。

各種フレームワークで同様の問題が発生しているのでiOS14の問題のようです。

[App running on ios14 shows white screen instead of splash screen #504](https://github.com/crazycodeboy/react-native-splash-screen/issues/504)
[Ios14 splash screen doesn’t show up #513](https://github.com/crazycodeboy/react-native-splash-screen/issues/513)
[[Bug] iOS 14 Launch Screen is not working #9764](https://github.com/xamarin/xamarin-macios/issues/9764)
[Storyboard not working with Xcode 12 #8868](https://github.com/NativeScript/NativeScript/issues/8868)
[bug: iOS 14 Black screen always on initial app launch prior to actually showing the splash screen [SplashScreen] #3589](https://github.com/ionic-team/capacitor/issues/3589)

シミュレータでiOS14.0~14.4で確認しましたがすべて黒い画面が表示されました。
iOS13.7では問題なくスプラッシュスクリーンが表示されます。

## 解決方法

### 画像を`Images.xcassets`から取り出す。
取り出した画像はプロジェクト内のどこに置いてもよいです。
`LaunchScreen.storyboard`で設定している画像のパスも変更します。

### 画像の解像度もしくはファイルサイズを小さくする。
`Images.xcassets`で使用していた`LaunchScreen.png`, `LaunchScreen@2x.png`, `LaunchScreen@3x.png`のうち、`LaunchScreen@3x.png`（解像度約1920x3600）を`LaunchScreen.storyboard`に設定して使用すると黒い画面が表示されてしまいました。一方、`LaunchScreen@2x.png`(解像度1280x2400)を`LaunchScreen.storyboard`に設定して使用すると無事スプラッシュスクリーンが表示されるようになったので、画像の解像度も原因の一つのようです。

[こちらのissueのコメント](https://github.com/ionic-team/capacitor/issues/3589#issuecomment-711338973)では画像のファイルサイズを削減して表示されるようになった方もいるので、ファイルサイズも疑って見る必要があるかもしれません。

## 変更後はキャッシュに注意
変更後は実機の場合はアプリ削除 + 再起動、シミュレータの場合はアプリ削除 + Erase All Content And Settingsをしないと、キャッシュの問題で変更がうまく反映されないことがあるので注意。
複数のcollection_selectで選択したIDを配列形式で送信する

##what
複数のcollection_selectで選択したIDを配列形式で送信する方法

##why
collection_select　を利用した選択項目を複数設置する場面に置いて、パラメーターに配列形式で格納するという手段を取りたいが、どこを探しても見つからないため、いろいろさ試行錯誤していたら発見したので忘備録として投稿します。

##方法
まずcollection_selectの基本から

```
<%= f.collection_select(:item_id, Item.all, :id, :name, {}, {class:"item-select"}) %>
```
引数の説明

第一引数
:item_id	保存先のカラム名

第二引数
Item.all	データの入っているモデルを指定

第三引数
id	        表示する際に参照するDBのカラム名

第四引数
name	        実際に表示されるカラム名

第五引数
（オプション）	{}	{}はオプションの指定なし

<strong> htmlオプション	{class:"genre-select"}	CSSなどを当てるためのクラスなどを記述
↑今回はココに注目

---
こうします

```
<%= f.collection_select(:item_id, Item.all, :id, :name, {}, {name: item_ids[], class:"item-select"}) %>
```

<strong>name: item_ids[]

これです。　ここにname属性を記述します。name属性に[]を使用することにより配列として扱うことが出来るようになります。


```
<%= f.collection_select(:item_id, Item.all, :id, :name, {}, {name: item_ids[], class:"item-select"}) %>

<%= f.collection_select(:item_id, Item.all, :id, :name, {}, {name: item_ids[], class:"item-select"}) %>
```

この状態で送信すると以下のようにパラメータが確認できます。

![Action Controller: Exception caught 2021-03-17 11-44-53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1214254/4ef723c5-6a8c-c9b9-339f-dc0c2326e11d.png)


以上となります。
初めての記事投稿なので、色々情けない部分が多いかと思われるかもしれませんがご容赦ください。
table のセル内でテキストが折り返さない時の解決方法

## 現象

table 内のセルで英数字が折り返さず横幅を広げてしまう…:weary:

## 原因

改行に関する CSS プロパティ [overflow-wrap](https://developer.mozilla.org/ja/docs/Web/CSS/overflow-wrap) が効いていない。

```css:css
table {
  overflow-wrap : break-word;
  /* IE11 にも改行させる場合 */
  word-wrap: break-word;
}
```

## 解決方法

table のレイアウトに関する CSS プロパティ [table-layout](https://developer.mozilla.org/ja/docs/Web/CSS/table-layout) を設定する。

```css:css
table {
  table-layout: fixed;
  overflow-wrap : break-word;
  /* IE11 にも改行させる場合 */
  word-wrap: break-word;
}
```

これでセル内で英数字が改行されました！
辞書の値を取得する方法、2通り思いつきますか (Python)？

この記事ではPython3.7を使用しています。またIDE(統合開発環境)はPyCharm2020.3です。

##1. はじめに
　**タイトル通り辞書の値を取得する取得方法、2通り思いつきますか？**
今回は

```python:question.py
# 今回の記事で使用する辞書
d = {'apple': 'リンゴ', 'orange': 'オレンジ', 'cantaloupe': 'メロン'}
```

　まず１つも思いつかなかった方、大丈夫です。記事執筆5分前の自分もそうだったのでwww。この記事を読み終わる頃には脱初心者です！
　次に１つは思いついた方、素晴らしいです。そしてこの記事を読んで思いつかなかったもう1つの方法を学んで違いを理解しましょう！！
　その次に２つとも思いついた方、すごいです。違いがあやふやな人はこの記事を読んでしっかり理解しましょう！違いも分かる人は「mitsu4310」と検索して自分の他の記事を読んでください！！！
　最後に３つ以上方法が思いついた方、私のような初心者が出る幕はありません。そして別解をコメントで教えて下さい！！！！

##2. 方法その1　辞書[キー]を使用する
　まず１つ目は「辞書[キー]」を使用する方法です。

```python:answer1.py
d = {'apple': 'リンゴ', 'orange': 'オレンジ', 'cantaloupe': 'メロン'}
print(d['apple'])

# 'リンゴ'
```

　しかしこの方法には問題があります。それは存在しないキーを指定するとエラーになります。例えば本来ならappleにしなければいけないところをスペルミスでAppleにすると次のようになります。

```python:answer1_error2
d = {'apple': 'リンゴ', 'orange': 'オレンジ', 'cantaloupe': 'メロン'}
print(d['Apple'])

# KeyError: 'Apple'
```

##3. 方法その２　getメソッドを使う方法
　次に紹介する方法はgetメソッドを使ったやり方です。

```python:answer2
d = {'apple': 'リンゴ', 'orange': 'オレンジ', 'cantaloupe': 'メロン'}
print(d.get('apple', False))

# 'リンゴ'
```

　第２引数は省略できます。第２引数を指定すると存在しないキーを取得した場合でもエラーになりません。ちなみに第２引数はFalseでなくても構いません。

```python:answer2_nonexistence
d = {'apple': 'リンゴ', 'orange': 'オレンジ', 'cantaloupe': 'メロン'}
print(d.get('Apple', False))

# False
```

##4. まとめ
　今回は辞書の値を取得する方法を２通り解説しました。その方法は「[辞書]キー]」とgetメソッドを使う方法です。また１つ目の方法は存在しないキーを指定するとエラーになることも説明しました。
　ここまで記事を読んでいただきありがとうございます。説明に誤り等があればコメントにて教えていただけるとありがたいです。「過ちては改むるに憚ること勿れ」なので。参考文献一覧の次におまけトークがあるのでよかったらそちらも読んでください。

参考文献一覧
[Pythonのgetメソッドについて現役エンジニアが解説【初心者向け】](https://techacademy.jp/magazine/37322)
[【Python入門】dictionary（辞書）の使い方。基本と応用](https://www.sejuku.net/blog/24122)

##おまけトーク
　辞書のキーで登場したcantaloupeはどうやらマスクメロンの一種を表すようです。だったらmelonでいいじゃん、ということでキーをmelonに変更しましょう。

```python:change_to_melon.py
d = {'apple': 'リンゴ', 'orange': 'オレンジ', 'cantaloupe': 'メロン'}

d['melon'] = d.pop('cantaloupe')
print(d)

# {'apple': 'リンゴ', 'orange': 'オレンジ', 'melon': 'メロン'}
```
ラズパイにインストールしたGravioのアップデート

**(注) 現在はGravio 4.3が出ており、こちらの記事は古くなってます。Gravio 4.3へのアップデートは[こちらの記事](https://qiita.com/zrock/items/4db0eaf5edf5a0fd40ac)を参照してください。
https://qiita.com/zrock/items/4db0eaf5edf5a0fd40ac
Gravio 4.2以前をインストールしている場合は、この記事を参考に4.2にアップデートした後に4.3以降にアップデートしてください。**

Gravio 4.2が出たのでラズパイにインストールしてあったGravioをアップデートした。

手順は以下のサイトを参照すればよい。手順的には、新バージョン用のインストールスクリプトをダウンロードして、手順通りに実行するだけ。

https://doc.gravio.com/manuals/gravio4/1/ja/topic/linux-raspberry-pi-hubkit

ちゃんとアップデートされました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/17947cec-6151-5ff5-86f9-6faebd868530.png)

ちなみに、古いバージョンのDockerイメージも残っています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/db06f992-7169-702b-1887-860e9f7efced.png)

容量が気になる、もしくは逼迫してるのであれば、以下のコマンドで消しておきましょう。

```bash
sudo docker image rm <古いhubkit4-arm64のImage ID> <古いcoordinator-gravio-arm64のImage ID>
```
VSCodeで言語ごとにタブスペースを変える。プロジェクトごとにも分ける

# Visual Studio Codeで言語ごとにインデントの設定をしたい

## エディタ全体設定

1. VSCodeを開く
1. Ctrl+Shift+Pで開く（もしくは表示→コマンドパレット）コマンドパレットに`Preferences: Configure language specific settings`を入力/選択してユーザー用設定を開く。
1. 編集対象の言語を入力/選択する。
1. スペースサイズはeditor.tabSizeプロパティから設定できます。

参考：

```json:Support/Code/User/settings.json

{
    "[javascript]": {
        "editor.tabSize": 2
    },
    "[php]": {
        "editor.tabSize": 4
    }
}
```

この方法だと全てに設定が反映されます。

## プロジェクトごとに設定したい

上の方法で操作した場合`~/Library/Application Support/Code/User/settings.json`が開かれますが、プロジェクトごとに設定を分けたいときは、`.vscode/settings.json`に書き込みます。

（ユーザー設定はmacOSの場合は~/Library/Application Support/Code/User/に保存され、ワークスペースの設定は各プロジェクトの.vscode/settings.jsonに保存されます。）

ちなみに.vscode/settings.jsonはgitのグローバル設定でignoreするようにしとくと誤pushが防げて便利です。（もちろんローカル設定でもOKです。グローバルの ignore は意図しない挙動になる可能性がありますのである程度自己責任でお願いします。）

1. VSCodeを開く
1. `command + ,`で設定を開きましょう(Mac)
1. **ワークスペースの設定**のタブをクリック（これしないと全体適応になります）
1. 検索欄に「onsave」といれると、「Format On Save」がデフォルトでチェック外れているので、チェックを入れます
1. 自動で.vscode/settings.jsonが作成されます

あとはそこに同じように設定を書き込みましょう

参考：

```json:.vscode/settings.json

    "[ruby]": {
        "editor.tabSize": 2,
        "editor.insertSpaces": true
    },
    "[java]": {
        "editor.tabSize": 4,
        "editor.insertSpaces": true
    },
    "[csharp]": {
        "editor.tabSize": 4,
        "editor.insertSpaces": true
    },
    "[python]": {
        "editor.tabSize": 2,
        "editor.insertSpaces": true
    },
    "[javascript]": {
        "editor.tabSize": 2,
        "editor.insertSpaces": true
    }
```

## 参考文献

[【VSCode】言語ごとにインデント幅、タブとスペースどちらを使うか設定する](https://qiita.com/riekure/items/2b344129dbe5e2507e48)
[Visual Studio Codeで言語ごとにインデントの設定をしたい](https://ja.stackoverflow.com/questions/34014/visual-studio-code%E3%81%A7%E8%A8%80%E8%AA%9E%E3%81%94%E3%81%A8%E3%81%AB%E3%82%A4%E3%83%B3%E3%83%87%E3%83%B3%E3%83%88%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%82%92%E3%81%97%E3%81%9F%E3%81%84)
[プロジェクトごとのエディタの設定を一つの設定でいい感じにgitignoreする方法](https://zenn.dev/orange634nty/articles/c79d6a43ffe058b22ae3)
[VSCodeでプロジェクト単位の拡張機能を設定する](https://qiita.com/mottox2/items/a5813feeaf653ef3e2c3)
[プロジェクトごとにVSCodeの色とテーマを変えて気持ちを切り替える](https://qiita.com/mottox2/items/a5813feeaf653ef3e2c3)