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

Do you know how many cities your prefecture have?

2017/02/15 23:55:00
#web #opendata #english 

262 cities opened them data in Japan.
But do you know how many cities in Japan? And how many cities in your home prefecture?

This is a map to solve such questions with link to official site and them pharase.
Enjoy Japan tour on web!


"How many cities does your prefecture have? / Japan"

Japan will lead the web / 1st W3C Japan Executive Committee Meeting

2017/02/14 23:55:00
#web #opendata #english 

There are 262 open data cities in Japan!
And it will great improve this year by the open data raw.


Mr. Japanese Internet Jun Murai wil lead Japanese Open Data at "1st W3C Japan Executive Committee Meeting".

I want to support as Open Data Evangelist and one of the W3C member. This is open data city ratio in Japan I made today.

"Open Data City Ratio / Japan"

Does your city open?

WebのSSL化待ったなし!さくらのクラウド x Nginx x Let’s Encrypt でつくるココイクSSL版

2016/10/10 23:55:00
#web #js 

iPhoneアプリからの通信がHTTPS必須となるまで3ヶ月を切りました。
iOS10から、Webで現在位置を取得するGeoLocation APIがSSL環境ではないと動かなくなっています。
Tech TIPS:Webブラウザで現在地情報を正しく取得できない場合の原因と対策 - @IT

GitHubに置く方法もありますが、今回はサーバープログラムを自由につくるためにサーバーをSSL対応してみました。


まずは実験、さくらのクラウドで一番安いサーバーのインスタンスを生成、1時間だけ実験するなら9円!
起動したら、adduser/passwdでユーザーをつくり、sshで手元のパソコンから接続。下記を参考に、nginxというWebサーバーとLet's Encryptという無料で自動更新対応のSSLを設定します。
Let’s EncryptのSSL証明書で、安全なウェブサイトを公開 - さくらのナレッジ

SSLでページが表示されました!

2014年一日一創のココイクを試しに移植してみます。
SSL環境から呼び出すJavaScriptや画像ファイルすべてがSSLにしておくのがポイントです。

ココイク」-->

授業で活用するスマホ、リアルタイム投票システム「vote」 福井高専1EIにて

2016/08/03 23:55:00
#js #kosen #web 

前期期末テスト、コンピューターな科目のテスト返しの時間を少しもらって、福井高専電子情報工学科の1年生のクラスにおじゃましてきました。 先生が許可すれば使えるというスマホ、3人ほど持ってない人がいたのは申し訳なかったところですが、リアルタイム投票システム「vote」も使っていろいろと聞いてみました。


vote viewer」と「vote」(鯖江市役所JK課卒業←で使ったアプリをシンプル化)
それぞれのURLの後ろに「#fnct1ei」などとハッシュを付けると、独自の投票ルームがつくれます。 授業や講演、イベントなどに使ってみてください。

学生に操作してもらうのは、YESかNOかのボタンを押すだけ。教室前のプロジェクターに映した投票結果画面にリアルタイムに反映されます。 どちらも超シンプルなので、円グラフにするとか、いろいろ改造するのもいいですよ!

プログラミングは後期からスタートということで、みんなワクワクしているところでした。 中学生まででプログラミング経験者が1人だけでしたが、夏休みからがんがん予習することをオススメしますよ!

プログラミングの楽しさを伝える活動、PCNの一端を高専生にも紹介。その場でゲームをつくっていくと、みるみる表情が輝いていきました。

「lol風ゲーム? only on IchigoJam!」
自分のパソコン所有率が、40%と低いのが気になるところ。Hana道場へ、IchigoJamつくりにおいで!


