2019-02-13

20分で作る簡易的なウェブページ（GitHub + HTML）

雑談

はじめに

パパっと簡易的なウェブページを作りたいと思ったときのメモ。

完成度は二の次。参考程度にどうぞ。

あと、ウェブ系は完全に初心者なので間違っている情報がある可能性が高い。

作成したウェブページはこんな感じ。 https://yusukekato.github.io/

環境

最新のブラウザで動作するような HTML と JavaScript と CSS。

（特に気にしなくても大丈夫だと思いたい）

ウェブページ作成の流れ

GitHub 上にディレクトリを作成してファイルを置く

GitHub のアカウントをまだ持っていない場合はすぐに新規登録

GitHub とは、 git を利用できるウェブサービスのこと

github.com

新規のディレクトリを作成
作成したディレクトリの「Setting」を開く
設定項目の中から「GitHub pages」の項目を探す
「Source」のプルダウンを「None」から「master branch」に変更

これで『https://アカウント名.github.io/リポジトリ名/』にアクセスできる

また、リポジトリ名を『アカウント名.github.io』にすると、『https://アカウント名.github.io/』でアクセスできる

index.html を作成（とりあえず完成）

次に作成したディレクトリに「index.html」というファイルを置く

一応書いておくと、ウェブページにアクセスすると「index.html」が自動的に呼び出される

「index.html」の中は以下のように記述。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>TITLE</title>
</head>
<body>
    <h1>ウェブサイト</h1>
</body>
</html>

これが最低限のHTML。

おまけ

HTML でよく使うタグ（主観）

見出し

文字の大きさは CSS でいじったほうがいいと思う（後述）

<h1>見出し、一番大きい</h1>
<h2>見出し</h2>
<h3>見出し</h3>

文章を書く

<p>ここに文章を書く</p>

改行

<br>

リンク

<a href="https://sample.sample/">sampleページ</a>

線を出す

<hr>

箇条書き

<ul>
    <li>箇条書き１</li>
    <li>箇条書き２</li>
    <li>箇条書き３</li>
</ul>

グループを作る

<div>
    <h1>たいとる</h1>
    <hr>
    <p>ここに文章を書いてみる</p>
    <a href="URL">AAA</a>
</div>

スクリプトを読み込む

<script src="sample.js"></script>

スクリプトを書く

<script>
    var a = 1;
    console.log(a);
</script>

ボダンを設置

onclick="関数名" を付けると、ボタンを押したときのイベントを設定することができる

<button onclick="button1()">ボタン</button>

CSS の導入

HTML のデザインは CSS で決める

CSS は以下のような感じ。参考程度に。本当はもっときれいに書くことが望まれる

github.com

まず、「style.css」というファイルを作成（名前は style ではなくてもいい）

そして、HTML の「head」の中に以下を記述

<link rel="stylesheet" href="style.css">

これで「index.html」のデザインを「style.css」で編集できるようになった

HTML における class と id

たとえば以下のように HTML を書く

<p class="test">文章を書いてみる</p>

こう書くと、この p タグのクラスが "test" になる

次に、style.css に以下のように書く

.test {
    font-size: 24px;
}

こう書くと、class が "test" のタグはフォントサイズが「24px」になる

また、class はグループ、id は一つひとつ、みたいな使い方だと思う

フラットデザインをめざして

今どきのウェブサイトではフラットデザイン（ゴテゴテしていないやつ）が好まれている

フラットデザインのウェブサイトを作るために必要なのは色合いや配置

あと、単純に見やすいウェブサイトを作るために文字の大きさの調整などが必要

そのために、 HTML の「div」タグの使い方、また、前述した「class」と「id」の使い方、さらに、CSS における「margin」と「padding」の使い方、が重要になってくると思う

一例として

index.html の body を以下のように記述

<body>
    <div class="test">
        <h1>タイトル<h1>
        <p>ここに文章を書く</p>
        <p>さらに文章を書く</p>
    </div>
</body>

style.css に以下のように記述

body {
    width: 100%;
    background-color: #EEEEEE;
}

.test {
    width: 80%;
    background-color: #FFFFFF;
    margin-left: auto;
    margin-right: auto;
}

まず、背景の色を「灰色」にした

