13才からのGitHubはじめのいっぽ、GitHub Pagesは便利ですが、反映までに時間がかかるのが玉に瑕。自分のパソコンでの開発環境を作ろうとすると遭遇するトラブルになりがち、そんなプログラミング初心者向けに良いサービスがありました、rep.it


Repl.it - covid19forecast」→ https://covid19forecast.taisukef.repl.co/
東京都のコロナ患者数予測グラフを表示するプログラム、サクッと公開できました!
コードを修正して即反映してくれるのがサクサク使えて便利です。 プロジェクト名とユーザー名でサブドメインがつくので、いろいろ作って公開するのが楽。


ソフトウェア1 (2020)
ステキなサービス「rep.it」は、東京大学のC言語のカリキュラムで使われています。対象は、東京大学工学部電子情報工学科・電気電子工学科の進学内定者とのことですが、プログラミング言語に興味がある小中学生、高校生、高専生にもおすすめです。IchigoJam BASICでプログラミングの基本と、データの単位、メモリの概念が分かっているとスムーズに理解できるでしょう。

話題のgoto、C言語の多重ループからの脱出手段としては有効なので、用法用量を守って使うといいです(JavaScriptなどではラベル付きループとbreakが使えます)。scanf、セキュリティホールの関係を調べると楽しいです。

昭和な一斉授業スタイルから、令和の個別最適化されたGIGAスクールスタイルへ。オープンな教材をいろんな教育機関、学生、民間組織がどんどん作ってシェアするほどに加速しますね!こどもも大人も、大いに可能性が広がります。(0からのプログラミングはじめ、IchigoJamからどうぞ!動画スライド


C言語で開発してみました、clangでコンパイルしてその場ですぐ動かせます。右側は仮想サーバーで動いていて、linuxのコンソールを体験できます。コマンドによるコンパイル他、lsでファイル一覧をみる、rmで削除、mvで名前変更など、気兼ねなく壊せるのでいいですね!


Denoもバージョン1.0.0と古いですが使えます。HTMLをfetchして表示するプログラムが動きました!


ブラウザ上での3Dグラフィックもこの通り!

いろいろつまみ食いして、気に入ったものがあったらローカル環境での構築、自分だけのサーバーを借りてのサービス公開などへステップアップするのがいいですね!

links
- Repl.it

誰かに見られていないか心配になりますか?E2EEであれば安心です。
「Zoom」でようやくエンドツーエンド暗号化が利用可能に ~来週より技術プレビュー
通信路を暗号化する、End-to-end encryption(E2EE)が賛否両論です。
日本を含む7カ国、エンドツーエンド暗号化コンテンツへの公的接続を可能にするよう要請する国際声明 - ITmedia NEWS
英、米、カナダ、オーストラリア、ニュージーランド、インド、日本によるE2EEにバックドアを用意せよと声明。バックドアがあるものは、そもそもE2EEと言えないのでは?

しかし、暗号化技術は性的搾取を受けた児童のように社会の脆弱性の高い人々を含む公共の安全に対し、重大な挑戦にもなると指摘。
エンドツーエンド暗号化及び公共の安全に関するインターナショナル・ステートメント|外務省より)


E2EEメッセージングヘルパー」(src on GitHub)
国をも動かす技術、E2EE。実際試してみるツールを、ECDH鍵共有実験を一歩進めて作りました。 かわいいデザインと、鍵管理の機能を追加するといい感じになるはず。

- ユースケース
公開鍵をプロフィールや自分のウェブサイトにおきます
相手の公開鍵をゲットしたら、秘密鍵を生成して、メッセージを暗号化
誰かに見られている通信路を使って送信
受け取ったメッセージを復号化すると読めます

家の無線LANのパスワードなど、メッセージで送ろうとした時の気持ち悪さ。これで解消!

links
- 見られても大丈夫な暗号鍵!? webアプリでECDH(楕円曲線ディフィー・ヘルマン)鍵共有実験
- GitHubで公開! 内閣官房 Trusted Web 推進協議会議事録、安心できるインターネットに向けてGoogleログイン実験

