PlusOne Blog

前回、webページに動きを与えるものとして animation を紹介しましたが、
今回は、同様にwebページに動きを与えるものとして、transform を紹介します。
下記リンクから、ご覧ください。
　
下の iframe では見つらいので、こちらからどうぞ
別ページで開きます。
　

社会情勢も変化して、zoomを利用した電子会議等のオンラインでの作業も増えてます。

　
以前、zoom の使い方について何回か投稿しております。
今回は、以前のzoom の使い方の投稿をまとめてリンクを貼りましたので、はじめてzoomをご利用になるかた・zoomの使い方がイマイチ分からないかたなどは、ぜひご参考にしてください。
　
【Zoom】使い方１～zoomアカウントの登録方法とzoomアプリのインストール方法～
【Zoom】使い方２～ミーティングのURLを固定する・パスコードを変更する方法～
【Zoom】使い方３～実際にミーテングに参加・開催してみよう！～
【Zoom】使い方４～表示される画像を固定する～
【Zoom】使い方５～名前を設定（変更）しよう～
　

　

特定の要素の座標を取得するには、次のとおり getBoundingClientRect() を使用する。
　

　　let {left,top} = document.querySelector(element_selector).getBoundingClientRect()

　
これは、特定の要素の位置をブラウザの表示領域の左上を(0, 0)として、そこからの相対位置で示されています。
特定の要素の位置を取得したいとき、html の領域がブラウザの表示領域と一致していない場合などがあり、正確な値を取得できないケースがたまにある。
そういった場合も含めて、次のとおりに取得するのが良い。
　

　　function getAbsolutePosition(elm) {
       const {left,top} = elm.getBoundingClientRect();
       const {left: bleft,top: btop} = document.body.getBoundingClientRect();
       return {left: left - bleft,top: top - btop,};
    }

　　let myelmposition; 
　　myelmposition = getAbsolutePosition(elm);
　　console.log myelmposition.left;
　　console.log myelmposition.top;

Vue.router使用時に、ヘッダー／ナビメニュー／背景画像の処理をおこなったときの備忘録
　

Routerインスタンス

router.jsで生成したRouterインスタンスはthis.$routerで参照することができます。

■router.push

■router.replace

指定したパスに遷移します。
両者の違いは、遷移するのに履歴を上書きするかどうかです。「push」は履歴を上書しません。一方、「replace」は履歴を上書きします。

　　this.$router.push('/test1');
　　this.$router.replace('/test1');

■router.go

指定したページ分、進みます。マイナスの数字を指定すると、その分ページが戻ります。

　　this.$router.go(2);

■router.back

ページを戻します。

　　this.$router.back();

■router.foward

ページを勧めます。

　　this.$router.foward();

例

　　methods: {
            forward () {
                // test1へ遷移
                this.$router.push('/test1')
            },
            replace () {
                // test1へ遷移
                this.$router.replace('/test1')
            },
            forwardDouble () {
                // 2つ先へ
                this.$router.go(2)
            },
            backDouble () {
                // 2つ前へ
                this.$router.go(-2)
            },
            forward () {
                // 1つ前へ
                this.$router.forward()
            },
            back () {
                // 1つ先へ
                this.$router.back()
            }
        }           

　　<button @click="forward">/test1へ遷移</button>
　　<button @click="replace">/test1へ遷移</button>
　　<button @click="forwardDouble">2ページ先へ移動</button>
　　<button @click="backDouble">2ページ前へ移動</button>
　　<button @click="forward">1ページ先へ移動</button>
　　<button @click="back">1ページ前へ移動</button>

router-link

指定したページを表示する場合は、router-linkコンポーネントを使用します。

■router-link

　　<router-link to="/test">TESTページ</router-link>

　↓HTMLに展開すると a タグで展開されます。

　　<a heref="/test" ....>TESTページ</a>

　
aタグではなく別のタグとして展開したい場合はtagプロパティを使用します。

　　<router-link to="/test" tag="li">TESTページ</router-link>

■#router-link-active

toでバインドしたパスが、現在のパスに含まれている場合に付与されます。例えば/detailを指定したリンクは、/detail, /detail/001, /detail/002のときは付与されます。

■#router-link-exact-active

toでバインドしたパスと現在のパスが完全に一致した場合に付与されます。同じ例で考えたときに、/detail/001, /detail/002ではrouter-link-exact-activeは付与されません。
　

