- 0.0.1. 【kintone x OCR】～正規表現検索編～ kintoneのOCRプラグインを開発する④【GCP】
- 0.0.2. 【Sails】Hello Worldを出力する
- 0.0.3. 【Meteor】Hello Worldを出力する
- 0.0.4. React Redux Hooks公式ドキュメント翻訳（useDispatch, useStore編）
- 0.0.5. 【Gatsby.js, React】ページ遷移させたいときは navigate() を使う
- 0.0.6. new Array(n) でできる Array オブジェクトや length プロパティについて
- 0.0.7. flatpickr まとめ と 祝日判定
- 0.0.8. [CSS+Javascript] 指定した段数でピラミッド状の要素リストを自動生成する
- 0.0.9. BoxGeometryの中身を読んでみたメモ
- 0.0.10. ログ出力に一工夫
- 1. 1.はじめに
- 2. 2.ログ出力を簡単に ON OFF する
- 2.0.1. Excel の AA 形式のカラム名と配列インデックスを相互変換する JavaScript
- 2.0.2. 業界未経験者が初めての共同開発を終えて
- 2.0.3. ros2-web-bridgeを使ってみた
- 2.0.4. MakeCode for micro:bitで作ったプロジェクトをM5Atomで動かす
- 2.0.5. JavaScriptを学ぶ準備とデベロッパーツールの基本
- 2.0.6. SpringBootで二つの 2つのドロップダウンリストを連動させる方法
- 2.0.7. vanilla.jsでswiperを使う
- 2.0.8. input type=numberの上下キーでの増減を無効にする
- 2.0.9. 2バイト言語で作れるメールアドレス、もじアドレス
- 2.0.10. React Hook Formのアップデート内容 – Version 7
【kintone x OCR】～正規表現検索編～ kintoneのOCRプラグインを開発する④【GCP】
#最終目標
kintone上でこの↓画像（請求書）をOCR処理し、請求番号・支払期限・振込先・請求元・明細（品名・数量・・・のテーブル部分）の値を取得することを最終目標とします。
尚、説明は後回しで「まず試したい」という方は、[プラグイン（テンプレート）のダウンロード](#プラグインテンプレートのダウンロード)からkintone用のプラグインとテンプレートを試用（1か月間）頂けます。
###今回（正規表現検索編）の目標
前回（③）で今後の課題とした、近接した値を取得するために、正規表現を利用した値の取得を行いたいと思います。＊ここ↓から「数量」と「単位」の値を上手く取得したいと思います。
でNode.jsの3大フレームワークについて取り上げた。今日は、SailsでHello Worldを表示する方法をまとめる。#Meteorを導入する方法
Node.jsの開発環境が構築されていることを条件とする。Node.jsの環境構築がまだの人は[こちらの記事(Windows版)](https://qiita.com/mzmz__02/items/6cc53f06205fd11367bc)を参考に環境構築してみてください。npmを使ってExpressをインストールするだけで、Sailsを導入することができる。
“`
$ npm install sails -g
“`#Hello Worldを出力する
Sailsでプロジェクトを作成するためにnewコマンドを使う。作成したいディレクトリの箇所で下記を実行すると、プロジェクト名のディレクトリが作成される。“`:プロジェクトの作成
【Meteor】Hello Worldを出力する
#プログラミング勉強日記
2021年2月23日
[前の記事](https://qiita.com/mzmz__02/items/03c4bb839a5e5abe02a8)でNode.jsの3大フレームワークについて取り上げた。今日は、MeteorでHello Worldを表示する方法をまとめる。#Meteorを導入する方法
Node.jsの開発環境が構築されていることを条件とする。Node.jsの環境構築がまだの人は[こちらの記事(Windows版)](https://qiita.com/mzmz__02/items/6cc53f06205fd11367bc)を参考に環境構築してみてください。
Windowsの場合、Chocolateyを[公式サイト](https://chocolatey.org/)からインストールする。“`:管理者のPowerShell
$ Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol
React Redux Hooks公式ドキュメント翻訳（useDispatch, useStore編）
Reactアプリケーションの状態管理のためのOSSライブラリである、React Reduxのバージョン7.1.0で追加された、Hooks APIの公式ドキュメントを翻訳していきます。
1. [React Redux Hooks公式ドキュメント翻訳（概要編）
](https://qiita.com/japanesebonobo/items/04205fa292455f862f33)
2. [React Redux Hooks公式ドキュメント翻訳（useSelector編）](https://qiita.com/japanesebonobo/items/843753903fdfa173f516)
3. React Redux Hooks公式ドキュメント翻訳（useDispatch, useStore編）2021/2/24公開。原文リンクは以下。
・公式ドキュメント（React Redux Hooks）：https://react-redux.js.org/api/hooks今回の記事はuseDispatchAPI, useStoreAPI編です。 でできる Array オブジェクトや length プロパティについて
初投稿です。
JavaScript初心者なのでおかしな点がありましたらご指摘お願いします。# 複数の要素をもつ配列を作成するイディオム
JavaScript の勉強をしていたらこのようなイディオムが出てきました。
“`JavaScript
[…new Array(5)].map((_) => ‘hello’)
// [ ‘hello’, ‘hello’, ‘hello’, ‘hello’, ‘hello’ ]
“`ふむふむ、スプレッド構文を使ってほしい要素数分の配列を作ってるんだな。
だけど “`new Array(n)“` だけで長さ n の配列ができるんじゃなかったっけ？“`JavaScript
new Array(5).map((_) => ‘hello’)
// [ <5 empty items> ]
“`あらら、ダメみたい。
“hello” が入りません。“`JavaScript
new Array(5)
// [ <5 empty items> ]
“`そもそも empty とは何でしょうか？
# Array() コンスト
flatpickr まとめ と 祝日判定
カレンダー機能が欲しかったので、いいライブラリが見つかって使ってみた。
installもできるが、今回はlinkとscriptをhtml上においておく方法でやりました。
こういうの名前あると思うのですが、忘れました。
` `
参考：
公式
https://flatpickr.js.org/getting-started/
日本語版
https://tr.you84815.space/flatpickr/examples.html“`
const config ={
mode: ‘multiple’,
dataFormat: ‘Y/m/d’,
locale: ‘ja’,
disable: [‘2021-02-23’]
}
flatpickr(‘.flatpickr’,config
[CSS+Javascript] 指定した段数でピラミッド状の要素リストを自動生成する
##はじめに
先日、あるWEBアプリケーションのデモ開発を行った後、UIの一部、表題内容の処理部分をパーツとして分解し、[JSFiddle](https://jsfiddle.net/STSHISHO/2dsju74h/)と[CodePen](https://codepen.io/STSHISHO/pen/JjbyLEZ)で公開しました。本記事はその詳細という位置づけですが、ほぼ小ネタ扱いです。## ロジック
以下が実行結果となります。処理部分のロジックは比較的単純です。Three.jsに興味を持ったので、直方体を作るBoxGeometryがどのような処理で実現しているかソースコードを読んでみました。
リビジョンは r125 です。
## 基本的な変数の代入処理
“`js:7-22行目
constructor( width = 1, height = 1, depth = 1, widthSegments = 1, heightSegments = 1, depthSegments = 1 ) {super();
this.type = ‘BoxGeometry’;
this.parameters = {
width: width,
height: height,
depth: depth,
widthSegments: widthSegments,
heightSegments: heightSegments,
depthSegments: depthSegments
};const scope = this;
“`見たままですが、幅や高さなどの必要な情報をメンバ変数
ログ出力に一工夫
# 目次
[1.はじめに](#1)
[2.ログ出力を簡単に ON OFF する](#2)
[3.あとがき](#3)1.はじめに
…主に自分が見直すための記録です…
初心者ということもあり、開発中、デバッグのためにログを仕込むことが多かった。
けれども最終的にはログが出ないように消さなくてはいけない。
１つ１つ消してもいいが、そんなことすると面倒くさい上に、「また必要になった！」となったら一から仕込み直しに…そんなジレンマを解決する方法を知ったので記録しておく。
てか、めっちゃ簡単なことだったのに今まで思いつかなかったｗｗ2.ログ出力を簡単に ON OFF する
“`ruby:target.js
//ログ出力モード
const isDebug = true;/**
* ログアウトプット
* @param {any} obj ログ出力内容
*/
const outputLog = (obj) => {
if (isDebug) {
console.log(obj);
}
Excel の AA 形式のカラム名と配列インデックスを相互変換する JavaScript
Excel では、列名が A・B・C・・・Y・Z・AA・AB・・・XFC・XFD 形式にで表示されます。
配列のインデックス（添字）と列名を相互変換する JavaScript ワンライナー。↓“`js
// Excel Column to Index
const col2idx = c => c.split(“”).reduce((prev, c) => (prev * 26 + parseInt(c, 36) – 9), 0) – 1;// Index to Excel Column
const idx2col = n => ((n > 25 ? idx2col(Math.floor(n / 26 – 1)) : “”) + (n % 26 + 10).toString(36).toUpperCase());
“`https://gist.github.com/kawanet/69237038ea3c414284a5418d732b5660
業界未経験者が初めての共同開発を終えて
#1.はじめに
所属しているオンラインサロンにて、共同開発を行いました。今回作成した成果物は下記リンクからご確認ください！
[成果物はこちら](https://tenkuehotel-r018.netlify.app/)
この記事では、未経験が共同開発を経験してみた感想、学んだこと等を記載していきたいと思います。
共同開発に興味をお持ちの方の参考になりましたら幸いです。##1-1.簡単に自己紹介
・Web開発エンジニアを目指し学習中
・業界未経験
・2020年11月〜本格的にプログラミングを学習中##1-2.概要
共同開発の概要は下記の通りです。
・予めメンターにより用意された[見本](https://tenkue-hotel.takanori-portfolio.com/)を目指して実装を行う。
・デザインについては、完全一致ではなく、おおよそのレイアウトが整っていれば良いという基準のもと開発した。
・メンバー：メンター（現役エンジニア）1名+開発者（業界未経験）3名
・期間：約3週間
・環境/技術：EJS、Sass、JavaScript（jQuery）、Node.js、Gi
ros2-web-bridgeを使ってみた
## 経緯
web上でros2のtopicの情報をやりとりできるパッケージ無いのかなと探していたところ、[ros2-web-bridge](https://github.com/RobotWebTools/ros2-web-bridge)に出会いました。リポジトリの手順通りにセットアップする途中で、詰まる箇所があったので、自分がやった方法を共有します。## 環境
– Ubuntu20.04
– ROS2 foxy## 手順
まずは下の手順で進めてください。“`bash
$ cd/src
$ git clone https://github.com/RobotWebTools/ros2-web-bridge.git
$ sudo apt install nodejs npm
$ cd ros2-web-bridge
$ npm install
“`
npm installした段階で、node-gyp関連でエラーが発生した場合は下のコマンドを実行してください。“`bash
$ pip install git+https://chro
MakeCode for micro:bitで作ったプロジェクトをM5Atomで動かす
MakeCode for micro:bitで、ScratchのようにGUIでパーツを組み合わせて動作をプログラミングすることができます。
出来上がったコードは、micro:bitにファイルを書き込む際に、コンパイルされたバイナリを書き込んでいます。
一方で、出来上がったコードは、Javascriptにも変換されていますので、それをESP32上で動作するJavascriptエンジンで動かせばESP32でも同じコードが動けるはずです。M5Atomには、micro:bitと同じように、5×5のLEDがありますし、加速度センサもありますので、うってつけです。
ESP32上で動作するJavascriptエンジンは、QuickJSを採用しました。以下詳細。
(参考) [QuickJSでお手軽ESP32＋Javascript実行環境](https://qiita.com/poruruba/items/e159464305e5bab6e06e)今回のもろもろのソースコードは以下のGitHubに置いておきました。
poruruba/Esp32_MakeCode
https://gith
JavaScriptを学ぶ準備とデベロッパーツールの基本
#JavaScript学習の忘備録として
実際の動作を確認する上でデベロッパー・ツールが便利です。
##Chromeデベロッパー・ツールとは？
– Webアプリのデバッグやパフォーマンスチューニングに役立つツール群
– JavaScriptを実行したり、通信の状況を確認したり、HTMLのレイアウトを確認したり、Webアプリ開発で役に立つ便利な機能が使えるもの
– Chromeブラウザに標準で搭載された機能(Chrome以外のブラウザにも似た機能を持つものもあります)手順
1. 適当なウェブページを開く
2. 右クリックして`検証` を選択
– Macの場合、`command(⌘) + option(⌥) + i` 3つのキーを`同時`に押します
– windowsの場合、 `F1
SpringBootで二つの 2つのドロップダウンリストを連動させる方法
## 概要
* SpringBoot + thymeleaf + mysqlでWebアプリケーション開発時、二つの 2つのselectBoxを連動させる方法を紹介します。## 機能
* ひとつ目のドロップダウンリストの都道府県により、2つのドロップダウンリストの値は該当県の市区町に変わる。## 開発環境
* Windows 10
* Spring Tool Suite 4 Version: 4.8.1.RELEASE
* JavaSE-11
* MySql 5.8
* Thymeleaf 3.0.12## 事前準備
Mysqlに都道府県と市区町のテーブルを作ってデータを登録する都道府県テーブルを作成する
“`sql:create_pref
CREATE TABLE `pref` (
`prefCode` int(11) NOT NULL,
`prefName` varchar(50) NOT NULL,
`disFlag` int(11) DEFAULT ‘1’,
PRIMARY KEY (`prefCode`)
) ENGINE=InnoDB
vanilla.jsでswiperを使う
https://swiperjs.com/swiper-api#thumbs
を参考にする
input type=numberの上下キーでの増減を無効にする
input type=numberの値が上下キーで増減するのを無効にする必要があったので、HTML属性で有効無効を切り替えられるのかと思ったけれど、無効にはできないようなので、JQueryで対処。
押したキーを無効化するだけですが、検索して調べる人もいると思うので書いておきます。画面上のすべてのinput type=numberに対して効くので、一部のinputだけに適応させたい場合はセレクタでidやclassを指定してあげてください。
“`javascript
$(function ()
{
$(‘input[type=number]’).keydown(function (event)
{
switch (event.key)
{
case ‘ArrowUp’:
case ‘ArrowDown’:
return false;
}
});
});
“`「矢印ボタンを出さない」と「マウススクロールでの増減無効化」は実装例がたくさんあるのだけれど、上下キー無効はあまり必要ないのかな。
間違ってカーソルキーを押しちゃった時にいつ
2バイト言語で作れるメールアドレス、もじアドレス
もじアドレスとは、どんなWebサービスですか？
２バイト文字、つまり日本語の文字だけをアドレスにしてメールを送れるサービスです。もっと分かりやすく言うと、コンタクトフォーム自体を任意の文字で検索できるようにした感じです。実質日本語、漢字だけのメールアドレスを持てるような雰囲気になります。twitter質問箱のリアル版というか、ペイパルやホワットスリーワーズにインスパイアされて作りました。
そもそもこの もじアドレス というのはなんの役に立つのですか？
行政とか民間の企業は、個人と音声通話のみでコンタクトをとろうとすることが多いと思います。連絡したい相手の携帯番号を知っているのであれば、簡単なショートメールの1つや2つくれればいいのにな。と思う反面、それをやろうとするとスマホ＆スマホの二台間でのやりとりが必要になってくる為、個人対組織では難しいですよね。
人の名前だけでテキストが伝達できれば、色々と社会がもう少しスムーズに
React Hook Formのアップデート内容 – Version 7
(❤️ ブログ記事を翻訳してくれた日本のチーム、[Kotaro](https://twitter.com/kotarella1110)、[Keiya](https://twitter.com/_keiya01)、[Marina](https://twitter.com/marin_a___)に感謝します。)
React Hook Formもそろそろ2年目を迎えようとしています。プロジェクト自体は、初日と同じように今でも活発に活動しています。この数年の間に、バージョン7の作成やデザインに繋がる多くの学びや経験がありました。私はここで、次のメジャーバージョンでの改善点とその理由をいくつか紹介します。フォームを構築するという点で、React開発者がより楽に開発できるようにする私たちの使命に変わりはありません。
## V7 visions:

? (DX)厳密に型付けされたフォーム
??♀️ シンプルさと一貫性
? パフォーマンス
?♂️ パッケージサイズの削減———
このビジョンを説明するために、APIの変更点を見ていきましょう。
### regist
