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

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

興味が持てない

数年後に読んで笑うつもりで書く。なんか言い訳っぽい文章になってしまって嫌だなぁ。

興味の薄れるスピード

最近興味の薄れるスピードが速くなってきて、老化を感じる。あれもこれもと落ち着かないよりはマシかもしれないけど、問題なのは技術に関する興味が全体的に薄れてきている気がすること。

色々なお話を聞くのは楽しいので、勉強会やカンファレンスへはわりと行く。いくつか楽しそうなものを知って「あとで詳しく追ってみよう」とブクマしたりするけど、翌日になると大抵は興味がなくなっている。

興味の範囲

ここ1年半でほんのちょっとでも新しく触ったものといえば JS(Reactとか) / Python / Haskell / Lisp / Go あたりなんだけど、ほとんど続いていない。JS はインターンとかで使う機会があるので書いてる。言語そのものや仕組みに興味があって使うんじゃなくて、必要があるから使ってる気がしてきた。周りの人がほとんど「技術が好き」でやっているのに対して自分は「仕方なし」にやっているのではと思うとなんだか泣きたくなる。向上心の無い人はすぐいらなくなる世界だから、このままいくと自分もすぐに……。

ものを作るのは大好きで、思いついたその日のうちに雑なbotを作ったり、高専祭に展示するゲームのシステムなんかも手を挙げて喜んで作るのだけど、どうしてもその根本の技術的なところへ目が向けるのが苦手だ。「とりあえず動くように」記号を組み立てるしかできない人間なのでとてもプログラマと名乗れる気がしない。

「とりあえず動くように」が好きで「効率よく動くように」が苦手なのは、むかし競プロやろうとして挫折したこととか、大変見にくい資料に出会いすぎたこととか、単に脳ミソが追いついてないとか、いろいろある。なんか書いてたら結局お前の脳ミソが追いついてないだけではとなって余計につらくなってきたぞ


後期からは研究が始まるけど、それ以外はしばらくコード書くのお休みしようと思う。数週間前からゆっくりそんなことを考えていて、今日やっとこれを書いてみた。

友人に「最近デザインに興味がある」と言われた時、オススメしたい本たち

というより、自分が読んで面白かった本を中心に紹介。わりと初心者なので「いい感じの見た目」な意味でのデザインに関する本が中心だけど、自分の成長とともに、もっと広い意味でのデザインに関する本も追加していきたい。

あと、本だけじゃなくてサイトとかアニメ、広告なんかも載せていくつもり。

なんとなく感覚をつかみたい

ノンデザイナーズ・デザインブック

ノンデザイナーズ・デザインブック [第4版]

ノンデザイナーズ・デザインブック [第4版]

  • デザイナーじゃない人向けに、見せかたの原則が説明されている
  • デザイン気になりはじめて、この本から入りました、って人も多い
  • 身近なところでは、スライドや紙の資料を作るときに役立ちそう
  • 第4版からは日本語タイポグラフィについての内容が追加されて最高

なるほどデザイン

  • 前半はデザインの流れ(とても参考になる)が紹介されてる
  • 後半は引き出しとかネタ帳みたいな

やさしいデザインの教科書

やさしいテ?サ?インの教科書

やさしいテ?サ?インの教科書

  • 実例が多くて、文章もそこそこある
  • まさに教科書!

デザインのルール、レイアウトのセオリー。

デザインのルール、レイアウトのセオリー。

デザインのルール、レイアウトのセオリー。

  • どこが良くてどこが良くないのかを文章で説明してくれてる
  • Webに限らず広い用途でのデザインが中心

Web デザイン

だから、そのデザインはダメなんだ。 WebサイトのUI設計・情報デザイン 良い・悪いが比べてわかる

  • Webサイトに焦点を当てて、見開き1コンテンツで良いところ良くないところを解説してくれるから見やすい
  • 実際のサイト例を載せてくれてるのですぐ参照できる。うれしい
  • 説明がかなり詳しめ

情報の整理

今日からはじめる情報設計 -センスメイキングするための7ステップ

今日からはじめる情報設計 -センスメイキングするための7ステップ

今日からはじめる情報設計 -センスメイキングするための7ステップ

  • 設計 の意味が強いデザインのお話
  • スライド作る時とか便利そうな感じ
  • 情報がありすぎて混乱してきたら、これを読んで冷静になる

東京防災

東京防災

東京防災

  • 都が出してるくせにめちゃくちゃかっこいい
  • Kindleで無料なのでぜひ手元にとっておきたい
  • コンテンツの並べ方や注意をひかせる工夫とかいっぱい詰まってる

yamasy1549.hateblo.jp

世界観に溺れたい

シドニアの騎士

www.knightsofsidonia.com

エヴァンゲリオン

www.evangelion.co.jp

  • 色・フォントの使い方などなど…
  • アニメ放送開始が20年前だから、今でも各話タイトルのタイポグラフィカッコいいって言われるのすごいよね

