少し前からアウトラインエディタを作ってる。 こんなの (画面は開発中のものです) ファイルツリー 複数シート同時編集 ファイルツリーUIというのをスクラッチで初めて作ってみたんだけど、「当然こう動いて欲しいよな」というヒューリスティックな挙動をたくさん作るハメになってて学びがある。 なぜ作ったか 技術書を書いて Kindle Direct Publishing で販売しようと思って、Macで売れてるアウトラインエディタを一通り試したんだけど、惜しい物が多くて、個人的にしっくり馴染むものがなかった。なので、技術書を書く前に、自分が本を書くために必要なツールを作るところから始めることにした。 作家・藤井太洋に聞く 「小説を書くためのツール、Scrivener」 - DOTPLACE を読んで、その辺のアプリに対する感覚を自分でも意識して作ってる。Scrivener は wysysig なんで自

Angular2+ SPA に JavaScript 実装の QR コード読み取り機能を搭載するにあたり、既存の JavaScript ライブラリを選定した結果発表JavaScriptTypeScriptQRcode 現在開発中の Angular2+ SPA プロジェクト ( モジュールバンドラーは webpack を採用 ) に、デバイスのカメラを使って QR コードを読み取る機能を搭載することとなりました。 そこで、QR コードを検出・読み取りする JavaScript 実装のライブラリを選定することとしました。 結論: jsQR https://www.npmjs.com/package/jsqr ( GitHub ) Apache-2.0 イメージを渡すと、そのイメージ内の QR コードを検出・読み取って返すのみに特化されているライブラリです。 カメラや video 要素の制御につ

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

はじめに またのタイトルを「Chrome開発で必要なことは、みんなWeb MIDIが教えてくれた」。まぁ、実際にはまだまだ足りない事がいっぱいあって、Kinuko先輩やマネージャーのマイケルから色々と学びながら修業の日々です。 さて、カレンダーで記事を追っている人は、そろそろChromium/ChromeにAPIを追加してみようと考えはじめている頃かと思います。この記事ではWeb MIDIの実装を例に、ChromeにAPIを追加する手順を追ってみたいと思います。 例によって、この記事は個人によって書かれた物で、GoogleやChromium Projectの意見を代弁する物ではありません。 ちなみに、Chromium/Chromeの名前の使い分けは曖昧なところがあるのですが、ここではChromiumはProject名、ChromeはChromium Projectの成果物の1つで、Goog

りんごです。 この記事はAngular Advent Calendar 2017の12月15日の記事です。 はじめに よくあるWebの入力フォームのある画面や何かしらのデータを編集するWebアプリの画面など、不意に誤ってブラウザのタブを閉じてしまうと悲しい思いをするケースがあります。 そういった画面を実装するには、次のようにwindowのbeforeunloadイベントを使うことで離脱確認ダイアログを表示するのが一般的です。 // beforeunloadイベントのreturnValueにtrueを設定し離脱確認ダイアログを表示する window.addEventListener('beforeunload', function(event) { event.returnValue = true; }); しかし、AngularではwindowのイベントだけでなくRouterによって画面遷

これは Angular Advent Calendar 2017 4日目の記事です。 こんにちは (｡･ω･｡) Angular で CGM サービスを運用・構築したり、ng-japan の slack で emoji を追加することを生業としている者です。 今回は、担当しているサービスで Virtual Scroll を導入する機会があったので、その経緯と方法について紹介したいと思います。 今回の動作 demo は コチラ * この demo は、いずれ落とすことになると思いますのでご了承くださいm(__)m ↓ 動いている様子 demo 用に 100 件のデータを投入しましたが、どんなにデータを読み込んでもページ間の遷移速度が落ちない様子がわかると思います。 なぜ Virtual Scroll が必要だったのか サービス内で使われるリストは、新着一覧やランキング等様々なページの要となる

WebGLの現状と未来を、Grimoire.jsを生んだスーパークリエータに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、東京理科大学4年の石井翔さんです。 石井さんのセッション「WebGLの今とこれから ~今のWeb開発で使うからこそ知っておきたい周辺技術~」に関するスライド資料は、こちらで公開されています。 スライド資料 （注: 重いのとモバイルから見えないのはご容赦ください by 石井翔さん） 白石: 本日は取材をお受けいた

Nintendo Switchの中ではReactが動いてる！Nintendo eShop開発秘話を聞いてきた 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回は、「Nintendo SwitchとWeb」という講演をされていた任天堂さんに、Switch開発におけるWeb技術の活用方法や、開発秘話を伺ってきました。任天堂のお二人は京都から、リモートでの取材に応じていただきました。 Nintendo SwitchではWeb技術が大活躍！ 白石 簡単に自己紹介をお願いで

