JavaScript関連のことを調べてみた2021年05月14日

Dexieで部分一致で検索する方法

Dexieで部分一致で検索する方法。

“`javascript
// 記述例
async function search_todo(word) {
// Dexieの標準検索には前方一致しかないため、filterを使用して絞り込みをかける。
const todos = await db.table.filter(function (todo) {
// javascriptの部分一致検索方法で判定してやる。
return todo.title.indexOf(word) > -1;
}).toArray();
return await todos;
}
“`

参照元:
https://github.com/dfahlander/Dexie.js/issues/146

以上

notion-sdk-jsを利用してNotion APIの操作を行ってみた

# はじめに

[NotionのAPI](https://developers.notion.com/)が利用できるようになったので、さっそく[Javascript SDK](https://github.com/makenotion/notion-sdk-js)を利用して、データベースにデータを追加してみたいと思います。

# 事前準備

## ①： [integrationを作成しトークンを取得](https://developers.notion.com/docs#create-a-new-integration)

– `https://www.notion.so/my-integrations` にアクセス
– `Create new integration` をクリックしNameを入力しSubmit
– トークンが表示されるのでコピーして控えておく

## ②： [データベースを作成し①のintegrationを招待](https://developers.notion.com/docs#share-a-database-with-your-integration)

–

CSSでスマホのアドレスバーの高さに合うように実装する方法。100vhで困った人へ

***スマホの画面上のURLが書いてある部分のせいで、heightを100vhにしても意図したデザインにならない問題を解決する方法の備忘録***

解決方法は、javascriptのwindow.innerHeightを使用すること

“`
var windowHeight=window.innerHeight;
document.getElementById(‘section’).style.height=windowHeight+’px’;
“`

として、100vhでsectionの高さを設定するのではなく、window.innerHeightを使用することで、
アドレスバーの下から画面最下部の大きさで１画面となる。

こちらの記事がとてもわかりやすいです。
https://877.design/smartphone-height/

【Rails6】新・JavaScriptによる「入力フォームの内容のリアルタイムチェック機能」の実装例

以前、[【Rails6】JavaScriptによる「入力フォームの内容のリアルタイムチェック機能」の実装例](https://qiita.com/yamaday0u/items/21fbc89aa22527a9a875)という記事で、入力フォームのリアルタイムチェック機能の実装方法を紹介しましたが、この実装方法には以下の問題がありました。

– エラーメッセージのタグを`hidden`で隠しているので、フォームの中に不自然な空白がある
– 複数のタイプのエラーメッセージを表示しようとすると空白がさらに大きくなってしまう

今回はこれを改善し、しかもパワーアップしました。
前回と同様にjQueryのようなライブラリは使用せず、そのままのJavaScriptで実装したことが今回もポイントです。

## 実行環境
Rails 6.0.3.6

## 動作確認
今回のリアルタイムチェック機能の仕様は以下の通りです。

– 入力された値によって以下のエラーメッセージが表示される
– 半角数字以外の場合→「価格は半角数字で入力してください」
– 300〜9,999,999の範囲外の

LINE bot を作ってみた2（postback編）

[前回](https://qiita.com/soso555/items/770ec1f8c205c8653e8e) で味を占めたので、今度は postback を使用したアンケートを作ってみた

# 環境
– Google Spread Sheet
– Google Apps Script
– LINE Developers

# 経緯
– LINEbot と GAS だとすぐに作って動作確認できるし、インフラ準備とか必要ないからラクで楽しいなぁ
– もうちょっと LINEbot の種類を見てみよう

# 手順（概要）
1. LINE Developers でチャンネルの作成
2. GAS 構築
3. GAS 公開
4. LINE Developers に Webhook URL を登録
5. 動作確認

# 手順（詳細）
## 1. LINE Developers でチャンネルの作成
– https://developers.line.biz/console/channel/{id}/ で以下情報のチャンネルを作成する
– Channel type：Messaging AP

Next.js+framer-motionで画面遷移アニメーション

Next.js でReactのアニメーションライブラリであるframer-motionを使ったので、メモがてら記事にしたいと思います。

当方初投稿なので至らない点もあるかと思いますが、温かい目で見てもらえればと思います。

# はじめに

[Framer Motion](https://www.framer.com/api/motion/)とはReactで使用できるアニメーションライブラリです。純粋にアニメーションを実装しようとするとかなり複雑なものになってしまいますが、専用のコンポーネントを使うことで手軽にプログラムに組み込めるようになっています。

react-router-dom と組み合わせたものが多いですが、Next.js との相性も良さそうです。

# 前提

– Next.js v10.1.3
– TypeScript
– framer-motion v4.1.16

## framer-motionのインストール

npm でインストールできます。

“`
npm install framer-motion
“`

# コード

## _App.tsx

“`t

Next.js + TypeScript + Tailwind CSS プロジェクトの環境構築手順

Next.js + TypeScript + Tailwind CSS プロジェクトの環境構築手順をまとめました。

## はじめに
node と npm はインストールが済んでいる前提で、進めていきます。

動作環境

“`
node -v
v15.7.0

npm -v
7.4.3
“`

また、この記事の内容はmacOS (Apple Silicon)で実行しています。
Windowsをご利用の方は適宜読み替えていただければと思います。

## 1.Next.jsのプロジェクトを作成
Next.jsのプロジェクトを作成（フォルダが作成されるので、作業用ディレクトリ直下で行う）

“`
npx create-next-app
“`

“`
– What is your project named?
“`
とプロジェクト名を聞かれるので、任意のプロジェクト名を入力します。今回は next-sample とします。

すると入力した名前のフォルダが作成されます。

ローカルサーバーを起動します。

“`
// 作成したプロジェクトへ移動
cd next-sample

Blocklyでスライダー入力を行う

## Blocklyとは

https://developers.google.com/blockly

Googleの開発している、ブロックプログラミングを自由に自分で作れちゃうやつ

2021年のゴールデンウィークに発表があって、プラグインが色々でてきました！

公式のサンプル: https://google.github.io/blockly-samples/

ということで、このプラグインを使った(ギリギリ)最新の情報を記事にしていきます。

### 用語

[](https://gyazo.com/9db43eee0c42240b4af53bdcda6920f1)

[リファレンス](https://developers.google.com/blockly/reference/overview)でトップにある単語をちょっと触った自分がまとめてみました（間違ってたらコメントお願いします汗）

– Blockly まぁ全体

メンタル疾患症状管理、服薬管理Webシステム（書き込み結果、ファイル出力編)

メンタル疾患病状管理、服薬管理Webシステム（書き込み結果、ファイル出力編)のソースコードを公開いたします。

ファイル書き込み(result.php)のソースコードです。

“`HTML

【Vue.js】コンポーネントはパスカルケースで書くのがオススメ

## はじめに
仕事で使う事になったので1からVue.jsについて学んだ。
ちゃんと覚えておかないとまずそうな事を備忘録として1つ1つ残しておく。

## コンポーネントはパスカルケースで書くのがオススメ
コンポーネント（single file component）の命名方法は以下の2つが選択肢にある。

| # | 具体例 |
|:-:|:-:|
| ケバブケース | hello-world |
| パスカルケース | HelloWorld |

が、命名時はパスカルケースを用いるのがオススメでその理由は以下。

1. 　パスカルケースはJavaScriptでよく使われるため、エディターで開発する際に自動補完されやすい
1. 　HTML要素と見分けがつきやすい（HTMLの要素・タグはケバブケースで書くため）
　以下の画像のように、`LikeNumber`は緑色だが、`like-header`は青色でHTMLの要素(divタグ)と同じで見分けにくい[^3]![image.png](https://qiita-image-store.s3.ap-northeast-1.amazon

メンタル疾患症状管理、服薬管理Webシステム（画面入力編)

メンタル疾患症状管理、服薬管理Webシステム（画面入力編）のソースコードを公開いたします。

メインとなるmental.phpのソースコードです。

“`HTML