OmniAICreator/Qiita-1.07M huggingface dataset:
check_box_tagとフォームボタンをjQueryで連動する方法

自分用メモ。
#check_box_tagとフォームボタンをjQueryで連動する方法
たとえば利用規約などに同意しないとサインアップできないようにしたい時、jQueryを使うと簡単にできました。

###1. jquery_railsがGemfileに記載されているか確認

なければインストール（Rails3.1以降はデフォルトインストールされているのでこの作業は不要）

###2. 設定を確認
```/app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
```
```/app/views/layouts/application.html
<%= javascript_include_tag "application" %>
```

###3. viewファイルにcheck_box_tagを追加
例：

```/app/views/users/new.html.erb
<%= check_box_tag :check %>
<%= label_tag :check, ("#{link_to "利用規約", "#"}に同意する").html_safe %>
```

###4. viewファイルのフォームボタンにidを追加
例：

```/app/views/users/new.html.erb
<%= f.submit "アカウントを作成する", id: "submit" %>
```

###5. jQueryを追加
下記はcoffeeスクリプトの追加例です。
例：

```/app/assets/javascripts/users.coffee
$ ->
  $('#submit').attr 'disabled', 'disabled'
  $('#check').click ->
    if $(this).prop('checked') == false
      $('#submit').attr 'disabled', 'disabled'
    else
      $('#submit').removeAttr 'disabled'
    return
  return
```

###まとめ
viewファイル内の`check_box_tag`の`:check`とフォームボタンの`id: "submit"`はjQuery内で参照しているので、この部分を変更する時はjQuery内も合わせて変更してください。


なお、この内容は
https://www.nxworld.net/tips/jquery-switch-disable-input-button.html
http://railsdoc.com/jquery
を参考にさせていただきました。
yumで自分でインストールしたりアップデートしたパッケージを洗い出す

サーバーの刷新作業をしていてそれまでにYumでどんなパッケージをインストールしたか正確に知りたくなったので調べました。

## historyコマンドを使う

### history list

```bash
$ sudo yum history list all
読み込んだプラグイン:priorities, update-motd, upgrade-helper
ID     | ログイン ユーザー        | 日時             | 操作           | 変更
-------------------------------------------------------------------------------
    66 |  <user0001>              | 2017-08-18 02:48 | Install        |    2
    65 | root <root>              | 2017-08-15 07:21 | Update         |    1 EE
    64 |  <user0001>              | 2017-08-01 03:50 | Install        |    2
    63 |  <user02>                | 2017-06-22 01:10 | E, I, U        |  111 EE
..... 省略 .....
     6 |  <user05>                | 2014-03-19 08:10 | Install        |    2
     5 |  <user05>                | 2014-03-19 08:10 | Install        |    1
     4 |  <user05>                | 2014-03-19 08:09 | Install        |    1
     3 |  <user05>                | 2014-03-19 08:09 | Install        |    4
     2 |  <user05>                | 2014-03-19 08:09 | Install        |   11
     1 | 222                      | 2014-03-19 07:01 | I, U           |   47 EE
history list
```
66回Yumで何かをしてることがわかる。

### history info

history listで得た番号を指定するとそのトランザクションで何をしたかがわかる。

```bash
$ sudo yum history info 49
読み込んだプラグイン:priorities, update-motd, upgrade-helper
トランザクション ID : 49
開始時間            : Tue Sep 13 00:44:45 2016
開始 rpmdb          : 650:cb59xxxxxxxx
終了時間            :            00:44:46 2016 (1 秒)
終了 rpmdb          : 650:cb59xxxxxxxx
ユーザー            :  <user03>
終了コード          : 失敗しました: 1
コマンドライン      : -y localinstall hogehoge
```

範囲指定もできる

```bash
$ sudo yum history info 1..48
```

こうするとトランザクションID1〜48番で何をしたかがわかる。

## Redhatのマニュアル

　https://access.redhat.com/documentation/ja-JP/Red_Hat_Enterprise_Linux/6/html/Deployment_Guide/sec-Yum-Transaction_History.html
【LINE DEV DAY 2017】Gateboxのこれまでとこれから #Gatebox #linedevday


LINE DEVELOPER DAY 2017に参加してきました。
世界初のバーチャルホームロボット Gatebox についてのセッションを聞きながらまとめました。
※写真追加しました

# 概要
"次元を超えて、逢いに来る" 世界初のバーチャルホームロボット Gatebox は、その発表以来多くの反響を呼んでいます。現在初回の出荷に向けて準備が進んでいるこの製品の生い立ちと現在、そしてそれを支える技術と今後のテクニカルな展望、Clovaとの関わりについてお話をいたします。

