覚書っす

メニュー

2013-04-18T01:15:08+09:00

**メニュー -[[トップページ>http://www34.atwiki.jp/wildbadger/]] -[[HTMLについて>http://www34.atwiki.jp/wildbadger/pages/14.html]] --[[HTMLって？>http://www34.atwiki.jp/wildbadger/pages/14.html]] --[[文字表示>http://www34.atwiki.jp/wildbadger/pages/15.html]] --[[線・表を描こう>http://www34.atwiki.jp/wildbadger/pages/16.html]] --[[画像をハロー>http://www34.atwiki.jp/wildbadger/pages/17.html]] --[[divって？>http://www34.atwiki.jp/wildbadger/pages/25.html]] --[[headに何を書く？>http://www34.atwiki.jp/wildbadger/pages/27.html]] -[[CSSについて>http://www34.atwiki.jp/wildbadger/pages/26.html]] -[[CUnitを使おう>http://www34.atwiki.jp/wildbadger/pages/18.html]] --[[導入編>http://www34.atwiki.jp/wildbadger/pages/19.html]] --[[使用編>http://www34.atwiki.jp/wildbadger/pages/20.html]] -[[ARを学ぼう>http://www34.atwiki.jp/wildbadger/pages/22.html]] --[[序章編～ARとは～>http://www34.atwiki.jp/wildbadger/pages/21.html]] --[[ARToolKitその１>http://www34.atwiki.jp/wildbadger/pages/23.html]] --[[ARToolKitその２>http://www34.atwiki.jp/wildbadger/pages/24.html]] ---- **リンク -[[@wiki>>http://atwiki.jp]] -[[@wikiご利用ガイド>>http://atwiki.jp/guide/]] **他のサービス -[[無料ホームページ作成>>http://atpages.jp]] -[[無料ブログ作成>>http://atword.jp]] -[[2ch型掲示板レンタル>>http://atchs.jp]] -[[無料掲示板レンタル>>http://atbbs.jp]] -[[お絵かきレンタル>>http://atpaint.jp/]] -[[無料ソーシャルプロフ>>http://sns.atfb.jp/]] // リンクを張るには "[" 2つで文字列を括ります。 // ">" の左側に文字、右側にURLを記述するとリンクになります //**更新履歴 //#recent(20) &link_editmenu(text=ここを編集)

に何を書くの？

2013-04-18T01:11:24+09:00

<HEAD>について考えてみよー

ひとまず、

HTMLにてホームページ(HTML)が作成できるように

なったけど・・・

<HEAD>等に何を書いたらいいのかよくわからん。。。

っというので調査してみる。。。

0.<head>の前に...

0-1 DOCTYPE(ドキュメントタイプ)について

HTMLは現在一般的に普及しているのはHTML4.01らしいが、

作成するホームページにおいて

どのバージョンのHTMLで記述されているかをDOCTYPEにて宣言する必要がある。

また、このDOCTYPE宣言により、各種ブラウザのレンダリングモードが異なります。

レンダリングモードには大きく３種類分かれます。

標準モード … CCSなどの指定を仕様どおりに解釈し、表示するモード

互換モード … CSS普及していなかった頃との互換のためにあえて標準モードと異なる解釈し、表示するモード

中間モード … 上記２つの中間。

(ちなみにレンダリングモードとはコンピュータがソースを解釈し描画することです。)

上記を参考にすると

標準モードで表示させればいいわけなので・・・

HTMLクイックリファレンス

http://www.htmq.com/htmlkihon/302.shtml

を参考にして以下でOK？かな？？

例）HTML4.01 フレームセット

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

0-1 使用言語(主言語)を指定しよう

HTML4.0から導入されている"lang"属性にて使用する言語を指定しよう。

"lang"属性には

・使用言語

・国コード

を指定する必要があります。●●-▲▲の形式にて指定することが可能です。

(●●=使用言語、▲▲=国コード)

例) 日本で使われている(国コード)、日本語。

(※ちなみに日本で使われるの当たり前なので<html lang="ja">の様に省略することも可能です。)

なお、

Google翻訳等の自動翻訳では上記の"lang"属性を確認し、翻訳に使用しているので

海外を意識するような場合は特に注意が必要です。

1. <meta>タグを使用しよう

ブラウザや検索ロボットに知らせるためのタグです。

制作者やキーワード等の情報をname属性で定義して、 content属性でその値を指定します。

1-1 メタ情報って

メタ情報(データ)とは情報に関する情報。

メタとは...例を挙げる方がわかり易いので以下に記載します。

例）

メタ学習 ... 学習をするための学習（勉強の取り組み方等を勉強するとか...)

