OmniAICreator/Qiita-1.07M huggingface dataset:
Qiitaに毎日2年間投稿した話

# 目的

- Qiitaに毎日記事を投稿して2年が経ったので今までの振り返りと今後どうするかまとめます

# どうして毎日投稿しようと思ったのか（覚えている範囲で書きます）

- 今までの自分の人生でなにかを継続して達成した経験がなかったたから
- 自分はすぐ忘れてしまうのでどこかに残しておきたかったから
- 後で客観的に振り替えれる自分の奇跡がほしかったから
- 自分と同じ内容で詰まっている人は全世界に少しは居るはずなので、誰かの力になりたかったから

# 得られたこと

- 自分で書いた投稿で最も恩恵を受けられたのは自分だった。
    - 大体一回自分が詰まったことは半年後位にまた詰まったりします。「〇〇で詰まった時の解決策は自分でQiitaに記事にしている」というインデックスさえ記憶していればすぐに解決できました。
- 自分の過去の記事と一字一句同じ記事を記載することはNGだと思う。しかし、違う時期に同じ内容のことをその時の知識、言葉で記事にすることは価値がある。
    - たとえは一つのLinuxコマンドを紹介する10行に満たない記事でも、2年前と今では記載方法が違います。
    - 初学者の頃（今も全然初学者ですが）の記事は、一般的な用語もわからずとにかく自分の言葉で記事を書いていました。
    - より読みやすい、より伝わりやすい、そして、より自分が書きやすい記事にするにはどうするかという工夫がひと目で分かります。
    - 記事が多くなると自分の記事を探す時に検索を使って「自分のユーザー名 〇〇 解決法」など検索します。そうすると自分が記載した同じ内容の時期が違う記事がいくつかヒットします。問題と解決は一緒でも解決プロセスが違い非常に学びに繋がりました。
- 毎日投稿を2年間は流石にやりすぎた
    - 1年半位経過したところから異常なまでのモチベーションの低下がありました。
    - 「どうして毎日投稿しようと思ったのか」の内容を見失い、途中から「投稿すること自体が目標」に変わってしまいました。
    - 最後の最後で完全にバテてしまい、フラフラになりながら最後の一ヶ月なんとか完走した状態でした。
    - 今記載しているのこ記事も完全に燃え尽きた状態で記載しております。
- 実務でのドキュメント作成作業に一切抵抗がなくなった。
    - 自分の考えを文字にしてまとめることに慣れたのか、もともとそこまで抵抗のなかったドキュメント系の作業が大好きになりました。
- 毎日投稿は1年を目処に区切りをつけたほうがいいかも
    - 正直なことを言うと毎日投稿1年目から2年目の学びが少なかったです。
    - モチベーションの維持も1年目より2年目のほうが大変でした。

# 今後どうするのか

- 定期的な投稿は継続するが頻度を下げます。
    - 今まで毎日投稿でしたが週イチ投稿まで頻度を下げる予定です。
    - 質の低い記事をたくさん投稿するより、ちょっと質の良いわかりやすい記事投稿にシフトしようと思います。
【Cloudool】無料で見積書を作成する方法！

## 無料で見積書を作成する方法！
Cloudoolのデモを利用して、簡単に見積書や請求書を作成する方法をご紹介します。

## デモ利用について
登録なしで無料で誰でも利用できます。
利用方法について説明します。

### 1. Webサイトにアクセスする
https://cloudool.com/

### 2. 登録なしではじめる
トップ画面の「登録なしではじめる」をクリックしましょう。

|![スクリーンショット 2021-07-09 15.39.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1700738/ac425fcc-50ce-3d26-930e-1592fe1cf892.png)|
|:--|

### 3. 請求者情報の入力
請求者情報を入力してみましょう。
入力が完了したら、「請求先情報入力へ進む」をクリックします。

