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

あけましておめでとうございます!
今年の一日一創も、よろしくおねがいします。


nenga2019」 - framework websarasa.js
こどもパソコンIchigoJamIchigoJamフォント と websarasa.js を使った年賀アプリ!

本サイト「福野泰介の一日一創」遅ればせながら、ようやくAOSSL(Always on SSL / 常時SSL)にしました。 無償で使えるSSL Let's Encrypt と、軽量webサーバー Nginx で、Javaで開発する自前webアプリケーションサーバー Zerosen へ受け渡す形で実現。

従来の非URL http で始まるアドレスへのアクセスは、https を付ける形でリダイレクトするので、基本的には動くはずですが、混ぜるな危険のSSLの仕組み上、アプリが動かなくなっているものは、順次修正していきます。

アドレスが変更になったことから、Facebookのいいね数などがリセット。心機一転、リスタート。ひとまず、ソーシャルボタンを外したところ、ずいぶん軽量になりました!


日本の自治体「Webの安全」対策率
1年ぶりに調査してみた、地方自治体webサイトのAOSSL化状況。
2017年12月には54自治体、2.8%から、306自治体15.9%まで大幅増とはいえ、対策は遅い。
Webの安全、準備できてますか? 2017年はHTTPS標準化元年 地方自治体対応率はわずか1.5%

SSLの普及率、世界平均69.9%、日本平均62%、アメリカはすでに82%!(2018年5月の調査)
日本のHTTPS導入、普及しつつもまだ不十分 – Anderswodenkender – Medium

オープンデータ伝道師&地域情報化アドバイザーとしての活動にも力が入ります!

links
- 2012年 2012年のテーマ「一日一創」
- 2013年 じゃみじゃみ年賀アプリでスタート、2013年の一日一創
- 2014年 セマンティックWeb元年、一日一創第三章のテーマは「つなぐ」
- 2015年 創造は力なり スロットおみくじハードウェアで占う2015年
- 2016年 起動10秒!IchigoJam BASIC、PC用のOSベータ版リリース! IchigoJam PC
- 2017年 BIG SCREEN IchigoJam New Year Update!
- 2018年 Happy New Year 2018! Starting with Glasses! 新メガネで迎える新年

Web inventor, Sir Tim started new open social platform "Solid".
Web発明者、ティム卿が始めた新しいオープンなSNS「Solid」

It's a little hard to understand to add a friend, but we can make ourselves because it's open!
標準ではちょっと分かりづらい友達追加でしたが、オープンに作れちゃうのがいいところ!作ってみました。

"add friend" button. (友達追加ボタン)

add a friend 'taisukef'

Let's start to make and join "Solid", decentralized open SNS!
Solidでつくる、非中央集権型(デセントライズド)分散型オープンSNS。はじめのいっぽ、はじめましょ!


"Add a friend on Solid" (Solidで友だち追加) src on GitHub

On Chrome, why do I get the error after log in!?
Chrome、ログイン後、エラーメッセージがでる不思議

{"error":"invalid_request","error_description":"Mismatching redirect uri"}

links
- The first step of Solid / web発明者による新ソーシャルプラットフォーム「Solid」はじめのいっぽ with GitHub
- Ruben Verborgh's answer to In layman's terms, what is the essence of Sir Tim Berners-Lee's project Solid? - Quora
- How solid is Tim’s plan to redecentralize the web? – Irina Bolychevsky – Medium
- solid/chat - Gitter

web発明者TimによるLinked Dataベースの新プラットフォーム「Solid」発表!
“Webの父”バーナーズ=リー氏、個人情報をGAFAからユーザーの手に戻すプロジェクト「Solid」立ち上げ - ITmedia NEWS
One Small Step for the Web... — Inrupt
Tim、MITを休職、W3C業務を減らし、Inruptを共同創業という本気っぷり!

こちらSolidアプリはじめのいっぽ、チュートリアルを日本語化して、1項目追加したもの

プロフィール ビューワー for Solidsrc on GitHub


「Log in with Solid Community」でログインすると、名前、ノート、友達が取得できます。

アカウント名は速いもの勝ち、とりあえず自分のWebID、ひとつ作ってみましょう。
Solid」→「Get a Solid POD


「Solid Community」で「GET A POD」


Registerで登録!
これで上記のアプリ「プロフィールビューワー」が動作します。(ログインは、Solid Communityを選ぶ)


ちょっとわかりづらい友達(知っている人 knows)追加の方法は、自分のカードをホームアイコンの左で編集画面にいき


下部にある同心円状の白黒の丸に誰かのWebIDのURLをドラッグアンドドロップすると、追加されます。
WebIDの例:https://taisukef.solid.community/profile/card#me

