【Other】【CSS / jQuery / javascript】PWAでプッシュ通知を実装してみる（３）Firebaseでプッシュ通知に必要なトークンを処理する｜虹色ミツバチ
前回までの記事で、PWA化にはmagnifest.jsonとserviceworker.jsが必要と解説し、そのサンプルを掲載しました。 今回からは目標だったプッシュ通知について解説します。 プッシュ通知の仕組みとFirebaseを利用することにした経緯 PWAを使ったプッシュ通知では、ブラウザで「プッシュ通知を受け取る」設定をした時に、「トークン」が発行されます。 これはブラウザ単位で発行されるので、PCのGoogle ChromeとスマホのAndroidでは別々のトークンが発行されます。 この「トークン」に対して、PWAを利用したサイト（ウェブアプリ）の管理者がサーバーからCurlコマンドを叩くことでプッシュ通知を送信します。 すなわち、「トークン」をどこかに保存しておく必要がありそうです。 トークンを取得したとしても、プッシュ通知を１件１件送っていくのは時間がかかりそうな気がします。
【Nuxt.js】Firebase Storageに画像アップロード・削除する方法 | みんたく
前提条件Nuxt.jsとFirebase Storageの連携をします。firebase.jsにFirebaseとの繋ぎ込みの設定をしておきましょう。 ・firebase.js
React Native でアプリ開発をして良かったところ・ツラかったところ - BizReach Tech Blog
こんにちは。ビズリーチの新卒事業部でフロントエンドエンジニアをやっている円谷(@___35d)です。以前ビズリーチのデザイナーブログにも登場して、通勤風景の写真でチーム内で相当いじられました。興味ある方はぜひそちらも読んでみてください。今日はエンジニアブログの方を書いていきたいと思います。 さっそく本題ですが、2018 年 11 月に ビズリーチ・キャンパス for OB/OG がフルリニューアルされました。いままで WebView ベースで構築されていたアプリをリデザインし、React Native でフルネイティブ化しました。この記事では React Native を採用するまでに至った背景と、導入してどうだったのかについてお話できればと思います。この記事が、これから React Native を使ったアプリ開発を検討している方の参考になれば幸いです。 目次 はじめに 社内事情と技術選
PeerJSを今後も使い続けるのは危険
2023.11.21 追記 PeerJSは、2018.06頃から新しいメンテナーの方が登場し、メンテナンスされる状態になっています。PeerJSのご利用を検討される場合は、最新のメンテナンス状況を確認するのが良いかと思います。 — 以下、元記事 — PeerJS、WebRTCをかじった事がある人なら、殆どの人が聞いた事があると思います。PeerJSは、WebRTC技術を活用したアプリケーションを開発するためのJavaScriptライブラリとして、2012/12/23にgithub上で開発がスタートしました。 WebRTC黎明期を支えたPeerJSHTML5 Experts.jpで2014年に、開発者の一人であるEric Zhang氏にインタビューした記事から抜粋します。
WebRTCとPeer.jsを使った実装
9/5にLIGさんと勉強会をさせて頂きました。 その際に発表した資料です。 発表ではDEMOがありましたが、この資料では省かせて頂きました。Read less
最新版で学ぶwebpack 4入門 - BabelでES2017環境の構築(React, Three.js, jQueryのサンプル付き) - ICS MEDIA
最新版で学ぶwebpack 5入門 Babel 7でES2023環境の構築 (React, Vue, Three.js, jQueryのサンプル付き) ECMAScript 2015(略：ES2015)以上の言語仕様でJavaScriptを書くことが、昨今のウェブのフロントエンドエンジニアの基本テクニックです。しかし、ECMAScript 2015以上の仕様のJavaScriptで記述すると、Internet Explorer 11など古いブラウザでは動作しないこともあります。そこでBabelなどのトランスパイラと呼ばれるツールを使って、ES2015〜ES2023の仕様で記述したJavaScriptファイルを互換性のあるECMAScript 5に変換します。 トランスパイラとして一番有名なのが「Babel」というツールです。ただ、BabelにはECMAScript Modules（impo
[JS] アニメーションを行うのに、setTimeoutよりもrequestAnimationFrameを使ってみよう - YoheiM .NET
[JS] アニメーションを行うのに、setTimeoutよりもrequestAnimationFrameを使ってみよう こんにちは、@yoheiMuneです。 JavaScriptを用いてアニメーションを行う際に、setTimeoutやsetIntervalを使ってアニメーションループを実装することが多いと思いますが、 最近使えるようになってきたrequestAnimationFrameを使うと、よりいい感じにアニメーションを行うことが出来ます。 今日は、requestAnimationFrameという機能についてブログを書きたいと思います。 requestAnimationFrameとは requestAnimationFrameとは、setTimeoutと似たような機能で、ブラウザの次の描画の際に実行したい関数を指定することで、 ブラウザが次回描画時に呼び出してくれる機能です。 以下の
![[JS] アニメーションを行うのに、setTimeoutよりもrequestAnimationFrameを使ってみよう - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/d323a2b7291473a06ed756db826bc68649a55ebd/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F249.jpg)
npmjs.com で著名ソフトウェアによく似た名前のマルウェアが大量に発見された - Islands in the byte stream
Malicious packages in npm. Here’s what to do | Ivan Akulov’s blog People found malicious packages in npm that work like real ones, are named similarly real ones, but collect and send your process environment to a third-party server when you install them 訳: 悪意のあるパッケージがnpmで発見された。それらは、実際のパッケージによく似た名前で同じように動くが、パッケージのインストール時にプロセスの環境変数を外部のサーバに送信する。 発見されたパッケージの一覧は元エントリをどうぞ。このようなマルウェアである偽パッケージの一例をあげると、 ba
jQueryの読込み「ready」と「load」と「function」の順番について | web-wizardry
インターネット・スマホ、そしてテレビにwebの魔法をWizardry
たった1バイトの書き込みが引き起こすルート権限での実行の脆弱性 | POSTD
2016年9月22日（木）。こんなメールが私のもとに飛び込んできました。 件名： arescreatequery OOB write c-aresプロジェクト のメンテナのひとりとして、c-aresにセキュリティ問題の恐れがあるというメールを受け取ったのです。実際、そのとおりでした。この問題を知らせてくれたのは、かつてChromeOSの脆弱性をGoogleに報告したこともある人でした。 このc-aresの不具合を悪用すると、 ChromeOS上で、rootユーザーとしてJavaScriptのコードを実行できる ことがわかりました。ChromeOS史上最悪の脆弱性かもしれません。報告者には、相当な額の報奨金が贈られることでしょう。 この動きを実現したり、どうやって実現するのかを説明したりするのはとても面倒な作業だったでしょう。報告者がこれを発見したこと、そしてさらに深く掘り下げて、再現可能な
【Web Audio API + Web MIDI API】ブラウザで電子楽器を作ってみよう！
【Web Audio API + Web MIDI API】ブラウザで電子楽器を作ってみよう！ 河合良哉 ブラウザ上で音を扱うというと、直接音を加工できるWeb Audio API、ブラウザから直接MIDIデバイスと接続できるWeb MIDI APIの2つがここ数年の間に利用可能になり、実際のWebサイトでも使われるようになりました。 今回は「ハンズオンだともっとよかった」というお声をいただきましたHTML5 Conference 2015での講演内容を元に、2つのAPIの説明と、実際にブラウザ上に電子楽器の1つであるシンセサイザーを作ってしまうという記事です。 記事中のサンプルはGitHubに公開していますので、そちらも合わせてご参照ください。 利用するAPIの説明
[JavaScript] 猿でもわかるクロージャ超入門 ４ 関数を返す関数 - DQN起業日記
Javascriptでは、「関数を返す関数」というものを作れます。 <script> //サンプル4-1 function outer(){ var inner = function (){ // 無名関数を定義してinnerに代入 alert("hello"); } return inner; // inner関数を返す } var f = outer(); // outre関数は戻り値としてinner関数を返す。それがfに代入される。 f(); // "hello"と表示。inner() が実行されたのと同じ効果がある。 </script> outer関数が実行されると、 outer内で無名関数が生成される それが変数innerに代入される そのinnerが戻り値として返される それがfに代入される このとき、outer関数は 「関数を返す関数」 となっています。 「お母さんの胎内から
![[JavaScript] 猿でもわかるクロージャ超入門 ４ 関数を返す関数 - DQN起業日記](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f7de7c0278993661a11fbc3637f96292ba773aa/height=288;version=1;width=512/http%3A%2F%2Fdqn.sakusakutto.jp%2Fimages%2Fkali.jpg)
RIAに代わる技術、実用的SPAについて考える～第7回エンタープライズ×HTML5ナイトセミナー～
RIAに代わる技術、実用的SPAについて考える～第7回エンタープライズ×HTML5ナイトセミナー～ 佐川 夫美雄（Ashiras, inc.） Appleショックにより禁じ手となったFlex、Silverlight、JavaアプレットなどのプラグインベースRIA製品の代替として、SPA(Single-page Application)が注目を集めています。HTML5の高度なオフライン機能を大規模開発で利用する際にも重要な役割を担う技術です。 しかしながらその実装方法には、ベンダ製品からOSS製品まで、思想も実装もバラつきがあります。何をもって正しいとするのか、どのような判断基準により選定するのかも、難しいという状況ではないでしょうか。 2014年1月27日に開催されたhtml5jエンタープライズ部による「第7回エンタープライズ×HTML5ナイトセミナー」。会場はKDDI様品川イーストワンタ
npm install scriptの脆弱性とオープンソースと信頼 - teppeis blog
先日アナウンスされた脆弱性とその周辺について、とりとめなく。 The npm Blog — Package install scripts vulnerability Vulnerability Note VU#319816 脆弱性の概要 VU#319816 によれば、今回問題になっているのはnpmの以下の性質を利用するとnpmパッケージでワーム（自己増殖力のあるマルウェア）を作れるというもの。 依存パッケージのバージョンをロックせず、semverにより範囲指定することが多い CLIで一度npmへloginすると、明示的にnpm logoutするまで認証が永続化される npm registry が中央集権型サーバーである 具体的な手法として、Chris Contoliniが PoC として pizza-party というリポジトリを公開している*1。以下のように動作する。 ワームが仕込まれ
OAuthプロトコルの中身をざっくり解説してみるよ - ( ꒪⌓꒪) ゆるよろ日記
「おーおーっすっ!」 てなこって、TwitterのAPIのBASIC認証も6月末に終了してOAuth/xAuthに移行するというこの時期に、あらためてOAuthについて勉強してみたんですのよ? OAuth認証を利用するライブラリは各言語で出そろってきてるのでそれを使えばいんじゃまいか? というと話が終わるので、じゃあそのライブラリの中身はなにやってんのよってことを、OAuthするScalaのライブラリ作りながら調べたことをまとめてみました。 間違っているところもあると思うのでツッコミ歓迎です＞＜ OAuthってそもそもなんなの? ものすごくざっくりというと「API利用側が、ユーザ認証をAPI提供サービス側にやってもらうための仕様」って感じでしょうか? BASIC認証の場合、API利用側が認証に必要なアカウントやパスワードを預かる必要があるわけです。悪意のあるAPI利用側が「なんとかメーカー
Unity 5 x WebGL について詳しく調べてみた - 凹みTips
はじめに 本エントリは Unity Advent Calendar 2014 8日目の記事になります。 Unity 5 からは Build ターゲットに WebGL が追加されます。Unity 5 プリオーダ向けベータ版で現在試すことが出来ます。 Unity 2020.2b - Unity 今年の 3/18 に行われた GDC2014 で Unity 5 が発表されたタイミングで WebGL 対応が発表されました。日本でも 4/7、8 で行われた Unite 2014 においても WebGL についての講演があり、その動画や講演資料を公式サイトから閲覧することが出来ます。 http://japan.unity3d.com/blog/press/unity5 http://japan.unity3d.com/unite/unite2014/schedule Unity と Web デプロイメ
Using TypeScript with Visual Studio Code on OSX
Some of my other articles about Visual Studio Code : Using TypeScript with Visual Studio Code on OSX Setting up Github with Visual Studio Code on OSX Automatically Compile Your TypeScript Files with Visual Studio Code on OSX Creating and Debugging C# Console Apps with Visual Studio Code on OSX Introduction Visual Studio Code is powerful editor that Microsoft released at Build 2015. There have been
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
実はYOUTRUSTのChrome拡張つくっていた件 - YOUTRUST Tech Blog
Sharing global data in Next.js with custom App and useContext Hook | React Tricks
「クロスサイトスクリプティング対策の基本」関連の最新 ニュース・レビュー・解説 記事 まとめ - ITmedia Keywords