デジタルの信用と信頼を支える技術、小学生でもわかる暗号の基礎、ネックは誰にも知られてはいけない鍵の共有方法です。
プログラミングで学ぶ、安全安心なまちに必須の暗号化技術「さいきょうのあんごうワンタイムパッド」
ワンタイムパッド暗号の鍵の受け渡しに、いつ誰が見ているかわからないインターネットは使えません。直接会って手渡しするか、厳重に封をして書留で送るなど、別の経路が必要になって手間がかかります。

信用できない通信路だけで、信用できる通信をする方法はないものか?実はあるんです。その最新の技術がECDH(楕円曲線ディフィー・ヘルマン鍵共有)です。 楕円曲線上の離散対数問題が、現代の知識とコンピューターでは現実的な時間で解けないという、数学を利用した鍵共有方法です。

Web標準の Web Crypto API を使って、実際試してみました。

ECDH鍵共有実験 - Web Crypto API」(src on GitHub)
上記を2つブラウザで開きます。離れたところにいる誰か友達に開いてもらってもOKです。まず、お互い公開鍵を生成し、相手に公開鍵を送信し合い、受け取った、公開鍵をセットします。 自分で生成した鍵と受け取った公開鍵から、実際に暗号化、復号化に使う共通鍵が生成できます。

この共通鍵、ネットワークでやりとりせずに、2つ(2人)で全く同じであるところがおもしろいところです! 通信路の二人の公開鍵から共通鍵を計算することが事実上不可能であることが信用の担保となっています。(もし計算できたら世界的な大発見になるので、それはそれでぜひチャレンジしてください)

共通鍵が共有できたので、あとはこれを使って暗号化するだけです。今回は AES-GCM というアルゴリズムを使って、暗号化していますが、ワンタイムパッドとして使うのもありですね。

この技術のおかげで、インターネットで安心してショッピングしたり、メッセージを送り合ったりできているわけです。 本人確認、本人認証と組み合わせて、確定申告など、電子申請にも使用されています。

でも、安心は禁物。楕円曲線上の離散対数問題をシンプルに解く新アイデアや技術が登場しない保証はありません。 コンピューターは速くなりつづけ、増え続けるので、力づくで解読できてしまう日もきっと来ます。

新技術、楽しくウォッチしていきましょう!


みんなでつくるDX、DXGOV#3は、10/22木15:30-17:30 オンライン開催!

日本のミスターインターネット、村井純さんが座長を務める「Trusted Web推進協議会」の資料がGitHubで公開されました! 経産省に続き、スマートでエンジニアにも優しい進め方がうれしいですね。

Trusted Web 推進協議会の公開ドキュメント」 forked by Code for Sabae
Markdownや、RDFなど人にも機械判読しやすくなるよう資料を書き直すプロジェクト、はじめました。


こちら元資料のPDFと、Markdown化した議事次第見比べてみてください。

# [Trusted Web 推進協議会](https://www.kantei.go.jp/jp/singi/digitalmarket/trusted_web/index.html) (第1回) ## 日時 令和2年10月15日 10:00-12:00 ## 場所 通信システムを用いた遠隔開催 ## 議事次第 1. 開会 ...

Markdownとは、こんな感じでテキストファイルで書いていけるオープンで人にも機械にも優しいフォーマットです。

本題の Trusted Web ですが、Trust とは?
FacebookやTwitterなど大規模SNSに依存しない、安心して使えるIDによる本人確認ができる機能が付加された web をそう呼んでいるようです。

マイナンバーが OpenID に対応すればいいのでは?
ひとまず実験として、OpenID準拠と思われる、Googleログインを使ってみました。意外と簡単!

test - Google login
Integrating Google Sign-In into your web app」こちらに解説あるように、「Google APIの認証情報」から認証情報を作成、OAuth 2.0 クライアントIDを作成し、下記webアプリを作って、設置するドメインを設定すれば実験できます。

