チャットツールでコードを壊さない送信方法


多くのチャットツールにはメッセージ文中に特定のパターンに合致する並びで記号を入れることにより、
記号が消えて書式設定が適用されるようになっている。

- 特定の記号で文字を挟むと「**太文字**」「*斜体*」「~~取り消し線~~」のような書式が適用される
- 特定の記号の並びで絵文字に変化する :slight_smile:

このため、チャットのメッセージにプログラムのソースコードをそのまま貼り付けて送ろうとすると、
一部の記号が消えてしまい、**コードが正しく動かなくなってしまう**ことがある。

また、チャットツール以外でも、以下のような方法でコードをやり取りすると勝手に一部の文字が大文字や全角文字に化けたり、謎の空白や改行が入り込むことがあるので同様にオススメできない。

- Eメール本文に貼り付けて送信
- PDFファイルに保存して送信
- Wordファイルに保存して送信

# チャットツールでコードを壊さない送信方法
一番無難なのは以下の2つ。

- **テキストファイル**にコードを保存してやり取り
- [Gistのようなソースコード共有ツール](https://qiita.com/hkusu/items/18cbe582abb9d3172019)を使う

それでもどうしてもチャットメッセージで直接コードをやり取りしたい場合、
それぞれ以下の方法を使用することにより、文字化けを回避できる。
## Skype
チャット本文にそのままコードを貼り付けた場合、アンダーバーやアスタリスク、チルダ記号などが消えてしまうことがある。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103957/4abcb5d2-8ee8-ba40-49cd-fed4fa4af945.png)

※下に表示されているコードが入力して送信したメッセージ。
上に表示されているコードが送信したメッセージが実際に表示されたもの。アンダースコア記号とアスタリスク記号が消滅している。

また、記号の並びによってはコードが絵文字化してしまう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103957/980f64ea-5a20-fdbd-06b7-00a5acc17d79.png)


### 解決策
#### `{code}`の使用
`{code}●●●{code}`のようにコードを囲う

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103957/ecefb7f7-8cbd-a245-5c21-c6d620f87dc8.png)

#### 参考

- [Skype インスタント メッセージ内のテキストを書式設定する方法は? | Skype サポート](https://support.skype.com/ja/faq/FA34696/skype-insutanto-metsusezinei-notekisutowoshu-shi-she-ding-surufang-fa-ha)

#### メッセージ先頭に`!!`の行を入れる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103957/f7cce104-0264-94da-cef8-6b1a9ad46b92.png)

##### 参考

- [How To Send Code On Skype With Proper Formatting](https://www.addictivetips.com/windows-tips/send-code-on-skype/)

## Chatwork
角括弧記号内に特定の言葉が入ると化けることがある。
また、今は大丈夫でもChatworkの書式機能が今後追加されることにより、角括弧記号の中の文字が後から化けるおそれもある。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103957/4a602ee0-ffa0-4cd3-6efb-f191d739c5fd.png)
※下に表示されているコードが入力して送信したメッセージ。
上に表示されているコードが送信したメッセージが実際に表示されたもの。`[hr]`の部分が水平線に化けている。

### 解決策
#### `[code]●●●[/code]`のように計測タグを囲う

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103957/5dbfad0a-8c69-e217-24d7-4bbe106e1af7.png)

##### 参考

- [ついに「codeタグ機能」をリリース！ソースコード表示もより見やすくなりました！ | Chatworkブログ](https://blog-ja.chatwork.com/2015/01/codetag-release.html)
- [投稿に装飾はできますか？ – サポート | Chatwork](https://help.chatwork.com/hc/ja/articles/203127904-%E6%8A%95%E7%A8%BF%E3%81%AB%E8%A3%85%E9%A3%BE%E3%81%AF%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%81%8B-)

## Facebook

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103957/7652c663-27e0-71f9-ffae-bfe2a7660ecb.png)


### 解決策
#### コードの上下の行をバッククォート3文字で囲む
> \`\`\`
> ●●●
> \`\`\`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103957/e3d4c7a9-e165-b0dc-609c-812faf9db8b5.png)

##### 参考

- [Facebookチャットでテキストの書式を設定するにはどうすればよいですか。 | Facebookヘルプセンター](https://www.facebook.com/help/147348452522644)

#### 装飾される前のメッセージを表示する

メッセージの隣に表示される「・・・」のアイコンをクリックすることにより、
記号が消える前のテキストを表示することもできる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103957/d3a0589a-fc8e-6348-fd90-1dca505931fb.png)

## Typetalk

### 解決策
#### コードの上下の行をバッククォート3文字で囲む
> \`\`\`
> ●●●
> \`\`\`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103957/8b8a8760-4d82-e6d9-eed4-e2c921491c1e.png)

最初のバッククォートの後に言語名を付けることで、言語に合った色つけをしてくれる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103957/29fb6a3a-a3df-5907-f366-893fe34292f1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103957/0249a0bd-08b8-028d-34a8-e5451a0d5909.png)

- [テキストを整形するにはどうすれば良いですか？ – Typetalk サポート](https://support.typetalk.com/hc/ja/articles/212900337-%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%92%E6%95%B4%E5%BD%A2%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF%E3%81%A9%E3%81%86%E3%81%99%E3%82%8C%E3%81%B0%E8%89%AF%E3%81%84%E3%81%A7%E3%81%99%E3%81%8B-)

## Slack
### 解決策
やり方いろいろ

- [【Slack】ソースコードを送信する３つの方法 | じゅもん　をおぼえた！](https://air1p1.com/2019/04/27/slack-snippet/)
- [スニペットを作成する | Slack](https://slack.com/intl/ja-jp/help/articles/204145658-%E3%82%B9%E3%83%8B%E3%83%9A%E3%83%83%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B)
- [メッセージの書式設定 | Slack](https://slack.com/intl/ja-jp/help/articles/202288908-%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%81%AE%E6%9B%B8%E5%BC%8F%E8%A8%AD%E5%AE%9A)