OmniAICreator/Qiita-1.07M huggingface dataset:
Nuxt.jsのサイトにJSON-LD形式で構造化マークアップを対応した話

この記事は ウェブクルー Advent Calendar 2022 2日目の記事です。
昨日は @reon_kunishi_wc さんの「 [開発プロセスをカレーの作り方で理解してみる](https://qiita.com/reon_kunishi_wc/items/5693b54647cc48769221) 」でした。

## はじめに
お久しぶりの記事投稿になります:triumph:
今年も弊社のアドカレに参加させていただくことになりました！

今回は**Nuxt.jsで構造化マークアップ**の対応を行ったのでそれについて記事にしたいと思います。

## 構造化データとは
> ページの意図を伝える明示的な手がかりとして構造化データを提供してもらうと、Google はそのページをより正確に理解できるようになります。

検索エンジンに正確な情報を伝えるために構造化データにすると良いということですね:+1:

> ページに関する情報を提供し、そのコンテンツ（たとえば、レシピページの場合は材料、加熱時間と加熱温度、カロリーなど）を分類するために標準化されたデータ形式

[構造化データの仕組みについて](https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data?hl=ja)

構造化データでマークアップすると、検索結果での表示をリッチにすることができます。(リッチスニペット)
こんなかんじ → [検索ギャラリー](https://developers.google.com/search/docs/appearance/structured-data/search-gallery?hl=ja)
30ほど種類があり、それぞれ記述フォーマットがあります。

## リッチスニペットの確認方法

正しく構造化マークアップできているかは以下で確認することができます。
[リッチリザルト テスト](https://support.google.com/webmasters/answer/7445569?hl=ja)

## ボキャブラリーとシンタックス
構造化データをマークアップする際に使用するのがボキャブラリーとシンタックスです。

### ボキャブラリー
何についての情報なのかを定義するような規格。
代表的なものが[**schema.org**](https://schema.org/)

### シンタックス
HTML上に構造化マークアップを行う場合、形式が3種類あります。(JSON-LD、microdata、RDFa)
マークアップする際の仕様のこと。推奨は**JSON-LD形式**です。

## JSON-LD形式で構造化データをマークアップする
JSON-LDはscriptタグを用いてHTML内に記述していきます。

```
<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "Person",
    "name": "hoge太郎",
    "birthDate": "1992-05-12"
}
</script>
```

## Nuxt.jsのサイトに構造化マークアップをJSON-LD形式で対応
Nuxt.jsのサイトでhead内にscriptを書き入れる場合、
headメソッドを利用して`__dangerouslyDisableSanitizersByTagID`で
scriptを挿入する形がありますが、ソースなかなか見づらいです…。
https://vue-meta.nuxtjs.org/api/#dangerouslydisablesanitizersbytagid

調べたところ`nuxt-jsonld`というパッケージがあったので導入しました:ok_hand:

Nuxt.js 2系
https://github.com/ymmooot/nuxt-jsonld/blob/v1/README.md

Nuxt.js 3系
https://github.com/ymmooot/nuxt-jsonld#readme\
(Nuxt3にはv2で対応された https://ymmooot.dev/articles/25/)

詳しい利用方法はそれぞれのREADMEにて！

## 複数の構造化データをマークアップしたい
調べたところ、このissueにたどり着きました。
https://github.com/ymmooot/nuxt-jsonld/issues/247#issuecomment-579851220

`@graph` 複数の構造化データを1つのスクリプトとして
https://www.w3.org/TR/json-ld/#named-graphs

## 弊社運用サイトでの実装例
記事コンテンツ内で、**FAQ**と**Article**を利用したかったのですが
`nuxt-jsonld` で `@graph`を用いて解決することができました:clap::clap::clap:

https://zba.jp/real-estate/cont/depreciation-of-mansion/

## まとめ
リッチスニペット、30種類もあるのはこの記事書くまで知りませんでした:eyes:
まだ利用したことないスニペットたくさんあるので
サイトに導入できそうなもの探してみようと思います～！！

ウェブクルーでは一緒に働いてくれる方を絶賛募集中です！
興味のある方はぜひお問い合わせください。
https://www.webcrew.co.jp/recruit/

## 明日のウェブクルー Advent Calendar 2022の担当は？
@youngjae_won さんです！よろしくお願いします:wink:
MySQL闇歴史　ストレージエンジンいろいろ

2006年ごろから2010年ぐらいはストレージエンジンが百花繚乱の状態だった。最大の要因はInnoDBがオラクルのものとなってしまい、MySQLの将来が危ぶまれてトランザクション対応のストレージエンジンを作ろうと考えた人が増えたようである。一方でMySQL自体を利用する人も増えてデータサイズが増えたことや利用パターンも多様化したので、特徴のあるストレージエンジンが出てきた。

知名度：★★★☆☆
闇度　：★☆☆☆☆
多様性部門度：★★★★★


閉鎖直前のMySQL Forgeにも有名どころから名前からは想像つかないようなものまで掲載されていた。Amazon S3ストレージエンジンあたりは時代を先取りしすぎていたのかもしれない。
![StorageEngine-OnForge.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102878/54125cf1-335a-33cb-20a9-9638097924e8.png)


オラクルのInnobase Oy買収後もInnoDBの開発が継続され、オラクルがMySQLを吸収したことでInnoDBの強化が進み続けることとなり、トランザクション対応ストレージエンジンとしてはInnoDBがど定番となった。またNoSQLやクラウドサービスなどMySQL以外のデータ管理ソリューションで多様なニーズを満たすことも多くなり、徐々にアクティブに開発されるストレージエンジンは減っていった。トランザクション対応のストレージエンジンを目指したFalconやsolidDB, PBXTなども終息、データウェアハウス系のInfoBrightやNitroedbもどこかへ。


とはいえSPIDERは元気に開発されているし、db tech showcase 2022で松信さんが講演していたプロジェクトMyRocksも。
http://myrocks.io


旧AS400上のIBM DB2のSQLインターフェースはMySQLとして実装されたIBMDB2Iの情報が2019年に更新されていて、IBMさんの底力の恐ろしさを垣間見た気分。
* IBMのIBMDB2Iに関するページ
https://www.ibm.com/support/pages/mysql-and-latest-storage-engine-ibmdb2i
* OpenSource協議会のIBMDB2Iに関するプレゼン資料 (pdf)
https://i5php.jp/wp-content/uploads/2013/10/mysql_straight_engine_itoopen.pdf
2022年12月 AIOps 定点観測

# 概要
AIOps の動向や学習のため、Google で AIOps を検索した結果を記録している記事です。

# 2022年12月1日の検索結果 (リスティング広告)

![20221201_AIOps_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2345504/075896c7-27e3-f367-7783-152dcbab4c8b.png)

* IBM
* Pure Storage
* Splunk
* Dynatrace

2位にピュアストレージが初登場しました。 IBM は今月も不動のトップです。

先月の結果はこちら --> [2022年11月 AIOps 定点観測](https://qiita.com/mkodera/items/41561dc567789071acd0)

# 2022年12月1日の検索結果 (広告以外)

![20221201_AIOps_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2345504/5d0e548c-4af5-e997-89ec-43227a9a9f9d.png)

* Splunk
* JBSVC
* ITmedia
* ServiceNow
* テックファーム

広告以外だと 1～4位は常連組です。そして今月も Splunk がトップです。5位は入れ替わりの傾向があります。

先月の結果はこちら --> [2022年11月 AIOps 定点観測](https://qiita.com/mkodera/items/41561dc567789071acd0)
Elixir Explorer 0.4.0 でデータフレームと Nx テンソルをシームレスに変換できる

## はじめに

Elixir でデータ分析を行う Explorer の v0.4.0 がリリースされました

https://github.com/elixir-nx/explorer/releases/tag/v0.4.0

大きな変更は以下の２点です

- Query によってより直感的なデータ操作が可能になった
- Nx のテンソルとシームレスな変換が可能になった

この記事ではテンソル関連について紹介します

実装の全文はこちら

https://github.com/RyoWakabayashi/elixir-learning/blob/main/livebooks/explorer/with_tensor.livemd

## 注意

シリーズとの相互変換を行う場合、 Nx をインストールしておく必要があります

```elixir
Mix.install([
  {:nx, "~> 0.4"},
  {:explorer, "~> 0.4"},
  {:kino, "~> 0.7"}
])
```

## シリーズとテンソルの変換

適当なデータフレームを用意します

```elixir
alias Explorer.DataFrame
sample_df =
  [
    r: [255, 127, 0, 255, 127, 0, 255, 127, 0],
    g: [255, 255, 255, 127, 127, 127, 0, 0, 0],
    b: [255, 255, 0, 0, 127, 127, 255, 127, 0],
  ]
  |> DataFrame.new()

sample_df
|> Kino.DataTable.new()
```

![スクリーンショット 2022-12-01 17.50.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/156801c6-29ae-9ef5-4508-4810b12b8e5f.png)

以下のように `Series.to_tensor` を使うだけでテンソルに変換されます

```elixir
alias Explorer.Series
Series.to_tensor(sample_df["r"])
```

![スクリーンショット 2022-12-01 17.52.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/76a5f9f8-a5d2-a1d9-756c-246e8ac2db9f.png)

逆も単純です

```elixir
[0, 0.5, 1.0]
|> Nx.tensor(type: :f64)
|> Series.from_tensor()
```

![スクリーンショット 2022-12-01 17.54.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/886a5cc7-9466-1dfa-f4c9-65b9f224268b.png)

ただし、対応している型でない場合は `cannot convert binary/tensor type {:f, 32} into dtype` というようなエラーになります

![スクリーンショット 2022-12-01 17.55.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/74fa82bb-0bdc-485c-628d-a05cfa5978ad.png)

## データフレームにテンソルを追加

テンソルを用意します

```elixir
alpha =
  [255]
  |> Nx.tensor()
  |> Nx.tile([9])
```

`DataFrame.put` でデータフレーム、列名、テンソルを指定するだけで列として追加できます

先にテンソルからシリーズに変換する必要はありません

```elixir
sample_df
|> DataFrame.put(:a, alpha)
|> Kino.DataTable.new()
```

![スクリーンショット 2022-12-01 17.58.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/50a3a079-03b2-d22f-8039-4afeca266aae.png)

## defn による演算

`Nx.Defn` をインポートします

```elixir
import Nx.Defn
```

`defn` で演算処理を定義しておきます

以下の例は RGB の平均を計算しています

```elixir
defmodule Helper do
  defn mean(tf) do
    (tf[:r] + tf[:g] + tf[:b]) / 3
    |> Nx.as_type(:f64)
  end
end
```

`DataFrame.put` で定義した関数を呼び出せば、そのままデータフレームに適用できます

```elixir
sample_df
|> DataFrame.put(:mean, Helper.mean(sample_df))
|> Kino.DataTable.new()
```

![スクリーンショット 2022-12-01 18.05.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/6c37ca6f-d659-4515-cf0c-4629a6a58874.png)

## まとめ

今回の更新で飛躍的に使いやすくなったと思います

Explorer もっと流行れ！
gitのコミットメッセージをかわいく＆分かりやすくしたい🎉

## gitのコミットメッセージ💬
皆さんgitつかってますか！？
開発者だと、gitにコミットすることは多々あると思いますが、コミットメッセージのルールをチームで定めたので、さらーっと書いてみます！
少しでもみなさんの参考になればうれしいです！

## 自分たちのコミットメッセージのルール

[Emojis] [Prefix] [バージョン] [issue 番号] [コミットの内容]

例) ✨ add v0.1 #100 △△機能の○○する処理を追加

それぞれどんなルールなのか、ちょっと詳細にかいてみます。

### 目次
* [Emojis](#emoji) 
* [Prefix](#prefix)
* [バージョン](#バージョン) 
* [issue 番号](#issue番号) 
* [コミットの内容](#コミットの内容)

## Emoji 
絵文字は一目見ただけでどんな修正をしたのかを把握することができます。
🐛だったら、バグ直したんだな～～とか、
📚だったら、なんかのドキュメント追加か更新したんだな～となります。

あとなんといっても、、コミットのログがカラフルでかわいくなります！！！（重要）
主はコミットするときやコミットログを見たときにテンションを上げたいので、アイコンの採用を激推ししました🎉

Emojiのルールは[こちらの記事](https://qiita.com/Jung0/items/0a9a7a97a2c17f92d3c5)を参考にさせていただいています🎨

>| 絵文字 | 説明                               |
>| ------ | ---------------------------------- |
>| 🎉     | 初めてのコミット（Initial Commit） |
>| 🔖     | バージョンタグ（Version Tag）      |
>| ✨     | 新機能（New Feature）              |
>| 🐛     | バグ修正（Bugfix）                 |
>| ♻      | リファクタリング(Refactoring)      |
>| 📚     | ドキュメント（Documentation）      |
>| 🎨     | デザイン UI/UX(Accessibility)      |
>| 🐎     | パフォーマンス（Performance）      |
>| 🔧     | ツール（Tooling）                  |
>| 🚨     | テスト（Tests）                    |
>| 💩     | 非推奨追加（Deprecation）          |
>| 🗑️   | 削除（Removal）                    |
>| 🚧     | WIP(Work In Progress)              |

### VSCodeで使いやすくするために
我々は、VSCodeで開発しているので、[絵文字入力に便利な拡張機能](https://marketplace.visualstudio.com/items?itemName=bierner.emojisense)をいれてます！
サジェストしてくれるので、便利。
<img width="700" alt="emoji.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462497/401d9fef-c5d5-fe58-13e9-1a3ca6583377.gif">
### カイゼンできそうなポイント
今のEmojiルールだと、文言の修正などのしょうもない修正も🐛になってしまうので、コミットが🐛🐛🐛だらけになりがちです😢
[この方](https://tech-blog.cloud-config.jp/2021-12-21-git-moji-list/)は、ちょっとした修正には🩹を使用されているので真似してみてもいいかも？と思っています。
>🐛との使い分けは一瞬で修正できるなら🩹、機能そのものに問題がありしっかり取り組む必要があるなら 🐛というイメージです。


## Prefix 
これはシンプルにコミットの種別を表すものです。

[この記事](https://qiita.com/itosho/items/9565c6ad2ffc24c09364)から拝借させてもらってます。
私たちはライト版にして、ルールは4個だけにしています。ライトじゃない方は、もっといろんなのがありそう。
| Prefix | 説明                     |
| ------ | ------------------------ |
| fix    | バグ修正                 |
| add    | 新規（ファイル）機能追加 |
| update | 機能修正（バグではない） |
| remove | 削除（ファイル）         |


## バージョン 
リポジトリのバージョンを書きます。我々はバージョンの先頭に"v"をつけて書いています。
これバージョンいつの時の修正だ？っていうのがわかりやすくなります。

## issue番号 
gitlabを使ってリソースの管理をしているので、issueの番号を書いて、どのissueに紐づいた修正なのかがぱっとわかるようになります。
gitlabはissue番号の先頭に"#"をつけると、issueに飛べるようになり、どんなissueの内容だったか確認しやすいです。(たぶんgithubも)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462497/1f4a8158-1a34-fcee-5467-6dada632c46c.png)



## コミットの内容
これはシンプルにコミットした内容を要約したものを書いています。
短くわかりやすい文をかけるように気をつけてかいています。

## おわり
コミットメッセージって、こうであるべきっていうのがないと思うので、他の方はどんなルールで運用されているのか気になってきました。。。（誰か教えて）
こんなの使ってるよとか、もっとかわいくわかりやすくする方法をしってるよって方は、コメントなどして教えてくれると飛んで喜びます～！
[Google Workspace]Google Apps Script でSaaSのAPIを呼ぶトークン類はスプレッドシートに保存する

# 概要
**Google Apps Script** (以下 **GAS**) は [UrlFetchApp.fetch](https://developers.google.com/apps-script/reference/url-fetch/url-fetch-app) で様々なSaaSのWeb APIへアクセス出来て非常に便利ですが、一方で、サーバーサイドにおけるバッチ処理で一般的な `.env` ファイルの様なものをスクリプトのファイルとは別に用意しておく、といったことができません。
この為、各種Web APIを呼ぶための `Client ID` と `Client Secret` や `APIトークン` など(以下 **トークン類**)は処理中に直接記載するか、本体とは別の `.gs` ファイルに書くなどする必要があります。
その場合でも、 [Google Apps Script GitHubアシスタント](https://chrome.google.com/webstore/detail/google-apps-script-github/lfjcgcmkmjjlieihflfhjopckgpelofo) などを使って GAS のソースコードを管理しようとすると、トークン類が記載されたソースコードがそのまま `GitHub` 上で管理されてしまったりして、Web API を利用するSaaSに対して情報セキュリティ上は好ましくありません。
そこで、 `Google Spreadsheet` を使ってGASのソースコードとトークン類を分けて管理し、トークン類へは[SpreadSheetAppクラス](https://developers.google.com/apps-script/reference/spreadsheet/spreadsheet-app)を経由してアクセスする様にします。

## トークン類を置くスプレッドシートを別途用意する
1. トークン類を保存する `Google Spreadsheet` を用意する
1. 用意した `Google Spreadsheet` には、記載されたトークン類を共有しても良いアカウントだけが見られるように共有範囲を正しく設定しておく
    - 企業内で使う場合は `Google Groups` 等で権限設定すると属人化せず管理が楽かもしれません。
1. GAS側でトークン類が必要な際はスプレッドシートから読むようにする

## GASからスプレッドシート上のトークンを読み込む

```
const spread = SpreadsheetApp.openById('hoge'); // hoge = 用意したスプレッドシートのドキュメントID
const sheet  = spread.getSheetByName('fuga');   // fuga = スプレッドシートのタブ名
const token  = sheet.getRange(piyo_row, piyo_column).getValue();  //  スプレッドシート内で対象となるトークンが記載されている位置を指定する : piyo_row = 行、piyo_column = 列数
// 取得したtokenを使ってWeb APIを呼ぶ (Bearer token の場合の例)
const options = {
  "method" : "GET",
  "headers" : { "Authorization" : "Bearer " + token
                "Content-type" : "application/json; charset=utf-8"
              },
  "muteHttpExceptions" : true
};
const url = "https://api.hoge.fuga/foo/bar";
const response  = UrlFetchApp.fetch(url,options);
```

下記の様に関数化しておくと汎用的に利用できるでしょう
```
function GetTokenFromSheet(documentID,tabName,X,Y) {
  const spread = SpreadsheetApp.openById(documentID);
  if (spread == null) return null;
   
  const sheet  = spread.getSheetByName(tabName);
  if (sheet == null) return null;
    
  return sheet.getRange(Y, X).getValue();
}

myWebToken = GetTokenFromSheet('hoge_sheet_ID', 'fuga_tab_name', 1,1);
```

これでも **結局はソース内にドキュメントIDやタブ名やシート位置が直接書かれてしまう** のが欠点ですが、少なくとも **GASのソースコードとトークン類そのものとは分離される** ので、SaaSの管理は別部門が行っている場合や、複数のGASやプロジェクトで同じトークンを何度も使う場合などでは、GASと切り離してトークン類を管理できて便利です。

## 注意点
- GAS側がSpreadSheet API
- トークン類を置いたスプレッドシートはGASの実行者が読める必要がある（書き込み権限は不要）
- ドキュメントID、スプレッドシート内でのタブ名やトークン類が記載されているセルの位置（行数、カラム数）などは別途伝える必要がある
    - ドキュメントID、タブ名、記載セル位置なども更に別のスプレッドシートで管理しておく、という方法も一つの手かもしれません。ただし管理しなければいけないスプレッドシートが増えますが…。

## そのほか
`APIトークン` や `Client Secret` といったものは漏れてしまうとSaaSへ不正にアクセスされてしまうことがあり、扱いは気を付ける必要があります。
一方で、「APIとかよくわからない」「なんか危なそう」というイメージでWeb APIを使うのを避けるのも、`DX(Digital Transformation)` や `BPR(Business Process Re-engineering)` といった観点からは非常に非効率です。
Web APIが利用できるのであればトークン類を安全に管理しつつ存分に活用して、SaaSを有効活用したいものですね。
CpawCTF Writeup Level 1 Q11.[Network]pcap (注意<spoiler>)

# Q11.[Network]pcap
```
ネットワークを流れているデータはパケットというデータの塊です。
それを保存したのがpcapファイルです。
pcapファイルを開いて、ネットワークにふれてみましょう！
pcapファイル
```
wiresharkでファイルを開けばフラグが見れる

![スクリーンショット 2022-12-01 180220.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/813031/5892d1c5-2e03-8f06-9f56-f9b3b9fe0685.png)

cpaw{gochi_usa_kami}
pandas の concat で辞書型を追加する方法

# はじめに

`pandas.DataFrame` に対して `frame.append` を行うと pandas1.4 以降では　Deprecated　となった。
``` 
FutureWarning: The frame.append method is deprecated and will be removed from
pandas in a future version. Use pandas.concat instead.
```

これまでは `dict` を直接追加するために使っていたが、言われたとおり `pandas.cancat` で書き直そうとしたがそのまま書き直すだけではうまく行かなかったのでメモを残しておく。

# 修正例

変更前
```python
additional_dict = dict(...)
df = df.append(additional_dict, ignore_index=True)
```

変更後
```python
import pandas as pd

df_add = pd.DataFrame(additional_dict, index=[0])
df = pd.concat([df, df_add], ignore_index=True)
```

# コメント
注意点としては
1. 辞書オブジェクトを `pd.DataFrame ` に変換すること
1. その際に `index` をリストで与えること

に注意する必要がある。

以上。
理物アドベントカレンダーの説明

### はじめに

こんにちは。物理学科3年のmatsumotoです。
物理学科学生有志による五月祭企画「Physics Lab.2023」の量子班に所属しています。

物理学科では毎年アドベントカレンダーを実施しています[^1]。元々はクリスマスまでの日数を数えるために使用されるカレンダーのことを指しますが、ネット上の企画では12月1日から25日までブログ等で記事を連投することを意味します。
物理学科では毎年アドベントカレンダーを実施していますが、今年は12月1日になって実施が急遽決定し、慌てて記事を書いています。(みんな忙しい…)
私たちのアドベントカレンダーでは、物理学の話はもちろんのこと、理物での生活の話や、全然関係ないお話をつらつらと述べていきます。よければお付き合いください！

### Physics Lab.について
記念すべき1日目は、Physics Lab.について紹介していきます。
Physics Lab.は五月祭と呼ばれる弊大学の学祭の展示企画の一つを指します。
五月時点で物理学科に所属する3,4年生の有志が運営しており、理物の中でも自分でもっと勉強したい！という熱心な人が集まって日夜勉強会や準備ををしています。
Physics Lab.では、企画が行われる前年の夏頃にグループが作られ、今年は宇宙班、生物物理班、経済物理班、数理物理班、統計物理班、量子班に分かれて活動しています。(私も含めて複数の班で活動する人も多いです)
普段は自主ゼミを開催してその分野への理解を深めつつ、五月祭ではポスター展示、web記事の掲載など、多岐にわたる発表を行います(来年度はどうなるか未定です)

例年はこのPhysics Lab.が主体となって記事を書き、各班の紹介などがあるのですが、今年は見切り発車なのでそんな記事が出るかは不明です。なのでここでしっかり宣伝しておきます。物理って楽しい！という感じが伝われば良いなと思って企画を行なっているので、ぜひご来場ください。

### 脚注
[^1]:[2021年の物理学科アドベントカレンダー](https://event.phys.s.u-tokyo.ac.jp/physlab2022/advent-calendar/)
デフォルトのGCPリソースロケーションを選択しないとfirebase initコマンドが失敗します！

## 概要

2022/12/01現在、デフォルトのGCPリソースロケーションを選択せずに、
firebase initコマンドでFirestoreを選択した状態でプロジェクトを初期化しようとすると以下のエラーが発生します。

```
Error: It looks like you haven't used Cloud Firestore in this project before. Go to https://console.firebase.google.com/project/project-id/firestore to create your Cloud Firestore database.
```

## どうしたらよい？
以前から、事前にFirebaseコンソールでCloud Firestoreのデータベースを作成しておかないと、
同様のエラーでfirebase initコマンドが失敗していたのですが、
現状は、firebase initコマンド実行前に、Firebaseコンソール上で以下の２つのオペレーションが必要になっているようです。

- Cloud Firestore　で データベースを作成
![CleanShot 2022-12-01 at 15.59.34@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2989440/a4eaff3a-1f4f-c02d-6a6c-51f930e28c33.png)

- プロジェクトの設定でデフォルトのGCPリソースロケーションを選択
![CleanShot 2022-12-01 at 16.57.20@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2989440/97c740b0-0f26-00d0-c9a6-6dad3e42b9f3.png)

## おわりに

少し前から2つのオペレーションが必要になっているなとは思っていたのですが、
最近執筆させていただいた以下の書籍をご購入いただいた読者の方も困っている可能性があるかもと思い立ち、
このタイミングで記事を投稿させていただきました。

https://www.amazon.co.jp/gp/product/B0BMQ1BYLS/

Firebaserのみなさん、よいFirebaseライフを :+1:
今更ながら GASよく使うメソッド集

# 概要
　この記事は、<a href="https://developers.google.com/apps-script/">Google App Script（GAS）</a> についての備忘録です。

# 特有のルール・知識
- `コンテナバインドスクリプト` : Googleアプリケーションと結びついたGAS
- `スタンドアロンスクリプト` :  単体で動くGAS
- Googleアプリケーションに対する操作では承認が必要
- Spreadsheetは、 Spreadsheetオブジェクト > Sheetオブジェクト > Rangeオブジェクト という包含関係がある
- 無限ループは６分で停止する
- scriptは同一プロジェクト内で複数ファイルに分割でき、あるファイルで記述した変数はimport, exportせずに使用できる

# ショートカット 

## 実行
```
Command or Control + R
```

## ログ閲覧
```
Command or Control + Enter
```

# Javascript と似ている文法

## for文
```
for(初期化式; 条件式; 増減式) {
　// 繰り返す処理
}
```

## for ループの抜け方
```
break;
```

## if文
```
if(条件式) {
　// 条件式がtrueだったときの処理
}
```

## while文
```
while(条件式) {
　//繰り返したい処理
}
```

# GAS共通の記述

## ログ出力
```
Logger.log(data)
Logger.log('%s %s', data1, data2); // 変数を%sに代入できる
```

# Spreadsheetの記述

## アクティブなスプレッドシートの取得
```
SpreadsheetApp.getActiveSpreadsheet()
```

## スプレッドシート名を取得
```
Spreadsheetオブジェクト.getName()
```

## シート名を指定して取得
```
Spreadsheetオブジェクト.getSheetByName(シート名)
```

## アクティブなシートを一つ取得
```
SpreadsheetApp.getActiveSheet()
```
※ 複数シートが存在する場合、一意にシートを決められない可能性がある

## アドレスを指定して、セル範囲を取得する
```
Sheetオブジェクト.getRange(アドレス)
```

## Rangeオブジェクトから単体セルの値を取得する
```
Rangeオブジェクト.getValue()
``` 

## Rangeオブジェクトから複数セルの値を取得する
```
Rangeオブジェクト.getValues()
``` 

## 行数・列数を指定したセル範囲の取得
```
Sheetオブジェクト.getRange(行番号, 列番号, 行数, 列数)
```
※行数、列数は指定しない場合１になる

## シートの最終行を取得する
```
Sheetオブジェクト.getLastRow()
```
※ lastRow は値が存在する最終行

## セルに値を代入
```
Rangeオブジェクト.setValue(値)
```

## Rangeオブジェクトのアドレスを取得する
```
Rangeオブジェクト.getA1Notation()
```

## Rangeオブジェクトの値削除 & 初期化
```
Rangeオブジェクト.clear()
```

## Rangeオブジェクトの値削除 
```
Rangeオブジェクト.clearContent()
```
※書式や背景などは削除されない
C#  ( .NET 7 ) - ネストしたハッシュと配列をJSONシリアライズする 

# コード

```c#
using System.Text.Json;
using System;
using System.Collections.Generic;

namespace SerializeExtra
{
    public class Body
    {
      public List<User> users { get; set; }
    }

    public class User
    {
        public string Name { get; set; }
        public int Age { get; set; }
    }

    public class Program
    {
        public static void Main()
        {
			
	      var users = new List<User>();
		  users.Add(new User { Name = "Alice",Age = 20 });
	      users.Add(new User { Name = "Bob",Age = 30 });
			
          var body = new Body
            {
				users = users,
            };

            var options = new JsonSerializerOptions { WriteIndented = true };
            string jsonString = JsonSerializer.Serialize(body, options);

            Console.WriteLine(jsonString);
        }
    }
}

```


https://dotnetfiddle.net/DC1aa7

# 結果

```json

{
  "users": [
    {
      "Name": "Alice",
      "Age": 20
    },
    {
      "Name": "Bob",
      "Age": 30
    }
  ]
}
```


# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# Twitter

https://twitter.com/YumaInaura
CpawCTF Writeup Level 1 Q9.[Web] HTML Page (注意<spoiler>)

# Q9.[Web] HTML Page
```
HTML(Hyper Text Markup Language)は、Webサイトを記述するための言語です。
ページに表示されている部分以外にも、ページをより良くみせるためのデータが含まれています。
次のWebサイトからフラグを探して下さい。
http://q9.ctf.cpaw.site

※この問題のサーバへの攻撃はお止めください。
```
ctrl+shift+Iを押してデベロッパーツールを開き、Elementタブを開き検索（ctrl + F）cpawとフィルタリングすればフラグが見つかる。

```
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <meta name="keyword" content="ctf,flag">
    <meta name="description" content="flag is cpaw{9216ddf84851f15a46662eb04759d2bebacac666}">
    <meta name="author" content="takahoyo">
```

cpaw{9216ddf84851f15a46662eb04759d2bebacac666}
Pythonパッケージの作成メモ


## package の作成
こちらの記事を参考にしてパッケージを作成してみた過程でいくつか発見があったためメモします．

https://qiita.com/studio_haneya/items/9aad8f9ede11e58b41a8

パッケージは上記記事と同じように以下のような構成となっています．
```
myapp/　　　← プロジェクトのフォルダ（フォルダ名は何でも良いです）
　　├ setup.py　　　 ← packageの情報を書くファイル
　　└ myapp/　　　　 ← このフォルダ名でimportするようになります
　　　　├ __init__.py　　← フォルダ内のクラスやメソッドを定義するファイル
　　　　└ main.py　　　　← 実際にコードを書くファイル（ファイル名は自由）
```

`__init__.py` に `from .main import func1`と書くことで，`import myapp`したあとで`myapp.main.func1`を`myapp.func1`と省略して記述できます． 

つまり，一般的にPythonパッケージは次のように読み込みますが，
```python
import dir1          # 呼び出し: dir1.module1.func1()
import dir1.module1  # 呼び出し: dir1.module1.func1()
from dir1.dir2 import <module>  # 呼び出し: module.func1()
from dir1.dir2.module1 import <function or class>  # 呼び出し: func1()
```

`__init__.py`を用いると `import dir1` のあとに `dir1.func1()` で呼び出せます．


## module と package の識別
import したものが package ではなく module である場合もあります．
例えば `datetime` のパスを確認すると，`datetime.py` という module を読み込んでいます．
また，`myapp` は `myapp/myapp` のようなパスになっていますが，PyPIに公開する際には下層のディレクトリが用いられるため，numpyやtorchのようなパスになると思います．
```python
import numpy
import torch
import datetime
import myapp

print(numpy.__file__) # anaconda3/lib/python3.9/site-packages/numpy/__init__.py
print(torch.__file__) # anaconda3/lib/python3.9/site-packages/torch/__init__.py
print(datetime.__file__) # .../anaconda3/lib/python3.9/datetime.py
print(myapp.__file__) # .../myapp/myapp/__init__.py
```

## クラスかどうかを判定

また，同じような名前で module か class か混乱する場合もありますが，次のようにしてクラスかどうかを判定できます．
```python
import datetime
import inspect

datetime.datetime(2022, 12, 1, 16, 0, 33, 889510)
print(inspect.isclass(datetime.datetime)) # True

# methodの判定
print(datetime.datetime.now) # <built-in method now of type object>
```

## 相対インポート
package 内の module について，import 時に `from .main import func1` などの表記がありますが，これは package 内の moduleA から moduleB を呼び出すために用いる記法であり，メインモジュール (Pythonコマンドで実行するモジュール) や jupyter などで呼び出すことはできません．

>相対 import は現在のモジュール名をベースにすることに注意してください。メインモジュールの名前は常に "__main__" なので、Python アプリケーションのメインモジュールとして利用されることを意図しているモジュールでは絶対 import を利用するべきです。

https://docs.python.org/ja/3.9/tutorial/modules.html#intra-package-references

## 参考
https://web-tech.binarymacaron.xyz/2022/04/05/228/
https://zenn.dev/karaage0703/articles/db8c663640c68b
CpawCTF Writeup Level 1 Q8.[Misc] Can you open this file ? (注意<spoiler>)

# Q8.[Misc] Can you open this file ? 
ファイルを調べる

```
$ file open_me 
open_me: Composite Document File V2 Document, Little Endian, Os: Windows, Version 10.0, Code page: 932, Author: v, Template: Normal.dotm, Last Saved By: v, Revision Number: 1, Name of Creating Application: Microsoft Office Word, Total Editing Time: 28:00, Create Time/Date: Mon Oct 12 04:27:00 2015, Last Saved Time/Date: Mon Oct 12 04:55:00 2015, Number of Pages: 1, Number of Words: 3, Number of Characters: 23, Security: 0
```

Microsoft Office Wordのでーたらしいので拡張子を.docにして開いてみる

```
$ cp open_me main.doc
```

![スクリーンショット 2022-12-01 173124.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/813031/bc35dc28-57b1-d794-85d0-2ead0b2e1433.png)


cpaw{Th1s_f1le_c0uld_be_0p3n3d}
picoCTF (wireshark doo dooo do doo...) を解いてみた

# はじめに
私が困った問題や調べないと解けなかった問題などを周辺情報込みでアウトプットしていきます。

# まずやったこと
名前の通り、wiresharkを起動して、とりあえず見てみたけれどもいやここからどうすんねんと突っ込み断念。わからないときはむやみに頑張るとやる気がなくなるので、調べるのが吉。
[このgithub](https://github.com/vivian-dai/PicoCTF2021-Writeup/blob/main/Forensics/Wireshark%20doo%20dooo%20do%20doo/Wireshark%20doo%20dooo%20do%20doo.md)を参考にした。


# 調べたら
`tcp.stream eq 5`ってfilterに入れるといいよって言われたのでやってみたら、以下のような画面が出た。ほうほうよくわからん。そもそも`tcp.stream eq 5`って何やってんねん。ってことでさらに調べる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2250629/a30f3af3-2a0b-4983-e2f8-54a3ca8ffc55.png)

# tcp.stream eq 5　の謎を解明するためにgoogleへ
以下の記事が真っ先に出てきたので、参考にさせていただいた。[この記事](https://ichibariki.com/entry/2018/06/16/172853)曰く、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2250629/6e3a3860-c938-abd7-2d9e-29f3a2b993c7.png)
上記の`Stream index: 5`のところが一致するとフィルターとして引っかかるようだ。二つ疑問が浮かぶ。いやじゃあ`Stream index`ってなんなん？ってことと、なんで5を指定したん？ってことだ。

# Stream index ってなんなん？
　ビビットこれっていう記事は見当たらなかったが、いくつかの記事を見てふわっと思った感想としては連続した通信を一つのインデックスとして割り振っているという感じだろうか。一連のtcp通信に`Stream index`として1を与え、また次の通信に2をといった感じでwireshark側が割り振っているという印象を受けた。


:::note warn
これらは私の感想と印象である。妄信しないでいただけると幸いです。これ以上調べると面倒なので、切り上げるが誰かきちんと調べて記事にするか教えてくれるとありがたい。
:::
# なんで5を指定したん？
　不思議なことである。いやまさか天啓が下りてきて、「5を指定しなさい...」「ハイ神様！！」のようなことはないだろうから、なにかしらそれがよいと判断した理由があるだろう。総当たりの可能性もあるだろうが、そんなスマートじゃないことはプログラムにやらせるものだ。人力でやるものじゃない。
　だが直接的に理由が乗っているものはなかった。もちろん探すのがへたくそだったのだろう。調べて分からんのならちょっと頑張ろうということで覚えたてのフィルターを使って、http通信が200を出しているものに絞ってみる。（何言っているかわからんという人はhttp　ステータスコードで調べてみるとわかると思う。）
以下のような感じになった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2250629/1b9a229d-6c80-048b-187a-60a9522df04f.png)
　こうなると`text/plain`と`text/html`が浮いて見える。この二つを右クリックして`Follow → TCP Stream`とした結果を確認する。
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2250629/5f79e390-91be-211b-baec-60f3951ac81e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2250629/b7d24f6f-059a-0beb-70e5-9c2ef9814640.png)
　上が`text/plain`で下が`text/html`である。隠れて見えていないが、`Follow → TCP Stream`をした後フィルターのところには`tcp.Stream eq 5`や`tcp.Stream eq 14`と勝手に打ち込まれていた。こういった経緯で発見するのがシンプルなルートな気がする。

# さて終了終了っと...?
　`cvpbPGS{c33xno00_1_f33_h_qrnqorrs}`とかいうあからさまに正解っぽいものが見つかったが、どうにもいつもと形が違う。何かしらのエンコーディングがされているのだろうが、ちょっとよくわからん。もう一回google先生にお聞きするしかあるまい。
　前述のgithubのwriteupから、どうやらROT13とかいうものが用いられているらしい。それはどうやって導いたんですか？そんな疑問が鎌首をもたげるけど、まあとりあえずROT13をgoogleしてみましょう。

# what is ROT13
 [wikipedia先生](https://ja.wikipedia.org/wiki/ROT13)より単換字式暗号の一種らしい。詳しい説明はwikipedia先生に譲るが、私の関心はどうしてこのエンコーディングを思いついたかといういう一点である。ぱっと思いついた限りだと、いつものpicoCTF{}という形式を知っているために、`cvpbPGS`という文字列が先頭四文字が小文字で後ろ三文字が大文字だというところを見て、それっぽいなとわかるくらいであろうか。ほかの暗号化方式などに明るくないのでそれくらいしか思いつかない。もし誰かわかる人がいたら教えていただきたい。
　他にもROT47というものもあるらしい。興味のある方は調べてみてください。

# 答え
　picoCTF{p33kab00_1_s33_u_deadbeef}
cyberchef先生にお聞きしたところ答えが出た。
GitHub実践入門 Gitの基本的な操作方法など

# 記事の内容について
 こんにちは。エンジニア歴1年未満の駆け出しエンジニアです。実務での開発に向けて、GitHubの使い方を体系的にマスターするために書籍で学習したことをアウトプットしていこうと思います！もし現場でGitHubを使用している人がいらっしゃいましたら、アドバイスなどいただけると幸いです。

# Gitの基本的な操作
* git init → リポジトリを初期化
* git status → リポジトリの状態を確認
* git add → ステージ領域へファイルを追加
* git commit → リポジトリの歴史を記録
* git commit --amend → コミットメッセージを修正
* git log → コミットログを確認
* git log --graph → ブランチを視覚的に確認する
* git diff → 変更差分を確認
* git branch → branchの一覧表示 & 現在のブランチの確認
* git checkout -b → ブランチを作成し、切り替える
* git checkout → ブランチを切り替える
* git checkout - → 1つ前のブランチに戻る
* git merge → ブランチをマージする
* git merge --no-ff → マージしたことを明確に歴史に残す(マージ・コミット)
* git reset --hard → コミットの歴史を戻す
* git reflog → 作業のログを確認できる
* git rebase -i → gitの歴史を改ざんする
* git clone → リモートリポジトリを取得する
* git pull → 最新のリモートリポジトリブランチを取得
## git(コミットメッセージのフォーマット)
* 1行目 コミットする変更内容の要約を1行で記述
* 2行目 空行
* 3行目 変更した理由や詳細を記述
## 統合ブランチ
トピックブランチの分岐元を指し、併合する先となるブランチのこと。このブランチは中途半端な変更は含まず、いつでも他人に見せられるブランチである。このブランチを本番環境にデプロイする。
## 「git rebase -i」のやり方
1. commitAでスペルミスをした
2. スペルミスを修正したcommitBをコミット
3. 「git rebase -i」を実行し、テキストエディタで「commitBのpick」を「fixup」に変える
CpawCTF Writeup Level 1 Q7.[Reversing] Can you execute ? (注意<spoiler>)

# Q7.[Reversing] Can you execute ?
```
拡張子がないファイルを貰ってこのファイルを実行しろと言われたが、どうしたら実行出来るのだろうか。
この場合、UnixやLinuxのとあるコマンドを使ってファイルの種類を調べて、適切なOSで実行するのが一般的らしいが…
問題ファイル： exec_me
```

ファイルをダウンロードしてfileコマンドで調べる。
```
$ file exec_me 
exec_me: ELF 64-bit LSB executable, x86-64, version 1 (SYSV), dynamically linked, interpreter /lib64/ld-linux-x86-64.so.2, for GNU/Linux 2.6.24, BuildID[sha1]=663a3e0e5a079fddd0de92474688cd6812d3b550, not stripped
```


elfファイルであるのでそのまま実行する。
```
$ ./exec_me 
cpaw{Do_you_know_ELF_file?}
```
cpaw{Do_you_know_ELF_file?}
【Android】Drawableのxml上で画像にTintを適用

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/854e9250-5bcc-979d-5127-6be57f0f6340.gif" width="30%">

# はじめに
Drawableのxml上で画像にTintを適用する方法について説明。
例えば、`RadioButton`や`ToggleButton`など、`ImageButton`が使えない状況で前景と背景を合わせてDrawableを作成した際、レイアウト上でTintを行うと前景・背景両方とも適用されてしまう。そこで、前景のみTintを適用させる方法を説明。

# 概要
Drawableフォルダ内に作成したxml上で、`<bitmap/>`タグ内に`android:tint`を指定。

# 方法
例として、ToggleButtonで説明。
まず、`toggle.xml`に前景と背景を記述。
```toggle.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:state_checked="true">
		<layer-list>
			<item>
				<shape>
					<corners android:radius="80dp"/>
					<solid android:color="@color/background"/>
				</shape>
			</item>
			<item
				android:width="90dp"
				android:height="60dp"
				android:gravity="center">
				<bitmap
					android:src="@drawable/check"
					android:tint="@color/check"/>
			</item>
		</layer-list>
	</item>
	<item>
		<layer-list>
			<item>
				<shape>
					<corners android:radius="80dp"/>
					<solid android:color="@color/background"/>
				</shape>
			</item>
			<item
				android:width="90dp"
				android:height="60dp"
				android:gravity="center">
				<bitmap
					android:src="@drawable/check"
					android:tint="@color/gray"/>
			</item>
		</layer-list>
	</item>
</selector>
```

先ほど作成した`toggle.xml`を`android:background`に設定。
```activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:background="@color/white">

	<ToggleButton
		android:id="@+id/button"
		android:layout_width="160dp"
		android:layout_height="160dp"
		android:background="@drawable/toggle"
		android:textOff="@null"
		android:textOn="@null"
		app:layout_constraintBottom_toBottomOf="parent"
		app:layout_constraintEnd_toEndOf="parent"
		app:layout_constraintStart_toStartOf="parent"
		app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
```

# 関連記事

https://qiita.com/nakashimaakio/items/08c467641b4eb07085bd

https://qiita.com/marienplatz/items/eab522fb8bd9fe7200f3
CpawCTF Writeup Level 1 Q6.[Crypto] Classical Cipher (注意<spoiler>)

# Q6.[Crypto] Classical Cipher
```
暗号には大きく分けて、古典暗号と現代暗号の2種類があります。特に古典暗号では、古代ローマの軍事的指導者ガイウス・ユリウス・カエサル（英語読みでシーザー）が初めて使ったことから、名称がついたシーザー暗号が有名です。これは3文字分アルファベットをずらすという単一換字式暗号の一つです。次の暗号文は、このシーザー暗号を用いて暗号化しました。暗号文を解読してフラグを手にいれましょう。

暗号文: fsdz{Fdhvdu_flskhu_lv_fodvvlfdo_flskhu}
```

https://dencode.com/ja/cipher/caesar

cpaw{Caesar_cipher_is_classical_cipher}
ブラウザアプリでキー入力を受け取りたい。キーボードショートカットのものも含めて。

個人製作中のブラウザアプリで、キー入力を受け付けたいという場面がありました。このキー入力ですが、Ctrl(Command)と同時押しのものも含まれます。
しかし、ブラウザで動かす以上、ブラウザのキーボードショートカットを入力するとブラウザがそれに対応する動作をしてしまうということになります。特に、タブを開くものだったり、タブを閉じるものだった場合、もう大変です。
恐らく物凄くややこしい手法を使うことになるんだろうな、辛いな〜、と思いながら検索していたところ……

https://github.com/tksugimoto/chrome-extension_disable-key-input/tree/master/chrome-extension

```javascript
document.addEventListener('keydown', evt => {
  evt.preventDefault();
});
```

なるほど。

実際にほぼ同じコードをアプリに組み込んで、タブを閉じるショートカットが発動せず、また一方でアプリでのキーボード入力イベントは検知されていることが確認できました。
一件落着。
CpawCTF Writeup Level 1 Q1.[Misc] Test Problem (注意<spoiler>)

# Q1.[Misc] Test Problem
```
この問題の答え（FLAG）は、cpaw{this_is_Cpaw_CTF} です。
下の入力欄にFLAGを入力してSubmitボタンを押して、答えを送信しましょう！

Enjoy CpawCTF!!!!
```
cpaw{this_is_Cpaw_CTF}
PowerQueryで文字列が特定の文字だけで構成されているか確認する方法

たとえば、ある文字列が、0～9とA～Zのうち、紛らわしい文字 0(ゼロ), 1(イチ), I(アイ), O(オー) を除いた32種類の文字だけで構成されているかを判定する関数を考えると...

```m
(text as nullable text) as nullable logical =>
let
    baseCharacters = {"0".."9", "A".."Z"},
    unavailableCharacters = {"0", "1", "I", "O"},
    availableCharacters = List.RemoveItems(baseCharacters, unavailableCharacters)
in
    if text = null then null
    else List.Count(List.RemoveItems(Text.ToList(text), availableCharacters)) = 0

/*
"ABC234" -> true
"CBG009" -> false
"あいう" -> false
*/
```

こんな感じになる。
入力文字列を文字のリストに変換して、使える文字を取り除いて何も残らなければOKという算段。
特定の範囲の文字に、飛び飛びで使えない文字が登場する場合に便利かもしれない。
kintoneのサブテーブルの項目内容の固定化(編集無効化)

# はじめに
kintoneのサブテーブルはリスト状の入力項目を簡単に実現できて便利です。サブテーブルの入力項目を分担する場合など、部分的に項目値を固定したい場合があります。そこで、今回は列単位で項目内容の固定化(編集無効化)を行うサンプルコードを作成します。

# サンプルアプリ
"明細固定"項目の変更で明細テーブルの列の項目内容の固定化、固定化解除を行うことを想定しています。アプリのフィールドのアクセス権で"明細固定"項目の編集権を特定ユーザのみに付与することで、
付与されたユーザ以外は明細テーブルを変更できなくすることができます。明細テーブルの内容の承認単量ユーザにのみ、"明細固定"項目の編集権を与えておけば、簡易的ですが承認システムになります。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355999/43e71963-d3f0-a228-e98f-799a5a44dcff.png)


# サブテーブルの項目内容の固定化を行うタイミング（イベント）について

サブテーブルの項目内容の固定化を行うためには、サブテーブルの行内の項目が実際に生成されていなければなりません。何が言いたいかというと、レコードの新規作成画面でサブテーブルが初期状態（空欄の行が1行表示されているだけ）の場合、サブテーブル内のレコードデータが存在しないため、項目の無効化ができません。このため、基本的にレコード編集画面のshowイベントか、レコード編集画面で項目値のchangeイベントが発生した場合タイミングでレコード項目の固定化処理を行う形になります。

# 全体のソースはこんな感じです。
~~~js
(function() {
    "use strict";
    var events = [
        'app.record.edit.change.明細固定'
    ];   
    kintone.events.on(events, function(event) {
        // イベントからレコード取得
        var record = event.record
        // サブテーブル項目のdisabledプロパティへの設定値を格納
        var disabledflg;

        //明細固定のモード判定
        if(record['明細固定'].value == '固定'){
            disabledflg = true;
        }else{
            disabledflg = false;
        }

        //サブテーブル項目(列)の編集無効化設定
        record['明細テーブル'].value.forEach((r) => {
            r.value.品目コード.disabled = disabledflg;
            r.value.品名.disabled = disabledflg ;
        });
        return event;
    });
})(); 
~~~

サンプルアプリでは、"明細固定"項目の変更で、固定と固定解除を切替える想定のため、'app.record.edit.change.明細固定'イベントを対象として、サブテーブル項目内容の固定化（編集無効化）を行います。
サブテーブル項目のvalueは行の配列となっており、項目の固定化(無効化)プロパティは項目単位で行う必要があります。今回のサンプルではforEachで行を取得し、行の項目(列)単位でdisabledプロパティ値の設定を行っています。列単位での固定化の例として、数量列は固定されないようにしています。(数量のみ変えられる想定)

実際にレコード編集画面で確認すると以下のように表示が切り替わります。
'明細固定'項目を「固定」に変更した場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355999/a28b2648-ab6b-4684-9a68-52fe36d03170.png)
'明細固定'項目を「固定解除」に変更した場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355999/91c1a2e2-3456-e962-067c-df733ecdd545.png)

# おわりに
今回の例では、サブテーブルの列単位での項目内容の固定化を行いましたが、項目単位でdisabledプロパティが存在するため、行単位やテーブル内の特定の項目だけ固定化する等の応用が可能です。
PythonでOpenCVとOpenImageIO(OIIO)を相互運用する

# 自己紹介
株式会社digitalbigmoのパイプラインエンジニアの小池@plinecomです。

# これは何？
Pythonで、OpenCVのコードとOpenImageIO(OIIO)のコードを混ぜて処理する方法を記す。どちらも画像データをNumPy配列として取り出せるので、お互いにやり取りすることができるのだ。

# とりあえず、コード
```python:main.py
import OpenImageIO as oiio
import glob
import cv2

if __name__ == '__main__':

    for path in glob.glob('/foo/bar/*.exr'):
        print(path)
        jpg_path = path.replace('.exr', '_txt.jpg')

        #Read File
        buf = oiio.ImageBuf(path)

        #to Numpy Array
        nd = buf.get_pixels(oiio.FLOAT)

        #Shuffle
        nd = cv2.cvtColor(nd, cv2.COLOR_RGB2BGR)

        #Draw Text
        colorBGR = (0.0, 0.0, 1.0)

        cv2.putText(img=nd,
                    text="OpenCV",
                    org=(50, 100),
                    fontFace=cv2.FONT_HERSHEY_SIMPLEX,
                    fontScale=2,
                    color=colorBGR,
                    thickness=15)

        #De-Shuffle
        nd = cv2.cvtColor(nd, cv2.COLOR_BGR2RGB)

        #Back to oiio
        buf.set_pixels(oiio.ROI(), nd)

        #Write File
        buf.write(jpg_path)

```

# 必要なPython外部モジュール
* OpenImageIO
* cv2
* NumPy

Dockerfileも用意した。
```Dockerfile:Dockerfile
FROM rockylinux:8
RUN dnf install -y which python3 epel-release
RUN dnf config-manager --set-enabled powertools
RUN dnf install -y python3-openimageio python3-numpy
RUN pip3 install -U pip
RUN pip3 install opencv-python
```
```terminal:terminal
docker pull plinecom/py_oiio_opencv
```

# コードの説明

## 高レベルAPIにおけるNumPy配列の取り出し
```python:
        #to Numpy Array
        nd = buf.get_pixels(oiio.FLOAT)
```
せっかくOpenEXRを使っているので、浮動小数点型で出してもらっている。
## RGBからBGRへの変換
```python:
        #Shuffle
        nd = cv2.cvtColor(nd, cv2.COLOR_RGB2BGR)
```
OpenImageIOやその他最近のライブラリでは画像データの並びはRGBなことが多いが、OpenCVの画像データの並びはBGRの順番なので、ここでシャッフルする。
## OpenCVによる文字の書き込み
```python:
        #Draw Text
        colorBGR = (0.0, 0.0, 1.0)

        cv2.putText(img=nd,
                    text="OpenCV",
                    org=(50, 100),
                    fontFace=cv2.FONT_HERSHEY_SIMPLEX,
                    fontScale=2,
                    color=colorBGR,
                    thickness=15)
```
赤い文字を描きたいので、BGRの順にRだけ値を入れている。浮動小数点なので1.0

## BGRからRGBへ戻す
```python:
        #De-Shuffle
        nd = cv2.cvtColor(nd, cv2.COLOR_BGR2RGB)
```
## 高レベルAPIにおけるNumPy配列の戻し
```python:
        #Back to oiio
        buf.set_pixels(oiio.ROI(), nd)
```
全部戻すので、ROIはデフォルト値を与えて全領域としている。

# 宣伝
株式会社digitalbigmoでは美肌プラグインの販売や映像VFXの制作業務を行なっています。ご興味のある方は、webページを見にきてください。一緒にお仕事しましょう。

https://digitalbigmo.com

# 参考文献
[OpenImageIO本家（英語）](https://sites.google.com/site/openimageio/home)
[OpenImageIO本家リファレンス（英語）](https://openimageio.readthedocs.io/en/latest/imagebufalgo.html)
stepfunctions 組み込み関数の予約文字を文字列として扱う方法

# はじめに
AWS stepfunctionsでは、Amazon States Languageという言語でステートマシンが定義され、そのAmazon States Languageには「組み込み関数」と呼ばれる便利関数がいくつか用意されている。
この組み込み関数には、予約文字と呼ばれる、関数内で使用のために予約されている文字があり、その予約文字の扱いで少しハマったので、備忘録としてこの記事を残す。

# 参考資料

https://docs.aws.amazon.com/ja_jp/step-functions/latest/dg/amazon-states-language-intrinsic-functions.html

# 予約文字について
組み込み関数には、 `'}{\` の４文字が予約文字として使用されている。これらの文字を組み込み関数内で、文字列として使用する場合には、`\` を用いてエスケープする必要がある。

# 具体例
例えば、`Username` という変数に対して、`I'm {Username}` と返すステートマシンを組み込み関数を使って作成してみる。ここで注意すべきなのは、`I'm`の`'`は予約文字なので、これをエスケープしなければならない点である。

```
{
  "Comment": "A description of my state machine",
  "StartAt": "Pass",
  "States": {
    "Pass": {
      "Type": "Pass",
      "Parameters": {
        "Message.$": "States.Format('I\\'m {}', $.Username)"
      },
      "End": true
    }
  }
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1675618/3a4bfbb4-c501-ee14-6f10-0f08dabd9f43.png)

このステートマシンの以下のインプットで実行した結果は以下の通りになる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1675618/11491361-1c6b-411c-2170-e0c27cab81cb.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1675618/b97ebc39-9a73-d55a-9344-d806f682c2ed.png)


意図通り、`I'm Jun`と出力することができた。

# 詳しい解説（というか考察）

`States.Format('I\\'m {}', $.Username)` のエスケープ部分を少し考察してみる。

まず、ドキュメントには
>\キャラクターの場合エスケープ文字として機能せずに値の一部として表示する必要があれば、バックスラッシュでエスケープする必要があります。組み込み関数では、次のエスケープ文字シーケンスが使用されます。
リテラル文字列 \\' は ' を表します。
リテラル文字列 \\{ は { を表します。
リテラル文字列 \\} は } を表します。
リテラル文字列 \\\ は \ を表します

と記載されている。つまり、組み込み関数内で、`I'm`と表示させたい場合は、`I\'m`となる必要があり、さらに、この`\`もエスケープ文字の`\`として扱うためには`\\`としないといけないことから、`I\\'m`と表記する必要があるということになりそう。

# まとめ

今回はstepfunctiosの組み込み関数内で予約文字を扱う具体的な方法について検証してみた。ドキュメントの文章を理解するのにだいぶ時間がかかってしまい、だいぶややこしかったが、結論は意外とシンプルなので、ハマっている方のお役に立てればと思う。
Symbol SDK JS v3 をインストールする

# はじめに
Symbol のSDK v2 がdeprecatedとなり長くなりますがv3もα版ということで、まだv2を使うことが多いと思います。とは言え今後開発は進まない（であろう）のでいつかv3へ移行する必要があります。

今年のアドカレではv3を使ってAggregateTransaction（Complete & Bonded）の記事を書こうと思いましたが、それ以前に準備が必要だったため、まずはインストール方法の記事になります。

- Symbol SDK JS v3 でTransferTransaction

https://qiita.com/Toshi_ma/items/db2a81e4973274370f0d

- Symbol SDK JS v3 でAggregateTransaction

https://qiita.com/Toshi_ma/items/0bda70e3362ad1bb8021


<b>それだけなので非常に短いですがご理解ください。（他の方の記事が濃いのでビビってる:joy:）</b>

なお、2022/12/1時点での方法です。今後、色々と変更があるかもしれませんのであしからず。npmでもインストールしてみましたが、エラー出てやめました。（内容忘れた）

なお、NEMTUSさん作成のTypeScript版はこちらが詳しいです


https://zenn.dev/nemtus/articles/nemtus-symbol-sdk-typescript

# Cloneする
SDKは以下のリポジトリ内に含まれているのですがここには、他にもcatapult clientやcatbufferなどSDKを使うだけなら不要なものも含まれているので必要なものだけCloneします

https://github.com/symbol/symbol

## 空のディレクトリ作成
用法にもよりますがSDKを使用したいプロジェクトがあればその配下が良いと思います。
```
mkdir [ディレクトリ名]
cd [ディレクトリ名]
```

## ローカルリポジトリを作成
```
git init
```

## sparsecheckoutをtrueにする
```
git config core.sparsecheckout true
```

## リモートリポジトリを追加
```
git remote add origin https://github.com/symbol/symbol.git
echo sdk/javascript >> .git/info/sparse-checkout
```

## devブランチをpull
mainブランチでも良いと思います
```
git pull origin dev
```

# npm install
※yarn は試してません
```
cd sdk/javascript
npm install
```

# build
:::note warn
buildにはRustとwasm-packが必要です,インストールしておいてください
https://www.rust-lang.org/ja/tools/install
https://rustwasm.github.io/wasm-pack/installer/
:::
```
cd wasm
rustup default stable
wasm-pack build --release --target nodejs
```

インストールは以上です。これだけです:sweat_smile:
.gitignore巻き込み事故

# 発端

個人的に制作を行っていたアプリで、buildする度に対応するファイルが作成されていました。
ただ、これをGitに反映するわけではないので、gitignoreファイルを作成し、それらが除外されるようにしました。

```/ignore/.gitignore
/*
```

# 事故は起こってしまった

このアプリのコードを、別端末で`git clone`して、そこで追加の開発を行い、buildして動作確認を行い、何も考えずに`git add .`して`git commit`しました。
…そして`created`の後ろに現れる、消したはずのbuildファイルの名前…

# どうして起こったのか

上のコードですが、 *gitignoreファイル自体がignoreされる* という現象を引き起こしていました。
なので、元々そのgitignoreファイルを書いていた端末では存在していても、別の端末に`git clone`したときにはコピーされてこないということになっていました。

# どうすべきだったのか

自分自身をignoreしなければいいので、追跡される場所に、例えば

```/.gitignore
/ignore/*
```
のように書けば良かったのでした。

# おわりに

Gitも奥が深いですね…
マネジメントtips:若者の可能性を広げよう

# 可能性を潰さない
## スピルバーグの話
昔、何のTVか忘れましたが、
｢スピルバーグが１２歳の時に初めて撮ったシーンとはどんな”遊び”を撮影したものか？｣
という問題が出題されてました。
答えは、おもちゃの電車の衝突シーンという事でした。
理由は、スピルバーグが、電車の衝突シーンが大好きで、おもちゃの電車を衝突させては、壊すというのを繰り返したらしく。それを見かねた父親がカメラに衝突シーンをとる事にすれば、おもちゃの電車を何度も壊す必要が無いと言う事で、カメラを買え与えたらしいです。

なんと寛大な父親だろうか！！

普通で考えれば、おもちゃの電車を壊す事を怒って、止めさせて終わりです。
それなのに、カメラを与えるとは！！
もし、止めさせていたら、今のスピルバーグが存在しなかったかもしれません。カメラで衝突シーンを撮影する事に興味を覚えた事から、SF映画を作る世界の巨匠に変わっていったわけです。

## ノコギリの話
話しは違いますが、こんな話しも聞きました。
子供の頃、お父さんが日曜大工が趣味でした。
そして、大工道具に非常に興味を持って触ったりしてたのですが、お父さんは、子供を心配して、触ったらダメだと注意をしてました。
しかし、ある日、お父さんの躾けを破り、自分のベッドの足をノコギリで切断したそうです。
それを見た、お父さんは、怒る事なく、｢以外に上手くできてるな｣っと褒めたとの事。
そして、｢でも今度からは、大工道具を使う時は、お父さんと一緒で無いとダメだぞ｣っと。
彼は、その時の事を今でも覚えていて、現在では”もの作り”の仕事に携わっています。
もし、父親が怒っていただけならば、彼は、その後、ノコギリを触る事は無かったかもしれません。

僕は、子供を持っていませんが、父親の小さな行動、小さな一言により子供の一生は変わる可能性を持ってると思います。
全てが簡単の話しでは無いですが、可能性があるという事です。

# 会社の若手の意見や考え方を聞く耳を持とう
子供でなくても、会社でも同じ事が言えるんだと思います。特に若手であれば、会社で上司、メンバーとの小さな関わり、小さな一言で大きな可能性の伸び代も変わってくると思う。
スマホネイティブの若者にとっての考え方は10年後大きな価値を生む可能性があると思います。
## リモートワークが駄目とか言わないで欲しい
コロナの収束の流れの中でアメリカでは、Twitter等のIT企業の出社化が進んでいます。日本も同様の流れになってくると思います。もちろん人が集まってコミュニケーションとるのが一番効率的だし、誤解も生みにくいと思います。そして何より、若者自体もリモートワークを望んでいない可能性も大きいと思います。質問するタイミングを見るのも難しいし、周りの状況もわかりにくいリモートワークは難しいとも思えます。
しかし、コロナのお陰で3年間リモートワークをやってきたのも事実です。頭ごなしに駄目だと言わないで、意見を聞きながら最適な手段を検討して欲しいです。
## 新人エンジニアにはテストから、とか言わないで欲しい
新人エンジニアにテストからやらせる現場は結構あります。システムの使い方になれたり、テストの仕方を覚えたり、テストでシェル等も勉強しやすく、最初のスキルアップにも向いてる側面もあります。
しかし、人によっては退屈に感じたり、コーディングが趣味だったのに面白さがなかったりするでしょう。テストだけやるというのは、イレギュラーや機能外要件等が理解できて、自分のテストが役に立ってると思えるレベルのエンジニアにはモチベーションが上がりますが、若手すぎるとその意味も分かりません。一律ではなく個々人に合わせたタスクを与えてあげて欲しいです。
## 出来ないからと言って仕事を制限しないで欲しい
新人エンジニアにとって、サーバーの環境設定やミドルウェアの設定は難しい部分もあります。環境設定やっておいたから、プログラムだけ作ってくれという優しい先輩エンジニアが居ますが、環境設定も一緒にやってあげて欲しいです。もちろん最初は意味が分かりません。しかし、先輩の作業を眺めてたり、コマンドを代わりに叩くことで、こういう作業が必要なんだくらいは覚えます。少しずつでもテクノロジーワードを喋っていると、少しずつだけど記憶します。いつしか点と点が線となって繋がります。面倒くさがらずに教えながら、やらさせて欲しいです。

# 最後に
若手エンジニアが将来中心となるエンジニアです。マネジメント側の責任として可能性を狭めること注意して欲しい。あなたの影響を与えた人が更に別の人へ影響を与えると思うと、アメーバの様に影響範囲は大きく、責任範囲は大きくなります。

今後も続けていきますので、フォロー、イイね、シェアお願いします。
下記、説明会もご参加下さい。
[エンジニア年収アップ講習(転職サポート付き！)　無料説開会　12月6日　19時開催](https://cto-can-be.hp.peraichi.com/)
カタログUIポリシーを使うときに気を付けたいこと。

## はじめに
カタログ作成の際に、意外と考慮から漏れがちなことがある(個人的に)ので、
そちらについて、記載しようかと思います。

### よくある話
ポータルの申請画面側で入力項目が切り替わるなら、それに合わせてRITMのフォームでも同様のレイアウトになるのが望ましい。
切り替えの際に、データが裏に残ってない状態にしたい。


…ということが往々にしてあるかと思います。

### 画面イメージ
[項目2の選択によって、項目3・4の表示を切り替える。]
上記のような画面があったとします。
これ自体は、UIポリシーにより簡単に作成できると思います

-項目3表示時
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922262/845c6f1c-fb14-bead-defb-24fce26cf1af.png)

-項目4表示時
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922262/887d1413-5683-72d5-fc99-6c0a3e20cd2d.png)

作成したUIポリシーがコチラ
[項目3を出すUIポリシー定義]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922262/293b7bea-d1c0-c13e-cad7-3be752713993.png)

では、申請後のRITMのフォームを確認してみます。
[RITMのフォーム] 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922262/6dc8057b-364d-f202-9a6c-796dd7b87f79.png)

このUIポリシーでは、申請画面にはなかったRITMのフォームにも「項目4」が表示されてしまっていますね。このままでは、怒られてしまいます。。

#### さあどうする
先ほどの、UIポリシーの定義にどの画面に反映をさせるか、という設定項目があります。
そこを設定しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922262/f84ea1a6-516e-a948-3c65-0f44c4a851cd.png)
※4のポリシーも同様にする。

そうすると、RITMのフォーム画面が同じように項目4がなくなるように切り替わるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922262/0360f98e-5e37-f9db-1819-a37b90ec1c4f.png)

これでOK！

となるところもあるでしょうが、細かいところがまだダメだったりします。
今の状態だと、項目2を再選択した際に、以下のように表示上は見えなくなりますが、
データとしては、保持してしまっている状態となります。
申請データを基にして、データ連携を行いたい時なんかは、この状態だと非常にまずいですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922262/28823908-d333-d035-1586-e47e02b436bc.png)

#### さあどうする(その2)
更に、UIポリシーを修正します。

値のクリアは、UIポリシーアクションに「Clear the variable value」という項目があるので、
一見、その設定を行えばいいのでは？と思うのですが…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922262/d6d261af-cbb8-0bfc-dbd7-2679f7a8abfb.png)

ポータルの申請画面上は、この設定により値がクリアされます。
良い感じに動いていそうに見えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922262/3ed8f434-b42a-4540-a0cd-ba08e8930bf1.png)

しかし‥！
RITMのフォームを開いてみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922262/e56b7a67-83ff-52e8-cc31-1747607ed4c2.png)
※開いた時点の画面です。何も手を加えてません。

申請時に、項目3に入力しているにも関わらず、何も表示されなくなってしまっています。
ロードのタイミングで、クリアも行われちゃってます。
現時点では、まだ見た目上クリアされているだけで、データ上は、存在しています。

じゃあUIポリシーのOn loadチェックを外すか

Noです。
そうしてしまうと、今度はロード時のポリシーが動かなくなるため、初期表示時のレイアウトがおかしくなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922262/a320bf6a-997e-b0d0-afa2-6d46bd56506d.png)

#### 結論
スクリプトを書きます。UIポリシーのスクリプトで、以下のように記載し非表示になったタイミングで値のクリアをやってあげれば、切替・データ保持・RITMのレイアウトすべてを満たすことが可能となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922262/1269c6e3-451e-1b96-6ad2-d65e4efb4215.png)

#### ※この方法は、ポータル(モバイル)でのみカタログを使用する際に限ります。
platform画面では、この制御が行えないため、別な方法を取る必要があります。
vscodeでのMarkdown書き方

# マークダウンの記述方法

- [マークダウンの記述方法](#マークダウンの記述方法)
  - [マークダウンのプレビュー](#マークダウンのプレビュー)
  - [見出しの作り方](#見出しの作り方)
- [コマンド](#コマンド)
- [マークダウン](#マークダウン)
  - [リスト](#リスト)
  - [リスト(ナンバリング)](#リストナンバリング)
  - [チェックボックス](#チェックボックス)
  - [テーブル](#テーブル)
  - [引用](#引用)
  - [ソースコード](#ソースコード)
  - [ソースコード(インライン)](#ソースコードインライン)
  - [改行](#改行)
  - [段落](#段落)
  - [水平線](#水平線)
  - [画像の挿入](#画像の挿入)

## マークダウンのプレビュー
* ctrl shift p → Markdownを選択
* プレビューエラーになる場合はターミナルを開いて　rm -rf ~/.config/Code/Cache  
  （キャッシュを削除する。どこのディレクトリからでも実行可能。）<br>


## 見出しの作り方
* `Markdown All in One`をインストールしていること  
* ctrl + shift + pでコントロールパネルを開く  
* ` Markdown All in One: Create Table of Contents`と入力し実行
* 見出しに入れたくない項目は`<!-- omit in toc -->`で除外する


# コマンド
<!-- ctrl Alt F で整形される -->
|    効果    | コマンド |備考|
| :--------: | :------: |:--------:|
| セクション |    \#    |
| **太文字** |    ctrl + b    |
| *イタリック* |    ctrl + i    |
| [リンク](https://www.example.com) |    ctrl + v    |先にURLをコピーしてから張り付ける|
| 数式の挿入$f(x)=sin+cos+tan$ |    ctrl + m    |
| チェックを入れる・外す |    Alt + c    |元々チェックボックスは作成していること  



# マークダウン
## リスト
* list1
* list2  
`方法　：* list1`
***
<br>
<br>

## リスト(ナンバリング)
1. list1
2. list2  
`方法  : 1. list1`
***
<br>
<br>

## チェックボックス
- [ ] チェックボックス  
`方法　：- [ ] チェックボックス`
***
<br>
<br>

## テーブル
|列1|列2|
|:----:|:------:|
|内容1|内容2|

`方法`
\|列1|列2|  
\|:----:|:------:|  
\|内容1|内容2|`
***
<br>
<br>

## 引用
> 引用
>> さらに引用  

`方法　：> 引用`  
`方法　：>> さらに引用`
***
<br>
<br>

## ソースコード
```c
$hoge = "hogehoge";
```
`方法　：```c $hoge = "hogehoge"; ``` `
***
<br>
<br>

## ソースコード(インライン)
文章の中に`$hoge = "hogehoge";`入れちゃう  
方法　：文章の中に\`$hoge = "hogehoge";\`入れちゃう
***
<br>
<br>

## 改行
文章の終わりにスペース2つ、  
もしくは2行以上の改行
***
<br>
<br>

## 段落
段落は<br>
\<br>タグで行う  
`方法　：<br>`
***
<br>
<br>

## 水平線
水平線
___
`方法　：　＿または*を3つ続ける`
***
<br>
<br>

## 画像の挿入
![ダミー画像](https://via.placeholder.com/150)  
`方法　：![ダミー画像](https://via.placeholder.com/150)`
***
<br>
<br>