OmniAICreator/Qiita-1.07M huggingface dataset:
Javaの標準ライブラリを使ってScalaで画像に文字を追加してみる

## 概要
Scalaで画像に文字を追加しようとするとき、もっとも手軽に実装できる方法がJavaの標準ライブラリを使う方法かなと思います。ので、基本的に実装内容はJavaとほぼ変わりないのですが、参考にしたサイトと合わせてサンプルコードを紹介します。

## 参考
少し多いですが、参考にした記事を列挙します。

- [Scala Documentation - Image processing](http://otfried.org/scala/image.html)：Scalaの画像読込・出力のドキュメント。
- [JavaでJPEGファイルを読み込み、図や文字を書いて、出力する](https://blog.goo.ne.jp/xmldtp/e/10cad13ab21b40e6e907de6124e989f2)：画像に文字を追加する実装が紹介されてます。
- [【Java】 画像編集 ～ 画像を縦・横に結合する ～](https://blogs.yahoo.co.jp/dk521123/36470507.html)：画像に画像を結合する実装が紹介されてます。
- [【Java】ウィンドウに文字列を描画](https://nompor.com/2017/12/02/post-1523/)：フォントの設定に関する実装が紹介されてます。
- [背景を塗りつぶす](https://www.javadrive.jp/applet/graphics/index9.html)：背景を塗りつぶしする実装が紹介されてます。
- [【Java】アンチエイリアシングの利用](https://nompor.com/2017/12/06/post-1572/)：文字のアンチエイリアシングの実装が紹介されてます。
- [JavaでJPEG画像の保存品質を変更する](https://qiita.com/oohira/items/be99b3c8f025d04a5541)：画像の保存品質を設定する実装が紹介されてます。

## サンプルコード
元にした画像の横へ、文字を追加して出力するサンプルコードです。Scalaと言いつつ、ほぼJavaと変わらないと思います。

```ImageWritingWordSample.scala
import java.awt.{Color, Font, RenderingHints}
import java.awt.image.BufferedImage
import java.io.{File, FileOutputStream}

import javax.imageio.{IIOImage, ImageIO, ImageWriteParam}

object ImageWritingWordSample extends App {
  // 元画像の読み込み
  val originalImage = ImageIO.read(new File(s"resources/200x50.png"))

  // 新規画像に元画像を組み込み
  val newImage = new BufferedImage(320, 50, originalImage.getType)
  val graphics = newImage.createGraphics()
  graphics.drawImage(originalImage, 0, 0, null)

  // 文字を書くところの背景色
  graphics.setColor(Color.WHITE)
  graphics.fillRect(200, 0, 320, 50)

  // フォントの設定
  graphics.setFont(new Font("Arial", Font.PLAIN, 12))
  // 文字色
  graphics.setColor(Color.BLACK)
  // アンチエイリアス
  graphics.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_ON)
  // 文字の追加
  graphics.drawString("テストテスト", 210,20)
  graphics.drawString("テストテスト", 210,40)

  // 画像出力
  val os = new FileOutputStream("resources/new_320x50.jpeg")
  val ios = ImageIO.createImageOutputStream(os)
  val writer = ImageIO.getImageWritersByFormatName("jpeg").next
  val param = writer.getDefaultWriteParam
  param.setCompressionMode(ImageWriteParam.MODE_EXPLICIT)
  // 画像品質の設定
  param.setCompressionQuality(1.0f)
  writer.setOutput(ios)
  writer.write(null, new IIOImage(newImage, null, null), param)
  writer.dispose()
}
```

## 実行結果
**【元画像】**
![200x50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32098/b704a707-c484-7e4c-e2dd-610af6d46679.png)
**【文字を追加した後の画像】**
![new_320x50.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32098/373ad557-b022-7100-76f3-67f4c12944b1.jpeg)
kotlinで詰まったポイントと解決策

### 1. 引数の型を List<Any> とした場合の型判定

```kotlin:Error
fun doSomething(arg: List<Any>): List<Int> = 
  when(arg) {
    is List<Int> -> ...
    is List<String> -> ...
    else -> ...
  }
```

これだと、３-4行目の`is`によるキャストで `Cannot check for instance of erased type`というエラーを生じた。

`List<Any>`型は 、

"List型であることはわかるけど、中身の型の情報は持っていない"

つまり中身の型は消されている型(`erased type`)となるので、引数`arg`の型をこのように判定することはできない。

一方で、次のような型判定は可能である。

```kotlin:OK
fun doSomething(arg: List<Any>): List<Int> = 
  when(arg[0]) {
    is Int -> ...
    is String -> ...
    else -> ...
  }
```

`arg`の"要素"は`Any`型なので、これらは`is`を用いて判定することができる。

### 2. アスタリスク(＊)とAnyの違い

```kotlin:Error
fun doSomething(arg: List<*>): List<Int> = 
  when(arg[0]) {
    is Int -> ...
    is String -> ...
    else -> ...
  }
```

 `Any`が「なんでも受け入れる型」を意味するのに対し、`*`は「型はわからないけど、今は重要じゃないから伏せ字にしておく」くらいの感覚。
 
したがって、`List<Any>` と `List<*>` では、それぞれ次のような挙動になる。

```kotlin:sample
val foo = listOf("bar") //fooの型はList<String>となる。

foo is List<Any> //fooはList<Any>型ではないのでfalse

foo is List<*> //fooは「何かしらのList」型なのでtrue
```

### 3. ラムダ式の戻り値 (あるいはブロックと`return`について)

`map`,`filter`,`reduce`,`fold`のようなfunctional loopを使うと、綺麗にコードがかける場合が多い。

kotlinでは、これらのfunctional loopは、引数としてラムダ式をとる。

例として、次のような配列を考える。

```kotlin
val sampleList = listOf(1,2,3,4,5)
```

これらの配列の各要素を2倍にしたいとき、オブジェクト指向言語では`map`関数を使う。

kotlinでは、`Iterable`インターフェース[^1]が実装されていれば`map`関数を呼び出すことができる。

目的のラムダ式は次のように書ける。


```kotlin
{ x:Int -> x * 2}
```

kotlinのマップ関数は、引数にラムダ式を取り、ラムダ式の引数に各要素を代入するので、次のように書けば良い。

```kotlin
val result = sampleList.map {x:Int -> x * 2}
// result == [2,4,6,8,10]
```

この時`return`を書くと`map`を抜けてしまう。

```kotlin:意図しない挙動1
sampleList.map {x:Int -> return x * 2}
// 戻り値は4だが、mapよりも上のレベルで return されてしまった。
```

ラムダ式の`->`後にはブロック`{...}`として渡すこともできるが、ブロックの値そのものが返る。

```kotlin:意図しない挙動2
val result = sampleList.map {x:Int -> {
  x * 2
}}  
// => result == [
//  Function0<java.lang.Integer>,
//  Function0<java.lang.Integer>,
//  Function0<java.lang.Integer>,
//  Function0<java.lang.Integer>,
//  Function0<java.lang.Integer>
//  ]
```

ブロックを渡した際には、ブロック内で`return`するとエラーとなる。


```kotlin:Error
sampleList.map {x:Int -> {
  return x * 2
}}  // エラー => " 'return' is not allowed here "
```

ラムダ式では、最後の評価値が返される。


```kotlin:sample1
val result = sampleList.map {x:Int -> 
  x * 2
  x * 3
}  // result == [3,6,9,12,15]
```

```kotlin:sample2
val result = sampleList.map {x:Int -> {
  x * 2
  var a = x + 1
}}  
// => result == [
//  kotlin.Unit,
//  kotlin.Unit,
//  kotlin.Unit,
//  kotlin.Unit,
//  kotlin.Unit
//  ]
//  あくまで「代入した」という処理の結果が返る。
```

追加でわかったことがあればアップデートします。


[^1]: `List`や`Array`など、順番に取り出せるもの
[Rails5] Rails上でHonoka/Umi/Nico(v3 v4 どちらも対応)を簡単に使用するGemの紹介

2019/4/30 追記：

* Versionによりますが、Honoka/Umi/Nico/Rinに対応しました。
* Bootstrapのv3系/v4系に対応しました。

# Honokaとは

[Honoka](https://honokak.osaka/)とは、日本語を美しく表示する為のbootstrapテーマです。
凄く綺麗に日本語が表示できて色合いも美しいです。

今回はこのテーマをrails上で使用する為の方法を記載しています。
※個人的にはUmiやNicoの色合いも好きなのですがbootstrap4.3用がなさそうなので、特定Verのみ UmiやNicoにも対応しました。

# Rails上でHonokaを使用する

結論から言うとGemを作ったので下記のようにGemfileに追加してもらうだけで、Honokaのテーマを使えます。

``` Gemfile
gem 'bootstrap-honoka-rails' , '~> 4.3.1' # or '~> 3.3.7' など
```


上記設定後、bundle updateを行いgemファイルをインストールします。

```sh
bundle update 
```

その後、下記2ファイルを更新すればOKです。

* application.css
* application.js

### application.css

`rails_root/app/assets/stylesheets/application.css` に、
` *= require _honoka` を追加します。

``` app/assets/stylesheets/application.css
 *= require _honoka ←コレを追加
 *= require_tree .
 *= require_self
```

※「←コレを追加」という日本語コメントは外してください。

### application.js

`rails_root/app/assets/javascripts/application.js` に、下記のように2行を追加すればOKです。

``` app/assets/javascripts/application.js
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require popper ←コレを追加 ※bootstrap ver4以降
//= require bootstrap-sprockets ←コレを追加
//= require_tree .
```

※こちらも「←コレを追加」という日本語コメントは外してください。

以上で使えます。
※jQueryのRailsプラグインに関しては、別途追加してください。

# UmiやNicoやRinに対応させるには

[一部のVer](https://github.com/Takmg/bootstrap-honoka-rails/blob/master/VERSIONS.md)のみUmiやNicoやRinにも対応させました。

`rails_root/app/assets/stylesheets/application.css` に、
` *= require _umi` or `*= require _nico` を追加するとnicoやumiのデザインになります。

``` app/assets/stylesheets/application.css
 *= require _bootstrap-sprockets ←コレを追加(bootstrap ver3のみ)
 *= require _umi ←_honokaを指定している箇所を_umiにするとUmiに変わる
 *= require_tree .
 *= require_self
```

詳細はこちらの[ReadMe](https://github.com/Takmg/bootstrap-honoka-rails/blob/master/README.md)を参照してください。

# 最後に

今回はGemの自作という学習も兼ねて作った為、色々とソースコード上で問題や動作不具合があるかもしれません。その場合はご指摘下さいますと幸いです。
[ソースコードはこちら](https://github.com/Takmg/bootstrap-honoka-rails) です。


# 参考URL

* [Honoka](https://honokak.osaka/)
* [Umi](https://ysakasin.github.io/Umi/)
* [Nico](https://nico.kubosho.com/)
* [Rin](https://rinhoshizo.la/)
Node.js,Expressメモ⑤の1

エンドゲームが待ち遠しいですね。と書いているうちにはじまってしまいます。こんにちは。

rete.jsを使いたいためにExpressのチュートリアルを進めています。


今回はこちらのPart5をやります。
https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data

だんだん英語の割合が増えてきています。ページの構成もちょっと謎になってきました。


# async
javaScriptの非同期モジュールみたいです。

```
npm install async
```

チュートリアルで作っているアプリケーションは特定の順番で処理を行う場合や並列に処理を実行して処理を行う場合や
フローを管理して必要な情報がすべてそろった時にページをレンダリングすることもあるようです。
そんな時にasyncの以下の機能を駆使してやろうよ、ということみたいです。

`async.series()` > 特定の順番
`async.parallel()` > 並列
`async.waterfall()` > 全部揃ったら実行

だいたい読んだ通りのイメージです。


# ページを表示するために１つの問い合わせで済む場合
例えばモデルの登録されている数を表示したい場合以下のように書くようです。
Mongooseのモデルのcount()メソッドを使用しています。

```
export.some_model_count = function(req, res, next){
    SomeModel.count({a_model_field: "match_value"}, function(err, count){
        res.render("the_template", {data: count});
    });
}
```

# parallel

単純な実装ではメソッドを直列に並べて一つ一つ実行結果を受け取って最終的にレンダリングすることです。
その方法は確実ですが時として並列に処理させた方が良いことがあります。
`async.parallel()`は並列に処理を実行し、すべてが終了したタイミングでコールバックを受け取ることができるようです。

```
async.parallel({
    one: function(callback){...},
    two: function(callback){...},
    ...
    something_else: function(callback){...}
    },
    function(err, results){
        //resultsには{one: 1, two:2, ..., something_else: some_value}みたいにはいってくる模様。
        }
);
```


#series

後続の関数が以前の関数のreturnに依存しない場合に順番に実行するには`async.series`を使うよう。
parallelと書き方がほぼ同じなのはとてもよさそうです。

```
async.series({
    one: function(callback){...},
    two: function(callback){...},
    ...
    something_else: function(callback){...}
    },
    function(err, results){
        //resultsには{one: 1, two:2, ..., something_else: some_value}みたいにはいってくる模様。
        }
);
```

確実に順番通り実行するためには`one: function,,,`のところを配列にする必要があるようです。

```
async.series([function(callback){
                          callback(null, "one");
                          },
              function(callback){
                          callback(null, "two");
                          }],
              function(err, results){
                    //resultsは["one", "two"]のようになるみたいです。
              }
);
```

# walterfall

上から順番に処理を渡していく方法です。

```
async.waterfall([
    function(callback){
        callback(null, "one", "two");
    },
    function(arg1, arg2, callback){
        //arg1 > one
        //arg2 > two
　　　　 //らしい
        callback(null, "three");
    }],
    function(err, result){
    // resultは最後のcallbackのthreeが入ってくる
    }
);
```

⑤の1ってなんだ！ってことですけどつづく
Memo:VSCode上でgithubのリモートリポジトリに初めてpushする

## 下準備
- pushする対象のディレクトリでgit init
- github上で空のリモートリポジトリ``<remote_dir_name>`` を作成
- 作成した空のリモートリポジトリ``<remote_dir_name>``のURL``https://github.com/~~``をコピー

## VSCode上の作業
1. pushする対象のディレクトリを開く
2. コマンドパレットを開いて以下コマンドを入力

```
>Git: Add Remote 
```
3.リモートリポジトリの名前を聞かれるので``<remote_dir_name>``を入力
4.リモートリポジトリのURLを聞かれるのでコピーした``https://github.com/~~``を入力
5.コマンドパレットを開いて以下コマンドを入力

```
>Git: Push 
```
6.おわり

初めてof初めての時はユーザー認証等が必要…
Craft-UIKitで作ったSPAをGithubのリポジトリでホストしてみる

Craft-UIKitで作ったデモ用のSPAなフォトアルバムアプリをGithub pagesでホストしてみるテスト。

https://github.com/craftkit/craft-sample-photoalbum

`<repo>/` へのアクセスが `<repo>/index.html` になるので hash の調整をする必要あるけど独自ドメインにしても大丈夫な感じ。（お試しの際はホーム画面に追加してね）

[https://craftkit.dev/craft-sample-photoalbum/](https://craftkit.dev/craft-sample-photoalbum/)

インタラクティブなアプリは置きにくいけどスタティックなものならとてもお気軽。

![capture](https://user-images.githubusercontent.com/4404088/54261343-e4659780-45ae-11e9-8d64-95d89b9eed7a.gif)

コメントポスト機能とかはlocalでホストしてみたりする必要がありますが。
BASIC認証の認証情報をURLに埋め込むとFetch APIを使ったサイトが死ぬ

## はじめに

SeleniumでBASIC認証のついたページにアクセスする場合、

`https://username:password@example.com`

のように、認証情報を埋め込んだURLを使います。

さて、この方式はそもそもセキュリティ的によろしくないので、最近のブラウザでは実施することができません。
BASIC認証がかかったWebサイトがお手元にある方は、試しに上記のように認証情報を埋め込んだURLをChromeのアドレスバーに入力してみてください。
URLに埋め込まれた認証情報は無視され、認証情報入力ダイアログが表示されると思います。

一次文献が見当たらないのでご存じの方は教えていただきたいのですが、どうやらSelenium (WebDriver?) を用いた場合のみ、認証情報を埋め込んだURLは許可されているようです。

## ハマったポイント

SPAで構築されたアプリケーションで、特定のページがレンダリングされない問題が起きました。
DevToolを見ても特にエラーなどは出ていませんでした。

リロードしても問題は解決しませんでしたが、
なぜか **アドレスバーにフォーカスしてEnterを押下する** （つまり、該当のURLに再度アクセスする）と改善しました。

Seleniumからは認証情報を埋め込んだURL`https://username:password@example.com`でアクセスしていましたが、アドレスバーには認証情報なしのURL `https://example.com` が表示されていました。

## 何が起きていたか

Seleniumで、認証情報を埋め込んだURLを用いると、アドレスバーでは認証情報が省略された状態で表示されますが、内部的には認証情報付きのURLとして扱われます。
このとき、何が問題になるかと言うと、 [Fetch API](https://developer.mozilla.org/ja/docs/Web/API/Fetch_API) が動作しません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112393/ecc32dbb-c40c-846b-3b86-703a47758111.png)

> Request cannot be constructed from a URL that includes credentials

認証情報付きのURLでFetchは使えない、ということですね。
XHRとかだと案外上手く行ったりするのかもしれませんが、めんどくさいので試してません。

そんなわけで、リソースのロードにFetchを利用している場合、そもそもレンダリングが出来ないみたいな状態に陥ります。
どこで握りつぶされていたか、エラーも出ていないし、アドレスバーでは普通のURLにしか見えないし、原因にたどり着くまでリアルに3ヶ月ぐらいかかりました。

## どうしたか

もうしょうがないので、 **認証情報付きのURLにアクセスしてブラウザにキャッシュさせたあと、認証情報無しのURLで再アクセスする** というどうしようもない力技で解決しました。

```javascript

browser.url('https://username:password@example.com')
browser.url('https://example.com')
```

Selenium4ではBASIC認証周りの動作が改善されると風のうわさで耳にしたので、それまではパワープレイでごまかしましょう。

## 補足

もう一つ、BASIC認証周りでハマった点としてこんなんがありました。

- `https://username:password@example.com` にアクセス
- Webサーバ(nginx)で `https://example.com` にリダイレクト
- 認証情報はキャッシュされてないので認証ウィンドウが出る
- 死

こちらはマジでSelenium側ではどうにもならず、 **リダイレクトされないURLを用意して、そこにアクセスしてブラウザにキャッシュさせる** というこれまたパワープレイで結着しました。
力こそパワー！
Weblogicの任意のコード実行(ゼロデイ) 

日本であまり然話題になってないので、検証結果をブログにしました。

#概要
4月17日、Oracle Fusion Middleware の Oracle WebLogic wls9-async、wls-wsatコンポーネントにゼロデイの脆弱性が存在する旨の[情報](http://www.cnvd.org.cn/webinfo/show/4989)が公開されました。
内容を確認する限り、2017年末にPoCがでたCVE-2017-10271と同じにおいがしました。

[ZDNETの記事](https://www.zdnet.com/article/new-oracle-weblogic-zero-day-discovered-in-the-wild/)では、スキャン活動が始まっているとされており、確かに25日0時過ぎよりwls9-asyncコンポーネントの有無を調査している動きがありました。
そして、ついに25日お昼ごろには攻撃コードが公開され、同日14時頃より185.234.218.248からハニーポットで攻撃を検知しはじめました。

#脆弱性の影響範囲
脆弱性の影響を受けるバージョンは以下となりますが、上記リンク先の情報であり、正確である保証はありません。
今回検証した12.1.3で、wls9-asyncがインストールされている状況では脆弱であることを確認しました。

・WebLogic 10.X
・WebLogic 12.1.3


#検証
検証では、/_async/AsyncResponseServiceおよび、/wls-wsat/CoordinatorPortTypeで成功することを確認しました。
wls9-asyncコンポーネントを利用している場合、/_async/AsyncResponseServiceが公開され、以下の画像のような応答を返しますので、weblogicを利用されている方は是非確認することを推奨します。

![geawgwea.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254131/6121d143-691b-0466-c09e-e0fc07374917.png)

#対策
暫定対策ですが、/_async/* および /wls-wsat/* 宛の通信をURLフィルタリングが一番だと思います。
また、wls9-asyncおよび、wls-wsatコンポーネントを削除することで、現状の恒久対策となります。


#最後に
10連休という社会人の皆様にとっては最高の大型連休前なのに、前回の2017年末みたいな脆弱性感があります。
攻撃者にとっては休日なんて関係ないので、是非URL規制でゴールデンウィークを乗り切ってほしいです。
3分で GitHub にブログを作る (Hugo + GitHub Pages)

[![Image from Gyazo](https://i.gyazo.com/62c3cf47f6a17fea25fe178b7a7e6290.png)](https://gyazo.com/62c3cf47f6a17fea25fe178b7a7e6290)

## 前提条件

1. Git がインストールされていること。
   - Windows の場合は Git Bash (shell が実行可能な CLI) もインストールしてください。
1. GitHub にアカウントを持っていること。
   - Public の blog リポジトリと、 Private な blog-src リポジトリが作ってください。
   - リポジトリの名前はなんでもよいですが、この記事では blog と blog-src のリポジトリを使用します。
1. Hugo がインストールされていること。
   - [Install Hugo | Hugo](https://gohugo.io/getting-started/installing/)

## ブログを作る

カップラーメンが伸びるので急いで下さい。ほぼコマンドをコピペして打つだけです。

`1.` ブログサイトを作ります。

```shell
# Create a New Site
hugo new site blog-src

# Add a Theme
cd blog-src

git init

mkdir themes
cd themes
git clone https://github.com/budparr/gohugo-theme-ananke.git
cd ..

# Add Some Content
hugo new posts/my-first-post.md
```

`2.` config.toml を開いて設定を変更します。

```
baseURL = "https://<USERNAME>.github.io/blog/"
languageCode = "ja-jp"
title = "My New Hugo Site"
theme = "ananke"
```

`3.` ローカル環境でブログサイトを実行します。 localhost:1313/blog が開けるようになります。確認後に `Ctrl+C` でサイトを停止してください。

```shell
# Navigate to your new site at http://localhost:1313/blog/
hugo server -D
```

`4.` posts/my-first-post.md を開いて draft を false にします。

```md
---
title: "my-first-post"
date: 2019-04-25T01:49:06+09:00
draft: false
---
```

`5.` GitHub に blog-src を Push します。

```shell
# public が存在すると submodule を追加できないため消してから追加
rm -rf public
git submodule add https://github.com/<USERNAME>/blog.git public

git add .
git commit -m "first commit"
git remote add origin https://github.com/<USERNAME>/blog-src.git
git push -u origin master
```

`6.` GitHub に blog を deploy します。このコマンドは deploy.sh という名前で root に保存して置くと、次回以降の deploy で使用できるので便利です。

```shell:deploy.sh
#!/bin/bash

echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"

# Build the project.
hugo # if using a theme, replace with `hugo -t <YOURTHEME>`

# Go To Public folder
cd public
# Add changes to git.
git add .

# Commit changes.
msg="rebuilding site `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"

# Push source and build repos.
git push origin master

# Come Back up to the Project Root
cd ..
```

`7.` blog リポジトリの GitHub Pages を有効化します。

Settings > GitHub Pages > Source から、 master branch を選択します。

[![Image from Gyazo](https://i.gyazo.com/3ff933fcda7af421f83dc733cb983fae.png)](https://gyazo.com/3ff933fcda7af421f83dc733cb983fae)
[![Image from Gyazo](https://i.gyazo.com/781377526f113cdf6d0446732d980aad.png)](https://gyazo.com/781377526f113cdf6d0446732d980aad)

`8.` 少し待つと GitHub Pages `(https://<USERNAME>.github.io/blog/)` にアクセス可能になります。ブログの完成です。

## 備考

- 今回のテンプレートは Quick Start と同じ ananke を使用しています。好きなものに変更する or 作っても問題ありません。
- サブモジュールが面倒で、記事とかテンプレートも公開してよいならリポジトリは一つで大丈夫です。
  1. GitHub Pages の公開ディレクトリを master/docs に変更します。
  1. Hugo の publishDir 設定を docs に変更します。
- 記事とかテンプレートをソース管理しない場合もリポジトリは一つで大丈夫です。
  1. blog-src を作らない & Git init しなくてよいです。
- Hugo は下書きやタグ機能など様々な機能があるので、詳しくは [Hugo Documentation | Hugo](https://gohugo.io/documentation/) を見てください。
【VBA】既定のアプリ(秀丸)でtxtファイルを開く

```vb
Public Declare Sub Sleep Lib "kernel32" (ByVal dwMilliseconds As Long)

Sub TestMain()
    Dim strFile As String
    Dim WSH As Object
    Set WSH = CreateObject("WScript.Shell")
        
    'フyァイルのフルパスを指定
    strFolda = Range("Q2")
    strFile = Cells(2, 16)
    strName = strFolda + "\" + strFile

    If Dir(strName) = "" Then
        MsgBox "ファイルが存在しません。"
        Exit Sub
    End If
    
    WSH.Run strName, 1
    
    Call key
End Sub
```

```vb
Sub key()
    Sleep 500
    SendKeys "{ENTER}", True
    
    Sleep 500
    SendKeys "y", True
End Sub
```

---
■参考サイト
< Run >
https://win.just4fun.biz/?WSH/%E5%A4%96%E9%83%A8%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%83%BBRun%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89

< キー操作 >
https://excwlvba.blogspot.com/2013/05/sendkeys.html

< 他アプリ操作 >
https://officeforest.org/wp/2018/04/22/vba%E3%81%A7%E4%BB%96%E3%81%AE%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E6%93%8D%E4%BD%9C%E3%81%99%E3%82%8B/

< アプリウィンドウアクティブ化 >
https://docs.microsoft.com/ja-jp/office/vba/language/reference/user-interface-help/appactivate-statement

< Shell >
http://officetanaka.net/excel/vba/function/Shell.htm

---
RubyでSeleniumを用いたWEBスクレイピング(Linux)

書き掛け

##環境

* Google Comput Engine
* OS：CentOS Linux release 7.6.1810 (Core)

##Rubyのインストール
```linux-config
$ sudo yum install git
$ git clone https://github.com/rbenv/rbenv.git ~/.rbenv
$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
$ ~/.rbenv/bin/rbenv init
$ source ~/.bash_profile
$ rbenv -v
rbenv 1.1.1-2-g615f844

$ git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build
$ sudo ~/.rbenv/plugins/ruby-build/install.sh
$ rbenv install -l
→インストール可能なrubyのバージョンが表示される

$ sudo yum install -y openssl-devel readline-devel zlib-devel 
$ sudo yum -y install bzip2
$ sudo yum -y install gcc
$ export RUBY_CONFIGURE_OPTS=--disable-install-doc
$ rbenv install 2.6.3
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
$ source ~/.bash_profile
$ rbenv global 2.6.3
$ ruby -v
ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-linux]
```
##ライブラリのインストール
```linux-config
$ gem install selenium-webdriver -r
$ gem install csv -r
$ gem install nokogiri -r
```
uGUI バッチング挙動調べる

uGUIのバッチング挙動調べる。

# 環境
Mac,Unity2018.3.11f1, Pro, 

# 素材
https://assetstore.unity.com/packages/2d/gui/icons/flat-icoon-ui-2d-puzzle-game-ui-69370

# バッチングとは
GPUに描画命令を出す際に各UIをまとめて一斉に行う処理のこと。
uGUIのバッチング処理は割と優秀らしい。

# バッチを見る
## 適当にUIを組む
![スクリーンショット 2019-04-25 23.15.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278474/839f9f32-534a-d63a-71d5-ee90d0e6a4b4.png)

## バッチ数確認
ゲーム起動後、ProfilerのUI欄を見る。
バッチ数11。
<img width="991" alt="スクリーンショット 2019-04-25 23.16.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278474/cd405a65-6238-e450-d871-bd520db97032.png">

## バッチの内訳を見る
バッチ数11の内訳はフレームデバッカーの方が見やすいのでフレームデバッカーを使う。

![Apr-25-2019 23-29-35.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278474/9223254a-ab58-3662-3cad-c8b04db9c2fa.gif)
1. ダイアログの背景画像を描画
2. ダイア6個描画(同じTextureのため)
3. アイコン1つ描画
4. ボタンの背景描画
5. アイコン2つ描画
6 ~ 8. 残り描画

5でアイコンが2つ描画されるのすごい。同じテクスチャを使っている&他のテクスチャを使ったUIとの入れ子になってなければバッチングが行われる。この条件を満たすために5のアイコンを最初の方に描画している。

## SpriteAtlasを使う
SpriteAtlasを作成し、画像フォルダを指定した。
UI描画時に他の画像映り込まないようにAllow RotationとTight Packingのチェックを外した。
![スクリーンショット 2019-04-25 23.37.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278474/31f8c46c-69d7-6134-86ce-98d1bcb3bc7b.png)

## SpriteAtlas後のバッチ
バッチ数2・・・。劇的に減った。
![Apr-25-2019 23-41-10.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278474/cdffe741-54dc-7ed5-23a2-40de91dcd707.gif)


## 非アクティブなGameObject
非アクティブなGameObjectがあるとバッチ数はどうなるのか。Windowの背景とダイア以外を非アクティブにした。
非アクティブだと描画されない。なのでButtonのTextは描画されず、バッチ数1になった。
![スクリーンショット 2019-04-25 23.47.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278474/8f0febbd-dac1-2241-3ffb-7099cb1d6a10.png)

## 動くとどうなるのか
動く星オブジェクトを置いて再生
![Apr-25-2019 23-54-20.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278474/e2e3d219-78b5-f980-b5b4-3ef9c46d85fb.gif)

バッチ数は2のまま。動いていてもバッチされる。(Layoutの再計算は走っているはず)
![スクリーンショット 2019-04-25 23.55.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278474/3bfeb6fa-03db-0f30-4129-d0d1057da361.png)

## テキストの上にUIを置くと
テキストの上に星を置いた。バッチ数は3になった。他のテクスチャが間に入ってしまうとバッチングされないため。
![スクリーンショット 2019-04-25 23.57.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278474/c1b8f20e-f2a9-c63b-6772-d09ff13789ac.png)

## CanvasGroupをつけると
星にCanvasGroupコンポーネントをつけた。バッチ数は2。このコンポーネントの有無でバッチ数は変わらない。
![スクリーンショット 2019-04-25 23.58.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278474/3e8044ab-d1cb-9c85-1af4-f5c3c54d7374.png)

## Canvasをつけると
星にCanvasコンポーネントをつけた。バッチ数は3に。このコンポーネントをつけるとOverride Sortingしてなくてもバッチングされない。
![スクリーンショット 2019-04-26 0.00.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278474/d71eb3d0-8852-e90b-1ae4-bf3b820f5b31.png)

![スクリーンショット 2019-04-26 0.00.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278474/289ff85d-a91e-f7f1-b78d-aa715df1f7b8.png)


# 参考文献
https://docs.unity3d.com/ja/2018.1/Manual/DrawCallBatching.html
https://www.slideshare.net/UnityTechnologiesJapan/unityuitips
自分用勉強メモ6日目

# CpawCTF

## [Q17.[Recon]Who am I ?](http://ctf.cpaw.site/questions.php?qnum=17)

Twitterのアカウント名とゲーム名で検索すればいい．

## [Q18.[Forensic]leaf in forest](http://ctf.cpaw.site/questions.php?qnum=18)

fileコマンドにかけると，pcapファイルであることがわかる．
stringsコマンドで文字列を取り出すと，大量の`lovelive!`という文字列に混ざって，文字が3つ連なっている箇所がある．
順番に1つ1つ書き出すか，スクリプトを書いて抽出すればフラグが現れる．

一応記録に残すために拙いコードを載せる．

```Python:test.py
def extract_three(string):
    ans = ''
    for i in range(len(string)-2):
        if string[i] == string[i+1] and string[i] == string[i+2]:
            ans += string[i]
    return ans.lower()


if __name__ == '__main__':
    with open('//Users/katsuya2019/ctf/tmp_20190425.txt') as f:
        lines = f.readlines()
    ans = extract_three(lines[0])
    print(ans)
```
extract_threeで3つ連続している文字を取り出している．

## [Q19.[Misc]Image!](http://ctf.cpaw.site/questions.php?qnum=19)

与えられたzipファイルをfileコマンドで調べると，`OpenDocument Drawing`と出る．
Microsoft Wordで開いたら，黒い長方形の横に文字列が書いてあった．
それをcpaw{}で囲んでフラグをゲット．

後で他の人のwrite-upを見たらLibreOfficeで開けばよかったらしい．
本来は長方形の下に文字列が隠れていることになっていた．

## [Q20.[Crypto]Block Cipher](http://ctf.cpaw.site/questions.php?qnum=20)

cのソースが与えられる．
中身を見ると，1つ目の引数に文字列を，2つ目の引数に整数値を取る．
見るからにシーザー暗号っぽかったので，コンパイルして，
`./crypto100 暗号文 数字`
で数字の部分を1から増やしていったら文章が現れてフラグ獲得．

## [Q21.[Reversing]reversing easy!](http://ctf.cpaw.site/questions.php?qnum=21)

ELFバイナリが与えられる．
Ubuntu環境で実行しても動作せず．
stringsコマンドにかけると，cpawという文字列に続いて断片的にフラグと思われる文字が出現する．
1文字ずつ繋げるとフラグになる．

## [Q22.[Web]Baby's SQLi - Stage 1-](http://ctf.cpaw.site/questions.php?qnum=22)

与えられたURLにアクセスすると，SQL文を入力してフラグを探すように要求される．
palloc_homeというテーブルにフラグがあることが書かれている．
`select * from palloc_home`と入力すればフラグを得ることができる．

## [Q28.[Network] Can you login？](http://ctf.cpaw.site/questions.php?qnum=28)

pcapファイルが与えられる．
Wiresharkで開くと，FTPでやり取りしている様子が見える．
宛先URLとID，パスワードを拾って，FTPで接続を試みる．
macだとFTPコマンドが使えなかったので，Ubuntuで実行．
ログインしてディレクトリ取得，dummyというファイルを開くことまではできたが，フラグのあるファイルまでたどり着くことができず，[write-up](https://www.htmllifehack.xyz/entry/2018/06/14/203000)を参考にした．
パッシブモードに切り替えて`ls -a`を実行すると隠しファイルの存在を確認できる．
ダウンロードして開くとフラグが．
G suite で LINE WORKS に SSO

## G suite を IdP として LINE WORKS に SSO  

LINE WORKS は SAML でシングル サインオンできます。  
ここでは G suite を IdP として LINE WORKS に SSO する設定手順を説明します。

## G suite の管理画面での設定  

1.G suite の管理画面にアクセスし、SAML アプリ一覧で "サービスやアプリを追加" リンク、または右下の黄色い + アイコンをクリック

https://admin.google.com/AdminHome?fral=1#AppsList:serviceType=SAML_APPS  

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/49e8e481-4aec-0839-cc52-7ffeeecff3e7.png)  

2."カスタムアプリをセットアップ" をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/84bc201a-aaee-ffaa-5b44-882c7952f85c.png)  

3.Google IdP 情報で表示される値を控え、証明書をダウンロード

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/7c307e2d-ae77-44bf-43d2-ca39bea90178.png)  

4."カスタムアプリの基本情報" で適宜入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/176dc931-7142-714d-d8fa-29927691883b.png)  

5."サービス プロバイダの詳細" で "ACS の URL" と "エンティティ ID" を入  
入力値
ACS の URL: https://auth.worksmobile.com/acs/[your_tenant_domain_name]
エンティティ ID: worksmobile.com

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/f13e136f-d4e2-622b-018b-c24f1d73d652.png)  

6. [OK] をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/7988fc71-0683-a845-9467-e9f67002f006.png)

7.SAML アプリ一覧で当該アプリを "…" メニューから "オン (すべてのユーザー)" で有効にする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/1906591c-0157-35b3-f496-7ea9145af08f.png)

## LINE WORKS の Developer Console および 管理画面の設定  

LINE WORKS の Developer Console にアクセスする

1.SSO の設定画面で "Google IdP 情報" で控えた情報を基に適宜入力および証明書ファイルをアップロード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/6565f10a-fad8-e9a1-65d6-6252f745c24e.png)

2.構成員 External Key Mapping で以下の操作

- [一覧のダウンロード] をクリック
- ダウンロードした ExternalKey_member.csv ファイルを開く 
- ExternalKey にユーザーごとに G suite のメールアドレスを入力
- ファイルを上書き保存
- [アップロード] をクリックして編集したファイルをアップロード

3.[適用] ボタンをクリック
注意: ユーザーはすべてログアウトされます

## 動作確認

上記の設定でユーザーは LINE WORKS に G Suite の資格情報でログインが可能になります
知っておくと便利なChromeで消したタブを開くショートカット

## 知っておくと便利なChromeで消したタブを開くショートカット
エンジニアは何かとChromeブラウザを使うと思います。web系エンジニアはもちろんのこと、その他のプログラミングでもググるのに使用したりします。
そのChromeショートカットの中であまり知られていないのが、Shift + Command + Tで直前に閉じたタブを開けることです。
Command + Tが新規タブのショートカットですので、Shiftをつけると逆の挙動になると覚えることが出来ます。
ぜひ皆さんも利用してはいかがでしょうか。
## 終わりに
私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
        [無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話](https://note.com/kenroda/n/n814347fbdcd7)
fortranとデバッグ

#Fortranのデバッグ
fortranのコンパイラは、有償の製品もあればgfortranのように自由に使えるものもある。どのコンパイラも、デバッグオプションを付けてコンパイルすれば、デバッガ（時には専用のデバッガが提供されていたりする。）でバグ取りができる。

gfortranの場合、コンパイル時に-gオプションを付けると、gdbでデバッグが可能になる。私はvimを使っているので、次の画像のようなデバッグ環境で使っている。
![Screenshot from 2019-04-20 23-22-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275690/5061bbed-3b1b-3a1b-f19a-dbe4e7e80879.png)

testappというプログラムをデバッグする場合、vimでソースコードを開いた状態で:packadd termdebug としておけば、 :Termdebug testapp とすればこのような画面になる。画像の上段はgdbのコンソール入出力、中段はプログラムの標準出力、下段はソースコードとなっている。gvimを使う場合は、ポップアップウィンドウで変数の値を見ることができる。これらの機能を使うには、Ubuntuであればaptでインストールしたvimで実行可能。Windowsは良くわかりませんが、CygwinやSubsystemなんちゃらLinuxでできるのではないでしょうか？

Emac派の人は、昔からエディタ上でデバッグできたはず。

##gdbで条件付きブレークポイント
デバッガは、止める行を指定するだけではない。条件を付けて止めることができる。
例えば、「i==3の時だけ止めて！」といった指定ができる。もちろんfortranでも可能だ。例えば、

```bash
cond 1 i.eq.3
```
などとすると、識別番号１のブレークポイントでi==3の時に止まる。

##printデバッグ
計算時間が短いうちや、変数が少ない間は良いが、計算時間が長くなったり、配列の要素が膨大になってくると実用的では無い。そんなときは、上記の条件付ブレークポイントを設定して必要な変数を書き出すようにすれば良い。とはいえ、気軽に試せるのでprintデバッグは多用してしまう。

```fortran
subroutine hoge(x,y)
  double precision :: x,y
  y=x*2d0
  print*,x,y !変数を見たい場所でコンソールに書き出す
  x=y/3d0
  print*,x,y
end subroutine
```

#デバッグが終わったら
gitやsubversionで管理して、修正したバグの具体的な内容をメモ。こうすると、半年や一年後くらいに見直しても、バグが取れた時期を正確に管理できる。その他、autotoolsやCmakeで自作テストプログラムを登録しておけば、 make && make check などで自動的にテストプログラムを実行できる。ちなみに、fortranでもautotoolやCMake使えます。なので、好きなだけコードを書いて、それを静的または動的ライブラリにしておく事が比較的簡単にできます。

#ソースコードの説明書もソースコードに埋め込む
Doxygenを使えば、fortranのコメントをそのままPDFやhtmlの説明書に変換できる。

```fortran
!>@brief Doxygenのサンプルです
subroutine doxygensample(hoge,fuga)
  implicit none
  real,dimension(:),intent(in) :: hoge !<インプット配列
  real,dimension(:),intent(out) :: fuga !<計算結果の出力
  fuga(1:size(hoge))=sin(hoge)
end subroutine
```
LaTeXのような形式で数式も記入できるので、仕上がりの説明書にはきれいな数式が表示されます。

快適なFortranライフを。
Laravel 学習リソース[随時更新]

Laravelで開発する時につかう学習リソースをまとめます。

## [Document](https://readouble.com/laravel/5.8/)
言わずとしれたDocumentです。
Laravelにはもう一つUIがイケてるDocumentがありますが、個人的にはこっちのほうが見やすくて好きです。
![スクリーンショット 2019-04-25 23.13.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260254/d92f70e7-aa0f-985a-1040-189cf9c129ed.png)

## [Laracasts](https://laracasts.com/)

Laravelのレッスン動画やその他にもVue.jsやIDE関連など幅広い学習教材が無料と有料で用意されていて、それ以外にも**Podcast**や**DiscussionForum**などがあり、僕も大変お世話になっています。
![スクリーンショット 2019-04-25 23.22.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260254/118ed587-6ba2-16da-7312-4d5f5c0044a7.png)

## [Laravel.io](https://laravel.io/)
僕は主にForumを利用似ていますが、その他にもLaraconなどのイベント情報なども更新されるサイトです。
![スクリーンショット 2019-04-25 23.23.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260254/ed950494-852b-f7b2-91bc-33290de16464.png)

## Laravel News
定期的に訪れるようにしています。
名前の通り、Laravelに関するNEWSを発信してくれているサイトです。
![スクリーンショット 2019-04-25 23.29.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260254/9333ac38-c6ed-e354-f602-59a02caa80c6.png)

---
この記事は随時更新する予定なのでおすすめのリソースがあれば教えていただけると助かります。
また、Qiita,Stackoverflow,DEVtoなどのサイトは大変勉強になるのですが、今回はLaravelにフォーカスを当ててご紹介してます。
bundle install を打ったら 何だかnokogiriさんが原因でerror発生

アプリに画像投稿機能を実装しようと、以下をGemfileに記述し

```rb
gem 'carrierwave'
gem 'rmagick'
```

ターミナルで　`bundle install`すると…
なんかエラーが発生して困った。

```rb
$ bundle install
The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
Fetching gem metadata from https://rubygems.org/............
Using rake 12.3.2
Using concurrent-ruby 1.1.5
Using i18n 1.6.0
Using minitest 5.11.3
Using thread_safe 0.3.6
Using tzinfo 1.2.5
Using activesupport 5.2.3
Using builder 3.2.3
Using erubi 1.8.0
Using mini_portile2 2.4.0
Fetching nokogiri 1.10.2
Installing nokogiri 1.10.2 with native extensions
Errno::EACCES: Permission denied @ rb_sysopen -
/Users/taco3suisui/rails/portfolio1/vendor/bundle/ruby/2.3.0/gems/nokogiri-1.10.2/LICENSE-DEPENDENCIES.md
An error occurred while installing nokogiri (1.10.2), and Bundler
cannot continue.
Make sure that `gem install nokogiri -v '1.10.2' --source
'https://rubygems.org/'` succeeds before bundling.
```

`Permission denied`云々
直訳すれば「権限が拒否されました〜」云々

```ruby
Errno::EACCES: Permission denied @ rb_sysopen -
/Users/taco3suisui/rails/portfolio1/vendor/bundle/ruby/2.3.0/gems/nokogiri-1.10.2/LICENSE-DEPENDENCIES.md
```

色々調べるうちに、
「nokogiri」というgemが自分の権限になっていないのが原因
という事が分かる。

```rb
$ ls -la
```
を入力して権限の所有者(?)を確認↓

```rb
total 0

drwxr-xr-x  10 username  staff  320 Apr 21 23:55 minitest-5.11.3
drwxr-xr-x  11 root      staff  352 Apr 22 00:11 nokogiri-1.10.2
drwxr-xr-x  14 username  staff  448 Apr 21 23:55 rake-12.3.2
drwxr-xr-x  16 username  staff  512 Apr 21 23:55 thread_safe-0.3.6
drwxr-xr-x  10 username  staff  320 Apr 21 23:55 tzinfo-1.2.5
```

あ！nokogiriの権限だけが　root になっている！
これを直してやれば良いんだな！

```rb
$ chown -R username /Users/username/.rbenv/versions/2.5.0/lib/ruby/gems/nokogiri-1.10.2
```

これでも上手くいかない。なぜだか分からんが
sudo を付けてやってみると上手く行った。
`※sudo とは、他のユーザー権限でコマンド実行するときに使うらしい`

```rb
$ sudo chown -R username
/Users/username/.rbenv/versions/2.5.0/lib/ruby/gems/nokogiri-1.10.2
```

その後`「bundle install --path vendor/bundle」`
するとエラーもなく成功！

未熟者の私は「権限(permission)」云々がどんな意味を成しているのかすらイマイチ解っていなかったが、このあたりの仕組みも勉強していかないといけないですね。
Leetcode #75: Sort Colors

One pass solution

```swift
func sortColors(_ nums: inout [Int]) {
    var numOfZero = 0
    for (index, num) in nums.enumerated() {
        if num == 0 {
            nums.remove(at: index)
            nums.insert(num, at: 0)
            numOfZero += 1
        } else if num == 1 {
            nums.remove(at: index)
            nums.insert(num, at: numOfZero)
        }
    }
}
```
ディープラーニング学習過程の数学的な部分を追う

ディープラーニングってどういう仕組みで動いているんだろうという疑問から、その学習過程を数学的な部分まで調べてみました。

私なりに理解したところまでを本記事で公開したいと思います。


そもそもディープラーニングはどういうものかというと。

たとえば手書きの文字があったとしましょう。コンピュータに画像を読み込ませることはできますが、全く同じ画像でなければ「同じ」と認識することはできません。

手書き文字のように、表記が逐一揺らぐようなものだと途端に判定することができなくなってしまいます。

大量の画像データを学習させることで未知の画像がきても判定するようにできるのがディープラーニングです。

将来的には、レントゲン画像から人間の目視では確認できない病状を検知するなど人間の能力を超えた判定が期待されています。囲碁の世界ではすでに人工知能が人間に勝利していますよね！
![スライド2.GIF](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200095/25c7cb90-8098-3c43-da07-90668e8cdca5.gif)

ディープラーニングはニューラルネットワークと呼ばれる計算過程を辿ります。このニューラルネットは行列計算で表すことができます。
![スライド4.GIF](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200095/8d506754-9116-9be7-37b3-6963ac929252.gif)

ニューラルネットワークにより出力された結果はソフトマックス関数を使うことにより確率として解釈されるように変換することができます。この出力確率を正解データと比較することで、間違いを正しながら学習していくことができるのです。
![スライド5.GIF](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200095/5a861f83-46a9-3d99-4ba9-5bc2f6685325.gif)

正解データとの比較は"誤差"の評価で行われます。誤差が大きければ間違い、誤差が小さければ正解に近づいているということです。
![スライド6.GIF](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200095/d441b42b-464a-98a3-f895-3a59879a31be.gif)

この誤差判定にもちいられるのがcross entropy errorと呼ばれる関数です。
![スライド7.GIF](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200095/9b55c415-cb16-4e6d-333b-4784e5f5acfb.gif)

ディープラーニングの学習過程は、"誤差"を最小化することを目指して行われます。

最小化を目指す際に用いられるのが「微分」です。微分をすることで勾配(傾き)を確認し、その勾配方向にパラメーターを移動させるということを繰り返すことで誤差の最小値に少しずつ近づけていくのです。
![スライド9.GIF](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200095/1dc05cf9-2869-1816-057e-3f3b1a88a396.gif)

具体的には、重み係数を偏微分することでニューラルネットワークの最適化を図ります。
![スライド8.GIF](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200095/f67c25dc-32dd-8b1b-1bca-c1f2139e5523.gif)

重み係数の偏微分により勾配を算出し、勾配の減少方向にパラメータをずらしていくという操作を繰り返していきます。
![スライド10.GIF](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200095/72066a77-cf09-602e-0796-6b406cb2a099.gif)
![スライド11.GIF](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200095/06536046-271f-dd0e-23da-b5afa5f79af5.gif)
![スライド12.GIF](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200095/30dd22ea-203f-b12b-6041-c5c4f2aa109e.gif)
![スライド13.GIF](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200095/6044ca52-f928-7216-95b8-ce2c433737d0.gif)

今回はニューラルネットワークの微分による学習過程を眺めてみました。

ニューラルネットワークでは、誤差逆伝播法を用いて学習していくことも可能であり、こちらの方がより効率的な計算方法として採用されることが多いです。

誤差逆伝播についても勉強していこうと思っております。

参考
「ゼロから作るDeep Learning ―Pythonで学ぶディープラーニングの理論と実装」
斎藤 康毅(著) 出版社:オライリージャパン
Alexa Lambda関数を「一から作成」する方法

Alexa SkillのLambda関数の作成は、「設計図」のテンプレートから作成する方法が、Alexa道場では紹介されています。
でも、この場合、もともとの設計図のサンプルコードが入っており、それを編集していくのは面倒だったり、何より、関数名の一部は変更できず、関数名が長く気持ちが悪いです。
そこで、「一から作成」を使って、ローカル環境で作成したプロジェクトをアップロードする方法を紹介します。
どちらかというと備忘録です。

#Node.jsプロジェクトの作成とindex.jsの作成

まず、ローカルドライブで、プロジェクトを作成し、`package.json`を作成します。

```
$ mkdir SKILL_DIRECTORY
$ cd SKILL_DIRECTORY
$ npm init
```

`npm init`では、package nameなどを聞かれますが、とりあえずそのまま[Enter]します。

続いて、Alexaのモジュールを追加します。

```
$ npm install ask-sdk
```
すると、node_modulesというフォルダが作成され、ここにask-sdkのモジュールが以下のように追加されます。

|フォルダ     |
|--------|
|.bin   |
|ask-sdk|
|ask-sdk-core|
|ask-sdk-dynamodb-persistence-adapter|
|ask-sdk-model|
|ask-sdk-runtime|
|aws-sdk|
|base64-js|
|buffer|
|...|

ここで、不要と思われるモジュールのフォルダは削除します。必要なモジュールのフォルダのみにします。
`aws-sdk`は、Lamdba上に存在するため削除します。
その他`base64-js`など`ask`で始まらないモジュールのフォルダを削除します。
`ask`で始まるモジュールは、そのフォルダに`package.json`ファイルが存在します。
このファイルを開いて`_where`を探すとそこには、ローカルフォルダの位置が記載されています。リポジトリで使用するようですが、ローカルフォルダがわかるのが嫌なら削除してしまいましょう。
また、node_modulesと同じフォルダには、`package-lock.json`が作成されます。
ここには、インストールしたパッケージのリストと他のパッケージとの依存関係が記載されています。上記で削除した`base64-js`などの記載のブロックは、記載を削除します。
記載を変えなくても、ここで説明する「一から作成」ではなんら影響がないのですが、ASK CLIでdeployする（アップロードする）ようになると、この`package.json`に記載があるファイルが、ローカルPC上に存在しない場合、自動的にサーバからダウンロードして、それを一緒にdeployするようなので、消しておいたほうが無難です。

続いて、基本となる`index.js`を作成します。このファイルが呼び出しファイルになります。自分でなんらかデフォルトのファイルを用意します。これは、SKILL_DIRECTORYの直下に置きます。

その後、この`index.js`と`node_modules`フォルダをzipで圧縮します。

#zipファイルのLamdbaへのアップロード
AWSのLambdaの関数から「関数の作成」の「一から作成」を選び、関数名を自由につけて、「関数の作成」ボタンを押下します。
![一から作成.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405480/2d392dd4-7a79-a121-fb04-ffda0e0b2a4f.jpeg)

続いて、関数コードのコードエントリタイプを「.zipファイルをアップロード」を選択し、zipファイルをアップロードします。

これであとは、エンドポイントなどを設定すれば、Alexa developer consoleから作成した関数を呼び出すことができます。
【備忘録】ざっくり。サブネットマスクについて理解を深めた

##＃まえがき
先日、先輩エンジニアの方に「サブネットマスクとはなにか？」について、丁寧に教えていただきました。
忘れないために備忘録を書きます。

##＃サブネットマスクってなに？
###当初
当時のわたしは、サブネットマスクについて、なんとなく以下のことを思っていました。

- 「IPアドレスを使用するときに関わるやつ」
- 「IPアドレス"192.168.221.XX"があった場合、XXだけを可変にしてる何か」←これも微妙な認識

間違いとも言い切れないけど、なんとも理解が足りなかった。。

###レクチャー後
サブネットマスクとは、IPアドレスを管理する上で役に立つものだとわかりました。

##＃復習
よく見るIPアドレスの定番
**（例）192.168.221.XXX**

サブネットマスクは例えば、以下のようなイメージです。
**（例）11111111.11111111.11111111.11110000 (2進数)**
**→　255.255.255.240 (10進数)**

「1」が立てられている部分が、マスク部分になります。
今回は27桁に「1」を立てています。（"/27" と表現できます）

マスクする桁数は必要となるIPの数で決められたりします。
会社でだいたい100台のPCにIPアドレスを割り振りたい場合は
おそらく25桁のマスクがあてられるのではないかと思います。
**（例）11111111.11111111.11111111.10000000 (2進数)**
**→　255.255.255.128 (10進数)**

##使い方
実際に、IPアドレスに対し、サブネットマスクを充ててみる。
**（例）IP：192.168.221.0**
**（例）サブネットマスク：255.255.255.128**

まず「192.168.221.（XX）」の部分は固定となります。
下の（XX）にある「10000000 (2進数)」の１もマスクなので固定です。
なので、192.168.221.128～192.168.221.255の間のIPが使用可能ということになります。

ちなみに、ここでの最初のIPアドレス「192.168.221.128（マスクによって変わる）」は、
**「ネットワークアドレス」**と呼ばれるらしいです。

そして最後のアドレス「192.168.221.255」は**「ブロードキャストアドレス」**と呼ばれるらしいです。
この**「ネットワークアドレス」**と**「ブロードキャストアドレス」**は割り当て不可なので、
今回の例で実際に割り当てが可能なのは下の値が「129～244」の範囲となります。

最初と最後のアドレスは割り当てられない関係で、サブネットマスクを
以下の設定にしてしまうとネットワークになりません。
**「255.255.255.254」、「255.255.255.255」**

PCの台数を例に書きましたが、
ほかにも、以下のような目的でサブネットマスクを利用するようです。
（引用：[title]https://www.cman.jp/network/term/subnet/ ）

- 会社の部署間でデータの参照を制限する場合
- パソコンやサーバの台数が多く分割して管理する場合
- 開発環境と本番環境を分けるなど、環境を切り離す場合

##さいごに
初めて記事を投稿してみました。
内容に間違いや誤りはあると思いますので、
皆さまからの温かいご指摘お待ちしています。

最後までお読みいただきありがとうございました。
CarrierWave+MiniMagickで使う、画像リサイズのメソッド

#はじめに

投稿した画像がどうしても横に表示されてしまう、という仕様の修正にだいぶ苦労したので、画像のリサイズ方法についてまとめておきます。

主なメソッドは以下です。
これだけ知っておけばなんとかなると思います。

・resize_to_fit
・resize_to_limit
・resize_to_fill

##resize_to_fit(width, height)

基本となるメソッドです。

**画像の縦横比を維持したまま、** width を最大 300px、height を最大 200 pxにリサイズ。

```app/uploaders/image_uploader.rb
process resize_to_fit: [300, 200]
```



##resize_to_limit(width, height)

上のresize_to_fitと「ほぼ同じ」です。

**画像の縦横比を維持したまま** width を最大 300px、height を最大 200 pxにリサイズ。

```app/uploaders/image_uploader.rb
process resize_to_limit: [300, 200]
```
resize_to_fitとの違いは、**対象の画像のサイズが引数に指定された縦横サイズ以内の場合はリサイズしません**。

例えばこの場合だと、元の画像サイズが [200, 150] だった場合は、リサイズせずにそのまま表示されます。

また、

リサイズ後のファイルの**余白部分を指定色でぬりつぶす**こともできます。

第三引数で塗りつぶしの色を指定(#ffffff)し、第四引数で余白が発生した際の画像の配置を指定(center)。

```app/uploaders/image_uploader.rb
process resize_to_limit: [300, 200, "#ffffff", "Center"]
```

##resize_to_fill(width, height, gravity)

上の２つと違い、**縦横比を維持しません**。

元画像から width 100px, height 100px で**切り抜き**を行い、第三引数で切り抜きを行う際の中心点を指定します。

```app/uploaders/image_uploader.rb
process resize_to_fill: [100, 100, "Center"]
```

画像の端っこが一部切れてしまうこともありますが、
投稿した画像サイズがバラバラでも全て同じサイズにリサイズされ、縦横比の調整によって画像が横に表示されることも無いので、

**画像投稿一覧を表示させるにはこのresize_to_fillが相性が良い**と思います。

#参考
[GitHub MiniMagick](https://github.com/minimagick/minimagick)

[Rails gem MiniMagick を利用して画像ファイルをリサイズする](https://qiita.com/ryo-ichikawa/items/6fbb66b8ecfdd0f1f9c4)

[CarrierWave + RMagick 画像のリサイズをまとめてみました](http://noodles-mtb.hatenablog.com/entry/2013/07/08/151316)

[【rails】cloud9上で投稿画像のサイズを指定する【miniMagick】](https://qiita.com/_ayk_study/items/218a094dd28303728a9d)

[Active StorageのVariantの指定方法いろいろ](https://qiita.com/kazuomatz/items/3cdbd2c40576c2e9d89b)（ActiveStorageの場合）
s3からgcsへのファイル同期について

## 概要
日時でs3からgcsへファイルをコピーする業務要件のため急遽作りました。

https://github.com/HagaSpa/sync-gcs-from-s3

本来はGCPの`Storage Transfer Service`を使用していたのですが、今月頭あたりから酷く遅延を起こすようになったので実装することにしました。

## 使い方
- awsはアクセスキーで、gcpはサービスアカウントのキーファイルで認証を行い`gsutil rsync`でバケット間を同期します。
- コンテナ内に認証情報を持たせたくないので、全ての情報は環境変数で指定するような作りになってます。
  - そのためサービスアカウントのキーファイルはbase64でエンコードしてください。
- ローカル実行だと処理が遅いので、基本クラウド上で動作させてください。FargateなりGCEなり。
- https://cloud.google.com/storage/docs/gsutil/commands/rsync

>
Note 2: If you are synchronizing a large amount of data between clouds you might consider setting up a Google Compute Engine account and running gsutil there. Since cross-provider gsutil data transfers flow through the machine where gsutil is running, doing this can make your transfer run significantly faster than running gsutil on your local workstation.
>


## 例
| ENV | Description |
|:---|:---|
| CLOUDSDK_CORE_PROJECT | GCPのプロジェクトID |
| GCLOUD_SERVICE_KEY |  サービスアカウントのキーファイルを、Base64でエンコードした文字列 |
| AWS_ACCESS_KEY_ID |  awsのアクセスキー |
| AWS_SECRET_ACCESS_KEY |  awsのシークレットアクセスキー |
| S3_BUCKET | s3のバケット名 |
| GCS_BUCKET | gcsのバケット名 |

```
// build image
$ docker build -t sync_gcs_from_s3 .

// run container 
$ docker run \
    -e CLOUDSDK_CORE_PROJECT=${gcp_project_id} \
    -e GCLOUD_SERVICE_KEY=ABCDEFGHIJKLMN...... \
    -e AWS_ACCESS_KEY_ID=XXXXXXXX \
    -e AWS_SECRET_ACCESS_KEY=XXXXXXXX \
    -e S3_BUCKET=${s3_bucket_name} \
    -e GCS_BUCKET=${gcs_bucket_name} \
    sync_gcs_from_s3
```
びぼびぼびぼうろく☆（＾～＾）

```
|
+-- apple.log
|
+-- banana.exe
|
+-- cassava.json
```

こんな感じの　ディレクトリー構成で、

```Shell
|
+-- old20190425
    |
    +-- apple.log
    |
    +-- banana.exe
    |
    +-- cassava.json
```

こんな感じに　古いものを　ディレクトリーに投げ込みたいことが　よくある、そんなとき。

```PowerShell:tekitou.ps1
New-Item "./old20190425" -ItemType Directory
Move-Item "./apple.log" "./old20190425/apple.log"
Move-Item "./banana.exe" "./old20190425/banana.exe"
Move-Item "./cassava.json" "./old20190425/cassava.json"
```

と　リテラる。
日付も勝手に入ってくれるとありがたい。そうなるとバリアブる。

[PowerShellで日付書式にカスタム書式パターンを指定する](https://tech.guitarrapc.com/entry/2013/02/09/030226)

```PowerShell:tekitou.ps1
$oldDir = "old-$((Get-Date).ToString("yyyyMMdd-HHmm(ss)"))"

New-Item "./$($oldDir)" -ItemType Directory
Move-Item "./apple.log" "./$($oldDir)/apple.log"
Move-Item "./banana.exe" "./$($oldDir)/banana.exe"
Move-Item "./cassava.json" "./$($oldDir)/cassava.json"
```

ここまで書けば手間要らずだろ。多分、

```Shell
|
+-- old-20190425-2259(23)
    |
    +-- apple.log
    |
    +-- banana.exe
    |
    +-- cassava.json
```

こんな感じで　次から勝手に入ってくれる☆（＾～＾）

さらに欲張ってみよう。古いのをアーカイブったのなら、新しいのを持ってこいだぜ。

```PowerShell:tekitou.ps1
# 続きに書く。
Copy-Item "C://This/is/a/banana.exe" "./banana.exe"
Copy-Item "C://This/is/a/cassava.json" "./cassava.json"
```

これで次のようになるはずだぜ。

```Shell
+-- banana.exe
|
+-- cassava.json
|
+-- old-20190425-2259(23)
    |
    +-- apple.log
    |
    +-- banana.exe
    |
    +-- cassava.json
```

ファイルが無いのにムーブしようとしてエラーが出るかもしれないが、
構わず逐次実行してくれる。
MATLABでホームベース型の図形をplotする関数を作った

MATLABでロボットのTrajectoryとかを示す時にただの線ではつまらないので以下のようなホームベース型の図形を作成したほうが視覚的にわかりやすいでしょう。



以下切り抜きにて失礼：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188863/7bd6e782-09ac-ac47-bc90-c8c5f90fce22.png)

しかし，探してもそれらしいプログラムが落ちていないので自作しました。

## 自作関数
ちなみに日本語の”ホームベース”は英語では"baseball base"というのが自然そうです。

```matlab
%%%
% Input: (x,y,theta) of point and baseballbase size
% Output: handle of plot
%%% 

function  handle = plot_baseballbase(x,y,theta,hsize)
d = hsize/2;
pts = [d 2*d d -d -d d;d 0 -d -d d d];
R = [cos(theta) -sin(theta); sin(theta) cos(theta)];
rpts = R*pts;

handle = plot(x+rpts(1,:),y+rpts(2,:),'k')
end
```


## TODO

- 本当はオプションを渡せるようにしたかったんですが…MATLABでデフォルト引数が使えないため，使い勝手がすこぶる悪い感じになりうる…

```
if nargin==4
option = 'default value';
end
```
Leetcode 242: Valid Anagram

Thought:
1. hash table: check whether two strings have the same hash table
2. sort: sort two strings and check whether the two are the same

__Note__: if s and t don't have the same length, they should never be anagrams.

```swift
func isAnagram(_ s: String, _ t: String) -> Bool {
    var dict = [Character: Int]()
    for char in s {
        if let value = dict[char] {
            dict[char] = value + 1
        } else {
            dict[char] = 1
        }
    }
    for char in t {
        if let value = dict[char] {
            if value == 1 {
                dict.removeValue(forKey: char)
            } else {
                dict[char] = value - 1
            }
        } else {
            return false
        }
    }
    return dict.keys.count == 0
}
```
Automation Anywhere Community Edition、使っていて気付いた点

随時更新していきます。

- 繰り返しの実行がスケジューリング出来ない。
    - タスクスケジューラなどを使えば出来そうですが、ライセンス規約上外部ツールからの実行が禁止されているツールもあるので規約を読んでみましたが、特にこのあたりの記述はありませんでした。
    - 何月何日何時何分に1回だけ実行。というのは出来ました。
- Community EditionのIQ Botは英語のみ対応。
    - そのうち日本語対応のものに変わったりするのでしょうか。
    - 面白そうなツールなので試してみたいのですが、英語の書面のサンプルが手元にありません・・・。
- うちのPCでも快適に動いてます。
    - 参考までにCore i5-8250U, 8GBメモリ、Windows 10といった環境です。
初心者僕「KotlinでAndroidプログラミングをしたい」2.5

#アプリを作っていたらレイアウトがおかしくなってた話
しばらくAndroid アプリを作っているとレイアウトが変わっていることに気が付きました。何故だろうと調べてみると警告文が出ていて、要約すると「レイアウトの制約を付けないと座標(0,0)に配置するからな。覚悟しろよ。」とのことでした(考えなしに作るからこうなる)。layout_editor_absoluteX などのデザイン時属性は実行時に適用されないため、設定と異なる場所に配置されるからパーツごとに**水平方向、垂直方向に制約**を付けてほしいとのこと。かしこまっ！

#さっそくレイアウト制約をつけてみる
まず、[Palette]→[Layouts]を開きます。すると色々と種類がありますが、基本的には、

- Relative Layout
- Linear Layout
- Frame Layout

の3種類を使えば良さそうです。

たぶんやり方は色々あると思いますが何が正しいとかわからないので、自分流のやり方を書いときます。
###1.一番外側にRelative Layout を配置する
Relative LayoutはView間の相対位置から配置を決定するので、外枠をRelative Layoutとして作業するようにします。
Relative Layoutを作成した後、Layout内で基準となるViewを1つ決定して他のViewを追加していきます。

###2.Viewを整列させたい時はLinear Layout
Linear LayoutはViewを垂直または水平方向に配置を決定するので、ウィジットなどのタッチ操作が必要なものを等間隔に整列して配置したいときに使います。Table Layout もLinear Layoutを使えば作れそう。

###3.あるViewに別のViewを重ねるときはFrame Layout
個人的にはあまり使わなそうですが、あるViewの上に別のViewを重ねたいときはFrame Layoutを使います。例えば、Image上にボタンを配置する時に使うそうです。

###4. 大まかな指定の後はLatoutの属性の変更
Viewは階層構造のようになっておりLayout内のどの位置に配置するかを属性として記述します。
全部の属性について述べるのはとても面倒なので、こちらを参照してください。(この記事よりだいぶ詳しいので......)
[今さら聞けないRelativeLayoutの話](https://qiita.com/yysk/items/c686153b39d32571d1bd)

#そういえば話題にしていなかった作っているもの
今まで1,2と記事を書いてきましたが、今まで僕が何を作っているのか話していませんでした。僕の趣味の話なんですが、TRPGを趣味にしていて、オフセの時に既存のスマホアプリでキャラシートを管理してダイスを振っていました。その時に最初は良かったのですが、そのうち使いづらいなと思うことが増えてきたのでいっそのこと自分で作ってしまおうというのがきっかけで作業をしています。
使いたい・作りたい機能を挙げると、

- キャラ作成、管理
- セッションの部屋の作成
- 手書きメモ帳と共有(WiFi Directとかいうのがあるらしい)
- ダイス機能とダイスログの作成

といった感じです。まだまだ未熟ですが少しずつ進めていきます。

追伸　幕間みたいなものなので短くてごめんなさい。