HTML / CSS / JavaScript

WidgetPadの表示

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

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

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

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

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

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

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

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

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

http://widgetpad.com/1773/

こんな感じ〜
Countuphd

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

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

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

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

Img_0540 Img_056

【例】以下な感じでデータの読み書き
//保存されたデータの読み込み
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のことを簡単に自分メモhappy01

Web Storage

  • クライアント側でデータの保存ができる
    • 2種類の保存方法
      • 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

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

CSS+JavaScriptでCountUpを作ってみる

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

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

CSS+JavaScriptでSUSOKUを作ってみる

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

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

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

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

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

Processing.jsのお勉強(3:SUSOKUを作ってみる)

Processing.js のお勉強の3回目

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

こんな感じ〜happy01

Img_0529

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

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

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

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

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

Safariscreensnapz038

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

Processing.jsのお勉強(2)

昨年の9月に「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でアクセスしてみて下さい。
Img_0097

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

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