PlusOne Blog

2020年12月に投稿した記事

【JavaScript】Intersection Observer API

画像の遅延ロードを作成しているとき、
Intersection Observer API について、調べてみたので、備忘録として。
 
Intersection Observer API とは、交差監視APIと言われ、任意の要素が表示画面内に現れるかどうかを監視・判定する API です。
引用:https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API
 

Intersection obserer の作成

コンストラクターを呼び出して Intersection observer を作成し、閾値が一方向また他の方向に交差する度に実行されるコールバック関数を渡します。

  let options = {
    root: document.querySelector('#scrollArea'),
    rootMargin: '0px',
    threshold: 1.0
  }

  let observer = new IntersectionObserver(callback, options);

■Intersection observer のオプション
コンストラクタに渡された options オブジェクトは、オブザーバーのコールバックが呼び出される状況を制御し、以下のフィールドがあります:
 
root:ターゲットが見えるかどうかを確認するためのビューポートとして使用される要素です。指定されなかった場合、もしくは null の場合はデフォルトでブラウザーのビューポートが使用されます。
 
rootMargin:root の周りのマージンです。CSS margin プロパティに似た値を持つことができます。例えば、”10px 20px 30px 40px” (top, right, bottom, left) のようなものです。この値はパーセント値にすることができます。この一連の値は、交差を計算する前にルート要素の範囲のボックスの各辺を拡大または縮小させることができます。既定ではすべてゼロです。
 
threshold:単一の数値もしくは数値の配列で、オブザーバーのコールバックを実行するターゲットがどのくらいの割合で見えているかを示します。 50% 通過したときのみ検出する場合は値 0.5 を使用します。 25% を超える度にコールバックを実行する場合は、 [0, 0.25, 0.5, 0.75, 1] という配列を指定します。既定値は 0 です (つまり、1ピクセルでも表示されるとコールバックが実行されます)。1.0 の値は全てのピクセルが見えるようになるまで、閾値をまたいだとみなされないことを意味します。
 

監視される要素をターゲットにする

  var target = document.querySelector('#listItem');
  observer.observe(target);

ターゲットが IntersectionObserver に指定された閾値を満たす度にコールバックが呼び出されます。コールバックは IntersectionObserverEntry オブジェクトのリストとオブザーバーを受け取ります。
 

交差しているかどうかの判定

変更の通知を受ける時にコールバック関数に渡された IntersectionObserverEntry の isIntersecting プロパティの値をチェックすることで、変更が感知された方向 (つまり要素が見えたかどうかを) 判断することが出来ます。
isIntersecting が true であれば、ターゲットは閾値を超えて少なくとも見るようになったということですし、false であればターゲットは指定した閾値では表示されなくなったということです。

 intersectionCallback(entries) => {
   entries.forEach(entry => {
     if (entry.isIntersecting) {
       let elem = entry.isIntersecting;
   }
  });
 }

 

例)画像が画面に表示された時にロードする の作成

  document.addEventListener("DOMContentLoaded", function() {

    //Intersection obserer の作成
   let options = {
    root: null,
    rootMargin: '0px',
    threshold: 0
   }
   imageobserver = new IntersectionObserver((entries) => {
    entries.forEach((entry) =>  {
     if (entry.isIntersecting) {
      let image = entry.target;
      image.src = image.dataset.src;
      imageobserver.unobserve(image);
     }
    });
   },options);

   //監視される要素をターゲットにする
   let images = [].slice.call(document.querySelectorAll('.lazyload'));
   images.forEach(function(image) {
    imageobserver.observe(image);
   });
  
  });

 
 

 

この記事を読む

【JavaScript】[].slice.call() による配列変換について

画像遅延読み込みについて調べていると、

  let images = [].slice.call(document.querySelectorAll('.lazyload'));

のような、「[].slice.call() 」という構文がでてきたので、調べてみた。
 
MDNの解説では、
========================
”slice メソッドを呼び出すことで、配列風オブジェクトやコレクションを新しい配列に変換することができます。
メソッドをオブジェクトに繋げるだけです。配列風オブジェクトの一例として、 arguments が挙げられます。以下に例を示します。”
========================
引用:https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

  function list() {
     return Array.prototype.slice.call(arguments);
   }

   var list1 = list(1, 2, 3); // [1, 2, 3]

この「Array.prototype.slice」を短縮する書き方が「[ ].slice」です。
 