メタ理論 ... 理論を理解するための理論(前提となる理論とか...)

1-2 検索ロボットって

検索ロボット(クローラ)とは

全文検索型のサーチエンジンの検索データベースを作成するために

Webページの情報を回収するプログラムのこと(なかなかのネームセンスwww)。

つまり、この検索ロボットに正しく情報を提供することによって検索データベースに登録され

ユーザの検索に対する要求に応答しているってこと？（たぶん）。

以下を参照。

http://pst.co.jp/powersoft/html/index.php?f=5331

1-3 <meta>を記載しよう

・文字コードの指定

例) HTML文書がシフトJISだったら

・文書の説明・キーワードの指定

例）HTML入門ページなら・・・キーワードは・・・

・文書の作成者

例）wildbadgerさんが作成。

・その他

キャッシュの制御・有効期限や検索ロボットの制御等が行えます。

（ただし、対応するものだけっぽい。。。）

本日は以上！！

CSSについて

2013-04-07T21:59:25+09:00

CSSをつかってみましょー

HTMLを使い、ホームページを作成してきましたが

デザインするにはCSSを使います。

なぜなら..

HTMLは文書(テキスト)をマークアップする言語であり、

ホームページをデザインするものではありません。

ってことでデザインはCSSでやりましょーってことです。

ホームページ = 文書構造(HTML) + デザイン(←CSSね)

CSS(Cascading Style Sheets)とは

Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート）

とは、HTML や XML の要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。

文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。

0. ホームページのデザインについて考えてみる。

いきなりCSSを書きましょー....

っといってもどんなホームページをつくるかを

決めないと書く事ができません。

まずホームページについて

概要をまとめてみましょー

ホームページのほとんどは

およそ以下の項目に分かれています。

・Header ... 頭部(タイトル、メイン画像

・Navigation ... 各リンク先への移動(トップページ・地図・連絡先等)

⇒例)Googleのトップページ一番↑の部分

・Section ... ページの内容

・Article ... ページの内容の各記事（項目毎)

・Aside ... 余談(関連記事・広告・ニュース等)

・Footer ... 足部(copyright ..とか)

※HTML5ではこれらのタブが用意されています。

あと全体にデザインを設定するために

・contener

・contents

を用意します。

これをベースにホームページを検討しましょー

(添付のindex.htmlを参照してください)

1. 構造を理解しましょー

CSSの構造として

セレクタ -、プロパティ-、値

の３つで構成されています。

例)

aaa {

bbb : ccc;

}

aaa=セレクタ、bbb=プロパティ、ccc=値

2. CSSを作成します

2-0 フォルダ構成を準備します。

今回は以下のフォルダ構成を使用します。

sample

　　L index.html

　　L img ... 使用する画像を格納します。

　　L css ... 使用するCSS(style.css)を格納します。

2-1 style.css作成しとindex.htmlとリンクします。

./css/style.cssを作成し

以下をページヘッダ<head>～</head>に記述すればOK

2-2 CSSの文字コードを記述します。

./css/style.cssを開き先頭にHTML(index.html)の文字コードを指定します。

ちなみにコメントは /* ～ */にて記述できます。

/* ホームページで使用する文字コード */

@charset "shift-jis";

2-3 各種設定

基本は全体(共通)設定し、詳細(異なる点)設定していきます。

●"*"(全体設定)

全体のフォントデフォルトを決定します。

/* "*" 全体に適用 */

