json to html

Node.js を使用して、オンラインで JSON を HTML に変換します。

JSON20データをHTML21形式で表示することは、ダッシュボードやビジュアルレポートを構築する際、または構造化データをウェブコンテンツに埋め込む際に不可欠です。データを手動でフォーマットするのではなく、強力なGroupDocs.Conversion Cloud SDKを使用してNode.jsでJSONをHTMLに変換できます。これは、ドキュメント変換を簡素化するREST APIです。

このチュートリアルでは、Node.jsを使用してJSONファイルをクリーンでブラウザ対応のHTMLドキュメントに変換する方法をご紹介します。

📌 クイックナビゲーション

🚀 JSONをHTMLに変換する理由は？

HTML はウェブ上でデータを表示するための標準形式です。JSON (JavaScript Object Notation) を HTML に変換することにより、開発者は:

  • ✅ ユーザーフレンドリーなレイアウトで構造化データを表示します。
  • ✅ ウェブサイトやウェブアプリにJSONを埋め込む。
  • ✅ ネストされた JSON から読みやすいテーブルやブロックを作成する。
  • ✅ API レスポンスを読みやすい HTML ページにエクスポートします。

⚙️ GroupDocs Node.js SDK をインストールする

GroupDocs.Conversion Cloud SDK for Node.js は、JavaScript ベースのアプリケーションにファイル形式変換を統合するための軽量な方法を提供します。始めるには:

  1. npm を使用してインストール:
npm install groupdocs-conversion-cloud --save
  1. API認証情報(クライアントIDおよびクライアントシークレット)を GroupDocs Cloud Dashboard から取得してください。詳細については、この tutorial に記載されている手順に従ってください。

🛠️ JSONをNode.jsでHTMLに変換する

以下は、Node.jsでGroupDocs.Conversion Cloud SDKを使用してJSONファイルをHTMLに変換する方法です：

📌 ステップ 1: SDK をインポートし、APIを設定します

const { Configuration, ConvertApi, FileApi, UploadFileRequest, ConvertSettings, ConvertDocumentRequest } = require("groupdocs-conversion-cloud");
const config = new Configuration("YOUR_CLIENT_ID", "YOUR_CLIENT_SECRET");
const convertApi = new ConvertApi(config);
const fileApi = new FileApi(config);

📌 ステップ 2: JSON ファイルをクラウドにアップロード

const fs = require("fs");
const uploadRequest = new UploadFileRequest("input.json", fs.createReadStream("input.json"));
await fileApi.uploadFile(uploadRequest);

📌 ステップ 3: 変換オプションを設定します (JSON → HTML)

const settings = new ConvertSettings();
settings.filePath = "input.json";
settings.format = "html";
settings.outputPath = "converted/output.html";

const request = new ConvertDocumentRequest(settings);
await convertApi.convertDocument(request);
console.log("✅ JSON converted to HTML successfully.");

// More examples over https://github.com/groupdocs-conversion-cloud/groupdocs-conversion-cloud-dotnet
// API 認証情報を取得する 
string clientId = "XXXXXX-XXXXXXXXX-4088-9ca0-55c38f4b7f22";
string clientSecret1 = "XXXXXXXXXXXXXXXXXXXX";

// Configurationクラスのインスタンスを作成し、クライアントIDとクライアントシークレットで初期化します。
Configuration configuration = new Configuration(clientId, clientSecret);
// APIのベースURLを定義して、オンラインでJSONからHTMLへの変換を行います。
configuration.setApiBaseUrl("https://api.groupdocs.cloud");

// ConvertApi のインスタンスを Configuration オブジェクトで初期化します
ConvertApi convertApi = new ConvertApi(configuration);

ConvertSettings settings = new ConvertSettings();
settings.setStorageName("internal");
settings.setFilePath("input.json");
settings.setFormat("HTML");
settings.setOutputPath("myResultant.html");
    
// ConvertDocument メソッドを使用して JSON を HTML ファイルに変換します。
ConvertDocumentRequest request = new ConvertDocumentRequest(settings);
List<StoredConvertedResult> response = convertApi.convertDocument(request);
    
// レスポンスを確認し、成功メッセージを印刷します。
if (response != null && response.equals("OK")) {
    System.out.println("Conversion successful! Resultant HTML file is saved at: " + response.getFilePath());
}
json to html

画像:- Node.jsを使用して行われたJSONからHTMLへの変換のプレビュー。

  • 上記の例で使用される入力 JSON は このリンク からダウンロードできます。

💻 JSON を cURL を使って HTML に変換する

GroupDocs.Conversion Cloud を cURL コマンドで使用する際に、JSON から HTML への変換も行うことができます。このアプローチは、自動化とさまざまなワークフローへの統合を単純化するだけでなく、プラットフォームに依存しない、スクリプトが簡単で、高品質のデータ変換を広範なコーディングを必要とせずにシームレスに提供します。

クライアント資格情報に基づいてJWTアクセストークンを生成し、次のコマンドを実行します:

curl -v "https://api.groupdocs.cloud/v2.0/conversion" \
-X POST \
-H "accept: application/json" \
-H "authorization: Bearer {YOUR_ACCESS_TOKEN}" \
-H "Content-Type: application/json" \
-d "{  \"StorageName\": \"internal\",  \"FilePath\": \"{inputFile}\",  \"Format\": \"html\",  \"OutputPath\": \"{myResultant}\"}"

入力 JSON ファイルの名前で inputFile を置き換え、結果 HTML ファイルの名前で myResultant を置き換え、個別の JWT アクセストークンで accessToken を置き換えてください。

  • 結果として得られたHTMLをローカルドライブに保存する必要がある場合は、以下のコマンドを実行することを検討してください:
curl -v "https://api.groupdocs.cloud/v2.0/conversion" \
-X POST \
-H "accept: application/json" \
-H "authorization: Bearer {accessToken}" \
-H "Content-Type: application/json" \
-d "{  \"StorageName\": \"internal\",  \"FilePath\": \"input.json\",  \"Format\": \"html\"}"

✅ 結論

JSON を HTML に変換するために GroupDocs.Conversion Cloud SDK for Node.js を使用することで、開発者は構造化データから動的で読みやすく、見栄えの良いウェブコンテンツを生成できます。管理ダッシュボードを構築する場合や、レポートを自動化する場合、または JSON API レスポンスを扱う場合でも、この SDK はクリーンな HTML 出力でプロセスを簡素化します。

📚 Useful Resources

🌐 無料 JSON から HTML へのオンラインアプリ

驚くべき機能を体験するために GroupDocs.Conversion Cloud ウェブブラウザで、私たちの無料で軽量な JSON to HTML Conversion App の使用を検討してください。

json から html 変換ツール

🔗 関連記事

以下のリンクを訪れて、次のことについて詳しく学ぶことをお勧めします：