2013/3/30 16:47 | Category アプリ開発実践フェーズ | Comment (0)
■HTML5 API
(8)Geolocation ～ 【HTML5_API/geolocation/geolocation.html】
※なんで、pdfに載っていないんだ！メモめも・・・
位置情報を取得する Geolocation APIが利用できる。
デバイス関係ななく、同じ記述で位置情報の処理が実現できる。
無線LAN・WiFi・携帯電話基地局・GPS・IPアドレスなどから位置情報を取得します。
接続環境次第で、取得できる位置情報の精度や取得に掛かる時間が異なります。
ユーザーのセキュリティとプライバシーに配慮した仕様
位置情報をリクエストすれば必ず許可が必要が必要となります。
ユーザーはブラウザの確認ウィンドウで、位置情報の取得の許可をするかどうかを選択できるようになっています。
◇geolocation
位置情報を取得することができる APIです。
geolocationがサポートされているブラウザであれば、デバイス関係なしで使用することが可能です。
ローカルニュースなど位置情報からサービスを広げることも可能です。
サポート情報の確認
http://caniuse.com/#search=geolocation
http://caniuse.com/
◇位置を取得
位置を取得する方法が2つあります。
●現在の位置を取得する
navigator.geolocation.getCurrentPosition( 成功, 失敗, option)
●位置を定期的に取得する
navigator.geolocation.watchPosition( 成功, 失敗, option)
成功時には「positionオプジェクト」を取得します。
取得内容は以下の通りです。
position.coords 緯度経度などの情報
poition.timestamp 位置を取得した時刻
◇位置を取得
position.coords で取得した緯度経度の情報について
coords.latitude ・・・ 緯度
coords.longitude ・・・ 経度
coords.altitude ・・・ 高度
coords.accurancy ・・・ 正確性
coords.altitudeAccurancy ・・・ 高度の正確性
coords.heading ・・・ 方位
coords.spped ・・・ 速度
◇失敗時の取得
失敗時には「errorオブジェクト」を取得します。
取得内容は以下の通りです。
error.code ・・・ エラーコード
1.位置情報の取得が許可されていない
2.位置情報の取得が利用できない
3.タイムアウト
error.message ・・・ エラーメッセージ
◇option の指定
3つめの引数では関数を実行する時のオプションを指定します。
指定しなくても可能。
option.enableHighAccuracy ・・・ より高い正確性を求める(取得時間が遅くなる)スマフォではGPSを利用する
※スマフォでは指定しない方がいい？
option.timeout ・・・ 処理のタイムアウト
option.maximumAge ・・・ キャッシュされている位置情報オプジェクトを許容するキャッシュ時間
◇取得停止
定期的に取得する「watchPosition」を取得する方法
navigator.geolocation.clearWatch( watchID)
「watchPosition」は制作時にidを返します。
idを使用して「clearWatch」で停止させます。
※落ち着いたら、jQuery Mobileと連動してみて、iPhone でテストしてみよう！！！
★素材写真のフォルダーをコピーしよう～～～！！！
◎簡単な JavaScriptでの、無名関数の使い方を、テストしてみよう vVV
■Flash
フレームの挿入 F5
2013/3/28 19:06 | Category アプリ開発実践フェーズ | Comment (0)
■HTML5 API
(5)Canvas sample2 ～ パス(四角)を表示 ～ 【HTML5_API/canvas_sikaku.html】
ctx.beginPath();
ctx.rect(10,10,40,40);
//塗りつぶし
ctx.fillStyle = “f00″;
ctx.stroke();
ctx.closePath(); // 描画してパスが閉じている場合は、何もしない
(6)Canvas sample3 ～ 円を表示 ～ 【HTML5_API/canvas_arc.html】
//パスの開始
ctx.beginPath();
//色指定
ctx.fillStyle = “#f00″;
//線の太さ
ctx.lineWidth=5;
//円の設定（座標、半径、円のスタートとエンド、回転）
ctx.arc( 100, 100, 50, (Math.PI/180)*0, (Math.PI/180)*360, false); // full circle
//描画
ctx.fill();
ctx.closePath();
(7)Canvas sample3 ～ 線を描画 ～ 【HTML5_API/canvas_line.html】
●lineCapプロパティ
http://www.html5.jp/canvas/ref/property/lineCap.html
▲三角形を描画 【HTML5_API/canvas_sankaku.html】
//色指定
ctx.strokeStyle = “#000″; //need list of available colors
//線の太さ
ctx.lineWidth = 10;
//線の端の形状
ctx.lineCap = ”; // round | butt
//パスの開始
ctx.beginPath();
//始点
ctx.moveTo( 20, 200);
ctx.lineTo( 200, 200);
ctx.lineTo( 100, 20);
ctx.lineTo( 20, 200);
//自動的に閉じてくれる
ctx.closePath();
//描画
ctx.stroke();
※クローズしないと、閉じた部分の線がキレイにならない！！！
(8)audio 【HTML5_API/audio/audio.html】
2013/3/27 19:30 | Category アプリ開発実践フェーズ | Comment (0)
■jQueryMobile
(5)jQueryMobile1 sample5 [インターフェースデザイン] 【sample5/index.html】
data-role=”fieldcontain”
placeholder=”ヒント出力”
select ～ data-role=”slider”
3/29(金)に、Mac Book Airで試してみよう！！！
■HTML5 API
(1)WebStrage
▼sessionStorage
PHPのセッションだネ！
▼localStorage
プラウザ内に映像的にデータを保存するストレージ
保存は「ドメイン名：ポート番号」の組み合わせ「オリジン」単位で保存。
▽set
window.onload = function(){
localStorage.setItem( “test1″, “test” );
};
▽get
var get_value = localStorage.getItem( “test1″ );
document.getElementById(“test”).innerHTML = get_value;
▽remove
localStorage.removeItem( “test1″ );
(2)AppCache
▼アプリケーションキャッシュ：CacheManifestの基本
処理の流れ：
１回目HTMLをリクエスト：
キャッシュを保存
２回目HTMLをリクエスト：
利用
▽index.html
▽.htaccess
AddType text/cache-manifest .manifest
▽cache.manifest
(3)Canvas基礎
<canvas id=”＊＊” width=”1024″ height=”764″></canvas>
★注意：サイズ属性のサイズ指定はstyle属性で指定すると、うまくいかない！！！
var can = document.getElementById(“drowarea”);
var ctx = can.getContext(“2d”);
(4)Canvas sample1 ～ 文字を表示 ～ 【HTML5_API/canvas_font.html】
★参考サイト
ctx.textBaseline:文字の設置するベースライン
http://www.html5.jp/canvas/ref/property/textBaseline.html
(5)Canvas sample2 ～ パスを表示 ～ 【HTML5_API/canvas_sikaku.html】
ctx.beginPath();
ctx.rect(10,10,40,40);
ctx.stroke();
2013/3/26 17:26 | Category アプリ開発実践フェーズ | Comment (0)
■jQueryMobile
(2)jQueryMobile sample1 [ページ作成] 【sample1/index.html】
<div data-role=”page”>
ヘッダ コンテンツ フッタ
</div>
<div data-role=”page” id=”page2″ data-add-back-btn=”true”>
ヘッダ コンテンツ フッタ
</div>
<div data-role=”page” id=”page3″ data-add-back-btn=”true” data-back-btn-text=”戻る”>
ヘッダ コンテンツ フッタ
</div>
(3)jQueryMobile sample2 [リスト表示] 【sample2/index.html】
▼スマホ向けリストの設定
<ul data-role=”listview”>
▼テーマの設定 (背景色)
<li data-theme=”e”>
(4)jQueryMobile1 sample3 [ボタンの追加] 【sample3/index.html】
<div data-role=”header”>
<h1>ヘッダー</h1>
<a href=”#page1″>ボタン</a>
<a href=”#page3″%gt;class=”ui-btn-right”>ボタン</a>
</div>
★ヘッダの中にa要素を書くと、勝手にボタンにしてくれる。
☆class=”ui-btn-right” での設定も可能。
●複数ボタンの設置などのサンプル
http://d.hatena.ne.jp/Naotsugu/20120108/1326034322
(5)jQueryMobile1 sample4 [ページ遷移時の効果] 【sample4/index.html】
<a data-role=”button” href=”#page2″ data-transition=”slide”>slide</a>
<a data-role=”button” href=”#page2″ data-transition=”slide” data-direction=”reverse”>slide</a>
data-transition=siedup
data-transition=sieddown
data-transition=pop
data-transition=fade
data-transition=flip
data-transition=flow
data-transition=turn
data-transition=none
(5)jQueryMobile1 sample5 [インターフェースデザイン] 【sample5/index.html】
▼ボタンのアイコン表示
data-icon=”arrow-r”
▼ボタンのアイコン位置
data-iconpos=”right”
▼アイコンだけ表示
data-iconpos=”notext”
◇ボタンのグループ
▼ボタンの縦にグループ化
data-role=”controlgroup
▼ボタンの横にグループ化
data-role=”controlgroup data-type=”horizontal”
(6)jQueryMobile1 sample6 [フォーム作成] 【sample6/index.html】
data-role=”fieldcontain”
placeholder=”ヒント出力”
select ～ data-role=”slider”
3/29(金)に、Mac Book Airで試してみよう！！！
2013/3/24 14:41 | Category アプリ開発実践フェーズ | Comment (0)
■jQuery基礎
(18)プラグイン(ページスクローラー)を使用する[1] 【plugin/page-scroller/index.html】
(19)プラグイン(ページスクローラー)を使用する[2] 【plugin/page-scroller/index.html】
コリス スムーズページ スクローラー
(20)プラグイン[画像の拡大表示]を使用する[1] 【plugin/fancybox/index.html】
※基本の拡大のみは、class=”menImg” を設定して、fancyboxを呼び出すだけ。
$( function(){
$( “.menuImg”).fancybox();
});
(21)プラグイン[画像の拡大表示]を使用する[2] 【plugin/fancybox/index2.html】
▼写真タイトルの表示
title=”シラスサラダ”
▼次の写真への矢印で見れるグループの設定
data-fancybox-group=”gallery”
▼TIPS & TRICKS
http://fancyapps.com/fancybox/#useful
http://jsfiddle.net/nJfAZ/
http://jsfiddle.net/jRsjK/
(22)プラグイン(スライドショー)を使用する[1] 【plugin/slidesjs/index.html】
▼slides js
http://www.slidesjs.com/
(23)プラグイン(スライドショー)を使用する[2] 【plugin/slidesjs/index.html】
(24)プラグイン(スライドショー)を使用する[3] 【plugin/slidesjs/index.html】
ページネーション : スライドのボタン
$( “#slides”).slides( {
generatePagination: false,
play: 5000,
bigTarget: true
});
▼オプション
effect: ‘fade’,
crossfade: true
公式サイトで、オプションを参照。
■jQueryMobile
(1)jQueryMobileとは 【jQueryMObile.pdf】
【jQuery Mobileサイト】
http://jquerymobile.com/
【 jQuery Mobile日本語リファレンス】
http://dev.screw-axis.com/doc/jquery_mobile/
フレームワーク/framework：
枠組み、サイト等を構築するときの下地みたいなもの
jQueryMobile対応について
http://jquerymobile.com/gbs/
グレードAが全ての機能が使用することが可能です
▼jQueryMobileの基本形 【sample0/sample0.html】
(2)jQueryMObile1 [ページ作成]
2013/3/23 16:42 | Category アプリ開発実践フェーズ | Comment (0)
■jQuery基礎
(7)さまざまなセレクタを使用する[1] 【jQuery01.html】
$( “#para a”).click( function(){
/* $( “#ttl”).css( “color”, “#00f”); */
$( “#nav li:eq(0)”).css( “color”, “#f60″); //0番目のliの色を変える！
} );
(8)さまざまなセレクタを使用する[2] 【jQuery01.html】
▼0番目のliの色を変える！
$( “#nav li:eq(0)”).css( “color”, “#f60″);
▼奇数番目のliの色を変える！
$( “#nav li:odd”).css( “color”, “#f60″);
▼偶数番目
$( “#nav li:even”).css( “color”, “#f60″);
▼指定した項目よりも小さい less than
$( “#nav li:lt(2)”).css( “color”, “#f60″);
指定した項目よりも大きい greater than
$( “#nav li:gt(1)”).css( “color”, “#f60″);
(9)メソッドを使用する 【jQuery01.html】
▼テキストの変更
$( “#ttl”).text( “デジタルハリウッド関連のスクール”);
▼htmlの追加
$( “#ttl”).html( “
デジタルハリウッド関連のスクール
“);
▼htmlの置き換え
$( “#ttl”).replaceWith( “
デジタルハリウッド関連のスクール
“);
var schoolName = $( “#nav li:eq(0)”).text();
$( “#ttl”).text( schoolName);
(10)jQueryを記述する準備[1] 【jQuery02.html】
(11)jQueryを記述する準備[2] 【jQuery02.html】
(12)show()メソッドを使用する 【jQuery02.html】
(13)アニメーション関連のメソッドを使用する 【jQuery02.html】
(14)アコーディング表現を行う 【jQuery02.html】
(15)アニメーションをメッセージを表示する[1] 【jQuery03.html】
(16)アニメーションをメッセージを表示する[2] 【jQuery03.html】
(17)アニメーションをメッセージを表示する[3] 【jQuery03.html】
(18)プラグイン(ページスクローラー)を使用する[1] 【plugin/index.html】
coliss jQUery プラグイン
ページスクローラー
「コリス ページスクローラー」で検索。
2013/3/22 18:02 | Category アプリ開発実践フェーズ | Comment (0)
アプリ専攻 映像トレーニング 5回目。
■JavaScript基礎
(24)配列を使用する 【js15-2.html】
var weekDay = new Array();
weekDay[0] = “(日)”;
weekDay[1] = “(月)”;
weekDay[2] = “(火)”;
weekDay[3] = “(水)”;
weekDay[4] = “(木)”;
weekDay[5] = “(金)”;
weekDay[6] = “(土)”;
(25)getElementById()メソッドを使用する[1] 【cafe.html】
(26)getElementById()メソッドを使用する[2] 【cafe2.html】
function rollOver(){
document.getElementById( “cafeImg”).setAttribute( “src”, “img/photo01_s_on.jpg”);
}
function rollOut(){
document.getElementById( “cafeImg”).setAttribute( “src”, “img/photo01_s.jpg”);
}
(27)画像のプリロードを行う 【cafe3.html】
var preImg = new Image();
preImg.src = “img/photo01_s_on.jpg”;
(28)JavaScriptを外部化する/イベントハンドラで動かす 【cafe3.html】
■jQuery基礎
(1)jQueryの概要
jQueryは、「JavaScriptライブラリ」や「フレームワーク」と呼ばれるものの１つです。
フレームワーク ・・・ 枠組み・骨組み
JavaScriptライブラリと呼ばれるモノには、他にも
「prototype.js」や「Ext JS」「dojo」などがあります。
(2)jQueryを使用する準備 【start1.html】
公式サイト http://jquery.com からダウンロード
映像内 : 1.8.2
(3)JavaScriptをjQueryに置き換える[1] 【start2.html】
jQuery( function(){
} );
ショートカットの $ で置き換える。
jQuery( function(){
} );
(4)JavaScriptをjQueryに置き換える[2] 【start2.html】
メソッドチェーン
(5)JavaScriptをjQueryに置き換える[3] 【start2.html】
●JavaScript
document.getElementById( “cafeImg”).onmouseover = function(){
document.getElementById( “cafeImg”).setAttribute( “src”, “img/photo01_s_on.jpg”);
}
document.getElementById( “cafeImg”).onmouseout = function(){
document.getElementById( “cafeImg”).setAttribute( “src”, “img/photo01_s.jpg”);
}
●jQuery基本
$( “img[ src='img/photo01_s.jpg']“).hover( function(){
$( “img[ src='img/photo01_s.jpg']“).attr( “src”, “img/photo01_s_on.jpg”);
},function(){
$( “img[ src='img/photo01_s_on.jpg']“).attr( “src”, “img/photo01_s.jpg”);
});
●jQuery簡略化
$( “img[ src='img/photo01_s.jpg']“).hover( function(){
$( this).attr( “src”, “img/photo01_s_on.jpg”);
},function(){
$( this).attr( “src”, “img/photo01_s.jpg”);
});
(6)JavaScriptをjQueryに置き換える[4] 【start4.html】
// 画像のプリロード
$( “![]()
“).attr( “src”, “img/photo01_s_on.jpg”);
// 今から、img要素を作りますヨ！
●start3.html のJavaScriptでの記述の消したシンプルなモノ。
→ start4.html
(7)さまざまなセレクタを使用する[1] 【jQuery01.html】
2013/3/21 17:44 | Category アプリ開発実践フェーズ | Comment (0)
アプリ専攻 映像トレーニング 4回目。
answerBox キャメルケース
(10)引数を引用する
function jumpURL( URL){
location.href = URL;
}
onclick=”jumpURL( ‘http://www.dhw.co.jp’);”
(11)JavaScriptを外部化する
jump.js
(12)windowsオブジェクトを使用する
window.alert( “windowオブジェクトを使用しています！”);
(13)さまざまなゥインドウを開く
window.confirm( “JavaScriptの学習は進んでいますか？【 OK – yes、Cancel – no 】”);
window.prompt( “入力欄にお名前をお書きください。”, “ここに入力してください。”);
(14)変数を使用する 【js10-1.html】
var answerBox = window.confirm( “JavaScriptの学習は進んでいますか？【 OK – yes、Cancel – no 】”);
document.write( answerBox);
(15)if文を使用する[1] 【js10-2.html】
if( answerBox == true){ /* if( answerBox){ でもＯＫ！ */
document.write( “
その調子です！さらに学習を進めて生きましょう。
“);
}
else{
document.write( “
一歩一歩ゆっくりと学習を進めて生きましょう。
“);
}
(16)if文を使用する[2] 【js11.html】
●入力欄の内容に沿って、メッセージを表示！
var yourName = window.prompt( “入力欄にお名前をお書きください。”, “ここに入力してください。”);
if( yourName == “ここに入力してください。”){
document.write( “
お名前の入力をお忘れになったようですね。
“);
}
else{
document.write( “
お名前の入力をありがとうございます。
“);
}
(17)if文を使用する[3] 【js11-2.html】
キャンセルの場合の処理
else if( yourName == “” || yourName == null){ /* null : キャンセルボタンを押した場合 */
入力された名前の表示
document.write( “
ようこそ” + yourName + “さん！条件分岐の理解も進んできましたね！
“);
(18)イベントハンドラを使用した関数を実行する 【js12.html】
window.onload = function(){
処理
}
(19)for文を使用する[1] 【js13.html】
(20)for文を使用する[2] 【js14.html】
※Dreamweaber 挿入パネルの表示
『ウィンドウ』→『挿入』 で右側に表示。
ドラッグして、上メニューの下に配置。
(21)for文を使用する[3] 【js14.html】
※(20)のoption要素を、1960から2012までループさせて、フォームを作る！
for( i = 1960 ; i <= 2012 ; i++){
document.write( "
“);
}
(22)Dateオブジェクトを使用する[1] 【js15-1.html】
var currentDate = new Date();
var myFullYear = currentDate.getFullYear();
document.write( “西暦 : ” + myFullYear + “年
“);
(23)Dateオブジェクトを使用する[2] 【js15-1.html】
月、日、曜日の取得。
var myMonth = currentDate.getMonth() + 1; //月 0:1月～11:12月
var myDate = currentDate.getDate();
var myDay = currentDate.getDay();
2013/3/20 17:13 | Category アプリ開発実践フェーズ | Comment (0)
■JavaScript基礎
(1)JavaScriptの概要
前回
(2)JavaScriptで使用する用語について
オブジェクト指向
命令を送る対象
メソッド
オブジェクトに対しての命令
ブロバティ
オブシェクトの持つ性質
(3)JavaScriptの記述の準備
http-equiv=”cotent-script-type” ????
(4)documentオブジェクトを使用
document.write( “
はじめてのJavaScript
ドキュメントに文字を表示します！
“);
(5)JavaScript非対応のブラウザに対しての記述
※文字を選択して、ctrl+T で、自動的に
で囲んでくれる！
(6)プロバティを使用する
//ブラウザのURLのオブジェクトに対して
location.href = “http://www.dhw.co.jp”;
※おぉ～、特定のページに飛ばすには、この方法が正解だったのか！
(7)イペントハンドラを使用する[1]
JavaScriptによって、ページを移動します。
(8)イペントハンドラを使用する[2]
JavaScriptによって、ページを移動します。
(9)JavaScriptを関数化する
JavaScriptによって、ページを移動します。
(10)引数を引用する
※一括して、リストに変換！
全部、選択して、下のプロパティ・インスペクタの真ん中あたりの、『リスト』ボタンをクリック！
2013/3/19 20:55 | Category アプリ開発実践フェーズ | Comment (0)
途中で行けなくなっていたアプリ開発 映像トレーニングを再開。
2.2. CSS3の特徴
sample2.html
●拡大
transform:
sample3.html
●角丸
border-radius:
sample4.html
border-radius:50%; /* %だと、楕円みたいなる */
sample5.html
CSS3 : キーフレーム
方法はだいたい理解したので、
落ち着いた所で、ひとつひとつ、静止画で分解してみよう！
animation-name: loading;
@-webkit-keyframes loading{
0%{ -webkit-transform: rotateY(20deg) rotateX(15deg) scale(1.0); opacity:0.7; }
20%{ -webkit-transform: rotateY(30deg) rotateX(10deg) scale(0.9); opacity:0.6; }
40%{ -webkit-transform: rotateY(40deg) rotateX(20deg) scale(0.9); opacity:0.5; }
50%{ -webkit-transform: rotateY(0deg) rotateX(10deg) scale(1.0); opacity:0.4; }
60%{ -webkit-transform: rotateY(40deg) rotateX(10deg) scale(0.9); opacity:0.5; }
80%{ -webkit-transform: rotateY(30deg) rotateX(20deg) scale(0.9); opacity:0.6; }
100%{-webkit-transform: rotateY(20deg) rotateX(15deg) scale(1.0); opacity:0.7; }
}
●JavaScriptの概要