Learn how to style like a pro using Shadow DOM selectors, Light DOM, @HostBinding, ElementRef, Renderer, Sanitizer and much more Geometric Shapes by SasjIn this guide we want to cover the different options available when styling Angular Components and Directives. We will cover: Angular Encapsulation Modes: emulated, native and disabled.Browser support, Shadow DOM vs Light DOM.@Component styling me

追記：（2017/06/09 00:16） 本記事内に掲載している動画キャプチャが、 Apple.Incの開発者利用規約（APPLE BETA SOFTWARE PROGRAM AGREEMENT APPLE INC.）に抵触しているというご指摘をいただきました。 掲載内容を不適切と判断し、該当箇所を削除させていただきます。Apple.Inc及び読者の皆様に深くお詫び申し上げます。 追記：（2017/07/14 16:32） その後Apple.Incより、自分つくったアプリケーションのスクリーンショットの公開はOKという見解をいただきましたので、 スクリーンショットを再度掲載しました。 1. ざっくりGIFアニメでまとめると こんな感じです。 2. はじめに 昨日、iOS11のMobile SafariがgetUserMediaでカメラにアクセスできることに気づき、しゃかりき急いで この記

お詫びと訂正：（2017/06/08 23:32） 本記事内に掲載しているスクリーンショットが、 Apple.Incの開発者利用規約（APPLE BETA SOFTWARE PROGRAM AGREEMENT APPLE INC.）に抵触しているというご指摘をいただきました。 Apple.Incの開発者利用規約から、掲載内容を不適切と判断し、該当箇所を削除させていただきました。 Apple.Inc及び読者の皆様に深くお詫び申し上げます。 追記：（2019/02/17） Navigator.getUserMediaが非推奨となったため、MediaDevices.getUserMediaを使うように修正しました。 Navigator.getUserMedia - Web API | MDN MediaDevices.getUserMedia() - Web API | MDN ざっくり1行でま

多様なユーザーニーズに応える フロントエンドデザインパターン 書籍「インクルーシブHTML+CSS & JavaScript」より 太田 良典 伊原 力也 2017.09.24 HTML5 Conference

こんにちは！ がねこまさしです。2014年に連載した「WebRTCを使ってみよう！」シリーズですが、内容がすっかり古くなってしまいました。そこで2016年6月の最新情報に基づき、内容をアップデートして改めてお届けしたいと思います。 WebRTCとは？ WebRTCとは”Web Real-Time Communication”の略で、Webブラウザ上でビデオ/オーディオの通信や、データ通信を行うための規格です。HTML5で新しく策定されたもので、複数の技術の連携で成り立っています。 ちなみに策定には複数の団体が絡んでいています。 API → W3C ビデオ/オーディオのコーデック → IETF APIの策定作業はWebRTC 1.0に向けて大詰めに入っています。またより詳細な低レベルのAPIを定義しているORTCも登場し、将来の統合に向けた動きも始まっています。 コーデックの選定では、ブラウ

また、プログラムをきっかけに、参加企業独自のスパム対策も始まったとのことである。 現在この動きに参加しているのは、NTTレゾナント、サイバーエージェント、シーサー、GMOペパボ、はてな、ピクシブ、ヤフー、楽天の8社。日本でも著名なホスティングサービス企業ばかりだ。利用者数を合わせたら一体どのくらいの数になるのだろうか？ 膨大なユーザーをかかえる企業とグーグルが力を合わせることで、ウェブスパムが減ることを期待したい。 この活動は8社に限ったものではなく、新規参加を募集している。大手でなかったとしても、ホスティングサービスを運用しているなら、ウェブの健全化のために一緒に取り組んでみてはいかがだろうか。詳細はブログ記事を参照してほしい。 スマホアプリに対抗するプログレッシブ ウェブ アプリとは？ ★★★★☆ PWAを可能にするService Workerが読み込まれるページは1日に133億 （W

投稿開発部の外村（@hokaccha）です。今回はReactについてのお話です。 ReactとSPA 最近JavaScriptやそれを取り巻くフレームワークなどの話題では、サーバ側はAPIのみを提供し、View(HTML)は全てJavaScriptで描画するような、いわゆるシングルページアプリケーション（以下SPA）についてよく語られます。 一方で、SPAを構築するにはコストがかかることも事実で、特にフロントエンドエンジニアが多くない環境では、従来通りサーバーサイドでViewを書きつつ動的な部分だけJavaScriptで処理するというアーキテクチャのほうが現実的な場合も往々にしてあります。 今回はこのような、サーバー側でHTMLを生成し、一部の動的な部分だけをReactで書くためのTipsを紹介します。 なお、基本的にサーバーサイドはRails前提ですが、RailsにおけるReactの開発

2016/09/27 React.js meetup #4 LT発表資料 http://reactjs-meetup.connpass.com/event/39793/