- 0.0.1. React + TypeScript: Recoil公式チュートリアルのTodoリストをつくる 04 ー 状態を直接exportしないようにする
- 0.0.2. 塊を生成するVueコンポーネント
- 0.0.3. Data URL使ってセーブ画面にサムネイル表示したった【RPGツクールMZ】
- 0.0.4. 「マイクロサービスパターン」の復習 7章
- 0.0.5. JSONの中身はプレーンオブジェクトとは限らない
- 0.0.6. apiとか使わずにGoogleAppsScript経由でjava script でgmailを送る方法
- 0.0.7. InDesign JavaScript XML 絶対XPathを取得
- 0.0.8. Node.js Expressの例を通じて、Webアプリのセッションについて理解する
- 0.0.9. VueJSでのTouchイベント処理をむりやり実現する
- 0.0.10. Node.js Expressの例を通じて、WebアプリにおけるCookieについて理解する
- 0.0.11. scriptタグの書き方【同期的読み込みと非同期的読み込み】
- 1. script実行
- 1.0.1. Discord.js(v13系)で指定チャンネルにメッセージ送信メモ
- 1.0.2. javaScript96_DOM操作
- 1.0.3. Chrome によるパスワード自動入力を阻止する。
- 1.0.4. 【JavaScript】filter()の使い方
- 1.0.5. 【JavaScript】実行環境のネイティブDEFLATE実装を使えるCompressionStreamsAPI
- 1.0.6. javaScript93_webページのロードと基本のDOM操作
- 1.0.7. JavaScript、find、Filter
- 1.0.8. 【個人開発】全国の無料キャンプ場を検索し、欲しい情報を一目見て得られるようなサービス【CAMPHOOD】を作りました
- 1.0.9. javaScript91_DOMとイベント
React + TypeScript: Recoil公式チュートリアルのTodoリストをつくる 04 ー 状態を直接exportしないようにする
前回は、Recoilの状態をコンポーネントから直に書き替えないようにしました。運用としては、これでもよいかもしれません。けれど、あえてRecoilの設定のフック(たとえば`useSetRecoilState`)を使えば、コンポーネントから状態は変えてしまえます。今回のお題は、Recoilの状態の参照もカスタムフックを介すようにすることです。つまり、Recoilの状態はもはや`export`しません。書き上がりのコードは、つぎのCodeSandbox作例で確かめられます。
#### React + TypeScript: Recoil tutorial example 04
# `todoListFilterState`の状態をカスタムフックから参照する
`atom`については、状態をカスタムフックの戻り値に加えればよいことです。`todoListFilterState`は、つぎのように書き替えてください。“`react:sr
塊を生成するVueコンポーネント
[Blobsアプリ](https://blobs.app/)で生成される塊をVue3コンポーネントとして使えるようにしました。
—
# Vueバージョン
+ Vue3# インストール
npmで[塊生成パッケージ](https://github.com/lokesh-coder/blobshape)をインストールします。
`npm i blobshape`# コード
“`html“`
+ 色を付ける場合はcssのcolorプロパティで指定してください。
+ 幅と高さはi-blobsの親要素に従います。
+ sizeは指定しなくても良いです(任意プロパティ)—
“`html
Data URL使ってセーブ画面にサムネイル表示したった【RPGツクールMZ】
# 「セーブデータとセーブ画面・ロード画面の変更」プラグイン備忘録
通称「自分用セーブプラグイン」
ソースコードは以下にて公開中。
自分用なので他者環境で動作するかは不明。https://github.com/kuroudo119/RPGMZ-Plugin/blob/master/KRD_MZ_Save.js
## サムネイル表示
2022年2月21日にサムネイル表示を追加した。
本書はその際のやったことメモである。
### 機能概要
セーブデータごとにセーブ時のマップ画像を表示する機能である。
### 必要な処理
サムネイル表示に必要な処理は以下である。
– 画面キャプチャする。
– 画面キャプチャを保存する。
– 画面キャプチャを読込する。
– 画面キャプチャを表示する。—
### 動作確認編
まず
「マイクロサービスパターン」の復習 7章
## 概要
– Java読書会でせっかく勉強したのにつぎつぎと忘れていくので、印象に残ったところを記録していく
http://www.javareading.com/bof/
## 7章 マイクロサービスアーキテクチャでのクエリーの実装
– テーマはマイクロサービスアーキテクチャでいかにしてクエリーを実現するか
## API Compositionパターン
– 各マイクロサービスの手前にComposerを立てて、ComposerがAPIをクライアントに公開しつつ、各マイクロサービスに必要なクエリーを発行する
– API GatewayにComposerを埋め込むなり、独立サービスにするなり、役割分担は色々選択肢がある
– 例）ComposerはクライアントにfindOrder()を提供するために、Order、Kitchen、Deliveryなどのマイクローサービスを呼び出して、得られた情報を結合した結果を返す
– 利点：直感的で分かりやすい
– 欠点：ComposerでJoinの処理をするので、大量データを扱うのは難しい## CQRS(Command Quer
JSONの中身はプレーンオブジェクトとは限らない
タイトルのとおり、JSONの中身がプレーンオブジェクトとは限りません。配列だけかもしれないし、数値だけかもしれません。
※プレーンオブジェクト：↓こんなやつ
“`json
{
“aa”: “bb”
}
“`## どういうこと？
VS CodeでJSONファイルを作って適当に「aaa」と入れると、「Expected a JSON object, array or literal.」という警告が表示されます。「aaa」と書いただけのファイルは無効なJSONファイルですが、警告のとおり、JSONオブジェクト、配列またはリテラルなら何でも入れられます。
たとえば、これらは左上の「aaa」以外すべて有効なJSONファイルです。
 {
let options = e.parameter.name //送信者の名前
let body = e.parameter.text //本文
let subject = e.parameter.subject //送信先の担当者名
let recipient = e.parameter.mail //送信先のメールアドレスGmailApp.sendEmail(recipient, subject, body, options);
}
“`
上をまずデプロイします。
そして、urlを取得します。“`javascript:javascript側
InDesign JavaScript XML 絶対XPathを取得
絶対XPathを取得するスクリプトは、これで良いのかな・・・？
動作動画：https://youtu.be/kBgB9fRsYhs
~~~JavaScript
/*
このスクリプトを利用して起こった不具合の責任は取れません。
ご了承下さい。更新 2022/02/22
*/// アプリ指定
#target “indesign”;// スクリプト名
var scriptName = “絶対XPathを取得”;// スクリプトを実行
app.doScript(function(){// メッセージ
var dialogueFlg = confirm(“選択された要素の絶対XPathを属性に書き込みます。”, “”, scriptName);// Noの場合
if (dialogueFlg == false){// 終了
exit();
}// 進行状況パレット
var palette = new Window(“palette”,”進行状況”);
Node.js Expressの例を通じて、Webアプリのセッションについて理解する
## はじめに
Webアプリケーションが快適に利用できるのはセッションが存在するから、とよく言われると思う。前回の記事[Node.js Expressの例を通じて、WebアプリにおけるCookieについて理解する](https://qiita.com/yuta-katayama-23/items/068900da9271c4d1be1c)ではCookieが必要でそのCookieのおかげと言っていたのに、どういう事？となるかもしれないが、セッションについて理解を深めていく事でCookieとセッションの関係性についてもスッキリすると思う。そこで今回は、セッションとは何か？について理解しつつ、実際にNode.jsのExpressでセッションを実現する実装をやってみたのでその備忘録を残す。
## セッションとは何か？
簡単に一言で言ってしまうと、「論理的な意味での開始から終了までの一連の連続した操作（クライアントとサーバ間でやり取りされるひとまとまりの操作）を表す単位・概念」の事。ここでポイントは「一連の連続した操作」や「ひとまとまりの操作」と言っているように、1回だけでなく連続で行
VueJSでのTouchイベント処理をむりやり実現する
タスク管理チャット：2ndChatを作っているあどにゃーです。
Webサイトで下図のようにGraphを表示しており、Touch/MouseでGraphを操作するようなパターンのTouch Event処理について記載したいと思います。
マウス・トラックパッド・スマホ（タッチスクリーン）の３パターン全てに対応するのはかなり奥が深く、かなり無理やりやってます。:persevere:
もっと良い方法がある場合はぜひお教えください。
#対応が必要なEvent一覧
graphのタッチ操作をさせる際に対応しないといけないデバイスと機能は下記になります。“`
#Mouse
・クリック： Graph objectの選択
・ドラック： Graph
Node.js Expressの例を通じて、WebアプリにおけるCookieについて理解する
## はじめに
Web アプリケーションが快適に利用できるのは Cookie のおかげとよく言われると思う。今回は、そんな Cookie が何をしてくれているものなのか？について理解しつつ、実際に Node.js の Express で Cookie の実装をやってみたのでその備忘録を残す。## Cookie とは何か？
簡単に一言で言ってしまうと、「クライアントの状態をテキストで保存する仕組み」の事。ここで言うクライアントというのは Web アプリなどを開くブラウザの事だと思ってよく、Cookie は Web アプリなどを利用しているユーザに関する状態を保存するためも仕組みと言い換えられるだろう。
具体的にどのような動きをするか？だが、以下の図に示したようにサーバを起点にしてクライアントにテキスト情報が送られ、これをクライアントはそのままサーバに送り返すという事をする。やっている事はこれだけ。
;
console.log(test);
“`結果は`null`です。
DOM構築はHTMLの記述順に行われます。
その間にscriptタグを見つけるとDOM構築を一旦停止し、設定されたJavaScriptファイルのダウンロードと実行を行います。
JavaScriptの実行後にDOM構築を再開します。
つまり上記のコードでは、index.jsを実行した時点で、まだ`id=“test”`のh1タグは構築されていないため取得ができず`null`になる、ということです。
また、DOM構築を停止するということは、利用者はその間コンテンツを見ることができません。
今回はこれを回避する
Discord.js(v13系)で指定チャンネルにメッセージ送信メモ
呼びかけてリプライさせるなどではなく、別のプログラムから
Webhook使う形でも良いのですが、毎回Webhook URLを発行するのも手間になってきたので、調べてみました。
## client.channels.cache.get().send()
こちらの記事にある記載で出来ました。
https://scrapbox.io/discordjs-japan/%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%9F%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB%E3%81%AB%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%82%92%E9%80%81%E4%BF%A1%E3%81%97%E3%81%9F%E3%81%84
`client.channels.cache.get(‘送信するチャンネルのID’).send(‘メッセージ’)`
なかなか長いメソッド
## 送信のサンプルコード
以前書いたメモのサンプルコードがそのまま使えました。
https:/
javaScript96_DOM操作
DOMの中に要素の子ノードを取得するには、
下記４つの方法があります。
1. getElementsByTagName()
-メソッド： 指定ノードの子ノードを返す
2. childNodes
-属性： 現在ノードの全ての子ノード
3. firstChild
-属性： 現在ノードの初めての子ノード
4. lastChild
-属性： 現在ノードの最後の子ノード1. getElementsByTagName()
2. childNodes
3. firstChild,lastC
Chrome によるパスワード自動入力を阻止する。
皆さん、ブラウザの **自動入力機能** は使ってますか？
インターネットを利用する（ユーザー）側としては便利な部分もあると思いますが、開発者側から考えると自動入力してほしくない場面も結構ある ?
なんとかして阻止できないだろうか ?…を考え追い求めたことを綴っていきたいと思います。# 1️⃣ 通常のパスワード欄の場合…
– ``
まずは、デフォルトのパスワード欄がどういう動きになるのか見ていきましょう。【参考画像】通常のパスワード欄
:::note alert
通常のパスワード欄（`
【JavaScript】filter()の使い方
# filter()の使い方
“filter()“は、コールバック関数で指定された条件を満たす要素だけを取り出して新しい配列を生成するメソッド。“filter()“の基本的な書き方は以下となる。“`javascript
// arrayは配列
array.filter((element, index, array) => {
// 処理内容
});
“`
上記のようにコールバック関数は以下の3つの引数を取る。ただし、“`index“`と“`array“`については省略可能。
■ **element** : 配列の要素の値
■ **index** : 配列のインデックス
■ **array** : 処理対象の配列
また、コールバック関数は既に削除済みや未代入の添字に対しては呼び出されず、値が代入されているもののみが呼び出される。“filter()“を使って配列の要素から偶数だけを取り出す簡単なサンプルが以下となる。
“`javascript
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const
【JavaScript】実行環境のネイティブDEFLATE実装を使えるCompressionStreamsAPI
こんにちは。
今回は、個人的に地味に待望していた機能が実装されたので、そのご紹介となります。
# ネイティブの圧縮伸張
– [Compression Streams API – MDN](https://developer.mozilla.org/en-US/docs/Web/API/Compression_Streams_API)昨今のHTTP通信は、帯域や読込時間を削減するために何らかの圧縮処理がほぼ必ず施されています。
そして、それらの圧縮処理は実行エンジン内部で自動的に行われているため、ふだん私たちがJavaScriptでHTTP通信するときは意識する必要もありません。
しいて言えば `Accept-Encoding` ヘッダでどのアルゴリズムが使用されているか、垣間を見ることができるくらいです。最近のJavaScriptは他の言語と遜色ないほど高速で汎用になり、バイナリ操作や計算をする機会も増えてきました。
私も「汎用ランタイム環境としてのChromium系」というかたちでウェブアプリを作成しています。その過程で、やはりデータを圧縮したり伸張したりしたい場面は
javaScript93_webページのロードと基本のDOM操作
ブラウザが一つのHTMLファイルをロードする時に、上から下の順序で読み込みます。JSコードをHeadなど頁の上部に書くと、下部の頁がまだロードされていない、DOMオブジェクトはないため、イベントは実行されません。
そのため、JSコードはタグbodyの下の部分で書いてください。どうしてもhead部分で書きたい場合は、window.onloadイベントを使用することができます。
DOM基本操作であるgetElementById(),getElementsByTagName(),getElementsByNameの使い方について紹介します。
getElementById()：
メソッドは、提供されたテスト関数を満たす配列内の最初の要素の値を返します。“`js
const foods = [1, 2, 3, 4, 5, 6,7,8,9,10];
const foodNumber = foods.find((food) => {
return food > 9;
});console.log(foodNumber);
//=> 10
“`
このように10が出力されます。
配列から条件に一致した最初の値を返します。少し複雑なfind文
“`js
const teams = [
{ name : ‘バルセロナ’ },
{ name : ‘レアル’, id : 1},
{ name : ‘パリ’ },
{ name : ‘マンU’, id : 10}
];const result = teams.find(function(team){
return team.name
【個人開発】全国の無料キャンプ場を検索し、欲しい情報を一目見て得られるようなサービス【CAMPHOOD】を作りました
## はじめに
みなさんキャンプはお好きですか？キャンプで焚き火を囲んでいるだけでも心が浄化されますよね。焚き火には「1/f ゆらぎ」と呼ばれる成分が含まれていて化学的にその癒し効果が証明されているそうです。焚き火をしながら「1/f ゆらぎ」の声を持つ宇多田ヒカルの曲を聴き、好きなビールでも飲めば大抵の嫌なことなんて忘れてしまいます。僕は焚き火をするのに無料キャンプ場をよく利用しています。コスパ最強の無料キャンプ場を多くの人に知ってもらいたいと思い、このサービスを作りました。## サービス概要
CAMPHOOD -無料キャンプ場をもっと身近に利用しよう-
URL: https://www.camphood.net
キャンプに行く前はとにかく情報収集が大事です。僕はいつも下記のようなことをざっと調べていましたが、ま
javaScript91_DOMとイベント
DOMはDocument Object Modelの略称です。
JSはDOMを通してHTMLファイルを操作します。DOMを理解すればWebページを自由に操作することができます。
Document： 一つのHTMLファイル
Object： HTMLファイルの全ての箇所をObjectに変換したという意味です。
Model： モデルでオブジェクト間の関係性を表す。ノードが分かればobjectを取得することができる。
Node(ノード）：webページを構成する最も基本的な部分。HTMLタグ、属性、テキストなどは全てノードと言えます。
ノードは下記の４種類に分類されます。
1 documentノード：HTMLファイル
2 要素ノード：HTMLタグ
3 属性ノード：要素の属性（例：id)
4 テキストノード：HTMLタグ内のテキスト
