全国高専生向けjig.jpインターンプログラム2020、募集開始! 今年もがっつり3週間、jig.jpのスタイル「アジャイル」を使ったチーム開発への参加したい高専生を大募集。


map sample - leaflet.mjs
jsからモダンなmjsへの移行、地理院地図で使える Leaflet をmjs対応させました。 日付解釈の dtcheckjp.mjs に続く第二弾、import を使った、すっきりシンプルに地図を使ったウェブアプリが簡単に作れます! 各地の高専生と開発進む、あるプロジェクト用に整備しましたが、地図の応用範囲は広大です。

<script type='module'> import L from 'https://code4sabae.github.io/leaflet-mjs/leaflet.mjs' window.onload = async function() { const data = [ { lat: 35.943560, lng: 136.188917, name: '鯖江駅' }, { lat: 35.944539, lng: 136.186222, name: 'Hana道場' }, { lat: 35.942795, lng: 136.198881, name: 'めがね会館' }, { lat: 35.949658, lng: 136.258142, name: 'JAPAN CRAFT HOUSE' }, ] const map = L.map('mapid') // set 国土地理院地図 https://maps.gsi.go.jp/development/ichiran.html L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png", { attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>"', maxZoom: 18, }).addTo(map) let iconlayer = L.layerGroup() iconlayer.addTo(map) const lls = [] for (const item of data) { const ll = [ item.lat, item.lng ] const marker = L.marker(ll, { title: item.name }) marker.bindPopup(item.name) iconlayer.addLayer(marker) lls.push(ll) } if (lls.length) map.fitBounds(lls) } </script>

フロントエンド、バックエンド、それぞれどんな技術を使ってどうつくるか!?
チームで話し合って決めて進めます。弊社、現役エンジニアがメンターとなってサポートします。もちろん、私も!


キレイにリノベーションされた、広い古民家を使った共同生活&レクチャー。


スクラムの一種、アジャイルを使ったチーム開発を実践で学ぼう!


最後にはしっかり成果発表!


Welcome to Sabae!

新型コロナウイルス対策で開発した、オープンソースなウェブアプリ、教材としてどうぞ!
- COVID-19 Japan - 都道府県別 新型コロナウイルス陽性患者数
- VS COVID-19 #民間支援情報ナビ
- 時間割ガチャ - 教材オープンデータから自動生成する時間割
- 日本カラム地図 - TabularMaps Japan

links
- 楽しく続けるチーム開発のススメ、jigインターン版「スクラム」とHTML8行で作るVRアプリ - 高専カンファレンス in 明石3
- jigintern2019のブログ

仮想化技術Dockerを使って、APIサーバー、DBサーバー、フロントエンド向けサーバーを管理し、スクラムを使ったチーム開発で2日間を駆け抜ける、春のjigインターン!

忙しい高専生やエンジニアに向けて、3分で分かる技術コンテンツを、schema.orgを使った標準技術によってマークアップを推奨しつつ集約するサイト「sanma」のプロトタイプ発表! オープンソースとして、新型コロナ対策サイトと同様、GitHubに公開されています。


スクラムによる開発スタイル、今回は2日間しかないので、スプリントを1.5時間にするハッカソンスタイル。

日常の課題を、どういう切り口で解決するか、アイデアをいろいろ出し合い「ビジョン」としてまとめて、チームで合意。

全体を設計して、やることリスト(プロダクトバックログ)に落とし込んで、サーバー、フロント、クローラーとそれぞれのタスクとして分解します。


各スプリントのスタートは、それぞれがタスクをタスクかんばんのtodoに貼るところからスタート。着手するものは doing、コミットしてチェックしてほしいものは in review、終わったら done と付箋紙を進めて、進捗を見える化! 時々立ち上がって全体像を見るのもいい気分転換になったかも。


開発中。


タスクかんばんを前に、スプリントレビュー


お昼はしっかり、栄養補給!


いよいよ、発表!


そして、デモ!QRコードでそれぞれスマホからでも触ってもらって、質疑応答。


発表後は、しっかり、ふりかえり!よかったこと、課題、感謝に分けて振り返って、次のアクションにつなげます。

今回開発された「sanma」で使用された技術はこのようになっています。
- Infra: Docker
- DB: MySQL
- Back-end: Go
- Front-end: Vue.js (JavaScript)
- Crawler: Node.js (JavaScript)
- Source Management: src on GitHub

動かして見るには、ローカルで動かすためのブランチ、for-localhost をどうぞ!


simple-node-docker
Dockerを使ったチーム開発は、私も初めて!GNU Make と合わせて、Node.js を素で使う @terfno_mai スタイルで、シンプルなwebサーバー&チャットをDockerバージョンとしてまとめてみました。Dockerをインストールし、次のコマンドで動きます!

make ... Successfully built cae6f2d643d9 Successfully tagged simple-node-docker_front:latest Creating test-front ... done open http://localhost:8001/ echo see src on front/index.js! see src on front/index.js! echo type 'make d/down' to stop this docker type make d/down to stop this docker

Macや、Windowsや、Linux、ばらばらな個人の開発環境、デプロイ環境の差を気にすること無く、創ることに集中できてよい感じ。日々アップデートされる開発シーン、3分で得られるTechメディア、必要ですね!


おつかれさま!

tags
- 所要時間: 3分
- ジャンル: 3分でわかるTech記事

エンジニアには日々の情報収集が欠かせません。エンジニア足るもの、その収集方法自体を改善したくなりますね。初開催の春のjigインターン、テーマは短い時間で濃い情報収集。

開発開始!

ウェブサイトの入口といえば index.html ですが、Googleなどのサーチエンジンなど、プログラムによる自動閲覧(クローラー)のための入口は robots.txt。AllowとDisallowで辿っていいところとだめなところ、サイトマップ(sitemap.xml)が記述されています。 「サイトマップの作成と送信 - Search Console ヘルプ」によると、ひとつのサイトマップに50MB or 5万URLまで設定できるとのこと(オーバーする場合は sitemapタグ を使いましょう、500コまで)


長らく放置してしまっていた一日一創 robots.txt を更新!オープンデータな当サイト、もちろん全件 Allow です。今回サイトマップ(sitemap.xml)も追加! 2012年の一日一創はまだいれてませんが、アプリなど含めて、5,650ページあったようです。

人間のためのHTMLという言語は、プログラムでは理解しづらいので、統一されたボキャブラリー(語彙)を HTML5 の itemscope 属性を使って、意味を明示することができます。
例えば、映画を紹介するHTMLはこんな感じ。(参考、Getting Started - schema.org

<div itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">AKIRA</h1> <div>監督: <span itemprop="director">大友克洋</span></div> <div>ジャンル: <span itemprop="genre">SFアニメ</span></div> <div>出典: <a itemporp="url" href="https://eiga.com/movie/34459/">AKIRA : 作品情報 - 映画.com</a></div> </div>

itemscope と itemtype で、そのデータが何なのかを明示(この場合、映画 Movie)し、itempropを使って監督(director)、ジャンル(genre)、出典URL(url)を属性として明示しています。 「AKIRA : 作品情報 - 映画.com」のサイトでも、itemscope / itemtype / itemprop が使われているので、ソースを見てみましょう。

ブログ「一日一創」の記事は Article(記事) を使ってマークアップしました。

サイト検索が使えることも opensearch を使って、明示。ブラウザによってデフォルトの検索エンジンにしたり、いろいろと便利にしてくれます。検索の利便性も上げないと!

マシンリーダブルなウェブは、エンジニアフレンドリー!

tags
- 所要時間: 3分
- ジャンル: 3分でわかるTech記事

webの本質は共同作業、みんなの力をキュートに集めるウェブサービス、自分でも創ってみたいですね。 進化するプログラミングの世界、随分簡単にステキなサービスが作れるようになりました。

今回は、IchigoJam BASICからのステップアップにイチオシの言語「JavaScript」と便利ツール「Node.js」を使った「チャット」づくりのチュートリアル!

みんなの力を集めるには、ひとりひとりが持つコンピューターからデータを集約するために、いつも動いているコンピューター、サーバーが必要です。ひとまず、今使っている自分のパソコンでOKをサーバーにしてみましょう!

そんなサーバー上で動かすための便利ツール「Node.js(ノード・ジェイ・エス)」を使えば、サーバー上でもJavaScriptが使えます。

まずは Node.js をインストール!
(初心者の方へ、PDF WebサービスはじめのいっぽJavaScript / Node.js版
【Node.js入門】各OS別のインストール方法まとめ(Windows,Mac,Linux…) | 侍エンジニア塾ブログ(Samurai Blog) - プログラミング入門者向けサイト

GitHubから今回のチャットサービス「nodechat」をダウンロード。
ダウンロードしたファイル、まずは JavaScript での基本表示。console.logを使って、計算しましょう。(step0.js)

console.log(1 + 1)

こちら、コンソールを開いて、ダウンロードしたフォルダに移動し node コマンドを使って動かします。

node step0.js 2

1+1の計算ができました!

続いて、ウェブサーバーを作ります。(step1.js)

const http = require('http') const server = http.createServer() server.on('request', function(req, res) { console.log(req.url) res.writeHead(200, { 'Content-Type' : 'text/html; charset=utf-8' }) res.write('ハロー<br>req.url: ' + req.url) res.end() }) server.listen(8001)

こちらも同じように動かします

node step1.js

何も出ずに固まっている?エラーが出てなければ無事動いているはずです。ブラウザで http://localhost:8001/ を開いてみましょう。

ブラウザのアドレス欄、URLの末尾に数字やアルファベット足してエンター、アクセスしてみましょう(例:http://localhost:8001/abc)。nodeを実行した画面にも、ブラウザにも表示されますね。 端末側(クライアントと呼びます)からのデータを、サーバーで処理し、クライアントに返すがウェブの基本です!

※ localhostというのは自分のコンピューターを表し、コロンの後はポート番号といって窓口のID的なものです。同じ番号の窓口で複数のサーバーは起動できないので、必要であれば番号 8001 を好きな数に変えましょう(推奨:1024〜49151)。

step2.js で、static フォルダに入っているHTMLファイルや画像ファイルを返すようなプログラムを追記します。requireを使ってサーバー上のファイルを返す、簡単なウェブサーバー機能 simplewebserver.js を追加すると、画像つきのウェブページが見えるようになります。

step3.js で、クライアント側とデータをやりとりするAPIのベースを作成、/api/ で始まるパス名が来たら API として処理することにします。

server.on('request', function(req, res) { console.log(req.url) if (req.url.startsWith('/api/')) { const urlp = url.parse(req.url, true) res.writeHead(200, { 'Content-Type' : 'application/json; charset=utf-8' }) console.log(urlp.query) res.write(JSON.stringify(urlp.query)) } else { simplewebserver.serve(res, req.url) } res.end() })

そしていよいよ step4.js でチャットを実現するAPIを追加!
こちらがそのハイライト、サーバーのデータを操作しています。

let data = [] function serveAPI(fn, query) { if (fn.endsWith('/add')) { data.push(query) return data } else if (fn.endsWith('/list')) { return data } else if (fn.endsWith('/get')) { return data[query.idx] } else if (fn.endsWith('/clear')) { data = [] return data } else if (fn.endsWith('/remove')) { data.splice(query.idx, 1) return data } return { res: "OK" } }

5つのAPIを実装しました(addで追加、listで全部取得、getで1つ取得、clearで全件消去、removeで1つ消去)
こちらを動かし http://localhost:8001/chat.html を開きましょう。文字をいれて SENDボタンで、1行追記されます。別のウィンドウでも開いて一人二役チャットをやってお試しください。

ipconfig (Windows) や ifconfig (Mac/linux) を使って、今使っているIPアドレスを見つけたら、同一ネットワーク内にいる人や、Wi-Fiにつないだスマホから、IPアドレスで参加できます!(例、http://192.168.1.13:8001/chat.html )

chat.html 内は、何もフレームワークを使わないシンプルなJavaScriptでできています。

window.onload = function() { const fetchJSON = async function(path) { return await (await fetch(path)).json() } const show = function(data) { console.log("show", data) let s = "" for (let i = 0; i < data.length; i++) { const d = data[i] s += `<div><span>${d.ts}: </span><span>${d.text}</span></div>\n` } list.innerHTML = s } const update = async function() { const data = await fetchJSON('/api/list') show(data) setTimeout(update, 3000) } update() send.onclick = async function() { const text = encodeURIComponent(nickname.value + ": " + chat.value) const ts = Date.now() show(await fetchJSON(`/api/add?text=${text}&ts=${ts}`)) chat.value = "" } remove.onclick = async function() { show(await fetchJSON('/api/remove?idx=0')) } removeall.onclick = async function() { show(await fetchJSON('/api/clear')) } }

この状態だと、サーバーを止めるとデータが消えてしまうので、ファイルとして保存するようにしたのが step5.js です。require('fs')を使った違いを見てみましょう。

以上でチュートリアル終了です。おつかれさまでした!疑問に思ったところは、いろいろ変えたり、調べたりしてみましょう!分からないことあれば、@taisukef までメンション/DM大歓迎です!(より良いチュートリアルに仕上げたいので)

テキスト、絵、音声、画像など、どんなデータを集めて、どう見せる?
それはあなたの自由です!

実際にネット上のみんなに使ってもらうためには、常時動かしておくサーバーが必要です。 自宅のパソコンを動かし続けてもOKですし、Herokuで無料で始めてみたり、さくらインターネットのVPSや、ConoHa(1時間1円!)などで借りることもできます。


春のjigインターン、開始!


SCCにて、IchigoDyhookを使ったIchigoJamプログラミング教え方講座


はじめてIchigoJam BASICを触った高専生による改造されたかわくだりゲーム


こちらソース!


めがね会館、見学!明日から開発開始!

tags
- 所要時間: 3分
- ジャンル: 3分でわかるTech記事

links
- JavaScript(Node.js)編 src on GitHub
- PDF WebサービスはじめのいっぽJavaScript / Node.js版
- Vue.js x Node.js でつくろう、ウェブサービスの基本「チャット」ハンズオン

高専カンファレンス in 明石3」にて「スクラム」を使った楽しいチーム開発を発表。

「みんなで創ろう チーム開発手法、スクラム」 高専カンファレンス in 明石3 バージョン!


短いサイクルで「分析、設計、実装、テスト」を繰り返すのがアジャイル開発
(出展:デジタルビジネスの潮流とアジャイル開発~ビジネスとエンジニアの協働チームづくり~


ウォーターフォール vs アジャイル
時に年単位の開発期間で作られるウォーターフォール開発。後戻りはできないのでどうしても設計が保守的になり、あれもこれもと盛り込み勝ち。できあがった機能のうち7割は使われないとか・・・!?
とにかくまずは動くもの、必要最小限な機能による出荷可能なプロダクトを短いスパンで開発、デプロイし、利用者の意見や、反応を見つつ、どんどん改善していくのがアジャイル開発。
jig.jpのプロダクトはこのアジャイル開発で作られています。短期間でリリースし、最新技術も取り入れつつ、どんどん改善!


スクラムはアジャイル開発の一種、ビジョンをしっかりチームで握ることが超大事!
利用者価値を優先し、変化に柔軟に対応し、短期リリースを目指し、会話によるチームメンバー全員合意と、技術的卓越を原則とする。問題が発生しても個人対個人ではなく、問題対チーム全員という考え方で!
最終決定権を持つプロダクトオーナーを決め、一定期間(jigインターンでは4日間、1週間や2週間が一般的)でやることをプロダクトバックログとして積み、みんなでタスクとして分解するスプリント計画、タスクかんばんやバーンダウンチャートを使って進捗を関係者全員で共有する。


数時間でできる程度に分解したタスクを貼って、TODO、Doing、Doneと移していく。問題が発生したら小さく赤いプロブレム付箋を貼って、チームからの助けを借りるのも手。問題はみんなのもの、ひとりで悩まない。


朝会ではじまる一日の開発、動くものを目指して1スプリント終えたら、ふりかえり。
ふりかえりの手法として、jigインターンではKPT(Keep Problem Try)に加え、Kansya(感謝)を追加!
良かったことや、問題に対するチャレンジ(Try)をいくつか合意して、次のスプリントへ!
リズム良く気分良く、楽しく仲良くチーム開発!


今回のjigインターンでは3スプリント実施して成果発表会を迎えました。


オタクック 「お料理版AtCoder、毎週金曜日はアニメメシで勝負だ、オタクック! by jigインターン2019 とモダンクライアントVue.jsはじめのいっぽ


めしめーと 「Vue.js x Go x MySQL、外食の好みでつながる「めしめーと」 by jigインターン2019 とモダンなRDB環境構築手順


旬レシピ 「ご当地レシピのオープンデータと応用提案、卸売市場と栄養素データをマッシュアップしたお手軽料理ナビ「旬レシピ」 by jigインターン2019


詳しくは、jigインターンブログGitHubにあるリポジトリをどうぞ!
jigインターン、来年もお楽しみに!(興味がある人、@jiginternをフォローしておこう)


THETAで撮った会場の360度写真、ちょっとHTMLをかけば、VRアプリのできあがり!
VR #kosenconf_138akashi 2
PCでもぐりぐり回せるよ。スマホVRでもそこそこいい感じ。Oculusなどで見るとよりきれい!

<!DOCTYPE html><html><head><meta charset="utf-8"/> <title>VR kosenconf_138akashi</title> <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> </head><body> <a-scene id="scene"> <a-sky src="kosenconf_138akashi/akashi1.JPG" rotation="0 -120 0"></a-sky> </a-scene> </body></html>

たった8行のHTMLでOK!
Oculus Questなどを持っている人、このリンクをブラウザで見て、右下のメガネ型VRアイコンをクリック!
超お手軽VR開発、ぜひいろいろ挑戦してみてね!(50行マイクラ風など)


高専カンファレンス in 明石3!


会場は明石高専!


続VRのすゝめ by 鈴鹿高専 @MD_a_To_bl_o
VRチャットでの女性比率は何があると上がるのか?


知ってると得する切符の話 by @S0UL_EXPLOSION
往復割引切符は東京からでも買えるとは、知らなかった。


地域住民が行政を動かしたという話。
みんなのまち、学生だって住民、プログラミングでもデザインでも、いろんな力で貢献できる!
Code for KOSEN は、2013年、この階段教室から!(オープン&チャレンジ、殻を破る高専生! - 明石高専訪問


jigインターンでの毎日! by なべ


集合写真 by THETA撮影、切り出し
VR #kosenconf_138akashi 1
VRで見るならこちら。


懇親会スタート!


懇親会でのVR体験会、Oculus Rift S と Oculus Quest、2台体制


未来の食事、完全食COMPグミエディションも活躍。


高専生発の抵抗カラーコードかるた!


せっかく明石なので、明石焼き〆!
jigインターン番外編~幻の21日目~ - jigintern2019のブログ

links
- 高専カンファレンス
- 高専カンファレンス in 明石3 - 高専カンファレンス Wiki
- デジタルビジネスの潮流とアジャイル開発~ビジネスとエンジニアの協働チームづくり~
- スクラム (ソフトウェア開発) - Wikipedia

一昨日昨日に続き、食がテーマのjigインターン2019、成果発表会紹介3チーム目。
一人では続かない料理づくりのモチベーション。好きなアニメに登場するアニメメシ、時間を合わせて、みんなで作って、対戦すれば楽しくなるかも!?
その名は「オタクック」

チーム「オタクック」
たかげん(一関高専)、ぴ(木更津高専)、なべ(函館高専)、まこってぃー(明石高専)


作ってみたいな「のり塩すごもりチャーハン by 天気の子」
クラシル提供「天気の子」劇中登場レシピ のり塩すごもりチャーハン 作り方・レシピ | kurashiru [クラシル]


競技プロコン、AtCoderでおなじみ、レーティング!エンジニアなオタクは好きですね!
Twitterハッシュタグ #オタクック から、実際はじめても楽しいかも!?


フロントエンドは Vue.js、バックエンドは Flask by Python


Vue.js を使ったモダンなクライアント実装!(当初Golangで作っていたサーバー側ソース跡


Vue.js はじめのいっぽ
Vue.jsを本格的に使おうと決めました。はじめのいっぽから、axiosを使った非同期通信をシンプルに同期的に使って、JSONを読み込むまでの6ステップ。短いソースを見ながらお試しください!


以上、11高専から12名のjigインターン2019の成果発表会でした。
教えてくれないと嘆くのは早く卒業して、自分で学んで楽しむ高専生活!
日々改善される開発環境や手法に合わせ、毎年パワーアップする高専インターン。
来年もお楽しみに!

links
- jigインターン2019 成果物リポジトリ「jigintern - GitHub
- ブログ「jigintern2019のブログ

昨日に続き、食がテーマだったjigインターン2019、成果発表会紹介2チーム目。
今度は外食での悩みをモダンに解決するプロダクト。

チームnpm派「めしめーと」
箒コウモリ(香川高専高松キャンパス)、でみ(舞鶴高専)、watano(茨城高専)、はたはた(津山高専)


せっかくなら美味しいものを開拓したい外食。でも、レビューが当てになるとは限らない。そんな時、自分と味覚が近い人を頼ろう!
食べたものを投稿・チェックインすると、同じ好みな人をリコメンド。フォローすると優先的にタイムラインに並び、使うほどにヒット率上昇。


しゃもじをポインターとして解説する、はたはた。フロントエンドはモダンなフレームワーク Vue.js


GitHubのリポジトリから動かしてみました!(Foodmates-client (fixWholeDesignFinally) / server


幻の第4スプリントで、箒コウモリ(ホウモリ)がマージした、レスポンシブデザインバージョンで、スマホでもタブレットでも見やすい!


バックエンドは、Go言語(golang)で開発、データベースとしてMySQL、環境構築にDockerを使用。

ナウなDBの使い方を確認するため、Foodmatesのサーバー側を抜粋した、GoでMySQLにデータをいれてみるサンプル作成。
料理を、名前、価格、URLの3項目で、登録日時付きで、どんどん登録するシンプルなデータベースです。(src on GitHub)

package main import ( "fmt" "os" "time" "errors" "github.com/jinzhu/gorm" "github.com/joho/godotenv" _ "github.com/go-sql-driver/mysql" ) type Food struct { ID int `gorm:"primary_key" json:"id"` CreatedAt time.Time `json:"created_at"` Name string `gorm:"default:''" json:"name"` Price int `json:"price"` URL string `json:"url"` } var db *gorm.DB func InitDB() { USER := os.Getenv("MYSQL_USER") PASS := os.Getenv("MYSQL_PASSWORD") PROTOCOL := "" DBNAME := os.Getenv("MYSQL_DATABASE") CONNECT := USER + ":" + PASS + "@" + PROTOCOL + "/" + DBNAME + "?charset=utf8mb4&parseTime=True&loc=Local" var err error db, err = gorm.Open("mysql", CONNECT) // github.com/go-sql-driver/mysql if err != nil { panic(err.Error()) } db.LogMode(true) db.AutoMigrate(&Food{}) } func TruncateTables() { rows, err := db.Raw("SHOW TABLES").Rows() if err != nil { panic(err.Error()) } defer rows.Close() for rows.Next() { var table string if err := rows.Scan(&table); err != nil { panic(err.Error()) } db.Exec("TRUNCATE TABLE " + table) } } func GetDB() (*gorm.DB, error) { if db == nil { return nil, errors.New("can't get database") } return db, nil } func Finalize() error { err := db.Close() return err } func ShowAllFoods() { db, err := GetDB() if err != nil { fmt.Println(err) return } var foods []Food db.Table("Foods").Find(&foods) fmt.Println(foods) } func AddFood(name string, price int, url string) error { db, err := GetDB() if err != nil { return err } db.Create(&Food{ Name: name, Price: price, URL: url, CreatedAt: time.Now() }) return nil } func main() { err := godotenv.Load(".env") if err != nil { fmt.Println("Error loading .env file") return } InitDB() TruncateTables() AddFood("サラダ焼", 120, "https://www.sanrokusyoten-316.co.jp/products.html") AddFood("サバエドッグ", 280, "https://www.meat-sasaki.com") AddFood("眼鏡堅麺麭", 864, "http://echizen-yumekobo.com/?pid=52337987") ShowAllFoods() }

GORMを使うと、Go言語の構造体として定義したFoodを、db.AutoMigrate(&Food{})で呼び出せば、いい感じにテーブル生成をやってくれます。*GORM - ORM (Object-relational mapping / オブジェクト・リレーショナル・マッピング) for Go

MySQLのセットアップ、Mac編(参考、Mac へ MySQL を Homebrew でインストールする手順 - Qiita

brew update brew install mysql

MySQLにデータベースを1つ作成

mysql -uroot -p [dbrootpass] create database [dbname] create user '[dbuser]'@'localhost' identified by '[dbpass]'; grant all on *.* to '[dbuser]'@'localhost'; GRANT ALL PRIVILEGES ON [dbname].* TO '[dbuser]]'@'localhost'; exit

Go言語の設定ファイル「.env」にDB設定を記述

cat > .env <<EOF MYSQL_USER=[dbuser] MYSQL_PASSWORD=[dbpass] MYSQL_DATABASE=[dbname] EOF

Go言語のライブラリを取得

go get github.com/go-sql-driver/mysql go get github.com/jinzhu/gorm go get github.com/joho/godotenv

あとは動かすだけ!

go run fooddb.go [{1 2019-09-08 13:24:51 +0900 JST サラダ焼 120 https://www.sanrokusyoten-316.co.jp/products.html} {2 2019-09-08 13:24:51 +0900 JST サバエドッグ 280 https://www.meat-sasaki.com} {3 2019-09-08 13:24:51 +0900 JST 眼鏡堅麺麭 864 http://echizen-yumekobo.com/?pid=52337987}]

MySQLを初めて使ったのはもう20年前くらいかも・・・。
環境構築も、ライブラリも、便利になっていい感じですね!

jigインターン2019、ついに最終成果発表会の日。3チーム、1作品ずつマッシュアップしながら紹介します!
まずは鯖江市特産野菜「吉川ナス」を使ったレシピのオープンデータ化が決まった「旬レシピ」から。

チーム「やばいわよ!!」
たかめろん(長野高専)、ふっけー(北九州高専)、えふ(長岡高専)、Dry(明石高専)の4名チーム!


ターゲットは学生や独身の料理初心者。外食ばかりは栄養的にも金額的にも難があるけど、特に食べたいものがないけど、おいしく安く栄養あるものを食べたい人。


そこで「旬レシピ」
スーパーに入ってスマホを取り出す開くだけのシンプル操作。その時点、その場所での旬を使った安くて簡単なレシピを写真で紹介!


「旬」マークがつきの買い物リストにもなっている食材リスト。自然に自然が身につきそう。
ついでに家の在庫量とも連動させるとより便利かも。


使用したデータとAPI。オープンデータ化の必要性は作るほどに見えてくる。まずは地元を自力でオープンデータ化しよう!


今回からの初企画、展示タイム。実際に作った作品を実際に触りながら(壊しながら?)、より深い質疑応答タイム。

旬レシピは、GitHubでオープンソース!(jigintern/Season-Foods-Navi at develop)
早速気になる、Node.js でスクレイピングして作ったというデータをチェック!3MBのJSONがありました。
スクレイピングしたソースは、こちら"GetFoodsNutrient.js"、データが大きくなりすぎないように栄養素を抜粋したとのこと。

完全食COMPとの比較もしたいので、ビタミンAの分類や、表記方法の違いを調整して栄養素完全版へとリミックス! 「GetFoodsNutrientJSON.js
Node.js をいれ、npm install cheerio-httpcli でスクレイピング用のライブラリをセットアップして、node GetFoodsNutrientJSON.js でテスト実行。

$ node GetFoodsNutrientJSON.js { food: '乳類/(液状乳類)/普通牛乳', info: [ { name: '可食部', value: '100', unit: 'g' }, { name: 'エネルギー', value: '67', unit: 'kcal' }, { name: 'たんぱく質', value: '3.3', unit: 'g' }, { name: '脂質', value: '3.8', unit: 'g' }, { name: '炭水化物', value: '4.8', unit: 'g' }, { name: 'ナトリウム', value: '41', unit: 'mg' }, { name: 'カリウム', value: '150', unit: 'mg' }, { name: 'カルシウム', value: '110', unit: 'mg' }, { name: 'マグネシウム', value: '10', unit: 'mg' }, { name: 'リン', value: '93', unit: 'mg' }, { name: '鉄', value: '0', unit: 'mg' }, { name: '亜鉛', value: '0.4', unit: 'mg' }, { name: '銅', value: '0.01', unit: 'mg' }, { name: 'マンガン', value: '', unit: 'mg' }, { name: 'ヨウ素', value: '16', unit: 'μg' }, { name: 'セレン', value: '3', unit: 'μg' }, { name: 'クロム', value: '0', unit: 'μg' }, { name: 'モリブデン', value: '4', unit: 'μg' }, { name: 'ビタミンA', value: '38', unit: 'μg' }, { name: 'ビタミンD', value: '0.3', unit: 'μg' }, { name: 'ビタミンE', value: '0.1', unit: 'mg' }, { name: 'ビタミンK', value: '2', unit: 'μg' }, { name: 'ビタミンB1', value: '0.04', unit: 'mg' }, { name: 'ビタミンB2', value: '0.15', unit: 'mg' }, { name: 'ナイアシン', value: '0.9', unit: 'mg' }, { name: 'ビタミンB6', value: '0.03', unit: 'mg' }, { name: 'ビタミンB12', value: '0.3', unit: 'μg' }, { name: '葉酸', value: '5', unit: 'μg' }, { name: 'パントテン酸', value: '0.55', unit: 'mg' }, { name: 'ビオチン', value: '1.8', unit: 'μg' }, { name: 'ビタミンC', value: '1', unit: 'mg' }, { name: '飽和脂肪酸', value: '2.33', unit: 'g' }, { name: '多価不飽和脂肪酸', value: '0.12', unit: 'g' }, { name: 'コレステロール', value: '12', unit: 'mg' }, { name: '糖質', value: '4.7', unit: 'g' }, { name: '食物繊維', value: '', unit: 'g' }, { name: '食塩相当量', value: '0.1', unit: 'g' }, { name: 'アルコール', value: '', unit: 'g ' } ] }

牛乳100gの栄養素が取得できました!(乳類/(液状乳類)/普通牛乳 - 一般成分-無機質-ビタミン類-アミノ酸-脂肪酸-炭水化物-有機酸等 - 文部科学省)


人間に必要な栄養素 オープンデータアプリIchigoJam研修@大塚製薬 の記念に作った、ゆるゆる動く栄養素アプリ。
人間に必要な栄養素 CSVオープンデータ」もどうぞ!

そういえば、吉川ナスの栄養素のどのように測定したらいいのだろう?
福井高専、物質工学科に相談してみよう!

links
- 吉川ナス – めがねのまちさばえ 鯖江市

今年もスタート、jig.jpの夏、高専インターンの夏!

今年の宿は、鯖江市の頭部、河和田地区にある改装古民家、JAPAN CRAFT HOUSE、一棟借り!


全国11高専から無事集結、12名の高専生


ウェルカムスピーチ!創るを楽しもう!


通称、ドラえもんの寝床、他、4人部屋と2人部屋あり


どこまで活きるか改装古民家キッチン解説


めがね会館にて今年のメンター陣と談笑!


恒例、秋吉!創ってみたいもの、そのヒントとなる、困っていることを聞いて混ますが、なかなか難しい。


3週間、よろしく!


閉店間際のスーパーにて


体験しなくちゃわからないモバイルVRの衝撃「ぴ」を撮る「でみ」


jigintern2019 - 参加高専マップ
12名のインターン生の活躍、こちらにまとめていきます!(src on GitHub
高専オープンデータjigintern2019membersオープンデータ
緯度経度が空欄な高専キャンパスオープンデータ、そういえば、敷地が広い高専、入り口を間違えて行くと大変なことを忘れてました。困ったことは忘れがち。それぞれ出身校データへのコントリビュート、おねがいします!
アプリの改造歓迎、プルリクの練習にお気軽にどうぞ!

jig.jpインターン 2019 スタート!! - jigintern2019のブログ

前々週の月曜日にスタートした、高専インターン2018もあっという間に最終日!
4チーム16人、4プロジェクトの成果発表!最高のチームワークを発揮し、ステキなプレゼンを決めてくれました!

修了証書&サイン入りIchigoJam教科書を授与。


jig.jpインターン報告会2018 decorated by KOSEN interns!


「カササス」
遠めの通勤通学、歩く場所の天気を元に、シンプルに傘の必要可否を提示するサービス。
インターン歴史中初の事態、台風による自宅作業の日をうまく利用シーン撮影に使う貪欲さ。
IoT化したり、より細かな情報に対応したりと夢を広げつつ、まずは、自分が超便利に使えるようワガママ仕様で自分向けにデプロイすべし。


「にゃーん」
インターネットネイティブ世代のストレス解消にSNS。でも、うっかり炎上は困るので、いっそ猫語しか使えないSNSをという斜め発想。
どんなネガティブ発言も受け止め、サーバーに送る前に猫語に変換するプライバシー重視設計。投稿されるのは「にゃにゃーん」だけ。誰かが何か言ってるなという空気感を感じられる、サブSNSに良いのかも?
Twitterでは廃止されてしまったUserStreamをAPIもろとも開放し、オープンデータなネコ画像に癒やされつつ、グローバルにつながる猫語ネットワークに平和の緒があるかも!?


「ともたび」
北は八戸、南は沖縄。遠く離れたココ鯖江の地で過ごす3週間。勝手のわからない場所でも、シンプルなチャットでつながるローカルコミュニケーション。
わざわざ来てくれる人に何かしてあげたい地元の人と、せっかくなら地元の人のオススメを知りたい旅人との価値交換による価値創造を最大化しよう!


「アライブ」
水害を知らせる火災報知器的なデバイスと、水位オープンデータとつなぐ、行政向け管理サービス。
エリアメールでは広すぎるため使いづらい水害の警告。とはいえ、避難遅れは命に関わる重大事。安価な専用IoTデバイス化することで、安全安心な町づくりに貢献。
大きなボタンを使ったシンプルなインターフェイスが特徴。


鯖江市の取り組みを紹介してくれた鯖江市役所の牧田さんから、子供、お年寄り、障がい者、インクルーシブで誰にでも優しいデバイスづくりに可能性ありと、牧田さんからアドバイス。


永平寺町エボリューション大使のあみるも観に来てくれて、シリコンバレーでも通用するものありとうれしい講評。 あみるのお気に入りは「ともたび」グローバル対応して、永平寺町でもやりたいとのこと!


こちらも成長させてもらえるインターン!


おつかれさま!


懇親会にて、不完全食がテーマのタンパク質マシマシ、jigカレー#2の材料。


デプロイした結果、カレー味のjigエビという評価。


インターン参加&来鯖、ありがとう!また会いましょう!


インターンの総仕上げの全員ブログ、楽しみにしてるよっ
jigintern2018’s diary

今年のプロジェクトで人気だった、webアプリ用フレームワーク、Nuxt.js(ナクスト ジェイエス)。
ひとまずセットアップと、簡単なn進数計算アプリづくり。

良い機会なので、はじめのいっぽ、クライアントも軽量で、シンプルで、検索エンジン相手の実装も簡単そう。
そろそろブログかえなあかん(福井弁)と思っていたところなので、ちょうどよいかも

<template> <div id="app"> <h1>bin-oct-hex - nuxt.js test</h1> <input v-model="num"> <p>{{ num }} は、2進数で {{ bin }}</p> <p>{{ num }} は、8進数で {{ oct }}</p> <p>{{ num }} は、16進数で {{ hex }}</p> <ul id="src"> <li>APP: CC BY <a href=https://fukuno.jig.jp/2237>fukuno.jig.jp</a></li> <li>Framework: <a href=https://ja.nuxtjs.org/>Nuxt.js</a></li> </ul> </div> </template> <style> body { margin: 5vw 5vh; } h1 { margin: 1em 0em; } input { font-size: 150%; } #src { margin: 1em 0; padding: 0; list-style-type: none; } #src a { color: gray !important; } </style> <script> export default { data () { return { num: 15, } }, computed: { bin() { return parseInt(this.$data.num).toString(2); }, oct() { return parseInt(this.$data.num).toString(8); }, hex() { return parseInt(this.$data.num).toString(16); }, }, head: { title: "bin-oct-hex - nuxt.js test" } } </script>

創るほどに広がる可能性、インターンで感じてくれていたなら、今日の日を終わりではなくスタートに!

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