OmniAICreator/Qiita-1.07M huggingface dataset:
vercel/satoriでfavicon時計を作る


こんにちは。[あのちっく](https://twitter.com/anoChick)です。
[commmune Advent Calendar 2023](https://qiita.com/advent-calendar/2023/commmune) 3日目の記事は『vercel/satoriでfavicon時計を作る』です。
どうぞよろしくお願いします。

https://qiita.com/advent-calendar/2023/commmune



# 作ったもの
[https://pg.anochick.com/ac/2023/commmune/3
](https://pg.anochick.com/ac/2023/commmune/3
)

https://pg.anochick.com/ac/2023/commmune/3

![favclock.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22392/66c0e6d1-b78e-5955-4c6e-0ad2de827e1a.png)
ページを開くと上の画像のようにfaviconが時計になり、都度更新されます。

:::note warn
ブラウザによっては正しく動作しません。Firefox, Chromeのみ動作を確認しています。
:::

ソースコードは[こちら](https://github.com/anoChick/playground/blob/main/app/ac/2023/commmune/3/_components/clock.tsx)で公開しています。

# 構成要素

細かい話は箇条書きで記載します。
- faviconには[SVGを使うことが出来る](https://caniuse.com/link-icon-svg)
    - faviconは```<link rel="icon" href="..." />```のhrefを変更するだけで簡単に動的変更が適用される
    - faviconの最短更新間隔はブラウザとブラウザの状態によって異なる
    - [Data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)形式でも扱えるので、[SVGテキストのままhrefに与えられる](https://github.com/anoChick/playground/blob/main/app/ac/2023/commmune/3/_components/clock.tsx#L85)
- favicon画像の生成には[vercel/satori](https://github.com/vercel/satori)を使っている
    - およそhtml2svgなので軽量・高速で高頻度の描画要求に耐えられる
    - vercel/satoriは[Intl.Segmenter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter)に依存するが、Firefoxにはまだないので、[polyfill](https://github.com/surferseo/intl-segmenter-polyfill)の対応が必要
- アニメーションはsetIntervalを使う
    - タブがバックグラウンドに行くとスロットリングされる
        - https://en-jp.wantedly.com/companies/wantedly/post_articles/439961

詳しい話は[あのちっく](https://twitter.com/anoChick)に直接聞いて貰えれば可能な限り回答します。

# 終わりに
ネタ9割の気持ちで作りましたが、頻繁に変更されるfaviconはなかなか存在感があるので、なにか面白い使い方ができそうな気がしています。

ありがとうございました。
Webアクセシビリティについて考える

# はじめに
「アクセシビリティって聞いたことはあるけど…」と思っている方には、ぜひ読んでほしいです！
来年度からさらに重要になる「Webアクセシビリティ」について記事を書きました。

# Webアクセシビリティに興味を持ったきっかけ
- 内定者アルバイト先の勉強会で「Webアクセシビリティ」を扱っている
- これまでほとんど意識してこなかった

「ただ好きなものを作り、意識をしてもパフォーマンスくらい…」というような私にとってWebアクセシビリティに関する知見はハッとさせられることが多かったです。
記事を書くにあたり、自分なりにWebアクセシビリティについて調べてみました。

# 「努力義務」から「義務」へ
平成25年6月、「障害者差別解消法」が制定され、平成28年4月1日から施行されました。
> 全ての国民が、障害の有無によって分け隔てられることなく、相互に人格と個性を尊重し合いながら共生する社会の実現に向け、障害を理由とする差別の解消を推進することを目的

https://www8.cao.go.jp/shougai/suishin/sabekai.html

そして、令和３年５月、同法は改正され、改正法は、令和６年４月１日の来年から施行されます。
改正の点としては、行政機関等は**義務**、事業者は**努力義務**だった「合理的配慮の提供」が事業者も**義務化される**という点です。
つまり、事業者が提供するWebページも「合理的配慮の提供」の対象となり、障害を持つ方も、そうでない人も誰でもWebサービスを利用できる状態にすること（＝ Webアクセシビリティ）が求められるということです。

来年から義務化になることを初めて知ったので今知れてよかったです…！

# 具体的にどういうことがWebアクセシビリティなのか
来年からWebアクセシビリティを意識するとしても、具体的に何をすれば良いのかすぐにはイメージができません。
ですが、英国内務省 (UK Home Office) がとてもわかりやすいWebアクセシビリティのポスターを提供されています。
[githubで公開されているポスター](https://github.com/UKHomeOffice/posters/blob/master/accessibility/dos-donts/posters_en-UK/accessibility-posters-set.pdf)
[githubで公開されているポスター 日本語版](https://github.com/UKHomeOffice/posters/tree/master/accessibility/dos-donts/posters_ja) （← [@onouchidebeさん](https://twitter.com/onouchidebe)によって日本語化されたものです）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1719742/67e13ff3-b9da-1682-6c32-0056b7f50d74.png)


アクセシビリティを担保するためにデザインとして「すること」と「しないこと」がまとめられています。
とてもわかりやすく実践的で、この内容を意識するだけでも改善できることは多そうです。

# 開発時にできる配慮
- 正しいHTMLタグの使用
    読み上げ機能で正常に動作しないことを防ぐ
- リンクテキストは遷移先の内容をわかりやすく書く
- ピンチアウトによる画面の拡大を禁止しない
    `<meta>`要素のviewportの指定で`user-scalable=no`や`maximum-scale=1.0`など指定すると、拡大をしたいユーザーが拡大できないということが起きる
        [user-scalable](https://developer.mozilla.org/ja/docs/Web/HTML/Viewport_meta_tag#user-scalable)
        [maximum-scale](https://developer.mozilla.org/ja/docs/Web/HTML/Viewport_meta_tag#maximum-scale)
- 読みやすいコントラストを意識

https://chromewebstore.google.com/detail/stark-accessibility-check/fkfaapnmfippddbeemjjbclenphooipm

- 開発したサイトをLighthouseで検証
 
https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja

などなど、あらゆる配慮ができそうです。
「より良いものにするには・・・」と思った時は、アクセシビリティを意識すると新しい視点から物事を捉えられそうです！

# 最後に
技術記事になっているかどうか怪しいですが、来年度から義務化になるこのタイミングでこの話題に出会えたことは意味があったと思っています。
この記事がWebアクセシビリティについて少しでも考えるきっかけになりますと幸いです☺️
ここまで読んでいただきありがとうございました！
ADR（Action-Domain-Responder）ってなんだ？？

# 初めに
　本格的にプログラミングを始めて約５ヶ月経過しましたが、今まで「MVC」について触れたり聞いたりすることはあっても「ADR」については耳にしたことすらありませんでした。
　しかし、触れる機会に恵まれたので今回は「ADR」について学んだことを記していこうと思います！

 # まずはざっくり
　「ADR」とはAction-Domain-Responderの頭文字をとったもので、ソフトウェアアーキテクチャパターンのひとつです。「MVC」の問題点を解決するためにPaul M. Jonesさんによって作られました。
「MVC」の問題点というのは主に二つあり、
 **１, Fat Controllerに**
　　開発が大規模になればなるほどControllerに書く処理の数が増えて肥大化してしまう
  
 **2, 責務の分散が不明瞭に**
　　プレゼンテーションロジックを記述する際にControllerに書けば肥大化に繋がり、Modelに書けば処理責任がブレてしまい、Viewに書けばフロントエンドの可読性が落ちてしまう

これらの問題を解決してくれるのが「ADR」です。

 # Actionについて
　Actionは「MVC」でいうところのControllerで、**DomainとResponderを中継する役割**を持ちます。
Controllerと違うのは、ひとつのActionファイルにひとつのメソッドを記述する点です。これによりファイルの数は増えますが、大規模な開発でもActionがControllerのように肥大化することはありません。
　また実際に使ってみて、ファイル検索ができるのが非常に便利だと感じました！

# Domainについて
　Domainは「MVC」でいうModelで、**ビジネスロジックの記述やデータの加工**を行います。この二つはほとんど同じでよく宗教論争になったりします。私自身も特に違いを感じませんでした...。

# Responderについて
　Responderは「MVC」だとModelとViewの中間に位置し、**Actionから受け取ったデータをもとに最終的なレスポンス（HTML、JSON、XMLなど）を生成**します。なのでここでデータベースに接続するような処理を書いてはいけません。
 　個人的にはResponderクラスを作るのは少し面倒くさいですが、責務が明瞭になる点は魅力に感じます！
  
# 最後に
　この記事は大まかな内容になってしまいましたが、Webアプリケーション開発で『ADR』を採用する人が増えることを願っています！
過去のアドベントカレンダーを束ねるサイトの作り方

この記事はHoudini Apprenticeアドベントカレンダー2023　2日目の記事です。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151589/b52a2740-efcf-2c22-2495-fc2453b9510b.png)


現在記事とサイトの公開準備を行っています。
大変申し訳ありませんが今しばらくお待ちください。
【Swift】URLSession.shared.dataTask() をうまく使いこなせない


以下、参考にしたい新しいAPIのサンプルコードです。

```swift
// Fetch photo with async/await

func fetchPhoto(url: URL) async throws -> UIImage {
  let (data, response) = try await URLSession.shared.data(from: url)

  guard let httpResponse = response as? HTTPURLResponse,
        httpResponse.statusCode == 200 else {
    throw WoofError.invalidServerResponse
  }

  guard let image = UIImage(data: data) else {
    throw WoofError.unsupportedImage
  }
  return image
}
```

時間の無駄なく将来のある王道な本筋のコードを吸収していきたいです。

<a href="https://android.benigumo.com/20231202/urlsession-shared-datatask/" target="_blank" rel="noopener">👉 【Swift】URLSession.shared.dataTask() をうまく使いこなせない&nbsp;<img src="https://b.hatena.ne.jp/entry/image/https://android.benigumo.com/20231202/urlsession-shared-datatask/" alt="hatena-bookmark" /></a>
DAXのJOIN関連操作① ～CROSSJOIN～

# DAXによるJOIN

DAXを利用したJOIN関連の関数をしらべていきます。

:::note
本記事は「Microsoft Power BI Advent Calendar 2023」、3日目の記事です。
https://qiita.com/advent-calendar/2023/powerbi
いいね！ 👍 よろしくお願いします！
:::

# JOIN系関数シリーズ

https://qiita.com/akihiro_suto/items/658cacb15cb4ffbf549d

https://qiita.com/akihiro_suto/items/cae5f45ad1089de7aa62

https://qiita.com/akihiro_suto/items/4bd6b0800da3a2501e89

# 一般的なJOINの種類

一般的に、データ操作のJOINには大きく分けて以下の3種類があります。

- CROSS JOIN(交差結合)
- INNER JOIN(内部結合)
- OUTER JOIN(外部結合)

まずはCROSS JOINからみていきます。

## サンプルデータ

**Left Table 販売トランザクション**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/d5e5e54c-b227-6424-746b-359b98d75e63.png)

**Right Table　国名マスター**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/180cdb72-24b6-a994-4fb9-e6581764cebb.png)

## CROSS JOIN(交差結合)

CROSS JOINは直積結合とも呼ばれ、すべての組み合わせを作成します。m行のテーブルとn行のテーブルをCROSS JOINすると、m × n 行になります。

列数は、a列とb列があれば、a + b 列になります。

DAXにはその名の通りCROSSJOIN関数が用意されています。

https://learn.microsoft.com/ja-jp/dax/crossjoin-function-dax

```構文.dax
CROSSJOIN(<table>, <table>[, <table>]…)
```

### 実践

4行×3行のテーブルをCROSS JOINしたので、12行のテーブルができています。

列数も、2列と3列のテーブルをCROSSJOINしたので、5列になっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/68d2e902-c488-69c7-a705-4f6ca1a0d1e6.png)

# まとめ

明日は別のJOIN系関数をみていきます。
AIボット「Babylonさん（仮）」を作ってみよう

この記事は[Babylon.js Advent Calendar 2023](https://qiita.com/advent-calendar/2023/babylonjs)の2日目の記事です。

### はじめに

ChatGPTを使ったことがある方はGPTs（もしくはGPT Builder）というのを聞いたことがあると思います。
GPTsはOpenAI社の提供するサービスの１つで、オリジナルのChatGPTを作る機能です。
ChatGPT Plus（有償）に加入していると使うことが出来ます。

この記事では、Babylon.jsのコードを書いてもらうAIボット「Babylonさん（仮）」を作ってもらうことにします。

### 実行結果

まずは「Babylonさん」がどのようなものか動かしてみましょう。

AIボット「Babylonさん（仮）」のイメージ）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/8c90dd0e-f8f6-a2ac-d6cb-f48a2a4df581.png)
※ DALL-E先生に作ってもらいました。

実行はこちらからどうぞ（利用には「ChatGPT Plus」加入が必要です。）
https://chat.openai.com/g/g-7sE7Om9YT-babylonsan

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/792d615f-91f6-a0c1-5cf5-969db1bcc165.png)

今回は、プリセットされたプロンプトとして
「物理演算で大量の箱を床に落下させるサンプルを教えて下さい」
を選んでみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/e77ef5a3-473d-6efc-3360-a5d36e505459.png)

出力されたコードを「Babylon.js Playground」（ https://playground.babylonjs.com ）に貼り付けることで試してみることができます。

実際に動作するコードはこちらです。
https://playground.babylonjs.com/#VAPEJD
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/cc665563-21e3-2748-0b62-abca6d24fca9.png)


### 作り方

GPTsでは、ウィザード（質問形式）でボットを作ることができますが、
ここでは説明が簡潔になるように「Configure」で設定する方法について記載しています。

与えている命令（Instructions）は下記になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/cfed46a5-103a-3026-eaf2-01052eb251ab.png)

```
役割と目標：
  このGPTは「Babylonさん」と名付けられ、
Babylon.js Playgroundで特に機能するサンプルコードを提供することに特化しています。
  さまざまなBabylon.js機能の詳細で機能的な例を提供することによって、
  ユーザーが自分のプロジェクトでこれらの機能を実装するのを支援します。

制約：
  このGPTは、Babylon.js Playgroundと互換性のあるコードサンプルに厳密に焦点を当てるべきです。
  Babylon.js Playground環境に関連しない機能や技術についての議論は避けるべきです。
  コードは `createScene` 関数で始まるようにしてください。
  シーンに合ったマテリアルやテクスチャを想像力を使って選び、メッシュに設定してください。
  マテリアルやテクスチャはBabylon.js Playgroundで参照できるものを使用してください。
  変数を宣言する際には `var` の代わりに `const` または `let` を使用してください。
  `createScene` 関数を呼び出す必要はありません。
  これは、Babylon.js Playgroundが内部的に暗黙的に呼び出しているためです。
  これに関するコメントを出力する必要はありません。

ガイドライン：
  レスポンスには、詳細なコード例、コードの動作方法についての説明、
  およびBabylon.js Playground内での最適化やトラブルシューティングのためのヒントが含まれるべきです。
  このGPTは、初心者と経験豊富なユーザーの両方に役立つものであるべきです。

明確化：
  ユーザーの要求があいまいであるか詳細に欠ける場合、GPTはより適切で実用的な
  Babylon.jsコードサンプルを提供するために、より多くの情報を求めるべきです。

個性化：
  GPTは20代の若い女性です。学校の生徒に説明するかのようなトーンで使用してください。
```

### 専用ボットを作るメリット

通常のChatGPTでも、Babylon.jsの知識は持っている為、「Babylonさん」と同様にコードを教えてもらうことは可能です。

依頼するなら、
```
Babylon.jsで物理演算で大量の箱を床に落下させるサンプルを教えて下さい。
コードはBabylon.js Playgroundで動作するコードを教えて下さい。
```
という感じでしょうか。でも、ちょっと長いですよね。

GPTsで専用ボットを作ることで、役割を明確にすることにより、
```
物理演算で大量の箱を床に落下させるサンプルを教えて下さい。
```
という一言をお願いするだけで、Babylon.js Playgroundで動作するコードを書いてくれるようになります。

### 現状の課題と改善案

現状のChatGPTでは、
・新しい知識を持っていない（例：Babylon.js v6で追加された機能（Havok物理エンジン等）を知らない）
・three.jsとBabylon.jsでの既定の動作の違い等を誤って学習しているケースがある（トーラスの向き等）
といった課題があります。

現在の「Babylonさん」は、まだ簡易的な役割しか与えていませんが、
GPTsでは追加のknowledgeなどを与えることが出来る為、学習が足りていない部分を補うことが出来る可能性があります。

### おわりに

Babylon.jsを全く触ったことが無い人であっても、自然言語で簡単な命令するだけで、物理演算が動作するプログラムが出来てしまうというのは、大変興味深いと思うのですが、如何でしょうか。

何か面白いプロンプトを思いついた方がいらっしゃれば、教えて頂けると幸いです。
色々な言語で簡単なREPLを実装する #lua

続きです。

# REPLとは
[こちらの記事](https://qiita.com/runeleaf/items/7615afd7abc79c9b3c01)を参照してください。

## Luaで実装する

main.lua
```lua
function main()
    local prompt = ""
    local event = ""

    while true do
        io.write("lua> ")
        prompt = io.read()

        if prompt == nil or prompt == "exit" then
            print("Bye!")
            break
        end

        -- eval(prompt)
        print(prompt)
    end
end

function eval(prompt)
    local func, err = load("return " .. prompt)
    if not func then
        print("Error: " .. err)
    else
        local ok, result = pcall(func)
        if ok then
            print(result)
        else
            print("Error: " .. result)
        end
    end
end

main()

```

## 実行する

```bash
$ lua main.lua
lua> 1 + 1
1 + 1
lua> foobar
foobar
lua> baz
baz
lua> exit
Bye!
```

ctrl-dのeofは`prompt == nil`で受けています。
evalはないっぽいので、少しごちゃごちゃ書いています。
よく使っているgit aliasをまとめてみた

## この記事はなに？

2年ほど前にgit aliasの設定方法の記事を書きました。

https://qiita.com/gilly/items/23ce8ca2fb4787fec002

この記事では、自分でもよく使っているaliasの備忘録です。
誰かのお役に立つことがあればいいなぁと思いつつ、ほぼ自分のための記事です :sweat_smile: 

## よく使っているalias

```ini:~/.gitconfig
[alias]
  st = status -sb
  co = checkout
  br = branch
  ft = fetch
  loga = log --graph --oneline
  push-f = push --force-with-lease --force-if-includes
  rebase-i = rebase -i --autosquash
  dn = diff --name-status
  bc = !"git branch --merged origin/HEAD | grep -vE 'HEAD' | xargs git branch -d"
  ro = !"git fetch --prune && git rebase origin/HEAD"
  ```
## 解説

### `status -sb`

`status` コマンドは現在作業中の状態を確認するコマンドです。

オプションの `-s` は `-short` です。
git helpを読むとGive the output in the short-format.と書いてあります。
変更ファイルだけが表示され、かつファイル名の頭に `M` や `??` などがついて、現在どのような状態になっているか見やすくなります。

オプションの　`-b` は `-branch` です。

これまたgit helpを読むと、Show the branch and tracking info even in short-format.と書いてあります。
`-s` と一緒に使うことで、現在のブランチ情報を表示してくれます。

他にもオプションがあるので、気になる方は `git help status` でご確認ください。

### `checkout`

ブランチ移動などに利用するコマンドです。
いっぱい使うので登録しています。

`git co -b <新しいブランチ名>` で新規のブランチを切ることができます。

### `branch`

ブランチを切るときに使うコマンドです。
これもいっぱい使うので登録しています。

### `fetch`

リモートリポジトリから最新の情報を取得するときに使うコマンドです。
これまたいっぱい使うので登録しています。

### `log --graph --oneline`

gitツリーを見やすくするためのコマンドです。
`git log` でコミットの履歴を確認できます。

オプションの`--graph` でgitツリーが表示されます。
ただ、 `git log` と同じ情報が表示されてしまうので、情報が多すぎてツリー全体が見にくいです。
そこで、 `--online` を追加して、コミットIDとコミットメッセージがわかるgitツリーを表示させています。

ちなみに年券表示させるのかとか、日付を表示させるのかとかカスタマイズできる内容が沢山あります。


### `push --force-with-lease`

pushはコミットした内容をリモートに送るコマンドです。

オプションの `--force-with-lease` は、pushの際にローカルとリモートを比較し、ローカルが最新でなければpushが失敗します。
`-f` だけでも、リモートに強制的に上げることができますが、チーム開発をしている場合、同じブランチを複数人で触ったときに、他の人のコミットをなくしてしまう可能性があります。

なので、 `--force-with-lease` を利用しています。

この記事がとてもわかりやすいと思います。

https://qiita.com/wMETAw/items/5f47dcc7cf57af8e449f

### `rebase -i --autosquash`

Qiitaでは、レビュー後の修正は `git commit --fixup` で管理し、レビューが全て終わったらコミットをまとめる運用をしています。

`--fixup` のことについては、下記の記事が詳しいので、気になった方はご覧ください :pray: 

https://qiita.com/inukai-masanori/items/82eb0626fd75f3eb0922

rebaseコマンドは、ブランチを統合するときに使います。
例えば、最新のmasterに作業中のブランチを乗せて開発したいときに使います。


オプションの `-i` は `--interactive` です。
リベース前にコミットのリストを作成します。

`--autosquash` は `git commit --fixup` を行ったことで、 `fixup!` とコミットメセージの文頭についているコミットを、指定したコミットIDのコミットに自動で変更するオプションです。

`-i` と組み合わせることで、リベース前に本当に正しい位置にコミットをリベースしようとしているか確認できます。

### `diff --name-status`

diffコマンドは、変更差分を確認するためのコマンドです。
他のコマンドよりは使用頻度は少なめなのですが、私の場合、特定のコミットとコミットを比較して変更があったファイルのパスを取得したいときに利用しています。

### `git branch --merged origin/HEAD | grep -vE 'HEAD' | xargs git branch -d`

マージ済みのブランチを削除したいときに利用するコマンドです。
日々開発を行っていると、ローカルにマージ済みのブランチが溜まって行ってしまうので、一括削除するときに利用しています。

### `git fetch --prune && git rebase origin/HEAD`

最新のmasterを参照します。
作業中のブランチを最新のmasterにリベースしたいときに使っています。

mainをfetchして、pullして、作業中のbranch移動して…って手間なので、重宝しております。
色々な言語で簡単なREPLを実装する #rust

続きです。

# REPLとは
[こちらの記事](https://qiita.com/runeleaf/items/7615afd7abc79c9b3c01)を参照してください。

## Rustで実装する

```bash
$ cargo new rs-repl
```

src/main.rs

```rust
use std::io::{self, Write};

fn main() {
    let mut input = String::new();

    loop {
        print!("rust> ");
        io::stdout().flush().unwrap();
        input.clear();
        io::stdin().read_line(&mut input).unwrap();

        let prompt = input.trim();
        match prompt {
            "exit" => {
                println!("Bye!");
                break;
            },
            _ => println!("{}", prompt),
        }
    }
}
```

## 実行する

```bash
$ cargo build
$ cargo run
rust> 1 + 1
1 + 1
rust> foobar
foobar
rust> baz
baz
rust> exit
Bye!
```

こちらもctrl-cとctrl-dの処理を考えておきたいと思います。
CLIでGraphQL subscriptionの動作確認をする

## はじめに

この記事は[一休.com Advent Calendar 2023](https://qiita.com/advent-calendar/2023/ikyu) 2日目の記事です

GraphQL subscrptionのフィールドの実装中、たいていGUIで動作確認すると思います。私は普段Apollo Studioで下記のような画面を眺めながら開発しています

![スクリーンショット 2023-12-02 20.05.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116602/b5aa06dc-2bf8-735d-c1e0-334e9747783d.png)

しかし、エンジニアたるものCLIでも確認したいですよね。というわけで今回は小ネタとしてCLIでGraphQL subscriptionの動作確認をする方法を紹介します

## 環境

- GraphQLサーバーフレームワーク: Apollo Server
- プロトコル: websocket
- websocketライブラリ: graphql-ws

## 手順

1. wscatで接続する
    ```shell
    wscat -s graphql-transport-ws -c ws://127.0.0.1/graphql
    Connected (press CTRL+C to quit)
    ```
1. タイムアウトする前に急いでinitメッセージを送る
    ```
    > {"type": "connection_init"}
    < {"type":"connection_ack"}
    ```
1. クエリを送信する
    ```
    > {"id":"hoge","type":"subscribe","payload":{"query":"subscription ($restaurantId: Int!, $groupId: String!, $date: Date!) {\n  group(groupId: $groupId) {\n    restaurant(restaurantId: $restaurantId) {\n      operatingDay(date: $date) {\n        reservations {\n          reservationId\n          visitDateTime {\n            begin\n            end\n          }\n          guest {\n            name\n          }\n        }\n      }\n    }\n  }\n}","variables":{"restaurantId":***,"groupId":"ikyu","date": "2023-12-02"}}}
    < {"id":"hoge","type":"next","payload":{"data":{"group":{"restaurant":{"operatingDay":{"reservations":[]}}}}}}
    ```
1. publishを発火させると、更新された結果を受信する
    ```
    < {"id":"hoge","type":"next","payload":{"data":{"group":{"restaurant":{"operatingDay":{"reservations":[{"reservationId":"32a88f68-71fc-4492-aba5-4d2171b3f87e","visitDateTime":{"begin":"2023-12-02T11:00:00.000Z","end":"2023-12-02T13:00:00.000Z"},"guest":{"name":"ミーア・ルーナ・ティアムーン"}}]}}}}}}
    ```

## 所感

wscatは独特な対話インターフェースを持つプログラムなのでGraphQLの文脈で普段使いするのは難しいですが、ラップして透過的に扱えるようなツールがあればこうした用途でも十分使える気がするので、そういうものを知ってるよっていう方や作ったよっていう方がいれば教えてください

## 参考

https://qiita.com/PG-practice/items/0306770e912b28cb489e
色々な言語で簡単なREPLを実装する #typescript

続きです。

# REPLとは
[こちらの記事](https://qiita.com/runeleaf/items/7615afd7abc79c9b3c01)を参照してください。

## Typescriptで実装する
nodejsのreadlineを利用しています。

```bash
$ pnpm init
$ pnpm add -D typescript @types/node
$ vim package.json
// scriptsに追加
  "dev": "node main.js",
  "build": "tsc main.ts",
```

main.ts
```typescript
import * as readline from 'readline'

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
})

rl.setPrompt('node> ')
rl.prompt()

rl.on('line', line => {
  try {
    // const prompt = eval(line)
    const prompt = line.trim()
    switch (prompt) {
      case 'exit':
        console.log("Bye!")
        process.exit(0)
      default:
        console.log(prompt)
    }
  } catch (error) {
    console.error("Error: ", error)
  }
  rl.prompt()
}).on('close', () => {
  console.log("\nBye!")
  process.exit(0)
})

```

## 実行する

```bash
$ pnpm build
$ pnpm dev
node> 1 + 1
1 + 1
node> foobar
foobar
node> baz
baz
node> exit
Bye!
```

`.on('close'...`のところでctrl-c、ctrl-dを処理しています。
jest.mockの使い回し（備忘録）

jest.mockの使い回しの実装の仕方です。

https://stackoverflow.com/questions/59312671/mock-only-one-function-from-module-but-leave-rest-with-original-functionality

```js utils/mocks/util.ts
export = {
...jest.requireActual('@/utils/util'),
toJpegBase64: jest.fn((url, callback) => {
callback('mockedToJpegBase64');
}),
};
```

test用ファイル（callback関数の引数に指定の引数が渡されているか確認するテスト）

```js
jest.mock('@/utils/util');
import { toJpegBase64 } from '@/utils/util';
const callbackFunc = (base64: string) => {};
test('jpegToBase64Mock', () => {
const mock = jest.fn(callbackFunc);
toJpegBase64('url', mock);
expect(mock).toHaveBeenCalledWith('mockedToJpegBase64');**
});
```
n分以上起動しているプロセスをkillするスクリプト

# スクリプト
- クソマルコフ連鎖アルゴリズム組んだ時に暴走したスクリプトを止めるために作ったクソスクリプト
- cronで1分に1回動かせば`"$ElapsedTime" -gt 300`で設定した以上の時間動いているプロセスを殺す

```bash
#!/bin/bash
if [ "$#" -ne 1 ]; then
  echo "Argment Error"
  exit 1
fi

ProcessName="$1"
PID=$$

for i in $(ps -ef | grep "$ProcessName" | grep -v "$PID" | grep -v grep | awk '{print $2}')
do
  TIME=$(ps -o lstart --noheader -p "$i")
  if [ -n "$TIME" ]; then
    StartupTime=$(date +%s -d "$TIME")
    CurrentTime=$(date +%s)
    ElapsedTime=$((CurrentTime - StartupTime))
  else
    ElapsedTime=1
  fi

  if [ "$ElapsedTime" -gt 300 ]; then
    echo "-----------------------------pkill info"
    echo "$(date)"
    ps ef -p "$i"
    kill "$i"
  fi
done
```

- 使い方
```bash
./kill_task.sh "/ubuntu/kuso_proguramu"
```

/ubuntu/kuso_proguramu下で動いているやついたら殺す
【積水ハウス】セキュリティ設定に不備 個人情報漏えい #serverspec

https://www.itmedia.co.jp/news/articles/2311/29/news109.html

上記のような情報漏洩を防ぐための数少ないツールのうち、Chef InSpecは非常に強力なソリューションです。

## Chef InSpec とは？

インフラストラクチャ、アプリケーション、クラウドリソースをテストおよび監査するためのフレームワークです。

主な**テスト対象は、「設定」**　です。

多くの情報漏洩インシデントの主な原因が、 **不適切な設定** です。

システムの状態（各種徹底状況）を、Rubyで記述されるテストコードでテストします。
違反を検出し、報告書の形で結果を表示します。テストはカスタマイズ可能であり、テスト項目はユーザーが制御できるようになっています。

コンプライアンス、セキュリティ、ポリシー要件を迅速かつ簡単に記述するのに役立つ豊富なリソースが用意されています。

DevOps CI/CDパイプラインに組み込むことで、インフラのDevSecOpsを実現することができるツールです。

[米国Progress社](https://www.progress.com/)により開発、メンテナンスされています。

### テスト実行方法

InSpecは、RSpecやServerspecライクのテストコードが使われます。
以下はその一例です。

```
Control 'example-1.0' do
  impact 0.9
  title 'ROOTログインの無効化'
  desc 'セキュリティリスク回避のためにRootによるログインが無効化されていることを確認します。'
  describe sshd_config do
    its('PermitRootLogin') {
      should_not cmp 'yes'
    }
  end
end
```

上記のテストコード例では、「ROOTログインが無効化されているか」がテストされます。
情報漏洩に繋がる危険性のある重要な設定を同じ方法ですべて自動監査する必要があります。

・実行コマンド：

`inspec exec [プロファイル名]`

・結果：

```
Profile: Chef InSpec Profile (example_profile)
Version: 0.1.0
Target:  local://

  ✔  example-1.0: Ensure root login is disabled via SSH
  ✔  SSHD Configuration PermitRootLogin should not cmp == "yes"

Profile Summary: 1 successful control, 0 control failures, 0 controls skipped
Test Summary: 1 successful, 0 failures, 0 skipped
```

上記例では、`sshd_config` リソースが使用されています。リソースを活用することで、視認性が良いテストを書くことができます。
1100を超える豊富なリソースが用意されています。AWS、Azure、AliCloud、およびGCPのクラウドャをテストするためのリソースも含まれており、必要なリソースがない場合は独自のカスタムリソースを作成できます。

### テスト結果の出力とレポート

様々な出力フォーマットがあります。

・Web UI

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3565203/f9076805-f0b2-e679-2a7f-cdee86957672.png)

JSON、HTML、またはCSVへの出力も可能です。

---

Chef InSpecでできることについてさらに詳しくは：

https://qiita.com/Chef_DevSecOps/items/1e968740b9dc9396eb33

https://www.chef-sec.com/stig_cis__benchmark_test/
キャリアマップを考えることの重要性

# はじめに

自分のもしくは部下のキャリアマップをきちんと考えることは重要です。
私も地方の一般レベルのエンジニアではありますが、自分のキャリアマップをどう考え、どう実践してきたか？何が悔やまれるか？について記事を書きたいと思います。

# そもそも後悔だらけ

私自身まともに、こうゆう技術者になりたい、こうゆう人材になりたいと考えたのはここ5年くらいな気がします。
これまで口からはこうなりたいという言葉は出てくるものの、取り繕っていただけな気がします。

思えば学生時代まともに技術者に自分がなるんだ！なんて考えていたでしょうか？最後の自由を謳歌するんだ！くらいにしか思ってなかったなと。相当なスタートダッシュ失敗でした。後悔してます。

就職してアセスメント面談をした際も、〜みたいになりたいだのと言葉には出していましたが、自分が40、50歳くらいになったときに管理側になって仕事をすることを想像しての言葉だったでしょうか？それともフリーランスとして稼ぐための飯の種を得るための言葉だったでしょうか？どちらでもなかったと思います。後悔してます。

# やっとこうなりたいって思えるようになってきた

最近こうなりたいと思うこと
* Linuxに関するインフラの知識、経験を積みたい
* ネットワークの知識を最低限度深めたい
* ネットワークセキュリティに関する知識最低限度深めたい

これに対しての見えやすい目標として
* linuC出来ればlevel2くらいまでいきたい
* 応用情報取得
* 間に合えばデータベーススペシャリストにもチャレンジしたい
としています。（3年期限くらい）

これって管理側に回る時期が徐々に迫っており、技術を何も気にせず深められる時間が限られているからようやく出てきたんだろうなと思います。
もっと早くに取り組んでいたら・・・なんて後悔がまた始まります。

# 会社よ・・・聞いてくれ

ちゃんと若手をどうなって欲しいか？その為にどのような努力をすればいいか？努力出来ているか？努力できてるなら評価してあげてくれ。。。
業務の成果だけを評価するのは否定しないが、どうすればいいのか全然わからない子もいるんです。

# 若い子・・・聞いてくれ

家族を持つとわかりますが。。。自分に時間を使えなくなります。意識高くやっている人もいるでしょう。
一方で私のように学生時代を真面目に過ごしたとは言えず、社会人になってからも後悔だらけの人間は寝る時間を削ってしか自己投資できなくなります。
自分がどうなりたいのか？そのために何をするべきなのか？あまり考えた事がないなと思った方は一度考えてみてもらえれば。

といってもqiitaに来ている方はそんな事はなさそうですが汗
【初級】CSSのdisplayの動きをさくっと確認したい

記載日2023/12/2
更新日2023/12/12

フロントエンドを学び始めた時に、HTMLのdisplayの挙動が理解し難かったので、容易に動きを確認できるツールを作ってみました。 "On ～" ボタンを押すことで、設定のあるなしでの見え方の変化を確認できます。
ツールで確認できるプロパティは flex, inline-flex, block, inline-block, grid の５つです。

　ツールは　[こちら](https://middle-aged-rookie-programmer.github.io/Angular_Sample/)　（ "Go CSS Display Page" ボタンでツールページへ移動してください。）

HTMLを現在学んでいる方に対して、少しでも役にたてばと思います。
より詳しいことが知りたい方は、”参考にさせて頂いたサイト”を確認ください。

<iframe src="https://middle-aged-rookie-programmer.github.io/Angular_Sample/" width="100px"></iframe>

### ツールの概要
ツールの画面は以下のような感じです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1381309/fef4e538-4d59-4be0-3244-5569047a1e50.png" width=60%>

"HTMLの記述エリア" と "ブラウザの見え方エリア" の２つが表示されます。
画面上部のセレクタから以下５つのどれかを選択し、”HTMLの記述エリア”にあるボタン（"On ~"）を押すと、スタイルのあり／なしの変化が確認できます。
・display : flex
・display : inline-flex
・display : block
・display : inline-block
・display : grid

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1381309/7500f052-2afe-4995-7e6e-adc6f1eebbb8.png" width=46%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1381309/43ef2ee6-5310-a3d6-557c-dbbe1b23b850.png" width=46%>

また、画面下部の "Set outline / Remove outline" ボタンを押すことで、HTMLエレメントに枠線が表示されて、エレメント配置がどのように変化するかも確認できます。

![set_border.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1381309/8de9426b-6e22-ab3b-cf96-cabb11e12526.png)

### 参考にさせて頂いたサイト
https://developer.mozilla.org/ja/docs/Web/CSS/display
色々な言語で簡単なREPLを実装する #golang

続きです。


# REPLとは
[こちらの記事](https://qiita.com/runeleaf/items/7615afd7abc79c9b3c01)を参照してください。

## Goで実装する

main.go
```golang
package main

import (
	"bufio"
	"fmt"
	"os"
)

func main() {
	scanner := bufio.NewScanner(os.Stdin)
cmd:
	for {
		fmt.Print("go> ")
		if !scanner.Scan() {
			break
		}
		prompt := scanner.Text()
		switch prompt {
		case "exit":
			fmt.Println("Bye!")
			break cmd
		default:
			fmt.Println(prompt)
		}
	}
}

```

## 実行する

```bash
$ go mod edit -module=example.com/app
$ go build
$ ./app
go> 1 + 1
1 + 1
go> foobar
foobar
go> baz
baz
go> exit
Bye!
```

CTRL-CやCTRL-Dの処理を実装しておけばよかったかも。
2021年10月16日: Scheme、ドット記法

# 2021-10-16: Scheme、ドット記法

2021年10月16日 15時53分

Scheme でユーザー定義の構造的なデータを使う時にドット記法のアクセッサーを使いたい場合がある。どんな構造データでもだいたい同じようなマクロになるから一例をテンプレートとしてメモ。

```scheme:
;; emplyoee 型の定義

(define (employee name email section)
  (list 'employee name email section))

;; employee 型データのドット記法のアクセッサー・マクロ

(define-syntax with-employees
  (lambda (so)
    (syntax-case so ()
      ((_ () %code)
        (syntax %code))

      ((_ () %code %codes ...)
        (syntax (begin %code %codes ...)))

      ((_ (%employee %employees ...) %code %codes ...)
        (identifier? (syntax %employee))
        (let
          ((dot (lambda (var suffix)
            (datum->syntax var (string->symbol
              (string-append
                (symbol->string (syntax->datum var))
                suffix))))))

          (with-syntax
            (
            (%.name     (dot (syntax %employee) ".name"   ))
            (%.email    (dot (syntax %employee) ".email"  ))
            (%.section  (dot (syntax %employee) ".section"))
            )
            (syntax
              (let-syntax
                (
                (%.name
                  (identifier-syntax
                    (_ (cadr %employee))
                    ((set! _ new-name) (set-car! (cdr %employee) new-name))))

                (%.email
                  (identifier-syntax
                    (_ (caddr %employee))
                    ((set! _ new-email) (set-car! (cddr %employee) new-email))))

                (%.section
                  (identifier-syntax
                    (_ (cadddr %employee))
                    ((set! _ new-section) (set-car! (cdddr %employee) new-section))))
                )
                (with-employees (%employees ...)
                  %code %codes ...)))))))))
```

```scheme:
(define jg (employee "Jameel Green" "jg@dot-notation.scm" "Sales"  ))
(define rs (employee "Roza Scott"   "rs@dot-notation.scm" "Finance"))

(with-employees (jg rs)
  (display "Before: ") (display jg.section) (newline)
  (write jg) (newline)
  (newline)

  (set! jg.section "Marketing")

  (display "After: ") (display jg.section) (newline)
  (write jg) (newline))
```

```
Before: Sales
(employee "Jameel Green" "jg@dot-notation.scm" "Sales")

After: Marketing
(employee "Jameel Green" "jg@dot-notation.scm" "Marketing")
```
RDBおよびSQLの記載に対する考え方について

こんにちは。株式会社システムアイのshivadyです。
アドベントカレンダー企画3日目の担当をさせていただきます。

まずはじめに簡単に自己紹介をさせていただきますと、システムアイに入社前に色々なシステム構築など携わり、RDBの考え方に強い偏見ある為、今回記載させて頂きます。
かなり偏見を加味しますが、少しでも今後の業務にも役に立つはず！という思いを胸に今回は私が思っている __RDB__ の考えはこうするべきという記事にいたしました。

上記の通り、過去の実績での偏見なので、新たな知識や実務でのナレッジ等の取得を目的に来訪いただいた方には大変申し訳ないのですが、温かい目で見守っていただけますと幸いです。またコードの貼り付けは無いのでご勘弁を・・


# RDBとは
　「RDB」とは、表形式の複数データを関連付けて使えるようにしたデータベースのことです。

### 昔は以下の考えでした。
　1\. 綺麗なテーブル設計をしたい。
　2\. SQLをワンライナーでデータを取得したい。
　3\. 外部キー制約設定するのかっこいいな
　　　　　　　　　　　　　　　　　　　　　　　　　　　　 　などなど

 とりあえず余分なカラムをやテーブルを作らずに、正規化しようにこだわっておりました:v:

#### そんなこんなで仕事をしていく内に以下の問題点に遭遇。
 
>1\. 綺麗なテーブル設計をしたい。

例：
AデータでIDが100を持っている。
BデータでIDが100を持っている。
同じデータを違うテーブルで持つのはもったいないので、Aだけ取り込もう。Bは被っているので不要と判断。
→Bデータの方が更新が早い場合に、Aデータが来るまでフロント画面で使えない。

>2\. SQLをワンライナーでデータを取得したい。

例：
Aテーブルに1億レコードある、Bテーブルに100万レコードある。JOINして一発でレコードを返そう。
→テーブルに持っているキーが検索する条件によって、オプティマイザの判断でキーが変わってしまい性能が劣化。
    
   
>3\. 外部キー制約設定するのかっこいいな

例：
Aテーブルのデータは、Bテーブルのデータを消してから消すもの。
→ドキュメントがきちんと整備されていない中で、テーブル相関図をきちんと把握しないとテストデータが作れない。

###### 問題点は以下で対策していくが更に問題点に直面する。

1\. Aデータの到着を待たずにBデータで入れるようにするが、タイミングに寄ってはデッドロックに遭遇:crying_cat_face:

2\. INDEXを貼って性能を上げるが、今度はデータを入れる際にINDEX作成コストが上がってしまい、データ投入に時間が掛かり、検索結果の最新化が遅くなる。:sleepy:

3\. テーブル相関図を作るが習熟コストが高いし、面倒。更にメンテを忘れる。:sweat_smile:


###### 表形式の複数データを関連付けて使えるようにしたデータベースという事だったが、この関連付けてという言葉が罠だと気づいた。

まずは結論から言うと「RDB」の概念は以下と割り切るのが必要だと思います。（ここからは偏見です。きちんと整地化して利用している皆さんすいません。）

# RDBとは

 「RDB」とは、表形式のデータを使えるようにしたデータベースのことです。

  
　1\. データごとにテーブルを用意する。
　2\. SQLは出来る限りシンプル。JOINなど覚えないでいい。
　3\. 外部キー制約なんかいらない。

上記の考え方に基づくと二次被害まで出ていた問題が改善した。

### 前提：テーブルの正規化はしない

　1\. それぞれテーブルを用意し、取得タイミングはフロント側で判断をする。
　2\. SQL発行を2回に変えたら、INDEXが変わったので、足す必要がない。
　3\. 簡単にテストデータが作れる。


# まとめ

色々と皆さんが今後 __RDB__ でテーブル設計など実施する場合には、各データの関連性は気にせずに、存在するデータを入れる __表形式のデータ__ を入れる __箱__ と考えて頂けるといいかなと思います。


### 多分以下のメリットがあると思います。（偏見まとめ）

+ Modelの書き方が単体のテーブルだけのSELECTになるので、共通化しやすくなるはず。
+ 簡単なSQLだけを覚えればいいので、習熟コストが少なくなる。（SELECTの記載を知っていればなんとかなる。）
+ データベースの入れ替えが簡単になる。
+ テーブル単位にサーバを分けるようになる。
+ ビュー、ストアドを考えなくていい。必要な場合はワークテーブルとして新規に作成する。
+ パーティショニング機能で性能が出る可能性が高くなる。
+ EXPLAINの解析結果が簡単になる。（Nested-Loopを考えなくてよくなる。）
+ コントローラー側でのプログラム処理に任せるので、プログラムを書いている感が増す。


__JOINするSQLを書かずにシンプルにSQLを書く事がいいと個人的には思います。__

# 余談

上記の考えのもと <a href="https://odf.olympictech.org/">Olympic Data Feed</a> を使ったテーブル設計し、無事にリオ五輪のサイト提供を実施出来たのは懐かしい思い出です。某Yのサイト、Nのサイトなどに載せてました。
ただ、DB（CloudSQL）をスレーブ20台構成（当時のGCP最大設定数）で直接参照などした場合に、コンテンツが返せなかったので __RDB__ とはデータを入れる __箱__ という考え方になりましたので、皆さんが今後システム設計する場合にデータベースの部分で何とか性能を出せるよう頑張ろうはしない方がいいと思ってます。あくまでデータを溜める箱というイメージで捉えていただければと思います。__何卒よろしくお願いいたします。__
スマホで記事等を簡単にAI要約する方法


PCでChatGPTなどを使って記事や論文等の要約が簡単にできるようになりました。それがスマホでも簡単にできる方法を見つけたのでご紹介したいと思います。

　今回iPhoneとMicrosoft Bingを使った方法を採用しています。BingはAndroidでも利用可能なため、Androidユーザーの方でも同じ方法で使用することが出来ると思います。

# 準備するもの
・Microsoft　Bing
　アプリからBingをダウンロードしておきます。
![IMG_8069.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743575/7934845a-6684-652c-8787-4b0e6246392d.png)


# 使い方
1．要約したい記事などのWeb画面を開いておきます。
　画面下にある、コピーや、ブックマークに登録する等のオプション選択画面を開きます。良く使う機能がオプション画面の上部に表示されているので、そこでBingを選択します。

![IMG_8066.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743575/74639d77-99d5-281e-1532-f4fea617b41d.png)

2.Bingを選択すると、「これについてBingとチャットする！」というボタンが出てくるので押します。
![IMG_8067.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743575/6fc2f8da-1ef4-f136-5fe2-00e6f1d5ea03.png)





3.特に何も押さなくても自動でWeb画面の内容を要約してくれます。

![IMG_8068.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743575/de7e7a99-f69c-4355-af36-c432b984a2d2.png)

# まとめ
　気になるWeb記事があるけれど、じっくり読む時間が今はない！とか、長文をかいつまんで知りたい！という時に、大変重宝する機能かと思いました。
　参考になりましたら幸いです♪
プロデルでデータベースSQLServer2022（ステップ１）クエリーしてみる

# はじめに

https://qiita.com/advent-calendar/2023/produire

この記事は日本語プログラミング言語「プロデル」アドベントカレンダー2023の初日向けの記事です。

と言ってもこの記事を書いているのは2023/12/02です。初日と12/25の記事枠は若干特別感があるみたいで少し他の方用に空けていたのですが、予約は特にないまま昨日は仕事が忙しくて記事を投稿しないまま本日となってしまいました。

この記事のお題は「プロデルでデータベースSQLServer2022にクエリーしてみる（ステップ１）」です。ステップ１ということは例によって少しシリーズ化した記事にする予定です。これで万が一本アドベントカレンダーに他に参加者がない場合でも乗り切る覚悟でございます。

## この記事内容の作業環境
Windows11 Pro 22H2
CPU Intel(R) Core(TM) i3-5005U 2.00 GHz
Produire Version 2.0.1197 for Windows
SQL Server 16.0.1000.6 Express Edition
SQL Server Management Studio	19.2.56.2

# お題のデータべース
こんなテーブル構成のデータベースを作成してみました。
データベース名は「日本語プログラミング言語」です。
![db.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3118036/5482f410-d924-34ca-392d-a26461bf624f.png)

# お題のソースコード
#### プロデル
```mind:mssql.rdr
※コンソール
【SQLServer:SQLServerデータベース】
【クエリー文字列:文字列】は、「
SELECT LN.言語名,LN.公開年,LN.よみがな,SLN.言語名 AS 姉妹言語名 
FROM 言語名 AS LN
LEFT JOIN 姉妹言語　AS SL ON LN.言語ID=SL.言語ID
LEFT JOIN 言語名　AS SLN ON SL.姉妹言語ID=SLN.言語ID
WHERE
LN.言語ID IN (@id1, @id2) 
」
バインド値は｛@id1=6,@id2=8｝

メイン実行する。

メイン実行する手順
	接続構成する
	SQLServerへ接続する

	SQLServerからクエリー文字列をバインド値として取得して、結果とする
	結果の内容をコンソールへ表示して改行する
 
	SQLServerから切断する
終わり

接続構成する手順
	SQLServerというSQLServerデータベースを作る
	SQLServerのデータソースは「DESKTOP-078KPRA\SQLEXPRESS」
	SQLServerのデータベースは「日本語プログラミング言語」
	SQLServerのWindows認証は、○
終わり
```
https://produ.irelang.jp/docs/data/db/dbsqlserver.htm

↑こちらの詳しい説明を拝見して適当に書いています。「結果」はプロデルデザイナで参照すると動的配列のようです。Java環境でmyBatisとか使ってクエリーするときは結果セットのメンバーに応じたクラスを定義しておかなければならなかったりしますが、そういう面倒のない環境はよいです。ADO.NETのリザルトセットオブジェクトを彷彿とさせる使い勝手ですね。

# 実行結果
それでは実行してみましょう。コンパイルはプロデルデザイナで実行ファイルの作成するで行っています。

```
C:\produire\sample>mssql.exe
{{プロデル,2007,ぷろでる,スミレ},{プロデル,2007,ぷろでる,スミレ畑},{スミレ,2018,すみれ,プロデル},{スミレ,2018,すみれ,スミレ畑}}

C:\produire\sample>
```

コンソール出力にいきなり放り込んでもコンパイルエラーにならなかったのでどんな風に出力されるかどきどきしていたのですが、こんな感じで出てくるのですね。すごいです。ちょっとわかりやすくするため結果を改行してみます。

```
{
{プロデル,2007,ぷろでる,スミレ},
{プロデル,2007,ぷろでる,スミレ畑},
{スミレ,2018,すみれ,プロデル},
{スミレ,2018,すみれ,スミレ畑}
}
```
投入したクエリー文をここで説明しておきます。
```sql
SELECT LN.言語名,LN.公開年,LN.よみがな,SLN.言語名 AS 姉妹言語名 
FROM 言語名 AS LN
LEFT JOIN 姉妹言語　AS SL ON LN.言語ID=SL.言語ID
LEFT JOIN 言語名　AS SLN ON SL.姉妹言語ID=SLN.言語ID
WHERE
LN.言語ID IN (@id1, @id2) 
```
[言語名]テーブルと[言語名]テーブルを[姉妹言語]テーブルを介して左外部結合しています。
WHERE句で「プロデル」と「スミレ」の言語IDを指定しています。
「プロデル」の姉妹言語は「スミレ」と「スミレ畑」
「スミレ」の姉妹言語は「プロデル」と「スミレ畑」
という結果が返っていますね。

プレースフォルダにも対応しているのに感動しました。

# おわりに

今回は結果セットをさらっとコンソール出力したので、内部的にはここの項目型は文字列変換されていると推察されます。次回ではプロデルの結果セットでDBの型情報がどのように保持されているのか少し探ってみたいと思います。
色々な言語で簡単なREPLを実装する #python

前回からの続きです。
[色々な言語で簡単なREPLを実装する #ruby](https://qiita.com/runeleaf/items/7615afd7abc79c9b3c01)

# REPLとは

[こちらの記事](https://qiita.com/runeleaf/items/7615afd7abc79c9b3c01)を参照してください。

## Pythonで実装する

```python
def main():
    while True:
        try:
            print("python> ", end="")
            # prompt = eval(input())
            prompt = input()

            if prompt is not None:
                print(prompt)
        except KeyboardInterrupt:
            print("\nBye!")
            break
        except EOFError:
            break
        except Exception as e:
            print(f"Error: {e}")

if __name__ == "__main__":
    main()
```


## 実行する

```bash
$ python main.py
python> 1 + 1
1 + 1
python> foobarbaz
foobarbaz
python> ^C
Bye!
```
活性化関数

# シグモイド関数
```math
f(x) = \frac{1}{1 + e^{-x}}
```
```python
def sigmoid(x):
    return 1 / (1 + np.exp(-x))

x = np.arange(-7, 7, 0.1)
y = sigmoid(x)

plt.plot(x, y)
plt.title('Sigmoid Function')
plt.xlabel('x')
plt.ylabel('sigmoid(x)')
plt.grid(True)
plt.show()
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087507/1e116623-c5f8-a65c-30b3-ecd824ec5c6d.png)


# ステップ関数
```python
def step(x):
    return np.array(x>0).astype(np.int)

    x = np.arange(-5,5,0.1)
    y = step(x) 
    plt.plot(x,y)
    plt.xlabel("x")
    plt.ylabel("y")
    plt.ylim([-0.1,1.1])
    plt.show()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087507/15c52d74-9ba9-25d3-e712-33814af1594f.png)

# ReLU関数
```python
Vdef relu(x):
    return np.maximum(0, x)

# グラフを描画するための入力値を生成
x = np.arange(-5, 5, 0.1)
y = relu(x)

# グラフの描画
plt.plot(x, y)
plt.title('ReLU Function')
plt.xlabel('x')
plt.ylabel('relu(x)')
plt.grid(True)
plt.show()
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087507/cf20aef7-120f-9d6a-adad-ee8b2969614d.png)
【Python】int(a/b)とa//bが違うことに衝撃を受けた

## はじめに

こんにちは。エンジニアを目指す大学3年生です。

AtCoder 「競プロ典型 90問」の22問目

https://atcoder.jp/contests/typical90/tasks/typical90_v

を解いていて、
```int(a/b)```と```a//b```の違いで
WAとACが変わったことに衝撃を受けたので、
その違いについて調べました。

結論、
「**```a/b```はfloatを返し、```a//b```はintを返す**」ことにより、
オーバーフローが発生するかどうかの違いでした。

## 気づいた背景
「競プロ典型 90問」の22問目を解いていて、
※この記事では問題は省略します。

下のコードではうまく行かず
```py:022_cubic_cake.py
import math
a, b, c = map(int, input().split())

gcd = math.gcd(a, b)
gcd = math.gcd(gcd, c)
# 1000000000000000000 999999999999999999 999999999999999998 の場合
# gcd == 1 になる

a = int(a/gcd) - 1
b = int(b/gcd) - 1
c = int(c/gcd) - 1

print(a+b+c)
```
```sh:ターミナル
 % python3 022_cubic_cake.py
1000000000000000000 999999999999999999 999999999999999998
2999999999999999997
```

下のコードではうまくいきました。
```py:022_cubic_cake.py
import math
a, b, c = map(int, input().split())

gcd = math.gcd(a, b)
gcd = math.gcd(gcd, c)
# 1000000000000000000 999999999999999999 999999999999999998 の場合
# gcd == 1 になる

a = a//gcd - 1 # 上との違いはここだけ
b = b//gcd - 1 # 上との違いはここだけ
c = c//gcd - 1 # 上との違いはここだけ

print(a+b+c)
```
```sh:ターミナル
 % python3 022_cubic_cake.py
1000000000000000000 999999999999999999 999999999999999998
2999999999999999994
```
なんで？

と純粋に疑問に思ったのが、```int(a/b)```と```a//b```の違いに気づいた背景です。

普段、どっちも同じだと信じて使っていたので衝撃でした...。

## ２つの違い

以下のpythonのドキュメントを見ると

https://docs.python.org/ja/3/library/stdtypes.html#typesnumeric

- intは精度の上限がない。
- floatはCのdoubleで実装されている。

ことが分かります。
また、以下のドキュメントを見ると

https://docs.python.org/ja/3/tutorial/floatingpoint.html

floatでは、数字を決めるのは53ビットであることが分かります。

53ビットを超える数は近似されるので、
この問題は正しく結果を出せなかったのだと理解できました。

実際、今回扱った数字は53ビット以上でした。

```sh
 % python3
>>> 2**53<1000000000000000000
True
```

つまり、２つの違いは、
**精度に上限があるかどうか**
であることが分かります。

具体的には、intには精度の上限はなく、floatは53ビットという上限がありました。


## まとめ

整数（int）は精度に上限がないことは驚きでした...！
これからは、```int(a/b)```は極力避け、```a//b```を使おうと思います。

また、今後もプログラミングをする中で
気づいたことは積極的にアウトプットしていきたいです。
Milk-v Duo上のpythonでお手軽HTTPサーバー

## はじめに
秋葉原ロボット部の有志で、Milk-v Duoを購入し、個々人が様々な実験を行って、勉強会内で報告しています。

Milk-v Duoは9ドルのrisc-vコンピュータとして知られています。
ハードウェアは以下の通りです。

1. CPUはCVITEKのCV1800B (C906@1Ghz + C906@700MHz)
1. 最高1 GHzで動作するデュアルRV64コア
1. 64 MBのラム
1. オプションのアドオンボードを接続すると10/100Mbpsの速度でイーサーネットに接続可能

Milk-v DuoのOSイメージにはpythonが標準でインストールされています。
PythonでI2C接続したセンサの利用はできましたので、他の機能も利用してみます。
本記事では、HTTPサーバーを動作させます。
Milk-v DuoはWindowsマシンとUSBケーブルで接続しています。
## HTTPサーバーの立ち上げ
サーバーの起動は、とても簡単です。
```
[root@milkv-duo]~# python -m http.server 8000
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
```
## ブラウザからのアクセス
Milk-v DuoのIPアドレスは「192.168.42.1」なので、Windowsマシンのブラウザで、「http: //192.168.42.1:8080」と入力すると、Milk-v Duoの表示が以下のメッセージが表示されます。
```
192.168.42.24 - - [01/Jan/1970 00:02:09] "GET / HTTP/1.1" 200 -
```
Windowsマシンのブラウザの表示は、以下の通り。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693019/6cf47203-31dc-5cca-9626-9c87ccda4599.png)

「.ash history」をクリックすると、以下のメッセージが表示されます。
```
192.168.42.24 - - [01/Jan/1970 08:36:01] "GET /.ash_history HTTP/1.1" 200 -
```

## index.htmlを表示
「testserver.py」として、以下のpythonスクリプトを作成しました。
```testserver.py
import http.server
import socketserver

PORT = 8000

Handler = http.server.SimpleHTTPRequestHandler

with socketserver.TCPServer(("", PORT), Handler) as httpd:
    print("serving at port", PORT)
    httpd.serve_forever()
```
「index.html」として以下のファイルを作成しました。
```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  Hello, World!
</body>
</html>
```
再度、ブラウザからMilk-v Duoにアクセスします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693019/7566b7ed-5f46-d98c-6dfe-0b8025ab7837.png)

ブラウザ上に「index.html」の内容が表示されました。

## おわりに
実験用のhttpサーバーには利用できそうです。
PHPに対応したサーバーを作成する場合は、buildroot用のapacheとphpをインストールした環境を用いる必要があります。

参考　https://docs.python.org/ja/3/library/http.server.html
Chromeのデベロッパー ツールにペースト出来ない

## デベロッパーツールのWarning
Google Chrome(v121) のデベロッパーツール(DevTools)のコンソールにコードをコピペしようとすると以下のようにWarningが出た。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32425/0cd60029-f510-a59d-35ee-2a427568f255.png)

```
Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yourself. This could allow attackers to steal your identity or take control of your computer. Please type ‘allow pasting’ below to allow pasting.
```

下記のように `{PH1}` と言われることもあるが、`allow pasting` 打てば良い

```
Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yourself. This could allow attackers to steal your identity or take control of your computer. Please type {PH1} below to allow pasting.
```

## 解決
書いてあるとおり `allow pasting` って打つだけ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32425/e7181654-259f-efb6-4c6b-cde946bbc41c.png)


## おまけ
デベロッパーツールの設定で、「Show warning about Selt-XSS when pasting code」から設定をオフにできる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32425/33c357e3-4a15-917e-1609-f87b997394f9.png)
なぜJavaではインターフェースだけ多重継承が許されているのか

# はじめに
Javaではクラスの多重継承ができませんが、例外的にインターフェースのみ多重継承が許されています。なぜこうした例外が許されているのでしょうか。

初心者向けの記事です。なぜこんな言語仕様にしたのか、といった話はしないのでよろしくお願いします。

# 多重継承ができない理由

一言で言うと親クラスが同名のメソッドを持っていた場合、子クラスの処理内容に矛盾が生じる可能性がからです。

便宜的にParent1とParent2の2つのクラスを用意します。

```java
public class Parent1 {
    public void sing() {
        System.out.println("演歌を歌う");
    }
}

```

```java
public class Parent2 {
    public void sing() {
        System.out.println("ロックを歌う");
    }
}

```

2つのクラスは同名のsingメソッドを持っていますが、処理内容が異なります。
もし、Parents1とParents2の2つを多重継承する子クラスが存在する場合、singメソッドはどうなるでしょうか？結論、どちらの親のsingメソッドの処理を優先してよいか分からず、処理内容が定まりません。



# インターフェースの多重継承が可能な理由

一言で言うと、親クラスが同名のメソッドを持っていても、処理内容が未定義なので、小クラスの処理内容に矛盾が生じないからです。

上記のParent1とParent2をインターフェースにすると下記になります。singメソッドが未定義なので実質同じメソッドになります。そのためParent1とParent2を同時に継承したとしても、クラスの多重継承のようにメソッドの処理が矛盾しません。このため、インターフェースの多重継承が許されているのだと思います。

```java
public interface Parent1 {
    void sing();
}
```

```java
public interface Parent2 {
    void sing();
}
```



# 参考資料



https://book.impress.co.jp/books/1123101044
【Unity初歩】~Physicsを使ってみる~

# はじめに
前回、スクリプトをかいてオブジェクトに当たり判定をつけるところまでできました。
今回はUnity独自の機能のひとつであるPhysicsを使ったゲーム作成に取り組んでみます。

前回の記事

https://qiita.com/usomaru/items/0367f37bf80ff01e39c4

# Physicsとは
Unityに標準で付属している物理エンジンです。
使うことで簡単にオブジェクトを物理法則にしたがって動かせます。

# Physics 2Dの種類
大きく5種類に分けられるかと思います。
- Rigidbody…オブジェクトを物理エンジンで制御する。
- Collider…オブジェクトの衝突エリアを作れる。エリアの形の種類によっていろいろある。
- Joint…オブジェクトをつなげる。
- Constant Force…時間とともに加速させたい場合に使える。
- Effector…Colliderに対してエフェクトを追加する。


# 重力を実装する
Rigidbodyを使うことで実装できます。

「AddComponent」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/dc367aa6-ced9-5ffa-5626-5ea52fcfc543.png)

クリックするとComponentの種類を選択する画面が表示されるので、「Physics 2D」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/d87e27fd-7bed-fd6e-2fe9-2657695268b1.png)

「Rigidbody 2D」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/4452e124-c2f3-3901-d957-bf4e329b4fed.png)

ポチポチ操作だけで重力が実装されました。
では、本当に重力が実装されたか確認します。

動画ではないため伝わりにくいのですが、実行すると重力に従って落ちていき、🦀が見えなくなりました。(🦀のPositionのy座標が0からマイナスになっています)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/0a62f725-f840-f884-7f40-0f15a34b48c6.png)


# 他のオブジェクトと衝突させる
Colliderを使うことで実装できます。

Colliderにはその形によって何種類かあるのですが、一旦ここではCircle Collider 2Dを選択してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/230fd828-7e11-f131-5374-ffeca075b787.png)

適用されると、少し見えづらいですが、オブジェクトに丸い円が表示されます。
これは当たり判定に使われます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/fdcc33a4-cb22-e7e4-de87-fef7474394c1.png)