ここで、配列風オブジェクトとは何か?
まず、javascripでは、数値、文字列、真偽値、null、undefined 以外の全てはオブジェクトであり、配列もオブジェクトです。その中で配列は、一般的なオブジェクトより高機能なオブジェクトなだけです。また、このオブジェクトはプロパティを持つことができます。
配列風オブジェクトとは、配列のよう要素的なものを持ち、lengthも持っているが、配列のような slice や sort などの配列特有のメゾットを持たないオブジェクトです。また、forEach などの配列の各要素を順に処理していくメゾットも利用できません。
 
ここで、具体的な例をあげてみます。

  var object = {
      name: 'plusone',
      age: 22
    },        //配列風オブジェクト
    array = [1, 2, 3];     //配列

  console.log(object['name']);// output 'plusone'
  console.log(array[1]); // output 2

 
今回実際に、使用した querySelectorAll() の戻り値は、Nodelist になり、まさに上記で説明した「配列風オブジェクト」になります。
そのため、querySelectorAll() で取り出した要素に順に処理を与えようと forEach をそのまま使用してもエラーになります。
そこで、冒頭に出した「[].slice.call() 」で、「配列風オブジェクト」(Nodelist) を配列に変換してあげるわけです。

  let images = [].slice.call(document.querySelectorAll('.lazyload'));

 なお、ES2015では、「配列風オブジェクト」(Nodelist) を配列に変換するのには、以下の構文も使用できます。

  // Array.from()
  var args = Array.from(arguments);
  // スプレッド構文
  var args = [...arguments];

 
 

 

この記事を読む

CareTEX 福岡 出展のお知らせ

2021年2月24日(水)・2月25日(木)に開催される「CareTEX 福岡」に出展いたします。

 
「CareTEX」とは、 介護用品・高齢者施設向け設備・備品/介護支援システム/サービスが一堂に集まる日本最大級の商談展示会です。このたび、2021年2月24日(水)・2月25日(木)に、福岡において「CareTEX 福岡」が開催されます。
 
こちらの「介護システム展 福岡」に、プラスワンは介護支援システム「SmileOne」「SmileWeb+」を出展いたします。ぜひ、この機会に弊社介護支援システム「SmileOne」「SmileWeb+」に触れていただき、ご検討いただけますようお願いします。
 
「CareTEX 福岡」のホームページ
「CareTEX 福岡 – 介護システム 福岡」のページ
 
会 期 
: 2021年2月24日(水)・2月25日(木) 9:30~17:00(受付開始 9:00)
会 場 
: 西日本総合展示場 新館(A・B・C展示場)

 ※詳しい会場へのアクセス方法は こちら(「CareTEX 福岡」のサイトが開きます。)
 

展示会への入場には、来場事前登録(来場日指定)が必要です。

■来場事前登録(来場日指定)の方法
1、「CareTEX 福岡」のサイトより、登録をおこなってください。
2、「CareTEX 福岡」事務局にて、ご登録いただいた内容を確認のうえ、1営業日以内に来場事前登録完了の通知と、「来場者専用Web」をご利用いただけるID・パスワードをメールでお送りいたします。
3、2のメールの送信をもって「来場事前登録」が完了になります。

■「来場事前登録」が完了したら
「来場者専用Web」にて「来場事前登録受付証」を印刷し、名刺2枚をお持ちのうえ、会期当日、展示会場受付までご提出ください。引き換えに入場者バッチをお渡しします。

※「来場事前登録」についてのお問い合わせなどは、「CareTEX 福岡」事務局の方へお願いします。
「CareTEX 福岡」 お問い合わせフォーム

 
 

プラスワン 出展内容

■出展商品
介護統合システム / モバイルシステム / クラウドサービス
SmileWeb+ 『スマイルウェブ+』
介護統合システム / 介護保険請求 / ケアプラン作成
SmileOne 『スマイルワン』

プラスワン 出展商品(「CareTEX 福岡」のサイトが開きます。)

■出展ブース

 
■プラスワン 「CareTEX 福岡」 ちらし
下記よりダウンロードできます。ダウンロードいただき、ご自由にご利用ください。





 
■お問い合わせは、お電話かお問い合わせフォームでお気楽にお問い合わせください。
 

この記事を読む

【VBA】日時を扱うデータ ~Date(日付)型とは~

VBAで日時を扱うときのデータについて、紹介していきます。
 
 

Date(日付)型とは

 
VBAでは、日時を扱うために、「日付型」というデータ型が用意されています。
この日付型を使うと、日付の比較や加算、引き算などの計算ができます。
 
