OmniAICreator/Qiita-1.07M huggingface dataset:
TypeScript: 数字を、全角・漢数字の文字列に変換する

# 背景
メッセージ表示のコードで、数字が埋め込んであったので、変数から変換させたいと思った。

DateTimeFormat を先日学習したばかりだったので、まさに出番だと調べてみた記録

https://qiita.com/baku2san/items/03054210a43a09137ffa#datetimeformat-%E3%81%AE-%E8%A9%B3%E7%B4%B0

# 結論
## 全角

```typescript: 全角
const localeFullwide = new Intl.Locale(
    'ja-jp',
    {
        numberingSystem: "fullwide"
    }
);
console.log(new Intl.NumberFormat(localeFullwide.toString()).format(1234567890));
```

結果はこんな感じ

> １,２３４,５６７,８９０

## 漢数字

```typescript: 漢数字
const localeHanidec = new Intl.Locale(
    'ja-jp',
    {
        numberingSystem: "hanidec"
    }
);
console.log(new Intl.NumberFormat(localeHanidec.toString()).format(1234567890));
```

結果はこんな感じ

> 一,二三四,五六七,八九〇

# 補足
## Intl.Locale.toString()
locale に設定出来る文字列を出力してくれる。

例）
> ja-JP-u-nu-fullwide
ja-JP-u-nu-hanidec


## numberingSystem の様々な例

```typescript: numberingSystem の全パターン
const numberingSystems = ["arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt"];
const cons = numberingSystems.map((n) => {
    console.log(
        new Intl.NumberFormat(
            new Intl.Locale(
                'ja-jp', {
                numberingSystem: n
            }).toString()
        ).format(1234567890)
    );
});
```

世界ってすごいねって感じになります・・。結局使えそうなのは、fullwide/handic しかなさそうって結論

> ١٬٢٣٤٬٥٦٧٬٨٩٠
۱٬۲۳۴٬۵۶۷٬۸۹۰
᭑,᭒᭓᭔,᭕᭖᭗,᭘᭙᭐
১,২৩৪,৫৬৭,৮৯০
१,२३४,५६७,८९०
１,２３４,５６７,８９０
૧,૨૩૪,૫૬૭,૮૯૦
੧,੨੩੪,੫੬੭,੮੯੦
一,二三四,五六七,八九〇
១,២៣៤,៥៦៧,៨៩០
೧,೨೩೪,೫೬೭,೮೯೦
໑,໒໓໔,໕໖໗,໘໙໐
1,234,567,890
᥇,᥈᥉᥊,᥋᥌᥍,᥎᥏᥆
൧,൨൩൪,൫൬൭,൮൯൦
᠑,᠒᠓᠔,᠕᠖᠗,᠘᠙᠐
၁,၂၃၄,၅၆၇,၈၉၀
୧,୨୩୪,୫୬୭,୮୯୦
௧,௨௩௪,௫௬௭,௮௯௦
౧,౨౩౪,౫౬౭,౮౯౦
๑,๒๓๔,๕๖๗,๘๙๐
༡,༢༣༤,༥༦༧,༨༩༠

## numberingSystem で使える一覧はここから取得

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat

実際にはもっとたくさんあるみたいだけど

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem

# あとがき

ほんとは、Intl.NumberFormat の options として、numberingSystem を指定して生成したかったが・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/a419f9fc-a4fe-b341-6c0b-8ca1dec41735.png)

こんな感じで、TypeScript 上だとエラーになってしまう。（JavaScriptでなら問題なし）

で、本当は Declaration Merging　を利用して、options として使えるようにしたかったんだが・・
TypeScript 初心者には敷居が高かったので、現時点では諦め。
Local なら問題なかったので、LocalString を生成して利用することにしたのが今回の内容

ってことで、options の Declaration Merging はこうすればいいよってのがわかる人がいたら教えてください。

https://runebook.dev/ja/docs/typescript/declaration-merging
Twitter認証にSymbolをちょいのせしてみた

