HTML5でGeolocationAPIを使用する
ブラウザのみで位置情報の取得が可能になりました。
WiFi/GPS/携帯電話基地局/IPアドレス
といったものから位置情報を算出し、ブラウザへ渡します。
といっても勝手に読み取られる訳ではなく、利用者の許可のもとでのみブラウザは位置情報へアクセスできます。
※ブラウザにアラートがあがり、確認させる
以下のように位置情報を取得します。
<script type="text/javascript"> //GeolocationAPIの使用可否はnavigetor.geolocationが持っています if(!navigator.geolocation){ //使用不可 メッセージを出力するなどの処理を記述します }else{ //使用可能 //getCurrentPositionを用いて現在の位置情報を取得できます //引数は①成功時のコールバック②失敗時のコールバック③オプションを指定します navigator.geolocation.getCurrentPosition(success, error, option); } /* optionの種類 -enableHighAccuracy:true or false -timeout:タイムアウトまでの時間をミリ秒 -maximumAge:位置情報の有効期間をミリ秒 {}で囲って渡す */ //成功した場合のコールバック関数 //positionオブジェクトが渡される function success(position){ //緯度の取得 var A1 = position.coords.latitude; //経度の取得 var A2 = position.coords.longitude; //高度の取得 var A3 = position.coords.altitude; //誤差の取得(m単位) var A4 = position.coords.accuracy; //方角の取得(度単位) var A5 = position.coords.heading; //速度の取得 var A6 = position.coords.speed(m/s) /* ※端末により対応していないものがある。その場合はnullが返る 上記の値を使用しての何らかの処理 */ } //失敗した時のコールバック関数 //positionErrorオブジェクトが渡される function error(positionError){ //エラーコードを取得 var A1 = positionError.code; //エラーメッセージを取得 var A2 = positionError.message; /* エラーコードの種類 -1(PERMISSION_DENIED)->GeolocationAPI使用不可 -2(POSITION_UNAVAILABLE)->位置情報取得不可 -3(TIMEOUT)->タイムアウト -0(UNKNOWN_ERROR)->不明なエラー */ }
canvasの使い方2/2(グラデーションから)
機能の続きです。
- 四角のグラデーションをつけます
function draw(){ var canvas = document.getElementById("draw"); var context = canvas.getContext("2D"); //グラデーション範囲を指定 x=0/y=0からx=0/y=300までを範囲に var gradient = context.createLinearGradient(0,0,0,300); //開始点0から0.5までを青、0.5から最後までを赤に gradient.addColorStop(0, 'blue'); gradient.addColorStop(0.5, 'red'); //塗りつぶしの色にgradientを入れる context.fillStyle = gradient; context.fillRect(0,0,300,300); }
- 丸のグラデーションをつけます
function draw(){ var canvas = document.getElementById("draw"); var context = canvas.getContext("2D"); //グラデーション範囲を指定 var gradient = context.createRadialGradient(0,150,50,0,150,150); gradient.addColorStop(0, 'blue'); gradient.addColorStop(0.5, 'yellow'); gradient.addColorStop(1, 'red'); context.fillStyle = gradient; context.fillRect(0,0,300,300); }
HTML5のドラッグアンドドロップAPIについて
その名前通りマウスでのドラッグアンドドロップをブラウザ上でサポートするためのAPIです。
- ドラッグ元になる要素へはdraggable属性を指定します。
例：
<img src="hoge.png" alt="hoge" draggable="true">
- draggable="true"->ドラッグ可能
- draggable="false"->ドラッグ不可
- draggable=""->デフォルト動作
※デフォルトでtrueになっているものはimg・a要素のみです。
- ドラッグイベント
以下があります。
- dragstart->ドラッグ開始
- drag->ドラッグ中(マウスでつかんだ状態)
- dragend->ドラッグ終了
- ドロップイベント
以下があります。
- dragenter->ドラッグ元要素がドロップ先要素内に入った
- dragleave->ドラッグ元要素がドロップ先要素から出た
- dragover->ドラッグ元要素がドロップ先要素内にいる
- drop->ドロップ中
上記の、ドラッグイベント・ドロップイベントはそれぞれ「on〜〜〜」イベントハンドラが存在するので、それを用いて各イベントごとの動作を指定する。
例として、「ある画像(ドラッグ元)をドロップ先に移動させる」を以下に書きます。
[html]
<img id="moto" src="hoge.png" draggable="true" alt="hogeドラッグ元画像" ondragstart="onDragStart(event)" /> <div id="drop" ondrop="onDrop(event)">ドロップ先</div>
//ドラッグ元画像のドラッグ開始時に呼ばれる function onDragStart(event){ //eventのDataTransferに「text」というキーでドラッグ元要素のidを設定します。 //ドラッグ元からドラッグ先へのデータ受け渡しでは常にこのDataTransferを使用します。 //この場合だと、「moto」が入ります。 event.dataTransfer.setData("text", event.target.id); } //ドロップ先要素にドラッグ元要素が置かれたときに呼ばれる function onDrop(event){ //onDragStart()でセットしたidの値を取得します。 var id = event.dataTransfer.getData("text"); //取得したidのエレメントを取得します。 var element = document.getElementById(id); //ドロップ先の子要素としてエレメントを追加します event.currentTarget.appendChild(element); }
ちょこちょこ誤字などあるかもです。
canvasの使い方1/2(線の描画と単色塗りつぶしまで)
散々他のブログで書かれていますが、メモとして残します。
基本的に以下の手順で描画させます。
- canvas要素を使い、描画させる場所を作ります。
※canvas要素で囲まれた文字は、使用できない場合のみ表示されます。
<canvas id="draw" width="300" height="300">お使いのブラウザはcanvas要素に対応していません</canvas>
- 四角形の描画
function draw(){ //描画させたいcanvas要素のノードを取得する var canvas = document.getElementById("draw"); //描画のための2Dコンテキストオブジェクトを取得する //※将来的に3Dなどが追加される予定だが、今のところ2Dのみ var context = canvas.getContext("2D"); /* 塗りつぶしの■を描画 fillRect()を使用する。 ①描画開始点のxを指定 ②描画開始点のyを指定 ③横の長さを指定 ④縦の長さを指定 */ context.fillRect(10,10,100,100); /* □に切り抜く clearRectを使用する。 引数はfillRectと同じ */ context.clearRect(20,20,200,200); /* □の枠線を描画 strokeRect()を使用する。 引数はfillRectと同じ */ context.strokeRect(30,30,300,300); }
- 線の描画
function draw(){ //描画させたいcanvas要素のノードを取得する var canvas = document.getElementById("draw"); //描画のための2Dコンテキストオブジェクトを取得する //※将来的に3Dなどが追加される予定だが、今のところ2Dのみ var context = canvas.getContext("2D"); //beginPath()でパス指定を開始する context.beginPath(); //moveTo(x,y)で描画の開始点を指定する context.moveTo(10,10); //lineTo(x,y)で終点を指定する context.lineTo(30,30); //strokeで描画させる context.stroke(); /* 〜〜〜ここまでで斜めの線が引ける〜〜〜〜 moveTo/lineToを複数回使用することで、複雑な描画も可能になる 以下は△を描画 */ context.beginPath(); context.moveTo(100,100); context.lineTo(200,200); context.lineTo(50,200); context.closePath(); context.stroke(); //色付きの△を描画するには、closePath()からstrokeの間でスタイルなどを指定します context.beginPath(); context.moveTo(100,100); context.lineTo(200,200); context.lineTo(50,200); context.closePath(); //線の色 context.strokeStyle = "#000000"; //線の太さ context.lineWidth = 3; //塗りつぶす色 context.fillStyle = "red"; //塗りつぶし context.fill(); context.stroke();
HTML5の形式についての超初歩的なメモ
- DOCTYPEの宣言がシンプルになった
<!doctype html>
- html要素について
<html lang="日本語ならja">
- (head要素内)文字エンコーディング指定
基本的にutf-8のみでやるべき。
<head> <meta charset="utf-8" /> </head>
- (head要素内)外部script/cssの指定
<head> <script src="./ja/hoge.js" ></script> <link rel="stylesheet" href="./css/fuga.css"> </head>
- 構造化のために新しく追加された要素
- section->html内のセクション
- header->ヘッダーを表す
- footer->フッターを表す
- nav->主要なリンクなどのナビゲーション
- article->ニュースの記事やブログの投稿などの、単体でもコンテンツとして成り立つ独立したセクション
- aside->主要なコンテンツと若干の関連を持つセクション
- hgroup->セクションの見出しなどの
要素をまとめる <hgroup> <h2>hoge1</h2> <h2>fuga1</h2> <h2>hoge2</h2> <h2>fuga3</h2> </hgroup>
- figure->図や表など
- figcaption->図や表へのキャプション（簡単な説明など）
<figure> <img src="./img/hoge.png" alt="sample"> <figcaption>figcaptionの説明</figcaption> </figure>
- mark->テキストのハイライト
- ruby->ルビを振る要素
- rt->ルビのテキスト
- rp->ルビのテキストを囲む記号を指定
<ruby> 難漢字<rp>(</rp><rt>むずかしいかんじ</rt><rp>)</rp> </ruby>
- time->グレゴリオ暦による日付、時刻を表す
.htaccessでPC向けとiPhone向けを選択可能にする
まず、以下のように書くことでiPhoneは自動でiPhone向けページに遷移するように出来る。
<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_USER_AGENT} iPhone RewriteRule ^$ http://hoge.com/ [R] </IfModule>
意味はユーザーエージェント見て、「iPhone」だったらhttp://hoge.com/にリダイレクト
ここに
RewriteCond %{QUERY_STRING} !mode=pc
を追加する。これはクエリーストリングにmode=pcがついてなかったら〜という条件
これでいいはず。
