ミールタイムのお弁当をインターネットからご注文する時に
『栄養士セレクトセット』があるのをご存じでしょうか。

『栄養士セレクトセット』とは、数あるお弁当の中から
ミールタイムの栄養士がテーマごとに
組み合わせを考えたお弁当のセットです。

「どのお弁当を選べば良いか迷ってしまう・・・」
「毎回注文する内容を考えるのが大変」
そのようなお客様に、安心して召し上がっていただけるよう
栄養士がバランスや食べ飽きない組み合わせを考えています。

「自分では選んだことがないお弁当が美味しかった！」
「色々なお弁当が楽しめて嬉しい！」
そんなお声をいただくこともあり
私たち栄養士にとっても大きな励みになっています。

是非、『栄養士セレクトセット』をご覧いただき
お気に入りのセットを見つけてみてくださいね。
お食事制限がある中でも、毎日のお食事が
より楽しく、継続しやすいと思っていただけると嬉しいです。

——————————————————————————————
ファンデリーでは、一緒にお客様の在宅食をサポートしてくれる
栄養士仲間を募集しています。

＜栄養士・管理栄養士　経験者採用＞
募集要項　詳細は☟
https://www.fundely.co.jp/recruit/career

下記ブログもご覧くださいませ。
大阪で働く栄養士の医療機関紹介ブログ
神奈川で働く栄養士の医療機関紹介ブログ
AKABANE TECH BLOG
——————————————————————————————

本日は、東名厚木病院　管理栄養士の水口彩芽様をインタビュー形式でご紹介いたします。

1.管理栄養士を目指したきっかけ

　中学の時から食に関わる仕事に就きたいと考えていました。
　高校生になり、野球部のマネージャーになったことで、選手のためにご飯を炊いたり、
　プロテインを作ったりするうちに「栄養学」に興味をもつようになりました。
　当時の監督が家庭科の先生だったことも大きかったと思います。

　大学時代の先生が管理栄養士として病院で働いていた当時のことを講義してくださり、
　病院の管理栄養士に憧れるようになりました。

2.やりがいを感じる時

　患者さんに感謝された時が一番働いていて良かったなと感じます。
　長期的に入院している方だと、名前を覚えてくださったり、
　「また来てくれたんだね」と笑ってくれるところを見ると、
　とても嬉しく思います。

3.今後、管理栄養士としてやりたいこと

　管理栄養士歴としては、まだまだ短いので実戦経験を積んでいきたいです。

————————————————————————————-

水口様、ありがとうございました。

「患者様との関わりの中で印象に残っているエピソード」をも聞いてみました。

患者様の努力と、それをそばで見守り続けた管理栄養士との信頼関係が伝わってくる、とても心温まるお話でした。

——————————————————————————————
ファンデリーでは、一緒にお客様の在宅食をサポートしてくれる
栄養士仲間を募集しています。

＜栄養士・管理栄養士　経験者採用＞
募集要項　詳細は☟
https://www.fundely.co.jp/recruit/career

下記ブログもご覧くださいませ。
大阪で働く栄養士の医療機関紹介ブログ
神奈川で働く栄養士の医療機関紹介ブログ
AKABANE TECH BLOG
——————————————————————————————

先月、大阪市中央区の社会福祉協議会さんから
お声掛けいただき、渥美・芦池地域の地域活動の
お手伝いをさせていただきました。
南船場ウェルカムデイは、出入り自由で
無料で誰でも参加できるイベントです。

地域の小さい子供達から高齢者まで
幅広く参加できるよう、様々な催しがありました。
午前中は保育園や幼稚園の園児の皆さんによる
出し物があり、午後は大人の方向けに、
栄養をテーマに様々な相談ブースを設けていました。

今回弊社も出展させていただき、
旬の食材についての解説、そして食材のクイズ等を
実施しました。

ブースではカタログのご紹介や、カロリーマップ、
塩分マップ、レシピなどをご紹介していたのと、
別のテーブルで、１個80kcalのミールタイムのどら焼きを
一口ずつ試食していただきました。

カロリー０のラカントを使っているので、
甘さを抑えつつ満足感のあるどら焼きです。
皆さん試食しながら、普通のどら焼きと変わらず
美味しく食べられるね！と好評でした。

栄養クイズは、旬の食材である夏野菜に関連する
クイズであったり、記憶力を試す為に１分間でどれだけ
野菜の名前を言えるかというテストを実施しました。

野菜の名前は、皆さん自宅の冷蔵庫を思い出しながら
20個以上すらすら言えている方、10個くらいで
止まってしまった方など様々で、自宅でもできますので
ぜひ皆様もお試しください。

参加者の皆さんには、カタログと旬の食材を
使ったレシピをお渡ししました。

暑い夏、旬の食材を摂取して乗り切って頂ければ幸いです！

