広告を利用しています

当サイトは広告を掲載しています。消費者庁が2023年10月1日から施行した景品表示法の規制対象(通称:ステマ規制)にならないよう配慮して記事を作成しています(記事はこちら、消す方法はこちら

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

Webサービス

「Ray.so」のアイコン画像

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

コードを画像化する「Ray.so」サイトのスクリーンショット

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

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

サイトにアクセスしてコードを貼り付けます。

Macを彷彿ほうふつとさせるフローティングウィンドウ内にコードが表示されます。ウィンドウの左上にはMacの特徴である3つのボタンが表示されます。

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

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

とはいえあくまで画像なので相手にコピーさせたい時は不親切だと思います。コードを別のところに記載できる形で書くか、コピペさせる目的はなく見せたいだけの時には便利そうです。

リリース元:RaycastXGitHubYouTube

アクセス方法

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

使い方

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

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

「Ray.so」サイトでCSSコードを貼り付けた画像

言語の変更

貼り付けたら下部のツールバーから外観を調整していきます。

「Language」でコードの言語を選択します。CSSの場合はCSSを選択します。

「Ray.so」で「Language」ドロップダウンリストを表示している画像

CSS、HTML、JavaScript、TypeScript、Python、Java、C++、C#、PHP、SQLなどのメジャーなものから僕みたいな初心者は聞いたこともない言語まで沢山ありました。

タイトルの変更

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

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

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

背景の調整

「Colors」で背景(グラデーション)の色を設定できます。

変更すると背景のグラデーションだけでなく一部文字の色(ハイライト装飾)も変更されます。

「Ray.so」サイトで背景色を変更する手順画像

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

「Ray.so」サイトで背景色を透過させる手順画像

行番号の表示

「Line numbers」をオンにすると、コード画面左側に行番号が表示されます。

「Ray.so」サイトでコード画面に行番号を表示させる手順画像

余白具合

「Padding」で余白具合を調整できます。

「Ray.so」サイトで余白具合(padding)を128にした画像

16にすると背景が最小限になります。

「Ray.so」サイトで余白具合(padding)を16にした画像

整形

うまい具合改行されていないコードを貼り付けてから右上の「Format Code」をクリックします。

「Ray.so」サイトに貼り付けたコードを整形する手順画像1

コードが整形されます。

「Ray.so」サイトに貼り付けたコードを整形する手順画像2

元々「Visual Studio Code」で自動整形されているコードを書き込んで「Format Code」を押してみると、より画像に最適化された状態に整形してくれたので、基本的には押すほうがいいのかなと思います。

画像の保存

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

「Ray.so」サイトで作成した画像を保存する手順画像
Save PNG【PC内に保存】PNG拡張子で保存
Save SVG【PC内に保存】JPG拡張子で保存
Copy image画像をクリップボードにコピー
Copy URL画像のURLをコピー
Size画像の解像度(サイズ)

実際にPNGで保存した画像を貼っておきます。メモ帳に貼り付けたコードをただスクリーンショットするよりも綺麗だと思います。

「Ray.so」サイトでコードを綺麗に画像化したCSS画像
「Ray.so」サイトでコードを綺麗に画像化したCSS画像
「Ray.so」サイトでコードを綺麗に画像化したHTML画像
「Ray.so」サイトでコードを綺麗に画像化した赤テーマのCSS画像

感想

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

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

2022年7月10日Webサービス

Posted by ナポリタン寿司