９月２日 Objective-C授業内容 [UIWebViewの使用によるwebサイトの表示方法]
#001#プログラムの中に直にHTMLを用意する
ViewController.m内の(void)viewDidLoad内に以下のコードを入力すると
NSMutableString *htmlString = [NSMutableString string];
[htmlString appendString:@"<!DOCTYPE html>" //←ここから
@"<html>"
@"<head>"
@"<meta charset=\"UTF-8\">"
@"<title>UIWebVew Test</title>"
@"</head>"
@"<body>"
@"<h1>WebViewのテスト</h1>"
@"</body>"
@"</html>"
]; //←ここまでにHTMLを表記するとUIWebViewにwebサイトが表示される
[self.webView loadHTMLString:htmlString baseURL:nil];
これはHTML5の場合
#002#プログラムの中に指定のURLを入れる
#001#番と同じく
ViewController.m内の(void)viewDidLoad内に以下のコードを入力する
NSURL *url = [NSURL URLWithString:@"http://www.google.com"]; //ここにURL
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[self.webView loadRequest:request];たったこれだけで指定のURLへ飛ぶプログラムが書ける
#003#プロジェクト内のHTMLファイルを参照して飛ぶ方法
#001#番と同じく
ViewController.m内の(void)viewDidLoad内に以下のコードを入力する
NSString *path = [[NSBundlemainBundle] pathForResource:@"test.html"ofType:nil];
NSURL *url = [NSURL fileURLWithPath:path]; //↑☆
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[self.webView loadRequest:request];
☆矢印のこの部分に表示したいHTMLを入れるとそのHTMLが表示される
９月１日 HTML授業内容
#001#画像をタイマーで動かす
<script>
var x = 0;
function move() {
x++;
document.getElementById("ufo") .style.left = x + "px";
</script>
この部分を日本語に直すと
function move() ←moveメソッド
ドキュメント（HP）内の（"ufo"）というIDの付いた物に対して
スタイルシート（style）上のleftをx + "px"へ移動する
この（名前）というIDは下記の<body>部分で設定されている
<body>
< div id = "ufo"> //この部分でIDを設定
<img src="ufo.jpg" onclick = " setInterval ( 'move()' , 10); ">
</div>
</body>
body内の< div id = "ufo">の部分でIDを設定し
次の<img src="ufo.jpg" 部分で
同じフォルダ内にある画像"ufo.jpg"をbody内に表示する
onclick = " setInterval ( 'move()' , 10);">
onclick クリックすると
" setInterval ( 'move()' , 10);" で
10ミリ秒毎にmove()メソッドを呼び出す
下記でcssを表記
div#ufo {
position:absolute;
top:0px;
left:0px;
}
このcssでufoの初期位置を設定
今回はtopが０なのでy座標が０
leftも０なのでx座標も０である
#002#Canvasの使用
<script>
function init () {
var can = document.getElementById("canvas");
var cnt = can.getContext("2d");
function 以下の２行は
今のところはCanvasを使う為の必要定義なのかと思っておきます
単に四角形を描画するなら
cnt.fillRect(0, 0, 100, 100);
fill が塗りつぶりし
Rect が四角形
(x座標 , y座標, 幅 , 高さ)の順で設定される
cnt.fillStyle = "rgb(255 , 0 0)";
fill塗りつぶしの色(Style)をRGB表記で（赤 , 緑 , 青）表記している
cnt.beginPath(); //パス開始 一筆書きの開始
cnt.rect(0 , 0, 100 , 100); //四角形を形成
cnt.stroke(); //直線を描画
cnt.closePath(); //パス終了
一筆書きで塗りつぶされていない四角形を形成する
rectは上記に書いた通り四角形で
括弧内も(x座標 , y座標, 幅 , 高さ)の順で設定される
図形では無く線を描画する場合は以下の通り
cnt.beginPath( ); //一筆書きの開始
cnt.moveTo( 0, 0) ; // 書き始め開始位置
cnt.lineTo (100 , 100) ; //書き終わり終了位置
cnt.stroke ( ); //開始位置と終了位置が決まったので線を描画
cnt.closePath( ) ; //一筆書きの終了
この表記方法で直線が一本ホームページ上に表示される
一筆書きで三角を表記する場合は
cnt.beginPath( ); //一筆書きの開始
cnt.moveTo( 100, 100) ; // 書き始め開始位置
cnt.lineTo (200 , 100) ; //書き終わり終了位置
cnt.stroke ( ); //開始位置と終了位置が決まったので線を描画
cnt.moveTo( 200, 100) ; // 書き始め開始位置
cnt.lineTo (150 , 0) ; //書き終わり終了位置
cnt.stroke ( ); //開始位置と終了位置が決まったので線を描画
cnt.moveTo( 150, 0) ; // 書き始め開始位置
cnt.lineTo (100 , 100) ; //書き終わり終了位置
cnt.stroke ( ); //開始位置と終了位置が決まったので線を描画
cnt.closePath( ) ; //一筆書きの終了
面倒ですがこの表記で△が表記できました
以上が今日のHTMLの講義内容でした
講義より纏める方が大変でした（笑）
