CSSもhtmlも分からん.アニメーションとかもつけていきたい

2019-02-17

google/claspにコントリビュートした

Google/claspとは

GitHub - google/clasp: 🔗 Develop Apps Script projects locally.

TypeScriptとかで書いてある.

PRの内容

Fix terminal error when calling clasp logs with invalid projectId and refactor clasp logs by tawAsh1 · Pull Request #535 · google/clasp · GitHub

commandsファイルが肥大化しているので、ツールのコマンドをそれぞれファイルに分けようとかいうリファクタリングが行われていたので、logsコマンドを別ファイルに分離.

存在しないproject id を指定するとlogsコマンドが終了しないバグを修正.

所感

TypeScript初めて書いたけど、すごく良い.

また、このプロジェクトなんですが、結構質の高いコードレビューをしてくれるのでとても良い.これからもコントリビュートしていきたい.

しょうもない感想だが、あの”google”のリポジトリにPRしてマージされたのがとても嬉しい.

2019-02-11

Web制作者のためのSassの教科書を読んだ

フロントを書くのは辛い. フロントは辛い...
フロントをちゃんと書いていく必要性ができてきたので，とりあえず雰囲気で書いていたSassをちゃんと勉強しようと思った.

Web制作者のためのSassの教科書改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

作者: 平澤隆,森田壮
出版社/メーカー: インプレス
発売日: 2017/09/15
メディア: 単行本（ソフトカバー）
この商品を含むブログを見る

所感

網羅性が高くて良いが，結構デザイナ向けに書かれているので，冗長だと感じることが多かった.

機能まとめを書いた
sakura-lov.hatenablog.com

2019-02-11

Sassの基本機能まとめ

Sassを学んだので基本機能をメモした.

ルールのネスト

ルールをネストで表現できる

.item {
  p {
    margin: 0;
  }
}

親セレクタの参照

親セレクタを & で参照できる

a {
  background: #eee;
  &:hover {
    background: #ccc;
  }
}

プロパティのネスト

プロパティもネストできる

section {
  border: 1px solid #999 {
    top-color: #a99;
    bottom: 0;
  }
}

プレースホルダーセレクタ

CSSへの変換後には直接書き込まれないプレースホルダを % で使える

%btnBase {
  text-align: center;
  text-decoration: none;
}
.btn {
  @extend %btnBase;
}

変数

$val_name で変数が宣言できる

$red: #cf2d3a;

.notes {
  color: $red;
}

演算

四則演算とか剰余とかの演算ができる

.e1 {
  width: 500px + 80;
  // 580px
  width: 500px - 80;
  // 420px
  width: 500px * 8;
  // 4000px
  width: 500px / 8;
  // 62.5px
  width: 20px % 4;
  // 0px
  content: "hoge" + fuga;
  // hogefuga
}

基礎関数

色々な関数が用意されている

