フロントエンドとバックエンドのリアルタイム通信の選択肢を教えて下さい - Qiita
これは「コードを書いていて困ったときに、suinがチャットで質問に答えたり相談に乗るsuinのプログラミング相談室(仮)」で頂いた質問と僕の回答の要約です。 質問 フロントエンドとバックエンドのリアルタイム通信の選択肢を教えて下さい。その長所短所も知りたいです。 僕の回答 こんにちは。 フロントエンドとバックエンドのリアルタイム通信の選択肢についての質問ですね。 通信方法の選択肢についてご回答します。 1. AJAXポーリング この方式は、GETリクエストなどをAJAXで数秒間隔などでバックエンドに投げ、もしレスポンスのデータに変化があったら、それをフロントエンドに反映するという手法です。 ポーリングの長所は、AJAXが分かれば他に学ぶことがないという点です。実装もかんたんです。また、バックエンドのサーバやプログラミング言語の選択肢も広いです。 短所は、無駄な通信が発生しうるということです
AJAXで書き換えたウェブページでバックボタンを使う – Naofumi Kagami
アップデート 下記のコード例では状態を保存するために input type=”text” を使いました。この値を表示したくない場合は、input type=”hidden” を使わずに style=”display:none” とした方が良いようです。ブラウザによっては（例えばSafariの5以降） type=”hidden”の値が保存されるとは限りません(Webkit Bugzilla)。input type=”text”とstyle=”display:none”の組み合わせに方が、異なるブラウザ間で確実に動作してくれそうです。 AJAXをたくさん使ったページでバックボタンを使えるようにしたいと思って、ウェブでいろいろ探しました。見つかったのは例えば Really Simple History (RSH)やYUI Historyなどで、以下に述べるようにかなり怖いぐらいのハックをしている
javascriptを使ったSEO対策まとめ - Qiita
一昔前まではjavascriptを使ったSEOに弱いというのがあったりしましたが、今ではGooglebotが大分賢くなりjavascriptを実行できるようになってきてます。 とはいえ何も考えなくてもいいかというとそうでもないので、javascriptを使った場合にSEO対策として意識しないといけないことをまとめてみました。 いろいろ書きましたが、 Hisory APIを使ってURLをきちんと書き換えよう っていうのが主です。(pjaxと呼ばれている手法です） クリックやスクロールでDOMを生成するコンテンツはインデックスされない ページロード時点ではhtml内に生成されていないが、あるイベントが起きた時にDOM要素を生成するパターン。 Qiitaで言うとTOPページ下部にある「もっと見る」とかがそうですね。 Googlebotはjavascriptを実行することはできるのですが、clic
非同期通信（Ajax）をするときはタイムアウト処理を必ず入れてほしい（切実） - Qiita
非同期通信（Ajax）を行うとき、きちんとタイムアウト処理を入れていますか？ スマートフォンやタブレットでWebサイトを閲覧しているとき、地下に入ったりして通信ができなくなるというケースは頻繁に起こります。そんなとき、きちんとタイムアウト処理をしていないと、場合によってはいつまで経ってもローディングが終わらず、ユーザーが離脱してしまうということが起こります。質の高いWebコンテンツ制作のために、必ずタイムアウト処理は入れましょう。 jQueryでの実装例 たとえばjQueryでAjaxを扱うajax()メソッドには、timeoutという便利なオプションがあります。timeoutに指定した時間（ms）が経過しても通信が完了しない場合、エラー処理が実行されます。手軽に実装できるので、ajax()メソッドを使うときは必ず設定しましょう。 // 10秒経っても通信が成功しない場合は失敗処理を実行す
WordPressでAjaxを使う方法の解説 | hijiriworld Web
基本の解説 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
Home - Crawljax
SELAMAT DATANG DI PROMAX77 SITUS NOMOR 1 DAN TERPERCAYA DI SELURUH ASIA MAU WITHDRAW BERAPA PUN KAMI BAYAR !!! DILARANG KERAS DEPOSIT MENGGUNAKAN REKENING KE 3 (BUKAN NAMA SENDIRI) TIDAK AKAN DI PROSES TRANSFER VIA EDC AKAN DI PROSES 1x24 JAM HARAP DIPERHATIKAN REKENING BANK TUJUAN ANDA SEBELUM MELAKUKAN DEPOSIT
CORSでハマったことまとめ - pixiv inside [archive]
こちらは ピクシブ株式会社 Advent Calendar 2014 の12/16の記事です。 こんにちは、エンジニアの@dnskimoです。 先日、はじめてCORSを実装する機会があったので、覚書がてらまとめておきたいと思います。 CORSとは Cross-origin resource sharingの略です。 読み方は「コルス」でいいんでしょうか？ Same-Origin Policyに弾かれずに、異なるドメイン間でリソースを共有する仕組みです。 2014年1月にW3C勧告になり、JSONPに替わる方法として徐々に普及してきているようです（要出典）。 アクセスコントロールの仕様も定義されているので、特定のサイトからのみ利用可能なAPIを作る際などに便利です。 JSONPのような「裏ワザ」的な方法ではないところも個人的に好みです。 詳しいことはネット上に素晴らしい記事がたくさんあるので
![CORSでハマったことまとめ - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/5f6a93da881857fccf6161c1a2f6935458bfbb97/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fd%2Fdevpixiv%2F20141216%2F20141216151227.jpg)
Ajaxでセレクトボックスの中身が動的に変わるRailsアプリの作り方
はじめに 親のカテゴリを変更すると、子のカテゴリの中身が動的に変わるセレクトボックスってよくありますよね。 たとえばこんなやつです↓ この動きを実現するごく簡単なサンプルアプリを作ってみたので、今回はそれを紹介します。 対象となるRubyとRailsのバージョン 今回のサンプルアプリは以下の環境で動作します。 Rails 4.2.1 Ruby 2.2.1 サンプルアプリのソースコード 今回作ったサンプルアプリはGitHubに置いています。 READMEにセットアップ方法も載せているので、ご自身のローカル環境で動かしてみてください。 ざっくりとした処理の流れ この動きを実現するためにはこういう処理の流れになります。 ユーザーが親カテゴリが変更する JavaScriptのchangeイベントが呼ばれる JavaScriptがサーバーに子カテゴリの一覧を問い合わせる サーバーが子カテゴリの一覧を
Ajax 誕生から 10 年とこれから - Block Rockin’ Codes
Intro 誕生と言うのが正しいか微妙だけど、多分誕生でいいと思います。 というのも、「Ajax」という名前の出典は以下の記事で、この記事が書かれたのが今日からちょうど 10 年前でした。 Ajax: A New Approach to Web Applications (当時から、 URL が一回変わっている) Web 初めてまだ 10 年たって無いんで、全部見てきたってわけではないですが、個人的にはちょっと思い出深い記事だったりするので、ちょっと振り返ってみます。 Ajax: A New Approach to Web Applications 筆者の Jesse James Garrett 氏は UX のコンサルティング会社である Adaptive Path の創立メンバーの一人で、 UX エンジニアです。 この記事の趣旨は、当時既にあった Google Maps や Gmail、G
jQueryプラグイン「pjax」でスムーズにページ遷移するサイトの作り方 | Neganin(ネガニン)
「pjax」とは「Ajax」と「pushState」を組み合わせたもので、非同期通信をしながらURLを変更することができる「jQueryプラグイン」です。 各ページの差分だけ読み込み、描画するので、転送量削減ができ時間短縮を図れますし、ページ遷移時のエフェクトも追加できたり、カスタマイズ性に優れています。検索エンジンからのマイナス点もない非常に優秀なプラグインです。 「Ajax」と「pushState」が何なのかというと・・・ Ajax ページを遷移せずにサーバーからデータだけを非同期でとり、サイトに描画する仕組みのことで、「Google Maps」などに使用されています。 pushState 「HTML5」で導入されたURL操作のAPIで「Ajax」を使用して非同期なサイトを作る時などにアドレスが変更されない問題を解消してくれます。 1. デモ 前置きが長くなりましたが、実際に「pjax
[Rails] Ajaxでリクエストを送っていて、セッションが切れるとき - Qiita
他の場所からレイアウトをコピペしたときに、上記タグが削除されたまま、ということがあった。 ここでcsrf-tokenを引き回しているので、忘れずに足しておいてね。 ケース2.ajaxでリクエストを送るときに、csrfトークンがマッチしていない $.ajaxSetup({ beforeSend: function(xhr) { xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content')); } }); jquery-fileupload-railsなどを使っていて、ajaxリクエストを送っているとき csrf-tokenの引き回しができていなかったようなので、上記コードが必要でした - 参考 https://stackoverflow.com/questions/5126721/rails
![[Rails] Ajaxでリクエストを送っていて、セッションが切れるとき - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/e60e86d7fa359be5181973465a38cadcda9a40e7/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCUmFpbHMlNUQlMjBBamF4JUUzJTgxJUE3JUUzJTgzJUFBJUUzJTgyJUFGJUUzJTgyJUE4JUUzJTgyJUI5JUUzJTgzJTg4JUUzJTgyJTkyJUU5JTgwJTgxJUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgxJTg0JUUzJTgxJUE2JUUzJTgwJTgxJUUzJTgyJUJCJUUzJTgzJTgzJUUzJTgyJUI3JUUzJTgzJUE3JUUzJTgzJUIzJUUzJTgxJThDJUU1JTg4JTg3JUUzJTgyJThDJUUzJTgyJThCJUUzJTgxJUE4JUUzJTgxJThEJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1jMmVlNjg0ODk0NDkwZDg0Yjk0NTdkZWMxMzdjNWMyNQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwa2VuemFuMTAwJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1kZWU4YTQyOWY0M2IwNzg5NDcwYTM0NzQ0YTg2OTY3NA%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D2162cd6569266cb9c75a41083cc234b8)
Turbolinksをオフしないためにやった事 - Qiita
この記事は Turbolinks v2.2.0 時点のものです Turbolinks Classic is now deprecated Rails4系で使われていたTurbolinksはturbolinks-classicと命名が変更されました。 Rails5ではVersion 5 として turbolinks のversion ~> 5.0 が使われます。動作としては似てますが内部の実装が大きく変わっているので注意してください。 Turbolinksとは TurbolinksはRails4.0からデフォルトで導入されたgem railsアプリケーションを 簡単に pjaxっぽくすることが出来る。 ajaxとhistoryAPI(popState, pushState)を利用して画面遷移 Turbolinksで遷移する場合は、titleとbodyとcsrfトークンを変更する csrfトー
Ajaxと組み合わせて便利なHistory APIを使おう - PR TIMESデザイナー&エンジニアブログ BREAK TIMES
こんにちは。PR TIMESフロント・エンジニアの山田です。 弊社ではAjaxを使ったサイトやサービスも多く運営しています。 さて、そのAjaxですがページ遷移なしにコンテンツを切り替える場合、当然ながらそのままではブラウザのURLも変わりません。これではユーザーが直接読み込み先にアクセスしたり、ブラウザのBACKボタンで前に戻ったりできないので不便です。そんな時に使えるのが、Hisotry API。これはブラウザの履歴をJavascriptから管理、操作できる便利なAPIです。 まず以下の4つは以前からあり、古いブラウザでも動作します。 history.back();//表示した履歴の1つ前のページにもどる history.go(4);//表示した履歴の4つ前のページにもどる history.go(2);//表示した履歴の2つ先のページに進む history.forward();//表示
uu59のメモ | RailsとJS(vue.js)の連携
前書き Railsを使いつつJSもそこそこ書きたい、という条件であればまず前提としてjQuery脳を捨てましょう。jQueryスタイルで考えるかぎり何をどうやっても破綻するのでJSを諦めるか保守性を諦めるかして覚悟を決めましょう。 捨てるのは「jQuery」ではなく「jQuery脳」です。jQueryでグローバルな領域に進出してメソッドチェインで狼藉を働いたり、いま現在目の前にあるHTMLだけを考えてDOM操作をしたり、$.onと$.triggerを使ったクロージャ内部へのGOTOなどを記憶から消しましょう。 可能な限りスコープを小さく保つのはプログラミングの基本原則といえます。その原則を思い出し、JSを軽く扱わず、一般的なプログラミングと同様に閉じられた関心事にのみ注力するようにしましょう。 RailsとJSと役割分担 Railsもviewとしてテンプレートエンジンの処理を持っていますが
Rails4アプリに対してクロスドメインでAjaxでCookieを送信したい場合 - Qiita
長い前置き 最近はWebアプリケーションを開発するときにサーバ側とクライアント側のプロジェクトを分けて開発することが多い。その理由としては、最終的にはクライアント側のリソースをサーバリソースと一緒にしてデプロイするのだけど、最近はYeomanなどクライアント側の開発プロセスも複雑になってきたので分けたいためである。 サーバはRails、クライアントはYeomanを使ってJavaScriptで開発している。 ログイン認証はRails側でFacebookのOAuthを使用し、セッション情報の保持はCookieを使用している。 Railsはポート3000、クライアントはgrunt serveを使ってポート9000で実行しているのだが、JavaScriptからRailsのREST APIにリクエストを投げたときにOriginが違うのでRailsで作成したCookieが付与されないので、Rails側
XMLHttpRequest#responseURL について - xK.memo
今年の2月に WHATWG の XMLHttpRequest (XHR) の仕様に追加された responseURL プロパティが、先日 Firefox に実装された (https://bugzil.la/998076) のでそのことについて書く。 responseURL は XHR のリクエストに対するレスポンスの URL を文字列で返すプロパティで、リダイレクトが発生した場合は最終的なリダイレクト先の URL を返すようになっている。つまり Greasemonkey の GM_xmlhttpRequest にある finalUrl で取得できる情報と同じものを取得できるプロパティだと言える。 responseURL が XHR の仕様に追加される以前の状態でも、 xhr.responseType === "document" の場合に xhr.response.URL 経由で fina
Rails / Ajaxを使って画面遷移しない一時保存機能をつける
先日つけてみたソーシャルボタンですが、やっぱ数字が出るってモチベーションになっていいね。 意外とPocketも多いんだなぁ。 今回もまたRails。 投稿サイトとかでよくある、一時保存機能をやってみた。文章書いていると、何かの拍子で「あ！」てなることが多いから、あるとユーザーに優しい。 フォーム <div class="blog-form"> <%= form_for(@post) do |f| %> <%= f.text_field :tilte %> <%= f.text_area :body %> <!-- for temporal saving --> <div class="create-temp"></div> <%= f.submit "送信する" %> <% end %> </div>
pjaxできれいなURL＋非同期画面遷移！ | ヘッドウォータースのブログ TechNote
こんにちは。荒井です。 Facebookもtwitterもgoogleも画面遷移のときには、非同期で次のページを読み込むような作りになってますね！ これは、ajaxで次のページを読み込むのと同時に「History API」というHTML5の機能を使って、URLを更新することで実現してます。 毎回全部読み直さないから通常の画面遷移よりも早いし、URLが変わるから履歴に残るし、良いことばっかり！！SEO的にも「#!」を使ったやつより良いよっていうのを何かで読みました！！！ これからWebサービスを作るなら、導入したいですね！！！ これpjaxを使えば簡単に導入できるんです！！！よし！！！ PJAX!! pjaxとは、GithubのChris Wanstrathって人が作ってるjqueryプラグインです。 上で説明した、History APIとajaxを使った非同期の画面遷移を簡単に導入すること
jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。 | Ginpen.com
仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基本的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。 デモ なんかお問い合わせフォーム的なものを用意しました。 まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Json-P