- 1. InDesign JavaScript 検索結果を一覧を表示
- 2. Javascript フレームワーク 2021
- 3. 【推しを愛でるプロジェクト】ゲーム内ミュージック(+α)を耳コピしてobniz＆スピーカーで奏でてみた
- 4. 【JavaScript】関数とオブジェクト⑫ instanceof
- 5. 【備忘録】Ajax について勉強したのでまとめてみる: XMLHttpRequest
- 6. Web上でパーティクルフィルタのデモをJavaScriptで簡単に実装してみる.
- 7. ミニ四駆の勢いにobnizで水を差しにいく
- 8. 阿部寛のホームページを（力技で）遅くするChrome拡張機能を作ろう！
- 9. obniz feat.BAIKIN-MAN!
- 10. node.jsでHIITのTimerを作った
- 11. 【JavaScript】fileオブジェクトのファイル名を変更したオブジェクトを取得する
- 12. 【Vue.js】監視プロパティ（ウォッチャ）の基本
- 13. 【JavaScript】関数とオブジェクト⑪ new演算子
- 14. Nuxt3を触ってみたら本気を感じた
- 15. ニューヨークを拠点とするRevamp AgencyがWordPressショップからJamstackに切り替えた理由【後半】
- 16. はじめてのJavaScript⑫ 「配列と連想配列」
- 17. JavaScript – How to format a Date in MM/dd/yyyy HH:mm:ss format in JavaScript?
- 18. グローバル空間の汚染と即時関数
- 19. Next.jsでIEブロックを行う
- 20. @google-cloud/connect-firestoreで保存されるセッションデータに作成時刻を追加する。
InDesign JavaScript 検索結果を一覧を表示
検索結果を一覧を表示するスクリプトは、これで良いのかな・・・？
~~~JavaScript
/*
このスクリプトを利用して起こった不具合の責任は取れません。
ご了承下さい。更新 2021/010/27
*/// アプリ指定
#target “indesign”;// スクリプト名
var scriptName = “検索結果を一覧を表示”;//スクリプトの動作指定（一つのアンドゥ履歴にする、及び、アンドゥ名）
app.doScript(function () {// ダイアログ
var dialogueFlg = confirm(“「検索と置換」の 『正規表現』 での検索の値で検索した結果を表示します。”
,””, scriptName);// Noの場合
if (dialogueFlg == false) {// 終了
exit();
}// ドキュメント全体から検索
grepResultArray = app.activeDocument.findGre
Javascript フレームワーク 2021
今日、Javascriptの強力な開発により、ますます多くのライブラリがあります Javascriptが誕生しました。 したがって、Webデザインと開発に役立つライブラリをお勧めします。
#98.css
これは、Windows 95、98を使用した思い出を追体験するのに役立つ優れたライブラリです。他のライブラリと同様に、CSSを使用してレイアウトを作成するのに役立つコンポーネントも提供します。 このライブラリにはJavaScriptが含まれていないため、適用できます さまざまな種類のWebサイト。 私の意見では、これは単なる楽しみのためのプロジェクトであり、実際のプロジェクトではありません。
[98.css](https://jdan.github.io/98.css/)#Uppload
Upload Galleryは、画像をWebサイトに簡単にアッ
【推しを愛でるプロジェクト】ゲーム内ミュージック(+α)を耳コピしてobniz＆スピーカーで奏でてみた
ゲームセンターでゲットしたフィギュアたち。大切に！大切に！クリアケースに入れて飾っています。
そんな毎日視界の中に入る推しフィギュアたち。
常々**「何かやって愛でてあげたいな」**と、考えていました。
そんなところに**obniz**・**LED**・**スピーカー**等をゲット！
Lチカさせて音楽奏でたい！ということで、推しキャラのために！**推しを愛でるプロジェクト！**を開催いたします！:sparkles::two_hearts:推しフィギュアをゲーム内BGMを奏でるオルゴールのようにしたい！:two_hearts::sparkles:
知らな
【JavaScript】関数とオブジェクト⑫ instanceof
#はじめに
Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。
前回の記事
https://qiita.com/nao0725/items/1bc515e893737530167d
#目的
* 関数とオブジェクトについての理解を深める
#本題
###1.instanceofどのコンストラクターから生成されたオブジェクトなのかを確認する
####前提
““js
// 関数Fをコンストラクターとして定義
function F(a,b){
this.a = a;
this.b = b;
}F.prototype.c = function(){}
// インスタンス化
const instance = new F(1,2);
// F {a: 1, b: 2}と出力
console.log(instance);
““`これがどのコンストラクターから生成されたものなのかを確認するためにinst
【備忘録】Ajax について勉強したのでまとめてみる: XMLHttpRequest
## はじめに
AJAX とは何？
AJAX とはプログラミング言語ではなく、 Asynchronous JavaScript AND XMl の略。
AJAX はシンプルに以下のコンビネーションを使う。– ブラウザ上ビルトインの XMLHttpRequest オブジェクト(サーバーにデータをリクエストするため)
– JavaScript と HTML DOM(データの表示または使用のため。)## 役割:
– データの送受信を非同期に行う
– 全体のページをリロードせずに、必要なアップデートを早く入れ込むことができるのでよりユーザーのアクションに対し早く、レスポンスできる！
– ほとんどは XML でなく JSON を使う
## XmlHttpRequest(XHR) オブジェクトとは？
– ブラウザの JS 環境により提供されるオブジェクトの形をした
Web上でパーティクルフィルタのデモをJavaScriptで簡単に実装してみる.
# 目的
パーティクルフィルタを勉強したので、JavaScriptで動かしてみる.
といっても最新のJavaScriptに明るいわけではないので、実装が雑なのはお許しを…めちゃくちゃ単純に実装するのが今回の目標.
# 参考
下記のサイトと動画を参考に実装しています.
http://www.thothchildren.com/chapter/5c7bc083ba4d5d6b2c2419ea
# できたもの
長方形の位置を予測するパーティクルフィルタ.
4つのランドマークからの距離を取得して、尤度を計算.
赤、緑、青、黄色のランドマークは動かないものとして、
長方形だけは動かせられる.[バスターソニックの詳細はこちら](https://dic.pixiv.net/a/%E3%83%90%E3%82%B9%E3
阿部寛のホームページを（力技で）遅くするChrome拡張機能を作ろう！
この世で最も早いホームページと言われたら、あなたは何を思い浮かべますか？
そう、 **[阿部寛のホームページ](http://abehiroshi.la.coocan.jp/)** ですね。
その速さと言えばあの世界最速の男、ボルトも驚くスピード。
ボルトと阿部寛のホームページが新国立競技場で速さを競ったなら、 **阿部寛のホームページの完全勝利** と言えるでしょう。電波の悪い状態でまず見るべきサイトが阿部寛のホームページと言われるほど、通信速度を知るために重要なバロメーターの役割も果たしており、 **もはやこの世の中になくてはならないサイトの代名詞** となっています。
そんな人類の生み出した最速のサイト、阿部寛のホームページ。
ひねくれた私は阿部寛のホームページのあまりの速さに嫉妬したので、阿部寛を遅くする方法はないかと試行錯誤することにしました。そこで思いついたのです。
阿部寛のホームページのあまりの速さを抑えることはできなくても、 **遅くなっているように見せればいいのでは？**では阿部寛のホームページを遅くするにはどうすればいいのでしょうか？
ページスピ
obniz feat.BAIKIN-MAN!
##パパの目論見##
うちの次女はアンパンマンが大好きでバイキンマンが大嫌いな典型的な2歳児なのですが、
ガチャポンで出てくるのは、決まってバイキンマンだったりします:joy:
今回の企画はバイキンマンを使ったおもちゃを作り、
娘に~~好きになってもらおう~~バイキンマンを克服してもらおうというものです。逃げる者を追いたくなるのは人間の性でしょうから、近づいたら逃げるバイキンマンを作ります。
###名付けて、「BYE-BAIKIN-MAN!!」###
obnizを手に入れたので、いざトライ！##試作品##
前進。壊れたように動く。#protoout #obniz pic.twitter.com/ORmN5oxNyI
— TAKA (@taka_xedge) October 25, 2021
超振動距離センサとサーボモーターを組み合わせて、動力にしたいと考えました。
この超振動を使えば、地面を叩いてやつらは動くはずである！これは期待できそうだ！
##完成品「BYE-BAIKIN-MAN？」
https://twitter.com/taka_xedge/status/14528
node.jsでHIITのTimerを作った
フィヨルドブートキャンプのプラクティスでnpmを自作しました。
せっかくなのでqiitaで公開させてもらおうと思ったので、勇気を出して書かせてもらってます。「もっとこうした方がいいんじゃない？」などのご意見がありましたらコメントしてもらえると嬉しいです！
## どんなnpmを作ったのか
作ったnpmは、最近流行りのトレーニング手法である**HIIT（High Intensity Interval Training）のタイマー**です。> [話題の筋トレ「HIIT」とは？](https://www.s-re.jp/magazine/health/102/)
HIITとは、「High Intensity Interval Training（高強度インターバルトレーニング）」の略で、負荷の高い運動と小休憩を繰り返すトレーニング法のこと。限界まで体を追い込むことで、常に脂肪が燃焼しやすい状態をキープし、体脂肪減少と筋肉増量効果を得るものです。**実際に作成したnpmはこちらで確認できます↓**
– npm：[hiit_timer](https://www.npmjs.com/p
【JavaScript】fileオブジェクトのファイル名を変更したオブジェクトを取得する
## 概要
JavaScriptではFileAPIを使用することで、クライアントPCからのファイルの読み込みを行うことができます。実装は[JavaScript でファイルを読み込む方法](https://javascript.keicode.com/newjs/how-to-read-file-with-file-api.php)の記事にのっています。
あまり無いケースだと思いますが、この受け取ったfileオブジェクトでのファイル名を変更する場合、どうすれば良いのかというのをメモ書きします。## 対応
fileオブジェクトのファイル名を直接変更することはできません。
対応の一つとして、[こちら](https://stackoverflow.com/a/46327909)のstackoverflowの記事にある通り、元のfileオブジェクトをベースにファイル名を変更して、新しくファイルオブジェクトを作成する方法が挙げられます。## 実装サンプル
内容は上記のstackoverflowの記事とほぼ同様ですが、元の拡張子を取得して新しいファイルにも同様の拡張子を付与する実装を以下にの
【Vue.js】監視プロパティ（ウォッチャ）の基本
#はじめに
こんにちは！
今回は【Vue.js】監視プロパティ（ウォッチャ）の基本についてアウトプットしていきます！#監視プロパティとは
監視プロパティとは、**特定のデータまたは、算出プロパティの状態を監視して変化があったときに登録した処理を自動的に実行できるもの**です。#書き方・解説
“`HTML:HTML{{ message }}
{{ $data }}
“`
“`Vue.js
var app = new Vue({
el: “#app”,
data: {
message: ‘Hello Vue.js!’
},
watch: {
//⏫監視プロパティ（ウォッチャ）
message: function(newValue, oldValue
【JavaScript】関数とオブジェクト⑪ new演算子
#はじめに
Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。
前回の記事
https://qiita.com/nao0725/items/2cb2e20cf81663582b46
#目的
* 関数とオブジェクトについての理解を深める
#本題
###1.new演算子new演算子とはコンストラクター関数からインスタンスを作成するための演算子のこと
####例1
コンストラクター関数の戻り値がreturnで、オブジェクトになっている場合
““js
// 関数を定義
function F(a,b){
this.a = a;
this.b = b;
// 戻り値にreturnで、空のオブジェクトを設定
return {};
}
// インスタンス化
const instance = new F(1,2);
// この結果を出力すると{｝からのオブジェクトが出力される
console.log(insta
Nuxt3を触ってみたら本気を感じた
Nuxt3がベータになりましたね。
中身は色々変わったことが書かれているので、いちユーザーとして表面上何がどう変わったのかを見ていきたいと思います。## プロジェクト作成
新規プロジェクトは“nuxi`というNuxt用の新しく作られたCLIを使います。
たった3コマンドでプロジェクトのテンプレートがもう使えちゃいます。“`bash
$ npx nuxi init nuxt3
$ cd nuxt3
$ yarn install
“`この状態でnode modulesのインストールが完了するので、開発用サーバーを起動しましょう。
“`bash
$ yarn dev -o
“``-o`オプション渡していたら以下のページが自動で開くはず。
開かなくても http://localhost:3000/ でいけますね。
## デ
ニューヨークを拠点とするRevamp AgencyがWordPressショップからJamstackに切り替えた理由【後半】
Revamp AgencyがWordPressショップからJamstackに移行し、読み込みが速く、完全にカスタマイズ可能なウェブサイトで顧客を喜ばせるために、Bejamasがどのような支援をしたのかをお話いたします。
著者：Denis Kostrzewa 2019年1月23日
原文：https://bejamas.io/blog/revamp-wordpress-to-jamstack/
##③しかし、Revampのクライアントにとって、静的なウェブサイトは有効でしょうか？
静的サイトジェネレータは、この30年間で大きな進歩を遂げました。1990年代の静的なサイトは、基本的な機能しか備えていませんでしたが、現在の静的なサイトは、好きなようにダイナミックに変化させることができます。
静的なサイトでは、フロントエン
はじめてのJavaScript⑫ 「配列と連想配列」
#目次
[1.はじめに](https://qiita.com/Stack_up_Rising/items/cb71842d7c3510daf9f0#1-%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB
)
[2.配列](https://qiita.com/Stack_up_Rising/items/cb71842d7c3510daf9f0#2-%E9%85%8D%E5%88%97
)
[3.配列の例題](https://qiita.com/Stack_up_Rising/items/cb71842d7c3510daf9f0#3-%E9%85%8D%E5%88%97%E3%81%AE%E4%BE%8B%E9%A1%8C
)
[4.多次元配列](https://qiita.com/Stack_up_Rising/items/cb71842d7c3510daf9f0#4-%E5%A4%9A%E6%AC%A1%E5%85%83%E9%85%8D%E5%88%97
)
[5.多次元配列の例題](https://qiita.com/Stack_up_Rising/items
JavaScript – How to format a Date in MM/dd/yyyy HH:mm:ss format in JavaScript?
“`javascript
var dt = new Date();console.log(`${
(dt.getMonth()+1).toString().padStart(2, ‘0’)}/${
dt.getDate().toString().padStart(2, ‘0’)}/${
dt.getFullYear().toString().padStart(4, ‘0’)} ${
dt.getHours().toString().padStart(2, ‘0’)}:${
dt.getMinutes().toString().padStart(2, ‘0’)}:${
dt.getSeconds().toString().padStart(2, ‘0’)}`
);
“`https://stackoverflow.com/questions/10632346/how-to-format-a-date-in-mm-dd-yyyy-hhmmss-format-in-javascript
グローバル空間の汚染と即時関数
# グローバル空間の汚染
グローバル空間の汚染とは、グローバルスコープの変数や関数が存在すること。
グローバルスコープは、プログラムのどこからでもアクセス可能なため、他のプログラムなどの変数名の衝突が発生し、予期せぬバグが発生してしまう。
グローバル空間を汚染しないために、グローバル空間には変数及び関数を宣言すべきではない。
それを防ぐ手段の1つが即時関数を使用すること。即時関数で囲むことでスコープをつくり、アクセスを制限することができる。#即時関数とは
即時関数とは、関数定義と関数の実行が同時に行われる無名関数のこと。
これを使うとグローバル空間の汚染を避けることができる。
即時関数の書き方は以下となる。“`javascript:書き方
(function() {
// 処理内容
})();// ラムダ式を使った書き方
(() => {
// 処理内容
})();
“`
これにより、即時関数内で宣言された変数は関数スコープとなり、関数の外から変数にアクセルすることができない。
Next.jsでIEブロックを行う
動作対象外のブラウザ(IE)でアクセスされた際、警告を出したい場合がありました。
Vue.jsの場合は、index.htmlに直に判定文を記述すればよかったのですが、Next.jsでのやり方がわからず苦戦しました。調べてみると、当然ながらサポートしていないブラウザで動作させるのでNext.jsのアプリケーション内で制御するのはあまり良くなさそうなので、実現方法を考えてみました。
これ以外にも他にもっといい方法があるかもしれませんが、とりあえず残しておきます。**※コードはTypeScriptです。**
# IE判定
こんな感じでメッセージを出したいが、pages/_app.tsxに記述するとエラーになる。
“`javascript
if (window.document.documentMode) {
document.write(‘IEはサポートしていません’)
}
“`# _document.tsxの追加
そこで、_document.tsxを利用する。
_document.jsの詳細は[こちら](https://nextjs.org/docs/adva
@google-cloud/connect-firestoreで保存されるセッションデータに作成時刻を追加する。
# まえがき
GAEでセッション管理にFirestoreを使うという内容のガイドがGoogleから公開されています。
[Firestore でのセッション処理 | Node.js | Google Cloud](https://cloud.google.com/nodejs/getting-started/session-handling-with-firestore?hl=ja)非常にわかりやすいのですが気になる事が一つ
> Connect-firestore は、古いセッションや期限切れのセッションを削除しません。Google Cloud Console でセッション データを削除するか、自動削除戦略を実装できます。セッションに、Memcache や Redis などのストレージ ソリューションを使用すると、期限切れのセッションが自動的に削除されます。流石にコンソールから手作業で削除するのは面倒くさいので、古いセッションを自動で削除するようにしたい所。
要するにCloud MemorystoreやCloud SQLを使ってほしいということらしい。
しかしConnec