次に、「div」タグ内の色は「白色」して、さらに横幅は画面の80%に、そして「margin」を「auto」にすることで中央に配置した

こんな感じでできるはず

あくまで参考程度に。（以下も一例として）

github.com

その他

文字サイズがおかしいとき

文字サイズを変更しているはずなのにおかしいときは、以下のコードを CSS ファイルの body に書く

-webkit-text-size-adjust: 100%;

文字のフォントを設定

以下のコードを CSS ファイルの body に書く

font-family: arial, sans-serif;

a タグの下線を消す

a {
    text-decoration: none;
}

端末の画面サイズによって CSS を変更

CSS ファイル内に記述

@media screen and (min-width: 1000px) {
    1000px以上の画面サイズを持つ端末の場合
}
@media screen and (max-width: 999px) {
    999px以下の画面サイズを持つ端末の場合
}

a タグにマウスカーソルが乗っかっているときに色が変わる

マウスカーソルがのっかっている場合は、#0000FF に色が変わる

a:hover {
    color: #0000FF;
}

おわりに

簡単なウェブページの作成方法をまとめた

さらに、HTML と CSS の簡単な説明も書いた

これからもフラットデザインをめざしてがんばりたい

2019-02-02

発表資料用の AviUtl 使い方

AviUtl 雑談

はじめに

研究発表の資料作成で、動画の編集作業が必要になり「aviutl」を使った。

そのときのメモ。

環境

Windows10 Home
AviUtl 1.00

＊MP4形式でエクスポートできるようにプラグインを入れる。

参考

aviutl.info

いろいろな作業

タイムライン表示

まずはタイムラインを表示することから始まる。

「設定」> 「拡張編集の設定」

これでタイムラインが開く。

チェックを入れておけば勝手に開くみたい。

動画読み込み

タイムラインウィンドウへ動画をドラッグ＆ドロップする。

トリミング

動画の範囲を選択できる。

タイムライン上の時間目盛を見て、「赤い線」を選択したい範囲の最初に持ってくる。

そこから「Shift」を押しながらクリックして選択したい範囲の最後までスライド。

カット

使う場面はないかもしれないけど書いておく。

カットしたい範囲の最初と最後で右クリックして「分割」。

その後、右クリックして「削除」。

クリッピング

動画の画面内で指定した範囲を切り抜く。

「設定」 > 「サイズの変更」で「なし」を選択（クリッピングしないときは「指定サイズ」などを選択しないとおかしくなる）。

「設定」 > 「クリッピング＆リサイズの設定」でウィンドウが開く。

右上のボックスにチェックを入れた状態で上下左右を調整。

再生速度を倍速にする

タイムラインウィンドウで動画をダブルクリックすると、動画設定ウィンドウが開く。

そこで「再生速度」の項目で変更。最大8倍速。

テキスト作成

タイムラインウィンドウの新しいレイヤーで右クリック。

「メディアオブジェクトの追加」 > 「テキスト」。

テキスト用の設定ウィンドウが開くからそこで色々編集。

デフォルトだと「標準文字」になっているけど、「縁取り文字」にしたほうが見やすい。

あとテキストが表示されないときは、テキストが「OFF」になっている可能性あり。

absg.hatenablog.com

動画内のあるフレームで一時停止する

動画内のあるフレームでN秒間一時停止したいみたいなとき。

まず、止めたいところに赤い線を置いて「分割」（もし一番最後なら、最後のちょっと手前で分割する）

分割したところの設定を開いて（ダブルクリック）、「再生速度」を押して、「瞬間移動」を選択。

さらに、再生速度の左側の値を「0」にする。

次に、分割したところを右クリックして「長さの変更」を選択、停止したい時間の長さを指定する。

これでできあがり。

分割したやつが一時停止するものになったので、一時停止させたいところにおく。

以下を参考。ありがたい。

aviutl.info

時間目盛の分解能を変更

長い動画や短すぎる動画などで時間目盛が合わないとき。

「Ctrl」を押しながら、マウスのホイールなどでスクロールを行うと時間目盛の分解能を調整できる。

または、時間目盛の左横にある「青い長方形のやつ」をクリックすると調整できる。

再生ウィンドウの表示