* {

/* 各種フォントのデフォルト */

font-family: "メイリオ", Meiryo, "ＭＳＰゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;

font-size: 12px;

color: #666666;

margin: 0px;

padding: 0;

/* 各種領域確認用

border: dotted 1px #FF0000; */

}

●h1,h2,h3,ul,table等のデフォルト値を決定します。

/* 見出し1 */

h1 {

/* フォント */

font-size: 20px;

color: #666666;

margin: 0;

padding: 10px 20px 10px 20px;

/* 背景画像 */

}

/* 見出し2 */

h2 {

/* フォント */

font-size: 12px;

color: #FFFFFF;

margin: 5px 0px 20px 0px;

padding: 10px 10px 10px 10px;

/* 背景画像 */

}

/* 各種文章 */

p {

/* フォント */

font-size: 10px;

color: #666666;

margin: 10px;

padding: 0;

/* 背景画像 */

/* 行間 */

line-height: 2em;

}

/* リスト */

ul {

/* 種類 */

list-style: none;

/* 背景画像 */

margin: 10px 5px 20px 5px;

/* 行間 */

line-height: 2em;

}

/* テーブル */

table, td, td {

/* レイアウト */

table-layout: auto;

/* テキスト */

text-align: center;

/* 罫線 */

border: solid 1px #666666;

border-collapse: collapse;

/* 種類 */

list-style: none;

/* 背景画像 */

margin: 10px 5px 20px 5px;

/* 行間 */

line-height: 2em;

}

●背景を決定します。

/* body */

body {

/* テキストをセンター表示 */

text-align: center;

/* 背景画像 */

}

●各種領域(<div id="***">部分)を設定していきます。

/* ==========================================================

* contener

* ========================================================== */

#contener {

/* 領域幅 */

width: 704px;

/* 領域中央寄せ */

margin-left: auto;

margin-right: auto;

/* 背景画像 */

}

/* ==========================================================

* contens

* ========================================================== */

#contens {

width: 700px;

text-align: left;

margin: 0 auto;

}

/* ==========================================================

* header

* ========================================================== */

#header {

}

/* ==========================================================

* navi

* ========================================================== */

#navi {

height: 25;

margin: 0;

padding: 0;

background-color: #000000;

}

#navi ul{

margin: 0;

padding: 0;

}

#navi li{

float: left;

width: 100;

list-style-type: none;

text-align: center;

display: block;

background-color: #000000;

}

#navi a{

color: #FFFFFF;

}

/* ==========================================================

* section

* ========================================================== */

#section {

width: 500px;

float: right;

margin: 10px 10px 10px 10px;

}

/* ==========================================================

* article1

* ========================================================== */

#article1 {

}

/* ==========================================================

* article2

* ========================================================== */

#article2 {

}

/* ==========================================================

* aside

* ========================================================== */

#aside {

width: 160px;

float: left;

margin: 10px 0px 10px 10px;

}

/* ==========================================================

* footer

* ========================================================== */

#footer {

clear: both;

background-color: #999999;

padding: 2px;

text-align: center;

}

#footer p{

color: #FFFFFF;

font-size: 12px;

margin: 0px;

}

[参考]

HTMLクイックリファレンス

をつかおう！

2013-04-06T16:53:15+09:00

<div>とは

<DIV>タグはそれ自身は特に意味を持っていませんが、

<DIV>～</DIV>で囲んだ範囲をひとかたまりとして、

align属性で位置を指定したり、※スタイルシート(css)を適用するのに用います。

例)

インターネット販売は<br>

無差別大量販売というより<br>

むしろ対面販売に似ています。

</div>

スタイルシート作成のために必須なので

要注意っす！！！

トップページ

2013-03-20T22:33:45+09:00

**wildbadgerの覚書スペースへようこそこちらはwildbadgerの覚書スペースです。忘れやすい自分のためにいろんなことを書いていきたいとおもいます。 **管理者プロフィール年齢：３０代前半性別：男職業：IT関連で働く文系エンジニア（歴は浅いけど・・）好きなこと：スポーツっぽい事とギャンブルを少々。。。嫌いなこと：勉強、ヤイヤイ言われる事 [アクセス数] 合計：&counter() 今日：&counter(today) 昨日：&counter(yesterday) トップページの合計：&counter(total, page=トップページ)

