OmniAICreator/Qiita-1.07M huggingface dataset:
最近HerokuのSendGridで `535 Authentication failed: account disabled` がよく起きるのでapikeyを使うといいかもという話

Rails + Heroku + SendGrid(heroku addon)で構築しているサービスで最近これがよく出ます。

```
535 Authentication failed: account disabled
```

自分だけじゃなく、周りでも最近ちょいちょい聞きます。
問い合わせて直してもらうか、herokuアプリを作り直すのが確実っぽいですが、面倒くさい。

なんか方法ないのかとたまたまやってみたら動いたのでメモしておきます。

※ HerokuのアドオンからSendGridのコンソールにアクセスできる場合のみこの対応が可能です。ログイン自体できない状態になったこともあった気がするので、その場合は問い合わせるとかしないとだめなんでしょう。

# やったこと

1. herokuのコンソールから、SendGridのコンソールへ行く
2. API KEYを作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51402/716fef23-ef52-d6d7-90d9-8d521f093fcd.png)

メール送信だけできれば良さそうなので

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51402/e464db11-4c91-6bf2-cfa1-ed9b22fc762c.png)

にしました。

3. herokuのコンソールで環境変数にAPI KEYを設定する

```
SENDGRID_USERNAME: apikey
SENDGRID_PASSWORD: [生成したAPI KEY]
```

終わり

usernameがapikey固定なのはこの辺に書いてあります。

https://sendgrid.kke.co.jp/docs/Tutorials/A_Transaction_Mail/send_transaction_mail.html
【Laravel】Herokuでメール送れるようにする

# 問題
Laravelってユーザー認証とか用意してくれてありがたいよね
laravel new で作ったアプリにAuth入れてユーザー登録はうまくいった
ただ、パスワードリセット用のメールを送ろうとしたら、エラー500が出て何時間も詰まった
環境変数とか設定してないから、そりゃエラーは出るだろうけど、それだけじゃなかったので備忘録として記しておこう

# 前提
Laravel7です
なので、laravel/uiをインストールするところから始めます
初心者にとってはおまじないですが、以下を実行

```zsh:
// laravel/uiをインストール
% composer require laravel/ui

// Auth関連ファイル(基本的なスキャフォールド)を生成
% php artisan ui vue --auth

// フロントエンドに必要なパッケージをインストール&必要なファイルをコンパイル・ビルド
% npm install && npm run dev
```

このようにしてAuth機能を使えるようになっていることが前提です

# 解決法
解決法というかメール送れるようにする方法
今回は、GメールのSMTPを使ってメールを送れるようにしたいと思います
行うことは以下のリスト

- Gメール側でアプリパスワードを生成
- Herokuの環境変数設定
- mail.phpの編集

では順にやっていきましょう

