こんにちは！開発現場を渡り歩きながら、日々「いかに無駄な手間を減らし、エンジニアも非エンジニアもハッピーにするか」を考えているシニアアーキテクトです。
PythonやAI・データサイエンスの世界に足を踏み入れると、必ずと言っていいほど出会うのが JupyterLab ですよね。ブラウザ上でコードを書き、その場でグラフや表を描画できるこの環境は、プロトタイピングの神様のような存在です。
しかし、こんな悩みに直面したことはありませんか？
> 「データ分析の結果を上司やクライアントに見せたいけれど、相手はPythonなんて書けない」
> 「かといって、Jupyter Notebookのファイルをそのまま送っても、環境がないと開けないし、ただの静的なPDFや画像では『ここのデータを絞り込んで見せて』という要望に応えられない……」
毎回スクショを撮ってスライドに貼り付けたり、わざわざ簡易的なWebアプリをStreamlitなどで作ってデプロイしたりしていませんか？ それ、実はもっとエレガントに解決できるんです。
今回は、JupyterLabの標準機能である `nbconvert` のテンプレート機能を拡張し、「コードを隠し、グラフや表に『動的なフィルタリング機能』を埋め込んだ、完全ポータブルな単一HTMLファイル」を出力するテクニックを伝授します。
これをマスターすれば、追加のサーバー代も、面倒なデプロイ作業も不要で、メールにポンと添付するだけで「触って動かせるインタラクティブなレポート」を誰にでも共有できるようになりますよ。毎日の報告作業が劇的に楽になりますので、ぜひ一緒に手を動かしてみましょう！
—
1. そもそも Anaconda と JupyterLab の役割とは？
これから環境を整える方に向けて、まずは私たちが使う道具の正体を整理しておきます。
- Anaconda（またはその軽量版であるMiniconda/Miniforge）:
Pythonのパッケージ（ライブラリ）や、異なるPythonのバージョンを喧嘩させずに管理してくれる「最強の環境管理マネージャー」です。AI・データサイエンスに必要な重厚なライブラリ群を安全に同居させてくれます。
- JupyterLab:
ブラウザ上で動作する次世代の統合開発環境（IDE）です。ノートブック（対話型の実行環境）だけでなく、ターミナルやテキストエディタもタブ形式で同時に開けるため、データ分析のコックピットとして不可欠な存在です。
最小限にして堅牢な基礎セットアップ
余計なトラブルを避けるため、クリーンな仮想環境から始めましょう。ターミナル（またはAnaconda Prompt）を開き、以下のコマンドを順に実行してください。
1. 分析用として独立した仮想環境「report-env」を作成します（Python 3.10を指定）
conda create -n report-env python=3.10 -y
2. 作成した仮想環境をアクティベート（有効化）します
conda activate report-env
3. データ分析とHTML変換に必要な最小限かつ強力なパッケージをインストールします
conda install -c conda-forge jupyterlab pandas matplotlib nbconvert -y
> アーキテクトからのワンポイントアドバイス
> グローバル（初期状態）のPython環境に直接パッケージを入れるのは、依存関係が泥沼化する原因になります。プロジェクトごとに仮想環境を分けることは、プログラマの第一歩であり、最大の防御策です。
—
2. 動作確認：精度の高い「Hello World」ノートブックの作成
環境が整ったら、JupyterLabを起動して動作確認を行いましょう。
JupyterLabの起動
jupyter lab
ブラウザが自動で立ち上がり、JupyterLabの画面が表示されたら成功です。
新しいノートブック（Python 3）を開き、以下のコードを入力して実行（Shift + Enter）してください。
import pandas as pd
import numpy as np
サンプルとして、架空の売上データ（5行）を生成します
np.random.seed(42)
data = {
‘地域’: [‘東京’, ‘大阪’, ‘名古屋’, ‘福岡’, ‘札幌’],
‘カテゴリ’: [‘ガジェット’, ‘アパレル’, ‘ガジェット’, ‘食品’, ‘アパレル’],
‘売上高(万円)’: np.random.randint(100, 1000, 5)
}
df = pd.DataFrame(data)
データフレームを表示
display(df)
綺麗に表が表示されましたか？ これが私たちのレポートの種となります。
—
3. 本題：コードを隠し、動的フィルタを埋め込む「ポータブルHTML」化の仕組み
通常、`jupyter nbconvert –to html notebook.ipynb` を実行すると、PythonコードもすべてHTMLに含まれてしまいます。これでは非エンジニアにとってはノイズでしかありません。
私たちが目指すのは以下の状態です：
1. Pythonのコード（セル）を完全に非表示にする
2. 出力されたHTMLの中にJavaScript（Vanilla JS）を埋め込み、表の検索やカテゴリ絞り込みをその場で動的に行えるようにする
3. 外部CDNやサーバーに依存せず、そのHTMLファイル単体で完全に動作する（ポータブル）
ステップ1: 動的フィルタ機能付きカスタムテンプレートの作成
JupyterLabの背後で動いている `nbconvert` は、HTMLを生成する際にJinja2というテンプレートエンジンを使用しています。ここに「HTML表示時にテーブルを検索・フィルタリングする簡易JS」を挿入するマジックを仕込みます。
作業ディレクトリ（ノートブックと同じ場所）に `custom_template.html` という名前で、以下のテキストファイルを作成してください。
{%- extends ‘classic/index.html.j2’ -%}
{%- block header -%}
{{ super() }}
{%- endblock -%}
{%- block body -%}
{{ super() }}
{%- endblock -%}
ステップ2: コマンド一発！魔法の変換を実行する
先ほど作成したノートブック（例: `analysis.ipynb`）を、このテンプレートを使ってHTMLに変換します。
ターミナルで以下のコマンドを実行してください。
jupyter nbconvert –to html –template custom_template.html analysis.ipynb
実行すると、同じディレクトリに `analysis.html` というファイルが生成されます。
このファイルをダブルクリックして、ブラウザで開いてみてください。
- 驚きポイント: Pythonを書いたコードセルは跡形もなく消え去り、美しく整形された実行結果（グラフや表）だけが残っています。
- 感動ポイント: テーブルの上の検索ボックスに「東京」や「ガジェット」と打ち込んでみてください。ページを再読み込みすることなく、その場で瞬時にデータが動的に絞り込まれます！
—
4. 現場でこのテクニックがもたらす圧倒的なベネフィット
「たったこれだけのこと？」と思われるかもしれませんが、実際の開発・分析現場において、このスキームは以下のような計り知れない利益をもたらします。
1. セキュアでオフラインでも閲覧可能:
ReactやVueなどの重いフロントエンドフレームワークをCDN経由で読み込ませず、プレーンなJavaScriptだけで構築しているため、セキュリティ制限の厳しい社内ネットワーク環境や、インターネットに繋がっていないオフライン環境でも完璧に動作します。
2. ステークホルダーのストレスフリー:
「ここを絞り込んだ数値も見たい」という非エンジニアからのリクエストに対し、わざわざコードを書き直して再提出する必要がなくなります。相手自身がブラウザ上で自由にデータをフィルタリングして確認できるからです。
3. CI/CDパイプラインとの統合:
この `nbconvert` コマンドを GitHub Actions などのCI/CDに組み込んでおけば、データが更新されてGitHubにプッシュされた瞬間に、コードを含まない綺麗な動的HTMLレポートを自動生成し、S3やTeams/Slackへ自動配信する仕組みも簡単に構築できます。
—
おわりに
今回は、JupyterLabと `nbconvert` のテンプレート機能を拡張し、コードを隠しつつ動的なフィルタリング機能を持たせたポータブルHTMLレポートを作成する手法を解説しました。
「面倒な作業を自動化し、本質的な価値（データの解釈と意思決定）に集中する」――これこそが、私たちエンジニアが目指すべきスマートな開発スタイルです。
ぜひ今回のテンプレートをご自身のプロジェクトに組み込んで、周囲の同僚や上司をアッと言わせるレポートを作ってみてください。「毎日のコーディングが劇的に楽に、そして楽しく」なるはずです。
それでは、次の現場でお会いしましょう！