- 1. Parse Server JavaScript SDKの使い方(JavaScriptでのロール操作)
- 2. ドラクエ11のダメージ計算式をjavaScriptで実装してみた【ゲームやツール制作の参考にどぞ】
- 3. Number.parseIntってアホな子なの?
- 4. Array#forEachのcallbackにasync関数をつかってはいけないよ
- 5. [Swift] WKWebViewからJavaScriptに値を送りたい
- 6. 【Next.js14】CSR・SSR・SSG・ISRの違いと実装方法
- 7. Kintoneのレコード登録をslackに通知するシステムの開発 ~社内ナレッジ整備の仕組み作りとシステムの導入~
- 8. 【JavaScript】オブジェクトから指定したプロパティを削除する方法
- 9. AdBlockなどの広告ブロッカーを使用しているか判定する方法
- 10. TinyMCEがTableタグに「width」と「height」を勝手に設定する機能を無効にする
- 11. Real-Time Find and Replace で置換されないときの対処法
- 12. 【css2行だけ】ページ内リンクでターゲットの少し上に着地する「scroll-padding-top」
- 13. ミスしがちな俺がチェック用のjsを書いたらめちゃくちゃはかどった話
- 14. eslintをバンドルして持ち歩こうと思ったが無理だった話
- 15. Joy-Con などをブラウザで使える API 2つの情報をまとめて見てみる: Gamepad API と WebHID API
- 16. JavaScriptは省略がお好き【アロー関数】
- 17. JavaScriptでセグメントツリー
- 18. Cesium とは
- 19. Slack の CLI と無料サンドボックス環境でサクサク快適開発
- 20. mouseup イベント後、要素外で mousedown されるとイベントが発火せず困るので何とかしたい
Parse Server JavaScript SDKの使い方(JavaScriptでのロール操作)
[ニフクラ mobile backendは3月末で終了します](https://mbaas.nifcloud.com/info/2023/12/post-171.html)。
ニフクラ mobile backendからの移行先として、お勧めしているのが[Parse Server](https://parseplatform.org/)です。設計思想が近く、変更するコード量が少なく済むのではないかと思います。
Parse ServerではWebアプリやCordova(Monaca)アプリ向けにSDKを提供していますが、ドキュメントは英語のみとなっています。そこで、各機能の使い方を解説します。今回はアクセス権限に関係するロールの操作について解説します。
## JavaScript SDKのインストール
JavaScript SDKはCDN版を使うか、npmでインストールする方法があります。CDNの場合は、下記のタグでインストールできます。
“`html
ドラクエ11のダメージ計算式をjavaScriptで実装してみた【ゲームやツール制作の参考にどぞ】
```
最終更新日: 20240308
```
# ドラクエ11のダメージ計算式
まずはダメージ計算式について書いていきます
(実はドラクエ9でも同じダメージ計算式が使われていたりします)
## 実ダメージ計算式
ゲームを遊んでいると表示されるダメージです
このような式で計算されています!
```
基本ダメージ ± ダメージ幅 // ±はプラスマイナス
```
## 基本ダメージ計算式
攻撃力はplayer、防御力enemyの値です!
```
攻撃力 / 2 - 守備力 / 4
```
## ダメージ幅(乱数)の計算式
例: 「5.6875」だったら端数は切り捨てして「5」になります
```
ダメージ基本値 ÷ 16 + 1(端数切捨)
```## 攻撃力200のplayerが守備力100のenemyを攻撃した場合
基本ダメージ
```
200 ÷ 2 - 100 ÷ 4 = 75
```
ダメージ幅
```
基本ダメージ(75) ÷ 16 + 1 = 5.6875(端数切捨) = 5
```
実ダメージ
```
基本ダメージ(75) ± ダメージ幅(5) = 75-5と75+
Number.parseIntってアホな子なの?
# Number.parseIntに色んな文字列を渡してみた結果
[前回の記事](https://qiita.com/AsilHatake/items/2a02c600d26397c36379)で、__数値チェックするならNumber.parseIntの結果をisNaNでやらんほうがいいかもね__
って、最後に補足で書いたけど、なぁぜなぁぜっていう理由を、実際のコードで試した結果を領域展開するよ
※[ここ](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/parseInt)のページをChromeで実行してみた結果## えっ、こんな文字列も数字扱いしてくれるの?
```javascript:全部isNaNがfalse
console.log(Number.parseInt("11-1")); // 11
console.log(Number.parseInt("-11-1")); // -11
console.log(Number.parseInt("11
Array#forEachのcallbackにasync関数をつかってはいけないよ
# TL;DR;
Array#forEach(などの)callbackに非同期処理が必要なときに、内部の処理で非同期処理が必要なときに使用すると怪我をするよという話です# どういうこと?
Promiseを返す関数やAPIをloopでよびたいとします```javascript
const images = [image1, image2, image3]
images.forEach(async(_image) => {
const imagedata = await createImageBitmap(_image)
// なにか処理をする
})
```
これが完全に非同期な処理だけならなにも事件はおこらないのですが、内部でfoldingする処理をいれたとします
たとえばwidthの合計とか測定したいとか(そんな需要はほとんどなく、実際は取得したimagedataを処理して全部の結果をとかやるのですが)
```javascript
const images = [image1, image2, image3]
const allWidth = 0
images
[Swift] WKWebViewからJavaScriptに値を送りたい
## やりたいこと
* iOSアプリ内の値をiOSアプリで表示しているWebViewに反映したい
* 渡す値が複数ある## JavaScriptを実行する方法
既存の記事もたくさんありますが、以下のメソッドで実行できます
```swift
webView.evaluateJavaScript("実行したいscript")
```
## WKWebViewから値を渡すには
postMessageを使います
```swift
webView?.evaluateJavaScript(
"window.postMessage({'name':'message'},'*');"
)
```
これに値を増やせば複数送れるのでは?と思っていましたが、ダメでした
```swift
webView?.evaluateJavaScript(
"window.postMessage({'name':'name1'}, {'key':'value'}, '*');"
)
```
それもそのはず、第2引数はmessageじゃなくてtargetだったため。:::note info
post
【Next.js14】CSR・SSR・SSG・ISRの違いと実装方法
![giphy (16).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/173e6752-2e7e-6702-6b15-e25b17b54b18.gif)
Next.jsでは、レンダリング手法をCSR・SSR・SSG・ISRの中から選ぶことができます。
本記事では、それぞれの特徴に触れつつ、実装方法を紹介します。
## CSR (Client Side Rendering)
クライアントからのリクエストに対して、サーバーは空のHTMLとJavaScriptを返します。このJavaScriptがブラウザ上で実行されることにより、実際に表示するHTMlをレンダリングします。
### メリット
- サーバーとの通信が初期遷移時のみに抑えられる
- ページ遷移が高速(実際には遷移しているように見えるだけでJavaScriptで表示している内容を変えているだけ)### デメリット
- 初回読み込み時に全てのデータを一括して取得するので、ページが表示されるまでの時間が長い(アプリケー
Kintoneのレコード登録をslackに通知するシステムの開発 ~社内ナレッジ整備の仕組み作りとシステムの導入~
# はじめに
はじめまして。社内でデータサイエンティストを務めております [@shosuke_kondo](https://qiita.com/shosuke_kondo) です。
NTTデータではグローバルレベルでNTTデータグループ内の技術・知見・経験等をアセット化し、それらを有効活用することで、お客様への提供価値を最大化するため、[中期経営戦略の1つとして、「アセットベースのビジネスモデルへの進化」](https://www.nttdata.com/global/ja/investors/management/plan/)を掲げております。
[NTTデータ デザイン&テクノロジーコンサルティング事業本部](https://enterprise-aiiot.nttdata.com/)では、アセット戦略の一環として、本組織が提供しているソリューションである[DataRobot](https://enterprise-aiiot.nttdata.com/service/datarobot)のナレッジ整備を行っています。今回はナレッジ整備の一環として、Q&A共有の仕組み作りを行いま
【JavaScript】オブジェクトから指定したプロパティを削除する方法
以下のようにdelete演算子を使用すると指定したプロパティを削除できます。
```js
const obj = {
name: "Name",
age: 32,
}delete obj.age;
console.log(obj) // {name: "John"}
```https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/delete
AdBlockなどの広告ブロッカーを使用しているか判定する方法
AdBlockなどの広告ブロッカーを使用しているかをJavaScriptを用いて判定する方法です。
※ これは2016-04-29に[個人ブログ](https://bicstone.me)で公開した記事を移植したものです。
## 広告ブロッカーを検知する仕組み
広告ブロッカーは指定のアドレス(例えばGoogle AdSenseのJavaScriptファイル)のアクセスを遮断する他、余分な空白を無くす目的で、例えば `"adsbygoogle"` というclass名がついたdivをまるごと消すといったこともしています。この仕組みを使用し、JavaScriptで `"adsbygoogle"` 等のclass名がついたdivボックスを小さく作成し、広告ブロッカーによって消されたことを検知することによって広告ブロッカーを検知します。
## 広告ブロッカーを検知するライブラリを導入
広告ブロッカーを検出するライブラリはたくさんありますが、シンプルな仕組みの「[BlockAdBlock](https://github.com/sitexw/BlockAdBlock)」をおすすめします
TinyMCEがTableタグに「width」と「height」を勝手に設定する機能を無効にする
WordPressがアップデートされてから、TinyMCEがTableタグに「width」と「height」を勝手に設定する機能が追加されました。レスポンシブデザインのサイトにおいて、この機能はむしろデザインを崩す原因となってしまいます。この機能を無効にする方法をご紹介します。
※ これは2016-08-28に[個人ブログ](https://bicstone.me)で公開した記事を移植したものです。
## 問題
TinyMCE 4.3.3以上(WordPress 4.5以上)においてテーブルの境界線を一度でも触ってしまうと、TinyMCEはTableタグに「width」と「height」を勝手に設定します。
![2×2のHTMLテーブルのスクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684999/081b61b8-7c33-8a6b-94aa-de99e05f201f.png)
![テーブルの枠線を触る](https://qiita-image-store.s3.ap-north
Real-Time Find and Replace で置換されないときの対処法
Real-Time Find and Replaceプラグインでの置換が適用されないときの対象方法を紹介します。
※ これは2016-09-26に[個人ブログ](https://bicstone.me)で公開した記事を移植したものです。
## プラグインの概要
WordPressで表示される公開ページの置換、正規表現置換ができるプラグインです。
## 置換されない…
Autoptimizeプラグインで生成されたjs、cssファイルのURLを変更するために使用したのですが、置換作業がうまくいきませんでした。
## 原因
AutoptimizeプラグインやReal-Time Find and Replaceプラグインも `template_redirect` フックを利用していました。優先順位がどちらも同一であったため、名前順でAutoptimizeプラグインの出力のバッファリングが先に開始されてしまったことが原因です。
## 対処
Real-Ti
【css2行だけ】ページ内リンクでターゲットの少し上に着地する「scroll-padding-top」
### ページ内リンクのリンク先は h2 などの見出しにしたい
`h2` (見出し)にはアクセシビリティの観点的な都合で id を付与したい。
その id をページ内リンクのターゲットとして流用するのがスマートな感じがする。ところが見出しを直接ページ内リンクのターゲットにすると、ページの上ギリギリになったり、固定のヘッダーが付いてくる場合はそれに隠されたりしちゃう。
「ページ内リンクのちょっと上に着地させたい」
### 「scroll-padding-top」という神プロパティ
(@chocolamint 様に教えていただきました!)htmlにこの2行を書くだけです。
- `scroll-snap-type: y proximity;`
- `scroll-padding-top: 70px;`ついでにスムーススクロールつけるのも、これで完了。
```css:css
html {
scroll-snap-type: y proximity;
scroll-padding-top: 70px;
scroll-behavior: smooth;
}
```
ミスしがちな俺がチェック用のjsを書いたらめちゃくちゃはかどった話
## 背景
「よっしゃー日本語50ページおわった〜 英語ページを作るか...!」「日本語ページをコピーして、langをenにして、スタイル用にbodyにenクラスをつけて...タイトルとdescriptionも英語にしないと...」
「あ、ページ内のリンクも英語ページにいくようにしなきゃ...」
「...」
「いつかやりもらしがでそうだな...」
というわけで、ちょっと面倒だけどチェック用のjsを書いてみました
## 前提
- 英語ページは以下のように対応しています
(日)/about/index.html → (英)/en/about/index.html
(日)/contact/index.html → (英)/en/contact/index.html ...
- 日本語ページのHTMLをコピーして、英語ページを作成する想定です
- 全ページでmain.jsが読み込まれているものとします
- 本記事では以下の内容をチェックすることとします
- lang属性がenになっているか
- リンクが英語ページに飛ぶようになっているか## 実装
eslintをバンドルして持ち歩こうと思ったが無理だった話
eslintをgithub actionsに組み込みたくてバンドルしようとしていましたが、無理でした
ここにその記録を残しておきます。github actionsを再現するのは面倒なので、別ディレクトリにあるファイルをリントしてみます。
まずはディレクトリ構成です。
>
> │
> ├───test-bundle
> │ .eslintrc.js
> │ package-lock.json
> │ package.json
> │
> └───target
> sample.js```javascript:target/sample.js
function snake_case() {
}
``````json:test-bundle/package.json
{
"name": "test-bundle",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Er
Joy-Con などをブラウザで使える API 2つの情報をまとめて見てみる: Gamepad API と WebHID API
Joy-Con などのゲームコントローラーを、ブラウザで扱える API があります。
今回、以下の「Gamepad API」と「WebHID API」について、記事執筆時点でのそれぞれの最新の情報や、最新のものに限らず便利に活用できそうな情報をいくつか見てみようと思います。
●ゲームパッド API - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Gamepad_API![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/d7c946e8-b3c7-7121-7df8-dd5b236c73d4.png)
●WebHID API - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/WebHID_API![image.png](https://qiita-image-store.s3.ap-northeast-1.amazon
JavaScriptは省略がお好き【アロー関数】
JavaScriptの関数の書き方を整理してみました。
## 通常の関数
```javascript
function sample (str) {
return str;
};console.log(sample("関数sampleにこの文を引数として渡して出力します。"));
``````javascript
const sample = function (str) {
return str;
};console.log(sample("関数sampleにこの文を引数として渡して出力します。"));
```## アロー関数
```javascript
const sample = (str) => {
return str;
};console.log(sample("関数sampleにこの文を引数として渡して出力します。"));
```
### 引数が一つの場合は(str)の部分のカッコを省略できる。```javascript
const sample = str => {
return str;
};console
JavaScriptでセグメントツリー
前々から身につけたいと思っていたセグメントツリーを学習し
AtCoderでACすることができたのでここに記事として残す
応用範囲が広く解説するのも一苦労なので時間のある時に追記していこうと思う[E - Alternating String](https://atcoder.jp/contests/abc341/tasks/abc341_e)
[提出結果](https://atcoder.jp/contests/abc341/submissions/50966908)```js
class SegmentTree {
constructor(n) {
this.leafSize = 0
this.data = []
this.init(n)
}init(n) {
let leafSize = 1
while (leafSize < n) { leafSize *= 2 } this.leafSize = leafSize this.data = Array(2 * leafSize - 1
Cesium とは
各種ゲームのリアルへの更なる追及やデジタルツインの普及など、近年、地理空間データの活用場が増えてきているように思います。
地理空間データを分析や視覚化するプラットフォームとして、[QGIS](https://qgis.org/)、[ArcGIS](https://www.esrij.com/products/arcgis/)、[Cesium](https://cesium.com/) 等、様々なものがありますが、その中でも、機能が豊富で、非営利目的であれば無料で使用することができる Cesium について、どういったものなのか、簡単に説明していこうと思います。# 概要
Cesium は、3D 地理空間データを Web 上で視覚化、分析、共有するためのオープンソースのプラットフォームです。リアルタイムの 3D 地球儀と地図を提供し、世界中の地理情報システム (GIS) データ、衛星画像、都市モデル、その他の 3D 地理空間データを高精度で表示することができます。Cesium は、WebGL 技術を使用してブラウザ上で直接、ハードウェア加速された 3D グラフィックスをレンダリングしま
Slack の CLI と無料サンドボックス環境でサクサク快適開発
こんにちは、Slack の[公式 SDK 開発](https://github.com/slackapi)と日本の Developer Relations を担当している瀬良 (@seratch) と申します :wave:
## サンドボックス環境が使えるようになりました
米国時間 3/6 にサンフランシスコで開催された TrailblazerDX にて、Slack の新しい開発者向けサポート機能が発表されました。
https://slack.com/intl/ja-jp/blog/developers/developer-program-launch-jp
Bolt for Python / JavaScript でのカスタムファンクションなどのトピックもあるのですが、この記事ではこれまでよりもはるかに簡単な取得・管理が可能となった Enterprise Grid の**サンドボックス環境を使ったローカル開発の方法**について紹介したいと思います。
## 何が嬉しいの?
今までの Slack アプリ開発は、最初に以下のような手順が必要でした:
* https://api
mouseup イベント後、要素外で mousedown されるとイベントが発火せず困るので何とかしたい
# やりたいこと
Chrome 拡張機能でボタンを埋め込んでいます。
ボタンがクリックされたことが視覚的に分かりやすいよう、マウスが押し込まれたらボタンの css を変更し、離されたら元に戻したい。
![スクリーンショット 2024-03-07 103511.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76272/0ec8e2d4-6ddd-3ed1-1273-1e33b8ef0d03.png)
## 修正前のコード
脳死で mousedown, mouseup のイベントリスナーをそれぞれ登録していました
```javascript
document.addEventListener('DOMContentLoaded', () => {
const copyButton = document.getElementById('copyButton');// マウスが押し込まれたら css を変更
copyButton.addEventListener('mousedow