OmniAICreator/Qiita-1.07M huggingface dataset:
【備忘録】【Wordpress】wp_enqueue_style()は特定の第一引数を渡すと予想外の挙動を引き起こす

タイトルの通り。これで2時間ぐらい無駄にしたので書き残しておく。
テーマを読み込むとき、```wp_enqueue_style()```を使うが、

```functions.php
wp_enqueue_style(
  'about', 
  get_theme_file_uri("/css/about.css"),
  array(),
  false,
  'all'
);
```

これをやると通常
```wp-content/themes/(テーマ名)/css/about.css```
を参照するはずが、
```wp-admin/css/about.min.css```
からcssを取ってくる。
このファイルは別に自分で生成したわけではなく、Wordpressをインストールした時点で入っている。

この問題は第一引数を```"bio"```に変えたら(自分は念のためaboutを含むファイル名から何から全部変えたが)解決した。
多分"about"は既に定義されているのだと思う。他にも"content"などの文字列を渡すと同様の問題が起こるらしい。

ちなみに```wp_enqueue_script()```で同様の問題が発生するかは特に検証していないが、問題の性質からするとあり得ると思う。

とりあえず名前だけ変えてみることをおすすめします。
既存のアプリケーションに必要なデータを追加するプログラムを考えてみる

#概要
メインとなるプログラムに必要なデータを後から追加する必要があるとき、ユーザー自ら当該のデータフォルダにコピーすることは、ユーザーにとって少々煩わしいかもしれません。そこで、データを追加するためのプログラムを考えてみました。

#準備する物
追加するデータ
![01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2307195/4b7f09eb-c438-cbaf-1d35-244b4f96f220.jpeg)
※画像は一部加工しています。
今回は、画像と音声ファイルを追加することにします。

#作り方
####１　ウィンドウに必要な部品を配置する
最低限必要な部品は「テキスト」（又はラベルでも可）×１、「ボタン」×２または３です。お好みのサイズや配置でどうぞ。
![02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2307195/9ad090fc-c27a-9331-4cf5-4ebd8bc73194.jpeg)

####２　追加するデータを素材として利用する
プログラムの頭に追加するデータを素材として追加します。追加したいデータをすべて「素材として利用する」文で指定します。

```
「photo.jpg」を素材として利用する
「sound.wav」を素材として利用する
```

####３　追加先を選択できるようにする
今度は追加する先を選べるようにします。「参照ボタン」を押すことで追加するexe形式（アプリケーション）ファイルを選択します。


```
参照がクリックされた時の手順
	開く画面のフィルタを、「プログラム本体|*.exe|すべてのファイル|*.*」に変える
	開く画面を表示する
	もし開く画面のキャンセルなら、終了する
	ファイル名は、開く画面のファイル名
	ファイル名テキストの内容を［ファイル名］に変える
終わり
```

####４　素材を追加先へコピーする
２で指定した素材（つまり、追加したいデータ）を３で指定したプログラム（つまり、追加先）へコピーします。この時、追加先として指定するのは３で指定したプログラムを動作させるために必要なフォルダで、３で指定したプログラムとおなじディレクトリ以下にあるフォルダにしています。（下記の例では、「systemfile」というフォルダがあるということにしています。いろいろ指定はできますが、最もありえそうな環境にしてみました。）また、追加先のフォルダが見当たらない場合やすでに同じ名前のファイルがある場合はエラーを表示し追加をキャンセルします。

```
追加がクリックされた時の手順
		作成先フォルダは、「［ファイル名のフォルダだけ］systemfile」
		もし作成先フォルダというフォルダが存在するなら
			もし　「［作成先フォルダ］\photo.jpg」というファイルが存在するなら
　				「photo.jpgはすでに登録されています。」を警告アイコンで表示する
			でなければ
				素材リストから「photo.jpg」を「［作成先フォルダ］\photo.jpg」へ保存する
				「追加が完了しました。」を情報アイコンで表示する
				閉じる
			もし終わり
			もし　「［作成先フォルダ］\sound.wav」というファイルが存在するなら
　				「sound.wavはすでに登録されています。」を警告アイコンで表示する
			でなければ
				素材リストから「sound.wav」を「［作成先フォルダ］\photo.jpg」へ保存する
				「追加が完了しました。」を情報アイコンで表示する
				閉じる
			もし終わり
		でなければ
	　　			「追加に失敗しました。［改行］●考えられる原因●［改行］・プログラム本体の選択を間違っている。［改行］・プログラム本体のあるフォルダやデータが移動されているか破損している。」を警告アイコンで表示する
		もし終わり
	終わり

```
:::note
同一のファイルがあるときに、名前を自動的に変更して登録したいときなどは適宜「もし」を追加してみてください。
:::

#最後に
今どきネットワークから直接ダウンロードして追加すればいいじゃないかという声が聞こえてきそうですが、インターネット環境にないＰＣへデータを追加するときなどに使えるかもしれません。

#余談
はじめてプログラミングというのに触れたのは中学生の時でした。その当時はコンピュータを扱う科目がなく、プログラミングのことは数学の教科書の最後のほうに書いてあるだけだったように思います。（たしかCOBOLという言語だったような記憶があります。）めっぽう数学が苦手だった私は、「プログラム＝数学」なんだと勝手に決めつけている部分がありました。そこで出会ったのが「TTSneo」という日本語プログラミング言語でした。そしてその後継である「プロデル」も触れることになったわけです。社会人になった今でもこうしてプログラムに触れていられるのは、母語である日本語でプログラムができるからということも言えると私自身感じています。つたない文章でしたが、最後までお読みいただきましてありがとうございました。
驚異のFANZA女優検索のナビゲーションバーのこだわり

この記事は [驚異のFANZA女優検索](https://fanza-actress-bust-search.azurewebsites.net/) Advent Calendar 2021 の 12 日目の記事です。

# ナビゲーションバー
このサービスを作るにあたって、本当に何度も何度も作り直した場所の一つ。それがナビゲーションバー。一番最初はタイトルと検索用のテキストボックスが置いてあるだけだったが、色々発展させていった。

#左上のリンク文字を青くするか
最初に悩んだのは左上のタイトルの文字を青くするかどうか。左上のタイトルをクリックするとTOPページに行くというUXは一般的だと思う。標準のリンク色は青。でも左上のタイトルはリンクでも青色ではないケースも多いと思う。画像で作っているから？。ではタイトルが文字の場合は？もしかしたら文字でもあえて黒くしているかもしれないが実際はよく分からない。ただ自分で思い直してみると、昔、昔ここが黒い時TOPページへのリンクだと気づいていない時代は確かにあった。もし文字が青かったらもっと早く気づいた可能性はある。青色にしているデメリットも特に思いつかなかったので、現状は青色にしている。明示的な理由があれば後から変える可能性はある。

#ファビコン
驚異のFANZA女優検索のファビコンはこのサービスで唯一自分自身が作ったものでなく、友人に頼んで作ってもらったものだ。このファビコンはとても気に入っており、このサイズ以外で使うと価値が下がると言われているのでこのサイズ以外で出すつもりはなかった。大体左上のタイトルには画像があるので、ここに何を出すかも悩んだが、ファビコンをそのままのサイズで置いてみたら良い感じだったので、そのまま置くことにした。試しに拡大して置いたこともあるが、やっぱり原寸が一番映えると思った。

#テキストボックスにはplaceholderで設定する
検索用のテキストボックスの値はデフォルトで100+を入れていた。これはそもそもこのサービスは100cm以上の女優を検索したくて作ったからだ。因みに100という数字で検索すると100cmのみ、100+で検索するとは**100cm以上**の女優がヒットする。自分的に以上があった方が便利だと感じて、なるべく入力が楽な方法で実装したかったので+を以上を表す記号とした。ただ、デフォルトで検索テキストボックスにいきなり何か入っているのはあまり好ましいとはいえない。初めて見たユーザーはこのテキストボックスは何だ？となってしまう。初見ユーザーに最も分かりやすいのはスタンダードな実装だ。やっぱりテキストボックスには薄い文字で説明が書いてある方が望ましい。そこで何も書いていない時は内部的に100+で検索するようにして、テキストボックスにはplaceholderを表示するようにした。

#サイズ入力は面倒
検索用のテキストボックスを自分で使ってみて、わりとよく検索したのが、100の次は101、その次は102のようにサイズを1つずつ変えての検索だった。ただやりたいことであっても実際にやってみるとこれが意外に面倒くさい。自分でも明確には気づいていなかったが、テキストボックスへのキーボード入力というのは手間なのだ。テキスト入力はやらずに済むなら極力やらなくてすむUXの方が親切だと感じた。と言うわけで、インクリメントボタンとデクリメントボタンを作ることにした。試しに作ってみたら思っていた以上に便利で、自分での検索はもうこのボタン以外ではやらないぐらいに気にいってしまった。そこで色んなボタンを用意した。最初は100なら99,101,100+,F,F+との5種類のボタンを作って、テキストボックスの右側に置いた。

#ボタンを使ってもらうハードルは高い
このボタン自体は非常に便利で気に入ったが表現に悩んだ。というのも、このボタンが何なのかが初見では分かりづらいからだ。検索の横にボタンがあるのがスタンダートとは言えない。その時点でどんな便利なものであっても、気づかない人は必ず一定数いる。どういう表現にしたら使ってもらえるのか。最初は検索テキストボックスと全く同じUIのボタンにした。つまりボタンを押すことで、中身の数字がそのまま検索テキストボックスに入るという表現にしたかった。ただ、初見の人に見てもらったが、このボタンがインクリメントを表しているボタンだとは思わないと言われた。むしろ検索テキストボックスが複数あると勘違いしてしまってさわらない可能性すらあると言われた。確かに同じレイアウトのものが並んでいたら別の機能とは考えないかもと思った。初見の人にさわってもらって意見を聞くのは本当に大事だと痛感した。

#分かりやすいレイアウトを暗中模索
その後もボタンの表現を何度も何度も変えた。説明の先頭にアップ、ダウンを表現するアイコンを置いた。文字でも説明を入れた。ただ文字を入れるとレイアウトとしてベストな位置指定が難しくドット単位で何度も修正した。例えば文章として一番正しいのはインクリメントボタンだと思うが、これだと通じないので++ボタンとしてみたりもした。個人的には++ボタンが一番気に入りはしたが、一般的ではないのでUPボタンともしてみた。ただUPとDOWNだと2文字4文字だけど、アップとダウンだと3文字3文字なのでバランスが良いと思った。あとタグでsmallを付けた感じだと見た目もレイアウトも少し変わるので、それでまた微調整したりした。テキスト入力とボタンの間隔も、以上ボタンの間隔も本当に何度も調整をしている。サイズの文字は青くした方がリンクと思ってマウスを合わせてくれる可能性が上がると思って青くした。今の形がベストなのかはまだ分からない。

#？ボタン
ここまでやってもまだ意味が分からない人もいると思った。こういう時はヘルプ機能があると良いが、それを最も効果的にやっているレイアウトが個人的にはJenkinsだと思っていた。あまりJenkinsのここにフィーチャーしている人は少ないかもしれないが、Jenkinsを使った時に？ボタンが色んな所に配置されていてこれがとても助けになった。自分でサービスを作る時は常々是非採用したいと思っていたので今回目立たない程度に？ボタンを置いてクリックしたら説明が出るようにした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1886572/d95a5107-eb4f-0c05-a78c-ccacb8ea329b.png)

