OmniAICreator/Qiita-1.07M huggingface dataset:
Contact Form 7とJavaScriptで特殊なバリデーションをする方法

## やりたいこと

contact-form-7で、特殊なバリデーションをして欲しいと言われました。

例えば、言われたこととしては ↓

- [x] 半角英数字、大文字でかつ10文字の規制をお願いします。
- [x] これは極端な話、aと入力したら自動でAとなる。と思っていいですよね。

これを実現したい場合、下記のように実装すると出来るようになります。

## contents-form7

フォームでは、idを用いて操作します。

```
[text* coupon-code-2-1 class:secure-key id:Name01]
```


## functions.phpに追加

固定ページで、jQueryを使うために、カスタムJSを使えるようにします。functions.phpの最後にこれを追加してください。


```php

//Custom JS Widget
add_action('admin_menu', 'custom_js_hooks');
add_action('save_post', 'save_custom_js');
add_action('wp_head','insert_custom_js');
function custom_js_hooks() {
	add_meta_box('custom_js', 'Custom JS', 'custom_js_input', 'post', 'normal', 'high');
	add_meta_box('custom_js', 'Custom JS', 'custom_js_input', 'page', 'normal', 'high');
}
function custom_js_input() {
	global $post;
	echo '<input type="hidden" name="custom_js_noncename" id="custom_js_noncename" value="'.wp_create_nonce('custom-js').'" />';
	echo '<textarea name="custom_js" id="custom_js" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_js',true).'</textarea>';
}
function save_custom_js($post_id) {
	if (!wp_verify_nonce($_POST['custom_js_noncename'], 'custom-js')) return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	$custom_js = $_POST['custom_js'];
	update_post_meta($post_id, '_custom_js', $custom_js);
}
function insert_custom_js() {
	if (is_page() || is_single()) {
		if (have_posts()) : while (have_posts()) : the_post();
			echo '<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript">'.get_post_meta(get_the_ID(), '_custom_js', true).'</script>';
		endwhile; endif;
		rewind_posts();
	}
}

```

## カスタムjs

で、最後に、カスタムjsに下記をコピペしてください。


```javascript
/**
 * 半角英数字かチェック
 * @return true:半角英数字である(もしくは対象文字列がない), false:半角英数字でない
 */
function isHalfWidthAlphanumeric(value) {
  if ( value == null )
    return;
  if( value.match( /[^A-Za-z0-9\s.-]+/ ) ) {
    alert("半角英文字で入力してください");
    return false;
   }
   return true;
}

$(function(){$("#Name01").blur(function(){ if ( !isHalfWidthAlphanumeric($(this).val()) ) { $(this).focus(); } });});
$(function(){$("#Name01").blur(function(){document.getElementById("Name01").value=$(this).val().toUpperCase();});});
```
LaravelでIntervention Imageを利用して画像のサイズ(容量)を下げる方法

# 利用シーン
Laravelで開発をしていて、サーバーに画像を沢山アップすることが想定されるとき。

# 背景
Intervention ImageはPHPで扱える画像処理のライブラリ。
blurをかけたり、縦横幅をリサイズしたり、回転させたりと多岐にわたる機能を実現している。
http://image.intervention.io/

**しかし**, 画像の容量を1MB未満に抑えたい、という要求に対してストレートに応えてくれる機能は**ない**。(もし見つけたらご教示ください)

他のライブラリを探すのも面倒なので、機能を組み合わせて自分で作ってしまえばいいやということで関数を作ってみました。

# コード

```php

    /**
     * @param  UploadedFile $img_file   画像ファイル(*今回はUploadedFileを利用)
     * @param  string       $path       画像の保存パス
     * @param  int          $quality    画像の解像度の初期設定
     * @param  int          $size       ここまで下げたいという画像サイズの値
     */
    public function compressImage(UploadedFile $img_file, string $path, int $quality, $size)
    {
        $image = Image::make($img_file);
        $image->save($path, $quality);

        // クオリティを下げた後のファイルサイズが十分下がっていなければもう一度関数を呼び出す
        $image = Image::make($path);
        if($image->filesize() > $size){
            $quality -= 5;
            return $this->compressImage($img_file, $path, $quality, $size);
        }
    }
```

# 解説

```php

$image = Image::make($img_file);
$image->save($path, $quality);
```
画像ファイルを読み込み、save()メソッドで任意の解像度に下げて保存。
*ドキュメントにはデフォルトで90と書いてありますが80未満で設定しておくと吉。
http://image.intervention.io/api/save


```php

$image = Image::make($path);
if($image->filesize() > $size){
     $quality -= 5;
     return $this->compressImage($img_file, $path, $quality, $size);
}
```
保存した画像を改めて読み込み、
filesize()メソッドで画像のファイル容量を確認。
ファイル容量が設定したサイズ（1MBなら1024000を入力)よりも大きければ、
解像度を5低く設定してもう一度同じ関数を再帰的に呼び出す。

# 使い方

この関数をヘルパ関数として登録して

```hoge.php
$file = $request->file('img');
$path = "your/path";
$quality = 80;
$size = 1024000;

$resized_img = compressImage($file, $path, $quality, $size);
```
とすれば使えます。

# 終わりに
もし他に良い方法や改善できる箇所がありましたらご教示ください。
PC版ではロゴと検索窓が出て、スマートフォン版では切り替え表示したいなと思ったら･･･

タイトルの通りですが、PC版では検索窓とサイトのロゴを出したいけど、スマホ版ではどちらも出す余裕はありませんが、ハンバーガーデザインに分けることもしたくなかったので作ってみました

#　コードとデモ
##デモ
https://jsfiddle.net/mqgc207L/

##コード

CSS部

```CSS
    @media screen and (max-width: 768px) {
      .SearchWindow__view {
          display: none;
      }
    }
 
```

サンプルではBootstrap4を使っていることもあり、今回は768pxを区分けしましたが、検索窓に張り付けるクラスをとりあえずスマホとPC版を切り替えたいブレークポイントで非表示と表示に切り替えるようにします。

JS部

```JavaScript
const SMP_SEARCH  = document.getElementById("SearchWindow");
  const SMP_LOGO    = document.getElementById("LogoWindow");
  const SMP_LINK    = document.getElementById("header__btm--icon");
  const CLS_SEARCH  = 'fas fa-search';
  const CLS_CROSS   = 'fas fa-times';
  const WINDOWS_MD  = 768;
  let flgChenge     = true;

  window.addEventListener('resize', function(e) {
    //現在のサイズを取得
    let nowsize = window.innerWidth;
    if( (nowsize >= WINDOWS_MD)  ){
      //基準以上ならリセット
      display_reset();
      SMP_SEARCH.style.display ="";
    }
  });
 
  function clickBtn1(){
    if(flgChenge){
      // 検索窓表示
      SMP_LINK.className = CLS_CROSS;
      $(SMP_LOGO).hide();
      $(SMP_SEARCH).show();
      $(SMP_SEARCH).removeClass('SearchWindow__view');
      flgChenge = false;
    }else{
      // 検索窓非表示
      display_reset();
    }
  } 

  function display_reset(){
    SMP_LINK.className = CLS_SEARCH;
    $(SMP_LOGO).show();
    $(SMP_SEARCH).hide();
    $(SMP_SEARCH).addClass('SearchWindow__view');
    flgChenge = true;
  }
```
起動時にフラグ用引数を用意し、ボタンを操作する度にclickBtn1関数を呼び出して表示・商事を繰り返しますが、PC版ではリセットする必要があるので、  window.addEventListener('resize', function(e) {});でリサイズ時のサイズを算定。所定以上ならリセットを行います。なお、display: block;が残っていると拡大→縮小を繰り返すと最初は隠しておくべき検索窓が表示されるので、SMP_SEARCH.style.display ="";で消しておきます。

```HTML
<header id="header">
  <div class="row" id="header__top">
    <div id="LogoWindow" class="col-md-4 col-12">
      <h1><a href="#">LOGO</a></h1>
    </div>
    <div id = "SearchWindow" class="col-md-8 col-12 SearchWindow__view">
      <form id="header__search" action="/" method="get">
        <input class="validate" name="search" type="text" autocomplete="off" placeholder="キーワードを入力" >
        <button type="submit">検索</button>
      </form>
    </div>
  </div>

  <!--ボタン-->
  <div id="header__btm">
    <div class="d-block d-md-none">
      <a href="#" class="text-grey darken-4" onclick="clickBtn1()">
      <i id="header__btm--icon" class="fas fa-search" style="font-size:2.0rem;"></i></a>
    </div>
  </div>
```
HTMLの本文です。画像サイズによって表示するかどうかを区分けするのは難しく車輪の差発明になるので、ここではBootstrapの表示ユーティリティを多用しています。グリッドシステムのみのCSSが入ったBootsrap Gridにもこのユーティリティは附属しているので活用して頂ければと思います。
curl, wget で Response Header だけ取得する

### 用途
インターネットへの疎通確認をしたい時など、
レスポンスヘッダーだけ欲しい時に。

### curl

```
curl --head https://www.google.com
```

