かせいさんとこ

2012-01-24

[html]キャリア毎のアンカータグの挙動について実験

これは何?

ガラケーのキャリア毎のアンカータグの挙動が知りたかったので実験した結果です

知りたいこと

終点アンカーは、name, id どちらで有るべきか?
終点アンカーを持つタグは、Aタグ以外でもよいのか?

先に結論

全キャリアで正しく動作させるには、終点アンカーは、A タグで、name でアンカー名を指定する

但し、W3CのXHTML1.1 違反なので、id も指定したほうが無難

具体的にはこんな感じ

<a href="#test">START</a>
<a id="test" name="test">GOAL</a>

免責事項

それぞれ、1機種のみでの確認の為、他機種だと別の挙動をするかも

実験内容

以下のXHTML(XHTML 1.1)にて、いろんな条件のアンカータグを書いて、挙動を調査

http://dl.dropbox.com/u/1094808/anchor_test.html

条件

目的地アンカー(終点アンカー)が A タグで、name と id 両方で指定
目的地アンカー(終点アンカー)が A タグで、name で指定
目的地アンカー(終点アンカー)が A タグで、id で指定
目的地アンカー(終点アンカー)が div タグで、name と id 両方で指定
目的地アンカー(終点アンカー)が div タグで、name で指定
目的地アンカー(終点アンカー)が div タグで、id で指定

結果

au、softbank

5. 以外正しく動作

docomo

1. 2. のみ正しく動作

使用機種

au : URBANO : http://www.au.kddi.com/seihin/archive/kishu_archive.html?id=urbano
docomo : So0706i : http://www.nttdocomo.co.jp/support/utilization/product/so906i/index.html
softbank : 821SC : http://mb.softbank.jp/mb/product/3G/821sc/

仕様を見てみた

softbank

終了アンカーは、a タグに name 属性を付けて対応するように書かれている

[ページ内ラベルを指定する場合] 「<a name=#label>~</a>」で指定した位置へ遷移するには、同一ページ(ファイル)内であるならば、「<a href=#label>」と定義したアンカーを用い、別ページ(ファイル)の場合には、「<a href=(当該ファイルへの URI)#label>」 と定義したアンカーを用いる。

http://creation.mb.softbank.jp/mc/tech/doc/A-006-111-XHTML_2.0.3.pdf

docomo

a タグの name属性の解説の例文では、終了アンカーは、a タグの name 属性

仕様書では、a タグ以外に name 属性が無い

name
値

《char》
意味

    アンカーに名前をつけます。

注意点

<A name="top">ページトップ</A>
<A href="#top">ページのトップへ</A>

作ろうiモード：iモードブラウザ2.0対応HTML要素一覧 | サービス・機能 | NTTドコモ

au

説明文を読む限りでは、終了アンカーは、任意の要素に、id or name 属性で定義する

実際に動かすと、div の name 属性では動作しない

アンカーとは、ある文章の一部からある文章 (またはその一部) へとリンクが設定されている場合の、その出発地点と到達地点のことで、a要素を利用することで、その両方を指定する事ができます。
a要素をリンクの出発地点とする場合は、href属性でリンク先のURLを指定します。文章の特定の部分を到達地点とした場合は、name属性またはid属性を使用して、そこに名前 (識別子) を付けておきます。この場合、リンク先のhref属性で「URL#名前」と指定する事で、その文書内のその位置にリンクさせる事ができます。

KDDI au: 主要タグの説明 > リンク関連/マルチメディア関連/フォーム・データ入力関連

w3c (XHTML1.1)

XHTML1.1 より、a タグから name 属性が無くなった

On the a and map elements, the name attribute has been removed in favor of the id attribute

XHTML 1.1 - Changes from XHTML 1.0 Strict

まとめ

全キャリアで正しく動作させるには、終点アンカーは、A タグで、name でアンカー名を指定する

但し、W3CのXHTML1.1 違反なので、id も指定したほうが無難

W3C的には、終点アンカーに、Aタグ以外を使って良いのかは分からなかった