教壇に立つ、同福井高専、電気科の先輩、PCN/ナチュラルスタイル代表松田さん。(photo by 村田さん
私のスライドタイトルは、powered by とあるさくらのジェネレーター
このジェネレーターの作者は、舞鶴高専の先輩、さくらインターネット社長、田中邦裕さん

ステキな機会いただいた、福井高専村田先生に感謝です!
後輩のみなさん、チャンスまみれのこの時代、めいいっぱい自分だけの「ものづくり」楽しんでください!

Webサイトをプログラミング! IchigoJam「よくあるご質問」メニュー追加

2016/07/25 23:55:00
#IchigoJam #web 

インターネット上で最も使われ、ネットの代名詞ともなっているアプリ「Web(ウェブ)」
ブラウザや、アプリからHTTP(エイチ・ティー・ティー・ピー)というお作法に則ってデータを送ると、それに対応したデータが返ってくるというシンプルな仕組みが、あっというまに世界をつなぎました。

IchigoJam BASIC で、擬似的に表すとこんな感じ。

10 ?"ナニヲミマスカ?(0:トップページ 1:リファレンス 2:ヨクアルゴシツモン)" 20 INPUT N 30 IF N=0 ?"トップページデス。コドモプロコン カイサイチュウ!" 40 IF N=1 ?"LED: LEDヲコントロールシマス 0:ショウトウ 1:テントウ" 50 IF N=2 ?"プログラムノ ホゾンハ SAVEコマンド" 60 GOTO 10

Webサーバーと呼ばれる、データセンターなどにおいてあるコンピューターでは、こんな感じのプログラムが動いているわけです。 URLの「http://」のあとに続くのがサーバーがあるアドレス(住所)、その後に続く文字がそのサーバーに対して送るリクエストデータを表します。

IchigoJamの公式サイトに、ひとつ「よくあるご質問」メニューを追加しました。
Webブラウザ用のデータは、HTML(エイチ・ティー・エム・エル)を使いますが、すべてのページにメニューを追加するのは、手動でやろうと思うと結構面倒な作業です。
そんなとき活躍するのが、プログラミング!
今回、私はJavaを使いましたが、使う目的に合わせて、使えるプログラミング言語をいろいろと持っておくと便利です!


IchigoJam よくあるご質問

IchigoJamと無線LANボード「MixJuice」を使えば、IchigoJamでもWebが使えます!
IchigoJam+MixJuice向けホームページを開設しました ( パソコン ) - ボクにもわかる地上デジタル(ブログ) - Yahoo!ブログ
IchigoJamだけを使った情報発信もできるとおもしろいかも!?

W3Cx鯖江 福井で進むオープンイノベーション IoTとLPC812

2016/07/21 23:55:00
#opendata #sabae #fukui #web #efas #pcb 

Webの標準化団体、W3C(ダブリュー・スリー・シー)のグローバルビジネス開発のリーダー、アラン・バード氏が来鯖。 鯖江市はW3Cに加盟する、日本で唯一の地方自治体!(もしかしたら世界でも唯一!?)

市役所、鯖江市長を訪問、W3Cにおいてホットな、IoTとスマートシティにおいて一歩先行く、鯖江市の展望をディスカッション。 バス、水位、図書館空席など、市民の生活に密着した、時々刻々と変化するリアルタイムオープンデータの活用が鍵!


こどももオープンイノベーション、Hana道場を見学。 こどもパソコンIchigoJamを使ったプログラミング学習環境、IoT推進でさらなる活用拡大狙います!


福井のIT業界団体、会員急拡大中の福井県情報システム工業会でのセミナーで、福井県工業技術センター所長の強力さんより、ふくいオープンイノベーション推進機構と、IoT推進ラボの紹介。ここでもIoTは熱い!

IoT用のコンパクトで使いやすいマイコンとして、NT金沢でLPC812を使った液晶ゲーム機 negimiku lcd board (by @raimaxpさん)でも使われていたLPC812を実験。

1.27mmピッチと比較的幅は広めなので、子供でもちょっと慣れてる人ならいけそう。

Upverterを使った、プリント基板(PCB)データづくり、LPC812M101FD20(LPC812M101JD20)が無かったので、Create New Part で、FOOT PRINTに切り替え、右側のPinsのEdit、ピン配置を記入して、

左メニューの足マーク、generate a footprintを選択、LPC800のサイトの「LPC81xMデータシート」を見て、サイズを入力、フットプリントを作ればパーツ出来上がり!
→「NXP Semiconductors LPC812M101FD20FP - Upverter

PCN、次なるしかけを打ち合わせ。熱い夏になりそうです!

選挙カー連呼スポット探しアプリ、GitHubを使ったHTTPS対応法

2016/07/13 23:55:00
#opendata #web #odp 

HTTPに代わって、通信データを暗号化するHTTPSがいよいよ標準となるようです。
http:// と、https:// の一文字違いの「s」はsecure(セキュア=安全な)を意味します。

ブラウザは、スマホなど自分のコンピューターから、ルーターなど、さまざまのコンピューターを通って、アドレスにあるサーバーにデータが渡り、それに対応したデータが逆順を辿って、戻ってきたデータを表示しています。

その間のデータが、誰でも覗けてしまう暗号化されていない平文(ひらぶん)なのが今はまだ数で主流派の http、SSLという暗号化技術で暗号化されて普通は覗き見できなくして安全性を高めているのが https です。 https は、銀行やFacebookなどのサイトではお馴染みですが、まだ限定的です。

ついにAppleがiPhoneアプリでのHTTPS使用を義務化とのこと。2017年からは従来のHTTPを使って通信するアプリは審査が通らなくなってしまいます。
Webに接続するiOSアプリは2017年1月からHTTPSの使用が絶対条件になる、デベロッパーはご注意を | TechCrunch Japan

HTTPS化の流れは、Googleでも。シェアナンバーワンのブラウザ、Chromeで、GPSなど位置情報を使ったアプリを開くと、いままで使えていたはずなのに、動かなくなっていました。

JavaScriptコンソールを見ると「getCurrentPosition() and watchPosition() are deprecated on insecure origins.」と警告がでています。 HTTPS上に置いていないと動かない!?

取り急ぎ、HTTPSにも対応しているGitHubに退避します。 するととエラー。HTTPSのサイトからHTTPのサイトを呼び出すことはできない様子。

odpのSPARQL Endpointと、Google Maps のAPIを https に変更します。(odp by jig.jp もSSL対応!)

// findrenko.html var baseurl = "https://sparql.odp.jig.jp/data/sparql"; // gmap.js var apiurl = "//maps.google.com/maps/api/js?key=" + apikey + "&language=" + getLanguage2()

さらに「Google Maps API error: MissingKeyMapError」とエラー、Google Maps はAPIKEYを必須とするようになったようです。

Google APIsでAPIKEYを取得して、設定して、晴れて元通り動くようになりました!
選挙カーが名前の連呼をしていいスポットを探すアプリ、題して「選挙カー連呼スポット探しアプリ
東京では、5つ星オープンデータに対応したデータを公開している、品川区の学校データが見られます。

Interopに世界初のブラウザ展示!ますます広がるインターネット&Webの世界、鯖江市&jig.jpも出展中

2016/06/09 23:55:00
#sabae #IchigoJam #opendata #web 


世界初のWebブラウザ、ティム・バーナーズ=リー氏によるWorld Wide Web!
これがオリジン!


Mosaic! 他、歴代ブラウザの動体展示がありました。Mozzilaの中の人の話にも感動!


W3Cブースで異彩を放つ、D.F.Mac.さんによる「Web缶たたき機」!


WebMIDIからArduino、ソレノイドへとつながり、缶をたたく!


パトランプのまわりに光センサーを磁石でくっつけてリズムを刻むシーケンサーが斬新!
これも自作MIDIハード&WebMIDI!


同W3Cブース内、W3Cメンバーの鯖江市&jig.jpによる展示、データシティ鯖江!
こどもパソコンIchigoJam体験できます!


W3Cブースのおとなりには「WebRTC Pavilion」遠隔ロボットでおねえさんと対戦!?


Webでリアルタイムコミュニケーションを実現するWebRTCとバーチャルリアリティーを実現するWebVRを使って、RICOH THETA S x Oculus || スマホVR への360度配信をWeb上で実現。 なんとオープンソース、これはぜひ試してみたい!
THETA S で全天球映像を配信するまで:まとめ」」


NICTブース


起業家万博へも出場した「FABO」!IchigoJamとつながるシールドも発売予定!

べんきょうにも使えるIchigoJam、クイズプログラムのサンプル「Webクイズ」です。

10 ?"Webハ タンジョウ ナンネン?" 20 ?"1.100ネン 2.50ネン 3.25ネン" 30 INPUT A 40 IF A=3 ?"セイカイ!!" ELSE ?"ハズレ! セイカイハ 25ネン デシタ"

追加問題

50 ?"W3C/Keioハ タンジョウ ナンネン?" 60 ?"1.10ネン 2.20ネン 3.30ネン" 70 INPUT A 80 IF A=2 ?"セイカイ!!" ELSE ?"ハズレ! セイカイハ 20ネン デシタ"


祝!W3C/Keio 20周年!

Interopは、6/10(金)まで、どうぞホール7奥(MAP)、W3Cブースへもお立ち寄りください!

オープンデータ・学生・地方創生、信州未来アプリコンテスト0

2015/12/22 23:55:00
#js #nagano #web 

長野県、信州未来アプリコンテスト0(ゼロ)が初開催!
15作品の公開プレゼンテーション&審査会、高校・大学生による地域課題や自分課題をウェアラブル、地域データを使ってアプリによって解決。

長野県からクリスマス12/25にオープンデータ開始宣言も!
地域の学生、行政、企業を結びつけるコンテストは王道です!成果物、どんどん市民の人にも広げましょう!


長野工業高校学生による避難所案内アプリ、みんなで作ろう「ハザードマップ」
オープンデータ登場で、活躍しそうですね!


松本工業高等学校学生によるウェアラブルウォッチで迷わない観光アプリ、避難所モード付き!、future hazard
こちらも防災、観光オープンデータがあれば使えますね。
福井など、オープンデータがある場所への移植もぜひ!


長野高専学生作、ひらがなをマーカーとして手話の指文字をAR表示させる、ARによる指文字学習システム
指文字、覚えたことあります!学習者に人気の覗きこむようにいろんな角度でみられる機能をARで実現!


長野大学、Oculusによる没入型お城観光ができる、小諸城体験アプリ
城の3Dモデルデータを自作が見事!ぜひ体験してみたい。
モデリングデータをGithubに置くなどしてオープンデータにして、二次創作を促すのもありですよ!


長野大学、肌をシミュレーションしてレンダリングして診断、お肌診断アプリ
リアルなリアルタイムレンダリングが見事、メイク技術の革新、楽しみ!


信州大学、RICOH THETA S を使った新しい過去体験、農園におけるイベント抽出のための全天球Web画像ビューア
虫眼鏡を使った過去切り出しがオシャレ。Oculusとの組み合わせなど、楽しいおもちゃがいろいろありますね!
いろいろアイデア、どんどん実現しましょう!


信州大学、ウェアラブルカメラと手に付けたマーカーによる、ハンドフレーミングカメラ
新しいユースケース生まれるウェアラブル、あれこれ創るにはもってこい!
山端くん、jigインターン参加生!


みなさん、素晴らしい発表ありがとう!


勝手W3C賞としてプレゼントした、W3C TPAC 2015 特別Tシャツ!


創ろう!

W3Cつながりで見つけた、第10回 IoTLTの発表
IoT時代のブラウザAPI (第10回 #iotlt :5分) // Speaker Deck」より、バッテリー残像表示を実験!
W3Cではまず実装、動くものありき、それを提案してみんなでいいね!となると仕様として盛り込まれます!
どんどん広がるWebでアプリで、できること!

参考URL
- 「Navigator.getBattery() - Web APIs | MDN

9コマンド追加、IchigoJam ver 1.1 リリース! ITの入り口広げる、東京高専&W3C

2015/12/21 23:55:00
#lpc1114 #IchigoJam #kosen #web 

IchigoJam ver 1.0 リリースから半年、Facebookグループ「IchigoJam-FAN」にてβ版を重ね、ついにver1.1のリリースです。 β版をお使いいただいた方々、ご意見いただいた方々、ありがとうございました!

ver1.1ファームウェアのダウンロードは、こちら「ichigojam-1.1.1.zip

LPC1114の32KBのFlashROM中、8KBはプログラム保存に使うため、残りの24KB。自ずと限界もありますが、あまり複雑にはしたくないこどもパソコンIchigoJamなので、今回の追加コマンドは9つだけです。 下記、ざっと紹介します。

ver1.1 新コマンド 9つ! (PWM/UART/SRND/LANG/DEC$/STOP/CONT/LINE/RESET)一覧

PWM n,m,l (サーボモーターの制御や、SOUNDに加えて和音に使える目玉機能!)
パルス出力 n:ポート2〜5 m:周期20msec中0.01msec単位でHIGH時間指定0-2000
サーボ用100-200前後 l:0.01msec単位の周期指定(省略可能)
PWMとは、Pulse Width Modulation、電圧が一定時間だけ高い状態を繰り返す機能です。
周期指定lは、ポート2〜4とポート5の2系統使えます。つまり、音声として使う場合は2音程。

UART n,m (Universal Asynchronous Receiver Transmitter、いわゆるシリアル通信)
シリアル出力を制御します n:出力制御、m:入力制御 (n=0:出力なし、1:PRINTのみ、2:PRINT/LC/CLS/SCROLL(初期値)、3:改行\r\n変換モード) (m=0:入力受付ない、1:入力を受け付ける(初期値)、2:ESC無効モード)
起動直後、UART1,1となっていて、PRINT(または、?)で出力した文字はそのままTXDから送信され、RXDからコードを入力することでキーボード代わりになります。
(デフォルト通信速度は115200bps、8bit、パリティなし、ストップビット1bit)

SRND n (乱数初期化、ランダマイズ)
RND(n)による乱数列を初期化します。指定した数によって、乱数列が固定されます。
ランダムに面を生成するゲームに使うと、毎回決まったステージを生成できて便利です。

LANG() (言語種を返す)
今回の目玉、モンゴル語対応!
モンゴルで使われるキリル文字は、カタカナの代わりに入っています。
その状態をプログラムで取得するためのコマンドです。
(1:カタカナ&ローマ字入力、2:キリル文字&モンゴル語配列)

DEC$(n,m) 10進数の桁数指定付き表示
PRINT文でいままで使えた、16進数を表示する HEX$((n,m) や、2進数を表示する BIN$(n,m) に加えて準備。
スコア表示なので桁数を揃えたい時に使ってください。

STOP プログラムを中断
ver1.1からESCキーで停止した際、停止した行数を Break in 10 などと表示されるようにしました。
STOPコマンドはこの状態をプログラムで作ることができます。デバッグ(プログラムの間違い探し)にどうぞ!

CONT 実行中または中断した行を再度実行する
SOTPやESCで停止した行から再開します。行の先頭から実行されるので注意!
裏ワザ的ですが、プログラム中で使うことで、現在実行中の行を頭から実行するために使えます。
下記のように書くとキー入力待ちになります。

10 IF INKEY()=0 CONT

LINE() 実行中の行番号を返す(非実行中は0)
IchigoJamのGOTOやGOSUBは、変数が使えます。現在行からの差分で飛ばすために、下記のように書くと便利です。

10 GOTO LINE()+n*10

RESET リセット(電源入れ直し相当)
電源を入れ直しをソフトウェア的に実行します。保存していないプログラムは消えてしまうので注意!

高専教育にもじわじわと広がっている、IchigoJam。
今回は高専プロコンでNICT賞獲得したチームのいる、東京高専へ。

「時代が高専に追いついた!? ものづくり起業と次世代Web」


ものつくる高専生、自分の友だちのちょっとした不満をステキ道具をつくって解決しちゃおう!


起業家甲子園に向けて打ち合わせ終了!クリスマスツリーと先生を囲んで!
小学校でのタブレットを使った教育環境を防犯防災教育から変える!!
「ホップ!ステップ!マップ!」のオリジナルシャツもゲット!


W3C日本ミーティングでは、ウェブアクセシビリティが熱いという新情報!
障害のある人でも、こどもでも、おじいちゃんおばあちゃんでも、誰にでも優しいWebを目指します。
オープンデータによる情報提供と、利用者にぴったりなアプリという分離も進むことでしょう。

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