みなさんこんにちは!おさかなです!
今回は「Ray.so」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・プログラムを書いている方
・人に見せるための、コード画像がほしい方
・コードをきれいに見せたい方
コード映え?!
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
インスタ映えみたいに、コード映えする時代来ないかな…。
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
とっくに来てるよ!「Ray.so」に!
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
ひええええ
(時代の流れについていけない、おさかな氏)
![](https://osakanav.com/wp-content/uploads/2021/10/webskills-top-160x90.png)
「Ray.so」って何?
「Ray.so」とは、プログラムのソースコードをきれいに見せる画像が作れるツールのことです。
カスタマイズすることで、いい感じの見栄えにしてくれるので「コードを人に見せたい時」や「SNSで共有したい時」などに活躍すること間違いなしです!(いいね!)
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/215d95b61901d478f80e8dd11cf08fd3.png)
![](https://osakanav.com/wp-content/uploads/2021/11/web-stories-top-160x90.png)
実際につかってみよう!
それでは早速サイトにアクセスします!
![](https://osakanav.com/wp-content/uploads/2021/11/rayso.png)
デフォルトではSwiftUIのコードが入力されており、その下のメニューバーから見た目をカスタマイズすることができます!(ふむふむ…。)
![](https://osakanav.com/wp-content/uploads/2021/11/rayso-menu.png)
カスタマイズできる項目は、全部で5つ!
・Colors 色
・Background 背景
・Dark mode ダークモード
・Padding 余白
・Language プログラム言語
Colors 色
ここでは4種類の中から「色」を選択することができます!(どれもキレイ✨)
![](https://osakanav.com/wp-content/uploads/2021/11/rayso-coloro.png)
Candy
![](https://osakanav.com/wp-content/uploads/2021/11/rayso-candy.png)
Breeze
![](https://osakanav.com/wp-content/uploads/2021/11/rayso-p64.png)
Midnight
![](https://osakanav.com/wp-content/uploads/2021/11/rayso-midnight.png)
Subset
![](https://osakanav.com/wp-content/uploads/2021/11/rayso-sunset.png)
Background 背景
ここでは背景のあり/なしを決めることができます。(ふむふむ…。)
背景あり
![](https://osakanav.com/wp-content/uploads/2021/11/rayso-bg.png)
背景なし
![](https://osakanav.com/wp-content/uploads/2021/11/rayso-bgno.png)
Dark mode ダークモード
ここではスイッチのオン/オフを切り替えることで、ダークモードを使用することができます!
(待ってました!)
デフォルト
![](https://osakanav.com/wp-content/uploads/2021/11/rayso.png)
ダークモード
![](https://osakanav.com/wp-content/uploads/2021/11/rayso-p64.png)
Padding 余白
ここでは背景の余白を決めることができ、数字が小さいほど、余白も狭くなります!(なるほど!)
16
![](https://osakanav.com/wp-content/uploads/2021/11/rayso-p16.png)
32
![](https://osakanav.com/wp-content/uploads/2021/11/rayso-p32.png)
64
![](https://osakanav.com/wp-content/uploads/2021/11/rayso-p64.png)
128
![](https://osakanav.com/wp-content/uploads/2021/11/rayso-p128.png)
Language プログラム言語
基本的にプログラムを記述すると、自動的に「言語」を認識してくれますが、わかりやすくするために手動で設定しておいても良いでしょう!
![](https://osakanav.com/wp-content/uploads/2021/11/rayso-lang.png)
少し長めのPythonプログラムを書いてみると、こんな感じでコードに合わせて画面も大きくなりました!(おお!)
![](https://osakanav.com/wp-content/uploads/2021/11/raysopy.gif)
カスタマイズが完了したら、メニューの一番右にある「Export」ボタンを押しましょう!(ポチッと)
![](https://osakanav.com/wp-content/uploads/2021/11/rayso-export.png)
4つの形式で保存することができるので、用途に合わせて選択します。
(今回はURLとpng形式にしました!)
![](https://osakanav.com/wp-content/uploads/2021/11/rayso-save.png)
↓実際に保存した画像がこちら
Pythonのコード
(ピンクと紫でとってもオシャレになりました!)
![](https://osakanav.com/wp-content/uploads/2021/11/raycast-untitled-python-pink.png)
背景がないとこんな感じ!
![](https://osakanav.com/wp-content/uploads/2021/11/raycast-untitled-no-bg.png)
ちなみにシンタックスハイライトは付きませんが「日本語」も普通に入力できます!(わーお!)
![](https://osakanav.com/wp-content/uploads/2021/11/raycast-untitled-jp.png)
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
コードの見栄えも良くしちゃおう〜!
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2021/07/deep-javascript-160x90.jpg)