まぁ、実務的には上記の方法でやれば問題ないはず

そんなかんじ

Permalink | コメント(0) | トラックバック(0)

2011-11-28

モヤLTで発表してきた

モヤモヤハウスで行われているLT会「モヤLT」に誘って頂けたので1本発表してきました

http://www.slideshare.net/kaseisan/javascript-10355694

説明

http://kasei-san-pusher-demo.heroku.com/pusher/main
- QRコードに書かれているURLからメッセージを送信すると、main の方にメッセージがリアルタイムに表示されます
- 後、iphoneの場合シェイクすると勝手にメッセージが送信されます

発表した感想

LTでウケると楽しい
初対面の人ばっかりだったけど、LTを通して自分が何者なのか、発表者がどんな人なのかが一発でわかった
- 話しかけてもらいやすいし、LTから話題を始められるので会話が詰まりづらい
発表資料に twitterID を書くと光の早さでフォローされる
*発表中のデモで、観客が自由にメッセージを表示できるようにすると、放送できない言葉を書く奴が居る*
- 場が和むので、わりとよかったと思う
javascriptのテストについて聞かれたけどあんまり歯切れのよい回答ができなかった
- あんまりちゃんとやってないです...

他の人の発表

ジャンルが幅広い!!
- 音楽の歴史、被災地で見たもの、マラソン、一般意思2.0、データマイニング、戦国時代入門、内閣不信任案の歴史
内閣不信任案の歴史は中曽根～村山当たりまでの政権交代の歴史と小沢さんの暗躍っぷりを、ホワイトボードで熱く、わかりやすく語られててお金払っても良いくらいのクオリティでした、タツジン!!
安心のマカー率

まとめ

主催の tomo_will++
- 素晴らしい会をありがとうございました!!

Permalink | コメント(0) | トラックバック(0)

2011-09-04

Heroku対抗馬のPaaSをちょっと調べてみた

Heroku

PaaS って?

PaaS(Platform as a service)

ソフトウェアを開発・実行するプラットフォームをネットワークサービスとして提供するソフトウェア・デリバリモデルのこと

Heroku じゃいかんの?

4/21 以降大規模なのはないけど、8月に入ってから、ちょっと不安定

2011/04/21 AWS起因による大規模障害(16～60Hのダウンタイム)
- 上流インフラの障害が原因だが、Heroku側は100%自分達の責任として対応を準備すると発表
- AWSの障害に起因したHerokuの障害について、Herokuによるレポートが公開されたので要点を翻訳しました（全訳ではありません）。- Sooey http://journal.sooey.com/130
2011/08/09 AWS起因による障害(40分程度)
- 本日のインターネット大障害。Amazon EC2のパンクによりFoursquare、Instagram、Quora、Redditなどに影響拡大 http://jp.techcrunch.com/archives/20110808amazon-ec2-outage/
2011/08/23 Heroku内部の不具合によるサービスダウン(24分)
- Applications unavailable http://status.heroku.com/incident/190

なので、第二候補、第三候補があっても良いかと思った

どんな候補があるの?

ざっと調べた感じではこんな

Cloud Foundry
- http://www.cloudfoundry.com/
Duostack
- http://www.duostack.com/
DotCloud
- http://www.dotcloud.com/
fluxflex
- https://www.fluxflex.com/

Cloud Foundry

http://www.cloudfoundry.com/

VMwareが、開発しているオープンソースのPaaSプラットフォーム

自社もサービスを提供しているけど、まだβ

proアカウントが無い

どちらかというと、他サービスプロバイダにソフトを提供したいみたいで、そのデモサイトっぽい

Duostack

http://www.duostack.com/

DotCloudに買収されたらしい。

今見れない...

DotCloud

http://www.dotcloud.com/

一時期Herokuの対抗馬として少し話題になっていた気がする

一応proアカウントがあるが、コンタクトを取らないと作れない(99$/月。高い!!)

独自ドメイン対応(Proのみ)
インフラについての資料や、日本語ノウハウが少ない...

fluxflex

https://www.fluxflex.com/

