OmniAICreator/Qiita-1.07M huggingface dataset:
🐘【Mac】今更ですがPHPのバージョンアップしてみた(7.3=>7.4)

Vue.js、Javaの勉強の区切りがついたので、LaravelでECサイトの作成をすることにしました。
[【Laravel】マルチログイン機能を構築し本格的なECサイトをつくってみよう【Breeze/tailwindcss】](https://www.udemy.com/share/104J4k3@r6f9ON2_g6qv_dpex43_A2XqngnWwGvkO4PVsoL17-rWmt4VL6uNndxzfewoF3z9Kw==/)
推奨環境が**PHP 7.3**以上だったので、この機会に**7.4**にアップデートすることにしました。

※MacOS Big Sur11.6.2です。Montleyは怖くてアップデートしてません笑


### アップデート前にバージョン確認
```bash
% php -v
PHP 7.3.29-to-be-removed-in-future-macOS (cli) (built: Sep  6 2021 05:14:39) ( NTS )
```
### PHPのバージョン指定してインストール(アップデート)
```bash
% brew install php@7.4
```
### インストール完了後
```bash
==> php@7.4

中略...

The php.ini and php-fpm.ini file can be found in:
    /usr/local/etc/php/7.4/

php@7.4 is keg-only, which means it was not symlinked into /usr/local,
because this is an alternate version of another formula.

If you need to have php@7.4 first in your PATH, run:
  echo 'export PATH="/usr/local/opt/php@7.4/bin:$PATH"' >> ~/.zshrc
  echo 'export PATH="/usr/local/opt/php@7.4/sbin:$PATH"' >> ~/.zshrc

中略...

To restart php@7.4 after an upgrade:
  brew services restart php@7.4
Or, if you don't want/need a background service you can just run:
  /usr/local/opt/php@7.4/sbin/php-fpm --nodaemonize
```

>php@7.4 is keg-only, which means it was not symlinked into /usr/local,because this is an alternate version of another formula.

これはphpの7.4はインストールして配置までは行われたものの、別バージョンの為、`/usr/local`内までシンボリックリンクがつながっていないということです。

>To restart php@7.4 after an upgrade:
  brew services restart php@7.4

上記の文通りに`brew services restart php@7.4`を実行後ターミナル再起動しましたがバージョン変わらないので、
>If you need to have php@7.4 first in your PATH, run:<br>
  echo 'export PATH="/usr/local/opt/php@7.4/bin:$PATH"' >> ~/.zshrc<br>
  echo 'export PATH="/usr/local/opt/php@7.4/sbin:$PATH"' >> ~/.zshrc

この文章通りにzshrcにPATHを通しました。

### 実際に通したPASS
```bash
echo 'export PATH="/usr/local/opt/php@7.4/bin:$PATH"' >> ~/.zshrc
echo 'export PATH="/usr/local/opt/php@7.4/sbin:$PATH"' >> ~/.
```
### ターミナル再起動してバージョン確認
```bash
% php -v
PHP 7.4.28 (cli) (built: Mar  1 2022 10:43:52) ( NTS )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
    with Zend OPcache v7.4.28, Copyright (c), by Zend Technologies
```
XAMPPも動き、
![スクリーンショット 2022-04-08 20.25.23.png](https://firebasestorage.googleapis.com/v0/b/prod-ticket-app.appspot.com/o/post%2Fmkk_n%2F1649420236020?alt=media&token=557a3f7f-6123-4492-b35d-3bb60c369bdd)
`<?php phpinfo();`も表示することが出来ました！
![スクリーンショット 2022-04-08 20.25.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/455885bb-a5db-c888-613c-d69410ed4f5e.png)

---
参考サイト：
[MacのHomebrewとは？仕組み・使い方と用語整理=>keg-onlyとは](https://blog.mothule.com/mac/homebrew/mac-homebrew-basic#keg-only%E3%81%A8%E3%81%AF)
[tr-ex.me/翻訳](https://tr-ex.me/%E7%BF%BB%E8%A8%B3)←一部解釈のわからない英文を翻訳するときに使用
Python アプリをパッケージングしてあとで python コードを差し替えたいメモ

## 背景

numpy とか torch とか入ったアプリを単体で配布したい.

pyinstaller で .exe とパッケージ作れるが, バグとか修正とかあって一部差し替えしたいが作り直しになってつらい.
(.exe だとアンチウイルスチェックかかったりして毎度配布がめんどい)

py だけ差し替えしたい

## とりあえずの方法

exec でがんばります.

```py
# mymodule.py
def bora():
    print("hello")
```


```py
# main.py
def main():

    import mymodule
    exec(open("custommod.py").read())

main()
```

```py
# custommod.py
def myfunc():
    import mymodule
    mymodule.bora()


myfunc()
```

main.py とかに自前アプリのカスタム module がある場合は import しておきましょう.
そうしないと pyinstaller がパッケージングしてくれず, custommod 内での自作 module インポートに失敗します.

これで main.py を `.exe` にしておき, あとで custommod.py だけ差し替えてもらうでいけます!
(自作 module とかに変更なければ)

## 全体を差し替え可能にする.

使う modules が変わらない場合,

```
# myapp.py

...

def main():
   ...
```

```
# bootstrap.py

import myapp

exec(open("myapp.py").read())

myapp.main()

```

として, `bootstrap.py` を `.exe` 化するといけるのがわかりました!

ただ, 一部うまく import が含まれないときがあります.
私の場合は tkinter, PIL 使っていて `PIL._tkinter_finder` が含まれませんでした.

spec ファイルなり `-hiddenimports` オプションで適宜指定してあげましょう!

```
hiddenimports=['PIL._tkinter_finder'],
```

## TODO

* pyinstaller に module 関係だけパッケージしてメインは python.exe で動かす方法あったりするかしら
* conda とかで環境一式を特定のフォルダにつくってそれで完結させるのとかできないかしら
[UnrealEngine5] プロジェクトファイルの作成時にエラー

作成日：2022/4/8 

こんにちは、dogadogaです。

## エラー内容

UE5でプロジェクトを作ろうとしたらこんなエラーが出ました。

```
プロジェクトファイルの作成時にエラーが発生しました

Running D:/Program files/Epic Games/UE_5.0/Engine/Binaries/DotNET/UnrealBuildTool/UnrealBuildTool.exe  -projectfiles -project="D:/Unreal Projects/MyProject/MyProject.uproject" -game -rocket -progress
Log file: C:\Users\hogehoge\AppData\Local\UnrealBuildTool\Log_GPF.txt

Some Platforms were skipped due to invalid SDK setup: Android, Linux, LinuxArm64.
See the log file for detailed information

Discovering modules, targets and source code for project...
ERROR: Could not find NetFxSDK install dir; this will prevent SwarmInterface from installing.  Install a version of .NET Framework SDK at 4.6.0 or higher.
```

一番最後に「ver 4.6.0以上の`.NET Framework SDK`をインストールせよ」と書いてあります。

## 解決手順

`.net framework sdk`で検索すると出てくる[Download .NET Framework 4.8 | Free official downloads](https://dotnet.microsoft.com/en-us/download/dotnet-framework/net48)を開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411898/60cb85f2-576f-770f-26f4-f37473715d03.png)

ここにある`Developer pack`をクリックするとインストーラがダウンロードされます。

`ndp48-devpack-enu.exe`を起動して.Net Framework SDK をインストールします。

インストールが完了したら再度プロジェクト作成をします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411898/c49e2939-9856-5352-1a2a-8f5ce0d9e903.png)

無事プロジェクトが開けました！
ethers.js でコントラクト叩くスクリプト例

ブラウザからMetamaskで接続してコントラクトを叩くのではなくスクリプト的に簡単にコントラクトを叩くコード
ethers.jsのABIを配列で簡単に定義して使えるのが超絶便利

## ethers.jsでシンプルにコントラクト叩く

```js
const ethers = require('ethers')

// InfuraのURL指定
let network = 'rinkeby' 
let provider = ethers.getDefaultProvider(network)

// WalletのPrivate key
let privateKey = 'xxxxxxxxx'
const signer = new ethers.Wallet(
    privateKey,
    provider
)

// Contract Address
const contractAddress = "xxxxxx"

// Contract ABI
const contractAbi = ["function mint(string memory tokenURI) public returns (uint256)"]
const contract = new ethers.Contract(contractAddress, contractAbi, signer)

// transaction実行
const tokenURI = "xxxxx"
const func = async () => {
    const res = await contract.mint(tokenURI)
    console.log(res)
}

func()
```

## コントラクトに対してvalueを指定

他に指定可能な値は以下のドキュメント参照
https://docs.ethers.io/v5/api/contract/contract/#Contract-functionsCall

```js
const options = {
  value: ethers.utils.parseEther("0.01"),
  gasLimit: 3000000
}
const res = await contract.mint(tokenURI, options)
```
webpackのCSSのbackground-imageのpath問題を解決する

## 概要

webpackで背景画像を出力する際にパスで詰まってしまったので備忘録メモ

buildした際にパスが書き換わってしまうので、config.jsをいじる必要があるんだけど解決方法がわからず放置してましたが、英語文献を読めば即解決しました。
今思えばすごく簡単だった・・・

以下のように` options: { publicPath: '../' },`を下記加えればOK

## ソース
```:ディレクトリ構成
/dist
 └css/style.css
 └img/hoge.jpg
/src
 └scss/style.scss
 └img/hoge.jpg
```

```js:webpack.config.js
      {
        test: /\.(css|scss|sass)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: { publicPath: '../' },
          },
          {
            loader: 'css-loader',
            options: { sourceMap: true },
          },
          {
            loader: 'sass-loader',
          },
        ],
      },

```

## 参考記事
https://developpaper.com/perfect-solution-to-the-path-problem-of-css-background-image-in-webpack/
大学生が0からはじめたlaravel　vol4,コントローラーの利用

## コントローラの利用
コントローラ：webページの具体的な処理を行う。MVCアーキテクチャの基本となるもの

### MVCアーキテクチャ
Model：データ処理全般担当（データベースアクセスに関する処理全般）
View:画面表示担当
controller:全体の制御担当。必要に応じてModelをつかってデータを取得したり、Viewをつかって画面表示する

つまりwebアプリケーションにアクセスするとコントローラーが処理を行う。必要に応じてビューやモデルをつかって画面表示やデータベースを扱う。

###   コントローラーの作成
コントローラーはPHPスクリプトファイルとして作成。artisanコマンドを使用。
```
php artisan make:controller コントローラー名
```
コントローラーはapp/Http/Controllers内に作成

###    アクションを追加
コントローラーに処理を追加することです。
メソッドの形で記載する
記載した後アクションを使うために**アクションにルートを割り当てる設定**が必要

### ルート情報の準備
routesフォルダ内web.phpにて
```
Route::get('hello''コントローラー名＠アクション名')
```
こういった記述をする。これによって
第一引数（今回はhello）のアドレスにアクセスすると第二引数(コントローラー名＠アクション名)に記載されたアクションが実行される
第一引数ではルーティングの追加で記載した任意パラメータと必須パラメータがあります。任意パラメータをとアクセス時に引数を記載しなくてもエラーにならない

### 複数アクションするとき
まずコントローラーに二つアクションするためのメソッドを記述する。
ex)
```
 class HelloController extends Controller
    {
      
       public function index() {
           global  $end;        
           $html = 
                '<a href="/hello/other">go to Other page</a>'　　//aタグを押したらotherへ飛ばす
               . $end;
           return $html;
       }
    
       public function other() {
//処理を記載
       }
    
    }

```
つづいてroutesでルーティングする
ex)
```
Route::get('hello','HelloController@index');
Route::get('hello/other','HelloController@other');
```
このようにすることで複数のページに対応できる
アクションとアドレスの関係はwebの暗黙の了解に従うこと
###    シングルアクションコントローラー
複数アクションを用意するのとは逆に「一つのコントローラーに一つのアクションしか用意しない」というスタンスの設計
この場合シングルアクションコントローラーとしてクラスを用意する
```
class コントローラ　extend Controller
{
 public function __invoke() {

//アクション処理

   }
}
```
見てわかる通り「__invoke」というメソッドを使う
ちなみにinvokeは「呼び出す」という意味です。
ルート情報の設定としては
```
Route::get('アドレス名','コントローラー名');
```
とすればよい

###    RequestとResponse
リクエスト：クライアントからサーバーに送られる情報
レスポンス：サーバーからクライアントに返送される情報

アクションメソッドの引数定義
Request,Responseを利用するためにuse文を追記
```
use Illuminate\Http\Request;
use Illuminate\Http\Respomse;
```
これで両方のクラスが使える
アクションメソッドの引数に盛り込む
```
public function index(Request $requst,Response $response){
//アクション処理
}
```
**Reqestの主なメソッド**
```
$request->url();　　　　　　①
$request->fullUrl();    　②
$request->path();　　　　　③
```
①：アクセスしたurlをクエリー一文字列省略して返す
②：アクセスしたurlを完全な形で返す
③：ドメイン下のパスだけ返す

**Responseの主なメソッド**
```
$this->status();   ①
$this->content();  ② 
$this->setContent(値); 　　③
```
①：アクセスに関するステータスコード（正常なら200）
②：コンテンツの取得
③：引数の値にコンテンツを更新
大学生が0からはじめたlaravel vol3,ルーティング

##    ルーティング
特定のアドレスにアクセスしたときどの処理を呼び出して実行するか、それを管理する。

###    アプリケーションの構成
laravelフォルダについて
app:アプリケーションのプログラムがまとめられている。アプリケーション開発時にはここに必要なスクリプトファイルを追加する
routes:ルート情報の保存場所です。アクセスするアドレスに割り当てられるプログラムの情報などが示されている。
resorces：リソース関係の配置場所。プログラムが利用するリソースファイルが用意される。

###    ルーティングの追加
route/web.phpにて
```
Route::get('/', function () {
    return view('welcome');
});

Route::get('hello',function(){
    return '<html><body>
        <h1>Hello!!!!</h1>
    </body></html>';
});

```
ファイルの下に追加できる
追加したら
```
php artison serve
```
でlocalhost/helloにアクセスするとページを見れる

**パラメータを追加できる**
```
Route::get('hello/{id}/{user?}',function($id $user){
    return '<html><body>
        <h1>Hello!!!!</h1>
    </body></html>';
});
```
id,userをパラメータという
任意パラメータ：アクセス時につけなくてもいい→{user?}
必須パラメータ：アクセス時につけなければ404になる→{id}
大学生が0からはじめたlaravel vol2.シーディングについて

##    シーディングについて
マイグレーションでテーブルを用意出来たら実際にダミーのレコードを入れてみましょう。
こうした機能をシーディングという。簡単に手順を説明すると
①シーディング用のスクリプトファイル作成（コマンド）：シーダーファイル作成
②シードの追加
③コマンドでシーディング実行

###    シーダーファイルの作成
シードを作成するためのスクリプトファイルを生成する
```
php artisan make:seeder {シーダー名}
```
これでdatabase内のseedsファイル内にシーダー名.phpが生成される。

###    シーディング処理
シーダーファイル
```
<?php

use Illuminate\Database\Seeder;

class {シーダー名} extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        DB::table('テーブル名')->truncate();  //一時的に消すため

    $param =[
        [
            'name' => 'あああ',
            'title_number' => 1,
        ],
        [
            'name' => 'いいい',
            'title_number' => 2,
        ]
    ];
    DB::table('テーブル名')->insert($param);　　//レコード作成

    }
}
```
runメソッド内にテーブルの記述をする。DB::table('テーブル名')->insert($param);でレコードを作成している

###    シーダーファイルの登録
DatabaseSeederを登録しておく必要がある。（デフォルトで用意されている）
```
<?php

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        // $this->call(UsersTableSeeder::class);
        $this->call(シーダー名::class);
    }
}
```
$this->call(シーダー名::class);でSeederクラスのcallメソッドを呼び出し、シーディング処理を行うようになっている

###    シーダーファイルの実行
```
php artisan db:seed
```
上記のコマンドでDatabaseSeederがrunする
シーディングができたら
```
php aritsan serve
```
上記のコマンドでサーバー起動できるのでレコードが表示されるか確認するといいです。
ECS上に構築したreact+laravel環境でCSRF token mismatch。

## laravelからCSRF token mismatchを解決せよ

### 原因1
ECSはEC2三台構成なので、セッション情報が分散するから。

### 対策
ALBの分散設定を「sticky session」にするか、セッション情報をredisやdatabaseに入れて共有できるようにする。
今回はredisへセッション情報を保存することにした。
ただそれだけでは解決しなかった

### 原因2
フロントエンドのURLと、APIのURLのドメインが違うと、Laravelがセッションを認識できない。

例えばよくあるこんなURL
フロント www.example.com
バックエンド api.example.com

開発中はどっちもlocalhostだから動く、サーバーに上げた途端に動かなくなるやつ。

### 対策
Laravelの環境変数、SESSION_DOMAINを設定する。

デフォルトでは完全一致でないとダメらしい。
サブドメインも含めてワイルドカードにするためSESSION_DOMAIN=.example.comとした。

そしたら動いた。
ECS難しい。
Blenderで複数のオブジェクトに対するそれぞれのアニメーションをgLTFで出力する


この記事はBlenderで複数のオブジェクトに対して異なるアニメーションを設定できたにもかかわらず、gLTF(.glb)でエクスポートすると1つしか動かなかった場合の対処法を解説しています。
*****
Blenderで作った100個の立方体のアニメーション例が下記です。
![Blender.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376140/521885f3-4304-c0b2-f887-fb88e9804ce0.gif)
しかし、これをgLTF(.glb)に普通にエクスポートすると、1つの立方体しか動きません。
![GIF 2022-04-08 20-08-14.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376140/d9b8db43-e253-874e-e826-58a42e5b7335.gif)

エクスポートの方法に何か問題があるようです。:sob:
*****
少し調べたところ、下記に書き込みがありました。
https://github.com/KhronosGroup/glTF-Blender-IO/issues/1032

早速、赤丸の箇所のチェックマークを外してエクスポートすると、見事解決しました。:slight_smile:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376140/a1b0566f-6c79-4f0d-cd6a-583f4501f8c9.png)
![GIF 2022-04-08 20-07-08.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376140/5041197b-924c-b5d0-e375-c8d5fc9beceb.gif)

参考にさせて頂いたサイトに感謝いたします。:joy:
大学生が0から始めるlaravel vol1.テーブル作成とマイグレーション

## laravelのマイグレーション
データベースのテーブル作成や編集などを管理する方法として「マイグレーション」ってのがあります。
その方法は大きくわけて２段階。

①マイグレーションファイルの作成
②マイグレーション実行
マイグレーションファイル：どんなテーブルを作るかというテーブルの設計書。
マイグレーション：作った設計書実行すること。テーブルができる。

###    テーブル作成
```
$ php artisan make:migration {テーブル名}_table
```
--create、--tableのうしろに=でマイグレーションファイルで扱うテーブルの名前を引数として渡すと、
出来上がるマイグレーションファイルはそのテーブル名を含んで雛形が作られる

ディレクトリはdatabase/migrationsに入っている

###    テーブル中身
ファイル構成
```
<?php

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class Photo extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
         // テーブル作成

         /* optionをつけた場合は下のような雛形が最初から作られている  

            Schema::create('photos', function (Blueprint $table) {
                $table->increments('id');
                $table->timestamps();
            });      
         */
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
         // テーブル削除

         /* optionをつけた場合

            Schema::drop('users');       
         */
    }
}
```

Schema::というのはスキーマビルダと呼ばれるもので、テーブルの作成・編集が可能。

Schema::createで新規テーブルの作成・編集ができます。
idとtimestampsはデータがテーブルに入るたびに勝手につくので必須。

Schema::dropはテーブルを削除します。

::createと::dropの第一引数であるphotoはテーブル名を意味します。

### マイグレーション実行
これはappコンテナでうつ
```
$ php artisan migrate
```
これでテーブルができる
【Rails】GROUP BY句で外部キーを指定したところ、ActiveRecord::StatementInvalidになる

外部キーのグループ化で、地味に躓いたので記事としてまとめます！

# 問題
GROUP BY句で外部キーを指定して、インスタンスを取り出そうとするとエラーが起きました。

# 現象

①
groupメソッドで、外部キーであるオフィスIDを指定し、条件に該当するインスタンスを複数得ることができます。
ここまではエラーは発生しません。
```ruby
User.group(:office_id).select(:office_id)
  User Load (9.7ms)  SELECT `users`.`office_id` FROM `users` GROUP BY `users`.`office_id` LIMIT 11
=> #<ActiveRecord::Relation [#<User id: nil, office_id: 1>, #<User id: nil, office_id: 3>, #<User id: nil, office_id: 4>, #<User id: nil, office_id: 6>, #<User id: nil, office_id: 7>, #<User id: nil, office_id: 8>, #<User id: nil, office_id: 9>, #<User id: nil, office_id: 10>, #<User id: nil, office_id: 11>, #<User id: nil, office_id: 12>, ...]>
```

②
次に、インスタンスを取り出そうとすると、この段階でエラーが発生する。
```ruby
User.group(:office_id).select(:office_id).first
  User Load (8.9ms)  SELECT `users`.`office_id` FROM `users` GROUP BY `users`.`office_id` ORDER BY `users`.`id` ASC LIMIT 1
Traceback (most recent call last):
        1: from (irb):23
ActiveRecord::StatementInvalid (Mysql2::Error: Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggregated column 'rd_web_office_app.users.id' which is not functionally dependent on columns in GROUP BY clause; this is incompatible with sql_mode=only_full_group_by)
```

# 調査
エラーが起きた時のSQLをみていきます。

```ruby
  SELECT `users`.`office_id` FROM `users` GROUP BY `users`.`office_id` ORDER BY `users`.`id` ASC LIMIT 1
```

→意図せず、デフォルトでusersテーブルの主キーである、IDでsortしようとしていました。

```ruby
ORDER BY `users`.`id`
```

# 回避方法
明示的に、値の存在する外部キーでsortすることで、インスタンスを取り出すことができました！

```ruby
User.group(:office_id).select(:office_id).order(:office_id).first
  User Load (7.6ms)  SELECT `users`.`office_id` FROM `users` GROUP BY `users`.`office_id` ORDER BY `users`.`office_id` ASC LIMIT 1
=> #<User id: nil, office_id: 1>
```

# 最後に
挙動としては、デフォルトで主キーsortされることでエラーになっていました。
あくまで推定でしかないので、この辺りに詳しい方がいれば教えていただきたいです！
典型90問 001 Yokan Party をPythonで解く！

# はじめに
AtCoder現在茶色(年内には緑が目標！）のあんこちゃん(@Chunky_RBP_chan)です。
典型問題は抑えとかねばということで、★2〜★5に取り組んでいます。
Pythonで取り組まれている方も多いと思うので自分の解答をシェアしたいと思います！
# 001 Yokan Party 
https://atcoder.jp/contests/typical90/tasks/typical90_a

## 解法
https://github.com/E869120/kyopro_educational_90/blob/main/editorial/001.jpg

解法については出題者E869120(@e869120)の説明が非常にわかりやすかったので、この解法通り実装します。
簡単な説明としては、

①最小の長さを決め、何個に分割できるか確かめる
②K+1個より多く分割できれば最小の長さを大きくする。K+1より少なければ最小の長さを小さくする。

これを二分探索によって実装します。
K+1個に分割可能な数a,b,c(a <= b <= c)があった場合にcが選ばれるようokを左端にしています。また、ok,ngを変更するif文の不等号に注意しましょう。

```python
N,L = map(int, input().split())
K = int(input())
A = list(map(int,input().split()))
A.append(L)
ok = -1
ng = L
while abs(ok-ng) > 1:
    mid = (ok+ng)//2
    slice = 0
    pre = 0
    for i in A:
        if i-pre >= mid:
            slice += 1
            pre = i
    if slice > K:
        ok = mid
    else:
        ng = mid
print(ok)
Win10システム領域の容量不足解消のためのパーティション編集（EaseUS使用）

Win10システムパーティション（Cドライブの「Program Files」とかあるところよ）を、300GBほどにしてあったのですが、
足りなくなってきた。

・パーティションの境界を動かしてサイズを増やしました。
・EaseUS Partition Master （無償版）というソフトを使ってみました。



・Cドライブは3TBで、2.5TB弱を別パーティション（Z:）としてました。（こういう分割あまり意味ないなあと今では思っている。）
・Z:から500GBほど削って、そのぶんシステム領域を増やすことにしました。

↓　作業後のスクリーンショット（操作の対象は「ディスク0」です。「ディスク1」は無関係。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469875/4c754a45-ea48-a8e8-4364-078a5f8080a2.png)

作業内容：
・まずZ:を2TBまで減らしてディスクの後ろ（図中では右側）へ寄せる。（4時間ほどで完了）
・その後、回復パーティション2個を後ろへ移動、その分C:(NTFS)を拡大しました。（数分ていど）


↓　サイズ調整画面（これは作業が済んだ後の表示ですけど）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469875/48c16398-2d6d-5e4d-617a-e5ade020a103.png)

マウス操作で境界をドラッグし右端に寄せるのですが
右端まで完全に寄せると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469875/166b5c66-9bf1-07a1-afd1-4ab295c03d1a.png)
このように警告メッセージが出ます。（処理を進められません）
どうも、後ろ（図で言うと右側）のパーティションが影響を受けるみたいで、
そうすると、「一度に複数のパーティション編集は無料版では処理できない」みたいなのです。

仕方ないので後続パーティションとの間に100MBほど隙間を開けました。（この指定はマウス操作では厳しかったので、フィールドに数値入力で調整しました。）
この「隙間」というのが、最初の画像の「未割当122MB」「未割当100MB」というやつです。
まあ、冷静に見れば3TBのディスクで100MBの隙間なんてどうでもいいわけです。

「すきま」が必要（？）なとこを割り切れば、EaseUS無償版はとてもいい感じでした。
kony.storeのgetItem, setItem関数の利用方法について

# 目次
1. はじめに
1. 実装方法
1. まとめ
1. 参考情報
# 1.はじめに
アプリを作成する中で、アプリを切っても情報は維持させたいという場合があると思います。
この記事では、その機能を実現できるkony.storeにある「getItem」「setItem」関数の実装方法について紹介します。

# 2.実装方法
1.以下のような形でUIを作成します。
FlexContainerとButtonで構成しています。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/838d4af0-62e2-b795-1ce7-57aa64081e94.png)
2.preShow時の関数を作成します。
preShow関数と定義し、kony.store.getItem関数を使ってkony.storeに保存されているbackgroundColorを取得することにします。
コードは以下になります。
``` javascript
preShow: function(){
   var backgroundColor = kony.store.getItem("backgroundColor") 
   ? kony.store.getItem("backgroundColor") : "ffffff";
this.view.flxContainer.backgroundColor = backgroundColor;
},
```
**※preShowとは？**
フォームが表示されるたびに実行されます。このイベントは、デバイスが戻るときや、タイトルバーのナビゲーションアイテムからフォームに戻るときにも呼び出されます。
ブラウザの "戻る "で移動する場合は、preShowとpostShowは実行されません。
**※kony.store.getItemとは？**
この関数は、与えられたキーに関連付けられた現在の値の構造化されたクローンを返します。
与えられたキーがオブジェクトに関連付けられたリストに存在しない場合は null を返します。

3.作成したpreShowをFormのActionに紐づけします。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/354cb51c-2e44-b74a-6313-6c18675abe60.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/da16778b-13c5-bfb6-1707-1498530f75ea.png)
4.onClick時の関数を作成します。
onClickBtnBlue関数と定義し、kony.store.setItem関数を使用してkony.storeにbackgroundColorを設定するようにします。
コードは以下になります。
```javascript
onClickBtnBlue:function(){
  kony.store.setItem("backgroundColor", "4b88f1");
  this.view.flxContainer.backgroundColor = kony.store.getItem("backgroundColor");
}
```
**※kony.store.setItemとは？**
この関数は、与えられた値の構造化クローンを作成します。例外が発生した場合、そのオブジェクトに関連付けられたリストは変更されずそのままとなります。

5.作成したonClickBtnBlueをButtonのActionに紐づけます。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/58f2790f-4914-c83d-3c9f-d95dbf00cac5.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/884e33be-185b-0106-3ecf-a73553d19348.png)
6.作成したものを実行すると次のような動作をするアプリが完成です。
　　　　　　![画像3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/104e3ed8-852b-6edd-ed80-62cbb8aed8ab.gif)

- 今回作成した機能の概要は次の通りです。
    - ボタンがクリックされたら、kony.store.setItem関数を使ってbackgroundColorをkony.storeに設定し、アプリのbackgroundColorをkony.storeに設定したものと同じbackgroundColorに変更します。
    - アプリを閉じてもbackgroundColorはkony.storeに保存され、その情報はまだkony.storeに保存されます。
    - あとはpreShow関数でkony.storeのbackgroundColorの情報を取得し、アプリのbackgroundColorを変更するというものとなっています。

# 3.まとめ
kony.storeのgetItemとsetItem関数について紹介しました。
この関数を使用することでアプリを終了しても、終了前の情報を利用することができます。
kony.storeには他にもclearやremoveItemなどの関数も用意されていますので、参考サイトを参考に使ってみてください！

# 4.参考情報

https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/kony.store_functions.htm
アルゴリズムとデータ構造 p63 Frog

### 問題
N個の足場があって、i(=0,1,...N-1)番目の足場の高さは、hiで与えられます。最初の0番目の足場にカエルがいて、以下のいずれかの行動を繰り返してN-1番目の足場を目指します。
・足場iから足場i+1へと移動する。コストは、hi - hi+1の絶対値。
・足場iから足場i+2へと移動する。コストは、hi - hi+2
ゴールまで辿り着くまでに要するコストの総和の最小値を求めてください。

### 解答　自分（正解）

```c#
public class Program
{
  public static void Main()
  {
    int n = 7;
    int[] list = new int[] { 2, 9, 4, 5, 1, 6, 10 };
    int[] dp = new int[n];

    //配列の初期化
    dp[0] = 0;
    dp[1] = list[0];

    exec(2);
    var j = 0;
    foreach (int i in dp)
    {
      System.Console.WriteLine("dp[{0}]：{1} ", j, i);
      j++;
    }

    Console.WriteLine("答え：{0}", dp[n - 1]);

    void exec(int index)
    {
      dp[index] = Math.Min(Math.Abs(list[index - 2] - list[index]) + dp[index - 2], Math.Abs(list[index - 1] - list[index]) + dp[index - 1]);
      if (index < n - 1)
      {
        exec(index + 1);
      }
    }
  }
}

```
RStudioの設定変更【見た目】

　RStudioを使っていて、「文字が小さすぎる」「白背景でまぶしい」「Wordみたいな補助機能が欲しい」と思うことはありませんか？RStudioは、設定をいじって自由にカスタマイズできます。その中でも特に便利だと思う設定を紹介します。

具体的に、以下の3つの設定を紹介します。
１）文字サイズを大きくする
２）背景の色を変更する
３）スクリプトを書く際の補助的機能をONにする

# １）文字サイズを大きくする
　RStudioの【Tools】→ 【Global Options...】→ 【Appearance】の順で設定画面を開いてください。Optionsの中の【Editor font size:】で文字の大きさを変更できます。個人的に**12**くらいがちょうどいい大きさだと思います。文字の大きさだけでなく、【Editor font:】でフォントも自由に変更できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/fa666d69-6ee7-18b7-8f01-f7312a409b5b.png)

# ２）背景の色を変更する
　RStudioの初期設定では、背景が白色です。これがまたまぶしくて、長時間作業していると目が疲れます。こちらも、【Appearance】の中の【Editor theme:】で自由に変更できます（30種類以上のテーマが存在します）。"Tomorrow Night Blue"が優しい色でお勧めです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/223613bd-9fcb-73eb-8271-78922327b9f7.png)


# ３）スクリプトを書く際の補助的機能をONにする
　RStudioには、スクリプトを書く際のミスを減らすのに役立ついくつかの設定があります。【Tools】→ 【Global Options...】→ 【Code】の順で設定画面を開いてください。こちらには、【Editing】、【Display】、【Saving】、【Completion】、【Diagnostics】の５つの設定のカテゴリーがあります。この中で特に僕がお勧めするのは、【Display】の設定です。
## 【Display】
　以下の項目にチェックを入れてください。
- Show line numbers：ソースペイン（スクリプトを書くところ）に行番号を表示（何行目にエラーがあるかすぐに分かる）。
- Show whitespace characters：スペースが挿入されている場所に薄い○を表示（ケアレスミスを避ける）。
- Rainbow parentheses：以下の画像のようにかっこを色分けして表示（どこを閉じているか一目瞭然）。
#### 適用前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/e701f97e-78e0-01f6-809f-1e9a27e3ee5b.png)
#### 適用後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/3ecba449-665a-6a29-4e5a-b5a0a13da130.png)

# 最後に
　ここで紹介した設定以外にもたくさんの設定をいじることができます！皆さんのお勧めの設定は何でしょうか？「これはいいよ！」というものがあれば是非教えてください。
webサイトをスマホのサイズに適用させるためにすること



| 1 | スマホ専用サイト | レスポンシブWebデザイン |
|:-:|:-:|:-:|
| 閲覧端末の判別方法  | サイト訪問者のUserAgent  | サイト閲覧時のブラウザの横幅  |
| 表示コンテンツの切替方法  |  スマホ専用サイトを別に用意して切り替え | CSSのメディアクエリを使用して切り替え  |
| メリット  | 	・別のサイトを用意するため、スマホ閲覧に特化できる・「PCサイトで見る」といったリンクを用意すれば、スマホでもPCサイトに切替可能  |  	・サイト自体はひとつのため、管理や変更の手間は少ない・PCサイトとスマホサイトのURLが同じ |
| デメリット  |  	・サイトが2つになるため、管理や変更の手間が増える・構成によってはPCサイトとスマホサイトのURLが異なる	 | ・ひとつのサイトをPCでもスマホでも閲覧するため、レイアウトに制約を受けることがある・スマホの場合は○○を非表示…といったことをする場合、余分なファイルの読み込み等があり、負荷がかかる  |
|   |   |   |

[Webサイトのスマホ対応方法 2種類の仕組みと特徴を解説](https://www.cresco.co.jp/blog/entry/6876/)
[スマートフォン用ページが自動縮小されないようにする](https://allabout.co.jp/gm/gc/382610/2/)
[CSSでスマホ対応！レスポンシブサイトの作り方と初心者向けQ&A](https://www.sejuku.net/blog/99964)
[C#]VSCodeでビルドしたときのエラーや警告が残ってしまう（メモ）

# はじめに
VSCodeでC#のビルドタスクの実行を行ったときに、エラーや警告が2重になってコードを修正しても残ってしまう現象についてのメモ

# TL;DR
tasks.json の ビルドタスクの "problemMatcher": "$msCompile"を消せばよいかも？

# 環境
OS：Windows10

VSCode(V1.66.0)
VSCodeのC#拡張(v1.24.3)
.NetSDK（.Net6)

# 現象について
たとえば以下のようなコードがあったとき、セミコロン(;)がないのでコンパイルエラーになる。
```C#
Console.WriteLine("Hello, World!")//セミコロンがない
```
当然、VSCodeの問題にはエラーが一つ示されている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215751/a0dabbb9-efc3-feb0-7cca-577f55f08acf.png)


ここでVSCodeのビルドタスクを呼び出してビルドをかけると問題が二つに増えてしまう。（デバッグの呼び出しでも）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215751/790fb290-7ccd-7a53-285f-f001c5e5be1c.png)

セミコロンを入れて修正しても、片方のエラーが消えずに残ってしまう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215751/94671dff-5cc8-a3d6-4573-a2c7174e16fd.png)

もう一度ビルドタスクを呼び出せば消えるけど、ちょっとうっとおしい。

# 解決策？
原因はデフォルトのビルドタスクの設定にある。（たぶん）
C#の拡張がtasks.jsonに作るビルドタスクの中にある"problemMatcher": "$msCompile"の設定が直前のビルドのエラーや警告を残してしまっているらしい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215751/c90202c9-9b12-ed2c-41fd-7c36f5e3a5af.png)
とりあえずこの設定を消すか、//でコメントアウトすればエラーや警告が残らなくなる。  
**※全部の問題を消してから設定を変えないとエラーがずっと残り続けるので注意。（たぶん残ったエラーが更新されなくなる）**

とはいえ、なんでデフォルトでこうなっているのかよくわからないし、消したことで別の問題が起きるのかはよくわかない。詳しい人がいれば教えてほしい。
PowerVC v2 導入・運用ガイドのリリース

##### PowerVC 2.0 ガイド リリース


:::note info

Qiita で実機検証を内容を少しずつ[記事](https://qiita.com/c_u/items/5d835c47d91e6d97c0ce)にしていましたが、検証まとめ資料が [Linux on Power 技術情報](https://www.ibm.com/support/pages/linux-power-%E6%8A%80%E8%A1%93%E6%83%85%E5%A0%B1) で公開されました。
2023年3月に v2.1 の情報を追加更新しました。


**⇨　[IBM Power Virtualization Center(PowerVC) v2 導入・運用ガイド](https://ibm.ent.box.com/s/tb34vtxrgg14ty6xxrg4hza5o4p6f23y)**




:::


:::note info

English version has been released.(07/2023)

**⇨　[PowerVC_v2_Implementation and Operations Guide](https://ibm.seismic.com/Link/Content/DC3jJJ9bGR3qHGm2PWFWgRqjgdJ3)**




:::



---


(2022/6/10 追記) ガイドは2.0.2.1ベースでの確認ですが、同手順で 2.0.3 の導入可能を確認しました。

https://qiita.com/c_u/items/35273f752e6a2d39f0c2


(2022/12/26 追記) バージョン2.1 レガシー・インストールを確認しました。

https://qiita.com/c_u/items/558081406ea3099875c3


(2023/2/20 追記) バージョン2.1のHA構成の導入を確認しました。


https://qiita.com/c_u/items/81f24d9a57e3826a88db


(2023/11/20 追記) バージョン2.2.0 レガシー・インストールを確認しました。

https://qiita.com/c_u/items/65acecdb07a94127ae52


(2025/2/5 追記 PowerVC2.3 導入を確認しました。)

https://qiita.com/c_u/items/ccd21a175a6dfead34e0

<br>

Tips 記事のまとめは以下に記載しています。

https://qiita.com/c_u/items/5d835c47d91e6d97c0ce



以上です。
【Flutter】YoutubeAPIで取ってきたサムネイル画像の上下帯を隠す

本当は画像を加工して上下の帯を取りたかったが、やり方が見つからないので仕方なく隠すことに。
この方法だと隠してるだけなのでmarginとかpaddingが直感的ではなくなり、Widgetの配置が難しくなるので他にいいやり方知ってる方いましたらご教授頂きたいです。

# 黒帯を隠したい
![スクリーンショット 2022-04-08 19.07.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/855584/d90d1ad2-f5a3-881f-b901-d7678748b0c4.png)

# ソースコード
```dart
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).backgroundColor,
      appBar: AppBar(
        title: const Text('Home'),
      ),
      body: Container(
        decoration: BoxDecoration(
            border: Border(
                top: BorderSide(
                    // 背景色で隠す 動的に帯の幅を求めたほうがいいです
                    color: Theme.of(context).backgroundColor, width: 115),
                bottom: BorderSide(
                    color: Theme.of(context).backgroundColor, width: 115)),
            image: const DecorationImage(
                image:
                    AssetImage('画像パス'),
                fit: BoxFit.fitHeight)),
      ),
    );
  }
