日頃より株式会社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】リセットする左下の「リセット」ボタンをクリックすると入力内容がクリアされ、プレビュー画面も初期化されます。