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

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

アニメイトラボさんでお世話になりました + なつやすみのおもいで

この夏休み、8月半ばから9月末まで、千駄ヶ谷と代々木の間にある アニメイトラボ さんでお世話になりました。いっぱい経験させてくれてありがとうございました。

経緯

ブログを書いたらCTOからお話が振ってきた

アニメイトラボさんについて

を運営しているところです。

社員さんの数は ここ に24名と書いてありますが、もっといた気がします。もしかしたら分裂できる人とかいるのかもしれません。

どんなことをしたの

かきました

これまではIssueに細かく分けたタスクがいっぱい置いてあってそれをやっていくのが多かったですが、今回は「ラジオ機能をなんかよくする」というざっくりした目標を与えられて、自分で考えてアプローチしていく流れでした。より「業務に近い」感じがしてわくわくしました。

勉強したこと

オフィスの雰囲気とか

床・壁・机がカラフルで可愛かったです。

アニメイトラボというだけあってアニメ・声優・アイドルなど好きな人が多く、ときどき誰かの机の上に30cmぐらいに積まれたCDビルが2つぐらい建ってました(乃木坂、ゆっふぃーなど)。席が近いとおこぼれをもらえます。

夏は台風が多く電車がよく止まっていたので、何回かリモート作業をしていました。チャットで一言連絡すれば特に申請とか要りません(今までお世話になったところも全部そんな感じ)。

それから徒歩数分のところに新宿御苑があるので、年パス買って出勤前や昼休みに芝生でぼーっとしてました。


なつやすみのおもいで

Money Forward さん、Goodpatch さんのオフィスに遊びに行かせてもらいました。オフィスがカッコよかったです!

9月はじめは関西に帰ってRubyKaigiのHelperをしていました。1日目の懇親会でたまたま現職と前職と前前前職の会社の人が集合して「いや〜うちのやましーがどうも」みたいにご挨拶してるのを見て親戚の集まりに来た気持ちになりました。特定の会社とかじゃなくてコミュニティの人たちに支えてもらってるんだなーって嬉しくてちょっとうるっと来てたのは内緒です。

土日は寝てるか最近の激ヤバモダンJSの勉強をしていました。

さいごに

一ヶ月半という期間はいろいろやるには短すぎて、あっという間に過ぎていきました。 昨日から学校が始まっていますが、授業や休み時間があまりにもゆっくり過ぎていくので焦りを覚えるほどです。

最終日に「 デザインの伝え方 」という本をいただいたので、次の休みまではそれを読んで血中エモ濃度を高めつつ、もうちょっとJSを使えるようにいろいろ書いてみようと思います。

次の春休みもどこかでお世話になりたいと思っていますが、まだはっきりとは決まっていません。 もしよろしければ雇ってください。18歳なりに働きます。

夏休みいっぱいがんばったで賞

www.amazon.co.jp

#design_trace ①「デレステ」「スクフェス」のデザイントレース

デザイントレースをはじめました

世の中に出回っているサイトやポスターとかを自分も真似して作ってみる「デザイントレース」なる方法があるらしいです。

細かいこだわりやパーツの組み合わせ方、全体のまとめ方とか勉強になるかなーと思ってぽつぽつ始めていこうと思います。 元々模写が好きなので楽しんで続けれられるはず。

気をつけたこと

  • がんばりすぎない
  • 数pxズレてるとかは目をつぶる
  • めんどくさそうなパーツはどんどんトリミングしてサボる

わたしのスキル

  • 持ってるフォント(FONTWORKSさんのが多い)は見たら大体予想がつく
  • けど持ってないフォントはわからない
  • 趣味でイラレ使う
  • お仕事や学校でそういうのをやってるわけではない、いわゆる素人

デレステ

フォント

まずはお世話になってる「アイドルマスター シンデレラガールズ スターライトステージ」のミッション画面。

使われているフォントは、終筆・折れ部分の切れ味が(縦横にスパっと切ったように)特徴的な「ロダンNTLG」です。

そのまま文字を入力しただけだと全体的に肩幅が狭くなり、特にスマホなど小さい画面で見たときにつらそうです。トラッキング(字間)を大きくして、パッと見たときの風通しを良くします。

それから英字と日本語の間に謎の隙間ができて2つの単語のように見えてしまっているので、これも無くしていきます。

一番下の「トラッキング調整なし」が入力そのまま、上の「トラッキング調整あり」が調整後です。

f:id:yamasy1549:20160809165038p:plain

期限・タブ

「期限」背景の楕円は灰色ですが、よく見るとその縁はもう少し白い灰色になっています。目立ちやすいからとか理由があるのかもしれませんが、私にはまだよくわかりません…

activeはタブは背景がピンクになり、凹ませて見せています。「デイリー」と「ウィークリー」を比較すると影のつき方が上下逆になっています。ピンク背景のときは文字が白になるのですが、黒い縁取りのせいか収縮して見えてしまったので、ワンランク上の太さのフォントを使いました(EB -> UB)。

あと他には全体的に右上から光が当たったような効果があったのですが、めんどくさかったのでやりませんでした。

f:id:yamasy1549:20160809170457p:plain

リスト

デレステのリストはカード式で、タイトルは最大で2行です(2行超えてるのを見たことない)。 詳細ボタンは四角く、いかにも「押せますよ」感が出ています。中身は今回は作っていません。

達成度はプログレスバーになっていて、どこまでやったかを視覚的に見せています。 報酬の内容はピンク色(+アイテムのアイコン)になっています。報酬を見てどれをやるか決める人が多いんでしょうか。

また「ミッション内容+詳細」と「達成度+報酬」を区切るために点線を用いています。

f:id:yamasy1549:20160809171534p:plain

全体像

後ろの円はこのサイトから拝借しました。ありがとうございます。

www.orefolder.net

こんなタスク管理ツールがあったらちょっと使ってみたいです。誰か作らないかな。

f:id:yamasy1549:20160809172337p:plain

スクフェス

フォント

次は、これまたお世話になってる「ラブライブ!スクールアイドルフェスティバル」の課題画面。

見ただけではフォントが分からなかったのでインターネッツの力を借りると「モトヤLマルベリ3等幅」が近い、とのことだったので代用。

でもやっぱりちょっと違うのでうーんという感じ。なんなんじゃろ。

f:id:yamasy1549:20160809173404p:plain

詳細

これもフォントが分からなかったので「UD 丸ゴ_ラージ」を少し太らせて代用。

星の模様は自分でいい感じに作りました。模様を入れることで目を引きやすくなっています。

f:id:yamasy1549:20160809173616p:plain

リスト

難易度マークはトリミングしてサボりました。

スクフェスのリストはピンクの点線で区切られていて、タイトルは1行を超えると「…」で省略されます。

「おつかいに行こう!」の文字が、ピンクの帯に対して上下揃えではない(帯の中央にない)ところが意外でした。

報酬は文字+アイテムのアイコン、達成率はプログレスバー、とここはデレステとほぼ同じです。

f:id:yamasy1549:20160809174313p:plain

全体

背景はスノハレです。

横方向に伸びる「〜よう!」(ピンクの帯)と達成率のプログレスバーが交互に来てる感じが好きです。

f:id:yamasy1549:20160809174933p:plain

やってみて

点線の使い方やリストの方法がそれぞれ違って勉強になりました。

進捗をtwitterに上げていったら、ちらほらRTやfavが来て面白かったです。

次は牛乳パックのパッケージか、何か別のアプリをトレースしようかなと考えてます。ネタあればください。

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の英語部分を日本語に翻訳、とかならできそうだからみんなでやってみたいね!

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

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