もはやパソコンいらずでReactアプリを作成・公開できる時代. 必要なもの Webブラウザ GitHubアカウント steps レポジトリ生成: 好きな名前のGitHubレポジトリを.gitignore=Nodeで生成 (10秒) 編集モード: ↓Codeボタン -> Open with Codespaces (待ち1分) 素…

Domain + declarativeUI + UIstate = M-V-VM 固いことはWikipediaへ転記済み

アクセス制御 (認証N/認可Z) データソース 計算資源 (サブルーチン) APIGateway/AppSync ~ API Endpoint (Server) の仕事は？ API Endpointの提供 ソースから独立したAPI Endpoint 文字通りinterface (変わらない型) なのでバックエンド変更が可能 単一防御…

SSH (secure shell) とは、外部のコンピュータへ安全にアクセスする方法のこと。 より正確には、安全でないネットワークを介しながら、安全なリモートログインと安全なネットワークサービス (shell操作など) を実現するためのプロトコル。 SSHとは Secure Sh…

IFTTT Webhooksを使い倒し、様々なサービスをまたいで自分だけのappを作ろう！ 使い方概要 受信 (if側) は簡単、event名を決めて指定URLへJSONをPOSTするだけ！ 送信 (then側) はもっと簡単、好きなURLへrequestが送れるよ！ 受信側 (if Webhooks) 基本的に…

Web Componentsの一要素であるShadow DOM. Shadow DOMを有効に利用するためには、compositionの概念がとても重要。 このcompositionについて解説してみた。 Shadow DOMとは web標準に颯爽と現れた期待の新人 (新人ではない) 切り離されたDOM、のようなもの. …

依存ファイルはwcの中に。重複してもパフォーマンスに影響ないよ Don't worry if that means including redundant ; as long as you set appropriate cache headers, these will only be fetched and loaded once webcomponents.org - Discuss & share web c…

Gmailへ決められた形式で予定のメールを送ると、Google Calendarにその予定が自動登録される. その方法を調べてみた. 概要 仕組み schema.orgが定める形式に則って予定をメールする。 メールはhtmlメール。JSON-LD等が形式として定められている。 Gmailサー…

下のtext要素をクリックしてごらん、なんと編集できるよ!! 私はtext要素。でも編集できるよ！ (クリックしてみ) わかる人向け: 仕組みを一言でいうと contentEditableなHTML要素の下にtext要素を配置し、このセットをforeignObjectへ入れてSVG要素下に吊るす…

Javascript標準で日時を扱うにはDateオブジェクトを使う. 使い方は割と簡単で、いくつか問題点はあるけどとりあえず使う分にはまぁ 概要 こんな風になっている inputはローカル時間 (日本時間とかアメリカ時間とか。時差のようなもの) の情報を持っているが…

根源的な利点は道具の使い方を覚えなくていいこと. 今まで人は、 道具を作り 道具の使い方を覚え習熟する ことで、物事の効率を良くしてきた。 AIはステップ2を消滅させてくれる. 学習コストが極端に低くなるのだ AIは一般論として、デバイスが人間をより理…

webサービスを組み合わせて、自分だけの自動化ツールを創り出せ！ というのがIFTTT(イフト) 3 ways to build Maker Partner Partner Plus applets & services Applets: bring your services togather to create new experiences Services: the apps and devi…

generatorの概念 generator（という概念）とは、繰り返しを簡単に・見通し良く記述する仕組みである. generatorの利用 generatorを利用することによって 繰り返しオブジェクト(イテレータ)の容易な作製 見通しの良い非同期処理コード記述 が可能になる. gene…

モジュール Arrays (Statistics, Search, Transformations, Histograms) Axes Brushes Chords Collections (Objects, Maps, Sets, Nests) Colors Dispatches Dragging Delimiter-Separated Values Easings Forces Number Formats Geographies (Paths, Projec…

ユーザーを限定するwebサイト・webアプリはログインの仕組みが必要になる. AWS cognito, 特にUser Poolsの機能でこれが実装できる. Cognitoとは何ぞ？という方はこちら一読を推奨. tarepan.hatenablog.com Cognitoを用いたセッション管理の大枠 インターネッ…

Amazon CognitoとはIDサービスとデータ同期を提供する. Amazon Cognitoの機能 いくつかのサービスが関わりあって存在. 機能をジャンジャン追加するので名前の整合性が(ry Amazon Cognito Cognito User Pools (Your User Pools) Cognito Identity (Federated …

Amazon Cognito User Poolsとはユーザー名簿管理サービスである. User Poolsの機能 User Pools単体を用いることで 名簿の作成・管理 ユーザーの追加・メール認証・削除 password管理 ユーザー属性の管理・呼び出し ログイン/セッション管理 などが出来る. 他…

概要 webアプリ(ブラウザで動くアプリ)を思いついた、作ろう。 ブラウザで全部の処理させるのって、すごい大変そう。 サーバーを借りて色々する…のかな、難しそう。 →クラウド(AWS)で手軽にwebアプリが作れる！ 具体的に アマゾン ウェブサービス / AWSを使…

データの更新 Data(data, key)のkey指定を利用 nebuta.hatenablog.com データの遷移 transition treeの遷移 Interactive d3.js tree diagram - bl.ocks.org データの引き出し data() 引数無しでselectionの第1groupからjoinされたdatum配列を返してくれる. h…

概要 有向非循環グラフの可視化(visualization)について手法と記事のまとめ。 有向非循環グラフ Directed Acyclic Graph architecture topolodical sort layer assignment vertex ordering within layers median vertex positioning within layers Sugiyama …

固いまとめ Node.jsとはJavaScript実行環境である。 Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. https://nodejs.org/en/ Node.jsはgoogle Chrome (webブラウザ)にも搭載されているV8エンジンを採用. Node.js自体は何の言語…

webにおける3D表現を扱う仕様・ライブラリについて 概要と詳細へのリンク X3D関連 X3D X3DOM webGL関連 webGL : webGLとは - ぱんだのびぼーろく openGL openGL ES Three.js webVR関連 webVR A-Frame 3D"モデル"に関わる仕様 どのような仕様・表記法で複雑な…

input要素のtype="checkbox"で出来ます. 見本 checkbox これラベルつき、ここも押せるよ 仕様書 https://html.spec.whatwg.org/multipage/forms.html#checkbox-state-(type=checkbox) 属性 checkedで最初からcheckされている状態 イベント チェックされたら…

selection.transition() あるselectionに対してtransitionsを適用可能にするmethods. 返り値はselectionの特別なタイプ. Starts a transition for the current selection. Transitions behave much like selections, except operators animate smoothly over…

wise9 › WebGLとはなんなのか、ゲーム好きの大学生に説明してみる webGL 1.0 WebGL is designed as a rendering context for the HTML Canvas element. The HTML Canvas provides a destination for programmatic rendering in web pages, and allows for pe…

webGL 基幹技術 WebGL - OpenGL ES 2.0 for the Web sketchfab 3Dモデル公開サイト&web viewer. webGLを基盤技術として、 各種3Dモデリングソフトのデータ→webGL を実現. 他のサイトに貼り込める3D viewer(ぐりぐり回したりできる)が凄い. Sketchfab - The p…

W3C standardsの策定年と依存関係 このサイトはよくまとまってる感じ. このサイトはとても詳しい. 以下は自分がW3CとWHATWGのspecificationをみてまとめたもの. DOM DOM3 core 正式名称: Document Object Model (DOM) Level 3 Core status: W3C Recommendati…