真夏の暑い日々が続いておりますが皆様いかがお過ごしでしょうか。
本日は栄養士おまかせ定期便をご利用頂いている80代女性のお客様との
栄養相談の際のエピソードについてご紹介いたします。

こちらのお客様は病院で糖尿病予備軍と言われたことをきっかけに
お電話をいただき、おまかせ定期便の
担当栄養士をさせていただくことになりました。

初めてお話しした時にはHbA1cの数値が高く、次の検査までに
HbA1cを6台まで下げることを目標に
食事療法に取り組んでいただきました。
白米でなく、玄米にもち麦を混ぜて召し上がっていただき
週に4日はミールタイムのお弁当を導入していただいた結果
1カ月ほどで目標のHbA1c 6台を達成することできました。

検査結果をとても嬉しそうにご報告いただき、
私自身も自分のことのように嬉しく思い、
この仕事をしていてよかったなあと実感いたしました。

食事療法と聞くと継続できるか不安に感じる方も多くいらっしゃると思います。
ミールタイムの栄養士おまかせ定期便では、
栄養士がお客様の担当についてお食事をお届けし、
お客様の食事制限やお好みに合わせてお食事をお届けします。
また、ミールタイムのお弁当以外のお食事についてもご相談いただけるので
安心して食事療法に取り組んでいただけます。

ご不安なことがあればいつでもご相談ください。
お気軽にお電話お待ちしております。

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

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

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

今回は、横浜なみきリハビリテーション病院　管理栄養士の
羽立 彩乃様をインタビュー形式でご紹介いたします。

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

　医療系の資格を活かせる仕事を考えていたときに、管理栄養士という職業を知りました。もともと食べることが好きだったこともあり、「栄養の知識は仕事だけでなく、普段の生活にも役立つのでは」と興味を持ったのが始まりです。

大学のオープンキャンパスに参加した際、その大学の卒業生が自分の好きなスポーツ選手の栄養サポートをしている記事を読み、アスリートを食事で支える管理栄養士の姿に憧れました。それが、管理栄養士を目指した大きなきっかけです。

その後、勉強を進める中で、病院や福祉施設、給食などさまざまな分野で活躍していることを知り、「食事を通して健康を支える」という仕事に魅力を感じ、管理栄養士を目指しました。

2.やりがいを感じるとき

　食事摂取量が少ない患者さんに対して、聞き取りを行いながら食事量や食形態の調整、栄養補助食品の提案などを行っています。その結果、「食べられるようになった」「これは美味しかったから飲めたよ」と笑顔で話していただいたり、「ありがとう」と感謝の言葉をいただけたりしたときは、とても嬉しく、大きなやりがいを感じます。

また、病棟では看護師やリハビリスタッフほど患者さんと接する時間は多くありませんが、「栄養士の〇〇さん」と名前を覚えて呼んでいただけたときは、とても励みになります。

栄養指導では、「いろいろ教えていただきありがとうございました」「聞けてよかったです」といった言葉をいただくこともあり、患者さんの役に立てたことを実感できる瞬間です。

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

　当院は回復期リハビリテーション病院です。患者さんが安心してリハビリに取り組み、機能回復を目指すためには、適切な栄養管理が欠かせないと考えています。

近年は、低栄養の状態で入院される患者さんも多く、管理栄養士が早い段階から積極的に関わることの重要性を日々感じています。

これからも、一人ひとりの病態や生活背景に寄り添いながら、多職種と連携し、リハビリの効果を最大限に引き出せる栄養サポートを行っていきたいです。また、退院後の生活も見据えた栄養指導を行い、患者さんが住み慣れた地域で安心して生活を送れるよう支援できる管理栄養士を目指していきたいと思います。

—————————————–
羽立様、ありがとうございました。

今回のお話の中で、私が特に印象に残ったのは、ある患者さんへの栄養サポートの経験についてです。

その患者さんは、入院前から食欲が低下しており、「食べることが好きなのに食べられない」という状態だったそうです。入院後も「食欲がない」と話され、食事を半量にし、栄養補助食品で補う対応としましたが、「なぜ食べられないのか」という原因を探るため、多職種へ相談を行いました。

まず薬剤師へ相談したところ、服用している薬の種類が多いことが、食欲低下の一因として考えられることが分かったそうです。その後、医師にも相談し、薬の種類を調整していただきました。

すると、少しずつ食欲が回復し、最終的には食事を全量召し上がることができるようになったと伺いました。

このお話を通して、患者さんの栄養状態を改善するためには、管理栄養士だけでなく、医師、薬剤師、看護師など多職種がそれぞれの専門性を活かして関わることが大切なのだと、改めて感じました。

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

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

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