<!DOCTYPE html><html><head><meta charset="utf-8"><title>test - Google login</title> <script src="https://apis.google.com/js/platform.js" async defer></script> <meta name="google-signin-client_id" content="1092456124559-vva51h0b575cquvo9p1nc4ue8i7a7gu4.apps.googleusercontent.com"> </head><body> <div class="g-signin2" data-onsuccess="onSignIn"></div> <a href="#" onclick="signOut();">Sign out</a> <hr> <style> .output { border: 1px solid gray; padding: 1em; margin: 1em; white-space: pre-wrap; word-break: break-all; } </style> profile <div id="divprofile" class=output></div> token <div id="divtoken" class=output></div> <button id=btnchk>check with token</button> https://oauth2.googleapis.com/tokeninfo?id_token= <div id="divres" class=output></div> <script> function onSignIn(googleUser) { const profile = googleUser.getBasicProfile(); console.log("profile", profile); divprofile.textContent = JSON.stringify(profile, null, 2); const token = googleUser.getAuthResponse().id_token; console.log("token", token); divtoken.textContent = token; } async function signOut() { const auth2 = gapi.auth2.getAuthInstance(); await auth2.signOut(); console.log("User signed out."); } btnchk.onclick = async () => { const token = divtoken.textContent; const url = "https://oauth2.googleapis.com/tokeninfo?id_token=" + token; const res = await (await fetch(url)).json(); divres.textContent = JSON.stringify(res, null, 2); }; </script> </body></html>

サインイン、基本情報表示、tokenから取得、サインアウトまでの基本実装ができました。(*script を type=module にすると、外部からの呼び出しができず失敗します)

メールアドレスはIDとしては使わないようにとのことなので、profileのOTや、検証した際のsubで21桁の数と本人確認を組み合わせれば電子申請に使用可能ではないでしょうか?

このIDをマイナンバーカードで電子署名して市役所に申請すれば、本人確認済みアカウントのできあがり!

今年はOPENDATAで博覧会!さばえものづくり博覧会のwebサイト、GitHubのオープンソースで作ってます。

code4sabae/sabae-monohaku.jp on GitHub
デザイナーさん作成の素材と、オープンデータを元にサイトづくり。キレイなサイトは作っていても気持ちがよいですね!

フォントを美しく
オープンなライセンスで使える、webフォント。いい感じのものをいくつかピックアップ。
- Open Sans Condensed
- Barlow Semi Condensed
- BenchNine
- Khand
- M PLUS Rounded 1c(日本語)

使いたいフォントは、「+ Select this style」リンクから、<link> をHTMLに、font-familyをCSSにそれぞれ設定すると使えます。

<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet">

body { font-family: 'Open Sans Condensed', sans-serif; }

CSSに@importで書いても読み込んでくれないので注意!

スムーズなページ内リンク
ページ内のリンクは、a name と a href=# で設定します。標準ではパッと移動するページ内リンク、下記CSSを追記するだけで、スムーズにスクロールしてくれるようになります。

html { scroll-behavior: smooth; }

・・・と思いましたが、scroll-behavior(MDN)によると、iPhoneなどSafariが未対応。 JavaScriptかCSSかで補ってやる必要がありそうです。

ふわふわさせる
ロゴ右側でふわふわ動く「ご挨拶」リンク。CSSアニメーションを設定すると簡単です。下記のように fuwafuwaクラスをCSSに記述して・・・

.fuwafuwa { animation-name: fuwafuwa; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-duration: 1.5s; } @keyframes fuwafuwa { 0% { transform: translate(0, 0vw); } 100% { transform: translate(0, 2vw) } }

タグの class に fuwafuwa を設定すれば、OK!

<img id="btn_greeting" class="fuwafuwa" src="img/topaisatsu.svg">

再利用可能なコンポーネント
どのページも共通に使いたい部分、例えばページフッターは独自タグにしてまとめましょう。 CSSテーブルでも使ったHTMLElement(Webコンポーネント)を使ってゼロフレームワークで再利用性の高いコーディングができます!

footer.js on GitHub
あとは、define で定義したタグを使うだけ、index.htmlとdetail.htmlに smono-footer タグがあります。

<smono-footer></smono-footer>


注意点は、ローカルファイルとしてのJavaScriptモジュール読み込みができないこと。live-serverなど、ローカルにwebサーバーを立ててお試しください。

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

ウェブサイトは自己表現の基本、自分の作品や伝えたいこと、どんどん公開しましょう!

