美女にイタズラしたくてCanvasとAjaxを勉強してみた | KAYAC DESIGNER'S BLOG - デザインやマークアップの話
美女にイタズラしたくてCanvasとAjaxを勉強してみた こんにちは、インターン中のファイ部の田口です。 突然ですが、美女に落書きできたら楽しいと思いませんか？ グラビアなどの女の子の水着写真を黒く落書きすると、まるで裸のように見えてエロくなるってのは、ネット上でひそかに流行ってます。 今回は美女に落書きしたいという男性の潜在的欲望にのっとって、jQueryのAjaxで美女の画像をネット上から取得しながら、HTMLのCanvasで落書きしたいと思います。大きな流れはこんな感じ。 [STEP1] AjaxでBjin.Meから美人の画像を取得 [STEP2] 美人の画像にCanvasでお絵描き [STEP1] AjaxでBjin.Meから美人の画像を取得 美人の画像を取得します。美人の画像はbjin.MeでAPIとして提供しています。 このAPIを使ってAjaxを用いて、画像を取得して行
WordPressでAjaxする方法をざっくりまとめておく
アドベントカレンダーには参加してないけど今日も今日とてWordPressネタの更新です。今年に入ってから17記事目ですよ。concrete5 Japan Inc.なんてやってるのにおかしいですね。 それはさておき月末の追い込み時に調べる時間がないのにまとまった資料がなくて困った件の覚え書き。30分で終わらせようと思ったのに1時間以上かかってしまった…。WordPressのAjaxはやり方が多すぎてとりあえずこうしとけというのがまとまってないように思います。どうせ山ほどあるWordPress本にも書いてないだろうしな。これでいいのかよく分からないので、間違ってたらツッコミお願いします。 んで、どうも wp_ajax_{action_name} または wp_ajax_nopriv_{action_name} というアクションフックで処理するのがよさそうである。noprivの方はログアウト中、
Yahoo!、Ajaxライブラリ「YUI 3.11.0」を公開
米Yahoo!は、Ajaxライブラリの新版「YUI 3.11.0」を公開した。処理性能向上を目指し、AttributeとBaseに変更を加えた。 米Yahoo!は2013年7月16日、Ajaxライブラリの新版「YUI（Yahoo! UI Library） 3.11.0」を公開した。Webサイトからダウンロードできる。YUIのブログによると、新版ではバージョン3.10.0に引き続いて処理性能向上を目指し、AttributeとBaseに変更を加えた。プレビュー版の3.11.0pr1に存在していたバグは修正されている。 新機能として、データを複数のページに分割して表示する「Paginator」と「DataTable Paginator」を加えた。Paginatorは、例えば複数の写真をスライドショー形式で自動的に切り替えて表示できる。軽量かつ柔軟性の高い設計を採用し、サーバサイドでもクライアント
jQueryのDeferredを用いたモダンなAjax処理の書き方
目次 jQuery 1.4以前の書き方jQuery 1.5以上の書き方jQuery 1.8以上の書き方【発展編1】Deferredを用いた書き方 deferredとは何か？【発展編2】$.when() を用いた書き方参考本エントリは軽めのjQuery Advent Calendar 2012の14日目の記事として書きます。軽めといいながら少し重めになってしまった感がありますが、初めてのAdvent Calendar参加ということでご勘弁を。 ※ Twitter API仕様変更によりTwitter APIを使ったコード例は現在動作しなくなっていることにご注意。 jQuery 1.4以前の書き方まずは、少し古めのコード、昔のjQueryの本とかでよく見る書き方。 $.ajax({ url: "ajax.html", success: function(data) { alert('succes
Domain Sales Page | Flippa.com
The most powerful domain sales page Three reasons why you should setup a sales page and start receiving offers immediately. It's FREE! Update name servers for one or all your domains Provide custom page text or use our dynamic sales text Manage qualified offers from within your Flippa domain portfolio. Get started Adding a sales page to your domain takes as little as 5 minutes. Add your domains to
jQuery MobileでAjaxで取得したページでスタイルシートを反映させる
jQuery MobileでAjaxで取得したページでスタイルシートを反映させる リクリのセミナーでjQuery MobileでAjaxで取得したページのスタイルシートが反映されないとの質問を受けました。 イメージとしてはこんな感じだと思います。 index1.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <title>jQuery Mobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2
SEOにも強いクローラブルなAJAXコンテンツを作成するために :: 5509
AJAXコンテンツが増えるにつれて問題になるのは、SEOというか、検索エンジンにどうクローリング、インデックスさせるのか、という点ですよね。 この前JavaScriptの実装を担当した松本クリニックは、AJAXでほぼ全てのページを切り替えるっていうのが最大のポイントなんですけど、これの良いところはWordPressで全てのページを生成してて、JSオンでもオフでも見られるんですね。つまり、クローラはオフのコンテンツを見るような作りにしてあります。 で、こういうのって小規模～中規模なサイトならまだいいと思いますけど、大規模なサイトになってきたりするとページは存在しないでデータだけが存在したりする（ハンドラにリクエストをかけてJSONだけを返してもらって内容を入れ替える、など・・・）わけで、実現が難しくなるんですね。 この問題に対してGoogleが現在公表している方法は、HTML snapsho
Ajaxload - Ajax loading gif generator
Indicator type : Background color : # Transparent background Foreground color : # Create easily your own ajax loader icon : Select the type of indicator you want Enter the background code color you want (tick "Transparent background" if you don't want one Enter the foreground code color you want Press "Generate it"
画面遷移なしにAjaxでシームレスに実装できるコメントシステム作成チュートリアル:phpspot開発日誌
Simple AJAX Commenting System ? Tutorialzine 画面遷移なしにAjaxでシームレスに実装できるコメントシステム作成チュートリアル。 書き込むと内容がそのままDOMツリーにアニメーションしながら追加されるという、よくありそうなコメントシステムの実装チュートリアルとサンプルプログラムです。 似たようなものを実装したい場合に参考にできるかもしれません。 フォーム部分もそれなりにスタイルされており、JavaScriptによるブラウザ上バリデートも効いてます。 改善の余地がありますが１から作るよりサクっと実装したい場合に使えそうです。 関連エントリ PHPとjQueryで作るAjaxなグループチャットスクリプト PHP+Ajaxなチャットスクリプト：YShout
Ajax - Goodbye, JSONP. Hello, Access-Control-Allow-Origin : 404 Blog Not Found
2010年08月17日06:45 カテゴリLightweight Languages Ajax - Goodbye, JSONP. Hello, Access-Control-Allow-Origin もうそろそろJSONPとはお別れできるのではないかと思い立ったので。 XMLHttpRequestとその問題 AjaxといえばXHRの愛称で親しまれているXMLHttpRequestですが、これには一つ重大な欠点がありました。 これを発行するDHTMLページのドメインが、Request先のドメインと一致する必要があったのです。いわゆる Same Origin Policy というやつです。おかげでサイトをまたがって使えなかったのです。これではマッシュアップできない。どうしよう。 JSONPとその問題 そこで生まれたのが、JSONPという手法です。 これは、scriptノードを追加した時に、単
EclipseでJavaScript削減Ajax開発 － マスカットとは
JavaScript記述を削減するAjax「マスカット」とは 前回の『業務システムでAjaxを使う際の「JavaScript問題」とは』では、「TERASOLUNA Client Framework for Ajax」（以下、TERASOLUNA Ajax）の概要について説明しました。 今回は、TERASOLUNA Ajaxのオープンソース版である「マスカット」と、その開発環境「マスカットIDE」を利用し、簡単なAjaxアプリケーションを作成する手順を紹介します。 Eclipseプラグイン「マスカットIDE」の機能と構成 マスカットIDEはEclipseベースの統合開発環境です。マスカットIDEを利用すると、Ajaxアプリケーションの動作に必要な「レイアウト定義XML」「イベント定義XML」を直感的に編集できます。 マスカットIDEはマスカットエディタ、［プロパティー］ビュー、［アウトライ
AJAXとCSSで作るクリエイティブなフォーム集「Astounding Ajax/CSS Forms: 30+ Modern Trends」
TOP > WebDesign > AJAXとCSSで作るクリエイティブなフォーム集「Astounding Ajax/CSS Forms: 30+ Modern Trends」 ユーザーとコンタクトが取れる窓口的な役割を持つフォーム。ユーザーが実際に使う部分だけに、そのデザインやわかりやすさ使い勝手によって、目的が達成できるかどうか大きく変わります。今回紹介するのはAJAXとCSSで作るクリエイティブなフォーム集「Astounding Ajax/CSS Forms: 30+ Modern Trends」です。 jQuery inline form validation ちょっとした仕掛けがあるものから、見た目が美しいもの、入力補助が効くものなどなど、様々なフォームがまとめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■H
第18回 jQueryでAJAX入門：RSSをAJAXで取得してリストに表示する | gihyo.jp
他ページなどのコンテンツを動的に表示するAJAXもjQueryを使えば驚くほど簡単に利用することができます。今回はAJAXを利用して、RSSフィードを取得、表示してみましょう。 RSS 普段の情報収集でRSSリーダーを使っている方は多いと思いますが、RSSフィードと言っても、現在使われているものは、主なものでRSS1.0、RSS2.0というようにバージョンが2つあり、これらはXMLの形式が多少違いますので、分かりやすいように今回はRSS2.0に対象を絞ります。他にもAtomという規格自体が違うフィードもあります。 XML？ RSSはXML（Extensible Markup Language）という言語で書かれています。以下はgihyo.jpのRSS2.0のフィードです。リンク先を開いてブラウザの「ページのソース」などで、ソースを確認してみてください。 http://rss.rssad.j
AJAXサイトをクローラブルにする - 検索エンジンフレンドリーなAJAX実装方法 ::SEM R (#SEMR)
AJAXサイトをクローラブルにする - 検索エンジンフレンドリーなAJAX実装方法 AJAXアプリ（サイト）をクローラブル（crawlable）にするための技術的アプローチ。Googleが公開した最新ドキュメントを基に解説します。 公開日時：2010年03月05日 19:53 米Googleが、AJAXベースのウェブサイトをコンテンツを検索エンジンに登録する方法についての、最新ドキュメントを公開しました。昨年10月に検討段階の実装方法が公式サイトで紹介されましたが、それのアップデート版になります。 最初におさらいをします。AJAX（エイジャックス）は、ページ遷移なしにサーバとデータ通信を行うことで、動的なWebアプリケーションの開発が可能です。しかし、いまブラウザで表示している内容と対になるURLが存在しないために、クローラが個々のコンテンツをクロールできないこと、また、仮にステートフルU
anything from herejquery.js を利用した Ajax 通信の一例（改訂版コードについて）
コード改訂に至る経緯 約 2 年程前に上記関連リストに掲載したエントリイを投稿しました。 そこではjquery.js の Ajax コードを活用する一例として、今閲覧しているエントリイの直前 10 エントリイ、直後 10 エントリイ及び最新の 10 エントリイの、それぞれのタイトルを Ajax 通信で取得してみました。 その後ずっとそれを使い続けてきたのですが、あることからコードを見直す必要に迫られ、今回改めてコードを全面的に見直し、要所をいくつか改訂しました。 改訂を思い立ったのは、直前/最新/直後エントリイタイトルの表示位置が、ブラウザによっては、どうも思ったように描画されていないことに最近気がついたからです。（セットしてから 2 年も経っているのに今更かい？！(^^;; ） IE と Firefox では意図したとおりになっていたのですが、safari や chrome ではずれてい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IBM Developer
5509.me
IBM Developer
jQueryによるAjax操作の基礎｜JavaScriptプログラムメモ｜プログラムメモ
http://blog.crara.cc/archives/630