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

JavaScriptで作る強力なExcelアドイン開発ガイド：通貨換算ツールをステップバイステップで構築

JavaScriptで作る強力なExcelアドイン開発ガイド：通貨換算ツールをステップバイステップで構築

カスタムアドインは、Excelの機能を拡張できる非常に強力なツールです。繰り返し発生する作業の自動化、独自関数の作成、ユーザー向けの専用ツールの提供など、自作のアドインによってExcelの可能性は大きく広がります。本記事では、機能強化のためのカスタムアドインを実際に構築していきます。

このチュートリアルでは、JavaScriptとOffice Add-insフレームワークを使用して、カスタムExcelアドインを作成する手順を解説します。ExchangeRates APIを活用し、通貨換算アドインを一緒に作ってみましょう。

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

まず、必要なツールをダウンロードしてインストールします。

  • Node.jsのインストール：
    • 公式サイトからNode.jsをダウンロードしてインストールします。
  • VS Codeのインストール：
    • Visual Studio Codeをダウンロードしてインストールします。
  • Office Add-in CLIのインストール：
    • PowerShellまたはターミナルを開き、以下のコマンドを実行します。
npm install -g yo generator-office

JavaScriptで作る強力なExcelアドイン開発ガイド：通貨換算ツールをステップバイステップで構築

  • Excelの準備：
    • Excel 2016以降（Office 365推奨）がインストールされていることを確認してください。
    • 本記事ではMS Office 365を使用しています。

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

  • PowerShellまたはコマンドプロンプトを開き、管理者として実行します。
  • 以下のコマンドを実行して、Officeアドインプロジェクトを作成します。
  • コマンド実行後、「Continue（続行）」か「Exit（終了）」を選択するよう求められます。
  • 「Continue」を選択してセットアップを進めます。
    • 矢印キーでContinueを選択し、Enterキーを押します。

次に、作成するアドインの種類に関する一連の質問が表示されます。

  • Choose a project type（プロジェクトタイプの選択）：
    • 「Task pane add-in」を選択します（矢印キーで選択してEnter）。
  • Choose a script type（スクリプトタイプの選択）：
    • お好みに応じて「JavaScript」または「TypeScript」を選択します。
  • What do you want to name your add-in?（アドイン名の入力）：
    • プロジェクト名を入力します（例：CustomAddin）。
  • Which Office client application would you like to support?（対応するOfficeアプリケーションの選択）：
    • 「Excel」を選択します。

JavaScriptで作る強力なExcelアドイン開発ガイド：通貨換算ツールをステップバイステップで構築

  • ジェネレーターの処理が完了するまで待ちます。必要なファイルがすべて揃ったプロジェクトフォルダが自動的に生成されます。主なファイルは以下の通りです：
    • taskpane.html：作業ウィンドウのUIを定義します。
    • taskpane.js：作業ウィンドウ用のJavaScriptコードが含まれます。
    • manifest.xml：アドインの情報をOfficeに伝えるマニフェストファイルです。

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

セットアップ完了後、ターミナルからプロジェクトフォルダを開くこともできますし、VS Codeで直接開くことも可能です。プロジェクト作成時、Yeomanは「yo office」コマンドを実行したディレクトリ内にフォルダを生成します。フォルダ名は先ほど指定したアドインプロジェクト名（例：CustomAddin）になります。

ターミナルでプロジェクトフォルダへ移動する：

  • PowerShellまたはコマンドプロンプトで、cd（change directory）コマンドを使ってプロジェクトフォルダに移動します。
  • 以下のコマンドでプロジェクトフォルダに移動してください。

Visual Studio Codeでフォルダを開く：

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

JavaScriptで作る強力なExcelアドイン開発ガイド：通貨換算ツールをステップバイステップで構築

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

JavaScriptで作る強力なExcelアドイン開発ガイド：通貨換算ツールをステップバイステップで構築

プロジェクトフォルダを直接開く方法もあります：

  • エクスプローラー（Windows）またはFinder（Mac）を開き、Yeomanが生成したアドインプロジェクトのフォルダへ移動します。
  • プロジェクトフォルダ（例：CustomAddin）を右クリックし、Visual Studio Codeがインストールされていれば「Codeで開く（Open with Code）」を選択します。
  • あるいは、Visual Studio Codeを起動し、「ファイル」メニューから「フォルダーを開く（Open Folder）」を選んで、プロジェクトフォルダを指定しても構いません。

ステップ4：リアルタイム通貨換算機能を作成する

プロジェクトを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>

