OmniAICreator/Qiita-1.07M huggingface dataset:
Laravel 1対多のリレーション先の項目の集計値(最小値, 最大値, 平均値, 合計値 など)で親テーブルを並べ替えたい

###テーブルの例

たとえば、商品基本情報と詳細が1対多の関係で、データベースを構成したとします。
一覧表示する時に、価格順で並び替えたい時はどんな感じにクエリビルダーを使えばいいか、いろいろ試してこれかなぁというのを投降します。


【商品情報テーブル (products)】
id 商品ID
name 商品名

【商品詳細テーブル (detail)】
id 商品詳細ID
productID 商品詳細ID
size サイズ
price 価格
visible 表示・非表示

###コードの例

```
$aggregates = DB::table('detail')
	->select('productID',
	DB::raw('MIN(price) as min_price'),
	DB::raw('MAX(price) as max_price')
)
    ->where('visible', 1)
    ->groupBy('itemID');

$db = DB::table('products')
    ->joinSub($aggregates, 'aggregates', function ($join) {
        $join->on('products.id', '=', 'aggregates. productID');
    })
    ->orderBy('min_price01', 'desc')
    ->get();

```

これなら、並び替えできます。ここ参考にしました。
https://readouble.com/laravel/6.x/ja/queries.html
最初は、joinでリレーションを作って、groupByでまとめ、価格の最大・最小をselectに入れて、を並び替えてみようとしたのが、できなかったので、こうなりました。

もっと上手な書き方があれば、こんな方法はどうだい？ってコメントいただけると、ありがたいです。
よろしくお願いいたします。
【Javascript】 メソッド　まとめ　基礎基本コード　メモ

##【ゴール】
JSのメソッド、あれこれ

##【メリット】
■　javascript理解度向上


##【開発環境】
■ Mac OS catalina
■ Ruby on Rails (5.2.4.2)
■ Virtual Box:6.1
■ Vagrant: 2.2.7

##【コード】

####console.log
＊括弧内()出力
＊括弧内()には、変数、定数も突っ込める
＊数字は""不要

```js:hoge.js
console.log ("hoge"); //hoge出力

console.log(2); //2出力
```

####①getElementById
＊idタグの値を取得

####②addEventListner
＊処理を追加

####③classList
＊括弧内()指定したクラスを追加

```js:hoge.html
<style>
  .font-color{
    color: red;
  }
</style>

<div id="target">pppp</div>


<script>
const id = document.getElementById('taregt');　//①

id.addEventListner(click, () =>{   // ②  クリックしたら
  id.classList(font-color);       //  ③ 上述のfont-colorというクラスを追加しますよ-
});
</script>
```

####toggle
＊クラスがあれば排除、なければ追加

```js:hoge.html
<style>
  .font-color{
    color: red;
  }
</style>

<div id="target">pppp</div>


<script>
const id = document.getElementById('taregt');

id.addEventListner(click, () =>{   //  クリックしたら
  id.toggle(font-color);       // 上述のfont-colorというクラスをつけたり消したり-
});
</script>
```

##【留意点】
＊**末尾の「；」つけ忘れるべからず**
＊変数、定数の違いをしっかりと理解する
＊時間かけてでもスペルミス撲滅、記述が他ファイルにまたがる為


##【合わせて読みたい】
■ 【Javascript】JS　変数　定数　違い 　一言でまとめました
https://qiita.com/tanaka-yu3/items/51b8b0630a1e4e2d52c8

■ 【JavaScript】 js　繰り返し文　for / while
https://qiita.com/tanaka-yu3/items/942d9d4838ebe14be1c2

■ 【jQuery】初心者でもよく理解できたやつ
https://qiita.com/tanaka-yu3/items/a03734b248c3f2ee8461
interfaceの利点について(初学者向け)

## はじめに
こんちわす。はじめまして、Souと申します。
遅かれながら初めて記事を書くわけですが、悩んだ挙句、自分がPGする上で一番とっつきにくかった
interfaceについて書こうと思います。そもそも明確な利点がわからなかった経験があり、同じ悩みを抱えたエンジニアはいると思います。。
では実際にコードを見ながらアプローチしていきましょう。言語はc#で書きますが、スキル的に読むのは難しくないと思いますので一緒に頑張りましょう!



## 利点　其の①　メソッド名を強要出来る
よく聞くやつですね。最初は「それだけ？？」と思うかもしれません。僕も最初はそうでした。
具体的には、**"あらゆる変更に強くなる"**という風に置き換えれます。

例えば商品情報をデータベースから取得するという想定で考えましょう。
商品を識別できるユニークな値「id」を引数にし、それを条件に商品情報を取得するといったモノを想定してください。

インターフェース


```c#:ISearchItemQuary.cs
    public interface ISearchItemQuary
    {
        Item Execute(int id);
    } 
```

具象クラス

```c#:SearchItemQuaryFromDataBase.cs
    public class SearchItemQuaryFromDataBase : ISearchItemQuary
    {
        public Item Execute(int id)
        {
           "データベースから商品情報取得処理;"
        }
    } 
```

実行クラス※使用するフレームワークであったりアーキテクチャによって実行クラスの名前は様々だと思うので今回は「Main」クラスにさせてください。

```c#:Main.cs
    public class Main
    {
        private ISearchItemQuary _searchItemQuary;

        public Main (ISearchItemQuary searchItemQuary)
        {
           _searchItemQuary= searchItemQuary;
        } 
        //実行処理
        static void Main(string[] args)
        { 
            //商品IDが1の商品情報を取得
            _searchItemQuary.Execute(1);
        }
    }
```

とします。
だが、ここでパフォーマンスなどの問題があってデータベースからではなくキャッシュサーバーから取得するように変更が必要になりました。
リファクタリングを行う上で大事なのは既存の処理を出来るだけ変えないことです。変更に強くなくてはなりません。


では、さっそくキャッシュから取得するクラスを作りましょう。

```c#:SearchItemQuaryFromCache.cs
    public class SearchItemQuaryFromCache : ISearchItemQuary
    {
        public Item Execute(int id)
        {
           "キャッシュサーバーから商品情報取得処理;"
        }
    } 
```
SearchItemQuaryFromDataBaseクラスと同じインターフェースISearchItemQuaryを使用します。
これによりExecuteメソッドを強要できます。
この時点でDBとCacheで同じメソッド名を持っていることを念頭に置いてください。

これでリファクタリングは終わりです。同じインターフェースを噛ませているので、実行クラスで変える箇所はありません。

※Mainメソッドのコンストラクタの具象クラス(DBかCache)はDIコンテナで結びつけてると想定してください。
簡単に言うとインターフェースと具象クラスをアプリ起動時紐付けれるやつ。初学者の方はあまり気にしなくていいです。


## 利点　其の② インスタンスを柔軟に選択できる
もう既に①の例で証明できてるのですが、もう一度確認してみましょう。

```c#:Main.cs
        public Main (ISearchItemQuary searchItemQuary)
        {
           _searchItemQuary= searchItemQuary;
        } 
```

①でDBとCacheの2つのクラスを作成しましたが、前回も述べたようにクラスが増えたからといってMainクラスは何の変更もしていません。
理由はコンストラクタの引数がインターフェースで定義しているためです。
ISearchItemQuary を使用しているクラスであればこのMainクラスは誰でも使用することが出来ます。
まさに柔軟性が垣間見えた瞬間です！


## 利点　其の③　テストの見通しをよく出来る
TDD(テスト駆動開発)を行う上で、interfaceを作成してテストを実施してから、具象クラスを作成するのが定石だと思います。
モックを使用した例で見てみましょう。
↓先程のinterfaceです。

```c#:ISearchItemQuary.cs
    public interface ISearchItemQuary
    {
        Item Execute(int id);
    } 


```
↓テストクラス

```c#:TestsSearchItemQuary.cs
    
    private readonly int _id = 1

    public Item TestShouldGetItem()
    {
        //ISearchItemQuaryのモックを作成
        var mockContext = new Mock<ISearchItemQuary>();

        mockContext.Setup(m => m.Execute(_id)).Returns("idに紐づく商品情報");
        var item = mockContext.Object;

        //id「1」に紐づいた商品情報を取得
        return item.Execute(_id)
    }

```
この時、ISearchItemQuaryの具象クラスは未作成だと考えてください。DBにもキャッシュサーバーにも接続する処理がないという状況です。
モックの概念は個別で調べてください。まあ簡単に言うとDBなどがなくても値をあたかも取得したかのように振舞えます。

このようにinterfaceを使用することで実際の処理がなくてもモックに振舞いを行わさせることで、テストを容易にし、品質を担保できるのです。






## まとめ
まだまだ、factory method、SOLID原則など
参考になるモノはあるので、初学者の方はこの辺からアプローチしてみてはいかがでしょうか?
AWSハンズオン実践メモ  〜AWS 上で静的な Web サイトを公開しよう！〜

