OmniAICreator/Qiita-1.07M huggingface dataset:
Eth Indiaの振り返り(後編)

さて本記事ではいよいよハッカソン当日の様子から、開発中、終わりまでを書きたいと思います。

Day1
当日会場に着くとまずチェックインを行う必要があります。これが確か14時からで私は同じ宿に泊まっていた日本人グループと14時少し前に到着したくらいだと思いますが、すでに長蛇の列ができてましたね。無事チェックインを終え、テーブルでチームメンバーと対面。一度ディスコードでボイスチャットをし、自己紹介・アイデアの概要はシェアしてたのですがいざ集まってアーキテクチャを決めるとなるとさらに議論が必要で(実際僕たちはここで多少アイデアを変更しました)、想定より時間がかかってしまいました。休憩がてら簡単なランチをとり、夕方には大枠の仕様と役割分担ができていたのでそれぞれ作業にとりかかりつつ、ワークショップに行ったりしてたらあっという間に夜になり、ディナーを取りました。そこから初日は特に問題もなく夜中の3時くらいまで開発を続け、9時から再開するために宿に睡眠を取りに戻りました。

Day2
翌朝全員時間通りに、と行きたいところですが僕は30分遅れで一番乗り、全員揃ったのは2時間後の11時とかだったと記憶してます。ブッチする人もいるみたいなのでマシな方だと思います。さて、そこからランチ等取りながら開発をつづけ、言及してなかったですが私はbizなのでdevに比べてやることはなく、ブースにいってスポンサーとコミュニケーションとったり、タイムマネジメントをしたり、ドキュメントを作ったりしてました。二日目の夕方くらいからデックも作り始めてたような記憶です。

合間はスナック食べたり近くのチームと雑談したり、クリケットやったりして気分転換してました。さてここまで比較的順調だった僕たちですが、二日目の夜インシデントが発生します。まず一つ活用予定だったPush protocolとMina protocolのコーディングがうまくワークしません。結局原因はprotocol側にあったのですが(詳細は忘れました)、僕たちのdemoのメインどころだったかつ想定外のエラーに相当の時間を取られ、二日目は徹夜で臨むことを決定。
ただこの当時もチームの雰囲気が下がることはなく、やばいけどやってやるぜテンションで終始楽しくやれたので(そういう風なコミュニケーションを心がけてはいました)、メンバーには恵まれたなと改めて思います。ハッカソンは何はともあれ完成させないと、なゲームなのでここで作業をやめるようなコミットが低いメンバーが仮にいると目標から大きく遠ざかってしまいます。

Day3
もはやどこからがDay3なのかという最終日ですが、なんと9:00(am)までにdemoを提出しないといけません。書いた通り完成させないと文字通りNotingなので提出だけは余裕をもって取り組もうと考えていた僕ですが、結論からいうと1度目の提出は締切の3〜5分前。demoを完成させてアップデートをしたのは9時3分とかでした。1度目の提出ではdemo動画が含まれてなかったので、会場のクソみたいに遅いwifiのせいでdemo動画のアップロードが進まず9時を過ぎた時は終わったなと思いました。(結局今回は提出締切が15分延長されたのでセーフでしたが。)

ここで締切間際で僕たちが犯したミスを書きておきます。
①demo動画のレコーディングができてなかった。一つ目の凡ミスですね。
②動画のアップロードにかかる時間を想定できてなかった。
などその他にも数えきれないくらいの細かいミスを起こしました。割と余裕をもって準備しようと考えていてもこれなので、本当に余裕をもって提出しましょう笑

さて、これでhackathonは終わりと書きたいところですがそうではなく、ここから運命のジャッジメントタイムです。確か13時とかからジャッジが始まるので、それまではひたすらdemoとdeckの準備をしてました。

ジャッジには2種類あり、ファイナリスト用のジャッジと自分達が活用した(prizeを狙う)protocolのブースに、それぞれピッチをしに行きます。
僕が話しを聞いていた限りだとブースはすごく混み合うのでチームメンバーで分担していった方が良いとのことでしたが、今回は比較的空いていたので五人全員でブースを回りました。さてピッチを終えてあとは発表を待つだけなので、僕たちは近くの雰囲気の良いレストランにビールとランチを取りに行きました。食べ終わってあまりにねむく5分くらいその場で寝てしまいました。
16時ごろからいよいよ発表です。ファイナリストのピッチを得て、各プロトコルからプライズを取ったチームの発表が行われました。私たちは本命としていたMina protocolから3rd prize($2000)とPush protocolから少額のprizeを獲得しました。他にもいくつか狙っていたprotocolはあったのですがリソースが足らず、ですが自分達にいいものが作れたので満足でした。(作ったプロダクトの解説は明日の記事で行います。)
さて全ての発表後は片付けとディナーがありそこで少しネットワーキングを行い、アフターパーティにも少し1~2時間ほど顔を出して宿に帰りました。

これにてEth Indiaの振り返りを終わりたいと思います。少々長く、またテクニック的なものは記載していないので全く参考にはならないと思いますが、なんとなくハッカソンてこういう感じで進むんだという感覚を掴んでいただければ幸いです。またハッカソンの立ち回り方はこちらのnoteを大変参考にさせていただきました。
https://note.com/hidetakadesu/archives/2022


最後に
![Something went wrong]()
Verooは、Blockchain技術を活用した「想いの巡るグルメSNSアプリ」です。食に対する熱量、例えばラーメンがめちゃくちゃ好きで年間400杯食べているとか、変態的に具材にこだわった中華料理を作っているなどのような、今まで直接お金にはならなかった食に対する情熱や熱量、その裏側にある想いがトークンを使うことで巡る世界。自分のラーメンに費やす熱量がコミュニティに承認される。自分がほんとにいいと思って作った食べ物がコミュニティで広まる。Verooは単なるSNSアプリではなく、クリエイターたちの想いが紡がれるソーシャルグルメアプリです。

Homepage: https://veroo.xyz/
Discord URL：https://t.co/VoT0gpsflA
Reactのライフサイクルを整理

# はじめに
Reactのライフサイクルについて、脳内整理の為ここに記録しておこうと思います。

# ライフサイクルとは
Reactのコンポーネントが生成されてから消えるまでの一連の過程のことを指します。
|  |  |
|---|---|
|①生成|インスタンス生成される|
|②マウント|インスタンスがDOM 要素にマウントされる|
|③更新|データが更新される|
|④マウント解除|インスタンスのマウントが解除される|
|⑤破壊|インスタンスが破棄される|

Reactにはライフサイクルメソッドが用意されていて、該当するライフサイクルのタイミングで、その処理が呼ばれます。

#### マウント時(Mounting)に呼ばれるメソッド
|メソッド名|説明|
|---|---|
|constructor|Mount前に一番最初に呼ばれる|
|getDerivedFromProps|renderが呼ばれる前にローカルステートの更新があるかどうかを確認する|
|render|仮想DOMを構築する|
|componetDidMount|1回目のrender()が呼ばれた時に1度だけ呼ばれる。外部への通信処理はここで行う|

#### 更新時(Updating)に呼ばれるメソッド
|メソッド名|説明|
|---|---|
|getDerivedStateFromProps|Update時に一番最初に呼ばれる|
|shouldComponentUpdate|コンポーネントの評価と再レンダリングを継続するかどうかを決定|
|render|仮想DOMを構築する|
|getSnapshotBeforeUpdate|レンダリングされた出力がDOMなどにコミットされる直前に呼び出される|
|componentDidUpdate|更新が行われた直後に呼び出される。外部への通信処理はここで行う|

#### マウント解除時(Unmounting)に呼ばれるメソッド
|メソッド名|説明|
|---|---|
|componentWillUnmount|破棄される直前に呼び出される|
仕事で判断に迷ったときの処方箋

仕事に限った話でもないのですが、日常の生活は選択や判断の連続です。
「もうこれしかない」という確かなものばかりなら良いのですが、そんなに都合よくできているわけでもなく、あーでもない、こーでもないと迷うことになります。

考える時間や迷う時間、それはそれで楽しかったりしますが、こと仕事においてはその判断が自分以外の今後をも左右するものだったりすると、足がすくんでしまうようなこともありますよね。

## なぜ迷うのか　5つの要因

僕はこの5つに大別できると思っています。

1. 知識がない
1. 経験がない
1. 情報がない
1. 未来のことである
1. どっちもいい

### 1. 知識がない
この場合は自分だけの問題だったりするので、ある意味単純です。インターネットや本などの文献にあたったり、実際に手を動かしてみたり、あるいはすでに知見を持った人に聞くなどして、判断に必要な知識を手に入れることだと思います。

### 2. 経験がない
はじめて経験することについては、迷いというより不安や恐れに近いものがあるように感じます。とにかく1度経験してしまうことが一番だと思うのですが、それが難しい場合は、何が自分の中で不安なのかを明らかにして、その経験がある人に聞いたり、自分なりに情報を集めて想像力を使いながらシミュレーションをしたり、似たようなことを小さく実際にやってみることで、自分の中に判断軸ができるように思います。

### 3. 情報がない
判断に足る情報が不足している場合は情報を持っている人に聞くしかないので、情報を持っている人を見つけることが最初のポイントになります。誰が持っているのかわからなければ身近な人や上司、信頼できる人に聞きながら辿っていきましょう。1つの事象に対して複数の人から情報を集めると、より俯瞰的な判断ができるように思います。

### 4. 未来のことである
その時が来てみないとわからないというケース。未来のことは誰にもわからないので、今ある情報をもとに仮説を立ててどんなことが起きそうか、何が問題になりそうかをリスクとして認識し、事前に対策できるものであればしておく。そうでないものは、問題が起きた時の対応方法を準備しておく。そのくらいしかできないと思います。あとは落ち着いてその時を迎えましょう。

### 5. どっちも良い
複数の案があってどれも良さそう（あるいはどれも大変...）で選ぶのに迷うケース。この場合は何を優先するかがポイントで、その結果を想像しながら最もやりたいことに近い結果が得られるものを選ぶことになると思います。どれも同じくらいだったら、面白そうな方を選ぶのも良いです。もしかすると選ぶのではなく、いい感じに組み合わせるともっといい結果が得られる「第3の選択肢」があるかもしれません。

