Kotlin _2

### 演算

fun main(args: Array<String>){
	// + - * / %
	val x = 10
    println(x / 3)
    println(x / 3.0)
    println(x % 3.0)
    
    var y = 5
    y++
    println(y)
    y--
    println(y)
    
    var z = 4
    z += 12
    
    // AND &&, or ||, Not !
    val flag = true
    println(!flag)
}

3
3.3333333333333335
1.0
6
5
false

### 文字列

fun main(args: Array<String>){
	// 文字列
	println("hello " + "world")
    
    val name = "yamada"
	println("my name is $name")
    println("my score is ${15 + 33}")
    
    // \n:改行 \t:タブ
    println("hello\n wor\tld")
}

hello world
my name is yamada
my score is 48
hello
wor ld

### ifの条件分岐

val score = 85
    if(score > 80){
        println("great!")
    } else if(score > 60){
        println("ok")
    } else {
        println("soso ..")
    }

> >= < <= == != 三項演算子 [code] val result = if(score> 80) “great” else “soso”
println(result)
[/code]

### when

// when
	val num = 3
    when(num) {
        0 -> println("Zero")
        1 -> println("One")
        2, 3 -> println("Two or Three")
        in 4..10 -> println("Many")
        else -> println("other")
    }

### while

var i = 0
    while (i < 10){
        println("loop: $i")
        i++
    }

do {
        println("loop2: $i")
        i++
    } while(i < 5)
&#91;/code&#93;

### for
&#91;code&#93;
for (i in 0..9){
        if(i == 5) break
        println(i)
    }

for (i in 0..9){
        if(i == 5) continue
        println(i)
    }
&#91;/code&#93;

### 関数
関数の引数は型を指定する
&#91;code&#93;
fun sayHi(name: String = "John", age: Int = 23){
    println("hi! $name($age)")
}

fun main(args: Array<String>){
	// for (変数)
    sayHi("tom", 22)
    sayHi()
}

値を返す時は、関数側で型を指定する

fun sayHi(): String{
    return "hi!"
}

fun main(args: Array<String>){
    val msg = sayHi()
    println(msg)
}

fun sayHi() = "hi!"

-> 配列で返す場合はどうするんだろう??

Kotlin _1

kotlin
ScalaやGroovyなどの言語と同様に、Javaバイトコードにコンパイルされて、JVMで動作する静的型付けのオブジェクト指向
静的なnull安全が保証されている、NullPointerExceptionを防ぐため、@Nullable 型と @NonNull 型が組み込まれている
Javaよりコードが短く簡潔で、Javaのコードを呼び出せる
Uber、Evernote、NetflixなどがKotlinを使用

### 1. Hello World

fun main(args: Array<String>){
    println("Hello world")
}

### 2. 変数

// -val 再代入できない 
// -var 再代入できる
// なるべくvalで宣言し、必要なところのみvarで宣言する

fun main(args: Array<String>){
    val msg: String = "Hello world"
    println(msg)
}

再代入はできない

fun main(args: Array<String>){
    val msg: String = "Hello world"
    println(msg)
    msg = "Hello world 2"
    println(msg)
}

Val cannot be reassigned
再代入の場合はvarを使う

fun main(args: Array<String>){
    var msg: String = "Hello world"
    println(msg)
    msg = "Hello world 2"
    println(msg)
}

### 3. 基本型
Double: 64ビット浮動小数点
Float: 32ビット浮動小数点
Long: 64ビット符号付き整数
Int: 32ビット符号付き整数
Short: 16ビット符号付き整数
Byte: 8ビット符号付き隻数
Char: 1文字を表す文字列
Boolean: 真偽値
String: 文字列

数値定数

val digits = 1234 // 10進数
val longInt = 1234L // Long
val hex = 0x1F // 16進数
val bin = 0b00001011 // 2進数
val dbl = 1234.5 // デフォルトはdouble
val withE = 123.4e10 // 123.4 * 10^10
val flt = 123.4f // Float

文字と文字列

