JavaScript関連のことを調べてみた │ f@ctor

1. TensorFlow.jsを使用して骨格推定。骨格のライン推定 with TensorFlow.js
2. Google-gravity本当に検索できるようにした話
3. Lambdaからタイムアウト時間を取得する
4. TensorFlow.jsを使用してフェイストラッキング。Face Tracking with TensorFlow.js
5. まるで使徒。トーラスをランダムノイズで変形させるアニメーション。
6. 4次元サイン関数のテクスチャを張り付けた球体ジオメトリ。
7. 加速器　陽子の衝突ゲーム。ボールの衝突後にパーティクルを生成。
8. メニュー開閉メモ
9. Prismaでviewを操作できるようにする
10. JavaScript: 配列上書きの速度比較
11. JavaScriptで日付の繰り返し処理を行う方法(年・月・日)
12. 【JavaScript】オブジェクトの存在チェックの方法アイデア
13. 覚えると便利なJavaScriptのイベントリスナーメソッドまとめ【番外編】
14. これまでのコードを最大限に活用！ViteでJavaScriptをライブラリー化してみよう
15. JavaScriptの関数について【入門編③】
16. Next.js で Supabase Auth がどんな仕組みで動いてるか調べました
17. 【JavaScript】ABC370まとめ（A~D）
18. JavaScriptの基本文法【入門編②】
19. パソコンのチュートリアルサイトを作って公開する方法(是非皆さんも作ってみて下さい)
20. Next.jsとjson-serverとsupabase

TensorFlow.jsを使用して骨格推定。骨格のライン推定 with TensorFlow.js

![スクリーンショット 2024-09-10 145927.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838874/8c994ef0-1e3d-3907-4f45-254b31f2ddf9.png)

![ダウンロード (20).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838874/622cbbc7-d8b6-ff01-bba0-507a6e7934e2.png)

