YQL (Yahoo Query Language)

YQL（Yahoo Query Language） は Yahoo が提供する開発者向けのAPIで、 SQLライクなクエリを送ると様々な情報を取得する事が出来るサービスです。 受け取るデータは XML か JSON かを選択可能で、 JSONPにも対応しているのでクライアントJavaScriptからも簡単に利用できます。

例えば場所情報や地域の天気情報を取得したり、 Flickr から写真を検索したり、Webページのフィードを取得したりする事等が出来ます。

利用方法

パブリックAPIのエンドポイントは http://query.yahooapis.com/v1/public/yql です。 パラメータは、形式を指定する format 、クエリを送る q、JSONPのコールバック用の callback を渡す事ができます。 次のようなリクエストを送る事になりますね。

http://query.yahooapis.com/v1/public/yql?format=json&q=[YQLクエリ]&callback=[コールバック関数]

YQL の書き方については、公式の Yahoo Developper Network でテスト出来るコンソールを用意しているので、 どんな書式でどんな情報が得られるかを試してみると良いですね。

• YQL Console: show tables

テーブルによっては別途アプリケーションIDが必要です。 また、Flickr 関連のテーブルは flickr で登録したアプリケーションIDが必要な様です。

位置情報から天気情報を取得してみる

天気情報は weather.forecast から取得できますが、位置情報の指定に woeid という者が必要になります。 woeid というのは “Where On Earth Identifier” の事で、 全世界の地域ごとに ID を振って管理をしています。

woeid は、geo.places テーブルから都市名で引く事が出来ます。

SELECT woeid FROM geo.places WHERE text = '神奈川県横浜市'

そこで得られた woeid を使って、天気情報を引きます。ちなみに神奈川県横浜市の woeid は 1118550 です。

SELECT * FROM weather.forecast WHERE woeid = 1118550

一通りの処理を jQuery で書いてみましょう。

var rest = "http://query.yahooapis.com/v1/public/yql";

$.ajax({
    dataType: "jsonp",
    url: rest,
    data: {
        format: "json",
        q: "SELECT woeid FROM geo.places WHERE text = '神奈川県横浜市'"
    }
})
.then(function(data){
    var woeid = data.query.results.place.woeid;
    return $.ajax({
        dataType: "jsonp",
        url: rest,
        data: {
            format: "json",
            q: "SELECT * FROM weather.forecast WHERE woeid = " + woeid
        }
    });
})
.then(function(data){
    $("#widget-weather").html(data.query.results.channel.item.description);
});

結果のデータを辿って得られる description には出力用のHTMLが格納されているので、 それをそのままコンテナに表示しています。 ただ、内容は全て英語で温度の単位も華氏なので、実際に使う時は翻訳や換算をしてあげないといけません。

RSSフィードを利用する

YQL の feed テーブルでは、Web上にあるRSSフィードをJSONに変換して返す事が出来ます。 試しにJSONPで Mach3.laBlog のフィードを取得してみようと思います。

var query = "SELECT * FROM feed WHERE url = 'https://blog.mach3.jp/feed'";
var rest = "http://query.yahooapis.com/v1/public/yql";

$.ajax({
    dataType: "jsonp",
    url: rest,
    data: { format: "json", q: query }
})
.then(function(data){
    console.log(data); // フィードのデータ出力
});

自サイトのフィードを読む分には特に必要ないですが、クロスドメインでRSSを引っ張りたい時や、 サービスのAPIがXMLしか対応していない場合などに使えます。 勿論、利用規約はそのソースを提供しているコンテンツプロバイダの物に従う事になるので、 それに則って正しく利用しましょう。

爆速YQL

Yahoo! Japan デベロッパーネットワークのブログで 「爆速YQL」 なる物が紹介されていました。 これは何かというと、YQLの結果取得と出力をブログパーツのような感覚で出来てしまうコンポーネントです。

• XMLのWebAPIを爆速で使いこなせるフレームワーク – Yahoo! JAPAN Tech Blog

上で挙げたフィードの取得を試してみましょう。なるほどこれは爆速です。

