2014年5月28日水曜日

Changes in SoundCloud JavaScript SDK version 2

Previously, SoundCloud announced JavaScript SDK version 2.

Backstage Blog - Introducing JavaScript SDK version 2 - SoundCloud Developers

JavaScript SDK version 1 is now deprecated and will be permanently replaced by version 2 on July 1, 2014.

What? July 1? We must hurry up! And the upgrade guide is here.

Upgrading to JavaScript SDK 2.0.0 - SoundCloud Developers

We've done our utmost to make the upgrade to version 2.0.0 as seamless as possible. Everything should work as it did before, but please be sure to test before deploying your application.

I was relieved a little because they said "Everything should work as it did before". But actually, it's NOT TRUE!

First, mute() and unmute() are deleted. These methods are SoundManager2 methods. SDK ver.1 uses SoundManger2 internally.

SoundManager 2: Documentation

Second, SDK2 doesn't fire event callback like onplay, onfinish.

And I looked at it why. Finally, I found that it's because SDK2 now uses "AudioManager" rather than SoundManager2.

javascript - Options passed to Soundmanager (via Soundcloud JS SDK) not being used - Stack Overflow

http://connect.soundcloud.com/sdk-2.0.0.js
SC.Helper.loadJavascript(audioManagerURL + "/audiomanager.js"...

What is AudioManager? I could not find docs... There is no way other than analyzing it (ノ∀`)

First of all, what's happend to SoundManager2?

SC.stream("/tracks/" + id,
          {
            onfinish:onPlayerPlayComplete,
            onpause:onPlayerPause,
            onplay:onPlayerPlay,
          },
          function(soundManager2) {
            console.dir(soundManager2);
            playerSC = soundManager2;
            playerSC.play();
          }
         );

Here is the results of "console.dir".

getCurrentPosition: function (){return this._player.getCurrentPosition()}

getDuration: function (){return this._player.getDuration()}

getLoadedPosition: function (){return this._player.getLoadedPosition()}

getState: function (){return this._player.getState()}

getType: function (){return this._player.getType()}

getVolume: function (){return this._player.getVolume()}

pause: function (){return this._player.pause()}

play: function (position){if(this._player.getState()==="loading"||this._player.getState()==="initialize"){return this._player.on("stateChange",function(state){if(state==="idle"){return this.play()}})}else{return this._player.play()}}

seek: function (ms){return this._player.seek(ms)}

setVolume: function (volume){return this._player.setVolume(volume)}

stop: function (){this._player.pause();return this._player.seek(0)}

We can see soundManager2 has not so many functions, and mute() and unmute() are deleted.

Lookin at the functions, it seems "_player" is the AudioManager itself. I tried to "console.dir" this.

bind
getCurrentPosition
getDuration
getErrorID
getErrorMessage
getId
getLoadedPosition
getMute
getState
getType
getVolume
isInOneOfStates
kill
listenTo
listenToOnce
off
on
once
pause
play
preload
resume
seek
setMute
setVolume
stopListening
toggleEventListeners
trigger
unbind
updatePositions

AudioManager(_player) has setMute(boolean). I tried to use setMute(), it works.

So we can throw it away the wrapper object. I think this is enough.

SC.stream("/tracks/" + id,
          function(player) {
            playerSC = player._player;
            playerSC.play();
          }
         );

Okay then, what about event callback like onfinish?  Use stateChange() like this.

SC.stream("/tracks/" + id,
          function(player) {
            playerSC = player._player;
            playerSC.on("stateChange", function(evt){
              console.log(evt);
            });
            playerSC.play();
          }
         );

The "evt" object is a String. I observed what events were coming.

loading
playing
paused
ended

So we can rewrite the above code like this.

SC.stream("/tracks/" + id,
          function(player) {
            playerSC = player._player;
            playerSC.on("stateChange", function(evt){
              console.log(evt);
              switch(evt) {
                case "ended":
                  onPlayerPlayComplete();
                  break;
                case "paused":
                  onPlayerPause();
                  break;
                case "playing":
                  onPlayerPlay();
                  break;
              }
            });
            playerSC.play();
          }
         );

It works.

These are the other changes as far as I noticed.

setVolume():0-100 to 0-1.0
unmute():setMute(false)
mute():setMute(true)
stop():pause() + seek(0)
position:getCurrentPosition() returns msec
duration:getDuration() returns msec
bytesLoaded:substitute : getLoadedPosition() returns msec
bytesTotal:substitute : getDuration() returns msec
setPosition():substitute : seek() when seeking AudioManager fires "seeking" event to stateChange()

That's it for now.

More detailed analysis.
琴線探査: Analysis : Why SoundCloud JavaScript SDK version 2 doesn't accept options(autoplay, onfinish etc.) ?

2014年5月27日火曜日

Test Results : Programmatic auto play in background tab ( YouTube, SoundCloud, DailyMotion )

I did some tests of programmatic auto play in background tab for YouTube, SoundCloud, and DailyMotion.

And this is the results.

Mac OS X 10.9.3

Browser Version YouTube SoundCloud DailyMotion
Safari 7.0.4 (9537.76.4) OK NG NG
Chrome 35.0.1916.114 OK OK OK
FireFox 29.0.1 OK OK OK
Opera 21.0.1432.67 OK OK OK

On Mac, it's okay generally, but Safari is not good.


Windows 8.1

Browser Version YouTube SoundCloud DailyMotion
InternetExplorer 11.0.9600.17107 OK OK OK
Chrome 35.0.1916.114m OK OK N/A(can not play)
FireFox 29.0.1 OK OK OK
Opera 21.0.1432.67 OK N/A N/A

Surprisingly, it seems that IE and FF are better than Chrome.

Opera? I cannot say anything. (^^);

YouTube, SoundCloud, DailyMotionのオートプレイ(バックグラウンドタブ再生)テスト結果

YouTube, SoundCloud, DailyMotionのオートプレイ(バックグラウンドタブ再生)テストをした。

その結果は次の通り。

Mac OS X 10.9.3

Browser Version YouTube SoundCloud DailyMotion
Safari 7.0.4 (9537.76.4) OK NG NG
Chrome 35.0.1916.114 OK OK OK
FireFox 29.0.1 OK OK OK
Opera 21.0.1432.67 OK OK OK

Macは大体大丈夫だが、やっぱりSafariがダメ(^^);

Windows 8.1

Browser Version YouTube SoundCloud DailyMotion
InternetExplorer 11.0.9600.17107 OK OK OK
Chrome 35.0.1916.114m OK OK N/A(プレイ不能)
FireFox 29.0.1 OK OK OK
Opera 21.0.1432.67 OK N/A N/A

意外にもChromeよりもIEやFFの方が良い結果。Operaが残念。

2014年5月26日月曜日

Analysis : Why SoundCloud JavaScript SDK version 2 doesn't accept options(autoplay, onfinish etc.) ?

I wrote an article about the changes of SoundCloud "JavaScript SDK version 2" previously. And then, this question came from abroad.



It's because SDK2 now uses the AudioManager rather than SoundManager2. Let's analyze this deeper.

SDK2
http://connect.soundcloud.com/sdk-2.0.0.js
stream: function (idOrUrl, optionsOrCallback, callback) {
  var a, options, stream_url, track_url;
  a = SC.Helper.extractOptionsAndCallbackArguments(optionsOrCallback, callback);
  options = a.options;
  callback = a.callback;
  options.id = "T" + idOrUrl + "-" + Math.random();
  track_url = this._prepareTrackUrl(idOrUrl);
  stream_url = this._prepareStreamUrl(idOrUrl);
  return SC.whenStreamingReady(function () {
    return SC.get(track_url, function (track) {
      options.duration = track.duration;
      return SC.get(stream_url, function (streams) {
        var createAndCallback, ontimedcommentsCallback, _this = this;
        options.src = streams.http_mp3_128_url || streams.rtmp_mp3_128_url;
        createAndCallback = function (options) {
          var player;
          player = new Player(audioManager.createAudioPlayer(options));
          if (callback != null) {
            callback(player)
          }
          return player
        };
        if (ontimedcommentsCallback = options.ontimedcomments) {
          delete options.ontimedcomments;
          return SC._getAll(track_url + "/comments", function (comments) {
            var player;
            player = createAndCallback(options);
            return SC._setOnPositionListenersForComments(player, comments, ontimedcommentsCallback)
          })
        } else {
          return createAndCallback(options)
        }
      })
    })
  })
},

When creating player, the code looks like this.

"player = new Player(audioManager.createAudioPlayer(options));"

All options seems to be passed to the AudioManager at this stage. Let's see what's happening in createAudioPlayer().

AudioManager
http://connect.soundcloud.com/audiomanager/audiomanager.js
AudioManager.prototype.createAudioPlayer = function (descriptor) {
    var audioType, protocol, extension;
    if (!descriptor.id) {
        descriptor.id = Math.floor(Math.random() * 1e10).toString() + (new Date).getTime().toString()
    }
    if (!descriptor.src) {
        throw new Error("AudioManager: You need to pass a valid src")
    }
    if (!this._players[descriptor.id]) {
        this._players[descriptor.id] = PlayerFactory.createAudioPlayer(descriptor, this._settings)
    }
    this._players[descriptor.id].setVolume(this._volume);
    this._players[descriptor.id].setMute(this._muted);
    this._players[descriptor.id].on("stateChange", this._onStateChange, this);
    return this._players[descriptor.id]
};

"PlayerFactory.createAudioPlayer(descriptor, this._settings)"

It seems the options are processed in the deeper hierarchy. For the HTML5AudioPlayer, it seems the options are finally processed here.

module.exports = HTML5AudioPlayer = function (descriptor, settings) {
  this._id = descriptor.id;
  this._descriptor = descriptor;
  this._isLoaded = false;
  this._settings = settings;
  this._bufferingTimeout = null;
  this._currentPosition = 0;
  this._loadedPosition = 0;
  this._prevCurrentPosition = 0;
  this._prevCheckTime = 0;
  this._prevComparison = 0;
  this._positionUpdateTimer = 0;
  this._playRequested = false;
  if (descriptor.duration) {
    this._duration = descriptor.duration
  }
  _.bindAll(this, "_onPositionChange", "_onStateChange", "_onLoaded", "_onBuffering");
  this._init();
  this.toggleEventListeners(true);
  if (this._descriptor.preload) {
    this.preload()
  }
  if (descriptor.autoPlay) {
    this.play()
  } else {
    this._setState(States.IDLE)
  }
};

We can see the only one effective option(descriptor) is "autoPlay". And also we can see that the event handler like "onfinish" is not used at all. Acctually, I tried to use "autoPlay" option. It works.

If you need onfinish() callback, use this.

player.on("stateChange", function(evt) {
  switch(evt) {
    case "ended":
     onPlayerEnded();
     break;
  }
}

We need more docs about SDK2. Don't you think so ?

なぜSoundCloud「JavaScript SDK version 2」ではautoplayやonfinishなどのオプションを受け付けなくなったのか?の分析

以前にSoundCloud「JavaScript SDK version 2」の変更点についての記事を書いた。そうしたら海外からこんな質問が来た。



要するに、なぜ新しいSDKではautoplayやonfinishなどのオプションを受け付けなくなったのか?という質問だ。

その理由はSDK2はSoundManager2でなくAudioManagerを使うようになったからだ。これをさらに詳しく分析してみよう。

SDK2
http://connect.soundcloud.com/sdk-2.0.0.js
stream: function (idOrUrl, optionsOrCallback, callback) {
  var a, options, stream_url, track_url;
  a = SC.Helper.extractOptionsAndCallbackArguments(optionsOrCallback, callback);
  options = a.options;
  callback = a.callback;
  options.id = "T" + idOrUrl + "-" + Math.random();
  track_url = this._prepareTrackUrl(idOrUrl);
  stream_url = this._prepareStreamUrl(idOrUrl);
  return SC.whenStreamingReady(function () {
    return SC.get(track_url, function (track) {
      options.duration = track.duration;
      return SC.get(stream_url, function (streams) {
        var createAndCallback, ontimedcommentsCallback, _this = this;
        options.src = streams.http_mp3_128_url || streams.rtmp_mp3_128_url;
        createAndCallback = function (options) {
          var player;
          player = new Player(audioManager.createAudioPlayer(options));
          if (callback != null) {
            callback(player)
          }
          return player
        };
        if (ontimedcommentsCallback = options.ontimedcomments) {
          delete options.ontimedcomments;
          return SC._getAll(track_url + "/comments", function (comments) {
            var player;
            player = createAndCallback(options);
            return SC._setOnPositionListenersForComments(player, comments, ontimedcommentsCallback)
          })
        } else {
          return createAndCallback(options)
        }
      })
    })
  })
},

playerを作る時にこのようになっている。

「player = new Player(audioManager.createAudioPlayer(options));」

この段階では一応全てのオプションがAudioManagerに渡されるようだ。では、このcreateAudioPlayer()はどうなっているか?

AudioManager
http://connect.soundcloud.com/audiomanager/audiomanager.js
AudioManager.prototype.createAudioPlayer = function (descriptor) {
    var audioType, protocol, extension;
    if (!descriptor.id) {
        descriptor.id = Math.floor(Math.random() * 1e10).toString() + (new Date).getTime().toString()
    }
    if (!descriptor.src) {
        throw new Error("AudioManager: You need to pass a valid src")
    }
    if (!this._players[descriptor.id]) {
        this._players[descriptor.id] = PlayerFactory.createAudioPlayer(descriptor, this._settings)
    }
    this._players[descriptor.id].setVolume(this._volume);
    this._players[descriptor.id].setMute(this._muted);
    this._players[descriptor.id].on("stateChange", this._onStateChange, this);
    return this._players[descriptor.id]
};

「PlayerFactory.createAudioPlayer(descriptor, this._settings)」

つまり,オプションが処理されるのはまだ深い階層のようだ。

HTML5AudioPlayerの場合、最終的にオプションが処理されるのはここだと思われる。

module.exports = HTML5AudioPlayer = function (descriptor, settings) {
  this._id = descriptor.id;
  this._descriptor = descriptor;
  this._isLoaded = false;
  this._settings = settings;
  this._bufferingTimeout = null;
  this._currentPosition = 0;
  this._loadedPosition = 0;
  this._prevCurrentPosition = 0;
  this._prevCheckTime = 0;
  this._prevComparison = 0;
  this._positionUpdateTimer = 0;
  this._playRequested = false;
  if (descriptor.duration) {
    this._duration = descriptor.duration
  }
  _.bindAll(this, "_onPositionChange", "_onStateChange", "_onLoaded", "_onBuffering");
  this._init();
  this.toggleEventListeners(true);
  if (this._descriptor.preload) {
    this.preload()
  }
  if (descriptor.autoPlay) {
    this.play()
  } else {
    this._setState(States.IDLE)
  }
};

つまり、オプション(descriptor)で有効なのはautoPlayのみで、onfinish()などのイベントハンドラーは全く使われていないことが分かる。実際に試してみたところautoPlayは効いた。

onfinish()のコールバックが必要な場合はこんな感じ。

player.on("stateChange", function(evt) {
  switch(evt) {
    case "ended":
     onPlayerEnded();
     break;
  }
}

やっぱりね、もっとドキュメントが必要だよね。

なんか海外でもニーズがありそうだから英語版も書いといた。情けは人のためならずと申します。
琴線探査: Analysis : Why SoundCloud JavaScript SDK version 2 doesn't accept options(autoplay, onfinish etc.) ?

2014年5月25日日曜日

「小田急本厚木ミロードイースト」改装開業が日経に。で、海老名の「ららぽーと」どうなった?平塚にも「ららぽーと」。挟まれた〜(^^);

日経14.05.24朝 本厚木商業施設きょう改装開業 小田急、28店が入居

小田急電鉄は24日、小田急小田原線本厚木駅に直結した商業施設「小田急本厚木ミロードイースト」を改装開業する…

先月はあの旧パルコのみすぼらしい廃墟が「アミュー厚木」として復活し、今月は改装で閉鎖していたミロードイーストが再開した。

個人的には博多ラーメンの「一風堂」が来ることが感慨深い。だいぶ前の話だけど、福岡の大名本店に行ったことがある。その一風堂がついに地元に来るとはね。最近では一風堂のお店をいたるところで見るようになったよな。素晴らしい。

ミスドが復活するのも嬉しいな(*^_^*) 意外と好きなんだよね、太るけど(^^);

しかし、この程度で海老名に対抗できるかなぁ…

そういえば、海老名の「ららぽーと」どうなった?

琴線探査: 本厚木駅が「ららぽーと」が来る海老名駅に対抗するにはもうあれだ。「地下街」だな。 | 海老名駅 西口の再開発始動 - 日経

何か中止みたいな噂もあるみたいだけど、Wikiによるとまだ計画は生きてるようだ。15年の冬に開業予定らしいけど、どうなんだろうね。

ららぽーと - Wikipedia

さらに、平塚にもららぽーとを作る予定があるみたいね。前に平塚の日産の工場の跡地にショッピングモール作るという話が載ってたけど、それってららぽーとのことだったんだ。

挟まれましたな(^^);

アミューとミロードイーストによって、しばらくパワーダウンしていた厚木の街が再活性化されるのは間違いないだろうけれど、これらの新たな脅威に対抗できるのか?

やっぱね、地下都市作るしかないと思うけどね。地下は地震にも強いし、小田急であふれた人たちの避難場所にもなるから、小田急にも協力してもらえばいいよね。

近畿大の「KINKY(変態の)」問題

日経14.05.23夕 近畿大 英文名称を変更 「KINKI」誤解招く恐れ

…「KINKI UNIVERSITY」から「KINDAI UNIVERSITY」に変更する。英語で発音すると「異様な」や「変態の」という意味の「KINKY」と誤解されることもあり…

塩崎均学長は「海外の学会で自己紹介をすると失笑され、良い気持ちはしなかった。近畿は由緒ある言葉だが、名称を変えた方が留学生は来やすい」…

学生や卒業生からは「寂しい」「変える必要があるのか」との声もあるという。

何という偶然の不幸であろうか(´-`)

たまたま日本語の「近畿」の発音が英語の「KINKY(変態の)」と似ていたばかりに…

学長の言うことも、学生や卒業生の言うことも、どちらもごもっともだと思う。

しかし、いかんせん日本語は英語ほど世界で使われていないのですよ…悔しいけど。

たったそれだけのために、近畿大学の誇りを傷付けられるのはやはり違うと思う。

「なにも名前を変えるわけではない。あくまで英語表記を変えるだけだ。」

と飲み込むしか無いと思うな(´-`)

「訪日客に無料で無線LAN」日本人も使えるようにしてもらわないと(´-`)

日経14.05.23夕 訪日客に無線LAN 全国共通の無料ID

政府はNTTグループなどと共同で、日本を訪れる外国人が駅や観光地などの無線LAN…サービスを簡単に使えるようにする…

2016年度をめどにサービスを始める…

無線LANの使いにくさは訪日客の最大の不満の一つ。観光立国や2020年東京五輪に向け、官民一体で改善を急ぐ…

総務省と観光庁、NTT系のNTTブロードバンドプラットフォーム、KDDI系のワイヤ・アンド・ワイヤレスなどが今夏に協議会をつくる…

パスポートの提示を条件にIDを渡し…

日本人も使えるサービスに広げるかは協議会で詰める…

オリンピック・パラリンピックもあるし、大変結構なことだと思う。

しかし、インフラは作っただけでは動かない。維持費が必要だ。その開発費と維持費は誰が出すのか?やっぱり税金?

それなら日本人でも使えるようなサービスにしてもらわないと困る。だいたい、外国人だけってもったいないでしょう?

しかしそうなると、無線LAN回線を提供する事業をしている企業はどうなるのか。「民業圧迫だー」とか批判が出そう。

あと、NTT系とKDDI系の名前は出てるけど、ソフトバンク系の名前が出てないのが気になるね。「など」の中に入ってるのかな?

そうじゃないとまた孫さんがゴネるよ。きっと。

非UI部分をC++で作るというHTML5によらないモバイルアプリのクロス開発のアイディア

Dropboxは非UI部分をC++で作るというHTML5によらないモバイルアプリのクロス開発を実践しているそうだ。

How Dropbox Uses C++ for Cross-Platform iOS and Android Development – Ole Begemann

…Dropboxʼs story of how they use C++ to share non-UI code between iOS and Android apps…

But fully native development for several platforms is expensive and time-consuming…

the team made the choice to write a large portion of the non-UI code in C++…

C++ is natively supported on iOS…

On Android, calling into C++ can be done through the NDK…

それぞれプラットフォームで一からネイティブでアプリ開発をすると時間とコストがかかるというのは当然のこと。

昨今のHTML5の普及をベースとしたcordova/PhoneGapなどのようなクロス開発ツールはその時間とコストを削減するのに役立つわけだが、彼らはそうしなかった。

UI部分はネイティブで作り、非UI部分を更に下位レイヤーのC++で作るという新しいアイディアを選択した。

C++はiOSではネイティブサポートされるし、AndroidではNDK経由でサポートできる。そしてC++で作ればHTML5などで作るよりも高速で動作する事は明らか。

開発は多少困難になるかもしれないけれど非UI部分は更新が少ないし、一度書いてしまえばパフォーマンスもコストパフォーマンスも高くなるという素晴らしいアイディアだと思う。

UI部分にHTML5を使う場合でも、画像や音などのエンコーディングなどハイパフォーマンスが必要な部分をC++で実装して、プラグイン経由でアクセスするという手法が使えそうだ。

集団的自衛権の議論は本質を捉えない表層の議論。そしてウソにウソを重ねるための議論。

日経14.05.16朝 安保懇報告書の主な内容 集団的自衛権行使を容認

…憲法9条をめぐる憲法解釈は戦後一貫していたわけではない。1946年6月、当時の吉田茂首相は「自衛権の発動としての戦争も、交戦権も放棄した」と述べたが、朝鮮戦争が勃発し、自衛隊が創設されて大村誠一防衛庁長官は54年12月、「自衛のための抗争は放棄していない」と憲法解釈を大きく変えた…

政府は…81年5月の答弁書で、集団的自衛権を有することは主権国家である以上当然だが、行使することは必要参照限度の範囲を越え、憲法上許されないとの見解を示した…

憲法には個別的自衛権や集団的自衛権についての明文規定はなく、個別的自衛権の行使についても政府は憲法改正ではなく憲法解釈を整理することで認めた経緯がある。

こうした経緯に鑑みれば必要最小限度の範囲の自衛権行使には個別的自衛権に加えて集団的自衛権の行使が認められるという判断も政府が適切な形で新しい解釈を明らかにすることで可能であり憲法改正が必要だという指摘は当たらない。…

集団的自衛権の議論は本質を捉えない表層の議論だ。

まず、憲法に集団的自衛権の明文規定が無いのは、そもそも自衛権についての記述が無いからじゃないのか?

日本国憲法第9条 - Wikipedia

  1. 日本国民は、正義と秩序を基調とする国際平和を誠実に希求し、国権の発動たる戦争と、武力による威嚇又は武力の行使は、国際紛争を解決する手段としては、永久にこれを放棄する。

  2. 前項の目的を達するため、陸海空軍その他の戦力は、これを保持しない。国の交戦権は、これを認めない。

小学生がこれをどう読めば日本には自衛権があると読めるの?先生は、親は、この文章で日本には自衛権があると、どのように説明できるのか?

実際、1946年6月に当時の吉田茂首相が「自衛権の発動としての戦争も、交戦権も放棄した」と言ったそうじゃないか。これが誰もが納得する正しい憲法解釈だと思う。

その後、朝鮮戦争などの国際情勢の変化に対応するため、なぜか憲法を「改正」しようとせずに憲法を「解釈」してしまった。これが日本のウソつきの始まりだ。

人は生まれながらに自衛権を持っているように、その人の集まりである国家が自衛権を持つのは当然のことだ。そして自衛という行為には個別的も集団的もなく、自衛のためにはあらゆる手段を使わなければならないというだけのことだ。

つまり、大村誠一防衛庁長官が憲法を「自衛のための抗争は放棄していない」と解釈した欺瞞は行為としては間違っていたが、国防論としては正しかった。

安保懇報告書は「政府は憲法改正ではなく憲法解釈を整理することで認めた経緯がある」から今回もOKだと言っているようだ。笑止。またウソにウソを重ねるつもりなのか。

ただ、当時の大村誠一防衛庁長官同様、やり方は間違っているが、やろうとしている事は正しいと思う。

日経記事より

日経記事より

これらはどれも、人として、国家として、当然のことではないだろうか。

憲法を自衛権の発動としての戦争も交戦権も明確に認めるよう改正すれば、そもそもこんな議論は必要無い。

日本をとりまく状況が時間的余裕を与えてくれないということも重々承知の上だけれども、それならなおさら一刻も早く憲法を改正するために動かなければならないでしょう?

子供にもちゃんと説明できる、正直な国になるんだ。

2014年5月20日火曜日

ブラウザのフルスクリーンAPIのサポートを調べるには?

ブラウザのフルスクリーンAPIのサポートを調べるにはどうしたらいいだろう?

まずはModernizrを使うことを考えたけれど、どうもフルスクリーンAPIサポートのチェックは見当たらない。

Modernizr: the feature detection library for HTML5/CSS3

仕方ないから自分で作ることにした。



この記事があれば各ブラウザで簡単に調べられるから便利かな。

なお、フルスクリーンAPIのサポートは

webkit系:Chrome 15+, Safari 5.1+, Opera15+
moz系:FF10+
ms系: IE11+

となっている。

要するに「モダンなブラウザ」どころか「最新のブラウザ」と言えると思うので、そういうチェックにも使えるかもしれない。

ただし、Safari5.1はフルスクリーン対応だがOS X Lion(10.7以降)のみ対応。
Mac Basics: Safari 5.1

そこだけはチェックしきれていないので注意が必要だ。

2014年5月18日日曜日

「Google Glass」は情報の出力に重点。「JINS MEME」は情報のモニタリングに重点。

日経14.05.14朝 ジェイアイエヌ 居眠り運転防ぐメガネ

メガネ専門店「JINS」を展開知るジェイアイエヌは13日、センサーで目の動きを感知して運転中の居眠り防止などに役立つ眼鏡を2015年春に発売すると発表…

「JINS MEME(ジンズ・ミーム)」は、鼻や眉間に接する部分に計3個のセンサーを搭載。眼球の動きに伴い生じる電位差を測り、8方向の視線移動とまばたきを感知する…

センサーは鼻パッドと一体化し、バッテリーはつるに埋め込んだ…

36グラム。秋には開発者向けに一部データを公開…

連続8時間利用でき、価格は未定。

これはまたGoogle Glassとは全く違う方向性のウエアラブルが出てきましたなぁ



「自分を見るアイウエア」素晴らしいコンセプトだと思う。

Google Glassは主に情報の出力に重点がある。つまり、PCモニタやスマホ画面の代わりだ。しかしJINS MEMEは違う。情報の入力、というよりモニタリングに重点がある。ここが新しい。

Google Glassよりもダンゼン安いだろうしね(^^);

ビデオを見ると心拍計が使えるみたいな映像があるけれど、開発者サイトにあるスペックでは無さそう。

開発者用キット | JINS MEME(ミーム) | JINS - 眼鏡(メガネ・めがね)

とりあえずメアド登録しといたわ。

何でも「視線は8方向検知」というからね。シューティングゲームコントローラーにもなるかもしれないね。

常時アイトラッキングで「自分を見る」眼鏡「JINS MEME」 疲れや眠気を可視化、API公開で開発オープンに - ITmedia ニュース

心配なのは、メガネとしてはちょっと重い36gという重さ。

「人機一体」こそウェアラブルの本質——JINSがまんま“メガネ”の新デバイス「JINS MEME」を2015年春に発売 | TechCrunch Japan

今の自分の眼鏡は17gだから2倍以上の重さになる。まぁメリットを考えれば許容範囲かな。

今からとても楽しみなウェアラブルデバイスだね(*^_^*)

日本の電気料金は米国の2.5倍。3.11以降日本は急上昇、米国はフラットライン。

日経14.05.12朝 電気料金 米の2.5倍 企業向け 震災前から25%上昇

日本の企業向け電気料金の国際的にみた割高感が強まってきた…

原子力発電所の稼働停止で燃料費が増えたのが最大の要因だが、電力会社の高コスト体質が影響している面もある…

米国はシェールガスの産出が始まりコストが安い…

日本が13年7月〜9月に買った天然ガスの価格は米国の4.5倍だった。電力会社が産ガス国と長期契約を結んでLNGを購入しているのも高止まりの一因だ…

発電所や送電線を修繕する費用も割高とみられる。経産省によると、日本の修繕費は、米カリフォルニア州の7倍超、韓国の3倍超…

日経記事より

これはちょっとハンパじゃないなぁ…

色々理由はあるけれど、グラフを見るとやっぱり急上昇したのは東日本大震災以降だから原発の停止は大きいと思う。

ここでさらに思うのは、原発停止によって天然ガスの価格で足元を見られてる可能性があるということ。

原発の再稼働でも、自然エネルギーでも、メタンハイドレートでも、とにかく何でもいいからエネルギー源のオルタナティブをつくらないと、永遠に産出国に足元をみられ続けるだろう。

その結果、日本の国力は徐々に衰退し、我々日本人は徐々に不幸になっていく。

それにひきかえアメリカのこの安さとフラットさ。これが超大国ということなんだなぁ。

「中国にとってウイグル問題とは何か?」日経の分かりやすい記事

日経14.05.11朝 ウイグル先鋭化の恐れ 中国強硬、背景にエネルギー

…中国にとってウイグル問題とは何なのでしょうか?…

中央政府との対立が続いているのがウイグルとチベットです。両民族に共通するのは強い信仰を持つ宗教があることです。ウイグル族はイスラム教、チベット族はチベット仏教です。中国共産党はもともと宗教を認めず、文化大革命(1966~76年)の期間中は、仏教寺院を壊し、仏像の首をはねたり、モスクをつぶしたりする弾圧が行われました。90年代以降は道教、仏教、イスラム教、カトリック、プロテスタントなどを認める政策がとられています…

無神論の共産党とイスラム教とはもともと水と油…

中国共産党は軍事的な弾圧、漢民族の入植政策という「ムチ」、財政支援、投資などの「アメ」の2面的な政策でコントロールしようとしてきました。それが行き詰まっている…

ウイグル族にとっては、大きな事件を起こすことで、中国政府の抑圧に対する反発、挑戦を世界に知らせる目的があるとみられています。では、中国がウイグル族に対して妥協的な姿勢を取り、衝突の沈静化を図れないのはなぜでしょうか?そこには中国のエネルギー安全保障という大きな課題…

エネルギーの大産出地帯であり、輸入エネルギーの通り道となっているのが新疆ウイグル…

新疆は天然ガスの生産では全国トップ…

中国はトルクメニスタンからのパイプラインによる天然ガス輸入も急増させていますが、そのパイプラインは新疆ウイグルの真ん中を貫いて運ばれているのです。またカザフスタンなどから天然ガスや原油を輸入する構想もありますが、そのほとんどはやはり新疆ウイグルを通ることに…

中国はウイグル族にエネルギーののど元を押さえられており、それゆえにウイグル族を強く押さえつけざるを得ない…

(編集委員 後藤康浩)

非常に分かりやすい記事だと思う。

なるほどね。ウイグルは天然ガスの産地であるとともに、パイプラインの通り道なのか。それは押さえておきたいよな。

この記事を読んで改めて思うのは、世界は相変わらずエネルギー問題によって悲劇が起きているということだ。

もし中国に他国を侵略しなくてもいいだけの十分なエネルギーがあったら?ウイグルの悲劇は起こらなかったかもしれない。尖閣だって、南沙諸島だってそうだ。

今も昔もエネルギー問題は安全保障問題。もし日本が大量に安いエネルギーを開発して隣国に分けてあげることができるなら、それこそ積極的な平和外交になる気がするんだけど、やっぱり夢かなぁ…

この記事はもともと電子版だったので、日経に登録すれば全文を読める。

ウイグル 先鋭化の恐れ 中国強硬、背景にエネルギー :日本経済新聞

映画「いわきノート」筑波大学学生取材による現場の生の声。丸克商店のおばちゃんインタビューの再生回数26回とか(T_T) みんなもっと見てあげて〜

日経14.05.09夕 いわきノート

福島第1原発に最寄の都市、いわき市で暮らす人々に筑波大学の学生たちが取材したドキュメンタリー。風評被害や除染の遅れ、避難の長期化。若い取材者に被災地の人々が心を開き、率直に話をしている。 ★★★(古)

まずはトレイラー。



筑波大学の学生たちが映画を撮っているということで、いわきの人たちが心を開いて率直に話しているというのがいいじゃないか。

サイトはここですなぁ。

ドキュメンタリー映画『いわきノート』

このサイトの中で、インタビュー集みたいなページがある。ここがおもしろい。

いわきの漁港の近くのトンネルの前に「丸克商店」という比較的大きなお魚屋さんがあるんだけど、そこのおばちゃんがインタビューに答えている。



まさしく生の声だなぁ。この前行った時は見て終わっちゃったけど、今度は買うからさ!

で、再生回数を見ると何と26回!みんなもっと見てあげて〜(T_T)

上のトレイラーだって5000回程度。いまどきの映画興行の難しさなんだろうか。メディア掲載一覧を見ると、結構掲載されているように思うんだが。

まぁ日経で載ったと言っても2cm×4cmくらいのベタ記事だから、他でもそんな感じだったのかもしれない。

それとも、これが「風化」というものなのだろうか。

「まだ終わってないぜ。現場ではまだON GOINGだぜ。」ということを思い出させてくれる映画だと思うんだけど、注目されないんじゃなぁ…

微力ながら、この記事が誰かの目にとまって再生回数が1回でも伸びることを願う。

全国初「寄生型サイト」運営者が著作権法違反容疑で逮捕

日経14.05.09朝 「ニコ動」音楽不正利用 容疑の元サイト運営者逮捕

「にこ★さうんど#」というサイトで「ニコニコ動画」の動画から音楽ファイルを抜き出し不特定多数の人にダウンロードさせた…

2008年1月から今年2月の閉鎖までに…広告収入は約1億3200万円あった…

アクセス数に応じた広告を目的に他サイトで公開中の音楽などを無料でダウンロードさせるサイトは「寄生型サイト」と呼ばれる。JASRACによると、同サイトの運営者が著作権法違反容疑で逮捕されたのは全国初…

昔から海外にも似たようなサイトあるけど、著作権問題やクリエイターに対するリスペクト問題などの前に、API利用規約違反だろう。

このサイトだけで1億円以上も稼ぎ出していたというのは大したものだけど、結局アコギな商売をすればこうなるよね。

まぁ勝手にしろと言いたいところだが、こういう輩が出てくると開発者としては迷惑なんだ。なぜなら、無駄にAPI利用制限が厳しくなりかねないから。

ニコ動は角川と経営統合したようだから、これからただでさえAPI利用制限が厳しくなるだろうにさ…

廃人養成スタンド「ちょっと持って手!」

日経14.05.09朝 腕疲れず寝ながら動画

サンコーの寝転んだままスマートフォン(スマホ)などを利用できる…

両手が自由になるため腕が疲れずに長時間動画などを楽しめる…

スタンドの土台となる天板を枕や布団の下に置いて使用する…


これは…

ネット上で同じことを考えた人がプロトタイプを作っていたけれど、メーカーが本気で作ったのか。

「枕や布団の下に置いて」とあるから、これはもう布団で仰向けで一日中死んだようにHuluを見続けるとか、そいういうコースを想定しているのだろう。

サンコーやっちまったな。日本は少子高齢化だというのに、さらに生産人口を下げてどうする?

でも、風邪ひいた時とかにはいいかな?ダメ?


2014年5月17日土曜日

「えび~にゃ」サイダーかぁ

日経14.05.08朝 「えび~にゃ」サイダー販売 特産品使った新商品

神奈川県海老名市のイメージキャラクター「えび~にゃ」をあしらったサイダーと酢がお目見えした…

「いちごわいん」を使った新たな炭酸飲料…

いずれも市内の酒店など約20店舗で販売している。

「えび~にゃ」サイダーかぁ。どうやらいちご風味らしいね。ちょっと気になるね。

海老名の「地サイダー」誕生 | 海老名 | タウンニュース

いや、どちらかというと「いちご酢」の方が興味あるかな。どんな味だろうね?今度海老名に行ったら買ってこよ。

「美味しんぼ」に対する双葉町の残念な抗議

日経14.05.08朝 福島・双葉町が抗議 「美味しんぼ」鼻血描写

小学館「週刊ビッグコミックスピリッツ」の漫画「美味しんぼ」が、東京電力福島第1原発を訪れた主人公らが鼻血を出すなどの描写をした問題で、福島県の双葉町は7日、小学館に対し「県民への差別を助長させる」との抗議文を出した。

双葉町が美味しんぼに対して不快感を持っているのは間違い無いね。無理も無いと思う。

大体、ちょっと福島第1原発に行ったくらいで鼻血が出るほど放射線を浴びるか?一体何シーベルト浴びたんだ?それが作者の言う「真実」か?

なら福島第1原発で対処にあたっている人々はみんな鼻血ブーじゃないのか?福島の人たちよりよっぽど放射線を浴びている宇宙飛行士の若田さんも鼻血ブーじゃないのか?

双葉町の元町長の井戸川克隆氏は最近、恥ずかしげもなく汚ったねぇ自身の鼻血ティッシュ画像を公開していた。

元双葉町長、美味しんぼ問題で「鼻血証拠写真」をFacebookにアップ|| ^^ |秒刊SUNDAY

そんなに鼻血が出るのであれば、とにかく医者へ行けと言いたい。そして、その鼻血が放射線によるものだという診断書を複数の医師から取ってきて欲しい。話はそれからだ。

しかし、双葉町が小学館に抗議文を出したというのはどうだろう?

日本は表現の自由が保証されている国だ。描くなとも言えないし、出すなとも言えないはず。小学館に抗議文を出すということは、「出すな」の圧力になるだろう。そして、実際に休載となったようだ。

美味しんぼ問題で編集部「批判受け止める」と見解 次号から休載へ (1/2ページ) - 芸能社会 - SANSPO.COM(サンスポ)

もっと違った対応の仕方は無かったのだろうか。だからと言って他にどのような対応があっただろうか。抗議でなく、国民に対する声明文を出すとか?

とにかく、このような単なる抗議では一つ間違えば「双葉町が言論の自由を脅かした」と言われかねない。そこが残念だ。

もし「美味しんぼ」が「真実だ」と言いながらウソばかり書いているなら、いずれ自然淘汰されるだろう。

わざわざ政府や自治体が出て行かなくても、読者が判断するさ。

呼子は「イカの町」だと思っていた。実は「クジラの町」だった。

日経14.04.30夕 呼子支えた鯨王 佐賀・唐津市 捕鯨で繁栄、旧跡巡る

佐賀県呼子(よぶこ)と聞き、何を思い浮かべるだろうか。日本3大朝市の街ともいわれ、昨今はイカの名産地として知られている。ただ時代をさかのぼると町は捕鯨とともに反映してきた。昭和30年代にその歴史は幕を閉じたが、往時をしのぶ旧跡が今もひっそり残っている…

港に近い朝市通り…買い物目当ての観光客は素通りしてしまうが、通りの入り口に朝市の歴史を記す立て札がある…

捕鯨が途絶え、それに代わる名物を地元の人達が探しタイを経てイカに至った…

朝市を抜けると「鯨組主中尾家屋敷」がある。築280年の商家だ…

遅くとも1600年代には呼子で捕鯨は始まっていたらしい…

中尾家は瞬く間に財を築き、呼子も発展した…

実際に漁の拠点となったのは沖合約7キロにある小川島だ。呼子港から船で約20分。島の高台に鯨見張所がある…

(編集委員 石塚由紀夫)

日経記事より

呼子に連れて行ってもらったことがある。イカが大好きなので、新鮮なイカを食べさせたいという心遣いだった。

美味しかったなぁ(*^_^*) それ以来、呼子と言えば「イカ」となった。

しかし、その名物のイカは最近で、その前はタイ、その前はクジラだったとは!

今度はまたイカを食べに行きながら、タイやクジラ漁の痕跡を訪ねてみたい。

2014年5月16日金曜日

中国漁民は「海上民兵」と考えるべし。軍事訓練+燃料費補助+特別手当が受けられる。

日経14.04.21朝 実効支配へ漁民動員 原油輸送路確保も狙う

中国は南シナ海のほぼ全域の領有権を主張し、様々な方法で領有権の既成事実化を進めている…

地元政府は実効支配を進めるため、漁民が遠洋に行く船の燃費の一部として年20万〜50万元(約330万〜820万円)を与え、南シナ海での漁を活発にするように仕向けている。フィリピンなどに近い海域での漁には特別手当を出す。漁民の一部は「海上民兵」の役割を兼ね、銃の射撃など簡易な軍事訓練を受ける…

そうじゃないかと思ってはいたけれど、やはり中国漁民は「海上民兵」と考えるべきだね。

燃料費の補助が受けられるだけでなく、フィリピン近海など狙っている近いところに行くなら特別手当を貰えるらしい。

しかも軍事訓練も受けているようだ。

これが漁民か?ウソだぁ〜

でも、これが沖縄が直面している現実なんだろうね。

日本海側も含めたメタンハイドレート調査拡大

日経14.04.16朝 日本海など5ヶ所調査 メタンハイドレート

経済産業省は15日、次世代の国産エネルギー源として期待される「メタンハイドレート」の資源埋蔵量の調査を始めた。調査対象は日本海の海底など五ヶ所で、2ヶ所だった昨年から増やした。6月中旬まで音波を使って海底の地形や地質構造を把握。6月以降はメタンハイドレートを含んだ地層をサンプルとして採取する。

政府はついにメタンハイドレートの開発に本腰を入れてきたのかな?

「音波を使って」とあるから、きっと青山千春博士の特許技術を使った方法で調査をするんだろうけど、先輩へのリスペクトを忘れないで欲しいね。

AngularJSのバインディングに連動したフォームの検証(日付ピッカー)

先日、AngularJSのバインディングに連動したフォームの検証(日付)サンプルを書いた。

琴線探査: AngularJSのバインディングに連動したフォームの検証(日付)サンプル

しかし、HTML5のDATE型の入力はブラウザによって日付ピッカーが出たり出なかったりするので、HTML5に依存しない形で作ろうと考えた。

日付ピッカーは探すと色々あるけれど、AngularJSとBootstrapを使っているということでこちらを使わせていただくことにした。

Angular Bootstrap Datetime picker
dalelotts/angular-bootstrap-datetimepicker · GitHub



琴線探査: AngularJSをとりあえずやってみたい人のための簡単サンプル集

2014年5月15日木曜日

SoundCloud「JavaScript SDK version 2」の変更点

Update 14.05.28: I wrote English version.
琴線探査: Changes in SoundCloud「JavaScript SDK version 2」

先日SoundCloudから「JavaScript SDK version 2」をリリースするよーというアナウンスがあった。

Backstage Blog - Introducing JavaScript SDK version 2 - SoundCloud Developers

JavaScript SDK version 1 is now deprecated and will be permanently replaced by version 2 on July 1, 2014.

7月1日にver.1はver.2で永久に置き換わるとあるので、急がなきゃなと思っていた。

アップグレードガイドも出ていた。

Upgrading to JavaScript SDK 2.0.0 - SoundCloud Developers

We've done our utmost to make the upgrade to version 2.0.0 as seamless as possible. Everything should work as it did before, but please be sure to test before deploying your application.

「全て以前のように動くはずだから」というので少し安心したが、実際にやってみたらトンでもない!開発者は急いだ方がいい。

まずおかしいなと気づいたのは、これまであったmute()とunmute()が無くなっていたこと。これらはver.1のSDKが内部的に使っていたSoundManager2のメソッドだ。

SoundManager 2: Documentation

さらにおかしいなと思ったのは、onplayとかonfinishなどのイベントコールバックが効かなくなっていたこと。

色々と調べていくと、どうやらver.2はSoundManager2を使うのをやめて「AudioManager」というのを使うようになったようだ。

javascript - Options passed to Soundmanager (via Soundcloud JS SDK) not being used - Stack Overflow

実際に「http://connect.soundcloud.com/sdk-2.0.0.js」の中を見てみると、以前あったSoundManagerの記述はなく、AudioManagerが使われていることが確認できた。こんな感じで。

SC.Helper.loadJavascript(audioManagerURL + "/audiomanager.js"

このAudioManagerというのは何なのか?ドキュメントが見当たらないので解析するしか無い(ノ∀`)

まず、これまでSoundManager2だったものはどのようになったのか?

SC.stream("/tracks/" + id,
          {
            onfinish:onPlayerPlayComplete,
            onpause:onPlayerPause,
            onplay:onPlayerPlay,
          },
          function(soundManager2) {
            playerSC = soundManager2;
            playerSC.play();
          }
         );

ここで返ってくるsoundManager2をconsole.dirしてみると、ほとんど機能が無いことに気づく。

getCurrentPosition: function (){return this._player.getCurrentPosition()}

getDuration: function (){return this._player.getDuration()}

getLoadedPosition: function (){return this._player.getLoadedPosition()}

getState: function (){return this._player.getState()}

getType: function (){return this._player.getType()}

getVolume: function (){return this._player.getVolume()}

pause: function (){return this._player.pause()}

play: function (position){if(this._player.getState()==="loading"||this._player.getState()==="initialize"){return this._player.on("stateChange",function(state){if(state==="idle"){return this.play()}})}else{return this._player.play()}}

seek: function (ms){return this._player.seek(ms)}

setVolume: function (volume){return this._player.setVolume(volume)}

stop: function (){this._player.pause();return this._player.seek(0)}

確かにmute()とかunmute()とか無いわぁ〜(^^);

それぞれのメソッドの中を見ると、「_player」というのがAudioManagerのようだ。これをconsole.dirしてみる。あまりに長すぎるのでメソッド名だけ。

bind
getCurrentPosition
getDuration
getErrorID
getErrorMessage
getId
getLoadedPosition
getMute
getState
getType
getVolume
isInOneOfStates
kill
listenTo
listenToOnce
off
on
once
pause
play
preload
resume
seek
setMute
setVolume
stopListening
toggleEventListeners
trigger
unbind
updatePositions

こちらの方にはsetMute(boolean)というメソッドがある。実際に使ってみたら効いた。なのでラッパーオブジェクトは捨てちゃって、こうしていいと思う。

SC.stream("/tracks/" + id,
          function(player) {
            playerSC = player._player;
            playerSC.play();
          }
         );

残る大きな問題はonfinishとかのイベントコールバックをどうするかだけど、playerSC.on("stateChange", function(evt){});でいけた。

SC.stream("/tracks/" + id,
          function(player) {
            playerSC = player._player;
            playerSC.on("stateChange", function(evt){
              console.log(evt);
            });
            playerSC.play();
          }
         );

このevtオブジェクトは文字列。一曲流して動きを観察してみたところ、こんな感じのイベントが来てた。

loading
playing
paused
ended

つまり、こういうことだろう。

SC.stream("/tracks/" + id,
          function(player) {
            playerSC = player._player;
            playerSC.on("stateChange", function(evt){
              console.log(evt);
              switch(evt) {
                case "ended":
                  onPlayerPlayComplete();
                  break;
                case "paused":
                  onPlayerPause();
                  break;
                case "playing":
                  onPlayerPlay();
                  break;
              }
            });
            playerSC.play();
          }
         );

うまくいった。

その他、気づいた範囲で変更点を挙げていこう。

setVolume():0〜100だったのが0〜1.0に
unmute():setMute(false)
mute():setMute(true)
stop():pause() + seek(0)
position:getCurrentPosition() msecで返ってくる。
duration:getDuration() msecで返ってくる。
bytesLoaded:無し。getLoadedPosition()で代用。msecで返ってくる。
bytesTotal:無し。getDuration()で代用。
setPosition():seek() seek中には「seeking」イベントがstateChangeで飛んでくる

今のところ以上!ふぅ(´-`)

追記14.05.26:さらに詳しい分析
琴線探査: なぜSoundCloud「JavaScript SDK version 2」ではautoplayやonfinishなどのオプションを受け付けなくなったのか?の分析

AngularJSをとりあえずやってみたい人のための簡単サンプル集

AngularJSをとりあえずやってみたい人のためのごく簡単なサンプル集を作った。

JavaScriptはほとんど使っていなくて、主にAngularJSの機能とHTML側のコーディングだけでできる。

JavaScriptやjQueryのDOM操作の経験者なら、AngularJSを使うことでいかに楽になるかが分かると思う。

琴線探査: AngularJSの値のバインディング(自動挿入)サンプル

琴線探査: AngularJSのバインディングに連動した要素の表示・非表示サンプル

琴線探査: AngularJSのバインディングに連動した要素の操作可・不可のサンプル

琴線探査: AngularJSのバインディングに連動したフォームの検証(NULLチェック)サンプル

琴線探査: AngularJSのバインディングに連動したフォームの検証(正規表現)サンプル

琴線探査: AngularJSのバインディングに連動したフォームの検証(日付)サンプル

琴線探査: AngularJSのバインディングに連動したフォームの検証(フォーム全体)サンプル

追記14.05.16
琴線探査: AngularJSのバインディングに連動したフォームの検証(日付ピッカー)

2014年5月14日水曜日

AngularJSのバインディングに連動したフォームの検証(フォーム全体)サンプル

AngularJSのバインディングに連動したフォームの検証(フォーム全体)サンプル。他にライブラリが要らないところがいいわな。



琴線探査: AngularJSをとりあえずやってみたい人のための簡単サンプル集

AngularJSのバインディングに連動したフォームの検証(日付)サンプル

AngularJSのバインディングに連動したフォームの検証(日付)サンプル。いまいち動かないブラウザもあり。やっぱChromeがベスト。



琴線探査: AngularJSをとりあえずやってみたい人のための簡単サンプル集

追記14.05.16:HTML5に依存しない日付ピッカーバージョンも書いた

琴線探査: AngularJSのバインディングに連動したフォームの検証(日付ピッカー)

AngularJSのバインディングに連動したフォームの検証(正規表現)サンプル

AngularJSのバインディングに連動したフォームの検証(正規表現)サンプル。HTMLで正規表現パターンを指定できるってすごくね?



琴線探査: AngularJSをとりあえずやってみたい人のための簡単サンプル集

AngularJSのバインディングに連動したフォームの検証(NULLチェック)サンプル

AngularJSのバインディングに連動したフォームの検証(NULLチェック)サンプル。requiredするだけでいけるぜ!



琴線探査: AngularJSをとりあえずやってみたい人のための簡単サンプル集

AngularJSのバインディングに連動した要素の操作可・不可のサンプル

AngularJSのバインディングに連動した要素の操作可・不可のサンプル。jQueryなどを使うより断然簡単!



琴線探査: AngularJSをとりあえずやってみたい人のための簡単サンプル集

AngularJSのバインディングに連動した要素の表示・非表示サンプル

AngularJSのバインディングに連動した要素の表示・非表示サンプル。jQueryなどを使うより断然簡単!



琴線探査: AngularJSをとりあえずやってみたい人のための簡単サンプル集

AngularJSの値のバインディング(自動挿入)サンプル

AngularJSのバインディングでHTMLに値を自動挿入するサンプル。jQueryなどを使うより断然簡単!



琴線探査: AngularJSをとりあえずやってみたい人のための簡単サンプル集

2014年5月11日日曜日

映画「チョコレートドーナツ」★★★★★出た。ゲイのカップルが育児放棄されたダウン症の子を育てる物語。

日経14.04.11夕 チョコレートドーナツ 愛の意味、魂の自由を問う

…ゲイのカップルが、母親に育児放棄された知的障害児を引き取り、困難を超えて育てようとする…

ゲイのダンサー、ルディ…検察官のポール…ダウン症の少年マルコ…

暖かな愛を受け、マルコの表情に生気がが宿る。ドーナツばかり食べていたのに、まともな食事を取り始める…

2人がゲイであることが世に知られ、当局はマルコを強制的に施設に送る。ポールは解雇される…

ルディの歌う「アイ・シャル・ビー・リリースト」が心に響く。トラヴィス・ファイン監督…

★★★★★ (編集委員 古賀重樹)

ここだね。

映画『チョコレートドーナツ』 オフィシャルサイト

まずはこのトレイラーを見てみよう。



「ぼくのうち?」
「そうよ ここがおうちよ」

(T_T)

「ここがあなたのおうちだよ。あなたの居場所だよ。ずっと居ていいんだよ。」と言われることほど安心することは無いよね。

トレイラーをみただけで「あ、これは名作だわ」と直感できる。

今一番見たい映画だけど、是非映画館で見たい!という映画では無いかな(^^);

2014年5月7日水曜日

Mac OS X Mavericks‎でPHPを使う

Mac OS X Mavericks‎でPHPを動かしたくなったのでやってみた。

聞いてはいたけど、Macには始めからApacheとPHPがインストールされているのでインストールするものは本当に何も無かった。設定ファイルを少し書き換えるだけでいい。Windowを考えたら本当に簡単だ。

設定ファイルは/private/etc/apache2/httpd.confだ。オリジナルをコピーしておこう。

# cd /private/etc/apache2/
# sudo cp httpd.conf httpd.conf.orig

編集しよう。viでもemacsでもいい。

# sudo emacs httpd.conf

まずPHPを使えるようにする。デフォルトではPHPが使えないように設定がコメントされているので、その行のコメントをはずす。118行目だった。

LoadModule php5_module libexec/apache2/libphp5.so

デフォルトの設定では

DocumentRoot "/Library/WebServer/Documents"
ErrorLog "/private/var/log/apache2/error_log"
CustomLog "/private/var/log/apache2/access_log" common

となっている。

これらの場所はアクセスしにくいし、ログを切り分けて問題解決をしやすくしたいので、ポート8000のバーチャルホストを立てることにした。

バーチャルホストの設定を追加する。DocumentRootやErrorLog、CustomLogは任意の場所でいい。

## 独自設定(ポート8000バーチャールホスト)
Listen 8000
<VirtualHost *:8000>
    DocumentRoot "/Users/jun/var/htdocs"
    ServerName localhost
    ErrorLog "/Users/jun/var/log/apache-error.log"
    CustomLog "/Users/jun/var/log/apache-access.log" common
    DirectoryIndex index.php index.html
    <Directory "/Users/jun/var/htdocs">
        Options Indexes Includes FollowSymLinks
        AllowOverride All
        order deny,allow
        allow from All
    </Directory>
</VirtualHost>

ただし、「/」からDocumentRootに至るまでの全てのディレクトリのパーミッションが755になっているかチェックした方がいい。でないとアクセスが拒否される。自分の場合、/Users/junのディレクトリは755になっていなかったので

# sudo chmod 755 /Users/jun

でパーミッションを変更した。

設定はこれで終了。Apacheを起動する。

# sudo apachectl start(起動)
# sudo apachectl restart(再起動)
# sudo apachectl stop(停止)

テストのため、/Users/jun/var/htdocs/index.phpを次のように作成する。

<?php
phpinfo();
?>

ブラウザで

http://localhost:8000

にアクセスすればPHPのバージョンなどが表示され、PHPが動作していることを確認できるはずだ。

あとはhtdocsの中にどんどんHTMLやPHPなどのファイルを置いていけばいい。

ただ、プロジェクトによってhtdocsの中味を簡単に他のディレクトリに切り替えたくなるだろう。その場合はシンボリックリンクをはっておくといい。

# ln -s ターゲットディレクトリ /Users/jun/htdocs

そうすればhttpd.confを設定し直さなくても、シンボリックリンクを切り替えるだけで中味が入れ替わる。ここでも、「/」からターゲットディレクトリに至るまでのディレクトリのパーミッションが755になっているかどうか注意が必要だ。

Macは楽だねぇ(*^_^*)

2014年5月6日火曜日

Adobe Bracketsのおすすめプラグイン

なぜかいきなりAdobe Bracketsのおすすめプラグインをまとめる。

<<必須>>
brackets-autoindent-extension(自動インデント。知る限り最もクセが無い。)
brackets-quick-search(単語ダブルクリックで同じ単語をハイライト)
brackets-StripTrailingSpaces(行末スペース自動削除)
Reasonable Comments(/**/コメントを書きやすくする)
Rename JavaScript Identifier(リファクタリング的なの)
String Convert(ダブルクオーテーションとシングルクォーテーションの相互変換)

<<入れといた方がいい>>
Goto Last Edit(直前に編集した所に戻る)
Brackets Bookmarks(Goto Last Editより柔軟)
Todo(コメントでTODOリスト)
CSSLint
JSHint(JSLintほどうるさくない)
W3CValidation(HTMLのlint)
Autoprefixer(CSSのベンダープレフィックスを補完してくれる)

<<特殊かな?>>
LESS AutoCompile(LESSを使うなら)
Minifier(min.jsをつくるやつ)
SVG Preview(SVGをゴリ書く人へ)
Swatcher(LESSのカラーパレットを一覧できるのがいい)

とりあえずこんな感じ。

2014年5月5日月曜日

EPSONのランニングウォッチ「WristableGPS SF-710S」でWahooの心拍計「Blue HR」は使えるか?

NIKE+からRunKeeperと移行してきた。その間、走る距離が伸びた。そして色々考えた。

やはりスマホではフルマラソンを計測できない!

そこで狙っていたのはGARMIN620。しかし、いつまで経っても日本版が出ないので、EPSONのランニングウォッチ「WristableGPS」を買ったった!

WristableGPS SF-710S|製品情報|エプソン



今見たら、1週間くらい前に620Jが出たようなんですが…ドンマイ!(^^);



一番心配だったのは、RunKeeperと一緒に使ってたWahooの心拍計「Blue HR」は使えるか?というところ。



もちろん専用の心拍計もあるんだけど高いし、専用のも同じBluetooth LE仕様だから使えるんじゃないの?と思って賭けてみた。


使えるじゃんよ!(^O^)

最後に、GARMIN620JとWristableGPS710S、どちらにしようか迷ってる人に一言アドバイスするなら、

「710Sのハードウェア自体はサイコーだけどアプリとサイトはサイテーである」

ということだろう。

特にMacな人は注意したほうがいい。ファームウェアのアップデートはWindowsでしかできない。ファームウェアのアップデートで相当反応速度が上がったので、ファームウェアのアップデートは必須だ。デスクトップPC用のアップローダーソフトもWindowsのみ。

そして、Windowsが必要とされながら現時点ではスマホのアプリがiPhone用しか無いというちぐはぐさ(^^);

さらに、サイトの分析機能もほとんど役に立たないと思った方がいい。RunKeeperを使っていた人は間違い無くガッカリするだろう(^^);

しかしながら、710Sのストライドセンサーは非常に気に入っている。GPSを掴めないようなビルなどに入ってもある程度正確に距離が計測できるから。

620はハートレートモニター側にストライドセンサーが入ってるようだけど、710Sは単体で計測できる。これは買い物しながらのウォーキングなどに最適なのである。

The choice is YOURS!

CDをパソコン無しでAndroidに直リップできるドライブ - IOデータ「CDレコ」(・∀・)イイネ!!

日経14.04.09朝 CDの曲、直接スマホに アイ・オー・データが装置 パソコン不要

…CDの楽曲を直接取り込める装置を4月下旬に発売する。従来はパソコンを介する必要があったが、不要になる…

対象は…「アンドロイド」を搭載したスマホやタブレット。あらかじめ専用のアプリ…を入れ、ケーブルでつないだ装置にCDを入れれば取り込みが始まる…取り込んだ曲の名前をインターネとから自動で取得する機能も搭載…

想定価格は8千円…

再生に専用アプリは不要…

もはやCDをリップするのにPCを立ち上げるのダルいからこれは(・∀・)イイ!!

これだね。「CDレコ」というらしい。

CDRI-S24A | CDドライブ | IODATA アイ・オー・データ機器

再生に専用アプリが要らないということは、リップ後には普通にmp3か何かをローカルドライブかSDに書き込む仕様だと思われ。

ということは、そのままクラウドストレージに転送することもできるだろう。

もうすでに販売中で、実勢価格はやはり8000円程度らしい。

価格.com - IODATA CDレコ CDRI-S24A 価格比較

うちのMacのCDドライブはレーザーが弱ってCDをリップできなくなったので、もうこれを買うべきかもな。

下関の塩くじらが心配

日経14.04.05夕 南極海で活動の捕鯨船団が帰港 下関

…国際司法裁判所…3月31日、日本に南極海での調査捕鯨停止を命じる判決を言い渡しており、今後、再開できるかどうかは不透明…

政府は判決を受け入れる方針…

非常に残念だけど、法治国家である日本はいかなる理由があったとしても世界の法律を破るわけにはいかない。政府の判決を受け入れる方針はやむを得ないと思う。

しかし、捕鯨を生活の糧としている人たちが心配だ。先日、たまたま下関へ行ってくじらベーコンと塩くじらを買ってきたんだけど、これを見てほしい。


例えば、この塩くじらを作っている「マル幸商事」さん。バッチリ「調査捕鯨品」と書いてあるのが分かるだろう。

つまり、もうこの塩くじらは作れなくなるし、売れなくなるし、食べられなくなる。ということは、特に捕鯨を生活の糧としている人たちが困る。

市場で買ったので知らなかったんだけど、マル幸商事さんは「長州くじら亭」というレストランもやってるらしい。これどうすんの?

味処 長州くじら亭 - 水産物加工卸売、くじら、ふぐ、かに商品の販売|山口県下関市のマル幸商事株式会社

ひとまず判決を受け入れるとしても、このままでいいのだろうか…

まず「調査捕鯨」というごまかしをやめたらどうだろう。むしろ相手につけいるスキを与えてしまっているのではないだろうか。