ARToolKitであそぼー2

2013-03-19T03:47:48+09:00

サンプルアプリケーションを作成してみよー

C:\ARToolkit\ARToolKit.slnがあるが

VisualStadio2012で動作させようとするが(simpleLite含む複数プロジェクトが登録されている）

エラーが大量にでてしまう。。。

追うのも面倒なのでひとまず

『simpleLite』単体のみのプロジェクトを作成することにする。。。(;_;)

1.Visual Studio2012 にプロジェクト作成

　[ファイル]->[新しいプロジェクト]->[空のプロジェクト]を選択し、

　"Project1"を作成する。

(実際にはC:\sample\Project1\に作成)

2.プロジェクト環境を整える

　2-1 『simpleLite』には各種DLLが必要なので以下のパスを登録

　　①[コントロールパネル]->[システム]->[設定の変更]->[詳細設定タブ]->[環境変数]をクリック

　　②[システム環境変数]->[Path]をクリックし、";C:\ARToolkit\bin\"を追加する。

　2-2 ライブラリの追加

　　①Visual Studio2012のソリューションエクスプローラー

　　（デフォルトなら左にある)から"Project1"を右クリックし、[プロパティ]をクリック

　　②[C/C++]->[追加のインクルードディレクトリ]に以下を追加

　　C:\ARToolkit\include

　　C:\ARToolkit\DSVL\src

　　③[リンカー]->[追加のライブラリディレクトリ]に以下を追加

　　C:\ARToolkit\lib

　　C:\ARToolkit\DSVL\lib

　2-3 main.c作成

　ひとまず『simpleLite』として動作させたいので

　C:\ARToolkit\examples\simpleLite\simpleLite.cをコピーし、

　作成したプロジェクトフォルダに移動&リネーム(main.c)

　ソリューションエクスプローラーからmain.cを追加。

⇒環境構築完了(『simpleLite』としては。。。。)

3.実際にコンパイル&動作を確認してみる

　3-1 コンパイル(F7キーまたは[ビルド]->[ソリューションのビルド])

<以下ビルドログ>

1>------ すべてのリビルド開始: プロジェクト: Project1, 構成: Debug Win32 ------

1> main.c

1>c:\sample\project1\project1\main.c(455): warning C4996: 'sprintf': This function or variable may be unsafe. Consider using sprintf_s instead. To disable deprecation, use _CRT_SECURE_NO_WARNINGS. See online help for details.

1> c:\program files (x86)\microsoft visual studio 11.0\vc\include\stdio.h(357) : 'sprintf' の宣言を確認してください。

1>c:\sample\project1\project1\main.c(456): warning C4996: 'sprintf': This function or variable may be unsafe. Consider using sprintf_s instead. To disable deprecation, use _CRT_SECURE_NO_WARNINGS. See online help for details.

1> c:\program files (x86)\microsoft visual studio 11.0\vc\include\stdio.h(357) : 'sprintf' の宣言を確認してください。

1>LINK : warning LNK4098: defaultlib 'LIBCMT' は他のライブラリの使用と競合しています。/NODEFAULTLIB:library を使用してください。

1> Project1.vcxproj -> C:\sample\Project1\Debug\Project1.exe

========== すべてリビルド: 1 正常終了、0 失敗、0 スキップ ==========

⇒sprintf()にてwarningがでているが、ひとまずシカトするwww

　3-2 main.c改造する。

　　①main.cそのままでは各種データファイルの読込部分が動作しないので

　　　以下の通りに修正する。

>main.c main()

const char *cparam_name = "../data/camera_para.dat";

// Camera configuration.

#ifdef _WIN32

char *vconf = "../data/WDM_camera_flipV.xml";

#else

char *vconf = "";

#endif

const char *patt_name = "../data/patt.hiro";

　　②①の通りに各種データファイルを移動する。

　　　プロジェクトディレクトリ/data/

　　　例)C:\sample\Project1\data\