編集した後など、動画を再生したいとき。

本体ウィンドウで、「表示」 > 「再生ウィンドウの表示」で開く。

動画出力

本体ウィンドウの「ファイル」 > 「プラグイン出力」 > 「拡張x264」にするとMP4形式で出力できる。

ファイル名を入力するとき、「ファイルの種類」で「.mp4」などを選択。

おわりに

AviUtl はシンプルなのかどうかは分からないけど、便利であることは確かだと思う。ありがたい。

2019-01-15

ロボットの並進と回転について

Robotics 雑談

はじめに

対向二輪型の移動ロボットにおける並進運動と回転運動についてなんとなくイメージをまとめておきます。

座標系におけるロボットの情報は（x, y, theta）の三つです。

また、位置（x, y）と姿勢（theta）としておきます。

並進運動

ロボットの位置（x, y）が変化する運動

回転運動

ロボットの姿勢（theta）が変化する運動

対向二輪型ロボットの運動の種類

直進する運動：並進運動だけ
旋回する運動：回転運動だけ
円弧を描く運動：直進する運動＋旋回する運動（並進運動＋回転運動）

円弧運動

円弧を描く運動は、位置（x, y）と姿勢（theta）が両方とも変化しているため、並進運動と回転運動を組み合わせた運動と考えられます。

また、円弧運動から直進と旋回について考えると、

直進する運動：半径が無限の円の円弧運動
旋回する運動：半径がゼロの円の円弧運動

というようになります。

おわりに

対向二輪型ロボットの運動はすべて円弧運動と言えるかもしれないし、直進と旋回だけとも言えるかもしれない。

（なぜ、この記事を書いたのかは分からない）

2018-11-13

Unity ゲーム開発日記：タイトル画とBGM

ゲーム開発日記 Unity

はじめに

ゲームのシステムは完成しつつあります

システム以外でゲームに必要なものと言えばタイトル画とBGMですね

イラストを描く

何かしらイラストを描くソフトを用意します

私の場合

PC : Clip Studio
iPad : Procreate

サイズや解像度を気にしてイラストを描きます（最適なサイズや解像度は各々が選択）

また、背景を透過させる場合のファイル形式は、PNGが良いらしいです

f:id:kato_robotics:20181113024602p:plain

画像を挿入する場合、 UIのCanvasの子としてImageを作成します

このとき、Canvasの表示サイズの設定を「Scale With Screen Size」とするとスクリーンのサイズ（スマホの画面サイズなど）に合わせてUIの大きさを自動で調節してくれます

dojican-lab.blogspot.com

BGMの作成

曲が作れるソフトを用意します

PCの場合は「StudioOne」などがあります

今回は、iOSやMacOSに標準で入っている「GarageBand」を使用します

簡単に曲が作成できるので暇つぶしにもちょうどよいです

Unityにおいて音を鳴らす方法は以下を参考にします

unity3d.com

他にも調べればたくさん出てくるのでここでは何もかかないでおきます

おわりに

ゲームにおけるタイトル画とBGMの作成と導入方法をまとめました

ゲーム完成に向けて作りこんでいきましょう

2018-11-06

Unity + Vuforia マーカトラッキングメモ

Unity Vuforia

はじめに

Unity + Vuforia でマーカトラッキングをするための自分用メモ

対象は iPad (iOS12)

環境

MacOS
Unity 2018.2.8f1
Vuforia 7.2.23
iPad6 (iOS12)

マーカトラッキング

Vuforia は Unity に統合されたので初めから入っている

「MainCamera」を削除して GameObject > Vuforia > ARCamera を選択

このとき、Vuforia のパッケージがインポートされる

Assets
- Editor
- Vuforia

次に、GameObject > Vuforia > Image を選択して「ImageTarget」を作成

このとき、Vuforia のパッケージがさらにインポートされる

Assets
- StreamingAssets
- Resources

最後に、BuildSttings > PlayerSettings > XR Settings > VuforiaAugmentedReality にチェックを入れる

これでマーカ（デフォルトではAstronaut）が認識できる

VuforiaConfiguration

Assets > Resources > VuforiaConfiguration で Vuforia の設定とかできる

またここで Vuforia のバージョンも確認できる

