OmniAICreator/Qiita-1.07M huggingface dataset:
[SwiftUI] SFSafariViewControllerを使用したInAppブラウザ表示

今回はSFSafariViewControllerを使用したInAppブラウザ表示の実装例を書いていこうと思います。

### View側(NavigationLinkと組み合わせて使用しない方が良さそう)
ここでわざわざタイトルに書いているのは、NavigationLinkとSFSafariViewControllerの相性が悪かった為です。最初の実装ではNavigationLinkのdestinationにSafariViewを設定して表示させようとしたのですが、そうするとヘッダーの完了ボタンが効かなくなりブラウザを閉じることができなくなるなどいくつかの不具合に遭遇しました。なのでfullScreenCoverを使用して実装する方針へ切り替えることにしました。参考コードは下記のようになります。
```swift
@State var isSafariWebViewShow: Bool = false
Button {
  isSafariWebViewShow = true
} label: {
  Text("詳しく見る")
}
.fullScreenCover(isPresented: $isSafariWebViewShow, content: {
  SafariWebView(url: URL(string: "\(url)")!, onClose: {
    // 非表示後に何かやりたい処理があればここに書く
  })
})
```


### SafariWebViewの詳細実装
```swift
import SafariServices
import SwiftUI

struct SafariWebView: UIViewControllerRepresentable {
  var url: URL
  var onClose: () -> Void

  func makeUIViewController(context: Context) -> SFSafariViewController {
    let safariViewController = SFSafariViewController(url: url)
    safariViewController.delegate = context.coordinator
    return safariViewController
  }

  func updateUIViewController(_ uiViewController: SFSafariViewController, context: Context) {}

  func makeCoordinator() -> Coordinator {
    Coordinator(self)
  }

  class Coordinator: NSObject, SFSafariViewControllerDelegate {
    var parent: SafariWebView

    init(_ safariWebView: SafariWebView) {
      self.parent = safariWebView
    }

    func safariViewControllerDidFinish(_ controller: SFSafariViewController) {
      parent.onClose()
    }
  }
}
```

#### 実装のポイント
SFSafariViewControllerはUIViewControllerを継承しているクラスなので、SwiftUIで使用する際にはUIViewControllerRepresentableを使用する必要があります。書き方についてはどこにでもあるテンプレートパターンと同じです。今回の場合はSafariWebViewが閉じた後に特定のイベントを発火させる必要がありました。SFSafariViewControllerのDelegateには終了を検知するイベントが用意されているので、それを使用する為にCoordinatorクラスを定義しています。特に不要であればこのあたりも省略して書くことができます。


## 終わりに
以上がSFSafariViewControllerを使用したInAppブラウザでの表示方法となります。UIViewControllerRepresentableの扱いに慣れていれば、そこまでSafariWebView側の実装は難しくなく、むしろView側での表示方法がSwiftUI側のViewコンポーネントとの相性の兼ね合いもあり時間が掛かった印象です。
60代エンジニア、さぁ、どうする

# さぁ、どうするって書いてるけど
そもそもきっと役にたたない情報なんですけど、ちょっと読む価値はあるかもしれない。

# なぜ役に立たないか
なぜ役にたたないかというと、ソフトウェアエンジニア、その90%以上が、業務システムに関わるような、そして、会社としての契約は請負や準委任なのに、なぜか派遣のような働き方をしてる人々だからである。

そして、昨今はますます、<font color="DeepPink"><b>『なんか、IT系、やってみたい』</b></font>
的な動機で、プログラミングスクールを経て就職・転職、うーん。
そりゃあ、そのままでは、先行きは暗い。

そして、純粋にプログラマーをやっていても、だいたい給料なんかあがらず、マネジメントしろ、、、的になってくる。
ここにはまた別の素養が必要なので、コミュニケーションが苦手で、たんたんと作業していた人とかが、馴染めないまま、、安い給料に甘んじる、、、的な。

# 考えればあたりまえの話で
仕事があったとして、発注する側は、開発者の年齢なんか関係ないわけで。
そうすると、同じ仕事なら、単価の安い若者に仕事が流れていくわけで。
考えてみればあたりまえのこと。
昭和の日本じゃあるまいし、同じ仕事してても年齢がいけば給料が自動的にあがるハズもない。

# じゃあ、どうすればいいのよ！
不思議でもなんでもない話で、ある種の専門家は、年齢なんか関係なく仕事が成立してたりする。
だって、<font color="#aaaaff"><b>『その人しかできる人がいないんだもん！』</b></font>状態。
これは、意外なことに、日本中のあちこちにいろんな業種で存在していることは確かである。
よって、<font color="DeepPink"><b>プログラマーだってその流儀でいけんじゃね？</b></font>
ってことを考えると、、そう、いけるんですよ。これが。

# 私の場合、どうだったかっていうと。
かくいう私はどういう経緯でここまできたかというと、
バブルが崩壊して、数年たったときに、とある業界に見切りをつけて、Googleなんか無名な時代に、こっち側にきたわけですが、
<font color="#ff1493"><b>『たまたま就職したベンチャーが、自社製品を持っていて、知る人ぞ知る会社だった』</b></font>というのが、ITキャリアの始まり。
とはいえ、プログラム自体はアマグラマで10年以上のキャリアはあったので、そこそこの自信は無くはなかった感じではあります。
そこで延々と、とある専門のプログラムを書き続けた結果、、、、
、、で、現在に至ります。
だって、ですよ。。案件の提案をすると、『業界が狭すぎて、ちょくちょく同じ人と顔をあわせる』みたいな感じなんですよ。
そして、ここまで、転職と自営を交互に５回ほど繰り返し、現在、自分の会社でのんびり状態です。

# プログラムがかける、、なんて、日本語ができる、、と同等レベル
昔からある言葉で、
<font color="#ff1493"><b>日本語ができるからといって、小説家になれるわけではない</b></font>
っていうのがあって。
プログラムがかけるからといって、プログラマーで十分食っていけるかっていうと、そういうわけではない、、、、って感じです。
もちろん、何事にも例外はあるので、専門をもってなくても、ケタ違いの汎用的な問題解決能力のある人とかは、いるところにはたしかにいますが、存在自体がケタ違いなので、例外と見るべき感じです。

# で、どうすればいいのか、再び。
そう、もうおわかりの通り、今で言えば、
<font color="#ff1493"><b>AIを使えるプログラマじゃなくて、AIそのものを作れる側</b></font>
のような感じでしょうかね。
そこまでのレベルではなくても、なんらかの専門をもってないと、厳しいことは確かなのではないかと。
よって、『なんらか自分の興味のあるものを掘り下げるコト』が重要になってくるので、
『なんらか自分の興味のあるものを自社開発してるような会社』に就職・転職して、腕を磨くのが近道な気がします。
異論がある人もいるでしょうが、、
<font color="#1493ff"><b>毎日面白くもなんともない業務システムのサポート兼改修してる仕事</b></font>よりは、よっぽど楽しく腕が磨ける気がします。

# で、最終的には。
最終的には、大きい必要はなく、自分ひとりでもよいので、会社を興して、お山の大将しましょう。
これが、一番幸せです。
扱う金額も、４ケタ万円になると思うので。それはそれでまた楽しいと思います。
NRUG配信はこんな感じでやってます！

# New Relic User Groupと配信
コロナ禍からコミュニティ・勉強会の配信が行われることが多くなってきました。5類移行により現地開催の勉強会などをふくめ、その模様を配信するという開催形態も増えています。

New Relic User Group - NRUGにおいてもコミュニティの立ち上げ時点ではZoomから配信していたオンライン開催でした。

https://nrug.connpass.com/

