投稿日:

那覇市文化財をGoogleマイマップで公開してみた

の2023年5月12日の琉球新報に以下の記事が掲載され、興味があり実装してみました。

新ビジネスの種、あるかも　沖縄県がオープンデータサイト開設、
県内全41市町村と民間団体が掲載対象
https://ryukyushimpo.jp/news/entry-1708664.html

沖縄県は4月、県内全41市町村と民間団体が公開する
「オープンデータ」をまとめた
サイト「沖縄オープンデータプラットフォーム」を開設した。
2日現在、48種510個のデータが掲載されており、
それぞれダウンロードできる。
さらに、県内企業のデータ活用事例を紹介したり、
実際にデータを視覚化したりするツールの使い方も紹介している。

目次

  1. 前提条件
  2. 手順
  3. マイマップ公開
  1. 前提条件
    BODIKのAPIからJSON形式で取得
    GoogleAppsScrip(以下 GAS)tを使用するため、Googleアカウントが必要
  2. 手順
    1. Googleスプレッドシート(以下スプレッドシート)を作成
    2. データ取得API
      GASを使ってBODIKのAPIからデータを取得するために、データのリソースIDを把握しておく必要があります。
      今回は、那覇市文化財一覧のリソースIDは、以下の斜字部分です。
      https://data.bodik.jp/dataset/okinawa-dpf_naha_city/resource/889ddb57-cf16-438e-ad69-25be2c98ec3a
      上記のURLの情報をスプレッドシートに展開します。
    3. GAS編集
      Apps Scriptを開きます

      プログラムコードを記述します。

      function myFunction(){
 
}

      と記載されている部分を、以下のコードに書き換えます。

function getFacility() { 
  // API request 
  var resource = '889ddb57-cf16-438e-ad69-25be2c98ec3a'; 
  var requestUrl = `https://data.bodik.jp/api/3/action/datastore_search?resource_id=${resource}`; 
  var response = UrlFetchApp.fetch(requestUrl); 
  var res = JSON.parse(response.getContentText()).result.records; 

  // データ項目のうち「名称」「住所」「緯度」「経度」のみを取得 
  var values = res.map((content) => { 
    return [content['名称'], content['住所'], content['緯度'], content['経度']]
  }); 

  // データの項目名をセット 
  var title = [['名称', '住所', '緯度', '経度']]; 
  // 項目名とデータを結合する 
  values = [...title, ...values]; 
  // 結合したデータをスプレッドシートに出力する 
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); 
  sheet.getRange(`A1:D${values.length}`).setValues(values); 
}

デプロイします。


実行します。

スプレッドシートを確認するとデータ取得されていることが確認できます。

  1. マイマップ公開
    1. Googleマイマップを開きます。
    2. インポートを選択します。
    3. インポートしたいスレッドシート(那覇市文化財一覧)を選択します。
    4. 指示に従い選択していきます。
      1. 目印を配置する列の選択
        緯度と経度を選択
      2. マーカーのタイトルとして知丗する列を選択します。
        名称を選択
      3. 公開！
投稿日:

【UnityとHololens2のエミュレータを連動させてみた】

今回は、唐突にUnityとHololens2のエミュレータを連動させてみたくなったのでその備忘録も兼ねて手順をまとめていきたいと思います。

目次

[１]前提条件（環境等）
[２]手順
[３]まとめ

[１]前提条件（環境等）

前提条件としてWindows OSの使用とします。
また、Hyper-Vの機能が使える事が必須です。（Windows 10 Proのみ）

今回、以下の3つを使用いたします。※インストールします
【Unity・Visual Studio2019・Hololens2エミュレータ】

【Unity】https://unity3d.com/jp/get-unity/download
・現時点での最新のバージョンで尚且つ長期サポート（LTS）の『2021.3.24f1』を使用していきます。

【Visual Studio 2019】https://visualstudio.microsoft.com/ja/downloads/
・無料版の『Community』をダウンロードします。

【Hololens2 Emulator】https://go.microsoft.com/fwlink/?linkid=2220897
・サイト記載時の最新のビルド『10.0.20348.1535』を使用

[２]手順