Microsoftグループによるサービス、GitHubを使えばアカウントが持てる13才以上であれば、誰でも無料で自分だけのウェブサイトを作って、公開できます。 広告など一切なしです。その作り方をシンプルに解説しました!

code4sabae/website: GitHub Pages で、じぶんのウェブサイトをつくろう!
世界的に有名なDenoなどだけでなく、経産省IMIコンポーネントツールや、東京都 新型コロナウイルス感染症対策サイトなど、日本政府による利用も増えてきました。 コメントするのにもアカウントが必要なので、持っておきたいですね。アカウント名が自分のウェブサイトの名前の一部になるので、ユニークで良い名前を付けましょう。

手順2でFork(フォーク)し、手順4でGitHub Pagesの設定をすれば、できあがり!(website)と同じページが公開されます。 あとは、index.html というテキストファイルの文字をいじるだけ。壊しても、何度でも作り直せます。(書いた内容は世界中からアクセス可能なことを忘れずに!)

<と>で囲まれたものはタグ。タグでウェブサイトはできています。 自分で試しながら作れる、HTML5時代のHTMLとCSSの超入門を作りました。 「HTMLはじめのいっぽ」「CSSはじめのいっぽ

基本がわかれば、後はやりたいことと合わせて検索すればOK、どんどん自分好みのサイトに改造していきましょう! お気に入りのサイト、ブラウザで右クリック「ソースを表示」でのぞいてみるのもいいですね。

わからないこと、間違っていることなどを見つけたら「Issues / website」まで、どうぞ気軽にお寄せください。

世界のデータは、まだバラバラ。5つ星オープンデータによってつながる未来、創りましょう!

対策ダッシュボード和歌山県、奈良県、埼玉県の速報連携を実施し、連携先都道府県は18になりました。 これで18/47、38%が連携できたことになります。(連携条件、オープンデータとして新型コロナウイルス対策を公開していて、退院数・死亡数がデータから分かること)

この条件の都道府県の連携は完了。オープンデータと明記はなくても、政府・行政の公開は、オープンバイデフォルト。次は、オープンデータとみなし、連携拡大を図ります。


COVID-19 Vocabulary 新型コロナウイルス対策ボキャブラリー
HTMLによるオープンデータは、5つ星オープンデータにおいて、星いくつか?実は、1つ星にも5つ星にもなりえます。 肝心なデータが画像であれば1つ星ですし、きちんと他とつながる語彙(ボキャブラリー)が設定されていれば、5つ星オープンデータです。

埼玉県のサイトを例に、実際にHTMLを5つ星にしてみます。
感染確認状況や関連情報 - 埼玉県
公式サイトにある、累積陽性者数、累積退院数、累積死亡者数、更新日。これらデータがあれば新型コロナウイルス対策ダッシュボードは更新可能です。


「ソースを表示」で、HTMLを確認すると、outlineというクラスは設定されていますが、基本的に人間向けのテキスト文章のみとなっています。画像ではないので、2つ星オープンデータです。 こちらを読み取ってデータ化するプログラムを作って、連携しましたが「parseInt(text.match(/県内の陽性確認者数:(\d+)人/)[1])」と文の書き方を決め打ちして作っているので、表現が変わってしまうと読み取れなくなります(src on GitHub)。

このHTMLを見た目を一切変えずに、5つ星オープンデータ化します。鍵は、itemscope itemprop itemtype (Microdata)と語彙(ボキャブラリー)。「COVID-19 Vocabulary 新型コロナウイルス対策ボキャブラリー」を使って、サンプルを作ってみました。

<table class="outline" itemscope itemtype="https://wvw.stopcovid19.jp/schema/"> <tbody> <tr> <td> <span itemprop="pref" value="Saitama"></span> <p><span class="txt_big">県内の陽性確認者数:<font color="#c51f1f"><span itemprop="npatients">868</span></font></span><span class="txt_big"><span class="txt_red">人</span><br /> (<span itemprop="lastUpdate" value="2020-05-01">5月1日</span>公表分:<font color="#c51f1f">5</font><span class="txt_red">人</span>)</span></p> </td> <td> <p>入院:280人(うち重症者:16人) 宿泊療養:50人 自宅療養:202人</p> <p>退院・療養終了:<span itemprop="nexits">295</span>人 死亡:<span itemprop="ndeaths">36</span>人 調整中:5人<br /> &nbsp; ※<a href="https://www.pref.saitama.lg.jp/a0701/covid19/jokyo.html">県内の発生状況(陽性確認者の状況・一覧)</a></p> </td> </tr> </tbody> </table>

