福野泰介の一日一創 - create every day

自治体オープンデータの意義は、自治体の仕事を減らし、民間企業による豊かさの創出!


オープンイベントさいたま
埼玉県オープンデータ」で唯一の4つ星オープンデータ、RDFで提供されていた広報情報オープンデータをjig.jp、この夏のインターンに参加する高専生による作品「福井県のイベント (src on GitHub)」を埼玉化。 自治体による広報の仕事を減らせるかも。

RDFにもターゲット情報が入っていれば、若者や、高齢者など、対象別に見やすいアプリづくりもできるので、一層伝わりやすくなります。 Vue.jsを使ったモダンで見やすいアプリづくりは、地域の高専生や、JavaScriptが使える小中学生にとって良いネタにもなります。


オープンデータを庁内で広めるオープンデータリーダーを育成する総務省企画「オープンデータリーダ育成研修
自治体の中でやっている繰り返される仕事、オープンデータで効率化できませんか?
イノベーションのはじめのいっぽは、当たり前に疑問を持つこと。
今までを変える意識と行動力を持つ人、それがリーダーです。
教材はオープンデータ、今すぐ、行動を!


オープンデータによる連携を活かす、11万件もの公園データを提供する「PARKFUL
公園の設備を提供する会社、株式会社コトブキとの連携がおもしろい!


東さんによるオープンデータ講義。震災での反省から始まったオープンデータ。避難所データがオープンデータではないと、活用するために問い合わせが必要。実際に30箇所問い合わせて、OKの返事はたった9。 事実、災害時にサーバーがダウンしていて避難所データにすらたどり着けな事態が未だに発生しています。


ネット時代、データを広く共有するコストが劇的に下がりました。まだまだ市民意識が追いついていませんが、まずはデータがあれば、楽しく可視化するアプリが生まれ、広まります。 アプリを誕生させるためには、開発者にとって優しく横展開が可能でうれしい「5つ星オープンデータ」が必須!


鯖江市のオープンデータ産みの親、牧田さんに会ったことがきっかっけで、自分でなんでもやっちゃうことにしたという、埼玉県深谷市の斉藤さん! 「ふかやMap」から様々な位置情報付きデータをオープンデータとしてダウンロードできます。


odp - オープンデータプラットフォーム
5つ星オープンデータはじめのいっぽに、避難所データをExcelでまとめてアップロードするだけ。無料です。

さまざまな業務課題や、社会を豊かにする取り組みへのチャレンジに向けて、まずは最小限の手間で、5つ星オープンデータ化と、データをアップした瞬間に動くアプリをご体験を!

5つ星オープンデータ対応避難所ナビアプリ「ヒナンパス

今週末、鯖江のサンドーム福井ではB'zライブ
気になるサラベ柄ポーチ、サイズ感が気になったのでVR。

realbox in VR - 幅18cm x 高さ10cm x 奥行き8cm」スマホVRでもOK!
なるほど、思ってたよりちょっと大きいけど、悪くないかも。
手に持って動かせるといいかも。
自分の手の大きさを測って、コントローラーの替わりに出すと、きっともっと分かりやすい。
PCでも動きますが、サイズ感は伝えられません。


realbox 100インチテレビ (SONY KJ-100Z9D)
おまけに、100インチの4Kテレビ、SONY KJ-100Z9D(コンポジット入力端子も付いているからIchigoJamもOK!)も見てみました。大きい!

URLのパラメータで大きさと色を自在に指定できる、リアルサイズを体感するVRアプリ「realbox」

W cm x H cm x D cm

今回のプログラムは37行でした。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>realbox</title> <meta name="description" content="real box in VR"> <script src="aframe.js"></script> </head> <body> <script>"use strict" window.onload = function() { const hash = document.location.hash let w = .18 let h = .10 let d = .08 let c = "#333333" if (hash.length > 1) { const s = hash.substring(1).split(',') const a = s[0].split('x') w = parseFloat(a[0]) / 100 h = parseFloat(a[1]) / 100 d = parseFloat(a[2]) / 100 c = s.length > 1 ? "#" + s[1] : c } const box = document.createElement("a-box") box.setAttribute("position", { x: 0, y: 1.3, z: -.5 }) box.setAttribute("width", w) box.setAttribute("height", h) box.setAttribute("depth", d) box.setAttribute("color", c) scene.appendChild(box) } </script> <a-scene id="scene"> <a-sky color="#ECECEC"></a-sky> </body> </html>

