PlusOne Blog

記事一覧

【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()
この記事を読む

新年のご挨拶


 
新年あけましておめでとうございます。
 
旧年中は格別のご愛顧を賜り、厚く御礼申し上げます。
本年も社員一同事業所様はもちろんご利用者様のお役に立ちたい!を胸に、
より一層のサービス向上を目指し、誠心誠意努力させていただく所存でございます。
 
今後ともご指導ご鞭撻のほど、どうぞ宜しくお願い申し上げます。
末筆ながら皆さまのご健康とご多幸を心よりお祈りし、新年のご挨拶とさせていただきます。
 
プラスワン スタッフ一同

この記事を読む

【WordPress】現在時刻取得・表示するには

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

 
 

 

この記事を読む

サンタクロースになりませんか?

今年もクリスマスが近づいてきました。
 
と言っても、子どもも大きくなってプレゼントをあれこれと悩んで枕元に置くということはなくなり、なんだか寂しい今日この頃ですw
 
先日、twitterのフォロワーさんの投稿に、「Amazonが全国の児童施設の欲しいものリストがまとめられていてお手軽にサンタクロースになれるよ」というものがありました。
早速、紹介があった下記URLにアクセスしてみると、全国の児童施設が一覧がありクリックするとその施設の欲しいものリストが表示されました。
https://www.amazon.co.jp/b?ie=UTF8&node=10217438051

 
リストの中には、液体せっけんや洗剤などの生活必需品や子どものおもちゃなど、普通の家庭だとごく当たり前にあるものが多数ありました。
 
今年は、サンタになってこのリストの中からいくつかをポチろうと思います。
みなさんもお手軽にサンタクロースになれるので、ぜひいかがでしょうか?
 
 

 

この記事を読む

【WordPress】管理画面に独自のstyle/scriptを当てる方法

前回、wordpressの管理画面(ダッシュボード)に独自のメニュー・サブメニューを追加する方法を説明しましたが、
管理画面に独自メニューを作る方法①
管理画面に独自メニューを作る方法②
 
今回は、その作成した管理画面に独自の style や script を当てる方法を説明します。
 

管理画面に独自のstyle/scriptを当てる

functions.php に下記を追加します。
 
■CSS ファイルを読み込む

  function my_admin_style(){
      //CSSを追加
      wp_enqueue_style( 'my_admin_style', get_template_directory_uri().'/css/my_admin_style.css' );

    }
    add_action( 'admin_enqueue_scripts', 'my_admin_style' );

■JavaScript ファイルを読み込む

  function my_admin_script(){
      wp_enqueue_script( 'my_admin_script', get_template_directory_uri().'/js/my_admin_script.js' );
     
      // jQuery のコードだった場合
      wp_enqueue_script( 'my_admin_script', get_template_directory_uri().'/js/my_admin_script.js', array('jquery'));
     
      // body 終了タグ直前で読み込みたい場合(読み込み位置をフッターにするには第4引数を true にします)
      wp_enqueue_script( 'my_admin_script', get_template_directory_uri().'/js/my_admin_script.js', '', '', true);
     
      // body 終了タグ直前で jQuery のファイルを読み込みたい場合
      wp_enqueue_script( 'my_admin_script', get_template_directory_uri().'/js/my_admin_script.js', array('jquery'), '', true);
  }
  add_action( 'admin_enqueue_scripts', 'my_admin_script' );

 

管理画面の特定したページのみに独自のstyle/scriptを当てる

※前回の「wordpressの管理画面(ダッシュボード)に独自のメニュー・サブメニューを追加する方法」では、追加する画面の HTML(PHP) を直接 function.php に書き込んでいたが、
管理画面の特定したページのみに独自のstyle/scriptを当てるには、直接書き込むのではなく、include で PHP ファイルを読み込む必要があります。まず、その方法について説明します。
 
functions.php に下記を追加します。
 

 add_action( 'admin_menu', 'menu_page' );
 function menu_page(){
    add_menu_page( 'お知らせ・ブログ記載方法', 'お知らせ・ブログ記載方法',
    'edit_posts', 'info_menu', 'banner_options_page', 'dashicons-info', 3 );
 }
 function banner_options_page() {
  //別に用意した PHP ファイルを読み込ませる
  //ファイル名は、上記関数の引数のスラッグ名と同じにする
    include 'info_menu.php';
 }

 
これで追加したページのみに、CSS/JavaScript を当てます。
functions.php に下記を追加します。
 

 function my_admin_style(){
    wp_enqueue_style( 'my_admin_style', get_template_directory_uri().'/css/my_admin_style.css' );
 }
 add_action( 'admin_head-toplevel_page_info_menu', 'my_admin_style' );

 function my_admin_script(){
    wp_enqueue_script( 'my_admin_script', get_template_directory_uri().'/js/my_admin_script.js' );
 }
 add_action( 'admin_head-toplevel_page_info_menu', 'my_admin_script' );

add_action の引数の admin_head-toplevel_ の後に、追加したページのスラッグ名(画面の名前)を付ける。
 
■追加したページのスラッグ名(画面の名前)が分からない場合は、次のように「wp_die()」を使用して確認することができます。

 function my_admin_style($custom){
    wp_die( '<pre>' . var_export( $custom, true ) . '</pre>' );
 }
 add_action( 'admin_enqueue_scripts', 'my_admin_style' );

 
 

 

この記事を読む

年末年始休業のお知らせ