exactプロパティを指定すると、パスが完全一致の場合にのみrouter-link-activeクラスが付与されるようになります。

　　<router-link to="/" exact>TESTページ</router-link> 

active-class, exact-active-class に、特定にクラス名を付与できます。active-class, exact-active-classプロパティにクラス名を指定します。

　　<router-link to="/" active-class="active-link" exact-active-class="exact-active-link">TESTページ</router-link> 

ルートオブジェクト

ルートオブジェクトには現在アクティブなルートの情報となり、this.$routeとして利用することができます。

■$route.path

現在表示しているパスを返します。

　　$route.path

パスが特定のときに、特定の class を付けるときは、次のように記述すればよい。
（表示中のパスが「/」のとき、class 「toppage」を付ける）

　　<nav class="dtnavi" :class="{'toppage': $route.path === '/'}">

■$route.name

現在表示しているパスのnameを返します。

　　$route.name

■$route.params

動的なルーティングで設定したパラメータオブジェクトを返します。

　　$route.param

■$route.query

現在表示しているパスのクエリ（?の後に続くテキスト）を返します。

　　$route.query

■$route.fullPath

現在表示しているパスのフルパスを返します（クエリを含む）

　　$route.fullPath

今回は、確立を指定した抽選のコンテンツを作成したので、それの備忘録。
　

　

　　function array_rand_weighted($entries){
　　　$sum  = array_sum($entries);
　　　$rand = rand(1, $sum);

　　　foreach($entries as $key => $weight){
　　　　　if (($sum -= $weight) < $rand) return $key;
     }
   }

　　// 抽選候補となる配列
　　// キーが要素で、値が確立になる。
　　$entries = array(
　　　"1等"    => 5,
　　　"ハズレ"  => 95,
　　);

　　// 抽選(こんな感じで使用する)
　　$result_key = array_rand_weighted($entries);
　　if ($result_key == "1等") {
　　　echo '１等です。';
　　} else {
　　　echo 'ハズレです。';
　　}

　
array_sum($array)
・配列の値の合計を計算します。
　
round(A,B)
・整数A~Bの範囲で乱数を発生します。
　
foreach($entries as $key => $weight){
}
・連想配列を使用したforeachi
　$entries の連想配列。各配列を$keyで取り出し、その$keyに相当する値を$weightとして処理を繰り返す。
　
if (($sum -= $weight) < $rand) return $key;
・配列の合計値より、各配列の値を引いていって、乱数より小さい値になったときに、その配列の$keyを返す。
　

　

youtube のチャンネル登録ボタンの設置方法についての備忘録
　

　
Google の下記公式ページにアクセスします。
https://developers.google.com/youtube/youtube_subscribe_button
　

　
「チャンネル名または ID:」にチャンネルID または アカウントIDを入力します。

※チャンネルID または アカウントIDは、youtubeのメニューの「設定」→「詳細設定」から確認できます。
https://www.youtube.com/account_advanced
　
チャンネルID または アカウントIDを入力すると、「プレビュー」と「コード」が更新されます。

　
コードをコピーして、任意の箇所にペーストすればチャンネル登録ボタンが表示されます。
　
　
レイアウト、テーマ、チャンネル登録者数の表示を設定することもできます。
　

　

twitter シェアボタン　を設置する時に、投稿する twitter に任意のテキストを挿入するなどのカスタマイズしたときの備忘録。
　

　

オリジナルの twitter ボタン の作成

twitter シェアボタンをカスタマイズするには、通常のtwitterサイトからの作成より独自のボタンを作成する。
まずは、ノーマルなtwitter シェアボタンは次のように作成する。

　<a class="tw_share" href="http://twitter.com/share" target="_blank">
　　　ツィートする
　　　（テキストの代わりに画像を挿入することもできます
　　　　<img src="画像リンク" alt="画像が表示されなかった場合の代替テキスト" />
　　　）
　</a>

CSSで装飾

.tw_share {
  font-weight: bold;
  padding: .8em 1.6em;
  margin: 0.4em;
  background-color: #00acee;
  color: #fff;
  text-decoration: none;
  border-style: none;
  border-radius: 5px;
}
.tw_share:hover {
  opacity: 0.6;
  transition: 1.0s ;
  color: #fff;
}

　
次のようなボタンが作成されます。
ツィートする

オリジナル項目をつける

