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

Webサービス

「Ray.so」のアイコン

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

「Ray.so」のスクリーンショット

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

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

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

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

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

提供元:Raycast(Twitterはこちら

アクセス方法

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

使い方

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

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

Ray.soにアクセスして、画像化したいコードを貼り付ける

言語の変更

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

「Language」でコードのドロップダウンリストを表示している画像

タイトルの変更

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

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

タイトルバーの「Untitled-1」をダブルクリックして編集している画像

背景の調整

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

「Colors」のドロップダウンリストを表示した画像

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

画像の保存

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

「Export」のドロップダウンリストを表示した画像
Save PNG【PC内に保存】PNG拡張子で保存
Save SVG【PC内に保存】JPG拡張子で保存
Copy image画像をクリップボードにコピー
Copy URL画像のURLをコピー

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

Ray.soでCSSを画像化した画像

感想

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

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

Posted by ナポリタン寿司