OmniAICreator/Qiita-1.07M huggingface dataset:
VSCodeで「Live Server」　と 「Watch Sass」が消えたら

# VSCodeで「Live Server」　と 「Watch Sass」が表示されないとき

- 試したこと
    - .scssのファイルを作ってみた
    - 下のステータスバー(本来watch sassが表示される所)で右クリックで✔︎の有無の確認


### Code Runnerの設定ファイルをフォルダごと削除し再インストールで解決

VsCodeでは機能拡張の設定ファイルは各ユーザフォルダの.vscodeフォルダにあります。

注意）
.vscodeフォルダは隠しフォルダなので、
Windowsであればエクスプローラで隠しファイルやフォルダを表示する設定
に変更します。

1. ユーザーフォルダを開く
（WindowsであればローカルディスクC:の中にあるユーザーという名称
 のフォルダの中にある各自のユーザ名フォルダのことです）

2. .vscodeフォルダをダブルクリック

3. extensionsフォルダをダブルクリックして開く

4. 「Live Server」　と 「Watch Sass」のフォルダを削除

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2601680/e08f81cc-66d6-38c9-72a6-a2a287851baf.png)

5. 拡張機能を再インストールを行う
code-serverでGitHubにログインできないときの対処法

## 【追記】ログイン方法が変わりました

code-server `v4.2.0`ではログインの方式が変更されていました。この対処法は`v4.2.0`以前のcode-server（`v4.0.2`で検証済み）の記事になります。

## code-serverでGitHub連携ができない

code-serverでGitHubログインをするとき、いつものVSCodeと同じように`vscode-auth.github.com`のリンクにリダイレクトし認証しようとしたら、
![8592B70F-664B-4F15-A324-3636807D9224.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1612625/3a46fcf6-5e69-7f21-b2ba-a5daf117fe0f.jpeg)

と言われてしまったときの対処法。

## 対処法

