OmniAICreator/Qiita-1.07M huggingface dataset:
truffleruby のマイクロベンチマーク

先日。
何の気なしに

```bash
rbenv install -l
```

としてみたら、下の方に `truffleruby-1.0.0-rc14` などの見慣れない文字が。

なんだろうと思ってぐぐってみたら

> A high performance implementation of the Ruby programming language. Built on the GraalVM by Oracle Labs.
( https://github.com/oracle/truffleruby )

とのこと。本当に速いの？　と思って今日も楽しいマイクロベンチマーク。

# 走らせたコード

走らせたのはこんなコード：

```ruby:fobo.rb
# frozen_string_literal: true

def fibo(n)
  if n<=1
    1
  else
    fibo(n-1)+fibo(n-2)
  end
end

p fibo(ARGV[0].to_i)
```

# 測るコード

こいつを走らせて集計するスクリプトはこんな感じ：

```ruby:bench.rb
# frozen_string_literal: true

require "json"

ENVS = [
  [ '2.6.2' ],
  [ '2.6.2', '--jit' ],
  [ 'jruby-9.2.6.0' ],
  [ 'truffleruby-1.0.0-rc14' ],
]

def rbenv(v)
  path = `RBENV_VERSION='#{v}' rbenv which ruby`.rstrip
  yield(path)
end

data = ENVS.each.with_object(Hash.new{ |h,k| h[k]={} }) do |(e,opt),o|
  name = [e,opt].compact.join("/")
  opt ||= ""
  (28..42).each do |n|
    rbenv(e) do |ruby|
      tick = /real\s+(\d+m[\d\.]+s)/.match(%x[(time "#{ruby}" #{opt} fibo.rb #{n}) 2>&1])[1]
      o[name][n]=tick
      $stderr.puts( [name, n, tick].join(" ") )
    end
  end
end

puts( JSON.pretty_generate(data))
```

出走者は

* CRuby 2.6.2 ( 通常 )
* CRuby 2.6.2 ( --jit )
* jruby-9.2.6.0
* truffleruby-1.0.0-rc14

の四名。

# ビジュアライズするコード

出てきた JSON を以下のスクリプトでグラフにする：

```julia:julia
using Plots
using JSON

jstxt = open("result.json") do file
  read(file, String)
end

data = JSON.parse(jstxt)

function to_sec(x)
  strm,strs = split(x, "m")
  m=parse(Float64,strm)
  s=parse(Float64,strs[1:length(strs)-1])
  m*60+s
end

envs = [ "2.6.2", "2.6.2/--jit", "jruby-9.2.6.0", "truffleruby-1.0.0-rc14" ]
k = sort(collect(keys(data[envs[1]])))
println(k)
y = map( env->begin
  values = map( x->data[env][x], k )
  return map( to_sec, values )
end, envs )

plot( y,
  legend = :topleft,
  label = envs,
  xlabel = "Argument of fibo",
  ylabel = "result of time (real)",
  xticks = (1:length(k), k),
  yscale=:log10
)

savefig("plot.pdf")
```

このスクリプト。実行するのに 20秒以上かかる。なんでだろ。

まあそれはいいとして。
できたグラフは下図。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/6854/cf41c3ec-d111-7051-4a95-bf3f0b5a3de2.png)

truffleruby は全領域で JRuby に勝っている。
起動時間がやや遅いが、計算量が多くなると CRuby や CRuby+JIT を抜いて一位になる。
なるほど速い。

しかし、まだ release candidate なので困ることもあると思う。

