PlusOne Blog

2022年2月に投稿した記事

【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()
この記事を読む
記事一覧に戻る