OmniAICreator/Qiita-1.07M huggingface dataset:
【WordPress】 MetaSlider でカルーセル表示して、かつスライドを 1 枚ずつ動かし、無限ループにしたい

# やりたいこと

- [MetaSlider](https://ja.wordpress.org/plugins/ml-slider/)  プラグイン使ってカルーセル表示する
- カルーセルで表示するスライドは1枚ずつ動かす
- 無限ループする

# 説明

- MetaSlider プラグインの中身は FlexSlider ？（たぶん）
- 管理画面からカルーセル表示の設定ができるけど、「1枚ずつ動かす」「無限ループする」の細かい設定ができない
- 細かい設定をするには自分でjQuery を記述する必要がある（オプションは FlexSlider を参考）
- 管理画面にある「高度な設定」に「JSを出力」という項目があり、チェックするとソースコード上に設定した jQuery の記述が自動で挿入される。細かい設定をするのに自分で jQuery を記述するので今回はチェックを外す。（※最初はチェックしておき、一通り管理画面上で設定し、ソースコードを確認すると自動挿入された jQuery のコードがあるので、それをコピペしてベースにするのもあり。下記のようなコードが表示されてる）

下記が追記するコードです。
オプションなど適宜変更してください。

```html:追記するjQuery（※メタスライダーの番号とオプションは適宜変更）
<script type="text/javascript">
    var metaslider_1268 = function($) {
        $('#metaslider_1268').flexslider({
            slideshowSpeed:3000,
            animation:'slide',
            controlNav:false,
            directionNav:true,
            pauseOnHover:false,
            direction:'horizontal',
            reverse:false,
            animationSpeed:1000,
            prevText:"Previous",
            nextText:"Next",
            fadeFirstSlide:false,
            easing:"linear",
            slideshow:true,
            itemWidth:180,
            minItems:5,
            itemMargin:30,
            maxItems:5,
            move:1,
            end : function(slider){
                jQuery('#metaslider_1268 > .flex-viewport > ul > li').each(function(){
                    slider.addSlide('<li>'+jQuery(this).context.innerHTML+'</li>', slider.count);
                    jQuery('.flexslider .slides').append('<li>'+jQuery(this).context.innerHTML+'</li>');
                });
            }
        });
        $(document).trigger('metaslider/initialized', '#metaslider_1268');
    };
    var timer_metaslider_1268 = function() {
        var slider = !window.jQuery ? window.setTimeout(timer_metaslider_1268, 100) : !jQuery.isReady ? window.setTimeout(timer_metaslider_1268, 1) : metaslider_1268(window.jQuery);
    };
    timer_metaslider_1268();
</script>
```

スライダーのオプションは下記を参考にしてください。

- [【jQuery】超万能スライダー FlexSlider の使い方をマスターする。 - ONZE](https://on-ze.com/archives/409)

デフォルトで無限ループの設定はありません。
上記の参考サイトにもありますが、`end: function(){}` でコールバックを記述できます。
このコールバックを使って無限ループするように記述しています。
コールバックに関しては、先述したコードにも `end: function(){}` を記述していますが、下記も参考になります。

- [jquery - Flexslider infinite loop is not working - Stack Overflow](https://stackoverflow.com/questions/25912634/flexslider-infinite-loop-is-not-working)
初心者によるプログラミング学習ログ 274日目

#100日チャレンジの274日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
274日目は、

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>274日目<br>・XDデザインカンプからのwebサイト模写<br>・キービジュアル、セクション2つ、作成<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1243268034191474689?ref_src=twsrc%5Etfw">March 26, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
振動センサモジュール使ってみた

# 概要
振動センサーを購入したので試してみました。

# 部品
**振動センサー:**[振動センサーモジュール](https://ja.aliexpress.com/item/32721306308.html?spm=a2g0s.9042311.0.0.27424c4dbqyh7S)
49円
<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/0e93c15d-dda3-4592-f13e-72ebdcce97d6.png">



**表示機:**[TM1637が組み込まれた7セグLED](https://ja.aliexpress.com/item/4000174141889.html?spm=a2g0s.9042311.0.0.27424c4dboG22l)
73円
<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/4ce296b8-61c4-8857-770e-6173b76eb6bc.png">

**コンピュータ:**[Arduino UNO互換機](https://www.amazon.co.jp/FC-%E5%B7%A5%E5%A0%B4-R3%E9%96%8B%E7%99%BA%E3%83%9C%E3%83%BC%E3%83%89-%E3%83%90%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3-ATmega328P-Arduino%E3%81%A8%E4%BA%92%E6%8F%9B%E6%80%A7/dp/B07H4KTVK5/ref=sxbs_sxwds-stvp?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=2S335VL3VWB52&cv_ct_cx=arduino+uno&keywords=arduino+uno&pd_rd_i=B07H4KTVK5&pd_rd_r=d31aaf3a-0258-4866-b883-ee3cb37525ae&pd_rd_w=II02q&pd_rd_wg=kzB7i&pf_rd_p=e29507e3-7937-4495-82f4-55b5d5ca8047&pf_rd_r=SN5PWYGF5TQS3EX5XFVB&psc=1&qid=1584128141&s=diy&sprefix=Ard%2Cdiy%2C251)
699円
<img width="400" alt="img.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/47f88a1f-c4ae-cc1d-84cc-12b8cc736b9b.png">


#配線
<img width="400" alt="スクリーンショット 2020-03-24 6.04.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/5d7cc609-4054-7355-e236-31e129442d71.png">



#ソースコード


```c++

#include <Arduino.h>
#include <Wire.h>
#include <TM1637Display.h>
#define SERIAL_BAUD 115200

#define CLK 2
#define DIO 3
TM1637Display display(CLK, DIO);

void setup() {
  Serial.begin(SERIAL_BAUD);
  while(!Serial) {}

  uint8_t data[] = { 0xff, 0xff, 0xff, 0xff };
  display.setBrightness(0x0f);
  display.setSegments(data);
  delay(1000);
  pinMode(4,INPUT);
}

void loop() {
  int _ao = analogRead(A0);
  int _do=digitalRead(4);

  display.showNumberDec(_do, false); 
  Serial.print("\nDO: ");
  Serial.print(_do);
  Serial.print(" AO: ");
  Serial.print(_ao);
  delay(1);
}
```
[github](https://github.com/hashito/arduino_startup/tree/master/Vibration_Sensor)

# 少し感想
`AO`の方の入力が下がると`DO`が0になるような動きをします。

すぐに検知が終了するため、実際に利用する場合には処理をかませる必要があると思います。
また、私のぶつ不良かもしれませんが、連続して点灯してしまう状態が何度かあったので、これが発生するとなかなか復旧しません。

# 動作確認
gif動画で上げても分かりにくかったので、Youtubeにて確認いただけると幸いです。
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/dazaiBNsxPQ/0.jpg)](http://www.youtube.com/watch?v=dazaiBNsxPQ)
e2fsprogsのマニュアルの日本語訳

##[e2fsprogs](http://e2fsprogs.sourceforge.net)のマニュアルの[日本語訳](https://github.com/ysatoautonomous/jm-draft/wiki#e2fsprogs)

### e2fsprogs-1.42.1
#### マニュアルのリンク一覧
[chattr(1)](https://ysatoautonomous.github.io/jm-draft/man2html/e2fsprogs/e2fsprogs-1.42.1/draft/man1/chattr.1.html)

[libblkid(3)](https://ysatoautonomous.github.io/jm-draft/man2html/e2fsprogs/e2fsprogs-1.42.1/draft/man3/libblkid.3.html)
[uuid(3)](https://ysatoautonomous.github.io/jm-draft/man2html/e2fsprogs/e2fsprogs-1.42.1/draft/man3/uuid.3.html)
[uuid_clear(3)](https://ysatoautonomous.github.io/jm-draft/man2html/e2fsprogs/e2fsprogs-1.42.1/draft/man3/uuid_clear.3.html)
[uuid_compare(3)](https://ysatoautonomous.github.io/jm-draft/man2html/e2fsprogs/e2fsprogs-1.42.1/draft/man3/uuid_compare.3.html)
[uuid_copy(3)](https://ysatoautonomous.github.io/jm-draft/man2html/e2fsprogs/e2fsprogs-1.42.1/draft/man3/uuid_copy.3.html)
[uuid_generate(3)](https://ysatoautonomous.github.io/jm-draft/man2html/e2fsprogs/e2fsprogs-1.42.1/draft/man3/uuid_generate.3.html)
[uuid_is_null(3)](https://ysatoautonomous.github.io/jm-draft/man2html/e2fsprogs/e2fsprogs-1.42.1/draft/man3/uuid_is_null.3.html)
[uuid_parse(3)](https://ysatoautonomous.github.io/jm-draft/man2html/e2fsprogs/e2fsprogs-1.42.1/draft/man3/uuid_parse.3.html)
[uuid_time(3)](https://ysatoautonomous.github.io/jm-draft/man2html/e2fsprogs/e2fsprogs-1.42.1/draft/man3/uuid_time.3.html)
[uuid_unparse(3)](https://ysatoautonomous.github.io/jm-draft/man2html/e2fsprogs/e2fsprogs-1.42.1/draft/man3/uuid_unparse.3.html)

[e2fsck.conf(5)](https://ysatoautonomous.github.io/jm-draft/man2html/e2fsprogs/e2fsprogs-1.42.1/draft/man5/e2fsck.conf.5.html)
[mke2fs.conf(5)](https://ysatoautonomous.github.io/jm-draft/man2html/e2fsprogs/e2fsprogs-1.42.1/draft/man5/mke2fs.conf.5.html)

[debugfs(8)](https://ysatoautonomous.github.io/jm-draft/man2html/e2fsprogs/e2fsprogs-1.42.1/draft/man8/debugfs.8.html)
[e2freefrag(8)](https://ysatoautonomous.github.io/jm-draft/man2html/e2fsprogs/e2fsprogs-1.42.1/draft/man8/e2freefrag.8.html)
[e2fsck(8)](https://ysatoautonomous.github.io/jm-draft/man2html/e2fsprogs/e2fsprogs-1.42.1/draft/man8/e2fsck.8.html)
[filefrag(8)](https://ysatoautonomous.github.io/jm-draft/man2html/e2fsprogs/e2fsprogs-1.42.1/draft/man8/filefrag.8.html)
[mke2fs(8)](https://ysatoautonomous.github.io/jm-draft/man2html/e2fsprogs/e2fsprogs-1.42.1/draft/man8/mke2fs.8.html)
[tune2fs(8)](https://ysatoautonomous.github.io/jm-draft/man2html/e2fsprogs/e2fsprogs-1.42.1/draft/man8/tune2fs.8.html)

### roff 版の入手先
https://github.com/ysatoautonomous/jm-draft.git
redux-form で Warning: Cannot update a component from inside the function body of a different component.

## 概要

[redux-form](https://github.com/redux-form/redux-form) の `Field` で **Warning** が表示された。

`Warning: Cannot update a component from inside the function body of a different component.`

## 環境

react: 16.13.0
redux-form: 8.3.1

## 警告が出る例

```react
import React, { Component } from "react";
import { Field, reduxForm } from "redux-form";

class Hoge extends Component {
  renderField(field) {
    const { input, label, type } = field;

    return (
      <div>
        <input {...input} placeholder={label} type={type} />
      </div>
    );
  }

  render() {
    const { handleSubmit } = this.props;

    return (
      <form onSubmit={handleSubmit(this.onSubmit)}>
        <Field
          label="Title"
          name="title"
          type="tetx"
          component={this.renderField}
        />
        <input type="submit" value="Submit" disabled={false} />
      </form>
    );
  }
}
```

上記のようなコードで `Field` に文字を入力すると、**Warning** が表示された。

## 解決方法

`React16.13.0` で新しく **Warning** が追加された。

[React v16.13.0](https://reactjs.org/blog/2020/02/26/react-v16.13.0.html#warnings-for-some-updates-during-render)

> Warnings for some updates during render
> A React component should not cause side effects in other components during rendering.

> It is supported to call setState during render, but only for the same component. If you call setState during a render on a different component, you will now see a warning:

> Warning: Cannot update a component from inside the function body of a different component.
> This warning will help you find application bugs caused by unintentional state changes. In the rare case that you intentionally want to change the state of another component as a result of rendering, you can wrap the setState call into useEffect.

しかし、 `React 16.13.1` で **Warning** が削除された。  
[React v16.13.1](https://github.com/facebook/react/releases/tag/v16.13.1)

> Revert warning for cross-component updates that happen inside class render lifecycles (componentWillReceiveProps, shouldComponentUpdate, and so on). (@gaearon in #18330)

**Warning** を削除するなら、`React16.13.1` にする必要がある。
または、`React16.13.0`より下げる必要がある。
(もしくは、 [redux-form](https://github.com/redux-form/redux-form) の更新を待つ?)

### 参考

https://github.com/redux-form/redux-form/issues/4619

https://qiita.com/koichiba/items/e0d772022baf94d48419
AWS Solution Architect Professional 持ちは GCP Associate Cloud Engineer もすぐに取れます！（個人の感想です）

AWS Solution Architect Professional (SAP) を持っていれば、GCP ほぼ未経験でも GCP Associate Cloud Engineer は知識の流用で何とかなると感じたので、取得までの過程をご紹介します。

# もちろん保証はしないし前提もあります
* 「すぐに」≠「ノー勉で」
* Kubernetes の基礎は知っていること
* あくまで「資格を取る」だけの話です

# 勉強したこと
* まずは、公式ドキュメントから「AWS プロフェッショナルのための Google Cloud」を熟読しましょう
    * https://cloud.google.com/docs/compare/aws?hl=ja
* IAM は個別にドキュメントを確認しておきましょう
    * 「概要」と「ベストプラクティス」だけで十分です
        * https://cloud.google.com/iam/docs/overview?hl=ja
    * IAM は AWS を知っているがゆえに混乱する部分もあります。まっさらな気持ちで読みましょう
* AWS の Auto Scaling に相当する部分は個別にドキュメントを確認しておきましょう
    * https://cloud.google.com/compute/docs/instance-groups?hl=ja
    * https://cloud.google.com/compute/docs/instance-templates?hl=ja
* その流れでネットワークロードバランサと HTTP(S)ロードバランサは見ておきましょう
    * https://cloud.google.com/load-balancing/docs/network?hl=ja
    * https://cloud.google.com/load-balancing/docs/https?hl=ja
* あとは実際に触ることが重要！アカウントを作って、GCPを使えるようにしましょう
    * 始め方はググればなんぼでも出てきます。十分な無償枠があります
    * <font color="Red">**同じことをコンソールでの操作とCLIの両方でやってみましょう**</font>
        * CLIは、個別のサービスを網羅する必要はありませんが、文型は押さえておきましょう。あと、デフォルトリージョン/ゾーンの設定
        * Cloud Shell でコンソールからお手軽にCLIが使えます
    * プロジェクトを作って、VPCを作って、サブネットを作って、VMを立てて、ファイアウォールルールを作って、VMにアクセスしてみましょう
        * VMへのアクセスの仕方はLinuxとWindows両方を押さえておきましょう
        * サードパーティツールではなく、コンソール or CLI 経由でより安全に！
            * https://cloud.google.com/compute/docs/instances/connecting-to-instance?hl=ja
    * GKE もクラスタを作って、Deployment 作って、Service 作って、外部に公開くらいのベーシックな操作はやっておきましょう
    * IAM も試しに操作してみましょう。深堀りはしなくて大丈夫です。
    * 最低、これくらい触っておけば、イメージはつくはず（AWSに慣れ親しんでいる人は）です
* 最後に模擬試験はMUSTでやりましょう
    * https://cloud.google.com/certification/practice-exam/cloud-engineer?hl=ja
* これだけで何とかなります！（たぶん）
    * セキュリティや可用性は AWS の常識と同じ感覚を持ち込めば、大きく外すことはないです
    
# おまけ（個人的に印象に残った AWS との差異をピックアップ）
* ネットワーク
    * VPC はグローバルリソース。CIDRは持たない
        * AWS ではリージョンリソース。CIDR を付与
    * サブネットはリージョンリソース。ゾーンをまたげる
        * AWS では AZリソース
    * ファイアウォールはVPCに割当。ネットワークアドレス／リソースに「タグ」を付与してタグベースで制御
        * AWS では セキュリティグループをリソースに割当、ネットワークアドレス／セキュリティグループを指定して制御
        * AWS の「タグ」に相当するのは GCP では「ラベル」
    * 外向けのHTTP(S)ロードバランサはグローバルに展開可能
        * AWS では、複数リージョンへの負荷分散はDNSベース
* 管理系
    * プロジェクト（AWSでいうAWSアカウントに相当）の組織構造において、上位階層でつけた許可ルールは下位階層の権限と和集合で効く（上位階層で許可すると権限がガバガバになる）
        * AWS では、Organizations の SCP はフィルタとして機能。AWSアカウントの IAM と積集合で効く（SCP で許可していても IAM で許可されていなければ許可されないし、逆もしかり）
* VM
    * スナップショットはグローバルリソース
        * AWSではリージョンリソース
* オブジェクトストレージ
    * GCS は強整合性
        * AWS S3 は結果整合性
    * GCS は複数リージョンへの冗長化がバケットのタイプとして選べる。ユーザはどのリージョンに書き込んだか、どのリージョンから読みだしたか意識しない（できない）
        * AWS では別リージョンに作った別バケットにクロスリージョンレプリケートを設定。リージョンを意識する

以上
FlutterのiOSビルドに失敗する | Building for iOS, but the linked and embedded framework 'App.framework' was built for iOS Simulator. (in target 'Runner' from project 'Runner')

## 発生した問題

FlutterでiOS実機ビルドするときにエラーが出て、進行不能になりました。

```
Building for iOS, but the linked and embedded framework 'App.framework' was built for iOS Simulator. (in target 'Runner' from project 'Runner')
```

## 環境

- macOS Catalina 10.15.1
- Xcode 11.4
- Flutter 1.12.13


## 結論

Flutterのバージョンを `v1.15.3` 以上にすることで解決しました。

## 手順

###バージョン確認とアップデート

Flutterのバージョンは

```
$ flutter --version
```

で確認することができて、

Flutterのアップデートは、

```
$ flutter upgrade
```

でアップデートすることができますが、1点注意が必要です。

### channelの確認

Flutterのバージョンはchannelごとにバージョン管理されており、デフォルトのstableでは、最新版は `v1.12.13+hotfix.8` となっています。
(つまり、Stableのままではこの問題は解決しません)

https://flutter.dev/docs/development/tools/sdk/releases

自分がどのchannelを使っているかは `flutter channel` で分かります。
上のものほど最新の機能が使えますが、その分不具合も多くなります。

```
$ flutter channel
Flutter channels:
  master
  dev
  beta
* stable
```

今回の問題解決のために、beta channelに切り替えました。

```
$ flutter channel beta
```
ちょっと切り替えに時間がかかりますが、切り替え終わるとchannelが切り替わっています。

```
$ flutter channel
Flutter channels:
  master
  dev
* beta
  stable
```

この状態でアップデートすることで、無事に `v1.15.3` 以上にすることができました。

```
$ flutter --version
Flutter 1.15.17 • channel beta • https://github.com/flutter/flutter.git
```

## 参考記事

Xcode 11.4 Support
https://flutter.dev/docs/development/ios-project-migration
MySQL の CASE 文中で書式の違う時刻を比較してはならぬ

# 現象

実行環境
OS: Ubuntu 18.04.1 LTS
MySQL: 5.7.29

```sql
mysql> SELECT CASE WHEN '2020-03-27 00:00:00' < '2020-1-1 0:0:0' THEN 'そうです（大嘘）' ELSE 'んなわけないでしょ……' END AS '2020年1月1日は 2020年3月27日より未来？';
--------------
SELECT CASE WHEN '2020-03-27 00:00:00' < '2020-1-1 0:0:0' THEN 'そうです（大嘘）' ELSE 'んなわけないでしょ……' END AS '2020年1月1日は 2020年3月27日より未来？'
--------------

+----------------------------------------------------+
| 2020年1月1日は 2020年3月27日より未来？             |
+----------------------------------------------------+
| そうです（大嘘）                                   |
+----------------------------------------------------+
1 row in set (0.00 sec)
```

ファッッッッッッ？？??？！!！？？!!！？?！!!?!!？！!？!?？！？!?!!!?？

# 書式を合わせて再実行

上記の SQL をよく見てみると、比較している日付の書式が ```2020-03-27 00:00:00``` と ```2020-1-1 0:0:0``` で書式が違っています。
試しに ```2020-1-1 0:0:0``` の方を MySQL の推奨形式である ```YYYY-mm-dd HH:ii:ss``` 形式(自称 山田ヒステリック形式)に変えて実行してしましょう。

```sql
mysql> SELECT CASE WHEN '2020-03-27 00:00:00' < '2020-01-01 00:00:00' THEN 'そうです（大嘘）' ELSE 'んなわけないでしょ……' END AS '2020年1月1日は 2020年3月27日より未来？';
--------------
SELECT CASE WHEN '2020-03-27 00:00:00' < '2020-01-01 00:00:00' THEN 'そうです（大嘘）' ELSE 'んなわけないでしょ……' END AS '2020年1月1日は 2020年3月27日より未来？'
--------------

+----------------------------------------------------+
| 2020年1月1日は 2020年3月27日より未来？             |
+----------------------------------------------------+
| んなわけないでしょ……                               |
+----------------------------------------------------+
1 row in set (0.00 sec)
```

期待通りの動作になりました。

# 書式を合わせずに UNIX_TIMESTAMP() を挟んで再実行

MySQL には時刻の文字列をタイムスタンプに変換できる ```UNIX_TIMESTAMP``` 関数が存在するので、書式の違う両者日時文字列を変換した上で再実行してみましょう。

```sql
mysql> SELECT CASE WHEN UNIX_TIMESTAMP('2020-03-27 00:00:00') < UNIX_TIMESTAMP('2020-01-01 00:00:00') THEN 'そうです（大嘘）' ELSE 'んなわけないでしょ……' END AS '2020年1月1日は 2020年3月27日より未来？';
--------------
SELECT CASE WHEN UNIX_TIMESTAMP('2020-03-27 00:00:00') < UNIX_TIMESTAMP('2020-01-01 00:00:00') THEN 'そうです（大嘘）' ELSE 'んなわけないでしょ……' END AS '2020年1月1日は 2020年3月27日より未来？'
--------------

+----------------------------------------------------+
| 2020年1月1日は 2020年3月27日より未来？             |
+----------------------------------------------------+
| んなわけないでしょ……                               |
+----------------------------------------------------+
1 row in set (0.00 sec)
```

これも期待通りですね。アプリケーション側での対処が難しい場合はこちらで解決してもいいかもしれません。
[Flutter] iOS 13.4にアプデ後実機デバッグができない場合の対処法

iOS13.3.1では実機デバッグができず辛い思いをしていましたが、
ついにiOS13.4がリリースされたのでいざ挑戦!!

と思いきや以下エラーでビルドが通らない。

```
Building for iOS, but the linked and embedded framework 'App.framework' was built for iOS Simulator.
```

対処法は以下
1. ios/Flutter/App.framework ディレクトリ以下を削除
2. 再ビルド

するとビルドが通るようになりました。
mozilla製オープンソース翻訳プラットフォームpontoonのインストール方法

翻訳自体は古くからあるけれど、翻訳に関するツール、特にオープンソースのツールはそんなに多くありません。
この記事はその中の一つpontoonのインストールする記事です。[^1]
読み方は多分ポンツーンです。
[^1]: 公式的にはローカライゼーションツールとしているけど、翻訳していることには変わらないのでそう呼ぶ
# 用意するものの用意

[これ](https://kitsune.blog/docker-install)とか[これ](https://git-scm.com/book/ja/v2/%E4%BD%BF%E3%81%84%E5%A7%8B%E3%82%81%E3%82%8B-Git%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)を参考にdockerとgitをインストールする。そっちの方が詳しいのであまり説明しません。
docker-composeも必要だけどdockerインストールしたらついてくるはず。

## windowsの場合
chocolateyを使用して以下のコマンドを打てば簡単に準備できる。使わなくてもok。パッケージ管理してくれるのは楽だよってだけ。
```choco install make git cygwin
```

# ソースを持ってくる
公式にはフォークして使ってと書いてあるけど理由は不明。普通に持ってきていいはず。好きなディレクトリで以下のコマンドを打てばいいだけ。
分かりにくいのでosのターミナルは$で、dockerのターミナルは%にしています。
```$ git clone https://github.com/mozilla/pontoon.git
```
windowsの場合このコマンドを打つ前に以下のコマンドで改行コードを書き換えないようにする必要があります。
```$ git config --system --unset core.autocrlf
$ git config --global core.autocrlf false
```

# dockerのターミナルを開く
dockerのターミナルを開いたときにでるipアドレスを確認しておく。
![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230043/5119afb2-e25d-27f7-072e-0ca3a6c04614.jpeg)
今回は192.168.99.101です

# pontoonのビルド

dockerのターミナルからpontoonのルートディレクトリで以下のコマンドを打つ。
```% make build SITE_URL="{確認したipアドレス}"
```
今回は<code>make build SITE_URL="http://192.168.99.101:8000"</code>です
初回はやたら長い

# pontoonを走らせる
以下のコマンドでpontoonを起動する。
```% make run
```


さっきみたipアドレスをブラウザに打ち込み、エラーが出てなければインストール成功です。
![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230043/cea76ce7-db65-2757-2756-119b802f1bcb.jpeg)


# プロジェクトの作成
pontoonのドキュメントはあまり優しくないというか使い方に関しては説明が少ない。のでここにやったことを書いておきます。

1. 管理ユーザーの作成
以下のコマンドで管理ユーザーを作成します。

```% make setup
```
作成する時はこの三つが聞かれますがなぜかユーザー名とメールアドレスを空にしても何も言われません。

* pontoon以外で任意のユーザー名
* メールアドレス（なくても可）
* パスワード

公式にはサーバーを立ち上げて置いてと書いてあったけどあれはpostgresのサーバーのことを言っているはず。

2. ログイン
管理ユーザーを作ったら画面右上のsign inからログインします。

3. 管理コンソールを開く
右上のボタンから「Admin」、「ADD NEW PROJECT」を押すか、または以下のurlからアクセス。
http://192.168.99.101:8000/admin/projects/

4.nameの所に適当な名前を入れてlocaleのとこのavailableからjapaneseを探してクリック。探すのがめんどくさければmove allをクリックしてlocalizableに入れておく

![5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230043/b9cd5424-82dd-f686-7077-11354f1b7bc0.jpeg)


5.data sourceをrepositoryからdatabaseに変えてstringsに改行区切りでテキストを与える
![6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230043/08dd4611-cc30-deac-c094-97f895f7426a.jpeg)


6.オプションを自由につけたら一番下のsave projectをクリック

7.上手くいったらプロジェクトが登録されるはず
![7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230043/03713ee1-6682-100a-e5b2-e537a03771ed.jpeg)

8.後は素敵な翻訳ライフを！

![8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230043/0a72d321-8d40-8a30-d4fe-0d096546c811.jpeg)



翻訳業界はやや閉鎖的というか使っているツールが古いというかtradusがずっと天下を取っている。
翻訳ツールのオープンソース化が進んでほしいです
感染症と隔離政策のシミュレーションプログラム【COVID-19】

# 主に感染症の広がりと隔離政策などの効果シミュレーションプログラムです。

人の移動速度、隔離のブロックの大きさ、隔離条件、タイミングなどを任意に設定可能です。
簡易モデル内でそれぞれがどのように感染拡大に影響されるかをシミュレートできます。

### 使用技術
- TypeScript3.8.3
- HTML5
- canvas

### ライセンス

MIT
（研究機関の方など商用、私用問わずご自由にお使いください）


### 動作デモ

[動作デモ](https://iid.systems/andytools/corona/)

[<img width="1210" alt="スクリーンショット 2020-03-27 2.02.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112409/4d264666-262a-5be4-729c-9b92a4cfa81e.png">](https://iid.systems/andytools/corona/)

### ソースコード

[ソースコード](https://github.com/kotaroyamame/coronaLife)

個人のボランティアとして作成されたこのプログラムはまだ未熟です。エンジニアの方、プルリクエストご支援ください。また、研究機関や研究者の方アドバイス、改善点あればよろしくおねがいいたします。

## 起動方法

node.js (ｖ１２系) をインストールしてください。

ルートディレクトリ内で

```
$ npm i
```

```
$ npm run start
```


## ディレクトリ構造

```
├── src
│   ├── City.ts
│   ├── Human.ts
│   └── main.ts
├── tsconfig.json
├── webpack.config.js
└── package.json
```

## 係数など

### Human.ts

- staightRunCoeff = 97;

直進性
Laravelでresource使用してる時のroute()とかの一覧

# Resource & route()

いつも書き方忘れてハマるので自分用に備忘録

## ルーティング

`web.php`

```web.php
Route::resource('user', 'UserController');
```

`制限する時`

```web.php
Route::resource('user', 'UserController', ['only' => ['index', 'show']]);
```

## Blade

### index（一覧画面）

`リンク`

```php
<a href="{{ route("user.index") }}">一覧画面へのリンク</a>
```

### create（作成画面）

`リンク`

```php
<a href="{{ route("user.create") }}">作成画面へのリンク</a>
```

### store（作成処理）

`form`

```php
<form action="{{ route("user.store") }}" action="post">
    @csrf
```

### show（詳細画面）

`リンク`

```php
<a href="{{ route("user.show", $user_id) }}">詳細画面へのリンク</a>
```

### edit（編集画面）

`リンク`

```php
<a href="{{ route("user.edit", $user_id) }}">詳細画面へのリンク</a>
```

### update（更新処理）

`form`

```php
<form action="{{ route("user.update", $user_id) }}" method="post">
    @csrf
    @method('PUT')
```

### delete（削除処理）

`form`

```php
<form action="{{ route("user.destroy", $user_id) }}" method="post">
    @csrf
    @method('DELETE')
```

## Controller

`UserController`

```php:UserController
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;

class UserController extends Controller
{
    public function index()
    {
        return view('user.index');
    }

    public function create()
    {
        return view('user.create');
    }

    public function store(Request $request)
    {
        User::create($request->all());
    }

    public function show($id)
    {
        return view('user.show', [
            'user_id' => $id
        ]);
    }

    public function edit($id)
    {
        return view('user.edit', [
            'user_id' => $id
        ]);
    }

    public function update(Request $request, $id)
    {
        User::where('id', $id)->update($request->all());
    }

    public function destroy($id)
    {
        User::where('id', $id)->delete();
    }
}
```
Kotlin + RestTemplate で外部APIをCall

## 背景
言語にKotlin, フレームワークにSpring boot(Gradle)を使用したAPIで、外部のAPIをコールする必要があったので。

以下にコードを載せてあるので必要な場合はぜひ。
https://github.com/shuichiro0926/kotlin_api_call

## Jackson import
外部APIをコールした際のレスポンスが**Json(String)**の時、**オブジェクトクラス**にマッピングしてあげる必要があります。
**Json(String) → Object(Model)クラス**

以下を`build.gradle`に記述してください。
(他のビルドツール使ってる方は調べてみてください。)

```
/* jackson */
implementation("com.fasterxml.jackson.module:jackson-module-kotlin:2.9.0")
```

## Rest template
外部APIをCallする処理にはSpring bootの**Rest template**を使用します。
**getForObject**, **postForObject**, **exchange**メソッドがありますが、
先の2つはHttpHeaderを指定できないので今回はexchangeを使用します。

```kotlin
class ApiCall(
  private val restTemplate: RestTemplate
) { 
     // 定数定義
     companion object { 
         const val contentType = "Content-Type" 
         const val contentTypeValue = "application/json" 
     } 

     /** 
      * 外部API リクエスト. 
      */ 
     fun exchange(builder: UriComponentsBuilder, httpMethod: HttpMethod, entity: HttpEntity<Any>): String? { 

         // exchangeメソッドを使用。
         val response: ResponseEntity<String> = restTemplate().exchange( 
                 builder.toUriString(), 
                 httpMethod, 
                 entity, 
                 String::class.java 
         ) 

         return response.body 
     } 
```

RestTemplateは@Beanとして以下のように定義してください。
WebConfigは複数のBeanを管理する設定クラスです。名前は変えてもらって大丈夫です。
@Configurationや@Beanが分からないという方はDIコンテナなど一緒に[こちらの記事](https://qiita.com/kawakawaryuryu/items/c7d71fd56c497e283198)を読んでみると良いかもしれないです。


```kotlin
@Configuration
class WebConfig {

  @Bean
  fun restTemplate(): RestTemplate {
    return RestTemplate()
  }
}
```

## Sample Call method
以下のようなコードで上記のメソッドを呼び出します。
APIをコールした結果(Json)は、最初にプロジェクトに入れたJacksonの**jacksonObjectMapper**でオブジェクトクラスに変換します。

```kotlin
     /**
      * Sample Api Call method 
      */ 
     fun doApiCall(): SampleDto { 
         // URI作成 
         val builder: UriComponentsBuilder = UriComponentsBuilder 
                 .fromHttpUrl("") 
                 .queryParam("", "") 
  
         // HttpHeader 
         val headers: HttpHeaders = HttpHeaders() 
         headers.set(contentType, contentTypeValue) 
         val entity: HttpEntity<Any> = HttpEntity(headers) 
  
         // call 
         val response: String? = exchange(builder, HttpMethod.GET, entity) 
  
         // Json → Object 変換 
         return jacksonObjectMapper().readValue(response, SampleDto::class.java) 
     } 
```

SampleDtoは以下のような感じで。

```kotlin:SampleDto
/**
 * JsonObjectMapper クラス.
 */
class SampleDto (
   @JsonProperty("sampleId")
   val sampleId: Int,
 
   @JsonProperty("sampleName")
   val sampleName: String,
 
   @JsonProperty("createDate")
   val createDate: Date?,
 
   @JsonProperty("updateDate")
   val updateDate: Date?
)
```

## 課題
ケースにもよると思いますが、もう少し汎用的に書けるのかもしれないです。
このような共通処理定義が必要になることは多々あると思います。
Chromeのautocompleteはユーザーのアクションがあってからはじめて値が入力される

タイトルを換言すると、
**ページ表示直後、autocompleteされた値はJavaScriptで取得できない。**
# 何の話をしているのか
たとえば、よくあるログインページ。
![スクリーンショット 2020-03-27 0.57.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31785/ec0f68b5-5cc3-8563-58c5-f674d9186615.png)
メールアドレスとパスワードでログインするフォームだが、
以前ログインしたことがあれば、ブラウザが自動でメールアドレスとパスワードを入力してくれる。これがautocompleteだ。
上の画像は、Google Chromeでログインページを開いた直後に、autocompleteしてくれたときのスクリーンショットだ。

この状態で、**input要素にはすでに値が入力されているようにみえるが、実はまだ入力されていない**。
何を言っているのかわからねーと思うが、おれも何が起きているのかわからなかった…

```html
<label>メールアドレス<input type="email" name="email"></label>
<label>パスワード<input type="password" name="password"></label>
```
```JavaScript
console.log(document.forms[0].email.value);
// -> 空
```
ちなみに、ページのどこか（フォーム要素じゃなくてもどこでもいい）をクリックすれば、
（この瞬間に、フォントサイズが変わるなど目に見える変化が起こる）
きちんと値が入力されるらしく、JavaScriptでも取得できるようになる。

# 何が困るのか
上記の例で言えば、ログインボタンの活性化制御をしている場合だ。
メールアドレスとパスワードの入力値をチェックして問題ない場合のみ、ログインボタンのdisabled属性を除去する機能を実装するなど。
autocompleteされているので、値は入力済み。しかし、JavaScriptでは値が取得できないので未入力、ログインボタンは非活性。

# 何が起こっているのか
日本語では見つけられなかったが、英語で議論されている記事を見つけた。
https://stackoverflow.com/questions/35049555/chrome-autofill-autocomplete-no-value-for-password
どうも、ページ表示直後は、autocompleteされた値は入力されておらず、ただのサジェスト（入力候補）を表示しているだけのようなのだ。そのときのDOMの状態を開発ツールでみると以下のようになっていた。-internal-input-suggested という文字列が見える。
![スクリーンショット 2020-03-27 1.20.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31785/135b0de4-9b06-fd04-3ebb-27155cdb4aa0.png)
ユーザーの目には入力されているっぽく見えるけれど、実際には値はまだ入力されてないのだから、JavaScriptで値を取得しようとしても空なのも納得がいく。
そして、ページ内のどこかをクリックするなど、ブラウザに対しユーザが何らかのアクションを起こすと、そこではじめて値がinputに入力されることになる。そのDOM状態が以下。
![スクリーンショット 2020-03-27 1.27.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31785/5ff0a70e-7b96-62e9-8a39-3f7755c25040.png)
こうなれば、JavaScriptで値を取得できるようになる。

## なぜこのような動作なのか
一見バグのようにも思えるが、ユーザーのアクションがあってはじめてinputに値を入力するというのは、セキュリティ上の理由があるのかもしれない。よう知らんけど。

## どうやって克服するのか
状況は分かったが、どうやってこの問題を乗り越えるのか。
値が入力されているように見えるけど、実は入力されてない。でも、ユーザーのアクションひとつでオートフィルされる状態なのだから、この状態でログインボタンを活性化しておきたい。だが、入力されていることを確認できない。

引用した記事では、回答者はautocompleteされたinput要素の背景色をチェックして、値がオートフィルされているか（されつつあるか）を判断すればいいと言っている。
たしかに、それで値が入力されつつあることを判断できなくはないが、私は好ましくない実装だと思う。autocomplete時に背景色を変えているのは今のブラウザの仕様に過ぎず、今後変わるかもしれないものに依存した判定は回避すべきだろう。

じゃあ、どうすべきなのか。
私の結論としては、何もしない、というのでいいと思う。
ユーザーが何かアクションを起こせば、そのときに値が入力され、意図した状態に納まるのだ。それでいいではないか。
転移学習とfine-tuning（ファインチューニング）の違い、再考

#目的
単なる用語の話です。
「転移学習」と「fine-tuning」の違いについて考えました。

#結論
## その前に
いろんな立場の方がいると思います。

* そもそも、言葉の多少の違いに興味がない人
* 転移学習とfine-tuningで区別ができると思っている人
　　（ｘｘｘは、全結合層以外は**重みを固定して**再学習するなど。）
* その他

## ワタシの理解
「転移学習」は、**別途、学習したものを、別のところで使う**意で、
「fine-tuning」は、特に、なんでしょ？　**「更に学習する」**ぐらいの意か？

以下の文面とか、参考になるでしょうか。

出典：https://www.quora.com/What-is-the-difference-between-transfer-learning-and-fine-tuning

>The terms transfer learning and fine-tuning refer to two concepts that are very similar in many ways, and the two terms are being widely used almost interchangeably. The two terms don’t imply the same goal or motivation, but they still refer to a similar concept. What I mean by “similar concept” is this: Fine-tuning means taking some machine learning model that has already learned something before (i.e. been trained on some data) and then training that model (i.e. training it some more, possibly on different data). That’s all fine-tuning means. Some other answers put arbitrary, incorrect limitations on the term, for example claiming that it’s only called fine-tuning if it refers to the final stages of the training. None of these limitations bear any substance. Now, transfer learning means to apply the knowledge that some machine learning model holds (represented by its learned parameters) to a new (but in some way related) task. This should already look quite familiar to you to the concept of fine-tuning defined above, but in case it doesn’t yet, let’s put more abstractly what you actually do when you perform transfer learning: You take a model that has been trained on something and you use (part or all of) this model as (part or all of) a new model and train it on new data (i.e. train it some more). The last part of the previous sentence is what is meant by “applying” the trained model to a new task. In summary, it would be wrong to say that fine-tuning and transfer learning are the exact same thing, but as explained above they both refer to the concept of taking an existing, trained model and training it further, either as is or as part of a new model.
The main reason why people use the term fine-tuning at all is simply to indicate the training of a machine learning model that is not being trained from scratch, but has already been trained before on some data (not necessarily to convergence). It’s just a convenient way to express that you are not training from scratch. Whether you train on the same or new data, and for the same or a new task, is a different story, the term fine-tuning just in itself contains no implications on any of that.

#今後
特にありません。
Amplify+ReactでCRUDアプリ作成RTA(Any%)Part.1


amplify+reactでアプリ作成RTAやっていきます。
当方基盤エンジニアです。(ただ、ハッカソンでアプリ作成経験ありです。)
はい、よーいスタート

#レギュレーション(又の名を前提)
- AWSに乗っかるのでamplify利用(前も使ったから)
- 面倒なので認証なし(前はCognitoとか実装した)
- GraphQLを使いたい(バックエンド考えるの大変だからね。)
- 必要機能はCRUD(わかりやすさ重視)
- 計測期間はreactの雛形作成からデプロイして初回アクセスまで
- Google先生は多用する。
- 失踪しない

###イメージ図

1.Create画面

<img width="327" alt="スクリーンショット 2020-03-27 1.01.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216765/567f2725-4045-939f-9473-749d17ec5b1c.png">

2.一覧表示

<img width="899" alt="スクリーンショット 2020-03-27 1.01.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216765/602eaa86-77e0-9057-3626-9eeee9d21225.png">


それでは、イクゾー！（デッデッデデデデ　カーン）

#初期設定
1.いつも通りreactの雛形作成
詳細は以下を参考にしてください。丁寧丁寧丁寧に記載されているのでおすすめです。
https://qiita.com/G-awa/items/a5b2cc7017b1eceeb002

```terminal
npx create-react-app <アプリ名>
cd <アプリ名>
```

2.色々インストール
いろんなUI使ってみたいので今回はevergreen-uiを利用してみました。
(大胆なチャート変更)

```terminal
yarn add react-dom evergreen-ui
yarn add aws-amplify aws-amplify-react
```

3.amplify設定

```terminal
amplify init
```

4.GraphQLスキーマ作成

```terminal
amplify add api
amplify push
```

graphqlのスキーマは入力速度を考慮して以下としました。ほぼ変えてないです；；
(Postの方が良かったですね、、、複数形にするとPostssになってしまいますた。)

```graphql:/amplify/backend/api/~~~AppName~~~/schema.graphql
type posts @model {
  id: ID!
  name: String!
  url: String!
  description: String
}
```

#コーディング準備
気持ちよくアプリを作成していくために準備をしていきます。
あちなみに、筆者の環境はVSCodeです。ちなみにVimmerです。(宗教戦争)

0.GitHubのリポジトリ登録しておく
リポジトリ作成は割愛します。適当でもOKです

```console
git remote add origin git@github.com:aion0721/ozadoc.git
```

1.不要ファイル削除
以下ファイルはフヨウラ！
ただ普通に消すとgitの管理もありややこしくなるのでgitコマンドで消します。

```console
git rm logo.svg
git rm App.css
```

2.index.js
変更点とかだけ抜き出します。全文はgithub参照してください。
（え、URLはどこかだって？ヒントをあげているので自分で考えてください。）

```react:index.js
import * as serviceWorker from "./serviceWorker";
import Amplify from "aws-amplify";
import config from "./aws-exports";
Amplify.configure(config);
```

3.app.js
師匠の教えを守りcomponentsフォルダを作りますので、以下の記載にします。
(正直ファイル分ける必要なかったのでここ600fpsぐらいロスですね。)

```react:App.js
import Top from "./components/Top";

function App() {
  return (
    <div>
      <Top />
    </div>
  );
}
```

4.Top.js作成
メインディッシュです。

```console
mkdir ./components
touch ./components/Top.js
```

```react:Top.js
import React from "react";

function Top(){
    return(
        <div>
            Hello, World!!!~素晴らしきこの世界~
        </div>
    );
}

export default Top;
```

5.起動確認
とりあえず起動してみます。

```console
yarn start
```

文字が出たらOK


#次回へ続く
短いですがPart.1としてはここまでにします。
区間ラップは1.5時間です。ほぼ、UI選ぶ時間でした。勉強も兼ねてるから仕方ないね(レ)
(更新部分を残す走者の鑑)
実はあった！Object Cloningコマンド、ウィンドウ名等の一括編集について（Automation Anywhere Enterprise v11）

Automation Anywhere Enterprise v11で、便利だけど実はあまり知られていない機能があるので、
今回はそれを紹介したいと思います。

####これを読んだら解決できる悩み事
+ Object Cloningコマンドの設定で、同じ作業を複数のコマンドに対して行うのが本当に無駄！
+ Window名を一括で変更できないの？

というわけで、一つ目。

#一括編集(Bulk Edit)機能
レコーダーやObject Cloningコマンドを使ってBotを開発しているときに、複数のコマンドに対して同じ修正を加えるような事はありませんか？
実は、一括編集(Bulk Edit)機能というものがあり、こちらを使うととても楽が出来るケースがあります。

###一括編集(Bulk Edit)が使えるコマンド
+Object Cloning
+Insert Keystrokes
+Delay
など

###手順

例えば、こんな感じで複数のObject Cloningコマンドがありますが、一括で変更を加えたい場合は、対象のコマンドを複数選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490870/9330196d-b0fc-713e-ab3f-981db6dc9020.png)


そして、右クリックして、一括編集（Bulk Edit）を押してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490870/55d713ba-02ef-353a-4050-2755981e6dc3.png)


そうするとこのような編集画面が出てきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490870/565f8bd4-2129-7ecb-d045-8d8f9ee90692.png)
「チェックマーク」は選択したコマンド全てに設定されている（検索対象になっている）項目です。
「黒四角」は一部のコマンドで設定されている（検索対象になっている）項目です。
それ以外は検索対象外の項目です。
ここのチェックマークを外したり設定したりすると、すべてのコマンドに適用されます。
同様に、右側のフィールドに値を入れると、一括で適用されます。
Webページの場合は「Path」はとても可変しやすいので、ほぼ全て外してしまう事が多いですが、そういった作業が楽にできます。

そして設定後、「OK」を押すと・・・


以下の通り反映されています。とても便利ですね！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490870/f06fbecf-2f5f-5a37-5d44-40f540fed9f6.png)

#Window名の一括編集
次に、これも結構面倒だなと思う作業ですが、Window名を変更したり、統一したりしたいときですね。
特にWindow名の一部が可変するケースで、ワイルドカード「*」を埋め込んでおきたいときに、いちいち編集していると日が暮れます。
というわけでWindow名も一括編集しちゃいましょう。

###Window名の一括編集が使えるコマンド
+Object Cloning
+Insert Keystrokes
+OCR
+Window Actions
などなど、Window名の指定を行う部分のあるコマンド全般

###手順
これも対象のコマンドをShift+クリック等で複数選択してから右クリック。または、スクリーンショットのように、Workbench右上の「Actions」」というボタンからでも使えます。
下記メニューが出たら、「Change Window Title」を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490870/af65fb57-6066-7081-9d12-f03735c8bf72.png)

そうすると、以下のようなダイアログが出ます。
上側（Select Window Title)で、変更を加えたい、現在選択されているWindow名を選びます。複数選択可能です。
下側（Window Title Replace With）に、置き換える内容を選択または記述します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490870/6e08c1f7-3af5-4601-81f6-1396ff364b1f.png)

例えばこんな感じで記入します。ワイルドカードが含まれるWindow名の指定方法に統一してしまう場合の例ですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490870/5c07a7d4-a2bc-1d22-0791-9bbaa3692f4b.png)

そして、ReplaceやReplace Allボタンを押すと、下記のようにWindow名が一括で書き換えられます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490870/f915c89c-309e-21e2-c722-0c8d895df41e.png)

非常に便利ですね。ぜひ使ってみてください！
ワードプレスのwp-adminにアクセス制限をかけたい。

## イントロダクション
ある日、会社で運営しているWPサイトに紐づけしているメールアドレスに「モデレートしてください」というメールが届いた。
内容を確認すると、海外の人がWPの記事にコメントをしたようでした。そしてきになったのが、その投稿には、**夜にハッスルするためのお薬**を購入することができるウェブサイトを開くリンクが貼ってありました・・・
そこで・・・

## よしっ、セキュリティが心配だから管理画面にはアクセス制限をかけよう。
ということで本題

`htaccess`をいじっていきます。
やることとしては、WPの管理画面などを管理しているファイルやディレクトリにIPアドレスでアクセスを制限をかけます。
※htaaccessは記述を間違えると、ウェブサイト自体の表示がされなくなってしまう場合があるので注意してください。

``` apache
<FilesMatch "wp-login.php|wp-admin">
Order Deny,Allow
Deny from all
Allow from xxx.xxx.xxx.xxx ← アクセスを許可するIPアドレス
</FilesMatch>
```

## ということで
<img width="775" alt="スクリーンショット 2020-03-27 1.12.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246975/1b0ae339-33e9-e47a-cfb5-595fdfa77d06.png">

**やったぜ。**
***
参考にさせていたいた記事・サイト
[WordPress管理画面にIPアドレス制限をかける方法](https://weblabo.oscasierra.net/wordpress-protect-adminpage-htaccess/)
[.htaccess の書き方（アクセス制御編）](https://qiita.com/shotets/items/17bed9029140a6d925d2)

記事に間違い問題等がございましたらご指摘ください。
【GAS】LINE botでメッセージを(定期)配信

```code.js
// LINE Message API アクセストークン
var ACCESS_TOKEN = "自分のアクセストークンをコピペ";

function broadcast() {
  UrlFetchApp.fetch('https://api.line.me/v2/bot/message/broadcast', {
    method: 'post',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + ACCESS_TOKEN,
    },
    payload: JSON.stringify({
      messages: [
        {
            type: 'text',
            text: 'メッセージ１。'
        },
      ]
    }),
  });
}
```

※linebotの設定の仕方はここでは省略します。

このプログラムで実行ボタン押すと、友達登録している人全員に”メッセージ１”が送信されます。
（broadcastという機能を使ってます。）

<h3>コードを更新したとき</h3>

以下のように”ウェブアプリケーションを公開”からNEWを選択してURLを発行します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598453/957b3b8e-d45b-62ca-7a76-38bc5ba731c6.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598453/2f2843f3-1496-2025-c29c-8bc88fb1f033.png)

このURLはLINE developerのURLとは連携されているのでLINE developerへのログインは不要です。

<h3>メッセージを定期配信する方法</h3>

スクリプトエディタのトリガーを利用。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598453/9532af95-b383-1cab-58eb-6dfe71ea10cf.png)


”現在使われているトリガー”から、新規登録でbroadcastを選び、設定。
これで分単位、時間単位、週単位など設定できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598453/655126aa-4536-4eff-6ca3-610bfccfe4f3.png)


簡単便利！
BiT-L論文『Large Scale Learning of General Visual Representations for Transfer』のFig.7の別の意味

# 目的
BiTがすごいらしい。
論文は、以下。

Large Scale Learning of General Visual Representations for Transfer
(https://arxiv.org/pdf/1912.11370.pdf)

**凄いという話は、ここでは、別として、**
この論文の**Fig.7**は、以下。cifar10に関して。


<img width="402" alt="bit_fig7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342207/9fc53794-49b2-96f0-e9fc-0a84c240d6a3.png">


<img width="161" alt="bit_fig7_一部.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342207/2f5742df-020e-93e0-914c-211f1f6b1890.png">


※正解ラベルは、下側。**モデルによる推論が上側。**

# Fig.7の意味するところ

**テストデータが、あきらかに、誤ってますよね。**
Fig.7の説明引用。
> Cases where the model’s predictions (top word) do not match the groundtruth labels (bottom word), and hence are counted as top-1 errors. Left: All of BiT-L’s mistakes on CIFAR-10, colored by whether ﬁve human raters agreed with BiT-L’s prediction on top (green)


⇒　**では、同程度に、学習データも誤ってるハズですよね。**
　　　で、例えば、98%とかの率を出す、
　　　よく学習できる、できたモデルで、
　　　**その影響が無視できるレベルかどうかは、怪しいですね。**

⇒⇒　できれば、**学習データの誤ったものを抽出し、**
　　　　**それを除外した場合と含んだ場合の正解率の差を調べたい。**

#今後
**学習データの誤りをさがす**（だいぶ、先になると思います。）

#まとめ
特にありません。
Android USBシリアル通信方法

#USBシリアル通信
今回はAndroidを使ったUSBシリアル通信の方法を説明したいと思います。
サンプルとしてu-bloxを使用しています。

##FTDIとは
FTDIとは会社の名前でUSBとシリアルインタフェースの変換チップを作っているような会社です。
http://www.ftdichip.com/

Githubにライブラリが公開されていますので、cloneして、プロジェクトに追加してください
https://github.com/mik3y/usb-serial-for-android/tree/master/usbSerialForAndroid


##使い方
※前提としてServiceクラスを使って動かしてください。
初めにUsbManagerクラスのインスタンスを作成します。

```java
mUsbManager = (UsbManager) getSystemService(Context.USB_SERVICE);
```

次にUSBにはベンダーIDとプロダクトIDというものが設定されていますので、ProbeTableクラスに設定します。
参考までにu-bloxの情報は下記に載っています。
https://devicehunt.com/view/type/usb/vendor/1546/

```java
ProbeTable customTable = new ProbeTable();
customTable.addProduct(0x1546, 0x01a7, CdcAcmSerialDriver.class);
mUsbSerialProber = new UsbSerialProber(customTable);
```

続いて設定したIDを元に全てのドライバーを取得し、Portリストを取得します。

```java
mUsbSerialProber.findAllDrivers(mUsbManager);
for (final UsbSerialDriver driver : drivers) {
　　　final List<UsbSerialPort> ports = driver.getPorts();
}
```

上記で取得したポートリストから１つ選んで、接続するポートを選び、各設定を加えます。

```java
UsbDeviceConnection connection = mUsbManager.openDevice(sPort.getDriver().getDevice());
 try {
            sPort.open(connection);
            sPort.setParameters(9600, 8, UsbSerialPort.STOPBITS_1, UsbSerialPort.PARITY_NONE);
        } catch (IOException e) {
            Log.e(TAG, "Error setting up device: " + e.getMessage(), e);
            try {
                sPort.close();
            } catch (IOException e2) {
                // Ignore.
            }
            sPort = null;
            return Service.START_REDELIVER_INTENT;
        }
```

setPrametersではビットレート、データビット、ストップビット、パリティビットが設定可能です。
次にシリアル通信で受け取るためにSerialInputOutputManagerを設定します。

```java
mSerialIoManager = new SerialInputOutputManager(sPort, mListener);
mExecutor.submit(mSerialIoManager);
```

mListernerはこんな感じです

```java
private final SerialInputOutputManager.Listener mListener =
            new SerialInputOutputManager.Listener() {

                @Override
                public void onRunError(Exception e) {
                    Log.d(TAG, "Runner stopped.");
                }

                @Override
                public void onNewData(final byte[] data) {
                    StringBuilder result = new StringBuilder();
                    for (int i = 0; i < data.length - 2; i++) {
                        if (data[i] > ' ' && data[i] < '~') {
                            result.append(new String(new byte[]{data[i]}));
                        } else {
                            result.append(".");
                        }
                    }

                    String datas = new String(data, StandardCharsets.UTF_8);

                    Log.i(TAG, "reading GPS: " + datas );

                }
            };

```

上記の"reading GPS:" のところで実際のString型で取得している情報がlog出力されます。

#まとめ
今回はu-bloxのUSBで試してみましたが、他のUSBシリアル通信も基本的には
ベンダIDとプロダクトIDを変えるだけでできると思いますので、試してみてください。
FFmpegを使って簡単に動画を縮小する変換バッチレシピ晒す

# イントロ
最近、新型コロナ対策でオンライン学習の要望が急増してきていて、ノウハウの共有が求められているようなので自分も提供してみる。

PowerPointやスマホ、ウェブミーティングソフトなどで録画した動画をLMSなどにアップロードすると大きすぎて都合が悪い場合に、FFmpegを使って手元のWindows PCでお手軽に変換することを目的としている。

# 準備
[Windows用にビルドされたFFmpegのバイナリ](https://ffmpeg.zeranoe.com/builds/)を拾って来て、binディレクトリ内に以下のバッチファイルを作成する。
数年前に作ったものだが、FFmpeg 4.2.2でも動作することを確認。

```bat:convert.bat
@echo off
 
%~dp0\ffmpeg.exe -i %1 ^
  -f mp4 -movflags +faststart ^
  -vcodec libx264 -vb 6000k -vf scale=1280:-1 ^
  -c:a aac -ab 128k ^
  -mbtree 1 -fast-pskip 0 -8x8dct 1 ^
  -me_method hex -subq 7 -me_range 16 ^
  -trellis 1 -chromaoffset 4 ^
  -nr 100 -deblock 1:0 ^
  -bf 3 -b_strategy 1 ^
  -bt 1.0 ^
  -qcomp 0.60 -qmin 5 -qmax 69 -qdiff 4  -qblur 0.5 ^
  -coder ac -refs 8 -threads 0 ^
  %1.mp4
pause
```

# 使い方
作成したバッチファイルに適当な動画ファイルをドラッグ&ドロップするとMP4へと勝手に変換が始まる。複数ファイルのバッチエンコードには未対応。
進捗については出力メッセージ中の ``time=00:20:00.00`` のように動画中の時間が出ている部分を確認し、元ファイルの動画の長さと比較する。 

# メモ
- ビットレートを変える場合は ``-vb 6000k`` の部分を適当に調整。
- ``-vf scale=1200:-1`` が縦横比を変えず横幅1280pxの動画になるようサイズ変更しているので必要に応じて調整。
- ``-movflags +faststart`` がダウンロード開始後すぐに再生できるように細工している部分。
GitHubでプルリク、GitLabでマージリクエストを送る前のチェックリスト！

# マージリクエスト前にチェックするとよい内容

あくまで目安です。
全部をガチガチに確認することまではしなくて良いと思いますが
確認の抜け漏れがないか、参考にする程度に使ってください。



指差し確認、ヨシ！

# ブランチ関連
- [ ] マージ先のブランチが間違っていないか?
- [ ] 自分のブランチ名がわかりやすいか?
  - (無理に修正しなくて良いが、次回以降気をつける)
- [ ] マージ先、リモートのmasterブランチの変更が適宜取り込まれているか

# 内容確認
## マージ先と差分を取り確認
- [ ] 作業時の一時的なものがのこってないか
  - [ ] 個人的なメモの為の改行、コメントの消し忘れがないか
  - [ ] デバッグのためにしたコメントアウトが残っていないか
  - [ ] 不要なimport文がないか
  - [ ] 新しく一時的に作ったが使用していない変数、メソッド、処理など
  - [ ] 不要ファイル(個人用IDEの設定ファイル等)が含まれていないか

- [ ] 自分の実装などの確認(ソースコード)
  - [ ] エディタでのチェックが働かないようなファイル(XML, md, 設定ファイル等)に誤字がないか
  - [ ] あやまって消してしまっている記述がないか
  - [ ] 分かりづらい処理がないか。わかりづらい箇所にはコメントが書いてあるか
  - [ ] テストが書かれているか (可能であれば)
  - [ ] 命名規則、記法(camelCase, SNAKE_CASE, Pascal...)が守られているか
  - [ ] フィールドを無意味に`public`にしていないか
  - [ ] コミットコメントが適切だったか 
    - (無理に修正しなくて良いが、次回以降気をつける)

# テストが通るか確認
## 単体テスト
- [ ] 実装、変更箇所がEclipseからの単体テストで問題ないか

## ビルドの確認
- [ ] ビルドツール(gradle)からのテスト・ビルドが通るか
  - [ ] 通らない場合は、問題のある箇所を確認。環境依存などの問題がある。

## 動作の確認
- [ ] ローカル環境で、実際に動作確認をしたか。
  - [ ] どのように確認したか


# マージリクエストのコメント
- [ ] チケットの番号、内容がわかるか
- [ ] チケットに対して対応できているか(要求事項に過不足ないか)
- [ ] 変更箇所がわかりやすいか。
- [ ] 変更の意図がわかるか。
- [ ] ローカルでテストできているか、動作確認しているか
バンドサークル管理webアプリ製作日記 - Introduction


# Introduction
突然だが、
私が以前作成した[バンドサークル管理アプリ](https://qiita.com/RINYU_DRVO/items/6607a0aa7ca3294f8e47)の使い勝手があまりにも悪く、
実用性が皆無だった。

もちろんそんなアプリケーションが実際に使われる事は無く、
ただの**転職活動用のポートフォリオ**として消費される木偶の坊となる結末。

そこで次は、実用に耐えうる...
いや、ユーザやサークル管理者に寄り添ったアプリケーションを作り、
今度こそお世話になった団体に恩返しをしつつ、
あわよくば全国展開？マネタイズ？と悪知恵を膨らます筆者なのであった...

# 前回の反省

なぜ前回作成したアプリケーションは失敗してしまったのか。
考えられる要因。

### ユースケースを考えられていなかった

このアプリケーションは**どんな場面**で利用されるんだろうか？
そこを考えずに作った結果、本当に必要とされているシステムの流れには
ならなかった。当然。

### 開発者目線で作った

各情報を保存するデータベースはこうで...
そこに情報を入力するフォームはこうで...
出力する画面はこうで...
という、**開発者目線**で作ってしまった結果、
ユーザは自らのユーザIDを覚えていけないといけなかったり、
見にくくて操作しにくいライブ一覧など、
非常に余計な手間の多いシステムになってしまった。

これではユーザは使ってくれないし、
**サークルの運営を円滑にする**という目的を達成できない。

### 反省まとめ

目的に対してどういう機能があって、
その機能をユーザがどのように使う事で叶えられるのか、
常に意識しながら開発していかなければならない。

# 今回はどういう流れで作るか

下記の手順でやってみることにした。

```
1. 問題提起          - 何が問題？何が悪かった？
2. ユースケース考察    - どこでどうやって使う？
3. 要件定義          - その為にどんな機能がいる？
4. 設計             - 利用シーンを考えてどんな画面が必要？
5. 作成             - UIを考慮した画面・動き・データ
6. リリース           - なるべく小さい間隔・小さい規模で
7. ユーザ評価        - 見やすい？分かりやすい？使いやすい？
```

この一連の流れを**短いサイクル**で回す。
`1→7`まで行ったら`1`に戻り、ユーザ評価に対する問題提起をする。
レビュー内容は**何が原因で何が悪かったから**その感想が生まれたのか？
そしてまた`7`まで進める。これを繰り返す。

常に改善しながら**小さいリリース**を繰り返していく。

正直手探りだが、失敗を１回踏んでいるので、
改善しながら進めていく事にする。
その為、手順も変更になる可能性は十分にあるだろう。


# Next

今回考えた流れを踏まえ、１サイクル目は
**サークル管理者にアプリケーションを使用する想像をしてもらって
問題点や必要機能を炙り出す**
ことをテーマとし、プロトタイプ的な感じでリリースまで進める。

次の記事では1サイクル目の開発の問題提起を行う。

[バンドサークル管理webアプリ製作日記 - 問題提起](https://qiita.com/RINYU_DRVO/items/d73c8c9c8732fbbd1a3f)

# バックナンバー

[バンドサークル管理webアプリ製作日記 - 問題提起](https://qiita.com/RINYU_DRVO/items/d73c8c9c8732fbbd1a3f)
[バンドサークル管理webアプリ製作日記 - 競合比較](https://qiita.com/RINYU_DRVO/items/849cf034095977b5f57e)
[バンドサークル管理webアプリ製作日記 - ユースケース](https://qiita.com/RINYU_DRVO/items/52d4e9458b49ffd959f5)
[バンドサークル管理webアプリ製作日記 - 要件定義](https://qiita.com/RINYU_DRVO/items/66ec54bee76a68cc0e09)
CSSのみで要素をfade In/Outをする方法【:target】

#実装

```html:HTML
  <a href="#fade">fade in</a>
  <a href="#">fade Out</a>
  <article class="fade" id="fade">
    Hello, world.
  </article>
```

```scss:SCSS
.fade {
  display: none;
  &:target {
    display: block;
  }  
}
```
簡単。

##擬似クラス:target
フラグメント(#で記述したやつ)付きのURLとidを紐づけると、:targetでプロパティをいじることができる。すごい。
チーム開発

うまくいった例
.user-pays__card-list {
        display: flex;
          img {
          height: 20px;
          width: auto;
          margin: 5px;
        }
      }

うまくできなかった例　　image画像は何も反応しない
.image {
    height: 20px;
    width: auto;
    margin: 5px;
}


今回習ったこと
height: 20px;
width: auto;
で高さだけ同じで横ほぼ均一に並べることができる
サーバをレンタルする

#severをたてる
javaの実行環境が用意できるという条件で
VPSレンタルサーバの候補は
- さくら
- GMO
- conoha
とりあえず安いということでconohaを選択.
OSはCentOSかUbuntuで迷ったがCentOSを採用
macからsloginでグローバルIPで接続確認完了

初期設定
- OS確認
$uname -a
Linux 118-27-6-171 4.18.0-147.5.1.el8_1.x86_64 #1 SMP Wed Feb 5 02:00:39 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux

- installパッケージ確認
$rpm -qa

- yumアップデート
$yum update
$yum check-update

- 作業user追加
$useradd user1
$passwd user1
$cat /etc/passwd

- user切り替え
$su user1

- サービス一覧
$systemctl list-unit-files --type=service
acpid,atd,auditd,autovt@,cloud-***,crond,FirewallD1,nm-dispatcher,relosbe1,timedate1,firewalld,getty@,import-state,irqbalance,kdump,libstoragemgmt,loadmodule,lvm2-monitor,mdmonitor,microcode,NetworkManager*,nis-domainname,qumu-guest-agent,rngd,rsyslog,selinux-autorelabel-mark,smartd,sshd,sssd,syslog,systemd-resolved,timedatex,tuned,vdoがenable
不要なものを無効にと思いつつ調べるのが面倒なのでそのままで。。。
とりあえずsshd,rsyslog,firewalldが機能していることは確認
したので

- sshの接続logを確認
$cat /var/log/secure

- FWに追加されているサービスの確認
$firewall-cmd --list-all
＞cockpit dhcpv6-client ssh

今後ftp,http,tomcat,javaあたりの設定を行う
本日の学習内容part4

##参考記事
yaaabu51さんの[【PDO】PHPでデータベースに接続する方法【INSERT編】](https://qiita.com/yaaabu51/items/11d09c0219907e63a484)


##調べたメソッド
prepareメソッド⇒prepareの後の括弧内にあるSQL文を実行する準備をする。
executeメソッド⇒SQL文を実行する。
fetchメソッド⇒該当データを1行だけ取得する。

```
   $messages = $db->prepare('SELECT * FROM posts WHERE id=?');
   $messages->execute(array($id));
   $message = $messages->fetch();
```
間違えていましたら遠慮なく仰って下さい。m(__)m