// Char型はシングルクォート
val c = '0'
val n = '\n'
val u = '\uFF00'

// ダブルクォートの文字列も使える
val s = "Hello, world!\n"

val text = """
文字列を記入する。
	インデントもそのまま。
"""

// 文字列の中に変数を埋め込む
val i = 10
val str = "i = $i, i x 2 = ${i * 2}"

// stringはimmutableで構成要素はchar
val c0 = str[0]
for (chr in str){
	println(chr)
}

fun main(args: Array<String>){
    val msg: String = "hello world"
    val c: Char = 'a'
    
    val i: Int = 100
    val l: Long = 55555555555555L
    
    val d: Double = 234.523 
    val f: Float = 12.344F
    
    val flag: Boolean = true 
}

WebViewとは?

Webviewとは?
-> HTMLコンテンツをアプリ内で見れるようにすること
-> SafariやChromeで見られる枠組みをアプリ内に作ることができる
-> HTMLの更新をすれば良いので、アプリストアへの申請や審査、アップデートは必要ない
-> iOS, AndroidともにWebviewに対応している
-> ユーザ体験、操作性はネイティブアプリの方が優れている
-> 全てをWebviewにするのではなく、ヘッダ、フッタの調整などを行うことが多い
-> Webブラウザのレンダリングエンジンを呼び出しているが、ブラウザ自体を起動している訳ではない。そのため、設定やCookieなどは別で管理される

アプリ(Webview)のメリット・デメリット
– push通知を送信できる
– ネイティブを開発するよりも開発・運用コストを抑制できる
– Webとの違いを出しずらい

### Android
– Android System Webview
1.GUIコンポーネントのWebviewを使用する

<WebView
android:id=”@+id/webView″
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:layout_alignParentLeft=”true” />

2. マニュフェストにインターネットアクセスを許可するパーミッション追加
3. インクをクリックしたときに標準ブラウザを起動しないようにする

WebView myWebView = (WebView) findViewById(R.id.webView);
myWebView.setWebViewClient(new WebViewClient());
myWebView.loadUrl(“https://www.google.com/”);

### iOS
– SFSafariView、WKWebView、(UIWebView(非推奨))などを使う
UIApplication classを使う

import UIKit
 
class ViewController: UIViewController , UIWebViewDelegate {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let url = URL(string: "https://hoge.com/")!
        
        if #available(iOS 10.0, *) {
            UIApplication.shared.open(url, options: [:], completionHandler: nil)
        } else {
            UIApplication.shared.openURL(url)
        }
        
    }
}

SFSafariViewController

import UIKit
import SafariServices
 
class ViewController: UIViewController {
 
    override func viewDidLoad() {
        super.viewDidLoad()
 
    }
 
    override func viewDidAppear(_ animated: Bool) {
        let webPage = "https://hoge.com/"
        let safariVC = SFSafariViewController(url: NSURL(string: webPage)! as URL)
        present(safariVC, animated: true, completion: nil)
    }
}

EC2のautoscalingの設定

Auto Scalingの仕組みを構築するには二つの作業が必要
1. 起動設定の作成
2. Auto Scalingグループの作成

自動で作成されるEC2がどのAMIを使うか、インスタンスタイプは何にするか、ボリュームサイズはどうするかなどを設定する

### 1.Launch Configurations
– EC2左メニューのLaunch Configurations
– Create launch configuration
– EBS, IAM role, Security Groupは通常のインスタンス作成時と同様
– Advance Detailsで「Assign a public IP address to every instance.」を選択する

### 2. Auto Scalingグループの作成
– 最大の台数と最小の台数を決定する
– Create Auto Scaling Group
– 1で作成したconfigを選択
– group name: autosacling-group
– Start with 1 instance
– Netwrok(VPC)とSubnetを1で構築したインスタント同様のものを選択
– [Keep this group at its initial size]は、障害時に同様のインスタンスを保つ
– [Use scaling policies to adjust the capacity of this group]はサーバ負荷に応じて増減する
— Scale between ${min} and ${max} instances
— Name: AutoScaling-group-size
— Metric type: Average CPU Utilization
— Target value: 70(%)
— Instances need: 300 seconds to warm up after scaling
->作成すると、EC2一覧で、auto scaleインスタンスが新規に作成される

