【Ray.so】コードを美しく画像化してくれるサービス

2022年7月10日Webサービス

この記事では、CSS、HTML、JavaScriptなどのプログラミング言語を、綺麗に画像化してくれるウェブサービス「Ray.so」について書きます。

プログラミング言語（コード）を、綺麗に画像化できるウェブサイトです。

画像は、PNG、SVGで保存できます。クリップボードにコピー、URLのコピーも可能です。対応言語は、CSS、HTML、PHP、JavaScriptなど数多くあります。

サイトにアクセスして、コードを貼り付けます。Macを彷彿とさせるフローティングウィンドウ内にコードが表示されます。ウィンドウの左上には、Macの特徴である3つのボタンが表示されます。

背景色、背景のオンオフ、ダーク・ライトモードの切り替え、余白具合の調整などを設定できます。ウィンドウの上部にはタイトルバーがあり、中身のテキストを好きなように変更できます。

TwitterなどのSNSで、「こういった感じでコードを書けば、機能を実装できるよ～」と伝えたい時に便利です。

提供元：Raycast（Twitterはこちら）

アクセス方法

以下のリンクからアクセスできます。

Create beautiful images of your code

Turn your code into beautiful images. Choose from a range of syntax colors, hide or show the bac ...

https://ray.so/

サイトにアクセスしたら、ウィンドウが表示されます。既にサンプルコードが書かれているので、Ctrl＋Aで全選択→画像化したいコードを上書きします。

試しに、Vivaldiブラウザで僕が使っているカスタムCSSを貼り付けてみたいと思います。

貼り付けたら、下部のツールバーから、外観を調整していきます。まずは、「Language」でコードの言語を選択します。CSSの場合は、CSSを選択します。

必要に応じて、タイトルバーの名前を変更してみましょう。このコードは、どういった内容なのか完結に書いておくと、後から見返す時に便利かもしれません。

タイトルバーの「Untitled-1」をダブルクリックすると編集モードになるので、既存の文字を削除して、新しく書き込みます。

「Colors」で、背景（グラデーション）の色を設定できます。僕が確認したところ、8種類のグラデーションが用意されていました。変更すると、背景のグラデーションだけでなく、一部文字の色も変更されます。

背景が不要な場合は、「Background」をオフにします。

「Export」で、画像を保存します。4つの保存方法が用意されています。

実際に、PNGで保存した画像を貼っておきます。普通にコードをスクショするよりも、綺麗です。

以上、プログラミング言語をMacっぽいウィンドウに埋め込んで、綺麗に画像化してくれるウェブサービス「Ray.so」でした。

JavaScriptとか、Pythonとかできるようになりたいものです。やりたいとは思っているのですが、いかんせん時間が圧倒的に足りません。色々なものに手を出すのは大変ですね～。