👆
引越し先はこちらです！
以前、PC版についてはこんな記事を書きましたが、スマホ版はどうしたもんかと思っていました。
（上に透明なDIVとかを置いてクリックすると消えるようにとかしてました）
しかし、最近スマホでGoogleMapを見ると、
2本指での操作が必要となってます。
これは便利だ。
いつからこうなったんだろうと調べてみると、
去年の11月に導入された機能の模様です。
iframe埋め込みするだけで自動的にこのオプションが有効になる模様。これは便利だ。
だた、マウスホイールイベントのOFFは相変わらずAPI経由じゃないと行えない模様。
API経由で地図の操作を2本指にしたい時は、 gestureHandlingオプション をつかえば良いとのこと。
Controlling Zoom and Pan | Maps JavaScript API | Google Developers
ただし、APIを無料で呼び出せるのが、1日25,000回までなのでアクセスがあるサイトに導入するのはなかなか迷うところです。
ドメインを取ってから3年間、ずーっと工事中だったポートフォリオサイトですが、
ついに昨日公開できる状態になりました。
Nginx + Express + React + Redux + PostCSSでポートフォリオサイトをつくりました。実験的なUIを採用してスマホファーストを心がけてます。PC版は鋭意制作中です。https://t.co/8TAJ1hNgbM
— 君塚史高 (@ki_230) 2017年7月3日
（PC版はまだできてないのですが）
今回のサイトで一番こだわったところはなんといっても、利き手に合わせたUIです。
今回はこの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をつくりました。
— 君塚史高 (@ki_230) 2017年1月24日
当たり判定とデザインを分離して充分な当たり判定を確保しているところがこだわりの一品となっております。https://t.co/NChysxH4bT
とまあ、こんな感じでマテリアルデザインを勉強しては、CSSで再現してというのを繰り返し、
マテリアルデザインっていいなぁって思っていたのですが、
https://twitter.com/ki_230/status/871573084100149248
このダイアログをつくったときにちょっと思いました。
「ボタンをboldで処理しているけど、ボタンってわかるのであろうか？」と。
まあ、わかる人にはわかるでしょう。
インスタグラムとかもそうなってますし。
ただ、まったくスマートフォンをつかったことがない人はどうでしょうか？
そもそもスマートフォンが世に出た頃は、
スマートフォンは未知の物体であったわけで、
だからこそ、スキュアモーフィックデザイン（実世界の似たような機能を持ったものをモチーフにしたデザイン）が流行ったわけです。
未知の物体に対して、アフォーダンスを生み出すためのモチーフだったわけなのです。
確かにスマートフォンがこれだけ普及しきった昨今。
もはやスキュアモーフィックデザインの出番は終わったと考える人もいるでしょう。
しかし、本当にそうなのでしょうか。
敢えていま、スマートフォンをもう一度、大きなタッチディスプレイと捉えたとしたら、
どういうアプローチがとれるであろうか？的なことを考えはじめたわけです。
しかし、現実問題、僕は画作りができないわけで、
そんな僕でも相違工夫でなんとかなるアプローチはないかなぁと考えはじめました。
で、思い出したのが、こちらの記事です。
大きなタッチディスプレイに対し、
親指で操作できる範囲を示すモチーフとしてカードを斜めに並べるというアプローチ。
これは使えるのではないかと。
マテリアルデザインでもカード型のUIの例はたくさんありますし。
レイアウトの工夫で新しいアフォーダンスを生み出せるのではないかなぁと考えました。
しかし、このデザインには大きな欠点がひとつありました。
レイアウトが完全に右利き、というか右手で操作する用なのです。
しかし、その対策は驚くほどあっさり思いつきました。操作する手に合わせてレイアウトを変更しようと。
昔から野球が好きで、投手の聞き手に合わせて、入る打席を切り替えるスイッチヒッターに対し、
かっこよさを感じていたのが大きな要因のひとつだと思います。
スイッチヒッターのように相手に合わせて自分を変えるUIをつくるぞ。と。そう考えたのです。
そしてそんなこんなで、完成したのが、こちらのUIなのです。
つくってみて、この方向性には大きな可能性を感じました。
手始めに利き手に合わせてデザインを変えるUIをつくってみましたが、
例えば性別によってUIを変えたり、年令によってUIを変えたり、演奏したことがある楽器によってUIをかえたりすれば、
もっともっとつかいやすく直感的なUIをつくれるかもしてないと思っています。
引き続き、研究していこうと思いまいた。
と。そんなかんじです。
ドメインを取ってから3年間、ずーっと工事中だったポートフォリオサイトですが、
ついに本日公開できる状態になりました。
Nginx + Express + React + Redux + PostCSSでポートフォリオサイトをつくりました。実験的なUIを採用してスマホファーストを心がけてます。PC版は鋭意制作中です。https://t.co/8TAJ1hNgbM
— 君塚史高 (@ki_230) 2017年7月3日
デザイン、サーバサイド、フロントすべてやりきりましたが、その反動でPC版は鋭意制作中となっております。
また、平日は仕事、休日は育児という感じなので、隙間隙間で進めて、かれこれ半年かかってしまいました。
時間がかかってしまったことの原因としては、デザイン、サーバサイドが専門外で勉強しながら進めたこと、
そして何より、普通に実装が終わりそうなタイミングで、思いつきでReactの採用を決めたことです。
と、連鎖的に勉強しなければならないものが増えていき、さらにSCSSで書いた部分が完全に移植できなかったり、
JavaScriptをほぼ1から書き直したり、と、あれこれしているうちに時間がかかってしまったんですが、その分学びも大きいものになりました。
（でも、完成したコードを親切なサーバサイドエンジニアに見てもらったところ、サーバサイドレンダリングのやりかたが根本的に違うと教えてもらいました。直さなければ！）
なので、しばらくはここでの学びを忘れないうちにメモしていこうと思います。
まずは、一番時間を引き伸ばしたであろうReactから。
ReactはJavaScript内にHTMLを書くことのできるすごいやつなのですが、一部普通のHTMLと書き方が異なる点があります。
僕はノリでReactを採用したので、なかなかはまりました。何処かで誰かの役に立つことを祈りながらまとめておきます。
誤）
<div class="box"></div>
正）
<div className="box"></div>
classが予約後なのでエラーが吐かれます。
classNameと書きましょう。これは基本ですね。
誤）
<div style="background: red;"></div>
正）
<div style={{background: "red"}}></div>
オブジェクトを渡しましょう。
{}内にはJavaScriptが記述できます。{}内にオブフェクトを渡しているので{{}}という形になっているのです。
誤）
<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を知らなかった頃は、わざわざ外部ファイルにしようとしていました。
誤）
<meta charset="UTF-8" />
正）
<meta charSet="UTF-8" />
これ、最後まで気づきませんでした。
キャメルケースにしておかないとレンダリングされません。
サイトが文字化けしたので気づきました。
以上です。どこかで誰かの参考になったらうれしいです。
