190716 map

ポケモンgoみたいなwebアプリを作りたい！

Unity？

できれば、webアプリでいきたい。ionic使いたい

https://qiita.com/keijipoon/items/b41e933fbc55a24986e2
@keijipoon
2019年06月21日に更新
Unity向けのAPIを提供しているマップサービス

方針

Unityのインストール
ルーレットアプリの作成
ルーレットアプリ(WebGL)をNetlifyで公開
ルーレットアプリ(WebGL)をpwa化してNetlifyで公開（→オフラインでゲームができるようにはできず(2019年8月)）
Unityで現在位置のマップを表示と、緯度経度の表示
1分ごとに現在位置の緯度経度を取得して、歩いた距離をlocalstorageに保存
1kmごとに卵が孵化してヒヨコが生まれる仕組み
sceneを追加して、孵化したヒヨコを並べて表示
5匹でブロンズ、10匹でシルバー、20匹でゴールドマークを表示
重たくなってきたら、JDKとandroidstudioをインストールしてapkファイルを作成してandroidアプリにする

map関連

https://qiita.com/Satachito/items/929a63e9b266f6db7958
@Satachito
2019年03月06日に更新
Vue で地図を表示する無料で最短の道

https://qiita.com/mitch0807/items/7ed4eaf6253a9b879ae7
@mitch0807
2019年03月14日に更新
地図ライブラリの本命「Leaflet」を5分で理解&導入する

https://codehandbook.org/use-leaflet-in-angular/
How To Use Leaflet In Angular Web Apps
→Angular6でleaflet.jsを用いてOpenstreetMapを表示する方法が記載されています。

https://kita-note.com/leaflet-tutorial-1
Leaflet入門１｜マップを表示する
2018/3/26 2018/7/21

https://kita-note.com/leaflet-tutorial-5
Leaflet入門５｜地図に現在地を表示する１
2018/4/5 2018/8/6
→現在地が取得できるそうです。

https://webplus8.com/leaflet-demo02/
公開日2019.01.24 最終更新日2019.01.24 システム開発Tips
Leafletで地図を実装するデモ(2)

https://www.achiachi.net/blog/leaflet/cross
Leaflet センタークロス表示
→この方法でgif画像を地図の真ん中に表示できそう

http://www.sozaibokujo.com/2017/06/27/rpg%E3%81%AE%E5%8B%87%E8%80%85%E3%81%AE%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3/
RPGの勇者のアイコン

https://qiita.com/hsgucci/items/c47057268af1416a18c2
@hsgucci
2019年06月10日に更新
Leafletのマーカーを変更する
→マーカーを追加し続ける状態から、更新する状態への実装方法

https://qiita.com/nyampire/items/5fd06107f25bc12a526f
@nyampire
2016年12月22日に更新
行政サイトでウェブ地図を使う際の注意点などまとめ

https://qiita.com/MYamate_jp/items/1128399f3ce14fd5590e
@MYamate_jp
2019年01月10日に投稿
Vue.jsを使いつつ、OpenStreetMapを表示する

現在地情報の許可がタップできない場合

https://www.comocci.com/2019/05/09/android_chrome/
2019.05.09
AndroidのChromeで位置情報の「許可」をタップできない場合の対処法

Unityで地図

MapBox for unity
か、
WRLD Unity SDK
がよさそう

http://studio-cross.club/?p=807
2018年2月12日投稿者: 神楽坂冬月
【Unityメモ書き番外編】現実の地図でMapを作ってみる【Mapbox】

https://qiita.com/morigamix/items/3dfb7f5b3658bfe3e5a4
@morigamix
2017年06月29日に更新
Unityのmapbox SDKでとりあえず地図を表示してみる

https://tech.mobilefactory.jp/entry/2018/12/18/110000
2018-12-18
Unityで地図を表示してみる

https://qiita.com/lycoris102/items/f9edd8728c1f2966debb
@lycoris102
2017年10月12日に更新
[Unity] WRLD Unity SDKで地図情報に基づいた建物を表示する

mapbox for Unity

http://korechipostit.hatenablog.com/entry/2019/05/21/174900
@morigamix
2017年06月29日に更新
Unityのmapbox SDKでとりあえず地図を表示してみる

http://korechipostit.hatenablog.com/entry/2019/05/21/174900
2019-05-21
Unity で地図が表示可能な mapbox を触ってみた（初級編）

https://qiita.com/kakuarinan/items/71889ddb46893211a9da
@kakuarinan
2018年12月14日に投稿
HAL Advent Calendar 201814日目
mapboxで地図情報から街を作る
Unity

https://www.kemomimi.dev/2019/05/06/unity-mapbox-show-marker/
【Unity】mapbox for Unity – 現在地点にマーカーを表示する
2019-05-06 2019-06-03

Unityにおけるフレームと時間

https://unity-yb.github.io/articles/frame_and_update.html
Unity におけるフレームと Update

http://maskedgetter.hatenablog.com/entry/2017/10/11/005146
2017-10-11
Unityでn秒ごとに処理を実行する

https://freesworder.net/unity-countdown-timer/
最終更新日　2019/08/07
Unityでカウントダウンタイマーを作成したい！

