javascriptのクラス継承の話

javascriptにもオブジェクトやクラスという概念があります。

書き方がいっぱいあって、なんともしっくりこない最近ぼんやりとわかるようになってきました。

クラス継承のテスト - jsdo.it - share JavaScript, HTML5 and CSS

実行すると、cのクラスで定義されているalertボックスが表示されます。

とりあえず紆余曲折あったもののこの形が僕としては一番気に入った感じ。

会社でのプログラムにもいれてみた。

ただし、eclipseやAptanaStudioの入力支援では、継承元のメンバ関数がよばれてくれない等、やりにくい部分が若干あるみたい。

うーん。

jqmobiに対応したcolorPicker作りかけ。その２

jqmobiの関数をつかいまくってつくったバージョンのcolorpickerをつくってみました。

まだ、パネルの内容がおおきくなってスクロールしてしまうときの処置(スクロール停止)がはいっていませんが、それ以外はおおむねできたとおもってる。

Color Picker for jqmobi - jsdo.it - share JavaScript, HTML5 and CSS

どうでっしゃろ？

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を保持しておかないと動作がおかしくなりますので、ご注意を・・・

jqmobiに対応したcolorPicker作りかけ。

ColorPickerをつくったので、せっかくなのでwebアプリに対応してみたい。

というわけで、iphone上でも、スクロールせずに動作するように調整してみました。

とりあえず動作はできましたが、jqmobi用で使うには、jqmobi用にカスタマイズしないとだめっぽい。
スクロール動作がうまく禁止にできんわ。これ。

現状では、jqmobiを使わないサイトでは、普通に動作。jqmobiをつかった場合はスクロールがあると動作がおかしくなる。という感じになりました。

ほぼ１日これにかかりっきりだったのにできなかったのが非常に残念。

colorPickerを置いたjqmobiの動作テスト - jsdo.it - share JavaScript, HTML5 and CSS

調整は明日以降にもちこしだな。
このColorPickerを利用して、お絵描きするwebアプリや、待ち合わせ支援のwebアプリを作る予定です。

html5の色選択動作つくってみました。

html5で動作するcolorPickerをつくってみました。
このライブラリだけ読み込めば動作し、好きな要素にくっつけることができます。

Color Pickerサンプル - jsdo.it - share JavaScript, HTML5 and CSS

よかったらつかってみてください。
自分としては、jqmobiで利用できるように調整していきたいですね。
いまのところtouch系のイベントのbindを実行していないので、iphoneでは利用できないし・・・

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

jqmobiのベースとなる動作 - jsdo.it - share JavaScript, HTML5 and CSS

適当にjsdo.itにあるいい感じのサンプルを、jqmobi化でもしてようかな・・・

リモートデバッグの方法をつくってみました。

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のところを適当な文字列に変えてご利用くださいな。

jsdo.itをつかってみました。

jqmobiのデモをブログに貼付けたくてjspファイルまでつくってしまったわけですが、こんな面倒なことしなくてもjsdo.itなりを使えば、コードごと貼付けることができるみたいですね。

というわけでつかってみた。

jqmobiの動作デモ

jqmobi基本動作 - jsdo.it - share JavaScript, HTML5 and CSS

websocketによるテキストチャットデモ

websocketチャットテスト - jsdo.it - share JavaScript, HTML5 and CSS

jqmobiについてやってみる、その４ スクロール編

プログラムはいつものとおり、githubにあげてあります。

さて、今回はスクロール・・・
左右、上下にスクロールできるようにするものです。
このスクロールですが、いれようと思えばheaderとかにもいれれるので、スクロール可能なタイトルなんてものもつくれます。

content/scroll.htmlをみていただければわかりますが、jqmobiのkitchensinkとは違い、片方の定義しか実行していません。
横のスクロールの定義の部分で、縦のスクロールの否定をいれてやるとなぜか動作がおかしくなります。

余談ですが、hash付きで情報のロードを実行するとどうやら動作がくずれることがあるみたいですね。
githubのソースはなるべくそれぞれのパネルのプログラムが別のファイルになるようにしてありますが、できたら、１つのファイルにまとめてしまっておいた方が無難かもしれません。
バグというより、mobile safariの動作の影響かなとみていますけど。

jqmobiについてやってみる、その３ カルーセル編。

sencha touchからjqmobiに浮気しています。今回はカルーセルという、指で左右にパネルを動かすと、左右にスライドするやつの話です。

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がうまく動作しないので、とりいそぎあきらめました。

では、次は何をやるかな・・・

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を利用して別ページの内容として読み込むのも組み立ててみました。

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・・・