データ活用に欠かせないのはつなぐこと。複数のデータを比較し、組み合わせて、新たな知見を生まれます。

その足かせとなるのはデータ形式の不一致。数と一言で言っても半角全角、カンマ区切りの有無、小数を含むかどうか、万など漢数字表記の有無など、個性豊かな様々なデータ達・・・。

もちろんコンピューターなので、様々な表記方法を想定して対応することは可能ですが、網羅性を保証できず、膨大なデータ量に対する処理では何十倍ものコストとして跳ね返ります。 同じ手間ならデータを作る際にかけるのが効率的です。

どうデータ形式の定義するか?ベストはリソース記述フレームワーク(RDF)の語彙を使うことでしょう。 Googleの検索エンジン他で使用されるスキーマオルグ(schema.org)や、Facebookが提唱し一般化したオープングラフプロトコル(OGP)、日本政府が提唱する共通語彙基盤もその一種です。

語彙でつながるオープンデータを、LOD(エルオーディー/Linked Open Data)、5つ星オープンデータと呼びます。

5つ星オープンデータ/LOD 3基準

1. リソースとデータ項目(語彙)をURLで表現する
IDではなくURL。アクセス可能なURLを使用する。
自分のリソースのURLは、自分で編集可能なドメインを用いる。

2. 共通の語彙の利用
語彙は正しく、できるだけ既存の語彙を使う。(schma.org/url)

3. 外部リンク
できるだけ外部リソースへのリンクを含める。(SNSやWikidataへのリンク)

ただ、まだまだRDFへの理解が浸透していないため、まだちゃんとしたデータは多くはありません。よりシンプルに作りやすくするためのツール整備を進めました。


NQuads.js
語彙を含んだLODのJSON表現、JSON-LDを扱うライブラリjsonld-esを、Node.js用のライブラリjsonld.jsから移植。 依存ライブラリを次々と全部ESモジュール化して、GitHub Pagesとして公開。 require表記をgithub.ioを使ったURL importに書き換えたので、全ソース、ブラウザでも使用可能になりました。ESモジュールはDenoモジュールとしても使えるので、Denoでサクサク活用可能です!

NQuads.jsは、LODのテキスト表現「N-Quads」をJSONLD.jsを使って作成。 import { JSONLD } from "https://taisukef.github.io/jsonld-es/JSONLD.js"; class NQuads { static async parse(s) { return JSONLD.fromRDF(s, { format: "application/n-quads" }); } static async stringify(json) { return JSONLD.toRDF(json, { format: "application/n-quads" }); } } export { NQuads }; コアはこれだけ。JSONLDをimportして使うだけのライブラリなのでとってもシンプル!
ちゃんとしたオープンデータを増やしましょう!


データ活用はじめのいっぽ、コンピューターとプログラミングへの入り口、IchigoJamのファームウェアの不具合修正
- ichigojam-1.4b29.zip
OUT11,0が効かない不具合修正(OUT11、IN4を出力に切り替えて使う場合の番号です)


福井県独自の緊急事態宣言最終日、ランチは通常営業だった鯖江駅前商店会」でタコライス!

GitHubかんたん編集ツールで使ったOpenID認証に対応するサーバーコードを整理しました。 Denoを使って簡単にログイン付きサービスが作れます。jigインターンでおなじみお気軽サーバーフレームワーク Server.js の拡張です。

GitHubログイン実験」(テンポラリなサービスなのでそのうち落とすか別の用途に使います)
GitHubアカウントを持っている人向けです。src on GitHub

0. ドメインとDenoを起動できるサーバーを準備しましょう

1. GitHubのDeveloper applicationsから、"New OAuth App"
2. コールバックURLに "ドメイン + /openid_callback" を登録します
3. client_id を server.jsのclient_idと、static/index.htmlのログインURLのものを上書き
4. client_secret を生成して、client_secret.txt ファイルを作って保存
5. ドメインを設定したDenoがインストールされたサーバーで run.sh を起動
6. そのドメインにブラウザでアクセス


こんな画面が出るはずです。
7. GitHubでログイン


8. 設定したアプリへのログイン許可


9. accessTokenがlocalStorageに設定され、それを使ってログインユーザー情報をテスト表示!できました!


