OmniAICreator/Qiita-1.07M huggingface dataset:
SPSS Modeler ノードリファレンス 1-7 拡張のインポート

# 1-7 拡張のインポートノード[入力タブ]
<img width="200" alt="194-161拡張のインポート.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/c4ade586-530d-6cc8-f0d6-e1646884b1d6.png">

## 1.ノードの目的(拡張ノード共通)
SPSS ModelerにないアルゴリズムなどをPythonまたはRから呼び出して連携する。

![スクリーンショット 2022-05-08 14.36.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/e8850631-b7e3-dcd1-78f0-60cf7003a24c.png)

＊ノードリファレンスの拡張ノード５つの記事は全て共通です。


## 2.解説動画(拡張ノード共通)

#### Rによる地図連携（115秒）
<iframe width="560" height="315" src="https://www.youtube.com/embed/9lMNDNIAvIk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

#### PythonのLightGBM連携（185秒）
<iframe width="560" height="315" src="https://www.youtube.com/embed/0DPkHN4tero" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## 3.クイックスタート(拡張ノード共通)

以下の記事で詳しく解説しています。

https://www.ibm.com/blogs/solutions/jp-ja/learn-modeler-05/

https://qiita.com/kawada2017/items/0bb68e0b577e02bb8c6a

https://qiita.com/kawada2017/items/04f525727725d199723c

## 4.Tips(拡張ノード共通)

#### Pythonの自然言語処理を呼び出す例

https://community.ibm.com/community/user/blogs/yoichiro-nishimaki/2025/01/24/push22

#### 拡張ノードとカスタムノードの違い（2021年SPSS春ユーザー会HONDA様発表資料）

https://speakerdeck.com/jpspss/onewex-spsslian-xi-niyorutekisutofen-xi-falsekuo-zhang?slide=13

## 5.参考情報

#### ノードのヘルプ

https://www.ibm.com/docs/ja/spss-modeler/18.3.0?topic=nodes-extension-import-node

#### SPSS Modeler 逆引きストリーム集（データ加工）

https://qiita.com/416nishimaki/items/4bf813e6cba84b2a1008

#### SPSS Modeler ノードリファレンス目次

https://qiita.com/416nishimaki/private/503037195081d3323eee
Googleのソフトウェアエンジニアリング - 知識共有

https://www.oreilly.co.jp/books/9784873119656/?msclkid=01a60893cf2e11ec8e6e10952d721897

Googleのソフトウェアエンジニアリングの3章の読書ノート
ドキュメントについての考え方、心理的安全性、チームが大きくなった時のナレッジ共有、メンター制度について、Googleの文化と考え方について書かれている。
「知識をスケールさせる」の章は、Googleの社内ツールの使われ方の話もでてきていて面白かった（今は広く使われているGmailも元はGoogleの社内ツール）。

> あなたの所属する組織は、インターネット上にいるその辺の無作為に選んだものなどより、あなたの問題領域をよく理解している。それに組織は、組織全体の問題の大半に対して答えることができて然るべきである。

上記の目標を達成するには

- 質問する、知っていることを書き留める
- 情報を構造化する
- 上記のことを行う文化（心理的安全性）を作る

ことが必要。Googleではそれらをどのように考えて、仕組みを作っているのかが書かれている。

## 学びを阻む課題

組織全体での知識の共有はとても難しいことであって、Googleでもそうした課題はいくつもあったらしい。
その中でも根本原因となるのが**心理的安全性の欠如**、**情報の孤島群**と言われている。
情報の孤島群とは具体的には、組織内でのコミュニケーションが少なかったり共有リソースを活用することのない状態の組織で各グループが自前の物事の進め方を持つようになることの事を言う。
これら二つの状態によって以下のような弊害に陥ることがある。

##### 情報の断片化
各孤島が、より大きな全体像の不完全版を持つ。
局所最適化されていて再現性のない状態になる。
##### 情報の重複
各孤島で自前の方法を再発明している
##### 情報の[スキュー](https://ja.wikipedia.org/wiki/%E6%AD%AA%E5%BA%A6?msclkid=6471f112cf3111ec9059ffea95eebece)
それぞれの孤島が自前の方法を持っていて、互いに競合したりしなかったりするかもしれない。
##### 単一障害点
決定的な情報が一人の人物からのみ得られる場合に生じうるボトルネック。これはバス係数に関連している。
##### 全か無かの専門知識
「全て」を知っている人と初心者の二極化すること
##### 猿真似
理解せずに物まねすること
コピペは悪くないが、理解していないコードをそのまま使うのは猿真似
##### 幽霊の出る墓場
ブラックボックス化していて迂闊に触れないソースコード

## 舞台を整える：心理的安全性
健全な環境では人は、質問をしたり間違ったり新しい物事を気楽にできると感じる。心理的安全性こそが効果的なチームを構成する最も大切な要素と言われている。

## 知識をスケールさせる
知識をスケールさせる段階として

- 自身の知識を発展させる
- 質問をスケールさせる
- 自分の知識をスケールさせる
- 組織の知識をスケールさせる

といった段階がある。
DockerでVimがインストールできない

自分用備忘録です。
## 起きたこと
Dockerfileでvimとその他もろもろをインストールしようとすると、できなくなった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2659078/1c021f40-71bf-55c4-821f-96cdea3440ba.png)
ファイルが見つかりません的なことを言ってる…？なんでなんで～？？
↓Dockerfileはこれ
```
FROM --platform=linux/x86_64 ubuntu:20.04

RUN apt-get update
RUN apt-get install -y locals vim curl tmux tcpdump iputils-ping netcat cron less telnet python3
RUN yes | unminimize
RUN locale-gen ja_JP.UTF-8
ENV LANG=ja_JP.UTF-8
ENV TZ=Asia/Tokyo
WORKDIR /linux-study
```

## 解決法
localsをインストールする前に、もう一度apt-get updateをするといけた（apt-get updateをしてくださいというエラーメッセージがでてた）
↓に直したらいけた
```
FROM --platform=linux/x86_64 ubuntu:20.04

RUN apt-get update
RUN apt-get install -y locales
RUN apt-get update
RUN apt-get install -y vim curl tmux tcpdump iputils-ping netcat cron less telnet python3
RUN yes | unminimize
RUN locale-gen ja_JP.UTF-8
ENV LANG=ja_JP.UTF-8
ENV TZ=Asia/Tokyo
WORKDIR /linux-study
```
【chakra-ui】謎のマージンが降りてくる

# 謎のマージンが降りてくる

## 事象

Stackの子要素にマージンを当てたいが・・・

```tsx
export default function App() {
  return (
    <VStack bg="grey">
      <Box h={50} w={100} bg="pink" marginLeft={10}>
        A
      </Box>
      <Box h={50} w={100} bg="pink" marginLeft={10}>
        B
      </Box>
      <Box h={50} w={100} bg="pink" marginLeft={10}>
        C
      </Box>
    </VStack>
  );
}

```

謎のcssがあたってくるので、想定通りのマージンを当てることができない

https://codesandbox.io/s/no-margin-chakra-forked-yc1csz?file=/src/App.tsx:709-1024

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/fd2af2f5-87c5-8a79-60bc-6e97cd59145c.png)

`*:not(style)~*:not(style)`というスタイルが打ち消しのスタイルを持っており、それを当てない場合はコード通りのスタイルがあたる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/511ece40-11c6-25bd-5a31-e83c18992a56.png)

## 

これはChakraのIssueにも取り上げられています。

https://github.com/chakra-ui/chakra-ui/issues/2578

ここでのコメントにある通り、Stackコンポーネントの目的上、正しい挙動のようです。
>しかし、設計システムの観点からは、現在の動作は正しいです。このStackコンポーネントは、「どのコンポーネントが空白を所有しているか」という問題を解決するためのアプローチです。
https://github.com/chakra-ui/chakra-ui/issues/2578#issuecomment-753468114

Stackは子要素のスペースを管理している（責務がある）ので、Stackに設定されたspacingが優先される。

```tsx
    <VStack>
      <A />
      <B />
      <C marginTop="4" />
      <D />
    </VStack>
```

ではなく

```tsx
    <VStack>
      <A />
      <VStack spacing="4">
        <B />
        <C />
      </VStack>
      <D />
    </VStack>
```

が正しい。

これらを踏まえると、個人的にはStackのspacingで混乱しそうなコンポーネント（≒階層が深いコンポーネント）はStackを使わずに、margin/paddingで実装していくほうが混乱を招かないので、Boxで階層構造を作り、階層が1つの見通しのよいコンポーネントでStackのspacingを使用していくのが直感的かなと感じています。
DTLS1.3で何が変わったか

# はじめに