「Device Tracker」にチェックを入れる

「Tracking mode」は「POSITIONAL」

kato-robotics.hatenablog.com

「ARCamera」の「World Center Mode」が「DEVICE」になっている

kato-robotics.hatenablog.com

おまけ1

マーカを認識して何かするスクリプトは、Assets > Vuforia > Scritps > DefaultTrackableEventHandler

このスクリプトをいじるといろいろできる

おまけ2

Blender で作成した fbsファイル（例：Arrows.fbs）のオブジェクト

Unity にインポートすると

Assets
- Camera
- Cone
- Cylinder
- Lamp

となっている

オブジェクト一つひとつに「Camera」と「Lamp」が付いていると処理がとても重くなるので削除するか無効にしておく

おわりに

Unity + Vuforia でマーカをトラッキングする方法をまとめた

2018-11-04

Unity ゲーム開発日記：実機デバッグ

ゲーム開発日記 Unity

はじめに

これまでシューティングゲーム「オシャレなロケット：Oshare-Na-Rocket」のシステムを作ってきました

このゲームはスマートフォン向けに作っているので実機でちゃんと動作するか確認する必要があります

よって今回は実機デバッグを行っていきます（本当はもっと早くやるべきだった）

環境

Windows10
Unity 2018.2.14f1
Android 7

参考

uni.gas.mixh.jp

Android SDK の入手

まだAndroid SDKを持っていない人はAndroid Studioをインストールします

また、すでにAndroid Studioをインストールしている場合でもアップデートが必要かもしれません

SDKのアップデートはAndroid StudioのConfigから行えます

developer.android.com

Android SDK & JDK のパス設定

Edit > Preferences > External Tools に「Android SDK」と「JDK」のパスを設定するところがあります

Android SDKのパスはAndroid StudioのConfig画面を開くとパスが書いてあります

JDKは「C:/Program Files/Android/Android Studio/jre」としました（要確認）

Android 実機デバッグ

File > Build Setting を選択してビルド設定画面を開きます

そして以下の図のように設定します

f:id:kato_robotics:20181104150526p:plain

まず、「Add Open Scene」ボタンを押してシーンを登録します

次に"Platform"で"Android"をクリックして「Switch Platform」ボタンを押します

その後、「Player Setting」ボタンを押すとインスペクタウインドウに設定項目が出てきます

一番上の「Company Name」と「Product Name」を入力（ハイフンは使えない？）

f:id:kato_robotics:20181104151924p:plain

「Other Setting」の「Package Name」に「com.CompanyName.ProductName」となるように入力します

f:id:kato_robotics:20181104151942p:plain

ビルド

これで最低限の設定が終わりました

Android端末のUSBデバッグを有効にします

これを忘れるとUnityがAndroid端末を認識できません

「Build and Run」ボタンを押して、ビルドが成功するとAndroid端末でアプリが開きます

f:id:kato_robotics:20181104153159p:plain

おわりに

無事、実機でもちゃんと動作することが確認できました

次はシステムを遊べるように作っていきます

2018-11-04

Unity ゲーム開発日記：当たり判定を作る

ゲーム開発日記 Unity

はじめに

今回は当たり判定を作っていきます

これができれば最低限のシューティングゲームのシステムができるはずです

Colliderの設定

衝突判定のためにオブジェクトの形状を定義します

Playerには「Box Collider」、Enemyには「Sphere Collider」にしました

いい感じに大きさを調節します

次にオブジェクトのレイヤーを分けます

何も設定していない場合、オブジェクトは全て衝突してしまいます

オブジェクトがどのオブジェクトと衝突するかは、レイヤーを設定することで簡単に決められるようです

Edit > Project Settings > Tags and Layers で以下のように設定

f:id:kato_robotics:20181104054416p:plain

Edit > Project Settings > Physics で以下のように設定

f:id:kato_robotics:20181104071912p:plain

Bullet どうしも衝突するようにしました

Particle System 作成

PlayerまたはEnemyが相手のBulletに衝突して消滅するときのエフェクトとしてParticle Systemを作成します

Create > Effects > Particle System を選択、名前は「enemyParticle」とします

設定は以下のように（好きなように）

f:id:kato_robotics:20181104055856p:plain

