ChinoDuino(Chino × Arduino)

自発性のないプログラマーがArduinoと出会って悪戦苦闘する様を綴っていく⇒今はいろいろ(^^;

SORACOM UG 信州 #1(Chino × SORACOM UG)

昨日(9/23)、伊那で開催されたSORACOM UG 信州 #1 に参加しました!

soracomug-tokyo.connpass.com

SORACOM Airを使ったハンズオンをRaspberry Piを使ってやるということで、ホコリをかぶっているRaspberry Piをまた触るきっかけにしたいという思いもあり(^^

【目次】

会場

会場はADSL実証実験20周年を迎える伊那市伊那市有線放送 いなあいネットさん。

f:id:chinoppy:20170924175625j:plain:w300

SORACOMから

  • maxさん
    • SORACOMのことやLTのこと、いろいろとお話ししてくれました!(資料はこちら
    • それと僕は3月11日 JAWS-UGの転職発表の場にいましたw
  • なおさん
    • ハンズオンでいろいろとフォロー、SIMの説明などいろいろ教えていただきましたー

発起人

  • 沖さん
    • CoderDojo安曇野にも関わったり本当にいろいろと考えたり、している方。私はinahackでお知り合いになりましたー
  • 橋本さん
    • なにやらタッチパネルでおもしろいことを考えている方。信州ベンチャーコンテストで賞をとられたそうです!すごいっ!
  • 鄭さん
    • この方もいろいろしている方。本当にいろいろ。いろいろなことに通じていて、いろいろなことの黒幕らしい・・・( ̄ー ̄)
  • 宮下さん
  • 小穴さん

参加者

全員ではないですが、いろいろな方がいましたよw

  • 上田から原チャリで参加したおじいちゃん
    • イベント当日の朝5時くらいに「LPWA」などのキーワードで検索し、本イベントをみつけ参加
  • 富山から参加の会社員の方
    • なおさんが送っているDMメール?が送られてきて、「SORACOMってどんなものが」と思い参加したそうですw
  • 市議の方
    • 急遽、市議の方がきて、一緒にハンズオンしました。Raspberry Pi、超音波センサ、SORACOM使ってました。

ハンズオン

沖さん、maxさんのお話しのあと、

SORACOMのサービスは以下を使用し、ハンズオンしましたー

  • SORACOM Beam
  • SORACOM Harvest

ハンズオン資料はこちら

SORACOM bootcampという、技術者向けオンラインセミナーもあるそうです!うれしい(^^

LoRaWAN™ | SORACOM Bootcamp - YouTube

  • ハンズオンの様子

f:id:chinoppy:20170924193437j:plain:w300

  • 超音波センサ + Harvest

f:id:chinoppy:20170924193940j:plain:w300

ってことで

ハンズオン中に、AmazonUSBドングル注文しましたー

・・・次の日、キタ━━━━(゚∀゚)━━━━!!

f:id:chinoppy:20170924194532j:plain:w300

そして、早速、ほこりをかぶっていたchinopi(Chino の Raspberry Pi)に装着

f:id:chinoppy:20170924201118j:plain:w300

まだ、設定などしていないので、SORACOM Airで通信していませんが。。。少しずつだと思いますが、触っていきますー

maxさん、なおさん、沖さん、橋本さん、参加者の方ありがとうございました。ハンズオンを通して、SORACOMのサービスなど理解深まりました(^^ お疲れ様でした!次は◯ーらぼで開催予定です!

そうそう、最後に「SORACOM Beeeeeeeeeeeeam」で記念撮影しましたー

f:id:chinoppy:20170924202856j:plain

Chino × PyCon JP 2017 × CodeIQ

9月8日(金)、9日(土)に東京で開催された「PyCon JP 2017」

pycon.jp

9月16日(土)にこちらも東京で開催された「学びの秋!エンジニア最先端に触れて学ぶITフェス by CodeIQ #codeiq39」

atnd.org

に参加してきましたー

印象に残ったところを備忘録的に書いていきます!

【目次】

PyCon JP 2017 − OUTPUT & FOLLOW −

「Early Bird」のチケットは公開されてから数時間で売り切れになるなど、開催前から注目されていることを実感しました。

僕は今年で、3回目の参加になりますが、参加者も年々増加し、connpassの申し込み人数は620人?!

恒例の集合写真はこんな感じです(^^;

Pythonが注目されていることを再認識しました!

はじめてブース出展しました

今年は弊社「株式会社 日本システム技研(JSL)」のブースを出展しました!(スポンサーは去年から)

弊社からの参加者で順番にブース番しました。

  • なんで「Nagano」なんですか?
  • ポスターかっこいいですね
  • 私も長野出身なんですよー

など、声をかけてくれたり、ブースにたくさんの人が寄ってもらい本当に感謝です。

scouter / コンカツアプリ

出展したアプリです!

構成

f:id:chinoppy:20170918173148p:plain

scouter

こんな感じのアプリです

  • ソーシャルログイン
  • ログインしたソーシャルの情報からパワーを計測
  • ランキングにして、上位の方に長野っぽい景品があたる!
  • 計測時に付加されたIDをブースで伝えると、HoloLensでちょっといいものがみれます!

HoloLensの方が目立っていたかもしれませんが、サーバ側でDjangoを使ってます!

コンカツアプリ

こちらもこんな感じのアプリです

  • ソーシャルログイン
  • プロフィールを入力
  • そのプロフィールへのURLをQRコードで発行
  • 懇親会でQRコードをスキャンし、話しかけるきっかけに使う!

こちらもサーバ側でDjango使ってます!

いろいろとこれからもブラッシュアップしていきたいですが、、、弊社の説明などをしていると、時間的にひとつのアプリしか説明ができませんでした(^^; それと、やっぱり自社製品の出展もしたいなぁっと感じました(^^

基調講演、トーク

今回の基調講演はこちら

1日目はブース準備できけませんでした。。。2日目はきくことができ、大変勉強になりました。

Pandasコアコミッターが語る 今日から誰でも始められるOSS活動のススメ

タイトルの通り、これからOSS活動を始めたいひとにぴったりの内容でした。

  • 今日からできること:気になるプロジェクトをWathしてみる!
  • バグ以外にもドキュメント不備などもあり、すごく簡単なものからやってみる

など、わかりやすく丁寧な説明でわたし的には今回、一番勉強になりました。

ちなみにPandasは「2000」くらいissuesがあるそうです。。。

Issues · pandas-dev/pandas · GitHub

動画はこちら

youtu.be

トーク

今回、Pythonを使った仕事を始めて1年くらいになり、携わっている技術や興味のあるものを中心に聞きました。 が、、、やはり、まだまだ未熟でちゃんと理解できなかったところなどあるので、動画みたりしてまた調べたり試したりしていこう!

各基調講演、トークは以下でみれます!

PyConJP - YouTube

ポスターセッション

PythonBootCamp

今回のポスターセッションでは、6月にGEEKLAB.NAGANO(長野市)でも開催したPythonBootCampがでていました。

pycon.jp

そして、講師、スタッフ、各地のスタッフで記念撮影しました!

懇親会では、香川の現地スタッフの方が会いにきてくれたり、参加してくれた学生がPyCon JPにきてくれたり、普段、遠くにいる方たちと会えたりと、本当に長野市でも開催してよかったです(TT)

書籍

PyCon JPでは書籍販売もあり、サインもらえたり、特典がつくかも!Oreilly本も多数ありました!

他にも売っていましたが、2冊ほどご紹介

スラスラわかるPython

www.shoeisha.co.jp

はじめてプログラミングを学ぶ人向けで、難しいクラスの説明ははぶいているそうです!

Pythonをやりたいひと以外にも、Pythonでデータ解析とか、何かやるためにPythonの基本的なことを学びたい人にも最適だそうです!

Pythonエンジニア ファーストブック

gihyo.jp

開催中には買えなかったのですが、今回、ブース出展の用意などでいろいろと感じたことがあり、もう一度、基本的なことを、振り返ろうと思い買いました!第1章のPythonの動向については、なるほどーと思えることがあったりと楽しく読ませてもらってます!

今回は、ブースを出展したこともあり、前回より多くの方たちとお話しすることができ、とても刺激になりました。香川の方に会えたり、長野と沖縄の学生が出会ったりと、また来年、再開できることが楽しみです(^^ そして、長野の方もたくさん参加していることがわかりました。技術的に未熟なところばかりなので、基本的なところからやり直していこうと思いました(^^;

ちなみに、今、fitbitをつけているのですが、9月8日はずっと心拍数が高くなっていたことがわかりびっくりしました。。。(普段は60くらい)

f:id:chinoppy:20170918193835p:plain:w200

学びの秋!エンジニア最先端に触れて学ぶITフェス by CodeIQ #codeiq39

こちらは弊社がスポンサーとなり、ブース出展することになり、初参加。

ブース

出展するアプリ以外は、先週のPyCon JPと同じ。

伝説の剣で抽選会

のんのんびよりっていう、アニメの女の子がもっていた、伝説の剣(枝)を振ると、抽選し1位〜3位の方には景品ありです!はずれのひとは、うまい棒チロルチョコ

構成

f:id:chinoppy:20170918195413p:plain

  • MESHの動きタグがついている伝説の剣を振る
  • IFTTT経由でサーバ(Django)にPOSTして抽選!
  • 各アプリなどに抽選結果を連携
    • HoloLensでは順位を表示
    • タブレットに順位表示(firebase + vue)
    • 1位〜3位の場合はTwitterでツイート
    • 1位〜3位の場合はIFTTT経由でMESHのGPIOに通知を送り、モータを回して宝箱の鍵を解錠

モータで解錠の部分については、IFTTTからMESHへの通知でラグがあったり、モーターがまわらなかったりとちょっとシステム的に微妙になってしまった。。。抽選部分も微妙でした。。。

それでもいろいろな方に試してもらい、ひどいシステムと言われたりもしましたが、やっぱり展示するものは単純なものにして、わかりやすくすることは大事だぁっとPyCon JP時のときも含め思いました。自己満足はいけないですね(^^;

プログラムは聞きませんでしたが、有名な方のお話しが聞けたり、懇親会も豪華で無料のイベントなのはお得だなぁと思いました。でも、ちょっと豪華すぎて、有料にしてもよいのでは?とも思いました。その分、どこかにしわ寄せがいってしまうような気がしました。。。

次は技術的なブログを書こう(・・書けるかな・・・)

第2回 伊那市 LoRaWAN ハッカソンを通じて伊那市を知れました(Chino × 伊那市)

8月26日、27日に開催された第2回 伊那市 LoRaWAN ハッカソンに参加してきました。伊那市のこと、今までより知ることができたので、そのあたりと、本ハッカソンで使用したツールについて書きたいと思います。

参加して一番感じたことは、地元の方(いなあいネットの方、伊那市の方、JA上伊那の方、伊那商工会議所の方など)が新しいことをどんどんとりいれて、地元の問題を積極的に解決していこうという前向きな姿勢をすごく感じました。暖かく迎えてくれ、接してくれて、課題についての質問など本当に親身になって応対していただきました。

本当にありがとうございました。

また、スタッフの方、参加者の方本当にお疲れさまでした!!!

【目次】

伊那市のこと:フィールドワークを通じて

少しでも伊那市のことを知ってもらえるかなと思い、まずはフィールドワークで訪れたところの紹介をしていきたいと思います!普段、行くことのないところにも訪問でき、すごく刺激になりました。

バスに乗り各施設等を訪れながら、課題のヒアリングを行いました。

漆戸醸造株式会社

地酒「井の頭」の酒蔵です。

課題としては麹室の温度管理等。蒸したお米から麹を作る場所です。

JA上伊那の方から、麹室は清潔にしなければいけないので、あまり見せてくれないとお聞きしました。貴重な体験をさせていただきました。

ちなみに酒蔵見学のご注意いただきたいことにも記載がありました。

試飲できなかったのは残念でした(TT)しかも買ってくるのも忘れた・・・

株式会社 ニチノウナーセリー

課題はハウス内の温度管理等。このあたりは、冬の夜間は−10℃を下回るくらい冷え込むそうです。このため、ボイラーがハウス内に設置されていて、暖めているそうです。こんななかボイラーが故障してしまうと大変(>_<)

例えば、ボイラーが故障したことを知らせる装置があれば便利。でも難しいところは、ボイラーは「暖めるために稼働し、暖まると停止⇒温度が下がったらまた暖めるために稼働・・・」となるため、停止しているから故障ということにはならないそうです。。。

もともとは、シクラメンを栽培していたそうです。数多くの受賞歴があり、”日本一のシクラメン農家”と紹介されることもあったそうです!

伊那市土砂災害警戒区域

警戒区域の一部を訪れました。そういえば、自分の地元の防災マップとかみたことないなぁって気がつかされました・・・(–;

課題は土石流、土砂崩れの事前の予測、避難指示の必要性などの判断。

伊那市の防災マップはこちら 伊那市防災マップ:伊那市公式ホームページ

土石流はどこかで、水がせき止められ一気に流れ出すことにより発生するそうです。せき止められそうなところは多々あり、しかも、木が倒れてせき止められる可能性もあるため、予測が難しいそうです。

ちなみに生物の動きをみて予測するのもありかも・・・

それと元危機管理課の方が、移住する方にも危険なところはちゃんとお知らせしたり、災害伝承みたいなことも伝えて、移住するかの判断の材料にもできたらよいとお話ししていました。

みはらしファーム

miharashi-farm.com

ここは年間を通して収穫できたり

収穫したもので手作りできたり

いろいろできます!温泉があったり、バーベキューできたりする観光農園です。

ファミリーなどで訪れるのに最適です!

いちご園は元旦から営業です!

課題としては、施設が広いのでお客さまの動向監視(どこで何をして楽しんでいるかなどの可視化)、外にあるブルーベリー園の害虫被害など。

ちなみにイベントでキューピィーちゃんがいましたw

やはり、知っている方、地元の方などの方と一緒にまわると、いろいろなことが知れますね!

ありがとうございました(

そうそう、伊那はローメンが有名なので訪れたときは食べてみてくださいー

f:id:chinoppy:20170827185716j:plain

次は今回、使用した技術、ツール、システムのご紹介です。

開発ツール等

ハッカソンの技術情報はこちら

技術情報その1:ハッカソンのベースシステム

技術情報その2:enebularによるLoRaWANデータの処理

SORACOM LoRaWAN

soracom.jp

伊那市河岸段丘を活かし遠くへとばすことができるそうです!

ARM mbed プラットフォーム

codezine.jp

enebular

uhuru.co.jp

Platio

plat.io

ブラウザで本当に簡単にiPhoneiPadアプリが作成できちゃいます!

使い方等はこちらにもあります!

Platioで簡単に作れるセンサー活用モバイルアプリ 第一回

Platioで簡単に作れるセンサー活用モバイルアプリ 第二回

Platioで簡単に作れるセンサー活用モバイルアプリ 第三回

MotionBoard

BIツール MotionBoard IoTデータもリアルタイム可視化 | ウイングアーク1st

ブラウザで作成できるBIツールです。 驚いたのは、これを使ってPepperを遠隔から操作、開発できちゃうそうです!

vimeo.com

Toami

www.m2m-cloud.jp

便利なツールを使い、どのチームも6時間位でデモができるレベルまで開発できていました! 私はPlatioで開発しましたが、ノンプログラミングでアプリができてしまい本当にお手軽だと驚きました。 プログラミングのみしているとそのうちお仕事がなくなっちゃうと、再認識しました。。。(^^;

次回は、10月21日(土)、22日(日)に開催決定しています。なんと、月曜日は松茸狩りに連れて行ってもらえる?!そうです!

この近辺でドローンフェスも開催されたりと伊那市が熱いです!

www.dronefes-inavalley.jp

興味を持たれた方はぜひ、訪れてみてくださいー

私はずっと、あわあわしていましたが、、、刺激があり、有意義な2日間でした。

ありがとうございましたーーーーー

劇場版!!ぎーらぼ伝説の剣 〜ギーラボオールスター集結〜

4月22日にGEEKLAB.NAGANOで開催した「オープンハードカンファレンス 2017 Nagano」内で発表した「劇場版!!ぎーらぼ伝説の剣 〜ギーラボオールスター集結〜」の紹介です〜
みんでつくって発表はいいものですね〜

こちらの発起人のブログもぜひ、みてください〜

farewell-work.hatenablog.com

【目次】

概要

発起人はこちら

farewell-work.hatenablog.com

現実と仮想空間を繋げたい
現実でしたことが仮想空間に、仮想空間でしたことが現実に影響を与える感じ

ってことで、発起人がVR/MR側の担当で他
Pepperさわっているひと
組込みできるひと
動画つくったりできるひと
が集まって作りました!

全体像

f:id:chinoppy:20170424225837p:plain:w200

  • 流れ
    • 美術館の絵に閉じ込められた精霊を助けよう(仮想現実
    • 助けた精霊が宿るカードをタッチしよう(現実
    • タッチしたカードが宝箱を攻撃(仮想現実
    • 最後に剣を伝説の剣を振って宝箱を開けよう(現実

まずはギーラボオールスターの紹介

Pepper

f:id:chinoppy:20170422105320j:plain:w200

普段はひとりさみしくぎーらぼにいますが、、、(^^;
やっぱりイベントになると子どもたちの人気を総なめです(^^

Oculus

f:id:chinoppy:20170430130918p:plain:w200

最近、放置ぎみでしたが今回、復活です!

Hololens

f:id:chinoppy:20170430130550p:plain:w200

今回、伝説の剣では登場しませんでしたが、今、注目度ナンバーワンです

MESH

f:id:chinoppy:20170426192029j:plain:w200

Hololens同様、最近仲間入りしました。
ひとつのセンサ+Bluetoothがセットになったブロック形状の電子タグです。
Bluetoothが既についているので端末にすぐペアリングでき、MESHアプリでいろいろ試せます。

Raspberry PiFelicaカードリーダー + Felicaカード

f:id:chinoppy:20170426191937j:plain:w200

今回はRaspberry Pi 3 Model Bを使いました。
Wifiが標準で搭載されているのでネットに繋げることが簡単。
Bluetoothも搭載されているのでMESHにも繋げてみたい(まだできていない・・・)

カードはこちら

  • 精霊
    • バブル
    • Pepper
    • Unityちゃん(公式キャラクターだそうです〜)

f:id:chinoppy:20170426191801j:plain:w200 f:id:chinoppy:20170426191742j:plain:w200

番外

  • 宝箱

f:id:chinoppy:20170414125215j:plain:w200

ロッカーに眠っていた(^^;

  • 伝説の剣

f:id:chinoppy:20170422131540j:plain:w200

最後の鍵

さあ、ゲームの開始です

オープニング動画

オープニング動画も披露しました〜
2日間という驚異的な速さでつくってくれました。
諸事情で載せることはできませんが、メインキングはこちら↓w

f:id:chinoppy:20170419203541j:plain:w200 f:id:chinoppy:20170419203546j:plain:w200

美術館の絵に閉じ込められた精霊を助けよう(仮想現実

oculusをかぶると

f:id:chinoppy:20170430130918p:plain:w200

こんな美術館が現れて、絵に閉じ込められた精霊を助けよう

助けると精霊の解除情報(カードの「IDM」情報)がサーバへ送られます

助けた精霊が宿るカードをタッチしよう(現実

解除されたカードをカードリーダにタッチ!

  • 画面へ情報が送られます
    • Raspberry Piからカードの「IDM」をサーバへ送る
    • サーバ側で、カードに紐づく精霊情報を画面側に送る
    • 画面側で宝箱へ攻撃

タッチしたカードが宝箱を攻撃(仮想現実

サーバ側からの精霊情報を元に攻撃!

  • バブル
  • Peppr

画面で攻撃のほか、実物のPepperも動きます!
↓の超電磁スピンのように(あくまでイメージですw)

こちらのブラウザからJavascriptを使ってPepperを操作できるものを使って、Pepperの攻撃時に実物のPepperを動かしました

www.lifull.blog

  • Unityちゃん

そしてクリアすると!

最後に剣を伝説の剣を振って宝箱を開けよう(現実

動きタグがついている剣を振る

f:id:chinoppy:20170430145952p:plain:w200 f:id:chinoppy:20170430155829p:plain:w100

剣を振ったのを検知して、GPIOタグの電源のON
モーターが動いて鍵を開けるしくみ

f:id:chinoppy:20170430161004p:plain:w100 f:id:chinoppy:20170430161300j:plain:w100 f:id:chinoppy:20170430160919p:plain:w200

宝箱を開けると明るさタグが宝箱の蓋の裏についているので、明るくなったら音楽が鳴るようになっています!

f:id:chinoppy:20170430161710p:plain:w100

ソースはこちら
ビジュアルでコーディングできます!

f:id:chinoppy:20170430161841p:plain:w300

ギーラボオールスターは、ぎーらぼでどなたでも試せますのでぜひ、お気軽にお越しください〜

オープンハードカンファレンス 2017 Nagano(Chino × OSHWC)

秘密結社オープンフォース 河野さんが主催しているオープンハードカファレンスの長野版を4月22日 GEEKLAB.NAGANOで開催しました〜(一昨年に引き続き2回目

オープンハードカンファレンス 2017 Nagano

ものづくりで交流しましょう!を主旨に開催されてます。
今回も、共催、後援、出展者、セミナー登壇者、来場者の方たちのおかげで無事開催でき、そして無事終了できました!ほっとしてます。。。w
本当にありがとうございました(_ _)

振り返りの前に、今回一番の発見は
ニシンのパイはうまい!
f:id:chinoppy:20170422163150j:plain:w300

↓このひとを小一時間問い詰めたくなりました
f:id:chinoppy:20170424214948p:plain:w200

【目次】

それでは振り返り

今回は前回に引き続き、Pepperもやる気満々
f:id:chinoppy:20170422105320j:plain:w300

出展のご紹介

母の日ギフトを作ろう プリザーブドフラワーレッスン

さくら工房 稲田さんが出展してくれました。

f:id:chinoppy:20170422105201j:plain:w200 f:id:chinoppy:20170422105124j:plain:w200 f:id:chinoppy:20170422105303j:plain:w200

  • プリザーブドフラワーとは?
    • 生花の一番美しい時期に色素を抜き取り、特殊な加工を施したお花です
    • 本物のお花からつくられています!
  • プリザーブドフラワーの特徴は?
    • 枯れることがなく水やりの必要もない
    • 生花のような花粉や香りはありません
    • 保存方法に気をつければ5年以上持つそうです!

販売もあり、そして15:30〜は実際に花瓶にお花を指して、自分のギフトを作成するレッスンも開催していただきました!

スマートフォンで操作するRaspberry Pi 高音質オーディオプレイヤー(試作品)

Kyokusendo 三石さんが出展してくれました。

f:id:chinoppy:20170422123248j:plain:w200 f:id:chinoppy:20170422144105j:plain:w200 f:id:chinoppy:20170422144206j:plain:w200 f:id:chinoppy:20170422123324j:plain:w200 f:id:chinoppy:20170422123336j:plain:w200

出展+セミナーにも登壇していただき、作品の紹介をしていただきました!
ハイレゾも流せるんですよ!
本当にRaspberry Piは無限の可能性がありますね!

自作のデバイス展示

GDG信州+GCPUG信州さんも遠いところから参加してくれました!

f:id:chinoppy:20170422120823j:plain:w200 f:id:chinoppy:20170422120903j:plain:w200 f:id:chinoppy:20170422132536j:plain:w200 f:id:chinoppy:20170422141622j:plain:w200 f:id:chinoppy:20170422153602j:plain:w200 f:id:chinoppy:20170422162534j:plain:w200 f:id:chinoppy:20170422162656j:plain:w200

ガジェットをたくさん展示していただきました。
ギターあり、振る棒あり、写真撮ってツイートするガジェットありでなんだかライブができちゃいそうw
そして、GDGの紹介もしていただき、3ヶ月に一回はイベント開かないと
グループとして認められないということに驚きました!

「みんなのIchigoJam入門」の古籏さんからサイン頂きました!
f:id:chinoppy:20170425085541j:plain:w200 f:id:chinoppy:20170425091927j:plain:w200

坂城でつくった3D活用おもしろ展示、体験

坂城町からトレソル 藤岡さんが参加してくれました!

f:id:chinoppy:20170422120550j:plain:w200 f:id:chinoppy:20170422121127j:plain:w200 f:id:chinoppy:20170422121526j:plain:w200 f:id:chinoppy:20170422121542j:plain:w200

2010年から坂城町3Dプリンタのお仕事をしてるそうです。
テレビで紹介されたこともあるそうです!!!
ふしぎ絵的なものや、ねずこんと一緒に参加してくれました〜

そして、15時から「M-1グランプリ」ならぬ「ねず1(ワン)グランプリ」やりました。

f:id:chinoppy:20170422154720j:plain:w200 f:id:chinoppy:20170422154729j:plain:w200

起き上がらせ小法師のねずこん3つをいかに早く起き上がらせるかのグランプリです。

VR×MR展示/体験

GEEKLAB.NAGANOからはOculusとHololens出展しました

f:id:chinoppy:20170422143150j:plain:w200 f:id:chinoppy:20170422143153j:plain:w200

そして、「劇場版 ぎーらぼ伝説の剣 −ギーラボオールスター集結−」を披露しました! 弊社中島の「仮想と現実を繋げたい!」を発端に、ギーラボオールスター集結です!

構成はこんな感じ
f:id:chinoppy:20170424225837p:plain:w300

無事?!、宝箱空きましたw
f:id:chinoppy:20170422171521j:plain:w200 f:id:chinoppy:20170422171537j:plain:w200

動画も公開したのですが、諸事情により非公開です(^^;

詳細はこちらを参照

farewell-work.hatenablog.com

葉みゃくひょう本をつくろう!

河野さんのお子さんが出展してくれました!

f:id:chinoppy:20170422124546j:plain:w200 f:id:chinoppy:20170422142431j:plain:w200 f:id:chinoppy:20170422154204j:plain:w200

葉っぱの葉みゃくのみにして、そこに自分の好きな色を塗って、しおりみたいにしていました。
本当に発表したり、出展したりとしっかりお姉さんでびっくりです(^^

高断熱石釜DE-Live

安定のおいしさを生み出す石窯です

f:id:chinoppy:20170422142728j:plain:w200 f:id:chinoppy:20170422155012j:plain:w200 f:id:chinoppy:20170422155612j:plain:w200

15時からパイを焼いておやつ食べました! まいうーですw

DE-Liveのご紹介もしていただきました!

f:id:chinoppy:20170422134704j:plain:w200 f:id:chinoppy:20170422135817j:plain:w200

そんなこんなでこんな場面も・・・ Pepper恋の予感・・・
f:id:chinoppy:20170422145404j:plain:w300

そして、みんあでわいわい
f:id:chinoppy:20170422141611j:plain:w200

セミナーのご紹介

出展であわせてご紹介したとおり、河野さん、三石さん、GDG信州の石丸さん以外にも

Raspberry PiでLEDが光るまで

佐藤さんが * Raspberry Pi 電源ON → [????] → LED点灯! * この[????]部分で一体何が行われているのかという点に注目 * Raspberry Piというよりは、Linuxの仕組みについての解説 をしてくれました!そして伝説の剣も振ってくれました(^^

f:id:chinoppy:20170422152008j:plain:w200 f:id:chinoppy:20170422152322j:plain:w200

セミナーについてはこちらも参照になります!

thinkami.hatenablog.com

そんなこんなで「オレたちの戦いはこれからだ!」
f:id:chinoppy:20170422173140j:plain

懇親会

前回と同様にピザを焼いてわいわいしました〜

f:id:chinoppy:20170422183812j:plain:w200 f:id:chinoppy:20170422183834j:plain:w200 f:id:chinoppy:20170422183927j:plain:w200

アンカンファレンスもあって本当にあっという間でした。

いろいろと至らない点ばかりでしたが、ご参加していただき本当にありがとうございました(_ _)
今後ともGEEKLAB.NAGANO共々よろしくお願いいします!
楽しさが伝わったなら幸いです〜

CSSのことはじめ(Chino × CSS)

デザイナーさんとお仕事をしてCSShtmlの書き方で勉強になったことや、ちょっとですが自分でウェブサイト作ったりした経験からこんな感じで書いていくとよさそうという備忘録+最初に意識しておくとよいかなって思ったこと書きます。
(当たり前だろってこともあると思いますが、勘弁してください(><))
まだまだ未熟者なので、良い方法などあればお気軽にコメントお願いします!
(そのデザイナーさんにもまた機会があったら、何を意識してコーディングしてますか?って聞いてみよう。)

【目次】

参考にした本

デザイナーさんから学んだこと、自分の経験から

  • IDセレクタは使用していない
    (だいたいはクラスセレクタ 要素セレクタ 疑似セレクタを使用している)
  • HTMLのツリー構造を意識してCSSを書く
    (でもDOMに依存するようなコーディングするのはダメ)
  • Bootstrapなど使用時は、極力自分でスタイルを書かない
    書く場合は変更したいスタイルを上書きする

IDセレクタは使用していない

これは、再利用しやすいとか、保守しやすいなどの観点でしょうか。

例えば 文字の色を赤色にしたい!

f:id:chinoppy:20170325165601p:plain:w200

  • html
    <div class="contents_wrap">
        <div class="section contents1">
            <ul>
                <!-- ① -->
                <li id="contens1_num1">111</li>
                <li id="contens1_num2">222</li>
            </ul>
        </div>

        <div class="section contents2">
            <ul >
                <!-- ② -->
                <li class="warning">aaa</li>
                <li class="warning">bbb</li>
            </ul>
            <ul>
                <li>ccc</li>
                <li>ddd</li>
            </ul>
        </div>
・・・
/* ① */
#contens1_num1, #contens1_num2 {
    color: #FF0000;
}

/* ② */
.warning {
    color: #FF0000;
}
  • ①IDセレクタ
    • htmlのタグごとにIDをつけないといけない
    • 親要素のulタグにIDをつけてもよいですが、IDがかわるとCSSの修正も必要
    • htmlだけでは、赤字になっていることがわからない。。。
  • ②クラスセレクタ
    • htmlのタグにclassを追加すればよい
    • 一度、CSSに追加すれば後は修正が必要ない
    • htmlをみただけで、赤字ということが推測できる

クラスセレクタは名前のごとく、pythonとかJavaclass warningを宣言したイメージなのかな

その他

等間隔で表示したい

  • CSS.sectionを宣言(スタイルはmargin-bottom: 50px;
  • htmlでは幅をあけたい要素ごとにdivタグで囲い、class=sectionをつける

⇒そうすると以下の矢印部分のように等間隔で配置できる

f:id:chinoppy:20170325171616p:plain:w200

  • html
        <!-- sectionあり -->
        <div class="section contents1">
            <ul>
                <li id="contens1_num1">111</li>
                <li id="contens1_num2">222</li>
            </ul>
        </div>

        <!-- sectionあり -->
        <div class="section contents2">
            <ul >
                <li class="warning">aaa</li>
                <li class="warning">bbb</li>
            </ul>
            <ul>
                <li>ccc</li>
                <li>ddd</li>
            </ul>
        </div>

        <!-- sectionあり -->
        <div class="section contents3">
            <ul>
                <li>AAA</li>
                <li>BBB</li>
            </ul>
・・・
.section {
    margin-bottom: 50px;
}

セクションのスタイルが変更になるときは

  • CSS.sectionだけ変更すればOK

もし、2番目のセクション(class=section contents2)のスタイルだけ変更したければ、以下のようなCSSにかけばよい

.section.contents2 {
    /* スタイルを記載 */
}

HTMLのツリー構造を意識してCSSを書く

私は最初、IDセレクタを多用していた経緯もあり、このあたり全然意識していなかったです・・・

例として以下のような赤枠内の箇条書き部分を青字にしたい
  • class=section contents3配下のみ対象
  • ul liタグ以外に、pタグがあります
    liタグにclassを追加せずにやります)

f:id:chinoppy:20170325194637p:plain:w200

・html

        <!-- このsection配下は対象外 -->
        <div class="section contents2">
            <ul >
                <li class="warning">aaa</li>
                <li class="warning">bbb</li>
            </ul>
            <ul>
                <li>ccc</li>
                <li>ddd</li>
            </ul>
        </div>

        <!-- このsection配下の箇条書きを青字にする -->
        <div class="section contents3">
            <ul>
                <li>AAA</li>
                <li>BBB</li>
            </ul>
            <ul>
                <li>CCC</li>
                <li>DDD</li>
            </ul>
            <ul>
                <li>EEE</li>
                <li>FFF</li>
            </ul>
            <!-- pタグがあります -->
            <p>コンテンツ3(pタグ)</p>
        </div>

CSS

/* 「section & contents3のclassを持つタグ」の */
/*   「子孫:ulタグ」の */
/*     「子孫:liタグ」に適用 */
.section.contents3 ul li {
    color: #0000FF;
}

ちなみに

  • .section.contents3.sectionに変更

⇒他のclass=section ・・・配下も青字になります。

こちらも当たり前ですが、

  • .section.contents3 ul li.section.contents3 p

⇒にすれば、pタグの文言が青字にできます。

このように、ひとつひとつのタグにclassをつけていかなくても、スタイルを適用できる!
これをうまく使用すれば、他に同じ意味のhtmlタグを追加した時に、意識せずにスタイルが適用されるなどメリットあり。

その他

例えばあるクラス(例:.section)のタグ配下のテキストのフォントサイズを統一したい場合は、以下をCSSに書けばよい

.section input[type='text'] {
    font-size: 6px;
}

Bootstrapなど使用時は、極力自分でスタイルを書かない

せっかくフレームワーク使っているのに、使わない手はないですよね!

以下のBootstrapのサイトや、ググるとたくさんの情報がでてきますので、Bootstrapのクラスをぜひ、使いましょう

http://getbootstrap.com/css/getbootstrap.com

(ちなみに、私はBootstrapにお世話になりっぱなしで、思考停止状態になってしまっているので、また時間ができたら新しいものに挑戦したいです。)

上書きについて

私がよく上書きするのは、以下col-xx関連です。 paddingが広すぎるので狭くしています

[class^="col-xs-"], [class*=" col-xs-"],
[class^="col-sm-"], [class*=" col-sm-"],
[class^="col-md-"], [class*=" col-md-"],
[class^="col-lg-"], [class*=" col-lg-"] {
    padding-left: 5px;
    padding-right: 5px;
}

f:id:chinoppy:20170325202111p:plain:w600

ちゃんと上書きされてますね。

githubはこちら

github.com

アンプラグドすごいね(Chino × CodeEdu/)

3回(2016年12月、2017年2月、2017年3月)にわたって開催されたプログラミング教育指導者育成講座(CodeEdu/)の運営側のお手伝いをさせていただき、勉強になったことや感じたことがあったので、これから関わろうとしているひとたちなどに参考になればと思い書きました。 あくまで個人的な感想です(^^;

プログラミング教育指導者育成講座(CodeEdu/)概要

感じたこと

  • 子どもたちに問いかけるように教える

    • これはコードアカデミー高等学校を運営する信学会の栗林さんから教えてもらいすごく勉強になったこと
    • ただ説明するだけだと、子どもはあまり理解できず、わからなくなってしまう⇒自分が関われていないとなり楽しくない。。。
    • 子どもたちは問いかけると自分で考え、それぞれ理解していく⇒わかると自分が関わっていると実感がわく
    • 子どもに限らず、ひとそれぞれ、考え方や理解の仕方が違うと思うので、一方的に話すのは注意しないといけないと感じました
  • 講師がまず楽しむ

    • これは、3回目のプログラミング教室の当日、朝に上越教育大学の大森先生が話していたことです
    • プログラミング教室に来てくれた子どもたちは、ただでさえ、慣れない場所、慣れないことで緊張している
    • 講師が緊張していると子どもたちに伝わっていまう・・・
    • 確かに、話す側が楽しくないと聞いている側も楽しくならない
    • Enjoy 講師!わいわい
    • 楽しくなさそうに教えられたら、何だって楽しくないって思っちゃいますよね(^^;
  • スライドひとつにひとつのやること

    • これは上越教育大学の大森先生から教えてもらったことです
    • 詰め込みすぎない
    • いっぱい書いてあるとどこをやればよいか迷ってしまうなどなど。。。
  • 休憩やPC以外の要素をいれるのは大事

    • 子どもたちを疲れさせない
    • やっぱりずっとPCを使ったり、座ったままだと疲れてしまう。。。
    • 今回、席をたって踊るという要素があり、すごく子どもたちが楽しそうだった(^^
  • アンプラグドすごいね

    • プログラミング教室=PC ⇒ プログラミング教室≠PCでもプログラミング的思考は十分学べる!
      • Ozobotのプログラミング教室は「Ozobot+マジックペン+紙」だけでやっていた
      • Ozobotがとまると、なぜ動かないのか考え、対策しまた動かし(トライ&エラー)を自然に子どもたちがやっていた!
    • プログラミング教室=先生がつくったプログラムを写経、理解 ⇒ 自分でコードを考える!
      • マジックでライン=コードを自由に描いていた!

本当に、PC使わずに子どもたちが、トライ&エラーを繰り返している姿をみて、すごくびっくりしました。 子ども向けプログラミング教室でしたけど、おとなもすごく勉強になりました(^^