では、着地ができる地面のオブジェクトを追加してみることで、オブジェクトとの衝突を検知できることを確認しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/653d2633-aaff-ecaa-c9ab-6e8b5c3fb94e.png)

地面のオブジェクトにBox Collider 2Dを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/bd19edc7-a6c6-8648-55bd-1227f9e154c2.png)

追加出来たら加えて、Rigidbodyも同じ要領で追加します。
ですが、このままだとブロックにも重力を加えたことで、ブロックも落下してしまいます。

# 重力の影響を受けない設定

地面に追加したRigidbody 2DのBody TypeをKinematicに変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/26673056-13b8-8fd8-7e0b-1e1787a4a704.png)

動かしてみると、無事に🦀が地面に着地できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/d6193527-ed16-7349-d473-ff7d900744e9.png)

地面と🦀の間に余白があるように感じるのは、Circle Collider 2Dの円を調整しておらず、でかいためです…

# おわりに
画面ぽちぽちだけどこんなに簡単に物理法則をオブジェクトに追加できて驚きました。
次回はPhysicsを使って、ジャンプや移動を実装してみます。

# 参考
https://docs.unity3d.com/ja/2021.3/Manual/Physics2DReference.html
ドット記法とブラケット記法の使い分け

# はじめに

GAS（Google App Script）の学習を進める中でドット記法だとエラーになるのに対し、ブラケット記法だと正常に動作するシーンに遭遇した。
ドット記法とブラケット記法の使い分けが気になったので、調べてまとめる。