VBAで、日付型を記述するときは「#」記号で囲みます。
#月/日/年 時:分:秒#の内容で記述します。
 

Sub macro1()
  Dim d1 As Date, d2 As Date, d3 As Date
  
  d1 = #12/24/2020# ' #月/日/年#
  d2 = #10:26:30 AM# ' #時/分/秒#
  d3 = #12/24/2020 10:26:30 AM# ' #月/日/年 時/分/秒#
     
  MsgBox d1 & vbCrLf & _
          d2 & vbCrLf & _
           d3
End Sub

 

 

文字列からDate型への自動変換

 
上記で紹介した記述法は見つらいので、文字列のように「”」記号で囲むこともできます。
文字列を日付型で定義したデータに代入すると、自動で日付型に変換されます。
 

Sub macro1()
  Dim d1 As Date, d2 As Date, d3 As Date
  
  d1 = "12/24/2020"
    d2 = "10:26:30 AM"
    d3 = "12/24/2020 10:26:30 AM"
     
  MsgBox d1 & vbCrLf & _
          d2 & vbCrLf & _
           d3
End Sub

 

 

 

DateAdd(“d”, 0, c1.Cells(i, 16))
 

この記事を読む

【windows10】離席時に Windows 10 PC を自動的にロックする

個人情報の管理など他人に見られるとまずい作業を PC でおこなっていると、PC を離れるときには注意が必要ですね。
そんなとき、Windows10 では PC とスマホなどの Bluetooth でペアリングされているデバイスを使用して、ペアリングしたスマホが PC の Bluetooth の範囲から出たら PC を自動的にロックしたりすることができます。
これにより、PC から離れても他人に重要な情報を見られる心配がなくなりますね。
※PC に Bluetooth 機能がついている必要があります。また、Bluetooth を使用してスマホなどのデバイスをペアリングをしておく必要があります。
windows と Bluetooth を接続する方法
 

 

設定方法

Windows 10 PC で、[スタート] ボタン > [設定] > [アカウント] > [サインイン オプション] の順に選択します。




[動的ロック] で、[その場にいないときに Windows でデバイスを自動的にロックすることを許可する] チェック ボックスをオンにします。

 
以上で、電話を持ったまま PC から離れると、Bluetooth の範囲から出た約 1 分後に PC が自動的にロックされます (Bluetooth の範囲はデバイスによって異なることに注意してください)。
 

 

この記事を読む

年末年始休業のお知らせ

年末年始の休業につきまして、誠に勝手ながら下記のとおりとさせていただきます。

12月30日(水)~1月3日(日)迄休業となります。

1月4日(月)より通常通りの営業となります。

何卒、よろしくお願い申し上げます。

この記事を読む

【windows10】bluetooth 機器を接続する

最近は、Apple の Airpods など、bluetooth の機器が増えてきましたね。
実は、私も macbook-air のキーボードが壊れて、bluetooth のキーボードを使ってますwww
 
そこで、今回は windows10 の bluetooth接続のしかたについて紹介します。
 

 

設定方法

Windows 10 PC で、[スタート] ボタン > [設定] > [デバイス] > [bluetoothとその他のデバイス] の順に選択し、Bluetooth[bluetooth] をオンにします。



 
「bluetooth またはその他のデバイスを追加する」> 「Bluetooth」を選択すると、接続可能な bluetooth 機器が表示されますので、接続したい機器を選択します

 
後の設定は、bluetooth機器ごとに異なりますので、接続したいbluetooth機器の取り扱い説明書をお読みになり設定してください。
 

 

この記事を読む

わくわく通信107号(令和3年、新年1ー2月号)心理テストの答え

わくわく通信107号(令和3年、新年1ー2月号)心理テストの答え

(突然ですが問題です)

ゲリラ豪雨に遭遇しました!

あいにくと傘を持っていません。このままではズブ濡れになっちゃう! さて、あなたはこれからどうしますか?

 

①自宅まで走って帰る
②近くのコンビニで傘を買う
③身内や知人に迎えを頼む
④雨宿りして雨が止むのを待つ
この質問の答えとして、4つの選択肢の中からどれを選んだかで判る、あなたの深層心理は…

 

『あなたの「お金の使い方」』です!

 

それでは、①~④の答えを詳しく解説してまいりましょう。

 

①自宅まで走って帰る

「出し惜しみせずに豪快に使うタイプ」