WebID、ぜひお知らせくださいっ
(2018.10.4追記 「Add a friend on Solid! Add a link to make friends on your new open SNS. #solid #js #web」)

続いて、Solid appづくり
昼休み中にできちゃうアプリづくり、やってみましょう!(Build a Solid app on your lunch break)

チュートリアルを見てもOKですが、もっと簡単、日本語化した Solid app on GitHub を活用ください。
GitHubで、forkして、Settings、Sorceを「master branch」でSaveして、しばらく待つと、https://[自分のgithub ID].github.io/profile-viewer-tutorial/ でアクセスできます!

今回触ったJavaScriptコードは、たったこれだけ (main.js)

const VCARD = $rdf.Namespace('http://www.w3.org/2006/vcard/ns#'); // Display their note (added by taisukef) const note = store.any($rdf.sym(person), VCARD('note')); $('#note').text(note && note.value)

RDFlibというJSのライブラリを使って、人や人との関係を表すFOAF語彙のRDFデータに認証情報付きでいろいろとシンプルにアクセスできます。

Solidのドキュメントには、Linked Data、Solid Appのつくりかた、Solid Serverの立て方なども!

はじめよう、新しいwebへの小さな一歩!
Let's start a small step for new web!

links
Solid (MIT)
- Solid (GitHub)
- Solid Project @ MIT (@SolidMit) | Twitter
- ウェブの父バーナーズ・リー氏、「データを企業から個人の手に取り戻す」新計画 - ZDNet Japan
- “Webの父”バーナーズ=リー氏、個人情報をGAFAからユーザーの手に戻すプロジェクト「Solid」立ち上げ - ITmedia NEWS
- One Small Step for the Web... — Inrupt

2014年、Durovis Diveが教えてくれた、スマホを使って安価に実現するスマホVR。
スマホのスペックが上がり、画面が大きく、残像も少なくなったiPhone Xであの夢にもうチャレンジ!

redrain」WebVR使用、スマホVR用 (base app: ICS MEDIA)
3Dライブラリ three.js で、作りたい空間を作るだけ!
二画面分割して見る方向合わせはライブラリがやってくれます。

1995年、高専1年生の夏に登場し、瞬く間に、専用ゲームが10円ワゴンセールや「ご自由にお持ちください」状態になった、早すぎたVRゲーム機「バーチャルボーイ」(on Wikipedia)


今ではだいぶ市民権を得たが、当時は異様すぎた、没入感抜群の固定式ヘッドセットタイプ。 見える世界は、赤と黒のみのバーチャルな3D空間。多彩な操作方法と、奥行きある斬新な3D表現が楽しかった!(が、一般には受け入れられなかった)


VRゴーグル - otamart
THETAなど、360度動画が多数アップされる中、オタマート公式ショップでのスマホVRの販売開始!
手軽に体験できる千円台、三千円台、五千円台の3ラインナップ。


こちら五千円台、PSVRと同様、ヘッドバンドタイプのVRヘッドセット。後ろのネジを引っ張り、回して締め付け固定。 耳に当たらないので疲れない、スピーカー付き!


イヤホンジャックが格納されてます(Lightningコネクタは付属品ではありません)
フロントカバーを外すことで、外カメラを使ったAR、MRにも対応可能。
ヘッドセット下にあるボタンを押すと、ヒンジを通して画面中央をタップしてくれるので、YouTubeなどの操作が簡単、手軽!


左右レンズの前後と左右を調整できるダイヤルが3つで調整すれば、裸眼視力0.1でもメガネ無しでくっきり見える。

平面では伝わらないVR、体験するとしないとでは大違い。まだの方、ぜひどうぞ!

links
- 必要なのはスマホと1,000円のGoogle Cardboardだけ! WebGLではじめるお手軽VR入門 - ICS MEDIA
- WebVR はじめよう - Qiita
- VRゴーグル - otamart
- RICHO THETAで撮る鯖江の花火360度動画
- 22年前に発売されていた元祖VRゲーム機を楽しむ

コミュニケーションとは「伝えること」ではなく「伝わること」
今まで誰からどんな衝撃をもらって、今の自分が在るのか?
自分は、相手に何をプレゼントできるか?

社会をより良くするため、例え小さくても押し続けよう


2015年のバンコク開催に参加した白崎さん。
法律で、テロとどう戦うかの議論中に現れた青年。 難民キャンプで子供向けに自由に夢を描いてもらうアートワークショップでテロの連鎖を止めようとしている話に衝撃を受けた。


日本初の都道府県選出代表、福井県で選ばれた、中嶋さんによる報告。


「Fukui to the World」
頭をガツーンとやられたような、ショッキングな体験。この積み重ねが人生。
1年で記憶に残っている日は何日ある?と、若きリーダーに向けて問いかける、大久保さん。
One Young World 国際本部メンバー、Japan Committee 委員長

福井から始まった、県選出モデル。
都道府県すべてから一人ずつ日本代表が選出され、世界とネットワークを作ってくるビジョン!


196カ国1300人の若きリーダーが集まる濃密な4日間を紹介。
環境、貧困、平和、そして、教育など、世界共通の課題のセッション。
各国の若きリーダー、SDGsの内、何が最も重要か?話し合い、発表したワークショップ。
食事の時間も貴重なお話時間。インドの女性と仲良くなって、贈り物が後日届けてくれたとのこと!


PCNとして福井を中心に「こどもプログラミング」を広める活動、コロンビアでも!

1 IF BTN()=0 GOTO 1 2 OUT 1:WAIT 60 3 OUT 0:WAIT 60 4 GOTO 2

誰かがボタンを押してくれたら、1秒おきにモーターを回したり止めたりしてくれるロボットのIchigoJam BASICによるプログラム。

手順番号、1〜4でロボットにやってほしいことを伝えます
1. もし(IF)、ボタン(BTN)が押されていなかったら(=0)、1へ行け(GOTO1)・・・ボタンが押されるまで待つ
2. モーターなどを回せ(OUT 1)、そして、60数えるまで待て(WAIT 60 = IchigoJam時間で1秒を意味する)
3. モーターなどを止めろ(OUT 0)、そして、60数えるまで待て(WAIT 60)
4. 手順番号2へ行け(GOTO 2)

毎秒5000万回をも計算する、たった100円のコンピューターにやってほしい想いを伝えるのがプログラミング。 伝わったかどうかはコンピューターは瞬時にメッセージや、結果で応えてくれるのがいいところ。


日本にもある、世界に目を向けるきっかけ。
ベトナムから参加の起業体験イベント「Startup Weekend Fukui」や、アフリカからの留学生のためのict4e会社説明会などを通じて、興味を持ったとのこと。


最後に中嶋さん、今後の活動として「こどもプログラミング」へのコミットを表明!(左から、遠路敦賀から参加の元気な高校生、大久保さん、中嶋さん)
やりましょう!


昨年つながった、アフリカ、ルワンダ。
今年も10月子供たちへのワークショップを企画中のict4e/ict4r代表の原さんと白崎さん
ルワンダ語版IchigoJamプログラミング教材「IchigoJam print in Rwandan」アリマス!


中嶋さん報告にもあった、平和セッションでのルワンダ代表からの体験談ほかハイライト動画


オランダ、ハーグで開催、OYW2018
語学力より大事なこと、「社会をより良くしたい」という想い。

「one web」をミッションとするwebを始め、日々誕生する、かつて存在しなかった様々な世界をつなぐツール達。 各国言語に対応した認識&読み上げ、翻訳に対応する「UDトーク」や「Google翻訳」がある今、怖がる理由はなくなりました。 必要なのは、一歩踏み出す勇気だけ。

みんなで作る、ひとつの世界。
One Young World」体験したい人、ぜひアクションを!

世界もひとつの地域。
体験なしに理解するのは難しい。

links
- One Young World | One Young World Japan Committee - OYW日本委員会
- How to attend the Summit | One Young World - OYW本部 2018開催
- W3C Mission
- 日本企業も注目していくべき?世界で輪が広がっている「One Young World」とは | ビッグライフ21 Biglife21

IchigoJam開発きっかけのひとつ、タブレット用こどもプログラミング環境、progrun

石川高専のインターンOB生と一緒に開発し、2012年の一日一創にてリニューアル。 親子体験会、2013年おもしろフェスタで子供100人体験、鯖江のシニア向け講座、鯖江市役所JK課向け、デザイナー向けにも活躍!福井県、鯖江市の写真オープンデータを使えるようにして、オープンデータ推進にも一躍担ってもらいました。
親子プログラミング教室子供100人体験シニアプログラミング教室JKxプログラミング

ネットワーク不要で使えて便利だった Application Cache API(廃止)が、PWA(Progressive Web Apps)となって還ってきました!(iPhone/iPadがiOS11.3から部分対応)

久しぶりに、progrunのメンテナンス(ServiceWorkerでのキャッシュと、manifest.jsonでアプリ設定対応)。ホームに追加して起動すると、以後、オフライン環境でも遊べます。(ネットワークへのアップロード、ダウンロードはまだできません。ローカル保存機能とかあるといいかも)

スマホ、タブレット、PC対応こどもプログラミング環境「progrun」PWA版 - src on GitHub

当時使っていた説明資料、アップしておきます。手軽なJavaScriptプログラミングはじめとして遊んでみてください。

progrunを作って試して分かったこと
- 文字を書くだけで、絵が出るテキストコーディング体験は新鮮で楽しい!
- 簡単に何度も作り直せるコンピューターものづくりの本質に触れてもらえた
- 小学生にとってアルファベットの小文字は馴染みが薄い(→ IchigoJam BASIC は大文字基本)
- プログラミングにハマル子は一定割合いる!
- 簡易環境では次のステップを示しづらい(複雑にすると入り口のハードルが上がる)
- タブレットを買ってあげちゃうと余計なことに使いそうで嫌という親の声(→ ネット不要のIchigoJam)

子供が何か創りたいと言ったらチャンス!(そもそも、子供はデフォルト、クリエイター)

links
- KidsIT - 子供とプログラミングが遠いという危機感
- なぜ今デザイナーにプログラミングなのか? P4D in FUKUI 開催レポート
- かんたんプログラミング環境「progrun」を使った福井県児童科学館での教室開催中(動画付き)
- 一見分かりやすいビジュアル言語 vs 想像かき立てるテキスト言語

オープンデータの真価が発揮される横展開。標準化への道筋はすでにできているので活用しましょう!
Code for Shinjuku x Code for Nerima x Code for Sabae 連携イベント!


主催、Code for Shinjuku 代表、新宿区議 伊藤 陽平さん!
本イベント、なんと、リアルタイム字幕付き!


個人だと無料で使えちゃう、このシステム「UDトーク」開発者で、Code for Nerima 代表、青木秀仁さん!


実際にHTMLやJavaScript、SPARQLクエリーを触っておらうハンズオン。
話している事をリアルタイムにしっかり拾って、字幕表示、スゴイ!
(photo by Code for Shinjuku Naoko Asai)


web発明者ティム氏提唱、日本政府が共通語彙基盤(IMI)として推進する、5つ星オープンデータ
東京都では、新宿区、品川区、総務省統計局が5つ星オープンデータによるデータ提供を行っています。

ハンズオン資料
GoogleマップとはじめてのSPARQLクエリー(プログラム、GitHubにも置きました)
ハンズオンプログラム(サンプルソース)のダウンロード
http://sabae.cc/temp/mapap-tokyo.zip(APIKEY追記、応用例追加)

5つ星オープンデータへのアクセス方法の標準、SPARQL(スパークル)。
主語、述語、目的語で、すべてのデータを整理するというアイデアを押さえたら、あとはいろいろ試すのみ!

こちら応用例として、新宿と品川の5つ星オープンデータから保育園、幼稚園を検索してきてアイコン表示するマップアプリです。
アイコン画像を変えたり、HTMLをいじって文章を足したり、CSSをいじってデザインを変更したりと簡単なところから改造してみましょう!

PC上で試したら、次はぜひweb公開!無料でサイト公開ができるサービス、GitHubがオススメです!
自分の名前が入ったドメインを作成したら、GoogleマップのAPIKEYを取得して、HTMLファイル内の ?key= 部分を書き換えればOK!

GitHubアカウントの作り方と、APIKEYの取得方法
参考:「【2018年度版】Google Maps の APIキー を簡単に取得する – ねんでぶろぐ


UDトーク」懇親会へ向けての相談会話もしっかり拾っています!
早速インストール、字幕化、Code for Sabaeイベントでも、外国の人とのコミュニケーションにも、いろいろ使ってみます!


新宿区でオープンデータを推進する、総合政策部情報システム課長の熊澤さんからも恊働呼びかける力強いメッセージ!


Code for の "C" - 青木さん開発の「声シャッター - ハンズフリー&かんたんカメラ」で撮影

日本の課題は、世界の未来の課題。
「ゾンビ施設」増殖で地方は大変なことになる | 国内経済 | 東洋経済オンライン | 経済ニュースの新基準
年間500校もの学校が廃校になる日本。顕在化していない問題はまだまだ多量にでるでしょう。
それでも前へと進むため、オープンデータとコンピューターパワーを活用しましょう!

2018年度、品川区でも Code for Tokyo 連携オープンデータ推進企画、進行中。
今年は子供の力もプラス!? 品川区ハッカソン「しながわっかそん」の新展開、新連携も楽しみです。

新宿区、練馬区、品川区、大田区、渋谷区、八丈島!
東京のつながり、地方と東京のつながり、まず人がつながり、データがつながる5つ星オープンデータ!

links
- 大事なことは何回言ったか? UDトークで簡単イベント全文自動書き起こし

日本のW3Cメンバーは36団体。第二回、W3C Exective Committie Meeting が開催。
通信キャリア、メーカー、ゲーム業界、印刷業界など、さまざまな業界から集まり、webの未来を語る会。


日本のインターネットの父、村井純さんによるプレゼンからスタート。


W3Cは、webの発明者、ティム・バーナーズ・リー氏が創設。
インターネットの父、ヴィントン・サーフ氏も加えた、世界を変革した3名は教科書に載っているべきです!


インターネットの到達率は、ついに51.7%。
EU、アメリカはほぼ90%になる中、アジアはまだ46.7%と成長余地が大きい!(アフリカも!)


日本のIT戦略を支える、3つの法律。
高度情報通信ネットワーク社会形成基本法、サイバーセキュリティ基本法、官民データ活用推進基本法。
官民データ活用推進基本法は、世界でも珍しい、議員立法だからこそできた、民間のデータにも踏み込む大胆な法律とのこと。

日本、大いにチャンスありですね!


共通語彙基盤を使ったSPARQLとマップアプリを実際作ってみるハンズオン。
手元のPCを使うだけで、HTMLやJavaScript、SPARQLクエリーなどを編集して試せます。


(京都でのオープンデータテストベッド研修プログラムの試行にて使用)

GoogleマップのAPIKEYを取得し、設定することで、アプリとして公開も可能です!
APIKEYの取得方法や、GitHubを使った公開方法は、こちらを参考にどうぞ。
GitHubではじめるWebアプリづくり「GitHub & マップアプリハンズオン」と4アイデア - 福井県オープンデータ勉強会

iPhone X で困ること。
1/2の確率で上下逆に持ってしまってロック解除ができないストレス。
せっかくのベゼルレス、上下逆さまでも使えるようにiOSが対応してくれることを強く希望!

上にだけある切り欠きを下にもつければ違和感ないのでは?
という話になって、実際やってみました。


additional black edge SVG for iPhone X - iPhone X用、追加縁取りSVG
ベースは、2017年9月のサイト内アクセスランキング1位だった「気分は iPhone X!? 縁取りSVGをつくってみた」です。しばらく、本ブログにCSSを適応して使ってみます。

これはこれで違和感ないかも。

ついでに裏表もなくして、理想の電脳メガネへ近づきたい。

使い慣れた文字入力や、繊細なポインティングデバイスとして上下裏表対応のタッチパネルだけのデバイスをポケットに入れることになりそう。
(過渡期は、電脳メガネをディスプレイ、スマホを補助コントローラーが現実的)

すべてのこどもたちに持ってほしい、あったらいいなをとりあえずカタチにできる力!

PCNこどもプロコン2017冬の締め切り間近です!

links
- SVG / 図形の描画方法まとめ - Qiita
- SVGを上下左右に反転させる方法【SVG】 | sakura*sakura
- [CSS] z-index の最大値について調べた – 零弐壱蜂
- 電脳メガネサミット2018 - 福井県鯖江市
- PCNこどもプロコン

jig.jp、2019年4月入社となる新卒エントリーページをオープン!

新卒採用案内 | スマホ(Android/iPhone)アプリ・携帯アプリならjig.jp(ジグジェイピー)

コンテンツ:代表の想い、募集要項、弊社エンジニアの声、座談会、使用技術、使用言語!
jig.jp本店、鯖江の開発センターの雰囲気にビビっと来た人のエントリー、待ってます!

今日の一日一創は、JavaScriptで無いものづくり。

シンプルなアセンブリ言語を「IchigoJamではじめるArmマシン語入門」の解説用に使っていたら、作ってCC0で公開してくれたboxheadroomさんによるasm15アセンブラ! GitHubに載せてオープンソースでオープンライセンスな気軽に使えるWebアプリとして、必要に応じて成長させています。

ターゲットデバイスへのプログラムのバイナリを記述するためのフォーマット、IntelのHEXフォーマットと並ぶ、SRECフォーマット(モトローラSフォーマット、とも呼ばれる)への対応追加!

IoTに最適Arm Cortex-M0からLinuxが動いちゃうCortex-M7までのシームレス感が美しいSTM32の開発環境整備の一貫です。


asm15」 SREC format supported!!

コードを書き足し、テストして、GitHubへコミット!
検索してあえば使う、無ければ創って、共有する。
エンジニアの醍醐味です。

新卒採用案内 | スマホ(Android/iPhone)アプリ・携帯アプリならjig.jp(ジグジェイピー)

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