```

# 結果
![スクリーンショット 2022-04-08 19.08.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/855584/db495f38-db38-236b-d5fb-ec067ebe53e4.png)
【個人開発】同棲カップル向け情報共有サービスを作ってみた

<h1>はじめに</h1>
<p>はじめまして。じーやんと申します。</p>
<p>突然ですが、みなさん痴話喧嘩はしたくないですよね。<br>
予定を聞いてないだとか、ルールを決めた・忘れた、共用の費用がどうとか…<br>
しょうもない理由で喧嘩になった経験がある人も多いのではないでしょうか。<br>
私を含めそういった人たちのために、共同生活を送る上で忘れがちだけど、<br>
必要な情報を管理できるツールがあれば良いなーと思ってサービスを作りました。<br</p>
<p>それがこちらです。</p>

https://share-life-pg.com

<h1>サービス概要</h1>
<p>予めパートナーと自身のユーザー登録が必要となります。</p>


<h2>1.チーム結成</h2>

![createTeam.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617148/bd5cf8b6-4205-72d4-e63a-fc5d48f2257c.gif)


<p>登録後にパートナーを指定するフォームが表示されるので、<br>
そこにパートナーのEメールアドレスを記入してチームを結成してください。<br>

![acceptTeam.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617148/cf4c6992-b8ce-6227-55a8-d2a8f0691be6.gif)

パートナー登録が完了すると機能を全て使用できます。</p>

<h2>2.予定の登録</h2>

![registerSchedule.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617148/7361e2d3-3bad-c4a5-2d15-6453f4405ee5.gif)

<p>シンプルなカレンダー型のインターフェイスです。<br>
日付をクリック、またはプラスのアイコンをクリックすると予定を記入できます。<br>
日付のマスからはみ出た予定については、隠れている予定の件数が表示され、<br>
数字をクリックすると詳細が確認できます。</p>

<h2>3.ルールの登録</h2>

![registerAgreement.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617148/c97d40be-e392-0df3-7ad5-0b52e7559e70.gif)
<p>ルールは１人で決めてしまってはひとりよがりなものになってしまいます。<br>
作成したルールはパートナーからの承認を得て有効なものとなります。</p>

![approveAgreement.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617148/a497c50e-d936-31d3-dcfd-a7085c5dacf1.gif)
<p>差し戻しもできるようにしています。</p>

<h2>4.家計簿の登録</h2>

![registerPayment.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617148/34395748-68ab-e9eb-5be4-ded1c8b516ac.gif)



<p>費用は固定費と変動費に分け、月毎に表示できるようにしています。<br>
月毎の費用の負担は、ちょうど公平になるように計算して結果を表示します。</p>

![chart.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617148/2bd7a44d-8283-02d5-b397-e9f0a2d420a0.gif)


<p>また、データが入力されていた場合、自動でグラフを作成する機能を追加しました。<br>
入力があるたびに自動でグラフが再描画されるようにしています。<br>
chart.jsのインスタンスをvueのdataに代入し、データの変更がある度にupdateメソッドを行うことで<br>
自動での再描画が実現できました。</p>



<h1>こだわったこと</h1>
<h2>1.わかりやすさ</h2>
<p>１度触ってみたら、２度目からは直感的に操作できるように、<br>
各パーツの配置、見た目に気を使いました。<br>
またカレンダーの祝日を外部APIで取得して、ぱっと見で休日がわかるよう工夫しました。</p>
<h2>2.SPA</h2>
<p>このサービスはトップページ以外はSPAで構築しています。<br>
支出を入力したり、予定を入力・表示・編集をしたりする場合、<br>１つの機能を閲覧・使用する時間が長くなると予想されます。<br>
何か動作を行う度に画面の読み込みが発生すると、<br>ユーザーにとって快適ではなくなると考えSPAを採用しました。
</p>

<h1>使用した技術</h1>
<p>laravel 6.20<br>
vue 2.6.12<br>
vuex 3.6.2<br>
vue-router 3.5.3<br>
chart.js<br>
jQuery3.2<br>
AWS</p>


<h1>今後追加したい機能</h1>
<p>・ソーシャルログイン<br>
・カレンダーに記入できる日記</p>

<h1>外部API</h1>

https://holidays-jp.github.io/

<p>作成者様、ありがとうございます。</p>

<h1>参考サイト</h1>

https://reffect.co.jp/vue/javascript-vue-js-create-calendar

https://www.hypertextcandy.com/vue-laravel-tutorial-introduction

<p>上記２サイトには非常に助けられました。<br>
エッセンスを吸収しつつ、自分でオリジナルの機能を盛り込んで開発しました。</p>

<h1>さいごに</h1>
<p>最後までお読みいただきありがとうございます。<br>
<p>このサービスを通して、誰かの生活を少しでもスムーズにできれば嬉しいです。</p>

[twitter](https://twitter.com/prg_g_yan)

[share life](https://share-life-pg.com)
Dockerのポート重複の解決

複数のプロジェクトの同時並行でコンテナのポート番号が重複していたので解決法を備忘録

## DB接続エラー　
私の場合，Laravel+MySQL環境にて，
MySQLコンテナのたえ3306番のポートを開いていたが追加で
同様の環境を立ち上げなくてはいけなくった
単にportsの設定でポートフォワーディングしただけでは不十分で，
```SQLSTATE[HY000] [2002] Connection refused```のエラーとなってしまった

## commandでポートを指定する
```yml:docker-comose.yml（だいぶ省略）
  mysql:
    build:
      context: ./
      dockerfile: ./docker/mysql/Dockerfile
    ports:
      - 3307:3307         ## ここだけでなく
    command: --port 3307  ## ここも追加