> [Cannot sign in to Github account #1883 - GitHub](https://github.com/coder/code-server/issues/1883) より引用

GitHub認証用にcode-serverが生成するURLは、

https\://vscode-auth.github.com/authorize/?callbackUri=https\://example.com/callback%3Fvscode-requestId%xxxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx%26vscode-scheme%3Dcode-oss%26vscode-authority%3Dvscode.github-authentication%26vscode-path%3D%252Fdid-authenticate&scope=**code-serverが連携に必要とする権限のスコープ**&state=**code-serverが生成するstate文字列**&responseType=code

となっている。これを、

https\://vscode-auth.github.com/authorize/?callbackUri=vscode://vscode.github-authentication/did-authenticate&scope=**code-serverが連携に必要とする権限のスコープ**&state=**code-serverが生成するstate文字列**&responseType=code

へと書き換え、認証を行う。その後、

![5FBE7B34-5911-4206-9747-6764DBE5CFAE.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1612625/1113f51c-b384-436c-1165-8b6fceecfa2e.jpeg)

この画面で表示されるURL（青窓部分）をコピーし、

![2D9E6A06-A49E-4DE8-9C75-4472AC018E74.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1612625/268021c9-1727-f284-a02f-7aec96361060.jpeg)

下のバーの`github.com にサインインしています…`をクリック。

![23686060-002B-431C-AFA5-237376FCBA5D.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1612625/072a7a56-51ad-5e6b-86b9-0ce3584ae666.jpeg)

表示される`Uri`欄に、先ほどコピーしたURLをペーストして`Enter`。
これで認証できる。
重複ヲ削除スルアプリヲ作リGITHUBPAGESデ公開

https://progllama.github.io/utilsOnGithubPages/index.html

最初プロジェクトのあるレポジトリで公開しようとしたが色々とやることがあった。
がしかし、ビルドしたものを別のレポジトリで公開すれば特に何かすることもなく公開できるらしいのでそっちでやった。
100日でSQLの達人になる@LeetCode! Day47 <WITHとCASE WHENとLeft JOINで解決>

## 1097. Game Play Analysis V （問題レベル: Hard）要課金
今日の問題はこれ。
日付ごとに、その日がはじめてプレイしたユーザーが次の日もプレイする割合を算出するという問題。
`Middle`, `Hard`の問題では珍しい一つのテーブルからの問題。

`With`句と`CASE WHEN`を使って自力で解決できた。

最終的に提出したコードは下記のとおり。
```:SQL
WITH cte AS
(SELECT DISTINCT player_id, 
 MIN(event_date) OVER(PARTITION BY player_id) AS date
 FROM activity)
 
SELECT m.date AS install_dt,
COUNT(m.player_id) AS installs,
ROUND(AVG(CASE WHEN m.games_played IS NULL THEN 0.0 ELSE 1.0 END),2) AS Day1_retention
FROM 
(SELECT c.player_id, c.date, a.games_played
FROM cte c
LEFT JOIN activity a
ON a.player_id=c.player_id AND DATEDIFF(day, c.date, a.event_date) = 1) m
GROUP BY m.date
```
`Left JOIN`で初日の次の日のデータがある場合と無い場合で切り分けるという考え方を使った。

今日のポイントは`WITH`と`CASE WHEN`と`Left JOIN`で解決としよう。

* [LeetCode](https://leetcode.com/)の問題は、`MS SQL Server`で解いています。
春から大学生（情報・工学）の方へ～プログラミング入門～（C言語ってなあに？）

初心者の学習記録、初記事です。

# 対象読者
・これから大学に入るがまだプログラミングをやったことのない方
・大学に入るのはまだまだ先だが、プログラミングに興味のある方

# プログラミング入門！C言語とは？
大学の情報科・工学科って何やるの？

# 情報系・工学系で学習する「C言語」について説明
　情報・工学系の学部の授業でまず初めに学習するのは、おそらく「C言語」です。
　
　コンピューターに指示を出すためには、プログラミング言語を使って命令（ソースコード=プログラム）を書く必要がありますが、プログラミング言語にもいろいろな種類があります。
　
　「C言語」はそれらの中でも古くからの歴史がある言語とされ、難しめの言語として知られてします。
　
　では、なぜ大学の授業ではわざわざ「難しめの」言語を課しているのでしょうか？

　それを理解するのにはプログラミング言語同士の位置関係・特性の違いを理解する必要があります。

　先ほども記しましたが、プログラミング言語はコンピューターに指示を出すときに使われるものです。しかし、多くの人のイメージ通り、普段私たちが使っている言語とは違うものです。（そしてたいてい難しい）

　ではなぜ、プログラミング言語と普段私たちが使っている言語（自然言語と言います）は異なるのでしょう。

　そもそもコンピューターは私たちの使っている自然言語を理解することはできません。その代わりに0と1だけは理解することができます。なぜでしょうか？コンピューターのメモリに使われている半導体が記憶できるのが0と1（オンとオフ、逆かも）だからです。私たちは普段からスマホやパソコンを使って写真データを保存しておいたりメモ帳でメモをとったりしていますが、写真や文字がそのままその形で保存されているわけではないのです。実際にはすべての電子データは0と1に変換されて保存されます。半導体がそのような形式でしか記憶できないからです。

　そういった経緯から、コンピューターに命令を出しても0と1の形に直してくれないと理解してくれないわけです。これを「機械語(machine language)」と呼びます。もっと詳しく言えば、番号ごとに実行すべき命令が表になっているそうです。これを「アセンブリ言語」と呼びます。ところが、この「アセンブリ言語」を覚えて使いこなすのは大変です。そこで、より人間のことばに近い言語を作ろう、という動きが起こったわけです。このようにしてプログラミング言語は誕生しました。プログラミング言語は英語と記号でできていますから、人間（特に英語圏の人）にとって読みやすいわけです。（日本人は英語から始めなければならないわけですがw）人間がプログラミング言語でコンピューターに行ってほしい処理を記述し、それを機械語に翻訳することでようやくコンピューターが何をすべきかわかるわけです。（翻訳してくれるアプリはコンパイラやインタープリタと呼ばれます）

　プログラミング言語の中にもいろいろある、と書きましたが、いろいろ、というのは人間の言語（自然言語）と機械語のどちらにより近いか、という意味です。C言語は他のプログラミング言語と比べて機械語寄りとされる言語です。自然言語では「○○やっといて」といった雑な命令の仕方が成り立ちますが、コンピューターというのは正確に命令されないと分かってくれないものです。

　最近はやりの（AIやデータ分析に使われる）Python言語などは書き方が雑でも多少は察して動いてくれます。一方でC言語はあまり察してくれません。細かく細かく指示しないとなかなか動いてくれないわけです。（全体としてプログラムの長さは長くなる）

# C言語ってどこで使われるの？
・組み込み系のソフトウェア（工場のロボットや家電などでしょうか）のプログラム
・パッケージソフト（ウイルスバスターやエクセルなど）
・通信にかかわるプログラム
・ゲーム開発（大学の授業ではC言語・C++でCGを作る授業があると思います）
・メモ帳、ブラウザ
・Webサーバー
・大規模なシステム（政府系や金融系？）
・OS（WindowsやMacなど）
上記のものは処理速度が求められるものが多いように思います。C言語は実行速度が速いとされているので重たい処理が求められる作業、早い処理を求められるプログラムには適しているのではないかと考えられます。CGなんかも映像・画像の処理ですので文章だけと比べるとかなりの負荷がかかるはずです。
参考
https://www.sejuku.net/blog/9698

# 最後に
後日まだ書き足します。大きな間違いはないかと思いますが、細かい部分で不適切な表現がある可能性もあります。この程度の内容はググればほかにも出てきますので、ほかの記事で言っていることと違っている部分がありましたらそちらを信用なさってください。
読んでいただいてありがとうございました

# 追伸
すごい、初記事なのに２日間で92もviewがついてる。。。見てくれた方々ありがとうございます。

# 第２弾！！！C++言語について解説！！！
https://qiita.com/HaaSAtC/items/2687eef10dba08432a19
[laravel 8]The requested resource /フォルダ名 was not found on this server. の解決例

## 何をしたら出た？
LaravelをMVCモデルで使用している中で、javascriptファイルを [Laravel Mix](https://laravel-mix.com/docs/6.0/installation) を使って表現していました。

ファイル数が増えそうだったので、`resources/js/ファイル` を `resources/js/フォルダ/ファイル` というディレクトリ構成にしました。

そうしたところ今まで表示できていたページが、タイトルのエラー文を表示する404ページになりました。


## 解決した方法は？

`resources/js/ファイル` のディレクトリ構成に直したところ、ページを復活できました。


## 原因は？
おそらく、Laravel Mix のコンパイルファイルの読み込みは **public/js/ 直下のファイルのみ** を読み込むロジックとなっているからと思われます。
git 

#git変更を戻す パターン１
ローカルリポジトリ

```
$ git log

commit 1483ccd9e5a15f150e55a005018bd425bfc8a111
Author: hoge <hoge@gmail.com>
Date:   Thu Feb 17 00:00:00 2022 +0900
```

commit　を指定し、変更を確認
```
git show 1483ccd9e5a15f150e55a005018bd425bfc8a111
```
変更を戻す

```
$ git reset 1483ccd9e5a15f150e55a005018bd425bfc8a111
```

戻した変更をリモートリポジトリに反映する
```
$ git push -f //-fで強制push
```


#git変更を戻す パターン2
ローカルリポジトリ

```
$ git log --oneline --graph

* d1bd2ec (HEAD -> test, origin/test) Revert "コメント"
* 0b4a8c6 コメント
* 1483ccd コメント
```

変更を確認
```
$ git show 0b4a8c6
```


IDを指定
```
$ git revert 0b4a8c6
```

戻した変更をリモートリポジトリに反映する
```
$ git push -f //-fで強制push
```
基本情報技術者試験対策　10日目

基本情報技術者試験勉強　10日目
-
この記事の目的
-
今年の5月に基本情報技術者試験を合格するために、過去問で間違えた箇所をただまとめる自分のための記事

プロフィール
-
・文系大学の３年生
・ITパスポートは保有
・ウェブアプリやサイト作成を個人で行ったことがある程度
・猫好き

今月の目的
-
午前中の問題のテクノロジー系とマネジメント系を徹底的に取り組む。

今日の目的
-
テクノロジー系の問題をメインに取り組み、

間違った箇所
-
1,ゲートキーパ
IPサービスと電話番号の変換機能を持つ

2、Volpゲートウェイ
電話網とIPネットワーク間の中継を行う機器
音声を各種符号化方式で圧縮してパケットに変換、IPネットワークでリアルタイム伝送を行う

3、NAS(Network Attached Storage)
TCP/IPのコンピュータネットワークに直接接続して使用するファイルサーバ
高速なファイルサービス
複数のプロトコルに対応し、異なるOSのサーバ間でファイル共有できる

４、ベクトルコンピュータ
一つの命令で配列中の複数のデータを同時に演算する

5、マルチプロセッサシステム
多数の演算ユニットの接続形態を動的に切り替える
一台のコンピュータに複数のCPUを有し、並行して処理を多なう

6、グリッドコンピューティング
多数のコンピュータをネットワークで接続して処理を行う


振り返り
-
今日の結果としては、30問中23問合格で、まだまだ正解率が低いし、問題数が少ない。また、アルゴリズムや計算問題をうまくまとめることができていないことが課題。次回は、計算問題をなるべく解きたい。
今月の日数　11日

>引用
基本情報技術者試験ドットコム
https://www.fe-siken.com
A5 SQL 環境構築 備忘録

仕事で、A5 SQL を使用することになったので、その手順の備忘録を残しておきます。

#### Microsoft Store でインストール
Microsoft Store でなくとも、webからダウンロードできます。

<img width="600" alt="a5sql.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/762492/a8827fee-d461-da05-3966-0f9239790f2a.png">

#### xampp で MySQL を起動する
今回は、例として、xampp の MySQL を使用しますが、他のSQLを使用する場合は、他の環境を準備しておく必要があります。

<img alt="xampp_mysql.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/762492/c5258bc4-6c95-33d0-9b9b-f23353d1e772.png" width="600">

#### データベース追加
A5SQLを起動すると下記のような画面になるかと思いますので、「追加」ボタンを押下します。
「データベースの追加と削除」が出てこなかった場合は、画面左上の「データベース(D)」を押せば、メニューの中にあるので、そちらから開きます。

<img alt="無題_1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/762492/e69cb84a-c618-c840-f93f-617a94d226b1.png" width="800">

A5SQLで開きたいデータベースの種類を選択します。
今回の場合は、MySQLを選択します。
（当然ですが、サーバー側のSQLが起動していなければ、データベースの追加は完了できません）

<img alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/762492/68180519-e9db-9aea-490a-20fccfbf1891.png" width=350">

それ以降の項目は、デフォルトのまま「OK」を押下します。
設定値の変更が必要なら、環境ごとに設定します。
以下が、DB作成後の画面です。

<img alt="無題_2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/762492/ad1c7380-f25f-ed9d-0c3c-cf66f42b79ad.png" width="600">

#### テーブル作成
SQLでテーブルを作成します。
このとき、カレントスキーマを変更することで、SQLの実行対象のDBを変更することができます。
今回は、作成したばかりで、対象が一つしかないため、操作は必要ありません。
テーブル作成用のSQLはサンプルを下記の様に載せておきます。

```sql
CREATE TABLE test_table(
	id INT,
	name VARCHAR(20) not null comment '名前',
	create_datetime DATETIME,
	update_datetime DATETIME
);
```

SQLの実行方法は、実行したいSQLを選択状態にし、右クリックで「SQLを実行」を行えば、実行できます。
これで、テーブル作成までできたかと思います。

<img width="600" alt="無題.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/762492/411d1434-93e4-ef6d-1025-6e7dd6f7c33f.png">


....
気分が乗ったら続き書きます....
Chakra UIのButton要素中でoverflow-wrap:"break-word"が効かない

# はじめに

Chakra UIのButtonコンポーネント中でoverflow-wrap:"break-word"を使用した改行が効かず詰まったため、備忘録としてまとめておきます。

# 使用環境

Next@12.1.0
@chakra-ui/react@1.8.6


# 書いたコード

次のようなコードで、Chakra UIのButtonコンポーネント中で文字列の改行を試みたところ、なぜか効きませんでした。


```typescript:sample.tsx

import { Button, Text } from "@chakra-ui/react";
import { NextPage } from "next";

const Sample: NextPage = () => {
    return (
        <Button w="200px" h="200px">
            <Text overflowWrap="break-word">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</Text>
        </Button>
    )
}
export default Sample

```

#### 結果

![改行がうまくいってない結果](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1091686/af1d7d5d-2310-f455-0a49-ada9b515e84a.png)


ググってみると「max-widthを設定すれば直る」「display:"flex"があると改行できない」などの原因を挙げている方が散見されましたが、どの方法もダメでした。

# 原因

Buttonコンポーネントに設定されていた`white-space:"nowrap"`が原因でした。そこで、コードを次のように修正したところ、想定した動作が得られました。

```diff_typescript

import { Button, Text } from "@chakra-ui/react";
import { NextPage } from "next";

const Sample: NextPage = () => {
    return (
-        <Button w="200px" h="200px">
+        <Button w="200px" h="200px" whiteSpace="unset">
            <Text overflowWrap="break-word">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</Text>
        </Button>
    )
}
export default Sample

```

#### 結果

![改行がうまくいった](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1091686/3d1b9331-bc5e-045d-73fd-0fcbf8b68439.png)
rails6 bootstrap5 deleteメソッドについて

# はじめに
こちらは,link_toでdeleteメソッドを使用するとrouteエラーが出たので、その解決法を投稿します。

# 環境
rails 6.1.4
bootstrap 5

# 該当コード
```
<li><%= link_to 'ログアウト', logout_path, method: :delete %></li>
```

# 対処法
popperというパッケージをインストールしたら、エラーが解消された
こちら公式サイト
https://popper.js.org/

# 反省
私の記事は、エラーの原因を詳しく書けていなかったことに気づいたので、次からは原因を書いていこうと思います。
ABC243のA, B, C問題 を Elixir で解く

Elixir 初心者が AtCoder に挑戦してみたのですが、なかなか Elixir でやっている人がいないので、敢て恥を晒します。クソコードをボロボロに殴ってやって下さい。

https://atcoder.jp/contests/abc243

# A問題: Shampoo

```elixir 
defmodule Main do
  def main do
    IO.read(:line)
    |> String.trim()
    |> String.split(" ")
    |> Enum.map(&String.to_integer/1)
    |> do_solve()
    |> IO.puts()
  end
  
  defp do_solve([v, a, b, c]), do: rem(v, a + b + c) |> f(a, b)
  
  defp f(r, a, _) when r < a, do: "F"
  defp f(r, a, b) when r < a + b, do: "M"
  defp f(_, _, _), do: "T" 
end
```

# B問題: Hit and Blow

```elixir 

defmodule Main do
  def main do
    IO.read(:line)
    as = IO.read(:line) |> list_to_i()
    bs = IO.read(:line) |> list_to_i()
    
    do_solve(as, bs)
  end
  
  defp list_to_i(str) do
    str
    |> String.trim()
    |> String.split(" ")
    |> Enum.map(&String.to_integer/1)
  end
  
  defp do_solve(as, bs) do
    as1 = MapSet.new(as)
    bs1 = MapSet.new(bs)
    i = MapSet.intersection(as1, bs1) |> Enum.count()
    j = Enum.zip(as, bs) |> Enum.count(fn {a, b} -> a == b end)
    IO.puts(j)
    IO.puts(i - j)
  end
end
```

# C問題: Collision 2

```elixir 
defmodule Main do
  def main do
    n = IO.read(:line) |> String.trim() |> String.to_integer()
    xys = 1..n |> Enum.map(&list_to_i(&1))
    s = IO.read(:line) |> String.trim()
    
    do_solve(xys, s) |> output() |> IO.puts()
  end
  
  defp list_to_i(_) do
    IO.read(:line)
    |> String.trim()
    |> String.split(" ")
    |> Enum.map(&String.to_integer/1)
  end
  
  defp do_solve(xys, s) do
    Enum.zip(xys, String.to_charlist(s))
    |> Enum.group_by(fn {[_, y], _} -> y end)
    |> Enum.any?(fn {_, list} -> f(list) end)
  end
  
  defp f(list) do
    try do
      r = list 
          |> Enum.filter(fn {_, c} -> c == 76 end)    #76は"L"
          |> Enum.map(fn {[x, _], _} -> x end)
          |> Enum.max()
      l = list 
          |> Enum.filter(fn {_, c} -> c == 82 end)    #82は"R"
          |> Enum.map(fn {[x, _], _} -> x end)
          |> Enum.min()
      l < r
    rescue
      _ in Enum.EmptyError -> false
    end
  end
  
  defp output(true), do: "Yes"
  defp output(false), do: "No"
end
```

# 最後に
とにかく書き方がわからないので、Ruby で解いたのを下敷きにして Elixir らしくないコードになっていると思います。
メモ：.latexmkrcで出力先のフォルダを指定する

# はじめに
.latexmkrc を編集することで中間生成物等を指定先のフォルダに保存する方法を忘れないように自分用のメモ。
正直、これから LaTeX 自体使うことがほぼなくなるので みることがあるのか...

# やり方
.latexmkrc に`$out_dir = (出力先のディレクトリ)`を記述してあげれば、指定したディレクトリに保存できる。<br>`$aux_dir`を記述すると中間生成物だけを指定したディレクトリに保存できる。
以下、自分の例を載せておきます。（out_dir の部分以外Tex Wikiの設定を引用しています。）
```.latecmkrc
if ($^O eq 'MSWin32') {
  $latex = 'platex %O -kanji=utf8 -guess-input-enc -synctex=1 -interaction=nonstopmode %S';
  $bibtex = 'pbibtex %O -kanji=utf8 %B';
  $makeindex = 'mendex %O -U -o %D %S';
  $dvipdf = 'dvipdfmx -f noembed.map %O -o %D %S';
  $dvips = 'dvips %O -z -f %S | convbkmk -g > %D';
  $ps2pdf = 'ps2pdf.bat %O %S %D';
  $pdf_mode = 3;
  $out_dir = 'out'; //$out_dir = %OUTPUTDIR%で出力先を指定 
  if (-f 'C:/Program Files/SumatraPDF/SumatraPDF.exe') {
    $pdf_previewer = '"C:/Program Files/SumatraPDF/SumatraPDF.exe" -reuse-instance';
  } elsif (-f 'C:/Program Files (x86)/SumatraPDF/SumatraPDF.exe') {
    $pdf_previewer = '"C:/Program Files (x86)/SumatraPDF/SumatraPDF.exe" -reuse-instance';
  } else {
    $pdf_previewer = 'texworks';
  }
} else {
  $latex = 'platex %O -synctex=1 -interaction=nonstopmode %S';
  $bibtex = 'pbibtex %O %B';
  $makeindex = 'mendex %O -o %D %S';
  $dvipdf = 'dvipdfmx -f yu.map %O -o %D %S';
  $dvips = 'dvips %O -z -f %S | convbkmk -g > %D';
  $ps2pdf = 'ps2pdf %O %S %D';
  $pdf_mode = 3;
  $out_dir = 'out';　//$out_dir = %OUTPUTDIR%で出力先を指定
}
```
# おわりに
`latexmk -h`でオプションを調べた時、`outdir=dir`出力先を指定できることはわかったけど、`$outdir = dir`だと出力先を変更できなかったのがよくわからない。.latexmkrc の記述ルールについて詳しく書いてあるサイトとかあれば教えてくださるとすごくうれしいです。
# 参考文献
[Tex Wiki : latexmk] https://texwiki.texjp.org/?Latexmk#ra50ed94
[引数について記述してくれてるQiita記事][Latexmkから学ぶPDF化までの処理の流れ](https://qiita.com/Rumisbern/items/d9de41823aa46d5f05a8)
Laravel9をinstallするためのcomposer.json

```bash
composer create-project --prefer-dist laravel/laravel:^9.0 <your project name>
```



```json
{
    "name": "laravel/laravel",
    "type": "project",
    "description": "The Laravel Framework.",
    "keywords": ["framework", "laravel"],
    "license": "MIT",
    "require": {
        "php": "^7.4|^8.0",
        "fruitcake/laravel-cors": "^2.0",
        "guzzlehttp/guzzle": "^7.0.1",
        "laravel/framework": "^9.0",
        "laravel/sanctum": "^2.11",
        "laravel/tinker": "^2.5"
    },
    "require-dev": {
        "spatie/laravel-ignition": "^1.0",
        "fakerphp/faker": "^1.9.1",
        "laravel/sail": "^1.0.1",
        "mockery/mockery": "^1.4.4",
        "nunomaduro/collision": "^6.0",
        "phpunit/phpunit": "^9.5.10"
    },
    "autoload": {
        "psr-4": {
            "App\\": "app/",
            "Database\\Factories\\": "database/factories/",
            "Database\\Seeders\\": "database/seeders/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\\": "tests/"
        }
    },
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi"
        ],
        "post-update-cmd": [
            "@php artisan vendor:publish --tag=laravel-assets --ansi --force"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi"
        ]
    },
    "extra": {
        "laravel": {
            "dont-discover": []
        }
    },
    "config": {
        "optimize-autoloader": true,
        "preferred-install": "dist",
        "sort-packages": true
    },
    "minimum-stability": "dev",
    "prefer-stable": true
}
```
メタキャラクタ ってなに？

## 勉強前イメージ

@とか/とかのイメージ。
どれがそうで、どれがそうでないとかはわからん

## 調査

### メタキャラクタ とは

特別な意味や役割を持つ文字列のことで、プログラミング言語やマークアップ言語の使用で定められています。

例えば、シェルでは以下のようなコマンドを打つときがあります。
* は .txtで終わるファイルの一覧を指しますが、これがメタキャラクタです。

```
ls -al *.txt
```

また、htmlなどでは以下のような<>で囲われたものは要素の開始・終了を意味します。

```
<h1>hello world</h1>
```

このように各言語で定められている特別な意味や役割を持つ文字列を `メタキャラクタ` といいます。

## 勉強後イメージ

今更話。
意識せずに使ってた感ある....

## 参考

- [メタキャラクタ](https://lpic-master.com/metacharacter)
- [メタ文字 【metacharacter】 メタキャラクタ](https://e-words.jp/w/%E3%83%A1%E3%82%BF%E6%96%87%E5%AD%97.html)
GrowthForecastをEC2にインストール

# はじめに

以前使っていたGrowthForecastを試してみようとしたら素直にインストールできなかったのでメモ書きを残します。

# 追記 

今普通に稼働させたいならDockerを使うのが簡単でした。
これ以降の手順でインストールし稼働させていたインスタンスのデータも以下のようにすることでDockerで起動したインスタンスから利用できました。また、タイムゾーンの設定を加えています。

``` bash
docker run -p 5125:5125 -d -e TZ=Asia/Tokyo -v /home/ec2-user/growthforecast:/var/lib/growthforecast kazeburo/growthforecast

```
https://github.com/kazeburo/GrowthForecast/tree/master/docker

追記終わり（2022/05/12 ）

# 環境

Amazon Linux 2

``` bash
$ uname -a
Linux ip-172-31-20-117.ap-northeast-1.compute.internal 5.10.102-99.473.amzn2.x86_64 #1 SMP Wed Mar 2 19:14:12 UTC 2022 x86_64 x86_64 x86_64 GNU/Linux
$ perl --version
This is perl 5, version 16, subversion 3 (v5.16.3) built for x86_64-linux-thread-multi
...
```

# インストール手順

以下のページの手順に沿ってインストールを進めました。

https://dev.classmethod.jp/articles/cloudwatch-to-growthforecast/

# 問題発生1

以下のコマンドのところで失敗
```
sudo cpan App::cpanminus
```

## 解決

EC2のインスタンスタイプを最小のt2.nanoにしていてメモリ不足で失敗していました。
インスタンスタイプをt2.microにしたら通りました。
メモリ使用量は500Mを少し超えたくらいでした。

# 問題発生2

最後の```$ cpanm -n GrowthForecast```でRRDToolのインストールに失敗

## 解決

参考サイトのIssueを見つけ、以下を実行したのち改めてGrowthForecastのインストールを実行し、完了しました。
``` bash
sudo cpan install Fatal
cpanm Alien::RRDtool
```

# 余談

参考サイトを見直したら以下でよかったのかもしれないが確認していません。

```sudo yum install perl-core ```

# 参考サイト

[Broken CPAN based install on Centos7: Fatal\.pm missing · Issue \#95 · xslate/p5\-Mouse](https://github.com/xslate/p5-Mouse/issues/95)
[GrowthForecast \- Lightning fast Graphing / Visualization](https://kazeburo.github.io/GrowthForecast/index.ja.html)
ノベルゲーム風の画像を作れるサービスを作った

# こんな画像を作れます
![sample (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1135021/de2e9a36-fe51-a204-fcee-55352a257b3e.png)

# ノベルゲーム画像メーカー
コンセプトは**フロントエンドだけで完結する画像Webサービス**

https://novelgamemaker.app/

## 作成に掛かった期間
２日

# ちょっと技術的な話
サービスは全部フロントエンド（HTML, CSS, JavaScript）で作りました。

作った目的は、ノベルゲームにハマっていたのと、技術的にフロントエンドでどこまで画像を使ったサービスを作れるか追求したかったからです。
（本音：バックエンドにかけるお金が無かったんだモーン）

構成としては、HTMLで入力した値をJSで処理してHTMLに返すだけ。
したがって、ホスティングサーバを借りてデプロイしたらすぐ動きます。

画像生成部分は（いま時点では）Canvasでミリミリ作っています。

# 月間運用コスト
- サーバ代
    - 99円
- ドメイン代
    - １３３円
- 合計
    - ２３２円

これが高いか安いかはうーんって感じです。
（だって広告とか置いてないから赤字だモーン）

# 今後の展望
現段階では、背景や人物はこちらで用意したものしか使えませんが、そのうちユーザが使いたい画像をアップロードして使えるようにしたいと思っています。
もちろん、フロントエンドだけで完結するというコンセプトは守り続けます。
（本音：だってサーバに画像あげたらストレージコストかかるモーン）

# お願い
もしよければQiitaコメントやサービスページ下部にある「質問や要望」リンクからフィードバック下さい。
あと、色んな人に使ってフィードバックを頂きたいので、Twitterとかでツイートしてくれると嬉しいです。
レンタルサーバー上のphpMyAdminにPHP7でPDOを使って接続する方法

## はじめに
備忘録
タイトルの通りです。
ローカルで作っていたものをサーバー上で公開しようとした時に、MySQLへのPDO接続のところで少しつまずいたことを書いておきます。
どなたかのお役に立てれば幸いです。
## ローカルでの開発時
phpMyAdminをローカル上に設置していたので、PDO接続時のhost指定は
```php
$pdo = new PDO(
   'mysql:host=localhost;dbname=test_db',
   'username',
   'password'
);
```
のようにlocalhostにしていました。
## 解決方法
localhostの部分をサーバー上に設定したMySQLホスト名にするだけで解決できました。
例えばXFREEサーバーなら
```diff_php
$pdo = new PDO(
-  'mysql:host=localhost;dbname=test_db',
+  'mysql:host=mysql1.php.xdomain.ne.jp;dbname=test_db',
   'username',
   'password');
```
となります。
## 参照
PDO接続のためのサンプルコードが載っているリファレンスを一応示しておきます。
https://www.php.net/manual/ja/pdo.connections.php
# ブログもあります
https://kyit.net/how-to-connect-to-phpmyadmin-on-xfree/
同じ作業めんどくさいから自分でコマンドを作ったわ

## 動機

自分だけの便利なコマンドを作りたいなと思ったことはありませんか？
私はコードを検証するためにフォルダを作成して、そのままVSCodeを開くことがよくあるので今回はnpコマンド(new projectを作成してvscodeを開く)を作りながらコマンドの作り方を解説します。著者のシェルはzshです。

## 事前準備

VSCodeに移動して「command」 + 「shift」 + 「P」で以下の画面が表示されるので 「code」と打ち込み codeコマンドをインストールしてください。
![スクリーンショット 2022-03-19 22.30.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1295942/5426c7a4-23cf-df8c-125e-6f87316b5d82.png)

## コマンドを作る

## コマンドファイルを作る

ホームディレクトリにいることを確認して以下を順番に実行してください
```
mkdir command
cd command
touch np
chmod 777 np
```

## シェルスクリプトを書く

vimエディタを開き
```
vim np
```

以下を記述します。これがコマンドの実行内容になります。
```zsh:
#!/bin/sh

if [ $# != 1 ]; then
    echo "Please tell me the project name"
    exit 0
fi

# current directory path
current_dir=`pwd 2>&1`

# project name
folder=$1

# make project folder
mkdir $folder

# project path
path="${current_dir}/${folder}"

# open vscode but you have to install code
code $path
```

## どのディレクトリにいても実行できるようにする

コマンドを実行できるようにするために2パターンあるので紹介します。

## case 1. PATHを追加する

PATHってなにそれおいしいの？っていう人のために説明すると、以下を実行するとPATHを確認することができます。

```
echo $PATH
```

見やすく整形する
```
echo $PATH | sed -e 's/:/\n/g'
```

環境変数を見ても確認できます。
```
env
```

:で区切られており、実行ファイルはこの配下にあるよというリストになっている。実際に/usr/local/binの配下にはインストールしたcodeコマンドが存在する。わざわざ長いパスを記述する手間を省くためです。

```
/usr/local/bin:
/usr/bin:
```



以下のようにすることでPATHを追加することができます。

```
export PATH=$PATH:コマンド検索パス
```

今回の場合だと以下のようにすればOK

```:~/.zshenv
export PATH="$PATH:$HOME/command"
```

詳しいことは以下のサイトで↓↓↓

https://wa3.i-3-i.info/word18471.html


## case 2. シンボリックリンクを貼る

```
ln -si ~/command/np /usr/local/bin
```

詳しいことは以下のサイトで↓↓↓

https://wa3.i-3-i.info/word1151.html

## 実証

以下のコマンドを実行することで現在いるディレクトリ配下でフォルダが作成されVSCodeが開かれました。意外と簡単だったので独自のコマンドをたくさん作ってみよう。

```
np new-project 
```

https://github.com/ymktmk/command.git

## 参考文献

https://qiita.com/TomohiroSaito/items/1393ce5a01b75adcbf30
ZeroSimのサンプルロボットアームを動かしてみた

# 要約

unityとROSの連携機能があると聞いて[ZeroSim](https://github.com/fsstudio-team/ZeroSimROSUnity)を触ってみた。
READMEの手順通りだとロボットアーム(UR)が動かなかったので、原因を調べてrqt_joint_trajectory_controllerで動くようにした。

# 環境

OS：Ubuntu18.04
ZeroSimバージョン:0.1.17 (2022年2月時点の最新版)
unityバージョン：2020.3.31

# 前準備

ZeroSimのREADMEの通りにSetting up a new Unity ProjectとGetting ZeroSim ROS Docker Containerをやる。

# 課題点

READMEの「Running Universal Robot UR10 Arm Test Scene with MoveIt!」の節に従いRvizがすでに立ち上がっているVNCにアクセスするまでは手順通り進んだがmoveitが動かない。

unity側のur10のInspectorに「ZO Arm Controller」というコンポーネントがあり、これのStartController関数が呼ばれたときにコントローラが有効になるようだが、再生直後のUnityコンソールでログを確認したところStartControllerしていない。

ROS側のrqt_joint_trajectory_controller上でも確認したところ
undefined_ur10/controller_managerなるコントローラマネージャはあるがコントローラはない状態だった。
READMEには書いてないがコントローラのセットアップが必要そうだ。

# やったこと

Unity再生後にVNC上でターミナルを開き、controller_managerでコントローラのリストを確認する。

```
rosservice call /undefined_ur10/controller_manager/list_controllers 
```
arm_controllerという名前のコントローラが1つ見つかるので、ロードする。

```
rosservice call /undefined_ur10/controller_manager/load_controller "name: 'arm_controller'"
```

最後にコントローラをスタートする。

```
rosservice call /undefined_ur10/controller_manager/switch_controller "start_controllers: ['arm_controller']
stop_controllers: ['']
strictness: 1
start_asap: false
timeout: 10.0"
```

ここまで実行するとrqt_joint_trajectory_controllerにarm_controllerが追加され、動かすこともできるようになる。
(ただ、デモ用のモデルはアームと他のオブジェクト間には衝突判定があったが、アームを折り曲げてアームの根本に触れさせてみたところすり抜けてしまったのでそこは要改善)

# まとめ
ROSコントローラマネージャ周辺の勉強になった。
コントローラのロードとスイッチをlaunchに書けば自動でやってくれるgazebo+rosさんいつもありがとう。
Go言語でWebAssemblyを実装

## 簡単なWebAssemblyを実装

モジュールディレクトリの作成と**go.mod**を生成します。

```sh
mkdir wasm
cd wasm
go mod init example.com/wasm
```

**main.go**を作成します。

```go
package main

import "fmt"

func main() {
	fmt.Println("Hello, WebAssembly!")
}
```

Go言語のビルドコマンドに環境変数**GOOS = js**、**GOARCH = wasm**を設定して、**main.go**をWebAssembly用にコンパイルして**main.wasm**を生成します。

```sh
GOOS = js GOARCH = wasm go build -o main.wasm
```

**main.wasm**だけでは動かないので、**wasm_exec.js**(JavaScriptサポートファイル)をコピーします。

```sh
cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .
```

**wasm_exec.js**を使って**main.wasm**を実行する**index.html**を作成します。

```html
<html>
	<head>
		<meta charset="utf-8"/>
		<script src="wasm_exec.js"></script>
		<script>
			const go = new Go();
			WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => {
				go.run(result.instance);
			});
		</script>
	</head>
	<body></body>
</html>
```

あとは、WebサーバーのDocumentRootに**index.html**、**main.wasm**、**wasm_exec.js**を配置してブラウザでアクセスすれば、コンソール(開発ツール)に「Hello, WebAssembly!」の文字列が表示されます。

```
DocumentRoot
├── index.html
├── main.wasm
└── wasm_exec.js
```

## Go言語でJavaScriptを制御する

このままだと**main.wasm**が実行後すぐに終了してしまい、JavaScriptのイベントを受け取れません。そこでチャンネルを生成して、チャンネルを受信するまでmain関数をブロックするようにします。

```go
func main(){
	done := make(chan int)

	// 処理

	<-done
}
```

JavaScriptを制御するための[syscall/js](https://pkg.go.dev/syscall/js)モジュールをimportします。

```go
import "syscall/js"
```
syscall/jsのパッケージを使えば、JavaScriptをGo言語から制御することも、JavaScriptからGo言語を実行することも可能です。

#### JavaScriptからGo言語を実行するためのJavaScriptの関数をGo言語で定義する

```go
var goFunc js.Func
defer goFunc.Release()
goFunc = js.FuncOf(func(this js.Value, args []js.Value) interface{} {
	arg1 := args[0]
	log.Printf("arg1=%v", arg1) // ブラウザのコンソールに出力
	return nil
})
js.Global().Set("goFunc", goFunc)
```

#### Go言語からJavaScriptのjsFunc関数を実行する

```go
js.Global().Get("jsFunc").Invoke(arg1)
```

※ wasmを実行しているHtmlにjsFunc関数が定義されている必要があります。

#### JavaScriptのEventListenerにGo言語で定義したJavaScriptの関数を登録する

```go
var onChangeMyText js.Func
defer onChangeMyText.Release()
onChangeMyText = js.FuncOf(func(this js.Value, args []js.Value) interface{} {
	event := args[0]                                   // eventオブジェクト
	myText = event.Get("target").Get("value").String() // event.terget.valueのJSコードと同等
	return nil
})
js.Global().
	Get("document").
	Call("getElementById", "myText").
	Call("addEventListener", "change", onChangeMyText)
```

#### beforeunloadmイベントにmainを止めているチャンネルにメッセージを送るメソッドを登録する

```go
var onBeforeunload js.Func
defer onBeforeunload.Release()
onBeforeunload = js.FuncOf(func(this js.Value, args []js.Value) interface{} {
	done <- 1 // チャンネルに値を送信してアプリを終了する
	return nil
})
js.Global().
	Call("addEventListener", "beforeunload", onBeforeunload)
```
User Type Guardを使おう

# 型ガードとは
TypeScriptで型を宣言する方法はいくつかありますが、コンパイラに型を学習させる方法として型ガードがあります。

例えば、以下のようなコードはコンパイル時にエラーになります。

```.ts
class Dog {
    run() {}
}

class Fish {
    swim() {};
}

const move = (creature: Dog|Fish) => {
    // error: Property 'swim' does not exist on type 'Dog | Fish'.
    creature.swim();
}
```

以下のように型をコンパイラに教えてあげることで回避できます。
型を教えることで誤ったプロパティの呼び出しを防いでいます。

```.ts
const move = (creature: Dog|Fish) => {
    if (creature instanceof Fish) {
        creature.swim();
    }
}
```

# User Type Guard
上記の例のようにコンパイラへの型情報を提供することもできますが、`is`を使ったUser Type Guardを使うこともできます。
こちらの方が型チェックを使いまわすことができ、直感的なコードを書くことができます。

```.ts
interface Creature {
    name: string
}

class Dog implements Creature {
    name = '';
    run() {}
}

class Fish implements Creature {
    name = '';
    swim() {};
}

const move = (creature: Creature) => {
    if (isFish(creature)) {
        creature.swim();
    }
}

// User Type Guard
const isFish = (creature: Creature) : creature is Fish => {
    return creature instanceof Fish;
}
```
GitHubからcreat-react-appしたアプリをクローンし別のPCで起動する方法

# 同じアプリを自宅用のPCと外出用のPCで作業を行いたい
私は自宅用のPCと外出する時用のPC2つを持っていますが、
アプリを開発する際、GitHubを利用してそれぞれのPCで作業を行いたい。
家で作業をし、外出する前には書いたコードのプッシュを行い、外ではそのプッシュしたソースコードを外出用のPCにプルしてきて続きをやりたい。
そんな時にエラーが発生した。

# 実際のアクション
- 自宅用のPCでcreate-react-appを行いアプリの雛形を作成
- 外出用のPCではReactの環境構築が住んでいることを前提とする
- この時自宅用のPCから外出用のPCで作業を行いため自宅用のPCで作成したアプリをGitHubにプッシュする
- その後外出用のPCに先程プッシュしたアプリをクローンする。
- 実際にアプリが起動するか確認を行う。
- するとアプリが起動できずエラーが出るので今回はその対象方法を記述する

# 解決方法
- 外出用のPCにアプリをクローンしたらそのアプリのディレクトリ内で`node_modules`の削除をし以下のコマンドを実行する。
```terminal
% rm -rf node_modules
% npm install
```
- 最後にアプリを実際に起動してみる
```terminal
% yarn start
// もしくは
% npm start
```

無事起動ができたらお疲れ様でした！
crontabでnanoではなくviを使うには

最近会社で聞かれて答えたことをまとめてみました。

> 客先サーバーで"crontab -e"を使おうとしたら、いつもとは違う編集画面が表示された。いつもの編集画面を表示するにはどうすればいいか。

いつもの編集画面とは"vi"のことで、今回の編集画面は"nano"です。今回のサーバーはOS部分を客先が構築しているため、弊社導入アプリケーション以外の設定を変更したくないという状況です。

実は、一時的に変更する方法を会社で試してもらいましたが、うまく動作しませんでした。そのため、その場は"nano"で編集してもらいました。後でテスト環境下で試したところ、うまく動くことが確認できたので、コマンド(環境変数名の指定)を間違えていたのだろうか。

# OS環境

対象サーバーのOSはDebianでした。Debianのバージョンは"/etc/debian_version"に書かれているようです。会社では即答できなかったので、その時のバージョンは不明です。

以下は"docker run -it --rm debian /bin/bash"の環境下で試しています。"cat /etc/debian_version"を試すと"11.2"となっていました。

# 準備

cronとvimとnanoが動作する必要があります。また、説明上"man"も使っています。そのため、以下のコマンドを実行しています。

```
apt-get -qq update
apt-get -qq install cron vim nano man less
```

# 初回動作

crontab を初めて起動すると、このようになります。

```
root@614feb1aec10:/# crontab -e
no crontab for root - using an empty one

Select an editor.  To change later, run 'select-editor'.
  1. /bin/nano        <---- easiest
  2. /usr/bin/vim.basic

Choose 1-2 [1]:
```

"使用するエディタを選択してください"という状況です。ここでは"nano"を選択しておきます。

"nano"を選択すると、次回以降はエディタ選択の画面にはなりません。"nano"を使用した編集画面が表示されます。

# 設定を変更する方法

会社で聞かれたケースでは、設定変更しない前提でした。設定変更してよい場合はどうすればいいでしょうか。

前節では、初回動作の動きを説明しました。そのメッセージをよく読むと書いてあります。コマンド"select-editor"を使用すると、初回起動同様、エディタ選択の画面が表示されます。

# 設定を変更しない方法

設定を変更しない方法のヒントは、"man crontab"に記載されています。該当部分を抜粋します。

> The -e option is used to edit the current crontab using the editor specified by the VISUAL or EDITOR  environment  variables. After  you  exit  from the editor, the modified crontab will be installed automatically.  If neither of the environment variables is defined, then the default editor /usr/bin/editor is used.

環境変数VISUALあるいはEDITORを変更することでエディタを切り替えられること、変数設定がない場合には"/usr/bin/editor"が使用されることが書かれています。"ls -l /usr/bin/editor"を見てみると少し理解が深まると思います。

環境変数を一時的に変更しながら"crontab -e"を起動すれば、viで実行できます。

コマンド単独で環境変数を変更するなら、以下のコマンドです。

```
EDITOR=vi crontab -e
```

あるいは、SSHセッション単位で環境変数を変更する、logoutで元通りだから気にしなくていい、というなら、以下のコマンドです。

```
export EDITOR=vi
crontab -e
```

# 雑感

"crontab"の基本的な質問を受けると、"crontab -r"対策が必要ではないだろうかという不安がよぎります。
Docker ComposeでLAMP環境構築

## はじめに
Dockerを勉強しているので、メモも兼ねて自分なりの解釈を記事に残していこうと考え、投稿しています。
勉強途中のため、間違っている部分、非効率な部分などなどあると思います。その際は、ご指摘いただけたら嬉しいです。

## 本投稿の行うこと
Docker Composeを用いてLAMP環境を構築する

## Docker Composeとは
複数のDockerコンテナを同時に連携して動かしたい時に使います。
Dockerコンテナ一つに対して一つのサービスが望ましいため、LAMP環境のような複数のサービスを同時に起動する環境を整える場合はDocker Composeを使用するのが望ましいです。

もちろんDocker Composeを使用しなくても、一つのコンテナにLAMP環境を構築することもできます。

## Docker Composeの基礎知識
Dockerで一つのコンテナを作成する場合、「Dockerfile」が設計図となり、そこに記述されている内容をもとに環境が構築されます。
複数のコンテナを一括で作成して連携していくDocker Composeでは、「docker-compose.yml」が設計図となります。
各種コマンドを使用する場合は、「docker-compose.yml」ファイルが置かれているディレクトリで実行する必要があります。

## LAMP環境を構築
###### ディレクトリ構成 
```
/ -- docker-compose.yml
               web-php/ -- Dockerfile
                  html/ -- index.html
```

### ファイルを準備する

###### docker-compose.yml
```yml:docker-compose.yml
# docker-composeファイル形式のバージョンを示す
version: '3'

services:
  # webという名称のサービスを定義している
  web-php:
    # buildで指定されたディレクトリにあるDockerfileを使用する
    build: ./web-php
    # コンテナ名を指定する
    container_name: web-php
    # volumesでディレクトを指定することで、ローカルディレクトリとコンテナ内を同期できる
    volumes:
      - ./html:/var/www/html
    # このサービスが公開するポート番号を指定する | ホスト側のポート番号:コンテナ内のポート番号 |
    ports:
      - "8080:80"
    # depends_onでサービス間の依存関係を指定できる(dbコンテナが起動してからweb-phpコンテナが起動する)
    depends_on:
      - db

  db:
    # imageでDockerfileを使用せずにyml内で直接イメージを指定できる
    image: mysql:5.7
    # コンテナ名を指定する
    container_name: db
    # environmentで環境変数を定義する
    environment:
      - MYSQL_ROOT_PASSWORD=password
```

###### Dockerfile
```Dockerfile:Dockerfile
FROM php:7.3-apache
```

###### index.html
```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Test Page Welcome!</h1>
</body>
</html>
```

###### ポイント
- docker-compose.yml
volumesを設定し、ローカルとコンテナ内を同期することで、ローカルで書いたソースコードを即時反映してデバックなどが可能。

- Dockerfile
docker-composeでもDockerfileを使用することができるので、細かいコンテナの操作(RUN COPYなど)を実行することができる

### Docker Composeを使用する
ファイルが準備出来たら、以下のコマンドを実行してコンテナを作成・起動しましょう。
```
docker-compose up -d
```
これで、「docker-compose.yml」に記述した二つのコンテナ(web-php・db)が起動している。
以下のコマンドで確認することができる。
```
# 現在起動中のコンテナを閲覧
docker-compose ps

# 作成済みのコンテナ(停止中を含む)を閲覧
docker-compose ps -a
```

###### localhostにアクセス
localhostにアクセスできれば構築成功です。
```
http://localhost:8080
```

## 今後の課題
・php.iniをdockerの利点を活用してスマートに作成する方法を学習する。
・dockerを使用してLaravelの環境を構築できるようになる。

## 参考情報
- [DockerでサクッとLAMP環境を構築してプログラムを動作させたい|やまでぃーのブログ](https://yama-itech.net/construct-lamp-with-docker)

- [Docker-ComposeでLAMP環境構築 | IT職種コラム](https://it-kyujin.jp/article/detail/134/)
SwiftUIでSpriteKitを使用する

モバイルゲームアプリケーション開発を学ぶにあたり、Xcode のゲームテンプレートが作成する UIKit ベースのプロジェクトではなく、現在主流の SwiftUI ベースのプロジェクトで開発を始めたかったため、調べてみました。

## iOS 14以降の実装

学習を目的としたため、調べた中で最もミニマムな実装をしている次のサイトを参考にしました。

https://www.createwithswift.com/using-spritekit-in-a-swiftui-project/

iOS の App テンプレートで、インターフェースに SwiftUI、プログラミング言語に Swift を選択したプロジェクトを作成します。

プロジェクトへ GameScene.swift という名前の Swift File を追加します。GameScene.swift を次の内容へ書き換えます。

```swift:GameScene.swift
import SpriteKit

class GameScene: SKScene {
    override func didMove(to view: SKView) {
        // something
    }
}
```

既存の ContentView.swift ファイルを次の内容へ書き換えます。

```swift: ContentView
import SwiftUI
// [1] SpriteKit をインポートします。
import SpriteKit

struct ContentView: View {
    // [2] GameScene を初期化し、変数へ格納します。
    var scene: SKScene {
        let scene = GameScene()
        scene.scaleMode = .resizeFill
        return scene
    }
    
    var body: some View {
        // [3] SpriteView をレンダリングします。
        SpriteView(scene: self.scene)
            .ignoresSafeArea()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
```

## iOS 13以前の実装

SKView は UIKit の UIView であるため、UIViewRepresentable プロトコルを採用するコンテナを作成することで SwiftUI のビュー階層へ統合できるようです。

UIViewRepresentable プロトコルは、公式リファレンスを参照しました。

https://developer.apple.com/documentation/swiftui/uiviewrepresentable

SKView を UIViewRepresentable プロトコルでラップする例は、次のサイトを参考にしました。

https://developer.apple.com/forums/thread/117691

最もミニマルな実装のプロジェクトへ SKViewContainer.swift という名前の SwiftUI View を追加します。SKViewContainer.swift を次の内容へ書き換えます。

```swift: SKViewContainer.swift
import SwiftUI
import SpriteKit

struct SKViewContainer: UIViewRepresentable {
    typealias UIViewType = SKView
    
    var skScene: SKScene!
    
    init(scene: SKScene) {
        skScene = scene
        // 必要に応じて書き換えます。
        self.skScene.scaleMode = .resizeFill
    }
    
    func makeUIView(context: Context) -> SKView {
        let view = SKView(frame: .zero)
        // デバッグのためのコードです。
        view.showsFPS = true
        view.showsNodeCount = true
        return view
    }
    
    func updateUIView(_ view: SKView, context: Context) {
        view.presentScene(context.coordinator.scene)
    }
    
    class Coordinator: NSObject {
        var scene: SKScene?
    }
    
    func makeCoordinator() -> Coordinator {
        let coordinator = Coordinator()
        coordinator.scene = self.skScene
        return coordinator
    }
}

struct SKViewContainer_Previews: PreviewProvider {
    static var previews: some View {
        // プレビューは表示できません。
        SKViewContainer(scene: SKScene())
    }
}
```

既存の ContentView.swift ファイルを次の内容へ書き換えます。

```swift:ContentView.swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        SKViewContainer(scene: GameScene())
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
```
MSYS2のダウンロードとインストールを自動で行う方法


# 3行で説明

面倒なインストール、なんとかしたいですよね。
そこでscriptを書きました。コマンドプロンプトに貼ってENTERで7分～30分放置すればインストール完了です。
```bat
curl.exe -L https://raw.githubusercontent.com/cat2151/msys2-auto-install/main/MSYS2_get_and_install.bat --output MSYS2_get_and_install.bat && MSYS2_get_and_install.bat
```

# この記事の対象読者
以下に興味のある方。何かの参考になれば幸いです。
- MSYS2
- C/C++ソースコードをコンパイル
- Windowsでgcc & clang
- ポータブル、環境を汚さない
- MSYS2のない環境でも実行できるexe（DLL依存しない）
- GitHubからcurlしたscriptで非対話的インストール

# このscriptは何を実現するの？
- 以下を自動化します :
  - MSYS2を公式サイトからダウンロードする
  - MSYS2をカレントディレクトリ配下にインストールする
    - レジストリやシステム環境変数に影響を与えません
    - 任意のディレクトリに移動しても動作します
  - MSYS2にgccとclangをインストールする
  - hello worldをコンパイルして実行する
    - MSYS2がない環境でも動作します（DLLに依存しません）
  - mingw64起動batを生成する
    - このbatを実行するとMSYS2にmingw64モードでbashログインしてgccとclangが使えます
  - 上記すべてのログを出力する

- 環境を汚さないため、手軽に扱えます。
- コマンドプロンプトから1行のコマンドを実行するだけで自動ですべてが完了します。面倒な操作は不要です。

# 公式の手順と概ね同じです
- それを自動化しただけのものですので、メンテナンスは楽な見込みです。

# さらに詳しく
GitHubをご参照ください :
[MSYS2 auto install](https://github.com/cat2151/msys2-auto-install)

# 関連記事
[Cygwinのダウンロードとインストールを自動で行う方法](https://qiita.com/cat2151/items/38fe897378ef91b584d6)
[WSL2 + Docker + MinGWで、自動でhello worldをWindows用にクロスコンパイルする方法](https://qiita.com/cat2151/items/8ae0969204f1a38e1b4d)
クラウドでビジネスがどう変わる？

# クラウドとは
`ユーザーがインフラやソフトウェアを持たなくても、インターネットを通じて、サービスを必要なときに必要な分だけ利用するという考え方です。`
今まではハードウェアを購入したり、ソフトウェアをパソコンにインストールする必要がありましたが、インターネットを通じることで __物理的なハードを必要とせずに__ サービスを使うことができるのが大きな特徴です。

# クラウドでビジネスがどう変わる？
### ■売り切りからサブスクリプション型へ
クラウドの考え方が浸透するまでは売り切り型のビジネスモデルが一般的でした。
売り切り型とは、商品を顧客に売ることを目的としており、顧客が購入してくれたタイミングで利益を得ることができますが、それ以上追加の利益を受けることはできません。
それに比べサブスクリプション型は、顧客が商品を購入してくれた日(契約日)にも料金が生じる場合がありますが、基本的には顧客に提供するサービスの内容に対して料金が課され、それを月額や年額というような形で定期的に顧客から受け取るようなイメージです。

>では、なぜサブスクリプション型が主流のビジネルモデルになってきているのでしょうか？

それを考えるためには経営者の視点で考えてみる必要があります。企業を経営するには多くの問題がありますが、その中でもっとも大きな問題の1つが __資金繰り__ です。もう少し具体的にいうと、 __企業が持つキャッシュを途切れさせないこと__ です。
利益が損失を上回っているような企業でも、資金繰りには困ることが多々あります。たとえば、1件の受注額は大きいがその分契約に結びつけるのが難しい商品を取り扱っている企業がその代表例です。1回で入ってくる金額は大きいですが、利益がでない期間が長くなるとその間に貯蓄が削られ、最終的にキャッシュが足りなくなるのです。
>ではどうすればいいでしょうか？

察しの言い方はお気づきかもしれませんが、ビジネスモデルを売り切り型からサブスクリプション型に転換させればいいのです。サブスクリプション型は収益が上がるまで時間がかかりますが、継続的に安定した収益を得ることができます。また、未来の収益も予測しやすいので、投資の目処も立てやすいです。
このサブスクリプション型のビジネスモデルにはクラウドが非常に適しています。クラウドを用いた場合は、必要な時に必要な量のサービスを提供できるため、1度の大きな収益ではなく、定期的な収益を確保することができるのです。

### ■導入障壁が低くなる
クラウドサービスは利用形態によって大きく次の3種類に大別されます。
・Saas(Software as a service)
 　 →クラウドサーバーにあるソフトウェアをインターネットを通して使用する
・Paas(Platform as a service)
 　 →プラットフォーム(OSやミドルウェア)をインターネットを通して使用する
・Iaas(Infrastructure as a service)
 　 →インフラ(仮想サーバをはじめとして機材やネットワークなど)をインターネットを通して使用する

ポイントは3つ全てに共通する __インターネットを通して使用する__ という部分です。
つまり、今まではコンピューター本体にインストールしていたものをインターネットを通じて、サービスとして(as a service)使おうという考え方です。

ソフトウェアをインストールしたり、新たなハードウェアを設置する必要がなくなるため、 __スピーディーに導入__ できるだけでなく、 __コストを抑える__　ことができます。
つまり、クラウドを使用することで導入障壁が低くなるのです。

# 終わりに
昨今のコロナウイルスの影響により、テレワークがトレンドになっています。そんな中、オフィス内からしか業務システムにアクセスできないような閉じた環境ではなかなかテレワークに移行できません。それに対して、クラウドサービスはインターネットさえ使用できる環境があればどこからでも使用できます。今後オンプレミス(自社に情報システムを保有しサーバーの運用をする形態)からクラウドへの移行はますます促進されるでしょう。
all_of,any_of,none_of 対応表


|         | empty | all true | all false | mixed |
| ------- | ----- | -------- | --------- | ----- |
| all_of  | true  | true     | false     | false |
| any_of  | false | true     | false     | true  |
| none_of | true  | false    | true      | false |

* 処理結果に迷う時がある(特に空の時)ので、表にして整理してみました。



# Note

* all_of,any_of,none_of は相互に書き換え可能。(i.e. 以下の3つの式は同等。)
  * `all_of( ary, func ) ;`
  * `none_of( ary, not_fn( func ) ) ;`
  * `!any_of( ary, not_fn( func ) ) ;`
<!-- * all_of は、条件を満たす物の個数が要素数と等しいか見る関数ともとれる。 -->
* 条件を満たす物の個数に着目すると、空の時の結果が分かりやすい(かも)。
  * i.e. `all_of( ary, func ) ;` は `count_if( ary, func ) == ary.size() ;` と同等。 [^1]
* boost の `boost::algorithm::all_of` 及び C++20 の `std::ranges::all_of` を使うと、
イテレータで無く配列などを、引数へ与える事が出来る。
* boost に、似た名前の one_of という関数が有るが、これは別物なので注意。
  * 条件を満たす要素の個数が、唯1つのみの時に、true を返す。

# 参照

C++日本語リファレンス

* https://cpprefjp.github.io/reference/algorithm/all_of.html
* https://cpprefjp.github.io/reference/algorithm/none_of.html
* https://cpprefjp.github.io/reference/algorithm/any_of.html

[^1]: 実行効率には差異が出る事に留意。
[Android Studio] エラー "..." is translated here but not found in default locale


# 概要
Resourceのstrings.xmlで問題が無いのにエラーの波線が表示されました。
![スクリーンショット 2022-03-19 22.27.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/bcf0cae9-6f18-6f66-4645-3e9d70acb7f5.png)


エラー文はこんなのが表示されました。
"to_do_logo" is translated here but not found in default locale

# 解決方法
そのままでアプリを実行すればエラー表示は消えました！

stack overflowを見てみると、他にも解決方法はあるようです。
とりあえずこちら側に問題があって発生するエラーでは無いようです。
https://stackoverflow.com/questions/50027691/is-translated-here-but-not-found-in-default-locale-error-in-strings-xml-with-t
KubernetesのSecretの値をデコードして確認する

# はじめに
KubernetesのSecretの値はエンコードされているだけなので、デコードすれば値が確認できる。
その確認方法。

# 確認方法

kubectl describeでkey-valueのkeyの値がわかる（ここではpassword）

```
$ kubectl describe secrets secret1
Name:         secret1
Namespace:    default
Labels:       <none>
Annotations:  <none>

Type:  Opaque

Data
====
password:  6 bytes
```

keyの値を指定して、valueの値をデコードする。

```
$ kubectl get secret secret1 -o jsonpath="{.data.password}" | base64 -d
123456
```
玉手箱の空欄推測問題をPythonで解いてみた

# はじめに
就活を始めると大体の人が適性検査を受けることになりますが，Web上で受ける知能に関する検査は大きくSPIと玉手箱の２種類があると思います．そのうちの玉手箱には下の図のような表を読み取って，空欄に当てはまる値を予測させるという問題が出ます．

<img width="600" alt="tama.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407395/2f4fa4a2-6dc0-8c0c-354c-feed079dcd8a.png">

(https://jyosiki.com/spi/tama31_a.html より引用)

この問題であれば，答えの選択肢として
① 495　② 510　③ 525　④ 540　⑤ 555
の５つがあります．ちなみに模範解答は②らしいです．

私はそこまで頭が良くないので，これらの知能テストがすこぶる苦手です．特にこの類推問題関連は難しすぎて「絶対に答えが一意に定まらないだろ」と発狂しながら解いていました．なので，面倒くさいことはPythonにやらせてしまおうということで，この問題を解いてくれるプログラムを作りました．ついでに見栄えを良くするためにGUIも実装しました．

# 概観
プログラムの見た目としては以下のような感じです．値を入力してポチッと押すと答えが出力されます．

### 表の内容を直接入力するか，スクリーンショットから読み込む
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407395/3dca8d5b-6acb-1107-b20b-245a77a570eb.png">

### スクリーンショットの場合は表の位置を範囲選択
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407395/0f4caf15-1d90-19eb-adc0-c39ec20edadd.png">

### 計算
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407395/4c3d3987-370a-8ba4-0322-d2c5ae934046.png">

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407395/8d4ac083-c346-1b0f-994b-47a38b719bb3.gif">

# 必要な要素
今回の実装は以下の3つの部分に分けて実装を行いました．それぞれの実装について，別々の記事で解説しているので，よかったら見ていってください．
- [問題を入力するためのGUI部分](https://qiita.com/sekishoku/items/4d92856139d1a5a943ea)
- [表を読み取る文字認識の部分](https://qiita.com/sekishoku/items/532e34981da9126b737e)
- [問題を実際に解くソルバー部分](https://qiita.com/sekishoku/items/9bb316e982769fa800c3)

全体のコードは[ここ](https://github.com/runno0331/tama_table_solver)に置いてあります．

# 実際に使ってみた
早速作ってみソルバーで先程の問題を解いてみました．バイアス有りとなしの両方で試しました．

## バイアスなし
<img width="600" alt="result.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407395/191c6fd1-6748-f35a-4eda-939169ba1779.png">

計算結果は499.63になりました．最初の選択肢で一番近いものは①ですね．

## バイアスあり
<img width="600" alt="result2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407395/f846506a-0eb0-ad32-03b1-a97520317737.png">

バイアス有りの場合だと答えは526.37になりました．この場合は③です．

どちらの場合も模範解答の選択肢よりも別の選択肢の方が値が近いですね．更にいうと，バイアス有りとなしで予測結果がかなり異なることから解答が一意に定まらないことがわかります．うーん．答えが一意に定まらない問題を出さないでほしいです．

ただ，問題によっては答えが一意に定まるものもあるので，今回持ってきた問題が悪いという可能性もあります．

# おわりに
やっぱり玉手箱の類推問題は嫌い

[玉手箱の空欄推測問題をPythonで解いてみた](https://qiita.com/sekishoku/items/fa1f2d852523cb6f3835)
[玉手箱の空欄推測問題をPythonで解いてみた 〜GUI編（Tkinter）〜](https://qiita.com/sekishoku/items/4d92856139d1a5a943ea)
[玉手箱の空欄推測問題をPythonで解いてみた 〜文字認識編（pyocr）〜](https://qiita.com/sekishoku/items/532e34981da9126b737e)
[玉手箱の空欄推測問題をPythonで解いてみた 〜ソルバー編〜](https://qiita.com/sekishoku/items/9bb316e982769fa800c3)
【Flutter】TableのWidgetに枠線（border）を付けたい

## 概要
FlutterにはHTMLと同様に、テーブルのレイアウトで要素を配置するWidget、[Table class](https://api.flutter.dev/flutter/widgets/Table-class.html)が用意されています。今回はこのTableのWidgetに、枠線（border）をどうやって付けるのかをメモ書きします。

## 対応
基本的には`border`プロパティにて、[TableBorder.all](https://api.flutter.dev/flutter/rendering/TableBorder/TableBorder.all.html)を呼び出せば、枠線を設定できます。
テーブルの中の線と外の線を変えたいなど、細かい設定をしたい場合は、[TableBorder.symmetric](https://api.flutter.dev/flutter/rendering/TableBorder/TableBorder.symmetric.html)を使用します。

## 実装
`TableBorder.all`を設定したサンプルは以下です。（Widgetのbuild部分だけ抜粋）

```dart
@override
Widget build(BuildContext context) {
  return Column(children: <Widget>[
    Table(
      border: TableBorder.all(),
      children: const [
        TableRow(children: <Widget>[
          TableCell(child: Text("テスト1")),
          TableCell(child: Text("テスト2")),
          TableCell(child: Text("テスト3"))
        ])
      ])
  ]);
}
```

以下のように表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32098/3aa8b49a-64df-1fb5-7271-850edac0ee83.png" width=500/>

## その他参考
[【Flutter】Table Widgetでマス目状に文字を配置する](https://dtpscriptin.com/flutter-table-widget/)
Problem 100: 確率2分の１になる配合

* 本記事は[ProjectEuler](https://projecteuler.net/about)の「100番以下の問題の説明は記載可能」という規定に基づいて回答のヒントが書かれていますので、自分である程度考えてみてから読まれることをお勧めします。

### 問題 100. 確率2分の１になる配合

原文 [Problem 100: Arranged probability](https://projecteuler.net/problem=100)

**問題の要約：合計n個の青と赤のディスクが入った箱からランダムに2枚取り出したときに青が2枚になる確率$P(BB)$がちょうど50%に$n>10^{12}$で初めてなるような青のディスクの枚数を求めよ**

ちょうど50%になる最初の2つの例は以下になります。

| ディスクの合計（n）| 青のディスク（b） |青が2枚になる確率$P  (BB)$| 
| :----:  | :---: | :---: |
| 21 | 15| $(15/21)×(14/20) \\ = 1/2$ |
| 120 | 85 | $(85/120)×(84/119) \\ = \frac{1}{2}$ |

100問の最後になる問題ということでかなり難しい問題となっていますね。

これは式にすると以下のようになります.

```math 
\large \frac{b(b-1)}{n(n-1)} = \frac{1}{2} \\
展開すると　\\
\large 2b^2-2b-n^2+n=0
```
となり2元2次不定方程式のディオファントス方程式の整数解を求める問題になります。これは過去に投稿した「[2元2次不定方程式をfind_DNでペル型方程式に変換して解く](https://qiita.com/masa0599/items/af8a3775da370f69f7ce)」の解法がそのまま使えます。

詳しいことはリンクを参照して頂けば良いのですが。要点は以下のようになります。
1. 2元2次不定方程式をペル型方程式に変換(find_DN)
1. ペル型方程式の解を生成(dion_DN)
1. 元の解への変換Matrixを使って解を生成(transformation_to_DN)

上記のリンクで作った関数**diophQuad**がそのまま使うと、以下のような簡単なコードになります。

```python
ansDQ = diophQuad("2*x**2 - 2*x - y**2 + y")
while True:
  (x,y) = next(ansDQ)
  print(x, y, 2*x**2 - 2*x - y**2 + y)
  if y > 10**12: break
```

（開発環境：Google Colab）