読者です 読者をやめる 読者になる 読者になる

読み書きプログラミング

日常のプログラミングで気づいたことを綴っています

JavaScript

サイトの画像を一括ダウンロード

訳あって、サイトに表示されているimg画像を一括してダウンロードするスクリプトを書きました。 ((func) -> scr = document.createElement 'script' scr.src = "//ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"; # 短いのに大げさですが、jQue…

ニコ生風コメント表示

囲碁中継サイト「耳赤」にニコ生風コメント表示機能を追加しました。 汎用性あるかと思いますので、その部分だけ切り出したコードを公開します。 https://github.com/y-ich/nico-comment-window

タッチデバイスの判定

いつからでしょう?気がついたらデスクトップChromeがTouchEventをサポートしていました。 document.createEvent('TouchEvent')を実行しても例外を発生させてくれず、自作のアプリでマウスとタッチでイベントハンドラを切り替えていたものがデスクトップChro…

Mobile Safariで好きなタイミングで音を鳴らす

iOS Safariのaudio要素はユーザーイベントで再生をしないと音が出ないようになっています。iOS6でWeb Audio APIがサポートされ、この制約を緩和するノウハウが色々なブログで公開されています。 今回、このノウハウを実際に使うことになったので、CoffeeScri…

Mobile Safariで自動ロックを抑制する

ナビゲーションアプリ、パズルのようなゲームをウェブアプリで作ると、iPhoneの自動ロックを抑制したくなります。ネイティブアプリならidleTimerDisabledプロパティを使うところです。 解はあって、それは10秒以下の短いaudioを鳴らし続けることです。 Mobil…

ウェブで、iOS7のような動く壁紙を作る

iOS7では壁紙にパノラマ写真を選ぶと壁紙が動くそうです。 面白い。でも、ウェブで簡単にできますね。やってみましょう。 端末の姿勢(オイラー角)を扱うのに、Three.jsを使いました。 <html> <head> <meta charset="UTF-8" /> <title>Wall paper</title> <style type="text/css"> html, body { height: 100%; } body { background-image</meta></head></html>…

コールバックを介して値を取得する関数を配列の要素毎に適応するための関数

配列の要素毎に関数を適用するmapは記述を簡潔してとても便利です。でも、ネットワークを介してデータを取得するなどコールバックされた時に値がわかる場合には使えません。なので、そのための関数を作ってみました。 (jQueryのDeferredを使っています。) as…

オフラインでも使える効果音再生

以下はクリック音を出すサンプル。keySound.play()で音が出ます。 keySound = _context: new webkitAudioContext() play: -> return unless keySound._buffer? source = keySound._context.createBufferSource() source.buffer = keySound._buffer source.co…

任意の値のプロパティとプロトタイププロパティを取り出す

ウェブアプリでエディタを作っていて、自動補完を実装するために、プロパティを抽出するコードを書きました。 propertyList = (value) -> switch typeof value when 'string' then Object.getOwnPropertyNames value.__proto__ when 'undefined' then [] els…

iOS5マップ風ウェブアプリ更新

version 1.2.12 iOS上で入力欄にアルファベットを入力した時の候補が消去できない不具合を直しました。 iOS上で検索欄にアルファベットを入力した時、検索後、入力が消える不具合を直しました。

Tweets in the World

世界中のツイートを地図上で表示するサイト"Tweets in the World"を作りました。 http://tweets-in-the-world.herokuapp.com 具体的には、位置情報を含むツイートをマーカーでプロットし、2秒に一度、適当にツイートの中身を表示しています。Photo Filterを…

iOS5マップ風ウェブアプリ更新

version 1.2.11 iOS上で検索入力のオートコンプリートに不具合がありましたので、直しました。(長い間、不具合に気がつかず申し訳ございませんでした。)

iOS5マップ風ウェブアプリ更新

version 1.2.8 移動モードで自転車に対応しました。 version 1.2.7 斜め45度航空写真に対応しました。 経路検索にて移動モードに応じて地図の表示を変更するようにしました。

iOS5マップ風ウェブアプリ更新

version 1.2.6 タッチデバイスでのクリックの遅延をなくしました。 アニメーション効果を速くしました。 version 1.2.5 住所と緯度経度だけでなく、施設名でも検索できるようになりました。 現在地追尾のインディケータに、最初の位置確認までの状態を追加し…

iOS5マップ風ウェブアプリ、バージョンが確認できるようになりました

起動画面の右下にあるiボタン(地図のオプションを選択するボタン)をタッチすると、一番下にアプリのバージョンを表示するようにしました。 それだけです… 追記: 午後4時18分時点で、最新バージョンは1.2.2となりました。(アプリケーションキャッシュのデバッ…

iOS5マップ風ウェブアプリのGPS関連インジケータ

現在地追尾のボタンで位置情報取得の状態がわかるように修正しました。 位置情報取得の使用が許可されていない場合、淡いボタン 現在位置追尾中に、位置が取得できなかった場合、1秒毎の点滅 現在位置追尾中に、位置が取得が時間切れだった場合、2秒毎の点滅

iOS5マップ風ウェブアプリに関するお知らせ

iOS6のためのiOS5マップ風ウェブアプリに関してです。 iOS6でこのアプリをウェブアプリ(全画面表示)の形で使うと、現在位置のトレース機能が動いていないことが判明しました。十分な評価が足らず申し訳ございません。 対策としては、Safari上で使っていただ…

iOS5マップ風ウェブアプリ、起動時間短縮しました。

ウェブアプリ(「ホーム画面に追加」)の状態で、起動時間に、iPhone 3GS/3G回線で20秒以上、WiFiで16秒掛かっていましたが、10秒強で起動するようになりました。(アプリケーションキャッシュを導入しました。)上位機種ならもっと速いです。 ストリートビュー…

iOS5マップ風ウェブアプリ、Panoramioが見られるようになりました。

iボタンから「Panoramioを表示」をクリックしてもらうと、上のようにPanoramioの写真が見られるようになりました。 Enjoy! http://y-ich.github.com/maps/maps.html追記: 19日の夜からiOSでストリートビューボタンがタッチできない状態でした。21日午前0時に…

JavaScriptパフォーマンスベストプラクティスその5

Nokia Developerより オブジェクト指向JavaScript 代わりの継承機構を検討すること JavaScriptではオブジェクト指向スタイルの継承をまねるたくさんの方法が存在する。しかし、継承をまねるすべての機構が似たように動くわけではない。 特にコードがオーバー…

JavaScriptパフォーマンスベストプラクティスその6

Nokia Developerより クライアント-サーバー通信 XMLHttpRequestにタイムアウトを設定すること ブラウザはXHR requestをある時間後タイムアウトするが、スクリプトの制御下で接続を中断することが有益なことがある。これはsetTimeout()を使って XHRコールに…

JavaScriptパフォーマンスベストプラクティスその7

Nokia Developerより アニメーション アニメーションは控えめにすること ハードウェアサポートのないアニメーションは遅い。本当の有用性の価値をもたらさない余分なアニメーションを避けるようにすること。少なくともユーザーにアニメーションを無効にする…

JavaScriptパフォーマンスベストプラクティスその8

Nokia Developerより イベント イベント委譲を使うこと もしイベントハンドラをバインドする必要がある新しい要素を動的にたくさん生成するなら、イベントハンドラを個々のオブジェクトに割り当てることは、すぐにことが大きくなって、高価になる。 複数のイ…

JavaScriptパフォーマンスベストプラクティスその9

Nokia Developerより スタイル CSSを最適化すること 部品ライブラリを作ること 一貫した意味論的スタイルを使うこと 内部で透明性を持つようにモジュールを設計すること 柔軟に グリッドが好きになるように学ぶこと セレクタを最小化すること 構造とスキンを…

JavaScriptパフォーマンスベストプラクティスその10を飛ばしてその11

Nokia Developerより jQuery固有 注意せよ!これらの最適化パターンはjQuery 1.2.6を対象にしている。最近のバージョンやSizzleセレクタエンジンはこれらのボトルネックのいくつかを軽減している。 NB! These optimization patterns are aimed at jQuery 1.2.…

JavaScriptパフォーマンスベストプラクティスその4

Nokia Developerより Document Object Model (DOM) の難解さ ソース: Efficient JavaScript - DOMDOMパフォーマンスの遅さは以下の3つの主な原因に遡ることができる: 大規模なDOM操作 DOM APIの大量の使用は遅さのよく知られた原因である。 スクリプトが多す…

JavaScriptパフォーマンスベストプラクティスその3

Nokia Developerより よりよいロードパフォーマンスの秘訣 より速いスタートアップとスプラッシュスクリーンの表示のためにはブロッキングなしにスクリプトをロードすること <script>タグがHTMLドキュメントの中に見つかると、参照されたスクリプトリソースをダウン…

JavaScriptパフォーマンスベストプラクティスその1

Nokia Developerよりこの記事はより速いウェブアプリケーションを構築するための価値あるガイドラインを与える。記事は様々なソースからのガイドラインの集合である。 This article gives valuable guidance for building faster web applications. The arti…

JavaScriptパフォーマンスベストプラクティスその2

Nokia Developerより コアJavaScriptの落とし穴 evalやFunctionコンストラクタの使用を避けること evalやFunctionコンストラクタの使用は、ソースコードを実行可能なコードに変換しなければいけないので、毎回スクリプトエンジンを呼び出すことになる高価な…

ウェブアプリでローカリゼーション

Dashboardウィジェットをまねて以下のようにしました。1. localizedStringsを定義したja.jsなどを用意 var localizedStrings = {}; localizedStrings['Example'] = '例'; localizedStrings['Hello!'] = 'こんにちは!'; 2. html内でブラウザの言語に応じて上…

iOS5マップ風ウェブアプリ大幅更新!

http://y-ich.github.com/maps/index.html 見た目を本物に近づけて、国際化(英語対応)も果たしました! 公開場所もGithubに移行。以下の機能が未実装です。 経路の複数表示と経路のリスト表示 (2012/10/16実装) 誤差にあわせた現在地マーカ範囲(2012/10/17実…

Google MapsのカスタムInfoWindow

CustomInfoWindowのインスタンスに対応するDOMはinfo-windowクラスを持つようになりますので、CSSで自由にデザインできます。描画位置はanchorの上です。drawを変更することで変えられます。onAddでclickイベントの伝搬を止めています。必要に応じて他のマウ…

iOS5マップ風ウェブアプリ、かなり頑張りました!

Googleのシュミット会長が「GoogleマップのアプリをAppleにまだ提出していない」と発言されてから10日経ちました。昨日はGoogleマップのモバイル版のストリートビュー対応が発表されて気になりましたが、触ってみて「もしかしたら負けてないかも」なんて思っ…

iOS5マップ風ウェブアプリを作ってみました。

iOS5マップ風ウェブアプリを作ってみました。http://dl.dropbox.com/u/8719413/y_ichikawa/map/map.html以下の機能を実装しました。若干機能が欠落しています。 地図の表示 場所の検索 現在地の追尾 ピンのドロップ ピンのそばのストリートビューの表示 起動…

Meteorで、Google StreetView上の「泥棒と巡査」

先日、慶応大学の増井教授(私が新入社員だった時の上司です^^;)がTwitterでこんなことをつぶやかれました。 GoogleStreetView上で鬼ごっこするシステムある?2012-09-09 12:28:22 via web 「Meteorなら簡単にできる、多分予備実験含めて工数2時間ぐらいだろう…

「速いウェブアプリの秘訣」

Google社のSteve Soundersさんのブログ記事"Keys to a Fast Web App"を訳してみました。 速いウェブアプリの秘訣はAjaxアーキテクチャ、JavaScript、そしてキャッシングだと最近ツイートしました。この提示は自分の経験に基づいて、それぞれの寄与や節約の可…

Maxima on Web for iPadのソースコード公開

一年以上前のプロジェクトですが、要望があったのでMaxima on Web for iPadのソースを公開します。 https://github.com/y-ich/maxima-on-web 個別にサーバーを立ち上げていただく必要があります。

もしもヘミングウェイがJavaScriptを書いたら

Twitter社のAngus Crollさんのbyfat.xxxへの投稿記事"If Hemingway wrote JavaScript"を訳してみました。 もしもヘミングウェイがJavaScriptを書いたら コードを書き始めるずっと前、僕は文学が好きだった。今では僕はJavaScriptをたくさん書いていて、それ…

Adobe Brackets

6月25日にアドビがJavaScript, HTML, CSSで書かれたJavaScript, HTML, CSS用コードエディタBracketsを発表されてました。https://github.com/adobe/bracketsGithubでの公開は5月7日には始まっていたようです。 Siphon, SPELL NOTEの開発を通じて、動的言語の…

js-console:一行で追加できるJavaScriptコンソール

最近のデスクトップブラウザのJavaScriptデバッガーが素晴らしいですね。それなしでの開発は考えられせん。 AndroidのChromeもリモートデバッグがすごいらしいですが、iOS 6でもいよいよMobile SafariやUIWebViewのリモートweb inspectorがサポートされるよ…

Google earthで「男はつらいよ」オープニング

きっとおもしろおかしいと思いますので、どうぞご視聴ください。 http://www.h3.dion.ne.jp/~y.ich/torasan/opening1.html (注)音が出ます。ご注意ください。YouTubeプレーヤ(flash)の制御とGoogle earth pluginの制御をJavaScriptですることを覚えました。

Google earthでストリートビュー散歩

「寅さん」制作の過程で必要となり、Google earth上でストリートビュー散歩するKMLを生成するサイトを作り、公開しました。 Google earth plugin上ですぐ動作を見れるようになっています。 日本語版: http://y-ich.github.com/walking-earth/ja.html English…

Meteor

先日、MeteorというJavaScriptベースのウェブプラットフォームが発表されました。(meteorは流星) そのコンセプトを見て、ビビッと来ましたので、ドキュメンテーションのコンセプト部分の訳をしてみました。 コンセプト 今まで私たちは単ページのJavaScriptア…

Underscore.jsのドキュメントを翻訳しました。

https://sites.google.com/site/nextliteracy/javascript/underscore-jsUndersocre.jsを使うと、JavaScriptで、関数型言語でよく使われる高階関数をハッシュと配列に対して使うことができるようになります。 翻訳作業を通じて、オブジェクト指向と関数型言語…

Add-on-Page

HTML5の時代ではウェブページはアプリケーションです。だから、ウェブページそれぞれへの機能拡張Add-on-Pageの時代が来ます。 一般的にアプリケーションは経済の原理に乗っ取った機能の集合体)なので、8割のユーザーを満足させるものを目指します。当然、ニ…

iCab Mobile Modules and Appleの翻訳

http://www.icab.de/blog/2011/03/26/modules-for-icab-mobile-and-apple/iOS用ウェブブラウザiCab Mobileの作者がAppleからモジュールの追加機能を削除するよう依頼された件について語っています。 最近、ブックマークレットの自動アップデートの方法がない…

文法対比

JavaScriptとRubyの文法対比表を作りました。 類義語 JavaScript Ruby オブジェクト ハッシュ 文字列 シンボル プロパティ 属性 対比表 項目 JavaScript Ruby ソース文字コード Unicode(UCS-2/UTF-16) ソースコードの先頭もしくはshebang行の次に以下のよう…

しなやかで優美なもの

Interactive ‘Slinky Thing’より。Mathematicaだとパラメトリックプロットがスライダで更新できるんですね。HTML5で作ってみました。お楽しみください。 http://www.h3.dion.ne.jp/~y.ich/applets/slinky.html上のページはMobile Safari, IE8, IE9, Firefox…

FlapjaxでHTML5 Canvas/SVGアニメーション

スマートフォンやタブレットなど急成長中のプラットフォームでは、FlashやSilverlightの代わりにHTML5 Canvasを使う流れが生まれています。でもまだCanvasは描画だけでアニメーション機能はありません。だからJavaScriptでアニメーションを作ることになりま…

スマートフォンやタブレットで便利な辞書ブックマークレット

iPadやiPhoneで英語のウェブサイトを見るとき、辞書が連携してくれなくて辛いです。 辞書用ブックマークレットがたくさんありますが、みんな、辞書サイトを別のページで開くか、辞書アプリを開きます。戻るのが大変で不便です。 別のアプローチでは、POPjisy…