```

このようにコンテナ立ち上げ時にもport指定してあげる必要があります
(Docker run --port と同様)

あとは　$ docker ps　でポート3307に接続できているか確認してください

**SQLSTATE[HY000] [2002] Connection refused**でググるとLaravelの.envとdocker-compose.ymlの設定を見直せと言う記事がよく出てきますが，
初心者はこっちの可能性もあるかも
【合格体験記】PL-900 PeasonVUE試験 ノーコストの勉強法

# PL-900を完全無料で合格する為にやったこと

### 1. Microsoft Learn「Microsoft Power Platform の基本」ラーニングパス
【目的】概要を理解する
　⇒　https://docs.microsoft.com/ja-jp/learn/paths/power-plat-fundamentals/

### 2. Microsoft Azure Virtual Training Days参加、且つ無料試験バウチャーをゲット
【目的】概要を理解する・各ツールの仕様を理解する・非エンジニアは実際の画面や実装を想像できるようになる
　⇒https://www.microsoft.com/ja-jp/events/top/training-days

### 3. 無料試験対策用オンデマンドウェビナーに参加
【目的】PowerPlatformで実現できること・できないことを把握する
　⇒https://www.microsoft.com/ja-jp/events/top/skilling?activetab=g1%3aprimaryr4#primaryR7

### 4. 無料のサンプル問題を解いてみる
【目的】複数選択、文章マッチング、ドロップダウン、並び替え、独特の表現、各ツールの特徴を捉えるキーワード、キーフレーズを押さえる
　⇒https://docs.microsoft.com/ja-jp/learn/certifications/exams/pl-900
※「ヒント　この試験の準備に役立つ無料のサンプル問題をダウンロードする」がリンクになっておりPDFファイルで模擬問題に触れることができます。


### 5. PL-900試験の予想問題に触れてみる
【目的】どういう問題が出るか把握する
　⇒【EXAMTOPICS】https://www.examtopics.com/exams/microsoft/pl-900/view/
　⇒【無料PL-900試験問題集】https://www.jpnshiken.com/exam/PL-900-microsoft-power-platform-fundamentals-10972.html

### 6. PeasonVUEで試験日程を決める　オンライン受験
　⇒https://docs.microsoft.com/ja-jp/learn/certifications/exams/pl-900
　　試験概要の画面の下部「PeasonVUEでスケジュール」をクリックすると、認定プロファイルのページに飛びます。Microsoft試験は個人に属するので、試験を受験する時は個人のMicrosoftアカウントを接続します。(個人のアカウントを持っているない場合は作成します。)

※バウチャーの適用方法
左側のメニュー「試験割引」を選択すると、バウチャーを適用するため、下の赤枠部分にメールアドレスを入れ、「Check Eligibility」をクリックします。すると、上部に割引ができるバウチャーが現れるので、「Claim」をクリックし適用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322371/f482466c-deef-f5fa-5847-8e6e4f15cc6a.png)

### 7. 受験環境の準備
　・　部屋を綺麗にする
　・　身分証明書を準備する
　・　メールで送られてくる案内に従って、PC環境をチェックする

### 8. 試験当日
　・　30分前にチェックイン:PC環境確認アプリを立ち上げ案内に従って進めます。
　・　QRコードが出てくるので、スマホから自分の顔、身分証明書、試験環境の写真を撮影して提出します。
　・　順番が回ってきたら試験官からチャットが飛んでくるので、PCカメラで部屋や、手元をカメラで見せます。
　・　準備ができたら問題データがダウンロードされて試験開始。

　※私は一時的にネット環境が遅くなって、最初のチェックインや試験官との確認の後、問題のロードが上手くいかず失敗しました。アプリが落ちてしまったので、その後試験官と会話ができなかったので、改めてチェックインからやり直し、2回目でちゃんと試験問題ができ開始できました。

以上、私のPL-900合格体験記でした！
ノーコードツール「Power Apps」について調べてみた

## 特徴・メリット
- WindowsでもMacでもPower Appsを使うことができる
- アプリケーション利用時のユーザー認証はOffice 365 にお任せ
- コネクタを使うとさまざまなデータ・サービスと連携できる
（SharePoint、OneDrive、Excel、Googleスプレッドシート、Gmail、Google Task など）

https://blog.trainocate.co.jp/blog/PowerApps

- ネイティブモバイルアプリが作れる

https://memo.tyoshida.me/power-platform/powerapps/power-apps-native-mobile-apps-preview/

https://www.frog-pod.com/FrogTechLog/2021/11/power-apps-mobile-apps.html

- ギークフジワラさんの説明が分かりやすいのでお薦めです。

https://www.youtube.com/watch?v=Eb-OhmMLK5E&t=250s

## 作れるもの
- 勤怠アプリ
- 営業日報
- 予約管理アプリ
- 入力フォームの制作
## できないこと
- 外部のメンバーはアクセスできない -> 外部に広く使ってもらうようなアプリの作成には向いていない
- デザインの自由度があまり高くない

https://rekaizen.com/article/detail/webservice-development/16965

https://qiita.com/simari/items/89b1be3606d6ec99b24c

## 必要な前提条件
- 実現したい業務プロセスに対する理解
- 扱うデータの連携についての知識
- 多少のOffice ソフトウェアの操作知識
## デザインにこだわる方法

https://qiita.com/taku_maru/items/9c2abaf55184c2c12964

## 使い方を学ぶ
https://www.qes.co.jp/media/PowerApps/a97
初心者プログラマが1年でAIコンペで入賞し、IT大手に入社するまで。

# はじめに
この記事は私がプログラミング初心者からIT大手にエンジニアとして内定されるまでの流れを、使用していた学習ツールや参加したイベントなどを紹介しながら振り返ります。2019年10月にプログラミングを始めて2020年11月に内定をもらったので、約1年間の軌跡を時系列順に振り返ってみます。

# きっかけ （2019年10月）
まず、なぜ未経験者の私がプログラミングを始めようと思ったのかを説明します。
私は大学時代、経営学部情報システム科に所属していました。といっても、「少しITに詳しい経営学部生」くらいのスキルセットでした。
就活生時代、BIG4の企業説明会を受けていると「経営学部で情報システム科なのはいいけど、結局君は何ができるの？」と問われた事があります。
その時私は経営学部でしたが長期インターンの経験もなく、情報システム科なのにプログラミンをした事がありませんでした。そこで私は、他の就活生との差別化の意味も含め、プログラミングの学習を始めました。
（初めはビジネスサイドとエンジニアサイドの間を通訳するビジネスマンを目指していたのですが、いつの間にか、エンジニアの方がメインになっていました。）

# Codecademy （2019年10月）
以前私のブログでも紹介した、プログラミング学習プラットフォームです。日本語の対応はしていませんが、ファーストステップにはピッタリだと思います。基本的に課金制なので、1ヶ月という期間を決めて、その期間中にPythonのコースを終わらす意気込みで受講していました。「お金を払っている」という枷を自分にかけ、積極的に学習をしていました。

Codecademyの詳細はこちら記事をご覧ください。

https://qiita.com/Shu25/items/3f9d1f4b4ccb7dbe1a6b


# いちばんやさしいPythonの教本 （2019年11月）

CodecademyでPythonの基礎を学んだ後、いちばんやさしいPython機械学習の教本（株ビープラウド）を読みながら手を動かしてプロジェクトをこなしました。本書で紹介されているプロジェクトを自分なりにアレンジしながら様々な成果物を出しました。自分で調べながらコードを書いている時が一番身になったと思いました。


<img width="300" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1044781/adfb5bcf-d39b-0b78-15af-898945152804.jpeg">

https://www.amazon.co.jp/dp/4295006416/ref=nosim/?tag=impressjapan-22&linkCode=as1



# インターン （2019年12月）
ITスタートアップの企業に(ほぼ)直談判し、無償インターンに参加させていただきました。現役ゴリゴリのエンジニアの方から手取り足取りAIの作り方を学び、とても勉強になりました。便利ツールやショートカットキーなど、本にのらないノウハウの部分は、現場の人に教わるのが一番だと思いました。

# AtCoder （2020年1月）
競技プログラミング（プログラミングの正確さと速さを競う競技）に参加していました。AtCoderは日本最大級の競技プログラミングプラットフォームで、毎週様々な大会が開かれます。出されたお題に対して的確なプログラミングを書く。という物です。
例えば、
>問題文
高橋君の家には、高橋君、高橋君の父、高橋君の母の 3 人が住んでおり、全員が毎晩風呂で髪を洗います。
風呂には、高橋君の父、高橋君の母、高橋君の順に入り、それぞれシャンプーを A,B,C ミリリットル使います。
今朝の時点で、ボトルには V ミリリットルのシャンプーが残っていました。このまま補充しない時、初めてシャンプーが不足するのは誰が使おうとした時ですか？　

https://atcoder.jp/contests/abc243/tasks/abc243_a

という問題で、
どんなA,B,C,V の値でも正しい人物がアウトプットされるプログラムを書く。
といった感じです。


過去問なども公開されており、膨大な問題数があるので、それを永遠に解いていました。プロジェクトでは得られない、ロジカルシンキングや小技を習得する事ができたと思います。


# 理転 （2020年2月）
「理転」という言い方が正しいのかわからないのですが、私の学部では基礎的な統計学も必修科目であった事もあり、Rプログラミング言語を使った統計学の講義を積極的に受け始めました。
プログラムが動かなく、何が何だかわからない状態の中、諦めずにPCと向き合い続ける忍耐力も培われました。エンジニアとしては必須スキルかもしれません。
（私のコア能力はここで培われました）


# AIコンぺ （2020年9月）
理転した際に得た知識を活かし、AIの精度を競う大会に参加しました。AIに関する本を読み漁り、質の良いAIを作るため、トライ＆エラーを繰り返した結果、現役のデータサイエンティスが参加するAIコンペで入賞する事ができました。

# 内定 （2020年11月）
経営学部で培ったビジネスマインドと知識、上記AIコンペを軸にエンジニアとしての実力をアピールしたところ、「内定」をいただく事ができました。

# 終わりに
思い返すと、オンラインリソースを活用し能動的に情報を集める事と、新しい世界に飛び込んで行く勇気があれば誰にだって出来る事だと思いました！
今文系のあなた、プログラミングスキルをつけて、エンジニア畑で頭ひとつ飛び抜けてみませんか？
【新人プログラマ応援】独断と偏見で選んだおすすめ書籍（とりあえず）10選

# はじめに

新人のうち（3年目ぐらいまでを想定）読んでおくと良いかなと思った書籍を独断と偏見で選んでみました。  
Web系バリバリというよりもどちらかというとレガシーな環境でのんびりやってきた人間です。  
ご参考になれば幸いです。

## Code Complete 第2版　完全なプログラミングを目指して

[【電子合本版】Code Complete 第2版　完全なプログラミングを目指して ](https://www.amazon.co.jp/dp/B01E5DYK1C/)

紙の本だと上下巻に分かれています。  
ボリューム感はありますが、きっと糧になるものはあるはずです。

![51Sdan3jlwL.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23789/3f6d2ade-97a2-aaab-bd19-26785671f4a6.jpeg)

## オブジェクト指向でなぜつくるのか 第３版　知っておきたいOOP、設計、アジャイル開発の基礎知識

[オブジェクト指向でなぜつくるのか 第３版　知っておきたいOOP、設計、アジャイル開発の基礎知識](https://www.amazon.co.jp//dp/B092HDFJKK)

![51MeWoeZbRL.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23789/faa94cf0-133e-6b81-a31c-49058efa68cf.jpeg)

## 現場で役立つシステム設計の原則 〜変更を楽で安全にするオブジェクト指向の実践技法

[現場で役立つシステム設計の原則 〜変更を楽で安全にするオブジェクト指向の実践技法](https://www.amazon.co.jp/dp/B073GSDBGT)

![51QSqJm2ZOL.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23789/80e9fa99-5cb5-7b3d-a4ec-18f66c298316.jpeg)

## SQL実践入門──高速でわかりやすいクエリの書き方

[SQL実践入門──高速でわかりやすいクエリの書き方](https://www.amazon.co.jp//dp/4774173010)

![51Oeo4yOp-L._SX348_BO1,204,203,200_.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23789/6c534408-13b6-de57-6a57-73046565747f.jpeg)

## SQLアンチパターン

紹介記事書いてます。

https://qiita.com/shimamura_io/items/7ca604933f526a2cdfa9

[SQLアンチパターン](https://www.amazon.co.jp/dp/4873115892/)

![41qHKrFZi0L._SX389_BO1,204,203,200_.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23789/723043dd-d2b8-d622-195f-cff545494c0f.jpeg)

## インタフェースデザインの心理学 第2版 ―ウェブやアプリに新たな視点をもたらす100の指針

読み物としてもすごく面白いです。

[インタフェースデザインの心理学 第2版 ―ウェブやアプリに新たな視点をもたらす100の指針](https://www.amazon.co.jp/dp/4873119456)

![41Tw1iRIN0L._SX389_BO1,204,203,200_.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23789/0fafd543-c17d-97ae-d763-b3d3c6bfe242.jpeg)

## 文章嫌いではすまされない! エンジニアのための伝わる書き方講座 

報告書から設計書、メールまで。
伝わる、わかりやすい文章とは何か。体系的に学べます。

[文章嫌いではすまされない! エンジニアのための伝わる書き方講座 
](https://www.amazon.co.jp/dp/477416576X)

![51XJN2ww0YL._SX355_BO1,204,203,200_.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23789/3543ff55-12c2-ad57-d2be-accc7cdccedf.jpeg)

## モデルベース要件定義テクニック

何も無いところからどうやって要件定義を行っていくか。
手がかりとなるかもしれません。

[モデルベース要件定義テクニック](https://www.amazon.co.jp/dp/B07D25W3HF/)
![51w-sLmOfNL.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23789/5316abbf-8581-f435-155b-37fcbacdc39f.jpeg)

## ザッソウ　結果を出すチームの習慣 

リモートーワーク時代のコミュニケーションでも雑談・相談が大事。

[ザッソウ　結果を出すチームの習慣](https://www.amazon.co.jp//dp/B07WWK5KQK)

![51OduKQmpLL.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23789/c8f8f830-09cb-4cb7-35bc-f427b11f33cf.jpeg)

## エンジニアリング組織論への招待 ~不確実性に向き合う思考と組織のリファクタリング

リーダー、マネジャー向けの内容かもしれませんが、新人さんもぜひ。
エンジニアリングとはなにか。  
新人のうちにこれを把握しておくとこれからきっと役に立つはずです。

[エンジニアリング組織論への招待 ~不確実性に向き合う思考と組織のリファクタリング](https://www.amazon.co.jp/dp/4774196053)

![51zMvVL4MeL._SX351_BO1,204,203,200_.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23789/9bc77cd2-42ad-0e00-a3aa-0672dc9a6f77.jpeg)
Laravelのモデルのリレーション【個人的なお勉強アウトプット】

## 参考図書
https://www.amazon.co.jp/dp/B07CLLW4MX/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

## hasOne
1対1の関係で関連付けられているもの。
主従のリレーションテーブルで、主の方から従テーブルを取得するための機能。
```app/Models/Person.php
public function board(){
return $this->hasOne('App\Models\Blard');
}
```
引数でhasOneで関連付けられるモデルを指定する。
これによりpeopleテーブルのレコードに関連付けをおこなったboardsテーブルのレコードが取り出せるようになる。

## hasMany
1対多の関係で関連付けられているもの。
```app/Models/Person.php
public function board(){
return $this->hasMany('App\Models\Blard');
}
```

ビューの取り出し方
```resources/views/person/index.blade.php
@foreach($items as $item)
  {{$item->getData()}}
  @if($item->boards != null)
    @foreach($item->boards as $obj)
      {{$obj->getData()}}
    @endforeach
  @endif
