jQuery File TreeのSQLインジェクション防止

前回、htmlentitiesをhtmlspecialcharsに変更する事を書いたんですが、そのままだとSQLインジェクションの穴があるかもしれません。

htmlspecialchars(文字列,ENT_QUOTES)

が王道でしょうか。


データベースに問い合わせる場合、例えば
「select * from this_table where name like…」
とクエリを書く場合が多いと思いますが、likeの先が「'」＝シングルクォートで囲まれてる場合、「ENT_QUOTES」を使えばシングルクォートを無害なエンティティに変換できます。


SQLインジェクションってのは、本来「'」＝シングルクォートや「"」＝ダブルクォートで囲まれて問い合わせするのにつけ込んで、入力フォームにそれらを使う事でSQL文を成立させてしまう手口なわけです。

phpやcgiでデータベースクエリ文を生成する時に使っているクォートを禁止すれば、基本的にはOK！


日々デザイナーからプログラマーへ進んでいるこのごろ。
ま、行き着くところまでいきましょぉ。

jQuery File Treeでの文字化け

メモです。。。

jQuery File Treeで、コネクターにphpを使うと日本語ファイルが文字化けします。
対処法は簡単です。

プラグインに同封されているconnectors＞jqueryFileTree.phpの中をちっとばかしいじるだけです。

htmlentities()という関数をhtmlspecialchars()に変えます。
カッコ内の構成はいじる必要ありません。
「htmlentities」を「htmlspecialchars」に一括置換えすれば完了です！

英語圏では問題ないからentitiesの方を使ったんでしょうね。
でも、簡単に解決できてよかった。

jQuery File Tree

このところジョウビタキ（通称ウチのヤツ）とjQueryだらけになっているこのごろ、またしてもjQueryプラグインのお話。

アップロードとダウンロード＆ディレクトリ管理を考えて、表示にはjQuery File Tree、アップロードにはjqUploaderを試しました。


まずはFile Tree。
これ、良くできてます。
・Linux GNOME風のファイルツリー表示がファンシー
・フォルダやファイルアイコンの変更が容易
・拡張子への対応もスタイルシートをちょちょいといじるだけでOK
・ページへの組み込みが簡単（jQueryプラグイン全体に言える事ですが）

欠点は、
・最終選択ファイルの情報しか吐き出さない

個人的にはディレクトリ管理も視野に入れていたので、「フォルダ選択時にフォルダの情報も吐き出してくれたらなぁ」なんて思ったりもしました。※もしかすると吐き出させる方法があるかもしれません。


jQuery File TreeにしてもjqUploaderにしても、phpと組んでサーバ内部とやりとりしています。jqUploaderの場合はFlashを使ってローカルとの橋渡しまでしていて、構成は結構複雑だったりします。


jQuery File Treeの基本的なところを押さえておきます。

$(document).ready( function() {

    $('#container_id').fileTree({

      root: '/some/folder/',

      script: 'jqueryFileTree.asp',

      expandSpeed: 1000,

      collapseSpeed: 1000,

      multiFolder: false

    }, function(file) {

        alert(file);

    });

});

