OmniAICreator/Qiita-1.07M huggingface dataset:
Android Studio4.0のプロキシ認証について 


# 概要
学校のプロキシ環境下のPCでAndroidStudioで自作のFlutterアプリをビルドしようとしたところいかのようなエラーが発生しました。

```Console
unable to tunnel through proxy proxy returns http/1.0 407 proxy authentication required android studio
.
.
.(省略)
```

# このエラーが出るまで
完全にプロキシのことを考慮していなかったので、調べたとおりにAndroid Studioのプロキシ設定を追加。

## Android Studioの設定を変更
Android Studioの"File > Setting > Appearance & Behavior > System Settings > HTTP Proxy"を選択
![proxy_GUI.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453616/2752d06a-cd5b-fea6-7b7c-99be912864b4.png)

↑のようにプロキシ環境を入力。

## gradle.propertiesの変更

```Console
C:\Users\(ユーザ名)\.gradle
```
↑のパスにあるgradle.propertiesに以下を追加。
gradle.propertiesが存在しない場合は自身で作ってください。
(私も最初は存在しませんでしたが、いつの間にか作られていた。なんで笑)
また、隠しファイルも見れるようにしといてください。

```properties

systemProp.http.proxyHost=myproxy
systemProp.http.proxyPort=8080
systemProp.http.proxyUser=username
systemProp.http.proxyPassword=pass
systemProp.http.nonProxyHosts=設定しているアドレス（なくてもいいかも）
systemProp.https.proxyHost=myproxy
systemProp.https.proxyPort=8080
systemProp.https.proxyUser=username
systemProp.https.proxyPassword=pass
systemProp.https.nonProxyHosts=設定しているアドレス（なくてもいいかも）

```

## これでビルドできると思ったが、、、
ここまで調べるのにも結構時間がかかって（理解力がない）疲れていたのに上述のビルドエラーが出てきて萎えまくったが、そのまま対応策がないかを調べてみるとさらにgradle.propertiesに以下を追加すると、うまくいきました。

```properties
# これかいたら通った
systemProp.jdk.http.auth.tunneling.disabledSchemes=""
```

原因はよくわかっていませんが、以下のURLを参考にしました。
>認証プロキシ環境下でのgradleの使用
<https://ja.stackoverflow.com/questions/47749/%E8%AA%8D%E8%A8%BC%E3%83%97%E3%83%AD%E3%82%AD%E3%82%B7%E7%92%B0%E5%A2%83%E4%B8%8B%E3%81%A7%E3%81%AEgradle%E3%81%AE%E4%BD%BF%E7%94%A8m>

#終わりに
Qiita初投稿なので、拙い部分があると思いますが参考にしていただけたら幸いです。自分のやったことのアウトプットや書き残しにもなるのでこれからも投稿を続けていきたいと思います。
【C++】参照の挙動

# 参照の挙動について
```sample.cpp
int sum(int a, int b)
{
     return a+b;
}

int& temp()
{
     return sum(0, 1);
}

int& work()
{
     return temp();
}
```

こういう参照を返すコードがあったとしましょう。

```sample.cpp
int main()
{
     std::cout << " sum : " << sum(0, 1) << std::endl;
     std::cout << "temp : " << temp() << std::endl;
     std::cout << "work : " << work() << std::endl;

     return 0;
}
```

このコードは、コンパイルは通ります。
しかし、実行時におかしな挙動をします。

１つ目のsumは、ただ値を返しているだけなので、何も問題はありません。

２つ目のtempも、sumで足し算した値を参照で返しているだけです。
３つ目のworkも、sumで足し算して返された値の参照を参照して（？）返しているだけです。

しかし、Ｃ＋＋の参照において、classやstructのメンバなど寿命が長いモノは問題ないのですが、どこかに作られているわけでもないローカル変数（関数の戻り値も含む）を参照で返すのは、非常に危険です。

なぜかというと、ローカル変数がいつ消えてしまうのか予測しづらいからだと思います。

一度だけローカル変数を参照するのは問題なく動きました。（環境やＣ＋＋のバージョン、コンパイラによって異なるかもしれません）

上記コードのように奥深くから参照を繰り返すと、２～３回参照したあたりで原初のローカル変数がお亡くなりになってしまうのか、初期化していないローカル変数を出力した時などに似ている不定値が返ってきてしまいました。

```
1
1
// 何らかの不定値
```
java 何度も検索してしまうもの【java初心者】

####随時追加予定．

###1, length の取り方

###### int 配列

``` java
int [] intArray = {1,2,3,4,5};
System.out.println(intArray.length);
```

###### 出力: 5

###### String 文字列

``` java
String text = "text";
System.out.println(text.length());
```
###### 出力: 4

###### StringBuilder型 文字列

``` java
StringBuilder sb = new StringBuilder();
sb.append("text");
System.out.println(sb.length());
```
###### 出力: 4

###2, 型変換

###### String >> int 変換
```java
String StringA = "0";
int intA = Integer.parseInt(StringA);
```
###### int >> String 変換
```java
int intB = 0;
String stringB = String.valueOf(intB);
```
###### int >> Integer 変換
```java
int intC = 0;
Integer integerC = intC;        
```

###### Integer >> int 変換
```java
Integer integerD = 0;
int intD = integerD.intValue();
```

###### char >> String 変換
```java
String strText = String.valueOf('a');
```

###3, 配列ソート (各要素がIntegerのとき)

######配列ソート（昇順）

```java
Arrays.sort(array);
```

######配列ソート（降順）

```java
Arrays.sort(array, Collections.reverseOrder());
```
もしくは，
```java
Arrays.sort(array, Collections.reverseOrder());
```

######文字列ソート

```java
String strtext = "cbda";
System.out.println(strtext);
char[] charText = strtext.toCharArray();
Arrays.sort(charText);
String sortedText = new String(charText);
System.out.println(sortedText);
```

######出力
```
cbda
abcd
```

### 初期化
#####リスト初期化

```java
List<Integer> list1 = Arrays.asList(1,2);
```
AndroidStudio実機デバッグ中にLogcatが出力されないときの対処法

# 現象

* AndroidStudioに実機をUSB接続して、USBデバッグを有効化している状態。
* `Log.i(TAG, 'hoge')` などでログが吐かれない。エミュレータだと吐かれる。


# やったこと

* USBケーブルの抜き差し
* USBデバッグモードが有効化されていることの再確認
* 「開発者向けオプション」の「デバッグアプリを選択」で、開発中のアプリを再選択
* USBデバッグ（USB接続時はデバッグモードにする）のスイッチを、いったんオフにして、再度オン。
* 「ログバッファのサイズ」を16MBに設定
* GPUデバッグレイヤの有効化

以上で表示されるようになった。
理論物理系学生の0から始める機械学習#1

目次
- 1.現状
- 2.プログラミング言語について
- 3.これから

#1.現状
このQiitaは将来ITエンジニアを目指す理系学生が
・ 0から始めても理解できること
・ 自分の勉強のアウトプットの見える化
のために始めた備忘録です。
（大した知識もないひよっこです。訂正や助言をいただけると嬉しい、、、お手柔らかに。）

####バックグラウンド
機械工学系→理論物理系→ITエンジニア(将来)
という経歴を持つ理系学生

####プログラミング習熟度(2020/6時点)
C言語→基本の情報処理ができる、開発経験はない
python→基本の情報処理ができる、開発経験はない

####開発環境
MacOS HighSierra -10.13.6
python -2.7.16（Mac初期装備）
python -3.8.0

####最低限知識
”０から”という点は意識しているけれど、最低限

- OSの知識
- CUIの操作、コマンド
- プログラミング言語の基本動作

についての説明は省かざるを得ないかも。
ただ高校数学の基礎知識があれば「python」ではなく「プログラミング」の超入門書などで学べると思う。
（理系学生であれば講義で学ぶプログラミングの基礎程度の知識で十分かと思う。）


#2.プログラミング言語について
####代表的なプログラミング言語
システム・アプリケーション系：Java、C、Ruby、PHP
Webデザイン系：JavaScript、PHP、HTML
人工知能：Python
注*あくまで簡易的な分類。それぞれ応用できる領域がある。

####各言語の特徴（調べただけ）
Java：　クラスベースのオブジェクト指向（オブジェクト：データとコードの複合体）の汎用プログラミング言語。C言語に似ている。Webアプリケーションで使用されている最も人気のあるプログラミング言語の一つ。

C：　汎用プログラミング言語。動作環境の制約が厳しい。C++、Javaなどの派生源。システム系、アプリケーション系で使われる。