イベント中ブースにお越しいただいた方からは、
色々食事に関するご相談もありました。
こうした場では、普段病院で質問しようと思っても
こういう質問していいのかな、と躊躇してしまうような事も
気兼ねなく質問できます。

またイベントに参加する事で、交流が生まれますので
ぜひお近くで開催されている際には
足を運んでみてください。
貴重な機会に参加させて頂きありがとうございました。
今後も皆様の健康維持のお手伝いができますよう
サポートさせていただきます。

——————————————————————————————
ファンデリーでは、一緒にお客様の在宅食をサポートしてくれる
栄養士仲間を募集しています。

＜栄養士・管理栄養士　経験者採用＞
募集要項　詳細は☟
https://www.fundely.co.jp/recruit/career

下記ブログもご覧くださいませ。
赤羽ではたらく栄養士たちの日記
神奈川で働く栄養士の医療機関紹介ブログ
AKABANE TECH BLOG
——————————————————————————————

はじめに

　こんにちは。社内向け不具合報告アプリの機能を拡充させるべく、ガントチャート表示機能を実装しました。それに伴い使用したガントチャートや実装したことを簡単にご紹介します。

背景・課題

• 
  なぜ SVAR を選んだか
  
  
  
  • 無料版があり、かつ公式サイトに実装手順が（個人的に）わかりやすくまとまっていた。
    （今回の新規実装は私を中心で行ったので、使用ライブラリは私の一存で決めております笑）
    　※ 公式ガイド 　（実装がコードベースで辞書のようにまとまっており非常に分かりやすかったです。英語のサイトですがGoogle翻訳を使えば簡単に理解できます。）
    
    
  
  
  
  
• 
  なぜブラウザ用ガントチャートを導入したか
  
  
  
  • 我々エンジニアが所属しているデザイン・システム室の業務内容を全社員に周知できる場を設け、業務の透明化を測る。
  • シーズン業務や中長期案件などの理解をいただき、より効率的な部署間の業務連携体制を作る。
  • Gitlab をFreeプランで運用している。（ガントチャート機能が使えない）
    
    
  
  
  
  
• 
  なぜ PRO版 ではなく無料版か
  
  
  
  • 無料版で提供されているライブラリとコンポーネントだけでも、ガントチャートの基盤は十分に作れる。
  • 無料版では提供されていない機能はオプション機能が多く、公式コンポーネントを使わずとも手動で追加できると判断。（後述）
  
  
  
  

全体の作り方

　今回は編集機能を実装するのではなく、GitLab 上の予定を社内向けに見せることを優先しています。

　ざっくりした流れは次のとおりです。

①GitLab の Group Issues API から Issue を取得する
②サーバー側でマイルストーン単位にデータを整える
③SVAR Gantt が読める tasks 形式に変換する
④クライアントで read-only のガントとして描画する

　ポイントは3つあります。

• 
  Issue に埋め込まれている milestone 情報から配下イシューの構造を組み立てる
  
  
  
  • API の呼び出しを Issue 取得に寄せた方が、ガントチャートに必要な「開始日」「期日」が取れるので運用上シンプルでした。マイルストーンとしてグループ化したい場合はイシューが紐づいているマイルストーンがあれば、同一のものを括れるように処理しています。
  
  
  
  

// Issue に埋め込まれた milestone.id で同じものを括る

for (const raw of issues) {

  const embed = raw.milestone;

  if (!embed?.id) continue;


  let ms = msById.get(embed.id);

  if (!ms) {

    ms = { id: embed.id, title: embed.title, issues: [] };

    msById.set(embed.id, ms);

  }

  ms.issues.push(normalizeIssue(raw)); // start_date / due_date もここで持つ

}

• 
  Gantt 上では編集しない
  
  
  
  • 期限の変更は GitLab 側で行い、アプリはあくまで「見る」ための画面にしています。そのため SVAR の readonly モードで表示しています。
  
  
  
  

<Gantt tasks={tasks} readonly />

• 
  　Next.js との組み合わせではSSR ではなく dynamic import
  
  
  
  • ガント部分だけクライアント読み込みにしています。SVAR Gantt はブラウザ前提のコンポーネントなので、 遅延読み込みするのが良いと判断しました。そもそもSSRに対応していないライブラリをそのままサーバー描画すると、エラーを吐く可能性が高いです。
  
  
  
  

const ScheduleGantt = dynamic(

  () => import('./ScheduleGantt').then((m) => m.ScheduleGantt),

  { ssr: false },

);

無料版で PRO 相当をどう寄せたか

　実際にどのように実装したのか簡単に紹介しようと思いますが、関わる行全てを紹介すると見にくくなってしまうと思うので根幹箇所だけピックアップして紹介します。

　全体像は下の全体像イメージにスクリーンショットを貼っているのでそちらの画像も参考にしてください。

1.マイルストーンの進捗バー