### スケールアウトテスト
1.ターミナルを二つ起動
2.ssh login
$ ssh ec2-user@**.***.***.** -i ~/.ssh/*.pem

topコマンドで%Cpu(s)でCPU使用率を確認
$ top

top - 20:19:08 up 8 min,  2 users,  load average: 0.00, 0.01, 0.00
Tasks:  85 total,   1 running,  48 sleeping,   0 stopped,   0 zombie
%Cpu(s):  0.0 us,  0.0 sy,  0.0 ni,100.0 id,  0.0 wa,  0.0 hi,  0.0 si,  0.0 st
KiB Mem :   490884 total,   107768 free,    68180 used,   314936 buff/cache
KiB Swap:        0 total,        0 free,        0 used.   409824 avail Mem 

もう一方のターミナルでサーバに負荷をかける
$ yes > /dev/null
-> %Cpu(s)が99近くに上昇

top - 20:21:38 up 11 min,  2 users,  load average: 0.44, 0.11, 0.04
Tasks:  86 total,   2 running,  48 sleeping,   0 stopped,   0 zombie
%Cpu(s): 99.3 us,  0.7 sy,  0.0 ni,  0.0 id,  0.0 wa,  0.0 hi,  0.0 si,  0.0 st
KiB Mem :   490884 total,   108424 free,    67140 used,   315320 buff/cache
KiB Swap:        0 total,        0 free,        0 used.   410864 avail Mem

300秒(5分)程度、待ちます。
すると、自動的にインスタンスが作成されます。VPC, subnet, IAM-roleなどはconfigurationで設定した内容

### スケールインテスト
$ ps -a
CMDがyesをkillする

すると、%Cpu(s)が99%から0に急減します。

top - 20:35:06 up 24 min,  3 users,  load average: 0.85, 0.92, 0.61
Tasks:  88 total,   1 running,  51 sleeping,   0 stopped,   0 zombie
%Cpu(s):  0.0 us,  0.0 sy,  0.0 ni,100.0 id,  0.0 wa,  0.0 hi,  0.0 si,  0.0 st
KiB Mem :   490884 total,   104732 free,    70548 used,   315604 buff/cache
KiB Swap:        0 total,        0 free,        0 used.   407424 avail Mem 

この状態で再度、300秒(5分)程度、待ちます。
※auto scaling groupのDesired Capacityが2だと、CPU使用率が下がっても、scale inしません。

すると、古い方のinstanceがterminateされました。
Last In First Outか、First In First Outかどちらか気になりましたが、FIFOのようです。
auto scalingは仕組みとして面白いです。

New Relicを使ってみる

メニューが色々あるが、まずはAPMを使ってみる
環境: Amazon Linux2(vagrant)

1.license key: *******
2.Install the PHP agent
RPM-based (Redhat, Centos, etc.) 64-bit

$ sudo rpm -Uvh http://yum.newrelic.com/pub/newrelic/el5/x86_64/newrelic-repo-5-3.noarch.rpm
$ sudo yum install newrelic-php5

3.Add PHP license key
/etc/php.d/newrelic.ini

newrelic.license="***"

newrelicをインストールしたタイミングで、newrelic.iniにlicenseが入っている

New Relic APMのセットアップの方法まではわかりました。

newrelic-installで、/bin or /usr/bin

newrelicをinstallしようとすると、/binと/bin/usrどちらにインストールするか質問がきます。一体何が違うのでしょうか?

$ sudo newrelic-install install

Below is a list of the directories in which we found a copy of PHP.
Please select the directory or directories for which you wish to install
New Relic. You can select either a single directory or
multiple directories by separating each choice with either a space or a
comma. To select all of the directories shown, please enter the special
keyword 'all' (without the quotes).

   1)   /bin
   2)   /usr/bin

ls -lで見てみると、どちらのディレクトリも同じファイルのように見える
$ pwd
/usr/bin
$ ls -l
-rwxr-xr-x 1 root root 5094784 11月 1 04:35 php

$ pwd
/bin
$ ls -l
-rwxr-xr-x 1 root root 5094784 11月 1 04:35 php

### /bin
– Linuxの基本コマンドが登録されている
– 基本的かつ非常時に利用するコマンド

### /usr/bin
– 一般ユーザが使うコマンド
– 緊急時のシステム保守に必須ではないコマンド

性質からいうと、/usr/binで良いか。

New Relicとは?

公式(英語): https://www.newrelic.com/
公式(日本語): https://newrelic.co.jp/
創業者 Lew Cirne: 元apple、NewRelicの前にTech会社企業、harverd・Stanfordなどで教鞭
概要: アプリケーションパフォーマンス監視。Saas。アプリの表示速度などを測定できる。高可用性状態でアプリケーションをスケールさせる。
競合: Dynatrace, AppDynamics, Data Dogなど
導入企業: GE, Adobe, Airbnb
日本の導入: Sansan, Cygames, CA, Mercariなど

### New Relicの仕組み
エージェントをインストールし、それがデータを収集してNew Relicのサーバに送信する(1分に1回)
-> Mackerelと仕組みは同じ?
対象: Browser, Mobile, Synthetics, Application(APM), Infrastructure

### New Relic APM
– アプリケーションのパフォーマンス監視(処理時間、スループット、エラー率、ユーザ満足度)
– 遅い順、スループットの多い順
– トランザクション毎ではSQLまで確認可
– 外部サービスパフォーマンス
– 言語処理パフォーマンス
– エラー分析、デプロイ追跡、サービスマップ、ヘルスマップ

PHP agent compatibility and requirements
PHP agent installation overview
release note

### New Relic Browser
– DOM, レンダリング、ネットワーク、サーバーサイド処理
– 遅いページのパフォーマンスを測定
– Chrome DevToolのNetworkタブのような機能
– JSをHTMLに埋め込む。APMを使用している場合は、自動
-> GAと同じ仕組みか?

### New Relic Synthetics
– 死活監視
– URLに対しリクエストを送る。HTTP Head, HTTP Get
-> AWSでいうHealth checkのようなものか?

### New Relic Mobile
– iOS, Androidのパフォーマンス監視
– SDKを各環境に埋め込み、ストアで公開

### New Relic Infrastructure
– サーバ監視
– ホスト単位のCPU、 メモリ、ロードアベレージ
– ストレージ
– ネットワーク送信量、受信料
– プロセスごとのパフォーマンス
– インフラのイベント履歴
– IT資産の管理
– クラウド、ミドルウェア監視
-> サーバ監視はAWSの場合、CloudWatchで見れるから、どれくらい有用かは不明

こう見ると、ベンダー各社のトラッキングサービスを1社ほとんどカバーしているという事か? 
それを実現できる技術力は素晴らしい。

Vue.jsでtinymce-vueを使ってv-modelをaxiosでpost

問題:TinyMCEのTextareaをVue.jsのv-modelで取得してaxiosでpostしようとしたが上手くいかない。
->TinyMCEでVue.jsを使えるようにできるパッケージ[tinymce-vue]があるらしい

まず、Vue.jsでのtinymce-vueの使い方のテスト。

$ npm install –dev @tinymce/tinymce-vue

/node_modules/@tinymce/tinymce-vue/lib/browser/tinymce-vue.min.js
の 「tinymce-vue.min.js」を任意の場所(tinymce-vue/)に移動

tinymce-vue.min.jsを読み込んで、後はTinyMCEのQuick Guideの通りに書いてみる。

    <h1>TinyMCEテスト</h1>
    <form method="post" action="confirm.php">
    <div id="app">
        <editor
          api-key="no-api-key"
          :init="{
            heigt: 500,
            menubar: false,
            plugins: &#91;
               'advlist autolink lists link image charmap print preview anchor',
               'searchreplace visualblocks code fullscreen',
               'insertdatetime media table paste code help wordcount'
             &#93;,
             toolbar:
               'undo redo | formatselect | bold italic backcolor | \
               alignleft aligncenter alignright alignjustify | \
               bullist numlist outdent indent | removeformat | help'
          }"
          :other_options="other_options"
          v-model="message"
        />
    </div>
    <input type="submit" value="送信">
    </form>
<script src="tinymce-vue/tinymce-vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
    el: '#app',
    components: {
        'editor': Editor
        
    },
    data: {
        message: 'hello!',
        other_options: {
            language_url: 'tinymce-vue/ja.js'
        }
    },
})
</script>

あれ? v-modelは上手くいってる? other_optionsでlanguage_urlを指定しているけど、これは上手くいってない??

あ、optionではなく、:initの方に書いたらlanguage_urlもできた。

<editor
          api-key="no-api-key"
          :init="{
            heigt: 500,
            menubar: false,
            language: 'ja',
            language_url: 'js/tinymce/langs/ja.js',
            plugins: &#91;
               'advlist autolink lists link image charmap print preview anchor',
               'searchreplace visualblocks code fullscreen',
               'insertdatetime media table paste code help wordcount'
             &#93;,
             toolbar:
               'undo redo | formatselect | bold italic backcolor | \
               alignleft aligncenter alignright alignjustify | \
               bullist numlist outdent indent | removeformat | help',
            
          }"
          v-model="message"
        />

これを実装してテスト
VueでTinyMCE使えないとなり一瞬諦めかけましたが、一つ一つ公式のチュートリアル、Githubからクリアーしていくと、意外と簡単に行けました。
やっぱり入力フォームに絵文字がないとね🙋‍♂️

Vue.jsでTinyMCEを使いたい

– TinyMCEのTextareaをVue.jsのv-modelで取得してaxiosでpostしようとしたが上手くいかない。
– TinyMCEでVue.jsを使えるようにできるパッケージがあるらしい。

Official: tinymce-vue
Get started: TinyMCE Vue.js integration quick start guide
Reference: TinyMCE Vue Technical Reference
Demo: Controlled input

quick start guideに沿ってやっていきます。
$ npm -v
6.13.4
$ sudo npm install -g @vue/cli
$ vue create –default tinymce-vue-demo
$ cd tinymce-vue-demo
$ npm install –save @tinymce/tinymce-vue

// Vueがインストールされたか挙動確認
$ npm run serve
http://192.168.33.10:8080/

//公式通りに書いていきます。
src/App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <editor
      api-key="no-api-key"
      :init="{
        heigt: 500,
        menubar: false,
        plugins: &#91;
           'advlist autolink lists link image charmap print preview anchor',
           'searchreplace visualblocks code fullscreen',
           'insertdatetime media table paste code help wordcount'
         &#93;,
         toolbar:
           'undo redo | formatselect | bold italic backcolor | \
           alignleft aligncenter alignright alignjustify | \
           bullist numlist outdent indent | removeformat | help'
      }"
    />
  </div>
</template>

<script>
import Editor from '@tinymce/tinymce-vue'

export default {
  name: 'app',
  components: {
    'editor': Editor
  }
}
</script>

なんとなく行けそうなのはわかった。

さて、これをどうやって実装するかだな。。

TinyMCE5.xでtoolbarをbottomに変更する方法

<script>
        tinymce.init({
            //省略
            toolbar_location : "bottom",
        });
</script>

これこれ。結構探した。

https://github.com/tinymce/tinymce/issues/4618#issuecomment-586529196

TinyMCE 5.2.0 was released to the community earlier this week, which added a new toolbar_location setting that can be used to set where the toolbar should be rendered. The valid values are 'top' (default) or 'bottom'. Here's a fiddle to show how to use the new setting/feature: http://fiddle.tinymce.com/8bhaab/1.

There is one issue we're aware of with the new feature when opening an inline dialog (eg search and replace) when sticky toolbars is also enabled. We'll include a fix for that in a future release. Please let us know if you have any further issues.