@endforeach
```

## belongsTo
従から主のレコードを取り出す。
基本的には一つのレコードだけが取り出される。

```app/Models/Board.php
public function person()
    {
        return $this->belongsTo('App\Models\Person');
    }

public function getData()
    {
        return $this->id . ': ' .$this->title . '(' . $this->person->name . ')';
    }
```
belongsToすることによって`$this->person->name`としてつないだpersonモデルからpeopleテーブルのレコードを取ってこれる。
【Blue Prism】スケジュール実行でプロセスが中止した際のリカバリー

## はじめに
スケジューラーでプロセスを実行している際に、エラーが発生してプロセスが中止することがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637459/35d8c204-b00c-0257-9629-3e6a4f857a60.png)


何も設定をしないと、プロセスがエラーになった時にスケジューラーも止まってしまいます。
そこで、プロセスが中止になってしまってもスケジューラーが中止にならないようにするためのリカバリー方法について解説します。

## 前提
### バージョン
Blue Prism v6.8.1

## リカバリー方法
リカバリーするためには、次の2つの設定を行います。
* 例外発生時のタスク設定
* 「エラー発生時、タスクを中止」のチェックを外す

順番に説明します。

## 例外発生時のタスク設定
スケジュールのタスクの設定を開きます。

タスクには完了時だけでなく、例外発生時のタスクを設定することができます。
今回は先ほどエラーになったプロセス3の例外発生時にタスク4を呼び出すよう設定します。

タスク3の設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637459/a05248ef-dbe4-b07b-6074-5bdc6db42108.png)

タスク4の設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637459/b52706df-c948-bb11-dc5b-1e4166815875.png)



こうすることで、プロセス3で例外が発生しても、プロセス4を実行することができるようになります。
しかし、このままだとまだ設定が足りません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637459/a6b39244-a7a2-1ce1-0169-2be2f1989a91.png)

次に紹介する「エラー発生時、タスクを中止」のチェックを外すことが必要になります。

## 「エラー発生時、タスクを中止」のチェックを外す
図の赤枠で囲った、「エラー発生時、タスクを中止」のチェックボックスは、デフォルトではオンになっています。
なので、こちらをクリックして、チェックを外します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637459/b416d525-7691-453d-155e-bffa4b45c8fa.png)


これでリカバリーの設定が完了しました。後は全てのタスクに対してこの設定を行います。
設定したら、実際に実行してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637459/26c43c27-b2bb-b38a-dd2d-66942831cd86.png)

無事にプロセス3が中止になった後、プロセス4を走らせることができました。


## まとめ
リカバリー処理は2つの設定が必要です。
①例外発生時のタスク設定
②「エラー発生時、タスクを中止」のチェックを外す
もし例外発生時のタスクを設定しているのに中止になってしまったら、「エラー発生時、タスクを中止」にチェックがついていないか確認してみて下さい。
M1 Macで簡単にIntel版Homebrewを呼び出すコマンド

## はじめに
&emsp;HomebrewはMacユーザーにとって、おなじみのパッケージ管理システムだと思います。M1 MacではIntel版とApple Silicon版でインストール先が異なり、共存させることが可能です。Apple Silicon版は```brew```コマンドを叩くと、デフォルトで起動しますが、Intel版は絶対パスを指定しなければ呼び出せません ~~（怒られます）~~。
&emsp;そこで、絶対パスを指定しなくてもIntel版を呼び出せるようにしよう！というのが本記事の目的です。

### 開発環境
* MacBook Pro (M1, 2020)
* Z Shell 5.8
* Homebrew 3.4.5

## Homebrewの絶対パス
&emsp;以下、デフォルトの場合です。
* Intel版
```/usr/local/bin/brew```
* Apple Silicon版
```/opt/homebrew/bin/brew```

&emsp;Homebrew本体だけでなく、bottleも別々のファイル群に保存されます。

## Intel版の呼び出し方法

&emsp;Intel版は以下のようにすると呼び出すことができます。

```zsh:terminal
$ arch -x86_64 /usr/local/bin/brew
```

&emsp;でもなんかこう、、、面倒くさくないですか？Apple Silicon版がたった４文字の入力で済むことと比べると、文字数多く感じてしまいます。慣れればなんてことないのかもしれないですが、パスを失念したら悲しいですよね。ということで実装に移ります。

## 実装
&emsp;手順としては簡単です。```.zshrc```ファイルに以下の１行を追記するだけです。

```zsh:.zshrc
$ alias brew-intel="arch -x86_64 /usr/local/bin/brew"
```

&emsp;エイリアスとして設定すれば、絶対パスを入力しなくても呼び出せますね。ここではわかりやすく、```brew-intel```という名前をつけました。

## 実装に至ったきっかけ
&emsp;最近、メインPCをMacBook Pro (Late 2017) からMacBook Pro (M1, 2020) にしました。ARM版のbottleを入れ直したりするときにIntel版を呼び出すことが何度もあったわけですが、利便性の問題で途中からエイリアスにすることを思い立ちました。

## 参考にした記事
&emsp;以下の記事をもとに実装、および本記事を執筆しました。

https://zenn.dev/sprout2000/articles/bd1fac2f3f83bc

https://www.nire.com/2021/02/homebrew-coexist-m1-intel/
ColaboratoryでBigQueryにアクセスする一番楽な方法

## 公式のBigQueryのクライアントAPIを使う
ColaboratoryはGoogleアカウントがあれば使える
さらにこのアカウントはGCPアカウントとしてユーザーの認証を事前に通しておく必要がある

## 実際にデータを取得してみる
ColaboratoryではGCP関連のライブラリはディフォルトでインストールされているので、`pip install`等は書く必要がない
Colaboratoryでは不要だが、Colaboratory以外で実行する場合には下記を実行する必要がある
`pip install --upgrade google-cloud-bigquery`

今回はウマ娘というソーシャルゲームのデータベースからデータを取得する体でpythonコードを書いてみた
```python:qiita.rb
#ColaboratoryでGoogleアカウントを認証する
from google.colab import auth
auth.authenticate_user()