<script src="http://i.yimg.jp/images/yjdn/js/bakusoku-yql-v1-min.js"
    data-yql="SELECT * FROM feed WHERE url='https://blog.mach3.jp/feed'">
    <ul>
    {{#query.results.item}}
        <li><a href="{{link}}">{{title}}</a></li>
    {{/query.results.item}}
    </ul>
</script>

script 要素の data-yql 属性に YQL のクエリを入力すると、 要素内のビューを使ってコンテンツを表示します。 ビュー部分には Mustache を採用しており、ループや条件分岐等もする事ができます。

こういう形でのウィジェットの公開も良いですね。

参考資料

• Yahoo! Query Language – YDN
• YQL Console: show tables
• XMLのWebAPIを爆速で使いこなせるフレームワーク – Yahoo! JAPAN Tech Blog

ざっくりとした話はスライドで

要するに、Googleスプレッドシートで作ったデータを元に、
更新管理する仕組みをYahoo!Pipesを経由してやってみよう！という試みです。

メリット

1. CMSはわからないけどExcelはわかるよ！という方が幸せになる
2. 導入コスト/学習コストが安くて幸せ
3. 表計算UIの方が更新しやすいコンテンツで幸せになれる

特に、3番目。
tableを使って表現したい物などはWordpressやMovableTypeでは更新しづらいですね。
それならGoogleスプレッドシートのUIを利用して…と思った次第です。

デメリット

1. アウトプットがちょっと不安定
2. リアルタイム性に欠ける

恐らくPipes内のキャッシュの問題だと思うのですが、
外部リソースを更新してもすぐに反映されるわけではなく、数分のタイムラグがあるようです。

デモ＆ソースコード

GoogleDocs + Yahoo!Pipes – jsdo.it – Share JavaScript, HTML5 and CSS

かいつまんで説明など。
基本的にJSONPでYahooPipesの出力をとってきてるだけです。

$.ajax({
    url : pipeUrl,
    dataType : "jsonp",
    jsonp : "_callback", // "callback"じゃないよ！
    success : function( data ){ ... }
});

注意点としては、JSONP用のコールバックのパラメータが、
jQueryデフォルトの「callback」ではなく、「_callback」だという点。
successパラメータの関数の中身で、受け取ったデータを元にHTMLを生成します。

// アイテム数が0だった場合の処理
if( !data.count ){
    $("<p>").addClass("caution")
    .text("おや？Yahoo!Pipesさんの機嫌が悪いようです…")
    .hide().appendTo( container ).fadeIn();
    return;
}

まとめ

スライドにもありますが、実際のところサーバサイドで処理すべき場面が多いと思います。
JavaScriptで書いたのは「Yokohama.js」のお題だったので。

Pipesさんの機嫌に左右されまくった実験でしたが、
この不安定さは書き方で改善出来るのだろうか…などと思案中です。

（リソースまとめ）

• 
  プレゼンテーションスライド
  
• 
  スプレッドシート
  
• 
  パイプ
  
• 
  DEMO(jsdo.it)
  

@anywhere

Welcome to @Anywhere | dev.twitter.com

Twitterの機能がどのサイトでも活用出来るようになるJavaScriptリソース。
認証からタイムライン読み込み、パーツのレンダリングまで。
連携サービスを組むならおさえておきたい。

• ブログで@anywhereを試してみた！ ～ どこでもTwitter | Mach3.laBlog
• @anywhereで認証してみる備忘録 | Mach3.laBlog

jsLint

JSLint, The JavaScript Code Quality Tool

JavaScriptをストリクトに書く為のチェックツール。
前はWSH版がダウンロード出来たんですけど見つからなくなってますね。
Githubのを使ってなんやかんやするんでしょうか。こんど試してみよう。

• JSLintでストリクトなJavaScriptを書く | Mach3.laBlog

LESS

LESS – Leaner CSS

変数に代入したり、ネストしたり、ミックスインしたり…
CSSコーディングが素晴らしくスピードアップするCSS開発キット。
エディタからも簡単に呼び出せるので重宝しています。
似たようなプロジェクトに「Sass」というのもあります。

• ゼロから導入する、Ruby LESS for Windows ～素晴らしいCSSソリューション | Mach3.laBlog
• CSS3対応の為のLESSスニペットメモ | Mach3.laBlog

jsDoc Toolkit

jsdoc-toolkit – Project Hosting on Google Code

JavaScript版のドキュメント生成ツール。
こちらもエディタから使うと大変便利。

• エディタ（Notepad++）からJSDoc Toolkitを使ってみる | Mach3.laBlog

Modernizr

Modernizr

HTML5の新機能等が使用可能かどうかを判別してくれるライブラリ。
判別の結果はhtml要素のクラスとして出力してくれる他、
メンバを直接参照する事でも結果を知ることが出来ます。

便利なスクリプトなのですが、最近Head.jsに持って行かれた感が…
こちらは未検証なのでまた後ほどレポートを。

• 「Modernizr」 モダンなクロスブラウザCSSの為の支援スクリプト | Mach3.laBlog

Raphael / gRaphael

gRaphaël—Charting JavaScript Library

Raphaelは、ベクターグラフィックを簡単に扱うためのJavaScriptライブラリ。
gRaphaelはそれをグラフ描画用に拡張する為のプラグインです。
投稿した時はまだドキュメントが不備でしたが…今見に行きましたがまだありませんでした！

• 実験室: gRaphaëlでインタラクティブなグラフを描いてみる | Mach3.laBlog

IE9.js

ie7-js – Project Hosting on Google Code

プロジェクト名としては「IE7.js」ですが、
その中に含まれるIE8.js、IE9.jsやie7-squish.jsが結構便利。
JavaScriptが動く事が前提になりますが、擬似クラスやHTML5の新要素の対応もしてくれます。

• IE9.jsで実現するシンプルなclearfixとその他の恩恵 | Mach3.laBlog

YUI Compressor

YUI Compressor

Yahoo!がおくる、JavaScriptやCSSを圧縮するツール。
Webページのパフォーマンス向上を図るのに欠かせません。
ご一緒にYSlow（Firebugプラグイン）も是非。

• YUI Compressorをお手軽にするバッチファイルを書いてみる | Mach3.laBlog
• 今すぐ出来る、ちょこざいなサイトパフォーマンスアップ | Mach3.laBlog

mustache

{{ mustache }}

マルチランゲージテンプレートエンジン！（言い切った！）
様々な言語に対応する、シンプルで使いやすいテンプレートエンジンです。

• どこでも活躍できるテンプレートエンジン「Mustache」 | Mach3.laBlog

Sammy.js

Sammy.js

Ajaxコンテンツのセッションを操る為のjQueryプラグイン。
要するに、location.hashによるルーティングをウマイこと処理してくれるスクリプトです。

• Sammy.jsでAjaxコンテンツのセッションを操る | Mach3.laBlog

jQueryMobile

• jQuery Mobile | jQuery Mobile

jQueryの作者が送る、スマートフォン向けのjQueryUIのようなもの。
ルールに従ったマークアップをするだけで、各要素をそれっぽくレンダリングしてくれます。
1月に正式版がリリースされる予定。

• はじめてのjQueryMobile | Mach3.laBlog

結構色々ありましたね、2010年。
来年もまた素晴らしい技術に出会えますように。

皆様よいお年を！

フロントエンドで出来ること

CSSは一番はじめにロードする

スタイルシートに含まれる背景画像のロードと、
ページのレンダリングを出来るだけ早くおこなう為です。

JavaScriptは一番最後にロードする

JavaScriptは</body>の直前あたりでロードするのがパフォーマンスが上がる様子。
ただし、レンダリング前に処理したいケースもあるので、可能な限りで。

CSS/JavaScriptは圧縮しよう

ツールを使って、CSS/JavaScriptファイルを最小化してあげましょう。
YahooライブラリにあるYUICompressorは、CSS/JS両方を圧縮出来るのと、
ついでに軽くバリデートしてくれるのも助かりますね。

使用例など。

java -jar yuicompressor-2.4.2.jar -v --charset UTF-8 -o hoge.min.js hoge.js

• YUI Compressor
• YUI Compressorをお手軽にするバッチファイルを書いてみる

また、導入が面倒な場合はオンラインツールも公開されています。

• Minify CSS – Compress CSS Code
• Free Javascript Compression and Minify Javascript Resources – Minify JS

HTTPアクセスを減らす

大量のJavaScriptやCSSをロードしているページはご注意を。
可能な限りファイルを纏めて、HTTPアクセスを減らしてやると良いようです。

<script type="text/javascript" src="hoge.js"></script>
<script type="text/javascript" src="fuga.js"></script>
<script type="text/javascript" src="foo.js"></script>
<script type="text/javascript" src="bar.js"></script>

<!-- ↓ ファイルをまとめて圧縮 -->

<script type="text/javascript" src="mylibraries.min.js"></script>

また、大量の画像を部品として使用する場合は、
CSS Spriteなどを利用してまとめてあげると良いですね。

CSSの@importを避ける

@importによるインポートは、に比べてパフォーマンスが落ちるそうなのでご注意を。
むしろ、ひとつのCSSファイルにまとめてあげて圧縮するのがベストですね。
それが面倒だと感じる場合は、LESSやSassのような開発ツールの導入も検討してみましょう。

• LESS – Leaner CSS
• Sass – Syntactically Awesome Stylesheets

DNSルックアップを減らす

広告やGoogleAnalytics等で致し方ない場合の方が多いですが、
出来るだけ別ドメインからのファイルインポートは避け、
DNSルックアップを減らすのが吉です。

サーバサイドで出来ること

Expiresを設定する

ヘッダの有効期限を適正に設定する事で、更新頻度の低いファイルをキャッシュさせます。
※ApacheのExpiresモジュールが有効になっている必要があります。
cf) mod_expires – Apache HTTP サーバ

.htaccessでの設定例。
有効期限の初期設定を1ヶ月に設定しています。

ExpiresActive On
ExpiresDefault "access plus 1 month"

もしくは、ファイルの種類毎に設定を変えたい場合の例がこちら。

ExpiresActive On
ExpiresByType text/css "access plus 1 week"
ExpiresByType applicdation/javascript "access plus 1 month"
ExpiresByType image/png "access 3 month"

YSlowでチェックしてみる

サイトパフォーマンス測定ツールとしては、こちらもYahooから提供されている、
FirebugプラグインのYSlowが良い感じです。

インストールするとFirebugに「YSlow」タブが追加され、
閲覧しているページのパフォーマンスを測定する事が出来ます。
細かく項目別にA～F判定を行ってくれるので、
チェックすべきところがすぐに分かり、目安として使えそうですね。

• Yahoo! YSlow for Firebug

Webデザインは年々リッチになりつつありますが、
その分フロントエンドのパフォーマンスは注意しておきたいですね。

yuicompress.bat

gist: 74d81567a90504c95ad4 – Windows Batch File to use YUI Compressor easily- GitHub

@echo off
if "%1" == "" goto error
setlocal
set jarfile="C:\Program Files\yuicompressor-2.4.2\build\yuicompressor-2.4.2.jar"
set infile=%1
set ext=%~x1
if %ext% == .css set outfile=%infile:.css=.min.css%
if %ext% == .js set outfile=%infile:.js=.min.js%
java -jar %jarfile% -v --charset UTF-8 -o %outfile% %infile%
endlocal
goto end
:error
echo No Argument
:end

バッチファイルは書き慣れない為、あまりスマートに書けませんが…
4行目のjarファイルのパスは環境にあわせて書き換えてください。
文字コードはUTF-8に固定してしまっているのでご注意を！

使い方

例えば、パスの通ったディレクトリに「yuicompress.bat」という名前で保存をしておけば、
引数ひとつで簡単に圧縮出来ます。

yuicompress hogehoge.js
yuicompress fugafuga.css

JSもCSSも、拡張子の前に「.min」を追加したファイル名で出力されます。
上の例ならば「hogehoge.min.js」と「fugafuga.min.css」ですね。

エディタから使う

エディタから使いたい場合も、パスが通っていれば簡単ですね。
例えばNotepad++のNppExecに登録する場合は、次のように。

yuicompress.bat $(FULL_CURRENT_PATH)

GVimから使う場合は、次のように。

:!yuicompress %

参考

YUI Compressor本体のドキュメント/ダウンロードは公式へ！

• YUI Compressor
• YUI Library :: Downloads