データを囲むタグの属性として、itemscope と語彙を指定した itemtype を設定し、データにあたる部分を表示に影響を与えない span タグを使って囲み、itemprop属性で意味を指定します。(参考「最新のSEO事情!schema.orgで構造化マークアップせよ! - Qiita」「サイトをエンジニアフレンドリーにしよう!robots.txt / sitemap.xml / itemscope / opensearch で機会判読可能に改良する」)

こうしてできたHTMLであれば、下記のプログラムで簡単に新型コロナウイルス対策のデータとして、すぐ活用できます!

const html = await (await fetch(url)).text() const res = htmlparser.parseItem(html, 'https://wvw.stopcovid19.jp/schema/') console.log(res)

urlからhtmlを取得(fetch)して、対策語彙をデータを抜き出し(parseItem)する JavaScript のプログラム例 (src on Github)

人間も機械もうれしい、HTML5つ星オープンデータ、ぜひ使ってみてください!
失敗しても見た目に影響ないので大丈夫ですし、プログラムでの読み取りは成功するまでサポートしますのでご安心を。 (サポートメールアドレス fukuno@jig.jp、新型コロナウイルス対策語彙サポート宛 )


COVID-19 Japan - 都道府県別 新型コロナウイルス陽性患者数
退院者増加し、現在患者数が5%以上減少している都道府県は白下矢印が増えました。決して油断はできませんが、医療リソースのキャパを見て、自粛を段階的に緩める検討もありでしょう。

ただ、東京都はコールセンターや検査数が頭打ち、潜在患者数が多いことが想定されるので、注意が必要です。

都内の最新感染動向 | 東京都 新型コロナウイルス対策サイト」より、新型コロナコールセンター相談件数 4/30実績値

オープンデータは、行政からの一次情報が正しく早く伝わるツールです。
では、正しさとは何でしょう?


日本の自治体「信頼の一次情報」実現率
SSLかつ.lg.jpドメインな自治体は、32.1%

見たり聞いたりしたことの正しいか?その出処、出典を当たることで、確認できます。

例えば、福井県庁が病床数を発表したと聞いたとします。福井県庁のサイトを見て、その数が確認できれば、正しいと言えます。(対策ダッシュボードは一次情報のみで更新しています)

