OmniAICreator/Qiita-1.07M huggingface dataset:
【WordPress】ログインフォーム

# ログインフォームのリンク先変更

__概要__

デフォルトでは、ログインフォーム上のアイコンをクリックすると、[http://ja.wordpress.org/](http://ja.wordpress.org/) に遷移する。

__施策__

リンク先をサイトトップに変更


``` php
/*--------------------------------------------------------
ログインフォームのロゴのリンク先を変更する
--------------------------------------------------------*/
function custom_login_logo_url() {
	return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );
```

__関連リンク__

[get_bloginfo](https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/get_bloginfo)


---

# ログインフォームのロゴ変更

__概要__

デフォルトでは、ログインフォームのアイコンがWordPressのアイコンなので、各サービスのアイコンに変更

![logo01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43894/6fb2fe11-54ce-249f-af9e-bc2688a1ffc7.jpeg) ![logo02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43894/cb0b2e19-42d1-71d7-ec45-79933643b359.jpeg)


__施策__

スタイルシートを追加して変更をします。

``` php
/*--------------------------------------------------------
ログインフォームのロゴ変更
--------------------------------------------------------*/
function login_logo() {

	echo '<style type="text/css">';
	echo '.login h1 a {';
	echo 'background: url('.get_bloginfo('template_directory').'/img.png) no-repeat center center;';
	echo 'width:171px';
	echo '}';
	echo '</style>';

}
add_action('login_head', 'login_logo');
```
中途や第二新卒、未経験でプログラマーを目指す人へ

現在、IT需要に伴い、
色々な会社で未経験者は採用されています。
弊社でもプログラミング未経験者の方も多く、
採用させて頂いております。

かく言う私も元々はIT系の営業マンでしたが、転職し今年でプログラマー歴3年目を迎えることが出来ました。

そんな私がこれから未経験でプログラマーを目指していく方に、
自身の体験を踏まえて、
少しでもアドバイス出来たらと思いこの記事を書かせて頂きました。

※完全に私の主観が入っておりますので、
諸先輩方のお気に触りましたら申し訳御座いません。
是非、ご意見ください。

##未経験でプログラマーを目指す前に

面接でお話しさせて頂いたときや、
未経験で入社された方を対象にヒアリングさせて頂いたときに、
結構な確率でこんな話題になります。

「私は将来、Androidやiosでゲームアプリを作りたい！」
とか、
「ECサイトみたいなオシャレなサイトを作りたいんです！」

目標があるのは立派ですが、
それって今でも出来ませんか？

例えば、Androidアプリを作成するためのIDE(開発環境)であるAndroid Studioなども
OSS(オープンソースソフトウェア)で、その名の通り無料配布されています。

実際にアプリをマーケットにリリースする際はお金が掛かりますが、
試しに作ってみる分には十分でしょう。

何が言いたいかというと、
目標なんていう先延ばしにせずに、
今すぐやってプログラミングに触れてみてください。

きっと、「結構楽しい」とか、
「イメージと違う」とか色々なことを感じると思います。

そのとき感じた気落ちを大切に踏まえて、
これからプログラマーを目指すかどうか決めてもいいのかなと私は思います。

##プログラマーを目指す為の学習の仕方

例えば「独学」や「プログラミングスクール」、「未経験募集のIT会社」、
「職業訓練校」、「オンラインスクール」など色々ありますね。
様々な方法で学習することが出来ます。

どんな方法で学ぶかは、
それぞれのライフスタイルがあるかと思いますので、
ここでは私自身が行った学習の仕方(心構え？)についてお話していきます。


##いつまでにどんなものを作るのか?


やはりどんな人でも終わりが定まらないと
モチベーションを保つのも難しくなってきます。

例えば、三か月後までに「自分の力で簡単なモグラたたきゲームを作ってみる」とか、
そんなのでいいと思います。

大切なのは大枠で期間を定めることです。
私もですが、特に独学の人はこう言ったことが大事だと思います。

大枠の時間が定まったら、
一か月、一週間と細かくスケジュールを組んで、
目標管理をしていきましょう。

実際に開発の仕事していても、
見積もりや工数出しでスケジューリングスキルは必要となりますので、
その練習と思ってやってみてください。

##楽しくなってきたら、ある程度でその日は止める

これが結構大事なのかなと思います。
未経験でプログラミングを始めると、
とにかく分からないことだらけだと思います。

長時間学習していると集中力も切れてきますが、そんな時に不具合にハマったり…。

プログラマーあるあるですが、この時すでに集中力が切れているため、
不具合に対応するのはとてもキツイでしょう。
というかキツイ。

そこで明日やろうと止めると、
辛いタイミングで学習を中断しているのでどうしても再開が億劫になります。

そう、
「ボスに溜めておいた回復アイテムを全て使っても勝てなかったときからの再開」
＋
「使ったアイテムは戻っていない」
の状況と同じなんです。

心折れそうになりますよね？

それでもその状況に燃えられる人は良いですが、なるべく次も楽しく始められるように工夫した方が学習も続けやすくなると思います。


##移動中とかPCをさわれないときにこそイメージする

仕事や学校、家庭のことなどで、
常にPCの前に座り続けるのが難しい人も多いでしょう。

そんな人は、プログラミングが出来ない状況でこそ、
こんな処理を書いてみようかなとか、
どんなソースコードを書くのかを想像するしてみましょう。

直前に楽しくなってきた頃に止めているので、
楽しいことを考えるのは楽しいということですね。

楽しみながら考えたことを実践するのは、より楽しいということにも繋がります。

好きなことも想像している時の方が楽しく感じた、
なんてことありますよね。
そんな状況を自身で意図的に作ってあげるのも良いかもしれません。


##まとめ

色々と書いてきましたが、
とにかくプログラミングを楽しんでもらいたいということです。
楽しめたらその延長でプログラミングを仕事にしても良いんじゃないか？と、…

私はプログラミングを仕事として始めましたが、
今ではその面白さにハマって、ほぼ趣味みたくなってきています。

勿論、仕事なので楽しいことばかりではないですが、
楽しくないことも楽しく出来るのもプログラマーの面白いところかなと私は思います。

この記事が、これからプログラマーを目指す方に
少しでも参考になれば幸いです。
PowerShellでフォームの作成とファイルパスの取得

#初めに
みなさん始めまして。
初投稿です。よろしくお願いします。
フォームの使い方の備忘録として書きました。
概要としては、PowerShellにてフォームを作成しユーザにダイアログを用いてファイルを選択をさせ、そのファイルパスを取得していきます。

下図が作成したフォームになります。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425994/4a9a4173-a5fb-17ac-6f0b-b5869d38ea1c.png)