先月、平野区にございます平野東図書館前病院様にて
地域公開講座が開催され、参加させていただきました。

今回のテーマは、
『夏を元気に乗り切る食事のコツ』です。
管理栄養士の濱脇様がご講演されました。

この日もとても暑い日でしたので、
夏バテに関しては参加された方も大変関心の高い
テーマだったのではないでしょうか。

夏バテ防止によいとされるビタミンB1、C、
たんぱく質などの栄養素のお話や、
簡単なレシピも添えて、食べ方のポイントを解説していただき
メモを取って聞かれている方もいらっしゃいました。

クイズを実施したり、料理写真を使って献立も考えてもらいました。

ただお話を聞くだけではなく参加しながら考える事ができたので、
参加者の方も質問したり、自分は普段こんな組み合わせで
食事をしているよ、などわいわいお話をしながら盛り上がりました。

参加者の方には、お土産として塩タブレッツをご提供しました。

今年の夏も大変暑いですので、たくさん汗をかいたり、
運動後の対応としてこうした塩タブレッツを使うのも一つの手です。
美味しいので、何粒も一度にたくさん食べないようにと
栄養士さんからも食べ方の解説をしていただきました。

平野東図書館前病院様では、こうした地域公開講座を
様々なテーマで開催されています。
今回は食事のお話でしたが、9月に開催される講座では
「はじめてのアロマセラピー　～香りで始める心地よい暮らし～」
と題して、暮らしに役立つセルフケアについてお話をしていただきます。
こうした身近なところで、日々の生活に役立つお話が
気軽に聞けるのはとても良い機会になりますね。

暑くて体調を崩しやすい時期ですが、
皆様の健康に少しでもお役に立てるよう、
弊社も引き続き取り組んでまいります。
平野東図書館前病院様、貴重なお時間をいただき
ありがとうございました。

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

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

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

はじめに

こんにちは、渡邊です。

社内アプリのUI改修を行う際に、Sortable.jsというライブラリを使用し、一部ページにドラッグ＆ドロップ（以下、D&D）機能を使ったUIを実装しました。

今回は、Sortable.jsを使ってD&D機能を実装する基本的な方法から、D&D操作後に移動した項目や移動先を取得し、サーバー側のデータ更新につなげる方法まで紹介します。

Sortable.jsとは

Sortable.jsは、DOM要素をD&D操作で移動可能にし、D&D操作に応じて設定したコールバックを実行できるJavaScriptライブラリです。

通常、D&D操作をJavaScriptで一から実装する場合、マウスイベントや要素の位置計算など多くの処理を記述する必要がありますが、Sortable.jsを使うことでこれらの複雑な処理をライブラリ側に任せることができ、少ないコードでD&D機能を実装することができます。

また、Vanilla JavaScriptで利用できるため、特定のフレームワークに依存しておらず導入しやすいライブラリです。

基本的な使い方

導入

今回の開発ではSortable.jsを既存のJavaScript管理方式に合わせて組み込みました。

※一般的にはnpmやYarnを利用した導入方法もありますが、今回は社内アプリケーションがRailsのAsset PipelineでJavaScriptを管理していたため。

Asset Pipeline：RailsがJS/CSSなどの静的ファイルをまとめて管理・最適化して配信する仕組み

実装例

Sortable.jsを利用する場合、D&D対象となるDOM要素を指定して、Sortableインスタンスを作成します。

例えば、以下のようなリストがあるとします。

<ul id="sortable-list"> 

　<li>項目A</li>  

　<li>項目B</li>  

　<li>項目C</li>

</ul>

JavaScript側で対象の要素を指定します。

const element = document.querySelector('#sortable-list');


new Sortable(element, {

  animation: 150

});

new Sortable() に対象となるDOM要素を渡すことで、そのリスト内の要素をD&Dで並び替えられるようになります。

今回の場合、Sortable.jsを適用しているのはul要素なので、ul直下のli要素がドラッグ対象になります。

リスト間の移動

Sortable.jsでは、groupオプションを設定することで、複数のリスト間で要素を移動させることもできます。

例えば、以下のような複数リストを用意した場合、

<div>

  <h3>リストA</h3>

  <ul id="list-a" data-id="1">

    <li data-item-id="1">項目A</li>

  </ul>

</div>


<div>

  <h3>リストB</h3>

  <ul id="list-b" data-id="2">

    <li data-item-id="2">項目B</li>

  </ul>

</div>

それぞれのリストにSortable.jsを適用し、itemsという同じgroup名を指定します。

