master-html5.blogspot.com
HTML5をマスターする: 現在位置を取得する
http://master-html5.blogspot.com/2011/08/blog-post_02.html
現在位置を取得するには、Geolocation APIのgetCurrentPositionメソッドを使います。 位置情報取得成功Callback関数には、Positionオブジェクトが引数として渡され、Javascriptからそれらの情報にアクセスすることができます。 速度(m/秒). Window.alert("このブラウザはGeolocation APIを利用できません");. Var l = document.getElementById("location"). LinnerHTML = "緯度:" position.coords.latitude " br / ". 経度:" position.coords.longitude " br / ";. Var message = " ;. Message = "タイムアウトが発生しました";. Case error.POSITION UNAVAILABLE:. Message = "位置情報が利用できませんでした";. Case error.PERMISSION DENIED:. Case error.UNKNOWN ERROR:. Video...
master-html5.blogspot.com
HTML5をマスターする: SVGを描画する
http://master-html5.blogspot.com/2011/07/svg.html
SVGとは、Scalable Vector Graphicsの略です。 SVGファイルはその名の通りベクターベースなので拡大してもピクセルがカクカクになったりしないという利点があります。また、XMLベースなのでグラフィックツールなどを利用して簡単にデータが作成できるという利点もあります。 Svg height="150" width="300" xmlns="http:/ www.w3.org/2000/svg". Rect height="100" style="fill: orange;" width="100" x="30" y="30" /rect. Rect height="100" ry="8" style="fill: black;" width="100" x="150" y="30" /rect. Svg height="100" width="100" xmlns="http:/ www.w3.org/2000/svg". Circle cx="50" cy="50" r="50" style="fill: blue;" width="100" /. Polygon fill="#F...
master-html5.blogspot.com
HTML5をマスターする: 経度・緯度から住所を取得する
http://master-html5.blogspot.com/2011/08/blog-post_9154.html
Google Map APIを利用して、経度、緯度情報から住所を取得するには、Geocoderオブジェクトを使用します。 Meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0" /. Div id="map" style="border:1px solid #0000FF; width:400px; height:300px;" /div. Script type="text/javascript" src="http:/ maps.google.com/maps/api/js? Var map, infoWindow;. Var map = document.getElementById("map");. MapinnerHTML = "このブラウザは位置情報をサポートしていません。";. Navigator.geolocation.getCurrentPosition(showMap2, showError2,. Var op = {.
master-html5.blogspot.com
HTML5をマスターする: 2011/07 - 2011/08
http://master-html5.blogspot.com/2011_07_01_archive.html
ブラウザにドラッグしたファイルを読み込むには、「 ドラッグ&ドロップを検出する. 12301;と同じように、dropイベントを補足し、「 ローカルファイルを読み込む. Div id="dragAndDropSample" style="border: 1px solid #0000FF;border-radius:4px; width:300px; height:200px;" onDragOver="onDragOver2(event)" onDrop="onDrop2(event)". Var info = document.getElementById("info");. Var v = document.getElementById("view");. Var fr = new FileReader();. Var fs = event.dataTransfer.files;. For ( var i = 0 ; i fs.length ; i ) {. Var f = fs[i];. If(/ image/.test(f.type) {. Fronload = function() {.
master-html5.blogspot.com
HTML5をマスターする: データをローカルに保存する
http://master-html5.blogspot.com/2011/08/blog-post_03.html
データをローカルに保存するには、Web Storageを使います。 従来はクッキーを使って最大4KBまでは保存できましたが、HTML5はWeb Storageを使って5MB程度の保存ができるようになりました。 Web Storageには、sessionStorageとlocalStorageの2種類があります。 ウィンドウやタブ毎に保存場所が異なり、sessionStorageに保存されたデータは他のウィンドウやタブからは参照することができません。また、セッション終了時(ウィンドウやタブを閉じる)には同時にsessionStorageに保存されたデータも削除されます。 LocalStorageはプロトコル・ドメイン・ポート番号が同じであれば全てのセッションでデータが共有され、セッションが終了してもデータは永続されます。 Key : input type="text" name="key" id="key" size="20". Value: input type="text" name="value" id="value" size="20". If ( keyValue & valValue ) {.
master-html5.blogspot.com
HTML5をマスターする: ドラッグ&ドロップを検出する
http://master-html5.blogspot.com/2011/07/javascriptdatatransferdraggableimgadrag.html
ドラッグ&ドロップを検出するには、onDragStartのイベントを補足して、dataTransferのメソッドでデータを受け渡します。 draggable属性がデフォルトで有効なのはimg要素とa要素だけなので、その他はドラッグ&ドロップを行わせる場合は明示的にdraggable=”true”に指定する必要があります。 Img draggable="true" id="flower" ondragstart="onDragStart1(event)" src="http:/ 4.bp.blogspot.com/-0SX a1se2h0/Ti071J9luII/AAAAAAAAAWY/Q3DjidIAuuw/s1600/ Sunflower.gif" /. Img draggable="true" id="Ixia" ondragstart="onDragStart1(event)" src="http:/ 1.bp.blogspot.com/-E6iPR9k0E1E/TjUslvmrBqI/AAAAAAAAAW0/dJgOtNCISpM/s1600/Ixia.gif" /. DebuginnerHTM...
master-html5.blogspot.com
HTML5をマスターする: 他ブラウザからドロップする
http://master-html5.blogspot.com/2011/08/blog-post.html
ブラウザ外の別アプリケーションからドラッグ&ドロップを受け入れるには、ドロップイベントを補足してdataTransferでドロップされた情報を読み取ります。 他アプリケーション(ブラウザ)からドロップすることができるMIME/TYPEは、「text/plain」「text/html」「text/xml」「text/uri-list」です。 下の例は、他ブラウザで適当なサイトを表示して適当な文字を選択し、そのまま四角の中にドロップすると、ドロップされた情報を表示する例です。 Div id="dropSample" ondragover="onDragOver2(event)" onDrop="onDrop2(event)" style="border:1px solid #0000FF;border-radius:4px; width:300px; height:200px". Var di = document.getElementById("dropItemInfo");. Var text = event.dataTransfer.getData("text/plain");. Video要素にJa...
master-html5.blogspot.com
HTML5をマスターする: スライドバー
http://master-html5.blogspot.com/2011/07/blog-post_7292.html
Minで最低値、maxで最高値、stepで上下する最小単位、valueでデフォルト値を指定します。 執筆時点ではChromeのバージョン7以降、Operaの9以降、及びSarafiの5以降でないと正常に動作しないようです。 Input type="range" name="num" min="0" max="100" step="5" value="50". Span id="val" 50 /span. Document.getElementById("val").innerHTML = value;. スライドバーで数値を入力するには、input要素のtypeにrangeを指定します。 minで最低値、maxで最高値、stepで上下する最小単位、valueでデフォルト値を指定します。 執筆時点ではChromeのバージョン7以降、Operaの9以降、及びSarafiの5以降で. 時々プロパティ等で「-moz-プロパティ名」とか、「-webkit-プロパティ名」等を見かけることがあります。 これは、HTML...Google Mapに位置情報を表示するには、「 現在位置を取得...Canvasにテキスト...
master-html5.blogspot.com
HTML5をマスターする: テキストを角丸の枠線で囲う
http://master-html5.blogspot.com/2011/07/blog-post_3117.html
Border:2px solid #0000FF;. P class="round" 角丸の枠線で囲ってます。 /p. スライドバーで数値を入力するには、input要素のtypeにrangeを指定します。 minで最低値、maxで最高値、stepで上下する最小単位、valueでデフォルト値を指定します。 執筆時点ではChromeのバージョン7以降、Operaの9以降、及びSarafiの5以降で. テキストを角が丸い枠線で囲うには、border-radiusプロパティを指定します。 角丸の枠線で囲ってます。 style type=text/css .round { border-radius:8px; bo. JavaScriptからValidityのエラー詳細を取得することができます。 名前 内容 element.willValidate 入力チェックが行われるか(true/false) element.setCustomerValidity(エラーメッセージ) 任意のエラ. Canvasにテキストを描画するには、以下のプロパティ、メソッドを使いますz...
master-html5.blogspot.com
HTML5をマスターする: 文字に影を付ける
http://master-html5.blogspot.com/2011/07/blog-post_4880.html
テキストに影を付けるには、「text-shadow」を指定します。 Text-shadow:X軸オフセット Y軸オフセット ぼかしの範囲 影の色;. Text-shadow:5px 5px 5px #000000;. P class="shadow1" これは画像ではありません。その証拠に文字を選択できます。 /p. スライドバーで数値を入力するには、input要素のtypeにrangeを指定します。 minで最低値、maxで最高値、stepで上下する最小単位、valueでデフォルト値を指定します。 執筆時点ではChromeのバージョン7以降、Operaの9以降、及びSarafiの5以降で. テキストを角が丸い枠線で囲うには、border-radiusプロパティを指定します。 角丸の枠線で囲ってます。 style type=text/css .round { border-radius:8px; bo. Google Mapに位置情報を表示するには、「 現在位置を取得する 」と同様に現在位置を取得し、その後Google Map AP...Canvasにテキストを描画するには、...