- 1. TableauをWebに埋め込む技術 続
- 2. エンジニア向け生産性Tips【定期更新】
- 3. フロントエンジニア必見！開発時に使う便利なChrome拡張機能やWebサービス12選！
- 4. 課題1＿27
- 5. 【p5.js】p5.soundで音を生成してみる
- 6. 【ジョブカン】残業したくないから、後何時間働けばいいか計算するブックマークレット作った
- 7. JavaScriptで、for文の初期化部分においてletで宣言された変数は本当にループごとに異なるインスタンスになるのか
- 8. JSからAzureストレージに画像アップロードしてみる
- 9. clearTimeoutで止まらない話
- 10. レガシーなJSでコンポーネント指向っぽいことをする
- 11. 開発フレームワーク「Goqoo on kintone」を正式リリースしました！
- 12. iframeの中のaタグをクリックした際に、iframeの高さを遷移したページの高さ分に変更させる
- 13. Engineering toolkits to boost up your Data Science career
- 14. 【PHP】buttonタグのsubmitした値がPOSTされなかった話
- 15. LINE BOT経由でRaspberry Piに接続したUSBカメラの画像を取得してみる
- 16. 【Backlog 2021】 Googleさんの zx で Backlog API を扱う（JavaScript で課題を追加する）
- 17. Chrome DevTools の知っておくと便利かも機能
- 18. Reactで時間割アプリを作ってみた
- 19. 【PHP】マッチ機能
- 20. プログラミングを学習するための26のGithubオープンソース
TableauをWebに埋め込む技術 続
この記事はちゅらデータアドベントカレンダーの24日目の記事になります。
思い出すこと１年前、私はTableauをWebに埋め込む技術という記事を公開しました。
https://qiita.com/thanyu/items/3561c1e4e634b1e74697実際私はこの技術をとある案件の中で使用していたのですが、１画面上に40枚程度のグラフを埋め込んでいるという制約上、描画速度が非常に遅く実運用は耐えられないようなものとなってしまっていました。
そのため今年は大量の Tableauを Webに組み込んで、なおかつパフォーマンス改善を図るという対応を行ったため、その過程で得られた知見についてご紹介いたします。
あまりにも限られた方向けの記事となってしまいますが、Tableauを Webに組み込む場合には様々な制約があるんだなとお思っていただければ幸いです。
## そもそもなぜ遅いのか
我々の環境では、Tableau Serverと Webサーバーをそれぞれ AWS EC2上で起動し、Tableau Serverで用意した Tableauグラフを Web側に組み込むというよ
エンジニア向け生産性Tips【定期更新】
この記事は[モチベーションクラウドシリーズアドベントカレンダー2021](https://qiita.com/advent-calendar/2021/mcs)の記事です。
# この記事はなに？
一日中PCと共に過ごすエンジニアにとって、Tipsほど知りたいことはないと思います。
この記事では、社内エンジニアに「生産性をあげるTips」をテーマにアンケート調査したものをまとめました。
特に新人エンジニアの方や手っ取り早くTipsを知りたい方におすすめの記事です。
まとめたアンケートからつらつら書いてるので、順番にまとまりはありません。あらかじめご了承くださいmm※ この記事は定期的に更新されます。
# Chrome Tips
皆さんよく使うGoogle Chromeに関するTipsです。#### ショートカット
まずは王道。ショートカットから！https://support.google.com/chrome/answer/157179?hl=ja&co=GENIE.Platform%3DDesktop
#### Chrome Tab Group
こんなタブになるこ
フロントエンジニア必見！開発時に使う便利なChrome拡張機能やWebサービス12選！
これは [リンクアンドモチベーション Advent Calendar2021](https://qiita.com/advent-calendar/2021/mcs) の記事です。
# はじめに
この記事は開発時に使えるChromeの拡張機能やWebサービスを紹介していきます！基本的にすぐに導入や活用ができるものを紹介しているので、
「あ、これ使えそう！」と思ったものがあれば是非採用して使ってみて下さい！
では行ってみましょう# Chrome拡張機能編
## [Vue.js devtools ( ver.2 )](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ja)
Vue.jsを使った開発をするエンジニアで入れていない人はまず居ないと思われるツールです。
ただ直感的に使いやすいのが起因しているのか、
具体的な紹介記事があまり見当たらなかったので、少し丁寧目に説明しようと思います。※ 以下のように開発者ツールのVueタブを選択した状態
課題1＿27
`課題1＿27-樋掛来夢`
#KONICHIWA JAPAN と表示させてみる
“`Javascript
KONICHIWA JAPAN
“`
これを実行すると以下のようになる。
##作成手順
1，Visual Studio Code を起動する
2，新しいファイルを作成する、名前を 〇〇.html とする
3，上記のプログラムを書く
4，保存する
5，ファイル名の上で右クリック→”エクスプローラーで表示する”をクリック
6，結
【p5.js】p5.soundで音を生成してみる
この記事は Qiita p5js アドベントカレンダー24日目の記事です。
## これはなに
前日に書いた[【p5.js】p5.soundで音を利用した表現を描画する](https://qiita.com/shibuya01055/items/f4c1604f79f442ac3399)の続編です。
上記の記事ではpreload()で用意した音を使用しましたが、今回はp5.soundで音を生成してみる内容です。## 試してみる
### オシレーターを用意する
まずは音の出力に必須となるオシレーターを用意します。
#### オシレーターとは
シンセサイザーが音を出すためにはその元となる波形が必要になります。
オシレーターはその波形をつくってあげるもののことで、p5.soundでは`p5.OSCillator`というクラスが用意されています。#### インスタンスを用意する
p5.Oscillatorをnewしてインスタンスをsetup()内に用意します。
引数の`sine`は波形の種類のことで、
sine（正弦波）、triangle（三角形）、sawtooth（のこぎり波）、sq
【ジョブカン】残業したくないから、後何時間働けばいいか計算するブックマークレット作った
# フレックスであと何時間働けばいいのか計算したい！
フレックス制度を導入している企業増えましたね
そして、ジョブカンを使っている企業も多い事でしょう1分、1秒でも残業したくない！
そこのあなたに朗報です！## 【今月の勤務時間チェッカー】
今、勤務時間が何時間足りて居るのか、何時間不足して居るのか
平均何時間働けば、月の目標時間を達成できるのか
これらを計算することが出来ます出勤簿ページにて利用してみてください
https://ssl.jobcan.jp/employee/attendance“`javascript:bookmarklet.js
javascript:!function(){function gt(text){return $(“th:contains(‘” + text + “‘)”).next()[0].innerText.split(‘:’)[0]};sabun = gt(‘実労働時間’) – gt(‘実働日数’) * 8;if(sabun > 0){text1 = ‘現在目標より’+sabun+”時間多く働けてます”}else { text
JavaScriptで、for文の初期化部分においてletで宣言された変数は本当にループごとに異なるインスタンスになるのか
# 前回
[JavaScriptで、なぜfor文の初期化部分においてletで宣言された変数はループごとに異なるインスタンスを持ちうるのか](https://qiita.com/khond/items/2d22c6b297d58ec914f5)の続き。
# 疑問
前回の調査で、規格上では「ループ各回で環境が作成される」ことがわかった。そうすると「結構コスト高な気が…」という気がしてくる。実際、前回の例のようにクロージャがループ内で作成される場合は、ループ各回で作成されるクロージャ内でそれぞれの環境を参照しているため、ループ各回で環境の生成が必要となる。
“`javascript
const functions = [];
for (let i = 0; i < 3; i++) { functions.push(() => console.log(i));
}
functions[0]();
functions[1]();
functions[2]();
“`だが、以下のようなfor
“`javascript
for (let i = 0; i < 3; i++) {
JSからAzureストレージに画像アップロードしてみる
さて、今回はAzureのストレージにJSから画像上げるのってどうやるんだ？？
と言うのが分からなかったのでやってみたと言う話です。## 結論
手順は以下
– Azure Storage Blobで先ず箱を作る
– アップロード先のコンテナーを作る
– CORSの設定をする
– Shared Access Signature (SAS) トークンを作成する
– JSを書いて実行する※殆どの手順はMicrosoft公式ドキュメント [https://docs.microsoft.com/ja-jp/azure/storage/blobs/storage-quickstart-blobs-javascript-client-libraries-legacy](https://docs.microsoft.com/ja-jp/azure/storage/blobs/storage-quickstart-blobs-javascript-client-libraries-legacy) 通りです！ｗ
## Azure Storage Blobで先ず箱を作る
のコールバックに[async](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function)関数を渡して再帰呼び出しを行う場合、[clearTimeout](https://developer.mozilla.org/ja/docs/Web/API/clearTimeout)で再帰呼び出しが止まらない話**」を書きたいと思います。
※モチベーション元は[requestAnimationFrame](https://developer.mozilla.org/ja/docs/Web/API/Window/requestAnimationFrame)の再帰呼び出しですが、止まらなかった原因は同じです# モチベーション
ある時、下記のような再帰処理を、画面の描画更新用に書
レガシーなJSでコンポーネント指向っぽいことをする
この記事はトラストバンク Advent Calender 2021の24日目の記事です。
メリークリスマス:santa:
12月24日、クリスマスイヴです。しかも金曜日！まさにThanks God, it’s Friday.って感じですね。まあ特に予定はありませんが…この記事では、JSフレームワークとか無しで力技でコンポーネント指向を実現したという体験談になります。
イマドキのフロントエンドの話ではないので、そこら辺を期待されている方にとっては参考にならないだろうなという感じの内容になります。# TL;DR
* 生JSでWeb Componentsを使用せず、コンポーネント指向っぽい感じで設計と実装をやってみた
* classでコンポーネントを作り、子から親へのstateの送信は、CustomEventとdispatchEvent()で無理やり作った
* コード量は増えたが、メンテナンス性は上がった（多分）# 前提
ここからは前提として、ふるさとチョイスのフロントエンドについて少し紹介します。## JSフレームワークは使っていない
2021年12月現在、ふるさとチョイ
開発フレームワーク「Goqoo on kintone」を正式リリースしました！
# はじめに
kintoneプログラマーの赤座です！
クリスマスイブにアドベントカレンダー書かせていただきます :santa:思い起こせば3年前、2018年11月にkintone hack NIGHTに登壇して、kintoneカスタマイズ用の開発フレームワーク「Goqoo on kintone」を紹介したのでした。
結果はブービーでしたが、アスキーさんの記事でじっくり触れていただきました。
https://ascii.jp/elem/000/001/775/1775872/3/
スライドはコチラ。
この時点でGoqooはまだまだ荒削りの超ベータ版で、プレゼンも「自分語り」が中心でした。
どんどん洗練させていく予定でいたのですが、翌年に三人目の娘が生まれてから、とにかく本業と子育てだけで必死で、Goqooの開発はずっと止まってしまっておりました。
その間に時は流れ、今やTypeScriptが当たり前の世界となっております。三女が二歳に
iframeの中のaタグをクリックした際に、iframeの高さを遷移したページの高さ分に変更させる
1. iframe内のaタグをクリック
2. iframe内のページ遷移
3. ページの高さによって、元ページでの高さを変更のような挙動を実装した時にiframeについて理解することができたので、その時に行ったことを記載します。
**注意！！**
クロスドメイン（親ページと子ページのドメインが異なる）の場合、この方法は適用できない可能性があります。**参考**
https://tm-progapp.hatenablog.com/entry/2021/05/10/220210
# iframeタグとは
> `