　　　・camera_para.dat

　　　・patt.hiro

　　　・WDM_camera_flipV.xml

　3-2 実行してみる(F5キーまたは[デバッグ]->[デバッグ開始])

　⇒うんうん、正常に動作している！！

AR(拡張現実)とは

2013-03-11T00:43:31+09:00

0. ARとは

AR(Augmented Reality)とは

拡張現実（かくちょうげんじつ）とは、人が知覚する現実環境をコンピュータにより拡張する技術、

およびコンピュータにより拡張された現実環境そのものを指す言葉。

AR(拡張現実)byWiki

1.AR技術の利用例

AR技術には大きくわけて3種類のアプリケーションが存在します。

（１）ロケーションベース（位置情報）型

　GPSなどから取得可能な位置情報を利用する。

　GPSなどから取得できる位置情報にひも付けて付加的な情報を表示します。

　また、磁気センサによる方位（情報を見ようとしている人の向いている向き）

　や加速度センサによる傾き（視線の仰角や俯角）などと併せて、情報を提示する場所を決めています。

セカイカメラ（Sekai Camera）

NearestWiki

（２）マーカー型ビジョンベース型

　画像認識・空間認識などの技術を応用して直接目の前にある環境を認識・解析

　ターゲットとなるQRコード（マーカー）

　等を認識することで情報や3DCGを表示します。

　(YouTube等でよくみるのがコレ）

任天堂3DS ARゲームス

PS Vita

パナソニック　AR 設置シュミレーション

（３）マーカーレス型ビジョンベースAR

　マーカーレス型ARは、特定のマーカーなどを利用することなく、

　現実の環境に存在している物体や、

　その環境自体を空間的に認識することで付加情報の提示位置を特定し、提示します。

SmartAR Sony

ちなみに↓の分類は不明

Google Glass

（すごーい）

3.ARToolKitとは

ARToolKit (Augmented Reality Toolkit) は、

拡張現実 (AR) アプリケーションを実現するためのC言語ライブラリである。

奈良先端科学技術大学院大学の加藤博一教授によって開発され、

ワシントン大学のHuman Interface Technology Laboratory (HIT Lab) によってサポートされている。

つまり、

おおげさな言い方をするとARは現実の世界に情報を「上書き」することができる技術です．

手のひらの上に3Dキャラクタを表示したり、現実の世界でデジタル・データに触れてみたり…

そんな魔法のような技術です。

（上記でいう（２）マーカー型ビジョンベース型）

ARToolKit

工学ナビ

＜参考＞

＠IT総合トップいまさら聞けないAR（拡張現実）の基礎知識

Rei Frontier, Augmented Tokyo.

AR技術を学ぼう

2013-03-11T00:42:04+09:00

ふらっとYouTube等をみてみると

なにやら面白そうな題材をみつけたので

すこし勉強してみよーとおもう。

はてはてどうなることやら。。。

1.序章編

2.ARToolKitであそぼー

3.その他

ARToolKitであそぼー

2013-03-11T00:40:36+09:00

まずは環境を整えよう！！

0. 環境

0-1.念のため、動作環境を確認。

PC : lenovo ThinkPad Edge (※内蔵カメラ付き)

OS : Windows 7 Home Premium 64bit SP1

Core : Intel(R)Core(TM) i7-2640M CPU @ 2.8GHz 2.8GHz

メモリ : 8G

1. Visual Stadio Express 2012をDL

http://www.microsoft.com/ja-jp/dev/express/default.aspx

VS2012_WDX_JPN.iso

(インストール...※プロダクトキーをもらわないと30日限定になってしまうので注意)

2. GLUT 取得

GLUT(OpenGL Utility Toolkit)とは、

OpenGLに基づいて設計された、FORTRANとANSIに準拠したC言語のクラスライブラリのことである。

OSのシステムレベルでのI/Oを制御し、3Dグラフィックスを描画することができる。

1994年、シリコングラフィックス（SGI）社のマーク・キルガード（Mark J. Kilgard）によって開発された。

GLUTを用いることによって、OSが描画するウィンドウを制御したり、

マウスやキーボードからの入力によってウィンドウを操作したりすることができる。

描画されたウィンドウはジオメトリ変換による高品位な立方体や球体として再現することが可能である。

また、GLUTは、OSを制御するプライマリレベルで機能しているため、

OSに依存せずに描画機能を使用することができるという特徴を持っている。

以下よりglut-3.7.6-bin.zipをDL

http://user.xmission.com/~nate/glut.html

3. ARToolKit 入手

以下よりARToolKit-2.72.1-bin-win32.zipをDL

http://sourceforge.net/projects/artoolkit/files/

4. サンプルプログラムを動かしてみる。

①3で入手したARToolKit-2.72.1-bin-win32.zip・glut-3.7.6-bin.zip を解凍します。

ARToolKit-2.72.1-bin-win32.zip -> "ARToolKit"フォルダが作成される。

glut-3.7.6-bin.zip -> "glut-3.7.6-bin"フォルダが作成される。

②C:\に解凍した"ARToolKit"フォルダを移動。

③"glut-3.7.6-bin"フォルダの"glut32.dll"をC:\ARToolkit\binへコピー

④C:\ARToolkit\patterns\にある

"pattHiro.pdf"を印刷しておく(これがマーカーね)

⑤C:\ARToolkit\bin\にある

"simpleLite.exe"を実行する。

...珍しく無事に起動。マーカーを写すと立方体の図形が出現！！！

（実行画面は添付します... "simpleLite実行画像" )

