みかづきブログ その3

3ヶ月つづけてみました。

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

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

(PC版はまだできてないのですが)

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

f:id:kimizuka:20170704221415g:plain

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

ことのきっかけ

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


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

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

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

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

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

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

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

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

kimizuka.hatenablog.com

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

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

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

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

kimizuka.fm


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

と。そんなかんじです。

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

ドメインを取ってから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を知らなかった頃は、わざわざ外部ファイルにしようとしていました。


charset

誤)

<meta charset="UTF-8" />

正)

<meta charSet="UTF-8" />

これ、最後まで気づきませんでした。
キャメルケースにしておかないとレンダリングされません。
サイトが文字化けしたので気づきました。


以上です。どこかで誰かの参考になったらうれしいです。

ウェバイス(ウェブ+デバイス)をつくろう! 😎

先日、「エンタープライズIoTLT #8 ヘルスケアIoTLT」で発表させていただいた資料を若干調整して公開してみました。

b2b-ch.infomart.co.jp

発表資料

IoTほど大袈裟ではないのですが、ウェブ+デバイスでインターネットに繋がるデバイスをつくる方法を紹介しています。
お手軽なので、簡単なモックなら量産できます。

Twitterでも一部公開しているのでぜひともご覧ください!(ウェバイス以外もありますが)

twitter.com

いままでつくったウェバイスまとめ

サプライズ・ウィンドウ


サプライズ・ウィンドウ


サプライズ・ウィンドウ

ガラケーにプラ板をくっつけることによって、車の窓の外を走る忍者を再現したウェバイスです。
僕がウェバイスを思いつくきっかけになった思い出の一品です。

黄金チャーハン


光り輝く黄金チャーハン

クロッシュの中にスマホを入れて、開いた時(傾いたとき)に音と光でチャーハンを盛り上げるウェバイスです。

合コンさしすせそボタン


合コンさしすせそボタン from 高橋奈々 on Vimeo.

ボタンの付いた箱の中に、ワイヤレスキーボードとiPhoneが入っていて、
ボタンを押す ⇒ ボタンがキーボードを押す ⇒ ウェブページで検知 ⇒ 音が出る というピタゴラスイッチ的なウェバイスです。
こちらは実装のみを担当しております。

スマート絵馬


スマート絵馬

絵馬の中にスマホを入れて、遠くの人でも願いごとを投稿できるようにしたウェバイスです。

マットマックス 4DX


マットマックス 4DX

マットの下に、PC、センサ、Arduino、振動子といろいろ入れ込んだウェバイスです。
振動で踏み心地が変化します。
ハプティクスはムービーではなにも伝わらないであろうと思い、Facebookによく流れてくる動画広告を参考に映像をつくりました。



いかがでしょう。普通にデバイスをつくるよりも高速につくれるので体験の検証とかにはおすすめです。




ツイッターやってます!