2017-07-04

利き手に合わせてUIがうまれるまでの経緯 👐

ドメインを取ってから3年間、ずーっと工事中だったポートフォリオサイトですが、
ついに昨日公開できる状態になりました。

Nginx + Express + React + Redux + PostCSSでポートフォリオサイトをつくりました。実験的なUIを採用してスマホファーストを心がけてます。PC版は鋭意制作中です。https://t.co/8TAJ1hNgbM
— 君塚史高 (@ki_230) 2017年7月3日

（PC版はまだできてないのですが）

今回のサイトで一番こだわったところはなんといっても、利き手に合わせたUIです。

f:id:kimizuka:20170704221415g:plain

今回はこのUIが生まれた経緯についてまとめたいと思います。

ことのきっかけ

年始からマテリアルデザインを勉強したことがきっかけです。

要素を変形させるときに、幅変形と高さ変形のタイミングを微妙にずらすとおしゃれということを教えていただきました。https://t.co/y44iypp15b
— 君塚史高 (@ki_230) 2017年5月9日

HTMLとCSSでトグルボタンUIをAndroid風に仕上げてみました。https://t.co/8YK1nDqcyD
— 君塚史高 (@ki_230) 2017年5月2日

CSSでいまどきのメニューボタンのアニメーションをつくりました。https://t.co/WRYnEfDkTi
— 君塚史高 (@ki_230) 2017年4月17日

Android風のスライダーUIをつくりました。
当たり判定とデザインを分離して充分な当たり判定を確保しているところがこだわりの一品となっております。https://t.co/NChysxH4bT
— 君塚史高 (@ki_230) 2017年1月24日

とまあ、こんな感じでマテリアルデザインを勉強しては、CSSで再現してというのを繰り返し、
マテリアルデザインっていいなぁって思っていたのですが、

https://twitter.com/ki_230/status/871573084100149248

このダイアログをつくったときにちょっと思いました。
「ボタンをboldで処理しているけど、ボタンってわかるのであろうか？」と。

まあ、わかる人にはわかるでしょう。
インスタグラムとかもそうなってますし。

ただ、まったくスマートフォンをつかったことがない人はどうでしょうか？

そもそもスマートフォンが世に出た頃は、
スマートフォンは未知の物体であったわけで、
だからこそ、スキュアモーフィックデザイン（実世界の似たような機能を持ったものをモチーフにしたデザイン）が流行ったわけです。
未知の物体に対して、アフォーダンスを生み出すためのモチーフだったわけなのです。

確かにスマートフォンがこれだけ普及しきった昨今。
もはやスキュアモーフィックデザインの出番は終わったと考える人もいるでしょう。
しかし、本当にそうなのでしょうか。
敢えていま、スマートフォンをもう一度、大きなタッチディスプレイと捉えたとしたら、
どういうアプローチがとれるであろうか？的なことを考えはじめたわけです。

しかし、現実問題、僕は画作りができないわけで、
そんな僕でも相違工夫でなんとかなるアプローチはないかなぁと考えはじめました。

で、思い出したのが、こちらの記事です。

kimizuka.hatenablog.com

大きなタッチディスプレイに対し、
親指で操作できる範囲を示すモチーフとしてカードを斜めに並べるというアプローチ。
これは使えるのではないかと。
マテリアルデザインでもカード型のUIの例はたくさんありますし。
レイアウトの工夫で新しいアフォーダンスを生み出せるのではないかなぁと考えました。

しかし、このデザインには大きな欠点がひとつありました。
レイアウトが完全に右利き、というか右手で操作する用なのです。

しかし、その対策は驚くほどあっさり思いつきました。操作する手に合わせてレイアウトを変更しようと。
昔から野球が好きで、投手の聞き手に合わせて、入る打席を切り替えるスイッチヒッターに対し、
かっこよさを感じていたのが大きな要因のひとつだと思います。
スイッチヒッターのように相手に合わせて自分を変えるUIをつくるぞ。と。そう考えたのです。

