javascriptにもオブジェクトやクラスという概念があります。
書き方がいっぱいあって、なんともしっくりこない最近ぼんやりとわかるようになってきました。
実行すると、cのクラスで定義されているalertボックスが表示されます。
とりあえず紆余曲折あったもののこの形が僕としては一番気に入った感じ。
会社でのプログラムにもいれてみた。
ただし、eclipseやAptanaStudioの入力支援では、継承元のメンバ関数がよばれてくれない等、やりにくい部分が若干あるみたい。
うーん。
2012年4月24日火曜日
jqmobiに対応したcolorPicker作りかけ。その２
jqmobiの関数をつかいまくってつくったバージョンのcolorpickerをつくってみました。
まだ、パネルの内容がおおきくなってスクロールしてしまうときの処置(スクロール停止)がはいっていませんが、それ以外はおおむねできたとおもってる。
まだ、パネルの内容がおおきくなってスクロールしてしまうときの処置(スクロール停止)がはいっていませんが、それ以外はおおむねできたとおもってる。
Color Picker for jqmobi - jsdo.it - share JavaScript, HTML5 and CSS
どうでっしゃろ？2012年4月23日月曜日
jqmobi scrollerスクロールを一時的にできなくする。
jqmobi用のcolor pickerをつくっているときにでてきた問題。
colorを選択するときに、スライドさせると、scrollがきいているパネルだと、スクロールしてしまう・・・
こんなときの対処法がboolScrollLockです。
やり方。
自分でscrollerをつけた場合。
$("#(対象ID)").scroller();で再度scrollerオブジェクトが取得できるので
$("#(対象ID)").scroller().boolScrollLock = true;で抑制できます。
再度スクロールさせたい場合は
$("#(対象ID)").scroller().boolScrollLock = false;で解除できます。
jq.uiで自動的に追加されたパネルの場合
$.ui.scrollingDiv["パネルのID"].boolScrollLock = true / false;で制御できます。
ポイントはパネルIDの前に#をいれないこと。
あと、自分でscrollerをつけた場合、初期化時の応答でscrollerオブジェクトが返されるのでそれを保持しておくのもありです。
なお、$("#a > div")みたいな感じで子要素にscrollerをつけてしまい、かつ子要素がid未指定の場合は、取得できなくなってしまうので、初期化時の応答scrollerを保持しておかないと動作がおかしくなりますので、ご注意を・・・
colorを選択するときに、スライドさせると、scrollがきいているパネルだと、スクロールしてしまう・・・
こんなときの対処法がboolScrollLockです。
やり方。
自分でscrollerをつけた場合。
$("#(対象ID)").scroller();で再度scrollerオブジェクトが取得できるので
$("#(対象ID)").scroller().boolScrollLock = true;で抑制できます。
再度スクロールさせたい場合は
$("#(対象ID)").scroller().boolScrollLock = false;で解除できます。
jq.uiで自動的に追加されたパネルの場合
$.ui.scrollingDiv["パネルのID"].boolScrollLock = true / false;で制御できます。
ポイントはパネルIDの前に#をいれないこと。
あと、自分でscrollerをつけた場合、初期化時の応答でscrollerオブジェクトが返されるのでそれを保持しておくのもありです。
なお、$("#a > div")みたいな感じで子要素にscrollerをつけてしまい、かつ子要素がid未指定の場合は、取得できなくなってしまうので、初期化時の応答scrollerを保持しておかないと動作がおかしくなりますので、ご注意を・・・
2012年4月22日日曜日
jqmobiに対応したcolorPicker作りかけ。
ColorPickerをつくったので、せっかくなのでwebアプリに対応してみたい。
というわけで、iphone上でも、スクロールせずに動作するように調整してみました。
とりあえず動作はできましたが、jqmobi用で使うには、jqmobi用にカスタマイズしないとだめっぽい。
スクロール動作がうまく禁止にできんわ。これ。
現状では、jqmobiを使わないサイトでは、普通に動作。jqmobiをつかった場合はスクロールがあると動作がおかしくなる。という感じになりました。
ほぼ１日これにかかりっきりだったのにできなかったのが非常に残念。
このColorPickerを利用して、お絵描きするwebアプリや、待ち合わせ支援のwebアプリを作る予定です。
というわけで、iphone上でも、スクロールせずに動作するように調整してみました。
とりあえず動作はできましたが、jqmobi用で使うには、jqmobi用にカスタマイズしないとだめっぽい。
スクロール動作がうまく禁止にできんわ。これ。
現状では、jqmobiを使わないサイトでは、普通に動作。jqmobiをつかった場合はスクロールがあると動作がおかしくなる。という感じになりました。
ほぼ１日これにかかりっきりだったのにできなかったのが非常に残念。
colorPickerを置いたjqmobiの動作テスト - jsdo.it - share JavaScript, HTML5 and CSS
調整は明日以降にもちこしだな。このColorPickerを利用して、お絵描きするwebアプリや、待ち合わせ支援のwebアプリを作る予定です。
html5の色選択動作つくってみました。
html5で動作するcolorPickerをつくってみました。
このライブラリだけ読み込めば動作し、好きな要素にくっつけることができます。
よかったらつかってみてください。
自分としては、jqmobiで利用できるように調整していきたいですね。
いまのところtouch系のイベントのbindを実行していないので、iphoneでは利用できないし・・・
このライブラリだけ読み込めば動作し、好きな要素にくっつけることができます。
Color Pickerサンプル - jsdo.it - share JavaScript, HTML5 and CSS
よかったらつかってみてください。
自分としては、jqmobiで利用できるように調整していきたいですね。
いまのところtouch系のイベントのbindを実行していないので、iphoneでは利用できないし・・・
2012年4月16日月曜日
jqmobiについていろいろやってみた。jsdo.it編
jsdo.itが便利なので、ここにjqmobiのプログラムをいっぱいのせておきました。
・大本のベース動作
http://jsdo.it/poepoemix/jqmobi
・プラグインのベース動作
http://jsdo.it/poepoemix/nRfi
・時計
http://jsdo.it/poepoemix/2qHJ
・スキンセレクタ(ただしsafari(iMac)でうまく動作せず。)
http://jsdo.it/poepoemix/s0dZ
・動画再生
http://jsdo.it/poepoemix/3LZm
・縦スクロール、横スクロール
http://jsdo.it/poepoemix/yzFG
・縦カルーセル、横カルーセル
http://jsdo.it/poepoemix/t0Mr
適当にjsdo.itにあるいい感じのサンプルを、jqmobi化でもしてようかな・・・
・大本のベース動作
http://jsdo.it/poepoemix/jqmobi
・プラグインのベース動作
http://jsdo.it/poepoemix/nRfi
・時計
http://jsdo.it/poepoemix/2qHJ
・スキンセレクタ(ただしsafari(iMac)でうまく動作せず。)
http://jsdo.it/poepoemix/s0dZ
・動画再生
http://jsdo.it/poepoemix/3LZm
・縦スクロール、横スクロール
http://jsdo.it/poepoemix/yzFG
・縦カルーセル、横カルーセル
http://jsdo.it/poepoemix/t0Mr
jqmobiのベースとなる動作 - jsdo.it - share JavaScript, HTML5 and CSS
適当にjsdo.itにあるいい感じのサンプルを、jqmobi化でもしてようかな・・・
2012年4月14日土曜日
リモートデバッグの方法をつくってみました。
webSocket経由で、端末上でつかったデータをブラウザに送信して、そちらで参照する。
そんな動作をするプログラムをかいてみました。
ログとして見る側
http://jsdo.it/poepoemix/2kKa
送信するconsole.log動作の上書き
http://jsdo.it/poepoemix/64Vj
間に挟んでいるwebSocketサーバーはred5 + 自作のプラグインにしてます。
webSocketサーバーの動作は送られた文字列データを同じパスにアクセスしている全員にエコーするだけというもの。
もし、不都合がでてきたら、サーバーひっこめますが、とりいそぎいまのところはとめるつもりはないです。
個人的にデバッグ用とに利用したいという方がおりましたら、ws://49.212.39.17:8080/test/devkeyのdevkeyのところを適当な文字列に変えてご利用くださいな。
そんな動作をするプログラムをかいてみました。
ログとして見る側
http://jsdo.it/poepoemix/2kKa
送信するconsole.log動作の上書き
http://jsdo.it/poepoemix/64Vj
間に挟んでいるwebSocketサーバーはred5 + 自作のプラグインにしてます。
webSocketサーバーの動作は送られた文字列データを同じパスにアクセスしている全員にエコーするだけというもの。
もし、不都合がでてきたら、サーバーひっこめますが、とりいそぎいまのところはとめるつもりはないです。
個人的にデバッグ用とに利用したいという方がおりましたら、ws://49.212.39.17:8080/test/devkeyのdevkeyのところを適当な文字列に変えてご利用くださいな。
2012年4月10日火曜日
jsdo.itをつかってみました。
jqmobiのデモをブログに貼付けたくてjspファイルまでつくってしまったわけですが、こんな面倒なことしなくてもjsdo.itなりを使えば、コードごと貼付けることができるみたいですね。
というわけでつかってみた。
jqmobiの動作デモ
websocketによるテキストチャットデモ
jqmobi基本動作 - jsdo.it - share JavaScript, HTML5 and CSS
websocketによるテキストチャットデモ
websocketチャットテスト - jsdo.it - share JavaScript, HTML5 and CSS
2012年4月9日月曜日
jqmobiについてやってみる、その４ スクロール編
プログラムはいつものとおり、githubにあげてあります。
さて、今回はスクロール・・・
左右、上下にスクロールできるようにするものです。
このスクロールですが、いれようと思えばheaderとかにもいれれるので、スクロール可能なタイトルなんてものもつくれます。
content/scroll.htmlをみていただければわかりますが、jqmobiのkitchensinkとは違い、片方の定義しか実行していません。
横のスクロールの定義の部分で、縦のスクロールの否定をいれてやるとなぜか動作がおかしくなります。
余談ですが、hash付きで情報のロードを実行するとどうやら動作がくずれることがあるみたいですね。
githubのソースはなるべくそれぞれのパネルのプログラムが別のファイルになるようにしてありますが、できたら、１つのファイルにまとめてしまっておいた方が無難かもしれません。
バグというより、mobile safariの動作の影響かなとみていますけど。
さて、今回はスクロール・・・
左右、上下にスクロールできるようにするものです。
このスクロールですが、いれようと思えばheaderとかにもいれれるので、スクロール可能なタイトルなんてものもつくれます。
content/scroll.htmlをみていただければわかりますが、jqmobiのkitchensinkとは違い、片方の定義しか実行していません。
横のスクロールの定義の部分で、縦のスクロールの否定をいれてやるとなぜか動作がおかしくなります。
余談ですが、hash付きで情報のロードを実行するとどうやら動作がくずれることがあるみたいですね。
githubのソースはなるべくそれぞれのパネルのプログラムが別のファイルになるようにしてありますが、できたら、１つのファイルにまとめてしまっておいた方が無難かもしれません。
バグというより、mobile safariの動作の影響かなとみていますけど。
2012年4月7日土曜日
jqmobiについてやってみる、その３ カルーセル編。
sencha touchからjqmobiに浮気しています。今回はカルーセルという、指で左右にパネルを動かすと、左右にスライドするやつの話です。
githubにpushしたソースはこちら。(デモもどこかに置いておきたいですね。)
https://github.com/taktod/jqmobitest/commit/b470d3091d24e63eff2adc8fde06853cbaf9b84a
やることは
githubにpushしたソースはこちら。(デモもどこかに置いておきたいですね。)
https://github.com/taktod/jqmobitest/commit/b470d3091d24e63eff2adc8fde06853cbaf9b84a
やることは
- index.htmlにjq.carousel.jsのプラグインを追加。
- index.htmlにcarousel用のdivをcontentのdivに追加
- carousel.htmlをcontentディレクトリに追加
でできます。
jqmobiはプラグインという形で必要なライブラリだけ追加していけるので便利ですね。
なお、このプラグイン追加すらもcarousel.htmlにいれてみようと思いましたがどうも、javascriptがうまく動作しないので、とりいそぎあきらめました。
では、次は何をやるかな・・・
2012年4月6日金曜日
jqmobiについてやってみる、その２
さて、jqmobiについて第２回、今回からソースを書くのが面倒なので、githubにデータとしてあげていきたいとおもいます。
https://github.com/taktod/jqmobitest/commits/master
ここを参照するのが、一番わかりやすいとおもいます。
とりあえず、前回は大枠の側だけつくったので、今回はパネルを配置してみました。
パネルを配置するには、jQUi -> contentの配下にpanelというclass指定のdivタグを追加すればOKです。
この中にul -> liによるリストをいれたり、普通にhtmlでデータを書き込んだりして、コンテンツをつくっていきます。
selectedがついているpenelのデータがアクセス時の標準表示となり、アドレスにhashがついている場合は、そのpenelが自動的に表示候補になります。
なお、selectedがついていないパネルにアドレス指定でアクセスすると、右からスライドして表示されるアクセスしてすぐに画面が切り替わったのと同じ結果になります。
この画面遷移を抑制するには、jquiの初期読み込みが完了した状態で、目的のpanelにselected="true"を設置してやればよいです。
また、個人的に、普通にindex.htmlにデータを書き続けていき、このファイルが肥大化するとロードに時間がかかったりして、あまりよろしくないと思うので、ajaxを利用して別ページの内容として読み込むのも組み立ててみました。
https://github.com/taktod/jqmobitest/commits/master
ここを参照するのが、一番わかりやすいとおもいます。
とりあえず、前回は大枠の側だけつくったので、今回はパネルを配置してみました。
パネルを配置するには、jQUi -> contentの配下にpanelというclass指定のdivタグを追加すればOKです。
この中にul -> liによるリストをいれたり、普通にhtmlでデータを書き込んだりして、コンテンツをつくっていきます。
selectedがついているpenelのデータがアクセス時の標準表示となり、アドレスにhashがついている場合は、そのpenelが自動的に表示候補になります。
なお、selectedがついていないパネルにアドレス指定でアクセスすると、右からスライドして表示されるアクセスしてすぐに画面が切り替わったのと同じ結果になります。
この画面遷移を抑制するには、jquiの初期読み込みが完了した状態で、目的のpanelにselected="true"を設置してやればよいです。
また、個人的に、普通にindex.htmlにデータを書き続けていき、このファイルが肥大化するとロードに時間がかかったりして、あまりよろしくないと思うので、ajaxを利用して別ページの内容として読み込むのも組み立ててみました。
2012年4月5日木曜日
javascriptで動的にタグを追加するときの話
javascriptでdivタグの中身等を書き換えるときに、DOMを自分でがんばって書き込んでもいいのですが、使うと便利なものがいくつかあります。
１つめ innerHTMLで追加する方法
document.getElementById("#divID").innerHTML = "適当な内容";
２つめjqmobiのhtml関数を利用する方法
$("#divID").html("適当な内容");
３つめjQueryのhtml関数を利用する方法
$("#divID").html("適当な内容");
さて、この中で１つだけ、scriptタグ(javascript)を含むデータをいれたときにその関数が実行されるものがあります。
それは２つ目のjQueryのやつです。
すくなくとも、僕の手元にあるChromeとSafariではscriptタグの内容がjavascriptとして認識されるようです。
１つめのやり方
２つめのやり方
３つめのやり方
iMacのgoogle chrome18.0.1025.142での動作です。
不思議ですね。
jQuery・・・
１つめ innerHTMLで追加する方法
document.getElementById("#divID").innerHTML = "適当な内容";
２つめjqmobiのhtml関数を利用する方法
$("#divID").html("適当な内容");
３つめjQueryのhtml関数を利用する方法
$("#divID").html("適当な内容");
さて、この中で１つだけ、scriptタグ(javascript)を含むデータをいれたときにその関数が実行されるものがあります。
それは２つ目のjQueryのやつです。
すくなくとも、僕の手元にあるChromeとSafariではscriptタグの内容がjavascriptとして認識されるようです。
１つめのやり方
iMacのgoogle chrome18.0.1025.142での動作です。
不思議ですね。
jQuery・・・
2012年3月27日火曜日
jqmobiについてやってみる、その１
jqmobiはjqueryMobileより軽量に動作するjavascriptのフレームワークです。
sencha touchみたいなsmart phoneに特化したUIを構築できるのが魅力です。
このjqmobi特徴があります。
いいところ
・１つ目、jqmobiのライブラリがそもそもjqueryみたいなことをしてくれるので、ほかのライブラリとは違いjqueryへのリンクをいれる必要はないです。
・２つ目、sencha touchとは違い、ハッシュへのリンクみたいな感じで表示するパネルを選択することができます。
・３つ目、非常に軽い
わるいところ
・１つ目、動作に癖がある。
・２つ目、jqueryとは違いwebkit系のブラウザでしか動作しないっぽい。
・３つ目、コンテンツの表示はその他の表示されてからなので、bootstrap for twitterみたいに先に表示を書き込んで・・・という手は使えないっぽい。
こんなところです。
とりあえず始めるにあたって知っておかないといけないページはこちら。
本家 http://www.jqmobi.com/
APIドキュメント http://api.jqmobi.com/
Kitchen sink http://jqmobi.com/testdrive/
とりあえず導入しましょう。
まずgithubのjqMobiのページにいきます。
https://github.com/appmobi/jq.mobi
git cloneするかzipをダウンロードします。
今回はzipのダウンロードでいってみました。
解凍してできたデータを適当なところに設置
あとはhtmlを書きます。
sencha touchみたいなsmart phoneに特化したUIを構築できるのが魅力です。
このjqmobi特徴があります。
いいところ
・１つ目、jqmobiのライブラリがそもそもjqueryみたいなことをしてくれるので、ほかのライブラリとは違いjqueryへのリンクをいれる必要はないです。
・２つ目、sencha touchとは違い、ハッシュへのリンクみたいな感じで表示するパネルを選択することができます。
・３つ目、非常に軽い
わるいところ
・１つ目、動作に癖がある。
・２つ目、jqueryとは違いwebkit系のブラウザでしか動作しないっぽい。
・３つ目、コンテンツの表示はその他の表示されてからなので、bootstrap for twitterみたいに先に表示を書き込んで・・・という手は使えないっぽい。
こんなところです。
とりあえず始めるにあたって知っておかないといけないページはこちら。
本家 http://www.jqmobi.com/
APIドキュメント http://api.jqmobi.com/
Kitchen sink http://jqmobi.com/testdrive/
とりあえず導入しましょう。
まずgithubのjqMobiのページにいきます。
https://github.com/appmobi/jq.mobi
git cloneするかzipをダウンロードします。
今回はzipのダウンロードでいってみました。
解凍してできたデータを適当なところに設置
あとはhtmlを書きます。
<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
<title>jqMobiテスト</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon" href="http://taktodtools.appspot.com/icons/tora.png" />
<link rel="stylesheet" type="text/css" href="../jqmobi/kitchensink/jq.ui.carbon.css" title="volcano" />
<script type="text/javascript" charset="UTF-8" src="../jqmobi/ui/jq.ui.min.js"></script>
</head>
<body>
<div id="jQUi">
<div id="header">
</div>
<div id="content">
</div>
<div id="navbar">
</div>
<nav></nav>
</div>
</body>
</html>
極限までけずったらこんな感じでしょうか。
これをベースに今後は動作用のjavascriptを追加し、header、content、navbar、navの部分にそれぞれの情報を書き込んでいけば、できあがりとなります。
2012年2月2日木曜日
sencha touch以外のライブラリについて、ちょっと確認した。
今朝携帯をいじってちょっとだけほかのJavascriptフレームワークについて調査してみたのでメモ。
jq mobi
bootstrap from twitter
sencha touch
jquery mobile
この４つ。
sencha touchとjqmobiはwebアプリを単独アプリとして動作させるのにちょうどいい感じ。
jquery mobileとbootstrap from twitterは、既存のwebページの拡張的な感じ。
以前のエントリーで書きましたが、iphone4sでは次のような特性がある。
・メモリーは500MB(うちアプリがつかえるのが、だいたい250MB)
・メモリーを使い切ると最悪落ちる。webページの場合は再読み込みが走る。
・メディアデータはメモリー。javascriptの変数もメモリー
・読み込みページデータ、localStorage等はディスクにはいる。
アプリの切り替えを頻繁にする場合は、ホーム画面から起動をしても再読み込みが走ってしまい。最悪の場合、編集中データがふっとぶということもあるので、僕としてはあまりメモリーをつかいたくない。あと表示まで早いと別ページあつかいでごまかせるからいいなぁとおもっているところです。
で、調べてみた。
メモリーの使用量はだいたいどのフレームワークでも似た感じ。
読み込みの早さはbootstrap from twitterがいい感じといったところ。
動作の滑らかさは個人的にはsenchaが一番な気がします。
senchaはちょっと組み方が特殊なので、jqueryがいいという人はjqmobiですかね。
まぁ、個人的な意見100%ですが、現時点ではbootstrap from twitterに手をだしてみようかなといったところです。
プログラムしてみようか 側でsqliteについてはまっているので、そちらにも手をだしたい。
youtubeのブックマークレットのスキン機能もつけたい等、いろいろやりたいことがあって困る。
jq mobi
bootstrap from twitter
sencha touch
jquery mobile
この４つ。
sencha touchとjqmobiはwebアプリを単独アプリとして動作させるのにちょうどいい感じ。
jquery mobileとbootstrap from twitterは、既存のwebページの拡張的な感じ。
以前のエントリーで書きましたが、iphone4sでは次のような特性がある。
・メモリーは500MB(うちアプリがつかえるのが、だいたい250MB)
・メモリーを使い切ると最悪落ちる。webページの場合は再読み込みが走る。
・メディアデータはメモリー。javascriptの変数もメモリー
・読み込みページデータ、localStorage等はディスクにはいる。
アプリの切り替えを頻繁にする場合は、ホーム画面から起動をしても再読み込みが走ってしまい。最悪の場合、編集中データがふっとぶということもあるので、僕としてはあまりメモリーをつかいたくない。あと表示まで早いと別ページあつかいでごまかせるからいいなぁとおもっているところです。
で、調べてみた。
メモリーの使用量はだいたいどのフレームワークでも似た感じ。
読み込みの早さはbootstrap from twitterがいい感じといったところ。
動作の滑らかさは個人的にはsenchaが一番な気がします。
senchaはちょっと組み方が特殊なので、jqueryがいいという人はjqmobiですかね。
まぁ、個人的な意見100%ですが、現時点ではbootstrap from twitterに手をだしてみようかなといったところです。
プログラムしてみようか 側でsqliteについてはまっているので、そちらにも手をだしたい。
youtubeのブックマークレットのスキン機能もつけたい等、いろいろやりたいことがあって困る。
2012年1月29日日曜日
iPhoneのメモリーや、ディスクについて
先日iMemoryGraphというメモリーの使用状況を測定するアプリを導入してみました。
iPhoneのwebアプリをつくっていると、たまに画面が白くなって、再読み込みが走ることがありますが、この原因が知りたかった。
以下の記事は4S(AU)での動作です。キャリアはあまり関係ないと思うけど。
iPhoneのスペックでは
メモリー505MB(うち、自由につかえるのは大地あ250MBくらい)
ディスク28.2GB
といったところみたいです。
その１：個人的な調査によると、メモリーがFreeメモリーが10MB程度まで落ちてしまってからページにアクセスすると、最終にアクセスしたページから順に再読み込みがかかるらしい。
ちょうど発生した時間のグラフはこんな感じ9:50くらいに実験したかな。
その２：僕が大好きなsencha-touchですが、メモリーを馬鹿食いするみたいです。以前つくったノートアプリを開くと50MBくらいくいやがった。こったアプリをつくるとさらにメモリーを食いそう。ちょっときついですね。ずっとsencha-touchでつくったアプリをつかい続けるなら、まぁリロードはそんなに走らないでしょうが、他のアプリと併用させるとたちまちアウトかも。
その３：XMLHttpRequestによるajaxの動作やページの読み込みデータ(画像等)はメモリーではなく、ディスクに書き込まれるっぽい。
javascriptの変数で保持してしまうとメモリーにきます。
no-cache等をサーバーで設定しておくようにすれば、次のデータを読み込んだときに過去のデータは削除されますが、設定しないない場合は、iPhoneがディスクにキャッシュする模様。
その４：localStorageでキャッシュした場合もディスクにたまるようですが、ディスクがいくらあろうが、数MBでアウトになるみたいです。
その５：mp3等のメディアデータはメモリー上にのっかって動作するらしい。(ファイルキャッシュしろよ。)
こんなところですね。この辺チューニングをうまくやってあげるとiPhoneの楽しいアプリ作成ライフが送れそうです。
iPhoneのwebアプリをつくっていると、たまに画面が白くなって、再読み込みが走ることがありますが、この原因が知りたかった。
以下の記事は4S(AU)での動作です。キャリアはあまり関係ないと思うけど。
iPhoneのスペックでは
メモリー505MB(うち、自由につかえるのは大地あ250MBくらい)
ディスク28.2GB
といったところみたいです。
その１：個人的な調査によると、メモリーがFreeメモリーが10MB程度まで落ちてしまってからページにアクセスすると、最終にアクセスしたページから順に再読み込みがかかるらしい。
その２：僕が大好きなsencha-touchですが、メモリーを馬鹿食いするみたいです。以前つくったノートアプリを開くと50MBくらいくいやがった。こったアプリをつくるとさらにメモリーを食いそう。ちょっときついですね。ずっとsencha-touchでつくったアプリをつかい続けるなら、まぁリロードはそんなに走らないでしょうが、他のアプリと併用させるとたちまちアウトかも。
その３：XMLHttpRequestによるajaxの動作やページの読み込みデータ(画像等)はメモリーではなく、ディスクに書き込まれるっぽい。
javascriptの変数で保持してしまうとメモリーにきます。
no-cache等をサーバーで設定しておくようにすれば、次のデータを読み込んだときに過去のデータは削除されますが、設定しないない場合は、iPhoneがディスクにキャッシュする模様。
その４：localStorageでキャッシュした場合もディスクにたまるようですが、ディスクがいくらあろうが、数MBでアウトになるみたいです。
その５：mp3等のメディアデータはメモリー上にのっかって動作するらしい。(ファイルキャッシュしろよ。)
こんなところですね。この辺チューニングをうまくやってあげるとiPhoneの楽しいアプリ作成ライフが送れそうです。
2012年1月27日金曜日
iPhone4Sで3G回線でネットができなくなった。
iPhone4Sを利用しているのですが、3G回線を利用したインターネットをつかおうとしたら、使えなくなっていました。ちなみにAUです。
１日前までは、youtubeのブックマークレットでガンガン音楽をききまくっていたので、問題なく動作していたのに・・・
というわけでいろいろな回避策を講じてみました。
その１：電源のon off右上の電源ボタンを少々長押し→スライダーで電源OFFを選択→その後再起動してみる。→結果はなおらず。
その２：仕方ないので購入したお店にいってみる。そこでやってもらったことは、電源の再起動とgoogle検索を何度か、なおらないので、iphone4Sに関する問い合わせ先の載っている冊子をもらってきた。→結果はなおらず。
itunesの復元を利用すれば、だいたい元に戻るとアドバイスをもらったので、速攻帰宅。
その３：ネットワークの設定のリセットをすれば、なんとかなるかもと思い実行してみる
→結果はなおらず。
家のiMacにて、itunesと接続し、iPhoneのソフトウェアの復元の実行を試みつつnetを検索してみたところ
その４：http://nekomac.seesaa.net/article/102945905.html
この記事を発見。電源とホームボタンを長押しすると別の再起動ができるわけですか・・・
→いったん復元作業(ソフトウェアアップデートのDL中)を停止して、試行してみる。
→なおらず。
その５：復元作業を再開しているところ。
→なんと、これでもなおらず。
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1275262042
こちらの主の回答からするとネットワーク設定ではなく全リセットすればなおるかも・・・
→この方法でいけた・・・
なおった・・・
が、データ等すべて飛んだ、わーぃ
さて、再度やり直していくとしますかw
１日前までは、youtubeのブックマークレットでガンガン音楽をききまくっていたので、問題なく動作していたのに・・・
というわけでいろいろな回避策を講じてみました。
その１：電源のon off右上の電源ボタンを少々長押し→スライダーで電源OFFを選択→その後再起動してみる。→結果はなおらず。
その２：仕方ないので購入したお店にいってみる。そこでやってもらったことは、電源の再起動とgoogle検索を何度か、なおらないので、iphone4Sに関する問い合わせ先の載っている冊子をもらってきた。→結果はなおらず。
itunesの復元を利用すれば、だいたい元に戻るとアドバイスをもらったので、速攻帰宅。
その３：ネットワークの設定のリセットをすれば、なんとかなるかもと思い実行してみる
→結果はなおらず。
家のiMacにて、itunesと接続し、iPhoneのソフトウェアの復元の実行を試みつつnetを検索してみたところ
その４：http://nekomac.seesaa.net/article/102945905.html
この記事を発見。電源とホームボタンを長押しすると別の再起動ができるわけですか・・・
→いったん復元作業(ソフトウェアアップデートのDL中)を停止して、試行してみる。
→なおらず。
その５：復元作業を再開しているところ。
→なんと、これでもなおらず。
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1275262042
こちらの主の回答からするとネットワーク設定ではなく全リセットすればなおるかも・・・
→この方法でいけた・・・
なおった・・・
が、データ等すべて飛んだ、わーぃ
さて、再度やり直していくとしますかw
2012年1月25日水曜日
audioタグにいろんなファイルをつっこんでみた。
audioタグにmp4 m4a 3gp mp3 wavをいれてiphoneで再生してみたところ・・・
どうやらmp4系とmp3系にわかれるらしい。
mp4系の動作(mp4 m4a 3gp)について、再生中に別のウィンドウをひらいたりすると、再生がとまります。
再度再生を実行しないととまったままになる・・・
mp3の動作は別物で、再生中に別のアプリにうつったりしてもとまりません。
wavもこちら側となります。
sourceタグにtype設定をいれて、mimeに嘘をいれたりしてもダメ。
どうやってもだめなものはだめ。ということになりました。
再生できないmimeをいれると使えないsourceということで無視されるみたいです。
再生可能なmimeをいれると、読み込み時に再度確認して正しいmimeになるみたいです。
つかえねぇ。
まぁ、video/3gppがaudioタグで再生できるだけましか・・・
というわけで、エンコード変換をしないかぎり、youtubeブックマークレットはどこまでいっても、再生ボタンをおさないとだめよ・・・という制限が付きまとうことになりそうです。
あと抵抗できるとしたら、javascriptでとまっても再生がキックされるようにするくらいですかね。
どうやらmp4系とmp3系にわかれるらしい。
mp4系の動作(mp4 m4a 3gp)について、再生中に別のウィンドウをひらいたりすると、再生がとまります。
再度再生を実行しないととまったままになる・・・
mp3の動作は別物で、再生中に別のアプリにうつったりしてもとまりません。
wavもこちら側となります。
sourceタグにtype設定をいれて、mimeに嘘をいれたりしてもダメ。
どうやってもだめなものはだめ。ということになりました。
再生できないmimeをいれると使えないsourceということで無視されるみたいです。
再生可能なmimeをいれると、読み込み時に再度確認して正しいmimeになるみたいです。
つかえねぇ。
まぁ、video/3gppがaudioタグで再生できるだけましか・・・
というわけで、エンコード変換をしないかぎり、youtubeブックマークレットはどこまでいっても、再生ボタンをおさないとだめよ・・・という制限が付きまとうことになりそうです。
あと抵抗できるとしたら、javascriptでとまっても再生がキックされるようにするくらいですかね。
audioタグとsourceタグについて。
現在youtubeブックマークレットでは、
<audio src="動画アドレス"/>
という形でタグを利用しているわけですが、
<audio>
<source src="動画アドレス" />
</audio>
という形でもソースを指定することができます。
この挙動について、iphone上でしらべてみました。
１つめ、audioタグにsource属性をappendChildで追記したらどうなるか
追記を実行すると、データが取り込まれました。(あたりまえです。)
sourceタグは複数設定すると、一番はじめに設定されてかつ、利用可能なデータを採用するという挙動をしますので、さらにappendChildを繰り返すとsourceがいれかわりません。(はじめにいれたものが採用されるため。)
一回、removeChildで前に設定した要素を取り除けばOKみたいです。
２つめ、removeChildで要素をとりのぞいても、別のsourceを設定しないかぎりデータが有効になるっぽい。
removeChildしたから、再生がまったくできなくなるわけではないみたいです。
３つめ、sourceタグを別にもってもcacheされない。
chromeやsafariでの動作の場合はaudioデータがキャッシュされることがあるので、sourceをいれかえるとすぐに再生できたりしますが、iphone上でsourceの入れ替えを実行してしまうと、あたらしいデータが読み込みしなおしになります。
４つめ、audioタグを複数にわけておけば、キャッシュが有効になるみたい。
音楽データをいれた別のタグを準備しておけばキャッシュみたいなことが実装できるみたいです。
ただし、タグを超えて制御するためには、ちと制限がおおすぎ。
とりあえずここまでわかりました。
youtubeブックマークレットも、mp4データをもつ別々のaudioタグをつくっていけば、電波のないところでも、複数音楽ファイルの再生ができるかもしれないですね。
<audio src="動画アドレス"/>
という形でタグを利用しているわけですが、
<audio>
<source src="動画アドレス" />
</audio>
という形でもソースを指定することができます。
この挙動について、iphone上でしらべてみました。
１つめ、audioタグにsource属性をappendChildで追記したらどうなるか
追記を実行すると、データが取り込まれました。(あたりまえです。)
sourceタグは複数設定すると、一番はじめに設定されてかつ、利用可能なデータを採用するという挙動をしますので、さらにappendChildを繰り返すとsourceがいれかわりません。(はじめにいれたものが採用されるため。)
一回、removeChildで前に設定した要素を取り除けばOKみたいです。
２つめ、removeChildで要素をとりのぞいても、別のsourceを設定しないかぎりデータが有効になるっぽい。
removeChildしたから、再生がまったくできなくなるわけではないみたいです。
３つめ、sourceタグを別にもってもcacheされない。
chromeやsafariでの動作の場合はaudioデータがキャッシュされることがあるので、sourceをいれかえるとすぐに再生できたりしますが、iphone上でsourceの入れ替えを実行してしまうと、あたらしいデータが読み込みしなおしになります。
４つめ、audioタグを複数にわけておけば、キャッシュが有効になるみたい。
音楽データをいれた別のタグを準備しておけばキャッシュみたいなことが実装できるみたいです。
ただし、タグを超えて制御するためには、ちと制限がおおすぎ。
とりあえずここまでわかりました。
youtubeブックマークレットも、mp4データをもつ別々のaudioタグをつくっていけば、電波のないところでも、複数音楽ファイルの再生ができるかもしれないですね。
3G回線でのIPアドレスについて
youtubeの動画って、ipアドレスごとの接続コントロールをやってるみたいです。
なので、理論的には、ipアドレスが同じなら、同じソースにアクセスしにいけば動画を視聴できることになります。
また、m.youtube.comにはどうやらipアドレスごとの接続回数制限みたいなのが設定されているようです。
そのためwifiネットワークでは、たまに接続が超過してしまい、m.youtube.comがデータを返さなくなることがあります。
というわけで、ipアドレスがかわっていなかったら、前の動画の接続をみにいけば、安定して動作するんじゃね？と思ってます。
そのまえに・・・
3G回線で(外出先でのネットワーク)どのくらいの頻度でipアドレスがかわるか確認してみました。
すると朝家をでてから、会社につくまで、地下鉄にものるので、途中でネットワークがきれているにもかかわらず、IPアドレスは一定でした。
会社で昼過ぎまで働いて外にでたところ、このタイミングで別のIPアドレスになり、
帰宅するときにはさらに別のIPアドレスが割り当てられていました。
一定時間IPアドレスを間借りしてるみたいですね。ずっと3Gにつなぎっぱなしとかにするとまた違うかもしれませんが、とりあえず今日の検証結果はこうなりました。
なので、理論的には、ipアドレスが同じなら、同じソースにアクセスしにいけば動画を視聴できることになります。
また、m.youtube.comにはどうやらipアドレスごとの接続回数制限みたいなのが設定されているようです。
そのためwifiネットワークでは、たまに接続が超過してしまい、m.youtube.comがデータを返さなくなることがあります。
というわけで、ipアドレスがかわっていなかったら、前の動画の接続をみにいけば、安定して動作するんじゃね？と思ってます。
そのまえに・・・
3G回線で(外出先でのネットワーク)どのくらいの頻度でipアドレスがかわるか確認してみました。
すると朝家をでてから、会社につくまで、地下鉄にものるので、途中でネットワークがきれているにもかかわらず、IPアドレスは一定でした。
会社で昼過ぎまで働いて外にでたところ、このタイミングで別のIPアドレスになり、
帰宅するときにはさらに別のIPアドレスが割り当てられていました。
一定時間IPアドレスを間借りしてるみたいですね。ずっと3Gにつなぎっぱなしとかにするとまた違うかもしれませんが、とりあえず今日の検証結果はこうなりました。
2012年1月24日火曜日
iphoneのjavascriptで巨大なファイルをあつかってみる。
iphoneのmobileサファリの実行時間制限に10秒までというのがありますが、別の関数の呼び出しになってれば大丈夫みたいですね。
というわけで、デモは示すことができませんが手持ちのmp3をXMLHttpRequestをつかって読み込んできちんと全部データを取得できているか確認してみました。
やったこと。
XMLHttpRequestをつかってデータを呼び出す。
onreadystatechageが呼び出された回数を記録する。
それぞれの呼び出しのresponseTextの長さを合計して読み込んだデータ長を計算する。
かかった時間を表示する。
としてみました。
すると・・・こうなった。
読み込みにかかった時間は３分弱
ステップ数は37000回弱
読み込みサイズは59MByte
ちゃんと読み込めてますね。
XMLHttpRequestでメディアデータを呼び出すようにしておくと、分割されて処理がまわるので、問題なく動作するといったところでしょうか。
でかいサイズのファイルを扱いたい・・・というときになにかにつかえるかも！？
と思いました。
なんでこんなことやったかというと、mp3やm4aのデータをyoutubeから抽出して、localStorageに保存しておき、data URL schemeをつかってaudioタグにいれれば、音楽ファイルみたいに扱えるんじゃない！？とおもったからです。
もっとも結果としては、「追記」という動作がaudioタグのsrcに実行できなかったため、動作しなかったんですけどね。(srcを更新するたびにデータとして受け入れるみたいで、audioタグのソースのリロードが大量にはしってフリーズしました。)
mp4 -> m4a変換ができそうだったから、いけると思ったんですけどねぇ。やはりnativeアプリにはかなわないか・・・
というわけで、デモは示すことができませんが手持ちのmp3をXMLHttpRequestをつかって読み込んできちんと全部データを取得できているか確認してみました。
やったこと。
XMLHttpRequestをつかってデータを呼び出す。
onreadystatechageが呼び出された回数を記録する。
それぞれの呼び出しのresponseTextの長さを合計して読み込んだデータ長を計算する。
かかった時間を表示する。
としてみました。
すると・・・こうなった。
ステップ数は37000回弱
読み込みサイズは59MByte
ちゃんと読み込めてますね。
XMLHttpRequestでメディアデータを呼び出すようにしておくと、分割されて処理がまわるので、問題なく動作するといったところでしょうか。
でかいサイズのファイルを扱いたい・・・というときになにかにつかえるかも！？
と思いました。
なんでこんなことやったかというと、mp3やm4aのデータをyoutubeから抽出して、localStorageに保存しておき、data URL schemeをつかってaudioタグにいれれば、音楽ファイルみたいに扱えるんじゃない！？とおもったからです。
もっとも結果としては、「追記」という動作がaudioタグのsrcに実行できなかったため、動作しなかったんですけどね。(srcを更新するたびにデータとして受け入れるみたいで、audioタグのソースのリロードが大量にはしってフリーズしました。)
mp4 -> m4a変換ができそうだったから、いけると思ったんですけどねぇ。やはりnativeアプリにはかなわないか・・・
2012年1月23日月曜日
youtube用bookmarkletプレーヤー、その４
iphoneでyoutubeの音楽をきくためのブックマークレットプレーヤー
今度はipadでも動作するとおもいます。
今回のプログラムはこちらです。いままでのとはちょっと違います。
ブックマークレットのプログラムはこちら。
javascript:var%20spt=document.createElement('script');spt.src="http://taktodtools.appspot.com/yt/app/main.js";document.body.appendChild(spt);void(0);
前までは、headに追加していましたが、ipadだとdocument.headでhead要素にアクセスできないみたいですね。
というわけでbodyに追加するようにしてあります。
iphoneなら、いままでのブックマークでも同じように動作できます。
変更点は以下
・localStorageを使うときにきちんとdeleteで前の要素を削除するようにした。
・別の曲を選択したときに、アイテム番号がうまく取得できないバグがあったので、修正。
・別の曲を選択したときの挙動を変更して、動作が安定するように調整。
こんなところです。
はじめてきた方のために作成した動画をはっておきます。
さて、今後やりたいことは
・スキン機能の充実(誰でもスキンをつくれるようにしたい。)
・プレイリストの取り込み
・m.youtube.comのIPアドレス制限の回避策追加。
・データの先読みやキャッシュを追加。
このあたりですね。後者の２つはiphoneのハード的な制限があるわけですが、なんとかいい回避策をみつけたいところですね。
では、よい音楽ライフを〜
今度はipadでも動作するとおもいます。
今回のプログラムはこちらです。いままでのとはちょっと違います。
ブックマークレットのプログラムはこちら。
javascript:var%20spt=document.createElement('script');spt.src="http://taktodtools.appspot.com/yt/app/main.js";document.body.appendChild(spt);void(0);
前までは、headに追加していましたが、ipadだとdocument.headでhead要素にアクセスできないみたいですね。
というわけでbodyに追加するようにしてあります。
iphoneなら、いままでのブックマークでも同じように動作できます。
変更点は以下
・localStorageを使うときにきちんとdeleteで前の要素を削除するようにした。
・別の曲を選択したときに、アイテム番号がうまく取得できないバグがあったので、修正。
・別の曲を選択したときの挙動を変更して、動作が安定するように調整。
こんなところです。
はじめてきた方のために作成した動画をはっておきます。
さて、今後やりたいことは
・スキン機能の充実(誰でもスキンをつくれるようにしたい。)
・プレイリストの取り込み
・m.youtube.comのIPアドレス制限の回避策追加。
・データの先読みやキャッシュを追加。
このあたりですね。後者の２つはiphoneのハード的な制限があるわけですが、なんとかいい回避策をみつけたいところですね。
では、よい音楽ライフを〜
2012年1月22日日曜日
iPadでlocalStorageを使う上での動作バグ
iPad(iPad2ではないです。)でのJavascriptの動作がおかしいことがあるらしいです。
原因を調べてみたところlocalStorageがエラーを吐いている模様。
こういうコードを動作させると
こんな感じのエラーがでます。
どうやら文字列を短縮して追記すると出る例外みたいです。
使う前にきちんとdeleteするようにしてやると
意図したとおりに動作しました。
youtubeのブックマークレットがipadでうまく動作しないのは、ここが原因っぽいですね。さっさと対処しておこうと思います。
みなさんもlocalStorageを使うときにはお気をつけてくださいませ。
ではでは〜
原因を調べてみたところlocalStorageがエラーを吐いている模様。
どうやら文字列を短縮して追記すると出る例外みたいです。
youtubeのブックマークレットがipadでうまく動作しないのは、ここが原因っぽいですね。さっさと対処しておこうと思います。
みなさんもlocalStorageを使うときにはお気をつけてくださいませ。
ではでは〜
iphoneのシミュレーターについて(iPadもできるよ。)
iphoneのシミュレーターはそこそこ数がでています。僕のおすすめはMacOSで動作するiphoneSDKについてくるシミュレーターですね。
通常は以下のディレクトリにインストールされます。
/Developer/Playforms/iPhoneSimulator.platform/Developer/Applications/iPhone Simulator.app
このiPhoneシミュレーターですが、iPadもシミュレートできます。
そして、iPadでの動作不具合もちゃんとでるという素敵仕様です。
これを元にyoutubeのブックマークレット、iPadにも対応しておこうとおもってます。
このシミュレーターですが、実はローカルファイルにアクセスできちゃいます。
サーバーにアップロードしなくてもドラッグドロップで動作確認できちゃうのが、便利です。
ドラッグドロップすると、シミュレーター上でファイルが開ける。
アドレスバーをみると、ちゃんとfile://になってる。
webアプリを開発するにあたって、こういうツールはどんどん使いこなしていきたいですね。
通常は以下のディレクトリにインストールされます。
/Developer/Playforms/iPhoneSimulator.platform/Developer/Applications/iPhone Simulator.app
このiPhoneシミュレーターですが、iPadもシミュレートできます。
これを元にyoutubeのブックマークレット、iPadにも対応しておこうとおもってます。
サーバーにアップロードしなくてもドラッグドロップで動作確認できちゃうのが、便利です。
webアプリを開発するにあたって、こういうツールはどんどん使いこなしていきたいですね。
2012年1月20日金曜日
iphone上でのaudioタグについていろいろ
html5の登場でなにかと話題になっている(いた？)videoタグがありますが、その対となっているタグがあります。
youtube用のブックマークレット(以下youtubeプログラム)で多用しているAudioタグです。
さて、このタグですが、Iphone上で動作させるといろいろな癖があります。
[癖その１] Javascriptで操作させようとすると制限がかかる。
javascriptでplayや別のソースに切り替えたりという動作は制限がくわわっていると思われていますが。実は可能です。
どうやら一回audioタグで再生をしきったタグには後からいろいろ手を加えることが可能っぽいです。
実際youtubeプログラムでは、再生そのものは、audioタグのコントロールに処理させていますが、その後の動作は、javascriptで再読み込みを実行したり別のファイルをあてがったりしています。
この制限は、移動中等でネットワークの割当がかわると初期化されるっぽいです。
[癖その２]audioタグの再生が読み込みにおいついてしまうと、再生が止まる。
再生がおいつくと停止してしまう・・・まぁ、当然といえば当然です。
問題は[癖１]の性で、場合によっては、中途でリカバリー処理をつくっても動作しないことがあることです。
電車等で音楽をきいていて、曲が変わる→ネットワークの割当がかわる。→再生がおいつく。→とまっちゃう。ということがおきるとjavascriptではどうしようもないです。
[癖その３]音楽ファイルではなく動画ファイルをaudioタグに割り当てることも可能。
Iphoneに限りませんがmp3やm4aみたいな音楽データではなく、mp4やm4vという動画ファイルを割り当てて、音楽だけ流すということが可能です。
ただし、挙動がどうなるかは、環境次第です。
例えば、Iphoneでmp3をaudioタグで再生している場合はアプリの切り替えや画面のロックを実行しても再生はとまらずそのまま聴き続けることができます。
しかし、mp4(youtubeプログラム)を再生している場合は、切り替え等を実行すると、いったん再生が止まってしまいます。
[癖その４]複数のファイルを同時に再生することはできない。
PCブラウザではまったく問題ないことなんですが、Iphone上で同時の音声ファイルを再生しようとすると、１つしか再生できません。能力的には実行可能なのかもしれませんが、残念ながら制限がくわわっているようです。
おかげでhtml5を駆使してゲームをつくっても効果音が使えないです。
同様の問題がロード動作にもおきるらしく、複数のAudioタグを準備して、同時進行でダウンロードを先行させる。(要するにcacheさせる)ということも不可能ではないっぽいのですが、意図した動作になってくれません。
[癖その５]iphoneの設定を消音設定にしていても再生を始めると音がでる。
音楽を流すための機能を有効にしたんだから、音楽をながす・・・当たり前の動作です。
ただし、再生を開始するためには、ユーザーが自分でボタンを押す必要がでてきます。
このときに、javascriptの制限が復活してしまうという特性もあります。
これのおかげで、youtubeプログラムつかっていたら、ボタンが効かなくなったわ(怒)ということがたびたびおきてます。
とまぁaudioタグはapple的には音楽を聴くためのものという位置づけになっているようですね。
裏動作がいろいろあって、こうしたらjavascriptの制限がはずせるというのがいろいろありました。そして、これからもいろいろ見つけるだろうと思います＾＾；
videoタグほどではないですが、audioタグも前途多難ですわ。
youtube用のブックマークレット(以下youtubeプログラム)で多用しているAudioタグです。
さて、このタグですが、Iphone上で動作させるといろいろな癖があります。
[癖その１] Javascriptで操作させようとすると制限がかかる。
javascriptでplayや別のソースに切り替えたりという動作は制限がくわわっていると思われていますが。実は可能です。
どうやら一回audioタグで再生をしきったタグには後からいろいろ手を加えることが可能っぽいです。
実際youtubeプログラムでは、再生そのものは、audioタグのコントロールに処理させていますが、その後の動作は、javascriptで再読み込みを実行したり別のファイルをあてがったりしています。
この制限は、移動中等でネットワークの割当がかわると初期化されるっぽいです。
[癖その２]audioタグの再生が読み込みにおいついてしまうと、再生が止まる。
再生がおいつくと停止してしまう・・・まぁ、当然といえば当然です。
問題は[癖１]の性で、場合によっては、中途でリカバリー処理をつくっても動作しないことがあることです。
電車等で音楽をきいていて、曲が変わる→ネットワークの割当がかわる。→再生がおいつく。→とまっちゃう。ということがおきるとjavascriptではどうしようもないです。
[癖その３]音楽ファイルではなく動画ファイルをaudioタグに割り当てることも可能。
Iphoneに限りませんがmp3やm4aみたいな音楽データではなく、mp4やm4vという動画ファイルを割り当てて、音楽だけ流すということが可能です。
ただし、挙動がどうなるかは、環境次第です。
例えば、Iphoneでmp3をaudioタグで再生している場合はアプリの切り替えや画面のロックを実行しても再生はとまらずそのまま聴き続けることができます。
しかし、mp4(youtubeプログラム)を再生している場合は、切り替え等を実行すると、いったん再生が止まってしまいます。
[癖その４]複数のファイルを同時に再生することはできない。
PCブラウザではまったく問題ないことなんですが、Iphone上で同時の音声ファイルを再生しようとすると、１つしか再生できません。能力的には実行可能なのかもしれませんが、残念ながら制限がくわわっているようです。
おかげでhtml5を駆使してゲームをつくっても効果音が使えないです。
同様の問題がロード動作にもおきるらしく、複数のAudioタグを準備して、同時進行でダウンロードを先行させる。(要するにcacheさせる)ということも不可能ではないっぽいのですが、意図した動作になってくれません。
[癖その５]iphoneの設定を消音設定にしていても再生を始めると音がでる。
音楽を流すための機能を有効にしたんだから、音楽をながす・・・当たり前の動作です。
ただし、再生を開始するためには、ユーザーが自分でボタンを押す必要がでてきます。
このときに、javascriptの制限が復活してしまうという特性もあります。
これのおかげで、youtubeプログラムつかっていたら、ボタンが効かなくなったわ(怒)ということがたびたびおきてます。
とまぁaudioタグはapple的には音楽を聴くためのものという位置づけになっているようですね。
裏動作がいろいろあって、こうしたらjavascriptの制限がはずせるというのがいろいろありました。そして、これからもいろいろ見つけるだろうと思います＾＾；
videoタグほどではないですが、audioタグも前途多難ですわ。
iphoneでyoutubeの音楽を聞くためのブックマークレット作りました。その３
iphoneでyoutubeの音楽を聴くためのブックマークレットを作りました。
その３。
この前とほぼ一緒ですが、読み込みまわりの最適化をすすめたり、youtubeのwebアプリっぽいスキンを準備したりしました。
ブックマークレットのプログラムはこちら。(前回と同じ)
javascript:var%20spt=document.createElement('script');spt.src="http://taktodtools.appspot.com/yt/app/main.js";document.body.appendChild(spt);void(0);
実機でやってみた解説動画も準備しました。
audioタグの動作に妙な点があり、その性で曲選択がうまくいかなかったり、途中でとまったりすることがあります。
そういうときは、１曲だけとりあえず最後まで再生しきってください。
そうなる理由は、次の記事のaudioタグの動作のところに書きなぐっておきます。
ではでは〜
その３。
この前とほぼ一緒ですが、読み込みまわりの最適化をすすめたり、youtubeのwebアプリっぽいスキンを準備したりしました。
ブックマークレットのプログラムはこちら。(前回と同じ)
javascript:var%20spt=document.createElement('script');spt.src="http://taktodtools.appspot.com/yt/app/main.js";document.body.appendChild(spt);void(0);
実機でやってみた解説動画も準備しました。
audioタグの動作に妙な点があり、その性で曲選択がうまくいかなかったり、途中でとまったりすることがあります。
そういうときは、１曲だけとりあえず最後まで再生しきってください。
そうなる理由は、次の記事のaudioタグの動作のところに書きなぐっておきます。
ではでは〜
2012年1月17日火曜日
iphoneのmobileサファリの動作バグその１
最近youtube用のブックマークレットを作っていると、いくつかiphone用のsafariの動作バグをみつけました。
本日はとりあえず１つめのバグ
Basic認証のあるページのtext入力のところで、ソフトウェアキーボードがでているときに、alertが発動すると・・・
Alertも閉じれないし、キーボードも閉じれないという状況になりました。
ユーザー限定サイトの中でのログイン等があると発生しそうなバグです。
どうやら先にbasic認証をすませて、データを保存している状態にすれば大丈夫になったりする模様です。
iphone4sでのみ発生する不具合っぽいです。
とりあえず、ロックしたりホームにもどってからsafariに再度アクセスするとキーボードがなくなり対処できるようになるみたいです。
うーん癖のあるデバイスですね。iphoneってw
本日はとりあえず１つめのバグ
Basic認証のあるページのtext入力のところで、ソフトウェアキーボードがでているときに、alertが発動すると・・・
Alertも閉じれないし、キーボードも閉じれないという状況になりました。
ユーザー限定サイトの中でのログイン等があると発生しそうなバグです。
どうやら先にbasic認証をすませて、データを保存している状態にすれば大丈夫になったりする模様です。
iphone4sでのみ発生する不具合っぽいです。
とりあえず、ロックしたりホームにもどってからsafariに再度アクセスするとキーボードがなくなり対処できるようになるみたいです。
うーん癖のあるデバイスですね。iphoneってw
2012年1月15日日曜日
iphoneでyoutubeの音楽を聞くためのブックマークレット作りました。その２
iphoneでyoutubeの音楽を聞くためのブックマークレット作りました。
その２。
この前のやつより、いい感じにしてみた。
iOSのデバイスでyoutubeにアクセスした状態で実行すれば起動します。
動作の解説の動画をつくってみました。
機能
・addで任意の動画を取り込む
・ctrlでコントロールパネルを開閉する。
・audioタグが見えるので、そこで再生停止、シークができる。
・任意の曲を再生開始することができる。
・必要なければ削除できる。
・再生中の曲がなにかわかる。
・設定でロードなしで１曲ループができる。
・音楽リストのexport、import機能
注意点やバグ
・m.youtube.comにアクセスしまくるとwifiだとアク禁くらうみたい。
・別のアプリでメモリーを使いすぎるとページが落ちるらしい。
・回線の問題で動画の読み込みに再生がおいつくと止まっちゃう。
・名前によっては、追加がうまくいかない。
・ipadのエミュレーターでうまく動作しなかった。
・iOS5のsafariのプライベートモードでは、うまく動作しない。
・ほかにも不安定要素がある。
今後の拡張
・アクセス時に利用するcssがあるのですが、これを書き換えればだれでも自由にスキンをかえられるのでそっちの拡充をやってみたい。
・再生リストの取り込みとかもやってみたい。
・mobile端末未対応動画がきちんとスキップできるか不明・・・たぶん無理。
・あとはアイデアあったらどんどん取り込みたいですね。
youtube側がaudioタグで再生するのをサポートしてくれればいいんですけどね。
その２。
この前のやつより、いい感じにしてみた。
今回のブックマークレットはこちら。
javascript:var%20spt=document.createElement('script');spt.src="http://taktodtools.appspot.com/yt/app/main.js";document.body.appendChild(spt);void(0);
iOSのデバイスでyoutubeにアクセスした状態で実行すれば起動します。
動作の解説の動画をつくってみました。
機能
・addで任意の動画を取り込む
・ctrlでコントロールパネルを開閉する。
・audioタグが見えるので、そこで再生停止、シークができる。
・任意の曲を再生開始することができる。
・必要なければ削除できる。
・再生中の曲がなにかわかる。
・設定でロードなしで１曲ループができる。
・音楽リストのexport、import機能
注意点やバグ
・m.youtube.comにアクセスしまくるとwifiだとアク禁くらうみたい。
・別のアプリでメモリーを使いすぎるとページが落ちるらしい。
・回線の問題で動画の読み込みに再生がおいつくと止まっちゃう。
・名前によっては、追加がうまくいかない。
・ipadのエミュレーターでうまく動作しなかった。
・iOS5のsafariのプライベートモードでは、うまく動作しない。
・ほかにも不安定要素がある。
今後の拡張
・アクセス時に利用するcssがあるのですが、これを書き換えればだれでも自由にスキンをかえられるのでそっちの拡充をやってみたい。
・再生リストの取り込みとかもやってみたい。
・mobile端末未対応動画がきちんとスキップできるか不明・・・たぶん無理。
・あとはアイデアあったらどんどん取り込みたいですね。
youtube側がaudioタグで再生するのをサポートしてくれればいいんですけどね。
あとは、時間があるときにぼちぼちプログラムを更新していければ・・とおもいます。
2012年1月13日金曜日
javascriptのfor - inではまったこと
関数の中でfor(keys in 配列)を呼び出したところ。
このkeysの定数はなんとglobal変数になってしまうみたいです。
ローカルにするなら
for(var keys in 配列)
としないとだめ。(safariで確認、ほかのブラウザは未検証)
再帰的処理をかけたところ。keysがこわれて大変なことになった・・・
このkeysの定数はなんとglobal変数になってしまうみたいです。
ローカルにするなら
for(var keys in 配列)
としないとだめ。(safariで確認、ほかのブラウザは未検証)
再帰的処理をかけたところ。keysがこわれて大変なことになった・・・
2012年1月11日水曜日
iphoneでyoutubeの音楽を聞くためのブックマークレット作りました。
iPhone4Sをもちあるいているのですが、暇なときに音楽でも聴きたい・・・でもitunesで同期させるのは面倒。
PCの場合はyoutubeのプレイリストでも準備しておけば、流しっぱなしにしつつ仕事とかできるわけですが、手軽にiphoneでもできたら便利なのに・・・とおもっていました。
デフォルトでついているアプリは１つ再生がおわると、とまって詳細情報にいってしまうしwebでアクセスした場合は、画面をロックすると再生できなくなっちゃいます。
というわけで適当なブックマークレットをつくってみました。
add
iphone4sでのみ、動作確認してあります。
この３つのブックマークレットをまずiphoneのサファリのブックマークに登録してください。
まず適当なブックマークを３つ作ります。
このページでもかまいません。
上記のブックマーク用のプログラムを押し続けると選択されコピーがでてくるので、コピーします。
ブックマークの編集で先ほどのデータを貼付けて３つのブックマークを準備します。
先ほどコピーしたデータを貼付けると若干簡単に準備できます。
safariでyoutube.comにアクセスして、気に入った曲をみつけたら、addのブックマークを実行して、じゃんじゃん追加していく・・・
clearのブックマークを実行すると、追加されたリストがクリアされて登録しなおしになります。
リストができあがったら、playのブックマークを実行します。
すると、youtubeのwebアプリの上にplayというボタンがでてきます。
でてきたら成功。
このplayボタンを押すと、addで追加した曲が順番に再生されていきます。
ロック画面や別のアプリに移動すると、いったん止まってしまいますが、ボームボタンを２連続で押すと再生させることができます。
あとは[javascriptが有効な限り]音楽が再生され続けます。
動作がどうも安定しないときが若干あるみたいです。
そういう時はアクセス動作(データの読み込み)が完了してから１歩ずつ動作させてみてください。
作った感想：youtubeの音楽をベースに音楽を携帯するのはiphoneを買ったころからやりたいと思ってました。iphoneでの動作では、動画を再生すると制限が酷くてやりにくいのですが、audioタグで再生しちゃえばいろいろできるのでは？と思い立ちつくったのが、今回のブックマークレットです。
外の3G回線でもちょっと頭出しに時間がかかりますが、そこそこ動作するのでなかなかいけるんじゃないの？これ？と思ってます。
説明にjavascriptが有効な限り・・・と書きましたが、iphone上のアプリを別途利用していると、開いているyoutubeのページが無効になってしまい。再度アクセスし直すと自動的に読み込み直しがおこる状況になることがあります。この状態になると、javascriptによる次のファイルの読み込みがうまく動作せず、音楽を再生しきったらとまっちゃうみたいです。
ブックマークレットの形にしたのは、youtubeのメディアファイルにアクセスするために、videoplaybackのデータを引っ張ってくるのですが、端末上でうまくやる方法がどうしてもみつからなかったからです。
リスト追加等を手軽にしたのはいいのですが、管理しにくいので、もうちょっとUIをなんとかしたいですね。
動作はaudioのタグの挙動を調べまくってつくりましたので、同じiphoneでもバージョンによっては動作しなかったりするかもしれません。特にロック画面で動作するかといったところは不安・・・こんな端末でも動作したよという報告いただければうれしいです。
いろんな人にこのブックマークレットつかってもらいたいなぁ。
ではでは〜
PCの場合はyoutubeのプレイリストでも準備しておけば、流しっぱなしにしつつ仕事とかできるわけですが、手軽にiphoneでもできたら便利なのに・・・とおもっていました。
デフォルトでついているアプリは１つ再生がおわると、とまって詳細情報にいってしまうしwebでアクセスした場合は、画面をロックすると再生できなくなっちゃいます。
というわけで適当なブックマークレットをつくってみました。
add
javascript:var%20spt=document.createElement('script');spt.src="http://taktodtools.appspot.com/yt/add.js";document.head.appendChild(spt);void(0);
clear
javascript:var%20spt=document.createElement('script');spt.src="http://taktodtools.appspot.com/yt/clear.js";document.head.appendChild(spt);void(0);
play
javascript:var%20spt=document.createElement('script');spt.src="http://taktodtools.appspot.com/yt/play.js";document.head.appendChild(spt);void(0);
iphone4sでのみ、動作確認してあります。
この３つのブックマークレットをまずiphoneのサファリのブックマークに登録してください。
このページでもかまいません。
clearのブックマークを実行すると、追加されたリストがクリアされて登録しなおしになります。
すると、youtubeのwebアプリの上にplayというボタンがでてきます。
でてきたら成功。
このplayボタンを押すと、addで追加した曲が順番に再生されていきます。
あとは[javascriptが有効な限り]音楽が再生され続けます。
動作がどうも安定しないときが若干あるみたいです。
そういう時はアクセス動作(データの読み込み)が完了してから１歩ずつ動作させてみてください。
作った感想：youtubeの音楽をベースに音楽を携帯するのはiphoneを買ったころからやりたいと思ってました。iphoneでの動作では、動画を再生すると制限が酷くてやりにくいのですが、audioタグで再生しちゃえばいろいろできるのでは？と思い立ちつくったのが、今回のブックマークレットです。
外の3G回線でもちょっと頭出しに時間がかかりますが、そこそこ動作するのでなかなかいけるんじゃないの？これ？と思ってます。
説明にjavascriptが有効な限り・・・と書きましたが、iphone上のアプリを別途利用していると、開いているyoutubeのページが無効になってしまい。再度アクセスし直すと自動的に読み込み直しがおこる状況になることがあります。この状態になると、javascriptによる次のファイルの読み込みがうまく動作せず、音楽を再生しきったらとまっちゃうみたいです。
ブックマークレットの形にしたのは、youtubeのメディアファイルにアクセスするために、videoplaybackのデータを引っ張ってくるのですが、端末上でうまくやる方法がどうしてもみつからなかったからです。
リスト追加等を手軽にしたのはいいのですが、管理しにくいので、もうちょっとUIをなんとかしたいですね。
動作はaudioのタグの挙動を調べまくってつくりましたので、同じiphoneでもバージョンによっては動作しなかったりするかもしれません。特にロック画面で動作するかといったところは不安・・・こんな端末でも動作したよという報告いただければうれしいです。
いろんな人にこのブックマークレットつかってもらいたいなぁ。
ではでは〜
登録:
コメント (Atom)