simpleLite実行.jpg ... simpleLite.exe実行初期画面

simpleLite1.jpg ... simpleLite.exe実行画面1

simpleLite2.jpg ... simpleLite.exe実行画面2

5. アプリケーション構成&各種ライブラリについて

　5-1 アプリケーション構成

　WindowsアプリケーションにてARToolKitを動作させるには以下が必要です。

①ARToolKit ... ARアプリケーション作成を実現するための簡易ライブラリ

②GLUT ... 3D、2Dを描画するためのライブラリ

③その他 ... ユーザープログラム

　5-2 各種ライブラリ

　Debug用ライブラリ：libARd.lib libARgsubd.lib libARvideod.lib opengl32.lib glu32.lib glut32.lib

　Release用ライブラリ：libAR.lib libARgsub.lib libARvideo.lib opengl32.lib glu32.lib glut32.lib

　　ar.h(libARd.lib、libAR.lib)

　　　⇒ARToolKitの基本サブルーチン

　　arMulti.h(libARMultid.lib、libARMulti.lib)

　　　⇒マルチマーカのサブルーチン

　　gsub.h(libARgsubd.lib、libARgsub.lib)

　　　⇒OpenGLでの描画サブルーチン

　　gsub_lite.h(libARgsub_lited.lib、libARgsub_lite.lib

　　　⇒ARToolKitのための有用なOpenGLルーチンの集まり

　　gsubUtil.h(libARgsubUtild.lib、libARgsubUtil.lib)

　　　⇒OpenGLのユーティリティサブルーチン

　　matrix.h

　　　⇒ARToolKitの数学サブルーチン

　　param.h

　　　⇒ARToolKitのグローバルパラメータ

　　video.h(libARvideod.lib、libARvideo.lib)

　　　⇒ビデオデバイスサブルーチン

今日はここまでzzzz

[参考]

tsujimotter

http://tsujimotter.info/2012/05/14/artoolkit-1/

黒い森から来た少年

http://3335.blog106.fc2.com/blog-entry-103.html

GLUTについて

http://opengl.softwarecarpenter.biz/?eid=949759

俺のCG部屋 ARToolKit基本プログラム

http://www.cg-ya.net/imedia/ar/artoolkit_base_program/

CUnitを使おう！

2013-02-20T01:05:52+09:00

まー仕事柄C言語が使うことが多いので

テストの効率・強化・お勉強を兼ねて

前々から気になっていたCUnitを使ってみよーとおもいます。

あーんなことや・こーんなことができるんやろなー・・・

と思いつつ、試してみますかー

導入編
使用編
その他