#参考
[PowerShellをはじめよう　～PowerShell入門～: PowerShellでユーザーフォームを作る　- 基礎編 -](https://letspowershell.blogspot.com/2015/07/powershell_9.html)

#フォームの作成
初めに必要なアセンブリを読み込んでいきます。

```powershell
#アセンブリ読み込み
Add-Type -AssemblyName System.Windows.Forms
Add-Type -AssemblyName System.Drawing
```

次に必要なフォームを作成していきます。
ここでメインのフォームを作成しサイズを決定します。
設定するプロパティの概要
 Size:(横幅,縦幅) で指定
 Text:ラベル等に表示される文字

```powershell
#フォーム作成
$Form = New-Object System.Windows.Forms.Form 
$Form.Size = New-Object System.Drawing.Size(400,130) 
$Form.Text = "フォーム作成サンプル"
```

次に必要なラベル,テキストボックス,ボタンを作成していき該当のものをフォームに追加します。
設定するプロパティの概要
 Location:フォーム内の設置座標を(X,Y)で指定
 DialogResult:ボタンを押された時に返す値、次のいずれかとなる(None, OK, Cancel, Abort, Retry, Ignore, Yes, No)


```powershell
#ラベル作成
$LabelFilePath = New-Object System.Windows.Forms.Label
$LabelFilePath.Location = New-Object System.Drawing.Point(20,10)
$LabelFilePath.Size = New-Object System.Drawing.Size(80,20)
$LabelFilePath.Text = "ファイルパス"
$Form.Controls.Add($LabelFilePath)

#テキストボックス
$TextBoxFilePath = New-Object System.Windows.Forms.TextBox
$TextBoxFilePath.Location = New-Object System.Drawing.Point(20,30)
$TextBoxFilePath.Size = New-Object System.Drawing.Size(300,20)
$Form.Controls.Add($TextBoxFilePath)

#参照ボタン
$ButtonFilePath = New-Object System.Windows.Forms.Button
$ButtonFilePath.Location = New-Object System.Drawing.Point(320,30)
$ButtonFilePath.Size = New-Object System.Drawing.Size(40,20)
$ButtonFilePath.Text = "参照"
$Form.Controls.Add($ButtonFilePath)

#OKボタン
$ButtonOK = New-Object System.Windows.Forms.Button
$ButtonOK.Location =  New-Object System.Drawing.Point(300,60)
$ButtonOK.Size = New-Object System.Drawing.Size(60,20)
$ButtonOK.Text = "OK"
$Form.Controls.Add($ButtonOK)

#Cancelボタン
$buttonCancel = New-Object System.Windows.Forms.Button
$buttonCancel.Location =  New-Object System.Drawing.Point(230,60)
$buttonCancel.Size = New-Object System.Drawing.Size(60,20)
$buttonCancel.Text = "キャンセル"
$buttonCancel.DialogResult = "Cancel"
$Form.Controls.Add($buttonCancel)
```
#ボタンに動作の追加
参照ボタンをクリックしたときの動作を追加します。
Windows標準のダイアログを使用し、OKを押された時のみテキストボックスにファイルパスを記述します。

```powershell
#参照ボタンをクリック時の動作
$ButtonFilePath.add_click{

    #ダイアログを表示しファイルを選択する
    $Dialog = New-Object System.Windows.Forms.OpenFileDialog
    if($Dialog.ShowDialog() -eq "OK"){
        $TextBoxFilePath.Text = $Dialog.FileName
    }
}

```

ここにバリデーションチェックなどを実装してもよいです。今回は値が入力されていない場合のみテキストボックスの背景色を黄色にする処理を入れました。

```powershell
#OKボタンをクリック時の動作
$ButtonOK.add_click{

    #ファイルパスが入力されていないときは背景を黄色にする
    if($TextBoxFilePath.text -eq ""){
        $TextBoxFilePath.BackColor = "yellow"
    }else{
        $Form.DialogResult = "OK"
    }
}
```

#フォームの表示
先ほどまで作成したフォームを表示させます。
ファイルを選択しOKボタンを押下するとファイルパスが返ります。

```powershell
#フォームを表示し処理が完了したらファイルパスを返す
$Result = $Form.ShowDialog()
if($Result -eq "OK"){
    return $TextBoxFilePath.text
}

```

以上
【VBA】ユーザーフォームをVBAで作成

#ユーザーフォーム作成
```vb
Sub ユーザーフォーム作成()
    Dim myNewForm, myControl, n As Long
    Set myNewForm = ActiveWorkbook.VBProject.VBComponents.Add(ComponentType:=3)
    With myNewForm
       .Properties("Height") = 240
       .Properties("Width") = 180 + 12
       .Properties("Caption") = "解析"
    End With
    
    For i = 1 To 5
        Set myControl = myNewForm.Designer.Controls.Add("Forms.TextBox.1")
        With myControl
           .Left = 55 + 5
           .Top = 5 + (i - 1) * 15
           .Height = 15
           .Width = 180 - 65
        End With
    Next
    
    For i = 1 To 5
        Set myControl = myNewForm.Designer.Controls.Add("Forms.Label.1")
        With myControl
           .Left = 5
           .Top = 5 + (i - 1) * 15
           .Height = 15
           .Width = 50
           .Caption = i
        End With
    Next
End Sub
```
##参考サイト
>初期設定
https://nasunoblog.blogspot.com/2013/10/excel-vbavbprojectvbe.html

①http://officetanaka.net/excel/vba/vbe/07.htm#sample05

>ラベルプロパティ
https://kosapi.com/post-3506/

https://ateitexe.com/excel-vba-add-userform-control/
https://www.excellovers.com/entry/2017/07/30/155613
http://pineplanter.moo.jp/non-it-salaryman/2017/05/04/vba-dynamic-control/
http://officetanaka.net/excel/vba/tips/tips112b.htm
https://qiita.com/tomochan154/items/3614b6f3ebc9ef947719
【WordPress】フィード

# feedのauthorを変更

__概要__

feedのauthorを変更

__施策__


```php
/*--------------------------------------------------------
//feedのauthor名を変更
--------------------------------------------------------*/
function delete_feed_author($author) {
	if(is_feed()){
		$author = get_bloginfo( 'name' ) ;
	}
	return $author;
}
add_filter( 'the_author', 'delete_feed_author');

/*--------------------------------------------------------
//feedのauthorリンクを変更
--------------------------------------------------------*/
function delete_feed_author_url( $author_meta, $user_id ) {
	if(is_feed()){
		$author_meta = get_bloginfo( 'url' ) ;
	}
	return $author_meta;
}
add_filter( 'the_author_url', 'delete_feed_author_url');
```

---

# フィードにカスタム投稿タイプの更新を含める

__概要__

フィードにカスタム投稿タイプの更新を含める

__施策__

```php
/*--------------------------------------------------------
フィードにカスタム投稿タイプの更新を含める
--------------------------------------------------------*/
function mysite_feed_request($vars) {

	 if ( isset($vars['feed']) && !isset($vars['post_type']) ){
    $vars['post_type'] = array(
			   'post',
   			'【投稿タイプ1】',
   			'【投稿タイプ2】',
   			'【投稿タイプ3】'
 		 );
	 }
	 return $vars;
}
add_filter( 'request', 'mysite_feed_request' );
```

---

# 各フィードWordPressのバージョンを削除

__概要__

各フィードWordPressのバージョンを削除

__施策__


```php
/*--------------------------------------------------------
各フィードWordPressのバージョンを削除
--------------------------------------------------------*/
remove_action('rss2_head', 'the_generator');
remove_action('rss_head', 'the_generator');
remove_action('rdf_header', 'the_generator');
remove_action('atom_head', 'the_generator');
```
terminalが起動しない...

- コマンドを打てるように、Ubuntu Softwareから、代替として、xtermなどをインストールする。
- terminalを開いてクラッシュした後、すぐに以下のコマンドを実行する。

```
# システムログの末尾を表示し、クラッシュの原因を確認する...
tail /var/log/syslog

# 下記のコマンドにより、再びterminalを開くことができた。
dbus-update-activation-environment --all

```
【WordPress】初期設定

# データベーステーブルの接頭辞の変更

__概要__

複数インストールされる場合やセキュリティを観点からテーブル名の接頭辞を変更する

[データベース・テーブル名の接頭辞](http://wpdocs.osdn.jp/wp-config.php_%E3%81%AE%E7%B7%A8%E9%9B%86#.24table_prefix_:_.E3.83.87.E3.83.BC.E3.82.BF.E3.83.99.E3.83.BC.E3.82.B9.E3.83.BB.E3.83.86.E3.83.BC.E3.83.96.E3.83.AB.E5.90.8D.E3.81.AE.E6.8E.A5.E9.A0.AD.E8.BE.9E)

> $table_prefix は、データベース・テーブル名の先頭に付ける値です。データベースの接頭辞を wp_ 以外にしたい場合、この値を変更してください。主に、同じデータベースで複数の WordPress ブログを設置するときに変更します。
値には半角英数字とアンダースコア（_）のみ使えます。

__施策__

__wp-config.php__

「$table_prefix = ‘wp_’;」の’wp_’をユニークな名前に変更する

```php

/**
 * WordPress データベーステーブルの接頭辞
 *
 * それぞれにユニーク (一意) な接頭辞を与えることで一つのデータベースに複数の WordPress を
 * インストールすることができます。半角英数字と下線のみを使用してください。
 */
$table_prefix  = 'ex_';

```

---

# 認証用ユニークキー設定

__概要__

ユーザーの Cookie に格納される情報をより強固な暗号化によって守るために認証用ユニークキーを設定する必要があります。

[認証用ユニークキーとは？](http://wpdocs.osdn.jp/wp-config.php_%E3%81%AE%E7%B7%A8%E9%9B%86#.E8.AA.8D.E8.A8.BC.E7.94.A8.E3.83.A6.E3.83.8B.E3.83.BC.E3.82.AF.E3.82.AD.E3.83.BC)

> 秘密鍵（シークレットキー） とは、パスワードにランダムな要素を加えることによってサイトへの不正アクセスや侵入・改竄を難しくする「ハッシュ用 salt」です。
簡単に言えば、秘密鍵はセキュリティの壁を破るのに必要なオプションを生成する難易度を高めるための要素を加えたパスワードです。「password」や「test」のようなパスワードは単純で簡単に破られてしまいます。「88a7da62429ba6ad3cb3c76a09641fc」のようにランダムで推測できないパスワードであれば、正しい組み合わせを見つけ出すまでには何年もかかるでしょう。

__施策__

[秘密鍵サービス](https://api.wordpress.org/secret-key/1.1/salt/)にアクセスして「認証用ユニークキー」を設定

__wp-config.php__

``` php
define('AUTH_KEY',         '認証用ユニークキー');
define('SECURE_AUTH_KEY',  '認証用ユニークキー');
define('LOGGED_IN_KEY',    '認証用ユニークキー');
define('NONCE_KEY',        '認証用ユニークキー');
define('AUTH_SALT',        '認証用ユニークキー');
define('SECURE_AUTH_SALT', '認証用ユニークキー');
define('LOGGED_IN_SALT',   '認証用ユニークキー');
define('NONCE_SALT',       '認証用ユニークキー');
```

---

# 自動保存設定

__概要__

自動保存設定

__施策__

__wp-config.php__

```php
//自動保存　5分毎保存　（60秒x5分）
define('AUTOSAVE_INTERVAL',300);
```

---

# リビジョン管理

__概要__

リビジョンの指定

__施策__

__wp-config.php__

__リビジョンの停止__

``` php
define(‘WP_POST_REVISIONS’, false);
```

__リビジョンの指定 10個まで保存__

``` php
define('WP_POST_REVISIONS', 10);
```

__関連リンク__

[リビジョン管理](https://wpdocs.osdn.jp/%E3%83%AA%E3%83%93%E3%82%B8%E3%83%A7%E3%83%B3%E7%AE%A1%E7%90%86)

---

# テーマ、プラグインの新規追加と更新、編集をさせない

__概要__

テーマ、プラグインの新規追加と更新、編集をさせない

__施策__

__wp-config.php__

``` php
// テーマ、プラグインの新規追加と更新、編集をさせない
define('DISALLOW_FILE_MODS',true);
```

---


# wp-config.phpを非公開ディレクトリに移動

__概要__

wp-config.phpを非公開ディレクトリ(サイトルートの1つ上)に移動

__施策__

WordPressがインストールされているディレクトリに[wp-config.php](http://wpdocs.osdn.jp/wp-config.php_%E3%81%AE%E7%B7%A8%E9%9B%86#Moving_wp-content)が無い場合、一つ上のディレクトリを見に行く仕様を利用して、WordPress セキュリティ対策のため[wp-config.php](http://wpdocs.osdn.jp/wp-config.php_%E3%81%AE%E7%B7%A8%E9%9B%86#Moving_wp-content)をサイトルートの上(非公開ディレクトリ)に移動する事ができます。

> ※サイトルートにWordPressをインストールした場合に限る


---

# 各種サポート設定

__施策__

``` php
function theme_setup() {
	///タイトルタグサポート
	add_theme_support( 'title-tag' );
	///アイキャッチサポート
	add_theme_support('post-thumbnails');
}
add_action( 'after_setup_theme', 'theme_setup' );
```

__関連リンク__

[after_setup_theme](http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/add_theme_support)
Amazon Linux 2でdocker、docker-composeを使う（2019年5月）

生 EC2 の Amazon Linux 2 上で、docker 18.09.2、docker-compose 1.23.2 を使ってみます。（2019年5月現在）

# docker のインストール

ec2-user 権限でログインして、docker をインストールします。

```sh
sudo yum update -y
sudo yum install -y docker
sudo service docker start
sudo chkconfig docker on
sudo usermod -a -G docker ec2-user
```

ログインし直すと docker コマンドが使えるようになります。

```sh
docker --version
Docker version 18.06.1-ce, build e68fc7a215d7133c34aa18e3b72b4a21fd0c6136
```

# docker-compose のインストール

docker-compose は https://docs.docker.com/compose/install/ の
「Linux」タブに記載の手順でインストールしていきます。

```sh
sudo curl -L "https://github.com/docker/compose/releases/download/1.23.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

sudo chmod +x /usr/local/bin/docker-compose

docker-compose --version
docker-compose version 1.23.2, build 1110ad01
```

今回 1.23.2 を選んだのは [Docker Desktop](https://www.docker.com/products/docker-desktop) とバージョンを揃えるためです。
リリース一覧は https://github.com/docker/compose/releases にあります。

# Alpine Linux の起動

とりあえず、軽量な [Alpine Linux](https://alpinelinux.org) を起動してみます。

```sh
docker run -it alpine sh
```

Alpine Linux は軽量すぎて bash すら入っていないので、入れる必要があります。

```sh
apk add bash && bash
```

Alpine Linux 以外に Ubuntu も Amazon Linux すらも動きます。

```sh
docker run alpine cat /etc/os-release
docker run ubuntu cat /etc/os-release
docker run amazonlinux cat /etc/os-release
```

Alpine Linux は 5.5MB、Ubuntu は 70MB、Amazon Linux は 162MB。
だいぶ容量が違います。

```
docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
amazonlinux         latest              b94321659aca        4 days ago          162MB
ubuntu              latest              7698f282e524        12 days ago         69.9MB
alpine              latest              055936d39205        2 weeks ago         5.53MB
```
Flutterアプリ開発の備忘録

アプリ開発のFlutterの勉強を始めました。
その備忘録(途中)です。

# Flutterを選んだ経緯

>iOS,Android両OSのアプリを開発するための手法検討
https://qiita.com/hikarut/items/974e5782a3c0bf26f82a

>FlutterとReact Native(とXamarin)の正しい(?)比較
https://qiita.com/Cat_sushi/items/5644443516ebb79b9ab3

ネイティブから勉強すべきとの意見には賛成ですが、新しいもの好きだったのでFlutterにしました。
最近の仕事がReactだったのでRNも視野でしたが、新しいもの好きだったのでFlutterにしました。


# Flutter開発環境

>Flutter開発環境構築(Mac編)
https://qiita.com/akatsukaha/items/3b8a5a6d94a3cdb1e047

インストールが3つ必要
1. FlutterSDK
2. AndroidStudio
3. Xcode

# FlutterにGooglemap表示

>Google公式Flutter用Google Mapsプラグインを一通り使ってみた
https://qiita.com/aoinakanishi/items/25f2526fc7c1fe8350c6 

## GitHub
> git clone 出来ない( ﾉД`)…おぉー！出来たー( ;∀;)!!!
https://qiita.com/tedkuma/items/3b539e79010a4808337c

GoogleMapプラグインをGithubからcloneする必要があったのでGitHubの使い方を調べました。
Railsで基本情報技術者試験の過去問題サイトを作る（５：API編）

# はじめに
ゆる〜く学ぶ。みんなのWeb勉強コミュニティー。　「にゅ〜ぶる会」を運用中です。
https://newburu.github.io/

そこで、何か教育用のコンテンツが欲しいなぁ〜と思い立ち、今回の企画をスタートしました！

Railsで基本情報技術者試験の過去問題サイトを作ります！

# 最終目標
- 問題・回答の登録は、Scaffoldで簡易でOK
- APIを用意して、ランダムに問題を抽出する機能を追加する
- TwitterBOT、LINEBOT、SlackBOTが出来たら良いな

# 履歴
１：構築編
　　https://qiita.com/newburu/items/ed59f47ac645b19620f6
２：日本語化(i18n)編
　　https://qiita.com/newburu/items/4f12fdb61bf6cd601545
３：親子関係、登録編
　　https://qiita.com/newburu/items/f2a20289be5ec1fc1b77
４：親子関係、参照編
　　https://qiita.com/newburu/items/51b11bd02691efc2cc0d
５：API編
　　本ページ
６：SlackBOT編
　　https://qiita.com/newburu/items/aeeb9acb453da786bd59
７：Herokuデプロイ〜自動化編
　　https://qiita.com/newburu/items/0a8bb02e1e8c8fe737c7

# 今回やる事
- 登録された問題を返すAPIを作ります

# APIを作ります

## 1. gem 'jbuilder'を追加します。
JSONを戻すAPIにするため、JSON用のGEMを追加します。

```ruby:./Gemfile
gem 'jbuilder', '~> 2.5'
```

## 2. APIの口を作ります
routes.rbに、以下を追加します。

```ruby:config/routes.rb
  # API用(JSONを返すため、formatを指定する)
  namespace :api, { format: 'json' } do
    namespace :v1 do # APIのため、バージョンを意識して作る
      get 'questions/:id', to: 'questions#show'
    end
  end
```

## 3. API用のコントローラーを追加します。

API用、V1用と分けているため、ディレクトリもそれに合わせて階層を作成します。

```ruby:app/controllers/api/v1/questions_controller.rb
class Api::V1::QuestionsController < ApplicationController

  def show
    @question = Question.find(params[:id])
  end

end
```

## 4. ViewでJSONを返す様に設定します。
```ruby:app/views/api/v1/questions/show.json.jbuilder
json.data do
  json.question @question, :category1, :category2, :category3, :msg
  json.answers do
    json.array! @question.answers, :msg, :correct
  end
end
```
jbuilderの使い方は、こちらあたりを参照にしたら良いかと思います。
https://qiita.com/ryouzi/items/06cb0d4aa7b6527b3645

## 5. 確認します。
### まずは、画面から確認します。
「[http://localhost:3000/questions/1](http://localhost:3000/questions/1)」にアクセスします。

<img width="165" alt="問題参照画面" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/118481/beb71de9-5e15-ad82-6fec-9feb37267242.png">

### API用のURLにアクセスします。
「[http://localhost:3000/api/v1/questions/1](http://localhost:3000/api/v1/questions/1)」にアクセスします。
※最後の１は、idです。

こんな感じの文字列が表示されればOKです！

```json:レスポンス結果
{"data":{"question":{"category1":"あ","category2":"い","category3":"う","msg":"え"},"answers":[{"msg":"お","correct":true},{"msg":"か","correct":false}]}}
```

# 今回はここまで
ありがとうございました！
次回は、ランダム取得用のAPIを追加して、問題集APIっぽくするよ！
RSA 暗号の高速化: モンゴメリリダクション

#はじめに
モンゴメリリダクションは (ab mod N) のような乗算剰余算を高速に行う手法の一つです
計算に時間のかかる除算を行うことなく加算, 減算, 乗算, シフト演算のみで乗算剰余算を行えるため
高速に計算を行うことができます
RSA 暗号の計算は(C^d mod N)のようなべき剰余算の計算に時間がかかるため
モンゴメリリダクションを適用することで計算の高速化ができます．

##RSA暗号のモンゴメリリダクションによる高速化
下記の図のように変数を置く
モンゴメリリダクションを利用する前にいくつか事前計算を行う
(秘密鍵やアルゴリズム固有の数が定数なため事前計算ができる)

###事前計算

* N は定数
  * RSA暗号の秘密鍵をp, q とした場合 N=pq
* R を2のべき乗数とする
  * べき乗数じゃなくてもアルゴリズムを適用できる 
  * べき乗数と置いたら高速に計算できる
* R_2の定数化
  * R, Nが定数よりR_2もまた定数にできる
* R^-1, N^-1の定数化
  * R, N が定数なため計算できる


###関数MR の計算 (この関数MR がモンゴメリリダクション)
ここがモンゴメリリダクションのすごいところ!

* s の計算
  * R が2のべき乗数より x mod Rの計算が &演算で計算できる
* t の計算
  * R が2のべき乗数より (x+s)/R の計算がシフト演算でできる

剰余算, 除算が &演算とシフト演算でできる!!!!!!!!
### ab mod Nの計算方法

* 関数Mは整数を入力することでモンゴメリ表現に変換できる (a, b をモンゴメリ表現 A, B に変換)
* モンゴメリ表現で乗算 (A ⊕ B)
* 関数M^-1 はA ⊕ Bを入力することで通常表現に変換でき ab mod N　ができた

これで計算ができた!!
わかりにくい人は下のプログラムファイルを見たらどういう計算になってるかわかるかも

<img width="713" alt=" 2019-05-28 22.08.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/353646/83f41ac6-7ded-1927-e4fa-4afdc3633254.png">

##プログラムファイル
入力: a, b
出力: OK, NG (計算があってたらOKを出力)
a, bを入力することで ab mod Nを計算します
事前にN は定数化しています
変更する場合は, NINV, R2 も変更してください
変更してNGが出た場合どちらかの計算が間違っています
逆元求め方とかで調べたら計算方法を知ることができると思います

```cpp
#include<bits/stdc++.h>
using namespace std;
//a*b mod Nを計算したい
#define N 169  //N
#define NINV 103  // N*N'≡-1
#define R 256 // 剰余算を削除するためにめ2の冪乗にする
#define R2 133 //R2 = R^2 mod N 
#define RIND 8 //指数部分 2^8 だから8

//MontgomeryReduction
int MR(int x){
    return (x + (x * NINV & (R-1)) * N) >> RIND;
}

//MontgomeryModularMultiplication
int MMM(int a, int b){
    int A = MR(a*R2);
    int B = MR(b*R2);
    return MR(MR(A*B));
}

int main (void){
    int a, b;
    cin >> a >> b;
    int ans = MMM(a, b);
    if(ans == a*b % N)
	cout << "OK" <<endl;
    else
	cout << "NO" <<endl;
    
    return 0;
}

```


###参照リンク
[モンゴメリ法及び並列化を適用した耐サイドチャネル攻撃RSA復号回路の高位合成](https://github.com/NaokiOsako/PR/blob/master/GraduationThesis/Thesis.pdf)
Gitでpullしてnpm runしたらModule not found: Error: が出た時の対処法

最近、複数人でvueを使った開発を始めたのですが、
PWA対応にしようということで、
[Vue.jsプロジェクトのPWA対応](https://qiita.com/unhurried/items/4da8f7ba03ade64c77da)
の記事を参考に [ @vue/cli-plugin-pwa](https://www.npmjs.com/package/@vue/cli-plugin-pwa)というプラグインを追加してから、
githubのレポジトリにpushしました。

しかし、他の開発者がこの修正をpullした後に、ビルドしたら下記のエラーが出ました。

```
「Module not found: Error: Can't resolve register-service-worker...以下略」
```

register-service-workerがインポートできないみたいです。
なんでだろう。

結論から言うと、

```
npm install
```

のコマンドで解決しました。

npmを使った開発が初めてで何にもわかってませんでしたが、
git pullしただけでは、プラグインは共同開発者の開発環境には入らないんですね。

ライブラリなどの情報は`package.json`ファイルに記載されているので、
他の開発者のコミットでこのファイルに修正が入った時は、
git pullした後に、npm installで追加されたライブラリなりなんなりをインストールする必要があったという話でした。
用語：時代とハードソフトの境界領域

まぎらわしい、間違えやすい、行き違いの多い略号worst 10(候補24)
https://qiita.com/kaizen_nagoya/items/0bff5dbb72208053489b

では、IT分野に限らず、ITの対象になる領域まで用語を広げたため、収拾できそうになくなりました。

用語の衝突(用語・用例募集中)
https://qiita.com/kaizen_nagoya/items/6a8eb7ffaa45eeb16624

始めるにあたり、自分ではIT分野に限定しました。
少しづつ用語を増やしていくと、
a, as, is, itなどの英単語そのものや、
IT分野に隣接した用語も候補としてあがってきました。

IT分野に限定するものの、提案のあったものは全部掲載する方向でいます。

用例として、別の単語の方が代表的(popular)であれば、別の用語に置き換える方向で調整しています。
# 時間
昔の用語、ちょっと前に流行った用語の取り扱いに迷いがあります。

C++ preprocessorって、知らない人は知らない。
自分は最初に触ったC++処理系がC++ PreProcessorでした。
C++のソースコードが入力で、CコンパイラでコンパイルできるCのソースコードが出力でした。
思い入れが強いため、ついつい追記してしまいました。

C for Graphics(Nvidia language, April 2012)
は、2012年から更新されていないため、入れるかどうか迷いました。
# 論理回路
CPUのレジスタ名は、アセンブラでは予約語として使うため、ソフトウェアという意識でした。特に、8086系のCPUのレジスタ名など。

しかし、Webアプリを作っている人には、そんな名前は全く知らない単語。
# 投票予定
用例の並びも、どうするか悩んでいる事項です。

用語の範囲と並びを投票で決めようと思っています。

Twitter, facebook, マストドンなどで投票を行い、
多い順にならべることと、誰も投票しなかった用語は、
最終版に含めないようにするというような感じ。

提案のあったものは、類似の用語で代替されているものは置き直す可能性はあるものの、原則として採択する方向です。
### 編集リクエスト
編集リクエストで、１箇所だけのもので、
<img width="212" alt="conflict.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/72b61dd6-aeab-6daa-7865-795aef8a3494.png">

という表示が出て、編集リクエストを処理できないことがありました。

以前は、構造的な編集をしていた時に、複数箇所の編集リクエストをいただいた時に、修復不可能そうなエラーになったことがありました。

単一の編集リクエストでも、エラーがでることが確認できました。

誤植なども、なるべく編集リクエストではなく、コメントでお願いできると幸いです。

# 自己参考(self reference)

英語(0) 一覧
https://qiita.com/kaizen_nagoya/items/680e3f5cbf9430486c7d

言語・文学記事　１００
https://qiita.com/kaizen_nagoya/items/42d58d5ef7fb53c407d6

日本語（０）一欄
https://qiita.com/kaizen_nagoya/items/7498dcfa3a9ba7fd1e68

一覧の一覧( The directory of directories of mine.) Qiita(100)
https://qiita.com/kaizen_nagoya/items/7eb0e006543886138f39

プログラマが知っていると良い「公序良俗」
https://qiita.com/kaizen_nagoya/items/9fe7c0dfac2fbd77a945

Error一覧 error(0)
https://qiita.com/kaizen_nagoya/items/48b6cbc8d68eae2c42b8

＜この記事は個人の過去の経験に基づく個人の感想です。現在所属する組織、業務とは関係がありません。＞
This article is an individual impression based on the individual's experience. It has nothing to do with the organization or business to which I currently belong.

# 文書履歴(document history)

ver. 0.01 初稿 　 20190526
ver. 0.02 ありがとう追記 　 20230529

### 最後までおよみいただきありがとうございました。

いいね　💚、フォローをお願いします。

#### Thank you very much for reading to the last sentence.

Please press the like icon 💚　and follow me for your happy life.
DOMで動的にボタンを生成し、ボタンを削除するサンプルコード

おはこんばんちわ。
プログラミング初心者のオジサンです。

JavaScriptでミニアプリを作成しているのですが、そのアプリでは動的にボタンを生成する機能があります。
今回はテストがてら、DOMだけでボタンを生成したり、削除するサンプルコードを作ってみました。

##1.HTML（index.html）
今回もDOMでボタンを作るため、bodyタグの中はほぼ空です。
JavaScriptを読み込むためのscriptタグしかありません。
時間はかかりますが、DOMの勉強にはこれぐらいの縛りプレイがいいのかなと思います。

```html
<!DOCTYPE html> 
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>DOMで動的にボタンを作る</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <script src="js/main.js"></script>
</body>
</html>
```

##2.CSS（css/styles.css）
動作確認が見やすくなるよう、書式は少し整えました。
たくさんボタンを作っても見やすいように、flexを使ってます。
そして後のJavaScriptで出てきますが、擬似的にクリックしたボタンを削除するため、非表示にするクラスを作っています。

```css
/* 追加ボタンの書式設定 */
.addition {
    display: flex;
    margin: 10px auto;
}

/* 削除ボタンの書式設定 */
.deletion {
    flex-direction: row;
    width: 5%;
    margin-right: 5px;
    margin-bottom: 5px;
}

/* クリックしたボタンを非表示にし、擬似的に削除した風にする */
.hidden {
    display: none;
}
```

##3.JavaScript（js/main.js）
今作ってるミニアプリでは、どんどんボタンが追加できる仕様となっています。
そのため制限は設けず、「追加」ボタンをクリックすると、bodyタグの下にどんどんボタンが増殖されるようにしました。

なお、追加されるボタンにはユニーク番号（key）を持たせ、クリックするとボタンが削除（本当はクラスを付けて非表示にするだけ）される仕組みにしました。

```javascript
{
    // 追加ボタンをinputタグで作り、bodyタグの子要素に入れる
    let key = 0;
    const addButton = document.createElement('input');
    addButton.classList.add('addition');
    addButton.type = 'button';
    addButton.value = '追加';
    document.body.appendChild(addButton);

    // 追加ボタンをクリックしたら、ナンバー付の削除ボタンをinputタグで作る関数
    function buttonAdd() {
        const addButtonClick = document.getElementsByClassName('addition')[0];
        addButtonClick.addEventListener('click', ()=> {
            const delButton = document.createElement('input');
            delButton.classList.add('deletion');
            delButton.type = 'button';
            delButton.value = `${key}：削除`;
            document.body.appendChild(delButton);
            key++;
            buttonDelete();
        }, false);
    }

    //クリックした削除ボタンを取る関数（実は非表示にするだけ）
    function buttonDelete() {
        for (let i = 0; i < key; i++) {
            const deleteButtonClick = document.getElementsByClassName('deletion')[i];
            deleteButtonClick.addEventListener('click', ()=> {
                deleteButtonClick.classList.add('hidden');
            }, false);
        }
    }

    buttonAdd()
}
```
##4.最後に
少々パワープレーっぽい方法ではありますが、なんとかエラーも出ず、想定したとおりに動かすことができました。
今後、よりスマートな方法が見つかりましたら、またアップデートします。
【Java】意外に知らないStream.of()とArrays.stream()メソッドの違い

## はじめに
Javaにおいて配列からStreamを取得する場合、`Stream.of()`メソッドまたは`Arrays.stream()`メソッドを用いることで取得することができます。

どちらのメソッドも一見同じ結果が得られるように思えてしまうこともあり、私にはこれらのメソッドの違いがわかっていませんでした。

そこで、これら2つのメソッドの違いを調べてみたところ大きく2つの違いがあることがわかりました。

## 1.返却される型の違い
プリミティブ型の配列(例えばint[])をこれらのメソッドの引数に用いた時には、返却される型が異なります。

例えばint[]を引数にした場合、`Stream.of()`メソッドの場合は`Stream`を返しますが、`Arrays.stream()`メソッドの場合は`IntStream`を返すという違いがあります。

また、プリミティブ型のStreamを用いた処理に理想的なクラスは`IntStream`といったプリミティブStreamなので、`Stream.of()`メソッドを用いた場合は プリミティブStreamに変換する必要があります。

なお、`Stream.flatMapToInt()`や`Stream.flatMapToLong()`といったメソッドを用いると変換することができます。

## 2.引数がジェネリクスかどうか

プリミティブ型の配列からStreamを取得しようとした場合、`Arrays.stream()`メソッドはint[], long[], double[]の3つのプリミティブ型にしか対応していません。

そのため、例えばchar[]は`Arrays.stream()`メソッドに引数として用いることができません。

ただし、参照型に関しては引数に問題なく用いることができます。

一方で、`Stream.of()`メソッドは引数がジェネリクスであるため、どんな型の配列でも引数で用いることができます。

以上の内容を表にまとめると下記の表1のようになります。

表1. それぞれのメソッドと引数に用いることのできる配列の型の関係

| 引数に用いる配列の型 |     Arrays.stream()    |    Stream.of()    |
|:-----------------|:------------------:|:------------------:|
| double型          |        ○ |   ○   |
| float型           |        × |   ○   |
| long型            |        ○ |   ○   |
| int型             |        ○ |   ○   |
| short型           |        × |  ○    |
| byte型        　  |        × |    ○  |
| char型        　  |        × |     ○ |
| boolean型         |        × |    ○  |
| String型          |        ○ |     ○ |
| クラス型    　     |        ○ |    ○  |


##おわりに
以上のことから`Stream.of()`メソッドと`Arrays.stream()`メソッドには返り値の型および引数に適用できる型に違いがあり、プリミティブ型の配列を用いる際には特に注意が必要であるということがわかりました。

一個人の調べてみての感想としては、`Stream.of()`メソッドの方を使っておくのが無難かなぁという感じです。
これらのメソッドの使い分けについてご意見ありましたらお聞かせいただけますと幸いです。

最後までお読みいただきましてありがとうございました。

##参考
https://www.geeksforgeeks.org/difference-between-stream-of-and-arrays-stream-method-in-java/
https://docs.oracle.com/javase/jp/11/docs/api/java.base/java/util/Arrays.html
https://docs.oracle.com/javase/jp/11/docs/api/java.base/java/util/stream/Stream.html
Slack APIでボタン付きメッセージ(interactive message buttons)を使いたい

# まとめ
- Slack APIでボタン付きメッセージが使えるパッケージがPackagist.orgで見つからない
- nexylan/slack はあったがAPI必須パラメータのcallback_idが設定できない
- forkしてみた https://github.com/yuki777/slack
- packagist.orgに登録した。 https://packagist.org/packages/yuki777/slack
- 【宣伝】https://www.owl-coin.com で使ってます。よろしく :)


# イメージ
- ボタンが使えます
<img width="661" alt="スクリーンショット 2019-05-28 22.13.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8352/d08237bf-2328-9ef1-e50a-161f29c184b4.png">
- 確認画面も使えます
<img width="597" alt="スクリーンショット 2019-05-28 22.13.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8352/1757977e-91aa-2683-bf81-559ff8491baa.png">
- この記事にイイネ、ストックがついたらもう少しちゃんと記事を書きます
[C#]複数のTaskをgolangのselectみたいに待ちたい

C#で複数のTaskを待つ時は**Task.WhenAny**を使用します。


```csharp:Task.WhenAny
async Task HeavyTask() { await Task.Delay(3000); }

var heavyTask = HeavyTask();
// 最初に完了したTaskが戻り値となる
var completed = Task.WhenAny(heavyTask, Task.Delay(1000));

// heavyTaskが完了したかどうか
// heavyTask.IsCompletedを調べるのでもよい
if (heavyTask == completed)
{
    Console.WriteLine("done");
}
else
{
    Console.WriteLine("timeout");
}
```

これでもできなくはないのですが**3個以上のタスクを待ちたくなった場合**や**戻り値がある場合**は少し面倒です。

golangの場合、複数のchannelを待つ場合は以下のように書けます。

```golang:select
// 重い処理が終わった後に値を送信するチャンネル
ch := make(chan string)

go func() {
    // 重い処理 ...
    time.Sleep(3 * time.Second)
    
    // 結果を送信
    ch <- "hogehoge"
}()

select {
// 処理が終わった場合
case text := <-ch:
    log.Printf("result: %v", text)
// タイムアウトした場合
case <-time.After(1 * time.Second):
    log.Printf("timeout")
}
```

重い処理が完了するのを待ちつつ100ミリ秒ごとに定期処理をする場合は以下のように書けます。

```golang:select2
// 前半部分は同じ

for i := 0; ; i++ {
    select {
    case text := <-ch:
        log.Printf("result: %v", text)
        return
    case <-time.After(100 * time.Millisecond):
        log.Printf("now loading - %v", i)
    }
}
```

**C#でも似た使い勝手でC#らしさを残した書き方**ができないか考えました。
最終的に以下のようになりました。

```csharp:like-select
var finish = false;
var heavyTask = Task.Run(async () =>
{
    await Task.Delay(3000);
    return "hogehoge";
});

for (var i = 0; !finish; i++)
{
    finish = await MochiTask.Switch(
        async c =>
        {
            var text = await c.Case(heavyTask);
            Console.WriteLine($"result: {text}");
            return true;
        },
        async c =>
        {
            await c.Case(Task.Delay(100));
            Console.WriteLine($"now loading - {i}");
            return false;
        }
    );
}
```

![switch.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42193/cf5d3da8-ab74-8389-f093-062796f8eb2a.gif)

すこし奇妙なコードですがgolangとだいたい同じになりました。
**awaitを使用している**のがC#らしさでしょうか。


動くコードは[ここのサンプル](https://github.com/yaegaki/Mochi)にあります。
(テストしていないのでバグってるかもしれませんが…)

## 解説

この機能を解説する上で重要なポイントは**非同期メソッドとAwaiterの連携**です。

C# 7.0から非同期メソッドの戻り値として任意の型を返すことができるようになりました。
`MochiTask.Switch`に渡す非同期メソッドの戻り値の型が`SwitchCase<T>`になっています。
`SwitchCase<T>`はメンバ変数として**非同期メソッド内で初めてawaitされたISwitchCaseCondition型の変数**を持っています。
`ISwitchCaseCondition`は`c.Case`の戻り値であり**任意の一つのタスク**を持ちます。
また、**外部から継続を実行/キャンセルを差し込む**機能を持っています。

`MochiTask.Switch`は複数の`SwitchCase<T>`から`ISwitchCaseCondition`を取り出し、**完了している`ISwitchCaseCondition`には継続**を、**完了しなかった側にはキャンセル**を差し込みます。
これによって複数のタスクから一つだけを選択して継続を実行するということを実現しています。

## 最後に

実用的かと聞かれると微妙ですがなかなか面白いのではないでしょうか。
サンプルを見てすぐに実装が思い浮かんだ人はとても強いと思います。
(あまり需要がないと思うので)解説は適当に書きましたが興味があれば以下のソースを見てみてください。

* [MochiTask.Switch.cs](https://github.com/yaegaki/Mochi/blob/master/Mochi.Async/MochiTask.Switch.cs)
* [SwitchCaseAsyncMethodBuilder.cs](https://github.com/yaegaki/Mochi/blob/master/Mochi.Async/SwitchCaseAsyncMethodBuilder.cs)
* [SwitchCaseCondition.cs](https://github.com/yaegaki/Mochi/blob/master/Mochi.Async/SwitchCaseCondition.cs)
VirtualBoxでCentOSの環境構築メモ

自分の作業メモになっています。
環境：Windows10

# 準備

以下をダウンロード

* VirtualBox　5.1.26
* CentOS(minimum)
* RLogin

# VirtualBoxのインストール

以下参考
https://eng-entrance.com/virtualbox-install

※ VirtualBox Extensionのインストールは省略

# CentOSのインストール

以下参考
https://eng-entrance.com/linux-centos-install#ISO-2
すべてデフォルトでインストール。
ユーザーとパスワードはインストール後に設定した。
スナップショットを作成した（起動中、仮想マシーンメニューから。）

★仮想環境からローカル環境にマウスを持ってきたいときは、**右側**のCtrlキー。
↑これ毎回調べてる気がするからそろそろ覚えたい。。

# CentOSの設定

自分のユーザにsudo権限つける→visudo
以下参考
https://eng-entrance.com/linux-root

# SSH設定（うまくいかなかった分）

以下参考
https://www.adoc.co.jp/blog/e000283.html

* VirtualBoxのネットワーク設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185546/49184e50-f595-8e99-a61d-2c91cd1820b3.png)


→ポートフォワーディング設定

* RLoginの設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185546/cc734ef3-93c6-30c2-987d-a42cbd7e8c14.png)
→ポートフォワーディングした先に接続⇒SSH接続できない！？

# うまくいかなかったため、設定変更

上記の設定でうまくいくと思っていたが、うまくいかなかったため、行ったこと。

* ここのサイト全般やってみた。
https://qiita.com/sango/items/816136188387221f05b3
* SELinuxnの無効化→必要？
https://qiita.com/mattsun/items/470581ff34f87c7eb21d
* virtualBoxのネットワークアダプタを**ブリッジモード**に変更。→SSH接続できた。
* virtualBoxのネットワークアダプタを**NAT**+**ホストオンリーアダプター** に変更→SSH接続できた⇒今回はこちらの設定で接続することにする。以下詳細。

# SSH接続（うまくいった分）

* VirtualBoxのネットワーク設定

 * アダプター1　※ポートフォワードなし
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185546/acc57162-76eb-07b9-f76c-f9f0278f6a7e.png)


 * アダプター2
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185546/f7f0bb25-9c45-f7cf-d98d-6ab2bb281323.png)

⇒この設定すると、仮想サーバでip確認したらipアドレスが出てくるので、RLoginでそのipアドレスに接続する
* RLoinの設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185546/a11e592a-2d2b-2f27-a58b-e1da28f1acf3.png)
⇒ServerAddressに仮想サーバで[ ip a ]コマンドを実行して、でてきたIPアドレスを入力

# 未解決

* なぜポートフォワードできなかったのか。。
* 仮想サーバを立て直したらアダプター2が選べるようになったが、1番最初に建てたサーバはアダプターのタブが非活性になって、選べなかった。なぜ選べなかったのか。。（同じ手順で建てたと思っているのだが）

⇒とりあえずSSH接続はできたので、別の作業に進みます。
RDS(SQLServer)のストレージ拡張時にエラーが出たときの対処法

# はじめに
AWSのRDS(SQLServer 2016 Standard editon)のストレージ拡張時にエラーが出た。
ググっても意外と記事が出なくて困ったので、誰かのためになればと対応方法を記載しておく。

## 環境

* RDS SQLServer 2016 Starndard edition
* ap-northeast-1
* Multi-AZ

## エラー内容

AWS Consoleにて、ストレージ拡張後に保存をすると、以下のエラーメッセージが出て、保存が出来ない。

`Cannot modify the instance because the storage type is not supported in the current instance's availability zone. Please try your request again at a later time. (Service: AmazonRDS; Status Code: 400; Error Code: StorageTypeNotSupported; Request ID: XXXXXXXXXXXXXXXXXXXXXXXXX)`

## 対応方法

1. Single-AZに変更する
2. ストレージを拡張する
3. Multi-AZにする
[BIG-IP] [REST-API] VirtualServerに証明書を設定したい。

#はじめに
AnsibleでLBの設定をする際に、REST APIを使いまくってるのだけれど、VirtualServer自体を設定するのと証明書の設定をするのは方法が違ったため、備忘録として残しておきます。
BIG-IPのREST-APIの操作は会社で行っているので、結果の記載が無いこと、また思い出しで書いてるので誤字や脱字がある可能性ご容赦下さい。



#VirtualServerの設定を確認するには
curl -sk -u "admin:admin" -H 'Content-Type application/json' -X GET https://x.x.x.x/mgmt/tm/ltm/virtual/（VS名）

VirtualServerの設定はこれで確認できるのですが、証明書の情報はこれでは確認できません。



#特定のVirtualServerに設定された証明書を確認するには
curl -sk -u "admin:admin" -H 'Content-Type application/json' -X GET https://x.x.x.x/mgmt/tm/ltm/virtual/（VS名）?expandSubcollections=true

https://devcentral.f5.com/s/articles/icontrol-rest-cookbook-24575

F5の公式サイトにある通り。
アドレスの末尾に「?expandSubcollections=true」を付けるようです。
より詳細なVirtualServerの設定内容を確認できます。
証明書の情報も入手できるようになりましたね。



#特定のVirtualServerに設定された証明書をいじるためには
上記の方法ではまだ確認しか出来ていません。
F5のサイトの証明書のところに以下のような記載があると思われます。
"selfLink": "https://localhost/mgmt/tm/ltm/virtual/~Common~vs/profiles/~Common~http?ver=13.1.0"
そう。アドレスをhttps://x.x.x.x/mgmt/tm/ltm/virtual/（VS名）/profiles/とすれば弄れるのです。

実際のコマンドは以下の通りになってます。
curl -sk -u "admin:admin" -H 'Content-Type application/json' -X POST https://x.x.x.x/mgmt/tm/ltm/virtual/（VS名）/profiles -d "name:hogeProfile , fullPath:~Common~hogeProfile , context:all"
※ファイルの配置場所について、"/"を"~"と置き換えて表記する必要があるみたいですね。
業務情報を漏洩させないための自給自足ワンライナー

株式会社オズビジョンのユッコ (@terra_yucco) です。

業務中、エンコード・エスケープされたデータを読みたいケースは山ほど登場するかと思います。Web 上にはいくつもそういうものを可読化してくれるサイトがありますが、そういうサイトは基本的にログが先方のサーバに残ります。
業務情報漏洩の観点からも、そういったサイトはできるだけ使いたくないと思っています。
※「安全な確認くん」なんてものがあるのもそのニーズかと思います。

なので、だいたい PHP を対話モードで立ち上げ、やれることは手元でやっています。そういった時に使うワンライナー？の個人用スニペットになります。

# 実スニペット
## 前提

開発時に使う local vagrant の中で済ませているので、PHP は少し古いです。
(本番とはバージョンは異なります)

```
$ php --version
PHP 5.3.27 (cli) (built: Mar 18 2016 09:38:13)
Copyright (c) 1997-2013 The PHP Group
Zend Engine v2.3.0, Copyright (c) 1998-2013 Zend Technologies
    with Xdebug v2.2.7, Copyright (c) 2002-2015, by Derick Rethans
```

## Unicode
### エスケープ

```php
php > echo json_encode(array('word' => '約75日'));
{"word":"\u7d0475\u65e5"}
```

### エスケープ解除

- API 調査時など。日本語はエスケープされているので、内容を見るときに使用

```php
php > print_r(json_decode('{"word":"\u7d0475\u65e5"}'));
stdClass Object
(
    [word] => 約75日
)
```

## URL
### エンコード

```php
php > echo urlencode('あいうえお');
%E3%81%82%E3%81%84%E3%81%86%E3%81%88%E3%81%8A
```

### デコード

- GitHub や Backlog の日本語名称のついた Wiki ページのリンクをもらった時など「これ何？」ってなって使うときアリ

```php
php > echo urldecode('%E3%81%82%E3%81%84%E3%81%86%E3%81%88%E3%81%8A');
あいうえお
```

## 日付
### Unix timestamp -> Human readable

```php
php > echo date('Y-m-d H:i:s', 1559045471);
2019-05-28 21:11:11
```

### Human readable -> Unix timestamp

- DynamoDB に timestamp を格納していることがあるので、調査でたまに使用

```php
php > echo strtotime('2019-05-28 21:11:11');
1559045471
```

## 暗号化/復号
### 暗号化

- 暗号化メソッドやキー、iv を変えればほぼ何でも対応可能

```php
php > echo base64_encode(openssl_encrypt('test', 'DES-CBC', 'key', true, 'vector12'));
RFdfe7m2Oko=
```

### 復号

```php
php > echo openssl_decrypt(base64_decode('RFdfe7m2Oko='), 'DES-CBC', 'key', 3, 'vector12');
test
```

## その他
### md5 ハッシュ値取得

- 前に外部で一緒になった方には「チケット番号の md5 を添付ファイルのパスワードにする！」って言っていた人がいた

```php
php > echo md5('HOGE-1');
621a7d2529b448adf0359a05185028ac
```

### パスワードっぽい文字列生成

- とりあえずなんかかけとけーなときに使う。

```php
php > echo substr(str_shuffle('ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_'), 0, 16);
OHnbN-c_GpqdfhAI
```
Raspberry Piで自作のPythonスクリプトをソフトのように使う方法

# Pythonスクリプトを気軽に起動したい

よく使うPythonスクリプトを実行するためにコマンドを打つのが面倒なので、アイコンのクリックで使えるようにしたい！ということで、同じことを考えている人のためにその方法を残します。

# Main Menu Editorを使う

[Main Menu Editor]を使うことで簡単に実現できます。

まず、ソフト一覧（画面左上のRaspberry Piのマーク）の[設定]の中にある、[Main Menu Editor]を開きます。

そして、表示されたウィンドウの右上にある[New Item]をクリックすると、[Launcher Properties]というウィンドウが開きます。入力する内容は次の通りです。

- Name：アイコンと共に表示する名前です
- Command：Python 3で実行するなら``python3 path/to/script``と入力し、[Launch in Terminal?]にチェックを入れます
- Comment：アイコンの上にマウスポインターを置いたときに表示される説明です
- 画像：何か分かりやすいアイコンなどがあれば設定します

これらを入力してOKをクリックすると、[Main Menu Editor]に表示されるようになっているはずです。そして、チェックマークが付いていなければ付けたあと、[Main Menu Editor]を閉じてソフト一覧を見ると、先程設定したものが表示されているはずです。

これで、デスクトップ画面にショートカットを作成して、すぐにプログラムを起動できるようになりました。

## 2019.6.11　追記

場合によっては、[Command]に ``python3 path/to/script``と入力すると、プログラム起動時にコマンドラインが表示されてしまうことがあるようです。プログラムを起動するシェルスクリプトを作成し、 [Command]にそのシェルを起動するように書けばコマンドラインは表示されません。

ちなみにデスクトップ画面にショートカットを作成するには、ソフト一覧でショートカットを作成したいソフトのアイコンを右クリックし[デスクトップに追加]を押します。
GKE でカーネルパラメータの設定

GKE でカーネルパラメータを設定したい。

[Using sysctls in a Kubernetes Cluster](https://kubernetes.io/docs/tasks/administer-cluster/sysctl-cluster/) を参考にすると

* Pod オブジェクトの spec.securityContext.sysctls[] で設定できる
* 許可をだすために PodSecurityPolicy オブジェクトを作る
* 許可をだすために kubelet に `--allowed-unsafe-sysctls` オプションを指定する

とあるが、GKE では kubelet にオプションを渡せない。

## initContainers を使う

代わりに initContainers で起動時に sysctl -w コマンドで設定してあげればできる。

```yaml
apiVersion: apps/v1
kind: Deployment
spec:
  template:
    spec:
      initContainers:
      - name: sysctl
        image: busybox
        command:
        - "/bin/sh"
        - "-c"
        - "sysctl -w net.core.somaxconn=65535"
        imagePullPolicy: IfNotPresent
        securityContext:
          privileged: true
```

参考: https://stackoverflow.com/questions/41278519/set-vm-max-map-count-on-cluster-nodes?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

## おまけ

ulimit -u や ulimit -n の値も大きくしておこうかと思ったが kubectl exec でコンテナに入って確認してみると最初から大きい値になっていた。

```
root@xxx-6864b9df86-sn5rt:/app# ulimit -n
1048576
root@xxx-6864b9df86-sn5rt:/app# ulimit -u
unlimited
```
phina.jsで簡単に背景スクロールができるTiledSpriteクラスつくった

アクションゲーム・STG制作の際など背景をスクロールしたいことがままあります。

背景スクロールを表現する方法として、例えば横方向にスクロールしたい時は2枚のスプライトを継ぎ目なく並べてスクロール方向に移動させ、適当なタイミング（画面外に出た等）で位置をリセットする方法が一般的です。

[phina.jsで背景を縦スクロールさせる！](https://shioleap.github.io/blog/Programming/JavaScript/phina-js/background-scroll/)

ただコードをシンプルにするのが難しく、またスクロール方向が1方向のみに限られるという欠点があります。

そこでもう少しシンプル、かつどのスクロール方向にも対応した方法を考えた結果、TiledSpriteクラスが生まれました。

[コードは結構長くなってしまったのでこちらをご確認ください。](https://github.com/pentamania/phina.js/blob/chimera/src/display/tiledsprite.js)

## 使い方
自前の魔改造phina.jsを読み込めばすぐ使えます。（気が向いたら本家に取り込んでもらえるようPRする…かも…）
（上のコードをコピペして適当に宣言してもOK）

```html
<script src="https://cdn.jsdelivr.net/gh/pentamania/phina.js@chimera/build/phina.min.js" type="text/javascript" charset="utf-8"></script>
```

TiledSpriteのインスタンス生成方法は普通のSpriteクラスとほぼ一緒です。
何もいじってないときは見た目も変わりません。

```js
TiledSprite("background") // globalizeしてない場合は phina.display.TiledSprite("background")
  .setPosition(gx.center(), gy.center())
  .addChildTo(this);
```

しかし内部的には[CanvasPattern](https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern)を使って描画を行ってます。
さらにoffsetX（Y）というプロパティ（厳密に言えばアクセサ）があり、この値を変えて描画範囲をずらすと、ズレた分がリピートしていることが分かります。

リピートすることを利用し、offset値に毎フレーム加算を行うとスクロールしているように見せることができます。

```js
TiledSprite("background")
  .setPosition(gx.center(), gy.center())
  .addChildTo(this)
  .on('enterframe', function() {
    // 毎フレーム行う処理
    this.offsetX += 10;
    this.offsetY += 2;
  });
```

![phina-tiledSprite-sample.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81823/1007ac23-d571-a248-0503-0a6d3dfa5b35.gif)

[**実際に動くサンプル**](https://runstant.com/pentamania/projects/67114871)

加算じゃなくて減算すればスクロール方向を逆にすることもできます。

### 参考
着想自体は[Pixi.jsのTilingSprite](https://github.com/pixijs/pixi.js/blob/dev/packages/canvas/canvas-sprite-tiling/src/TilingSprite.js)から得ました。コード内容もけっこう参考にしてます。（WebGLモードのみの機能かと思いきや、Canvas2Dモードでもできたので驚いた）
Ubuntu18.04にEagleを導入した話

#　概要 
Ubuntu18.04にEagleを導入する際、躓いた点があったので導入方法とその解決を書きます。

環境
PC:ツクモが出してるオリジナルノートPC
OS:Ubuntu18.04
Eagle:9.4.1
## Ubuntuのアップデート
作業を始める前にUbuntuにアップデート等がないか確認しておきましょう。

```
sudo apt install update
sudo apt install upgrade
``` 
## EagleをAUTODESKのページからDLしてくる
AUTODESK様が出してくださっている[無料版](https://www.autodesk.co.jp/products/eagle/free-download)がありますのでありがたく使わせていただきましょう。今回はUbuntuで使用しますからLinux版をダウンロードを選択します。
![Screenshot from 2019-05-28 20-43-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257493/68eff839-fd87-af91-b686-902fc6bf2bfd.png)

## ファルダの解凍
Linuxの民はtarコマンドを叩いてeagle-x.x.xフォルダを/optの下に放り込みましょう。最近Linux村に引っ越してきた人はUbuntuでのディレクトリ解凍の仕方と/optフォルダの下にeagle-x.x.xフォルダを移動させる方法をググってください。

## とりあえず実行
/opt/eagle-x.x.xに移動して./eagleと実行してみましょう。無事実行できた人おめでとうございます。よい回路作成のお時間を。

## 実行できなかった人へ
~~これを読みに来たんだよなあ？！いらっしゃい！この記事で解決できるといいですね！~~
何かしらのエラーが書かれているはずですのでそれを読みましょう。その中の大半はeagle-x.x.x下のREADMEを読めば解決するはずなのでとりあえず読みましょう。
書かれていないエラーのうち下記のエラーが出ている人は以降を参考にしてください。

```
symbol lookup error: /lib/x86_64-linux-gnu/libGLX_mesa.so.0: undefined symbol: xcb_dri3_get_supported_modifiers
```

結論から言うと[この記事](https://forums.autodesk.com/t5/eagle-forum/can-t-run-eagle-on-debian-10-testing/td-p/8312348)に解決策が書かれているので参考にしましょう。手順を書くと
1. eagle-x.x.x/lib中のlibxcbと名前がついたファイルを全て削除する。
2. 下記のパッケージをインストールする
- libx11-xcb1
- libxcb-dri2-0
- libxcb-dri3-0
- libxcb-glx0
- libxcb-present0
- libxcb-sync1
- libxcb-xfixes0

以上です。めちゃくちゃ簡単かと思います。終わったら./eagleで再度実行してましょう。動いた方おめでとうございます。動かなかった方は申し訳ないがAUTODESK様に問い合わせてみて下さい。それでは〜
[Vue.js] レンジ（スライド）の値をデータバインディングさせてみた

## やりたいこと

<img width="185" alt="スクリーンショット 2019-05-28 21.19.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224077/9eca7c53-cc98-c292-6810-3a23f059f61e.png">


上記のようなレンジをつくり、レンジの値をかえるたびに
データバインディングさせ、その値を表示させたい。

## やったこと


```html

<template>
  <div class="range" data-value="50">
    <div class="label" :style="{ left: rangeValue + '%' }">
      <div class="value">
        {{ rangeValue }}
      </div>
      <div class="drop" />
    </div>
    <div class="input-box">
      <input
        id="input-range"
        v-model="rangeValue"
        type="range"
        min="0"
        max="100"
        value="50"
      />
      <div class="bar" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'BaseRange',
  data() {
    return {
      rangeValue: 50,
    }
  },
}
</script>

<style lang="scss" scoped>
@import '../../../assets/scss/object/component/range';
</style>

```
Macのデスクトップに散らばるアイコンを一時的に隠すアプリ作ってみた

# はじめに
私はmacOSのネイティブアプリケーションをよく作るのですが、アプリの審査申請用にスクリーンショットを撮る時に、毎回デスクトップを綺麗にするのが面倒でした。そこで、デスクトップを一時的に綺麗に見せかけるアプリをささっと作ってみました。

完成して「やったー」と思ったら、全く同じ機能を持ったアプリがAppStoreにて配信されていましたorz...　[HiddenMe](https://itunes.apple.com/us/app/hiddenme/id467040476)というアプリです。マルチディスプレイ対応にするには課金が必要っぽいですね。

# 成果物
GitHubにソースと`.dmg`のダウンロードリンクをあげてあります。
[https://github.com/Kyome22/SecretDesktop](https://github.com/Kyome22/SecretDesktop)

メニューバーに常駐しているアイコンから`Hide Desktop`を押すことでトグルできます。デフォルトでマルチディスプレイに対応しています。
![secret_desktop.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67153/458ecbb4-7fa8-6f90-936e-bba2e9717f00.gif)
動作確認するのが面倒だったので`.dmg`での配布版は`macOS Mojave 10.14`以上でしか動きません。Mojave以下で動かしたい人はGitHubからソースダウンロードしてターゲットのバージョンを下げてみてください。

# ポイント
要はアイコンの一枚上のレイヤーに`NSImageView`で背景の画像を貼って隠しているだけなのですが、背景画像をとってくるところのTipsが少なくて実装厄介でした。

```swift:Extensions.swift
extension NSImage {
    static func desktopPicture(targetPoint: CGPoint) -> NSImage? {
        guard let rawList: NSArray = CGWindowListCopyWindowInfo(.optionOnScreenOnly, kCGNullWindowID) else {
            return nil
        }
        var windowList = rawList as! [NSDictionary]
        windowList = windowList.filter { (data) -> Bool in
            if let owner = data[kCGWindowOwnerName] as? String, owner == "Dock" {
                if let name = data[kCGWindowName] as? String, name.contains("Desktop Picture") {
                    return true
                }
            }
            return false
        }
        for window in windowList {
            let bounds = window[kCGWindowBounds] as! NSDictionary
            let X = bounds["X"] as! CGFloat
            let Y = bounds["Y"] as! CGFloat
            let W = bounds["Width"] as! CGFloat
            let H = bounds["Height"] as! CGFloat
            let rect = CGRect(x: X, y: Y, width: W, height: H)
            if rect.contains(targetPoint) {
                let id = window[kCGWindowNumber] as! UInt32
                guard let cgImage = CGWindowListCreateImage(rect, .optionIncludingWindow, id, .boundsIgnoreFraming) else {
                    break
                }
                let nsImage = NSImage(cgImage: cgImage, size: rect.size)
                nsImage.resizingMode = NSImage.ResizingMode.stretch
                return nsImage
            }
        }
        return nil
    }
}
```

`CGWindowListCopyWindowInfo`というのから芋づる式にデスクトップの`Window`の情報を抜いてきています。

あと、アイコンの一枚上のレイヤーに`NSWindow`を配置するというのはこんな感じでやりました。
`self.window!.level = NSWindow.Level(Int(CGWindowLevelForKey(CGWindowLevelKey.normalWindow)) - 1)`
通常のアプリケーションのWindowを配置すべきレイヤーの一階層下に配置しています。
vimのステータスラインに時間を表示する

#はじめに
最近vimを使い始めたばかりですが、vimを使いやすくするための設定を探しては導入しています。
ステータスラインをかっこよくしてくれるプラグインlightlineを使った環境で時間も表示してみました。

#環境
- neovim
- dein

#方法
関数を用意してligjtlineのコンポーネントとして呼び出す。

```vimscript:時間取得
function! g:Date()
    return strftime("%H:%M")
endfunction
```

```vimscript:設定
'component_function': {
  'date':  'Date',
```

シンプルな使用例も置いておきます。

```vimscript:dein.toml
[[plugins]]
repo = 'itchyny/lightline.vim'
hook_add = '''
 let g:lightline = {
 \ 'colorscheme': 'wombat',
  \ 'active': {
  \   'left': [
  \     ['mode', 'paste'],
  \     ['readonly', 'filename', 'modified'],
  \   ],
  \   'right': [
  \     ['lineinfo'],
  \     ['percent'],
  \     ['charcode','fileencoding','date'],
  \   ]
  \ },
  \ 'component_function': {
  \   'date':  'Date',
  \ },
  \ 'component_expand': {
  \ },
  \ 'component_type': {
  \ },
  \ }
function! g:Date()
    return strftime("%H:%M")
endfunction
'''
```

<img width="1434" alt="スクリーンショット 2019-05-28 20.32.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415667/d995cc4b-c7bd-08d6-c450-dd4a7c114449.png">

#終わりに
実は導入に手こずってしまったのですが会社の先輩にフォローしていただきました！
vimmer優しい！