ずぶ濡れになっても走って帰るあなたは、即断即決の人。
あれば使うという大雑把な金銭感覚の持ち主のようです。

「○%OFF」や「決算セール」といった言葉を聞くと、早い者勝ちだとばかりに、つい財布のヒモをゆるめてしまう可能性大。

いつも財布にいくら入っているか気にしないという人は特に、衝動買いには気をつけて。

自分が稼いだお金を出し惜しみせずに豪快に使うというのがあなたの使い方。

だからぜひ倹約家のパートナーを探しましょうね。

 

②近くのコンビニで傘を買う

「安物買いの銭失い、チープな物が家中にあふれてしまうタイプ」

傘は家にあるのに買うあなたは実際の生活よりも趣味にお金を惜しまず、欲しいものは手に入れるという人。

「一点物の限定品」や「プレミアムつき」と言われると、多少無理をしても購入してしまう可能性大。

大きな買い物をするというよりもちょっとした買い物が積もり積もって大きな金額になるので気をつけて。

使い切れないチープな物が家中にあふれてしまうのがあなたのお金の使い方。

どうか、捨てられなくてゴミ屋敷になんてことにならないでね。

 

③身内や知人に迎えを頼む

「ここぞと言うとき出し惜しみしないタイプ」

家人に迎えを頼むあなたは、しっかりと損得を考え、出した金額以上に得るもの得ようとする人。

「お買い得」に関する嗅覚が鋭く、高級品に見える物を安く手に入れる可能性大。

ただ、意外に「流行」や「新製品」に弱く、特に自分の仲間に好評だと、つい試したくなってたくさん買い過ぎるので気をつけて。

お金がなくてもあるように見せる、ここぞと言うとき出し惜しみしないのがあなたのお金の使い方。

周りにはリッチな印象を与えられるはずですよ。

 

④雨宿りをして雨が止むのを待つ

「一度財布に入れたお札は手放さないタイプ」

一時の雨と考えて雨宿りを選ぶあなたはお金の貸し借りはしないし、食事は割り勘が当たり前の人。

ただし「健康」や「癒し」という言葉に弱くてテレビショッピングなどにハマったり、健康グッズや温泉巡りなど、リラックスすることにはつい使ってしまう可能性大。

もともとが倹約家なのでお金に関しては困らないかもしれませんが、一度財布に入れたお札は手放さないというのがあなたのお金の使い方。ケチんぼと思われても気にしないほうがいいかも。

 

さて、皆さんの深層心理はいかがでしたか?

ドキッとした方もいらっしゃったのでは?

この記事を読む

わくわく通信107号(令和3年、新年1ー2月号)うさぎの折り方

わくわく通信107号(令和3年、新年1ー2月号)の誌面でご紹介した、うさぎの折り方をご紹介!

この記事を読む

【HTML】target=”_blank”だけだと危ないらしい。

リンクを別タブで開かせたいとき、target=”_blank”だけだと危険らしい という記事。
 

 

通常の target=”_blank” だけを使う記述


  <a href="リンク先URL" target="_blank">別タブで開く</a>

こちらの通常の記述では、パフォーマンスとセキュリティ上に問題があると Google デベロッパーの記事があった。
https://web.dev/external-anchors-use-rel-noopener/
============================
・他のページは、あなたのページと同じプロセスで実行される場合があります。他のページが多くのJavaScriptを実行している場合、ページのパフォーマンスが低下する可能性があります。
・他のページは window、window.opener プロパティを使用してオブジェクトにアクセスできます。これにより、他のページがページを悪意のある URL にリダイレクトする可能性があります。
============================
 

改善した記述

target=”_blank” と併用して、rel=”noopener” または rel=”noreferrer” を記述する。


  <a href="リンク先URL" target="_blank" rel="noopener">別タブで開く</a>
または
  <a href="リンク先URL" target="_blank" rel="noreferrer">別タブで開く</a>

デモページを見つけたので、こちらを見ると分かりやすい。
https://blog.jxck.io/entries/2016-06-12/noopener.html 
 
実際、wordpress の投稿ページで link を設定すると、この「rel=”noopener”」が記述される
 

 

この記事を読む

【Gmail・Thunderbird】メールの送信・ファイルの添付の方法

Gmail と Thunderbird での、メールの送信方法およびファイルを添付する方法をまとめました。
次の本箱から、お読みください。
 

 

 

この記事を読む
記事一覧に戻る