JSONPをごりごり実装するときのポイント - Qiita
Ajaxの代替手段として有名なJSONP(JSON with Padding)の実装手順を勉強がてらまとめておきます。 jQueryなどを使うとあまり仕組みを意識せずに利用はできますが、動きを理解するにはゴリゴリ書いてみるのが一番です。 JSONPとは？ Javascriptにて非同期でデータを取得する手段の一つです。 非同期通信というとAjax(XMLHttpRequestを使った通信)が有名ですが、これにはクロスドメイン制約があり、別ドメインからデータを取得することができませんでした。そこで生まれたハック的な代替手段です。最近ではクロスドメイン制約を回避できるXMLHttpRequest2も出てきましたが、直接JSONを扱える手軽さからまだまだ現役（たぶん）です。 まず仕組みをざっくり ポイントは２点。 scriptタグのsrcに、処理させたいサーバ側のファイルを指定する サーバ側はj
jQueryでjsonデータを扱ってみる【入門編】 | webOpixel
jQueryでjsonデータを扱ってみる【入門編】 javascriptで外部のWebサービスを利用するデータ形式はjsonを使うことが基本なようです。 似たようなフォーマットとしてXMLがありますが、こちらはHTMLと同じマークアップ言語なのですんなり入っていける反面、jsonは少々わかりずらいといった先入観があったりするんじゃないでしょうか。 そこで入門編と題して（入門編しかない!）改めて基礎から勉強していけたらと思います。 投稿日2010年07月25日 更新日2016年04月26日 とにかくシンプルなjson jsonデータは基本は外部から読み込むことになりますが、練習なのでとりあえずjavascript内の変数内に直に書きます。 「:（コロン）」で区切ったキーと値を一組として、２組目を「,（コンマ）」で区切って記述していきます。 それらを{}で囲むことで一つのオブジェクトとして扱い
日本一マクドナルドから遠い場所 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? きっかけ 日本マクドナルド様のサイトの店舗検索の地図をみてたら、やたらたくさんの店舗が一度に表示できる。 これって全店舗一度に読み込んでるのかな、とChromeのデベロッパーツールで覗いてみると、全店舗分のJSONが見えた。 全店舗2887件。 ちょっと拝借して長年の疑問を晴らしてみようと思った。『はたして、日本で一番マクドナルドから遠い場所はどこなのか？』 注) 離島は除きます。離島を含めると南鳥島がぶっちぎりです。 Fusion Tablesでプロットしてみる Fusion Tablesに緯度経度をインポートすることでマップに位置を
AngularJS で LocalStorage を扱う術 - kitak blog
こんにちは。おなかが空きました。きたけーです。 AngularJSでLocalStorageを扱う術を知ったのでメモ。 ngStorage つかうモジュールはこれ gsklee/ngStorage · GitHub 。 LocalStorage と SessionStorageのインターフェイスを用意してくれる。 こんなかんじ var app = angular.module('App', ['ngStorage']); app.controller('SampleController', ['$scope', '$localStorage', function ($scope, $localStorage) { // 取り出し。デフォルトの値を設定できる。 $scope.$storage = $localStorage.$default({ title: '', description:
#9 nodeのコンソールは便利なjsonビューア - KAYAC Engineers' Blog
クリスマスシーズンということでAdvent Calenderのシーズンですね。 唐突ですが、この時期カップルよりも「リア充爆発しろ」ってネガティブワードの方が、たとえそれが記号的に使われてたとしても、嫌やなーって思ってしまう@9reです。 お前のリアルは彼女つくることしかないんか。つまらんなぁって思いますし、やっぱり、 俺こないだこんなパッチ送ってん！とか、この技術凄いやろ！みたいな充実もあると思うねん(｀･ω･´)！ さて、変な前置きになりましたが、このエントリは tech.kayac.com Advent Calendar 2012 9日目の記事です(12/9 35時公開)。 テーマは「私の中のマイイノベーション 2012」 nodeのコンソールは便利なjsonビューア nodejsも普及したし、元々軽量なフォーマットっていうことでJSONのAPI結構多いですよね。 自分は普段Andr
気楽にECMAScript 2015したい
最近はOculus Riftとかを主にいじってるわけですけど、いわゆるHTML5も横目でウォッチしていて、たまにJavaScriptを書いたりもします。 で、今風にBabelを使って、かつわりと楽にゆるい感じでECMAScript 2015できるようにしておこうと思って、自分用のテンプレプロジェクトを作りました。Watchify＋Babelify＋BrowserSyncです。 KatsuomiK/ECMAScriptTemplate GitHubからcloneしてnpm installしてnpm run watchすればブラウザが起動して、.jsを書き換えればライブリロードがかかります。MacでもWindowsでも大丈夫のはずです。 package.jsonがこんな感じです。 { "name": "ECMAScriptTemplate", "version": "0.0.0", "desc
遅すぎたUnderscore.js入門 - 全体像 - Qiita
いまどこ？ 1 . 遅すぎたUnderscore.js入門 - 全体像 ←いまここ 2 . 遅すぎたUnderscore.js詳述 - Collections編 3 . 遅すぎたUnderscore.js入門 - Arrays編 4 . Functions 5 . Objects 6 . Utility 7 . Chaining Underscore.jsで何ができる？（私見） 非常にざっくり言うと、Underscore.jsはJavaScriptの表現力を高めることができる便利関数のライブラリです。その先に深淵なテーマもあるようですがひとまずは考えないでおきます。 たとえば配列を一つ飛びに足していったり、シャッフルしたり、従来ではアルゴリズムを組まなきゃいけないかったものが最初から提供されているという感じ。あとは高階関数（これは個人的にまだ真髄を分かっていないと思います。ぶっちゃけ勉強中
まだmechanizeで消耗してるの? WebDriverで銀行をスクレイピング（ProtractorとWebdriverIOを例に） - 詩と創作・思索のひろば
今日はスクレイピングの話をします。 今回のターゲットは三菱東京UFJダイレクト。金融機関もウェブサービスを提供するようになり、金にまつわる情報を電子化しやすくなりましたが、かれらが API を提供しているわけではないので、私たちのほうで取得・加工をしてやる必要があります。今やウェブサイトであれば当然のように JavaScript を使っているわけなので、いわゆる mechanize、つまり HTML の解釈をおこない、リンクのクリックやフォームの送信をシンプルに実装するようなやり方でのスクレイピングはすでに無理筋だといえます。 もちろん今日においてはブラウザオートメーションという方法がすでにありますので、これを利用してやれば、なんの憂いもなく実際に人間が使うようなブラウザをプログラマティックに操作することができます。現在は Selenium WebDriver がデファクトで、これが使用す
海外サイトを翻訳してメール通知するシステムがGASとkimonoで超簡単に出来た - Qiita
例えばHackerNewsのような海外のWebサイト。 英語が得意ではない僕は、タイトルだけでも読むのにメッチャ時間がかかる。 なのでそれらのサイトを定期的にスクレイピングして、その中身を翻訳して、メールで送ってくれるシステムを作ってみた。 作るにあたり使ったもの ・GoogleAppsScript ・kimono（http://www.kimonolabs.com/） kimonoは登録したWebサイトをスクレイピングして、JSONやらCSVやらXMLで返してくれる素晴らしいWebサービス。 import.ioと同じ？ 仕組み 1.kimonoでWebサイトをAPI化 2.GASでそのAPIからデータを取得 3.データを翻訳してメール送信して完了 具体的な方法 kimonoでWebサイトをAPI化する方法 まずはkimonoに会員登録してこんなショートカットをブラウザにセット 次に対象の
Excel：VBA：UTF-8／LFのファイルを読み込む - HiiHahWIKI - making some notes for... -
Di era digital 2025,Mawar189 hadir sebagai pilihan cerdas bagi siapa pun yang mencari hiburan ringan namun penuh potensi keuntungan. Dengan konsep platform modern, Mawar189 memadukan kenyamanan beraktivitas online dengan fitur-fitur yang dirancang untuk membuat setiap pengguna merasa betah dan percaya diri dalam menjelajahi setiap peluang yang ditawarkan. Keamanan dan kenyamanan adalah dua pilar u
ブラウザ内で安全に文字列からDOMを組み立てるためのRickDOMというライブラリを書いた - 葉っぱ日記
RickDOM - ricking DOM elements safety from string https://github.com/hasegawayosuke/rickdom ブラウザ内のDOMParserあるいはcreatHTMLDocument APIを使って不活性なDOMを組み立てたのちに、必要な要素と属性、スタイルだけを切り出して複製しているので、原理的にDOM based XSSの発生を抑えることができます。 使いかたも簡単。 var rickdom = new RickDOM(); var container = document.getElementById( "container" ); var elements; var i; // read allowings property to show default rule // div.textContent =
ピンポイント天気予報 - Rver Stone Inc.
<div class='forecast-now'> <span class='city-name'></span> <div class='forecast-a-day'> <span class='weather-day'></span> <div class='weather-wrapper'> <span class='weather-main'></span> <span class='weather-description'></span> <span class='weather-icon'></span> <span class='main-temp'></span> </div> </div> </div> <div class='forecast-daily'> <div class='forecast-a-day'> <span class='weather-day'
HTMLファイルからPOSTでJSONデータを送信する - Qiita
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTMLファイルからPOSTでJSONデータを送信する</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#response").html("Response Values"); $("#button").click( function(){ var url = $("#url_post").val(); var JSONdata = { value1: $("#value1").val()
QiitaAPIのTOKENをかんたんに取得する - Qiita
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Qiita TOKEN</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script type="text/javascript"> $(function() { $("#send").click(function() { $.ajax({ type: "POST", url: "https://qiita.com/api/v1/auth/", async: true, cache: false, json: true, data: {url_nam
「CoffeeScriptのリファクタリング」の実践とレビュー - mizchi's blog
CoffeeScriptのリファクタリング - ワザノバ | wazanova CoffeeScriptのリファクタリングと聞いたので、いてもたってもいられなくなった。まず、お題の結果を見ずにやってみる。 これが元のコード $(document).ready -> photoHTML = (photo) => "<li> <a id='photo_#{photo.id}' href='#{photo.url}'> <img src='#{photo.url}' alt='#{photo.alt}' /> </a> </li>" $.ajax url: '/photos' type: 'GET' contentType: 'application/json' onSuccess: (response) => for photo in response.photos node = $(phot
もう一度、ちゃんとJSON入門 - 檜山正幸のキマイラ飼育記 (はてなBlog)
僕自身も僕の周辺もJSONをよく使います。でも、細かい点でけっこうミスをやらかしています(苦笑)。このエントリーで、JSONを使う上で注意すべきこと／間違いやすい点をすべて列挙します。 内容 兼チェックリスト： 仕様原典さえ読めば完璧（のはずだが） 数値の前にゼロを付けてはいけない 16進数表記も禁止だよ 数値の前にプラスを付けてはいけない 小数点からはじまる数値はダメ 用語法が違うよ：プロパティとメンバー メンバー名には常に文字列を使う 空文字列""もメンバー名に使える 配列要素はキッチリと並べよう 文字列を囲むには二重引用符だけ 文字列内のエスケープが微妙に違う 仕様にないエスケープは構文エラー undefinedもNaNもありません ラッパーオブジェクトは使わないのが吉 型システムとtypeofに関する注意 最後に 仕様原典さえ読めば完璧（のはずだが） JSONは、小さくて簡単な仕様
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://lostlinksearch.net/blog/2012/12/jsonp%E3%81%A7%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AFapi%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%82%BF%E3%82%B0%E6%83%85%E5%A0%B1%E3%82%92%E5%8F%96%E5%BE%97/
JavaTechnology Slot Online | Cara Daftar bermain Slot Online
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
setIntervalの中でエラーが飛ぶとタイマーが停止する - Qiita