f:id:kato_robotics:20181104062043p:plain

f:id:kato_robotics:20181104055907p:plain

新しくマテリアルを作成してenemy用の画像を設定

Shader を Particle > Alpha Blended にする

作成したマテリアルをParticle Systemに設定

こんな感じになります

f:id:kato_robotics:20181104062139p:plain

これをEnemyが消滅したときに発生させます

同じようにPlayer用のParticle Systemも作ります

f:id:kato_robotics:20181104062523p:plain

Particle System のパーティクルに画像を設定

vivi.dyndns.org

衝突時のイベントを書く

衝突判定には方法が二つあるようです

qiita.com

レイヤーを設定するとTriggerを使えますが、今回はOnCollisionEnter関数を使ってみます

各オブジェクトに「Tag」を設定します

「Tag」を利用して衝突したオブジェクトを判別します

f:id:kato_robotics:20181104081157p:plain

Particle System は Prefab 化してから Instantiate 関数を用いて発生させます

// PlayerDriver.csに追加
public GameObject playerParticleSystem;

// 衝突時のイベント
    void OnCollisionEnter(Collision col)
    {
        // 衝突したオブジェクトのTagが敵の弾かどうか
        if (col.gameObject.tag != "EnemyBullet") return;
        Debug.Log(col.gameObject.tag);
        Debug.Log(gameObject.name);

        // Particle System を起動
        GameObject pps = Instantiate(playerParticleSystem, transform.position, transform.rotation);
        Destroy(pps, 2f);
        // 弾を削除
        Destroy(col.gameObject);
        // Enemyオブジェクトを削除
        Destroy(gameObject);
    }

// EnemyDriver.csに追加
public GameObject enemyParticleSystem;

   // 衝突時のイベント
    void OnCollisionEnter(Collision col)
    {
        // 衝突したオブジェクトのTagがプレイヤーの弾かどうか
        if (col.gameObject.tag != "PlayerBullet") return;
        Debug.Log(col.gameObject.tag);
        Debug.Log(gameObject.name);

        // Particle System を起動
        GameObject eps = Instantiate(enemyParticleSystem, transform.position, transform.rotation);
        Destroy(eps, 2f);
        // 弾を削除
        Destroy(col.gameObject);
        // Enemyオブジェクトを削除
        Destroy(gameObject);
    }

当たり判定を取り入れたゲームはこんな感じになりました

f:id:kato_robotics:20181104081826p:plain

画像では分かりにくいですが、当たり判定がうまく働いています

弾が敵に当たるとParticleSystemを発生させた後、敵が消滅します

おわりに

無事に当たり判定を取り入れることができました

これでシューティングゲームの最低限のシステムができました

次はクリア条件などゲームとして遊べるようにしていきます

はじめに

環境

目次

ウェブページ作成の流れ

GitHub 上にディレクトリを作成してファイルを置く

index.html を作成（とりあえず完成）

おまけ

HTML でよく使うタグ（主観）

見出し

文章を書く

改行

リンク

線を出す

箇条書き

グループを作る

スクリプトを読み込む

スクリプトを書く

ボダンを設置

CSS の導入

HTML における class と id

フラットデザインをめざして

その他

文字サイズがおかしいとき

文字のフォントを設定

a タグの下線を消す

端末の画面サイズによって CSS を変更

a タグにマウスカーソルが乗っかっているときに色が変わる

おわりに

はじめに

目次

環境

参考

いろいろな作業

タイムライン表示

動画読み込み

トリミング

カット

再生速度を倍速にする

テキスト作成

動画内のあるフレームで一時停止する

時間目盛の分解能を変更

再生ウィンドウの表示

動画出力

おわりに

はじめに

並進運動

回転運動

対向二輪型ロボットの運動の種類

円弧運動

おわりに

はじめに

イラストを描く

BGMの作成

おわりに

はじめに

環境

マーカトラッキング

VuforiaConfiguration

おまけ1

おまけ2

おわりに

はじめに

環境

参考

Android SDK の入手

Android SDK & JDK のパス設定

Android 実機デバッグ

ビルド

おわりに

はじめに

Colliderの設定

Particle System 作成

衝突時のイベントを書く

おわりに