- 1. NCMBのデータエクスポートに使えるGoogle Chrome機能拡張（ファイルストアの全ファイルダウンロード）
- 2. Best Azure Data Factory Training In Chennai | Azure Data Factory Course | 100% Placement
- 3. プリザンターのスクリプト開発を少しでも楽にする方法
- 4. 俺からReact, Vueを学んでみないか？リアルな電卓を作ってみよう！
- 5. GTMの変数、DOM要素でclass指定すると最初の要素しか処理してくれない
- 6. NS高キャンパスの図書管理システム開発！
- 7. 「サーバーのタイムゾーンを変えて、クライアントのタイムゾーンはそのまま」を開発環境で再現したい
- 8. Cannon.js の世界へようこそ！ ３歩でわかる お手軽 物理シミュレーション
- 9. BabylonJS Playground上の物理演算で樋に球を転がす
- 10. Popover APIが便利そう
- 11. React入門６: 手番の実装
- 12. React Hooksまとめ
- 13. event.preventDefault();について
- 14. 【JointJS】カスタム要素を作成して再利用可能なパーツを作成する
- 15. How To Enable Javascript for Android
- 16. dialog要素をEscキーでcloseした際にoverflow:hiddenを解除したい
- 17. Javascriptにおける変数の巻上げ(hoisting)について
- 18. let, var, constの使い分け【JavaScript】
- 19. 特定文字のバックスラッシュエスケープinJS
- 20. ExpoとAndroid Studioを使ってスマホアプリを立ち上げる
NCMBのデータエクスポートに使えるGoogle Chrome機能拡張（ファイルストアの全ファイルダウンロード）
[NCMBは2024年3月31日をもって終了します](https://mbaas.nifcloud.com/info/2023/11/post-171.html)。
NCMBを利用されている方々は、まずアプリのデータを適切に保全し、移行先を検討する必要があります。[NCMBにはエクスポート機能はある](https://mbaas.nifcloud.com/doc/current/dashboard/export.html)のですが、ダウンロード実行まで時間がかかったり、ファイルストアには対応していないという問題があります。
そこで、本来は管理画面を便利に使ってもらうために作っていたChrome機能拡張に、データ移行に関する機能を追加しました。以下はファイルストアの全ファイルダウンロード機能の紹介です（v1.5より）。
## 動作について
動作は以下のようになります。機能拡張をインストールしていると、ファイルストアの画面で一括ダウンロードボタンが表示されます。このボタンを押すと、ファイルストアにある全ファイルがダウンロードされ、一緒にファイルストアのJSONデータ `files.
Best Azure Data Factory Training In Chennai | Azure Data Factory Course | 100% Placement
Best Azure Data Factory Training In Chennai | Azure Data Factory Course | 100% Placement
Website: https://www.ficusoft.in/
Call: 94449 23024Learn Azure Data Factory in Chennai – Master the skills needed for efficient data processing. Join our training for hands-on experience and expert guidance.
プリザンターのスクリプト開発を少しでも楽にする方法
# はじめに
気づいている人は気づいている事です。プリザンターで開発する際、スクリプトやサーバスクリプトを使用します。
ブラウザ側で動作するプログラムはスクリプトで登録します。
しかし、プリザンターでスクリプトを入力する際は単なるテキスト入力でコードエディタとかありません。
プログラマーとしてはVSCodeとか使用して開発できれば楽になるのですが・・・
これが可能です。
一時的な使い方ですが、早く開発したい人にとっては便利なのでご活用ください。
今回はダッシュボードで作成してみます。# 手順
## 1.ダッシュボードを追加します。
説明不要ですね。
## 2.ダッシュボードの管理＞HTMLに下記を追加します。
“`
“`
## 3.ファイル
俺からReact, Vueを学んでみないか？リアルな電卓を作ってみよう！
# 俺からReact, Vueを学んでみないかシリーズ
無茶苦茶調子に乗ったタイトルですが、インプレッションを集めるために煽っているだけです。すみません。誰も使ってくれないだろう無駄なもの([HTML/CSSで作る超リアルな電卓など]())をどんどんアウトプットしていこうという企画です。
## リアルな電卓はお好きですか？
今回はリアルな電卓を作成しましたwww
皆さんが想像しているよりリアルです。心の準備は宜しいでしょうか？作成したといっても、NextjsにHTML/CSSを反映させただけですけど、、、
とはいえ、reactjsで動くように無茶苦茶修正しましたし、JavaScriptも修正が大変でした。—
### 完成物
下記から確認できます！
[https://dashboard-next-ui.vercel.app/next-ui](https://dashboard-next-ui.vercel.app/next-ui)`じゃなくて`document.querySelector()`を使っているのかも。
## カスタムJavascriptで対応
WordPressのテーマに手を入れないでGTMだけで解決するならこんな感じ
“`javascript
document.querySelectorAll(‘.single-EntryMeta_Link’).forEach((el)=>{
if(el.innerHTML
NS高キャンパスの図書管理システム開発！
# Flaskを用いたCPの「図書管理システム開発」の概要
### 制作デモページ
制作中のものになりますが、９割型完成しています。
ngrokを使用したデモになるので、自宅でProgramを動かしてないときは止まります。
基本的にこの記事公開中は動かしっぱにしておく予定ですが、メンテナンスの影響で停止させることや想定外のエラーで停止する可能性があります。
データベースなどは、テスト用のデータなので、アカウント登録などは自由にやっていただいて大丈夫です。
https://frank-sole-boss.ngrok-free.app/### 制作意図
筆者が通学するNS高等学校”F”キャンパスには３００冊以上の先輩や歴代のキャンパス長が寄贈していただいた本が多くあり、もっと管理を確実にしてより多くの人ひとに本の魅力を伝えたいとい
「サーバーのタイムゾーンを変えて、クライアントのタイムゾーンはそのまま」を開発環境で再現したい
本番環境では、サーバー、クライアントがそれぞれ
– サーバー: UTC
– クライアント(ブラウザ): JSTのようなタイムゾーンとなっており、デバッグのために開発環境で同じ状況を再現したいことが時々発生します。
SSRをするときに、 `process.env.TZ` のようにタイムゾーンを指定できたらいいのですが、 mini_racer (V8) ではホストシステムのタイムゾーンを参照してしまうようで、開発環境(Mac)で再現するにはMacのタイムゾーンを変更する必要があります。
しかし、同時にブラウザのタイムゾーンもつられて同じタイムゾーンを参照してしまいます。## 方法
1. PCのタイムゾーンをUTCに設定する
2. ブラウザのタイムゾーンをJSTに書き換える### 1. PCのタイムゾーンをUTCに設定する
Macの設定から時間帯をUTCに変更します。
 についてご紹介します。（過去の記事）
+ 2019 – [Three.js](https://qiita.com/dsudo/items/42da9c7f45ed6147395e)
+ 2020 – [Google Earth Studio](https://qiita.com/dsudo/items/43c8c443ced83f657e14)
+ 2021 – [Deck.gl](https://qiita.com/dsudo/items/b1db5f965d1eb58e8f38)
+ 2022 – [AR.js](https://qiita.com/dsudo/items/58718e9e3c870e6b92e6)# Cannon.js とは
Cannon.js はオープンソースの JavaScript 3D物理エンジンです。軽量性と柔軟性により，開発者は比較的簡単に物理演算を統合でき，リッチでインタラクティブなユーザー体験を提供できます。
Three.js (WebGL) と組み合わせて使用
BabylonJS Playground上の物理演算で樋に球を転がす
# BabylonJS 6 からの物理演算
BabylonJS では [PhysicsImpostor](https://doc.babylonjs.com/typedoc/classes/BABYLON.PhysicsImpostor) などを用いる物理演算 Version 1 が使用できますが
BabylonJS 6 になってからは 物理エンジン Version 2 として Havok エンジンが使用できるようになりました。[Babylon.js Playground](https://playground.babylonjs.com/) で Havok エンジンを用いた物理演算を実行してみます。
球を転がす樋を作成するために [`ExtrudeShape`](https://doc.babylonjs.com/typedoc/modules/BABYLON#ExtrudeShape-2) を用います。以下のコードは 2023年12月7日の [Babylon.js Playground](https://playground.babylonjs.com/) 6.33.0(
Popover APIが便利そう
# 導入
Chrome 114からサポートされたPopover APIを使用することでJavascriptなしで簡単にポップオーバーを実装できるようになりました。# ポップオーバーとモーダル
ポップオーバーと似たUIにはモーダルがありますが、そもそもポップオーバーとモーダルは何が違うのでしょうか？
MDNによると、
> * モーダルというのは、ポップオーバーが示されている間、ページの残りの部分は、ポップオーバーが何らかのアクションを起こすまで（例えば、重要な選択がなされるまで）、反応しないようにレンダリングされるということです。
> * 非モーダルというのは、ポップオーバーが表示されている間も、ページの残りの部分が反応するようにするということです。とのことです。[(https://developer.mozilla.org/ja/docs/Web/API/Popover_API)](https://developer.mozilla.org/ja/docs/Web/API/Popover_API)
今回紹介するPopover APIは表示されている間は他の要素を操作できるUIで
React入門６: 手番の実装
# はじめに
私自身の復習兼、備忘録的な意味もあり、複数回の記事に渡って React を用いてマルバツゲーム(三目並べ)を開発していきたいと思います。
– [React](https://ja.react.dev/)
– [CodeSandbox(公式)](https://codesandbox.io/)
– [CodeSandbox(非公式)](https://csb-jp.github.io/)## シリーズの一覧
1. [React入門１: 環境構築 [オンライン版]](https://qiita.com/banana_bancho/items/64fa6ccb58101eadbb63)
– [React入門1.5: 環境構築 [ローカル版-番外編]](https://qiita.com/banana_bancho/private/30f5d9d2c5eea00ac11c)
1. [React入門２: 盤面の作成](https://qiita.com/banana_bancho/private/c50495b5d4c30555cec3)
1. [React入門３: イン
React Hooksまとめ
# はじめに
自分は新卒エンジニアです。今回は。現在学習しているReactの機能であるHooksについていつでも見返せるような記事を作成したいという目的で、書き始めました。参考にしていただければ幸いです。
# React Hooksまとめ 第一弾
まずReactについては、以下の通りです。
>ReactはWeb とネイティブユーザインターフェースのためのライブラリ
コンポーネントからユーザインターフェースを作成https://ja.react.dev/
## 1. Hooksとは
>React Hooksとは、クラスを使うことなくReactのstateを扱ったり、ライフサイクルに応じた処理を実装したりできる機能です。 React Hooksを活用すると、簡潔で読みやすいコードを記述できます。
https://udemy.benesse.co.jp/development/react-hooks.html#:~:text=React%20Hooks%E3%81%A8%E3%81%AF%E3%80%81%E3%82%AF%E3%83%A9%E3%82%B9,%E9%96%8B%E
event.preventDefault();について
:::note
`event.preventDefault();` はJavaScriptで使われるメソッドで、イベントのデフォルトの動作をキャンセルするために使用される。
これは特に、HTMLフォームの送信、リンクのクリック、キーボードやマウスイベントなど、ブラウザが特定のイベントに対して持つデフォルトの動作を防ぐ場合に役立つ。例えば、HTMLフォームで「Submit」ボタンを押すと、デフォルトではブラウザはそのフォームデータをサーバーに送信しようとする。
しかし、JavaScriptでevent.preventDefault();を使うことで、この送信動作をキャンセルし、代わりにJavaScriptでカスタムの処理を行うことができる。
:::“`javascript
document.getElementById(“myForm”).addEventListener(“submit”, function(event){
event.preventDefault();
// ここにカスタムの処理を記述
});
“`上記のコードでは、IDがmyForm
【JointJS】カスタム要素を作成して再利用可能なパーツを作成する
この記事では、JointJSで柔軟な図を作成するために重要なカスタム要素について紹介します。
## カスタム要素の定義方法
カスタム要素は、JointJSで用意されている図形を拡張して作成します。図形の拡張は、各図形クラスの`define()`メソッドを使用します。
## `define()`メソッドの使い方
[公式ドキュメント](https://resources.jointjs.com/docs/jointjs/v3.7/joint.html#dia.Cell.define)によると`define()`メソッドの定義は`define(type [, defaultAttributes, prototypeProperties, staticProperties])`となっています。
オプションとなっている引数も含めて1つずつ内容を見ていきます。### 第1引数 `type`
JointJS内で識別するための文字列を指定します。メソッド引数の中で唯一、必須の引数です。
指定した文字列はJointJS内のnamespaceとして`joint.shapes`配下に追加されま
How To Enable Javascript for Android
This tutorial helps to enable/disable Javascript in your mobile browser. JavaScript is supported by most popular browsers across popular Android devices such as Samsung, LG, Xiaomi, ZTE, Huawei, HTC, Sony, Nokia, Google Pixel, One Plus and Motorola.
dialog要素をEscキーでcloseした際にoverflow:hiddenを解除したい
# この記事で分かること
– dialog要素でEscキーでcloseした際にoverflow:hiddenを解除する方法
– dialog要素を使う利点、懸念点# 背景
ダイアログをdialogタグで記述した際にescキーで閉じることができます(ブラウザーによって提供)。
しかし、overflow:hiddenを解除できなかったのでモーダルが消えてもスクロールができません。
そこでどうしたら良いか考えてみました。補足）showModal() メソッドによって呼び出された“`
https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialog
# 実装
“`ts:モーダルを開く関数
openModal(){
document.body.style.overflow = ‘hidden’;
const modalElm = this.getModalElm();
if (!(modalElm instanceof HTMLD
Javascriptにおける変数の巻上げ(hoisting)について
こんばんは。@Esperna です。
今回はJavascriptのおける変数の巻上げ(hoisting)について書きます。# 背景
私はファームウェアのエンジニアですが、Webのことをもっと知りたいので、[OAuth徹底入門](https://www.shoeisha.co.jp/book/detail/9784798159294)という本を読んでいます。
この本の5章ではシンプルなOAuthの認可サーバーの構築を行うのですが、
その中でクライアントの認証部分をBasic認証のAuthorizationヘッダーを使って認証している下記コードがありました。これを最初見たときは変数clientIdのスコープがどうなっているのかが私には分かりませんでした。“`javascript
app.post(“/token”, function (req, res) {
var auth = req.headers[“authorization”];
if (auth) {
var clientCredentials = decodeClientCrede
let, var, constの使い分け【JavaScript】
ゴール
それぞれの特徴を理解したうえで使い分けできる。各変数の違いを理解
下記の特徴を確認する。
let var const 再宣言 不可能 可能 不可能 再代入 可能 可能 不可能 スコープ ブロックスコープ 関数スコープ ブロックスコープ 特定文字のバックスラッシュエスケープinJS
# はじめに 🐢
お仕事で、コピペ入力文字列の特定文字をバックスラッシュで
エスケープしたいケースがありました。
面白そうなので、放課後に取り組んでみました。
JSです。# １．やりたいこと
\ や ? や ! などをバックスラッシュでエスケープする。# ２．困ったこと
入力文字列にはバックスラッシュが１コで存在している。
そのまま JS に渡すと、文字列のエスケープ扱いとなってしまう。# ３．どうしたか
String.raw と テンプレートリテラル を用いる。
入力時のバックスラッシュが１コでも大丈夫。“` js
String.raw`\?!`; // ‘\\?!’
“`
https://stackoverflow.com/a/54178824/11634537# ４．エスケープ
入力文字列を一文字ずつ分割して配列にし、それぞれに対して map でエスケープ入れる。
“` js
String.raw`\?!`.split(”).map(x => ‘\\’ExpoとAndroid Studioを使ってスマホアプリを立ち上げる
こんにちは。
株式会社クラスアクト インフラストラクチャ事業部の大塚です。今回はExpoとAndroid Studioを使って、シンプルなアプリケーションをエミュレータ上で立ち上げてみたいと思います。
# 用語
## Expo
React Nativeのためのツールセット。
React Nativeでのアプリケーション開発を簡単にするためのもののようです。https://expo.dev/
## React Native
Reactをベースにしたフレームワーク。モバイルアプリケーションをJavaScriptやTypeScriptで開発するためのものみたい。https://reactnative.dev/
## React
Webアプリケーションの開発に使用されるものらしい。JavaScript/TypeScriptを使用していることから、PythonでいうDjangoと関係性は近いのかなぁ？ひとくくりでは表現出来なさそうですが。。。
HTML/CSSをJavaScript/TypeScriptに埋め込んで書けるみたいです。
・・・ふ～ん・・・なんのメリットがあるんや・OTHERカテゴリの最新記事
- 2024.09.19
JavaScript関連のことを調べてみた
- 2024.09.19
JAVA関連のことを調べてみた
- 2024.09.19
iOS関連のことを調べてみた
- 2024.09.19
Rails関連のことを調べてみた
- 2024.09.19
Lambda関連のことを調べてみた
- 2024.09.19
Python関連のことを調べてみた