### wget

```
wget -q -S -O - https://www.google.com > /dev/null
```

`-q`,  `--quiet` : quiet (no output)
`-S`,  `--server-response` :           print server response
`-O`,  `--output-document=FILE` :      write documents to FILE
Software emulation of deprecated SWP instruction (CONFIG_SWP_EMULATE)

https://www.kernel.org/doc/html/latest/arm/swp_emulation.html

# Software emulation of deprecated SWP instruction (CONFIG_SWP_EMULATE)

> ARMv6 architecture deprecates use of the SWP/SWPB instructions, and recommeds moving to the load-locked/store-conditional instructions LDREX and STREX.


ARMv6 architecture では、SWP/SWPB命令の利用が廃止されていて、load-locked/store-conditional 命令としては、LDREX/STREXを使うことが推奨されている。

> ARMv7 multiprocessing extensions introduce the ability to disable these instructions, triggering an undefined instruction exception when executed. Trapped instructions are emulated using an LDREX/STREX or LDREXB/STREXB sequence. If a memory access fault (an abort) occurs, a segmentation fault is signalled to the triggering process.

ARMv7マルチプロセッシング拡張機能は、これらの命令を無効にする機能を導入し、実行時に未定義命令例外をトリガーします。 トラップされた命令では、LDREX/STREX、または、LDREXV/STREXBシーケンスを用いて、エミュレーションされます。もし、memory access fault (an abort)が発生した場合、セグメンテーションエラーが、トリガープロセスに伝達されます。

> /proc/cpu/swp_emulation holds some statistics/information, including the PID of the last process to trigger the emulation to be invocated. For example:

/proc/cpu/swp_emulationには、呼び出されるエミュレーションをトリガーする最後のプロセスのPIDを含む、いくつかの統計的/情報が保持されています。例えば：

```text
Emulated SWP:         12
Emulated SWPB:                0
Aborted SWP{B}:               1
Last process:         314
```

# NOTE:

> when accessing uncached shared regions, LDREX/STREX rely on an external transaction monitoring block called a global monitor to maintain update atomicity. 

キャッシュされていない共有領域にアクセスするとき、LDREX/STREXは、更新の原子性を維持するために、グローバルモニターと呼ばれる外部トランザクション監視ブロックに依存します。 

> If your system does not implement a global monitor, this option can cause programs that perform SWP operations to uncached memory to deadlock, as the STREX operation will always fail.

システムがグローバルモニターを実装していない場合、STREX操作は常に失敗するため、キャッシュされていないメモリに対してSWP操作を実行するプログラムがこのオプションによってデッドロックする可能性があります。


---
もともと、Linux Kernelのソースコードの一部なので、GPLv2扱いになる（はずの認識）。

> https://www.kernel.org/doc/html/latest/index.html
> 
> Licensing documentation
> 
> The following describes the license of the Linux kernel source code (GPLv2), how to properly mark the license of individual files in the source tree, as well as links to the full license text.
> 
> https://www.kernel.org/doc/html/latest/process/license-rules.html#kernel-licensing
[Python]辞書

**辞書の作り方**
{キー1:値1 , キー2:値2}
リストとカッコ {} が違うことに注意

```python
fruits = {"apple":"りんご" , "banana":"バナナ" , "strawberry":"イチゴ"}
```

**出力**
辞書[キー]
出力する時のカッコ []　に注意

```python
fruits = {"apple":"りんご" , "banana":"バナナ" , "strawberry":"イチゴ"}

print("appleは" + fruits["apple"] + "です")
```

出力結果
appleはりんごです
__________________________________________________________

**要素の更新**
辞書[キー] = 値

```python
fruits = {"apple":"りんご" , "banana":"バナナ" , "strawberry":"イチゴ"}

fruits["banana"] = "ばなな"
```

**要素の追加**
辞書[新しいキー] = 値

```python
fruits = {"apple":"りんご" , "banana":"バナナ" , "strawberry":"イチゴ"}

fruits["kiwi"] = "キウイ"
```
paizaランクCの達成方法(timesメソッド)

#はじめに
***paizaランクC***を達成するにはどうすれば良いか？
目安を解説しました。
#前提
筆者がRubyを主に学習しているので、Rubyで解説しています。
#実行
Cランクを目指すには、繰り返し条件を使いこなす必要があります。
私が良く使うのは`timesメソッド`です。

```ruby

t = gets.to_i

t.times do
  puts "hello!"
end
```
以上のプログラムを実行すれば、入力した回数だけ`hello!`と出力されます。
応用すれば、次のような事も出来ます。

```ruby

t = gets.to_i
i = 1

t.times do
  puts i
  i += 1
end
```

以上プログラムを実行すれば、１から入力され数までの整数が順番に出力されます。
配列も使用できます。

```ruby

t = gets.to_i
num = []
i = 1

t.times do
  num << i
  i += 1
end
```

このプログラムを実行すれば、`[1, 2, 3, …,i]`という配列ができます。

paizaランクCを目指すには、まずはこのtimesメソッドを使いこなすことが必要です。
LaTeXiTで使うフォントについて

プレゼンテーションで使うフォントは、視認性が良いサンセリフ体を使いましょう、というのはよく見かける。僕はHelveticaとかHelvetica Neueを使うことにしている。あまりプレゼンでたくさんの数式を書くことはないのでBeamerを使うほどでもないけど、とはいえたまに数式書くこともあるので、そのときは数式だけはLaTeXiTを使って、プレゼン自体はkeynoteで作っている。
というところまでは、おそらく比較的似たような環境でプレゼンを作っている人は多いのではないかと思うんだけど、じゃあLaTeXiT（Beamerでも良いけど）の数式フォントはどうしていますか、というと、そこまで気にしている人はあまりいないような気がする。僕は数年前に気になり始めて、でもずっと解決方法がなくてもどかしく思っているんだけど、考えてみたらちゃんと文章にしたことなかったので現状の自分なりの対処法を書いておく。

結論だけ知りたい人は一番最後まで読み飛ばしてください。

## 何が気になっているのか

いろんな場面でギリシャ文字はよく使う。Macならぱ入力ソースに日本語と英語に加えてギリシャ語を登録すればギリシャ文字も簡単に入力することができる。例えば、マイクロメーター(µm)とか円周率(π)のような感じで、、もっともµは英語モードでもopt+mで入力できたりするけど。
この普通に入力するギリシャ文字とLaTeXiTで入力するギリシャ文字のフォントがあまりに違うのが気になる。そもそもLaTeXiTではデフォルトではセリフ体なので全然違う。数年前に色々と苦労したメモが見つかったのでそのままスクリーンショットを載せておく。
![スクリーンショット 2020-05-20 20.18.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225701/30c7e1e0-dbe4-6cfc-976b-d7912c5283c7.png)

## そもそもLaTeXのフォント周りはよくわからない

Wordだったらフォントの選択なんてすぐにできるが、似たようなことをLaTeXでやるとすごく面倒なのであまり拘らない方が良い。特に日本語と英語のフォントはこだわり始めると泥沼な感じがするので、僕は日本語の文章は可能な限りLaTeXでは書かないようにしている。
でも、英語だけならばなんとかなるんじゃないかと思っていたのだか、実は地の文と数式のフォントを揃えるのはそんなに簡単ではないらしい。らしい、というのは調べるとうまくいく組み合わせといかないものが複雑すぎるので完全に理解するのは諦めた。何を拘っているかというと、例えば数式中の数字と地の文の数字が同じフォントで表示して欲しい。

```latex:sampel.tex
すごく簡単な例として、数字
012345 （地の文）と\\
$012345$ （数式）が\\
同じフォントで表示されて欲しいと思うのだが、正しく設定していないと異なるフォントで表示される。
```

基本的に普通の文章ならばTimesを使っていればどちらも同じフォントで表示できる。ちゃんとした論文誌のテンプレートならばそれくらいは対処してあるが、小さな研究会のテンプレなんかだと適当だったりするので、気にしない方が幸せだったりする。
まぁでもセリフ体は解決策があるだけマシで、サンセリフの方が状況はひどい。少なくとも僕が数年前に調べた限りでは、LaTeXで数式と地の文を完全に同じフォントで表示できるサンセリフ体は、某新粒子発見の発表で使われて話題になったComic Sansだけだった（無料では。有料フォントならもう少し解決策はあったらしい)。

## Beamerを参考にする
気の利いたBeamerのテーマならばちゃんとその辺りは対処しているのではないかと調べてみたら、意外とそうでもないらしい。8年くらい前にこのことを調べたときに見つけた古い情報だけど、これを見ると完全に地の文と数式フォントを一致させることができる組み合わせというのは、意外にも少ないのではないかと思う。
https://www.logicmatters.net/resources/pdfs/MathFonts.pdf

ちょっと調べれば、数式フォントをHelveticaにする方法、というのが見つかるけど、

```latex:math_helvetica.tex
\usepackage[helvet]{sfmath}
```

これ、やってみればわかるけど、ギリシャ文字がセリフ体のままなので使い物にならない。これをやるくらいならば使わない方がマシ。