GitHubの Authorized OAuth Apps からアプリを選んで、revoke access すると・・・


accessTokenが無効になり、表示できなくなりました。

GitHub連携サービス、いろいろ作りましょう!

町内会でのGitHub、地域の危険箇所データを記録するCSVファイルの編集を改善!

CSV editor for GitHub
GitHubでログインを押すと、国高地区2021年版の地域安全データ「kidssafe2021.csv」が表示されます。 編集権限があれば、編集して「Commit changes」を押すと、元リポジトリに反映されます。

今の状態だと同時に編集した場合競合してしまうので、1レコードずつ追加や編集できるモードがあると更に使い勝手上がりそう。

GitHubのAPI、OpenIDでaccessTokenをゲットしたら、GitHub.jsを使って、ユーザー情報やリポジトリを取得したり、ファイルをプル&プッシュできます。 ファイルは、バイナリデータをBase64.jsでエンコード、デコードしてサーバーとやり取りします。

ユーザー登録やログイン機能の実装が不要なのは楽ですね。 OpenID認証機能付きのサーバーコードも使い方ドキュメント含めて整理して公開します。

Code for FUKUIの初勉強会「GitHubはじめのいっぽ」


今回の会場は、越前市、中学生、高先生から社会人まで幅広く、11名で学びました。


GitHubはじめのいっぽ
スライドもオープンデータとして公開!題材として地域安全マップを使いましたが、ちょっとややこしかったので、もっとシンプルなものに更新。


マップアプリの元 - かんたんマップアプリ」(src on GitHub)
HTML1ファイルのみ、CSV形式でデータを加えると、マップとして反映するアプリです。 <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <script type="module" src="https://code4fukui.github.io/csv-map/csv-map.js"></script> <title>テストマップ</title> </head><body> <h1>テストマップ</h1> <csv-map> 名前,URL,geo3x3,photo ヨコガワ分店,https://volga-rice.jimdofree.com/,,volga-yokogawa.jpg サンドーム福井,http://www.sankan.jp/sundome/,E9138732236 福井高専,https://www.fukui-nct.ac.jp/,E9138732251953 </csv-map> </body> </html> こういうものはどうつくるといい? など、Issueもお気軽にどうぞ!

スピードが求められ、そのスピードがテクノロジーで実現できる現代。
従前の有識者会議やパブリックコメントを、オープン・フラット・気軽で分かりやすくDX!

経産省、特許庁のベンチャー企業(スタートアップ)と大企業(事業会社)との契約を、モデルケースと共に紹介する「モデル契約書ver1.0」の改訂案受付にGitHubが使われています。
「研究開発型スタートアップと事業会社のオープンイノベーション促進のためのモデル契約書ver1.0」の改訂に向けて、Github(ギットハブ)を用いた意見募集をトライアル実施します (METI/経済産業省)


早速、Twitterでバズってます!

GitHubなのにPDF!? 変更提案は自分のIDを書いたファイル名に!?
改善の余地は、活躍の余地。みんなでキレイにしちゃいましょう!

Code for Japanの関さんや、高専生を含む有志さんが早速PDFのMarkdown化を完了させ、なんとマージ(経産省による変更受け入れ)されてました!(Issues)
PDFでは、変更履歴が追えませんが、テキストファイルなら文字単位で誰がどう変更したかが一目瞭然です。

ということで、せっかくならもう一歩進めて、GitHubらしくPDFではなくMarkdownへのプルリク(変更提案)を受け付けますよと書き換えちゃいませんか?というプルリクを送ってみました。

もしこの変更案が通れば、このように変更提案がスッキリシンプルに変わります。プルリクエスト(変更提案)の説明はGitHub公式サイトでどうぞ。

マークダウン(Markdown)とは、ちょっとした決まり付きのテキストファイル形式です。 HTMLと違って壊れないので、気軽に誰でも編集することができます。

活動を本格化させることにした Code for Fukui の新ウェブサイトはこのマークダウンでできています。秘密はmark-downタグ。 実はHTMLのタグは自由に拡張できるのです。先頭にあるscriptでmark-downタグの使用を宣言すれば、あとはテキストファイルを書くだけ簡単です!

Code for Fukui


マークダウンで編集できるウェブサイト index.html
これなら誰でも簡単に編集できそうですね!