# はじめに
こんにちわ。ツイベガ君です。
Twitter認証にSymbolをちょい足しした[「QuizGathering」](https://quizgathering.tuibega.tokyo/accounts/)について、
簡単に内容を解説したいと思います。

# 概略
TwitterアカウントにSymbolアドレスを紐づけることで、特定のトークンを持っている人しか
閲覧や書き込みが出来ない掲示板やクイズを提供するサイトになります。
たとえば、[こちら](https://quizgathering.tuibega.tokyo/boards/post_comments/13)のサイトではダイヤモンドモザイクを持っている方しかアクセス出来ません。

掲示板やクイズ自体はあくまでおまけであり、
TwitterIDの認証機能に、Symbolトークンによる認可を足すことにより、
秘密鍵の管理などのブロックチェーンの煩わしいことを意識せず、
トークンによる第三者からの認可処理などをやりたいなぁというのが趣旨になります。

TipNEMが存在していた時のように、まるでTwitter上でNEMやトークンがワチャワチャ動くようなことを
したかったわけです。

# 各種フロー
未ログインユーザが、トークン制限の掲示板にアクセスし閲覧するまでのフローは下記の通りです。

```mermaid
sequenceDiagram
    participant User
    participant Quizgathering
    participant Twitter
    participant Symbol

    User->>Quizgathering: アクセス
    Quizgathering->>User: Twitterログイン依頼
    User->>Twitter: Twitterログイン
    Twitter->>User: Twitterログイントークン発行
    User->>Quizgathering: ログイン後アクセス
    Quizgathering->>User: Symbolアドレス登録依頼
    User->>Quizgathering: Symbolアドレス情報設定
    Quizgathering->>Symbol: Symbolトランザクション待機
    User->>Symbol: トランザクション0xym発行
    Symbol->>Quizgathering: Symbolトランザクション確認、トークン情報取得
    User->>Quizgathering: アクセス
    Quizgathering->>User: 秘密の掲示板内容見せちゃう

```

# 実装内容
割愛させて頂きます。

# 最後に
後日更新します
Rubyの動的メソッド呼び出しと動的メソッド定義と ~send, define_method~ 

# はじめに
最近「メタプログラミングRuby」という本を読んで、動的メソッド呼び出しと動的メソッド定義について学習しました。
そこで、実際に2つ使って簡単なコードを書き本記事を作成しました。
# 前提
動的ではないメソッド定義とメソッド呼び出しは以下のようなものです。
```ruby
class Hoge
  attr_accessor :name

  def print_name
    puts "name: #{@name}"
  end
end

hoge = Hoge.new
hoge.name = "Alice"

hoge.print_name
#=> name: Alice
```
特徴はそれぞれ次の通りです。
- 固定の名前でメソッドを定義する
- 固定の名前でメソッド呼び出しをする

# 動的メソット呼び出し
```ruby
hoge.print_name
hoge.print_type
hoge.print_age
```
上のように`print_○○`という命名のメソッドを連続して呼び出す場合について考えます。

そこで、変化する部分を配列で持ちsendメソッドと式展開を利用し動的に記述することが、動的メソット呼び出しです。
```ruby
columns = ['name', 'type', 'age']
columns.each do |column|
  hoge.send("print_#{column}")
end
```

# 動的メソッド定義
逆に類似の処理を行うメソッドは以下のようにdefine_methodを利用することで動的に記述できます。これが動的メソッド定義です。
```ruby
class Hoge
  attr_accessor :name, :type, :age

  def self.print_item(name)
    define_method(name) do
      column = name.split('_').last
      puts "#{column}: #{self.send(column)}"
    end
  end

  ['name', 'type', 'age'].each do |column| # 動的メソッド呼び出しでメソッド定義
    print_item "print_#{column}"
  end
end

hoge = Hoge.new
{name: 'Alice', type: 'AB', age: 20}.each do |key, value| # 動的メソッド呼び出しで変数を定義する
  hoge.send("#{key}=", value)
end


hoge.print_name
#=> name: Alice

hoge.print_type
#=> type: AB

hoge.print_age
#=> age: 20
```

# 感想
コードを書く前はどちらもDryにコードを書く役に立ちそうだと感じていました。
しかし、実際にコードを書いてみると、動的メソッド定義の方は、そもそも類似処理をするメソッドを定義すること自体がDryではない気がしました。(下のように単一メソッドで書いた方が良いかも？)
公開済みGemなどメソッド名は変更できない状況で、リファクタリングをする際などは利用できそうです。
```ruby
class Hoge
  attr_accessor :name, :type, :age
  def print_column(column)
    puts "#{column}: #{self.send(column)}"
  end
end

# (略)

hoge.print_column('name')
#=> name: Alice
```

動的メソッド呼び出しの方は、動的メソッド定義以降のコードでも多様できたので、とても役に立ちそうです。


# 参考文献
- [メタプログラミングRuby 第2版](https://www.oreilly.co.jp/books/9784873117430/)
［基礎］Macのターミナルで使用するUnixコマンド

ターミナルでよく使用するUnixコマンドをまとめました。

※
ディレクトリ・・・フォルダのこと。
カレントディレクトリ・・・現在操作中のフォルダのこと。
ホームディレクトリ・・・ターミナルを立ち上げた際に操作するデフォルトのフォルダのこと。


# コマンド一覧
## ls (list)
カレントディレクトリ内に存在しているファイルを表示する。listの略。


```html:ターミナル
ls     #カレントディレクトリにあるファイルやディレクトリを表示する
ls -l     #ファイルやディレクトリの詳細も同時に表示する
ls -a     #隠しファイルやディレクトリも含めて、全てのファイルやディレクトリを表示する
ls -la     #隠しファイルやディレクトリも含めて、全てのファイルやディレクトリの詳細を表示する
```


## cd (change directory)
カレントディレクトリ内のファイルに移動する。
```html:ターミナル
cd 〇〇     #〇〇というファイル、ディレクトリに移動する
cd ~     #ホームディレクトリに移動する
cd ..     #一つ上の階層のファイルに移動する
```


## pwd (print working directory)
カレントディレクトリのパスを表示する。
```html:ターミナル
pwd     #カレントディレクトリのパスを表示する
```

## touch
中身が空のファイルを作る。
```html:ターミナル
touch test.html     #test.htmlという中身が空のファイルを作る
```

## mkdir (make directory)
新しい空のディレクトリを作る。
```html:ターミナル
touch test     #testという中身が空のディレクトリを作る
```

## mv (move)
ファイルを移動したり、ファイル名を変更したりする。
```html:ターミナル
mv test.html tmp/     #test.htmlというファイルを相対パスでtmp/に移動する
mv test.html test2.html     #test.htmlというファイルをtest2.htmlに名前変更する
```

## cp (copy)
ファイルをコピーする。
```html:ターミナル
cp test.html tmp/     #test.htmlを相対パスでtmp/というディレクトリの中にコピーする
cp test.html test2.html     #test.htmlをtest2.htmlという名前でコピーする
cp −r test /tmp/     #testというディレクトリとその中身を絶対パスで/tmp/にコピーする
```

## rm (remove)
ファイルを削除する。
```html:ターミナル
rm test.html     #test.htmlを削除する
rm -r test     #testというディレクトリとその中身を削除する
rm -f test     #testというディレクトリを警告なしで削除する
rm -rf test     #testというディレクトリとその中身を警告なしで削除する
```

## open
ターミナルからFinderでファイルを開く。
```html:ターミナル
open .     #現在のターミナルのディレクトリFinderで開く
open ~/     #ホームディレトリをFinderで開く
```

## source
ファイルの設定を読み込み有効にする。
```html:ターミナル
source ~/.bash_profile     #ホームディレクトリにある.bash_profileに書き込んだ設定を読み込み有効にする
source .bash_profile     #カレントディレクトリにある.bash_profile設定を読み込み有効にする
```

## history
コマンド履歴を表示する。
```html:ターミナル
history     #実行してきたコマンドの履歴を表示する
history -c     #実行してきたコマンドの履歴を消去する
```



★参考記事
[Macのターミナルコマンド一覧（基本編）](https://qiita.com/ryouzi/items/f9dee1540a04a0bfb9a3)

以上です。
Exchange Online のトランスポートルールで特定の条件に一致する予定を自動的に非公開設定にする

# 概要
Exchange Online 上のメールや予定表アイテムに対して、配信中の段階で処理を行うことができるトランスポート ルールという機能があります。

https://learn.microsoft.com/ja-jp/exchange/security-and-compliance/mail-flow-rules/mail-flow-rules

今回は、そのトランスポート ルールを使って、特定の条件に一致する予定表アイテムを自動的に非公開の設定に変更する検証をしましたので、備忘録として残しておきます。

## Exchange Online のトランスポート ルールを作成する
1. Exchange 管理センター (https://admin.exchange.microsoft.com/)

1. [メール フロー] - [ルール] - [ルールの追加]

1. 各種条件を設定し、[次を実行します] には [メッセージのプロパティの変更] - [メッセージ ヘッダーの設定]を選択し、プルダウン下部のオプションは **'Sensitivity'** を値 **'private'** に設定します、のように設定する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/583721/31cee2bd-c31d-4cdf-fb34-75a00f8a8aea.png)

## 結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/583721/8227f973-3e9d-0837-4ba6-487c97d8e1f8.png)
条件に一致した場合、当該予定表アイテムは自動的に非公開設定になった。

# あとがき
予定表アイテムを何らかのルール付けで非公開にするようなナレッジが Web 上になかったので、今回検証してみました。
なにか具体的な条件下において予定をわざわざ非公開にせずとも、自動的に非公開の設定にしたいようなシチュエーションがあればぜひ。
Box×Salesforce活用のススメ2(Box Lightning Component Pack for Community Cloud)

# はじめに
またまたBoxとSalesforceの連携ネタを書かさせていただきます。
今回は、AppExchangeの「Box Lightning Component Pack for Community Cloud」を使ってみました。

https://appexchange.salesforce.com/listingDetail?listingId=a0N3A000000rMXkUAM&tab=r


※過去の記事はこちら
* [Boxとの連携でSalesforceをより便利に活用しよう(Box for Salesforce)](https://qiita.com/kamadhi/items/006626ddb0b66a70e902)
* [Box×Salesforce活用のススメ](https://qiita.com/kamadhi/items/bcada53ca82d9aa7403a)
* [Box×Salesforce×Slack活用のススメ](https://qiita.com/kamadhi/items/e4d395e2b9c16cbd8810)

# 「Box Lightning Component Pack for Community Cloud」とは

[こちらのbox supportサイト](https://support.box.com/hc/ja/articles/360043693674-Box-for-Salesforce-Box-Lightning%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88)にインストールの仕方から設定の仕方まで丁寧に書いてあります。
一言でというと、SalesforceのLightningページ、コミュニティにBoxのコンテンツを配置できるようになるものです。
設定の仕方はとても簡単。
コンポーネントを配置して、Boxで作成する共有リンクの一部をコピー＆ペーストする、それだけです。

では実際にCommunity Cloud上に配置するとどんな見た目になるのでしょうか。

# Community Cloudに 「Box Lightning Component Pack for Community Cloud」を配置
「Box Lightning Component Pack for Community Cloud」をインストールすると、ビルダー画面で
* Box File Embeb
* Box Folder Embed
に2つのコンポーネントが配置できるようになります。
それぞれ配置するとこんな感じになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986270/cc199dc0-e8d1-16d2-f23b-87d3a6df45a5.png)


例えば製品カタログなど広く多くの人に見てほしいコンテンツなどはこの方法でCommunity Cloudに配置しても良さそうです。
動画も再生可能なので製品の使い方動画などもいいかもしれません！
ただし、普通の使い方だと動的にコンテンツを出しわけできない点と、セキュリティ面には注意が必要です。

# Salesforceのホーム画面に 「Box Lightning Component Pack for Community Cloud」を配置
AppExchage名に"Community Cloud"と入っていますが、Salesforceにもコンポーネントを配置することができます。Box for Salesforceは実はSalesforceのホーム画面には配置できません。が、「Box Lightning Component Pack for Community Cloud」を利用すればホーム画面でもBox内のコンテンツを活用することができます。

Box File Embebを活用することで、ホーム画面上にBox内のコンテンツを表示することができるので、全社員に必ずみてほしい情報などを配置するのに適していますね。
また、例えばSalesforce利用マニュアルやBoxの使い方動画など、新入社員/中途入社社員のオンボーディングにも使えそうです。例えば入社3ヶ月未満の社員にはこのオンボーディング用のマニュアル等を表示するといった使い方が可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986270/60973876-28c9-6a67-c036-a42f1aa6c9e4.png)

Box Folder Embedを活用することで、Boxのフォルダ構成をホーム画面に配置できるので、営業ならば営業関連の、SEならばSE関連の情報にホーム画面から全て辿ることができるように設定できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986270/4686217e-46d5-f857-ef0f-a833e241fdc5.png)

# さいごに
いかがでしたでしょうか。
アイディア次第でBoxとSalesforceを様々な形で連携させてもっともっと面白いことができそうですね！
JAMstack な個人ブログを作った男


今回 `Jamstack` とは何か（WHAT）ではなく、私が `Jamstack` を選択した理由（WHY）をメインに書いていきます。

個人開発の選択肢の一つとして Jamstack が選ばれますことを願っています！

- [Jamstack 公式サイト](https://jamstack.org/)
- [Jamstackって何なの？何がいいの？ ( @ozaki25 さん)](https://qiita.com/ozaki25/items/4075d03278d1fb51cc37)

# JAMstackとの出会い



とある日の 1 on 1 、、


部長　「次の仕事フロントエンドな」
😀　「やったるぜ」

後日、、

😀　「よしやるか、」
😀　「フロントエンドの勉強するのにバックエンド用意するのは面倒だ、、」
😀　「ヘッドレスCMS ？？」
😀　「microCMS 使ってみるか」
microCMS 「Jamstack って知ってる？」
😀　「何それ？？？」


# What is Jamstack?

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1416164/385f8bc6-1c77-3e0d-3a3d-bda8348c1d10.png" width="50%">


😀 「Jamstack ってなに？」

`ヘッドレスCMS`と`ホスティングサービス`を連携させることにより運用が簡単なサービスを作成することができる構成なんだ

ヘッドレスCMSにコンテンツを投稿されたタイミングでビルドするので、閲覧する際には静的なサイトが配信るんよ

投稿されるたびに全ページ分ビルドされるためTwitterのような更新頻度が高いサイトには向いてないけど、ブログみたいなのにはピッタリよ！

😀 「時代はJamstackや！」

（簡単に言えば　SSG　を作ってホスティングすれば運用が簡単なブログが出来上がりということですね）

# Why Jamstack ?

これから私がJamstackなブログを作った理由を3つ紹介します！

> 個人ブログの構成
>![Jamstack システム構成図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1416164/6cce3801-99e1-ad07-355c-a08ff5028a7f.png)


## 1. 開発に早く取り組める

これは Jamstack のメリットというよりも、ヘッドレスCMS（今回使用しているのは microCMS）に関してですが

俺は作りたいんだ！フロントを勉強したいんだ！（サーバーやデータベースとかAPI作ったりとかはちょっと面倒ジャン、、🥶）

個人開発をする上で情熱が一番だと思ってます！
鉄は熱いうちに打たないとすぐ冷めてしまいます😇



## 2. 運用も楽ちん


リリースしたらリソース監視する必要があったり、色々面倒ですよね。でも今回の構成だとヘッドレスCMS、ホスティングサービス、CDNくらいです。ヘッドレスCMSくらいなら倒れてもビルドできずに更新されないだけなので心配はそんなにしなくてよさそうだな〜っと

リリースした後もCMSに投稿していくだけなので楽ちんの運用です😘

## 3. どのフレームワークでも開発できる

言語フレームワーク問わず静的サイト生成できればどんなツールでも大丈夫！

私の大好きな [Elm](https://jamstack.org/generators/elm-pages/) でもできるみたいですよ🥰

次は Elm で`Jamstack`やってみよっかな😀


# 最後に

フロントエンド作っていくのが目に見えてとても楽しいです！

Jamstack もとても大好きになりました


今回作ったサイト
https://saisuke.dev
まだまだ途中ですが是非見てください（押せないボタンとかあります。。😇）
ラックの設置に困った話

謎のアドベントカレンダー、第 20 話です。

確か 2000 年代に入って少し経った頃の話だったと思います。

## サーバー室にタワー型サーバー多すぎ問題

筆者の職場では、それまで

- サーバーはタワー型を購入してタワー型設置用のサーバーラック（2 〜 3 段テーブル式の巨大な長机にキーボード用の引き出しが付いているみたいなやつ）に横に並べる形で設置
- ネットワーク機器は 40 U くらいの 19 インチラックに設置

していました。

が、サーバーの台数が増えて手狭になり、一方でネットワーク機器用の 19 インチラックは奥行きが短くラックマウントサーバーの設置には不向きだったので、サーバー用の 19 インチラックを新たに購入することにしました。

（実は少し前からラックマウントサーバーを購入して、タワー型設置用のサーバーラックや机に平置きしていました← 19 インチラック購入を見越して）

当時、すでに一部のサーバーを郊外のデータセンターに設置していましたが、そのデータセンターの親会社がラックメーカーだったので、割とお安く買うことができました。

当初、42U（奥行き 100 cm）にしようと考えたのですが、金額がほぼ変わらないとのことだったので、欲張って 46U（奥行き 100 cm）のものを発注しました。

## 19 インチラックが届いた！けれど…

当時のサーバー室はビルの 3 階だったので、当然エレベーターに載せて運ぶつもりでした。

そのために、エレベーターの床から天井までの高さもはかり、余裕があることを確認していました。

届いてみると…エレベーターに載せることはできませんでした。

扉の開口部の高さが足りず、斜めに入れようとしても今度は奥行き不足で引っ掛かってしまい、結局載せられませんでした。

## ビル裏の螺旋階段を

なんとか上って 3 階まで持って行きました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123899/4f888dad-b2c3-ee28-6cb6-ef8fede8743c.png)

運送業者の方も 2 人しかいない状態で螺旋階段を上るのはキツかったので、一緒に手伝いながら 3 階まで上げました。

サイズ的には本当にギリギリでした。

やはり欲をかいてはダメです。

## 久々の余談ですが

このサーバー室、今回のアドベントカレンダーでは最後の登場となります。

今はビルごと解体されて無くなってしまいましたが、

- フロアの人が夜エアコンを切って帰宅して高温になる事件
- 天井ビルトイン型エアコンのドレンホースに天井裏で亀裂が入って室内に雨が降る事件
  - 霧が発生したデータセンターがどこかにあったようですが
- 天井裏からの漏水が壁伝いに流れ落ち、サーバーの空き箱が浸水してカビが生える事件

などなど、数々のトラブルの舞台となった思い出深い（？）部屋でした。

合掌。

---

21 日目の記事に続きます。

- **[サーバーの発注ミスで困った話](https://qiita.com/hmatsu47/items/1c168ae2795c3421596d)**

https://qiita.com/hmatsu47/items/1c168ae2795c3421596d
論理削除するAPIのHTTPメソッドは何を使うべきか

RESTの思想ではリソースの削除はDELETEメソッドですが、論理削除の場合はどうなんでしょう。

- フラグ等の更新で削除自体はしていないから、PATCH？
- 意図は「削除」だからDELETE？

### 結論
正解は無いものの、調べる限りDELETE推しが多い印象。

- APIを使用する側からしたら、削除の意図で使用する
- 物理削除か論理削除かはアプリケーション内部の仕様であり、使用する側には関心のないこと

とはいえ、どのメソッドを使うかよりもアプリケーション内で基準が一貫していることの方がずっと大事ですね。

### 参考

https://stackoverflow.com/questions/15839114/restful-soft-delete
【Playdate】マイク録音して再生するシンプルサンプラーを作る

Playdateにはマイク入力があり録音関連のAPIもあります。
今回は3秒間の短いサンプリングをするサンプルを作ってみます。


```main.lua
import "CoreLibs/object"
import "CoreLibs/graphics"
import "CoreLibs/sprites"
import "CoreLibs/timer"

local gfx <const> = playdate.graphics

local secondsToRecord <const> = 3

local buffer = nil
local sound = nil
local status = nil
local isRec = false

-- 録音完了後処理
local completionCallback = function()
	isRec = false
	status = "REC END"
	
	playdate.sound.micinput.stopListening()
	sound = playdate.sound.sampleplayer.new(buffer)
	sound:setFinishCallback(function()
		status = "STOP"
		gfx.sprite.redrawBackground()
	end)
	
	gfx.sprite.redrawBackground()
end

-- 録音開始処理
function startRec()
	isRec = true
	status = "REC"
	
	playdate.sound.micinput.startListening() -- マイク入力開始
	buffer = playdate.sound.sample.new(secondsToRecord, playdate.sound.kFormat16bitMono) -- バッファ
	playdate.sound.micinput.recordToSample(buffer,completionCallback) -- 録音
	
	gfx.sprite.redrawBackground()
end

function myGameSetUp()
	gfx.sprite.setBackgroundDrawingCallback(
		function( x, y, width, height )
			gfx.drawText(status, 20, 20)
		end
	)
	
	startRec()
end

myGameSetUp()

function playdate.update()
	-- Aボタン: 録音再生
	if playdate.buttonIsPressed(playdate.kButtonA) then
		if sound ~= nil then
			if sound:isPlaying() ~= true then
				status = "PLAY!"
				sound:play(1)
				gfx.sprite.redrawBackground()
			end
		end
	end
	
	-- Bボタン: 録音
	if playdate.buttonIsPressed(playdate.kButtonB) then
		if isRec ~= true then
			startRec()
		end
	end

	gfx.sprite.update()
	playdate.timer.updateTimers()

end
```

`startRec`関数内で実行している主な処理内容を見ていきます。
`playdate.sound.micinput.startListening()`：マイク入力レベルの監視開始
`playdate.sound.sample.new(secondsToRecord, playdate.sound.kFormat16bitMono)`：バッファオブジェクト生成
`playdate.sound.micinput.recordToSample(buffer,completionCallback)`：録音開始。第一引数にバッファオブジェクト、第二引数に録音終了後のコールバック関数。

前述のコールバック関数`completionCallback`での主な処理内容は以下のとおりです。
`playdate.sound.micinput.stopListening()`：マイク入力レベルの監視終了
`playdate.sound.sampleplayer.new(buffer)`：録音したバッファオブジェクトからsamplePlayerオブジェクトを生成
`sound:setFinishCallback(callbackFunction)`：samplePlayerオブジェクトの再生終了後のコールバック関数のセット

録音したsamplePlayerオブジェクトの再生と再録音処理は`playdate.update()`にて実行しています。
[Rails]CSSファイルの適用について

CSSファイルの適用についてまとめたいと思います。

## CSSファイルの配置先
Railsのスタイルシートは、app/assets/stylesheetsディレクトリに配置します。

app/views/layouts/application.html.erbのhead要素にstylesheet_link_tagという記述があります。
```ruby
 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
```
## stylesheet_link_tagメソッドとは？
stylesheet_link_tagとは、読み込むCSSファイルを指定できるヘルパーメソッドです。

読み込みたいCSSファイルをapp/assets/stylesheets/というディレクトリに配置し、stylesheet_link_tagメソッドの引数に読み込みたいCSSファイル名を記述します。

上記記述は、application.html.erb内で、stylesheet_link_tagの引数に'application'を指定しており、app/assets/stylesheets/ディレクトリ内に配置されたapplication.cssというCSSファイルを読み込んでいます。

## application.cssファイルとは？
Railsにはじめから用意されている、CSSファイルをまとめるためのファイルです。マニフェストファイルとも呼ばれます。
application.cssには、アプリケーション全体に適用するCSSを指定できます。
「*= require_tree .」　という記述がポイント

## require_treeとは？
require_treeは、引数として与えられたディレクトリ以下のCSSファイルをアルファベット順にすべて読み込むという機能を持ちます。


# まとめ
**CSSファイルはapp/assets/stylesheetsディレクトリに配置します**

app/views/layouts/application.html.erb内のtylesheet_link_tagが読み込まれ
application.cssファイルに飛び、require_tree から
app/assets/stylesheets/ディレクトリ内にある、全てのCSSファイルを適用することができます。
colmap2nerfの改造

「instantNeRFで遊ぶ Advent Calendar 2022」の17日目です。

今日はinstantNeRFのGUI画面に再生されるモデルの姿勢をあらかじめ調整する方法を検討します。

:::note
業務外の個人的な検討活動です。
:::

:::note alert
警告
環境や入力内容によっては現在使用できている状況が壊れることがあります。
あなたの責任と判断で試してください。私は責任を取りません。
:::

#### テストデータ
sketchfabのNefertiti statueを使用させていただきました。ありがとうございます。

https://sketchfab.com/3d-models/nefertiti-statue-d148f771c3f44225b56cb7ce8d3c5ce6

#### colmap2nerf.py
colmap2nerf.pyの中身を確認しました。
COLMAPのimages.txtのカメラの位置と向きのデータがNeRF用に変更されていました。
![17-13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103446/63b81403-3935-923a-412f-e7160c8286bb.png)

281行目で合計した上向きの数字を使い、300行付近でカメラの向きを変える処理をしていましたのでkeep_upというparserを作ってその処理を飛ばすようにしました。
![17-14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103446/0a93597d-847c-f6d9-9e7b-77477d23ae81.png)

#### Blender　画像を作成
彫像がZ方向に立ち上がった姿勢にしたいのでカメラの配置を変えて画像を生成しなおしました。
![17-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103446/1ee54570-49d7-c2d1-e09b-e3f0d9714df6.png)

#### RealityCapture　モデルの姿勢を調整
Blenderで使ったカメラの配置に合わせてALIGNMENT / Align Imagesにおいて各画像の1Ds / Prior pose Absolute poseを修正し、モデルの姿勢を変更します。
![17-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103446/f561d397-ae7a-ac9e-dd1b-b006ed36bce1.png)

#### COLMAP model_aligner
カメラの数が少なく分かりやすく配置したのでカメラは位置データを手入力で修正しました。
![17-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103446/252dcd5a-2309-08b6-0b13-2bfb699343c5.png)

予め実行して生成してたモデルデータをCOLMAP model_alignerで修正します。12/5の方法を使いました。
![17-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103446/dab74223-67fb-876e-a757-28ba57e7f779.png)

https://qiita.com/nakmura/private/4bd1d4eed6e5e00d292e

#### testbed.exe
修正されたモデルデータをCOLMAPでtextデータに変更し、colmap2nerf.pyで生成したtransform.jsonを使いinstantNeRFを実行しました。
12日目に説明した2番目の方法です。

https://qiita.com/nakmura/items/ec71ab21a74eeae57556#colmap2nerfpy

> (ngp) D:\git\instant-ngp>python scripts/colmap2nerf.py  --aabb_scale 4 --images data/2212142b  --out 2212142b.json --keep_up 

画面に表示された彫像は前後と上下が反転していました。
![17-8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103446/891f53f2-107b-a1ec-a7a4-37d71a22eae8.png)

#### 座標系の考察
それぞれのツールの座標系を検討しました。使用したツールは図の左から並べました。カメラのアイコンは向きを[0, 0, 0]にした状態です。
![221215a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103446/056fca30-8646-217c-18bb-c2a65c98bb2f.png)

instantNeRFの画面の座標の向きを基準に回転させたのが下の図です。この状態だとモデルは逆さで後ろ向きになるようです。
![221215b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103446/391dd240-b507-63b7-bc5b-cad4e7f42c56.png)

#### RealityCapture　モデルの姿勢を再調整
instantNeRFの画面の座標でカメラに正対するようモデル（頭がZ-、顔がY+の方向）とカメラを配置しなおしました。
![17-15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103446/f11ca5b0-45fc-4042-c6c0-aa0bce7016c9.png)

#### testbed.exe　再調整後
起動時点のモデルの姿勢が画面に正対しました。
![17-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103446/975e097a-3f8e-c4bf-3c35-c46ae2cac773.png)

#### まとめ
colmap2nerf.pyにup変更させない機能を追加しました。
instantNeRFの座標を考慮しRealityCaptureでモデルとカメラの向きを調整し、カメラの座標をCOLMAPへ入力することでinstantNeRFで再生するモデルの初期姿勢を変更しました。

参考

https://github.com/NVlabs/instant-ngp/issues/658
共役勾配法の収束

# はじめに

共役勾配法による計算で収束しない問題が発生し、自分のバグなのかこの２週間くらいすごい悩みました。収束の様子について少しプロットした見たので、そのメモです。
コードは下記に置いてあります。

https://github.com/torupati/conjugate_gradient

# 共役勾配法の収束

共役勾配法は正定値行列Aとベクトルｂが与えられたとき、Ax=b を解く計算方法です。いろいろ解説があるので、中身はそちらに譲ります。

- 解 x を基底 $p_k$ の線形結合で表す。
- $p_k$ をiterativeに求めていく。$x_{k+1}=x_k + \alpha_k p_k$ とし係数$\alpha_k$ を求める。
- 残差$r_k=b-A*x_k$を最終的 0 にする。
- step k での残差$r_{k+1}=r_k - \alpha p_k$ を更新していく
- Aによる内積を計量とする空間での直交化で $p_{k+1}=r_k+\beta p_k$を求める

コードは公開していますが、計算部分はこんな感じです。

```python
def solve(A, b):
    dim = len(b)
    x = np.zeros(dim) # initial_value
    r = b - np.dot(A, x)
    p = r
    r_ss = np.dot(r.T, r)
    k = 0
    while True:
        # Calculate A*p
        Ap = np.dot(A, p)
        # Add base vector p and add projection to solution
        _a = np.dot(r.T, p) / np.dot(p.T, Ap)
        x = x + _a * p
        r = r - _a * Ap
        r_ss_temp = np.dot(r.T, r)
        if np.abs(r_ss_temp) < 1.0E-10:
            break
        #
        _b = r_ss_temp / r_ss
        p = r + _b * p
        r_ss = r_ss_temp
        k = k + 1
    return x
```

## 気になったこと

- 残差ベクトルが小さくなっていくか
- $\alpha$, $\beta$はどうなっているのかな

と気になったので、8192次元で、乱数を使った簡単な係数を解いた結果をプロットしてみました。

![cg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294040/3312ac5d-b02e-8c76-f293-ca6dba755381.png)

ここだと$\alpha$, $\beta$はほぼ同じスケールでした。
ほー、と思ったのは、

- 残差が小さくなるとともに、基底ベクトル$p$の大きさも小さくなっている

ことです。step の後半で $\alpha$のスケールが変わらないまま $p_k$ が小さいということは

- 後半の更新では解 $x$ をほとんど変化させていない

ということに対応します。なので、最後のあたりはほぼ効いていないであり、問題によっては初期値に依存する（全体が凸であるならglobal optimum に収束するのことが保証されているので依存性は関係ないが）かなと思いました。

### 収束しないとき

収束しない場合は
- 共役勾配法を使うための条件であるAが「対称正定値行列」を満たしていなかった

ということなのかなと思います。非線形な目的関数を２次近似して解いている場合、Hessian 行列は対称行列だから、最適解の付近なので凸だからと思っても、
- 高次の項の影響がある
- 実は凸ではなく、局所最適解でない

のであれば、成り立たないこともありますよね。また、正定値にするために、対角成分を嵩上げ($A^\prime =A + \lambda I$)したとしても、対称である条件を満たしていないと悪さをすることがあるようです。

# まとめ

いろいろ条件を変えたけれど、収束性については一応納得できてきました。数学的にしっかり考えているような文献もあるので、時間があれば読んで考えてみたい気もします。Wikipediaにも convergence properties の記述があります。

https://en.wikipedia.org/wiki/Conjugate_gradient_method

(2022/12/15)
AD 移行に失敗した話

謎のアドベントカレンダー、第 19 話です。

これは、確か Windows Server 2003 が出た頃の話だったと思います。

## NT ドメインから Active Directory へ移行することにした

筆者の職場では、それまで Windows NT のドメインを使っていました。

当初、**ドメインにログオンする全端末が同じユーザー名・パスワード無し** という、

**「なぜドメインにしたし??」**

という不思議な状態でしたが（当然ファイルサーバーに置いたファイルは、たとえ個人的なものであっても他人から見放題・改ざんし放題・移動し放題・削除し放題）、それも解消し、Windows XP のパソコンも増えて「さすがにそろそろマズいな」と思って移行を計画しました。

## テスト環境を構築したところまでは順調だった

書籍を参考に、ドメインコントローラーの移行先を Windows 2000 Server（Service Pack 3）に決めました。

（一旦 Windows 2003 ドメインは見送り）

Windows NT 4.0 Server のドメインコントローラーからの移行手順も確認しながら実際にテスト環境で移行してみたところまでは良かったのです。

何の問題もなく移行でき、移行後の Active Directory 参加サーバーもクライアントも問題なく動作していました。

## そして、社内の NT ドメインを Windows 2000 の Active Directory へ移行

移行直後も何の問題もなく動いているように見えました。

が、それは、**移行当日が日曜日で社内にいる人が少なかったから、** でした。

## 翌日、事件発生

朝のうちは良かったのですが、昼→午後→夕方、と時間の経過につれて、ネットワークが重くなり、ファイルサーバーなどの通信ができないケースが増えてきました。

ドメインコントローラーを再起動すると一旦は収まりましたが、しばらく経つとまた同じ状況になりました。

年末が近く、税理士法人としてはピークではないものの繁忙期、社労士法人も同じように忙しい時期でした。

（非常にマズいです）

その週の週末は社員旅行兼忘年会でしたが、上司を道連れに、前々日にキャンセルして復旧にあたることを決めました。

（非常に申し訳ないです）

## 社員旅行兼忘年会の前日

社員旅行兼忘年会をキャンセルしたその日の夜、すぐに原因に思い当たって、翌日には設定を修正。

直りました。

**Active Directory に DNS を統合するのを漏らしていた** のでした。

…さすがに社員旅行兼忘年会はキャンセル→ドタ参というわけにはいかず、当日はただの休みになりました。

個人的には美術館に出掛けて気晴らしできたから良かったのですが、上司をキャンセルの道連れにしてしまったのが悔やまれます。

o……rz

---

20 日目の記事に続きます。

- **[ラックの設置に困った話](https://qiita.com/hmatsu47/items/116b208ae67deb8ad513)**

https://qiita.com/hmatsu47/items/116b208ae67deb8ad513
input要素をフォーカスしたときにラベルをアニメーションしながら移動させる

[ひとりCSS Advent Calendar 2022](https://qiita.com/advent-calendar/2022/css-becolomochi) 16日目です。

input要素をフォーカスしたときにラベルをアニメーションしながら移動させる、を実装しました

## Codepen

以下で動きを確認ください。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="poKMWMZ" data-user="becolomochi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/becolomochi/pen/poKMWMZ">
  scroll-padding-top</a> by Beco (<a href="https://codepen.io/becolomochi">@becolomochi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## コード解説

### HTML

名前とメールアドレスを入力する input を作りました。

```html
<div class="input-group">
  <label for="name">name</label>
  <input id="name" name="name" type="text" class="input">
</div>
<div class="input-group">
  <label for="mail">mail</label>
  <input id="mail" name="mail" type="email" class="input">
</div>
```

label 要素と input 要素をそれぞれ div 要素で囲んでいます。
よく見かけるいつものやつですね。
input 要素には適当なクラス `input` をつけていますが JS で操作するためです。

### CSS

長くなるので大事な箇所以外は省きました。詳しくは Codepen を見てください。

```css
.input-group {
  position: relative;
  padding-top: 40px;
}

label {
  position: absolute;
  transition: 0.2s;
  top: 50%;
  translate: 0 -50%;
}

.input-group:has(input:focus) label,
.input-group:has(input.filled) label {
  top: 0;
}

input {
  position: absolute;
  top: 0;
  width: 100%;
}
```

- 親要素に `position: relative` とエリアの高さを設定
    - （padding-top ではなく height のほうが良かったかもしれない…）
- 子要素の label と input に絶対値を指定して位置を決める
- label に transition でアニメーションさせる指定をいれる
- `:has()` を使って、input にフォーカスがあたっているときと入力後に label の位置をずらす指定
    - 入力後については後述の JS で設定します
- Sass(SCSS) を使えばもっといい感じに省略して書けます

### Javascript

input に文字が入力されたかどうかを判定する JS を用意しました。

```js
const inputs = document.querySelectorAll(".input");

inputs.forEach((input) => {
  input.onchange = function () {
    if (input.value !== "") {
      input.classList.add("filled");
    } else {
      input.classList.remove("filled");
    }
  };
});
```

`input` クラスのついた項目の入力を見て、何かしら文字が埋まれば `filled` クラスを適用します。
入力を終えたあとの input 要素からフォーカスが外れても label 要素は上に移動したままになりました。
これをしないと、label 要素と入力したテキストがかぶって文字が読めなってしまいました。
※JS弱々なのでもっと良い書き方があるかもしれません…

## 感想

:has() を有効的に使えるサンプルが作れてよかったです。楽しい〜！
【VisualStudio】使用DLLのXMLコメントを見れるようにする

# はじめに
開発をしていれば、共通ライブラリの開発などをしていくと思います。

その共通ライブラリを使用する人がコメントを見れないのは残念ですよね。現場ではXMLコメントを使用していながら、他ソリューションで使用したらコメント見れないなんてことが多発してました。。。何のためにコメントを付けたのでしょうか。。。

なので、XMLコメントを見れるようにするための設定方法をまとめていきます。

## 使用環境
・Visual Studio 2022

# サンプルコードに関して
* Class1
    * Fooと出力するメソッド
    * こちらはクラスライブラリで作成します

これをコンソールアプリケーション上(Program.cs)で呼び出します。

```C#:Class1.cs
	/// <summary>
	/// クラス1
	/// </summary>
	public sealed class Class1
	{
		/// <summary>コンストラクタ</summary>
		public Class1(){}

		/// <summary>コンソールにFooと出力します。</summary>
		public void Foo() 
		{
			Console.WriteLine("Foo"); 
		}
	}
}
```

```C#:Program.cs
using Sample;

var class1 = new Class1();
class1.Foo(); //output:Foo
}
```

# 何も設定せずにただ参照追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3013193/ebcfe715-dc49-2f2e-bd23-74382e55db5e.png)
* 「コンストラクタ」と記載したはずのコメントが見れません。



# 設定方法
1. プロジェクトを右クリック　＞　プロパティ　を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3013193/c8d4f9f7-1951-b7fa-8098-7d39c160407d.png)

2. ビルド　＞　出力　＞ドキュメントファイルにチェック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3013193/994bde57-ee7f-95e8-ac72-29da216a31bd.png)

3. これでビルドし直して、新しくできたDLLを参照するように変更します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3013193/1204b6fd-7a13-3d4d-cb8a-6dd8af5f6b8b.png)

* XMLコメントが見れるようになりましたね！！

以上、VisualStudio上でXMLコメントを見れるようにするための設定方法でした。

以下、参考文献となります。

https://learn.microsoft.com/ja-jp/visualstudio/ide/reference/generate-xml-documentation-comments?view=vs-2022
Reactでhtml

# Qiita 記事投稿練習

```diff_javascript
this.name={Lessonn}
```

`puts 'Qiita'` と書くことでインライン表示することも可能です。

`` `バッククオート` `` や ``` ``2連続バッククオート`` ``` も記述できます。

`#ffce44`
`rgb(255,0,0)`
`rgba(0,255,0,0.4)`
`hsl(100, 10%, 10%)`
`hsla(100, 24%, 40%, 0.5)`
# これはH1タグです
## これはH2タグです
###### これはH6タグです

_ か * で囲むとHTMLのemタグになります。Qiitaでは *italic type* になります。
__ か ** で囲むとHTMLのstrongタグになります。Qiitaでは **太字** になります。

打ち消し線を使うには ~~ で囲みます。 ~~打ち消し~~

:::note info
インフォメーション
infoは省略可能です。
:::

:::note warn
警告
○○に注意してください。
:::

:::note alert
より強い警告
○○しないでください。
:::

* * *
***
*****
- - -
---------------------------------------
ミニマルな静的サイトジェネレータを作っている話

この記事は、[Python Advent Calendar 2022](https://qiita.com/advent-calendar/2022/python) の 16 日目の記事です。

この記事では、最近少しずつ作っている静的サイトジェネレータ [mdsite](https://github.com/iizukak/mdsite) をご紹介したいと思います。Python 製です。

## デモ

デモを Github Pages で公開しています。[こちら](https://iizukak.github.io/mdsite/) のリンクからご覧になれます。スクリーンショットが以下です。
![スクリーンショット 2022-12-16 12.27.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322/3c34055e-ec35-d69b-b34e-b768bf5d10c5.png)
ミニマルな雰囲気なのが分かるかと思います。まだぱっと見で分かるようなバグも残っていまして、完成度はご容赦ください。

## なぜ静的サイトジェネレータを作るのか

モチベーションとしては、Github Pages などで公開するドキュメントをサクサク作れる簡易的な静的サイトジェネレータが欲しかったというのがあります。それと、個人的に静的サイトジェネレータを作ってみたかったというのもあります。基本的な使い方は、MarkDown でサイトの元となるドキュメントを書いた後、設定ファイル `mdsite.yaml` を置いて、 `mdsite` コマンドを実行するだけの簡単仕様です。CSS テーマの設定はありません。ミニマルな見た目のサイトであれば、テーマないらないかなという思いがあります。

## 利用しているライブラリ

Python の Advent Calendar なので Python のことも書いておくと、

- テンプレートエンジンには [Jinja](https://jinja.palletsprojects.com/en/3.1.x/) を利用しています
- Markdown のパースと HTML への変換には [Python-Markdown](https://python-markdown.github.io/) を使っています。Python-Markdown は拡張が便利で、[Fenced Code Blocks](https://python-markdown.github.io/extensions/fenced_code_blocks/) は今回も利用しています
- Python パッケージとして利用できるようにしてあります。PyPI にはアップロードしてありませんが、`make install` を実行すればお使いの Python 環境に `mdsite` コマンドがインストールされるようになっています。詳しい使い方についてはリポジトリの README を読んでいただければと思います。

2023 年はこの静的サイトジェネレータをぼちぼち育てていく年にしたいと思っております。それではみなさん良いお年を。
leetcode121 を解いてみた

# 解いているときの方針
自分で1回はプロセスを考える。解けなくてもOK。
解けなかったときは、振り返ることが可能な程度まで言語化する。
※考え方おかしくない？というのがあればご指摘くださいまし。

# 問題紹介

問題は以下URL参照

https://leetcode.com/problems/best-time-to-buy-and-sell-stock/description/

## 最初の考え
- 愚直にやったら時間制限に引っかかりそう...
- 他にいい感じの解法が思いつかないからとりあえず実装してみるか。実装するのは軽いし。

```　最初の提出.py
class Solution:
    def maxProfit(self, prices: List[int]) -> int:
        max_num = 0

        for i, bf in enumerate(prices):
            for j, af in enumerate(prices[i:], len(prices)-1):
                tmp = af - bf
                if tmp > max_num:
                    max_num = tmp
        return max_num
```

案の定Time Limit Exceeded...

## 思考中

- 重複抜いたらいけるんじゃね？
    - 配列の順序が影響する場合には重複削除はNGな気がする。
- 配列長の半分まで見て、前後の配列長を比較したら冗長な計算省けるのでは？
    - 結果的にこれの考え方は近かったが、しっくり実装できず...。

## 結果
Solutionsを確認しました(´・ω・｀)

- 最適値を取り得る要素をサーチすればOK
    - 最適な値の場合(ex:0)、max_profitの候補を網羅できるはず(常にbuy < sellとなる)。この候補をサーチする。
    - 負数になった時点で最適値の候補からは外れる。
    -　　You want to maximize your profit by choosing a single day to buy one stock and choosing a different day in the future to sell that stock.を前提とした考え方になる。

変に考えずにシンプルに考えないとだね(´・ω・｀)
.NET6 usingディレクティブはどこ？

# 概要
.NET6でWinFormsアプリケーションを作ろうとしたらusingが無い！？
となったので調べたことのメモ。

# 環境
IDE: Visual Studio 2022
プロジェクトテンプレート: Windows フォームアプリ
フレームワーク: .NET6.0 (長期的なサポート)

# 調べた結果
生成されたForm1.csファイルは以下の通りでした。
Formクラスを継承しているのにも関わらず、usingディレクティブにSystem.Windows.Formsが見当たりません。

```c#:Form1.cs
namespace WinFormsApp1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
    }
}
```

調べると公式のドキュメントに以下の記述がありました。
>.NET 6 以降、暗黙的な global using ディレクティブが新しい C# プロジェクトに追加されます。 
これは、完全修飾名を指定したり、using ディレクティブを手動で追加したりしなくても、
これらの名前空間で定義された型を使用できることを意味します。
>
また、
> ImplicitUsings プロパティを使用すると、.NET 6 以降のバージョンと C# 10 以降のバージョンをターゲットとする C# プロジェクトで、暗黙的な global using ディレクティブを有効または無効にすることができます。 この機能を有効にすると、.NET SDK により、既定の名前空間セットに対して、プロジェクト SDK の種類に基づいて global using ディレクティブが追加されます。 暗黙的な global using ディレクティブを有効にするには、このプロパティを true または enable に設定します。 暗黙的な global using ディレクティブを無効にするには、このプロパティを削除するか、false または disable に設定します。
>


生成された.csprojを見ると、上記のImplicitUsingsプロパティがenableに設定されていました。
このおかげで記述しなくても暗黙的にusingディレクティブが有効になっているようでした。

``` c#:WinFormsApp1.csproj
<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net6.0-windows</TargetFramework>
    <Nullable>enable</Nullable>
    <UseWindowsForms>true</UseWindowsForms>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

</Project>
```

また、暗黙的に追加される既定の名前空間は使用しているSDKによって決定されます。
Windowsフォームアプリでは、**Microsoft.NET.Sdk** の
+ System
+ System.Collections.Generic
+ System.IO
+ System.Linq
+ System.Net.Http
+ System.Threading
+ System.Threading.Tasks

と、**Microsoft.NET.Sdk.WindowsDesktop (Windows Forms)** の
+ System.Drawing
+ System.Windows.Forms

が追加されています。

既定の名前空間の追加や削除は、.csprojファイルに以下のように記述することで可能です。

``` c#:WinFormsApp1.csproj
<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net6.0-windows</TargetFramework>
    <Nullable>enable</Nullable>
    <UseWindowsForms>true</UseWindowsForms>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  <ItemGroup>
    <Using Include="System.Text.Json"/>
    <Using Remove="System.Net.Http"/>    
  </ItemGroup>
  
</Project>
```

VisualStudioで.csprojファイルを右クリック→プロパティからも可能なようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779169/af296825-0c22-2ed2-0637-37d1f69e70a1.png)



# 所感
既定の名前空間は記述不要になり、便利になりました。
少し違和感は感じますが、使っているうちに慣れるでしょうか。。笑

# 参考

この記事は以下の情報を参考にして執筆しました。

https://learn.microsoft.com/ja-jp/dotnet/core/project-sdk/overview

https://learn.microsoft.com/ja-jp/dotnet/core/project-sdk/msbuild-props

https://learn.microsoft.com/ja-jp/dotnet/core/project-sdk/msbuild-props-desktop
Power BI vs Shadow BI

:::note info
キャプション画像や参考リンクなどの用意が間に合いませんでした m(_ _)m
とりあえず文章だけ公開して、後日追加いたします。 
:::

# 0. はじめに
以前、Power BI コミュニティの勉強会で『なぜカレーから肉じゃがを作ろうとするのですか？』というふざけた発表をさせていただきました。その際にこの問題が「Shadow BI」というカッチョイイ名前で呼ばれていることを知り、いつかどこかでまとめておきたいと思い本日に至ります。「Shadow BI」問題とはなにか？それに対して Power BI で何ができるのか？について、簡単ですがまとめてみました。

# 1. Shadow BI とは？
「Shadow BI（シャドービーアイ）」問題とは、Power BI や Teableau などのBIツールで作成したBIレポートから、エンドユーザー（閲覧者）が元となっているデータをダウンロードしたりコピペしたりして、別の目的に再利用してしまう行為のことを指します。Shadow IT 問題と同様に企業においては問題視されるています。
なぜかというと、BIレポートのデータはそのレポートを作成するために相応しい加工整形やモデリングがされているため、エンドユーザーが別の目的で必要とする形式や抽出条件になっていない可能性が大きく、その結果、間違った判断や間違ったアクションを導いてしまうことがあるからです。
例えるなら、せっかく作ったカレーから素材である「肉・ジャガイモ・ニンジン・玉ねぎ」を抜き出して別の鍋に移し、そこに出汁とみりんとしょう油を加えて肉じゃがに作り替えるぐらい愚かな行為です。

# 2. なぜそれは起こるのか？
エンドユーザーたちはなぜそんなことをするのでしょうか？彼らの利用目的は大きく分けて二つです。
### 別レポートへの転用
開発者が提供したレポートでは要件を満たさないため、別のレポートを作成するためにデータだけを利用するパターンです。単純に分析軸が違うレポートを作りたい、というときもありますが、多くの場合はダウンロードしたデータにオリジナルのマスタデータなどを追加して自部署のオリジナルレポート化するパターンが多いです。

### 管理台帳の元データとしての利用
レポートからダウンロードしたデータを、営業部門の進捗管理台帳や対応顧客リストとして活用するパターンです。Power BI のレポートは基本的に読み取り専用であるため、表示されるテーブルデータに対して何か情報を付加したり保存したりすることができないため、このような行為が行われます。

# 3. どうすりゃいいの？
いちばんの解決策は、BIレポートはあくまでも最終成果物であり、そこからデータをダウンロードして二次利用することは『良くないこと』であるとユーザーに認識してもらい、社内で正式なビジネスデータを提供するデータウェアハウスなど仕組みを構築し、また同時にビジネスデータについてのナレッジやリテラシーを高める教育を実施することです。
しかし、そのような仕組みを作り上げるためには多くの時間と費用と人的リソースが必要となるため、なかなか実現するのは難しいです。そこで、Power BI の下記の機能を利用して、Shadow BI をなるべくコントロールしたり、簡易的なデータ提供の仕組みを作成することができます。

### ダウンロード専用テーブルの作成
非常に原始的で消極的な方法ですが、データをダウンロードするための専用テーブルヴィジュアルを用意して、そこからのみダウンロードしてもらう方法です。ヴィジュアルの右上の三点リーダから「データのエクスポート」でそのビジュアルの元となっているデータをCSV形式でダウンロードできますので、だれでも簡単に利用することができます。
意図しないヴィジュアルからダウンロードされるよりはまだガバナンスができまが、ダウンロードされるデータはいわゆる「大福帳形式」となるため、そこからさらに集計を行う際などには注意が必要となります。

### Power Automate で出力
上記の方法と似ていますが、Power Automate との連動機能を利用して、ボタンを押すとデータがダウンロードできる仕組みを作ります。ダウンロードされるデータの形式を開発者側でコントロールすることができる利点があります。例えば、テーブル上では個人情報が見えているが、ダウンロードされるデータにはそれらの項目は入らないようにするなどの制御が可能です。
通常のやり方だと Power Automateの仕様により1000レコード分しかダウンロードできないですが、最近実装された、API経由でDAXクエリ実行したり、テーブルデータをCSV形式化するTOCSV関数などを利用すれば、ある程度大きな件数のデータもダウンロードすることができます。
また、上記方式のように直接デスクトップなどにダウンロードできない不便さはありますが、Power Automate 側に実行ログが記録されるため、いつ、だれが、どのデータをダウンロードしたのかが後でわかるという利点もあります。

### dataset の共有
Power BI のデータセットはユーザーに対して共有することができます。Power BI からの接続はもちろん、Excelからの接続も可能です。やDAXメジャーの共有やセキュリティレベルの反映などもでますし、接続方法によっては手持ちのマスタデータなどをモデルに追加して集計することも可能です。
ただその反面、元となっているデータモデルの構造理解が利用するエンドユーザー側でも必要となるため、複雑なデータモデルの共有は難易度が高くなります。

### dataflow datamart による共有
dataflow や現在プレビュー機能の datamart 機能を利用しての共有も可能です。dataset の共有よりもモデリングする前のプレーンな状態でのデータ共有を目的としているため、よりデータウェアハウスの仕組みに近いものになります。こちらも最近では Excel からも接続ができるようになりました。
ただ、これらの機能を効率的に利用するためには Power BI Premium ライセンスが会社を導入されていたほうがよいと思います。

# 4. まとめ
残念ながらこれ一発で解決！という大正解はないと思います（あったら教えて）。It depends ! 場合によるぜ！なので、いろんな解決方法を知っておき、その状況にあった手段を取ることができるようにしておいたほうがよいと思います。
Power BI にはエンタープライズBI実現のための機能が日々実装されていっております。これからもきっと進化していくと思いますので皆さんキャッチアップしていきましょう！
メモ②

```
■課題概要
データベースリンク仕様を調査する。
Oracle on EC2(Windows)を2台作成、データベースリンクの動作確認をする。

■確認方法
sqlplus /nolog
conn / as sysdba
col OWNER for a10
col DB_LINK for a10
col USERNAME for a10
col HOST for a10
col VALID for a5
select OWNER, DB_LINK, USERNAME, HOST, VALID from dba_db_links;
exit

■Private Database Link作成方法（例）
CREATE DATABASE LINK takahashi_link_pri
  CONNECT TO takahashi IDENTIFIED BY takahashi
  USING '(DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=XXX.XXX.XXX.XXX)(PORT=1521))
    (CONNECT_DATA=(SERVER=DEDICATED)(SERVICE_NAME=orcl1)))';

■Public Database Link作成方法（例）
CREATE PUBLIC DATABASE LINK takahashi_link_pub
  CONNECT TO takahashi IDENTIFIED BY takahashi
  USING '(DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=XXX.XXX.XXX.XXX)(PORT=1521))
    (CONNECT_DATA=(SERVER=DEDICATED)(SERVICE_NAME=orcl2)))';

■削除方法
DROP database link <データベースリンク名>;

■接続情報
①db-Oracle1
グローバルIPアドレス：-
プライベートIPアドレス：-
パスワード：-

②db-Oracle2
グローバルIPアドレス：-
プライベートIPアドレス：-
パスワード：-

■データベースリンク使用例
SELECT * FROM <リンク先のテーブル名>@<データベースリンク名>;

■データベースリンクを作成するために必要な権限
・自スキーマに作成する時
　CREATE DATABASE LINK
・パブリックデータベースリンクを作成する時
　CREATE PUBLIC DATABASE LINK

grant <権限> to スキーマ名;

■実行手順
①EC2にOracle Databaseを構築する。
②takahashiスキーマを両方に作成する。
③2号機にのみtakahashiテーブルを作成し、データを挿入する。
④1号機から参照できないことを確認する。
⑤takahashiスキーマにてデータベースリンクを作成する。
⑥両方のサーバでデータベースリンクの確認コマンドを実行する。
⑦1号機から2号機へtakahashiテーブルの参照をする。
⑧1号機の他のスキーマから参照してみる。
⑨逆を試してみる（2号機のtakahashiスキーマから1号機のtakahashiスキーマを参照する）。
⑩Publicはどうなる？
⑪上記を資料にまとめること（形式は自由。）。
```
シェルスクリプト超入門（ファイル作成と変数）

## はじめに
シェルスクリプトは複雑な操作を１つのコマンドにすることで様々な作業の効率化を図ることができます。

覚えておくと便利。
ということでシェルスクリプトの基礎をまとめました。

## この記事に書くこと
- シェルスクリプトの概要
- シェルスクリプトのファイルについて
- シェルスクリプトの変数について

## シェルスクリプトの概要
シェルスクリプトはコマンドを１つのファイルに集約することです。

### 利用シーン
シェルスクリプトは同じOSなら、誰が動かしても同じ結果になります。
その利点を生かして以下の利用シーンが考えられます。

- 同じコマンドを何度も実行する作業の自動化
    - デプロイで必要なコマンドの一括実行
    - 計算後にファイル抽出などレポートの作成
- 引き継ぎ
    - 複雑な処理もシェルスクリプトのファイルを渡すだけでOK

### シェルスクリプトの欠点
- 他のプログラミング言語に比べて特殊な書き方やルールが多い
- 開発環境やテスト環境が貧弱
    - 大人数の作業に不向き

## シェルスクリプトのファイルについて

### ひとまずHello,World

```bash:hello.sh
#!/bin/bash
echo 'Hello,world!'
```

### 拡張子が.shな理由
シェルスクリプトの拡張子はなんでも構いません。`hello`でも`hello.yahooooo`でも動きます。
しかし、慣習的に拡張子は「.sh」を使うことが多いです。
そのため、特別な理由がない限りは「.sh」を使いましょう。


### `#!/bin/bash`はなにをしているか
これはshebang(シェバン)と呼ばれるもので、「このスクリプトはbashで動作しますよ」という印です。
この行を追加することでファイルを呼ぶだけで実行できるようになります。

```bash:ターミナル
~ ./hello.sh
Hello,world!
```

もし`sh`コマンドで動かす場合は　以下のように一行目を書き換えてください。
なお、bashで使えて、shで使えない機能があるため、すでにshで作られているシェルスクリプトでなければ、`#!/bin/bash`にすることをお勧めします。
```bash:shコマンドのシェバン
#!/bin/sh
```

### 標準出力 `echo`
`echo`コマンドは引数で指定された文字列を出力するコマンドです。
-nオプションをつけると改行されずに出力されます。

```bash:echo.sh
#!/bin/bash
echo -n 北海道
echo -n は
echo -n でっかいどう
```

```:ターミナル
~ ./echo.sh
北海道はでっかいどう
```

## シェルスクリプトの変数について
多くのプログラミング言語と同様に、bashでも変数が使用できます。
bashの変数名は、アルファベット、数字、_（アンダースコア）の組み合わせが使えます。
ただし数字は先頭には使えません。

#### 利用可能な変数例
<table>
<tr>
<td rowspan="3">利用可能</td>
<td>app1</td>
</tr>
<tr>
<td>_tmp</td>
</tr>
<tr>
<td>AppScript</td>
</tr>
<tr>
<td rowspan="2">利用不可</td>
<td>my-app(ハイフン不可)</td>
</tr>
<tr>
<td>1th_name（先頭に数字不可）</td>
</tr>
<tr>
</tr>
</table>

#### 変数の宣言

変数は「変数名=値」の形式で値を代入します。
`=`の間にスペースやタブを入れてはいけません。

変数に入れた値はdeclareなど宣言がなければ**文字列として扱われます**。
そのため、「'(コーテーション)」や「"(ダブルコーテーション)」は省略できます。

しかし、スペースやタブの入った１つの文字列として扱いたい場合は「'」か「"」で囲む必要があります。

```bash:variable.sh
#!/bin/bash
# 変数は文字列として扱われる
ROOT_DIR=/home/shell
# 空白を含み、１つの文字列として扱いたい場合は''か""で囲む
SPACE_TEXT1='Document file'
# 出力結果はSPACE_TEXT1と同じ
SPACE_TEXT2=Document file
# 値を入れなければ、空文字になる
empty=
```

#### 変数の参照

変数を参照するときは定義した変数の先頭に「$」をつけます。
**なお、「$」は変数を参照時のみです。**
代入時に「$」をつけるとエラーになります。

```bash:variable.sh
#!/bin/bash
ROOT_DIR=/home/shell
SPACE_TEXT='Document file'
empty=

# 参照時は$を先頭につける
echo $ROOT_DIR
echo $SPACE_TEXT
echo $empty
```

```:ターミナル
# 最後の行は空文字
~ ./variable.sh
/home/shell
Document file

```

#### 変数と文字列を組み合わせる
変数の直後に文字列をつなげたい場合、変数を${}で囲みます。

```bash:variable.sh
#!/bin/bash
item=pen
echo I have a ${item}s
```

```:ターミナル
~ ./variable.sh
I have a pens
```

## おわりに

シェルスクリプト超入門として、ファイル作成と変数を記事にしました。
シェルスクリプトを自作できれば、色んな業務効率化ができそうです。

環境設定を対話方式で行うときにシェルスクリプトを使えば実装できるんじゃないかなーと思ったので今度試してみたいです。



## 参考
https://www.amazon.co.jp/%E6%96%B0%E3%81%97%E3%81%84%E3%82%B7%E3%82%A7%E3%83%AB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8-%E4%B8%89%E5%AE%85-%E8%8B%B1%E6%98%8E/dp/4797393106
Kageki (TD4互換機) で早押しゲーム

[TD4の命令を実行できる自作CPU「Kageki」](https://elchika.com/article/9ac9fd67-86c5-4b1b-a355-4f662e8af794/)で早押しゲームを作ってみた。

# 今回の早押しゲーム

ビットの表記は最下位ビットを0とする0-originである。

1. プレイヤー2人とスターター1人の計3人を用意する。(プレイするには、まず人脈♪)
2. 入力ポートのビット1～3にそれぞれボタン (押すとHIGH、押さないとLOW) を接続する。
3. プログラムを実行する。
4. スターターが入力ポートのビット0に接続されたボタンを押す準備をする。
5. 1人のプレイヤーが入力ポートのビット3に接続されたボタンを押す準備をする。
6. もう1人のプレイヤーが入力ポートのビット2に接続されたボタンを押す準備をする。
7. スターターが適当なタイミングでボタンを押し、押しっぱなしにする。
8. プレイヤーは、スターターがボタンを押したら、素早くボタンを押す。
9. 早くボタンを押した方のプレイヤーが勝利である。ただし、スターターがボタンを押すより早くプレイヤーがボタンを押した場合は、早くボタンを押した方のプレイヤーでない方のプレイヤーが勝利である。2人のプレイヤーが同時にボタンを押した場合は引き分けであり、勝利するプレイヤーは居ない。
10. ビット3に接続されたボタンを押す方のプレイヤーが勝利した場合は、出力ポートのビット3がHIGHになる。ビット2に接続されたボタンを押す方のプレイヤーが勝利した場合は、出力ポートのビット2がHIGHになる。

# プログラム

```
位置 機械語   アセンブリ言語
---------------------------------
0    00100000 START:  IN  A
1    00000100         ADD A, 0100
2    11100100         JNC NODRAW
3    11110011 DRAW:   JMP DRAW
4    00000100 NODRAW: ADD A, 0100
5    11101010         JNC NO3
6    00001110         ADD A, 1110
7    11101110         JNC WIN2
8    10111000 WIN3:   OUT 1000
9    11111001 END3:   JMP END3
A    00000100 NO3:    ADD A, 0100
B    11100000         JNC START
C    00001110         ADD A, 1110
D    11101000         JNC WIN3
E    10110100 WIN2:   OUT 0100
F    11111111 END2:   JMP END2
```

* 0番地：入力の読み込み
* 1～2番地：引き分けの判定
* 3番地：引き分けで終了
* 4～5番地：ビット3のプレイヤーが先にボタンを押したかの判定
* 6～7番地：フライングの判定
* 8～9番地：ビット3のプレイヤーが勝利で終了
* A～B番地：ビット2のプレイヤーが先にボタンを押したかの判定
* C～D番地：フライングの判定
* E～F番地：ビット2のプレイヤーが勝利で終了

# 実行結果

入力ポートに [Pmod BTN](https://digilent.com/shop/pmod-btn-4-user-pushbuttons/) を接続して実行した。
なお、同モジュールのボタンは、端子を左向きにして上から見たとき、右上がビット1、左下がビット2、右下がビット3である。
そのため、ボタンの位置と出力ポートの状態を表すLEDの点灯位置は逆になっている。

<iframe width="560" height="315" src="https://www.youtube.com/embed/M0uBdHxg1Es" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# 関連記事 (他の作者様)

* [早押し対決ゲーム - SHIROのIchigoJam日記](https://www.ichigojaman.jp/entry/pushfirst)
  * 今回の仕様と同じく、2人で対戦し、合図の前にボタンを押すと相手の勝ちになる早押しゲーム。
* [「CPUの創りかた」のTD4を作った by shigobu | elchika](https://elchika.com/article/977f1e43-d10c-4086-b0af-d4ac80002f6f/)
  * TD4での早押しボタン。フライング判定は無く、単純にいずれかのビットが1になった時の入力ポートのデータが出力ポートに出力される。
【0日目】Plotlyで始める「魅せるデータ分析」～概要編～

# 初めに
　みなさんこんにちは！今回はPythonのデータ可視化ライブラリ、Plotlyについて学んでいきます。簡単な縦棒グラフ作成から最終的にはWebアプリケーション、例えばflaskなどを用いてPlotlyで可視化したデータを表示したいと思います。

### リンク
【0日目】Plotlyで始める「魅せるデータ分析」～概要編～ ←イマココ
[【1日目】Plotlyで始める「魅せるデータ分析」～超基本編～](https://qiita.com/yamazaki_yuto/items/016cd3eb200c911f4365)
[【2日目】Plotlyで始める「魅せるデータ分析」～多種多様なグラフを描画する～](https://qiita.com/yamazaki_yuto/items/1de1b68ceb425cefc261)
# Plotlyとは
 インタラクティブ(対話式)なグラフを作成できるライブラリです。PyThonのグラフ作成はmatplot.libが主流ですが、matplotlibは簡単に書ける代わりになんか古臭い…と思ったことはないでしょうか？
　Plotlyなら、matplotlibより若干難易度があがりますが、ビューティフルで見やすいグラフがかけます。
私はデータサイエンスにおいて、データの見せ方を非常に重視しているので、Plotlyはデータサイエンティストなら必修科目だと思っています。なので、一緒に学んでいきましょう。

# 実際どんなことができるの？
#### 動的なグラフの作成　
　下記GIFのように再生ボタンを押すと動くようなグラフを作成することができます。
　なんとこのグラフ、再生ボタン、停止ボタンそして下のスクロールバー、全部Plotlyのみで書くことができます。

![無題の動画 ‐ Clipchampで作成.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3067701/52be866b-315b-6492-0a7f-42396f10afb7.gif)


#### matplotlibとちがい、座標をチェックできる
　日本語が下手でごめんなさい。どういうことかというとマウスカーソルをグラフの点に合わせるだけで、座標が確認できます。
この例ですと、`x=b, y=3`ということが確認できますね。matplotlibですと、ここの座標を確認したい場合に元データをみるか、私はやり方知らないですが、長いコードを書くかということになると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3067701/81cd1f7a-fdff-4ca5-5671-e85937d0cf67.png)

今回の例のコードは以下の通りになります。とっても短いです。
```hello.py
import plotly.express as px

fig = px.line(x=["a", "b", "c"], y=[1, 3, 2], title="sample figure")
print(fig)
fig.show()
```

#### Webアプリケーションに組み込める
　Plotlyはベースがjavascriptで作られており、HTML/CSSととても相性がいいです。
どういうことかというと簡単にウェブアプリケーションに組み込めます。以下は私が昔作成した論文検索アプリケーションの可視化機能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3067701/cfc81a90-db0e-396f-9b84-db8208ce71d6.png)

　このアプリでは登録した論文と一致度が高い論文を図で表しています。青色の図が自分の論文テーマで付近の論文が自分のテーマに近い論文です。今回はマウスを緑色の小さな点においてます。そうすると、論文のタイトルが表示される、といった仕組みです。
これもPlotlyで作成いたしました。小さなサーバーで運営しているため、サーバーダウンの懸念がありURLを教えることはできませんが、一例までに…（どうしても知りたいという方は[Twitter](https://twitter.com/zaki_yuto_1997)までお願いします。）

# 最後に
　今回は手短にですが、Plotlyの紹介をいたしました。これから暇なときに続きを書きますので、乞うご期待してください。
できれば[Qiita](https://qiita.com/yamazaki_yuto), [Twitter](https://twitter.com/zaki_yuto_1997)のフォローをお願いします。

# 参考

- [公式ドキュメント](https://plotly.com/python/)
受託開発企業で一年働いてみて感じたこと

## はじめに
都内でWEBエンジニアとして働いている**まさきち**といいます。
受託開発企業に勤める中で経験したこと感じた事を語りたいと思います。

:::note warn
前提として、これから語る内容は全ての受託開発企業についてのお話しではなく、サンプル数１のお話ですのでご了承ください。
:::

## 目次
- この記事の対象読者
- 受託開発企業で働く中で感じたこと
    - 複数案件を掛け持つのが当たり前
    - フロント、バック、インフラ全てこなせる必要あり
    - ハードワークのため、体調やメンタルを壊してしまう人も
    - クライアントワークが主なのでお客様の対応で消耗しがち
    - 商流が深くなると厳しい環境になりがち
    - テストコードや設計にかける時間が少なくなりがち
    - 夜遅くまで残って仕事をしている人が多く、人生について考えさせられる。
    - 技術力や知識よりも顧客折衷や、マネジメント力が評価されがち
    - 効率重視なので技術が固定化されやすい
- 終わりに

## この記事の対象読者
- WEB系エンジニアを目指そうと思っている方
- 受託開発企業の働き方について知りたい方
- 同じ受託開発企業に勤めていらっしゃる方

## 受託開発企業で働く中で感じたこと

### 複数案件を掛け持つのが当たり前
人員のリソースが少ないため、保守案件を複数こなしながら、新規開発のプロジェクトを進める体制が常態化している。
複数案件を1日に対応する必要がありますが、あまりかけ持ちすぎると、スイッチングコストが高くなり頭が痛くなることもあります。
マルチタスクが苦手な人にとっては厳しい環境ですが、いろいろな案件のコードを見れたりするので経験値は貯まります。

### 開発における全ての領域をバランス良くこなせる必要あり
小規模案件を数多く回す必要があるので、全ての領域を自身が担当して進める必要があります。
フロントエンド、バックエンド、インフラ構築、さらに上流工程も、、、と広く携わることで知識が広がりますが、一つ一つは浅くなりがちなので悩みどころ。
一つの技術を極めたい人より、広い分野に幅広く携わりたい人におすすめです。

### ハードワークのため、体調やメンタルを壊してしまう人も
納期があり、絶対に間に合わせる必要があるため進捗が出ないと残業が常態化していきます。
人は足りないが売り上げを伸ばしていく必要があるため、限られたリソースで頑張る必要が出てきます。
スケジュールがタイトで一つの案件が炎上すると連鎖していき地獄図になります。
多くの時間仕事に向き合えるので、経験を普通の人の何倍も積むことが出来るのですが、耐えられないと体調やメンタルを壊してしまう人も...

### クライアントワークが主なのでお客様の対応で消耗しがち
開発を進めていく中でエンジニアと顧客が直接コミュニケーションをとる機会が多く、打ち合わせや資料作りにかなりの時間を費やします。
お客様の声をダイレクトに聞くことが出来るので、やり甲斐は感じますが、コードを書いている時間よりも上記に費やす時間の方が多いので、開発自体が好きな人は辛く感じるかもしれません。

### 商流が深くなるとブラックな環境になりがち
直接お客様からお仕事をもらえる元請になればある程度自由が効くのですが、孫請けになると元請の会社の顔色を見ながら仕事を進めていく毎日になります。スケジュールに遅れが発生したり、仕様と少しでも違うものを作るとかなり突っ込まれます。
プログラムの書き方や設計も元請のやり方に合わせなくてはいけなかったりするので、かなり制限されて自由度は低いです。
その代わり、要件定義や設計書は元請が作ってくれたりするので、コードを書く作業に集中出来る場合もあります。

### テストコードや設計にかける時間が少なくなりがち
納期や工数が決まっているので、工数を削減するためにテストコードを全く書かずに開発を進めたり、設計にかける時間も限られているので疎かになりがち。設計が酷いせいで後からバグの温床になって納期が遅れるといった経験もあります。設計とテストコードは大事ということが身に染みました...

### 夜遅くまで残って仕事をしている人が多く、人生について考えさせられる。
仕事に人生を捧げられるくらいの気持ちなら良いが、プライベートや家族との時間を大切にしたい人には辛い環境かもしれない。
時間を忘れて夢中でコードを書けたり、プログラミングが趣味です！と言える人には良い環境かもしれない。

### 技術力や知識よりも顧客折衷や、マネジメント力が評価されがち
燃えている案件でもをお客さんと調整して無事に納品まで持っていくスキル、コミュニケーション力などのスキルの方が評価されがち。
IT技術をひたすら学び、技術プロフェッショナルとして活躍したい！という人にはミスマッチかも。

### 技術が固定化されやすい
効率重視なので新しい技術を積極的に取り入れている余裕がなく、結局いつものパターンになりがち。
この構成はもはやレガシーなのでは？と思うこともしばしば。

## 終わりに
最後まで読んでいただきありがとうございました。
もっと色々と語りたい内容がありましたが、かなり激しい内容となってしまうため自粛しました。
興味ある方いらっしゃいましたら、私と会った際に直接聞いていただければと思います。