OmniAICreator/Qiita-1.07M huggingface dataset:
【iOS】クラッシュログをシンボリケートする方法

##前書き
iOSアプリのApp Store公開申請にて、Appleの担当者によるレビューの際にアプリがクラッシュしてしまうと、リジェクトメッセージと共にクラッシュログが送られてきます。
クラッシュログはログ内の関数名が16進数のメモリアドレスで記載されているので、このままではどこでクラッシュしたのかわかりませんが、シンボリケートすることでメモリアドレスが関数名に変換されるのでクラッシュの調査がしやすくなります。

筆者もリジェクトをくらい、クラッシュログをもらったのでシンボリケートしようと思ったのですが、Appleの公式リファレンスやネットの記事を参考に、同じような手順でシンボリケートしてみたがなかなか上手くできず、小一時間苦戦してやっとできたので、同じように苦戦している方に向けて記事を書きました。

## 最初にやること
任意の場所に「CrashLog」フォルダを作成しておきましょう。
このフォルダに必要なものを詰め込んでいきます。


## ① アプリのクラッシュログを保存
App Store Connectのリジェクトメッセージの下に添付されていると思うので、
ファイル名と拡張子を **CrashLog.crash** にして「CrashLog」フォルダに保存します。

※ 筆者のように複数送られてくる場合もあるので、その場合はどれでも良いのでどれか１つを保存しましょう
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676215/ad8680f8-5fdb-c276-7f20-0df67ecfbf3b.png)

## ② dSYMsフォルダをコピー
Xcodeを開いて、**Window**から**Organizer**を選択します。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676215/9d6f1faa-cc29-1dcc-e384-bae2444b775d.png)
 

アーカイブ一覧が表示されるので、クラッシュしたバージョンのアプリを選択して、**「Download Debug Symbols」**ボタンを押下します。
※ **「Download Debug Symbols」**を押下しておかないと、シンボリケートする際に`No symbolic information found`と表示されて、シンボリケートに失敗しました。（これで小一時間苦戦しました）
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676215/ce9b59aa-2e96-c849-fdb6-bb8a33f0e757.png)

ダウンロードが終わったら、アーカイブを右クリックして、**Show in Finder**を選択
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676215/69e4c51f-c7a7-a28b-cdff-4e0ac1300895.png)

アーカイブファイルがFinderに表示されるので、右クリックして**「パッケージの内容を表示」**を選択。
**「dSYMs」**というフォルダがあるので**「CrashLog」**フォルダにコピーします。

## ③ クラッシュログをシンボリケートする
シンボリケートする際に、Xcodeに付属している **symbolicatecrash**という実行ファイルを使用します。
Xcode11の場合は下記のパスにあります 

```
/Applications/Xcode.app/Contents/SharedFrameworks/DVTFoundation.framework/Versions/A/Resources/symbolicatecrash
```

1. **symbolicatecrash**ファイルを**「CrashLog」**フォルダにコピーします

CrashLogフォルダは下記のようになります。

```
CrashLog
|-- CrashLog.crash
|-- dSYMs
|-- symbolicatecrash
```

&ensp;
2. ターミナルを開いて**「CrashLog」**フォルダまで移動します。

```
$ cd [CrashLogフォルダまでのパス]
```

&ensp;
3. 下記のコマンドを実行してパスを通します。
これをやらないとシンボリケートの際に`Error: "DEVELOPER_DIR" is not defined at`とエラーになります。

```
$ export DEVELOPER_DIR=/Applications/Xcode.app/Contents/Developer/
```

&ensp;
4. 下記のコマンドを実行してシンボリケートする

```
$ ./symbolicatecrash CrashLog.crash dSYMs/ > symbolicateCrashLog.crash
```


## 結果
symbolicateCrashLog.crash ファイルにシンボリケートされたログ内容が出力されます。

・シンボリケート前
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676215/773a3173-a59f-6fbe-81de-0f817c1d42d8.png)

・シンボリケート後
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676215/fd49eb94-f19a-b489-01a9-ec627d1f03d7.png)

ファイル名・関数名・行数まで確認できるようになりました。
iOS14のDatePickerUIがホイールじゃ無くなっている

## 概要

iOS14でDatePickerのUIがおかしな感じに

iOS13.3
![iOS13.3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317701/ca7e94ca-f4a9-cdd2-796b-5890a5ba1ea1.png)

↓

iOS14
![iOS14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317701/1ad4ebd7-3081-9002-66ae-6f55eb8b1c7b.png)

## 解決方法

解決策がすでにありました。
https://github.com/react-native-datetimepicker/datetimepicker/issues/285#issuecomment-696384701

UIDatePickerのスタイルをホイールでオーバーライドできるらしい...

**AppDelegate.m**の**didFinishLaunchingWithOptions**に下記を追記

``` swift
if (@available(iOS 14, *)) {
  UIDatePicker *picker = [UIDatePicker appearance];
  picker.preferredDatePickerStyle = UIDatePickerStyleWheels;
}
```

react-native-datetimepickerでも同様の対応で問題なさそうです。

## 最後に

カレンダーポップアップかっこいいのでこっちに移行していきたい。
Reactのpropsとは

## 参考
https://qiita.com/anoonoll/items/5cceab8f9cf9cef7dd74


## props
- コンポーネントの属性を保管する
- 基本的に参照されるのみ
- 値を取り出せるが、書き換えはできない

## propsの中身

```
console.log(this.props)
```

- なんかいっぱい値が入っている
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293481/c0374257-e744-3feb-1b5a-100303d09910.png)

## なぜ追加するのか
- super(props)を定義しないと、あとからthis.stateなどで、propsへの追加ができないため


## 使用例

### コード

- `constructor(props)`で定義
- rederする際に、`this.title`などを表示

```src/App.js
import React, {Component} from 'react';
import './App.css';

class App extends Component {

    constructor(props) {
        super();
        this.title = props.title;
        this.message = props.message;
    }

    render() {
        return <div>
            <h1>React</h1>
            <p>{this.title}</p>
            <p>{this.message}</p>
        </div>;
    }
}

export default App;
```

- ReactDom.renderでtitle,messageの中身を定義

```src/index.js
import React from 'react';
import ReactDom from 'react-dom';
import App from './App';

let render = ReactDom.render(
    <App title="App" message="this is App Component!" />,
    document.getElementById('root')
);
```

### 表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293481/e3b0f661-6c59-4143-a8f9-0925df83ba9d.png)
スタックのデータ出力順序

応用情報技術者平成28年春期 午前5

A，B，Cの順序で入力されるデータがある。各データについてスタックへの挿入と取出しを1回ずつ行うことができる場合，データの出力順序は何通りあるか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/468d3c9f-5f65-4e86-2e09-66830cf56f9c.png)

１、A，B，Cの考えられる出力順序：

[A→B→C]
 AABBCC
[A→C→B]
 AABCCB
[B→A→C]
 ABBACC
[B→C→A]
 ABBCCA
[C→A→B]
 ABCCAB　×　Bより先にAを出力できません。
[C→B→A]
 ABCCBA

合せて、５種類です。

参照：
https://www.ap-siken.com/kakomon/28_haru/q5.html
iOSで背景透過

前景（人物など）以外の部分は透けるので、背景合成などに使えます。

![anjyu3P2A6684_TP_V4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/58a343b3-a85c-3cdf-9cd7-2cbf1b2bd5c0.jpeg)　<img width="265" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/c5ffe533-063b-21aa-56f6-81cf3074645e.png">

#手順