.e1 {
  width: abs(-15px);
  // 絶対値 15px
  width: round(100px / 6);
  // 四捨五入 17px;
  width: ceil(100px / 3);
  // 切り上げ 34px;
  width: floor(100px / 6);
  // 切り下げ 16px;
  color: rgba(#6a5468, 0.3);
  // 16進RGB(色キーワード)+alpha値->RGBA rgba(106, 84, 104, 0.3);
  color: lighten(#000, 30%);
  // 明度上げる #4d4d4d
  color: darken(#fff, 20%);
  // 明度さげる #cccccc
  color: mix(#000, #fff, 50%);
  // 中間色求める gray

if文

@ifで if文が使える

$cond: true;
@if $cond {
  .e1 {
    width: 15px;
  }
}

for文

@for でfor文が使える

@for $value from 1 through 3 {
  .hoge_#{$value} {
    margin-bottom: 1px * $value;
  }
}

for-each文

@each でfor-each文が使える

$list: a, b;
@each $val in $list {
  .hoge_#{$val} {
    content: #{$val};
  }
}

while文

@while でwhile文が使える

$val: 20;
@while $val > 20 {
  .hoge_#{$val} {
    content: #{$val};
  }
  $val: $val - 10;
}

ミックスイン

@mixin でプロパティの寄せ集めが作れる

@mixin kadomaru($value) {
  border-radius: $value;
  webkit-border-radius: $value;
}

.box {
  @include kadomaru(3px);
}
// .box {
//   border-radius: 3px;
//   webkit-border-radius: 3px;
// }

2019-02-10

入門 Kubernetes -Kubernetes: Up and Running を読んだ

表題の通り、オーケストレーション周りとかクラスタ周りとか勉強する必要が発生したので、入門Kubernetesを読んだ.

入門 Kubernetes

作者: Kelsey Hightower,Brendan Burns,Joe Beda,松浦隼人
出版社/メーカー: オライリージャパン
発売日: 2018/03/22
メディア: 単行本（ソフトカバー）
この商品を含むブログを見る

概要

Kubernetesについての基礎要素を解説した本.
GCP/Azureを使って実際に手を動かしながら学ぶ.

所感

基礎的な要素がしっかりまとまっており、これとチュートリアルである程度のことはできそう.
実践的な例 Redis/Ghostなどのアプリケーションのデプロイ例が載っていて参考になる

悪いところ

ノードクラスタ Pod Label オブジェクトという言葉があまり定義されずに出てきて、混乱した.

2019-02-07

アジャイルサムライ−達人開発者への道− を読んだ

突然ソフトウェア開発の方法論とか思想の話に興味ができたので，
アジャイルサムライ−達人開発者への道− を読みました.

www.amazon.co.jp

はじめに

自分がプログラミングを始める前からよく言われていた「アジャイル開発」とかいう単語.
いい加減ちゃんと勉強してみようと思ったのでとりあえず本を読んでみた

思ったこと

アジャイルとは開発手法の一つではなく,開発手法の総称，手法の思想的なものであると感じた.
目標とすること，思想にマッチしプロジェクトの特性に合うことであれば柔軟に取り入れ，効率化をはかっていく.
逆にアジャイル開発に含まれる道具でも，プロジェクトの特性に合わなければ使わないというのがアジャイルの流儀っぽいと感じた.

要約メモ

ここからは要約です！
かなりポエム！

プロジェクトのスタート期

アジャイル流今からコンテンツを作る時の流儀/方法には次のようなものがある

柔軟なチーム

役割はあっても担当はない. メンバーが柔軟に幅広く対応していく.
脱線しますが，これは俺の仕事じゃないから...とかやらないだとか逆に, これ苦手だからやりたくない！イエーイ！みたいなのはよろしくないですよね.

インセプションデッキを使って全体で共通認識を作る

プロジェクトの全体像をはっきりさせ，メンバーの認識を統一し，価値観を共有することはチーム作業をするなら一番大事ですね...
インセプションデッキというもので全体像をはっきりさせましょうとかいう話
ここに詳しくまとまってます.
プロジェクトを始める時にオススメのインセプションデッキの紹介 | toyoshiの日記

ユーザーストーリーを使ってやることを明確に

やることが見えていると安心するし，やることを一つ一つプチプチ終わらせていくのって快感ですよね(私はそうです)
作る時は自分たちだけで考えずに，ちゃんと顧客(そのプロダクトを届けたい人)を入れて考えていきましょうね〜とかいう話
この記事が面白かったです.
簡単！楽しい！5分でわかるユーザーストーリーマッピング(User Story Mapping) - Qiita

プロジェクトを回していくぜ！期

アジャイル流よし，今からものを作るぜ！プロジェクト回すぞ〜！な時の流儀/方法には次のようなものがある

イテレーションを回すぜ！

二週間程度の期間を決めてプロジェクトにメリハリをつけていきましょう...!
あとは必要以上の分析を行わないようにしよう...
イテレーションnで計画したことを，イテレーションn+1で実行していく.
脱線しますが，分析とか勉強ばっかりやっていても物はできないし，物ができてこそ見えてくる世界がありますね... 百聞は一見に如かず的な．

意思疎通！フィードバック！で風通しをよくしよう！

人々が協調して働く上で意思疎通はとても大事です. それはそう. という話ですね.
作ったプロダクトのフィードバックもちゃんともらって軌道修正もちゃんとしつつ，必要ならストーリーとかデッキを作り直してしまえ！
よくある意思疎通/フィードバックの方法にはこんな感じがあるよ

ストーリー計画ミーティング
イテレーション計画ミーティング
ショーケース
デイリースタンドアップ

貼りものを使って状況が見えるように！

リリースボードやストーリーボード，バーンダウンチャートを壁に貼り付けるなりして，常に進捗状況が見えるようにしましょう.

プログラミングの進め方

これはよくわかっている話ですが，

テスト自動化をする
リファクタリングを細かくやって，技術負債を貯めない
CI/CDをしましょう

をしましょう. という話.
ところで最近ようやく自分の小さなプロダクトを作る時にテスト駆動開発ができるようになってきました. 嬉しい.

まとめ

良書でした.
でも,これ,当たり前の話じゃない？

2019-02-06

e-ZUKA スマートフォンアプリコンテスト2018 で企業賞を2ついただきました.

昨年11月に福岡県飯塚市のアプリコンテスト e-ZUKA スマートフォンアプリコンテスト2018にチーム金沢株式会社として応募してました.
結果ですが,ヌーラボ賞と福岡県済生会飯塚嘉穂病院賞を頂きました. :waiwai:

e-ZUKAスマートフォンアプリコンテスト2018

アプリの内容

機械学習を用いた作業の時間見積もりとその記録アプリ. プラットフォームはiOS.

仕事を早く終わらせるには？というテーマについて応募.
作業時間見積もりって難しいよね,たわしミスって遅刻したりしてしまうことが多いぜ！見積もりやったりちょっとは時間に意識的になろう. ということで制作した.

アプリのバックエンドとフロントエンド，一部のデザインを担当しました.

GitHub - tawAsh1/ezuka

ストーリー

きっかけ 7月ごろ

暇なのでアプリコンテストになんかもの作って賞品とか賞金もらって実績生やして :waiwai: しようぜとかいう話が仲間内であった.
開発期間的に良さそうなコンテストとして「e-ZUKA スマートフォンアプリコンテスト」なるものがあることを知ったので，早速応募してみた.
企画書を突貫作業で作ったので2時間程度のクオリティ, まあ通ったらびっくりだなあとチームで話していた.

突然のお知らせ

メールで一次選考を通過したことが知らされる.
通らないと思っていたのでびっくりした.
もちろんコードは一つも書いていない.
チームで焦りつつどうするか考えた.

大炎上ブラックブラザーズ

まあ案の定燃えた.
当初自分の作業はアプリのバックエンド部分のみだったはずが，StoryBoardの学習コストが...時間もないし...ということで，StoryBoardも書くことになる.
UIのデザインとかはある程度プロ達が作ってくれていた.　すごい. しかもなんかかっこいい.
当日の9時ごろまで必死に書いた. 書きなぐった. はい. 流石に賞は厳しいかもしれないなと思い始める... ところでスライドは... 自分で作るしかないですね. (分担が悪い)
機械学習部分は弊チームのプロ(@yukinameko0116)が爆速で作ってくれました. 強い.

なめこも参加した案件．スケジュール管理って難しいなって思った．
あとSwiftで機械学習なんてもうしたくない https://t.co/XlTwnj8om6
— なめこ (@yukinameko0116) February 5, 2019

- Swift での機械学習について弊チームのプロ

予想外の結果

結果ですが，なんとヌーラボ賞と福岡県済生会飯塚嘉穂病院賞をいただいた. 嬉しい世界.
f:id:sakura_lov:20190206002220j:plain
結果発表 | e-ZUKAスマートフォンアプリコンテスト2018

思ったこと

まあ，主体的に動くの大切ですね. スマホアプリ楽しいです. 次は何を作ろうか.
ちょっと残念だったのが，せっかくデザイン班がめっちゃ良いデザインを作ってくれたのに，技術不足と時間不足であまり実現できなかったこと. 悲しい.

f:id:sakura_lov:20190206002508j:plain — 夢の跡

Acknowledgement

コンテスト参加にあたり，一般財団法人キャンパスOJT型産学連携教育推進財団からご支援を頂きました.
この場を借りて御礼申し上げます.