![ダウンロード (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838874/56bd7b0d-170b-533d-7603-ff14c9592903.png)

### TensorFlow.jsを使用して骨格推定。骨格のライン推定 with TensorFlow.js

“`html

元記事を表示

Google-gravity本当に検索できるようにした話

どうもお久しぶりですAtsu1209です。
今回はGooglegrabityというサイトで実際にGoogle検索ができるようにしたいと思います。

# Google grabityとは
Google grabityとは検索欄やロゴが重力を帯びて落っこちてくるお遊びサイトです。

サイトURL

https://mrdoob.com/projects/chromeexperiments/google-gravity/

# 今回やりたいこと
もちろんこのサイトはお遊びサイトなので実際には検索できません。
なので、実際に検索できるようにして重力要素 + 検索ができるとても面白いサイトにしていきます。

:::note warn
##### 注意
たとえお遊びでもコードを書き換えたものを実際に公開してしまうと、
著作権に引っかかってしまう可能性があるので気をつけましょう。
私はローカルで楽しむ前提で作りました。
:::

# 方法
方法は至って簡単です。
Google検索はURLに仕掛けがあって、
`https://www.google.com/search?q=`の`q=`の後ろに検索し

元記事を表示

Lambdaからタイムアウト時間を取得する

### Lambdaからタイムアウト時間を取得する
以前実装した内容でLambdaからとあるAPIを呼び出すというものがありました。
そのAPIは返答に時間がかかる場合があり、Lambdaのタイムアウト時間を超過してしまうこともあり、対策を打ちました。
対策としてはLambdaのタイムアウト時間に到達する前にカスタムのエラーを出力するようにしました。ここでLambdaのfunction内でタイムアウト時間を取得する必要があったので共有します。

### 実際のコード
* 呼び出される側
`LambdaClient`と`GetFunctionCommand `を使用してLambdaの情報の詳細を取得していきます。
※`rccApiError`はカスタムのエラーなので気にしないでください
`getLambdaDetails`関数でLambda関数の詳細を取得しますが、取得する際にLambdaの関数名を与えます。
後は`send`コマンドを使った結果をreturnします。
“`javascript
const { LambdaClient, GetFunctionCommand } = r

元記事を表示

TensorFlow.jsを使用してフェイストラッキング。Face Tracking with TensorFlow.js

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838874/6a84e237-1339-78e5-a77f-e24d3e0ca9b8.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838874/1a6cc781-b0aa-2b39-80bb-f64891bb6d64.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838874/a8151495-bf47-1436-65b8-3aae487a75fc.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838874/81e889df-0b1e-62de-31a4-86e2086cbf4e.png)

元記事を表示

まるで使徒。トーラスをランダムノイズで変形させるアニメーション。

![スクリーンショット 2024-09-10 050433.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838874/8c2af5a2-1771-bc04-ce7d-ad9039faf1b3.png)

![スクリーンショット 2024-09-10 050259.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838874/48df2524-a84d-cbb7-5d8d-36def2487c48.png)

![スクリーンショット 2024-09-10 050314.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838874/7c1fd6f4-ef43-3a46-d394-7d4169d57ec1.png)

![スクリーンショット 2024-09-10 050406.png](https://qiita-image-stor

元記事を表示

4次元サイン関数のテクスチャを張り付けた球体ジオメトリ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838874/eec5a799-3deb-12dd-fc77-cf6566bb5aec.png)

![スクリーンショット 2024-09-10 045500.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838874/30e18357-a07f-e0d0-71b6-e241ef901f0b.png)

![スクリーンショット 2024-09-10 045514.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838874/d9aaa9c5-4377-730c-ccf3-ad535f7266c2.png)

![スクリーンショット 2024-09-10 045529.png](https://qiita-image-store.s3.ap-northeast-1.

元記事を表示

加速器　陽子の衝突ゲーム。ボールの衝突後にパーティクルを生成。

![スクリーンショット 2024-09-10 044507.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838874/3fa61784-e305-ef08-6493-aa90498b5875.png)

![スクリーンショット 2024-09-10 044450.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838874/79c49448-63e7-44a7-76c3-99066321795f.png)

スペースキー押下でランダム再描画です。

“`html

3D Ball Collision Simulation<</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>Python</div> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>初心者</div> <div class='tag-cloud-link'>ポエム</div> <div class='tag-cloud-link'>ChatGPT</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/tetsutakamurata76/items/d0fda30c159dc039eae5'>元記事を表示</a></div> <h3 id="outline__8"><a href='https://qiita.com/kenji123/items/7a86de99be5b51906bfe'>メニュー開閉メモ</a></h3> <blockquote><p>## はじめに<br /> メニュー開閉について対応することがあり、chatgpt先生に確認し見直しました。<br /> こういう確認がすぐに動くコードで確認できるのはありがたいことです。<br /> 速習メモになりますが記載させて頂きます。</p> <p>## メニュー開閉</p> <p>### やりたいこと<br /> 以下のような表示で対応し、初期は大項目2と大項目5で項目まで表示されている<br /> 大項目クリック後、その項目の表が表示、非表示になる<br /> 大項目1<br /> -項目1-1<br /> -項目1-2<br /> 大項目2<br /> -項目2-1<br /> -項目2-2<br /> 大項目3<br /> -項目3-1<br /> -項目3-2<br /> 大項目4<br /> -項目4-1<br /> -項目4-2<br /> 大項目5<br /> -項目5-1<br /> -項目5-2</p> <p>以下のように「大項目1」「大項目2」などの大項目をクリックすると、それぞれの項目（項目1-1、項目1-2など）が表示・非表示になるようなコードを作成しました。初期状態では、「大項目2」と「大項目5」の項目が表示される設定にしています。</p> <p>### HTML</p> <p>“`html<br /> <!DOCTYPE html><br /> <html lang="ja"><br /> <head><br /> <meta charset="UTF-8"><br /> <meta</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>CSS</div> <div class='tag-cloud-link'>JavaScript</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/kenji123/items/7a86de99be5b51906bfe'>元記事を表示</a></div> <h3 id="outline__9"><a href='https://qiita.com/show-ei/items/572e7b872c37e1d92aec'>Prismaでviewを操作できるようにする</a></h3> <blockquote><p># はじめに<br /> Prismaでviewを操作しようと思ったのですが、意外に記事が少なかったので実装方法を共有します。</p> <p>ちなみに公式ドキュメントを確認するとしっかりと記述がありますが、より分かりやすく説明することを心がけます。</p> <p>[公式ドキュメント](https://www.prisma.io/docs/orm/prisma-schema/data-model/views)</p> <p># 初期設定<br /> `schema.prisma`ファイルに`previewFeatures = [“views”]`を設定する</p> <p>“`diff_c:schema.prisma:<br /> generator client {<br /> provider = “prisma-client-js”<br /> + previewFeatures = [“views”]<br /> }<br /> “`</p> <p># コマンドなどでviewを作成しましょう<br /> :::note info<br /> prismaから直接viewを追加することは2024年9月時点ではできないようです。<br /> :::<br /> viewを追加しましょう ※以下イメージです。<br /> [mysqlでのview作成方法](http</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>SQL</div> <div class='tag-cloud-link'>view</div> <div class='tag-cloud-link'>TypeScript</div> <div class='tag-cloud-link'>prisma</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/show-ei/items/572e7b872c37e1d92aec'>元記事を表示</a></div> <h3 id="outline__10"><a href='https://qiita.com/mashuel/items/75c0a6a4adb0fae32939'>JavaScript: 配列上書きの速度比較</a></h3> <blockquote><p>配列の広範囲にわたって値を上書きする速度を比較する企画</p> <p># set + subarray vs copyWithin<br /> C言語で例えると`memcpy`のような処理。`set`と`subarray`は古参、`copyWithin`は新参者。配列の前半部に後半部を複写する処理で比較してみる<br /> “`js<br /> for(let loop=1<<20,size=2,n=10;n--;loop/=2,size*=4){ let A=new Uint8Array(size),t=new Date; for(let a=loop;a--;)A.set(A.subarray(size>>1,size),0);<br /> t=new Date-t;<br /> let u=new Date;<br /> for(let a=loop;a–;)A.copyWithin(0,size>>1,size);<br /> console.log(loop,size,t,new Date-u)<br /> }<br /> “`<br /> ## Chrome</p> <table> <tr> <th>loop</p> <th>size</p> <th>set+subarray</p> <th>copyWithin</p> <tr><</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>配列</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/mashuel/items/75c0a6a4adb0fae32939'>元記事を表示</a></div> <h3 id="outline__11"><a href='https://qiita.com/engineerhikaru/items/6162550286472985ef57'>JavaScriptで日付の繰り返し処理を行う方法(年・月・日)</a></h3> <blockquote><p>:::note warn<br /> ある日付からある日付までを繰り返し処理する方法を記しています。<br /> :::</p> <p>## 年を繰り返し処理する</p> <p>“`bash:想定される出力結果<br /> 2022/01/01<br /> 2023/01/01<br /> 2024/01/01<br /> “`</p> <p>### 素のJavaScriptのみの場合</p> <p>“`javascript:main.js<br /> const startDate = new Date(‘2022’);<br /> const endDate = new Date(‘2024’);</p> <p>for (let d = startDate; d <= endDate; d.setFullYear(d.getFullYear() + 1)) { const year = d.getFullYear().toString(); const month = (d.getMonth() + 1).toString().padStart(2, '0'); const day = d.getDate().toString().padStart(2, '0'); console.log(`${year}/$</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>TypeScript</div> <div class='tag-cloud-link'>date-fns</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/engineerhikaru/items/6162550286472985ef57'>元記事を表示</a></div> <h3 id="outline__12"><a href='https://qiita.com/_nag/items/7c456d6a1b0b4a7fd2c5'>【JavaScript】オブジェクトの存在チェックの方法アイデア</a></h3> <blockquote><p># 背景<br /> JavaScriptを書いていて、オブェクトが存在しないうちに要素を参照してエラーになってしまう。そういった事態を避けるためには、存在チェックをする必要があります。今回は、バグ修正を行う中で存在チェックの方法について調べたので、それらの方法と使うべき場面について私見を述べます。</p> <p>:::note<br /> 選択肢の根拠となったJavaScriptの仕様等について最初に書きます。結論から早く見たい！という方は[判定方法アイデア](#判定方法アイデア)からどうぞ<br /> :::</p> <p>:::note warn<br /> すべてのパターンを網羅したわけではないので、あくまでもアイデアとして活用していただけると幸いです<br /> :::</p> <p># 目次<br /> – [前提](#前提)<br /> – [falsy（偽値）](#falsy偽値)<br /> – [論理積](#論理積)<br /> – [等価演算子と厳密等価演算子](#等価演算子と厳密等価演算子)<br /> – [判定方法アイデア](#判定方法アイデア)<br /> – 1.[`undefined`との比較](#1-undefinedとの比較)<br /> – 2.[`undefined`がfalsyで</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>条件分岐</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/_nag/items/7c456d6a1b0b4a7fd2c5'>元記事を表示</a></div> <h3 id="outline__13"><a href='https://qiita.com/uukasuzuki_/items/7c32a491f557d3a4eb84'>覚えると便利なJavaScriptのイベントリスナーメソッドまとめ【番外編】</a></h3> <blockquote><p># はじめに<br /> 今回は、JavaScriptでよく使われるイベントリスナーメソッドについてまとめていきます。どのようなパターンで、どのような場面で活用すればいいか？を書き出しいます。</p> <p># JavaScriptのメソッドとは<br /> JavaScriptのメソッドとは、**オブジェクトに関連づけられた関数のことです**。オブジェクトのプロパティとして定義され、オブジェクトのデータを操作するために使われます。オブジェクトや配列、文字列などに組み込まれたメソッドも多く、JavaScriptのコードで頻繁に使用されます。</p> <p># イベントリスナーメソッドとは<br /> JavaScriptのイベントリスナーのメソッドは、**ユーザーの操作やブラウザの動作に応じて特定の関数（イベントハンドラ）を実行するために使用されます。**</p> <p>## イベントリスナーの追加<br /> “`js<br /> /* イベントリスナーメソッドの基本構文 */<br /> element.addEventListener(‘イベント名’, 関数, オプション);</p> <p>/* 例題 */<br /> const button = document.getElementById(‘myBu</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>用語</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/uukasuzuki_/items/7c32a491f557d3a4eb84'>元記事を表示</a></div> <h3 id="outline__14"><a href='https://qiita.com/takatama/items/f70a1aad7054937443e4'>これまでのコードを最大限に活用！ViteでJavaScriptをライブラリー化してみよう</a></h3> <blockquote><p>ウェブ開発で、過去に作ったUI部品やアルゴリズムを再利用できると便利ですよね！今回は、Viteを使って「Hello World」を表示するシンプルなライブラリーを作成し、どのようにして他のプロジェクトに組み込むかを解説します。</p> <p># はじめに</p> <p>再利用可能なライブラリーを作っておくと、コードをメンテナンスしたり、他プロジェクトでの応用するときに非常に役立ちます。この記事では、Viteを使用して、背景色を虹色に輝かせる「Hello World」を表示するJavaScriptライブラリーの作り方をステップ・バイ・ステップで紹介します。</p> <p>この記事に記載したソースコードはこちらで公開しています。</p> <p>https://github.com/takatama/hello-lib</p> <p># 1. プロジェクトのセットアップ</p> <p>まず、Viteを使ってプロジェクトをセットアップします。以下の手順に従って進めてください。</p> <p>## Viteのインストール</p> <p>“`console<br /> npm init vite@latest hello-lib<br /> “`</p> <p>途中で選択肢が出てきます。今回は素の（Valnilla）Jav</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>vite</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/takatama/items/f70a1aad7054937443e4'>元記事を表示</a></div> <h3 id="outline__15"><a href='https://qiita.com/uukasuzuki_/items/bd556c9d5c2b445e6bcb'>JavaScriptの関数について【入門編③】</a></h3> <blockquote><p># はじめに<br /> 今回は、JavaScriptの関数についてまとめていきます。関数は再利用可能なコードのブロックを定義するために使用されます。関数を使うことで、コードを整理し、再利用性やメンテナンス性を向上させることができます。</p> <p># 関数の定義について<br /> 関数はfunctionキーワードを使って定義します。<br /> “`js<br /> function 関数名(引数1, 引数2, …) {<br /> // 実行するコード<br /> return 戻り値;<br /> }</p> <p>/* 例題 */<br /> function greet(name) {<br /> return `Hello, ${name}!`;<br /> }<br /> console.log(greet(“Taro”)); // “Hello, Taro!”<br /> “`<br /> ## 関数の呼び出し<br /> 関数を定義した後は、その関数を名前を使って呼び出します。<br /> “`js<br /> 関数名(引数1, 引数2, …);</p> <p>let result = greet(“Bob”);<br /> console.log(result); // “Hello, Bob!”<br /> “`<br /> ## 引数と戻り値<br /> – 引数（Parameters）: 関</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>関数</div> <div class='tag-cloud-link'>勉強メモ</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/uukasuzuki_/items/bd556c9d5c2b445e6bcb'>元記事を表示</a></div> <h3 id="outline__16"><a href='https://qiita.com/megmogmog1965/items/37d7a4a3335f2758c861'>Next.js で Supabase Auth がどんな仕組みで動いてるか調べました</a></h3> <blockquote><p>[Vercel]:https://vercel.com/<br /> [Supabase]:https://supabase.com/<br /> [Supabase Auth]:https://supabase.com/docs/guides/auth<br /> [Next.js]:https://nextjs.org/<br /> [Supabase Auth > Getting Started > Next.js]:https://supabase.com/docs/guides/auth/quickstarts/nextjs<br /> [supabase-js]:https://github.com/supabase/supabase-js<br /> [Route Handler]:https://nextjs.org/docs/app/building-your-application/routing/route-handlers<br /> [@supabase/ssr]:https://supabase.com/docs/guides/auth/server-side/nextjs</p> <p>最近はいろんな開発者向けサービスが出てきてすごく便利ですよね。</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>PostgreSQL</div> <div class='tag-cloud-link'>OAuth</div> <div class='tag-cloud-link'>Next.js</div> <div class='tag-cloud-link'>Supabase</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/megmogmog1965/items/37d7a4a3335f2758c861'>元記事を表示</a></div> <h3 id="outline__17"><a href='https://qiita.com/bfs/items/9eb7eaa73c64f2316d20'>【JavaScript】ABC370まとめ（A~D）</a></h3> <blockquote><p>AtCoder Beginner Contest 370</p> <p>https://atcoder.jp/contests/abc370</p> <p>A~Cの3完（32分、2ペナ）でした。<br /> 605perfでレートは714->703（-11）です。<br /> 今回は標準の順序付き集合（C++の`std::set`）が用意されていないJavaScripterにとって辛い回になったのではないでしょうか。<br /> この記事ではA~Cの詳細とDの概要について簡単にまとめます。</p> <p># A – Raise Both Hands<br /> https://atcoder.jp/contests/abc370/tasks/abc370_a</p> <p>以下の通りに出力すればよいです。<br /> | L | R | 出力 |<br /> |:-:|:-:|:-:|<br /> | 0 | 0 | Invalid |<br /> | 0 | 1 | No |<br /> | 1 | 0 | Yes |<br /> | 1 | 1 | Invalid |</p> <p>“`js<br /> function Main(input) {<br /> input = input.split(“\n”).map((line) => line.</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>AtCoder</div> <div class='tag-cloud-link'>競技プログラミング</div> <div class='tag-cloud-link'>AtCoderBeginnerContest</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/bfs/items/9eb7eaa73c64f2316d20'>元記事を表示</a></div> <h3 id="outline__18"><a href='https://qiita.com/uukasuzuki_/items/a8a1b46a285a0da07b00'>JavaScriptの基本文法【入門編②】</a></h3> <blockquote><p># はじめに<br /> 今回は、JavaScriptの基本文法についてまとめていきます。WebクリエイターボックスのManaさんの書籍、「1冊ですべて身につくJavaScript入門講座」を参考に、勉強していきます。</p> <blockquote class="wp-embedded-content" data-secret="rk8fWf6158"><p><a href="https://www.sbcr.jp/product/4815615758/">1冊ですべて身につくJavaScript入門講座</a></p></blockquote> <p><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" title="“1冊ですべて身につくJavaScript入門講座” — SBクリエイティブ" src="https://www.sbcr.jp/product/4815615758/embed/#?secret=9rix57QCRo#?secret=rk8fWf6158" data-secret="rk8fWf6158" width="600" height="338" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p> <p># JavaScriptのコード解説<br /> 下記では、JavaScriptの基本中の基本である文法についてまとめています。今後はこれらを基に、コードを組んでアニメーションを起こそうと思います。<br /> ## 変数<br /> “`js<br /> /* 変数 */<br /> let y = 20; // 昔の標準だったvarに代わり、現在よく使われる方法。<br /> const z = 30; // 再代入ができない定数を宣言する。変更が不要な値には、これを使用する。<br /> “`<br /> “`js<br /> console.log(); // JavaScriptでデバッグや情報の出力を行うためのメソッドです。<br /> “`<br /> – console.log();では以下の４つを目的に使用されます。<br /> 1. コードの実行時に変数の値や処理の流れを確認するために使用します。<br /> 2. ユーザー</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>初心者</div> <div class='tag-cloud-link'>勉強メモ</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/uukasuzuki_/items/a8a1b46a285a0da07b00'>元記事を表示</a></div> <h3 id="outline__19"><a href='https://qiita.com/uni928/items/f9c0f64f43bdc21d6610'>パソコンのチュートリアルサイトを作って公開する方法(是非皆さんも作ってみて下さい)</a></h3> <blockquote><p>今回はサイト作成の練習として<br /> パソコンのチュートリアルサイトを<br /> 作って公開してみようと思います。</p> <p>完成品は下記の URL で体験できます。</p> <p>[パソコンのチュートリアルサイト](https://uni928.github.io/SephirothPCTutorial/page1.html)<br /> [スマートフォンのチュートリアルサイト](https://uni928.github.io/SephirothSmartPhoneTutorial/page1.html)</p> <p>自分のホームページや SNS で活動している人は<br /> ネタとして一緒にパソコンのチュートリアルサイトを作ってみませんか？</p> <p>これから作り方を説明していきます。</p> <p>***</p> <p>サイトを作る</p> <p>まずはサイトを作っていこうと思います。<br /> 基本的には「テキスト」「説明画像」「次へ前へボタン」の<br /> 3個を各ページに配置したいと思います。</p> <p>下記のソースを編集して<br /> 自分なりのパソコンのチュートリアルサイトを<br /> 作ってみて下さい。</p> <p>下記のソースを改変するだけなら<br /> html の初歩の知識だけで作成する事が出来ます。</p> <p>10 ページ以上作ると良いと思いま</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>GitHub</div> <div class='tag-cloud-link'>初心者</div> <div class='tag-cloud-link'>初心者向け</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/uni928/items/f9c0f64f43bdc21d6610'>元記事を表示</a></div> <h3 id="outline__20"><a href='https://qiita.com/pix_shimitomo/items/b3a21dc2afe29df12e1b'>Next.jsとjson-serverとsupabase</a></h3> <blockquote><p># データの受け渡し<br /> ## json-server<br /> ### データを作成する<br /> “`src / data / posts.json<br /> {<br /> “posts”:[<br /> {<br /> “id”:”1″,<br /> “title”:”Next.js”,<br /> “content”:”ヤッホーーーー”,<br /> “createdAT”:”2024-08-27″<br /> },<br /> {<br /> “id”:”2″,<br /> “title”:”プログラミングわからん”,<br /> “content”:”これほんとにできるようになるのかな”,<br /> “createdAT”:”2024-08-26″<br /> }<br /> ]<br /> }<br /> “`</p> <p>### json-serverを立ち上げる<br /> 複数回立ち上げるのでスクリプトを用意して立ち上げやすいようにする。<br /> またNext.jsで3000版を使用しているので、3001番を指定している。<br /> “`package.json<br /> “scripts”: {<br /> ~<br /> “json-server”:”json-server –watch src</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>json-server</div> <div class='tag-cloud-link'>React</div> <div class='tag-cloud-link'>Next.js</div> <div class='tag-cloud-link'>Supabase</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/pix_shimitomo/items/b3a21dc2afe29df12e1b'>元記事を表示</a></div> </div> </section>  <aside> <ul class="socialList"> <li class="socialList__item"><a class="socialList__link icon-facebook" href="http://www.facebook.com/sharer.php?u=https%3A%2F%2Fmiofactor.com%2F2024%2F09%2F10%2Fpost-36646%2F&t=JavaScript%E9%96%A2%E9%80%A3%E3%81%AE%E3%81%93%E3%81%A8%E3%82%92%E8%AA%BF%E3%81%B9%E3%81%A6%E3%81%BF%E3%81%9F" target="_blank" title="Facebookで共有"></a></li><li class="socialList__item"><a class="socialList__link icon-twitter" href="http://twitter.com/intent/tweet?text=JavaScript%E9%96%A2%E9%80%A3%E3%81%AE%E3%81%93%E3%81%A8%E3%82%92%E8%AA%BF%E3%81%B9%E3%81%A6%E3%81%BF%E3%81%9F&https%3A%2F%2Fmiofactor.com%2F2024%2F09%2F10%2Fpost-36646%2F&url=https%3A%2F%2Fmiofactor.com%2F2024%2F09%2F10%2Fpost-36646%2F" target="_blank" title="Twitterで共有"></a></li><li class="socialList__item"><a class="socialList__link icon-line" href="http://line.naver.jp/R/msg/text/?JavaScript%E9%96%A2%E9%80%A3%E3%81%AE%E3%81%93%E3%81%A8%E3%82%92%E8%AA%BF%E3%81%B9%E3%81%A6%E3%81%BF%E3%81%9F%0D%0Ahttps%3A%2F%2Fmiofactor.com%2F2024%2F09%2F10%2Fpost-36646%2F" target="_blank" title="LINEで送る"></a></li></ul> </aside>   <aside class="widgetPost widgetPost-bottom"><aside class="widget widget-post"><h2 class="heading heading-primary">タグ</h2><div class="tagcloud"><a href="https://miofactor.com/tag/%e3%81%9d%e3%81%ae%e4%bb%96/" class="tag-cloud-link tag-link-13 tag-link-position-1" style="font-size: 8pt;" aria-label="その他 (1個の項目)">その他</a></div> </aside></aside>   <aside class="related"><h2 class="heading heading-primary">関連する記事</h2><ul class="related__list"> <li class="related__item"> <a class="related__imgLink" href="https://miofactor.com/2022/07/30/post-21194/" title="Rails関連のことを調べてみた2022年07月30日"> <img src="https://miofactor.com/wp-content/uploads/2019/10/rails-150x150.png" alt="Rails関連のことを調べてみた2022年07月30日" width="150" height="150" > </a> <h3 class="related__title"> <a href="https://miofactor.com/2022/07/30/post-21194/">Rails関連のことを調べてみた2022年07月30日</a> <span class="icon-calendar">2022.07.30</span> </h3> <p class="related__contents">目次 1. Active Storageのしくみ2. プルダウンのフォームでプレースホルダーのようなものを実装する方法（Rails）3. UAからGA[…]</p> </li> <li class="related__item"> <a class="related__imgLink" href="https://miofactor.com/2023/01/09/post-25710/" title="Lambda関連のことを調べてみた2023年01月09日"> <img src="https://miofactor.com/wp-content/uploads/2019/10/lambda-150x150.png" alt="Lambda関連のことを調べてみた2023年01月09日" width="150" height="150" > </a> <h3 class="related__title"> <a href="https://miofactor.com/2023/01/09/post-25710/">Lambda関連のことを調べてみた2023年01月09日</a> <span class="icon-calendar">2023.01.09</span> </h3> <p class="related__contents">目次 1. 【AWS】基本的なWebアプリケーションをクイック開発する2. EC2インスタンスの自動起動停止を、より柔軟にしてみた（Lambda）3.[…]</p> </li> <li class="related__item"> <a class="related__imgLink" href="https://miofactor.com/2022/03/05/post-17172/" title="Python3関連のことを調べてみた2022年03月05日"> <img src="https://miofactor.com/wp-content/uploads/2019/10/python-150x150.png" alt="Python3関連のことを調べてみた2022年03月05日" width="150" height="150" > </a> <h3 class="related__title"> <a href="https://miofactor.com/2022/03/05/post-17172/">Python3関連のことを調べてみた2022年03月05日</a> <span class="icon-calendar">2022.03.05</span> </h3> <p class="related__contents">目次 0.0.1. 40 代おっさんPythonを使って自分あてに指定したLINEを送る0.0.2. kaggle内でnotebookを作る0.0.3[…]</p> </li> </ul></aside>      </main>   <div class="l-sidebar"> <aside class="widget"> <div class="searchBox"> <form class="searchBox__form" method="get" target="_top" action="https://miofactor.com/" > <input class="searchBox__input" type="text" maxlength="50" name="s" placeholder="記事検索"><button class="searchBox__submit icon-search" type="submit" value="search"> </button> </form> </div></aside><aside class="widget"><h2 class="heading heading-widget">Category</h2> <ul> <li class="cat-item cat-item-1"><a href="https://miofactor.com/category/other/">OTHER</a> </li> </ul> </aside><aside class="widget"><h2 class="heading heading-widget">Back number</h2> <ul> <li><a href='https://miofactor.com/2024/09/'>2024年9月</a></li> <li><a href='https://miofactor.com/2024/08/'>2024年8月</a></li> <li><a href='https://miofactor.com/2024/07/'>2024年7月</a></li> <li><a href='https://miofactor.com/2024/06/'>2024年6月</a></li> <li><a href='https://miofactor.com/2024/05/'>2024年5月</a></li> <li><a href='https://miofactor.com/2024/04/'>2024年4月</a></li> <li><a href='https://miofactor.com/2024/03/'>2024年3月</a></li> <li><a href='https://miofactor.com/2024/02/'>2024年2月</a></li> <li><a href='https://miofactor.com/2024/01/'>2024年1月</a></li> <li><a href='https://miofactor.com/2023/12/'>2023年12月</a></li> <li><a href='https://miofactor.com/2023/11/'>2023年11月</a></li> <li><a href='https://miofactor.com/2023/10/'>2023年10月</a></li> <li><a href='https://miofactor.com/2023/09/'>2023年9月</a></li> <li><a href='https://miofactor.com/2023/08/'>2023年8月</a></li> <li><a href='https://miofactor.com/2023/07/'>2023年7月</a></li> <li><a href='https://miofactor.com/2023/04/'>2023年4月</a></li> <li><a href='https://miofactor.com/2023/03/'>2023年3月</a></li> <li><a href='https://miofactor.com/2023/02/'>2023年2月</a></li> <li><a href='https://miofactor.com/2023/01/'>2023年1月</a></li> <li><a href='https://miofactor.com/2022/12/'>2022年12月</a></li> <li><a href='https://miofactor.com/2022/11/'>2022年11月</a></li> <li><a href='https://miofactor.com/2022/10/'>2022年10月</a></li> <li><a href='https://miofactor.com/2022/09/'>2022年9月</a></li> <li><a href='https://miofactor.com/2022/08/'>2022年8月</a></li> <li><a href='https://miofactor.com/2022/07/'>2022年7月</a></li> <li><a href='https://miofactor.com/2022/06/'>2022年6月</a></li> <li><a href='https://miofactor.com/2022/05/'>2022年5月</a></li> <li><a href='https://miofactor.com/2022/04/'>2022年4月</a></li> <li><a href='https://miofactor.com/2022/03/'>2022年3月</a></li> <li><a href='https://miofactor.com/2022/02/'>2022年2月</a></li> <li><a href='https://miofactor.com/2022/01/'>2022年1月</a></li> <li><a href='https://miofactor.com/2021/12/'>2021年12月</a></li> <li><a href='https://miofactor.com/2021/11/'>2021年11月</a></li> <li><a href='https://miofactor.com/2021/10/'>2021年10月</a></li> <li><a href='https://miofactor.com/2021/09/'>2021年9月</a></li> <li><a href='https://miofactor.com/2021/08/'>2021年8月</a></li> <li><a href='https://miofactor.com/2021/07/'>2021年7月</a></li> <li><a href='https://miofactor.com/2021/06/'>2021年6月</a></li> <li><a href='https://miofactor.com/2021/05/'>2021年5月</a></li> <li><a href='https://miofactor.com/2021/04/'>2021年4月</a></li> <li><a href='https://miofactor.com/2021/03/'>2021年3月</a></li> <li><a href='https://miofactor.com/2021/02/'>2021年2月</a></li> <li><a href='https://miofactor.com/2021/01/'>2021年1月</a></li> <li><a href='https://miofactor.com/2020/12/'>2020年12月</a></li> <li><a href='https://miofactor.com/2020/11/'>2020年11月</a></li> <li><a href='https://miofactor.com/2020/10/'>2020年10月</a></li> <li><a href='https://miofactor.com/2020/09/'>2020年9月</a></li> <li><a href='https://miofactor.com/2020/08/'>2020年8月</a></li> <li><a href='https://miofactor.com/2020/07/'>2020年7月</a></li> <li><a href='https://miofactor.com/2020/06/'>2020年6月</a></li> <li><a href='https://miofactor.com/2020/05/'>2020年5月</a></li> <li><a href='https://miofactor.com/2020/04/'>2020年4月</a></li> <li><a href='https://miofactor.com/2020/03/'>2020年3月</a></li> <li><a href='https://miofactor.com/2020/02/'>2020年2月</a></li> <li><a href='https://miofactor.com/2020/01/'>2020年1月</a></li> <li><a href='https://miofactor.com/2019/12/'>2019年12月</a></li> <li><a href='https://miofactor.com/2019/11/'>2019年11月</a></li> <li><a href='https://miofactor.com/2019/10/'>2019年10月</a></li> </ul> </aside> </div>  </div>  <div class="categoryBox"> <div class="container"> <h2 class="heading heading-primary"> <span class="heading__bg u-txtShdw bgc-darkgray">OTHER</span>カテゴリの最新記事 </h2> <ul class="categoryBox__list"> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36894/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/ios-554x410.png" alt="iOS関連のことを調べてみた" width="554" height="410" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36894/">iOS関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36890/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/js-554x410.png" alt="JavaScript関連のことを調べてみた" width="554" height="410" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36890/">JavaScript関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36891/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/java.jpg" alt="JAVA関連のことを調べてみた" width="540" height="270" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36891/">JAVA関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36888/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/rails-725x410.png" alt="Rails関連のことを調べてみた" width="725" height="410" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36888/">Rails関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36884/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/lambda.png" alt="Lambda関連のことを調べてみた" width="360" height="230" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36884/">Lambda関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36886/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/python-640x410.png" alt="Python関連のことを調べてみた" width="640" height="410" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36886/">Python関連のことを調べてみた</a> </h2> </li> </ul> </div> </div>  <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Article ", "mainEntityOfPage":{ "@type": "WebPage", "@id": "https://miofactor.com/2024/09/10/post-36646/" }, "headline": "JavaScript関連のことを調べてみた", "image": { "@type": "ImageObject", "url": "https://miofactor.com/wp-content/uploads/2019/10/python-640x410.png", "height": "410", "width": "640" }, "datePublished": "2024-09-10T16:41:27+0900", "dateModified": "2024-09-10T16:41:27+0900", "author": { "@type": "Person", "name": "editor" }, "publisher": { "@type": "Organization", "name": "f@ctor", "logo": { "@type": "ImageObject", "url": "", "width": "", "height":"" } }, "description": "目次 1. TensorFlow.jsを使用して骨格推定。骨格のライン推定 with TensorFlow.js2. Google-gravity本当に検索できるようにした話3. Lambdaからタイムアウト時間を取得する4. TensorFlow.jsを使用してフェイストラッキング。Face Tracking with TensorFlow.js5. まるで使徒。トーラスをランダムノイズで変形さ […]" } </script>   <footer class="l-footer"> <div class="container"> <div class="pagetop u-txtShdw"><a class="pagetop__link" href="#top">Back to Top</a></div> <div class="widgetFoot"> <div class="widgetFoot__contents"> </div> <div class="widgetFoot__contents"> <aside class="widget widget-foot"><h2 class="heading heading-footer">タグ</h2><div class="tagcloud"><a href="https://miofactor.com/tag/%e3%81%9d%e3%81%ae%e4%bb%96/" class="tag-cloud-link tag-link-13 tag-link-position-1" style="font-size: 8pt;" aria-label="その他 (1個の項目)">その他</a></div> </aside> </div> <div class="widgetFoot__contents"> </div> </div> <div class="copySns "> <div class="copySns__copy"> © Copyright 2024 <a class="copySns__copyLink" href="https://miofactor.com">f@ctor</a>. <span class="copySns__copyInfo u-none"> f@ctor by <a class="copySns__copyLink" href="http://fit-jp.com/" target="_blank">FIT-Web Create</a>. Powered by <a class="copySns__copyLink" href="https://wordpress.org/" target="_blank">WordPress</a>. </span> </div> </div> </div> </footer>  <script type="text/javascript" src="https://miofactor.com/wp-includes/js/comment-reply.min.js?ver=6.4.1" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script type="text/javascript" src="https://miofactor.com/wp-includes/js/wp-embed.min.js?ver=6.4.1" id="wp-embed-js" defer="defer" data-wp-strategy="defer"></script> <script> function toggle__search(){ extra__search.className="l-extra"; extra__menu.className="l-extraNone"; menuNavi__search.className = "menuNavi__link menuNavi__link-current icon-search "; menuNavi__menu.className = "menuNavi__link icon-menu"; } function toggle__menu(){ extra__search.className="l-extraNone"; extra__menu.className="l-extra"; menuNavi__search.className = "menuNavi__link icon-search"; menuNavi__menu.className = "menuNavi__link menuNavi__link-current icon-menu"; } </script><script>Array.prototype.forEach.call(document.getElementsByClassName("css-async"),function(e){e.rel = "stylesheet"});</script> </body> </html>

JavaScript関連のことを調べてみた

TensorFlow.jsを使用して骨格推定。骨格のライン推定 with TensorFlow.js

Google-gravity本当に検索できるようにした話

Lambdaからタイムアウト時間を取得する

TensorFlow.jsを使用してフェイストラッキング。Face Tracking with TensorFlow.js

まるで使徒。トーラスをランダムノイズで変形させるアニメーション。

4次元サイン関数のテクスチャを張り付けた 球体ジオメトリ。

加速器 陽子の衝突ゲーム。ボールの衝突後にパーティクルを生成。

4次元サイン関数のテクスチャを張り付けた球体ジオメトリ。

加速器　陽子の衝突ゲーム。ボールの衝突後にパーティクルを生成。