この「.fileTree({」以下のJSON形式で指定されている部分が設定値ですね。
以下のようなオプションがあります。

root : 最初に表示されるディレクトリ : デフォ＝/(root)
script : サーバサイドのAjaxファイルのパス : デフォ＝jqueryFileTree.php
folderEvent : フォルダの開閉のトリガー : デフォ＝click（シングルクリック）
expandSpeed : フォルダを開くときの速度 : デフォ＝500(ms) ※-1でアニメーションなし
collapseSpeed : フォルダを閉じるときの速度 : デフォ＝500(ms) ※-1でアニメーションなし
expandEasing : フォルダを開くときのイージング : デフォ＝None
collapseEasing : フォルダを閉じるときのイージング : デフォ＝None
multiFolder : フォルダを複数開かせるか : デフォ＝true（開かせる）
loadMessage : ツリーをロード中に表示するメッセージ : デフォ＝Loading...


注意点はroot。
phpの設定かどうかは調べていませんが、デフォのままだとwwwルートではなくサーバのルートから表示してしまいます。
正しいパスを絶対パスで設定しなきゃならなりません。
でも、絶対パスがバレてしまいます。
見えるところに置かれかねないJavaScript、できるだけ隠す工夫をした方がイイですよ！

でもって、８行目のfunction(file)。file変数に選択したファイルのパスが代入されます。※もちろんfileという名前じゃなくてOK
その先は関数に振るのも良し、その中で処理して完結させるのも良し。


アイコンを変更する、あるいはFile Treeが認識しないファイル（拡張子）については、「jqueryFileTree.css」のココ↓

/* File Extensions*/
.jqueryFileTree LI.ext_3gp { background: url(images/film.png) left top no-repeat; }
.jqueryFileTree LI.ext_afp { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_afpa { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_asp { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_aspx { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_avi { background: url(images/film.png) left top no-repeat; }
.jqueryFileTree LI.ext_bat { background: url(images/application.png) left top no-repeat; }
.jqueryFileTree LI.ext_bmp { background: url(images/picture.png) left top no-repeat; }
.jqueryFileTree LI.ext_c { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_cfm { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_cgi { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_com { background: url(images/application.png) left top no-repeat; }
.jqueryFileTree LI.ext_cpp { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_css { background: url(images/css.png) left top no-repeat; }
.jqueryFileTree LI.ext_doc { background: url(images/doc.png) left top no-repeat; }
.jqueryFileTree LI.ext_exe { background: url(images/application.png) left top no-repeat; }
.jqueryFileTree LI.ext_gif { background: url(images/picture.png) left top no-repeat; }
.jqueryFileTree LI.ext_fla { background: url(images/flash.png) left top no-repeat; }
.jqueryFileTree LI.ext_h { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_htm { background: url(images/html.png) left top no-repeat; }
.jqueryFileTree LI.ext_html { background: url(images/html.png) left top no-repeat; }
.jqueryFileTree LI.ext_jar { background: url(images/java.png) left top no-repeat; }
.jqueryFileTree LI.ext_jpg { background: url(images/picture.png) left top no-repeat; }
.jqueryFileTree LI.ext_jpeg { background: url(images/picture.png) left top no-repeat; }
.jqueryFileTree LI.ext_js { background: url(images/script.png) left top no-repeat; }
.jqueryFileTree LI.ext_lasso { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_log { background: url(images/txt.png) left top no-repeat; }
.jqueryFileTree LI.ext_m4p { background: url(images/music.png) left top no-repeat; }
.jqueryFileTree LI.ext_mov { background: url(images/film.png) left top no-repeat; }
.jqueryFileTree LI.ext_mp3 { background: url(images/music.png) left top no-repeat; }
.jqueryFileTree LI.ext_mp4 { background: url(images/film.png) left top no-repeat; }
.jqueryFileTree LI.ext_mpg { background: url(images/film.png) left top no-repeat; }
.jqueryFileTree LI.ext_mpeg { background: url(images/film.png) left top no-repeat; }
.jqueryFileTree LI.ext_ogg { background: url(images/music.png) left top no-repeat; }
.jqueryFileTree LI.ext_pcx { background: url(images/picture.png) left top no-repeat; }
.jqueryFileTree LI.ext_pdf { background: url(images/pdf.png) left top no-repeat; }
.jqueryFileTree LI.ext_php { background: url(images/php.png) left top no-repeat; }
.jqueryFileTree LI.ext_png { background: url(images/picture.png) left top no-repeat; }
.jqueryFileTree LI.ext_ppt { background: url(images/ppt.png) left top no-repeat; }
.jqueryFileTree LI.ext_psd { background: url(images/psd.png) left top no-repeat; }
.jqueryFileTree LI.ext_pl { background: url(images/script.png) left top no-repeat; }
.jqueryFileTree LI.ext_py { background: url(images/script.png) left top no-repeat; }
.jqueryFileTree LI.ext_rb { background: url(images/ruby.png) left top no-repeat; }
.jqueryFileTree LI.ext_rbx { background: url(images/ruby.png) left top no-repeat; }
.jqueryFileTree LI.ext_rhtml { background: url(images/ruby.png) left top no-repeat; }
.jqueryFileTree LI.ext_rpm { background: url(images/linux.png) left top no-repeat; }
.jqueryFileTree LI.ext_ruby { background: url(images/ruby.png) left top no-repeat; }
.jqueryFileTree LI.ext_sql { background: url(images/db.png) left top no-repeat; }
.jqueryFileTree LI.ext_swf { background: url(images/flash.png) left top no-repeat; }
.jqueryFileTree LI.ext_tif { background: url(images/picture.png) left top no-repeat; }
.jqueryFileTree LI.ext_tiff { background: url(images/picture.png) left top no-repeat; }
.jqueryFileTree LI.ext_txt { background: url(images/txt.png) left top no-repeat; }
.jqueryFileTree LI.ext_vb { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_wav { background: url(images/music.png) left top no-repeat; }
.jqueryFileTree LI.ext_wmv { background: url(images/film.png) left top no-repeat; }
.jqueryFileTree LI.ext_xls { background: url(images/xls.png) left top no-repeat; }
.jqueryFileTree LI.ext_xml { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_zip { background: url(images/zip.png) left top no-r

拡張子を追加したいなら、例えば.JPGという拡張子のjpeg、
.jqueryFileTree LI.ext_JPG { background: url(images/picture.png) left top no-repeat; }
という行を追加します。コピペで追加して、ちょちょいと変えればOK。
アイコンを変更したいなら、
.jqueryFileTree LI.ext_zip { background: url(images/zip.png) left top no-r
を変更するか、その画像ファイル自体を上書きすればOKです。


このように開発者＆ユーザーフレンドリーなjQuery File Treeですが、データベース連動型レコード（当然Ajax流の非同期）に適用するにはどうしたら？？

そう、とてもエレガントなプラグインでありながら、JavaScript系で悩んでしまうのはこの辺だったりします。

headタグに書き込むにしても、ページを読み込んで実行した段階で該当要素がないと、全く知らんぷり。
この辺はスタイルシートとは全く異なります。

じゃぁ、動的に書き出されたhtmlのbody内にscriptタグを組み込む？？
ひとまず解決なんですが、ソースが何だか汚らしい。


そこで結論。
元々File Treeの要素をDisplay:noneで隠しておいて、ボタン等で表示させる関数に上記スクリプトを組み込むわけです。
こうすれば全て解決＆エレガント。
ボタンをクリックするたびにディレクトリ内容が参照され、更新されるという素敵な副産物もあります！


何にしてもjQuery File Treeは優しい＆易しいプラグインです。
このブログがちょっとでも役に立てば幸いです。


むしろちっとばかし問題なのはjqUploader…。。。。次回。注意：悪かぁないよ

ウチのヤツ

いわゆる「ウチのヤツ」あるいは「冬の野良鳥」、ジョウビタキ♂。
よ〜く家の中をのぞいてます。
ちなみに私、数日前に寝室と仕事部屋の場所が全てバレました。


この前、日中居間でちょっとした事務作業をしてた際に、居間の前のテラスにヤツがやってきました。
ま、これはいつもの事です。

中をのぞいて人間観察するだけかと思ったら、「ヒー、ヒー、ヒー」、さえずりはじめてしまいました。
これは私にも問題があって、いつも口笛でそのさえずりをマネしたり、「カッカッ」っていう鳴き方も舌を使ってマネしてたので…。

しょーがないのでこちらも部屋の中から口笛で応戦。
ちゃんと間合いを感じて鳴いてくれていて、ペースを落とすと彼も落とします。


っつぅか、あのさえずりの意味は何？？
テリトリー誇示のものと思っていたんですが。

これでウチに来なくなったらテリトリーに関係するのかも、と思って心配したんですが、クルマのサイドミラーは相変わらず糞とクチバシ油で汚れてるし…orz。



その辺の事はまた後日報告します！
あのヒト、花粉の季節あたりまで滞在するんで、時間はまだまだあります。

jQueryへの移行

アップローダーやファイルブラウザ等々、Java Scriptで本来難しいと言われる機能を探すと、ほとんどjQueryのプラグインに突き当たるのです。

しかしながらどのプラグインもprototypeと共存するのは非常に困難、というか面倒臭いのが事実でして…。

振り返ってみると、prototypeに頼り切ってた部分はAjaxの部分。フォームからの値取得、要素への書き出し、cgiやphpなどサーバーサイドとのやりとりでした。
まとめてみると３〜４程度の機能です。


jQueryにも全ての機能があるので、それに慣れれば「脱・prototype！！」。


●$()
・prototype
基本的にidタグがターゲット。
取っ付きやすいが、柔軟性がない。また、html側をprototype仕様にする必要あり。
・jQuery
DOM準拠。スタイルシートと同じ要領でターゲットを指定できる。
スタイルシートをマスターしている人は強烈に使いやすいはず。

●サーバーサイドとのやりとり
・prototype
Ajax.RequestとAjax.Updaterが代表的。
特にUpdaterは用途が定まっていて、JavaScriptの記載がシンプルで良い。
逆にRequestは処理内容によって分かりづらい記載になることがある。
・jQuery
汎用性の高い$.ajaxが代表？
prototypeのUpdaterに比べると記載が煩雑。
しかし自由度がかなり高い。


jQueryに移行しはじめて感じたのは、jQueryの方が透明性が高いということでしょうか。
スタイルシートを構成しているようにJavaScriptが組めるので、何と言うか、、、htmlの常識的、「あたりまえ」な感触。
prototypeは便利で分かりやすいソースで記載できる反面、ちっとばかしブラックボックスな感覚があるんですよね。


というわけでjQuery万歳！の巻でした。。。

jQueryプラグイン Part1

半ば自分用のメモとして書きます。
ついでにご覧の方の参考になれば幸いです。


◯jqDock
MacのDock風エフェクト。
jquery.jqDock.min.jsはコンパクトバージョン。

そのエフェクトは素晴らしいんですが、なかなかビミョ〜なガイダンス（英語）しかありません。
しかもそのガイダンスまでAjaxバリバリで表示する徹底ぶり（上記リンクページ上部の「introduction」の行）。
結局、そのページのソースに良い感じの説明コメントが記載されていて、こちらの方が理論派には分かりやすいかもしれません。


ポイント

・jqDockとはどんなものか
アイコンの最大サイズはオリジナル画像のサイズです。
最小サイズは後述するオプション設定で変更できます。
htmlは非常にこざっぱりしていて、余計なタグやスクリプト記載はありません。
jquery.jqDock.jsとjquery.jqDock.min.jsとの違いについての説明は見当たりません。同じソースながら、コメントや記載をコンパクトにしたものがminバージョンなのかもしれません。

・prototype.jsとの共存は難しい、、かも

そもそも$()がぶつかっています。
なのでコンフリクトを防止するステップを追加するんですが（前回記載）、プラグインは当然コンフリクトのないjQueryオンリーの状態で書かれています。
jqDock自体を改造しないと使えません。
私は面倒なので改造しませんでした。
prototype.jsで重宝していたのは$()とAjax.Updater、Ajax.Requestだけだったので、同じ機能を持つjQueryであれば問題ありません。

・htmlの記載例

<div id='menu2' class='demo'>
    <a href='index.php?dt=2' title='Camera'>
        <img src='images/m2/Camera.png' alt='' />
    </a>
    <img src='images/m2/Floppy.png' alt='Floppy' title='Floppy' />
</div>

aタグでimgタグを囲んでも、imgタグのみでもDockのアイコンとして同じ振る舞いをします。
ただし、imgタグのみのアイコンにリンク等を設けるには、後述するJava Scriptが必要です。当然か。。。
画像数は考える必要がありません。jqDockの方で自動調整してくれるようです。
classの記載も気にする必要はありません。デモ用に使われてるCSS用のクラスなようです。

・あった方がよさげな初期設定Java Script

 jQuery(function($){
  $('div.dock>img').each(function(i){
      $(this).one('click', function(){ location.href = 'index.php?dt='+(i%5); return false; });
  });
  $('div.dock').each(function(i){
   var opts = {align:'right', size:60, distance:72, coefficient:1.5, labels:'ml', duration: 500};
   $(this).jqDock(opts);
  });

  $('div.dock a>img').not($('#icons a>img')).bind('click', function(){
   var Href = $(this).parent().get(0).href;
   if(Href && !/^javascript:/i.test(Href)){ //change location...
    location.href = Href;
   }else{ //trigger a click handler?...
    $(this).parent().trigger('click');
   }
   return false;
  });
 });

３行目：imgタグのみでリンクできる設定をしている部分ですね。
６行目：オプション設定の部分です。※詳細は後述
１０行目〜：imgタグでのクリックを適用しているセクション（と思われます）。

・オプション設定
ガイダンスを要約しました。他にもオプションはあるようですが、ひとまず基本動作設定を。

- align : 'top' , 'middle' , 'bottom' , 'left' , 'center' , 'right'
 デフォルトは'bottom'。
 動かないポイント（ライン）を設定します。
- coefficient : 数値
 デフォルトは1.5。
 カーソルからの距離とアイコンの拡大比率を設定する数値です。
 1がリニアです。
- distance : 整数
 デフォルトは54[pix]。
 アイコン拡大が反応するカーソルとの距離です。
- duration : 整数
 デフォルトは500[ms]。
 ドックが反応するまでの遅延設定です。マウスのon、off両方の共通値です。
- labels : ブーリアンまたは文字列 , true , 'tl' , 'tc' , 'tr' , 'ml' , 'mc' , 'mr' , 'bl' , 'bc' , 'br'
 デフォルトはfalse。
 文字列の意味は、
  't' : top
  'm' : middle
  'b' : bottom
  'l' : left
  'c' : center
  'r' : right

・スタイルシート
jqDockページのソースを元に説明しています。

-水平＆固定型：ブラウザ画面左上に固定される水平タイプです

#menu4 {position : absolute; top : 0px; left : 0px;}

-水平＆相対型：ページ構成に準じて配置される水平タイプです

#menu1 {position : relative; top : 100px; padding-left : 131px;}

-垂直＆固定型：ブラウザ画面右上に固定される垂直タイプです

#menu2 {position : absolute; top : 0px; right : 0px;, width : 50px;}

垂直＆相対型のサンプルがないので、できないのかな？？
個人的に今は必要ないので試してません。

docks(div.jpDock)の設定がabsoluteポジション、ゼロpadding, margin、かつoverflowがvisible、widthとheightが定まっている場合、デフォルトの背景色は、、↓

div.jpDock {background-color : transparent;}

ラベル(div.jqDockLabel)はabsoluteポジションでゼロmargin（topとleftも定義された上で）でのみ得られます。あとはあなた次第です。
デフォルトの設定は↓

div.jqDockLabel {border:0px none; padding:0px 4px; font-weight:bold; font-size:14px; font-style:italic; white-space:nowrap; color:#000000; background-color:transparent;}
div.jqDockLabelLink {cursor:pointer;}
div.jqDockLabelImage {cursor:default;}

設定例です↓
右側固定の垂直型、白地に小さい＆太字ではない＆深紅のラベル。

#menu2 div.jqDockLabel {color:#cc0000; background-color:#ffffff; padding:1px; font-size:12px; font-weight:normal;}

こんなもんだと思います、、が、まだちょっとしたモノがあったような…。
もっと分かりやすく書きたかったんですが、予想以上に手間なもんで。。ごめんなさい。

鳥とjQuery

別々の投稿にすりゃいいんでしょうが、あえてごちゃまぜでど〜ぞ。


新しいWebサイト構築にあたって、jQueryというAjaxプロジェクトを採用してみました。
エフェクトはprototype系よりスムース＆DOMに親しんだ開発者にとってはprototypeより分かりやすい、、かも？

とはいえ今までprototypeを使ってきた者として、jQueryは新参者。
できれば同居してほしいわけですが…。
乱暴に言うならprototypeの方が文系、jQueryの方が理数系で、古くからのJava Script使いからするとjQueryの方が分かりやすかったりします。

まず、prototypeもjQueryも$()を使います。
基本中の基本、$()は完全にぶつかります。
prototypeと違って、jQueryの$()はDOM基準です。そう、ちっとばかし違うのですよ。

同居させる場合には、コンフリクト防止のために一文加える必要があります。
こんな感じ↓

jQuery.noConflict();
var j$ = jQuery;

これだけで従来のprototype系$()はそのまま、jQuery系の$()はj$()で対応できます。

この一文を「no_conflict.js」として分離して保存して、head内に、
script src="no_confrict.js" type="text/javascript"
と組み込んでいます。


慣れ親しんだprototype.jsと先進的なjQueryの共存ができます。。。。が。。。。。
ちょっとした落とし穴があったりして。
次回！！



そしてジョウビタキ氏。
もお、自由自在です。

１．反射するモノが好き！
クルマのサイドミラーが好きなのは分かっていましたが、ある日気付くと引っ掻き傷のようなものが…。
目撃者によると、ホバーリングしては元の位置（ミラーの上）に戻るという行動を繰り返している様子。
実際は傷じゃなくて、脂っこい指で触ったようなもの。
なにそれ？

２．呼ぶと来る
ジョウビタキ氏の鳴き声は大きく分けると２パターンしかありません。
口笛のような「ヒー」、何だか分からない「カツカツ」。
どうやら「ヒー」はテリトリー管理用（犬猫のような脅迫性はなく、「私はここで越冬しますね。どぉもどぉも。」ぐらいのユルさと思われる）。
「カツカツ」は近距離、あるいは独り言用？「ヒー」に比べると意味不明です。
でもその「カツカツ」をまねた舌打ちをすると、「ウチのヤツ」がすぐに来てくれます。

３．人工物がとにかく好き
ジョウビタキ氏がクルマ好きなのは１０年近く前から知ってますが、プレハブなども好きなのですよ。
観察してきた結果、やすらぎ＝里山（的な環境）、面白いもの＝（人間の）工業製品。


私の住む土地では、「オショウデン（セキレイ）とバカツカシ（ジョウビタキ）は絶対に殺してはいけない」という言い伝えがあります。
どちらも強烈に頭の良い鳥で（多かれ少なかれヒトをバカにしてる（笑））、多くの害虫を獲ってくれるというのもありますが、、、。

第二次世界大戦の食料危機の時代でも守られたことで（逆にムクドリやツグミは容赦なく捕らえられた）、日本での鳥とヒトの歴史の神秘を感じたりもします。


このような鳥とヒトの歴史、ご存知の方がいたらゼヒ情報ください！！！

野良鳥

暖かくなるとシベリアまでさまよっていくウチの野良鳥「ジョウビタキ」。

前回書いた通り、今年のウチの野良鳥は人なつこい。
、、じゃなくて、多分ウチの野良鳥に観察されてる。

どぉも、時間帯に関係なく居間の前のテラスをウロウロしている様子。
それどころか、中に入ろうとガラスにぶつかったことすら…。

ほんと、手乗りになるんじゃないかと思うほどです。
実際はあまのじゃくなんで、手が届きそうで届かない距離で尾羽ピョコピョコしながら視線を外し続けそうですが。


そう、ジョウ氏は意図的と思えるほど視線を外します。というか、180°反対を向いたりします。
ネコの世界では「敵対心はないよ」って意味らしいんですが、ジョウ氏達も同じなのか？？

勝手な予想では、あえてヒトを死角に入れる事でヒトがどう行動するか見ているんじゃないかと。
そこでヒトが何もしてこないから、「あぁ、こいつらはさほど危険ではないようだ」と判断してる気がします。


どこか人間に近い基準で判断するカラスや、あまりにシュール（天然？）すぎて意味不明なスズメ、「この世はおもちゃだらけ」セキレイとも違い、何だかニヒルで無邪気なジョウビタキ。
絶対にヒトがジョウ氏を観察してる以上にジョウ氏はヒトを観察してるよなぁ、と思うこのごろ。
トリ達とヒトの関係って面白い！



ウチの周りにいるスズメ達が、ヒヨドリやセキレイのように「羽ばたいては止める」波のような飛び方をしながら沢を上から下、下から上へ一直線に飛んで行く行動。
本来のスズメの飛び方ではありません。「絶対マネだ！」と思っていたんですが、このたび判明しました。
「セキレイのマネ」です。

そう、セキレイが全く同じ行動をしているのを見ました。
さらに、スズメがそのような飛び方をする際、羽ばたく時に必ず「ジュ」とか鳴きます。
セキレイもスズメと同じタイミングで鳴くんです。「ょぃしょ！」って感じ。
同じような羽ばたき方をするヒヨの場合、羽ばたく時に鳴くのを見た事がありません。直線で飛んで行く事もないし。

というわけで、ウチの周りのスズメがセキレイのマネをしているのは確実です。

ところがスズメのヤツら、ツバメのマネをするときと同じ、オリジナルより明らかにスピードや軽快感が劣ります（笑）。
でもでも、何だかやたらに一生懸命に楽しんでるんで、こちらも楽しくなってしまうわけです。


くだらないことばかりやってて憎めない（っつーか、強烈にかわいい）のがまたムカつく、スズメのヤツら！（笑）