⓪必要なソフトのインストール！
※今回、各ソフトウェアのインストール手順は省きます。

①初めにPCにHololens2のエミュレータを使用するためにHyper-Vの確認をします。※PCにHyper-Vがないとエラーになります…
1.「windowsの機能の有効化または無効化」を開きます。

2.Hyper-Vを有効にします（有効にした場合、再起動する必要あり。）

②Unityでエミュレータにて起動するアプリのプロジェクトを作成します。
1．Unity Hubを起動し、新規作成ボタンを押下する。

2. バージョン、保管場所、プロジェクト名を適当に決めてプロジェクトを生成します。※テンプレートは『3D』を選んでください。

3.エミュレータとの連携確認用に好きなオブジェクトを設置します。

③.Microsoft.MixedReality.Toolkit（MRTK）をプロジェクト（アセット）に追加
※MRTKをもっていない人は先にダウンロードから！
1.『Assets』⇒『Import Package』⇒『Custom Package』押下。

2.ダウンロードしたMRTKを選択する。
（Microsoft.MixedReality.Toolkit.Unity.Foundation.2.8.3.unitypackage）

3.そのまま、すべてImportします！

4.『Mixed Reality』⇒『Toolkit』⇒『Add to Scene and Configure…』を押下。
※プロジェクト（Scene）にMRTKが追加されます！

④ Unityの書き出し設定
『Build Settings』
・Universal Windows Platform に切り替える。値を画像に合わせる。

『Project Settings』
・【XR Plugin Management】をインストールする。

・【Quality】を画像に合わせる

⑤プロジェクト（Seacne）をビルドする。※事前に別フォルダを作るのをお勧めします！（今回は「Build」フォルダを作成）

⑥ビルドしたプロジェクトをVisual Studio 2019にてエミュレータ環境で実行する。

[３]まとめ

まとめ！大まかな流れとしては以下となります。
⓪必要なソフトをインストール
①前提条件をチェック（Hyper-Vが有効になっているか等）
②Unityプロジェクトを作成、オブジェクト設置。
③UnityプロジェクトにMRTKをインポート
④Unityの書き出し設定を行う。
⑤プロジェクト（Seacne）をビルドする。
⑥ビルドしたプロジェクトをVisual Studio 2019にてエミュレータ環境で実行する。

以上、UnityとHololens2のエミュレータを連動させてみた！でした～

投稿日:

自然言語からHTMLとCSS、JSまで生成してくれるAIツール

AIによってプログラムを生成するツールは色々あるのですが、HTML・CSS・JSを生成してくれる日本語対応のツールをご紹介します。

JIT.codes
※利用にはメールアドレスの登録が必要です。


『シンプルモダンなログインフォーム　IDとパスワード入力　IDはメールアドレス　パスワードは8文字まで』
というオーダーをしてみました。
背景が黒なので文字が見えにくいですが、必要な物は生成されています。

<div class="login-form">
  <h2>Login</h2>
  <form>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" id="email" placeholder="Enter email" required>
    </div>
    <div class="form-group">
      <label for="password">Password:</label>
      <input type="password" id="password" placeholder="Enter password" maxlength="8" required>
    </div>
    <button type="submit">Login</button>
  </form>
</div>

生成されたHTMLのソースを見てみると、最初のinputはtypeがemailになっていますし、パスワードのinputはmaxlengthが8に設定され、オーダー通りとなっています。

次はJSも生成されるよう、下記の内容でオーダーしました。
『ハンバーガーメニュー　クリックするとアイコンが×にアニメーションで変化する　メニューが開いている場合はbodyのスクロールを止める』

ハンバーガーメニュー開閉のJSは動いたのですが、『アイコンが×にアニメーションで変化する』が理解できなかったようで、生成されませんでした。（記号の×をcorss markに変更して再度オーダーしましたが、結果は変わりませんでした。）

画面上部の「Explore」からは、誰かがオーダーしたものを見ることができます。（私が確認した時点では、生成されたはずのJSのコードがごっそり抜けていますのでご注意。）
https://jit.codes/explore

生成されるものは完璧ではありませんが、ベースとして使えば、イチからコーディングするより時間短縮になるかなと思います。