###１、マスク画像をつくる。
[アップル公式配布のDeepLabv３モデル](https://developer.apple.com/jp/machine-learning/models/)など、セグメンテーションモデルをつかってマスク画像を取得します。
[こちらの記事](https://qiita.com/john-rocky/items/754cc63eb84b513e2ef2)など参考にしていただければ。

###２、透過画像を作る。
元の画像と同じサイズで透過画像を作ります。
settingAlphaOneの引数では「透過にならない領域」を指定するので、ゼロを指定して全面透過画像を取得します。

```swift

let transparentImage = originalCIImage.settingAlphaOne(in: CGRect.zero)
```

###３、合成する。
前景＝オリジナル画像、背景＝透過画像、マスク画像＝残したいオブジェクトのマスク画像、でCIFilterで合成します。

```swift
let compositeImage = CIFilter(name: "CIBlendWithMask", parameters: [
    kCIInputImageKey: originalCIImage,
    kCIInputBackgroundImageKey:transparentImage,
    kCIInputMaskImageKey:mask]).outputImage
```

背景画像を用意してもう一度合成すると、合成画像ができます。
![名称未設定1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/185bf0a8-4fa4-c811-ebac-06717104d1e7.png)
🐣

****
お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)

[相棒](https://twitter.com/oka_yuuji)
[note](https://note.com/oka_yuuji)
待ち行列モデル M/M/1

応用情報技術者平成28年春期 午前3


多数のクライアントが，LANに接続された1台のプリンタを共同利用するときの印刷要求から印刷完了までの所要時間を，待ち行列理論を適用して見積もる場合について考える。プリンタの運用方法や利用状況に関する記述のうち，M/M/1の待ち行列モデルの条件に反しないものはどれか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/032ccfff-c675-4040-6974-2ef2a10dec5c.png)


１、待ち行列モデル M/M/1では、　（到着／サービス／窓口数）
条件としてトランザクションの到着間隔はランダムであり、待ち行列内のトランザクション数は一定であるとしています。（平衡状態）

つまり、プリンタの処理状況によって処理要求の到着間隔を操作する行為は条件に反するということ。

２、
・一部のクライアントは，プリンタの空き具合を見ながら印刷要求する。
　→×。到着間隔がランダムだから、空き具合を見てみ意味がない

・印刷の緊急性や印刷量の多少にかかわらず，先着順に印刷する。
　→○。
　
・印刷待ちの文書データがプリンタのバッファサイズを超えるときは，一時的に受付を中断する。
　→×。よく分からない。だが、空き具合を見ていると同じですね。

・一つの印刷要求から印刷完了までの所要時間は，印刷の準備に要する一定時間と，印刷量に比例する時間の合計である。
　→×。印刷要求から印刷終了までの所要時間は、
　　　・プリンタに印刷要求を出してからプリンタが他の印刷要求を処理するのを待つ時間と、
　　　・自身の印刷要求が処理される時間の合計です。


参照：
https://www.ap-siken.com/kakomon/28_haru/q3.html
Seleniumを使ったスクレイピング

自動化をしたいなと思っていて、色々調べたのですが、どうやら事前に作った人がいるみたいですが、正直まだまだプログラミング初心者なので、何を書いているのかが分からない。

ということで、今回は自動化を自分でできるようにするために`selenium`を使って勉強しました。

# 実行環境
* MacOS
* python3.7.6(anaconda)
* VSCode

# 今回参考にした記事
[【selenium】python初心者がインスタ自動いいねツールを勝手に改修した話](https://qiita.com/mochidamochi/items/d93b5cc4cf764d1bef41)
[【Python x Selenium】Instagramでタグ検索し、取得した写真にすべていいねできる自動化ツールを作成しました](https://review-of-my-life.blogspot.com/2017/12/selenium-instagram.html)
[【Python】Seleniumの使用方法メモ](https://qiita.com/motoki1990/items/a59a09c5966ce52128be)
[Python + Selenium で Chrome の自動操作を一通り](https://qiita.com/memakura/items/20a02161fa7e18d8a693)
[PythonでSeleniumを使ってスクレイピング (基礎)](https://qiita.com/kinpira/items/383b0fbee6bf229ea03d)

# つまった場所
chromedriverをダウンロードしてきて、python上で使おうと思ったのですが、なんか開発元が分からないからという表示が出て使用できませんでした。

なので、今回は`chromedriver_binary`を使用して、使える状態にしました。

```
$ pip install chromedriver-binary
import chromedriver_binary
```
これで使えるようになりました。

# 知らなかった知識のメモ
#### seleniumとは
seleniumとはwebアプリケーションの画面操作を自動化するためのツールです。
また、webの自動テストに用いられたり、スクレイピングに用いられたりします。

ここで、`スクレイピング`と`クローリング`の違いですが、2つともweb上のデータを収集することなのですが、
スクレイピングとは処理しやすいように加工してweb上のデータを収集することで、クローリングは単にweb上のデータを収集することをいうみたいです。

# まとめ
まだ、全然自動化には至っておりませんが、これから勉強して自動化を自分でできるようになりたいなと考えております。
オートスケール（Amazon EC2 AutoScaling）の導入判断ポイント

既存のシステムに対してこれからAmazon EC2 AutoScaling（以降はAutoScalingと記載）を導入するシステム運用者向けに導入判断のポイントについて書きたいと思います。


## オートスケール（AutoScaling）の導入判断ポイント

この記事を読むとオートスケール導入すべきかどうかの判断ポイントが分かります。

オートスケール導入のメリットは何となく想像できると思うのですが、

* 突発的なアクセスや（キャンペーンなど）予測されるアクセス時の対応

* 手動スケール運用の工数削減

* コスト（AWS利用料）削減

大体この３つだと思います。

デメリットはオートスケール導入や運用にかかる工数（大変さ）です。
クラウドなら簡単に導入できると思われているのか
「うちのシステムをオートスケール化しといて。すぐできるでしょ？」
と頼まれたのですが、躓きポイントがありました。

一般的にはメリデメを比較して導入するかどうかを判断すると思います。
本記事ではAutoScaling導入工数や導入後に発生する工数について記載しています。

※AutoScalngの機能については書きません。（基本的には思った通りに動いてくれましたので、、）

## AutoScaling導入工数や導入後に発生する工数

### アプリケーションリリース
リリース自動化がされているかどうかで運用工数が変わります。
自動化されていない場合はリリース毎に以下の運用が発生します。

* リリース完了後に最新のAMIを取得
* オートスケールに利用するAMIを最新に更新

### ログ収集
ログ収集の仕組みにサーバ固有の設定（ホスト名など）がある場合はUser Dataで比較的簡単に設定ファイルの更新が可能ですが、ログ収集先にサーバ固有の設定がある場合は大変かもしれません。
設定ファイルにサーバ固有の設定がないか、あった場合はその設定を排除できないか確認しておきましょう。


### 監視

自動で監視設定追加する機能があるのが理想ですが、
そういった機能が無い監視製品ではオートスケールされたサーバの監視設定は以下のように行います。

* スケールアウト時はUser Dataで監視設定を追加
* スケールイン時はAutoScalingのライフサイクルフック機能を利用して、監視設定削除を実施

### ジョブ

監視と同様でスケールアウト、スケールイン時に設定を追加する処理を検討する必要があります。

### オートスケール対象サーバ

ELBのヘルスチェックだけでサービスインしてよいか判断できるかどうかで導入工数が大きく変わります。
ヘルスチェックだけではサービスインしてよいか判断できない場合は、User Dataで
サービスの正常性をチェックする必要があります。

又、サーバ固有の設定がある場合は、User Dataでの設定が必要になります。

## まとめ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311339/bbf6ad0f-f530-0cc2-6864-647c55fb135d.png)

AWS Well-Architectedの設計の原則に沿っていれば上記の面倒な設定や運用は発生しません。
監視やジョブは自動で設定が行われ、オートスケール対象サーバに固有設定が無く、リリースの自動化が実現されていることがクラウド設計の原則です。

設計の原則に沿っていないシステム（月間100万PV以上の大手ECサイト）に
オートスケールを導入した経験を纏めさせていただきました。

オートスケール導入工数の見積に活かして頂けたら幸いです。
Firebase Local Emulator における config の設定

Firebase の functions や hosting を書いて毎回デプロイして動作を確かめるのは大変です。
Firebase には Local Emulator があり、すぐにローカルでコードの動作を確かめることができます。

コードとしてレポジトリに含めたくない情報は config として環境変数のような形で実行時に読み込むようにするのですが、Local Emulator ではハマりどころがあったので共有します。

## 通常の config 設定

アプリ名を `your-application-name` だとすると、以下のように key value を設定します。

```shell
$ firebase functions:config:set your-application-name.key=dummykeystring
```


## Local Emulator では読み込めない

上記のように config:set した設定は下記のようにシェルコマンドからは呼び出せました。

```shell
$ firebase functions:config:get
{
  "your-application-name": {
    "key": "aaaaaaaaaasadfffffffffffffffreewfdsdsf"
  }
}
```


しかし以下のようなコードにおいて、 Local Emulator 上では呼び出せませんでした（確か undefined だったと思います）。
一方でデプロイした先のFunctionsからは値を取得することができました。

```Typescript
import * as functions from 'firebase-functions';

export const showTrigger = functions.https.onRequest((request, response) => {
    const apiKey = functions.config()['your-application-name'].key;
    console.log('apiKey') // undefined
});
```

## Local Emulator でも読み込めるようにする

以下のようにして .runtimeconfig.json に同様のものを入れておくとうまくいきました。

```
$ cd functions/
$ firebase functions:config:get > .runtimeconfig.json 
```

ただし、このjsonファイルがGitHub上などに上がってしまうと問題があるので、gitを使っている場合には .gitignore などに該当ファイルを入れるのを忘れないようにしましょう。


## 参考
公式: https://firebase.google.com/docs/functions/local-emulator#serve_http_functions_from_the_command_line

ググって引っかかった記事: https://stackoverflow.com/questions/54689871/set-firebase-local-emulator-cloud-function-environment-config-values

## 言い訳

公式ドキュメントにもちゃんと書いてあるのに微妙にハマりました。

> 関数を設定する（省略可）

`省略可`と書いてあったので最初のデプロイをして動くまではセクションごと無視していたのでした。

> カスタム関数の構成変数を使用している場合は、最初にローカル環境でカスタムの構成を取得するコマンドを実行します（functions ディレクトリ内で実行します）。

この設定できる変数は `構成変数` と呼んでいるようです。普段ランタイムだけで使う変数は `環境変数` みたいな呼び方をすることが多いので最初ざっと読んでいる時には気がつかなかったのでした。
【10行】Javascriptで与えられた日の週の月曜を出す

```javascript

<html><body>
<script>

var date = new Date();
while(true) {
	if(date.getDay() == 1) break;
	date = new Date(date.getFullYear(), date.getMonth(), date.getDate() - 1);
}

document.write(date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate());

</script>
</body></html>
```
typescriptで、filterの型推論でnullが除去できない

typescript初心者です
filterの型推論で実装と差が出て、少し戸惑ったのでメモ

※追記 @sdkeiさんからご指摘いただき修正いたしました。ありがとうございました:bow:

## 問題
数値とnullが混在した配列からnullを除去することを考える

```typescript
const numList = [0, 1, 2, null, 3].filter((x) => x !== null);
```

このときnumListの型推論はは`number[]`になって欲しいが、`(number | null)[]`になってしまう

## 解決法
`T[].fillter(predicate: (value: T, index: number, array: T[]) => boolean): T[]` の返り値の型は`T[]`型となるので、型推論できない
型アサーションを使って型を指定する

```typescript
const numList = [0, 1, 2, null, 3].filter((x) => x !== null) as number[];
```

numListの型は`number[]`になる
iMac 27" Late 2013 のHDDを交換したのでメモ

妻のiMacが調子悪いというので、あれこれ迷わずHDDをSSDに換装しました。経験談をシェアします。

## 環境

3人家族にMacは6台という一般的な世帯です。そのうち最新、最大、最強のiMac 27" Late2013（妻の嫁入り道具だった）を今回、SSDに換装します。Fusion Drive ではない、HDD 単騎のものです。

## 買ったもの

SSD 500GB https://www.amazon.co.jp/gp/product/B07SM7YJ4F/
2.5→3.5アダプタ https://www.amazon.co.jp/gp/product/B0045FK6E6 （使わなかった）
HDDスタンド https://www.amazon.co.jp/gp/product/B01MQ128I5 （使わなかった）
ピザカッター （ダイソーにて）

## 内部へのアクセス〜HDD取り外し

iFixitの他、洋の東西を問わず動画が多く公開されているので、それを参考にしました。スクリーンが両面テープで接着されているので、ドライヤーで温めたり、ピザカッターで剥がしたりする工程がなかなか面倒です。

私の場合は金属製のピザカッターを使ってしまったのですが、これは失敗でした。スクリーン裏側の黒い塗装が剥げてしまい、もとに戻したとき気になる傷として残ってしまいました。ペイントマーカーで修復可能でしたが、金属製のピザカッターは使うべきではありませんでした。

## 2.5SSD取り付け

アマゾンで買ったアダプタは私の場合、使用できませんでした。うちのiMacの場合、ケーブルのコネクタが「Ｊ」の字型になっており、コネクタの反対側へケーブルを出す感じに接続するわけですが、もとのHDDのコネクタ高さとSSD＋アダプタのコネクタの高さが合わなくなり、取り付けできませんでした。

ここで接着することも試みましたが、軽いものだし、ディスプレイを振ってもカタカタ言わない感じに寝かせておけるようでしたので、妻には黙って、宙ぶらりんの状態にしておきました。

HDDのみの場合は温度センサが必要とのことで、それ用のアダプタも売られてはいますが、けっこうなお値段だったので私は付けませんでした。今のところ問題は出ていません。

## TimeMachine からの復旧

わざわざHDDスタンドまで買ったのですが、元のHDDより小さいSSDを調達してしまったので、クローンの作成はせず、TimeMachine からのリカバリを行いました。

### Snow Leopard に睨まれる

まっさらのSSDにOSXのインストールから作業は始まります。ずいぶん久しぶりに Snow Leopard と会いました。こっち見んな！って顔してるので、あまり好きではないのです。

### TimeMachine からの復旧でダンマリになる

TimeMachine からのリカバリでは基本的に OSX のバージョンを合わせる必要があるらしいですね。知らなかったのでやってみたんですが、10.14 のバックアップを 10.7 へ突っ込むことはできませんでした。現象としては、リカバリの最終段階でダンマリとなりました。

### まずは El Capitan

まず一旦は El Capitan まで上げないと、それ以降の OSX には上げられないみたいですね。

### そして TimeMachine からのリカバリ

手順どおりなら Mojave まで上げてから、ということになるようですが、El Capitan の関所を超えていれば大丈夫だろうという読みから、ここで TimeMachine からのリカバリを試しに行ってみました。結果、成功しました。

## 妻のリアクションが薄い

いちGeek としては、どうだ速くなったろう？とドヤ顔で成果を認めてもらいたいところでしたが、期待したようなリアクションを得ることはできませんでした。

最後までお読みいただきありがとうございました。誰かの参考になれば幸甚です。
Nuxt.js【vuexテスト編】

## 概要

vuexをTypeScript + nuxt-typed-vuexで開発している際のテストコードのサンプルです。

- [Vue Test Utils](https://vue-test-utils.vuejs.org/ja/guides/using-with-vuex.html)
- [nuxt-typed-vuex](https://github.com/danielroe/nuxt-typed-vuex)
- [Jest](https://jestjs.io/ja/)


**設定についてはこの記事を参考にしてください**
=>[【プロジェクト設定編】](https://qiita.com/ovama-koffee/private/d93a51076f310cca6e47)

### Store
```store/index.ts
import { getAccessorType } from 'typed-vuex'
import * as user from '@/store/user'

export const state = () => ({})

export const getters = {}

export const mutations = {}

export const actions = {}

export const accessorType = getAccessorType({
  state,
  getters,
  mutations,
  actions,
  modules: {
    user
  },
})

```
```store/user.ts
import { getterTree, mutationTree, actionTree } from 'typed-vuex'

export const state = () => ({
  name: '',
  age: 0,
})

export type RootState = ReturnType<typeof state>

export const getters = getterTree(state, {
  name: state => state.name,
  age: state => state.age,
})

export const mutations = mutationTree(state, {
  setAge(state, age: number): void {
    state.age = age
  },
  setName(state, name: string): void {
    state.name = name
  }
})

export const actions = actionTree({ state, getters, mutations }, {
  async greet({ getters }): Promise<string> {
    const { name, age } = getters
    return `I’m ${name} ${age} years old.`
  }
})

```

### Test
```store/user.spec.ts
import { useAccessor } from 'typed-vuex'
import Vuex, { Store } from 'vuex'
import Vue from 'vue'
import { state, getters, mutations, actions, accessorType } from '@/store'
import * as user from '@/store/user'

describe.only('store/user', () => {
  const pattern = {
    state,
    getters,
    mutations,
    actions,
    modules: {
      user
    },
  }
  let accessor: typeof accessorType

  beforeEach(() => {
    Vue.use(Vuex)
    const store = new Store(pattern)
    accessor = useAccessor(store, pattern)
  })

  test('mutationsのテスト', () => {
    expect(
      accessor.user.name
    ).toEqual('')
    accessor.user.setName('test')
    expect(accessor.user.name).toEqual('test')
  })

  test('actionsのテスト', async () => {
    const name = "test";
    const age = 20;
    const greet = `I’m ${name} ${age} years old.`;

    accessor.user.setName(name)
    accessor.user.setAge(age);

    const result = await accessor.user.greet();

    expect(result).toEqual(greet)
  })
})

```

## 感想
actionsがPromiseを返すので、そこがハマりポイントでした。^^;
本日の『railsチュートリアル』で詰まったところ(2020/10/04)

<h1>はじめに</h1>
本日からrailsチュートリアルを始めました。
自分の詰まったところを後から見返すために、Qiitaに覚書を残していきます。
Qiitaで執筆すること&マークダウン記法で執筆することも初なので、書き方に難がある場合は指摘いただけるとありがたいです。
基本的に環境はrailsチュートリアルに従い、Cloud9を使用しています。

<h1>詰まったところ</h1>
<h2>1.2.1 開発環境</h2>
･事象: Cloud9登録時、railsチュートリアルに記載のない設定画面が表示される。
･解決: デフォルトのまま登録して問題なし。

<h2>1.3.2 rails server</h2>
･事象: [rails server]実行後、[preview running application]をクリックしても接続が拒否されてブラウザでページが表示されない。
･解決方法: 右上の[Pop out in new window]をクリックして別ウィンドウにすることで表示できた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764452/844943e5-d8d8-bd1a-1151-e135ae37e2a8.png)

<h1>本日のまとめ</h1>
･進捗: 1章 1.1〜1.3読了
･日時: 2020/10/04(日) 13時〜16時

･感想: 
Progateによる事前学習を必要とするという文言を見かけたのでびくびくしながら始めたが、ドットインストールにおいてhtml, css, JS, UNIXコマンドなどの基礎を勉強していたため、導入で躓くという事態は避けられた。
Rubyに関しては全く知識がないため、詰まったらドットインストールに頼ろうと思う。

P.S. カフェでの勉強は集中できるが、体を動かせないことが非常に辛い。途中でどこかに出かけたり戻ってきたりできる環境を探す必要があるかもしれない。
また、ノートPCでの作業は首に悪いので、スタンドの購入を早期に検討する必要がある。
Powershellで外部APIファイルを参照して使用する。

PowershellでAPIを記述した外部スクリプトファイルを参照して使用するメモ

```
## ソースファイルディレクトリを取得
$srcPath = $PSScriptRoot
# PS2.0以前の場合
# $srcPath = $MyInvocation.MyCommand.Path -Parent

## カレントディレクトリを設定
Set-Location $srcPath
## API記述スクリプトファイルを参照
. "./src/API_src.ps1"

```
PlantUML のクラス図がプレビューできない問題を解決する

# PlantUML のクラス図がプレビューできない問題を解決した。

環境：windows10, Visual Studio code

1. java（jre）をインストールする。
2. GraphViz をインストールする。
3. PlantUML を Visual Studio Code の拡張機能で追加する。
4. vs code を再起動する。

以上で、PlantUML を利用できる。はず。
また、GrapthViz は、Windows に、PlantUML は VS Code にインストールしてます。

あと、PlantUML のファイルから画像をエクスポートする時、エラーが無いのに、いつまで経っても画像が生成されない時は、

+ wsd ファイルがあるワークスペースかフォルダを開く
+ 開発者を信頼する

と上手く行くかも
FlutterでQiita Jobs 求人一覧を再現してみました


前回はQiita Jobsの求人をPythonで取得し、ちょっとしたデータ分析を行ってきました。

[Qiita Job 求人を分析してみた件](https://qiita.com/Benzenoil/items/b6fc66e2a3f51d42808f)

今回はそのデータを持って、今あるQiita jobsをFlutterで再現してみました。Flutterの経験がまだ少ないので、設計の面を大目に見ていただけると幸いです。



## 出来上がり

公式サイトの一覧とフィルターは大体こんな感じです。

<div align="center">
<img width="600" alt="qiita-job-raw-1.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457921/7712378a-4b77-bb68-e837-f56a28f5e9fe.jpeg">
</div>

<div align="center">
<img align="center" width="400" alt="qiita-job-raw-2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457921/299e8fc5-13ef-5041-1b22-f0bc1fa1058d.png">
</div>

### 再現の感じ

公式サイトの一覧には画像と「気になるボタン」と「画像」については、こちらの目的とやや無関係なため、なくしました。

画像表示したければ、静止画をAWS S3に保存し、CloudFrontで加速することで行ける気がします。

公式サイトによると「気になる」は、求職側と採用側に「作用」するので、そこまで再現する必要がないと思いました。
<div align="center">
<img align="center" width="460" alt="Qiita job overview.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457921/158cb5f4-bf8c-f81e-47fa-2ab793bbeff8.gif">
</div>

### フィルター機能

公式サイトの一覧確認でできる「利用技術」と「職種」で絞り込み以外に、勤務地のフィルターも追加しました。
<div align="center">
<img align="center" width="460" alt="Qiita job filter 1.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457921/5dad498c-525b-0264-34c6-8a68264cc74a.gif">
</div>

### 詳細閲覧

今回はそれぞれの求人の詳細を取得していないため、新たなタブを開き、Qiita jobsの公式ページにリンクさせていただきました。

<div align="center">
<img align="center" width="460" alt="Qiita job openurl.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457921/990efca5-3ee7-39e8-67aa-5bcde37b7838.gif">
</div>

### 結果なし

結果がなければ、何も表示しないのが普通？かもしれませんが、それですと、今までの表示履歴がなくなるので、Dialogで結果がないことを知らせることにしました。

<div align="center">
<img align="center" width="460" alt="Qiita job no result.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457921/052022f4-1d90-d351-5945-3aca8683a2db.gif">
</div>

## 所感

再現することにあたって、最も困難なところはFlutter WebとFirebaseの連携＆使用だと思います。

Flutterには、Android、iOS、Web同時開発できますが、Firebaseとの連携においていまいちだと思います。

今回はFirebaseのFirestoreに保存したデータをget, query, filter などにをするに苦労しました。それらを解決するにはもちろん**公式ドキュメント**や[FlutterFire](https://firebase.flutter.dev/)が一番の選択肢だが、他に特に参考になったURLはGoogleと[こちら](https://petercoding.com/firebase/2020/04/04/using-cloud-firestore-in-flutter/)です。

どうしてもない場合、サンプルデータでTry＆Errorでやってきました。その中でも記憶にあるのは、

- ページ化（Pagination）
- フィルター機能(Filter)

があります。

 
## 改善点と今後

今回は極一般的な機能を作成してみました。このほかにまだまだ追加できそうなものもあります。

- Filterの機能を豊富にする

  年収範囲、複数の技術選択などを追加する

- Full-text search

  全文サーチは[公式サイト](https://firebase.google.com/docs/firestore/solutions/search)に確認したところまだ公式対応はないみたいが、Algoliaなどのsearch serviceを利用することでできるとのことでした。

- AWS Lambda, SES, API gatewayなどのクラウドサービスを使用して気になった勤務地、技術の求人があった場合のメール連絡もできる気がします。
- などなど
Pythonテンプレートエンジンempy

# empyのインストール
```bash
$ pip install empy
```

# サンプル
## テンプレートファイル
```xml:source.xml.tmplate
<?xml version="1.0" ?>
<sample>
@[if options['output_aaa']]@
  <aaa>
    <value>@(my_value)</value>
  </aaa>
@[end if]@
</sample>
```
## 実行ファイル
```python:expand.py
import em

if __name__ == '__main__':
    template_data = {}
    template_data['options'] = {'output_aaa': True}
    template_data['my_value'] = 10
    with open('sample.xml.template', 'r') as f:
        data = f.read()
        expanded = em.expand(data, template_data)
    with open('sample.xml', 'w') as f:
        f.write(expanded)
```
## ファイル生成
```bash
$ python expand.py
$ cat sample.xml
<?xml version="1.0" ?>
<sample>
  <aaa>
    <value>10</value>
  </aaa>
</sample>
```
【Python】メモ　エラーについて


```
TypeError: 'XXXX' object is not iterable
```
繰り返しに使えないオブジェクトを繰り返し処理で使っているというエラー

```
SyntaxError: unexpected character after line continuation character
```
行継続文字（line continuation character）の後ろに予期されない文字がある

```
EOFError: EOF when reading a line
```
データを読み込もうとしたけど、そのデータが無いよ。　というエラー

```
TypeError: int() argument must be a string, a bytes-like object or a number, not 'range'
```
int()の引数は文字列かバイト列、数値でなくてはならない。リストじゃダメよ。というエラー



※随時更新する
pyhtonでYoutubeデータを取得する

# はじめに

pyhtonでvideoIdを指定して再生回数などのYoutubeデータを取得する方法として google-api-python-client を使う方法をよく見かけます。
ここでは、その方法ではなく requestsを使ってhttpsで取得する方法でやってみました。

Youtube Data APIのAPIキーは取得済みとします。
# URLの形式

以下のURLの形式でYoutubeデータを取得できます。
`www.googleapis.com/youtube/v3/videos?part=statistics&id=★ID★&fields=items%2Fstatistics&key=★APIキー★`

ID ... videoId
APIキー ... Youtube Data APIのAPIキー

# 返却値

結果はJson形式で以下のような形で返ってきます。
`{'items': [{'statistics': {'viewCount': '267', 'likeCount': '3', 'dislikeCount': '0', 'favoriteCount': '0', 'commentCount': '0'}}]}`
再生回数(viewCount)だけを取得したい場合は
res に結果が入っているとして以下で取得できます。
`count = res["items"][0]["statistics"]["viewCount"]`

# サンプル

```python:sample.py
#!/usr/bin/python
# -*- coding: utf-8 -*-
import requests
import json

base_url = "https://www.googleapis.com/youtube/v3/videos?part=statistics&id={}&fields=items%2Fstatistics&key={}"

api_key  = "xxxx"
id = "xxxxx"
url = base_url.format(id,api_key)
res = json.loads(requests.get(url,verify=False).text)
count = res["items"][0]["statistics"]["viewCount"]

print(count)
```

# 確認環境
Windows10 
Python 3.7.0
GithubからCloud9(Rails)

0. Githubからクローンしてくる
1. bundleのインストール
2. skillhub(source~,yarn install --check-files, rails webpacker:install) 
2. データベース作成
3. サーバー起動
ex. エラーについて（内容と対策）

Githubからクローンしてくる
それでは、まずGithubからクローンしてきましょう。
githubでソースコードのURLを確認して、以下のようにコマンド入力しましょう。

```
$ git clone [クローンするソースコードのURL]
```
 bundleのインストール
上記にてクローンは完了しましたが、アプリケーションをgitからクローンしてきただけなのでサーバーを立ち上げようとすると、エラーが起きてしまいます。
まずはアプリケーションを自分のローカル環境で実行することができるようにするために、bundle installをしましょう。

```
$ bundle install
```

１．YARNのダウンロード
以下のコマンドを打ち込みます。このコマンドで必要なファイルのダウンロードまでを行ってくれます。

```
$ source <(curl -sL https://cdn.learnenough.com/yarn_install)
```

２．YARNをインストールする
以下のコマンドでyarnをインストールしてください。

```
 $ yarn install --check-files
```

３． WEBPACKERをインストール

```
 $ rails webpacker:install
```

2. データベース作成
データベースを作成しましょう。
下記コマンドによってconfig/database.ymlの設定に基いてデータベースが作成されます。
＊私は過去にここでつまづきました笑もし興味ある方はご参照ください。
[初歩的ミス]データベース作成でつまづいた時の話ー原因から解決まで

```
 $ rails db:create
 $ rails db:migrate
```


#fsff
Nginx locationの書き方 種類と優先度

# はじめに
はじめまして、youtuber系エンジニアのやっすんです！

今回は、locationの優先順位に関する以前の補足記事です。
https://qiita.com/yassun-youtube/items/520956830b2512e2eb5b

Youtubeにも説明動画があるので、確認してみてください！

[【YouTube動画】locationの書き方 補足](https://youtu.be/Wf0BJMbkyV4)
[![locationの書き方 補足](https://img.youtube.com/vi/Wf0BJMbkyV4/0.jpg)](https://www.youtube.com/watch?v=Wf0BJMbkyV4)


# locationのフローチャート
locationの優先順位は表にすると混乱するので、フローチャートにしました！

勘違いしやすいのは、前方一致ありで、最長一致として識別子なしが該当する場合です。
この場合、正規表現が1つでも該当すると、どんなに識別子なしのパスが一致していようとも、正規表現が優先されます！！

![locationのフローチャート (3).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/9f626b15-5596-3665-df45-20c7f892b0b1.jpeg)


# 例
例えば、以下の場合を考えます。
URIで/testingを検索してみます。

= はないので、前方一致の有無を確かめます。

前方一致には、識別子なしの /testing と ^~ /test があります。
この場合、最長一致で識別子なしの /testingが優先されます。

次に正規表現の有無を確かめます。
正規表現 ~ /te があるので、識別子なしは無視されます。

結果として、/testingでアクセスすると、location ~/teの処理に進みます。

```default.conf
location /testing {...}
location ^~ /test {...}
location ~ /te {...}
```


# まとめ
今回、[以前紹介したlocationの書き方](https://qiita.com/yassun-youtube/items/520956830b2512e2eb5b)を補足しました！
フローチャートを見ながらやれば、間違えずに出来そうですか？

何か質問や感想があれば、コメントお願いします！

[twitter](https://twitter.com/yassun_youtuber)や[youtube](https://www.youtube.com/channel/UCajrdoGzHzDogrNrLYYmGsg/featured?view_as=public)でのコメントもお待ちしています！
GCPの学習とACE (Associate Cloud Engineer)取得


#はじめに
業務でGCPの案件に携わる機会があるため、理解を深めるために学習しました。
普段はAWSのサービスに触れる機会の方が多いため、サービスの違いがどこにあるか等少し気になっていました。
せっかく学習するので、理解の一定基準として、ACE(Associate Cloud Engineer)資格の取得を目標において学習をしました。
以下、学習の流れのまとめです。
#使用した教材
公式ドキュメントの理解が全てではありますが、私は公式ドキュメントから入ると頭に入りにくいため、以下の流れで学習を進めました。

### 書籍
- Google Cloud Platform　エンタープライズ設計ガイド
- GCPの教科書

2冊ともAWSとのサービス比較をしてくれているので理解しやすかったです。特に、GCPの教科書はハンズオン形式で進めれるところもあって理解が深まりました。

### Youtube
- [B12【Cloud】Google Cloud Platform を始めてみよう：GCP初心者向けのガイド](https://www.youtube.com/watch?v=xGzWnM3fvV4&t=174s)
- [B13【Cloud】Cloud Spanner 101: Google でも使っている リレーショナル データベース](https://www.youtube.com/watch?v=AXY7g4Ou5MY)

GCPの基本的なサービスの解説を行ってくれる動画になっていて、説明がわかりやすいですし、Google Developers Japanが制作している動画になりますので、信頼度100%です。

###Udemy
-  Udemy「現役エンジニアが教える、手を動かして学ぶGoogle Cloud Platform(GCP) 入門」


タイトルのとおり、ハンズオン形式の学習なので非常に取り組みやすく、コンパクトにまとめられているので、すぐに終わりますし、やった感が得られます。

###公式ドキュメント

[GoogleCloudドキュメント](https://cloud.google.com/docs?hl=ja)

こちらについては、全部に目をとおしたわけではなく、気になったサービスがあればその都度見た感じです。


## 試験対策
- [試験範囲](https://cloud.google.com/certification/cloud-engineer?hl=ja)
- [模擬試験](https://docs.google.com/forms/d/e/1FAIpQLSc7bkUHpDbFShBI5xE4u8OO2vl99DrP0htnswa-la9DQynToA/viewscore?hl=ja&viewscore=AE0zAgCkw2_saHReQ2oNHXoEkJAoyx1XJx_D3xNl1joyCwMET4xeUxE-BrPsv0DUMEOO04c)
- Udemy問題集(日本語/英語)

模擬試験は、無料で何度でも受験できますし、解説付きなので非常良かったです。~~AWSも同じ仕様だったら最高なのにな~。特に解説とかは理解深めるためにも是非欲しい。~~
Udemyの問題集は日本語版と英語版がそれぞれあるのですが、英語版がオススメです。実際の試験は英語版のレベルに近かったです。私は英語苦手なので全ページGoogle先生に翻訳してもらいましたがw


##おわりに
学習初めて1ヶ月程度ですが、無事ACEを取得しました。AWSに知見がある程度あれば、それほど難しい内容ではないと感じました。
私の周りで受験された方も、AWS試験のCLFとSAAの間くらいの難易度だったとの声があり、私としても同様の印象でした。
これからGCPの学習を始められる方、またGCP資格試験を予定されている方の参考になれば幸いです。

少しでも現場での業務の役に立つといいな。。。

![スクリーンショット 2020-10-04 14.36.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438093/1ce23f11-663a-9132-c232-6c7afc2dc43e.png)
xNormalでios_base::failbitというエラーが出た

# xNormalでios_base::failbitというエラーが出た

xNormalを使うと、ハイポリゴンからローポリゴンへ手軽にテクスチャをベイクできて便利です！

今回、以下のようなエラーが出ました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/473b3678-6393-52ac-3bcb-90edd6529189.png)

```
ios_base::failbit set: iostream stream error.
```



# 原因は出力先のフォルダーがなかっただけ

原因を調査したところ、以下の記事を見つけました。

[polycount / XNormal Streaming Error](https://polycount.com/discussion/172172/xnormal-streaming-error)

こちらによると、出力先のフォルダーがない場合に同じエラーが発生するとのことです。

以下の図の赤枠が出力ファイルのパスですが、たしかにフォルダーがありませんでした！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/51411072-459d-2ad9-3371-adb1d92ed922.png)

フォルダーを作ってみたところ、ちゃんと出力できました！



# 最後に

本記事作成にあたり、以下の記事を参考にさせていただきました！ありがとうございました！

- [polycount / XNormal Streaming Error](https://polycount.com/discussion/172172/xnormal-streaming-error)
- [xNormal でノーマルマップ(など)をベイクする](https://manabuokajima.hatenablog.com/entry/2018/04/24/150442)
- [xNormalの導入](https://qiita.com/housakusleeping/items/62b7805b1e07c87fe9cd)
Google Fontsで色んな字体を使おう

大学生のプログラミングコミュニティ
GeekSalon(https://bit.ly/2M64LXd) の名古屋メンター吉田です！

デザインで色んな字体を使いたい方へ、Google Fontsの使い方を紹介します！
####Google Fontsとは
代表的なWebフォントサービスのひとつで、ダウンロードなどの必要がなく無料で使えるのが大きな利点です。

##使い方
こちらのurl(https://fonts.google.com/) からアクセスし、使いたいフォントを選びます(今回はこのLobsterを使います)。![](http://res.cloudinary.com/dzsu5uey2/image/upload/v1601791260/iqyykmzsv5rr3rgjov31.jpg)フォントが決まったらクリックし、`+select this style`を押すと下図のように右側に出てくるので、Embedでhtmlとcssのコードを確認します。
![](http://res.cloudinary.com/dzsu5uey2/image/upload/v1601792256/zhobbnnppyd8weefnvhy.jpg)
htmlのコード`<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">`を自分の開発しているhtmlの`<head></head>`の間に貼りましょう。GeekSalon受講生の方はapplication.html.erbにあります。

cssのコード`font-family: 'Lobster', cursive;`も同様で、適用させたいセレクタに書きましょう。

##日本語のフォントを使いたいとき
Lobsterなど、最初から出てくるフォントには日本語が適用されにくい場合もあるので、その場合はLanguageからJapaneseを選択しましょう。
以上で終了です！
Pythonで仮想環境を作ろうとしたら上手く行かなかった件

# 環境
- windows
- VS Code

# 今回出たエラー
```
virtualenv my_python_env
```
と打って仮想環境ディレクトリを作成することはできていたのですが、

```
.\my_python_env\Scripts\activate.bat
```

と打ってアクティベイトしようとしても、

```
.\my_python_env\Scripts\activate.bat : The term '.\my_python_env\Scripts\activate.bat' is not recognized as the name of a cmdlet, 
PS C:\Users\--\Documents\programming\Sakai\my_python_env\Scripts> cd..
PS C:\Users\--\Documents\programming\Sakai\my_python_env> .\Scripts\activate.bat
PS C:\Users\--\Documents\programming\Sakai\my_python_env> .\Scripts\activate.bat
PS C:\Users\--\Documents\programming\Sakai\my_python_env> .\Scripts\activate.bat
PS C:\Users\--\Documents\programming\Sakai\my_python_env> .\Scripts\activate.bat
PS C:\Users\--\Documents\programming\Sakai\my_python_env> cd..
PS C:\Users\--\Documents\programming\Sakai> cd .\my_python_env\   
PS C:\Users\--\Documents\programming\Sakai\my_python_env> .\Scripts\activate
.\Scripts\activate : File C:\Users\--\Documents\programming\Sakai\my_python_env\Scripts\activate.ps1 cannot be loaded       
because running scripts is disabled on this system. For more information, see about_Execution_Policies at
https:/go.microsoft.com/fwlink/?LinkID=135170.
At line:1 char:1
+ .\Scripts\activate
+ ~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : SecurityError: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

```

という風にエラーが出て上手く行きません。
調べても理由が分からずかなり困っていました。

# 解決
本当にたまたまなのですが、powershellからcommand promptにdefault shellを変えたところ普通に解決されました。
理由は全然わかりませんが、同じ問題で訳も分からず悩んでいる方のためにシェアします。
理由が分かったらまた更新します。
Basic認証の導入の仕方

【概要】
----------------------------------------
<b>1.結論</b>

<b>2.Basic認証とは</b>

<b>3.Basic認証の導入方法</b>

<b>4.開発環境</b>



1.結論
----------------------------------------
<b>authenticate_or_request_with_http_basicメソッドで、環境変数を設定し、vim ~/.zshrcで設定した後に、再度ターミナルで環境変数を設定</b>する！

<br>
2.Basic認証とは
----------------------------------------
HTTP通信規格にもともとある、ユーザー認証（IDとパスワードを入力）のことです。デプロイすると全員が見ることができるのでユーザー名/パスワードを知っている人しか見れないようにします！
<br>
3.Basic認証の導入方法
----------------------------------------
❶authenticate_or_request_with_http_basicメソッド(Railsのメソッドです)を使用し、username/passwordを設定します。before_actionで事前に行うようにしています。環境変数なので"@@@@""〜〜〜〜"(一緒の名称の意味を避けるために@@@@と〜〜〜〜に分けています）はユーザー名/パスワードの中身ではなく中身を入れるための名前をつけます。動作を確認したい場合は"@@@@"の部分に名称ではなく中身の好きな数字文字を入れるとrails s をした際にすぐに反映されます！

```ruby:app/controller/application_controller

before_action:basic
  def basic
    authenticate_or_request_with_http_basic do |username, password|
    username == ENV["@@@@"] && password == ENV["~~~~"]
    end
  end
```

❷ターミナルで"vim ~/.zshrc"を入力した後に、❶でつけた名称を元にユーザー名/パスワードの中身を入力していきます。❶で中身を書いてしまうとGithubでユーザー名/パスワードを晒してしまうのでこの知識がある人にパスワードを公表していることになります。"****""XXXX"は一緒のものにしないようの便宜上、分けています。

```terminal
#macOS Catalinaの場合

$ vim ~/.zshrc
#半角英数で「i」を押してインサートモードへ

$ export @@@@='****' #"@@@@"は❶で設定したもの"****"は好きなユーザー名
$ export ~~~~='XXXX' #"@@@@"は❶で設定したもの"XXXX"は好きなパスワード名
#半角英数で「:wq」を押して終了

$source ~/.zshrc 
#これをしないと反映されません。

```

❸デプロイする場合もデブロイ先に環境変数設定します。今回はHerokuになります。$ heoku config で設定できているか確認できます。

```terminal
% heroku config:set @@@@="****"
% heroku config:set ~~~~="XXXX"
#herokuへの環境変数設定完了

#あとはgithubにコミットします。そのあとでコマンドでherokuへプッシュします。
% git push heroku master
```

<br>


4.開発環境
----------------------------------------
macOS Catalina 10.15.4
Ruby 2.6.5</br>
Rails 6.0.3.3</br>
Visual Studio Code 1.49.2</br>
<br>
MacとiPhoneで履歴書用の証明写真を8枚30円でコンビニ印刷してみた。

## 本記事の前提条件
- MacとiPhoneでiCloud写真を利用していること。
- ファミリーマートで印刷する。

## 使用するアプリケーション
- Mac：Pages
- Mac：プレビュー
    - Macに付属するアプリケーションのみ
- iPhone：PrintSmash

## 作業手順
### 概要
1.履歴書に貼りたい大きさのjpgファイルを作る。
2.MacのPagesでL版の大きさに8個の写真を並べる。
3.MacのPagesでpdfファイルに書き出す。
4.Macのプレビューでpdfファイルをjpgファイルに書き出す。
5.Macのプレビューでjpgファイルを共有から写真に追加する。
6.iPhoneのPrintSmashからコンビニでL版写真印刷する。

### 1.履歴書に貼りたい大きさのjpgファイルを作る。
 - デジタルカメラで撮影するなどしてjpgファイルを用意する。
     - 写真屋さんのCDに入ってる背景の影を消したファイルを使用するのもあり。
       - CDからコピーして作業する。（直接変更すると、写真屋さんで焼き増し出来ない可能性あり）
![myphoto.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662031/f1df0a46-545d-8b1a-e5bf-8380eaffd864.jpeg)

 - Macのプレビューで縦横比3:4のjpgファイルを作る。
     - 縦横比3:4の適切な解像度（350dpi）で十分な大きさ(3cm×4cm以上)にする。
     - アングルは胸から上で真正面にする。
![1.1.2.select.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662031/eb0de0ff-af4e-cd6a-50fa-2741ec13b2a7.png)
![1.1.3.cut.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662031/6b032bac-da9c-c87e-b078-d7782ccbbaa1.png)
![1.1.4.savemyphoto.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662031/5f4c919b-08ff-d1bb-d3e5-b453e1ea23e3.png)

### 2.MacのPagesでL版の大きさに8個の写真を並べる。
 - MacのPagesで用紙サイズをL版縁なしにしてページの方向を横にする。 
     - 無い場合は、ありそうなプリンタを選択する。 
 - MacのPagesで書類本文のチェックを外す。
![2.2.pages.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662031/1b5f6aa8-e630-a059-8470-74228ac98845.png)

 - MacのPagesでメディアから写真を選択する。
![2.2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662031/046cb771-b168-3cc9-49d5-255bdb726588.png)
![2.3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662031/5ff8ff0f-8e4c-e31d-469d-f194cd217a41.png)
![2.4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662031/5ff63503-5240-7b6f-8688-a3ef6b12a8c5.png)

 - MacのPagesで写真のサイズを幅3cm高さ4cmにする。
![2.5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662031/edfd0ca5-aa9e-ee02-a541-3ff97ea06729.png)

 - MacのPagesで写真をコピーしてペーストを繰り返し、8個の写真を並べる。
![2.6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662031/e0cfeae0-484b-621c-394c-2397f4ac1f56.png)

### 3.MacのPagesでpdfファイルに書き出す。
![3.1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662031/82ea234c-a467-7b22-f03d-81dac61145b2.png)
![3.2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662031/c4050fc5-065c-e663-a980-3adac246d275.png)
![3.3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662031/a65031b0-fd4f-7471-1603-5faf281897e7.png)

### 4.Macのプレビューでpdfファイルをjpgファイルに書き出す。
![4.1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662031/227f96b4-2cd6-3906-8416-ef26070234c1.png)
![4.2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662031/bc448f8e-04ba-c6c8-4839-8a4867ff433d.png)

### 5.Macのプレビューでjpgファイルを共有から写真に追加する。
![5.1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662031/936f6975-4a36-3b94-da08-1ff40010cccd.png)


### 6.iPhoneのPrintSmashからコンビニでL版写真印刷する。
![6.1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662031/1b93e6b9-e2a6-a746-c373-d6feaf6b4459.png)

証明写真ではなく、L版写真で印刷してください。

おつかれさまでした。
Python: 仮想環境作成(venv)・起動・停止まで

## 使用環境

macOS Catalina


## 目次

・**venv**を使ってpython仮想環境を作る

・仮想環境上で〇〇.pyファイルを実行


## python仮想環境を作る

＝＝＝仮想環境myPythonを作成、仮想環境の起動・停止まで＝＝＝

・Pythonの仮想環境を作成したいディレクトリに移動

```
cd /Users/tanaka/Downloads/
```

・仮想環境を作成

```
python3.8 -m venv myPython
```
[補足] /Users/tanaka/Downloads/配下に、仮想環境myPythonがされています。

・仮想環境へ移動

```
cd myPython
```

・仮想環境を起動

```
source bin/activate
```

・パッケージをインストール

```
pip install requests
```
[補足]pip install [パッケージ名]

・インストールされたパッケージリストを確認

```
pip freeze
```

・インストールしたパッケージ毎の詳細情報を表示

```
pip show requests
```

・仮想環境を閉じる

```
deactivate
```

## 仮想環境上で.pyファイルを実行

・ターミナル上に実行したい.pyファイルをドラック&ドロップして実行

```
python3.8 /Users/tanaka/Downloads/myPython/main.py 
```
[補足]ターミナルでpython3.8と入力後、ターミナルにmain.pyファイルを**ドラック&ドロップ**


<font color="red">[おわり]</font>
Rails6.0~ エコな開発環境の作り方

#クリーンな開発環境を実現する

Ruby on Railsの環境構築をできるだけエコ(環境汚染をせずに)作成する方法を備忘録として残しておきます。

もっとクリーンにできる方法があれば教えてください！

#How To

###1. 適当なディレクトリを作る

```
mkdir sample-app && cd sample-app
```

###2. bundle initする

```
bundle init
```

###3. Gemfileのrailsのコメントアウトをとる

```ruby:Gemfile

# frozen_string_literal: true

source "https://rubygems.org"

git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

gem "rails"
```

###4. bundleの設定をする

```
bundle config set path 'vendor/bundle'
```

※bundlerがない場合はbundlerだけはグローバルインストールしてしまいましょう。

```
gem install bundler
```

###5. railsをbundle install

```
bundle install
```

###6. rails newでrailsアプリケーションの作成

```
bundle exec rails new . -B -d mysql --skip-test
```

-dでデータベース指定できるので適宜変えてください。

API作成の時は

```
bundle exec rails new . -B -d mysql --skip-test --api
```

と`--api`を付けてAPIモードにしましょう。

そしてGemfileが最初にinitで作成されたものとConflictしますがYを押してOverwrite。

###7. rails new によって作成されたGemfileをもとに再度bundle install

```
bundle install
```

※mysql２インストール時にエラーが出る場合は以下を入力

```
bundle config --local build.mysql2 "--with-cppflags=-I/usr/local/opt/openssl/include"
bundle config --local build.mysql2 "--with-ldflags=-L/usr/local/opt/openssl/lib"
```

参照: https://qiita.com/fukuda_fu/items/463a39406ce713396403


###8. webpackerのinstall

```
bundle exec rails webpacker:install
```


###9. DB作成
```
bundle exec rails db:create
```

###10. Yay! You’re on Rails!

![スクリーンショット 2020-10-04 14.29.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/650287/d9ef447d-99bb-c75e-2d58-cd9657f347de.png)



###所感
まぁ一番はDocker使うのが環境を汚さない気がしますが...
Dockerを使わないなんてHow Dare You!と言われてしまう気がしますが、Dockerを使わないでローカルに環境構築する際の参考になれば幸いです〜
MySQLとPostgreSQLの違いが面白かったのでメモ

##はじめに
仕事でAWSのRedshiftを使うことになり、Redshiftについて調べていたところ、PostgreSQLをベースにしているらしいということを知る。
だがしかしPostgreSQL触ったことないので調べたら面白い記事を発見したのでまとめ。
元ネタはこちら：https://employment.en-japan.com/engineerhub/entry/2017/09/05/110000

##違いについて
####■MySQL
シンプルなWebサービス向き。
もともと組込み系システムに使われていたため、設計思想として複雑なアルゴリズムは極力なくす方針のため。（ex.結合アルゴリズムはネステッドループ結合のみ）

####■PostgreSQL
分析系システムやSI企業向き。
多機能であることが一番の特徴。（ex.結合アルゴリズムはネステッドループ結合・ハッシュ結合・ソートマージ結合すべて）
ただし、追記型アーキテクチャのため、更新処理はMySQLより劣る。
※更新対象の行に削除フラグのようなものを立てたうえで、更新後のデータを持った新しい行を追加するため。

##まとめ
RDBSって種類いろいろあるけどまあ多少文法が違うだけでしょ、程度に思ってました。
が、こんなに違うんですね。勉強になりました。
GraphvizをWindows 10にインストールするときのメモ

Graphviz 2.44.1 (https://graphviz.org/) をWindows 10にインストールしたときのメモ

1. [Stable Windows install packages](Stable Windows install packages)からexeファイルをダウンロードしてインストール
2. PATHを設定（インストールの途中で設定するか聞かれる）
3. インストールできたらterminalで`dot -V`が通るか確認
4. 管理者権限で`dot -c`を実行
5. これでできた

```{sample.dot}
digraph g{
x
y
}
```

を保存して，

```
dot sample.dot -T png -o sample.png
```

を実行．pngファイルができていればOK．
No files matching the pattern "'src/**/*'" were found. Please check for typing mistakes in the pattern.

#firebase deployできない

Reactとfirebaseでアプリを作成しているときにエラーが出ました。
同じエラーが出た際、この記事で解決できるように記録として残します。

##エラー内容
以下の実行コマンドを行った際、

```
firebase deploy
```

このようなエラーが出てしまいました。

```
> eslint 'src/**/*'


Oops! Something went wrong! :(
ESLint: 7.10.0

No files matching the pattern "'src/**/*'" were found.
Please check for typing mistakes in the pattern.

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! functions@ lint: `eslint 'src/**/*'`
npm ERR!
npm ERR! Failed at the functions@ lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
```

と言われ、詳しくエラーを読むと、

functionsフォルダで

```
'src/**/*'
```

というのが見つからんぞ！って怒られています。

##確認すると、、、
functionsフォルダ内を実際見てみると

```
"scripts": {
    "lint": "eslint --no-error-on-unmatched-pattern 'src/**/*'",
    "build": "tsc",
    "serve": "npm run build && firebase emulators:start --only functions",
    "shell": "npm run build && firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
```

しっかりと書いてあります。なんじゃこれ。

##原因を探る
色々な記事を探りましたが、なかなかできず、、、
（以下は、参考にさせていただいた記事です。）

https://ontheneworbit.blogspot.com/2018/12/firebase-deploy-only-functions-command.html

https://www.366service.com/jp/qa/d184383f0b10078b894ae831e963491e


https://github.com/eslint/eslint/issues/10587

##解決策
とある記事（https://stackoverflow.com/questions/60345326/eslint-no-files-matching-the-pattern-lint-were-found-please-check-for-typing）
で無理やり解決しているのを見つけました。

```
--no-error-on-unmatched-pattern
```

エラーを起こしている部分に、これを入れてあげるとよいみたいです。


###変更前

```
"lint": "eslint 'src/**/*'",
```

###変更後
```
"lint": "eslint --no-error-on-unmatched-pattern 'src/**/*'",
```


これでdeployできた！！！
[Windows] DOM サイズとディスプレイ上のピクセルサイズが一致しない

# TL;TD
Windows 設定の拡大率に気を付ける
![windows_setting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440643/28f62109-573f-e9cd-ca50-fb306234e6b7.png)

自分のデバイスでは 150% に設定されているため、CSSなどで指定した DOM のサイズ（px単位）とディスプレイに表示されるピクセルサイズに1.5倍の差が生じる。

### 具体的な事象
![px-windows.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440643/0924977c-5195-a311-d0f4-522f20c065d0.png)
図の青くハイライトされた DOM の width は 511.333 px とツールでも確認できるが、ディスプレイ上では 766 px になっていた。
Route53の全レコードをまとめてテキストファイルに出力するワンライナー

必要になったので書きました。必要なものは[AWS CLI v2](https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2-linux.html#cliv2-linux-install)と[jq v1.6](https://stedolan.github.io/jq/)とgawk[^1]です。なお[この記事](https://qiita.com/netebakari/items/8c49069d9f7d1c35629f)の焼き直しです。

# コマンド

```
aws route53 list-hosted-zones | \
  jq '.HostedZones[] .Id' -r | \
  gawk -F"/" '{cmd="aws route53 list-resource-record-sets --hosted-zone-id " $3 " | jq \x27.ResourceRecordSets [] | if has(\"ResourceRecords\") then [.Name, .Type, .TTL, ([.ResourceRecords[] .Value] | join(\",\"))] else [.Name, .Type, -1, (.AliasTarget .DNSName)] end | @tsv\x27 -r >" $3 ".tsv" ; system(cmd)}'
```

# 出力結果
hosted zoneごとに1ファイルが出力されます。

```
example.com.    MX  3600    1 aspmx.l.google.com,5 alt1.aspmx.l.google.com,5 alt2.aspmx.l.google.com,10 aspmx2.googlemail.com,10 aspmx3.googlemail.com
example.com.    NS  172800  ns-1411.awsdns-99.org.,ns-999.awsdns-99.net.,ns-9999.awsdns-99.co.uk.,ns-999.awsdns-99.com.
dev1.example.com.   A   300 203.0.113.1
dev2.example.com.   A   -1  dualstack.alb-name-999999999.ap-northeast-1.elb.amazonaws.com.
```

# Q&A
Q: もはやワンライナーとは言えないのでは？　3行なのでは？
A: はい

[^1]: awkやnawkでも動くかもしれませんが試していません
2020/10/4昼アウトプット

#Rails　ツイートを表示させる　復習
- レイアウトの整形
- レイアウトテンプレートとはアプリケーションのビューファイルの共通部分をまとめたもの
- これにheadの情報やヘッダー、フッダーなどのすべてのビューで共通となる部分を記述しておくことで、各テンプレートファイルは個別の見た目を記述するだけでよくなる
- appilication.html.erbというファイルがレイアウトテンプレートになる
- yieldメソッドとはレイアウトテンプレートに各テンプレートファイルを展開するためのメソッド
- <%= yield %>があることで、body要素内に各ビューファイルの記述が集約されるというしくみができる
- CSSファイルの適用
- stylesheet_link_tagメソッドとは読み込むCSSファイルを指定できるヘルパーメソッド
- application.cssファイルとはRailsにはじめから用意されている、CSSファイルをまとめるためのファイル
- その中のrequire_treeという記述は、引数として与えられたディレクトリ以下のCSSファイルをアルファベット順にすべて読み込む機能を持つ
AndroidStudioでThe application could not be installed.のエラーが出てしまったとき


#エラー内容
AndroidStudioでエミュレーターを動作させようとしたら以下のエラーが出ました。
Clean ProjectをしてもRunできない状態でした。

```
The application could not be installed.
Installation failed due to: ''cmd package install-create -r -t --full -S 2681626' returns error 'Unknown failure: cmd: Can't find service: package''
```

#解決方法
- Tool>AVDManagerから使用していたAVDをCold Boot Now
- Clean Project実行
- もう一度Run

の手順で動くようになりました。
![AVDManager.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/648333/444c67ce-1abb-d8f0-2128-2aebf4310713.png)

#備考
参照元
https://stackoverflow.com/questions/57256664/how-to-fix-cmd-package-install-create-r-t-s-1699739-returns-error-unknown
【Docker】Elasticsearch,Kibana環境を作る！

# はじめに
docker-compose を用いてElasticsearch環境の構築手順を示す

> - Elasticserchは「全文検索システム」を提供するソフトウェアである
> - KibanaはビジュアライゼーションのためのツールでElasticsearchデータベースに入っているデータを様々な形式で描画できる

# 必要ファイル
- docker-compose.yml
    - このファイルにElasticserch環境構築に必要な処理を記述する

# docker-compose.ymlの内容

```docker-compose.yml
version: "3"

services:
  elasticsearch:
    image: docker.elastic.co/elasticsearch/elasticsearch:7.2.0
    environment:
      - discovery.type=single-node
      - cluster.name=docker-cluster
      - bootstrap.memory_lock=true
      - "ES_JAVA_OPTS=-Xms512m -Xmx512m"
    ulimits:
      memlock:
        soft: -1
        hard: -1
    ports:
      - 9200:9200
    volumes:
      - es-data:/usr/share/elasticsearch/data
  kibana:
    image: docker.elastic.co/kibana/kibana:7.2.0
    ports:
      - 5601:5601

volumes:
  es-data:
```

# 起動方法
docekr-compose.ymlの作成が終わったら以下のコマンドを実行する

```
$ docker-compose up -d
```
> 初回は少し時間がかかる

コンテナが立ち上がったら、http://localhost:5601/ 　にアクセス

以下の画面が表示されたら成功！

![スクリーンショット 2020-10-04 12.48.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308470/d655d787-9d6c-07d3-815a-9cf5666b8342.png)
WindowsからEC2にSSH接続する

#前提条件
- AWSコンソールで既にEC2インスタンスを作成済み
- EC2にアクセスする為のパブリックIPを設定済み
- EC2において、SSH接続の為の22番ポートが解放されている
- Windowsのオプション機能で、OpenSSH クライアントがインストールされている

#結論
以下のような形式でアクセスできます。

```powershell
ssh -i .\key.pem ec2-user@192.168.0.1
```
`.\key.pem`のところには、EC2を作成した時のキーペアのパスを指定します。
`192.168.0.1`のところには、EC2にアクセスする為のパブリックIPを指定します。
ユーザ名は、`ec2-user`で問題ありません。

#参考元
- [Windows10 の ssh を使った AWS EC2 への接続](https://qiita.com/uttne/items/7bfa4e820834f7f54be8)
- [【初心者向け】Amazon EC2にSSH接続する【Windows、Macintosh】](https://dev.classmethod.jp/articles/aws-beginner-ec2-ssh/)
[Rust/WinRT] 既定のプログラムを使用してファイルを開く

任意のファイル [テキスト (`.txt`), 画像 (`.jpeg`, `.png`, etc.), 音声 (`.mp3`, etc.), 動画 (`.mp4`, etc.), PowerPoint (`.pptx`), PDF (`.pdf`) 等なんでもよいです] を, 既定のプログラムで開く Rust/WinRT プログラムです.

# 環境

本記事の執筆環境は以下の通りです.

* Windows 10 v1909
* Rust 1.46.0 (stable-x86_64-pc-windows-msvc)
* winrt 0.7.2

# コード

## import

```rust
winrt::import!(
    dependencies
        os
    types
        windows::system::Launcher
);
```

## 既定のプログラムを使用して開く

コマンドライン引数としてファイルのパスを与えると, 既定のプログラムでそれを開くプログラムです (つまり cmd/PS の `start` コマンドとほぼ同じものです). ただしファイルパスはフルパスでなければ動きません.

```rust
use windows::{
    storage::StorageFile,
    system::Launcher,
};

fn main() -> winrt::Result<()> {
    let path = std::env::args().nth(1).expect("ファイルパスを引数に指定してください.");

    // ファイルパスから `StorageFile` オブジェクトを取得
    let file = StorageFile::get_file_from_path_async(path)?.get()?;
    
    // 既定のプログラムを使用して `file` を開く
    Launcher::launch_file_async(file)?.get()?;
    Ok(())
}
```

## 使用するプログラムを選択して開く (動かなかった)

参考文献によると, アプリ選択画面を表示してユーザーに使用するアプリを選択させることも可能なはずですが, 私の環境ではうまく動きませんでした (ビルドは成功して実行できるもののアプリ選択画面が表示されずに終了してしまう). 一応コードを載せておきます.

```rust
use windows::{
    storage::StorageFile,
    system::{Launcher, LauncherOptions},
};

fn main() -> winrt::Result<()> {
    let path = std::env::args().nth(1).expect("ファイルパスを引数に指定してください.");

    // ファイルパスから `StorageFile` オブジェクトを取得
    let file = StorageFile::get_file_from_path_async(path)?.get()?;
    
    // プログラム選択画面を表示するようにオプションを指定
    let options = LauncherOptions::new()?;
    options.set_display_application_picker(true)?;

    Launcher::launch_file_with_options_async(file, options)?.get()?;
    Ok(())
}
```

私としては既定のプログラムで起動できれば十分だったのでこれ以上追及しませんでしたが, うまく動かないのは気持ちよくないので, 気が向いたら SO あたりに質問を投げたりして解決しておきたいところです.


# 参考文献
* [ファイルに応じた既定のアプリの起動 - UWP applications](https://docs.microsoft.com/ja-jp/windows/uwp/launch-resume/launch-the-default-app-for-a-file)