## アプリパスワードの生成
[Googleアカウント](https://myaccount.google.com)からセキュリティ→Googleへログインパネルのアプリパスワード
※2段階認証をオンにしないとアプリパスワードは出てこない
パスワード聞かれるので入力
デバイス名をその他でアプリ名(何でも良さそう？)を記入→生成
基本、生成したパスワードは覚えておく必要がないが、これをあとで環境変数に設定するのでメモしておく

## Herokuの環境変数を設定

```zsh
% heroku config:set MAIL_MAILER=smtp
% heroku config:set MAIL_HOST=smtp.gmail.com
% heroku config:set MAIL_PORT=587
% heroku config:set MAIL_USERNAME=自分のGmailアドレス
% heroku config:set MAIL_PASSWORD=アプリパスワード(16桁)
% heroku config:set MAIL_ENCRYPTION=tls 
% heroku config:set MAIL_FROM_ADDRESS=自分のGmailアドレス
% heroku config:set MAIL_FROM_NAME=アプリ名
```

TLSの代わりにSSLを使う場合は以下農用に設定してください

```zsh
% heroku config:set MAIL_PORT=465
% heroku config:set MAIL_ENCRYPTION=ssl
```

ローカル環境でメール送信を行いたい場合は、これと同様の環境設定を.envファイルに書き込む

## mail.phpの編集

デフォルトで設定してあるなら編集する必要はないですね
確認してください

```php:config/mail.php
'default' => env('MAIL_MAILER', 'smtp')
```

smtpの設定は、さらに下の方でデフォルトで設定してあるので、そのまま使いましょう

# おわり
３つのことを行うだけで、Heroku実環境でLaravelアプリからメールが送れるようになります
簡単ですね
もし、これでもエラーが出てしまった場合は、エラーをしっかり読んで調べましょう
エラー500などのページしか出てこない場合は、Herokuの環境変数にAPP_DEBUG=trueを設定してみましょう
エラーを確認した後は必ずAPP_DEBUG=falseに戻しておきましょう
Linux　ファイルの属性を理解する(ls -l コマンド)

Mac 前提で書いております。

# ファイルの属性とは？

ファイルには内容の他にも、「所有者」や「更新日時」などの情報が付属しています。これらの情報を「属性」と呼びます。

ファイルの属性は、「ls」コマンドの「-l」オプションや（画面1）、「stat」コマンドで確認できます。

```terminal
-l
(The lowercase letter ``ell''.)  List in long format.  (See below.)  A total sum for all the file sizes is output on a line before the long listing.
```
すべてのファイルサイズの合計は、リストの前の行に出力されます。

## The Long Formatとは

このフォーマットのことです。

```terminal
-rw-r--r--  1 user  staff   0  6 25 11:01 test
```

lsのmanで以下のように説明されています。

If the -l option is given, the following information is displayed for each file: 
<font color="ForestGreen">[-lオプションを指定すると、ファイルごとに次の情報が表示されます。]</font>

- file mode <font color="ForestGreen">ファイルモード</font>
- number of links <font color="ForestGreen">リンクの数</font>
- owner name <font color="ForestGreen">所有者名</font>
- group name <font color="ForestGreen">グループ名</font>
- number of bytes in the file <font color="ForestGreen">ファイル内のバイト数</font>
- abbreviated month <font color="ForestGreen">省略された月</font>
- day-of-month file was last modified <font color="ForestGreen">最終編集日</font>
- hour file last modified <font color="ForestGreen">最終編集時間</font>
- minute file last modified <font color="ForestGreen">最終編集分</font>
- the pathname <font color="ForestGreen">パスネーム</font>

```
# ファイルの場合
-rw-r--r--  1 user  staff   0  6 25 11:01 test
-rw-r--r--  1 user  staff   0  6 25 11:02 test.c

# ディレクトリの場合
drwxr-xr-x  2 user  staff  64  6 25 11:02 testdir
```

## ファイルモード

### ファイルの種類

| ls -lでの表示 | 意味 |
|:--|:--|
| - | 普通のファイル（Regular File） |
| d | ディレクトリ |
| l | シンボリックリンク |
| c | キャラクタ型デバイスファイル（特殊ファイル） |
| b | ブロック型デバイスファイル（特殊ファイル） |

### パーミッション

以下がわかりやすいです。

参考: [【一通り理解】Linuxパーミッションの基本とその設定方法](https://eng-entrance.com/linux-permission-basic)

chmodコマンドも一緒に理解すると良いです。
chmod は change mode の略だそうです。

パーミッションを指定していディレクトリを作る場合

```terminal
mkdir -m 777 test
```

**ファイルは作成時に個別にパーミッションを設定することはできない**ようです。

参考: [パーミッションなどを設定する！chmodコマンドの詳細まとめ【Linuxコマンド集】](https://eng-entrance.com/linux-command-chmod)

### リンク数

ファイルのリンク数は常に1ではないということも重要なポイントです。
ハードリンクと、シンボリックリンクも異なります。
ハードリンクしている数がリンク数として表示されます。

何を言っているのかさっぱりという方は、以下がわかりやすいです。

参考: [Linux: ハードリンクと inode - Qiita](https://qiita.com/lnznt/items/6178e1c5f066f22fe9c2)

### 所有者とグループ

ファイルの所有者は通常、作成した人です。

グループについては、以下がわかりやすいです。

参考: [Linux グループ一覧の確認と/etc/group ファイル](https://kazmax.zpp.jp/linux_beginner/etc_group.html)

### ファイル内のバイト数

ここは特に解説は不要かと思います。バイト数が表示されます。

### タイムスタンプ

ここも不要ですね。更新日時が表示されます。
オプションを付けることでアクセス日などに変更することもできます。

### パスネーム

ファイル名が表示されます。

本記事と関係ないですが、私と同じく初心者の方は以下も参考になりますのでどうぞ。
参考: [パス名について](http://www.tohoho-web.com/ex/draft/path.htm)

## 参考
参考: [「ls -l」コマンドの表示からファイルの属性を理解しよう (1/4)：“応用力”をつけるためのLinux再入門（9） - ＠IT](https://www.atmarkit.co.jp/ait/articles/1605/18/news015.html)
intra-mart とは

# 序文

intra-mart って仕事で使ってるけど、知らない人に説明する場合、結構苦戦する。
機能が豊富で多角的な視野が発生するからだと思う。
この辺を紐解ければと考てみる。

# 本文
そもそも何か
業務改善プラットフォーム・システム共通基盤 ＜ [intra-martの公式サイトより引用](https://www.intra-mart.jp/document/library/iap/public/setup/iap_quick_setup_guide/texts/create_war/create_project.html)
詳細はリンク先の動画を見てください

Webアプリケーションの共通基盤と理解してます。
共通基盤上で動作するアプリケーションシリーズがあり、アプリケーションを開発することも可能！
・コラボレーションアプリ
・ファイル管理
・業務パッケージ（経費／旅費／他）



### 基本機能（Standard Edition）
売りはワークフローだとするとAdvanced Edition 以上で考えたほうが良いのかな？
とりあえずは基本機能で考える

-------------
####利用者
所謂エンドユーザ
・ポータル（ダッシュボード？）
・SNSメッセージ
・スマートフォンアクセス
他

----------------
####管理者
様々な立場のシステム管理者
・ユーザマスタ
・ライセンス管理
・組織マスタ（会社、取引先）
・権限管理（認証／認可）
・物理的な複数テナント管理
・パスワードルール
・ログローテート
・お知らせポータル

・ログ管理
・ジョブスケジューラ
・非同期タスク管理
・マルチデータベース
・クラスタ構成（冗長構成／負荷分散構成）
・日本製
他

--------
####導入者
ステークスホルダー？
・セキュリティ（認証／認可）
・国際化（多言語、タイムゾーン）
・アプリケーションシリーズが豊富
・他システム連携インタフェースがある
・カスタマイズ性の高さ
・モバイル対応
・価格帯
・日本製
他

------

中途半端ですが以上、全然伝わらない文章でした。
思い立ったら追記していきます。
Raspberry Pi 3B Arch Linux のアナログサウンド設定

##序
　モニターHDMI接続、ヘッドホーンジャックから音声出力してましたが、kernel が5系になったころから(2020.5上旬？)、音が出せなくなってしまいました。omxplayerやaplayでは出力先を設定し実行すれば音が出るのですが、それ以外では音がでないという状況になってしまいました。ようやく音が出るようになったので、防備録として残しておきます。

##確認環境
　・Raspberry Pi 3B (初期の+のつかない方）
　・2.5inch sata HDDをUSB2.0で接続し起動(microSD無し)
　・USB 日本語キーボード／マウス
　・[WQHDモニター(HDMI接続)](https://qiita.com/pona_per/items/61ca7d40093ca69ac3eb)
　・電源 5V 2.5A、USB-MicroB端子より給電
　・ヘッドホーンジャックからアナログ音声出力
　・OS　Arch Linux ARM 32bit版(armv7)
　・音声系のインストール済みパッケージは後述。

##設定
　参考サイトのArch Linux ALSA wikiページ「デフォルトのサウンドカード設定→その他の方法」を確認して、`/etc/asound.conf`を作成しました。記述内容は以下の通りです。「card」部分の記述は各環境で確認したものを記述して下さい。

```/etc/asound.conf
pcm.!default {
        type hw
        card Headphones
}

ctl.!default {
        type hw           
        card Headphones
}
```
個別のログインユーザーに設定するなら、そのユーザーのホームディレクトリに`.asoundrc`を作成し上記内容を記述してください。この場合は`/etc/asound.conf`を作成する必要はありません。

##補足
　・`/boot/config.txt`に音声設定がされていることが前提です。その上で`$ amixer controls`で確認しても`numid=3,・・・`が表示されず、`$ amixer cset numid=3 1`が出来なくなった場合の設定です。又、後述のようにPulseAudioは入れてませんので、それらを使っている場合には当てはまらないかもしれません。

　・上記設定で「card」部分で記述する内容は、`/proc/asound`ディレクトリにある各ファイルの中を見て確認しました。詳細は参考サイトを確認してください。

##インストールしている音声関係パッケージ一覧
alsa-firmware, alsa-lib, alsa-plugins, alsa-topology-conf,alsa-ucm-conf, alsa-utils, zita-alsa-pcmi, libpulse
※バージョンは省略

##参考サイト
Arch Linux ALSA wikiページ：https://wiki.archlinux.jp/index.php/Advanced_Linux_Sound_Architecture
Raspberry Piで遊ぶ 　音を鳴らす編：http://www.yam-web.net/raspberry-pi/music.html
【laravel-admin】 インストール＆画面作成まで 編

こんにちは。バックエンドエンジニアの佐和です。
案件でしばらくlaravel-adminという管理画面を作成するためのライブラリを使っていたので、調べたことやつまづいたところも含めて少しずつ書き起こそうと思います。  
まずはインストール編です。簡単に管理画面を確認できるところまで見ていきたいと思います。

## laravel-adminとは

laravelで簡単にDBの管理画面を作成することができるライブラリです。  
ドキュメントやデモサイトなど使用するために必要な資料が充実しており、難しいカスタムを行う必要がなければものすごく簡単に管理画面が構築できます。  

[Laravel-admin(ドキュメント)](https://laravel-admin.org/docs/#/)
[GitHubページ](https://github.com/z-song/laravel-admin)  

基本的な使用方法は上記でカバーし、カスタマイズして使用したい際には直接ソースコードを読んで適宜書き換えていく形になります。
主観ですが、コード内のコメントも(おそらく書き換える前提の部分は)丁寧に書かれているので、しっかり読み解けば問題ないかと思います。  

## プロジェクトの作成

既に開発しているlaravelプロジェクトに追加する場合は、この章は飛ばしてもらって大丈夫です。  

何もないところからlaravel-adminを試したい方は、まずlaravelプロジェクトを作成するところから始めましょう。
公式によると、現在のバージョンでは以下の環境が推奨されるようです。

* PHP 7+
* laravel 5.5+

> This package requires PHP 7+ and Laravel 5.5, for old versions please refer to 1.4
> [laravel-admin install](https://laravel-admin.org/docs/#/en/installation)

```bash
$ composer create-project --prefer-dist "laravel/laravel=5.5.*" <project-name>
```

DBも必要になってくるので、.envにDBの情報も書き足しておきましょう。

## インストール

laravelの準備ができたら早速laravel-adminをインストールします。

```bash
$composer require encore/laravel-admin
```

インストールが終わったら下記コマンドを実行します。

```bash
$php artisan vendor:publish --provider="Encore\Admin\AdminServiceProvider"
$php artisan admin:install
```

これらを実行すると、`app/Admin`ディレクトリが作られます。これからの実装はこのディレクトリ配下で行うことになります。
ファイルの初期配置は以下。

```txt
app/Admin
├── Controllers
│   ├── ExampleController.php
│   └── HomeController.php
├── bootstrap.php
└── routes.php
```

フロント周りのファイルは`/public/packages/admin`に置かれています。
構成ファイルは`config/admin.php`です。後々触ることになります。  

ここまでで既にダッシュボードは作成されているので、`php artisan serve`などをして、[http://localhost:8000/admin](http://localhost:8000/admin) にアクセスしてみましょう。
ID・PASSどちらにも`admin`と入力し、無事ダッシュボードが表示されれば成功です。  
早速DBテーブルの管理画面を作成していきましょう。

## モデル・コントローラ作成

laravelでDBテーブルを認識するためにモデルを作成します。  

```bash
$php artisan make:model Recipe
```

モデルが作成されたのを確認したら、それを利用して**Admin用のコントローラ**を作成します。

```bash
$php artisan admin:make RecipeController --model=App\\Recipe
```

成功すると、作成したコントローラのルーティング情報がターミナルに出力されます。
これを`app/Admin/routes.php`に記述しましょう。  

```php
$router->resource('admin/recipes', RecipeController::class);
```

上記ルーティング情報のURLを叩くと、それらしい画面が表示されていると思います。
あとは作成したAdmin用のコントローラを、ドキュメントを参考にしながら更新していく流れになります。  

現在仕様として提供されているのは以下のページです。

* 一覧画面(`grid`関数)
* 詳細画面(`show`関数)
* 新規作成・編集画面(`form`関数)

それぞれドキュメントに基本の使用方法からカスタマイズ方法まで乗っていますので、一通り目を通すことをお勧めします。

## まとめ

とても簡単に導入できるので、気になっている方は一度試して見ると面白いかも知れません。
その他、主にカスタマイズ部分でつまづくことが多かったので、少しずつ記事にして行こうかと思います。

## 参考

[Laravel-admin(ドキュメント)](https://laravel-admin.org/docs/#/)
[laravel-admin(GitHub)](https://github.com/z-song/laravel-admin)
具体的にc++11のムッブセマンティックとstd::move()を理解する

ネット上、C++11の右辺値参照とstd::move()の解釈はまだアブストラクト。

この文章は右辺値参照とstd::move()のことを検討する。

## deep/shwllow copy

value セマンティックのせいで、C++11の前に、クラスのcopy-constructorはdeep copyのことが多い。
shallow copyが必要のとき、マニュアルにshallow copyのconstructor(boolや他のタイプは第二実引数)を呼び出すしかない。

```cpp
// deep copy
struct copy_t{
copy_t(const copy_t& cp){           
    auto len = strlen(cp.data);
    data = new char[len+1];
    memcpy(data,cp.data,len);
    data[len] = '\0';
}
char* data;
};
```

```cpp
// shallow copy
struct move_t{};

struct copy_t{
copy_t(copy_t& cp,move_t){           
    data = cp.data;
    // `cp.data = NULL;`がない
}
char* data;
};
```

## moveセマンティック

まず、前提として右辺値参照は左辺値参照と同じ、定義したオブジェクトはその参照。

```cpp
// 右辺値参照
struct move_ref{
    move_ref() = default;
    move_ref(move_ref&&){ }
}
```

```cpp
// 例
1.move_ref common_var{};
2.move_ref&  lvalue_ref = common_var;
3.move_ref&& rvalue_ref_1 = std::move(lvalue_ref);
4.move_ref&& rvalue_ref_2 = move_ref();
```

`conmon_var`は普通の変数、default-constructorを呼び出す。

`lvalue_ref`は`common_var`の左辺値参照、普通に使うとdereference(*オペレーション)したpointと同じ。

`rvalue_ref_1`は右辺値参照とstd::move()が一緒で、ちょっとアブストラクト。ここもネットで話してない部分：その書き方間違ってる：

  1. std::move()を呼び出す：lvalue_refの右辺値参照のテンプレートを作成した。

  2. そのテンプレートの値をrvalue_ref_1に代入した。
   
  3. 実際にテンプレートはlvalue_refと同じ、別物じゃない。行為も同じ。

**constructorを呼び出すことがない。**３はただ開発者に伝えする：ここからlvalue_refとcommon_carを使うな！

`rvalue_ref_2`も間違ってる。この例の行為は`move_ref rvalue = move_ref{};`と同じ(copy elisionがあるから)。

  1. move_ref::move_ref()を呼び出す、テンプレートを作成する。**(trivial default-constructor)。**
  
  2. テンプレートのアドレスをrvalue_ref_2に代入した。

  3. move_ref::~move_ref()を呼び出さない、普通の右辺値は呼び出す。

**４の場合、右辺値参照が参照したオブジェクトもスタックにある**。

3と4はネットで出た数が多いが、それらは悪い例だ。

## 合理的にstd::move()を使う

関数には引数の参照のパッションがないとき。

```cpp
// quoraから探した例
const char* words[] = {"one", "two", "three"};
std::string a = "valid";
a.reserve(100);
// accumulate()は参照のパッションがない
std::string result = accumulate(cbegin(words), cend(words), std::move(a), 
   [](std::string& a, const auto& b){
      a.append(b); 
      return std::move(a);
   });
```

クラスはmove-constructorだけある(所有権を転移する)

```cpp
std::unique_ptr<Type> some_variable{};
 
  // ある関数のなか、この関数はunique_ptrのcvのない参照を引き受ける。
  {
    std::vector<std::unique_ptr<Type>> container;

    // unique_ptrはmoveするしかない
    container.push_back(std::move(some_variable));
  }
```

std::move()の簡単の使い方はヒップにあるものの所有権を他のものに転移する。(オブジェクトを構造するとき、move-constructorを呼び出す。)

### まとめ

1. 右辺値参照は左辺値参照と同じ、何のconstructorも呼び出すしない、参照したオブジェクトもスタックにある。

2. 普通に右辺値参照を書くところは　move-constructorを書くとき。或いは君はライブラリの提供者、左辺値と右辺値は二つ以上の関数が必要。

3. std::move()はmove-constructorと組み合わせ、compilerを指導してmove-constructorを呼び出す。
swift5メモ

## コードから直接セーフアリアにconstraintする
+読み込んだwebページのURLをprint

```swift:swift5
import UIKit
import WebKit
 
class ViewController: UIViewController, WKNavigationDelegate {
    
    override func viewDidLoad() {
        super.viewDidLoad()

        let webView = WKWebView(frame: .zero)
        webView.translatesAutoresizingMaskIntoConstraints = false
        webView.navigationDelegate = self
        view.addSubview(webView)
        
        webView.leftAnchor.constraint(equalTo: view.safeLeftAnchor).isActive = true
        webView.rightAnchor.constraint(equalTo: view.safeRightAnchor).isActive = true
        webView.topAnchor.constraint(equalTo: view.safeTopAnchor, constant: 60).isActive = true
        webView.bottomAnchor.constraint(equalTo: view.safeBottomAnchor, constant: 100).isActive = true
    }
    
    // 読み込んだwebページのURLをprint
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        let activeUrl: URL? = self.webView.url
        let url = activeUrl?.absoluteString
        print(url)
    } 
}

extension UIView {
    var safeTopAnchor: NSLayoutYAxisAnchor {
        if #available(iOS 11.0, *) {
            return self.safeAreaLayoutGuide.topAnchor
        }
        return self.topAnchor
    }
    
    var safeLeftAnchor: NSLayoutXAxisAnchor {
        if #available(iOS 11.0, *){
            return self.safeAreaLayoutGuide.leftAnchor
        }
        return self.leftAnchor
    }
    
    var safeRightAnchor: NSLayoutXAxisAnchor {
        if #available(iOS 11.0, *){
            return self.safeAreaLayoutGuide.rightAnchor
        }
        return self.rightAnchor
    }
    
    var safeBottomAnchor: NSLayoutYAxisAnchor {
        if #available(iOS 11.0, *) {
            return self.safeAreaLayoutGuide.bottomAnchor
        }
        return self.bottomAnchor
    }
}
```
## 配列を値から検索して削除

削除したい値以外で新しい配列を作成

```swift:swift5
        var array = ["a","b","c","d","e","f"]
        array = array.filter { $0 != "d" }
        print(array)    //結果:["a", "b", "c", "e", "f"]

```
## 配列で値が重複してなかったら追加
```swift:swift5
        var array = ["a","b","c","d","e","f"]
        let target = "s"
        if !array.contains(target) {
            array.append(target)    //重複してなかったら追加される
        }
        print(array)    //["a", "b", "c", "d", "e", "f", "s"]
```
## switch文の挙動

default: break or returnの違い
breakはswitch文からの離脱
returnは関数からの離脱

```swift:swift5
import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var textFieldA: UITextField!
    @IBOutlet weak var textFieldB: UITextField!
    @IBOutlet weak var textFieldC: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    func textFieldDidEndEditing(_ textField: UITextField) {
        switch textField {
        case textFieldA:
            textFieldA.text = "AAA"
        case textFieldB:
            textFieldB.text = String(987)
        default:
            break   // or return
        }
        print(textField.text!)
        // textFieldA,textFieldBを編集した時は必ず実行されるがtextFieldCの時、breakなら実行される
        // returnならtextFieldDidEndEditing()から抜けてしまうので実行されない
    }
    
}
```
Apache2 で VirtualHost を使う

Apache2.4 で VirtualHost を使う方法です。

例えば、同じ　IPアドレスに２つのドメインが割り振れられているとします。

example.com   50.12.34.56
test.example.com 50.12.34.56

Ubuntu の場合、
/etc/apache2/sites-available/000-default.conf を次のようにします。

```text:/etc/apache2/sites-available/000-default.conf
<VirtualHost *:80>
	DocumentRoot /var/www/html/public_html
</VirtualHost>

<VirtualHost *:80>
	ServerName test.example.com
	DocumentRoot /var/www/html/public_test
</VirtualHost>
```

/var/www/html/public_test/index.html を作成して、

サーバーの再起動


```bash
sudo systemctl restart apache2
```

http://example.com と http://test.example.com
で違ったものが表示されます。
iOS Add the following keys to your Info.plist file, located in <project root>/ios/Runner/Info.plist:のエラー修正

## エラー内容
iOS Add the following keys to your Info.plist file, located in <project root>/ios/Runner/Info.plist: NSPhotoLibraryUsageDescription - describe why your app needs permission for the photo library. This is called Privacy - Photo Library Usage Description in the visual editor. NSCameraUsageDescription - describe why your app needs access to the camera. This is called Privacy - Camera Usage Description in the visual editor. 

Flutterアプリケーション内でカメラへのアクセスと写真ライブラリーを試みた時に生じたエラー。アクセスを試みると同時にアプリが落ちてしまう。

`Info.plist`ファイルに許可を与えることが必要らしい。

## 変更
<img width="867" alt="スクリーンショット 2020-06-25 10.53.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487891/dfd566cc-d90a-934c-7be6-d12fd9ee4256.png">
xcodeを開き、`Info.plist`ファイルへ。

画像を見て一番上の二つのpropertyを加える。

1. key: `Privacy - Camera Usage Description`と`Privacy - Photo Library Usage Description`を加える。

2. 型を決め、value:`NSCameraUsageDescription`と`NSPhotoLibraryUsageDescription`を加えれば、カメラへのアクセス、写真ライブラリーへのアクセスが可能になる。

## 方法
加え方は簡単でkeyのどれかにカーソルを合わせると+ボタンが出てくるのでそれをタップするとkeyの一覧が自動的に出てくる。

あとは追加したいkey、型、Valueを一覧から選ぶだけ。

## 参考
日本語情報が全然出てこなかったので書きました。下記のStackoverflowのリンクでより丁寧に方法を教えてくれているので英語で良いという方はこちらの方を参考にしてください。

[NSPhotoLibraryUsageDescription key must be present in Info.plist to use camera roll](https://stackoverflow.com/questions/39519773/nsphotolibraryusagedescription-key-must-be-present-in-info-plist-to-use-camera-r)
SQL select文に複数の条件を付与する

# 目的

- select文に条件を与えるwhere句とand句の使用方法についてまとめる。

# 例

- select文にてカラムの値に関する条件を付与したい時にはwhere句を使用する。
- 複数の条件を付与したい場合はand句を用いて追加を行う。
- 下記にwhere句とand句を用いた複数の条件を用いたselect文の書き方の例を記載する。

    ```sql
    select 出力カラム
    from テーブル名
    where 条件式1
    and 条件式2
    ```

# 具体例

- ユーザの年齢を格納しているageカラムと新規レコード追加時に自動インクリメントされた数値が格納されるIDカラムなどが存在するusersテーブルがあると過程する。
- usersテーブルのidカラムが10以下でageカラムが20以下であるレコードの全てのカラムのデータを表示する時のSQL文を下記に記載する。

    ```sql
    -- 出力カラムの設定
    select *
    -- テーブルの指定
    from users
    -- idカラムの値が10以下の条件式
    where id < 10
    -- ageカラムの値が20以下の条件式
    and age < 20;
    ```
意外と複雑な、JavaScriptで「クリップボードにコピー」

メールアドレスなどでよく見かける、「クリックしてクリップボードにコピー」
よく見かけるが故に`copy('コピーしたい文言')`みたいな感じで簡単に出来ると思ったら、意外と複雑だったので備忘録です。

```js
clipboardCopy: function(e) {
        e.preventDefault()
        const targetSentence = 'コピーしたい文言'
        let input = document.createElement('input')
        input.readOnly = true
        document.body.appendChild(input)
        input.value = targetSentence
        input.select()
        document.execCommand('copy')
        document.body.removeChild(input)
      }
```

## ざっくりとした流れ

①inputを生成する
`let input = document.createElement('input')`

②body内の一番最後の要素に、①のinputノードを追加する
`document.body.appendChild(input)`

③inputの中に、任意のコピーしたい文字列を挿入する
`input.value = targetSentence`

④inputの内容をselectする
`input.select()`

⑤選択している内容に対して、コピーコマンドを実行する
`document.execCommand('copy')`

⑥inputは用済みなのでさようならする
`document.body.removeChild(input)`

### なぜinputか
`select()`を使えるのがキモなんだと思います。

## 補足
### execCommand()について
コマンドキーを押して出来ることがだいたいできるみたいです。
cutやpasteもできます。ただし、pasteはバックグラウンドのみ。
（個人情報などがクリップボードに入っていた場合勝手に抜き取られる可能性があるため。）
ちなみにIEだとpasteも許容しているみたいです。
さすがですね。

https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard

ん？と思ったのは、これ非推奨なんですよね。
ほかにクリップボードとやりとりできる代替え手段があるのでしょうか？また調べてみます。
https://developer.mozilla.org/ja/docs/Web/API/Document/execCommand

## 時間がかかったところ

### iOSで確認すると、クリックと同時に勝手にスクロールされる

iOSですと、input系を選択（タップ）した時にその要素がズームされたり、中央よりちょい上の位置にスクロールされたりします。
この例では、作成したinputをbodyの中の最後の子ノードのうしろに追加しているので、ページの最後にinputが出現している形になります。

そのため、テキストリンクをタップした瞬間に、ページ下方へのスクロールが走ります。
よかれと思ってやってくれているんだろうけども、inputはユーザが認識するよりも先に消えてしまうのでなんの意味もないです…。

ここで、inputをreadonlyに設定することで、スクロールを防ぎます。
`input.readOnly = true`

### ズームされる
こちらはjsの問題ではなく、iOSの仕様と関係しています。
iOSですと16px未満のfont-sizeをもつinputをタップすると、問答無用でズームされます。
上記の実装でも目にはinputはみえませんが、input.selectをしているので謎にズームされます。
ズーム禁止にしてしまうとユーザビリティに影響が出るので、ひとまずSPでのfont-sizeを16pxにしてことなきを得ました。
（これを知ってたら最初から16pxにしてたのに…次回から気をつけよう）
window.location.hrefで別タブでリンクを開く方法

`window.location.href`を使用すると、外部URLへ遷移させることができます。

```js
window.location.href = 'https://qiita.com'
```
上記では、同一のタブで開くので、別タブで外部サイトを開かせる場合は`window.open()`を使います。

## window.open()で外部URLを開く

```js
const url = 'https://qiita.com'
window.open(url, '_blank')
```
上記のコードで、別タブで外部URLを開くことが可能です。
bowling の physical simulation で Springhead を使ってみた C++ (3)

[前回](https://qiita.com/nomissbowling/items/b677a29369370130d593) の補足。

今までの流れでは先に PHSolid を造ったので、それに対応する GRFrame-GRMesh を改めて造っていたが、本家 [Springhead](http://springhead.info/wiki/) では [FWObject](https://github.com/sprphys/Springhead/blob/master/core/src/Framework/FWObject.cpp) 内に GenerateCDMesh() が存在していた。
つまり、 GRFrame-GRMesh を先に造っておけば、 PHSolid に必要な CDConvexMeshDesc を自動で生成して(中身は vertices をコピーしてるだけ) CDShape を造って Pose の設定までやってくれるので、利用者側の手順としては、空の PHSolid を造って SetPHSolid() して GenerateCDMesh() を呼べば良いということらしい。

ただし、形状によっては(特に凹型) CDConvexMeshDesc が適用出来ないケースがありそう(詳細は未確認)なので、ボウリングのピンの場合は凸型を保証出来る区間毎に別の CDConvexMesh から PHSolid を複数造って joint している(PHHingeJoint を生成し joint パーツ同士の衝突の物理演算は省略)。この場合でも GRFrame-GRMesh は一つで良い。 FWObject の SetPHSolid() には joint した内の一つの PHSolid を指定する。(Pose が一致するように注意。)

まだまだ[続く](https://qiita.com/nomissbowling/items/d1f2ff9c1dd7e2833f8c)
[基礎] 数学

# はじめに
高校数学をマッハで復習するための自分用のメモです。
数式は便利だけど、プロコンやるのにあんま必要ないかんじだね。


# 最低限理解しておく言葉

```

かつ
and  && 

または
or ||
```

# 全体集合

[問題]
９以下の自然数を全体集合
U = {1,2,3,4,5,6,7,8,9}
A = {2,7,8}, B = {1,2,4,7,9}


# 忘れがちな考え方

## 数の数え方

次のように順番待ちをしている人が10人いるとする

1 2 3 4 5 7 8 9 10

3人目と７人目の間にいる人は何人か？

1 2 3 ◯ ◯ ◯ 7 8 9 10

答え) 3人

ここの丸の数を数えればいいのだが、ついついやってしまうミスが数をそのまま引き算して7-3=4をすること

図にすると、次の通りだ

1 2 3 4 5 6 7　

1 2 3 
     
このように引き算をしていることになる。

混乱したときは、`小学校低学年で習った算数のおはじき`を思い出せばいいと思う。何事も初心が大切ってことですね。

[結論]
**AからBの個数を求める時、おはじきを思い出す。そして　A-B+1　をする**
Windows10にApacheをインストール時エラー



以下のエラーが出る場合は「Visual C++ 再頒布可能パッケージ」が入ってない可能性あり

```
AH00378: Failed to start the 'Apache2.4' service
```

```
エラー 1053: そのサービスは指定時間内に開始要求または制御要求に応答しませんでした
```

[Visual Studio 2015 の Visual C++ 再頒布可能パッケージ](https://www.microsoft.com/ja-JP/download/details.aspx?id=48145)
Railsで投稿編集時に予め所属カテゴリにチェックをつける方法

多対多の関係のPostとCategoryをもつテーブルに置いて、Post編集時に既存のカテゴリに予めチェックボックスをつける方法。`form_with model: @post`の形式を使わないと`{checked:}`オプションを使えないので少しハマった。

## 前提：多対多のテーブル構成を実現する
以下を参考にテーブル構成してる前提です。ただし投稿の`title`は本記事では`name`になってます。

[Railsで投稿とカテゴリの紐付け機能を実装する](https://qiita.com/cawaz3/items/e755a58177212f2aca6c)

## collection_check_boxesの引数に`{checked：}`オプションを追加
前段の多対多のテーブルを作成している前提だと、`@post.category_ids`で所属カテゴリを配列で取得できるらしい。それに`.map(&:to_param) `してやることでチェックが付く。この`&:to_param`というのはいつも固定で、`@post`や`category_ids`のようにテーブルやモデルの名称によって変わるものではない。

```app/views/posts/edit.html.erb
<%= f.label :category, 'カテゴリ' %>
      <%= f.collection_check_boxes(:category_ids, Category.all, :id, :name, { checked: @post.category_ids.map(&:to_param) }) do |category| %> 
        <%= category.label do %>
          <%= category.check_box %>
          <%= category.text %>
        <% end %>
      <% end %>
```
https://stackoverflow.com/questions/30766766/how-to-pre-populate-collection-check-boxes-in-an-edit-form

### もし`form_with model: @post`で「undefined method 'post_path'」とエラーが出る時
`form_with model: @post, url: posts_create_path do`みたいな書き方をしていると`{checked:}`オプションは使えない。以下の回答のコメント欄にあるように`resouces`を使わないといけない。
https://teratail.com/questions/200474

## 本題：最終的なコード

```routes.rb
Rails.application.routes.draw do
  resources :posts, only: [:new, :create, :edit, :update]
end

```

```posts_controller.rb
class PostsController < ApplicationController

  def  new
    @post = Post.new
  end

  def create
    @post = Post.create(post_params)
    redirect_to('/posts/index')
  end

  def show
    @post = Post.find(params[:id])
  end

  def edit
    @post = Post.find(params[:id])
  end

  def update
    @post = Post.find(params[:id]).update(post_params)
    redirect_to("/posts/index")
  end

  private

  def post_params
    params.require(:post).permit(:name, category_ids: [])
  end

end
```

```app/views/posts/edit.html.erb
<div class="main posts-index">
  <div class="container">
    <%= form_with model: @post do |f| %>
  
    <p>
      <%= f.label :name, 'name'%>
      <%= f.text_field :name %>
    </p>
  
    <p>
      <%= f.label :category, 'カテゴリ' %>
      <%= f.collection_check_boxes(:category_ids, Category.all, :id, :name, { checked: @post.category_ids.map(&:to_param) }) do |category| %> 
        <%= category.label do %>
          <%= category.check_box %>
          <%= category.text %>
        <% end %>
      <% end %>
    </p>
  
    <%= f.submit '変更を保存' %>
  <% end %>
  </div>
</div>

```

## その他
Railsはマイグレーションファイルの生成や`db:migrate`を少しでもミスると、特に本番デプロイ時にDBがおかしくなったりするから気をつけてね。一度でも`db:migrate`したら、もうそのマイグレーションファイルは使えないし、schemaを直接書き換えたりしてもダメだよ。

こちらも参考になりそう👇
[【Rails】form_with/form_forについて【入門】](https://qiita.com/snskOgata/items/44d32a06045e6a52d11c#%E6%97%A2%E5%AD%98%E3%81%AE%E3%82%82%E3%81%AE%E3%81%8C%E6%B8%A1%E3%81%95%E3%82%8C%E3%81%9F%E5%A0%B4%E5%90%88)
掃き出し法の途中式をPythonでTeX出力する

# 掃き出し法，めんどい
途中式が必要なのめんどくさすぎる．TeXで毎回描くのもだりい．
退屈なのでPythonで解決．

## ソースコード
```
print("&=" + tex_print(a) + r"\\")
```
ここのところ変えてあげるとTeX用にカスタムしやすいよ


```sweep.py
from fractions import Fraction
import copy


def swap_rows(mat_list, num1, num2):
    mat_list[num1], mat_list[num2] = mat_list[num2], mat_list[num1]


def check_chaneg(a, b):
    if not a == b:
        print("&=" + tex_print(a) + r"\\")


def tex_print(mat_list):
    tex_txt = r"\left(\begin{array}{" + "c" * len(mat_list[0]) + r"}@\end{array}\right)"
    inner_txt = ""
    for l in mat_list:
        line_txt = ""
        for el in l:
            if "/" in str(el):
                line_txt += r"\frac{" + str(el).split("/")[0] + "}{" + str(el).split("/")[1] + "}"
            else:
                line_txt += str(el)
            line_txt += "&"
        line_txt = line_txt[: -1]
        line_txt += r"\\"
        inner_txt += line_txt
    tex_txt = tex_txt.replace("@", inner_txt)
    return tex_txt


rows = int(input("rows:"))
columns = int(input("columns:"))

mat_list = []
for _ in range(rows):
    mat_list.append(list(map(int, input().split())))

print(mat_list)
now_row = 0  # 現在何列目
pre_mat = []
for n in range(columns):
    # 行入れ替え
    pre_mat = copy.deepcopy(mat_list)
    zero_flag = True
    for i in range(now_row, rows):
        if not mat_list[i][n] == 0:
            swap_rows(mat_list, now_row, i)
            zero_flag = False
            break
    if zero_flag:
        continue
    check_chaneg(mat_list, pre_mat)

    # n列目を1にする
    pre_mat = copy.deepcopy(mat_list)
    temp = [0] * columns
    for c in range(columns):
        temp[c] = Fraction(mat_list[now_row][c], mat_list[now_row][n])
    mat_list[now_row] = temp
    check_chaneg(mat_list, pre_mat)

    # now_row以外のn列目を0にする
    pre_mat = copy.deepcopy(mat_list)
    for i in range(0, rows):
        if i == now_row:
            continue
        if not mat_list[i][n] == 0:
            temp = [0] * columns
            for c in range(columns):
                temp[c] = mat_list[i][c] - mat_list[i][n] * mat_list[now_row][c]
            mat_list[i] = temp
    check_chaneg(mat_list, pre_mat)

    now_row += 1
    if now_row > rows:
        break
check_chaneg(mat_list, 0)

```

## 使ってみた
途中式を出すことが目的のコードだから結果だけほしいなら最適化されたコードか，WolframAlphaでやれ．
今回のソースコードはalign環境に貼り付ける前提で作った．
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">掃き出し法などという人間がやるべきでない作業の途中式出力をPythonにぶん投げました <a href="https://t.co/2TfDtzGNNI">pic.twitter.com/2TfDtzGNNI</a></p>&mdash; 電電猫猫 (@nya3_neko2) <a href="https://twitter.com/nya3_neko2/status/1275962986234908672?ref_src=twsrc%5Etfw">June 25, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
AnglerでQRコード認識jsQR使いたいとき作法メモ

お作法的なすることメモ

###npmでインストール

``` 
npm install jsqr --save
```

###tsファイル内での利用するためのインポート
``` ts
import jsQR from 'jsqr';
```

###CanvasからのgetImageData()で取得したimageData渡す
``` ts
const code = jsQR(imageData.data, imageData.width, imageData.height, {
  inversionAttempts: 'dontInvert',
});
console.log(code);
```


###参考サイト
Angular2+ SPA に JavaScript 実装の QR コード読み取り機能を搭載するにあたり、既存の JavaScript ライブラリを選定した結果発表
https://qiita.com/jsakamoto/items/82e9dbd66ef4fb417933
Angular 6 + jsQR - How to capture QR code on the first success?
https://stackoverflow.com/questions/51706021/angular-6-jsqr-how-to-capture-qr-code-on-the-first-success
ライトニングケーブル使ってiPhone画面をパソコンに出力できる？！

#はじめに
こんにちは！
スマホを使う時、「もっと大きな画面が欲しい」と思って、スマホの画面をパソコンに出力する人は多いようです。その中で、Wi-Fiを使いたくない、「ライトニングケーブル使ってiPhone画面をパソコンに表示させたい」という発想もよく出てきますよね。

無線でiPhoneの画面を他のデバイスにミラーリングする方法は前も紹介しましたので、
今回は「**USB接続でiPhone画面をパソコンに出力**」について、紹介させていただきます。
初心者でもできるので、下記の内容を参考にしましょう！


#準備・ガイド

今回利用したアプリはApowerMirrorです。ApowerMirrorはiOSデバイスの画面をPC・ほかのAndroid/iOSデバイスにミラーリングするアプリケーションです。（最新バージョンはiOSデバイスのUSB接続機能を追加しました）

次は手順です！
まずはソフトをダウンロード
PC側は[ダウンロード先](https://www.apowersoft.jp/phone-mirror) にアクセスして、「ダウンロード」と書かれたボタンをクリックして、インストーラーをダウンロードする。
[ダウンロードボタン](https://download.apowersoft.com/down.php?softid=apowermirror)をクリックしてもいい。
☟
スマホ側はApp storeでアプリをダンロードし、インストールする。
☟
PCとスマホでこのアプリを開きます。
☟
USBケーブルを使ってiPhoneをパソコンに接続します。
☟
パソコンにドライバーをインストールして「次へ」をクリックします。
☟
iPhoneで「信頼」をタップして、PC側は「信頼しました、次へ」をタップします。
**iOSは、初めて接続する場合は、パソコンを信頼することが必要**。
☟
これで終わります。
（スマホを横に向ければ横画面でミラーリングもできます。また、フルスクリーン表示・画面録画もできます。）

#終わり
周囲にWi-Fi環境がない場合、ケーブルを使って有線接続でミラーリングするのはとても便利だと思いますので、おすすめしたいと思います。もし興味があれば試してください。
「Emmet」について

今回は**「Emmet」**についてまとめていこうと思います。

知らず知らずのうちに使ったことがある人は多いと思いますが、用語まで詳しく理解している人は少ないかなと思ったので紹介していきます。

Emmetはコーディングする上でかなり役に立つツールなので、是非この機会に覚えてしまいましょう！

#◎Emmetとは？

**Emmet（読み方：エメット）とは、HTMLやCSSのコードの入力を補完してくれるテキストエディタ向けのプラグインです。**
Emmetを使って省略してコードを記述することによって、キー入力の回数を減らすことができ、コーディングの効率化に繋がります。

基本的にどのテキストエディタでもEmmetのプラグインを追加することができますが、Visual Studio Code（VSCode）であればデフォルトでEmmetを利用することができるようになっているため、特別な設定を行わなくてもEmmetでコードを記述することができます。
この記事では、VSCodeでEmmetを使うことを想定した内容となっています。基本的にどのテキストエディタでも入力方法は同じですが、場合によって違う箇所があるかもしれないため、予めご了承ください。

#◎Emmetを使うメリットとは？

Emmetを使うメリットは

**①タイピングが早くなる
②アルファベットの記述ミスがなくなる**

があります。

とにかくEmmetを使うことで効率よくコーディングをすることができます！

#◎よく使われるEmmetの紹介

##□HTML編

###☑︎HTMLの雛形（ひながた）のテンプレ

HTMLではコーディングを始める際に決まった雛形を書く必要があります。
（雛形には文字の種類やCSSファイルを読み込んだり、実際にユーザーに見えない設定をしていきます）

そこで

```
!
```
と書いてTabかEnterを押すと

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
```

このように一気に省略して記述することができます！

###☑︎タグについて

HTMLを記述していくと、「div」や「p」タグを記述する機会が多いと思います。
その時に毎回「<」や「>」を打ったりすると大変ですし、面倒ですよね。

しかしEmmetを使えばもっと簡単にコーディングをすることができます！

例えば「h1タグ」を記述したい時は下記のように入力して、TabかEnterを押すだけで記述することができます。

```
h1
```
このように書きます。

そして出力されるコードが


```
<h1><h1>
```
このようになります。

さらに

```
<div class="container"><div>
```

とdivとclassを一気に記述したい場合は

```
div.container
```

と書いてTabかEnterを押すと省略して記述することができます。

1つのタグの記述を省略することはそこまで時短にならないですが、仕事でたくさんコーディングするとなるとかなり効率的にコーディングすることができるのでおすすめです。


###☑︎記号について

HTMLの入れ子もEmmetを使うことで簡単に書けちゃいます！

例えばulタグの中にliを入れたいとすると、

```
ul>li
```

と書いて、TabかEnterを押すと

```
 <ul>
     <li></li>
 </ul>
```

このように簡単に入れ子構造を作ることができます。

さらにulタグの中にliタグを3つ入れたいとすると

```
ul>li*3
```
のようにliタグを増やしたい数だけ「＊」の横に数値を書くと

```
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
```

とliタグを複数含めた入れ子構造を作ることができます。

***「>」や「＊」***は入れ子でよく使うので覚えておくと良いかなと思います！


##□CSS編


CSSを記述する際にもEmmetを使うことができます。

たくさんあるので全てを書くことはできませんが、

**・サイズ
・フォント
・Flex box**

の3種類に分解していくつか紹介していきます！

###☑︎サイズ


widthの場合

```
前
wd

後
width: ;
```

widthが100％の場合

```
前
w100％

後
width: 100%;
```

paddingが10pxの場合

```
前
p10px

後
padding: 10px;
```

このようにプロバティの頭文字と数字を組み合わせることで省略して記述することができます。


###☑︎フォント

fontサイズが15pxの場合

```
前
fz15px

後
font-size: 15px;
```

fontの種類がboldの場合

```
前
fw:b

後
font-weight: bold;
```

###☑︎Flex box

displayがflexの場合

```
前
df

後
display: flex;
```

displayがblockの場合

```
前
db

後
display: block;
```












#◎最後に

以上が「Emmet」についての紹介です。

これ以外にも調べるとEmmetについてたくさん出てくるので、是非気になる方は調べてみてください！

最後まで読んで頂きありがとうございました。

***引用元***
https://webdesign-trends.net/entry/10748

https://tech.qookie.jp/posts/info-emmet-html/
C++初心者(C経験者)がAtCoder Biginners Selectionで学んだこと①

プログラミングの実践練習を積みたいと思いAtCoderを始めたはいいものの、正しい出力が出せているはずなのに正解にならない…
じっくりみていたところ、メモリ制限をクリアできていないことがわかった。
CではなくC++で書けばなんとかなりそうだ。

私はCはやったことがあるものの、C++はちゃんとやったことがなかったので、[AtCoder Beginners Selection](https://atcoder.jp/contests/abs)でざっと勉強してみることにした。
いつもはiPadにメモを残していたが、ここに残せば同じように困った人の役に立つのでは…！と思い、ついでにQiitaの投稿にもチャレンジしてみることにした。
とりあえず今日は「はじめに」から「文字列と文字」まで読むことができたので、そこまで。


#「A - 1.00.はじめに」で学んだこと
- 提出後、「AC」と出れば正解
- 言語は「C++14 (GCC 5.4.1)」で提出する


#「B - 1.01.出力とコメント」で学んだこと
##はじめに書くもの

```
#include <bits/stdc++.h>
using namespace std;
```

 
- ```#include <bits/stdc++.h>```はC++の機能を「全て」読み込むための命令らしい。
便利だなあ。
細かく読み込むヘッダーファイルを分けたほうが実務ではよいとのことだが、とにかくC++をかけるようになりたい私は、一旦保留する。



- ```using namespace std;```は、本来C++で読み込んだ機能につけなければならない```str::```を省くことができるようになるものらしい。
例えば、本来であれば```std::cout```や```std::endl```のようにすべきところが、```using namespace std;```を利用すると、```cout``````end1```でよくなるとのこと。ありがたい。ただこれも実務ではよくないとされているらしい。

##出力

```
cout << "文字列" << endl;
cout << 数字 << endl;
```

Cのprintf();的なものですかね。%dとか%fとか、いちいち考えるのいやだったんですが、何でも出力できて便利ですね。
endlは改行の意味らしく、```cout << "文字列";```で改行なしで出力できるらしい。
\nはもういらないのかな。



#「C - 1.02.プログラムの書き方とエラー」で学んだこと
今までプログラムを書いたことがあれば、そうか、というものが多かった。
[コンパイルエラー集](https://atcoder.jp/contests/apg4b/tasks/APG4b_am)があったので、見れば参考になるかも

#「F - 1.05.実行順序と入力」で学んだこと
##入力
 
```
 int a;
  // 変数aで入力を受け取る
  cin >> a;

  string text;
  double d;
  cin >> text;
  cin >> d;

  // stringとdoubleを受け取る
  // 入力が複数ある場合は、スペースか改行で区切られていれば分解して入力してくれます
  cout << text << ", " << d << endl;
```
coutとは>>の向きが逆。逆にするだけで%lfとか%lとか考えなくて良いのはすばらしい
(それしか言わない笑)


###続けて入出力みたいな、以下のようなこともできてしまうらしい

```
  int a, b, c;
  cin >> a >> b >> c;
  cout << a * b * c << endl;
```
例
入力：
>2 3
4

出力：
>24

#M - 1.12.文字列と文字
##文字列の長さ（文字数）は文字列変数.size()で取得できる。

```
  string str = "Hello";
  cout << str.size() << endl;
```

実行結果：
>5

##i番目の文字は、文字列.at(i)で取得できる
```
  string str = "hello";
  cout << str.at(0) << endl; // h
  cout << str.at(4) << endl; // o
```

##文字
stringは複数文字を保持できる「文字列型」、charは一文字だけの「文字型」

```
  char c = 'a';
  cout << c << endl; // a
```

##文字列変数.at(i)で取得されるデータはchar型
```
  string str = "Hello";
  char c = str.at(0); // char型の値が得られる
```


##文字列の一部を書き換えるときや比較をするときはchar型
```
  string str = "Hello";
 
  str.at(0) = 'M'; // char型の'M'
  cout << str << endl; // Mello
 
  if (str.at(1) == 'e') {
    cout << "AtCoder" << endl;
```
##注意点やその他
- string型やchar型は全角文字を正しく扱えない
- .size()や後述する==演算子等を利用する場合、一度変数に格納するか、"文字列"s.size()のように" "の末尾にsをつける必要がある
- 「改行」などの特殊な文字をプログラム中で表現する場合、[エスケープシーケンス](https://ja.cppreference.com/w/cpp/language/escape)を利用する。

    - あ！\n出てきた！！
DOMとは何か（初心者からの目線）

#DOMとは何か

###そもそもDOMって一体何？
https://ja.wikipedia.org/wiki/Document_Object_Model

DOMはDocumentObjectModelのこと。
HTLMなどの階層化、構造化された文章のこと。

階層化された文章のオブジェクト群だよ（各要素群の集合だよ）という理解。
ROS2インストール・初期設定

[ROS2関係トップページへ](https://qiita.com/NeK/items/7ac0f4ec10d51dbca084)
Eloquent Elusor用は[こちら](https://qiita.com/NeK/items/a3def124b54dba621833)


# Ubuntuへのインストール
[jazzy install]:https://docs.ros.org/en/jazzy/Installation/Ubuntu-Install-Debians.html
[iron install]:https://docs.ros.org/en/iron/Installation/Ubuntu-Install-Debians.html
[humble install]:https://docs.ros.org/en/humble/Installation/Ubuntu-Install-Debians.html
[galactic install]:https://docs.ros.org/en/galactic/Installation/
[foxy install]:https://index.ros.org/doc/ros2/Installation/

公式インストールガイドのDebian Packagesに従ってインストール．気軽にバージョンを切り替えて使用することができるので，LTS(foxy)と最新版(galacticなど)を両方インストールすることを推奨．

* for Ubuntu 24.04
    * [公式インストールガイド for jazzy(LTS)][jazzy install]
* for Ubuntu 22.04
    * [公式インストールガイド for iron][iron install]
    * [公式インストールガイド for humble(LTS)][humble install]
* for Ubuntu 20.04
    * [公式インストールガイド for galactic][galactic install]
    * [公式インストールガイド for foxy(LTS)][foxy install]

## 特記
### localeについて
説明ではen_US.UTF-8だが，ja_JP.UTF-8に置き換えてインストール．

### Install ROS2 packages
公式インストールガイドのDebian packagesにて`Install ROS2 packages`の項目でインストールするものを選択しないといけないが，基本的にはRecommendedを選択

* ros-\<destro\>-desktop
    * Recommended
* ros-\<destro\>-base
    * Bare Bones

### 上記以外でインストールしたもの

```Bash:terminal for ubuntu 24.04
$ sudo apt install python3-colcon-common-extensions
$ sudo apt install ~nros-<distro>-rqt*
```

```Bash:terminal for under ubuntu 24.04
$ sudo apt install python3-colcon-common-extensions
$ sudo apt install python3-pip
$ sudo apt install ~nros-<distro>-rqt*
```

pipの扱い方がubuntu24.04以降変わったので注意．
基本的にpipでインストールできるものは各自インストールする方向とする．特に[自分とこの環境下におけるPython使用ルール](https://qiita.com/NeK/items/6456664cde0ec125368a)に従って仮想環境を作成しインストールモジュールを明示的にコントロールする．

python3-colcon-common-extensionsはcolcon使うのに必要．諸情報は[こちら](https://colcon.readthedocs.io/en/released/user/installation.html)．

`~nros-<distro>-rqt*`はUbuntu 20.04以上で，Ubuntu18.04以前では`ros-<distro>-rqt*`

Raspberry Piなどでpython3-colcon-common-extensionsのインストール時に「パッケージが見つかりません」と出る場合は以下のように行う．

```Bash:terminal
$ sudo sh -c 'echo "deb [arch=$(dpkg --print-architecture)] http://repo.ros2.org/ubuntu/main `lsb_release -cs` main" > /etc/apt/sources.list.d/ros2-latest.list'
$ curl -s https://raw.githubusercontent.com/ros/rosdistro/master/ros.asc | sudo apt-key add -
$ sudo apt update
$ sudo apt install python3-colcon-common-extensions
$ sudo apt install python3-pip
$ sudo apt install ~nros-<distro>-rqt*
```
本番環境の設定ファイルをふっ飛ばした話

## はじめに

Qiita夏祭り企画参加の記事です。
テーマページ②:システム開発における過去の失敗と乗り越えた方法について共有しよう！
こちらのテーマに参加します。

## アプリケーション詳細

Rails製の本番稼働しているアプリがありました。
そのアプリは`.env`ファイルに本番で使っている環境変数が定義されていました。
`.env`ファイルは本番の接続情報を持っているためgit管理対象外となっていました。
ローカルに環境構築をする用に`.env.example`はgit管理で用意されていました。

中身は以下のようなもの

```:.env.example
# Railsの設定
RAILS_ENV=development

# Bitbucket APIの設定
BITBUCKET_KEY=XXXXXXXXXXXXXXXXXX
BITBUCKET_SECRET=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
```
Bitbucketと連携するためにAPIキーが設定されていました。
環境構築時には以下コマンドを実行してください、というのがREADMEに書いてありました。
`cp .env.example .env`
`.env.example`をコピーして`.env`ファイルを作成し任意のAPIキーに上書きしてテストする、というようなもの。

## 何をしたか

本番環境の設定ファイルをふっ飛ばしました。
本番デプロイ時に寝ぼけていたのか
`cp .env.example .env`
これを実行し本番の設定ファイルがexampleに置き換わり、本番で設定していたAPIキーが分からなくなりました。
デプロイ作業中は気付かず、デプロイした部分の動作確認をして「なんか動かないなー」となってハッと気が付き、血の気が引きました。
このアプリケーションは元々自分が作ったものではなく、どのユーザーの何のAPIキーを使っていたのかも知りませんでした。
当時本アプリを作った担当者はもう退職済みで確認も取れない状況でした。

## 解決方法

過去の情報を必死に引っ張り出しましたがどこにも情報は残っていませんでした。
必死に調査したところ、うまく動いているところと動いていないところがあることが発覚。
本アプリはwebとバッチに分かれており、バッチの方のみ再起動したため、バッチの方は上書きしてしまった`.env`を参照しwebの方は上書き前の`.env`を参照しているようでした。
webのソースの方にログを吐く処理を追加しダンプ

```ruby
p ENV['BITBUCKET_KEY']
p ENV['BITBUCKET_SECRET']
```

そうしたところ前の`.env`の設定値が出力された。
私は急いでそれをメモし`.env`ファイルに適用、バッチの再起動を実施。
無事にバッチも動き出しました。

## おわりに

教訓: 寝ぼけながらデプロイしない

やってしまったとしても焦らず解決策を探す。
今回の場合は仮に前の値が見つからなかったとしても、新しくbotユーザーを作成しそのユーザーのAPIキーを設定すればうまくいくだろうし、必ずしも復旧させる必要はなかったかもしれません。
肝が冷えたお話でした。
TypeScript: RecursiveRequired<T> - 再帰的にオプショナルを外すユーティリティ型

この投稿では、TypeScriptの型から再帰的にオプショナルを外すユーティリティ型の実装方法を紹介します。

## 結論

* 先に結論としてオプショナルを外すユーティリティ型の実装を示しておきます:

```typescript
type RecursiveRequired<T> = {
  [P in keyof T]-?: RecursiveRequired<T[P]>
}
```

* これと同等のことをするライブラリもあります: [piotrwitek/utility-types](https://github.com/piotrwitek/utility-types#deeprequiredt)

## 「再帰的にオプショナルを外す型」ってどういう型？

TypeScriptには[ビルトインのユーティリティ型に`Required<T>`](https://www.typescriptlang.org/docs/handbook/utility-types.html#requiredt)というものがあります。

例えば、次の`Foo`のようにオプショナルなプロパティを持つ型に対して、

```typescript
type Foo = {
  a?: number
  b?: string
}
```

`Required`ユーティリティ型を使うと、オプショナルなプロパティをすべてオプショナルじゃなくできます:

```typescript
type RequiredFoo = Required<Foo>
//=> { a: number, b: number } 型になる
```

`Required`はある型から別の型を計算できるので、コードの重複が減らせて便利ですが、**オプショナルを外せるのはトップレベルのプロパティだけ**という制約があります。どういうことかというと、次の例のようにオブジェクトがネストした構造の型の子オブジェクトや孫オブジェクトのプロパティのオプショナルは外せないのです:

```typescript
type Oya = {
  ko?: {
    mago?: {
      a?: string
    }
  }
}

type RequiredOya = Required<Oya>
```

この`RequiredOya`は`ko`プロパティだけオプショナルが外れますが、`ko.mago`や`ko.mago.a`はオプショナルなままです。型の計算結果は次のようになります:

```typescript
type RequiredOya = {
  ko: {
    mago?: {
      a?: string
    }
  }
}
```

この投稿で紹介する「再帰的にオプショナルを外す型」とは、以上の課題を解決するもので、ネストした構造の型でも子オブジェクトや孫オブジェクトをたどっていって、すべてのプロパティからオプショナルを外す型になります。

## `RecursiveRequired<T>` - 再帰的にオプショナルを外すユーティリティ型

再帰的にオプショナルを外すユーティリティ型は以下のように定義されます:

```typescript
type RecursiveRequired<T> = {
  [P in keyof T]-?: RecursiveRequired<T[P]>
}
```

## `RecursiveRequired<T>`のデモ

`RecursiveRequired<T>`を試してみます。

まず、再帰的な構造の型を定義します。もちろんプロパティはすべてオプショナルにします:

```typescript
type Node = {
  name?: string
  parent?: Node
  children?: Array<Node>
}
```

本当にオプショナルになっているかコンパイルエラーを起こして確かめましょう:

```typescript
// 上の型を値として定義
declare const node: Node

// stringしか受け取らない関数を定義
declare function test(value: string): void

// テスト
test(node.name)
test(node.parent.name)
test(node.parent.parent.name)
test(node.parent.parent.parent.name)
test(node.children[0].name)
test(node.children[0].children[0].name)
test(node.children[0].children[0].children[0].name)
```

コンパイル結果は期待通りすべてエラーになります:

<img width="659" alt="CleanShot 2020-06-25 at 09.48.31@2x.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/dfa4451e-a1ea-5926-276a-c11c622aeb2a.png">

今度はオプショナルだらけの`Node`を`RecursiveRequired<T>`に渡して、オプショナルが完璧に外れた型に対してテストしてみます。再帰的にオプショナルが外れていれば、上のテストコードはコンパイルが通るはずです。

```typescript
declare const node: RecursiveRequired<Node>
```

コンパイル結果は、期待通りエラーが起きませんでした:

<img width="434" alt="CleanShot 2020-06-25 at 09.51.06@2x.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/0525c4aa-0e1b-2d97-de7c-c490381fa075.png">
【Windows】Tensorflow2.0をビルドする(C++向け.dll)【備忘録】

#はじめに
基本的には[公式マニュアル](https://www.tensorflow.org/install/source_windows)通り
[Bazel C++ チュートリアル](https://docs.bazel.build/versions/master/tutorial/cpp.html)を見ながら、少し手を加えたところをメモとして残す
#構成
- Tensorflow 2.0.0
- Python 3.6.8
- Visual Studio 2017 Community
- Bazel 0.26.1

#ソースをダウンロード
```powershell:
git clone https://github.com/tensorflow/tensorflow.git
cd tensorflow
git checkout r2.0 ### ココ
```
# .bazelrcを編集
`tensorflow`フォルダ直下にある`.bazelrc`ファイルを編集

```powershell:.bazelrc
startup --output_user_root=C:/tmp
build --enable_runfiles
```



#ビルド
以下、開発者コマンドプロンプト for VS 2017で実行
Visual Studioが複数インストールされている場合は、コンパイラを明示しておく

```powershell
set BAZEL_VC=C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\VC
set BAZEL_VC_FULL_VERSION=14.16.27023
```
`BUILD`ファイルを内のコメントを参考に、必要そうなものをビルド

```powershell
bazel build --config=opt //tensorflow:tensorflow_cc.dll # .dll生成
bazel build --config=opt //tensorflow:install_headers # includeフォルダ
```


dllの方はAMD Ryzen 5 3500U, 8GB RAMで65,000秒(=18時間)かかりました
![end.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/fdbad3c4-9033-7c3a-0b39-f49eb110413b.png)

おわり。
iPaaS インテグレーションまとめ

iPaaS は便利ですごく助かるのですが、どのサービスがどのサービスと繋がれるのかがよくわかりません。
各サービスのサイトをまわって確認するのは骨が折れるので、どこか一ヶ所で検索できたら便利なのではと思い、そういうサイトを作ってみました。
対象にしたiPaaSはIFTTT、Zapier、integromat、AppFlow、Power Automate、automate.ioです。

[iPaaS-Integrations](https://datastudio.google.com/reporting/f195e0e9-f9fd-40e2-9c73-54cb1c6ea103)

ちなみに、このサイトは [DataPortal](https://marketingplatform.google.com/intl/ja/about/data-studio/) で作成しました。
こちらも手軽に使えて便利です。

## 使い方

検索バーに利用したいサービスを設定すると、そのサービスとのインテグレーションを持つiPaaSが表示されます。

例えば、 `Amazon S3` と `Slack` 両方のインテグレーションを持つiPaaSはこのようになります。
![スクリーンショット 2020-06-25 0.25.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/9f8e6d7e-398e-3f4f-c905-d39a8a685c39.png)

両方のインテグレーションを持つiPaaSは、 `Zapier`、 `integromat`、 `AppFlow` という事がわかります。
ただし、 `Zapier` の `Amazon S3` インテグレーションは Premium App なので、[プラン](https://zapier.com/pricing) によっては利用できません。

## 参考

- [See all services - IFTTT](https://ifttt.com/services)
- [Explore All Apps | Zapier](https://zapier.com/apps)
- [Apps & Services | Integromat](https://www.integromat.com/en/integrations)
- [Amazon AppFlow 統合 – アマゾン ウェブ サービス](https://aws.amazon.com/jp/appflow/integrations/?nc1=h_ls)
- [List of supported connectors | Microsoft Power Automate](https://japan.flow.microsoft.com/en-us/connectors/)
- [List of Integrations - Automate.io](https://automate.io/integrations)
herokuでデプロイできなかった理由

以前に一度herokuでデプロイできたから「余裕！」と思っていたのですが、エラー...。対処した方法をまとめておきますね。

##エラー文

以下のエラーがheroku内で表示されました。

```
App not compatible with buildpack: https://buildpack-registry.s3.amazonaws.com/buildpacks/heroku/php.tgz
       
 !     ERROR: Application not supported by this buildpack!
 !     
 !     The 'heroku/php' buildpack is set on this application, but was
 !     unable to detect a PHP codebase.
 !     
 !     A PHP app on Heroku requires a 'composer.json' at the root of
 !     the directory structure, or an 'index.php' for legacy behavior.
 !     
 !     If you are trying to deploy a PHP application, ensure that one
 !     of these files is present at the top level directory.
 !     
 !     If you are trying to deploy an application written in another
 !     language, you need to change the list of buildpacks set on your
 !     Heroku app using the 'heroku buildpacks' command.
 !     
 !     For more information, refer to the following documentation:
 !     https://devcenter.heroku.com/articles/buildpacks
 !     https://devcenter.heroku.com/articles/php-support#activation
       More info: https://devcenter.heroku.com/articles/buildpacks#detection-failure
 !     Push failed
```


英語がわからない僕は、MacにダウンロードしたDeepLに全文翻訳してもらいました。
⌘を押しながらcを二回押すだけで翻訳できるので、楽〜！


```
アプリはbuildpackと互換性がありません: https://buildpack-registry.s3.amazonaws.com/buildpacks/heroku/php.tgz
       
 !     ERROR. このビルドパックではアプリケーションはサポートされていません!
 !     
 !     このアプリケーションには 'heroku/php' ビルドパックが設定されていますが
 ! PHP コードベースを検出できません。
 !     
 !     Heroku上のPHPアプリは
 ! ディレクトリ構造、または従来の動作のための 'index.php' を指定します。
 !     
 !     PHP アプリケーションをデプロイしようとしている場合は
 これらのファイルのうち、最上位のディレクトリに存在するのは
 !     
 !     !
 言語に設定されているビルドパックのリストを変更する必要があります。
 !     heroku buildpacks' コマンドを使用して Heroku アプリを作成します。
 !     
 !     詳細は以下のドキュメントを参照してください。
 https://devcenter.heroku.com/articles/buildpacks を参照してください。
 https://devcenter.heroku.com/articles/php-support#activation
       詳細情報: https://devcenter.heroku.com/articles/buildpacks#detection-failure
 !     プッシュに失敗しました
```

##対処したこと

###①ファイル名をindex.phpに変更

一つ目は**ファイル名変更**でした...

Heroku上のPHPアプリは、ディレクトリ構造、または従来の動作のための 'index.php' を指定しないといけないようです。ふむふむ。エラー文に表示されていますね。

僕が最初に設定していたものは
**calculator.php**
だったが
**index.php**
に変更しました。

そうしたら、herokuのアドレスで見ることができた！
よかった。

でも喜んだのもつかの間、数字を入力しても、計算結果が表示されない...
（足し算しかできない計算機をデプロイしたかったので）

###②ディレクトリ内もindex.phpに変更

ディレクトリ内の

```
<form action="calculator.php" method="post">
```

も変更しないといけなかった。

変更
↓

```
<form action="index.php" method="post">
```

開いた！良かった。

##まとめ##

herokuを使う場合、index.phpが必要であることがわかりました。自分だけでなく、他の人の役に立つよいいな。