Office
 Computer >> コンピューター >  >> ソフトウェア >> Office

強力な Excel アドインの作成:ステップバイステップの JavaScript ガイド

強力な Excel アドインの作成:ステップバイステップの JavaScript ガイド

カスタム アドインは、Excel の機能を拡張する強力なツールです。アドインを構築して、反復的なタスクを自動化したり、カスタム関数を作成したり、ユーザーに独自のツールを提供したりできます。この記事では、機能を強化するためのカスタム アドインを構築します。

このチュートリアルでは、JavaScript と Office アドイン フレームワークを使用してカスタム Excel アドインを構築する方法を説明します。 ExchangeRates API を使用する 通貨換算アドインを構築します。

ステップ 1. 開発環境をセットアップする

前提条件をインストールしてダウンロードします。

  • Node.js をインストールする :
    • Node.js をダウンロードしてインストールします。
  • VS Code をインストールする :
    • Visual Studio Code をダウンロードしてインストールします。
  • Office アドイン CLI をインストールする :
    • PowerShell またはターミナルを開いて次を実行します。
npm install -g yo generator-office

強力な Excel アドインの作成:ステップバイステップの JavaScript ガイド

  • Excel をインストール :
    • Excel 2016 以降を使用していることを確認してください (Office 365 を推奨)。
    • MS Office 365 を使用しています。

ステップ 2:新しいアドイン プロジェクトを作成する

  • PowerShell を開きます またはコマンド プロンプト そして管理者として実行します。 .
  • 次のコマンドを実行して、Office アドイン プロジェクトを作成します。
  • このコマンドを実行すると、続行または終了を求めるプロンプトが表示されます。
  • 続行を選択します Office アドイン プロジェクトのセットアップを続行します。
    • 矢印キーを使用して [続行] を選択し、Enter を押します。 .
  • 次に、作成するアドインの種類に関する一連の質問が表示されます。
    • プロジェクトの種類を選択します:
      • タスク ウィンドウ アドインを選択します。 (矢印キーを使用して Enter キーを押します)。
    • スクリプトの種類を選択します:
      • JavaScript を選択します またはTypeScript あなたの好みに基づいて。
    • アドインの名前は何にしますか?
      • プロジェクトの名前を入力します (例:CustomAddin)。
    • サポートしたい Office クライアント アプリケーションはどれですか?
      • エクセルを選択します。 .

強力な Excel アドインの作成:ステップバイステップの JavaScript ガイド

  • ジェネレーターが完了するまで待ちます。ジェネレーターは、必要なすべてのファイルを含むプロジェクト フォルダーをセットアップします。プロジェクトには次のファイルが含まれます。
    • タスクペイン.html :作業ウィンドウの UI。
    • タスクペイン.js :作業ウィンドウの JavaScript コードが含まれます。
    • マニフェスト.xml :Office へのアドインについて説明します。

ステップ 3:Visual Studio Code でプロジェクトを開く

セットアップが完了したら、ターミナルを使用してプロジェクト フォルダーを開くか、VS コードで直接開くことができます。プロジェクトの作成中に、Yeoman は yo office コマンドを実行した現在のディレクトリにフォルダーを作成します。このフォルダーには、前に指定したアドイン プロジェクトの名前が付けられます (例:CustomAddin)。

ターミナルでプロジェクト フォルダーに移動します。

  • PowerShell またはコマンド プロンプトで、cd (ディレクトリ変更) コマンドを使用してプロジェクト フォルダーに移動します。
  • 次のコマンドを挿入してプロジェクト フォルダーに移動します

Visual Studio Code でフォルダーを開きます:

  • プロジェクト フォルダーに移動したら、ターミナルから Visual Studio Code で直接開くことができます。
  • 次のコマンドを実行して、VS Code でフォルダーを開きます。

強力な Excel アドインの作成:ステップバイステップの JavaScript ガイド

  • これにより、プロジェクト全体が Visual Studio Code で開きます。

強力な Excel アドインの作成:ステップバイステップの JavaScript ガイド

