zenn 初投稿になります、kimihiro_n です。 先日リリースした個人開発のアプリケーションのはなしをしたいと思います。 作ったもの 最初に宣伝かねて作ったものの紹介を。 イラスト投下閲覧用に Twitter を使っているのですが、公式 Twitter だとイラスト以外の投稿もたくさん混ざって追いづらかったり、最適化の影響で見逃してしまうツイートがあったりと不便さを感じていました。 Twitter API を使ってこの辺いい感じにフィルタリングしたら快適になるんじゃないかと思い Web アプリケーションとして作ってみることにしました。 自分のタイムラインやリストをフィルタリングして表示するだけのアプリケーションですが Twitter で絵師さんを追いたいみたいな用途だと便利に使えると思うので是非試してみていただければと。 後述しますが PWA(Progressive web app

概要 Blenderで作成した3Dモデルを、Three.jsの中に取り込み、ブラウザで表示できるようになるまでの手順を示します。 Blenderは、3Dモデルを作成するのに適したソフトウェアです。 また、Three.jsは、ブラウザ上で動作する3Dモデルを作成するのに適した、JavaScriptのライブラリです。 なお、本記事では、どのようなフローでBlenderからThree.jsに3Dモデルを移行できるかを中心に記述します。そのため、Blenderでモデル作成、Three.jsの書き方についてはほとんど触れません。 手順 以下のような手順を実施していきます。 Blenderでモデルを作成する 作成したモデルをglTF形式のファイルにエクスポートする Three.jsにて、エクスポートしたglTFファイルをロードする Blenderでモデルを作成する 本記事ではモデルの作成方法の詳細では

人生初アドベントカレンダーです。よろしくおねがいします。 概要 Three.jsユーザーの皆さん、「Blender」、使っていますでしょうか？ BlenderはThree.jsと同じくオープンソースで開発されている統合型3DCGツールです。モデリングからコンポジットまで、CG作りはこれ一本で事足ります！ 今年の夏頃v2.8の大型アップデートがリリースされ、glTFのインポート/エクスポートがデフォルトでできるようになったりと、Web業界でも非常に熱いツールになってきたのではないかと思います。 ただ、Blender、統合型ツールということもあり、機能がいっぱいでこれから始める方には少しとっつきにくいところもあると思います。 というわけで今回はThree.jsユーザー目線でBlenderのおおまかな使い方を紹介したいと思います。 最低限の操作ができる、 モデルを配置することができる モデルのイ

最近趣味や仕事の Web アプリケーションでメモリリークに遭遇して、頑張ってメモリリークの原因を突き止めて修正する、ということがあった。その過程でメモリリークについて色々調べて知見が溜まったので、学習資料の紹介という形でアウトプットしてみる *1。 前置き 紹介する記事がかなり偏っていることに注意 冒頭で触れたメモリリークを解決するために読んだ記事をまとめただけなので、内容にそれなりの偏りがある 例えば id:mizdra が遭遇したメモリリークは全てブラウザ上で発生していたものだったので、これから紹介する内容も主にブラウザにおけるメモリリークに焦点を当てたものになる GC がどうメモリをどう解放しているか、何故メモリリークが発生するのかは全てカット 調べれば色々な記事が出てくるので、必要に応じて読んでください 基本的な知識を抑える まずメモリリークとメモリ撹拌の違いを学ぼう どちらも同じ

アクセスすればすぐに本が読める URL をメールや SNS で共有したり、 ブログやウェブページに EPUB を貼り付けることができるようになるのです。

この記事は WebAudio Web MIDI API Advent Calendar 2016 の21日目です。 ※ μ-Lawの表記など誤りがあったので訂正しました（2017.03.14） あらすじ WebAudio の ScriptProcesser を使って原始的な手法で音声の圧縮を実験してみたところ、現代の音声圧縮コーデックのMP3やAACの凄さを思い知りました。 WebAudioのデータ量 WebAudioで音声をデータとして取得するには、ScriptProcessorを使いますよね。その時の1秒当たりのデータ量はどれくらいでしょうか？ サンプルリングレート まずサンプリングレートを確認してみましょう。 var ctx = new window.AudioContext(); console.log(ctx.sampleRate); 実行してみたところ、環境によって異なることが

今年6月に、実践TypeScript という書籍で、Nuxt.js に TypeScript を導入する方法を執筆させて頂きました。「書籍で扱っている Nuxt.js のバージョンが少し古いけど、今現在はどうするのが良いの？」という読者の方から寄せられた疑問に、アップデートとして私的見解をここにまとめました。（といっても、すでに日本語の良記事で紹介されている内容と変わりなく、n番煎じですmm） typescript.nuxtjs.org 少し日が経ちましたが、Nuxt.js の 公式TypeScript導入ガイド が公開されています。このガイドは、最新の Nuxt 2.10 以降向けとして書かれています。更新が目的であれば、Migration from Nuxt 2.8 を必ず確認するようにしましょう。 custom server framework で異なる型定義 基本的に 公式Type

Moment.jsは、新規開発停止、メンテナンスモードに移行 Moment.jsは、新規機能の開発停止、メンテナンスモード(セキュリティ修正とMoment Timezoneのデータ更新は行う)に移行することが発表されています。これから新規開発するプロジェクトでは、別のライブラリを使うことが推奨されています。 僕の新規開発のプロジェクトでも当初はMoment.jsを使っていましたが、リリース前にこの発表が出たので、別のライブラリに変更することにしました。 Moment.jsのドキュメントページに、推奨ライブラリが4つ掲載されていたので、その中から選ぶことにしました。 Luxon Day.js date-fns js-Joda 簡単に結論が出るケース Day.jsを使うべき人 Moment.jsからの移行 Moment.jsを使い慣れている人 Day.jsはMoment.jsと同じAPI体系を

本書は、Micro Frontends Architecture Patternsというタイトルを付けていますが、モノリスからJAMstack、Micro Frontendsまで、Webフロントエンドを包括した様々なアーキテクチャパターンの詳細を体系的に紹介しています。 ソフトウェアとしてのアーキテクチャ全体を俯瞰し、他のシステムとのやりとりを設計するような考え方が役に立つことは多いです。フロントエンド観点で、様々なアーキテクチャパターンをまとめることで、Web開発の助けになればと考えています。 また、アーキテクチャの歴史と変遷を知ることで「Micro Frontends」への理解を深めることができると筆者は考えました。Micro FrontendsはThoughtWorksのTechnology RadarではすでにADOPTとなり、海外で多くの事例が存在します。Micro Fronte

DMM.com Advent Calendar 2018 6日目の記事です。 おはようございます、アドテクノロジー部の津久井(@kkkdev )と申します。 前職は MotecoBeautyというスマホアプリやアドフリくんという国産SSP等の開発に携わっており、 昨年12月にDMMに参画いたしました。 アドテクと自動テストによるQA（品質保証）の関連性 クロスブラウザ・モバイルOS.... ブラウザ / モバイル実機による検証・および自動化は、webサービスやモバイルアプリ開発者のみならず アドネットワークやSSP等のアドテク界隈でも重要視されています。 参考: QA（品質保証）チームによる実機端末をつかった自動／手動テストの裏側（アドテクセンター通信） 自動化のミドルウェアはいくつか知られていますが、今回はその中から、古くから ブラウザの自動テストに用いられているSeleniumと、ブラ

たった数分で環境構築が完了！TypeScriptでWebアプリケーション開発ができるフレームワーク「frourio」が本当に手軽だった。 こんにちは、エンジニアのづやです。 突然ですがエンジニアのみなさん、TypeScriptに触れた経験はありますか？ TypeScriptはGitHubが毎年発表しているランキングで今年4位に急上昇したくらい、もっともアツいプログラム言語の1つです。 出典：https://octoverse.github.com/ しかし、いざ試してみようと思っても、 フレームワークは何を使えば良い？ どうやって導入したら良い？ など、意外とハードルって高くないですか？ そこで「frourio（フルーリオ）」という画期的なフレームワークを見つけました。こういうのってある程度経験を積んだエンジニアでないと使いこなせない……というケースも多いですよね。 でもfrourioはそ

この記事は、Next.js Advent Calendar 2020 の6日目。 突然だが、2021年 は Fullstack Next.js 元年になる。 その理由として自分は以下のものがあると思っている。 ベストプラクティスとしての TypeScript のデファクト化 Next.js の Dynamic Routes による動的パス、 getStaticProps/getServerSideProps による使い勝手の向上 Vercel によるISRの発明 prisma の成熟 Vercel / Serverless / Cloudflare Workers / Cloudrun 等による Node.js サーバーの運用コスト減 参考: Frontend Study #1: 基調講演 - Frontend 領域を再定義する Blog - Next.js 9.3 | Next.js R

清貧を自称する割に外車SUVを乗り回す憧れのエンジニア @morygonzalez 氏がウェブ縄文時代の到来 という記事を書いていたのに感銘を受けて私も縄文時代をお迎えすることにした。 私もプラットフォーム依存から脱却して安心を得たい。GoogleのbloggerからGatsbyJSで縄文土器もといマイブログを作ることにした。 GatsbyJSを選んだのは最近良くjavascriptを書くからでHUGOにするかすこし迷った。 Markdownでブログを書いたことがなかったので今回初挑戦。 メモはscrapboxをいつも利用させていただいているので https://github.com/progfay/scrapbox-parser を使ってscrapboxからコピペでブログ記事にできるようにしたいと考えている。 ブログは極力シンプルにしたかったので gatsby-starter-defau

この記事では、Web アプリケーションにおけるデータ取得（データフェッチング）やレンダリングに関する各手法について比較・整理することを目的として、特に最近注目度が高まっている Next.js における SSG（静的サイト生成）や ISR（インクリメンタル静的再生成）、それ以外の手法（SSR、CSR 等）を具体的なテーマとしてお話しします。 Twitter もやっているのでよかったらフォローおねがいします！ @_thesugar_ 記事内の解説は正確性を期すよう注意を払っておりますが、誤っている部分などがございましたらコメント欄や Twitter 等でご指摘ください はじめに Web アプリケーションを作るとき、レスポンスの速さをはじめとしたパフォーマンスの問題は開発者にとって大きな関心事となります。 たとえば、最近では Google が Core Web Vitals という Web のパ

James Starkie Posted on Oct 25, 2020 • Updated on Oct 27, 2020 • Originally published at jstar.mx My thinking: if I'm going to build websites that are fast and reliable, I need to really understand the mechanics of each step a browser goes through to render a web page, so that each can be considered and optimised during development. This post is a summary of my learnings of the end-to-end process

JavaScript Primer 迷わないための入門書 Tweet Watch Star Twitterのハッシュタグ: #jsprimer これからJavaScriptを学びたい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる書籍です。 プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、 今のJavaScriptアプリケーションを読み書きできるように書かれています。 初めてのプログラミング言語としてJavaScriptを学ぶ人は、まずは「はじめに」から読んでみてください。 書籍版 このウェブサイトの内容はアスキードワンゴから書籍として出版されています。 書籍版の内容はウェブサイト版と同一ですが、本として読めるように最適化されています。 書籍版は次のサイトから購入できます。 Amazon 達人出版会（電子書籍版