Cacooチームエンジニアの川端です。普段はCacooのエディター(編集画面)のフロントエンドの開発をしております。最近パパになったので娘の写真を親に共有するアプリを作ってみました。その際に、Web Componentsなる機能を使ってみました。JSフレームワーク群雄割拠の昨今、ライブラリを使わずWeb Componentsだけでどこまでできるのかご紹介したいと思います。 Web Componentsとは？ Web Componentsとは、HTMLの要素をカプセル化して再利用可能なパーツにするためのブラウザのAPI群です。ReactやVueやRiotでいうところのコンポーネントをライブラリを使うことなく素のJSだけで作ることができる技術になります。 Web Components | MDNによると次のように記されています。 Web Components は、オープンなウェブテクノロジーを

このステージの詳細についてはThe TC39 Processを参照してください。 2ヶ月に1度行われるTC39のミーティングにおいて、プロポーザルごとにステージを進めるかどうかを議論します。 このミーティングの議事録もGitHub上のtc39/tc39-notesにて公開されています。 ステージ4となったプロポーザルはドラフト版であるtc39/ecma262へマージされます。 そして毎年の決まった時期にドラフト版を元にしてECMAScript 20XXとしてリリースします。 この仕様策定プロセスの変更は、ECMAScriptに含まれる機能の形にも影響しています。 たとえば、class構文の策定は最大限に最小のクラス（maximally minimal classes）と呼ばれる形で提案されています。 これによりES2015でclass構文が導入されましたが、クラスとして合意が取れる最低限の

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

※1：メディアとアプリの月間利用者数の合算値。 ※2：『ママリ』の初回登録時に入力された出産予定日と、厚生労働省発表「人口動態統計」から算出。 なぜ『ママリ』は愛される？ ユーザーに支えられるサービスづくりのウラ側 「人がどうしたらもっと『健やか』に生きることができるのか、それを考え続けた結果が今の『ママリ』なんです」 こう語ってくれたのが大湯俊介さん。「ママの一歩を支える」をテーマにしたお悩み解消アプリ『ママリ』の生みの親だ。 大学卒業直後の起業を経て、クリエイター向けのサービスをリリース。試行錯誤の末に『ママリ』の着想に辿りついた。彼らが目指すのは、子育てにまつわる悩みをもつママたちが、お互いに相談し合い、自信をもって一歩を踏み出せる社会を形作ること。 『ママリ』はどういった道を経て、今のカタチに辿り着いたのか。なぜ、ママに必要とされるのか。大湯さんへのインタビューを通じ、ユーザーに愛

可及的速やかにReactが絶滅しますように。 以下はFront-End Developer Handbook 2018の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール 開発者向けドキュメント、APIリファレンス Dash 200以上のAPIリファレンス、100以上のチートシートを一括ダウンロードできる。有料、Mac用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。有料、Windows用。 Zeal Windows、Linux、MacOS用各種揃っている無料のオフラインドキュメント。 チートシート devhints.io JavaScript、CSS、Go、vim等のショートカット、書式などチートシート。字が薄くて見辛い。 SEOツール Key

Web Components is a technology I’ve been excited about for years. The idea is that you can create your own UI components that are supported in the browser regardless of which framework you are using (or none at all for that matter). However, there wasn’t much traction around them until recently. The web components APIs are pretty low level by themselves but projects like Polymer are trying to impr

2018.02.16 Web Components を本番投入する（2018年春） とあるプロジェクトの技術監修をして、大まかに Web Components + Payment Request API な構成で進めてみたのでその話を思い出しながら書く。ちなみに FRESH! ではないです。 決済基盤をサービスで使うための SDK Payment Request API でお察しの通り、新たな決済基盤のプロジェクトで、それを使うための SDK を読み込んでボタンを配置すれば決済できる…みたいなものを作った。Payment Request API は、対応している環境ではそれで、対応していない環境では旧来の通り決済代行業者が用意しているフォーム付きページへ遷移させるという形でビジネスサイドへ提案した。 技術面に関しても、FRESH! で導入済みだったこともあり、いざとなればサポートできるとい

流行りの monorepo 風味と DDD 風味？ 今回はコードの設計について書き残します。主に JavaScript 界の話です。Web アプリケーション全体の設計は次回で、今回はコード面の設計に限定して書き留めています。プロダクト全体のアーキテクチャは次の記事で述べる予定ですが大雑把には、メディアっぽいサービスでありつつも SPA + SSR が許容される程度には要件定義の時点でコードの行数がかさむことが約束されたプロダクトです。 今回は大きく分けて下記について述べています ディレクトリ構造 オブジェクトの種類と責務 Flux 的なデータフロー あくまで風味なので今回、専門用語の意味ズレなどは優しくお願いします... このシリーズの他の記事はこちら。 技術要素編: web アプリが新陳代謝を続けるための依存関係の厳選 ビルド設定編: UA に応じた最適な JS バンドルの配信と web

at DevSumi 2018

私たちの音楽の好みは14歳の時に聴いた音楽によって形成されていることが、新たな研究により明らかになった。 『NY Times』によると、リスナーの生まれた年が音楽の好みを左右しており、14歳の時に聞いた音楽が私たちの音楽の好みに最も重要な影響を与えるとのこと。 今回おこなわれた、Seth Stephens-Davidowitzによる音楽の好みに関する研究。Spotifyのデータをもとに人々の聞く音楽を分析した結果、10代の時聞いた音楽が、その後の音楽の好みに最も大きな影響を与えることが判明した。 1960年～2000年のBillboardのチャートを調査し、それを年齢別の選曲ランキングと照らし合わせて分析。男性の場合は13～16歳の間にリリースされた曲が、大人になってからの音楽の好みに大きな影響を与えるとのこと。平均すると、男性の最も好きな曲は、14歳の時にリリースされた曲であることが多い

