Sandbox Magic: Interactive Databricks Notebooks with Interactive HTML Elementsの翻訳です。
本書は著者が手動で翻訳したものであり内容の正確性を保証するものではありません。正確な内容に関しては原文を参照ください。
あなたのノートブックはプレーンなMarkdown以上の表現力がふさわしいのです。
マークダウンのドキュメントは退屈でつまらないものになる(そして時には無視されます...)場合があり、ノートブックセルのマークダウンコンテンツに関しても同じことが適用されます。ノートブックのドキュメントが、その背後にあるエンジニアリングと同じくらい洗練されていて、魅力的でインタラクティブなコンテンツだったらどうでしょうか? サンドボックスマジックにようこそ...
サンドボックスマジックは、外部ツールやウィジェット、クラスター不要で、Databricksの%md-sandboxセルをリッチでインタラクティブ、プレゼンテーション品質のコンテンツに変換するコピーアンドペースト可能なパターンのオープンソースのコレクションです。
スライドデッキはもういらない
これが真の解放です: もはやPowerPointやGoogle Slidesは不要です。
通常、プレゼンテーションがデータプラットフォームチームにどのような影響を与えるのかを考えてください。だれかがパイプラインを構築し、そのパイプラインに関するスライドを作るために完全に違うツールにスイッチします。アーキテクチャを書き直し、設定をタイプしなおし、手動で出力のスクリーンショットを作成します。ミーティングが終わる前に、スライドは古くなり忘れ去られます。
これらのパターンでは、ノートブックがプレゼンテーションになります。 アーキテクチャレビュー、スプリントデモ、ステークホルダーのアップデート、プラットフォームガバナンスのウォークスルー、オンボーディングセッション、これらすべてが以下の特性を持つDatabricksノートブックに存在することになります:
- 現状を保持 - 図やコンテンツは実際のコードの側にあるので共に進化します
- ライブの実行 - アーキテクチャを説明するのと同じノートブックでリアルなパイプラインの出力をステークホルダーに示します
- 追加ツール不要 - スライドソフトウェアのライセンス、デザインスキル、「誰かスライドを共有してくれない?」は不要です
- バージョン管理 - 全ての変更は追跡され、全てのバージョンは回復可能で、全てのレビューはPRとなります
スタイル付きの注意書き、インラインのアーキテクチャ図、インタラクティブカード、ベンダーアイコンを含むノートブックは、あなたのプラットフォームの単なるドキュメントではありません - 表現する存在です。そして、誰かのGoogleドライブで埃をかぶっているスライドデッキと違い、ワークスペース内のノートブックは、常にワンクリックでライブ環境にアクセスできます。
利用できるサンプル
サンドボックスマジックのリポジトリには、以下のサンプルとコードスニペットが含まれています:
- フリップカード
- インタラクティブなクイズウィジェット
- コードとしての図
- スタイル付きコードブロック
- 注意書き
- 画像とカルーセル
- などなど
すべてがノートブックに直接レンダリングされます - ワークスペース、ダッシュボード、プレゼンテーション内に。コンピュートは不要です。Pythonも不要です。あなたが中身をしならなくてもマークダウンが仕事してくれます。
今盗むべき3つのパターン
1. 実際に読まれる注意書き
テキストの壁はざっと読み飛ばされてしまいます。明確な見出しのついた鮮やかなオレンジの警告ボックスなら?読まれることでしょう。これらをノートブックに挿入して、前提条件、注意点、破壊的変更、重要な決定事項を目立たせましょう。
<div style="border-left: 4px solid #e65100; background: #fff3e0;
padding: 16px 20px; border-radius: 4px; margin: 16px 0;">
<strong style="color: #bf360c;">Warning:</strong>
This pipeline truncates the target table on each run.
</div>
コピーしてすぐ使える8つの色分けバリエーションが用意されています - info、note、warning、error、success、tip、config、goalです。
2. ノートブックを離れる必要のない(コードとしての)アーキテクチャ図
draw.ioやLucidchartにコンテキストスイッチすることをやめましょう。Mermaid(クライアントサイドで動作し、外部にデータは送信されません)やC4-PlantUMLを使えば、アーキテクチャをプレーンテキストで定義し、インラインでレンダリングできます:
graph LR
A[Raw Sources] -> B[Bronze]
B -> C[Silver]
C -> D[Gold]
D -> E[Dashboard]
ダイアグラムはコードと一緒に管理されます。アーキテクチャが変更されれば、同じPRでダイアグラムも更新されます。陳腐化しない、バージョン管理されたドキュメントです。
3. トレーニング、オンボーディングのためのインタラクティブカード
チームのオンボーディングノートブックを作っていますか? プラットフォームガバナンスガイドですか? アコーディオンカード、フリップカード、カテゴリグリッドを使って、密度の高い参考資料をスキャンしやすく魅力的なものにしましょう - 50個の箇条書きをスクロールする必要はありません。
ホバーで表示されるフリップカードは純粋なCSS(JavaScriptなし)で実現されており、アコーディオンパターンはすべてのデータをシンプルなJavaScript配列に格納しているため、数秒で編集できます。
FAQ
稼働中のクラスターやウェアハウスは必要ですか?
いいえ。すべては、HTML、CSS、JavaScriptを用いて%md-sandboxセルにレンダリングされます。計算資源は不要です。
図のデータがどこかに送信されたりしませんか?
Mermaid図は全てクライアントサイドでレンダリングされます - 何もブラウザから送信されません。PlantUML図を使っている場合、機微情報をレンダリングするためにご自身のPlantUMLサーバーに送信することができます。
Databricks外でこれを使えますか?
このHTML/CSS/JSパターンは、サンドボックス化されたHTMLをレンダリングする全ての環境で動作します。%md-sandboxディレクティブはDatabricks固有ですが、背後のコードはポータブルです。
60秒で始めましょう
- リポジトリをクローン、あるいはフォークします: https://github.com/stackql-labs/sandbox-magic
- Databricks Free Editionなどお使いのDatabricksワークスペースにノートブックをインポートします
- 任意のノートブックを開きます - それぞれには動作するサンプルがあり自己完結します
- ご自身のノートブックに好きなパターンをコピーします
あなたのHackを共有してください!
これはオープンソースのコミュニティプロジェクトであり、皆様が構築したものを見たいと考えています。賢いパターンを見つけましたか?%md-sandboxのクリエイティブな使い方?ここで説明したものよりも優れた方法?
PRをオープンし、問題を報告し、リポジトリにスターをください:
ベストなノートブックのhackはリアルな問題を解決している実践者からもたらされます。あなたのhackを共有し、コミュニティのレベルアップを助けてください。
StackQL Studiosによって構築、メンテナンスされています。コントリビューションは歓迎します。



