HTMLで作ったデザインをPDFファイルとして保存したいけど、どうやって変換すればいいか困ったことはありませんか？
実は、Power AutomateのOneDriveコネクタを使えば、HTMLファイルを簡単にPDFに変換することができるんです。今回は、その具体的な手順について詳しく解説していきます。
事前準備：HTMLコードの用意
まずは変換したいHTMLのコードを準備します。今回は、事前にデザインされたHTMLコードを 作成アクション に設定しておきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2025年第2四半期 業績報告書</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
margin: 0;
padding: 40px;
background-color: #f8f9fa;
color: #333;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 40px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.header {
text-align: center;
border-bottom: 3px solid #2c5aa0;
padding-bottom: 20px;
margin-bottom: 30px;
}
.company-logo {
font-size: 24px;
font-weight: bold;
color: #2c5aa0;
margin-bottom: 10px;
}
h1 {
color: #2c5aa0;
font-size: 28px;
margin: 10px 0;
}
h2 {
color: #2c5aa0;
font-size: 20px;
margin-top: 30px;
margin-bottom: 15px;
border-left: 4px solid #2c5aa0;
padding-left: 15px;
}
h3 {
color: #444;
font-size: 16px;
margin-top: 20px;
margin-bottom: 10px;
}
.report-info {
background-color: #f1f3f4;
padding: 15px;
border-radius: 5px;
margin-bottom: 25px;
}
.financial-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.financial-table th,
.financial-table td {
border: 1px solid #ddd;
padding: 12px;
text-align: right;
}
.financial-table th {
background-color: #2c5aa0;
color: white;
text-align: center;
}
.financial-table tr:nth-child(even) {
background-color: #f9f9f9;
}
.highlight {
background-color: #e8f4fd;
padding: 15px;
border-left: 4px solid #2c5aa0;
margin: 20px 0;
}
.signature-section {
margin-top: 40px;
text-align: right;
}
.date {
margin-bottom: 20px;
color: #666;
}
.footer {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #ddd;
text-align: center;
color: #666;
font-size: 12px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="company-logo">株式会社テックソリューションズ</div>
<h1>2025年第2四半期 業績報告書</h1>
<div class="date">報告期間: 2025年4月1日 〜 2025年6月30日</div>
</div>
<div class="report-info">
<strong>報告書番号:</strong> QR-2025-Q2-001<br>
<strong>作成日:</strong> 2025年7月15日<br>
<strong>作成者:</strong> 財務部 山田太郎<br>
<strong>承認者:</strong> 代表取締役社長 田中花子
</div>
<h2>1. 経営成績の概要</h2>
<p>当第2四半期における当社グループの業績は、主力事業であるクラウドソリューション事業が好調に推移し、売上高は前年同期比15.3%増の4,850万円となりました。営業利益についても、効率的な事業運営により前年同期比22.1%増の980万円を達成いたしました。</p>
<div class="highlight">
<strong>主要業績指標:</strong><br>
• 売上高: 4,850万円（前年同期比+15.3%）<br>
• 営業利益: 980万円（前年同期比+22.1%）<br>
• 純利益: 720万円（前年同期比+18.5%）
</div>
<h2>2. 財務状況</h2>
<table class="financial-table">
<tr>
<th>項目</th>
<th>2025年Q2</th>
<th>2024年Q2</th>
<th>増減率</th>
</tr>
<tr>
<td><strong>売上高</strong></td>
<td>48,500,000円</td>
<td>42,050,000円</td>
<td>+15.3%</td>
</tr>
<tr>
<td><strong>営業利益</strong></td>
<td>9,800,000円</td>
<td>8,025,000円</td>
<td>+22.1%</td>
</tr>
<tr>
<td><strong>経常利益</strong></td>
<td>9,200,000円</td>
<td>7,680,000円</td>
<td>+19.8%</td>
</tr>
<tr>
<td><strong>純利益</strong></td>
<td>7,200,000円</td>
<td>6,075,000円</td>
<td>+18.5%</td>
</tr>
</table>
<h2>3. 事業別売上高</h2>
<h3>クラウドソリューション事業</h3>
<p>売上高: 3,200万円（前年同期比+18.2%）<br>
新規顧客獲得が順調に進み、既存顧客からの継続的な受注も堅調に推移しました。特にAI機能を搭載した新サービスが市場で好評を博しています。</p>
<h3>システム開発事業</h3>
<p>売上高: 1,350万円（前年同期比+8.9%）<br>
中小企業向けのWebシステム開発案件が増加し、安定的な収益基盤を確保しています。</p>
<h3>コンサルティング事業</h3>
<p>売上高: 300万円（前年同期比+25.0%）<br>
DX推進支援サービスの需要が高まり、高い成長率を維持しています。</p>
<h2>4. 今後の見通し</h2>
<p>下半期においても、主力事業の継続的な成長を見込んでおります。新たな技術領域への投資を進めることで、競争優位性の確保と持続的な成長を目指してまいります。通期の業績予想については、売上高1億9,500万円（前期比+12.8%）、営業利益3,900万円（前期比+15.2%）を予定しております。</p>
<div class="highlight">
<strong>重点施策:</strong><br>
• AI技術を活用した新サービスの開発・展開<br>
• 優秀な人材の採用・育成強化<br>
• 海外市場への展開準備<br>
• セキュリティ体制の更なる強化
</div>
<div class="signature-section">
<p>以上</p>
<div style="margin-top: 30px;">
<p><strong>株式会社テックソリューションズ</strong></p>
<p>代表取締役社長 田中花子</p>
<div style="margin-top: 20px; border: 1px solid #666; width: 100px; height: 50px; margin-left: auto; text-align: center; line-height: 50px; color: #999;">印</div>
</div>
</div>
<div class="footer">
<p>本報告書に記載された情報は、作成日時点のものであり、将来の業績を保証するものではありません。</p>
<p>株式会社テックソリューションズ | 〒150-0001 東京都渋谷区神宮前1-1-1 | TEL: 03-1234-5678</p>
</div>
</div>
</body>
</html>OneDriveコネクタのファイル変換アクションを活用
HTMLをPDFに変換する際に重要なのが、OneDriveコネクターの ファイル変換アクション です。
ファイル変換アクションの選び方
OneDriveコネクタには2つのファイル変換アクションがありますが、今回は パスを使用しないアクション を利用します。
重要なポイント：OneDriveファイルの事前作成が必要
ここで注意したいのは、ファイル変換アクションではOneDriveにあるファイルを指定する必要があることです。そのため、作成アクションの結果をそのまま指定することはできません。
そこで便利なのが、同じくOneDriveコネクタの ファイル作成アクション です。これを使って、先に作成アクションの結果からHTMLファイルを作成します。
実際の設定手順
1. HTMLファイルの作成
まず、HTMLファイルを作成します：
- ファイル名: 拡張子を
.htmlに設定 - コンテンツ: 作成アクションの結果を指定
2. ファイル変換アクションの設定
次に、作成したHTMLファイルをPDFに変換します：
- ファイルID: 先ほどのファイル作成アクションの結果から取得できるIDを指定
- ターゲットタイプ: PDFに変換するので、そのままの設定でOK
3. 変換ファイルの保存
最後に、変換したファイルを実体のファイルとして保存するため、もう一度 ファイル作成アクション を追加します：
- ファイル名: ファイル変換アクションの結果をそのまま指定
- ファイルコンテント: ファイル変換アクションの結果をそのまま指定
動作確認とテスト
設定が完了したら、保存してテストから動作を確認してみましょう。正しく設定されていれば、HTMLからPDFへの変換が成功していることが確認できるはずです。
応用アイデア：動的なPDF生成
今回は固定のHTMLから作成していますが、さらに活用の幅を広げることも可能です。
例えば、一部の値を以下から取得するようにすることで、より柔軟なPDF作成が実現できます：
- Power Apps からの入力値を利用する
- SharePoint リスト のデータを設定する
これにより、値を自由に切り替えて様々なPDFファイルを作成することができるようになりますね。
まとめ
いかがでしたでしょうか？Power AutomateとOneDriveコネクタを組み合わせることで、HTMLからPDFへの変換が簡単に実現できました。
この方法を覚えておけば、レポートや帳票の自動生成など、様々な場面で活用できるでしょう。ぜひ試してみてください！
Power Apps学習の決定版！コントロール別YouTube再生リスト完全ガイド
Power Appsを学習していて「どのコントロールをどう使えばいいのかわからない」「実際の使い方を動画で見ながら覚えたい」と思ったことはありませんか？
実践的な知識を効率よく身につけられるよう、現在公開している動画を整理したYouTube再生リスト集をご紹介します。
コメント