矢印キーで移動
押したキー
実は私は３０年前から監視社会の到来を見抜いていて、実際そうなったのですが、それが動機でこんなに暗号に詳しくなれたという事情があります。
で、２０年前当時のコードのファイルが見つかったので、ギットハブに公開しました。
一番感じるところは、誰でも暗号を動かすところまではできるけれど、それが本当に安全であるように実装するのは難しいということでした。
当然監視社会に抵抗する技術者もいるだろうけど、結局知り合うことなく現在に至る。
Web用の暗号はすでにAESやchachsa20などがありますが、そもそもJSは実行速度が遅いので、より軽量な暗号を使った方がいいと思い、軽量暗号のファイナリストであるasconをjsに移植しました。
チャットの自動暗号化拡張機能をブラウザに作ってみようというのが今回の事案です。
JSってなんで６４ビットに対応しないんでしょうね？
まだ思いつきの段階なのでなんとも言えませんが、やはり自分には暗号が一番楽しいのだということです。
次はRustに移植しようかなと思います。
竹槍くんの機能はメッセージ暗号化、ファイル暗号化、通信路暗号化くらいを目指したいと思います。
A
画面をキャプチャしたり、それを収録できる面白そうな API を見つけたので使ってみました。
https://developer.mozilla.org/ja/docs/Web/API/Screen_Capture_API
https://developer.mozilla.org/ja/docs/Web/API/MediaStream_Recording_API
## 作ったもの
[恐竜ゲーム](chrome://dino)をキャプチャしている様子です。?
GitHub Pages で公開しています。
https://mikrogeophagus.github.io/screen-recorder
https://github.com/mikrogeophagus/screen-recorder
## Scr
Reactを学び始めてからSPA（シングルページアプリケーション）の良さが理解できたところでState Management（状態管理）を学んでいる方、useStateが理解できない方、このコンセプトを理解することは、コンポーネントのレンダーにもかかわる重要な部分になります。
Reduxなどのライブラリを使う前にも理解しておきたいです。
※この記事はReactを学習しながら書いています。もし不適切な用語や解説などありましたらお知らせしてもらえるとありがたいです。
## **State Management**
**State Management**はデータを管理するフロントエンド側のデータ倉庫をイメージしたシステムのことです。これらはReact Hookの機能のうちのひとつです。React Hook（フック）は
# この記事は？
## 主な内容
– Cookieとは何か？
– LocalStorageとは何か？
– CookieとLocalStorageをJavaScriptで操作する方法
– CookieとLocalStorageの違いは何か？
# Cookie
## Cookieとは？
> HTTP Cookie (ウェブ Cookie、ブラウザー Cookie) は、サーバーがユーザーのウェブブラウザーに送信する小さなデータであり、ブラウザーに保存され、その後のリクエストと共に同じサーバーへ返送されます。一般的には、 2 つのリクエストが同じブラウザーから送信されたものであるかを知るために使用されます。例えば、ユーザーのログイン状態を維持することができます。 Cookie は、ステートレスな HTTP プロトコルのためにステートフルな情報を記憶します。
**＜[HTTP Cookie の使用 / MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/HTTP/Cookies)より＞**
主に、サイトのログイン機能やユーザ設定
# やりたいこと
以下のような「1行目がヘッダー、2行目以降がデータ行」の形式で入力されているスプレッドシートの値を
ヘッダー行の項目名をkeyに、値をvalueにしたjson形式に変換します。
そして、カラム・データの増減にも対応できるようにしていきます。
| |A | B | C | D |
|:-|:-|:———|:——|:—|
|1 |ID|購入日 | 商品 |価格|
|2 |1 |2023/02/01|りんご |100|
|3 |2 |2023/02/02|ねぎ |110|
|4 |3 |2023/02/02|キャベツ|138|
|5 |4 |2023/02/03|りんご |110|
“`json:json出力イメージ
[
{ “ID”: “1”, “購入日”: “2023/02/01”, “商品”: “りんご”, “価格”: “100” },
{ “ID”: “2”, “購入日”: “2023/02/02”, “商品”: “ねぎ”, “価格”: “110” },
{ “ID”: “3
# はじめに
Video.js完全マニュアルとしてVideo.jsの解説をしていくシリーズのpart12です。
Video.jsの公式のガイドである[Video.js Guides](https://videojs.com/guides)を翻訳ツールを使いながら解説していきます。
今回はVideo.jsのプラグインという機能について解説します。
前回
[Video.js完全マニュアル part11 〜言語設定〜](https://qiita.com/manzoku_bukuro/items/30c9493d81378975dc2b)
part1から読む人は[こちら](https://qiita.com/manzoku_bukuro/items/10137f64810f0dc40543)
# この記事の対象者
– Video.jsを利用する人
– 動画プレイヤーのUI操作をしたい人
– 動画再生関連のサービスを作りたい人
# この記事の解説する章
[Plugins](https://videojs.com/guides/plugins/)
# プラグイン
Video.jsの強
Reactのコンポーネントをそのままpdf表示したいときあると思います。
動的なuiをそのまま変換できるので便利。
次の手順で進める。
1.componentをcanvasに変換
2.canvasをpdfに変換
# 1. package install
“`
$ npm i html2canvas jspdf
“`
# 2. pdf表示ロジック
“`tsx:usePdf
import html2canvas from ‘html2canvas’
import { jsPDF } from ‘jspdf’
import { useRef } from ‘react’
const usePdf = () => {
const targetRef = useRef(null)
const pdfOpenHandler = () => {
if (targetRef.current === null) return
html2canvas(targetRef.current).then((canvas) => {
この記事は前回の続きです。Todoアプリを再現する際などはこちらを先に参考にしてください。
https://qiita.com/ysk-s/items/dc8c18de2de8d1154476
前回、”Todo”というコンポーネントでuseStateを用いてtodosという変数に保存されているタスクを表示することは出来た。
ただし、ブラウザ上のコンソール画面にはエラーが表示されている。
これは、Todoのコンポーネントで表示されるタスクにはユニークなキーが割り振られておらず、識別できないためにエラーが起こっている。
そのため、TodoListからTodoを呼び出すときkeyの割り振りも行う。
return todos.map((todo) => (
Flutter で JavaScript のライブラリを使用するには、以下の 2 つの方法があります。
Dart JavaScript Interop：Dart は JavaScript との互換性があります。そのため、Dart アプリケーションから JavaScript ライブラリを呼び出すことができます。これは Dart の「dart:js」パッケージを使用することで実現されます。
WebView widget：Flutter アプリケーション内に WebView widget を埋め込んで、JavaScript ライブラリを呼び出すことができます。この方法は、JavaScript ライブラリを利用するには最も簡単な方法ですが、パフォーマンスに問題がある場合があります。
この 2 つの方法を使用すると、Flutter アプリケーションから JavaScript ライブラリを利用することができます。開発者は、アプリケーションの要件に応じて最適な方法を選択することができます。
Regenerate response
# はじめに
ServerlessFrameworkを用いて、ApiGatewayのWebsocket通信を利用したリアルタイムアウトTodoアプリを実装した時のメモ。
# 環境
* Svelte
* 3.54.0
* ServerlessFramework
* 3.27.0
# 完成画面
# 環境について
## 構成図
## WebSocket説明
### 1. connect / disconnect時にはDynamoDB
何かと話題なChatGPTですが、読める文章以外にもプログラミングコードの生成も可能です。
ということで、ニフクラ mobile backend向けのコードをどれくらいの精度で書けるのか試してみました。
## 1回目
一回目は以下のように日本語で入力しました。
“`json
NCMBのJavaScript SDKを使ってデータストアからデータを取得するコードを教えてください
“`
生成されたコードは以下の通り。これは普通に動くコードですね…
“`jsx
var NCMB = require(“ncmb”);
var ncmb = new NCMB(“your_application_key”, “your_client_key”);
var TestClass = ncmb.DataStore(“TestClass”);
TestClass.fetchAll()
.then(function(results){
console.log(results);
})
.catch(function(error){