## 決めることはパワーがいる
何かを判断して「決める」ということは、他の選択肢をいったん捨てることでもあるので、パワーや勇気のいることだと思うのです。たくさん考えて、悩んで、そうやって決めたことが尊いですし、その結果が望んだものでなかったとしても経験として残ります。

自分が決められるということは楽しいし、自由だとも思います。
日々のお仕事の助けになれば幸いです。
【Angular】Angular CLIでWebフロントを5分で爆速構築する

## 概要
Angular CLI を利用して、Angular アプリケーションを簡単に構築する手順の備忘録。
約5分で Web フロントの構築が完了する。

## 前提

- Angular CLI： v15.0.4
- Angular： v15.0.0

## Angular とは
Angular（アンギュラー）とは、Googleによって作られたフロントエンドWebアプリケーションのフレームワーク。
オープンソースのフレームワークやライブラリとして、同様の領域の技術でよく名前があがるのが「Vue」や「React」であり、たびたび比較記事などが出回ったりしている。

大きな特徴としては、Googleが開発した技術で、多くのプロジェクトでも使用されていること、また、「フルスタックフレームワーク」であり、単独でフロントエンド開発に必要な機能が初めから一通り揃っていることである。
登場して間もない頃は、`.js` ファイルを基本に書く技術だったが、現在では TypeScript（`.ts`）が基本となっている。
![angular_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/b44eebf8-5d2e-a78c-faf6-f55a20044fef.png)

## 手順

Angular CLI をグローバルインストール

```bash
npm install -g @angular/cli
```

新規プロジェクト作成

```bash
# ng new 任意のプロジェクト名
ng new my-angular
```

対話形式で各種設定について質問されます（下記の回答は一例なので、ご自身の都合に合わせてください）

```bash
# 自動補完機能を有効にするか？ 初めて Angular CLI を利用する場合に聞かれる.
? Would you like to enable autocompletion? This will set up your terminal so 
pressing TAB while typing Angular CLI commands will show possible options and 
autocomplete arguments. (Enabling autocompletion will modify configuration files
 in your home directory.) (Y/n)
  # -> Y を入力して Enter キー

# Yes にすると表示される補足情報
Appended `source <(ng completion script)` to `/Users/ユーザ名/.zshrc`. Restart your terminal or run the following to autocomplete `ng` commands:

    source <(ng completion script)

# ルーティング機能を追加するか？
? Would you like to add Angular routing? (y/N) 
  # -> y を入力して Enter キー

# スタイルシート言語に何を使うか？
? Which stylesheet format would you like to use? 
  CSS 
❯ SCSS   [ https://sass-lang.com/documentation/syntax#scss                ] 
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] 
  Less   [ http://lesscss.org     
  # -> SCSS を選択して Enter キー

# 以下の表示がされれば作成完了
✔ Packages installed successfully.
    Directory is already under version control. Skipping initialization of git.
```

### 動作確認

ローカルサーバ起動

```bash
npm run start
```

Webブラウザで `localhost:4200` にアクセスし、以下の様な画面が表示されればOK
![angular_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/ada52fbe-67a4-058e-ee90-06d346c9ebc8.png)

サーバは `Control` ＋ `C` （Windows なら `Ctrl` ＋ `C` ）で停止可能

Angular アプリは以上で初期構築完了！
この後は、画面を追加したりライブラリを追加導入したりして、アプリを拡充していきましょう。

## VScode 拡張機能
AngularのプロジェクトをVisual Studio Code（VScode）で編集しようとすると、以下の拡張機能を推奨されることがあります。こちらはお好みで導入してください。
![angular_extension.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/a1075bb7-5785-f3bf-f9f1-0ff8748a791a.png)
React Hooksとは