話題になっている任天堂対コロプラの特許侵害訴訟、裁判資料に閲覧制限がかかっていたため、どの特許が問題になっているのか明らかではありませんでしたが、ようやく閲覧制限が解除されたようで、WSJ紙の望月記者が裁判記録を閲覧してツイッターで報告されています（多謝）。 ということで、以下、簡単に内容を説明していきます。 3734820号については、以前に私が書いた記事の勝手予想が当たっていました。内容については当該記事をご参照ください。以下、残りの4件（のうちの2件）について簡単に解説します（公報に直リンが張れるようになったのは助かりますね）。主要クレームのみ見ていきます。 特許4262217号 「ゲームプログラム及びゲーム装置」 【請求項１】 ゲーム画像が表示される表示画面上の位置を指示するためのポインティングデバイスを備えるゲーム装置のコンピュータに、 前記ポインティングデバイスからの出力信号に

W3CのWebAssemblyワーキンググループは、「WebAssembly」仕様に関する初めてのワーキングドラフトを公開した。WebAssemblyはすでに主要なブラウザで実装が進んでいるため、このまま順調に勧告となるのではないか。 マイクロソフト、Google、Mozilla、Appleなどの主要なWebブラウザベンダが協力して、Webブラウザ上でネイティブコードに近い実行速度で高速に実行できるバイナリフォーマット「WebAssembly」の開発に取り組んでいます。 すでに実装の面では、昨年2017年11月の時点でChrome、Firefox、Safari、Edgeの主要なWebブラウザでのWebAssembly対応が揃っていますが、同時にW3CにおいてWebAssemblyの標準化作業が進められています。 そのW3Cから、WebAssembly仕様について初めてのワーキングドラフトが

はじめに 昨年新卒でSIer企業に入り、現在オンラインチャットアプリの開発に取り組んでいるのですが、 その過程でビデオチャットを取り扱う機会がありました。 WebRTCについての知識がないものでだいぶ苦戦したため、 一度WebRTCの基本的な仕組みを理解して「とりあえず動く」を脱しようと思い色々調べてみました。 WebRTCって？ WebRTCとは、Web Real-Time-Communicationのこと。 HTML5で新しく策定されたAPIの規格で、 P2P通信でブラウザ間のリアルタイムコミュニケーションを実現するための仕組みです。 WebRTCにおけるAPIは次の2つの仕様で策定されているそうです。 カメラ/デバイスへのアクセス Media Capture and Stream ビデオ/オーディオ/データ通信を行う WebRTC 1.0: Real-time Communicati

2018年2月6日 なぜプロダクトに Vue.js を採用したのか? 運用してみてどうっだった? という話 余り知られていませんが Nagisa ではアプリだけでなく Web のプロダクトやサービスもあります。マンガZERO や UPTOON! や 月刊コミックジヘン 辺りがそうです。 何れも Vue.js で作られている SPA で、社内・外両方から “なんで Vue.js なの?” とかよく聞かれます。そこで、今回はどうして Vue.js を選択したのか、Vue.js の何がいいのか、Vue.js で運用してみてどうだったかの話をしたいと思います。 はじめに Vue.js を導入する前のマンガ ZERO Web は 2.0系の Riot で作られていました。今ある SPA のような形ではなくサーバサイド (Go) にてメタタグを生成、空のマウントポイント <div id="app"><

More quality, less noiseExport as GIF, MP4, WebM, or APNG with optional audio, highlight clicks and trimming. How Kap was built The power of open-sourceThe ease of use and speed you’ve been looking for – the functionality and extensibility you didn’t know you needed.

WebGLを扱う際には行列計算というのがどうしても必要になってきます。だいたいは既存のライブラリを使ってなんとかしたりするのですが、現状あまり選択肢は多くありません。そこで新しいライブラリであるMatrixGLを作って公開しました。 経緯 私はたまにWebGLをいじるのですが、やっぱりどうしても行列計算が面倒です。WebGL用の行列計算ライブラリというと、glMatrixという有名なライブラリがあるのですが、昔ながらのC言語的なAPIで、どうしてもJavaScriptでは使いにくく感じていました。OpenGL自体とは相性いいAPIだとは思うんですけどね。 「まあ誰かがそのうちJavaScript的な使いやすいの作ってくれるだろう」とずーーーーっと待っていたのですが、待てど暮らせど全く出てこないという状況でした。みんなglMatrixで満足してるのか、それかThree.jsとか使ってるから特

Qiitaで記事にCodePenのPenが埋め込めるようになったので、実際に作りつつ埋め込み方を紹介します。 CodePenのエディタの開き方 CodePenにアクセスし、ログインまたは登録後「Create」→「New Pen」を選びます。 するとエディタ画面が出ます。 HTML, CSS, JSなどを入力してSaveします。 埋め込み方 エディタ画面の右下のバーに Embed という項目があるのでクリックします。 するとモーダルが出るので、HTML形式を選択してボックス内のHTMLタグをコピーします。 コピーしたHTMLは以下のような感じになると思います。 <p data-height="265" data-theme-id="0" data-slug-hash="dJgNLK" data-default-tab="js,result" data-user="tomoasleep" da