VertiTab – サイドパネルの縦型タブ v2.10.0

こんにちは皆さん！VertiTabが v2.10.0 にアップデートされました！

Chromeブラウザで究極のサイドバータブ管理を体験しましょう。便利な新機能が盛りだくさん！

インストールはこちらから:

https://chromewebstore.google.com/detail/chejfhdknideagdnddjpgamkchefjhoi?hl=ja

### 追加
– **ドキュメント ピクチャーインピクチャー**: プレミアムバージョンの拡張機能の公式リリース前に無料トライアルとして利用可能な高度なピクチャーインピクチャーを導入します。有効にすると、標準のピクチャーインピクチャーよりも優先されます。現在のページがサポートしていない場合は、標準モードが使用されます。高度なピクチャーインピクチャーは、次のような機能を備えたカスタムビデオプレーヤーを特徴とします：
* **ビデオの再生/一時停止**（スペースまたはK）
* **音量調整**（上/下矢印）
* **ビデオのミュート/ミュート解除**（M）
* **ビデオの早送り/巻き戻し**（左/右矢印

楽天デビットカードの利用通知をLineで受け取れるようにしてみた

# はじめに
外史トウといいます！
簡単なプログラミングで日常生活を少し便利にすることが好きです。
ロジックや技術自体のレベルは高くないですが、制作に至った動機やそれがどのように生活に影響を与えてくれるかにフォーカスして記事を書いていきたいと思います！

# 制作物の概要
楽天デビットカードでお買い物をした際に届く利用通知メールの情報をもとに、
画像のようにLineで利用速報を流してくれるアプリ

### 制作の動機
恥ずかしながらクレジットカードを魔法のカードと思ってなりふり構わず使った結果、数ヶ月連続で支出が収入を超えてしまったため、節約を目的としてお小遣いは楽天デビットカードで決済することにしました。
（デビットカードとは銀行残高分しか決済できず、リアルタイムで引き落としされるカード）
メイ

🐈画面上で猫が邪魔してくださる Rails gem を作ってみた（役に立ちません）

こんにちは、とまだです。

**猫ってかわいいですよね🐈**

私は猫を飼っています。

猫を飼っていると、目の前に猫が出てきて作業の邪魔をされることがありますが、それはそれでご褒美なのです。

ただ、猫アレルギーの人や、猫を飼うことができない環境にいる人にとっては、猫と触れ合う機会がなかなかありません。

そこで私は考えました。

> **誰もが猫に邪魔される幸せを味わえる世界を作りたい！**

この Gem は、そんな世界征服を目指す Ruby on Rails アプリ用の Gem です。

何を言っているか分からないかもしれませんが、**こういうこと**です👇


これであなたの作業も捗ること間違いなしですね！！！！