# Gatebox社と発表者経歴
![P_20170928_130658_vHDR_Auto.jpg](https://qiita-image-store.s3.amazonaws.com/0/172671/2ec65803-79b8-b4b7-73b7-c7c7b3ea957a.jpeg)

## 武地 実
Gatebox株式会社 CEO。2015年から「キャラクターと一緒に暮らせる世界」の実現を目指し、バーチャルホームロボット 「Gatebox」の開発に注力。
## 久森達郎
Gatebox株式会社 エンジニア。2015年某日、Gateboxのプロトタイプに出会い技術支援を始める。2017年7月から開発メンバーとしてジョイン。サービス全般にかかわるプラットフォーム開発を担当。

# 好きなキャラクターと暮らせるをコンセプトに
![P_20170928_130815_vHDR_Auto.jpg](https://qiita-image-store.s3.amazonaws.com/0/172671/5c301929-0bea-506c-cc7a-9d8d0b68604a.jpeg)

ミクっぽいけどミクじゃなかった。
高さ30cmの円柱状のデバイスを部屋に置いて、そこに投影されるキャラクターと一緒に暮らせるということをコンセプトにしている。
第一弾キャラクターの名前は、逢妻ヒカリ(Azuma Hikari)
キャラクターが(LINEなどに?)メッセージを送ってくれたりもする。
2014年の終わりごろから開発開始した。
製作者(Gatebox CEO)の方は初音ミクファンだったらしい。
一台30万円 、1か月で300台が予約された。
予約した人＝Gateboxのオーナー＝マスターと呼ばれる。

## Gatebox x Clova
UI x AI product
提携は始まったばかり。

## Gatebox Living with 初音ミク
![P_20170928_131157_vHDR_Auto.jpg](https://qiita-image-store.s3.amazonaws.com/0/172671/91a13ac5-9c8a-3be7-ce2f-39fe072bf3d5.jpeg)
来年の3月に初音ミク版のローンチ

## Living with Characters
今作っているものは初号機に過ぎない。
一緒にコーヒーを飲んだり、TVを見たり出来るものをこれから作っていく。

# エンジニアによる発表 (Tatusro Hisamori氏)
## Gatebox UX Overall
Gateboxの設定はスマートフォンから
キャラクターにも生活がある。時間に合わせた表示を行う。
ユーザからの能動的なアクションに対して、レスポンスする。

## Technolgy Behind Gatebx
### ハードウェア
![P_20170928_132006_vHDR_Auto.jpg](https://qiita-image-store.s3.amazonaws.com/0/172671/6dd44438-172f-6507-6526-8b59e7662241.jpeg)

### Inside Gatebox
![P_20170928_132201_vHDR_Auto.jpg](https://qiita-image-store.s3.amazonaws.com/0/172671/83ba6ca5-8feb-2943-23f4-7dc0b64a25f9.jpeg)
Unity C++ Node.js SQLite Linux

#### ■Device
microphone
sensor - mainboard
camera

#### ■Local Software
Voice Recognition Client(C++)
Face Reconginition (C++)

#### ■Gatebox Cloud Side
APIサイドもNode.js
Azure

## Technical Challenges
### Gatebox x Clova
Gateboxはスマートスピーカーと違い、本体側がリッチになっている。
ユーザとのインターフェースを重要視しているため。
キャラクターのアクションインタラクションを重視している。
AIが返してきた読み上げテキストに対して、キャラクターがどうアクションを取るべきかが難しい問題
課題は、大量生産するためのテクノロジー選択。Linuxを変更するかもしれない。

### Gateboxに興味がある国
反応が多かった順に
* 韓国
* メキシコ
* カナダ
* フランス

# さいごに
対話を高度化していきたいとのこと。
今は限定的なチャット(スマホでの)のみ。

## エンジニアの方へ
これからは内部の情報を積極的に公開していくとのこと。
gateboxlab.com/inside/
エンジニア募集中、社内見学会ありますとのこと。
メモ html.template


# 文字列が入っている時だけ表示する

```html
{{if .ReturnUrl}}
<a class="ui button" href="{{.ReturnUrl}}">戻る</a>
{{else}}
戻れません
{{end}}
```
# コメント

```html
{{/* ここにかく */}}
```

# エスケープさせない

コード

```go
body := "<b>test</b>"
err := templ.Execute(w, map[string]interface{}{
	"Body": template.HTML(body),
})
```

テンプレートは他のと変わらない

```
{{.Body}}
```



# テンプレートを読み込む


```go
templ, err := template.ParseFiles("views/index.html")
```
[Kotlin] 拡張関数をサブクラスから参照する

# 概要
親クラスの拡張関数を子クラスから `super.function()` の形式で呼ぶことは文法上できない。
子クラスの同名関数で親クラスの拡張関数が隠蔽される場合は、若干ひねった呼び方をする必要がありそう。


# サンプルコード
## 関数参照またはキャスト
```kotlin
open class Parent
fun Parent.f() = "parent"

class Child0: Parent() {
    fun test() {
        // 通常は子クラスからも this 経由で Parent.f() にアクセスできる
        println(f())                  // => "parent"
        println(this.f())             // => "parent"
    }
}

class Child: Parent() {
    // 同名の関数で隠蔽
    fun f() = "child"
    fun test() {
        // 子クラス側の定義が優先される
        println(f())                  // => "child"
        println(this.f())             // => "child"
        
        // super 経由の参照はコンパイルエラーになる
        // error: 'super' is not an expression, it can not be used as a receiver for extension functions
        println(super.f())
        
        // 関数参照を使えば呼べる
        println((Parent::f)(this))    // => "parent"
        
        // 親クラスにキャストしてもよい
        println((this as Parent).f()) // => "parent"
    }
}
```
`Child.f()` を拡張関数として定義した場合も、その定義が `Child` クラスから参照できる状態であれば同様の挙動となる。
なお、逆に `Child` クラスが拡張関数 `Child.f()` を参照できない構成では、`Child` と `Child.f()` の定義を同時にインポートしたとしても、そもそも `Child` クラス内の `this.f()` は `Parent.f()` を参照したままになる。

```kotlin:outer.kt
package outer

open class Parent
fun Parent.f() = "parent"

class Child: Parent() {
    fun test() {
        println(this.f())
    }
}
```
```kotlin:Main.kt
package inner
import outer.*

// オーバーライドめいたことをする
fun Child.f() = "child"
fun main(args: Array<String>) {
    Child().test() // => "parent"
}
```
これは、`this.f()` が静的に `Parent.f()` として解決されることによる。

## インポート文で別名を付ける
パッケージ構成によっては `import ～ as` で Parent.f() に別名を付けて対処することもできる。

```kotlin:Parent.kt
package parent

open class Parent
fun Parent.f() = "parent"
```

```kotlin:Child.kt
package child

import parent.Parent
import parent.f as parentf

class Child: Parent() {
    fun f() = "child"
    fun test() {
        println(parentf()) // => "parent"
    }
}
```
ただし、`Parent.f()` と `Child.f()` が同一パッケージにあり `Child.f()` が拡張関数であるような場合は、`Child.f()` に対しても別名が適用されてしまうので、おそらくこの方法では対処できない。
(トップレベルでなくクラス内に拡張関数が定義されていれば対処可能な場合もあるかも、未確認)

## 隠蔽される関数を呼ぶだけの関数を定義する
もっと原始的な方法として、`Parent` に別名の拡張関数を定義しなおす方法もある。

```kotlin
class Child: Parent() {
    // この文脈での this は Parent のインスタンスを指す
    // 紛らわしければトップレベルで定義してもよい
    private fun Parent.parentf() = f()
    fun f() = "child"
    fun test() {
        println(parentf()) // => "parent"
    }
}
```
`Parent.f()` を何度も呼び出すような場合は、普通にこうするのが最善かもしれない。

## 注意点
これらの対処はすべて拡張関数が静的に解釈されることに依拠しているので、`Parent.f()` が拡張関数でない場合は `(Parent::f)(this)` も `(this as Parent).f()` も `"child"` を返すことに注意。
拡張関数の場合は `(Parent::f)(this)`、そうでない場合は通常通り `super.f()` というように書き分ける必要がある。

# 言語仕様
なぜ `super` で参照できないようになっているのかはよく分からないが、仕様である。

[Kotlin Language Specification - 16.17. super Access](http://jetbrains.github.io/kotlin-spec/#__code_super_code_access)
> Super access cannot be used to access an extension.

まあそういうものだと思って受け入れるしかなさそう。
Swift 向け Firebase RealtimeDB+Storage の画像読み込みライブラリを作った

最近Firebaseをバックエンドにしたアプリをよく開発しているのですが RealtimeDB, Storage, TableView で問題にぶち当たったので解決のためにライブラリを作りました。
Firebase RealtimeDB, Storage に関しては [Salada](https://github.com/1amageek/Salada) を利用している前提です。

# Firebase RealtimeDB+Storage よる画像読み込みの問題
TableViewCell + ImageView で以下のような問題が発生

- cellForRowAtIndexPath で Model を取得
- ImageView に画像を load
- 読み込み終了前にスクロール
- cell が reuse される
- 次の indexPath で別の画像を load
- 最初の画像が一瞬表示され、その後に適切な画像が表示される

```Swift
class MyTableViewCell {
    @IBOutlet weak var imageView: UIImageView!

    func configure(id: String) {
        Firebase.User.observeSingle(id: id, type: .value) { user in
            guard let user: Firebase.User = user else { return }
            if let profileImageRef = user.profileImage.ref {
                imageView.sd_setImage(ref)
            }
        }
    }

    func prepareForReuse() {
        imageView.image = nil
    }
}
```

この問題はセル内での2重の非同期通信によって発生し、以下のような図で表せます。

![download.png](https://qiita-image-store.s3.amazonaws.com/0/78445/333cda68-4bc6-e28d-8e2c-d5b7aec2c7b2.png)

# 解決策

ここで発生している問題は以下の2点です。

- cell の reuse 時に画像ダウンロードをキャンセルしていない
- imageViewの image を set する時に、正しい画像かどうかを判定していない

まず、`cell の reuse 時に画像ダウンロードをキャンセルしていない`から解決していきます。
これは `UIImageView` の extention に `cancelLoading()` `suspendLoading()` を実装しました。
これらのメソッドのどちらかを呼ぶことで画像の読み込みを停止、キャンセルできます。
次に `imageView の image を set する時に、正しい画像かどうかを判定していない` に関しては load 時に Bool を返り値に取るブロックを渡すことで、その条件を満たした場合のみ画像を set するようにするメソッド `load(_ storageReference: StorageReference, shouldSetImageConditionBlock: @escaping (() -> Bool) = { return true } )` を UIImageView の extension に実装しました。

これらによって最終的なセルの実装はこんな感じになります。

```Swift
class MyTableViewCell {
    @IBOutlet weak var imageView: UIImageView!
    private var userID: String?

    func configure(id: String) {
        Firebase.User.observeSingle(id: id, type: .value) { [weak self] user in
            guard let `self` = self else { return }
            guard let user: Firebase.User = user else { return }
            if let profileImageRef = user.profileImage.ref {
                imageView.load(profileImageRef) { self.userID == user.ID }
            }
        }
    }

    override func prepareForReuse() {
        super.prepareForReuse()
        userID = nil
        imageView.suspendLoading()
        imageView.image = nil
    }
}
```

ここまでやれば非同期の重なる TableViewCell での画像読み込みで古い画像でチラついたりすることはなくなります。ヤッター。

# 今回実装したライブラリ
[ここ](https://github.com/miuP/ImageStore)にあります

```ruby
pod 'ImageStore'
```

して使ってください。
FirebaseStorage は Pod の dependency に入れられないので `Example/ImageStore/` 以下にある `UIImageView+FirebaseStorage.swift` `ImageStore+FirebaseStorage.swift` をプロジェクトに入れると幸せになれます。
あとは `README.md` とこの記事を読めばなんとなく使い方が分かると思います。
またバグ等ありましたらぜひ issue や PR 投げていただけると幸いです。
【iOS】safeAreaInsetsの値が取得できるタイミング

# はじめに
iPhone X向けのレイアウト対応のために、Safe Areaをプログラムで取得して、ビューの位置を計算しようとした時の話です。

Safe Areaについては[こちらの記事](https://qiita.com/lovee/items/21131fb441a1a86b45e3)がとてもわかりやすかったです。

# UIViewクラスのsafeAreaInsetsプロパティ
iOS11から`UIView`クラスに`safeAreaInsets`プロパティが追加され、このプロパティでSafe Areaの上下マージンを取得することができます。

ただし、[API Reference](https://developer.apple.com/documentation/uikit/uiview/2891103-safeareainsets?language=objc)によると、ビューがビューヒエラルキーに追加されるまで、このプロパティの値はzeroになると書かれています。これは実際にどういうことか、`UIViewController`の`self.view`を使って調べてみました。

検証コードは以下のとおりです。`UIViewController`の表示が完了するまでのライフサイクルごとに`self.view.safeAreaInsets`の値をログ出力しています。

```objc:ViewController.m

#import "ViewController.h"

#define SAFE_AREA_LOG(insets) NSLog(@"%s T:%.1f R:%.1f B:%.1f L:%.1f", __FUNCTION__, insets.top, insets.right, insets.bottom, insets.left)

@implementation ViewController

- (void)loadView {
    [super loadView];
    
    SAFE_AREA_LOG(self.view.safeAreaInsets);
}

- (void)viewDidLoad {
    [super viewDidLoad];
    
    SAFE_AREA_LOG(self.view.safeAreaInsets);
}

- (void)viewWillLayoutSubviews {
    [super viewWillLayoutSubviews];
    
    SAFE_AREA_LOG(self.view.safeAreaInsets);
}

- (void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];
    
    SAFE_AREA_LOG(self.view.safeAreaInsets);
}

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    
    SAFE_AREA_LOG(self.view.safeAreaInsets);
}

- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];
    
    SAFE_AREA_LOG(self.view.safeAreaInsets);
}

@end

```

このコードをiPhone Xシミュレータで実行した時のログ出力結果は以下のとおりです。

```
-[ViewController loadView] T:0.0 R:0.0 B:0.0 L:0.0
-[ViewController viewDidLoad] T:0.0 R:0.0 B:0.0 L:0.0
-[ViewController viewWillAppear:] T:0.0 R:0.0 B:0.0 L:0.0
-[ViewController viewWillLayoutSubviews] T:44.0 R:0.0 B:34.0 L:0.0
-[ViewController viewDidLayoutSubviews] T:44.0 R:0.0 B:34.0 L:0.0
-[ViewController viewWillLayoutSubviews] T:44.0 R:0.0 B:34.0 L:0.0
-[ViewController viewDidLayoutSubviews] T:44.0 R:0.0 B:34.0 L:0.0
-[ViewController viewDidAppear:] T:44.0 R:0.0 B:34.0 L:0.0
```

`viewWillAppear`まではzeroでした。`viewDidLoad`でビューの位置計算をしたいっ、と思ったのですが、このタイミングではダメなようです。

~~結局のところ、今回は、`viewDidLoad`で計算したかったこともあり、上マージン**44**と下マージン**34**をハードコードして対応してしまいました(イマイチ感あり)。
もう少し上手いやり方がないかは今後調べてみようと思います。~~

**追記)**
`UIView#layoutSubviews`メソッド内で`self.safeAreaInsets`を使うことでSafe Areaのマージンを取得することができました。位置計算は`UIView`の`layoutSubviews`か`UIViewController`の`viewWillLayoutSubviews`で行うのが良さそうです。
ちなみに、画面回転させてLandscapeにしても、Top:0 Left:44 Bottom:21 Right:44のようにちゃんと回転後の値を取得できました。

# 参考
- [iOS 11 の Safe Area は Auto Layout だけでなくコードベースでも取れる](https://qiita.com/lovee/items/21131fb441a1a86b45e3)
- [Human Interface Guidelines - iPhone X](https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/)
- [UIView safeAreaInsets](https://developer.apple.com/documentation/uikit/uiview/2891103-safeareainsets?language=objc)
LINE Developer Day 2017 "The Technologies in Clova" 講演最速レポート

日時と内容：
LINE Developer Day 2017
http://linedevday.linecorp.com/jp/2017/
渋谷ヒカリエ9Fホール 
11:00 - 11:40
The Technologies in Clova
橋本泰一 Data Labs / Clova Center

参加者が多い場合は抽選ということでしたが、個人応募で当選したので、会社には半休の欠勤届けを出してきました。
今は午前のセッションが終わったところでランチタイム休憩中、会場に居残りして書いています。
スマホの電池が切れましたので、一切の写真なしでアップします。
妙に寒いのでアーセナルのウィンドブレーカを着ております。

## 1. デモ　8/31のw杯予選で浅野が得点した後ののハーフタイムに放映したCM
 パパと娘。部屋のあかりをつけたり、ママにCLOVAからLINEでメッセージを送ったり、パパが娘の世話をしながらサッカーの結果を気にしてCLOVAに聞いたり、娘が、「CLOVA、パパ寝ちゃったよってママにラインして」と命令


- こ、これは、娘の声を話者認識している？
- ネイティブの日本語でもちゃんと言語として解釈してくれる
- CMとは関係ないが**[浅野](https://www.footballchannel.jp/2017/09/01/post229223/)の名前を出したあたりがアーセナルファンにポイント高い**


## 2. Clova　のアーキテクチャ
- WAVE - （amazonだと echoにあたる）smart speaker
- CLOVA - （amazonだと Alexaにあたる）AI platform 


**CLIENT - [CIC] - BRAIN - [CEK] - SKILL**
の構成。

### コンポーネント
- CLIENT
 - WAVEとかスマホアプリとか
- BRAIN
 - 言語解析、スキル呼び出し
- SKILL
 - 音楽を鳴らすSKillとか、Newsを読む、Lineを送る、灯をつけるなど
 
### インターフェイス
- CIC (Clova Interface Connect)
    - Speech recognition
    - speech syntesis
    - Natural language understanding
    - など

- CEK　(Clova Extention Kit)
    - LINE
    - LINE Music
    - など

例）
・「秋にあう音楽をかけて」＝秋、合う、音楽、を認識して、自動的に音楽を鳴らすSkillを呼び出して、選んだ楽曲をかける
・「この曲は何？」＝現在流している曲のタイトルや歌っている人が知りたいという解釈を行い、
曲のメタ情報をCEKに渡し検索して、曲名を答える


## 3. 課題

- 固有名詞の言語理解がまだ不十分
 - 音楽、場所、観光地、コンテンツ、アニメ、ドラマ、etcに対応予定
 - 日時や数字や慣用句の読み方に対応予定
 - かなり登録はしているが、まだまだとのこと
 - （これはAlexa Skillでは、[Built-in-intents](https://developer.amazon.com/public/solutions/alexa/alexa-skills-kit/docs/built-in-intent-ref/built-in-intent-library)の部分かな。）

-> Custom SlotTypeに当たる部分はCLOVAではデベロッパーが登録できるようにしないんだろうか？趣味の固有名詞とかはユーザーが登録した方が爆発的に広がると思うんだが。

- 日本語の問題
 - 強く発音しない子音
 - 同音異語
 - オンとクンの読み間違い、
 - アルファベットを日本語読みできない SEKAI NO OWARI
 - これらをカバーしようとして頑張ってる


## 4.感想

### Alexa skillsとの違いでおおっと思ったもの

- 日本語の読み方や慣用句に幅広く対応してくれそう。期待
- 音声からの話者認識ができるようにするとのこと。期待。
  - （話者の認識はAlexaでも以前噂はあったがその後途絶えている。）
- LINEのクマとかのキャラ筐体がでるということだが、安定感がない。棚と棚の隙間におく感じだろうか。　


### その他

- 秋に一般発売開始だそうです。
- 最後まで聞いてアンケートに答えた人の中から50人にCLovaをプレゼントだそうだが、
欲しいけど　最後まで聞けない・・　ぐぬぬ・・
- **Skillの開発するから、一個くれさい！**


### 改訂履歴
変換ミスがありましたので修正しました。「公演」→「講演」
日本語の熟語の変換は本当に難しいな。。
ノーツのカレンダービュー作成に関するトラブルシュートとTips

#はじめに
ノーツで、自作DB にカレンダービューを設計する方法をまとめました。

#基本的な作り方
他力本願ですみません。こちらの方々の情報がすばらしいです（多謝）

- [ダイアリーの作成](http://www.niji.or.jp/home/toru/notes/30.html) - なにぬねのーつ さん
- [スケジューラーの作成](http://www.niji.or.jp/home/toru/notes/32.html) - なにぬねのーつ さん
- [カレンダービューを作成する](https://www.ibm.com/support/knowledgecenter/ja/SSVRGU_9.0.0/com.ibm.designer.domino.main.doc/H_CREATING_A_CALENDAR_VIEW_STEPS.html) -IBM公式

カレンダースタイルのビューでは、1列目と2列目は用途が予約されている点が、一般的なビュー（「標準のアウトライン」スタイルのビュー）との違いです。

#トラブルシュートとTips
##カレンダーに文字が途中までしか表示されない
ビューの列の幅が、カレンダー表示でもそのまま適用されてしまうようです。設計している画面で列の幅を広げる（またはプロパティ画面で「幅」の値を増やす）か、最右の列であればプロパティ「利用可能なウインドウ幅まで拡張して使用する」にチェックを入れます。

##内容ごとに文字色や背景色を変える
カレンダースタイルのビューでも、一般的なビュー（「標準のアウトライン」スタイルのビュー）同様の[色づけ処理](https://www.ibm.com/support/knowledgecenter/ja/SSVRGU_8.5.3/com.ibm.designer.domino.main.doc/H_EXAMPLES_ABOUT_ADDING_PROGRAMMING_TO_COLUMNS.html)で実現できます。
1. 3列め以降に列を追加・挿入し、プロパティ画面で「色で値を表示」と「列を非表示」にチェックを入れます。
2. 列の値に目的の色情報（文字赤:文字緑:文字青（背景色を操作しない場合）、または 背景赤:背景緑:背景青:文字赤:文字緑:文字青 を指定します。それぞれの色要素は、0 から 255 のあいだで）を指定します。255:255:0:0:255:255 と指定すると文字が水色で背景が黄色、127:0:127 と指定すると文字が紫で背景はビュー既定の色になります。

##内容ごとにアイコンをつける
色の指定同様、カレンダースタイルのビューでも、一般的なビュー（「標準のアウトライン」スタイルのビュー）[同様の方法](https://www.ibm.com/support/knowledgecenter/ja/SSVRGU_8.5.3/com.ibm.designer.domino.main.doc/H_ABOUT_DISPLAYING_AN_ICON_IN_A_COLUMN.html)で可能です。
1. 3列め以降に列を追加・挿入し、プロパティ画面で「値をアイコンで表示」にチェックを入れます。列の「幅」は 1 でよいでしょう。こちらは「列を非表示」にチェックは入れません。
2. 列の値に、表示させたいアイコンの番号またはカスタムアイコンのリソース名を指定します。

##初期表示させるカレンダー形式（月単位、週単位など）を変更する
ビューのプロパティ画面のうち「利用できるカレンダー形式」にある「最初の形式」の選択で指定できます。
Unityに組み込まれているGUIStyleとTextureの一覧

http://wiki.unity3d.com/index.php/Show_Built_In_Resources

これが便利なのだが、どうもフィルタの結果が少ないと表示されなくなってしまう様だ。
少し調べた限りではスクロール量がマイナスになるのが悪そうなので、とりあえず

```csharp
        _scrollPos = GUI.VerticalScrollbar( r, _scrollPos, areaHeight, 0.0f, _maxY );
```

とあるのを

```csharp
        _scrollPos = Mathf.Max(0, GUI.VerticalScrollbar( r, _scrollPos, areaHeight, 0.0f, _maxY ));
```

とでもしておけばよい。
誰かちゃんと原因が分かったらWikiを修正してあげてください。

---

(2017/09/29 追記)
アイコンの方だが`EditorGUIUtility.FindTexture`はダメな子らしいので（["doesn't actually do anything"](http://answers.unity3d.com/questions/245255/path-to-texture-problem-editorguiutilityfindtextur.html)という言われ様である）、使いたいときは`EditorGUIUtility.Load("名前") as Texture2D`とするとよい。
Django + nginx + uwsgi でアプリを動かす

Python,Django,nginxはインストール済みの前提で書きます。
基本Djangoとuwsgiのチュートリアルに沿った事しかやりませんが、
途中でいろいろつまづいたことを中心に書いておきます。

Djangoチュートリアル
https://docs.djangoproject.com/ja/1.11/intro/tutorial01/

uwsgiチュートリアル
http://uwsgi-docs.readthedocs.io/en/latest/tutorials/Django_and_nginx.html

##virtualenvの設定とDjangoのインストール
まずはuwsgiチュートリアルのいうとおりに、
virtualenvの設定とvirtualenvにDjangoをインストールする。


ここで注意したいのがmysiteという命名は表面上はみえない(はず)なので、
プロジェクト名にしなくてもよい。
(詳しくは後述するが、ここでPJ名にするとディレクトリ構成がわけがわからなくなるのでmysiteが無難だけどまぁなんでもよい)

`django-admin startproject mysite`


引き続きuwsgiチュートリアルにしたがって
`pip install uwsgi`
して、test.pyを作成して、
`uwsgi --http :8000 --wsgi-file test.py`
して
http://example.com:8000
ブラウザから叩けば、表示される。

##nginx
uwsgiチュートリアルにもどり、nginxの設定を行う。
mysite_nginx.confの設定までは迷わずできるはず。

私がつまづいたのは

```nginx:mysite_nginx.conf
# Django media
location /media  {
    alias /path/to/your/mysite/media;  # your Django project's media files - amend as required
}
```

mysiteを変に自分で決めたproject名にしてしまい、ディレクトリをどこに指定すればいいのかわからなくなってしまった。

###mysiteとprojectの命名
uwsgiチュートリアルにのっているmysiteというのは
startprojectで指定する名前を指している

`django-admin startproject mysite`

ちなみにuwsgiチュートリアルにのっているprojectというのは
startappで指定する名前を指している
`python manage.py startapp project`

この２点さえキチンと把握しておけばそんなにつまづくことはないのではと思う

nginxの話にもどり、このシンボリックリンクはnginxでバーチャルホストを行うときのお作法らしい。
`sudo ln -s ~/path/to/your/mysite/mysite_nginx.conf /etc/nginx/sites-enabled/`

この後もチュートリアルに沿っていけば、画像の表示はできるはず。
http://example.com:8000/media/media.png 

途中で
`unix:///path/to/your/mysite/mysite.sock;`
ってどこにあるねん、と思うが、前述したmysiteとprojectの命名さえ誤っていなければ、
チュートリアルにしたがえば動く。

##mysite_uwsgi.iniの設定

http://uwsgi-docs.readthedocs.io/en/latest/tutorials/Django_and_nginx.html#configuring-uwsgi-to-run-with-a-ini-file
ここからの設定も基本的には前述したmysiteとprojectの命名さえ誤っていなければ、
チュートリアルにしたがえば動く。


##他つまづいたところ
また権限系でおこられたら

```nginx:mysite_nginx.conf
# chmod-socket    = 664
```
のコメントアウトを外せばよい。

また、PCのローカル環境以外で実施している場合に
`You may need to add to IPアドレス ALLOWED_HOSTS`
が表示される場合は、
/path/to/mysite/mysite/settings.py
に
`ALLOWED_HOSTS = [‘IPアドレス’]`
を入れると、正常に表示されるようになる。


##Djangoでつくったビューを動かす
とりあえず
http://uwsgi-docs.readthedocs.io/en/latest/tutorials/Django_and_nginx.html#install-uwsgi-system-wide
install-uwsgi-system-wideの章まで終わらせれば、

Djangoでビューを作成し、
(この章 https://docs.djangoproject.com/ja/1.11/intro/tutorial01/#write-your-first-view)

`uwsgi --ini mysite_uwsgi.ini`
を実行して、

`http://localhost:8000/{hogehoge}/`
でブラウザからアクセスすればDjangoで作ったビューが表示される。

(hogehogeはstartappの際の名前)
`python manage.py startapp hogehoge`


めでたしめでたし。
ipythonのpromptでbitcoinの価格を表示してみた。

### bitcoin price api
https://github.com/dursk/bitcoin-price-api

### code
```python
from IPython.terminal.prompts import Prompts, Token
from exchanges.bitfinex import Bitfinex
import os

class MyPrompt(Prompts):
    def in_prompt_tokens(self, cli=None):
        return [(Token, os.getcwd()),
                (Token.Prompt, ' ' + str(Bitfinex().get_current_price()) + ' >>>')]
                 
ip = get_ipython()
ip.prompts = MyPrompt(ip)
```

![screenshot_2017_9_28.png](https://qiita-image-store.s3.amazonaws.com/0/12587/35718f17-5539-3d9a-96ad-60937ba1ca90.png)

### conclusion
cool but it is so slow!. 
and if we have to show the price on screen, the tmux status bar might be a better place.
seleniumにてButtonがクリックできない時の対処法

#環境
python 2.7（2019/5追記、多分3系統でも）
使用OS:OSX
環境ブラウザ:Google Chrome

```python:imports
from selenium import webdriver
from selenium.webdriver.support.ui import Select
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
```

#Buttonが反応しない
pythonを使ってseleniumを動かしていた時のこと。
下記のようにxpathを使い`type:'button'`の要素を指定してclickしてみたがなぜかエラーが

```python:
driver.find_element_by_xpath('XPATH').click()
```

>selenium.common.exceptions.WebDriverException: Message: unknown error: Element is not clickable at point (741, 1767)

**この要素はclickできないと言うのだ。**
表示されているchrome上でclickしてみたが普通にできるし動く。



試しにこのボタンをちゃんとfindできているのか確認ついでにclickableか聞いてみた

```python:
if EC.element_to_be_clickable(By.XPATH, 'XPATH'):
    print 'true'
    driver.find_element_by_xpath('XPATH').click()
```

**trueと表示された上で同様のエラーメッセージが表示された。なんでや**

#問題解決
```python:
driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")
```
この一行を直前に追加したら動くようになった
ここを参考にスクロールをさせてみた。
https://selenium-python.a-zumi.net/faq.html

どうやらブラウザ上にて画面外にあるButtonはclickできないようだ。

#似たような問題
https://stackoverflow.com/questions/35126293/how-to-set-text-into-textarea-with-selenium-webdriver/35128666#35128666
これを見る限りではもしかしたら`sendKeys`も画面外にある場合は動かないのかも、、、
自分のケースでも対象が`type:submit()`の場合は画面外に存在しても動いたため、全体的に人間が画面を通してブラウザを操作するのととても近いらしい。
画面内に対象があるかどうかは結構大事な問題なようだ。
小学生でも知っておくべき公開鍵、秘密鍵についての基礎知識

仮想通貨が普及の兆しを見せており、公開鍵・秘密鍵の扱いについては読み・書き・そろばんに並ぶ常識として受け入れる時代がくるかもしれません。

オーストラリアでは小学校で暗号通貨の授業が始まっているそうです。
[NEMも！あるオーストラリアの小学校で暗号通貨の授業開講に世界が注目](http://www.cryptostream.jp/woorannacoin-6511/)

中でもNEMは学校の先生でも簡単にトークンを作れるのでおすすめですね。

最後に「ぼくのかんがえたさいきょうのぱすわーどりようほう」を紹介します。
まだ、いまいち公開鍵・秘密鍵がよく解っていない人、これからNEMを使った仮想通貨の教育を考えている人はご参考ください。

##ぼくのかんがえたさいきょうのぱすわーどりようほう

###かぎのしょうかい
ひみつかぎ：ほかの人に見せてはいけないぱすわーど
こうかいかぎ：ほかの人に持っておいてほしいぱすわーど

###あんごう文（らぶれたー）のつくりかた
らぶれたーを渡したい人のこうかいかぎをつかってメッセージをあんごう化します。
らぶれたーを受けとった人は、じぶんのひみつかぎをつかってかいどくします。
げたばこにいれたラブレターがほかの人にみつかってもあんごう文をよむことはできません。


###りよう回数をごまかせない肩たたき券のつくりかた
おとうさんの肩たたきけんを作ります。ぼくのひみつかぎをつかってりようかいすうのハンコを作ります。
おとうさんはぼくのこうかいかぎをつかって、ハンコがぼくにしか作れないことをかくにんします。
おとうさんがりよう回数をごまかそうとしても、ぼくのひみつかぎを知らないかぎりごまかせません。

おわり
Notes式で日付の曜日を生成するTips

#はじめに
ノーツの [@Text](https://www.ibm.com/support/knowledgecenter/ja/SSVRGU_9.0.0/com.ibm.designer.domino.main.doc/H_TEXT.html) 関数には、曜日を出力させる書式が用意されていないので、自前で作成する必要があります。
[ビュー列](https://www.ibm.com/support/knowledgecenter/ja/SSVRGU_9.0.0/com.ibm.designer.domino.main.doc/H_ABOUT_COLUMNS_ABOUT.html)であれば、[スタイル](https://www.ibm.com/support/knowledgecenter/ja/SSVRGU_9.0.0/com.ibm.designer.domino.main.doc/H_SETTING_STYLES_FOR_COLUMNS_OVER.html) に「日付」、[日付の表示内容](https://www.ibm.com/support/knowledgecenter/ja/SSVRGU_9.0.0/com.ibm.designer.domino.main.doc/H_ABOUT_FORMATTING_DATE_AND_TIME_COLUMNS.html)に「すべて」を指定すると、列の値に指定した日付値を曜日つきで表示してくれるのですが...

#式
```
@Text(TargetDate;"D0") + " (" + @Middle("日月火水木金土";@Weekday(TargetDate) - 1;1) + ")"
```

のようにすれば

> 2017/09/28 (木)

のような文字列が生成されるでしょう。

#別の方法
```
@Text(TargetDate;"D0") + " (" + @Switch(@Weekday(TargetDate);"日";"月";"火";"水";"木";"金";"土")  + ")"
```
と、[@Select関数](https://www.ibm.com/support/knowledgecenter/ja/SSVRGU_9.0.1/basic/H_SELECT_AT.html)を使用して素直に記載することでも実現できます。

#参考
- [@関数一覧](https://www.ibm.com/support/knowledgecenter/ja/SSVRGU_9.0.0/com.ibm.designer.domino.main.doc/H_7_FORMULAS_FUNCTION_REFERENCE.html)
- [@Middle関数](https://www.ibm.com/support/knowledgecenter/ja/SSVRGU_9.0.0/com.ibm.designer.domino.main.doc/H_MIDDLE.html)
- [@Select関数](https://www.ibm.com/support/knowledgecenter/ja/SSVRGU_9.0.1/basic/H_SELECT_AT.html)
- [@Text関数](https://www.ibm.com/support/knowledgecenter/ja/SSVRGU_9.0.0/com.ibm.designer.domino.main.doc/H_TEXT.html)
- [@Weekday関数](https://www.ibm.com/support/knowledgecenter/ja/SSVRGU_9.0.0/com.ibm.designer.domino.main.doc/H_WEEKDAY.html)
[AWS] Basic認証を設定する

## 概要
AWSにBasic認証を設定する方法です。

## ターミナルでアクセスする
キーペアとipアドレスを適時変更し、ターミナルからアクセスします。

```
ssh -i ~/.ssh/{キーペア.pem} ec2-user@{IP アドレス}
```

## httpd.confを編集する

ターミナルから下記コマンドを入力しhttpd.confを表示します。

```
sudo vi /etc/httpd/conf/httpd.conf
```

aを押して編集モードにしたら


下記をコメントアウトして

```
# AllowOverride None
```

下記を追記します（.htaccessを有効にするため）

```
AllowOverride All
```




追記が終わったら「control+[」で編集モードを終了し「:w」で保存、「:q!」で終了します。


## htmlに.htaccessと.htpasswdを設定する

.htaccess

```
<Files ~ "^\.(htaccess|htpasswd)$">
deny from all
</Files>
AuthUserFile /var/www/html/.htpasswd
AuthGroupFile /dev/null
AuthName "Please enter your ID and password"
AuthType Basic
require valid-user 
order deny,allow

```
.htpasswd

```
id:pass

```
下記のサイトで暗号化ができます。
http://www.htaccesseditor.com/#a_basic


以上です。

## おそらく役立つ情報 
痒いところに手が届くかもしれない記事を書いています。
フォローしてくれるとやる気になります！

- Qiita　プログラミングに関する情報はこちら
http://qiita.com/nadonado


- Twitter　日々のつぶやきはこちら
https://twitter.com/hironado
sqlalchemyのinsert高速化

# 記事の概要
- 以下記事のinsertの高速化の実験
    - https://qiita.com/yukiB/items/d6a70da802cb5731dc01

# 結論
- sqlalchemy.core速い。最も遅いやり方の55倍くらい

# 実験
## 実験結果
| 手法                  | 所要時間(sec) |
|-----------------------------------|----------|
| 1.最も遅いやり方                  | 1.486 |
| 2.ORMでまとめてInsert             | 0.369 |
| 3.sqlalchemy.coreでまとめてInsert | 0.027 |

## 対象DBのモデル
```
# models.py抜粋

class Item(Base):
    __tablename__ = 'items'
    id = Column(Integer, primary_key=True)
    name = Column(String(255), nullable=False)
    age = Column(Integer(), nullable=False)
```
## 1.最も遅いやり方
```
for i in range(0, 1000):
    item = Item()
    item.name = 'tarou'
    item.age = randint(1, 100000)
    session.add(item)
    session.commit()

```

## 2.ORMでまとめてInsert

```
items = list()
for i in range(0, 1000):
    item = Item()
    item.name = 'tarou'
    item.age = randint(1, 100000)
    items.append(item)
session.add_all(items)
session.commit()
```

## 3.sqlalchemy.coreでまとめてInsert

```
items = list()
for i in range(0, 1000):
    item = dict()
    item['name'] = 'bean'
    item['age'] = randint(1, 100000)
    items.append(item)
session.execute(Item.__table__.insert(), items)
session.commit()
Rubyで角度を（０〜359度の）正の角度に変換する

## ①（０〜359度の）正の角度変換（[Numeric#modulo](https://docs.ruby-lang.org/ja/latest/method/Numeric/i/modulo.html)版）

```ruby
def positive_angle(angle)
  angle.modulo(360)
end
```

## ②（０〜359度の）正の角度変換（[Numeric#remainder](https://docs.ruby-lang.org/ja/latest/method/Numeric/i/remainder.html)版）

```ruby
def positive_angle_by_remainder(angle)
  (angle.remainder(360) + 360).remainder(360)
end
```

## ③余談：-359〜359度の角度変換

```ruby
def angle_by_remainder(angle)
  angle.remainder(360)
end
```

## 変換結果

| 角度 | ① | ② | ③ |
|----:|----:|----:|----:|
| -720 | 0 | 0 | 0 |
| -630 | 90 | 90 | -270 |
| -540 | 180 | 180 | -180 |
| -450 | 270 | 270 | -90 |
| -360 | 0 | 0 | 0 |
| -270 | 90 | 90 | -270 |
| -180 | 180 | 180 | -180 |
| -90 | 270 | 270 | -90 |
| 0 | 0 | 0 | 0 |
| 90 | 90 | 90 | 90 |
| 180 | 180 | 180 | 180 |
| 270 | 270 | 270 | 270 |
| 360 | 0 | 0 | 0 |
| 450 | 90 | 90 | 90 |
| 540 | 180 | 180 | 180 |
| 630 | 270 | 270 | 270 |
| 720 | 0 | 0 | 0 |
ghemawatのgithubについて

ゲマワットへの憧れは止まらない。
ゲマワットのレポジトリでアクティブなのは、現在pprofだけのようだ。

https://github.com/ghemawat/pprof

"This is not an official Google product."

そう太字で書いてある。
プロトコルバッファを可視化できるらしい。
しかし私は実はプロトコルバッファはよくわからないのだ。
私はそっとブラウザを閉じた。
Assume role を使った認証をTerraformで利用する。

Assume role を用いた認証をTerraformで利用する際のメモ書き

```main.tf
# Provider
provider "aws" {
  access_key = "AWSのアクセスキー"
  secret_key = "AWSのシークレットキー"
  region     = "リージョン"
  assume_role {
    role_arn     = "arn:aws:iam::123456789:role/mochida.mochio"
    # 実行先アカウントのIAM Role を記載する
  }
}
```


### 参考
https://www.terraform.io/docs/providers/aws/
check_box_tag内でlink_toを使う方法

自分用覚書。

#check_box_tag内でlink_toを使う方法

```checkbox.html.erb
<%= check_box_tag :sample %>
<%= label_tag :sample, ("#{link_to "サンプル", "#"}に同意する。").html_safe %>
```
インタポレーションでlink_toを囲って、.html_safeを追加するだけです。
Unityのオブジェクトのインスペクタを自力で再現する

動作確認：Unity2017.1.1p1 (64bit)

---

普通にインスペクタに出るようにするのが面倒なこともあるかもしれない（いやないか？）。
そこで`SerializedObject`を使う。

```csharp
// objは適当なUnityオブジェクト

var space = 12;	// 値は適当に
var serialized = new SerializedObject(obj);
var iter = serialized.GetIterator();

while (iter.Next(true))
{
	GUILayout.BeginHorizontal();

	GUILayout.Space(space * iter.depth);
	EditorGUILayout.PropertyField(iter);

	GUILayout.EndHorizontal();
}
```

文字列に配列が付いてきたりするものの、それっぽいものができる。
スクロールイベントの負荷を軽減しつつpagetopへスムーススクロールさせる（イベント発火回数比較）

少しスクロールするとふわっと表示されてクリックするとページ上部にひゅ〜んとスムーススクロールするボタンを実装する機会結構ありますよね？

で、jQueryで`$(window).on('scroll', function〜`でスクロール量が○○以上になったらfadeInして〜とかやると思うのですが、何もしないとスクロールのたびにものすごい数処理が走ってしまいます。

なので、何らかの方法でスクロールイベントの負荷軽減をしつつ実装するかと思うのですが、その方法を少し比較しつつ実際に使えるコードとして残しておきたいと思います。

[スクロールイベント比較DEMO](https://codepen.io/shirahama_mika/pen/Xejdxr)

デモの右下に表示されているボタンがそれぞれ

（1） 負荷軽減なし
（2） setTimeout使う
（3） _.throttle関数使う

になっています。

## setTimeoutを使う
```js
  var timer = null;
  $(window).on('scroll',function() {
    clearTimeout( timer );
    timer = setTimeout(function() {
      if ($(this).scrollTop() > 300) {
        $('.pagetop2').fadeIn(200);
      } else {
        $('.pagetop2').fadeOut(200);
      }
    }, 200);
  });
```
デモの（２）の動きです。setTimeoutで予約したミリ秒内経つまでは、clearTimeoutで予約取り消し続けて、指定ミリ秒立ったら中の処理が実行されるみたいな感じで負荷軽減するパターン。
今回の処理で使うとちょっと表示されるまでの時間がもっさりしすぎてる気がする。

## lodash（プラグイン）の_.throttle関数使う

https://lodash.com/docs/4.17.4#throttle
scrollイベント中に一定間隔で処理を実行してくれるやつ
デモ（３）の動きです。

```
https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js
```
ヘッダーでlodash.min.jsを読み込んで配布先のDocumentationを参考に以下のように設定しました。

```js
$(window).on('scroll', _.throttle(updatePosition, 250));

function updatePosition() {
  if ($(this).scrollTop() > 300) {
    $('.pagetop3').fadeIn(200);
  } else {
    $('.pagetop3').fadeOut(200);
  }
}
```
アニメーションの動きはスムーズですね。


## イベント発火回数を比較してみる

ウィンドウサイズを780px×588pxぐらいにして、一番下までスクロールしてまた上に戻るという動作で、
`$(window).on('scroll', 〜`の中の「ボタン表示/非表示をスクロール量で判定する」イベントが何回呼ばれたかを、` console.count();`で比較してみました。

![comparison.png](https://qiita-image-store.s3.amazonaws.com/0/128192/f59c2f88-0bc4-f09a-fa3f-231fc509fc17.png)

スクロールするスピード等で多少前後するとは思いますが、やはり何もしないとすごい回数呼ばれますね。

## _.throttle関数を使ってスムーススクロールするボタンを実装してみる

比べてみた結果、lodashの_.throttle関数使う方法が負荷を軽減しつつストレスなく表示できそうなので、こちらを使ってページ上部にスムーススクロールするボタンを作りたいと思います。

[DEMO](https://codepen.io/shirahama_mika/pen/jGqxop)

```html
<a class="pagetop" href="#" style="display:none;">↑</a>
```
こちらのaタグにイベントを当てます。
CSSの`position: fixed;`で画面の右下に配置して最初は非表示にしておきます。

```html
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js'></script>
```
必要なjsを読み込みます。２つめのjquery.easing.min.jsはイージングのアニメーションに`'easeOutExpo'`使いたかったので読み込んでますが、jQueryにもともと入ってる`linear`、`swing `を使うのであれば読み込む必要ありません。

jsのコードは以下の様な感じです。

```js
$(function() {
　// 300px下にスクロールしたらボタンを表示する
  function updatePosition() {
    if ($(this).scrollTop() > 300) {
      $('.pagetop').fadeIn(200);
    } else {
      $('.pagetop').fadeOut(200);
    }
  }
  // スクロール中250ミリ秒ごとにupdatePosition実行
  $(window).on('scroll', _.throttle(updatePosition, 250));
  // .pagetpoを押すと上にスムーススクロールさせる
  $('.pagetop').on('click', function(e){
    e.preventDefault();
    $('html, body').animate({
      scrollTop: 0
    }, 800, 'easeOutExpo');
  });
});
```
lodashほかにも色々あるので勉強してみようと思います。
CloudKitをローカルキャッシュする際のコンフリクト

WWDCの[Advanced CloudKit](https://developer.apple.com/videos/play/wwdc2014/231/)と[CloudKit Tips and Tricks](https://developer.apple.com/videos/play/wwdc2015/715/)を元に記事作成しています。

# どのような時にコンフリクトが起きるのか？
## レコードがロックされていないとき
###0.初期状態
|  Place  |   Name  |  Age  |
|:-------:|:-------:|:-----:|
| iCloud  |   Paul  |   20  |
| デバイスA |  Paul  |   20  |
| デバイスB |  Paul  |   20  |

###1.デバイスAで変更発生
|  Place  |   Name  |  Age  |
|:-------:|:-------:|:-----:|
| iCloud  |   Paul  |   20  |
| デバイスA | **John**  |  **43**  |
| デバイスB |  Paul  |   20  |

###2.iCloudに変更適応
|  Place  |   Name  |  Age  |
|:-------:|:-------:|:-----:|
| iCloud  |   **John**  |   **43**  |
| デバイスA | John  |  43  |
| デバイスB |  Paul  |   20  |

###3.デバイスBで変更発生
|  Place  |   Name  |  Age  |
|:-------:|:-------:|:-----:|
| iCloud  |   Jonn  |   43  |
| デバイスA | John  |  43  |
| デバイスB |  **Ema**  |   20  |

###4.iCloudへ適応
|  Place  |   Name  |  Age  |
|:-------:|:-------:|:-----:|
| iCloud  |   **Ema**  |   43  |
| デバイスA | John  |  43  |
| デバイスB |  Ema  |   20  |

**コンフリクトは起きませんが、おかしなデータが出来上がります。**

## レコードがロックされている時
レコードの状態管理には[recordChangeTag](https://developer.apple.com/documentation/cloudkit/ckrecord/1462195-recordchangetag)が使われます。

###0.初期状態
|  Place  |   Name  |  Age  |  RecordChangeTag  |
|:-------:|:-------:|:-----:|:-----------------:|
| iCloud  |   Paul  |   20  |        A          |
| デバイスA |  Paul  |   20  |        A          |
| デバイスB |  Paul  |   20  |        A          |


###1.デバイス1で変更発生
|  Place  |   Name  |  Age  |  RecordChangeTag  |
|:-------:|:-------:|:-----:|:-----------------:|
| iCloud  |   Paul  |   20  |        A          |
| デバイスA | **John**  |   **43**  |        A          |
| デバイスB |  Paul  |   20  |        A          |


###2.iCloudへ適応
|  Place  |   Name  |  Age  |  RecordChangeTag  |
|:-------:|:-------:|:-----:|:-----------------:|
| iCloud  |  **John**  |   **43**   |    **B**   |
| デバイスA | John  |   43  |        **B**          |
| デバイスB |  Paul  |   20  |        A          |

**iCloudとデバイス1のrecordChangeTagが同じなら変更可能。その後、新しいタグを生成**

###3.デバイス2で変更発生
|  Place  |   Name  |  Age  |  RecordChangeTag  |
|:-------:|:-------:|:-----:|:-----------------:|
| iCloud  |  John  |   43   |    B   |
| デバイスA | John  |   43  |        B          |
| デバイスB |  **Ema**  |   20  |        A          |

###4.<font color="Red">コンフリクト！</font>:fire:
**iCloudのタグがBなのに対して、デバイス2のタグがAなのでコンフリクトが発生します。**

# Appleの見解
> ほぼ全てでロックアップデートを使ってくれ。そしてコンフリクトの解決をしてくれ。
ロックしないのは以下のような場合:
 ・ 非常に激しい更新がある場合
 ・ ローカルの変更を強制したい時(ユーザーの選択によって)
Flask-Loginの使い方

[Flask-Login](https://flask-login.readthedocs.io/en/latest/): ユーザー認証を簡単に扱うためのFlask拡張

```bash:インストール
$ pip install flask-login
```

## 主な機能

#### 1. login/logoutが `login_user(user)`/`logout_user()`で簡単に管理できる

```python
from flask_login import login_user, logout_user

@app.route('/login')
def login():
    if valid():
        login_user(user)
        return redirect(request.args.get('next') or url_for('index'))

@app.route('/logout')
def logout():
    logout_user()
```

#### 2. ログインが必要なページを `@login_required`デコレーターで簡単に管理できる

```python
from flask_login import login_required

@app.route('/protected')
@login_required
def protected():
    return 'Logged in as: ' + current_user.id
```
## 使い方

#### 1. `LoginManager`インスタンスを作り、`init_app(app)`する

```python
import flask

app = flask.Flask(__name__)
app.secret_key = 'super secret string'  # Change this!

from flask_login import LoginManager

login_manager = LoginManager()
login_manager.init_app(app)
login_manager.login_view = "users.login" # login_viewのrouteを設定
```

#### 2. `UserMixin`を継承した Userクラスを作る

```python
from flask_login import UserMixin

class User(UserMixin, db.Model)
    pass
```

#### 3. `@login_manager.user_loader`で認証ユーザーの呼び出し方を定義する

```python
@login_manager.user_loader
def load_user(user_id):
    return User.get(user_id)
```

#### 4. 認証したいページに `@login_required` デコレートする

```python
@app.route("/secret")
@login_required
def secret():
    return "secret contents"
```

#### 5. ログインページのViewをつくる

テンプレートから current_userという変数が使えるようになる。is_authenticated()メソッドでログインの有無を確認できるので便利。

```html+jinja
<ul class "nav navbar-nav navbar-right">
    {% if current_user.is_authenticated() %}
    <li><a href="{{ url_for('auth.logout') }}">Sign Out</a></li>
    {% else %}
    <li><a href=v{{ url_for('auth.login') }}">Sign In</a></li>
    {% endif %}
</ul>
```

#### 6. ログイン処理を実装する。

1. パスワードがあっていれば login_user(user, bool_remenber_me)でログイン済みユーザーとして記録する。
2. login_managerが 次に行くべきページを next queryとして保存しているので、そこにリダイレクトする。
3. 逆に logout_user() で現在のユーザーをログアウトさせることができる

```python
from flask import render_template, redirect, request, url_for, flash
from flask_login import login_user
from . import auth
from ..models import User
from .forms import LoginForm

@auth.route("/login", methods=["GET", "POST"])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        if VALID:
            login_user(user, form.remenber_me.data)
            return redirect(request.args.get("next") or url_for("main.index")
```

## そのたの有用機能

#### 1. cookieを使った **remember me** が簡単に実装できる

```python
login_user(user, form.remember_me.data)
```

#### 2. グローバル変数`current_user`がスクリプトからもテンプレートからも使える

```html+jinja
{% if current_user.is_authenticated %}
  Hi {{ current_user.name }}!
{% endif %}
```

#### 3. ログインしてない時は`current_user`に`AnonymousUserMixin`オブジェクトがセットされ、いい感じに使える

`AnonymousUserMixin`オブジェクトは以下の特徴を持つ。

- is_active, is_authenticated == False
- is_anonymous == True
- get_id() returns None
【curl hoge | bash - 】curlで取ってきたシェルスクをbashで実行しようとして軽くハマった話


どうも。表題どおりハマったので書いて行きます。

# やりたかったこと

よくhomebrewとかpipとかのインストールであるような、ブートストラップシェルスク、あれをやりたかった。

```
$ curl hoge | bash
```
こんな感じを想定してた。

# うごかなかったところ

シェルスクの中で`read`を使ったら入力プロンプトが表示されずにそこでプログラムがなんかエラー吐いて。

# 原因

理由はよく考えてみれば簡単で、もともと`read`は「標準入力(キーボード)やパイプから、改行文字が車で文字列をとってくる」コマンド、つまり、bashにパイプで渡していたシェルスクの本体をreadが読み込んじゃったという話。

なので、なんとかパイプを使わずに、でもファイルに保存とかせずにスクリプトを実行したい。

# 解決策

そういえばbashでファイルデスクリプタの入力作れるじゃん!ってことで、

```
$ curl hoge | bash
```
を

```
$ bash <(curl hoge)
```
にした。この記号が何かっていうと、`<()`の中のコマンドの実行結果(標準出力)を、仮想的な一時ファイル(Unixソケットバッファ)に保存して、そのファイルデスクリプタをそこの場所に置き換えてくれる。

もっと簡単にいうと、`curl hoge`の結果が`/dev/fd/4`とかのバッファに保存されて、`<()`って書いたところが`/dev/fd/4`に置き換わる。ファイルを保存しているのと対して変わっていないが、こちらの方がスマートにかけるしわざわざファイルも生成しないので楽。ということ。

# まとめ

bashのマイナーな記号知っとくとやっぱり便利だなって(小並感)
Cordova plugin.xmlの内容について

##Cordovaの作成時に文献が無くて困って調査したメモ

会社のプロジェクトで、Cordovaのプラグインを”使う”のではなく、”作る”必要が出てきて、色々調査をしましたが、最終的にはTryAndErrorで解決した結果を纏めています。

基本的に、Android環境でしか評価していませんが、志はiPhoneもWindowsも変わらないと思うので、同じようなやり方で進められるでしょう。（無保証）

###Cordovaの構成
CordovaでPluginを使った場合の基本の構成は、以下の図のようになります。
![CordovaPlugin.png](https://qiita-image-store.s3.amazonaws.com/0/98085/af1920ac-7590-db73-f3c1-db162f9b7290.png "CordovaPlugin.png")
今更ながらな話ですが、Cordovaを使った構成で、Nativeなリソースを使った処理がしたい場合など、こんなことをしないといけません。
問題となるのは、Pluginとして作ったものを配置するコマンド「cordova plugin add (Plugin名称)」の定義ファイルである「plugin.xml」です。

それでは、実際のXMLですが、次のような感じです。

```plugin.xml
<?xml version='1.0' encoding='utf-8'?>
<plugin id="cordova-plugin-nyanko" version="0.1.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    <name>cordova-plugin-helloworld</name>
    <js-module name="nyanko-js" src="www/nyanko.js">
        <clobbers target="nyanko" />
    </js-module>
  <platform name="android">
    <config-file target="res/xml/config.xml" parent="/*">
      <feature name="nyanko-java">
        <param name="android-package" value="ko.nyan.nyanko.Nyanko"/>
      </feature>
    </config-file>
    <source-file src="src/Nyanko.java" target-dir="src/ko.nyan/nyanko/"/>
  </platform>
</plugin>
```
直感でわかりそ～なところと、分からないところがります。
####xmlns,xmlins:android
私の中では、オマジナイです。
####id
一番大事かも。Cordova内部では、このキーを元に管理してるみたいです。
####version
自己管理用です。制御は掛かりません。
####name
人にとって大事な項目。cordova plugin lsコマンドでDescription的に表示されます。
####description
細かい説明です。これって、どこかでみるところあるのかなー。私はみたことがない。。。
####js-module
#####src
IFのJavaをどこに保存するかです。
src側が自分で作ったプラグインの置き場所（ローカルのファイルとか、GitにおいてるんだったらGitのパスとか）からの相対パスです。
#####name
ココに付けた名前がCordova内部での識別用の記号としてdefineされます。
#####clobbers
設定した値でjsのWindowオブジェクトの子要素としてアクセス出来るようになります。例えば、上記の例で、行くと、windows.nyankoとかでアクセスが出来るようになるってことですね。
逆に言えば、JavaScriptでWindowオブジェクトの予約語を設定してはイケナイということです。ちなみに、私は位置情報関連のプラグインを作成してた時にlocationて名付けて痛い目見ました。
####platform name
ターゲット端末ですね。今回はandroidのみです。
####config-file
Androidのconfig.xmlに、今回追加するconfig.xmlに追記するための宣言です。
今回追加する、Java側のクラス情報を記載すれば良いはずです。
####source-file
実際のJavaファイルをどこからどこにコピーするかですね。
js-moduleと考え方は一緒です。
srcのファイルをdstにコピーします。
srcのディレクトリは、最終的な展開先と同じくパッケージ名の設定にするのも有るみたいですが、個人的には短い方が間違いもないので好みです。
で、各々の連携はこんな感じになります。

![CordovaFileCoop.png](https://qiita-image-store.s3.amazonaws.com/0/98085/567de512-f81d-b048-ac68-668294367614.png "CordovaFileCoop.png")
OAuth提供元サービス側の設定場所

## OAuth提供元サービス側の設定場所

OAuthの仕組みは作れたけれど、
シークレットキーなどの発行の仕方がわかりにくかったので、まとめてみました。

### Yahoo! Japan

https://e.developer.yahoo.co.jp/dashboard/

「新しいアプリケーションを開発」から登録

<img width="978" alt="スクリーンショット 2017-09-28 9.45.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/151710/8d5855ba-d295-ba52-b544-494692e1ed54.png">

### Facebook

https://developers.facebook.com/apps/

「新しいアプリを追加」から登録

「プロダクト」 〉 Facebookログイン 〉 設定 に遷移して、
「有効なOAuthリダイレクトURI」にコールバックURLを記載する必要がある

<img width="1012" alt="スクリーンショット 2017-09-28 9.46.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/151710/8a881f67-7e52-6336-7b40-a3cd1c285845.png">

### Twitter

https://apps.twitter.com/

「Create New App」から登録

<img width="972" alt="スクリーンショット 2017-09-28 9.57.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/151710/eba8ec5d-118c-d386-bbb3-8ff5c2d20fe5.png">

### Google

https://console.developers.google.com/apis/credentials

新しいプロジェクトを作成

APIとサービス 〉 認証情報 に遷移して、
「認証情報を作成」から「OAuthクライアントID」を作成

<img width="1052" alt="スクリーンショット 2017-09-28 9.57.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/151710/9c016959-0875-0ae2-ac26-7b8884afeca0.png">


### LINE

https://developers.line.me/console/register/line-login/provider/

「LINEログイン」から登録

<img width="1071" alt="スクリーンショット 2017-09-28 10.01.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/151710/a25e34ba-08ec-8159-d34f-04b10a6940f3.png">


### Github

https://github.com/settings/developers

「Register a new application」から登録

<img width="1013" alt="スクリーンショット 2017-09-28 9.57.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/151710/e240e960-84d2-cd05-399f-c36f1ccc4211.png">


### Instagram

https://www.instagram.com/developer/clients/manage/

「Register a New Client」から登録

<img width="1048" alt="スクリーンショット 2017-09-28 10.41.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/151710/6850d9dd-cc6d-c2a6-8883-e506b136fcde.png">
Hiveのposexplode関数をPrestoで書き換える

# 参考記事：
https://qiita.com/toru-takahashi/items/3aad8c09c86dc8f18a78

# Goal
Hiveのposexplode関数をPrestoで書き換える


# Version 1
よりシンプルなSQL文を考えました

```
SELECT KEY, val FROM
(
  SELECT map(split(n1, ','), split(n2, ',')) m
  FROM (
    VALUES
    ('1,4,7', '2,5,8')
  ) AS x (n1, n2)
) d
CROSS JOIN UNNEST(m) AS m2( KEY, val);
```


```
presto:sso_test> SELECT KEY, val FROM
              -> (
              -> SELECT map(split(n1, ','), split(n2, ',')) m
              -> FROM (
              -> VALUES
              -> ('1,4,7', '2,5,8')
              -> ) AS x (n1, n2)
              -> ) d
              -> CROSS JOIN UNNEST(m) AS m2( KEY, val);
 KEY | val
-----+-----
 1   | 2
 4   | 5
 7   | 8
(3 rows)
```

比較：

```
presto:sso_test> SELECT
              ->  n as num, a as ans
              -> FROM (
              ->   -- record 生成用
              ->   SELECT n1, n2
              ->   FROM (
              ->     VALUES
              ->       ('1,4,7', '2,5,8')
              ->   ) AS x (n1, n2)
              -> ) t1
              -> CROSS JOIN UNNEST(regexp_extract_all(n1, '[^,]+'), regexp_extract_all(n2, '[^,]+')) AS t (n, a)
              ->
              -> ;
 num | ans
-----+-----
 1   | 2
 4   | 5
 7   | 8
(3 rows)
```

# Version 2
```
SELECT KEY, val FROM
(
  SELECT split(n1, ',') a1, split(n2, ',') a2
  FROM (
    VALUES
      ('1,4,7', '2,5,8')
  ) AS x (n1, n2)
) d
CROSS JOIN UNNEST(a1, a2) AS m2( KEY, val);
```
```
presto:dspf_public> SELECT KEY, val FROM
                 -> (
                 -> SELECT split(n1, ',') a1, split(n2, ',') a2
                 -> FROM (
                 -> VALUES
                 -> ('1,4,7', '2,5,8')
                 -> ) AS x (n1, n2)
                 -> ) d
                 -> CROSS JOIN UNNEST(a1, a2) AS m2( KEY, val);
 KEY | val
-----+-----
 1   | 2
 4   | 5
 7   | 8
(3 rows)
```
Error: Attribute application@supportsRtl value=(false) from AndroidManifestで動かなくなった時のメモ

表題のエラーで急にビルドできなくなったのでメモ

原因はfacebook-android-sdk:4.27.0にアップグレードされたから発生したらしい。

解決法はSuggestionに書かれていたとおり、
Suggestion: add 'tools:replace="android:supportsRtl" to <application> element at androidManifest.xml to override'

だけど
<manifest>のところにxmlns:tools="http：//schemas.android.com/tools"　が記述されている状態では解決せず、applicationタグ内に記述する必要があったので少し困った。

```
<application
        xmlns:tools="http://schemas.android.com/tools" <-ここにこれが必要
        android:name=".AAA"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_display_name"
        android:largeHeap="true"
        android:supportsRtl="false"
        android:theme="@style/AppTheme"
        tools:replace="supportsRtl"<-これを追加で解決
>
```

参考
https://stackoverflow.com/questions/39285678/manifest-merger-error-toolsreplace-not-working
React Nativeで画像リソースを解像度ごとに分ける

##はじめに
アプリ開発では端末の解像度に応じて画像リソースを出し分けることができ、Androidだとdpiごとにフォルダを分ける、iOSだとファイル名に"@2x"などのSuffixをつけて対応します。

React Nativeではどのように出し分けるのか調べてみました。

##React Nativeのドキュメントを見てみる
公式ドキュメントを調べてみると、iOSと同様に"@2x"、"@3x"で指定すれば良いことがわかります。
>You can also use the @2x and @3x suffixes to provide images for different screen densities.

(引用元 : https://facebook.github.io/react-native/docs/images.html)

iOSではネイティブと同じように使えそうです。ここではさらに、Androidの各dpiではどうなるのか、@2x,@3x以外の場合はどうなるのかも調べてみました。

##調べ方
以下のように@2x, @3xと書かれた画像に、それぞれ対応するファイル名をつけて、各解像度のAndroidエミュレータで、それぞれどの画像が読み込まれるか調べてみました。
xxxdpiの4倍を想定して@1x〜@4xを用意、加えて@0.75xや@1.5xの小数点込みのサイズも試しました。

<img src="https://qiita-image-store.s3.amazonaws.com/0/64046/672a19bf-6f80-812c-b424-fb092c97891a.png" width=70%/>

<img src="https://qiita-image-store.s3.amazonaws.com/0/64046/fbfd34e1-e353-f577-05c2-47d2a2030c3e.png" width=20%/>


##結果
mdpiで@1x, xxxdpiで@4xと、順当に画像が読み込まれました。
また、ldpiで@0.75x、hdpiで@1.5xと小数点込みでも問題なく適用されました。

例) hdpi端末に@1.5xの画像が表示された
<img src="https://qiita-image-store.s3.amazonaws.com/0/64046/ca5cadc5-1f6d-5c1a-402f-f6350b70c865.png" width=30%/>

##早見表
まとめると、画像ファイル名のSuffix(@Nx)とAndroid端末の解像度/iOS端末(実例としてiPhone)は以下のように対応付けられます。

|Suffix|Android|iOS|
|:-----------|------------:|:------------:|
|@0.5x|ldpi|-|
|@1x|mdpi|iPhone,3G,3GS|
|@1.5x|hdpi|-|
|@2x|xhdpi|iPhone 4,4S,5,5s,5c,SE,6,6s,7,8|
|@3x|xxhdpi|iPhone 6 Plus,7 Plus,8 Plus, X|
|@4x|xxxhdpi|-|

##おわりに
React Nativeで画像のファイル名に指定する@NxはAndroidでも倍率に応じて適切に読み込まれることを確認できました。
Eclipse + GlassFish できちんとクリーンできないとき

サーバをクリーンしたり、モジュール(Webアプリ)を除去しても、アプリのエラーが出たりして、なんか残ってるみたいなんだけど。。って時がある。

そんなときは、
`${GlassFishインストールディレクトリ}/glassfish/domains/domain1/eclipseApps/`
の下にWebアプリのディレクトリが残ってる場合があるので、そのディレクトリごと削除してしまえば良い。

この作業はサーバを停止している状態で行うこと。
また、停止していてもプロセスが掴んでいて削除できない場合があるので、その場合はタスクマネージャーなどでJavaのプロセスを終了(kill)する。