ご注文はうさぎですか?

www.gochiusa.com

  • パステルカラーのお手本帳
  • だけじゃなく、思い切った勢いのある色使いもしている
    • ごちうさ サブタイトル
    • フォントのちからつよい :muscle:
    • ちなみにサブタイトルで使われているフォントは LETS STORE で8割方手に入る。学生割引で ¥5000/4年 とかいう破格

もっと広義な話

融けるデザイン ハード×ソフト×ネット時代の新たな設計論

融けるデザイン ―ハード×ソフト×ネット時代の新たな設計論

融けるデザイン ―ハード×ソフト×ネット時代の新たな設計論

  • UI(ユーザインタフェース)って本当にこうあるべきなの? みたいな
  • 当たり前に使っているものを見直すきっかけになる

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

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

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

  • UIデザインを人間の身体目線で説明している
  • 「使いやすい」の理由を理論的に解明
    • 他の本を読んで「あれはそういうことだったのか〜」と納得できる
    • あたま良くなった気分になる

yamasy1549.hateblo.jp

インダストリアルデザイン

デザインの骨格

デザインの骨格

デザインの骨格

  • 今読んでるところだけど、とにかく文章が読みやすい
  • 見ているものを新たな目線で捉えなおしていく。ものの見方が変わりそうな予感がする

PNGをよんで表示したい!

動機

パフォーマンス向上のためのデザイン設計

パフォーマンス向上のためのデザイン設計

「パフォーマンス向上のためのデザイン設計」という本を読んでいると、縦グラデーションの GIF と横グラデーションの GIF ではファイルサイズが大きく違うことが載っていた。水平方向の冗長性を取り除く圧縮アルゴリズムになっているらしく、気になったので軽く調べてみた。

調べていると、PNG は水平方向だけでなく垂直方向にもつよいことが書いてあった。PNG は CTF の問題でヘッダとか見たことあったので PNG で遊んでみようと思った。

つくったもの

github.com

f:id:yamasy1549:20170914021551p:plain

スクショだけ見てもわからんな… RGB じゃないと動かないのは仕様だしめっちゃ重いのも仕様!!!

フィルタリング形式の実装をミスるとこんなふうにアートになってたのしいあばばばば〜〜〜

f:id:yamasy1549:20170914021912p:plain

バイナリをよんで Tk ってやつで 1 ピクセルずつ四角を描いてる(ほかにやりようが思いつかなかった)。Ruby/Tk のドキュメントが殆どなかったので Python 実装 Tkinter の使い方を読んでオプション名とかを知った。

www.geocities.jp

PNG の中身(超ざっくり)

仕様書はこれかな…?

Portable Network Graphics (PNG) Specification (Second Edition)

日本語訳(PNG 1.0 仕様書の改訂版)は Web アーカイブとして残っている

PNG (Portable Network Graphics) Specification

N 番煎じなんだけど、メモとして。

シグネチャ

PNGシグネチャは 8 byte で、決まっている。 50 4e 47PNG を表している。

89 50 4e 47 0d 0a 1a 0a

チャンク

I***はチャンクと呼ばれて、以下でワンセットになっている。

  • 長さ
  • チャンクの名前
  • データ
  • CRC
チャンクの名前 なに
IHDR サイズとか、画像の情報
IDAT 画像データ本体。複数あっても良い
IEND おしまいを表す

画像データ本体が大きすぎたら分割されて IDAT が複数できるのかな(よくしらない)

わかりやすい PNG の話 for Web

フィルタリング

PNGDeflation 圧縮という圧縮方式みたいで、フィルタリングで工夫すると圧縮効率が良くなるらしい。フィルタリング形式は 0 から 4 まで 5 つあって、これは行ごとに好きなものを選べる。256 を法として modulo をとるので、255 を超えることはない。

フィルタリング形式 なに
0 None そのまま出す
1 Sub ピクセルとの差分
2 Up ピクセルとの差分
3 Average ピクセル・上ピクセルの平均をとったものとの差分
4 Paeth ピクセル・上ピクセル・左上ピクセルPaeth predictor したものとの差分

上に貼った事故画像は None と Sub を正しく実装したもので、1 行目だけ正しく表示されている。

Paeth predictor

Paeth predictor はざっくり言うと、左・上・左上のうちどれが一番近いかなーというのを調べる。縦方向と横方向で変化の小さいほうを選び、縦と横で全く違う感じに変化してたら中間として左上をとるような…

# a: 左
# b: 上
# c: 左上

def paeth_predictor(a, b, c)
  p = a + b - c
  pa = (p - a).abs
  pb = (p - b).abs
  pc = (p - c).abs
  
  if pa <= pb && pa <= pc then a
  elsif pb <= pc then b
  else c
  end
end

雰囲気こんなかんじで、これを R / G / B についてやる。

PNG Specification: Filter Algorithms

かんそう

たのしかった。気が向いたら、実装飛ばしてるところをもうちょっと書きたい。