でも、本当にそのウェブサイトは福井県庁のものでしょうか?偽物かもしれません。 真偽は表示しているURLで確認できます。福井県庁のドメイン(URLの一部)に「pref.fukui.lg.jp」とあります。この「.lg.jp」 は、日本の地方自治体を表すので大丈夫です。(地方公共団体における情報セキュリティポリシーに関するガイドライン

ただ、その情報は改ざんされたものかもしれません?ブラウザによって表示は異なりますが、URLやその付近を見て、http:// で始まっていたり、「not secure」「安全ではありません」などと表示されている場合、行政のサーバーとお使いのブラウザの間の通信経路が暗号化されていないため、インターネットの経路上の誰かが改ざん可能な状態にあることを意味します。安易な信用は禁物です。


なんと、北海道庁はSSLに非対応。早急な対応が必要です。

もうひとつ、見ているブラウザ自体は安全でしょうか?出処の怪しいブラウザや、アプリ内ブラウザ、入れているプラグイン、入れているアプリによっては、手元のパソコンや、スマホ上での改ざんも有りえます。より信頼できるソフトを使い続けることが大切です。


日本の都道府県と市区町村のサイト一覧
なぜか国でもまとめていない全国地方自治体の公式ウェブサイト。上記、信頼できないドメインからの変更などのため、どんどんアドレスが変わっています。全国の新型コロナウイルス対策情報のまとめニーズもあり、市区町村全1916サイトを調べなおして更新しました。


list of local government in Japan (日本の地方自治体一覧オープンデータ)
調査したデータはもちろんオープンデータ。CSV/JSONでどなたでも自由に活用いただけます。


日本カラム地図 - TabularMaps Japan
オープンデータの活用例として、昨日開発の全国カラム地図から全自治体の公式ウェブサイトへ飛べるようにしてみました。


日本の自治体「Webの安全」対策率
SSLを使っている率、72.3%


日本の自治体ドメインセンサス
.lg.jpを使っている率、40.2%

オープンデータ化の取り組み、ご紹介いただきました。ひとつひとつ改善していきましょう。
データ解析を民主化せよ 新型コロナで重み増す「オープンデータ」:日経ビジネス電子版
行政機関の「オープンデータ」活用は不十分、新型コロナ対策の足を引っ張る | 日経クロステック(xTECH)
プロデューサーシップのススメ #02 データシティ鯖江から始まったウェブ新時代|PLANETS|note

テレビの地上波に、スマホで気軽にリアルタイム参加!

MC若新雄純と福井テレビによる実験番組生放送「じゃみじゃみ(仮)」、3年目はゲストに福井出身アーティスト、川本真琴さんと荒牧勇仁さん。 福井でしか見られない深夜番組、福井弁でゆるーく、時折届くコメントに触れながら、生でのコラボライブも交えた台本なしの1時間。

視聴者の方も喜んでくれた様子!ネット部分に、一日一創生まれの「コメント.net」カスタムが活用されました。 不測の事態に備えるも、平和に流れるコメント達。楽しく使っていただき感謝です!

「じゃみじゃみ」とは福井弁でアナログ放送のノイズ画面のこと、ランダムドットステレオグラムも一種のじゃみじゃみ。

shoot-rds」(タップして打ち、外したら負け)

コラボライブの様子!荒巻勇仁さん4/1ファーストアルバム発売!

曲は「川本真琴 feat. TIGER FAKE FUR/アイラブユー」途中、川本さんのお母さん、川本ユキさんのポスターが映っていておもしろい。ロケ地福井、鯖江の西山公園とかわいいレッサーパンダも登場してます。

地方局ならではのテレビとネットと楽しいコラボ。広げていきましょう!

次回に向けて、配信プラットフォーム「ふわっち」などを使ったネット連動展開、どうでしょう? 尖ったテーマ x 濃い視聴者 x 双方向通信アプリの組み合わせ、ますますおもしろくなりそうです。

福井市の中学生からの質問

HTMLのテンプレートにMarkdownを埋め込もうと考えたのですが、いい方法はないのでしょうか。
GitHubでドキュメント書く時に使うMarkdown記法、HTMLの替わりにシンプルにマークアップできるので慣れるといろいろ使いたくなりますよね!作りました!

<script src="https://taisukef.github.io/marked_md/marked.min.js"></script> Markdownを埋め込むよ <script>md(` # h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 `)</script>

先頭のscriptタグはページ内にひとつあればOKです。
思う存分 Markdown を使って、サクサクウェブサイト作っちゃいましょう!

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

スタイルシートはお好みでどうぞ!

参考までに、この実現に至るまでの調べ方、作り方を紹介。
1. "markdownをhtmlに埋め込む"で検索
2. 「Markdown非対応のテキストエディタでも対応しているように使える、MarkdownテキストをHTMLに埋め込み、ブラウザでプレビューする方法 - Qiita」が見つかる
3. MITライセンスの marked が使えることが分かる。でも、JavaScript埋め込みで /* などに制約あり
4. ` を使った記法を使えば制約が緩めて、シンプルに使えるような関数を実験しながら作成

<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script> <script> const md = function(html) { const div = document.createElement("div") div.innerHTML = marked(html) document.body.appendChild(div) } </script> </head> <body> <h1>markdown</h1> <script>md(` # h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 `)</script>

5. forkしたmarkedにmdを加える(ちょっと強引だけど、MITライセンスなのでOK)
6. GitHubのSettingsで、GitHub Pages として master branch を公開、誰でも使えるようになる

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