- 1. Webの3Dモデルビューワーでカメラを45個並べて表示する[PlayCanvas]
- 2. 【Vue.js + TypeScript】コンポーネント間のデータやりとりについてのメモ
- 3. Firebase Functionsをブラウザから呼んでdeadline-exceededになる場合の対処
- 4. タブ切り替え等で中身のコンテンツの高さが変わる、display:noneで切り替えているときの、その切り替えているコンテンツの下の位置でスクロール位置保持
- 5. Twitterのプロモツイートを減らすブックマークレットを作った
- 6. tfjsで渋野日向子プロとボールを追いかける
- 7. 初めてのJavaScript
- 8. JSON.stringifyの出力結果を整形して可読性を向上させる
- 9. Edgeでautocompleteが動作しないとき
- 10. HTML/CSSしかやったことないコーダーがJavaScriptを勉強する回〜alert/getElementByIdでHello World
- 11. HTMLの雛形
- 12. Arrow関数
- 13. Rails + Turbolinks上のjs内でletを使うと怒られる
- 14. 応用カリキュラム javascript 01
- 15. TypeScript + Cypress + CucumberでE2Eテストをやる
- 16. auth0-spa-jsをnuxt流に使ってみる
- 17. Web上でパスワード不要のE2E暗号化してセキュアにファイル転送をしたい
- 18. Nuxtでモーダル実装時に背景がスクロールできてしまう時の対処法
- 19. Reactでstorybook起動時にJavaScript heap out of memoryが出たけど解決した話
- 20. GitHub Actions をローカル環境で実行したい(Self-hosted runners)
Webの3Dモデルビューワーでカメラを45個並べて表示する[PlayCanvas]
# はじめに
この記事はPlayCanvasでカメラを45個表示する方法を紹介します。
先日、DCEXPOでLooking Glass 8Kを見てPlayCanvasでも実装できそうなのでは?ということで一応カメラを45個並べる方法を紹介します。(Looking Glassを持っていないので検証できずおります)## スターターキットを使用して新規プロジェクト作成を作成する
PlayCanvasの公式サイトから登録をして新規プロジェクト作成を作成します。
[https://playcanvas.com/](https://playcanvas.com/)PROEJECTS → Model Viwer Starter Kitを選択
## カメラを追加
【Vue.js + TypeScript】コンポーネント間のデータやりとりについてのメモ# 概要
ちょっと夏休みとかちょっと冬休みとかあるとすぐ書き方を忘れるのでメモ# 親→子にプロパティでデータを渡す(props)
“`vue:Parent.vue
“`“`vue:Child.vue
{{ text }}Firebase Functionsをブラウザから呼んでdeadline-exceededになる場合の対処
# TL;DR
* タイムアウトの設定は、サーバー・クライアントの両方で別々に必要
* サーバのデフォルト`60秒`
* クライアントのデフォルト`70秒`
* サーバー側の`timeout`だけ延ばすと、クライアントの`timeout`を超えた時点で`deadline-exceeded`が発生する
* サーバー側の`timeout`が`300秒`なら、クライアント側は`310秒 = 310,000ミリ秒`にすべし!
* Firebase Javascript SDKが吐くエラーの意味はここを参照せよ!
https://github.com/grpc/grpc/blob/master/doc/statuscodes.mdしかしそもそも、**そんな長いtimeoutが必要なのは設計がおかしい**ので、できる限り短時間で処理完了できるように検討しましょう。
# 以下、気が向いたら読んでください
筆者はFirebase初心者なので、なかなか恥ずかしい内容も混ざってるかもしれませんが、しかしこの「JavaScript SDKでのタイムアウト設定方法」は英語サイト
タブ切り替え等で中身のコンテンツの高さが変わる、display:noneで切り替えているときの、その切り替えているコンテンツの下の位置でスクロール位置保持
こんな感じでタブで選んで中身のコンテンツを入れ替えたい。
わかりづらいがこの上がタブで、下がコンテンツ。
![_2019-11-19_15.08.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111089/b48ad768-5071-1515-c7c2-7c316604627f.png)しかも、そのタブは上下にあり、どちらでも中身のコンテンツを入れ替えられる。
↓下
![_2019-11-19_15.08.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111089/e61358d1-f96b-2823-67b6-e54bfcc4f021.png)つまり、
![E382B9E382ADE383A3E383B3202019-11-19.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111089/7029bc33-a6ddTwitterのプロモツイートを減らすブックマークレットを作った
[追記]11/20 プログラムが間違っていたので修正
# はじめに
Twitterのプロモツイートウザいですよね。
プロモをしたアカウントをブロックしてもプロモが減ることはありません。TwitterのプロモツイートはTwitterから取得した興味関心データに基づいて表示されています。
これらのチェックを外すことで、大半のプロモツイートが表示されなくなります。# やりかた
1. 以下のコードをコピーする
`javascript:(function(){li=document.getElementsByTagName(“input”);li=Array.from(li);let n=0;li.forEach((e) => {if(typeof e!==undefined&&e.checked&&e.type==”checkbox”&&n<100){e.click();n++;console.log("click");}});})();` 2. ブラウザのブックマークバーを右クリックして、ブックマーク追加画面を出す (Chromeなら`ページを追加`の項目をクリック) 3. 名tfjsで渋野日向子プロとボールを追いかける
Pythonが隆盛のAIプログラミングですが、私はWEB屋なのであくまでもJavascriptにこだわりたい、と思い、オブジェクト検出・CoCo-SSDの転移学習に挑戦してみました。ゴルファーが泣いて喜ぶ、壮大な野望を目論みつつ、日々勉強中です。
tfjsのMobilenet(画像分類)においては、[こちら](https://www.tensorflow.org/js/tutorials/transfer/image_classification)にチュートリアルがあり、比較的容易に転移学習が可能です。前回の「[渋野日向子プロのスイングを機械学習してみた](https://qiita.com/Chishiki/items/ce5d3359a097db884fcc)」は、これを改良しています。
##JSサンプルが無い
思った以上に、JSでのCoCo-SSD転移学習の事例が無いことがわかりました。
そこで、いずれにせよGPU環境が必要にもなるので、Google Colab上で、Pythonで転移学習させ、出来上がったモデルを [tfjs_converter](https://githu初めてのJavaScript
#初めてのJavaScript
筆者はこれまでWebについてHTMLとCSSには触れてきましたが、JavaScriptをつかった動きの部分をやってきませんでした。
そんなJavaScript初心者の筆者が、初心者の目線で勉強方法をまとめてみました。
これからJavaScriptを勉強する同じ初心者の仲間の役に立てれば本望です。##JavaScript学習の入り口として理解しやすい初心者本を紹介
JavaScriptを苦手とする人の多くには、そもそも記述されている構文について、読み方が分からない(何を書いているか分からない)という点が挙げられると思っています。
この本では特段難しいJavaScript文は出て来ません。
JavaScriptの基本構文を抑えつつ、その読み方のポイントを教えてくれます。[スラスラ読める JavaScript ふりがなプログラミング](https://amzn.to/2r1XSik ”スラスラ読める JavaScript ふりがなプログラミング”)
1週間もあれば、日中の合間で十分読み切ってしまえました。
また、読み進めながら自身のPCでも同じよ
JSON.stringifyの出力結果を整形して可読性を向上させる
# JSON.stringify()の出力結果が見辛い
`JSON.stringify(value)`の出力結果が整形されておらず見辛くて困ってた。
初心に戻りドキュメントを見てみると、オプションでサクッと整形できることがわかったのでメモ。第3引数に空白文字を渡すと出力結果にインデントを付与することができる模様。
## 構文
`JSON.stringify(value[, replacer[, space]])`## 引数
> value
> JSON 文字列に変換する値。
>
> replacer Optional
> 文字列化の手順の挙動を変更する関数、または値のオブジェクトを JSON 文字列に含めるプロパティを選択するホワイトリストとして機能する String と Number オブジェクトの配列。もしこの値が null であるか提供されない場合は、結果の文字列にオブジェクトのすべてのプロパティが含まれます。
>
> space Optional
>出力する JSON 文字列に可読性を目的に空白を挿入するために使う String または Number オブジEdgeでautocompleteが動作しないとき
# 事象
autocompleteが入力履歴をドロップダウンで表示してくれたけど、それを押してもformに反映されない
そんな時は以下が原因かも。
# 原因
formに同じname属性のinput or select フィールドが存在している。
“`html
“`上記のような場合、hiddenの方だけがvalueが更新されて、autocompleteが反映されていないように見えます。
Edge独自のautocompleteスクリプト`Autoformfill_ContentScript.js`が「同じnameのinputは先に存在するものだけをvalue更新する」ことが原因です。# 対策
– autocompleteを効かせたいinputフィールドを複数存在させない。
– autocompleteを効かせたいinputフィールドを効かせたくないフィールドより前に配置する。同じnameのinputが存在する方がおかしいと思
HTML/CSSしかやったことないコーダーがJavaScriptを勉強する回〜alert/getElementByIdでHello World
どうも化石です。
前回、[HTML5/CSS3のみのコーダーがMEAN環境でゲームを作るまでの話(序)](https://qiita.com/a9744c/items/0cec57e64d973da13a06)で、ひとまず基本言語のJavaScriptから勉強しようという話になりました。デン!参考書は狩野先生のこれ!
[確かな力が身につくJavaScript「超」入門 第2版](https://www.amazon.co.jp/%E7%A2%BA%E3%81%8B%E3%81%AA%E5%8A%9B%E3%81%8C%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8FJavaScript%E3%80%8C%E8%B6%85%E3%80%8D%E5%85%A5%E9%96%80-%E7%AC%AC2%E7%89%88-%E7%8B%A9%E9%87%8E-%E7%A5%90%E6%9D%B1-ebook/dp/B07Y3FJ885/ref=tmm_kin_title_0?_encoding=UTF8&qid=&sr=)読者層は、HTMLとCSSをやってきてこれ
HTMLの雛形
・testAppフォルダの作成(その他必要なファイルも作る。画像参照。)
<フォルダの階層>
testApp
/index.html(topページ)
/css(スタイルシートのフォルダ)/style.css
/js(javascriptが入るフォルダ)/test.js
/images(画像が入るフォルダ)/img1.jpg“`html
タイトル Arrow関数
#アロー関数に関する備忘録
今回はアロー関数に関する備忘録を書いてみました##アロー関数に関する基礎知識
アロー関数とはES2015(ECMAScript2015)から追加された関数の書き方。
因みにES2015とは、、、
便利な機能、構文が追加され、以前より明瞭な構文で記述できるようになった新しいバージョン参考:https://thinkit.co.jp/article/10434
##基本構文
“`JavaScript
const 変数名 = () => {
//関数実行時の処理
const num = 1;
console.log(num);
};
“`##関数宣言で書いた場合
“`JavaScript
function 関数名(){
console.log(“hello”);
};// 呼び出し
関数名();
“`##関数式で書いた場合
“`JavaScript
const 変数名 = function(){
console.log(“hello”);
};// 呼び出し
変数名();Rails + Turbolinks上のjs内でletを使うと怒られる
## turbolinks × let の相性?
かなり時間を取られたのでメモ。
##
“`html:index.html.erb
“`
このようにerbのscriptタグ内にletで変数宣言をすると、turbolinksでの一度訪れたページへの遷移の際
Chromeでは`Uncaught SyntaxError: Identifier ‘a’ has already been declared`のように怒られてしまいます。どうやらletで宣言した変数はページ遷移しても保持されたままのようで、再度同じ名前の変数を宣言しようとするために起こるようです。
varを使えば問題なく動作します。“`html:index.html.erb
“`
なぜこうなるのか、ご存知の方はコメントお待ちしております。応用カリキュラム javascript 01
####アラート表示 window.alert
“`js
window.alert(“aaa”)
// ポップアップウィンドウで表示
“`####コンソール表示 console.log
“`js
console.log(“aaa”)
// ブラウザのコンソールで表示
“`####変数宣言 let 変数名
####定数宣言 const 変数名
“`js
let aaa = “bbb”
console.log(“aaa” + aaa);
// aaabbb
“`####条件分岐 if
“`js
if (条件式1) {
処理1
} else if (条件式2) {
処理2
} else {
処理3
}
“`####配列
rubyと似てる。
“`js
宣言 let aaa = [1,2,3]
取得 aaa[1]
要素数取得 aaa.length
要素追加 aaa.push(5)
要素削除(最後の要素) aaa.pop()
要素削除(最初の要素) aaa.shift()
要素削除(インデックス,要素数) aaa.splice(n1,n2)TypeScript + Cypress + CucumberでE2Eテストをやる
## 前提
– 今回はnode.jsのパッケージマネージャーとしてyarnを使っている
– したがって本稿で使用しているコマンドは`yarn`を使っているが、使っていない方は各自`npm`に変換して読み進めてください## Cypressとは
– Cypress は、テストのセットアップ、作成、実行、デバッグなどをシンプルにするブラウザテストツール
– Seleniuimと似ているがCypressは完全にテスト目的に特化しているのが特徴## 目的
今回はCypressのプラグインにあるCucumberを導入して実際に簡単なテストを書いて回してみる※最短で目的を達成するため細かい説明は多少省きますが(必要だと思った部分は一応リンク貼っておきます)、参考サイトにを挙げておきますのでそちらを確認してみてください
## 1. インストール
本稿ではルートのディレクトリを`sample-e2e`とする
初めに`sample-e2e`ディレクトリを作成し、cypressやその依存関係をTypeScriptへトランスパイルのために必要なものをインストール“`sh
mkdir samauth0-spa-jsをnuxt流に使ってみる
# はじめに
[auth0-spa-js](https://auth0.com/docs/libraries/auth0-spa-js)が7月にリリースされました。従来のJS向けSDKとして[auth0.js](https://auth0.com/docs/libraries/auth0js/v9)の代わりに、よりシンプルに認証を行うためのライブラリです。名前の通りSPA向けのライブラリで良い感じにログインしてくれます。
2019年11月19日現在Vue用のサンプルコードは存在しているみたいです
>https://auth0.com/docs/quickstart/spa/vuejs/01-loginただ、このままnuxtで実装した場合generateする時にSSR関連で怒られたり、ミドルウェアでうまく使えなかったりするので辛いです。そこで、今回はnuxtウェイに乗っ取ってauth0-spa-jsを使ってみましょう。
# つらみを取り除くためには
はじめにでも述べた通り、auth0-spa-jsをnuxtで使うにあたって2つの辛みがあります。
* generateする時に
Web上でパスワード不要のE2E暗号化してセキュアにファイル転送をしたい
## なにを目指しているか?
多くのクラウドストレージやメールを使ったファイル転送ではクライアントとサーバー間の暗号化はされています。ですが、その多くの場合サーバー内では生のデータもしくは暗号化されていてもサーバー内で復号可能の場合が多いと思います。
そこで送受信を行う**端末間でエンドツーエンド暗号化(E2E暗号化)してサーバー側にも分からない形してサーバーを信じなくても良い、より高度なセキュリティ**を目指したいです。それと同時に**安全性かつ手軽にファイルを転送**を重視したいです。
一般にセキュリティを強めると不便になったりして、安全性と利便性にトレードオフがあると思います。このトレードオフをなるべく解決して、安全性と利便性の両立して安全性と手軽さを両立することを考えました。ユーザーのパスワードの入力不要で、手軽にセキュアに転送するために使った技術に関して後述します。### アプリケーション
![piping-ui-passwordless.mp4.opt.gif](https://qiita-image-store.s3.ap-northeast-1.amazon
Nuxtでモーダル実装時に背景がスクロールできてしまう時の対処法
# モーダルコンポーネントを作る
“`vue