OmniAICreator/Qiita-1.07M huggingface dataset:
Aidemy / AIアプリ開発コース 3ヶ月受講の記録


タイトル通りですが、プログラミング初心者がAIアプリ開発コースを３ヶ月間受講したので、振り返りとしてまとめます。

#目次
[1.受講のきっかけ](#1-受講のきっかけ)
[2.Aidemyの学習](#2-Aidemyの学習振り返り)
[3.作成物](#3-作成物)
[4.今後の目標](#4-今後の目標)

#1. 受講のきっかけ
文系の大卒、プログラミング未経験、苦手なものは数学。
現職は営業で、転職を考えるキッカケに、何か勉強してみようと思い、Aidemy Premium Planの一番短い3ヶ月コースを選びました。

#2. Aidemyの学習
事前カウンセリングで、「数学（なんなら算数）が苦手です」と伝えたところ、一番数学の要素が少ないAIアプリ開発コースを勧めてもらいました。
コースの内容は、Aidemyのサイトに詳細があります。

Pythonの基礎、機械学習の概論、ディープラーニングの概論と学んでいき、
「男女認識」「手書きの数字認識」といった具体的な例を学び、最後に自身のポートフォリオとなりえるようなWebアプリ制作、までが課題です。

①Slackでいつでも質問ができ、毎日17〜22時の間に回答をしてもらえること
②事前に予約して30分〜1時間のカウンセリング（技術的な質問）ができること
というサポート体制があるのですが、

①だいたい終業時間が20時頃なので、残業後「さあ勉強するぞ」と気合を入れるのが難しかった
②Slackのやり取りで解決することが多かったので、カウンセリングをほとんど受けなかった
という結果でした。
結局3ヶ月ギリギリになって最終課題をなんとか提出することができたものの、カウンセリングをもう少し活用できたらよかったと思います。

#3. 作成物

最終課題を作成する前に、MNISTを用いた手書き数字を分類するWebアプリを作成するステップがあり、そのコードをかなり参考にしながら、最終課題を作成しました。

Webアプリ制作については、コースの受講案内にも「Web アプリ公開に最低限必要な知識の習得」が到達目標となっているので、作りはかなりシンプルなものになります。

Kaggleにデータセットが公開されていたので、学生時代に学んだアラビア語文字を認識するアプリを作成しました。
データセットを使用したのは、講座の修了期間がギリギリになってしまったので、自前で画像を集めて、前処理をするのはかなりハードルが高かった為です。

モデル部分のコードを下記に記載します。

```python:

model = Sequential()
model.add(Conv2D(filters=16, kernel_size=(3,3), padding='same', activation='relu', 
                        input_shape=(32,32,1)))
model.add(MaxPooling2D(pool_size=2))
model.add(Conv2D(filters=32, kernel_size=(3,3), padding='same', activation='relu'))
model.add(MaxPooling2D(pool_size=2))
model.add(Conv2D(filters=64, kernel_size=(3,3), padding='same', activation='relu'))
model.add(MaxPooling2D(pool_size=2))
model.add(Dropout(0.3))
model.add(Flatten())
model.add(Dense(500, activation='relu'))
model.add(Dropout(0.4))
model.add(Dense(28, activation='softmax'))
model.summary()
```

上記のモデルで、正解率を95%前後まであげることができました。

https://arabrecog.herokuapp.com/




#4. 今後の目標

3ヶ月の勉強を経て、基礎の基礎を知ることができたと感じており、
なかなかこの最初のハードルを独学で超えることは、私にとっては相当難しかったと思うので、受講してよかったと思っています。

今後の目標は、広くいうとプログラミングだけでなく勉強を続けること、
狭いところでは、とりあえずディープラーニング協会主催のG検定合格を目指します。

唐突ですが以上。おしまい。
Djangoのurls.pyの中でreverse関数でエラーが起きてしまったときの対処法

いつかの昔のメモが見つかりました。ಠ⁠︵⁠ಠ

###環境

```
Python 3.8.7
Django==2.2
```

###エラー内容

urls.pyの中で、次に遷移するページのURLをviewのクラス変数に渡したいなと思ったので、
views.pyの中で、

```
class HogeView(TemplateView):
    (略)
    next_url=''
```

みたいに、ビューにURLを保持する変数をを定義。
そして、urls.pyで、

```
from django.urls import reverse
import .views import HogeView
(略)
HogeView.as_view(next_url=reverse(’逆引き用文字列’))
```

としたら、、、うまく読み込んでくれなかった。
エラー内容は、

```
django.core.exceptions.ImproperlyConfigured: The included URLconf 'config.urls' does not appear to have any patterns in it. If you see valid patterns in the file then the issue is probably caused by a circular import.
``` 

と出た。

###解決策

エラー内容をググってみると。
URLConfが読み込まれるタイミングの問題らしい。
→urls.py内で逆引き用文字列nameを定義すると同時に、同じurls.pyでそのnameを参照している。

そこで、urls.pyを読み込んだ後にnameからURLを取得してくれる(遅延評価)らしいreverse_lazyを使ってみた。

```
from django.urls import reverse_lazy
import .views import HogeView
(略)
HogeView.as_view(next_url=reverse_lazy(’逆引き用文字列’))
```

そしたらうまくいっただけの話。

間違いなどあればご指摘お願い申し上げます。
【CSS】word-wrapの使い方

#プログラミング勉強日記
2021年3月10日
一昨日の記事からCSSでの改行ルールについてまとめてきた。その中でword-wrapプロパティの存在を知ったので、今日はword-wrapの使い方をまとめる。

#word-wrapとは
　word-wrapは、中途半端な位置でも強制的に改行をするプロパティである。通常、英数字は中途半端な位置では改行が行われないようになっている。そのため、古いブラウザでは画面幅以上に文字が突き抜けて表示されることがあった。(最近のブラウザでは滅多に見ないが、たまにスマートフォンでサイトを観覧したときに見かける)
　[こちらの記事](https://qiita.com/mzmz__02/items/433117298cc1f3470f46)でも書いたようにbrタグで改行することもできるが、多用してはいけないので、word-wrapを使用すると便利である。

#wod-wrapの使い方

```css:CSS
word-wrap: 値;
```

　この値には`noraml`, `break-word`を指定する。

　normalは初期値で、単語の途中では折り返しを指定しない。
　break-wordは、単語の途中でも強制的に改行を入れて文章をはみ出さなくする。


#参考文献
[HTMLでword-wrapプロパティで単語を改行する方法を現役デザイナーが解説【初心者向け】](https://techacademy.jp/magazine/32661)
[CSSのword-wrapの使い方](https://uxmilk.jp/23966)
Docker内のPythonのModuleをデバッグする方法

# 困り事

- DockerにPythonの実行環境を立てて開発をしている (module は pip でインストールしている）
- 何やら、module内でエラーが出ているようにエラーが表示されているが、渡している値は正常のように見えるので何が問題なのかが分からない
- print文などが仕込むことができればいいのに！！！ 

# やった事

`pip show ~~` とする事でそのModuleが格納されているディレクトリ情報を得る事ができます。

```
$ pip show django

Name: Django
Version: 3.0.5
Summary: A high-level Python Web framework that encourages rapid development and clean, pragmatic design.
Home-page: https://www.djangoproject.com/
Author: Django Software Foundation
Author-email: foundation@djangoproject.com
License: BSD
Location: /usr/local/lib/python3.8/site-packages
Requires: piyopiyo
Required-by: hogehoge, fugafuga
```

ので、 Dockerのコンソールに入って

```
$ cd /usr/local/lib/python3.8/site-packages/django
$ vim shortcuts.py
```

デバッグを行いたい適当な場所に `print('debug中です〜〜〜')` みたいな事を書けば、実行時のログとして出力出来るなどしました。 （エラーも無事解決）

困ったらやってみてくださいまし〜。
UIViewPropertyAnimatorとCornerRadius

CornerRadiusを設定してClipToBounds した　UIView を　UIViewPropertyAnimatorでアニメーションさせると、boundsの形が歪んでしまう。設定したCornerRadiusのままアニメーションさせるには、アニメーターの中でCornerRadiusも設定する。

```swift
UIViewPropertyAnimator.runningPropertyAnimator(withDuration: 1, delay: 0, options: [.curveEaseInOut]) {
   animationView.frame = CGRect(x:100,y:100,width:100,height:100)
   animationView.layer.cornerRadius = animationView.frame.height/2
        } completion: { (UIViewAnimatingPosition) in

        }
```

これでまんまるが歪まずにアニメーションしてくれる。

🐣
****
フリーランスエンジニアです。
お仕事のご相談こちらまで
rockyshikoku@gmail.com

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

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
[Drupal] Viewsの外部設置フィルターで一つのフォーム要素で複数のフィールド値を検索する方法

またまたViewsの外部設置フィルターのネタです。今回は一つのテキストフィールドから複数の異なるフィールドの値を検索できるようする方法を紹介します。

例としてコンテンツ一覧の**タイトル**のフォームで**本文**も検索できるようにしてみたいと思います。
![exposed_filter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/d9a2158a-f662-544b-58e5-57afcc5fca74.png)

まずはコンテンツのビューの設定画面を開きます。
![スクリーンショット 2021-03-10 21.24.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/5ccfe389-563e-e956-18dd-d112ba74e0b5.png)

手始めにフィールドに本文を追加します。
![スクリーンショット 2021-03-10 21.25.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/8dc2ef72-6afa-4fcb-5e81-f55884b3172b.png)

本文はフィルターにしか使わないので表示をオフにして保存します。
![exclude_display.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/55a585d2-726f-2c9c-de63-8db5091dbe71.png)

次に**フィールド結合フィルター**というフィルターを追加します。
![スクリーンショット 2021-03-10 21.29.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/0812ae33-d0d8-1b97-6f58-b5e93820997f.png)

フィールド結合フィルターの詳細設定画面では以下のように設定し、保存します。

- **このフィルターを訪問者へ表示し、変更できるようにする**にチェック（外部設置フィルターになります）
- **ラベル**を編集
- **オペレータ**を**含む**に修正(部分一致になります)
- **フィルタリングと組み合わせるフィールドを選択してください**という項目で**タイトル**と**本文**をチェック

![スクリーンショット 2021-03-10 21.30.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/93de3b47-6cef-5a13-6d8b-90acab21f274.png)
![スクリーンショット 2021-03-10 21.31.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/b93b2a2f-bfd4-2c93-035c-bb74fcbd21fe.png)

既存のタイトルフィルターは不要なので削除し、フィールド結合フィルターが先頭に来るようにフィルターの順番を並べ替えます。

最終的にフィールドとフィルターはこんな感じになります。
![スクリーンショット 2021-03-10 21.47.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/b96dcefd-44a1-a61f-51d4-1a99547b121b.png)


この状態でビューを保存するとフィールド結合フィルターが表示されているのが確認できます。

![スクリーンショット 2021-03-10 21.40.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/eb42918d-5a7a-79de-d189-f07e0ab5483a.png)


タイトルでも本文でも絞込めるフォームの完成です :ok_woman: 簡単ですね！
![スクリーンショット 2021-03-10 21.41.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/63bedcba-005a-873c-473e-3c1843f214c9.png)
![スクリーンショット 2021-03-10 21.41.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/4ee129c9-284b-5c5c-2653-eaaf191efd29.png)
Big Surアップデート後にコマンドラインツールのアップデートを要求される



#はじめに
BigSurアップデート後に```brew doctor```を実行すると警告メッセージ(macOS 11をサポートしていない)が表示されることがあります。
この場合、コマンドラインツールをアップデートする必要があります。

```bash
$ brew doctor

Warning: Your Command Line Tools (CLT) does not support macOS 11.
It is either outdated or was modified.
Please update your Command Line Tools (CLT) or delete it if no updates are available.
Update them from Software Update in System Preferences or run:
  softwareupdate --all --install --force

If that doesn't show you any updates, run:
  sudo rm -rf /Library/Developer/CommandLineTools
  sudo xcode-select --install

Alternatively, manually download them from:
  https://developer.apple.com/download/more/.
```

## コマンドラインツールのアップデート
メッセージ通りにsoftwareupdateからコマンドラインツールのアップデートを行います。

```bash
$ softwareupdate --all --install --force
Software Update Tool

Finding available software
No new software available.
```

コマンド実行後、上記のように「No new software available.」と表示された場合、コマンドラインツールを削除し、再インストールします。

```bash
$ sudo rm -rf /Library/Developer/CommandLineTools
$ sudo xcode-select --install
```

##doctorを再実行する
アップデートが完了したら、```brew doctor```を実行して確認します。

```bash
$ brew doctor
Your system is ready to brew.
```

これでアップデートは完了です。
[Blender]Python APIでNavigation modeに移行する

### 環境
Blender2.92.0
Windows 10 Home

### 何をする？
Blender の 3D Viewport には Walk Navigation という、3Dviewport 内を fps ゲームのように WASD で移動できるモードが存在します。この記事では、Blender の python API を用いて、開いている 3Dviewport の Navigation モードを walk Navigation に変える方法を書きます。

### 前提
Blender の初期画面で Scripting タブを開くと以下のような画面になっているかと思います。
この画面の text editor に Python のコードを書き、左上の 3D Viewport の Navigation を Walk Navigation に変えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327331/ca5cda80-053a-d861-2d1d-a519c7251618.png)


### プログラム
```python

import bpy

for area in bpy.context.screen.areas:
    if area.type == 'VIEW_3D':
        for region in area.regions:
            if region.type == 'WINDOW':
                c = {'area': area, 'region': region}
                bpy.ops.view3D.walk(c, 'INVOKE_DEFAULT')
```

### 解説
for文とif文で 3D Viewport を探して、見つかったらコンテクストとして`bpy.ops.view3D.walk()`の第一引数として渡してやります。そうしないと、text editor 内で`walk()`を実行しようとするので、「ここは 3D Viewport ちゃうぞオラ！」と怒られます。

### 参考
StackExchangeで質問をしたら、めちゃくちゃいい感じに回答を頂いた。

https://blender.stackexchange.com/questions/214394/change-navigation-into-walk-navigation-with-scripting

Walk Navigation のソースコード

https://github.com/blender/blender/blob/594f47ecd2d5367ca936cf6fc6ec8168c2b360d0/source/blender/editors/space_view3d/view3d_walk.c
とりあえず覚えとけエンジニア作業

# とりあえず覚えとけエンジニア作業

こちらに移動しました。

https://note.alhinc.jp/n/ne3a3db3303a6

# 移動先について
本記事は、現在(2023/12/23)私の所属する[ALH株式会社](https://www.alhinc.jp/)が公開している、[こちら](https://note.alhinc.jp/all)のnote記事に移行することになりました。

ストックされている方は大変お手数ですが、上記リンクから参照ください。
ローカル環境のyumリポジトリでgroupinstallを可能にする

# 背景
[ローカル環境にyumリポジトリを構築する](https://qiita.com/takom16/items/a4f6100a0e0df62e4062)での対応だけでは、`yum groupinstall`が実行できなかった。
以下はRHEL 7.9で実施した内容です。

# 対応内容
## グループ定義XMLファイルの取得
`groupinstall`を行うには、グループ定義XMLファイルが必要となる。
グループ定義XMLファイルは`repodata`ディレクトリ内にあるので、インストールメディアから持ってくる。
`ランダムな文字列-comps-Server.x86_64.xml`がグループ定義XMLファイル。

```
[root@hogehoge ~]# mount -t iso9660 -o loop /dev/sr0 /mnt/cdrom
[root@hogehoge ~]# 
[root@hogehoge ~]# cp -p /mnt/cdrom/repodata/*-comps-Server.x86_64.xml /var/local/repo/repodata
[root@hogehoge ~]# 
[root@hogehoge ~]# ls -l /var/local/repo/repodata/*-comps-Server.x86_64.xml
-r--r--r--  1 root root  642856  9月 18 04:06 /var/local/repo/repodata/3df90817a193baef023d53222cc4ce8f4d15209e593bee361bf72016022008fb-comps-Server.x86_64.xml
[root@hogehoge ~]# 
```

## yumリポジトリへの反映
`createrepo`コマンドでグループ定義をリポジトリに反映する。

```
[root@hogehoge ~]# createrepo -g /var/local/repo/repodata/*-comps-Server.x86_64.xml /var/local/repo
Spawning worker 0 with 654 pkgs
Spawning worker 1 with 654 pkgs
Spawning worker 2 with 654 pkgs
Spawning worker 3 with 654 pkgs
Spawning worker 4 with 654 pkgs
Spawning worker 5 with 654 pkgs
Spawning worker 6 with 653 pkgs
Spawning worker 7 with 653 pkgs
Workers Finished
Saving Primary metadata
Saving file lists metadata
Saving other metadata
Generating sqlite DBs
Sqlite DBs complete
[root@hogehoge ~]# 
```

yumキャッシュを削除する。
`yum group list`でグループ定義が出力されたら正常に設定できている。

```
[root@hogehoge ~]# yum clean all
読み込んだプラグイン:product-id, search-disabled-repos, subscription-manager
リポジトリーを清掃しています: local
[root@hogehoge ~]# 
[root@hogehoge ~]# yum -v group list
無効になっているため、プラグイン「rhnplugin」は読み込みません
プラグイン「product-id」を読み込んでいます
プラグイン「search-disabled-repos」を読み込んでいます
プラグイン「subscription-manager」を読み込んでいます
Updating Subscription Management repositories.
Unable to read consumer identity
Config time: 0.731
Yum version: 3.4.3
There is no installed groups file.
Maybe run: yum groups mark convert (see man yum)
Setting up Package Sacks
local                                                                                     | 3.7 kB  00:00:00     
(1/2): local/group_gz                                                                     | 131 kB  00:00:00     
(2/2): local/primary_db                                                                   | 4.3 MB  00:00:00     
pkgsack time: 0.617
group time: 0.642
Available Environment Groups:
   最小限のインストール (minimal)
   インフラストラクチャーサーバー (infrastructure-server-environment)
   ファイルとプリントサーバー (file-print-server-environment)
   ベーシック Web サーバー (web-server-environment)
   仮想化ホスト (virtualization-host-environment)
   サーバー (GUI 使用) (graphical-server-environment)
利用可能なグループ
   グラフィカル管理ツール (graphical-admin-tools)
   コンソールインターネットツール (console-internet)
   システム管理 (system-management)
   システム管理ツール (system-admin-tools)
   スマートカードサポート (smart-card)
   セキュリティーツール (security-tools)
   レガシーな UNIX 互換性 (legacy-unix)
   互換性ライブラリー (compat-libraries)
   科学的サポート (scientific)
   開発ツール (development)
完了
[root@hogehoge ~]# 
```

以上です。
ブロックチェーンとは？通貨とは？

近年、急速に話題が取り上げられているビットコイン。
ブロックチェーンとはよく聞くもののよくわからない、いまいち現実味がない、という方が多いのではないでしょうか。
本記事はそのような方でも、理解できるように記載しております。

また、継続的に記事をあげていきます。

## ブロックチェーンとは
[総務省HP](https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h30/html/nd133310.html)には次のように書かれています。

>ブロックチェーン技術とは情報通信ネットワーク上にある端末同士を直接接続して、取引記録を暗号技術を用いて分散的に処理・記録するデータベースの一種であり、「ビットコイン」等の仮想通貨に用いられている基盤技術である。一般社団法人日本ブロックチェーン協会は広義のブロックチェーン11を「電子署名とハッシュポインタを使用し改竄検出が容易なデータ構造を持ち、且つ、当該データをネットワーク上に分散する多数のノードに保持させることで、高可用性及びデータ同一性等を実現する技術」と定義している。

取引履歴などのデータを「ブロック」に格納し、それを「チェーン」と呼ばれるデータで繋げているイメージです。
各ブロックは直前に取引されたブロックの情報（ハッシュ値など）を格納しております。
過去のデータが改ざんされた場合は改ざんされたブロックのハッシュ値が変わってしまうため、検出が容易に可能となっております。
このような構造により、改ざんが非常に困難と言われております。

## 仮想通貨と暗号資産
仮想通貨と暗号資産、どちらもよく聞く名前ですが、この違いはわかりますでしょうか。

欧米では「Crypto Currency」と呼ばれており、直訳すると「暗号資産」です。
日本では「暗号」という言葉が定着しずらかったのか、「仮想通貨」という呼び方で広まりました。
しかし、金融庁の[仮想通貨交換業等に関する研究会
報告書](https://www.fsa.go.jp/news/30/singi/20181221-1.pdf)で「暗号資産」へ呼称を変更することが通達されており、公式では「暗号資産」と呼ぶことが正しいでしょう。

>７．「仮想通貨」から「暗号資産」への呼称変更
仮想通貨交換業への規制導入時において、以下の理由により、資金決済法上
「仮想通貨」の呼称が用いられた経緯がある。
・ FATF や諸外国の法令等で用いられていた“virtual currency”の邦訳で
あること。
・ 日本国内において「仮想通貨」という呼称が広く一般的に使用されていた
こと。
一方で、最近では、国際的な議論の場において、“crypto-asset”（「暗号資
産」）との表現が用いられつつある65。また、現行の資金決済法において、仮想
通貨交換業者に対して、法定通貨との誤認防止のための顧客への説明義務を課
しているが、なお「仮想通貨」の呼称は誤解を生みやすい、との指摘もある。
こうした国際的な動向等を踏まえれば、法令上、「仮想通貨」の呼称を「暗
号資産」に変更することが考えられる。


## 通貨と法貨
通貨とは、流通貨幣の略称で、決済のための価値交換媒体（wikipediaより）です。

>流通貨幣の略称で、決済のための価値交換媒体。それは、政府が発行する貨幣（money）と中央銀行が発行する銀行券（bank note）の総称である。

通貨という大枠の中に、「法貨」「電子マネー」「暗号資産」のようなものがあります。

法貨は私たちが想像する「現金」です。
紙幣と硬貨に別れ、硬貨は「額面の20倍までの金額を限度として通用するもの」と定められております。
※基本的に硬貨は、１度の取引で２０枚以上使用しないようにしましょう。

電子マネーとは、決済会社への先払いシステムです。
チャージをした段階で、決済会社にお金を預け、取引が行われたら、預けたお金から引いてもらう仕組みです。

## さいごに
投資に興味がある方、ビットコインを買ってみたい方、まずは仕組みを知ってもらえればと思います。
.envファイルを作成するshell scripts

```bash
#!/bin/bash

function SettingExecution() {
    echo "ビルドに必要な環境情報を入力してください。"

    read -p 'Contentful Space ID: ' CTF_SPACE_ID
    read -p 'Contentful Content Delivery API - access token: ' CTF_CDA_ACCESS_TOKEN
    read -p 'Contentful Content Preview API - access token: ' CTF_CDA_ACCESS_TOKEN_PREVIEW

    if [ -n "$CTF_SPACE_ID" -a -n "$CTF_CDA_ACCESS_TOKEN" -a -n "$CTF_CDA_ACCESS_TOKEN_PREVIEW" ]; then
        {
            echo "CTF_SPACE_ID=$CTF_SPACE_ID"
            echo "CTF_CDA_ACCESS_TOKEN=$CTF_CDA_ACCESS_TOKEN"
            echo "CTF_CDA_ACCESS_TOKEN_PREVIEW=$CTF_CDA_ACCESS_TOKEN_PREVIEW"
        } > .env
        echo "入力された内容で.envファイルを作成しました。"
    else
        echo "入力された値が不足しています。"
        echo "スクリプトを終了します。"
        exit 1
    fi
}

SettingExecution
```
C - 幅優先探索, A - 深さ優先探索, C - 755

##[C - 幅優先探索](https://atcoder.jp/contests/abc007/tasks/abc007_3)

```python:python
import math
import heapq
import itertools
from collections import deque
from functools import reduce
 
# main
def main():
    R, C = list(map(int, input().split()))
    sy, sx = list(map(int, input().split()))
    gy, gx = list(map(int, input().split()))
    sx -= 1
    sy -= 1
    gx -= 1
    gy -= 1

    field = []
    for _ in range(0, R):
        row = str(input())
        field.append(row)
    
    dist = []
    for _ in range(0, R):
        dist.append([-1] * C)

    deq = deque()
    deq.append([sx, sy])
    dist[sy][sx] = 0

    while len(deq) > 0:
        x, y = deq.popleft()
        for i, j in [[x+1, y], [x-1, y], [x, y+1], [x, y-1]]:
            if not(0<=i<C and 0<=j<R):
                continue
            if field[j][i] == '#':
                continue
            if dist[j][i] == -1:
                dist[j][i] = dist[y][x] + 1
                deq.append([i, j])
    print(dist[gy][gx])
            
# エントリポイント
if __name__ == '__main__':
    main()
```

##[A - 深さ優先探索](https://atcoder.jp/contests/atc001/tasks/dfs_a)

pypyだとTLEになります。
初めてのケースで勉強になりました。

```python:python
import sys
import math
import heapq
import itertools
from collections import deque
from functools import reduce

field = []
visited = []
H = 0
W = 0

def dfs(x, y):
    global H, W, field, visited

    if visited[y][x]:
        return
    visited[y][x] = True
    for i, j in [[x+1, y], [x-1, y], [x, y+1], [x, y-1]]:
        if not(0<=i<W and 0<=j<H):
            continue
        if visited[j][i]:
            continue
        if field[j][i] == '#':
            continue
        dfs(i, j)

# main
def main():
    sys.setrecursionlimit(1000000)
    global H, W, field, visited
    H, W = list(map(int, input().split()))

    for y in range(0, H):
        row = str(input())
        field.append(row)
        row = []
        for x in range(0, W):
            row.append(False)
            if field[y][x] == 's':
                sx = x
                sy = y
            elif field[y][x] == 'g':
                gx = x
                gy = y
        visited.append(row)

    dfs(sx, sy)
    
    if visited[gy][gx]:
        print("Yes")
    else:
        print("No")
            
# エントリポイント
if __name__ == '__main__':
    main()
```

##[C - 755](https://atcoder.jp/contests/abc114/tasks/abc114_c)

```python:python
import sys
import math
import heapq
import itertools
from collections import deque
from functools import reduce

N = 0
ans = 0

def dfs(n, used3, used5, used7):
    global ans

    if n > N:
        return
    
    if used3 and used5 and used7:
        ans += 1
    
    dfs(10*n + 3, True, used5, used7)
    dfs(10*n + 5, used3, True, used7)
    dfs(10*n + 7, used3, used5, True)

# main
def main():
    sys.setrecursionlimit(1000000)

    global N, ans
    N = int(input())

    dfs(0, False, False, False)

    print(ans)
            
# エントリポイント
if __name__ == '__main__':
    main()
```
C# nullか空文字か空白か判定したい。

#【C# nullか空文字か空白か判定したい。】

C#で書かれた業務で使用するツールを改修しました。
その際に、null、空文字、空白を判定する必要がありました。
その判定に使用したメソッドを備忘録として残します。

##IsNullOrWhiteSpaceメソッド

このメソッドを使用することで、文字列がnullか空文字か空白か判定可能。

下記が使用例です。

```c#
using System;

public class Example
{
  public static void Main()
  {  
    string example = " 　";  //空白  

    if (string.IsNullOrWhiteSpace(example))
    {
        Console.WriteLine("nullか空文字か空白である。");
    }
    else
    {
        Console.WriteLine("null、空文字、空白でない。");
    }
  }
}
```

###似たようなメソッドでIsNullOrEmptyメソッドがある。

IsNullOrEmptyメソッドは、IsNullOrWhiteSpaceメソッドとほぼ同じ。
違う点としては、IsNullOrEmptyメソッドは空白を判定できない。
　→　IsNullOrWhiteSpaceメソッドを使用すれば良いでしょう。
[Windows] miniダンプとfullダンプの違い

# ダンプ関連記事

https://tera1707.com/entry/2022/02/06/144447#WindowsDump

# やりたいこと

ダンプのやり方を調べるうえでminiダンプとfullダンプがどう違うのかわからなかったが、関連記事を見つけたのでメモ。

# メモ

ミニダンプとフルダンプの違い
https://cloud6.net/so/.net/106574
miniには、ヒープの値が保存されてないらしい。つまり、デバッガで見た時に、どこで止まったかは見れても、その時の各クラスやら変数やらの値が見れないということか。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352601/48cafa11-30a7-daea-1138-148ecb54faf5.png)
めったにやらないAWS CLIでS3バケットを作成＆設定する方法を思い出すためのメモ

# TL;DR
- めったに無いけどS3 bucketを手動で作成する場合にaws cliのs3apiを思い出す時間短縮のためのメモです
    - TerraformやCDKを使いたいけど使いにくい場合など。でも手で作るのは嫌だ
- ここを見ればリファレンスをさまよわなくてもs3apiにたどり着くよね
- AWS CloudShellは便利だね

# よくあるS3 bucket設定値


```bash

BUCKET_NAME=hogehogefugafuga
 
# Create Bucket
aws s3api create-bucket --bucket ${BUCKET_NAME} --region ap-northeast-1 --create-bucket-configuration LocationConstraint=ap-northeast-1
 
#
# Versioning
#
## Enable Versioning
aws s3api put-bucket-versioning --bucket ${BUCKET_NAME} --versioning-configuration Status=Enabled
## Confirmaton
aws s3api get-bucket-versioning --bucket ${BUCKET_NAME}
{
    "Status": "Enabled"
}
 
#
# Public Block Access
#
## Set
aws s3api put-public-access-block --bucket ${BUCKET_NAME} --public-access-block-configuration BlockPublicAcls=true,IgnorePublicAcls=true,BlockPublicPolicy=true,RestrictPublicBuckets=true
## Confirmation
aws s3api get-public-access-block --bucket ${BUCKET_NAME}
{
    "PublicAccessBlockConfiguration": {
        "BlockPublicAcls": true,
        "IgnorePublicAcls": true,
        "BlockPublicPolicy": true,
        "RestrictPublicBuckets": true
    }
}
```

<details><summary>^で作成されるbucketの設定値はこんな感じ</summary>
<div>

```

- プロパティ
    - バケットの概要
        - region: ap-northeast-1
    - バケットのバージョニング
        - バケットのバージョニング: 有効
        - Multi-Factor Authentication (MFA) の削除: 無効
    - タグ
        なし
    - デフォルトの暗号化
        - デフォルトの暗号化: 無効
    - Intelligent-Tiering Archive 設定
        なし
    - サーバーアクセスのログ記録
        - サーバーアクセスのログ記録: 無効
    - AWS CloudTrail データイベント
        設定してね
    - イベント通知
        なし
    - Transfer Acceleration
        - Transfer Acceleration: 無効
    - オブジェクトロック
        - オブジェクトロック: 無効
    - リクエスタ支払い
        - リクエスタ支払い: 無効
    - 静的ウェブサイトホスティング
        - 静的ウェブサイトホスティング: 無効
- アクセス許可
    - アクセス許可の概要
        - アクセス: 非公開のバケットとオブジェクト *デフォルト(ブロックパブリックアクセスオン時)
    - ブロックパブリックアクセス (バケット設定)
        - ブロックパブリックアクセス (バケット設定): 全てオン
    - バケットポリシー
        なし
    - オブジェクト所有者
        - オブジェクト所有者: オブジェクトライター *デフォルト
    - アクセスコントロールリスト (ACL)
        - バケット所有者 (AWS アカウント)のみ *デフォルト
            - オブジェクト: リスト、書き込み
            - バケットACL: 読み取り、書き込み
    - Cross-Origin Resource Sharing (CORS)
        なし
- メトリクス
    デフォルト
- 管理
    デフォルト
- アクセスポイント
    デフォルト(なし)

```

</details>
【初心者用】Gitコマンド<clone~pushまで頻繁に使いそうなやつ>

#背景
僕含めGitコマンド不慣れな初心者が
clone~pushまで少しでも早く処理できるようにしたい。

#コマンド一覧

cloneしたいディレクトリに移動
``cd cloneしたいディレクトリ``

リポジトリをclone
``git clone URL(githubのリポジトリのURLを貼り付け）``

ブランチをきる
``git checkout -b feature/ブランチ名``

ローカルブランチ確認
``git branch``

作業ブランチ変更したいなら
``git checkout ブランチ名``


---ここでローカルで作業をする---


ブランチの状態を確認
``git status``

作業した差分を確認
``git diff``

ステージング環境にあげる
``git add 作業したファイル名``

ステージング環境にあげた内容をコミット
``git commit -m "コミットメッセージ"``

コミットした内容をpush
``git push -u `ブランチ名``
※2回目以降のpushは``git push``でOK

push後に出てきたURLに飛んで処理する

#終わりに
今回は初心者がよく使いそうなコマンドを書きました。
Railsチュートリアル終了後に
詳しい説明を加えた別記事を作成予定です。
【Swift】try do catch をキャラクター風に説明する

##tryの使いどき
返り値がthrow(エラーを投げる可能性があるよ)のとき、
do (throwのついた処理をこの中で実行するよ）
try (とりあえず実行してみる！)
catch (tryでエラーになった結果をキャッチするよ)
の3人1組で使う。

エラーハンドリングが必要ない場合は、
try! のように「！」をつけると、
try「エラーでないから俺一人でやらせてくれ！」
となり、doとcatchなしで実行できます。

```Swift
func hogehoge() throw -> Hoge {}
//throws「エラーを投げる(スロー、throw)かもよ〜」

//try do catch3人組
//do「エラーがthrowされるかもしれない処理しま〜す」
//do「catchさんエラーが出たらキャッチしてくださいね〜」
do { 
    let _ = try hogehoge() //try「とりあえず実行してみよ」
} catch { error in //errorという名前でエラーをキャッチ
    print(error) //クラッシュせずエラーが出力される
}

//tryの個人プレー
let _ = try! hogehoge() //try「俺一人でやる！」
//->エラーをキャッチしてくれるcatchがいないので
//エラーが出たらクラッシュする
```

##おわりに
１年前はよくわからなかったのですが
こうして振り返るとよくわかります。
M1 MacでNext.jsのimageが表示されない件

# はじめに
Youtube等で「開発する人の大半はM1 Macを購入しても問題ない」という動画を鵜呑みにし、絶賛ドハマり中です。
今回は、Next.jsを使って開発中に出くわしたバグ『imageが表示されない』件についてです。
※ハマっていた割にあっさり直りました。

# next/imageとは
Next.js v10.0〜追加され、画像を最適化をしてくれるコンポーネントです。

```javascript

import Image from 'next/image'

<Image src="/examle.jpg" width={400} height={200}>
```
本来、上記のように書くだけで簡単に最適化できます。
が、、、M1に変えたところ画像が表示されなくなりました。。。

# やったこと
とりあえず、同じ症状が出た人を探しました。
すると下記の投稿を発見しました。
[Can't compile under Apple Silicon M1 arm64](https://github.com/lovell/sharp/issues/2460#issuecomment-751491241)

なにも考えず、一旦記載されている内容を実行

```
brew info vips
```

```
brew reinstall vips
```
結果：表示されず、、、

色々調べましたが同じような対応方法しか書いておらず、積んだと思いました。

諦めて、標準の「img」タグで代用しようと思いましたが、最後にダメ元でNext.jsを最新化したところ、、、

```
npm install next@latest
```
問題なく表示されました！！！！
（てかバージョンアップあったのか、、、すでに最新状態だと思い混んでました）
因みに、Next.jsのバージョンは「next@10.0.8」です

参考までにその他の構成は下記の通り

```
npm list --depth=0
 
<出力結果>
├── @material-ui/core@4.11.3
├── @material-ui/icons@4.11.2
├── @material-ui/system@4.11.3
├── @types/node@14.14.21
├── @types/react-scroll@1.8.2
├── @types/react@16.14.2
├── @typescript-eslint/eslint-plugin@3.10.1
├── @typescript-eslint/parser@3.10.1
├── @typescript-eslint/typescript-estree@3.10.1
├── eslint-config-prettier@6.15.0
├── eslint-plugin-prettier@3.3.1
├── eslint-plugin-react@7.22.0
├── eslint@7.18.0
├── next@10.0.8
├── prettier@2.2.1
├── react-dom@16.14.0
├── react-scroll@1.8.1
├── react@16.14.0
├── sass@1.32.6
├── sharp@0.26.3
├── typescript@3.9.9
└── zenn-cli@0.1.75
```

# 最後に
深い説明は抜きとして、今回はM1 MacでNext.jsのimageが表示されなかったので解決した方法を簡単に書きました。

M1 Macで上手く動かず、調べてもわからない場合は、ライブラリやアプリがまだM1 Macに対応していない場合が多いので、気長にバージョンアップを待ちましょう。

誰かの助けになれば嬉しいです:relaxed:
【初心者】Swift UIを勉強する その④ ーーーSwiftUI in macOS

# はじめに

前回の記事はiPadで実行してみました。
今回はmacOSに実行するには必要な手順を勉強していきます。
![截屏2021-03-02 21.02.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/c5ff9971-655d-62e9-edbe-a0ffe0b7c4f5.png)


# 目次
<!-- タイトルとアンカー名を編集 -->
1. [macOSでSwiftUI実行](#SwiftUI)
4. [まとめ](#まとめ)
5. [参考文献](#reference)


<!-- 各チャプター -->
<a id="#SwiftUI"></a>
# macOSでSwiftUI実行
・まずは何も変更せずに、targetをmacに変更したら、`macOSで実行できないよ`というエラーが出ました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/40271cd5-730e-0412-980e-83d7341ab9bb.png" width=30%>
![截屏2021-03-02 20.11.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/99dd7b74-36c7-1711-197a-945efd65f716.png)

・ですので、iOSのみ実行させる判断条件を足す必要があります。
・`#endif`はif文の閉じ括弧、`@ViewBuilder`宣言によってbodyには複数のviewがあるよとみなされます。

```swift:CoursesView.swift
struct CoursesView: View {
    @ViewBuilder
    var body: some View {
        #if os(iOS)
        List(0 ..< 30) { item in
            CourseRow()
        }
        .listStyle(InsetGroupedListStyle())
        .navigationTitle("Courses")
        #else
        //macOS
        #endif
    }
}
```
・今回はmacOSも同じ処理を行うので、同じコードをコンポーネントにして、実行したいならば呼び出す形にします。

```swift:CoursesView.swift
struct CoursesView: View {
    @ViewBuilder
    var body: some View {
        #if os(iOS)
        content
            .listStyle(InsetGroupedListStyle())
        #else
        content
        #endif
    }
    var content: some View {
        List(0 ..< 30) { item in
            CourseRow()
        }
        .navigationTitle("Courses")
    }
}
```

・macの場合は、アプリのwindowを小さくすると内容自体が隠されて見れないことがあります。
　ですので、`frame()`を使って制御することができます。
　もちろん`maxWidth`もできます。`idealWidth: 200`を使ったらデフォルトで200が設定されます。

```swift:CoursesView.swift
content
  .frame(minWidth:800, minHeight: 600)
```


<a id="#まとめ"></a>
# まとめ
**ソースコード[Github](https://github.com/wsimple1028/swiftUI_ios14)**

<a id="#reference"></a>
# 参考文献
- [Design Code --- SwiftUI for iOS 14](https://designcode.io/swiftui-ios14)
boolean型での投稿と表示について（ruby 2.5.4)


今回はデータベースの上にboolean型で格納された値を、
投稿、表示の際は別の表示名にする方法をご紹介します。
間違っている部分や分かりづらい等ございましたらお手数ですがご指摘いただけますと幸いでございます。


今回は私が自作した簡易SNSサイトでの例をもとにご紹介させて頂きます。

環境
ruby 5.2.4

今回の対象はアイテムテーブルのpackingカラムです。

````
 create_table "items", force: :cascade do |t|
    t.string "name", null: false
    t.string "shop_name", null: false
    t.boolean "packing", default: true, null: false
```
↓アイテムコントローラー

```items_contoroller.rb
def show
    @item = Item.find_by(id: params[:id])
end
def new
    @new_item = Item.new
end
～
 private
  def item_params
    params.require(:item).permit(:name,:shop_name,:packing,:introduction)
  end
```

boolean型(ブーリアン）とはカラムの中に格納する値をtrue(真)かfalse(偽)の2つの選択肢のみで扱うことができるデータ型になります
例）　男　女


なので運用していく中で値の種類が増えていく可能性がある場合はでデータ型をinteger型にし、
Enamで管理するといった方が良いかもしれません。
例）野菜　果物　肉　魚

さて本題のboolean型ですが、データベースに格納されている値はtrueかfalseです。
しかし実際の画面ではtrue falseと表示されてもわからないですよね。
なので下記図のようにtrueを個包装　falseを同梱に置き換えたいとおもいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1035984/1525f590-8c2b-0443-25b9-199ca9f9bbf4.png)

どうやってやるか？
form_withのradio_buttonオプションを使います！

実際の投稿記述コード

```items/new.erb
<h4>新規投稿画面</h4>
<%= form_with model: @new_item, local:true do |f| %>
～
<h6>包装</h6>
<%= f.radio_button :packing, "true" %>個包装
<%= f.radio_button :packing, "false" %>同梱
～
<%= f.submit '投稿する' %>
<% end %>
```

（～は関係ない記述をとばしているという意味です）

f.radio_button :カラム名, "true" %>trueにあてはめたい文字
f.radio_button :カラム名, "false" %>falseにあてはめたい文字
と記述をしてあげれば表示は任意の文字になります！


では投稿したものを表示させるときはどうするか？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1035984/bf07c5ed-9dc7-1ba6-4d8c-b97ef5b71398.png)

if文を使います！
なぜIf文を使うか。それはIf文がtrueかどうかを尋ねているからです。
なので条件分岐を使用しtrueであれば個包装を表示し、そうでなければ（elseif）同梱として表示する記述をかいてあげましょう

```items/show.erb
<h6>
  <i class="fas fa-box"></i>包装
  <strong>
    <% if @item.packing %>
        個包装
    <% elsif %>
        同梱
    <% end %>
 </strong>
</h6>
```


おまけ
boolean型のバリデーション

```item.rb
validates :packing, inclusion: {in: [true, false]}

```

trueかfalseを含むことをバリデーションの条件にしてあげます


以上になります。
お読みいただきありがとうございます。
データベースの値を〜ごとに1から登録したい

基本はこれをどこかに打ち込む感じ

number = 1

データベース処理

number += 1

処理はわかっているのにデータベースをどこで取得しているかわからない場合

多分変えたいデータを呼び出すためにそのテーブルのクラスを呼び出しているのでそれを見つける

多分それを呼び出した後にその後にappendとかでからの変数にデータを突っ込んでいると思うので、その後にnumberを+1すればおk

多分こうした方がみたいな意見も出るかもですが、最も単純な方法はこれだと思う。

初学者の方はしんどいかもですが、その処理を見つけて上記を試してみてください。

多分できます。
UITableViewCellクラスを用いてcellを規定する

UITableViewCellクラスを用いてcellを規定。
cellがもつプロパティ毎にデータを管理する必要がある。

```swift
import UIKit

struct Item {
    var title:String
    var image: UIImage?
    var titleIsHidden: Bool
    var buttonTitle: String {
        switch titleIsHidden {
            case true:
                return "表示"
            case false:
                return "非表示"
        }
    }
}


class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    @IBOutlet weak var tableView: UITableView!

    private var items = Array<Item>(repeating: Item(title: "text", image: UIImage(named: "bunny"), titleIsHidden: false), count: 20)


    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self
        tableView.delegate = self
    }


    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        80
    }


    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        items.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // Reuse or create a cell.
        let cell = tableView.dequeueReusableCell(withIdentifier: "basicStyle", for: indexPath) as! BasicStyle

        cell.configure(
            item: items[indexPath.row],
            didTapHideButton: { [weak self] in
                self?.items[indexPath.row].titleIsHidden.toggle()
                self?.tableView.reloadRows(at: [indexPath], with: .automatic)
            }
        )
        return cell
    }
}

class BasicStyle: UITableViewCell {
    @IBOutlet private weak var hideButton: UIButton!

    private var didTapHideButtonHandler: () -> Void = {}

    func configure(item: Item, didTapHideButton: @escaping () -> Void) {
        textLabel?.text = item.title
        imageView?.image = item.image
        textLabel?.isHidden = item.titleIsHidden
        hideButton.setTitle(item.buttonTitle, for: .normal)
        didTapHideButtonHandler = didTapHideButton
    }

    @IBAction func didTapHideButton(_ sender: Any) {
        didTapHideButtonHandler()
    }
}

```
![Videotogif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/843253/e97f1a4b-61fd-abbe-23c7-f5ec11c29c4c.gif)
PowerShellでvimを使えるようにする

キッティング用に書いておきます。

#前提条件
Windows10 Pro(64bit)


#Vim本体をダウンロード

香り屋Vimのzipをダウンロード
https://www.kaoriya.net/software/vim/
PCに合わせて選択する。今回は64bitを選択


本家vim.orgから__Win32 console executable__のzip版をダウンロードでも可
https://www.vim.org/download.php

ダウンロードしたzipを任意のディレクトリに解凍して、

~~~powershell
 C:\Users\%USERNAME%\tools\vim\
~~~

にコピー

#VimにPATHを通す
ユーザー環境変数に以下のディレクトリを追加

~~~
C:\Users\%USERNAME%\tools\vim\
~~~

#スクリプトを実行可能にする

PowerShellで.ps1が実行可能か判定する

~~~powershell
PS C:\Users\%USERNAME%> get-executionpolicy
~~~

と叩き

~~~powershell
PS C:\Users\%USERNAME%> get-executionpolicy
RemoteSigned
~~~

と返ってくるならスクリプトが実行可能

もしここで、

~~~PowerShell
PS C:\Users\%USERNAME%> get-executionpolicy
Restricted
~~~

と返ってくるならPowerShell上でスクリプトが実行不能。

そのため、以下をPowerShellにて叩き、RemoteSignedの権限に設定する。

~~~powershell
set-executionpolicy remotesigned
~~~

これで再度```get-executionpolicy```を叩いて```RemoteSigned```が返ってきたらスクリプトが実行可能となる。


#PowerShellのプロファイルを作成しておく

プロファイルの存在を確認


~~~powershell
PS C:\Users\%USERNAME%> $profile
C:\Users\%USERNAME%\Documents\PowerShell\Microsoft.PowerShell_profile.ps1
~~~
と返ってくる。

もし該当のディレクトリがない場合は

~~~powershell
PS C:\Users\%USERNAME%> $mkdir C:\Users\%USERNAME%\Documents\PowerShell
~~~
上記のようにディレクトリを作成する。


~~~powershell
PS C:\Users\%USERNAME%> $cd C:\Users\%USERNAME%\Documents\PowerShell
PS C:\Users\%USERNAME%\Documents\PowerShell> $New-Item -type file Microsoft.PowerShell_profile.ps1
~~~


`Microsoft.PowerShell_profile.ps1`を作成する。


任意のエディタで```Microsoft.PowerShell_profile.ps1```を開いて編集。



##PowerShellからVimを実行する
PowerShellを開いて、任意のディレクトリで

~~~powershell
PS C:\Users\%USERNAME%> $vim -v
~~~

などと打ってみてバージョンが出たらOK。
カフェでプログラミングしてる風（でも何もやってない）Rust（クソ）コード

# はじめに

私はキラキラ✨エンジニア✨！
うふふ！今日はどんなアートを作ろうかしら！

みたいなノリになりたいときってあるかと思います．

https://qiita.com/3S_Laboo/items/660883a0184dabaea65b

この記事は上の記事の~~パク~~オマージュです．

今日は、カフェでMacを使っている時に周りから
「お，この人Macで何かやってるな．何か難しそうな事をしているからエンジニアなんだな．素敵だな．」
と思わせる素敵な（Kuso）プログラムを用意しました．

ぜひ，おしゃれカフェで使ってみてください．

## Dependencies

```
rand = "0.8.3"
indicatif = "0.15.0"
```

## ターミナルで実行すればカッコイイRustコード

```rust
use indicatif::{MultiProgress, ProgressBar, ProgressStyle};
use rand::{rngs::StdRng, Rng, SeedableRng};
use std::{
    sync::{Arc, Mutex},
    thread,
    time::Duration,
};

const FAKE_PROGRAMS: [&str; 16] = [
    "cargo make",
    "nginx daemon",
    "tsc -",
    "stack run",
    "nohup python main.py",
    "cURL fetching",
    "g++ -O3 -std=c++11",
    "nvidia-smi",
    "openssl --rand",
    "rustup",
    "cryptocurrency",
    "awesome dungs",
    "owo",
    "docker-compose",
    "npx create-next-app",
    "pipenv install",
];

fn main() {
    let style = ProgressStyle::default_bar()
        .template("[{elapsed_precise} {bar:60.green/blue}] {pos:5}/{len:5} {msg}")
        .progress_chars("##>-");

    let rng = Arc::new(Mutex::new(StdRng::from_seed([42; 32])));

    let bars = MultiProgress::new();

    for _ in 0..16 {
        let pb = bars.add(ProgressBar::new(10000));
        pb.set_style(style.clone());

        let rng = Arc::clone(&rng);
        let _ = thread::spawn(move || {
            let mut ctr = 0;
            while ctr < 10000 {
                let diff = rng.lock().unwrap().gen_range(10..100);
                ctr += diff;
                pb.inc(diff);
                thread::sleep(Duration::from_millis(rng.lock().unwrap().gen_range(5..10)));
                let msg = FAKE_PROGRAMS[rng.lock().unwrap().gen_range(0..16)];
                pb.set_message(msg);
            }
            pb.finish_with_message("Done!");
        });
    }
    bars.join().unwrap();
}

```

[indicatif](https://github.com/mitsuhiko/indicatif)はRustでプログレスバーを作成するときに重宝するクレートです．これを使うことで，それっぽいプログレスバーを表示することができちゃいます！

公式の例でもYarnっぽいなんもしてないプログレスバーを表示する例があります．

つまりこれは何もしてないカッコイイエンジニアへの特急券ともいえるクレートでしょう！使うに越したことはない！！

そしてせっかくのRustなわけですし，多スレッドで動かしてみたいわけじゃないですか．同時に処理しているプログレスバーが$m$本ある際，プログレスバーのそれっぽさは$m^2$に比例するという関係がある気がします．

このプログラムでは16本のプログレスバーが同時に動きますのでそれっぽさ256倍です．嬉しいですね！

更には，画面右側にはなんかそれっぽい名前のプログラムが表示されています．こりゃきっとなんかしているにきまってます！！

さて肝心の実際に動かした例ですが以下のようになります．

![7.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217391/5d1fc34c-656b-f67a-656a-bc12e7bf35ac.gif)

こりゃ間違いなくなんかしてるに決まってます！
自己肯定感爆上げですわ！！

# おわりに

僕はおうちにこもってWindowsのデスクトップでシラフでこの記事を書きました．

イケイケ度が足りない環境で執筆してしまったことをここにお詫びいたします．

# さいごに

全く同名で先を越されていた！！

https://qiita.com/sskmt/items/de881fbec5441f650e1a
Kerasを使って初めての画像分類をした

こんにちは！

今日は初めてKerasを使って画像分類をしてみました。

以下参考サイト↓

https://newtechnologylifestyle.net/keras%e3%81%aecnn%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6%e3%82%aa%e3%83%aa%e3%82%b8%e3%83%8a%e3%83%ab%e7%94%bb%e5%83%8f%e3%81%a7%e7%94%bb%e5%83%8f%e8%aa%8d%e8%ad%98%e3%82%92%e8%a1%8c%e3%81%a3/

#データセットの集め方
以下のサイトを参考にして集めました。

https://aiacademy.jp/media/?p=352

#結果
###1． 200epochsかつ元の層の場合
以下のようになりました。
※結果の左側が精度(accuracy)です。

```python
[3.4605627059936523, 0.43478259444236755]
```

想像以上に正確性が悪かったので、畳み込み層を追加して再度実行しました。

###2． 200epochsかつ畳み込み層を追加した場合
以下のようになりました。

```python
[3.302427291870117, 0.47826087474823]
```

ちょっとだけ正確性上がりました。

#所感
初めて本格的な画像分類ができて喜びと興奮を感じました。
本（０から作るDeepLearning）であったように層を深くすると精度が上がるのも確認できてよかったです。
nodeでマルチキャストを送信する


## node.jsでmulticast
色々調べたけど、うまくいくサンプルがなかったので、書きました。
setMulticastInterfaceをちゃんと入れるのがポイント。


```js

var news = [
           "Borussia Dortmund wins German championship",
           "Tornado warning for the Bay Area",
           "More rain for the weekend",
           "Android tablets take over the world",
           "iPad2 sold out",
           "Nation's rappers down to last two samples"
];

const HOST_ADDRESS = "192.168.0.1";
const MULTICAST_ADDRESS = "230.255.192.1"
const PORT = 5000;

var dgram = require('dgram');
var server = dgram.createSocket("udp4");
server.on("listening", function(){
                server.setBroadcast(true);
                server.setMulticastTTL(128);
                server.addMembership(MULTICAST_ADDRESS, HOST_ADDRESS);
                server.setMulticastInterface(HOST_ADDRESS);  // これがないとIFからパケットが出なかった
});
server.bind();
setInterval(broadcastNew, 3000);

function broadcastNew() {
            var message = new Buffer(news[Math.floor(Math.random()*news.length)]);
            server.send(message, 0, message.length, PORT, MULTICAST_ADDRESS);
            console.log("Sent " + message + " to the wire...");
            //server.close();
        }
```

## 参考
https://stackoverflow.com/questions/14130560/nodejs-udp-multicast-how-to
今注目のフロントエンドフレームワークNext.js入門


# はじめに
今回は、今注目のフロントエンドフレームワークのNext.jsについて解説します。
ざっと概要を掴みたい方はぜひ読んでみてください！

# YouTube動画
文字だけでなく、動画での解説もしています。
興味のある方はこちらも見ていただけると嬉しいです。
[【YouTube動画】注目のフロントエンドフレームワーク Next.js は何ができるか、ご紹介します！！](https://youtu.be/DdfB0LWXuGI)
[![注目のフロントエンドフレームワーク Next.js は何ができるか、ご紹介します！！](https://img.youtube.com/vi/DdfB0LWXuGI/0.jpg)](https://youtu.be/DdfB0LWXuGI)


# Next.jsとは？
SSR/SSG用のReactフレームワークです。
React単体ではないSSR/SSGなどの機能や、最近はISRも追加されています。
[公式チュートリアル](https://nextjs.org/docs/getting-started)がとても充実していますので、興味を持った方は是非やってみましょう！

# SSR、SSG、ISRとは？
SSRとはServer Side Renderingの略で、リクエスト毎にサーバ側でHTMLを構築して表示します。
普通にReactで開発したサイトだとSEOに弱いので、Next.jsではSSRが実装されています。
しかし、サーバ側で毎回レンダリングするので遅いということで、SSG(Static Side Generation)が登場しました。
SSGでは予めHTMLを作っておいて、リクエストがあった場合はそのまま返します。
SSGはデータの追加頻度が少ないときによく使われ、AmazonやTwitterのように更新頻度が多いと使えません。
ISR(Incremental Static Regeneration)はビルド時にHTMLを作るためSSGと似ています。
SSGとの違いは各ページに有効期限を設定することで、有効期限が切れた後にアクセスされたタイミングで再ビルドを行う点になります。

# Next.jsで追加された要素(SSR、SSG、ISRのために必要な要素)
ヘッダ：ヘッダをページごとに動的に生成
動的ルート：Reactルータにより動的なルートを表現
サーバサイドとの通信：ブラウザで表示するより前にデータを取得

# Next.jsの用意しているタグ
[Head](https://nextjs.org/docs/api-reference/next/head)：headを書くことでヘッダを設定できます
[Image](https://nextjs.org/docs/api-reference/next/image)：デフォルトでロードを非同期にしてくれます
[Amp](https://nextjs.org/docs/api-reference/next/amp)：簡単にAMPに対応できるようにページを変えられます
[Link](https://nextjs.org/docs/api-reference/next/link)：SPAとしてリンクします

# ルーティング
pagesフォルダにファイルを置くとルートが作られます。
動的なルートに関しては、[]でIDをくくったファイル名にするとできます。

# SSR、SSG、ISR用の機能
getStaticProps：サーバサイドのデータをビルド時にとってきます。そのまま使うとSSGとなり、Revalidateと入れるとISRになります。Revalidateを指定すると、有効期限が過ぎたページを最新のものにビルドしなおしてくれます。
getServerSideProps：サーバーサイドのデータを、ユーザリクエスト時にとってきます。SSRに使うものですが、ユーザリクエストの度に取りに行くのでSSGに比べて少し遅くなります。
getStaticPaths：動的ルーティングが何個あるかわからない時に数を教えてくれます。Fallbackプロパティをtrueにすると、ビルド時に存在しなかったルートにアクセスがあった場合に、アクセス時点でルートが存在するか確認します。

# SSR/SSG/ISRはどうやってデプロイする？
Next.jsを作っているVercelにアップロードすると使えます。
また、next-on-netlifyでNetlifyでも使えます。

# おわりに
Next.jsはシンプルで使いやすいので、ぜひ使ってみてください！
[個人開発]有料の宣伝所作ってみた！

#初めに
今回は「BEARKS」という有料の宣伝所を作ってみました。いわばサービスサファリの有料版です。今回はBEARKSについて書いていこうと思います。

https://bearks.herokuapp.com/

↑URL

#なぜ作ったか
サービスサファリとかは毎日掲載数が多すぎて自分の宣伝がすぐ埋まってしまいます。
有料にすると使用者が減るのを利用して掲載数が少なめの宣伝所を作ろうと思いました。

![763548.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480294/317578e4-9bcd-8e67-fbb3-7be962d3ab5f.png)


トップページ

宣伝するものは問いません。ツイッターアカウント、webサービス、アプリ、ブログ...

審査はありませんが不適切な内容があった場合はこちらで処理します。

#値段
500円...投稿

1000円...投稿＆スライドショーに記載

2000円...投稿＆スライドショーに記載＆プレミアムページに記載

こんな感じです。

編集は無料でできます。

# 開発コスト
ズバリ **0円**です。
herokuは無料プランですがschedulerを使いスリープしないようにしています。
fontawesomeも無料プラン。postgresqlも無料です。

##見る側のメリット

新しいサービス、アプリ情報をいち早く見れる。



##宣伝する側のメリット

有料なので一度やれば埋もれにくい

#使用したgem ＆ 技術

rails6.1
ruby2.7
postgresql
heroku free

```
gem 'ridgepole'
gem 'slim-rails'
gem 'html2slim'
gem 'pry-rails'
gem 'devise'
gem 'kaminari'
gem 'activeadmin'
gem 'rack-attack'
gem 'rails-i18n'
gem 'devise-i18n'
gem 'devise-i18n-views'
gem 'carrierwave'
gem "stripe"
gem 'dotenv-rails'
gem 'redcarpet'
gem 'rouge'
gem 'rmagick'
gem 'fog-aws'
```

こんな感じです。
ドメインは今とこ取得してません。

#まとめ
ここまで読んでくれてありがとうございます。

ぜひ「BEARKS」使ってみてください！

https://bearks.herokuapp.com/

↑URL
Git備忘録(Railsチュートリアル)

#背景
Railsチュートリアル(6.0)第１章で理解した内容やコマンドをまとめて備忘録にする


**＜前提＞**
・Gitインストール・セットアップは完了済
・クラウドIDEは使用しない


###名前とメールをGitに設定

```
$ git config --global user.name "自分の名前"
$ git config --global user.email "自分のメールアドレス"
```
###`git checkout`コマンドを楽に`git co`で実行できるよう設定

```
$ git config --global alias.co checkout
```

###gitでパスワードを一定時間保持するように設定(86400は保持する秒数)

```
$ git config --global credential.helper "cache --timeout=86400"
```

###リポジトリの作成(2種類)

```
$ git init
$ git init [ディレクトリ名]
```
###プロジェクトの全ファイルをリポジトリに追加

```
$ git add -A
```

###ステージングの状態を知る。
　最初はステージングという一種の待機用リポジトリに置かれ、コミットを待つ。
　安全のため、いきなりコミットしないようになっている

```
git status
```

###ステージングエリアで控えている変更を本格的にリポジトリに反映
　-mはコマンドラインでコミットメッセージを直接指定するもの

```
$ git commit -m "Initialize repository"
```
　その後GithubのURLへ行き、新しくリポジトリ作成
　``privateにチェック``を忘れない


###コミットメッセージ履歴を確認

```
$ git log
```

###作業ツリー内で何かミスって、以前のコミットに戻す（コミットしてない場合）

```
$ git checkout -f
```
###GitHubをリモートoriginに追加してそのリポジトリにpush

```
$ git remote add origin https://github.com/GitHubアカウント名/プロジェクト名
$ git push -u origin master
```
-uは初めてプッシュする時に使用。二回目以降は
`git push`でOK 
###master(親)ブランチからトピックブランチ（短期間だけ使う一時的なブランチ）を作成


```
$ git checkout -b 作成したいブランチ名
```
###ローカルブランチを一覧表示

```
$ git branch
```
###変更が終わったら、ブランチの状態を確認

```
$ git status
```

###現存するすべてのファイル（git mvで作成したファイルも含む）への変更を一括でコミット
　コミットメッセージは現在形かつ命令形で書くこと

```
$ git commit -a -m "コミットメッセージ"
```
###ファイルの変更が終わったら、masterブランチに変更をマージ

```
$ git checkout master
$ git merge ブランチ名
```
###ローカルブランチ削除
**・**変更をマージした後の場合(任意)
**・**変更をマージしていない場合

```
$ git branch -d ブランチ名
$ git branch -D ブランチ名
```

###本番用以外のgemをインストールする
Gemの変更をGemfile.lockに反映させる

```
bundle install --without production
```

###変更内容をコミット

```
git commit -a -m "Update Gemfile for Heroku"
```

###herokuインストール＆バージョン確認
```
brew tap heroku/brew && brew install heroku
heroku --version
```

###herokuコマンドでブラウザを開かないように設定
```
heroku login --interactive
```

###Herokuに新しいアプリケーションを作成
```
heroku create
```
###Herokuにデプロイ
```
git push heroku master
(master省略可能)
```


###Herokuコマンド一覧
```
heroku help
```


#終わりに
今回はRailsチュートリアル第１章でgitについて作業した内容を書きました。
[Laravel] 現在日付から30日以内に登録されたレコードを取得する

#概要
現在日付から30日以内に登録されたレコードを取得した方法をメモします。

#実装
現在の日付からDBに登録した日付(created_at)が現在日付 - 30日の日付よりも後になるレコードを取得します。

```.php
$posts = Post::orderBy('created_at','desc')
            ->whereRaw( "created_at >= DATE_SUB( CURDATE(),INTERVAL 30 DAY )" )
            ->get(); 
```

#まとめ
whereRawで生のSQLで実装しなくても取得できるかもしれません。
C#でデバッグしながらコーディングする時に行番号取得する方法

デバッグ処理する際にどこのコードまで処理ができているのかを確認するために調べた結果を自分的メモ



```c#:デバッグした行数を取得

using System;
using System.Runtime.CompilerServices;

namespace testCodeCheck
{

    class Program
    {
        static void Main(string[] args)
        {
            //TraceクラスのWriteLineメソッドを利用
            Trace.WriteLine("OK");

        }
    }

    public static class Trace
    {
        public static void WriteLine(string message,[CallerLineNumber] int line = 0)
        {
            Console.WriteLine($"{line}行目 - {message}");
        }
    }
}

```

[参照サイト]
https://blog.okazuki.jp/entry/20120301/1330624028
LibreELECで電源ON時に外付けメディアを自動再生

仕事柄、RaspberryPiをメディアプレーヤーとして使用する機会が多いのですが、ふと自動起動した際にUSBメモリを読んで自動再生させたいなと思ったので、メモです。

## 起動時のスタートアップスクリプト
https://libreelec.wiki/configuration/startup-shutdown

autostart.shファイルを用意することで可能です。

```sh:/storage/.config/autostart.sh
$ nano /storage/.config/autostart.sh
```

ここにシェルスクリプトを書いていきます。

```sh:/storage/.config/autostart.sh
#!/bin/sh

(
# 起動を待つ
sleep 20

MEDIA=`ls /media/ | cut -d" " -f1`

if [ "" = $MEDIA ]; then

  echo "no such media."

else

  TYPE=`cat /media/${MEDIA}/type.txt`
  
  if [ "video" = $TYPE ]; then
  
    echo "play ${TYPE}"

    kodi-send --action="XBMC.PlayMedia(/media/${MEDIA}/)"
    kodi-send --action="XBMC.PlayerControl(repeatall)"
    kodi-send --action="Action(Fullscreen)"

  elif [ "image" = $TYPE ]; then
    
    echo "play ${TYPE}"

    kodi-send --action="SlideShow(/media/${MEDIA}/)"           
  
  fi

fi
)&
```

## 解説

このスクリプトは起動処理をブロックするため、全体を()で囲み、最後に&をつけることでバックグラウンドプロセス化しています。

まずは、20秒間、LibreELECが起動するのを待ちます。

```sh
sleep 20
```

`ls /media`でディレクトリを一覧し、pipeでつなぎ、cutでスペース区切りを配列に変換したのちに、配列の頭の値を取得することでパスを取得します。

```
MEDIA=`ls /media/ | cut -d" " -f1`
```

動画と静止画、それぞれニーズがあるので、type.txtをUSBメモリに配置してそのファイルの中身を確認します。

```
TYPE=`cat /media/${MEDIA}/type.txt`
```

ファイルの中身がvideoなら、動画を再生
ファイルの中身がimageなら、静止画をスライドショー

あとはシンプルなシェルスクリプトです。

## kodi-send

LibreELECやOSMC等のKodiプラットフォームでは`kodi-send`というコマンドを使用してコントロールできます。

https://kodi.wiki/view/List_of_built-in_functions

### 動画再生

`/media/${MEDIA}/`ディレクトリにあるメディアファイルを再生します。

```bash
$ kodi-send --action="XBMC.PlayMedia(/media/${MEDIA}/)"
```

すべてをリピート再生します。

```bash
$ kodi-send --action="XBMC.PlayerControl(repeatall)"
```

動画再生をフルスクリーンにします。

```bash
$ kodi-send --action="Action(Fullscreen)"
```

## 静止画スライドショウ

```bash
$ kodi-send --action="SlideShow(/media/${MEDIA}/)"
```

## autoexec.py
autoexec.pyを使って、pythonで起動スクリプトを書くこともできるそうです。
https://kodi.wiki/view/Autoexec_Service

## リンク
[LibreELEC Startup & Shutdown](https://libreelec.wiki/configuration/startup-shutdown)
[ソースコード(GIST)](https://gist.github.com/funamen/12fe91e8283da502c9e79bc644597a55)
Vue.js始めてみました③(v-model)

この度Vue.jsを学び始めました。
その勉強内容をまとめます。


## v-model

v-modelでユーザーがフォームに入力したデータを即Vueインスタンスのデータに反映させることができます。
つまりフォーム入力とデータをつなげる時にはv-modelを使います。


以下が基本的な書き方です。

```JavaScript:Vue.js

<タグ v-model="プロパティ"></タグ>

```

## 使い方

使い方の例を以下に記載します。

```JavaScript:Vue.js

//入力したデータを表示させる

<div id="app">
  <input v-model="name">
  <p>私の名前は{{ name }}です</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      name:''
    }
  })
</script>
````

上記では`el`で｀どのHTMLとつなげるか`を指定していて、
`data`に入力されたデータが入るようにしています。
HTMLで`{{ name }}`とすることでそこに入力したデータが即反映される仕組みです。


以下のようにするとtextareaの文字を取得して、さらに文字数も取得できます。

```JavaScript:Vue.js

//入力した文章と文字数を表示させる

<div id="app">
  <textarea v-model="text"></textarea>
  <p>文章：{{ text }}</p>
  <p>文字数：{{ text.length }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      text:''
    }
  })
</script>
```

以上です。
Nuxt.js + @vue/apollo-composableで【ReferenceError: define is not defined】

![スクリーンショット 2021-03-10 16.49.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/3b9ead96-42ca-826e-a7f8-7824db76f04a.png)
***
Nuxt.js(composition-api)に@vue/apollo-composableを導入した際に上記エラーに見舞われました。

**〜使用モジュール〜**

```javascript
"dependencies": {
    "@nuxtjs/apollo": "^4.0.1-rc.5",
    "@nuxtjs/composition-api": "^0.22.0",
    "@vue/apollo-composable": "^4.0.0-alpha.12",
    "apollo-boost": "^0.4.9",
    "apollo-client": "^2.6.10",
    "core-js": "^3.6.5",
    "graphql-tag": "^2.11.0",
    "nuxt": "^2.14.6"
  },
```

#解決策

[issue](https://github.com/vuejs/vue-apollo/issues/1081#issuecomment-772562609)に解決策が書かれていました。




###① nuxt.config.jsのbuildにトランスパイルを追加する。


```javascript:nuxt.config.js
build: {
    transpile: ['@vue/apollo-composable'],
   }
```

###② importを`@vue/apollo-composable/dist`に変更
```diff
- import { // } from '@vue/apollo-composable'
+ import { // } from '@vue/apollo-composable/dist'
```

***

これで解決しました。

ちなみに、@vue/apollo-composable-v4.0.0-alpha.12を使用していて、
v4.0.0-alpha.10にダウングレードで回避できるとありましたが、自分の場合はそれでも駄目でした。

##後でわかったこと
SSRモードで無く、SPAモードならそもそもエラーが出ませんでした。
（なぜかはよくわかりません・・・）