Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

現場のES201x と未来のアーキテクチャ - インサイドフロントエンド2

Creator of Ruby on Rails, Founder & CTO at Basecamp (formerly 37signals), NYT Best-selling author of REWORK and REMOTE, and Le Mans class-winning racing driver. Modern JavaScript doesn’t have to mean single-page, client-side MVC apps.Stimulus 1.0: A modest JavaScript framework for the HTML you already haveWe write a lot of JavaScript at Basecamp, but we don’t use it to create “JavaScript applicati

Javascriptで音を鳴らすにはどうしたらいいかなぁと 色々調べてみました いくつか方法がありますが ①audioタグをJavaScriptで制御する ②WebAudio APIで再生する 今回はローカルの音を鳴らすにはどうしたらいいか考えました。 ①はローカルのリソースをaudioタグのsrcに指定すれば鳴らせます ②はXHRもしくはinputタグのfile属性からのファイル取得（File API）限定なため、 ブラウザの仕様上結構難しい ①でいいじゃないかという声が上がってくると思いますが iPhoneやAndroidではaudioタグの複数同時再生ができなかったりします 逆にWebAudio APIなら複数音同時再生できます。 （上記とは別にスマホブラウザでは①、②ともに ユーザアクションがないと再生できないという制限があります） ちなみに②のinputタグから取得する方法だと、

Angular on Electron 初めまして､私が@jialipassionです､初めてQiitaで投稿して､宜しくお願いします｡ 今までhttps://github.com/angular/zone.js でいろいろContributeしていますが､今日はElectronでAngularの開発でいくつヒントを共用します｡ Angular on Electron Electron Native API (NgZoneを利用する) 新しいzone-patch-electronの使い方(自動Patch) Angular on Electron ElectronでAngularの開発は普通のElectronの開発とあまり差がありません｡ https://github.com/maximegris/angular-electron をベースに直接やってもいいですが､自分で@angular/c

import { app } from "hyperapp" import { div, h1, button } from "@hyperapp/html" const state = { count: 0 } const actions = { down: value => state => ({ count: state.count - value }), up: value => state => ({ count: state.count + value }) } const view = (state, actions) => div([ h1(state.count), button({ onclick: () => actions.down(1) }, "–"), button({ onclick: () => actions.up(1) }, "+") ]) const

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 12/1 に Qiita のトップページをリニューアルしました。これまで React を使っていましたが、それをやめて hyperapp を採用しました。まわりを見てもあまり採用事例が見当たらないので、この記事では一体なんで今をときめく React ではなく hyperapp を選択したのか、どういうところが魅力的なのかについて プレゼンテーション層を実装するためのツールとして 学習コスト の観点から書きたいと思います。なおこの記事に書かれていることは全て個人の感想であり、はっきりいって個人の日記レベルです。 それと hyperapp

この記事は「WACUL Advent Calendar 2017」の20日目です。 WACULでフロントエンドエンジニアをしている@bokuwebと申します。 はじめに みなさんはお気に入りのテスト構成はあるでしょうか。よく耳にするのはjest、AVA、karmaを用いた構成でしょうか。個人的には最近はAVAを使用することが多いのですが、その際の不満を解消するためにモジュールを作った話しを書きたいと思います。 つくったもの AVAとは avajs/ava: Futuristic JavaScript test runner 紹介記事は他にも色々ありますので多くは書きませんが、sindresorhus氏作の、曰く未来型のテストランナーです。若干古いですが以下に日本語での記述もあり、なぜAVAなのか?に特徴が記載してあります。 例えばPromiseを使用したテストは以下のように記述できます。同

2017年9月からGoogleのプレミアムパートナーでもある株式会社ゴーガでエンジニアをしており、Google Maps APIとAngularを使って地図関連のWebサービスを開発しています。 特にテーマが思いつかないので、直近でハマったことについて書きます。Google Mapのようなサードパーティーのライブラリを使用した際に注意しておきたいことです。 はじめに Google Mapのマーカー（地図に表示される指標）をクリックした時に、マーカーの情報を元にAngularのコンポーネントを更新する処理を書いていたところ、Angular Materialのダイアログがうまく開かないという問題が発生しました。なぜだろうと思っていろいろ調べていたら、マーカーをクリックした時にコンポーネントのngAfterViewCheckedが全く反応していない（ビューが更新されていない）ことに気付きました。

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに またのタイトルを「Chrome開発で必要なことは、みんなWeb MIDIが教えてくれた」。まぁ、実際にはまだまだ足りない事がいっぱいあって、Kinuko先輩やマネージャーのマイケルから色々と学びながら修業の日々です。 さて、カレンダーで記事を追っている人は、そろそろChromium/ChromeにAPIを追加してみようと考えはじめている頃かと思います。この記事ではWeb MIDIの実装を例に、ChromeにAPIを追加する手順を追ってみたいと思います。 例によって、この記事は個人によって書かれた物で、GoogleやChromi

8. フロントエンドに関連するSEO情報 1. WRS (JSレンダリング) 2. MFI (Mobile First Index) 3. PWA (Progressive Web Apps) 4. AMP (Accelerated Mobile Pages) 5. 構造化マークアップ (Schema.org , json-ld) 10. 1. WRS Date Article 2014年5月 「JavaScript実行後のHTMLのインデックスを行っている」と Googleが発表 2014年5月 WebマスターツールにJavaScriptレンダリングテスト機能を 追加 2015年3月 SEO検証！ GoogleはAngularJSを正しくクロールするのか？ （2015年2月版） はじめに JSで描画したHTMLも検索対象として解析させる為の 取り組み。 11. 1. WRS Date A

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめまして、ひらのです。Blink 上でネットワーク関連の API (XHR, fetch API, WebSocket, …) の実装や、ローディング関連の実装を行っています。 本稿では、Fetch API における Request および RequestInit の keepalive プロパティの実装について解説します。このプロパティの実装は、Chromium のリソースローディングパスのかなりトリッキーな既存実装をいじる必要があり、また、Chromium のマルチプロセスアーキテクチャを意識することも必要なため、(いわゆる下位

りんごです。 この記事はAngular Advent Calendar 2017の12月15日の記事です。 はじめに よくあるWebの入力フォームのある画面や何かしらのデータを編集するWebアプリの画面など、不意に誤ってブラウザのタブを閉じてしまうと悲しい思いをするケースがあります。 そういった画面を実装するには、次のようにwindowのbeforeunloadイベントを使うことで離脱確認ダイアログを表示するのが一般的です。 しかし、AngularではwindowのイベントだけでなくRouterによって画面遷移を制御します。そのため、beforeunloadイベントだけではページ離脱確認を実装しきれません。 今回はAngularでのページ離脱確認の実装方法を紹介します。 CanDeactivateを使う Angularでページ離脱確認を行うには、beforeunloadイベントを処理するだ