ようじょのおえかきちょう

ふぇぇ お医者さんにペン持ったらダメっていわれた〜〜

GitHub Patchwork in Akashi を開催しました

きのう7/8(金)に明石高専にて「GitHub Patchwork in Akashi」を開催しました。

参加人数は40人近くで、そのうち10人弱がメンターでした。

f:id:yamasy1549:20160709222121j:plain

なんでやったん

4月に明石高専で開いた「高専カンファレンスlol」に GitHub Japan の堀江さんがいらっしゃって、 「今年はいろんな高専まわってみたいんで、ぜひ呼んでください」みたいなことをおっしゃっていて、 私も学内向けに6月か7月ごろに git講習会を開きたいなと思っていたので、来ていただくことになりました。 (実際は学外からの参加も可能にしました)

なにやったん

Git-it という gitのチュートリアルのようなデスクトップアプリを参加者にもくもくやっていってもらいました。

  • gitのなにが嬉しいの?
  • {branch,remote}って?
  • pull req を送ってみよう

と一通り基本的な使い方をガイドにそって学んでいきます。

でやったん

開催後にとったアンケートの結果を公開します。Google form って便利ですね。

参加パートを教えてください

f:id:yamasy1549:20160709213442p:plain

学年を教えてください

f:id:yamasy1549:20160709213516p:plain

講習会以前より、GitHubを使ったことがありましたか?

f:id:yamasy1549:20160709213709p:plain

本日の勉強会の率直な感想をお聞かせください

f:id:yamasy1549:20160709213732p:plain

今後、GitやGitHubを使ってみたいと思いますか?

f:id:yamasy1549:20160709213819p:plain

感想を自由にお書きください(良かったところ、悪かったところなど)

参加者

  • もう少し解説などがあればよかったと思います。 それでもすごく楽しかったです。
  • 楽しかったです
  • 楽しかったです。今後の使い方などわからない点も多いのでもう一回このような講習を開いて欲しいです。 ありがとうございました。
  • もっと経験を積んで次はメンターとして参加したい。
  • 学生特権でGitHub educationをたくさん利用してみようと思っているのでそこの説明を詳しくしてほしかったです。
  • メンターさんに名札をつけてもらった方が良かったのでは?
  • とても楽しかったです
  • 自分のペースで進めることができ、わからない点をとことん話し合うことができました。とても良い時間となりました。
  • 良かった点:メンターの人数が多く、質問があればすぐに回答が得られた。 特に本家の方に質問をした際には非常にわかりやすく説明してもらえたので理解が深まった。 悪かった点:進め方がフリーすぎたため、最初何をするのかわからなかった。大枠の流れと各ツールの位置づけぐらいは軽く説明が欲しかった。
  • 個人での説明が非常に良かったです。 わかりやすいし、丁寧だし、例えがすごく上手い。 あと、ピザ!超美味しかったです!

メンター

  • 参加者から質問があったらすぐ呼んでもらえたので対応するのがすぐ出来たし,楽しかったです
  • ピザ最高
  • おつかれさまでした。いい雰囲気だったと思います
  • 運営おつかれさまでした。

振り返って

事前準備・ツール

  • 前日までにgitとGit-itをインストールしてもらって正解だった
  • GitHub Desktop (& Git-shell) と Git-it の名前が似ていて、どれをどう使うのか初めて聞く人は混乱した(もうちょっと全体で説明が必要)
  • win10で(?)Git-itが固まるなど不具合があった
  • 学外のかたに学内LANを開放することができなかった(申し出があればわたしのモバイルルータ回線を貸し出した、テザリングの人もいた)

参加者

  • 学外からの参加もOKにして良かった
  • 参加者は、情報系部活の新しく入ってきた1年生が多い印象だった
  • メンターさんには大学生(卒業生)や社会人のかたもいらっしゃいました。平日の夕方からありがとうございます :bow:

難易度

  • 学生に絞って見ても、開発に慣れていない低学年から日常的にプログラムを書く高学年まで幅が広く、足並みを合わせずもくもく形式にして正解だった
  • 低学年向けには、はじめの「gitとは?」みたいなところを講義形式で一斉に説明するなど、導入に工夫が必要と感じた

その他

  • メンター用の名札を用意すればよかった
  • お菓子とジュースを用意しててよかった。ピザを頼んでくださったのがすごく助かった
  • メンターさんが一眼レフ持ってきてくれていい感じに集合写真が撮れた

開催後

  • 参加ありがとうメールをすぐに送れた
  • GitHub education についてメールで紹介できた
  • 今回の続きみたいな、follow-up的なのを開くよ宣言ができた
  • 開くぞ〜といったもののレベルがばらばらなので具体的に何やるかまだちゃんとまとまってない
  • とりあえずGit-itの英語部分を日本語に翻訳、とかならできそうだからみんなでやってみたいね!

いまからラブライブ!サンシャイン!!観るので中途半端やけどこれで開催レポを終わります!!!

開催して良かったと思います。みなさん来てくれてお手伝いしてくれてありがとうございました!

『HTML5/CSS3モダンコーディング』を読んでいました #kosen14s 読書会

kosen14s.github.io

kosen14s 読書会 10日目、担当やましーです。担当は1周まわったのですが有志により読書会は続いており、立川のガルパンのような状態です。まだもうちょっと終わりそうにないしどこまで続くか見守っていきたいです。

今回は『HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方』という本を紹介します(読んだのは去年の秋頃ですが…)。

