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

基本の解説 STEP1. リクエスト送信先のパス WordPress で Ajax を使う場合 /wp-admin/admin-ajax.php にリクエストを送ることに決まっている。 JavaScript ファイル内で動的にパスを指定することはできないので、wp_head にフックしてリクエスト送信先のURLをグローバル変数として出力しておく。 > functions.php function add_my_ajaxurl() { ?> <script> var ajaxurl = '<?php echo admin_url( 'admin-ajax.php'); ?>'; </script> <?php } add_action( 'wp_head', 'add_my_ajaxurl', 1 ); wp_head アクションにフックすることで head 要素内に JavaScript
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。 JavaScriptで定期的に実行したい関数がある場合、window.setIntervalを使用することがあるかもしれません。 window.setIntervalは指定した時間毎に関数を実行してくれる便利な関数です。 で、うっかり関数内でsetIntervalを使用した場合、実際うまく動いているように見えることが多いので気付かないかもしれませんが、実は内部で恐ろしいことが起こっています。 <div id="hoge"> <script type="text/javascript">hoge();</script> </div> <script type="text/javascript"> function hoge(){ $.get("hoge.php", function
こんにちは。内藤です。 前回 http://blog.asial.co.jp/1271 前々回 http://blog.asial.co.jp/1260 は、それぞれFormタグ、Cameraプラグインで画像を取得し、それをFormDataオブジェクトにBlobとして付与して、それをAjaxでサーバーにアップロードする方法について紹介しました。 今回は、FormDataではなく、手動でMultipart Postを生成してアップロードする方法について紹介します。FormDataは便利なのですが、Multipartの仕組みがすべてブラックボックス化されてしまっているため、内部の動作がよく分かりません。今回紹介する方法は、Multipartを自分で作成するため、他の言語で同様の機能を実装するのにも役立つかと思います。 かつては、JavaAppletなどでMultipart送信をするためによく使
ここ数年、Javascript界隈でフレームワーク戦争が勃発してきました。クライアント開発の規模も年々大きくなり、jQueryだけでは複雑な画面遷移などを管理しきれなくなってきたのが原因だと思います。 私も昨年までAngularとbackboneを試しましたが、サーバサイドをMVCにしているのに、クライアントでもMVCを作るMVCの2階建ては、やり過ぎなのではないかと思っていました。フレームワークそのもの覚えるまでにも一苦労というのも面倒に感じました。 2014年、海外でブームに火が付いたReact.js そんな中、2014年の後半からFacebook発のReact.jsの採用事例が聞こえてくるようになりました。AirBnBや米Yahoo! Mailなど大手がReact.jsを積極的に採用し出したので気になり、年末年始を使って色々調べてみることにしました。 Rails以来の衝撃 色々試して
JavaScript のみで任意のフィードが取得できる Google AJAX Feeds API は、とても便利ですよね。活用されている方も多いと思います。でも、余計な機能も含んだ外部ライブラリを読み込むのがイマイチなところ。ページロード時間を気にする場合はちょっと利用を躊躇してしまいます。 ところが、そんな欠点も、実は既に解消されています。今年の 4 月に Flash など JavaScript 以外の言語のために RESTful 形式の API が追加されたのですが、それに callback の指定がちゃっかり存在しており、 JSONP でアクセスできるのです。これなら外部ライブラリを読み込む必要もなく、気軽に利用できます。とくに JSONP に慣れている方は、 JavaScript API よりも楽に覚えられるでしょう。 ということで、本日はその RESTful API を利用して
mozaic.fm第7話のRESTの話で、RESTが日本で広く受け入れられていった頃、というか、その端緒の頃の話が出ていて懐かしかったのだし、細部にやや不正確なところがあるのが気になったりもしたので、補足を書いておきますね。 まず、いわずとしれた@yoheiさんがRESTをまず知ったのが2003年とかそれぐらいの時期とおっしゃっていて、それから数年経ち、RESTがWebエンジニアに広く受け入れられていったのは、2007年末にリリースされ、resourcesという機能を取り入れたRails2からというのは、@t_wadaさんがおっしゃっている通り、事実だろうと思います。 また、Podcastの中では、主催のJxckさんが、それはそれと認めた上で、彼自身にとってはAjaxの登場が大きかったということを述べた上で、@yoheiさんの主催された第八回XML開発者の日での高橋征義さんとid:seco
はじめに 現在参画中の案件ではNode.js + Expressを用いた開発を行っています。 開発を行っているのはWebアプリのため、当然セキュリティ対策も必要になってきます。 今回は、CSRF(クロスサイトリクエストフォージェリ)対策として、 ミドルウェアであるcsurfを検証しました。 CSRF(クロスサイトリクエストフォージェリ)とは Webサイトにスクリプトや自動転送(HTTPリダイレクト)を仕込むことによって、閲覧者に意図せず別のWebサイト上で何らかの操作(掲示板への書き込みなど)を行わせる攻撃手法。 CSRFとは 〔 クロスサイトリクエストフォージェリ 〕 【 XSRF 】 - 意味/解説/説明/定義 : IT用語辞典 この攻撃の特徴としては、利用者が攻撃者が用意したリンクやスクリプトにアクセスすることで、 本来フローとは異なるフローでアクセスを行うといった点でです。 対策と
スライドの動きやフリック時の画面遷移、昔アニメーションといえばゲームなイメージでしたが、モバイル端末が登場して以来結構身近なものになりました。 ただ、身近だから簡単というわけでもなく、動作にアニメーションをつけるのは結構面倒。「これちょっとさ、下からひゅっと出てくる感じにしてよ」と言われてそんな簡単じゃないんだよとイラッとすることもあるだろう。 「アニメーションはもうデザインみたいなもんだし、CSSで書いてよろしくやってくれたらな・・・」とJQueryで実装しながら見るはかない夢・・・を現実にしてしまうのが、Angular.jsのng-Animateなのであります! 準備 アニメーションを使用するには、angular.js本体意外にangular-animate.jsが必要となります。Googleがホスティングしてくださっているので、ありがたく使わせていただきましょう。 Google Ho
AngulaJSのTutorialのstep-5を実施したレポートです。 個人的に最もAngularに魅かれた仕組みを説明してくれているTutorialで、 なんといってもポイントはController側もテスト側もDI経由のサービスを利用した実装です。 Angularは、エラーハンドリングはHTTPレスポンスコードで見ていたりして、サーバ側のIF設計がRESTful実装されていることがある程度、前提にしています。 そこで、このRESTfulについても重要なので、今回は簡単に補足します。 step-5 step-5では、 ファイルシステム上のJsonファイルからデータを取得し、 スマホリストを検索機能付きで表示する 上記の仕組みを実装したサンプルコードを元に課題を遂行します。 データ このTutorialでは、データは静的なjsonファイルで定義されています。 このデータを使ってstep-
前回で近いうちにAjaxのセキュリティについて書きます!と宣言しましたが、あれはつまりCSRF攻撃の対策についてでした。今回はAjaxでCSRF対策を行う方法を書きます。 先に結論 Ajax通信におけるCSRF攻撃対策は通常の遷移時に施す対策と考え方はかわりません。 実装方法 ログイン時にトークンを生成しセッションオブジェクトにセットし、トークンをクライアントに送信 クライアント側のjsスクリプト内でトークンをAjax通信時に常に付加するように設定 サーバー側でAjaxで送信されたトークンの有無とセッションオブジェクト内のトークの一致を確認 ログアウト時にセッションは全て破棄 ここで生成するトークンはワンタイムではないです。ログイン時にずっと使いまわします。 ところで、パーフェクトPHPチルドレンとしては見逃せないエントリが CSRF対策のトークンをワンタイムにしたら意図に反して脆弱になっ
jQuery 1.5 以降であれば headers プロパティでヘッダーを指定することができる。 $.ajax({ url: '/test', type: 'PUT', headers: { 'X-HTTP-Method-Override': 'PUT', 'Content-Type': 'application/json' }, dataType: 'json', data: '{"test": "テスト"}', }).done(function() { console.log('成功'); }); Content-Type のために contentType プロパティも用意されている。複数のヘッダーを指定する場合は、headers プロパティにまとめておいたほうが散らからずにすむだろう。 headers: { 'X-HTTP-Method-Override': 'PUT', }, co
Getting started Add morris.js and its dependencies (jQuery & Raphaël) to your page. 1 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"> 2 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 3 <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 4 <script src="//cdnjs.cloudflare.com/ajax/libs/mo
モバイルアプリでは、サーバーと連動して動作するものが多くみられます。 ハイブリッドアプリでこうしたアプリを作る場合は、Ajaxで実現するのが一般的だと思いますので、そのやり方について説明します。 追記:Android 2.3系およびそれ以前のAndroidは、FormDataオブジェクトが未定義のため、この記事の方法は利用出来ません。ご注意下さい。 追記2:Android 4.4では、Formからのファイル選択自体ができないため、この記事の方法は利用出来ません。(4.4.2で確認。今後のバージョンアップ出来るようになるかは不明です) formタグを使わない手段については、こちら サーバー側の実装 まずは、サーバー側の機能の実装です。 ここでは、普通にブラウザからもアップロード出来るような作りを考えます。実装はphpですが、他の言語でも基本的に同じように作れると思います。 /uploader
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く