社会情勢も変化して、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.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 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 シェアボタンは次のように作成する。
<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;”
上記を使って次のようなボタンが作成できます。
<a class="tw_share" href="https://twitter.com/intent/tweet?url=https://plus1jp.com&text=プラスワンのホームページです。%0a&via=p1tweet1&related=p1tweet1:介護保険業務支援ソフトウェアを作っている会社です&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"})
}
});