#まとめ
テキストボックスへのキーボード入力は面倒という気づきは大きかった。例えばユーザー登録で名前などキーボード入力しないとどうしょうもない所はともかく、そうでないところはテキスト入力をマウスで代用できる方法は作っておいた方が親切だと思う。但し、それは一般的なレイアウトとは言えないので説明文や表示、ヘルプ機能などでカバー出来るとなお良いともう。そう思ってサイズやカップもコンボボックスからも選択できるようにした。もちろんここまでやってもテキストからしか入力しないユーザーもいると思う。でも、自分的には初見でも何となく使ってもらえる可能性は上がったレイアウトになったかと思っている。何か意見があれば是非聞かせて欲しい。
reactで簡単に管理画面が作れる「react-admin」

昨日は@Tyanri_の[viewer-modelでWebARやってみる](https://qiita.com/Tyanri_/items/39eb7ce51a7a275bad07)でした。
WebサイトでARを使うことができるってすごいですね！

[MYJLabアドベントカレンダー](https://qiita.com/advent-calendar/2020/myjlab)12日目の記事です。
今回はreactで簡単に管理画面が作れる「[react-admin](https://marmelab.com/react-admin/Tutorial.html)」について紹介します。

# react-adminとは

REST API から取得したデータを表示するテーブルやダッシュボードを数行のコードの記述で実装できるreactのライブラリです。認証やソート機能、検索機能、CSV エクスポート機能、データ編集、追加、削除など、管理画面にほしい機能を備えています。



# やること
今回は簡単なCRUD機能が備わった管理画面を作成します。
![react-admin .gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2291895/fd695c38-3b24-ba89-5840-13d918d6e786.gif)




本来はデータベースを用意しますが、管理画面に表示するデータはすでに用意されている[JSONPlaceholder](https://jsonplaceholder.typicode.com/)を利用します。

実際に利用するサンプルデータはターミナルで以下のように叩いてみると確認できます。

```
curl https://jsonplaceholder.typicode.com/users
```

# Getting Started

まずは create react-appで reactアプリを作成しましょう。
その次に必要なライブラリを追加し、起動してみます。

```
yarn create react-app test-admin
cd test-admin/
yarn add react-admin ra-data-json-server
yarn start
```


次にApp.jsを以下のように書き換えましょう。


```
import * as React from "react";
import { Admin, Resource } from 'react-admin';
import { PostList, PostEdit, PostCreate } from './post';
import jsonServerProvider from 'ra-data-json-server';

import PostIcon from '@material-ui/icons/Book';

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');

const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} icon={PostIcon} />
  </Admin>
);

export default App;
```

最後にsrcフォルダの中にpost.jsを作成し以下のように書き換えてください。
これで再起動してみると上の動画のようなCRUD機能が実装された管理画面が作成できているのが確認できると思います。

```
import * as React from "react";
import {
    List,
    Datagrid,
    TextField,
    EditButton,
    Edit,
    Create,
    SimpleForm,
    TextInput,
} from 'react-admin';


export const PostList = props => (
    <List {...props}>
        <Datagrid>
           <TextField source="id" />
            <TextField source="title" />
            <EditButton />
        </Datagrid>
    </List>
);

export const PostEdit = props => (
    <Edit {...props}>
        <SimpleForm>
            <TextInput disabled source="id" />
            <TextInput multiline source="title" />
            <TextInput multiline source="body" />
        </SimpleForm>
    </Edit>
);

export const PostCreate = props => (
   <Create {...props}>
     <SimpleForm>
        <TextInput multiline source="title" /> 
        <TextInput multiline source="body" />   
    </SimpleForm>
    </Create>
);
```

#さいごに

いかがだったでしょうか。
驚くほど簡単にCRUD機能が備わった管理画面を作成できたと思います。
他にもreact-adminには便利なコンポーネントが用意されているので、検索機能や並び替えなど容易に実装することができます。

ライブラリを利用するのでバグが少なく、自分はコアなフロント機能の実装に集中できることが魅力的です。

気になった人はぜひ[react-adminのチュートリアル](https://marmelab.com/react-admin/Tutorial.html)を試してみてください。

ありがとうございました！
【AWS】EC2のまとめ

# はじめに

こんにちは。
この記事は[GFAMアドベントカレンダー2021](https://qiita.com/advent-calendar/2021/gfam)の3日目の記事です。
EC2についてまとめてみました。

# EC2の概要

EC2とはElastic Compute Cloudの略です。AWSの仮想サーバサービスです。このサービスを利用して、アプリケーションが動作するコンピューティング環境を必要なスペックで自在に作成することができます。利用料金は、起動した時間分（従量課金）＋データ転送料＋EBS利用料になります。

# EC2インスタンスの構築について

## Step1. AMI (Amazonマシンイメージ）の選択

AMIは、Amazon Machine Imageの略です。インスタンスの作成に必要なソフトウェア構成 (OSなど) を含むテンプレートのことです。AWSが提供するAMI、ベンダーが提供するAMI、または独自のAMIを選択できます。

無料利用枠で使えるものは以下です。(2021年12月調べ）

* Amazon Linux 2 - Kernel 5.10
* Amazon Linux 2 - Kernel 4.14
* Red Hat Enterprise Linux 8
* SUSE Linux Enterprise Server 15 SP2
* SUSE Linux Enterprise Server 12 SP5
* Ubuntu Server 20.04 LTS
* Ubuntu Server 18.04 LTS
* Ubuntu Server 16.04 LTS
* Debian 10
* Microsoft Windows Server 2019 Base
* Microsoft Windows Server 2019 Base with Containers
* Microsoft Windows Server 2022 Base
* Microsoft Windows Server 2022 Base with Containers
* Microsoft Windows Server 2016 Base
* Microsoft Windows Server 2016 Base with Containers
* Microsoft Windows Server 2012 R2 Base

私は、Amazon Linux 2の最新を選択することが多いです。

## Step2. インスタンスタイプの選択

インスタンスタイプは、CPU、メモリ、ストレージ、ネットワークキャパシティの組み合わせで選択します。使用するアプリケーションに合わせて適切なインスタンスタイプを選択します。

無料利用枠である t2.micro を選択した場合、名前の意味は以下の通りです。

* t: インスタンスファミリー
* 2: インスタンス世代
* micro: インスタンスサイズ

私はt2.microを選択することが多いですが、目的に合わせて変えています。
各パーツのまとめは以下の通りです。

### インスタンスファミリー

| ファミリー | 用途 |
|:-----------|:------------|
| t系 | 汎用、テスト向き (バーストが特徴） |
| m系、a系 | 汎用 |
| c系 | コンピューティング最適化 |
| i系、h系、d系 | ストレージ最適化 |
| x系、t系 | メモリ最適化 |
| f系、p系、g系 | 高速コンピューティング (GPU・FPGA) |

### インスタンス世代

数字が大きいものが新しく、世代が新しい方が高性能でコスパが良いです。
できる限り新しいものを使うことを推奨されています。

### インスタンスサイズ

CPU、メモリ、ネットワークキャパシティの組み合わせです。

## Step3. インスタンスの設定

要件に合わせてインスタンスの詳細を設定します。
私が特に設定している箇所は以下です (参考まで）

| 項目 | 設定内容 |
|:-----------|:------------|
| ネットワーク| VPCを設定 |
| サブネット | EC2を配置するサブネットを設定 |
| 自動割り当てパブリックIP | EC2をパブリックサブネットに配置するときは有効にしている |
| 終了保護の有効化 | うっかり消したくない時にチェックを入れます |

## Step4. ストレージの追加

ストレージを追加します。EBSやインスタンスストアを選択します。
私がよく利用しているのが汎用SSD (gp2) になります。

| タイプ | 用途 |
|:-----------|:------------|
| 汎用SSD (gp2) | テスト用 |
| プロビジョンドIOPS SSD (io2) | 高速に使いたい時用 |

## Step5. タグの追加

インスタンスやEBSに対してタグを付与します。名札のようなもので、運用やコスト管理で便利に利用することができます。

## Step6. セキュリティグループの設定

インスタンスにアタッチするファイアウォール機能を作成および設定します。
セキュリティグループについては、[【AWS】セキュリティグループ、ネットワークACLのまとめ](https://qiita.com/gackky/items/86ad3b4ce77850d21e49)でまとめました。

## Step7. キーペアの設定

公開鍵認証のための公開鍵と秘密鍵のペアを作成します。
作成した公開鍵はAWSで管理され、秘密鍵は利用者が管理します。

# おわりに

今回はEC2をまとめました。
EC2は奥が深く、そしていろいろなところで活躍してくれそうです。しっかりと学んでいきたいです。
次回はIAMについて学習します。

# 参考

* [BlackBelt](https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-service-cut/)
コンテナについて

コンテナとは
- 

- 仮想化技術の１つ。またはコンテナエンジン上で稼働する、抽象化された機能グループの単位。
    - 仮想化には「ハイパーバイザ型」と「コンテナ型」があり、抽象化される範囲が異なる。
    - ハイパーバイザ型は、ホストOSにハイパーバイザを稼働させ、その上で仮想マシンを稼働させる。ハードウェア(CPU/メモリ等)は仮想マシン間で共有され、それより上のOSやアプリケーション等は仮想マシン毎に管理する。VMwareやHyper-V、Virtual BoxやKVM等。
    - コンテナ型は、OS上でコンテナエンジンを稼働させ、その上で"コンテナ"を稼働させる。OSのカーネルはコンテナ間で共有され、それより上のアプリケーション等はコンテナ毎に管理する。DockerやLinux Containers(LXC)等。

ハイパーバイザ型仮想化とコンテナ型仮想化の抽象化(=各単位で共有する)の範囲の違いは、以下画像を参照
※画像は『注目を浴びる「Dockerコンテナ」、従来の仮想化と何が違うのか？』より
https://cn.teldevice.co.jp/column/10509/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318908/6965ae20-56d1-279d-6bc4-f5738426380f.png)

コンテナ実行プラットフォーム
-

様々あります。

- オープンソース系：Docker、Kubernetes等
- 有償ソフト系：Redhat Openshift、VMware Tanzu等
- マネージドサービス系：パブリッククラウドのネイティブサービス等
    - AWS：
        - AWS Fargate(コンテナ実行・オーケストレーション)
        - Amazon ECS(コンテナレジストリ)
        - Amazon EKS(マネージドKubernetesサービス)等
    - Azure：
        - Azure Container Instances(コンテナ実行・オーケストレーション)
        - Azure Container Registry(コンテナレジストリ)
        - Azure Kubernetes Service(マネージドKubernetesサービス)等
    - GCP：
        - Cloud Run(コンテナ実行・オーケストレーション)
        - Container Registry(レジストリ)
        - Google Kubernetes Engine（GKE）(マネージドKubernetesサービス)等

コンテナの利用に伴うビジネスインパクト
- 

私見から記載してみます。

- 開発サイクルの短縮。
    - 可搬性が高いです。コンテナイメージを配布することで、簡単に環境構築ができます。従来のシステム開発では、テスト実施するための環境コピーにものすごい時間と手間をかけるのが一般的でした。(AnsibleやChefで構築自動化する必要もなし)
- 工数削減。
    - 関連オーケストレーションツールを利用することで、可用性を簡単に実現できます。
    - コンテナにはOSカーネルは含まれないため、OSのパッチ適用やメンテナンス工数を削減できます。
GitLabをポッドキャスト運営に使ってみた

# はじめに
2019年からはじめたPodcast「jamming.fm」ですが、つい数ヶ月前からGitLabで運用し始めました。私自身まったくGitLabを使ったことなかったので、現時点での使い方について簡単にメモを残しておきます。

#jamming.fmとは
30代半ばのサラリーマンふたり(naoharuとdada)が日々の気づきから既存の価値観を疑ってみるをテーマにスタートしたポッドキャストで、自分たちが直面した仕事の悩みやプライベート、育児の話などをトピック扱ってほぼ週１で配信しています。

https://jamming.fm/

- naoharu: https://twitter.com/naoharu
- dada: https://twitter.com/dada_ism


# GitLabで何をしているの？
ではそのポッドキャストを配信する過程においてどうやってGitLabを使っているかを一部紹介します。
jamming.fm運営で使用しているGitLabプロジェクトは全世界に公開されていますのでそちらも参考にしてください。
[https://gitlab.com/jammingfm/jamming.fm](https://gitlab.com/jammingfm/jamming.fm)  


## Podcast配信の全体の流れ
私達のポッドキャスト収録ワークフローは次のようになっています。また利用しているサービス、ツールも記載しています。

1. 話したい内容を出す（Trello）  
1. 収録する（Zoom）  
1. 音声を編集する（Audacity）
1. ポッドキャストのホスティングサービスに音声ファイルアップロードする（Anchor）
1. Webサイトの記事を作成する（GitLab,Gitpod）
1. 記事をリリースする（GitLab）

GitLabをメインで使用しているのは５と6ですが、正確には「2.収録する」以降で使用しています。


## リリース作業をトラッキングするためにGitLabを使っている
収録後は予め決めたその回のリリースの担当が、GitLabのIsueeを作成します。リリース完了まではこのIssueでトラッキングしていきます。

![スクリーンショット 2021-11-27 10.55.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208359/69312667-2f6a-f801-c87b-9e521523583c.png)

## サイトの記事を作成するためにGitLabを使っている
jamming.fmのWebサイトのホスティング環境はNetlifyとGatsbyで構成されています。
記事の作成は先程作成したIssueからMergeRequestを作ることで個別のブランチを切ります。MergeRequest作成ボタンを押して、devブランチから今回はep111リリース用のブランチを作成しています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208359/102c9fd6-d711-f43b-adea-dce9513127a0.png" width="60%">
このブランチ内に今回のエピソードの記事やタイトル画像などのアセットを追加していきます。またポッドキャストホスティングサービスのembedタグを入れてサイトから再生ができるようにします。


## 開発環境(IDE)はGitpodを使っている
作成したブランチでの開発はローカルの開発環境でもいいのですが、最近クラウドIDEのGitpodがとても便利だったのでそれを使っています。月に５０時間まで無料で使えるので、ちょっとだけ使いたいという私の用途にはピッタリでした。

https://gitpod.io/

リポジトリの対象ブランチを開いた画面や、MergeRequestの画面（下図）から、Gitpodのボタンを押すことですぐに開発環境が立ち上がりコーディングすることができます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208359/820035cf-6b16-8ac3-9b72-092e4ff28e68.png" width="700">


実際の画面はこんなかんじです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208359/6c331d03-dfd5-9612-5f41-016a2d96862c.png" width="1000">

## 自動的に記事をデプロイするためにGitLabを使っている
リリースする記事の準備ができたら、MergeRequestに戻り、devブランチへマージします。
その後devブランチからmainブランチにマージ（本番リリース）するために、新たにMergeRequestを作成し、ここれでNetlify側でBuildとDeployが動き、記事のリリースが完了します。これでめでたくリリース作業が完了します。  

![スクリーンショット 2021-11-27 11.43.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208359/5cdb00d9-e9d6-9315-c415-13423930edbe.png)

# その他
##Slackとの連携
jamming.fmの運営に関するやりとりは基本的にSlack上で行っています。
GitLab側でのIssueへのコメントでのやりとりもあるので、両方を常にチェックするととても手間になりますし見落としもあります。なのでGitLab側の更新があった場合はすべてSlackの専用チャンネルに投稿されるように連携しています。これですべてSlackだけ確認していれば必要なタイミングでGitLabにアクセスすることができるようになりました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208359/6a769d1a-f1ab-b739-9f84-31b0167c2fec.png" width="800">
【Rails】sortメソッドについて【初学者の疑問点を簡潔に解説】

## はじめに
　本記事は、プログラミングの学習を始めて1ヶ月の初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

## 今回の疑問点
　今回の疑問点は、

　　_sortメソッドについて_
　
　です。　

 　以前、いいね数の多い順に投稿を表示させる機能を実装している際に上記について疑問を持ちました。

## 疑問点についての解説

###結論
　sortメソッドは、配列やハッシュの中身を並び替えることができるメソッド。

###sortメソッドの使い方
記述方法は以下の通りです。
####昇順

```sample.rb
   ary1 = [9, 7, 10, 11, 8,14,1]
   p ary1.sort 
   #=> [1,7,8,9,10,11,14]
```

ハッシュに対してsortメソッドを使うとバリュー（値）ではなく、キーが昇順でソートされます。
また、戻り値はハッシュではなく、二次元配列（配列の中に要素として配列が格納された形）となります。
戻り値をハッシュにしたい場合には下の記述にto_hメソッドを追記する必要があります。

```sample.rb
   h = { "jkl" => 2, "xyz" => 1, "abc" => 3 }
   p h.sort
   #=> [["abc", 3], ["jkl", 2], ["xyz", 1]]
```

ハッシュのバリュー（値）に対して昇順でソートする場合は以下のように記述します。

```sample.rb
   h = { "jkl" => 2, "xyz" => 1, "abc" => 3 }
   p h.sort_by{ | key, value | value }
   #=> [["xyz", 1], ["jkl", 2], ["abc", 3]]
```

上記以外にブロック構文を用いて昇順にするには以下の通りです。

```sample.rb
   ary1 = [9, 7, 10, 11, 8,14,1]
   p ary1.sort { |a, b| a <=> b }
   #=> [1,7,8,9,10,11,14]
```

####降順
昇順にreverseメソッドを追記することで降順にすることができます。

```sample.rb
   ary1 = [9, 7, 10, 11, 8,14,1]
   p ary1.sort.reverse
   #=> [14,11,10,9,8,7,1]
```

ブロック構文を用いて降順にするには以下の通りです。

```sample.rb
   ary1 = [9, 7, 10, 11, 8,14,1]
   p ary1.sort { |a, b| b <=> a }
   #=> [14,11,10,9,8,7,1]
```
`a`と`b`を逆にします。



## まとめ
最後にポイントをまとめます。

- sortメソッドは、配列やハッシュの中身を並び替えることができるメソッドである
- sortメソッドは昇順。reverseメソッドを用いることで降順にすることができる
- ブロック構文を用いる場合には、宇宙船演算子（`<=>`）の左辺と右辺の値を入れ替えることで降順にできる
Excelの増殖した条件付き書式を統合する

## 条件付き書式の困りどころ
1. Excelで行・列をコピーペーストすると、新たな条件付き書式が定義される。(**増殖する**)
1. もともとあった条件付き書式の適用先が、貼り付けられた範囲のところで分断されて**汚くなる**
1. 汚いだけならいいが、**動作が重くなる**
1. ググると書式をまとめてくれるVBAが公開されているが、サンプルだったり、そもそもVBAなので読みにくかったりして心もとない

## 対処方法
Excelアドインを作った。VBAでなくVSTOで作ったのでコーディングしやすく、配布先でのインストールもexeで一発で嬉しい。
[GitHub standstonecraft/SscExcelAddIn: 自分の業務効率化のためのExcelアドインです。](https://github.com/standstonecraft/SscExcelAddIn)
RelaxToolsに実装済みかも知れないけど、もしそうだったら悲しいので確認してません。

```
注意：大量の書式がある場合、数秒～数十秒フリーズすると思われます
```

それと他にも正規表現置換、連番、図形文字列埋め込み・書き出し・検索、交互行選択、空行削除など、方眼紙いじりに便利な機能を自分用に追加していってます。使いたかったら自己責任でどうぞ。アンインストールは「設定＞アプリ＞アプリと機能」で「SscExcelAddIn」をアンインストール。
以下はVSTO開発時の備忘録。

## 実装のポイント

### 統合対象(同一書式)の判定
書式の文字列表現やIDがあるわけでもないので、ルールとか書式設定を全部比較して、**多分同じだろ**という判定を行う。
今回はどんなルール・書式設定でも対応できるように、 [FormatCondition object (Excel) | Microsoft Docs](https://docs.microsoft.com/en-us/office/vba/api/excel.formatcondition) に合わせてモデルとできる限り全部のプロパティを作成し、`IEquatable<T>`で等価性比較できるようにして`GroupBy`でグルーピングした。
しかし、プロパティの型がドキュメントから読み取れなかったりデバッグで型を見分けられなかったりした部分があるので、そのあたりで誤判定やクラッシュがあるかもしれない。(ルールの数式はちゃんと出来てるからよほど凝ったExcelじゃなきゃ平気でしょ)

### 数式ルールの相対化
数式は適用先の1セル目を起点とする相対参照で表現されるので、増殖して適用先が変わると同じ数式かどうかわからなくなる。
そこで、`Application.ConvertFormula()`関数を使ってR1C1形式に変換することで、適用先がどこになろうと同じ数式として等価性比較できるようにする。

```cs
formula1 = (string)Globals.ThisAddIn.Application.ConvertFormula(fc.Formula1,
                Excel.XlReferenceStyle.xlA1, Excel.XlReferenceStyle.xlR1C1,
                RelativeTo: fc.AppliesTo[1, 1]);
```

### 条件付き書式削除時のクラッシュ
統合して不要になった書式を`FormatCondition.Delete()`で消すのだが、`FormatConditions`から取り出したリストのループ中で削除すると無言でクラッシュする。
[Excel VBA hard crash on ModifyAppliesToRange with no error message - Stack Overflow](https://stackoverflow.com/questions/53699554/excel-vba-hard-crash-on-modifyappliestorange-with-no-error-message) を見つけて解決。`FormatConditions`を直接ループしている中で消すのであれば怒られても仕方ないが、これはバグだと言いたくなるのもわかる。

### プロパティ取得時のクラッシュ
COMオブジェクトの状態？実際の型？によって取得できないプロパティを触ろうとするとクラッシュする。
e.g. 書式の条件が「次の値の間」でないとき`Formula2`に触ると例外発生
…かといっていちいち`try`したくないのでこのような関数を作った。(他の値型、参照型も同様に作成)
[SscExcelAddIn/Funcs_OrDefault.cs at master · standstonecraft/SscExcelAddIn](https://github.com/standstonecraft/SscExcelAddIn/blob/master/SscExcelAddIn/Logic/Funcs_OrDefault.cs)

```cs
// in class Funcs
public static int? OrDefault<TO>(TO obj, Func<TO, int> f)
{
    try
    {
        return f.Invoke(obj);
    }
    catch
    {
        return null;
    }
}
```

使い方は

```cs
int? result = Funcs.OrDefault(theObj, e => e.IntPropOfTheObj);
```

取れなきゃnullって乱暴だしバグが埋もれそうだけど、楽になりすぎて濫用した。

## 既知の問題
条件付き書式には優先度(上からの並び順)があるが、マージすると思ったような優先度にならない場合がある。
意外と知られていないかもしれない？Autifyの機能や使い方をまとめてみました！


この記事は Autify アドベントカレンダー2021年11日目の記事です。

https://qiita.com/advent-calendar/2021/autify

こんにちは、Autifyのカスタマーサクセスチームでカスタマーサポートエンジニアをしている齋藤です。
今回はAutifyの意外と知られていないかもしれない機能や、この使い方を知っていると少しラクができるかもしれない、と言ったものをQ&A形式で紹介します！

#シナリオ作成時編
###追加レコーディングをした後、どこに新しいステップを追加したかわからなくなります。
追加レコーディング時に、前後のステップのステップ名やメモに⇨⇦などを入れておくと、レコーディング後に新しく追加したステップを確認することができます。
ぜひ追加した箇所がわからなくてお困りの方はご利用ください！
![スクリーンショット 2021-12-07 20.34.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2302378/d80824ee-295f-63a3-77e9-91fec0d79e36.png)

###再レコーディング時に対象の部分だけレコーディングしたいが、ログインステップがあってレコーディングが完了するまで待つのが面倒です。
ログインステップだけリプレイして、それ以降のステップは飛ばしても問題がない、という方には以下の方法がおすすめです！

1.追加したいステップの間で「ここにレコーディング」を選択
2.ローカルリプレイが開始したらログインが完了するまで見届け、その後リプレイを停止させ、レコーディングも一時停止状態にする
3.ステップとして追加したい操作をおこなう対象となる画面のURLを、直接ブラウザのURL欄に入力、画面遷移させる　
4.レコーディングを再開し、目的の操作をレコーディングする

※URL直接ブラウザのURL欄に入力した場合、Autifyではレコーディングされません。

ローカルリプレイは、必ずしも最後まで見届ける必要はないので、レコーディング作業をラクにする選択肢のうちのひとつとして、ぜひご利用ください！

###1つのシナリオでステージング環境と本番環境のテストがしたいです。実行時に各環境を選択することはできますか？
テストプラン内のURL置換機能を使うと、テストシナリオに含まれる特定のURLを一括で置換してテストを実行することができます。
そのためどちらかの環境でシナリオを作成し、もう一方の環境は必要時にテストプランよりURLを置換することで、1シナリオでテストを実行することが可能です！
![test_result_screenshots.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2302378/f87e3c38-ebfc-5851-ced7-877846aaa099.png)


なお置換対象はFAQに記載がありますので、[こちら](https://autify.zendesk.com/hc/ja/articles/900002604306)をご確認ください。

###ステップグループで作成した値をシナリオ毎に変更できますか？
ステップグループで設定したURLや値等を柔軟に変更することができます。

1.変更したいステップグループを選択
2.編集ボタンを選択
3.「値を指定」を選択し、変更したい値を入力
![スクリーンショット 2021-12-11 23.40.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2302378/53eed401-ae48-e0bd-2deb-434e68d93203.png)

###1つ前に保存したシナリオに戻したいです。戻す方法はありますか？
現状元に戻すことはできませんが、過去のバージョンからシナリオを複製することができます。

1.複製したいシナリオで「︙」を選択
2.「編集履歴を表示」を選択
3.複製したいシナリオの日時を選択
4.「複製して保存」を選択

※複製したシナリオには実行履歴が残らないのでご注意ください。

###作成したシナリオを汎用的に色んなシナリオ内に入れて使用したいのですができますか？
現在シナリオの冒頭にのみになりますが、作成したシナリオをステップグループに変更することで、汎用的に色んなシナリオで利用いただくことができます。

1.汎用的に使用したいシナリオで「︙」を選択
2.「ステップグループとして複製」をクリックする

※一部ステップグループに複製できない場合や複製時に入力が失われることがあります。制限事項については[こちら](https://autify.zendesk.com/hc/ja/articles/4406937768601)のFAQをご確認ください。

#テスト結果確認編
###テスト結果の各ステップのスクリーンショットを確認するときに1ステップごとにクリックするのが面倒です。
テスト結果の各ステップの移動は、キーボードの方向キー操作でも前後のステップのスクリーンショット画面に移動できます。

- 「←」キー：表示しているステップの直前のステップのスクリーンショット画面へ移動する。
- 「→」キー：表示しているステップの直後のステップのスクリーンショット画面へ移動する。

ちなみにテスト結果だけではなく、シナリオ画面もキーボードの方向キー操作でステップの移動ができます。


#最後に
これは2021年12月時点でお伝えすることができる、機能や使い方についての説明となります。
Autifyは日々アップデートをしておりますので、さらに良い使い方やもっとラクができる方法がきっとこの先増えていくと思います!!
Slack通知でのユーザーID、グループIDの記法

# 概要
slackにメンション付きで通知させたかったことがあり、
メンションの記法をまとめました。備忘録。

# 手順
#### 全体へのメンション
`here`だったら
<!`here`>
`channel`だったら
<!`channel`>
#### グループへのメンション
グループIDが`S00H0EK0QKS`だったら
<!subteam^`S00H0EK0QKS`>
#### 個人ユーザーへのメンション
ユーザーIDが`W000F00Q0AA`だったら
<@`W000F00Q0AA`>
# 参考リンク
https://api.slack.com/reference/surfaces/formatting#mentioning-groups
# おわりに
同じことをやろうとしている方の参考になれば幸いです。
エンジニア必見！知っておくと便利なデザインツール


※こちらは、[CatallaxyAdvent Calendar 2021 \- Qiita](https://qiita.com/advent-calendar/2021/catallaxy)の15日目の記事です。
14日目は、Dorayaki711号さんによる[10分で分かるDXFファイル](https://qiita.com/catallaxy/items/2eb2825518ca259ed8f5)についてでした。
どれも面白い記事ばかりなので、興味があれば閲覧してみてくださいね！

そして、こんにちは。
Catallaxyで唯一、北陸の地からリモートで働いているエンジニア7号です。
今年7月にCatallaxyに入社し、早いもので約半年が経とうとしています。
フルリモートで働ける弊社の恩恵を存分に受けて、実家で働き、たまに旅行先でワーケーションしたり、
休憩中に犬の散歩をしたりと、有り難いことにとても自由に働かせて頂いてます。

そんな7号は今回、**エンジニアでも知っておくと便利なデザインツール**を紹介したいと思います。

なぜデザインツールなのか？？
エンジニアとして働いていると、普段こう思うことはないでしょうか。

「このパーツの実装部分で、何か参考になるデザインのサイトはないだろうか？」
「このフロント画面と合う配色パターンが知りたい」
「ここのボタンのアイコン、ちゃちゃっと変えてしまいたい」
「サイトに合ういい感じの素材を投入したい」


などなど。7号はそう思うこと、よくあります。

もちろん、普段はデザイナーの方がデザインされたものがあってそれに従うのがルールだとは思うのですが、
「これくらいならデザイナーに頼むのは気が引けるので、自分で調べてしまおう」
そう思った時に、知っておいて損はないと思うツールを紹介したいと思います。

## パーツ別デザイン集

- [Parts\. \- SaaS/LPのパーツ別Webデザイン集](https://partsdesign.net/)

その名の通り、ヘッダー、FV、CTA、フッターなど**パーツ別のデザイン**が見れるサイトです。
エラー・404ページやスライダー、モーダル、フロー、パンくず等々細かいパーツ別にも見れるので、とても重宝しています。
見ているだけで勉強になるし、色々なデザインの傾向がわかって面白いです。

例えば、CTAのパーツでいうと、ボタンはオレンジ系統の配色が多いなとか、角が丸みを帯びているボタンが多いなとか、ボタンを２つ並べて見せる方法はこんなのがあるのか、とそれぞれの傾向を見ることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181502/f8197f88-c380-f48b-5800-bd8f92080eea.png)


## 配色パターンのツール

- [カラーホイール、カラーパレットジェネレーター\| Adobe Color](https://color.adobe.com/ja/create/color-wheel)

個人的には、対象となる色の補色を調べるのによく使います。
このサイトのメインカラーに合う、アクセントカラー（ボタンのカラーなど）はどれだろう？と思った時に、すぐ調べられるのがいいです。

**トレンドのカラーや、キーワードからカラーを探すことができる**のもいいですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181502/07fe331d-7ae8-4a8a-8365-9787a514cb9e.png)

- [Palettable](https://www.palettable.io/D4EB76)

個人的に好きな配色ツールです。
**LIKE、DISLIKEで直感的に自分好みの色を複数選定**でき、カラーパレットを作成することができます。
実務では直感的に選ぶのは避けたいところですが、個人開発をする際は好きな配色パレットを作ってみてもいいかもしれません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181502/0879cbb7-ec6e-d3a7-223a-7c94d8b343c9.png)

## アイコン素材サイト

- [Iconify – Figma](https://www.figma.com/community/plugin/735098390272716381/Iconify)

こちらは、主にFigmaを使う方向けのアイコンプラグインです。
ちなみに、弊社でもデザインツールとしてFigmaを積極的に使っています。

**ベクター形式（SVG）でダウンロード**でき、配色など自由に変えられるのがとても良いです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181502/00062ed9-a33d-73f7-c4eb-bcd3a960116f.png)


- [icons8](https://icons8.jp/)

**フリー素材で商用利用可能なアイコン**が揃っています。
シンプルなものからカラフルなアイコンまで種類が豊富なところがお気に入りです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181502/ac9446b4-c64f-df3c-0d2c-01e0eef0bf13.png)


## 写真素材サイト


- [O\-DAN \(オーダン）](https://o-dan.net/ja/)
高品質な写真が揃っており、日本語での検索が可能です。

- [写真AC](https://www.photo-ac.com/)
写真素材をDLするのにログインしなければならないのが手間ですが、日本人の写真がよく揃っています。
また、無料会員のうちは1日に検索できる回数は5回まで、1日にダウンロードできる画像は9点までなので、いざという時にDLしましょう笑

- [Pexels](https://www.pexels.com/ja-jp/)
配色が統一された写真素材のサイトです。
このサイトの配色やテイストに合う写真をDLしたい！と思った時に利用します。


## まとめ

いかがでしたでしょうか。
今回紹介したデザインツールは、ほんの一部ではありますが、気になるツールがあれば是非ブクマしてみてください。

また、実務等で使う際は商用利用可能なものかどうかを調べた上で利用することに注意しましょう。

最後に、Catallaxyでは現在エンジニアやその他職種で積極採用を行っています。
興味を持たれた方は[採用情報](https://open.talentio.com/r/1/c/catallaxy/homes/2947)をご覧ください。

明日はあの方による、Ruby bizについての速報です！お楽しみに☆
プレフィックスで書かれたCIDR表記のIPをサブネットマスクに変更するpythonプログラム

```python:ip_change.py
import os
import re

#pythonファイルが置かれているフォルダの絶対パスを取得
current_path = os.getcwd()
#読み込むCIDR表記のIPアドレスがかかれたファイル名を指定
ip_read = '/IP.txt'
ip_write = '/サブネットマスク表記に変更後.txt'

path_w = current_path + ip_write
path_r = current_path + ip_read

mask = {"/8": "255.0.0.0",
        "/9": "255.128.0.0",
        "/10": "255.192.0.0",
        "/11": "255.224.0.0",
        "/12": "255.240.0.0",
        "/13": "255.248.0.0",
        "/14": "255.252.0.0",
        "/15": "255.254.0.0",
        "/16": "255.255.0.0",
        "/17": "255.255.128.0",
        "/18": "255.255.192.0",
        "/19": "255.255.224.0",
        "/20": "255.255.240.0",
        "/21": "255.255.248.0",
        "/22": "255.255.252.0",
        "/23": "255.255.254.0",
        "/24": "255 255 255 0",
        "/25": "255 255 255 128",
        "/26": "255 255 255 192",
        "/27": "255.255.255.224",
        "/28": "255.255.255.240",
        "/29": "255.255.255.248",
        "/30": "255.255.255.252",
        "/31": "255.255.255.254",
        "/32": "255.255.255.255"}

ip_changed_list = []

with open(path_r, mode='r') as f:
    iplist = f.readlines()

for ip in iplist:
    # [/][0-9]+
    cidr = re.search('[/][0-9]+', ip)
    # mask[cidr.group()] ⇦にてサブネットマスクを取得
    ip_changed = ip.replace(cidr.group(), ' ').replace('\n', '')
    ip_changed += mask[cidr.group()]
    ip_changed_list.append(ip_changed)

with open(path_w, mode='w') as f:
    for d in ip_changed_list:
        f.write("%s\n" % d)
```
#使用方法
pythonプログラムとIP.txtを同じフォルダにして下記コマンドを実行

```bash
python3 ip_change.py
```
#OUTPUT
```:IP.txt
192.168.0.133/24
192.168.0.134/25
192.168.0.135/26
192.168.0.135/26
192.168.0.135/24
192.168.0.135/26
192.168.0.135/26
192.168.0.135/30
192.168.0.135/31
192.168.0.135/32
```
```:サブネットマスク表記に変更後.txt
192.168.0.133 255 255 255 0
192.168.0.134 255 255 255 128
192.168.0.135 255 255 255 192
192.168.0.135 255 255 255 192
192.168.0.135 255 255 255 0
192.168.0.135 255 255 255 192
192.168.0.135 255 255 255 192
192.168.0.135 255.255.255.252
192.168.0.135 255.255.255.254
192.168.0.135 255.255.255.255
```
rustと2分探索の使い方

# 初めに
2分探索をデフォルトの binary_search（スライスのメソッド）で書いてみたというだけ。
公式の
https://moshg.github.io/rust-std-ja/std/primitive.slice.html#method.binary_search
を見ればいいだけなんだけどメモ代わり。
あと2分探索法の概要は知ってるけど自分で実装するの面倒な人向け

#今回の使い方
2*10^5個のベクタ要素に整数が入ってる。ある値より大きい整数が何個あるか数える
ベクタの要素数が分かっているのでソートして指定した値と最も近い要素の位置がわかればよい。
なお、Sが整数が入っているベクタ、ある値が入っているベクタがX。

```rust:main.rs
mut S: [usize; n],
mut X: [usize; q]

S.sort();

let len = S.len();
let mut count = Ok(10);
let mut t_count = 0;
for i in X{

  count = S.binary_search(&i);
  if count.is_ok(){
    t_count = count.unwrap();
  }else{
    t_count = count.unwrap_err();
  }

  println!("{:?}",t_count);
}
```

binary_searchはresult型なので中の値を引っ張ってくるために
unwrap()する必要あるが、OkとErrでやり方が違うので分けた。

ぴったりの値があるときはOkと一緒にその要素の位置、
無い時は最初の自分より大きい数字の位置を出す。この辺は公式見ればいいので省略。Sの要素数より大きい値を返すのは少し要注意かも・・・
今更だけどmatchでかけばよかった。
あと同一要素がある場合はスライスになるので注意しなきゃだけどどうすりゃいいかなあ・・・
職業訓練校に半年間通って、感じたこと

<h1>はじめに</h1>
こんにちは。職業訓練校に入学してQiitaを始めたのですがQiitaの存在を忘れてしまった者です。先月無事に職業訓練校を卒業し、現在はITエンジニアとして就職活動中です。気になっておられる方がおられるかわかりませんが、私の半年間何を学んだのか、職業訓練校の長所、短所などをシェアできればと思います。

<h1>職業訓練校Webプログラマーコース</h1>
・１ヶ月目〜2ヶ月目
主にこの期間はHTML・CSSメインで学習しました。各要素の役割を覚えたり実際、講師の方が出される課題をこなしていくと言う感じでした。個人的にHTMLは独学で理解できたと思っていたのですがPOST通信とGET通信の違いなどわかっていなかったと痛感しました。（今でも怪しい😂)

・3ヶ月目〜4ヶ月目
この辺りから、PHP・JSをガッツリ触り始めました。オブジェクト志向となんぞやだったり、DBとのやりとりだったりです。最初の印象は、とても楽しいでした。この二つを使用することでやりたいことの幅がかなり広がったからです。この期間に初めて自力でwebアプリ(クイズアプリ)を作成しました。アップしようと思いましたが流石にぐちゃぐちゃすぎて恥ずかしいので今改良中です。土日は自主制作に取り組んでいました。自作していく中で、大量にわからない単語と格闘していたので、この際ガッツリITの基礎知識を固めようと基本情報の取得を目標にITパスポートの勉強を始めました。1ヶ月ほど勉強を行なって、ぎりぎり合格しました。ほんまに基本情報大丈夫かいなと落ち込んだの覚えています。😭

・5ヶ月目〜6ヶ月目
半年間で一番忙しい期間でした。授業では、受講生がやりたいことを講師の方がライブコーディングで実装していくという授業がメインでした。Yahoo知恵袋のクローンだったり、チャットアプリなど5、６個作成しました。また個人としても制作課題として2個のアプリを制作しました。これと同時並行で基本情報の勉強をしていました。朝から夕方まで学校で勉強をして通学途中に基本情報の勉強、帰宅後は自主制作と朝から晩までIT漬けの日々を送っていました。私自身この期間が大変でしたが最も成長でき、有意義な時間だと思っています。

<h1>訓練校の長所・短所</h1>
<b>長所</b>
・週４ペースで1日6時間ガッツリ授業してもらえる
・対面授業
・講師の質が高い
・クラスメートと切磋琢磨できる
・手当が出る場合がある

<b>短所</b>
・授業スピードが遅い
・PCのスペックがひどい
・レガシーな技術中心の授業内容
・日直制度などがあり、義務教育の延長のような作業がある
<hr>
まず長所から言いますと、カリキュラムがすごくいいです。前職時代にも軽いプログラムスクールのようなものに通っていましたが、週一で2〜3時間程度しか通えず、まずスクールに行ってやることが前やっていたことを思い出すでした。このことを踏まえて今回は、短期集中できるカリキュラムを選びました。やはりこちらの方が思い出す作業など無駄な時間が圧倒的に少ないと思います。あとは対面授業でクラスメートと一緒に学習できるところが大きく,挫折しにくいと思います。現に私のクラスメートは誰一人途中で辞める人はいなかったです。(入校の際のオリエンテーションで辞められた方はいました。すみません。😂)
また講師の方も講師歴が長かったり、現職エンジニアの方々だったりして、スキルも高かったです。またここが他のプログラミングスクールと決定的に違うのが授業料が無料。もしくは逆に手当がもらえる。というところです。詳しくは下記にURLを貼っておくのでそちらを見てほしいのですが、経済的に負担なく勉強に集中できると思います。<br>


https://www.mhlw.go.jp/stf/seisakunitsuite/bunya/koyou_roudou/koyou/kyushokusha_shien/index.html

逆に短所ですが、これは仕方がないところだとは思いますが受講生のレベルが違いすぎると言う点です。私自身入校時のスキルは全くでしたが前職IT系で働いていた方だったり、自分でゲームを作った方だったりがおられました。一方でパソコンに全く触れたことがない方がおられ、その方に合わせた授業スピードになり、自然と授業スピードが遅くなっていました。またPCも古く急に電源が落ちたり、固まって動かなくなったりして授業に参加できないこともありました。また日直制度があって、日直は朝に発表だったり、日誌を書いたり、朝の号令をしたり、掃除をしたりがありました。当然授業する上で必要な作業はありましたが、全てが必ずしも必要不可欠と言われると疑問符が付きます。(最初の方は小学生気分で楽しめましたが。笑)

<h1>まとめ</h1>
総括すると、とても有意義な半年間を過ごせました。プログラミングもしっかり一から勉強でき、自作でアプリも作れるようになりました。資格でもITパスポートと基本情報を取得できました。今後エンジニアとして就職したいという気持ちも更に強くなりました。しかし私が思い描いていた即戦力でバリバリ現場で働けるというレベルには到底及んでいないと思います。反省点としては授業で習ったことばかりを反復で行っていたので、新しく自分でも学んでいたら更なるスキルアップになった思います。

<h1>今後の予定</h1>
先月卒業をしたのですがクラスメートは卒業前から就職活動を始められていた方々が内定をぼちぼち貰い始めています。私自身、基本情報の勉強をしていて全く就活してなかったので正直すごく焦っています。😰面接も受け始めていますが、なかなか思い通りに行っていないのが現状です。まずは年末までに内定を獲得していい年明けを迎えたいです。また就活情報だったり現状をお伝えできればと思います！！
文系大学生からWebエンジニアになった所感

本記事はランサーズの [AdventClender2021](https://qiita.com/advent-calendar/2021/lancers) の12日目の記事です。

こんにちは。22新卒の橋口です。

今年の3月からインターン生としてランサーズにジョインし、早いものでもう約半年以上の開発経験を積んできました。

昨年の今頃はちょうど就活の情報収集を始めた時期で、「Qiitaでよく見かけるアドベントカレンダーって何だろう」と思っていたのが懐かしいです。

本記事では、就活を始めてから1年間で起きた経験や感じたことを振り返りたいと思います。

## 筆者の就活時のスペック

- Laravelで簡単なアプリケーションを作った
- 友達のお店のホームページを作った
- Web制作案件のお手伝いをしていた
- 長期のチーム開発経験はゼロ

独学で約半年間ほど、Webアプリケーションを開発するのに必要な言語や知識を学んだ後、簡単なWeb制作の案件をこなしていました。

プログラミングを学んでいくうちに、「相手が喜ぶものを作った対価でお金がもらえる」ことの嬉しさにのめり込み、社会人になったらエンジニアとして働きたいと思うようになりました。

## ランサーズに入社した理由

エンジニアとして就活を意識し始めた頃、会社員ではない働き方をしている人に会ってみたいと思い、フリーランスが集まるコミュニティに参加する機会がありました。

そこで初めてクラウドソーシングというサービスを知り、事情があり会社員として働けない人や組織に属さずに働きたい人が、自分のスキルを活かして生活できることに魅力を感じました。

フリーランスの人によると「ランサーズは継続案件が取りやすい」らしく、ユーザーを大切にするランサーズを裏側で支える人になりたいと思い、ご縁もあり入社することになりました。

## 入社初期の業務所感

文系大学にいたことやプログラミングを独学で学んだこともあり、まわりにエンジニアを目指す人も少なかったです。そのため、初めてのチーム開発は不安だらけでした。

最初の数ヶ月間は「何が分からないのか分からない」状態で、ある程度の基礎知識がある前提で質問しないといけないのではと、自ら会話のハードルを上げてしまっていました。

さらに、テキストチャットでのコミュニケーションの取り方に慣れておらず、タスクに詰まった時の孤独感があることも正直にありました。

しかし、チームの方々の丁寧なレビューや他のインターン生が積極的に質問をしているのを見ているうちに「最初は分からなくて当たり前」という考え方に変わっていった記憶があります。

ランサーズには進捗や雑談を書くことができるSlackの個人チャンネルがあります。そのため、とりあえず現状をつぶやいてみたり、他の人が似た質問をしていないか覗きに行ったり、同じようなタスクに取り組んでいる人のプルリクエストをじっくり読み込みながら、少しずつ理解を深めていきました。

## 新卒同士が交流できる環境でよかった

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1758217/8fa15a80-a44f-810b-2903-06d5cc083e27.png" width="400px">
↑悪ノリを始めるインターン生達

「せっかく似たタスクをお互い取り組んでいるから、インターン生で共有できると捗るよねー」という先輩の計らいにより、新卒やインターン生が取り組んでいるタスクを毎週共有する会ができました。

小さな悩みや疑問点でも、年齢が近く雑談形式であれば遠慮なく話すこともできるので、とても有意義な時間になっています。

同期が書いているコードを読むのは参考になりますし、モチベーションアップにもつながります。

来年入社してくるインターン生や新卒の方達にも、交流する場をしっかりと設けてあげたいです。

新卒という枠組みは、人生で最後の同期メンバーとも言いますので、今後も助け合いながら刺激を与え合う良い関係を築いていきたいと思います。（よろしくね）

## さいごに

まだまだ分からないことだらけで、今も何かしらに躓いていますが、振り返ってみると入社時より少しだけできることが増えていると実感できました。

また、プログラミングがさらに好きになっていることも実感でき、幸せな気持ちになりました。

今は目の前のタスクを捌くのに精一杯ですが、来年も沢山のことを吸収して、一人前のエンジニアになれるように頑張ります！

明日は @tatuya44511336 さんです。
よろしくお願いします!
ApacheでIPアドレスによるアクセスを禁止する

# はじめに

作成したサイトにせっかくドメイン名を付与しても、サイトにIPアドレスでアクセスできると「IPアドレスでアクセスした際のURL」がGoogleなどにキャッシュされてしまうことがあります。
「IPアドレスでアクセスした際のURL」がキャッシュされてしまうと、検索エンジン側でコンテンツが重複しているとみなされてしまい、SEOにも影響が出る可能性があります。

そこで今回は、IPアドレスによるアクセスを防ぐための方法をまとめてみました。

# テストに使用した環境

AWS上のサーバーを利用しました。

* OS
 * Amazon Linux 2
* Apache
 * 2.4.51

# 事前作業

## Apacheのインストール

* [ApacheとTomcatを連携させる](https://qiita.com/nkojima/items/7a8dd5c5e1d3c032178c)に書かれているように、yumコマンドでインストールしました。

## Webサイトのドキュメントルート

* Apacheのデフォルトのまま、`/var/www/html`にしています。

## ドメインの取得

* 今回は割愛します。

# Apacheの設定変更

## VirtualHostの設定ファイルの作成

* `/etc/httpd/conf.d`以下に、`vhosts.conf`という設定ファイルを作りました。
 * ファイル名の末尾が`.hosts`であれば読み込んでくれるそうなので、必ずしも同じ名前（`vhosts.conf`）にする必要はありません。
* VirtualHostディレクティブで指定したドメイン名に合致するものが無い場合（※ここではIPでアクセスされた場合）は、「403 Forbidden」が返されるように設定します。

```shell-session
[ec2-user@ip-10-0-1-102 ~]$ cd /etc/httpd/conf.d/
[ec2-user@ip-10-0-1-102 conf.d]$ sudo vi vhosts.conf
--------------------------------------------------------------------------------
<VirtualHost *:80>
    ServerName any
    <Location />
        Order Deny,Allow
        Deny from all
    </Location>
</VirtualHost>

<VirtualHost *:80>
  ServerName {ドメイン名}
  DocumentRoot "/var/www/html"
</VirtualHost>
--------------------------------------------------------------------------------
```

## 設定ファイルの内容の確認

* 念のため、設定ファイルの記述（構文）が正しいかを確認しておきます。

```shell-session
[ec2-user@ip-10-0-1-102 conf.d]$ sudo apachectl configtest
Syntax OK
```

## 設定の反映

* Apacheを再起動して設定を反映します。

```shell-session
[ec2-user@ip-10-0-1-102 conf.d]$ sudo systemctl restart httpd
```

# 動作確認

* curlコマンドを使って、ドメインだとコンテンツを正常に取得できる（HTTP STATUS=200）ことと、IPだとコンテンツを取得できない（HTTP STATUS=403）ことを確認します。

```shell-session
[ec2-user@ip-10-0-1-102 conf]$ curl -I http://{ドメイン名}
HTTP/1.1 200 OK
...

[ec2-user@ip-10-0-1-102 conf]$ curl -I http://{IPアドレス}
HTTP/1.1 403 Forbidden
...
```

# 参考URL

* [[Apache]指定した名前以外でのアクセスを制御する](https://qiita.com/gotohiro55/items/a010e3ce9673276e1839)
* [よく使うcurlコマンドのオプション](https://qiita.com/ryuichi1208/items/e4e1b27ff7d54a66dcd9)
* [ApacheとTomcatを連携させる](https://qiita.com/nkojima/items/7a8dd5c5e1d3c032178c)
最大の区間和 Python3

https://paiza.jp/works/mondai/stack_queue/stack_queue__practice_step2


Python3の解答がなくて涙
何度も試行錯誤してやっと通過したので忘備録で残します

```
N,X = map(int,input().split())
A = list(map(int,input().split()))

S = [0]
max_num = 0
max_i = 0

for i in range(0,N):
    S.append(S[i] + A[i])

for i in range(0,N-X+1):
    if max_num < S[X+i] - S[i]:
        max_num = S[X+i] - S[i]
        max_i = i
print(max_num,A[max_i])
```
[Shopify] Google Font を追加する

ShopifyのThemeにGoogle Fontを追加する方法をまとめます。


# やりたいことのまとめ

Google Fontでサイトのロゴを飾りたい。

ヘッダー部分にこちらのを挿入

```
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap" rel="stylesheet">
```

CSSにこちらを追加してヘッダーテキストロゴ部分に反映。

```
.mylogo{
   font-family: 'Black Ops One', cursive;
}
```

# Theme.liquid

Shopifyで最上位に読み込まれるファイルはTheme.liquidのようです。なので、このファイルのヘッダー分部にGoogle Fontへのレファレンスを追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/cfb022d9-46d4-7e63-501e-ed2dcbbe73f2.png)

Theme.liquidにてbase.cssへレファレンスしていることが記載されていますので、base.cssにmylogoクラスのcssを追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/01f61f34-e4e4-083f-abe4-b64a812ba654.png)


# base.css

base.css にmylogoクラスを追加しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/8e7daad9-f342-776f-25ef-92e9908e56e4.png)

# header.liquid

次にheader部分のテキストロゴの位置に先ほどのcssクラスを指定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/33df5067-78c2-3339-c455-cd0fb885e7e9.png)

# 表示の確認

では、ちゃんとロゴが反映されているかどうかフロントページを確認してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/d8875909-7a99-cd23-03a9-fbb89840aba3.png)

フォントサイズは小さいですが意図したフォントが反映されていることを確認できました。

もともと指定されているh2クラスを戻したらサイズ感はなおりました。
スイッチのIFに設定するマクロを生成するpythonプログラム

```python:IF_setting.py
class Interface(object):
    def __init__(self, int_id):
        self.__int_id = int_id
        self.__command_list = []

    @property
    def int_id(self):
        pass
    @int_id.getter
    def int_id(self):
        return self.__int_id

    @property
    def command_list(self):
        pass
    @command_list.setter
    def command_list(self, command):
        self.__command_list.append(command)
    pass
    @command_list.getter
    def command_list(self):
        return self.__command_list


import os
current_dir = os.getcwd()
read_file_name = '/コマンド.txt' 
output_file_name = '/IFに設定するマクロ.ttl'

read_file = current_dir + read_file_name
output_file = current_dir + output_file_name

replace_list = []
context_list = []
with open(read_file, mode='r', encoding='utf-8') as f:
    line = f.readlines()
    #コマンド.txtから読み取り、改行コードを削除
    for s in line:
        if '\n' in s:
            text = s.replace('\n','')
            replace_list.append(text)
        else:
            replace_list.append(s)

interface_list = []
for b in replace_list:
    context_list = b.split('\t')
    interface = Interface(context_list[0])
    #コマンドが入っているのは二つ目から
    for com in context_list[1:]:
        interface.command_list = com
    interface_list.append(interface)

with open(output_file, mode='w', encoding='utf-8') as f:
    for int in interface_list:
        f.write('sendln \'int ')
        f.write(int.int_id)
        f.write('\'')
        f.write('\n')

        for command in int.command_list:
            f.write('wait \'(config-if)#\'')
            f.write('\n')
            f.write('sendln \'')
            f.write(command)
            f.write('\'')
            f.write('\n')
        f.write('wait \'(config-if)#\'')
        f.write('\n')
        f.write('sendln \'exit\'')
        f.write('\n')
        f.write('wait \'(config)#\'')
        f.write('\n')
```
#注意事項
コマンド.txtのインターフェース名とコマンド、コマンドとコマンドの間はTAB（タブ）で区切られていないといけない。
下記写真のようにエクセルを使用して、コマンド.txtにコピペすれば、TABで区切ることができる。
![スクリーンショット 2021-12-11 23.06.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1344089/cfca5c66-d395-32b4-c9f2-c1e7dadb69d6.png)

#OUTPUT
コマンド.txtとpythonプログラムを同じフォルダに配置し、下記コマンドを実行

```bash:bash
python3 IF_setting.py
```

```:コマンド.txt
Gi1/1	ip address 192.168.0.1	no shut
Gi1/2	ip address 192.168.0.2	no shut
Gi1/3	ip address 192.168.0.3	no shut
```
```:IFに設定するマクロ.ttl
sendln 'int Gi1/1'
wait '(config-if)#'
sendln 'ip address 192.168.0.1'
wait '(config-if)#'
sendln 'no shut'
wait '(config-if)#'
sendln 'exit'
wait '(config)#'
sendln 'int Gi1/2'
wait '(config-if)#'
sendln 'ip address 192.168.0.2'
wait '(config-if)#'
sendln 'no shut'
wait '(config-if)#'
sendln 'exit'
wait '(config)#'
sendln 'int Gi1/3'
wait '(config-if)#'
sendln 'ip address 192.168.0.3'
wait '(config-if)#'
sendln 'no shut'
wait '(config-if)#'
sendln 'exit'
wait '(config)#'
C#でカノジョをつくる（11日目）

お疲れ様です。たなしょです。
今日もGUIアプリを作りました。
ある程度アプリの作り方がわかってきたので明日あたり自作アプリでも作ってみようかと思います。

## Snack
今日のおやつを決めてくれるアプリです。
お金がいくらあるかを入力する→一定金額以上なら甘いものにするか聞く→カロリーは気にするか聞く→おすすめおやつが出てくる。
上記の順番で処理を実行します。
if文で条件分岐させながらオブジェクトに値を代入する方法を学ぶことができました。
こんな感じのソースになりました。

```c#
private void button1_Click(object sender, EventArgs e)

if(textBox1.Text == "")
{
    MessageBox.Show("使える金額を入力しよう!");
}
else
{
    int pocket = Convert.ToInt32(textBox1.Text);
    string caption = "どっちか選ぼう！";
    MessageBoxButtons buttons = MessageBoxButtons.YesNo;
    DialogResult result1;
    DialogResult result2;
    string message1 = "甘いのにする？";
    string message2 = "カロリーは気になる？";
    if (pocket < 300)
    {
        label2.Text = "「カリカリシュークリーム」一択だ！";
    }
    else
    {
        result1 = MessageBox.Show(message1, caption, buttons);
        result2 = MessageBox.Show(message2, caption, buttons);
        if(result1 == DialogResult.Yes & result2 == DialogResult.Yes)
        {
            label2.Text = "「ぷるぷるコーヒーゼリー」にしましょう！";
        } 
        else if(result1 == DialogResult.Yes & result2 == DialogResult.No)
        {
            label2.Text = "「濃厚キャラメルチーズタルト」にしましょう！";
        }
        else if(result1 == DialogResult.No & result2 == DialogResult.Yes)
        {
            label2.Text = "「プロテインゼリー」だね！";
        }
        else
        {
            label2.Text = "「ビターカカオエクレア」にしましょう！";
        }
    }
}
```

できたアプリはまだまだネタアプリの域は出ませんがいい感じの練習になりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268048/50c09327-4a5f-a90b-59ae-30b81dc44eeb.png)
ねねっちかわいいです。

## メッセージを出すアプリ
ランクを入れてボタンを押したらメッセージボックスが出力するアプリです。
とても簡素な作りですがメッセージボックスの出力方法を学べたのでとても参考になりました。
case文で条件判定させてるだけのソースコードでした。

```c#
private void button1_Click(object sender, EventArgs e)
{
    int score;
    score = Convert.ToInt32(textBox1.Text);
    switch (score)
    {
        case 5:
            MessageBox.Show("あなたの成績はAランクです。", "結果");
            break;
        case 4:
            MessageBox.Show("あなたの成績はBランクです。", "結果");
            break;
        case 3:
            MessageBox.Show("あなたの成績はCランクです。", "結果");
            break;
        case 2:
            MessageBox.Show("あなたの成績はDランクです。", "結果");
            break;
        case 1:
            MessageBox.Show("あなたの成績はEランクです。", "結果");
            break;
        default:
            MessageBox.Show("成績ではない数値が入力されています。", "結果");
            break;
    }
}
```

こんな感じでメッセージボックスが出力されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268048/6908e9c4-6a7c-4efb-ca23-6fc39cef88c3.png)

## 最後に
色々簡単なアプリを作ってみて、簡単なルールのゲームなら作れる気になってるので明日あたり作ってみたいと思います。
Atcoder水色になるまでにやったこと 

この記事は[HiCoder Advent Calendar 2021](<https://adventar.org/calendars/6509>)の11日目です。自身初めての記事！！

自己紹介
---
・大学2年  
・競プロは2年になる春休みから本格的に始めた  
・野球好き  
レーティング推移
---  
![スクリーンショット (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2334893/c4925b1c-a5e2-2500-4485-f0232c175330.png)

やったこと  
---  
本題ですが、自分はc++の基本構文->典型アルゴリズム・典型問題->精進の順に進めました.  
c++を触るのは初めてでしたが、c++基本文法を学べる[APG4b](<https://atcoder.jp/contests/APG4b>)の存在、競プロの問題の解説が大体c++で書かれているなど言語を選ぶうえでこだわりがない限り1択な気がします. 
 
1年の8月
---
まずc++の基本文法をやるのに[APG4b](<https://atcoder.jp/contests/APG4b>)を上から順にこなしていきましたが、再帰関数で挫折して3月まで競プロから離れます。  

1年の3月
---  
競プロに復帰しますが、理由は特にありません。再帰関数をここで攻略するのですがとても苦労しました。再帰関数は例がフィボナッチ数列ではなくDFSのようなグラフだと理解しやすかったなと今思います。その後、
・深さ優先探索(DFS)
・幅優先探索(BFS)
・動的計画法(DP)([TDPC](<https://atcoder.jp/contests/tdpc>)を一通りやった)
・二分探索
・全探索
・累積和
・ダイクストラ法
・ワーシャルフロイド法
・クラスカル法
を学びました。再帰関数が一番の山場で上記のアルゴリズムはあまり苦労することなく習得できました。上記のアルゴリズムは典型で何も見なくてもコードを書けるぐらい理解する必要があると思います。何も見なくても書けるようになったのは緑diffを埋める最中です。

2年の7月
---
ようやく精進！神サイト[atcoder problems](<https://kenkoooo.com/atcoder#/table/>)の緑diff(問題の目安で、緑diffの問題が解けるとコンテストで緑色ぐらいのパフォーマンスがでる)の問題をひたすら解きました。そこで習得したアルゴリズムは
・セグ木（遅延セグ木)
・UnionFind木
・強連結成分分解
・トポロジカルソート
・マンハッタン距離の45°回転
・二項係数(nCk)
・n乗の高速化(mod_pow)
です。上記のアルゴリズムは自分で使えるようにテンプレートを作っていました。グラフに慣れてなかったり、数学が弱い(僕)と少し苦労するかもしれません。ただセグ木やUnionFindは楽しいぞ！

緑diffを埋める最中に緑色になりましたが、問題を解く中で典型アルゴリズム＋上記のアルゴリズムがだんだん染み付いていく感覚はありました。夏休みを利用し、2か月で埋めるぞ！と思って1日4～5時間ほぼ休みなくやってた気がします。(ちゃんと2か月で埋まったので良かった)
2年の9月
---
水色diffを埋めていきますが、ここら辺から考察が必要な問題が大半で楽しくなっていきました。一方で、解説を読んだ時に、次同じような問題が出た時解くのは無理だなと思う問題が多かったです。緑diffと比べて実力がついてるな～という感覚は薄れていき、徐々に精進モチベを失っていきました。

青色になれるのか
---
結論僕はほぼ無理です。これから上に行くには精進量が必要だと言われてますが、1日4,5時間もする精進モチベは無いし時間も有限なので…

最後に
---
atcoderのコンテストには今後も出る予定です！精進もゆるーく続けて行くつもりです！最後まで読んでいただきありがとうございました。
Twitter Spaceの音声をダウンロードする方法

# 環境

デバイス： MacBook Retina 2017
OS: macOS Big Sur バージョン 11.6.1

# 必要なソフト

<ul>
 <li>FFmpeg</li>
 <li>Node.js</li>
 <li>space-dl</li>
</ul>

# 必要なソフトのインストール

## Homebrewをインストールする

[Homebrew](https://brew.sh/index_ja)のサイトにあるインストールコマンドをターミナルに貼り付け実行する。

インストールスクリプト

```shell
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

## FFmpegをインストールする

Homebrewを使うことで以下のコマンドで簡単にインストールすることができます。

```shell
brew install ffmpeg
```

## Node.jsをインストールする

[Node.jsダウンロードページ](https://nodejs.org/ja/download/)より環境にあったインストーラーをダウンロードし実行する。

## space-dlをインストールする

Twitter Spaceの音声をダウンロードするツールのpace-dlをインストールします。
インストールは下記のコマンドをタームナルで実行するとインストールできます。

```shell
npm i -g space-dl
```

# 使い方

## URLを使ってダウンロード

使い方は簡単でターミナルでspace-dlの後にTwitter SpaceのURLを入力し、実行するだけでダウンロードが開始されます。


```shell
space-dl "https://twitter.com/i/spaces/〇〇〇〇〇〇" # SpaceのURLの場合
```

## スクリーンネーム（@の後のやつ）を使ってダウンロード

Twitter API v2のトークンを設定することでTwitterのスクリーンネームでダウンロードすることもできます。

Twitter API v2トークンの設定コマンド

```shell
space-dl token "〇〇〇〇〇〇〇〇" # 〇〇〇〇〇〇はTwitter API v2トークン
```

スクリーンネームを使ってダウンロードするコマンド

```shell
space-dl -u "〇〇〇〇〇〇〇〇" # 〇〇〇〇〇〇〇〇はスクリーンネーム
```
弊学校舎3Dモデルを作って


##この記事はただの日記です！
保険をかけておきますが、自分はQiitaで記事書いたりするのは始めてなので、
あんまりうまく書けてなくても許してください
この記事は創造工学の授業でつくったものの紹介?をさせていただきます
我らが班の創造工学そのもの体験談自体は18日の人がきっと語ってくれることでしょう。

##なにつくったの？
弊学(c,i科棟)内を探索したりモンスターから逃げたり倒そうとしたりするVRホラーゲームです。
Kocho先生部屋凸をして学生課で校舎の設計図をいただいてその寸法に基づいてつくったりした。
自分は3Dモデルの制作を担当していたため、その部分の説明をしていきます。
画像はすべてレンダリングしたやつではなくてただのスクショです(めんどくさかった)
###使用ツール
・SolidWorks
・Blender
・SubstancePainter等


全体像です
<img width="500" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2258534/650dc86c-d0f5-b747-8b50-09455d6c7566.png">




###c科棟
最初に作りました。
手順としては、SolidWorksで概計と部屋割りまでつくり、
ドアなどの小物やテクスチャを後で自分と他メンバーで制作して配置しました
このあたりは最初期に作ったこともあり、今見ると作り直したいなって思うので作り直すとおもう
<img width="500" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2258534/0eeb63f6-efcd-6e81-a100-bafab8f85d22.png">
<img width="500" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2258534/26e3ded2-3b75-4024-cf47-02ef393584c2.png">
<img width="500" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2258534/eed08480-3be7-0fc7-220c-961cc7e3c58f.png">
↑テクスチャはがれて<font color="Magenta">**嫌な色**</font>になってたので灰色です

###i科棟
なぜか寸法通りに作ったはずなのにおける机の数もなんか狭い
高学年になるにつれオリジナルのメンバーが減っていくことを暗示しているのかもしれない
このあたりは締め切りがｽﾞﾝｽﾞﾝ！と近づいてきていてヤバかったのでクオリティが低いのでいうことはもうない
<img width="500" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2258534/2102b5c4-cc2b-a582-f597-3d0d51a3ad30.png">

##結果
創造工学は最終報告の当日の朝4時に完成したようで、デバッグをする暇が全くつくれずに、すりぬけバグが頻発したりunityにエクスポートしたときに様々な不具合が起こって床が壊れてたりして荒廃した鈴鹿高専になってた
けれどもこうやって締め切りを決められて開発をするのは部活以外では初めてで貴重な体験だった。
もっとクオリティをあげて作り直したいけど一人でやるのは厳しい。協力者求ム

##𝑶𝑾𝑨𝑩𝑰
書いててコードをのせることもそうないし、
ここをこうしたとか書いてったら量頭おかしくなるのでスクショまみれになった





###尺があまったので今思いついた鈴鹿高専都市伝説を書く
i科棟1階の2階につづく階段のところには扉がある。
この扉はなにか配電盤みたいなのがはいってるのかとおもっていた

ある日ぼくは、校舎の3Dモデルを作るのに学校の計測へ行ったとき

ちくわの中身をのぞいてしまった…。
これからi科棟の1階の扉って書くのは面倒なのでこれ以降はちくわって書くことにします
工事で空いていたそのちくわのむこうの地下には階段が続いていて結構デカい空間が広がっていて折り返して下に階段が続いていた
その地下にはたくさんのエアロバイクが並べられていて過去の留年生達が並んで漕いでるのを目撃した。
どうやらここはちくわの地下の労働施設のようで学校をやめようとした留年生はここに放り込まれるらしく、校舎の電気を賄っているらしい。
聞けばここで発電された電気がi科棟1階ロビーのところに『本日の発電量』と表示されるようだ。
こちらに気が付いた留年生の一人は「おう！知ってるか＿？再試は本試だぜ？」と語りかけてきた。
そういった彼のﾄﾞﾔ顔は留年して毎日自転車漕がされてれているのにも関わらず毎日テストに明け暮れて死んだ魚のような目をしている私たちの目よりも輝いて見えた。
どうしてだろうむなしいね



どこまでが本当のことなんでしょう？
(地下になんかつづいてたとこまでが本当です)