年末年始の休業につきまして、誠に勝手ながら下記のとおりとさせていただきます。

12月30日(木)~1月3日(月)迄休業となります。

1月4日(火)より通常通りの営業となります。

何卒、よろしくお願い申し上げます。

この記事を読む

【html】input[type=”text”] で Enter キーを押すと submit して入力値がクリアされる

form の input[type=”text”] が一つしかないと Enter キーを押すと submit して入力値がクリアされてしまうようです。
この仕様は、ほとんどブラウザの仕様です。
 
例)
form に input[type=”text”] が一つしかないとき

  <form method="post" action="?">
      <input type="text" name="test">
  </form>

 

解決方法)
form に input[type=”text”] が二つ以上あれば、 Enter キーを押しても submit されません。
form に input[type=”text”] が二つ以上作成して、 Enter キーを押すと submit 不必要な input を 「display:none;」で非表示にすればOKです。

  <form method="post" action="?">
      <input type="text" name="test1">
      <input type="text" name="test2" style="display:none;">
  </form>


 
 
 

例)Enter キーを押すと submit して入力値がクリアされてしまう例
form内にinputは2つあり、一方は[type=”text”]、一方は[type=”hidden”]

  <form method="post" action="?">
      <input type="text" name="test1">
      <input type="hidden" name="test2">
  </form>


 
例)Enter キーを押すと submit して入力値がクリアされてしまう例
form内にinputは2つあり、一方は[type=”text”]、一方は[type=”textarea”]

  <form method="post" action="?">
      <input type="text" name="test1">
      <textarea name="test2"></textarea>
  </form>


 
 

 

この記事を読む

【windows10】仮想化する②

前回、仮想の windows のサンドボックスを紹介しましたが、今回は同様な「Hype-V」について紹介します。
 
※「Hype-V」は、下記 windows10 のバージョンに用意されてます。残念ながら、windows10 Home で利用できません。
・Windows 10 Pro
・Windows 10 Enterprise
・Windows 10 Education
 
 

「Hype-V」を利用できるように準備する

 

1、設定画面を表示して「アプリ」を選択

→ 設定 で設定画面が表示されます。

 

2、「オプション機能」を選択


 

3、「windows のその他の機能」を選択


 

4、「Hyper-V」 → 「OK」を選択


 

5、「Hyper-V」が適用中の画面が表示

・適用準備に多少時間がかかります。

 

6、完了画面が表示されますので、「今すぐ再起動」を選択してPCを再起動


 
 

「Hyper-V」を利用する

 

1、 →「Windows 管理ツール」→「Hyper-V マネージャー」を選択


 

2、デスクトップ上に仮想windows のウインドウが表示されます。

・PC の性能によっては、仮想Windows の起動に時間がかかる場合があります。

 

3、仮想Windows で、色々な作業をする。

・仮想Windows 上でインストールしたり、保存したデータは、仮想Windows を閉じると完全に消去されるのでご注意ください。
・終了するときは、ウインドウを閉じます。仮想上のデータが消える旨のアラートが表示されるので「OK」を選択してください。

 
 

 

この記事を読む

【windows10】仮想化する

windows をインストールしはじめはサクサク動いて快適だけど、使ってるうちにだんだん重くなりますよね。
 
これは、使ってるうちに色々なアプリなどを試しにインストールしてみて、あんまり使えないアプリなのでアンインストールしたりなどの、不要なものをインストールしていることも原因にあります。
 
このようなとき、使ってる PC の中にもう一つ仮想の windows を作って、その仮想 windows の中でこういったアプリを試しにインストールして試せれば、本体の windows を汚すことなく利用することができます。
 
この仮想 windows を作成・利用するには、なんと windows10 に標準で付いている「Windowsサンドボックス」を利用して簡単に実現することができます。
今回は、この「Windowsサンドボックス」について紹介します。
 
※「Windowsサンドボックス」は、下記 windows10 のバージョンに用意されてます。残念ながら、windows10 Home で利用できません。
・Windows 10 Pro
・Windows 10 Enterprise
・Windows 10 Education
 
 

「Windowsサンドボックス」を利用できるように準備する

 

1、設定画面を表示して「アプリ」を選択

→ 設定 で設定画面が表示されます。

 

2、「オプション機能」を選択


 

3、「windows のその他の機能」を選択


 

4、「Windows サンドボックス」 → 「OK」を選択


 

5、「Windows サンドボックス」が適用中の画面が表示

・適用準備に多少時間がかかります。

 

6、完了画面が表示されますので、「今すぐ再起動」を選択してPCを再起動


 
 

「Windowsサンドボックス」を利用する

 

1、 →「Windows Sandbox」を選択


 

2、デスクトップ上に仮想windows のウインドウが表示されます。

・PC の性能によっては、仮想Windows の起動に時間がかかる場合があります。

 

3、仮想Windows で、色々な作業をする。

・仮想Windows 上でインストールしたり、保存したデータは、仮想Windows を閉じると完全に消去されるのでご注意ください。
・終了するときは、ウインドウを閉じます。仮想上のデータが消える旨のアラートが表示されるので「OK」を選択してください。

 
 

 

この記事を読む

【JavaScript】オブジェクト操作

今まで配列操作を紹介してきましたが、これをオブジェクトを操作しようとしてもできません。
同様にオブジェクトを操作するためには、「Object.keys(obj)」で key の配列にして操作するようになります。
 

foreach

 

 
 

map

 

 

 

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