国産らしい

値段安く感じる : https://www.fluxflex.com/pricing

アクセス数、CPU時間、転送量、DBサイズのパッケージで値段が決まっている
- 超過分は従量課金

ただ、バックエンドはAmazonEC2なので、信頼性は Heroku とどっこい?

独自ドメイン対応(無料)

そんな感じ

商用でまともに使えそうなのは、fluxflex くらい?

ただ、結局インフラは AWS なので信頼性は大差ないかも...

Permalink | コメント(0) | トラックバック(0)

2011-08-05

MacBookAir に入れたもの色々

自分向けのメモですが

ブラウザ

Firefox
Google Chrome

web系アプリ

Dropbox
- DropBoxを使って、複数OS間でvimの環境を共有する方法 - かせいさんとこ
Evernote
夜フクロウ

iphone

iPhone Exploer
Mobile Media Converter
- http://www.miksoft.net/mobileMediaConverter.htm
- flv -> mp4

開発

xcode
macports
- curl
rvm
- ruby 1.9.2

zsh, vim, screen, sqlite3 はインストールされていたものを使用

割と色々入っているので思ったよりさっくり環境がつくれた

TODO

iterm 入れる?
iTunes の移行
rails環境の構築
- sqliteとか入って無いなら入れる

Permalink | コメント(0) | トラックバック(0)

2011-05-24

FacebookのFb.ui実行時にIEだけエラーが発生する時の対処方法

javascript, facebook

先に結論

APIに渡すパラメータが長すぎると、IEのURL文字長限界たURLをAPI内部で呼び出してしまい、エラーが発生する

対策 : パラメータを適度長さに留める

参考 : マイクロソフトサポートオンライン | URL に使用可能な文字数は最大 2,083 文字

例

        FB.ui({
            method:      "feed"
          , message:     "ながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージ"
          , name:        "ながーいメッセージ"
          , link:        "http://www.google.co.jp"
          , caption:     "ながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージながーいメッセージ"
        }, function(res){
          if( res && res.post_id ){
          }else{
          }
        });

とかやると、IEでだけ「指定されたリソースは見つかりません」とエラーが出る

理由

Facebook の Fb.ui は、内部で渡されたパラメータを変換して、http://www.facebook.com/fbml/ajax/uiserver.php に渡して呼び出している

Fb.ui に渡したパラメータがでかいと、呼び出しを行う時に、IEのURL文字長限界を超えてしまいエラーが発生する

そんな感じ

Permalink | コメント(0) | トラックバック(0)

2011-05-19

重複を許可する配列の組み合わせを返す

ruby

Array#combination だと、重複は許可されないので自作

仕様

サイズn の重複を許可した組み合わせを返す
同一値の重複は許可するけど、順序が異なるだけの組み合わせは返さない
- [1,1,2] があったら、[1,2,1]や、[2,1,1] は返さない

コード

class Array
  def duplicate_combination(max_depth)
    b([], 0, max_depth).map {|obj| obj.sort }.uniq
  end

  def b(buf, depth, max_depth, result = [])
    depth = depth + 1
    self.each do |k|
      new_buf = (buf + [k]).flatten
      if max_depth > depth
        b(new_buf, depth, max_depth, result)
      else
        result << new_buf
      end
    end
    result
  end
  private :b
end

使い方

p [1,2,3,4,5].duplicate_combination(3)
# [[1, 1, 1], [1, 1, 2], [1, 1, 3], [1, 1, 4], [1, 1, 5], [1, 2, 2], [1, 2, 3], [1, 2, 4], [1, 2, 5], [1, 3, 3], [1, 3, 4], [1, 3, 5], [1, 4, 4], [1, 4, 5], [1, 5, 5], [2, 2, 2], [2, 2, 3], [2, 2, 4], [2, 2, 5], [2, 3, 3], [2, 3, 4], [2, 3, 5], [2, 4, 4], [2, 4, 5], [2, 5, 5], [3, 3, 3], [3, 3, 4], [3, 3, 5], [3, 4, 4], [3, 4, 5], [3, 5, 5], [4, 4, 4], [4, 4, 5], [4, 5, 5], [5, 5, 5]]

