
定期テスト駆動開発をKiCad6でやろうとしたら、結構クリティカルなバグに引っ掛かったので共有しておきます。

## バグの内容(2021/6/1時点)
対象ののバージョン KiCad6  
対象IME            Microsoft IME  
  
## 内容  
IMEを半角にした状態でPCB Editor(旧Pcbnew)で任意のキーを入力すると、KiCad全体がフリーズする。  
  
## 原因  
IME関連のバグ  

## 該当のissue  
https://gitlab.com/kicad/code/kicad/-/issues/9882  
KiCadマネージーからではなく、PCB Editor単体で起動すると問題は発生しないらしい。(確認済み)  


## 対処法  
Microsoft IMEの互換性を有効化する。  
[IMEの互換性を有効にする方法(他サイト)](https://pc-karuma.net/windows-10-previous-version-microsoft-ime/)


Windows11やGoogle 日本語入力では問題が発生しないという報告もあるようです。  
修正にはもう少し時間がかかりそうな様子なので、IMEの互換性の有効化をおすすめします。  

## 参考
[Microsoft Pinyin causes KiCad freezing](https://gitlab.com/kicad/code/kicad/-/issues/9882?isogp=false)  
[Windows10 – 以前のバージョンの Microsoft IME を使う](https://pc-karuma.net/windows-10-previous-version-microsoft-ime/?isogp=false)  


KiCad6のPCB Editorでフリーズする原因はIMEかもしれない


## まえがき
経緯を含めて説明するので対処法だけ知りたい人は**arch-chrootを使った**までどうぞ

## 経緯
帰省中に入れたUbuntu Serverを寮で使おうとして802.1x/radius用にwpa_supplicantを入れ忘れたことに気づいた愚かな人間がいるらしい <- 今ココ

## wpa_supplicantとは
クロスプラットホームなサプリカントでLinuxでWi-Fiに接続するときによく使われる

ArchWiki [wpa_supplicant](https://wiki.archlinux.jp/index.php/Wpa_supplicant)

## IEEE802.1x認証
ネットワークに接続するためにユーザー認証が必須な規格。某弊学で有線を使おうとすると必ず使う必要がある。  
昨年の春に突如として導入され、前情報もクソもなかった為、多くの寮生が「APEX出来ねえんだけど！？」とキレ散らかした。  
WindowsでやるよりもLinuxで接続したほうが、簡単説がある認証規格である。  

![tweet](https://imgur.com/BXEu8KQ.jpg)  
キレ散らかしていた様子  

## 対処１ 落としてきたdeb経由でインストール(失敗)
一度、wpa_supplicantをdebで落としてきて、インストールした経験があったので、実行した。尚、依存関係が壊れて失敗。

## 対処２ chroot経由でインストール(失敗)
Archlinux install battleでchrootを使った経験があったので、AlterLinux経由でchrootをするという方針を建てた。  
だいたい、あってたけど１つ問題があった。  

AlterLinuxを使うメリット  
802.1x認証の設定がGUIだとものすごく楽なので、おすすめ。  
ネットワークの設定あたりから設定可能。  

[AlterLinux](https://alter.fascode.net/)  
  
  
  

`/mnt` にUbuntu Serverの `/` に当たるパーティションをマウントして、chrootする。  

```sh
# mount /dev/sdax /mnt
# chroot /mnt
```

しかし、`/etc/resolv.conf`がコピーされない為、名前解決が失敗する。  
![discord_msg](https://i.imgur.com/YVUVUt3.png)  
  
  
## 対処３ arch-chroot経由でインストール(成功)
> `/usr/bin/chroot`を実行する前にこのスクリプトは `/proc`などの api ファイルシステムをマウントして、chroot から使える `/etc/resolv.conf` を作成します。
  
[chrootより引用](https://wiki.archlinux.jp/index.php/Chroot#arch-chroot_.E3.82.92.E4.BD.BF.E3.81.86?isogp=false)  
らしいです。  

```sh
# mount /dev/sdax /mnt
# arch-chroot /mnt
# apt install wpasupplicant
```

arch-chrootを使うことで名前解決ができるようになり、aptを使うことができる。  

## まとめ  
AlterLinuxでarch-chrootをすると、GUIで802.1x認証が出来て楽  
  
## 参考
[Archwiki wpa_supplicant](https://wiki.archlinux.jp/index.php/Wpa_supplicant)  
[ArchWiki chroot](https://wiki.archlinux.jp/index.php/Chroot)   
[IEE802.1X認証とは、EAPとは](https://www.infraexpert.com/study/wireless14.html)  


wpa_supplicantを入れ忘れたのでAlterでarch-chrootした話


Atmegaを奪われたArduino UNOが机の上に転がっていたり、ブートローダが吹き飛んだAtmega328pがあったりしますよね。今回は一番楽に(たぶん)Arduino UNOにブートローダを書き込む方法を紹介します。  


## 用意するもの
- ブートローダ がすでに書き込まれているArduino UNO(書き込み装置として使用)
- Arduino UNO(bootloader なし)
- ジャンパ線(6本ぐらい)
- USB TYPE-B 2.0 ケーブル(書き込み装置用)

## 書き込み装置の作成  

まず、Arduino UNOをAtmegaライターとして利用するための準備を行います。  
スケッチ例の中からArduinoISPを開いて、書き込み用のArduino UNOに書き込みます。  
`ファイル >> スケッチ例 >> 11.ArduinoISP >> ArduinoISP`  
![ArduinoISP](https://imgur.com/toPBaCn.jpg)

## ピンの接続

下記の表のSignalの通りに書き込み用Arduino UNOと書き込まれるArduino UNOをつなげてください。  


### 対応するピン    
Arduino UNO(書き込み装置)  

| Pin | Signal |                                    |
| --- | ---    | ---                                |
| GND | GND    |                                    |
| 5V  | VCC    |                                    |
| 10  | RESET  | ターゲットのマイコンをリセットする |
| 11  | MOSI   |                                    |
| 12  | MISO   |                                    |
| 13  | SCK    |                                    |

Arduino UNO(書き込まれる側)  

| Pin   | Signal |
| ---   | ---    |
| GND   | GND    |
| 5V    | VCC    |
| RESET | RESET  |
| 11    | MOSI   |
| 12    | MISO   |
| 13    | SCK    |

## 書き込み

`※書き込み装置が5V、ターゲットが3.3Vの組み合わせで書き込んではいけません` 壊れます。


この方法ではArduinoISPを利用している為、ツールの欄にある書き込み装置の項をArduino as ISPに変更してください。  
![SelectArduinoISP](https://imgur.com/Q0iK752.jpg)  

ボードとシリアルポートを正しく設定して、ブートローダに書き込むをクリックしてください。これでブートローダの書き込みは完了です。  
![WriteBootloader](https://imgur.com/xlMQ3V6.jpg)  

## 解説
なぜ、この方法で書き込めるかの解説です。一般的なことしか書いていませんが不備があれば指摘をお願いします。  

そもそも、Arduino UNOはUSBの書き込み機能とI/Oを備えたAtmega328P用基板です。そのため、ISPを使う際に使用するピンに正しくつなげてしまえば書き込みすることができます。  ISP用のピンヘッダをつかって書き込むと少々めんどくさかったりするので、使えるときは楽をしましょう。

![PinMapping.jpg](https://imgur.com/UuAPJtQ.jpg)
[ATmega168/328P-Arduino Pin Mapping](https://docs.arduino.cc/hacking/hardware/PinMapping168?isogp=false)より引用



Arduino boot loaderのお手軽書き込み方法


## 共同開発鯖LT #3開催決定！
共同開発鯖１周年を記念して３月４日(金)に 共同開発鯖LT #3が開催されることが決定しました。
開催場所はいつも通り、共同開発鯖 DiscordのVCチャンネルです。YouTube Liveでも配信する予定なのでお気軽にご参加ください。 20:30 開始ですのでお忘れなく！  
タイムスケジュールなどは決定次第、[公式Twitter](https://twitter.com/UdcGrowthers?isogp=false)等でお知らせする予定ですのでお楽しみに！

![growthers-lt3.jpg](https://imgur.com/5wcLyCS.jpg)

## 過去に行われたLT
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/OQggPcMWcXc?isogp=false" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>  

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

## 共同開発鯖とは
全国の高専生・高校生達がゆるゆるとプログラミングをしたり、していなかったりするグループです。  
少し前まで存在していた年齢制限は少し前に撤廃されました。年中メンバー募集中です。  

## どうやって入るの？
共同開発鯖に入っている任意の人間にDMを投げつけると参加できる仕組みになっています。  
少しでも興味が出た方は[@yuki_yuigishi](https://twitter.com/yuki_yuigishi?isogp=false)までどうぞ。  

## どんなものを開発しているの？
Discord ライクなチャットアプリを目標に、Oshaveryというチャットアプリを開発中です。１から書き直すことになった為、今は何も動きませんが、夏までのリリースを目指して頑張っています。  

[Oshavery](https://github.com/growthers/Oshavery)


共同開発鯖LT #3 開催決定！

# 衝撃の事実！チーズと納豆は合う！！！
こんにちは。共同開発鯖の21s、鍋王せさみジャーキーです。普段は共同開発鯖のよわよわとして、先輩方の開発を見学してます。自分もいつか共同開発やってみたいですね...
**ということで**いきなりですが！チーズと納豆、その組み合わせの妙について少し専門的な見方を借りて解説していきます

### 書いている人
SNCTの21s。学科は電電です。普段は♰ロボコンプロジェクト♰でロボットの制御を書いたり、マイコンの開発をしていますが、長き夜のすさびにWeb開発も少しします。
共同開発鯖のNo1よわよわ。使用言語はC,C++,C#,python,html,css,（ほんのちょっとLISP）などなどで、これらのどれも自信がないです。（自分のロボコンの制御は気合とコピペで出来ている）
最近はロボコンの履修申請レポートに殺されかけました。

## 「チーズと納豆？うげ！」
納豆はその独特の癖があり、日本人であれど好き嫌いは分かれるという食べ物です。一方チーズは、比較的食べやすいとさせるプロセスチーズなどから、青かびのチーズ（いわゆるブルーチーズ）、塩水や酒などでその表面を洗って出来たウォッシュチーズなどの癖の強いものまで幅広いジャンルがあります。
このチーズの起源については余談で少しお話させていただきます。（というのも筆者の鍋王はチーズについて一時期調べまくっていたため）
チーズと納豆、その二つの共通点は「発酵食品である」というところです。

## チーズと納豆の食べ合わせ
納豆の原料となる大豆は、「畑の肉」と言われるほどたんぱく質が豊富です。それを発酵した納豆はたんぱく質がより体内に吸収されやすいです。
またチーズもたんぱく質が豊富に含まれています。チーズはヨーロッパでは「白い肉」と呼ばれているそうです。
二つの食品を比べた時に、**二つの栄養価が非常に似ている**ということが分かります。

ということは、二つ合わせたら...最強...ってコト！？

# そんな納豆とチーズのように、合わせたら最つよになる環境をご紹介
いきなりですが！人類はSTM32使ってますか！？ここでSTM32シリーズ「Nucleo」の上位モデルであるF767ZIの右端のピン割り当てを見てみましょう
![top right side](https://i.imgur.com/Em2p8MP.png)
使い心地がありますね！これでたったの3～4000円！！！安い！
mbedのLPC1768が5000円だと考えるととってもお得ですよね。

まるで、たんぱく質が豊富に含まれている納豆のよう...**じゃあチーズはどこ...？**


## 鍋王がおすすめチーズをご紹介
・STM32CubeIDE
いうまでもなくSTが出してるIDEなのでしっかりと動きます。細かい設定が出来るのが特徴です。
**なるほど完璧なIDEっスねー－－ッ。ユーザーがHALについての知識を持っているという点に目をつぶればよぉ～**
STM32評価ボードはとてもいいです。HALだけは許せない。

総合評価：ロックフォール（ブルーチーズの王様）

・mbed開発環境
その点mbedのライブラリは可読性が高いです。CubeIDEほど細かい設定はできませんが。

総合評価：QBBチーズ

# 余談
チーズの種類はたくさんあります。比較的食べる機会が多いプロセスチーズは、他のチーズとは少し変わった生成方法で作られています。
チーズと言えばどの様な生成方法を思い浮かべますか？
プロセスチーズは、1種類または数種類のナチュラルチーズを原材料としています。それらを細かく砕き、加熱をし、乳化剤を加えることで出来上がります。
つまりチーズの発酵の菌がほとんど死滅しているということです。そこに生きた乳酸菌はいません...
ちなみに私はナチュラルチーズもQBBも大好きです。

# いかがでしたでしょうか！？
チーズと納豆、お試しください！





[うまい]チーズと納豆は合う！

## 新年の挨拶

明けましておめでとうございます(もう正月終わったぞ？
今年はGrowthers全体で週１更新を目指してがんばります

## Gitのブランチ名をdelete/hogeするな

Oshaveryの開発中にファイルを大量に削除する機会があり、`delete/files`というブランチ名でブランチを切り作業を行いました。  
ローカルでブランチを切って作業を行い、GitHubへpushするところまではよかったのですが、 PullRequestの際に、delete/filesブランチにアクセスすると  

![github404.jpg](https://imgur.com/Ih8mrHy.jpg)

という風にhttps://github.com/404 へリダイレクトされてしまいました。  
  
ほぼ全ファイルを削除するというPRだったので、流石に不味いと思いブランチ名を`remove/files`にすることでGot a kotonakiとなりました。  

## 検証  
とりあえず、HTTPメソッドの中からPOST , GET , PUT , DELETE の4つをブランチ名に付けて検証してみます。  
ローカルでpost/testのようにブランチを切り、GitHubにpushして検証しました。  

![github_branches.jpg](https://imgur.com/6EU2zNP.jpg)

| ブランチ名  | 結果 |
| ----------  | ---- |
| POST/test   | ×    |
| GET/test    | ×    |
| PUT/test    | ×    |
| DELETE/test | ×    |
| post/test   | ×    |
| get/test    | ×    |
| put/test    | ×    |
| delete/test | 〇   |


追加検証として、GitLabに`delete/test`という名前のブランチを生やしてアクセスしてみたところ、普通にアクセスできました。


## まとめ

検証結果からは何もわかりませんでしたが、[Qiitaの元@500さん](https://qiita.com/nginx/items/e9afcdd7374c9eaeb472?isogp=flase)の様にルーティング周りのバグを踏んでしまった可能性が高いことがわかりました。  
今後は`delete/files`の様なブランチ名をつけるのはやめましょう。  


Gitのブランチ名をdelete/hogeにするな


この記事は[共同開発鯖 Advent Calendar 2021](https://qiita.com/advent-calendar/2021/growthers) 25日目の記事です。
## 美少女になってちやほやされて人生イージーモードで生きたい！ は良いぞ
サンタさんに「美少女になってちやほやされて人生イージーモードで生きたい！」と願ってもTS転生できませんでした。悲しいね

さて、ここ１年ぐらい推している作品を紹介します。  
[美少女になってちやほやされて人生イージーモードで生きたい！](https://syosetu.org/novel/217501/)  
作: [紅葉煉瓦](https://twitter.com/akaba_renga?isogp=false)  

この作品は、「TS転生した主人公が新進気鋭のVtuberグループに所属して、Vtuberとして活動していく」というストーリーが主軸となっている作品です。
主人公が見ていて飽きないので良いぞ

この作品、ストーリーの良さはさることながら、ハーメルンの特殊タグの使い方がすごいです。
具体的に言うと、特殊タグだけで、YouTubeの動画再生画面の再現などが行われています。

個人的にCSSが死ぬほど苦手なので、そういった面でも尊敬している作品です。
小説版を読むのに抵抗がある場合は[大生月](https://twitter.com/NmnmOtk)先生の手によってコミカライズされた[漫画版](https://seiga.nicovideo.jp/comic/56102?track=verticalwatch_epinfo1)をどうぞ

こよいちゃんがわちゃわちゃしていてめちゃくちゃかわいいので是非読んでください。


## 技術的な小話
こんな布教しかない記事がアドカレの最終日の記事だと殺されかねないので、仕方ないですが技術的な話をします。  

RustやTypeScriptでUTF-8の変数が使えるという話は有名ですが、C言語でもUnicodeが使えるという話をご存知でしょうか？  


例えばこのコードはClangやGCC 10以降ならコンパイルすることができます。  

```c
int main(void){
   char* ほげ = "ほげ";
   printf("%s\n",ほげ);
}
```

C言語では`\U0001F385`のようにUnicodeをエスケープすることで識別子として使用できます。  
また、コンパイラ依存ですが、エスケープしていない文字を使うこともできます。  
  
  
  

```c
int main(void) {
  char *🎅 = "Merry Christmas";
  printf("%s\n", \U0001F385);
}
```  


Unicodeが使えることが分かったら、コンパイルが通る範囲で遊んでみたくなりますよね？  
ということで、1ヶ月ほど前に生えたアホなコードを紹介していきます。  
  
```c
#include <stdbool.h>
#define たいぷでふ typedef
#define もし if
#define りたーん return
#define めいん main

たいぷでふ int いんと;
たいぷでふ void ぼいど;

いんと さいき(いんと ひきすう) {
  もし(ひきすう == 1) りたーん 1;
  りたーん ひきすう *さいき(ひきすう - 1);
}

ぼいど ぷりんとえふ(いんと ひょうじするやつ) {
  printf("%d\n", ひょうじするやつ);
}

いんと めいん(ぼいど) {
  ぷりんとえふ(さいき(10));
  りたーん 0;
}
```
  
このコードはClangもしくはGCC10以上でコンパイルすることができます。

こちらのコード、C言語で(処理系依存だけれど)日本語が使えるという話を聞き、知能指数をいい感じに下げながら書いたものです。  
これの前身となったコードを[Twitter](https://twitter.com/yuki_yuigishi/status/1463394403683160067?isogp=false)に貼ったら謎にウケました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">にほんごぷよぐらみんぐ <a href="https://t.co/1yQfAIfujI">pic.twitter.com/1yQfAIfujI</a></p>&mdash; 雪 (@yuki_yuigishi) <a href="https://twitter.com/yuki_yuigishi/status/1463394403683160067?ref_src=twsrc%5Etfw">November 24, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


```c
#define ㅤㅤ printf
#define ㅤㅤㅤ main
#define ㅤㅤㅤㅤ char*
ㅤㅤㅤ() {
  ㅤㅤㅤㅤ ㅤ = "TEST!";
  ㅤㅤ("%s\n",ㅤ);
}
```
[@kat0h 2021/11/25 22:38 のツイートより引用  ](https://twitter.com/kat0h/status/1463864756654071816?isogp=false)  
このコードはClangでのみコンパイルすることができます。  

こちらは@kat0hさんが書いた空白を変数名につかったコードです。 [ここ](https://paiza.io/projects/9Mjar0LlF2FMnU_4_Xzf_Q)から実行できます。  

このコードでは空白文字のHANGUL FILLER(U+3164)を変数名として使用しています。  
このコードをコンパイルすると  
```bash
$ clang test.c

test.c:4:1: warning: type specifier missing, defaults to 'int' [-Wimplicit-int]
<U+3164><U+3164><U+3164>() {
^
test.c:2:19: note: expanded from macro 'ㅤㅤㅤ'
#define <U+3164><U+3164><U+3164> main
                                 ^
test.c:6:3: warning: implicitly declaring library function 'printf' with type 'int (const char *, ...)' [-Wimplicit-function-declaration]
  <U+3164><U+3164>("%s\n",<U+3164>);
  ^
test.c:1:16: note: expanded from macro 'ㅤㅤ'
#define <U+3164><U+3164> printf
                         ^
test.c:6:3: note: include the header <stdio.h> or explicitly provide a declaration for 'printf'
test.c:1:16: note: expanded from macro 'ㅤㅤ'
#define <U+3164><U+3164> printf
                         ^
2 warnings generated.
```
  
こんな感じでU+3164を変数名として使っていることがわかります。  

## どの文字が識別子として使用できるのか  
C言語でUnicodeが使用できるのはC言語の仕様として制定されているからです(尚、エスケープされていない文字の使用は処理系依存)。  
では、逆にどの文字が使えないのでしょうか？  

ISO/IEC 9899:2011のドラフトを参照してみると  
> **Constraints**
> 2 A universal character name shall not specify a character whose short identifier is less than
> 00A0 other than 0024 ($), 0040 (@), or 0060 (‘), nor one in the range D800 through
> DFFF inclusive.73)
> **Description**
> 3 Universal character names may be used in identifiers, character constants, and string
> literals to designate characters that are not in the basic character set.
> **Semantics**
> 4 The universal character name \Unnnnnnnn designates the character whose eight-digit
> short identifier (as specified by ISO/IEC 10646) is nnnnnnnn.
> 74) Similarly, the universal
> character name \unnnn designates the character whose four-digit short identifier is nnnn
> (and whose eight-digit short identifier is 0000nnnn).  

「[ISO/IEC 9899:2011 N1570](http://www.open-std.org/jtc1/sc22/wg14/www/docs/n1570.pdf?isogp=false)  6.4.3 Universal character nemes」より引用  


> **制約事項**
> 汎用文字名は，短識別子が 0024 ($), 0040 (@), 0060 (') 以外の 00A0 未満の文字及び D800 から DFFFを含む73) 。
> **説明**
> 汎用文字名は、識別子、文字定数、文字列リテラルの中で、基本文字セットに含まれない文字を指定するために使用することができます。
> **セマンティクス**
> 世界共通文字名称 \Unnnnnn は、ISO/IEC 10646 で規定される 8 桁の短い識別子を nnnnnn とする文字を指します。
>  同様に、4桁の短縮識別子がnnnn（8桁の短縮識別子が0000nnnn）である文字を、Universal Character Name \unnnn で指定します。

DeepLによって翻訳

U+0024 ($), U+0040 (@), U+0060 (') 以外の U+00A0 未満の文字とU+D800 から U+DFFFまでは使えないようです。

U+00A0未満のUnicodeは[基本ラテン文字 (Unicodeのブロック)](https://ja.wikipedia.org/wiki/%E5%9F%BA%E6%9C%AC%E3%83%A9%E3%83%86%E3%83%B3%E6%96%87%E5%AD%97_(Unicode%E3%81%AE%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF?isogp=false))によると、ASCIIコードで表現できる文字にあたるそうです。
また、U+D800からU+DFFFはWikipediaの[Unicode](https://ja.wikipedia.org/wiki/Unicode#%E3%82%B5%E3%83%AD%E3%82%B2%E3%83%BC%E3%83%88%E3%83%9A%E3%82%A2?isogp=false)によるとサロゲートペアにあたるそうです。

つまり
```c
int main(void){
   int \u00000041 = 0;
   A = 1;
}
```
みたいなコードはコンパイルエラーになります。

## 終わりに
今回は、C言語でUnicodeを使用する際の注意点などをまとめてみました。
Cの規格書を探すのに少々苦労しましたが、使えるUnicodeの範囲を知ることができました。
C言語でUnicodeを識別子として使用するという記事はあまりなかったので、誰かの参考になれば幸いです。




美っち生イき は良いぞ！ あと、C言語のUnicodeの話


この記事は[共同開発鯖 Advent Calender 2021](https://qiita.com/advent-calendar/2021/growthers)の20日目の記事です.  

## はじめに  

先日, C言語でcsvのデータを分割するコードを書く機会があり, かなり手こずったので振り返りつつ書いていきたいと思います.  

### データ  

この記事で使用するcsvデータは以下のものとなります.  
```csv
goods,cost
pen,100
"pencil, eraser",200
ruler,110
```

## 方針  

初め, 以下の方針で文字区切りを行おうと考えていました.  

1\. `strtok`関数を使用して, `NULL`が返るまで`,`で区切る  
2\. 返ってきたデータを順番に構造体に入れる  
3\. 各行に対して1, 2を繰り返す  

1, 2に相当するコードは以下のようになります.
```c
#include <stdio.h>
#include <string.h>
/*
略
*/
char *tmpstr, str[256] = "goods,cost";
tmpstr = strtok(str, ",");
// , で区切り
while (tmpstr != NULL) {
    printf("%s\n", tmpstr);
    tmpstr = strtok(NULL, ",");
}
/*
略
*/
```

各行のデータを`str`に入れて実行すると以下のようになりました.  
```
goods
cost
pen
100
"pencil
 eraser"
200
ruler
110
```

以下のように出力してほしいのですが, `"pencil, eraser"`の中の`,`でも区切られてしまいうまくいきません.  
```
goods
cost
pen
100
pencil, eraser
200
ruler
110
```

ということで, `strtok`と同じような挙動をしつつも, `"`に囲まれた`,`は無視する関数を作成することにしました.  

## 関数の作成  

今回の関数は以下を満たす必要があります.  
- 区切り文字は`,`であること
- `"`で囲まれた区切り文字(`,`)は無視すること
- 区切った箇所から前の値は返し, 残りの値は保持すること
- `"`は返り値から除外する

`"pencil, eraser"`のような部分があったときに, `"`の部分は返す必要がなかったので, `"`を返り値から除外するということも盛り込みました.  

そうして作成した関数が以下です.  
```c
void csvsplit(char *result, char target[]) {
    static char savedstr[256];
    char delim = ',';
    char tmp[256], result_tmp[256], tail_tmp[256];
    target = target[0] != '\0' ? target : savedstr;

    if (target[0] == '\0') {
        strcpy(savedstr, "\0");
        strcpy(result, target);
        return;
    }

    strcpy(tmp, target);

    int isCut = 0, isContent = 0;
    for (int i = 0, result_index = 0, tail_index = 0; i < 256; i++) {
        // 末尾かどうか
        if (tmp[i] == '\0') {
            tail_tmp[tail_index] = '\0';
            if (!isCut) result_tmp[result_index] = '\0';
            break;
        }

        // 区切り後かどうか
        if (isCut) {
            tail_tmp[tail_index] = tmp[i];
            tail_index++;
            continue;
        }

        // ダブルクォーテーションかどうか
        if (tmp[i] == 0x22) {
            isContent = (isContent == 0) ? 1 : 0;
            continue;
        }

        // 区切られておらず, 区切り文字かどうか
        if (tmp[i] == delim && !isContent) {
            result_tmp[result_index] = '\0';
            isCut = 1;
            continue;
        }

        result_tmp[result_index] = tmp[i];
        result_index++;
    }

    strcpy(result, result_tmp);
    strcpy(savedstr,tail_tmp);
}
```

仮引数の`result`は結果を代入する変数を, `target`は区切る文字列を取るようになっています.  

そこから`tmp`を一文字ずつ確認し, `,`や`"`があるかどうか, 区切ることが可能な位置か(`isContent`), すでに区切りは完了しているか(`isCut`)などを変数使用するなどして管理するようにしました.  
返り値の部分は`result`に, 保持する部分は`savedstr`に代入して終了となっています.  

`savedstr`を区切る文字列にする場合, 仮引数の`target`には`"\0"`を代入します.  

Sayoiくんに一部修正してもらいました. ありがとうございます.  

## 挙動の確認  

作成した関数を使用して動作確認をしていきます.  

```c
#include <stdio.h>
#include <string.h>
void csvsplit(char *, char[]);
/*
略
*/
char tmpstr[256], str[256] = "goods,cost";
csvsplit(tmpstr, str);
// , で区切り
while (tmpstr[0] != '\0') {
    printf("%s\n", tmpstr);
    csvsplit(tmpstr, "\0");
}
/*
略
*/
```

各行のデータを`str`に入れて実行すると以下のようになりました.  
```
goods
cost
pen
100
pencil, eraser
200
ruler
110
```

これで無事, csvの分割を行うことができました.  


C言語でcsv分割


# 開発のすゝめ

この記事は[共同開発鯖 Advent Calender 2021](https://qiita.com/advent-calendar/2021/growthers)の16日目の記事です

## 書いてる人

こんにちは．しぐまです．  
土曜日にHackUの締め切りがあるのに一切進捗が生えていない絶望的な状況の中これを書いています．

## はじめに

みなさんはプログラミングをしていますか？　まあこんな記事を読んでいるくらいなのでたしなむ程度には最低でもやっているのではないでしょうか．  
かくいう私も，コロナによって遠隔授業になり，時間を持て余すようになったためプログラミングをはじめ，今ではハッカソンに出たり共同開発をしたりするようになりました．  
開発をするにあたって私が考えていることなどを書こうと思っています．思想強めです．ご了承ください

## なぜ書こうと思ったのか
アドベントカレンダーを書こうと思ってはいたものの，ネタが思いつかないなあ～と思っていたところこちらの[12日目の記事](https://blog.growthers.dev/re-taro/posts/how-to-develope-with-team/) 
を読んで面白かったので~~パクって~~リスペクトしてインスパイアを受けたので，書こうと考えた次第であります．XD

## プログラミングを学ぶとき

皆さんは新しいプログラミング言語を学ぼうとしたもののモチベが続かず，そのままほっぽってしまった経験，ありませんか？  
私は何回もあります．  

### どうやって続けるか

私は新しいプログラミング言語を学ぶときはたいていハッカソン等にチームで出場して，開発言語に学びたい言語や興味のある言語を採用するようにしています．  
ハッカソンには当然ながら締め切りがあるので，半強制的にやらなければならないという環境を自分で作り出すことができます．

### チーム開発をすると

楽しいし，人のコードを見ることでさらに新しいことを知ることができます．  
GitHubのレビュー機能を活用することで，自分のコードについての意見も貰えるし，他人のコードを見ることもできるので，非常に充実した開発をすることができます．  

## プログラミングができると

選択肢が増えます．  
困ったことがあって泣き寝入りしていたことがあっても，自分で作って解決できます．しかも楽しいです．  
学生向けに配信されたメールをLINEやDiscordなどにリマインドしたり，検温忘れが無いか確認したり...  
沢山ある自動販売機のどこに自分の飲みたい飲み物があるのか確認したり...　可能性は無限大です！

# みんなにいいたい

**わからないことがあったら人に聞け！！！！！！！！！！！！！！**

はい．これを読んでいる皆さんに伝いたいです．  
**わからないことがあったら，人に聞いて**ください．  
一人でずーっと悩んでいても，無理なものは無理です．  
自分よりもできる人がいるんだから，その人に聞いた方が良いです．  
もちろんすぐになんでもかんでも聞けというわけではありません．  
15~30分程度自分で調べて考えてみて，それでも解決しなかったら絶対に人に聞いた方が良いです．たいてい一瞬で解決します．  
たしか天下のgoogle様もこんなことを行っていたような気がします．

わからないことを素直に認めて人に聞けるようになりましょう．

## 終わりに
全然内容が思い浮かばず，内容の薄い短い文章になってしまいましたが許してください  


開発のすゝめ


この記事は[共同開発鯖 Advent Calender 2021](https://qiita.com/advent-calendar/2021/growthers)の15日目の記事です.  

いま見ているこのBlogを突貫工事で作成し2週間ほど経ったので, 振り返りつつ記事を書いていきたいと思います.  

## 開発概要  

Blogの最低限の機能の作成とデプロイまで  

|開発期間|開発メンバー|
|:-:|:-:|
|約2週間|4人|

## 作成の経緯  

あまり覚えていませんが, アドベント・カレンダーに合わせてBlogを作成できたらいいよねという話から始まった気がします.  
11月の頭あたりにそういった話があった気がしますが, 私を含めほとんどの人が11月は試験期間だったためすぐには開発は始まりませんでした.  

## 技術選定と環境構築  

### 技術選定  

このBlogは以下で作成されています.  
- Next.js / React
- Tailwind CSS
- SCSS

全く開発が進んでいないこの共同開発鯖のサイトで`React/Next.js`が選ばれていたこと, `Vue/Nuxt.js`が書ける人がいないことなどから, ~~独断で~~スムーズにフレームワークは決定できました.  

開発メンバーの1人が[Tailwind CSS](https://tailwindcss.com/)を使いたいとのことだったので採用しましたが, スタイルは全くやってくれませんでした...  

### 環境構築  

技術選定後, 環境構築はメンバーの1人にほとんどを担当してもらいました.  

- ESLintの導入
- Pritterの導入
- Jestの導入
- Storybookの導入
- CI設定
- Editorconfigの設定

お陰でスムーズな開発ができたと思います.  

## 記事表示部分の実装  

### 実装内容  

このBlogのデータは`data`というディレクトリに保存されています.  
このディレクリはBlogとは別のリポジトリで管理され, サブモジュールでBlogのリポジトリに取り込む形を採用しました.  

`data/articles`には作者ごとのディレクトリが置かれており, その配下に作者のプロフィール情報が保存された`profile.json`と各記事のディレクトリが置かれています.  
記事は`index.md`というファイルで保存されており, マークダウン記法限定のBlogとなっていますが, メンバーのほとんどはマークダウン記法が使えるので大きな問題ではありません.  

> `fuga`という記事を`hoge`というユーザーで作成した場合のディレクトリ構成
> ```
> ├ README.md
> └ articles
>     └ hoge
>         ├ profile.json
>         └ fuga
>             └ index.md
> ```

[ブログの書き方](https://blog.growthers.dev/Growthers/posts/how-to-post/)より引用  

### 実装  

このBlogは`Next.js`のSSGを使って生成されており, ビルド時に記事へのパスとページが生成, マークダウンの変換には[react-markdown](https://github.com/remarkjs/react-markdown)を使用し, 複数のプラグインも導入しています.  

動的ルーティングのSSG対応(?)は開発初期に1人のメンバーがすべてやってくれたため, 記事部分に細かい機能を加えるための時間がかなり確保できたと思います.  

- URLを新規タブで開くように
- OGP表示
- 記事の更新日付の自動取得

#### URLを新規タブで開くように  

ライブラリで変換された`a`タグは同一タブで開くようになってしまっているため, 新規タブで開くように変更しています.  

#### OGP表示  

[ogp-parser](https://github.com/ukyoda/ogpParser)を使用してサイトのタイトルなどを取得, 記事の行間に挿入しています.  

#### 記事の更新日付の自動取得  

[gitlog](https://github.com/domharrington/node-gitlog)を使用してGitのlogから記事の更新日を取得, 記事の先頭に表示させています.  

### 今後  

現在記事内すべてのURLにOGP表示を行っていますが, URLの次行にOGPコンテンツを強制的に挿入させているため, テーブルやコードブロック内に挿入され見た目が崩れてしまいました.  

これ以外にも問題点はあるので, 徐々に修正を行っていきたいと思います.  

## 感想  

大したことが書けませんでしたが, ひとまずBlogが形になってよかったと思います.  
gitのサブモジュールは使ったことがなかったのでいい経験になりました.  


Blog作成にあたって


この記事は共同開発鯖 Advent Calendar 2021 13日目の記事です。
https://qiita.com/advent-calendar/2021/growthers  

## はじめに

AtCoderをRustでCLIでやりたかったのでその記録です。

## cargo-competeのインストール
```sh
$ cargo install cargo-compete
```
`cargo install`はバージョンの更新をするのに向いてないので`cargo-update`も入れる。
```sh
$ cargo install cargo-update
$ cargo install-update --all # このコマンドで確認と更新ができる
```

## 使い方
詳しいことは[cargo-competeのREADME.md](https://github.com/qryxip/cargo-compete/blob/master/README-ja.md)を参照。

### 初期設定

任意のディレクトリで下記を実行

特に理由がなければ2を選択
(おそらく3を選択すれば任意のrustのバージョンとcrateが使える)

```sh
$ cargo compete init atcoder
Do you use crates on AtCoder?
1 No
2 Yes
3 Yes, but I submit base64-encoded programs
1..3: 2
$ cargo compete login atcoder
```

AtCoderで使用されるRustのバージョンは1.42.0なのでtoolchainを入れる。
```sh
$ rustup toolchain install 1.42.0
```

必須ではないが、templateを自分好みにいじる。

```toml
[template]
src = '''
use proconio::{fastout, input};

#[fastout]
fn main() {
    input! {
    }
    todo!()
}
'''
```

### 問題&テストの取得と提出

`new`でディレクトリを生成する。
引数はコンテストのURLの末尾(ex. abc230, abs, typical90)
`--open`をつけると問題文をブラウザで開く。


```sh
$ cargo compete new abs
$ cd abs
```

コードを書いたら`submit`でテストと提出

テストが失敗した場合提出は行われない。

```sh
$ cargo compete submit abc086a
```

## 感想

割と楽。

かつ快適。

CLIはいいぞ。

cargo-competeでAtCoder


# チーム開発のすゝめ

この記事は[共同開発鯖 Advent Calender 2021](https://qiita.com/advent-calendar/2021/growthers)の12日目の記事です

## 書いてる人

こんにちは。鈴鹿高専２年生の@Re-taroです。
テストの前後どちらも大会という地獄のデスマーチの合間を縫って執筆してます。

## はじめに

みなさんは**チーム開発**というものをしたことがありますか？
私は今年に入って初めて同級生とアプリを制作して大会に出ました。
そこで学んだことなどを踏まえてこの記事を書かせていただきます。
思想強めです。ご了承ください。

## 個人開発の場合

### 利点

- コミュニケーションコストがかからない
    - 趣味での開発の際、コミュニケーションを交わすことがありますか？私はありません。

- 自分のペースで開発ができる
    - 個人的な感想ですが、私が個人開発が好きな理由はこれにあります。判断や調整が自己完結するのは素晴らしいと思います。

### 問題点

- 一定規模の開発までしかできない
    - 三人寄ればなんとやらというように、スキルや物理的に可能な作業量が限定されるのでスケジュール上の問題が次第に発生してくると思います。

## チーム開発の場合

### 利点

- 新しい技術の導入も期待することができる
    - あなたの周りを見渡してみましょう。あなたとは違うことができる人がうじゃうじゃいますね？そういう人と組んで開発をしてみましょう。

- 楽しい
    - 正直な話、これに尽きます。一つのプロダクトを協力して開発するというのはとても楽しい体験だと感じます。

### 問題点

- コミュニケーションをスムーズに取るのが難しい
    - 開発のメンバーとのコミュニケーションが疎かになってしまうと、課題の共有、進捗、スケジュールの管理などに支障が出てしまいます。

- 差分や品質の管理が大変
    - 個人で開発しかしたことがない友人に尋ねると、ブランチを切ったこともマージしたこともないとのこと。私も意識して差分管理を行ったことがなかったため大量に競合を発生させました。また、今どのコードが正常に動作するかわからなくなるという自体も発生しかねます。

**コミュニケーション・差分管理・品質管理**。この３つの課題を解決するためにはどうすればいいかを書いていきます。

## 理想的なチーム開発

### コミュニケーション(MTG)が多い

- 最低でも週に2回はMTGをするべきだと私は思います。例を挙げると進捗の集まる日曜日と水曜日に進捗報告や課題、タスクを共有する。という感じです。

### VCSが適切に使用されている

- ソースコードが適切に管理されている。またドキュメントなどの設計書も整理されている。ブランチ、タグが適切に利用されていることで、バグ対応版、最新リリース版等がすばやく検索できる。などです。

### CIが導入されている

- 自動的にビルド、単体テストを実行し、チェックをすることで、コミット漏れや修正ミスにすぐに気付くことが可能で、コードの品質を保証できます。

## コミュニケーション

### プラットフォーム

正直色々なものがありますが、私はDiscordを推しています。理由としては、

- Webhookを用いて(後述する)GitHubと紐付けることが可能。

- 基本的にすべてのサービスを無料で使える。
    - Slackなどもいいと聞きますが、音声通話が有料プラン限定なので今回は見送りました。

などです。

### MTG

グループチャット機能を用いて積極的にMTGをしましょう。議事録などは取っておくと後で見返せて鬼のように便利です。
全体でのMTGの他にフロント同士などで頻繁に進捗は共有しておきましょう。
余談ですが、テキストちゃんねるにtimesを作っておくと、開発が終わったあとに見返せてとてもいいです。

[timesとは](https://note.com/vaaaaanquish/n/ncc512cf0e263)

実際の様子
![preview](https://i.imgur.com/E9U6YHz.png)


### チケット管理システム

タスク管理をするためにはかかせません
導入には以下のメリットがあります。

- 「何をしなければならないのか」が定義できる

- 「誰がするのか」という担当者のアサイン

- 「いつまでにするのか」という期限を決められる

- 「今どうなってるのか」というステータスを管理できる

- 情報の一元管理と共有が可能

### プラットフォーム

こちらもたくさんのシステムがありますが、私はGitHubを推しています。GitHubでチームのOrganizationは建ってますか？建っていなかったら、[こちら](https://docs.github.com/ja/organizations/collaborating-with-groups-in-organizations/creating-a-new-organization-from-scratch)から建てましょう。
このOrganizationの中でProjects↓
![preview](https://i.imgur.com/svkODpP.png)
を押してチケット管理を始めましょう。詳しくは[こちらの記事](https://qiita.com/itkr/items/0d4c0015da28827b2bb7)が詳しく解説しています。

## 差分管理

### How to 差分管理

いろいろ意見はあると思いますが、私はGitとGitHubを用いてます。
以下が開発の流れです。

- まずはmainブランチからはじめる
    - ローカルリポジトリでmainブランチに入る
    - リモートリポジトリでmainブランチの更新があるか確認する
- featureブランチで開発
    - featureブランチを切る
    - 開発する
    - 変更点をローカルリポジトリでcommitする
    - リモートリポジトリへpushする
- Pull Requestを出す
    - PRでレビューをしてもらう
- 最後にmainブランチへmerge
    - PRのレビューが終了したら、mainブランチへmergeする

です。

### ポイント

- 単純ですが、ちゃんとしたPRを出す・コンフリクトを防ぐためには必須です。
    - とにかく、コードを変更したくなったら、必ず一度mainに戻ってからブランチを切り直す癖をつけてください。
    - この一行を忘れて変なブランチから開発することで、コミット履歴がめちゃくちゃになります。git pullもgit diffも使い物にならなくなります。
    - コンフリクトを退治してたら日が暮れたとか悲惨なことになります。忘れないでください。

- mainブランチをルールで保護することをおすすめします。
    - (後述する)CIが通るまで。や、開発メンバーからレビューをもらうまで。などすることでコードの品質を保つことができ、また進捗の確認共有にも繋がります。

## CI

### CIとは

CIとは継続的インテグレーションの略でコードの変更をリポジトリにマージし、定期的・自動的にビルド・テストする手法のことを指します。詳しくは[こちらを](https://zenn.dev/t_kitamura/articles/8e32d83e24a76d)ご覧ください。

### 導入するメリット

CIを導入するメリットはコードの品質を保証するところにあります。
PRにあるそのコードを、私達は常々目視でレビューしますが、それが実際にビルドできるか、また正確に動作するかを保証するすべはありませんよね？CIを回すと、私達の手間とならずにテストやビルドを自動でできるようになります。

### How to CI

まず**ブルジョワ**のみなさん！[Jenkins](https://www.jenkins.io)や[Circle CI](https://circleci.com)などを使い倒しましょう。私は使い切れないので使ってませんが、、、。私のオススメはGitHub Actionsを使うことです。詳しくは[こちら](https://qiita.com/vZke/items/868eb9fd5289d2a25660)の記事で分かりやすく解説されています。

### ユニットテスト

ユニットテストとは，クラスや関数といった単位のプログラムのテストになります。
主に設計通りにこれらが動くかをテストし，論理構造が適切かを確認します。

- 機能確認テスト
    - 1つのモジュールが設計書や仕様書通りに動作することを確認するテスト
- 制御フローテスト
    - プログラムの論理構造に沿って，「命令」や「分岐」などが実行されるかを確認するテスト

などがあります。

### 結合テスト

結合テストとは，単体テストで検証したプログラムを組みわせて行うテストになります。

- 状態遷移テスト
    - 状態遷移図や状態遷移表に基づいて動作を確認するテスト

## おわりに

見返すといろんなリンクへ飛ばすだけのものとなってしまっていた、、、文章書くのって難しいですね。


チーム開発のすゝめ


この記事は共同開発鯖 Advent Calendar 2021 8日目の記事です  
https://qiita.com/advent-calendar/2021/growthers  

## はじめに

どうも雪です。アドカレのネタが思いつかず、ギリギリになってしまいました。
今回はPine A64に対応しているディストリビューションの１つArmbianのビルドをやってみたいと思います。最初に謝っておきますが、[アホ](https://twitter.com/yuigishidev)がMicro Bをなくしてしまったせいで動作確認ができていません。MicroBを見つけられたら後日追記します。


## Pine A64とは
Pine64という[PinePhone](https://www.pine64.org/pinephone/)や[PineTime](https://www.pine64.org/pinetime/)などのギーク向けのLinuxが動く製品数多く販売している企業の販売するシングルボードコンピュータの一つです。
### Pine A64とRaspberry Pi 3 Model Bの比較


|          | Pine A64+ | Raspberry Pi3 Model B |
| -------- | -------- | -------- |
| SoC     |1.152GHz 4 x Coretex A53|1.2GHz 64bit 4 x Coretex A53 |
| RAM     | 1GB 〜 2GB | 1GB |
|Ethernet | 1000BASE-T| 100BASE-T |
|映像出力  | HDMI | HDMI |
|Bluetooth| 技適未取得のため日本国内では使用不可| Bluetooth v4.1 BLE|
|無線LAN| 技適未取得のため日本国内では使用不可 |  IEEE802.11b/g/n (2.4GHz)|
|値段    | 1GB 2980円 / 2GB 4480円 | 4950円 〜|  

ラズパイ3 Model Bと似たスペックでラズパイ3 Model Bよりも安く買うことができます。
現在は[Pine A64+](https://www.pine64.org/devices/single-board-computers/pine-a64/)の後継機である[Pine A64-LTS](https://www.pine64.org/devices/single-board-computers/pine-a64-lts/)のみの販売になってしまったようですが、秋月電子通商などではまだ在庫が残っているようなので、興味のある方は買ってみてください。  

https://akizukidenshi.com

## Armbianとは  
> Armbian is a base operating system platform for single board computers (SBCs) that other projects can trust to build upon.  
>  
> - Lightweight Debian or Ubuntu based Linux distribution specialized for ARM development boards  
> - Each system is compiled, assembled and optimized by Armbian Build Tools  
> - It has powerful build and software development tools to make custom builds  
> - A vibrant community  
> 
Armbian Documentation [What is Armbian](https://docs.armbian.com/)より引用  

DebianやUbuntuなどの有名ディストリビューションがサポートしていないシングルボードコンピュータをサポートすることを目標としているビルドフレームワークらしいです。
シングルボードコンピュータ向けのイメージをかなり簡単にビルドできます。

## 実行環境
OS: Ubuntu 20.04.3 LTS x86_64
CPU: Ryzen 5 3600
Memory: 16GB
Shell: fish shell

## ビルド方法

### Armbian Build Toolsの入手
まず最初に、Armbian Build Toolsを入手します。
```
$ git clone --depth 1 git@github.com:armbian/build.git
$ cd build
$ ./compile.sh docker
```
locale関係のエラーでビルドが落ちまくったので、今回はdockerを使ってビルドします。
(たぶんjp_JP.UTF-8が存在しないせいだと思います)

https://github.com/armbian/build

たったこれだけで、ビルドツールが起動します。

![](https://i.imgur.com/964E8NQ.png)


Full OS image for flashingを選択して
今回はkernelをいじらないのでDo not change the kernel configurationを選択してください  


![](https://i.imgur.com/82sC9Al.png)
ボードの選択メニューが出てくるので、ビルドしたい対象を選んでください(今回はpine64)

![](https://i.imgur.com/5D6G79g.png)

current か legacyのどちらかを選択し、好きなディストリビューションを選択します。

あとは好きなように設定してください。　　

ビルド時間は30分ぐらいかかったので、気長に待ちましょう。

**検証ができているのはここまでです。この方法でビルドしたイメージが実際に起動できるかは保証できません**  

## 感想
思ったより簡単にビルドすることができて驚きました。
MicroBが見つからず、検証までたどり着けなかったのは残念ですが、見つかり次第検証してみたいと思います。

## 参考
[Armbian Documentation](https://docs.armbian.com/)


Armbian Build Battle


# Oshaveryを支える技術
これは[共同開発鯖アドベントカレンダー 2021](https://qiita.com/advent-calendar/2021/growthers) 7日目の記事です.  

Web系だけでなくBotやTRPGの話などいろいろな記事が出ているこのアドベントカレンダーですが,  
今日は***Oshaveryを支える技術*** の話をしていきたいと思います.  

<details><summary>筆者の自己紹介とかです.(長いので折り畳み)</summary>
    <a href="https://twitter.com/laminne33">@laminne33569</a>です.<br>
    この1年間はほぼずっとTSを書いています.<br>
    共同開発鯖にOshaveryの開発を提案した元凶の元凶で,
    当初からバックエンドの開発を担当しています.
</details>

### Oshaveryとは？
共同開発鯖で今年(2021年)の5月ぐらい[^1]から開発しているチャットアプリです.  
共同開発鯖のメンバー合計7人で共同開発(デザイナー1人とロゴを書いた1人を合わせて9人です)されました.  
詳しくは一日目の記事をご覧ください.
![Oshaveryのスクリーンショット](https://github.com/Growthers/Oshavery-Server/raw/master/docs/oshavery-screenshot.png)
(技育展[^2]開催期間中に実際に稼働していた時のスクリーンショット)

もともとは筆者([@laminne](https://laminne33569.net))が2020年11月～2021年5月の間で設計していたもの[^3]で,  
その仕様の一部を~~そのまま流用~~もとにして`Oshavery`のAPIを設計したので,  
仕様策定の期間が短く済みました.
![当時のスクリーンショット](https://i.imgur.com/406cIfd.png)
(当時のUI設計段階のスクリーンショット)

### TypeScript
JavaScriptの上位互換となる言語です.

`Oshavery`("オシャベリー"と読みます)は(現在)バックエンド/フロントエンドともに100%TypeScriptで書かれています.  
開発初期はGolangで実装されていましたが,いろいろ[^4]あってTypeScriptを使うことになりました.  

(Goと比べて)速度があまり早くないといった問題はありますが,  
開発コスト的にはTypeScriptで実装して正解だったのではないかと今は思っています.

### Express
JS製のWebサーバーフレームワークで,Node.js界で一番名を知られたフレームワークじゃないのかと言えるほど使われています  
型定義がありTS側から使えないことは無いですがリクエストボディに型がつかないなどの不満点があり(一番は速度が遅いことですが)Fastifyに乗り換えました

### Fastify
JS製の超高速(ベンチマークではNodejs組み込みの実装より高速)なWebサーバーフレームワークです.  
比較的新しく(日本語の情報は少ないものの),TypeScriptに標準で対応しているので採用しています.  
(他の特徴としてJSON Schemaでバリデーションが書けるとかありますが今の所採用できてません)

### Vue.js
フロントエンドフレームワークの一つで,Star数的にはReactを超えるとかなんとかなやつです.  
最近(と入っても去年の暮れ)v3が出たばかりでライブラリがv3対応していなかったりTSとの相性が良くないなどの微妙なところが多かったためNext.jsに乗り換えました

### Next.js
Reactをベースにした新しいフロントエンドのフレームワークです.  
画像を最適化してくれたりルーティングをいい感じにしてくれたりする便利なもの...みたいです  
`Oshavery`は当初Vueを使おうとしていましたが,TypeScriptとの相性が微妙ということがわかりNext.jsに落ち着きました.  
(`Oshavery`の開発はバックエンドとフロントエンドで分かれていて,バックエンド側の開発者である筆者はこの辺りはあまり詳しくありません...申し訳ないです)

### Prisma
TypeScript製のORM[^5]で,独自のスキーマファイルを書くことでそれに対応するTypeScriptの型定義を自動生成してくれます.  
SQL文を書く必要がなくクライアントも自動生成されるので,メソッドチェーンでつなげるだけで必要なデータを取り出せる利点があります.  

### WebSocket
サーバーとクライアント間で相互,かつリアルタイムにデータをやり取りするプロトコルです.  
主にメッセージの投稿や更新を通知するのに使われています.  
(技育展の期間ではWebSocketの設定ミスでリロードしないとメッセージを更新できないという状態になっていましたが,実際はWebSocketを通してリアルタイムで更新されます.)  
Socket.ioというライブラリが非常に有名ですが,`Oshavery`ではwsというライブラリを使っています[^6].

## 最後に
`Oshavery`はまだまだ開発の途上にある非常に若いアプリケーションです.  
(執筆時点ではマージされていませんが,現在の最新バージョンはv0.1.4)  
なんとなくの仕様は決まっていても明文化されていなかったり不明な部分もまだたくさん残っていますし
,  
メンバーが動ける時間は限られているので完成はいつ頃になるかはわかりませんが,頑張って開発を進めていきますので<ruby>応援<rp>（</rp><rt>プルリク</rt><rp>）</rp></ruby>よろしくお願いします.  
(何が言いたいかというと,結局のところコードに対して貢献してほしいということです.PRお待ちしています.)

[^1]: 共同開発鯖で仕様などをまとめ始めたのはこのころです
[^2]: サポーターズさんが開催している学生によるアウトプットの展覧会みたいなものです.  
`Oshavery`はこのイベントに共同開発鯖名義で出品しました.
[^3]: (構想自体は4年ほど前からありましたが,)Node.jsを使ってモダンなアプリケーションを作って自分の技術力を向上させることが目的でした.  
実際に開発してみて(去年と比較して)技術力は向上したと思っています.
[^4]: (メンバーが多忙だったこともあり)開発がストップしてしまったため,無理を言って言語を変えた歴史があります
[^5]: Object Relational Mappingの略で,データベースの操作などをしてくれるライブラリのこと
[^6]: Socket.ioも内部ではWebSocketを利用していますが,分厚いライブラリでのちにBotなどからアクセスすることを考えるとできるだけ薄いライブラリを使う必要がありました.そのため,`Oshavery`ではSocket.ioを使っていません



Oshaveryを支える技術


VimでMarkdownをプレビューするプラグインを作成しました(この記事は9月にZennに投稿した記事と同じテーマです)
![](https://user-images.githubusercontent.com/45391880/134791644-5f69ee3e-a6ab-4d24-878b-7131dc9a3f4c.gif)

9月頃から[bufpreview.vim](https://github.com/kat0h/bufpreview.vim)というVim向けのプラグインを作成していました。
Vim向けのMarkdownプレビュープラグインは過去にも存在していましたが、このプラグインは下記のような特徴をもっています。

- Typescriptで記述されたVimとは独立して動作する高速なサーバー
- nodejs製プラグインで必要だった依存関係のインストールが不要
- Github風のMarkdownレンダリング(yamlヘッダのレンダリングも含めて)
- 入力の即時反映
- カーソル位置とブラウザーの表示位置の同期

この記事はそれぞれの特徴について解説します。

## Typescript製サーバー
このプラグインは[denops.vim](https://github.com/vim-denops/denops.vim)を利用してTypescript実行環境であるDenoとVimを繋げ、通信しています。
Websocketでブラウザー間とJsonをやり取りしているので、Vimの状態を即座に反映することができます。

## nodejs製プラグインで必要だった依存関係のインストールが不要
この特徴は[https://github.com/iamcco/markdown-preview.nvim](https://github.com/iamcco/markdown-preview.nvim)にあるものです。

bufpreview.vimはmarkdown-preview.nvimの挙動を参考にして作成しました。非常に使い心地の良いプラグインでお勧めなのですが、nodejs製のプラグインであるため起動前に依存関係をインストールする必要があります。
依存関係の解消に(多少)手間がかかることは気軽に使うにあたって問題になることがあるかもしれません。

bufpreview.vimではサーバにDenoを使用しているため、依存関係が自動でインストールされます。

## Github風Markdownレンダリング
Markdownの仕様は核レンダラーごとに様々であり、混沌とした状況になっています。
このプラグインではレンダラーにjavascript製Markdownレンダラーの[markdown-it](https://github.com/markdown-it/markdown-it)を利用し、各種プラグインを取り入れおおまかにGFMを再現するようにしています。

また、Markdownの先頭にyaml形式の情報を付けるyamlヘッダのレンダリングにも対応しています。これは他のMarkdownレンダラにはない特徴です。
この機能を実現するために[markdown-it-yaml-header](https://github.com/kat0h/markdown-it-meta-header)というmarkdown-itプラグインを作成しました。(まだmainで利用していませんが。。)

### esm.sh
このプラグインではMarkdownのレンダリングをブラウザーで行なっています。普通nodejs向けに作られたライブラリはそのままブラウザーで読み込むことができません。
そこで、esm.shというnpmに公開されているモジュールをESModuleとして変換してくれるCDNを利用しています。これを利用することでブラウザーから下記の例のようにnpmが提供するライブラリを読み込めます。

```html
<!DOCTYPE html><html>
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css">
</head>
<body>
  <textarea id="text" style="height: 162px; width: 250px"></textarea><br>
  <button type="button" onclick="render()" label="Render">
    Render
  </button><br>
  <div class="markdown-body" id="body">
  </div><br>
  <script type='module'>
    import MarkdownIt from "https://esm.sh/markdown-it?bundle"
    const md = new MarkdownIt();
    const render = () => {
      var text = document.getElementById("text").value;
      text = text == null ? "" : text;
      const body = document.getElementById("body");
      body.innerHTML = md.render(text);
    }
    window.render = render;
    window.md = md;
    render();
  </script>
</body>
</html>
```

ブラウザーからESModuleを利用するには`<script type='module'></script>`としてjavascriptを記述する必要があります。また、moduleとして記述したjavascriptはstrictモードで読み込まれます。注意してください。(一敗)

ESModuleを利用することで、HTML一枚のみで様々なライブラリを管理しやすく実装することができました。(この仕組みがなければ、ここまでシンプルに依存関係を管理できませんでした)

## 入力の即時反映
Vimとサーバーをwebsocketで常時接続しているため、Vimへの入力はブラウザーへすぐに反映されます。

## カーソル位置とブラウザーの表示位置の同期
markdown-itのプラグインである、[https://github.com/digitalmoksha/markdown-it-inject-linenumbers](https://github.com/digitalmoksha/markdown-it-inject-linenumbers)を利用して入力行とレンダリングされた結果を対応させています。

## 今後
現状bufpreview.vimはmarkdown-itを利用したmarkdownのレンダリングのみにした対応していません。
現在任意のレンダラーを追加して利用できる仕組みを実装しようとしているのですが、仕様を考えるのが難しく未だ実装できていません。

任意のレンダラーに対応できるようになれば
- Markdown -> スライド
- 小説
- markdown-it以外のレンダリングエンジンに変更
などかなり柔軟に使えるようになると考えています。




Vimでmarkdownをプレビューするプラグインを作った


Markdown-itはjavascriptで実装されたMardownパーサーです。  
この記事ではMarkdown-itに独自記法を追加する方法を紹介します。  

完全な情報ではありません。markdown-itの構造を理解する助けにしていただく程度に活用いただけると幸いです。

初めにmarkdown-itの基本的な使用方法を記載します。  
npmからmarkdown-itパッケージをインストールしたのちnodejsから利用するか、esm.shやjspmをdenoやブラウザーで使えるようにしてください。  
```html
<!DOCTYPE html><html>
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css">
</head>
<body>
  <textarea id="text" style="height: 162px; width: 250px"></textarea><br>
  <button type="button" onclick="render()" label="Render">
    Render
  </button><br>
  <div class="markdown-body" id="body">
  </div><br>
  <script type='module'>
    import MarkdownIt from "https://esm.sh/markdown-it?bundle"
    const md = new MarkdownIt();
    const render = () => {
      var text = document.getElementById("text").value;
      text = text == null ? "" : text;
      const body = document.getElementById("body");
      body.innerHTML = md.render(text);
    }
    window.render = render;
    window.md = md;
    render();
  </script>
</body>
</html>
```

markdown-itはレンダリングのためにstring型のデータ(markdown文書)を受け取りstring型のhtmlを返却します。  
受け取った文字列はまずパーサーに渡され、辞書を要素に持つ配列であるトークンに分割します。  
分割されたトークンはルールに従って文字列を返す関数でstring型のHTMLに変換されます。  

## parser  
markdownの文書は大きく「block」と「inline」に分けることができます。  
(inlineはブロックの一種である"inline" blockでパースされます。)  
空行で区切られた段落や見出し、コードブロックなどは「ブロック」として扱われます。  
また、太字や斜体、打ち消し線などの段落の中に収まる要素などはinlineとして扱われます。  

それぞれをパースし、トークンに分割する関数はMarkdownItインスタンスの「MarkdownIt.prototype.parse()」として定義されています。  
(上記に記載したブラウザ用サンプルコードではレンダラーのインスタンスをwindowに公開しているため、consoleから実際の関数を直接覗き見ることができます。)  
トークンの配列はブロックごとに区切られ、インライン要素はトークンのchildrenに記録されます。  
[実際にトークンがブロックごとにパースされる部分](https://github.com/markdown-it/markdown-it/blob/master/lib/parser_core.js#L45-L53)
```javascript
Core.prototype.process = function (state) {
  var i, l, rules;

  rules = this.ruler.getRules('');

  for (i = 0, l = rules.length; i < l; i++) {
    rules[i](state);
  }
};
```

つまり、新しい文法を定義したい場合はパーサーに新しく関数を定義する必要があります。  

実際のトークンを確認する:  
markdown-it公式のdemoにはデバッグタブが用意されており、入力に対するトークンの様子を確認できます。  

## ルーラー  
パーサーから渡されたトークン列を実際のHTML文字列に変換するのがルーラーの仕事です。  
基本的に、トークン一つに対応する関数がトークンを渡されて呼び出されます。  

※ イメージ  
```
"heading_open" => "<h2>"
"heading_close" => "</h2>"
```

ここまでMarkdown-itの動作を説明したのでプラグインの作成方法の解説をします。  
下記はMarkdown-itで外部からプラグインを読み込み適用する例です。  
実際に実行するとわかりますが、:+1:といった絵文字記法がレンダリングされるようになります。  

```javascript
import MarkdownIt from "http://esm.sh/markdown-it?bundle"
import MarkdownItEmoji from "http://esm.sh/markdown-it-emoji?bundle"

const md = new MarkdownIt()
md.use(MarkdownItEmoji)
```

md.use()に渡された関数はMarkdown-itのインスタンスを引数に渡され、実行されます。  
例として下記のような関数を作成し、md.use()に渡してみましょう。  

```javascript
import MarkdownIt from "http://esm.sh/markdown-it?bundle"

function plugin(md) {
  console.log(md)
}

const md = MarkdownIt()
md.use(plugin)
```

コンソールを確認すると、インスタンスの中身が出力されていることがわかります。  
プラグインはこの`md.use()`に渡された関数のなかで、パーサー関数やルーラーをインスタンスに登録します。  

この記事では私の作成したGithubライクなYamlヘッダの表示プラグインを紹介します。
[https://github.com/kat0h/markdown-it-meta-header](https://github.com/kat0h/markdown-it-meta-header)
![](https://user-images.githubusercontent.com/45391880/141127221-b483acd7-8fad-461f-b943-58a419ff5901.png)

parser:  
パーサ関数には次の3つの引数を取り、真偽値を返す関数が期待されます。  
`(state, startLine, endLine, silent) => boolean`

これらの情報は文書の全て(`state.src`)などの状態と、現在読んでいる位置などの情報です。  
パースしたら、読んでいる行を示すカウンターを増やして別の文法をパースする関数に処理を引き継ぎます。  
また、パースしたでーたはトークン列の配列に格納します。  
渡された文書の位置が自分のパースする文法ではない場合、falseを返してください。  

実際にパースをしているコードは下記の通りです。
[https://github.com/kat0h/markdown-it-meta-header/blob/main/index.js#L7-L46](https://github.com/kat0h/markdown-it-meta-header/blob/main/index.js#L7-L46)
このパーサ部分は[markdown-it-meta](https://github.com/CaliStyle/markdown-it-meta)を基にしています。  

`state.src`や`state.line`から本文をパースし`state.push()`からトークン列にトークンを追加してください。  
[https://github.com/kat0h/markdown-it-meta-header/blob/main/index.js#L40-L45](https://github.com/kat0h/markdown-it-meta-header/blob/main/index.js#L40-L45)
```
// 新しいトークンをトークン列に追加(rendererにはmetaを使用する)
var token = state.push('meta', '', 0)
// 読み取ったYAML(辞書)を記録
token.content = yaml
// 元の行
token.map = [startLine, state.line]
token.children = [];
// パースした行の次
state.line = line + 1
return true
```

renderer:  
rendererは受け取ったトークン列とidxから必要な情報を取得し、stringのHTMLを返す関数です。  
parserでpushしたトークンは`tokens[idx]`で取得できます。


md.use()で読み込めるようにする:  
プラグインはmd.use()に渡すことで利用できるようにすることが望ましいです。  

[https://github.com/kat0h/markdown-it-meta-header/blob/main/index.js#L106-L109](https://github.com/kat0h/markdown-it-meta-header/blob/main/index.js#L106-L109)
```
function MarkdownItMetaHeader(md) {
  md.block.ruler.before('code', 'meta', meta_parse)
  md.renderer.rules.meta = meta_render
}
```

`md.block.ruler.before()`は特定のblockのパース前に実行するようにパーサーを登録します。
> なぜbefore()で登録する必要がある場合があるのか
> 今回作成したプラグインはMarkdownの`---`記法とバッティングします。  
> `---`記法が読み込まれる前にパース処理を挟むことができます。
> 詳細：[https://markdown-it.github.io/markdown-it/#Ruler](https://markdown-it.github.io/markdown-it/#Ruler)

`md.renderer.rules`にはrenderer関数を登録してください。これはparser関数で`state.push()`を実行する際の第一引数と同じキーを指定します。


以上で作成したプラグインを`md.use()`から読み込めるようになりました！
```
md.use(MarkdownItMetaHeader)
```



Markdown-itの拡張を作成する方法

# 共同開発鯖について

この記事は[共同開発鯖 Advent Calender 2021](https://qiita.com/advent-calendar/2021/growthers)の1日目の記事です  

~~1日目の記事のくせに12/1はあと1時間しかないよって？
\.\.\.\.\.\.君のような勘のいい読者は嫌いだよ~~  

## かいたひと
### [laminne33569](https://twitter.com/laminne33)
Hello world!  
どうも@laminne33569 です. Oshaveryの最初の仕様を書いた人間です  
予定では今日のアドベントカレンダーは他の人が書く予定になっていますが,  
鯖民誰でも編集できる形に変更しました(3人で共同執筆しています)  
  
### [唯岸 雪](https://twitter.com/yuki_yuigishi)

どもども唯岸 雪です.  
今日はDr.Pepperの日なので全人類ドクペを飲みましょう！  
色々とやばかったテスト期間が半分ほど終わり,明日はC言語のソースコードに日本語の変数名を混ぜるという遊びをすることを計画しています.  
テスト期間のせいで色々と動きづらくてつらい\.\.\.\.\.\.  

## 「共同開発鯖」とは？
2021年3月01日にできた(それなりに新しい)Discordのギルドです.  
元々は`Undecided`が英語の正式名称でしたが,(後述する)blogができた際に`Growthers`に改められました.
弊鯖は複数のkosen20s(2020年に高等専門学校に入学した人の総称)によって開設され,  
当初から(条件付き)完全招待制で他のコミュニティと比較するとかなりクローズドなコミュニティではありますが,  
それなりにアクティブに活動しています.

他のコミュニティと比較した時の特徴はこんな感じです.
- 全国各地の高専生(+高校生)が集まっている
- 20〜21sの(高専の中では)若いメンバーで構成されている
- 技術力の高いメンバーが多い
- LT会などのイベント開催を定期的に行っている

メンバー比は20s8割21s2割という感じです(2020年以降に高校か高専に入学した人であれば参加できます. 参加お待ちしてます.)

ここからは駆け足で紹介していきます(唐突なネタ切れ感)
## 主な活動
### 公式サイトの開発
![サイト スクリーンショット](https://i.imgur.com/sjdlpg5.png)
[共同開発鯖公式サイト](https://undecided.page.link/site/)


| 言語 | 開発期間 | 開発人数 |
| :-: | :-: | :-: |
| Python (Flask)| 2021年6月 | 2人 |

弊鯖の公式サイトです.
公式サイトと言っていますが、実用的な鯖民用ポータルとしても動きます.  
言語はPython(Flask)で、過去に開催したLT会の参加申し込み等はこのサイトからしていました.  
~~尚、Y\*\*\*\*e氏は勢い余ってFlaskで書いてしまった。反省しているなどと供述しており  
このサイトを貼ろうとするとガチトーンでやめてくれと言ってきます~~  
現在このサイトをNext.jsとFastifyで書き直すプロジェクトが進行中です.  
なお完成見込みはたっていません.  

### Oshavery - OSSなチャットアプリの開発
![Oshavery スクリーンショット](https://i.imgur.com/gjv5buj.png)
[Oshaveryのレポジトリ](https://github.com/growthers/Oshavery)
[発表資料](https://docs.google.com/presentation/d/1sZ22cryYs858neYH-BuY8v-uRiwi1SJSdMY0fKJnJ3U/edit?usp=sharing)
| 言語 | 開発期間 | 開発人数 |
| :-: | :-: | :-: |
| フロントエンド: Next.js (TypeScript)<br>バックエンド: express.js -> Fastify (TypeScript) | 2021年6月〜現在(開発中) | 8人 |

~~弊鯖初めて~~の共同開発プロジェクトとして6月に始まったプロジェクトです.  
技育展2021に共同開発鯖名義で出品した作品でもあります.  
Next.jsとFastifyで動いており,モダンな開発手法を学習するにはもってこいのプロジェクト(だと勝手に思っています).
開発途中,8月末にフロントエンドの実装をVueからNext.jsに変更したり、それに追従する形で、バックエンドもGolangからTypescriptに変更したりと、いろんな意味で炎上したプロジェクトでもあります.
現在も開発が続いています(リリースは未定)  

### blog - MarkDownで書けるブログの開発  

![](https://i.imgur.com/RMWcuge.png)

| 言語 | 開発期間 | 開発人数 |
| :-: | :-: | :-: |
| Next.js(SSG) | 2021年11月19日〜現在(開発中) | 4人 | 

あなたが今見ているものです.  
Blogの構想があった中、Y****e氏の提案でアドベントカレンダーに間に合うように限界スケジュールで開発されたプロジェクトです.  
katoさんやSayoiさんやY4eさんの頑張りでどうにかデプロイにこぎつけました.  

技術としてはNext.jsのSSGモードを活用し,ビルド時にMarkDown形式の記事を変換しているそうです(筆者は参加していないのであまりわかりません).
CSSフレームワークとしてTailwind CSSを利用しており,開発速度を加速させています.

## 最後に
まだまだ1年も立っていない若いサーバーですが,
これからもイベントや新規プロジェクトを立ち上げて行くつもり(?)です.
これからも宜しくおねがいします.
最新情報は公式アカウントや`#共同開発鯖`で鯖民が~~適当に~~発信していますのでぜひ...
[公式アカウント @udcGrowthers](https://twitter.com/udcgrowthers)

## 告知
明日(12/2)はうよりさんの記事「[TRPGで知る文章構築](https://note.com/mruyr/n/nd7cedff3d30a)」です. お楽しみに


「共同開発鯖」について


この記事は弊鯖民に向けた記事です.  
[共同開発鯖 Advent Calender 2021](https://qiita.com/advent-calendar/2021/growthers)の4日目の記事でもあります.  

## 最初に  

ブログのデータはすべて[ここ](https://github.com/Growthers/blog-data)で管理されています.  
作業をするにあたって, このリポジトリをForkしてください.  

## ユーザーの作成  

記事を初めて書く場合, ユーザーを作成する必要があります.  
`hoge`というユーザーを作成する場合, `articles/`に`hoge`というディレクトリを作成してください.  

#### ディレクトリ名を作成するにあたって  

このディレクトリ名はURLのパスなどにも使用されます.  
**なるべく変更せず, 半角英数字を使用してください.**  

### `profile.json`の作成  

以下の形式に従って, `profile.json`というファイルを`articles/hoge`に作成してください.  

```json
{
    "name": "Your Display Name",
    "icon": "Your Icon URL",
    "bio": "Your Biography",
    "site": "Your Website URL",
    "github": "Your GitHub ID",
    "twitter": "Your Twitter ID",
    "roles": ["Your Role 1", "Your Role 2...", "Your Role N"]
}
```

|key|description|require|
|:-:|:-:|:-:|
|name|表示名|必須|
|icon|アイコンURL||
|bio|自己紹介||
|site|サイトURL|
|github|GitHub ID||
|twitter|Twitter ID||
|roles|役割（配列）||

## 記事の作成  

記事を作成する場合, `articles/hoge`に記事名のディレクトリを生成してください. (半角英数字を推奨)  
**ユーザー名と同じく, ディレクトリ名がそのままURLのパスになります.**  

その後, 生成したディレクトリに`index.md`というファイルを作成し, そこに記事を書いていきましょう.  
**`index.md`以外のファイル名を使用することはできません.**

`fuga`という記事を`hoge`というユーザーで作成した場合のディレクトリ構成
```
├ README.md
└ articles
    └ hoge
        ├ profile.json
        └ fuga
            └ index.md
```

### メタ情報の設定  

`index.md`の先頭にメタ情報を設定する必要があります.  

|key|description|require|
|:-:|:-:|:-:|
|title|記事の表示タイトル|必須|
|date|記事の作成日 `yyyy-mm-dd` の形式|必須

例: 
```
---
title: fuga
date: 2021-12-01
---
```

メタ情報は今後のブログのアップデートとともに増えていく予定です.  

#### 画像の挿入  

以下のいずれかの方法によって記事で画像を使用することができます.  

|方法|詳細|
|:-:|:-:|
|記事と同じディレクトリに保存する||
|外部に保存する|[imgur](https://imgur.com)など|

#### ツイートを掲載する  

ツイートを掲載したい場合, URLのみを貼り付けるのではなく[こちらのサイト](https://publish.twitter.com/)を使用して, 埋め込みコードを貼り付けてください.  

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">弊鯖のアイコンを .<a href="https://twitter.com/771tenNext?ref_src=twsrc%5Etfw">@771tenNext</a> さんに書いていただきました✨<br>これからも弊鯖は色々やっていきます！<a href="https://twitter.com/hashtag/%E5%85%B1%E5%90%8C%E9%96%8B%E7%99%BA%E9%AF%96?src=hash&amp;ref_src=twsrc%5Etfw">#共同開発鯖</a> <a href="https://t.co/oEuvdeFf0J">https://t.co/oEuvdeFf0J</a></p>&mdash; 共同開発鯖 | Growthers (@UdcGrowthers) <a href="https://twitter.com/UdcGrowthers/status/1397186255490801667?ref_src=twsrc%5Etfw">May 25, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 記事の投稿  

記事を書き終えたら, 投稿をしましょう.  
最初にForkしたリポジトリにコミットをして, [blog-data](https://github.com/Growthers/blog-data)にプルリクエストを出します.  
2人以上のユーザーに承認され, マージされたら投稿完了です.  

## 最後に  

このブログへの記事の投稿方法を紹介しました.  
不明な点があれば, 気軽に質問をしてほしいと思います.  


Blogの書き方


# テスト投稿  

**共同開発鯖**
