"note"がAngularJSでどうやってSEO, Open Graphの対応をしているか｜和田 晃一良｜note
noteはAngularJSを使って、ブラウザで描写しているこの"note"というサービスはAngularJSを使って、JavaScript側（つまりブラウザ側）でノートの中身を公開しているみたいなのです。 それはブラウザでソースを見てみるとわかります。 例えばhttps://note.mu/sadaaki/n/nd921f3f7c635のノートのソースをChromeで見てみると・・・ まずhtmlタグにng-appのプロパティがついています。これはAngularJSを使うならば必要なプロパティで、ここからnoteはAngularJSを使っているんだなあと分かります。 AngularJSは簡単に言うと、サーバー側ではなくブラウザ側でHTMLを描写する仕組みです。これを利用するとどんな利点があるのか。僕の理解している範囲内だと、サーバー側はベースとなるHTML（上のソース）と各ノートのJSO
知っていれば恐くない、XMLHttpRequestによるXSSへの対応方法
知っていれば恐くない、XMLHttpRequestによるXSSへの対応方法：HTML5時代の「新しいセキュリティ・エチケット」（3）（1/2 ページ） 連載目次 皆さんこんにちは。ネットエージェントのはせがわようすけです。前回は、同一オリジンポリシーを突破する攻撃の代表的事例であるXSSについて、特にDOM based XSSと呼ばれるものについて解説しました。今回はその続きとして、XMLHttpRequestによるXSSを解説します。 XHR Level 2によるリモートからのコード挿入によるXSS 従来、XMLHttpRequest（以下、XHR）は、表示しているドキュメントと同じオリジン（オリジンについては第1回を参照）としか通信できませんでしたが、現在の主要なブラウザーではXHR Level 2と呼ばれる実装により、オリジンを超えて通信することが可能になっています。 これは、Jav
Rails3.1でAjaxを使う - ひげろぐ
よく理解できていなかったのでチュートリアル的に整理した。 まずはチュートリアル用のアプリを新規作成して、コントローラーを一つ作る。 rails new ajax_tutorial cd ajax_tutorial rails g controller sandbox index update_time Ajaxなフォームやリンクを作成する form_forやlink_toといったヘルパーのオプションに:remote => trueを加えるとボタンを押した時やリンクをクリックした時のリクエストが非同期リクエストになる。 app/views/sandbox/index.html.erb <h1>Sandbox#index</h1> <%= link_to('update time', {:action => 'update_time'}, :id => 'update-time-link',
Rails 4のturbolinksについて最低でも知っておきたい事
Rails 4のturbolinksについて最低でも知っておきたい事 （追記）turbolinksに関するセキュリティ上の懸念について turbolinksとは、ページ遷移をAjaxに置き換え、JavaScriptやCSSのパースを省略することで高速化するgemで、Rails 4からはデフォルトで使用されるようになります。 高速化は大歓迎なのですが、JavaScriptのイベントの起き方が変わるため、Rails 3までの書き方をしているとまず間違いなく問題が起きます。しかも、Rails 4ではデフォルトの機能ですので、最新版を使いたいなら必ず知っておかなければいけません。 本エントリではturbolinksを使うために絶対に知らなければいけないことを分かりやすく紹介したいと思います。 動作 turbolinksの動作は、すごく大雑把に言うと以下の通りです。 リンクのclickイベントをフッ
Rails3のAjaxでHTMLを返してjQueryで処理する - #詰んでる日記
6月末くらいからRailsを触り始め、ようやく慣れてきたと思ったらRails3が出て涙を流してるのがおれです。そんなわけで会社のプロジェクトをRails3で書きなおしてます。 Rails2時代 Rails2時代のAjaxのリクエストは、link_to_remoteを使えば問題ありませんでした。こんな感じ <%= link_to_remote "hoge", :url => hoge_path,:update => "hoge_id" %> こうするとhoge_pathっていうURLにAjaxで通信して、返ってきたレスポンスでid="hoge_id"な要素以下を更新してくれてました。 Rails3時代 Rails3ではlink_to_remoteは廃止され、代わりに:remote => trueを使うようになりました。あと:updateもなくなったみたいです。こんな感じです。 <%= lin
QA＠IT サービス終了のお知らせ - ＠IT
平素よりQA＠ITをご利用いただき、誠にありがとうございます。 QA＠ITは「質問や回答を『共有』し『編集』していくことでベストなQAを蓄積できる、ITエンジニアのための問題解決コミュニティー」として約7年間運営をしてきました。これまでサービスを続けることができたのは、QA＠ITのコンセプトに共感をいただき、適切な質問や回答をお寄せいただいた皆さまのご支援があったからこそと考えております。重ねて御礼申し上げます。 しかしながら、エンジニアの情報入手方法の多様化やQAサービス市場の状況、＠ITの今後のメディア運営方針などを検討した結果、2020年2月28日（金）15:00をもちましてQA＠ITのサービスを終了することにしました。 これまでご利用をいただきました皆さまには残念なお知らせとなり、誠に心苦しく思っております。何とぞ、ご理解をいただけますと幸いです。 QA＠ITの7年間で皆さまの知識
Rails 4.0 に入る予定の turbolinks について調べた - おもしろwebサービス開発日記
Rails 4.0 のデフォルト Gemfile に入るらしい、pjax っぽいことをして画面遷移を高速化する gem turbolinks について軽く調べてみました。 Introducing Turbolinks: github.com/rails/turbolin…. This will ship as default-on in Rails 4.0 Gemfile. PRESS TURBO BUTTON! yfrog.com/odqcgsxj— DHHさん (@dhh) 9月 26, 2012 実態は100行ほどの coffee script なのでざっくり読んでみるとどんな挙動をするのかわかりやすいです。 turbolinks/lib/assets/javascripts/turbolinks.js.coffee at master · rails/turbolinks · Gi
Ruby on Rails 3 の Ajax いろいろ - yuumi3のお仕事日記
今さら感はありますが、Rails3 の Ajax 実装の方法を紹介します。 Rails3.1 から jQuery がデフォルトになり、AjaxもRails2の頃とは違うスタイルなりました。また、幾つかのパターンが選べるようになりました。 ここでは上の画像のように、 rails g scaffold todo due:date task:string で作ったアプリのshow がindex画面に表示される簡単な Ajax アプリで説明します。 1. Rails2 に近いやり方 Rails2 では、view にjavascriptを書かずに ajax アプリを書けるようになっていましたが、それに近い方法は、 index.html.erb の showへのリンクに :remote => trueを指定し、Ajax用の表示エリア div.show_area を置きます。 <% @todos.eac
jQueryのDeferredオブジェクトについて調べてみた - AOEの日記
はじめに 最近になって jQuery に Deferred Object と呼ばれるものが追加されたことを知りました。バージョン1.5から追加になったようです。 ここのところ色々な場面で非同期処理と付き合うことが多かったこともあって調べてみたのですが、中々嬉しい機能を持っているやつであることが判明したので、調べた内容についてまとめてみました。 非同期処理は結構書きにくい jQuery Deferred オブジェクトは非同期処理を書きやすくするために用意されたものです。でも何でそんなものが追加されたのでしょうか？ 非同期処理は複雑になってくると書きにくいものです。Ajaxリクエストを例に挙げてみます。 $.ajax({ url: "serviceA.json", success: function(data) { // リクエストが成功したときの処理 }, error: function(x
Ruby on Railsアプリ以外でも Selenium RC を使えば RSpec でテストが書ける！ - yuumi3のお仕事日記
RSpec のテストを記述するDSLとしては素晴らしさは、 Selenium RC と組み合わせる事で Ruby on Railsアプリ以外でも使えます。 Selenium は Javascriptを使いWebアプリのテストを行うツールとして有名ですが、Selenium RC を使うと RSpecで書いたテストを Webブラウザー上で走らせる事が出来ます。 準備 Seleniumのページから Selenium IDE 、 Selenium RC (Remote Control) をダウンロードします。 Selenium IDEは Firefox上で動きますので Firefox を使っていない方は ダウンロード して下さい。最近 Firefox4.0がリリースされましたが、2011/3/28日現在は、旧版の 3.6 の方が良いかもしれません、Firefox3.6はここからダウンロードできます
AjaxZip 2.0
Kawa.netxp AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム（CGI不要版） AjaxZip2は、昨年公開した 『ajaxな住所入力フォーム』 の新バージョンです。 郵便番号を入力すると、該当する都道府県名・住所が自動的に入力されます。 Ajaxと JSON フォーマットを利用するJavaScriptライブラリとして公開しました。 JavaScript のみで稼動するため、サーバサイドで稼動するCGIプログラムは不要です。 郵便番号→住所変換処理は全てクライアントサイドのJavaScriptで行います。 既存 HTML の住所入力フォームをたった3行書き換えるだけで利用できます。 簡単に設置できるため、プログラムに詳しくない方でも導入していただけると思います。 以下の住所入力フォームに、7桁の郵便番号を入力してみてください。 【2007/12/09 追記】 jQ
jQuery 開発者向けメモ - 基本・サンプル
基本 jQueryとは jQuery は様々な処理を短く簡単に書ける JavaScript ライブラリです． 独自のXPATH/CSSセレクタを利用することで，多くのDOM操作を非常に簡単に書くことが出来ます． JavaScriptのDOM操作や，XMLHTTPRequest，XMLの操作などを覚えなくとも， Ajaxを利用したインタラクティブなページを作ることが出来ます． 以下のサンプルを見れば，JavaScriptらしい表記をほとんどする必要がないことがわかると思います． toggleサンプル 特定のブロックの表示・非表示を切り替えるのは以下のようなコードになります． $("#target_toggle").toggle("slow"); このブロックは，<p id="target_toggle"> です． Ajaxサンプル Ajaxでhello.htmlをロードするのは以下のようなコ
CAPTCHAは愚策:江島健太郎 / Kenn's Clairvoyance - CNET Japan
最近ようやく初級プログラマーを卒業できた手応えのようなものを感じており、いよいよコードを読み書きするのが楽しくてしょうがない段階になってまいりました。 こういうとき、Rubyは初心者にもやさしいけど、上達すればどこまでも上のステージが用意されているような、まるで自然言語のようななめらかさ・しなやかさがあって、ほれぼれとします。デザインの美しいものに触れているときには人間はこんなにも幸せになれるのか、という感じですね。ときに、今回のブログネタは、デザインの悪いものに出会うとこんなにも気分が悪くなるのか、という話なのですが。 なお、新プロジェクトではデザイナーのクリスの勧めでHamlを使うことにしたり、アーキテクトのダニーの設計でJavascriptにPublish-Subscribe型の（つまり一対多の）コールバックのフレームワークを作ってみたり、ReallySimpleHistoryを使い
Portfolio > JavaScript :: Kyosuke.jp
設置方法 まず、ファイル一式をダウンロードします。 通常版 | prototype.js利用版 stripedtableを使いたいHTMLファイルにjavascriptを読み込みます。 <script src="js/stripedtable.js" type="text/javascript"></script> prototype.js版を使う場合は先にprototype.jsを読み込みます。 <script src="js/prototype.js" type="text/javascript"></script> <script src="js/stripedtable_proto.js" type="text/javascript"></script> テーブルに設定するクラス名や、trに対して自動的に付加されるクラス名を変える場合はstripedtable.jsの設定部分をテ
Aptanaで始めるJavaScriptライブラリ「jQuery」超入門
JavaScriptライブラリ「jQuery」とは？ 最近、Flashの代わりにJavaScriptを利用してリッチなデザインのWebサイトを構築する事例が増えてきました。特にグーグルのサービスは、JavaScriptをうまく取り入れている例として誰もがご存じでしょう。 例えばGoogleマップは、Webブラウザ上でマウスをドラッグ＆ドロップするだけで、地図を自由に操作できます。このような操作感は、まるでWebサイトであることを意識させない作りになっています。 本来、JavaScript自体はインターネットが広まり始めたころから存在していて、決して目新しい技術ではないのですが、Webブラウザの種類やバージョンによって挙動が異なることから、JavaScriptを使って大掛かりな仕組みを作ることは不可能だと考えられてきました。 しかし、最近ではWebブラウザは自動的にバージョンアップされるよう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - dnagir/spinjs-rails: A spinning activity indicator for Rails 3.1
Amazon Web サービス入門(Product Advertising API)
IBM Developer
moto-mono.net
WEB WEB BOY