# hookとは
[React公式](https://ja.reactjs.org/docs/hooks-intro.html)には以下のように記載されています。
>フック (hook) は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。

そもそもstateって何のことでしょうか、まずはそこから整理していきます。

# stateとは
React ではユーザの動きに合わせて変わる値のことをstateという。
以下の例のように、constructor内でオブジェクトとしてstateを定義します。
定義されたものは、this.state.プロパティ名で設定した値を取得することが可能です。
また、this.setState({プロパティ:設定する値})で、プロパティの値を変更できます。

```jsx
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0 // countプロパティを定義(初期値は0)
    };
  }
  handleClick(){
    // countの値を変更
    this.setState({count:this.state.count+1});
  }
  render() {
    return (
      <div>
        <h1>
          {this.state.count}
        </h1>
        <button onClick={()=>{this.handleClick()}} >+</button>

      </div>
    );
  }
}
```

## useState
hook はstate などの機能を関数コンポーネント内に使用できるようにするための関数です。
先ほどのサンプルではクラス内でstateを使っていましたが、例えば以下のように記述できるということです。
```jsx
import React, { useState } from 'react';

function Example() {
  // countを定義(初期値は0)
  const [count, setCount] = useState(0);

  handleClick(){
    // countの値を変更
    setCount(count + 1);
  }
  return (
    <div>
      <h1>
        {count}
      </h1>
      <button onClick={()=>{this.handleClick()}} >+</button>
    </div>
  );
}
```
useState というhookを使ってcountの値を管理し、値を更新する場合はsetCountを使用します。
hookを使った方が、よりスッキリとしたコードになりました。
これがhookというものです。

## useEffect
useEffectは毎回レンダリング後に、その処理が実行されます。
componentDidMountやcomponentDidUpdateと同じようなものです。
```jsx
import React, { useState, useEffect } from 'react';

function Example() {
  // countを定義(初期値は0)
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  handleClick(){
    // countの値を変更
    setCount(count + 1);
  }
  return (
    <div>
      <h1>
        {count}
      </h1>
      <button onClick={()=>{this.handleClick()}} >+</button>
    </div>
  );
}```
仕事でサーバレスのウェブサイトを作ってしまった話

[さくらインターネット Advent Calendar 2022](https://qiita.com/advent-calendar/2022/sakura) 16日目の記事です。

４度目まして。さくらインターネットで情シスをしている小泉行生(dumixnet)と申します。
今年は仕事でさくらのサービスを全力で使った話を書こうと思います。

# 前置き
2020年から「株主総会」という大イベントの「配信・システム担当」を行なっております。
この2020年から株主総会は配信を行なっており、以前にも[お話](https://qiita.com/dumixnet/items/9a61d56a2e24cd149750)をしたので割愛します。
2022年は「ハイブリッド型株主総会」リアルな会場とは別にインターネット上に「バーチャル会場」を用意し、
株主はオンラインのバーチャル会場でも「議長に質問できたり、議決権を行使できたり」します。

# なんでウェブサイトを作ることになったのか？
ハイブリッド型株主総会では「バーチャル会場」が存在するため、
バーチャル会場のシステムに何かがあった場合には株主にお知らせすることが必要となります。
そのために「バーチャル会場」へ入る前の「クッションサイト」が必要だ！ということになりました。
「クッションサイト」は sakura.ad.jp　のサブドメインを利用して作成し以下のようなことが要件になりました。
- バーチャル会場の開場時間に合わせてサイトをオープンさせ「同意」を得てからバーチャル会場へのリンクを踏ませる
- 会場でトラブルがあった場合、「トラブルの内容を最高速で表示させる」
- 総会が終わって時間になったら「バーチャル会場へのリンクを閉じる」

「超超超超大人気のウェブサイト担当を一人」をこのために拘束するのは難しく、
「自分たちでできるようにしよう！」という話の「技術面」について私に白羽の矢が立ちました…

# 一般的な方法を使おうと思ったら
レンタルサーバーを契約して、必要なHTMLをFTPでアップロードという典型的な手段を取ろうと思い、
レンタルサーバチームに相談を持ちかけたら
@masa23 さんから 「[ワシが育てておいたから](https://blog.masa23.jp/posts/2021/04/15/webaccel-objectstorage/)あとは使うだけだ(意訳)」とURLを頂きました。

さくらの「オブジェクトストレージ」と「ウェブアクセラレーター」を組み合わせると
サーバーなしでウェブサイト作れるの？と思いながら設定をしていくと！？

できました… 普通に完成しました。

@masa23 さんに感謝の念を送りつつ、株主総会のウェブサイトは無事に運用でき、滞りなく終了できました！

# 今回の知見
## バケット名を設定しないといつまで経っても繋がらない

オブジェクトストレージにHTMLファイルをアップする際に設定に困ったところがありました。
サーバ名、アクセスID、シークレットキーを入れたらだいたいアクセスできるはずなので…
いつまでたっても接続エラーで繋がらない。
設定を見直しても、パソコンを再起動しても、無線LANルーターとかONUの再起動をしても繋がらない…
もう「徳が足りない」のかと諦めかけていたところで @chibiegg さんが ヒントをくれました。
「バケット名を設定しないと動かないですよー」
なんだってー！！！ というわけで「設定できそうな部分を全部確認してようやく見つけました。

### 設定する場所は？
CyberDuckなら詳細設定の「パス」
WinSCPなら「高度なサイト設定」の「ディレクトリ」の「リモートディレクトリ」

## ウェブアクセラレーターのキャッシュを削除
ウェブアクセラレーターは「複数のウェブサーバでコンテンツをキャッシュし、負荷を分散して配信する」が本来の役目です。
今回の場合「任意のタイミングでHTMLを更新する」ので、
更新した時には「ウェブアクセラレーター側のキャッシュをクリア」しないとサイトのHTMLが更新されないんです。
HTMLが更新されてないなら「Ctrl+F5」押せば？という話ではないのです。
自分で「キャッシュをクリアしないと新しいHTMLが表示されないのです！！！
リハーサルの際に1回キャッシュをクリアし忘れて、冷や汗をかきました…

「少しクセがあります」が、短期的に使う「静的サイト」ならレンタルサーバーを使わずにサイトが作れます！

## お値段　高いんでしょ？？
今回の場合、利用期間は6月の3週間ほどで、オブジェクトストレージの基本料金(495円)のみの課金！
ウェブアクセラレーターは「無償枠(500GiB)」があり、その枠内で収まりました。
2個のサービスを連携して使ってるから1000円とか2000円、いやもっと高いだろうと思ったんですが…
後で確認したら、オブジェクトストレージの基本料金だけだったのでこんなにできて吸っているタバコ１箱より安いのか！
って驚いてました！

## GitHubにも驚かされた機能があった
さて… 実はこのネタにはもう一個発見がありまして、それはGitHubの機能でした。

HTMLを作る際に、次回以降でも使えるように社内ネットワークにあるGitHub Enterpriseでファイルの管理を行いました。
その際、「テストサイト」にHTMLをアップロードして内容を見てもらう方式だと
「インターネット越しに内容が見えてしまう可能性」がありました。

そこで「どうしたらいいんだろう…
やっぱりレンタルサーバで.htaccess制限かけないとだめかなぁ？ もしくは社内にサーバを建てて…」とぼやいていてところ
またしても @chibiegg さんの神のひと声が！
「GitHubなら[Pages](https://docs.github.com/ja/pages/getting-started-with-github-pages/creating-a-github-pages-site)使ったらええんちゃう?」

これならわざわざサーバを建てずともVPNでの社内接続をするので「外部に漏らさない」という要件はクリアしつつ
HTMLを直してコミットしたらすぐに内容をチェックしてもらえます。
早速設定をして使ってみたところ、とんでも無くスムーズに内容のチェックや修正ができました！

この2つは2022年最大の衝撃でした！

# 最後に
長年情シスをやっていると、いざ技術的なことをしようとした時に
「時代が進んでいて、オールドタイプやりかた」しかできないことがあります。
今回は、さくらのスーパーエンジニアたちが令和最新版の手法を教えてくれたというのを話にしてみました。

最後まで読んで頂いてありがとうございました🙇‍♂️
n進数から10進数への変換・10進数からn進数への変換[日本一分かり易い基本情報・応用情報技術者試験対策]

<h1>n進数から10進数への変換・10進数からn進数への変換</h1>

<p>n進数から10進数への変換・10進数からn進数への変換について、具体例付きで解説していきます。コンピュータや基本情報・応用情報午前問題の基礎となる部分です。</p>


<h3>基数</h3>


コンピュータには、主に２進数が使われているということや、2進数や16進数の数え方については、基礎のため理解しているという前提で話を進める。

ここでは、n進数を10進数へ、n進数を10進数へ変換する方法を説明していく。

<h5>n進数から10進数へ</h5>



2進数1010を10進数へ




ここでn進数から10進数に変換する際の公式的なものを紹介。


|| 1000の位 | 100の位 |10の位 | 1の位 |.|小数第一位|小数第二位|少数第三位|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|n進数|   1|   0|   1| 0  |.|0|0|0|
|n進数への乗数| n³ |  n² |   n¹ |   n⁰||n∖1|n²∖1|n³∖1|


n進数を10進数へ変換する際は、上の表のように桁に合わせて数字をかけていき、それぞれの積を全て足し合わせる。そうするとその数は10進数になっている。

したがってこの問題では

0(1の位)*2⁰+1(10の位)*2¹+0(100の位)*2²+1(1000の位)*2³
=
=0+2+0+8=10
=

となる。よって、2進数1010を10進数へ変換すると10になる。



表ではn進数への乗数をn⁰などとしているように、8進数の場合はnに8が入る。その後は同じように積を求め、全て足し合わせれば10進数の値が出る。

また小数点も出てくる値では、表のように分数をかける必要がある。その後積を求めて足し合わせていくことは同じだが、小数部と整数部は分けて計算しなければならない。例えば、整数部で14、小数部で2が出た場合、10進数に直すときは

14.2
=

となる。

<h5>10進数からn進数へ</h5>

10進数をn進数へ変換する方法は、二通りあるが、ここでは一通りのみ紹介する。


10進数11.25を2進数へ

10進数からn進数への変換も、整数部と小数部を分けて考える。
10進数からn進数へ変換する際の公式的なものはこれ。(整数部)
ここで、aは最初の10進数、a,b,cは商を表し、d,e,fはあまりを表す。

x ÷ n=a・・・d
=a  ÷ n=b・・・e
=b  ÷ n=c・・・f
=

このとき、10進数xを2進数に変換するとfedとなる。(かけている訳ではなく、隣り合わせで書いているだけ。 101 などのような感じ。)

つまり、最初の10進数を、変換する進数で商が0になるまで割り続け、あまりを最後から順に書いたものがn進数、ということである。

続いて、小数部のn進数の求め方。
ここで、xは最初の10進数、a,b,cは積を表す。

x*×n=a
a*×n=b
b*×n=c
c*×n=・・・(積が1になったら終了)
=

このとき、10進数xを2進数に変換するとabcとなる。
こちらは、2進数にする際は最初から順に書いていく。また、積が1を超えた場合、nにかける際は整数部を0として計算し、2進数で表す際はそのまま1をかく。

どういうことか詳しく説明。

例えば、10進数0.375を2進数に直す際、

0.375*×2=0.75
0.75*×2=1.5
=

式の途中で、積が1を超える。

このとき次は、

1.5*×2=   ではなく
0.5*×2= で計算する。
=

したがって、まとめると次のようになる。


0.375*×2=0.75
0.75*×2=1.5
0.5×2=1
=

このとき、2進数に直す際はそのまま積の値を取り出すので、10進数0.375を2進数に直すと、0.011になる。ということである。


それでは続いて、10進数11.25を2進数へ変換していく。

まず整数部から求める。

11÷2=5・・・1
5÷2=2・・・1
2÷2=1・・・0
1÷2=0・・・1
=
より、1011である。

小数部は、

0.25×2=0.5
0.5×2=1
=

したがって、0.01である。

小数部と整数部を足し合わせれば良いので、10進数11.25を2進数に変換すると

1011.01
=
となる。

n進数の変換についてはここまで。2進数から8進数に、16進数から2進数にする方法などもあるが、必ず理解しておかなければならない訳ではない。n進数から10進数、10進数からn進数へ変換する方法さえ知っていれば、計算量が増えるだけで解くことは出来る。


***

Twitterフォローよろしくお願いします

***
ViteでReact+Tailwindの開発環境のセットアップ

最近のWeb開発ではレガシーツールチェーンの技術的負債が問題になってきており、
最新のWeb技術を使用したモダンツールチェーンが開発されてきています。  
今回はTailwindでも推奨されているViteを使用したプロジェクトセットアップの方法を紹介します。  

## Viteとは
### 概要
高速に動作するように設計された、Webフロントエンドのためのビルドツールです。  
公式サイトでは以下のように説明されています。  
> Vite（フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音）は、現代の Web プロジェクトのために、より速く無駄のない開発体験を提供することを目的としたビルドツールです。

Vue.jsの作者のEvan You氏によって開発されましたが、Vue.jsだけではなく、ReactやSvelteなどでも利用できます。  
主な機能として、Webプロジェクトモジュールのバンドルと開発サーバーの提供をします。  


### 従来のツールとの違い
従来のバンドラではプロジェクトファイルが更新されると全てのバンドルを再構築してWebページをリロードする必要がありました。  

インメモリで更新箇所のモジュールツリーのみを更新したり、HMRなどで更新箇所のみのホットリプレースをサポートして更新速度の改善を行ったものもありますが、実際はモジュール数が増えるにつれ速度低下は避けられませんでした。  

ViteではES6で策定された、ネイティブESMを使用してソースコードを配信します。  
Viteは必要に応じてソースコードを変換して提供するのみです。  
また、ネイティブESM上でのHMRにも対応しています。  
そのほかにもブラウザキャッシュの積極的な利用などで、徹底的に速度を追及した設計になっています。  

## プロジェクトのセットアップ
前置きが長くなりましたが、Viteの紹介は以上です。  
ここからは、Viteを使用してReactプロジェクトをセットアップしていきます。

今回はパッケージマネーシャーにnpmを使用します。　　
### プロジェクトの作成
以下のコマンドを実行します。  
``` 
npm create vite@latest
```

その後は対話形式でプロジェクトの設定ができます。  
公式サイトでも、あとは画面に従ってくださいとしか解説がないほど分かりやすいです。  
以下、Reactの例


``` 
Need to install the following packages:
  create-vite@4.0.0
Ok to proceed? (y)
```
create-viteをインストールするか

``` 
? Project name: » vite-project
```

プロジェクト名  
今回は`vite-project`  

``` 
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
    Vue
>   React
    Preact
    Lit
    Svelte
    Others
```
フレームワークを選択  
今回は`React`  

``` 
? Select a variant: » - Use arrow-keys. Return to submit.
>   JavaScript
    TypeScript
    JavaScript + SWC
    TypeScript + SWC
```
JSもしくはTSの選択  
今回は`JavaScript`を選択  
SWCはrustで作成されたJavaScriptコンパイラでBabelより高速らしい  

以下が表示されたらプロジェクトのセットアップが完了  
```
Done. Now run:

  cd vite-project
  npm install
  npm run dev
```

上記のコマンドを実行すれば開発サーバーが起動するので表示されたアドレスにアクセスすれば初期画面が表示されます。  

### Tailwindのインストール
あとはTailwindのインストールです。  
以下のコマンドを実行します。  
``` 
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

プロジェクトディレクトリに`tailwind.config.cjs`が作成されるので、
以下のように編集します。  


```diff  
/** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [],
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
   theme: {
     extend: {},
   }, 
```

`index.css`に以下を追加  
``` css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

以上でプロジェクトのセットアップが完了しました。  
Tailwind v3以上だとデフォルトでJITコンパイルされるのでコンパイルの必要はありません。
言語処理100本ノックにElixirでチャレンジ！ ~ 30. 形態素解析結果の読み込み ~ 準備編

この記事は「[Elixir Advent Calendar 2022](https://qiita.com/advent-calendar/2022/elixir)」4日目の記事です
東京にいるけどfukuokaexのYOSUKEです。

以前、言語処理100本ノックをElixirでやってみるを途中までやってまして、
[言語処理100本ノックにElixirでチャレンジ！　１−４まで](https://qiita.com/Yoosuke/items/46c057f9f44f08c9dfce)
[言語処理100本ノックにElixirでチャレンジ！　5](https://qiita.com/Yoosuke/items/f7f47bedf49c10df6c4e)
で、実は記事にはしてないけど第3章までは終わってたので、今回久々に第4章から始めてみよう。

ちなみに、私はこの領域はからっきしなので、最近ElixirコミュニティでML系の記事がいっぱい上がってるので勉強させてもらおうっと。

## 第4章: 形態素解析
### 30. 形態素解析結果の読み込み

https://nlp100.github.io/ja/ch04.html#30-%E5%BD%A2%E6%85%8B%E7%B4%A0%E8%A7%A3%E6%9E%90%E7%B5%90%E6%9E%9C%E3%81%AE%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF

形態素解析結果（neko.txt.mecab）を読み込むプログラムを実装せよ．ただし，各形態素は表層形（surface），基本形（base），品詞（pos），品詞細分類1（pos1）をキーとするマッピング型に格納し，1文を形態素（マッピング型）のリストとして表現せよ．第4章の残りの問題では，ここで作ったプログラムを活用せよ．

まぁ、よくわからんけど、

夏目漱石の小説『吾輩は猫である』の文章（neko.txt）をMeCabを使って形態素解析し，その結果をneko.txt.mecabというファイルに保存せよ．このファイルを用いて，以下の問に対応するプログラムを実装せよ．
と書かれてたので、早速、こちらの準備をしようかなと。今回の記事は準備までで終わりそう。

まずは、Mecabをインストールするところから。という事で私はmac環境なので brew install でインストールしました。

```
$ brew install mecab mecab-ipadic
```

で、こんな有名なツールなら誰かモジュール作ってるだろう？と検索したら早速見つかったので、それを実装してみます。

https://github.com/tex2e/mecab-elixir

まずはmix プロジェクトを作成します。

```elixir
mix new handred_knok 
```
早速モジュールを追加してみます。
```elixir
  defp deps do
    [
      {:mecab, "~> 1.0"}
    ]
  end
```

早速試しに動かしてみます。

```elixir 
 Mecab.parse("今日は晴れです")
[
  %{
    "conjugation" => "",
    "conjugation_form" => "",
    "lexical_form" => "今日",
    "part_of_speech" => "名詞",
    "part_of_speech_subcategory1" => "副詞可能",
    "part_of_speech_subcategory2" => "",
    "part_of_speech_subcategory3" => "",
    "pronunciation" => "キョー",
    "surface_form" => "今日",
    "yomi" => "キョウ"
  },
  %{
    "conjugation" => "",
    "conjugation_form" => "",
    "lexical_form" => "は",
    "part_of_speech" => "助詞",
    "part_of_speech_subcategory1" => "係助詞",
    "part_of_speech_subcategory2" => "",
    "part_of_speech_subcategory3" => "",
    "pronunciation" => "ワ",
    "surface_form" => "は",
    "yomi" => "ハ"
  },
  %{
    "conjugation" => "",
    "conjugation_form" => "",
    "lexical_form" => "晴れ",
    "part_of_speech" => "名詞",
    "part_of_speech_subcategory1" => "一般",
    "part_of_speech_subcategory2" => "",
    "part_of_speech_subcategory3" => "",
    "pronunciation" => "ハレ",
    "surface_form" => "晴れ",
    "yomi" => "ハレ"
  },
  %{
    "conjugation" => "基本形",
    "conjugation_form" => "特殊・デス",
    "lexical_form" => "です",
    "part_of_speech" => "助動詞",
    "part_of_speech_subcategory1" => "",
    "part_of_speech_subcategory2" => "",
    "part_of_speech_subcategory3" => "",
    "pronunciation" => "デス",
    "surface_form" => "です",
    "yomi" => "デス" 
  },
  %{
    "conjugation" => "",
    "conjugation_form" => "",
    "lexical_form" => "",
    "part_of_speech" => "",
    "part_of_speech_subcategory1" => "",
    "part_of_speech_subcategory2" => "",
    "part_of_speech_subcategory3" => "",
    "pronunciation" => "",
    "surface_form" => "EOS",
    "yomi" => ""
  }
]
```

お、なんか良さげ。

という事で、この続きは長くなるので次回にします。

簡単Elixirシリーズじゃ無いけど、基本的に小ネタの記事はサクッとがコンセプトで書いていきます。w
【図解】 型化したものをどうやって運用定着させるか

# はじめに
リンクアンドモチベーションでCS Opsに所属しているizumiです。
サービスフローの設計や、コンテンツ拡張、CSイネーブルメントが主な担当領域です。

カスタマーサクセスの立場から見ると、**プロダクトとは究極の型化**だと思います。プロダクト化するというのは本当にすごいことだといつも感心しています。私もCS Opsとして無数の型化（私の場合は資料やWEBサイトでしたが）をしてきましたが、それらがたいして使われることなく葬り去られる…という苦い経験を数えきれない程してきました。きっと型化を推進する役割の方なら、「あるある」とうなずいていただけるのではないでしょうか。

**どうしたら型化したものを運用定着させることができるのか。**

試行錯誤した結果、少しずつポイントが見えてきたので整理しました。エンジニアの方にもきっと役立つエッセンスをお伝えできると思いますので、ぜひ最後までお付き合いください。


# 「型化」と同じくらい「周知・運用」が大事
弊社サービスのモチベーションクラウドは、組織状態を「診断」し、その診断結果をもとに「改善」策を講じるのですが、カスタマーサクセスは担当するユーザー企業に伴走しながらその「診断」「改善」のサイクルを回すお手伝いをしています。

このCSのサービスクオリティを標準化するために、私が所属するCS Opsでは様々な「型化」を進めているわけですが、いくらやってもカスタマイズした資料が出回るということが起こっていたのが現実でした。（本当に何度やっても、です。）

試行錯誤する中で見えてきたのは、「型化」そのものが問題ではないのかも知れないということ。

と言うのも、社内に定着させるためには、**「型化」→「周知」→「運用」** というステップが必要で、この「周知」や「運用」によって、定着の度合いが変わりそうということです。


# 「周知」のポイント
「周知」の際のポイントは、いかにモチベーションを高めるかだと考えます。具体的には、モチベーションの公式というフレームを活用します。

**モチベーションの高さ ＝ 目標の魅力 × 達成可能性 × 危機感**


まず「目標の魅力」について。

![スライド0.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/894007/da493c14-9116-55fd-5882-4e74db480668.jpeg)


大事なことは、**「意義」を伝える**ということ。「意義」というのは、「目的」の先にあるものです。「目的」までは伝えていることが多いと思いますが、その先まで訴求できるかが勝負になります。

次に「達成可能性」。

![スライド1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/894007/5bab858b-6241-d74e-9da0-40e051f224dd.jpeg)


型化の手順として、プロセスやCSとしてのあるべき行動を規定し、それをCSのスキルマップに落とすというところまではよくあるかも知れません。今回はさらに踏み込んで、そのポイントを踏まえた「ロールプレイング」を実施しました。CS役・顧客役それぞれに必要な情報を渡し、模擬アポイントをやってもらうというものですが、やり方を伝えるだけでなく、**実際に体感させる**ことで理解度が大きく向上しました。

最後に、「危機感」。

![スライド2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/894007/f57d708b-c5e2-7025-0396-847dceb072a4.jpeg)

**キーパーソンから言ってもらう**ということをしたのですが、このキーパーソンは必ずしも偉い人とは限らないということがポイントです。案件への理解が深く、メンバーからの信頼もあつい。またある程度、厳格性があって部門内への影響力があるという点を考慮して人選することが重要だと思います。

弊社のケースでは、あえて部門長ではなく、役職としてはその下のグループマネジャー（GM）の方がそれにふさわしいと考えて、実行しました。


# 「運用」のポイント
「運用」では意識せずともやってしまう状態を作ることが大切だと思いますが、その操作変数として「指標」と「管理方法」の2つがあります。管理方法はさらに2つに分かれ、「ダッシュボード」と「会議体」に分解できます。

**運用 ＝ 指標 × 管理方法（ダッシュボード・会議体）**

まずは、「指標」について。

![スライド3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/894007/d78d8c9a-0a49-ad62-fa4f-139fdf5f3414.jpeg)


大切なのはとにかく**シンプル化**だと思います。あるあるだと思うのですが、CSの指標は、ともするとあれもやった方がいい、これもやった方がいいということで、どんどん増えていく傾向があります。しかし、ただ増やすと、優先順位がつけられず埋もれていくということが起きがち。そこで指標は追加するのではなく、むしろ減らすイメージで、いくつかある指標を統合するのが大切だと思います。

さらにその統合した指標を、CSの評価と連動させれたら、CSがアクションする上でのポジティブな要素になりさらに効果が高まるでしょう。

続いて、「管理方法」。

![スライド4.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/894007/183facc9-920c-f68f-e8cc-6a587df5f906.jpeg)

多くのCS組織で、スプレッドシートやセールスフォースの画面を見ながら、
朝会などの会議体を運営されていると思います。こうした**既存のダッシュボードや会議体に組み込む**ことで運用に乗りやすくなると考えます。

また、「競わせる」の方は、いたずらに競争を煽るという意味ではなく、
ゲームっぽい仕立てにするというニュアンスです。例えば一定の基準をクリアしたCSには認定証を渡すということをやるなどして、楽しみながら競い合うことを促せれば、運用に乗りやすくなります。


# さいごに
「型化」→「周知」→「運用」のポイントを整理すると上記の通りですが、そんなに簡単にはいかないですよね...。1度言ったからといってすぐに変わるものではないということも痛感しています。ですので、型化をする人は、あきらめずに何度も何度も言い続けて**文化を作っていくことが大切**だと改めて。カスタマーサクセス文脈の記事でしたが、エンジニアのみなさんにも役立つ内容があれば幸いです。
反射型液晶スマートウォッチとFOSS管理アプリのご紹介

# 初めに

毎年 Advent Calendar では自分のガジェットを紹介している @aRyoKuroda です。
今年は my new gear... なものではないですが、自分が所有しているスマートウォッチ「Amazfit Bip」と、FOSSアプリ「GadgetBridge」について書きたいと思います。

# Amazfit Bip（反射型液晶スマートウォッチ）とは？

[Amazfit Bip](https://www.tjc-jp.com/xiaomi/amazfit_bip/index.html)（以下、Bip）とは、旧 Huani社（現 Zepp Health社）が発売していたスマートウォッチで、Amazfitとはブランド名です。Bipシリーズはいくつか発売されていますが、このうち初代 Bip と Bit S のみが「反射型液晶」を採用しています。

反射型液晶とは、バックライトを使わず周囲の環境光で表示できる液晶のことで、電池持ちがとてもいいです。昔の電子辞書だったり、スマートウォッチで言えば Pebble にも採用されていました。常時表示がデフォルトである反面、表示できる色が8色（Bip S は64色）とチープな見え方ではあります。しかし驚異的な電池持ちや、日光下での見えやすさは他のスマートウォッチにはない利点であり、購入から3年経った今でも1〜2週間は充電要らずで使用しています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42210/a466d71d-8b43-e63d-9900-a71e69d89442.png" width="360" alt="直射日光下でもバックライトなしで常時表示する図"/>

通常のスマートウォッチもそうであるように、Bipにも専用のアプリ（[Zepp（formerly Amazfit）](https://play.google.com/store/apps/details?id=com.huami.watch.hmwatchmanager)）があり、私もこちらを使用していました。しかし最近、ペアリングしているスマホを修理に出す間に別のアプリを使ってみたところなかなかよかったため、こちらもご紹介します。

# GadgetBridge

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42210/a280b6b1-0683-9a24-5998-5fe9eab5e607.png" width="50%" />

[GadgetBridge](https://gadgetbridge.org/) は、Amazfit や Pebble などのスマートウォッチ・スマートバンドを企業のアプリなしで動かすために開発されているオープンソースアプリ。Google Play ストアではなく、FOSS アプリを配信している F-Droid にて配布されています。

使用方法や対象ガジェットの一覧等は Wiki にて公開されており、基本的にはこちらをご覧いただければ使い方はわかるようになっています。ガジェットの種類によっては一時的に企業アプリを使用する等の動作が必要なようですが、Bipは特にそういった動作は要らず、 GadgetBridge アプリからペアリングするだけで使用できました。

## 利点

スマートウォッチの使い方は人それぞれだとは思いますが、私の用途範囲ではありますが、企業のアプリを使っている時と比べても遜色ない使いごごちでした。

例えば、スマホから通知を受け取る、睡眠時間を測る、手元でタイマーをセットする……といった基本的な操作は網羅されています。

Bipには天気情報を取得・表示する機能があるのですが、これは別アプリ（[QuickWeather](https://f-droid.org/packages/com.ominous.quickweather/)）を入れることで解決しました。ただし、このアプリには別途 OpenWeather API を取得しておく必要はあります。

また、Bipは有志が作成した文字盤がネット上で公開されているのですが、これも GadgetBridge からファイルをインストールすることで反映できました。私のお気に入りは C○SIO 風ウォッチフェイスです（以前はチプカシ派だったため）。

## 欠点

欠点（でもあり利点）は、まずクラウドによる管理や同期が取れないことです。Zepp社のアプリでは独自のアカウントで管理がされているほか、Google Fitへの同期機能もありました。ただ、むやみに個人情報を渡したくない人にとっては利点ではあります。

## その他サードパーティアプリについて

Bip（というか Amazfit や Mi Band系スマートウォッチ）はサードパーティアプリが比較的豊富で、Google Play ストアにも「[Notify for Amazfit & Zepp](https://play.google.com/store/apps/details?id=com.mc.amazfit1)」や「[Tools & Amazfit](https://play.google.com/store/apps/details?id=cz.zdenekhorak.amazfittools)」などの代替アプリがあります。私はどちらも課金して使ったことがあり、特に前者はZepp社アプリよりもきめ細かいカスタマイズが可能でした。

特に、Bipを使う上で悩ましいのがフォントの問題です。Bipが日本語に対応する以前、サードパーティアプリを使ってビットマップフォント（16x16！）をBipに入れることで、日本語表示を行う試みがありました。

その後公式で日本語対応がされたものの、そのフォントが「水」と「木」がほとんど同じなど癖の強いフォントであり、同時に公式アプリと同期すると純正フォントに上書きされてしまうようになってしまいました。

この件についてはサードパーティアプリを使うことで回避され、それは GadgetBridge も同様ではあるのですが、GadgetBridge ではカスタムしたフォントを入れることができなかったため一旦「Notify」で入れて使っています。

# 未来へ

Bip は今は販売されていないものの公式アプリでサポートがされているため、わざわざ別のアプリを使う必要はないのかも知れません。ただ、ユーザとしては自分の用途や主義に合わせてアプリを選べた方が幸せではないでしょうか。

明日の記事は @Shunya-Otsuki さんです。
【GASの小ネタ】フォーム内アイテムの種別が混在しているときに、アイテムタイプに応じたas～メソッドを呼び出す

Google Forms内に、テキストボックス（[TextItem](https://developers.google.com/apps-script/reference/forms/text-item)）、単一選択形式のラジオボタン（[CheckboxItem](https://developers.google.com/apps-script/reference/forms/checkbox-item)）、複数選択形式のチェックボックス（[MultipleChoiceItem](https://developers.google.com/apps-script/reference/forms/multiple-choice-item)）などの様々なアイテムが混在している場合、
後からGoogle Apps Scriptで正解や点数、フィードバックなどの情報を参照したり変更しようとするときに躓くかもしれません。
アイテム情報を参照・編集するにはまず `asTextItem()`　`asCheckboxItem()`　`asMultipleChoiceItem()` などによってアイテムタイプごとのオブジェクトを取得しないといけないのですが、
事前にアイテムタイプがわかっていないとどのメソッドを呼び出せば良いのかわからないためです。

すべてのアイテムタイプのインターフェースである[Item](https://developers.google.com/apps-script/reference/forms/item)インターフェースにはタイトルなどの基本的な情報を取得するメソッドしか定義されていませんし・・・

そこで、まずアイテムタイプを取得し、それをメソッド名に変換する作業が必要です。

```javascript
  const form = FormApp.openById('フォームID');
  const items = form.getItems();
  items.forEach(item => {
    // アイテムタイプの取得
    const itemType = item.getType().name();
    // アッパースネークケースをアッパーキャメルケースに変換
    const itemTypeCamel = itemType.split('_').map(
        word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
    ).join('');
    // as～メソッド名を生成し、各アイテムのオブジェクトを取得
    const quizItem = item[`as${itemTypeCamel}Item`]();
    // 点数の取得
    console.log(quizItem.getPoints());
  });
```
まず、`getType()` でアイテムタイプを取得します。
戻り値はアッパースネークケースのアイテムタイプです。（`MULTIPLE_CHOICE`など）
[アイテムタイプ一覧](https://developers.google.com/apps-script/reference/forms/item-type)

これをアンダースコアで分割し、各文字列を先頭大文字、以降小文字に変換したうえで再結合し、
アッパーキャメルケースに変換します。（`MULTIPLE_CHOICE` → `MultipleChoice`）

あとは`as～Item`の間に埋め込んであげれば、
各アイテムタイプ固有のメソッド（上記例では`getPoints()`）が使えるようになります。
（この形でメソッドを呼び出すとコード補完が効かないのでメソッド名の候補は出てきません）


うーん、無理やり感がすごい。
もっとスマートな方法があれば教えてください！
RubyonRailsチュートリアル：実践メモ【第一章】

<br>
<b>Ruby on Rails チュートリアル</b>(Webサービス開発が学べる学習サービス)に従って、MVCフレームワークアプリケーションを作成していく。<br><br>

**使用ツール** ：
AWS Cloud９
## ルートの設定方法
**Railsのルーティングファイル**を開き、controller_name(コントローラ名)と、action_name(アクション名)を記載する。
※Railsのルーティングファイル=config/routes.rb

↓↓↓ルーティングの文法形式
root "controller_name#action_name"

実際に当てはめると、
`app/controllers/application_controller.rb`
なので、controller_name(コントローラ名)は**application**

```ruby:qiita.rb
class ApplicationController < ActionController::Base

  def hello
    render html: "hello, world!"
  end
end
```
なので、action_name(アクション名)は**hello**

root "application#hello"
となる。
<br>

参照：RubyonRailsチュートリアル
ダウンロードサイトを知ろう！

こんにちは！ 

実際にVantageにクエリーを投入するにはクエリーを書いてVantageにポストすることができるSQLクライアントが必要です。テラデータではマルチ機能を持ったTeradata Studioとクエリー実行に特化したStudio Expressを用意しており、ダウンロードサイトでいつでも入手いただけるようになっています。
今日はそのダウンロードサイトについて紹介します。

# テラデータのダウンロードサイト
テラデータが提供するVantageユーザー向けソフトウェアは下記のダウンロードサイトで提供しています。

[テラデータのダウンロードサイト](https://download.teradata.com/)

ここにアクセスするとこんなページが開きます。

![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742714/f4c695d0-0fcf-c45a-e8ba-33abdcd300df.png)

これがテラデータが提供するダウンロードサイトです。

# ユーザー登録しよう
ソフトウェアのダウンロードを行うためにはユーザー登録が必要になりますのでまず登録しちゃいましょう。

右上に表示されている「Registration」をクリックすると次のようなポップアップが開きます。
必要なことを入力し「CREATE NEW ACCOUNT」をクリックします。

![画像2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742714/dc586616-f47c-b060-9bd8-ca62e07e9bbb.png)

ここから先は画面の指示に従って進めてください。

# ページの構成
パージを下にスクロールするとまず現れるのはよくダウンロードされるものへのダイレクトなリンクです。

![画像3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742714/84529170-d8a9-95c2-8192-91f540abc696.png)

この記事シリーズで使用するツールもここからダウンロードすることができます。
さらに下にスクロールすると

![画像6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742714/17cd727b-8e1d-aab6-1de2-5b02373c0bed.png)

ダウンロード可能なすべてのソフトウェアへのリンクメニューがページ右側に登場します。
また直近にポストされたソフトウェアの情報も提供しています。

# ソフトウェアのダウンロード
ダウンロードしたいソフトウェアのリンクをクリックするとこのようなページへと遷移します。

あなたが使用する環境のOSバージョンやソフトウェアのバージョンを選択し（初めてのインストールでは最新バージョンで問題ありません）ダウンロードしてください。

![画像4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742714/7f951c47-d727-579c-8deb-aa0d89b59a5a.png)

ちなみに先ほど「ユーザー登録しないとダウンロードできない」ということを書きましたが、ログインしないで同じページに飛ぶと、こんな感じで表示されます。

![画像5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742714/6c480c99-c35e-f59b-890a-5359d2f4ad83.png)

「You must login」がでたら「login」の文字をクリックしてログインしてくださいね！

# あとがき
このサイトでユーザーが利用する類のソフトウェアは全てダウンロードできると思います。
さまざまなソフトウェアが提供されていますのでぜひいろいろ覗いてみてください！

#### Teradata Vantageへのお問合せ
[Teradata Vantage へのお問合せ](https://www.teradata.jp/About-Us/Contact)
Git Hub 最初の手順

---
Git Hubの最初のpushまでの手順
---

1.まずホームディレクトリに移動↓
```
cd ~/
```

2.Git Hubに登録する鍵を生成↓
```
ssh-keygen
```
3.鍵が収納されているディレクトリがあるか確認(id_rsa.pubがあればOK)↓
```
ls ~/.ssh
```
4.鍵の内容を表示させる↓
```
cat ~/.ssh/id_rsa.pub
```
5.表示された鍵をコピー
6.コピーした鍵をGit HubのSettingのところから登録
7.現環境でgitが使えるようにする↓

```
git init
```
8.mainブランチを作成↓

```
git branch -M main
```
9.Git Hubにあげたい情報をセーブ↓(.は全てのデータという意味)↓
```
git add .
```
10.commitして任意のメッセージを入力("finish"など)↓
```
git commit -m "任意のコメント"
```
11.Git Hubのリモートリポジトリを登録(どのリポジトリに載せるかを決める)↓
```
git remote add origin リモートリポジトリURL(Httpsの方のURL)
```
12.最後、GitHubに git add . でセーブした情報を送信↓
```
git push origin main(ブランチ名)
```

以上です。適当な説明ですみません。
laravel ログイン関連 URL変更

●laravelのログイン機能を使うとデフォルトでURLが決められている。
・ログイン・・・/login
・新規登録・・・/register　など

●上記のURLを変更する方法は以下の通り
1.「プロジェクトフォルダ」->vendor->laravel->framework->src->Illuminate->Routing->Router.phpを開く
2.auth()メソッドを探す。
3.書き換える。
修正前
```
    public function auth()
    {
        // Authentication Routes...
        $this->get('login', 'Auth\LoginController@showLoginForm')->name('login');
        $this->post('login', 'Auth\LoginController@login');
        $this->post('logout', 'Auth\LoginController@logout')->name('logout');

        // Registration Routes...
        $this->get('register', 'Auth\RegisterController@showRegistrationForm')->name('register');
        $this->post('register', 'Auth\RegisterController@register');

        // Password Reset Routes...
        $this->get('password/reset', 'Auth\ForgotPasswordController@showLinkRequestForm')->name('password.request');
        $this->post('password/email', 'Auth\ForgotPasswordController@sendResetLinkEmail')->name('password.email');
        $this->get('password/reset/{token}', 'Auth\ResetPasswordController@showResetForm')->name('password.reset');
        $this->post('password/reset', 'Auth\ResetPasswordController@reset');
    }
```
修正後
```
    public function auth()
    {
        // Authentication Routes...
        $this->get('プロジェクト名など/login', 'Auth\LoginController@showLoginForm')->name('login');
        $this->post('プロジェクト名など/login', 'Auth\LoginController@login');
        $this->post('プロジェクト名など/logout', 'Auth\LoginController@logout')->name('logout');

        // Registration Routes...
        $this->get('プロジェクト名など/register', 'Auth\RegisterController@showRegistrationForm')->name('register');
        $this->post('プロジェクト名など/register', 'Auth\RegisterController@register');

        // Password Reset Routes...
        $this->get('プロジェクト名など/password/reset', 'Auth\ForgotPasswordController@showLinkRequestForm')->name('password.request');
        $this->post('プロジェクト名など/password/email', 'Auth\ForgotPasswordController@sendResetLinkEmail')->name('password.email');
        $this->get('プロジェクト名など/password/reset/{token}', 'Auth\ResetPasswordController@showResetForm')->name('password.reset');
        $this->post('プロジェクト名など/password/reset', 'Auth\ResetPasswordController@reset');
    }
```
これで
「プロジェクト名など/〇〇〇」でアクセスできる。

●参考
https://reffect.co.jp/laravel/laravel-authentification-by-code-base
PowerShell フォルダ内の最新ファイルをtailする

## 毎回ファイル名を指定するのが面倒！

PowerShellでtailするのは有名なので調べればすぐ出てきます。まあこんなやつ。
```PS1:ログファイルをTailするやつ
Get-Content -Path log-file_20221207.log -Wait -Encoding default -Tail 1000
```
ログファイルって1日毎に切り替わったりすることが多いのでフォルダ内で最新ファイル名を取得してTailさせる。拡張子が.logのファイルを対象としています。
```PS1:フォルダ内の最新ログファイルをTailする
Get-Content -Path (Get-ChildItem . -Filter *.log | Sort-Object LastWriteTime -Descending)[0].Name -Wait -Encoding default -Tail 1000
```
GA4のデータをLooker Studio（旧Data Portal）で可視化してみた

# はじめに🍎

こんにちは、CI部のりんご娘（仮名）です。
いよいよ冬も本格化、クリスマスまであと10日、今年もあと16日…（震え、凍え、くしゃみ）

今回、私が書いているこの記事は
[NI+C AdventCalendar GCP/GWS Team 2022 Advent Calendar 2022](https://qiita.com/advent-calendar/2022/niandc_teamgcp)
の15目の記事となります。

今年に入ってGoogle Analythics4（以下GA4）について学ばせていただく機会があり、
### 「GA4で集めたデータをどのようにアウトプットしようか」
という議論が発生しました。


結論、今回はひとまずGA4上でレポートを作成するのみになりましたが
**実際にData Portalで可視化するとしたらどのような手順になるのか**
確認しておきたいと思いました。あと、もちろんその見やすさも。

ということで、
Googleがデモとして提供しているデータを用いてさっそく可視化してみたいと思います。

**手順参考（公式）** 

https://support.google.com/looker-studio/answer/9171315?hl=ja&ref_topic=6267740#zippy=%2Ca%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%81%AE%E3%82%A2%E3%83%8A%E3%83%AA%E3%83%86%E3%82%A3%E3%82%AF%E3%82%B9-%E3%83%87%E3%83%BC%E3%82%BF%E3%81%A8%E6%8E%A5%E7%B6%9A%E3%81%99%E3%82%8B

::: note
2022年10月11日をもって従来のデータポータルは Looker Studioになったそうです。
よって以下Looker Studioといたします。詳しくは[こちら。](https://support.google.com/looker-studio/answer/11521624?hl=ja&ref_topic=6267740#Oct-11-2022)
:::



# GA4とLooker Studioをサクッと連携🚀
### 1.  新しい「レポート」を作成
Looker Studioを開いて、左上の作成からレポートを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392918/9816fa2e-9a02-d58e-da46-2703650d1b79.png)

### 2. 「データのレポートへの追加」パネルで「マイ データソース」をクリック
レポートを作成すると、自動的にデータの連携元を尋ねてくれます。

### 3. 「Sample」Google Analytics Data データソースを選択
他にも色々Sampleがありますが、今回は目的のGA4データを選択して追加。
（ポップアップの確認が出るので再度「レポートに追加」）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392918/7ccab194-2fac-d524-6ba1-b5249c54c81c.png)

### 4. データソースがレポートに追加され表が表示される
なんかめっちゃあっさりしたテーブルが登場。
とりあえずデータ連携自体はたった4ステップ、簡単ですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392918/5ac05abd-2a42-cca6-4421-6d7d7f8416c3.png)


# GA4とLooker Studioの比較📊
試しにGA4でおすすめされるレポートと同様のレポートを作成してみました。
サイトに訪れた新規ユーザー × 国別 × 7日間のマップです。
（※比較している元データが異なると思われます。数値は異なりますがご了承ください）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392918/2fa9763e-8c48-6a55-2878-3ee4fa260430.png)


地図上にカーソルを合わせると「国名、数値」が表示されるのはどちらも同じでした。
GA4のほうがなんとなくスマートな地図＆変化率が見れる印象。

ただし、**GA4**のグラフや図は基本的にすべて**青色ベースで表現され変更ができません。**

反対に**Looker StudioではGoogleスライドのように「テーマとレイアウト」が準備**されており
レポートのイメージに沿った雰囲気に**カスタマイズ**できます。
また、そのままGoogleマップに遷移できるのも活用する人にとっては便利なのではないでしょうか。
実際のGoogleマップ同様に拡大して詳細な地域別でみられるのもよかったです。

加えて、GA4ではあくまでもサイトから収集したデータの分析・可視化が対象ですが
Looker Studioにデータを連携することで
他のBigQueryやスプレッドシートに入れた**ほかデータとかけ併せたり、同時に見れる**のは強みだと思います。

# まとめ💡
とてもざっくりでしたが、GA4のデータをLooker Studioで見てみると
- どんな手順が必要で
- どれくらい・どのように変わるのか

を見ることができました。

データの細かい変化率やインサイトはGA4のほうが自動で表示してくれるため便利だな、と改めて感じたとともに
見たいデータが確定したらLooker Studioで広くカスタマイズしてレポートにまとめると
両方のいいところを活かすことができそうと感じました。

今後GA4でのデータ収集が開始したら、
より詳細に調べてLooker Studioでもレポートを作成してみたいと思いました。


以上、簡単にですが本記事を締めさせていただきます。
ここまで読んでいただきありがとうございました。

::: note 
今回、私が書いているこの記事は
[NI+C AdventCalendar GCP/GWS Team 2022 Advent Calendar 2022](https://qiita.com/advent-calendar/2022/niandc_teamgcp)
の15日目の記事となります。
もっと本格的なGCPに関する記事もたくさんありますので、ぜひ合わせてご覧ください。
:::

### メモとして残しておきたいその他の気づき
- 可視化できないGA4データの種類もある
    - 最初「7日間のアクティブユーザー」マップで比較しようとしたところ、指標としては選択できるが「Looker Studioではデータセットに接続できません。基になるデータセットからデータを取得できませんでした」と言われる
- GA4側で作成したセグメント（ある行動を起こしたユーザー群）でのデータの絞りをそのままLooker Studioでも使えるのは楽
AWSからSaaSベースのサプライチェーン管理サービス「AWS Supply Chain」が発表！

## はじめに

この記事は株式会社ナレッジコミュニケーションが運営する クラウドAI by ナレコム Advent Calendar 2022 の16日目にあたる記事になります。

今回はAWS が開催する re:Invent 2022 で発表されたSCMサービス「AWS Supply Chain」についてどんなサービスなのか調べてみました。


## そもそもSCMサービスとは？

SCM＝サプライチェーン・マネジメントのことで、小売業界における原材料の調達から最終目的地までの配送までの製品/データ/財務の流れを管理することを指します。
（日本語では供給連鎖とも言われます）

サプライチェーンにかかわる人物は
「原料調達者→メーカー→物流事業者→卸売事業者→小売事業者→お客様」
とかなり多く、複雑性が増すものです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1268348/175f0044-ec4c-1abe-bead-36374e7a4a72.png)

（参考：https://www.nttlogisco.com/service/scm/）

SCMではこうした物やお金の流れを整理し、サプライチェーン全体で共有、連携、最適化を図るのに使われる経営手法になります。

## AWS Supply Chainとは
公式のドキュメントには以下のように記載されております。

> AWS Supply Chain は、クラウドベースのサプライチェーン管理アプリケーションです。サプライチェーンリーダーがリスクを軽減し、コストを削減してサプライチェーンの回復力を高めるのに役立ちます。AWS Supply Chain は、サプライチェーンデータの統合、機械学習 (ML) を利用した実用的なインサイト、コンテキストに対応する組み込みのコラボレーションツールを提供します。これらすべては、在庫切れを防ぎつつ過剰在庫によるコストを削減し、顧客サービスのレベルを高めます。

単純なSCMサービスではなく、MLを利用したインサイト、つまり「需要予測」を行いながら在庫の最適化を目指すことができそうです。
さらに、再調整オプションを自動的に評価、ランク付け、共有して、リスクが検出された場合に実行するアクションを各担当者に連携してくれるそうです。
（コミュニケーションコストの削減も期待できそうです）

何より、30年続くAmazonの物流ネットワークのノウハウを教授できるサービスが一般的に使えるというのが凄いですね！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1268348/9e9cf19b-cd0a-849a-8307-ce887c08e5db.png)

## 料金体系
AWS Supply Chainは使った分だけ料金が発生する従量課金性の料金体系のようです。
料金が発生する機能は3つあります。

### AWS Supply Chain のデータストレージとサービス
データレイク使用時に料金が発生し、以下の4つの機能を提供します。
(データ変換にあたり他のサービスと組み合わせなくて良いのは嬉しいですね)
- Canonical Data Model (CDM)
- データガバナンス
- データストレージ
- データ変換機能

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1268348/7077e03e-a7b6-4485-8d04-1a0e7e4345ea.png)

### AWS Supply Chain Insights のデータ利用
インサイト利用料金は以下になります。
階層と書いてあるのはSKUの数と物理的な場所 (店舗、倉庫、フルフィルメントセンターなど) の数の組み合わせで決まるようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1268348/713c1c89-0af2-2da3-84d0-156b4dac84d0.png)

### AWS Supply Chain Demand Planning のデータ利用
ML を使用して需要を予測の利用料金は以下になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1268348/652d0938-2a8f-b699-01a9-55e144e42e9d.png)


## 使用できるリージョン
米国東部と米国西部、欧州のリージョンでプレビュー版が現在公開されており、近日中に他リージョンでも提供される予定だそうです。

## おわりに
既に大手小売会社からはコメントがあるように、会場でも盛り上がった発表のようでした。
コロナ化でより複雑化したサプライチェーン・マネジメントの改善に期待して行きたいですね！！
BtoBデザイナーが本領を発揮すべき領域

## はじめに
![スクリーンショット 2022-12-14 23.17.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2641301/b4e56222-f395-eace-6aec-ad7f77c815fb.png)
はじめまして!
モチベーションクラウドのUX/UIデザインを担当している溝上です。
BtoBプロダクトの価値を上げるにあたって、特にデザイナーが重要視し、力を入れていかないといけないことを紹介したいと思います。


## 前置き
### 高度デザイン人材
2018年5月に経済産業省と特許庁は『「デザイン経営」宣言』を公表しました。
それと同時に「高度デザイン人材育成研究所」が設置されています。
そこから発表された、高度デザイン人材ガイドラインには今後デザイナーが求められるスキルがまとめられています。(参考：<a href="https://www.meti.go.jp/shingikai/economy/kodo_design/pdf/20190329_02.pdf">高度デザイン人材ガイドライン</a>)
そこでは、リサーチ能力、抽象度、複雑度の⾼い課題を可視化するビジュアライゼーションの能⼒、さらにはデータサイエンスと連動したデザインが求められると記載されています。
幅広すぎる...

### PdMとデザイナーの話
xdやFigmaといったUIを簡単に制作できるツールが普及してきている今、もはやUIはデザイナーしか作れないものではなくなってきています。今や、デザインもコンポーネント化することが当たり前になってきており、フロントエンドとの連携も整ってきています。
そのため、整理されたパーツをパズルのように組み立てればPdMでも難なくUIが作れてしまいます。そんな中でデザイナーが求められること、デザイナーにしかできないこととは何なのでしょうか。
![スクリーンショット 2022-12-15 12.55.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2641301/97032b29-c1df-4b9e-99f8-30955a4f0132.png)
※弊社での開発組織内の主な役割

## BtoBデザイナーが本領を発揮すべき領域
ここからは弊社での取り組み例を交えながら、私が感じていることを書いていくので、参考程度に読んでいただけたらと思います！

### プロダクトの「らしさ」を作る
toC向けのサービスに比べて、機能的価値や使いやすさに比重が置かれることは事実かと思います。しかし、圧倒的な機能数/完全なるブルーオーシャンを除けば、toBプロダクトも競合他社がいることは当たり前の時代となってきています。その中で選ばれる続けるには、**プロダクトの「らしさ」** が重要になってきます。らしさは主に認知パターンから形成されるものだと私は思ってます。そのため、プロダクト内だけではなく、携わる人が全員が共通で**ブランドガイドライン**を認識していることが重要です。もしまだ言語化していなかったり、一部のメンバーしか意識していない状況でしたら、デザイナーが主体でワークショップなどをしてもいいかもしれません。ブランドガイドラインはデザイナーだけのものではありません。コーポーレートサイトや、営業資料、トークスクリプト、ヘルプページなどあらゆるツールに影響します。すでにブランドガイドラインがある場合は、定期的に見返したりアップデートされていくような仕組みはあるでしょうか？

![スクリーンショット 2022-12-15 9.00.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2641301/ed380be3-9b21-402e-597f-fbd7245921cd.png)
※モチベーションクラウドシリーズのブランドガイド抜粋

### 感情を要件に組み込む
新規機能の開発や、既存機能の改修に関わらず、ユーザー体験を設計する際にカスタマージャーニーマップを作成することはよくあると思います。
その際にユーザーが考えていることや、感情の浮き沈みも表現します。そこから見えてくる課題に対して、機能のアイデアを出したり、要件に落とし込んだりします。皆さんは **カスタマージャーニーマップで表現した「感情」の部分を要件に組み込んでいますか？** いつの間にか、課題を解決するための機能のスペックをどうすべきかに論点が寄ってしまってはいませんか？
もちろんそちらも大事ですが、デザイナーは特に、機能を通してユーザーにどういう感情になってもらえたら成功なのかにコミットすべきだと私は考えています。
ポイントは要件に目指したい感情を言語化することです。なんとなく意識するではダメなんです。要件に言語化することで、デザイナーだけではなく、 **関係者全員の「達成すべき目標」** に切り替わるのです。

![スクリーンショット 2022-12-15 8.23.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2641301/deceac5a-c418-3d21-6fd5-f62953c08b89.png)
※弊社である機能を作った際の感情部分の要件を抜粋

### 事業サイドのメンバーと協働する
我々デザイナーやエンジニアは顧客に対して直接営業をしている人は少ないかと思います。
だからこそ営業は売る人、開発は作る人という無意識的な境界線があるのではないでしょうか？役割としては何も間違いではありません。ただこの境界線を意識的に越境している人はいるでしょうか？作った機能を営業に丁寧に説明する人、顧客のリアルタイムなニーズを開発に届ける人。
![スクリーンショット 2022-12-15 15.45.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2641301/7fac391f-7ffd-6e96-c7d4-9133b148ecda.png)
一般的にはこの仲介する役割にPMMが入っているかなと思いますが、私はデザイナーがやるべきかと思います。なぜならば、情報解釈し、より伝わりやすく変換する能力はデザイナーの方が長けてると思うからです。わかりやすく、スライドにまとめたりもそうですが、リアルタイムでニーズを受け取りその場でデザインツールを使ってプロトタイプを作ったりすることもできます。関係各所の結節点となることが重要です。



## さいごに
ここまで読んでいただきありがとうございます！！
弊社のデザイナーが実際にやっている事例を交えて紹介させていただきました。様々な職種が互いの領域を超えて仕事をするようになってきた今、改めてデザイナーとしてどんな価値があるのかは常に考えていきたいですね。デザイナーじゃないとできないこと、デザイナーが一番コミットできることを追求していきましょう！
架空院試体験記

# はじめに

　この記事は理物 Advent Calendar 2022の16日目の記事です。
　何を書くか非常に迷ったのですが、理物というブランドイメージへの配慮や炎上忌避などの外的要因と、自分自身が物理に詳しくないとか何か紹介したいほどハマっているものがないという個人的事情から、内容のない嘘を書くことにします。

# 何についての嘘を書くの？
　ひとえに嘘と言ってもさまざまですが、物理学に関する嘘を言ってもどうしようもないので、タイトルにある通り、学部生が物理学を学ぶ上で避けにくい試練である院試について適当に書こうと思います。


　絶対に物理以外の話をすると言ったのは、嘘です。申し訳ありません。

　実際筆者も来年、結果はどうあれ夏に院試体験記を書く予定になっているはずなので、その予行演習だと思ってこの場をお借りしました。読者の皆さんは私の院試体験記を読む予行演習だと思ってお付き合いいただけると幸いです。

# 注意

:::note alert
**以下、ほぼ全ての内容が嘘です。**
:::


# 院試体験記

　院試のことを意識し出したのはB3の夏でした。その時期には2022年度の院試が行われていたため、同級生や先輩から院試という単語を聞く頻度が劇的に増加しました。
　しかし、結局夏休みにやったことは北海道旅行とゲーム、そして院試までの日付カウントダウンアプリを入れただけです。入れた当初こそ私の心に暗い影を落としていましたが、0:00にきっちり来る通知もただの日付変更通知としか認識しなくなってしまっていました。

![0A174854-9900-480D-B071-BE7919B577D3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2997401/6dd99a08-303b-ca2b-d11a-c7a981110fd6.jpeg)
　北海道旅行で撮った一番のお気に入り写真　函館駅にて


# 3Aセメスター

　3Aが始まり、私はついに本腰を入れて焦り始めました。どちらかというとキリギリス寄りの性格でしたが、性能ウサギ性格カメにならなければと決心し、授業には全て出席、毎日図書館に行き自習、休日は勤労をし、娯楽という娯楽は当然全て封印しました…とまでストイックにはなれなかったですが、できるだけ授業に出られるように努力し、特に演習の授業はサボらずに受けることで問題演習の絶対量を積み上げました。
　しかし演習の授業では毎週思ったよりも手が動かず、2A、3Sの演習の真面目とは言えない授業参加態度を非常に後悔しました…



# 4S
　忙しい講義日程の合間を縫っていくつか研究室訪問を行い、志望研究室を決めました。実験と講義でキャパの少ない私は既に爆発寸前でしたが、研究室訪問まで行った暁には大惨事でしたので、賢明な皆様方におかれましては、少しでも余裕のある時期に早め早めに研究室訪問に行っておくのがおすすめです。あと明確な目標があるとモチベも違うので…

　4S後半にもなると1日10回は院試という単語を聞くくらい院試漬けの生活になっていたため、さすがに危機感が他の感情を喰い尽くしてしまっており、最低限度の人間らしさ以外は全て院試に捧げた生活になっていました。
　人間追い込まれると尋常でない力を発揮すると言われていますが、火事場の馬鹿力も素の力に比例するものであり(出典：僕のヒーローアカデミア)、3Aの時期の勉強習慣の改善がなければ目も当てられない状況になっていたと思います。


![DA025390-D169-4E89-802E-08B0FF696116.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2997401/f2c6802e-f14d-9206-9469-5934fdb46db0.jpeg)

4Sでのお気に入り写真　山梨側からの富士山



# 院試本番
#### 筆記試験

　筆記試験当日、9時間睡眠から目覚めてコンディションは最低限クリアし、滞りなく会場まで着くことができました。筆記試験の感覚としては、例年より難易度の上がっていた電磁気の感触があまり良くないことを除けば、学科同期より少しできていない程度の出来であり自分としては十分な出来でした。
　まだ点数開示は来ていませんが、口述試験に進めることができたのでこの感覚はあまり間違ってなかったのだと思います。

#### 口述試験
　口述試験の日は、秋を感じさせる少し肌寒い気温だったので、長袖の下着を着て大学へ向かいました。面接試験はバイトを除けば5年以上前に受けた英検だけだったのでかなり不安はありましたが、当日ともなれば腹も座っており、緊張はあまりしていませんでした。

　試験会場に入ると、普段授業をしていただいている教授がいらっしゃって、雰囲気も柔和な感じだったのでリラックスして試験を始めることができました。そして教授はいつもの楽しそうな笑顔を浮かべながら一言、
「アドカレを見ました！」
と冷徹におっしゃられました。
　この先の具体的な質問内容等は守秘義務があるので言えません。ただ、気が付いたら汗びっしょりの状態で会場の外にいました。風が私の体温を掠め取り、次の季節を運んでこようとしていました。


![IMG_5259_Original.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2997401/2c06f808-f8ec-fc55-859c-015dd14f97aa.jpeg)

院試終わりの不忍池の写真　寒そう


# 院試結果は…
　点数を2割引されてしまい、不合格でした。今回の件から私と皆様が得るべき教訓は架空院試体験記なんて書くものではない、ということです。

# 再度注意

:::note alert
**書いてあるほぼ全ての内容は嘘です。また、架空院試体験記は書いて百害読んで一害なので書かない、読まないことをおすすめいたします。
　また、実在する組織や個人を貶める意図はございませんので、何か気になる記述、不快になる描写等あれば削除・修正させていただきます。**
:::
# あとがき

　酷い終わり方でしたね。爆発オチの方がまだ多少良かったかもしれないので、爆発オチver.もいつか追加します。


# 参考文献
　以下、きちんと体験済みの方の院試体験記です。参考にさせていただいたと同時に、私の記事を読むより確実に面白く、役に立つと思われるので、是非読んでください。


https://yetput.hatenablog.com/entry/2022/09/23/141307

https://seyakate-kudo.hatenablog.com/entry/2022/10/02/020210

https://note.com/ihsakijiminibo/n/n7c8ee54f0c50

https://note.com/yasudakodo826/n/n6f214f037480

https://note.com/llewkcor2178/n/n6d40d6226565

https://qiita.com/F55331821/items/516598ae52a694ee9225#ヒカリのdestination
Docker + Squooshで、一括で画像をwebpにする方法

## はじめに
[スペリス](https://spalice.com)で開発をしております、安永です。
この記事では、Dockerを使って、手軽かつホストの環境を汚さず、画像ファイルを一括でwebpに変換する方法を紹介します。

## squooshとは？
`squoosh`はGoogleが開発をしている画像を次世代フォーマットである`webp`に変換することができる神ツールです。
画像をwebpにすると、jpgやpngなどと比べて、サイズが抑えられ、画像の表示速度改善に役立ちます。

https://squoosh.app/

https://github.com/GoogleChromeLabs/squoosh

web上でも画像の変換をすることができ、webpだけじゃなく、avifとかの変換もでき、UIも素晴らしいものになっております。

ただ、画像を複数変換する必要があると、web上だけだと少し面倒でした。
その場合に備えてnpmのパッケージも用意されているのがさらに素晴らしいですね。

https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli

ホストOS上（macなど）でインストールする場合は、以下のコマンドを実行し、`squoosh-cli`を実行すれば任意の画像フォーマットに変換できます。

```bash
npm i -g @squoosh/cli
# squoosh-cli -d 変換先のフォルダ --webp 変換する画像
squoosh-cli -d . --webp ./test.png
```

一括で変換するには、findやxargsを使って画像ファイルに変換することができます。

この記事では、Dockerを使いつつ、ホストの環境を汚さず、画像ファイルを一気にwebpに変換するスクリプトをご紹介いたします。

## Dockerfile用意
めちゃシンプルなDockerfileを作成します。

```dockerfile
FROM node:16-alpine

RUN npm i -g @squoosh/cli
```

その後、Dockerfileがある場所でイメージをビルドします。-tの部分は適宜変えてください。

```bash
docker build -f ./Dockerfile -t squoosh .
```

これでsquoosh用のイメージができます。

```
REPOSITORY   TAG       IMAGE ID       CREATED        SIZE
squoosh      latest    ace5fd4e160a   3 months ago   145MB
```

## スクリプト実行
Dockerを使って、ボリュームマウントしてから、カレントディレクトリにある画像ファイルをwebpに変換するスクリプトを書いてみました。

```bash
docker run \
  --rm \
  --env TARGET="./home" \
  -v ${PWD}:/home \
  -it squoosh \
  sh -lc "printenv TARGET | xargs find | grep -e jpg -e png -e JPG -e PNG -e jpeg -e gif -e tiff -e tif | xargs -I{} sh -c 'printenv TARGET | xargs -I? squoosh-cli -d ? --webp true {}'"
```

### update
わざわざfindとかしなくても、以下みたいな感じで実行すると、実行したディレクトリの中にあるファイルをwebpに変更できました。

macの人だと`.DS_STORE`ファイルがあるとエラーになるみたいなので、`rm ./.DS_STORE`で削除しています。

```bash
rm ./.DS_STORE
docker run \
  --rm \
  -v ${PWD}:/home \
  -it squoosh \
  sh -lc "squoosh-cli --webp true /home -d /home"
```

## おわりに
`squoosh`神
画像ファイルがお手軽にwebpに変換できて、素晴らしいですね。どなたかの助けになれば幸いです。