Javascript： プロトタイプベースのオブジェクト指向スクリプト言語。Webサイト、Wenアプリのデザインなどに利用される。多くのWebブラウザで使われる。
注*Javaとは異なる言語。

Ruby： 日本人のまつもとゆきひろさんが開発したオブジェクト指向スクリプト言語。Perlに続く言語、Pythonが競合言語。Webアプリケーション、ホームページ作成などで使用される。わかりやすいコード、日本人の開発なので日本語の情報が入手しやすい。

PHP： プログラミング言語と処理系としての特徴を持つ。言語としてはC、Javaに近い。サーバーサイドで動的なWebページ作成ができる。アプリでも使えるが、Webサイトに多く使われる。

HTML： Webページを作るためのマークアップ言語。WebページのほとんどがHTMLで作られている。

Python： コードがシンプルで学習しやすい汎用。ライブラリが豊富で様々な領域への応用が容易（他人が作ったプログラムの塊を利用できる）、対応している動作環境（ハード、OS）が豊富。人工知能・機械学習などで利用される。


####どんな言語を学ぶか
**世の中の需要**
- アプリ系：Ruby、Java
- web系：JavaScript、PHP
- 人工知能系：Python

が主流か？

**シンプルで習熟が容易**
-スクリプト言語：　ソースコートをそのまま実行できるため結果をすぐ視覚でき学習が容易。ex)Python、JavaScript、Ruby、PHP

-コンパイラ言語：　実行するためにソースコードをコンパイルする必要がある。ex)C、Java

**応用が効く**
・ Python→ ライブラリ（ある目的のために機能をまとめたパッケージのこと）が豊富で応用に幅が効く。ex)アプリ、人工知能、統計・データ分析、IoT開発 
注*複数の関数をまとめたもの→モジュール
モジュールをまとめたもの→パッケージ
パッケージをまとめたもの→ライブラリ
ライブラリ＝何かができる大量のプログラムの集合体。

・ JavaScript→ Web系フロントエンジニア必修。ブラウザ上でユーザーの動作に関わる部分に使われる。

・ Ruby→ アプリケーションの開発に使われる。ライブラリRuby on Railsがよく使われている。日本人が開発したのでオブジェクト指向と呼ばれるプログラミング言語のコンセプトを日本語でしっかりと学ぶことができる。


#3.これから
**学習の目的**
1.色々な言語に触れ、どんなことが実現できるのかを知る。
（どんな領域のエンジニアになるかを決めるため）
×目的ありきの職業選択　○スキルありきの職業選択

2.研究活動への応用
人工知能技術の物理学への応用


**エンジニアの種類と使われる言語？（メモ書き程度に）**
- AI(人工知能)エンジニア：Python
- アプリケーションエンジニア(業務系)：Java、C
- アプリケーションエンジニア(webアプリ系)：Java、C、Ruby、PHP
- アプリケーションエンジニア(スマホ系)：Swift(iPhone)、Java(Android)
- フロントエンドエンジニア：JavaScript、HTML
- サーバーサイドエンジニア：Ruby、PHP、Python、Java


**学習する予定の言語**
- Python
- Ruby
- JavaScript
- Java



しばらくは研究のためのPythonの学習と機械学習の実行。
その後独学でRuby、Javaを勉強し、開発経験を積みたい、、、。


####参考文献