[オフラインリアルタイムどう書く]( https://yhpg.doorkeeper.jp/ )のような遊びでは役に立つと思うけどどうだろう（次回＝最終回？の問題が計算量が気になる問題とは限らないけどね）
Wordpress：投稿と一緒に使われている画像も削除する


function.phpに記入します

```php
add_action( 'before_delete_post', 'delete_post_attachment' );
function delete_post_attachment( $post_id ) {
  $args = array(
    'numberposts' => -1,
    'post_parent' => $post_id,
    'post_type' => 'attachment',
    'post_status' => 'any',
    'post_mime_type' => 'image'
  );
  $attachments = get_children( $args );
  foreach( $attachments as $attachment ) {
     wp_delete_attachment( $attachment->ID, true );
  }
}
```
Laravel5.8をGAE Standard環境にデプロイする

色々エラーが出たのでやり方をメモっておく
https://cloud.google.com/community/tutorials/run-laravel-on-appengine-standard

```lang:プロジェクト作成
# 5.8を指定してlaravelプロジェクト作成
$ composer create-project laravel/laravel projectName --prefer-dist "5.8.*"

$ cd projectName
```

### app.yaml
instanceを指定せず、デフォルトのF1のままだと展開は出来てもメモリ不足？でエラーが出るのでF4を指定している

```lang:app.yaml
runtime: php72

instance_class: F4

env_variables:
  APP_LOG: errorlog
  APP_KEY: YOUR_APP_KEY
  APP_STORAGE: /tmp
  SESSION_DRIVER: cookie
```

### .gcloudignore

```lang:.gcloudignore
# This file specifies files that are *not* uploaded to Google Cloud Platform
# using gcloud. It follows the same syntax as .gitignore, with the addition of
# "#!include" directives (which insert the entries of the given .gitignore-style
# file at that point).
#
# For more information, run:
#   $ gcloud topic gcloudignore
#
.gcloudignore
# If you would like to upload your .git directory, .gitignore file or files
# from your .gitignore file, remove the corresponding line
# below:
.git
.gitignore

# PHP Composer dependencies:
/vendor/
```

### コード追加/編集

```lang:config/view.php
// compiledの部分を修正
'compiled' => storage_path(),
```

```lang:bootstrap/app.php
// 追加
$app->useStoragePath(env('APP_STORAGE', base_path() . '/storage'));
```

### composer.json修正
gcp-buildを入れないとdevパッケージが入ってしまう

```lang:composer.json
"scripts": {
        "post-install-cmd": [
            "chmod -R 755 bootstrap\/cache",
            "php artisan cache:clear"
        ],
        "gcp-build": [
            "composer install --no-dev"
        ]
}
```

### YOUR_APP_KEY変換

```
$ sed -i '' "s#YOUR_APP_KEY#$(php artisan key:generate --show --no-ansi)#" app.yaml
```

### 展開

```
$ gcloud app deploy -q
```
Laravel+FontAwesome サブディレクトリ運用で利用する

http://example.com/hogehohge で運用している場合にFontAwesomeを導入するとリンク切れが発生する場合の対処法

原因はfontファイルのパスがサブディレクトリを加味していないのでリンク切れで404エラーに

```sass:app.css
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.eot?46e7cec623d8bd790d9fdbc8de2d3ee7);
  src: url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.eot?46e7cec623d8bd790d9fdbc8de2d3ee7) format("embedded-opentype"), url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2?418dad87601f9c8abd0e5798c0dc1feb) format("woff2"), url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff?a7140145ebaaf5fb14e40430af5d25c4) format("woff"), url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.ttf?ff8d9f8adb0d09f11d4816a152672f53) format("truetype"), url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.svg?49279363201ed19a840796e05a74a91b) format("svg");
}
```


対処はlaravelフォルダ直下の「webpack.mix.js」を以下の様に修正してコンパイル


```js:webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .setResourceRoot("/hogehohe/");
```
$.ajaxでクロスドメイン対応（IE9）

アプリが動作する別のサーバにリクエストを投げた際、ChromeやIE11などのブラウザでは問題なく動作したのですが、IE9で上手くいかなかったことがありました。その際の対応を記しております。

# CORS
Cross-Origin Resource Sharingの略。通常XMLHttpRequestは Same-Origin Policyに従います。
ですので、`http://hoge-a.com` で提供されているアプリケーションのフロントエンドJavaScriptから、XMLHttpRequestで `http://hoge-b.com/add` へのリクエストは別オリジンへのアクセスとなり、制限されます。
オリジン間でこのようなリクエストを許可したい場合、サーバ側のレスポンスヘッダに `Access-Control-Allow-Origin` で許可するオリジンを指定します。
参考：[オリジン間リソース共有 (CORS)
](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS)

# IE9で上手くいかない
今回直面したケースは、フロントエンドJavaScriptから `$.ajax` を使って別オリジンに対してXMLHttpRequestを投げるというものでした。サーバ側には`Access-Control-Allow-Origin` を指定して、Chrome, IE11でレスポンスが帰ってくることを確かめました。しかしIE9で実施するとレスポンスが返ってこない...

# 対応
```JS
jQuery.support.cors = true;
```
> ブラウザがXMLHttpRequestを生成でき、そのオブジェクトがwithCredentialsプロパティを持っていればtrueです。 corsがサポートされていない環境で、クロスドメインXHRリクエストを許可し、クロスドメインリクエストを実行するには $.support.cors = true;を行なってください。

参考：[$.support | jQuery 1.9 日本語リファレンス | js STUDIO](http://js.studio-kingdom.com/jquery/utilities/support)

CORSがサポートされていないブラウザで別オリジンへのXMLHttpRequestを実行する際は、コード内で上記を含める必要があります。対応後、IE９でもレスポンスが返ってきました！
文字が要素の配列で重複していない文字だけ取り除く

#結論
```javascript
("js".repeat(5)+"bavcab").split("").filter(function (e, i, self) {return self.filter(function (_e) {return _e===e}).length>=2})
```
この場合は`v`と`c`が配列から消える

#参考
https://qiita.com/cocottejs/items/7afe6d5f27ee7c36c61f
PC⇔Arduinoのシリアル通信をPython3でやってみた

実行環境はタグをどうぞ．
なかなかPC⇔Arduinoのシリアル通信をしている記事がなかったので，python3でarduinoと通信する方法をメモ．
RasPiだとたくさんあるんだけど，同じ感じで実行しても出来ない．

#そもそもの話
実験装置を同期させてデータ取りたい時にArduino使って実験装置を操作する事がある．
で，最終的にはPCに実験装置のデータを集約してcsvに落とし込んだり，そこから自動でグラフ生成する．
それらを全部簡単にできるのがPythonってわけ．
じゃあPC⇔Arduinoのシリアル通信する必要があるよね！(SPI通信...？知らんな)

...まあシリアル通信でも遅延があるので，完全同期は無理！
お金のある人はLabVIEW​で実験装置同期してデータ取ろうな！(血涙)
[LabVIEW 2018]
(http://www.ni.com/ja-jp/shop/labview.html)

#やり方
PythonでPySerialを使用する．
ターミナルにてpipコマンドを使ってPySerialをインストール．

```
$ pip install pyserial
```

実際のコードは以下の通り．書くのめんどいのでArduino→PCも同じ感じでやってくれ．

**PC側**

```python:Serial_PC.py
import serial

#シリアル通信(PC⇔Arduino)
ser = serial.Serial()
ser.port = "COM4"     #デバイスマネージャでArduinoのポート確認
ser.baudrate = 115200 #Arduinoと合わせる
ser.setDTR(False)     #DTRを常にLOWにしReset阻止
ser.open()            #COMポートを開く
ser.write(b'1')       #送りたい内容をバイト列で送信
ser.close()           #COMポートを閉じる
```

**Arduino側**

```cpp:Serial_arduino.ino
//シリアル通信(PC⇔Arduino)
char data;

void setup() {
 Serial.begin(115200);
}

void loop(){
 if (Serial.available() > 0) {
   data = Serial.read();
   if(data == '1'){
     //実行したい内容
   }
   else{
     //違う時
   }
 }
}
```


#気を付ける事
###Arduinoとの通信が始まらない
>ser.setDTR(False) #DTRを常にLOWにしReset阻止

これが超・重・要☆
これがないと通信開始時にArduinoがリセットされて通信エラーになる
コンパイルエラーも出ないのでマジで鬼畜仕様．
これで半日位溶かした気が...

参考までに日本語のサイト１個だけ見つけたので載せる．
http://erias00.blogspot.com/2016/05/pyserialrts.html

###COM番号が2ケタ
COM番号が2ケタだとバグる問題は健在．~~流石Windows様~~
[COM10以上のシリアルポートを指定する方法]
(https://support.microsoft.com/ja-jp/help/115831/howto-specify-serial-ports-larger-than-com9)
rails server から flaskサーバーに値を送り、そのまま返す処理

#動機
rails でサーバー関係を勉強していたところ、railsでデータを取得して
python側で処理をして返すシステムを実装するための基礎を学びたかったから

#1.flask serverを立てる
ーflsk_app
　｜ーapp.py

```command
$ cd flask_app
$ python app.py
```

#2. python code
試行錯誤した結果、request.form でrails からpostしたものを受け取る。ということにたどり着いた。

```app.py
from flask import Flask, render_template, request,jsonify

app = Flask(__name__)

@app.route('/',methods=["GET","POST"])
def hello():
    #request.form でrails からpostしたものを受け取る。
    return jsonify(request.form)
if __name__ == "__main__":
    app.run(debug=True)
```
#3. rails　code
uri = URI.parse（"送りたいサーバー側のURL"）
res=Net::HTTP.post_form(uri, 送りたいデータ)
**送りたいデータはJSON形式(＝辞書の形?)**
res.**body**で値を取り出す。

```ser.rb
require 'net/http'
require 'json'
require 'uri'
uri = URI.parse('http://127.0.0.1:5000/')
#第2引数にHashを指定することでPOSTする際のデータを指定出来る
res = Net::HTTP.post_form(uri, { "q"=>'ruby'})
#puts res.code
puts res.body
```


#[メイン参照]
1.Ruby 2.6.0 リファレンスマニュアル
(https://docs.ruby-lang.org/ja/latest/library/net=2fhttp.html)

2.はじめての Flask #2 ~POSTを受け取ろう~
(https://qiita.com/nagataaaas/items/3116352da186df102d96)
Railsでのenumの使いどころと使い方について

# enumとは
  - 日本語で列挙型
  - 値に意味をもたせてわかりやすくする
  - 不正な値を入れないようにする
  - Railsではモデルで使う

今回はRailsを使います。Rubyで同じようなことはできるようですが、enumとしての機能はRubyには用意されていないみたいです。

# enumを使いたい状況
中身は何でもいいですが、ある処理があるとして、その処理の流れを
`処理開始待ち（waiting）->処理開始（start）->処理中（processing）->処理終了（done）`
という流れとします。
文字列型変数[progress]など作成してそのまま「waiting」とか「start」とか入れることもできますが、
数値型変数`progress`で管理すれば、進捗の進み具合を数値と比較して確認することもできます。
(progressが1より高ければ処理開始(satart)までは進んでいる、など)
ただし、数字で管理すると困ることがあります。それは
「あれ、1ってwaitingだっけ？startだっけ？」のように数字を見てその意味を忘れてしまうとコードを読むときに非常に読みづらくなります。

# enumのかっこいいところ
そこでenumを使って数字に意味をもたせることで解決できるのです。上記の例に当てはめてみると
progressカラム(integer型)

  - waiting : 0
  - start : 1
  - processing : 2
  - done : 3

をそれぞれ紐づけます。すると、progressカラムにwaitingを入れたら実際にはprogressカラムに0がデータとして入ります。
人間からみたら意味を持った文字を入れておきながら、DBでは数字で管理できるということです。
また、モデルのステータス管理で想定外の値をバリデーション等で束縛することもできます。

# 実際のコード
schema.rbの中身はこれです。
(taskモデルにinteger型のカラム`progress`を追加しているだけ)

```/db/schema.rb
ActiveRecord::Schema.define(version: 2019_03_23_024106) do
  create_table "tasks", force: :cascade do |t|
    t.integer "progress", default: 0
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
   end
end
```

app/models/task.rbの中身はこれです。
ここでenumを使い、単語と数値の紐づけを行っています。

```/app/models/task.rb
class Task < ApplicationRecord
  enum progress: {
    waiting: 0,
    start: 1,
    processing: 2,
    done: 3
  }
end
```

# 動きを確認
まずはインスタンス作成

```.irb
irb(main):001:0> task1 = Task.new
=> #<Task id: nil, progress: "waiting", created_at: nil, updated_at: nil>
```

マイグレーションファイルに定義しているとおり、デフォルトは`waiting`

```.irb
irb(main):010:0* task1.progress
=> "waiting"
```

`progress`に数値の１を代入すると`start`として認識されます

```.irb
irb(main):029:0* task1.progress = 1
=> 1
irb(main):030:0> task1.progress
=> "start"
```

# 他のタスクとの進捗比較
もうひとつインスタンスを作成します。

```.irb
irb(main):031:0> task2 = Task.new
=> #<Task id: nil, progress: "waiting", created_at: nil, updated_at: nil>
```

task1はtask2よりも進捗(progress)が進んでいるかの確認
数値として比較する場合は、メソッド`[カラム名]_before_type_cast`が必要になるみたいです。

````.irb
irb(main):080:0* task1.progress
=> "start"
irb(main):081:0> task2.progress
=> "waiting"
irb(main):082:0> task1.progress_before_type_cast > task2.progress_before_type_cast
=> true
```

# 感想
単語としても数値としても扱えるのは便利だけど数値として扱うときが若干めんどくさい。というかすげぇめんどくさい。

以上です。
離散(digital)技術者の出身(origin)

離散系を扱う技術者の出身別の特質を記録する。

# 音響(audio)

ミキサ、アンプ、スピーカなどの自作技術から、電気回路に詳しくなる。
雑音(noise)も、音響の雑音の源泉として回路の電気雑音を把握する。

ラジオ、テレビなど、電波を受信する音響機器では、電磁波および電磁雑音にも詳しい。

高価な電子計算機も、音響機器の制御には投入することがある。

音響のよいところは、電気的な経験・知識がなくても、耳で音を聞いて良し悪しが判定できるため、電気の知識・経験が豊富でなくてもよいことかも。

# 無線(wireless)
アマチュア無線をはじめとして、無線機の自作技術から電気回路に詳しくなる。

電子計算機の情報もアマチュア無線に乗せて交換することから、離散系について詳しくなる。

無線は音響に比べて、幅広い電気素子を使う可能性があり、かつ電磁波という三次元空間の計算を行うことから、やや電気の知識・経験があるとよいかも。

# 航空・宇宙
ミサイルの制御に計算機を用いるようになり、計算機の発展と航空・宇宙の技術の発展が加速した。

ミサイルの制御で用いる技術は、製鉄、原子力など自動制御の基本的な技術であり、産業的なひろがりが大きい。

# 機械(machine)
ロボットなど、機械の自動制御に計算機を使うようになってくると、日本では機械屋さんが直接計算機でプログラムを作りはじめられる。

# 遊興競技(game)
電子機器の普及では、電卓についてゲーム機器が多かった。
使う方から作る方に回るとよいかも。

# 映像(photo, video)
写真機、撮影機がデジタル化すると、撮った画像・映像をすぐにネットにあげられるようになり、映像系から計算機の道に進む人も増えている。

instagram, youtubeなど画像、映像は、言語の壁を超えて伝達されるため、音楽とともに、ネット世界の基本文化となりつつある。

# 天文
望遠鏡の計算機による記録、制御など、天文での計算機の利用は幅広い。
天文では、科学計算なども盛んで、計算機を利用する。
アマチュアとプロとが、継ぎ目なく繋がっている分野でもあり、専門的な科学技術の知見を持った人の層が厚い。

# 自動車
排ガス規制により、計算機により制御が始まると、自動車技術者により計算機利用が爆発的に増えた。自動運転の実用化に伴い、第二次計算機ブームが起きているかもしれない。

# 医療
X線写真の解析など、医療分野の計算機利用は早く、かつ高価な機器を導入することから、技術と産業の発展に寄与してきた。

CT,MRIなど計算機制御による測定機器や、遺伝子解析など、計算機利用の一大産業である。

# 軍事
航空宇宙は、軍主導で行ってきた国がある。ミサイルの制御は、誘導機能など、ロボット三原則など、社会的な合意との関係があいまいになっているかもしれない。

戦闘ロボットなどは禁止のはずであるが、研究開発は行われている可能性があるかもしれない。

アメリカの計算機産業の最大の出資者だったかもしれない。
# 文書履歴(document history)
ver. 0.01 初稿 20190323
ver. 0.04 URL追記　20230308
### 最後までおよみいただきありがとうございました。
いいね　💚、フォローをお願いします。
####  Thank you very much for reading to the last sentence.
Please press the like icon 💚　and follow me for your happy life.
Angularのカスタム非同期バリデータを定義するときはNG_ASYNC_VALIDATORSを使う。

Angularでカスタム非同期バリデータを作ったが、なぜかHttpClientでpostしてもgetしても動作せず。

公式ドキュメントにのがガイドに抜けがある。
https://v6.angular.io/guide/form-validation

例えば重複したメールアドレスがないかチェックするバリデータの定義は次のようになる。

```typescript:unique-email.validator.ts

import { Directive, Injectable } from '@angular/core';
import { AbstractControl, NG_VALIDATORS, Validator, ValidationErrors, AsyncValidator, NG_ASYNC_VALIDATORS } from '@angular/forms';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { UserService } from '../services/user.service';
/**
 * 重複したメールアドレスを確認する。
 */

@Directive({
  selector: '[uniqueEmail][ngModel]',
  providers: [
    { provide: NG_ASYNC_VALIDATORS, useExisting: UniqueEmailValidator, multi: true }
  ]
})
export class UniqueEmailValidator implements AsyncValidator {

  constructor(private userService: UserService) {
  }

  validate(c: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
    if (!c.value) {
      return null;
    }    
    
    return this.userService.getUserByEmail(c.value).pipe(
      map(user => {
        return user ? { uniqueEmail: true } : null;
      }
      )
    );  
  }
}

```


一番大事なのは、@Directiveアノテーションのprovidersの設定。
NG_ASYNC_VALIDATORSを指定するのです。NG_VALIDATORSじゃだめなのです。

```typescript:unique-email.validator.ts(抜粋)
@Directive({
  selector: '[uniqueEmail][ngModel]',
  providers: [
    { provide: NG_ASYNC_VALIDATORS, useExisting: UniqueEmailValidator, multi: true }
  ]
})
````


参考までに、ユーザーサービス。NG_ASYNC_VALIDATORSではなく、NG_VALIDATORSにするとthis.http.getが全く呼ばれません。

```typescript:user.service.ts
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Injectable, Inject } from '@angular/core';
import { Router } from '@angular/router';
import { UserResult } from './user.result';


@Injectable()
export class UserService {    
  static EMAILEXISTS_URL: string = 'api/User/GetUserByEmail'
  constructor(
    private router: Router,
    private http: HttpClient,
    @Inject('BASE_URL') private baseUrl: string) {
  }

  public getUserByEmail(email: string){
    if (!email) {
      return null;
    }
    let params = new HttpParams().set("email", email);    
    return this.http.get<UserResult>(this.baseUrl + UserService.EMAILEXISTS_URL, { params: params });      
  }
}
```
prettier-ruby VSCode Formatter設定

### 追記 (2019/08/27)

prettier-vscode 2.2 に上げたら、
以下リンクいただいた記事の通りprettier-ruby が効かなくなったので追記。

[prettier-ruby VSCode Formatterがprettier-vscode 1.10.0でぶっ壊れた？時にやってみる改善方法](https://qiita.com/github0013@github/items/0ea401c8c398f1c9e22d)

記事を参考に、 `prettier-ruby` の導入位置をプロジェクトフォルダ配下に変更したら動作するようになりました。

手順:

- prettier-vscode 再インストール
  - `$ rm -rf ~/.vscode/esbenp.prettier-vscode-x.x.x` を削除
  -  VSCode上で再インストール
- プロジェクトフォルダで `prettier-ruby` を 取得
  - `$ cd <PROJECT_PATH> ; yarn add --dev prettier @prettier/plugin-ruby`

@github0013@githubさん 大変参考になりました！ m(_ _)m

----

[@koshi_life](https://twitter.com/koshi_life) です。

[Prettier](https://prettier.io/)がイケてるという話だったので、Ruby版の [prettier-ruby](https://github.com/prettier/plugin-ruby) をVSCode上でRubyファイルを保存時に自動でフォーマットされるように設定してみました。

![output800-5.gif](https://qiita-image-store.s3.amazonaws.com/0/51734/f1ac40fe-562f-2644-f686-648ad702e937.gif)

## VSCode上の設定

### STEP1. Prettier拡張をインストール

VSCode[prettier-vscode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) という拡張をインストールします。

### STEP2. Ruby用のプラグインをインストール

[prettier-ruby VSCode formatOnSave](https://github.com/prettier/plugin-ruby/issues/113) を参考にしました。

~~STEP1で導入した拡張がインストールされているディレクトリ~~ (2019/08/27 追記より)
プロジェクトのディレクトリに移動してRuby用のプラグインをインストールします。


```
# [2019/08/27 追記] 以前のバージョンでは動作したが
# prettier-vscode 2.2 では動作しなかったのでコメントアウト
# $ cd ~/.vscode/extensions/esbenp.prettier-vscode-1.8.1/

# 対象プロジェクトでインストール
$ cd <PROJECT_PATH>
$ npm install @prettier/plugin-ruby
```


※ Version部分は読み替えたほうが良いかもしれません。

### STEP3. VSCodeの settings.json に加筆

- settings.json に以下、Rubyファイル保存時にフォーマッターをかける設定を加筆。

```
    "[ruby]": {
        "editor.formatOnSave": true
    },
```

- 参考キャプチャ: settings.json 開くまで
  - Preferences -> Settings  
<img width="450px" alt="vscode1.png" src="https://qiita-image-store.s3.amazonaws.com/0/51734/b3f82ce4-7047-213b-c78c-509ffbc4f161.png">
  - `{ }` 選択  
<img width="450px" alt="vscode2a.png" src="https://qiita-image-store.s3.amazonaws.com/0/51734/21b5ca34-fa53-990a-4625-d152d76c53ea.png">
  - settings.json 修正  
<img width="450px" alt="vscode3a.png" src="https://qiita-image-store.s3.amazonaws.com/0/51734/575eb1cc-22a8-6f8c-a5db-f6584387f95e.png">

### 細かい設定

[README.md#configuration](https://github.com/prettier/plugin-ruby/blob/master/README.md#configuration) 参照。

## 一括でFormatしたい場合はコマンドラインが楽

### コマンドラインのインストール

[README.md](https://github.com/prettier/plugin-ruby/blob/master/README.md) に書いてある package.json がある前提で以下でインストール。

```
# npm の場合
$ npm install --save-dev prettier @prettier/plugin-ruby

# yarnの場合
$ yarn add --dev prettier @prettier/plugin-ruby
```

### 使い方

```
# README.md より
$ ./node_modules/.bin/prettier --write path/to/file.rb

# 例: hoge.rb に適用
$ ./node_modules/.bin/prettier --write hoge.rb 
hoge.rb 612ms

# 例: appディレクトリ以下のRubyファイルに一括適用
$ find app -name *.rb | xargs node_modules/.bin/prettier --write
app/models/a.rb 311ms
app/models/b.rb 292ms
app/models/c.rb 342ms
app/models/d.rb 287ms
app/models/e.rb 229ms
...
```

# 参考

- [VSCodeで自動整形ツールのprettierで自動フォーマットされるようにする](https://qiita.com/sifue/items/dd1fdc538df69aedd1da)
作成中の発表スライドにサクッとソースコードを載せる方法

## はじめに

先日、[#railsdm2019](https://railsdm.github.io/) で @kei-p さんと一緒に登壇しました！ご覧くださった方々ありがとうございました。

[jQuery + Sass な SPA Rails アプリを React + CSS in JS にリプレースした話 #railsdm2019 - Speaker Deck](https://speakerdeck.com/gotchane/jquery-plus-sass-na-spa-rails-apuriwo-react-plus-css-in-js-niripuresusitahua-at-kei-p-at-gotchane-number-railsdm2019)

こちらの発表スライド作成中、サンプルのソースコードをどう載せるか、 @kei-p さんとあれこれ試行錯誤したのですが、簡単ですが便利な方法がありましたのでご紹介します。

## 課題

* シンタックスハイライト反映済みでコードを貼り付けたい
* なるべく大きいフォントサイズにしたい(スクリーンから遠い人にも見やすいように)
* サンプルコードをサクッと修正できるように


## tl;dr

**Markdown エディタで HTML 形式でシンタックスハイライトされたソースコードを貼り付けるだけで OK でした。**

こんな感じで表示できるようになりました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/222030/1c81dad1-c8b6-af23-d71b-df52f9436f2b.png)

## 事前準備

まず、お好みのシンタックスハイライトを適用した状態でソースコードを表示可能な Markdown エディタを準備します。

HTML 文書形式でソースコードを表示できる Markdown エディタでしたら何でも OK です。

### Markdown エディタ

* Boostnote
* Quiver
* VSCode
* ...

## 手順

### ソースコード準備

まず、お好みのシンタックスハイライト可能な Markdown エディタでサンプルソースコードを表示します。

```jsx
ReactDOM.render(
  <div>
    <Button>
      Push it
    </Button>
  </div>,
  document.getElementById('root')
)
```

### ソースコードコピー

次に表示されたソースコードを選択し、コピーします。以下の例では Boostnote を使っています。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/222030/c170da22-8a5c-275e-e5bb-5bb6aaed43f5.png)

### ソースコード貼り付け

作成中のスライドにソースコードを貼り付けます。今回は Google スライドでしたが、Keynote など、別のスライド作成ソフトでも OK です。

背景色が完全にあたっていないので中途半端な表示になっていますが、文字にシンタックスハイライトは適用されています。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/222030/f93a823d-82c0-02c8-fa0f-77eab450ec07.png)

### 背景色・フォントサイズ調整

最後に背景色・フォントサイズを調整して完成です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/222030/a10b40b4-a254-04aa-87c0-8b2b9cc7d43b.png)

## メリット

* 画像キャプチャを直接貼り付ける場合に比べ、解像度のノイズを気にする必要がなくなる
* フォントサイズの拡大も簡単
* Markdown エディタ上でソースコードの修正もしやすい

## デメリット

* 背景色が適用されないので、貼り付けする度背景色を調整する必要がある

## おわりに

簡単ではあるのですが、実際に何枚もソースコードをスライドに貼り付ける作業をした僕としてはかなり便利な方法だと思います。

ソースコードをスライドに貼り付ける方法で悩んでいる方はぜひ試してみて下さい！
【#PowerApps】PowerAppsでタイマーコントロールを使わずにタイマーコントロールよりも高速なループを実行する方法

# 概要

　PowerAppsを利用していてループ処理を実装する場合通常であればタイマーのRepeatプロパティをtrueにし、OnTimerEndプロパティなどを利用して疑似的に処理を行います。
　しかし、Durationに制限があるため、ループの速さには上限があります。（基本的にはこの速度で十分ですが...）ゲームやアニメーションをPowerAppsで実装した場合、どうしてもこの遅さがネックになってくる場合があります。そこで今回は、とあるコントロールを利用して、タイマーコントロール（以下タイマー）よりも高速なループ処理を実装します。

# 成果
　こちらの動画をどうぞ
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/PowerApps?src=hash&amp;ref_src=twsrc%5Etfw">#PowerApps</a><br>Timerコントロールよりも早く無限ループできるコントロール見つけた！<br>もうこれでTimerコントロールのループとはおさらばかな。 <a href="https://t.co/9gGQtuLTSN">pic.twitter.com/9gGQtuLTSN</a></p>&mdash; たく丸 (@taku_ma_ru) <a href="https://twitter.com/taku_ma_ru/status/1109253177205915648?ref_src=twsrc%5Etfw">2019年3月23日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


# 実装

　何のコントロールを利用するかですが、利用するのは【スライダーコントロール（以下スライダー）】の【OnChangeプロパティ】です。

## OnChangeプロパティ
　そのコントロール（今回はスライダー）の値が変化したときにそこに書かれた処理が実行されます。
つまり、OnChangeプロパティの中で、スライダーの値を変更してしまえばループになるということです。

値変更 → 変更を感知してOnChange → Onchangeプロパティで値変更 → 変更を感知してOnChange ...


設定は簡単で以下の通りに設定します。


```
App OnStart = Set(glbValue,0);Set(glbIsStop,true)
```

今回は分かりやすくグローバル変数に設定していますが、コンテキスト変数でも構いません。




```
slider1.OnChange = If(!glbIsStop,Set(glbValue,glbValue + 1))
        Default = glbValue
```


さすがに処理を止められないと困るので、glbIsStop がfalseの時だけ実行できるようにします。
今回のように 「!」を論理式の頭につけることで、true false の結果が逆になります。

一応以下のように書いても結果は変わりません。

```
If(glbIsStop,"",Set(glbValue,glbValue + 1))
```

この「Set(glbValue,glbValue + 1)」の後にそれぞれループを行いたい処理を書く形になります。

最後に実行できるようにボタンを配置して完成です。

Button1 OnSelect

``` 
Set(glbIsStop,!glbIsStop);If(!glbIsStop,Reset(Slider1))
```

## なぜReset()を行う？

ここが今回の鍵で、ただスライダーを止めるだけだと、当然次の処理が実行されません。
Reset()を行うと、***OnChangeプロパティも実行される***為、このような処理が必要になってきます。
つまり「If(!glbIsStop,Reset(Slider1))」はスライダーの OnChangeプロパティを実行している、ととらえていただいて構いません。



# 注意点
　気を付けるのは、タイマーと違って、アプリの編集中でも処理が実行される点です。きちんと止めないと処理によっては大変なことになるので気を付けましょう。

# まとめ

今まで
PowerAppsのループ処理 = タイマー

これから
PowerAppsのループ処理 = スライダー（OnChangeプロパティがあるコントロール）
（タイマーループの方がいい場合もあります。（スライダーループは速度が端末次第で変わるため））

今回作成したサンプルはこちらからDLできます。
https://powerusers.microsoft.com/t5/Community-Apps-Gallery/Loop-faster-than-Timer-Control/m-p/256147#M136
tqdm の表示の見方

Python でプログレスバーといえば、`tqdm`。

基本的な使い方は、

[Python: tqdm で処理の進捗状況をプログレスバーとして表示する](https://blog.amedama.jp/entry/2018/07/23/080000) 

あたりを参照。

```python
from tqdm import tqdm
import time

for i in tqdm(range(10)):
    time.sleep(3)
```

とかしたときに、

```
 40%|████████████████████████████████                                                | 4/10 [00:12<00:18,  3.00s/it]
```

とか表示されるのだが、

```
00:12<00:18
```

の意味がわからなかった。ネットを調べても出てこなかった。

実験してみた結果、

- `<` の左側 (`00:12`): 現在までの経過時間
- `<` の右側 (`00:18`): 完了までの予想時間

とわかった。

なるほど。 `<` は砂時計のくびれの部分のイメージなのかもしれない。`00:12<00:18` を反時計回りに90度回転させると、砂時計になるイメージだ。
Git覚書(Git Bash)

# <font color="Tomato">基本操作</font>
Sourcetreeは、ssh設定でつまずいたので、主にGit bashを利用しています。
## カレントディレクトリの確認
"~"がカレントディレクトリを表す。

```
$ echo ~
```
# 【初期設定】ホームディレクトリ変更
1. GitBashのショートカットを作成
2. プロパティ→ターゲットフォルダか何かを、変更したいディレクトリに変更。

# ディレクトリを消去
```
$ rm -r <directory name>
```
-rは再帰的に消去（nested folder）、-fは確認せずに消去。

# <font color="Tomato">コミット・プッシュ関連</font>
## Clone: リモート（僕の場合はGithub）からコピー
```
$ git clone http://github.com/xxx/xxxx.git
```
## ローカルへコミットするため、ファイルを登録（subversionでmodified/add/deleteとかの属性に対応）
```
$ git add <file name>
```
## 自分のローカルレポジトリの状況を確認
```
$ git status
```
## ローカルへコミット
```
$ git commit -m "commit message"
```
## リモートへプッシュ
```
$ git push origin <ブランチ名>
```
## コミット履歴を確認
```
$ git log
```
Pagesのインライン図版

# 解決したい問題
* Apple Pages では、__インライン__で図表（外部ファイル）を挿入すると、その外部ファイルオブジェクトの周囲を複数行のテキストに回りこませることができない。HTMLでいえば、`<img>`タグの`align="right"`や`align="left"` 的なことができない（と思う）。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/64391/d973ce5b-406e-bc00-2483-6c524be2343c.png)

* 挿入したファイルの右寄せ、左寄せなどもできず、文字どおり、挿入したカーソル位置に "インライン" でファイルが表示されるだけ。
* __テキスト折り返し__の設定をインラインにせず、__オブジェクトの配置__を「テキストと移動」としておけば、図表オブジェクトを任意の位置に配置して、テキストの回り込みも実現できるが、テキストを編集した場合の図表オブジェクトの移動が「そこじゃない」となる場合が、多く、結局その都度調整しなおすことになる。

# とりあえず実現する方法

## 図形を右寄せしてテキストを回り込ませる例

* 図表を挿入する部分の前後を改行して独立した１行とし、テキストを回り込ませたい側にスペースを入れておく（図表とテキストの間隔調整用）。（この行の__間隔__は、__固定値__などの絶対値は用いず、1行など__行__単位で指定する）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/64391/275b5741-0541-b291-07c8-d15716efc080.png)

* テキストボックスを作成し、インラインで図表のある行に配置する。テキストボックスの幅を調整して、テキストボックス、スペース１文字、図表でこの行が左右いっぱいになるようにする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/64391/974afec0-f553-6c4e-8676-75e92a66fedc.png)

* テキストボックスの高さを、図表オブジェクトの高さと同じにする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/64391/09df0ce6-a019-615c-4b7e-be685778b6a7.png)

* 周囲のテキストとレイアウトを揃えるため、テキストボックスの__テキストインセット__を 0 pt に設定する。（テキストボックスを選択→レイアウトタブ, 下図参照）
* 回り込ませたいテキストを、テキストボックス内にカット＆ペーストする。末尾の改行文字は不要。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/64391/4f7ee4e2-8481-6ac2-cc34-4dc9fef54ee7.png)

* 図表ファイルの大きさや、テキストボックスに入れる文章の量を調節するなどしてレイアウトを整える。

* Pagesの画面だと、地のテキストとテキストボックス内のテキストのウェイトが違って見える（テキストボックス内のテキストが痩せて見える）が、これはPagesの画面表示の仕様で、PDFなどに出力すれば差違がないことを確認できる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/64391/4cf086b7-d920-8ff3-c3a6-f3c94f2e0f14.png)

### テキストボックスと図表オブジェクトの上下配置を揃える
* テキトボックスと図表オブジェクトの高さが異なる場合、下揃えになる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/64391/6982df55-931b-2630-ca8e-d5a095fa920f.png)

* これを上揃えにしたり、任意の高さに配置するには、オブジェクトが挿入されているテキスト部分（図表オブジェクトそのものではなく、それが配置されているテキスト範囲）を選択して、__ベースラインの位置__を調整する。（選択後 スタイルタブ→フォントの歯車ボタン）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/64391/412c5b61-3a9d-d987-3efc-359e534ffb60.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/64391/80d238b8-3c01-9e7c-4162-9ddc989cea62.png)

* テキストと図形の間隔は、間に入れたスペースの文字サイズで調節する。スペースの代わりにタブを用いた方が行儀が良いかもしれない。

* 図形を左寄せする場合も、基本的に同じ。

## 限界
* テキストボックスに入れるテキストを段落単位などにしておかないと、結局、テキスト編集に伴う微調整は発生し、あまり効率は改善しない。
* なので、物語のような段落が長くなるような文書では効果は薄いと思われる。
* 短文の箇条書きを中心に構成されるマニュアルのような文書では、「テキストと移動」よりはかなりレイアウトの崩れが軽減され、それなりに重宝する。
【APIサーバ構築】ゼロから始めるElixir on Phoenix Ⅱ (2019)

### 注意書き

※[【環境構築】ゼロから始めるElixir on Phoenix (2019)](https://qiita.com/kanchan-1996/items/42394f3322654ffbf6ee)の続編となっております。興味のある方はぜひ上記のリンクからお願いします。

※2 私が命名したものがあります。命名したものはコマンドや予約語ではありません。ご自身で命名する際には下記表をご参照の上、置き換えてください。

|命名|用途|
|:--|:--|
|api|プロジェクト名|
|ローカルホスト|localhost:xxxx|
|Data|モデル名|
|datas|テーブル名 (ルート名)|
|url|カラム名|
|title|カラム名|
|artist|カラム名|


### ① DBサーバが寝ている場合は起こす💤

```
sudo service postgresql start
```
筆者は忘れており`DBConnectionExcepcion`かましていました( ˘ω˘)

### ② モデル生成のコマンドを叩く

[この記事](https://qiita.com/ma2ge/items/52dcebd54c5bdecafcb6)を参考にしています。それから[コマンド詳細が載っている記事](https://qiita.com/su_mi/items/d5d25a10a3d967f7b1a0)は少し情報が古い(一部廃止されたコマンドやphxではなくphoenixがある)ですが、どんなことができるのかを掴むには良いイメージになるはずです。

```
mix phx.gen.json Accounts Data datas url:string title:string artist:string 
```
形式はこんな感じのコマンドです。
`mix phx.gen.○○○ Accounts モデル名 カラム名:データ型 カラム名:データ型 カラム名:データ型`

今回のテーブル構造としては下記のとおりです。皆さんは好きなカラム名でつくってみましょう！

|カラム名|型|用途|
|:--|:-:|:--|
|url|文字列型|曲の歌詞が載っているページに飛ぶリンク|
|title|文字列型|曲名|
|artist|文字列型|アーティスト名|

**※自動でidというカラムが生成されます。自動採番の主キーになります。**

私のGitHubに挙げている[このデータ](https://raw.githubusercontent.com/k-horiuchi/scraping_hatsune_miku_wiki/master/hatsune_miku_wiki_data.txt)を使おうと思います。これは以前、[初音ミクWiki](https://www5.atwiki.jp/hmiku/)からスクレイピングで14時間かけて集めた曲一覧のデータです(急に個人的な趣味)。このデータを突っ込むのは手順⑩でやります。

### ③ ルーティング

 `router.ex` を下記のように設定します。(正直、編集の仕方がわからなかったので)[ここを参考](https://qiita.com/akameco/items/1920e351328b1cc0ace3)にしています。

```/プロジェクト名/lib/api_web/router.ex
defmodule ApiWeb.Router do
  use ApiWeb, :router

  pipeline :api do
    plug :accepts, ["json"]
  end

  scope "/api", ApiWeb do
    pipe_through :api
   resources "/datas", DataController, except: [:new, :edit]
  end
end
```

### ④ マイグレーションを実行

```
mix ecto.migrate
```

なんとこれだけでREST APIサーバの構築が完了しました。ここから先は実際に使ってみましょう。

※サーバ起動をここでしてください。前回の記事「サーバ、始動」で使ったコマンドです。

### ⑤ お詫び
※ホントはSEEDしたかったのですが、イマイチうまくいきませんでした。調べてきます。きっとそのうち更新されます。


### ⑥ Curlコマンドでデータを追加

コマンド末尾のURLは**http://＜ローカルホスト＞/＜プロジェクト名＞/＜モデル名＞**となります。

```
curl -X POST -H "Content-Type: application/json" -d '{"data": {"url":"test","title":"testTitle","artist":"testArtist"}}' http://ローカルホスト/api/datas
```

### ⑦ データを確認してみる

⑥で叩いたコマンドの末尾のURL(**http://＜ローカルホスト＞/＜プロジェクト名＞/＜モデル名＞**)でブラウザアクセスできます。画面に下記のような文字が出れば成功です。

```
{"data":[{"artist":"testArtist","id":1,"title":"testTitle","url":"test"}]}
```

### ⑧ Curlコマンドでデータを編集

```
curl -X PUT -H "Content-Type: application/json" -d '{"data": {"url":"a","title":"a","artist":"a"}}' http://＜ローカルホスト＞/api/datas/1
```

URLの末尾は編集したいデータのidの値を入れます。
再度⑦の手順でデータがすべてaになっていることを確認しましょう。


### ⑨データを削除してみる

最後にデータを削除してみましょう。

```
curl -X DELETE http://ローカルホスト/api/datas/1
```

再度ブラウザで確認して`{"data":[]}`になっていれば成功です！

### ⑩ おまけ
https://github.com/k-horiuchi/curlCmd
ここの`data.sh`をRaw Viewでみると初音ミクWikiのデータがずらりと並んでいます。末尾のURLを変えてコマンド実行すれば全データが投入されます。

```
sudo bash data.sh
```


### 終わり
環境構築と比べると随分楽にREST APIサーバを構築できた気がしますね！Railsを触ったことはありませんが、Laravelと近いように感じるので、やはりRailsライクなのでしょう。
まだまだ下記のような話はできていませんので、そこはまたいずれ

- Elixirについて
- [デプロイについて](https://qiita.com/kanchan-1996/items/4d4936811c507413063c)
- フレームワークについて
【勝手に毎日投稿祭り】物理サーバなくてもBIOS設定をいじってサーバを動かすことできます

※1週間限定で、「勝手に毎日投稿祭り」と題して毎日投稿しています。
ぜひぜひ、皆さんも便乗して下さい。

##サーバの電源投入は自動化出来るのか？
![1269310.jpg](https://qiita-image-store.s3.amazonaws.com/0/235933/1438f3ff-7c33-ce63-5934-805312f665f7.jpeg)

最近、調査した問題で、電源を落としても勝手にまた起動しているサーバがあり、サーバの自動電源ONの仕組みってどう設定がされているのかを調べる機会がありました。
電源が落ちてたら、いくらcronでスケジューリングしても、実行される事はないし、外部機器とかを使わないと自動で電源がつくことはないと考えていました。

###が、しかし！

***自動化は、サーバだけで実現できることに気づきました！***

方法としては、BIOSを使用します。
BIOSの種類によって、```Auto Power On```で設定したり、```Power　On　By　RTC　Alarm```を使ったりと設定方法は、多々ありますが、BIOSに電源設定機能が備わっている場合は、設定できます（私のPCは出来ませんでしたが、Windows等でも出来るようです）。

ですが、サーバのBIOSって敷居が高いというか物理のサーバを使わなくちゃなかなか操作できないから覚えられないって思いませんか？

***実は、仮想サーバでもBIOSはいじれました！***
VMwareを使って仮想サーバのBIOS表示する場合は、以下のようにします。

####仮想マシン起動時にF2キーを押下
vmwareマークが出ている間に押下しなくては、いけないのだが、この時間が、非常に短く、上手くできない場合は、仮想マシンの```[マシン名].vmx```ファイルに以下を追加すれば、BIOSに入れる時間を延ばすことができる。
```bios.bootDelay="10000"```←例では、10秒に設定。

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

BIOSにアクセス出来れば、以下のように表示される。
[![Image from Gyazo](https://i.gyazo.com/29aef4b1a0b2c634e9490baa2febe509.png)](https://gyazo.com/29aef4b1a0b2c634e9490baa2febe509)

これで、仮想サーバしかいじれない環境でもBIOSをいじってサーバを動かしてみることが出来る。
是非、使ってみて下さい。
osmdroid-wms を使って国土国交省の Capabilitiesを解析し地図画像を表示する

[mdroid-wms を使ってAndroid に国土国交省の地図画像を表示する](https://qiita.com/ohwada/items/23756124c9f783990ba6)
の続きです

###  WMS の Capabilities

WMSサーバで配信しているレイヤ（地図画像のデータセット）の一覧をXML形式で記述したもの

国交省のCapabilities機能の説明
http://nlftp.mlit.go.jp/webmapc/help.html#N3-1

###  osmdroid-wms の WMSParser

Capabilities を解析するXMLパーサー

```
HtpURLConnection  c = (HttpURLConnection) new URL(Capabilitiesのurl).openConnection();
InputStream is = c.getInputStream();
WMSEndpoint endpoint = WMSParser.parse(is);
// レイヤの一覧
List<WMSLayer> list = endpoint.getLayers();
```
レイヤの一覧をListView に表示する。
2000件くらいある。
レイヤ名の一覧が表示されるが、中身が推測できない。
![wms2_name_list.png](https://qiita-image-store.s3.amazonaws.com/0/64075/60c210b0-9542-dbb8-8e1e-9f391991bc69.png)

下記から、レイヤ名と名称の対応表を作成する。

国交省の地図レイヤ定義一覧
http://nlftp.mlit.go.jp/webmapc/LayerList.html

Python の [BeautifulSoup](https://tdoc.info/beautifulsoup/) を使用した。
 ソースコードはこちら。
https://github.com/ohwada/Android_Samples/blob/master/tools/python/parse_milt_layer_list.py

作成した対応表の例
800件くらいある。

```
N03-180101_100, H２９_都道府県界
N02-17_100, H２９_鉄道
```
勘案すると、中身が推測できない状態で、1000件ほど公開されていることになります。
勿体ないな。

Capabilitiesの解析結果と合わせてListView に表示する。
![wms2_title_list.png](https://qiita-image-store.s3.amazonaws.com/0/64075/71553da7-72c7-d14d-5476-2a0ebb7a242a.png)

レイヤ名が決まれば、前回の記事と同様にして、地図画像を表示します。

### スクリーンショット

国交省の鉄道を表示する。

左はベースのOSM地図、右は鉄道を重ねたもの
![wms2_osm.png](https://qiita-image-store.s3.amazonaws.com/0/64075/a00c7b99-15b6-15a5-ef1b-abe3212cddce.png) ![wms2_railway.png](https://qiita-image-store.s3.amazonaws.com/0/64075/e1a06026-54a2-16aa-b513-132ad8f2b801.png)

github にサンプルコードを公開した
https://github.com/ohwada/Android_Samples/tree/master/Osmdroidwms2
Redmine4【easy_ganttをインストール】

#環境
os: centos7.6
redmine: bitnami redmine4.0.2

#easy_ganttプラグイン
Redmineにオリジナルのガントチャートを追加し、ドラッグアンドドロップで関連タスクを設定したり、日付を移動できたりと非常に便利な機能を搭載してくれているプラグイン。

#easy_ganttのRedmine4への対応
これまでeasy_ganttはRedmine3.2以上4未満しか対応していなかったが、EasyRedmine社にRedmine4にいつ対応するのか英語で問い合わせてみたところ、Redmine4にeasy_ganttがすでに対応したらしい（つい一昨日リリースしたとのこと）。
親切に返信メールにダウンロードリンクが貼ってあったので早速ダウンロードしてインストールしてみた。

※特にeasyredmineの[サイト](https://www.easyredmine.jp/redmine-plugins#gantt-plugin)にはダウンロードリンクやRedmine4へ対応したとの通知はまだなさそう。
※メールでプラグインのダウンロードリンクを送る配布方法をとっているので、qiitaにはリンクを載せません。

#インストール

```
$ sudo su
# cd /opt/redmine-4.0.2-1/apps/redmine/htdocs/plugins
# wget ダウンロードurl
# unzip easy_gantt.zip
# rm easy_gantt.zip
# chmod 775 -R easy_gantt
# chown root:daemon -R easy_gantt
# /opt/redmine-4.0.2-1/use_redmine
bash-4.2# cd /opt/redmine-4.0.2-1/apps/redmine/htdocs
bash-4.2# bundle install --no-deployment
bash-4.2# bundle exec rake db:migrate RAILS_ENV=production
bash-4.2# bundle exec rake redmine:plugins:migrate RAILS_ENV=production
bash-4.2# exit

（redmineの再起動）
# systemctl restart redmine (事前に/etc/systemd/system/redmine.serviceを登録済み)
```

以前は```bundle exec rake db:migrate RAILS_ENV=production```でエラーが出てインストールできなかったのが、今回はすんなりできた。

最後にredmine管理画面の設定のAPIでRESTを有効にして完了。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/46791/73b55989-8549-d77a-dc9e-34c36bdf6e7a.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/46791/6f992b7f-a9e1-3d7a-b44d-ac414e90e932.png)

Enjoy!!
Nuxt.js+Vuex+Bulmaで共通で使えるエラーモーダルを作る

# はじめに
axiosでAPIを叩いてエラーが返った時に、どの画面でも共通のエラーモーダルを表示したいと思い実装してみました。

## Vuexでモーダルの状態を管理

モーダルの状態を管理するためのストアを用意します。

```js:~/store/error_modal.js
export const state = () => ({
  message: '',
  isActive: false
})

export const mutations = {
  setMessage(state, message) {
    state.message = message
  },
  active(state) {
    state.isActive = true
  },
  deactive(state) {
    state.isActive = false
  }
}

export const actions = {
  openErrorModal({ commit }, payload) {
    commit('setMessage', payload.message)
    commit('active')
  },
  closeErrorModal({ commit }) {
    commit('deactive')
    commit('setMessage', '')
  }
}
```

## モーダルのコンポーネントを作成

モーダルのコンポーネントを用意します。
Bulmaでtemplateを作っているので簡単にモーダルのデザインを作ることが出来ました。

また先ほど作ったerror_modalのstateとcloseErrorModalをそれぞれバインドします。
stateをバインドすることで、error_modalのisActiveがtrueに変更されるとモーダルが表示される寸法です。

あとはモーダルのバックグランドとクローズボタンにcloseErrorModal()をバインドしてあげてモーダルのクローズも完了です。

```vue:
<template>
  <div class="modal" :class="{ 'is-active': this.isActive }">
    <div class="modal-background" @click="closeErrorModal" />
    <div class="modal-content">
      <div class="notification is-warning">
        <button class="delete" aria-label="close" @click="closeErrorModal" />
        {{ this.message }}
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState('error_modal', [
      'message',
      'isActive'
    ])
  },
  methods: {
    ...mapActions('error_modal', [
      'closeErrorModal'
    ])
  }
}
</script>
```

## axiosのエラーハンドリング用pluginを作る

今回やりたかったのはaxiosでAPI通信をしてエラーが返ってきた時、モーダルを表示したかったので、axios用のpluginを作ってモーダル表示の処理を追加します。
axiosのInterceptorsについて詳しく知りたい方は[こちら](https://axios.nuxtjs.org/helpers)を参照ください。

```js:plugins/axios.js
export default function({ $axios, store }) {
  $axios.onError(error => {
    if (error.response == null) { return }
    store.dispatch('error_modal/openErrorModal', { message: error.response.data.message })
  })
}
```
（ここではerror.responseがあったら単純にモーダル表示にしてますが、statusやcode_nameなどでよしなにハンドリングするのが良いと思います。）

作ったpluginは忘れずにnuxt.configに設定しておきましょう。

```js:nuxt.config.js
  // 一部抜粋
  plugins: ["~/plugins/axios"]
```

componentからモーダルを呼び出したい〜って時は以下のように呼び出せます。 (mapActionsヘルパーを使っても良いです)

```js
$store.dispatch('error_modal/openErrorModal', { message: 'hoge' })
```

## エラーモーダルコンポーネントをlayoutに配置

最後に作ったコンポーネントを配置して終わりです。
今回はlayouts/defaultに配置することでどのページからもエラーモーダルが必要な時に表示されるようにしました。設置箇所も一箇所でいいですしね。

```vue:layouts/default.vue
<template>
  <div>
    <nuxt />
    <error-modal />
  </div>
</template>

<script>
import ErrorModal from '~/components/ErrorModal.vue'

export default {
  components: {
    ErrorModal
  }
}
</script>
```

# まとめ

VuexとBulmaを使って少ないコードでエラーモーダルを表示することが出来ました。
使う側もコンポーネントをimportするだけなのでスッキリ。

今回は非同期処理でのエラーハンドリングに使いましたが、どの画面でも共通したモーダルなり、トーストなり出したい時にはVuexで状態管理して、共通のlayoutsでcomponentを設置するのが、綺麗に纏まっていいなと思いました。

他にも色々実装方法があると思いますが、一例として参考になれば幸いです。
最後まで読んでいただきありがとうございました。
Django 親モデルのオブジェクト順に子モデルオブジェクトを表示させたい時

Djangoで開発している親モデルのオブジェクト順に
子モデルオブジェクトを表示させたい時がある。

例えば、

```models.py
class Post(models.Model):
        user = models.ForeignKey(User, on_delete=models.PROTECT)
        text = models.CharField(max_length=255, blank=True)

class Pictures(models.Model):
        post = models.ForeignKey(Post, on_delete = models.CASCADE)
        pic = models.ImageField(upload_to='pic')

```

のようにPostモデルがあり、そのPostモデルを外部キーとするPicturesモデルがあるとする。
この時に、例えばPostモデルオブジェクト順にすなわち投稿記事順にテンプレート側で表示させ、
それに伴い、投稿記事に紐づけられた写真も表示したいとする。

そのような場合は”逆参照”という概念を用いると良い。
(詳細記事はこちらhttps://www.djangobrothers.com/blogs/related_name/)

具体的にはテンプレート側で

```template.html
{% for post in posts.all %}
　　{% for picture in post.pictures_set.all %}
    ここでpostに紐づけられた写真を取得できる
    {% endfor %}
{% endfor %}
```

とすれば逆参照が行える
stylelint入門

## stylelint とは
- [stylelint](https://stylelint.io/)
- 160種類以上のルールをカスタマイズできるリンター
- デフォルトでは、すべてのルールが無効化されているため、少しずつルールを追加していける
- 予め定義されたルールもあるので、それをベースにルールをカスタマイズすることもできる
- プラグインにより新しいルールを追加することができる
- 一部のルールは自動修正(fixオプション)に対応している
- PostCSSプラグインとしても動作するのでタスクランナーに組み込みやすい

## とりあえず使ってみる
### 初期化
```Bash
$ npm init -y
$ npm install --save-dev stylelint stylelint-config-standard
```

### 設定ファイル作成
```json-doc:.stylelintrc.json
{
  "extends": [
    // 一般的な設定を継承する
    "stylelint-config-standard"
  ],
  "rules": {
    // ルールを上書きする
    "block-no-empty": null,
  }
}
```

### Lint
```Bash
$ npx stylelint src/**/*.css
# 自動修正(一部ルールのみ対応)
$ npx stylelint src/**/*.css --fix
```
### プロパティの並び順をいい感じにする
```Bash
$ npm install --save-dev stylelint-config-recess-order
```
```diff:.stylelintrc.json
{
  "extends": [
    "stylelint-config-standard",
+     "stylelint-config-recess-order"
  ],
  "rules": {
    ルールを上書きする
    "block-no-empty": null,
  }
}
```


## SCSSにLintをおこなってみる
### 初期化
```Bash
$ npm init -y
$ npm install --save-dev stylelint stylelint-config-recommended-scss stylelint-scss
```

### 設定ファイル作成
```json:.stylelintrc.json
{
  "extends": [
    "stylelint-config-recommended-scss"
  ],
  "plugins": [
    SCSS用のルールを追加する
    "stylelint-scss"
  ],
  "rules": {
    ルールを上書きする
    "block-no-empty": null,
  }
}
```

### Lint
```Bash
$ npx stylelint src/**/*.scss --syntax scss
# 自動修正(一部ルールのみ対応)
$ npx stylelint src/**/*.scss --syntax scss --fix
```

## サンプルコード
https://github.com/ohnaka0410/nodejs-samples/tree/main/stylelint

## 最後に
おすすめ設定はこちら
　→ [stylelintのおすすめ設定](https://qiita.com/ohnaka0410/items/36e64320c83b99f81bb8)
【SwiftChaining】 オブジェクトの保持

[SwiftChaining](https://github.com/objective-audio/SwiftChaining)の解説記事その7です。

[SwiftChaining](https://github.com/objective-audio/SwiftChaining)とは何か？というのは、こちらの[最初の記事](https://qiita.com/yasos/items/4d8dd0d1aa63605dc63b)を参考にしてください。

# SwiftChainingのメモリ管理

`SwiftChaining`でバインディング対象にしたオブジェクトは、監視を開始してもバインディング処理の中では強参照で保持されません。

バインディング対象のオブジェクトは内部的に弱参照で保持されているので、意図的にどこかしらのプロパティなどで保持していないとバインディングの処理を書いたそばから解放されてしまって何も動かないということが起こってしまいます。

`SwiftChaining`のメモリ管理のポリシーとしては、「実装をし忘れて動かないことより、知らずに動き続ける方が複雑な問題を生む」という考えで極力バインディング部分で強参照しないようにしています。

とは言え`UIControlAdapter`や`NotificationAdapter`のような、本来の監視対象となるオブジェクトとの橋渡し的な役割のオブジェクトの場合、わざわざプロパティで保持するのも冗長です。

そこで、例外として送受信オブジェクトを`Observer`側に強参照で保持させるという方法を用意しています。

## Observerに監視対象のオブジェクトを保持させる

`Chainable`に適合したクラスでは、`SwiftChaining`の内部で保持させるために`retain`という関数が呼び出せるようになっています。

[以前の記事](https://qiita.com/yasos/items/40852a6674618d4fb3c9)に出てきた`NotificationAdapter`を使うコードを例にすると、以下のように`chain()`の前に`retain()`を書く感じになります。

```swift
let observer = NotificationAdapter(MyClass.name,
                                   object: object,
                                   notificationCenter: .default)
    .retain()
    .chain()
    .map { (notification: Notification) -> String? in
        return notification.userInfo?["key"] as? String
    }
    .sendTo(receiver)
    .end()
```

これで、`NotificationAdapter`は`observer`の内部に強参照で保持され、プロパティなどに保持する必要があるのは`observer`だけになります。

上記のコードで`retain()`を挟まなかった場合には、`chain()`の後の`map`を実行する時点で既に`NotificationAdapter`は解放されてしまっています。`chain()`は`Chain`クラスを返すので、`NotificationAdapter`は必要なくなるからです。

## 受信対象のオブジェクトを保持させる

`sendTo()`で受け取る`Receivable`に適合したクラスでも`retain()`が使えるので、また[別の記事](https://qiita.com/yasos/items/f2d8fc774yukiphotos39214ebd71)にあった`KVOAdapter`でイベントの受信をするような場合でも、Adapterをプロパティで保持しなくても良くなります。

以下のように`sendTo()`に渡す前に`retain()`を呼びます。

```swift
self.isOnHolder
    .chain()
    .sendTo(KVOAdapter(self.mySwitch, keyPath: \UISwitch.isOn ).retain())
    .sync()
    .addTo(self.pool)
```

`retain`を呼ぶ、というのがちょっと昔に戻った感じがしないでもないですが、解放は自動で積極的に行われるようにしているので、メモリリークを気にしないといけないようなものではありません。

## retainの書き忘れ

こういった`retain()`のような記述はついつい書き忘れてしまいがちですが、バインディング処理の構築時にオブジェクトが解放されてしまっていないかどうかは`Assert`をしているので、どの変数にも入れず記述している場合は気付くことができるはずです。

ただし、ローカル変数に代入してから扱う場合は、バインディング処理の構築中に解放されることはなく`Assert`に引っかからないので注意が必要です。
Microbit:DC motor制御（DFROBOTボード）


DFROBOTの多機能・低価格なモータードライバー拡張ボード「Micro:bit Driver Expansion Board」の拡張ボードを使って、DCモータの制御を行います。
[Micro:bit Driver Expansion Board](https://www.dfrobot.com/product-1738.html)
[Micro:bit Driver Expansion Board SKU:DFR0548](https://www.dfrobot.com/wiki/index.php/Micro:bit_Driver_Expansion_Board_SKU:DFR0548#More_Documents)

このHPを参考にしました。
[多機能・低価格なモータードライバー拡張ボード](https://sanuki-tech.net/micro-bit/appendix-products/dfrobo-dfr0548/)


##接続

![Microbit_Driver_Expansion_Board_DFR0548_Board_Overview1.png](https://qiita-image-store.s3.amazonaws.com/0/165987/513ae389-18cd-8915-4045-a30c7b64c0d8.png)

M1、M2にモーターケーブルを接続します。外部電力をPower Inputに接続します。

![P_connection_r.jpg](https://qiita-image-store.s3.amazonaws.com/0/165987/04d650fb-34b2-0a22-4fd8-e53210d3158c.jpeg)


##プログラミング

このボードを使用する場合、拡張ライブラリーを使用します。
拡張ライブラリーの導入の方法は、Microbitのプログラミング画面を開いて
（1）機能拡張ボタンを押します。
![機能拡張1.png](https://qiita-image-store.s3.amazonaws.com/0/165987/706a65b7-745f-9af2-a8ee-ef470d095571.png)

（2）「検索またはプロジェクトのURLを入力」のところに
https://github.com/DFRobot/pxt-motor
と入力します。
![mb1.PNG](https://qiita-image-store.s3.amazonaws.com/0/165987/d33c0f9f-6aa5-b066-b7f5-27be70454632.png)
![mb2.PNG](https://qiita-image-store.s3.amazonaws.com/0/165987/4a494c96-f154-3c17-6014-e8a40e7c62c7.png)

（3）検索結果が出てきますので「motor」と書いてあるものをクリック
![mb3.PNG](https://qiita-image-store.s3.amazonaws.com/0/165987/dec64a66-b76b-27a0-9bd7-d6f2f79a3a85.png)

（4）横のブロックに「DF-Driver」が追加されます。
![機能拡張2.png](https://qiita-image-store.s3.amazonaws.com/0/165987/e2baaa79-3b18-ca6f-0f3d-e052a4962511.png)

###プログラムの作成

6足歩行ロボットを無線で制御するために、受信用（DCドライバー側）と送信用プログラムを作成します。
送信側のプログラムは、[Microbit:DC motor制御](https://qiita.com/Gyutan/items/ac3cd5442ef8f2be348b)と同じです。

####送信側プログラム

![servo_send.png](https://qiita-image-store.s3.amazonaws.com/0/165987/d7ff957e-fc9d-d77f-1bdf-57fc9b513d9a.png)

ABボタンを基本使わず、Microbitの傾きでコントロールしています。



####受信側プログラム

受信側のプログラムは、[Microbit:DC motor制御](https://qiita.com/Gyutan/items/ac3cd5442ef8f2be348b)の関数の中身を書き換えます。

DF-Driverの中にある**Motor**ブロックを配置します。**CW**、**CCW**はモータの回転方向です。時計回りをCW（英語のclockwiseの略）と言い、反時計回りのことをCCW（英語の counterclockwise の略）と言います。

接続方向によってCW、CCWの方向が変わるので確認しながら方向を選んでください。

![microbit-motor_resiver_df画面.png](https://qiita-image-store.s3.amazonaws.com/0/165987/9d79a65d-bba8-d02e-567e-4e98b7a6a6d1.png)


####実際の搭載例

![P_whole_r.jpg](https://qiita-image-store.s3.amazonaws.com/0/165987/c65a69bc-6077-748d-003b-0dec391fbefe.jpeg)
TF2.0とかグラフとか（機械学習名古屋第１9回勉強会）

# 自己紹介
名前: 中西克典
所属: 有限会社 来栖川電算
twitter: @n_kats_ 
昔: 学生の頃は幾何学分野の多様体とかのトポロジーをやっていた（伏線）
近況: 今日話すこと

---
# 話すこと

* グラフを扱うネットワークが面白そう
* TF2.0やってみた感想

---
# ここ数ヶ月やったこと
* 研究会でグラフ系ニューラルネットの論文を読んだ
* 12月にgraph_netsについてTFアドベントカレンダーを書いた（[リンク](https://qiita.com/n_kats_/items/89432f95f0edfc9d6970)）
* 1月末にお試し版TF2.0の記事を書いた（[リンク1](https://qiita.com/n_kats_/items/da69830a9c7e0b8259c6), [リンク2](https://qiita.com/n_kats_/items/d80dbb56f58e65da383b)）
* グラフ系ニューラルネットのライブラリを構想するも挫折

---
# グラフ系ニューラルネット

---
# グラフとは
+ 点と辺があって繋がっている奴、ネットワーク。
* 辺に向きがある奴もいる。
* もっと拡張して、点と頂点があってそれぞれ情報を持っている（ベクトルとかで）

そういうのを考える
![graph_with_vecctor.png](https://qiita-image-store.s3.amazonaws.com/0/51820/3b05ba07-6e80-7e63-bd00-5a6fe81cd9f7.png)

---
# グラフが出てくる問題
* 分子構造
* SNSの繋がり
* 論文などの参照・被参照
* 点群
* 3Dメッシュ

---
# グラフ系ニューラルネット
## GCN（graph convolutional network、グラフ版畳み込み）
![reception_field.png](https://qiita-image-store.s3.amazonaws.com/0/51820/c5aa94cb-4916-15a6-6888-6e45a520aeee.png)

CNNで3x3の範囲を畳み込みする感じで、隣り合った頂点の値に重みを掛けて足す畳み込みを使う。

|| CNN（画像） | GCN |
|---|---|---|
|形状|グリッド状|自由|
|層|各グリッドにベクトル|各頂点にベクトル（嘘）|

---
# ライブラリも充実
* graph_nets（deepmindのライブラリ）
* pytorch_geometric（pytorch用のライブラリ）
* chainer_chemistry（chainer用のライブラリ）

---
# 面白そうな点（グラフこそ最強）
* 非定型
* 画像・文書以外のテーマ
* 点群とか3Dメッシュみたいな幾何学的な対象を扱う（自分向け）
* __ニューラルネットもプログラムもグラフ__

---
# TF2.0プレビュー版


---
# TF2.0（TensorFlow2.0）
* 1月、プレビュー版公開
* 3月、alpha版公開
* 春、リリース

# 特徴
* TF1系のコードを整理
* eagerモードがデフォルト
* tf.kerasが他を駆逐
* tf.functionが強い

---
# めっちゃ変わるけど大丈夫？
[TensorFlow2.0の傾向と対策 〜 TensorFlowの消失](https://qiita.com/n_kats_/items/da69830a9c7e0b8259c6)に書いたこと。以下は消滅（隠される）

* tf.Session
* tf.train.XXOptimizer
* tf.placeholder
* tf.get_XX

とかとか

__基本的にTF1系のコードは修正が必要__

記事には「めっちゃ変わるやん」みたいな感想が散見（twitterをエゴサ）

---
# TF1系のライブラリ

* [tensorflow/models](https://github.com/tensorflow/models)の諸々
* [sonnet](https://github.com/deepmind/sonnet)  deepmindのTFラッパー
* [graph_nets](https://github.com/deepmind/graph_nets) sonnet利用

などなど

sonnet2.0が来るらしい（[Sonnet 2.0 (TF Dev Summit ‘19)
](https://youtu.be/rlpQjnUvoKw)）

---
# よし、TF2.0でグラフ系ライブラリを作ろう

---
# 1月中旬
* pytorch_geometricを勉強するついでにやってみよう
* graph_netsとかと扱うグラフの範囲が違う
* graph_netsも抽象化が足りなくね？一般化しよう

---
# 2月
* TF2.0変わりすぎ。ヤバイ・・・
* TF2.0とかPyTorchとかchainerとか、機械学習ライブラリに寄らないプログラムを書くのがTF2.0時代のベストプラクティスな気がする
* 計算グラフもグラフ

**機械学習ライブラリに依存しないグラフライブラリを作って計算グラフを扱えばいいじゃない**

---
# ...

---
# ..?

---
# ???

---
# 挫折しました
あれ、これって何を何するライブラリなんだ？
この抽象化要らなくね？ 
お仕事が〜

---
# 俺達の開発はこれからだ（ご清聴ありがとうございました）

---
# 研究会もよろしく（何しよ）
【Ruby】クラスとインスタンス

# クラスとインスタンスについて
Rubyにおけるクラスとインスタンスについて理解しづらい部分も多いかと思いますので例を交えながらなるべくわかりやすく解説して行きたいと思います。

## クラスとは
クラスとは共通の**属性**と**メソッド**をまとめる箱のようなものです。
学校のクラスを思い出してみてください、クラスには勉強を学ぶ生徒がいます。生徒という括りでは一つとしてまとめる事ができますが、それぞれ生徒には特徴があります。男女の区別があったり、身長、体重も違います、生徒はそれぞれ個々の名前を持っていますし上げようと思えばいくらでも出てきます。これらの情報を入れておくものがクラスです。

### 属性とメソッドについて
それでは属性とメソッドとは何か?
上記で述べた学校のクラスを例にとると生徒には名前がありましたね、その**「名前」**のような個々の情報を持ったものが**属性**になります。また生徒たちには共通してできる事があります。食べたり、話したり、笑ったりのようにそのクラス内の全員が共通して**できる事**が**クラスメソッド**です。

### クラスの定義
クラスを定義する際はクラス名を大文字で定義する事がポイントです。

```school.rb
class Student
end
```

これでStudentクラスを定義できました。

##インスタンスについて
インスタンスは上記で述べた属性値とメソッドのことです。例えば「名前」という属性であれば、属性値は「ゆーいち」のような個々が持っている名前ということです。また上でも述べたようにその属性値に対してできること（処理）が**インスタンスメソッド**です。

## インスタンスの定義
インスタンスはクラスから生成されるものなので、**newメソッド**を使って生成します。
newメソッドとはクラスに対して使える特別なメソッドでインスタンスを生成してくれます。

```school.rb
class Student
end

student = Student.new
```

これでインスタンスを生成する事ができました。

### 最後に
今回はクラスとは何か、インスタンスとは何か。について話していきました。
詳しいメソッドなどについては長くなってしまうので、次回から何回かに分けて説明したいと思います。
最後まで読んでいただきありがとうございました。
[Flutter] Delayを使う方。


Tread　Delayみたいなのはないかな？
FlutterではFutureを使ってDelayを使用します。

#基本

```dart:main.dart

Future.delayed(Duration(milliseconds: 10))
        .then((_) => _animationController.forward());
```

#例。

```dart:main.dart

 @override
  void initState() {
    // TODO: implement initState
    super.initState();

    // your code 

    Future.delayed(Duration(milliseconds: 10))
        .then((_) => _animationController.forward());
  }
```


Durationで欲しい時間入れば、ちゃんと動きます。