そんなかんじ

Permalink | コメント(2) | トラックバック(0)

2011-05-15

canvas のアニメーション高速化ノウハウいろいろ

javascript

これはなに?

canvas を色々いじってみて取得したノウハウをまとめてみました
そこそこいじれば、パーティクル 300 個くらいならネットブックでもそれなりに動くようです
- サンプル : http://dl.dropbox.com/u/1094808/particles.html
- 弾幕シューとかも無理ではなさそう...?

毎回描画するより、putImageData の方が早い

必要な図形を初回処理で書いて、getImageData を使って、ImageData オブジェクトを作っておく

ctx.getImageData(left, top, x_size, y_size)

ただし、putImageDataは、globalCompositeOperation を無視する
あと、Firefox 3.6.17 現在描画領域からはみ出すような putImage を行うと例外が発生する
- 4.x 系は未調査

drowImage の Firefox 特有のバグ

putImageDataより複雑な事ができるメソッド
globalCompositeOperation に従ってくれるので、基本的には putImage よりこっちを使うことの方が多そう
ただし、Firefox では、getImageData で取得した ImageData をそのまま渡すと例外が発生するバグがある
- Firefox 3.6.17 現在
- http://stackoverflow.com/questions/982000/firefox-throwing-a-exception-with-html-canvas-putimagedata
なので、非表示の canvas に putImageData してから、canvas そのものを drowImage しないといけない

  var spriteCanvas = document.createElement('canvas');
  spriteCanvas.setAttribute('width', size*2);
  spriteCanvas.setAttribute('height', size*2);
  var imageData = ctx.getImageData(0, 0, size*2, size*2);
  spriteCanvas.getContext('2d').putImageData(imageData, 0, 0);

非表示の canvas をバッファにして、最後にまとめて表示用の canvas にコピーしても速度は上がらない

ゲームとかだと良くやる手だけど、非表示の canvas に描画するときもおんなじ処理をしているっぽい
- でかいサイズのコピーを行う分、むしろ重くなってる?

参考リンク

http://www.html5.jp/canvas/
- canvas の API のドキュメント

今更聞けないcanvasの基礎の基礎
- 基礎的なところをざっくりと紹介している
- FPS を使った描画速度の制御が参考になりました

Permalink | コメント(0) | トラックバック(0)

2011-04-19

新百合、稲城、麻生区の情報をRTし続ける「新百合Bot」をリリースしました

サービス

http://twitter.com/shinyuribot

これは何?

新百合ヶ丘近辺の情報を含んだツイートをRTし続けるBotです

フォローしておけば、新百合近辺の情報を受動的に取得できます

使用技術

gem Twitterを使って、Railsでさっくり構築

Heroku にリリースして、URL を cronjobで10分毎に叩くようにした

その他

だらだら見てると、割と地元の情報がつかめて楽しい

http://twitter.com/love13frog/status/58378664752070656

Permalink | コメント(0) | トラックバック(0)

2011-01-12

シンボリックリンクと相対パスの組み合わせでハマったこと

ruby

例えばこんなディレクトリ構成があるとします

tmp / c ( a/b へのシンボリックリンク)
 | / 01.txt ( "tmp/01.txt" )
 |
 +- a / 01.txt( "tmp/a/01.txt" )
    |
    +- b / 01.txt( "tmp/a/b/01.txt" )

んで、シンボリック c から、tmp/01.txt を読み込みたいので、以下のように、相対パスでファイルを読みだしてみる

irb(main):001:0> File.open('./c/../01.txt'){ |f| f.read }
=> "/tmp/a/01.txt\n"

すると、/tmp/a/01.txt が読み出されている!

シンボリックリンク以降の相対パスが、本来の path からの相対パスとして処理されている!!

こういう場合、expand_path を挟んであげると、シンボリックリンク以降の相対パスも好意的に解釈してくれるようです

