---
title: hello dash
tags: 
author: [Takuya Nishimoto](https://convert.docswell.com/user/nishimotz)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/4JQM55VQ7P.jpg?width=480
description: すごい広島 with Python[92] 2024年11月27日 @nishimotz / @24motz
published: November 28, 24
canonical: https://convert.docswell.com/s/nishimotz/59VREW-2024-11-28-092224
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/4JQM55VQ7P.jpg)

hello dash
2024-11-27
@nishimotz / @24motz
github.com/nishimotz/hello-dash
2


# Page. 2

![Page Image](https://bcdn.docswell.com/page/K74V99MYJ1.jpg)

3


# Page. 3

![Page Image](https://bcdn.docswell.com/page/LJ13KK8N7G.jpg)

実践Dash - 手を抜きながら本気で作る
データ可視化Webアプリの基本と応用
• @shinyorke さん
4


# Page. 4

![Page Image](https://bcdn.docswell.com/page/GJWPDDGM72.jpg)

5


# Page. 5

![Page Image](https://bcdn.docswell.com/page/4EZKGGLME3.jpg)

開始,終了,講師,タイトル
9:30,10:00,-,開場・受付
10:00,10:15,-,オープニング
10:15,10:50,tomo,信頼性を高めるって結局何だったの？
10:50,10:55,谷 昌典,新しくできたPlatform Engineeringに関わるチームを紹介する【サイボウズ株式会社】
10:55,11:05,-,休憩
11:05,11:40,菅原政行,野良SREが考えるひとりめの仕事、透明性の作り方
11:40,11:55,今野 結太,コードに魂を吹き込め！GitHubで作る夢の開発環境【ウルシステムズ株式会社】
11:55,12:30,菱田健太@トポタル,SREの組織類型に応じたリーダーシップの考察
12:30,13:30,-,集合写真・休憩 『むさしのお弁当、先着50名』！！
13:30,14:05,宇田 誠之朗,プロダクトと開発を支えるSREの力
14:05,14:40,谷 昌典,開発組織を横断して支える生産性向上チームの取り組み
14:40,14:50,-,休憩
14:50,15:25,dyoshikawa,エンジニアのための情報共有コミュニティサービスZennの開発チームを支える自動化の仕組み
15:25,15:40,小西 啓太,エンジニアとサブスレッド【株式会社サブスレッド】
15:40,16:15,chanyou,データの信頼性を支える仕組みと技術
16:15,16:25,-,休憩
16:25,16:40,安藤 光昭,TBD【ビットリバー株式会社】
16:40,17:15,Wataru Tsuda / gr1m0h,&quot;&quot;&quot;君は見ているが観察していない&quot;&quot; で考えるインシデントマネジメント&quot;
17:15,17:30,クロージング,『書籍プレゼント企画、5名様』！！
6


# Page. 6

![Page Image](https://bcdn.docswell.com/page/Y76QYYW57V.jpg)

Hello Dash してみた
• https://github.com/nishimotz/hello-dash
• 主なプロンプト
• csv ファイル
• dash_table で表示
• スライダーで9時から18時まで時間帯を選ぶと、
現在のセッションの色を強調して表示
• 一番外側の div に padding
7


# Page. 7

![Page Image](https://bcdn.docswell.com/page/G75RGGMGE4.jpg)

8


# Page. 8

![Page Image](https://bcdn.docswell.com/page/9J2DYY9DJR.jpg)

import pandas as pd
from dash import Dash, dash_table, html, dcc, Output, Input
# Dashアプリケーションの初期化
app = Dash(__name__)
# CSVファイルの読み込み
df = pd.read_csv(&quot;data.csv&quot;)
# 時間を数値に変換する関数
def time_to_float(time_str):
&quot;&quot;&quot;時間文字列を浮動小数点数に変換します。&quot;&quot;&quot;
hour, minute = map(int, time_str.split(&quot;:&quot;))
return hour + minute / 60
# データフレームに開始時刻と終了時刻の数値列を追加
df[&quot;開始_数値&quot;] = df[&quot;開始&quot;].apply(time_to_float)
df[&quot;終了_数値&quot;] = df[&quot;終了&quot;].apply(time_to_float)
9


# Page. 9

![Page Image](https://bcdn.docswell.com/page/DEY2GG4MEM.jpg)

# アプリケーションのレイアウト
app.layout = html.Div(
style={&quot;padding&quot;: &quot;1rem 2rem&quot;},
children=[
html.H1(&quot;オープンセミナー2024@広島&quot;),
# スライダー
html.Div(
[
html.Label(&quot;時間を選択してください:&quot;),
dcc.Slider(
id=&quot;time-slider&quot;,
min=9,
max=18,
step=0.1,
value=9,
marks={i: f&quot;{i}:00&quot; for i in range(9, 19)},
),
],
style={&quot;width&quot;: &quot;80%&quot;, &quot;margin&quot;: &quot;1rem auto&quot;},
),
10


# Page. 10

![Page Image](https://bcdn.docswell.com/page/VJN8GGY378.jpg)

# テーブル
dash_table.DataTable(
id=&quot;schedule-table&quot;,
columns=[
{&quot;name&quot;: col, &quot;id&quot;: col}
for col in df.columns
if col not in [&quot;開始_数値&quot;, &quot;終了_数値&quot;]
],
data=df.to_dict(&quot;records&quot;),
style_cell={&quot;textAlign&quot;: &quot;left&quot;, &quot;padding&quot;: &quot;0.5rem&quot;},
style_header={
&quot;backgroundColor&quot;: &quot;rgb(230, 230, 230)&quot;,
&quot;fontWeight&quot;: &quot;bold&quot;,
},
style_data_conditional=[
{&quot;if&quot;: {&quot;row_index&quot;: &quot;odd&quot;}, &quot;backgroundColor&quot;: &quot;rgb(248, 248, 248)&quot;}
],
),
]
)
11


# Page. 11

![Page Image](https://bcdn.docswell.com/page/YE9KWWPPE3.jpg)

# コールバックの定義
@app.callback(
Output(&quot;schedule-table&quot;, &quot;style_data_conditional&quot;), Input(&quot;time-slider&quot;, &quot;value&quot;)
)
def highlight_current_session(selected_time):
&quot;&quot;&quot;スライダーで選択された時間に基づいて、該当するセッションの行を強調表示します。&quot;&quot;&quot;
return [
{
&quot;if&quot;: {
&quot;filter_query&quot;: f&quot;{{開始_数値}} &lt;= {selected_time} &amp;&amp; {{終了_数値}} &gt; {selected_time}&quot;
},
&quot;backgroundColor&quot;: &quot;tomato&quot;,
&quot;color&quot;: &quot;white&quot;,
}
]
# サーバーの実行
if __name__ == &quot;__main__&quot;:
app.run_server(debug=True)
12