- [スラスラわかるPython](https://www.amazon.co.jp/スラスラわかるPython-岩崎-圭/dp/4798151092/ref=sr_1_1?__mk_ja_JP=カタカナ&dchild=1&keywords=すらすらpython&qid=1591248379&sr=8-1)
　プログラミング初心者本よりも更に優しい、言わば超初心者にはオススメの一冊。pythonを通してプログラミングを学ぶことができる。他の言語を触ったことがある人にはあまりオススメできないかも？
- wikipedia(各言語について)
ActiveReportsでSQLiteの日付型を使う


DateTime型が使いたい。

ActiveReports上で日付の書式設定を使いたい。

DateTime型はSQLiteでは使えないと思っていた。

でもSQLiteのサンプルデータベースの中にDateTimeを見つけた。

<img width="903" alt="sqlitedatetime00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24550/887fec0e-8f58-a8b6-8ddf-373581d7903b.png">

ActiveReportsの日付の書式設定がSQLiteのDataTime Columnに使えるのでは？

SQLiteでDataTime型のカラムのあるテーブルを作ってみた。

そして試した。

動いた！！

![2020-06-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24550/14d18fec-a0aa-e34b-976d-1b476d723f2b.png)

下記が実際に動かしてみたサンプルです。

GitHubに置いておきます。

[reports4sqlite](https://github.com/arachan/reports4sqlite)

.NetがSQLiteのDateTimeと名乗っているカラムを本当のDateTime型に変換しているのかもしれない。
webpack3からwebpack4へバージョンアップ

保守できていなかったwebpackのバージョンをあげた際の記録です。
メモレベルで恐縮ですが、よかったら参考にしてください。

## モチベーション

* 最新のTypeScriptを導入したい
* ビルドを速くしたい

## 移行手順
基本的にはこちらのマイグレーションガイド通りです。
https://webpack.js.org/migrate/4/

* package.jsonの修正
* modeの追加
* pluginの設定見直し
* loaderのバージョンアップ

## 移行手順詳細
### package.jsonの修正
https://github.com/webpack/webpack/releases
こちらを参考にwebpackの箇所のバージョンを修正しました。


```package.json
"webpack": "^4.42.0"
```

```bash
npm install
```

yarnの方は`yarn install`してください。

### modeの追加
`production`と`development`の二つがありwebpack.config.jsに記載しないと警告がでます。
本番用と開発用ですね。
圧縮されるかどうかなどの違いがあります。

```webpack.config.js
module.exports = {
//...
  mode: 'production',
//...
}
```

### pluginの設定見直し
3rd partyのプラグインのバージョンアップや一部機能がデフォルトになったため(modeの記述でOKになったため)見直しをしました。

#### before

```webpack.config.js
module.exports = {
//...
  plugins: [
    new webpack.optimize.UglifyJsPlugin({})
  ]
//...
}
```

#### after
```webpack.config.js
module.exports = {
//...
  mode: 'production'
//...
}
```

### loaderのバージョンアップ

```
Cannot read property 'babel' of undefined
```

ビルドすると、上記のログが出たので`babel-loader`をバージョンアップしました。
最新版にしたかったのですが、`babel`のバージョンアップとは切り分けたかったので

```package.json
"babel-loader": "^7.1.5"
```

で対応しました。
`babel-loader`の8系移行を使うには
https://koukitips.net/if-you-raise-the-babel-loader-to-v8-the-solution-is-when-you-get-an-error/
この辺りを参考にする必要がありそうです。

## 参考
https://webpack.js.org/migrate/4/
https://thebrainfiles.wearebrain.com/moving-from-webpack-3-to-webpack-4-f8cdacd290f9
https://auth0.com/blog/webpack-4-release-what-is-new/#L7--Faster-Build-Times
Google App Script(GAS)でメールを抽出してSpreadSheetに書き出す

#やりたいこと
Gmailで『ML/alert』というラベルが付いている昨日のメールを抽出し、FromとToで除外したいものと重複を除いて、SpreadSheetにFrom、To、Subjectの一覧を書き出したい。

#準備
『除外』という名前のシートを作り、除外したいFromとToの対を書く。
(Toが空欄の場合はToに関わらず除外する)
![スクリーンショット 2020-06-03 16.01.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75498/5844b5b5-b439-6993-fac0-c3ee57b5556c.png)

#コード
```js
function getMail() {
  var label = 'ml-alert';
  var fromDate = getDate(1);
  var toDate = getDate(0);
  var query = 'label:' + label + ' after:' + (fromDate.getTime() / 1000) + 'before:' + (toDate.getTime() / 1000);
  
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var exceptionSheet = ss.getSheetByName('除外');
  var exceptions = exceptionSheet.getRange(1, 1, exceptionSheet.getLastRow(), 2).getValues();
  
  var threads = GmailApp.search(query);
  var data = [];
  threads.forEach(function(thread) {
    var messages = thread.getMessages();
    messages.forEach(function(message) {
      var date = message.getDate();
      if (date < fromDate || toDate < date) {
        // 対象の日付じゃないのでスルー
        return;
      }
      var from = message.getFrom().replace(/^.*<(.*?)>.*$/, '$1');
      var toArr = message.getTo().split(/,\s*/);
      // 除外シートから除外対象を探す
      var fromFinder = exceptionSheet.createTextFinder(from);
      block_check: {
        while (range = fromFinder.findNext()) {
          if (range.getColumn() != 1) {
            // 1列目じゃないので次へ
            continue;
          }
          var foundRow = exceptions[range.getRow() - 1];
          if (foundRow[1] == '') {
            // Toが指定されていないのでそのまま除外
            break block_check;
          }
          for (var i = 0; i < toArr.length; i++) {
            if (toArr[i] === foundRow[1]) {
              // Toが一致するので除外
              break block_check;
            }
          }
        }
        // 除外対象ではないのでdata配列に保存
        var subject = message.getSubject();
        data.push([from, toArr.join(), subject]);
      }
    });
  });
  
  if (data.length) {
    // 対象のメールがあったら日付のシートに書き出す
    var ymd = fromDate.getFullYear() + '/' + (fromDate.getMonth() + 1) + '/' + fromDate.getDate();
    var sheet = ss.getSheetByName(ymd);
    if (sheet) {
      // すでにシートがある場合は内容を削除
      sheet.clearContents();
    } else {
      // シートを新規作成
      sheet = ss.insertSheet(ymd, 0);
      sheet.setColumnWidths(1, 2, 190).setColumnWidth(3, 500);
      sheet.setFrozenRows(1);
    }
    sheet.getRange("A1:C1").setValues([['From', 'To', 'Subject']]);
    var range = sheet.getRange(2, 1, data.length, 3);
    range.setValues(data);
    range.removeDuplicates();
    range.sort([1, 2, 3]);
  }
}

/* days日前の午前0時のDateオブジェクトを返す */
function getDate(days) {
  var date = new Date();
  date.setDate(date.getDate() - days);
  date.setHours(0, 0, 0, 0);
  return date;
}
```

#ポイント
* `GmailApp.search(query)`のqueryで、ネストになっているラベルは『-』で繋げる
* `GmailApp.search(query)`はスレッドを検索するので、日付を指定しても対象外のものが含まれるため、メッセージ単位で日付のチェックをする
* 重複は、すべてシートに書き出した後に`removeDuplicates()`で取り除く

`createTextFinder()`を使いましたが、`exceptions`配列を順番に見ていくことでも処理できます。(し、そっちの方が簡単な気がしますが、せっかくなので使用例ということで…)
App Store Connect Q & (A)

App Store Connect に関する気になることを記載する
何か分かれば、Answerとして追記する

# アップロード関係

## アップロードしたけどTestFlightに表示されない

Q.
アクティビティにはビルドとして表示されるが、TestFlightには表示されない
他のビルドバージョンは全て表示されているのにそのバージョンだけ抜けている

## アップロードしたアプリはダウンロードできるのか

A.
多分できない

# App Analysis

## アップデート数を確認したいのだが

A.
App Store Connectのウェブサイトでは項目としてなかったが、iOSアプリの方からは確認できた

## アップデート数の定義は？

Q.
調べても書いていない

## アップデート日じゃなくて公開日はどこに書いてある？

A.
多分、アクティビティ→App Storeバージョン→配信準備完了の日付
尚、公開予約した場合は「デベロッパによるリリース待ち」となっているはず

## 機種ごとに各種データの集計をしたい

A.
機種を選ぶ項目がなかったため、機種ごとにはできない。
Apple TV, iPad, iPhone, iPodのいずれかの選択はできた。
また、iOSバーじょにゃあぷり

# TestFlight関係

## 上限を超えたので登録できなくなった

A. 一つのアプリに対してApp Store Connectユーザは25ユーザまで登録できる。
それを超えると App Store Connect に、「このAppに追加できるApp Store Connectユーザ数の上限に達しました。」と表示される。ユーザを消さないと新たに登録はできない。

# Reference

[ASO(アプリストア最適化)用語集 【随時更新中】](https://note.com/hiroto_inada/n/n467e014e44ea)
Dockerfileで 環境構築を自動化

#はじめに

本記事は動画( https://youtu.be/RYXtItghA14 )で説明に使用している
スライドを記事化したものです。動画と合わせて御覧ください。
[![RYXtItghA14](http://img.youtube.com/vi/RYXtItghA14/0.jpg)](http://www.youtube.com/watch?v=RYXtItghA14)

※記事化する際に補足説明を加筆しており、内容は動画のスライドと異なります。
※本記事の内容は2020年3月時点の内容となります。OSやミドルウェア、Dockerのバージョンが異なることで記載通りの内容で完了しない場合があります。

---

#Dockerfileで出来る事
 1. イメージのダウンロード
 2. コンテナイメージ内でのシェルコマンド実行
 3. ローカルファイルをコンテナイメージ内への転送
 4. 実行ユーザ切り替え

---

#Dockerfileで出来ない事
1. デーモン(サービス)の起動
2. Webアプリ環境構築でのDBへの初期DB構築などは出来ない

---

#Dokcerコマンド一覧
| コマンド |概要|
|:-----|--------------|
| FROM |イメージを指定 |
LABEL|メタデータの設定|
|ENV|環境変数を設定|
|RUN|コンテナ内でコマンドを実行|
|COPY|ファイル、ディレクトリをローカル→コンテナ、コンテナ→ローカルにコピーする|
|ADD|ファイル、ディレクトリをローカル→コンテナに追加。.tarファイルをアンパックできる|
|CMD|RUNのパラメータを設定。RUN実行後にクリアされる|
|WORKDIR|作業ディレクトリを指定|
|ARG|docker buildコマンド時の引数定義|
|ENTRYPOINT|コンテナにコマンドと引数を提供|
|SHELL|コンテナ内の実行シェルの指定と設定|
|USER|ユーザの切替|

---

#実行コマンド

```
docker build -t [イメージタグ] .
```

---
#動画で使ったDockerfile

```Dockerfile
# centos7のイメージを利用する
FROM centos:7
LABEL maintainer=Takemi

SHELL ["/bin/bash", "-o", "pipefail", "-c"]"

# 累積アップデートの実行
RUN yum -y upgrade

#rootパスワード設定
RUN echo "root:docker123" | chpasswd;

#takemiユーザが存在していない場合ユーザ追加する
RUN echo 'make user takemi'
RUN adduser -m takemi;echo "takemi:takemi123" | chpasswd;

#sshのインストール
RUN yum install -y openssh-server
RUN systemctl enable sshd

#Apacheのインストール
RUN yum install -y httpd
RUN systemctl enable httpd

#MariaDBのインストール
RUN curl -sS https://downloads.mariadb.com/MariaDB/mariadb_repo_setup | bash
RUN yum install -y MariaDB-server
RUN systemctl enable mariadb

RUN yum -y install http://rpms.famillecollet.com/enterprise/remi-release-7.rpm
RUN	yum -y install --enablerepo=remi,remi-php73 php php-mbstring php-xml php-xmlrpc php-gd php-pdo php-pecl-mcrypt php-mysqlnd php-pecl-mysql

#DocumentRoot作成
RUN mkdir /var/www/webapp
RUN chown takemi /var/www/webapp
RUN chgrp takemi /var/www/webapp
RUN chmod 774 /var/www/webapp
RUN gpasswd -a apache takemi


USER takemi
COPY index.html /var/www/webapp/

USER root
RUN chmod 772 /var/www/webapp/index.html
#RUN systemctl restart httpd
```
パンくず機能

# 自分の環境
Ruby 2.5.1p57
Rails 5.2.4.2
mysql2 (0.5.3)

# なぜパンくずを実装しようと思ったか 
プログラミングスクールでフリーマーケットアプリケーションを作った際に
どこのページにいるかを目視できるようにする為です。

# パンくずという言葉の由来
パンくずリストという語源は、童話「ヘンゼルとグレーテル」の話の中に主人公の兄弟が森に入るときに、迷子にならないように自分たちが通ってきた道にパンくずを置いていったエピソードが由来となっています。

# パンくずのメリット
#### ユーザビリティが高くなる
パンくずリストを設置することで「自分が今サイト内のどこにいるのか」や「サイトの構造」を認識しやすくなり、結果として使いやすさを高めることができます。

# パンくずリストとは
このようなことを指します。
<a href="https://gyazo.com/3a836a1ec51f8a1848f1393c6c9974c5"><img src="https://i.gyazo.com/3a836a1ec51f8a1848f1393c6c9974c5.png" alt="Image from Gyazo" width="329"/></a>

#①　パンくず機能のgem導入
Gemfileの一番下にgem gretelを記述

```Gemfile.
gem gretel
```

ターミナルでbundle installをする

```
$bundle install
```

#②　ファイルの設定

ターミナルで実行する

```
$ rails generate gretel:install
```

実行すると下記のファイルが生成されます

```config.breadcrumbs.rb

crumb :root do
  link "トップページ", root_path
end

crumb :loginer do
  link "ログインページ", new_user_session_path
end

```

・ :loginer ← 設定ファイルを呼び出します。
・ "ログインページ" ← パンくずリストに表示される名称です。
・ new_user_session_path ← 呼び出し元のパスを指定します。

#③　ビューファイルの設定
```new.html.haml
    -# config/breadcrumbs.rbに定義したmypageを呼び出し
    - breadcrumb :loginer
    -# 下記を記述した箇所にパンくずリストが表示される。
    = breadcrumbs separator: " &rsaquo; "
```
・ separator ← パンくずの区切り文字を指定。「&rsaquo」は出力されると「›」になります。

パンくずリストの表示は、一般的に全ページに表示する事ができるよう**layout/breadcrumbs.html.haml**に記載する事が多いと思いますが、今回は全部のページではなく一部のページに投稿させたいので、部分テンプレート化して呼び出しています。

```layout/_breadcrumbs.html.haml
.breadcrumbs
  = breadcrumbs pretext: "",separator: " &rsaquo; ", class: "breadcrumbs-list"
```


<br>
実際に記入するとこのように表示されます

```new.html.haml
    - breadcrumb :loginer
    = breadcrumbs separator: " &rsaquo; "
```
<a href="https://gyazo.com/3a836a1ec51f8a1848f1393c6c9974c5"><img src="https://i.gyazo.com/3a836a1ec51f8a1848f1393c6c9974c5.png" alt="Image from Gyazo" width="329"/></a>

# ④　親の設定

**config.breadcrumbs.rb**の**crumb**、**end**の間に**parent**を設定する事で親を設定する事ができます。商品詳細ページを親に設定して商品編集ページをリストに表示させましょう。

```config.breadcrumbs.rb
crumb :root do
  link "トップページ", root_path
end

crumb :shower do
  link "商品詳細ページ", item_path
end

crumb :editer do
  link "商品編集ページ", edit_item_path
  parent :shower
end
```

するとこのような表示になります。
<a href="https://gyazo.com/e2d1e0add434bf2f91c6ed029151e162"><img src="https://i.gyazo.com/e2d1e0add434bf2f91c6ed029151e162.png" alt="Image from Gyazo" width="395"/></a>


<br>
以上がパンくず機能の実装のやり方です。

<br>
今回参考にさせていただいた記事
https://qiita.com/Azure0701/items/16de34a0010eb7f05d89
https://www.asobou.co.jp/blog/web/breadcrumb-list
https://qiita.com/you8/items/d2d37a745060b79c112f
vue.jsでビルドしたら何も表示されなかった時の対処法

#vue.jsでビルドしたらindex.htmlに何も表示されなかった時の対処法
vue.jsでビルドした時にできるdistフォルダの中のindex.htmlを開いてみたらブラウザに
なにも表示されていなかった。...せっかくwebアプリを作ったにも関わらず
今回はその時の自分が行った対処法を載せていきます。


1 ターミナルを開き　vue ui と
入力

2 左下の家のマークをクリック

3 対象プロジェクトを選択

4 左ペインの上から4つ目の歯車のマークをクリック

5 右側にでてくる公開パスの/を決して更新する

この手順でもう一度ビルド後のindex.htmlファイルを更新すると内容が反映されていると思います。

最後まで見ていただきありがとうございました。
つっかえた技術とかあったらその都度書き込んでいきたいと思います
FileSystemでファイルクリアをすると結果が取得できなくて困ったこと

# 背景
特定のファイルをcleanするコードを書きたくて

```
$result = app('files')->put($this->pathFromInput('clean'), '');
$result_str = $result ? "success" : "failure";
\Log::info("{$this->pathFromInput('clean')} cleaned: {$result_str}.");
```

みたいなコードを書いていたんですけど、ファイルの中身が消されてるのに結果がFalseで返ってきてておかしいなって思いました。

# 調査

なのでLaravelのコードをのぞいてみました。
https://github.com/laravel/framework/blob/7.x/src/Illuminate/Filesystem/Filesystem.php#L133-L136

```
public function put($path, $contents, $lock = false)
{
    return file_put_contents($path, $contents, $lock ? LOCK_EX : 0);
}
```

なんだ単に`file_put_contents`コールしてるだけなのね。PHPの方を調べてみよう。
https://www.php.net/manual/ja/function.file-put-contents.php#refsect1-function.file-put-contents-returnvalues

```
この関数はファイルに書き込まれたバイト数を返します。 あるいは失敗した場合には FALSE を返します。

警告
この関数は論理値 FALSE を返す可能性がありますが、FALSE として評価される値を返す可能性もあります。 詳細については 論理値の セクションを参照してください。この関数の返り値を調べるには ===演算子 を 使用してください。
```
...
0バイト書き込めば0が返ってくるから実質FALSEになるので`$result===0`と`$result===''`で使い分けるということのようです。

# まとめ
## 建前
PHPはこういった想定外の落とし穴があるので注意しましょう。他の言語だとこういうのあんまりないと思います…。


## 本心
**は？？？？？？マジで？？？？？なにこのPHPの仕様クソすぎない？？？？なんのためにboolがあるの？？？？言語として破綻してない？？？？酒飲みながら考えたみたいな仕様だな？？？？**

Java, C#, Objective C, Swift, Kotlin, JavaScript, Ruby, Python, Golang と触れてきたけどここまで書きにくい言語は初めてなので正直叫びたい。

**PHP大っ嫌いだー！**
【Javascript】 2つの配列に格納されているオブジェクト内部要素を比較し、新しいオブジェクト要素を追加

# 背景

vueでaxios使ってAPI情報取得したときに、使うことが多いかもなーってことで、もっと良い方法がありそうだが、ひとまず、自分用にメモで取っておきます。

vueでAPI叩いたときに、配列内部にオブジェクトを抱えたものが返ってくる前提です。

もっとこのほうがいいなど、あればアドバイスいただければ幸いです。

# 内容

## 結論

```javascript:内容
// axios叩いたときに返って来るdataの文字列
var obj = "data"
var test02 = [
    {
        "site_no": "00002",
        "term_id": "00002",
    },
    {
        "site_no": "00001",
        "term_id": "00001",
    },
    {
        "site_no": "00003",
        "term_id": "800003",
    },
    {
        "site_no": "00004",
        "term_id": "00004",
    }
]

// axios叩いたときに返ってくる配列（配列に格納されたオブジェクト一覧が返ってくる前提）
var test08 = [
    {
        "config":{
            "test01": "hoge1"  
        },
        "data": {
            "image_url": "http://test01",
            "term_id": "800001",
        },
        "header": {
            "aafa": "http://test01",
            "gdsa": "800001",
        },
        "status": 200
    },
    {
        "config":{
            "test01": "hoge1"  
        },
        "data": {
            "image_url": "http://test03",
            "term_id": "800003",
        },
        "header": {
            "aafa": "http://test01",
            "gdsa": "800001",
        },
        "status": 200
    },
    {
        "config":{
            "test01": "hoge1"  
        },
        "data": {
            "image_url": "http://test02",
            "term_id": "800002",
        },
        "header": {
            "aafa": "http://test01",
            "gdsa": "800001",
        },
        "status": 200
    }
]



// 比較する配列内部のオブジェクトに一致する文字列があるかを確認し、ある・ないで処理を分ける
// （2つ配列の内部どちらにもオブジェクトがあり、オブジェクト内部の特定文字列が存在することを確認する）
// ある：比較対象側オブジェクト（端末一覧情報オブジェクト）に、要素を追加
// ない：特に処理をせず終了
test08.some((val01)=>{
    test02.some((val02) => {
        console.log("val01: ", val01)
        if(obj !== ""){
            if( ( "term_id" in val01[obj] && "term_id" in val02 ) && ( val01[obj]["term_id"] === val02["term_id"] ) ){
                // console.log("存在します。")
                val02.image_url = val01[obj].image_url
            }else{
                // console.log("存在しません。")
            }
        }else{
            // オブジェクト内部に、検査したい要素があること確認 && それぞれのオブジェクトで要素が一致すること確認
            if( ( "term_id" in val01 && "term_id" in val02 ) && ( val01["term_id"] === val02["term_id"] ) ){
                // console.log("存在します。")
                // 条件に合致した場合に、片方の配列のオブジェクト要素に代入
                val02.image_url = val01.image_url
                // 合致したタイミングで処理を抜ける
                return true;
            }else{
                // console.log("存在しません。")
            }
        }
    })
})
console.log("result: ", test02)
```

```javascript:結果
result:  [
  { site_no: '00002', term_id: '00002' },
  { site_no: '00001', term_id: '00001' },
  { site_no: '00003', term_id: '800003', image_url: 'http://test03' },
  { site_no: '00004', term_id: '00004' }
]
```
matplotlibを使ってみた

仕事でmatplotlibを使う機会があったので、学習した使い方をまとめておきます。

## 環境
* windows10
* python 3.7.4
* matplotlib 3.2.1

[matplotlibの公式ページ](https://matplotlib.org/)

## 基本的な使い方
#### モジュールのimport

```
import matplotlib.pyplot as plt
```

#### グラフの表示

```
plt.plot([1, 2, 3, 4, 5])
plt.show()
```

以下のようなグラフが表示される。
引数に渡す情報が1つだけの場合はy軸に引数の座標が来るらしい。
![plot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540218/bd1da303-9de0-1270-a1c7-79ce4742ff6f.png)

#### 複数の線を描画する場合

```
line1 = [1, 2, 3, 4, 5]
line2 = [5, 4, 3, 2, 1]
plt.plot(line1, color='red')
plt.plot(line2, color='green')
plt.show()
```

`plt.plot()`で1つの線が描ける。
線の色を変更するには`color`を指定する

![plot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540218/37c7ab99-0305-de8d-63e7-05921706da30.png)

## アニメーション

線を描画するのにアニメーションをつけることもできる。

#### アニメーションに必要なモジュールのimport

```
from matplotlib.animation import ArtistAnimation
# または、
from matplotlib.animation import FuncAnimation
```

アニメーションの実装には2つのクラスが用意されている。

* ArtistAnimation
    * 描画するデータを表示前に計算して順次アニメーションする方式
* FuncAnimation
    * 描画するタイミングで計算した値を表示する方式

#### ArtistAnimation

値が１ずつ右肩上がりになっていくグラフのアニメーション

```
fig = plt.figure()
artist = []
line = []

for value in range(1, 10):
    line.append(value)
    im = plt.plot(line, color='red', marker='o')
    artist.append(im)

anim = ArtistAnimation(fig, artist, interval=300)    
plt.show()
```

#### FuncAnimation

実装の内容はArtistAnimationと同じ
FuncAnimationはオブジェクト生成時に`repeat`がデフォルトで`True`になっており、初期化用の関数が実装されていないと2週目以降に意図しないアニメーションになるので注意

```
fig = plt.figure()
line = []

def init():
    global line
    print("初期化処理を実装する")
    plt.gca().cla()
    line = []

def draw(i):
    line.append(i)
    im = plt.plot(line, color='red', marker='o')

anim = FuncAnimation(fig, func=draw, frames=10, init_func=init, interval=100)
plt.show()
```
Rails tutorialでMySQLを使う方法

rails tutorialも2週目に入りsqliteでは無く、今後を考えmysqlを使いたいと考えた。

rails new アプリケーション名 --database=mysql

上記を使用することでmysqlが使用できるとのことだがエラーが発生。
下記を実行しろと言われるのでそのまま従う。
gem install mysql2 -v '0.5.3' --source 'https://rubygems.org/'
rails sを使用するとmysqlにエラーがあるよと言われる。bundle installすると同じエラーが発生してしまう。

結論から言うと、下記コマンドを順に実施することで解決した。
sudo apt-get install libmariadb-dev
sudo apt-get install libmysqlclient-dev
sudo yum install mysql-devel'
gem install mysql2 -v '0.5.3' --source 'https://rubygems.org/'

新しいパッケージを入れるためには、その元となる「-dev」なんとかdevというものを事前にインストールしておく必要があるらしい。このgem install するときの元となるデータがなかったためエラーになったみたいだ。
プロトコルエラー NSPOSIXErrorDomain:100 の解決策

# 問題点

PCのSafariで下記のようなエラーが表示され、サイトが表示できなくなりました。

![ページを開けませんでした.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154018/3fa2236d-a959-a9fa-a81d-1575cc6f4bbc.png)

MobileのSafariで確認しても、期待する画面は表示されず、先に進めなくなった。

# 解決策

https://qiita.com/ameyamashiro/items/8d4be0f11ffe12472052

上記の記事では、ELBのHTTP/2を無効化して解決しているのですが、今回はHTTP/2は使い続けたかったので当てはまりませんでした。

`Upgrade`ヘッダがあることで、ブラウザ側でエラーが起きているのが原因だったため、この`Upgrade`ヘッダを出力しないようにする必要があります。

参考： https://httpd.apache.org/docs/2.4/howto/http2.html

```
Protocols h2 h2c http/1.1
```

`httpd.conf`内にある上記の記述で、HTTP/1のリクエストをHTTP/2にプロトコル変換をするよう設定しています。

HTTP/1のリクエストはHTTP/1のまま、HTTP/2のリクエストはHTTP/2で返却してもらえればよかったので、今回は`httpd.conf`内にあるこの記述を外すことで対応しました。

無事、PC＆MobileのSafariでも画面表示されるようになりました。
javascriptでインターバルタイマーを作ってみた。

javascriptでインターバルタイマーを作ってみた。

仕様
・１秒ごとに音がなる。
・フォームに秒数を入れると、入力された秒数毎に別の音がなる。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>インターバルタイマー</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
   h1{
      font-size:24px;
   }
#PassageArea{
   font-size:42px;
   border:1px solid #666;
   padding:20px;
   width:100px;
   margin:0px auto;
}
</style>

</head>
<body>

<div class="container mt-5" style="text-align:center;">

   <h1>インターバルタイマー</h1>

   <div class="container mt-5">
      <div id="PassageArea">0</div>
   </div>

   <div class="container mt-5">
      <input type="number" id="number" min=1 value=5 style="width:80px;">
   </div>

   <div class="container mt-5">
      <button class="btn btn-primary" id="startcount" onclick="startShowing();">カウント開始</button>
      <button class="btn btn-primary" id="endcount" onclick="stopShowing();">カウント停止</button>
   </div>
</div>

<script>
var msg;
var number;
var count = 0;
var timer_id;

function startShowing() {
   count = 0;
   number = document.getElementById("number").value;
   document.getElementById("startcount").disabled = true;
   countup();
}

function stopShowing() {
   count = 0;
   clearTimeout(timer_id);
   document.getElementById("startcount").disabled = false;
}

function countup() {
   count ++;
   document.getElementById("PassageArea").innerHTML = count;
   console.log(count % number);
   if(count % number == 0){
      sound1();
   }else{
      sound2();
   }
   timer_id = setTimeout(countup,1000);
}

function sound1(){
	var id = 'sound-file1';
	if( typeof( document.getElementById( id ).currentTime ) != 'undefined' ){
		document.getElementById( id ).currentTime = 0;
	}
	document.getElementById( id ).play() ;
}

function sound2(){
	var id = 'sound-file2';
	if( typeof( document.getElementById( id ).currentTime ) != 'undefined' ){
		document.getElementById( id ).currentTime = 0;
	}
	document.getElementById( id ).play() ;
}
</script>

<audio id="sound-file1" preload="auto">
	<source src="beep1.mp3" type="audio/mp3">
</audio>

<audio id="sound-file2" preload="auto">
	<source src="beep2.mp3" type="audio/mp3">
</audio>

</body>
</html>
```
Swift UIViewControllerにtableViewを表示する（標準で用意されているセル採用パターン）

### ListViewController.swift

```swift

import UIKit

class ListViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    let dataList: Array = ["01","02"]
    @IBOutlet weak var tableView: UITableView!
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.delegate = self;
        tableView.dataSource = self;
        // Cell名の登録をおこなう.
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "Cell")
        // Do any additional setup after loading the view.
    }

    //追加③ セルの個数を指定するデリゲートメソッド（必須）
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return dataList.count
    }

    //追加④ セルに値を設定するデータソースメソッド（必須）
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // セルを取得する
        let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
        // セルに表示する値を設定する
        cell.textLabel!.text = dataList[indexPath.row]
        return cell
    }
}

```

### ListViewController.xib
tableViewを配置し、`ListViewController.swift`とOutlet接続を行ってください。


`ListViewController.swift`の`@IBOutlet weak var tableView: UITableView!
`

※`ListViewController.swift`でコードで生成行う場合は`.xibファイル`自体不要です。
WP開発自分用セット



#Git管理



##.gitignore

テーマフォルダだけ管理、プラグインなど一旦無視

```
wp/wp-admin
wp/wp-includes
wp/wp-*.php
xmlrpc.php
license.txt
readme.html
wp/index.php
./index.php
wp/.htaccess
wp/wp-content/index.php
wp/wp-content/languages
wp/wp-content/uploads
wp/wp-content/upgrade
wp/wp-content/plugins
wp/wp-content/themes/index.php
!wp/wp-content/themes/テーマフォルダ名/
wp/wp-content/themes/テーマフォルダ名/node_modules
.DS_store
```

##scss

/テーマ/assets/scss/style.scss

```
const gulp = require('gulp');
const sass = require('gulp-sass');
const plumber = require('gulp-plumber');
const changed = require('gulp-changed');
const mmq = require('gulp-merge-media-queries');
const prefix =require('gulp-autoprefixer');
const header =require('gulp-header');
const replace = require('gulp-replace');

const SCSS = './assets/scss/';
const DEST = './assets/css/';

//sass
gulp.task('sass', (done)=> {
  gulp.src('./assets/scss/*.scss')
    .pipe(plumber())
    .pipe(sass({ outputStyle: 'expanded' }))
    .pipe(prefix({
      cascade: false,
      grid: true,
      remove:false
    }))
    .pipe(changed(SCSS))
    .pipe(mmq({ log: true }))
    .pipe(replace(/@charset "UTF-8";/g, ''))
    .pipe(header('@charset "UTF-8";\n\n'))
    .pipe(gulp.dest(DEST))
  done();
});

gulp.task('watch', ()=> {
  gulp.watch('./assets/scss/*.scss', gulp.series('sass'));
});
gulp.task('default', gulp.series('sass'));
```



#functions.php

不要な記述を表示しない。いらんやろってやつだったと思うけど不具合あったら調べる。

```
remove_action('wp_head', 'feed_links_extra', 3);
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'rsd_link');
remove_action('wp_head','rest_output_link_wp_head');
remove_action('wp_head','wp_oembed_add_discovery_links');
remove_action('wp_head','wp_oembed_add_host_js');
remove_action('template_redirect', 'rest_output_link_header', 11 );
```
GatsbyJSでNetlifyのビルドを高速に行う方法

# 倍速になりました

まだ Beta 版の機能なんですがビルド時間が当サイトで半分(4 分かかっていたのが 2 分弱にまで）に短縮できました。

[公式](https://github.com/jlengstorf/netlify-plugin-gatsby-cache#readme)によると画像が多いサイトほど効果が高いそうです。
ご存じの通り、Netlify はビルド時間が多くなると課金しなければなりません。何より記事を書いてリリースされるまでの待ち時間が大幅に短縮できるのがうれしいです。
公式によるとページ数・画像数が多いと 75％減になるそうです。

## 導入方法

先ほどの公式にも書かれていますが導入方法は超簡単です。
ルートディレクトリにある netlify.toml を以下を追記するだけです。

```netlify.toml
[build]
  publish = "public"