[RFC9147](https://datatracker.ietf.org/doc/rfc9147/)([日本語](https://tex2e.github.io/rfc-translater/html/rfc9147.html)) : DTLS1.3が発行されたので、1.3で何が変わったのか少しまとめてみました。なお、RFCの "12.  Changes since DTLS 1.2" にも変更点のまとめがあります。また、DTLSの一般的な説明については[「組込み向けDTLSを試してみる」](https://qiita.com/kj1/items/2ada57a3690274def706)の記事も参照してください。

一口で言うと、DTLS1.3はTLS1.3の成果を取り込んだことで、セキュリティ上の改善とともにデータグラム向けのよりスループットの高いセキュリティプロトコルになったと言えそうです。

プロトコル仕様の位置付けの観点からは、DTLS1.2はDTLS1.0(*)からの差分として定義されたのに対して、DTLS1.3は(DTLS1.2ではなく)TLS1.3からの差分として定義されている点がこれまでと大きくことなっています。

*: DTLS1.1は存在しません

# 1. ハンドシェーク

ハンドシェークプロトコルは大きく変わりました。TLS1.2から1.3への更新と同じようにTLS1.3流のフルハンドシェーク、ClientRetryRequest、PSK(DHあり、なし)、Early Dataがほぼそのまま導入されています。ただし、もちろんこれまでのDTLSと同様にTCP上ではなくそれらをデータグラム上で実現します。

それに伴って、リプレイ攻撃対策のCookieもHello Verify Requestではなく、TLS1.3流のHello Retry Requestによって実現するようになりました。

これらによって、クライアント・サーバ間のメッセージの往復回数が削減されスループットの向上が期待できます。これらはUDPのようなデータグラムの上で実現するのでTCPの3Wayハンドシェークのような接続プロトコルも不要です。

ACKメッセージが追加され、パケットロスはタイムアウトを待たずに早期に検知できるようになりました。

セキュリティ的観点からは、これもTLS1.3と同様に、鍵交換が(EC)DHEだけに絞られ、古く弱い暗号アルゴリズムは廃止、AEADのみに整理されました。

ServerHello以降のハンドシェークは暗号化され、秘匿性の向上も期待できます。


# 2. DTLSレコード

DTLSレコード層には、DTLS1.2と互換のフォーマットに加えて、状況に応じたフォーマットが柔軟に選択できるようなマルチプレクシングが導入されました。

今までドラフトだった接続ID(Connection ID)が正式に追加されました。これにより、移動体の通信などのルーティングの動的な変更に対応できるようになりました。

# 3. アプリケーション・レコード

一方、アプリケーションメッセージの扱いについては、特段の変更はありません。これまで通りデータグラム層の特性(順序性の不保証、パケットロスなど)はそのままアプリケーション層に引き継がれ、UDPなどデータグラム上のアプリケーションはそのままの挙動を維持することになります。


# 4. DTLS1.2/1.3 比較表

|レイヤー/<br>フェーズ|項目|DTLS1.2|DTLS1.3|
|---|---|---|---|
|ハンド<br>シェーク|暗号<br>スイート|TLS1.2相当|TLS1.3相当<br>弱い暗号アルゴリズムの削除<br>(EC)DHEのみに<br>AEADのみに|
||シーケンス|TLS1.2相当|TLS1.3相当のハンドシェーク<br>- フルハンドシェーク<br>- ClientRetryRequest<br>- PSK(DHあり、なし)<br>- Early Data|
||Cookie|Cookie = <br>HMAC(Secret, Client-IP, Client-Parameters)<br>Hello Verify Request必ず必要|HelloRetryRequestによるCookie要求|
||タイム<br>アウト|デフォルト:<br>初期1000mSec。タイムアウトごとに倍に<br>最大60Sec<br>アプリケーションにより適宜変更可|ACKメッセージの追加(次項目参照)|
||パケット<br>消失|タイムアウトによる検出<br>期待する応答メッセージが一定時間までに受信<br>されなかった場合、メッセージを再度送信|ACKメッセージの追加<br>タイムアウト前に消失を検知|
||パケット<br>順序|message_seqで管理<br>再送ではインクリメントされない<br>Renegotiationでリセット|message_seqで管理<br>再送ではインクリメントされない<br>ポストハンドシェーク中も<br>リセットされない|
||大きい<br>パケット||fragment_offset<br>fragment_lengthで管理|追加<br>最大連続送信パケット:10レコード|
|ポスト<br>ハンド<br>シェーク|||TLS1.3相当<br>- New Session Ticket<br>- Key Update<br>- Client Authentication<br>DTLS1.3固有<br>- New Connection ID<br>- Req Connection ID|
|アプリ<br>ケーション<br>データ|パケット<br>消失|Don't Care|変更なし|
||パケット<br>順序|Don't Care|変更なし|
||パケット<br>サイズ|Don't Care|変更なし|
||フロー制御|なし|変更なし|
|DTLS<br>レコード|レコード<br>ヘッダー|TLS1.2のレコードヘッダに<br>epoch<br>sequence_numberを追加|可変長、複数フォーマット|
||フラグメント|ハンドシェーク中<br>フラグメント管理<br>一つのDTLSは一つのデータグラムに|変更なし|
||接続ID|ドラフト|複数CID<br>ポストハンドシェークで変更可|
||レコード<br>順序|sequence_numberとepochで管理<br>sequence_numberは新epochでリセット|基本的に踏襲<br>強化:[sender]_sn_keyにて暗号化<br>追加<br>rekeyでインクリメント|
||PMTU|基本的には感知せず。ただし、<br>- DTLSレコードのサイズ<br>- ICMP<br>- DTLSハンドシェークメッセージのサイズ|変更なし|
||不正<br>レコード|無視|変更なし|
||AEAD<br>制限長|定義なし|例: AEAD_AES_128_CCM: 2^23|
Ruby メソッドについて

今回はメソッドについて学んでいきます。

Rubyでいうメソッドとは一体なんなのでしょうか？

前回、オブジェクト、クラス、インスタンスについて学習しました。
ざっくりと復習していきましょう。

Rubyの世界では全てがオブジェクトであり、オブジェクトとは「もの」のことです。
言葉で表現できるものは全て「もの」になります。
例えば、猫、人間、時間などなど、、

またクラスとインスタンスは何かというと、
例えば、僕たちは人間クラスに属しており、人間クラスのインスタンスオブジェクトです。
ハンバーグは食べ物クラスに属しており、食べ物クラスのインスタンスオブジェクトです。

Rubyの世界で言うのならば、
"あああ"はStringクラスに属しおり、Stringクラスのインスタンスオブジェクトです。
 123 はIntegerクラスに属しおり、Integerクラスのインスタンスオブジェクトです。

では今回のメソッドとは一体なんなのでしょうか？
メソッドとはオブジェクトがなんらかの仕事や振る舞いをすることです。
例えば、「人間の僕はqiitaの記事を書く能力を持っている。」
と言うのはこの「qiitaの記事を書く。」と言う部分がメソッドに当たります。

```
class 人間
  def 書く（qiitaの記事）
　  puts "朝から、頑張ってます"
  end
end

僕 = 人間.class
#僕は人間のクラスに属しているので、上記のメソッドを使える
```

実際にコードで表すとこんな感じです。
メソッドのイメージを掴めましたでしょうか？
オブジェクトに対して何らかの「仕事をすること、振る舞いをすること」
がメソッドです。
完璧にしていきましょう。
Experience cloud deployment problems


```
sfdx force:mdapi:deploy -l RunLocalTests -c -d ./toDeploy -u user@example.com -w 10 
```

エラーメッセージ
Your site needs a route with route type detail-0pr

この問題は、ターゲット組織とソース組織で有効になっている機能の不一致が原因のようです。

興味深いことに、ターゲット組織（Enterprise Edition）ではアクションプランが有効になっていますが、ソース組織（スクラッチ組織）では有効になっていません。  

 

ソース組織は、現在有効になっている次の機能を備えたEnterprise EditionScratchOrgです。

1. EnableSetPasswordInApi
2. PersonAccounts
3. コミュニティ
4. CustomerCommunityPlusLogin
5. CustomerCommunityLogin
6. ServiceCloud
7. PublishExpBuilderBasedSna
8. PublishAuraExpBuilderBasedSna
リクエストに応じてIndustriesActionPlan機能をオンにして、いくつかのテストを実行し、結果を共有します。

 

一般的に言って、依存関係が欠落しているためにターゲット組織が展開を拒否した場合、依存関係を含むスクラッチ組織機能を指定したとしたら、それは本当に素晴らしいことです。

[Experience cloud deployment problems](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000H02gP)
Flutterで時間経過のテストを行う

[fake_async](https://pub.dev/packages/fake_async)は、時間の経過監視などの非同期処理のテストを行うためパッケージです。ログを日付でローテションさせる[rotation_log](https://pub.dev/packages/rotation_log)パッケージを作ったのですが、そこでテストをしていて、少しはまったので、メモ代わりに書きます。

### 日付を使ったテスト

時間経過をテストするためには、[clock](https://pub.dev/packages/clock)のパッケージを使って時間の取得する部分を書き換えます。標準のDateTimeから、clockに変更します。

```dart
final now = DateTime.now()
//    ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
final now = clock.now() 
```

テストではFakeAsyncの`initialTime`に初期値を設定すると、run内の関数ブロックでは、clock.now()で定義した日付が返るようになります。

```dart
FakeAsync(initialTime: DateTime(2000, 1, 1)).run((_) {
    final current = clock.now();
    print(DateFormat.yMd().format(current)); // 1/1/2000 
});
```

初期値を変えるだけでなく、時間を経過したテストもできます。FakeAsyncのインスタンスが渡されるので、日付の進行をテストできます。

```dart
FakeAsync(initialTime: DateTime(2000, 1, 1)).run((fake) {
    print(DateFormat.yMd().format(clock.now())); // 1/1/2000 
    fake.elapse(const Duration(days: 1)); // 1日進める
    print(DateFormat.yMd().format(clock.now())); // 1/2/2000 
});
```

### 非同期処理でfake_asyncを使いたい

ここからが本題です。ファイルを開いたり、ディレクトリのパスを読み取るなど非同期で行われる処理があります。今回、ログのローテーション処理のテストで、時間を経過していたら、ファイルを整理するテストを書きたかったのですが、うまくいきませんでした。

以下の場合、処理は返ってきません。fake_asyncは非同期処理を書き換えてテストするためのパッケージなので、正規の処理を実行できませんでした。
```dart
test('microtask', () async {
      await FakeAsync().run((_) async {
        final v = await Future.microtask(() => 1);
        expect(v, 1);
      });
    });
```

FakeAsync内はasyncを使わず、そのまま流れるように処理を書きます。
```dart
test('microtask', () {
      FakeAsync().run((fakeAsync) {
        var v = 0;
        Future.microtask(() => v = 1);
        fakeAsync.flushMicrotasks();
        expect(v, 1);
      });
});
```
flushMicrotasksを呼び出すと、積まれているmicrotaskを全て消化するように処理が走ります。この辺りいろんなパターンで、[テスト](https://github.com/dart-lang/fake_async/blob/master/test/fake_async_test.dart)が書かれているので、参考になると思います。

### 非同期処理の中で時間経過だけをテストしたい場合

今回、現在の時間の経過だけできればよかったので、fake_asyncは不要でした。clockのwithClock関数を使います。Clockに時間を返す関数を定義するのですが、ここに差分を計算した日付を返すようにすれば、時間の経過をwithClock内で適用できます。

fake_asyncのパッケージ内で同じような処理があり、参考にしています。

```dart
final now = DateTime(2000, 1, 1);
var elapsed = Duration.zero;
final _clock = Clock(() => now.add(elapsed));

await withClock(_clock, () async {
  print(DateFormat.yMd().format(clock.now())); // 1/1/2000
  elapsed = const Duration(days: 2);
  print(DateFormat.yMd().format(clock.now())); // 1/3/2000
});
```

fake_asyncでは時間を経過させると、Timerの処理も進めるようになっています。状況に応じて使い分けたいと思います。

```dart
test('Timer', () {
  FakeAsync().run((fake) {
    Timer(const Duration(seconds: 30), expectAsync0(() {}));
    fake.elapse(const Duration(seconds: 30));
  });
});
```
【Python】 MQTTチャットアプリ

## 作成背景

新人教育でやることがないということで弊社事業部でよく使用するMQTTを使った課題があればなと思い作成したが、別課題が出てきたりGWでみんな休んだりして課題を出すタイミングがなくなったのでここで供養する。

## 概要

- MQTT通信を用いてメッセージのやりとりを行う
- Tkinterを用いてウインドウを作成し、送受信したメッセージを表示する

## 完成イメージ

![画面収録-2022-05-09-7.31.07.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557457/793cb0a8-3c46-af72-069e-af97e66b2c1a.gif)

## 前提条件

- mosquittoがインストールされていること
- MQTT Brokerがあること
- python3がインストールされていること

## MQTTについて

ざっくり説明するとパブサブ方式の軽量で高速な通信ができるプロトコルです。
ちゃんとした説明は↓とかで確認してください。

[MQTTについて](https://kfep.jp/solution/iot-mqtt/mqtt)
[MQTTライブラリ Paho Python を理解しようとしてみる](https://www.sunbit.co.jp/blog/2019/11/21802/)

# 全体の流れ

```mermaid
sequenceDiagram
    participant u1 as User
    participant m as __main__
    participant tk as MyTkiner
    participant mq as MyMqttClient
    participant br as Broker

    opt 入力、投稿ボタン押下時
        u1 ->> tk : 投稿を押下
        activate tk
            tk ->> tk : queueに格納
            tk ->> u1 : 画面に表示する
        deactivate tk
    end

    opt 受信時
        br ->> mq : サブスクライブ
        activate mq
            alt topic is "/chat"
            mq ->> mq : queueに格納
            end
        deactivate mq
    end

    loop main loop
    activate m
        note right of m : MyTkinterのqueueチェック
        m ->> tk : queueのチェック
        tk -->> m : 
        alt queueサイズ変化あり
            m ->> tk : メッセージ取得
            tk -->> m : return list
            m ->> mq : パブリッシュリクエスト
            mq ->> br : パブリッシュ
        end
    deactivate m

    activate m
        note right of m : MyMqttClientのqueueチェック
        m ->> mq : queueのチェック
        mq -->> m : 
        alt queueサイズ変化あり
            m ->> mq : メッセージ取得
            mq -->> m : return list
            m ->> tk : 画面表示リクエスト
            tk ->> u1 : 画面表示
        end
    deactivate m
    end
```

## GitHub

https://github.com/cats-park/ChatApplication

## 後書き
初投稿で何書いていいか分からないのでなんか必要なことあったらコメントください🙇‍♀️
Admin Beginner > Data Modeling > Create Object Relationships

[Trailhead関係　個別の課題別に戻る](https://qiita.com/Keiji_otsubo/items/56eb7a90bb72138ece1f)


+ [Admin Beginner > Data Modeling > Create Object Relationships](https://qiita.com/Keiji_otsubo/items/c3b8d27b01033242bd60)
+ [Create Master-Detail Relationship for Challenge in Create Object Relationships course](https://qiita.com/Keiji_otsubo/items/fe5b2a74c6cba088bd6e)

--------------------------
[Create Object Relationships](https://trailhead.salesforce.com/content/learn/modules/data_modeling/object_relationships?trail_id=force_com_admin_beginner)

I'm on this step in Trailhead, I can't seem to find "New" to add a favorite...have I missed something?
Trailheadでこのステップを実行していますが、お気に入りを追加するための「新規」が見つからないようです...何かを見逃したことがありますか？

Add a Favorite Property  

Let's take a look at how to view favorite properties.

1. From the App Launcher ( in the navigation bar), find and select Sales.
2. Click the Properties tab in the navigation bar. If you don’t see it, look under the More dropdown.
3. Click the name of a Property record.
4. Click Related. You’ll see Favorites (0) in the related tab.
5. Click New.
6. Enter a name for Favorite Name, then click Save.

Thanks so much for the input. I went back and deleted my custom objects and essentially started this part over. I think I must have messed something up on the upstream portion as when I went through again it worked perfectly. 

ご入力ありがとうございます。私は戻ってカスタムオブジェクトを削除し、基本的にこの部分を最初からやり直しました。もう一度やり直したところ、うまくいったので、上流部分をめちゃくちゃにしたに違いないと思います。

+ [Create Object Relationships. I am unable to add a favorite object. I thought I went through the right steps to add a favorite but when I launch the app and look at related I don't see "New" to add a favorite...any help?](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000HCsVR)
+ [When I Choose "Sales" from App Launcher, I do not see Properties tab in the navigation bar and I don't see 'More' dropdown ?](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000DwWRESA3)
Shopifyの購入完了ページにattributesを表示させる方法①

どうも！Shopifyおじさんです！
今回は、Shopifyの購入完了ページ、いわゆるサンクスページと呼ばれる場所にcart.attributesの値や、その他の情報が出せないか？を色々調べてみました！
まずは、基本編ということで解説していきたいと思います。

## 記入する場所
そもそもどこにコードを書いたらいいのか？
こちらは、テーマファイル内にコードを書くのではなく、ショップの管理画面の設定からコードを読み込ませていきます。
画面左下にある、<b>設定 ＞ チェックアウト ＞ 注文状況ページ ＞ 追加スクリプト </b>（下の画像のところ）にコード書き込んでいきます。
![追加スクリプト](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531102/38218340-d08a-c535-1e1d-e5f6c77a2d3e.png)


## 基本文法
いくつか公式でも、説明してあります。（以下リンク）
・<a href="https://help.shopify.com/ja/manual/orders/status-tracking/customize-order-status">注文状況ページをカスタマイズする</a>
・<a href="https://help.shopify.com/ja/manual/orders/status-tracking/customize-order-status/order-status-javascript-asset">注文状況JavaScriptアセット</a>

公式の内容では、checkoutとshopオブジェクトが使用可能だと書いてありましたが、私がやった中ではorderオブジェクトは呼び出すことができました。
逆に、formとcaptureは使えませんでした…。HTMLは使えるので、\<form>はできましたが…。この辺は、別の機会で書いていこうと思います。

### 基本文法
```
  <script>
    Shopify.Checkout.OrderStatus.addContentBox(
      'ここに内容を書いていく',
      ',で区切ると、コンテンツが分けられる',
      `コンテンツをひとまとめにしたければ、`を使って<br>
       改行していく`
    )
  </script>
```
・`Shopify.Checkout.OrderStatus.addContentBox('')`の中に内容を書いていく
・「,」で区切ると、コンテンツが分けられる
・コンテンツをひとまとめにしたい時は、「\`」を使って\<br>などで改行していく
・表示エリアを追加したい時は、`Shopify.Checkout.OrderStatus.addContentBox('')`を追加する。
・文法上どこか間違えていると表示されない
・Liquidのコード部分が間違えていると、設定を保存できない
（あくまで、個人でやっている中で気付いたことです）

![サンプル表示内容](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531102/a24f568c-ff0c-38c0-41f4-8c111273406b.png)



## cart.attributes以外で表示できるもの
サンプルで作成してみました！
```
<script>
  Shopify.Checkout.OrderStatus.addContentBox(
    'タイトル',
    {%- comment -%} cart.attributesがあれば {%- endcomment -%}
    {% if attributes %}
      {% if attributes['配送日の指定'] == "指定する" %}
        `<p>希望配送日時は</p>
         <p>{{ attributes['配送希望日'] | date: "%Y年%m月%d日" }}の{{ attributes['配送時間帯'] }}です。</p>
        `,
      {% endif %}
    {% endif %}

    {%- comment -%} 入会への案内 {%- endcomment -%}
    `
    <b>入会特典！1000円クーポンプレゼント中！</b><br>
    <a href="/account/register">会員登録はこちら</a>
    `
  )
</script>
```
上記のコードを入力すると、以下の画像のような内容になります。
※カートページでcart.attributesを設定する必要があります。詳しくは<a href="https://www.shopify.com/jp/blog/partner-shopify-theme-customize-cart-attributes-line-item-property-customer-note">こちら</a>
（order.customer_urlは使えたが、会員の判定をする必要がある）
![サンプル表示](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531102/37221819-edfc-ecad-499f-44db487480fa.png)


## まとめ
今回は基本的な表示ができるところまでを紹介しました。
`Shopify.Checkout.OrderStatus.addContentBox('')`内でcustomrの判定はできたのですが、有効化されていない顧客も、顧客と判定してしまうため、その辺の分岐も作れるとレパートリーがもっと増えそうだなと思いました！
通常のjsを使っているので、\<script>\</script>タグ内で別のコンテンツを作成し、モーダルなんかで表示できれば面白いなと思いました。
そのあたりは別の機会で紹介していこうと思います。

あと、
ARCHETYPでは、Shopifyのテーマ開発やアプリ開発をやりたいエンジニアを募集しております！
気になった方はお気軽にエントリーをお待ちしております！
https://www.archetyp.jp/recruit/
noteでブログもやってるので良かったらチェックしてください！
https://note.com/archetyp
Python Excelより値を取得し、メールテンプレートを作成する

# 概要
入力をもとにExcelから計算した値を取得し、メールに張り付けます

# 環境
## 仮想環境作成
```
 python -m venv .sendmail 
```

## 仮想環境実行
```
.sendmail\Scripts\activate.bat
```

# 事前準備
## ライブラリのインストール
pywin32: office関連操作用(今回はexcel、outlook操作に使用)
openpyxl: excel関連操作用
```
pip install pywin32 
pip install openpyxl
```

# コード

```
import win32com.client
import datetime
import openpyxl

# 定数
MAIL_TO = "XXX@XXX"
WORK_BOOK = r"C:\work\sample.xlsx"
TARGET_SHEET = r"test"
START_ROW_INDEX = 3
INPUT_COLUMN_INDEX = 3
GET_COLUMN_INDEX = 11

print('入力の日付 (yyyy/mm/dd)')
todayInput = input('>> ')

# 日付を取得
today = datetime.datetime.strptime(todayInput, '%Y/%m/%d')

targetRow = START_ROW_INDEX + today.day

# 入力
xlApp = win32com.client.Dispatch("Excel.Application")
xl = xlApp.Workbooks.Open(WORK_BOOK)

sheet = xl.Worksheets(TARGET_SHEET)
sheet.Cells(targetRow, INPUT_COLUMN_INDEX).Value = "10:00"
sheet.Cells(targetRow, INPUT_COLUMN_INDEX+1).Value = "22:00"
xl.Save()
xl.Close()

# 取得
wb2 = openpyxl.load_workbook(WORK_BOOK, data_only=True)
ws2 = wb2[TARGET_SHEET]
value1 = ws2.cell(row=targetRow, column=GET_COLUMN_INDEX).value



# メール送信
object = win32com.client.Dispatch("Outlook.Application")
mail = object.CreateItem(0)
mail.BodyFormat = 1

# 宛先の設定　To,CC,Bcc
mail.To = MAIL_TO
mail.Bcc = MAIL_TO

# メールの件名
mail.Subject = "{}月{}日".format(today.month,today.day)

# メールの本文
mail.Body = """\
作業内容の確認

コメント：
{comment}

入力時間：{input1}

以上です
"""

mail.Body = mail.Body.format(input1=value1, comment="1")

 # 作成したメールの表示
 mail.Display(True)


```
親の2人の子が同じ値を持つのを防ぐにはどうすればよいですか？


+ [親の2人の子が同じ値を持つのを防ぐにはどうすればよいですか？](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000HDASG)

Apexトリガーでなく本当にできるのか？
エラーを画面に出せる？
開発文書部のお仕事 2022年5月版 - 新人さんにすすめる記事ふりかえり

1月来お仕事まとめを月初めに投稿しているものです。

> [開発文書部のお仕事 2022年1月版 - Qiita](https://qiita.com/e99h2121/items/b83423a07c975b349f3a)
> [開発文書部のお仕事 2022年2月版 - Qiita](https://qiita.com/e99h2121/items/6ce238b6b53749b7e7d9)
> [開発文書部のお仕事 2022年3月版 - Qiita](https://qiita.com/e99h2121/items/b5f1e5cb9717ad86a65d)
> [開発文書部のお仕事 2022年4月版 - Qiita](https://qiita.com/e99h2121/items/17589f66ba41c82f35e5)


## 5月やりたいこと

### 予定

- 開発ガイド
- オンボーディング基盤を説明
- イベント観戦
    - https://aws.amazon.com/jp/summits/japan/
    - https://www.writethedocs.org/conf/portland/2022/
    - https://connpass.com/calendar/?ym=202205
- 人事と採用協力
    - Twitterアカウントを始動させる 

### 小さいこと
- 日次
    - times確認
    - twitter確認
    - はてブ定時確認
- 月次
    - ローカル開発環境セットアップ、起動確認
    - Wiki確認
    - 社内規定的な読みもの確認


## 4月やったこと

### 新人さんを迎え入れる準備

[新人さんにすすめる有益なツール達 2022春 - Qiita](https://qiita.com/e99h2121/items/f70db44e7f69901f0141)
[新人さんにすすめる有益な技術書達 2022春 - Qiita](https://qiita.com/e99h2121/items/1b243efb1499527f0701)
[新人さんにすすめる (弊社の) 有益な記事達 2022春 - Qiita](https://qiita.com/e99h2121/items/d9c6c28d472f263d590a)
[コーチング・メンタリング・ティーチング・コンサルティング・カウンセリングの違いと、自分のメンタリングへの心がけ 2022春 - Qiita](https://qiita.com/e99h2121/items/10cdc7d17fbcfa3cb0b3)
[教えることで自分がいちばん学ぶ、「ファインマンテクニック」を使って複雑な概念をよりよく理解する - Qiita](https://qiita.com/e99h2121/items/833b34ed6c34020af8f9)

### 色々
- コミュニティ紹介
    - チャンネル作成
    - タイムキーパー
    - 司会
- BIG BOSSの分報
    - 社内 times 上で最もリアクション数の多いチャンネルに成長。
- 各チーム長と順番にリモート飲み継続
- 業務改善


### 読書
[「伝わるデザインの基本」を読んだので、その要点 - Qiita](https://qiita.com/e99h2121/items/d57803dcab028d3675fe)
[「チーズはどこへ消えた？」を読んで、ソフトウェア開発に活きると思ったヒントの要点 - Qiita](https://qiita.com/e99h2121/items/9fcae9f340a8e96116c6)
[「システム運用アンチパターン」を一読したので、その要点（特に薦めたい感想5点） - Qiita](https://qiita.com/e99h2121/items/5327cda822b8ea588169)
[「アルゴリズム図鑑」を読んだので、その要点 - Qiita](https://qiita.com/e99h2121/items/6b66cf79e01e95647a29)
[「プリンシプル オブ プログラミング」を読んだので、その要点 - Qiita](https://qiita.com/e99h2121/items/89f095f64086436cb0c4)
[「エリック・エヴァンスのドメイン駆動設計」を自分でも一読したので、その要点 - Qiita](https://qiita.com/e99h2121/items/48351c7d47d4288d87ea)
[「良いコード/悪いコードで学ぶ設計入門」はSNS時代の冒険活劇ゲーム攻略本だと思った - Qiita](https://qiita.com/e99h2121/items/0f71104dbc32a5d0047c)
[「プログラマが知るべき97のこと」、自分なら何を書きたいか - Qiita](https://qiita.com/e99h2121/items/c57b6dfdaeda04e882e8)

- 情報収集
    - [Day One – CTO/VPoE Conference 2022 Spring - - YouTube](https://www.youtube.com/playlist?list=PLAs94HocVkj-TGTVWlyWmLVBNEZhgyYCx)
    - [「『ドメイン駆動設計』のススメ - 100日でエヴァンス本を完読したしょぼちむとふりかえる」を視聴したので、その記録 - Qiita](https://qiita.com/e99h2121/items/de450e9a643947b07c3c)


## 合格

[3級テクニカルライティング試験を受けてみて合格した記録 - Qiita](https://qiita.com/e99h2121/items/201dad82a3d35066a148)



## 以上

- [開発文書部のお仕事 2022年1月版 - Qiita](https://qiita.com/e99h2121/items/b83423a07c975b349f3a)
- [開発文書部のお仕事 2022年2月版 - Qiita](https://qiita.com/e99h2121/items/6ce238b6b53749b7e7d9)
- [開発文書部のお仕事 2022年3月版 - Qiita](https://qiita.com/e99h2121/items/b5f1e5cb9717ad86a65d)
- [開発文書部のお仕事 2022年4月版 - Qiita](https://qiita.com/e99h2121/items/17589f66ba41c82f35e5)

に続き 5月のお仕事掲示です。
どうぞ宜しくお願いいたします～
flutter テキストをコンポーネント化する

赤く囲った部分をコンポーネント化（共通化）します。

<img width="400" alt="Screenshot_1652043887.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494487/e6ce8ef8-6dba-d190-ce3e-c1527466ae2b.png">


ソース(コピペOK)

    class TestLabel extends StatelessWidget {
      final String label;
  
      TestLabel(this.label);
  
      @override
      Widget build(BuildContext context) {
        return SizedBox(
          width: double.infinity ,
          child: Padding(
            padding: EdgeInsets.only(left: 20,top: 5,bottom: 5),
            child: Text(
              label,
              textAlign: TextAlign.left,
              style: TextStyle(fontSize: 20,color: Colors.green),
  
            ),
          ),
        );
      }
    }

呼び出し方

    TestLabel("TestLabel"),

同じ部品でアプリを作りたかったので、共通化を調べた時の忘備録です。

もしボタンを作りたいみたいな方はこちらの記事が参考になるかなと思います。

https://oyubab.com/it/flutter-button-custom/

誰かの参考になれば幸いです。
4K対応ホームページの制作メモ Part3

こちらの記事の続きとなります。

https://qiita.com/nanakochi123456/items/2a200c2f46e5608740bb

https://qiita.com/nanakochi123456/items/1475e8c4ce7a9d43ad1d


## 書いたばかりなのにいきなり？

それは、かなりひさしぶりのホームページがあるからです。

いらないようで、いらない機能、いわゆる無駄な機能も実装されました。


## 4K対応のCSSとJavaScriptのファイル

- JavaScriptの実態は、ほぼ jQueryです。
- CSS や JavaScript類はすべて結合されています。
- あくまで、現時点でのファイルサイズです。

サーバーがbrotliに対応しているが、配信に使用されていない br ファイルも作成しています。

-総ソースファイル 97ファイル、956,624bytes
-基本CSS 113,878→min化 71,301→7z+gzip 13,044→br 11,712
-基本JS  116,544→min化 40,995→7z+gzip 17,980→br 16,466

これ以外にページによって動的に読み込まれます。完全全結合は無駄と感じられましたのでやめました。

## 4K対応のページ画像（テーマ固定）

テーマで固定されているページ画像に、解像度別で提示してみます

（数字は横解像度です）

#### 以下2枚のTOp画像
-1680 - png=863,462→webp=293,326→avif=202,215
-1920 - png=1,037,101→webp=336,410→avif=229,641
-2160 - png=1,351,767→webp=400,722→avif=268,662
-2600 - png=1,883,187→webp=564,320→avif=380,299
-3840 - png=3,538,987→webp=745,352→avif=472,051

#### 以下スマホ用（倍dpi）
-828 - png=732,822→webp=249,378→avif=154,944
-750 - png=527,731→webp=216,034→avif=142,279

↑デザイナーさんから入稿されたこれらの画像、でかいです。大きすぎてSEO心配です。

:::note info
png=pngquant、jpg=guetzli、webp=cwebp、avif=avifenc 使用
:::



#### その他svg
-svg 1ファイル 3,011
-svgz 1ファイル 1,238

## それではなぜ4Kサイトに本格的に取り組んだの？

今調べたのですが

- googleも
- duckduck go も
- Yahoo Japanも
- bingも
- NHKも
- NTT西日本も
- amazonも
- 楽天市場も


p.s.
- NTT東日本はほんのわずか対応しているようです
- qiitaはほんのわずか対応しているようです

上記大手サイトが対応していない、フル4KのWebページを導入することでした。

身分不相応の4Kディスプレイに対応するサイト制作なわけです。


### 関係ないが、スクショすらどうして出さないの？

社長の決裁がおりないからです。

### 主な構築の記録

- 12月末 カンフデータが来て、会議でOKになったのでHTML構築開始
- 12月末 リボ払いで最安値4Kディスプレイを購入
- 1月6日 この日まで正月シカトで無休でがんばれた
- 1月7日 このあたりからHTMLデザインにおいて困難を極め、鬱っぽくなりさぼりはじめる
- 2月20日 このあたりからHTMLの作成を再開した気がする
- 3月中旬 HTMLの開発を終了し、Wordpressに組み込んだ上でWordpress上でHTML開始
- 5月9日 無意味な機能も含み95%が完成した気がする

なお、もともとのテーマもカスタムテーマであり、前任者のfunction.php が大いに参考として役に立ち、無勉強php構築に貢献してくれました。
aws cliの"default"を名前変更＆変更後のprofileをデフォルトにする方法

複数アカウントで運用していると、
- いちいち`--profile`で指定するのは面倒くさい
- どれがデフォルトなのか分かりにくい

と思い、`default`という名前を持たないようにしたいと思った。
gcloudでも全てに名前つけてactivateで切り替えているので

# 名前を変更するコマンドはない

結論から言うとファイルをいじる。
`.aws/`にある`/credentials`と`config`を開いて`[default]`となっている部分を`YOUR_FAVORITE_NAME`と手打ちで変更。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1984110/e35821fe-77af-6b21-2bd1-77c39b3db8eb.png)

それからWindowsでは
```bat
setx AWS_DEFAULT_PROFILE YOUR_FAVORITE_NAME
```
Linux系なら
```bash
$ export AWS_DEFAULT_PROFILE=YOUR_FAVORTITE_NAME
```
でOK。
【Next.js】Tailwind CSS を使用する

## Next.jsで`Tailwind CSS`を使用する方法
### Next.js のプロジェクトを作成する
ディレクトリを作成し、ターミナルで`npx create-next-app app_name`を実行します。
```:ターミナル
$ npx create-next-app app_name
```
すると以下のようにファイルなどが作成されます。
![image220509_033202.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/acfcadee-4d7d-9529-4c96-e186da2851a6.png)

### `Tailwind CSS`の設定をする

#### `Tailwind CSS`をインストールする
まず`Tailwind CSS`をインストールします。
ターミナルで以下のコマンドを実行します。
```:ターミナル
$ npm install -D tailwindcss postcss autoprefixer
```

#### 設定ファイルを生成する
次に`tailwind.config.js`と`postcss.config.js`を生成するために`npx tailwindcss init -p`を実行します。
```:ターミナル
$ npx tailwindcss init -p
```
![image220509_034800.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/e867bdd0-1398-6072-f91a-b485efa2d472.png)
`tailwind.config.js`と`postcss.config.js`が生成されました。

#### `tailwind.config.js`を編集する
`tailwind.config.js`内容を変更します。
以下のように追記します。
```tailwind.config.js
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
#### global.cssを編集する
次に`./styles/globals.css`を編集します。
```./styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
以上で設定が完了しました。

### `Tailwind CSS`を使用する
以下のチートシートを確認ながら`index.js`を以下のように編集します。

https://nerdcave.com/tailwind-cheat-sheet


```index.js
import Head from 'next/head'

const Home = () => {
  return (
    // チートシートを見ながらclassNameに記述する
    <div className="min-h-screen py-0 px-2 flex flex-col justify-center items-center">
      <Head>
        <title>Sample App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
        <h1 className="text-8xl text-purple-600">
          Hello sample-app!!
        </h1>
    </div>
  )
}

export default Home
```

![image220509_043010.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/5c8cf252-f9cb-9d61-b6ff-42c2fa83cd2e.png)


`Tailwind CSS`が使用できていることが確認できました。
2022/5/9主にITとかセキュリティの記事

メールチェックに要注意！GW中サイバー攻撃のリスク(5/7)
https://news.tv-asahi.co.jp/news_economy/articles/000253892.html?display=full

元ツイッター警部が警視庁流「デジタル鑑識」サービス開始　「千葉県割」も(5/7)
https://otakei.otakuma.net/archives/2022050705.html

中国支援の攻撃グループ、数百GBの機密データ窃取 - 2019年から偵察開始(5/7)
https://news.mynavi.jp/techplus/article/20220507-2338283/

米、ハッカー情報に報奨１３億円　ロシアを支援、パナ子会社攻撃(5/7)
https://www.tokyo-np.co.jp/article/175959?rct=economics

メール返信装うウイルス「エモテット」にご用心　県警が注意呼び掛け(5/7)
https://www.chunichi.co.jp/article/465995

国産クラウド推進　政府、経済安保で「重要物資」指定へ
サイバー攻撃に備え(5/7)
https://www.nikkei.com/article/DGXZQOUA026UF0S2A500C2000000/

（６）「サイバー犯罪減らしたい」民間企業でスキルアップ(5/6)
https://www.sankei.com/article/20220506-GW4N3ZD4VNNNVPDJVU6A7MSAWU/

議員投稿を転載 告訴検討…箕面市 不正アクセスの可能性(5/7)
https://www.yomiuri.co.jp/local/kansai/news/20220507-OYO1T50005/

米グーグル、Web3.0の専門チーム設立へ＝CNBC(5/7)
https://coinpost.jp/?p=347887

米、仮想通貨「ミキシング」業者に制裁　北朝鮮ハッカー攻撃に関与(5/7)
https://jp.reuters.com/article/usa-sanctions-northkorea-idJPKCN2MS1KD

「税金で作ったソフトウェアのコードは公開されるべき」という主張に3万人以上が賛同、日本からも署名可能(5/7)
https://gigazine.net/news/20220507-public-money-code/

公衆トイレでも個人情報登録　“QRコード”に北京市民は困惑(5/6)
https://nordot.app/895228885305622528?c=768367547562557440

中国が外国製ＯＳ拒否、政府機関などに国産ＰＣへの交換指示－関係者(5/6)
https://www.bloomberg.co.jp/news/articles/2022-05-06/RBFW5DT1UM0Y01

トロン基盤のステーブルコイン「USDD」がローンチ　TRX前週比+35%に(5/6)
https://coinpost.jp/?p=347328
【Swift】Alamofire6でresponseJSONが使えなくなるらしい

# 警告文が突然出現
```
'responseJSON(queue:dataPreprocessor:emptyResponseCodes:emptyRequestMethods:options:completionHandler:)' is deprecated: responseJSON deprecated and will be removed in Alamofire 6. Use responseDecodable instead.
```
responseJSONは非推奨です。
Alamofire 6で削除される予定です。
代わりにresponseDecodableを使ってください。

だそうです。

気づいた時に修正しておくのが一番ということで修正したので共有します。

# 結論
```diff_swift
- AF.request("", method: .get).responseJSON
+ AF.request("", method: .get).responseData
```

警告文にはresponseDecodableと記載してあったがresponseDataの方が綺麗に置き換えができた。

# おわり
今回の記事を書くにあたって使ったテスト的なプロジェクトがあるのでサンプルとして置いておきます。

https://github.com/SNQ-2001/Alamofire-Update-Demo
【2022年版】HTMLのソースをphpで見れなくする方法 (view-source:対策済）

## 言い訳を言わせてくださいなの。
HTMLソースが見られたくないわけではありません。

HPに掲載している画像とかを悪用されるのを防止するためです。その悪用はコピーして使われることではなくて、画像直リンを使用して、匿名掲示板で使われることでもあったり。。。。

:::note info
別にそれなら.htaccessで制御すればいいのでは？
:::

## 究極のHTMLを見れなくする方法

実際にはこんなHTMLがご覧になることができるだけで、大して意味ないと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/470b5c6a-613d-56ba-85b8-a4727c82abf9.png)

## 具体的なコード

```functions.php
<?php
	if($_COOKIE["namae"] >= 1) {
	} else {
		header('Cache-Control: max-age=0');
		header('Cache-Control: no-store, no-cache, must-revalidate' );
		header('Cache-Control: post-check=0, pre-check=0', FALSE );
		header('Pragma: no-cache');

		if($_SERVER['HTTP_REFERER'] == "") {
			$redirecturl=(empty($_SERVER["HTTPS"]) ? "http:$footerimgmargin/" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
			echo <<<HTML
<!doctype html><html><head><meta http-equiv="refresh" content="0;URL=$redirecturl"></head></html>
HTML;
			exit;
		}
	}
?>
```

## 仕組み
- キャッシュを完全に無効にすることで、今表示しているhtmlが消えています。
- HTTP_REFERERを確認して（リンク元はどこでも良い）、直接 view-source:http://url .. って入力されていないことを確認する
- もし、きちんとした閲覧ソフトであれば、refresh によってHTTP_REFERERが加えられ、正しく表示される。
- キャッシュが生きているサーバーでは使用できません。
- おまけとして、cookieに namae=1 が入っていると、正しいソースが表示されます。

## 問題点もあります。
- サイトがhttps運用でも、自家サーバーで オレオレSSL運用で https://localhost/ やその他名前でアクセスできるサーバーがある場合、そこからリンクすることで見れる場合があるかもしれません。
- ダウンロードツールで転送先のURLを追跡されたら、HTMLが見れてしまいます
- HTMLに最大2回程度の過剰アクセスが発生する
- HTTP_REFERERをブロックしている環境では無限ループが発生します。cookieを利用した対処法がよさそうです。
- ↑の対処を行うと、一部のブラウザで生のソースが見れてしまいます。
- そもそもHTMLソースを見れる専用アプリでは見れてしまうかも。
- そもそも、SEO悪くなるかもしれません

ということで、できたのは良いですが、SEOの問題で利用却下

残念ながら、下記のjQueryを拡張した上で、サイトポリシーに同意した上で、ソース表示を認めるという手段をとってみました。

## それ以外の対処

- F12
- Ctrl + C、X、V、U
- Ctrl + Shift + C、I、J、K
- contextmenu copy paste drag drop

もブロックしておくべきです。

このブロックも同時に行っておかないと、結局ソースが表示されます。

```jqueryblock.js
$(window).keydown(function(e){
	if(	e.ctrlKey && 
			(
				e.keyCode === 85	// Ctrl+U
			 ||	e.keyCode === 67	// Ctrl+C
			 || e.keyCode === 88	// Ctrl+X お問い合わせフォームがある場合除外したほうがよい
			 || e.keyCode === 86	// Ctrl+V お問い合わせフォームがある場合除外したほうがよい
			)
		|| e.keyCode === 123		// F12
		|| e.ctrlKey && e.shiftKey &&
			(
				e.keyCode === 73	// Ctrl+Shift+I
			 || e.keyCode === 74	// Ctrl+Shift+J
			 || e.keyCode === 75	// Ctrl+Shift+K
			 || e.keyCode === 67	// Ctrl+Shift+C
			)) {
			return false;
	}
});
$(document).bind("contextmenu copy paste drag drop", function() {
	return false;
});

``
Amazon Linux2にPython 3.8をインストール



```shell
# インストール
sudo amazon-linux-extras install -y python3.8

# 確認
python3.8 -V

# venvで仮想環境構築
python3.8 -m venv py38

# activate（有効化）
source ~/py38/bin/activate

# deactivate（無効化）
deactivate
```
Web技術とは

# Web
インターネット上にはさまざまな文書、写真、動画を公開することができる。
このような文書の公開、閲覧のシステムのこと。
Webページ（文書、写真、動画）は、ハイパーテキスト（言語）で構成されている。
Webページは```ハイパーリンク```と呼ばれる別のWebページへの参照を埋め込むことができる。
それが蜘蛛の巣のようになっている。

# インターネットとWeb
インターネットとWebは別々で開発されたもの。
現在は切っても切れない関係になっている。

# さまざまなWebの用途
### 文書の閲覧
Webページを読むことができる。
Webページの集まりを```Webサイト```という。

### ユーザーインターフェース
```コンピューターの機能とユーザーのやり取り```の橋渡しをする機能
人と機械

### プログラム用API（アプリケーションプログラミングインターフェース）
```ソフトウェア同士```のやり取りの橋渡しをする機能。
機械同士

# HTMLとWebブラウザ
```HTML(hyperText MarkupLanguage)```とはハイパーテキストを記述するための言語
```Webブラウザ```はハイパーテキストを人間が読めるようにするプログラム

# WebサーバーとHTTP
```Webサーバー```とは
Webブラウザからコンテンツの要求があると必要なコンテンツをネットワークを通してWebブラウザに送信する役割
```HTTP(hyperText Transfer Protocol)```とは
ハイパーテキストを送信するためのやり取りの手順のこと
WebブラウザとWebサーバーの種類が様々あるがHTTPに従ってやり取りが行われている。

# Webページが表示される流れ
・URLで取得したいWebページをWebブラウザで指定する
・Webブラウザはハイパーテキストを見やすくする
### URL
```どのやり取りの手順```で、```どのWebサーバ```に```何のコンテンツ```を取りに行くかの情報が含まれている。
例
```https://guides.rubyonrails.org/getting_started.html```

```https```の手順で、```guides.rubyonrails.org```のWebサーバーに```getting_started.html```のコンテンツ（ハイパーテキスト）取りに行くことをさしている。

# 静的ページと動的ページ
### 静的ページ
何度アクセスしても何回同じものが表示されるWebページ
### 動的ページ
アクセスするごとに違う内容が表示させるWebページ

# 動的ページの仕組み
### CGI
WebサーバーがWebブラウザからの要求に応じてプログラムを起動させる仕組み
### サーバサイド・スクリプト
CGIが呼び出すプログラムのこと。
スクリプト言語（プログラミング言語の一種）Perl,Ruby,Python,PHP
### クライアントサイド・スクリプト
HTMLに埋め込まれるプログラム。
Webブラウザが読み込まれる際に実行される。

# Webの標準化
### 標準化とは
HTMLにもいろいろ種類があり、互換性がなくなるため規格を設定した。

標準化を進める団体
W3C（World Wid Web Consortium）
WHATWG（Web Hypertext Application TEchnology Working Group)

# Webの設計思想
### RESTful
・統一インターフェース
定義された、共有された方法で情報のやり取りをする
・アドレスとの可能性
URLが一意であること
・接続性
やりとりされる情報にはハイパーリンクを含めることができる
出典 https://tech.012grp.co.jp/entry/rest_api_basics
・ステートレス性
やり取りが一回ごとに完結する
出典 https://tech.012grp.co.jp/entry/rest_api_basics

### セマンティックWeb
Webページの情報に意味をつけたもの
そのデータを表す属性や関連する情報を記述したデータのこと。
出典 https://e-words.jp/w/%E3%83%A1%E3%82%BF%E3%83%87%E3%83%BC%E3%82%BF.html#:~:text=%E3%83%A1%E3%82%BF%E3%83%87%E3%83%BC%E3%82%BF%E3%81%A8%E3%81%AF%E3%80%81%E3%83%87%E3%83%BC%E3%82%BF,%E7%B6%AD%E6%8C%81%E3%81%8C%E9%87%8D%E8%A6%81%E3%81%A8%E3%81%AA%E3%82%8B%E3%80%82


出典 Web技術の基本(本）
【OutSystems】カウントアップするforループをしたい

# INDEX
- 目的
- 実装
- あとがき


## 1. 目的

```java
for (int i = 0; i < 10; i++) {
  // ループでやりたい処理
}
```
Javaでいう所のこんな処理をOutSystemsで実装したい！


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92447/1f42cda2-9e06-0591-56dc-4b2e89874520.png)
…というのも、OutSystemsだとどうもこういうの↑しか無さそうなんですよねω
うちは既にあるリストをぶん回すんじゃなく、回数を指定して回したいんじゃあ！！１


## 2. 実装

### 2.1. 結論
先に結論を書くとどうやら、現状では`Ifウィジェット`を使って自前で実装するか、少々回りくどいが回したい数だけ要素を持ったリストを作って`For Eachウィジェット`で回す等しないとダメなようだ。

https://www.outsystems.com/forums/discussion/53044/how-to-create-a-loop-but-not-for-each-loop/


### 2.2. 動作サンプル
ここではサンプルとして、1～10までの和を文字列リストにして画面に出すという物を作ってみた。

[デモサイト](https://personal-ppneswkx.outsystemscloud.com/ForLoopExample/Home)

ちなみに会社の事は関係なしに記事を書いている為、Personal Environmentです。一定期間アクセスが無いとスリープされてしまうので、もしアクセスできなかったら諦めて下さいω


### 2.3. プロジェクトファイル
[こちら](https://github.com/mahny-b/OutSystemsExample/blob/master/ForLoopExample.oml) からOMLファイルをダウンロードして下さい。

### 2.4. サンプルの説明

#### 2.4.1. 準備
Home画面にデータソースを準備します。`Fetch Data from Other Sources`で作った`DataAction1`に紐づけています。ダミーデータを生成するだけなので引数はありません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92447/ab0770b1-100c-60d4-c772-60454e8b59ec.png)

`DataAction1`で生成したText型リストを`Table`の`Source`に設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92447/0a03847c-5f82-0c19-8796-bcea009ea61f.png)

次は、`DataAction1`の中で実際にForカウンタループを使ってリストを作って行きます。


#### 2.4.2. リストを生成するサーバアクションのIFを整える
`DataAction1`から呼び出すサーバアクションを作ります。
わざわざサーバアクションにしているのは、リストに要素追加等の操作はサーバアクション限定という縛りがある為です。

まずは、`Server Action`にサーバアクションを作ります。（ここでは`ForLoopSampleAction`）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92447/23a3b61f-c8bf-6092-9a2a-7641583ac49b.png)

`OutDatas`はText型リストです。ちなみに`Java`っぽく書くならこういうサーバアクションにしようとしています。

```java
public List<String> ForLoopSampleAction() {
    List<String> OutDatas = new ArrayList<>();
    for (int Index = 0; Index < LoopNum; Index++) {
        TempSum += Index + 1;
        OutDatas.add((Index + 1) + "回目: " + TempSum);
    }
    return OutDatas;
}
```

`ForLoopSampleAction`を作ったら、`DataAction1`から呼び出します。
`ForLoopSampleAction`からの戻り値もしっかり`Assign`します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92447/aef62468-a55b-c1e4-fc98-8a1071012c1d.png)


#### 2.4.3. サーバアクションの中身を実装する
さて最後。ぶっちゃけここだけが肝。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92447/eb135a09-dba5-0172-d829-b88f95bab3d1.png)

1. `Assign`でループで使用する変数の初期化をする
2. `Ifウィジェット`は、`Break`条件として、`Index < LoopNum`が成立する間は`True`に流れてループするようにを定義します。
3. `TempSum`の`Assign`は単に1～10の総和を求めています。リスト表示用
4. `ListAppend`で、`OutDatas`のリストに要素を追加します。これはサーバアクション内でしか使えません
5. `Index++`の`Assign`で、人力で`Index`のカウントアップ処理をしています


#### 2.4.4. 動作確認
できた！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92447/76e2b607-2ec1-ba6a-9568-58a3df6b6521.png)


## 3. あとがき
今回は私が苦手意識を持つ最強自社フレームワーク、最強自社ツールのなどと言われるカテゴリの一種だと思い込んでいるローコードツールネタを書きました。
ローコードツール周囲でも流行りつつあり、IT系記事でも持てはやされているのですが、正直外部のプログラマにガッツリこれを使わせている現状があって違和感を感じずにはいられない自分がいます。**作るものも作る人も変わってない**し。
POC用途とか、プログラマがいないサービス提供企業が使って改修していくってなら分からんでもないんですが…。
そんな経緯があってイマイチ良い印象が持てないでいます。うちももう老害なんだろうなあ。
python3でAtCoderに取り組んだ時に得た実装上のtips 


2021/10/17以降AtCoderのコンテストに参加しています。言語はpython3で挑んでいるのですが、その時に得た「こう実装すれば速度を落とさずに実装できる」というTipsを紹介します。

ちなみにAtCoderとは日本発祥の競技プログラミングサイトです。
https://atcoder.jp/home

以下に3つまとめていますが、また気づきがあったら追加します。

## 1. ベタなキューを使うときは配列[]やqueue.Queue でなく collections.deque を使うこと。

AtCoderでは(というより競技プログラミングの問題全般で)キューを使って解く問題が結構頻出するのですが、これは確実に collections.deque を使った方がいいです。

理由は
- 配列[] は先頭pop に配列の長さ分の計算量がかかる。
- queue.Queueの先頭pop は $O(1)$ で配列[]より速そうだが、同期のためのlockが効いているのか?dequeよりも遅い
　- https://docs.python.org/ja/3/library/queue.html 

です。

```python:計測用コード
import time
from queue import Queue
from collections import deque

# array
start_time = time.time()
array = [i for i in range(100000)]
for _ in range(50000):
    array.pop(0)
elapsed_time = time.time() - start_time
print(f"array.pop(0)  の実行時間 {elapsed_time}sec")

# Queue
queue = Queue()
for i in range(100000):
    queue.put(i)
start_time = time.time()
for _ in range(50000):
    queue.get()
elapsed_time = time.time() - start_time
print(f"Queue.get()   の実行時間 {elapsed_time}sec")

# deque
deq = deque()
for i in range(100000):
    deq.append(i)
start_time = time.time()
for _ in range(50000):
    deq.popleft()
elapsed_time = time.time() - start_time
print(f"deq.popleft() の実行時間 {elapsed_time}sec")
```

```測定結果
array.pop(0)  の実行時間 0.6488490104675293sec
Queue.get()   の実行時間 0.07807302474975586sec
deq.popleft() の実行時間 0.00417017936706543sec
```


## 2. pow(a, b, M)で a = 0 (mod M), b = 0 のときは、0が返ってこない！

pow関数には第3引数にMを設定すると $a^{b} \ mod \ M$ を計算してくれます。
https://docs.python.org/ja/3/library/functions.html#pow

ですが、$a = 0 \ mod \ M, b = 0$ の時には1が返ってきます。期待としては0が返ってきて欲しいのですが。具体例に示していますが、$b = 1$ のときは想定通り0を返します。

```python:具体例
>>> pow(7, 0, 7)
1
>>> pow(7, 1, 7)
0
```

エッジケースとしてはまるパターンだと思われるので、回避策としては $a = 0 \ mod \ M$ のときは必ず0を返す、といった分岐をかけた方がいいでしょう。$a \ne 0 \ mod \ M$ならばpowが問題なく使えるので。以下の回避策のようにスニペットを用意しておくと便利かもしれません。

```python:回避策(案)
def my_mod_pow(a, b, mod):
   if a % mod == 0:
       return 0
   else:
       return pow(a, b, mod)
```

## 3. 整数の切り捨ての割り算は int(b / 2) より b // 2 の方が高速かつ安定する

二分探索などを実装する時に見出しのようなコードを書くと思うのですが、b // 2の方が高速です。そおらく、int(b / 2)だとb / 2の段階でfloatになってから、intへのキャストが入るのでその部分のオーバーヘッドが効いて遅くなっているのかなと考えられます。

```python:計測用のコード
import time

b = 19489741

start_time = time.time()
for _ in range(100000):
    c = int(b / 2)
elapsed_time = time.time() - start_time
print(f"int(b / 2) の実行時間 {elapsed_time}sec")

start_time = time.time()
for _ in range(100000):
    c = b // 2
elapsed_time = time.time() - start_time
print(f"b // 2 の実行時間     {elapsed_time}sec")

```


```実行結果
int(b / 2) の実行時間 0.017735004425048828sec
b // 2 の実行時間     0.008094310760498047sec
```

また、これは経験則なのですが、int(b / 2) だとbの値が大きくなった時( $b= 10^{18}$ オーダーだとそれが出てきやすいかも)に値の出方が想定しないものになることがあります。

```python
>>> a = 184763977392749242
>>> int(a / 2)
92381988696374624
>>> a // 2
92381988696374621   # こちらの方が正しい
>>> 
```


なので、bの二進表現に着想するアルゴリズムを実装する時には b // 2を実装する方がよいです。
一つの投稿ずつにhoverをすると色を変える

#### app/micropost/_micropost.html.erb
```html
 <ol class="microposts">
        <li><%= link_to "ユーザー", users_path %></li>
        <%= render @microposts %>
</ol>
```
#### app/assets/stylesheets/custom.scss
```css 
.
.
.
.microposts {
  list-style: none;
  padding: 0;

li {
    padding: 10px 0;
    border-top: 1px solid #e8e8e8;
  }
    li:hover {
      background-color: #ccc;
    }
.
.
.
```
micropostsにhoverの擬似クラスを与えていたので反応が無かった。
しかし
liにすることによって一つずつにhoverをすると色を変えることができる。
cssの理解が深まってよかった。
Python で Datastore SDK を利用する

# Python で Datastore SDK を利用する

FlaskでDatastoreを利用するために、
環境にDatastoreSDKをセットアップする

## 手順

例によって[公式手順](https://cloud.google.com/datastore/docs/reference/libraries#client-libraries-install-python)を参考にする

### 1. クライアントライブラリをインストールする

```sh
仮想環境がある場合は仮想環境に入る
$ source venv/bin/activate

(venv) $ pip install --upgrade google-cloud-datastore

(venv) $ pip list | grep datastore
google-cloud-datastore   2.5.1
```

### 2. 認証用サービスアカウントを作成する

Terraformにて作成

- ID   : datastore-sdk
- role : roles/datastore.user

公式手順はOwner権限を付与しているが過剰なので
datastore.userを利用することにする

```tf:service_accounts.tf
module "service_account_for_datastore" {
  source       = "../modules/gcp/service_accounts"
  account_id   = "datastore-sdk"
  display_name = "datastore-sdk-service-account"
  description  = "Service Account for Datastore SDK"
  roles = [
    "roles/datastore.user"
  ]
}
```

### 3. 鍵発行

```
$ PROJECT_ID="自身のGCPプロジェクトID"
$ gcloud iam service-accounts keys create datastore-key.json \
  --iam-account=datastore-sdk@${PROJECT_ID}.iam.gserviceaccount.com
```

↑コマンドを実行したディレクトリに`datastore-key.json`がDLされているので、
安全な場所に移動する

```
$ mkdir .credentials
$ mv datastore-key.json .credentials
```

### 4. 環境変数設定

発行した鍵へのパスを環境変数として登録する

```
$ export GOOGLE_APPLICATION_CREDENTIALS="/home/user/.credentials/datastore-key.json"
```

### 5. 使ってみる

実際にDatastoreにエンティティを挿入してみる

```
$ touch db.py
```

```py
from google.cloud import datastore

datastore_client = datastore.Client()

kind = "Task"
name = "sampletask1"
task_key = datastore_client.key(kind, name)

task = datastore.Entity(key=task_key)
task["description"] = "Buy milk"

datastore_client.put(task)

print(f"Saved {task.key.name}: {task['description']}")
```

- 実行

```
$ python db.py 
Saved sampletask1: Buy milk
```

- 確認

コンソールで確認してみると、作成されていることが分かる

![datastore.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341857/fca4d0c9-7025-a999-6e27-f2d75b92f1a3.png)

# ハマったところ

今回の記事と全く関係ないけど、
python3.9 にアップデートしたせいで、
pip と python のバージョンが違ってて、
python 実行しようとすると
`No Module named 'google'`と出て実行できなかったことにハマった

pip でインストールされるのが python3.6 用だったので、
python 3.9 で実行しようとしてもそんなモジュールインストールされてないよというエラーが出たのが原因だった
macOSで便利な小技集

## はじめに
macOS(旧OS X)を10年間使い続けて見つけたちょっとした機能を集めました。

## ラーニングコスト低
### 保存画面にドラッグ&ドロップで保存先を指定
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658828/e0f87283-4e87-013b-2ef7-40208533ea75.gif" width="500">

保存先を選択する画面でフォルダやファイルをドラッグ&ドロップすると、保存画面がその場所に切り替わります。

### 保存画面でデスクトップを選ぶ
上の画面、なんとデスクトップ専用のショートカットキーが用意されていおり、command+Dを押すことで直接デスクトップに飛ぶことができます。とりあえずデスクトップに保存したいというときとても便利です(デスクトップは散らかりますが)。

### 音量、画面の明るさを細かく調整
optionとshiftを同時に押しながら音量調整キーを押すと、通常の1/4単位で音量を調整することができます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658828/f1cddefb-0d05-da93-a0bc-ce8e8838847e.gif" width="200">
画面の明るさについても同様です。
また、音量調整の際にshiftを押すと音量を確認する用の音が鳴ってくれます。

## ラーニングコスト中
### 矢印キー移動はcommand, optionを押しながら
commandキーを押しながら左右の矢印キーを押すと行の先頭や最後まで直接移動することができます。また、optionを押すと単語ごとに移動してくれます。

| ショートカット | 動作              |
|----------------|-------------------|
| command + ←    | 行の先頭に移動    |
| command + →    | 行の最後に移動    |
| option + ←     | 1つ前の単語に移動 |
| option + →     | 1つ後の単語に移動 |

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658828/52f892d3-f2a1-f50a-a19d-c63046daef55.gif" alt="drawing" width="400"/>

英語やソースコードだと分かりやすく次の単語(=1つ前の空白)に移動してくれるのですが、どうやら日本語の文章でも品詞分解をして1つ前の単語に移動してくれるようです。

## ラーニングコスト高
### Emacs Keybindingsがどこでも使える
左小指のとても届きやすいところにあるcontrolキーですが、あまり使う機会がないという人も多いのではないかと思います。しかし、数個のコマンドを覚えればMacのcontrolキーはテキスト入力時にとても強力な武器となります。

#### 必ず覚えるべきもの
| ショートカット | 動作                      | 覚え方       |
|----------------|---------------------------|--------------|
| control+D      | カーソルの右の字を1字削除 | **D**elete   |
| control+A      | 行の先頭に移動            | Aは最初      |
| control+E      | 行の最後に移動            | **E**nd      |

WindowsでいうところのDelete, Home, Endキーですね。文章の先頭や最後までワンタッチで移動でき、とても便利です。

#### 覚えるとよいもの
##### 矢印系
以下のショートカットの動作は矢印キーと全く同じです。
| ショートカット | 動作                      | 覚え方       |
|----------------|---------------------------|--------------|
| control+F      | 右に1字移動(→)            | **F**orward  |
| control+B      | 左に1字移動(←)            | **B**ack     |
| control+P      | 上に1行移動(↑)            | **P**revious |
| control+N      | 下に1行移動(↓)            | **N**ext     |


> じゃあ矢印キーを使えば良いのでは？

もちろんその通りなのですが、これらのショートカットを使えば手をホームポジションから動かすことなくカーソルを動かすことができます。慣れるまでに1日程度かかるかもしれませんが、一度慣れてしまうと使わずにはタイピングができなくなるほど便利です。

##### コピー&ペースト系
Macには実は2種類のクリップボードがあるのをご存じですか?

| ショートカット | 動作                      | 覚え方       |
|----------------|---------------------------|--------------|
| control+K      | 行の最後までをコピーして削除            | **K**oピー  |
| control+y      | 上でコピーしたものをペースト            | **Y**ank

control+Kでコピーする文章は、command+Cでコピーする文章とは別のところに保存されます。私はプログラミングをする際のコードはcontrol+K、その他はcommand+C、と使い分けています。

これらのcontrolを使ったショートカットはEmacsユーザーであればご存知でしょう。Emacsは開発が始まってから50年ほど経つテキストエディタですが、拡張性を売りにVimと並んで今でもとても人気があります。最近のVSCode人気にもある程度耐えているようです(かくいう筆者はVSCodeにEmacsの設定を移行して使っています)。

|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658828/d5c8402f-7f98-0849-fd72-dd3c9d7abfd4.jpeg" width="300">|
|:--:| 
|*筆者のcontrolキーは使いすぎで悲惨なことになっている*|