作成した twitter シェアボタンの href のURLの後ろに、次のパラメータを付けて、カスタマイズすることができます。
　
　url：共有したいページのURL
　text：ページタイトルなどの共有したい文章
　hashtags：設定したいハッシュタグを入れます。#は不要。カンマ区切りで複数設定可能
　via：TwitterアカウントIDを設定しておくと、「@◯◯さんから」と表示されます。@は不要
　related：フォローを促したいTwitterアカウントのIDを設定。ツイート後に「おすすめユーザー」として表示されます。IDの後にコロン(:)をつなげて説明文を加えることも可
　
■パラメータを繋げるときは、「＆」で繋ぐ

　href=”http://twitter.com/share?url=◯◯&text=◯◯&via=◯◯&hashtags=◯◯

hashtags（ハッシュタグ）を複数設定したいときは、「,」で区切ります。
　
■スペースや改行を使いたい場合
スペースや改行等の特殊文字を使う場合、URLエンコードで入力します。
　スペース：%20
　改行：%0a
　%：%25
　&：%26
　
■Wordpressで、タイトルやURLを入力するとき
・URL

url=<?php the_permalink(); ?>

・タイトル

　text=<?php echo get_the_title(); ?>

　
■ツイート画面を別ウィンドウに表示して、本場の twitter のようにする

　onClick=”window.open(encodeURI(decodeURI(this.href)), ‘tweetwindow’, ‘width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1’); return false;”

オリジナルの twitter シェアボタン

上記を使って次のようなボタンが作成できます。

<a class="tw_share" href="https://twitter.com/intent/tweet?url=https://plus1jp.com&amp;text=プラスワンのホームページです。%0a&amp;via=p1tweet1&amp;related=p1tweet1:介護保険業務支援ソフトウェアを作っている会社です&amp;hashtags=プラスワン,介護支援ソフトonclick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;" target="_blank" rel="nofollow">結果をシェアする</a>

結果をシェアする
　

　

HTMLのvideoタグで動画を自動再生するとき、iphoneのsafariでは自動再生されなかったので、その時の対応の備忘録
　

　
videoタグのvideoを自動再生するとき、autoplay属性を付与する。

　　<video id="myvideo" src="●●●/×××.mp4" autoplay></video>

　
ただし、これではiphoneでは自動再生されない。
次の２つの属性を付与する必要がある
・playsinline
　ビデオをインラインで再生する。昔は、iOSではインラインで再生されなかったが、インラインで再生できるようになった。自動再生するには、インラインで再生が必須。
・muted
　ページ遷移でいきなり音が出るのはユーザビリティが非常に悪いので、音がでないようにしておかなければ自動再生できない仕様となっているらしい。
　
★→autoplay、playsinline、muted属性３つセットで次のように記述しないと、自動再生されない。

　　<video id="myvideo" src="●●●/×××.mp4"  autoplay muted playsinline></video>

　
ただし、上記記述をしてもiphoneで自動再生されなかった。
何かしらの影響で、muted属性がうまく認識されなかった可能性があるので、jsで強制的にmuteにしてみたら、自動再生されるようになった。

　　$(function() {
　　　　var video = $('video').get(0);
　　　（または
　　　　　var video = $('#myvideo')）
　　　　video.muted = true;
    }

　
今回は、php を使って場合分けを行い、videoタグをつけていたため、
タイミング的にvideoタグのmuted属性をうまく読み込めなかった可能性がある。
こういった場合は、jsで読み込み完了時に強制的にmutedを付与すれば解決した。
　

　

fadeIn で、要素を表示すると、display が block になってしまい、
flex 等にしている要素だと不都合なので、この解決方法を調べたので備忘録として
　

　
非常に単純で、fadeIn の後に css()を続けて記載してやれば良い。

　　$(element).fadeIn().css('display','flex');

jQueryは、こんな風に繋げて記載できるので楽。やはり、DOM要素を操作するにはjQueryは秀悦！
　
ちなみに、こういう書きかたもある。

 $(element).next(element).slideDown({
 　　start: function () {
 　　　　　　　　$(this).css({display: "flex"})
            }
 });

画像の遅延ロードを作成しているとき、
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);
　　　});
　　
　　});

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

　　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];

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 福岡」のサイトが開きます。）
　

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

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

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

プラスワン 出展内容

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

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

■出展ブース

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

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