- 1. webデザイナー、初めてのGSAP
- 2. JavaScript の Date オブジェクトについてのメモ
- 3. 小規模の html をサクっと作るためのサイトを公開してみる
- 4. TypeScript 型の絞り込み（Narrowing）その1
- 5. WebDeveropperVootcamp HTML/CSS/JavaScript編その２
- 6. 「存在」の概念とJSのif文
- 7. JavaScriptを使用してiPhoneのセンサ情報を取得してみる
- 8. Google Calendar APIで既存のMeetコードで会議を作成する方法
- 9. JavaScript
- 10. 部屋の構造を変えずにインテリアデザインができるAIアプリを個人開発しました
- 11. 【未経験がエンジニアになるまで#0】勉強を始めて1か月がたちました。
- 12. フラクタルノイズを使って、リアルな 大気 の動きアニメーション。地球シュミレータのゲーム。
- 13. Web Speech APIの機能で、しゃべるブラウザです。
- 14. 【JavaScript】Canvasの描画がじわじわ遅くなる原因
- 15. Local Storageに入れたデータが上手く判定できなかった話
- 16. 【TypeScript】filterのコールバックを英文っぽくリファクタする
- 17. JSONPの替わりにJSONoCを使ってみませんか？
- 18. 4つのアニメーションライブラリを紹介！視覚的な饗宴を作成し、リラックスタイムを倍増させる方法！
- 19. TypeError: Keyv is not a constructorの対処法
- 20. BingのCopilotすごい
webデザイナー、初めてのGSAP
紙ものデザイナーからwebデザイナーになったMariettiです！
今回は入社して初めての中規模案件（ブランドサイト）にてGSAPを使って実装を試みたので、備忘録としてやったこと＋αをまとめていこうと思います！# GSAPとは
GSAPとは、アニメーションを気軽・簡単に実装できるアニメーション特化のJavaScriptのライブラリです。
高機能でプラグインも豊富に用意されているようです！
私が初めて使用した際はスクロールアニメーションの実装のみだったのと、プラグインを1種類しか使用しなかったので他も気になるところです👀# 導入方法
公式から「Get GSAP」します！
https://gsap.com/
ダウンロードorCDN経由での読み込みができます。
CDNの場合はこちら。適宜バージョンを確認し使用してください。
“`html
“`
また、プラグインも[インストールヘルパー](https://gsap.co
JavaScript の Date オブジェクトについてのメモ
# :man_tone1: 誰向けの記事か
– JavaScript 初心者
– タイムゾーンや時差の扱いに困っている方# :triangular_flag_on_post: 結論
– Date の実態はタイムゾーンを持たない特定の瞬間
– 比較する際には `getTime()`する# 1. Javascript の Date とは
:::note warn
注意：個人的な理解に基づいて説明しています。細部で誤りがある可能性があります。
:::– JavaScriptのDate型の実態は、世界協定時間(UTC)の1970年1月1日0時0分0秒から経過したミリ秒数である
– タイムゾーン情報は持たない
– 特定の瞬間を表すMDN の説明：
>JavaScript の日付は基本的に、元期として定義される UTC の 1970 年 1 月 1 日午前 0 時（UNIX 元期と同じ）から経過したミリ秒単位の時刻を指定します。このタイムスタンプはタイムゾーンに依存せず、歴史の一瞬を固有のものとして定義します。https://developer.mozilla.org/ja/d
小規模の html をサクっと作るためのサイトを公開してみる
今回は小規模の html を
サクっと作るためのサイトを
公開してみたいと思います。完成品は下記の URL で
試す事が出来ます。[https://uni928.github.io/SephirothHTMLCreater/](https://uni928.github.io/SephirothHTMLCreater/)
***
このサイトの使い方
このサイトを開くと
html タグや body タグなど
最低限必要なタグを
書いた状態からスタートします。小規模の html なら
script タグや
style タグも使うかもしれないため
入れています。よく使うであろう構文は
ボタンを押すと入力出来るように
なっています。作成した html を
ダウンロードするボタンを押すと
作成した html ファイルを
ダウンロード出来ます。***
このサイトのソースコード
このサイトのソースコードは
以下の内容です。以前作成したサイトを
改変して作っているため
ボタンを動的に生成したりせず
ベタ書きです。“`html:このサイトのソースコード
TypeScript 型の絞り込み（Narrowing）その1
:beginner: TypeScript初心者向けです。
TypeScript 型の絞り込み（Narrowing）の話です。
# 型判定メソッドを作った場合は、type predicate機能を使おう。文字列型(string)であるか判定するメソッド「isStrring」を作成してみました。
引数の値がstringならtrue、でないならfalseを返すメソッドです。“`typescript
function getValue(): string | number | undefined {
return ‘SP’;
}function isString(value: string | number | undefined): boolean {
return typeof value === ‘string’;
}const value: string | number | undefined = getValue();
if (isString(value)) {
// エラーになる。
// Property ‘length’ does not
WebDeveropperVootcamp HTML/CSS/JavaScript編その２
# デフォルト引数
関数名(引数=デフォルト値)で引数を与えなかった場合の挙動を指定# スプレッド構文
– 配列の中身を渡す
– math.max(配列名)では配列のアドレスが渡されるだけ
– math.max(…配列名)なら〇## スプレッド構文を用いたオブジェクトの操作
– オブジェクト１={〇〇｝,オブジェクト2={××｝があるとする。
– オブジェクト3 ={…オブジェクト１}でオブジェクトのコピー
– オブジェクト4 ={…オブジェクト１,…オブジェクト2}においてかぶっているプロパティ名がある場合:オブジェクト2のプロパティが優先される。# レスト構文
– スプレッド構文と似ているが違うもの
– 関数名(…引数名)とすることで引数に配列を渡せる
– print(…num){console.log(num)}; print(1,2,3); /*[1,2,3]*/# タグ操作
– タグ.append(内容)でテキスト内容や他のタグを操作対象のタグの中に入れ込むことができる# DOM操作
## テキスト操作
– 通常のテキスト操作:要
「存在」の概念とJSのif文
if文の()の中に `null`, `undefined`, `0`, 空文字(`”`)を入れると `false` の場合と同じように処理されるのが、西洋的で面白いと思った。
> さらに、「真」という意味で「存在」「ある」が、「偽」という意味で「非存在」「あらぬ」が用いられるばあいもある。
（引用：松浪 信三郎. 実存主義 (岩波新書) . 株式会社 岩波書店. Kindle 版）
JavaScriptにおいてif文が判定しているのは「存在と無（非存在）」であると言うことができるのかもしれない。
追記：ちょっと違った（cf. 頂いたコメント）
JavaScriptを使用してiPhoneのセンサ情報を取得してみる
現在、遠隔地の車両データをモニタリングしたり解析できるクラウド計測解析システム「[Smart Logging Service](https://www.toyota-td.jp/product_site/smart_logging_service/index.html)」、「[Opti Meister Online](https://www.toyota-td.jp/product_site/optimeister_online/index.html)」を開発しております。
SmartLoggingServiceでは専用デバイスで車両のCAN情報やGPS、加速度、カメラ映像など計測していますが、iPhoneがあれば専用のデバイスがなくてもGPS、カメラ、加速度など簡易的な計測できるはずです。iPhoneのセンサデータをSmartLoggingServiceにつなげるとどんな風に見えるのかまずは簡単なWebアプリを作成してみることにしました。
– [Events: insert | Google Calendar API | Google Developers](https://developers.google.com/calendar/api/v3/reference/events/insert?hl=ja#examples)# 実装
## 手順1
新規イベントのオブジェクトに`conferenceData`フィールドを追加
JavaScript
## 型の値(プリミティブ値)
`論理型`(`Boolean`): 真偽値(true, false)
`数値型`(`Number`): IEEE 754 の倍精度浮動小数点形式の値
・安全に表現できるのは `-(2^(53) − 1)` から `2^(53) − 1` まで`長整数型`(`BigInt`): 数値型のように小数を表せないが, 数値型より大きな整数を扱える。
・数値型と値が同じでも, プリミティブ値が異なるので, 厳密等価`===`にはならない。`文字列型`(`string`): 文字
`Null`: 値はある, オブジェクトがない
`Undefined`: 値がない, オブジェクトはある
`シンボル`: 不変のプリミティブ値
## 変数宣言
* `var`
関数内変数 (定義された関数内でしか使用できない)* `let`
ブロック`{}`内変数 (定義されたブロック`{}`内でしか使用できない)
変数再宣言不可## 定数宣言
* `const`
変数再宣言不可
変数再代入不可
※配列やオブジェクト(辞書)などの`mutable`オブジェクト
部屋の構造を変えずにインテリアデザインができるAIアプリを個人開発しました
こんにちは！
インテリアデザインのパースって、いちから作るのかなり大変じゃないですか？
スケッチだったり3Dモデルだったり、クオリティ確保しつつすぐに完成なんてなかなか難しいですよね。そんな方にオススメしたいアプリがあります🎉
インテリアデザインAIアプリ**「もようがえAI」**
# 🤔もようがえAIって？
建築の内観パースをAIと一緒につくるアプリです。
建築学生の私が設計課題のときに、「内観パースをさくっと作ってもっとイメージを膨らませたい」と思ったことがきっかけで作ったアプリです
# 🏠️つくった理由は？
試しの内観パースをぱぱっと作れるようにしたかったからです。
このときはいつも模型や図面に追われてしまい、内観の検討が全然できずにいました🤯
そんなときに生成AIでパースを作成できる記事を見つけ、これを活用できないかと考え始めました。
ただほかのサービスでよくあるのは、”テキストを入力すると画像が生成される”というものばかりだったので、あまり思い通りのパース図作成ができませんでした。
そこで思い通りのパース図を作成するために、家具の任意位置の固定が可能な
【未経験がエンジニアになるまで#0】勉強を始めて1か月がたちました。
はじめてQittaで記事を書きます。
私は現在アメリカにいますが、エンジニアになるために独学で勉強しています。普段はnoteでアメリカ生活の新たな発見などを主に載せてますが、エンジニア関連の記事はこちらに乗せることにしました。
8月より勉強を始めてはや1か月がたちましたが、とても学ぶことが多く備忘録を兼ねてエンジニア関連で勉強していることを記事にしていこうと思いました。
Markdown記法が初めてなのでぎこちないとは思いますが、たくさん記事を書いて慣れていきたいと思います。
# 1.1か月何を勉強したのか。
まずは1か月独学で勉強を進めてきて私は以下の言語を学びました。
1. HTML
2. CSS
3. Javascript正確にいうとHTMLとCSSはプログラミング言語ではありませんが、webをやるうえでのフロント部分をつかさどるので、模写ができるレベルまで勉強を進めました。
# htmlとcss
本来であれば分けて学ぶものかもしれませんが、私は一緒に学習したのでまとめて記載しておきます。
私が以前勤めていた学習塾のHPはwordpressというものを使用して自分
フラクタルノイズを使って、リアルな 大気 の動きアニメーション。地球シュミレータのゲーム。
#### パーリンノイズ (Perlin Noise)
パーリンノイズは、コンピュータグラフィックスにおいて自然な見
Web Speech APIの機能で、しゃべるブラウザです。
### 英語と日本語のテキストを入力し、それを読み上げることができます。
サンプルテキスト 日本語
物語: 言葉の力
未来の世界では、人工知能が人々の生活に深く根付いていた。人々はAIと一緒に暮らし、AIに助けられながら日々を過ごしていた。その中でも、「言葉」は特別な意味を持っていた。言葉は人と人をつなげるだけでなく、AIと人間の架け橋にもなっていた。ミライという名前
【JavaScript】Canvasの描画がじわじわ遅くなる原因
## 結論
図形を描画する前に`context.beginPath()`しましょう。
終わり。
https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/beginPath
## おまけ
Canvasに1/60秒間隔で描画処理をしていたのだが、4分くらいたつとFPSが低下する現象が発生した。
全く原因が分からず* `setInterval`を`requestAnimationFrame`に変えても効果なし
* [キャンバスの最適化](https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas)に従っても効果なし
* メモリの解放忘れでもなさそう
* ググっても全く参考になるサイトが見つからないという状態で絶望していた。
そんな中、ソースの原因箇所を特定すべく描画処理を消しまくって`context.rect()`が原因だということに気づき、やがて`beginPath()`で解決
Local Storageに入れたデータが上手く判定できなかった話
## Local Storageに入れたデータを使って条件判定したい
– JavaScriptでを使ってLocal Storageにデータを入れて条件判定に利用
– データはJSON.stringify()メソッドとJSON.parse()メソッドをつかって出し入れ
以上の条件で作業を行っていた。## Local Storageから取り出した値で判定できない！
「Local Storage内の ‘option’ の値が ‘default’ のとき」という条件を書くため、以下のようなコードで一旦動かしてみた。
“`JavaScript:JavaScript
const value = localStorage.getItem(‘option’);
if(value !== null && value === “default”){
//処理
}
“`ただ、これだとif文の中に入ることができず、「ちゃんと値設定しているのになんでだ？」と小一時間悩んでしまっていた。
## エスケープ処理してみた
結果的には以下のように書き換えることで、解決できた。“
【TypeScript】filterのコールバックを英文っぽくリファクタする
# はじめに
filterのコールバックって、条件が多くなってくると見づらいですよね
最近思いついたリファクタが、めちゃ初歩的で地味だけど
案外気に入ってるので記事にしてみます# Before
車の情報を持つinterfaceがあるとします
“`ts
interface Car {
name: string
type: CarType
color: BodyColor
}enum CarType {
VAN,
SUV,
COUPE,
}enum BodyColor {
BLACK,
WHITE,
RED
}
“`
`Car`の配列があるとします“`ts
const cars: Car[] = [
{name: ‘HIACE’, type: CarType.VAN, color: BodyColor.BLACK},
{name: ‘LAND CRUISER’, type: CarType.SUV, color: BodyColor.WHITE},
{name: ’86’
JSONPの替わりにJSONoCを使ってみませんか？
jsonをSame Origin Policyの制約を受けずに別のオリジンから取得する方法としてJSONPがあります。
しかしながら、「JSONP 危険」「JSONP 脆弱性」と検索するとセキュリティリスクがあるとわかります。
JSONoCはJSONPのリスクのある一部を防ぐことが可能です。# JSONoCとは
[JSONoC](https://github.com/takazin11de/JSONoC)とはJSON over CSSの略で、下記CSSのようにCSSの中にJSONを埋め込み、CSSを読み込みスタイルが適用された要素にJavaScriptでアクセスしJSONを取得しよう、という試みです。CSSファイルはJSファイルと同様にSame Origin Policyの制約を受けずに別のオリジンからアクセスすることが可能です。またCSSファイルはiframeの中の、そのまたシャドウDOMの中で読み込まれるため、元のページと隔絶されており、元ページに悪影響を与える心配がありません。
~~~css:test.json.css
#_{–j:'{“name”:”Bob”,”ag
4つのアニメーションライブラリを紹介！視覚的な饗宴を作成し、リラックスタイムを倍増させる方法！
4つのアニメーションライブラリを紹介！視覚的な饗宴を作成し、リラックスタイムを倍増させる方法！
### はじめに
大画面アプリケーションを開発する過程では、アニメーション効果がしばしば関わってきます。しかし、一部のフロントエンド開発者は、強力なアニメーションスキルを持っていないかもしれません。そこで、私が頻繁に使用する便利なアニメーションライブラリをいくつか紹介します。これらは基本的に99.9％のビジネス開発ニーズに応えることができます。あなたの作品を見たプロダクトマネージャーやUIデザイナーからの称賛を受けることでしょう。ぜひブックマークして、いいねを忘れずに！
### [GSAP](https://gsap.com/)
フロントエンドアニメーションといえば、このフレームワークを強くお勧めします。GSAP（GreenSock Animation Platform）は、高パフォーマンスでクロスブラ
TypeError: Keyv is not a constructorの対処法
今まで普通に使えてたKeyvが動かなくなったので対処法メモ
“`
npm remove keyv
npm remove @keyv/sqlite
npm i @keyv/sqlite@3.6.7
npm i keyv@4.5.4
“`
keyv v5のゴミアプデのせいでうごかなかったっぽいゴミゴミゴミ。
BingのCopilotすごい
# AIが全部解決してくれた（追記：エラーは）
『セイト先生が教えるプログラミング入門』最終章の写経が第9節まで終わり、一応日報アプリが出来ました。しかし正しく動きません。F12でコンソールを見てみたところ、CORSに関して何か問題があるようです。おそらく1-3節で説明された環境構築のどこかで間違えたのだろうと思い、原因をBingのCopilotに尋ねてみることにしました。以下にこのAIと私との会話を記します。# 1. ローカルファイルの直接読み込み
>私はWindows PCでCursor, Vite, Firebaseを使ってwebアプリを作ろうとしています。ところが、index.htmlをChromeで開き、Consoleを確認したところ、以下のようなエラーが出ていました。HTMLファイルとJavaScriptファイルのバグ以外で考えられる原因を教えてください。
index.html:1 Access to script at ‘file:///C:/main.js’ from origin ‘null’ has been blocked by CORS policy: Cr