|![cloudool.com_demos_claimant (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1700738/024909e3-be47-d943-f259-bfe238b8b56a.png)|
|:--|

### 4. 請求先情報の入力
請求先の情報を入力してみましょう。
顧客種別に合わせて、顧客名は個人名または会社名を入力してください。
入力が完了したら、「見積情報入力へ進む」をクリックします。

|![cloudool.com_demos_customer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1700738/bde7a5ca-506b-0383-d169-b444cf251b20.png)|
|:--|

### 5. 見積情報の入力
見積情報を入力してみましょう。
入力が完了したら、出力したい書類(見積書、注文書、納品書、請求書)に合わせて「〇〇を作成」をクリックします。
お使いのPCにPDF形式でダウンロードされます。

|![cloudool.com_demos_estimate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1700738/a75902d6-5eb6-32af-484f-95cc0bf5fd43.png)|
|:--|

## デモ成果物

### 見積書

|![スクリーンショット 2021-07-09 16.22.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1700738/3361dc3d-f2f9-4f2d-3fed-f4c52a62c780.png)|
|:--|


### 注文書
|![スクリーンショット 2021-07-09 16.23.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1700738/945e1a4b-ce82-660f-b1e0-b80436966599.png)|
|:--|

### 納品書
|![スクリーンショット 2021-07-09 16.24.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1700738/563c5feb-ca00-1868-cac3-081e5b938048.png)|
|:--|

### 請求書
|![スクリーンショット 2021-07-09 16.24.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1700738/f55ce6b3-9547-0942-3db8-ab86cbf451ab.png)|
|:--|
PostgreSQLにコメントを設定する

当記事はPostgreSQLの`DATABASE`、`TABLE`、`COLUMN`にコメントを付ける方法を記載します。

例えば、下記のようなテーブル名があったとします。
<pre>t_order_detail
</pre>

上記のテーブルをA5M2などサードパーティ製のツールでDBを見た時に日本語名が分かりずらいですよね？
そんな時はコメントを付けると、サードパーティ製ツールで物理名称(英字)と論理名称(日本語）が両方表示されて見やすくなります。

この記事は、その方法について謡っています。



# データベースに日本語名称を付与
下記のSQLを実行します。
<pre>COMMENT ON DATABASE 英字データベース名 IS '日本語データベース名';
</pre>

# テーブルに日本語名称を付与
下記のSQLを実行します。
<pre>COMMENT ON TABLE 英字テーブル名 IS '日本語テーブル名';
</pre>

# カラムに日本語名称を付与
下記のSQLを実行します。
<pre>COMMENT ON COLUMN 英字テーブル名.英字カラム名 IS '日本語カラム名';
</pre>

---
ちなみに
コメントを削除する際は、下記を参考にしてください。
上記で`日本語名称`だった部分を`IS NULL`にするとＯＫです。

<pre>COMMENT ON COLUMN 英字テーブル名.英字カラム名 IS NULL;</pre>


以上です。
SwiftUIを使って学習がてらタイマーアプリを作ってみよう7

#SwiftUIを使って学習がてらタイマーアプリを作ってみよう　Part7

###前置き　
前回投稿した[Part6](https://qiita.com/scream_episode/items/33586875cf609a884184)の続きです。
今回のゴールとしては下記の処理の実装とします。
1.アプリがバックグランドにいる状態でも音がなり続けるようにする

次回はSwiftUIでUIKit(UIPageViewController)を使う[part](https://qiita.com/scream_episode/items/fb928f114de7a857b480)です。

###開発環境
Mac (OS Big Sur version:11.3.1)
Xcode (version:12.5)
Swift (version: 5.4) 
対象IOS（version:14.5以上）

###AVAudioPlayerをバックグランドに対応させる
参考元の[記事](https://i-app-tec.com/ios/background-fetch.html)をもとに実装
やっていることは二つだけで簡単にできた
・１.TargetsのSigning&Capabilitiesの[Background Modes]でAudio,AirPlay,and Picture in Pictureにチェックを入れる
・２.AppDelegateを作成してapplication(_ application:UIApplication, didFinishLaunchingWithOptions)内で
AVAudioSessionの設定を行うことでバックグランドでも音楽ファイルを再生できるようになる

```AppDelegate.swift
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
        let session = AVAudioSession.sharedInstance()
        do {
            try session.setCategory(.playback, mode: .default)
        } catch {
            fatalError("Cateogry設定失敗")
        }
        
        do {
            try session.setActive(true)
        } catch {
            fatalError("Session失敗")
        }
        
        return true
    }

```

AVAudioSessionに関して[深掘りしてるサイト](https://blog.meteor.ne.jp/2019/12/avaudiosession)
があったんで一部を記載。
もっと詳しいのは[Appleのドキュメント](https://developer.apple.com/documentation/avfaudio/avaudiosession)を見るべし
Categoryの説明

| name | 説明 |
|-|-|
| ambient| 他のアプリで音を流していても再生が止まらない　<br>スクリーンロックやサイレント状態にしていると音が聞こえなくなる|
| playback| 設定されているアプリが起動すると他のアプリのサウンド再生が止まる。<br>サイレント状態だろうがスクリーンロックされていようが再生が継続される|
| record| 録音しかできない<br>権限の設定が必要|
| playAndRecord|録音と再生ができるのでVoIPに使われる事が多い<br>他のアプリで再生しながら録音するときはAVAudioSessionCategoryOptionMixWithOthersを使う必要がある |
| multiRoute| 複数の出力デバイスで再生する時に使う|

Modeの説明

| name | 説明 |
|-|-|
| voiceChat/videoChat | Voice Processing I/O を使うようになるので、ノイズキャンセリングが有効になる |
| measurement | DSP等が無効化されて信号処理がやりやすくなる（みたい）|
| moviePlayback | 端末のスピーカでステレオ再生が強化されるみたい。主に動画再生時に使う。 |
| spokenAudio | 他の音声の割り込みがあったときに、中断再開が出来る模様 |

---
###参考・引用元
・[[iPhone] Background バックグランド処理](https://i-app-tec.com/ios/background-fetch.html)
・[AVAudioSessionの深い話](https://blog.meteor.ne.jp/2019/12/avaudiosession)
・[AppleDeveloper > Documentation > AVFAudio > AVAudioSession](https://developer.apple.com/documentation/avfaudio/avaudiosession)

###シリーズ：「SwiftUIの学習でタイマーアプリを作ってみよう」のリンク
[part1:プロジェクトの作成とGitHubに登録](https://qiita.com/scream_episode/items/f8bfcba4c65c3b758db8)
[part2: Timerを利用したカウント処理の実装](https://qiita.com/scream_episode/items/8d42198698fcf7513b54)
[part3:計測画面でのプログレスバーの実装](https://qiita.com/scream_episode/items/b899fa41728fc4eed590)
[part4:スピナー実装](https://qiita.com/scream_episode/items/7bb249ee55140424829b)
[part5:ライブラリから音楽を選択して再生](https://qiita.com/scream_episode/items/5e60b85fec58ebf50e2f)
[part6:タイマー処理のバックグランド対応](https://qiita.com/scream_episode/items/33586875cf609a884184)
part7:音楽のバックグランド再生対応　← 今ここ
[part8:PageViewを作成](https://qiita.com/scream_episode/items/fb928f114de7a857b480)
[part9:PageViewのインジゲータを作成](https://qiita.com/scream_episode/items/7950d45a17f8f53b4094)
iOSのクラッシュログ解析 簡易手順

まず最初にこれ

```
export DEVELOPER_DIR="/Applications/Xcode.app/Contents/Developer"
```

次にこれ

```
/Applications/Xcode.app/Contents/SharedFrameworks/DVTFoundation.framework/Versions/A/Resources/symbolicatecrash -d <path_to_dsym> -o <output file> <path_to_crash_report>
```
ファイルパスを””(ダブルクオーテーション)で囲ってはいけない
JIRAチケット全件のメタ情報を取り出す


```Python
#!/usr/bin/env python3

from jira import JIRA
import json
import os
import sys
import pandas as pd

user = 'ykishi@ohmygod.com'
server = 'https://ohmygod-support.atlassian.net'
csv_filename = "./all_the_JIRA_tickets.csv"

try:
  apikey = os.getenv('JIRA_API_TOKEN')
except KeyError as err:
  print('Environment variable not found:', err)
  sys.exit()

options = {
    'server': server
}

# ===========================================================
# 空のdataframeを作成
# ===========================================================
colnames = ["Ticket#", "Status", "Created"]
df = pd.DataFrame([], columns=colnames)

jira = JIRA(options, basic_auth=(user, apikey))

size = 100
initial = 0
while True:
  start = initial*size

  issues = jira.search_issues('project=ESD', start, size)

  if len(issues) == 0:
    break

  initial += 1

# ------------------------------------------------------------------------------
# これをpandasのDateframeにセットして、最終的にはJSONあるいはCSVで出力する
# ------------------------------------------------------------------------------
  for issue in issues:
    print("-----------------------------------------------------------------------------------------")
    print('Ticket#:', issue)
    print('Status:', issue.fields.status.name)
    print('Created:', issue.fields.created)
    print('Summary:', issue.fields.summary)
    print('IssueType:', issue.fields.issuetype.name)
    print('Creator:',  issue.fields.creator)
    print('Reporter:',  issue.fields.reporter)
    print('Assignee:',  issue.fields.assignee)
    print('Updated:', issue.fields.updated)
    print('Resolution:', issue.fields.resolution)
    print('ResolutionDate:', issue.fields.resolutiondate)
    print('Priority:',  issue.fields.priority)

    # print( issue.fields.project)
    # print(type(issue.fields))
    # print(vars(issue.fields))

    print('')

    temp = pd.Series([
        issue,
        issue.fields.status.name,
        issue.fields.created
    ],
        index=df.columns)

    print(temp)

    df = df.append(temp, ignore_index=True)

# ---------------------------------
# Output into a CSV file
# ---------------------------------
print(df)
df.to_csv(csv_filename)
ykishi@dezembro issues-18 % 
```
Webサイトのパフォーマンス改善がもたらした事例をまとめてみた

# はじめに
パフォーマンスが事業に影響を与えるという話はよく聞くが、実際にどんな事例があるのだろうかと思ったので調べてみました。
他にも多く事例があると思うので、他にもあったらコメントいただけると嬉しいです。

# 事例
## 日経新聞

PWAをもとにパフォーマンス改善をした例

https://developers.google.com/web/showcase/2018/nikkei?hl=ja

### Before

- LighthouseのPerformanceスコアが23点
- ユーザーが操作可能になるまで（TTI）が悪いときだと20秒
- Speed Indexは平均10秒

### After

- LighthouseのPerformanceスコアが82点
- TTIが14秒向上
- Speed Indexが2倍向上

### ビジネスインパクト
- オーガニック流入（検索流入）が**2.3倍に増加**
- 会員登録のコンバージョン率が**58%増加**
- 1日のアクティブユーザーが**49%増加**
- セッションあたりのPV数（回遊数）が**2倍に増加**

## Yahoo!

Core Web Vitalsをもとにパフォーマンス改善をした例

https://techblog.yahoo.co.jp/entry/2020120330052925/

### Before

- Core Web VitalsのCLSが0.2
    - CLS: レイアウトのズレ、崩れの指標。0.1以下にすると良いと言われている。

### After

- Core Web VitalsのCLSが0

### ビジネスインパクト

- セッションあたりのPV数が**15.1%増加**
- セッションあたりの滞在時間が**13.3%増加**
- 直帰率が1.72ポイント改善
    - この指標がどのようなものなのかは不明

## サイバーエージェント

Yahoo!と同様に、Core Web Vitalsをもとにパフォーマンス改善をした例

https://developers.cyberagent.co.jp/blog/archives/30577/

### Before

- Core Web VitalsのCLSが0.5

### After

- Core Web VitalsのCLSが0.09

### ビジネスインパクト

- Amebaマンガにおけるユーザーのマンガ閲覧数が**3倍増加**

# その他

ビジネスインパクトがあったかは不明だが、パフォーマンス改善に関する記事は以下。

https://recruit-tech.co.jp/blog/2020/08/07/suumo_performance_improvement/
【Flutter : SharedPrefences】モバイル端末にデータを保存・取得する方法

# SharedPrefences
モバイル端末にデータを保存・取得するには、「SharedPrefences」を使用します。
まずは、プロジェクトにインストール
最新版は、こちらから　[SharedPrefences](https://pub.dev/packages/shared_preferences/example)

```yaml:pubsepc.yaml
dependencies:
 flutter:
  sdk: flutter
 //以下を追加
 shared_preferences: ^2.0.6
```

## set
- [キーの名前]をキーにして、データを保存
```dart
SharedPreferences prefs = await SharedPreferences.getInstance();
int counter = 1;
await prefs.setInt('[キーの名前]', counter);
```

## get
-[キーの名前]からデータを取得
-[キーの名前]にデータが保存されていなかったら、??の後ろを代入

```dart
SharedPreferences prefs = await SharedPreferences.getInstance();
counter = prefs.getInt('[キーの名前]') ?? 0
```

## 型ごとの取得と保存
| 型 | Int | Double | String | bool | List |
| ---- | ---- | ---- | ---- | ---- | ---- |
| 取得| getInt | getDouble | getString | getBool | getList |
| 保存  | setInt | setDouble |setString |setBool |setList |
SpringBootからDockerHubのMySQLに接続する設定

2021/7/7時点での情報です。
#はじめに
docker-hubのmysqlをローカルで使用して結合テストしようとしてハマりました。

#環境
■ Spring Boot
 
Windows10
Spring Boot v2.3.5.RELEASE
mysql-connector-java 8.0.22

■MySQL
ubuntu 20.04
docker v20.10.7
docker-hub MySQL 8.0.25

#結論
こうすれば繋がりました。

```application.yml
# local docker setting
  datasource:
    url: jdbc:mysql://localhost:3306/test_todo?useLegacyDatetimeCode=false&serverTimezone=Asia/Tokyo
    driverClassName: com.mysql.cj.jdbc.Driver
    username: <ユーザー名>
    password: <パスワード>

```

TimeZoneの設定が必要だったみたいです。

#確認ポイント
mysql-connector-java のバージョンによって

* Spring Bootとの相性
* Spring Bootの設定ファイル(application.yml)の書き方

が違います。

* Spring Boot(gradle)との相性

gradleを使用してライブラリを管理していると
mysql-connector-java 8.0.22がデフォルトでした。

mysql-connector-java 8.0.25に変えると
*java.time.LocalDateTime cannot be cast to java.sql.Timestamp*
のエラーが出てSpring Bootが起動できませんでした。
(コンパイルは通っていたのでmysql-connector-java 8.0.25との相性に問題があるのでは...)

* Spring Bootの設定ファイル(application.yml)の書き方

mysql-connector-javaのバージョンが
8.0.22以前はTimeZoneの設定をapplication.ymlに記載する必要が有りますが、
8.0.23以降はTimeZoneの設定をapplication.ymlに記載する必要が無いです。
[mysql-connector-java 8.0.23] (https://dev.mysql.com/doc/relnotes/connector-j/8.0/en/news-8-0-23.html)
ユークリッドの互除法の実装【Rubyアルゴリズム】

# 環境
```ruby 3.0.0
```

# ユークリッドの互除法とは
- 提示された任意の2数a,bの最大公約数を求めるアルゴリズム
- 2つの数を比較し,大きい数から小さい数を引く…という処理を繰り返して、2つの数が等しくなったとき、その数はa,bの最大公約数になる
- 明示的に記述された最古のアルゴリズム
- 紀元前300年頃に記されたユークリッドの『原論』第 7 巻,命題 1 から3に記されている

# アルゴリズム
- 任意の2数a,bを指定する
- a,bを比較する
- a,bのうち,大きい数から小さい数を引いた値を大きい数が格納された変数に代入する
    - a > b の場合,a = a-b
- 上記の比較を繰り返し、a = bになったとき、a(もしくはb)に格納された数値を最大公約数として出力する

# コード
```ruby:euclid.rb
#ユークリッドの互除法
def euclid(a,b)
  while a != b
    if a > b
      a = a - b
    else
      b = b - a
    end
  end
  return a
end

```

# 参考文献

アルゴリズムはじめの一歩完全攻略 / 矢沢久雄著. -- 東京 : 技術評論社 , 2019.2. -- 287p ; 23cm. -- (新・標準プログラマーズライブラリ). -- JavaとC言語のサンプルコードのダウンロードサービス付き. -- ISBN 9784297103941 ; (BB27793887) ; https://ci.nii.ac.jp/ncid/BB27793887
著者標目: 矢沢, 久雄. -- 分類: NDC8 : 007.64 ; NDC9 : 007.64 ; NDC10 : 007.64. -- 件名: BSH : プログラミング(コンピュータ) ; BSH : アルゴリズム
AWSでAIサービスを使ってみる〜第1回導入編〜

##はじめに
AWSのAIサービスってどんなものがあるのだろうかと気になったため調べてみました。
何回かにわたってAIサービスを紹介します。

今回はAWSのAIサービスを利用するための導入です。
MacOSで紹介します。
まずターミナルで必要なソフトをインストールします。

##pythonのインストール
[MacにPython開発環境をインストールする](https://qiita.com/U-MA/items/996ae933ae94c5711883)


##AWS CLIのインストール

```
pip3 install awscli --upgrade
```
Successful installed...が表示されればインストール完了



##AWS CLIのインストール確認

```
aws --version
```
AWS CLIのバージョンが確認できれば成功



##アクセスキーの設定
```
aws configure
```
IAMユーザーを作成された際にメモした、AWSアクセスキーID、AWSシークレットアクセスキー、デフォルトリージョンを入力

Default region name[None]:(デフォルトの出力形式)はjsonと入力し、エラーメッセージが表示されず終了したらアクセスキーの設定は完了。


##boto3(python用AWS SDK)のインストール
```
pip3 install boto3 --upgrade
```
Successful installed...が表示されればインストール完了



##boto3の動作確認
```
python3 -c "import boto3"
```
エラーメッセージの表示がなければ動作確認も成功です。

##参考文献

この記事は以下の情報を参考にして執筆しました。

[MacにPython開発環境をインストールする](https://qiita.com/U-MA/items/996ae933ae94c5711883)
[AWSで作るAIプログラミング入門](https://www.amazon.co.jp/AWS%E3%81%A7%E3%81%A4%E3%81%8F%E3%82%8B-AI%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%85%A5%E9%96%80-%E6%9D%BE%E6%B5%A6-%E5%81%A5%E4%B8%80%E9%83%8E/dp/4798059056)
jsPsychのテキストボックスで数字のみ入力を許可する

jsPsychのテキスト（インプット）ボックス、プラグインとしては、[jspsych-survey-text](https://www.jspsych.org/plugins/jspsych-survey-text/) は初期状態では半角全角、文字列、数字などなんでも入力することが可能です。例えば年齢を回答してもらいたいとき、このままだとちょっと困りますよね。ここで紹介する方法がベストかどうかは分かりませんが、一応数字のみを入力させるように変更できましたのでシェアしておきます。

ここでは、jsPsychのexamplesに入っている jspsych-survey-text.html を使用して解説します。まずはChromeを使ってデモプログラムを動かしてみてください。

年齢をたずねられている以下の画面で「aa」という不適切な回答を行うことが可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495823/7c9bbe69-dd52-b0da-3bdd-e465881ee11d.png)

この記事の目標は、半角数値のみを入力OKとすることです。

ではまず、メニューから「その他のツール」→「デベロッパーツール」を開きます。Windowsであれば、Ctrl + Shift + I キーでも開きます。デベロッパーツールが開いたらElementsを開いて、年齢をたずねているテキストボックスを見つけ出します。初めてだと難しいと思いますが、Elementを選択するとテキストボックスなどが表示されている画面の色が変わります。つまり、自分がいま、どのElementを参照しているのかが分かるようになっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495823/6f4fd53c-18a6-daba-6e27-a5bdd5a887d2.png)

で、おそらく年齢を入力するテキストボックスのidが input-0 となっていると思います。（id 情報は jsPsychのバージョンアップなどの際に変わる恐れがありますので注意してください）重要なことは、年齢を入力するテキストボックスの id を知るということです。

id が分かったら、次のようにjspsych-survey-text.html を変更します。

```javascript
  var survey_page1 = {
    type: 'survey-text',
    questions: [
      {prompt: 'How old are you?', columns: 3, required: true, name: 'Age'},
      {prompt: 'Where were you born?', placeholder: 'City, State/Province, Country', columns: 50, name: 'BirthLocation'}
    ],
    randomize_question_order: true,
    on_load: function(trial){
       var element = document.getElementById('input-0')
       element.type = 'number'
       element.step = 'any' // これを指定しないと小数の入力ができない。整数のみのときはこの行は不要。
    }
  };
```

ポイントは [on_load 関数](https://www.jspsych.org/overview/callbacks/#on_load)内で [getElementById](https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById) を使ってテキストボックスの情報を取得して、[typeをnumber](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/number)に書き換えている点です。

ただし、「input type number」などで検索すると、いろんな注意点があることも分かります。スマートフォンなどでは表示されるキーパッドにも影響が出るようです。[HTML5で追加された input[type=number] を使う上での注意](https://qiita.com/myzkyy/items/5630c32097aa68315cc5)の記事が分かりやすいので、ぜひご参照ください。
Goに関する参考記事

## GORM

### [GORM](https://gorm.io/docs/index.html)
- golangでよく使われるORM
- Docsは英語だと検索が使えるのが良い。作者は中国杭州の方。

### [GORM で 1:N で Join したカラムの値を取得する](https://qiita.com/zaneli@github/items/f22d57862d780a2a6ca9)
- joinなどを書く時
- Preload("<構造体の名前を書く>")を書く、これを見逃し随分ハマった


## Time

### [Go1.15改訂版、Go言語アプリのDockerイメージをscratchから作る](https://qiita.com/nejinejio/items/1bd5a07fe4060f98cc33)

- コンテナ内のLogの時間がJSTにならない時
- usr/share/zoneinfoがない場合
- time.Now().In(JST)で"unknown time zone"がでる
- 解決はgo build する時にオプションで"-tags timetzdata"をつける

## Error

### [Go 1.13時代のエラー実装者のお作法](https://qiita.com/shibukawa/items/e633e426a6e67ea2e830)

- errorはunwrapして使う
- unwrapすると詳細を取り出せる
- 比較はerrors.Is()が使える

## Linter

### [【Go】デファクトなlinter staticcheckの設定方法](https://qiita.com/yagi_eng/items/1c34f9691128c51846e7)

- staticcheck
- 標準パッケージだったgolintとは別のもの(開発が凍結)
- 2021/03/11のアップデートで標準linterがstaticcheckに変更
- VSCodeのGo Extensionをインストールすれば、特にインストールは不要
- 変更がなければ、そのままでOK

## format 覚えられん

### [fmt - The Go Programming Language](https://golang.org/pkg/fmt/)

- fmt.printf()で使う
- string %s
- number %d
- bool %t
- error %w
Unityのゲーム実行中にHTTP POSTでNode-REDに任意の値を送信する

#■この記事でやりたいこと
Unityで作られたゲームの実行内容に応じた任意の値をリアルタイムでNode-REDに送信したい。

#■参考記事
●フローにフォームデータをPOST
<https://cookbook.nodered.jp/http/post-form-data-to-a-flow>>

●HTTPサーバーにフォームを送信(POST)
<<https://docs.unity3d.com/ja/2018.4/Manual/UnityWebRequest-SendingForm.html>>

●今日からはじめるUnity
<<https://qiita.com/nmxi/items/7950fb12ef925efa276d>>

#■結論
Node-RED及びUnityで、以下の作業を行うと実現出来る。

●Node-RED側
「http-in」ノードの、メソッドをPOST、URLに任意の文字列を入力してデプロイする。

●Unity側
以下の2文を送信したいトリガーの箇所に追加する。
(任意の文字列は、Node-RED側のURLで入力した任意の文字列のこと。)

```c#
UnityWebRequest www = UnityWebRequest.Post("http://localhost:1880/任意の文字列","送信したい任意の値");
www.SendWebRequest();
```

#■詳細

##Node-RED側で、「http in」ノードを配置する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1706073/5339f67e-0fac-f60d-f1f0-4d6129693e83.png)


●「http in」ノードの設定例
・メソッドはPOSTを指定する
・URLに任意の文字列を入力する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1706073/ec80e971-bcfb-8ef3-d723-65a8a443bfc2.png)


##Unity側で、ゲームとトリガーを作成する。
今回は、任意のgameObjectへの当たり判定をトリガーとします。
ゲーム性を追加するため、当たり判定発生時に消滅するようにします。

スクリプトに以下のコードを追加します。

```c#
    private void OnCollisionEnter(Collision collision) {//当たり判定発生時に呼び出されるイベント関数
        Destroy(gameObject);//gameobjectの消滅
        UnityWebRequest www = UnityWebRequest.Post("http://localhost:1880/unity-test","BREAK!!");// UnityWebRequestの作成
        www.SendWebRequest();//作成したUnityWebRequestを使用してhttp POSTを行う。
```

##実行してみる
上記のスクリプトをアタッチしたgameObjectへ当たり判定が発生した時に、
Unity側のgameObjectが消滅して、Node-RED側のデバックコンソールに任意の文字列が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1706073/a28170b1-485e-f4bd-e87e-702c6dbf7fdd.png)
AWS CLIコマンドがCRON実行されない

こちらの記事の二番煎じみたいな感じですが、もう１点補足があったので。
https://qiita.com/nakamto/items/a2073b081e5c26532bd3

# 気をつけよう、環境変数とpathと暗い道。
AWS cliをcronから実行する時は環境変数、pathに気をつけよう。

```bash
#!/bin/bash
aws s3 cp ファイル名 s3://hogehoge/ >> /tmp/test.log
```

/tmp/test.logに何も出力されていない場合は連携されていません。

こんな感じで書き直そう。

```bash
#!/bin/bash
export AWS_SHARED_CREDENTIALS_FILE=~/.aws/credentials
/usr/local/bin/aws s3 cp ファイル名 s3://hogehoge/ >> /tmp/test.log
```

exportで、credentialファイルの場所を環境変数に入れています。
そして、awsコマンドをフルパスで指定しましょう。

すると/tmp/test.logには

```
upload: ./XXX.csv to s3://hogehoge/XXX.csv
```
みたいなログが出ていました。
めでたしめでたし。
ターミナルコマンド（ディレクトリ位置の移動と必要判断）

私自身初心者なので、
ターミナルを使用してのインストールの際、
”このディレクトリでダウンロードしていいのか？　”とても迷ってしまった。

コマンド中に「ホームディレクトリに移動してから実行すること」が記載してあることを教えてもらってから、
その迷いが消えたので記録として残しました。
（また、コマンドをメモとしてリストにしました）

### ターミナル入力の際、ディレクトリの移動が必要か分からない、、、


使用するコマンドをチェック
''ホームディレクトリ「`~/`」に移動してから実行されるコマンドの場合は不要''

```$ touch ~/.ファイル名```　(不要)
```$ touch ファイル名```　(必要)

（どこで実行するか不安な場合はホームディレクトリで実行）

--------------------------------------------------------------
### ターミナル ファイル関係 コマンドメモ
|コマンド|内容|
|:---|:---|
|`% cd`|ホームディレクトリへ移動|
|`% ls`| ファイル内容確認|
|`% ls -la`| ファイル内容確認（.隠しファイル含）|
|`% cd #1/#2/#3 `|ルート辿って#3に移動|
|`% cd -`|前の場所に戻る(深く潜って間違えたとき便利)|
|`% pwd`|カレントディレクトリ表示|
|`% cd ..`|1つ上に移動|
|`% cd ../../`|2つ上に移動|

cdの後のディレクトリを選ぶ際[tab]を押すとリストが出てくるので便利

_毎回自分の現在位置を確認する癖をつける_
C# Excelをイメージに変換

<p><strong>Spire.XLSという無料のライブラリを活用して、エクセルファイルをJPEG、PNG、 BMP、 WMF、EMF 及びTIFFに変換できます。閑話休題、今回はちょっとやってあげましょう。</strong></p>
<h4><strong>下準備</strong></h4>
<p><strong>1.E-iceblueの公式サイトから<a href="https://www.e-iceblue.com/Download/download-excel-for-net-free.html">Free Spire.XLS</a>無料版をダウンロードしてください。</strong></p>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210707/20210707122528.png" alt="f:id:lendoris:20210707122528p:plain" width="523" height="249" loading="lazy" title="" class="hatena-fotolife" itemprop="image" /></p>
<p><strong> </strong><strong>2.Visual Studioを起動して新規プロジェクトを作成してから、インストールされたファイルにあった相応しいSpire.XLS.dllを参照に追加してください。</strong></p>
<p><strong>（Net 4.0を例としたら、デフォルトパスは“Bin→NET4.0→XLS.dll”というようです。）</strong></p>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210707/20210707122543.png" alt="f:id:lendoris:20210707122543p:plain" width="297" height="223" loading="lazy" title="" class="hatena-fotolife" itemprop="image" /></p>
```C#
using System.Drawing.Imaging;
using Spire.Xls;

namespace ConsoleApp3
{
    class Program
    {
        static void Main(string[] args)
        {
            //workbookオブジェクトを作成します。
            Workbook workbook = new Workbook();

            //Excelをロードします。
            workbook.LoadFromFile("Sample.xlsx");

            //シートを取得します。
            Worksheet sheet = workbook.Worksheets[0];

            //イメージで保存します。
            sheet.SaveToImage("ExceltoImage.png", ImageFormat.Png);
        }
    }
}
```
<h4> <strong>実行結果</strong></h4>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210707/20210707122620.png" alt="f:id:lendoris:20210707122620p:plain" width="554" height="278" loading="lazy" title="" class="hatena-fotolife" itemprop="image" /></p>
<p> </p>
wordpressサイトが500エラーになったと思ったら色々仕込まれてた件

専門知識があるわけではないので、対応したことをストックするだけです。

## 現象
ロリポップにワードプレス入れて運用しているオウンドメディアがある日500エラーになった。

調べたら色々仕込まれていたので、対処療法的に措置した。

根本解決はできていない。

バックアップをとるなど、当たり前な作業はしておきましょう。

## やったこと

1. wp-config.phpのデバッグをtrueにする
1. ページにアクセスしてエラーログを見る
1. エラーログのファイルを確認して、仕込まれていると思しき行を削除
1. プラグインを最小限に減らす＆不要なものは削除
1. ファイルのパーミッション見直し

###　wp-config.phpのデバッグをtrueにする
WP_DEBUGをtrueにするだけ
これしたらブラウザ等でリクエストしたらエラー内容が吐き出される

### ページにアクセスしてエラーログを見る
エラー内容を確認するため、500エラーとなっていたページにアクセスして怪しいファイルを見つける。

### エラーログのファイルを確認して、仕込まれていると思しき行を削除
今回WP自体がやられていたので、FTPで確認。

不正処理するコードはそのままで表示されていないので、内容をごまかそうとしている意味不明な処理を消していく感じ。

エラーログで指摘されるファイルを全部対応したら500エラーは消えました。

エラーログには出なかったけど仕込まれているファイルがいっぱいあったので、更新履歴とかを見てローラーで潰していきました。

### プラグインを最小限に減らす＆不要なものは削除
常識ですが、プラグインがセキュリティホールになります。

使ってないものは削除。
使っていたものであっても、「本当に必要なのか」はきちんと検討すること。

themes, plugins配下にめっちゃ仕込まれてました。

### ファイルのパーミッション見直し
755とかめっちゃオープンだったので見直しました。

.htaccessとかwp-config.phpとかはしっかり確認した方がいい。

それ以外は基本ディレクトリ：705、ファイル：605にしてみた。

コンテンツのアップロード等できない場合は改めてパーミッション更新予定。

## 他に何ができるだろうか
誰か優しくて詳しい人教えてください。。

ワードプレス,テーマ、プラグインの更新も大切ですよね。

「そもそもワードプレスやめれば？」はちょっと無理。
C# PDFをPDFAに変換

<p><strong>今回はSpire.PDFという無料で使いやすいライブラリを利用して、PDFをPDF/A-1A、2A、 3A、1B、2B及ぼ3Bなどの形式に変換する方法を紹介しましょう。さあ！行きましょう。</strong></p>
<h4><strong>下準備</strong></h4>
<p><strong>1.E-iceblueの公式サイトから<a href="https://www.e-iceblue.com/Download/download-pdf-for-net-free.html">Free Spire.PDF</a>無料版をダウンロードしてください。</strong></p>
<p><strong><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210707/20210707121818.png" alt="f:id:lendoris:20210707121818p:plain" width="526" height="230" loading="lazy" title="" class="hatena-fotolife" itemprop="image" /></strong><br /><strong>2.Visual Studioを起動して新規プロジェクトを作成してから、インストールされたファイルにあった相応しいSpire. PDF.dllを参照に追加してください。</strong></p>
<p><strong>（Net 4.0を例としたら、デフォルトパスは“Bin→NET4.0→PDF.dll”というようです。）</strong></p>
<p><strong><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210707/20210707121904.png" alt="f:id:lendoris:20210707121904p:plain" width="289" height="207" loading="lazy" title="" class="hatena-fotolife" itemprop="image" /></strong></p>
```C#

using System;
using Spire.Pdf.Conversion;

namespace ConvertPdf2PdfA
{
    class Program
    {
        static void Main(string[] args)
        {
            //エクスポートするパースを指定します。
            String inputFile = @"C:\Users\Administrator\Desktop\sample.pdf";

            //保存するパースを指定します。
            String outputFolder = @"C:\Users\Administrator\Desktop\Output\";

            //PdfStandardsConverterオブジェクトを作成します。
            PdfStandardsConverter converter = new PdfStandardsConverter(inputFile);

            //PdfA1Aで保存します。
            converter.ToPdfA1A(outputFolder + "ToPdfA1A.pdf");

            //PdfA1Bで保存します。
            converter.ToPdfA1B(outputFolder + "ToPdfA1B.pdf");

            //PdfA2Aで保存します。
            converter.ToPdfA2A(outputFolder + "ToPdfA2A.pdf");

            //PdfA2Bで保存します。
            converter.ToPdfA2B(outputFolder + "ToPdfA2B.pdf");

            //PdfA3Aで保存します。
            converter.ToPdfA3A(outputFolder + "ToPdfA3A.pdf");

            //PdfA3Bで保存します。
            converter.ToPdfA3B(outputFolder + "ToPdfA3B.pdf");
        }
    }
}
```
<p><strong> </strong></p>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210707/20210707121942.png" alt="f:id:lendoris:20210707121942p:plain" width="554" height="517" loading="lazy" title="" class="hatena-fotolife" itemprop="image" /></p>
<p><strong> </strong></p>
<p><strong> </strong></p>
<p><strong> </strong></p>
<p><strong> </strong></p>
<p><strong> </strong></p>
<p><strong> </strong></p>
Amazon Cognito の Lambda トリガーに、エイリアス付きで Lambda を設定してみる

# ■ はじめに

![963f9ca9395c096c234f891ad8877b28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/d838a89d-5dc1-d693-0517-add60ca2ce07.png)

Amazon Cognito の Lambda トリガーに、エイリアス付きで Lambda を設定してみたかったので、やってみました。

参考にさせて頂いた記事は、コチラ ♪♪♪

- [aws lambda \- Cant set AWS cognito triggers using CLI \- Stack Overflow](https://stackoverflow.com/questions/60351508/cant-set-aws-cognito-triggers-using-cli)
- [update\-user\-pool — AWS CLI 1\.19\.105 Command Reference](https://docs.aws.amazon.com/cli/latest/reference/cognito-idp/update-user-pool.html)

ありがとうございました！
感謝 ♪♪♪

🙇‍♂️🙇‍♂️🙇‍♂️
<br>
因みに、AWS のウェブコンソールからだと、こんな感じでエイリアス付きで Lambda を設定出来ないです…

![FireShot Capture 001 - ユーザープール - Amazon Cognito - ap-northeast-1.console.aws.amazon.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/bf6eb9f7-4ade-a2ea-67fa-1ca739bc9280.png)

# ■ コマンド

コマンドで設定します。

```bash
aws cognito-idp update-user-pool --user-pool-id '[プール ID]' \
--lambda-config PreSignUp=arn:aws:lambda:ap-northeast-1:[AWS アカウント ID]:function:[関数名]:[エイリアス],PostAuthentication=arn:aws:lambda:ap-northeast-1:[AWS アカウント ID]:[関数名]:[エイリアス]
```

コマンドを実行すると、ウェブコンソールからは、こんな感じの表示になります。

![FireShot Capture 081 - ユーザープール - Amazon Cognito - ap-northeast-1.console.aws.amazon.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/61a088ef-c64e-7335-6d22-30a264ca40b8.png)

以下のコマンドでも、現在の設定を確認出来ます。

```bash
aws cognito-idp describe-user-pool --user-pool-id '[プール ID]'
```

# 【2021.08.06 追記】コマンド実行後の対応

何度か試してみたところ、上記のコマンド実行だけではうまく設定が反映されませんでした…

コマンド実行後、Cognito のトリガーのコンソール画面で、改めて「変更の保存」ボタンを押下すると反映されました！

# ■ ハマりポイント

- 特にありませんでしたが…

- 注意事項として、設定する Lambda において、以下の記事の様に Lambda トリガーでこけたりしない様にしとかないと、認証エラーになっちゃいます。
    - [Amazon Cognitoの認証をトリガーにしたときのLambda関数\(Python3\.6\)の書き方 \| DevelopersIO](https://dev.classmethod.jp/articles/cognito-trigger-lambda-python-login/)

- とりあえず、何とか設定できて良かったです ♪♪♪

😆😆😆

# ■ まとめ

参考になれば ♪♪♪

👋👋👋
Nginxでgzip圧縮を有効にする


JSやCSSなどの転送量を減らし、表示速度を高めるための手法としてgzip圧縮があります。
Nginxでgzip圧縮する方法のメモ。

## 設定

Nginxの設定ファイルでhttp,serverディレクティブなどのどこかに以下を追加。

```
gzip  on;
gzip_types  <content type>;
```

`text/html`はデフォルトで圧縮される。それ以外のcontent-type、例えばjsを圧縮したければ、gzip_typesで追加。`*`を使うと全てのタイプで有効になる。

```
gzip  on;
gzip_types  application/javascript;
```

## 設定の確認

設定が反映されるとchromeのdevtoolで`content-encoding: gzip`となっているのが確認できる。

![スクリーンショット_2021-07-07_11_48_38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260824/0723c91a-ba51-f788-a1c2-2b3941374bc8.png)


## 参考
* [Module ngx_http_gzip_module](http://nginx.org/en/docs/http/ngx_http_gzip_module.html)
Unityでプレイヤーキャラクターを操作する

目的：
キーボードから入力した矢印キーで、プレイヤーキャラクター（に該当するゲームオブジェクト）を操作する。

準備：
・ヒエラルキーにカプセル型のゲームオブジェクトを配置（別にカプセルでなくても、何か視認できるゲームオブジェクトなら何でも良い）
・アセットでスクリプトを新規に作成。このスクリプトには上記のオブジェクトを操作するプログラムを書くので、わかりやすい名前をつけておこう。（例：PlayerManager、以下、便宜上左記の名称を使用）

やり方：
PlayerManagerをVisualStudio（個人の環境によって違う可能性があるので、以下コードエディタと表記）で開く。
全部消して、以下のコードをコピペ。

```C#:PlayerManager.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PlayerManager : MonoBehaviour
{
    float x;
    float z;

    float speed = 0.1f;

   // 0.02sec毎に処理を更新する関数
    private void FixedUpdate()
    {
        // 変数を初期化
        x = 0;
        z = 0;

        // 0.02sec毎にxとzへ入力される水平と垂直方向に対する値が代入される
        x = Input.GetAxisRaw("Horizontal") * speed;
        z = Input.GetAxisRaw("Vertical") * speed;

        // 自身（このプログラムがアタッチされているゲームオブジェクト）の位置を更新
        transform.position += new Vector3(-x, 0, -z); //　上下左右を反転させて、押したキーとキャラクターの動きにイメージとのズレがないようマイナス記号をつけた
    }
}
```

プログラムを実行すると、スクリプトをアタッチしたゲームオブジェクトが矢印キーで操作できるようになる。
（Y軸方向には移動できない設定なので、前後左右のみ）

ゲームを作る！
と思った時に一番初めにやりたいことって
この、プレイヤーキャラクター（と想定した何か）を矢印キーで操作するって行為だよね
自分で書いたコードによって、プレイヤーキャラクターが自由自在にフィールドを動くと、軽い感動を覚えてテンションが上がる
それがプログラミングのモチベーション
Xamppのインストールから設定とルート設定とつまずいた点の忘備録

<h1>Xampsとは</h1>

『XAMPP（ザンプ）』というソフトを利用すると、PHPを使用したWEBアプリケーションの動作に必要な様々なツールを、PCに一括して導入することが出来ます。
PHPを使用した多くの目的に対応ができる、とっても便利なツールです。



<h1>ダウンロードはこちら</h1>

公式サイト( https://www.apachefriends.org/jp/index.html )よりダウンロードしてインストール

<h1>インストールする際に参考にしたサイト</h1>

https://qiita.com/snyt45/items/0b9db915232be963fe93

https://techacademy.jp/magazine/1722

（＊記事が古いためか文字化けのphp.ini等のフォルダがないとか情報が少し違うので最初の部分のみ）

<h1>設定する際に参考にしたサイト</h1>
https://miya-system-works.com/blog/detail/41

<h1>複数のローカルサイトを作る方法</h1>
https://miya-system-works.com/blog/detail/104

https://mypcmemo.com/xampp-vertualhosts


<h1>つまずいた点</h1>

<strong>ファイヤーウォールの設定</strong>
◆解決方法：デフォルトでパシフィックネットワークにチェックされていたのでプライベートネットワークに変更する

<strong>インストール後強制再起動かかかりコントロールパネルが自動起動しない</strong>
◆解決方法：通知領域のアイコンをクリックするかフォルダから直接開く
（最初びっくりして再起動キャンセルしたらインストールが最後までできず、途中までのファイルを捨てて再度インストールした）

<strong>(複数のVirtualHostsを設定)任意のディレクトリをルート設定がうまくいかない</strong>
　　解決方法：こちらのページを参考に設定

https://qiita.com/akrha/items/c51099829d8a9c74d225

https://httpd.apache.org/docs/2.2/ja/sections.html

<h1>気になって(疑問があって)チェックしたサイト</h1>

<strong>ポート番号</strong>

https://abhp.net/it/IT_Port_No_100000.html

<strong>xamppの使い方</strong>

https://www.javadrive.jp/xampp/

<h1>気をつけること</h1>
httpd.confのバックアップは取っておくこと
APIGateway経由でS3にuploadした画像が表示できない。

# isuue

前提
・RESTAPI
・アップストリームとの通信はHTTP。

以下のような流れでuploadした画像のurlを開くと、画像が表示されるはずが、なぜかダウンロードされてしまう。。。

1. ブラウザのformから、Content-Type:multipart/form-data で画像やその他テキストを送信。　

2. 画像は、 以下の流れでS3にアップロードされる。
  APIGateway　→　APサーバー → S3


# 解決方法
・設定からバイナリメディアタイプに、multipart/form-dataを設定する。

APIGatewayは、以下のように
ブラウザなどのクライアントからリクエストを受け取り
それを解釈してルーティング先のapサーバーにリクエストを送りなおしている。

・ クライアント　http→ 　APIGateway http→ APサーバ 

この際にAPIGatewayでは、
バイナリファイルとして認識すると明示していないContent-Typeに関しては、
テキストなどと同じように処理してしまうため、今回のようなことが起きてしまっていたよう。

バイナリメディアタイプに、明示的に指定してあげれば問題なく登録できるようになる。



#参考
https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/api-gateway-payload-encodings-workflow.html
【年に２回まで】Apple のテクニカルサポートを受ける手順

#どうしても解決できない問題に

Swift や Apple のフレームワークを使ってプログラミングしていて、

「いや、これ解決できひんやん。
**公式ドキュメントの中も Qiita の中も Stack Overflow の中も探したけれど見つからなくて**」
、と思うことはありませんか。

そんなとき、答えを返してくれない Web ブラウザに呆然とするかわりに、

**Apple に直接きいてみる方法があります**。

それが 

**Technical Support Incident** 

です。

Apple Developers Program に登録している人は、 **Developers Program 契約につき２回まで** Technical Support Incident のリクエストができます。
**フレームワークについての質問**や**コードレベルの質問**、**修正できないバグ**
に、**Apple のテクニカルサポート・エンジニアが答えてくれる**というものです。

なんと**３営業日以内に返事が返ってくる**ということです。
いつ返事がつくかわからない Developer Forum を待ってる暇ない、というときもありますよね。
朗報です。

しかもこれ、追加購入すると、２回で１２９８０円もする質問チケットです。
無料持ち分を使わない手はないですよ。

#手順


[**Developer ページのサポートのテクニカル・サポート・ページ**](https://developer.apple.com/jp/support/technical/) 
でサポートの概要や、「質問する前にやってみてくれ」的な手順を読めます。

###１、テクニカル・サポートのページにいく
[**Code-Level Support（コードレベルのサポート）（英語）**](https://developer.apple.com/account/?view=support)
にいくと、自動で自分のアカウントでログインします。


【テクニカルサポートのページ↓】
 
![スクリーンショット 2021-07-07 11.35.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/fda3b2a4-b3c4-409a-5a31-d0275015dbb7.png)


**テクニカルサポートをリクエストする** をクリック。

###２、質問を文章で記入する

フォームに英語で題名と質問内容、ハード・ソフト構成、再現手順を文章記入します。



【質問フォーム↓】
![スクリーンショット 2021-07-07 11.11.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/4859aab0-16c9-1c96-03c5-b3c0c68f0c49.png)

ちなみに、ぼくは
「RealityKit で　ARKit の　session configuration を明示的に使うと、なぜかオブジェクトの表面がすごく暗くなり、反射もなくなる」
というのの解決方法を質問しました。

いちおう簡単なコードも文章の末尾につけました。



【いちおうコードも↓】
![スクリーンショット 2021-07-07 11.11.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/a5b220c0-aebc-8e54-a1c0-b340cb1023b7.png)

###３、送信する

「リクエストを送信する」ボタンをおすだけ。
これでテクニカル・サポート・リクエストが送信されました。



【送信完了↓】
![スクリーンショット 2021-07-07 11.12.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/f1ecdc51-db52-638f-89e6-1332f99f47bb.png)

必要に応じて、エラーログやサンプルプロジェクトを用意するということは、一回のやりとりではなく、サポートのやりとりが何回かあるのかもしれません。

結果が来たら、この記事編集してアップデートしますね。

ちなみに、１年で２回よりもっと質問したい場合の質問チケットは、２回分１２９８０円、５回分３２７８０円で購入できます。

#結果

先にデヴェロッパーズ・フォーラムでおなじ質問していたのが解決しちゃったので、それをトラックして質問チケットがもどってきました。というオチ。

>へローだいすけ。
テクニカルサポートインシデントに連絡してくれてありがとう。
きみのクエスチョンはアップルデヴェロッパーフォーラムでこたえられたぜ。
https://developer.apple.com/forums/thread/684410?answerId=681187022#681187022
さいしょテクニカルサポートインシデントがきみのアップルデヴェロッパーズプログラムアカウントからつかわれたのにたいして、DTSがこのサポートチャンネルで提供されなかったからおれたちは替えのインシデントをもどしておいたよ。
それじゃあ。

🐣
****
フリーランスエンジニアです。
お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
ベンチャー企業に新卒として入社して３ヶ月たったから、何をやったか書く

22卒の方とかが参考程度にチラ見してくれるといいな〜と思っています。
よろしくお願いします。

## 自己紹介

4年間、情報系の専門学校に通っていました。

21年卒のフロントエンドエンジニアとして福岡で働いています。

入社してからはVueでのWebアプリケーション開発を行なっています。



## やったこと

### HTML / CSS / JavaScript / Vue(VueRouter,Vuex,Vuetify)の勉強

業務でフロントエンドを触っているので、それのためです。

特別なことはせず、詰まるたびに公式リファレンスやMDN、StackOverflowをたくさん読みました。



### CSS設計の勉強

MindBEMdingとFLOCSSについて勉強しました。



### AtomicDesignの勉強

UIデザイン手法です。

将来的にプロダクトを作る際にうまいことできそうだったので勉強しました。

予想としては変化の多いプロダクトやメンバーが多いプロダクトには向いていない印象です。



### UI/UXの勉強

独学でUI/UXの勉強を行いました。デザイン性より人間中心設計等のユーザビリティに関して勉強を行いました。



### 読んだ本

[UXデザインの法則 ―最高のプロダクトとサービスを支える心理学](https://www.amazon.co.jp/gp/product/4873119499/ref=ppx_yo_dt_b_asin_title_o09_s00?ie=UTF8&psc=1)

[デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ](https://www.amazon.co.jp/gp/product/4862462650/ref=ppx_yo_dt_b_asin_title_o08_s01?ie=UTF8&psc=1)



## 反省点

読むより手を動かせ



## これからやろうとしていること

### 個人開発

やろうとしているというかやり始めています。

とは言っても、まだUIモックを作成している段階ですが。

バックエンドが全然わからないので、あんまりバックエンドを触らないようなモノにする予定です。

アウトプットを欠かさないように開発がひと段落したら記事を書こうと思っています。



### React/TypeScriptの勉強

個人開発でReact使ってみたいからです。

Vueがあんまり盛り上がってないように感じるのもあります。

書き方はVueの方が好きなので、Svelteもやってみたい気持ちもありますがReactやった後にでもいいかなと思っています。



### 読もうとしている本

[オブジェクト指向UIデザイン──使いやすいソフトウェアの原理](https://www.amazon.co.jp/gp/product/4297113511/ref=ppx_yo_dt_b_asin_title_o08_s00?ie=UTF8&psc=1)

同期に貸しててまだ読んでないです。



## まとめ

特に大したことしてないですが、アウトプットって大事なのかなと思い、書いた所存です。

これからも自分のペースで少しずつやりたい事を勉強して、やれることが増やせたらな〜と思っています。

就活で自分を落とした会社に後悔させるような人材になるまで頑張ります（別に恨んだりしてないです）
Azure Web Appsで、502や500.53のエラーが返ってしまうときの原因と対処法

#現象
Windows Server上では問題なく動くアプリケーションを、WebApps上で動かした際にクライアント側でHTTPステータスコード**502 Bad Gateway**が返ってきてしまうケースがある。その際、内部で**500.53 URL Rewrite Module Error**が起きているようであれば、以下の記述が解決策になる可能性がある。

#原因
問題なのは、500.53エラーが発生する原因だが、WebAppsでクライアントサイドの監視と、urlCompressionが共に有効になっていることに起因する仕様であるそうだ。

ここで、クライアントサイドの監視とは、javascriptなどを用いたクライアント側での処理をApplicationInsightで監視するための機能で、従来は監視を必要とするページに手動でMS謹製のJavaScript スニペットを挿入しなければいけなかったが、ASP.NETのアプリケーションの場合にはWeb Appsの設定に**APPINSIGHTS_JAVASCRIPT_ENABLED**を追加し値を**true**とすることで簡単に実現することができるようになった。
>
[Enable Client Side Monitoring In Azure With Application Insights](https://www.managedsolution.com/enable-client-side-monitoring-azure-application-insights/)
[Application Monitoring for Azure App Service - Enable client-side monitoring](https://docs.microsoft.com/en-us/azure/azure-monitor/app/azure-web-apps?tabs=net#enable-client-side-monitoring)

一方、urlCompressionだがこちらはアプリケーションのコンテンツの圧縮を行うかを指定している。IIS7.5以上では、既定で静的コンテンツ（GIF ファイルや HTM ファイルなど、変更されないコンテンツ）及び動的コンテンツ（サーバー上のスクリプトまたはコード - つまり、ASP.NET ページ - によって生成される）の両方が圧縮される。圧縮によって帯域幅の使用量は減少するが、CPU 使用率は増加するデメリットもある。
>
[IIS 10.0 のチューニング - 圧縮動作の設定](https://docs.microsoft.com/ja-jp/windows-server/administration/performance-tuning/role/web-server/tuning-iis-10#compression-behavior-settings)

#回避策
これらの二つの設定が衝突してしまい**500.53**が発生し、結果応答が返らないことからWeb Serverが502エラーと解釈してクライアント側に通達するという仕組みになっているらしい。で、回避策としてはWeb Appsの設定で**APPINSIGHTS_JAVASCRIPT_ENABLED**を**true**から**false**に(あるいは設定値を削除)するようにとMSのサイトには書かれている。
>
[Azure App Service のパフォーマンスの監視 - トラブルシューティング](https://docs.microsoft.com/ja-jp/azure/azure-monitor/app/azure-web-apps?tabs=net#troubleshooting)

#コメント
どちらの設定もそれぞれ大事な機能のように思えるが、現時点でMS側の見解としてはクライアントサイドの監視を諦めろということらしい。
未検証だが、JavaScriptスニペットをページにすべて埋め込めば正常動作をするのかもしれないが、スクラッチで作成するアプリケーションならまだしもパッケージとして販売をされているものの場合には、WebApps専用の対応を行うのも難しい場合があると思われる。
なにか上手い方法があればコメントなどしていただけると助かります。
[Ruby on rails] includesって何？　N+1問題　初心者向け

<h2>初めに</h2>
プログラミング学習を初めて1ヶ月と少しです。
誤り、理解不足はご指摘頂けますと幸いです。

<h2>突然でてきたincludes</h2>

過去１週間の「いいね」を、多い順に並べるという機能を実装していたときに、includesが出てきました。
それまで知ってたのは、文字列が含まれてるかどうかを検索するようなincludes?みたいなやつ。
同じようなもんかな〜と思ってましたが、調べていくと『N＋１問題』にぶち当たります。

<h2>N+1問題を検索してみた</h2>

検索すると色んなサイトが出てきます。そこで出てくるのが、「データベースから取り出す時に、無駄にSQL文が実行されてしまうこと」。
それを防ぐのが、includesらしい。しかしながら、説明を読んでもわからない！！わからない！！

<details><summary>SQLって...?</summary><div>
「データベースを操作するための言語」
データーベースにアクセルする時、通常はSQLを書かないとデータベースとのやりとりはできません。
でも、ruby on railsだとアクティブレコードっていうものがあるのでsqlは書く必要がないそう。
</div></details>

<h2>そもそも 「N+1」 って何？？:joy:　</h2>

N+1って何？　１個余分でくっついてるね〜っていう話？！？？！　（違います！）

まずN＋１問題を起こしてしまうパターンです。

本の投稿サイトで、本の一覧ページを作成するとします。
そこで、表示させるのは本の投稿一覧と、誰が投稿したかという情報です。
そうなってくると、以下のように本の一覧全部取り出して、@booksに入れると思います。

```perl:books_controller.rb
def index
 @books=Book.all
end
```

この時、@booksには、
本の投稿１つ目：id=1 user_id=1
本の投稿２つ目:id=2 user_id=2
本の投稿3つ目：id=2 user_id=1
本の投稿４つ目:id=3 user_id=3
みたいに情報が入っています。（今回は本の投稿が全部で４件とします）
そして、これをviewのeach文で回していき、誰が投稿したかという情報をユーザーテーブルに取りに行っています。

<h3>viewのeach文で何が起きてるかわかりやすく？お話風に書いてみました。</h3>

view係Aさん：「id=1の投稿取り出しました〜user_id=1です！この人の名前教えてください！」
view係Bさん：「user_id=1ですね！ユーザーテーブル行って、確認してきます！」
:
view係Bさん：「user_id=1は橋本さんでした！！！」

view係Aさん：「次、id=2の投稿取り出しました〜user_id=2です！この人の名前教えてください！」
view係Bさん：「user_id=２ですね！ユーザーテーブル行って、確認してきます！」
:
view係Bさん：「user_id=２は田中さんでした！！！」

view係のAさんの手元には、本の全ての本の投稿の情報が手元にあります。（コントローラーで全部取り出してるので）
しかしながら、それに紐づくuserの情報は、都度取りに行かないといけません。



<h4>bookテーブルの参照は１回。でもuserテーブルへの参照はN回（本の投稿数だけ参照しにいかないとならない</h4>→これがN+1問題です。

<h2>それを解決するのがincludesだった...</h2>

ここまでで、N+1の大変さがわかりました。そんな一個ずつ取りに行ってるなんて知らなかった...
これを解決するのがincludesです！
viewのeach文で、いちいちUserテーブルに取りにいかなくても良いように、コントローラーで一緒に紐づいてるuser情報を取り出してあげれば良いんです。

@books=Book.includes(:user) とコントローラーに記載することで、1回で本の投稿とそれに紐づいているユーザーの情報が取り出せるようになります。

<h3>終わり</h3>
これでincludesが使いこなせるようになったかというと怪しいのですが、ちんぷんかんぷんだったN+1問題がわかるようになりました。
google Colaboratory とgoogle Driveを連携する

いくつか、小技
##Colaboratoryからgoogle Driveを利用する。
まず最初に、図左下のファイルボタンを押して、次に「ドライブをマウント」ボタンを押す。これだけで、利用可能になる。
ファイルパスは"/content/drive/MyDrive/フォルダ名"。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1520250/96c1b9cc-1367-0054-0178-2855e70c5ce3.png)
その他、以下の方法でも接続できる。
from google.colab import drive
drive.mount('/content/drive')

##自作のライブラリをインポートするために、google　Driveにパスを通す
import os
import sys
sys.path.append("/content/drive/MyDrive/my_utl")
これでパスが通るので、自作のライブラリを読み込める。
import my_multi_model として my_multi_model.func1() と呼びだす。または
import my_multi_model as my_func として my_func.func1() として呼びだす。


#wandb(Weights & Biases)を使う
あらかじめ、ユーザー登録など済ませておく。https://qiita.com/daikiclimate/items/96bd784170582651651b
Colabからでも簡単に利用可能。
!pip install wandb
最初の１回だけ認証が必要。ローカルPC等では、ホームディレクトリの.netrcに自動でキーが保存される。Colabの場合、ランタイムの起動の都度wandv.initを実行した際に、/root/.netrcにキーが追加される。認証をどうやって保持してるのか不明。

ちなみに、wandbは試行の都度モデルをwandbのサイトにアップロードするのがデフォルトなので、100Gの無料枠がすぐにいっぱいになる。コールバック関数でmy_wandb = WandbCallback(save_model=False)を指定してモデルをアップロードしない設定を利用。
【CSS】ホバーでボタンの背景にグラデーションをかける方法

CSSでbackgroundにグラデーションをかけるには、ちょっとした仕掛けが必要です。

こちらを参考にしたのですが、グラデーションがかかった状態から別色のグラデーションへの変化しか解説がなかったので、無色からグラデーションへの変化をメモとして残しておきます。

参考
https://www.tsukimi.net/css_gradient_hover_animation.html

```html
<a href="" class="hvr-bg-gradient">button</a>
```
ボタンはいい感じにつくってください。
z-index、display: block、position: relativeが設定されていればOKです。

```css
.hvr-bg-gradient{
  z-index:0;
  display: block;
  position: relative;
}
.hvr-bg-gradient:before{
  content: "";
  width: 100%;
  height: 100%;
  background:rgba(0,0,0,0)!important;
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 1.25rem!important;
}
.hvr-bg-gradient:after{
  content: "";
  width: 101%;
  height: 100%;
  background: linear-gradient( to right,  rgba(16, 129, 246,0.4) 0%, rgba(254, 189, 231, 0.4))!important;
  z-index: -2;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 1.25rem!important;
  opacity: 0;
  transition: 0.5s;
}
.hvr-bg-gradient:hover:before{
  opacity: 0;
}
.hvr-bg-gradient:hover:after{
  opacity: 1;
}
```

基本的には参考サイトと同じようにz-indexで層を作ってhoverでopacityを変化させます。
違うのはbeforeの色をrgbaで透過させておくことと、after要素のopacityを変化させることです。

1から作ると何気に時間がかかりましたが、仕組みを理解すると簡単ですね。
【Rails】Railsで元に戻す方法

####My Profile
プログラミング学習歴②ヶ月目のアカウントです！
プログラミングスクールで学んだ内容や自分が躓いた箇所等のアウトプットの為に発信しています。
また、プログラミング初学者の方にわかりやすく、簡潔にまとめて情報共有できればと考えています。
もし、投稿した記事の中に誤り等ございましたら、コメント欄でご教授いただけると幸いです。　



#対象者

・ターミナル等で前実行したものに戻したい方
・間違えたコードを入力し、自動生成されたファイル等を元に戻したい方

#目的
簡単に焦らず自動作成されたものを削除できること


#実際の手順と実例
###例1.コントローラー作成

実際にコントローラーを作成するために

```
$ rails generate controller Book home index
`````

このように入力するとファイルやルーティングまで自動生成され、１個１個削除が面倒ですが、、下記のコマンドで一括削除が可能です！

```
$ rails destroy controller Book home index
`````
generate部分をdestroyに変更しましょう！


###例2.モデルの作成

モデルの一括作成と削除は下記の通りです。

```
$ rails generate model User name:string
```````
````````
$ rails destroy model User 
`````

ちなみにカラムの追加や削除はのみは下記の通りです

https://qiita.com/nao0725/items/9a969e51350697dd4cf5

###例3.マイグレーション

マイグレーションでは追加と削除は下記の通りです！

```
rails db:migrate
````

````
rails db:rollback
````

また下記URLでマイグレーションの削除のやり方を解説していますのでご参照ください。

https://qiita.com/nao0725/items/dd64bdab746fe6b2b0a0



#参照
>[Rails tutolial コラム３．１](https://railstutorial.jp/chapters/static_pages?version=6.0#:~:text=%E3%81%BF%E3%81%BE%E3%81%97%E3%82%87%E3%81%86%E3%80%82-,%E3%82%B3%E3%83%A9%E3%83%A0%203.1.%20%E5%85%83%E3%81%AB%E6%88%BB%E3%81%99%E6%96%B9%E6%B3%95,-%E3%81%A9%E3%82%8C%E3%81%BB%E3%81%A9%E5%8D%81%E5%88%86%E3%81%AB "")
エラーメッセージを表示させる

#はじめに

![スクリーンショット 2021-07-06 19.26.20（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264460/d11d4e32-6522-e64d-d34f-565ee10c95c1.png)

投稿するボタンをクリックした後間違えがあった場合、エラーメッセージが表示されればユーザーは何を間違えたかが一目で分かると思います。

今回はそのエラーメッセージを表示させる記述をしたいと思います。

#やる事

- モデルにバリデーションをかける

- エラーメッセージを受け取るファイルを作成する

- エラーメッセージを表示させるようにビューファイルに記述する

大まかにこの3点です。

#モデルにバリデーションをかける

フリマアプリを作成中だとして、フリマに出品する際に商品名や画像がないと何の商品かわからないですよね。

なので空欄では出品できないようにバリデーションを定義します。

```item.rb
class Item < ApplicationRecord
 validates :name, presence: true
 validates :image, presence: true
end
```

`with_options presence: true do`でまとめる事ができますが省略します。

https://qiita.com/N396184501/items/34dad97ac48aabbe5568

これで空の場合は投稿できないようにしました。

#エラーメッセージを受け取るファイルを作成する

ファイルを作成する場所は今回は**views>shared>_error_messages,html.erb**
に作成します。

```erb
<% if model.errors.any? %>
 <div class="error-alert">
  <ul>
    <% model.errors.full_messages.each do |message| %>
     <li class='error-message'><%= message %></li>
    <% end %>
  </ul>
 </div>
<% end %>
```

この記述の中身を解説します。

```erb
<% if model.errors.any? %>

<% end %>
```

`any?メソッド`で1つでもエラーがあった場合、条件分岐で下の内容が読み込まれます。

[公式リファレンス](https://docs.ruby-lang.org/ja/latest/method/Enumerable/i/any=3f.html)

今回はitemモデルの中にエラーはありますかとなります。

ちなみに`errors`は今起きているエラーをエラーメッセージとして受け取ることができます。

```erb
<ul>
  <% model.errors.full_messages.each do |message| %>
    <li class='error-message'><%= message %></li>
  <% end %>
</ul>
```

`model.errors.full_messages.each do |message|`の記述で全てのエラーメッセージを`message`に格納します。

`errors.full_messages`とは詳細なエラーメッセージを確認することができます。
今回はitemモデルのエラーメッセージです。

例としてimageが空だとどんなエラーメッセージが出るのか検証します。
`valid?メソッド`を使用します。


```ruby
item.image = nil #写真が空ですよ
item.valid? #検証　
=> false
item.errors.full_messages
=>["Image can't be blank"] #エラーメッセージ
```

このように出てくる詳細なエラーメッセージを`message`に格納します。

そして`<ul><li>タグ`で箇条書きにして表紙させます。

#エラーメッセージを表示させるようにビューファイルに記述する

エラーメッセージのファイルをビューファイルに貼り付けます。

```erb
<%= form_with model: @item, local: true do |f| %> 
  <%= render 'shared/error_messages', model: f.object %>
<% end %>
```

#参考

https://qiita.com/ryuuuuuuuuuu/items/1a1e53d062bff774d88a


[Pikawaka](https://pikawaka.com/rails/validation#valid?)
【selenium備忘録】java、chromeで軽く動かしてみる

#【selenium備忘録】java、chromeで軽く動かしてみる
##はじめに
久しぶりに触ったのでseleniumについての備忘録です
軽く動かすところまでを書こうと思います

以下流れ

- 環境設定
　- WebDriver追加
　- chromeDriver追加

- 軽く動かす
　- 要素取得
　- 画面操作
- 終わり
- 参考

##前提条件
selenium、STS導入済
ブラウザ：chrome
言語：java

##環境設定
STSにて新規プロジェクトを作成します。
今回はMavenプロジェクトにしました。

###WebDriver追加
pom.xmlに依存関係を追加してWebDriverをダウンロードします。

```
<dependency>
  	<groupId>org.seleniumhq.selenium</groupId>
   	<artifactId>selenium-java</artifactId>
   	<version>3.141.0</version>
</dependency>
```
###chromeDriver追加
Chromeのバージョンを確認し、同じバージョンのzipファイルを下記からダウンロードします。
https://chromedriver.chromium.org/downloads

ここから
①パスを通す
②実行ファイルの場所を指定する
のどちらかでchromeDriverを利用できるようにします。

私は②で行いました。
②の場合は↓のように場所を指定します。

```
System.setProperty("webdriver.chrome.driver", "ファイルのパス");
WebDriver driver = new ChromeDriver();
```
##軽く動かす
では早速動かします。
コードの流れはこんな感じです　↓

→パスを指定してブラウザを立ち上げ
→URLにアクセス
→取得した要素（検索バー）に単語を入力してエンター
→検索後の画面をスクショ
→スクショを指定の場所に保存

```
//ファイルパス指定
System.setProperty("webdriver.chrome.driver", "ファイルパス");
WebDriver driver = new ChromeDriver();
		
driver.get("https://qiita.com/");
		
//要素取得
driver.findElement(By.name("q")).sendKeys("selenium備忘録",Keys.ENTER);
System.out.println(driver.getTitle());
		
//画面操作
File tempFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
//スクショとって指定場所に保存
try {
　　Files.copy(tempFile.toPath(), new File("C:/eclipse/" + tempFile.getName()).toPath());
} catch (IOException e) {
	System.out.println("スクショ失敗");
}
		
driver.quit();	//ブラウザの破棄
```


正しくスクリーンショットも保存されました。
![selenium-screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1733797/fa381423-69a5-d963-8e15-0d5416eaf2b2.png)

##終わり
簡単にですが動かせました。

seleniumといえば環境構築が大変な印象でしたが
今回はスムーズに動かせたので忘れないように記事を書いてみました。

いろいろ触ってまたアウトプットしていければと思います。

##参考
https://qiita.com/tsukakei/items/41bc7f3827407f8f37e8