JP Contents Hub
AWS 日本語ハンズオン Amazon Web Services(AWS) の 日本語ハンズオンやワークショップを、カテゴリごとにまとめています。 右側の目次や、ヘッダー部分の検索ボックスから、各コンテンツにたどり着けます。 また、Ctrl + F や command + F を使ったページ内検索もご活用いただけます。 料金について ハンズオンで作成した AWS リソースは通常の料金が発生します。作成したリソースの削除を忘れずにお願いします。 もし忘れてしまうと、想定外の料金が発生する可能性があります。 画面の差異について ハンズオンで紹介されている手順と、実際の操作方法に差異がある場合があります。 AWS は随時アップデートされており、タイミングによってはハンズオンコンテンツが追いついていない事もあります。 差異がある場合、AWS Document などを活用しながら進めて頂けますと幸い
加工なし CSS のみで画像にグリッチと RGB ずらし効果をかける
はじめに 以下のツイートが500いいねを超えましたので解説記事を書きます。 デモ＆ソースコード CodePen に完成品のデモとソースコードを置いてあります。 グリッチとは 元々は「一過性の障害」という意味ですが、映像の世界ではしばしば「映像の乱れ」という意味で用いられます。ホラーやサイバーなどでよく見られる演出の一つ。 https://www.google.com/search?q=glitch&tbm=isch RGB ずらしとは 色収差、RGB シフト、RGB split (RGB 分割) など、さまざまな言い方がありますが、要するに本来光の三原色である Red、Green、Blue がズレることなく重なって映像を映し出すところ、それがズレた状態で表示されることです。 グリッチエフェクトと一緒に用いたり、場合によっては色ズレも含めてグリッチと言ったりしますので、今回も合わせて実装する
Go言語が好きな理由
はじめに 私はGoが好きなので、disられている場面に遭遇すると心が痛みます。残念ながらプログラミング言語について深く語れるほどの知識や経験は持ち合わせていないため、世界が平和になることを祈るくらいしかできません。 （元ネタ）Go言語を嫌う6個の理由 - さめたコーヒー それはそれとして、Goが好きな理由を語る人はあまり見かけない気がします。この記事ではGoが好きな理由を視覚に障害のあるユーザーの視点から語ります。読み終えたところで得るものは何もありませんし、長いので覚悟して読んでください。 あなたは誰？ 4年ほど業務でサーバーサイドのGoを書いています。また、業務で使いはじめる前から趣味でGoに触れていました。そのため無意識の内にひいきしているかもしれません。ただし、流行っているからといって理由もなくGoを勧めたりはしません。 視覚障害ならではのコーディング事情 Goが好きな理由と深く関
note版 突然画力が伸びだした時、僕が発見した事｜安倍吉俊
これは、僕のYouTube動画の台本です。台本、というと、これを朗読しているみたいですが、これをこのまま読み上げているわけではなく、話す内容を整理したり、それを頭に入れるために、まずこのくらい書かないといけないので、コツコツと文字を打って、何度も読み返して、それから話すようにしています。 普段はもう少しメモ書きに近いのですが、今回はしっかり書いたので、noteに置いてみます。 動画はこちらです。あっ、台本の時とタイトル違う……。 これは、僕の予備校時代のある気づきに関する話です。漫画やイラストではなく、鉛筆の石膏デッサンの話ですが、イラストでもこの考え方はそのまま使えます。 絵は基本的には手を動かさないと上手くなりません。でも、ただ枚数をこなしても、上手くなるとは限りません。予備校時代、何年も浪人していて、でもあるレベルで止まってしまう人もいたし、現役生でスイスイと上達していく人もいました
フロントエンド初心者がGatsbyでブログを作り直した話 - As a Futurist...
フロントエンド初心者が無事に Hugo のブログを Gatsby で一から作り直すことができた。その振り返り。 歴史 インターネットを小中学生(もはや 25 年以上前)に触り初めた頃に、HTML で文章の構造を作り CSS でデザインする、ということができるのを知って感動したけど、結局自分には何かが合わなくてそれを突き詰めることができなかった。というか、それを知ったが故にテーブルレイアウトとかがどうしても気に入らず、かといって CSS は float が難しすぎて、結局ウェブサイトを作る、という根本的な営みをずっと避けてきてしまった。 時は過ぎ、Wordpress の様なブログエンジンや Hugo の様な仕組みがあったおかげでブログを初めて続けることはできた。13 年前にレンタルサーバに Wordpress を置いて始めたこのブログも 9 年前には VPS での Wordpress 運用に
小型のゲーミングPCを自作すると楽しいし、数年前の常識が通用しない - SANOGRAPHIX Blog
2020年は自作PCシーンが大いに盛り上がり、話題に事欠かない年だった。そんな空気に感化されて、去年の11月頃、4年ぶりにゲーム用PCを新調した。 ステイホーム需要もあるのか、これまでになく自作PCへの関心が高まっていると感じる。また、PS5が品薄でなかなか手に入らなかったり、コンソール版Cyberpunk 2077が満足に動かなかったりして、PCを買いたいと考える方もいるかもしれない。 そのような、興味はあるが実際どうなのと思っている方、または数年前に自作経験のある復帰組（いわゆるSandy Bridgeおじさん）へのなにかの参考になるかもしれないので、小型ゲーミングPC自作について自分の意見を書こうと思う。 置き場がない！ PCを買うとき、自分が最も困るのが置き場所。なので、机や棚に置ける小型のサイズ（SFF・スモールフォームファクタ）で自作するのが好きだ。小型PCは組立てが難しいとか
bivarianceHack とは何か、なぜ必要なのか
TypeScript に bivarianceHack と呼ばれるテクニックがある。 これは、関数を意図的に双変（bivariant） にするテクニックだ。著名なところだと React の型定義で使われている type EventHandler<E extends SyntheticEvent<any>> = { bivarianceHack(event: E): void }["bivarianceHack"]; 実は自分はこのテクニックをとあるコードベースで使ったことがあるのだが（そしてそこにはある程度やむを得ない事情があったのだが）、当然初めて見たメンバーにとっては意味がわからない箇所となってしまった。 実際 bivarianceHack が必要になる事情を説明すると結構話が長い上に込み入ってしまうので、この記事でできるだけ噛み砕いてその背景を説明しようと思う。 TL;DR Type
TypeScript and React
Welcome to this little primer on TypeScript and React! A match made in heaven! Why? JSX is syntactic sugar. Every JSX element you open and pass properties through, is nothing but a function call in React (or Preact or Vue or Dojo… you name it). This gives us one big advantage in TypeScript: JavaScript can be parsed, understood and evaluated. Which means you get all the tooling and compilation bene
Webブラウザ上で純粋なHTTPだけで単方向リアルタイム通信を可能にするHTTPのストリーミングアップロードが遂にやってくる - nwtgck / Ryo Ota
Web標準のHTTPクライアントfetch()でストリーミングしながらアップロードできるようになる。
Cloud Firestoreで「いいね」機能を実装するときの勘所
Cloud Firestoreで「いいね」機能を実装するときの勘所Tuesday, December 31, 2019 何かしらのサービスを作る際に、ユーザー同士のコミュニケーションを促進させる機能の一つに、 TwitterやInstagramなどのサービスでおなじみの「いいね」機能があります。 機能としては 投稿等に「いいね」をつけることができる（♡だったり☆だったりシンボルは様々) 「いいね」がどれだけついたか、その数がわかる (最近だとInstagramがいいねの数の表示をなくしましたね🤔) 投稿等に「いいね」をしたユーザーの一覧が見れる 自分が「いいね」をした投稿等の一覧が見れる といったものが挙げられます。 このような機能ををFirebase、Cloud Firestore(以下Firestore) を使って実装する場合、 どのように実装するのか、どのような設計が良いのか、 逆
アーキテクチャ大全 - kawasima
お気に入り / ページネーション / 検討リスト / カテゴリ毎の件数表示 / Conversation threading / オートログイン / 途中保存 / 予約 / 未読管理 / アンケート
コールスタック上にある関数の引数にアクセス - mooz deceives you
arguments no title を見ていて気づいたこと. function foo(x, y) { bar(); } function bar() { alert(foo.arguments[0] + ", " + foo.arguments[1]); } foo("x", "y"); // => x, y bar(); // TypeError: foo.arguments is null foo("x", "y") とすると, 以下のような流れで bar から foo の引数にアクセスできる様子. foo("x", "y") でコールスタックに foo が積まれる foo 内で bar() が呼ばれ, コールスタックに bar が積まれる bar 内では foo.arguments とすればコールスタック上にある一番近い foo の引数にアクセス可能 一方, 直接 bar() と
スタートアップ SVG 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
GEEKs in OSAKAFlash モーションプログラミング + 大阪てら子
2009年4月 東京で開催のロクナナワークショップ「 GEEKs Flash モーションプログラミング 」が、「関西でも開催して欲しい！」と多数の嬉しいお問い合わせをいただき、この度 大阪 で開催することになりました。 「GEEKs」は自由な発想でテクノロジーを駆使し、モノを作る楽しさと独創性を刺激するセミナーイベントです。 今回のテーマは、Flash ActionScriptによるモーショングラフィックスです。 本イベントでは、ROXIK の 城戸雅行（きどまさゆき）氏と alumican.net の 奥田透也（おくだゆきや）氏をゲストに迎え、ActionScript 3.0で複雑なモーションプログラムを構築するための、考え方や手法をご紹介していただきます。 大阪イベントでは特別に、地元 Flashコミュニティ「 大阪てら子 」協力のもと拡大版として実現！大阪てら子からは、代表の シナチ
作って納得! DOM 2 Events: Days on the Moon
ブラウザ上でのプログラミングで避けては通れないのがイベント処理。その仕組みは DOM Level 2 Events にて規定されています。しかし、とりあえず addEventListener メソッドを使ってはいるものの、それがどのような意味を持つか詳しくは知らないといったことはありませんか。そこでここでは、DOM 2 Events のイベントモデルを理解し、ブラウザが裏で何をしているのかを把握するために、実際にそのイベントモデルを実装してみることにします。具体的には、仕様書に定められたインターフェースを JavaScript で実装し、それらを組み合わせてイベントの発生をシミュレートしてみます。 Event インターフェース EventListener インターフェース EventTarget インターフェース DocumentEvent インターフェース DOMException イン
JGate (AppJet) の使い方 - P A R A G R A P H S
今さら感あふれてるっぽいけど JavaScript でサーバサイドもプログラミングできる JGate というサービスを使ってみたらすごく面白かったので、使い方を簡単に解説してみる。 JGate っていうか、もともとは AppJet というアプリケーションホスティングサービスがあったんだけど、Google に買収されてホスティングを止めてしまったため、その代替として AppJet と同じホスティングサービスを提供しているのが JGate という感じらしいです。 JavaScript でサーバーサイドを書けるのだけで十分楽しいんだけど、さらに面白いと思ったのはサーバサイドのソースコードも全部誰からでも見えてしまうこと。強制オープンソースというクライアント JavaScript の特性がサーバサイドにまで適用されている。 IDE とアプリケーションファイルの構成 アカウントを作って "Creat
補完付きのテキストボックス - がむしゃらにコードを書き続けるブログ
デモ var Suggest = function(input, suggest, dic) { this.idInput = document.getElementById(input); this.idSuggest = document.getElementById(suggest); this.dic = dic this.idx = -1; this.serchWord = ""; this.init(); }; Suggest.Key = { UP: 38, DOWN: 40, RETURN: 13, TAB: 9, ESC: 27 }; Suggest.forEach = function(array, func, obj) { for (var i = 0; i < array.length; i++) func.call(obj, array[i], i, array);
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DOM ECMAScripting
はてなブログ | 無料ブログを作成しよう
DomAPI sandbox