OmniAICreator/Qiita-1.07M huggingface dataset:
ちょうどいいところで止まるUICollectionView

minneってアプリのトップ画面にあるようなやつ。動画を貼りたかったけどQiitaは動画無理そうだったのでDownloadして確認してみてほしい（宣伝）。

<img width="375" alt="Image from iOS (2).png" src="https://qiita-image-store.s3.amazonaws.com/0/17652/89afed4e-c71c-82e5-c635-7152967636eb.png">

この画面の横スクロールする箇所（画像でいうと「minne'sセレクト」と「読みもの」）は、UICollectionViewで実装しているのですが、スクロールが終わる際にセルがちょうどよく左端に止まるように作っています。

2年半くらい前にこれを実装したのですが、最近別のアプリで同じようなことしようと思ってコードを見返してみたので、そのときに考えていたことを思い出しつつ、ついでにメモしておきます。

## 実装
`UICollectionViewFlowLayout` をカスタマイズする形でやる。各種数値は仮。

```Swift
class CustomFlowLayout: UICollectionViewFlowLayout {

    private let largeFlickVelocityThreshold: CGFloat = 2.0
    private let minimumFlickVelocityThreshold: CGFloat = 0.2
    private let pageWidth: CGFloat = 320.0

    override init() {
        super.init()
        setup()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
    }

    private func setup() {
        itemSize = CGSize(width: 320.0, height: 240.0)
        minimumInteritemSpacing = 16.0
        minimumLineSpacing = 16.0
        sectionInset = UIEdgeInsets(top: 0.0, left: 16.0, bottom: 0.0, right: 16.0)
        scrollDirection = .horizontal
    }

    override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {
        guard let collectionView = collectionView else {
            return proposedContentOffset
        }

        let pageWidth = itemSize.width + minimumLineSpacing
        let currentPage = collectionView.contentOffset.x / pageWidth

        if abs(velocity.x) > largeFlickVelocityThreshold {
            // velocityが大きいときは2つ動かす
            let nextPage = (velocity.x > 0.0) ? ceil(currentPage) + 1 : floor(currentPage) - 1
            return CGPoint(x: nextPage * pageWidth, y: proposedContentOffset.y)
        } else if abs(velocity.x) > minimumFlickVelocityThreshold {
            // 1つ動かす
            let nextPage = (velocity.x > 0.0) ? ceil(currentPage) : floor(currentPage)
            return CGPoint(x: nextPage * pageWidth, y: proposedContentOffset.y)
        } else {
            // velocityが小さすぎるときは近いほうへ
            return CGPoint(x: round(currentPage) * pageWidth, y: proposedContentOffset.y)
        }
    }

}
```

minneのコードや今担当しているプロダクトで書いてるコードでは、上記をベースにセルのサイズや一度のスクロールで動かすセルの数などをカスタマイズできるようにしています。

大きくスワイプしたとき（velocityの値が大きいとき）は大きく進めるようにしないと、意図に反した動きに感じてしまう。ここらへんの調整はちょうどいいポイントを見つけるのが難しいので、周りの人に触ってもらって意見をもらうとよい。

## 補足
最初は手間をかけずに普通のスクロールで実装したのだけど、チームメンバーから違和感があるというレビューを受けてこの実装に至った記憶があります。実際にデフォルトの状態で横スクロールを実装するとなんか気持ち悪さがある。たぶん横の動きはPageViewControllerに慣れているからその動きを期待しちゃうのかな。

注意点として、こうしたインタラクションのカスタマイズは下手にやると自己帰属感が失われてしまい、逆に違和感を生んでしまう可能性があります。作ったらいろんな人に触ってもらってフィードバックをもらい、改善していくとよさそう。
JavaScriptとPHPの書き方を比較してみた

JavaScriptは「フロントエンド」で、PHPは「バックエンド」というように全く違う存在ですが、そこの違いはタイトルと趣旨が違うので割愛します。
ProgateでJavaScriptをⅡまでやったので、現時点で分かったPHPと書き方が違うところを挙げていきます。
#書き出し
JavaScript(以下JS)では、

```javascript

console.log("Hello,world!");
```
PHPでは、

```php
echo "Hello,world!";
```
同じ動作をしますが、JSとPHPでは書き方が違います。

#変数

```javascript

let name = "Hello,world!";
```
PHPでは、

```php

$name='Hello,world!';
```

となります。
ちなみに定数定義は、どちらも

```php
const name = "Hello,world!";
```
です。

#テンプレートリテラル
テンプレートリテラルを使うことで、変数の値を文字列中に埋め込みたい時に、文字列連結演算することなくスマートにコード化できます。
JSの場合は

```javascript

const name = "Helloworld!";

console.log(`${name}世界`);
```
PHPの場合は

```php

$name = "Hello world!";

echo "{$name}世界";
```
となります。
「**$**」の位置が違うだけなので分かりにくいです。

#elseif
PHPでは表示できる書き方でも、JSではエラーが発生する書き方があります。
PHPの場合、

```php
if(比較演算){
   命令文
}elseif(比較演算){
   命令文
}
```
または

```php
if(比較演算){
   命令文
}else if(比較演算){
   命令文
}
```
で表せます。
しかしJSは、

```javascript
if(比較演算){
   命令文
}else if(比較演算){
   命令文
}
```
でしか表せません。
「elseif」という書き方ではエラーが起きます。
PHPとJSでは似ているようで違うので気をつけるようにしましょう。←(これは自己暗示です)
プログラミング初心者であるため、内容に誤りがあるかもしれません。
平成29年度情報処理・通信技術者派遣料金