## 対処方法

LaTeXって以外にも新しいパッケージがどんどん出てきて、2,3年もすると時代遅れな方法で書いていたりすることになるんだけど、今日調べてみてとりあえずしばらくこれを使おうかな、と思ったものを載せておく。実はちゃんと何が書かれているか理解しているわけではなくて、単にネットで拾ってきたものをコピーしているだけ。
LaTeXiTで使う場合は、「環境設定」「テンプレート」「プリアンブル」の最後に貼り付ければ良い。

数式中で変数は斜体にしたいときは、

```latex
\usepackage{newtxsf}
```

斜体にしたくないときは、

```latex
\usepackage[scale=.9]{tgheros}
\usepackage[frenchmath]{newtxsf}
\renewcommand{\familydefault}{\sfdefault}
\usepackage{mathastext}
```

ここ数年はCM Brightというのを使っていたんだけど、最近はnewtxsfというのが流行りなのかな。

## 余談

ところで、結構前からLaTeXiTの本家のサイト落ちてるよね。。
https://www.chachatelier.fr/latexit/
BeagleBone Blackを動かそう

stay homeなこの頃、以前「これでぼくもめいかー×2だ」と意気込んで買ったBeagleBone Blackを倉庫の奥から引っ張り出して、久しぶりに動かしてみようかなと思った人（そんな人は私だけかもしれませんが）が、最初の一歩で躓かないように。

# アップデート！アップデート！アップデート！
大事なことなので、3回繰り返しました。

