Service Workersでプッシュ通知を受信できるようになったわけですが([1]: GCM)([2]: Web Push)、Chromeではバージョン48まではGCMで通知だけができるようになっただけで、メッセージ本体は通知を受けてからService Workerでサーバから改めて受け取るような実装をする必要があったりします。 ここで、Service Workersでは、XMLHttpRequestが使えません。その代わり、XMLHttpRequest (以下、XHR)に代わるWHATWGの仕様としてFetch APIがあり、Service WorkersではこのFetch APIを使うことになっていますので、その使い方を簡単に紹介します。 Fetch API自体は、Service Workers専用のものではなく、メインスレッドでもXHRの代わりに使うことが可能です。現時点で実装し
#脱jQuery AngularJSやVue.jsでは、DOMの直接操作は推奨されません。 そうなると、jQueryはAJAXでしか使わなくなります。 であれば、AJAX専用のライブラリにまかせてしまって、jQuery依存を外したくなってきます。 というわけで、AJAXだけをやってくれるライブラリとして、SuperAgentを導入してみましょう。 #SuperAgent HTTPリクエストに特化したライブラリです。 Node.jsとブラウザ両方で使うことができます。 作者はExpress, Stylusの開発などで有名なTJです。 #superagentの良さ かわいい。 #ブラウザでの導入方法 まず、下記URLにアクセスし、ファイル名superagent.jsとして名前をつけて保存してください。 https://wzrd.in/standalone/superagent@latest s
はじめに 今更ですが最近ajaxを少し触るようになりました。 jQueryを使えば簡単にajax通信ができるため、単純なものであればそれほど実装は難しくないかと思います。 ですが少し複雑なことをやろうとしてみると、急にハードルが上がる気がします。 そこで自戒を込めて、ajax初心者の方に対してはじめにこれを知りたかったと思えるんじゃないかというものをまとめてみたいと思います。 ※jQueryを利用したajax通信を想定しています 目次 処理の順番を意識する $.ajax()の省略メソッドを知る イベントを知る デバッグ方法を知る 通信状況を想定する（タイムアウトを設定する） 連続クリックを防止する ← [New!] 連続通信を防止する ← [New!] 処理の順番を意識する ajaxを使用する場合は、非同期通信で処理したいケースがほとんどかと思います しかし単純にそのまま書いただけでは処理
こんにちは、フロントエンドエンジニアの店長です。 先日記事が出てましたが改めて自己紹介します。 大学卒業後はカフェで仕事をしていたのですが、退職して1年半ほどWebデザイナーをしていました。そして、LIGにはフロントエンドエンジニアとしてジョインすることに。 お察しのとおり、店長というアダ名はカフェで働いていたためです。 今後ともよろしくお願いします。 さて、今回はHTML5のHistory APIについてお話したいと思います。 History APIについて History APIには以前からブラウザの履歴（スタック）を行き来する機能があったのですが、HTML5でさらに以下のような機能が追加されました。 画面を遷移せず、履歴に新たなURLを追加する。 現在のページの履歴を変更する。 ブラウザの戻る・進むボタンをクリックしたときにイベントを検知する。 このような機能がどんな場面で使われてい
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. Learn moreSee full compatibilityReport feedback FormData インターフェイスは、フォームフィールドおよびそれらの値から表現されるキーと値のペアのセットを簡単に構築する手段を提供します。これは fetch()、XMLHttpRequest.send()、navigator.sendBeacon() の各メソッドを用いることで送信が可能です。エンコーディング型を "multipart/form-data" に設定した場合にフォームが使用するものと同じ形式を使用します。
目次 jQuery 1.4以前の書き方jQuery 1.5以上の書き方jQuery 1.8以上の書き方【発展編1】Deferredを用いた書き方 deferredとは何か？【発展編2】$.when() を用いた書き方参考本エントリは軽めのjQuery Advent Calendar 2012の14日目の記事として書きます。軽めといいながら少し重めになってしまった感がありますが、初めてのAdvent Calendar参加ということでご勘弁を。 ※ Twitter API仕様変更によりTwitter APIを使ったコード例は現在動作しなくなっていることにご注意。 jQuery 1.4以前の書き方まずは、少し古めのコード、昔のjQueryの本とかでよく見る書き方。 $.ajax({ url: "ajax.html", success: function(data) { alert('succes
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. Learn moreSee full compatibilityReport feedback W3C の XMLHttpRequest 仕様書では、もともと XML の解釈しか対応していなかった XMLHttpRequest に HTML の解釈を追加しています。この機能によって、ウェブアプリは XMLHttpRequest を使って HTML を解釈済の DOM として取得することができます。 一般的な XMLHttpRequest の使い方についての概要は、 XMLHttpRequest の利用をお読みください。
以下の文章は私が個人的に調べた事をまとめたもので、断定口調で書いてありますが、正しさの保障はありません。むしろ間違いを見つけたら、指摘して頂けるとありがたいです。 ブラウザ上のスクリプトが行うクロスドメイン通信には、制約がある。でも考えてみれば、あるサーバがドメインの異なる別のサーバ間へリクエストすることは一般的な事だし、例えば自分のサーバへのアクセスを制限したければ、通常はパスワード認証やIPフィルタなどを使うだろう。 ということは、「ブラウザ上スクリプトのクロスドメイン通信」としてわざわざサーバ間通信と区別する以上、ブラウザを用いた通信には、パスワード認証やIPフィルタのみでは対応しきれない特殊なリスクがあるからだと言える。 そしてそれは、 サーバ間の通信は、クライアントとなる側が自前のスクリプトもしくは信頼した第三者のスクリプトで、自発的にリクエストする。 しかし、ブラウジングはその
「ヨーロッパで遂にFirefoxのシェアがIEを超えたのだそうだ」 「へぇ」 「まあ、反アメリカの風潮が強いヨーロッパなら分からないこともない」 「アメリカの経済侵略の象徴的な尖兵だもんね。MSとIEは」 「アメリカに身も心も捧げちゃった日本とは受け止め方が違う」 「それで君の感想は? 最近、稲荷を見ることが多い君はおキツネさまの躍進に満足かい?」 「わははは、とんでもない。これで世界は順調にぐだぐだになっていくぞ」 「どういう意味で?」 「実質的にこれはAjax虐殺に等しい」 「なぜ?」 「いいかい。まず、どんなサイトもテストをしないで動作を保証できない」 「うん」 「標準に即していれば動くはずであるというのは、よくある妄想だ」 「そうなの?」 「嘘だと思うなら標準準拠度100%をうたうソフトを試してみるんだな。運が良ければ問題に突き当たらないで済むかもしれない」 「ははは」 「つまりだ
WP Super Cache の導入にあわせて、人気の記事をカウントしてくれるプラグインを Popular Posts + Post-Plugin Library から WordPress Popular Posts に変えてみました。 理由は、Popular Posts がキャッシュ化されたページではカウントしてくれなかったからです。その点 WordPress Popular Posts は、Ajax (XHR) でカウントしてくれるので、静的ページでも OK です。 ところが WordPress Popular Posts は、高々ページの ID を送るだけなのに jQuery （もちろん min 版ですが） を読み込みます。それだけならもっと簡単なスクリプトでもいいんじゃない？ということで、自分の勉強を兼ねて調べたことを共有してみたいと思います。 vX – A Super-Light
元Vine SPARC開発者。2003年度未踏ユース採択者。海外でも活躍できる国際的なLinuxエンジニアになることを夢見て日本で頑張っています。ウノウ株式会社にて写真共有SNS「フォト蔵」を開発中。 Ajax で SSHクライアントを作ってみた。 ajaxssh デモページ IE では動きません。firefox での動作を確認してます。 IE で動かないのは xmlhttprequest.readystate == 3 で途中まで届いているデータを取ることができないから。 もしうまい方法知っている方がいれば、是非教えてください。 Ajax で SSHクライアントを作る問題点は、 Ajax(というよりHTTP)がstatelessだということです。 ssh はコネクションを切らずに状態が遷移しますから、 データを POST するたびに毎回サーバ側で ssh を exec するような実装では
2010年08月17日06:45 カテゴリLightweight Languages Ajax - Goodbye, JSONP. Hello, Access-Control-Allow-Origin もうそろそろJSONPとはお別れできるのではないかと思い立ったので。 XMLHttpRequestとその問題 AjaxといえばXHRの愛称で親しまれているXMLHttpRequestですが、これには一つ重大な欠点がありました。 これを発行するDHTMLページのドメインが、Request先のドメインと一致する必要があったのです。いわゆる Same Origin Policy というやつです。おかげでサイトをまたがって使えなかったのです。これではマッシュアップできない。どうしよう。 JSONPとその問題 そこで生まれたのが、JSONPという手法です。 これは、scriptノードを追加した時に、単
これまで、サジェスト検索について、活用事例をもとに各機能を紹介してきた。 (第1回：サジェスト検索とは、第2回：サジェスト活用事例) 今回から、サジェスト検索の各機能をどのようにして実現しているのか、技術的な話題を取り上げていく。 業務システムの商品検索・顧客検索における活用例 第2回では、業務システムの商品検索・顧客検索における活用例をもとにサジェスト検索を紹介した。サジェスト検索の特徴は、本来データベース検索を必要とする情報が、瞬時に取り出せる事であった。 この実現にあたり、中核となる技術はAjaxとテキストマイニングである。今回は、Ajaxによる画面制御を紹介する。 Ajaxによる画面制御 画面遷移を行わず、次々と候補語表示を行うといった画面制御は、Ajaxによって実現している。第2回でも簡単に紹介したが、サーバへの非同期通信、画面の一部を動的に更新といった事はAjaxの特徴である。
PHP、JavaScript、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説カスタマイズ性抜群の上級者向けタブブラウザ「Lunascape」 動作の重いFirefoxや、セキュリティホールの多いIEから乗り換えるなら・・・ 高機能かつ拡張性に富んだ『Lunascape』（ルナスケープ）がオススメです。 このブラウザは、驚くほど “ 動作が軽い ” のが魅力！ Firefoxみたいにメモリを食いません（笑） IEのツールバープラグイン、Firefox、Netscapeの一部のプラグインに対応しているので、今まで使っていたプラグインごと乗り換えられます。 IEのお気に入りもブラウザのサイドバーに簡単に組み込めます。 また、RSSリーダー付ブラウザなので、RSSリーダーを使わずにブラウザ上でRSSの購読や管理ができます。 F
昨年の10月に刊行された書籍Ajaxセキュリティは，発刊直後に購入したが，しばらく積ん読になっていた。最近になって読み始めたのだが，いささかあきれる結果となった。HPの現役エンジニア2名の著作，一人は元SPI Dynamics社(WebInspectの開発元，HPが買収)出身，GIJOE氏の監訳ということで期待していたのだが，残念である。 残念だと思う主要な理由は，脆弱性への対策が十分に示されていないことだ。Ajaxであってもインジェクション系脆弱性が発生する可能性があること，むしろ従来型のWebアプリケーションよりもその可能性が広がることは説明されているが，肝心の対策が不十分だ。 本書第四章の後半には，対策として入力検査（バリデーション）が示されている。 4.6 適切な入力検査 4.7 リッチなユーザ入力のバリデーション しかし，入力検証だけでは，任意の文字入力を許す場合の対策はできない
gmailでメールを書くとき、添付するファイルを選んでからしばらくすると、いつの間にか添付ファイルがアップロードされています。 添付するファイルを選ぶと、はじめファイル名が表示されていたのが 自動的にアップロードされて、名前とファイルサイズが表示されています！ 実は、あまり名前も聞かなくなった Google Page Creator がリリースされたときにいちばんびっくりしたのはページの右下にこのgmailの自動アップロードとよく似たしくみがあったことでした。で、さっそく解析してマネしてみたことがあります。今回はgmailでその仕組みを見てみます。 ちなみにその Google Page Creator には、ログインすると右下にこんな ファイルをアップロードするのに使う部分があります。 gmailの場合、メールが自動保存されるタイミングでアップロードされているかんじでしたが、こっちのはBr
クロスドメイン通信方法のまとめ - nopnopの日記の補足です。 ブックマークコメントでちょろっと書いたけど、nopnopさんが書いている以外の方法としてwindowのname属性を使う方法とHTML5のpostMessageがあります。 window.name これは単純な方法(その分、クロスブラウザであり割と古いブラウザでも動作する(追記:)と、思ったけどIEの動作は微妙かもしれない)で、例えばwindow.open('http://example.com/','hogehoge');といったJavaScriptでウィンドウ(タブ)を開くと、hogehogeというウィンドウが開かれます。インラインフレームなどにも同様にwindowにnameをつけることができます。この名前はwindowを作る側が設定することが出来て、作られる側はドメインなどに関係なく設定されたnameを読み取ることが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
