- 1. グーグルマップの競合店を目立たせたくない！ Webデザイナーの為のHERE Mapガイド
- 2. アマゾンの激安品を随時お知らせするウェブアプリ作った【個人開発】
- 3. Pleasanter Tips: データの編集権限を付与する
- 4. [JavaScript] 複数の非同期処理の完了後に何かしたい場合
- 5. Cheerp 3.0： Web用の最も先進的な C++ コンパイラ、 ライセンス提供開始
- 6. ムジュラの仮面のようなお面をつくりたい【前編】
- 7. p5.js でステキな表現がいろいろできそうな p5.brush のメモ
- 8. Cookie の HttpOnly 属性について勘違いしていたこと
- 9. Tanstack Query の useQuery を自作してみた
- 10. Node.js, Express, Socket.io 使った簡易チャットの作成
- 11. いろんな言語比較してみた
- 12. 【Express】passport-localが動かない
- 13. JavaScriptでNextCloudからファイルをダウンロードする方法
- 14. JavaScriptでtar.bz2で圧縮されたファイルを展開する
- 15. ゴミ捨てをする人を決めましょう。
- 16. 【JS】配列aと配列bに重複した要素があるか確認する
- 17. JavaScriptでコインを100枚投げたときに表が出る枚数をグラフで表示
- 18. JavaScriptにおける2種類のインポートとエクスポート
- 19. あなたの作った画像アップローダー、投稿者の個人情報ダダ洩れだよ！
- 20. 【JavaScript】文字列のバイト数を取得する方法
グーグルマップの競合店を目立たせたくない！ Webデザイナーの為のHERE Mapガイド
## 地図表示で、こんな悩みありませんか？
Webページで、店舗までのアクセスや地図を表示するためにグーグルマップを使うと、、、・思わぬ競合店と一緒に表示されてしまう。
・情報が多すぎて、分かりにくい
・ユーザーレビューや広告がビジネスに悪影響を与えてしまう。そんな悩みを抱えるあなた、安心してください！
新しい地図サービスHERE Mapが、これらの問題を解決してくれるんです。詳しくみていきましょう。## こんな方におすすめ
・ホームページに地図を埋め込みたい人
・グーグルマップを使うと競合店が表示されて困っている人
・グーグルマップ以外のマップを使いたい人
・Webデザイナー（自社サイト、クライアントサイトを担当）
・マーケティング担当者## グーグルマップとHERE Mapを比較表示してみた
結論から先に。
この記事を読むと下記のように、紹介したお店をHERE Mapに表示してWebページに埋め込めるようになります。(例)たまプラーザのラーメン屋(赤坂一点張)を地図に表示
」は、お得・激安・特価情報を効率的に発信することを目的としています。本アプリでは、最新の開発技術とテックスタックが活用されています。Next.js、MongoDB、WebSocket、Nginx、Dockerなどの技術を駆使し、使いやすく迅速な情報提供を可能にしています。
# 項目
サンプルでは下記の項目を追加しました。
|項目|タイトル|設定|
|—–|—–|—–|
|分類B|ユーザーアクセス|[[Users]]複数選択可能|
|分類C|グループアクセス|[[Groups]]複数選択可能|# コード
[JavaScript] 複数の非同期処理の完了後に何かしたい場合
## どちらが先に終わるかわからない。
同時に始めた非同期通信はどちらかが先に終わるかわからない。
たとえば同じ関数内で非同期通信を同時に始めて、両方のレスポンスが終わったら何かしたい、というケースはよくあると思う。その場合、自分は下記のように、responseがOKでなかったらreturnする処理をそれぞれの通信に書いていた。
“`js
if (!response.ok) {
console.error(“エラー:”, response);
return;
}
// これを非同期通信の数だけ書く
“`しかし、もっともパフォーマンスがよいのは、**Promise.all** かもしれない。
## Promise.all
“`js
async function waitMultiple() {
const promises = [
wait(3), // 非同期A
wait(5) // 非同期B
];
const messages = await Promise.all(promises);
Cheerp 3.0： Web用の最も先進的な C++ コンパイラ、 ライセンス提供開始
本日 (March 14, 2023)、Web用C++コンパイラの最新メジャーリリースであるCheerp 3.0を発表できることを大変誇りに思います。Cheerpの前リリース[Cheerp 2.7](https://leaningtech.com/cheerp-2-7-compile-c-to-webassembly-plus-javascript/)から1年以上が経過し、この新しいバージョンは、Webアプリケーションやゲームのためのプログラミング言語としてC++を使用することの最先端をもう一度動かすような新機能や最適化機能が満載です。
最も重要なことは、今回のリリースで、Cheerpのライセンスモデルに大きな変更を加えるということです。Cheerp 3.0から、すべてのコンパイラのコアコン
ムジュラの仮面のようなお面をつくりたい【前編】
# ムジュラの仮面23周年おめでとう
2000年にNINTENDO64のゲームソフトとして発売された「ゼルダの伝説 ムジュラの仮面」。当時小学生だった私は、月が落ちてくるのが怖すぎて、クロックタウンからストーリーを進められませんでした…。それからNintendo Switchで遊べるようになり、大人になっても怖い感情はそのままに全ての仮面とお面を揃えるまで夢中になってプレイしました。
任天堂公式HPより# オリジナルお面をつくりたい！
ということで私が考えたお面はその名も、
**「まっくらのお面」**
お面をかぶったら辺りが真っ暗になります。工程は以下の通り。
1. お面をかぶる
1. それを検知し通知する
1. 電気を消す
1. 仮面が光るこの記事は前編で、工程1と2を実施します。
# アイテム
– ど
p5.js でステキな表現がいろいろできそうな p5.brush のメモ
既に、p5.js を使っている色々な方が試されてますが、タイトルに書いている [p5.js用のライブラリ「p5.brush」](https://p5-brush.cargo.site/)に関する情報をメモしようと思います。
## p5.brush とは？
p5.brush は、Alejandro さんが作られたライブラリで、以下のようなステキな見た目の描画が実現できるライブラリです。### 公式ページトップの画像
### 作者の方のポスト
🥁🥁 Presenting… 🥁🥁
p5.brush
Unlock custom brushes, natural fill effects and intuitive hatching in @p5xjs!With p5.brush.js, I’m open sourcing part of my toolbox, which I’ve developed and used since the start of my coding practice.https://t.co/FWPvxUttOv
Read below 🧵👇 pic.twitter.com/XCmATxdxDQ
— Alejandro (@acamposuribe) November 15, 2023
[Cookie](https://developer.mozilla.org/ja/docs/Web/HTTP/Cookies) に HttpOnly という属性があります。
この HttpOnly を設定することで JavaScript からの直接の参照・操作を禁止することによって、XSS などの手法によって悪意のある第三者から Cookie の内容を見られるのを防止することができます。ここまでは多くの記事に書いてあるのですが、私は一点ずっと勘違いしていました。
### いや、直接値を読み取れないってだけで、API呼び出しとかの時に使えないってわけじゃないんかーーーーーーーーーーい！！！
いや、まあそれすらできなかったら何のための Cookie なんですかという話なのでそりゃそうなんですが…
ということで見ていきます。
# 実装例(Nuxt3)と出力
“`typescript:serverside_Login
…const tokenStr : string
Tanstack Query の useQuery を自作してみた
## ３行でまとめると
１：tanstack よく分からなかったから、自作してみたよ
２：querykey・retry など基本機能は作ったけど、staleTime・invalidate などは作っていないよ
３：tanstack のデータ構造は意外と簡単。## 成果物
https://github.com/YmBIgo/my-tanstack-query/tree/main
趣味の開発で tanstack の存在を知ったが、よく正体が分からなかったので、簡単な模倣物を自作してみました。
動くものは作れたのですが、細かい部分で現物と違っている可能性もあるので、間違っていたら指摘くださると嬉しいです。参考にしたコードは
https://github.com/TanStack/query/tree/main/packages/query-core
## 使い方
https://github.com/YmBIgo/my-tanstack-query/tree/main のソースコードの `src/my-tanstack` 配下を持ってきて、以下のように使います（なんか v4
Node.js, Express, Socket.io 使った簡易チャットの作成
Node.js, Express, Socket.io（双方向通信） 使って簡易チャットを作ってみる
前に作った WebSocket のやつでフロント、バック分かれるのやだなと思い Express 使ってます
あと Socket.io も使ってみたかったのでお試しでやってみました前に作ったやつはこちら．．．
https://qiita.com/sueasen/items/c839f2c3d864874876c3
見た目は某〇INE風、実行した環境とかは以下です
– Windwos11
– Node.js v18.17.1
– WebSocket v8.14.2 (ws@8.14.2)
– http (http@0.0.1-security)
– http-server (http-server@14.1.1)# プロジェクトフォルダ作成・移動
“`powershell
mkdir chat
cd chat
“`# node 初期化
“`powershell
npm init -y
“`# express, socket.io インストール
“`power
いろんな言語比較してみた
# 軽く比較🍻
書いた見た目を比較するだけ。
実装内容は
– **文字列**の`配列(系のやつ)`の初期化、追加、末尾削除
– のディープコピー
– をフィルタするだけ
– をフィルタしつつ出力を関数にして呼び出すものとします。まぁ準備運動ですね。👯♂️
言語は以下です。
筆者が扱える言語が少ないのでこれだけですが、おいおい増やしたいと思います。– JavaScript
– Python
– Go
– Java
– Rust
– C++
– SQL
– zsh
– vimscript# JavaScript
これがいちばんすき😎😎
“`js
/**
* test
*/
(() => {
// 配列
list = [“test”, “test”]
list.push(“add”)
list.pop(0)
// 配列を移す
_ = […list] // これは非破壊だがシャローコピー
_ = JSON.parse(JSON.stringify(list)) // これはディープコピー
_ = stru
【Express】passport-localが動かない
# 環境
* Dockerコンテナ内で作業
* Node.js 18.15.0
* express 4.18.2
* passport 0.6.0
* passport-local 1.0.0(たぶん)
* express-session 1.17.3
* ビューエンジンにはpugを使用# やりたかったこと
* ログインに関する処理は`routes/login.js`に書き、
`app.js`に書く内容は最低限にしたい。* `/login`にGETでアクセスするとログインページが表示され、
そこにあるフォームにユーザー名とパスワードを入力すると、
`/login/auth`(authって何？)にPOSTリクエストが送られる* `/login/auth`にPOSTでアクセスすると、passportによってログインができる
…のですが、色々なサイトの見様見真似でコードを書いていたら、
ログインページではログインができているのに、**それ以外のページだとログインできていない**現象が発生しました。# やらかしたときのコード
もともとは以下のようなコードになって
JavaScriptでNextCloudからファイルをダウンロードする方法
“`typescript
import fetch from ‘node-fetch’;
import * as fs from ‘fs’;const nextCloudUrl = ‘http://localhost:8081’;
const username = ‘username’;
const password = ‘******’;
const filePath = ‘/Readme.md’;const download = async () => {
const url = `${nextCloudUrl}/remote.php/dav/files/${username}${filePath}`;
const response = await fetch(url, {
headers: {
‘Authorization’: ‘Basic ‘ + Buffer.from(username + ‘:’ + password).toString(‘base64’)
}
});if (!response.ok) {
t
JavaScriptでtar.bz2で圧縮されたファイルを展開する
“`typescript
import fs from ‘fs’;
import tar from ‘tar’;
import bz2 from ‘unbzip2-stream’;function extractTarBz2(filePath: string, outputPath: string) {
const inputStream = fs.createReadStream(filePath);
const bz2Stream = bz2();inputStream.pipe(bz2Stream).pipe(tar.x({C: outputPath}));
bz2Stream.on(‘error’, function() {
console.log(‘Error extracting tar.bzip2 file’);
});tar.x({C: outputPath}).on(‘end’, function() {
console.log(‘Extraction complete!’);
});
}extrac
ゴミ捨てをする人を決めましょう。
## 1. 家事を１人でやらなきゃいけない専業主婦の年収は本来1400万円と言われていますが
家事といえばどんなことがあるのでしょうか。
これだけでも大変そうですね。
テクノロジーの進歩とともに家事に関する商品はかなり進化しているようにも思います。
洗濯機やエアコンなどは遠隔操作ができるようになりました。
ルンバは自動で部屋をスキャニングして掃除をしてくれます。**しかし**
風呂掃除、トイレ掃除、ごみ捨てなど、ボタン１つでは解決できないようなことも多くあります。
そんな中で今回はゴミ捨てというところにフォーカスしました。## 2. ゴミ袋はどれくらい溜まったら出しますか
毎週回収される曜日が決まっていて、その日にとりあえず袋を縛って出すというなら、それは大正解だと思います。
しかし２４時間出し放題のところも増えてき
【JS】配列aと配列bに重複した要素があるか確認する
## コード
“`js
const isDuplicate = (a, b) =>
a.some((item) => b.includes(item)) || b.some((item) => a.includes(item));
“`## 注意点
要素が配列やオブジェクトの場合は考慮していない。
JavaScriptでコインを100枚投げたときに表が出る枚数をグラフで表示
# 概要
**コインを100枚投げたときに表が出る枚数**は、どのくらいだと思いますか？
数式を使えば、簡単に計算できますが、せっかくコンピュータがあるので（？）ブラウザ上で疑似的にコインを投げて実験します。また、その**結果を`chart.js`を用いて棒グラフを表示**したいと思います。# 使用技術
– HTML
– JavaScript
– chart.js 2.9.4# プログラム
今回紹介する範囲としては、メインのJavascriptの処理部分を説明します。HTML部分は、説明がややこしくなるため割愛します。ご了承ください。
## ベルヌーイ試行の関数
**ベルヌーイ試行**とは、「成功」または「失敗」のように２種類のみの結果しか得られない実験のことです。今回は、コインが表になった場合に成功とみなして処理する関数を作成しました。
“`js
/**
* ベルヌーイ思考
* @param {number} p 確率 (0.0 ~ 1.0)
* @return {boolean} true:成功, false:失敗
*/
const bernoul
JavaScriptにおける2種類のインポートとエクスポート
# JavaScriptにおける2種類のインポートとエクスポート
JavaScriptのモジュールシステムは、コードを整理し、再利用性を高めるために重要です。モジュールシステムの中心的な概念は「エクスポート」と「インポート」です。これにより、異なるJavaScriptファイル間で関数、クラス、オブジェクトなどを共有することができます。ここでは、JavaScriptにおける2種類のエクスポートとインポート方法について説明します。
## エクスポートとインポートとは
JavaScriptでは、モジュールからコードを「エクスポート」して、別のモジュールでそのコードを「インポート」することができます。これにより、コードの再利用性が高まり、保守性や可読性が向上します。
### デフォルトエクスポート
#### 受け渡しファイル（エクスポート）
– **使用方法**: `export default <クラス名や変数名>;`
– **説明**: デフォルトエクスポートは、モジュールから単一の値をエクスポートする方法です。エクスポートする値が1つだけの場合に適しています。デフォルトエクスポ
あなたの作った画像アップローダー、投稿者の個人情報ダダ洩れだよ！
# 自前のアップローダーで起きる問題
## 開発者 ――
インフルエンサーとファンをつなぐコミュニティサイト「Qitter」を作ったぞ！
テキストと画像をPOSTするだけのシステムだから、全部自前の実装で作っちゃったぞ。
## 投稿者 ――
今日もQitterに投稿しなくちゃ！
「晩ご飯なう！」
## 閲覧者 ――
「推しちゃんの投稿ｷﾀｰ!」
「推しちゃんの投稿した画像は全部保存しちゃうぞ！」 {
return new Blob([str]).size
}
“`https://developer.mozilla.org/ja/docs/Web/API/Blob
https://developer.mozilla.org/ja/docs/Web/API/Blob/size