休日に暇すぎてこの gem をご存知 [RubyGems.org](https:/

Amazon S3とCloudFrontを使った静的ウェブサイトホスティングの技術検証

## はじめに
この記事では、AWS（Amazon Web Services）のS3（Simple Storage Service）を使用して静的ウェブサイトをホスティングし、さらにCloudFrontを使ってそのコンテンツ配信を最適化する方法について解説します。

静的ウェブサイトは、HTML、CSS、JavaScriptなどのファイルで構成され、サーバーサイドでの処理が不要なため、コストを低く抑えることができます。

加えて、CloudFrontを使用することで、世界中のユーザーに対して高速かつ信頼性の高いコンテンツ配信が可能です。

## 前提条件
:::note warn
**以下の条件を満たしていることが前提となります**
・AWSアカウントを持っていること
・基本的なAWSの知識（特にS3とCloudFront）があること
・AWS Management Consoleにアクセスできる環境が整っていること
:::

## 知識整理
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0

Rules of React を経典に React を書いて心の安寧を保つべし

こんにちは、とまだです。

React は Hook の効果もあり、書けばとりあえず動いてくれるので楽しいですよね！！！！！！！

ただ、**本当に正しいコードを書いているか不安になったことはありませんか？**

React は自由度が高い分、書き方によってはバグが発生しやすかったり、パフォーマンスが低下することもあります。

（その結果としてバグが発生し、しかも全く原因がわからない事態に何度も出会いました…）

そんなときに役に立つのが[「**Rules of React**」](https://react.dev/reference/rules)です。

これは、React 公式が提言している、React を使う時の「お約束」です。

私は今まで断片的にしか知らなかったので、特に重要そうなものを抜粋してまとめてみました。

:::note warn
直感的に理解してもらうことを大事にしているため、ニュアンスが正確ではない箇所もあるかもしれません。
あらかじめご了承ください。
:::

## 1. コンポーネントとHookは「ピュア」であるべし！

https://react.

ゼロ知識証明を使用せずに部分証明と存在証明をやってみる

ゼロ知識証明について調べていたら、発行者が作成した証明書の一部だけを公開してプライバシーを守るとか、証明したい部分を伏せて存在を証明することができる、といった解説をよく見かけます。さらに調べていくうちに、なぜかゼロ知識証明を使わずに実現する方法について興味が湧いてきました。

もちろん複雑なことはZK-SNARKやZK-STARKの活用が必須となりますが、大きな実装難易度や計算コストも伴います。最近Symbolのコア開発者もKASANEというSTARK開発に向けて発表がありましたのでどんな仕組みになるのか楽しみですね。

コミュニティからのレポートもあるのでご紹介しておきます。

https://hackmd.io/@Radio-Radio/S1BcJ_T0A

今回はゼロ知識証明を使わずに、ゼロ知識証明の定番ユースケースをsymbol-sdkを使用して実装してみます。速習Symbol方式で実行検証できますので、お試しください。

https://github.com/TGVRock/quick_learning_symbol_v3/blob/main/02_setting.md

JavaScript: 即時関数とか使えたら初心者っぽくなくなるんじゃないか？？

はじめまして，駆け出しエンジニアのSawaDと申します。
異業種からエンジニアに転身したばかりです。毎日頑張っています🐘

最近実務でよく書いているJavaScriptについて，書いてみたいと思います。

—

突然ですが，次のコードをご覧下さい。

“`javascript
// hello.js
function main(){
const name = “山田”;

const message = ((name) => {
return `こんにちは、${name}さん！`;
})(name);

console.log(message);
}

// 実行
main();

/* 実行結果

こんにちは、山田さん！

*/

“`

実行結果にある通り，このコードは想定どおりに動きます。
が，初学者の方にはやや不思議に思われるのではないでしょうか。
少なくとも，1年前の私はこれを見ても全く意味がわからず，考えるのをやめるレベルでした😇

もちろん，こんな単純な処理をわざわざこんなコーディングで記述する必要は全くありませんね。

iPhoneでレトロなUIを作る

## レトロなUIとは

みなさんは、レトロなUIというとどういうイメージを持ちますか？

スマホ自体がまだ新しいデバイスなので、レトロというのはピンとこないかも知れません。
iPhoneが登場して、スマホのUIは劇的に進化しました。それからスマホのUIは基本的には全く変わっておらず、レトロ感を出すには、iPhone以前の要素が必要になってきます。

スマホアプリを使っていて、
– 徹底したモードレス
– 必要最小限の機能コンポーネント
– 表示と機能の混在

こういう部分が昔のUIと比べた時に特徴的だなと感じています。
この特徴は、これに慣れ親しんだ人だと全く違和感を感じないと思いますが、ガラケーを長年メインで使ってきた年配者からすると、なかなか思い通りに操作できない要因にもなっています。

## ChatGPTに聞いてみた

ボタンをクリックするだけで、株を売買できるゲームのダッシュボード。



簡単に株を売買できます。2秒ごとに株価が更新され、売買のタイミングを計る楽しさ。
ゲーム開始時の資産は1000円です。
（これはゲームです。本物ではありません。）

コードをメモ帳などのテキストエディタに貼り付け、ファイルを「index.html」などの拡張子が.htmlのファイルとして保存します。その後、保存したファイルをブラウザで開けば、コードが実行されます。

“`html

拡張機能で社内フォルダへのリンクを開けるようにしたい_NativeMessaging

社内で使用しているwebシステムで、社内の別フォルダへのリンクを記載しておく。という事をよくします。
でも通常ブラウザからローカルリンクはセキュリティ的に開けないです。
今回の場合は、社内のローカルサーバーで管理されたサイトに書いている社内のローカル共有フォルダへのリンクなので、リンクから飛びたくなりました。
ということで拡張機能のNativeMessagingを試してみました。

似たことをリンク先でしています。

https://qiita.com/msms/items/44f87c45f8c286444eff

# つくった拡張機能
## コンテンツ
– 内容入力する時に、毎回aタグを書いてリンクにするのが手間なので、後からURLにaタグをつける処理を入れる
– NativeMessaging経由で開きたいので`href=’javascript:void(0)`としてそのままでは開かないようにする
– リンククリック時に`background.js`へURLを渡す
– 呼び出し先でエラーとかがあれば、アラートを出す

“`contents.js
// 元のサイトではURLを入力

【TypeScript】プロパティ ‘style’ は型 ‘Element’ に存在しません。ts(2339) を解決する

~~TypeScriptのエラー解決擦るけど許して！~~
# 動作環境
TypeScript: 5.4.5
VSCode: 1.93.1
# 起きている問題
以下のようなコードにて、element.`style`.hogeのstyleがElement型には存在しないと表示されてしまう。
“`ts:問題のあるコード
// 一部ボタンの色変更
const bottons = document.getElementsByClassName(“e__btn”)
for (let i = 0; i < bottons.length; i++) { const element = bottons[i] element.style.border = border element.style.backgroundColor = backgroundColor // ↑プロパティ 'style' は型 'Element' に存在しません ts(2339) } ``` このコードでは"e__btn"というクラスがついているElementを取得し、それら

【React】EventBusを作って、親子関係にないコンポーネント間でModalを制御する

## 背景
Reactでは、通常、親から子へ props を使ってデータやイベントを伝達します。しかし、親子関係にないコンポーネント間でイベントをやり取りしたい場合もあります。

Vue.jsでのEventBusばかり記事があったので、Reactでの簡単な実装例を備忘録として残しておこうと思います。

この記事では、ReactでEventBus（イベントエミッタ）を作成し、親子関係にないコンポーネント間でイベントを管理する方法を説明します。
さらに、モーダルを開閉する具体例を通して、この仕組みの使い方を解説します。

## EventEmitter（イベントエミッタ）とは？
EventEmitter（イベントエミッタ）は、異なるコンポーネント間でイベントを通知するための仕組みです。

EventBus は、アプリケーション全体で利用できるイベント管理の中心的な存在として機能します。イベントを「発火（emit）」し、他のコンポーネントがそのイベントを「リスン（on）」することで、コンポーネント間の連携が実現します。

## 実装の概要
今回は、モーダルの開閉を EventBus を使

ACDLを提唱します。その8

# 概要
ACDLとは、アプリは、クラウド、大切なデータは、ローカルです。
素晴らしいアプリ見つけたので、plunkerに上げてみた。

# 参考にしたページ

https://qiita.com/camino37/items/39f46adbc575f9c90763

# 写真


# 成果物

https://embed.plnkr.co/plunk/90xpJjouEqIZGyEE

以上。

【JavaScript】reverseメソッドについて

# Reverseメソッドとは
配列の要素を逆順に並び替えるメソッド。

“`JavaScript:使い方
配列名.reverse()
“`

配列そのものの要素が逆順になり、戻り値としても並び替え後の配列が戻される。

# 具体例
“`JavaScript:例
let items = [“A”, “B”, “C”];
items.reverse();

console.log(items);
“`
“`JavaScript:実行結果
[‘C’, ‘B’, ‘A’];
“`

# 注意点
　元々の配列を破壊することになるので、仮に他の場所で配列を参照している場合があれば影響することになる。

# reverseメソッドを使うことになった経緯
　VueでEChartsを使用して積み上げ棒グラフを描画していた。バックエンドから渡されたデータを元に、データベースで定義した表示順に積み上げるよう設定していたが、凡例が表示順で上から下に1から表示されているのに対してグラフは下から上に積みあがっていた。これを凡例の並びと合わせるべく、グラフの配列をreverseメソッドを使用して要素

【DAY25】投稿画面における文字数の表示(2)

この記事は以下の記事の続きとなります。
[【DAY24】投稿画面における文字数の表示(1)](https://qiita.com/Nautilus1256/items/27ce3f27baa75d70b01e)

## 関数を使い回したい
前回は、質問タイトルの入力に対してJSを記述して機能を実装しました。しかし、同じページの質問詳細の入力に対しても同じ機能を付けたいです。今の状態では関数の使い回しができないので、ビューとJSの記述を以下のように変更します。
“`html

0/50文字

“`
↑inputタグのクラスに

JavaScriptの復習④

# はじめに
今回は、[前回](https://qiita.com/u_kasuzuki/items/6d954ce89f446e50164d)に引き続き、Chapter4のCSSとJavaScriptを組み合わせた、要素の非表示と切り替えについて復習していきます。

# チェックしたらクリックできるボタン

See the Pen 30秒で読める｜JavaScriptのオブジェクトデータ型とは何か

## JavaScriptのオブジェクトデータ型とは
オブジェクトデータ型とは、キーと値のペアを格納するためのデータ構造を指す。

関数とデータを保持しておくコンテナのようなものだ。

オブジェクトは、プロパティ（キー）とその値を持つことで、さまざまなデータ型を格納できる。

…と言ってもいまいち掴めないので例をひとつ。

### オブジェクトの例

このように記述するものがオブジェクトデータ型だ。

“`// personという名前のオブジェクトを作成
const person = {
name: “太郎”, // nameというプロパティに”太郎”という値を設定
age: 30, // ageというプロパティに30という値を設定
job: “エンジニア” // jobというプロパティに”エンジニア”という値を設定
};
“`
オブジェクトは、中括弧 {} を使って作成する。

### プロパティへのアクセス
もちろん、オブジェクト内の値を取り出すこともできる。

それにはまず、プロパティ（キー）にアクセスことが必要で、そのためにはドット記法もしくはブラケット

Reactで覚えとくべきポイント

## コンポーネントの定義
コンポーネントはjavaScriptの関数として定義する

“`jsx
function Hello(){
return

hello

;
// コンポーネントはJSXを返す
}
“`
コンポーネントの実行
“`jsx

“`
アロー関数でも定義できる
“`jsx
const Hello = () => {
return

hello

;
}
// const Hello = () =>

hello

; も可
“`

複数行になるときは丸括弧で囲む
“`jsx
const Hello = () => {
return (

hello

);
}
“`
“`jsx
const Hello = () => (

hello

);
“`

## JSX内のJSの書き方
{ }を使用する
“`jsx
function Hello(){

バイキュービック補間で、画像をアップサンプリングするゲーム。


### スペースキーを押すと、現在のマウス位置を中心に画像をアップサンプリングします。
コードをメモ帳などのテキストエディタに貼り付け、ファイルを「index.html」などの拡張子が.htmlのファイルとして保存します。その後、保存したファイルをブラウザで開けば、コードが実行されます。

バイキュービック補間（Bicubic Interpolation）は、画像処理で用いられる技術で、画像の拡大や縮小時にピクセル値を滑らかに補完します。バイキュービック補間は、周囲の16ピクセル（4×4のピクセルブロック）を使用して新しいピクセルの値を計算します。

バイキュービック補間は、距離に応じて各点に重みを付け、その重み付きの平均値を計算する手法です。そして、この重みの変化は、三次多項式によって滑らかに変化するように設計されています。

具

Webカメラ映像の中に入りこんでしまったかのようなパノラマビューを実現したゲーム。



### カーソルキー上下左右でパノラマを操作します。
コードをメモ帳などのテキストエディタに貼り付け、ファイルを「index.html」などの拡張子が.htmlのファイルとして保存します。その後、保存したファイルをブラウザで開けば、コードが実行されます。

#### 説明：
Webカメラ映像の取得とテクスチャ化:

Webカメラの映像を取得し、VideoTextureオブジェクトを使ってテクスチャに変換