links
- VRではじめる現代HTML入門 - Oculus Quest x 福井高専生
- 50行で作るVRマイクラ風 / boxcraft for Oculus Quest with A-Frame
- モバイル時代こそバス! つつじバスロケVRビジュアライズ - リアルタイムオープンデータ x Oculus Quest
- 異次元の分かりやすさ、触って学ぶVR数学、ベジェ曲線編 on Oculus Quest

A project started to translate the documents of IchigoJam for English speakers from a member of IchigoJam-FAN.
I added descriptions in broken English to IchigoJam doc opendata, and updated apps.

"IchigoJam BASIC command list" also for printings

I'd be glad if you sent me a comment in cool translated words!
"IchigoJam doc repository on GitHub"

5つ星オープンデータとして規格化しておくと、自分で使うときにも便利!

大人には便利なアプリですが、スマホを持っていない小学生には紙、大事。
アプリと同じオープンデータを使って紙出力版を生成するwebアプリを作りました。

IchigoJam BASIC コマンド一覧 (印刷用)PDFダウンロードはこちら
やさしい順に並んでいますが、ABC順カテゴリ順としても表示可能。お好みでどぞ!


IchigoJam BASIC コマンド一覧アプリ
カテゴリデータ、優先順位データなどを追記したので、アプリも合わせてバージョンアップ。機能ごとの簡単にチェックできるようになりました。 sabae.cc語彙も少し成長。

オープンデータはGitHub上にあります「IchigoJam/doc: documents of IchigoJam
issuesを使ったコメント、プルリクなど、大歓迎です!
次は英語化?

そろそろリリース、IchigoJam BASIC 1.4。
高専生、大学生など、スマホを持っている人にもわかりやすいリファレンスづくり、スタート。


IchigoJam BASIC コマンド一覧
ソースはGitHubにありますので、追記翻訳など、プルリク、コントリビューター希望、歓迎です。
1.4搭載予定のコマンドや、使い方も含まれています。


CSVデータ
schema.orgの語彙と、足りない気がしたものはsabae.cc語彙を作って補っています。

ichigojam-1.4.0b01.zip
- POINTで文字がある場所をチェックした場合1を返すように変更

総額3700万円をかけた一大イベント、鯖江市議選「SABAE20総選挙」スタート!
候補者25人から今後4年、10億円をかける鯖江市議会の運営メンバー20名が決まります。(議員報酬1人あたり3400万円)
福野あおい 鯖江市議会議員 — 鯖江市議会議員選挙