irb(main):001:0> File.open(File.expand_path('./c/../01.txt')){ |f| f.read }
=> "/tmp/01.txt\n"

Linux の仕様なのか、ruby の仕様なのかは不明

どっかにこの辺の仕様について言及したドキュメント無いかしら?

Permalink | コメント(0) | トラックバック(0)

2010-12-01

jQuery.autopager.js 覚え書き

javascript, jQuery

これは何?

AutoPagerize のようなページングを提供する、jQuery プラグイン jQuery.autopager についての覚え書き2点

iOS で動作しない!!

Mobile Safail 側の不具合が原因

jQuery 本家の BTS にチケットがたってる

バージョンに関わらず、$(window).height() が正しく取得できない

6724 (wrong $(window).height() in mobile safari (iphone)) – jQuery Core - Bug Tracker

対策

 var height = window.innerHeight ? window.innerHeight : $(window).height();

iOS 3.x系(3G以前のiphone と、更新していない ipad, iphone) では、offset().top が正しく取得できない

6446 (Mobile Safari 4.0.4: $.offset.top() reports wrong position after scroll) – jQuery Core - Bug Tracker

対策

// as of 1.4.2 the mobile safari reports wrong values on offset()
// http://dev.jquery.com/ticket/6446
// remove once it's fixed
if (/; CPU.*OS (?:3_2|4_0)/i.test(navigator.userAgent)) {
  (function($) {
      $.fn.offsetOld = $.fn.offset;
      $.fn.offset = function() {
        var result = this.offsetOld();
        result.top -= window.scrollY;
        result.left -= window.scrollX;
        return result;
      };
  })(jQuery);
}

autopager で追加された DOM の jQuery オブジェクトが欲しい

autopager のソースより、

次ページから DOM を取ってきて、末尾にくっつける処理を行うメソッド insertContent で、

次ページから取ってきた DOM (nextContent) を this として、 options.load を call している

    function insertContent(res) {
        var _options = options,
            nextPage = $('<div/>').append(res.replace(/<script(.|\s)*?\/script>/g, "")),
            nextContent = nextPage.find(_options.content); 

        set('page', _options.page + 1);
        setUrl(nextPage);
        if (nextContent.length) {
            if (_options.insertBefore) {
                nextContent.insertBefore(_options.insertBefore);
            } else {
                nextContent.appendTo(_options.appendTo);
            }
            _options.load.call(nextContent.get(), currentHash(), nextHash());
            content = nextContent.filter(':last');
        }
        active = false;
    }

なので、options で設定した、load メソッド内で、以下のようにすればOK

$.autopager({
    load: function(current, next) {
      // nextContent は jQuery オブジェクトではなく、DOM オブジェクトなので、$で囲う必要あり
      nextContent = $(this);
    }
});

なんで this を nextContent.get() にしているのだろ?

思想が知りたい

Permalink | コメント(0) | トラックバック(0)

これは何?

知りたいこと

先に結論

免責事項

実験内容

条件

結果

au、softbank

使用機種

仕様を見てみた

softbank

docomo

au

w3c (XHTML1.1)

まとめ

説明

発表した感想

他の人の発表

まとめ

PaaS って?

Heroku じゃいかんの?

どんな候補があるの?

Cloud Foundry

Duostack

DotCloud

fluxflex

ブラウザ

web系アプリ

iphone

開発

TODO

先に結論

例

理由

仕様

使い方

これはなに?

毎回描画するより、putImageData の方が早い

drowImage の Firefox 特有のバグ

非表示の canvas をバッファにして、最後にまとめて 表示用の canvas にコピーしても速度は上がらない

参考リンク

これは何?

使用技術

その他

これは何?

iOS で動作しない!!

バージョンに関わらず、$(window).height() が正しく取得できない

対策

iOS 3.x系(3G以前のiphone と、更新していない ipad, iphone) では、offset().top が正しく取得できない

対策

autopager で追加された DOM の jQuery オブジェクトが欲しい

非表示の canvas をバッファにして、最後にまとめて表示用の canvas にコピーしても速度は上がらない