OmniAICreator/Qiita-1.07M huggingface dataset:
AtomパッケージのRemote FTPが接続できないときの対処法

# エラーが起こった環境
エディタ: Atom1.42.0
PC: macOS Catalina ver. 10.15.1

# エラー発生の経緯
Atom導入済みのパッケージRemote FTPを使用。
vagrantで構築した仮想マシンCentOS7にログイン後、Atomを起動。
パッケージ→RemoteFTP→Toggle→connect
普段はコレで問題なく接続できたが、以下のエラーが発生。

# エラー内容
`Uncaught Error: Remote FTP: getConfigPath returned false, but expected a string`

# 試したこと
こちら↓の記事を参考に`"keyboardInteractive": true`を`.ftpconfig`に追記してみましたが、直らず。
[[Atom][Remote-FTP]Vagrant に接続できなくなった。](https://qiita.com/gorogoroyasu/items/d2169521395c4ee4c08b)

# 解決策
こちらのQ&Aサイトで紹介されていた方法で直りました。（正確に言うと、エラーが起きる状況を理解して次回以降同じ轍を踏まないようになりました。）
[Uncaught Error: Remote FTP: getConfigPath returned false, but expected a string #621](https://github.com/icetee/remote-ftp/issues/621)
回答欄では活発な議論がなされていましたが、
> I seem to get this error if I do not have a file from the project open and currently in focus. Once I open a local file from the project I can connect to the remote site without error.


これで解決しました。
つまり、**プロジェクトを開かずにファイルを表示していない状態で上記の様にconnectしようとするとエラーが発生する**ようです。
自分もプロジェクトからローカルのファイルを開いた状態でconnectするとエラーが発生しませんでした。

なお、今回他のコードなどはいじらずにファイルの開き方を注意するだけで解決しました。
（ちなみに[[Atom][Remote-FTP]Vagrant に接続できなくなった。](https://qiita.com/gorogoroyasu/items/d2169521395c4ee4c08b)でコードを変更したままにしたら、エラーが出てもとに戻すよう促されたので、もし同じ状況になってコードをいじった方はもとに戻しておきましょう！）

初心者の初投稿ですので記事の内容の間違いや、書き方に問題があればぜひご指摘いただければと思います！！
Nextcloud のアナウンス機能

#はじめに
Nextcloudはオンラインストレージを構築できるオープンソースソフトウェアです。自前のサーバで構築して運用をしますので、サーバ管理者からユーザへ周知事項などをアナウンスする事もあります。今回は、Nextcloudのアナウンス機能について、ご紹介したいと思います。（メールでアナウンスすれば良いじゃんっていう方も多いと思いますが。）

#プラグイン
利用するのは、Announcement centerというプラグインです。
![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308127/ef97cd2e-12a8-8344-102d-2345d46c5be0.png)

#使い方（adminユーザからの通知）
まず、アナウンスができるのは、管理者（adminグループ）のユーザとなります。adminユーザでログインし、ブラウザ上部メニューのアナウンスアイコンをクリックします。
![002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308127/4e338cc4-e71d-8ac0-fea3-a115b703bc65.png)

アナウンスの画面が表示されます。adminユーザなので、アナウンス入力画面が表示されています。
![003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308127/b023e8e3-90f2-8211-2dbb-0f4d53ad0738.png)

アナウンスをしたい内容を入力します。件名と本文が入力できます。その下に、アナウンスしたいグループを入力できますが、空白の場合は全ユーザへアナウンスを行います。
![004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308127/780d2245-83d7-8fb0-4d7b-3d9435ebd377.png)

次に、詳細オプションをクリックすると、その下に3項目表示されますので、任意で設定をします。
・アクティビティを作成・・・アナウンスをしたユーザのアクティビティに表示されます。
・通知を作成・・・ブラウザ画面右上の箇所の通知に表示されます。
・コメントを許可・・・アナウンスの内容に対し、コメントができるか許可します。
※NotificationsやActivityのプラグインも有効にしておく必要があります。
![005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308127/3657cb1e-a6cb-d5f9-77fc-2e137bf09353.png)

#使い方（一般ユーザでの確認）
一般ユーザでログインすると、通知がきています。
![006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308127/1b632db2-4d7a-3413-5a17-8d8791d032be.png)

ブラウザ上部メニューのアナウンスアイコンをクリックすると、アナウンスされた内容が表示されます。
![007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308127/68d9d4a0-b6dc-358e-aa60-e2f6cc902d7b.png)

コメントが許可されている場合は、アナウンスに対して、コメントが入力できます。
![008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308127/a9f709b7-6f39-c790-b9b5-3e002e5d0c92.png)

#まとめ
アナウンス機能について、ご紹介をしました。私の勝手な利用イメージですと、
・サーバメンテナンスが発生した際に、全ユーザに通知する。
・グループフォルダを使いすぎていたりするときなどに、グループに対してアナウンスをする。
といったところですかね。他にもよいアイデアが欲しいところです。

この記事は、[スタイルズ社のNextcloudサイト](https://nextcloud.stylez.co.jp/nextcloudblog)にも公開しております。
300万IDデータのループ処理に苦労していた話

[昨日の記事](https://qiita.com/pndnism/items/a69107320a180824db1e)の続き  
##■目的
300万個のIDそれぞれに対して、１ヶ月分のデータが用意されている
データの中身は、説明変数と目的変数が１つずつ。
つまりテーブルのカラムは、ID、説明変数、目的変数の３つ
レコード数は300万×30日 ≒ 9000万

この時、300万のIDそれぞれに対し、30日分の説明変数と目的変数の単回帰を行い、
アウトプットとしてそれぞれのIDに対して相関係数、傾き、p値を格納したい。

##■方針
300万のIDに対し、forループの中で回帰を行い、結果をリストとして格納
最後にリストを結合してデータフレームとする

##■環境
EC2インスタンス (ubuntu: r5d.4xlarge)
JupyterLab 0.35.3

##■課題
IDをindexにしてdf.loc[]で抽出 ＋ daskデータフレームを使用でも処理が遅い (２ヶ月かかる）

##■解決策
下記のような形のテーブルを

| ID   | x   | y   |
|:-----|----:|----:|
| 01   | x.xx| y.yy|
| 01   | x.xx| y.yy|
| ・・・  | ・・・  | ・・・ |
| 01   | x.xx| y.yy|
| 02   | x.xx| y.yy|
| 02   | x.xx| y.yy|
| ・・・  | ・・・  | ・・・ |
| 02   | x.xx| y.yy|

下記のような形に変換

| ID   | monthly_x         | monthly_y        |
|:-----|------------------:|-----------------:|
| 01   | [x.xx, x.xx ,....]|[y.yy, y.yy ,....]|
| 02   | [x.xx, x.xx ,....]|[y.yy, y.yy ,....]|
| 03   | [x.xx, x.xx ,....]|[y.yy, y.yy ,....]|
| 04   | [x.xx, x.xx ,....]|[y.yy, y.yy ,....]|
| 05   | [x.xx, x.xx ,....]|[y.yy, y.yy ,....]|
| 06   | [x.xx, x.xx ,....]|[y.yy, y.yy ,....]|

変換の流れは下記２段階  

- **pandas.pivot_tableを使用してpivot化 (内包表記を使える形にするため)**  
この処理は比較的高速。 (1IDあたり **約50μs**、300万IDで **約2.5min**) 

```python:code1.py

import pandas as pd
# 元のデータフレームに日付を表す列を追加した状態（ここでは「date_」という列名とする）
pivot_df = pd.pivot_table(df, index="ID",columns="date_")

```
これでx,yそれぞれの値が日付ごとに横持された形になる。

- **IDごとに月間（30日分）のxとyの値をリスト化して、別列に格納（内包表記で処理）**

```python:code2.py

pivot_df["x"] = [list(pivot_df.x.loc[i,:]) for i in pivot_df.index]
pivot_df["y"] = [list(pivot_df.y.loc[i,:]) for i in pivot_df.index]

```
この処理は1IDあたり **約0.2ms**、300万IDで **約10 ~ 15min** (**内包表記強し**) 
  
変換したテーブルに対して、回帰の処理を行ってみる  
今回の回帰は、外れ値の事を考えロバスト回帰を使用  
(ロバスト回帰については[こちら](https://qiita.com/ryskiwt/items/43e9bbc895bb7d33cb17)がわかりやすい)  
(ロバスト回帰の決定係数R^2の導出について、癖があるので時間があるときにまとめる、予定。あくまでも、予定)  

```python:code3.py
import statsmodels.api as sm

pivot_df["model"] = [sm.RLM(i, sm.add_constant(j)) for i,j in zip(pivot_df.x ,pivot_df.y)]
pivot_df["result"] = [i.fit() for i in pivot_df.model]

```
上記コードで1IDあたり **約8.8ms**  
"model"の保存を行わず、ワンライナーでfitまで行うと1IDあたり **約7.9ms**  
ここまでで合計で、1IDあたり **約9ms**  

[前回記事](https://qiita.com/pndnism/items/a69107320a180824db1e)では、1IDの抽出だけで1.7sかかっていたので、
回帰まで含めても1/200、回帰の前処理までの時間で比較すると**1/10000**に処理時間を短縮できた

##■結論

**内包表記最強**
300万IDのIDごとの処理時間が馬鹿正直にやると1年以上かかる計算だったのを、少しの工夫で8時間くらい回せば済むようにできた

（他に良い方法等あればご教示いただけるとありがたいです）

##■今後の予定

回帰に関して、今回の記事では単純にStatsModelsを使っただけだが、ロバスト回帰の決定係数はStatsModels等どのライブラリでも簡単に導出することができない（私の知る限り）ため、少し工夫が必要になる。こちらに関して調べながらまとめられたらいいな～、とフワッと思っている（~~思っているだけ~~）
（再掲）ruby２日目

プログラミング学習楽しいのですが、目がしょぼしょぼしてきました。
こんなに長時間PCの画面を見たことは今までなかった。。
早く慣れてrubyのプログラム魔人になりたい。

カリキュラムの進捗が思ったように進まなかったので、今回は使った用語の簡単なイメージを記すのみにします。
間違っていたら教えてください。

単語のイメージですが、

put　👉表しなさい

＝　👉関連付けよ

gets.👉入力された文字を読み込め

to_i 👉整数にせよ

です。

ヒキスーに関しては　👉ちょっと何言ってるか分からなかったです。
終わり。
Java SE 7/8 Bronzeにチャレンジした。

#初めに
この記事では

- ノー勉でチャレンジしてみた結果
- 取る意義
- 難易度

などを載せたいと思います。

現在自分は、専門学校1年生です。
Javaの経験は,３年間ぐらい独学でSwingなどでGUI系のソフトを作って遊んでいた ＋ １年の専門学校生活で学んだこと。
Javaの入門書の知識はほぼ全て理解(Java Silverなどで出題される標準APIなどは覚えてない)しているぐらいの知識はあります。
bronzeは入門書を理解できれば対策本はいらないことを証明するために**ノー勉で挑みました。**


#結果
見事受かりました。**(合格ライン60点、点数65点)**
危なすぎますね。
僕はSilverの練習問題をやってみて「余裕じゃん！」
とか言って自信満々だったのにこの点数です。
自信がない人は絶対対策本かったほうがいいです。

#取る意義
就活で役に立つかといわれると微妙ですね。
役立つのはSilverからでしょう。

じゃあとる意味ないのかといわれると、僕はそうは思いません。
Bronzeを受けてみてほとんどの問題の意図を理解できた
（ただし意地悪な問題が多いので回答があっていたかどうかは置いておきます）なら、
それはオブジェクト指向をほぼ理解していることになると思います。
Javaを覚えるうえで一番難しいのはオブジェクト指向を理解することですからね
企業からの評価は得られませんが、自分の自信につながります。
僕はそれが一番の収穫でした。

#難易度
bronzeの難易度自体はそこまで高くないと思います。
しかし、意地悪問題が多いです。
練習問題を見るとJava bronzeだけがそうなのではなくsilver, goldも同様意地悪問題が多いです。

例えば

 int a = 3;
 **int b = (a = 4) + 5;**
 System.out.println(b);

このコードがコンパイルに成功するかどうか？という問題でした。
こんなコード今まで一度も見たことがなかったのでかなり悩みました。
「実際に開発するときこんな書き方しなくない？」というのが結構出ました。
もしかしたら実務をしていたら見る機会がもあるかもしれませんが、初心者さんは間違いなく見たことないはずです。
僕はこういう変な問題に点数を多く奪われたので注意しましょう。

#最後に
少ない記事ですがbronzeをとる際の参考になれば幸いです。
私は年内goldを目指そうと思います。
現在Java 8、11どちらのバージョンで取ろうか迷っているので詳しい方いたらコメントで教えてくださるとうれしいです。
見てくださってありがとうございました。
【Nuxt.js】filter実践編：文末を…で省略しよう！

# 前置き
<img width="620" alt="スクリーンショット 2020-01-08 14.30.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/5725b77c-ac29-a299-7ca6-83f22718a6f5.png">

filterを使って
文末を…(三点リーダー)で省略してみます🌟
**コードの後にそれぞれの
各ポイントで解説をしていきます。**

【考え方】
文字の長さlengthが
・10文字まで(0〜9)はそのまま表示
・11文字目以降(10〜)も続くなら
　　10文字目まではそのまま表示
　　11文字目を…にする

# CSSでもできるよね？
できます！
が、
基準が字数ではなく、行数や幅になります。
https://www.yoheim.net/blog.php?q=20180702

# コード(ローカルver)
sliceが分かりやすいよう
data内テキストは数字の0〜にしました。
では後ろの解説をどうぞ。

```index.vue
<template>
 <div class="page">
   {{ text | omittedText }}
 </div>
</template>

<script>
export default {
 data () {
   return {
     text: "0123456789101112",
   }
 },
  filters: {
    omittedText(text) {
     return text.length > 10 ? text.slice(0, 10) + "…" : text;
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
```

# filter
https://note.com/aliz/n/ncaab37ed5ef5
基本的な使い方をご確認ください！

**前回には記載していない点があります。
filterにはthisを書けず
dataに直接アクセスできないことです。**
そのためthis.textとは書けません。
その代わりに引数にtextを渡しています。

# slice
sliceを使って、
指定文字を抜き出します。
今回は10文字目まで(0〜9)を表示🍒
slice(0, 10) でOKです♪

**sliceの意味は…
指定番号〜後ろの指定番号より前を抜き出す🌟**
slice(2) = 2番目〜を抜き出す
slice(0, 10) = 0番目〜9文字目までを抜き出す

MDNが参考になります！
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice#Examples

# 三項演算
◾️式1 ? 式2 : 式3
　　式1が
　　・trueなら式2
　　・falseなら式3

今回は文字の長さによって条件分岐させます。

```
文字の長さ ? 10文字まではそのまま表示 + 11文字目以降は"…" : 10文字まではそのまま表示 ;
```

これをコードにすると

```
text.length > 10 ? text.slice(0, 10) + "…" : text;
```

**◾️式1：文字の長さlengthが10文字より多い**
(より、なので10は含まず11〜)
**・trueなら式2**　10文字まではそのまま表示
　　　　　　　　11文字目を…にする
**・falseなら式3**　10文字目まではそのまま表示

# 20文字目を…にしたい場合
【index.vue】
filterの数字を変更しましょう！
sliceが慣れてくれば簡単ですね🍒

```index.vue
// 変更前
return text.length > 10 ? text.slice(0, 10) + "…" : text;

// 変更後
return text.length > 19 ? text.slice(0, 19) + "…" : text;
```

# コード(グローバルver)

```plugin/filter.js
import Vue from 'vue'

Vue.filter('toLowercase', function (text) {
 return text.length > 10 ? text.slice(0, 10) + "…" : text;
})
```

```nuxt.config.js
export default {
 plugins: [
   '~/plugins/filter.js'
 ],
}
```

```index.vue
<template>
 <div class="page">
   {{ text | omittedText }}
 </div>
</template>

<script>
export default {
 data () {
   return {
     text: "0123456789101112",
   }
 },
}
</script>

<style lang="scss" scoped>
</style>
```

**このアカウントでは
Nuxt.js、Vue.jsを誰でも分かるよう、
超簡単に解説しています🎈😀
これからも発信していくので、
ぜひフォローしてください♪**
https://twitter.com/aLizlab
bundle installするときに "can't find gem bundler (>= 0.a) with executable bundler (Gem::GemNotFoundException)" とErrorが出る

# 問題が起きたらググれって偉い人が言ってた

対象のディレクトリ下でbundle installするときに起った現象のメモ
※初学者なので細かめに記載

git cloneしたアプリのgemを入れようとしたら以下のエラーが出た。

```ruby:console
Traceback (most recent call last):
	2: from /Users/mac/.rbenv/versions/2.5.3/bin/bundler:23:in `<main>'
	1: from /Users/mac/.rbenv/versions/2.5.3/lib/ruby/2.5.0/rubygems.rb:308:in `activate_bin_path'
/Users/mac/.rbenv/versions/2.5.3/lib/ruby/2.5.0/rubygems.rb:289:in `find_spec_for_exe': can't find gem bundler (>= 0.a) with executable bundler (Gem::GemNotFoundException)
```
# 結局原因ってなんなの？

どうやらbundlerとGemfile.lockのversionが異なっていたので、
『bundlerのgemが見つからないよ！！！！！』って怒られていたらしい。
version違うだけで見つからないのは、当たり前とはいえ
ぶち当たるとちょっとテンション落ちる。
ドジっ子と思えばそうでもないかもしれない。


# どうやって解決したの？
方法は2つ
・bundlerのダウングレードをする
・Gemfile.lockにある 'BUNDLED WITH' をbunderのversionに対応させる

bunderのダウングレードはいっぱい記事があるので、
検索してみてください。

##### そもそものbundlerのversionチェック

ルートディレクトリで以下のコマンドを叩く

```ruby:bundlercheck
$ bundle -v
```

##### Gemfile.lockにある 'BUNDLED WITH' をbunderのversionに対応させるの方法

```ruby:bundler
$ cd ~/[対象のディレクトリ]
```

```ruby:bundler
$ vim Gemfile.lock
```

ファイルの中身が見れるようになるので、
G（Shift+g）で最終行へ
x.x.xを対応のversionに書き換えます。

```ruby:Gemfile.lock
BUNDLED WITH
   x.x.x
```

書き換え方
i → インサートモードへ（書き換えができるようになる）
esc → インサートモードの終了
:wq!を入力 → 保存して強制終了

これでbundle -v したり bundle install して、
問題なければヨシッ！

# まとめ
いろんな記事を読んで模索した結果なので、これが最善の解説策かはわかりません。
なのでこれだけでなくいろんな記事を読んで、
ここは一つの参考にしていただければと思います。
CSS 重ねかた

以下、箇条書き。
・padding-topで上部の内側のラインが下がる。(left, right, bottomも同じ)
・margin-leftで左に余白が延びる。(topとかも同じ)(余白なので延びた左側白くなる)
・position: ¥;
　¥の中身はabsolute(絶対座標), fixed(画面からの位置),relative(相対座標)
簡単に説明。(top: 0;などを下に記述)
absoluteは左上を(0, 0)を基準とした時の位置。
fixedは左上を(0, 0)を基準とした時の位置だが画面に固定される。ずっと見えてて欲しい広告やHeaderなど便利なものを固定することが多い。
relativeは、ホラ、HTMLって積み木のように重なっていくじゃん？そうなった時の表示される場所って(0, 0)じゃない事が多い事が多い。横にずらしたいだけって時などには便利かも。
・z-index: ¥;
　¥には数字(大抵1,2くらい)が入る。数字が大きいほど前に出る。表示だけじゃなく、作業中この要素隠れてるけどどんなふうに配置されてんのかなーって思う時にも便利。とてつもなくでかい値を入れると確かめられる。
・width calc(100% - 300px)など
　calcで計算できる。％とかpxとかvhとか入れても単位も勝手に揃えてくれる。
・height: 100vh;
100％と間違えるとハマる。ハマるな危険。
GitHub ActionsでRe:VIEW原稿をビルドする

# はじめに

Re:VIEWの開発環境をローカルに用意するの、しんどいですよね。
普段DockerやRubyを使わないのにこれらをインストールするのは億劫だと思います。

そんな方に、GitHub ActionsにRe:VIEWのビルド丸投げして楽しませんか？

> **注意**
> この記事の内容は[TechBooster/ReVIEW-Template](https://github.com/TechBooster/ReVIEW-Template)のテンプレートを使用した場合の例です。

# ワークフローファイル

以下の内容を`.github/workflows`以下のYAMLファイルにコピペしてリポジトリにPushしてください。
ここでは`pdf.yml`として作成したとします。

```yml:.github/workflows/pdf.yml
name: Generate preview pdf
on: push

jobs:
  build:
    name: Generate pdf
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
        with:
          fetch-depth: 1
      - uses: docker://vvakame/review:4.0
      - run: ./build-in-docker.sh
      - name: Get build date
        id: get-date
        run: echo "::set-output name=date::$(date +"%Y-%m-%d")"
      - name: Get Repository Name
        id: get-repo-name
        run: echo "::set-output name=repo-name::${GITHUB_REPOSITORY##*/}"
      - uses: actions/upload-artifact@master
        with:
          name: ${{ steps.get-repo-name.outputs.repo-name }}-${{ steps.get-date.outputs.date }}
          # config.yml の bookname の値によって変える
          path: articles/output.pdf
```

また、プライベートリポジトリなどでなるべく実行回数を抑えたいという場合は、実行するファイルパスを明示的に指定してください。

```yml
on:
  push:
    paths:
      - articles/*
      - Gemfile
      - build-in-docker.sh
      - Gruntfile.js
      - package.json
      - rebuild-css.sh
      - setup.sh
      - .github/workflows/pdf.yml
```

# 機能

ワークフローが正常に終了すると、 `<リポジトリ名>-<年月日>` というアーティファクトが登録されます。
例：`lollipop-onl/techbook-sample` → `techbook-sample-2020-01-10`

アーティファクトのZIPファイル内にビルドされたPDFが入っているので、解凍してご覧ください。

また、プレビューしたい事にPushすることになるので、Commitが細かくなりリカバリがしやすくなる...かもしれません。
配列の中に空objectがあったら削除する処理

##やりたかった事
今回やりたかった事は何かしらPOSTする時にエンドユーザーが必須項目でない入力欄を空で
submitした際に事前に配列の中身の空objectをdelete処理してPOSTする事。
因みに備忘録です。
##実際の処理
実際にありそうなプロフィール入力だとこんな感じになるのかな？

```typescript:hoge.component.ts
//入力された項目
const profile = {name : 'suzuki', age : '30', sex : null, address : null};
//この処理でnullだった場合、空objectを削除
Object.entries(profile).forEach( o => (o[1] === null ? delete profile[o[0]] : 0));
console.log(profile);
//{name: "suzuki", age: "30"}
```

##まとめ
配列の中の空objectを削除したいってなった時にまぁ安易にif文使おうとしてたのでこういうやり方もあるんだなと勉強になった次第です。
We're sorry, but something went wrong.の解決方法

メルカリのクローンサイトを作っています

試験環境では、会員登録後のログインの動作確認が取れましたが

本番環境で、会員登録後のログイン動作確認をした時に

ログインページ
https://gyazo.com/c2dd31666c92ab2c66b6e5fd35728449

ログインボタン押下後
https://gyazo.com/f7619ec2da9a63435d83d25aece3a60b

「We're sorry, but something went wrong.」
のエラーが表示されました。

ログをみるとrecaotchaのサイトキー、シークレットキーが本番環境で読み取れないエラーを
確認しました。
環境変数の組み替えなど色々試しましたが、エラーが直らなかったです。
解消法の御教示をお願いしたいです。
眺めて覚えるGo言語 その11 無名関数(Anonymous function)

#では、眺め用サンプルコード

```f11.go
package main
import (
    "fmt"
)
func main() {
	h1:=func(a string)(string){ return "<h1>"+a+"</h1>"}
	fmt.Println(h1("Topics"))
}
実行結果
>go run f11.go
<h1>Anonymous</h1>
```

##名無しの関数
```f12.go
package main

import (
    "fmt"
)

func main() {
	func(){
		for i:=0;i<10;i++{
			fmt.Println("i=",i)
		}
	}()
}

実行結果
>go run f12.go
i= 0
i= 1
i= 2
i= 3
i= 4
i= 5
i= 6
i= 7
i= 8
i= 9
```
MacのAnsibleでwindows serverに接続しようとしたときに発生したエラー [ERROR! A worker was found in a dead state]

## 環境

- macOS Catalina バージョン 10.15.2

```
ansible: 2.9.2
  config file = None
  configured module search path = ['/Users/aoshima/.ansible/plugins/modules', '/usr/share/ansible/plugins/modules']
  ansible python module location = /Users/aoshima/.local/share/virtualenvs/tests-jeV_LJ4f/lib/python3.7/site-packages/ansible
  executable location = /Users/aoshima/.local/share/virtualenvs/tests-jeV_LJ4f/bin/ansible
  python version = 3.7.6 (default, Dec 30 2019, 19:38:26) [Clang 11.0.0 (clang-1100.0.33.16)]
```

## エラー内容

Ansibleから`win_ping`でwindows serverへの接続確認を行なおうとしたらエラーがでた。

```
$ ansible windows -i ./inventory -m win_ping
objc[47572]: +[__NSPlaceholderDate initialize] may have been in progress in another thread when fork() was called.
objc[47572]: +[__NSPlaceholderDate initialize] may have been in progress in another thread when fork() was called. We cannot safely call it or ignore it in the fork() child process. Crashing instead. Set a breakpoint on objc_initializeAfterForkError to debug.
objc[47571]: +[__NSPlaceholderDate initialize] may have been in progress in another thread when fork() was called.
objc[47571]: +[__NSPlaceholderDate initialize] may have been in progress in another thread when fork() was called. We cannot safely call it or ignore it in the fork() child process. Crashing instead. Set a breakpoint on objc_initializeAfterForkError to debug.
ERROR! A worker was found in a dead state
```


## 回避策


https://github.com/ansible/ansible/issues/34056#issuecomment-352862252 でワークアラウンドを説明してくれていた。macOSのpythonの問題らしいが、すぐには理解できそうになかったので放置...

```
$ export OBJC_DISABLE_INITIALIZE_FORK_SAFETY=YES
```

これで接続できるようになった。
【Mac】VSCodeでExplorerからフォルダを作成するショートカットを追加する。

# はじめに
Explorerからフォルダを新規作成したいときのショートカットキー、地味にデフォルトでは設定されていません(Windows版は知らないですが。。。)。

> デフォルトは未設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241394/cb522138-47ca-73f1-8b91-350af408003a.png)

そこで、Keybindingに新しいショートカットキーを追加しました。


# 追加方法
`cmd+shift+P`でコマンドパレットを開き、「keyboard」と検索すると、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241394/23151043-5dd1-ffa1-9485-bb2ac22eb30a.png)
と表示されるので、`Open Keyboard Shortcuts (Json)`を選択。

そこに下記の文を追加してください。（`key`の中身は好きに変えてください。）

```json
[
    {
        "key": "ctrl+d",
        "command": "explorer.newFolder",
        "when":"explorerViewletVisible && filesExplorerFocus && !inputFocus"
    }
]
```
`when`は`ctrl+d`をフォルダ作成として使うタイミングを記述する場所で、
https://code.visualstudio.com/docs/getstarted/keybindings
を参考に設定しました。
【Airflow入門】Airflowの基本的な構成について

# はじめに

最近Kubeflowも盛り上がってますが、DevopsとかMLops関連でAirflowも注目度が上がってるように思います。
今回はAirflow入門記事を書くチャンスがあったので、ここに書こうと思います。

# Airflowとは？
Airflowとは、ワークフローエンジンと呼ばれるもので、
DAGと呼ばれる有向グラフを用いてジョブを管理します。
WebUIの出来が良く、管理しやすいのが特徴です。

また、Airflowをカスタマイズしていくと、結構色々なことができるので、
ぜひみなさんもAirflowを使って自動化をどんどんしていきましょう...!

# Airflowの基本的な構造について

Airflowの基本的な構造については以下のようになっています。

![Airflowの基本構造](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145843/67ae0908-5655-91b1-b94e-b64f4e678a67.png)

単一ノードであれ、MasterNode-workerNode分離型であれ、
基本的にはこういう構造でそれぞれのプロセスが動いているっぽいです。

特徴的なのが、Airflowは互いの要素について通信したりしないということです。
(webUI→workerは通信することがあります)

## WebUIが担保する情報

WebServer機能については、基本的にDagが記載されたFileとairflow.cfgファイル、
そして、metadataが記載されているPostgreSQLを読みにいってます。

WebUIは何を担保しているかというと、SchedulerとWorkerが行った**行動記録を読み出す**というだけです。
(図には矢印がないですが、裏でworkerと通信もしていることがあるっぽいですが)
ジョブの実行状況などは随時PostgreSQLに書き込まれていきますので、それをただ読んで反映するだけのようです。

## Schedulerが担保すること

Scheduler機能に関しては、Dagに記載された手順とPostgreSQLを元にスケジューリングするだけです。
WebUIからトリガー要求が書き込まれることもありますし、それをPostgreSQLを介してSchedulerが読み取り
実行Queueに指示書を送ります。

Schedulerが送る指示書とは、DagIDの何を実行しろという情報で、基本的にDagFileが読めないと実行できません。

## Workerが担保すること

Workerは、Schedulerから送られてきたQueueにあるタスクについてひたすらOperationを回していく作業をします。
WorkerはSchedulerが送ってきた、Dagidに基づいて実行を行います。
要は、DagFileにある何番の何をやりなさい。という情報だけが送られてきます。
そのため、WorkerもDagFileを読む必要があります。

## Airflow構成の重要なこと

Airflowの各要素に関しては、Webserver→Workerを除き、それぞれの要素に対して通信したりすることはありません。
Airflowを理解する上で重要なのは、**全てPostgreSQLとBrokerとDAGFileを通じてのみやりとりをしている**ということです。

# DAGFileとairflow.cfgファイルの共有

その上で重要になってくるのが、このDagFileとairflow.cfgの全体共有です。
WorkerNodeを別に作成するのなら、WorkerNode全てが同じDagFileとairflow.cfgを読まなければなりません。
解決法としてはGit管理してレポジトリ化するということが一番いいです。

基本的に接続情報などに関しても共通化することができますし、何よりレポジトリで管理することができるので、
新しいJobをデプロイしたい時などにも簡単にできます。

# おすすめの構成

GKEを用いるなら、CloudComposerを使用しますが、そうでない場合(かなり安く済ませたい場合など)は以下のような構成がおすすめです。
![おすすめ構成](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145843/96f3ef32-0442-53fe-33b4-14244fd01bb4.png)

特に機械学習の話でいえば、GPUのハイスペックマシンなどをジョブを回す時だけ起動したい。
ジョブが終了したらインスタンスも終了するといったことも、これを使えば実現できます。

WebServerやSchedulerに関しても、Dockerで動かしても良さそうですね。
Compose化までしなくてもいい気はしますが、セキュアな環境が構築できるかと思います。


# おわりに

今後もAirflowの記事をガンガン書いていきます。
今回のおすすめ構成でお話しした、機械学習Jobの時だけWorkerを起動し、仕事をさせる方法についても解説したいと思います。
よろしくお願いいたします。
モデルのテストの記述方法を細かくみてみた

下記のようなテスト文を、後からわかりやすいように、細かくみてみた。

```ruby:spec/models.rb/message_spec.rb
require 'rails helper'

RSpec.describe Message, type: :model do
  describe '#create' do
    context 'can save' do
      it 'is valid with content' do
        expect(build(:message,image:  nil)).to be_valid
      end
    end
    

    context 'can not save' do
      it 'is invalid without content and image' do
        message = build(:message, content: nil, image: nil)
        message.valid?
        expect(message.errors[:content]).to include("を入力してください")
      end

          end
        end
      end
```
以下に説明を記述。


```ruby:spec/models.rb/message_spec.rb
require 'rails helper'

RSpec.describe Message, type: :model do
# RSpec.describe  で、テストのグループ化を宣言。モデル名, type: model: で、モデルに関するテストであることを付け加えている。
  describe '#create' do
  # 上記でcreateアクション時のテストであると宣言
    context 'can save' do
    # この中にメッセージを保存できる場合のテストを記述
      it 'is valid with content' do
      #メッセージがある
        expect(build(:message,image:  nil)).to be_valid
        # expect(X).to Y  で、XのときYされることを期待するという意味のコードになる
        # build(カラム名: 値)の形で引数を渡すことによって、ファクトリーで定義されたデフォルトの値を上書きする。(buildメソッド)
        # expect(build(:メッセージ,画像:ない).to 左記のときに保存された場合テストにパスするといったコードである。
      end
    end
    

    context 'can not save' do
    # この中にメッセージを保存できない場合のテストを記述
      it 'is invalid without content and image' do
      # 画像もメッセージもない
        message = build(:message, content: nil, image: nil)
        message.valid?
    
        # 下記を表示する前にメッセージの検証を行う。
        expect(message.errors[:content]).to include("を入力してください")
        # error時の表示を設定する。
        # message.errors[:カラム名] でそのカラムが原因のエラー文が入った配列を取り出す(エラー文はrails内に自動で設定されている)
        # 上記で生成されたエラー文に"を入力されています"を含んでいる(include)場合テストにパスするといったコードである。
      end

          end
        end
      end
pythonでPhotoshop形式のファイル（.psd）を作る

<img width="731" alt="screen.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76058/7cbfa900-5c25-470c-ddf8-77499f0685d2.png">


pytoshopというライブラリを使ってPSDファイルを作ります。
pytoshopで一旦psdファイルを読み込んで加工するのは結構他でも見つかりましたが、ゼロから作るのは見当たらなかったので公式ドキュメントみたりデバッグしなりしながら調べてみました。

基本的にPythonで一般的なOpenCVの画像データ（numpy配列)でレイヤーを構成して書き出す感じです。

# 必要なパッケージのインストール

```bash
pip install numpy scipy opencv-python Pillow six psd-tools3 pytoshop
```

# スクリプト

```python:main.py
#! env python
# -*- coding: utf-8 -*-

import os
import sys
import cv2
import pytoshop
from pytoshop import layers
import numpy as np
import cv2

def main():
    # レイヤー用画像
    test_img = cv2.imread("test1.tif")
    #
    # 白紙のPSDファイルを作る
    #
    psd = pytoshop.core.PsdFile(num_channels=3, height=test_img.shape[0], width=test_img.shape[1])
    # 255埋めの画像を作る(透明度用)
    max_canvas = np.full(test_img.shape[:2], 255, dtype=np.uint8)
    #
    # レイヤーを作る
    #
    # 必要なレイヤーの枚数分行う
    # 透明度 np.ndarray([], dtype=np.uint8)
    # 255が不透明、0が透明になっており、グレースケールのマスク画像を設定することで、透明度を持ったレイヤーを作ることが出来る
    layer_1 = layers.ChannelImageData(image=max_canvas, compression=1)
    # RGB
    layer0 = layers.ChannelImageData(image=test_img[:, :, 2], compression=1)  # R
    layer1 = layers.ChannelImageData(image=test_img[:, :, 1], compression=1)  # G
    layer2 = layers.ChannelImageData(image=test_img[:, :, 0], compression=1)  # B
    new_layer = layers.LayerRecord(channels={-1: layer_1, 0: layer0, 1: layer1, 2: layer2},  # RGB画像
                                   top=0, bottom=test_img.shape[0], left=0, right=test_img.shape[1],  # 位置
                                   name="layer 1",  # 名前
                                   opacity=255,  # レイヤーの不透明度
                                   )
    psd.layer_and_mask_info.layer_info.layer_records.append(new_layer)
    #
    # 書き出し
    #
    with open("output.psd", 'wb') as fd2:
        psd.write(fd2)
    return


if __name__ == '__main__':
    main()

```
PythonとCythonのdtypeについて

pythonとcythonのdtypeがごちゃごちゃになったので、整理した。

## 背景
pythonのdtypeで例えば`float64`などがあるが、cythonだと`float64_t`などが使われる。これらの違いは何か。同じように使ってよいか。

## float64_tは何なのか
まず、

```
import numpy as np
cimport numpy as np
```
とすると、最初の行でnumpy moduleをimportし、次の行でnumpy.pxdを単にincludeする。
cythonのインストールフォルダーを見ると、たしかにnumpy.pxdがあり、`float64_t`は

```
ctypedef double       npy_float64
ctypedef npy_float64    float64_t
```
と定義されている。

## 結論
`float64_t ≠ float64`であり、`float64_t = double`だった。

## 参考
https://stackoverflow.com/questions/11004659/what-is-the-difference-between-numpy-type-identifiers-and-types-within-cytho
Railsでカンマ区切り+小数点以下表示で数値を出力する方法

# 目的
整数部をカンマ区切りで表示し、小数点以下を表示したい

# コード
```rb
number_with_precision(123456789, precision: 2, delimiter: ',')
#=> "123,456,789.00"
```

# 参考リンク
[ruby-on-rails — 大きな数字にカンマを追加するためのRailsトリックはありますか？](https://www.it-swarm.net/ja/ruby-on-rails/%E5%A4%A7%E3%81%8D%E3%81%AA%E6%95%B0%E5%AD%97%E3%81%AB%E3%82%AB%E3%83%B3%E3%83%9E%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AErails%E3%83%88%E3%83%AA%E3%83%83%E3%82%AF%E3%81%AF%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%81%8B%EF%BC%9F/967301347/)
[ActionView::Helpers::NumberHelper]
(https://api.rubyonrails.org/classes/ActionView/Helpers/NumberHelper.html#method-i-number_with_precision)
【超初心者向け】Apacheとは何か？を大雑把に解説する記事


**「このApacheとやら、サーバー？らしいんだけど一体なんなのかよくわからないな…」**
この記事は、そんな方向けの解説記事です。

XAMPP/MAMPという言葉は、Web開発においてよく聞く言葉かと思います。
その中の「A」こと**「Apache」とは何か？**それを解説致します。

#Apacheとは何か、大雑把に解説

Apache一言で言うならば、**webサービスを提供する為に必要な機能を備えた仕組みです。**

ここから具体的な解説をしていきます。

実際にウェブサービスを成り立たせたい時にどう動くべきか？を具体的に考えてみましょう。
そもそも、PHPやJavaで書かれたソースコード、HTMLやCSSと言ったソースコードは設置しただけでは意味がありません。
HTTP通信（サービス運営者のサイトに繋ごうとすること）を適切に捌き、適切なファイルを適切なタイミングで用意し、それをクライアント（繋いできた人）に返したり受け取ったりする、そういう仕組みが無いとwebサービスとして成り立ちません。
その管理を一括的にやってくれる仕組みが、Apacheです。

つまり、**自動的に自分のウェブサイトを見に来てくれた人に結果を返してくれる手続きを自動的にやってくれる仕組み**と言えます。

ちなみに、このApacheのような管理をしてくれる仕組みを専門用語で言うと「Webサーバーソフトウェア」と言います。

余談ですが、同じWebサーバーソフトウェアの１つにNginxがあったりします。こちらは大規模なシステムに向いています。C10K問題（同時に1万ユーザーくらい押しかけて来るとサーバーがパンクする問題）等、大規模なサービス構築時のトラブルに強いとされています。

##PC本体+Apacheでサーバーになる

ウェブサーバーは目に見えるもので表現されます。

・パソコン本体の用意
・Apacheのインストール&実行

が行われば、その時点からそのパソコンはサーバーとしての役割を果たす事になります。

別に、大企業の地下室にありそうな超巨大なPCばかりがサーバーという訳ではないのです。
要するに稼働している時に、やってきた要求を自動でこなしてくれる仕組みがあれば、それはサーバーと言えるわけです。
Lambda@Edgeでとりあえずデバッグできる環境を作った時のメモ

# やりたいこと
Lambda@Edgeを使って開発する時に最小構成で動くものを作る
それを使ってデバッグしながら開発したい
言語はPython3.7（3.8は現時点でサポート外）

#構成
リクエスト→CloudFront→S3
CloudWatchLogsにログを出力しつつ他は何もしないLamda＠Edgeをはさむ

##S3の用意
S3で適当なバケットを作る
適当なindex.htmlを置く（今回はこんな感じ）

```index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<title>テストホームページ</title>
</head>
<body>
<h1>テストホームページ</h1>
<p>ただいま工事中です。
</body>
</html>
```

バケットにパブリックアクセス権限つける
<img width="1290" alt="スクリーンショット 2020-01-07 12.48.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217652/5e5fe01b-67db-03e1-9d16-cd2fd726ccd0.png">

バケットの「オブジェクトURL」からindex.htmlをブラウザに表示できるか確認する

表示できたらS3の設定は完了
S3の静的ホスティング設定をオンにしてindex.htmlを指定する

##CloudFrontとS3の連携
調べれば山ほど資料が出てくるので割愛
CloudFrontのドメイン経由でS3にアクセスしてブラウザに表示できるか確認する
表示できたら完了

これでリクエスト→CloudFront→S3ができた
ここまでが下準備
ここにLambda@Edgeを挟む

##Lambda@Edge
まず**リージョン（ログインしているユーザ名の横にあるやつ）をバージニアにしてから**Lambda関数を作成する

Lambdaの中身をこれにする

```lambda_function.py
import json

def lambda_handler(event, context):

    print('# lambda@edge start')
    print(event)

#    Viewer Response Origin Responseの場合はこっちをコメントアウトはずす 
#    cfResponse = event['Records'][0]['cf']['response']
#    return cfResponse

#    Viewer Request Origin Requestの場合はこっちをコメントアウトはずす
#    cfRequest = event['Records'][0]['cf']['request']
#    return cfRequest
```
・Lambda@Edgeはリクエストとレスポンスにそれぞれ必須のパラメータがあり、ない場合エラーとなってしまう

バージョンがLATESTになっている事を確認したらアクション→Lambda@Edgeへのデプロイを選択
ディストリビューションに作成したCloudFrontのIDを設定
CloudFrontイベントに設定したいLambda@Edgeのイベントを設定してデプロイをクリックするとデプロイできる

CDNだからデプロイしてもしばらくはコンテンツの配信が完了してない地域がある
CloudFrontのコンソールでstatusがin Progressからdeployedになっていれば配信完了
完了自体は体感だと数分〜數十分くらいか、日本には1~３分で配信されていたように思う

これでCloudWatchLogsのLambda実行ログを見ればコードに書いたログが出力されるはずだ
あとはLambda@Edgeでやりたい事をデバッグしながらLambdaに実装するだけとなる

## Lambda@Edgeのログについて（重要）
Lambda@EdgeのCloudWatchLogsは下記の分類で別々のグループに書き出されるので注意（一番ハマった）
**コンソールから実行したテストのログ**
　リージョン：バージニア
　出力対象：関数ごと
**Lambda@Edgeで実行したLambdaのログ**
　リージョン；アクセスしたリージョン（日本ならほぼ東京）
　出力対象：関数ごと
**Lambda@Edgeで実行したLambda@Edgeのログ**
　リージョン；アクセスしたリージョン（日本ならほぼ東京）
　出力対象：Lambda@Edgeが紐づけられている出力対象ごと

このメモが自分を含めて誰かの役に立てる事を祈る
HackMDでデータ解析のログをつける

## HackMDとは
HackMDは、オンラインのMarkdownエディタです。
詳しくは他の多くの方が説明してくれているのでそちらを参照してください。
こことか
https://nigimitama.hatenablog.jp/entry/2018/12/14/220643
こことか
https://qiita.com/norinity1103/items/85aa990dbe6582b6d701

## HackMDでデータ解析記録
研究に携わる人で、実験系の人は実験ノートをきちんと書いていると思います。が、外で観測してデータ解析をする人、モデル計算をする人が実験ノートを書いているのはみたことがありません。そういう人たちは、おそらくそれぞれのやり方で工夫しているのだと思います。データ解析では山ほど図が出てくるし、それについて考察を書き残す必要が出てきます。どういう意図でなんの作業をしたのか、を書き残しておくことはデータ解析における再現性に関わるのではないかと思います。
このための最適なツールを探していました。紙のノートでは大量に出てくる図とノートの内容をリンクさせるのがめんどくさいし、図を印刷してノートに貼るなんて作業したくありません（先輩でひとりやっている人がいましたが・・）。
僕が欲しかったのは次のようなメモアプリ。

- 図をクリップボードからペーストできる
- LaTeX形式で数式が書ける
- オンラインで(指導教員と)共有できる

これをすべて満たすのがHackMDでした。しかも無料。LaTeX形式で数式を書けるのはきれいに数式を書きたい僕にとってとてもありがたいです。

最初はEvernoteを使おうと思っていたのですが、数式が書けない。OneNoteはMac版だと印刷に難ありなのでやめました。あと、MarxicoというChoromeアプリもありますが、これはEvernoteとの同期が有料だと知ってやめました。HackMDの欠点をあげるならオフラインで作業ができないことぐらいですが、そのときはオフラインのメモ帳で代用しておけば事足りるかなと思います。手書きの図を入れたいときはノートに貼ってスマホで撮影しクラウドに上げてPCでコピペ、貼り付けでできます。
これで、Rstudioでデータ解析 -> 描いたグラフをExportでクリップボードにコピーして考察 -> URLを指導教員と共有してディスカッション
の流れが楽に作れます。
Markdown記法を知っていないといけないですが、#を重ねて見出しをつける、**で囲めば太字、くらい覚えておけばなんとかなります。どうせメモ帳ですから体裁は無理に整えなくていいと思います。
xml形式のgenbankデータから分類情報などを取り出す

# 登録配列用スクリプト

Genbankの配列情報に関するxmlからは
以下のスクリプトでtaxon情報を取り出すことができる

 ```python

import xml.etree.ElementTree as ET 

tree = ET.parse("./gene_file.xml") 
root = tree.getroot()

for child in root.findall('GBSeq'):
    accession = child.find('GBSeq_accession-version').text
    taxon = child.find('GBSeq_taxonomy').text
    for child in child.findall('GBSeq_feature-table'):
        for child in child.findall('GBFeature'):
            for child in child.findall('GBFeature_quals'):
                for child in child.findall('GBQualifier'):
                    if child.find('GBQualifier_value') is not None:
                        taxon_id = child.find('GBQualifier_value').text
                        if('taxon:' in taxon_id):
                            taxon_id_out = taxon_id
                    else:
                        taxon_id_out = ""
    out +=(accession+"\t"+taxon_id_out+ "\t"+ taxon +"\n")

with open("out10.taxon.txt", mode='w') as f:
    f.write(out)

 ```     

# なんで書いたか

flat fileからのパースがめんどくさい＋例外が置きまくるので、xmlからの読み込み、抽出に挑戦した。
Kotlinでデータクラスの空のコンストラクタを作成する方法

データクラスに10以上のパラメーターがあり、空のコンストラクタでデータクラスを初期化して、値をセットする方法が調べても出てこなかったので、メモを残しておく。

データクラスの生成方法 :

```
data class XxxData(
        var updated_on: String,
        var tags: List<String>,
        var description: String,
        var user_id: List<Int>,
        var status_id: Int,
        var title: String,
        var created_at: String,
        var data: HashMap<*, *>,
        var id: Int,
        var counts: LinkedTreeMap<*, *>,
)
```

使い方 :

```
val activity =  Activity();
activity.title = "New Computer"
sendToServer(activity)
```

こうやって、パラメータに値をセットしておくことで、空のコンストラクタを生成することができるようになる。
c# メンバ変数に一括　代入

```c#:Base.cs
class Document
{
    public string Name1 { get; set; }
    public string Name2 { get; set; }
    public string Name3 { get; set; }
    public string Name4 { get; set; }
    public string Name5 { get; set; }
 
    public int Age1 { get; set; }
    public int Age2 { get; set; }
    public int Age3 { get; set; }
    public int Age4 { get; set; }
    public int Age5 { get; set; }
}
 
class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}
```
```c#:InsertToDocument.cs
List&<Person> people = new List<Person>gt;
{
    new Person { Name = "Taro", Age = 31 },
    new Person { Name = "Hanako", Age = 33 },
    new Person { Name = "Hitoshi", Age = 17 },
    new Person { Name = "Yoshie", Age = 28 },
    new Person { Name = "Kenta", Age = 21 }
};
```


```c#:Reflection.cs
Document doc1 = new Document();
int index = 1;
foreach (var item in people)
{
    // Name[1-5]プロパティに動的にアクセスし、値を設定
    var nameProperty = typeof(Document).GetProperty("Name" + index.ToString());
    nameProperty.SetValue(doc1, item.Name);
 
    // Age[1-5]プロパティに動的にアクセスし、値を設定
    var ageProperty = typeof(Document).GetProperty("Age" + index.ToString());
    ageProperty.SetValue(doc1, item.Age);
 
    index++;
}
```
独学ではじめてAWSのEC2にデプロイする方法②（Elastic IPの作成と紐付け）

## 前回の記事
[はじめてAWSでデプロイする方法①（インスタンスの作成）](https://qiita.com/nousi/items/f0ab345402362e43db80)の続きになります。
インスタンスの作成などを知りたい場合は、この記事を参照してください。

## 今回実施していくこと
作成したEC2インスタンスには、作成時にIPアドレスが""自動""で割り振られています。
これを動的パブリックIPと言います。
しかし、""サーバーを停止・再起動させるたびにこのパブリックIPが変わってしまうという欠点""を持っています。

そのため、パブリックIDを固定して、いちいち更新しないようにします。
この固定化したパブリックIDを『　Elastic IP　』と呼びます。

今回はその欠点を改善するために、『　EC2インスンタンスとElastic IP紐付け　』をしていきましょう。


## Elastic IPの作成
EC2インスタンスのパブリックIPアドレスをElastic IPに固定する。
Elastic IPとは、AWSから割り振られた固定したパブリックIPアドレス。
このパブリックIPアドレスをEC2インスタンスに紐付けることで、インスタンスの起動、停止に関わらず常に同じIPアドレスで通信をすることが可能になります


### 手順
1. AWSのサイドナビにある、『Elastic IP』をクリック。[こちらからでも進めます](https://ap-northeast-1.console.aws.amazon.com/ec2/v2/home?region=ap-northeast-1#Home:)
[![Image from Gyazo](https://i.gyazo.com/14192ef365b0f75100cab21fd4c6b27b.gif)](https://gyazo.com/14192ef365b0f75100cab21fd4c6b27b)

2. 『　Elastic IP アドレスの割り当て　』をクリック
![スクリーンショット 2020-01-10 15.14.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455403/25d3a86c-0479-9d30-9622-a7fa24dcc48e.png)

3. 画面右下の『　割り当て　』をクリック
 ![スクリーンショット 2020-01-10 15.13.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455403/096d4f27-e969-452f-efa1-1743150d8ca9.png)

4. Elastic IPの作成完了（緑の帯に作成されたElastic IPアドレスが記載されています。）
![スクリーンショット 2020-01-10 15.18.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455403/f39e9fff-bc6a-fc1c-1fc1-cb94517902ba.png)

Elastic IPアドレスは、パブリック IPv4 アドレスの項目にも記載されています（公開するわけにはいかないので伏せています）
![スクリーンショット 2020-01-10 15.22.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455403/25b3aa0f-8995-89dc-b0d2-aff8bb7ed9c9.png)


## Elastic IPアドレスとEC2インスタンスと紐付け
ここからEC2インスタンスとElastic IPアドレスを紐付けします。
紐付けが完了すれば、EC2インスタンスのパブリックIPは、Elastic IPアドレスで固定されます

### 手順
1. Elastic IPアドレスを選択✅
2. アクション 『Elastic IPアドレスの関連付け』をクリック
![スクリーンショット 2020-01-10 15.29.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455403/5de8bfb4-78ba-7844-85d0-2bcb973f6b58.png)

3. 作成したEC2インスタンスを選択
![スクリーンショット 2020-01-10 15.33.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455403/22378916-7f34-5e9e-cb87-8c073870b19b.png)
補足：上の画像のようにインスタンスを選択すると、その下にあるプライベートIPアドレスが自動で選択されます。なのでプライベートIPアドレスは空白で大丈夫です

4.画面右下の『関連付ける』をクリック
 ![スクリーンショット 2020-01-10 15.35.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455403/769c6e2d-1640-0ccc-ca93-334ea97b8a14.png)

5.紐付け完了
 ![スクリーンショット 2020-01-10 15.38.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455403/1b0c10cd-2f92-6637-636a-1e993d1e2e10.png)

無事に関連づけられたインスタンスに『i- (EC2インスタンスID)』が表示されています


## 次は　AWS セキュリティグループの設定
みなさん、ここまでお疲れ様です。
慣れていないとここまででも大変かと思います。


立ち上げたばかりのEC2インスタンスはSSHでアクセスすることはできますが、HTTPなどの他の接続は一切つながらないようになっています。そのため、WEBサーバとして利用するEC2インスタンスは事前にHTTPがつながるように「ポート」を開放する必要があります

次回はポート解放の操作をお伝えしていきたいと思います。

長くなってきたので、次の記事で案内したいと思います。
[はじめてAWSでデプロイする方法③（AWSセキュリティグループの設定）](https://qiita.com/nousi/items/cd2d937e9faf0c0c669c)

### いいね！とフォローをして、有料級記事を見逃すな
discord.jsでBotにカスタム絵文字をランダムで発言させてみた

カスタム絵文字をBotに発言させたい場合は、
<:custom_emoji:012345678910123456>
というようにカスタム絵文字の名前と絵文字のIDの組み合わせで発言させる必要があります。

今回は他のユーザーの発言に反応して、10％の確率でBotにカスタム絵文字をランダムで発言させてみました。
![スクリーンショット 2020-01-10 15.36.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406061/1450c381-a189-6aba-6871-f1ffc8df12ea.png)
こんな感じでユーザーの発言に反応してランダムなカスタム絵文字で応答してくれます。

```JavaScript
const discord = require("discord.js");
const client = new discord.Client();

client.on("message", message => {
 
  //1〜100の乱数
  const prob = Math.floor(Math.random() * 100);
  
  //乱数の値が10以下だったら
  if (message.content && prob < 10)
    {
      //massageがBot以外の発言だったら
      if (message.author.id !== "BotのID"){
       //絵文字のIDと名前を取得して配列に格納
       var emojiID = [];
       var emojiName = [];
       message.guild.emojis.map((e, x) => emojiID.push(x));
       message.guild.emojis.map((e, x) => emojiName.push(e.name));
       //乱数を使って絵文字をランダムに選ぶ
       const arrayLength = emojiID.length - 1;
       const arrayIndex = Math.floor(Math.random() * arrayLength);
       const aEmoji = "<:" + emojiName[arrayIndex] + ":" + emojiID[arrayIndex] + ">";
       //絵文字を発言
       message.channel.send(aEmoji);
      }
    }
```

なにかあったら気軽にコメントください。
ruby学習２日目

プログラミング学習楽しいのですが、目がしょぼしょぼしてきました。
こんなに長時間PCの画面を見たことは今までなかった。。
早く慣れてrubyのプログラム魔人になりたい。


カリキュラムの進捗が思ったように進まなかったので、今回は使った用語の簡単なイメージを記すのみにします。
間違っていたら教えてください。

単語のイメージですが、

put　👉表しなさい

＝　👉関連付けよ

gets.to 👉書かれてある文字を読み込め

_i 👉整数にせよ

です。

ヒキスーに関しては　👉ちょっと何言ってるか分からなかったです。
終わり。
phpでテキストファイル内を検索し、表示する

検索はこんな簡単にできるんです！

```php:php
<style>
#form{
position: fixed;
top: 0;
z-index: 50;
}
</style>
<?php
$SPLIT = "|-|-|-|-|-|";
if (isset($_POST["keyword"])){
$keyword = $_POST["keyword"];
?>
<div id="form">
<form method="POST" action="">
<input type="text" name="keyword" placeholder="ここに検索ワードを入力" value="<?php echo $keyword ?>">
<input type="submit" value="検索">
</div>
</div>
<?php
$kekka = 0;
$data = file_get_contents("list.txt");
$data = explode( "\n", $data );
$cnt = count( $data );
for( $i=0;$i<$cnt;$i++ ){

$array = explode($SPLIT, $data[$i]);
$name = htmlspecialchars($array[0]);
$url = htmlspecialchars($array[1]);
$url = str_replace(PHP_EOL, "", $url);
$data[$i] = $name;
$echomoji = "";

if ($keyword == $data[$i]){
$kekka++;
$echomoji = <<<EOF
<br><a href="{$url}">{$data[$i]}</a>
EOF;
}
elseif ($keyword == ""){
}
else
{
if(strpos($data[$i], $keyword) !== false){
$kekka++;
$echomoji = <<<EOF
<br><a href="{$url}">{$data[$i]}</a>
EOF;
}

if(strpos($keyword, $data[$i]) !== false){
$kekka++;
$echomoji = <<<EOF
<br><a href="{$url}">{$data[$i]}</a>
EOF;
}
}

echo $echomoji;

}
if ($kekka == 0){
echo "<br><br>{$keyword}に関する結果は見つかりませんでした。";
echo "<title>結果は見つかりませんでした。</title>";
}
else
{
echo "<br><br>{$kekka}件の検索結果";
echo "<title>{$kekka}件の検索結果</title>";
}
}
else
{
?>
<div id="form">
<form method="POST" action="">
<input type="text" name="keyword" placeholder="ここに検索ワードを入力">
<input type="submit" value="検索">
</div>
</div>
<?php
}
```
こんな簡単に作れるとは思いませんでした。
まああくまで初心者が作ったプログラムなので参考程度にお願いします。
[例を作ってみました。](https://search.midokuriserver.com)
manajaroでboot時にBluetooth adapterを起動する

`/etc/bluetooth/main.conf`に以下を追加する

```
[Policy]
AutoEnable=true
```

これでログイン画面でBluetoothキーボードが使える。
でも、爆速で起動してくれないので数秒は待ち時間が発生する。

## 参考リンク

https://wiki.archlinux.org/index.php/Bluetooth#Auto_power-on_after_boot
https://forum.manjaro.org/t/bluetooth-doesnt-start-on-boot/54044/2
IoT@Loft ハンズオン #2  - Amazon FreeRTOSを用いた量産向けIoTマイコンデバイス開発プロトタイピング(2020年1月8日実施）を受講したよ

2020年1月8日　IoT@Loft ハンズオン #2- Amazon FreeRTOSを用いた量産向けIoTマイコンデバイス開発プロトタイピングが実施されました。
https://iotlofthandson2020jan.splashthat.com/

第1回AWS IoT@Loft スマートファクトリー IoT基盤構築プロトタイピングの2回目になります。
今回はSTM32を使用しAmazonFreeRTOSを触るハンズオンになります。
https://qiita.com/usashirou/items/426c2e96e7568b708ade

##使用機材：STM32L4 Discovery kit IoT node
https://www.stmcu.jp/design/hwdevelop/discovery/51734/
AmazonFreeRTOSは、STM32L4 Discovery kit IoT node用が用意されています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/852341b2-05db-7782-ad91-5002aa91ec88.png" alt="" width="600"height="" border="0" />

今回は、下記ハンズオン資料を基に進めます
https://awsj-iot-handson.s3-ap-northeast-1.amazonaws.com/Amazon_FreeRTOS_V2/st/AmazonFreeRTOS_Handson-2020.pdf

##IoT@Loftのご紹介ハンズオンで構築するサービスの概要説明
アマゾン ウェブ サービス ジャパン株式会社
飯田 起弘さん
![IMG_1179.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/55365059-cda0-bd88-5d9f-2dffd2500f36.jpeg)

##使用するハードウェアのご紹介
STマイクロエレクトロニクス株式会社
原 文雄さん
![IMG_1180.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/66fc44a2-4e52-3fde-0abf-9302a9a057f9.jpeg)

###ハンズオン
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/7d862812-31fd-5717-7cab-fcc8c374af63.jpeg" alt="" width="600"height="" border="0" />

##環境構築
###AmazonFreeRTOSのセッティング
###シャドウ
##センサーデータの可視化
###Elasticsearch Service
###Lambda


今回は、System Workbench for STM32を使用して行いました、
WiFiの混雑もありながら、多くの人が時間内に終わったようです。

AmazonFreeRTOSをセッティングし、AWSにつなぐまではAzureよりも簡単に行えていると思います。
(認証情報などが使いやすいと思います）

##注意：終わった人はElasticSearch Service の削除を必ずしてください。

AWSのサービスとマイコンボードを一元的に触ることが出来る有意義なハンズオンでした。
bitnami RedmineにBasic認証を設定する

# はじめに
bitnamiのredmineサーバー(Redmine Bitnami 認定 4.0.5)をAmazon Lightsailで利用しています。
サービスの特性上、ファイアウォールでポート制御はできるのですが、ソースIPの指定ができないため、Basic認証を設定することにしました。


## 環境
・AWSサービス：Amazon Lightsail
・イメージ：Redmine Bitnami 認定 4.0.5


## Basic認証用のユーザーの発行
まずはhtpasswdコマンドを使ってユーザーを新規に発行します。

```bash:ユーザー作成
$ sudo htpasswd -c /opt/bitnami/apache2/.htpasswd <username>
New password: 
Re-type new password: 
Adding password for user <username>
```

**オプション**
-c：パスワードファイルを新規に作成します。すでにファイルが存在する場合は上書き保存されます。


## Basic認証の設定

```bach:confのバックアップと修正
$ sudo cp -pi  /opt/bitnami/apps/redmine/conf/httpd-app.conf /opt/bitnami/apps/redmine/conf/httpd-app.conf.bk
$ sudo vim /opt/bitnami/apps/redmine/conf/httpd-app.conf
```

```conf:httpd-app.conf
<Directory "/opt/bitnami/apps/redmine/htdocs/public">
  ・・・
      AuthType Basic
      AuthName MyAuthName
      AuthUserFile "/opt/bitnami/apache2/.htpasswd"
      Require valid-user
  ・・・
  ・・・
    <IfVersion >= 2.3>
        #Require all granted
    </IfVersion>
  ・・・
</Directory>
```

まずは < Directory > 内にBasic認証の設定となる4行を追記します。
**ディレクティブ**
AuthType：認証方式
AuthName：認証領域
AuthUserFile：パスワードファイル
Require：アクセス制御についての設定

次に `Require all granted` をコメントアウトします。
(今回のredmineで使われているapacheバージョンが2.3以上のため。)

**Requireディレクティブ**
all granted：全てのアクセスを許可
valid-user：有効なユーザーの場合はアクセスを許可

apacheバージョンを確認したい場合は以下のコマンドで確認します。

```bash:apacheバージョン確認
$ httpd -v
Server version: Apache/2.4.41 (Unix)
```


### apache再起動
編集が完了したらapacheを再起動して完了です。

```bash:apache再起動
$ apachectl configtest
Syntax OK
$ sudo /opt/bitnami/ctlscript.sh restart apache
Unmonitored apache
Syntax OK
/opt/bitnami/apache2/scripts/ctl.sh : httpd stopped
Syntax OK
/opt/bitnami/apache2/scripts/ctl.sh : httpd started at port 80
Monitored apache
```

## 確認
再起動したらアクセスしてみましょう。Basic認証が表示されたら設定完了です。
![スクリーンショット 2020-01-10 15.15.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82090/c0ae6aea-f452-bb32-4532-f668b5f23e78.png)



## ユーザー追加
追加したい場合は-cオプションを外せばOKです。また、-bオプションを付けるとパスワードも一度に設定できます。

```bash:ユーザー追加
$ sudo htpasswd -b /opt/bitnami/apache2/.htpasswd <username> <password>
```

**オプション**
-b：コマンドラインからパスワードを引数として渡す際に指定します。

ただし、パスワードが見えてしまうので注意が必要です。


## おわりに
Lightsailの場合、ポートだけでしかファイアウォールの制御ができないため、redmineなどをそのまま使うことに抵抗がある人は多いと思います。
Basic認証をかけることで少しでもセキュリティリスクを減らすことができます。
Markdownで行内改行する方法

Markdownではソースコード上で改行しただけでは改行されない。

> **注意**
> QiitaではMarkdown上で改行しただけで実際に改行されるので、以下の一般的なプレビューは都合よく表示させています。
> 本来の見え方は [Gist](https://gist.github.com/lollipop-onl/0352be43bf8c9291778a6c28112a2b66) でご覧ください。

**改行されない例**

```md
１行目
２行目
```

１行目 ２行目

**改行される例**

```md
１行目

２行目
```

１行目

２行目

ただ、行内で改行したいこともある。
その場合は`<br>`タグを直接打ち込めば改行できる。

**`<br>`タグで改行する例**

```md
１行目<br>
２行目
```

１行目
２行目

これと同じことが行末にスペース２つ入れるだけで表現できる。

**行末スペースで改行する例**

```md
１行目  
２行目
```

１行目
２行目

全部同じ内容の長い行を改行したいときに便利。
災害対策アプリ

#目次
[1. 実施した場所](http://qiita.com/drafts/ca8dfa31eda26290208b/edit)
[2. ターゲット](http://qiita.com/drafts/ca8dfa31eda26290208b/edit)
[3. アプリについて](http://qiita.com/drafts/ca8dfa31eda26290208b/edit)
[4. 特徴について](http://qiita.com/drafts/ca8dfa31eda26290208b/edit)
[5. 行程について](http://qiita.com/drafts/ca8dfa31eda26290208b/edit)




#1.実施した場所
静岡県全域

#2.ターゲット
静岡県に住む方

#3.アプリについて
近年、日本での地震や台風による自然災害が増加しており、静岡県でも東海地震や南海トラフ地震がいつ起きてもおかしくないような状況になっています。私たちは話し合いをしていく中で、地震などの自然災害に対する意識をもっと高めることが必要だと考え、静岡県に住むすべての方にその被害を少しでも減らしてもらうために、そして被災前後の対応方法などを紹介するためのアプリを開発しました。





#4.特徴について
アプリの基本色を黄色にする
→黄色は注意を促す、判断力が上がる、緊張を和らげるという効果のある色

災害時は普段とは違うことが起きてパニックになって慌ててしまい、正しい判断ができなくなってしまいます。また正しい判断ができなくなること以外にも呆然として何もできないような状態になってしまうこともあります。安心させるに加えて目を引くような色を調べた時に黄色が出てきてたので、そういった災害時にも落ち着いて行動ができるようにアプリの基本色を黄色にしました。


#5.行程について
①テーマ、ターゲットを決める
詳しくは[ ３. アプリについて](http://qiita.com/drafts/ca8dfa31eda26290208b/edit)に掲載しています。
②掲載内容を考える
既存の地震についてのアプリは事前の対策について書かれているものがほとんどでした。
そこで私たちが作るアプリでは他のアプリとの違いを出すために事前の対策を記載するだけではなく事後の対策についても記載するべきなのではという考えになりました。
③アプリ内のデザイン、アイコンのデザインを決める
アプリ内のデザイン
文章の見やすさを重視し、主に使う色を1色としました。（詳しくは４．特徴について に掲載してあります）また文章だけでは上手く伝わらない所はイラストを載せて分かりやすいようにしたり、注意してほしいポイントは赤い文字で載せるなどの工夫をしました。

アイコンデザイン
![無題87_20191216105503 (1).jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554258/40769e1d-b9e8-906d-be68-f9ad821fd769.jpeg)
＜デザイナーからのコメント＞
アイコンではアプリ内のデザインと同じように黄色を使い、ふちの色をトラロープ柄にすることで、防災ということが一目でわかるようにしました。また真ん中のリュックは、対策を表しています。
④monaca を使ってプログラムの作成をする
＜プログラマーからのコメント＞
私たちが住んでいる静岡県は大きな地震がくるといわれ続けています。もし実際に起こってしまったときに対応できる人は少ないと思います。実際に災害にあってしまったら何が必要なのかを考えて可能な限り実行しました。実際にプログラムに挑戦するとエラーが多く心が折れそうでしたが友人に聞いたりＧｏｏｇｌｅで調べたりして行ってくることができました。

#その他（アプリの資料、発表資料等）
UDC(アーバンデータチャレンジ)
[提出資料](http:///docs.google.com/document/d/15ZNZ0idsPDrNAF2QDz4C8NlgO-0ow6LFGNDFolRo6rg)
マイプロジェクトアワード
[提出資料](http://docs.google.com/document/d/1qWs5EfrRJgDrCmXS9wt09Z3yh6rS4qa0fHBeEirQ9pk)
アプリのダウンロードストア
[App Store](http://www.apple.com/jp/ios/app-store/)
[Google Play Store](http://play.google.com/store?utm_source=apac_med&utm_medium=hasem&utm_content=Jan0220&utm_campaign=Evergreen&pcampaignid=MKT-DR-apac-jp-1003227-med-hasem-py-Evergreen-Jan0220-Text_Search_BKWS-BKWS%7cONSEM_kwid_43700049000666922_creativeid_207098315445_device_c_kwd_kwd-34087548205_geoid_1009441_network_g&gclid=EAIaIQobChMI18z29K745gIVhXZgCh0ynw9bEAAYASAAEgLlX_D_BwE&gclsrc=aw.ds)

アプリ紹介スライド
後日掲載
SpringBootやってみる~準備編~

## 記事作成の目的
SpringBootをつかってアプリケーションを作成する！
アプリケーション作成を通して理解を深めていくが目的！
そんなことがテーマになっていく予定...

## SpringBootとは？
Javaフレームワークのひとつ
Spring Frameworkベースのアプリケーションを手軽に作成することができる

###### 特徴
・XML設定ファイルの記述が不要
　　設定を外部化することができ、必要最低限の設定を行うだけでアプリケーションの起動・実行が可能
・コーディング量の削減
　　アノテーションを記述することにより機能を実装することが可能なため、コーディング量の削減が可能
・Webコンテナを内含
　　Tomcatをjar(Java ARchive)ファイルに含めることが可能で、jarファイル単体でWebアプリケーションの作成が可能

## インストール
各種インストールはリンク先の記事を参照

・Eclipse 
　　[Eclipseのインストール](https://qiita.com/nenimigi/items/48fcf6f4c9408820266d)
・SpringBoot 
　　[SpringBootのインストール](https://qiita.com/shottotto/items/a770db0ed71dc7c5c744) 

## 環境
| 環境 | バージョン |
|:-:|:-:|
| 実行環境  | Windows7  |
| Java  | Java 8  |
| Eclipse  | 20180917-1800  |
| SpringBoot  | 3.9.9  |

## プロジェクトの作成
サンプルプロジェクトをつくってみる

１．「パッケージエクスプローラ」内右クリック→「新規」→「その他」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530028/550bb90f-ce4b-6904-6b2c-dc40bceb6e3a.png)

２．「SpringBoot」→「Spring スターター・プロジェクト」→「次へ」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530028/1c4daa2a-d8a5-2c46-7456-97577a06fe4a.png)

３．プロジェクト名を設定して設定→「次へ」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530028/499e67c7-5e3b-022e-e035-566743967430.png)

４．依存関係の設定→「完了」
※デフォルト設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530028/1cec9d6d-759d-f4ce-0f8b-02bc13e9eccb.png)

５．ビューとコントローラを配置

配置位置は画像参照
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530028/28a131a8-2897-2554-65dc-c0939552df34.png)



```java:hello.java
package com.example;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class SampleController {
    @RequestMapping("/index")
    public String index() {
        return "index";
    }
}
```

```html:index.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>サンプルだよ～(o・∇・o)</title>
	</head>
	<body>
		Hello World!!
	</body>
</html>
```

## プロジェクトの実行

「実行」→「実行構成」→「Spring Boot アプリケーション」から新規構成
「名前」「プロジェクト」「メイン型」に作成したPJを設定して実行
ブラウザから「http://localhost:8080/index」にアクセス
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530028/bf773970-f41b-6fed-a83b-7c89877c603a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530028/d775bf04-0aa2-ffd7-f645-dc7279cf0f71.png)


## 次回予告
アプリケーションをつくっていく予定！！！！！(予定)
##2020/04/10追記
[SpringBootやってみる～DBアクセス(mybatis)編～](https://qiita.com/y_ogawa_naaaa/items/26da3b019f090abcfe36)

## 参考

Spring Bootについて
https://eng-entrance.com/java-springboot

各種インストール
https://qiita.com/nenimigi/items/48fcf6f4c9408820266d
https://qiita.com/shottotto/items/a770db0ed71dc7c5c744