プロジェクト フォルダーは Visual Studio で直接開くことができます。

  • ファイル エクスプローラーを開きます (Windows) または Finder (Mac) をクリックし、Yeoman がアドイン プロジェクトを作成したフォルダーに移動します。
  • 右クリック プロジェクト フォルダー (CustomAddin など)>> コードで開く を選択します。 Visual Studio コードをお持ちの場合
  • または、Visual Studio Code を開き、ファイル に移動します。 タブ>> フォルダを開くを選択します をクリックして、プロジェクト フォルダーを選択します。

ステップ 3. リアルタイム通貨換算ツールの作成

VS Code でプロジェクトを開いたら、アドインの編集と構築を開始できます。

依存関係のインストール:

必要な依存関係 (Office.js など) をまだインストールしていない場合は、VS Code でターミナルを開き、次のコマンドを実行します。

VS Code で taskpane.html と taskpane.js を更新する

これで、src/ フォルダー内の HTML、JavaScript、CSS ファイルを編集して、アドインの機能と外観を定義できるようになります。

taskpane.html を変更してアドインのユーザー インターフェイスを設計し、taskpane.js を更新して対話機能 (Excel と対話する関数など) を追加しましょう。

taskpane.html を変更します:

taskpane.html を開き、既存のコンテンツを次のものに置き換えます。

<!DOCTYPE html>
<html>
<head>
<title>Currency Converter</title>
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<script src="./taskpane.js"></script>
</head>
<body>
<h2>Currency Converter</h2>
<label for="fromCurrency">From:</label>
<input id="fromCurrency" type="text" placeholder="e.g., USD" />
<br>
<label for="toCurrency">To:</label>
<input id="toCurrency" type="text" placeholder="e.g., EUR" />
<br>
<button id="convertButton">Convert</button>
<p id="status"></p>
</body>
</html>

説明:

  • セクション:
    • <タイトル> :ページのタイトルを「通貨コンバータ」に設定します。
    • <スクリプト> :
      • Office アドイン統合用の office.js が含まれています。
      • カスタム JavaScript 機能用の taskpane.js へのリンク
  • セクション:

    • :「通貨コンバータ」という見出しが表示されます。

    • <ラベル> および <入力> :ユーザー入力用のフィールド (fromCurrency および toCurrency)。
    • <ボタン> :通貨換算をトリガーします。

    • :ステータス メッセージまたはエラーを表示します。

このレイアウトは、Excel アドインのユーザー インターフェイスを形成します。

taskpane.js にロジックを追加する:

taskpane.js を開き、既存のコンテンツを次のコードに置き換えます。

Office.onReady(() => {
 document.getElementById('convertButton').addEventListener('click', convertCurrency);
});
async function convertCurrency() {
 const fromCurrency = document.getElementById('fromCurrency').value.toUpperCase();
 const toCurrency = document.getElementById('toCurrency').value.toUpperCase();
 if (!fromCurrency || !toCurrency) {
 document.getElementById('status').innerText = "Please enter valid currencies.";
 return;
 }
 try {
 const apiKey = "Your_Api_Key"; // Replace with your ExchangeRates API key
 const url = `https://api.exchangerate-api.com/v4/latest/${fromCurrency}`; 
 const response = await fetch(url);
 const data = await response.json();
 const rate = data.rates[toCurrency];
 if (!rate) {
 document.getElementById('status').innerText = `Invalid conversion rate for ${toCurrency}.`;
 return;
 }
 await Excel.run(async (context) => {
 const range = context.workbook.getSelectedRange();
 range.load("values");
 await context.sync();
 const convertedValues = range.values.map(row => 
 row.map(cell => cell * rate)
 );
 range.values = convertedValues;
 document.getElementById('status').innerText = `Converted to ${toCurrency} successfully.`;
 await context.sync();
 });
 } catch (error) {
 console.error(error);
 document.getElementById('status').innerText = "Error fetching conversion rate.";
 }
}

