OmniAICreator/Qiita-1.07M huggingface dataset:
LSLを使ってセカンドライフで湯婆婆

こちらは、[Qiita湯婆婆アドベントカレンダー](https://qiita.com/advent-calendar/2020/yubaba)の23日目の記事になります。
みなさんがいろいろな言語で湯婆婆しているのが楽しそうで、勢い余ってエントリしてしまいました。よろしくお願いします。

さて、この記事で湯婆婆が降臨するのは仮想世界セカンドライフ。2007年ごろに日本に紹介され、当時は電通がブーム捏造したのなんのと騒がれ、その後も「まだあったのかー」などと揶揄され続けながらも、2020年の今に至るまでしっかり生き残っているサービスです。
セカンドライフの大きな特色の一つが、ユーザーが仮想空間内で様々なものを作れること。ボックスや球、円柱などの基本立体を組み合わせたり外部でモデリングしたメッシュオブジェクトをアップロードして、空間内に飾ったりできます。さらに、そこにスクリプトを書くことでオブジェクトを移動させたり外見を変えたりチャット欄に文字を表示させたり、様々な操作をすることができます。このスクリプトに使われている言語がLinden Script Language、通称が今回タイトルにうたっている「LSL」です。
LSLそのものについては数年前、これもアドベントカレンダー企画内で紹介させていただきましたので、そちらをご覧ください。

[LSL\(Linden Script Language\)のご紹介 \- Qiita](https://qiita.com/regicat/items/6077bdcbd91c1a7890de)

さて、本題に入りたいところなのですが、実は事前に下書きしてみたところ、意外と長い記事になってしまいました。他言語で湯婆婆実装できる程度のプログラミング知識がある方向けに、セカンドライフならではの要素の説明を入れながら書いてみたのですが、とりあえず動くところまででほぼ1記事分のボリュームを使い切ってしまいました。なので、数回に分けて記事を書き、こちらからリンクする形式としたいと思います。実装記事を読みたい方には、二度手間を取らせることになり申し訳ありません。
1日目の記事はこちらです。

[LSLを使ってセカンドライフで湯婆婆 その１ \- Qiita](https://qiita.com/regicat/items/1a99d657539ba733f146)

この先、足りていない個所の実装を加えていく形で記事を書いていきます。湯婆婆カレンダーは1日だけ、当記事のみをリンクしています。
プログラミングわからない人間がしばらくいろいろやって思った勉強法等について








#はじめに

どうも、N高等学校2年のあるていです。

私は今年度から転入した身なのでN高生でいられる時間は短いです。後一年しかない。
そんな中、N高生らしいことしたい思いでプログラミングを始めました。4月頃からN予備校を進めたのですが、諸事情でかなりの空白期間ができてしまい、それでやりたいことがかなり変わったためPythonを始めることにしました。11月の話です。

ちなみにそんなプログラミング初心者の初心者がアドカレに何書くんだよとか思うかもしれません。勢いとノリで書くことになったのでこちらもあわあわしてます。

はい、ここまで読んだみなさんならもうお分かりかもしれませんね。成果報告と初心者がやってよかったことを書きます。


#やったこと

Progate
Atcoderに出る
AOJをとにかくやった


順番に説明します

#Progate

これは先生に「プログラミング勉強したいんですけど…」って言ったら教えてくれました。つまり担任のお墨付きです。

まだなんもわかんない時にQiitaでコード見たり、細かい文字見ると拒絶反応起きますよね！
そんな貴方にProgate。UIがスッキリしててオシャレなので楽しく勉強できるし説明はわかりやすいし、何より自分で考えてコード書けるのでおすすめです。
これやったおかげでコードを冷静に読めるようになりました。
無料分だけでもやって損はないと思います。

担任にはもう頭が上がりません。ありがとうございます。

#Atcoder

友達が「Atcoderやろうぜ！四則演算できればいける！怖くないよ！」(脚色入ってます)と言ったので日曜日、ABCに出場してみました。

するとどうでしょう、できない。
簡単とかネットで書いてあるし友人も簡単って言ってるからいけるかな〜とか思ったらA問題でさえ解けなかったんですよ。

そこで、一回かなり落ち込みましたね。
progate少ししか進んでないけどいけるっしょ〜っていうノリで挑んでいいものじゃなかったですね。（個人差あり)

二回目も出ました。今度はもう「少し」progateを進めてから出ました。
前回の反省を生かし、色々考えましたが、難しく考えすぎた結果、これまた一問もACしなかった。
ヤケクソで友達にどうやって勉強してるのかと聞いたら「AOJ解いてるだけだよ〜わかんないところは解答解説読んでるよ！本とかもなんも買ってない！」

…AOJ、聞いたことあるけどやってなかった

ということでAOJを始めました。

#AOJ

最高だった。もっと早くやればよかったってレベル。この凄さをみんなに教えたくない…いや教えますけどそんぐらいすごい。

何がすごいかって、Hello Worldから始まるんです！

それから順々にレベルが上がりますけど、できなくても安心してください。言語解説がついてますよ！

ちなみにおすすめの進め方だなんて大層な事ではありませんが、
レベルアップしてわかんなくなったら言語解説が丁寧に書かれてるのでそれを読みましょう。わかんないところがあったら調べまくりましょう。そしてメモ帳にまとめるのがおすすめです。

私は「これはなんでこの動きをするのか？」→「ここがこうでこうなるから」の流れでメモしてます。またわかんなくなった時読み返して理解を深めたりしてます。
(ちなみにNotionってのがまとめた時綺麗なのでおすすめ、機能多くてとっつきにくいかもだけど私も使いこなせてないので安心してください)

それでもう一度進めてみてください、一発でACになった時の感動は半端ないですよ。私は泣きそうになりました。

なんやかんやで、Atcoderの過去問を解いてみたらなんとなくこの処理を使えばいけるなーってのがわかるようになりました。
最終的に「プログラミング勉強すれば、できんじゃん」という自信がつきました。

#まとめ

プログラミング学習サイトとか無料でもかなりありますが、あれこれに手出して中途半端にやるよりはAOJやったほうがいいと思います。あとProgate。

#最後に(後書きみたいなもの)

正直ここまで頑張れたのはほとんど友人と先生のおかげです。
実は「アドカレ書こうぜ！」って言ってくれなかったらアドカレ書かずにQiitaROM専のままだったし、また別の友人が「競プロやろうぜ！」って言ってくれなかったら路頭に迷ってたと思います。

先生がいなければ何もわからずにぼんやりと学習をしてたかもしれません。

このアドカレを読んでるのが誰なのかわかりません。N高生のやってることを知りたい社会人かもしれないし、N高に入りたい学生かもしれないし、プログラミングできないって思ってる方なのかもしれない。

そんな誰かへ向けたこの記事が、何か良い影響を与えられたら嬉しい限りです。



プログラミング、一緒に頑張りましょう！
next-env.d.tsの意味

## はじめに

create-next-appをしてプロジェクトを作成した時に作成される、`next-env.d.ts`というファイルがあります。
このファイルの中身は`///`の後にxmlが書かれているような内容になっており、これの意味は一体なんなんだ？と気になったので、調べてみました。

調べてみてある程度理解したつもりでいるものの、この理解であっているのか曖昧な部分もありますので詳しく知っている方がいればコメントで補足していただけると助かります！

## `///`から始まるコメント

`///`から始まるコメントは[Triple-Slash Directives](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html)と呼ばれるコメントです。
このコメントはTypeScript特有のもので、ファイルの先頭にあるTriple-Slash Directivesはコンパイラへの指示として読み込まれます。
このコメントがステートメントや宣言の後に書かれていた場合はただのコメントとして解釈されるので、必ず処理を書き始める前に書く必要があります。

Triple-Slash Directiveにはいくつかの種類がありますが、今回は`next-env.d.ts`に書かれている`/// <reference types="hoge" />`と基本の`/// <reference path="hoge" />`について調べていこうと思います。


## `/// <reference path="hoge" />`

このディレクティブはファイル間の依存関係の宣言として機能します。
`/// <reference path="hoge" />`とかけば、`hoge`というpathにあるファイルをコンパイルする時に対象に含めるようにします。

普通のtsファイルであれば、`export/import`を使って読み込めばいいのですが、exportされていないようなファイルなどが依存関係として必要な時にこのディレクティブを使うことができます。

```ts:lib/log.ts
const log = (...args: any[]) => console.log(...args)

```

```ts:src/index.ts
/// <reference path="../lib/log.ts" />

log('Hello World!')

```

このような関係のファイルがあった時に、`tsc src/index.ts --outFile dist/test.js`というようにコンパイルしてやることで、以下のようなコンパイル結果が出力されます。

```js:dist/index.js
var log = function () {
    var args = [];
    for (var _i = 0; _i < arguments.length; _i++) {
        args[_i] = arguments[_i];
    }
    return console.log.apply(console, args);
};
/// <reference path="../lib/log.ts" />
log('Hello World!');
```

これによって、exportされていなかった依存ファイルをスクリプトから呼び出せるようになります。
ほとんどのライブラリがnpmで公開されていたり、TypeScriptに対応している今ではあまり必要なタイミングが想像できないですが、jQueryのような`export/import`を使って書かれていないようなライブラリをTypeScriptで利用したい場合などに使えたようです。


## `/// <reference types="hoge" />`

このディレクティブも`/// <reference path="hoge" />`と同じようにパッケージの依存関係を宣言するのに役立ちます。

`/// <reference types="node" />`のようなディレクティブを記述すると、`@types/node/index.d.ts`で宣言された名前を使用することが宣言されます。
これによって、`@types/node/index.d.ts`がコンパイルの対象に含まれるようになるので、`node`パッケージの機能が使えるようになります。


## `next-env.d.ts`の意味

`next-env.d.ts`のなかは以下のようになっています。

```ts:next-env.d.ts
/// <reference types="next" />
/// <reference types="next/types/global" />

```

これは、`/// <reference types="hoge" />`のディレクティブを使っているので、`next`と`next/types/global`の宣言をコードの中で使用することを宣言しています。

これらのファイルの場所を確認してみると、`node_modules/next/types/index.d.ts`と`node_modules/next/types/global.d.ts`にあります。

これらのファイルで宣言されていることによって、Reactがグローバルで使えるようになっていたり、css modulesが使えるようになっていたりしています。

そして、`next-env.d.ts`ファイルを`tsconfig.json`でincludeしているのでこれらの宣言がコードの中で使えるようになっているわけです。

```json:tsconfig.json
...
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
...
```

## まとめ

Triple-Slash Directivesは普通にTypeScriptを書いているだけであまり使うことになる機能ではないかもしれませんが、気になって調べてみることでTypeScriptに関する視野が少し開けたような気がします。

今回の記事であげた2つのディレクティブ以外にもいくつかあるので、是非調べてみてください！

最後まで読んでいただきありがとうございました！


## 参考

- https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html
絵文字の読み方(発音)を取得する

[NCC Advent Calendar 2020](https://qiita.com/advent-calendar/2020/ncc) 21日目の記事です（遅刻）。

Discordで使う読み上げボイスボットなどを作る際、絵文字を読ませるには「🤔:考える顔」のように絵文字と読み方の対応表が必要になります。
ググればすぐ見つかるでしょ、とか思っていたんですが、意外と見つからなかったのでこの記事を書きました。

##元データ
結論から言うと、Unicode.orgの[このサイト](https://unicode-org.github.io/cldr-staging/charts/38/annotations/cjk.html)に表があります。
![スクリーンショット 2020-12-22 22.40.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951060/09424928-2043-83e0-43ac-de9ef23ec4d8.png)

この表はGitHub上のcldrリポジトリにある[xmlファイル](https://github.com/unicode-org/cldr/blob/master/common/annotations/ja.xml)を元にしている（と思われる）ので、このxmlを用いれば良さそうです。
このxmlデータには、絵文字とショートネーム及びキーワードの対応が載っています。「🤔」の場合、ショートネームは「考える顔」、キーワードは「考える顔 | うーん | 考える | 考え中 | 顔」となっています。なお、読み上げにはショートネームだけあれば十分です。


##jsonへの整形
JavaScriptではxmlフォーマットのデータは扱いづらいため、jsonに整形します。xmlパーサライブラリを用い、必要なデータだけを取り出します。
ということで作成したものが[emoji-pronunciation-ja]
(https://github.com/elecdeer/emoji-pronunciation-ja)です。下図の様なjsonデータになっています。
![スクリーンショット 2020-12-22 22.59.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951060/e8d2f1a2-43dd-8039-62d1-985fff4ee400.png)


##注意点
単純に文字列をreplaceするだけでは、想定した読み方にならない場合があります。
絵文字にマッチする正規表現として、`/\p{Emoji_Modifier_Base}\p{Emoji_Modifier}?|\p{Emoji_Presentation}|\p{Emoji}\uFE0F/gu`が有名ですが、これにマッチするものをjsonデータで置換、のようにするとうまくいきません。

```js:
const emojiReg = /\p{Emoji_Modifier_Base}\p{Emoji_Modifier}?|\p{Emoji_Presentation}|\p{Emoji}\uFE0F/gu;

const emojiReplace = text => {
	return text.replace(emojiReg, (match => {
		return emojiAnnotation[match];
	}))
}


```

例えば、「🐈‍⬛」が「ねこ 黒四角特大」と読まれてしまいます。「🐈‍⬛」は`U+1F408 U+200D U+2B1B`という「🐈」と「⬛」のUnicodeの組み合わせで表現されています。この色付き正方形文字との組み合わせで色を変更する表現方法は、最近Unicodeに追加されてたものであるため、この正規表現はそれに対応できていません。よって、結合された絵文字ではなく、「🐈」と「⬛」別々の絵文字としてマッチしてしまい、この様な事態が起こります。

修正方法に関してはまだ確立できていないため、できたら追記しようと思います。

このあたりの話は以下の記事に詳しいです。
[Unicode 絵文字にまつわるあれこれ (絵文字の標準とプログラム上でのハンドリング)](https://qiita.com/_sobataro/items/47989ee4b573e0c2adfc)

---
(追記)
環境によっては記事上の黒猫の絵文字がちゃんと表示されないようです。マジか...

ちゃんと表示されている
![スクリーンショット 2020-12-23 0.17.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951060/fa239ee9-86c4-de66-bbd1-4b0f8df6bd68.png)

表示されていない
![unknown.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951060/4902cc33-f58d-82ee-6b02-2b978a06e0d5.png)

---

##まとめ
Unicodeはえらいけどつらい。

##参考にしたもの
https://github.com/yagays/emoji-ja

以上です。
AndroidのUIテストで、非同期処理が完了するまで待機する(Rx編)

アプリのE2Eテストするとき、通信が完了するまで待つ必要がある。たとえば、E2Eテストにログイン操作があるとき。通信を待たないとログインの通信中にログイン後の画面を検証したり操作したりするので、当然テストは失敗する。

通信などの非同期処理をRxで実行しているとき、テストを待機させる方法を記述する。Androidアプリ、Espressoで使っているときの話。

## 実現手順
### 基本的な考え方

- IdlingResourceを使う
- プロダクトコード内のRxの非同期処理1つ1つにIdlingResourceを使った処理は仕込まない

RxJavaPlugins#setScheduleHandlerを使うと実現できる。Rxの全非同期処理の実行前後に、独自の処理を仕込めるので、それを利用する。

## Step0. IdlingResourceの導入

大体Espresso入れるときに、セットで導入しているとは思うが、一応示しておく。

```gradle:app/build.gradle
dependencies {
    // ここではプロダクトコードでIdlingResourceを使わないので、androidTestImplementation
    androidTestImplementation "androidx.test.espresso:espresso-idling-resource:3.3.0"
}
```

### Step1. CountingIdlingResourceで実行中の非同期処理をカウントする

汎用性のある処理なのでJUnitのTestRuleとして実装する。

```kotlin:RxTestRule
class RxTestRule : TestRule {
    override fun apply(base: Statement?, description: Description?): Statement = object : Statement() {
        override fun evaluate() {
            val rxIdlingResource = CountingIdlingResource("RxJava2", true)

            RxJavaPlugins.setScheduleHandler { oldAction ->
                Runnable {
                    try {
                        rxIdlingResource.increment() // 非同期処理が開始前にカウントアップ
                        oldAction.run()
                    } finally {
                        rxIdlingResource.decrement() // 非同期処理が開始前にカウントダウン
                    }
                }
            }

            val registry = IdlingRegistry.getInstance()
            registry.register(rxIdlingResource) // EspressoにCountingIdlingResourceを監視させる

            try {
                base?.evaluate()
            } finally {
                registry.unregister(rxIdlingResource) // テスト終わったらCountingIdlingResourceの監視を解除する
            }
        }
    }

}
```

※evaluateの中で@Before, @Test, @Afterの処理が実行される。

### Step2. Rxの非同期処理の実行数が1以上の間、EspressoのAPIが待機するようにする

先程作ったTestRuleをUIテストを実行するクラスに適用する。

```kotlin
@LargeTest
@RunWith(AndroidJUnit4::class)
class FooTests {
    @get:Rule
    val rxTestRule = RxTestRule()
    ...
}
```

これで少なくともRxの非同期処理の実行数が1以上の間は、sleepなしでEspressoのAPIが待機してくれるようになる。
onsenuiチュートリアル備忘録

#写真共有アプリの作成

##写真共有アプリを作りたい時

温泉UIを利用することで、現在のトップ写真共有アプリに対抗できるアプリを作ることができます。
そのために、このチュートリアルでは、有名な「Instagram」アプリと似たようなインターフェイスを持つユーザーインターフェイステンプレートを作ることにしました。

このテンプレートで使用している温泉UIコンポーネントは以下の通りです。

- ons-tabbar - テンプレートの構造を作るために使用されるメインコンポーネント
- ons-toolbar - 特定のボタンでアプリの異なるページにツールバーを作成するためのものです。
- ons-button - アプリ上のほとんどすべてのボタンに使用され、シンプルなボタンの外観を与えるために ons-icon と組み合わせて使用されます。
- ons-list - コンテンツが投稿や画像で構成されているため、ほぼすべてのページでコンテンツを構造化するために使用されます
- ons-row と ons-col - 写真をグリッド表示するためのページの構造化を容易にするために
- ons-carousel - ストーリーのスライドリストを作成するためのものです。
- ons-card - ホームとプロフィールページに投稿を表示するためのものです。

=========================

##テンプレートの構造

テンプレートは、同じ順番で5つのページから構成されています。

- ホームページ - ユーザーからの投稿やストーリーを表示するためのページ
- 検索ページ - 特定のコンテンツを検索するための
- カメラのページ - 新しい投稿を追加するための
- 通知ページ - ユーザーの投稿や他のユーザーの活動全般に関する最近の活動についての通知を表示するためのページです。
- プロフィールページ - ユーザーのプロフィールに関する情報を表示するためのページです。


##検索ページ

このページには、このページの主な目的である特定のコンテンツを検索するための検索入力を含むオンスツールバーがあります。
また、メインページと同様に実装されているストーリーで満たされたcarosuelと、検索結果が表示される画像グリッドが含まれています。


##カメラのページ

これは実際のカメラ機能を実装しておらず、単にカメラページを表示しているだけのユーザーインターフェーステンプレートなので、カメラページを表示しているだけでは、カメラの機能を実装しているとは言えません。


##プロフィールページ
このページでは、ユーザーのプロフィールページと、フォローしているユーザーとフォローされているユーザーの数を表示し、その後、アイコンのバーと、投稿された写真のグリッドまたはリストが表示されます。このテンプレートでは、プロフィール情報の下のバーにあるそれぞれのアイコンをタップすることで、グリッドとリストの表示を切り替えることができます。

---
https://ja.onsen.io/playground/?framework=vanilla&category=user%20interface%20tutorials&module=instagram_model
Xamarin Community Toolkit カタログ（MVVM編）

この記事は、[Xamarin Advent Calendar 2020](https://qiita.com/advent-calendar/2020/xamarin)の22日目の記事です。

# はじめに
以下の記事の続きです。

* [Xamarin Community Toolkit カタログ（ビヘイビア・コンバーター編）](https://qiita.com/f-miyu/items/98939b750d70cd65d625)
* [Xamarin Community Toolkit カタログ（エフェクト・XAMLマークアップ拡張・コントロール編）](https://qiita.com/f-miyu/items/bb3959645879fd6f6abb)

ソースコード
[XamarinCommunityToolkitCatalog](https://github.com/f-miyu/XamarinCommunityToolkitCatalog)


# MVVM
MVVMのビューモデルで使うような機能です。

## AsyncCommand
`Task`の非同期処理を扱えるコマンドです。`allowsMultipleExecutions`を`false`にすれば、`Task`の実行中は、`CanExecute`が`false`を返すようになり、ボタンの2度押しを防げます。デフォルトでは`true`です。`onException`で例外発生時の処理を、`continueOnCapturedContext`で、`Task`実行時に設定する`ConfigureAwait`の引数を指定できます。

```c#
private IAsyncCommand _asyncCommand;
public IAsyncCommand AsyncCommand => _asyncCommand ??=
    new AsyncCommand(async () =>
    {
        await Task.Delay(1000);
    }, allowsMultipleExecutions: false);
```

## AsyncValueCommand
`ValueTask`の非同期処理を扱えるコマンドです。機能的には、`AsyncCommand`と同じです。

```c#
private IAsyncValueCommand<bool> _asyncValueCommand;
public IAsyncValueCommand<bool> AsyncValueCommand => _asyncValueCommand ??=
    new AsyncValueCommand<bool>(async shouldDelay =>
    {
        if (shouldDelay)
        {
            await Task.Delay(1000);
        }
    }, allowsMultipleExecutions: false);
```

## ObservableObject
`INotifyPropertyChanged`を実装したクラスです。`SetProperty`で`PropertyChanged`の発火を行えます。`PropertyChanged`のハンドラーは、`WeakReference`で管理されます。

```c#
public class ObservableObjectPageViewModel : ObservableObject
{
    private int _count;
    public int Count
    {
        get => _count;
        set => SetProperty(ref _count, value);
    }

    private ICommand _countCommand;
    public ICommand CountCommand => _countCommand ??=
        new DelegateCommand(() => Count++);
}
```

## ObservableRangeCollection
複数データの追加、削除、置き換えができる`ObservableCollection`です。

```C#
public class ObservableRangeCollectionPageViewModel
{
    public ObservableRangeCollection<int> Items { get; } =
        new ObservableRangeCollection<int>();

    private ICommand _addRangeCommand;
    public ICommand AddRangeCommand => _addRangeCommand ??=
        new DelegateCommand(() =>
        {
            Items.AddRange(Enumerable.Range(Items.Count, 5));
        });

    private ICommand _removeRangeCommand;
    public ICommand RemoveRangeCommand => _removeRangeCommand ??=
        new DelegateCommand(() =>
        {
            Items.RemoveRange(Items.TakeLast(5));
        });

    private ICommand _replaceRangeCommand;
    public ICommand ReplaceRangeCommand => _replaceRangeCommand ??=
        new DelegateCommand(() =>
        {
            Items.ReplaceRange(Enumerable.Range(0, 5));
        });
}
```

# おわりに
とりあえずこれで最後です。
交流電力を計測する(1)：基礎

[IoT開発スタートブック](https://gihyo.jp/book/2019/978-4-297-10736-9) の第6章にしたがって、
交流電力を計測する装置をつくってみる。

#電力を計測する目的
日常の多くの機器が電気で動いている。
機器の電気の利用状態を測り、データを蓄積して見える化することは、省エネやコスト削減に効果的。
また、消費電流は機械の稼働状態を示しているため、例えば工場の機器の稼働状態を調べることで、ボトルネックとなる機器を洗い出し、稼働率の改善をはかることができる。

#生データ vs 平均データ
細かいサンプリング周期で得られた生データは、元の信号の波形を再現できるが、データ量は多い。例えば、1m周期で計測し、データを2バイトで表すとすると、1時間で7.2Mバイトのデータとなる。


機器の消費電力を調べる場合、交流電流の大きさがわかればよく、波形まで記録する必要はない。1分毎に電流値を記録すると、1時間のデータ量は120バイトで済む。

#電流センサの種類
・シャント抵抗型電流センサ：測定回路の中に小さな抵抗（シャント抵抗）を入れる方法。抵抗値と両端の電圧から電流値を求める。回路を切って抵抗を入れなければならないのが難点。
※テスターの同じような方法か。

・CT(カレントトランス)型電流センサ：電線（導体）を磁気コアに通して交流電流を流すと、磁束が発生し、2次巻線に2次電流が流れる。そこに抵抗をつなぎ、抵抗の両端の電圧を測ることで、抵抗値と電圧から電流値を求める。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581044/0f6dafd2-2000-fb93-c362-14065371d3d9.png)


・ホール素子型電流センサ：電流の周りに発生する次回をホール素子と呼ばれる素子で電圧に変換し、それを測定する方法。

本書ではCT型電流センサ「クランプ式電流センサ30A」を使用する。
パソコンから中国語が急に再生され困った話

# 作業中に急に中国語が流れて困ってしまった件について調べてみました！

## 中国語で流れる文章
数ヶ月前より作業中にたまに中国語でなにか一言二言ほど音声が流れるという現象に悩まされていました。
そこでふとボリュームミキサーを開いて見えるところに置き作業をしてるとffplayがどこかで起動され音声が流れたら削除されるという怪しい動きをしてました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242310/3e4f1a00-5357-3812-98b3-def9bbef31b0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242310/b0f83eb9-2e75-6902-692f-a9f97d17fcd2.png)
## 問題の切り分け
何が原因なのかこの時点ではさっぱりわかっていなかったためとりあえずブラウザを終了させその状態で課題を継続しました。しかし、しばらくするともう一度音が鳴ってしまいました。これによってブラウザが原因ではないということがわかりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242310/64bab257-3167-1496-e7eb-de5e9dcc0f00.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242310/d95271ba-b3bb-1f80-9ebc-2d7101312b30.png)
##　問題の切り分け2
ブラウザが原因ではないということでとりあえず私の開いているものを終了させたりすることにより私が使用しているソフトウェアが原因なのか、それともバックグラウンドで何かしらよろしくない動きをしているソフトウェアがあるのかを調べました。
まず最初に使用していたnvim-qtを終了しそのままgvimを起動した上で課題を行っていたところしばらく経っても音がなることがありませんでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242310/11c38210-b904-9b43-449b-fb0bc55b421c.png)
流石にエディタに音声を流す機能は無いだろうと考えて、そのままスルーをしようとしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242310/779096ed-4c35-1020-85ac-06c47849a9a6.png)

## 結論
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242310/90f948b1-3e95-ab86-dcbc-2f71155a03fa.png)
このスクショに書かれている[リポジトリ](https://github.com/iamcco/coc-rainbow-fart)に入ってる音声と私が悩まされた音声が一緒だったのです！！
どうやら私の入力に対して音声を流してくれるというものでした。
heavenshellさんありがとうございました！！！

ところでどうして私は決まった入力で再生される音声であるにも関わらずその2つを関連付けることができなかったのでしょう...
## まとめ
いかがでしたか？
私が調べるだけではたどり着くことはできませんでした。
今回は名前だけをみてどのような機能を持っているか確認しないで導入した拡張機能が問題だったようです。
私のように名前だけで拡張機能をどんどん入れていくような人は、たまにはそれぞれがどのような機能を持っていいるのかを確認するといいかもしれません。

繰り返しになりますが、heavenshellさん及びvim-jpの皆様ありがとうございました。
CAGradientLayerでグラデーションを描画する

CAGradientLayerを使用してUIViewにグラデーションを描画する機会があったので
実装方法を軽くまとめてみました。

# 前提知識
startPoint・・・グラデーションの開始地点
endPoint・・・グラデーションの終了地点


# startPoint, endPointを指定しない場合
```
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        setGradation()
    }

    private func setGradation() {
        let gradientLayer = CAGradientLayer()
　　　　 // グラデーションさせる範囲をUIViewControllerのviewのサイズに指定
        gradientLayer.frame.size = self.view.frame.size
        gradientLayer.colors = [UIColor.green.cgColor, UIColor.white.cgColor]
        self.view.layer.addSublayer(gradientLayer)
    }
}

```

グラデーションのstartPoint、endPointのデフォルト値は以下の通りなので(中央上から中央下へグラデーション)

|  startPoint  |  endPoint  |
| ---- | ---- |
|  CGPoint(x: 0.5, y: 0.0)  |  CGPoint(x: 0.5, y: 1.0)  |

以下のように描画されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537666/1838c598-c491-27a9-5cc3-221f54ce5693.png" width=300px>

# startPoint, endPointを指定する場合
グラデーションのstartPoint, endPointは上記の通りデフォルトで値が決まっていますが、指定することも可能です。
以下のコードでは
startPoint: `CGPoint(x: 0.0, y: 1.0)`  (左下)
endPoint: `CGPoint(x: 1.0, y: 0.0)` (右上)
としているため、以下のキャプチャのように描画されます。

```
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        setGradation()
    }

    private func setGradation() {
        let gradientLayer = CAGradientLayer()
　　　　　// グラデーションさせる範囲をUIViewControllerのviewのサイズに指定
        gradientLayer.frame.size = self.view.frame.size
        gradientLayer.colors = [UIColor.blue.cgColor, UIColor.white.cgColor]
        gradientLayer.startPoint = CGPoint(x: 0.0, y: 1.0)
        gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0)
        self.view.layer.addSublayer(gradientLayer)
    }
}
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537666/7b4d83ce-211b-a099-0027-b88ec00b2855.png" width=300px>
Noodlで画像と文字のサイズを簡単に合わせる方法

#概要
Noodlアドベントカレンダーの記事です。
Noodlの画像とか文字とかウィンドウを拡縮するとずれちゃったりするときの合わせ方について紹介します。

#画像と文字がずれちゃう問題
NoodlerってWebデザインとか画像と文字とか扱い慣れてない人多いと思うんです。
フォントサイズとか解像度とか言われてもさっぱりですよね！私がそのタイプです。

画像と文字を両方使い出すと初期にぶつかる壁に**画面引っ張ると画像だけ伸びて文字がついてこない現象**があります。（下図参照）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491945/e95a5bf4-8f9d-1d4b-5289-fb8c5fb33194.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491945/767f798f-c44f-3447-c7b8-b258b033206c.png)

本当は何かプロパティに設定があってボタン１つで追従してくれればいいんですが、そういうの探すのってわりと面倒くさいですよね～

**これさえ知っていれば応用が効く！！**みたいな万能ノードがあったらぜひ使いたいと思いませんか？

#万能に使える簡易計算系ノード
今回紹介するのは**Number Remapper**ノードと**Expression**ノードの具体的な使い方です。

###Number Remapper
Number Remapperは数値の範囲を引き伸ばしたり縮めたりできるノードです。
これ、**めちゃくちゃ使えます！**

たとえば0%~100%で取得したデータを360°に当てはめたいときに使えます。
最小～最大の範囲を伸ばしたり縮めたりして、その間を等間隔に補ってくれます。
比例関係にあれば使えるので、画面のサイズが変わったときに連動してフォントサイズを変えることもできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491945/b8a1d6f1-7d72-adbf-ea8a-ad938303dab5.png)

###Expression
エクセルでやるような一行に書ける計算を行えるノードです。
規則性のある挙動を再現するときなど、頭の中で**だいたいわかってるんだけどなぁ**ってときに使えます。

Number Remapperのときのように完全に比例してるわけではなく、1:2で比例するときなどに応用できます。

#画面解像度に合わせて拡縮する
具体的にプロジェクトを示します。
画像の拡縮に合わせて吹き出し内に重ねた**text**の位置とフォントサイズを調整するものです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491945/8c3dfa57-9017-18ca-a8dd-6040033a37a7.png)

ウィンドウやプレビューを拡縮したときの画面解像度は**Screen Resolution**で取得できます。

###横方向の位置合わせ
画像を横幅に合うように設定した場合、Screen ResolutionのWidthがそのまま画像のWidthになります。
常に画像の左から特定の比率の位置にいて欲しいときは**Number Remapper**を使います。

実際に使用するときの最大幅の解像度をInput Maximumに入力し、あとはOutput Maximumに手探りで入力するだけでOKです。
MinimumについてはInputもOutputも0で合うはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491945/c53be052-ac4a-400f-3f7e-780394e1a84c.png)

###フォントのサイズ合わせ
フォントも画像の横幅に対して特定の比率でいてもらうといいので、**Number Remapper**を使うといいです。
位置合わせと同様に最大幅の解像度をInput Maximumに入力し、Output Maximumを手探りで調整します。
そして、フォントの場合はOutput Minimumも手探りで調整します。

この**手探りで調整**するのが簡単にできるのがNoodlの魅力ですね。

###縦方向の位置合わせ
縦横のアスペクト比を維持する設定だと、横方向に合わせて画像が拡縮するのに対して縦方向は余白が生まれます。
この余白を考慮して**text**の位置を調整します。

これって頭で考えると結構単純ですよね。
「（ウィンドウの解像度ー画像の解像度）の半分だけずれていく」

今回は画像内の上から30%の位置に**text**を配置したいので、**Expression**ノードを使って下記のような式にしました。

`(res-height)/2+height*0.3`

resはウィンドウの解像度、heightは画像の解像度です。

#組み合わせて完成
ウィンドウが小さいときには文字も小さく、ウィンドウが大きいときは文字も大きくなります。
位置関係もキープされるようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491945/b2571c49-f2d3-6600-41e5-6a72c707d7a5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491945/07fe89e8-e33b-a805-fd1f-23994e9cf1e6.png)

#まとめ
今回は**Number Remapper**ノードと**Expression**ノードを使って画像とテキストを追従させることを行いました。

Noodlは豊富なプロパティでぽちっと設定できるのが魅力である反面、頭の中で簡単に計算できてるものを探すと意外と手間だったりします。

プロトタイピングは**動かしたもん勝ち**なので、こういう力技を使い慣れておくときっと役立ちます。

食べ過ぎてお腹ぽんぽこりんなもりけんより
メリークリスマス
[Oracle Cloud] BI Publisher の SQLクエリー・ビルダーを使ってみる

## SQLクエリー・ビルダー(Query Builder)とは

コーディングせずにSQL問合せを作成するには、クエリー・ビルダーを使用します。
クエリー・ビルダーを使用すると、SQLに関する最小限の知識で、データベース・オブジェクトの検索とフィルタ処理、オブジェクトと列の選択、オブジェクト間の関連の作成、および書式設定された問合せ結果の表示を行うことができます。

要はSQLコードを直接書かないでGUIでSQLを組み立てる道具です。（今頃流行っているNoCodeツールの一種と言えるでしょう）

SQLクエリー・ビルダーはどんなことができるか見てみよう。

## SQLクエリー・ビルダーのできること

SQLクエリー・ビルダーのウィンドウの見方は[クエリー・ビルダーの概要](https://docs.oracle.com/cd/E96933_01/bip/BIPDM/GUID-BB33AF8B-3FE3-4626-8116-2526B61A059A.htm#GUID-0D9D7BC6-53D8-434E-8AFE-965577E06606)をご参照ください。
以下はウィンドウの見方を知っている前提で、常用なSQL文のクエリー・ビルダーでの設定方法を探ります。

### SELECT

![select.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260307/511da712-b4e9-1e3c-783c-a8a1ff565961.jpeg)

PER_USERSテーブルを右側から選んで、必要な項目（例はUSERNAME）をチェックすると
以下のようにSELECT文が自動作成されます。

![select_sql.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260307/5dcd9d24-ea51-743f-8e6d-4a6c722c6d48.jpeg)

### WHERE

![where.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260307/74e2f7fa-c68e-03db-f905-670638f4baef.jpeg)

WHERE句の指定は「条件」タグで行います。「モデル」タグでチェックが入っている項目のみ「条件」タグに現れます。
上の図はACTIVE_FLAGに対して「=1」の条件を指定しています。
結果SQLは予想通り以下になります。

![where_sql.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260307/4503a6d0-4919-dc76-0147-d08b779fc966.jpeg)

### GROUP BY / ORDER BY

![groupby.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260307/f8498a51-1219-071a-e9dc-0597c7ce37c3.jpeg)

GROUP BY / ORDER BYについても試してみました。

![groupby_sql.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260307/4dd5983e-d588-c852-39bf-891e43346fca.jpeg)

### JOIN

![join.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260307/4bf2dc6d-5304-6e7c-acca-95203bc8ee83.jpeg)

テーブル結合はまず必要なテーブルを全て選んで、「モデル」タグで結合キーを結びつけます。

![join_sql.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260307/ad48195b-90d8-9f3d-7743-673513177e3b.jpeg)

テーブル結合の詳細は[オブジェクト間の関係の作成](https://docs.oracle.com/cd/E96933_01/bip/BIPDM/GUID-BB33AF8B-3FE3-4626-8116-2526B61A059A.htm#GUID-8D265C6E-AA42-450E-A336-8ED6F6EA1BBD)をご参照ください。

## 使用感想

ある程度のものならSQLを知らなくてもGUIで必要な情報を抽出できます。
ただし、テーブル結合や抽出条件が複雑なSQLはGUIで組み立てようとすると、SQLを直接書くよりも時間がかかる場面があります。
その場合SQLを習得したほうが手早いかもしれません。

## 参考情報

* [SQLクエリー・ビルダーの使用（公式）](https://docs.oracle.com/cd/E96933_01/bip/BIPDM/GUID-BB33AF8B-3FE3-4626-8116-2526B61A059A.htm#GUID-C0712F9F-6296-41B9-9079-EB312BB6C97F)
本番環境でassets/imagesの配下の画像を表示させたい

ローカル環境では
app/assets/imagesの配下の画像を表示させることができているが、本番環境になると、画像をうまく読み込まない。
これは、ローカルと本番環境では、パスが違うかららしい。

ローカルは以下のコードで画像を表示させることができる。

```erb
<%= image_tag hoge.png", class:"hoge" %>
```
本番環境では、`asset_path`を使う必要がある。

```erb
<%= image_tag asset_path("/images/hoge.png", class:"hoge") %>
```
サイト制作に欠かせない、GoogleMapの入れ方

最近ウェブサイトを制作する上で重視しているのが、セールスライティングやコピーライティングです。

今回は、それとは少しずれるのですが、その中でもオフラインで事業をやっている方（美容院、飲食店など）には、MEO（Map Engine Optimization）と呼ばれるものを重視しなければなりません。要するに、GoogleMapを使って集客をするということです。MEOについてはそこまで詳しくないし、お店を経営しているわけではないので、今回はVue.jsでGoogleMapの入れ方を解説していこうと思います！！！

#１　モジュールのインストール#

下記のコマンドを入力し、モジュールをダウンロードしてください。

```
npm install vue2-google-maps
yarn
```

#２　インポート#

次に、ソースディレクトリにあるmain.jsにて以下のコードを追加します。

```src/main.js
import Vue from "Vue"
import * as VueGoogleMaps from 'vue2-google-maps'

Vue.use(VueGoogleMaps, {
  load: {
    key: 'API_KEY',
    libraries: "places",
    region: "JP",
    language: "ja",
  },
});
```

#３　埋め込み#

そしたら、後はマップを表示させたいところにコードを追加するだけ！

今回は、componentsディレクトリにあるFooter.vueに埋め込みます。

```components/Footer.vue
<template>
    <footer>
      <div class="container">
        <div class="footB">
            <GmapMap
            :center="{lat: 35.59053146952716, lng:139.32190643259847}"
            //mapの中心位置
            :zoom="15"
            map-type-id="terrain"
            style="width: 80%; height: 250px"
            //横幅、高さの指定
            >
            <GmapMarker
            :key="index"
            v-for="(m, index) in markers"
            :position="m.position"
            :clickable="true"
            :draggable="true"
            @click="center=m.position"
            />
            </GmapMap>
        </div>
      </div>
    </footer>
</template>

<script>
export default{
    data() {
        return{
            markers: [
                {
                    position: {
                        lat: 35.59053146952716,
                        lng: 139.32190643259847
                        //Markerの位置（緯度、経度）
                    },
                    infoText: 'Marker 1'
                },
            ],
        }
    }
}
</script>
```

基本的にはこれで十分マップとしての機能を実現できます！

皆さんの学習の参考にして頂ければなと思います！！！

以上、「GoogleMapをVue.jsに埋め込む方法」でした！


良ければ、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading
【Rails】 姓・名それぞれがDBのカラムとして格納されているレコードの検索方法

# 姓・名それぞれがDBのカラムとして格納されているレコードの検索方法

すでにたくさんの記事が出ていますが、自分がよく使うものを忘れないようにメモしました。

# 

```ruby
name = '山田 太郎'
scope = User.all

if name.include?(' ') || name.include?('　')
    # 全角スペース を 半角スペース へ置き換え
    name = name.tr('　', ' ') if name.include?('　')
    # 姓・名を分割
    last_name, first_name = name.split(' ')
    # and 条件で検索
    scope = scope.where('last_name LIKE ? AND first_name LIKE ?', "%#{last_name}%", "%#{first_name}%")
else
    # 姓名どちらかのみ入力されている場合
    scope = scope.where('last_name LIKE :name OR first_name LIKE :name', name: "%#{name}%")
end
```




# 参考
* Rails における内部結合、外部結合まとめ
    * https://qiita.com/yuyasat/items/c2ad37b5a24a58ee3d30

---
### 会社紹介

**株式会社 Mosaica**  
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。  

詳しくは [公式サイト](https://mosaica.co.jp/) までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/
Docker for Macの旧バージョンをインストールする

# Docker for Macの旧バージョンをダウンロードする

## 概要
Dockerバージョンアップ時に、開発環境(Docker)が動かなくなったときは、、、
正常に動いていた時のDockerにとりあえず戻しましょう。(本当はこんなことしたくない！！笑)

## 環境
### 変更前
- Docker version 20.10.0
- docker-compose version 1.27.4

### 変更後
- Docker version 19.03.13
- docker-compose version 1.27.4

## 手順
### 1. Dockerダウンロード
[Docker for Mac release notes](https://docs.docker.com/docker-for-mac/release-notes/)から正常に動いていた時のバージョンをダウンロードします。

![スクリーンショット 2020-12-22 17.17.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290840/7fd2cb58-f24a-9445-067f-aecc59d46e05.png)

### 2. アプリケーションへコピー
ダウンロードしたファイル(Docker.dmg)を開きます。
![スクリーンショット 2020-12-22 17.19.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290840/f32ab9e7-8225-718d-3dec-6b41baff154b.png)
上書きするかどうか聞かれたら、問答無用で上書きでOKです(笑)
※ この時Docker起動中だと上書きできないので、起動中の場合は終了させてください。

### 3. アプリケーション起動
アプリケーションフォルダにあるDockerを開きましょう。

この時、アップデートダイアログが立ち上がるかと思いますが、間違えて「Install Update」を押さないようにしてください。
とはいえ、間違えても問題ないです！もう一回手順１からやり直すだけですので(笑)
![スクリーンショット 2020-12-22 17.28.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290840/6f6c3168-3837-721b-ca88-4fd1067f42fd.png)


### 4. 確認
```zsh
# dockerのバージョン確認
docker -v
Docker version 19.03.13

# docker-composeのバージョン確認
docker-compose -v
docker-compose version 1.27.4
```

## さいごに
これでやっと平穏な日々に戻れます。。。
あまり古いバージョンは使いたくないのですが、皆さんはどのタイミングでアップデートしていますか？
私は反射的にアップデートボタンを押すのを気をつけようと思います（笑）
physics materialで歯車を回す

# はじめに
本記事はVCIアドベントカレンダーの22日目の記事です。
先日、twitterに投稿したVCIで歯車を作成した件について記載します。
<blockquote class="twitter-tweet">
<a href="https://twitter.com/chinng_inta/status/1338516186938523648">ツイート</a>
</blockquote>

# モデル
Unityアセットストアで歯車のモデルも販売されていますが、VCIで使用可能なコライダー(当たり判定)ではモデルの形状に沿って設定可能なメッシュコライダーが使用できません。
そのため、コライダーの設定が容易なモデルをblenderで作成しました。

## 歯車のモデルの作成
歯車は軸のついたもの、穴の開いたもの2種類作成します。

### 軸のついた歯車の作成
1. blenderで半径0.1m、高さ0.01m、y軸に90度回転させた円柱を作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407114/b37c58b9-7c04-8eed-6865-1196df484fbf.png)

2. 立方体を作成し、サイズを0.009, 0.02, 0.02に設定し、z軸の座標を0.1mに設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407114/f18dfc59-697c-d2fe-b5a4-800101655442.png)

3. 「.」を押し、ピポットポイントを3Dカーソルに設定します。立方体をshift+Dで複製し、R→X→30で30度ずらした位置にコピーした立方体を複製します。Shift+Rで複製操作を繰り返し1周分歯を作成します。

4. 編集モードで円部分を面選択し、Iで面を差し込みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407114/9a01f4f6-d01f-48a5-f04d-873f5da7fc14.png)

5. 差し込んだ面を選択し、「法線に沿って面を押し出し」で軸を伸ばします

1つ目の歯車はこれで完成です。

### 穴の開いた歯車の作成
4までは共通のため割愛します。

5.差し込んだ面を削除し、穴を開けます
6.穴の隣あう頂点を選択し、中央にマージし頂点数を8個に減らします。(奥マージ後、手前マージ前)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407114/634df385-1f0b-01e8-e751-1bc6a40e0758.png)

7.穴の頂点を4点選択し、穴の内側に面を張ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407114/de981b06-664f-1c63-9577-fd81898f6276.png)
8.張った面を選択し、Pで分離します。
9.オブジェクトモードで穴の中に円柱を配置します。

モデリングは以上で完了です。
軸付きの歯車、穴あきの歯車、円柱をそれぞれをエクスポートします。

# Unityでの設定
1. シーンにインポートしたモデルを配置する。
軸付きの歯車、円柱はisKinematicを有効にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407114/74d8a0c2-129c-776c-b60f-81fd66461446.png)

2. 歯、穴の内側に面、円柱にコライダーを設定します。
3. physics materialを設定する。
physics materialは2種作成します。
摩擦あり(歯のコライダーに設定)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407114/ebe37722-283b-7500-1d18-7b9ebc614b33.png)
摩擦なし(穴の内側に面、円柱のコライダーに設定)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407114/db7d4a4a-5dd3-0929-f69a-7b1112e0cb90.png)

4. 回転アニメーションの作成
軸付きの歯車をアニメーションで回転させます。

後はVCI化すればバーチャルキャスト内で歯車を回すことが可能です。

# さいごに
貫通対策に穴の内側の面にコライダーを設定していますが、結構貫通します。
今後はその辺り対策出来ればと思います。
DataPortal: 新機能さかのぼり（シンプルな CASE 文）

DataPortalのまだ知らない使えそうな機能を求めて、新機能の一覧を遡ってみました。

シンプルな CASE 文
> テストする項目を一度宣言し、一致する値を記述することで、計算フィールドで読みやすいシンプルな CASE 文を作成できるようになりました。

早速試してみます。

![スクリーンショット 2020-12-22 23.31.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/f67015a5-7d7a-bdeb-36e0-41d4d4259ab1.png)

従来だと

```
when remainder = 0 then 'a'
```
と記述するところが、 `remainder` を case の右に記述することで

```
when 0 then 'a'
```
と記述できるようになっています。

んー、、、
使うかな、どうかなという感じですかね、、、

50個ぐらい分岐するなら有効かもしれないけど、5個ぐらいの分岐だと `=` を書いていってもさほど不便ではないのと、後々別の変数も評価するとなった時の書き換えが逆に面倒かなという気がします。
Laravel Collectionクラスで日付の絞り込みをするときに気をつけること

##はじめに
PHPでLaravelのCollectionクラスを利用しているときに、私が以前ハマった問題について共有します。

##動作環境
PHP 7.2
laravel/framework 6.0

##やりたいこと
日付のカラムを持つデータに対して、○日~△日の間という条件で絞り込みをしたい。

##問題のあった書き方
```php
$between_days = getBetweenDays('2020-12-21', '2020-12-23');
foreach ($between_days as $date) {
    var_dump($date->format('Y-m-d'));
}

public function getBetweenDays($start_date, $end_date) {
    $date_list = collect([
        ['date' => new Carbon('2020-12-20')],
        ['date' => new Carbon('2020-12-21')],
        ['date' => new Carbon('2020-12-22')],
        ['date' => new Carbon('2020-12-23')],
        ['date' => new Carbon('2020-12-24')],
    ]);
    return $date_list->whereBetween('date', [$start_date, $end_date])
                     ->pluck('date')
                     ->all();
}

// 結果
// string(10) "2020-12-21"
// string(10) "2020-12-22"
```
Carbon型にキャストされた日付情報に対して、String型で日付の情報を渡して絞り込みを行っています。
Laravelはかしこいので、こんなゆるい書き方でもエラーを吐かずに処理してくれます。
ですが、出力結果を見てみると、start_date側は境界の日付を含めて取得できていますが、end_date側は境界の日付を取得できていません。
単純なint型で絞り込みを行ったときは境界値を含めた絞り込みになるので、この挙動には問題があることが分かります。

##修正した書き方
```php
$between_days = getBetweenDays(new Carbon('2020-12-21'), new Carbon('2020-12-23'));
foreach ($between_days as $date) {
    var_dump($date->format('Y-m-d'));
}

public function getBetweenDays($start_date, $end_date) {
    $date_list = collect([
        ['date' => new Carbon('2020-12-20')],
        ['date' => new Carbon('2020-12-21')],
        ['date' => new Carbon('2020-12-22')],
        ['date' => new Carbon('2020-12-23')],
        ['date' => new Carbon('2020-12-24')],
    ]);
    return $date_list->whereBetween('date', [$start_date, $end_date])
                     ->pluck('date')
                     ->all();
}

// 結果
// string(10) "2020-12-21"
// string(10) "2020-12-22"
// string(10) "2020-12-23"
```
先程はString型で渡していた絞り込み条件を、予めCarbon型にキャストして絞り込みをしました。
出力結果を見てみると、start_dateもend_dateも境界値を含めて取得できています。

##さいごに
Collectionクラスに日付を自動で解釈させると、予期しない挙動をするかもしれない。という内容です。
Laravelの最新版では修正されているかもしれませんが、このような不具合にぶつからない為にも、ちゃんとデータの型を意識して扱おうと思った1件でした。
Ruby のメソッド名の ! の有無は破壊的／非破壊的を意味する，わけじゃない

Ruby の初心者向け記事に数限りなく書かれてきた誤解の一つに，メソッド名末尾の `!` についてのものがあります。
誤りにはいくつかのバリエーションがありますが，最も極端なものは

* `!` の付いたメソッドは破壊的
* そうでないメソッドは非破壊的

というものでしょう。

メソッドが破壊的というのは，レシーバーであるオブジェクトに変化を与えるということですね。
たとえば

```rb
"Ruby".upcase
```

の場合，`upcase` メソッドは非破壊的で，レシーバーには変化を与えません。その代わり，レシーバーを元にしてそれを大文字化した，内容が「RUBY」であるような String オブジェクトを新たに生成して返します。

一方，

```rb
"Ruby".upcase!
```

の場合，新たなオブジェクトの生成は行われず，レシーバー自体の内容が大文字化されます。
返り値は，実際に変換が行われた場合（1 文字でも小文字が含まれていた場合）は `self` であり，そうでない場合は `nil` です。

この例ではまさに

* `!` の付いたメソッドは破壊的
* そうでないメソッドは非破壊的

となっています。
これが誤解の元になっているのですね。

確かに Ruby の組込みメソッドには，破壊版と非破壊版がペアになっていて，メソッド名末尾の `!` の有無だけが異なるメソッドの組がたくさんあります。

しかし，これはそのような命名になっているというだけのことであり，Ruby の仕様ではありません。

また，組込みメソッドでも，`!` の付かない破壊的メソッドはいくつもあります。
`String` なら `concat` や `force_encoding` など。`Array` なら `shift` とか `push` とかですね。

それから，`!` の有無だけが違う命名のメソッドのペアが必ず破壊版・非破壊版というわけでもありません。
Rails だと ActiveRecord の `create!`/`create` でおなじみですね。
【Rails】 日時がそれぞれのカラムを持っているときの検索方法

# 日時がそれぞれのカラムを持っているときの検索方法

日付および時間がそれぞれ文字列としてDBに格納されている時の検索方法をメモとして残します。

# 

```ruby
start_datetime = '2020/12/22 23:35'
scope = Post.all

start_date, start_time = start_datetime.split(' ')
# 該当する日付以降のものを抽出
scope = scope.where('start_date >= ?', start_date)
# start_date が等しい時の該当しない時間を除去
scope = scope.where.not('start_date = ? AND start_time < ?', start_date, start_time)
```


# 参考
* Rails における内部結合、外部結合まとめ
    * https://qiita.com/yuyasat/items/c2ad37b5a24a58ee3d30

---
### 会社紹介

**株式会社 Mosaica**  
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。  

詳しくは [公式サイト](https://mosaica.co.jp/) までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/
フィルタとエッジ検出についての新たな発見 New Findings about Filters and Edge Detection

少しラプラシアンフィルタについて勉強していたら、面白いことを発見した。
ラプラシアンフィルタは画像のエッジ検出を行うフィルタである。これをカーネルで表すと、Aで表される。ここで$A + B = I$ となるような行列を求める。ちなみに$I$は単位行列である。

```math
A=
\begin{pmatrix}
0 & 1 & 0\\
1 & -4 & 1\\
0 & 1 & 0
\end{pmatrix}
```
Bを求めると下記のようになるが、一般的にAが画像のエッジ検出で使われたら、Bは元の画像に近いものをアウトプットする。

```math
B=
\begin{pmatrix}
1 & -1 & 0\\
-1 & 5 & -1\\
0 & -1 & 1
\end{pmatrix}
```
下がカーネルにAを使った時のアウトプットである。
![111.GIF](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/926786/9d7a7a98-a334-de79-7438-559d364b6213.gif)
下がAの代わりにBを使った時のアウトプットである。
![113.GIF](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/926786/b684e1ad-353c-8c4d-5e54-2871d4f61ae2.gif)
これはラプラシアンフィルタにだけ言えるのでなく、他のフィルタにも応用がきくと思われる。
typescriptでcsv読み書き

typescriptでcsvを読み込み、1行追加して書き込む

・fast-csvライブラリを使用する
https://c2fo.io/fast-csv/docs/introduction/getting-started


```bash:install
yarn add fast-csv
```

```typescript
import { parseFile, writeToPath } from "fast-csv";

interface CsvFormat {
    id: number,
    name: string,
}


// fast-csvで用意されているparseFileを使ってcsvを型指定で読み込む。
// asyncが用意されていないのでPromiseでラップ
const parseAsync = (path: string) => new Promise<CsvFormat[]>(resolve => {
    const stream = parseFile(path, { headers: true})

    const data: CsvFormat[] = []
    stream.on('data', (row: CsvFormat) => {
        data.push(row)
    })

    stream.on('end', () => {
        resolve(data)
    })
})

// 読み込み ~ 書き込み
const test = async () => {
    const path = '/path/to/csv.csv'
    const list = await parseAsync(path)

    const newItem : CsvFormat = {
        id: 9999,
        name: 'hoge',
    }

    list.push(newItem)

    // csvに書き込む
    writeToPath(path, list, { headers: true , alwaysWriteHeaders: true })
}
```
【Rails】（補足）フォロー機能を実装

# 概要
以下の参照記事にしたがって進めたら、フォロー機能を実装することができました。

実装方法の大半は参照記事に書かれているので、そちらをご覧いただければと思います。

本記事では補足内容を備忘録として記録いたします。

# 参照記事
↓以下の記事にお世話になりました。ありがとうございます。

- Railsでフォロー機能を作る方法<br>
https://qiita.com/mitsumitsu1128/items/e41e2ff37f143db81897

# 完成イメージ
今回は、写真投稿アプリを題材に、フォロー機能を作成し、ユーザーページと写真詳細ページにフォローボタンを設置する方法を説明します。

- ユーザーページ
[![Image from Gyazo](https://i.gyazo.com/2028f80ce141a5fd3cd5397d930c0351.gif)](https://gyazo.com/2028f80ce141a5fd3cd5397d930c0351)

- 写真詳細ページ
[![Image from Gyazo](https://i.gyazo.com/a6c813233db120e69a73cb3f8bf38216.jpg)](https://gyazo.com/a6c813233db120e69a73cb3f8bf38216)

# 開発環境
- macOS Catalina 10.15.7
- ruby 2.6.5
- Rails 6.0.3.4

# 実装の流れ
1. フォロー機能を作成
1. フォローボタンをユーザーページと写真詳細ページに設置

# 今回のコード
## 1. フォロー機能を作成
↓以下をご参照くださいm(_ _)m

- Railsでフォロー機能を作る方法<br>
https://qiita.com/mitsumitsu1128/items/e41e2ff37f143db81897

補足として、参照記事である方がコメントされているように、relationships_controller.rbのコードを以下のように修正しました。

```relationships_controller.rb
  private
  def set_user
    @user = User.find(params[:follow_id])
  end
```
- 参照記事ではメソッド名が抜けていたため、`set_user`を付け加えました。
- `@user = User.find(params[:relationship][:follow_id])`を`@user = User.find(params[:follow_id])`に変更しました。binding.pryでparamsの中身を確認したところ、`:relationship`というキーは存在せずエラーとなりました。そのため`[:relationship]`を削除しました。

↓コンソールで確認したparamsの中身です

```
[1] pry(#<RelationshipsController>)> params
=> <ActionController::Parameters {（省略） "follow_id"=>"1", "commit"=>"フォローする", "controller"=>"relationships", "action"=>"create"} permitted: false>
```
<br>


```relationships_controller.rb
    if following.save
      flash[:success] = 'ユーザーをフォローしました'
      redirect_to user_path(@user)
```
- フォローボタンクリック後の遷移先パスを修正しました。今回はひとまず、クリック後、`redirect_to user_path(@user)`でユーザーページに遷移するようにしました。

## 2. フォローボタンをユーザーページと写真詳細ページに設置
参照記事にしたがって、フォローボタンを`_follow_button.html.erb`という部分テンプレートに作成しました。

この部分テンプレートをユーザーページと写真詳細ページで呼び出すことで、両ページにフォローボタンが設置されます。

例えば、
`<%= render 'shared/follow_button', user: @user %>`と記入して、フォローボタンの部分テンプレートを呼び出します。

`@user`には、フォローするユーザーのレコードを各コントローラーで格納します。

例えば、写真詳細ページでは、params内の写真idから写真レコードを取得し、さらにそれに紐づくユーザーレコードを取得し`@user`に格納しました。

↓このように

```photos_controller.rb
  def show
    @user = Photo.find(params[:id]).user
  end
```
`faind_by`だと挙動がおかしくなったので、`find`を使用しています。

# おわりに
このようにして、フォロー機能を実装しました。参照記事内のコードについて、難しいところもあり、まだ完全には理解できておりません。追々理解していければと思います。

フォロー機能における各テーブルのアソシエーションについては以下の記事でも詳しく説明されていますので、ご参照ください。
https://bit.ly/2WztOY9

**初学者のため、間違いや改善点などありましたらご指摘お願いいたしますm(_ _)m**
RedmineのViewCustomizeによるカスタマイズをプロジェクト管理者／ユーザーが触れるようにする

## 目的と手段

redmine_view_customizeプラグインを用いるとRedmineの機能を拡張できるものの、
従来はプロジェクト／ユーザー別のカスタマイズに別のデータベースが必要な場合はJavaScriptでの対応は難しく、プラグインで実装する必要があった。

この記事ではredmine_view_customizeプラグインからプロジェクトカスタムフィールド／ユーザーカスタムフィールドを利用して、プロジェクト管理者／ユーザー自身がある程度のカスタマイズを行えるようにする。

## 必要環境

redmine_view_customizeプラグインからプロジェクトカスタムフィールド／ユーザーカスタムフィールドを利用できるのは比較的新しいバージョンが必要になる。

* **プロジェクト別カスタマイズ**
  * redmine-view-customize v2.3.0 以上
  * ViewCustomize.context.project.customfields
* **ユーザー別カスタマイズ**
  * redmine-view-customize v1.2.0 以上
  * ViewCustomize.context.user.customfields

## プロジェクト別のカスタマイズ実装

### プロジェクトのカスタムフィールドを追加する

**【システム管理者】**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85304/849e0448-214b-de55-5381-7e6e3130c195.png)

### 各プロジェクトのプロジェクト設定からカスタムフィールドを入力する

**【各プロジェクト管理者】**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85304/80066fbc-3c54-b1bb-5023-54f1e651edc4.png)

### redmine_view_customizeプラグインからカスタムフィールド値を参照し処理を変える

redmine_view_customizeプラグイン v2.3.0 がインストールされていると `ViewCustomize.context.project.customFields` で各プロジェクトのカスタムフィールドにアクセスできる。
このカスタムフィールドの値によって処理を分岐させることで、プロジェクト管理者がカスタム内容を変化させることができる。

```javascript
let cf = ViewCustomize.context.project.customFields.find(cf => cf.name == "カスタムフィールド「A」の初期値");
if(typeof cf != 'undefined'){
  // cf.value で値にアクセスする
}
```

## ユーザー別のカスタマイズ実装

### ユーザーのカスタムフィールドを追加する

**【システム管理者】**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85304/1148f4ab-c20c-b5fe-c8c4-0307df882739.png)

### 各ユーザーの個人設定からカスタムフィールドを入力する

**【各ユーザー】**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85304/9d7b7dcb-2198-5252-5900-3a2369707d05.png)

### redmine_view_customizeプラグインからカスタムフィールド値を参照し処理を変える

redmine_view_customizeプラグイン v1.2.0 がインストールされていると `ViewCustomize.context.user.customFields` で各ユーザーのカスタムフィールドにアクセスできる。
このカスタムフィールドの値によって処理を分岐させることで、ユーザーがカスタム内容を変化させることができる。

```javascript
let cf = ViewCustomize.context.user.customFields.find(cf => cf.name == "個人壁紙を有効");
if(typeof cf != 'undefined'){
  // cf.value で値にアクセスする
}
```

## メリット＆デメリット

* **メリット**
  * ユーザー／プロジェクト管理者自身がカスタマイズ内容を変えられる
  * システム管理者以外にカスタマイズの一部の裁量を渡すことができる
  * データがカスタムフィールドなので実態としてわかりやすい
* **デメリット**
  * 複雑な機能だとカスタムフィールドが膨大になり収集がつかなくなる
  * カスタムフィールドは手入力であるためフィールド間のデータ制約が困難
中学３年が足立区のコロナウイルスに関するオープンデータ＆Googleスプレッドシートを活用して、ノーコードでお手軽にグラフ作って公開してみた。

#はじめに#
皆さまこんにちは、モジャもんじゃと申します。
今回は、足立区HPに公開されているコロナウイルス関連のオープンデータを活用して
合計感染者や、年代別感染者などをグラフ化してみました。下記のURLからご覧ください

[足立区内での新型コロナウイルス
感染者の日別・年代別発生状況グラフ](https://sites.google.com/view/code4adachi-covid19)


##制作にあたって##
今回のグラフを制作するにあたって使用したのは

・足立区ホームページ:オープンデータ取得
[足立区内での新型コロナウイルス感染者の発生状況](https://www.city.adachi.tokyo.jp/juyo/covid19list.html)

・Googleスプレッドシート:データの整理用

・Googleサイト:グラフ掲載用

上記の３つのみです

###制作手順###
今回の制作の大まかな手順は大きく分けて下記の３つです

1.足立区HPの感染状況データのスプレッドシートにインポート

2.スプレッドシートでピボットテーブル＆グラフ作成

3.Googleサイトにグラフ埋め込み&公開

それでは解説していきます

<h4>1.足立区HPの感染状況データのスプレッドシートにインポート</h4>

まず現在、足立区では毎日更新で新型コロナウイルスの区内での感染状況をHP載せています↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968625/550213bd-f568-cc94-acf0-f2f044a734ac.png)
このデータを今からGoogleスプレッドシートに取り込んでいきます

やり方はとてもシンプルで、GoogleスプレッドシートのIMPORTHTML関数を使用します。
そうすると、自動でHPのテーブルを読み込んでくれます

![Videotogif (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968625/ba30a0d3-507e-9473-6428-c32a82da6d6d.gif)

<h5>2.スプレッドシートでピボットテーブル＆グラフ作成</h5>

次に、先ほどインポートしたデータを項目ごとに、ピボットテーブルにします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968625/d289aebc-9d98-984c-1473-543d395609d4.png)
そして目的に合わせてグラフを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968625/e3ed931c-ee90-98cb-3607-2853dd03d892.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968625/dfb02984-3114-deb6-16c0-0a5ccbf13bb1.png)

<h6>3.Googleサイトにグラフ埋め込み&公開</h6>
![Videotogif (3) (1) (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968625/61ff9b29-8e97-5c53-00f5-5613b3b72b18.gif)
グラフの埋め込みはGoogleサイトを使ったらめちゃくちゃ楽にできました（笑）

以上で完成となります！

######まとめ#######
今回のグラフは、GASのIMPORTHTML関数がめっちゃ優秀だったため、スクリプトを一行も書かずに自動更新型を作ることができました！
今後は、IFTTなどを活用して、情報更新時に通知が来るようにするなど、さらに実用的なサービスにしていきたいと思います。
Ruby の”（ダブルクォーテーション）　と　’シングルクォーテーションの違いについて

前提：
ほとんどの場合、大きな違いはでない。



ダブルクォーテーションのみ式展開ができる
＝シングルクォーテーションだとできない

>>'#{foo} bar'
⇨ "\#{foo} bar"


ではシングルクォーテーションを使う場合はあるのか

結論あります。

具体的には、
シングルクォートは、入力した文字をエスケープせずに「そのまま」保持するときに便利です。
例えば「バックスラッシュ」の文字は、改行文字 \nと同様に多くのシステム上で特殊な文字として扱われます。
なお、シングルクォートで文字列を囲めば、簡単にバックスラッシュ文字のような特殊文字をそのまま変数に含めることができます。

>> '\n'       # 'バックスラッシュ n' をそのまま扱う
=> "\\n"
未経験から自社開発企業に入って思うこと


８月に未経験からエンジニアになって早５ヶ月が経とうとしています。



自社開発企業で働くことを選んだのは
`・デスマーチになりにくい、らしい
・優秀なエンジニアが集まりやすい、らしい
・現場が一定、らしい
・給与が比較的高い、らしい`



この辺りの理由からでした。
らしいを付けているのは実際入ってみないと分からないからです。

とってきた情報を元に
自分の性格と自分の置かれている立場（家族を養わないといけない）から
自社開発が一番良いんじゃないかなと思い選びました。


ただやっぱり会社なんて実際に入ってみないと分からないもので、５ヶ月で期待通りだったこと、
おもてたんと違うやんってこと、色々出てきてます。

また未経験から自社開発って実際どうなんって思ってる人もいると思うので、良いこと悪いことを
自分の経験を元にお話ししていこうと思います。

完全に主観なのでご注意ください。


###デスマーチは確かにない、けど期日はある
自社コンテンツの開発なので、迫りくる納期への恐怖みたいなものはないです。
ただだらだらと開発を続けられるかというとそうではなくて、決められたリリース日に向かって開発を進めるのが基本です。
スケジュールは現実的なものが組まれるので、納期直前は毎日深夜まで残業。。みたいなことはありません。
スパルタでスキルをあげるのも悪くはないと思いますが、あんまり自分にストレスかけたくないので
そういう点では自社開発はいいなと思います。



###給料は未経験からにしては比較的いい
決して高くはありませんが、未経験からにしては悪くないと思います。
自分は家族を養っている立場なので、ある程度の普通に生活できる最低の給料が保証されていないと企業に入るつもりありませんでした。
それでも前職に比べると大幅にダウンしましたが、スキルを高められながらお金を貰えるのは最高だと感じています。
未経験なんて最初は本当に何もできないので、生活できる最低限の賃金がもらえて、スキルを高められる環境があればいうことないかなと思います。


###優秀なエンジニアはいる、でも閉鎖的
基準が難しいところではありますが、私の視点から優秀な先輩エンジニアはいます。
私の会社は少人数なので全体的とコミュニケーションも容易に取ることが可能です。
ただ自社開発だと人の入れ替わりみたいなものが少ないので、多くのエンジニアに話を聞けない、仕事ぶりを見れない、といったところが結構マイナス面かなと思います。
色々外の世界をみたい人は業務外でいかに外に出ていくか（勉強会やコミュニティ参加）がポイントになるかと思います。


###教育がアツい
自分的に一番いいなと思うのはここです。
数年かけてエンジニアにしてくれようとしている感じがして非常にありがたいです。
もちろん今話しかけても大丈夫かどうか確認してから質問しますが、
１日５回以上は先輩方に時間もらって教えてもらっています。
先輩に言われて一番嬉しかったのは、「今のうちはどんどん聞いて、聞かないとダメ」って言ってくれたことです。質問しやすい環境ですし、嫌な先輩もいないです。←これは会社による
もちろん馬鹿みたいになんでもかんでも聞くんじゃなくて、自分の中でじっくり考えたあとに質問内容を組み立ててから聞くようにしています。（それでも馬鹿みたいな質問は時々してしまいますが...笑）


###作業的なこともしないといけない
毎日毎日、頭抱えるようなコードを書かせてもらえるかというと全くそんなことはなくて、慣れてくる基本的に７、８割ぐらいは作業的なバグ修正とか調査やテストだったりします。
それでもこんなことやってらんねえって投げやりになるんじゃなくて、ひとつひとつの作業の意味を考えながらやっていると不思議と自分の力になっていたりします。


###既存のコードに沿った開発
０からコードを書くというよりも、１あるコードを２にしていく作業が多いので、自分の書き方で好き勝手に開発してくことは難しいです。
なので、コードを読む読解力と既存のコードをうまく利用する適応力が求められます。
受託とかはやったことないので分かりませんが、最初のキャリアで受託か自社開発かだと業務内容結構違うんじゃないかなと思います。

###開発に飽きてくるかもしれない
基本会社の十八番のサービスを大きくしていくことが仕事です。
今はまだ５ヶ月なので全然飽きていませんが、今後何年も同じサービスの開発を続けるとなると必ず飽きがくると思います。
数ヶ月スパンでどんどん新しい開発に携われる働き方もいいなあとここ最近は考えていたりいなかったり・・・



とりとめもないことをだらだら書いてしまいましたが
未経験から自社開発に就職考えている人の参考になれば幸いです。