[対象: 上級] この記事では、非常に華麗な無限スクロールを実装しているサイトを紹介します。 美しく、見やすい、SEOも考慮できた QUARTZ の無限スクロール そのサイトは、ニュースメディアサイトの QUARTZ です。 「百聞は一見にしかず」で、実際に QUARTZ に訪問して見てください。 注目してほしいのはブラウザに表示されるURLです。 無限スクロールで下がっていくと、今あなたが見ている記事に対応したURLに自動的に切り替わります。 下方向だけでなく上に戻ればまたそれに対応してURLが変わります。 titleタグももちろん切り替わります。 個別のURLをブラウザのアドレスバーに入れれば、直接そのコンテンツを閲覧できます。 そして、そこから無限スクロールが始まります。 記事に与えられた個別のURLは、そのURLできちんとGoogleにインデックスされています。 Mozのランドもイ
本文書は、Jesse James Garrett 氏による “ajax: a new approach to web applications” を、Creative Commons の Attribution ライセンスに基づき、訳出したものです。 本文書の訳には、誤っている箇所が多々あると思います。また、日本語的にうまく訳せない、あるいはわかりにくいところは、激しく意訳しています。しかし、話のおおよその流れについては外してはいないと思いますので、細かいことは気にしないでください。 ちなみに「覚え書き@kazuhi.to: DESIGN IT! 1日目」によると、 Ajax は「エイジャックス」と発音するとのことです。 著者: Jesse James Garrett 訳者: Kentaro Kuribayashi 初稿公開日: 2005-02-22 最終更新日: 2013-11-19 T
Rails3からの変更点でハマったのでメモ。 Rails2ではformをAjaxで送信するにはform_remote_tagを利用していた。 これがRails3では以下のように:remote => trueを指定することで実現する。 <%= form_tag(url_for(:action => 'create'), :remote => true, :id => "result_form") do %> <% end %> 今は主にjQueryを使って開発している為、デフォルトで扱うjavascriptをjQueryに変更する。 Gemfileに以下記述 gem 'jquery-rails' bundle installして関連ファイルをgenerate $ bundle install $ rails g jquery:installjquery.jsとrails.jsを読み込むように
scaffoldを使うとCRUDが揃った「土台」を一発で作れるわけですが、それをアレコレして全ての操作をAjax化してみたので、手順をまとめました。 記事を読むのがだりぃって方はソースコードをGitHubで公開してるので、そちらをご覧ください。 RubyもRailsもあんまり触った事がないので、識者によるツッコミ歓迎します。 (｀・ω・´) 概要 やること indexの画面だけでCRUD、つまり新規作成 (Create)、表示 (Read)、編集 (Update)、削除 (Delete)を行えるよう、scaffoldで作成したファイルをいじります。 結論 form_for()にremote: trueを与えるだけで、とりあえずAjax化します。あとはサーバー側のレスポンスの内容を整えて、クライアント側で適切に処理してやればOKです。 作業 下準備（scaffoldとか） indexに編集フ
Rails3で汎用検索機能を作る
業務アプリでは CRUD 以外で必ずと言ってもいいほど実装する機能があります。検索です。 検索機能って、たいていはページの上部に検索フィールドがあって、入力して検索ボタンを押すとページの下部に検索結果が表示される。 こんなのばっかりです。 それを毎回ページ全体をゴリゴリ作るって疲れませんか？ Rails で scaffold すると index は一覧表示になりますが、ここが検索になる画面のほうが圧倒的に多くないですか？ というわけで、汎用検索機能（というか簡易フレームワーク）を作ろうってのが今回の趣旨です。 大体、検索機能で検索ごとに違うのは大まかには下記の三つでしょう。 ・検索フィールド ・検索ロジック ・結果表示（一行分） 極力この三点に注力できるようにしたい。 具体的には、検索条件は汎用的なコンテナクラスに格納する。 コンテナクラスは、検索条件だけを格納できるように form_fo
寄り道ばかりの人生だけど、寄り道こそが我が人生。 暇人が色んなプログラミング技術を摘み食いしてみるテスト。 GAE for Python と jQeury を利用して、JSONデータのAJAX通信を行ってみる。 下のサンプルは、サーバへブログ情報パラメータ(ブログ題名とリンクURL)を渡すと、サーバ側は受け取ったブログ情報をそのままJSON形式に変換してクライアント(ブラウザ)へ返すという単純なものだ。 helloworld.py # -*- coding: utf-8 -*- import cgi import os from google.appengine.ext import webapp from google.appengine.ext.webapp.util import run_wsgi_app from google.appengine.ext.webapp import
機械翻訳のWebサービスがないか探していたのですが、Google AJAX Language APIってのを見つけました。本来はJavascriptから使うみたいですが、Pythonからも使えたのでまとめときます。結果はJSONでかえってくるのでその解釈にsimplejsonというPythonライブラリが必要です。 #coding:utf-8 import urllib import simplejson def translate(query, frm="en", to="ja"): query = query.encode("utf-8") data = {"q":query, "v":"1.0", "hl":"ja", "langpair":"%s|%s" % (frm, to),} f = urllib.urlopen("http://ajax.googleapis.com/aja
これまで、 HTML 文書から直接 CGI を呼び出すことで、掲示板みたいなものを実現してきました。 今回は、 JavaScript ファイルを追加して、いわゆる "Ajax" に挑戦してみます。 HTML : visitor_world6.html 今回のメッセージ送信画面は、今までとちょっと違います。 メッセージを記入する "TextBox" と "Submit" "Clear" ボタンが並んでいる所までは同じなのですが、今回は、その下にメッセージのリストが表示されています。 "TextBox" にメッセージを記入して、 "Submit" ボタンが押したら、今までは CGI を直接呼び出していました。 今回は、一旦 "JavaScript" が "Submit" ボタンのクリックを受けとめて、そこから改めて CGI を呼び出して、メッセージの追加とメッセージ一覧の取り寄せを行います。
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. Learn moreSee full compatibilityReport feedback XMLHttpRequest (XHR) オブジェクトは、サーバーと対話するために使用されます。ページ全体を更新する必要なしに、データを受け取ることができます。これでユーザーの作業を中断させることなく、ウェブページの一部を更新することができます。 EventTarget XMLHttpRequestEventTarget XMLHttpRequest XMLHttpRequest という名前ではあるものの、 XML だけでな
pyjamasはPythonで開発されたWebアプリケーションフレームワーク。GWTのコンセプトをPythonで実現するためのもので、Pythonで開発したアプリケーションをコンパイルしてJavaScriptとHTMLを生成し、Ajax対応のWebアプリケーションとして動作させるというもの。 最新版は6日(米国時間)に公開された0.1。Apache License Version 2.0のもとで公開されているオープンソースソフトウェアで、成果物はpyjamasのサイトから取得することができる。同成果物は開発がはじまったという段階にあり、作り込みはまだこれから。主要開発者は開発へデベロッパの参加を呼びかけている。 pyjamasのインストールは成果物を取得して展開するだけでよい。pyjamas 0.1であれば図3.1のような成果物が展開される。builderディレクトリにPythonからJa
Ajaxを補足するためのPythonによる手軽なマルチスレッド処理
Webアプリの開発で、重い処理はAjaxで別途処理して取得するという手段が取れない場合があります。 「画面の一部で矢印がぐるぐる回って待たせるのではなく、本当に一瞬で全部表示したい」 などの場合です。 そんなときにお手軽に使えるテクニックとして、サーバー処理のマルチスレッドによる並列化があります。 Pythonのマルチスレッドでは、高度なCPUの並列処理はできませんが（グローバルインタプリタロックと言います）、少なくともI/O待ちの間別の処理を流す程度の事は可能です。[参考] その特徴を生かして、Webアプリのレスポンスを速めることができます。 これを使う場面ですが、たとえば、以下のようなものがあります。 この画面はうちの会社で作っている特許分析WEBアプリのBiz Cruncherというもので、特許の詳細な内容を表示しているところです。 特許の閲覧というのは企業知財部では古来から「手めく
少しずつ時間をとって最近作ってたのがこれ。Pythonでpipeを使って実行したdfコマンドの結果を整形し、Djangoでviewを作ってAjaxで表示したもの。Ajaxのライブラリには、SimpleJSを使ってみた。 ファイルの命名は適当ですがお気になさらず。サイズを取得してるディレクトリとかは、それぞれの環境に読み替えよろしく。Djangoについて多くは書かないので参考程度に。Windowsでは当然動きませんがあしからず。 projectdir/modules/status.py import os import re def diskinfo(dir): pipe = os.popen('df -h | grep \" %s$\"' % dir, 'r') text = pipe.read() pipe.close() info = re.split('[\s]+',text) if
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