# はじめに
AWS公式の[ハンズオンシリーズ](https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-hands-on/?trk=aws_blog)の中から、Amazon S3 の静的ウェブサイトホスティング機能を用いて、静的な Web サイトをインターネット上に公開する[ハンズオン](https://pages.awscloud.com/JAPAN-event-OE-Hands-on-for-Beginners-StaticWebsiteHosting-2020-reg-event-LP.html?trk=aws_introduction_page)を実施しました。

本記事は自身のハンズオン学習メモとして投稿します。
# 目次
- [ハンズオンの目的](#ハンズオンの目的)
- [本編](#本編)
- [おわりに](#おわりに)

# ハンズオンの目的
Amazon S3 の静的ウェブサイトホスティング機能を用いて、簡単な Web サイトをインターネット上に公開するハンズオンを実施。

- S3の静的Webホスティング機能を利用して、簡単なwebサイトを作成し、公開できるようになる
- CloudFrontを用いて、コンテンツキャッシュの仕組みを学ぶ
- Route53を用いて、独自ドメインの設定方法を学ぶ
- ACMを使い、SSL/TLS証明書のプロビジョニング、管理、デプロイの方法を学ぶ

>Amazon S3 の静的ウェブサイトホスティング機能を用いて、簡単な Web サイトをインターネット上に公開するハンズオンを行います。HTML や CSS を用いて作成したサイト、例えば新規プロタクトのランディングページや個人のポートフォリオサイトなどを容易にホスティングすることができるようになります。
あわせて、Amazon CloudFront という CDN サービスを用いたコンテンツキャッシュ、Amazon Route 53 という DNS サービスを用いた独自ドメインの取得 & ネームサーバーへのレコード登録、AWS Certificate Manager を用いた証明書の作成 & 配置の手順についても学ぶことができます。

![20200629.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646352/5e995c68-ce26-221b-4f60-14656897adad.png)
(https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-hands-on/?trk=aws_blog より引用)

# 本編

### S3 の静的ホスティング機能を使ってみる

- S3作成。パブリックアクセスを許可
- バケットポリシー記述(json形式)
- プロパティの"Static website hosting"から、インデックスドキュメントにindex.htmlを設定
- index.htmlをアップロード
- エンドポイントにアクセス

### Cloud9 環境を立ち上げて静的コンテンツを開発する + AWS CLI で S3 にファイルアップロードする

- Cloud9を起動
- index.htmlを編集
- CLIでindex.htmlをs3にアップロード
- 再度エンドポイントにアクセス。index.htmlが更新されている事を確認

### 続・静的コンテンツの開発 + AWS CLI で S3 に複数のファイルを一括アップロードする

- index.htmlを編集し、画像を表示させる
- faviconを表示させる
- CSSを使い、画像位置を調整する
- 編集したファイルを一括でS3アップロード(オプション--recursiveを使用)
- 再度エンドポイントにアクセス。index.htmlが更新されている事を確認

### CloudFront を使って、画像をキャッシュさせる

- CloudFrontのDistributionを作成
- CloudFront経由でS3のindex.htmlを表示出来る事を確認
- CloudFrontにアクセスした際、デベロッパーツールのネットワークの項目に、X-Cacheの項目が追加されている事を確認

### Route 53 で独自ドメインを取得し、S3 に HTTP アクセスする

- Route53でドメインを取得
- エイリアスレコードとして、S3のバケット名を登録
- エイリアスでS3にアクセス出来る事を確認

### ACM を使い、Route 53 - CloudFront - S3 で HTTPS アクセスする
#### 通信のHTTPS化

- ACMで証明書作成。(バージニア北部で作成する必要がある。)DNSで検証。(CNAMEを追加することで検証を行う)
- CloudfrontのViewer Protocol PolicyをRedirect HTTP to HTTPSに変更 
- Alternate Domain Names(CNAMEs)にドメイン名を入力
- SSL Certificateの項目でCustom SSL Certificateを選択
- Route53のエイリアスレコードをCloudFrontに変更
- ブラウザでアクセス。HTTPSでの通信になっている事を確認

#### S3の直接アクセスを無効化
- S3への直接アクセスを無効にする(バケットポリシー削除＆ウェブサイトのホスティングを無効にする)
- CloudFrontの設定を変更
  - CloudFrontのDistributionからOrigin Domain NameをS3のドメインに変更 
  - Restrict Bucket AccessをYesに変更
  - Origin Access IdentityをCreate a New Identityに設定
  - Grant Read Permissions on BucketをYesに設定


### 作成した AWS リソースの削除
粛々と削除。特筆すべきことはなし。

#おわりに

CloudFront、Route53、ACMを触った事がなかったので、いい経験になった。
静的なwebサイトであればS3で手軽に公開できるし、Sorryページも工数かけずに作れる事が分かった。

- CloudFrontのキャッシュの設計
- ACMの証明書の種類と細かな認証の仕組み

あたりの理解が不十分なので、今後学習していきたい。
【Laravel】任意のExceptionをthrowする。

メモとして残します。


#■やり方

`throw new \Exception("エラーメッセージ");`

```php

try{
    //処理
    if(!$hoge){
        throw new \Exception("エラーだよ");
    }
} catch (\Exception $e) {
    echo $e->getMessage();// エラーだよ
}
```
MySQLの稼働が安定しない…Railsアプリが起動していない。


###  <font color='lightblue'>発生した背景</font>
MySQLサービスがまたもやエラー。何回も発生すると、流石に時間の浪費に怯えてしまいます。以下エラー内容になります。

```
Can't connect to local MySQL server through socket '/tmp/mysql.sock' 
```

###  <font color='lightblue'>環境</font>
| 項目              |               内容 | 
|:-----------------|:------------------:|
| OS.Catalina      |           v10.15.4 |      
| Ruby             |            v2.5.1 |  
| Ruby On Rails    |           v5.2.4.3 |   
| MySQL            |           v5.6 |   



###  <font color='lightblue'>対応手順</font>

【調査1】MySQLが起動しているか。
僕は「SequelPro」を使っているので、接続してみる。→接続エラー

```:プロセスの稼働状況を確認
CMD>ps -ef | grep mysql
  501  1287     1   0 11:45AM ??         0:00.06 /bin/sh /usr/local/opt/mysql@5.6/bin/mysqld_safe --datadir=/usr/local/var/mysql
  501  6400  1287   0 11:55AM ??         0:00.51 /usr/local/opt/mysql@5.6/bin/mysqld --basedir=/usr/local/opt/mysql@5.6 --datadir=/usr/local/var/mysql --plugin-dir=/usr/local/opt/mysql@5.6/lib/plugin --log-error=ichikawadaisukenoMacBook-Air.local.err --pid-file=ichikawadaisukenoMacBook-Air.local.pid
  501  6402   804   0 11:55AM ttys000    0:00.01 grep mysql
```
！？稼働しているようには見える！？


【調査2】まずはエラー内容から。ソケットファイルがないと言われているので、以下のコマンドで対応してみました。

```:ソケットファイルを試しに作成してみる。
CMD>cd アプリケーションフォルダ
CMD>touch /tmp/mysql.sock
```
→結果、改善せず。

【調査3】ログを確認してみる。

```:MySQLのログを確認
CMD>more /usr/local/var/mysql/ichikawadaisukenoMacBook-Air.local.err
（一部省略）
mysqld_safe A mysqld process already exists
````
※この後再起動するも、改善ならず。

###  対応
プロセスが多重起動している様子。既存の稼働中のプロセスを停止する。

```:プロセスの停止
CMD>kill -9 対象のサービスプロセス
```

今回はこれだけで改善しました。しかし、まだ以下のエラーメッセージが出力されたままです。

```
200616 16:04:42 mysqld_safe A mysqld process already exists
```
対応は後日にしようと思います。
AWS(EC2)AMIにffmpegをインストールする。

# やりたいこと

AWS(EC2)AMIにてffmpegをインストールして使えるようにする。

# 手順

root権限で下記を実行する。

```
rpm --import http://li.nux.ro/download/nux/RPM-GPG-KEY-nux.ro
rpm -Uvh http://li.nux.ro/download/nux/dextop/el7/x86_64/nux-dextop-release-0-1.el7.nux.noarch.rpm
yum -y install autoconf automake cmake freetype-devel gcc gcc-c++ git libtool make mercurial pkgconfig zlib-devel
yum install -y https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
```

https://download-ib01.fedoraproject.org/pub/epel/7/x86_64/Packages/l/libass-0.13.4-6.el7.x86_64.rpm
をダウンロードして手動で入れる。

```
rpm -ivh libass-0.13.4-6.el7.x86_64.rpm
```

http://mirror.centos.org/centos/7/os/x86_64/Packages/libva-1.8.3-1.el7.x86_64.rpm
をダウンロードして手動で入れる。

```
rpm -ivh libva-1.8.3-1.el7.x86_64.rpm
```

```
yum install -y ffmpeg ffmpeg-devel
```

# 確認

下記コマンドでバージョンが表示されたらOK。

```
ffmpeg -version
```
# 使い方


### 動画の情報を調べる。

```
ffmpeg -i input.mov
```
### movをmp4に変換する。

```
ffmpeg -i sample.mov sample.mp4
```
【git 】ブランチの確認方法（新規順・古い順）

###ブランチの一覧表示

初心者は忘れがちだと思うので、ブランチを確認する方法を記載します。
ターミナル上で、

``` 
$ git branch
```
と入力すれば、作業ディレクトリのブランチの一覧が表示されます。（ABC順）

``` 
　aritcle
 *branch
  create_user
　develop
``` 

「*」マークがついているのが今いるブランチです。

###新しい順・古い順
ブランチは、新しい順・古い順に並べることもできます。

``` 
git branch --sort=authordate #古い順
git branch --sort=-authordate #新しい順
``` 
新しい・古い順は個人的に便利だと思うので参考にしてみてください。
初期化パラメーターmax_idle_blocker_timeを試す（Oracle Database 19c）

# max_idle_blocker_timeとは
　初期化パラメーターmax_idle_blocker_timeは、Oracle Database 19c以降で使用できる初期化パラメーターです。特定のSQL文をブロックしているセッションが、指定された分数アイドル状態になるとセッションを切断します。

## 設定
　初期化パラメーターmax_idle_blocker_timeにはアイドル時間を分単位で指定します。デフォルト値は0で無効になっています。この初期化パラメーターはインスタンス単位で指定できますが、セッション単位では指定できません。当初は [マニュアル](https://docs.oracle.com/cd/F19136_01/refrn/index.html)には記載されていませんでしたが、その後掲載されるようになりました。下記の例では、1分が指定されています。

```
SQL> ALTER SYSTEM SET max_idle_blocker_time = 1;

System altered.
```

## 動作

「セッション#1」がDELETE文を実行します。max_idle_blocker_timeには1分が指定されているものとします。

```
SQL> SET AUTOCOMMIT OFF
SQL> DELETE FROM data1 WHERE c1=100;

3 rows deleted.
```

「セッション#2」はSELECT FOR UPDATE文を実行して、「セッション#1」が実行したDELETE文の対象レコードが確定するまで待機します。

```
SQL> SELECT * FROM data1 WHERE c1=100 FOR UPDATE;
```

１分が経過すると、「セッション#1」は強制的に切断され、「セッション#2」はレコードが返ります。下記の例は「セッション#1」でSELECT文を実行していますが、既に切断されているためエラー「ORA-03135: connection lost contact」が発生している様子です。

```
SQL> SELECT * FROM DUAL;
SELECT * FROM DUAL
            *
ERROR at line 1:
ORA-03135: connection lost contact
Process ID: 26893
Session ID: 281 Serial number: 50063
```

# 制約と注意点
　アイドル状態になるとセッションを切る機能には初期化パラメーターmax_idle_timeもあります。こちらはブロックしている／していないにかかわらず、一定時間アイドル状態になるとセッションを切断します。max_idle_blocker_timeは、ブロックしているセッションが切断されることが異なります。
　マニュアルには「Therefore, in order for MAX_IDLE_BLOCKING_TIME to be effective, its limit must be less than the MAX_IDLE_TIME limit.」と記載されており、max_idle_blocker_time < max_idle_time とする必要があります。しかし、システム的な制限はかけられていないため、max_idle_blocker_timeの方が大きい値に設定できます。この場合は、先にmax_idle_timeが動作します。

```
SQL> ALTER SYSTEM SET max_idle_time = 3;

System altered.

SQL> ALTER SYSTEM SET max_idle_blocker_time = 5;

System altered.
```

Resource Managerには古いバージョンから既に同じ名前のディレクティブが存在します。こちらは秒数で指定します。
【Folio LSP】チュートリアル①ワークスペースを作ってVMを立ち上げる

この記事では、Library Service PlatformのOpen Sourceプロジェクトである、Folioのチュートリアルを解説します。

〇これをやると、ブラウザからローカルに立てたFolioの画面を立ち上げることができます。
〇自己責任で導入してね！
〇時間は目安だよ！
〇動作確認環境：Win10 64bit/Vagrant 2.2.9/Virtual Box 6.1.6

##1. 準備[10分くらい]
参考URL: https://dev.folio.org/tutorials/folio-vm/overview/

上記を参照の上、以下を準備します。

- Vagrant – 最新版 (https://www.vagrantup.com/ からダウンロード可能)
- VirtualBox – Vagrantにあうバージョン。 
- curl – curlコマンドを利用します。Postmanでも代替可能かもしれません。

[補足]

-  Vagrantってなんですか？ [Wikipedia](https://ja.wikipedia.org/wiki/Vagrant_(%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2))
-  VirtualBoxってなんですか？[Wikipedia](https://ja.wikipedia.org/wiki/VirtualBox)

※VirtualBoxという仮想マシンをVagrantを使って環境構築をしていくイメージ。
※[VagrantCloud](https://app.vagrantup.com/)からBoxをおとしてくることができます。この記事では、https://app.vagrantup.com/folio/boxes/snapshot-core を導入します。

-  curlってなんですか？http://e-words.jp/w/CURL.html


##2. Workspaceを作る[15分くらい]

参考URL：https://dev.folio.org/tutorials/folio-vm/01-create-workspace/

1. ディレクトリ「vm-snapshot-core」を作成する。`mkdir vm-snapshot-core && cd vm-snapshot-core`
2. Vagrantを初期化する。`vagrant init --minimal folio/snapshot-core`
※--minimalを指定すると、コメントなどを除いて最低限のVagrantfile（設定ファイル）が作成される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342082/de8caacc-4c16-32dd-d365-52a5f76d5535.png)

3. VirtualBoxを立ち上げる `vagrant up`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342082/922a0aab-e745-df02-aa6c-ac716be85e70.png)
4. ブラウザを立ち上げて、http://localhost:3000/settings/about を開く。
5. ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342082/e6bbf8e5-b064-6282-2684-a0b1272ca831.png)

5. ユーザ：diku_admin　パスワード：adminを入力する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342082/85fcc04b-fd8c-4cc9-c663-a80b52af4a15.png)


##3.接続してみる
1. `vagrant ssh` ※Vagrantの初期PWはvagrant
2. ログファイルを確認する `tail /var/log/folio/okapi/okapi.log`
3. `exit`で抜ける

##4.ストップとスタート
1. `vagrant halt`でストップ
2. `vagrant up`でスタート

##5.アップデート
Folio VMは毎日リビルドされていますが、もし今更新したい！となったら、
`vagrant box destroy`で古いマシーンを消して、`vagrant box update`で更新してください。

##困ったとき
- Virtual Boxを再起動してみる
- Virtual Boxの設定（CPU割り当て等）を見直してみる
- vm-snapshot-core配下のファイルとVirtualBoxを削除して、最初からやり直す


##変更履歴
2020年6月30日　新規作成
2020年7月5日　 動作確認環境と必要時間を追記
2020年7月5日　 「困ったとき」を追記
【メモ】RealsenseD435iをROS-melodicで使う

#環境
- Ubuntu 18.04
- ROS Melodic
- RealSense D435i

# RealSense SDKのインストール
1. サーバの公開鍵を登録

```
$ sudo apt-key adv --keyserver keys.gnupg.net --recv-key F6E65AC044F831AC80A06380C8B3A55A6F3EFCDE || sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-key F6E65AC044F831AC80A06380C8B3A55A6F3EFCDE 
```
2.リポジトリにIntelサーバを追加

```
$ sudo add-apt-repository "deb http://realsense-hw-public.s3.amazonaws.com/Debian/apt-repo bionic main" -u
```

3.リポジトリのリストと使えるパッケージのリフレッシュ

```
$ sudo apt update
```

4.ライブラリのインストール

```
$ sudo apt install librealsense2-dkms
$ sudo apt install librealsense2-utils
```
5.開発用の追加パッケージインストール

```
$  sudo apt install librealsense2-dev
$ sudo apt install librealsense2-dbg
```

6.動作確認
RealSenseをUSBに指した状態で、以下を実行

```
$ realsense-viewer
```

カメラ映像が取得できればOK

# パッケージのアップグレード

```
$ apt list --apgradable
```
でアップグレード可能なパッケージが取得できるが、今回は先程インストールしたパッケージのみをアップグレード（すべてやると動かなくなることがある）

```
$ sudo apt update
$ sudo apt --only-upgrade install librealsense2-utils librealsense2-dkms librealsense2-dev librealsense2-dbg 
```

# ROSラッパーのインストール
[公式Github](https://github.com/intel-ros/realsense/releases)からsource code(~.tar.gz)をダウンロード

```
cd ~/(DOWNLOADED_DIR)
$ tar xvzf (FILE_NAME).tar.gz
```

```
$ mkdir -p ~/ws/src; cd ~/ws/src
$ catkin init
```
__realsense-rosパッケージの中から、realsense2_cameraのみを~/ws/srcに移動__

```
$ mv realsense2_camera ~/ws/src/
```
その後、

```
$ cd ~/ws/src
$ catkin_make install
```
setup.bashを通すか、bashrcに追加

```
$ source ~/ws/devel/setup.bash
or
$ echo "source ~/ws/devel/setup.bash" >> ~/.bashrc
$ source ~/.bashrc
```

これで、

```
$ rospack find realsense2_camera
```
が通り、

```
$ roslaunch realsense2_camera rs_camera.launch
```
が通ればOK
ファイルサーバにアクセス中のユーザを確認する

# はじめに
ファイルサーバを運用していて、ファイルサーバ上にあるファイルやフォルダを削除したいが、誰かが開いているから削除できねーよとなってしまったときの対処方法を備忘でまとめました。

# 環境
- Windows Server 2012

# 操作
1. 画面左下のWindowsアイコンを右クリックして、コンピューターの管理を選択する。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21433/bd08009e-bcae-4ed6-6ee6-12103c00109c.png)
2. 「共有フォルダー ＞ 開いているファイル」を選択し、対象のファイルを右クリックして「開いているファイルを閉じる」を選択する
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21433/bed80d85-5ade-683b-cba1-80d8bf9578db.png)

# 結果
消せた！
ホントに繋いでいる人は、接続が切れちゃいますが、まぁ、それは繋ぎ直してもらいましょう。
【Blender】Blenderでメッシュから服をつくるにあたり、画像で備忘録【メモ】

## Blenderでメッシュ一種類だと、ショルダーのボーンについていかないときがある

下図の場合、T字ポーズだと違和感がないが、
再度VRMに変換した際に、シャツの肩部分がそのままなので
聖闘士星矢状態になる。
<img width="342" alt="スクリーンショット 2020-06-30 13.36.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/d06384db-b709-baad-7ccb-818009da4212.png">

まさに聖闘士星矢。
![da-vinci0.1トリミング.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/9493873f-a986-8c4c-faac-aefb3fe77a01.png)

---

## unityでのボーン

そのため、Blenderでメッシュで服を作る際、
レイヤードシャツを作るイメージで、
またはガンプラを作るイメージで、
下図のボーンにあった服を別個に作る必要がある。

下図の場合、

- ショルダー(L)
- ショルダー(R)
- アッパーチェスト
- チェスト
 
などが該当する。
<img width="249" alt="スクリーンショット 2020-06-30 14.15.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/a9d49196-b825-6254-5928-b74f3d61c7c5.png">
基幹系をAgile開発で実施した時の肝１（実践からの気づき）

## ユーザーやステークホルダーの評価
スプリント中の成果をユーザーやステークホルダーへデモンストレーションを行い、評価してもらう場としてのイベントがスプリントレビューです。
このミーティングでは、開発チームがコミットしたプロダクトバックログ（スプリントバックログ）をITサービス（ソフトウェア）として実現したものを、操作しながら感想、変更、完了等の評価をユーザーやステークホルダーと共に行います。また、開発チームがコミットしたにも関わらず、実現できなかったものを精査し、対策評価もこの場で行います。ある意味で、従来のユーザー承認・評価に似ていますが、ドキュメントではなく、実際に動作するITサービス（ソフトウェア）で行います。
開発チームとユーザー側が対等の立場で、お互いに良い製品（ITサービス、ソフトウェア）を作り上げるという意志でこのイベントに望むことが重要です。様々なアジャイル開発現場の支援をしていますが、このスプリントレビューでのユーザーやステークホルダーの参画の姿勢によってプロジェクトの『成功の可否が決まる』と言っても過言では無いと感じています。

**基幹系刷新プロジェクトを実施した時の気づき**
ある、成功した基幹系の刷新プロジェクトでは、プロダクトバックログと併用して仕様変更確認リストというものを使用して、開発チームとユーザー、ステークホルダーとの間で、**常に変化する仕様を、夫々の立場で優先度、難易度、関連度といった評価**を見える化して、このミーティングの中で相互の摺合せを行っていました。この行為はプロダクトオーナーがバックログについて協議し改定するという行為と同じです。

基幹系システムなどの規模が大きいシステムでは、ある仕様変更が他の仕様へ波及する事象が発生します。本来なら、プロダクトバックログの一つ一つのユーザーストーリーの相互依存性が無くすことが、事業価値による並び替えを容易くするのですが、粒度によっては、時間的系列で異なった機能として実装を余儀なくせざる負えないケースがあります。ユーザー側がシステム的に波及する指摘か否かを、その場で考慮するのは難しいのです。

この見える化は、ユーザーには小さく見える変更でも、システム的には波及する問題を炙り出すことに有効に働き、過剰な変更、追加を抑制する効果がありました。
このプロジェクトのスプリントレビューに参加した時に、ユーザー側の仕様変更相談に開発チームが『この変更を受け入れると、今のシステムの各機能が伝染病にかかってしまいます。他の方法、対策を考えた方が良いと判断します。』と答えていたのが印象的でした。

このミーティングを滞りなく出来るか否かで、ユーザー、ステークホルダーからの**開発チームへの信頼度が全く違ってきます。**

ユーザー、ステークホルダーから信頼を得ることで開発チームのモチベーションが上がり、結果的に品質、作業効率が上がってきます。

**とても単純な表現ですが、ユーザー、ステークホルダーから『ありがとう。』、『よく作っていただきましたね。』、『とても判りやすいです。』といった開発チームの行動を褒める言葉を引き出せたら、まず成功するための定石の一つは確保できたと判断して良いです。**

他の支援したアジャイル開発プロジェクトでは、そのプロジェクト期間の中盤で開発チームの覇気が低下する現象が起きました、このプロジェクトの様々な状況を表すボード（一般的には情報ラジエターと呼んでいる）には注意、問題を示す事象は現れていませんでした、そこで、スクラムマスターが、このミーティングの前にユーザーへ訪問して、今日のスプリントレビューの最後に開発チームを何でも良いので褒めて欲しいとお願いし、ユーザーはその通りに、このスプリントレビューの内容に関連して、開発チームを褒めたそうです。

その後の開発チームの覇気は今まで以上に高くなり、プロジェクト成功へ導きました。
この事は、このプロジェクトに限ったものではなく、皆さんの現場、プロジェクトにも当てはまる事です。**現場の方々のモチベーションは、スキルや個性と同等、もしくはそれ以上に重要なファクターです。**信頼を得るには、**ITサービス（ソフトウェア）にバグが存在していては、信頼を築けないのは言うまでもありません。**

このミーティングで完了という評価を得たものがリリースの対象候補となります。
[JavaScript]タイマー機能つけたくない？

# タイマー機能で使うメソッド
主に、setInterval()メソッドと、setTimeout()メソッドがあります。
似てますが、少し違うメソッドなので使い分けていけましょう！

##setInterval()メソッド
setIntervalは第一引数に与えられた関数を、第二引数に与えられた間隔で実行します。指定した時間ごとに何度も動作させたい時に使います。

```javascript

// iが２を超えるまでshowTimeメソッドを1秒ごとに繰り返す。
{
  let i = 0;

  function showTime() {
    console.log(new Date());
    i++;
    if (i > 2) {
    //clearIntervalで指定することで、setIntervalの処理を好きなタイミングでストップ出来る
      clearInterval(intervalId);
    }
  }

  const intervalId = setInterval(showTime, 1000);
}
```

## setTimeout()メソッド
setTimeout()メソッドは、関数が実行されてから関数内で指定した時間の分だけ時間が経過した後に、特定の動作をさせたいという場合に使うことができるメソッドです。

```javascript

// iが２を超えるまでshowTimeメソッドを1秒ごとに繰り返す。
  let i = 0;

  function showTime() {
    console.log(new Date());
    const timeoutId = setTimeout(showTime, 1000);
    i++;
    if (i > 2) {
      clearTimeout(timeoutId);
    }
  }

  showTime();
```

##違いは？？
指定した時間ごとに繰り返したいとき→setInterval()メソッド
関数が終わってから指定した時間経過後に関数を繰り返す→setTimeout()メソッド

#まとめ
たとえば、WEBページが画面上に表示されてからすぐではないタイミングでアラートを表示させたいというときに、出したいタイミングのミリ秒を2つめの引数に設定するときです。
または、サーバーなどに登録されているステータスが更新されるのを待っているというときにも使えます。数秒後にリロードさせるために、setTimeoutを使って再読み込みし、サーバー側の最新の状態を確認することができるようになります。
さらに、ある一定の時間経過したらログアウトさせたいというときにも、この関数を使うとよいでしょう。途中で、画面の操作が入力されたらタイマーをキャンセルして、もう一度最初からタイマーをカウントさせるということもできます。
setIntervalを使うタイミングは、スライドショーなど、画面上に表示させてあるものを変更したり動かしたりするときによく使われます。clearIntervalで停止させない限りずっと同じ間隔で画像の変更というプログラムを実行しているので、スライドショーのように動いてくれるのです。

使いどころはたくさんあるので使ってみましょう！！！
aタグでもdisabled属性を扱えるように見せかける

## 前提
disabled属性とは要素の操作・入力を無効化するために設定する要素ですが、この要素を適用することができるのはformに関連付けられた要素のみです。
参考: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#enabling-and-disabling-form-controls:-the-disabled-attribute

しかし、しばしば本来disabled属性が使用できないaタグやその他のタグでも操作の無効化の意味合いとしてdisabled属性を使いたくなることがあります。ありません？僕はあるんです、結構頻繁に。

そんなときにちょっと使えそうなTIPSを書いておきます。

## 属性セレクタを使用してdisabledっぽくする
css3には[属性セレクタ](https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors)というものがあります。これは指定した属性の存在もしくはその値によって要素を選択できるセレクタです。

これを用いて、disabled属性を持つaタグ要素を選択し、`pointer-events`を用いてマウスイベントを無効化してやることで擬似的なdisabledっぽい動きを実現することができます。

[動作サンプル（codepen）](https://codepen.io/ampersand_xyz-the-flexboxer/pen/qBbPvvN)

```html
  <a disabled href="https://google.com">
    このリンクはクリックできないよ
  </a>
```

```css
  a[disabled] {
    pointer-events: none; /* マウスイベントの無効化 */
    opacity: 0.5; /* 操作できない感のあるスタイル付け */
  }
```

操作できない感のあるスタイル付けとして`cursor:not-allowed`とかを使うと更にそれっぽい感じになるのですが、`pointer-events: none; `と食い合ってしまうので、cursorを指定したい場合は別のアプローチが必要になりそうです。

### 補足
単にaタグの操作を出来なくしているだけなので、disabled要素を外すなりリンク先を直接リクエストすることで遷移先を参照することはもちろん可能です。意図しない遷移・リクエストが行われた際の対策実装は別途適宜行ってください。
おじさんの業務を自動化する①

# はじめての業務自動化

いままではJobAutoの使い方を覚えるために、いろいろロボットを作っていました。で上司からそろそろいいだろ？ということで、本気のロボットを作って業務の効率化をスタートすることに。
上司はわたしがJobAutoの使い方を覚えてきたら、あるおじさんが毎日やっている「添付ファイルを保存する作業」を自動化することを考えていたそうです。

## 自動化する前の業務手順
以下の業務手順を自動化します。

- お客さんから送られてきたメールを開く
- 添付ファイルを共有フォルダへ保存する

## JobAutoでやりたいこと
JobAutoでやりたいことは以下の３つ

### お客さんから送られてきたメールを探す
メールを探すといっても、どのお客さんからのメールなの？ということで、送信元のメールアドレスをもらいました。

### お客さんから送られてきたメールを開く
メールを開きます。

### 添付ファイルを共有フォルダへ保存する
複数ファイル添付されていることはあるのか確認しましたが、ない、とのことでした。添付ファイルは常に1つしかない、という前提でロボットを作成します。

## いざ作成

### ブラウザかアプリか
ロボットがメールを開くときにブラウザ（Chrome）で開くかOutLookで開くか迷いましたが、OutLookでやることにしました。

というのもお客さんから送られてきたメールを探す作業をロボットでやろうとすると、送信元のメールアドレスであるかどうかを受信トレイのメールを1つ1つ全部チェックしないといけません。全部チェックすることを避けるため、OutLookの振り分け機能で条件設定したメールアドレスに一致するメールを特定のフォルダに振り分けることにしました。

### 処理が終わったメールは別フォルダへ移動
作業が終わったメールがフォルダに残り続けると保存したファイルが添付されているメールが作業の対象となってしまい、ロボットの作業が非効率になります。そこで作業が終わったメールはほかのフォルダへ移動するようにしました

## 出来上がったもの
出来上がったものが以下。

- 対象のメールが振り分けられたフォルダの一番上のメールを処理する
- 処理が終わったメールを別フォルダに移動する
- ふたたびフォルダの一番上のメールを処理する

という処理をどのアクションを使って行えばいいかわかるのに時間がかかりました。要素のループとからエクセル行のループとかループを行うアクションはあるのだけど、決まった手順を繰り返し行うというのをどのようにしていいか最初はわからなかったです。

![mailtemp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/660351/78a15194-f364-7f3d-3fa2-2b4f03b3f37e.png)

## 作成後の感想
作成したロボットをさっそくスケジュールへ設定して運用してみましたが、2日目にロボットの処理が失敗しました。
共有フォルダに同じ名前のファイルがあったので、上書きしますか、というメッセージが出てロボットが止まっていました。
うーん、運用するとロボットを作成するときに気づかなかったことが出てきますね。
共有フォルダに同じ名前のファイルがあった場合に上書きしていいのか、上司に確認してきます...。
Seleniumでページ内のiframeを操作できない

## 問題
Selenium/BeautifulSoupを使ってページ内のiframeの内容を取得しようとしたが、できない。

BeautifulSoupでHTMLを全取得すると以下のような結果になる。

```python:HTMLを取得するコード
BeautifulSoup(driver.page_source, 'html.parser')
```

```HTML:取得結果
<html>
    <head>
        <!-- head -->
    </head>
    <body>
        <!-- body -->
        <iframe id="iframe" 
                scrolling="yes"
                src="https://example.com/iframe"
                src_data="https://example.com/iframe">
        </iframe>
    </body>
</html>
```

## やりたいこと
iframeのなかを見たい、操作したい。

## 解決方法
以下のコードで、driverがiframeにフォーカスする。

```python
iframe = driver.find_element_by_id('#iframe')
driver.switch_to.frame(iframe)
```

```python:HTMLを取得するコード
BeautifulSoup(driver.page_source, 'html.parser')
```
でHTMLがiframeになっていることを確認してください。

## 参考
https://www.selenium.dev/documentation/ja/webdriver/browser_manipulation/#webelementを使う

## 追記
元のウィンドウに戻る際は以下のコードで戻ります。

```python
driver.switch_to.default_content()
```
rubyistがpycallでpython::Dictデータで苦労した話

rubyistがpycallでpython::Dictデータで苦労した話

[PyCall Ruby版
Tips](https://qiita.com/stat/items/a383451e7f824e4c9627)にほぼ完璧な対応報告がある．
さらに，numpy特有の記法

``` {.example}
# 最後の行へのアクセス pythonだと m[-1,:] と書くところ
```

などと，rubyistにわかりやるいnumpyの解説まで付いている．

という風に簡単にできそうに見える．．．

# 複雑なデータ構造だとお手上げ

ところが，複雑なpythonのデータ構造を扱う時には
非常に苦労する．原因はdictのkeyがよくわからないから．
単純な文字を取る時にはいいが，少し複雑な文字ではうまく取れないようだ．

以下の通りにしてpymatgenにあるVasprun::tdosあるいは
Vasprun::compolete\_dos などが取れる．

ところが，

p spd\_dos = dosrun.complete\_dos.get\_spd\_dos() とすると，

> {&lt;OrbitalType.s: 0&gt;: &lt;pymatgen.electronic\_structure.dos.Dos
> object at 0x102dd4710&gt;, &lt;OrbitalType.p: 1&gt;:
> &lt;pymatgen.electronic\_structure.dos.Dos object at 0x102dc2dd8&gt;,
> &lt;OrbitalType.d: 2&gt;: &lt;pymatgen.electronic\_structure.dos.Dos
> object at 0x102d962b0&gt;}

と出力される．これはspd\_dos('OrbitalType.s')で取れそうに思うが
だめ．そこで，

    p s_d = spd_dos.to_a[0][1].densities

として

``` {.example}
array([  0.00000000e+00,   0.00000000e+00,   0.00000000e+00,
         0.00000000e+00,   0.00000000e+00,   0.00000000e+00,
...
      ])
```

python::arrayにして，さらに

    s_list = PyCall::List.(s_d.to_a[0][1]).to_a

としてhashをarrayにしてvalsを取り出し，さらにそれをto\_aでrubyが解釈できるdata構造に変換している．

慣れると同じcodeの繰り返しなんでそれほど苦労しなくなるが，
多分時間が経てば忘れるね．
そこをlibに組み込んで欲しいが，dictを直接読むのは文字だけのよう．．．
code書いて，pull reqかけてみるか．

densitiesやenergyはnameがわからないとどうしようもなくて，
これは，pymatgenのsource codeを読んで見つける．
どうもpycallを使うには，こういうのを繰り返す必要がありそうだ．

``` {.ruby}
require 'pycall/import'
include PyCall::Import

pyimport :sys
pyimport 'numpy', as: :np
pyfrom 'pymatgen.io.vasp.outputs', import: :Vasprun

# dos
dosrun = Vasprun.("../dos_calc_fine/vasprun.xml")
e_object = (dosrun.tdos.energies - dosrun.efermi)
energy = PyCall::List.(e_object).to_a
spd_dos = dosrun.complete_dos.get_spd_dos()
spd = PyCall::Dict.(spd_dos)
s_d = spd.to_a[0][1].densities
s_list = PyCall::List.(s_d.to_a[0][1]).to_a
p_d = spd.to_a[1][1].densities
p_list = PyCall::List.(p_d.to_a[0][1]).to_a
d_d = spd.to_a[2][1].densities
d_list = PyCall::List.(d_d.to_a[0][1]).to_a
tdos = dosrun.tdos.densities
t_list = PyCall::List.(tdos.to_a[0][1]).to_a

require 'numo/gnuplot'
Numo.gnuplot do
  set yrange: '[-10:10]'
  plot [s_list, energy, w: :l, title: 's'],
  [p_list, energy, w: :l, title: 'p'],
  [d_list, energy, w: :l, title: 'd'],
  [t_list, energy, w: :l, title: 'total']
end
```
"<Template>"にID""を持つアプリケーションは使用できません。

#はじめに
ZABBIX のテンプレートインポート時に、タイトルのようなエラーメッセージで失敗したことはありませんか？
ちなみに英語ですと "Application with ID "" is not available on &lt;Template&gt;" と表示されます。

#解決例
ZABBIX のテンプレート（[公式ページ](https://www.zabbix.com/documentation/current/manual/xml_export_import/templates)） は xml 形式になっていますが、item や discovery_rule &gt; item_prototypes &gt; item_prototype 要素内の application 指定が zabbix_export &gt; templates &gt; template &gt; applications 要素の中に定義されていない場合に発生しました。

```xml:wrong-tmpl.xml
<?xml version="1.0" encoding="UTF-8"?>
<zabbix_export>
    <version>3.2</version>
    <date>2015-12-10T03:00:00Z</date>
    <groups>
        <group>
            <name>Templates</name>
        </group>
    </groups>
    <templates>
        <template>
            (略)
            <applications>
                <application>
                    <name>General</name>
                </application>
                <application>
                    <name>Train simulator game</name>
                </application>
                <application>
                    <name>Automobile simulator game</name>
                </application>
                <application>
                    <name>Vessel simulator game</name>
                </application>
            </applications>
            <items>
                <item>
                    <name>The name of a monitored item</name>
            (略)
                    <applications>
                        <application>
                            <name>Flight simulator game</name> <!-- 上の applications の定義にない！ -->
                        </application>
                    </applications>
                    <valuemap/>
                    <logtimefmt/>
                </item>
            (略)
        </template>
    </templates>
</zabbix_export>
```

#余談
メッセージ中 ID "" の二重引用符のなかに定義を忘れた item 側指定の application の中身を表示してもらえると、悩まずにすぐ理解できたのですがね...
Comets でニコニコ動画風プレゼンの設定

# Comets でニコニコ動画風プレゼンの設定
 今回はプレゼン資料上でリアルタイムにコメントを流して、ニコニコ動画風にプレゼンできるCometsの設定 についてご紹介していきます。
 AWSの記事を書いていたやつが急にどうした!?と思われるかもしれませんが、私自身よくプレゼン＆ウェビナー講師を担当するので息抜きも兼ねて書いておりますd(`・ω・’)

## Cometsとは
  [comets](https://comets.nabettu.com/)<br>

<img width="263" alt="comets ロゴ.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655033/ed55397f-c087-0854-84f5-8f0e0d94df0b.png">

  Google スライド上のプレゼン資料にコメントを流せるサービスです。
  無料で利用でき、設定も簡単なので、発表／プレゼンが多い方は重宝すると思います。
  ただカジュアルな発表向けなので、TPOは考慮しましょう(笑)


## 前提条件
・ブラウザーはGoogle chromを利用する
・プレゼン資料はGoogle スライド(https://www.google.com/intl/ja_jp/slides/about/) にUpする
・ブラウザーでJavaScriptが実行できる

## 設定の流れ
1. Google スライドに資料をアップロードする
2. アップロードしたページをブックマークに登録する
3. google スライドのブックマークの編集でURLの部分をcomets 指定のスクリプトに書き換える
4. comets の合言葉を設定し、QRコードなどで設定したページを参加者に配布する

## 実際の設定

まずはGoogle スライド(https://www.google.com/intl/ja_jp/slides/about/) にアクセスして資料をアップロードします。
![スライド2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655033/3ba0ad50-27f6-1d83-031d-b619a993c641.png)

今回はローカルにいるパワーポイントをインポートしました。

![スライド1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655033/18428d88-6204-4d6c-a5c2-224e4471f301.png)

アップロードして、そのページをブックマーク登録します。
![スライド3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655033/429da4a2-0d28-692d-f41e-2c3f2fa13868.png)

ブックマークをブックマークマネージャで編集します。
![スライド4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655033/16451c6c-888d-f2db-9487-4637d92df893.png)
今はこんな感じでURLが登録されております。
![スライド5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655033/d1b23a8e-4ec7-6de6-933d-b6b02ed85a89.png)

URLの部分をcomets指定のスクリプトへ変更します。
cometsにアクセスして「発表で使いたい方はこちらを御覧ください」をクリック
![11111.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655033/02d4d51f-d219-e1d4-4ad6-f6fcb92c511d.png)


「javascript;void% ~」の部分がスクリプトなので、これをコピーします。
![3333.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655033/d0e3830f-692a-32ed-dc0c-99528c2fe5c8.png)

ついでに「合言葉」も設定しておきましょう。

ブックマークはこんな感じで編集してください。
上の画像が変更前で、下が変更後です。
![スライド8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655033/938535cf-649c-aad7-363f-3a4db8d873eb.png)

変更したらブラウザーでブックマークしたページをクリックして、「合言葉」の入力も求められるので入力します。
![スライド9.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655033/085b65f5-d0d0-ceb5-131f-d1aab8fb2daf.png)

![スライド10.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655033/4a95ca3a-df91-ae13-aae8-6c6f6321a275.png)

QRコードを読み取ると、コメントできるページにアクセスできるようになります。
![3333.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655033/d0e3830f-692a-32ed-dc0c-99528c2fe5c8.png)
こんな感じでプレゼン資料にコメントや特定のアイコンを表示（流れるように）することができます。
![スライド11.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655033/d0e31fe4-fcdb-a389-9cc7-a35824b4045d.png)
[JavaScript]数値の操作まとめ！

# Mathオブジェクトを使いこなそう！！
数学的な定数と関数を提供するプロパティとメソッドを持つ、組み込みのオブジェクトです。関数オブジェクトではありません。
※Math は Number 型で動作します。 BigInt 型では動作しません。

##Math.floor() メソッド
Math.floor() メソッドは、引数として与えた数以下の最大の整数を返します。

```javascript

Math.floor( 45.95); //  45
Math.floor( 45.05); //  45
Math.floor(  4   ); //   4
Math.floor(-45.05); // -46 
Math.floor(-45.95); // -46
```

####Math.ceil()メソッド
Math.ceil(メソッドは、引数として与えた数以上の最小の整数を返します。

```javascript

Math.ceil(.95);    // 1
Math.ceil(4);      // 4
Math.ceil(7.004);  // 8
Math.ceil(-0.95);  // -0
Math.ceil(-4);     // -4
Math.ceil(-7.004); // -7
```

##Math.round()メソッド
Math.round()メソッドは、引数として与えた数を四捨五入して、もっとも近似の整数を返します。

```javascript

Math.round( 20.49); //  20
Math.round( 20.5);  //  21
Math.round( 42  );  //  42
Math.round(-20.5);  // -20
Math.round(-20.51); // -21
```

##toFixed()
toFixed() メソッドは、数を固定小数点表記を用いてフォーマットします。

```javascript

var numObj = 12345.6789;

numObj.toFixed();       // '12346'
numObj.toFixed(1);      // '12345.7'
numObj.toFixed(6);      // '12345.678900'
```

##Math.random()メソッド
Math.random()メソッドは、0–1（0以上、1未満）の範囲で浮動小数点の擬似乱数を返します。その範囲ではほぼ均一な分布で、ユーザーは範囲の拡大をすることができます。実装側で乱数生成アルゴリズムの初期シードを選択し、ユーザーが初期シードを選択、またはリセットすることは出来ません。

```javascript

// 0~1内でランダムな数を作成
var random = Math.random();
 
console.log( random );
// =>0.28230041446763

// 5~10内でランダムな数を作成
var min = 5 ;
var max = 10 ;

var a = Math.floor( Math.random() * (max + 1 - min) ) + min ;
// =>7.608635983586865
```
HTML  th要素とthead要素 の違い

#プログラミング学習　１週間目
2020/6/25~6/29

##補足
テーブルのth要素とthead要素が似たようで少し違っていたので共有。

###theadは表の行（水平方向）をグルーピング化するための要素
table要素の子要素です。

###thは表の見出しとなるヘッダーセルを作る要素
thはthead要素の子要素です。


**theadはヘッダー行を定義、**
**thはヘッダー行の中の一つのセルを定義するために使う。**

参考サイト
[theadについて](http://www.htmq.com/html5/thead.shtml)
[thについて](http://www.htmq.com/html/th.shtml)

こういった少しでも疑問に持った内容については、ここに共有していきたい。

フォームのバリデーションについてももっと深掘りしたかったが、時間的にここまで。
[Processing×Java]   開発環境の構築

この記事はプログラムの構造をProcessingを通じて理解していくための記事です。
今回は開発環境の構築について書いていきます。

![スクリーンショット 2020-06-30 16.25.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654004/f59b5ffe-0834-93f9-2b83-597e30b258b1.png)

目次
0.IDE(統合開発環境)の構築
1.Javaとは何か
2.他のエディターを使いたい場合



#0.IDE(統合開発環境)の構築

#####1.Processingの公式サイトにアクセス
[公式サイト](https://processing.org/)
![スクリーンショット 2020-06-30 10.36.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654004/595a7574-f45a-0353-b834-13244d9e322e.png)
#####2.自分のパソコンに合わせてダウンロードボタンをおす
![スクリーンショット 2020-06-30 10.36.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654004/cbd29292-de2d-5a1b-b410-4cd628f31cdf.png)
#####3.ダウンロードしたらzipファイルを開く
#####4.プログラムの実行
エディターの左上の再生ボタンを押す
 or 
command + R (commandを押しながらRキーを押す)
#####※言語を日本語に設定したい場合

1.メニューバーの[Processing]を押す
2.[環境設定]を押す
3.[言語]を日本語に変更する
4.日本語でコメントを書くために[エディタとコンソールのフォント]を**Menlo**に変更する
5.Processingの再起動
![スクリーンショット 2020-06-30 10.44.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654004/171fcd13-9e1f-bedb-dae4-0a7dcb4e1548.png)

※IDE = Integrated Development Environment


#1.Javaとは何か
**オブジェクト志向**の代表的なプログラミング言語でハードウェアに依存しないことが特徴。
ProcessingにおけるJavaは、Javaを単純化し**グラフィック機能に特化した**言語と言える。

※ProcessingではPythonなどでの開発も可能。




#2.他のエディターを使いたい場合

###Atomを使う

参考記事リンク:
[AtomでProcessingを実行する](https://qiita.com/TomoyaK/items/d7d8c1ff31d01f35b29c)

###VSCodeを使う

参考記事リンク:
[ProcessingをVisual Studio Codeで動かしたい](https://qiita.com/jacynthe/items/d31eaa77496295c10556)




#最後に

読んでいただきありがとうございました。
より良い記事にしていきたいので
　◯こうした方がわかりやすい
　◯ここがわかりにくい
　◯ここが間違っている
　◯ここをもっと説明して欲しい
などの御意見、御指摘のほどよろしくお願い致します。
サーバの時間を日本の時間に設定する方法


# サーバの時間が世界の標準時間だった、ときのこと
何も設定していなければこうなるはず、だけど日本人で東京在住なので東京時間がいい。

```bash
$ date
Fri Jun 12 04:32:25 UTC 2020
```


# CentOS7の場合
- 環境 : CentOS Linux release 7.8.2003 (Core)

```bash
# localtimeはUTCにリンクされている
$ ls -la /etc/localtime
lrwxrwxrwx. 1 root root 25 Feb 29 12:11 /etc/localtime -> ../usr/share/zoneinfo/UTC

# ちょっと日本を探してみたら「Asia」「Japan」があった
$ ls -la /usr/share/zoneinfo/ | grep -e Asia -e Japan
drwxr-xr-x.  2 root root   4096 Feb 29 12:06 Asia
-rw-r--r--.  2 root root    292 Sep 26  2019 Japan

# `Asia/Tokyo`が`Japan`にリンクされているわけではないらしい
$ ls -la /usr/share/zoneinfo/Asia/ | grep Tokyo
-rw-r--r--.  2 root root  292 Sep 26  2019 Tokyo
```

## 今だけ日本の時間にする方法
参考 : [【Linux】タイムゾーン(Timezone)の変更 - Qiita](https://qiita.com/azusanakano/items/b39bd22504313884a7c3)

```bash
# Tokyoにシンボリックリンクを上書きではる
$ ln -sf /usr/share/zoneinfo/Asia/Tokyo /etc/localtime
$  ls -la /etc/localtime
lrwxrwxrwx. 1 root root 30 Jun 15 10:45 /etc/localtime -> /usr/share/zoneinfo/Asia/Tokyo

$ date
Mon Jun 15 10:45:55 JST 2020
```

## ずっと日本の時間にする方法
参考 : [【 timedatectl 】コマンド――時刻を表示／設定する：Linux基本コマンドTips（312） - ＠IT](https://www.atmarkit.co.jp/ait/articles/1906/13/news007.html)

```bash
$ timedatectl
      Local time: Tue 2020-06-30 06:20:07 UTC
  Universal time: Tue 2020-06-30 06:20:07 UTC
        RTC time: Tue 2020-06-30 06:20:07
       Time zone: UTC (UTC, +0000)
...省略...

# 日本っぽいのを探すと「Asia/Tokyo」があった
$ timedatectl list-timezones | grep -i -e japan -e tokyo
Asia/Tokyo

# タイムゾーンを「Asia/Tokyo」に設定する
$ sudo timedatectl set-timezone Asia/Tokyo

$ timedatectl
      Local time: Tue 2020-06-30 15:21:18 JST
  Universal time: Tue 2020-06-30 06:21:18 UTC
        RTC time: Tue 2020-06-30 06:21:18
       Time zone: Asia/Tokyo (JST, +0900)
...省略...

$ date
Tue Jun 30 15:21:31 JST 2020
```
【GCP】Anthos、Kunbernetes、Dockerの内容をまとめた

#要望・課題
クラウドを利用したいが、コンテナを利用したい。　
コンテナに優位性のあるクラウドサービスが望ましい。　
他のクラウドサービスを利用しているが、GCPも使ってみたい

#Anthosとは

コンテナ化されたアプリケーションをクラウドとオンプレミスのどちらでも実行可能にするプラットフォーム
GCPとオンプレミス環境や他社クラウドの併用を容易にする

![Screenshot from 2020-06-30 14:54:12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556084/de84fe73-1e03-c894-0a0f-23138db4b377.png)
![Screenshot from 2020-06-30 14:55:58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556084/34706ef2-ee77-5400-11e2-83be64a076de.png)
![Screenshot from 2020-06-30 14:56:23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556084/543b1ccd-f44f-1141-8e57-38fbeec5f4f9.png)
#Kubernetesとは
コンテナオーケストレーションツールの一つ。
「コンテナオーケストレーション」は、情報システムの基盤技術として注目される「コンテナ」を管理する技術である。

コンテナオーケストレーションツールを利用することで、ユーザー企業は、コンテナをデプロイしたり、コンテナの稼働状況を監視したりする面倒な作業から解放され、アプリケーションの開発に専念できるようになる。

Kubernetes はオープンソースのオーケストレーション ソフトウェアで、コンテナーを実行する方法と場所を制御する API を提供します。Docker コンテナーとワークロードを実行することができ、複数のサーバー間にデプロイされている複数のコンテナーをスケーリングするよう移行するときなど、複雑な運用に対応することができます。

![Screenshot from 2020-06-30 15:10:28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556084/03905746-cd61-aa37-6aed-6b5574c06002.png)

#Docker
DockerはDocker社が開発している、コンテナ型の仮想環境を作成、配布、実行するためのプラットフォームです。

VirtualBoxなどの仮想マシンでは、ホストマシン上でハイパーバイザを利用しゲストOSを動かし、その上でミドルウェアなどを動かします。それに対し、コンテナはホストマシンのカーネルを利用し、プロセスやユーザなどを隔離することで、あたかも別のマシンが動いているかのように動かすことができます。そのため、軽量で高速に起動、停止などが可能です。

![Screenshot from 2020-06-30 15:15:14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556084/5e80d253-39f9-5c70-a3d2-04ea6e524716.png)
Dockerで作ったDjangoアプリケーションをHerokuにデプロイする

#はじめに
Container Registryを使ってHerokuにデプロイする記事が、Railsが多い一方でDjangoではそんなにヒットしなかったので、アウトプットがてら書いていきます。まだ勉強中の身なので、もし間違えていたら指摘お願いします。

#Heroku CLIをダウンロード
始めにこの[リンク](https://devcenter.heroku.com/articles/heroku-cli)からHeroku CLIをダウンロードします。僕はwindows 10を使っているので、64ビットインストーラを使ってダウンロードしました。
他のOSを使っている人でも、やり方は詳しく(英語で)書かれているので、その通りにダウンロードしてください。

#Heroku上でアプリを作成、アドオン等設定
Herokuにログインしてアプリを作成し、OverviewのところからHeroku PostgresをAdd-onsとして設定します。このとき、Hobby Devを選択することで無料で使えるっぽい。(ただし遅いとかなんとか…)
Herokuではvolumeが使えないため、データの永続化をするためにこのようにDBを利用しています。

#requirement.txtに追記

```text:requirement.txt
gunicorn
dj-database-url
whitenoise
django_heroku
```

#setting.pyに追記
以下のようにsetting.pyの下の方にstatic_rootとデータベースの設定を書いていきます。
STATIC_ROOTを設定することで本番環境でも静的ファイルを扱えるようになります。

```python:setting.py
import django_heroku

DEBUG = False
ALLOWED_HOSTS = ['自分のドメイン']

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware', #これの後ろにwhitenoiseを追記
    'whitenoise.middleware.WhiteNoiseMiddleware',
    (略)
]

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

import dj_database_url
DATABASES['default'] = dj_database_url.config(conn_max_age=600, ssl_require=True)

if not DEBUG:
    django_heroku.settings(locals())
```
[公式参考](https://devcenter.heroku.com/articles/heroku-postgresql#connecting-with-django)

#Procfileを用意
Dockerfileと同じディレクトリにProcfileという名前のファイルを準備し、以下のように記述します。

```:Procfile
web: gunicorn [プロジェクト名].wsgi
```

プロジェクト名はご自身のプロジェクト名に置き換えてください。

#Dockerfileに追記
以下のようにDockerfileの一番下に追記します。[参考](https://testdriven.io/blog/deploying-django-to-heroku-with-docker/)

```:Dockerfile
RUN python manage.py collectstatic --noinput
CMD gunicorn --bind 0.0.0.0:$PORT [プロジェクト名].wsgi
```

こちらも同様にプロジェクト名を置き換えてください。

#コマンドを実行
プロジェクトがあるディレクトリ上でコマンドを実行していきます。

```
$ heroku login
$ heroku container:login
$ heroku container:push web -a [アプリ名]
$ heroku container:release web -a [アプリ名]
$ heroku open -a [アプリ名]
```

No webprocess runningエラーが出たら以下のコマンドを実行しましょう。

```
$ heroku ps:scale web=1 -a [アプリ名]
```

[公式参考](https://devcenter.heroku.com/articles/container-registry-and-runtime)

#コンテナとHeroku Postgresを結び付ける

```
$ heroku addons:attach [postgresコンテナ名] -a [アプリ名]
```

postgresコンテナ名はHerokuのアプリ管理サイトのOverviewのInstalled add-onsから確認することができます。また、最初以外にもマイグレーションが失敗するときなどにこのコマンドを再度実行し、再び結び付け直すことで上手くいくようになることがあります。

# マイグレーションの実行
以下のコマンドでマイグレーションを実行します。

```
$ heroku run python manage.py migrate -a [アプリ名]
```

#メモ
以下のコマンドでどういう状況かチェックできる。

```
$ heroku run bash -a [アプリ名]
```

以下のコマンドでプロセスを確認したり、停止したりできる。

```
$ heroku ps -a [アプリ名] #プロセス確認
$ heroku ps:stop [プロセス名] -a [アプリ名] #プロセス停止
```

#おわりに
静的ファイルもなんとか扱えるようになりました！
ラジアンって何なの？　って話

　または、なでしこ３の楕円描画がようやく分かった話。
　あるいは、以前書いた[メダカbois](https://qiita.com/snowdrops89/items/f3969d043a0e8d6c5feb)の時の楕円描画の間違いに今さら気付いた話。

# 発端
　なでしこの「楕円描画」がよく分かんない。説明がない。「開始角」とか「終了角」ってなんなんだよ・・・と、てきとーな価を入れていくと、1とか2とかだと欠けている。7でようやく、全き楕円となった。・・・・・・ラジアンか！
　そりゃ、普通の角度のつもりで90とか入れても、見た目普通の楕円になっちゃうワケですよ。

　以前の記事で、てきとーに楕円描画でメダカを作ったけど、「回転」はラジアン変換したら希望どうりの動作になるということにまで気付いていたのに、なんで終了角は360とかにしてんの？　ほんとバカなの？！(/ω＼)　（※既にコッソリ修正しちゃいましたｗ）

　まあまあ、そういうわけで、今さらですけど結局ラジアンって何なの？　という。
　現状知っているのは、```プログラムで角度を扱う時は、ラジアン変換しなきゃないことが結構ある```ってことと、なでしこで、

```
360をラジアン変換して言う
```

とやると、```6.283185307179586```と教えてくれるってことだけ。


# うぃきぺでぃあ先生に教えを請う

```
円周上でその円の半径と同じ長さの弧を切り取る2本の半径が成す角の値と定義される。
弧度（こど）とも言い、平面角の大きさをラジアンで測ることを弧度法と呼ぶ。
```

　うっ・・・さっぱり１ミリも分かんない（涙）
　むじゅかしい言い回しに心折れそうになりながら、がんばる。
　横文字は苦手だが、ベツに日本語が堪能というわけでも無いでね。
　日本語なら何でも理解出来ると思うなよ・・・いやまて！

# 弧の長さから角度を求めるから弧度
　結局、コレです！　日本語素晴らしい！！

```
ラジアンは「円の半径に等しい長さの弧の中心に対する角度」
180° は弧度法においては π rad であり、360° は 2π rad である。 
```
　さらーっとこう書かれると目が滑ってしまうけど、ようするに１ラジアンは、

```
「半径」と同じ長さの「弧」を持つ扇形の中心の「角度」
```
　ってことになりますかね？
　radはラジアンの単位だから、

```
180°はπ、一周360°は２π
```
　てだけのコトでしたね。
　おぉ！　πは3.14だから、×２は6.28。
　ちゃんとラジアン変換した価になってるじゃないですか！（当たり前；）

#なでしこで説明図を描くよ！
　こんな感じ？
![ラジアン.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561177/0161371b-ae9d-d5b6-1678-99d82fae206f.jpeg)
　なでしこで普通に書いた場合、開始は右端で、そこから時計回りということになってるらしい。

　
　そして、半径が１ならば、「弧の長さ＝ラジアン」だし、
![ラジアン２.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561177/4fed35b2-8ea3-16dc-d9f3-a3b354a3ef9c.jpeg)
　ラジアンは「弧の長さ÷半径」で求められる、
![ラジアン.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561177/3adca97a-b783-6186-df2c-25fddded7f05.jpeg)
　・・・と言うことラシイ。

> ラジアン＝弧／半径

#コード
```
半径=120。中点x＝半径+10。中点y＝半径+10。
終了角＝2.5。ｒ＝半径/40。  //ここを書き換えてお試し。

灰色に線色設定。「rgba(0,0,0,0)」に塗り色設定。1に線太設定。
[中点x,中点y]に半径の円描画。
[0,中点y]から[中点x*2,中点y]まで線描画。
[中点x,0]から[中点x,中点y*2]まで線描画。

#弧
青色に線色設定。4に線太設定。
[中点x,中点y,半径,半径,0,0,終了角,0]の楕円描画。

#角度
緑色に線色設定。2に線太設定。
[中点x,中点y,半径/4,半径/4,0,0,終了角,0]の楕円描画。

#半径
赤色に線色設定。3に線太設定。
[中点x,中点y]から[中点x+半径,中点y]まで線描画。

半径と(終了角を度変換)で弧交点取得。
x=それ[0]＋中点x。y＝それ[1]＋中点y。
黒色に線色設定。
[中点x,中点y]から[x,y]まで線描画。

●(半径と角度で)弧交点取得
　変数　x＝半径*COS(DEG2RAD(角度))。
　変数　y＝半径*SIN(DEG2RAD(角度))。
　[x,y]で戻る。
ここまで。

#文字
「bold 16px sans-serif」に描画フォント設定。
赤色に塗り色設定。
[中点x+10,中点y-5]へ「半径(r)＝{ｒ}」を文字描画。
青色に塗り色設定。
[中点x+60,中点y+80]へ「弧の長さ(L)＝{(ｒ)＊終了角}」を文字描画。
緑色に塗り色設定。
[中点x+半径/4,中点y+25]へ「ラジアン」を文字描画。
[中点x+半径/4,中点y+45]へ「 (rad)＝{終了角}」を文字描画。
```
　動作確認は、[なでしこ3簡易エディタ-タートルグラフィックス用](https://nadesi.com/doc3/index.php?%E3%81%AA%E3%81%A7%E3%81%97%E3%81%933%E7%B0%A1%E6%98%93%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF-%E3%82%BF%E3%83%BC%E3%83%88%E3%83%AB%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%82%B9%E7%94%A8)で。
Ubuntuにwineをインストールする

https://stackoverflow.com/questions/42410134/how-to-fix-e-the-list-of-sources-could-not-be-read-could-not-be-read-error
*hint sudo: apt-add-repository: command not found


` sudo apt-get install software-properties-common`で解決できる

```
sudo dpkg --add-architecture i386
wget -qO- https://dl.winehq.org/wine-builds/Release.key | sudo apt-key add -
sudo apt-add-repository 'deb http://dl.winehq.org/wine-builds/ubuntu/ artful main'
sudo apt-get install --install-recommends winehq-stable
```
Ansibleでunreachableが出た際の備忘録

## 環境
- ホストOS
    - Windows10 
- ゲストOS
    - Centos7 (Ansibleをインストールしてあるサーバ) 
    - Centos8 * 2 (この子たちに設定したいサーバ)

- SSHクライアント
    - PowerShell 7.1.0-preview.3

## 本篇
Ansibleの勉強を始めようと思い立ち、とりあえずApacheをインストールしようとしていたところ、こんなエラーが出た.

###エラー内容
```
[WARNING]: Invalid characters were found in group names but not replaced, use -vvvv to see
details

PLAY [all] ***********************************************************************************

TASK [Gathering Facts] ***********************************************************************
fatal: [Server1]: UNREACHABLE! => {"changed": false, "msg": "Failed to connect to the host via ssh: Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password).", "unreachable": true}
fatal: [Server2]: UNREACHABLE! => {"changed": false, "msg": "Failed to connect to the host via ssh: Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password).", "unreachable": true}

PLAY RECAP ***********************************************************************************
Server1            : ok=0    changed=0    unreachable=1    failed=0    skipped=0    rescued=0    ignored=0
Server2            : ok=0    changed=0    unreachable=1    failed=0    skipped=0    rescued=0    ignored=0

```

- UNREACHABLE!の通り、サーバまで届いてない
- changedも、falseなので変更されてない
- msgにある内容は、「SSHでアクセスしようとしたら、Permission denied (権限なかったぽ)」って感じ

###Playbookの内容
```yml:test-ansible.yml
---
- hosts: all
  become: true
  handlers:
    - name: restart httpd
      service: name=httpd state=restarted
  tasks:
    - name: dnf install httpd
      dnf: name="httpd" state=latest
```
####記述内容
- hostsに記載のすべてに実行(今回は全サーバ)
- 管理者権限でコマンドを実行
- もし、httpdに変更が加えられたら、serviceコマンドから再起動
- httpdの最新版をインストール(CentOS8が相手なので、dnfコマンドを実行)

###実行時のコマンド
```
ansible-playbook test-ansible.yml
```
- 単純にtest-ansible.ymlを実行

###解決策
- 対象サーバ(CentOS8)はパスワード認証を使っているにもかかわらず、その認証を行っていなかった

####公開鍵を使う方法
[こちら](https://curecode.jp/tech/ansible-unreachable-failed-to-connect-to-the-host-via-ssh-permission-denied/)
>ssh-copy-id コマンドで対象サーバーに公開鍵を設置してみたところ上手くいきました。

####configファイルに記載する方法
- ansible.cfgに下記の内容を追記する

```yml:ansible.cfg
[defaults]
ask_pass = True
```
- ただし、この方法の場合毎回パスワード認証を行うかも...

####実行コマンドに追記する方法
- 実行時のコマンドに、--ask-passを追加

```
ansible-playbook --ask-pass test-ansible.yml
```

##参考にさせていただいたサイト
[キュア子の開発ブログ様](https://curecode.jp/tech/ansible-unreachable-failed-to-connect-to-the-host-via-ssh-permission-denied/)
[わくわくBank.様](https://www.wakuwakubank.com/posts/483-tool-ansible/)