鯖江市の未来を担う、20名のポートフォリオを決定するのに、1名だけを選ぶという不思議な選挙制度ですが、現行ルールなので仕方ありません。
Code for Sabae として、候補者一覧オープンデータ(CSV-utf8)デジタルポスター掲示版アプリをひとまず開発しました。 いろんなアプリを作って盛り上げましょう!(ハッシュタグ #sabae20


SABAE20総選挙2019 鯖江市議候補者デジタルポスター&オープンデータ
ダブリンコアに習って、sabae.cc語彙を作りました。schema.orgにないものを勝手に作っていきます。

選挙カーを使う候補者の方、前回の2015年選挙時につくったアプリをご活用ください!

選挙カー連呼スポット探しアプリ
オープンデータ選挙カー連呼スポット探しアプリ 鯖江市議選スタート!
* 認められているのは、8時〜20時、学校・病院・診療所その他の療養施設の周辺以外、連呼行為(車上の連呼以外は公職選挙法違反です)

各地で欲しいとの声多数。地方公共団体の方、学校と病院オープンデータ、ぜひ5つ星オープンデータ化してください。(odpへの登録いただければ、即アプリに反映されます)

投票日は、6/30日曜日です
鯖江市議会議員選挙のお知らせ – めがねのまちさばえ 鯖江市

かけあわせが熱い、クロステックデザインコース、京都造形芸術大学情報デザイン学科にてIoTハッカソン!ユニークなプロダクトのたまごが産まれました。

3台のIchigoSodaを川沿いにおいたセンサーIoTを使った、あるサービスのデモ発表。スマホで状況が把握できて便利! ユニークな5つのプロトタイプ、実際見てみると発想が更に広がりますね。


資料「IoT&スマホアプリ プログラミング with IchigoJam x sakura.io
IchigoJamを使って、プログラミング、電子工作、ネットワーク、IoTの基本をざっとハンズオンして、自由製作ハッカソン!


5V/GND/信号線、ジャンパーピンで簡単に接続できるセンサーや出力デバイスが27コつまったセット「Gravity」便利で楽しい! (まとめ買いは「こちら、ロボショップ」がお得!)


アナログセンサーからの値を自在に操るのがプログラミング!
フローチャートと照らし合わせて考えるとわかりやすい!


音楽、人気!
エイリアンスピーカーをつなぐと、大きくていい音で鳴らせます!


IoT化を進める前に、まずはシンプルローカルネットワーク with IchigoJam x 2
IN1とOUT1を相互につなぎ、GND同士をつないで、電位を合わせて、プログラムを書いたら二人でボタン通信開始!

10 ?BNT(),IN(1):CONT

どうやって会話するか話してみよう。お互いの約束、それが通信プロトコル。
モールス信号は、人間同士の代表的な通信プロトコル。
世界中を結ぶ電脳ネットワーク、インターネットはTCP/IPをベースにいろんなコンピューター同士のプロトコルでできています。


スマホでもPCでもVRでも動く!人気のプログラミング言語、JavaScript でスマホアプリ入門。
iothackbase - GitHub」を Fork して、開いて、IDだけ設定して、IchigoSodaから操る!


準備ができたら、IchigoSodaからコマンド入力

IoT.OUT 1

ノートPCで開いているページ(webアプリ)がパッと赤く変ってメッセージがでたら成功!


アイデア決定からスタートする、自由製作タイム。
アイデア苦手!?いやいや、アイデアは機械的に無限に作れます。
画像検索と組み合わせたバージョンアップ版idea3x3idea3x3img」誕生!
いいアイデアかも?と思ったら、とりあえず深く考えず作れば見えてくる気づきと、作るほどに伸びるスキルに得しか無い!


いろんなセンサーを使ってユニークなIoTづくり!


IchigoJamリファレンス」を読んで調べて、自分で創る力をつけよう!
解決力さえ身につけて、最新技術が楽しいおもちゃにしよう!


IoTと地図アプリとの連動もいいですね!
その筆頭、バスロケシステム、その筋屋さんによる実験、開発が快調に進んでいます。
学生も海外からの外国人も迷い、不満を抱える、京都の複雑なバス事情もガラッと解決しちゃうかも!?


Googleナビに導かれるまま行った先にバス停なし。同じバス停で路線ごとに異なるバス停!
リアルタイムな位置情報に加え、鯖江のバスでやっている混雑状況も5つ星オープンデータ化して、ナビが取り込めるようになれば、来たバスに乗れない問題や、大幅遅延問題が解消するかも?


もう一つ発見した、Googleナビ、データの問題。京都の中心街、三条大橋、ナビでは右折指示も、実際は曲がれない。 21世紀はデータインフラの時代。交通オープンデータをはじめ、いろんなデータで楽しいを創ろう!


Oculus QuestによるVR体験、JavaScriptを使ったwebアプリづくりも簡単です。
HTMLからできるVRアプリづくり、ぜひチャレンジしてください!(カテゴリー:vr


京都造形芸術大学、アートとテックがクロスする新世代プロダクトの誕生、楽しみですね!
クロステックデザインコース|情報デザイン学科|学科・コース|京都造形芸術大学」

お店の雰囲気を知るのに便利な、360度写真。
立ち寄った、京都五条の和えるのお店、VRアプリ化してみました。

VR aeru gojo

今回はスマホVRでもPCでも使える画面中心のカーソルを使ったUI。
白い球を0.5秒見つめると、シーンが変わります。

方向は未調整、きれいに簡単に合わせられると便利そう!
環境音などを加えると臨場感出そう!

VRでは目線、大事。持ち運びやすく自撮り棒にもなる三脚を探したい。

小学校で習う不等号記号を使って囲むことにしたものをタグと呼びます。

<!DOCTYPE html> <html> </html>

<!DOCTYPE html> と最初に書くと、HTML5モード、現代HTMLとしてブラウザが解釈してくれます。
<html> これがHTMLタグ、同じ中身でスラッシュで始まる </html> までが、HTMLです。

<!DOCTYPE html> <html> <head> </head> <body> </body> </html>

HTMLタグの中に、HEAD(頭)とBODY(体)を追加します。こういう入れ子構造(ツリー構造)で作っていきます。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>simple - A-Frame</title> <script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script> </head> <body> </body> </html>

HEADには文字コードや、タイトル、拡張したいものなどを書きます。
グローバル社会における文字コードは、utf-8(ユニコードの可変長エンコード体系)が標準です。 (ファイルの保存も utf-8 にしておかないと、文字化けするかも)

index.html と名前をつけて保存して、ブラウザで開いてみましょう。まだ中身(=BODY)がないですが、タイトルに注目!

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>simple - A-Frame</title> <script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script> </head> <body> <a-scene id="scene"> <a-sky color="#000000"></a-sky> <a-plane rotation="-90 0 0" width="50" height="50" color="#333333"></a-plane> </body> </html>

VR空間(=asscene)に背景(=a-sky)と、地面(=a-plane)を作りましょう。色(=color)は、赤緑青の順、0-255まで16bit2桁を3つ続けて#と合わせて表記します。 a-で始まるタグは、WebVR用のフレームワーク A-Frame による拡張タグです。HEADで読み込ませたので使えます。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>simple - A-Frame</title> <script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script> </head> <body> <a-scene id="scene"> <a-sky color="#000000"></a-sky> <a-plane rotation="-90 0 0" width="50" height="50" color="#333333"></a-plane> <a-sphere position="0 1.5 -2" radius=".5" color="#EF2D5E"></a-sphere> <a-box position="2 1.5 -2" rotation="0 0 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box> <a-cylinder position="-2 1.5 -2" radius="0.5" height="1" color="#FFC65D"></a-cylinder> </a-scene> </body> </html>

球(=a-sphere)を、自分の位置を原点として、真ん中、右へ1.5m、奥に2mの位置(=position)に置きます。同様に箱(=a-box)と円錐(=a-cylinder)も置きました。


simple WebVR - A-Frame
マウスやタッチで視点を動かせます。


PCの場合カーソルキーで移動もできます。

3Dゲームも作れちゃうような気がしてきましたね!
プログラミング言語、JavaScriptを使うと、この3D空間を自在に操れます。

jig.jpロゴを作ってみたものがこちら。

jig.jp logo WebVR - A-Frame


Oculus Questだと、寄ってみたり、歩き回れたりするので楽しさが格別です。
スマホへ画面を転送し、録画しました。

Oculus Quest、Oculus Go、スマホVRを使って自分で作った空間に入ってみましょう!

福井高専でも Oculus Quest は大好評!

スゴイ → もっとやってみたい → 自分でも作ってみたい → じゃあ、作ろう!
この流れは、小学生でも高専生でも一緒です。

HTMLで作る自分だけの3Dホームページ、JavaScriptを学べば画面転換、アニメーションや、ゲームまで!
高専は教えてくれるのを待つところではなく、自分で学び放題な5年間を楽しむところ。

広大でなお広がり続ける技術の世界へようこそ!

世界をつないだOS、web。
JavaScriptを使って創れば世界中のPC、スマホを持ってる人に届けられます!

日々アップデートされる、JavaScript用の数々な便利ツール。 そろそろリニューアルを考えている本ブログ、静的ページ生成もサクッとこなしてくれるという Nuxt.js の前段として Vue.js はじめ。

日本コミュニティがしっかりしていて、本家ドキュメントがわかりやすい!
はじめに — Vue.js

ひとまず、ネパールの車のナンバーや、お札など、まちなかでも良く見かける、ネパール数字変換アプリを、漢数字変換アプリをもとにつくってみます。

Vue.js を使い始めは簡単。1ファイル vue.js を読み込むだけ!

<meta charset='utf-8'/> <div id="app"> <input id="jp_num" v-model="num"><br> <span id="nepali_num">{{ npnum }}</span><br> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>"use strict" const toNepaliNumber = function(s) { return s } new Vue({ el: '#app', data: { num: "192.168.0.1", }, computed: { npnum: function() { return toNepaliNumber(this.num) } } }) </script>

v-model や、 {{ }} を使って、HTMLとJavaScriptをつなぎます。
数字をネパール数字に変換するJavaScriptのメソッド toNepaliNumber を実装して、できあがり!

const toNepaliNumber = function(s) { const NEPALI_NUM = "०१२३४५६७८९" let res = [] for (let i = 0; i < s.length; i++) { const c = s.charCodeAt(i) - "0".charCodeAt(0) if (c >= 0 && c < 10) res.push(NEPALI_NUM[c]) else res.push(s.charAt(i)) } return res.join("") }

to Nepali Num (base)」 → to Nepali Num (with CSS and so on..) Vue.js の真骨頂は、配列や複雑なデータ構造も View としての DOM に即反映されるところ。
いろんなデータをきれいに整理したwebサイトやwebアプリ、更にすばやくたくさん作れそう!
PCN大阪、森さんの本もどうぞ!「動かして学ぶ!Vue.js開発入門 (NEXT ONE)

世界中のプログラマーが自らの道具を創り、磨き、シェアされ、それらを使って一段と強い道具を作るループは、構造的に高速化するしかありません。 ぜひ、この輪に加わわっちゃいましょう!

はじめての JavaScript のための、時計、地図、AR、ゲームなど作成用シンプルフレームワーク jigjs もどうぞ!

links
- Vue.js
- jigjs - Numbers in Nepali language on IchigoJam

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY 福野泰介 - Taisuke Fukuno / @taisukef / アイコン画像 / プロフィール画像