お知らせINFORMATION

コードやテキストを貼るだけで即座に確認できるマルチプレビューツール「Preview」を公開しました。

日頃より株式会社SMO南小国のホームページをご覧いただき、誠にありがとうございます。

この度、当社公式HPにて、Web制作やデータ確認作業を効率化するシンプル&静音なマルチプレビューツール「Preview」を公開いたしました。

「作成したHTMLやMarkdownの表示結果をすぐに確認したい」「JSONデータの中身を綺麗に整形してチェックしたい」「CSSの適用具合をさっとテストしたい」といった、日々のWeb制作やデータ確認で発生するちょっとした作業を、手軽かつスムーズに行えるツールです。

コードを貼り付けるだけでフォーマットを自動判別し、ワンクリックで別ウィンドウにプレビュー表示します。
日々の業務やWeb制作のツールとして、ぜひご活用ください。

◼︎Previewの主な特徴フォーマットの自動判別

コードを貼り付けるだけで、HTML、JSON、SVG、Markdown、CSS、Textの各形式を自動で検知・判別します。

・多彩な形式のプレビュー表示HTML / SVG
ブラウザ上での実際の描画結果をそのまま表示。

・JSON
複雑な構造データを読みやすく自動インデント・整形して表示。

・Markdown
見出しやリストなどを美しいWeb表示用スタイルに自動変換。

・CSS
サンプルUI要素(見出し、本文、ボタンなど)にスタイルを適用してテスト表示。  キーボードショートカット対応

Cmd + Enter(Windowsは Ctrl + Enter)を押すだけで、マウス操作なしで瞬時にプレビューを表示できます。

◼︎基本的な使い方

【1】コード・テキストを貼り付ける入力エリア(< /> 入力)に、確認したいコードやテキストを貼り付けます。  右上の「FORMAT」欄に、判別されたファイル形式(HTML、JSON、Markdown等)がリアルタイムで表示されます。

【2】プレビューを表示する画面右下の「プレビューを表示」ボタンをクリック(または Cmd/Ctrl + Enter)します。  別ウィンドウが立ち上がり、レンダリングされた表示結果を確認できます。
※一度開いたプレビューウィンドウは、コードを打ち替えて再度実行すると最新状態に更新されます。

【3】リセットする左下の「リセット」ボタンをクリックすると入力内容がクリアされ、プレビュー画面も初期化されます。

  ▶︎ https://smo-minamioguni.jp/Preview/