https://qiita.com/kwst/items/87974dcd961cf7f5fd6a
@kwst
2015年07月12日に更新
数秒おきに処理を実行する【Unity】

https://gametukurikata.com/basic/coroutine
Unityでコルーチンを使って定期的に処理をする
2017/3/13 2018/12/2

現在位置の取得GPS

https://qiita.com/mintcandy/items/9aa274044af646a1d5bc
@mintcandy
2019年01月11日に更新
Unityで位置ゲーを作るために必要な技術その1 現在地取得と逆ジオコーディング

http://nakorun.hateblo.jp/entry/2018/03/24/141515
2018-03-24
位置情報ゲーム制作日誌その１：UnityプロジェクトにFirebaseSDKを組み込もう

https://qiita.com/lycoris102/items/35e338b32105879e0ab9
@lycoris102
2016年09月22日に更新
[Unity] Android/iOSで位置情報を取得する

https://qiita.com/phi/items/914bc839b543988fc0ec
@phi
2014年12月18日に投稿
[Unity] MiniJSON 使って json 読み込み

https://gametukurikata.com/basic/coroutine
Unityでコルーチンを使って定期的に処理をする
2017/3/13 2018/12/2

アプリをandroidスマホにインストールした後に権限の許可が必要

以下へ
z_blog:2019:190828_unity_gps

https://akira-watson.com/android/gps.html
[Android] GPSで位置情報を取得するアプリを作る
2019/8/14
（引用ここから）

テストのみの簡易的な方法：
この実装無しでも可能です。(但し、テストのみ)
アプリをインストール起動後、「設定」「アプリと通知」から該当アプリにて
「権限」から「位置情報」をOnにすれば、面倒なpermissionのチェクコードが無くても動くことは動きます。

（引用ここまで）

https://qiita.com/Takaaki_Ichijo/items/d9a7639f2dc4d1060616
@Takaaki_Ichijo
2017年11月28日に更新
NCMB Unity SDKがAdMob等のAndroidプラグインと競合する場合の解決

http://edom18.hateblo.jp/entry/2018/03/20/200243
2018-03-20
Unity向けにAndroidのネイティブプラグインを作成する
Android C# Java Plugin Unity

https://freelyapps.net/correspond-to-permission-of-android6/
UnityでAndroid6.0におけるパーミッションを対応する
2016/2/22 2018/3/28

→これが一番の候補か？

（引用ここから）
Plugins/Androidフォルダを作り、そこにandroid-support-v4.jarを置いておけば解決できます。
（引用ここからまで）

https://teratail.com/questions/182750
Unityで、Androidの「現在地の権限」を付与したい
C#Unity
nagi2011
投稿 2019/04/03

https://teratail.com/questions/203447
Unityでのandroid-support-v4.jarの入手法と使用法を教えてください
OROCHI_TUNGUS
投稿 2019/07/30

https://docs.unity3d.com/ja/current/Manual/AndroidAARPlugins.html
AAR プラグインと Android ライブラリ
2018.3 Unityマニュアル

https://monry.hatenablog.com/entry/2019/03/12/163447
2019-03-12
Unity Android ビルドの Minify オプションの罠

https://m3-soft.com/2019/02/25/1050/
UnityでNCMBとアドフリくんのSDKの導入方法（エラーで死にかけた）
by asano on 2019年2月25日

https://forum.unity.com/threads/open-source-androidruntimepermissions-manage-runtime-permissions-synchronously-on-android-m.528833/
[Open Source] AndroidRuntimePermissions - manage runtime permissions “synchronously” on Android M+

https://github.com/yasirkula/UnityAndroidRuntimePermissions

天気情報やunityremote

http://baba-s.hatenablog.com/entry/2015/02/16/101745
2015-02-16
【Unity】「ニコニ立体ちゃんのお天気情報」Android版を公開しました

https://docs.unity3d.com/ja/current/Manual/UnityRemote5.html
Unity Remote

2点間の距離の計算（緯度と経度）

setInterval
で、1分おきに、緯度と経度を取得して、以下のように動いた距離Lを計算
L_sum = L_sum + L
で、今までの距離に加算する

L_sumが3の倍数になるたびに卵が1個ふか。

https://qiita.com/kawanet/items/a2e111b17b8eb5ac859a
@kawanet
2018年08月05日に投稿
緯度経度から2地点間の距離 (km) を計算する JavaScript

https://www.logical-arts.jp/archives/18
緯度経度から距離と方位を求める方法
投稿日：2009年12月14日更新日：2016年5月11日

function distance(lat1, lng1, lat2, lng2) {
  lat1 *= Math.PI / 180;
  lng1 *= Math.PI / 180;
  lat2 *= Math.PI / 180;
  lng2 *= Math.PI / 180;
  return 6371 * Math.acos(Math.cos(lat1) * Math.cos(lat2) * Math.cos(lng2 - lng1) + Math.sin(lat1) * Math.sin(lat2));
}

Unity入門

https://qiita.com/nmxi/items/7950fb12ef925efa276d
@nmxi
2019年06月29日に更新
今日からはじめるUnity

unityとfirebase