mark-downタグは、マークダウンのHTML変換 marked を元に HTMLElementで実装しました(src on GitHub
srcパラメータを使って、マークダウンファイルをページに組み込むこともできますよ!(例、mark-down-tag.test3.htmlモデル契約書ver1.0 秘密保持契約書をインポートして表示

良いデジタルツールを積極利用したDX、ガンガンいきましょう!

腕だめししたい学生は、Civictech Challenge Cupにチャレンジしよう!
腕を磨きたい実力付けたい高専生、jigインターンも募集中です。

links
- 国税庁法人番号を使った経産省発、法人種別名の抽出コンポーネントのESモジュール版公開
- KEN_ALL!? 郵便番号ESモジュールで開発効率化! 経産省もGitHub公開スタート
- GitHubで公開! 内閣官房 Trusted Web 推進協議会議事録、安心できるインターネットに向けてGoogleログイン実験
- 33ステップで解説、GitHubオープンソース貢献入門、IchigoJamプリントをつくってみよう!「もじのしょうたい CHR$/ASC」とはじめてのプルリク

GitHubを使ったオープンソースプロジェクトへの貢献方法を紹介しましたが、今回はもっとライトな、1つのリポジトリをチームで使った開発入門。

1. GitHubのリポジトリ、権限「Write」のメンバーに設定しましょう
2. 大原則「masterリポジトリ」は直接触らない!
3. 変更するタスクに取り掛かる時、GitHub Desktop、New Branchで、branchを作ります

英数ハイフンのみを使った短い単語で名前をつけます。
branchは、名前付きでそのリポジトリをまるっとコピーしてくれます。
壊してしまっても簡単に元に戻せるので安心!(日付付きファイルコピーは不要です)
4. 作って、テスト!
5. できたら、何をやったかコメントと共にコミットし、プルリクを作成


6. 他のメンバーにレビューしてもらいます

GitHub Desktop、プルリクを選べばまるっとその環境にしてくれます
7. OK!なら、masterへマージ!

おかしなところがあれば、コメントしたり、直してコミットしたりしましょう。 もし、masterのbranchと競合しているかどうかもここで分かります。
8. できました!

いつ誰がどう変更したか、一目瞭然で便利です!
(いらなくなった branch は remove しちゃってもOK!)

今回、このGitHub実験と合わせて作った、自宅のIoT温度計を一覧できるダッシュボード

IchigoOndo list
月額66円のIoT、IchigoSoda + SHT31温湿度計のデータを、sakura.ioのDataStore APIで取得し、表示するHTML/CSS/JavaScriptのプログラム。 メインはこんな感じです(src on GitHub)

window.onload = async () => { const tokens = await (await fetch("ichigoondo-settings.json")).json(); const cr = (tag) => document.createElement(tag); list.style.display = "grid"; list.style.gridTemplateColumns = "1fr 1fr 1fr 1fr 1fr"; for (const c of ["", "温度", "湿度", "WBGT", "水分量"]) { const div = cr("div"); div.textContent = c; list.appendChild(div); } for (const c of tokens) { const a = cr("a"); a.textContent = c.name; a.href = c.link; list.appendChild(a); const data = await fetchDataLatest(c, 1); console.log(c, data); for (const name of [["t", "℃"], ["h", "%"], ["wbgt", "℃"], ["water", "g/m<sup>3</sup>"]]) { const div = cr("div"); div.innerHTML = `${data[name[0]].toFixed(2)}<small>${name[1]}</small>`; list.appendChild(div); } } const reloadevery = 5 * 60 * 1000; // 5min setTimeout(() => location.reload(), reloadevery); };

各温度計の詳細ページへ、ジャンプするように、tokenなどを設定して自宅で運用開始!

この日、家のIoT温度計、36.7℃にまで上昇!


オンライン開催jigインターン、困った時は画面共有して、みんなで問題解決!
みんな、どんどんレベル上がっていきますね!


jigインターン12名と、パロット化したメンター2名

今日のブログ担当は、けさらん!
jig.jpオンラインインターン2020 5日目! - jigintern2020’s diary

GitHub、個人プロジェクト、少人数チームプロジェクトから世界規模のオープンソースプロジェクトまで、多彩! まずは友達同士、あれこれ楽しく触って作って壊してみるのがおすすめです!(プロジェクト「囲みマス」もぜひどうぞ!)

世界中で使われているオープンな共同制作プラットフォーム「GitHub」、アカウントを作って、自分のお気に入りのプロジェクト、応援したいプロジェクトに参加してみましょう! (東京都経産省Denoなど、有名オープンソースも多数!)

誤字やバグを直したり、自分の作った新機能をそのプロジェクトへ反映を依頼することを「プルリク(=Pull Request)」と呼び、反映(マージ)された人は、コントリビューター(貢献者)として、そのプロジェクトに名前が載ります。

簡単で気軽なところから練習できるように、IchigoJamで進めているオープンソースなプログラミング教材プロジェクト「IchigoJamプリント」への貢献手順を解説してみました。貢献はじめのいっぽにぜひどうぞ!

1. まずはGitHubにユーザー登録。13才以上、メールアドレスがあればOKです。

2. GitHub上のプロジェクト「IchigoJamプリント」を開きます(Git上のプロジェクトをリポジトリと呼びます)

3. 右上の「Fork」をクリック。(枝分かれする食器、フォークが語源。この時点のリポジトリの全ファイルを自分のリポジトリとしてコピーします)

4. ja フォルダをクリック

5. 新しくプリントを作るベースとして DRAW.html を使いましょう

6. 鉛筆マークをクリックして編集画面に

7. 中身を全選択(Ctrl+A または command+A)して、コピー(Ctrl+C または command+C)

8. ja フォルダに戻ります

9. Add file、Create new file で、新しくファイルをつくります

10. 名前はとりあえず「TEST.html」としましょう(IchigoJamプリントで大文字ファイル名+.htmlとしています

11. 変えたことが分かるように、タイトルを変えてみましょう

12. Commit new file で保存します

13. リンクを辿って見えるように、リストも更新しましょう。スクロールして下の方、index.html をクリック。

14. 鉛筆マークで編集

15. テストとして、プログラミングコースの前に下記1行を追加します
「- <a href=TEST.html>テスト TEST</a><br>」

16. Commit changings で保存

17. GitHub Pagesとしてブラウザで見られるように公開設定します。「Settings」をクリック

18. スクロールして、GitHub Pages の Source を None をクリック、master にする

19. Saveボタンをおすと、自動的にページが再読み込みされます

20. もういちどスクロールして GitHub Pages のところをみると、自分のアカウント名+github.io/print/ として公開されたことがわかります。新規ウィンドウで開きましょう(実際に公開されたり、変更が反映されるまでるまでに1分前後タイムラグがあるので、404が出ても焦らずしばらくまってリロードしましょう)

21. 日本語をクリック

22. index.html に追加したテストが見えました!

23. 中身もばっちり作成したテストになってます!このウィンドウは確認用に開いたままにします

24. GitHub Pages を開いた元のウィンドウに切り替え、print フォルダにもどります

25. 再び TEST.html を開き、オリジナルなIchigoJamプリントを作ってみましょう
Commit changesして、ちょっと待って、別のウィンドウをリロードして確認を、納得いくまで繰り返し
新プリント「もじのしょうたい CHR$/ASC (src on GitHub)」も参考にどうぞ!

26. IchigoJamプリントは、A5サイズ1枚に印刷できるように統一しています。ブラウザのメニュー、印刷で1枚に収まっているかチェックしましょう。

27. いい感じになったらファイル名を 大文字アルファベット+.html として変更し、ページタイトルも合わせて編集しましょう

28. 再度 index.html を編集し、変更したファイル名とタイトル名に変更し、リスト内に追記します。(コースの新設提案もOKです!)

29. いよいよプルリクです。Pull request をクリック

30. New pull request をクリック

31. 自分が編集したファイルが並んでいることを確認し、Create pull requset をクリック

32. つくったプリントのタイトルと、よかったらその思いを記述して、Create pull request

33. IchigoJamプリントのリポジトリへプリリクできました!このアドレスでプルリクがマージされるかどうかや、質問や修正依頼などがやりとりされるのでチェックしましょう。

何か分からないことがあれば、Issuesの方にご質問ください!

links
- じぶんのウェブサイトをつくろう! 13才以上なら誰でも無料で持てるホームページ&HTMLとCSSはじめのいっぽ

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