BeagleBone BlackをUSBで接続すると、USBドライブが見えますよね。その中にSTART.htmとかREADME.htmとかあるので、それに従えば良いんでしょ。とか、同梱されている説明書があるから、それを読めば良いんでしょ、とか、考えては*いけません*。普通は（以下[BeagleBone Greenを動かそう](https://qiita.com/koizumistr/items/e788f1129d8556f86ef4)とほぼ同文のため省略）

アップデートのやり方は、さすがQiita、Qiita内に記事がありますので、ここはリンクを張らせてもらいます。→[BeagleBoneGreenを動かす02](https://qiita.com/pata128/items/0969204eb071670ce398)

え？リンク先は"BeagleBone Black"ではなく、"BeagleBone Green"の記事ではないか、と。確かにそうですけど、"BeagleBone Black"と"BeagleBone Green"には互換性がありますから、そのまま動きますよ。素晴らしいですね、互換性って。

# さもないと
説明書では次に"Install drivers"とかあるので、普通はそれに従ってドライバをインストールしようとするでしょう。以下が証拠の画面です。USBで接続の次には、Step2 で"Install drivers"とありますよね。
![getting-started-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535021/11b8a4f0-6e8a-5403-fc31-79c1b763bed2.png)
が、これに素直に従うと、インストールできません。はい、証拠。
![install-driver.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535021/f5ccec7f-016a-fd68-1c7d-54984590d6f6.png)
少なくとも私の手元のWindows10ではできませんでした。（以前はできた記憶があるのですが、その時は時期からWindows7だったのだと思います。）ここで、「ドライバのインストーラーに何か問題があるのかな」とそちらの方向に走ると（以下[BeagleBone Greenを動かそう](https://qiita.com/koizumistr/items/e788f1129d8556f86ef4)とほぼ同文のため省略）

# だから
アップデートです。（以下[BeagleBone Greenを動かそう](https://qiita.com/koizumistr/items/e788f1129d8556f86ef4)とほぼ同文のため省略）

stay homeがもしかしたら間もなく解除されるかもしれないという淡い期待を抱きながら、、皆さん、解除される前に楽しい（？）メイカーライフを。
BlenderをPythonから扱うときにパラメータがわからない問題

# BlenderのPython API

BlenderにはPythonのAPIがあり、[ドキュメント](https://docs.blender.org/api/current/index.html)が公開されている。
なんだ、ドキュメントあるんだったら余裕じゃん、と思ってGUIからパラメータ名を見てドキュメントを検索するも、引っかからないことが多い気がする。  
なぜなのか。  
単純な話、GUIに表示されているプロパティ名とpython APIでのプロパティ名が異なるからである。

# 具体例

<img width="331" alt="Ｐｏｉｎｔ Light" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68992/a3b13392-4e8e-15f2-d96d-06104b3d1cbd.png">

例えば、光源で表示されているPower、これはAPIだとenergyである。いやいやいや。
Radiusはshadow_soft_size。もう何が何だか。  
上図の光源を作成するのをコードに落とすと以下のようになる

```python:light_add.py
bpy.ops.object.light_add(type='POINT')
light_obj = bpy.context.active_object
light = light_obj.data
light.color = (1.0, 1.0, 1.0)
light.energy = 10
light.specular_factor = 1.0
light.shadow_soft_size = 0.25
```

# 解決方法

<img width="351" alt="solution" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68992/bb91fa44-423e-cd04-099c-c09ced8541bd.png">

どうやって調べればいいかというと、
1. プロパティの上で右クリックして`Copy Data Path`を選択する。あるいは右にあるコマンドを叩く(macOSならShift+Command+C)
2. これをコード上にペーストする。
それだけ。ここにたどりつくのに莫大な時間を費やしたのでここに書いておく。

# 2020/5/21追記

workspaceをScriptingにしたら、手動で変更した時にコード出てくるのか…。
FreeCADだとデフォルトで下部に表示されたなぁ。自動化しやすくなるのでありがたい。
<img width="562" alt="Ｓｃｒｉｐｔｉng workspace" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68992/380864c4-6883-b114-aa83-b22d3d1c25bd.png">
~~ちなみにcycles.samplesをコードから変更しても適用されないのは何でなんだぜ。（調査中）~~
別の場所で設定変えてたっぽいorz
EC2でnginx + Let's encryptをインストール

EC2でnginxにssl入れたいと思いcertbotで証明書を作った時の備忘録です。

## 前提

1. Amazon Linux 2 AMIを使います。
1. ec2でインスタンスを起動します。
2. 静的IPを割り当てておき、DNSのAレコードにそのIPを指定しておきます。
3. インスタンスのセキュリティグループでHTTPとHTTPSの両方のインバウンドを0.0.0.0で許可します。

## インストール

Amazon Linux 2 AMIの場合通常のCentOSなどと違うみたいでcertbotのインストールがだるいです。
なのでyumでガッと入れた方が楽です。
これと全く同じ手順で良いです。
https://qiita.com/MysteriousMonkey/items/4d3d857c0e68d4bfff39

証明書を作る時に実際にアクセスして疎通確認ができたらSSLの設定をnginxに入れるような動作をします。
失敗するとこんなエラーがでます。

```
Challenge failed for domain ...
```

これが出る場合はDNSの設定でIPがちゃんと指定してあること、セキュリティグループでHTTPのインバウンドが設定してあることを確認するといいです。
【jQuery】導入、セレクタ、メソッド、フィルタの使い方

#【jQuery】導入、セレクタ、メソッド、フィルタの使い方
一番最初の部分を自分の理解度を深めながら書きました。
HTML/CSS、JavaScriptの初歩が分かっていると躓きにくいです。

・HTML/CSS……指定方法、要素,class,idの概念
・JavaScript……script内の記法、関数

##jQueryとは
HTML/CSS,JavaScriptと組み合わせて使う、JavaScriptを便利に使うためのライブラリ。

##jQueryの導入

1.jQuery.comにアクセス
https://jquery.com/

2.バナーのDownload jQuery vX.X.Xをクリック
![200520_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/372612/81d4d14f-91d1-fd29-4ebc-107fdb46f77f.jpeg)

3."Downloading jQuery using Bower"からURLを取得

v3.5.1の場合
https://code.jquery.com/jquery-3.5.1.min.js

4.HTMLファイルのbody要素内にjQueryのパスを記述する
・jQueryをscript でロード
・ロード後にjQueryのスクリプトを記述する
　セレクタ:処理対象となるDOM要素を指定する記法
　メソッド：処理

```html
<body>
    <p>jQueryの練習</p>
    <script src ="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>//jQueryを読み込んだ後にスクリプト
            $('p').css('color', 'red').hide('slow');
    </script>

</body>
```
上記の場合だと
セレクタ：P要素を指定する('p')
メソッド：P要素を青にする('color','blue')
　　　　　p要素をゆっくり上にフェードアウトさせる.hide('slow')
となる


##セレクタ・メソッドの書き方
###要素、id、classの指定
・セレクタは$("")で囲む
・html要素……そのまま
　p h1 h2 ul
・id……#hogehoge
　#main #sub
・class…….hogehoge
　.item
・>　直下の子要素
・ (空白)以下の要素
・,　複数の要素
・+　隣接する要素

Tips:JavaScriptの即時関数と同じ書き方。

```js

$(function(){
    $("#main>.item").css("color,"red);
});
```
id"main"の直下にあるclass"item"の色を赤にする。

```js

$(function(){
    $("p, #sub").css("color,"red);
});
```
p要素とid"#sub"複数の要素の色を赤にする。

###フィルタの使い方

サンプル

```js
<ul id = "main">
    <li>0</li>
    <li class="item">1</li>
    <li class="item">2</li>
    <li>
        3
        <ul id = "sub">
            <li>3-0</li>
            <li>3-1</li>
            <li class="item">3-2</li>
            <li class="item">3-3</li>
            <li>3-4</li>

        </ul>
    </li>
</ul>
```
:フィルター名と条件

:eq() 等しい equalの略
:gt() ～より大きい greater thanの略
:lt() ～より小さい less thanの略
:even 奇数
:odd 偶数
:contains() ()内に文字列が含まれている
:first 先頭
:last 末尾

```js
   $("#sub > li:eq(0)").css("color","green");
```
sub配下のli要素が0番目の3-0が緑になる。

```js
   $("#main > li:eq(2)").css("color","blue");
```
main配下のli要素2番目の1が青になる。（0から数えて2番目なので1）

```js

   $("#sub > li:gt(2)").css("color","red");
```
sub配下のli要素2番目より大きい3-3,3-4が赤になる。

```js

   $("#sub > li:lt(2)").css("color","yellow");
```
sub配下のli要素の2番目より小さい3-0,3-1が黄色になる。

```js

   $(".item:odd").css("color","pink");
```
item classの奇数である2、3-3がピンクになる。

```js

   $("#sub > li:contains('4')").css("color","red");
```
sub配下のli要素に'4'が含まれている、3-4が赤になる。

```js

   $("#sub > li:first").css("color","gold");
```
sub配下の先頭の要素である3-0がゴールドになる。

```js

   $("#sub > li:last").css("color","silver");
```
sub配下の末尾の要素である3-4がシルバーになる。
(Python)期待値・モンテカルロサンプリングを丁寧に理解しようとした

#はじめに

　ベイズ統計学を学ぶ上で期待値をおさらいしました。

下記本を参考にしました。


+ [機械学習スタートアップシリーズ ベイズ推論による機械学習入門](https://www.amazon.co.jp/%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E3%83%99%E3%82%A4%E3%82%BA%E6%8E%A8%E8%AB%96%E3%81%AB%E3%82%88%E3%82%8B%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92%E5%85%A5%E9%96%80-KS%E6%83%85%E5%A0%B1%E7%A7%91%E5%AD%A6%E5%B0%82%E9%96%80%E6%9B%B8-%E9%A0%88%E5%B1%B1-%E6%95%A6%E5%BF%97/dp/4061538322)

+ [パターン認識と機械学習 下 (ベイズ理論による統計的予測) ](https://www.amazon.co.jp/%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3%E8%AA%8D%E8%AD%98%E3%81%A8%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92-%E4%B8%8B-%E3%83%99%E3%82%A4%E3%82%BA%E7%90%86%E8%AB%96%E3%81%AB%E3%82%88%E3%82%8B%E7%B5%B1%E8%A8%88%E7%9A%84%E4%BA%88%E6%B8%AC-C-M-%E3%83%93%E3%82%B7%E3%83%A7%E3%83%83%E3%83%97/dp/4621061240)

##期待値とは
　
　期待値(expectation)とは、ある関数$f(x)$の確率分布$p(x)$のもとでの$f(x)$の平均値のことを指します。表記としては、$E[f]$と書きます。

離散分布では以下のように表します。

```math

E[f] = \sum_x p(x)f(x)

```

一方、連続変数の場合は積分として表すことができます。

```math

E[f] = \int p(x)f(x)dx

```

##エントロピー

　確率分布$p(x)$に対する次のような期待値をエントロピー(entropy)と呼びます。
　

```math
\begin{align}
H[p(x)]& = - \sum_x p(x) ln(p(x))\\

\end{align}

```



###有限和での近似（モンテカルロサンプリング）

　分布$p(x)$から独立に抽出されたサンプルの集合を$\bf {z}^{(n)} (n = 1,...,N)$としたとき、期待値は下記のように近似できます。

```math

E[f] = \frac{1}{L} \sum_{n=1}^{N}f(\bf{z}^{(N)})

```

となります。

ここで例題で考えます。
**例題**
　$p(x=1)=0.3,p(x=1)=0.7$となるような離散分布を考えます。

エントロピーの定義からエントロピーは

```math
\begin{align}
H[p(x)]& = - \sum_x p(x) ln(p(x))\\
&=-(p(x=1)lnp(x=1) + p(x=0)lnp(x=0) )\\
&= -(\frac{3}{10}ln\frac{3}{10}+\frac{7}{10}ln\frac{7}{10})\\
&=0.610
\end{align}

```
 
となります。
　さて、これを有限和で近似する場合の計算をしてみます。`random.uniform`メソッドにより0～1の無作為な値を出力させて、それが$p(x=1)=0.3$よりも大きくなるかどうかで$x=1$か$x=2$かどうかを判別させています。
　そして、$x=1,2$となる回数を`cnt`で数えさせることをしています。
　
　下記のようなプログラムになります。試しに1000回計算しています。

```python
cnt = []
proba_1  =[]
proba_2  =[]
time = 1000
a = random.uniform(0,1)
exp =[]

for i in range(time):
    a = random.uniform(0,1)
    if a > p1:
        cnt = np.append(cnt,1)
    else:
        cnt = np.append(cnt, 0)
    proba_1 = np.append(proba_1, (i+1-sum(cnt))/(i+1))
    proba_2 = np.append(proba_2, sum(cnt)/(i+1))
    exp = np.append(exp, -(((i+1-sum(cnt))*math.log(p1))+((sum(cnt))*math.log(p2)))/(i+1))
 
plt.xlabel('time')
plt.ylabel('probability')
plt.plot(time_plot, proba_2, label="p2")
plt.plot(time_plot, proba_1, label="p1")
plt.legend()       

```



![002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567823/ef15e817-fd50-4aeb-50c9-9efa745cbc53.png)

$p(x=1)=0.3,p(x=2)=0.7$に大よそ100回以降収束していくことが分かりました。


![003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567823/91387139-0a68-c4ae-c46a-d2ceacdc51f4.png)

こちらも100回以降で元々求めていた期待値（＝エントロピー）の0.61あたりに収束していることが分かりました。

　確かにこの期待値近似の手法が問題ないことが確認することができました。



#終わりに
　今回は非常に簡単な例題だったため、算出及び確かめることが容易でした。しかし、実際の問題では期待値が解析的に求めることが難しい場合がほとんどです。
　従い、このモンテカルロサンプリングで近似することを覚えておくと有益なのだと思います。
　　

プログラ全文はこちらです。
https://github.com/Fumio-eisan/VI20200520
graphql-toolsでDateTimeなど独自の型に対応する。

## 説明

graphql-toolsでGraphQLのスキーマからTypeScrptの型を生成しているんですが、GraphQLはStringやIntなど最低限の型しかなく、日付のDateですらデフォルトでは存在してません。

なのでDateTimeを独自の型として定義し、JavaScriptではDateで表すということをします。

## 手順

まずこんなGraphQLのスキーマがあるとします。

```graphql
// 独自の方として宣言
scalar DateTime

type Foo {
  id: ID!
  name: String
  createdAt: DateTime
}
```

そしてgraphql-toolsでTypeScriptの型を生成します。
ここでポイントは`--passthroughCustomScalars`です。これをつけると独自の型をそのままのTypeScriptの型として生成します。

```bash
$ apollo client:codegen --target typescript --passthroughCustomScalars
```

こんな型ができます。
しかしTypeScriptは独自に定義したDateTimeという型を知りません。

```typescript
export interface Foo {
  __typename: "Foo";
  id: string;
  name: string;
  createdAt: DateTime;
}
```

なのでDateTimeが何かを定義してあげます。

```typescript:types.d.ts
declare type DateTime = string;
```

これでDateTimeの型を扱えるようになりました。
正規表現　（）を取り除きたい

例えば、（4444)-23-4234というものをかっこを外して、4444-23-4334という様に置換したいのですが、正規表現を使ってどの様にすれば良いですか？
また(4444)-23-4334,03112-(3)-2232,433-(323)-4856の様なかっこ内の数字の桁数が違うものを全てかっこを外した状態に置換するにはどのようにすれば良いですか？
vscodeの検索置換を使っています

試したこと
\(.+?\)と検索しかっこのついている箇所（上の例だと(4444),(3),(323))を見つけたのですが置換方法がわからなかった。
[Python]リスト

#リスト
**リスト作り方**
[要素1 , 要素2 , 要素3]
, で区切る。

リスト例
文字列のリスト
["sushi" , "ramen"]

数値のリスト
[100 , 200]

**変数にリストを代入**

```python
fruits = ["apple" , "banana" , "strawberry"]
```


**リストの出力、要素の取得**
リストの出力

```python
fruits = ["apple" , "banana" , "strawberry"]

print(fruits)
```
出力結果
["apple" , "banana" , "strawberry"]
______________________________________________

リストの要素の取得
変数[インデックス番号]
変数はリストを代入したもの

```python
fruits = ["apple" , "banana" , "strawberry"]

print("好きな果物は" + fruits[1] + "です")
```
出力結果
好きな食べ物はbananaです
______________________________________________
＊＊要素の上書き**
リスト[インデックス番号] = 値

```python
fruits = ["apple" , "banana" , "strawberry"]

fruits[1] = "kiwi"
```


**要素の追加＊＊
リスト.append(値)

```python
fruits = ["apple" , "banana" , "strawberry"]

fruits.append("kiwi")
```
簡易クリップボード

# 概要

xrdpを使うと、GNOMEやKDEのようなデスクトップ環境とWindowsとの間でコピー＆ペーストができます。
しかし、シンプルなウィンドウマネージャでxtermやkterm等を使っていると、標準では同じようにできません。
ここでは、そのような環境でも使える簡易的なクリップボードを紹介します。

# 必要なもの

- Webブラウザ  
  Windowsではなく、X Window Systemで動作するWebブラウザです。
  firefoxで動作を確認しています。

# HTMLコード

以下の内容のHTMLファイルを作成してブラウザから直接開きます。Webサーバーは不要です。

```
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>CLIPBOARD</title>
</head>
<body>
<p>
<input type="button" value="Clear"
  onClick="document.getElementById('clipboard').value='';">
<input type="button" value="Copy"
  onClick="navigator.clipboard.writeText(document.getElementById('clipboard').value);">
</p>
<p><textarea cols="80" rows="20" id="clipboard"></textarea></p>
</body>
</html>
```

# 使い方

Windowsとブラウザ間はコンテキストメニューで「コピー」と「貼り付け」を使います。
ブラウザとxterm間はマウスの中ボタンでコピー＆ペースします。
C# 備忘録1

###はじめに
業務でC#を使っていた際に詰まったところや忘れがちな所を備忘録として書きました。


- スレッドやタスクからフォームを変更する場合

スレッドやタスクからフォームを操作するとエラーが発生する。
そのため、Invokeを使用する。


例：テキストボックス(textBox)の名称を変更する場合

```C#:sample.cs
   //フォーム上のテキストをChangedに変更
   this.Invoke(new Action<string>(this.TextChange),"Changed");
   
   //フォーム上のテキストボックスを変更する関数
   private void TextChange(string text)
   {
       this.textBox.Text = text;
   }
```

Invokeは引数の有無で以下のように使い分ける。

```C#:
   //引数なし
   this.Invoke(new Action(関数));
   //引数あり
   this.Invoke(new Action<引数の型名>(関数),引数);
```

引数がない場合ならラムダ式を使用して、以下のように書くと便利

```C#:
   //引数なし
   this.Invoke(new Action(() => {処理}));
```


- 待機をする方法

例：100ミリ秒を待機する。

```C#:
   System.Threading.Thread.Sleep(100)
```

usingを使用する場合はusing System.Threading;を宣言し、
以下のようにする。

```C#:
   //100ミリ秒待機
   Thread.Sleep(100)
```

-  Consoleの入力

基本的にフォームを使うので、すぐに忘れてしまう。

```C#:
   //文字
   string hoge1 = Console.Read();
   //1行分
   string hoge2 = Console.ReadLine();
```

-  Consoleの出力

入力と同じですぐに忘れてしまう

```C#:
   string hoge = "test";
   //改行なし出力
   Console.Write(hoge);
   //改行あり出力
   Console.WriteLine(hoge);
```

-  「」や()などで括る場合など

リソースに定義していても使えるので、便利

```C#:
   string hoge = "test";
   Console.WriteLine(string.Format("「{0}」",test);
```

出力結果：「test」

-  共用体を使う方法

CのunionをC#でも使えるみたいなので。
同じメモリ領域を複数の型が共有出来るので、とても便利。



```C#:
   using System.Runtime.InteropServices;
   
   [StructLayout(LayoutKind.Explicit)]
   public struct UnionData
   {
       //0バイト目
       [FieldOffset(0)]
       public byte zero;

       //1バイト目
       [FieldOffset(1)]
       public byte one;

       //2バイト目
       [FieldOffset(2)]
       public byte two;

       //3バイト目
       [FieldOffset(3)]
       public byte three;

       //float型
       [FieldOffset(0)]
       public float floatData;

       //int型
       [FieldOffset(0)]
       public int intData;
   }   

```

共用体を使用したサンプル

```
       //共用体の宣言
       UnionData data = new UnionData();
            
       //int型にのみ値を代入
       data.intData = 1094861636;
　　　　　　　
       //それぞれの値を出力
　　　　　　 
       //0バイト目
       Console.WriteLine(Convert.ToChar(data.zero));
            
       //1バイト目
       Console.WriteLine(Convert.ToChar(data.one));
            
       //2バイト目
       Console.WriteLine(Convert.ToChar(data.two));
            
       //3バイト目
       Console.WriteLine(Convert.ToChar(data.three));
            
       //int型
       Console.WriteLine(string.Format("int = {0:d}",data.intData));
            
       //float型
       Console.WriteLine(string.Format("float = {0:0.000000}", data.floatData));
```

出力結果
![出力サンプル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233394/442248e3-148c-0da3-765c-a24708029250.png "出力サンプル")

###おわりに

まだまだ、わからないことや知らないことが多いので、勉強しないといけないです…。
データベースとかも勉強したい…
Rails6について

#前提
Rails６について学んだことを書いていきます。

macOS
Docker・Docker Composeインストール済み

#本題

#仮想環境を使う理由
Railsアプリケーションの開発をしようとするときに問題がある。
それは開発用マシン（作業マシン）と実運用を行うマシン（プロダクションマシン）の環境が異なること。
ここで言う環境とは、OSの種類やバージョン、あるいはOS上で動くソフトウェアやライブラリの種類やバージョンをさす。
Ruby on RailsはWindowsでもMacOSでもLinuxでも動作するように設計されている。
しかし、Railsを拡張するために導入するGemパッケージは必ずしもそうではない。
仮に動いたとしても、特定の環境では振る舞いが微妙に異なったり、不具合が出たりすることがある。

この問題の解決方法として、作業マシンとプロダクションマシンの環境を一致させること。
そこで現れるのが**仮想環境**と言うオプション。
Windows、MacOS、ubuntuなどのデスクトップOSの上に仮想環境を構築し、そこにLinuxベースのServerOSをインストールする。

開発中のRailsアプリケーションは仮想環境で動作させる。
デスクトップOS上のWebブラウザからRailsアプリケーションにアクセスして動作を確認。
他方、Railsアプリケーションのソースコードは共有フォルダの機能によって、デスクトップOS上で開いて編集する。
こうすれば、使い慣れたテキストエディタやIDEを使い続けながら、プロダクションマシンと同等の環境下でRailsアプリケーションの開発が行える。

#Dockerとは
仮想環境を提供するオープンソース・ソフトウェア。
設定の容易さや起動の早さが人気。
個々の仮想環境をコンテナと呼ぶ。
コンテナの内容はDockerfileと呼ばれるテキストファイルで記述される。
このファイルがあれば様々なOS上でコンテナを復元できる。

#Docker-composeとは
Dockerを用いて、Railsアプリケーションを開発したり、プロダクション環境で動かすとき、Railsアプリケーションとデータベースサーバーを別々のコンテナとして構築するのが一般的。
Docker-composeはこれらの複数のコンテナをまとめて起動・停止するためのツール。
<code>docker-compose up</code>というコマンドを実行するだけで、Webアプリケーションを構成する全てのコンテナ群が動き出す。

#Rails開発環境の構築
DockerとDocker Composeを用いてRails開発用コンテナ群を構築。

```terminal.
$ git clone https://github.com/oiax/rails6-compose.git
$ cd rails6-compose
$ ./setup.sh
```

##コンテナ群の起動と停止
コンテナ群を全て起動するにはターミナルで下記のコマンドを実行。
オプション-dはコンテナをデーモン（バックグラウンドプロセス）として動かすためのもの。

```terminal.
$ docker-compose up -d
```

コンテナ群を停止するにはターミナルで下記のコマンドを実行。

```terminal.
$ docker-compose stop
```

webコンテナにログイン

```terminal.
$ docker-compose exec web bash
```


Railsのバージョン確認

```
bash-4.4$ rails --version
```
Rails6.0.0と結果出力されればOK！


rails newコマンドで新規Railsアプリケーションの作成。

```
bash-4.4$ rails new アプリ名 -d postgresql --skip-test-unit
```
<code>--skip-test-unit</code>はTest::Unit関連のコードの生成を省略するためのオプション。

中身の確認

```
bash-4.4$ ls -a アプリ名/
```

Gemfileの編集

```
gem "bcrypt"         #パスワードの暗号化
gem "rails-i18n"     #railsが出力するエラーメッセージ、日付、時刻、通貨単位などの翻訳ファイルを集めたもの
gem "kaminari"       #ページネーション機能
gem "date_validator" #日付のバリデーションを行う
gem "valid_email2"   #メールアドレスへのバリデーションを行う
gem "nokogiri"       #XML/HTMLの解析・生成のため
```
※email_validatorはバージョンアップでバリデーションの基準が緩くなり、実用性が乏しくなった。
例えば、@を２個含むようなメールアドレスを有効と判定してしまう。
Pepperの移動

# 目的
Pepperを移動させるアプリを作るために、関連情報を整理し、メモします。

# 簡単な移動
まず、第一歩の目標としてPepperを動かす。

## 前提
* Pepperの周囲に十分のスペースがあること。
* 充電口のフタを閉めっていること。

## 必要なObjectsやActions
1. **Object:Frame** 位置情報を表すオブジェクト
    * Robot Frame: ロボット自身の位置情報
    * Free Frame: 任意の位置情報(移動先を指定する時に使う)
2. **Object:Transform** 移動ルートを表すオブジェクト、
3. **Action:GoTo** 移動アクション

## 移動させる
Gotoアクションに移動先の位置情報を指定すれば、その位置に移動できます。
今回はロボットの1メートル先を目標として、移動させてみます。

#### 1. ロボットの位置情報を取得
```
val actuation: Actuation = qiContext.actuation
val robotFrame: Frame = actuation.robotFrame()
```
#### 2. 移動ルートを作成
```
val transform = TransformBuilder.create().fromXTranslation(1.0)
```
#### 3. 移動先の位置情報を作成

```
val targetFrame: FreeFrame = qiContext.mapping.makeFreeFrame()
targetFrame.update(robotFrame, transform, 0L)
```

#### 4. Gotoアクションを作成し、実行する

```
val goTo = GoToBuilder.with(qiContext)
            .withFrame(targetFrame.frame())
            .build()
val goToFuture: Future<Void> = goTo.async().run()
```

#### goToアクションに関する感想
##goToアクションに関する感想
1. 障害物を自動的に回避できますので、移動先へ真直ぐに進行するではありません。
2. 移動する時に地面の状態や、Pepperのハードより、最後の着地は想定した目標位置とズレが存在します。
3. 途中で何かの原因で移動を完了できない場合があります。（大きな原因は障害物）
4. 処理が中断されば場合に、再開できない時もある。（障害物に囲まれた、または前回の処理はまだキャンセルされてないなど）

# Mapベースの移動

# マーカーの運用
INTER-Mediator 6をUbuntu Server 20.04 LTSで稼働させる

#はじめに
[『VirtualBoxでUbuntu Server 20.04 LTSをLAMPサーバとして稼働させる』](https://qiita.com/motofumi/items/d9c373d2f345d8b3733c)で作成した仮想マシンにINTER-Mediator 6をインストール及び設定をして稼働させる。また、サンプルも動作するように設定する。

#前提条件
[『VirtualBoxでUbuntu Server 20.04 LTSをLAMPサーバとして稼働させる』](https://qiita.com/motofumi/items/d9c373d2f345d8b3733c)で作成した仮想マシンにINTER-Mediator 6をインストール及び設定をして稼働させていること。

#完成状態
INTER-Mediator 6のサンプル(MySQLのみ)が稼働する。

#必要なもの
- INTER-Mediator ver 6.0以降

#参考ドキュメント
- INTER-Mediatorのはじめようで紹介されている手順[『ダウンロードとインストール(Ver.6以降)』](https://inter-mediator.info/ja/for-novices/deploy6.html)

- msyk.netで紹介されている手順[『Ubuntu Server 18でINTER-Mediatorを動かすまで』](https://blog.msyk.net/?p=895)

#大まかな流れ
- PHPのセットアップ
- Apacheのセットアップ
- composerのセットアップ
- INTER-Mediatorのセットアップ
- Sampleを動作させる為のセットアップ


#手順

##PHPのセットアップ
###PHP 追加モジュールインストール
```bash:
$ sudo apt-get install php-mbstring
$ sudo apt-get install php-bcmath
$ sudo apt-get install php-curl
$ sudo apt-get install php-xml
```

##Apacheのセットアップ

###ドキュメントルートの所有権及びアクセス権の変更
```bash:Apacheユーザを割り当て
$ sudo chown -R www-data:developer /var/www
$ sudo chmod -R g+w /var/www
```

```bash:Apacheの再起動
$ sudo systemctl restart apache2

```




##composerのセットアップ
###composerのインストール
```bash:
$ sudo apt-get install unzip
```

```bash:
$ sudo apt-get install composer
```


##INTER-Mediatorのセットアップ
###INTER-Mediatorのインストール
```bash:
$ cd /var/www/html
$ git clone https://github.com/INTER-Mediator/INTER-Mediator.git
```

```bash:
$ sudo chown -R www-data:developer /var/www/html/INTER-Mediator
$ sudo chmod -R g+w /var/www/html/INTER-Mediator
```

###composerを使ってINTER-Mediatorのセットアップ
```bash:
$ cd /var/www/html/INTER-Mediator
$ composer update
```

##Sampleを動作させる為のセットアップ

###MySQLのスキーマ設定
```bash:
$ sudo mysql -u root -p  < /var/www/html/INTER-Mediator/dist-docs/sample_schema_mysql.txt
```
zfs-kmodをCentOSにコピペで入れる。

細かい説明は一切なし。


RHEL 7.8

```bash
yum -y install yum-utils
yum -y remove zfs zfs-kmod spl spl-kmod libzfs2 libnvpair1 libuutil1 libzpool2 zfs-release
yum -y install http://download.zfsonlinux.org/epel/zfs-release.el7_8.noarch.rpm
yum-config-manager --disable zfs
yum-config-manager --enable zfs-kmod
yum -y clean metadata
yum -y install zfs
systemctl enable zfs.target
systemctl enable zfs-import-scan.service --now
systemctl enable zfs-mount.service --now
```

RHEL 8.2

```bash
dnf -y install dnf-utils
yum -y remove zfs zfs-kmod spl spl-kmod libzfs2 libnvpair1 libuutil1 libzpool2 zfs-release
yum -y install http://download.zfsonlinux.org/epel/zfs-release.el8_2.noarch.rpm
yum-config-manager --disable zfs
yum-config-manager --enable zfs-kmod
yum -y clean metadata
yum -y install zfs
systemctl enable zfs.target
systemctl enable zfs-import-scan.service --now
systemctl enable zfs-mount.service --now
```
Pythonで作成したデータの可視化画像をTypetalkに送る方法

# 目的
データをmatplotlibを使って可視化した後、その結果を定期的にTypetalkに送りたいと思ったので作りました。
ローカルに作成した画像を保存せずにそのまま送信する方法になります。

# 必要なライブラリ
* [requests](https://requests-docs-ja.readthedocs.io/en/latest/user/quickstart/)
* [matplotlib](https://matplotlib.org/)
* [json](https://docs.python.org/ja/3/library/json.html)
* [io](https://docs.python.org/ja/3/library/io.html)


# 作り方
```python
import requests
import json
import matplotlib.pyplot as plt
import io

image_buffer = io.BytesIO()
plt.plot([1,2,3]) # 折れ線グラフを書く
plt.savefig(image_buffer, format='jpeg') # ここで書き出し

token = '<Typetalkのbotのトークンを取得して代入してください>'
topic_id = '<Typetalkの投稿するトピックIDを代入してください>'

# メッセージ送信用のURL
message_url = f"https://typetalk.com/api/v1/topics/{topic_id}?typetalkToken={token}"

# ファイルアップロード用のURL
upload_file_url = f'https://typetalk.com/api/v1/topics/{topic_id}/attachments?typetalkToken={token}'

files = {'file': ('line.jpeg', image_buffer.getvalue(), 'image/jpeg')}

upload_file_result = requests.post(upload_file_url, files=files)

# 実行の確認
print(upload_file_result.status_code)
print(upload_file_result.content)

fileKey = json.loads(upload_file_result.content)['fileKey']

message_result = requests.post(url_message, {'message': '今日の結果!', 'fileKeys[0]': fileKey})

# 実行の確認
print(message_result.status_code)
print(message_result.content)
```

# 実行結果
<img width="499" alt="スクリーンショット 2020-05-20 20.29.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199445/fc27fa84-a85e-2041-a462-1418570cbf18.png">

これで定期的なデータのモニタリングができる！
【Golang】エラーハンドリング

#【Golang】エラーハンドリング
Golangの基礎学習〜Webアプリケーション作成までの学習を終えたので、復習を兼ねてまとめていく。 基礎〜応用まで。


```
package main
//エラーハンドリング
//Goには例外機構がない。
//Goでは関数が複数の戻り値を返す特製を利用して、エラーが発生したかの処理を書ける。

import (
	//"fmt"
	"log"
	"os"
)

func main() {
	file, err := os.Open("./aaaaa.go")
	//もしエラーだったら
	if err != nil {
		//出力して終了
		log.Fatalln("Error!")
	}	
	//遅延でクローズ
	defer file.Close()
	//スライス作成
	data := make([]byte, 100)
	//100バイト分読み込み、スライスに追加
	count, err := file.Read(data)
	//なければエラー
	if err != nil {
		log.Fatalln("Error")
	}
	//文字列に変換して読み込みを表示
	fmt.Println(count, string(data))


	//errが何度も出てくるが、毎回上書きされている点に注意
	//err :=は最低でも左側（ここでいうfile,count)が定義されれば、エラーにならない。


	//Chdir ディレクトリ移動
	//エラーしか返さない場合は再定義はできない
	//:=にすると、再定義になる為エラーになる。
	//errしか返さない場合は、一行に省略できる
	if err = os.Chdir("test"); err != nil {
		log.Fatalln("Error")
	}	file.Close()
}
```
【Golang】for文の理解に苦戦した話 ※初心者向け

#あいさつ
Masayuki.です。本記事が初投稿になります。
今年(令和2年)の3月から新米プログラマになり、約2ヶ月半が経過しました。
本当にあっという間だった。。。

まだ入社して日が浅く、社内で一人前になるために日々の学習は怠れません。なにも学習しなかった日の夜には身体が痒くなるレベルになってしまいました←

せっかく日々取り組んでいることがあるので、その備忘録をqiita記事に残すことで、ここにいる誰かの役に立てればと考えています。

今日はGoのfor文についてです。

```main.go
Q1 . 以下のスライスから一番小さい数を探して出力するコードを書いてください

l := []int{100, 300, 23, 11, 23, 2, 4, 6, 4}
```
これはGoを独習で学び始めようと、やってみたカリキュラムの中で出題された問題です。

入社当時、これを見たときは
…？
となんのこっちゃわからず…

3分ぐらい考えた後に回答例を見ました。

```main.go
func main() {
	l := []int{100, 300, 23, 11, 23, 2, 4, 6, 4}
	var min int

	for i, num := range l {
		if i == 0 {
			min = num
			continue
		}
		if min >= num { 
			min = num
		}
	}
	fmt.Println(min) //2が出力される。
}
```

...ん？なんで2が最小値だってわかったの？なにが起こったの？

恥ずかしながら、これが腹落ちするようになるまで私はかなりの時間を要してしまいました。

ポイントとして、このfor構文にはif文が2つあって、最初のif文

```main.go
for i, num := range l {
if i == 0 {
	min = num
	continue
}
```
ここは処理が一回しか走らないということなんですね。

この辺を理解するには、スライスの概念を理解しておく必要があります。
簡単に説明すると、配列はあくまでも複数の要素を持った値なのに対し、スライスは配列の一部または全部を指し示す参照型のデータです。
例えば
 `a := [5]int{2, 10, 8, 15, 4}`
[5]という配列にint型の値5つ渡しているのに対し、スライスは
`a := []int{1, 3, 5, 7, 9} `
[]と、中身は空です。この[]の中に値を追加したり変更したり、コピーできたりします。

今回はfor文についての記事なので詳しいスライスについての説明は割愛します。

※参考までに。
[他言語プログラマがgolangの基本を押さえる為のまとめ](https://qiita.com/tfrcm/items/e2a3d7ce7ab8868e37f7)

とすると、

`for i, num := range l`

ここのrangeでは、for文の中でlというスライスを取得してきてくれる役割があります。
それを i, num　（インデックスと値）としてそれぞれ代入してくれてるんですね。


```main.go
for i, num := range l {
 if i == 0 {
	min = num
	continue
}
 if min >= num { 
	min = num
		}
	}
```

そうすると、上のfor文の処理ではminにはインデックス[0]の値、100が代入されました。


下のfor文の処理では
`if min >= num { //もしminがnum以上だったら
      min = num   //minにnumを代入
        }
}`

とすることで、
`l := []int{100, 300, 23, 11, 23, 2, 4, 6, 4}`
このスライスの値をfor文の繰り返し処理で一つずつ参照していって、numにminよりも小さい値がきたらそれがminに新たに代入されます。最終的には一番小さな値が代入されるはずです。

スライスの値の中で一番小さい値は2ですね。なので最終的には2が出力されます。

以上がこの問題の解説になります。




いかがでしたか？
ちなみに、Golang以外の他言語ではfor文以外にもwhile文とかありますが、Golangではfor文しかありません。シンプルですよね。


#さいごに
業務未経験からGoを学び使えるようになることは、私のように元々RubyやRailsでコードを書いていた駆け出しエンジニアからすると困惑することや躓くポイントが沢山あります。
~~特にポインタ。~~

しかし、諦めずに理解できるまで学習に取り組めば必ず成長を感じる機会があります。やはり根気強く継続することは大切ですね。

今後も積極的にしてインプット・アウトプットしていきたいと思います。
最後まで読んでいただき、ありがとうございました！
Wordpressでphpのデバッグをしたい

wp-config.confの`WP_DEBUG`を`true`に変更して以下を追加する。

```conf:wp-config.conf
define( 'WP_DEBUG', true );
if ( WP_DEBUG ) {
	define( 'WP_DEBUG_LOG', true );
	define( 'WP_DEBUG_DISPLAY', false );
	@ini_set( 'display_errors', 0 );	
}
```

あとは適当なphpファイルで`error_log()`を使って出力する。

```php:functions.php
error_log('this is debug.');
```

wp-content以下に`debug.log`が出力されるので確認できる。

```log:debug.log
[20-May-2020 00:00:00 UTC] this is debug.
```
【Ruby on Rails】undefined method `id' for nil:NilClassのエラー解消方法

# "undefined method `id' for nil:NilClass"のエラー
<img width="876" alt="スクリーンショット 2020-05-20 19.33.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587506/71b601d6-cbed-da62-9cbb-63606d5df841.png">

もし打ち間違えなどがないのにこのようなNoMethodErrorのundefined method `id' for nil:NilClassのエラーというエラーがでた場合どんなことが原因として考えられるか。メソッドが定義されていないというエラーがでました...どうしてきちんと定義したのにこのようなエラーがでたのだろう...

この実装はログインしたユーザーには自分の情報が見れても、他のユーザーには見せたくない場合にこのような実装を用います。
```<% if @user.id == current_user.id %>```

実装したコードの記述に間違いがないのにどうしてこうなったんだろうと考えてあることに気がつきます！

#### ログインをしていませんでした！

ログインをしていないと当然成立しない処理なので当然ですよね^_^;
ログインしてから再度確認をしたら無事にエラーが解消されました！

![S__56467458.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587506/5de0eeb3-502a-6ac6-6c0a-66c553e19f79.jpeg)
【VSCode】拡張機能 ”jumpy” を日本語でも使用したい

VSCode でのカーソル移動を高速化する拡張機能の [jumpy](https://marketplace.visualstudio.com/items?itemName=wmaurer.vscode-jumpy) を日本語でも使えるようにするための個人メモ。

## 設定ファイル `Jumpy: Word Regexp`

`Jumpy Word Mode` で移動するときの単語を正規表現で指定する設定。
現状、 `[A-Za-z0-9_]{4,}|[\u30A1-\u30FC]{4,}|[\u3041-\u3096]{4,}|[\u4E00-\u9FA0]{4,}` でうまく動作しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501098/7d2c63a7-0096-e25b-d1d2-c355dea272aa.png)

正規表現の内訳は以下の通り。

+ `[A-Za-z0-9_]{4,}`：4文字以上連続する半角英数字 & アンダースコア
+ `[\u30A1-\u30FC]{4,}`： 〃 カタカナ & 音引き（ー） & 中黒（・） 
+ `[\u3041-\u3096]{4,}`： 〃 ひらがな
+ `[\u4E00-\u9FA0]{4,}`： 〃 ほとんどの漢字

あまりに多くの単語にマッチしすぎても移動範囲が狭くなってしまうので、4文字程度を基準に調節するといいのではないでしょうか。漢字を   `[\u4E00-\u9FFF]` と指定する記事も見つかりますが、検索に負荷がかかるのかパソコンが唸りをあげるようになったのでこの範囲にとどめています。
DockerでMySQLを簡易的に立ててデータインポート

## 環境
* Windows 10
* MySQL Workbench 8.0 
* Docker Toolbox
 - MySQL8.0.16

## 工程
* docker に MySQL を入れる
* MySQL Workbench で接続できるようにする
* SQLをインポートする

### Docker machine の起動
Docker Quickstart Terminal のアプリケーションを起動する

### MySQL のイメージを取得
```bash

$ docker pull mysql:8.0.16
```

### MySQLコンテナを作成して起動
```bash

# docker ps -a で全てのコンテナ一覧
# docker ps で起動しているコンテナ一覧
# docker stop [CONTAINER ID] でコンテナ停止
# docker rm [CONTAINER ID] でコンテナ削除

$ docker run -it --name temp-mysql -e BIND-ADDRESS=0.0.0.0 -e MYSQL_ROOT_PASSWORD=mysql -p 3306:3306 -d mysql:8.0.16

# 一度作成したら docker start temp-mysql で起動できる

```

### MySQLコンテナに接続
```bash

$ docker exec -it temp-mysql bash
```


### MySQLに接続
```bash

$ mysql -u root -p -h 127.0.0.1

※終わったら MySQL を exit、コンテナも exit
```

### 外部IPを確認 
```
$ docker-machine ls
NAME                ACTIVE   DRIVER       STATE     URL                         SWARM   DOCKER     ERRORS
default             *        virtualbox   Running   tcp://192.168.99.100:2376           v19.03.5
local-by-flywheel   -        virtualbox   Stopped                                       Unknown
```

### MySQL Workbench から MySQL に接続
※MySQL Workbench は新しいバージョンをインストールしておくこと

#### 接続情報
|HOST|ACCOUNT|PASS|PORT|
|---|---|---|---|
|192.168.99.100|root|mysql|3306|

#### SQLをインポートするデータベースを作成
```sql

CREATE DATABASE `{database_name}`;
```

### SQLをインポート

* MySQL Workbench を起動して MySQL に接続する
* `Navigator（左メニュー）` のタブを `Administration` から `Schemas` に切り替える
* 作成したデータベースを選択
* 上メニューの `Server` で `Data Import` を選択
  + `Import from Self-Contained File` のラジオボタンを選択
  + インポートしたいファイルを選択
  + `Default Traget Schema` でインポート先の `Shema` を選択
  + `Start Import` ボタンをクリック
【Bootstrap】submitボタンの中に無駄な四角が入ってしまう際の対処法

無駄な四角が入ってしまうコード

```
  <button type="button" class="btn btn-success"><div class="actions">
    <%= f.submit  %>
  </div></button>
```

下記のように変になってます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568461/96051203-7113-1db7-fb91-72a21d431211.png)


##解決法
submitボタンの中にbootstrapをかく。


```
<div class="actions">
    <%= f.submit('投稿する',class: 'btn btn-primary btn-lg my-1 mb-5 px-5')  %>
  </div>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568461/560bbf89-d053-ad92-f03d-21b704985811.png)
herokuでLPを無料で公開する方法

# この記事について
htmlファイルをherokuでデプロイしようと思った時、あれ？できない。。。となったので備忘録として手順を振り返りつつ残しておきたいので記事にしました。

#参考記事
・HTMLページをHerokuにデプロイ
https://qiita.com/Hai-dozo/items/f0829dd121f477754b98
こちらの記事はとてもわかりやすく書いてます。

#開発環境
・Mac Pro
・Herokuアカウントがあること
・PHPがローカルにインストールされていること
・Composerがローカルにインストールされていること
・githubにファイル登録済み

#1.自分のLPファイルにindex.php,package.jsonを追加　以下の内容を入れておく

```php:index.php
<?php include_once("index.html"); ?>
```
```php:package.json
{}
```

#2.herokuにログイン

    heroku login

#3.herokuでアプリを作成するか追加する、その後確認

    heroku create アプリ名 or git remote add heroku 作成したherokuアプリのurl
    git remote -v

origin と herokuが作成されていたら完了です。

#4.gitとherokuにpushする

    git add .
    git commit -m "コメント"
    git push origin master
    git push heroku master

#5.herokuにデプロイされたか確認

    heroku ps:scale web=1
    heroku open

これで画面が正常にでたら完了です。

#6.最後に

以上がhtmlファイルをherokuにアップする備忘録でした。
デプロイ作業はどこがミスしてるかわかりにくいので振り返りに使おうと思います。
Herokuにデプロイできなくて困った話

参考にした記事
[【解決】Herokuデプロイで躓いた1年前の自分へ](https://qiita.com/___inon_/items/bb85d26d50ff3940441c)

あるアプリを制作し、Herokuにデプロイしようと、

```console
$ git push heroku master
```
上記のコマンドを実行したところ、

`error: failed to push some refs to 'https://git.heroku.com/sleepy-mountain-99332.git'`
というエラーが出現。
さらに、heroku上にデータベースを作成しようと

```console
heroku run rails db:migrate
```
のコマンドを実行するも、`bash: rails: command not found `というエラーが出てしまいました。
そこで、これらのエラーメッセージを検索し、対処法を試してみましたが、解決には至りませんでした。

##（試したこと）##

- rake assets:precompileをターミナルで入力し、再度Herokuにプッシュ
- Production.rbにてconfig.assets.compile = falseからtrueに変更
など

しかし、以下のコマンドを実行したら、解決に至りました。

```console
heroku buildpacks:set heroku/ruby && heroku buildpacks:add --index 1 heroku/nodejs && git push heroku master && heroku run rails db:migrate && heroku open
```
Herokuのbuildpackにrubyパッケージをセットし、nodejsパッケージを追加することが必要でした。
この記事を参考にしました。
[【解決】Herokuデプロイで躓いた1年前の自分へ](https://qiita.com/___inon_/items/bb85d26d50ff3940441c)
OutSystemsのEntityのExpose Read Onlyの動作を確認してみる

EntityをPublicにして、他モジュールから参照するときには、Expose Read Only=Yesにすることが推奨されています。
このプロパティ値についてまとめてみます。

# 操作手順
Entityのプロパティから、まずPublic=Yesにします。これで他モジュールから参照できるようになる。
すると、Expose Read Onlyという別のプロパティが有効になります。デフォルトでYesのはず。Yesだと他のモジュールからEntityを直接更新できなくなる（更新用Actionを作成して提供することになります）。
![qExpose2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/af5d75dd-c4ba-0e26-6c90-eead7ce089b5.png)

Public=Noの状態のプロパティは以下のようになります（Expose Read Onlyが灰色で選択不可能）。
![qExpose1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/627a0792-fb2a-df89-64e8-5baddc9775f1.png)

もし、Entityを他のモジュールから直接更新できるようにするときは、Expose Read Only=Noに設定します。

# 効果
別のモジュールから該当Entityを参照して効果を確認。
Yesのとき：Entity作成時に自動作成されるCRUDのAction群が、Getの1種類だけになっています。
これで、自動作成されるAction経由での更新ができない。更新するにはEntityを定義したモジュールに、自動生成される更新Actionをラップする別のActionを定義してPublic=Yesにしてください。
![qExpose3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/b3f50dd0-e572-024b-6490-d8c369e22e80.png)

SQL を直接使った更新処理も、OutSystemsが止めてくれました。
![qExpose5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/23e6a10f-e9d8-c3bb-8eaf-28a31d527460.png)

Noのとき：CRUDの操作も全て利用可能ですね。
![qExpose4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/9874a9eb-834f-0ddc-614c-e3d51667404d.png)

# Expose Read Only=Yesにする理由
もし、Expose Read Only=NoのEntityに対して様々な開発を行い、あちこちのモジュールで独自に更新処理を書いていたとします。
ある時点で、更新時には必ず特定のログを記録するなどの追加要件が出たとしたらどうでしょうか。

こういう事態でも、Expose Read Only=Yesにしてあれば、更新処理は該当モジュールがPublicとして提供しているActionだけになります。影響調査もすぐ済み、修正もそうでないときに比べでだいぶ楽になります。

このため、一般的には、Expose Read Only=Yesにしておくほうがいいと思います。
あまりにEntityが多く、更新処理も非常にシンプルであることがわかりきっている場合には、別の判断が必要かもしれません。
P5.js 日本語リファレンス(storeItem)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の storeItem関数を説明します。

## storeItem() 

### 説明文

キー名でローカルストレージに値を格納します。キーは変数の名前にすることができますが、そうである必要はありません。保存されたアイテムを取得するには getItem() を使用してください。

ローカルストレージとは、ブラウザに保存され、ブラウジングセッションとページの再読み込みの間も保持されているものです。

パスワードや個人情報などの機密データはローカルストレージに保存しないでください。

### 構文

storeItem(key, value)

### パラメタ

- key  
String：キー名

- value  
String | Number | Object | Boolean | p5.Color | p5.Vector：保存する値

### 例

```javascript
// キャンバスの中心にキー入力した文字を表示します
// ページをリロードすると最後に入力した文字を再表示します
// (最後に入力した文字はローカルストレージに保存してあるため)
let myText;

function setup()  {
  createCanvas(100, 100);
  myText = getItem('val');

  // val にはまだ一度も保存していないので NULL になっている
  if (myText === null) {
    myText = '';
  }
 }

function draw()  {
   textSize(40);
   background(255);
   text(myText, width / 2, height / 2);
 }

function keyPressed()  {
   myText = key; // 入力したキー(文字)の内容を myText に代入
   storeItem('val', myText); //  myText の値をローカルストレージに保存
 }
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/OZEG-8F3x


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
P5.js 日本語リファレンス(removeItem)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の removeItem関数を説明します。

## removeItem() 


### 説明文

storeItem() で保存したローカルストレージアイテムを削除します。

### 構文

removeItem(key)

### パラメタ

- key  
String：キー名

### 例

```javascript
function setup() {
  let myNum = 10;
  let myBool = false;
  storeItem('key1', myNum); // key1 に 10 を保存します  
  storeItem('key2', myBool); // key2 に false を保存します
  print(getItem('key1'));
  print(getItem('key2'));
  removeItem('key1') ;    // key1 を削除します
  removeItem('key2') ;    // key2 を削除します
  print(getItem('key1')); // 再度、key1 を取得します -> NULL を表示
  print(getItem('key2')); // 再度、key2 を取得します -> NULL を表示
}
```



### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。