PlusOne Blog

記事一覧

NEW 日本ケアマネジメント学会 第21回研究大会 ご来場のお礼

日常

この度は大変お忙しい中、日本ケアマネジメント学会第21回研究大会　弊社ブースにお立ち寄りいただき、感謝申し上げます。
当日は至らぬ点もあったかと存じますが、ご容赦いただきますようお願い申し上げます。
　
弊社ブースにてご説明させていただいた商品へのご意見やご不明点がございましたら、お電話か問い合わせフォームからお気軽にお問い合わせください。
　

この記事を読む

日本ケアマネジメント学会 第21回研究大会 出展のお知らせ

お知らせ

プラスワンは、6/18（土）~6/19（日）に開催される「日本ケアマネジメント学会 第21回研究大会」に、弊社介護支援システム「Smile One」「Smile Web+」の出展を予定しております。ぜひ、この機会にお越しください。
　

　
＜日本ケアマネジメント学会 第21回研究大会 HP：　https://jscm21th.com/　＞

この記事を読む
デフォルト画像

【Googleカレンダー】共有

その他（WEB）

予定を共有する方法として簡単な方法としてGoogleカレンダーの利用をおすすめします。

Googleカレンダーを使用する方法について紹介します。
　
　

ブラウザでGoogleカレンダーを表示する

　
Googleカレンダー：https://calendar.google.com
　
・スマホのアプリの「Googleカレンダー」では共有の設定はできないので、スマホの場合でもブラウザでGoogleカレンダーを表示させてください。また、「表示」を「デスクトップ」表示に切り替えてください。



・下記〇を確認して、共有したいGoogleアカウントになっているか確認する。Googleアカウントが異なる場合は、〇内のアイコンをタップしてGoogleアカウントを変更する。

　

共有するカレンダーを作成する

　
・Googleアイコンの横にあるアイコンをタップ　→「設定」をタップ



　
・左のメニューから「カレンダーを追加」をタップ → 「新しいカレンダーを作成」をタップ



　
・カレンダーの名前を入力 → 「カレンダーを作成」をタップ
・カレンダーの名前は好きな名前を入力できます。

　
・カレンダーが作成され、左のメニューに表示されます。

　

作成したカレンダーを共有できるようにします。

　
・左のメニューから、追加したカレンダーをタップ → 「予定のアクセス権限」をタップ



　
・「一般公開して誰でも利用できるようにする」をタップ → 「OK」をタップ



・カレンダーが一般公開され、誰でもカレンダーを見ることができるようになりました。
　

共有カレンダーのURLを確認する

　
・左のメニューから、追加したカレンダーをタップ → 「カレンダーの結合」をタップ


・上記の「このカレンダーの公開URL」にアクセスするとカレンダーが表示され共有できます。
・共有したい人にこのURLを連絡してアクセスしてもらいましょう。
　
・画面左上の「設定」の「←」をタップするとカレンダー画面に戻ります。予定などを入力してください。
※予定を入力するときは、予定を入れるカレンダーが共有するカレンダーになるようにしてください。

※予定を入れるカレンダーを変更する方法
・カレンダーをタップ → カレンダーをタップ → 変更したいカレンダーをタップ




　
　

　

この記事を読む

5月連休のお知らせ

お知らせ

4月末～5月にかけての営業日は
【4/29（金）～5/1（日）】休業
【5/2（月）】営業
【5/3（火）～5/5（木）】休業
となります。
　
5/6（金）より通常業務となります。
　
何卒宜しくお願い致します。

この記事を読む

【CSS】比較関数 min()関数

HTML/CSS

比較関数とは、複数の値を比較し、使用された関数に基づいてそれらの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 とは

HTML/CSS

今回は、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】手書き風グラフⅡ③

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】手書き風グラフⅡ②

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】手書き風グラフⅡ①

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】手書き風マーカや強調、囲いなど

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】手書き風グラフ

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',
  }

　

手書きグラフ

　

　

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