new Sortable(document.querySelector('#list-a'), {

  group: 'items',

  animation: 150

});


new Sortable(document.querySelector('#list-b'), {

  group: 'items',

  animation: 150

});

このように、groupに同じ値を設定することで、異なるリスト間で要素をD&Dできるようになります。

ドラッグ終了後の処理

Sortable.jsでは、ドラッグ操作完了時に実行するコールバックを設定するためのonEndプロパティが用意されています。また、onEndに設定したコールバック関数には、ドラッグ操作に関する情報を持ったeventオブジェクトが引数として渡されます。

このeventオブジェクトには、ドラッグ操作に関する情報がSortable.jsで定義されたプロパティとして含まれており、それらを利用してバックエンドへ移動情報を送信し、レコード更新などの後続処理を行うことができます。

下記の表ではonEndでよく利用されるeventプロパティをまとめています。

プロパティ内容event.item移動したDOM要素event.from移動元のリストevent.to移動先のリストevent.oldIndex移動前の位置event.newIndex移動後の位置

※Sortable.jsではonEndの他にも以下のコールバックが用意されています。

1. onAdd（別リストから要素が追加されたとき）
2. onRemove（別リストへ要素が移動したことで、元のリストから要素が取り除かれたとき）
3. onUpdate（同リスト内で要素が並び替えられたとき）

また、それぞれのコールバックに渡されるeventオブジェクトには、コールバックに応じた情報が含まれています。

onEndでドラッグした項目と移動先を取得する

D&Dによる画面上の移動だけでなく、実際のアプリケーションでは、移動した内容をデータベースに反映するために、どの項目をどのリストへ移動したのかを特定する必要があります。

そこで、リスト間の移動を行う場合、移動した項目や移動先のリストを識別できるよう、DOM要素にdata属性を設定しておくと便利です。

例えば、以下のように項目とリストそれぞれにIDを設定します。

<ul id="list-a" data-id="1">

  <li data-item-id="123">項目A</li>

</ul>


<ul id="list-b" data-id="2">

  <li data-item-id="456">項目B</li>

</ul>

ドラッグ操作が完了すると、onEndに設定したコールバック関数が実行されます。

new Sortable(document.querySelector('#list-a'), {

  group: 'items',

  animation: 150,


  onEnd: function(event) {

    const itemId = event.item.dataset.itemId;

    const targetId = event.to.dataset.id;

    console.log(itemId);

    console.log(targetId);

  }

});

例えば、項目AをリストAからリストBへ移動した場合、

event.item

  ↓

<li data-item-id="123">

  ↓

event.item.dataset.itemId

  ↓

123

となり、移動した項目のIDを取得できます。

同様に、

event.to

  ↓

<ul data-id="2">

  ↓

event.to.dataset.id

  ↓

2

となり、移動先のリストのIDを取得できます。

つまり、この処理によって、

itemId   → 123（移動した項目）

targetId → 2（移動先のリスト）

という移動情報を取得できます。

また、取得した情報をAjax通信などでサーバーへ送信することで、画面上の変更をデータベースへ反映できます。

$.ajax({

  url: '/items/move',

  type: 'POST',

  data: {

    item_id: itemId,

    target_id: targetId

  }

});

ただし、Sortable.js自身がAjax通信やDB更新を行うわけではないため、移動後のデータ保存処理はアプリケーション側で実装する必要があります。

処理の流れ

D&Dを行って、実際にDB更新が起こるまでの処理の流れは以下のようになっています。

Sortable.js

    ↓

D&D操作を検知

    ↓

onEndに設定したコールバック関数を実行

    ↓

eventオブジェクトを受け取る

    ↓

event.item / event.to から移動情報を取得

    ↓

Ajaxでサーバーへ送信

    ↓

サーバー側で処理

    ↓

DB更新

まとめ

• 
  new Sortable()にD&D対象となるDOM要素を渡すことで、リスト内の要素をD&Dで並び替えられるようにできる。
• 
  groupオプションに同じ値を設定することで、複数のリスト間で要素を移動できる。
• 
  onEndなどのコールバックを設定することで、D&D操作の完了時に処理を実行できる。
• コールバックに渡されるeventオブジェクトから、移動した要素や移動先、移動前後の位置などの情報を取得できる。
• 
  eventから取得した情報をAjaxなどでサーバーへ送信することで、D&Dによる画面上の変更をデータベースへ反映できる。

参考：

https://qiita.com/AVELWP/items/536c797a63c081cf7bc0

https://zenn.dev/sdkfz181tiger/articles/e5979cde0238c1

https://sortablejs.github.io/Sortable

さいごに

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