jQueryメモ。 ゆっくり消すfadeout
jQueryを使ってある要素をゆっくり消したい場合、
$('#something').fadeOut('slow');
でゆっくり消せます。
ポイント１
fadeout ではなく、fadeOut
あたり前かもしれないけど、大文字小文字は区別されます。
ポイント２
数値でしていする場合は、''を外す。
これも当たり前ですが、fadeOut(2000);
とかでミリ秒数を指定して消せます。
数値なので、' '(シングルクォーテーション)や
" "(ダブルクォーテーション)はいりません。
fadeOut('2000')とか書いてるサイトがいくつかあって、
えっまじ！？って思ったけど、やっぱりできなかったです。
何はともあれ、公式をちゃんと確認します。
.fadeOut() | jQuery API Documentation
Jqueryメモ
最近よくjQueryを使うので、メモ的に残します。
・oneメソッド
one(type, [data], fn) - jQuery 日本語リファレンス
oneに指定されてるfunctionを一回実行すると、unbindしてくれて二度と実行しないようにしてくれる。一回だけボタンをクリックしたら、その後はクリック動作を受け付けないようにするのに便利。
・eachメソッド
each(callback) - jQuery 日本語リファレンス
セレクタで指定した要素が複数あった場合、eachを付けるだけで
グルグル回してくれるので、非常に便利。
・triggerメソッド
プログラム的に無理矢理イベントを発生させる事ができる。
trigger(type, [data]) - jQuery 日本語リファレンス
・まとめ
上記３つを合体させて、以下のようなプログラムが作れます。
idがallimageの要素をクリックすると、idがresultTableの要素内にあるすべてのaタグ(detailクラス付き)のクリックアクションが1.2秒おきに発生します。
普段はphpばっかり書いてるけど、たまにはjqueryも楽しい。
(**) javascriptってsleepがないんですね。知らなかったよ。
ドトールは落ち着く
ドトールによく行く。
仕事の後のくいっっと一杯はうまいと言うけれど。
何かをやり遂げた後の、一杯のカフェラテは最高だ。
特に人が少ない時間帯、おひとり様で一人の時間を楽しんでる人が多い時間帯が、
僕はとっても落ちつく。 20:00～21:00くらいかな。
家とは別の場所に、休める空間を用意するのは
とっても良い事なんだろう。
今日、ジャーマンドックを頼んだらケチャップがついてきた。
かれこれ10年くらいは通い詰めてるけど、ケチャップがついてきたのは初めてだ。
指が写ってごめんなさい。
ケチャップもらえるみたいです。知らなかった。
とにかく、ジャーマンドックとカフェラテを頂き、
まぁ今日も頑張れそうな気がする。
Cloud vision apiを使ってみた。 part4 ～LOGO_DETECTION～
cloud vision apiを使ってみた。
今回で最後にします。
LOGO_DETECTION
文字通り、logoを検知するapi。
画像①
"logoAnnotations": [
{
"mid": "/m/01jtml",
"description": "Adidas",
"score": 0.65040034,
"boundingPoly": {
Adidas。検知できてます。
画像② マックダーーーナー。
"responses": [
{}
]
}
何もなし。
画像③
"logoAnnotations": [
{
"mid": "/m/0lwkh",
"description": "Nike",
"score": 0.58140534,
"boundingPoly": {
Nike が返ってきてます。
いろいろと画像を試しましたが、文字が入ってるものは検知できました。
なので、ほぼTEXT_DETECTIONと変わりませんね。
Image Sentiment Analysis
Vision API can analyze emotional facial attributes of people in your images, like joy, sorrow and anger. Combine this with object detection and product logo detection, so you can assess how people feel about your logo.
超訳)
Vision APIは顔の表情から感情を解析します。object detection や logo detectionと合わせて、人々があなたのlogoをどのように感じているかわかります。
と、言っておりますが、
人がLOGOの付いたTシャツ着て、走ってる写真も試しましたが、
どれもうまく検知してくれませんでした。
LOGO_DETECTIONとはいうものの、TEXT_DETECTIONの域は越えられていないような気がします。
まとめ
いろんなDETECTIONを試しましたが、結局まともに利用できるのは
LABEL_DETECTIONだけかなっていう感じです。ただそのLABELでさえも、
想像の範囲内っていうか、”なんでこんなに検知できるんだーー”って感じる物ではありませんでした。
なんかオープンソースをささっと集めて来て、web apiとして使えるようにしただけって感じです。
スマホで利用している音声認識くらいの精度を期待していただけに、残念な結果になりました。
まぁ簡単にできるので、興味のある方は
Cloud vision apiを使ってみた。 part3 ～LABEL_DETECTION～
前回に引き続き、cloud vision api を使って画像認識します。
今回はLABEL_DETECTION。
これは物体が何かを当てるものらしいです。
画像①
Reseponse:
"labelAnnotations": [
{
"mid": "/m/014j1m",
"description": "apple",
"score": 0.99186647
},
{
"mid": "/m/02wbm",
"description": "food",
"score": 0.98748416
},
{
"mid": "/m/02xwb",
"description": "fruit",
"score": 0.98377717
},
apple,food,fruitと出ているので、当たってますね。
画像②
Response:
"labelAnnotations": [
{
"mid": "/m/0d5gx",
"description": "castle",
"score": 0.84780043
},
{
"mid": "/m/03nfmq",
"description": "architecture",
"score": 0.81381875
},
{
"mid": "/m/07bxq",
"description": "tourism",
"score": 0.7273
},
castleとはじめに出ているので、正解ですね。
画像③
Response:
"labelAnnotations": [
{
"mid": "/m/0krfg",
"description": "meal",
"score": 0.9953478
},
{
"mid": "/m/01z8mz",
"description": "meze",
"score": 0.96037906
},
{
"mid": "/m/02wbm",
"description": "food",
"score": 0.93255138
}
meal,meze(前菜),foodで正解。
画像④
Response:
"labelAnnotations": [
{
"mid": "/m/0cd4d",
"description": "cheetah",
"score": 0.99016738
},
{
"mid": "/m/01280g",
"description": "wildlife",
"score": 0.96603912
},
{
"mid": "/m/09686",
"description": "vertebrate",
"score": 0.85708529
}
]
cheetah,wildlifeと出ているので正解。
動物はライオンとチーターを区別したりできたりする。
東京タワーやスカイツリーはskyscraper,towerと出て区別はつかない。
FACE,TEXTはあんまりしっくりこなかったけど、
LABELは結構いい感じ。
次回はLOGO_DETECTIONでもやるかな。
Cloud vision apiを使ってみた。 part2 ～FACE_DETECTION～
前回に引き続き、cloud vision api
cloud vision apiを使ってみた。 - ゆるりと立派な大人になるために
今回は顔検知(FACE_DETECTION)。
Image Sentiment Analysis
Vision API can analyze emotional facial attributes of people in your images, like joy, sorrow and anger.
公式ページによると、感情も検知するらしい。
目や鼻などの、顔のパーツの正確な位置を返すみたいだけど、
そういうのは何年も前から見かける技術だから、今回はパス。
という事で、試してみる。
画像① 春日が笑ってる画像。
"rollAngle": -1.1256492,
"panAngle": -9.0271168,
"tiltAngle": -8.5518637,
"detectionConfidence": 0.99997163,
"landmarkingConfidence": 0.81448638,
"joyLikelihood": "VERY_LIKELY", <------ ここ
"sorrowLikelihood": "VERY_UNLIKELY",
"angerLikelihood": "VERY_UNLIKELY",
"surpriseLikelihood": "VERY_UNLIKELY",
"underExposedLikelihood": "VERY_UNLIKELY",
"blurredLikelihood": "VERY_UNLIKELY",
"headwearLikelihood": "VERY_UNLIKELY"
"joyLikelihood": "VERY_LIKELY"
楽しい可能性がとてもありえる。よし、正解。
画像② 泣いてる人
"rollAngle": -0.71140051,
"panAngle": -18.433014,
"tiltAngle": -6.6012778,
"detectionConfidence": 0.51231027,
"landmarkingConfidence": 0.35215673,
"joyLikelihood": "VERY_UNLIKELY",
"sorrowLikelihood": "VERY_UNLIKELY",
"angerLikelihood": "VERY_UNLIKELY",
"surpriseLikelihood": "VERY_UNLIKELY",
"underExposedLikelihood": "VERY_UNLIKELY",
"blurredLikelihood": "VERY_UNLIKELY",
"headwearLikelihood": "VERY_UNLIKELY"
sorrowがunlikelyになってるので不正解。
画像③ 帽子かぶってる人
"rollAngle": -0.010763885,
"panAngle": 10.322119,
"tiltAngle": -13.772013,
"detectionConfidence": 0.996279,
"landmarkingConfidence": 0.65904796,
"joyLikelihood": "VERY_UNLIKELY",
"sorrowLikelihood": "VERY_UNLIKELY",
"angerLikelihood": "VERY_UNLIKELY",
"surpriseLikelihood": "VERY_UNLIKELY",
"underExposedLikelihood": "VERY_UNLIKELY",
"blurredLikelihood": "VERY_UNLIKELY",
"headwearLikelihood": "VERY_UNLIKELY"
帽子かぶってるのに、headwearLikelihood がlikelyになってないですね。
うーーーん。他にいろいろと画像を試しましたが、joy以外のフラグは立ってくれませんでした。
感情を読み取る目的のFACE_DETECTIONはちょっと残念。
他のDETECTIONはまた次回に。
Cloud vision apiを使ってみた。 part1 ～TEXT_DETECTION～
前回、cloud vision apiが使えなくなっていましたが、
また申請が通ったみたいなので、とりあえず軽く使ってみる。
まずは、ソース
サンプルにはpythonしかないけど、とりあえずphpで書いてみる。
画像はbase64でencodeして、何を認識させるのかタイプを指定すればOＫ。
今回はTEXTだけ、
画像①
レスポンス
"responses": [
{
"textAnnotations": [
{
"locale": "en",
"description": "TEXT\n",
"boundingPoly": {
"vertices": [
{
"x": 14,
"y": 40
},
まぁ、認識できてますね。
次ー
画像②
"responses": [
{
"textAnnotations": [
{
"locale": "zh-Hant",
"description": "漢字\n",
"boundingPoly": {
"vertices": [
{
"y": 25
},
なんとなく、漢字もOK
じゃぁ、これはどうだ。
画像③
"responses": [
{
"textAnnotations": [
{
"locale": "ja",
"description": "PHhighて\nいじゃ\nないか\nLCL3だ\nrnU引\n",
"boundingPoly": {
"vertices": [
さすがに無理だね。
でも、日本語っていうのは理解できてるみたい。
他にも色々試してみたけど、文字以外に絵とか入ってると
空のデータを返してくるので、うまく認識できない見たい。
街の写真を写して、そん中に写ってる看板の文字とか認識できるレベルかと思ったけど、そこまでじゃないみたい。
まぁ、今日はこんくらい。FACE_DETECTIONとかはまたアップします。