https://devlog.hassaku.blue/2019/03/unity-firebase-firebase.html?m=1
2019年3月2日土曜日
[Unity, Firebase] Firebaseを使ってオンラインランキングボードを実装する

http://www.project-unknown.jp/entry/firebase-login-vol3_1
20170830
UnityでFirebaseのRealtimeDatabaseとデータのやり取りをする - UnityでFirebaseを使ったオンラインランキングシステムを作るvol3

UnityとNCMBでオンラインランキング作成

https://blog.naichilab.com/entry/webgl-simple-ranking
2017-05-24
【Unity、WebGL】なるべく簡単にオンラインランキング機能をつけるサンプル

unityでVue.jsでpwa

@vue/cliのインストール
vue createでpwaを作成（C:/unity/SwipeCar/）
npm install vue-unity-webgl -D
Unityプロジェクトを作成（C:/unity/SwipeCar/SwipeCar/）
C:/unity/SwipeCar/static/unityBuild/ フォルダにUnityアプリをWebGLでbuild
unityのフォルダに、unity用のgitignore
Netlifyにデプロイ

https://qiita.com/MizoTake/items/7089494d7bd3e700e34b
@MizoTake
2018年10月29日に更新
Unityで吐いたWebGLをPWAで動かしてみた
→20190820現在、私の技術ではうまくいかず。

https://qiita.com/n11sh1/items/5d64c337ef927ac8d5d6
@n11sh1
2019年06月27日に更新
Vue CLI 3 で PWA チュートリアル（Service Workers / Add to Home Screen / Push Notifications）

一般的なPWAの作り方

https://qiita.com/umamichi/items/0e2b4b1c578e7335ba20
@umamichi
2019年06月27日に更新
PWA 入門〜iOS SafariでPWAを体験するまで〜 2019年7月更新

HTTPS対応
manifest.jsonの設置
Service Workerを有効にする

具体的には、

NetlifyなどのHTTPS対応サイトにデプロイする
manifest.jsonを設置
icon-256.pngの設置
icon-192.pngの設置
service-worker.jsを設置
index.htmlの編集

manifest.jsonの例

{
  "name": "PWA Sample",
  "short_name": "PWA",
  "background_color": "#fc980c",
  "icons": [{
      "src": "./icon-256.png",
      "sizes": "256x256",
      "type": "image/png"
    },{
      "src": "./icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    }],
  "start_url": "./?utm_source=homescreen",
  "display": "standalone"
}

service-worker.jsの例

// service-worker.js
self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
});

self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
});

// 現状では、この処理を書かないとService Workerが有効と判定されないようです
self.addEventListener('fetch', function(event) {});

index.htmlの<head><head/>内に、以下を記載

  <!-- manifest.jsonを呼び出しています -->
  <link rel="manifest" href="./manifest.json">
  <script>
    // service workerが有効なら、service-worker.js を登録します
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('./service-worker.js').then(function() { console.log('Service Worker Registered'); });
   }
  </script>

UnityをWebGLで書き出すときの注意点

https://qiita.com/iwaken71/items/c32760e1cc2ba01e8f9a
@iwaken71
2016年06月29日に更新
UnityのWebGLで書きだしたゲームをGitHubを使って公開する

https://qiita.com/tsubaki_t1/items/93e4b91b830729cd93a4
@tsubaki_t1
2016年08月29日に更新
UnityのWebGLで日本語を表示する
→Noto Sans CJK JPなどの、日本語を含むフォントを設定する。

https://ekulabo.com/build-for-webgl
【Unity】WebGL向けにビルドしたゲームをサーバーにアップロードしてみる
2018.06.09
→

『Player Setting』でWebGLでビルドするときの画面サイズを確認。
『Canvas』オブジェクトのうち、Canvas Scalerコンポーネントの設定を確認。
『Scale With Screen Size』を選択
日本語可能なフォントの設定

GlideとGoogleスプレッドシートで簡単にwebアプリ作成

https://paiza.hatenablog.com/entry/2019/04/10/%E7%B0%A1%E5%8D%98%E9%81%8E%E3%81%8E%E3%82%8B%EF%BC%81Google%E3%82%B9%E3%83%97%E3%83%AC%E3%83%83%E3%83%89%E3%82%B7%E3%83%BC%E3%83%88%E3%81%8B%E3%82%89PWA%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E9%96%8B
2019-04-10
簡単過ぎる！GoogleスプレッドシートからPWAアプリを開発できる「Glide」を使ってみた！

https://qiita.com/sikkim/items/5225e8cbaec3cbbe7393
@sikkim
2019年04月18日に投稿
Glideを利用して20分でPTAの会計アプリを作る

https://qiita.com/kinneko/items/2d15a7cb87cb17a483a7
@kinneko
2019年06月08日に更新
「5分で作れる！Glideappsではじめる超簡単PWA」セッションで利用する予定のデモ動画とプレゼン資料

https://qiita.com//ngmt83/items/5581a177d13540237623
@ngmt83
2019年07月04日に更新
GlideでスプレッドシートからPWAを作る際に知っておきたい７つのこと

サルでもわかるWEBプログラミング

目次