<html>
<head>
<title>KoryoGO - 2024-09-13 光陵高校体験模擬講義《情報》@東北公益文科大学</title>
<link rel="stylesheet" type="text/css" href="ocgo.css">
</head>
<!--
5m 着席、メディア情報コース説明
5m ログイン、firefox
15m GNSSとは、ゲームへの応用、光陵GO概要
15m Emacs+座標決め
20m 中庭で追跡
5m 公益的情報技術、結び
残り 意見交換会
-->
<body>
<h1>GNSSの技術</h1>
<h2>GNSSとは</h2>
<p>GNSSは、Global Navigation Satellite System
の略で地球規模で現在位置を特定するための技術である。
位置情報センサーは4個以上の人工衛星からの時刻信号を受信し、
それらのずれと光の速度から距離を計算し、現在位置を知る。
アメリカ固有のGNSSが「GPS」であり最も一般的だが、
国を問わず利用できるようになっているため、
現在では各国が国内での測定精度を上げるために独自で運用するシステム(日本の場合は
QZSS)がいくつかある。
</p>
<h3>スマートフォンと位置情報</h3>
<p>現在ほとんどのスマートフォンには位置情報センサーが内蔵されている。
センサーからの測位信号を取得することは、所有者の居場所の特定に
継がる可能性が高いため、アプリからの情報取得には所有者の許可が必要である。
アプリのインストール時に提示される「権限」への承認や、
実行時に求められる「許可」がそれにあたる。</p>
<h3>使用例</h3>
<ul>
<li><p>位置情報取得機能を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>ゲームのメインとなるJavaScriptプログラムを開き、
座標をファイルの所定の位置に埋め込む。</p></li>
<li><p>ポイントに対応する秘密のメッセージを4つ書き込む。</p></li>
</ol>
</dd>
<dt>プレイヤ</dt>
<dd><ol>
<li><p>スマートフォンの「位置情報」を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><kbd>Ctrl-2</kbd>をタイプしてターミナル画面を出し、
サーバリポジトリからシステムをクローンする:
<div class="screen">
<pre>
<span class="uc">cd public_html</span>
<span class="uc">git clone https://www.yatex.org/gitbucket/git/Sakatakoryo2024/2024-koryoGO.git</span>
</pre>
</div>
</li>
<li><p><kbd>Ctrl-1</kbd>(こんとろーるいち) を押してEmacsに切り替え、
<code>~/public_html/2024-koryoGO/koryogo.html</code>
ファイルを開く。手順:</p>
<div class="screen">
<pre>
Ctrl-x Ctrl-f
~/<span class="u">public_html/2024-koryoGO/koryogo.html</span> [Return]
</pre>
</div></li>
<li><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/2025-koryoGO/"
width="222" height="222"></p>
</div>
<ol>
<li><p>スマートフォンの位置情報機能をONにする。</p></li>
<li><p id="qr">このWebページのURLを開く(右のQRコード)。<br>
https://www.yatex.org/koeki/2024-koryoGO/gps.html
</p></li>
<li><p><a href="links.html">リンク一覧</a>を開き、
相手の作成アカウントのところを開く。</p>
<p>「追跡をはじめる」ボタンで開始!</p>
</li>
<li><p>隠したキャラとの測定直線距離が30m以内になると捕獲できる。
見付けた場合は、見つけた言葉をしっかり確認して教室に戻り、
ホワイトボードに書く。</p></li>
</ol>
<ul>
<li><a href="koryogo.html">Koryogo</a></li>
</ul>
<h2>ゲーム開始</h2>
<ul>
<li>各自ホワイトボードに名前と番号を書く</li>
<li>他のメンバーの番号を控える</li>
<li>上記「リンク一覧」を開いてから位置情報取得をONにして中庭に出る</li>
<li>探したい番号をクリックしてゲーム開始</li>
<li>答が見つかったら言葉をメモする</li>
<li>制限時間終了、または全クリしたら教室に戻り答を書き込む</li>
</ul>
<h2>この技術を応用してできること</h2>
<p>この技術を応用して、誰かに幸せをもたらすものを作るとしたら
どんな場面での使用が想定できるだろうか。</p>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<p>用途さえ明確になれば、実用段階に持っていく道筋は完成する。
画像を近所のものにするなどはすぐにでも取り掛かれる作業である。
自分でデザインしたものを今回のプログラムに仕込んでみると気分が上がるので
やってみよう。スマートフォンでもPCでも自分なりのデザインを考えて、
以下の手順で作成する。</p>
<ol>
<li>1600ピクセル×1600ピクセルのキャンバスを開く。</li>
<li>画像キャンバスを地図に重ねて作画する。</li>
<li>英語のファイル名をつけ、PNG形式で保存する。</li>
<li>JavaScriptソースの画像部分を書き換える。</li>
</ol>
<p>新しいルールを足したい、もしそのように感じたのであれば
本当のクリエイタの入口に立っている。
様々な技術・知識の結集がこのようなゲームをデザインできる素養となる。
数学、地理、歴史、地学、英語、国語
あらゆる知識を本気で組み合わせることが偉大な作品創作に繋がる。</p>
<h2>公益大の「情報」</h2>
<p>工学部系の情報学科はコンピュータそのものの理論を追究する。
公益大の情報は、「みんなのため(公益)」になることは何かを追究し、
それにつながるよう情報技術を修得する。今回の「光陵GO」作成に必要な
7つの技術要素はすべて公益大で重視するものである。</p>
<p>専門的な「学び」に「早すぎる」ことはない。
これをきっかけに何かのスタートを切ろう。</p>
<hr>
<!--#include virtual="signature.html"-->
</body>
</html>
HIROSE Yuuji