前回、webページに動きを与えるものとして animation, transform を紹介しましたが、
今回は、transform を３Dで操作できる、transform3D を紹介します。
transform3D を利用することで GPUアクセラレーション を使用することになりパフォーマンスが向上します。
GPUアクセラレーションを使用することで、アニメーション処理をソフト（ブラウザ）が行うのではなく、ハード（グラフィックボード）が行うから滑らかな動きが実現します。
下の iframe では見つらいので、こちらからどうぞ
別ページで開きます。
投稿ページの作成・編集画面の「新規投稿を追加」などのラベルを変更するとき、カスタム投稿の場合にうまく変更できなかったので、そのときの対応の備忘録
functions.php に下記を追加します。
add_filter('post_type_labels_post', 'custom_post_labels' );
function custom_post_labels( $labels ) {
$labels->name = 'お知らせ'; // 投稿
$labels->singular_name = 'お知らせ'; // 投稿
$labels->add_new = '新規追加'; // 新規追加
$labels->add_new_item = 'お知らせを追加'; // 新規投稿を追加
$labels->edit_item = '投稿の編集'; // 投稿の編集
$labels->new_item = '新規お知らせ'; // 新規投稿
$labels->view_item = 'お知らせを表示'; // 投稿を表示
$labels->search_items = 'お知らせを検索'; // 投稿を検索
$labels->not_found = 'お知らせが見つかりませんでした。'; // 投稿が見つかりませんでした。
$labels->not_found_in_trash = 'ゴミ箱内にお知らせが見つかりませんでした。'; // ゴミ箱内に投稿が見つかりませんでした。
$labels->parent_item_colon = ''; // (なし)
$labels->all_items = 'お知らせ一覧'; // 投稿一覧
$labels->archives = 'お知らせアーカイブ'; // 投稿アーカイブ
$labels->insert_into_item = 'お知らせに挿入'; // 投稿に挿入
$labels->uploaded_to_this_item = 'このお知らせへのアップロード'; // この投稿へのアップロード
$labels->featured_image = 'アイキャッチ画像'; // アイキャッチ画像
$labels->set_featured_image = 'アイキャッチ画像を設定'; // アイキャッチ画像を設定
$labels->remove_featured_image = 'アイキャッチ画像を削除'; // アイキャッチ画像を削除
$labels->use_featured_image = 'アイキャッチ画像として使用'; // アイキャッチ画像として使用
$labels->filter_items_list = 'お知らせリストの絞り込み'; // 投稿リストの絞り込み
$labels->items_list_navigation = 'お知らせリストナビゲーション'; // 投稿リストナビゲーション
$labels->items_list = 'お知らせリスト'; // 投稿リスト
$labels->menu_name = 'お知らせ'; // 投稿
$labels->name_admin_bar = 'お知らせ'; // 投稿
return $labels;
}
しかし、これではカスタム投稿などを作成したときの投稿ページの作成・編集画面のラベルは変更されません。（デフォルトの画面のみ変更されます）
カスタム投稿などの画面を変更する場合は、次のように「post_type_labels_post」の「post」の箇所を適用したい post_type名に変更すればOK
例）post_type が’joboffer’ の場合
add_filter('post_type_labels_joboffer', 'custom_post_labels' );
ユーザーフォームにボタンなどのコントロールを配置する方法の備忘録です。
（前回紹介した、「【VBA】VBAでエクセル外のオブジェクトを使うとき」に関連した内容になりますので、そちらの投稿も参考にしてください。）
ユーザーフォームにボタンなどのコントロールを配置する場合は、object.Add を使用します。
Dim ctrl As Control Set Set Ctrl = object.Add(class [, Name [, Visible ]] )
class は、配置するコントロールに割り振られた class を指定します。Name には、コントロールに振り分ける名前を指定します。
具体的には、次のように記述します。
Dim ctrl As Control
Set ctrl = CreateObject("Forms.CommandButton.1" , "btn_01")
ProgID(プログラムID)の例を次にあげておきます。
Set ctrl = Controls.Add("BARCODE.BarCodeCtrl.1")
Set ctrl = Controls.Add("RefEdit.Ctrl")
Set ctrl = Controls.Add("Forms.CheckBox.1") 'チェックボックス
Set ctrl = Controls.Add("Forms.ComboBox.1") 'コンボボックス
Set ctrl = Controls.Add("Forms.CommandButton.1") 'コマンドボタン
Set ctrl = Controls.Add("Forms.Image.1") 'イメージ
Set ctrl = Controls.Add("Forms.Label.1") 'ラベル
Set ctrl = Controls.Add("Forms.ListBox.1") 'リストボックス
Set ctrl = Controls.Add("Forms.MultiPage.1") 'マルチページ
Set ctrl = Controls.Add("Forms.OptionButton.1") 'オプションボタン
Set ctrl = Controls.Add("Forms.ScrollBar.1") 'スクロールバー
Set ctrl = Controls.Add("Forms.SpinButton.1") 'スピンボタン
Set ctrl = Controls.Add("Forms.TabStrip.1") 'タブストリップ
Set ctrl = Controls.Add("Forms.TextBox.1") 'テキストボックス
Set ctrl = Controls.Add("Forms.ToggleButton.1") 'トグルボタン
Set ctrl = Controls.Add("MSComctlLib.ListViewCtrl")
Set ctrl = Controls.Add("MSComctlLib.TreeCtrl")
Set ctrl = Controls.Add("InkEd.InkEdit.1")
Set ctrl = Controls.Add("MSInkaut.InkPicture.1")
Set ctrl = Controls.Add("WMPlayer.OCX.7")
ワークシート上に設置する場合は、OLEObjects.Add を使用します。
ActiveWorkbook.Worksheets("Sheet1").OLEObjects.Add ClassType:="Word.Document"
VBAでエクセル外のオブジェクトを使うときには、
参照設定でバインドする方法以外に、実行時にバインディングする方法があります。
その方法についての備忘録
参照設定でバインドする方法だと、エクセルのバージョンなどにより、参照するDictionaryのバージョンが異なります。このため、自分のPCでは参照できるが、他の人のPCでは参照できずエラーが出てしまうケースが発生してしまいます。
一方、実行時にバインディングする方法ではオブジェクトを直接バインドするため、こういったエラーは発生しません。
オブジェクトを作成する場合は、CreateObject を使用します。
Dim obj As Object Set obj = CreateObject(class)
class は、appname.objecttype の形式で指定します。具体的には、次のように記述します。
Dim obj As Object
Set obj = CreateObject("ADODB.Connection")
ProgID(プログラムID)の例を次にあげておきます。
Set obj = CreateObject("BARCODE.BarCodeCtrl.1")
Set obj = CreateObject("Access.Application")
Set obj = CreateObject("ADODB.Connection")
Set obj = CreateObject("ADODB.Recordset")
Set obj = CreateObject("ADODB.Stream")
Set obj = CreateObject("DAO.DBEngine.120")
Set obj = CreateObject("Excel.Application")
Set obj = CreateObject("RefEdit.Ctrl")
Set obj = CreateObject("Outlook.Application")
Set obj = CreateObject("PowerPoint.Application")
Set obj = CreateObject("Word.Application")
Set obj = CreateObject("Word.Document")
Set obj = CreateObject("htmlfile")
Set obj = CreateObject("InternetExplorer.Application")
Set obj = CreateObject("Microsoft.XMLDom")
Set obj = CreateObject("Microsoft.XMLHTTP")
Set obj = CreateObject("MSXML2.DOMDocument")
Set obj = CreateObject("MSXML2.XMLHTTP")
Set obj = CreateObject("Forms.CheckBox.1")
Set obj = CreateObject("Forms.ComboBox.1")
Set obj = CreateObject("Forms.CommandButton.1")
Set obj = CreateObject("Forms.Image.1")
Set obj = CreateObject("Forms.Label.1")
Set obj = CreateObject("Forms.ListBox.1")
Set obj = CreateObject("Forms.MultiPage.1")
Set obj = CreateObject("Forms.OptionButton.1")
Set obj = CreateObject("Forms.ScrollBar.1")
Set obj = CreateObject("Forms.SpinButton.1")
Set obj = CreateObject("Forms.TabStrip.1")
Set obj = CreateObject("Forms.TextBox.1")
Set obj = CreateObject("Forms.ToggleButton.1")
Set obj = CreateObject("MSComctlLib.ListViewCtrl")
Set obj = CreateObject("MSComctlLib.TreeCtrl")
Set obj = CreateObject("Scriptlet.TypeLib")
Set obj = CreateObject("CDO.Message")
Set obj = CreateObject("new:{1C3B4210-F441-11CE-B9EA-00AA006B1A69}")
Set obj = CreateObject("InkEd.InkEdit.1")
Set obj = CreateObject("Scripting.Dictionary")
Set obj = CreateObject("Scripting.FileSystemObject")
Set obj = CreateObject("Shell.Application")
Set obj = CreateObject("MSInkaut.InkPicture.1")
Set obj = CreateObject("VBScript.RegExp")
Set obj = CreateObject("Wia.ImageFile")
Set obj = CreateObject("WbemScripting.SWbemLocator")
Set obj = CreateObject("WScript.Shell")
Set obj = CreateObject("WScript.Network")
Set obj = CreateObject("new:{6BF52A52-394A-11d3-B153-00C04F79FAA6}")
VBAで、特定の日付の曜日を取得する方法についての備忘録
日付関数 Weekday と、WeekdayName の２つがあり、それらについて紹介。
Weekday 関数は、特定の日付の曜日を示す整数値を返す関数です。
Weekday(曜日をしらべたい日付)
曜日をしらべたい日付には、”20２１/２/２”のような文字列も可能です。
週の第１日目の曜日を示す値またはクラス名
・０：vbUseSystemDayOfWeek(PCのOSのシステム時間)
・１：vbSunday (日曜日)
・２：vbMonday (月曜日)
・３：vbTuesday (火曜日)
・４：vbWednesday (水曜日)
・５：vbThursday (木曜日)
・６：vbFriday (金曜日)
・７：vbSaturday (土曜日)
例）
MsgBox Weekday("2021/2/2")
カレンダー通り、2（＝火曜日）が表示されます。
Weekday 関数では、曜日を表す数字が返ってくるだけなので、何曜日なのか分かりません。
そこで、WeekdayName 関数で、何曜日というテキストを返します。
WeekdayName(Weekday関数で求めた曜日を表す数字, 「曜日」を省略するかどうか, )
例） 「曜日」を省略しない場合
MsgBox WeekdayName(Weekday("2021/2/2"),false)
「火曜日」が表示されます。
例） 「曜日」を省略する場合
MsgBox WeekdayName(Weekday("2021/2/2"),true)
「曜日」が省略され、「火」が表示されます。
前回、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.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>