統計ダッシュボードには、日本の今を示す様々なデータがあります。 APIもあるので、プログラミングでの活用も簡単!

統計ダッシュボード」のメニュー、API、開発者向けサンプルをみてみましょう。


統計ダッシュボード - 開発者向けサンプル
オープンソースでの活用ナンバーワン言語、JavaScriptで作られたサーバーレスで動くwebアプリのサンプルがあっていい感じです! CORS対応しているAPIがうれしいですね!高校の情報教材としても良さそうです。

ただ、おしいところが3つ。

- 古いJavaScript(jQuery、変数宣言不要、var)
- 非オープンソースに依存している
- 表記が冗長

共に改善しましょう!
まずは、JavaScriptを type=module のscriptタグにして、変数宣言を必須にしてより安全に、varをletかconstに変更。 グラフ表示モジュールをオープンソースのChart.jsをモジュール化した、Chart.mjsに変更して、import。 filter、findを使って表記をシンプルに。


https://code4sabae.github.io/statapi-sample/」(src on GitHub)

import Chart from "https://js.sabae.cc/Chart.mjs"; window.onload = async () => { // APIでデータ取得 const indicatorCodeX = "0201010010000020010"; const indicatorCodeY = "0201010010000020030"; const apiurl = `https://dashboard.e-stat.go.jp/api/1.0/Json/getData?Lang=JP&IndicatorCode=${indicatorCodeX},${indicatorCodeY}&Time=2017CY00&RegionalRank=3&Cycle=3&IsSeasonalAdjustment=1&MetaGetFlg=Y&SectionHeaderFlg=2`; const jsonData = await (await fetch(apiurl)).json(); console.log(jsonData); // データ準備 const dataX = jsonData.GET_STATS.STATISTICAL_DATA.DATA_INF.DATA_OBJ.filter(item => item.VALUE["@indicator"] === indicatorCodeX); const dataY = jsonData.GET_STATS.STATISTICAL_DATA.DATA_INF.DATA_OBJ.filter(item => item.VALUE["@indicator"] === indicatorCodeY); const indicatorNameX = jsonData.GET_STATS.STATISTICAL_DATA.CLASS_INF.CLASS_OBJ[0].CLASS[0]["@name"]; const indicatorNameY = jsonData.GET_STATS.STATISTICAL_DATA.CLASS_INF.CLASS_OBJ[0].CLASS[1]["@name"]; const data = []; dataX.forEach(x => { const dataValue = dataY.find(item => item.VALUE["@regionCode"] === x.VALUE["@regionCode"]).VALUE["$"]; const regionName = jsonData.GET_STATS.STATISTICAL_DATA.CLASS_INF.CLASS_OBJ[2].CLASS.find(item => item["@code"] === x.VALUE["@regionCode"])["@name"]; data.push({ x: parseFloat(x.VALUE["$"]), y: parseFloat(dataValue), label: regionName }); }); console.log(data); // グラフ表示 new Chart(chart, { type: 'scatter', data: { datasets: [{ backgroundColor: "#55E", label: indicatorNameX + " vs. " + indicatorNameY, data }] }, options: { scales: { xAxes: [{ scaleLabel: { display: true, labelString: indicatorNameX }, type: 'linear', position: 'bottom' }], yAxes: [{ scaleLabel: { display: true, labelString: indicatorNameY }, type: 'linear', position: 'bottom' }], }, tooltips: { callbacks: { label: (item, _data) => { return `${data[item.index].label} ${item.yLabel}%, ${item.xLabel}%`; }, } } } }); }

楽しい統計プログラミングを!

links
- 2022年高校「情報I」プログラミング教材JavaScript版へコントリビュート

対応言語数が47まで増えた「Geo3x3」、最近使われている言語で見るとどのくらいカバーできているか、 GitHubの言語別統計「GitHut」でチェックしました。
PUSH数(GitHubへのコードのアップロード)で見ると、JavaScriptが次点のPythonの倍以上と圧倒的!


6位のShell(シェルスクリプト)が気になりました。そもそもプログラミング言語としてカウントするもの!?くらいの認識でしたが、変数、繰り返し、関数があって一応プログラミングもできる様子。

geo3x3_encode() { local lat=$1 local lng=$2 local level=$3 local res= if [ $level -gt 0 ]; then if [ `echo "$lng>0" | bc` -eq 1 ]; then res=E else res=W lng=`echo "scale=16; $lng+180" | bc` fi lat=`echo "scale=16; $lat+90" | bc` unit=180 local i for ((i=1; i<$level; i++)) do unit=`echo "scale=16; $unit/3" | bc` local x=`echo "scale=0; $lng/$unit" | bc` local y=`echo "scale=0; $lat/$unit" | bc` res=$res$(($x+$y*3+1)) lng=`echo "scale=16; $lng-$x*$unit" | bc` lat=`echo "scale=16; $lat-$y*$unit" | bc` done fi echo $res }

ということで、Geo3x3のエンコードを移植してみたのがこちら(src on GitHub)。 if文やfor文の書き方にクセがあり、変数代入前後にスペースをいれてはいけなかったり、計算するときは$(())で囲む必要があったり、浮動小数には対応していないので、外部コマンドbcに頼ったりとなかなか大変ですが、ちゃんと動くようになりました。

$ bash geo3x3.sh encode 35.65858 139.745433 14 E9139659937288

LinuxやMacであれば何もインストールすることなく使えて、他のコマンドとの組み合わせも簡単なのがシェルスクリプトのいいところ。

ランキングで見るとC++よりは下ですが、C#やCと同じくらい使われています。 確かに、各種プロダクトでもセットアップや、起動スクリプトなどで使われているので、確かにPUSH数が伸びることにも納得です。 WindowsやDOSでいうバッチファイル(BAT)、深くやるかどうかは別として、エンジニアには必須技術ですね!


本日、日興証券オープンイノベーションラボの新企画「高専インカレチャレンジ」の北陸5高専向けトライアルの説明会!


一緒にメンターする、長岡高専出身、フラーの渋谷さんと共に高専生への応援演説!


今回のプラットフォームとして使用する、フランス生まれのイノベーションプラットフォーム「agorize」、日本法人の中澤社長からもメッセージ。

links
- SMBC日興証券がAgorizeオープンイノベーションプラットフォームにて「高専インカレチャレンジ」を開催|Agorize Japan株式会社のプレスリリース

今日はオープンデータの日、世界中でオープンデータに関するイベントが開催されています。
You are invited — Open Data Day

コロナ禍の今年は富山、石川、福井、北陸三県合同でオンライン開催!情報提供タイムの後は、ブレイクアウトルームに分かれてオープンデータかるたを使ったアイデアソン!


オープンデータが書かれたカルタを並べて、データをちょい足し、アイデアをまとめて発表しました!


インターナショナルオープンデータデイ@北陸オンラインでの学び、オープンデータとSDGsを組み合わせたカードゲームがおもしろそう!


力強いメッセージ「誰だってオープンデータは作れる!」 by Code for Toyama City の寺田さん
早速、データづくりから始めます。


code4sabae/SDGs_ja: SDGS(持続可能な開発目標)、17の目標(ゴール)と169のターゲットのCSVデータ(English/Japanese)
GitHubで検索して発見した「datapopalliance/SDGs: Excel and CSV versions of the goals, targets, and indicators from the Sustainable Development Goals (SDGs).」をフォークして、日本語とタイトルと色と画像を足しました。

作成したCSVは、csvbeautyを通しているのでExcelからプログラムまで幅広く活用いただけます。webアプリやサーバーでのDenoで使う場合、下記のようなコードで簡単に使えます!

<script type="module"> import { CSV } from "https://code4sabae.github.io/js/CSV.js"; window.onload = async () => { const baseurl = "https://code4sabae.github.io/SDGs_ja/"; const goals = CSV.toJSON(await CSV.fetch(baseurl + "SDG-goals.csv")); console.log(goals); const targets = CSV.toJSON(await CSV.fetch(baseurl + "SDG-targets.csv")); console.log(targets); }; </script>

オープンデータかるたとSDGsを組み合わせる準備ができました!

データの準備だけではちょっとさみしいので、簡単なゲームを作ってみました。

SDGs GOALQUIZ
169のターゲットをランダムにシャッフルし、クイズゲーム風に表示されるターゲットから、対応するゴール(目標)を選び、正答率を競うゲームです。 日本語、英語、両対応。途中での切り替えもできます(アイコンを切り替えるにはリロードが必要)。なかなかに難しいです。

SDGsアイコンはオープンデータではありません。非営利で資金調達目的でなければ申請なしに使用できます。詳しくは、国連のサイトをご確認ください。
SDGsのポスター・ロゴ・アイコンおよびガイドライン | 国連広報センター

クイズゲームのメインプログラム、JavaScriptでなかなか分かりやすく書けたと思います。

window.onload = async () => { const baseurl = "https://code4sabae.github.io/SDGs_ja/"; const goals = CSV.toJSON(await CSV.fetch(baseurl + "SDG-goals.csv")); const targets = CSV.toJSON(await CSV.fetch(baseurl + "SDG-targets.csv")); const body = document.body; add(body, "h1", "SDGs " + lang("ゴールクイズ", "GOALQUIZ")); const result = add(body, "div"); result.className = "result"; const quiz = add(body, "div"); quiz.className = "quiz"; const logos = add(body, "div"); logos.className = "logos"; const sels = []; for (const goal of goals) { const img = new Image(); img.src = baseurl + goal[lang("logo_ja", "logo")]; logos.appendChild(img); sels.push(img); } const credit = add(body, "div"); credit.className = "credit"; add(credit, "span", "App: CC BY @taisukef", "https://fukuno.jig.jp/3146"); add(credit, "span", " "); add(credit, "span", "(src on GitHub)", "https://github.com/code4sabae/goalquiz"); add(credit, "br"); add(credit, "div", "Data: SDGs_ja on GitHub", "https://github.com/code4sabae/SDGs_ja"); add(credit, "span", "Japanese", "#ja"); add(credit, "span", " / "); add(credit, "span", "English", "#en"); add(body, "qr-code"); shuffle(targets); let point = 0; for (let i = 0; i < targets.length; i++) { quiz.innerHTML = "&nbsp;"; quiz.style.backgroundColor = "white"; quiz.style.color = "black"; const target = targets[i]; const goal = goals[target.goal - 1]; const desc = lang("description_ja", "description"); const title = lang("title_ja", "title"); const tid = startShowText(quiz, target[desc], lang(50, 25)); const ans = await waitClick(sels) + 1; clearInterval(tid); quiz.textContent = target[desc]; quiz.innerHTML += "<br>" + lang("あなたの回答", "Your Choice") + ":" + ans + " 「" + goals[ans - 1][title] + "」"; await sleep(300); quiz.style.backgroundColor = goal.color; quiz.style.color = "white"; if (ans == target.goal) { quiz.innerHTML += "<br>" + lang("正解!", "Correct!"); point++; } else { quiz.innerHTML += "<br>" + lang("まちがい! 正解は ", "Wrong.. Correct answer is ") + target.goal + " 「" + goal[title] + "」"; } result.textContent = lang( (i + 1) + "問中" + point + "問正解 正解率" + (point / (i + 1) * 100).toFixed(1) + "%", "Q cnt " + (i + 1) + ", Corrects " + point + ", Rate " + (point / (i + 1) * 100).toFixed(1) + "%" ); await sleep(1000); } alert(lang("おめでとうございます!全169ターゲットのクイズを終えました!", "Congratulations!! You've finished quiz of 169 targets.")) };

(src on GitHub)

3/6は、インターナショナルオープンデータの日!そのプレイベントとしても開催、オープンデータ勝手表彰!

最優秀賞は、シビックテックの火付け役、東京都コロナウイルス感染症対策サイト
Code for JapanのSlackへの参加呼びかけに応えるエンジニアがすごい勢いで伸び、3000人を突破!現在4,766人を数えます。 ここでの活動がきっかけで、COVID-19 Japan 新型コロナウイルス対策ダッシュボードは生まれました。


COVID-19 Japan 新型コロナウイルス対策ダッシュボード」も貢献賞!
まもなく運用開始から約1年、データが十分に揃っておらず、状況が日々変わる第一波の頃はかなりエキサイティグな日々を過ごしました。 オープンデータの力、多くの方に知っていただく機会になったことがうれしいです。表彰いただき、ありがとうございました。
オンライン開催 インターナショナル・オープンデータ・デイ 2021 in HOKURIKU」にて、舞台裏、紹介します!


我らが福井県、Code for Japanと共に受賞!
いち早く、推奨フォーマットに準拠したCSVオープンデータ化が評価されました。


石川県、静岡県、青森県、コンプリート賞!
オープンデータ都市状況はこちらのオープンデータとアプリでご覧いただけます
日本の市町村オープンデータ取組率ダッシュボード (カラム地図7x7 x 政府CIOポータルオープンデータ)
おや、青森県97%!?
青森県平川市のオープンデータが政府CIOポータルのデータに未反映のようでした。


ダッシュボード賞として「エレクトリカル・ジャパン - 発電所マップと夜景マップから考える日本の電力問題 | 東日本大震災アーカイブ - 国立情報学研究所」を選定させていただきました。 身近なで重要なインフラなのにまだまだデータ整備が足りていない発電所オープンデータを、民間運用でなんと10年、日本一のデータ量を誇ります! 手回し発電して無電源で無限にプログラミングできる、IchigoJam無電源セットを副賞としてご提供!

受賞いただいた、Nii 北本朝展さんが提供する多数のデータは、電力以外にも興味深いものがたくさんあります。 気になる地震のデータ、気象庁XMLを使った表示はじめのいっぽ、試してみました。

震源・震度に関する情報 - 気象庁XML
気象庁 | 気象庁防災情報XMLフォーマット形式電文(PULL型)」こちらの情報をブラウザでダイレクトに取得することはCORS設定されていないのでできないので、中継サービス「proxy for Deno」を作って、自前サーバーで運用して対応。


Geo3x3」zoom設定可能になったGeo3x3-map
取得した震源地の緯度経度をproj4をESモジュール化し、緯度経度を日本測地系を世界測地系に変換しつつ、Geo3x3でコード化して、地図表示へのリンクを追加しました。 ただ、この気象庁XMLでは、電力会社の停電情報同様、一定時間で消えていってしまうので、別途アーカイブ化する必要があります。データ活用の余地、大きいですね!

勝手表彰、受賞いただいたみなさま、ありがとうございました!

いろいろイベントが続きます!PRに欠かせないSNSシェア。画像が付いているかどうかでインパクトは大きく変わります。 ただ、画像つきにするにはogpやTwitter Cardの仕様に沿ったHTMLである必要があります。システムによっては非対応なものもあるでしょう。


そんな人のための便利ツール「ogpmaker」
表示したいURL,タイトル、画像へのURLを記入して「OGPリンク作成」ボタンを押すと、画像付きシェアできるURLを生成してくれます! Twitter Card validatorや、Facebook シェアデバッガーでご確認ください(変更した時の更新もこちらから)。

参考までに、下記のようなHTMLをJavaScriptで自動生成しています。(src on GitHub)

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <title>${title}</title> <meta property="og:title" content="${title}"> <meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:image" content="${img}"> <meta property="og:image" content="${img}"> </head> <body> <script type=module> document.location.href = "${url}"; </script> </body> </html>

ブラウザやサーバーで動くアプリを作るのに便利なプログラミング言語JavaScriptは、IchigoJam BASICなどで基本的なプログラミングを学んだ方にイチオシ言語! Hana道場に通う、IchigoJamでプログラミングに慣れた中学1年生、バリバリ活用してますよ!


地域ICTクラブ オンラインシンポジウム2021 | Peatix
総務省の「地域ICTクラブ」の活動報告へのコメンテーターとして参加しました。 地域のIT力を高めるためにはじめること。もっともっとシンプルにデータをまとめる必要を感じました。

百聞くより一行動。まずはやってみるのがオススメです!

IchigoJam web」を開くか、手元の「IchigoJam」と合わせてご覧ください!

jigインターンは我々jig.jpの人間にとっても良い刺激になります。シンプル好きな私にいいかもと紹介してもらった「Alpine.js」での不満、ESモジュールが使えない点を勝手に改善した「Alpine_es」をつくりました。

Alpine GAME」(src on GitHub)
Alpine.jsでライフゲームを作ってみた - Qiita」のESモジュール対応版!
VueやReactでおなじみ変数の変化をそのまま画面に反映する拡張タグのみをシンプルに切り出したコンパクトなライブラリがいい感じですが、scriptタグにtype=moduleを付けると動かないのが残念! そんなときはオープンソース、元から改造しちゃいましょう!

1. import文の表記をESモジュールに合わせた
2. 唯一の依存モジュール Observable Membrane by salesforce を組み込み
3. Alpine.start を外出しして、変数定義のタイミングに合わせた

あとは、名前空間の関係で、html側の変数を data() から window.data() に変更して、Alpine_es/es/index.js あらAlpineをimportすればOK!

いろんなアプリ開発に使ってみる準備ができました。


IchigoJamの現状と将来へ向けて
高専フォーラムに参加、国産PC、AMATERASプロジェクトの一貫として、IchigoJamではじめるガチエンジニアの育て方を紹介。


夜は神山まるごと高専のイベント、少人数で別れてディスカッションする、二部のファシリテーターを担当。楽しく未来の学校、話し合うことができました。
次回もお楽しみに!

起業家甲子園と合わせて開催、社会人向けのコンテスト起業家万博に、信越地区代表としてチャレンジした長野高専出身の株式会社エボシステムのサイキックこと、佐伯さん!

ベジスター 〜日誌で繋がる生産者と消費〜
IT集団でありながら、農家を営むエボシステムによる新サービス。農業DXのはじめのいっぽ、農家の方には便利なデジタル日誌を提供しつつ、そのまま消費者へのメッセージを楽しい育成シミュレーションゲームと共に届けるサービス。


かわいいキャラクターとリアルな日誌との連携がおもしろい!


作成した野菜のパッケージにQRコードを付けて、認知を広めます。
iPhone版、ダウンロードできますよっ。
農家とつながる育成シミュレーション 『ベジスター』 公式サイト


SNSでの悪いバズリ”炎上”を未然に防いでくれる、jigインターン2021冬Eチーム作品「炎上チェッカー」は、情報公開な不慣れな農家の方にも提供できると安心かも? 誤字脱字のチェックや、おかしな文章を指摘してくれる機能などあると、更にうれしいかも!


他プロダクトへのコラボや、改善につなげるべく、動かしかたドキュメントを用意しました!自分で作ったものも後でみるとわからなくなるもの。作っていいきながらメモしていくのがおすすめです。


Google社のAPI「Cloud Natural Language」を使って、まずは炎上指数を取得し、計算するAPIをコンソールにて動作を確認。 うまくいかなかったらAPIキーを確認しましょう。


APIとしての動作をブラウザで確認!GETパラーメータ(?以降にJSON指定)でのチェックが便利です。


炎上指数が表示され、ツイートできます。


こうして、ツイートして広がってくれるとうれしいですね!

API活用による新サービス、どんどん実現していきましょう!

昨年に続きオンライン開催となった10回目の総務省/NICT主催の起業家甲子園。 全国の地域予選からICTメンターにより選出された学生チームによる決勝プレゼン!

エムキャスで配信、オンライン開催。


「Wall Art Online」
有明高専チームのプレゼン、地元の工務店とコラボし、壁面ディスプレイを互いに接続し、バーチャル二世帯住宅を提案するプラン。 スマホや、パソコン、大型テレビで十分!?いやいや、きっとその場に等身大に現れる遠隔地の様子は別次元の自然さなはず。 光量の問題は置いておいて、まずは大型プロジェクターで実験してみましょう!


「オーラルボイス」
高専プロコンからの選出、福井高専チームは口の動きと機械学習で英語の発音を判定し、オンライン対戦ゲームで楽しく学ぶプラン。 英語の先生の口の動かし方大事!というアドバイスから生まれた作品。


福井高専チーム、有明高専チームのICTメンターとして応援メッセージ。


「ICT・IoTフュージョンによる農業支援サービス」
旭川高専チームは、テクノロジーで日本の農業を再生させる!


高専WiConでも活躍とのこと。

「エレクロ」
会津大学生による、名前がおもしろい、デザインが変えられる新ファッションというビジネス。 ゲーミングネクタイもエレクロファッションの仲間かも? テクノロジーとファッション、どんどん融合進めたいですね。


Alumnote
同窓会プラットフォーム、Alumnoteプランが最優秀賞!創業済みで、サービス運用も始まっていることが評価されました。


Alumnoteのメンター、UFJリサーチ&コンサルティングの杉原さん、最優秀メンター賞獲得!


審査委員長、セプテーニ・ホールディングスの佐藤さん!


実際の投資家からの質疑応答と審査、良い刺激になりますね。jig.jpもスポンサーです!

良いプランには、良い名前と、良いデザインが伝えるために大事。
プロトタイピング時の味方、お手軽デザインツール「Bootstrap」適応の例です。

すくーるめもりー - Bootstrap一部適応プルリク
Alumnoteにも通じる、同じクラス内での写真共有サービス、jigインターン2021冬Bチーム作品、「すくーるめもりー」への改善提案(プルリク) 左がビフォー、右がアフター。コードの違いは極わずか、参考にどうぞ!


有明高専チームから送ってもらった写真!
ものづくり学生、応援します!

jigインターン2021冬、Cチームの作品「登下校タイムアタック!!」は、退屈な毎日の登下校をゲームに変えて、ヒーローになろうというサービス。

いいフォント!


ターゲットは学生!遅刻常習犯にこそ使ってほしい!?


設定画面、勝手にGeo3x3対応してみたバージョン。住所入力面倒ですよね?Geo3x3なら1コードで楽々。サービス側もジオコーディングいらずで楽々。 (住所を入力した場合、APIでジオコーディング対応)


登校手段を設定して、いざスタート!


プレイ画面、スタート、ゴール、現在位置がマーカー表示されます。区間タイムが出るとうれしいというコメントもありました。


本日のスコア!が表示されおつかれさまでした!スコアがサーバーに保存されるまでが実装されています。(ゴール判定、ランキング、ユーザー管理は未実装)


Geo3x3
40言語に対応した、Geo3x3、コード体系を変更しました(全言語更新済み!)。
いままで左上から123と並んでいたものを、左下から123、中段が456中段、上段が789とキーボードのテンキーの並びに合わせる形に変更した、v1.05をリリース。

いままでの地図アプリへのリンク(#E379)は、新地図アプリ(#913)へリダイレクトするように変更しました。 今までのコードを使っている方は、v1.05系への移行がおすすめです。

今後実アプリにどんどん活用していきたいと思います!

jigインターン2021冬、Dチームの作品「BazUp!!」は、誰でもバズリ体験できるサービス。 画像、タイトル、文章を入れると勝手にバズったように見せてくれ、通知止まらない状態を体験できます!


forked BizUp!! on GitHub
登録後の自動遷移とローカル通知を加えてプルリク、APIサーバーなしに起動するバージョンを試作しました。 ogpを取得してどんなどんなページでも仮想バズして、そのページ自体をシェアできるとおもしろいかも?


使用技術は、Nuxt.jsServer.js。 開発期間は2日間、アイデアから、実装、発表まで、ここまで仕上げて来ているのはすごい!

楽しいチーム開発、学びも多く、オススメです!

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