5月連休のお知らせ
4月末～5月にかけての営業日は
【4/29（金）～5/1（日）】休業
【5/2（月）】営業
【5/3（火）～5/5（木）】休業
となります。
5/6（金）より通常業務となります。
何卒宜しくお願い致します。
記事一覧
【CSS】比較関数 min()関数
比較関数とは、複数の値を比較し、使用された関数に基づいてそれらの1つの値を利用する関数です。
比較関数として次の３つが挙げられます。
・min()
・max()
・clamp()
この３つについて、これから３回にわけて順に説明していこうと思います。
min()
min()関数には、1つ以上のコンマ区切りの計算が含まれ、それらの最小値を表します。つまり、最大値を設定するにはmin()を使用します。
例えば、要素の最大幅を700pxにしたい場合は、下記のように記述します。
.element {
width: min(50%, 700px);
}
min()関数を使用すると、ブラウザは値(50%, 700px)の中で最も小さい値を選択する必要があります。
どちらを選択するかはこの場合は%単位を使用しているため、ビューポートの幅に依存します。
50%の値が700pxよりも大きい場合は無視され、代わりに700pxが使用されます。
そうでない場合、つまり50%の値が700px未満の場合は、50%が幅の値として使用されます。
そうなる場合のビューポートの幅は、Xの50%イコール700pxなので、ビューポートの幅は1,400pxです。
【CSS】font-size に使われる rem とは
今回は、font-size によく使われる rem という単位について紹介します。
レスポンシブル対応には欠かせない単位になりますので、ぜひ理解して使いましょう。
rem とは
rem というのは root em の略になります。
すなわち、root のフォントサイズを 1rem とする単位です。
root とは html のことですので、html 要素のフォントサイズが 1rem になります。
例えば、html 要素のフォントサイズが「16px」のときは、1rem = 16px, 2rem = 32px, 3rem = 48px … となります。
html 要素のフォントサイズから相対的にサイズ指定できるのが rem になります。
rem を使うときは
主要なブラウザのデフォルトの文字サイズは 16px なので、そのまま rem を利用すると、
10px = 10 / 16 rem = 0.625 rem
12px = 12 / 16 rem = 0.75 rem
24px = 24 / 16 rem – 1.5 rem
と、キリの悪い数字で設定しにくいので、
あらかじめ
html {
font-size: 62.5%;
}
と、ルート要素（html要素）のフォントサイズを10pxにしておきます。
これで、
10px = 16 / 10 rem = 1.6 rem
12px = 12 / 10 rem = 1.2 rem
24px = 24 / 10 rem – 2.4 rem
と、わかりやすくなります。
rem の使いかた（レスポンシブル対応）
rem は、レスポンシブル対応にとても適しています。
例えば、
720pxのスマートフォンなどの 720px では 62.5%
それ以上のサイズの時は 1.2 倍に拡大したいときは
html {
font-size: 62.5%;
}
@media screen and (max-width: 720px) {
html {
font-size: 75%;
}
}
とすれば良いのです。
【JavaScript】手書き風グラフⅡ③
今回は、前回に続く”jsライブラリ「rawViz.js」の紹介の続きです。
前回は、基本的な記述法について説明しましたが、今回から、個々のフラフの種類の記述方法について紹介していきます。
今回は
・円グラフ（ドーナツ状）
・円グラフ（パイ状）
の２つについて、紹介していきます。
円グラフ（ドーナツ状）
new roughViz.Donut({
element: '.viz',
data: {labels: ['a', 'b'], values: [10, 20]}
})
ラベルとデータは必須で上記のように記述します。
下記のとおりオプションがありますので、使いかたによってオプションを設定します。
円グラフ（パイ状）
new roughViz.BarH({
element: '.viz',
data: {labels: ['a', 'b'], values: [10, 20]}
})
ラベルとデータは必須で上記のように記述します。
下記のとおりオプションがありますので、使いかたによってオプションを設定します。
【JavaScript】手書き風グラフⅡ②
今回は、前回に続く”jsライブラリ「rawViz.js」の紹介の続きです。
前回は、基本的な記述法について説明しましたが、今回から、個々のフラフの種類の記述方法について紹介していきます。
今回は
・棒グラフ（縦）
・棒グラフ（横）
の２つについて、紹介していきます。
棒グラフ（縦）
new roughViz.Bar({
element: '.viz',
data: {labels: ['a', 'b'], values: [10, 20]}
})
ラベルとデータは必須で上記のように記述します。
下記のとおりオプションがありますので、使いかたによってオプションを設定します。
棒グラフ（横）
new roughViz.BarH({
element: '.viz',
data: {labels: ['a', 'b'], values: [10, 20]}
})
ラベルとデータは必須で上記のように記述します。
下記のとおりオプションがありますので、使いかたによってオプションを設定します。
【JavaScript】手書き風グラフⅡ①
今回は、”色々な種類”の手書き風のグラフを作成するjsライブラリ「rawViz.js」を紹介します。
手書きで可愛いグラフが描画できますので、ちょっとしたアクセントに良いと思います。
ライブラリの読込
<script src="https://unpkg.com/rough-viz@1.0.6"></script>
HTMLの記述
DIVタグを準備
<div id="viz"></div>
JSの記述
new roughViz.Donut({
element: "#viz",
data: {
labels: ["a", "b", "c"],
values: [20, 10, 5]
},
colors: ["#0bd", "#fc2", "#f99"]
});
手書きグラフ
【JavaScript】手書き風マーカや強調、囲いなど
今回は、手書き風のマーカや強調、囲いなどを作成するjsライブラリ「Rough Notation」（WEBサイト、GitHub）を紹介します。
サイトの中で、ワンポイントのアクセントに使用するとイイ感じになると思います。
jsの実装
「annotation注釈 を付ける要素」と「注釈スタイルを記述する構成」を渡してオブジェクトを作成します。
注釈オブジェクトを取得したら、それを呼び出しshow()て注釈を表示できます。
<script type="module">
import { annotate } from "https://unpkg.com/rough-notation?module";
const e = document.querySelector('#myElement');
const annotation = annotate(e, { type: 'underline' });
annotation.show();
</script>
OPTIONのプロパティ
type
装飾の種類を指定
・underline: アンダーライン
・box: ボックスで囲う
・circle: 円で囲う
・highlight: 蛍光ペンでマークされてようにマーカを引く
・strike-through: 取り消し線を引く
・crossed-off: ×マークを書く
・bracket: 周りに角かっこを描画 デフォルトでは右側にありますが、左、右、上、下のいずれかまたはすべてに構成できます
animate
アニメーション効果をつけるかどうかを指定
デフォルトは true
animationDuration
アニメーションする時間を指定
デフォルトは 800ms
color
装飾の色を指定
デフォルトは currentColor
strokeWidth
装飾の線幅を指定
デフォルトは 1
padding
要素と装飾の隙間の幅を指定
上下左右を個別に、[top,right,bottom,left] [top & bottom, left & right] と指定することもできます。
デフォルトは 5px
multiline
インライン要素のみ有効
複数行に装飾するときに true に設定します
iterations
装飾を描画する際の繰り返し数を設定します
デフォルトは 2
brackets
角かっこを装飾する位置を設定します（left, right, top, bottom）
デフォルトは right
rtl
左から右へ記載する文章のときに、true を設定します。
Annotation Group
装飾するオブジェクトをグループ化することにより、描画順を指定することができます。
<script type="module">
import { annotate, annotationGroup } from 'rough-notation';
const a1 = annotate(document.querySelector('#e1'), { type: 'underline' });
const a2 = annotate(document.querySelector('#e3'), { type: 'box' });
const a3 = annotate(document.querySelector('#e3'), { type: 'circle' });
const ag = annotationGroup([a3, a1, a2]);
ag.show();
</script>
サンプル
【JavaScript】手書き風グラフ
今回は、手書き風のグラフを作成するjsライブラリ「CHART.XKCD」を紹介します。
手書きで可愛いグラフが描画できますので、ちょっとしたアクセントに良いと思います。
ライブラリの読込
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1/dist/chart.xkcd.min.js"></script>
HTMLの記述
SVGタグを準備
<svg class="line-chart"></svg>
JSの記述
titleでグラフのタイトル、xLabelとyLabelでそれぞれX軸・Y軸のラベル、datasetsでそれぞれのデータをセットします。
const svg = document.querySelector(".line-chart");
new chartXkcd.Line(svg, {
title: "デベロッパーの月収",
xLabel: "月",
yLabel: "$ ドル",
data: {
labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
datasets: [
{
label: "計画",
data: [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 8000]
},
{
label: "現実",
data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150]
}
]
},
options: {}
});
フォントの変更
デフォルトでは英文のフォントなので、optionでフォントを日本語の適当なフォントを当てる
options: {
fontFamily:'Yomogi',
}
手書きグラフ
【WordPress】＄wpdbに自作データベースを追加で読み込む方法
今回は、Wordpressで自作のデータベースを読み込むようにしている時、
ある日突然、動かなくなったことがありませんか？
そんな時の確認方法と修正方法について紹介していきます。
Wordpressで自作のデータベースを読み込むようにする場合には、
Wordpressの独自関数「$wpdb」に、自作のデータベースを事前に登録する必要があります。
この登録方法は、「wp-includes」フォルダ内にある「wp-db.php」ファイルの中身を下記のとおり書き換える必要があります。
例）自作のデータベーステーブル「wp_mytable」を利用するとき
public $tables = array( 'posts', 'comments', 'links', 'options', 'postmeta', 'terms', 'term_taxonomy', 'term_relationships', 'termmeta', 'commentmeta', 'mytable', );
「$tables」の配列に自分で作成したデータベーステーブル「mytable」を追加します。
※接頭辞「wp_」は省略します。
これで、自作の「wp_mytable」を「$wpdb」を使用して呼び出すことができるようになります。
★★しかしながら、上記の方法では WordPress がバージョンアップなどで更新したときに、「wp-includes」フォルダ内にある「wp-db.php」ファイルも勝手に更新されます。
これによって、上記で追記した「mytable」が削除されてしまい、利用できなくなってしまいます。
これを防ぐために、「wp-content」フォルダ内に「db.php」ファイルを新しく作成してその中で「$tables」をリライドさせます。
<?php
require_once(ABSPATH.WPINC.'/wp-db.php');
class my_wpdb extends wpdb {
public $tables = array(
'posts',
'comments',
'links',
'options',
'postmeta',
'terms',
'term_taxonomy',
'term_relationships',
'termmeta',
'commentmeta',
'mytable',
);
};
if( !isset($wpdb) ) {
$wpdb = new my_wpdb( DB_USER, DB_PASSWORD, DB_NAME, DB_HOST );
}
これで、wordpressが自動で更新されても、$wpdbは書き換えられないので安心です。
【GAS】文字列で扱う
GAS で、スプレッドシートに入力しているデーに、文字列検索をかけても検索に引っかからないときの解決法
GAS で、スプレッドシートで文字列を検索するとき、スプレッドシート側が数字の場合は、indexOf等を利用して検索しても検索にひっかからない。
スプレッドシートの方を文字列にしておく必要があるので、その方法をメモしておく。
const sp = SpreadsheetApp.openById("********");
const itemList = sp.getSheetByName("********");
var values = itemList.getRange(1, 3, itemList.getLastRow()).getDisplayValues().flat();
var r = values.indexOf(yubin)+1;
var address = itemList.getRange(r, 7).getValues() + itemList.getRange(r, 8).getValues() + itemList.getRange(r, 9).getValues()
新年のご挨拶
新年あけましておめでとうございます。
旧年中は格別のご愛顧を賜り、厚く御礼申し上げます。
本年も社員一同事業所様はもちろんご利用者様のお役に立ちたい！を胸に、
より一層のサービス向上を目指し、誠心誠意努力させていただく所存でございます。
今後ともご指導ご鞭撻のほど、どうぞ宜しくお願い申し上げます。
末筆ながら皆さまのご健康とご多幸を心よりお祈りし、新年のご挨拶とさせていただきます。
プラスワン スタッフ一同
PHPで現在時刻を取得するには
date()関数 を使用するが
WordPressでは、時間がずれてしまう。
Wordpressでは、内部的な時刻がUTC (世界標準時) が
利用されているので、date()関数を使用すると、時刻がずれてしますようです。
そのため、WordPressには「date_i18n()」関数が用意されており、
これを使用すると、正確に現在時刻が取得できます。
=========
$date = date_i18n(‘Y-m-d H:i:s’);
==========
その他の方法として「date_default_timezone_set()」で、
標準となる時刻を設定する方法もある。
=========
date_default_timezone_set(‘Asia/Tokyo’);
$date = date(‘Y-m-d H:i:s’);
==========
【date()関数】
=========
date(フォーマット形式 [, タイムスタンプ]（[ ]は省略可）);
==========
※タイムスタンプを省略した場合は、現在の日付時刻を返します。
■フォーマット形式
●年
Y 西暦（4桁） 2015
y 西暦（2桁） 15
L うるう年→1、普通の年→0
●月
m 月（2桁） 07
n 月（先頭の0なし） 7
M 英語（略語） jul
F 英語 july
●日
d 日（2桁） 09
j 日（先頭の0なし） 9
t その月の日数 31
z その年の経過日数 121
●曜日・週
D 英語（略語） Tue
l 英語 Tuesday
w 曜日（日曜0→土6） 2
W その年の経過週（月曜開始） 28
●時間
H 24時間単位 09
G 24時間単位（先頭の0なし） 9
h 12時間単位 09
g 12時間単位（先頭の0なし） 9
a 午前/午後（小文字） am
A 午前/午後（大文字） AM
●分
i 分（2桁） 09
●秒
s 秒（2桁） 09