[平成29年度 労働者派遣事業報告書の集計結果](https://www.mhlw.go.jp/content/11654000/000496801.pdf)


が公表されたため(平成31年3月29日)賃金部分だけ抜粋。
IT関連の技術者のため、情報処理・通信技術者の項目を使用しています。

>昨年のは[平成28年度情報処理・通信技術者派遣料金](https://qiita.com/sacred-sanctuary/items/1960c826d7b8dd0798d7)を参照

#派遣料金
![平成29年度労働者派遣事業報告書派遣料金.png](https://qiita-image-store.s3.amazonaws.com/0/170755/89f89f08-566c-07d5-e132-305e07c95ce5.png)

##派遣料金：派遣労働者１人１日（８時間）当たりの平均額
情報処理・通信技術者(一般派遣)の平成29年の派遣料金は_31,404円/日(8H)_
情報処理・通信技術者(特定派遣)の平成29年の派遣料金は_32,034円/日(8H)_
##派遣料金：一時間当たり
一時間に換算すると
一般派遣では_3,925.5円/時(1H)_
特定派遣では_4,004.25円/時(1H)_
となります。
##派遣料金：一ヶ月当たり
一ヶ月に換算すると
一般派遣では_628,080円/月(20日)_位
特定派遣では_640,680円/月(20日)_位
となります。

##派遣料金の参考単価表
###一般派遣参考単価表
| 契約時間 | 平均単価 |
|:-----------|------------:|
| 160H | 628,080円 |
| 140H - 180H | 549,570円 - 706,590円 |
| 140H - 200H | 549,570円 - 785,100円 |
###特定派遣参考単価表
| 契約時間 | 平均単価 |
|:-----------|------------:|
| 160H | 640,680円 |
| 140H - 180H | 560,596円 - 720,765円 |
| 140H - 200H | 560,596円 - 800,850円 |
#派遣労働者の賃金
![平成29年度労働者派遣事業報告書派遣労働者の賃金.png](https://qiita-image-store.s3.amazonaws.com/0/170755/965dcde9-6617-6fce-8e3c-ab8ee9ceca78.png)

##派遣労働者の賃金：派遣労働者１人１日（８時間）当たりの平均額
情報処理・通信技術者(一般派遣)の平成28年の賃金は_19,054円/日(8H)_
情報処理・通信技術者(特定派遣)の平成28年の賃金は_19,375円/日(8H)_
##派遣労働者の賃金：時給
一時間に換算すると
一般派遣では_2,381.75円/時(1H)_
特定派遣では_2,421.875円/時(1H)_
となります。
##派遣労働者の賃金：月給
一ヶ月に換算すると
一般派遣では_381,080円/月(20日)_位
特定派遣では_387,500円/月(20日)_位
となります。
※あくまでも残業０時間だった場合の派遣労働者の賃金になります。
残業が発生する場合は上記時給から計算すると一時間で約3000円ほどの計算になるかと思います。

##派遣労働者の賃金：年収
一年に換算すると
一般派遣では_4,572,960円/年(12ヶ月)_位
特定派遣では_4,650,000円/年(12ヶ月)_位
となります。
※あくまでも残業０時間だった場合の派遣労働者の賃金になります。


#マージン率
上記から計算すると
情報処理・通信技術者(一般派遣)の平成29年のマージン率は_約39.3%_となります。
情報処理・通信技術者(特定派遣)の平成29年のマージン率は_約39.5%_となります。

#マージン率からの参考給料
| 単価 | 月収 | 年収 |
|:-----------|------------|------------:|
| 60万円 | 36万円 | 432万円 |
| 65万円 | 39万円 | 468万円 |
| 70万円 | 42万円 | 504万円 |
| 75万円 | 45万円 | 540万円 |
| 80万円 | 48万円 | 576万円 |
| 85万円 | 51万円 | 612万円 |
| 90万円 | 54万円 | 648万円 |

#その他
（旧）特定労働者派遣事業に係る経過措置の
経過措置期間は平成30年9月29日までです。
平成30年9月30日以降は、
（旧）特定労働者派遣事業が行えなくなります！
>[（旧）特定労働者派遣事業を行っている事業主の皆さまへ
](http://www.mhlw.go.jp/file/06-Seisakujouhou-11600000-Shokugyouanteikyoku/0000178229.pdf)を参照

平成31年4月1日現在は特定派遣では働くことは出来ません。
observatoryでWebアプリケーションの脆弱性診断

# はじめに

[前回](https://qiita.com/yuxzux/items/523f1832b22a131a06f0)に引き続きウェブアプリケーションの脆弱性診断です。
observatoryも使ってみました。

### observatoryとは
mozillaが提供している脆弱性診断サービスです。
URLを入力するだけで100点満点で採点してくれます。とっても手軽です。
[スコア表](https://github.com/mozilla/http-observatory/blob/master/httpobs/docs/scoring.md)

# 診断

使い方は簡単。
[ここ](https://observatory.mozilla.org/)にアクセスして、診断対象のURLを入力するだけ。

# 結果と対策

55点。。
結果が見やすいですね。
![capt9.png](https://qiita-image-store.s3.amazonaws.com/0/271751/e5714786-3ab8-c277-cf1f-ab26566cc46a.png)

Laravelでの対策は[こちら](https://danieldusek.com/blog/2/enabling-security-headers-for-your-website-with-php-and-laravel)を参考にさせてもらいました。

### CSPの設定

下記で設定したところ、さらに引っかかりました。
`content-security-policy: style-src 'self'`
![capt10.png](https://qiita-image-store.s3.amazonaws.com/0/271751/15373f25-c54e-dfa0-1a8e-2ce2f3a8428e.png)

- Blocks execution of inline JavaScript by not allowing 'unsafe-inline' inside script-src

javascriptやcssのリソースを制限する指定です。ここで指定したリソースのみ許可されます。
'unsafe-inline'は攻撃の対象となってしまうので、推奨はされないようですが、ワンタイムのハッシュを用意するのが面倒なので、'unsafe-inline'を設定します。

selfも許可したいのでこんな感じです。
`Content-Security-Policy: script-src 'self' 'unsafe-inline'`


- Blocks execution of plug-ins, using object-src restrictions

オブジェクト（画像など）のリソースを制限する指定です。ここで指定したリソースのみ許可されます。

selfのみ許可します。
`Content-Security-Policy: object-src 'self'`


- Clickjacking protection, using frame-ancestors

<frame>, <iframe>, <object>, <embed>, or <applet>のリソースを制限する指定です。
今回は使う予定がないので、拒否を設定します。
`Content-Security-Policy: frame-ancestors 'none'`

- Deny by default, using default-src 'none'

デフォルトで使うリソースの指定です。
他の場所で明示的に許可設定をしているため、noneを設定します。
`Content-Security-Policy: default-src 'none'`

- Restricts use of the <base> tag by using base-uri 'none', base-uri 'self', or specific origins

baseは使う予定がないので、noneを設定します。
`Content-Security-Policy: base-uri 'none'`

- Restricts where <form> contents may be submitted by using form-action 'none', form-action 'self', or specific URIs

フォームアクションはselfを設定します。
`Content-Security-Policy: form-action 'self'`

# 最後に

上記対策を施して、最終的に結果はB+となりました。
`script-src 'unsafe-inline'`の除去とCSRFのトークンのsecure化をしないと、
満点には届かなそうです。。

参考：
- [HSTS (HTTP Strict Transport Security) の導入](https://qiita.com/takoratta/items/fb6b3486257eb7b9f12e)
- [コンテンツセキュリティポリシー (CSP)](https://developer.mozilla.org/ja/docs/Web/HTTP/CSP)
Azure App ServiceでCache-Controlヘッダ（など）を編集する

# はじめに
Azure App Service で、フロント側のファイルをキャッシュしないように設定したい。
# Apache の場合
キャッシュマニフェストを使って設定できる。以下が簡単な例。

```cache.appcache
CACHE MANIFEST

NETWORK:
*
```
しかし、これを書いた時点で非推奨になっている。
今だとサービスワーカーとか？（やってない）
# App Service の場合
基本的なこととして、**App Service は Apache ではない**らしい。
雰囲気で App Service を使っていたので、気付くのに時間がかかった。

App Service は IIS というサーバソフトを使っている。
IIS で目的を達成するためには、`web.config` というファイルで設定する。
Kudu を開いて、`D:\home\site\wwwroot`に`web.config`を作成する。
中身は

```web.config
<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Cache-Control" value="no-store" />
                <add name="Pragma" value="no-cache" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>
```
これでコンソールなどを使って確認して、ヘッダがちゃんとついていれば成功。

# おわりに
App Service は Apache ではないということに気付くのが一番時間がかかった。
パスとか拡張子単位での設定も試したい。
VeeValidateでカスタマイズしたエラー文言に項目名を使用する方法

備忘録。

# エラー文言に項目名を使用する

```JavaScript:plugin/veeValidate.js
import Vue from 'vue'
import VeeValidate, { Validator } from 'vee-validate'

const dictionary = {
  ja: {
    messages: {
      required (n) {
        return n + 'は必須項目です'
      }
    }
  }
}

Validator.localize(dictionary)
Vue.use(VeeValidate, Validator)
```

.vueのtemplate側では次のように、data-vv-asを指定する。

```html
<input
  v-model="email"
  v-validate="'required'"
  data-vv-validate-on="blur"
  data-vv-as="メールアドレス"
  type="text"
  name="email"/>
```

#エラー文言にmax、minの数値を使用する

```JavaScript:plugin/veeValidate.js
import Vue from 'vue'
import VeeValidate, { Validator } from 'vee-validate'

const dictionary = {
  ja: {
    messages: {
      max(n, e) {
        return n + 'は' + e[0] + '文字以内で入力してください'
      }
    }
  }
}

Validator.localize(dictionary)
Vue.use(VeeValidate, Validator)
```

```html
<input
  v-model="password"
  v-validate="'required|max:16'"
  data-vv-validate-on="blur"
  data-vv-as="パスワード"
  type="password"
  name="password"/>
```
Go言語のtimeパッケージのAddDateで1ヶ月前が当月になっていた件

# はじめに
こんにちは。tomohiroです。

今回はGo言語のtimeパッケージのAddDateを使った時に1ヶ月前が当月になったことについて書きます。日本語がおかしいですが、こうなるんです。

## 何をしようとしていたか
タイトル部分だけの抜粋ですが、以下の内容で定期的にSlackにポストするバッチを書いて動かしてました。

```golang
title := fmt.Sprintf("先月分と今月分: %s-%s\n", time.Now().AddDate(0, -1, 0).Format("200601"), time.Now().Format("01"))
```
バッチ実行時の当月と先月の年月を取得して表示させたくて、

```golang
先月分と今月分: 201902-03
```
のようになることを期待していました。というかしばらくはその通りに動いてました。

## 何が起こったか
3月29日のバッチ実行時、バッチは実行され、エラーなく終了ました。ここまではいいです。
しかし内容が

```golang
先月分と今月分: 201903-03
```
となっているではありませんか。
あれ？先月取得できませんけど？


## 原因
timeパッケージのAddDateメソッド仕様でした。
AddDateをサクッと年月日を簡単に移動できると思っていたんですけど、穴がありました。
以下、リンクを置いておきます。

[Package Time](https://golang.org/pkg/time/#Time.AddDate "Package Time")

```text

AddDate returns the time corresponding to adding the given number of years, months, and days to t. For example, AddDate(-1, 2, 3) applied to January 1, 2011 returns March 4, 2010.

AddDate normalizes its result in the same way that Date does, so, for example, adding one month to October 31 yields December 1, the normalized form for November 31.
```

簡単にいうと計算後の日付が存在しなかったらうまく正規化するよーとのこと。
つまり今回の話だと

1. 3/29にバッチが実行される
1. 3/29の1ヶ月前は2/29だがAddDateにて存在しないので3/1と変換される
1. バッチでの表示内容は201903-03となる

## 解決方法
あまり賢くないやり方なのかもしれませんが、月初を求めそこから1ヶ月前を求めるよう対応しました。

```golang
thisMonth := time.Date(time.Now().Year(), time.Now().Month(), 1, 0, 0, 0, 0, time.Local)
```

# 終わりに
最後まで目を通していただきありがとうございました。
こうすればもっと楽だぞとか、そこ間違えてない？みたいなのありましたらコメントいただけますと幸いです。
インスタンス変数について

#インスタンス変数
　インスタンス変数とは、Rubyにおけるモデルオブジェクトのカラムデータを、変数として処理するためのものです。
　これがあるので、いちいちカラムデータを投入せずにメソッドを組むことができます。

例えば、

```Ruby:user.rb
class User

  attr_accessor :name, :age

end
```

のような形でインスタンス変数を設置します。



#インスタンス変数の初期化
　インスタンス変数は設置後、初期化メソッドを作成しなければなりません。

```Ruby:user.rb
class User

  attr_accessor :name, :age

  def initialize(name:,age:)
      self.name = name
      self.age = age
  end

end
```

これは、セットで覚えておいたほうが良いかもしれません。



#今回エラーが出たところ
　今回、UserモデルでCSVインポート機能を実装しようと思ったのですが、Rakeタスクをターミナルで実行してみると以下のようなエラーが出ました。

```Ruby:
import start
rake aborted!
NoMethodError: undefined method `fetch_value' for nil:NilClass
```

この

```Ruby:
undefined method `fetch_value'
```

というエラーは、モデルオブジェクトを作成できないよ、という意味らしいです。
つまり、Rakeタスクで処理を行う際には、上位クラスにて値を代入しているので、わざわざUserモデルでinitializeメソッドをオーバーライドしてくれるな、というメッセージだそうです。

確かに、Rakeタスクって拡張子が「.rake」ですし、モデルも定義していないのに機能実装できるのはなぜだろうと思っていたのです。

上位クラスがよろしくやってくれていたんですね。

よって、initializeメソッドをコメントアウトすることで無事にCSVインポートすることができました。
メール送信サービスのOSSまとめ

# [phpList](https://www.phplist.com/)
電子メールのメーリングリストを管理するオープンソースソフトウェアである。PHPで書かれ、MySQLデータベースに情報を保持する。
phpListはGPLの下に置かれ、自由に配布できる。Tincanが後援している。

　言語:PHP

#[Sympa](https://www.sympa.org/)
Sympa (「サンパ」または「シンパ」。フランス語で「かっこいい」「同感」といった意味、またSYstème de Multi-Postage Automatique〔自動同報システム〕の頭字語) は、メーリングリスト管理ソフトウェア。Christophe Wolfhugelが、同目的のソフトウェアであるTULPの後継として開発をはじめた (TULPの開発は間もなく中断された)。
SympaはGNU一般公衆利用許諾契約書に基づき公開されるフリーソフトウェアである。

　言語:Perl、一部でC言語

#[postal](https://github.com/atech/postal)
Postalは、WebサイトおよびWebサーバーで使用される完全機能のメールサーバーです。Sendgrid、Mailgun、またはPostmarkだが、オープンソースで自分のサーバー上で実行できる状態にあると考えてください。Postalは、独自のメール処理要件を満たすためにaTech Mediaによって開発されました。それ以来、コミュニティのためのオープンソースプロジェクトとしてリリースすることを決定しました。

　言語:Ruby、Node.js（JavaScriptコンパイル用）
Google 日本語入力に「令和」を辞書登録する

PCから令和って打ちたいのに候補に出てこない💢
なんてときにはさっさと辞書登録しちゃいましょう。

ここはQiitaなのでできるだけコマンドでやってみます。
##コマンドプロンプト
###その１　辞書を開いてから
``"C:\Program Files (x86)\Google\Google Japanese Input\GoogleIMEJaTool.exe" --mode=dictionary_tool``
これで辞書ツールが開きましたね。メニューの【追加】ボタンを押して登録しましょう。

###その２　直接登録画面を開く
``"C:\Program Files (x86)\Google\Google Japanese Input\GoogleIMEJaTool.exe" --mode=word_register_dialog``
こっちだと単語登録画面が直接開きます。

よみを【れいわ】単語を【令和】で登録しましょう。

↑ここもスクリプト化する方法があったらどなたかコメント欄で教えて下さい。

祭りに乗り遅れるな！
自動ツールの機能と選び方法

#1.アプリケーション開発のアプローチ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/332907/3b0790e9-9e38-38fb-ed74-46f98a715c71.png)

#2.ツールとApexの対応関係
![image.png](https://qiita-image-store.s3.amazonaws.com/0/332907/ba9c92f7-3c34-0d36-d6f3-d65f4f8ffdcd.png)

#3.自動ツールの機能
![image.png](https://qiita-image-store.s3.amazonaws.com/0/332907/ad0efdf4-93e9-f7db-ae2d-1240f4891d8a.png)

#4.ツールの選び方法
![image.png](https://qiita-image-store.s3.amazonaws.com/0/332907/36ac030e-c270-97f5-6680-272515098353.png)

#5.参照資料
**・[自動ツールの機能](https://help.salesforce.com/articleView?id=process_which_tool.htm&type=5)**
**・[適切な自動化ツールの選択](https://trailhead.salesforce.com/ja/content/learn/modules/business_process_automation/process_whichtool)**
twigで compile済templateのキャッシュを有効にする

twigもsmarty同様、内部で .twigを .phpに変換して実行しています。

.tiwgを.phpにコンパイルしたものをキャッシュする仕組みがあってもよさそうなもんですが
ブログなどに公開されている「twigの使い方」系の記事には特に情報が載ってない。

数kb～数十kb 程度のソースコンパイル時間なんて誤さ程度の時間だろうし、対応してないのかなー、とずっと思ってたのですが、そんなことはなかった。

```php
$loader = new Twig_Loader_Filesystem($templateDir);
$cache = new Twig_Cache_Filesystem($templateCacheDir);
$twig = new Twig_Environment($loader, array('cache' => $cache));
```

当然ながら、$templateCacheDirectory は apache等のweb server や php-fpm等のプログラムから0777でアクセスできる必要があるみたい。
OWASP ZAPでWebアプリケーションの脆弱性診断

# はじめに

webアプリケーションのセキュリティ強度を高めるため、OWASP ZAPというツールを使って見ました。
※診断するwebアプリケーションはLaravel 5.5を使っています。

### OWASP ZAPとは

OWASPというセキュリティの専門家が集まったコミュニティが作ったツールで、IPAも推奨しているようです。
参考：[About The Open Web Application Security Project](https://www.owasp.org/index.php/About_The_Open_Web_Application_Security_Project)
参考：[IPA テクニカルウォッチ「ウェブサイトにおける脆弱性検査手法(ウェブアプリケーション検査編)」](https://www.ipa.go.jp/files/000054737.pdf)

# 診断する
ツールの使い方はいたって簡単でした。
参考：[OWASP ZAPというWebアプリの脆弱性診断ツールの使い方（入門編）](https://kama3.jp/archives/214)

### 設定項目

・スパイダー

| カテゴリ          | テスト名 |    しきい値    |   強　度　    |
|:-----------------|:------------------|:-------------------:|:------------------:|
|インジェクション|CRLFインジェクション|Low|Low|
|インジェクション|Server Side Code Injection|Low|Low|
|インジェクション|Server Side Include|Low|Low|
|インジェクション|SQLインジェクション|Low|Low|
|インジェクション|クロスサイト・スクリプティング(持続型)|Low|Low|
|インジェクション|クロスサイト・スクリプティング(持続型)-Prime|Midium|Low|
|インジェクション|クロスサイト・スクリプティング(持続型)-スパイダー|Midium|Low|
|インジェクション|クロスサイト・スクリプティング(反射型)|Low|Low|
|インジェクション|バッファオーバーフロー|Low|Low|
|インジェクション|パラメータ改ざん|Low|Low|
|インジェクション|リモートOSコマンドインジェクション|Low|Low|
|インジェクション|書式文字列エラー|Low|Low|
|サーバセキュリティ|パストラバーサル|Low|Low|
|サーバセキュリティ|リモートファイル　インクルージョン|Low|Low|
|一般|Script Active Scan Rules|Low|Low|
|一般|外部リダイレクト|Low|Low|
|情報収集|ディレクトリブラウンジング|Low|Low|

# 結果と対策

5つもアラートが上がりました。1つずつ対策します。

- X-Frame-Optionsヘッダーの欠如

クリックジャッキングをうける脆弱性のようです。iframeを使っていないので、一括でX-Frame-Optionsを設定しました。
参考：[LaravelでX-Frame-Optionsを設定する](https://qiita.com/sawadashota/items/7cf7aba86a5bd4199c30)

>リスク：Medium
>説明：「クリックジャッキング」攻撃を防止するためのX-Frame-OptionsヘッダーがHTTPレスポンスに含まれていません。

- CookieのHttpOnly属性が未設定

LaravelのCSRFトークンはデフォルトでfalseのようです。CSRFトークンはセッション管理用ではないので問題なしです。
参考：[LaravelのCSRFトークンのhttpOnly属性がfalseとなっている事によるセキュリティリスクの有無](https://teratail.com/questions/95887)

>リスク：Low
>説明：cookieにHttpOnly属性が設定されていないため、JavaScriptによるcookieへのアクセスが可能です。
悪意のあるスクリプトが本ページで実行可能な場合、cookieにアクセスして別のサイトへcookieを送信することができます。
もしスクリプトがアクセス可能なcookieがセッション管理用である場合、セッションハイジャック攻撃が成立する可能性があります。

- WebブラウザのXSS防止機能が有効になっていません。

上記でX-Frame-Optionsを設定したときのように行を追加しました。
`$response->header('X-XSS-Protection', '1; mode=block');`

>リスク：Low
>説明：Web ブラウザのXSS防止機能が有効になっていない、またはWebサーバからのHTTPレスポンスヘッダ 'X-XSS-Protection' が無効になっています。

- X-Content-Type-Optionsヘッダの設定ミス

上記と同様に行を追加します。
`$response->header("X-Content-Type-Options: nosniff");`

>リスク：Low
>説明：The Anti-MIME-Sniffing header X-Content-Type-Options was not set to 'nosniff'. This allows older versions of Internet Explorer and Chrome to perform MIME-sniffing on the response body, potentially causing the response body to be interpreted and displayed as a content type other than the declared content type. Current (early 2014) and legacy versions of Firefox will use the declared content type (if one is set), rather than performing MIME-sniffing.

- ブラウザによるパスワードのオートコンプリート

これは便利なので無視しました。。


>リスク：Low
>説明：パスワード型入力を含む HTML フォーム入力要素でオートコンプリート属性が無効になっていません。パスワードはブラウザーに格納され、取得される可能性があります。
pandas のread_sas()でsas7bdatを読み込むときに文字化けする

# 問題
pandasで日本語が含まれるsasのファイル形式を読みこむと日本語が文字化ける
例えば
```
import pandas as pd
hoge = pd.read_sas('hogehoge.sas7bdat')
```
ってやると日本語が文字化けする
```
import pandas as pd
hoge = pd.read_sas('hogehoge.sas7bdat', encdofing='cp932')
```
とかにしてみると今度はエラーが出る

こまった
# 解決
sas7bdatパッケージをインストールしてそれ経由で読みこむ
# コード(らしきもの)
インストール
```
pip install sas7bdat
```
読み込み
```
from sas7bdat import SAS7BDAT
f=SAS7BDAT("hogehoge.sas7bdat", encoding='cp932').to_data_frame()
```
たぶんこれで動くようになるはず
Windowsのレジストリに「令和」を追加する。

新しい元号が発表されましたね。
マイクロソフトの更新を待てない人は以下をコピペして追加しよう。
※自己責任で！

##パワーシェル

```
Set-ItemProperty "HKLM:\SYSTEM\CurrentControlSet\Control\Nls\Calendars\Japanese\Eras" -name "2019 05 01" -value "令和_令_Reiwa_R"
```

##コマンドプロンプト

```
REG ADD HKLM\SYSTEM\CurrentControlSet\Control\Nls\Calendars\Japanese\Eras /v "2019 05 01" /t REG_SZ /d "令和_令_Reiwa_R"
```

![ReiwaRegistry.PNG](https://qiita-image-store.s3.amazonaws.com/0/115778/6221af46-724a-73d5-3278-dae09fcd1fa0.png)

あほなことしてないで、正しい知識は↓ね
https://support.microsoft.com/ja-jp/help/4469068/
PHPにおけるreturnとbreak

プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。

#はじめに
私は、処理を終わらせるという意味を持ったコードを２つ知りました。
それは、「break」と「return」です。
これらは、処理を終わらせるというイメージがあるだけで、区別することができていませんでした。
そして、私は調べました。
#「break」の役割

```PHP
foreach($配列名 as $値){
　---
  break [数値]
}
```
主に、breakは、forなどの繰り返し文のループ処理を終了するときに使用します。

#「return」の役割

```PHP
function 関数名()
{
  ---
  return $返り値;
}
```

主に、関数を途中で終わる時は、返り値を指定せずに終わらせる場所でreturnのみを記述することで制御が呼び出され元に戻ります。

#まとめ
大まかなイメージで言うと、１つの構文に対して「return」は全部抜ける、「break」は1個抜けるという認識です。
調べ始めると、「exit」という呼び出されたその場で終了の処置を行うコードもありました。
構文や見やすさ、認識のしやすさのためにもそれぞれを使うことが必要だと感じました。
iPLAssインストールまとめ

# 1. iPLAssとは
[iPLAss](https://iplass.org/)とは、エンタープライズクラスのシステム開発における生産性向上を主目的とした、javaベースの開発プラットフォームです。
MVCパターンベースの開発フレームワーク上にノンプログラミングでの開発を可能とする機能を提供し、
高い生産性とカスタマイズ性を両立させます。

# 2. 前提条件
本手順は以下を前提条件としています。

- Windows環境であること。
- JDK11（OpenJDK）がインストール済みであること。

# 3. 環境構築
## a. Apache Tomcat(以下、Tomcat)のインストール
Tomcatの [ダウンロードサイト](https://tomcat.apache.org/download-90.cgi) からTomcat 9のインストーラをダウンロードします。

```
Coreの"32-bit/64-bit Windows Service Installer"をダウンロード
```

ダウンロードしたインストーラを実行し任意の場所にインストールします。

## b. MySQLのインストール
MySQLの [ダウンロードサイト](https://dev.mysql.com/downloads/windows/installer/5.7.html) からMySQL Installer(5.7)のインストーラをダウンロードします。

```
"Windows (x86, 32-bit), MSI Installer"をダウンロード
```

ダウンロードしたインストーラを実行し任意の場所にインストールします。
インストールの際は以下を設定してください。

```
Setup Type = Server only
Type and Networking:ConfigType = Dedicated Machine
```

MySQL(my.ini及びmy.cnf)を設定します。
以下の例の通り、設定を変更してください。

> 設定ファイルはデフォルトでMySQL Server本体のフォルダにmy-default.iniがありますが、こちらではなく、
> データベースに紐づくmy.ini（Windowsの場合、デフォルトC:\ProgramData\MySQL以下にあるmy.ini）を編集してください。

```
　　[client]
　　default-character-set=utf8mb4

　　[mysql]
　　default-character-set=utf8mb4

　　[mysqld]
　　character-set-server=utf8mb4
　　max_allowed_packet=100M
　　transaction-isolation=READ-COMMITTED
　　query_cache_size=0 
　　lower_case_table_names=1
　　innodb_file_format=Barracuda 
　　innodb_file_per_table=1
　　innodb_large_prefix=1 
　　internal_tmp_disk_storage_engine=MyISAM
```

その他の項目は適宜状況に応じて変更してください。
ファイルの修正が完了したら、MySQLを再起動してください。

## c. MySQL JDBCドライバのインストール
ダウンロードしたファイルを任意の場所に展開します。

```
C:\Program Files (x86)\MySQL\Connector J 8.0
```

展開したフォルダにあるJDBCドライバファイルを前手順でインストールしたTomcatの次の場所へコピーします。

```
%CATALINA_HOME%\lib
```
※「CATALINA_HOME」はTomcatをインストールしたディレクトリを指します。

iPLAssホームディレクトリ
環境変数「IPLASS_HOME」に設定されたディレクトリがiPLAssホームディレクトリとなります。
特に設定がない場合は次のディレクトリがiPLAssホームディレクトリとなります。

```
%USERPROFILE%\.iplass
```
※「USERPROFILE」だと、半角スペースとか含まれてうまく動作しないことがあるので、「IPLASS_HOME」を環境変数に設定しましょう。

#4. iPLAssのインストール
## a. インストーラファイル（iplass.war）の取得
インストーラファイルが手元にない場合、次のいずれかの方法で取得します。
[ダウンロードサイト](https://iplass.org/downloads/)からiPLAss Installerをダウンロードします。

## b. Tomcatへのiplass.warのデプロイ

取得した「iplass.war」をTomcatの次の場所へコピーします。

%CATALINA_HOME%\webapps
Tomcatが起動していない場合はWARファイルをコピー後、Tomcatを起動してください。
Tomcatが既に起動している場合、WARファイルをコピーすると自動的にデプロイが開始されます。

## c. セットアップ画面の表示

Webブラウザに次のURLを入力しセットアップ画面にアクセスします。
iPLAssセットアップ画面のURLは下記となります。

```
http://localhost:8080/iplass
```
または

```
http://＜サーバのホスト名またはIPアドレス＞:8080/iplass
```
※Tomcatのポート番号を変更した場合は設定したポート番号を指定してください。
※Windows serverだと、administratorでインストールしないと権限回りでおかしくなるので、注意が必要。

とりあえず、ここまで。
いまさら聞けないMavenの使い方

# maven 使い方

## はじめに
SAP Cloud Platform の WebIDE Full-stack から 
Java アプリケーションのプロジェクトを新規作成した場合に利用されます。

Java界隈のビルドツールの知識が `ant` で止まっていたので
使い方について少し調べたことをまとめています。

## maven とは
`Maven`とは、Javaプログラムをビルドするためのツールです。
`pom.xml`にプログラムの情報を記載し、必要なモジュールのインストールや
コンパイル、モジュールのデプロイなどをコマンドで実行してくれます。

## インストール
homebrew を使用してインストールします。
```
brew install maven
```

## プロジェクト定義(pom.xml)の説明

project要素配下には、以下の様な定義が記載できます。

|要素|説明|
|---|---|
| modelVersion | pomのバージョン |
| groupId | プロジェクト名（一意であること）。ルートパッケージ名を指定するのが一般的らしい。 |
| artifactId | 成果物名。作成する JAR や WARなどの名前に使用 |
| version | プロジェクトのバージョン |
| packaging | 成果物の形式。jarやwarを指定 |
| name | 表示名。 ドキュメント作成時などで使用 |


## 実行方法
### ビルド結果を削除
```
mvn clean
```

### コンパイル
```
mvn compile
```
ソースファイルのコンパイルを実施
対象ソースは`src/main/java/`配下

コンパイル後のクラスファイルは`target/classes`に出力

### テスト
```
mvn test
```
以下のパターンに該当するファイルでテスト実行。

- **/Test*.java
- **/*Test.java
- **/*TestCase.java


### 成果物作成
```
mvn package
```
`target`に成果物を作成

ファイル名は、pom.xmlの artifactIdとversionとpackagingにて決定。

## pom.xml 記入
主要素の記載方法と設定値

### 依存関係の解決
```
<dependencies>
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>javax.servlet-api</artifactId>
        <version>3.1.0</version>
        <scope>provided</scope>
    </dependency>
    <dependency>
    ~~~
    </dependency>
</dependencies>

```

|要素|説明|
|---|---|
| dependencies | 要素内に記載 |
| dependency | 要素１つあたり１モジュールを記載 |
| groupId | プロジェクト名（一意であること）。ルートパッケージ名を指定するのが一般的らしい。 |
| artifactId | 成果物名。作成する JAR や WARなどの名前に使用 |
| version | プロジェクトのバージョン |
| scope | ライブラリがクラスパスに追加する条件指定 |

#### scope に設定できるもの
| scopeへの設定値 | 追加されるタイミング |
|---|---|
| compile | デフォルト値。全ての状況でクラスパスに追加 |
| provided | コンパイル時のみクラスパスに追加 |
| runtime | テストまたは通常実行のときにクラスパスに追加 |
| test | テスト時のみ必要な場合に指定します |
| system | システムのライブラリを明示的にクラスパスに追加する場合。リポジトリを検索しないので注意。|
新元号発表されたし各言語の西暦→和暦に関してまとめてみる。

Windowの新元号対応は今はレジストリで管理されているので
ネットワークが外にさえ繋がっていればWindows Updateでなんとかなる。

MacはNSJapaneseCalendarとやらがあるみたいだけどまぁそのうちこっそりアップデートが来るでしょう。

では西暦から元号（和暦）を表示するプログラムを書くには各言語でどうしたら良いのだろうと思いまとめてみた。

## Ruby
```ruby
Date.parse("H31.04.01")
Date.new("2019, 4, 1).jisx0301
```

フォーマットは`SYYMMDD`。
warekiという素敵なライブラリも。
https://github.com/sugi/wareki

## C
素では無理そう。あとは環境に依存しそう。
そういう言語は大体西暦和暦テーブル持ってて引き算してる。

西暦を和暦に変換するプログラム
https://tondol.hatenablog.jp/entry/20070829/1188314937
Cのライブラリは大量にありそうなので割愛。

## C＃
```c#
System.Globalization.CultureInfo ci =
    new System.Globalization.CultureInfo("ja-JP", false);

date.ToString("gy年MM月dd日", ci);
```

冒頭にも書いたようにWindowsアップデートかレジストリへの追加が必要。
フォーマットは`gyMMDD`

## PHP
PHPも標準では用意はされていなさそう。
引き算方式で出してるのは以下

PHPで西暦⇔和暦変換
https://gist.github.com/kazua/8135329

素敵なライブラリ？は以下。
PHPで和暦・日本語曜日を使う
https://qiita.com/chiyoyo/items/da32649b0e04957856c1

## Python
当然のように標準ではなさそう。

素敵にまとめられていた記事。
pythonで和暦
https://qiita.com/arc279/items/eed44771027a4e2b8708

## Java
```java
Locale locale = new Locale("ja", "JP", "JP");
Calendar calendar = Calendar.getInstance(locale);

DateFormat wareki = new SimpleDateFormat("GGGGy年M月d日", locale);
```

G4個で漢字（令和）、G1個で（R）表記。
流石に大丈夫だろうけど上記はJava6から。

## JavaScript
検索すると引き算方式が先頭に出てくるけど
toLocaleDateStringでいけそう。

```javascript
const dt = new Date(2019, 0, 1).toLocaleDateString("ja-JP-u-ca-japanese");
```

第二引数が0でおや？となったけどどうやら月は0オリジン。きもっ。
moment.jsも和暦は対応してないのでまたnode_modulesが太る。

## Perl
引き算方式。
[ Perl ] 西暦から元号のついた和暦に変換する
http://hensa40.cutegirl.jp/archives/2561

## VBscript
引き算方式。
https://selifelog.com/blog-entry-173.html

## Swift
用意されてた。

```swift
let f = DateFormatter()
f.locale = Locale.current
f.calendar = Calendar(identifier: .japanese)
f.dateFormat = "Gy" // 平成31
```

書き慣れた言語以外を調べて思うのは
業務で使いやすい言語はこういうところが
こなれてる言語だと思う。
でももうシステム上の和暦はやめよう。
Python奮闘記②

こんにちは。
[未来電子テクノロジー](https://www.miraidenshi-tech.jp/intern-content/program/)
でインターンをしているodattiです。

前回に続いて、Python奮闘記を書いていきます。
前回から学習を進めていくうちに、覚えなければならない内容がかなり増えてきて、頭が混乱してきました(笑)

そこで今回はここまで学んだ内容について、自戒の念を込めて一旦まとめようと思います。

#繰り返し処理①　for文
**for 変数 in リスト:**　で、リストの要素の分だけ「繰り返し処理」を行う。
たとえば、職業リスト(消防士、裁判官、歌手)があるとしたら、for文の後に
print("私は"+変数+"です")
をつけると、

私は消防士です
私は裁判官です
私は歌手です

といった具合に全部リストアップしてくれます！
べんり～(他人事)

```python
occupation = ['消防士','裁判官','歌手']

for me in occupation:
    print('私は' + me + 'です')
```

#繰り返し処理②　while文
while文は、whileの単語の意味の通り「～している間」という役割があります。
「while 条件式
　print~」
という要領です。
繰り返す値を更新したい場合は、printの後にさらに数式を足して更新します。

#「関数」と「引数」の違い
関数：input,printなどは関数の一種です。
引数：関数を引き出すための変数のこと
例）print("私は"+occupation_name+"です")
としたときのprintは関数、括弧の中の "私は"+occupation_name+"です" が引数です。

#その他注意点
**インデント**
インデントはとても重要な概念だと思います（何度もインデントのミスに苦しめられた）
同じ数の空白(4つのことが多い)を構成している文は複文(一つのブロック)
となる。

#まとめ
以上です。覚えることが多い言語なので、定期的に復習して内容をまとめると自分の思考も整理できるのでいいですね！
element ui carousel swipe

スライドショーってさ、スワイプでやりたいがね。
だからスワイプにできるようにと、ついでにレスポンシブ化しとくがね。

あー。んでもって一枚目だけ早めに読み込んでちょ。
2,3枚目だけ lazyload でええぇがね。


# 必要なライブラリ

・vue2-touch-events
・element ui
・VueLazyload

まずはこれで img タグを レスポンシブにしとく。

```css

<style>

    img.responsive {
        width: 100%;
        height: 300px;
        object-fit: cover;
    }

</style>


```


```template.vue

<div v-touch:swipe="swipeHandler">
    <el-carousel ref="photoFrame" :autoplay="false">
        <el-carousel-item v-for="(v,key) in data.photos" :key="key">
            <img v-if="key == 0" class="responsive" :src="'/gcp_storage/photo_300x300_' + v.id + '.jpg'">
            <img v-else class="responsive" v-lazy="'/gcp_storage/photo_300x300_' + v.id + '.jpg'">
        </el-carousel-item>
    </el-carousel>
</div>


```


```.js

<script>
    methods: {

        swipeHandler (direction) {

            if(direction == 'left'){
                this.$refs.photoFrame.next();
            }

            if(direction == 'right'){
                this.$refs.photoFrame.prev();
            }

        },
        
</script>


```

ソースはコピペじゃ動かんけど、さっしてちょ
バリデーションのエラーメッセージとflashメッセージの設定マニュアル

# バリデーションのエラーメッセージ

```html
 <% if @blog.errors.any? %>
    <div id="error_explanation">
      <h2><%= @blog.errors.count %>件のエラーがあります。</h2>
      <ul>

      <% @blog.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

<!-- もしくは -->

<% if @user.errors.any? %>
  <div id="error_explanation">
    <div class="alert alert-danger">
      The form contains <%= pluralize(@user.errors.count, "error") %>.
    </div>
    <ul>
    <% @user.errors.full_messages.each do |msg| %>
      <li><%= msg %></li>
    <% end %>
    </ul>
  </div>
<% end %>
```
ポイント：form_withタグ内の記述内容に対してバリデーションを行う場合は、本エラーメッセージの記述は、form_withタグ内で行う。
→form_withに関するエラーとして、記述するため。
* * *

# flashメッセージ

```ruby:layouts/application.html.erb
  -- 省略 --
<% flash.each do |message_type, message| %>
  <div class="alert alert-<%= message_type %>"><%= message %></div>
<% end %>
```
ポイント：bootstrapを利用することを想定し、classを挿入することができるように設定する。
【WPF】各コントロールの依存関係プロパティのデフォルト設定表(BindingModeやデフォルト値など)

WPFコントロールの主要プロパティのバインディングのデフォルト設定を記載してます。
[Reference Source](https://referencesource.microsoft.com/#PresentationFramework/src/Framework)より抜粋

|コントロール | プロパティ |(*1)BindingMode(BindsTwoWayByDefault) | UpdateSourceTrigger    | デフォルト値 |
|:-----------------|:-------------------|------------------:|:------------------:|:------------------:|
| TextBox |Text   | BindsTwoWayByDefault| LostFocus |
| Label|Content| false | - | null |
| Button|Content| false | -| null |
| CheckBox|IsChecked| BindsTwoWayByDefault| PropertyChanged | false|
| RadioButton|IsChecked| BindsTwoWayByDefault| PropertyChanged | false|
| ComboBox |SelectedIndex| BindsTwoWayByDefault| PropertyChanged | -1 |
| ComboBox |SelectedItem| BindsTwoWayByDefault| PropertyChanged | null |
| ComboBox |SelectedItems| BindsTwoWayByDefault| PropertyChanged | null |
| ListBox|SelectedIndex| BindsTwoWayByDefault| PropertyChanged | -1 |
| ListBox|SelectedItem| BindsTwoWayByDefault| PropertyChanged | null |
| ListBox|SelectedValue| BindsTwoWayByDefault| PropertyChanged | null |
| ListView|SelectedIndex| BindsTwoWayByDefault| PropertyChanged | -1 |
| ListView|SelectedItem| BindsTwoWayByDefault| PropertyChanged | null |
| ListView|SelectedValue| BindsTwoWayByDefault| PropertyChanged | null |
| TabControl|SelectedIndex| BindsTwoWayByDefault| PropertyChanged | -1 |
| TabControl|SelectedItem| BindsTwoWayByDefault| PropertyChanged | null |
| TabControl|SelectedValue| BindsTwoWayByDefault| PropertyChanged | null |
| DataGrid|SelectedIndex| BindsTwoWayByDefault| PropertyChanged | -1 |
| DataGrid|SelectedItem| BindsTwoWayByDefault| PropertyChanged | null |
| DataGrid|SelectedValue| BindsTwoWayByDefault| PropertyChanged | null |
| DataGrid|CurrentItem| false | PropertyChanged | null |
| DataGrid|CurrentColumn| false| PropertyChanged | null |
| DataGrid|CurrentCell| false  | PropertyChanged | Unset|


*1
BindsTwoWayByDefaultTwoWay, falseの場合は、Defaultが採用され、OneWayもしくはOneTimeが適応されます。詳しくはこちら
[Binding Mode](https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.data.bindingmode?view=netframework-4.7.2)
slowhttp の脆弱性が無いかをテストしてみよう

#概要

Slowhttpをご存知だろうか。
DOSの手法の一つで、セッションを多く貼ることによりサーバーのリソースを使い切らせようとする行為です。
適切にセッションが切断されないこと が本脆弱性の本質です。

#手法
手法に関しては下記のリンク（英語）に詳しくあります。
https://media.blackhat.com/bh-dc-11/Brennan/BlackHat_DC_2011_Brennan_Denial_Service-Slides.pdf

#slowhttp をテストする
下記のリンクからソースを取得し、自機以外のサーバーからテストしてみます。
https://github.com/shekyan/slowhttptest/wiki


##環境
私は以下の環境でテストしました。
Ubuntu 18 Desktop

##インストール
1. ソースを取得 ZIPで取得しても良いし、Githubに使い慣れている方はPullして使うもよし
2. ./configure
3. make
4. meke install

注意 : 2 の部分で足りないコンポーネントを言ってくるので "sudo apt-get install XXX" でインストールしていくと早い。gcc, c++ あたりは必要ですね。
ただし、"OpenSSL-devel" の場合は下記のように"libssl-dev"と読み替えること
> apt-get install "libssl-dev"

#実行
下記のようにつかいます。（下記のグラフと一致していません）
> ./slowhttptest -c 300 -B -l 300 -g -o test_log -i 300 -r 200 -t GET -u http://example.com/ -x 24 -p 3

とあるサイトの結果です。
このサイトには対策がされています。以下を参考に
1. Closedが順調に増えている
2. Service Available が続いている（ 全体が緑になっている）
3. (黄色の)コネクションが高まっておらず、収束している
![SLOWHTTP.JPG](https://qiita-image-store.s3.amazonaws.com/0/106545/faea397d-1adf-6bd5-a7f8-3ae423d91d5a.jpeg)

各ウェブサーバー毎に対応策が載っています。参考までに
How to Protect Against Slow HTTP Attacks
https://blog.qualys.com/securitylabs/2011/11/02/how-to-protect-against-slow-http-attacks
could not read CA certificate | docker for mac

#状況
環境はdocker for mac、docker-machine起動にはvertualboxを使用している。

Dockerの学習中にdocker-machineを起動したのち
Docker psコマンドを実行したら以下のエラーが表示された。

```error.shell

could not read CA certificate "/Users/example/.docker/machine/machines/docker-host1/ca.pem": open /Users/example/.docker/machine/machines/docker-host1/ca.pem: no such file or directory

```

#原因
どうやらホスト周りをdocker-machine起動時にいじっていたのが原因。
eval $(docker-machine env host1)などを実行していた。

#現状確認
まず現状を確認する方法として
Docker-machine lsを実行した際にACTIVEの項目に＊がついていたら
それは現在docker-machine上のコンテナを操作しているということになり
Docker for macのコンテナは操作対象になっていないということになる。

#対応方法
これを解消するコマンドとして

```unset.shell

 docker-machine env --unset

```

や

```unset2.shell

 eval $(docker-machine env -u)

```
を実行することでdocker-machineからdocker for macに操作対象を移すことができる。

#注意点
非常にわかりにくい例としてdocker-machine lsを実行しても
何も表示されない状態。つまりdocker-machine rmを実行した後の状態でも
前述のエラーが表示されることがある。

この場合でもdocker-machine env --unsetでエラーが解消された。
社会人１年目に何をしたかまとめてみた

## 初めに
ほぼエンジニア未経験だった僕が2019年4月1日を境に社会人2年目になるので、
今更ながら1年を振り返ってみました。
※個人の経験談です。

## 僕について
学生時代に某プログラミングスクールのメンターをしていました。
"A"という言葉の意味は"B"であるという知識ベースの勉強はしておらず、
開発の仕方や実装手順といった行動ベースに勉強していました。

## 4月
入社式も終わり、研修が始まります。
いわゆる社会人としてのマナー研修でした。
それに加えて弊社の事業に関する説明も受けました。

## 5月、6月
軍隊の期間が終わり、技術研修（*PHP*）に入ります。
同期の優秀さに劣等感を覚える月でした。
知識量、実装スピードにおいて全てが僕より上だったので自分はできない人間だと感じました。
ここで知識ベースの勉強もしておくべきだったと後悔しています・・・ｗ
最後に同期とグループを組んでグループ開発をし、社内で発表しました。楽しかったです。

## ７月
満を持して本配属。
配属先のチームは結成してから1年余りなので割と新しいチームに配属しました。
初めての案件は全く経験のない*Laravel*を使ってサービスの開発を始めました。
社会人エンジニアとしてようやくスタートしました。
この頃はワクワクしました。

## 8月
案件が本格化したが、なかなかうまくいかず。
先輩社員方も他の案件でドタバタしてるので自分でなんとかするしかない状況だと思ってた時期がありました。
ものすごく困惑していました。
API呼ぶ⇨いい感じのデータが取得できる⇨なんで！？って感じでした。

## 9月
ある程度形になってからリファクタリングも行いました。
１クラスのメソッド数で先輩社員と競争していました。
この頃から段々とLaravelの仕様を把握できるようになりました。
そして初めてユニットテストというものを書いてみました。
業務に慣れてきたかな・・・？といった感じでした。

## 10月
ユニットテストにも慣れて楽しくなってました。
そして無事、リリースしました。
ちなみにこの頃、今後担当するサービスのPVの撮影に出演しました！
僕の俳優デビューでｓ（殴

## 11月
チームにメンター制度が導入され、僕にもOJTが付きました。
新規APIを作成するタスクが来たので、初めてながらに作ってみました。
また、以前リリースしたサービスの不具合対応もしました。自分で開発したコンテンツなので
愛着がすごかったです。

## 12月
APIをリリースし、次はバッチ処理を書きました。バッチ処理も初めてです。
既存のデータを更新するバッチ処理で、特に苦労せず仕上げたかなと思いました。
余った時間を使って以前リリースしたのユニットテストを最新版に修正したりしていました。
そしてメインコンテンツであるサービスの改修案件に携わり、リリースさせました。
サービスの不具合対応も並行で作業していました。
もう完全に慣れている・・・気がします。

## 1月
サービスの不具合対応、APIの改修、サービスの改修案件を行いました。
自分の手によってサービスがより良いサービスになっていくことを実感しました。

## 2月

引き続きAPI、サービスの改修と行い、加えてサービスに新規機能を加える案件に携わりました。
また、PHPSTORMのGUIでユニットテストを行える環境を整備してチームの開発改善をしました。

## 3月
新規機能が無事リリースされ（ほぼ上司頼み）、PHPSTORMの環境整備とチーム全体のエラーログを覗いてチーム内に共有させる作業を行なっていました。


## まとめ
ほぼエンジニア未経験の新卒1年目でしたが、あらゆる方向に挑戦させていただいていたことに気づきました。
今後も新たなことに挑戦し続けたいと思っています。

## 新社会人諸君へ
これから怒涛の社会人生活を送ることになりますが、何事も楽しんでいきましょ。
text-align:center がズレてしまう理由

#text-align:center がズレるのはなぜ？
- そもそも使い方・書き方が間違えてる
- 他の要素に割り込まれている

のどっちかしかない。



##そもそも使い方・書き方が間違えてる
スペルミス、div要素に対して指定するなどの初歩的なミス。

##他の要素に割り込まれている
#### デフォルトCSSが機能している
ブラウザは各要素に対してあらかじめCSSが指定してるので、他の要素が邪魔をしているのかも。リセットCSSでググって初期化すべし。
####予想外のタグが機能している
例えば、ヘッダーのロゴや、メニューなんかがそう。

![スクリーンショット 2019-04-01 12.39.44.png](https://qiita-image-store.s3.amazonaws.com/0/302052/e0ea350c-ab31-b858-0b64-87e57bb54afb.png)

ヘッダーロゴを小さくすると中央揃えになる。
![スクリーンショット 2019-04-01 12.40.16.png](https://qiita-image-store.s3.amazonaws.com/0/302052/5e7f7da4-a337-20d8-9d36-f4bafa945307.png)
Windowsで令和に対応させる方法

Windowsはレジストリで元号対応されていますが、公式のアップデートが待てない僕みたいな人向け。

公式の説明はこちら↓

- 日本の元号の変更について - KB4469068  
https://support.microsoft.com/ja-jp/help/4469068/

# 4/26追記

レジストリ以外にも諸々の問題点が修正されたアップデートが公開されたようです。
窓の社の記事が参考になります。

- Microsoft、新元号“令和”対応のWindowsパッチを配信開始  
オプション扱い、連休前の適用はトラブルに注意  
https://forest.watch.impress.co.jp/docs/news/1182431.html

## 更新しようとしてみた

アップデートは累積更新で提供されるらしく、元号対応の他に色々入っています。
手短に検証できそうな「Windows Server 2016」マシンで試そうとしたら **1.37GB** のMSUファイルを当てる必要が…。とりあえずダウンロードして適用中。

- April 25, 2019—KB4493473 (OS Build 14393.2941)  
https://support.microsoft.com/ja-jp/help/4493473
- Windows Updae カタログ  
https://www.catalog.update.microsoft.com/Search.aspx?q=KB4493473

作業時間は計画的に。

---
追記ここまで 

# 準備

下の内容をコピペしてreg拡張子で保存します。

```
Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Nls\Calendars\Japanese\Eras]
"2019 05 01"="令和_令_Reiwa_R"

```

文字コードは「Unicode」「Shift_JIS」または「BOM付きUTF-8」のいずれかを指定します。
※BOM無しUTF-8は文字化けします。

# 実行

あとはregファイルをダブルクリックして登録するだけ。

# サンプル

Excelで表示してみました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3934/49932753-09a2-9dfa-ea3a-5c0f2abddb51.png)
ブロックチェーンサービスを作ったけど結局ブロックチェーンを見えなくした

前回の[rudoさんの記事](https://qiita.com/rudo/items/3902cac2a4436de2c304)に続き、FiNANCiEではブロックチェーンサービスをどう作ってきたかの話です。今回はブロックチェーンとUX面での考察になります。

# ブロックチェーンをやめた
　出だしから、何を言ってるんだと思われるかもしれないですが、最後までお付き合いください。
FiNANCiEは当初、MetaMaskというETHウォレットを利用して各ユーザのブラウザから直接コントラクトを呼び出していました。これが一般的なDAppsの利用方法だからです。Crypto KittiesやMy Crypto Heroesも同じですね。

　しかし、一番初めのベータテストを2018年の夏に実施したところ、やはり多くの課題がありました。まずは速度です。当時は自前のしょぼいインスタンスに建てたGethにアクセスしていたのですが、パラメータ設定も厳しめにしていたので5人のテストでもコントラクト実行のたびに「あれ、反応がないです・・」という微妙な空気が流れてしまいました。（数十秒後に通る）

　ほかにも、何も説明せずにチュートリアルを開始してもらうと、「え、MetaMaskってなんですか」みたいな話になり、よくよく考えると仮想通貨を持っていない人にとっては、次のようなめちゃくちゃ高いハードルを越える必要がありました。

- サービスに会員登録してチュートリアルをみる
- MetaMaskが必要といわれ、ダウンロードしてインストールする
- MetaMaskの英語の注意文を読み、秘密鍵を作成する。忘れないようにする。
- 仮想通貨取引所をさがして、登録する
- 本人確認書類を提出し、数日後にハガキが届く
- はがきを受け取って仮想通貨取引所に入金する
- 入金した日本円でETHを買う取引所によっては「指値」「成行」などを理解しておく必要あり
- 入金直後は資金移動制限があるので、半額を自分のMetaMaskウォレットに送金する
- FiNANCiEに戻ってきて、自分のMetaMaskをFiNANCiE上に紐づけて、利用開始。その際、GAS代として20円程度支払う。

　残念ながら日本では「ちょっとレート悪いけどShapeShiftでクレカでETH買ってきてよ！」とはいろいろな観点から案内できませんし、すべきではありません。

　このため、もしその仕様で推し進める場合、ターゲットユーザは「クリプトのリテラシーが高いユーザーとその周辺くらいまで」となってしまいます。これは非常に悩みました。しかしFiNANCiEのやりたいことを考えると、普通のユーザが使えないとサービスとして広がらないと考え、思いきって捨てることにしました。

FiNANCiEはDAppsであることを捨て、バックエンドにブロックチェーンを使った一般的なwebアプリケーションにすることにしました。

# 台帳コントラクトを開発する
　しかしながら、全てブロックチェーンを捨てるのではなく、Plasmaをはじめとする高速化や、その他の技術的革新、法的整備により簡単に仮想通貨でブロックチェーンアプリケーションが気軽に楽しめるようになる未来を見据えて、内部的に切り替えしやすい機構を開発することにしました。

　前回ご紹介したRaidenのダッチオークションやBancorのマーケットプレイスはすべてスマートコントラクトで実装されていますが、これらはもともとETHを払い込むことを想定して作られているため、改修が必要があります。

　そこで、日本円で払い込まれたお金をブロックチェーン上で扱いやすくするための独自トークンをERC-20ベースで用意しました。ただトークンを作るだけでは動作しないため、ダッチオークションおよびBancor側に手を加えます。具体的には、独自トークンを管理する台帳コントラクトを用意し、そこから実際の各コントラクトを呼び出すようにします。
![financie-ブロックチェーン概要.jpg](https://qiita-image-store.s3.amazonaws.com/0/36205/8d9b08a8-0606-ef72-42d8-6b8fc842ede7.jpeg)

　Bancorの場合、ETHのネイティブトークンと、ERC-20では扱いに差があったため多少のハックが必要でしたが、最終的には実装することができました。

#コードを監査する
　このようにして実装したスマートコントラクトのコードですが、リリースするにあたりバグやセキュリティホールがあってはいけません。スマートコントラクトの開発はソフトウエアというよりハードウエアに似ているといわれますが、そう簡単に書き換えられないという性質は確かに似ています。

　もし、不具合があった場合は、再度工場に発注して新製品を作るように、お客さんに依頼して新しいコントラクトに引っ越ししてもらう必要があります。

# まとめ
　今回はブロックチェーンとUX面という観点で、FiNANCiEが何故いまの形になったかをまとめてみました。
まだまだ、やりたい事はたくさんあるけどひとつひとつ積み上げてよりよいプロダクトにしていきたいと思っています。

　恒例になってしまいますが、FiNANCiEではエンジニアを募集しております！コンシューマー向けサービスとして既に提供を始めているブロックチェーンサービスってまだまだ少ないので、かなり面白い経験がつめるのではなかいと思います。興味お持ちの方は、是非[こちらから](https://docs.google.com/forms/d/e/1FAIpQLScIWx8Vu3NkOFk0Zc7Qho-eAdyhSQM5CblJgbhLeM7yKCDzGQ/viewform)お声がけください！
星翼ナビをPCから閲覧する(+α)

## はじめに

本記事はエイプリルフールとして扱っていただければ幸いです。

## 背景

星翼ナビ(HTN)ですが、1.0.1から脱獄対策が入ったのか、起動できなくなりました。もはやPC以外からやる意味はないので、[イカリング2](https://web.archive.org/web/20180704170745/http://s2terminal.hatenablog.com/entry/2017/07/23/203831)を見る記事も公開されているようですし、此方も公開することにします。

## uuidを得る
 
アプリインストール時に内部的に生成されるトークンです。APIへのアクセスはこのトークンを使って行います。
これがわからないと無力です。得るのは少し難しいですが、がんばりましょう。
 
方法ですが、
SSLプロキシを立てて `https://mobile.starwing.jp/api/auth/sign_in?uuid=***` へのアクセスが確認できたら、この`***`がuuidになります。35桁の英小文字・ハイフンからなる文字列です。
SSLプロキシは私はCharlesを使いました。mitmproxyでもいいと思います。
 
AndroidでSSLプロキシを使う場合、アプリの改造が必要らしいです。
- https://stackoverflow.com/a/40944883/2641271
- https://github.com/levyitay/AddSecurityExceptionAndroid
どこかからapkを拾ってきて、パッチして、adbから入れてください。
勿論アプリの再インストールにはデータバックアップが必須となりますのでご注意。
 
## ブラウザでの準備

1. Chromeで、Android UserAgentにして https://mobile.starwing.jp/ に飛ぶ
1. デベロッパーコンソールから `localStorage.auth='{"uuid":"取得したUUID"}'` と入れる
1. **window.navigator.userAgentにHTN-iOS-1.0.1(または HTN-Android-1.0.1)が含まれる状態にする** cTouchを使ってokです
1. リロードする
 
以上でHTNが立ち上がりました。

## データバックアップ

(iOS 10 HTN 1.0.0の場合不具合があるので)データバックアップは手動で取りましょう。
といっても難しくないです。
iOSなら https://psg.sqex-bridge.jp/ntv/189/reg/top?type=1&UUID=[取得したUUID]
Androidなら https://psg.sqex-bridge.jp/ntv/189/reg/top?type=2&UUID=[取得したUUID]
にアクセスすればよいです。「UUID」は大文字、取得したUUIDの中身は小文字になるので注意です。

## iOS 10への引き継ぎ

(iOS 11以上、またはHTN 1.0.1以降は通常の引き継ぎが行なえますので、本項は必要ありません)
(初稿はHTN 1.0.0時代に書かれたものですので実行しても意味はありません。むしろ脱獄することで使用不能になるおそれがあります)

### iOSへの引き継ぎをシミュレーションする

AndroidからiOS 10へ引き継ぐためには、引き継ぎをシミュレーションする必要があります。type=1だとiOS、type=2だとAndroidのUserAgentしか受け付けないからです。なのでOSをまたいで共存させることはできません。しかしOS種別が同じであれば無制限にログイン状態を共有できます。

1. Chromeで、https://psg.sqex-bridge.jp/ntv/189/update/top?type=1&UUID=[UUID] にアクセスする。UUIDの生成はよくわかりません。不安ならAndroidアプリを初期化してもう一個生成しちゃいましょう。
1. 引き継ぎ処理を行う
1. https://mobile.starwing.jp/callback/sqex にアクセスする
1. ログイン画面に飛ばされますが、引き続き https://mobile.starwing.jp/api/my/migrate?uuid=[UUID] にアクセスする
1. ログイン画面に飛ばされますが、引き続き https://mobile.starwing.jp/api/auth/sign_in?uuid=[UUID] にアクセスする
1. トークンが得られることを確認したら、localStorage.authを入力してからトップに移動。動作を確認したら、SafariでlocalStorage.authを入力する
1. Safariを終了し、`https_mobile.starwing.jp_0.localstorage*`を得る

### iOS端末に引き継ぎ情報を導入する
1. iOSを **脱獄** し、SSHd(dropbear)を立てておく
1. iOSの`アプリ領域/Library/WebKit/WebsiteData/LocalStorage/`にコピーする

\# localstorageだけ生きてれば他のデータが全て死んでても起動するってアプリの作りとしてあかんやろorz

## 課金

uuidを使い回す以上、課金はしないほうがいいかもしれません。私は課金するつもりはないです(そこまでカスタマイズするものでもない)。
Cognosでプロンプトマクロを使用して自由に記述したフィルター条件でレポートを実行する

##はじめに
レポート実行時のフィルター条件に関する要件が複雑で、レポートを実行する度や実行するユーザー毎に使用するパラメータの個数が変化するようなレポートでは、事前に何個のフィルター式やパラメータ入力のためのプロンプトを定義しておけばいいかわからない場合があったりします。
そんな時、クエリーマクロを使用することで、柔軟にフィルター条件を指定することができますのでご紹介します。


##実装方法
サンプルレポートとしてテキストのプロンプト、プロンプトボタン、リストで構成された簡単なレポートを作成します。
![000.jpg](https://qiita-image-store.s3.amazonaws.com/0/146283/676f0177-6bef-9d87-dd7e-271b3247a242.jpeg)

テキストのプロンプトのプロパティです。
ここではプロンプトを「必須」を「いいえ」に変更し、パラメータ名 'pPram' を設定しています。
![001.jpg](https://qiita-image-store.s3.amazonaws.com/0/146283/e153d335-5242-c2f8-d264-afdd886d0e4e.jpeg)


リストが使用するクエリーの設定です。
クエリーマクロのprompt関数を使用したフィルター式を追加しています。
「使用方法」は「オプション」に変更しています。
![002.jpg](https://qiita-image-store.s3.amazonaws.com/0/146283/453e29d8-a22c-03ef-aa8f-4dd7f4f53ce3.jpeg)



フィルター式の内容は下記の通りです。

```SQL:フィルター式
# prompt ('pPram','TOKEN','1=1') #
```

prompt関数の引数は順番に、("パラメータ名","データタイプ","デフォルトの値")となっています。
データタイプとして'TOKEN'を使用することで、式をそのままSQLに引き継ぐことができるようになるそうです。これがないとフィルター式の検証でエラーになりレポート作成ができません。


##実行例
上記レポートの実行例です。
テキストのプロンプトで記述する絞込み条件はCognosのフィルター式で定義する形式に揃える必要があります。


###例1：1項目を単数で絞る
一番シンプルな例です。リスト上にある項目を単数で絞り込みます。
`[製品ライン] = 'ゴルフ用品'`
![004.jpg](https://qiita-image-store.s3.amazonaws.com/0/146283/f5931531-9ae8-2282-4294-668be4f5985e.jpeg)

###例2：条件を複雑にして絞り込む
例1に比べて絞り込み条件が複雑になっています。
`([製品ライン] = 'ゴルフ用品' AND [製品タイプ] in ('アイアン','ウッド')) OR ([製品タイプ] in ('ナイフ','ランタン'))`
![005.jpg](https://qiita-image-store.s3.amazonaws.com/0/146283/81e03f53-47bb-fcb0-fc6f-c37871e29882.jpeg)

製品タイプに関しては違った値で2回登場することになるので、本来であれば別々のパラメータ名を持つ製品タイプ用のプロンプトが二つ必要になります。
同じ項目が何回登場するかわからないような場合でも柔軟に対応することが可能になります。

###例3：クエリーに無いデータアイテムで絞る
リストやクエリーには登場しない項目でもパッケージに含まれていればフィルター式で定義する時と同じように絞り込むことが可能になります。

`[販売 (クエリー)].[製品].[製品ライン コード] = 991`

![006.jpg](https://qiita-image-store.s3.amazonaws.com/0/146283/c0174722-ee1e-3444-7729-e22691a7c473.jpeg)


##最後に
実際にレポートの運用をする際、エンドユーザーがこの形式でフィルタ条件を入力してレポートを実行するのはハードルが高くなることは予想されます。
プロンプトを隠しプロンプトなどにし外部からパラメータを連携するや、絞り込み条件を保存したDBから値を取得しパラメータとしてセットするなどの設計が使い勝手かよさそうです。

##おまけ
デフォルトで値を表示したくない場合は、prompt関数のデフォルト値を'1=0'などにしておくと「データなし」と表示させることが可能です。
Atomのインストール済みパッケージの一覧を取得する方法



「command + shift + p」でコマンドパレットを開き、
「Window: Install Shell Commands」と入力。

そうすると、apmコマンドが使えるようになります。

その後、次のコマンドを打つと・・・

```
apm list --installed --bare
```

インストール済みのパッケージを全て教えてくれます。↓

```

atom-beautify@0.33.4
build-npm-apm@0.12.0
file-icons@2.1.25
japanese-menu@1.14.0
linter@2.2.0
minimap@4.29.9
split-diff@1.5.3
tag@0.5.0
w3c-validation@0.4.0

```
新元号「令和」で最速IoTしたったww #新元号 #令和


「あやかって何かやってみたかっただけのやつ」です。

> <img src="https://i.gyazo.com/a5668d6239376cfadb1bc24bd0f34330.jpg" width="600px">
> https://www.instagram.com/p/Bvsl-u0j8jZ/

[社長ののびすけとメイカーうこが新元号発表に合わせてIoT派手イケディスプレイキャップをアレンジしたよ！](https://www.facebook.com/dotstud10/posts/2132141640214249?__xts__[0]=68.ARAne5cI8sQLYuxjm5sBvZAEZ_n3mRg-4a0fZvI7wRPsufGorgW3j0i4fRPmeLDMbED-PmjP1QEk9n_sJoMtNxXKzF65eNgztFm-TAoB58zwKq8vT3svVsRKxyJ-Sp71iwREdX-5mUk7ptZQVSw12q4A3nwGuo9KKb5cfc7HYDUQfwke5xKRxuDa97AcoAfzEq5CqWyeqSP632zs-A8gmKH9yDYPOTudC3nR4mDUL7ebi2slMVvA2-gf8w4XsLorv5z0X--pasY_X0wu966fnQUAHRpV6A0t5_9OrLrf4-fmks3xP37XuLW2UJmuZsEcp50MGKamvY8rd8L-9RBl2R8up4r4rhQ9uYaksJ3BkJQ&__tn__=-R)

11:25くらいに思いついてやってみました。

## 新元号発表待ち構えてます。

> <img src="https://i.gyazo.com/6839d1a8fd6e4356f73009dc9882e2c4.jpg" width="600px">
> https://www.instagram.com/p/Bvskp5gjpya/

## 過去に作った「IoT派手イケディスプレイキャップ」で新元号

過去にギャル電さんとukoさんが作ったこのディスプレイに新元号「令和」を！

> <img src="https://dotstud.io/img/blog/094/00_eyecatch.png" width="600px">
> [【dotstudio×ギャル電】IoT派手イケディスプレーキャップをつくったよ！](https://dotstud.io/blog/gyaruden-hadeike-display-cap/)


### ツイートするとディスプレイに文字が反映される仕組みが基本です。

> <img src="https://dotstud.io/img/blog/094/07_structure.png" width="600px">

なので **これ被ってツイートするときは気をつけないといけないやつ** です。

> <img src="https://dotstud.io/img/blog/094/13_tweet_02.gif" width="600px">

ドット絵のあたりの処理とかは[IoTLTでのうこさんの発表資料](https://speakerdeck.com/ukkz/pai-shou-ikenadeisupureifu-kiiotkiyatupuwotukututeshibui-gu-nixing-tutekita?slide=36)をご参照ください。

### 新しくローカルの画像もアップロードできるようにしてみた

ESP8266の中にWebサーバーを立てて、そこに画像を投げ入れるような仕組みも作って自由度を上げてみました。

```c:server.ino
void serverInit() {
  // ドット絵ファイル一覧表示
  server.on("/list", HTTP_GET, handleFileList);
  // HTMLエディタ表示
  server.on("/edit", HTTP_GET, [](){
    if(!handleFileRead("/edit.htm")) server.send(404, "text/plain", "FileNotFound");
  });
  // PUTメソッドで新しいファイルを作成
  server.on("/edit", HTTP_PUT, handleFileCreate);
  // DELETEメソッドでファイルを削除
  server.on("/edit", HTTP_DELETE, handleFileDelete);
  // POSTメソッドで既存ファイルをアップロード
  server.on("/edit", HTTP_POST, [](){ server.send(200, "text/plain", "Post OK."); }, handleFileUpload);
  // SPIFFS内に対象ファイルがみつからなかったら404
  server.onNotFound([](){
    if (!handleFileRead(server.uri())) server.send(404, "text/plain", "FileNotFound");
  });

  // サーバー起動
  server.begin();
}
```

そう、独自の`server`クラスを@ukk0さんが作ってました。このままコピっても動きません。

## 令和を写してみた

今回はドット絵を作ってみました。 @ukk0さんの最速ライブ対応です。

> <img src="https://i.gyazo.com/34fc4596711066e92151c72754eaee98.jpg" width="600px">
> https://www.instagram.com/p/BvsldOJD7h5/


うん。
最速感でたかな。

出てたら満足です。

新年度ですね。仕事しよ。
PHPerKaigi2019のPHPerチャンレンジがバチクソ面白かった件ｗｗｗ

## はじめに

PHPerKaigi2019に参加してきました
勉強会の記事はメモを垂れ流してもあまり読まれないので今回はPHPerチャンレンジを中心に書きます

## PHPerチャンレンジ

### 概要

今回なんといってもこれが1番面白かった
サイト内・会場内・スポンサーサイト内に隠された「トークン」を探してそれをフォームに入力するとポイントがもらえ、そのポイントで順位を競うイベントでした
`#phperkaigi`
など分かりやすいものから
`#トビラがとても重たいです。`
など会場に掲示されているものまで、もはや何でもアリでしたｗ

このイベントのメリットとして

* せっかく作ったサイト、しおり、配布物がくまなく読まれる（どこにトークンがあるか分からないのでくまなく読みました）
* スポンサーサイトにもあるため各企業のページもくまなく読まれる（スポンサーとしてはかなりの広告効果）
* 会場を歩き回るので自然と交流が生まれる

逆にデメリットとしては「セッションを聞かずにひたすらトークン探しをしてしまう」のが最大のデメリットでしたねｗ

### 結果

1日目最高13位まで行けましたが、最終順位は17位と微妙なところでした
でもまぁ参加者が200~300人くらいいたはずなのでまずまずの結果だったかなと思います

<img src="https://qiita-image-store.s3.amazonaws.com/0/67471/9083d57b-4137-6fb1-d53d-23101a4dfea4.png" width='75%'></img>


### 反省

「徳丸浩からの挑戦状」というイベントも同時に開催しており、徳丸先生が作ったサイト内にある脆弱性を見つけるとトークンがゲットできる仕組みになっていました
僕はここのトークンを見つけるのが下手すぎて全然稼げませんでした
脆弱性自体は知っているものばかりだったんですが、アタックが下手すぎました。。。
こういう脆弱性をアタックして競うコンピュータセキュリティ技術の競技を
[CTF（Capture The Flag）](https://ja.wikipedia.org/wiki/%E3%82%AD%E3%83%A3%E3%83%97%E3%83%81%E3%83%A3%E3%83%BC%E3%83%BB%E3%82%B6%E3%83%BB%E3%83%95%E3%83%A9%E3%83%83%E3%82%B0)
というらしいです
今回初めてやってみて全然できなくて悔しかったのと、それにも勝って面白かったので趣味で色々触ってみようかなと思いました。
[常設CTFまとめ](http://nanuyokakinu.hatenablog.jp/entry/2015/08/24/213158)
このあたりから試せるようです。
また、徳丸先生の問題の回答は以下の記事が大変分かりやすかったのでオススメです。
[#PHPerKaigi 2019 登壇記 + 徳丸浩の挑戦状 Write-up](https://www.ryotosaito.com/blog/?p=215)

## おわりに

<font color="White">#令和</font>
`#iwillblog`
ブログを書くまでが勉強会ということで、まとめを書きましたので勉強会終了になります！
お疲れ様でした！
来年も参加したいなー
（ちなみにこの記事にもトークン隠してみましたｗ）
【令和】EC-CUBE4の新元号への対応方法（4/1）

EC-CUBEは和暦に対応していないので新元号への対応は不要です！

**完**

----

IntlDateFormatterでも新元号には対応していない模様。
今対応が必要なら自力で実装かな。

> IntlDateFormatter参考
> https://gist.github.com/hidenorigoto/2327195
ActiveStorageの画像ファイルを確認画面を挟んでアップロードする方法

# はじめに

ActiveStorageの画像ファイルを確認画面を挟んでアップロードする方法

# 前提

Postモデルのimageにアップロードするという前提

```:post.rb
class Post < ApplicationRecord
  has_one_attached :image
```

# How


```:_post_confirm_form.rb

# 確認画像表示

<% if @post.image.attached? %>
  <%= image_tag @post.image %>
<% end %>

# 確認画像を登録する 
<%= form.hidden_field :image, value: form.object.image.signed_id %>

```