Windows8.1を使っていますが、エクスプローラで"ネットワーク"を見ていると他のWindows8.1のマシンが見えます
Windows7以前はフォルダ共有をしないとダメだった気がしますが、Windows8(.1?)からはMSアカウントにしていればそのままアクセス出来た気がしましたが...
久々にアクセスしようと思ったら"パスワードが違っています"と言われます(あれ??)
よく見ると、ドメインにローカルPCの名前がついたようなログイン名になっています
ex) computer_name01\hogehoge
みたいな(compter_name01は現在自分がログインしているコンピュータ名)
これではダメですね...(エラーの"パスワードが違っています"だと勘違いしますが...)
という事で適当に
computer_name02\hogehoge@live.jp
としたら入れました(!?)
便利な機能ですが、"パスワードが違う"と言われると勘違いしますよね...
2014年8月12日火曜日
2014年6月21日土曜日
Canvasその1 fillRectで矩形を描画
HTML5での図形描画はcanvasというものを使います
最初のひな形を基に、四角を描画するコードを書いてみます
間違っていると描画されませんので、適当にデバッグログを入れてfirefoxのコンソールで確認しながら進めます
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Canvas01 </title>
</head>
<body onload="draw('canvas');">
<H1> Canvasによる矩形の描画 </H1>
<canvas id="canvas" width="400" height="300" />
<script>
function draw(id){
console.log("ondraw : " + id);
var canvas = document.getElementById(id);
if( canvas == null ){
conslole.log("ぬるぽ");
return;
}
var context = canvas.getContext('2d');
context.fillStyle = "#FF0000"; // 赤100%
context.fillRect(0, 0, 400, 300); // 描画
}
</script>
</body>
</html>
canvasを使用する手順としては、まずHTML側では
1. body内にcanvasタグをつける
idとサイズを記載する
2. scriptタグ内にcanvasに描画するjavascriptの関数を追加
今回は"draw"という関数を用意しました
3. 関数の呼び出し用のイベントを追加
今回はbodyがloadされたら関数drawを描画させる為に
<body onload="draw('canvas');">
としています
javascript側の処理は
1. document.getElementByIdで引数(今回はid:canvas)から"要素"を取得
( DOMオブジェクトと記載しているページもありますね)
var canvas = document.getElementById(id);
の部分です
2. このオブジェクト(要素・DOMオブジェクト)がnullだったら処理をしないのがお作法なので
nullチェックを行います
3. DOMオブジェクトからグラフィックコンテキストを取得
ここの引数が2dとなっていますが、現在は2dしか無い模様です
このcontextに対して描画の操作を行っていきます
4. 塗りつぶし処理
グラフィックコンテキストに対して塗りつぶしメソッドを実行します
今回はfillで塗りつぶしていますが、輪郭を描くstrokeというものも存在するようです
context.fillStyle = "#FF0000"; // 赤100%
RGB値でfillStyleプロパティ （色)を設定
"red"というように定義済のものを指定可能
rgbaの記載もできる模様
context.fillRect(0, 0, 400, 300);
描画。引数はrectのサイズ
とりあえずこんな感じで図形が描画できました
最初のひな形を基に、四角を描画するコードを書いてみます
間違っていると描画されませんので、適当にデバッグログを入れてfirefoxのコンソールで確認しながら進めます
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Canvas01 </title>
</head>
<body onload="draw('canvas');">
<H1> Canvasによる矩形の描画 </H1>
<canvas id="canvas" width="400" height="300" />
<script>
function draw(id){
console.log("ondraw : " + id);
var canvas = document.getElementById(id);
if( canvas == null ){
conslole.log("ぬるぽ");
return;
}
var context = canvas.getContext('2d');
context.fillStyle = "#FF0000"; // 赤100%
context.fillRect(0, 0, 400, 300); // 描画
}
</script>
</body>
</html>
canvasを使用する手順としては、まずHTML側では
1. body内にcanvasタグをつける
idとサイズを記載する
2. scriptタグ内にcanvasに描画するjavascriptの関数を追加
今回は"draw"という関数を用意しました
3. 関数の呼び出し用のイベントを追加
今回はbodyがloadされたら関数drawを描画させる為に
<body onload="draw('canvas');">
としています
javascript側の処理は
1. document.getElementByIdで引数(今回はid:canvas)から"要素"を取得
( DOMオブジェクトと記載しているページもありますね)
var canvas = document.getElementById(id);
の部分です
2. このオブジェクト(要素・DOMオブジェクト)がnullだったら処理をしないのがお作法なので
nullチェックを行います
3. DOMオブジェクトからグラフィックコンテキストを取得
ここの引数が2dとなっていますが、現在は2dしか無い模様です
このcontextに対して描画の操作を行っていきます
4. 塗りつぶし処理
グラフィックコンテキストに対して塗りつぶしメソッドを実行します
今回はfillで塗りつぶしていますが、輪郭を描くstrokeというものも存在するようです
context.fillStyle = "#FF0000"; // 赤100%
RGB値でfillStyleプロパティ （色)を設定
"red"というように定義済のものを指定可能
rgbaの記載もできる模様
context.fillRect(0, 0, 400, 300);
描画。引数はrectのサイズ
とりあえずこんな感じで図形が描画できました
2014年6月9日月曜日
FireFoxでJavaScriptコンソールを表示する
JavaScriptのデバッグ方法はどうするのかと思っていたのですが、ログの表示をする方法が使えそうです。
FireFoxを使っているので、JavaScript Consoleを使う事によりログ出力を行います
1. FireFoxの右上の"三"をクリックし、"開発ツール" -> "Webコンソール" を選択
(ブラウザ画面下にコンソール画面が表示される)
2. htmlのscriptタグ部分に以下の記述をする
<script>
console.log("hoge");
<script>
サンプルですが、こんな感じのテキストファイル(hoge.html)をエディタで作って、
- FireFoxにドラッグ&ドロップ
- ダブルクリック (htmlに関連付けしてある場合)
すると、consoleに文字が表示されます
---
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> ログ出力テスト </title>
</head>
<body>
<div id="section"></div>
<script>
console.log("Hello World");
</script>
</body>
</html>
FireFoxを使っているので、JavaScript Consoleを使う事によりログ出力を行います
1. FireFoxの右上の"三"をクリックし、"開発ツール" -> "Webコンソール" を選択
(ブラウザ画面下にコンソール画面が表示される)
2. htmlのscriptタグ部分に以下の記述をする
<script>
console.log("hoge");
<script>
サンプルですが、こんな感じのテキストファイル(hoge.html)をエディタで作って、
- FireFoxにドラッグ&ドロップ
- ダブルクリック (htmlに関連付けしてある場合)
すると、consoleに文字が表示されます
---
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> ログ出力テスト </title>
</head>
<body>
<div id="section"></div>
<script>
console.log("Hello World");
</script>
</body>
</html>
2014年6月8日日曜日
HTML5 最初の一歩
HTML5を調べ始めましたので再開します
ローカルでHTMLを実行する事を前提に書きます
なので、サーバー側の処理とかは後回しです
実行手順
1. エディタでhoge.htmlを作成
(文字コードはUTF-8と宣言するのでsaveする際は"UTF-8"とする)
2. hoge.htmlを以下のいずれかで実行
- エクスプローラでダブルクリックする
- ブラウザにドラッグ&ドロップ
としています
HTMLとJavaScriptの記述
- HTMLの中にJavaScriptで全部書く
- JavaScriptのファイルを分離して、最低限の記述をHTMLに書く
があるようですが、いずれもHTMLのファイルを作成するようです
最低限、以下の内容をHTMLファイルに記載します
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> タイトル </title>
</head>
<body>
<div id="xxxx"></div>
<!-- scriptから何か表示させる場合、ここのidを参照する為のグループ -->
<script>
<!-- Java scriptのコードを書く -->
</script>
</body>
</html>
scriptタグを書く位置は参照したページによってはbodyに書いているものもあるようで、動作が怪しかったらそのうち調べてみようかと思っています
ローカルでHTMLを実行する事を前提に書きます
なので、サーバー側の処理とかは後回しです
実行手順
1. エディタでhoge.htmlを作成
(文字コードはUTF-8と宣言するのでsaveする際は"UTF-8"とする)
2. hoge.htmlを以下のいずれかで実行
- エクスプローラでダブルクリックする
- ブラウザにドラッグ&ドロップ
としています
HTMLとJavaScriptの記述
- HTMLの中にJavaScriptで全部書く
- JavaScriptのファイルを分離して、最低限の記述をHTMLに書く
があるようですが、いずれもHTMLのファイルを作成するようです
最低限、以下の内容をHTMLファイルに記載します
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> タイトル </title>
</head>
<body>
<div id="xxxx"></div>
<!-- scriptから何か表示させる場合、ここのidを参照する為のグループ -->
<script>
<!-- Java scriptのコードを書く -->
</script>
</body>
</html>
scriptタグを書く位置は参照したページによってはbodyに書いているものもあるようで、動作が怪しかったらそのうち調べてみようかと思っています
登録:
投稿 (Atom)