Minstrel

Ruby, JavaScript, Haskell, Math, Music, Design

星降る夜の映画祭トレース Part2 #100DaysDesign #Day4

Day2 でトレースした星降る夜の映画祭りを、自分なりにいじって遊んでみた

Before

f:id:moriwm77:20180712221427p:plain

After

f:id:moriwm77:20180712222059p:plain

改善ポイント

  • 文字のサイズを全体的に大きく。
  • 色味がさすがに少なく感じたので ☆ に黄色を使用。
  • 映画の紹介をもう少し目立たせたかったので、画像を使用。
  • fontの色を暗くした

妥協ポイント

  • Fontの形状変更の方法がわからない(イラレとかでやって画像にするのかな...)
  • レスポンシブのこと考えたら大変そう(本家はちゃんと考えてるから偉い)
  • 色彩とかfont-weightとかそこまで正確に調査をしていない。

学び

1. fontはとりあえず以下を抑えておくのが鉄板ぽい。確かにこの辺使うだけでおしゃれ感でた。

日本語: Noto-sans JP, ヒラギノ角ゴシック, 游明朝体 英語: Helvetica Neue, Lato

2. fontに対して原色白はよくない?

ほんのすこしだけグレーをまぜる。たしかに優しい印象が出る。

感想

良いかどうかはつゆ知らず。社内のデザイナーに金曜日にレビューしてもらおう。

アルゴリズム問題: モンスターvsうさぎvs人間

TopCoderOpen 2008 Qual Round 1に出題されたEasy問題

いったいどこがEasyなんだ......

人間が1人、モンスターがM匹、ウサギがB匹います。ここから、モンスターか人間がいなくなるまで無作為に2匹(もしくは1人と1匹)を選び出し、以下の行動を繰り返します。

  • モンスターとモンスターが選ばれると、両方のモンスターが死にます
  • モンスターとモンスター以外が選ばれると、モンスター以外が殺されてしまいます
  • ウサギとウサギが選ばれると、何も起こりません
  • ウサギと人間が選ばれると、人間の生存確率が最も高くなるように、ウサギを殺す、またはそのままにする、のどちらかの選択をします

モンスターの数Mとウサギの数Bが与えられたときに、最後に人間が生き残る確率を答えなさい。ただし、M、Bともに1000以下の整数とする。

以下、ヒントと回答です。 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

ヒント

①うさぎは実は考慮しなくていい。

②モンスターが奇数だったら...?

↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

私の回答 by Ruby

MONSTER = ARGV[0].to_i
PERSON = 1

class Integer #Override
  # 5C2 = 10 みたいなやつ
  def c(m)
    (1..self).to_a.combination(m).to_a.length
  end
end

def recursive_battle(monster, result=1)
  return 0 if monster.odd? #偶数なら生存確率0%
  return result if monster <= 0 #基底部
  existence_this_time = existence(monster) #今回の生存確率を計算
  existence_total = result * existence_this_time #前回までの生存確率 * 今回の生存確率
  recursive_battle(monster - 2, existence_total) #Monsterの数を2匹減らして、再帰する。
end

def existence(monster)
  1.0 - (monster.to_f / (monster + 1).c(2).to_f )
end

puts recursive_battle(MONSTER, PERSON)

解説そのうち載せます。

アルゴリズム問題: モンスターvsうさぎvs人間

TopCoderOpen 2008 Qual Round 1に出題されたEasy問題

いったいどこがEasyなんだ......

人間が1人、モンスターがM匹、ウサギがB匹います。ここから、モンスターか人間がいなくなるまで無作為に2匹(もしくは1人と1匹)を選び出し、以下の行動を繰り返します。

  • モンスターとモンスターが選ばれると、両方のモンスターが死にます
  • モンスターとモンスター以外が選ばれると、モンスター以外が殺されてしまいます
  • ウサギとウサギが選ばれると、何も起こりません
  • ウサギと人間が選ばれると、人間の生存確率が最も高くなるように、ウサギを殺す、またはそのままにする、のどちらかの選択をします