from google.cloud import bigquery
project_id = 'uma_musume-2021'
client = bigquery.Client(project=project_id)

# 実行するクエリ
query =  """
                SELECT  
                COUNT(*) as cnt
                FROM 
                `uma_musume-2021.honban01.accesslog_20220407` 
                ;
         """
df_official = client.query(query).to_dataframe()

df_official
```

結果のテーブル
|cnt  |
|---|
|292281265  |

1日で2億9000万程度のレコードが記録されていることがわかる(適当に予想した数値)

## その他
公式のBigQueryのクライアントAPIを使う以外にもColaboratoryでBigQueryにアクセスする方法がある

①ColaboratoryのMagic Command
②pandas経由のAPI

皆さんは色々試してみてください。
自分は公式のBigQueryのクライアントAPIを使用するやつのコードが読み取りやすかっただけです。
「遺書一筆」というサービスをリリース

# はじめに

「[遺書一筆](https://isyo-894d2.web.app/)」というサービスをリリースしました。

過去にも一度同じサービスを作ってたんですが、放置して使えなくなったので、作り直しました。
その技術的なログを残します。

# 開発方針

* フロントエンドのみ
* 自前でホスティングしない
* フロントの見た目は作れない人なので、それっぽいサービス達でカバーする

自身がバックエンド畑の人でフロント弱いので、勉強目的もあり、あえてフロント縛りで。

# 技術スタック

## フロントエンド

以前の遺書一筆はReactで書いてましたが、
Vue3選んだのは、最近会社がVue選びがちなので、勉強がてら。

（しっかし、Vueは本当に書き方が増えてて、一体どの方針でかけばいいの、というのは本当に苦労した。）

今回はSFCで、setup シュガーシンタックス使った書き方で。多分今の所これが最新なはず。

## CSS フレームワーク

Vue3に対応してるという点で、知ってる中ではQuasarしかなかった。

https://quasar.dev/

iconも用意されてる

https://quasar.dev/vue-components/icon

## Baas

firebaseの選択。理由は以下。

* githubにpushしたらデプロイできる
* ホスティングできる
* データベースもあってAPI叩くだけで良い
* それらが無料でできる

# その他利用サービス

## color

https://www.materialpalette.com/

テーマカラーの３色を、好きな２色選べば提案してくれるサイト。
色を決めれない人におすすめ

ちなみに今回は、このカラー
https://www.materialpalette.com/indigo/orange


## logo

見た目はできないとはいえ、やはりサイトのイメージになるlogoやfaviconはちゃんとしたい。そこで見つけたのがこれ

https://www.777logos.com/

ワードを入れると、そのアイコンイメージといろんなフォント・カラーのワードを並べたパターンをいくつも用意してくれる。イメージに近いものを選んだら、さらにそこから色やアイコンもカスタマイズできるので、かなりイメージに近いものが作成できます。

ただ、最後に画像をDLするところで有料になります。
イメージを固めるために使うだけでも十分利用価値あり。

## タスク管理

https://trello.com/

一人プロジェクトとはいえ、やりたいタスクは同時にいくつも思い浮かんだりするもの。
それらをざざっと一覧化しておいて、忘れないようにしつつ、必要なものから順次取って対応していくことで、

やった達成感とゴールまでの残りの距離の可視化ができて、モチベが保てます。

レーンは以下のように `ToDo`, `Doing`, `Done`, `Pending` しておけば、どこかに割り当てれる。

![スクリーンショット 2022-04-07 23.30.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1533/78224b3e-bc9d-f768-9c3f-ede3c1befc31.png)

## モチベーション管理

PC画面を配信するサービス
https://0000.studio/

どうしても一人プライベート作業だと、躓いたりしたときなどに、脇道（twitter, youtube,などなど）に逸れて時間を浪費しがち。そこで、このサービスを使って作業中の画面を世に晒すことで、見られているという緊張感が保てて作業に集中できます。

もしかすると、そんな姿を晒すことでファンができるかも？

自分の過去の配信はこちら
https://0000.studio/creators/papettoTV/broadcast-history

最近は、これなくても集中できるようになりました。

# コード

一応公開してますが、まだ、READMEもほぼデフォルトのまま。PR歓迎。

https://github.com/papettoTV/isyoippitsu

# 今後

課題はまだまだあるので、モチベが続く限り開発は続けようかと。
とはいえ一旦区切りなので、少しは落ち着きそう。
npmのSassエラーあるある

nodeのビルドがうまくいかないときの解決方法
備忘録的なメモ程度の内容です。


### エラーメッセージ1

```
Node Sass could not find a binding for your current environment
```

下記の記事で解決すると思います。
https://dev.classmethod.jp/articles/node-sass-could-not-find-a-binding/


### エラーメッセージ2

```
Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (72)
```

グローバルのnode-sassを削除で多分解決
```
$ npm uninstall -g node-sass
```