CSSやJavaScriptのミニファイ（軽量化）、HTMLやCSSやJavaScriptやSQLのフォーマッター、各種エンコード・デコード、ダミーテキスト・ダミーデータ・ダミー画像・クレジットカードのジェネレーター、diff（ファイル比較）など、Web制作に役立つツールがまとめて利用できるSmallDev.toolsを紹介します。 いろいろなツールが揃っているので、ブックマークしておくと便利です。 SmallDev.tools smalldev-tools -GitHub SmallDev.toolsの特徴 SmallDev.toolsは、Web制作に役立つさまざまなツールが一箇所でまとめて利用できる便利サイトです。完全に無料で利用でき、登録など面倒なことは一切ありません。 最小限のインターフェース🤩 電光石火の速さ⚡ 広告はなし💩 プライバシーフリー🔐（データはすべて、サーバーに
プロジェクトで使われている技術と ESModule の状況について UIT では、 SPA 開発のプロジェクトにおいて Vue.js と React が多く利用されており、既存の多くは Babel を利用した JavaScript で、新規のプロジェクトでは TypeScript を利用して開発が行われています。 FYI: 【LINE DEV DAY 2019 番外編】UIT Front-end Tooling Survey 2019 技術選定は勿論、プロジェクトにおける細かなコーディングルールについては、プロジェクトのコードオーナーに委ねられており、プロジェクトごとに裁量を持った意思決定を行っています。 その上で、私が携わるプロジェクトにおいては、 default export を可能な限り避けるように心がけています。 import 側の裁量で対象を自由に命名できてしまう 今回は「『Da
何の話かと言うと 普段、UI に関わらないバックエンドのコンポーネントを作っているエンジニアがフロントエンドのコーディングを理解しようとすると、色々と異次元な世界で混乱する（というか何をやっているのかをすぐに忘れる）ので、バックエンドエンジニアにわかりやすい形で React の仕組み（メンタルモデル）をまとめてみました*1。 ブラウザの画面に描画される個々の要素を「コンポーネント」と呼ぶ。 自分で定義したコンポーネントを HTML タグを使って表示することができる。 コンポーネントは関数として定義する。この関数は、HTML タグで指定された時の属性値を受け取って、コンポーネントを実際に描画する HTML の塊（React 要素）を返す。（つまり、コンポーネントを指定した HTML タグが、コンポーネントからの返り値の React 要素で置換される。） Javascript の関数はクロージ
はじめに 先日、職場で「自分が 改修したor 書いちゃった いちばんやべー関数」ネタで盛り上がりました。 みんないろいろ話してくれましたが、やっぱり僕の書いた「コマンドパターンのメインループ関数(1500行)」の圧勝でした。 なんであんなコード書いたんだろ。 そこで、今日は僕の傷ついたプライド癒すべくgithubから「世界でいちばんやべー関数」を発掘します。 つまり、「俺が書いた関数よりやべー関数に会いに行く」 結論 マジでやべー関数は次の2つ 「opencvリポジトリのcv::agast_cornerScore<AgastFeatureDetector::AGAST_7_12s>関数」(複雑度1868) 「SuiteCRMリポジトリのOpenTag関数」(複雑度1509) 言語毎の傾向に着目すると... javascriptにはやべー関数が多い python/java/swift/rub
いまどきな JavaScript に入門しよう！『流麗な JavaScript』を読んで（上） - 虎の穴開発室ブログ
こんにちは。虎の穴ラボの古賀です。 9 月の連休で社内の技術書購入を支援する制度を利用して購入した『流麗（ELOQUENT）な JavaScript 第 3 版 現代のプログラミング入門』を読みました。 流麗なJavaScriptの書影 良い本でしたので、本書の前半部分の概要とその中で良かったところや気になったところをご紹介します。 どんな本か 基本情報 オススメする読者層 著者、訳者について 構成について Chapter1〜3：プログラムの基礎的なところから、制御フロー、関数など Chapter1 Chapter2 Chapter3 Chapter4 Chapter5 Chapter6 Chapter7 Chapter8 Chapter10 Chapter11〜22：未読 良かったところ サンプルコードの実行環境や練習問題がある 初心者がつまづきがちなところについて説明がある 気になった
要素をドラッグして移動することは、JavaScriptにおいて頻出パターンです。 しかし、それを簡単に実現するコードは意外と知られていません。 <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove = function(event){ if(event.buttons){ this.style.left = this.offsetLeft + event.movementX + 'px' this.style.top = this.offsetTop + event.movementY + 'px' this.style.position = 'absolute' this.draggable = false this.setPointe
導きのはじまり おぉ、貴方は…褪せ人ですね。 そして、エルデンリングを求め、この狭間の地にやってきた。 この先、プログラミング学習の攻略に繋がる貴重なアイテム が、7つあるぞ すごいなにかだと思うだろう？ 以下の記事を、ご照覧あれい！ 1. 強い敵はスルーして先に進む プログラミングを勉強していると、序盤にツリーガードのような強敵が現れることがありますが、 スルーして先に進むことが大事です。 序盤から強敵と戦うと、ボコボコにされて心が折れます #include <stdio.h>は、こういうもんだと「おまじない」としてスルーする。 var body: some Viewや、fn longest<'a>など、 見慣れない表記を見ても、いったん気にしない。前に進む。 強敵は、力を付けてレベルが上ってから再戦しましょう。 目の前に現れたすべての敵と戦う必要はありません。 ボスまでのルートを開通す
2022年4月27日 CSS, HTML, Webサイト制作 料金表やサービスプランの比較、タイムテーブルなどなど、使う場面が多い割には制限も多く、初心者には少しとっつきにくいと思われがちな表。今回はあると便利な表の見出し固定やレスポンシブ対応の方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 見出しの行を固定する 表の中の行が増えてくると、スクロールした時に表の見出しが画面から見えなくなり、なんの値だったのかがわかりづらくなります。そんな時のために、行数の多い表では一番上にくる見出しの行を固定しておくといいですね。 まずはベーシックな表を作成します。table タグに border-collapse: collapse; を指定することで、セル間のスペースがなくなってフラットな見た目になりますよ。 HTML <table> <tr class="heading"> <th>車
はじめに 今回の記事では、プログラマーが情報収集で必ず確認するべきWEBサイトを8つ一覧形式で紹介する。本記事の読者の対象は主に以下の通り。 プログラミング初心者 情報収集で困っているプログラマー 他のプログラマーの情報収集を参考にしたいプログラマー 効率よくプログラミング学習を進めたい人 プログラミング学習を楽しくさせるサイトを知りたい人 freeCodeCamp.org 世界最大規模のプログラミングメディア「freeCodeCamp」の公式サイト。8,000以上のチュートリアルがあり、しかも無料でPythonやJavaScriptなどのプログラミング言語の基礎的な文法、機械学習、WEB開発やモバイル開発などをこの１つのサイトで体系的に学べる。プログラマーは全員このサイトを確認するべきである。 GitHub 世界中のプログラマーがソースコードを共有したり、共同でプロダクトを開発したりする
こんにちは、あるいはこんばんは。村山です。皆さまGoogleアナリティクス4(以下、GA4)との戯れには慣れてきましたでしょうか。GA4の使い方は「完全に理解した」という方もいれば「まだまだこれから計測実装していくから触っていない」みたいな方もいらっしゃるのではないかと思います。 今回は、後者である「これからGA4を計測実装していく」方にむけて、どのようにGA4の計測実装を推進したら良いのか書いていこうと思います。 どのようなイベントを計測するべきか？ データに関わる方が1名と少ない場合 データに関わる方が2名以上の場合 データ計測の設計書となるドキュメントが必要だ GA4はさまざまなイベント計測方法がある GA4管理画面内の「イベントの変更」 GA4管理画面内の「イベントの作成」 GA4管理画面内の「オーディエンストリガーイベント」 GTM内からイベントタグの発火 GA4の計測設計にはN
昔は海外の電波を発する新製品は国内で使用できなかったが、今は総務省の技適の特例制度を利用することでいち早く試すことができる。 「海外法令」云々のところで多少つまづいたが、これはFCC IDを検索すれば解決した。 https://fccid.io/BCGA2117 VisionProのFCC IDはBCGA2117だった。 これで準備完了。 吾輩は、かつては1990年代にキヤノンのMR(混合現実感)システムや理化学研究所のSR(代替現実感)システムを試し、大学院の履修生をやっていた頃はVR特講を受講し、学生対抗国際VR(人工現実感)コンテストに参加したこともある。htc Viveでいくつかのデモを作り(ほとんどは非公開)、Oculusもほとんど持ってるくらいはHMD好きである。片目リトラクタブルHMDで自転車の走行を支援するシステムのデモも2008年頃に作った。 2017年には機械学習したM
Good Bye Web APIs
When building a single-page application or a mobile application, we usually need to implement a web API (REST, GraphQL, etc.) to connect the frontend and the backend. Technically, it's not very difficult, but it has some unfortunate consequences. Imagine two planets. The planet "frontend" speaks JavaScript and the planet "backend" also speaks JavaScript or any other advanced language. Now let's sa
note_vuln.md noteの独自ドメインセッションの脆弱性について報告した件 文責: mala 前置き note.com (以下note) に2020年に報告した脆弱性(現在は修正済み)を解説する 個人の活動として行っており所属組織とは関係がない 自分がnote社に対して、問題があると指摘していたのは主に広報対応についてですが、この記事は技術的な知見を共有することを目的とするため、技術的な解説を中心にします。 公開にあたってはnote社に対して確認の上で行っています。note社による修正対応は2021年までに実施されていますが、その修正内容が適切であるかどうかについて保証するものではありません。(網羅的な確認や追加の検証をしていません) note社のサービスに他の脆弱性が無いことを保証するものではありません。 経緯 2020年9月30日に公開されたnote社の記事で https:/
Pythonのコードを1行書くだけで誰でも手軽にインタラクティブな地図アプリを作れるLeafmapを使ってみよう - Qiita
※公式サイトのデモ映像です。これがPythonのコード1行で作れます。 https://leafmap.org/ データ確認ってめんどくさくないですか GISデータってよくわからないな、なんだそれ。っていう方がいきなり上司に「いろんなデータが蓄積されてきたから、地図上に可視化して分析してみよう。」とか「誰でも手軽に閲覧できるように、Web上にサイトを構築しよう」なんていう話をされたら多分キレますよね？ GISデータを日常的に利用していてもそれはさほど変わらず… GISデータを取り扱う中で、主にデータの前処理などを行っている方は同じような悩みを抱えているんじゃないかなと思うんですが、データの可視化ってめんどくないですか？ いや、QGISとかデスクトップGISでデータ処理しているならサクッと見れちゃいますし、実際頻繁に使うんですが、サーバーで定期的に行うバッチ処理のためにローカルでプログラミン
こんにちは😉 @ryokotmngです。 今日は社内ドキュメントの、Rust初心者向けのクックブックを公開しようと思います。 私自身コードを書くのに四苦八苦していた頃にとても助けられたので、Rustをはじめたばかりの方の参考になれば嬉しいです。 目次 [toc] はじめに この記事では、The Bookに記載されている知識を前提としています。 Rustを全く書いたことがない方は、先に読んでみることをお勧めします。 サンプルコードが結構長いこと、実行環境があった方が良い内容も多いことから、サンプルコードは大体Rust Playgroundのリンクとなっています。 ぜひご自身で修正して遊んでみてください。 単位つきの計算を型で厳格に縛る 例えば複数の長さの単位 (mm, cm, mなど) を扱う場合に、単位が合っていない長さ同士の計算をする場合、単位を揃える必要がありますね。 この時、最終的
2022年になりました。矢倉眞隆（@myakura）と申します。昨年に引き続き、新春特別企画のブラウザとウェブ標準を担当させていただきます。 なお、取り上げるトピックの数やインパクトの大きさもあり、CSSについては別記事となりました。あわせて読んでいただければ幸いです。 ChromeとFirefoxがバージョン100に到達 昨年の新春企画でもすこし触れましたが、今年はChromeとFirefoxのバージョンが100になります。 Chrome 100は、今年の3月29日にリリース予定です。もともとはもう少し先だったのですが、Chrome 94からリリースサイクルが4週間に短縮されたため、Chrome 100のリリースが早まりました。 Chromeよりも早く4週間のリリースサイクルに移行していたFirefoxも、5月3日にFirefox 100がリリース予定です。 バージョンが3桁になることで
Log4jで話題になったWAFの回避/難読化とは何か
はじめに 2021年12月に発見されたLog4jのCVE-2021-44228は、稀に見るレベル、まさに超弩級の脆弱性となっています。今回、私はTwitterを主な足がかりとして情報収集を行いましたが、(英語・日本語どちらにおいても)かなりWAFそのものが話題になっていることに驚きました。ある人は「WAFが早速対応してくれたから安心だ！」と叫び、別の人は「WAFを回避できる難読化の方法が見つかった。WAFは役に立たない！」と主張する。さらにはGitHubに「WAFを回避できるペイロード(攻撃文字列)一覧」がアップロードされ、それについて「Scutumではこのパターンも止まりますか？」と問い合わせが来るなど、かなりWAFでの防御とその回避方法について注目が集まりました。 実はWAFにおいては、「回避(EvasionあるいはBypass)」との戦いは永遠のテーマです。これは今回Log4jの件で
ChromeのDevToolsの便利機能まとめ
池田 泰延 @clockmaker ウェブ制作会社ICS代表。筑波大学非常勤講師。HTML/CSSのフロントエンド技術が専門、TypeScript/WebGLによる3D表現やクリエイティブコーディングが得意。著書『JavaScriptコードレシピ集』など解説書12冊を執筆。ウェブ業界の最新情報と、現場で役立つ技を発信します。趣味でタイムラプス撮影。 ics.media/entry/staff/ik…
これはすごい！ HTMLの新機能、popover属性でポップオーバーがJavaScript無しで簡単に実装できるようになります
先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。 今まではポップオーバーを実装するのにはJavaScriptを使用し、ポップオーバーの開閉・フォーカス・アクセスフックなど面倒でしたが、popover属性で実装すると驚くほど簡単で、さまざまなUIコンポーネントに利用できます。 Introducing the popover API by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに HTMLのpopover属性とは ポップオーバーのデフォルト、オーバーライド 自動ポップオーバーと手動ポップオーバー popover属性とdialog要素の違い 近日公開予定の便利な2つの機
Three.jsの勉強の仕方 - Qiita
概要 Three.jsの勉強を始めて半年くらいが経過しました。 現在は、以下のようなアプリケーションを作成できるようになりました。 https://nemutas.github.io/r3f-normal-color/ ここまでに至る過程を少しまとめられたらと思います。 React Three Fiber について 私は主に、React Three Fiber（Three.jsをReact用にラッパーしたライブラリ｜以下、R3F）を使用して開発してます。 バニラのThree.jsを触る前に、つまりThree.jsの知識がゼロの状態のときからR3Fを使い始めました。 とてもよく設計されたライブラリで、ほんの数行でBoxを表示することができます。 ただし、よく設計されているということは、それほど抽象化されているということです。学び始めの頃は自分が作りたいシーンを作るために、どのプロパティをいじ
この連載では、Notionであらゆるものを作れるとご紹介してきました。Notion単体でも非常に強力なツールなのですが、実は他のツールやサービスと組み合わせることによってさらに実現できる世界が広がります。 今回は、Notionを便利にするサービスをご紹介します。 1. リッチなWebサイトを作れる「Wraptas」 リッチなWebサイトを作れる「Wraptas」 Wraptas https://wraptas.com/ Notionの標準機能としてもWebに公開することはできますが、Wraptasを利用するとさらにカスタマイズできるようになります。 独自ドメインを利用できる JavaScript, CSSを設定できる SEO向けの設定ができる 例えばBLAM社の採用サイトやSHIBUYA SLOW STREAMのサービスサイトはWraptasによって作られています。一見するとNotionで
現代のWebアプリケーションエンジニアとして最低限の常識TODO - shimobayashiパブリック
古代のWebアプリケーションエンジニアなので、現代との差分を身に付けていくぞ！ 個人的なスキルセットの差分を埋めるためのものなので、誰にでもマッチするものではありません。 習うより慣れろの精神で、読んで終わりじゃなくて手を動かします。 コンテナ化 x done.icon The Twelve-Factor App （日本語訳） done.icon What is Amazon Elastic Container Service? - Amazon Elastic Container Service 機械翻訳がひどかったので英語版をGoogle翻訳で読むほうがマシそう メニュー1階層目だけ全部読んで、気になるところがあれば深堀りする ↑で物足りなかったらKubernetes完全ガイド 第2版 impress top gearシリーズ | 青山真也 | 工学 | Kindleストア | Ama
GitUML
Understanding source code is every programmer's biggest challenge GitUML helps programmers understand new code more quickly. Understand code quickly Rapidly generate diagrams from programming source code. Diagrams from git repositories - automatic diagram updates when you push! Upload source code files Live UML Fiddle converts source code into UML as you type UML Fiddle (Python) UML Fiddle (Javasc
トランスパイラ「Babel」の開発チーム、「何百万人にも使われているのに、なぜ私たちの資金は尽きようとしているのか？」。資金難により寄付を訴え
トランスパイラ「Babel」の開発チーム、「何百万人にも使われているのに、なぜ私たちの資金は尽きようとしているのか？」。資金難により寄付を訴え 「Babel」は、JavaScriptコンパイラもしくはトランスパイラの代表的なツールとして知られており、FacebookやSpotify、Slack、MongoDBなどさまざまな企業や開発現場で使われています。 そのBabelの開発チームが資金難になっていることを、開発の中心となっているコアチームがブログ「Babel is used by millions, so why are we running out of money?」（Babelは何百万人にも使われているのに、なぜ私たちの資金は尽きようとしているのか？」で明らかにしています。 Babelとは、ECMAScript 15以降のいわゆるモダンなJavaScriptの構文や機能を活用して書
サーバーレスの次はなんなんだ
はじめに この記事は、同人誌サークル「めもおきば」から不定期刊行している技術解説本「めもおきばTecReport」に書いたものを公開用に再編集したものです。 ⇒ めもおきばTecReport 2023.12 この記事のほかにも「私もSecHack365に参加したい！」や、「2023年振り返りと2024年技術予想」としてこんなキーワードを取り上げているので、気になったらぽちっとしてください！ メガクラウドと特化型クラウド／ハイパーバイザーのSoC化／ライセンスとクラウドベンダー／イベント駆動型API／LLM時代のAIペアプロ力／生活必需品としてのGPU・NPU／Passkey／ウェブアクセシビリティ／リアルイベントの再開 サーバーレスの次はなんなんだ サーバーレスと呼ばれる技術ムーブメントが盛り上がり始めて8年近くが経ちました。各クラウドベンダーのFaaS（Function-as-a-Ser
そもそもなぜSteamで公開するのか この記事ではSteamにフォーカスしましたが、実際はこのゲームはWeb上から直接遊べるし、WebViewでラッピングしてGooglePlayにも公開しています。 SteamとGooglePlayに出した最初の理由は、大きなプラットフォームの力を借りて集客するためです。 LPだけオープンして待っていたとこで誰も遊びに来てはくれないわけです。 なので正直、「Webブラウザで遊べるのに、集客のためだけにわざわざダウンロードしてもらうなんてアホくさいな」、と思っていました。 しかし今となっては、むしろSteam経由で遊んでもらいたい思いのほうが強いです。 Steamのストアに並ぶことは思っていたよりも嬉しくて、 例えるなら、小説を書いたとして、今まではコピー用紙に印刷してホチキスで止めたものを皆に配っていましたが、 今回はちゃんと本になって、カバーがついて、書
TypeScriptは、JavaScriptでも大規模なアプリケーションを開発しやすくすることを目的に開発されたプログラミング言語です。 確かにJavaScriptは元々、大規模な開発を想定した設計ではありませんでした。それでも、JavaScript自体が進化して、大規模開発に対応してゆけば良かったはずです。しかし、実際はそううまくは行きませんでした。代わりに、大規模開発の一部はTypeScriptが引き受けることになったのです。 なぜ、そうなったのでしょうか？その答えはJavaScriptの歴史にあります。TypeScriptが必要な発明で、そして、今もなお必要とされている理由が見えてきます。それでは、TypeScript誕生以前の歴史をひも解いていきましょう。 1990年代JavaScriptの誕生JavaScript誕生以前は、簡単なフォームのバリデーションをするのも、サーバーサ
Vue.jsを100時間ほど勉強して分かったことを整理します。 勉強時間の内訳は、 Udemyの Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex) をだいたい全て完了（85時間） 実際に自分でコードを書いてみた（15時間） です。 学習開始時のレベルは、JavaScript・jQueryはそれなりに扱うことができ、過去に少しだけReactを勉強したことがある感じでした（専門は Ruby on Rails）。 Vue.js 自体の構文 まず、Vue.js 自体の基本的な構文を整理します。 Vue インスタンス Vue インスタンスの書き方は次のような感じです。 new Vue({ el: "#app", data: { name: "Kei", age: "30", counter: 0 }, methods: { increas
この記事は Front-End Study #3 で発表されたライブコーディングの内容を記事にしたものです。記事中のソースコードは GitHub でご覧いただけます。 この記事は、これまで一般的なフロントエンドエンジニアだった私が一年ほどアクセシビリティーについて勉強する上で 「最初に教えてくれればよかったのに〜！」と思った内容 を React と Next.js を用いて紹介するものとなっています。 読み終わった後に次にコードを書く際にふと意識できるようなアクセシビリティーの普遍的な事実を紹介し、最後に今後の React の動きについて軽く触れるものになっています。目次は次のとおりです： 基本事項 SPA のルーティングによる問題 リッチなコンポーネントでの例 Jest + React Testing Library でのテスト Reactとアクセシビリティーの今後の動き 役に立つweb
Rust で Web バックエンド開発をはじめる | CyberAgent Developers Blog
こんにちは。サイバーエージェント AI 事業本部 Dynalyst にて、ソフトウェアエンジニアをしている豊田（@helloyuki_）です。また、Rust 領域における Next Experts も務めています。 先日、CA BASE NEXT という CyberAgent が開催する20代が中心のカンファレンス[^1]に、私も一応20代ということで登壇させていただきました。 内容は Web アプリケーション開発を Rust で行った体験談を語るというものでした。実際に2018年〜2020年頃に Rust をとあるチームのアプリケーションに導入し、引き継ぎのために何をしたかという内容をお話させていただきました。 セッション自体は25分しかなく、またコード例をスライドからかなり削るなど、CG スタジオ仕様への対応が必要でした。というわけで、十分に伝えたいことを盛り込めたわけではありませんで
Reactチュートリアル2：レビューサイトを作ろう
本資料について 本資料は日本大学文理学部情報科学科の開講科目「Web プログラミング」の教材として作成されました。本資料は下記のライセンスの範囲内で、当授業以外でも自由にご利用いただけます。 対象読者 本資料は、以下の教材を学習済み、もしくはそれと同等以上の知識を持っていることを前提としています。 React チュートリアル：犬画像ギャラリーを作ろう 基本情報技術者試験レベルの関係データベースの知識 本資料で学ぶこと 本資料では以下の内容を学びます。 Express と Sequelize による API サーバー開発 React と API サーバーの連携 Cross-Origin Resourcer Sharing React によるルーティング Auth0 によるユーザー認証 Heroku による API サーバーの公開 ライセンス この作品はクリエイティブ・コモンズ 表示 4.0
なぜ中国の天才青年は日本で起業し、AI歌声合成ソフトをヒットさせたのか？Synthesizer Vの開発者、Kanru Huaさんインタビュー｜DTMステーション
小学校2年生のころからプログラミングを始めた －－Synthesizer Vの話に入る前、Kanruさんの子供時代について伺いたいのですが、最初のコンピュータに興味を持ったのはいつごろだったのですか？ Kanru：3歳のころ、父からもらったおもちゃで電気の仕組みに興味を持つようになり、小学校に入ったころからラジオ作りなどをしていました。コンピュータもラジオ作りと同じころで、小学校2年生のころにAdobe（当時はMacromedia）のFLASHを使ってプログラムを組むようになったのが最初です。友達がみんなゲームで遊んでいたのに、親が厳しかったので、ゲームはダメと言われていました。そこで、FLASHを使ってクラスメイトが持っているゲームを真似して作ってみたのです。親も自分が作るゲームならいい、と。 Profile Kanru Hua（華 侃如） ●1997年生まれ・中国上海市出身。英語で授業
KADOKAWAグループが、ニコニコ動画で使うストレージをオンプレミスのストレージから米RSTOR社の「RSTOR」に変更することが12月10日、分かった。現行の体制から運用コストを9割削減できる見込みという。 ニコニコ動画では既存のストレージにJavaScriptやCSSで制作したコンテンツ、ユーザーのアイコン画像、ログデータなどのサイズの小さいデータを億単位で保存しているという。 RSTOR社の販売代理店を務めるTwoFive（東京都中央区）によると、多くのクラウドストレージサービスでは、データの保存容量に加え、データの転送容量に対しても利用料が発生。ニコニコ動画のように、転送量が多い場合はコストがかさむという。データ転送では利用料が発生しないRSTORを採用することで、現行ストレージに比べ運用コストを10分の1に押さえられるとしている。 従来のシステムでは、大量のデータを一度に処理す
ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？ 使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？ この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas（WebGL）の3つについて、それぞれのできること・できないこと（得意・不得意）を作例とともに紹介します。 クイズ：どうやって実現する？ webでできるさまざまな表現 下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas（WebGL）のいずれかを中心に実装されています
この記事について JavaScriptはお好きですか？ Reactなどフロンドエンドを中心に人気の言語なので、触ってる人はたくさんいると思います。 奥深くて自分も好きな言語ですが、結構なんとなくで触っていたりしませんか？ 今回は自分が後輩によく聞かれた事や、自分が引っかかった事をたくさん書いていきます。 つまり基本的には初心者向け、よくても中級者向けです。 何か一個でも知らない事があれば御の字のつもりで書いたので、ぜひ気軽に読んでください！ JavaScript編 略称はJS、Javaダメぜったい いなさそうなのに稀にいるという・・ Web開発から入ってプログラムを広く知らない場合に発生しやすい？ Javaは全く別に王者がいるので、万が一使っていたららやめましょう。 略称は JS（じぇーえす） でお願いします。 データ型、Object Objectはキーと値をいくつも持てるJSのデータ型で
米Googleが5月10日（現地時間）に日本語対応を発表したチャットAI「Bard」。ChatGPTなどの対抗馬とも目されるサービスで、SNSでも注目が集まっている。一方、発表時のプレゼンテーションに対して「Googleでもダメか」などと、落胆の声も出ている。原因はプレゼン資料で使っていたフォントだ。 GoogleはBardの日本語対応を発表する際、「Japanese」ではなく、大きく「日本語」と書いたスライドを使用。同時に対応を発表した韓国語と合わせ、各国の言語への理解をアピールしていた。ただし、使っていたフォントは中国語繁体字と思しきもの。「語」のごんべんの点がはねており、間違いではないものの、日本語ネイティブからすると少し違和感があるものだった。 Twitterでは「Googleに日本語フォントが理解されていない」「Googleの人、知らない言語のフォントとか興味ないんだね……」とい
プログラミングの勉強方法で最も効果がない方法は「写経」です。コードを記憶しても無駄です。実際のプログラミングでは記憶にないコードを作り出さなければいけないからです 「写経」はタイピング速度の向上やキーワードを覚える効果はあるかもしれませんが、肝心のプログラミングには役に立ちません — Koichi Nakashima (@ko1nksm) September 3, 2024 こういうエントリを見かけたので。 僕は1990年代からプログラミングを人に教える仕事をしています。最初は中学の時に技術家庭科の授業を先生から任されて同級生にプログラミングを教えることから始まりました。その後、色々な方法を試しましたが、結論としてプログラミング初心者は写経した方が結局は上達が速いと今は考えています。 それが特に強く感じられたのは2015年頃から色々な人にAI関連のプログラミングを教え始めた頃です。 AI関
TAK(@tak_dcxi)です。今回もCSSに関する投稿です。 以前このようなツイートをしました。 メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。 この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから
Reactのコンポーネント周りの用語を整理する
React のコンポーネント周りの用語ってごっちゃごちゃになった経験はありませんか? 友人と話すときなどはなんとなくのニュアンスで伝わるので気にしていなかったのですが、型注釈つけるときやコードリーディングするときに言葉の定義がわからなくなって何回も調べるといったことをよくやるのでこれを機に整理しようと思います。 本記事では JSX 以外にも createElement 記法の知識も要するので、自信がない方は公式やどうして JSX を使ってもエラーにならないのか？をご覧ください。 ここでは React のドキュメント JSX Elements Components TypeScript の型定義 JSX.Element ReactElement DetailedReactHTMLElement DOMElement FunctionComponent Component ReactNode
この文章はプログラマじゃない人向けに JSON を知ってもらうメリット、とくにAIとの効率的な対話方法を説明し、そしてあわよくばプログラマとも JSON の水準で会話してもらえたら嬉しい…というものです。 あなたは誰 UI を作るのが専門のエンジニアです。 エンジニア以外が使うノーコードのエディタを作ったりしてました プログラマじゃない人が JSON を知る利点 プログラマとして、プログラマじゃない人向けのノーコードなどを作っていたんですが、わかったことがあります。それは、「抽象的なロジックを記述するには訓練が必要だが、眼の前のデータとUIに対応したものは簡単に変更・記述できる」ということです。 自分の考える、もっとも成功したノーコードエディタこと Google Form JSON はよく知られているデータを記述する方法の一つです。特定の言語などとは関係ありません。 で、今現在 JSON
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブックマークしておくと便利！Web制作に役立つさまざまなツールが一箇所で利用できる -SmallDev.tools
なぜ default export を使うべきではないのか？
バックエンドエンジニアのための「React の仕組み」の理解方法 - めもめも
githubで最もやべー関数を発掘する - Qiita
JavaScriptで要素をドラッグして移動する簡単な方法 - Qiita
エルデンリングから学んだ、プログラミング学習に必要な７つのこと - Qiita
CSSで見出し固定＋レスポンシブ対応の表を作成
【決定版】プログラマーが情報収集で必ず確認するべきWEBサイト 8選(2022年10月時点)
GA4の計測設計には設計ドキュメントが重要な件 - ブログ - 株式会社JADE
Apple Vision ProはHoloLensの完成形。現時点での限界値｜shi3z
noteの独自ドメインセッションの脆弱性について報告した件
Rust Cookbook for Beginners - CADDi Tech Blog
2022年のブラウザとウェブ標準 | gihyo.jp
Notionを便利にするサービス16選 - Notionがあなたのチームを強くする(13)
Web屋がJavaScriptでゲームを作ってSteamで配信するまでの道のり - Qiita
TypeScript誕生の背景 | TypeScript入門『サバイバルTypeScript』
Vue.jsを100時間勉強して分かったこと - Qiita
今からでも遅くない！誰も教えてくれなかった React とアクセシビリティーの世界
ニコニコ動画、ストレージをオンプレから変更 運用コストを9割削減
君は使い分けられるか？CSS/SVG/Canvasのビジュアル表現でできること・できないこと - ICS MEDIA
JavaScriptをもうちょっと理解する54のトピック - Qiita
「Googleでもダメか」 チャットAI「Bard」日本語対応プレゼンに落胆の声 原因はフォント
初心者がプログラミングを学ぶときに最も効果的な方法は「写経」だと思う｜shi3z
iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる
プログラマじゃない人でもAI対話用にJSONを学ぶのが最高効率という提案