　マイルストーン行に、配下 Issue の完了状況を見せたかったための実装です。SVAR の PRO 版には、サマリタスクの進捗を子タスクから自動計算する機能がありますが、無料版では自分で計算して渡す必要があります。

　一部分の抜粋ですが、マイルストーンの配下 Issue のうち closed の割合を求め、マイルストーン行の progress にセットしています。

const closeProgress = milestoneCloseProgressPercent(ms.issues);


out.push({

  id: ms.id,

  type: 'summary',

  text: ms.title,

  progress: closeProgress,  // 完了数 / 全体数 で進捗を出すようにしました。

});

　見た目としては、マイルストーン行だけに進捗バーが出るように CSS で調整しています。

.wx-bar:not(.wx-summary) .wx-progress-percent { display: none !important; }

　PRO の自動集計を「データを渡す前に計算する」ことで代替できた、比較的楽なパターンです。

2. クリック式ツールチップ

　SVAR には公式のツールチップがありますが、ホバー式のツールチップしか存在せず、1ミリカーソルを動かしただけでホバーが消えてしまったのが非常に使いずらいと感じました。
特に、ノートPCのタッチパッドでの操作を想定すると、クリックの方が安定します。

　そこで、バーをクリックしたときだけ詳細を出す自前 UI にしました。SVAR がバーに付ける data-tooltip-id でタスクを特定し、担当者・状態・開始日・期限・マイルストーンのクローズ率など、GitLab 由来の情報を表示しています。

const hit = findBarFromTarget(event.target); // data-tooltip-id を辿る

const task = api?.getTask(hit.id);

setOpen({ task, top, left }); // クリックで開閉

　Gantt を自前コンポーネントでラップし、onPointerDownCapture でバークリックを拾っています。タスク取得には init={setGanttApi} で渡した API（api.getTask）を使っています。

<ScheduleGanttTooltip api={ganttApi} tasks={tasks}>

  <Gantt init={setGanttApi} tasks={tasks} readonly />

</ScheduleGanttTooltip>

　無料版に tooltip はあったのですが、このように基盤だけ拝借して使いにくい部分は自分でカスタマイズするという使い方もできるので、楽チンです。

3. PDF 出力

　会議や共有用に、画面の予定表を PDF 化したい要件がありました。PRO 版には PDF / PNG エクスポートがありますが、今回は window.print() で代替しました。

　そのまま印刷すると、画面用ガントはスクロール枠内に収まっているため、途中で切れてしまいます。そこで、印刷専用にもう1本ガントを描画し、表示行数ぶんの高さを確保してから印刷する方式にしています。

　また、印刷ボタン押下後、requestAnimationFrame で1〜2フレーム待ってから window.print() しています。高さが確定する前に印刷すると、左グリッドやバーが切れることがあったためです。

　印刷期間が長すぎるとレイアウトが崩れやすいので、表示日数に上限を設けるようにしています。今も最適化中ですが、表示したい期間（＝印刷したい期間）を絞ることで、長い期間を無理に1枚に載せない運用にすれば、実用レベルまで持っていけると考えています。

縦方向（行数）は複数ページにまたがる想定で作成しました。

const height = HEADER_HEIGHT + tasks.length * ROW_HEIGHT;

{printPending && (

<div className="schedule-gantt-print-root" style={{ left: -99999 }}>

<Gantt tasks={tasks} hostHeightPx={height} />

</div>

)}

window.print(); // @media print で print-root だけ表示

　ここに関しては、印刷機能の実装が必要であることも、無料版には印刷機能がないことも分かってはいましたが、この程度であれば自作できるレベルです。

全体像イメージ

　最終的にこのような形で実装しました。（一部加工しております）

　ブラウザの幅に合わせた表示、期間の設定、バーのクリックでのツールチップの表示など
ほしい機能は全て無料で簡単に作成することができました。

　ちなみに、左のIssue名が並んでいる箇所（黒塗りしている部分）はリンクになっております。
社員からデザイン・システム室へ改修の依頼をする機能が既存であるのですが、その依頼済み一覧の詳細ページへのリンクとなっているので、どんな依頼だったかの確認などへの導線も設けられております。

まとめ

　初めてのガント実装でも、SVAR React Gantt の無料版は基盤として十分使えました。進捗集計・ツールチップ・PDF など PRO 寄りの機能は自前で補う必要がありましたが、編集しない「見える化」用途なら無料版でも実用レベルまで持っていけます。

　Reactは経験が薄い言語だったのですが、便利機能が揃っているおかげでベース作りはライブラリにお任せして、細かい調整を行なっていくと言った運用ができることが分かり、自分自身のReactへのハードルが下がったように感じます。

　今後も少しずつこの社内共有機能を充実させていき、各部署との連携強化に繋げていこうと考えております。

さいごに

現在デザイン・システム室では、新しいメンバーを募集しています。少しでも興味を持たれた方は、ぜひご応募ください✨💻
皆様からのご応募、心よりお待ちしております。