WidgetPadの表示

「HTML, CSS, JavaScriptをお勉強」で使ってるWidgetPadのサイトですが、iPhone 3GS + iOS4のsafariでアクセスすると表示が変になります(以下）。

で、iPhone OS3の頃は問題なかったので、iOS4になったことが問題かと思っていたんですが、iPhone 3G + iOS4のsafariでは、何と、これまで通りちゃんと表示してくれました。

じゃぁ、iPhone 4は、どうなんでしょうか？？？
safariの問題なのかサイトの問題なのかハッキリしない気になる〜

追記：正確にバージョンを書いてなかったんですが、表示に不具合のあるiPhone 3GSは、iPhone 3GS+iOS4.1betaです。でも、もう一台iPhone 3GSがあるのですが、そちらはiOS4.0.2で正常に表示されましたので追記します。ちなみに、iPhone 3G + iOS4.1betaは正常に表示されます。

CSS+JavaScriptで iPad対応CountUpを作ってみる

ここんところ、HTML, CSS, JavaScriptをお勉強してます。

先日CSS+JavaScriptでiPhone用のCountUpを作ってみたんですが、今回はiPadに対応させてみましたと言ってもiPadの画面サイズ合うように数値を変えただけなんですけどね

iPadのsafariで以下のURLにアクセスしてみて下さい

http://widgetpad.com/1773/

こんな感じ〜

----------------------------------
ちなみに本物は＞CountUp

HTML5のWebStorageでハイスコアー／ベストタイムを記録してみる

先日作ってみたSUSOKUとCountUpですが、HTML5のWebStorageの機能を使ってハイスコアーやベストタイムを記録される（次回アクセスした時に残っている）ようにしてみた（下の図の赤丸の部分）。いちおうバージョンが「2010/5/9 #2」（黄色矢印）と表示されてないと対応したバージョンでないです。

• SUSOKU
• CountUp

【例】以下な感じでデータの読み書き
//保存されたデータの読み込み
function loadHiScore() {
  for(var i=0; i<localStorage.length; i++) {
    var key = localStorage.key(i);
    if(key=="susoku_hiscore")
       hiscore=localStorage.getItem("susoku_hiscore");
  }
}
//データの保存
function setHiScore() {
  localStorage.setItem("susoku_hiscore",hiscore);
}    

で、いちおうWeb Storageのことを簡単に自分メモ

Web Storage

• クライアント側でデータの保存ができる
  • ２種類の保存方法
    • sessionStorage (Windowベース)
    • localStorage (Domainベース)
• API (key/value形式で値を保持）
  
  • Methods
    • localStorage.selItem(key, value)
      localStorage.key = value
      • storageへkey,valueの設定
    • value=localStorage.getItem(key)
      value=localStorage.key
      • storageからkeyでのvalueの抽出
    • localStorage.removeItem(key)
      • storageからItem削除
    • localStorage.clear()
      • storageのクリア
    • localStorage.length()
      • srorageのサイズ（数）
    • key=localStrage.key(index)
      • storageからkeyの取得

---------------------------
本物の SUSOKU および CountUp

CSS+JavaScriptでCountUpを作ってみる

ここんところ、HTML, CSS, JavaScriptをお勉強してますが、今回は、CSS+JavaScriptでCountUpを作ってみましたといってもTime Trial 25のコードをちょっと改変したダケです
http://widgetpad.com/1655/
（iPhoneのsafariでプレイできます）

----------------------------------
ちなみにCountUp本物

CSS+JavaScriptでSUSOKUを作ってみる

昨日、Processing.jsとHTML5 canvasでSUSOKUを作ってみたんですが、今日はCSS+JavaScriptでSUSOKUを作ってみました。
こんな感じ〜

昨日作ったのは、結構、重い感じでしたが、今回は画像ファイルも使ってなくて、CSSとJavaScriptだけなんで、軽い感じに仕上がりました

iPhoneで以下のURLにアクセスして遊んでみて下さい

• http://widgetpad.com/1645/

-----------------------------------------------------
iPhoneアプリのSUSOKUの本物はこちら

Processing.jsのお勉強（３：SUSOKUを作ってみる）

Processing.js のお勉強の３回目

• Processing.jsのお勉強（２）
• Processing.jsのお勉強

今回は、Processing.js のお勉強（２） で、processing.jsをiPhoneタッチイベントに反応するように書き換えたので、それを使って、SUSOKU 擬きを作ってみた。

こんな感じ〜

最初は画像は使わない予定で作り始めたんだけど、HTML, CSS, JavaScriptはど〜も苦手ってこともあって、processing.jsから文字サイズが上手く扱えなくて。。。ま、今後の課題。

ということもあってすべて画像で表示してます。ちょ〜重くなってしまった（汗）

SUSOKU 擬きは、http://widgetpad.com/1627/ から利用できます。

1. iPhoneのsafariでアクセス
2. 下の方にある「Play it」というボタンをタップして起動させて下さい。

あと、半日で作ったんで適当なプログラムなんですが、パソコンのsafariかFireFoxでアクセスして「View source」のindex.htmlを見て頂くと、ソースが見れます。widget.jsとstyle.cssは今回はいじってませんので、index.htmlの中だけです。

• Processing.js
• HTML5 Canvas
• SUSOKUの本物

Processing.jsのお勉強（２）

昨年の９月に「Processing.jsのお勉強」って書いたんですが、HTMLとか、CSSとか、JavaScriptとか、苦手だし、HTML5も、もうちょっとばかしかじろうと思ってます。

今回、

• iPhoneのタッチイベントに反応するように、processing.jsをちょっと改変してみました。
• あとhttp://www.widgetpad.comを使って作ってみました。保存とかアップロードとか必要なく、firefoxかsafariで編集＆保存＆起動確認などが簡単にでき、とても使い勝手が良かったです。

Processing.jsのbasic exsample
http://widgetpad.com/1609/
にiPhoneのsafariでアクセスしてみて下さい。

• 適当ですが、iPhoneのタッチイベントに反応するように、processing.jsをちょっと改変したprocessing.jsは、ここ をクリックするとダウンロードできます。
• Processing.jsのダウンロードのページにあるZipped Examples:processing-js-0.8-examples.zipのprocessing.jsを書き換えてます。これに含まれるinit.jsも必要かな？？