暑い日が続いていますが、皆さまいかがお過ごしでしょうか？

今回は、6～9月頃に旬を迎える「おくら」をご紹介します。

おくらといえば、切ったときに出てくる
ネバネバとした食感が特徴ですよね。

このネバネバのもとには、
食物繊維の一種であるペクチンなどが含まれています。
また、おくらにはβ-カロテンやカリウム、
カルシウムなどの栄養素も含まれています。

夏の食卓に取り入れやすく、和え物や炒め物、スープなど、
さまざまな料理で楽しめるのも魅力です。

そんな旬のおくらを使ったミールタイムの商品が
「74-023 鶏肉の七味焼き」です。

こちらの商品には、副菜として
「茄子とおくらの揚げびたし」が入っています。

香ばしく焼き上げた鶏肉の七味焼きに、
夏が旬のなすとおくらを使った揚げびたしを組み合わせました。
旬の食材を楽しみながら、
手軽にお食事を召し上がっていただけます。

暑い時期は食欲が落ちやすいですが、
旬の食材を取り入れて、
夏の食事を楽しんでみてはいかがでしょうか？

ぜひミールタイムのお食事でも、
旬のおくらを味わってみてください♪

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

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

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

今回は、金沢文庫病院の管理栄養士　西江　咲様をインタビュー形式でご紹介いたします。

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

祖父が脳出血で倒れてしまったことがきっかけです。幸い後遺症はありませんでしたが、その後、塩分に気を付けなければならなくなり、栄養に興味を持つようになりました。

また、小学4年生から中学生の頃までバスケットボールをしていて、貧血気味だったことや、体力をつけるためにどうしたらよいのかを考える中で、「栄養学」に興味を持つようになりました。

1. やりがいを感じる時

当院では担当制なので、患者さんを継続して担当することができます。外来の栄養指導で、患者さんの数値が少しずつ改善していく様子を見ると、「やっていて良かった」と感じます。

以前、炭酸飲料を1日に2Lほど飲んでいる患者さんがいました。その方には、まず「ジュースなどの加糖飲料だけはやめましょう」と、一番大切なことを一つだけお伝えしました。

実際に取り組んでくださった患者さんから、「体が楽になった」と言っていただけたときは、とても嬉しかったです。そこから少しずつ食事改善への意欲も高まり、現在も継続して栄養指導を行っています。

2～3回ほど担当した頃に、「説明がわかりやすい」と言っていただけることも嬉しく、やりがいを感じます。

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

いつか、スポーツ栄養士として働きたいと思っています。

将来は、プロ野球やバスケットボールなど、スポーツの現場で選手を支える管理栄養士になることが目標です。

今は、病態についての勉強を続けながら、NST専門療法士などの資格取得にも挑戦したいと考えています。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

西江様、ありがとうございました。

患者さんに無理なく取り組んでもらえるよう、一番大切なことを一つに絞って伝える姿勢から、患者さんに寄り添った栄養指導をされていることが伝わってきました。

将来はスポーツ栄養士を目指されているとのことで、これまでの経験を生かした今後のご活躍が楽しみです。

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

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

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

7月16日（木）に愛仁会リハビリテーション病院様で開催された、
健康栄養教室に参加させていただきました。
「脱水予防」というテーマで管理栄養士の上田先生が講演されました。
脱水にはいくつか種類がありますが、等張性脱水（水分と電解質の喪失が
ほぼ同じ割合で起きる混合性の脱水）になる人が最も多いそうです。

また、性別や年齢によっても体内水分量が異なることや
経口補水液の正しい活用方法も教えていただきました。
薬の副作用や疾患、高齢であることにより渇きを感じにくい方も
注意が必要ですね。

実際に上田先生の説明のもと、皮膚つまみや爪押しなど
脱水のセルフチェックも行われました。
「今日ここに来るまでにどのくらい水分をとりましたか？」という
質問に対しては「コップ3杯分以上」に挙手された方が多かったです👏
皆さまもこまめな水分補給を心がけ、熱中症には十分お気をつけてお過ごしくださいね。

愛仁会リハビリテーション病院様公式Instagramも
ぜひこちらからフォローしてご覧ください ↓
愛仁会リハビリテーション病院(@aijinkai_reha_hospital) • Instagram写真と動画

この度は貴重なお時間を賜り誠にありがとうございました。
上田先生、愛仁会リハビリテーション病院様の
益々のご発展を心よりお祈り申し上げます。

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

＜栄養士・管理栄養士　経験者採用＞
募集要項　詳細は☟
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

さいごに

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