blog.katsuma.tv)五年前の記事なのだけれど、関数に渡ってきた引数を存在チェックするとき、どう書くのが早いだろう?という実験レポート。'bar';三項演算子を使うと倍近く早いらしい。変数の初期化だったら僕はこう書くことが多い。'bar';}ということで、五年経った現状と、僕のコードどうなんだろう、というのを見たいと思ったので試してみた。48待てwやるんじゃないかとは思っていましたが、実質的に何もしていないことを見ぬいて最適化された結果、Date()の分解能テストと化しています。ループが丸ごと削除されていますね。checkStrTernaryとcheckStrIf以外の順位は実施のたびに入れ替わりますので、個別のコードの有利不利を判定することはできません。高機能JavaScript開発環境(僕命名)。これを見ていると、やっぱりcheckStrTernaryとcheckStrIfが遅いものの、あとはそれほど大きな差じゃない程度になっています。checkArgsIfとcheckArgsIf2などは実施のたびに早いほうが入れ替わるので、誤差の範囲内です。10584おおむねFireFoxと同じ傾向が出ています。変な書き方をしない限り大差ないということですね。近年のブラウザにおいては、最適化が進んだ結果、以前ほど三項演算子有利ではなくなってきました。それでも1割程度の差がつくので、シビアな場面ではトライする価値があるかもしれないですが、普通にコード書くときは、読みやすいほうを使うのでいいんじゃないかなーと思いました。iPhoneアプリの挙動が話題になっています。使ってブラウザを立ち上げてfacebook認証を行っています。Blog」に書かれているとおりだと思います。具体的な実装としてChatWorkアプリはとても参考になりますね。ブラウザ上でfacebook認証が成功すると、ChatWorkサーバはURLスキームを使ってChatWorkアプリケーションを起動させます。ここがマニアックに興味深いところです。ユーザーはリンクをクリックしていないのに、なぜURLスキームが起動したのか?ChatWorkからブラウザに戻ったとき、URLスキームを起動したWEBページが残っていないのは何故?他のアプリだと残っちゃうよね?結論から言うと、こういうふうに書けば同じ挙動が再現できました。(本当は”chatwork:///”でChatWorkアプリが起動するのですけど、テストのために意味不明な起動を繰り返すとご迷惑になりそうだったので、メッセージアプリを起動しています)ページを読み込むと同時にURLスキームを起動させるURLスキームは普通、aタグのhrefに書いて、ユーザーさんにクリックしてもらって使います。href="sms:///">sms</a>と書かれたHTMLのリンクをユーザーさんがクリックすると、メッセージアプリが立ち上がります。facebook認証が済んだら、ユーザーさんの手を煩わせることなくアプリケーションに戻ってほしいですよね。location.hrefで強制移動とか、aタグを書いてjQuery(hoge).click();とか、いろいろ試してみたのですけど、そういうのは駄目なようです。ページ内に動的にiFrameを生成してURLスキームを持たせることで上手く起動させることが出来ました。URLスキームを起動したあと自分を閉じるURLスキームでアプリを起動したのはいいものの、そのHTMLがブラウザ上に残ったままになっていると、あとでブラウザを開き直した時に変なページが見えてしまったり、場合によっては勝手にアプリが立ち上がってイラっとさせられることがあります。有名なアプリでもこの現象起こしますよね。JavaScriptで自分を表示しているタブを閉じる場合、理屈上はwindow.close()で出来るのですけど、safariのwindow.closeはjavascriptで開いたページしかclose出来ないので、このようなごまかしテクニックを使うことで自分をcloseすることが出来ます。window.open(location.href,”_self”);win.close();URLスキームとwindow.close、どっちかが他方を妨害しそうな気がしますけど、実際には両方上手く動くみたいです。1:自分でJavaScript書いて同様の挙動を再現させることに成功しただけなので、ChatWorkさんのアプリと厳密には一致しないかも知れません。2:[iOS]って書いてますが、URLスキームをintentに変えればAndroidでもそのまま動作しました。3:ChatWorkの中の方、出来るだけ迷惑かけないように調査したつもりですけど、不審なログとして調査対象に上がっていたりしたらごめんなさい。WEBサービスAPIこれとGoogleMapsAPIを組み合わせて地図上に何らかのスポットを表示する、というのもそこら中で行われています。いうサービスを実現するためには、ユーザーが地図の表示位置を変更した時、新しい位置のスポット情報を取得して表示するためにAPI呼び出しをする必要があります。この実装例をググると、bounds_changed(領域が変化した時)やdragned(ドラッグが終了した時)イベントのタイミングでAPIを呼び出すようにしている実装が多いのですけど、idleイベントを使うとすごい綺麗に実装することが出来ます。以下、bounds_changedやdragnedを使った場合に発生する問題と、idleイベントだと何がうれしいのかをまとめました。changed.」と定義されていて、地図の表示領域が変更になった場合に発生するイベントです。このタイミングでAPIを呼び出すようにすれば、ユーザーが地図をドラッグした時も、ズームが変更された時もイベントが発生するので、わりといい感じに動くように思えます。bounds_changedイベントの問題は、発生頻度が多すぎることです。bounds_changedは領域が変わるたびに呼ばれるので、ユーザーが地図をドラッグすると、一秒に数回の勢いでbounds_changedイベントが発生し続けます。単純に実装すると、秒間数回のペースでAPIを呼び出し続けることになります。サーバ負荷の観点から絶対止めてほしいですし、ブラウザ側だって、そんな頻度で結果が帰ってきたら処理しきれなくてブラウザが固まってしまうことが予想されます。カウンタをもうけて10回に一回だけAPIを呼び出すとか、タイマーを使って何秒に一回だけAPIを呼び出すとか、やってやれないことはないのですが、ずいぶん複雑なコードになってしまいます。dragendを使った場合の問題dragendイベントでAPIを呼び出すという実装も考えられます。ドラッグ終了時に一回だけ発生するので、その点はいいのですけど、今度はイベントの発生が少なすぎて弊害が発生します。ズーム変更の時スポットが更新されないさすがにこれは誰でも気づくので、dragendとzoom_changedでAPIを呼び出す実装にする人が多いと思います。ドラッグが終わるまでAPIが呼び出せないdragnedイベントはマウスを放すまで発生しないので、地図をドラッグしながら「この辺かなー?」って考えてもスポットが更新されません。ダメじゃないですけど、ユーザーフレンドリーじゃないですよね。キーボードで地図を移動させた時APIが呼び出せないそんな人はあまりいないと思うけど、GoogleMapsはキーボードでも操作ができるようになっています。この場合dragendイベントは発生しません。最近のGoogleMapsは駅などをクリックするとその部分が中央に移動して詳細がポップアップするようになっていますが、この移動の場合もdragendイベントは発生しません。自分でsetCenterイベントを呼んだ時も発生しないこれが最大の問題で、例えば検索フィールドを作って入力された住所の位置に移動するような実装をする場合、ジオコーディングして得られた緯度経度にmap.setCenterすることになると思うのですけど、この場合もdragendイベントは発生しません。setCenterを呼び出す時は自前でAPI呼び出しをするコードを追加して・・・(後日APIが変更になった時、片方だけ変更しわすれてバグを埋め込むパターン)dragendを使った場合の問題こんな具合にして、起こりうる各種問題に場当たりの対応を繰り返すと、複数のイベントを組み合わせてフラグ管理をすることになったり、コード中のあちこちからAPIを呼び出すことになったり、どうしても複雑なコードになってしまいます。実際僕もそうやって書いていたのですけど、ある時、idleイベントで全部カバーできることに気づきました。zooming.」と定義されています。実際ログを入れて試してみるとわかりますが、Mapをnewすると、地図の表示が終わった時点で一回発生します。ここで、最初の一回目のAPI呼び出しを行うことが出来ます地図をドラッグしおわった時に一回発生。ドラッグ中も、ちょっと手を止めるとそこで発生。idleにならないと発生しないので、API呼び出しが多くなりすぎる心配がありません。ズーム変更の時も発生キーボードで地図を動かした時も発生setCenterやsetZoomを呼び出した時も移動直後に発生と、理想的な挙動を示します。{//ここでAPI呼び出し});としておくだけで意図した動作をさせることが出来ます。技術メモコメントするJavaScriptで安易にAPIキーを使っちゃいけない具体的には、twitter公式短縮URLサービス、bitlyさんのAPIなんだけど。このAPIを使うためには、bitlyにユーザー登録して、APIキーというのを取得します。Key]&longUrl=[目的のURL]というようなURLにアクセスすることで短縮URLを生成することが出来ます。問題なのは、このAPIキーをJavaScriptでも使うことが想定されていることで。JavaScriptで使うということは、ブラウザでソースを見たらユーザー名もAPIキーも丸わかりなのに、堂々と使っている方が結構おられます。悪用シナリオ1被害者Aさんが、JavaScriptでbitlyAPIを使ったWEBページを開設していたとします。スパム業者がやってきて、Aさんのページからユーザー名とAPIキーを拾います。スパム業者は、このユーザー名とAPIキーを使ってスパムページへの短縮URLを生成して、スパムメールに貼り付けて送信しました。数日すると、このURLはスパムメールであるという通報がbitlyに届くので、該当の短縮URLは凍結されます。ついでに、スパム生成に使われたAさんのアカウントも凍結される可能性が高いですよね。悪くすると、Aさんはスパムメールの送信者と疑われてしまうかも知れません。悪用シナリオ2悪意のある第三者Bが、Aさんのページからユーザー名とAPIキーを拾います。Bは、Aさんのユーザー名とAPIキーを使ってアダルトサイトの短縮URLを生成しました。Bさんはこういう風に公表します。「あれ?Aさんこんなページも見てるんだぁ!やーい、エッチエッチ!」Aさんにとって身に覚えのない話ではありますが、自分の生成履歴にある以上、なかなか説明の難しい立場に追い込まれてしまいました。本来ならば、bitlyがAPIキーの仕様を変えて、登録されたドメイン以外からアクセスがあったらはじいてしまうようになっているべきだと思います。googleMapsとかはそうなっています。公式フォーラムに出ている指摘を見ると、「そんなのいいじゃない、気になるならJavaScript以外から使えば?」と思う人もいらっしゃるみたいです。上記のようなシナリオは困るよね、と思う方は、bit.lyのAPIをJavaScriptから直接使うのではなくて、PHPやRubyなどのサーバ側で動作する言語から使うことをオススメします。javascriptコメントするブラウザサイズを変えてテストをする今ちょっと変わったサイトを開発中です。開発中に「1280×1024のブラウザで見ると様子がおかしい」というレポートをいただいて。いえばあまりそういうテストをしていなかったな、と思って、ブラウザのサイズを自在に変える仕組みというのを作ってみました。ウィンドウのサイズを選んでください。ボタンを押すとブラウザのサイズが変わります。IE7だと、複数タブを開いた状態では上記動作が利かないみたいです。最初にこのページを開いてブラウザサイズを変えてから所望のサイトに移動するのがいいみたい。作ったもの2件のコメントIE,FireFox,safari,chrome,Opera対応文字列検索ブックマークレットの作り方ブックマークレットというのがあって、ブラウザのブックマーク(お気に入り)に登録しておくと、色々便利な機能を使うことが出来ます。多いのが、選択した文字列をWikipedia/英和辞典/和英辞典などで検索するというもの。ところが、インターネットエクスプローラー用です、FireFox用です、と分けてあったり、そもそもFireFoxでしか動かない物が多かったりするのですよね。Google英語検索ブックマークレットは、インターネットエクスプローラーと、FireFoxと、ChromeとSafariで動作確認してあります。