昨年９月に行われた[Future Stack](https://newrelic.com/jp/events/2023-09-13/future-stack-tokyo2023)というNew Relicのイベントより後の開催においては、実際の会場での現地参加と[YouTube Live](https://www.youtube.com/@NewRelicUserGroup/streams)とのハイブリッド開催を行っています。
会場提供企業様に協力いただきながら、毎回ユーザーさんに様々な話をしていただくのは非常に面白く、エンジニアとしてもいい刺激になっております。

# NRUGの配信構成
そんなハイブリッド開催を行っているNRUGですが、会場提供企業様が毎回変わるため下見をあらかじめ行ってからイベントに臨んでいます。
映像の入出力の位置と規格、音声入出力の位置を規格など、配信にかかわる機材の構成を確認して会場に合わせた構成を検討したうえで、実際の会場で配信構成を組み上げるという半ばオーダーメードのような配信となっています。

![配信構成概要](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86693/0aeaccde-65af-4075-6575-ad1052cc6e5c.png)
_配信構成の概要_

## 映像機材と映像合成
![NRUG Vol.10の配信機材](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86693/183c7c19-6290-aed0-741f-31b46d15d2c0.jpeg)
_NRUG Vol.10の配信の様子_

OBSで場面の合成などを行う事もできますが、[BlackMagic DesignのATEM Mini Extreme](https://www.blackmagicdesign.com/jp/products/atemmini)という機材を使用しています。

PCで背景を出力し、それに登壇者のPC出力と登壇者を撮影しているカメラの映像を合成しています。
![NRUG 配信クリエイティブ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86693/9e698c29-3eb1-5cba-c454-d7ef7219c186.png)
_PC出力している背景画像_

登壇者を撮影するカメラは[SONYのAX60](https://www.sony.jp/handycam/products/FDR-AX60/)を使用しています。


## 音声機材
こちらもまた手元に持っている[YAMAHAのMG12XU](https://jp.yamaha.com/products/proaudio/mixers/mg_series_xu_model/index.html)という機材を使用しています。
会場により、音声入出力が異なるため、場合によってはマイクを持ち込んだりしています。
NRUG Vol.10では、会場に音声出力があったため、それをほぼ直接ATEM Mini Extremeに入れている状態でした。

登壇者のマイク音声だけを配信にのせてしまうと、会場いらっしゃる方々の反応がうまく拾えません。ですので、NRUG配信を行うときには会場後方に設置してある登壇者カメラの音声を、映像スイッチャーを通して少しのせています。
そうすることにより、例えば登壇中の笑い声や拍手の音など、会場での反応を配信で見ている方にも臨場感を感じていただける状態となります。

# NRUGにぜひご参加ください
New Relic User Groupは大体3−4ヶ月に1度の頻度で開催されています。ぜひ、connpassやSlackのメンバーとなっていただき、NRUGにもご参加いただければと思います！

:::note
New Relic User Groupは[Slackチャンネル](https://join.slack.com/t/nrug/shared_invite/zt-y0de03za-0vCEQdEoGjKXoOrdrHlRzA)があります。ぜひご参加ください！
:::

:::note
無料のアカウントで試してみよう！
[New Relic フリープランで始めるオブザーバビリティ！](https://qiita.com/ktst79/items/5ee74b34e6adb8a7a6fa)
:::

:::note
[New Relic株式会社のQiita Organization](https://qiita.com/organizations/newrelic)では、
新機能を含む活用方法を公開していますので、ぜひフォローをお願いします。
:::
AWS クラウド移行サービス

## クラウドのコンセプト
サーバーには企業が保有・管理をするオンプレミスサーバーとベンダーのサーバーを使うクラウドサーバーと両方を組み合わせたハイブリッドクラウドの3種類が存在します。本記事ではオンプレミスからクラウドサーバーへ移行する際使用できるサービスとコンセプトを紹介します。
### クラウドの利点
1. 世界中からアクセスできる
2. リソースの即時提供およびオンデマンドで管理できる
3. リソースの共有によるコスト削減できる
4. リソースの拡張と縮小が瞬時にできる
5. 従量課金制である
### AWS CAF
AWS CAF(クラウド導入フレームワーク)はクラウド導入に伴うベストプラクティスをまとめたもので、以下の6つのパースペクティブで構成されています。一つ一つの内容が記事一つ分ほどあるので今回はAWS CLFに十分な範囲で紹介します。
1. ビジネス
コストや利益を重視したパースペクティブ
2. 人員
クラウド人材の育成やチーム構築を重視したパースペクティブ
3. ガバナンス
制御と監督を重視したパースペクティブ
4. プラットフォーム
クラウドアーキテクチャの設計とベストプラクティスを重視したパースペクティブ
5. セキュリティ
アクセス制御やコンプライアンスを重視したパースペクティブ
6. オペレーション
コスト、パフォーマンスの最適化と災害対応を重視したパースペクティブ。
## クラウド移行サービス
次はオンプレミスからクラウドへ移行する際に使用できるサービスを説明していきます。
### AWS Application Discovery Service
サーバー移行を支援するサービスです。オンプレミスにある設定やサービスをAWSで利用可能な状態に変換して、移行を自動化します。
### AWS Schema Cobversion Tool
ターゲットデータベース互換フォーマットへの変換ツールです。
### AWS Database Migration Service
オンプレミスからAWSへデータベース移行をサポートするサービスです。移行中でもソースデータベースは完全に利用可能な状態が保たれ、データベースを利用するアプリケーションのダウンタイムを最小限に抑えられます。
### AWS Application Migration Service
オンプレミスデータセンターに関する情報を収集することによって、移行プロジェクト計画を立案するのを支援します。
### AWS Migration Hub
AWSへの大規模移行の実施状況を把握するための移行管理サービスです。
### AWS DataSync
Amazon S3、Amazon EFS、Amazon FSxなどのストレージサービスにデータ迅速かつ安全に転送するためのサービスです。
### AWS Outposts
AWSのインフラストラクチャをオンプレミス環境に展開し、AWSのサービス、ツール、APIをローカルで使用できるようにするサービスです。これを使うとハイブリッドクラウドを実現できます。
### AWS Snow Family
大規模なデータ移行やエッジコンピューティングをサポートする物理デバイスの一連のサービスです。
#### AWS Snowcone
AWS Snowconeは14テラバイトの使用可能なストレージをサポートしており移動しやすくでネットワーク接続の信頼性が低い場合でも使用できることが特徴です。
#### AWS Snowball
Snowball Edgeの旧バージョンです。
##### AWS Snowball Edge Storage Optimized
データ移行とエッジコンピューティングのデバイスです。80TBの容量があります。
##### AWS Snowaball Edge Compute Optimized
断続的な接続環境にあるデータの収集、機械学習、処理、保存をAWSへ返送する前に実行できるデバイスです。
#### AWS Snowmobile
AWSへエクサバイト規模のデータ転送をするサービスです。セミトレータートラックで運ばれ、Snowmobile1台あたり100ペタバイトまで転送できます。
### AWS Transfer Family
SFTP、FTPS、およびFTPを使用してデータをAmazon S3やAmazon EFSに転送するための完全マネージドサービスです。
## 参考文献
https://aws.amazon.com/jp/migration-hub/
https://aws.amazon.com/jp/snow/
https://aws.amazon.com/jp/datasync/
https://aws.amazon.com/jp/aws-transfer-family/
https://aws.amazon.com/jp/application-discovery/
https://aws.amazon.com/jp/dms/schema-conversion-tool/
https://aws.amazon.com/jp/dms/
https://aws.amazon.com/jp/application-migration-service/
https://aws.amazon.com/jp/snow/
https://aws.amazon.com/jp/cloud-adoption-framework/
Flutterのペイント実装（CustomPainter）

# はじめに

Flutterでペイント実装をするための基本調査。
公式ライブラリのCustomPainterが充実してるような気がする。


# 参考リンク

## 公式

https://api.flutter.dev/flutter/rendering/CustomPainter-class.html

## その他

https://qiita.com/tigeeer/items/efa4ce8a4025bbda607b

https://qiita.com/ling350181/items/9a42411b38d1ea26d538

https://zenn.dev/inari_sushio/articles/9643f20ebff29d

https://www.egao-inc.co.jp/tech/flutter-paint/

https://dartpad.dev/?null_safety=true&id=1cdb5019c521dfe613c4f7ec7b7fdf21

https://zawapro.com/?p=2301

https://torikatsu923.hatenablog.com/entry/2020/08/19/211239

https://dev.classmethod.jp/articles/flutter_custom_paint/

https://isub.co.jp/flutter/flutter-graph-custom-painter/

https://stackoverflow.com/questions/50320479/flutter-how-would-one-save-a-canvas-custompainter-to-an-image-file
Linux OSとは

なんかよく聞くけどいまいち理解できていなかったLinuxについて、備忘録として残します。
[参考にしたサイト](https://www.youtube.com/watch?v=91-TmH12o3s)


[目次]
- Linuxって何？
- Linuxで何ができるの？
- Linuxを使うメリットはあるの？
1.多くの種類がある
2.無料で使える
3.スペックの低いパソコンでも使える
- Linuxの導入方法は？
- 総括

# Linuxって何？
- macOSやWindowsOSと同じ**OSの一つ**
- 当初はパソコン用のOSとして作られたが、今はさまざまな家電にも使われている
- webアプリケーションを公開する時に必要な「webサーバー」を設定する際にもLinuxが使われることが多い

このペンギン🐧がキャラクターなのかな？

![スクリーンショット 2024-06-26 17.26.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822835/4c3646d0-d6de-e5b6-f4f3-b44eeb6ed613.png)



※OS💻とは・・・
Operating Systemの略
コンピューターを管理しているソフトウェアのこと（パソコンにはOSが必ず入っている）
アプリケーション開発に必要な**Webサーバーを作る際に必須**


# Linuxで何ができるの？
- WindoesやMacOSのような**パソコンの操作**ができる
- 操作が早くなる**CUI操作**が基本
→Linuxを使う場合は、操作するコマンドを色々覚える必要がある！

※CUI操作とは・・・
マウスを使わずに**キーボードだけで操作する方法**⌨️
例）CUIでファイルをコピー＆ペースト
　　cp コピー元 コピー先　　とコマンドを入力するだけ

# Linuxを使うメリットはあるの？
メリットは３つ
1.多くの種類がある
2.無料で使える
3.スペックの低いパソコンでも使える


- **1.多くの種類がある**
「**ディストリビューション**」という名前で色々なLinuxが用意されている
※ディストリビューションとは・・・
Linuxを使うために必要なアプリや機能を、１つのパッケージとしてまとめているもののこと

    - Windowsの場合
  ・Windows7
  ・Windows10など

    - Linuxの場合
      - 有料でもいいから動作の安定したLinux環境を使いたい！
        →Red Hat Enterprise Linux（RHEL）
        アプリケーション開発からリリースまでを考えている場合おすすめ
        ・有料のLinuxディストリビューションで最も有名。
        ・動作が安定している。🏃‍♀️
        ・商用サポートがある。（困った時にRed Hat社に相談できる）<br><br>
        
        

      - CUI操作が基本だけど、いきなりキーボードの操作はきつい！
        →Ubuntu  
        ・CUI操作だけでなく、「GUI操作」（マウス操作🖱️）もできる。
        ・macOSやWindowsに似せた画面にもできる。
        ・「Ubuntuソフトウェアセンター」で豊富なフリーソフトが使える。<br><br>
        
        

      - RHELは良いけど有料はちょっと・・・
        →CentOS
        RHELの完全互換を目指したディストリビューションの一つ。RHELの無料版のようなイメージ。
        RHELとの違い
        ・無料の分商用サポートはない。
        ・RHELで使えるアプリケーションが一部使えない場合がある。（利用するアプリケーションが多い場合は一度CentOSで利用できるか確認が必要）<br><br><br>
        

- **2.無料で使える**
    - Windows
    →有料。
    - macOS
    →OS自体は無料だが、macOSを使えるパソコンが必要。パソコン本体代金はかかるから結果有料。
    - Linux
    →無料で使えるものも多い。WindowsやmacOSがインストールされているパソコンにインストールすることも可能。<br><br>


- **3.スペックの低いパソコンでも使える**
Linuxは、**CUI操作が基本**となり、コマンド画面があれば操作できるため、スペックの低いパソコンでも利用できる。
webアプリを動作させる「webサーバー」を作るパソコンの性能が低くても、軽快に動作できる。
→昔からあるパソコンにLinuxを入れて使うことも可能！

# Linuxの導入方法は？
方法は２つ
1.パソコンにインストールする
2.仮想環境にインストールする


- **1.パソコンにインストールする**
WindowsやmacOSにインストールすること。最も簡単な方法。
※低スペックのパソコンでも使えるが、webアプリケーションを作る場合は、それなりのスペックのパソコンを用意した方が動作が安定する。<br><br>

- **2.仮想環境にインストールする**
Windows・macOS共に、**Linuxとの同時起動はできない**
→このような場合は、「**仮想環境を作ってインストール**」する方法もある。
※仮想環境・・・パソコン上で動くパソコン環境のこと。
仮想環境を作れば、Windows・macOSを起動しながら、アプリを開く感覚でLinuxを動かすことができる。<br><br>

# 総括
Linuxは、Windowsやmacみたいにわかりやすく、世間一般に浸透しているような名前のものではないが、エンジニアの界隈においてのシェアはとても拡大していることを再認識した。
筆者はAWSに触れているが、EC2を作った時のOSがLinuxだったことに今更気づけました…😇
まさにサービスを提供する上で根幹に当たるようなOS、Linuxのことを今回確認できてよかったです🤞
【Progate】Sassコース 学習内容まとめ

## 自己紹介
29歳。文系卒。新卒入社でWebディレクターを２年半経験。
その後は番組の字幕制作の仕事に従事。
現在はエンジニア転職を目指して勉強中。

## Sassの印象
多くのプログラミング言語でいうC言語のような、始祖のような存在だと思ってました(なんで？)。

## 学習内容
SassはCSSの応用編。入れ子や変数の定義など、プログラミングのような使い方ができる。

### 入れ子
~~~scss
/* 例えばこんなふうに書かなくても… */
header{
}

header ul{

}

/* 入れ子で短く書ける */

header{
    ul{

    }
}
~~~

### hover/action
~~~scss
/* hoverやactionもこのとおり */
li{
    &:hover{...}
    &:action{...}
}
~~~

### class
~~~scss
/* もちろんclassも*/
li{
    &.class{...}
}
~~~

### 変数
変数を利用すれば、のちに修正が必要な場合、変数を直すだけで複数個所にも修正が反映される。嬉しい！
※スコープに注意。
~~~scss
/* $変数名:値; */
$hensuname:#ffffff;

/* 頭に"$"必須 */
h1{ color:$hensuname; }
~~~

### mixin
CSSをギュッと縮小した関数のようなもの。同じ装飾を何回も再利用できて嬉しい。読み方はミキシン？三木眞一郎みたい。
~~~scss
/* 定義 → @mixin mixin名 */
@mixin mixinname{
    ....
}

/* 呼出 → @include mixin名*/
h1{
    @include mixinname;
}
~~~

### 引数
なんとmixinは引数も使えちゃうんだ。
レイアウトは同一でも、コンテンツごとに色が異なるときに重宝しそう。
~~~scss
/* mixinに引数を定義したら… */
@mixin example($hikisuu){
    color:$hikisuu
}

/* 呼出時に値を渡すことができる */
h1{
    @include example(#ffffff);
}
~~~

### 関数
mixinのこと関数みたいって書いたけど、普通に関数も存在するよ。
~~~scss
/* darken関数は、指定した色を暗くする*/
color:darken(#ffffff,10%);

/* lighten関数は、指定した色を明るくする*/
color:lighten(#ffffff,10%);

/* rgba関数は、指定した色を透明にする*/
color:rgba(#ffffff,0.5);
~~~


## まとめ
思ってたものとはまったく違ったけど、確かにcssはちょっと冗長なとこあるなと思ってたので、sassと出会えてよかった。ただ、これとNode.jsやReactを嚙み合わせるイメージはまだまだできない。普通にhtmlと使う分には問題ない気がする。

今後も継続して学習を続けていきたいと思います。

[Progate](https://prog-8.com/)
Doclingo：完全無料のAI PDF翻訳ツール

　今年の四月から新卒としてIT企業で働き始めたHikariです。
　文系出身ですが、プログラミングに興味があって、暇なとき自分で勉強しています。でもITについての資料には、英語のものが多いです。最先端の技術を身につけるために、英語が必要ですね…困りました。
 　そしてネットでPDF翻訳ツールをいろいろ調べて、Doclingoを見つけました。その使いやすさにびっくりしました。

1．高品質、迅速なAI翻訳
大規模言語モデルを使用して、プロ並みの翻訳品質を実現できます。1分間で翻訳が完了し、元のレイアウトもしっかりと保持します。PDFを翻訳するときありがたいですね。
2．多言語対応
英語⇔日本語の双方向翻訳に対応します。どちらの言語でも簡単に翻訳できます。
3．幅広いフォーマット対応
PDF、Word、Excel、PowerPoint、SRT、ePub、さらには RAR、ZIP 形式のファイルまで、様々なフォーマットをサポート。
4．保存機能
翻訳後の文章は24時間サーバーに保存され、24時間以内であればいつでもダウンロード可能。
5．完全無料
誰でも無料で使えます。

　doclingo.aiにアクセスして、すぐ無料で使えます。このツールを使って、英語のIT資料も簡単に読めますね！
Instagramのいいねを購入するメリット

Instagramのいいねを購入するメリット
Instagramでの存在感を高めるために、いいねを購入することを検討したことはありますか？ここでは、Instagramのいいねを購入するメリットについてご紹介します。

1. 信頼性の向上
多くのいいねを持っている投稿は、他のユーザーに信頼されやすくなります。新しいフォロワーを獲得しやすくなり、アカウント全体の信頼性が向上します。

2. エンゲージメントの向上
いいねが多い投稿は、Instagramのアルゴリズムによって他のユーザーのフィードに表示されやすくなります。これにより、自然なエンゲージメントも増加し、さらに多くのいいねやコメントを期待できます。

3. ブランドイメージの強化
ビジネスアカウントにとって、多くのいいねはブランドの人気と影響力を示します。これにより、潜在的な顧客やパートナーに対して良い印象を与えることができます。

4. 競争力の向上
Instagramは非常に競争の激しいプラットフォームです。いいねを購入することで、他の競合と差をつけることができ、より多くのユーザーの注目を集めることができます。

Views4Youのおすすめ
いいねを購入するなら、Views4Youが断然おすすめです。Views4Youは信頼性が高く、リアルないいねを提供してくれるサービスです。私自身も利用したことがありますが、結果に非常に満足しています。エンゲージメントが大幅に向上し、多くの新しいフォロワーを獲得することができました。

もしInstagramのパフォーマンスを向上させたいなら、Views4Youを試してみてください。きっと満足できる結果が得られるはずです！

今すぐViews4You(https://views4you.com/buy-instagram-likes/) でいいねを購入して、Instagramの存在感を一気に高めましょう！ 🚀✨
UnityでGitでチーム開発をするときのアドバイス

# こんな人におすすめ

- 3-4人で個人制作をする
- チーム制作がはじめて
- Unityなどのゲーム制作をする

# これを実践しよう

## DiscordやSlackでサーバーを作ろう

チーム制作をする際はコミュニケーションがプログラムと同じくらい重要です。
DiscordやSlackではトピック別にチャンネルを作ることができるので、円滑なコミュニケーションが取れます。

## mainブランチにプッシュしないようにしよう

mainブランチにプッシュをしてしまうと、他の人に影響が出てしまうことがあります。
そのため作業ブランチを作るのですが間違ってmainブランチにプッシュしてしまうことがあります。
それを避けるためにgit hookを使ってmainブランチにプッシュできないようにしましょう。
間違ってコミットしてもcherry-pickを使って作業ブランチにコミットを移せるので安心してください。

## シーンを使うときは報告しよう

ゲーム制作ではシーンを扱います。
通常のスクリプトだったらコンフリクトが起きても解決しやすいですが、シーンだと解決が難しいです。
それを解決するのに多くの時間を使ってしまうので、シーンを使うときは報告しましょう。

## プルリクエストを使おう

プルリクエストを送ることでどこまで作業が進んでいるのか皆に知らせることができます。
その際はスクリーンショットを添付すると内容がひと目でわかります。

## 話やすい環境を整えよう

チーム制作では想定外の遅れやバグが発生することがあります。
その際はどこまで作業をするか見直しをする必要が出てくるかもしれません。
チーム全員が言いやすい環境ならばいいのですが、ギクシャクいていたりすると本音を言いにくくなります。

## 相手にリスペクトを持とう

チーム制作は自分のしない作業は他の人がやってくれています。
当たり前だと思わずに感謝の気持ちを伝えたりして気持ちの良いチーム制作をしましょう。
Angular で ngFor を使用して一覧表示してみました。

新しいことをすると、いちいちはまります。本当にちょっとしたことなのですが、融通を利いてくれません。融通を利き出しても恐いのですが、もうすぐそういう時代がやって来たりするのでしょうか。
あれっ、プログラムを勉強することに意味があるのかと、少し疑問が沸いてしまいました。なんだろう、変な気持ち。

深く考えずに先に進みます。

#### １．プログラムを更新します。
##### １ー１．main.component.ts のテンプレートのタグを更新します。
``` diff
import { Component } from '@angular/core';
+ import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { HeaderComponent } from './header/header.component';
import { MainComponent } from './main/main.component';
import { Encyclopedia } from './encyclopedia';

@Component({
  selector: 'app-root',
  standalone: true,
-  imports: [RouterOutlet, HeaderComponent, MainComponent],
+   imports: [RouterOutlet, HeaderComponent, MainComponent, CommonModule],
  template: `
  <main>
    <app-header></app-header>
-    <app-main [encyclopedia]="encyclopedia"></app-main>
+    <app-main
+      *ngFor="let encyclopedia of encyclopediaList"
+      [encyclopedia]="encyclopedia">
+    </app-main>
  </main>
`
})
export class AppComponent {
-  encyclopedia: Encyclopedia = {
-    id: 999,
-    name: 'Test Name',
-  };
+  encyclopediaList: Encyclopedia[] = [
+    {
+      id: 1,
+      name: 'Test Name 001'
+    },
+    {
+      id: 2,
+      name: 'Test Name 002'
+    }
+  ];
}
```
（アウトプット）
![1-1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798951/e3f3688a-c626-3c90-b227-4c2b6e48aca6.png)
※※※　学習したこと　※※※
・ngFor を使用するには、CommonModule のインポートが必要です。
2行目：`import { CommonModule } from '@angular/common';`
12行目：`imports: [RouterOutlet, HeaderComponent, MainComponent, CommonModule],`

・データを配列にする場合は、[] で囲む必要があります。
29行目：`encyclopediaList: Encyclopedia[] = [`
38行目：`];`

今日は、配列で {} が [] に変えるところを見逃し、苦労しました。
なんとか無事に思った通りになりました。
ITパスポート データベースとデータ操作

・データベース
一定の規則に従い、関連性のあるデータを蓄積したもの

・DBMS（データベース管理システム）
複数の利用者で大量データを共同利用できるように管理するソフトウェア

・関係データベース
データを行と列による二次元の表形式で管理する
一行が一件のデータを、列はそのデータを構成する項目を表し、表同士が表中の列の値で関連付けられている

RDBMS
関係データベースのDBMS
データの検索や挿入、更新、削除などのデータ操作にはSQLと呼ばれる言語を使う
表（テーブル）、行（レコード）、列（フィールド、項目）

・NoSQL
関係データベースとは異なる方法で、データを保存し処理するデータベース全般
NoSQLのデータベース
キューバリューストア型
保存したいデータと、そのデータを一意に識別できるキーを組みとして管理する
カラム指向型
キーに対するカラム（項目）を自由に追加できる
ドキュメント指向型
ドキュメント１件が一つのデータとなる。データ構造は自由
グラフ指向型
グラフ理論に基づき、ノード間を方向性のあるリレーションでつないで構造化する

・データウェアハウス
多種多様なデータを、時系列に整理・統合して蓄積したデータベース
これを用いて企業の意思決定を支援するBIツールがある
・データレイク
多種多様なデータを、発生したままの形式で蓄積した保管場所
・エンタープライズサーチ
企業内に保存されている様々な情報から、必要な情報を検索、抽出できるシステム

・関係演算
選択（指定した行を抽出する）
射影（指定した列を抽出する）
結合（複数の表を一つの表にする）

・集合演算
同じ列で構成される二つの表から新しい表を作り出す演算
和演算（二つの表にある全ての行を取り出す。同じ行は一つにまとめる）
積演算（二つの表に共通している行を取り出す）
差演算（一方の表から他方の表の行を取り除く）

・データクレンジング
データベース化のために集めたデータを修正し、分析しやすい状態にすること
【palanAR】 ペーパーレスへの道②売場のPOPをARで出現させてみた！

ピチピチの社会人2年目
小売業界でお仕事をしています、rukq(ルカ)と申します！

我が社は慈善活動として現在に至るまで400,950本にも及ぶ植樹を行ってきました。しかしペーパーレスは進んでいなく、紙が大量に利用されています。その現状にメスを入れたいと考え、前回は連絡ノートをデジタル化してみました！

前回の記事はこちら

https://qiita.com/oktk_ruka7852/items/019cf2427f8cd5f765b0

今回は売場のPOPをARで出現させてみようと思います！

## :robot:使用ツール
+ palanAR

## :robot:プレビュー

https://x.com/oktk_r/status/1805416469649633361?s=46


![qr (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775363/345f4ecb-03ee-9132-436c-7135199283aa.png)
こちらのQRコードを見取り、カメラを起動させます。

![marker (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775363/77cc1f1b-3298-f60f-758c-7cd99ea503d0.png)
そして、こちらのARマーカーを読み込むと…

![709_20240625003252.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775363/807bfaec-c58c-e471-445c-afb2deb43417.png)
このようにPOPが表示されます！

## :robot:パラナルARの設定画面

![タイトルなし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775363/a101901e-eeba-4e72-cef8-4c398a9cee6c.png)

今回はPOPデータをjpgでアップロードし、サイズや表示させる向きなどを調整して設定完了！

## :robot:課題と反省点
+ ARマーカーの大きさと光の反射などで読み取りづらい点があった。
+ スマホの画面に映るPOPの大きさを決めるのが難しい。
大きすぎると画面に入りきらない。
小さすぎるとスマホの画面では見にくい。
+一度QRを読み込んでという手順を踏むのがめんどくさい。

## :robot:最後に
今回はどうにか紙媒体を使っているPOPをデジタルに落とし込むことに挑戦しましたが、
スマホで読み取るのに少し手間を感じました。
少し壮大にはなりますが、僕の思い描くビジョンとして
スマホで読み取るのではなく、ゴーグルのようなものを装着して
視界に入るARマーカーを読み取りながら、お買い物できるようになっていけばいいなと思っています！
そのようになればスマホをかざす行為もなくなりよりスムーズにARを活用できると考えています。

今回のプロトタイプがその思い描くビジョンの第一歩目の挑戦になったと思っています。
cipherコマンドが思った以上に長かった

## 概要
今回は短めの記事です。
SEとしてプロジェクトに参画し、退場する際はよく
cipherコマンドを実行したりします。

思った以上に実行時間が長く、ノリで記事にしました！

## 「cipher」コマンドとは？
 コマンドプロンプトから実行できるコマンド（命令文）の1つです。
 指定したディレクトリ（フォルダ）の空き領域に特定のデータを3回上書き処理を行う
 ことができます。

 HDDの記憶領域にデータが何回も上書きされれば、復元は大変困難となります。
 退職した人の情報やデータを適切に消去するために、よく使われるコマンドの一つというわけですね。

〜コマンド詳細〜
```
cipher /w:実行したいディスク名:

// Cドライブでしたい場合
cipher /w:c:
```

## 所要時間
結論から言うと、私の場合は2時間35分程度だったと思います。
まあこれが長い上に会社のPCで実行していると他にやることがなかったりするので、
地味にキツかったりします笑

この体験を書きたかっただけなのですが、PCのスペックや
削除するディスクによって時間は変わってくると思います。

参考に私が実行したPCのスペックを記載します。


・OS： Windows 10
・プロセッサ： Intel(R) Core(TM) i5
・RAM: 8GB 

## 早く終わらせる方法は？
### データの消去
Cドライブ直下に実行するのであれば、Cドライブの中身は削除するなどを
お勧めします。

目的は上書きによる復元防止であり、データを扱っているわけではないので。

またcipherコマンドは指定したディレクトリ（フォルダ）の
空き領域に特定のデータを3回上書きするので、中身は削除した方が
やはり良さそうです。

参考：

https://www.pc-net-service.online/cipher-w-command-introducing-procedure-precautions-supplements-etc/

:::note warn
空き領域を作成するか
対象ディレクトリの中身を消しておくこと
:::

### 他のアプリを終了しておく
コマンドを打つと表示されるのですが、他のアプリも終了させておいた方が
良さそうです。

## コマンドを実施してみよう
では実際にコマンドを打つと画像のようになります↓

![Screen-when-the-cipher-w-command-ends.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/945342/273a7d07-a3dc-53d7-7880-3e28b1fe1574.png)

実行すると、プロセスが画面に表示されます。
「〜に書き込み中」と言うのはプロセスのことで、種類としては

・「0x00 に書き込み中」
・「0xFF に書き込み中」
・「乱数 に書き込み中」
の順番の3つとなります。

上記合計3回の上書き処理がされます。

## 最後に
退職前はPCの初期化やデータの片付け以外にもやることが多く
忙しかったりします。

「cipher」コマンドの実行には時間が取られるので、
予め知っておくことで役に立つこともあるのではないでしょうか。

そう言う意味でこの記事が参考になれば幸いです！
SQLで顧客ごとの直近の製品の購買データの検索を速くする方法（小ネタ）

# はじめに
データベースに大量の件数がある場合、ある検索では、インデックスやCPU数では大きく速度向上できない場合があります。その場合、いろいろなパフォーマンス・チューニングがあるのですが、今回は、SQLで「顧客ごとの直近の製品の購買データの検索を速くする方法」（小ネタ）をご紹介します。
サンプルのデータは、Oracle Database の SHスキーマのSALES表（約90万件）を使います。
```sql
DESC SH.SALES

名前            Nullかどうか タイプ          
------------- -------- ------------ 
PROD_ID       NOT NULL NUMBER       
CUST_ID       NOT NULL NUMBER       
TIME_ID       NOT NULL DATE         
CHANNEL_ID    NOT NULL NUMBER       
PROMO_ID      NOT NULL NUMBER       
QUANTITY_SOLD NOT NULL NUMBER(10,2) 
AMOUNT_SOLD   NOT NULL NUMBER(10,2) 
```

# 普通に検索するSQL
このデータから、顧客ごとの直近の製品の購買データを検索したい場合は、顧客ごと製品ごとの最大日時をGROUP BYしたサブクエリと、元の表を結合した次のようなSQLになります。
```sql
SELECT
 SALES.CUST_ID,
 SALES.PROD_ID,
 SALES.TIME_ID,
 SALES.CHANNEL_ID,
 SALES.PROMO_ID,
 SALES.QUANTITY_SOLD,
 SALES.AMOUNT_SOLD
FROM
 (SELECT CUST_ID, MAX(TIME_ID) TIME_ID
  FROM SH.SALES
  GROUP BY CUST_ID) RCNT,
  SH.SALES
WHERE RCNT.CUST_ID = SALES.CUST_ID
  AND RCNT.TIME_ID = SALES.TIME_ID;
  ```
  このようなSQLは回数が少ないと、それほど問題にはならないのですが、実行回数が多くなると、全体の処理時間が長くなってしまう場合があります。

  # データマート（中間テーブル）を作る
  この課題の解決方法は、単純にデータマート（中間デーブル）を作ることです。顧客ごとの直近の製品の購買データだけを持つ表を作ります。今回はマテリアライズド・ビューとして作ります。実体化した表にすることで、処理コストが大きい GROUP BY の実行を１回できます。レコード件数が少ない表を検索することで、処理全体の検索コストを小さくし、検索処理の実行回数が多い場合でも、全体の処理時間を短くすることができます。
  （ここでは、CUST_ID と TIME_ID の組み合わせが、ユニークになると仮定しています）
  ```sql
CREATE MATERIALIZED VIEW SALES_RCNT_M_VIEW AS
SELECT
 SALES.CUST_ID,
 SALES.PROD_ID,
 SALES.TIME_ID,
 SALES.CHANNEL_ID,
 SALES.PROMO_ID,
 SALES.QUANTITY_SOLD,
 SALES.AMOUNT_SOLD
FROM
 (SELECT CUST_ID,  MAX(TIME_ID) TIME_ID
  FROM SH.SALES
  GROUP BY CUST_ID) RCNT,
  SH.SALES
WHERE RCNT.CUST_ID = SALES.CUST_ID
  AND RCNT.TIME_ID = SALES.TIME_ID;
  ```
このマテリアライズド・ビューはレコード件数が約5万件と少なくなりました。

  # 分析関数（ウィンドウ関数）を使ったデータマート
上のSQLはMAX関数を使いましたが、分析関数（ウィンドウ関数）を使うこともできます。CUST_ID ごとに TIME_ID を降順にならべて番号を割り当てています。
  ```sql
CREATE MATERIALIZED VIEW SALES_RCNT_M_VIEW2 AS
SELECT
 SALES.CUST_ID,
 SALES.PROD_ID,
 SALES.TIME_ID,
 SALES.CHANNEL_ID,
 SALES.PROMO_ID,
 SALES.QUANTITY_SOLD,
 SALES.AMOUNT_SOLD
FROM
 (SELECT
   CUST_ID,
   TIME_ID,
   ROW_NUMBER() OVER(PARTITION BY CUST_ID ORDER BY TIME_ID DESC) RN
  FROM SH.SALES
  ) RCNT,
  SH.SALES
WHERE
  RN = 1
  AND RCNT.CUST_ID = SALES.CUST_ID
  AND RCNT.TIME_ID = SALES.TIME_ID;
  ```
  ウインドウ関数を使うと、上位何個までといった指定を「RN = 1」の条件式を変えることで実現できます。また、RANGE を使うと、顧客の最新購買日から遡って30日までのデータだけといった絞り込みもできます。

  # おわりに

この記事では、SQLのチューニングについて、マテリアライズド・ビューや分析関数を使ったデータマートによる、より実践的な方法をご紹介しました。データマートや分析関数などは、普段、あまり使われないものですが、業務によっては有益な場合がありますので、頭の片隅に置くと良いかもしれません。
メモ: Power Appsの変数に設定された現在の値を確認する方法

変数に設定された値を確認する方法です。
忘れてしまうのでメモです。

[変数]>[○○変数]>[...]>[ビューテキスト]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/e67765a5-29b9-5e0c-0e51-51e4d6dbbba0.png)

ここから変数に現在入っている値を確認可能！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/1e77ad3d-cf92-5cf1-985b-5d20672a10f4.png)
【備忘録】Dify APIを使う際の注意点


Difyチャットメッセージを送信するためのAPIリクエスト。

|パラメータ| 詳細 |
|:-:|:-|
|inputs|Difyのアプリ側で定義した入力パラメータ(Key/Valueペア) |
|query|ユーザーの入力/質問内容|
|response_mode|応答を返すモード。<br>`Streaming` : ストリーミング モード (推奨) は、SSE ( Server-Sent Events )を通じてタイプライターのような出力になる。<br>`blocking` : ブロッキングモード、実行完了後に結果を返します。|
|conversation_id|会話のID。以前のチャット記録に続けて会話するには、前のメッセージのIDを渡す|
|user|ユーザーID（Dify側のログに記録される）|
|files|ファイルをアップロード（なくても良い）|

~~~:POST_Request
curl -X POST 'https://api.dify.ai/v1/chat-messages' \ 
--header 'Authorization: Bearer {api_key}' \ 
--header 'Content-Type: application/json' \ 
--data-raw '{ 
    "inputs": {}, 
    "query": "iPhone 13 Pro Maxの仕様は？", 
    "response_mode": "streaming", 
    "conversation_id": "", 
    "user": "abc-123", 
    "files": [ 
      { 
        "type": "image", 
        "transfer_method": "remote_url", 
        "url": "https://cloud.dify.ai/logo/logo-site.png" 
      } 
    ] 
}'
~~~

~~~:file_upload
curl -X POST 'https://api.dify.ai/v1/files/upload' \ 
--header 'Authorization: Bearer {api_key}' \ 
--form 'file=@localfile;type=image/[png|jpeg|jpg|webp|gif] \ 
--form 'user=abc-123'
~~~

# メモ

・POSTで使用するURLは`https://api.dify.ai/v1/chat-messages`を使う。
Pythonなどでは以下の形式を使うパターンもありましたが、上手くいかず...
WorkflowのIDを使う方法もありそう？
`https://api.dify.ai/v1/`
`https://api.dify.ai/v1/completion-messages`
`https://api.dify.ai/v1/workflows/run`

# 参考リンク集

https://docs.dify.ai/v/japanese/guides/application-publishing/developing-with-apis

https://docs.dify.ai/guides/extension/api-based-extension

https://zenn.dev/417/scraps/5a3143618f614f

https://zenn.dev/omtkz/articles/fd5e5282e281f4
WordPressを安全に保つための必須セキュリティ対策4選

# WordPressを安全に保つための必須セキュリティ対策4選

WordPressは個人や小規模な法人に広く利用されているCMSですが、その人気ゆえにセキュリティリスクも高まっています。本記事では、WordPressサイトのセキュリティを強化するための基本的な対策について解説します。

## ログイン画面のURLをデフォルトのまま使う危険性

### 弱点
WordPressのデフォルトのログインURLは`wp-login.php`です。これをそのまま使用すると、悪意のある攻撃者に簡単に特定され、ブルートフォース攻撃を受けやすくなります。

### 対策
ログインURLを変更するには、以下のプラグインを使用すると便利です：
- **WPS Hide Login**: 簡単にログインURLを変更できます。

例：
```php
add_action('login_enqueue_scripts', 'my_custom_login');
function my_custom_login() {
    wp_redirect(home_url('/my-login-url'));
    exit();
}
```

## プラグインを更新せずに使い続ける危険性

### 弱点
プラグインの脆弱性は、古いバージョンを使い続けることで悪用される可能性が高まります。開発者が提供するアップデートには、しばしばセキュリティパッチが含まれています。

### 対策
プラグインを定期的に更新することが重要です。自動更新機能を活用するか、WordPressの管理画面から手動でアップデートを行いましょう。

例：
```markdown
1. WordPress管理画面にログイン
2. 「ダッシュボード」→「更新」をクリック
3. プラグインの更新リストを確認し、必要なものをアップデート
```

## 公開ディレクトリの設定に不備があり、インストールログや設定ファイルが公開されてしまう危険性

### 弱点
公開ディレクトリの設定が不適切だと、インストールログや設定ファイルが外部から閲覧できる状態になり、サイトの脆弱性を露呈することになります。

### 対策
公開ディレクトリにアクセス制限をかけ、機密情報が公開されないようにすることが必要です。

例：
```apache
<FilesMatch "\.(htaccess|htpasswd|ini|log|txt)$">
    Order allow,deny
    Deny from all
</FilesMatch>
```

## 不要なポート番号をふさぐこと

### 弱点
開いている不要なポートは、攻撃者が侵入するためのエントリーポイントとなる可能性があります。

### 対策
サーバー上のすべてのポートを定期的にチェックし、不要なポートを閉じることが重要です。

例：
```shell
# 開いているポートを確認
sudo netstat -tuln

# 不要なポートを閉じる（例：ポート1234を閉じる）
sudo ufw deny 1234
```

## まとめ

WordPressのセキュリティは、多くの攻撃からサイトを守るための基本的な対策を講じることから始まります。今回紹介した対策を実施することで、あなたのサイトの安全性を大幅に向上させることができます。セキュリティは一度設定すれば終わりではなく、常に最新の状態を保つことが重要です。
技術インプットにSoftware Designを使用しているお話

# 最初に
皆さんは技術書を読むのは好きですか？
自分は本を集めるのが好きですが、
本屋さんへ行っても自分の好きな分野、もしくは興味がある分野にばかり目がいってしまいます。
知識の偏りも感じていたのですが、
ある日雑誌の表紙に映る可愛い動物に目を引かれ、Software Designを購入したところ、
これはいいと思ったので紹介です。

https://gihyo.jp/magazine/SD

# 毎月テーマが変わる
雑誌なので毎月発行されるのですが、
雑誌の中ではメインテーマ２つに色々なコーナーという形で構成されています。
そのメインテーマ自体も分野に偏りがあるわけではなく、
インフラ周りであったり、エディタのお話、
API設計のお話と非常に多彩です。
また今のトレンドに合わせて執筆されておりますので、比較的新しい情報が入りやすいです。
普段フロントエンドしかやらないって方も、
API設計の話や、DBの話などは必ずタメになる話です。
定期購読しているのですが、
今月は自分の業務と関係ないなと感じても、
読んでみると面白いし、後々ためになったこともたくさんあります。

# 一冊で幅広い知識が身につく
メインテーマ意外にもたくさんコラムが存在しており、一冊の中で幅広く知識がつくようになっています。
またその分野に詳しくなくても読みやすい形になっており、
詳しい部分は専門書、浅く知識を得るにはこの雑誌と使い分けができます。
専門書を1から読むのは難しいというパターンも多いと思うので、
その点はかなりいいと思います！
また自分が得意だったり、ずっと携わってる分野のお話でも、
そんなのあるんだと新しく発見することもあるので、
ただ浅い知識というわけではありません！

# 最後に
今回はただの紹介なので短くなってしまいました。
インプットする事に貪欲な方はぜひ一読してみてはいかがでしょうか？
MongoDBをM3MBPに導入したい話

### 環境
Mac Book Pro　M3
Sonoma 14.5

### homebrewのインストール
自分は環境が新しくなったためここからです。

https://brew.sh/ja/

公式に載っている通りの方法ですが、以下のコマンドをターミナルに入力すれば完了なのですが、Pathを通すことを忘れずに。

```zsh
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 
```


色々タイムラインが更新されたら、以下pathを通すコマンド
```zsh
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/(username)/.zprofile
```

続いて以下も入力
```zsh
eval "$(/opt/homebrew/bin/brew shellenv)"
```

### mongodbインストール
公式の出しているインストール手順に沿って導入していきますが、詰まる箇所が数カ所ありました。

https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-os-x/

また、導入および各種操作は以下の記事を参考にしています。（各種操作などはこちらを見た方がわかりやすいかと思います。）

https://reffect.co.jp/windows/mac-mongodb-install

```zsh
brew tap mongodb/brew
```

```
brew install mongodb-community
```

```
mongod --version
```

ここまででmongo自体のインストールが完了です。

#### mongoの起動→つまづく。
起動自体は以下のコマンドで可能です。

```
brew services start mongodb-community
```

さて、この状態でmongodbへの接続を行いたいわけですので、mongoのシェルを開くために以下のコマンドを入力してみると...

```
mongo

zsh: command not found: mongo
```

というわけですね。

###  解決方法
どうやらこちらはMongoのバージョンが新しくなったことでMongoのシェルが別々のパッケージに分割され、mongo→mongoshと更新されたようです。

ですが今回は資料が多いmongo環境で実装するために以下のコマンドで別途シェルをダウンロードします。

```zsh
brew install mongodb-community-shell
```

はい、これにて `mongo`コマンドが使えるようになりました。

### データベースの作成
mongoシェルに移動して以下のコマンドでデータベースを作成します。

```zsh
use test_db
```

これでデータベースは作成できましたが、テーブル(mongoではCollection)を作成しないとデータベースが作成できたという確認ができないようなので作成します。

```zsh
db.createCollection("users")
```

```zsh
> show dbs
admin   0.000GB
config  0.000GB
local   0.000GB
```

はい、確認できたみたいです。

問題なくmongodbを導入できたみたいなので、本記事の目標は達成いたしました。
C# 8.0以降で使えるインデックス演算子 ^ が便利だった件

## 背景

配列Aで、配列Aの最後の要素を取得する方法、もっと短く書けないかなって

## あった

インデックス演算子`^`というものを使うといいみたい。

参考URL

https://learn.microsoft.com/ja-jp/dotnet/fundamentals/code-analysis/style-rules/ide0056

```
var data = 配列A[配列A.Length - 1];
```

↓

```
var data = 配列A[^1];
```

こんな風に書けます。


## インデックス演算子の説明

インデックス演算子`^`は、コレクションの末尾からの相対的な位置を指定するために使用します。

- `^1` : コレクションの最後の要素。
- `^2` : コレクションの最後から2番目の要素。

を指すとのこと。

以下のようにも書ける

```
// 最初の3つの要素を取得
int[] ArrayA = array[0..3];

// 3番目の要素から最後から1つ前の要素までを取得
int[] ArrayB = array[2..^1];

// 最初から3つ目までの要素を取得
int[] ArrayC = array[..3];

// 3番目から最後までの要素を取得
int[] ArrayD = array[2..];
```


なるほど〜
推しをみながらコードを書きたい！！【VSCodeに背景画像を設定】

## 経緯
推しをみながらコードを書きたい！

![screen.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616161/504602a1-f616-c842-c4cd-242305bb2de9.png)

素敵なイラスト：https://x.com/nkymyura/status/1783349003767443792


## 拡張機能
background

https://github.com/shalldie/vscode-background/

https://marketplace.visualstudio.com/items?itemName=shalldie.background

## 使い方
### 拡張機能からbackgroudをインストール

![スクリーンショット 2024-06-27 2.13.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616161/e3572fed-5672-96be-10de-ab962a78f921.png)

### コマンドパレットからUser Settingを開く
コマンドパレットの開き方
Windows/Linux: Shift + Ctrl + P , Mac: Shift + Command + P 

https://qiita.com/wraith13/items/f7c9f60a7fe3b0d1e4aa

### User Settingに設定を記述

``` JSON                    
  "background.fullscreen": {
    "images": ["xxxxxxxx"],
    "opacity": 0.85,
    "size": "900 900",
    "position": "right bottom",
    "interval": 0
  },
```

### `"images": []`

画像のパスを指定します．
URLもしくはファイルパス（`file:///~/~.png`）を指定します
※URLはhttps通信のものを使用
画像を複数指定することも可能

```
"images": [
    file:///xxx/xxx_1.png,
    file:///xxx/xxx_2.png,
    ]
```

### `"opacity": xx.x,`
画像の透明度を設定します．
0.85~0.95がおすすめだそうです

### `"size": "xxx"`

画像のサイズを設定します
CSSの`background-size`に相当
`cover`，`contain`，`900 900`のように設定できます

### `"position": "xxx"`

画像の位置を設定します
CSSの`background-position`に相当
デフォルトは`center`

### `"interval": xxx`

次の画像を表示するまでの時間を指定します（秒数）
`0`の場合，画像は変更されない
画像を複数指定している場合は`interval`の値を設定することで画像の切り替えが可能
chrome検索ショートカットのすすめ

ショートカット術のご紹介です。

# 1 chromeブラウザを開いて、「chrome://settings/searchEngines」を窓に入力しクリックする。
設定画面へ遷移します。

# 2 「サイト内検索」の「追加」をクリックする。

# 3 検索したいサイトのURLの後ろに「%s」を付与する。

## 以下一例

### 名前：Gmail
### ショートカット：m
### URL：`https://mail.google.com/mail/u/0/#search/%s`

## 設定画面
![SCR-20240627-nukc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/9a9299d7-7fc0-aa67-8a0b-1a21e826f203.png)

## 操作例
### 窓に「m」と「空白スペース」入力
### ここにキーワード入れて、ショートカット検索できる。
![SCR-20240627-nunb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/736a4a0a-ca1b-b0ed-809b-ed65429e62fd.png)
ローカルからS3に同期させた体験談

こんにちは！私は駆け出しエンジニアで、現在AWSの勉強中です。最近、AWS S3を使ってローカルファイルを同期させようとした際、初歩的なミスで無料利用枠を超えてしまったので、その体験を共有します。

## 失敗談から学ぶAWS S3の使い方
先日、ローカルからS3にフォルダーを同期させようとしたのですが、操作ミスで無料利用枠を超えてしまいました。AWS S3の無料利用枠は以下の通りです：

12ヶ月間
5 GB の標準ストレージ
20,000 件の Get リクエスト
2,000 件の Put リクエスト

私はAWS CLIを使って同期を行いましたが、メインディレクトリのまま実行してしまいました。その結果、ローカル全てのファイルが同期されてしまいました。

「なぜこんなに時間がかかるんだろう？」と不思議に思っていたところ、やっとのことで異変に気づきました。「ん？すごい数のファイルを読み込んでいるぞ…」と確認したら、案の定、AWSからアラートメールが届きました。

すぐに無料利用枠を確認すると、12ヶ月間は5GBのストレージが無料ですが、1ヶ月に20,000件のGetリクエストと2,000件のPutリクエストを超えると、超過分に対して料金が発生することがわかりました。

今後の対策
次回からは、しっかりと目的のフォルダに移動してから、以下のように aws s3 sync コマンドを使用してS3バケットにファイルを同期させたいと思います！
【python】paddleocrのSSLエラーとプロキシ設定


# 今回のエラー

```python

def tst(img_path):
    ocr = PaddleOCR(use_angle_cls=True, lang='japan')
    result = ocr.ocr(img_path, cls=True)
    for idx in range(len(result)):
        res = result[idx]
        for line in res:
            print(line)

if __name__ == "__main__":

  img_path = 'tst.pdf'
  tst(img_path)

```
を実行で

```python
requests.exceptions.SSLError: HTTPSConnectionPool(host='paddleocr.bj.bcebos.com', port=443): Max retries exceeded with url: /PP-OCRv3/multilingual/Multilingual_PP-OCRv3_det_infer.tar (Caused by SSLError(SSLCertVerificationError(1, '[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: unable to get local issuer certificate (_ssl.c:1006)')))
```
と出る。

PaddleOCRを使うにはモデルが必要で、言語ごとのモデルがなければサーバから落とすという仕様らしいです。
そこにプロキシガードが来てこうなった、と。
要するによくあるプロキシ問題です。

# 解決方法
https://github.com/PaddlePaddle/PaddleOCR/discussions/7024
issueで参考になりそうなやつ、すなわちrequest処理を直々に書き換える処理を採用。

下記、原文ママです。
```
Find site-packages\paddleocr\ppocr\utils\network.py, and modify the following code

def download_with_progressbar(url, save_path):
    logger = get_logger()
    response = requests.get(url, stream=True,proxies={'https':'http://127.0.0.1:4378'})
```
site-packages\paddleocr\ppocr\utils\network.pyにあるdownload_with_progressbarを書き換えるだけ！  
プロキシサーバなんてわかんねーよな人は「verify=False」とか書いとけばいいと思います。

これで動かせば無事モデルを落としてくれます。
モデルなければ落とすという処理なので、一度落としたらあとは元に戻しても問題なさそうです。

ちなみにモデルは下記に保存されました。これは圧縮ファイルですが。
```
C:\Users\wagahaiCAT/.paddleocr/whl\det\ml\Multilingual_PP-OCRv3_det_infer\Multilingual_PP-OCRv3_det_infer.tar
C:\Users\wagahaiCAT/.paddleocr/whl\rec\japan\japan_PP-OCRv4_rec_infer\japan_PP-OCRv4_rec_infer.tar
C:\Users\wagahaiCAT/.paddleocr/whl\cls\ch_ppocr_mobile_v2.0_cls_infer\ch_ppocr_mobile_v2.0_cls_infer.tar
```
windows環境以外はパス違うかもなのでご了承ください。
【mobaXterm】右クリックでペーストできるように設定する

mobaXtermで右クリックしたときにペーストできるように設定します。
メモ程度に記載します。

# 背景

mobaXtermで右クリックすると、Tera TermやPuttyのようにペーストされず、以下のようなメニューが出るときがあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3761799/27a300a6-fbf1-3d84-d9ad-1586ef82d373.png)


もちろんこのメニュー項目の[Paste]を選んでもいいのですが、あまりにも面倒なので右クリックでペーストできるように設定したいと思いました。


# 解決

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3761799/4244f853-199d-03c1-39c1-b3a7f069f33e.png)
上部のメニューバーから[Settings]を選択。

<br>

出てきたダイアログにて[Terminal]を選択し、以下の[Paste using right-click]を有効化して[OK]を押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3761799/046cc6f9-1017-470b-faec-3043c36e8d80.png)


<br>

おわり。
Laravel にてユニットテスト実行時、DBの外部キー制約を無効化する

よく忘れるのでメモ

というか調べていて初めて知りましたが、いつの間にやらLaravel標準で用意してくれていた模様

```php
use Illuminate\Support\Facades\Schema;

// 外部キー制約を無効化
Schema::disableForeignKeyConstraints();
// 外部キー制約を有効化
Schema::enableForeignKeyConstraints();
```


## 以前のやり方

利用しているのが MySQL だったので問題ありませんでしたが、どうやら PostgreSQL では動かないようで…

やはりLaravel標準で用意されていたらそれを使うに限りますね

```php
use Illuminate\Support\Facades\DB;

// 外部キー制約を無効化
DB::statement('SET FOREIGN_KEY_CHECKS=0;');
// 外部キー制約を有効化
DB::statement('SET FOREIGN_KEY_CHECKS=1;');
```


## 改めて使い方

別に setUp() メソッド以外でもいいのですが、各テストファイルで

```php
public function setUp(): void
{
    parent::setUp();

    Schema::disableForeignKeyConstraints();

    // 外部キーを無効化しているうちに
    // Factory() なり insert() なり update() なり save() なりでデータを突っ込む

    Schema::enableForeignKeyConstraints();
}
```


# 参考

というか普通にマイグレーションのドキュメントに書いてあった！

https://readouble.com/laravel/10.x/ja/migrations.html
ファイル形式と区切りについて

# 背景

「タブ区切りのテキストファイル」「タブ区切りのCSVファイル」という文字列に遭遇して、ファイル形式と区切りについて何も分からなくなった。

# 目的

あらゆるファイルの特徴を整理する。

# 各ファイルについて整理
## ①タブ区切りファイル（TSV）

   •    形式: テキストファイル
   •    拡張子: .tsv か.txt   
   •    区切り: タブ（\t）
   •    特徴: 各フィールドがタブ（\t）で区切られている。テキストデータを行と列で整理する際に使用される。
   •    用途: データ交換や一時的なデータ保存に便利。スプレッドシートやデータベースに簡単にインポートできる。

   
   通常、CSVファイルはカンマで区切られた値を含んでいるが、タブ区切りの値を含むファイルもあり、これはTSVと呼ばれることがある。しかし、拡張子は.csvでなくても、.txtや.tsvなど様々な拡張子が使われることがある。
   ファイルの拡張子はファイルの内容を完全には反映していないため、.txtのファイルがタブ区切りのデータを含んでいることは十分にあり得る。(そういうのやめて～🥺）
        

## ②タブ区切りのCSVファイル
   •    形式: テキストファイル
   •    拡張子: .csv
   •    区切り: タブ（\t）
   
CSVは通常はカンマで区切られた値を含むテキストファイルを指すが、実際には異なる区切り文字を使用することができる。タブ文字を区切り文字として使用する場合、そのファイルはしばしば「TSV」と呼ばれるが、拡張子は依然として.csvのままであることが多い。(どっちかにしてくれ～😭)

タブ区切りのCSV（またはTSV）ファイルは、各フィールドがタブ文字（\t）で区切られているため、列がより明確に分かれており、特にフィールドの値にカンマが含まれている場合に便利。多くの表計算ソフトウェアやテキストエディタは、タブ区切りのファイルを開くことができ、適切に列として表示してくれる。

Pythonなどのプログラミング言語を使用してタブ区切りのCSVファイルを読み書きすることも可能。たとえば、Pythonのcsvモジュールを使用してタブ区切りのCSVファイルを操作することができる。


## ③テキストファイル（TXT）

   •    形式: テキストファイル
   •    拡張子: .txt
   •    区切り: 特定の区切り文字を使用しない
   •    特徴: プレーンテキストで書かれたファイル。特定の区切り文字を使用せず、自由な形式でデータを記述可能。
   •    用途: メモ、ログ、設定ファイルなど、構造化されていないデータを保存するのに使用。

## ④CSVファイル（Comma-Separated Values）

   •    形式: テキストファイル
   •    拡張子: .csv   
   •    区切り: カンマ（,）
   •    特徴: 各フィールドがカンマ（,）で区切られている。行ごとにレコードがあり、列ごとにフィールドが存在する。
   •    用途: データのやり取りや保存に広く使用されている。スプレッドシートやデータベースと相互運用性が高い。

## ⑤Excelファイル（XLSX）

   •    形式: バイナリファイル
   •    拡張子: .xlsx等   
   •    区切り: セル
   •    特徴: Microsoft Excel用のファイル形式。複数のワークシート、セルの書式設定、数式、グラフなどが含まれる。
   •    用途: なんでも。方眼紙にもできる。円グラフも描ける。


# 感想

整理しがいがあった✌️

# 参考

https://blog.nyanco.me/about-tsv-csv-file/
Android タブレットで Web 画面で作った UI ページを表示する

Web 画面で UI を作り、タブレット上の Web ブラウザで表示する。

アプリのように見せるためにいろんな Tips を組み合わせ。

今まで iPad でやってきたけれども、Android はどうかな?



# 環境

旧い機種を再利用

- Fujitsu arrows Tab F-02K
- Android バージョン 9




# デベロッパーモードにする

「設定」-「システム」-「タブレット情報」-「ビルド番号」を7回押す

# 充電中にスリープモードにしない

「設定」-「システム」-「詳細設定」-「開発者向けオプション」-「スリープモードにしない」


# Webページのショートカットをホーム画面に配置

Chrome の右上のメニューから「ホーム画面に追加」-「ショートカットの作成」

PWA(プログレッシブウェブアプリ)に対応しているWebページの場合は、「ショートカットの作成」と共に「インストール」も表示される。「インストール」した場合は、ブラウザのタブやツールバー(アドレスバーや戻る進むボタンなど)が表示されない。

# アプリっぽく表示

PWAのようにアプリっぽく表示したいいけれども LAN 内で http: アクセスをするような場合、Webページを少し縦長にしておいて Chrome で表示、下にするクロールするとブラウザのタブやツールバーが表示されなくなる。

しかしながら PWA の場合も含め、スクリーンバーやナビゲーションバーは依然として表示される。

# スクリーンバー、 ナビゲーションバーを表示させないようにするには?

全画面対応ブラウザアプリをインストールかな?


# 操作ミスを防ぐ

Screen Pinning 機能を使って別アプリに簡単に遷移させない方法。

「設定」-「セキュリティと位置情報」-「詳細設定」-「利用アプリの固定」を ON 

ブラウザを起動しておき、タスクリストを表示してブラウザタスクに表示されているピンアイコンを押す
【Progate】Gitコース 学習内容まとめ

## 自己紹介
29歳。文系卒。新卒入社でWebディレクターを２年半経験。
その後は番組の字幕制作の仕事に従事。
現在はエンジニア転職を目指して勉強中。

## Gitの印象
ソースコードの変更履歴を保存したり、過去の状態に復元できたりする。チーム開発には不可欠。

## 使い方
### Gitの準備
~~~terminal
$ git init
~~~

### 共同開発の流れ
add(ファイル追加)
　　　↓
commit(記録)
　　　↓
push(アップロード)
　　　↓
pull(ダウンロード)



### 共有するファイルを選択
~~~terminal
$ git add ファイル名
~~~

### 記録(コミット)
__必ず__ 何をどう調整したのかメッセージを残そう(チームや未来の自分を助けることになる)。
~~~terminal
$ git commit -m "メッセージ"
~~~

### リモートリポジトリの登録
リポジトリはファイルを補完する場所。ここにファイルをアップロード/ダウンロードして共有する。

※リポジトリ名は"origin"とすることが多い
~~~terminal
$ git remote add リポジトリ名 リポジトリURL
~~~

### アップロード(プッシュ)
~~~terminal
$ git push リポジトリ名 master
~~~

### ダウンロード(プル)
~~~terminal
$ git pull リポジトリ名 master
~~~

## ファイルの見分け方
### 変更内容(未add)の把握
追加(変更)されたコードが緑色で表示される。変更前のコードは赤色で表示される。問題なければgit addしよう。
~~~terminal
$ git diff
~~~

### add済ファイルの確認
ファイル名が表示される。未addは赤色、add済は緑色。
~~~terminal
$ git status
~~~

### コミットメッセージの確認
変更内容も確認したい場合は、末尾に"-p"をつける。上下キーで表示範囲を変更可能。"q"で終了する。
~~~terminal
$ git log
~~~



## まとめ
特に新しい発見はなく、便利だなぁというところ。
GitとGithubの違いを知りたい(勉強しろ)。
VSCで開発するときの使い方を別途身に着ける必要がありそうです。

今後も継続して学習を続けていきたいと思います。

[Progate](https://prog-8.com/)
Rubyでオウム返しプログラミングの練習…

お久しぶりです。Javaの勉強し直してます。
Javaでオウム返ししろと言われましたが、手癖でRuby…

※注意事項。
→が、実行結果です。

```ruby
cat oumu.rb
→puts gets.to_s

ruby oumu.rb
→1
→1
```

では、この辺で…
Llama-3-ELYZA-JP-8B を GPT3.5 と比較して使ったらすごかった

# Llama-3-ELYZA-JP-8B すごいんですけども

こんにちは、

昨日発表された、オープンソースLLM **Llama-3-ELYZA-JP-8B**　を早速つかってみました＆デモ公開しました

70Bモデルのほうは「GPT-4」を上回る性能とのことで、8Bモデルも相当期待！ということで、つかってみたら、本当に賢かったです！すごい。

# デモ公開しました

自分でさわってみたい、という方向けに、　**Llama-3-ELYZA-JP-8B**　とチャットできるデモを当社Playgroundに公開しました

せっかくなので、 GPT-3.5 と比較できるようにしました。

左側に Llama-3-ELYZA-JP-8B、右側が GPT-3.5 になっています。(PC専用です）

https://chatstream.net/?ws_name=chat_app&mult=1&ontp=1&isync=1&model_id=llama_3_elyza_jp_8b&model_id=openai_gpt_3_5_175b


# 動画にしました

急いでる方向けに、３分動画にしました（後半は当社Promotion込みです^^;）

<iframe width="1061" height="597" src="https://www.youtube.com/embed/5L7ruhPS1yc" title="ChatStream で Llama-3-ELYZA-JP-8B を使ってみました。GPT3.5との比較も。" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>


# 使い方

Llama-3 ベースということで、 vLLM との相性もバッチリでしたので、以下のように、OpenAI の APIサーバーとして使ってみました。

↓たったこれだけです。簡単ですね。

```
python -m vllm.entrypoints.openai.api_server \
--model elyza/Llama-3-ELYZA-JP-8B-AWQ \
--port 8000 \
--host localhost \
--quantization awq
```

# WebUI は ChatStream を使いました。

WebUIは ChatStream というプロダクトを使用しています。

ChatStreamは私の所属するベンチャー企業で開発している LLM実行エンジン＋チャットUIです。簡単に本格的な商用LLMサービスを作ることができます。

（こちらは有償SDKになるのですが、無償のWebUIとして、同じ会社の人がつくった 　[ChatUX](https://qiita.com/riversun/items/279c1dd5ab40a1c8c8cf) というライブラリでもお手軽にChatUIを作ることができます。）

# 次は 70B に挑戦したい！

私はどちらかというとハードウェアより（GPUクラスター構築とか、GPUの冷却システム組んだりとか）の仕事をしていますが、GPUクラスタ組んで、70Bのほうも試してみようと思います！

本当に GPT-4 超えなのか、楽しみです！
AWS Security HubにSnykの検出結果を連携してみる

# 1. はじめに
AWS Security Hubは、AWS環境のセキュリティ状況を一元的に管理するためのサービスです。
Snykは、アプリケーションの脆弱性を発見し修正するためのセキュリティツールです。
それぞれのサービスを使ったことはあるものの、連携できることは知らなかったので試してみました。

# 2. 前提条件
- AWSアカウント
  - AWS Security Hubが有効化されていること
- Snykアカウント
  - SnykとGitHubアカウントを連携済み
  - 無料アカウントでは利用NGでしたので、有償版が必要そうです。
今回はSnykの無料トライアル期間で検証しています。

# 3. SnykとAWS Security Hubの連携設定

### AWS Security Hubの設定

- AWS Security Hubの「統合」から、Snykを検索して、「結果を受け入れる」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28783/2951f48b-6e15-6916-412a-65e89eb078ca.png)

- 「結果を受け入れる」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28783/b16cebde-99d2-cbd5-16c7-fa013dcb1325.png)

- Security Hubはこれだけです！
ステータスが「結果を受け入れます」になってます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28783/d9d8c8da-957d-bfbb-f92c-1d5d3870caf1.png)

### Snykの設定

- Snykダッシュボードに移動
- 「Integrations」タブをから「AWS Security Hub」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28783/ce8b7c19-b1e8-78fc-6684-0429caa07892.png)

- Integration name,AWS account ID,AWS Reagion を入力して、Add integrationをクリック。
![スクリーンショット 2024-06-25 18.13.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28783/6965bd50-6508-59c8-f0a0-3d8fc0b98ece.png)


- Authorize With Snyk を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28783/49972959-7254-d36d-edc8-a7dbb0fe5ae7.png)

- 「Grant app access」 をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28783/1db6fd4d-95d2-b98b-b7d8-4d22e196ae7f.png)

- 連携に成功し、ステータスが「✓」になっています
![スクリーンショット 2024-06-25 18.16.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28783/d96a25a7-9d41-48e2-f625-372ecef849f8.png)

### Security Hubで連携結果を確認

※ 30分くらい待っても、連携されないなーと思ってたところ、以下注意書きを発見。一度プロジェクトを削除して、再度プロジェクトを有効化したところ、一瞬で連携されました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28783/f382aab1-d403-4d16-3daf-7b68bf9bbd79.png)

- Security Hubでの結果を見てみると↓会社名Snyk、製品名Snykで連携されてます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28783/3adf3cf1-21aa-b3f8-a49b-e2c5eff5e8b6.png)

# 4. 動作確認
### Snykで検出された問題を解決してみる
- Snykの自動修正機能で、問題を解決してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28783/63949cfe-fb08-8f86-aad6-b1b53eb66a20.png)

- AWS Security Hubで自動的に更新されていることを確認。レコードが「ARCHIVE」に自動で更新されていました！
![スクリーンショット 2024-06-27 14.21.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28783/cf22ab4f-7652-5c48-d550-12d210a7ddc5.png)

# 5. まとめ
難しい設定もなく、画面をポチポチするだけで連携をすることができました！
次回はSnyk IaCやSnyk Containerで検出された結果がどう連携されるかを見てみます。

# 参考資料
https://docs.snyk.io/integrate-with-snyk/event-forwarding/aws-security-hub
9次式 x9+x3+x2+x+1の因数分解「PASSLABO様の【伝説の京大模試】因数分解せよ」をWolframAlphaとgoogleとChatGPTとsympy でやってみたい。 


・ChatGPT-3.5で実験しました。
・WolframAlphaでグラフがでます。

# オリジナル
＞9次式の因数分解
・PASSLABO 様 (0:00〜8:26) 

https://youtu.be/sscKcUVp2G8

# WolframAlphaで 
・WolframAlphaでグラフがでます。

https://www.wolframalpha.com/input?i=x9%2Bx3%2Bx2%2Bx%2B1&lang=ja

別の形
(x^4 + x^3 + x^2 + x + 1) (x^5 - x^4 + 1)

# googleで 

https://www.google.com/search?q=x%5E9%2Bx%5E3%2Bx%5E2%2Bx%2B1&rlz=1CAUHAM_enJP1105&oq=x%5E9%2Bx%5E3%2Bx%5E2%2Bx%2B1&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIICAEQABgIGB4yCAgCEAAYCBgeMggIAxAAGAgYHjIICAQQABgIGB4yCAgFEAAYCBgeMggIBhAAGAgYHjIICAcQABgIGB4yCAgIEAAYCBgeMggICRAAGAgYHtIBCDQzMzBqMGo3qAIIsAIB&sourceid=chrome&ie=UTF-8

解
\(\left(x^{4}+x^{3}+x^{2}+x+1\right)\left(x^{5}-x^{4}+1\right)\)        

グラフもでます。

# ChatGPT-3.5先生へ(1回目) あきらめました。
```
x^9+x^3+x^2+x+1 を因数分解せよ(ただし整数係数)
```
```
違いませんか
```
```
違いませんか
```
？？？サイクロトミック多項式(本ページ最後で)を使用して正しい因数分解を行います。
```
違いませんか
```
あきらめました。

# ChatGPT-3.5先生へ(2回目) あきらめました。

```
x^9+x^3+x^2+x+1 を因数分解せよ(ただし整数係数)
因数分解した式の左辺から右辺を引いて下さい。
```
あきらめました。



# ChatGPT-3.5先生へ(3回目) あきらめました。
```
x^9+x^3+x^2+x+1 を因数分解せよ(ただし整数係数)
因数分解した式の左辺から右辺を引いて展開したら、0の式にして下さい。
```

```
違いませんか
```
あきらめました。

# ChatGPT-3.5先生へ(4回目) あきらめました。
```
x^9+x^3+x^2+x+1 を因数分解せよ(ただし整数係数)
sympyのfactorで
```

```
結果は
```
あきらめました。

# ChatGPT-3.5先生へ。sympyで
factor() takes a polynomial and factors it into irreducible factors over the rational numbers. For example:
https://docs.sympy.org/latest/tutorials/intro-tutorial/simplification.html#factor
```
x^9+x^3+x^2+x+1 を因数分解せよ(ただし整数係数)
sympyで
```
```python
from sympy import symbols, factor

x = symbols('x')
polynomial = x**9 + x**3 + x**2 + x + 1

factored_polynomial = factor(polynomial)
print(factored_polynomial)
```
vscodeで
```
(x**5 - x**4 + 1)*(x**4 + x**3 + x**2 + x + 1)
```


# sympyで(オリジナル 様の方法を参考に)
??? 勉強中です。???

# いつもの? sympyの実行環境と参考のおすすめです。
[(テンプレート)](https://qiita.com/mrrclb48z/items/00dd08b0317069be9342)

・以下ができたら、助かります。指定と全部です

https://qiita.com/mrrclb48z/items/555d85face87552c34fb

https://qiita.com/mrrclb48z/items/5f57eac92aaca30e85c0

# いつもと違うおすすめです。

https://www.google.com/search?q=%22cyclotomic+polynomial%22&rlz=1CAUHAM_enJP1105&oq=%22cyclotomic+polynomial%22&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIJCAEQABgTGIAEMgkIAhAAGBMYgAQyCQgDEAAYExiABDIJCAQQABgTGIAEMgkIBRAAGBMYgAQyCQgGEAAYExiABDIJCAcQABgTGIAEMgkICBAAGBMYgAQyCQgJEAAYExiABNIBCTEwMjQwajBqN6gCCLACAQ&sourceid=chrome&ie=UTF-8

https://www.google.com/search?q=%E2%80%9D%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AD%E3%83%88%E3%83%9F%E3%83%83%E3%82%AF%E5%A4%9A%E9%A0%85%E5%BC%8F%E2%80%9D&rlz=1CAUHAM_enJP1105&oq=%E2%80%9D%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AD%E3%83%88%E3%83%9F%E3%83%83%E3%82%AF%E5%A4%9A%E9%A0%85%E5%BC%8F%E2%80%9D&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIKCAEQABiABBiiBDIKCAIQABiABBiiBDIKCAMQABiABBiiBDIKCAQQABiiBBiJBTIKCAUQABiABBiiBNIBCTEzNTI0ajBqN6gCCLACAQ&sourceid=chrome&ie=UTF-8
pythonのスタイルガイド

変数定義（snake_case）

	•	変数の後には1つのスペースを入れる。
	•	行の最後にスペースを入れない。
	•	宣言後変更しない変数は大文字のスネークケース（例：円周率など PI）を使用する。

関数（snake_case）

	•	引数の「=」にはスペースを入れない。
	•	引数が多い場合は、引数の先頭に合わせて改行する。
	•	関数間は2行空ける。

演算子

	•	演算子の周りには1つのスペースを入れる。ただし、演算子の優先順位がある場合はスペースを入れない。

コンマ

	•	コンマの後にはスペースを入れる。ただし、その後に閉じカッコが来る場合はスペースを入れない。

コンテナ

	•	要素を並べる時にコンマで終えることが可能。そうすることで簡単に行を追加でき、gitなどのバージョン管理で差分にならない。
	•	この方法を用いる場合、閉じカッコは次の行にすること。

クラス（CamelCase）

	•	メソッド間は1行空ける。

改行の仕方

	•	バックスラッシュ（\）で区切る。
	•	演算子を行の先頭にして改行する。

インポート（import）

	•	import 文はファイルの一番先頭に書く。
	•	インポートの順番は以下の通り：
    	1.	標準ライブラリ
    	2.	サードパーティライブラリ
    	3.	自分たちのライブラリ
    	4.	ローカルライブラリ
	•	それぞれのグループの間に1行空ける。

コメント

	•	# の後に1スペースを空ける。
	•	なぜそのコードを書いたかをコメントに記述し、理由と必要性を説明する。