Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 何気に、アプリケーションで取り扱うデータ量が増えた場合や、大容量データをデータベースとやり取りする時なんかは、Ajaxを使ってデータ通信をバックエンド側に押しやることで、WEBフロント側のUXからパフォーマンスの悪さを改善できたりする。また、ネットワーク経路的にproxyサーバとかを中継するような環境間でデータのやり取りをする場合などに、proxy側で接続時間にリミットがかけてあったりすると、通常アクセスではデータ通信時間がリミットに達して503エラーとかになってしまうような処理でもAjaxで通信をバックエンド化することで、回避できたり
Rails3 の remote => true な Ajax 処理では .js.erb を使うか、JS で Rails が追加したカスタムイベントを使うのがレールにのった方法です。WEB+DB PRESS vol.58 詳解Rails3 p26 あたりの、簡易ブログアプリの一覧画面での Ajax 検索が .js.erb を使っていたので、カスタムイベント版にして動作を確認しておきました。 まずは index.js.erb を使わない場合。 ▼ posts/index.html.erb <%= form_for @search_form, :url => posts_path, :remote => true, :html => {:method => :get} do |f| %> <%= f.search_field :q %> <%= f.submit '検索' %> <% end %
ここ数年、会社を辞めて自分のペースで仕事を請け負うフリーランスという形態で仕事をする人が増えています。フリーランスには様々な職業があり、代表的なものでは翻訳業やイラストレーター、YouTuberもフリーランスに分類されます。そして代表的なフリーランスの職業がもう一つあります。それはプログラマー/エンジニアです。そのプログラミングの大部分を占める工程がコーディングであり、知識と技術を身につければ、憧れのフリーランスに鞍替えすることも夢ではありません。 それではコーディングの知識と技術を取得するにはどのようなルートがあるのでしょうか？現実として学校に通うか、プログラミングを請け負う会社に入社するか、あるいは独学で取得するかのいずれかを選択することになります。そこで今回は最も費用の少ない独学でコーディングを学ぶ方法を紹介したいと思います。 独学でコーディングの知識と技術を身につけるには まずはプ
はじめに 今更ですが最近ajaxを少し触るようになりました。 jQueryを使えば簡単にajax通信ができるため、単純なものであればそれほど実装は難しくないかと思います。 ですが少し複雑なことをやろうとしてみると、急にハードルが上がる気がします。 そこで自戒を込めて、ajax初心者の方に対してはじめにこれを知りたかったと思えるんじゃないかというものをまとめてみたいと思います。 ※jQueryを利用したajax通信を想定しています 目次 処理の順番を意識する $.ajax()の省略メソッドを知る イベントを知る デバッグ方法を知る 通信状況を想定する（タイムアウトを設定する） 連続クリックを防止する ← [New!] 連続通信を防止する ← [New!] 処理の順番を意識する ajaxを使用する場合は、非同期通信で処理したいケースがほとんどかと思います しかし単純にそのまま書いただけでは処理
こちらは ピクシブ株式会社 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/https%3A%2F%2Ffanyv88.com%3A443%2Fhttp%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fd%2Fdevpixiv%2F20141216%2F20141216151227.jpg)
まず、”#!”の呼び方から。 「シャープエクスクラメーション」とか呼ぶのかと思ってたら、 「hash=#」「bang=!」の略で、「shebang=シバン」っつーらしいんです。 シバンがURLに付いてるサイトで、最も有名どころで言うと、Twitter。 Gmailなんかもそうですかね。 https://twitter.com/#!/i/connect 然り、https://twitter.com/#!/i/discover も然り。 lifehackerやfacebookも、今は違うけど昔はどうやら付いていたらしい。 ”#”と”！”をわけて考えると、 ・”#”は、Ajaxアプリケーションとして、画面遷移ではなくページ内遷移をするため。 ・”!”は、”#”とセットにして、Googleクローラーにクロール可能なAjaxアプリと認識させるため。(※注1) Ajaxアプリケーションなので、 ・Ja
概要 検索結果に表示したいコンテンツで AJAX アプリケーションを実行している場合、Google が新しく作成したプロセスを実装すると、Google によるサイトのクロールとインデックス登録が可能になります。このプロセスは、Google 以外の検索エンジンでもうまく機能する可能性があります。AJAX コンテンツはブラウザによって動的に生成されるためにクロールで検出することができず、検索エンジンで AJAX アプリケーションを処理することは困難でした。この問題に対応するメソッドも既にありますが、このメソッドでコンテンツを最新の状態に保つには、手動で定期的に保守を行う必要があります。 一方、以下のスキームでは、検索エンジンでスケーラブルにコンテンツをクロールし、インデックスに登録できます。また、ウェブマスターが継続的に手動で保守を行わなくても常に最新のコンテンツがインデックスに登録されます。
AjaxはJavascriptによってサーバーと通信する技術で、それによって後からコンテンツを表示させる遅延ロードといったことなど、便利なことが実現できます。Ajaxは現在、多くのサイトで使われていますが、GoogleのクローラーはAjaxを処理できず、Ajaxで取得するコンテンツの内容を正確に読み取ることができず、その内容はインデックスには反映されません。そこで、今回はAjaxコンテンツをクローラーに読み取らせ、インデックスに登録させる方法を紹介します。スポンサーリンク Ajaxコンテンツをクローラーに認識させてインデックスに登録する方法GoogleのクローラーはAjaxを読み取れるのか？Ajaxを読み取らせる方法の前に、まずGoogleはAjaxを処理できるのかということについて取り上げてみます。Googleは近年進化を続けており、JavascriptやAjaxで表示するコンテンツを理
AJAXでCHATを作る場合のパターンについて、現時点で集めた情報をまとめてみました。 前提 JavaScript は、HTTP通信オブジェクトである XMLHttpRequest を持つためにブラウザの再読込なしにデータの送受信が可能です。また、JavaScriptはDOMを扱うことができるのでHTMLの要素を自由に書き換えることができます。(innerHTMLを用いても可) この二つの特徴を生かすと、ブラウザの再読込なしにHTTP経由で受け取ったデータをHTMLに表示することができます。 このような技術を用いて CHATを作ると、画面遷移(リロード)のない高速なCHATを構築することができます。あたかも IRCクライアントのようにWebページにログを書き出していくことができるわけです。これがAJAXでCHATを行う場合のメリットです。 ここまでは、AJAXでCHATを作るメリットについ
scaffoldを使うとCRUDが揃った「土台」を一発で作れるわけですが、それをアレコレして全ての操作をAjax化してみたので、手順をまとめました。 記事を読むのがだりぃって方はソースコードをGitHubで公開してるので、そちらをご覧ください。 RubyもRailsもあんまり触った事がないので、識者によるツッコミ歓迎します。 (｀・ω・´) 概要 やること indexの画面だけでCRUD、つまり新規作成 (Create)、表示 (Read)、編集 (Update)、削除 (Delete)を行えるよう、scaffoldで作成したファイルをいじります。 結論 form_for()にremote: trueを与えるだけで、とりあえずAjax化します。あとはサーバー側のレスポンスの内容を整えて、クライアント側で適切に処理してやればOKです。 作業 下準備（scaffoldとか） indexに編集フ
260: Fayeでメッセージング (view original Railscast) Other translations: Other formats: Written by Naomi Fujimoto 今回のエピソードでは、Railsアプリケーションに簡単なインスタントメッセージの機能を追加します。すでにいくつかの機能を実装済みで、あるページ上のテキストフィールドにメッセージを入力できます。「送信」をクリックすると、入力されたメッセージはJavaScriptとAJAXによってチャットウィンドウに追加されます。 ここまではよさそうですが、実はこのアプリケーションには問題があります。別のチャットクライアントとして、別のウィンドウあるいはブラウザを開くと、最初のウィンドウで入力されたメッセージは別のウィンドウには表示されません。 ここで必要なのは、プッシュ通知によって他のすべてのクラ
Dev fest 2020 taiwan how to debug microservices on kubernetes as a pros (ht...
画面を表示したときは、ローディング画像（くるくるしてるやつ）があって、 しばらくすると突然データが表示されるあれです。 Hamlを使ってるんですが、本気でいつも忘れるから、備忘録。 View (Haml) #entry_ajax_view != image_tag "/images/ajax-loader.gif" - javascript_tag do != remote_function :url => {:controller => :entries, :action => :ajax_view, :id => @entry.id} この、たった２行が思い出せなくて。 いつも泣く。 Controller マジ適当ですが。 class EntriesController < ApplicationController def ajax_view @entry = Entry.find
if (history && history.pushState) { $(function() { $("#products th a, #products .pagination a").live("click", function(e) { $.getScript(this.href); history.pushState(null, document.title, this.href); e.preventDefault(); }); $("#products_search input").keyup(function() { $.get($("#products_search").attr("action"), $("#products_search").serialize(), null, "script"); history.replaceState(null, docume
Many administration pages have search, sorting, and pagination on the index page. See how to add all of this including AJAX.
$(function() { $(".pagination a").live("click", function() { $.setFragment({ "page" : $.queryString(this.href).page }) $(".pagination").html("Page is loading..."); return false; }); $.fragmentChange(true); $(document).bind("fragmentChange.page", function() { $.getScript($.queryString(document.location.href, { "page" : $.fragment().page })); }); if ($.fragment().page) { $(document).trigger("fragmen
マイクロソフトのAjaxに関する動きが目立ってきました。以前のエントリで紹介したように、9月にはAjaxによるWebアプリケーションを最適化して起動速度を改善するツール「Doloto」の配布を開始。 Ajaxの起動を高速化するツール「Doloto」、マイクロソフトが発表 － Publickey 10月には、Ajaxのライブラリとして最も人気のあるjQueryのマイクロソフト自身による配布を開始すると同時に、Ajaxライブラリを高速に配布するためコンテンツデリバリネットワーク、「Microsoft Ajax CDN」を立ち上げています。 マイクロソフトも配布を開始したjQuery、今後のバージョンでは大幅な性能向上とモバイル対応へ － Publickey Announcing Microsoft Ajax Library (Preview 6) and the Microsoft Ajax
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