[[plugins]]
  package = "netlify-plugin-gatsby-cache"
```

## プラグインがやっていくれる事

プラグインがやっていることはデプロイのたびに画像を圧縮しなおすのを止めて前回の結果を利用するそうです。

# 注意点

注意しなければならない点があります。netlify.toml を新規追加して新しく書き込む場合は netlify が標準で用意してくれている HTTP ヘッダ設定が消滅するので、ファイルキャッシュ関係の設定も自分でしなければなりません。

私は最初これに気付きませんでした。 netlify.toml を追加した後 WebPageTest のスコアが落ちたため（スピードは落ちてませんが画像キャッシュ設定、セキュリティ設定の評価が落ちました）気付きました。

本題とはずれるので参考までに書きます。私は 2020/6/1 現在ヘッダを以下のように設定しています。

```netlify.toml
# セキュリティ対策
[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"
    Referrer-Policy = "no-referrer"
    X-Content-Type-Options = "nosniff"

# キャッシュ関連
[[headers]]
  for = "*.js"
  [headers.values]
    Cache-Control = "public, max-age=60480000"
[[headers]]
  for = "*.jpg"
  [headers.values]
    Cache-Control = "public, max-age=60480000, immutable"
[[headers]]
  for = "*.webp"
  [headers.values]
    Cache-Control = "public, max-age=60480000, immutable"
```

ご参考になれば幸いです。

この記事は私が書いている[ブログ記事](https://myblog-by-mako-tos.netlify.app/amp/post/2020-06-01-speed-up-netlify/)を基に書いてます。
GatsbyJS 関連の事を書いてるのでご興味あれば見て頂けると嬉しいいです。
Wordpressで新着情報を複数設置

WordpressでWebページの再構築を考えております。現状のページでは、トップに２種類の
新着情報（１つはサイト上の新着記事、もう一つは講習会募集記事）を表示させてますが、
同様の事をWordpressで実現したいと考えております。
「新着記事」、「お知らせ」等でプラグインを探してみましたが、実現出来そうなものが
見付かりません。
何か使い勝手の良いプラグインが有りましたら、アドバイス頂けると助かります。

よろしくお願い致します。
Circle CIでジョブのスケジュール実行時にハマりやすい箇所とその解決方法

[Circle CI](https://circleci.com/enterprise-trial-install/)で、ジョブをスケジュール実行しようとしたら色々とハマったのでまとめです。
ちなみに、[Circle CI 2.0のworkflows](https://circleci.com/docs/2.0/workflows/)を前提としています。



# ハマりやすい箇所

### 1) そもそも動かない
Circle CIはyaml形式で処理を記述しますが、yamlのsyntaxエラーはチェックしてくれる一方で、**記述内容の妥当性チェックはしてくれません。**そのため、記述内容に問題があっても、Circle CIは何も通知してくれず、課題発見・解決が面倒です。後述の[「基本的な作業方針」](https://qiita.com/TheHiro/items/fdea26901765d533e137#%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E4%BD%9C%E6%A5%AD%E6%96%B9%E9%87%9D)のように、少しずつ作業を進めて、問題の切り分けをしやすくした方が無難です。


### 2) （関連のない）定義済みのジョブがPull Requestのたびに動いてしまう
少しずつ作業を進めていこうとすると、ネックになる課題です。
これは、GitHubのコミットメッセージに`[ci skip]`または`[skip ci]`を追記することで回避できます。
（参考）https://circleci.com/docs/2.0/skip-build/


### 3) cronに"H"を指定しても動かない
Jenkinsユーザがまず最初につまづく箇所だと思います。
cronに"H"を指定できるのは、Jenkins独自の仕様です。0などの整数値を指定しましょう。
（参考）https://www.jenkins.io/doc/book/pipeline/syntax/#cron-syntax


### 4) cronに"*/3"のような指定をしても動かない
Circle CIは、この表記方法をサポートしていません。
`cron: "* 0,3,6,9 * *"`のように、カンマ区切りで列挙する必要があります。
（参考）https://circleci.com/docs/2.0/workflows/#specifying-a-valid-schedule


### 5) 指定した時間にcronが動かない
Circle CIは、[タイムゾーンがUTCになっています](https://circleci.com/docs/2.0/workflows/#scheduling-a-workflow)。
そのため、日本時間前提で考える場合、**実行したい時間から9を引いた値**を設定する必要があります。
（例） 15時=`6`（=15-9）、午前1時=`16`（=25-9）



# 基本的な作業方針
**いわゆる「divide and conquer」です。**
一度にまとめて作業をして混乱することを避け、下記のように少しずつ作業を進めて、問題の切り分けをしやすくすると良いです。

### 1) `run "echo xxx"`のような簡単なジョブを作り、動作確認をしやすくする
```yaml
jobs:
  -- 中略 --
  # ここ
  temp-task:
    docker:
      - image: docker:18.09.6
    steps:
      - run: echo "Testing"

workflows:
  version: 2
  main:
    jobs:
      - temp-task
```

### 2) まず`filters`が正常に動作することを確認する

```yaml
jobs:
  -- 中略 --
  temp-task:
    docker:
      - image: docker:18.09.6
    steps:
      - run: echo "Testing"

workflows:
  version: 2
  main:
    jobs:
      - temp-task:
          # ここ
          filters:
            branches:
              only: test
```

### 3) `filters`が正常に動作することを確認したら、cronの動作確認に移る

```yaml
jobs:
  -- 中略 --
  temp-task:
    docker:
      - image: docker:18.09.6
    steps:
      - run: echo "Testing"

workflows:
  version: 2
  main:
    jobs:
      - temp-task:
    # ここ 
    triggers:
      - schedule:
          cron: "0 3 * * *"
          filters:
            branches:
              only: test
```

### 4) cronも正常に動作することを確認したら、本来動かしたいjobをcron+filtersで動かすようにする



# 参考
- [いまさらだけどCircleCIに入門したので分かりやすくまとめてみた](https://qiita.com/gold-kou/items/4c7e62434af455e977c2)
- [Circle-CI 2.0のcron triggerを使って、定期実行をする](https://qiita.com/terrierscript/items/55b6bbfbc064e80c1349)
【git】SourceTreeでリモートリポジトリがクローン出来ない【SourceTree】

##経緯
リモートリポジトリを新規でクローンしようとしたところ、下記のようなエラーが発生してクローンすることが出来なかった。

~~~
エラー: remote: Forbidden
fatal: unable to access 'https://username@bitbucket.org/hogehoge/hoge.git/'
: The requested URL returned error: 403
~~~

##試したこと
git cloneコマンドを実行
結果:同様のエラーが発生した
パスワード入力を求められるようなこともナシ

##解決方法
ユーザー名の後にパスワードを指定する→無事クローン出来た

~~~
'https://username:password@bitbucket.org/hogehoge/hoge.git/'
~~~
【PowerPoint】セクション名が変更できない

## 環境
- Office365 PowerPoint

## 概要
PowerPointには複数のスライドをまとめることができる、**セクション**という機能がある。
ところがセクションの名称を変更することができなかった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311943/58bc77b0-3835-146a-0e43-dc6b5846d43d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311943/39ecd51c-f366-455b-123c-cd017d93b37c.png)　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311943/4a7519d0-dc3b-0b04-b71a-912de1d55854.png)

上記は「セクション名の変更」となっているが、新規作成時の名称設定も同様である。

？？？？？？？？？？？？

## 解決策
上図のように、セクション名の設定時には、デフォルトの名称が選択された状態になっている。
選択状態のまま、変更後のセクション名を入力するとうまく反映されない。


**一度デフォルトの名称をbackspaceなりdeleteキーなりで削除し入力欄を白紙にすると、無事にセクション名を変更することができた。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311943/58bc77b0-3835-146a-0e43-dc6b5846d43d.png)　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311943/5987840d-4905-a3d7-990b-58d2d105c12f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311943/39ecd51c-f366-455b-123c-cd017d93b37c.png)　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311943/05bb6203-a0b5-c91a-fc0c-ec495d8673e4.png)
謎挙動ですね……。

## 考察
以下のように選択状態のまま新しい名称を入力した後、さらに何か文字を追記するなどすると無事に反映されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311943/f110f47f-b5a8-7785-684c-d37265618c60.png)
(これでEnterを押すなり、「名前の変更」をクリックするのはダメ)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311943/0f5a16ec-ed35-fef8-f24d-03c3ecfa5fab.png)　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311943/d12c3645-0c93-b0f8-07b5-5c8bc2419eb3.png)
(これは通る)

選択状態での入力→Enterで名前の変更を確定　するだけでは、入力欄に何かしらの変更を加えたという扱いにならないのだと思われます。
(この他、選択状態で右矢印キーなどを押して選択状態を解除→元のセクション名の末尾に何か文字を追加　としても正しく反映されるため、この仮説は正しそう)

## 参考資料
- [PowerPoint　セクション名の変更ができません](https://answers.microsoft.com/ja-jp/msoffice/forum/all/powerpoint/c694b39f-046e-4434-bea1-058897217da4)

知らんがな～～～～～～～～～～
Rails Herokuデプロイ手順


プログラミング初学者のため訂正がありましたらご指摘ください。
gitをインストールしている前提です。

# 自身の環境
- Ruby 2.5.1
- Ruby on Rails 5.2.4.1
- MySQL (gem 'mysql2', '>= 0.4.4', '< 0.6.0')


# デプロイの流れ

1. The Heroku CLIの設定
2. Herokuにログイン
3. Herokuにデプロイ

# Herokuとは

HerokuとはWebアプリケーションを簡単に全世界に公開できるクラウドプラットフォームです。

参考）HEROKU とは

以下のURLからHerokuのユーザー登録を行います。ユーザー登録は無料です。

https://signup.heroku.com/jp


# 1. The Heroku CLIの設定
The Heroku CLIをインストールすることで、Herokuのコマンドが使えるようになります。

下記のリンクからOSを指定してダウンロードしてインストールを完了させてください。

https://devcenter.heroku.com/articles/heroku-cli

# 2. Herokuにログイン
The Heroku CLIをインストールしたので、ターミナル上でHerokuのコマンドが使えるようになりました。

早速ターミナルからHerokuにログインしましょう。

Herokuへアップロードしたいアプリのディレクトリへ移動し、「heroku loginコマンド」を実行してください。

loginコマンド実行後、herokuに登録したメールアドレスとパスワードの入力が必要です。

```ターミナル```
$ cd app # appの部分を自分の作ったアプリ名にします
$ heroku login # herokuにログインする
Enter your Heroku credentials:
Email:
```
メールアドレスとパスワードの入力が完了すると以下のように表示されます。


```
Logged in as 入力したメールアドレス
```

# 3. Herokuにデプロイ
HerokuではPostgreSQLデータベースを使います。

なので、PostgreSQLをインストールしていきます。

以下のコマンドをターミナルで実行します。（既にインストールされている方はインストールしなくて大丈夫です。）

```
$ brew install postgresql
```
インストールが完了したら、本番 (production) 環境にpg gemをインストールしてRailsがPostgreSQLと通信できるようにします。

以下のコードをGemfileの最下部に追加してください。

```Gemfile.
group :production do
  gem 'pg'
end
```

pg gemは本番用のgemでローカル環境にはインストールしないようにします。その場合、bundle installに--without productionを追加します。このフラグを追加することで、pg gemはローカル環境には反映されないようになります。それでは以下のコマンドを実行します。

```
$ bundle install --without production
```
bundle installの本番環境用

次に「heroku create アプリ名」コマンドでheroku上にアプリケーションを作成します。 以下のコマンドを実行します。

```
$ heroku create
```
上記のようにアプリ名を入力しないと自動で名前をつけてくれます。
***一度登録した名前は使えないので注意してください***

上記のコマンドを実行すると、以下のような結果が表示されます。

```
Creating app... done, ⬢ app(アプリ名)
https://app(アプリ名).herokuapp.com/ | https://git.heroku.com/app(アプリ名).git
```

https://~~.herokuapp.com/が上記のコマンドで作成されたサブドメインです。 この時点でブラウザに表示可能ですが、今はまだ何もありません。デプロイしてWebページを表示させましょう。

RailsアプリケーションをHerokuにデプロイするには、まずGitを使ってHerokuにリポジトリをプッシュします。

```
$ git add .
$ git commit -m "initial commit"
$ git push heroku master
```

上手く行くと、下記のようにremote: Verifying deploy... done.と表示されます。

```
.
.
.
remote: Verifying deploy... done.
To https://git.heroku.com/app(アプリ名).git
 * [new branch]   master -> master
```

次に以下コマンドでmigrationを実行します。ローカル環境で行なっていたrails db:migrateのコマンドを本番環境でも行うというイメージです。

```
$ heroku run rails db:migrate
```

上記のコマンドを実行したら、以下のコマンドを実行してWebページを表示させましょう。

```
$ heroku open
```

以上です。

### 参考記事
https://qiita.com/kazukimatsumoto/items/a0daa7281a3948701c39
https://qiita.com/NaokiIshimura/items/eee473675d624a17310f
【GCP】Google Cloud で実現する新しいセキュアなアクセスと VDI の早期導入セミナーをみて

#『 Google Cloudが提供するリモートアクセスソリューションとは 』
・ITRの調査結果:IT戦略は加速する。特にコミュニケーションツールやテレワークへの投資が多い
・VPNの提供は難しい
・WEｂAppProxyやVDIについて話す
・MDMの機能がGCPはビルトインで入っている　

#セッション：『 ゼロトラストモデルによる新しいアクセスの形：BeyondCorp Remote Access のご紹介 / Professional Serviceのご紹介』
・ネットワークレイヤではなく、アプリケーションレイヤでコントロールする

#『 Chrome Enterprise で、今すぐテレワークを実現しよう 』
https://support.google.com/chrome/a/answer/188447?hl=ja
Chrome Enterpriseの違い

企業向け Chrome ブラウザ（Chrome Enterprise とも呼ばれます）は一般ユーザーが使用するのと同じ Chrome ブラウザですが、ブラウザの導入方法と管理方法が異なります。IT 管理者は Chrome Enterprise バンドルをダウンロードしたら MSI を使って Chrome ブラウザをインストールし、200 以上のポリシーを適用できるグループ ポリシーを使用して組織の Chrome ブラウザを管理できます。

・ChromBook→ChoromeOSを使って一元的に管理をしようというおすすめ
・メリットは、デバイスの配備が早い。設定が不要。
・クロームブックをシンクライアントとして使う
・PC枯渇問題が、ネバーウェアで解決できる。古いPCにネバーウェアをいれる

#『 Google Cloud で実現する VDI ソリューション とは 』『 実践！Citrix Workspace で安全で快適なリモートワーク 』	
・CitrixのVDI
・citrix workspaceをインストールしてすぐに使える
・GCPにWinをたてて、そこにCitrixを経由して接続しに行くイメージ

#VDAについて
https://www.lakesidesoftware.com/jp/blog/microsoft-vda-license
http://e-words.jp/w/VDA%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9.html
https://docs.citrix.com/ja-jp/citrix-virtual-apps-desktops-service/install-configure/resource-location/google.html
Qiitaでコーディング初年次教育してみた

# 目的
qiitaは「プログラミング」に役に立つ記事を集めることを目的にしています.
でも，起業の原点にある「プログラミングをできる人」を育てることも目標にして欲しいですね．
ここではnet講義だけが許される2020年度入学生にコンピュータ演習を教えるときに**qiitaを活用**した実践を報告します．

---

# 講義の概要
- [python](#python)
- [vscode](#vscode)
- [qiita](#qiita)
- word, excel, パワポ
- 最終成果物

---

## python
テキストには
 「いちばんやさしいPython入門教室」大澤文孝著,(ソーテック社出版, 2017).をメインで使用．でも，使っている環境がidleなんで少し古い感じ．

そこで，
 「12歳からはじめる ゼロからの Pythonゲームプログラミング教室」, 大槻有一郎 (著), リブロワークスPython部 (著), 雪印 (イラスト), ラトルズ(2017/5/11)．
---

## vscode
idleからvscodeに移行させました．でも，教える方がwindowsの初心者なんでちょっと苦労しています．

---

## qiita
第3回目あたりからqiitaのアカウントを作ってそこで課題の途中経過を記すように指導．
- 最終プログラムを写すだけではダメ
- 1行ずつ確認
- 途中のメモが大事
なんかを強制していますが，なかなかダメですね．どこで全部写してから実行することを覚えるんだろう．

---


# 利用したqiitaの仕組み
**memo :** 作業記録
**report作成 :** 体裁, markdown
**slide :** 中身のbrush up
**LGTM :** 人気投票
**限定投稿 :** 自分と先生だけだと気が楽，
 個人情報，security, 引用とかを後で教えられる

---

# qiitaで全体に公開するに当たって気を使ったところ
open sourceプログラマ文化に馴染んでもらう
- 経験を共有することの大切さ
- 引用（剽窃との違い）
- 体裁（codeの再利用の意義）


---

# qiitaの意義
**md, capture :** すぐにfeed back(ゾーンに)
**SQ3R :** 書けば読めるようになる
**知識の定着 :** 書けば読み直す
**雛形の提供 :** 良い文書の第一歩
**良い例の参照 :** 自分で推敲すると，他人様のを読めるようになる
**慣れた環境での作業 :** 採点する方も慣れているので，何度もコメントで修正要求
この辺りは理想でしかなくて，今後，履修した学生さんたちが気がついてくれることを願います．
VMware ESXi: 時計が９時間ずれる件について

`BIOS設定画面`で時計を`－９時間`しておきましょう。
`ESXiホスト`が自動で`＋９時間`してくれます汗

`ESXi`は`BIOS時計`を`UTC標準`だと思ってるようです・・笑

LGTMお願いします！
ストックのついでにお願いします！
モチベーションがあがります！
Goの配列とスライスについて

# 書き方

##　配列
* `list := [3]string{"a","b","c"}` 
 　配列 := [長さの数字]型｛要素｝

* `list := […]string{"a","b","c"}` 要素の数を自動カウント
##スライス
* `slice := []string{"a","b","c"}` 
  スライス := [長さは指定しないので何も書かない]型{要素}

* `slice := list[0:5]` 
 スライス := 配列[n番目:m-1番目]
※部分列の取り方→配列[start:end]or[start:]or[:end]or[:]

* `slice := make([]int,5,5)`
　　　　　make([ ]型,長さ,容量)


# 性質

## スライスの長さlen(slice)と容量cap(slice)
* 長さ=要素の数
* 容量=スライスの最初の要素から数えて、元となる配列の要素<br>
※配列をスライスしても元の要素の情報を参照型で保っている


## インデックス(順番)
* 配列もスライスもインデックスは０から数える<br>
例) `list := [3]string{"0番目","1番目","2番目"}` 

## 要素の追加
* 配列は宣言時に要素の数が固定
* スライスは組み込み関数append()を使う<br>
例) newSlice = append(slice, 追加要素)
→新しいスライスに元のスライス＋最後に要素が追加される
* appendが容量を超える場合、別途、容量を２倍した新しい配列をコピーします。コピーは処理コストが大きいのでmakeを使うのがおすすめ

## 要素の変更、代入
* スライスの要素を指定することでそこだけを変更できる

```go
package main

import (
    "fmt"
    "io/ioutil"
    "log"
    "flag"
)

func main() {
    slice := [] int{1,2,3,4}
    slice[0] = 9
    fmt.Println(slice)→[9,2,3,4]
```

* スライスの型が一致している場合、スライスを代入することができる
(元の配列の情報も引き継がれる)

##ゼロ値
* スライスのゼロ値はnilでlen=0,cap=0
【Laravel】ルーティングのミドルウェア（Middleware）で任意のパラメータを渡す。

メモとして残します。

#■やり方
##ミドルウェア呼び出し側
下記の例ではルーティングでミドルウェアを呼び出しているが、基本的には変わらない（はず）

```php
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Hoge extends Model
{
    public function setTitleAttribute($value)
    {
        $this->attributes['title'] = $value ?? '';
    }
}
```
【GCP】gsutilコマンドさわってみた

# 参考url
https://www.apps-gcp.com/gsutil-command-explanation-part1/

# 触ったコマンド

####gcloud config list
gcloud config list で設定確認。
https://qiita.com/masaaania/items/7a83c5e44e351b4a3a2c
https://selmertsx.hatenablog.com/entry/2018/11/12/gcloud%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8BGCP%E3%81%AE%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%82%92%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%8B

ストレージがあると以下のように表示される
gs://＊＊＊＊＊＊/

####gsutil mb
最後にストレージ名を指定すると作成できる
gsutil mb -l northamerica-northeast1 gs://＊＊＊＊＊

####gsutil label
ラベルの表示
gsutil label get gs://＊＊＊＊＊
{
  "test1": "test"
}

Jsonで返ってくる
https://lab.life-socket.jp/blog/12
Jsonのメリットはこちら
開発しやすい　扱いやすい

こうするとテキストにできる
gsutil label get gs://＊＊＊＊＊ > bucketlabels.json

こうするとテキストにしていたラベルが違うストレージにセットできる
gsutil label set bucketlabels.json gs://＊＊＊＊＊2/

以下でうつと追加される
gsutil label ch -l "extralabel:extravalue" gs://＊＊＊＊＊/

####gsutil versioning
オブジェクトのバージョン管理ができる
バージョニングを有効にできる　これをするとオブジェクトのバージョンを更新し続ける感じになる

versioningの状態を確認
gsutil versioning get gs://＊＊＊＊＊/
↓
gs://＊＊＊＊＊: Suspended

versioningを有効化
gsutil versioning set on gs://＊＊＊＊＊/
gs://＊＊＊＊＊: Enabled

https://cloud.google.com/storage/docs/using-object-versioning?hl=ja


####gsutil ls 
gsutil ls -a ストレージ　
アーカイブされたオブジェクトにかんする情報をみれる
オブジェクトのバージョン管理に使える
バージョンは更新され続ける
【質問用メモ】paramsが全く理解できていない【Rails】

#paramsがまったくわからない【Rails】

paramsが全くと言っていいほどわからない。
色々分からない。

読み方→「ぱらむす？」
何の略？→「ぱらめーたー？」

paramsはハッシュらしいけれど、どこのデータに由来しているのかが全く分からない
progateではurlからデータを受け取っていた。

params→urlではなくて
url→paramsということ？？？

じゃあurlは何処から？？？
ルーティングの:idって何を指しているのか？

…悩む。きっとデータのやり取りの流れが理解できればすっきりするのだとおもいます。
分かり次第続きを書きたいと思います。