- 1. React + TypeScript: 要素で選択した画像ファイルのイメージをページに表示する
- 2. JSで0埋めをsliceを使わずに実装する
- 3. Web Animations APIのcompositeが凄過ぎてすごいからみんな見てくれ
- 4. 【JavaScript】for of文の使い方（foreachの代わり）
- 5. Heroku scheduler addonの画面でUTCではなく日本時間を表示する
- 6. 絶対はずさないお店を検索できるwebアプリケーションをリリースするまで③
- 7. ワイ「なに！？普通のJavaScriptなのに型が書けるやと！？」
- 8. 【高専ベンチャー社×ゆめみ社 2022ハッカソン春】ReactとFirebaseでお絵描き×チャットアプリを作る
- 9. Reactでindex.js:1 Warning: Received true for a non-boolean attribute outline.が出た時の対処法
- 10. ReactでQRコードリーダーを実装する
- 11. JupyterLab(JavaScriptノートブック)にて「Kernel Restarting」が頻発する際の対処法
- 12. Monaca × NCMBでマンガビューワーアプリを作る（その3：マンガビューワーの実装）
- 13. Monaca × NCMBでマンガビューワーアプリを作る（その2：データの用意と一覧画面の作成）
- 14. Monaca × NCMBでマンガビューワーアプリを作る（その1：アプリの仕様とNCMB SDKの初期化）
- 15. [Tauri]アーキテクチャまとめ
- 16. ゴールデンウィークに旬のゴールドキウイで画面もゴールドにする
- 17. Symbolの新SDKからSSS(Safely Sign Symbol) Extensionを利用してみる
- 18. 【１１日目】p5.js動き回る図形をつぶすゲームを作成[Monaca]
- 19. jQuery 遅延実行 setTimeout
- 20. M5ユニットをESP32用Javascript実行環境で動かすサンプルコード
React + TypeScript: 要素で選択した画像ファイルのイメージをページに表示する
[``](https://developer.mozilla.org/docs/Web/HTML/Element/input/file)要素を使うと、ローカルのファイルが選べます。そして、取得した情報にもとづいて、ファイルが操作できるのです。本稿では選択するのは画像ファイルとし、そのイメージをページに差し込んでみます(サンプル001)。
#### サンプル001■React + TypeScript: Displaying image selected with \
https://codesandbox.io/s/react-typescript-displaying-image-selected-with-input-type-file-v1j229この記事は全3回のチュートリアルシリーズの第1回です。3回とおしてつぎのサンプル002ような画像ファイル操作のインタフェース例をつくります。``要素を共通に扱うものの、それぞれテーマは別です。興味に応じて、解説を個
JSで0埋めをsliceを使わずに実装する
JSで毎度sliceを使って0埋めを描くのも手間になるので、何かいい方法がないか探ってみた。
「JS 0埋め」でググると大抵出てくるの以下の例で考える
1桁や2桁の数字が出てくるとその前に０を入れて必ず3桁にしたいのような例を考える。“`js
const num = 1;
const result = (“000” + String(num)).slice(-3);console.log(result);
// 出力結果 001
“`es20117までであればこの書き方で良いのだが、es2017でpadStartというものが追加されている。
説明文はmdnのままであるが以下のようになっている。
padStart() メソッドは、結果の文字列が指定した長さになるように、現在の文字列を他の文字列で (必要に応じて繰り返して) 延長します。延長は、現在の文字列の先頭から適用されます。https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
Web Animations APIのcompositeが凄過ぎてすごいからみんな見てくれ
この記事はようやくSafariでもフルサポートされそうな`Web Animations API`の`composite`（効果の組成）って機能がすごいよ！！って、ただそれだけを伝えたい記事です。平たくいうと複数のアニメーションを簡単キレイに合成できる機能なのですが、通常のWebのコーディングでもよく出てくる辛さを解決してくれる結構すごいヤツなのです。
▼ こういうアニメーション作るのもだいぶん楽になります
Web Animations APIで星空パーティクル
単にCSSのアニメーションをJSで描けるよってだけではあるんだけど、ライブラリなしでそこそこ簡単にインタラクティブなもの作れるって意味ではうれしい。主要ブラウザ全部で使える。https://t.co/8H8zXfc5NL pic.twitter.com/bf
【JavaScript】for of文の使い方（foreachの代わり）
# for of文の使い方メモ
for of文を使って配列、オブジェクトを処理する方法をメモ## 配列の処理
“`JavaScript
let array = [
‘value1’,
‘value2’,
‘value3’,
‘value4’
];for (let value of array) {
console.log(value);
}
“`
**結果：**
value1
value2
value3
value4## オブジェクトの処理
for in文は予想通りの動きをしない可能性がある為、for of文を使用する。### キーの取り出し
`Object.keys(object)`を使用することでオブジェクトのキーを値にした配列に変換する。
“`JavaScript
let object = {
key1: ‘value1’,
key2: ‘value2’,
key3: ‘value3’,
key4: ‘value4’
};for (let key of Object.keys(obj
Heroku scheduler addonの画面でUTCではなく日本時間を表示する
# やること
Heroku Schedulerの時間がUTC時間表記なのでわかりにくい
これを、日本時間を併記するスクリプトを作る
# コード
自分用なので適当に書いた。
うまくいったからそれでいい的なコードですいません。– JavaScriptは日付時刻のフォーマットが面倒だ。0:0になるけど気にしない。
– 日付の判定は`Date()`に任せた。うまくいったときだけ日本時間表示する。
– UTC -> JST変換もDateが正しく返す前
絶対はずさないお店を検索できるwebアプリケーションをリリースするまで③
javascript 文字列を数値に変換するメソッド
~~~
parseFloat メソッド名
javascript 文字列を数値に変換するメソッドになる。
~~~~~~
グーグルマップ表示
let timer = setInterval(() => {
if (window.mapLoaded) {
clearInterval(timer);
console.log(parseFloat(this.cooks[0].lat))
const map = new window.google.maps.Map(this.$refs.map, {
center: { lat: parseFloat( this.cooks[0].lat),
lng: parseFloat(this.cooks[0].lng) },
~~~~~~
parseFloatの使い方（緯度経度）
center: { lat: parseFloat( this.cooks[0]
ワイ「なに！？普通のJavaScriptなのに型が書けるやと！？」
# リモートワーク中ワイ
ワイ「あー、もう10時10分やないか」
ワイ「10分もぶっ続けで仕事してもうたわ」
ワイ「そろそろ10分休憩しよか」
ワイ「むしろ、今日はもう上がってまうのもアリやな」
ワイ「今日はもう**十分働いた**、いうてな」
ワイ「ガーファファファ！！！」# Twitterでも見てみる
ワイ「ほなTwitterでも見てみよか」
ワイ「お、今日もエンジニアさんたちが技術ツイートをしてて、勉強になるなぁ」
ワイ「ふむふむ・・・なに！？」
ワイ「普通のJavaScriptで、**型が書けるようになる**やと！？」
ワイ「TypeScriptなしでか！？」娘（**6歳**）「いや、まだ[**そういう提案がされてる**](https://github.com/tc39/proposal-type-annotations)だけだよ」
ワイ「おお、そうなんか娘ちゃん」
# これが実現されたら
ワイ「でも、もしこれが実現されたら・・・」
> 「コンパイラ要らずで型の恩恵を受けられて、ハッピー！」
ワイ「↑こういうことやな？」
ワイ「もしかしたら、TypeScript
【高専ベンチャー社×ゆめみ社 2022ハッカソン春】ReactとFirebaseでお絵描き×チャットアプリを作る
# はじめに
こんにちは、高専ベンチャー社×ゆめみ社 ハッカソン チームDのnaotikiです。
この度ハッカソンに初参加してアプリを作って優勝したので主に私が実装した部分の
技術的な事を書いていきたいと思います。↓ @tos-up先輩のこちらの記事も是非読んでください！ ↓
https://qiita.com/tos-up/items/0b783c87dadb905b01c1
間違いがあったら優しく指摘してください
# なにつくろう・・・
テーマは「WITHコロナ時代のコミュニケーションを活性化せよ」
とあるチームの会話(一部省略)
Aさん「何作ろう」
Bさん「みんなで同じ課題に取り組むのがいいですよね！」
Aさん「お絵描きっていいですよね！」
Cさん「作ろう！」こうしてお絵描きチャットアプリが作られることになりました。
# 開発開始！
こうして開発が始まりました
フロントエンドのフレームワークはチームメンバーが触ったことあったり、興味があったりしたReactに決定しました。
~~本当はKotlin/JSでもよかったKotlin最高(しかしwrapper書くのめんどく
Reactでindex.js:1 Warning: Received true for a non-boolean attribute outline.が出た時の対処法
## エラー内容
“`bash
index.js:1 Warning: Received `true` for a non-boolean attribute `outline`.If you want to write it to the DOM, pass a string instead: outline=”true” or outline={value.toString()}.
at button
at http://localhost:3000/static/js/vendors~main.chunk.js:22611:3
at div
at ModalArea (http://localhost:3000/static/js/main.chunk.js:1951:5)
at Portfolios
at Route (http://localhost:3000/static/js/vendors~main.chunk.js:61799:29)
at Switch (http://localhost:3000/st
ReactでQRコードリーダーを実装する
ブロックチェーンSymbolのウォレットの開発をしています。Webウォレットの開発ということで、React向けのQRコードリーダーの実装を進めていたのですが、意外と時間がかかったので、メモも兼ねてやり方を掲載します。
# パッケージ
“`
react@18.0.0
@mui/material@5.6.4
@zxing/browser@0.0.7
@zxing/library@0.19.1
“`# QRライブラリの選定について
当初Webで検索し一番に試したライブラリは以下ですが、こちらは私の技術スキルでは内部エラーを解消できず、断念しました。https://www.npmjs.com/package/react-qr-reader
代わりに今回 zxing というライブラリを利用しています。
https://github.co
JupyterLab(JavaScriptノートブック)にて「Kernel Restarting」が頻発する際の対処法
### 注意
本記事はJuyterLabにてJavaScriptのノートブックを動作させたときのものです
Pythonのノートブックでのことではありませんのでご注意ください# 動機
JuyterLabにてJavaScriptのノートブックを動作させた際、カーネルを再起動させると「Kernel Restarting」が頻発し、煩かったため# 環境
・OS : Windows11 pro
・JupyterLab : Version 3.3.4# 対処法
JupyterLab起動時のオプションに
KernelManager.autorestart False
を加える例
jupyter lab –KernelManager.autorestart Falseこのオプションを見つけたのはJupyterNotebookのページでしたが、JupyterLabの方でも機能するようでした
# 参考
https://jupyter-notebook.readthedocs.io/en/stable/config.html
Monaca × NCMBでマンガビューワーアプリを作る（その3：マンガビューワーの実装）
NCMBにはいくつかの機能がありますが、データベースのように使えるデータストアや写真などを保存しておくファイルストアはよく使われる機能になります。
今回はそのデータストアとファイルストアを組み合わせて、マンガビューワーアプリアプリを作ります。[前回はデータの準備と一覧画面の作成を行いました](https://qiita.com/goofmint/items/12fa244f01a0789a8f00)ので、今回はマンガビューワーの実装を解説します。
## 完成版のコード
作成したデモアプリのコードは[NCMBMania/Monaca_Comic: MonacaとNCMBを使ったマンガアプリのサンプルです](https://github.com/NCMBMania/Monaca_Comic)にアップロードしてあります。実装時の参考にしてください。
## ビューワー画面の実装
`www/pages/view.html` を作成します。HTMLを含めた基本形は次の通りです。
“`html
Monaca × NCMBでマンガビューワーアプリを作る（その2：データの用意と一覧画面の作成）
NCMBにはいくつかの機能がありますが、データベースのように使えるデータストアや写真などを保存しておくファイルストアはよく使われる機能になります。
今回はそのデータストアとファイルストアを組み合わせて、マンガビューワーアプリアプリを作ります。[前回はアプリの概要とNCMBの初期化を行いました](https://qiita.com/goofmint/items/d6abf5beb6b9dd1b6aea)ので、今回はデータの準備と一覧画面の作成を行います。
## 完成版のコード
作成したデモアプリのコードは[NCMBMania/Monaca_Comic: MonacaとNCMBを使ったマンガアプリのサンプルです](https://github.com/NCMBMania/Monaca_Comic)にアップロードしてあります。実装時の参考にしてください。
## データの用意
### マンガデータ
今回はCCなどで公開されている以下のマンガデータを利用しました。ありがとうございます。
– [ブラックジャックによろしく](https://densho810.com/free/)
–Monaca × NCMBでマンガビューワーアプリを作る（その1：アプリの仕様とNCMB SDKの初期化）
NCMBにはいくつかの機能がありますが、データベースのように使えるデータストアや写真などを保存しておくファイルストアはよく使われる機能になります。
今回はそのデータストアとファイルストアを組み合わせて、マンガビューワーアプリアプリを作ります。まず初回となる今回は、アプリの概要とNCMBの初期化を行います。
## 完成版のコード
作成したデモアプリのコードは[NCMBMania/Monaca_Comic: MonacaとNCMBを使ったマンガアプリのサンプルです](https://github.com/NCMBMania/Monaca_Comic)にアップロードしてあります。実装時の参考にしてください。
## ベースについて
今回はMonacaを利用し、UIフレームワークとしてFramework7を用いています。その際のベースとして[NCMBMania/MonacaFramework7Base: Monaca × Framework7 × NCMBのベースアプリです。](https://github.com/NCMBMania/MonacaFramework7Base)を利用し
[Tauri]アーキテクチャまとめ
# Tauriのアーキテクチャまとめ
Electronのようにフロントエンド技術を用いてデスクトップアプリケーションを作成できる[Tauri](https://tauri.studio/)ですが、2022年4月にStable版をリリース予定です。
と思ってこの記事を作っておいてリリースされたら投稿しようと思っていたのですが、記事投稿の2020/5/8時点でrc10で待ってられないので、リリース前の確認ということで、公式サイトの[Docs](https://tauri.studio/docs/getting-started/prerequisites)にあるアーキテクチャをまとめて確認しまておきしょう。## Tauriアーキテクチャ
ここでいう「アーキテクチャ」とは、Tauri自身のTauri CoreやWryなどといったTauriの構成を指すものではなく、Tauriを用いたデスクトップアプリケーションを作成する手法のことを言います。
PatternsとRecipesからなり、PatternsはTauriのRustサイド（Tauri Core）とJavaScriptフロントエンドとのゴールデンウィークに旬のゴールドキウイで画面もゴールドにする
## ゴールドキウイが旬で美味しい
５月の**ゴールデンウィーク**の時期は、ニュージーランド産の**ゴールドキウイが非常に美味しい**時期となります。
私は小売業に従事しており、特に配属は農産、野菜・果実を販売する部門だったこともあり、毎年この時期にはキウイフルーツやマンゴーなど輸入果実を売り込むイメージが強いです。
数日前**GWアドベントカレンダー**なるものの存在を知り、せっかくなので**ゴールドを絡めて何か作れないか**と考えました。
https://gw-advent.9wick.com/calendars/2022/122
> 投稿したアドベントカレンダーはこちら
## 画面もゴールドにして３倍豪華
**ゴールデンウィーク**に**ゴールドキウイ**ということで、さらに**画面もゴールド*
Symbolの新SDKからSSS(Safely Sign Symbol) Extensionを利用してみる
SSSは現在old-sdk対応ですが、新sdkでも使用することができます。
今回は新sdkからSSSを利用する方法について説明します。###### symbol-sdk(v3)の埋め込み
ブラウザコンソールを使用して表示中ページにsymbol-sdk-v3を埋め込みます。
“`js
(script = document.createElement(‘script’)).src = ‘https://xembook.github.io/symbol-browserify/symbol-sdk-3.0.0.js’;
document.getElementsByTagName(‘head’)[0].appendChild(script);
“`###### 環境定義
トランザクション送信に必要な環境の定義、情報を取得します。“`js
node = window.origin;sdk = require(“/node_modules/symbol-sdk”);
Buffer = require(“/node_modules/buffer”).Buffer;re
【１１日目】p5.js動き回る図形をつぶすゲームを作成[Monaca]
今回はp5.jsを使用して簡単なゲームを作ります。開発環境にはMonacaを使用します。
簡単なゲームの概要としては、画面をランダムに動く〇(丸)をマウス(またはタッチパネル)でクリックしてポイントを稼いでいくゲームです。加点の〇と減点の〇もそれぞれ作ります。
完成したプログラムはページの最後に張り付けておきます。
まずはプログラムの説明から入ります。
### 図形の作成
図形は今回ellipseを使用し、その丸の複製でクラスを使用します。今回は5つに増やしていきます。また、図形はポイントアップ用とポイントダウン用の2種類を作成します。
“`javascript
let c1 = []; //配列に
let c2 = [];class Circle {
constructor(x, y, mx, my, s) {
this.x1 = x;
this.y1 = y;
this.mx1 = mx;
this.my1 = my;
this.x2 = x;
this.y2 =jQuery 遅延実行 setTimeout
# はじめに
「この処理を少し遅らせて実行させたい。。。」という時に使う“`setTimeout“`の使い方を毎回忘れてその都度ググっているので、短い記事ですが、メモとして記述します。## setTimeout
“`javascript
“`“`function(){}“`の“`{}“`内に遅延実行させたい処理を記述する。
(setTimeout内に複数の処理を書くことも可能。)“` },7000); “` ここの数字の部分が、何ミリ秒後に実行するかの数値。
(1000ミリ秒＝1秒)## まとめ
イベント内で処理の順番がうまくいかない時等、これを使って無理矢理解決しています。笑
短い記事ですが、どなたかの参考になれば幸いです。M5ユニットをESP32用Javascript実行環境で動かすサンプルコード
手元にあるM5ユニットをESP32用のJavascript実行環境で動かしましたので、備忘録として残しておきます。
以下のESP32用のJavascript実行環境のファームウェアを使います。
「電子書籍：M5StackとJavascriptではじめるIoTデバイス制御」
https://poruruba.booth.pm/items/3735175
# サンプルコード
(i) 超音波測距ユニットI/O
https://www.switch-science.com/catalog/7632/
“`js:main.js
import * as sonicio from “UnitSonicIo”;sonicio.begin(32, 33);
function loop(){
var distance = sonicio.getDistance();
console.log(distance.toFixed(2) + ‘mm’);
delay(1000);
}
“`(ii) 振動モータユニット
https://www.switch-science.com
の天気
![]()
--℃ / --℃
![]()
--℃ / --℃
![]()
--℃ / --℃
OTHERカテゴリの最新記事
- 2023.09.28
オープンソース調べOSS 2023年09月28日
- 2023.09.28
iOS関連のことを調べてみた2023年09月28日
- 2023.09.28
Python関連のことを調べてみた2023年09月28日
- 2023.09.28
Ruby関連のことを調べてみた2023年09月28日
- 2023.09.28
Rails関連のことを調べてみた2023年09月28日
- 2023.09.28
Python3関連のことを調べてみた2023年09月28日
