OmniAICreator/Qiita-1.07M huggingface dataset:
Craft Egg初のアドベントカレンダーを実施してみて

## はじめに
株式会社Craft EggでUnityクライアントエンジニアをしている豊田です。
本記事は[Craft Egg Advent Calendar 2021](https://qiita.com/advent-calendar/2021/craftegg)の12/25の記事です。

今回は最終日の記事ということで、アドベントカレンダーを取り組んでみての振り返りや効果をまとめてみようと思います。

## 実施までの流れ

### なぜやるのかを決める
主目的として、「**アドベントカレンダーの取り組みを起点とし、エンジニア組織としてのインプット・アウトプット文化の醸成へ繋げる**」ことを挙げていました。

弊社では今までアドベントカレンダーを実施したことはなかったのですが、
エンジニア組織力の向上にも繋げることができるのではないかと思い、若手メンバーで実施に向けて動いてみました。

発信という形でアウトプットするのはハードルが高いと感じやすいですが、アドベントカレンダーは**決められた期間にみんなで取り組むため、初めての執筆のきっかけとしては最適** であると感じています。
ここから、LT会や勉強会など、様々な技術的な取り組みへ繋げていくことを目指しています。

また、そのほかに以下のような効果も期待できます。

* 組織の活性化
* 執筆のためのインプットによる知識の習得・スキル向上
* 外部への会社の周知（広報要素）
* 技術の組織共有

### メンバーの募集、巻き込み
カレンダーには25日分の枠があるため、実施するにはとにかく、執筆メンバーを集めないことには始まりません。
エンジニアメンバー全体に向けて募集を行いますが、アドベントカレンダーは日々の業務と平行して参加してもらう形になるため、初見では執筆に対してハードルが高いかと思います。そのため、募集の際には以下のことに気をつけました。

#### 目的を伝える
単にやりたいから、ではなく事前に立てた目標を明示し、組織活性とその先の技術力を上げる取り組みの文化醸成の一環であるという意図を伝えました。
目的、ビジョンに賛同できた状態で参加していただくことで、狙っている効果も得られやすいのかなと思います。

#### 気軽に参加できるものであると感じてもらう
公開する形で技術記事を書くとなると、やはりハードルは高く感じてしまいます。
特に若手メンバー（筆者も含め）ですと、「レベルの高い記事を書かないといけないのではないか」と気後れすることもありますが、実際はカジュアルな記事からボリュームのある記事まで何でもアリです。

やってみた系、入門、業務で得た学びや知見、ソフトスキル、ツール系、ライフハックなど、Qiitaで見かける記事のカテゴリも様々であるため、他社さんのアドベントカレンダーを例に出したりもして、「カジュアルな内容も歓迎です！」とハードルを下げていきました。

ただし、ハードルは下げても発信する内容に誤りが無いよう、投稿から事前にメンバー同士でチェックするというフローは取るようにしました。

### 執筆フロー
募集はカレンダーの枠を先着で埋めていく形にしました。
社内でのチェックを事前に行えるよう、公開日の1週間前を目安に限定共有投稿で公開してもらうスケジュールで進行しました。
後は各々で執筆し、メンバーで確認しあい、順次公開するようオペレーションを回すのみです。

## 実施しての振り返り

結果として、25日中24日分のカレンダーを埋めて実施することができました！
当初はカレンダーを埋められるか不安な面もありましたが、良いカレンダーを作れたのではないかと思います。

### LGTM数

2021年12月23日現在では、カレンダー全体で**181LGTM**を獲得しています。
注目された記事もあり、アウトプット自体の成果も一定上げることができたのではないでしょうか。

最多LGTM賞は、新卒2年目である高川の、「ゲーム業界を志望してなかったサーバエンジニアが知った、ゲームならではの驚きポイント」です！（**2021/12/23現在 82LGTM**）

https://qiita.com/YuheiTakagawa/items/ed67482f60e22c244778

### 参加メンバーの感想
執筆メンバーに、参加してみての声を集めてみたところ、

> * 書かざるを得ない状況になる事でアウトプットする機会が作れたのでとても良かった
> * たまには手を動かして調べるのもいいかも
> * 学習することとは別に、その事柄を記事にして投稿するということはある程度訓練が必要だと感じるため、監修をしていただける環境で行えたのはよかった
> * 機械学習がどういうものか知れてよかった
> * 曖昧だった執筆前の認識を整理して、微妙に間違っていたことに気付いた
> * Qiita記事を書く際に何に時間が掛かるかが経験できた

というような感想を貰うことができました。

筆者自身も、入社からは個人でのアウトプットは減っていたのですが、アドベントカレンダーが良い機会となり、改めて**「技術記事を書くのは楽しい！」**と感じることができました。


### 次回改善・実施していきたいこと
全体的にポジティブな結果となりましたが、一方で今後、より改善したり取り組みたいことも見えてきました。

* 社内メンバーにより興味を持ってもらえるような取り組みや盛り上げ<br>
  → 執筆者以外のエンジニアメンバーにも注目してもらえるように<br>
  → 社内での記事のピックアップは行ったものの、より興味を惹く工夫はできるかも
* QiitaのOrganization登録<br>
  → Qiitaのランキングに載った時に会社もセットで知ってもらいやすくなる
* 準備期間に余裕を持たせる（今年は1ヶ月前の告知）
* アドベントカレンダー以外の発信機会の作成<br>
  → いい機会になったので、定期的に発信は続けたい
* 執筆メンバーを増やせるような巻き込み

## おわりに
アドベントカレンダーを実施してみての振り返りを書かせていただきましたが、結論とてもいい取り組みでした。
執筆ネタを話題に、雑談がメンバー同士で交わされるなどコミュニケーションの機会にもなっており、組織の盛り上げの一助となったのではないかと思います。

今後もアドベントカレンダーは実施したいですし、多くの参加メンバーからは、**来年も実施するなら参加したい**という声も得られました。
よりこの取り組みをブラッシュアップし、エンジニア組織を盛り上げていきたいです。

ここまで読んでいただきありがとうございました。
Craft Egg Advent Calendar 2022にもご期待ください！
Apache Kafka(MSK)の設定を変更する簡単な方法

# 目的

MSKを使うとkafkaサーバを立ち上げるところまでは簡単なのですが、
具体的な設定変更の手順が不明瞭だったためまとめです。

## Dockerコンテナの起動

設定変更用のクライアントを利用するために、サーバ用のコンテナが必要になります。
redisと同様ですが分かりにくさがあります。

```bash
docker run -it --rm bitnami/kafka bash
```

以下、コンテナ内の操作です。

## 設定ファイルの作成

`--command-config` のフォーマットが設定ファイル名のため作成します。
接続にSSLを利用する際の設定例です。

```bash
echo 'security.protocol=SSL' > /tmp/kfk
```

## 利用例

[公式ドキュメント](https://kafka.apache.org/quickstart) 通りにコマンドを流す準備ができました。
よく使うコマンドの利用例です。

ヘルプの表示

```bash
kafka-topics.sh \
  --command-config /tmp/kfk \
  --bootstrap-server \
    b-1.xxxxxxxxxx.kafka.ap-northeast-1.amazonaws.com:9094, \
    b-2.xxxxxxxxxx.kafka.ap-northeast-1.amazonaws.com:9094, \
    b-3.xxxxxxxxxx.kafka.ap-northeast-1.amazonaws.com:9094 \
  --help
```

トピック情報の表示

```bash
kafka-topics.sh \
  --command-config /tmp/kfk \
  --bootstrap-server \
    b-1.xxxxxxxxxx.kafka.ap-northeast-1.amazonaws.com:9094, \
    b-2.xxxxxxxxxx.kafka.ap-northeast-1.amazonaws.com:9094, \
    b-3.xxxxxxxxxx.kafka.ap-northeast-1.amazonaws.com:9094 \
  --topic [トピック名] --describe
```

パーテーション数の変更

```bash
kafka-topics.sh \
  --command-config /tmp/kfk \
  --bootstrap-server \
    b-1.xxxxxxxxxx.kafka.ap-northeast-1.amazonaws.com:9094, \
    b-2.xxxxxxxxxx.kafka.ap-northeast-1.amazonaws.com:9094, \
    b-3.xxxxxxxxxx.kafka.ap-northeast-1.amazonaws.com:9094 \
  --topic [トピック名] --alter --partitions 50
```

# 採用PR
弊社で一緒に働く仲間を募集しています。
全てのオタクを幸せにしたい方、是非ご覧ください！

https://hrmos.co/pages/vivion/jobs/0000191
Nuxt 3 with Props

# 概要

Nuxt３でPropsを実装する方法

ボタンのクラスは、Tailwindを使用しています。
設定方法は、下記の記事にアップしています！

https://qiita.com/kentarou_masuda/items/3a111f3a05a43f2e2b7f

# 手順

１. コンポーネントを作成

```vue:components/atoms/TheButton.vue
<script setup lang="ts">
interface Props {
  name: string
  to?: string
}

const props = withDefaults(defineProps<Props>(), {
  name: '',
  to: '/'
})
</script>

<template>
  <div>
    <a :href="to" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
      {{ name }}
    </a>
  </div>
</template>
```

２. コンポーネントを呼び出し

```vue:pages/index.vue
<script setup lang="ts">
interface Menus {
  name: string
  to: string
}[]

const menus = reactive<Menus>([
  { name: 'ホーム', to: '/home' },
  { name: 'マイページ', to: '/mypage' },
  { name: '設定', to: '/setting' }
])
</script>

<template>
  <div>
    <!-- 単発で呼び出し　-->
    <AtomsTheButton name="ホーム" to="/home" />

    <!-- ループで呼び出し -->
    <div v-for="(v, k) in menus" :key="k">
      <AtomsTheButton :name="v.name" :to="v.to" />
    </div>
  </div>
</template>
```

完了！！
ViewModelのPublishedな値をViewでBinding<型>で扱う方法

## はじめに
```ViewModel.swift
class ViewModel: NSObject, ObservableObject {
    @Published var isShowAlert: Bool = false

    /// 省略 ///
}
```

```ContentView.swift
struct ContentView: View {
    @ObservedObject var viewModel = ViewModel()

    var body: some View {
        Button(action: {
            /// 省略 ///
        }) {
            /// 省略 ///
        }
        .alert(isPresented: Binding<Bool>) {
            Alert(title: Text("確認"),
                  message: Text("これはテストです"),
                  dismissButton: .default(Text("OKOK")))
        }
    }
}
```
このようにViewModelで処理した`Published`な値をViewで`Binding<型>`で扱いたい場面がありました。

## 問題点
```ContentView.swift
struct ContentView: View {
    @ObservedObject var viewModel = ViewModel()

    var body: some View {
        Button(action: {
            /// 省略 ///
        }) {
            /// 省略 ///
        }
        .alert(isPresented: viewMode.$isShowAlert) {
            Alert(title: Text("確認"),
                  message: Text("これはテストです"),
                  dismissButton: .default(Text("OKOK")))
        }
    }
```

しかしこのように書くと以下のようなエラーが発生します。

```
Cannot convert value of type 'Published<Bool>.Publisher' to expected argument type 'Binding<Bool>'
```

引数に指定するのは`Published<Bool>.Publisher`ではなく、`Binding<Bool>`にしてとのこと。

## 対処法
```ContentView.swift
struct ContentView: View {
    @ObservedObject var viewModel = ViewModel()

    var body: some View {
        Button(action: {
            /// 省略 ///
        }) {
            /// 省略 ///
        }
        .alert(isPresented: $viewModel.isShowAlert) {
            Alert(title: Text("確認"),
                  message: Text("これはテストです"),
                  dismissButton: .default(Text("OK")))
        }
    }
```

このように書くことで`Binding<Bool>`として扱えるようです。

## 参考にした記事
https://stackoverflow.com/questions/61469773/swiftui-viewmodel-published-property-and-binding

## おわりに
今回はViewModelのPublishedな値をViewでBinding<型>で扱う方法について書きました。

ご覧いただきありがとうございました。
こうしたほうがいいや、ここはちょっと違うなど気になる箇所があった場合、ご教示いただけると幸いです。

2022年はiOS開発がどのように変化するのかが楽しみです！

## お知らせ
現在、副業でiOSアプリ開発案件を募集しています！
全活動リンクをURLにまとめました。
https://linktr.ee/sasaki.ken

![LinkTree_200×200.001.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643372/e2dd3d99-db8b-a042-3f45-55933c34c59c.jpeg)
よく使う正規表現メモ

#これは何？
個人的によく使う正規表現のメモです。主にgrepで使います。必要に応じてsortやuniqなどと組み合わせて使います。

#正規表現の基本

| 正規表現 | 意味 |
|:-:|:-|
| [0-9]  | 0から9までの数字1文字を示す  |
| [A-z]  | Aからzまでの英字1文字を示す。大文字小文字両方が対象  |
| [A-Z]  | AからZまでの英字1文字を示す。大文字のみ。  |
| [a-z]  | AからZまでの英字1文字を示す。小文字のみ。|
| .  | 任意の1文字を示す。記号も含まれる。  |
| +  | 直前に記載された文字の1回以上の繰り返し  |
| ?  | 直前に記載された文字の0回または1回の繰り返し  |
| {n}  | 直前に記載された文字または正規表現のn回の繰り返し  |
| {1,3}  | 直前に記載された文字または正規表現の1～3回の繰り返し  |
| *  | 直前に記載された文字の0回以上の繰り返し  |
| []の中の^ | 直後の1文字または正規表現の否定。  |
| ^ | 直後の1文字または正規表現から始まる  |
| $ | 直前の1文字または正規表現で終わる  |
| \ | 直後の1文字をエスケープ  |
|[a｜b]|aまたはb（｜は実際にはパイプ記号です） |

#正規表現の具体例
sample.txtというファイル内を検索する場合の例です。厳密な一致ではなく、極力シンプルにすることと、多少余計なものを拾うことは許容する前提です。なので「〇〇っぽいものにマッチ」と記載しています。

###.co.jpで終わる箇所を探す。
「.」は任意の1文字を表すため、ここではエスケープが必要
grep '\.co\.jp$' sample.txt

#IPアドレスっぽいものへのマッチ
IPアドレスっぽい文字列を検索する。厳密なマッチではなく、やや幅を持たせてある理由は、正規表現が複雑すぎると処理に時間がかかるため。
下記は、「数字が0~3回繰り返しの後に.」というパターンが3回繰り返された後に「数字が0～3回繰り返し」を探す。
これだと、999.999.999.999のようなあり得ないIPアドレスっぽい文字列を拾ってしまうが、それはそれで不審な痕跡と言えるので、むしろ拾ってもらったほうがありがたい。
grep '([0-9]{0,3}\.){3}.[0-9]{0,3}' sample.txt

応用例として、-oオプションを使って、IPアドレスっぽい文字列だけを抜き出し、それをsortしてuniqするという方法もある。

ユニークするだけなら以下のとおり。-n を入れれば昇順ソートになる。
grep -o '([0-9]{0,3}\.){3}.[0-9]{0,3}' sample.txt|sort -u

IPアドレスの数をカウントしたい場合は以下のとおり。ついでに数が多いもの順でソートした例
grep -o '([0-9]{0,3}\.){3}.[0-9]{0,3}' sample.txt|sort |uniq -c |sort -nr

IPアドレスが記載されているカラムがわかっているならcutやawkで抜き出しても良い。
スペース区切りの場合は以下で1行目を抜き出せる。上記と同じようにパイプでsortに渡せば同じように処理できる。
cut -d " " -f 1 sample.txt
awk '{print $1}'  sample.txt

#メールアドレスっぽいものにマッチ
正直やらないのでやるならこんな感じかなというものを記載します。
そもそもメールアドレスの細かい定義がメールサービス提供者によって微妙に違うことがあり、特定の記号が使えたり使えなかったりするので、以下のような「@の前後にスペースが入っていない文字列」くらいの緩い条件が良いかなぁと思ったりします。
[^ ]+@[^ ]

ただこれだと検索対象によっては無関係な文字列がかなりヒットしてしまうと思います。
[^ ]+@[^]+\.jp のように、後ろの文字を限定すると良いかもしれません。.comなどに対応するためには、.の後ろに文字が２～３個という条件が妥当でしょうか。
[^ ]+@[^]+\.[A-z]{2.3}

#Apacheのアクセスログを調査
##IPアドレスの抽出
前述したとおり、cutやawkで1行目を抜き出すのが早いと思います。あとはsortやuniqで。

IPだけを抜き出してユニーク
cut -d " " -f 1 sample_access_log.txt |sort -un

IPごとにアクセス数ランキング
cut -d " " -f 1 sample_access_log.txt |sort |uniq -c |sort -r

##特定の条件を満たすリクエストを抽出
ここは様々なパターンがあり得ます。
一例として、GETまたはPOSTで.phpの拡張子を持つファイルへのアクセスを抽出します。
egrep -a '(GET|POST) [^ ]+\.php' sample_access_log.txt

さらに、ステータスコードが200のものだけに絞り込むなら、「" 200」でgrepすると良いです。「"」はステータスコードの前に記録されている「HTTP/1.1"」の最後の「"」にマッチさせるためです。ただし、「HTTP/1.0"」というパターンがないとも限らないので、「HTTP/1.1" 200」という条件にはしていません。
egrep -a '(GET|POST) [^ ]+\.php' sample_access_log.txt |fgrep -a '" 200'

あまり処理速度が上がるとは思えませんが、正規表現で無理やり書くなら以下になるかと思います。
egrep -a '(GET|POST) [^ ]+\.php[^ ]+ [^ ]+ 200' sample_access_log.txt
もう少し厳密に、HTTP/1\.[0-1]とかを入れても良いかもしれませんが、フォレンジック調査では通常とは異なる出力を除外したくはないので、多少緩めの条件の方が良いと思います。

攻撃を見つけやくするなら、メソッドとURL+クエリ文字列＋ステータスコードの抽出というのが良い気がします（抽出する情報は人によるかも）
抽出するだけなら単純にcutやawkで抜き出すのが良いでしょう。
一例ですが、区切り文字を「"」にして、2列目と3列目を出すことで、目的のデータが抽出できます。レスポンスサイズも出るのでなお良いかもしれません。
cut -d '"' -f 2,3 sample_access_log.txt

他、思いついたら追記していきます。

なお、上記はあくまでLinuxコマンドで調査した方が早いサイズのログを想定しています。より多くのログを調査する必要がある場合は、SIEMを使う方が良いでしょう。
個人的には無料で使えて使いやすいSOF-ELKがオススメです。
https://github.com/philhagen/sof-elk
Log4Shellデモ（実証〜検出〜修正）を公開しました

#Log4Shellデモ（実証〜検出〜修正）
世間を騒がせている重大な脆弱性Log4Shellを、実際に体験して、修正するところまでを見ることができる動画を公開しました。ぜひご覧ください。

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



#参考リンク
* [記事『Log4Shellの脆弱性が公開されました：Version 2.17.0にアップデートしてLog4j RCEを防ぐ』] (https://qiita.com/SnykSec/items/fccc10bd25cd5de0b56f)
* [Proof of Concept 用アプリケーション](https://github.com/kozmer/log4j-shell-poc)
* [Snykホームページ (Freeプランへのサインアップもこちらから)](https://snyk.io/)
* [【無料トライアル】セキュリティの「めんどくさい」を解決したい！デベロッパーファーストのSnyk入門編](https://qiita.com/SnykSec/items/aa80a976eb17299fff62)
* [Snyk Qiitaアドベントカレンダー2021](https://qiita.com/advent-calendar/2021/snyk)

Snykの公式[twitter](https://twitter.com/snykjp)や[Facebook](https://www.facebook.com/snykJP/)をフォローしていただけると嬉しいです！

![logo-solid-background.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2216557/5f57a176-ac0d-7b1f-aa31-193c6837b2a0.png)
GTM・dataLayer の仕組みと使い方


## Google Tag Manegerとは
アクセス解析や成果計測をするためのタグを一元管理できるサービス。
エンジニアが組み込まなくても、管理画面をぽちぽちするだけで、タグを埋め込むことができる。

## タグ配信・データレイヤーの仕組み
まず初めに、設置したGTMのタグを読み込み、GTMのコンテナと通信を行います。
その後、ユーザーがアクションを行った任意のタイミング(トリガー)で、コンテナに設定してあるタグを配信します。
配信されたタグは、そのままHTMLに埋め込んでその処理を実行します。


![無題 13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142322/5db3b627-22ca-3cca-6462-9ae46db6edbb.jpeg)


GTMでは、実行したい処理の「**タグ**」にいつ実行するかの「**トリガー**」をGUIを紐づける設定をします。
必要があればGTM上で利用できる「**変数**」を設定して、タグやトリガーで共通の値として使います。

### データレイヤーとは？
データレイヤーは、GTMで使いたい変数をサイト側から通知できる機能です。
下記のように、`dataLayer.push`に`{変数名 : 値}`という形のオブジェクトを送信することで、
GTMの管理画面上でその値を取り扱うことができます。
この値は、GTMのタグがロードされる度に新しく生成されます。

```html
<script>
// GTMのタグが準備される前は`window.dataLayer`が存在しないため、一度空の配列を代入しておく。(pushもArray prototypeのpushを使う)
// GTMのタグが準備された後は、GTMに送信する「dataLayerが持っているpushメソッド」が使えるようになる
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  key: value
})
</script>
```

https://developers.google.com/tag-platform/devguides/datalayer?hl=ja


## Google Tag Manegerの基本的な使い方

### タグ
<img width="500" alt="タグ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142322/b8e004f7-b734-a543-c7ce-95812334d0d6.png">

基本Google製のタグは管理画面でぽちぽち設定するだけになっています。
その他のサードパーティ製のタグは、基本「カスタムHTML」で定義します。
基本、`<script>・・・</script>`というタグを貼り付けるだけです。

### トリガー

<img width="500" alt="トリガー" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142322/cda0ab7b-10b8-926d-8283-cc8dec0ba1e9.png">

上記のようなトリガーに、要素のClass名や設定した変数と一致しているかなどの条件を加えることができます。

#### よく使うトリガー
* カスタムイベント
    * キー名`event`で送られたデータレイヤーが送信された時に発火するトリガー。
    * 発火のタイミングをサイト側で設定することができる。
* 要素のクリック
    * 要素をクリックしたタイミングで発火するトリガー。
    * 基本、クリックした要素のclassやidなどの属性に対して絞り込む
* 要素の表示
    * 要素が表示されたタイミング。
    * 基本、表示される要素のclassやidなどの属性に対して絞り込むの

### 変数

<img width="500" alt="トリガー" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142322/75db74ac-303c-6f94-4875-f768f7219386.png">
<img width="500" alt="トリガー" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142322/116c2954-06b0-f3db-a865-255ed2ff79a4.png">


#### よく使う変数

* 定数
    * そのままの意味で定数を管理する場所。
    * 繰り返し使う値は全て定数で定義して、いつでも一括変更できるようにすると良い
* カスタムJavascrpt
    * Javascriptでロジックを書き、返却された値を変数として扱うことができる変数。
* データレイヤー変数
    * サイトから送られたdataLayerを、GTMの管理画面上で取り扱えるようにする変数。
deviseの複数モデル使用でauthenticate_user!を使用したい

### 事象

オリジナルアプリを作成していて、アカウアントを分けるためにdeviseの複数モデルを使用している。
authenticate_user!を使用してログインしていない場合はログインページに遷移させる記述を
したかったが、複数モデルを使用しているためどちらかがログインしている場合でも片方の記述が
適用されてしまう。

```application_controller.rb
before_action :authenticate_trainer!
before_action :authenticate_cliant!
```

### 解決方法

```posts_controller.rb
before_action :redirect_root, only: [:edit]

private

def redirect_root
  redirect_to root_path unless cliant_signed_in? or trainer_signed_in?
end
```
と言う記述に変更する。
ログインページに飛ばすような記述だと、複数モデルのためどちらのログインページに飛ばせばいいか
判断できないため、トップページ飛ばすメソッドをオリジナルで作成することで解決。
ログインしていないユーザーが投稿の編集ページのURLを直接入力すると、ロップページに
遷移する。
Dynamics 365 ってなに？


##はじめに
Dynamics 365 ってなに？の方向けに簡単に説明します。（1分ほど）

一言でシンプルに言うと。
Dynamics 365 は CRM＋ERP を1つにしたクラウドで提供するパッケージ製品です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/cdd3804a-3d20-102c-af2e-5f97198dbe7a.png)

Dynamics 365 の全体感です。Dynamics 365 はいろんな機能をもった製品群です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/3ea30a69-16a7-0817-b02c-0ea1c41ec1c4.png)

上半分は（マーケティング、営業支援、顧客サービス、フィールドサービス）CRMの顧客管理システムを中心にした製品。
下半分は（財務会計、サプライチェーンマネジメント、ECサイトなどコマースといった）ERP製品。
一番下は複合現実でARなどの拡張現実世界を実現する製品。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/2161752e-0f5e-cf62-5540-969d7667f3b7.png)


普段利用している業務に合わせて、選択して利用できます。

##参考動画

https://www.youtube.com/watch?v=GSBgRwzLaMk&t=170s

https://www.youtube.com/watch?v=5lTlpLOgCsk&list=PL1RqQ3kddIpbR1xDKWlf8rT71ZLO-TMva&index=27


##詳細は以下よりお問い合わせください。


https://dynamics.microsoft.com/ja-jp/what-is-dynamics365/


https://dynamics.microsoft.com/ja-jp/

以上
AtCoder Beginner Contest 009 をやった(Java)


 

AtCoder Beginner Contest 009をやった。

##[A](https://atcoder.jp/contests/abc009/tasks/abc009_1)
3個の段ボールだとして両手で持った時何回往復が必要かを実装してください

```Java
import java.util.*;

public class Main {
    public static void main(String[] args) throws Exception {
        // Your code here!
        Scanner scan = new Scanner(System.in);
        int N = scan.nextInt();
        
        if(N == 1 || N == 2){
            System.out.println(1);
        } else {
            if(N % 2 == 0){
                System.out.println(N / 2);    
            } else {
                System.out.println(N / 2 + 1);
            }            
        }
    }
}
```

##[B](https://atcoder.jp/contests/abc009/tasks/abc009_2)
Set使ってます。
Listをつかって重複排除してもいいですが、Setのほうが利便性も高いので。
重複排除した後はsortしてあげて問題文の通り出力です。

```Java
import java.util.*;

public class Main {
    public static void main(String[] args) throws Exception {
        // Your code here!
        Scanner scan = new Scanner(System.in);
        int N = scan.nextInt();
        
        Set<Integer> set = new HashSet<Integer>();
        for(int i = 0; i < N; i++){
            set.add(scan.nextInt());
        }
        
        ArrayList<Integer> list = new ArrayList<Integer>(set);
        Collections.sort(list);

        System.out.println(list.get(list.size()-2));
    }
}


```

いつかC問題もJavaで解きたいな(n回目)。
Rubyのattr_accessorとは何か

## 概要
Rubyでよく使用されるattr_accessorについてその必要性や使用方法などを備忘録として記載していきます。

## attr_accessorとは何か
結論から言うと`attr_accessor`（読み方： アトリビュートアクセサー）とは、
外部からクラス内の__変数を参照するためのゲッターメソッド__とその__変数を変更するためのセッターメソッド__を定義するものです。
ゲッターメソッドとセッターメソッドについては後ほど実際の例を記載します。

- 下記のようなUserクラスが定義されていたとします。

```ruby
class User
  def initialize(name, age)
    @name = name
    @age  = age
  end
end
```

- 外部から直接変数を参照した場合

```ruby
# Userインスタンスを作成
user = User.new('鈴木', 33)
# 下記のように外部から直接参照しようとするとエラーになる
puts user.name
# もしくは
puts user.age
```

- 外部から直接変数を変更した場合

```ruby
# Userインスタンスを作成
user = User.new('田中', 23)
# 下記のように外部から直接変更しようとするとエラーになる
user.name = '佐藤'
# もしくは
user.age = 45
```


では外部から参照や変更をするにはどうすればいいのか。
そこで登場するのが`attr_accessor`です。

- 先程のUserクラスを下記のように変更

```ruby
class User
# attr_accessorを追加
  attr_accessor :name, :age

  def initialize(name, age)
    @name = name
    @age  = age
  end
end
```

`attr_accessor`を追加したことにより参照、変更できるようになります。

```ruby
# Userインスタンスを作成
user = User.new('鈴木', 33)
# 下記のように参照できるようになる
puts user.name #=> '鈴木'
puts user.age  #=> 33

# 下記のように変更できるようになる。
user.name = '田中'
user.age  = 56
puts user.name #=> '田中'　
puts user.age #=> 56
```

## attr_accessorの仕組み
attr_accessorは先程もお伝えしたようにゲッターメソッドとセッターメソッドを役割があります。
具体的には下記に記載します。

- `attr_accessor :name, :age` を記載しない場合

```ruby
class User
  def initialize(name, age)
    @name = name
    @age  = age
  end

# ゲッターメソッド
  def name
    @name
  end
# ゲッターメソッド
  def age
    @age
  end

# セッターメソッド
  def name=(name)
    @name = name
  end
# セッターメソッド
  def age=(age)
    @age = age
  end
end
```

*クラス内のメソッドはクラスのインスタンスから呼び出せるので*

```ruby
# Userインスタンス生成
user = User.new('佐藤', 55)

# Userクラス内のゲッターメソッドであるname, ageメソッドを呼び出し
puts user.name #=> '佐藤'
puts user.age  #=> 55

# Userクラス内のセッターメソッドであるname, ageメソッドを呼び出し
user.name = '吉田'
user.age  = 12
puts user.name #=> '吉田'
puts user.age  #=> 12
```

##### 補足説明
`name=`や`age=`のセッターメソッドは__＝（イコール）__をつけることで代入式として呼び出すことが可能になる。
`user.name = '佐藤'`や`user.age = 12`はそれぞれ__'佐藤'__と__12__を代入しているように見えるが
実際にはそれぞれ引数に__'佐藤'__と__12__を渡して、`name=`と`age=`メソッドを呼び出している。
___

ゲッターメソッドとセッターメソッドが`attr_accessor`を定義することで
下記のようにコードが簡単になります。

- `attr_accessor :name, :age`を記載した場合

```ruby
class User
  attr_accessor :name, :age

  def initialize(name, age)
    @name = name
    @age  = age
  end
end
```

`attr_accessor`を定義することによって上記のようにわざわざゲッターメソッドとセッターメソッドを定義しなくても
ゲッターメソッドとセッターメソッドを使用することができます。
そのおかげで、外部から変数を参照したり、変更したりできるようになっているということです。

## 参考文献
[【Ruby】 attr_accessorメソッドの使い方と必要な理由とは？](https://pikawaka.com/ruby/attr_accessor)
Japan Flying Labsって何？

[NPO法人クライシスマッパーズ・ジャパン](http://crisismappers.jp/)　(代表　古橋大地　以下 CMJ）のプロジェクトの一つです。　2018年10月に米国およびスイスに登録している非営利団体[WeRobotics](https://werobotics.org/)とCMJがMOUを結びJapan Flying Labsが誕生しました。

[Japan Flying Labs](https://flyinglabs.org/japan/) (理事長　古橋大地　以下　JFL）は地域コミュニティがドローン、ロボティックス、マッピングなどにより減災・災害対応、健康・人道的支援、環境問題、STEM教育など社会貢献に携われる社会がつくられるよう活動しています。

現在[Flying Labs Network](https://werobotics.org/flying-labs/)としてアジア、太平洋地域、アフリカ、南米その他の地域など世界30＋の国々にFlying Labsがあります。　WeRoboticsとFlying Labsは共同でドローン、データー、ロボティックス、AIなどの専門知識を地域のリーダーによる地域主導で活用するナレッジハブのネットワーク構築をしています。

#####なんだかよくわからないですよね。じゃあ、実際JFLって何しているの？　って思いますよね。
![JFLmap.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132056/a1c9154c-e53a-4be8-f6cc-229240027f7d.jpeg)
　　　　　　　　　　　　　　JFLの関係図
　

CMJの代表的なプロジェクトが災害ドローン救援隊「[DRONEBIRD](https://www.facebook.com/dronebirdproject)」です。古橋隊長のもと、災害時にドローンを活用し、迅速に現地の空撮画像を撮影し、その情報をもとに正確な地図をつくる部隊。それがDRONEBIRDプロジェクトです。

CMJの長男プロジェクトがDRONEBIRDとするとJFLは次男のようなプロジェクトです。

次男のJFLはCMJやDRONEBIRDの活動で、これは日本からFlying Labs Networkや世界に知らせたいという事をUse Caseやブログで紹介しています。

例えば、全国の30以上の[自治体と災害協定](https://drive.google.com/file/d/1KnTmM-_CD2wo3kw6GLmMvwjTbp-c1uGB/view)　を結び日頃から自治体の防災訓練に参加し関係を密にし、災害時にドローンを遅滞なく飛ばせるように環境を整えていることをUse Caseとして紹介しています。　世界的にドローンを飛ばす許可等の取得が難しくなっている中、Flying Labs Network にはJFLのように災害対応しているFlying Labsがあります。日本のUse Caseを彼らは参考にできます。

また、今年は古橋理事長のブログ発信で[熱海の土砂災害からOpen Dataの大切さ](https://blog.flyinglabs.org/2021/11/21/what-is-digital-openness-and-why-is-it-important/)についてknowledge shareをしました。

今までは自分がかかわっているCMJやDRONEBIRDの活動をメインにJFLは発信してきましたし、これからも発信していきます。　しかし、次男のJFLは災害対応に限定されずに人道的支援や環境問題などいろいろな分野をカバーするLabです。そしてJFLには他分野の多才なメンバーが参加しています。今後は他メンバーにも発信してもらい、活動をもっと世界に知ってもらえたらと思います。

コロナ禍の今、各国のFlying LabsやWeRoboticsのメンバーとは様々なWebinarや年2回のオンラインRetreatで話し合いや交流をしています。　今年10月のRetreatのculture sessionではJFLメンバーで　我ら日本のドローン芸人　谷＋１さんがマシュマロキャッチを披露して大爆笑を得ました。

![Tanijfl.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132056/be9dd819-d49f-2101-9766-8c616295e283.jpeg)

JFLのこと少しはわかっていただけたでしょうか？


Flying Labs Newtworkには日本と同じように自然災害の多いアジアや南米諸国が参加しているので、今後彼らとコラボして研究や活動ができたらと思います。
2DゲームのUIを変更する2つの方法

#UI変更は必ずSceneを変えなきゃ行けないのか？
unityでゲームを作成する際、特に3Dで、ゲームのステージを変えるときにSceneを変えることで対応する場合は多いと思いますが、2DゲームではSceneを変えなくてもPanelを変更することでUIを変更することができます。
本日はそんなお話です。

##2Dゲームで2つのUI変更方法
UIを変えるには以下の2つの方法が考えられます。
① Sceneを変える
② Panelを変える

②の場合は、目の前にある紙芝居の紙をめくっていくようなイメージであり、①の場合は、紙芝居そのものを変更するイメージです。（伝わりますか？ww）

##Sceneを変えるScript

```C#:TitleSceneManager.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class TitleSceneManager : MonoBehaviour
{
    public void GameStart()
    {
        SceneManager.LoadScene("GameScene");
    }
}
```

必ず最初にUnityEngine.SceneManagementを呼び出さないといけません。

##Panelを変えるScript

```C#:GameManager.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class GameManager : MonoBehaviour
{
    public GameObject panelA;
    public GameObject panelB;
    public GameObject panelC;

    void Start()
    {
        panelA.SetActive(ture);
        panelB.SetActive(false);
        panelC.SetActive(false); 
    }

    public void AtoB()
    {
        panelA.SetActive(false);
        panelB.SetActive(true);
    }

    public void AtoC()
    {
        panelA.SetActive(false);
        panelC.SetActive(true);
    }

    public void BtoA()
    {
        panelB.SetActive(false);
        panelA.SetActive(true);
    }

    public void BtoC()
    {
        panelB.SetActive(false);
        panelC.SetActive(true);
    }

    public void CtoB()
    {
        panelC.SetActive(false);
        panelB.SetActive(true);
    }

    public void CtoA()
    {
        panelC.SetActive(false);
        panelA.SetActive(true);
    }
}
```

紙芝居のページがPanel Objectに相当します。
必要な枚数のPanelを用意し、それぞれをアタッチして、1枚目のみ表示、その他は非表示とし、その後Panelの表示を切り替えることでUIを変更していきます。
リア充にリア充を台無しにさせたい

## リア充なんか砕けちゃえ～～～！！！

※この記事は「木更津高専アドカレ2021 2本目」の24日目の記事です。

前→ ["教える"のすゝめ](https://qiita.com/takamasa272/items/5dc4f60d01946981705f) by @takamasa272
次→ [unityで音ゲーを作る](https://qiita.com/toma09to/items/0c9aca040ca3278d868e#_reference-8879ab52588acf1fcc1b) by @toma09to

ということでどうも、非リア歴が増えていくとすあっぷです。
非リアでリアルが充実してるのでむしろリア充を名乗ってもいいのでは？と思う今日このごろ。

本日はクリスマスイブにふさわしい「リア充を台無しにするアイデア」を、[現役リア充の友達](https://twitter.com/haruto_h13_s)に実装してもらおうと思います。
難易度は激ハードですが、最後まで作れるのでしょうか。
がんばれ～

## 今回のアイデア
今回、彼に挑戦してもらうのは、「男女二人がにっこり写真撮ったら背景を爆破する」というなんともクリスマスにはもってこい、楽しそうなアイデアです。

開発言語はPython，使用ライブラリはみんな大好きOpenCV。

#### OpenCVって何よ

画像処理とか画像解析とか、機械学習までできちゃう優れものってイメージです。
詳しくは[Wiki](https://ja.wikipedia.org/wiki/OpenCV)を見よう！

参考にさせていただいたのは以下の記事です。

[リアルタイムで物体の輪郭を抽出する](https://qiita.com/kotai2003/items/f164143171f80cfbeca8)
[PythonとOpenCVを使った笑顔認識](https://qiita.com/fujino-fpu/items/99ce52950f4554fbc17d)
[顔検出 + 年齢・性別予測](https://qiita.com/oHjm/items/677b57d4714de3cf83ca)

## 一日目！

かなーり投げやりでお願いしたら快く引き受けてくれました。

彼はライトPythonerなので、ひとまず一番優しそうな笑顔認識から、手打ちでコピペしていましたね。

この日はOpenCVにカメラの映像を読ませるだけで終わったのかな？(記憶が定かでない)
でも、ライトPythonerにしては初日ですごい進捗を叩き出したのでした。

彼も開発の楽しさに気づいたみたいで、ハマったようです。

## 二日目！

笑顔認識が思うように出来ず手間取っている様子。
~~(リア充のクリスマス前の大事な時間を奪うことに成功)~~

結局typoが原因だった。

## 三日目！

笑顔認識ができたらしい。

私がカメラを覗くと、そこには私の顔を囲むように青い円が。
ﾆﾁｬｧ…とすると、円が赤くなったではありませんか。

私「これって…」
開発者「もしかして」
出来上がってる〜？！「私&開発者」

彼の成長度合いがすごい。

## 四から七日目！

性別認識実装に手間取っている様子。

実装にクセ(同時処理が重なって重たい)があり、これ以上の開発は中断したほうが良さそう。

彼も同意し、今回の検証（笑）は終了。

# 結果

実装は最後まで出来なかったものの、かなり惜しいラインまで到達できていて、しかもクリスマス前の大事な時間を奪うことに成功しました。

成果としては大きいのではないでしょうか。

というか彼を見ていて思ったのは、

「1から書くよりライブラリ使ったほうが実装ラクだし出来た時嬉しい」
を教えてったほうが早い、ということですね。

作れたら楽しい。どの開発者も多分そんなもん。

~~それはそうとしていつか誰か作ってください~~

では。
2022年に向けての抱負

1. NxにPelemay技術を応用したPelemay Backendを作りたい
1. evisionにPelemay技術を応用したい
1. Elixirで人工衛星画像処理システムを実装したい
1. 複数の環境下のテストを自動化するastestingを作りたい
1. ARMとRISC-Vを推して消費電力あたりの性能を追求したい
1. https://dev.to/zacky1972 に英語技術情報を蓄積していきたい

以下，時間を見つけて書いていく。
Pelemayをふりかえる

昨日は @im_miolab さんの[技術コミュニティを2年間運営して主宰イベントを50回開催してきた上で意識や工夫してきたこと](https://qiita.com/im_miolab/items/584b0adfa1921d88526b)でした。

# はじめに〜なぜこの文章を書き始めたか

Pelemay(ペレメイ)というのは，私が研究開発しているElixir向けSIMD方式の並列処理系です。

この文章を書くことになったきっかけは k.nako @kn339264 さんが始めた[「Elixirコミュニティの歩き方〜国内オンライン編〜」](https://speakerdeck.com/elijo/elixirkomiyunitei-falsebu-kifang-guo-nei-onrainbian)からでした。

https://twitter.com/kn339264/status/1456986610973622276

このときに k.nako さんがPelemayMeetupの説明がうまくできない状況だったようです。

それで次のようなツイートになりました。

https://twitter.com/kn339264/status/1451225457186074626?s=20

このスレッドでのやりとりをふりかえって，私が痛感したことを次の引用リツイートに書きました。

https://twitter.com/zacky1972/status/1451457153458327560?s=20

名文化→明文化ですね。最近老眼の進行のせいか，誤字が。。。

それを受けて，k.nakoさんが次の企画を提案しました。

https://pelemay.connpass.com/event/229288/

この企画も直前に押し迫った11月11日に今年も[fukuoka.ex Advent Calendar 2021](https://qiita.com/advent-calendar/2021/fukuokaex)に書いてほしいという @piacerex さんの要望を受け，何を書こうかと考えました。

で，翌11月12日にエントリーした際に，Pelemayの歴史のふりかえりを寄稿することを思い立った次第です。

# あらすじ

1. 黎明期〜研究を開始する以前の話
1. Hastega(ヘイスガ)発表前史〜研究を開始してからLonestar ElixirConf 2019で発表するまで
1. Lonestar ElixirConf 2019〜世界デビュー，[Lunchisode](https://smartlogic.io/podcast/elixir-wizards/special-lonestar-elixir-2019/)，そして José Valim (ジョゼ・ヴァリム)との初対面・ディスカッション
1. FAIS支援による研究開発第1期〜 @hisaway の活躍
1. HastegaからPelemayへ〜凱旋報告，Pelemayへの改称，そして ElixirConf US 2019での発表
1. FAIS支援による研究開発第2期〜Pelemay Meetupスタート
1. minsoraとJST A-STEP トライアウトの支援による研究開発第1期〜ElixirConf US 2020での発表，PelemayFpの発表
1. minsoraとJST A-STEP トライアウトの支援による研究開発第2期〜JoséによるNxの発表，Nxへの合流，BEAM/OTP対話とSIMD勉強会
1. 2022年に向けての抱負

思いつきですが，ダラダラと時系列順に書くのではなく，いくつかの論点に沿って「伏線とその回収」という感じでまとめた方がわかりやすいのではないかという気がします。

# 論点その1: 私がPelemayの研究開発を始めたのはなぜか，そして JoséがPelemayに期待し，その後Nxを作ったのはどんな動機によるものか

@zacky1972 視点

* 私がElixirを研究対象とするきっかけは， @piacerex さんの誘いによるもの
* 私がElixirを研究対象として選んだのは，次のような理由
    * Elixirがイミュータブルであること
    * そのことの意義が，並列性を始め，とても奥深いものであったこと
    * 私が既存のプログラミング言語で不満に思っていたことがミュータブルに起因することだったことに気づいたこと
* [GPGPUとEnum/Flowのプログラミングが類似していたことがPelemay(Hastega)の研究の始まりだったこと](https://qiita.com/zacky1972/items/140d2380dfdf727b22bc)
* 私が2018年4月ごろにElixirでの研究開発のテーマの候補として，GPGPUと軽量コールバックスレッドのどちらにするかを @piacerex さんに聞いたところ，GPGPUと答えたことで，GPGPUの研究にフォーカスしたこと

José視点

* 少なくとも2019年のLonestar ElixirConf 2019時点で，Elixirを機械学習等の文脈で数値演算(number crunching)を行わせることにJoséが強く興味を持っていたことが，[Lunchisode](https://smartlogic.io/podcast/elixir-wizards/special-lonestar-elixir-2019/)に記録されている。
* その Lunchisode で，そのことを知らない私がただ GPU というキーワードに反応して，[直後にする自分の発表 "Hastega: Challenge for GPGPU on Elixir"](https://youtu.be/lypqlGlK1So)について，語り始めたので，Joséが関心を持って，講演終了後にディスカッションをしてきた
* ElixirConf US 2019のJoséのkeynoteにて，Hastegaの名前が大きく掲示される
* その後も，Joséは，積極的に私のことを支援してくれた
* その後，Joséは，Nxを発表。そのお披露目をした[Thinking Elixir PodcastでPelemayとの違いを言及(22:30付近から)。](https://thinkingelixir.com/podcast-episodes/034-jose-valim-reveals-project-nx/)。曰く，Elixirのサブセットを定義して，数値演算により適した形にしたということだと思う。

# Pelemay Meetup にて

これをもとにふりかえりの会をしました。

https://youtu.be/QW8kvYn-VxE


# 明日は

@piacerex さんです。お楽しみに
PLCCライター三種

ICはDIPから表面実装になる間にPLCCという四角いパーツだった時期があります。DIPの頃は5Vが主流で表面実装になってからは3.3Vが主流になりました。PLCCの頃はちょうど入れ替わりで5Vと3.3Vのデバイスがあります。

後期のEEPROMや初期のFlashまたGALやCPLDなどがありました。

20,28,32,44...ピンなどがあります。なぜかEPROM(OTP)はDIP 600milでは28ピンでPLCCは32ピンのものがあります。推測なのだが出来るだけ同じピンで多くのサイズをサポートできるようにしたかったので28の一つ上の32を選択したのかもしれない、DIP 600mlの512Bbitは無理やり28ピンに詰め込んだ感じがあるし。

![IMG_20211223_070032.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/6c3dac36-9a80-708d-555d-3a765dcf8baa.jpeg)

変換基板も作ったりしてます。

![写真（2020-06-25 17.20）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/a7dca891-5f0e-3cd2-93a7-becf213a837b.jpeg)

最近の人はCADで回路を書いて基板を発注するみたいですが、ユニバーサル基板で育った世代なので、こつこつワイヤーリングするのが好きです。また思い立ったときにすぐに作れるのも魅力です。

あと失敗しても剥がして作り直せるのもいいです。
iOS用の機械学習ライブラリをつくる

#機械学習モデルを搭載したライブラリをつくる方法

![christmas-6873868_640.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/6634f1b7-cc30-efe3-0de3-cd208b9cc0ca.jpeg)


機械学習の機能をライブラリに盛り込めます。

#機械学習モデルをライブラリでも使いたい

画像認識、物体検出、セグメンテーション、音声認識、文字認識、画像生成、超解像、深度推定、画像復元など、
機械学習モデルには様々な便利なものがあります。
それらのパワーをライブラリにも搭載したい。

iOSプロジェクトで機械学習モデルを使うときは、CoreMLModelをプロジェクトに搭載しますが、SwiftPackageManagerに対応したライブラリでは直接mlmodelの拡張子のファイルを積み込めない。
といって、ユーザーに別でmlmodelだけダウンロードしてもらってプロジェクトにコピーしてもらうのは手間。
なんとかモデルごとパッケージに組み込めないか。。。

#コンパイルしてバンドルすれば解決

mlmodelをコンパイルしてmlmodelcというファイルと、swiftのモデル読み取りファイルをライブラリに積み込めば、そのまま機械学習モデルが使えます。


#コンパイル方法

コンソールを開き、以下を実行します。

```shell
xcrun coremlcompiler compile pathToYourModel.mlmodel .
xcrun coremlcompiler generate pathToYourModel.mlmodel . --language Swift
```

>yourModel.mlmodelc
yourModel.swift

というファイルが生成されるので、ライブラリのパッケージのSource/（パッケージ名）のフォルダにコピーします。

Packageファイルのターゲットリソースにmlmodelcを追加します。

```swift
.target(
    name: "MyPackage",
    dependencies: [],
    resources: [.process("yourModel.mlmodelc")]),
```

これで、SwiftPackageのライブラリでもこのモデルが使えます。

![スクリーンショット 2021-12-23 7.21.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/87c15859-7cd0-0ad4-2773-2db7d28dcdbd.png)


#コードからの呼び出し

```swift
let url = try? Bundle.module.url(forResource: "yourModel", withExtension: "mlmodelc")
    let mlModel = try! MLModel(contentsOf: url!, configuration: MLModelConfiguration())
```

もしくは、

```swift
let mlModel = try! yourModel(configuration: MLModelConfiguration()).model
```

🐣
****
フリーランスエンジニアです。
お仕事のご相談こちらまで
簡単な開発内容をお書き添えの上、お気軽にご連絡ください。
rockyshikoku@gmail.com

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

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
ほぼ独学・未経験者が、XDデザインカンプからコーディングしてみました！

#はじめに
こんにちは、おがわです！

この記事はほぼ独学・未経験者が購入したXDデザインカンプからコーディングをした記事になります。
初学者の方や、同じようにコーディングにつまづいている方の力になれるよう、頑張って書いてみました！


##自己紹介
私は現在、36歳で、介護の仕事をずっとしてきました。
そんな私が「Web制作　コーダー」という職種に興味を持ち、2020年12月よりプログラミング学習を開始しました。
今回のコーディングは、WordPress化、かつ仕事をしながら、ということもあり2週間近くかかったと思います。

##概要
タイトルにある様に、XDデザインカンプからコーディングをした記事になります。

##トップページ
![GIF 2021-12-23 7-58-44.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2220592/03298b1c-2253-93fe-8289-8b4ec16c4c64.gif)

###トップページで困ったこと
実はいきなり手が止まりました…。
かの有名な星のやのサイトみたいに、メインビジュアルの部分を少しずつズームをかけながら画像が切り替わる感じで、との指示が！:fearful:

「誰だよ！HTML、CSSが簡単なんて言ったの！」と、一人でイライラしていたのを覚えています(笑)

『javascript アニメーション 大きく』と検索しても、cssでの記述が出てきて、
「あれ？JavaScriptじゃない？」と疑心暗鬼になってみたり。

丸2日悩んで検索してもよくわからず、たまらず同じ課題に取り組んでいる先輩のサイトを見て、
「まぢか、CSSでアニメーションできるんだ！」とすごく感動したのを覚えています。

本当に、HTML、CSSは簡単じゃない！(笑)

###ほかにも困ったトップページ
・縦書き
・inner幅から出る、画像
・JavaScriptを用いてのタブの切り替え
などなど

![GIF 2021-12-23 8-22-27.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2220592/bbf28ac2-7530-fdd7-928f-5386029243a3.gif)

####縦書きのコードはこれ！
```css:css
  writing-mode: vertical-rl;
```
実は縦書きにもいろいろなcssがあって、英数字は横のままとかもあります。

####inner幅からはみ出る画像の配置は、頭が変になりました…。
始めは、innerを設置し、どの要素にも同じ余白を持てるようにしていたのですが、
このinnerからはみ出る感じの画像があり、ここも悩みました。

色々試行錯誤してみて、一度innerを外してみたところ、なんとかうまくいった、というのが本当のところです。
innerを設置したまま、はみ出す方法もあるのですが、この時は上記の方法でやってみました。

####じゃあ、どうやって余白を合わせてるの？
```css:css
    margin-left: 7.135%;
    // もしくは
    margin-right: 7.135%;
```
と、両脇の隙間を同じだけとることで、バランスがとれます。

###よくある『ふわっと表示』のやり方はたくさんある！
今回のデザインカンプでは、Aos.jsというものを使って、ふわっと表示してほしいとの指示があり、またもや検索！
Wow.jsを使ったりしたこともあったので、これでコーディングの引き出しが増えました！:blush:

##コーディングの面白さは、正解が1つじゃないところ！
たぶん、コーディングを挫折してしまう理由の1つに、正解の多さがあると思います。
というのも、先ほどのように、『ふわっと表示』する方法だけでも、もっといろいろな方法があるからです。

それを調べるのが楽しかったり、うまく表示できた時の喜びがある人は、Web制作が少しずつでも進むような気がします。

ただ、おがわは仕事をしながらの学習だったため、結構イライラしながら学習してました(笑)
なぜなら、そもそもうまくコードが書けなかったからです。

##コーディングに挫折しない方法
毎日少しずつでもいいから、コーディングをしていくことかな？と思います。

学習し始めのころは、身近な存在じゃないので、慣れるまで時間がかかると思います。
でもそれは、みんな同じです。

あきらめず、でも嫌いにならないように、無理せずに学んでいくことが一番の近道だと思います。

##最後に

巷では「HTML、CSSは簡単！」という人が多い気がしますが、その人にとっては簡単だったのかもしれません。
ただ、一年以上学習している私でも、奥が深く、まだ理解できていないことの方が多いです。

少し挫折してしまったり、休憩してみたりするのは、全然あると思います。
実際、私もそうでした。

でも、コーディングができると、ホームページを作ることができるようになります。
そのホームページが集客に役立ったり、色々な人をつなぐ道具になります。
これって、結構すごいことで、ホームページがあることで、世界とつながることができるんですよ！:japan:

なので、難しいことの方が多くてしんどい時もあるかと思いますが、少しずつでも前に進めるよう、一緒に学んでいきましょう！:laughing:
運動　その1

#中学校理科の運動の全体の単元

|分野|章|カテゴリ|節|
|:-----|:---|:----|:----|
|〔第1分野〕	|（1）　身近な物理現象	|ア　光と音	|（ウ）　音の性質
|	|	|イ　力と圧力	|（ア）　力の働き
|	|	|	|（イ）　圧力
|	|（4）　化学変化と原子・分子	|ウ　化学変化と物質の質量	|（ア）　化学変化と質量の保存
|	|	|	|（イ）　質量変化の規則性
|	|（5）　運動とエネルギー	|ア　運動の規則性	|（ア）　力のつり合い
|	|	|	|（イ）　運動の速さと向き
|	|	|	|（ウ）　力と運動
|	|	|イ　力学的エネルギー	|（ア）　仕事とエネルギー
|	|	|	|（イ）　力学的エネルギーの保存
|	|（7）　科学技術と人間	|ア　エネルギー	|（ア）　様々なエネルギーとその変換
|	|	|	|（イ）　エネルギー資源
|	|	|イ　科学技術の発展	|（ア）　科学技術の発展
|	|	|ウ　自然環境の保全と科学技術の利用	|（ア）　自然環境の保全と科学技術の利用
|〔第2分野〕	|（2）　大地の成り立ちと変化	|ア　火山と地震	|（イ）　地震の伝わり方と地球内部の働き
|	|（6）　地球と宇宙	|ア　天体の動きと地球の自転・公転	|（ア）　日周運動と自転
|	|	|	|（イ）　年周運動と公転
|	|	|イ　太陽系と恒星	|（ア）　太陽の様子
|	|	|	|（イ）　月の運動と見え方
|	|	|	|（ウ）　惑星と恒星
アプリのUIを考えるためにやったこと



この記事は[and factory.inc Advent Calendar 2021](https://qiita.com/advent-calendar/2021/andfactory) 24日目の記事です。
昨日は@KKusumiさんの[【Android】今日からできるSplashアイコンアニメーション【Splash】](https://qiita.com/KKusumi/items/b29eaec03649fea8f7bf)でした。

### きっかけ
こんにちは、Androidエンジニアのyst_iです。

アプリのUI、捗ってますか？

「アプリのUIはデザイナーの担当、エンジニアは深く踏み込まないよ」という考え方は多いと思います。僕も基本的には同じ考えです。ただ、UIをデザイナーだけではなく、チームで考えられたらより良いものが出来ると考えています。

UIはユーザ体験に直結します。また、最終的にエンジニアがコードで実現する箇所です。どうせなら良いUIを選択してユーザに使って欲しいと考えています。

ただ、実際にUIを考えはじめると迷うことが多いです。何を基準にするのか？他にどういうUIのパターンがあるのか？しっかりとまとめるのは難しいと感じます。

良いアウトプットを出すのは難しいです。

良いアウトプットを出すためには、まずインプットを変える必要がありそうです。[こちらの記事](https://note.com/akira_miyazaki/n/n2a1c4ef230c3)を参考にしていろいろなアプリのUIを記録することを始めました。

### やったこと
- アプリをDLして良いなと思ったUIのスクショとメモを記録する
    - こんな感じでとっていきます
![スクリーンショット 2021-12-22 12.49.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36517/99d5bc62-7da6-c290-478f-4dfb0f4109d0.png)


    - 多くのアプリに触れようと思ったので、アプデ前後の比較はしませんでした。DL後に一通り触って記録するを繰り返しています。2020年から現在まで２年ほど続けています
    - アプリを探したところ
        - Google Play のランキング
        - アワード
            - Google Play みんなで選ぶアワード 2021 など
        - マンガアプリ
        - まとめサイト
            - 「アプリ UI 綺麗」など検索するといくつか見つけられました
        - おすすめアプリを聞いてみる
            - 自分が知らなかったアプリを聞けておすすめです
- エンジニア定例、担当アプリのチーム定例で共有する
    - 頻度は週１か隔週
    - せっかくなのでアウトプットして、フィードバックをいただきます
- 担当アプリのチームに提案する
    - 課題の解決、UI改善ができそうならせっかくなので提案します。合意が取れたら実装・リリースに進みます



### 振り返り
- なるべく週１でアウトプットする
    - やはりアウトプットする過程で考えがまとまっていきますし、面白がってくれる人も出てきて、感想をもらえるのでモチベーションも上がります。
    - 定期的に作業することで習慣になっていきます。
    - チーム内で相談している時に「その機能のUIならこのアプリが良いかも」と資料を出せるので、少しMtgに貢献できた気がします

- 記録する観点をアップデートする
    - はじめの頃は担当アプリで未実装機能（サジェストあったらいいよね程度）や、アニメーションなどを記録してました。
    - ただ、めぼしい機能（UI）を記録すると新しく機能を探すのが大変になり、時間かけてもアウトプットが増えないことが多くなり、モチベーションが落ちていきました
    - そこで、以下の観点を追加しました
        - アプリの強みとその強みをユーザに伝えているUIはどこか？
        - 担当しているアプリの課題を調査対象のアプリはどうやって解決しているのか？解決している機能（UI）はどこか？
            - 例えば、併読率に課題があるとすると、併読率を伸ばそうとしているUIを探す
    - 課題とUIの結びつきを意識してみるようにしました。この観点で見るようにすると新しい気づがあり、モチベーションが回復したと思います。

- 担当するアプリのUIを改修する
    - 最終的には担当しているアプリに活かしたいので、記録を参考にして、UI改善を提案します
    - しっかりと成果を測れていませんが（今はここを頑張っています）、自分の提案でアプリ改善が進むのは嬉しいものです

- リリース後の結果が知りたくなる
    - 自分が提案したことなので結果が気になり、分析に目が向き始めます。自分の活動範囲を広げたくなります。


### まとめ
- 他のアプリを見始めてみて、UIの引き出しが増えました。また、課題（目的）とUIのつながりを意識することでUIを評価する精度が上がったと思います。以前より良いアウトプットに近づけたのかなと考えています。
- これからもユーザが使いたいと思うモダンなUIを作るために引き出しを増やしていきたいと思います。
Notion概要と、無料Markdownエディタとの比較

Notion 何ができるのについて。

## 何ができるの

https://www.notion.so/ja-jp

> NotionはNotion Labs Incによって開発された「タスク」「Wiki」「データベースを統合する」メモアプリケーションサービス

お高いんでしょう？以下引用:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/73a244cc-bc27-254a-bf66-41a979e14247.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/d9c98b13-a741-4713-32e3-260ab0805ddc.png)

ひとまずパーソナルを楽しく使っています。

https://qiita.com/yuki_doi/items/022cec7bddb1d281843e

https://medium.com/@Ancient_Scapes/%E3%82%82%E3%81%86%E5%85%A8%E9%83%A8notion%E3%81%A7%E3%81%88%E3%81%88%E3%82%84%E3%82%93-e44368212053

https://dev.classmethod.jp/articles/mermaid-markdown-is-supported-in-notion/

https://zenn.dev/lisatech/articles/inception-deck-template-on-notion

https://zenn.dev/tenajima/articles/task_management_of_the_year_2021


https://notion-icons.vercel.app/



### Dev.toより連載

- ポートフォリオ公開から1週間でWeb制作の仕事を獲得した方法
    - [How I’ve got a web development job one week after publishing my portfolio - DEV Community 👩‍💻👨‍💻](https://dev.to/colocodes/how-ive-got-a-web-development-job-one-week-after-publishing-my-portfolio-3o6g)
- Notionを使ったプログラミングトピックの整理
    - [Using Notion to organise programming topics - DEV Community 👩‍💻👨‍💻](https://dev.to/colocodes/using-notion-to-organise-programming-topics-4ida)
- 440ページ以上のWeb制作コンテンツを持つ私のNotionテンプレートを共有します。
    - [I share my Notion template with over 440 pages of web development content - DEV Community 👩‍💻👨‍💻](https://dev.to/colocodes/i-share-my-notion-template-with-over-440-pages-of-web-development-content-22cf)

## テンプレート

https://www.notion.so/Notion-Template-Gallery-181e961aeb5c4ee6915307c0dfd5156d

https://extns.notion.site/Npedia-49fddc69667c4963964e54a012b36ec7

https://nicklafferty.com/blog/free-notion-templates/


## 比較

### Confluenceとの比較

https://qiita.com/e99h2121/items/cd4d354fc7bbe528a063#%E6%AF%94%E8%BC%83-notion

https://twitter.com/shogocat/status/1469464409609486337?s=20



### その他無料オンラインマークダウンエディタ

https://dillinger.io/

https://type.md/

https://about.type.md/?ref=tw

https://www.appflowy.io/

https://typora.io/

https://growi.cloud/blog/853


### マークダウンの総本山

https://www.markdownguide.org/getting-started/

https://5stardata.info/ja/


### Obsidianというアプリ

https://obsidian.md/

https://snyt45.com/posts/20210612/obsidian-1month-settings/

https://pouhon.net/obsidian-articles/6396/

https://qiita.com/koKekkoh/items/f1f684f0d7dadb658d02


参考まで。
以上です～
【Power BI】Power BIデータセットをデータソースにしたレポートで、他のデータも使えるようになった！・・・のだが・・・

この記事は[Microsoft Power BI Advent Calendar 2021](https://qiita.com/advent-calendar/2021/powerbi)に参加・・・・予定だったのですが、投稿が遅れて他の方が投稿されました・・・ｸｽﾝ
今年で4年連続の参加の予定だったのですが、残念！そしてせっかく誘ってくださったのにごめんなさい！
このところバタバタで、仕事上Power BIは毎日のように使用しているのですが、今のスキルでできることばかりしかやっていなくて、なかなかスキルアップができず・・・
来年はもう少しスキルアップもはかっていきたいなと思います。

##Power BIは毎月更新！
Power BIは毎月更新があって、機能拡張されているのはみなさんご存知の通りなのですが、今年、自分的にイイネ！と思ったのは、
**①データのエクスポートで、「現在のレイアウトのデータ」がエクスポートできるようになった。**
弊社、Power BIのレポートで一番使っているビジュアルがテーブルとマトリクスという表大好き人間が多く、しかもダウンロードして加工して使用している人が多いため、マトリクスをダウンロードすると、データが縦型になっちゃうことにユーザーが非常に不満を持っていました。
なので、この機能は正直めっちゃ嬉しい！
ただ、そのままダウンロードができないレイアウトもあったので、これはまた別記事で詳しく書こうと思います。

**②Power BIデータセットをデータソースにしたレポートで、他のデータも取り込めるようになった！**
以前は、Power BIデータセットをデータソースにすると、「データの変換」がグレーアウトしてクリックできないようになっていたのですが、現状はここをクリックして、Power Queryエディターを開いて、他のデータソースも取り込むことができるようになっています！

他のレポートのデータセットをデータマート的に使用しても、マスタを追加したりしたいことが多々あったので、これは非常に便利になったー！ｳﾜｰｲ！と喜んだのですが、今日、落とし穴が発覚しました・・・・。

##バグなのか仕様なのか・・・・？
それは昨日のこと。
とあるレポートで、全社の実績を製品区分別に見るレポートを作成していたのですが、それを部門別も作成してと言われました。
元のレポートが結構作りこんであって、ページ数も多いので、このデータセットを使って別のレポートにしちゃえ・・・と新しいレポートを作りました。

元のレポートは全社の実績だったので、部門に分けるために部門マスタを追加してあげる必要がありました。
「そうそう、こういうことができるようになるとほんとに便利だよねー！」
と思いながらレポートを作成して、発行！
満を持して10時からの会議に出席してお披露目しようとしたのですが・・・
![Qiita211222-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221359/5651248f-5adb-f9c5-2db5-9299e6ca6fa8.png)

こんなエラーが・・・・(´;ω;｀)

アセアセしながら、もう一回発行し直したり、EdgeをChromeにしてもらったりしたのですが、変わらず・・・・

会議後、泣きながらあれこれ考えてみて、怪しいのは便利だと思っていたデータセットと他のデータソースの組み合わせ。

試しに、元レポートのデータセットだけをデータソースにしたレポートをテストで作成して見てみてもらったところ、きちんと表示されました！

実は、弊社はPremium環境で、このレポートのユーザーの方はProライセンスを持っていない閲覧専門の方々でした。

**どうやら、Power BIデータセットと他のデータソースを組み合わせたレポートは、Proユーザーでないと見られないようです。**

これが仕様なのか、バグなのか、これからMicrosoftのサポートに問い合わせて、原因が判明したら記事を更新します！

ちなみに、Power Platformのサポートの方はみなさんとても親切で、丁寧で、腰が低くてすばらしいです！
先日サポートしてもらった時に、不具合だけじゃなくて、もっと気軽に色んなことを聞けるといいんですけど・・・と言ったら、そういうサービスも検討中とおっしゃっていました！
Pipenvをインストールし、仮想環境を構築する

# pythonをインストールする
pyenvを使って、pythonをインストールします。
以下のコマンドを実行します。

```
pyenv install 3.9.7
pyenv global 3.9.7
```

# pipをアップデートする
以下のコマンドを実行します。

```
pip install --upgrade pip
```

# Pipenvをインストールする
以下のコマンドを実行します。

```
pip install pipenv
```

# 仮想環境を作成する(コマンドライン)
「application」というフォルダを作成します。
そのあと、作成した「application」フォルダに移動し、以下のコマンドを実行します。

```
mkdir application
cd applicaiton
pipenv --python 3.8
```

# 仮想環境を作成する(PyCharm)
PyCharmを起動します。
「New Project」をクリックします。
![スクリーンショット 2021-12-23 6.22.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14202/784b86ab-b67f-c766-6fea-bfa0b9edd4f7.png)

New Project画面が表示されます。
「Location」に、「applicaiton」と入力します。

「Base interpreter]にPythonの実行ファイルがあるパスを入力します。
「Pipenv executable」にPipenvの実行ファイルがあるパスを入力します。
それぞれのパスは、以下のコマンドを実行し、調べてください。

```
which python
which pipenv
```

入力が終わったら、「Create」をクリックします。

![スクリーンショット 2021-12-23 6.24.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14202/95d2c571-ab77-26b6-a5fb-ac13be65d27b.png)
シンプルなタイピングゲームを作りました⌨

始めまして晴彦と申します。

友人に誘われ「クソアプリ Advent Calendar 2021」へ参加させていただきました。
(初参加の身でありながら遅刻してしまい申し訳ありません＞＜)

<h1>0.はじめに</h1>
そもそも大衆公開するようなアプリケーションを個人で作ったことがないのでそれなりに遊べる作品として完成させることを目標、webページ作成も簡単な編集をしたことがある程度でしたのでよい機会だと思い0から作り始めてみました。
またjQueryは便利だと漠然と聞いたことがありましたが恩恵受ける機会がなかったのでこちらも触ってみました。

<h1>1.内容決定</h1>
せっかく作るので何度か触ってもらえるものをば、と思い自分が何度も遊んだものと言えば～と考えて美佳タイプというタイピングソフトを思い出しました。タイピングゲームであれば「文字列のデータ管理」「キー入力」「時間経過での画面更新」等いろんな要素に触れられそうだと思い決定しました。

作ったタイピングゲームがこちら
[HaruType]
https://mtbamboo.github.io/HaruType/


参考にしました美佳タイプはこちらから
https://www.asahi-net.or.jp/~bg8j-immr/

<h1>2.こだわったとこ</h1>
(1)入力状態の更新
![ss3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290487/ebd43211-759e-5612-0fe3-f747bd89b22b.png)
ゲーム中、入力すべき文字をわかるように色変え＋アンダーライン、ミスしたときは赤色に、入力前後の状態はグレーアウトさせようと思い、一文字ずつスタイルを変更する必要があると思い対応を考えました。
一文字ずつタグに分ける必要があると考え、開始時にゲーム用の文字列を作成、以下のようにタグを追加しました。

```javascript:一文字ずつタグを加えて表示領域へ追加する
　// ここまでに文字列wholeArrayの作成を行っている

  for(var i=0; i < wholeArray.length; i++)
  {
    $("#target").append("<font color='silver'>"+wholeArray.charAt(i)+"</font>");
  }
```
あとは単純で状況に応じて色やアンダーラインを更新する関数でスタイルをいじります。
特定の順番の要素を指定する方法として同じ要素の中からインデックス指定しエレメントを選択できるeq()を使用しました。

```javascript:フォント更新
// 引数は何番目の文字か、色、アンダーラインの有無
function updateColor(index,color,ub)
{
  var letter = $("font").eq(index);
  letter.css("color", color);

  if(ub)
  {
    letter.css("textDecoration","underline");
  }else{
    letter.css("textDecoration","none");
  }
}
```


(2)結果ツイート
やはりいい結果出したら自慢したいじゃないですか。安直ですが結果をツイートできるようにしました。

```javascript:結果ツイート
function tweetBtn()
{
  var url = "https://mtbamboo.github.io/HaruType/index.html";
  var text = "HaruTypeで1分に"+targetIndex+"文字入力を達成しました!";
  if(targetIndex >= 150)
  {
    text += "すごい🥳";
  }

  window.open().location.href = ("https://twitter.com/share?url=" + url + "&text=" + text + "&count=none&lang=ja");
}
```

タイトルで「目指せ1分150文字入力」とお題を掲げましたので150文字達成したら文字を変えるというささやかすぎるおまけを入れています。
なぜ150文字なのかは自分の大学での課題だったからです。タッチタイピングになれると簡単に達成できるので程よい目標だと思います。


<h1>3.苦戦したとこ</h1>
(1)タイトル画面のレイアウト
![ss1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290487/c23e6d92-804e-0fce-8351-954d3b0935e2.png)
周りに☆をならべその中にタイトルや説明文を記入したのですが、周りの☆がずれないよう合わせるのに相当手こずりました。
☆の中にスペースを入れると同じスペースを入れているものはきれいに並んでくれるのですが。文字に置き換えると途端にズレだし、
スペース以外の調整方法がないかと調べたのですが、結局一つのDIV要素で解決できそうな方法を見つけられませんでした。

一つでだめなら二つ重ねたらいいじゃない！という安易な発想で背景に枠状に並べた☆のDIV要素と文字を並べたDIVを用意し重ねる側のpositionプロパティをabsoluteに指定することで重ねて実現しました。
よい方法が浮かばないでも時間が限られている場合は強引に解決する必要があるのでこういった妥協案もすぐ浮かべるようにならなければなと思いました。(期限に間に合っていませんが😅)


(2)ツイートの絵文字
![ss2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290487/ef36ad03-ab70-10c9-77a3-e385d28ecd56.png)
結果をツイートする際、絵文字を加えようと思い「jsファイルに書いてGithubを通すので文字化け対策としてUnicodeで表示してもらおう」と思いUnicodeをHTMLEntityで加えてみる、しかしツイート画面になると消えてしまう、解決する方法が見つからず苦戦しました。

答えは単純で絵文字を直貼りするとそのまま含んでくれました。
試しもしないでうまくいかないだろうと見積もって苦戦したので完全に時間の無駄になってしまいました。
この辺は経験がものをいうと思うところなので出くわした時に覚えていかなければなと思います。

<h1>4.終えてみて</h1>
一つの作品を完成させるのは大変だけど楽しいと改めて感じました。簡単なタイピングゲームでしたので慣れている方であれば一日でできるような内容かもしれませんが、思いついたことを試行錯誤しながら一つ一つ形にするのは楽しかったです。
慣れた環境だと味わえない初心だと思うので気分転換に知らない言語触るのも面白いのかなと思います。

来年はちゃんと期限通り出せるよう気を付けます＞＜。
TOML をコマンドラインで加工したい

## TOML

https://github.com/toml-lang/toml

> TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics. TOML is designed to map unambiguously to a hash table. TOML should be easy to parse into data structures in a wide variety of languages.

> TOMLは、セマンティクスが明確で読みやすい、最小限の設定ファイルフォーマットを目指しています。TOMLは、ハッシュテーブルに明確にマッピングするように設計されています。TOMLは、さまざまな言語でデータ構造を簡単に解析できるようになっています。


Rust の設定ファイルとか SSG のツールの設定ファイルとかでよく出くわす気がする。個人的には YAML より見やすくて好き。

## `jq`

https://github.com/stedolan/jq

> jq is a lightweight and flexible command-line JSON processor.

> jq は軽量で柔軟なコマンドライン JSON プロセッサです。

便利でメジャー。


## `dasel`

https://github.com/TomWright/dasel

> Dasel (short for data-selector) allows you to query and modify data structures using selector strings.
> Comparable to jq / yq, but supports JSON, YAML, TOML, XML and CSV with zero runtime dependencies.

> Dasel（data-selectorの略）は、セレクタ文字列を使ってデータ構造を照会・修正することができます。
> jq / yqに相当しますが、JSON、YAML、TOML、XML、CSVをサポートし、ランタイムへの依存はゼロです。

TOML もサポートしているところがとても便利なんだけど、jq / yq と記法はかなり違う。なので、 JSON/YAML ←→ TOML の相互変換にだけ使って、中身のフィルタリングや加工は jq などでやったほうが楽に感じる（でもこれは慣れの問題で、ちゃんと覚えれば dasel 一本で済ませたほうがシンプルだし快適なのかもしれない）。

jq と dasel の記法の違いはこのドキュメントが分かりやすい。

https://daseldocs.tomwright.me/examples/jq-to-dasel

## 例

`sample.toml`

```
description = "あいうえお"
keywords = ["test", "example"]
title = "ほげほげ"

[en]
title = "hogehoge"
description = "abcde"
```

dasel で一度 JSON に変換して、 jq でいじくって、 また dasel で TOML に逆変換。

```
$ cat sample.toml | dasel -r toml -w json | jq '.keywords = ["テスト", "サンプル"]' | dasel -r json -w toml -m --color
description = "あいうえお"
keywords = ["テスト", "サンプル"]
title = "ほげほげ"

[en]
  description = "abcde"
  title = "hogehoge"
```

## 参考

https://qiita.com/hatappo/items/c5f4873631e7073d5a75
federated queryを使ったSpannerからBigQueryへのデータ転送

# はじめに
こんにちは、この記事は[Unipos Advent Calender 2021](https://qiita.com/advent-calendar/2021/unipos)の16記事目です


UniposではデータをDataStoreとSpannerにもち、それらのデータを集計するためにBigQueryにデータを転送しています
この記事ではSpannerからBigQueryへのデータ転送について紹介します

[公式ドキュメント](https://cloud.google.com/bigquery/docs/cloud-spanner-federated-queries) に詳しいことは書いてありますが、このブログでは具体的な操作、具体的な値について書いていきます

# 事前準備
## BigQuery Connection APIを有効にする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513718/649c33b2-5f56-52e3-a815-6bc1f9ae9e20.png)
## Spanner情報の追加
1. BigQueryのエクスプローラの「3点リード」→「データを追加ボタン」→「外部データソース」の順にクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513718/07e1ca98-4fc8-98e1-c145-3a17cddd4d84.png)
2. 情報を入力する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513718/482938da-2054-d098-563b-c9c5f9177bbc.png)
    - 接続タイプ : `Cloud Spanner`
    - 接続ID : `英数字、ダッシュ、アンダースコアで構成される文字列`
    - データのロケーション : `BQのロケーション`
    - わかりやすい名前 : `表示名`
    - 説明 : `説明`
    - Database name : `projects/$PROJECT_ID/instances/$INSTANCE_ID/databases/$DATABASE_ID`
        - Spannerの`$PROJECT_ID`、`$INSTANCE_ID`、`$DATABASE_ID`を↑の文字に埋め込み入力
    - データを同時に読み込む : チェックがあると並列に実行してくれるが制約あり(注意点で後ほど詳しく説明します)

# 動かしてみる
先程の外部データソースの入力でIDを`spanner-db`にしたとすると、
以下のようにしてSpannerからクエリすることができます

```sql
SELECT * FROM EXTERNAL_QUERY(
	'asia-northeast1.spanner-db',
	'''SELECT * FROM User'''
)
```

`EXTERNAL_QUERY`の第一引数で`$location.$id`、第二引数でSpannerで実行したいクエリを入力することで対象のSpannerDBでクエリを実行することができます
そして、クエリしてきたデータをBQにinsertすることもできます

# 注意点
### SpannerとBQのTIMESTAMPの桁数の違い
SpannerのTIMESTAMPではナノ秒までの情報を持っていますが、BQではミリ秒までしか持っていません、なのでこのfederated queryを使ってSpannerからBQにデータ転送する場合、ナノ秒は切り捨てられてしまいます

### 「データを同時に読み込む」について
Spannerの情報入力で、「データを同時に読み込む」というチェックボックスがありましたが、書いてあるとおり、チェックを入れるとデータを並列に読み込んでくれます
ですが、チェックを入れることによって、実行できるクエリは**クエリ実行プランの最初の演算子が分散ユニオンの場合のみ**になります

公式ドキュメントによると分散ユニオンとは「1つ以上のテーブルを複数のスプリットに分割し、各スプリットのサブクエリをリモートで個別に評価してから、すべての結果を結合」するものです

つまりは最初の処理を分散できるものはデータを同時に読み込めるが、できないクエリに関してはエラーになります

```sql
select * from User where Age > 20
```
のような単純なクエリであれば問題はないですが、

```sql
select ID from User where Age > 20 union all select ID from SpecialUser where Age > 20
```
のようなクエリだと実行することができません