むかし「これすごいで一回見てみ〜」と http://yoshiko-pg.github.io/ というポートフォリオサイトを見せてもらったことがありまして、HTML/CSS/JSでこんなに広い表現ができるのかとびっくりしました。

それからしばらく経ってこの本が出ると聞いて、ふと著者のかたのお名前を見て「あ!!!!!あのすんげーポートフォリオサイトの!!!」「これは絶対読まなあかん」と思って買いました。

どんな本?

よく見る人気のWebページのデザインスタイル

をハンズオン形式で作っていきましょう、という内容です。リンク先に見本があります。

IE9より下は切っていて、

HTMLの

  • section
  • article
  • nav

CSS

  • :last-child擬似クラス
  • 単位rem

などをハック無しで使う前提でいます。うれしい。

とにかくサンプルサイトがかっこいい!

コードを書いていくたびサイトがどんどんかっこよくなっていくので、モチベーションが途切れることがありません。 やっぱり作るならかっこいいサイトがいいです。

著者のかたは Goodpatch の社員さんなんですよね。憧れます…!

ONE POINT の説明がわかりやすい!

例えば、プロパティを当てる前→当てた後、marginについて、などの図がとてもわかりやすいです。

これまで position や display をなんとなくで使ってしまっていたのですが、図を見て「なるほどだからあの時うまくいかんかったんか〜」と理解できました。

今までの自分が書いたコードを振り返るようになる

この本を読み終わってサンプルサイトも3つ作り終えると、「めっちゃ勉強になった…すごい本に出会ってもた!」という感情のほかに「やばい、今まで書いてきたコード無駄多くて全然だめやん…」「できることなら全部書き直したい」と思うようになりました。

もっと前にこの本を読めていたら、開発スピードも上がっていただろうしもっとかっこいいサイトになっていただろうなぁ…

こんなひとにおすすめ

対象は、HTML5/CSS3を書いて主要なタグ・プロパティを知っている人〜ひとりでWebサイトを作ったことがある人、でしょうか。逆に全く触れたことのない人にはちょっと難しいかもしれません。

主要なタグ・プロパティを知っている人は「こんな書きかたをするんだ」「こんなこともできるんだ」、ひとりでWebサイトを作ったことがある人は「こんな実装方法もあるのか」「今度はこう書いてみよう」とそれぞれ勉強になる部分が変わってくると思います。

おわりに

この本が誰かのほしい物リストに入っていたら必ず贈るようにしています。 Kindle版は時々セールになっているので、ぜひ読んで写して書いてみてほしいです。

『UIデザインの心理学』を読んでいます #kosen14s 読書会

kosen14s.github.io

kosen14s 読書会 4日目、担当やましーです。

3日目は いらいざ による 「精神分析入門」を読んで でした。文章めっちゃ読みやすくてびっくりした、高校は高専と違ってちゃんと国語の授業あるんだな…

さて、私は『UIデザインの心理学―わかりやすさ・使いやすさの法則』という本を紹介します。

どんな本?

UIデザインの心理学―わかりやすさ・使いやすさの法則

UIデザインの心理学―わかりやすさ・使いやすさの法則

Designing with the Mind in Mind, Second Edition: Simple Guide to Understanding User Interface Design Guidelines』を翻訳したものです。

UIデザイン原則と心理学上の根拠がわかる一冊。

◎物事を認識するときにどのようなバイアスがかかるか

◎物事をどのように見分けてとらえるか

◎色情報をどのように処理するか

◎周辺視野や読む能力がどのように機能するか

◎注意、記憶、想起、学習、意思決定をどのように行うか

◎使いやすいと感じる物理的法則や時間的法則は何か

と紹介文にあるように、よく言われるUIデザインの原則が「なぜ良いのか」また「どうすればいいのか」を人間の身体・心理目線で解説した本です。

「心理学」とありますが、心の動きにルールを見つけようとする「behaviorism(行動主義)」とか「認知心理学」とかの言葉を使ったほうがより近いかもしれません。あんまり詳しくないのでいらいざに教えてほしい…

こんなひとに読んでほしい

  • 私みたいに、独学でデザインに触れているひと

  • デザインはセンスがないとできないと思っているひと

ちょっとだけ中身を紹介

本当はこの本の内容をまるごと紹介したいのですが、全部で280ページあるのと、まだ私が最後まで読み切れていないのもあって、5章「周辺視野」についてだけ紹介して雰囲気をつかんでもらえればと思います。

内容を元に、簡単なスライドを作ってみました。

最近のかっこいいレイアウトや人気のデザインなどにはほとんど触れていません。かわりに私たち人間が普段どうやってモノを見ているのか、何が得意で何が苦手なのか、どんな癖があるのか…についてが豊富な図・スクリーンショット・過去の研究を交えて紹介されています。

「わかりやすさ・使いやすさ」は考えれば考えるほど行き詰まってしまいますが、この本は人間の身体や認知心理の視点からヒントを出してくれます。

「一貫性を保ちましょう」「記憶しなくても見ればわかるようなデザインにしましょう」などはよく言われるデザインの原則の例ですが、この本を読み終えると、なぜそれが原則とされるほど大事なのか、説得力のある理由を説明できるようになると思います。

他の本も紹介

武舎 広幸さん、武舎 るみさんが翻訳されている本には他にも

などがあります。

おわりに

学生が気軽に買える値段と重さではないので、図書館に入れてもらうのがベストだと思います。欲しいけど :)

明日は ふるつき の担当です。ふるつきは高専生のくせに文章上手なのでたのしみにしてます!