説明:

  • Office.onReady: Office 環境の準備ができたら、アドインを初期化します。
  • convertCurrency 関数:
    • 入力通貨 (fromCurrency および toCurrency) を読み取ります。
    • 入力を検証し、API 経由で為替レートを取得します。
    • Excel.run を使用して、選択した Excel セルに変換を適用します。
    • 作業ウィンドウに成功メッセージまたはエラー メッセージを表示します。
  • エラー処理: API または Excel のランタイム エラーを捕捉してログに記録し、ユーザーにフィードバックを提供します。

ステップ 4. アドインをテストする

アドインをテストして、Excel でどのように動作するかを確認してみましょう。

  • プロジェクト フォルダーにいない場合は、ターミナルでプロジェクト フォルダーに移動します。
  • VS code ターミナルで次のコマンドを実行します。
  • 開発サーバーを起動するには、次のコマンドを実行します。
  • 次のような質問が表示されます:「? Microsoft Edge WebView のローカルホスト ループバックを許可しますか?」
  • 入力:はい

強力な Excel アドインの作成:ステップバイステップの JavaScript ガイド

このコマンドは Excel ファイルを起動します。

  • Excel が開き、アドインが作業ウィンドウに自動的に読み込まれます。
    • 元の通貨の値を含むセル範囲を選択します。
    • セル A2:A10 を選択しました。
    • 差出人内 ボックス:米ドルを挿入します。 そしてへ ボックス:ユーロを挿入します。 .
    • [変換] をクリックします。 .

強力な Excel アドインの作成:ステップバイステップの JavaScript ガイド

ステップ 5:アドインを展開する

これを Office 365 に展開したり、組織内で共有して使用したりできます。これを行うには、アドインをパッケージ化して Office ストアにアップロードします。

アドインをパッケージ化する方法は次のとおりです。

  • ターミナルで次のコマンドを実行します。
  • これにより、アドインの実稼働ビルドが作成され、Web サーバーでホストしたり、Azure などのクラウド サービスにアップロードしたりできます。

環境セットアップの一般的な問題と解決策

  • スクリプト実行ポリシー エラー (npm.ps1 をロードできません)
    • 解決策: 以下を実行して実行ポリシーを設定します。
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
  • yo コマンドが認識されません
    • 解決策: 次のコマンドを実行して、Yeoman が正しくインストールされていることを確認します。
    • インストールの実行を確認するには:
  • パッケージのインストール時の権限の問題
    • 解決策: PowerShell またはコマンド プロンプトを管理者として実行するか、-force を使用します。 インストール中にフラグを立てます。

結論

上記の手順に従って、Excel で Currency Converter アドインを作成できます。開発環境をセットアップし、アドインを構築し、JavaScript を使用して機能を実装する方法の詳細な手順を説明しました。より高度な機能を追加することで、このアドイン機能をさらに拡張できます。

ソリューション付きの高度な Excel 演習を無料で入手しましょう!
  1. Excel のシートとブックの間でセルをリンクする

    Microsoft Excel は、誰でも使用できる非常に強力な多目的ツールです。ただし、毎日スプレッドシートを使用する場合は、Excel の基本的な使い方だけでなく、それ以上の知識が必要になる場合があります。いくつかの簡単なコツを知っていれば、Excel を大いに活用できます。良い例は、シートとワークブックの間で Excel のセルをリンクする方法を知っていることです。 これを学ぶことで、長い目で見れば多くの時間と混乱を避けることができます。 Excel でセル データをリンクする理由 異なるシート間でデータを参照できることは、いくつかの理由で価値のあるスキルです。 まず、スプ

  2. PowerPointが応答しない、クラッシュ、フリーズ、ハング、または動作を停止し続ける

    Microsoft PowerPointを使用している場合 スライドトランジションモードの途中で、PowerPointアプリケーションが機能しなくなったことに気づきました。 応答しない 、フリーズまたはハング 異常に長い間。 MicrosoftPowerPointが機能しなくなったを受け取ることもあります エラー。 主に、このプログラムが問題に応答しないことに起因する3つの理由があります。 ウイルス対策ソフトウェアがPowerPointに干渉または競合しています。 インストールされているアドインがPowerPointに干渉しています。 PowerPointのインストールが破損してい