モンスターの数Mとウサギの数Bが与えられたときに、最後に人間が生き残る確率を答えなさい。ただし、M、Bともに1000以下の整数とする。

以下、ヒントと回答です。 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

ヒント

①うさぎは実は考慮しなくていい。

②モンスターが奇数だったら...?

↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

私の回答 by Ruby

MONSTER = ARGV[0].to_i
PERSON = 1

class Integer #Override
  # 5C2 = 10 みたいなやつ
  def c(m)
    (1..self).to_a.combination(m).to_a.length
  end
end

def recursive_battle(monster, result=1)
  return 0 if monster.odd? #偶数なら生存確率0%
  return result if monster <= 0 #基底部
  existence_this_time = existence(monster) #今回の生存確率を計算
  existence_total = result * existence_this_time #前回までの生存確率 * 今回の生存確率
  recursive_battle(monster - 2, existence_total) #Monsterの数を2匹減らして、再帰する。
end

def existence(monster)
  1.0 - (monster.to_f / (monster + 1).c(2).to_f )
end

puts recursive_battle(MONSTER, PERSON)

ロゴ作った #100DaysDesign #Day3

FigmaVectorの練習を兼ねて、いろいろな図形をつくった。

箱、星、お金マークいろいろつくって最終的に 自分で昔つくったWebサービスのロゴをつくった。

f:id:moriwm77:20180710084900p:plain

もうちょっとこれに合うフォントほしい

トレース祭り2日目 星降る夜の映画祭 #100DaysOfDesign #Day2

100DaysOfDesign トレース祭り2日目

星降る町の映画祭サイトをトレースした。 star-cinema-festival.com

f:id:moriwm77:20180709210902p:plain

学んだこと

  • fontの幅だけでかなり印象が違う
  • 言わずもがなfontの種類ではかなり印象が違う
  • fontの調査方法(WhatFont? を活用)
  • 近接効果のために、形状を変えるのもテクニックとしてあり(Figmaではできなかった)

できなかったこと

fontの形状をいろいろ変えること(Figmaだとできない?)

明日やること

本家の下の部分が、改善の余地があるので、 自分なりに作ってみる。

2018年 細字系フォント 決定版!

細字系

日本語: 'Noto Sans Japanese' 英語: 'Helvetica-Neue''

font-family: 'Helvetica-Neue', 'Noto Sans Japanese', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
font-weight: lighter;

NotoSans Japaneseはwebフォントなので以下のようにインストールしましょう。

<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet">

サンプル画像

Image from Gyazo

うつくしい....

#100DaysOfDesign Figmaでデザインの練習はじめた

f:id:moriwm77:20180708105047p:plain

デザイン学習はじめた。

目的は、以下の2つ

1. デザイナーの仕事を巻き取って、スピードを上げたい。

社内のデザイナーがパツパツのため、 重要度の低いデザインのしごとを自分で巻きとり、自己完結してスピードをあげたい。

2. 自分の独自の強みとしたい。

機械学習やらアルゴリズムごりごりエンジニアの方面では、数学ニガテな自分では勝てない。 サーバーサイドエンジニアがやりたがらないデザインの方面で1つ強みを形成しくという戦略。 スライドデザインとかは得意だったので適正もあると判断した。

FIgmaでデザイン学習開始

Figmaというツールでデザインの学習をはじめた。 このツール、Webエンジニアがちょこっとデザインを学びたい時には最高だと思う。 理由は2つ

1. (今の所)無料である

Adobeはいわずもがな高い。Sketchは年9000円かかる。 一方でFigmaは今のところ無料である。

2. 同時編集できる。

スプレッドシートのように同時編集ができる。 社内のデザイナーにレビューをもらうのがめちゃくちゃ楽そう。

Figma

使い勝手はとてもよかった。

直近の目標を掲げる。 短期目標: 今月で10個のProductを上げること。 中期目標: 今年度中に50個のProductをあげること。