<html>
<head>
<title>KoryoGO - 2018-10-05 光陵高校体験模擬講義《情報》@東北公益文科大学</title>
<link rel="stylesheet" type="text/css" href="ocgo.css">
</head>
<!--
5m 着席、情報特別選抜説明
5m ログイン、firefox
15m GPSとは、ゲームへの応用、光陵GO概要
15m Emacs+座標決め
20m 中庭で追跡
5m 公益的情報技術、結び
残り 意見交換会
-->
<body>
<h1>GPSの技術</h1>
<h2>GPSとは</h2>
<p>GPSは、Global Positioning System
の略で地球規模で現在位置を特定するための技術である。
GPSセンサーは4個以上の人工衛星からの時刻信号を受信し、
それらのずれと光の速度から距離を計算し、現在位置を知る。
</p>
<h3>スマートフォンとGPS</h3>
<p>現在ほとんどのスマートフォンにはGPSセンサーが内蔵されている。
GPSセンサーからのGPS情報を取得することは、所有者の居場所の特定に
継がる可能性が高いため、アプリからの情報取得には所有者の許可が必要である。
アプリのインストール時に提示される「権限」への承認や、
実行時に求められる「許可」がそれにあたる。</p>
<h3>使用例</h3>
<ul>
<li><p>GPSをONにしてカメラアプリで写真を撮るときに
場所情報を埋め込むことができる。</p></li>
<li><p>地図アプリやナビゲーションアプリに自分の位置を教えて、道案内させる。</p></li>
<li><p>Ingressなどの場所を利用したゲームができる。</p></li>
</ul>
<h2>光陵GO</h2>
<p>位置情報を電子地図の上に組み合わせる技術を応用して、
宝探しゲームを作ってみる。必要な知識は以下のとおり。</p>
<ol>
<li>Webページを書くための文書記述用言語(HTML)</li>
<li>Webページのデザインを決める記法(CSS)</li>
<li>画面やキャラの動きなどを制御するプログラミング言語(JavaScript)</li>
<li><span class="spot">地理的な位置をどう表現するかの知識
(緯度経度の電子的な扱い方)</span></li>
<li><span class="spot">キャラ画像などを描く技法</span></li>
<li><span class="spot">ゲーム性を考えるアイデア</span></li>
<li>操作しやすさを考える思いやりの要素</li>
</ol>
<p>今回模擬講義で構築体験するのは4、5、6の部分。</p>
<h3>光陵GOの概要</h3>
<p>クリエイタ(作成者)とプレイヤ(利用者)、各々の立場でゲームを進める。</p>
<dl>
<dt>クリエイタ</dt>
<dd><ol>
<li><p>Web地図で大学キャンパス内のどこにキャラを隠すか決める。</p></li>
<li><p>その位置をクリックし、座標(緯度経度)を求める。</p></li>
<li><p>ゲームのメインとなるHTML文書ファイルを開き、
座標をファイルの所定の位置に埋め込む。</p></li>
<li><p>出現するキャラ画像を作成し、
決められたファイル名でエクスポート(書込)する。</p></li>
</ol>
</dd>
<dt>プレイヤ</dt>
<dd><ol>
<li><p>スマートフォンのGPSをONにする。</p></li>
<li><p>スマートフォンでゲームのホーム画面のWebページを開く。</p></li>
<li><p>「追跡開始」ボタンを押し、現在位置が取れて画面上に
表示されるようになったら追跡開始する。</p></li>
<li><p>ゴールとの直線距離が示されるので、それを参考に動く。</p></li>
<li><p>キャラをゲットしたらそのキャラと
出されるメッセージを控えて教室のホワイトボードに書き込む。</p></li>
</ol>
</dd>
</dl>
<h3>クリエイタの手順</h3>
<p>大学のコンピュータにログインし、以下の流れで作業する。</p>
<ol>
<li><p><kbd>Ctrl-1</kbd>(こんとろーるいち) を押してEmacsに切り替え、
<code>~/public_html/koryogo.html</code> ファイルを開く。手順:</p>
<div class="screen">
<pre>
Ctrl-x Ctrl-f
~/<span class="u">public_html/koryogo.html</span> [Return]
</pre>
</div></li>
<li><p>開いたファイルにある以下の初期設定2箇所を確認する(赤字部分のみ書き換え)。</p>
<div class="list">
<pre> <span class="see">38.8934</span>, <span class="see">139.819</span> // 北緯, 東経 の順に入れる
var foundMsg = "<span class="see">みつかっちゃった!</span>"; // 発見したときのメッセージ
</pre>
</div>
<p>これを、自らが決めた緯度経度に変更し、見付かったときのメッセージも
独自のものに変更する(日本語は <kbd>Ctrl-o</kbd> で入る)。</p>
</li>
<li><p><a href="koryo-spots.html">隠し場所を設定してよいエリア</a>
を参考に、ゴールとしたい場所の緯度経度を求める。</p></li>
<li><p>2で開いたファイルの数値を書き換える。書き換えたら
ファイルを保存する。</p>
<div class="screen">
<pre>Ctrl-x Ctrl-s</pre>
</div>
<p>Wrote と出ればOK。</p>
</li>
<li><p>GIMP2を起動し、「メニュー: ファイル → 新しい画像 →
幅=100、高さ=128で[OK]」で新規画像を作る。
そのままでは小さくて描きづらいので <kbd>3 Ctrl-j</kbd>
をタイプして拡大表示、ブラシ先のサイズを 20 から 5 程度にする。
</p></li>
<li><p>絵が描けたら(5分以内で!)、「エクスポート」で画像に保存する。
「メニュー: ファイル → エクスポート/Export」
で<em>保存先を <code>public_html</code> フォルダに</em>
してから、<em><code>main.png</code></em> の名前で書き出す。</p></li>
</ol>
<h3>プレイヤの手順</h3>
<p>隣同士の班で問題を解きあう。相手の作成アカウント(ログインユーザ名)の
番号を互いに確認しておく。スマートフォンの電源を入れ、以下の手順で操作する。
</p>
<div class="fr">
<p><img src="qr-koryogo.png"
alt="https://www.yatex.org/koeki/2018-koryoGO/"
width="222" height="222"></p>
</div>
<ol>
<li><p>スマートフォンのGPS機能をONにする。</p></li>
<li><p id="qr">このWebページのURLを開く(右のQRコード)。<br>
https://www.yatex.org/koeki/2018-koryoGO/gps.html
</p></li>
<li><p><a href="links.html">リンク一覧</a>を開き、
相手の作成アカウントのところを開く。</p>
<p>「追跡をはじめる」ボタンで開始!</p>
</li>
<li><p>隠したキャラとの測定直線距離が10m以内になると捕獲できる。
見付けた場合は、キャラの特徴と吹き出しに出てきた言葉を
しっかり確認して教室に戻り、ホワイトボードに書く。</p></li>
</ol>
<ul>
<li><a href="koryogo.html">Koryogo</a></li>
</ul>
<h2>より本格的にするには</h2>
<p>本格的なゲームに近づけるためにはどうしたらよいか考えてみよう。</p>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<p>「キャラ画像を本格的にする」などはすぐにでも腕を磨ける技術である。
自分でデザインしたものを今回のゲームに仕込んでみると気分が上がるので
やってみよう。スマートフォンでもPCでも自分なりのデザインを考えて、
以下の手順で作成する。</p>
<ol>
<li>100ピクセル×128ピクセルのキャラ画像を作画する。</li>
<li>英語のファイル名をつけ、PNG形式で保存する。</li>
<li>でき上がった画像を送る:
<table>
<tr><td>Twitterの場合</td><td><a href="https://twitter.com/skipkoeki"
>@skipkoeki</a></td></tr>
<tr><td>emailの場合</td>
<td><a href="mailto:skip@e.koeki-u.ac.jp">skip@e.koeki-u.ac.jp</a>
</td></tr>
</table>
</li>
</ol>
<p>新しいルールを足したい、もしそのように感じたのであれば
本当のクリエイタの入口に立っている。
様々な技術・知識の結集がこのようなゲームをデザインできる素養となる。
数学、地理、歴史、地学、英語、国語
あらゆる知識を本気で組み合わせることが偉大な作品創作に繋がる。</p>
<h2>公益大の「情報」</h2>
<p>工学部系の情報学科はコンピュータそのものの理論を追究する。
公益大の情報は、「みんなのため(公益)」になることは何かを追究し、
それにつながるよう情報技術を修得する。今回の「光陵GO」作成に必要な
7つの技術要素はすべて公益大で重視するものである。</p>
<p>専門的な「学び」に「早すぎる」ことはない。
これをきっかけに何かのスタートを切ろう。</p>
<hr>
<!--#include virtual="signature.html"-->
</body>
</html>
HIROSE Yuuji