コードの解説：

  • <head>セクション：
    • <title>：ページタイトルを「Currency Converter」に設定します。
    • <script>：
      • Officeアドイン連携のためにoffice.jsを読み込みます。
      • 独自のJavaScript機能を持つtaskpane.jsをリンクします。
  • <body>セクション：
    • <h2>：「Currency Converter」という見出しを表示します。
    • <label>と<input>：ユーザーの入力欄です（fromCurrencyとtoCurrency）。
    • <button>：通貨換算を実行するボタンです。
    • <p>：ステータスメッセージやエラーを表示します。

このレイアウトが、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を使って、選択中のセル範囲に換算結果を適用します。
    • 成功・エラーメッセージを作業ウィンドウに表示します。
  • エラーハンドリング：APIやExcelランタイムのエラーを捕捉してログに記録し、ユーザーにフィードバックを返します。

ステップ5：アドインをテストする

それでは、Excel上でアドインがどのように動作するかテストしてみましょう。

  • プロジェクトフォルダにいない場合は、ターミナルでプロジェクトフォルダに移動します。
  • VS Codeのターミナルで以下のコマンドを実行します。
  • 開発サーバーを起動するには、次のコマンドを使用します。
  • 「? Allow localhost loopback for Microsoft Edge WebView?」という質問が表示されます。
  • 「Yes」と入力してください。

JavaScriptで作る強力なExcelアドイン開発ガイド：通貨換算ツールをステップバイステップで構築

このコマンドによりExcelファイルが起動します。

  • Excelが開き、アドインが自動的に作業ウィンドウに読み込まれます。
    • 元の通貨の値が入力されているセル範囲を選択します。
    • ここではセルA2:A10を選択しました。
    • Fromボックスに「USD」、Toボックスに「EUR」と入力します。
    • Convertボタンをクリックします。

JavaScriptで作る強力なExcelアドイン開発ガイド：通貨換算ツールをステップバイステップで構築

ステップ6：アドインをデプロイする

完成したアドインは、Office 365に展開したり、組織内で共有したりすることができます。アドインをパッケージ化し、Office Storeにアップロードすることで実現できます。

パッケージ化の手順は以下の通りです：

  • ターミナルで以下のコマンドを実行します。
  • これによりアドインの本番用ビルドが作成されます。Webサーバーでホストするか、Azureなどのクラウドサービスにアップロードして運用できます。

環境構築時によくある問題と解決策

  • スクリプト実行ポリシーエラー（npm.ps1 を読み込めない）
    • 解決策：以下のコマンドで実行ポリシーを設定します。
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
  • yoコマンドが認識されない
    • 解決策：Yeomanが正しくインストールされているか、以下のコマンドで確認します。
    • インストール状況の検証には次のコマンドを実行します。
  • パッケージインストール時の権限エラー
    • 解決策：PowerShellやコマンドプロンプトを管理者として実行するか、インストール時に--forceフラグを使用してください。

まとめ

以上の手順に従えば、Excelで動作する通貨換算アドインを作成できます。本記事では、開発環境のセットアップからアドインの構築、JavaScriptによる機能実装までを詳しく解説しました。さらに高度な機能を追加することで、このアドインの活用範囲を広げることも可能です。ぜひ自分だけのオリジナルアドイン開発に挑戦してみてください。

無料のExcel上級演習問題（解答付き）もぜひご活用ください！

  1. Excelで貼り付け後に「貼り付けオプション」ボタンを非表示にする3つの方法

    Microsoft Excelでデータをコピー＆ペーストすると、貼り付け直後に「貼り付けオプション」という小さなボタンが表示されます。このボタンからは、元の書式を保持したまま貼り付けたり、「形式を選択して貼り付け」を実行したりと、貼り付け方法をその場でカスタマイズできます。 便利な機能である一方、「毎回表示されるのが煩わしい」「誤ってクリックしてしまう」と感じる方もいるでしょう。そんなときは、Excelの標準設定を変更すればボタンを非表示にできます。さらに、レジストリエディターやローカルグループポリシーエディターを使う方法もあります。本記事では、それぞれの手順を詳しく解説します。 Excel

  2. 【Excel】自動的に更新されるデータベースの作り方｜4つの実践テクニック

    この記事では、Excelで自動的に更新されるデータベースを作成するための、実用的な4つの方法をわかりやすく解説します。売上や天気予報など、常に変化するデータを扱う業務では、元データが更新されたときにデータベース側も自動的に反映される仕組みが非常に重要です。手作業でのコピーや修正の手間を省き、ミスも防げます。それでは、具体例とともに各方法を見ていきましょう。 Excelで自動更新されるデータベースを作成する4つの方法 方法1：Webからデータを抽出して自動更新データベースを作成する 課題：Web上の「ニューヨーク（アメリカ）の14日間天気予報」を抽出し、自動的に更新されるExcelデータベースを