そしてそんなこんなで、完成したのが、こちらのUIなのです。

kimizuka.fm

つくってみて、この方向性には大きな可能性を感じました。
手始めに利き手に合わせてデザインを変えるUIをつくってみましたが、
例えば性別によってUIを変えたり、年令によってUIを変えたり、演奏したことがある楽器によってUIをかえたりすれば、
もっともっとつかいやすく直感的なUIをつくれるかもしてないと思っています。
引き続き、研究していこうと思いまいた。

と。そんなかんじです。

2017-07-03

個人的にはまったReactでHTMLと違う書き方をしなければならない箇所まとめ（class属性、style属性、scriptタグ、chrset） 👍

JavaScript

ドメインを取ってから3年間、ずーっと工事中だったポートフォリオサイトですが、
ついに本日公開できる状態になりました。

Nginx + Express + React + Redux + PostCSSでポートフォリオサイトをつくりました。実験的なUIを採用してスマホファーストを心がけてます。PC版は鋭意制作中です。https://t.co/8TAJ1hNgbM
— 君塚史高 (@ki_230) 2017年7月3日

デザイン、サーバサイド、フロントすべてやりきりましたが、その反動でPC版は鋭意制作中となっております。

また、平日は仕事、休日は育児という感じなので、隙間隙間で進めて、かれこれ半年かかってしまいました。
時間がかかってしまったことの原因としては、デザイン、サーバサイドが専門外で勉強しながら進めたこと、
そして何より、普通に実装が終わりそうなタイミングで、思いつきでReactの採用を決めたことです。

ReactをつかうならReduxをつかいたい。
Reactをつかうなら、webpackをつかいたい。
webpackをつかうならPostCSSをつかいたい。
Reactをつかうなら、サーバサイドでレンダリングしたい。よし。Expressをつかおう。
Expressをつかうならサーバを借りよう。せっかくだからNginxにしてみよう。OSはなんとなくUbuntuにしてみよう。

と、連鎖的に勉強しなければならないものが増えていき、さらにSCSSで書いた部分が完全に移植できなかったり、
JavaScriptをほぼ1から書き直したり、と、あれこれしているうちに時間がかかってしまったんですが、その分学びも大きいものになりました。
（でも、完成したコードを親切なサーバサイドエンジニアに見てもらったところ、サーバサイドレンダリングのやりかたが根本的に違うと教えてもらいました。直さなければ！）

なので、しばらくはここでの学びを忘れないうちにメモしていこうと思います。
まずは、一番時間を引き伸ばしたであろうReactから。

個人的にはまったReactでHTMLと違う書き方をしなければならない箇所

ReactはJavaScript内にHTMLを書くことのできるすごいやつなのですが、一部普通のHTMLと書き方が異なる点があります。
僕はノリでReactを採用したので、なかなかはまりました。何処かで誰かの役に立つことを祈りながらまとめておきます。

class属性

誤）

<div class="box"></div>

正）

<div className="box"></div>

classが予約後なのでエラーが吐かれます。
classNameと書きましょう。これは基本ですね。

style属性

誤）

<div style="background: red;"></div>

正）

<div style={{background: "red"}}></div>

オブジェクトを渡しましょう。
{}内にはJavaScriptが記述できます。{}内にオブフェクトを渡しているので{{}}という形になっているのです。

scriptタグ

誤）

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA', 'auto');
  ga('send', 'pageview');
</script>

正）

<script dangerouslySetInnerHTML={(() => {
            return {
              __html: `(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');ga('create','UA','auto');ga('send','pageview');`
            };
          })()} />

アナリティクスとか、Facebookとか、Twitterのscriptを埋め込む時、
普通に埋め込むと{}とかがエスケープされてしまうので、dangerouslySetInnerHTMLをつかいました。
dangerouslySetInnerHTMLを知らなかった頃は、わざわざ外部ファイルにしようとしていました。