# ドット記法とブラケット記法

二つの記法は、オブジェクト内のプロパティを用いて、値にアクセスするための記法である。
基本的には同じ使い方で問題ないとされているが**オブジェクトのプロパティを、変数や定数を仲介してアクセスするとき**は扱いに注意する必要がある。

```javascript:qiita.js
let student = {};
student.name = 'Tom';
student['age'] = 20;
console.log(student); //　→　{ name: 'Tom', age: 20 }
```

上のコードより、直接プロパティを指定する場合はどちらの記法でも問題ないことがわかる。


```javascript:qiita.js
let student = {name: 'Tom', age: 20, gender: 'male'};
for (let prop in student) {
    console.log(student.prop); // undefined → undefined → undefined
    console.log(student[prop]); // Tom → 20 → male
    console.log(student['prop']); // undefined → undefined → undefined
}
```

しかし、上のように変数・定数を用いてオブジェクトのプロパティにアクセスする際に、ドット記法だと出力がundefinedとなる。

この内容については、[文系大学生のためのJavascript入門](https://zenn.dev/ojk/books/intro-to-javascript/viewer/js-object)で以下のように説明されています。

> ドット記法では、プロパティにアクセスする際に引用符を付けないため、obj.prop と記述したときに「prop」がプロパティ名なのか定数名なのか区別できません。

ブラケット記法だと、student[prop]とstudent['prop']のようにプロパティと変数・定数の区別がつく。

# まとめ
オブジェクトのプロパティに、変数・定数を介してアクセスする際にはドット記法ではなく、ブラケット記法を用いる。

# 参考にしたサイト
「文系大学生のためのJavascript入門」
https://zenn.dev/ojk/books/intro-to-javascript/viewer/js-object
色々な言語で簡単なREPLを実装する #ruby

# REPLとは

REPLとは、Read-Eval-Print Loopの略で、プログラミング言語の実行環境の一つです。ユーザーが入力欄にキーボードなどから式や文を一行入力(Read)、即座に評価(Evaluate)して結果を返し(Print)、再び入力可能(Loop)になる対話的な実行方式です。

## Rubyで実装する

main.rb
```ruby
def main
  while true
    begin
      print "ruby> "

      input = STDIN.gets
      raise Interrupt if input.nil?

      prompt = input.chomp
      break if prompt == "exit"

      # puts eval(prompt)
      puts prompt
    rescue Interrupt
      puts "\nBye!"
      break
    rescue Exception
      puts "Error: #{$!}"
    end
  end
end

main

```

## 実行する

```bash
$ ruby main.rb
ruby> 1 + 1
1 + 1
ruby> foobar
foobar
ruby> ^D
Bye!
```

`puts prompt`の部分でevalをすると、1 + 1など計算式が評価された結果を出力できます。
この部分は今後の各言語による実装でも同様にしています。
pomera debian でアセンブラを使いたかった

# 結論
セルフ ビルドの gcc がデフォルトで thumb コードを吐くようなので -marm をつける

## 現象
アセンブラを含んだ SDL 版アプリをビルドすると、Illegal instruction と怒られる。

## 調査
### .s 呼び出しテスト
単純にアセンブラ コードを呼ぶテスト アプリを作成する

メイク ファイル
~~~:Makefile
CXX		=	g++
RM		=	rm -f

TARGET	=	test

CFLAGS	=	-Wall -O3
LFLAGS	=	

CSRCS	=	./test.cpp ./armtest.s

OBJS = $(addsuffix .o, $(basename $(CSRCS)))
LIBS = 

.SUFFIXES: .cpp.o
.SUFFIXES: .s.o

all:	$(TARGET)

$(TARGET):	$(OBJS)
	$(CXX) $(LFLAGS) -g -o $@ $(OBJS) $(LIBS)
	$(STRIP) $@

.cpp.o:
	$(CXX) $(CFLAGS) -c -o $@ $<

.s.o:
	$(CXX) $(CFLAGS)  -c $^ -o $@

clean:
	rm -f $(TARGET) $(OBJS)
~~~

マシン語 ファイル
int ArmTest(int v) { return v + 1; }
~~~as:armtest.s
  .text
  .align 4

	.global ArmTest

ArmTest:
	add	r0, r0, #1
	mov	pc, lr
~~~

C コード (main)
~~~c++:test.cpp
#include <stdio.h>

extern "C" int ArmTest(int v);

int main()
{
	 printf("Call ArmTest(2)\n");
	 printf("Result: %d\n", ArmTest(2));
	 return 0;
}
~~~

実行結果
~~~shell:実行結果
pomera@pomera:~/temp$ ./test
Call ArmTest(2)
Illegal instruction
pomera@pomera:~/temp$ 
~~~

### なんで Illegal instruction?
test.cpp のアセンブリコードでは test.o が thumb コードで吐かれていた。
なので解決方法としては:
1. ARM コード / thumb コードを行き来できるようにする
   - gcc に -mthumb-interwork をオプションをつける
   - .s は bl ではなく bx を利用する
2. 全部 ARM コードにする
   - gcc に -marm オプションをつける

今回は thumb コードを使わないので 2番にすることで解決。
~~~diff:Makefile
- CFLAGS	=	-Wall -O3
+ CFLAGS	=	-Wall -O3 -marm
~~~

実行結果
~~~shell:実行結果
pomera@pomera:~/temp$ ./test
Call ArmTest(2)
Result: 3
pomera@pomera:~/temp$ 
~~~