読者です 読者をやめる 読者になる 読者になる

記すに足らず。

デザイン&プログラミングのことも書くし、それ以外のことも書く。

駅トイレの緊急ボタン

思ったこと

駅のトイレ(個室)の緊急ボタンにはもれなく注意書きが添えてある。
今更感はあるが良い解決策はまだ出てないっぽいので考えてみた。

f:id:blog_711fumi:20160926175257j:plain

なぜ間違える人が多いのか

いたずらなどの可能性は置いておくとして。

1, 見た目・形で区別(役割の判別)がつかない場合がある
上の写真で言えば、水を流すボタンも緊急ボタンも同じアクションであるボタン。緊急ボタンの見た目は白であまり緊急感もない。

2, 使用時に必ず操作しなければいけないスイッチがある
注意書きにも書いてあるように、「水を流す(ボタン等)」という必ず操作しなければならないスイッチがあるのでそれと間違ってしまう。

3, 簡単に押せるボタンにしてある
簡単に届く場所に配置、押しやすいボタンにしてあるのは当然で、非常時にもとっさに気がついて押せるようなボタンでなければいけない。

どうしたらよいだろう

1に関してはまあ水を流すをもっと違う動き(ボタン以外)にするとか緊急ボタンを赤くするとかありそうだけどとりあえず置いといて2,3を考える。

状況によって目立たせる(押しやすくする)べきボタンが変わってしまうのが問題ぽい。
通常時は「水を流すボタン」にすっと気がつけるようになっていなければいけないが、緊急時には「緊急ボタン」に真っ先に手が伸びるようにならなければいけない。

ステータスによってUIを変えることは可能か?

もし、Webやアプリなんかのように

  • 状況によってUIを変えられる
  • 現在のユーザーの状況(通常時:緊急時)を判断できる

のであれば話は簡単なんだけどそうはいかない。

緊急時とは?

そもそもどんな時に「緊急ボタン」が押されるのかを確認する必要がありそう。
どのようなトラブルがあって、どのような状態・体勢で緊急ボタンを押したのか。

…さすがにちょっとググってもどういう時に押されることが多いのかはわからなかった。
鉄道会社にはそういうデータがあるんだろうけど。

なのでありそうなシチュエーションを考えてみた。

1, 突然めまいなどに襲われ動けなくなった
体調を崩す場合は視線がさがる場合が多そうなので(へたり込んじゃったりとか)、スイッチはなるべく下の方に付けたほうが良さそう。

2, ヤベぇやつがずっと個室のドアをノックしてきて外に出れない
この場合はトイレの外(そいつがいる方向)に目が向くだろうから、ドアとかに付けるべきか。

3, トイレが故障して水が溢れて止まらない
トイレ本体(便器)を見ながらワタワタしそうなので、便器にボタンを付けるとか?

というわけで

おそらくシチュエーションとしては一番1が多いと思うので、こうするのはどうでしょう。

洋式トイレの場合

  • 便座に座って正面の壁のすこし下の方に緊急ボタンを配置する
    • 便座に座った時に必ず目に入り、存在を確認できる
    • 便座に座った状態だと手が届かない
    • 水を流す、ウォシュレットといったボタンはまとめて便座に座った状態で手の届く場所に配置する

ボタン類は扉には付けれないと思うので、個室の扉を開けると便座が横を向いて置かれている形になると思います。
ボタンの種類によっては荷物とか足とかで誤って押しちゃう可能性があるかも…

和式だったり、視覚に障害のある方向けにどうするかといった問題があるんですけど。

フロントエンドの勉強も兼ねて「近場の食事できる場所をテキトーに教えてくれるWebapp」作った

web service JavaScript gulp npm

お勉強がてら簡単に作るはずだったのに疲れた。

https://god-of-meal.herokuapp.com/
GitHub - 711fumi/god-of-meal: God will choose an eating place.

やったこと

現在地(緯度経度)から近そうなごはん処をぐるなびAPIを使って取得、テキトーに選んで表示する。

環境(試したかったものとか)

  • React.js
  • Rollup.js
  • Express(Node.js)
  • Heroku
  • Gulp.js
  • Material Desing Lite
  • Enzyme(mocha, chai)

メモっておこう(参考にしたものとか)

JSで位置情報を取得

Geolocation APISSL(HTTPS)じゃないと使えないっぽい。

JavaScriptで位置情報を取得する方法(Geolocation API)

Material Design LiteのTypographyのオプション

なんかTypographyのオプションとかここに載ってなかったので
(見逃してるだけかなー)

material-design-lite/src/typography at master · google/material-design-lite · GitHub
他にもいろいろありそう

静的ページをHerokuで公開

結果静的なページだけじゃなくなったけどね…

GitHub - nulltask/heroku-static-provider: Static site provider for Heroku.

Herokuでデプロイ後にGulpタスクを実行したかった

Haml/Scss/ES6あたりのコンパイルに使用

Heroku Gulp — Medium

Herokuで公開しているサイトでSSLを強制させたい(Node.js)

Node.js on HerokuでSSL(https)接続を強制する方法 - Qiita

Enzymeを使ってのReactコンポーネントのテスト

動くことを確認する程度で終わってしまったが

ReactのテストをEnzymeで書いてみよう - Qiita

Google design guidelines のライティングに関する部分を少し訳してみる。 〜 Language & Tone 〜

web design

Google design guidelines のガイドラインの中にライティングに関するページが。
参考になるかなと思い、訳してみた。
※LanguageとToneのみ

注:だいぶひどいですがニュアンスが伝われば…
良い表現を教えてほしい _(´ཀ`」 ∠)_


Material design - Writing

テキストは読み手の文化や言語にかかわらず、だれでもどこでも理解できるようにしておくべきです

明瞭で、性格で、簡潔なテキストは、インターフェースを更に使いやすく信頼のあるものにします。

これらのガイドラインに加えて、エラー、ダイアログ、セッティング、データフォーマットといった個別のUIエレメントのガイドラインを必ず参照するようにしてください。

# Do.
Text should be simple, concise, and direct
テキストはシンプルで、完結で、直接的であるべきです

言葉

ユーザーを示す

UIでは以下のどちらかの形でユーザーを示す:

  • 二人称で示す→「あなた」「あなたの」

アプリケーションが直接ユーザーに話しかけているような会話の形式のような場合、殆どの場合この形を使います。

  • 一人称で示す→「私」「私の」

しばしばコンテンツやアクションの主体がユーザーであるということを強調するために、このような示し方をする必要が出てきます。

Quickly open the camera without unlocking your screen
(あなたの)スクリーンのロック解除なしで、素早くカメラを開きます

Your places
あなたの場所(??ホーム??)

ユーザーを二人称で示すときは、「あなた」「あなたの」という表現を使う

I agree to follow the Google Terms of Service
私はGoogleの利用規約に従うことに同意します

My Account
(私の)アカウント

ユーザーを一人称で示すときは「私」「私の」という表現を使う

私(の)とあなた(の)という表現を混ぜて使ってはいけません。同じ文脈内で両方の表現を使うことは混乱を招く原因となります。

# Don't.
Change your preferences in My Account.
(私の)アカウントにおいて(あなたの)設定を変更してください。

”私たち”という代名詞は避ける

あなたもしくはあなたのアプリケーションがユーザーに対してどのように働くかということよりも、ユーザーとユーザーがアプリケーションで何ができるかということにフォーカスしましょう。

# Do.
Get started with these popular posts on Google+.
Google+で人気の投稿と一緒に(??)はじめましょう。
# Don't.
To get you started, we’re showing you popular posts on Google+.
はじめるにあたり、Google+で人気の投稿をお見せします(??)。

例外として、ユーザーからの意見を確認したり提案に返答したりするような、(中の)人が実際にユーザーに対して行動する場合があります。 この場合は「私たち」を使うほうが適切かつ好感が持たれます。

# Do.
We’ll review your appeal and respond within a few days.
私たちがご意見を確認し、返答させていただくのに数日かかります。
# Don't
Your appeal will be reviewed, and you will receive a response within a few days.
あなたのご意見が確認され、返事を受け取るまでに数日かかります。

簡潔に

誘導や発見をしやすくするために、文節をわかりやすく小さく書きましょう。

# Do.
Send money to anyone in the US who has an email address. It’s fast, easy, and free.
メールアドレスを持っていてアメリカにいる誰かに送金してみましょう。早く、簡単に、自由に送金できます。
# Don't.
Send (and receive) money with friends and family in the US with an email address. It’s a two-step process with little-to-no latency and there aren’t any charges for the recipients of the money.
Eメールアドレスを使ってアメリカにいる友達や家族とお金をやり取りしましょう。2ステップで待ち時間も少なく、受け取る側の手数料も発生しません。

文や言い回しは短くし、できるだけコンセプトは少なくしましょう。

# Do.
Read the instructions that came with your phone
お使いの電話に付属している説明書をお読みください。
# Don't
Consult the documentation that came with your phone for further instructions.
お使いの電話の詳細な使い方は付属のドキュメントをご参照ください。

現在形で書く

製品の機能の説明は現在時制を使いましょう。製品のいつの行動を説明する場合でも未来形を使うのは避けましょう。

過去や未来について書く必要がある場合は、シンプルな動詞の形を使いましょう。

シンプルに直接的に書く

シンプルに直接的に書くことで、ユーザーが理解しやすくなります。

一般的な導入句は省いてもかまいません。

# Do.
Save changes?
変更を保存しますか?
# Don't
Would you like to save your changes?
# Do.
Message sent
メッセージが送信されました。
# Don't
Message has been sent
# Do.
Register to vote
投票するために登録してください
# Don't
You must register before you can vote
# Do.
Delete this photo?
この写真を削除しますか?
# Don't
Are you sure you want to delete this photo?

すべての読み手のレベルにあった書き方を

英語になれた人でもそうでない人も簡単に明確に理解できる一般的な言葉を使いましょう。

# Do.
Turn on Location History
ロケーション履歴(??)を有効にします
# Don't
Enable Location History

業界固有の専門用語やUIの機能のために作られた名前などは避けましょう。

# Do.
Preparing video…
動画を準備しています…
# Don't
Buffering…
バッファ中です…
# Do.
“Ok Google” isn’t supported on your phone
「OKグーグル」はあなたの電話(端末)ではサポートされていません
# Don't
“Ok Google” is only supported on dual-core devices
「OKグーグル」はデュアルコアのデバイスのみに対応しています

「スライダー」や「メニュー」といった共通の言い方はわかりやすいですが、ユーザーへの指示には(メニューまたはボタンのような)要素の種類ではなくUI要素のラベルを使いましょう(??)

# Do.
Click Continue
「コンテニュー」をクリックしてください
# Don't
Click the Continue button
「コンテニュー」ボタンをクリックしてください

機能のすべての部分で一貫した言葉を使用する

動作の説明には一貫した方法で動詞を使用しましょう。

# Do.
Remove photo
写真を削除します

メニューアイテム

# Don't
Delete photo

メニューアイテム

# Do.
Remove photo?
写真を削除しますか?

ダイアログのタイトルは短く

# Don't
Remove photo from page?

このダイアログのタイトルは必要以上に長過ぎます

# Do.
Cancel | Remove

ダイアログのボタン

# Don't
Cancel | OK

ダイアログのボタン

目的で始める

もし文章にユーザーがとる行動と目的を達成するための指示が含まれている場合は、行動から文章を始めます。

# Do.
To remove a photo from this album, drag it to the trash
写真をアルバムから削除するには、ゴミ箱にドラッグします
# Don't
Drag a photo to the trash to remove it from this album
写真をゴミ箱にドラッグすることで、アルバムから削除できます

必要なことのみ詳細を明らかにしましょう

最初のやり取りですべての詳細を説明する必要はありません。 機能に関する詳細は、ユーザーが探したり情報を必要とするのに合わせて明らかにしていきましょう。

# Do.
Remove downloaded book?
ダウンロードされた本を削除しますか?
# Don't
Are you sure you want to remove this downloaded book? You won’t be able to access it unless you’re online.
本当にダウンロードされた本を削除しますか?オンラインでなければアクセスできなくなります。

「絶対」とは絶対に言わないこと

「絶対」などの表現は避けましょう。

# Do.
Your circle names aren’t shared
あなたのサークル名はシェアされません
# Don't
We’ll never share your circle names
あなたのサークル名をシェアすることは絶対にありません

ボタンと関連する要素のテキスト

ダイアログに表示されるボタンと青字もしくはアンダーラインのテキスト

button usage
[ Action ] 動詞の一貫した使い方については以下のガイドラインを参照
Back 複数ステップのプロセスを許可する
Cancel 行動をキャンセルする
Dismiss 結果にかかわらず非表示にするためのメッセージまたはダイアログを表示する(??)
Done 複数ステップのプロセスが完了したことの確認
Got it! 結果にかかわらず非表示にするためのメッセージまたはダイアログを表示する(??)(OKに近い)
Learn more 追加の内容へユーザーを導く
Next 複数ステップのプロセスにおいてユーザーを次のステップに導く
No thanks ユーザーが辞退することを許可する
Not now ユーザーが行動や決定を後回しできるようにする。その製品が機能するために必要不可欠、法的な理由がある、もしくはその他の切迫した理由のある行動がダイアログで呼ばれる時のみに使用する。「No thanks」オプションを提供するのを避けるための仕組みとして「Not now」を使ってはいけない
OK ユーザーが目の前の作業に関するアクションを確認するのを許可する
Skip 作業を進めたり中断するものを避ける方法をユーザーに提供する

語調

友好的に、礼儀正しく、そしてユーザーにフォーカスする

UIの文章はUIの見た目が直感的で、効果的で、親しみやすく、信頼できるように補完してくれます。魅力をちらっと見せつつも(??)、ユーザーの注意を奪ってはいけません。

# Do.
MyApp isn’t responding
アプリケーションが反応していません。

Do you want to close it?
閉じますか?
# Don't
Sorry!
ごめんなさい!

Activity in MyAppActivity (in the  MyApp app) is not responding
(??)は反応していません。

控えめに

自慢や大げさな約束をしてはいけません。機能がどう働くかを明らかにすべきで、どんなに優れているかを述べる必要はありません。

# Do.
All your savings in one place
あなたが保存したものはすべて1箇所にまとめられます。
# Don't
Great deals at places you’ll love
あなたの好きな場所に(??)
# Do.
More restaurant reviews
さらにレストランのレビューを見る
# Don't
All restaurant reviews
すべてのレストランのレビューを見る

魅力的に

それぞれの機能の利点にフォーカスする。機能のエントリーポイント(ボタン、メニューアイテム、リンク、広告)の実装の詳細、警告、制限は省く。

# Do.
To save power, switch Location mode to Battery saving mode.
消費電力を抑えるために、ロケーションモードをバッテリーセービングモードに切り替えます。
# Don't
Manually control GPS to prevent other apps from using it.
他のアプリが使わないように、GPSを手動でコントロールします(??)。

前向きに

安心してもらうために、肯定的な視点の情報を表示します。

# Do.
Use 24 characters or fewer for file names.
ファイル名は24文字まで使えます。
# Don't
Your file name must be less than 25 characters.
ファイル名は25文字以下でなくてはいけません。

本質的に

すべてのメッセージについて、本当にユーザーはそれを知りたいか?とあなた自身に問いましょう。エラーはユーザーの自身のタスクへの注意をそらしてしまいます(??)。テキストが全く無いUIが最も効果的な場合がしばしばあります。

暗示的な(??)、驚かせたり通常でない、単純なアクションが成功したことを伝える、メッセージは避けましょう。

# Do.
Signing in...
サインイン…

Your phone is contacting Google. This can take up to five minutes.
写真がGoogleに同期されました。5分ほどかかります。
# Don't
Signing in...
サインイン…

Your phone needs to communicate with Google servers to sign in to your account. This may take up to five minutes.
あなたのアカウントにサインインするために、写真をGoogleのサーバーに同期する必要があります。5分ほどかかります。

PadrinoでBootstrap4(α)を管理するためにnpmを使う→Herokuにデプロイ

Padrino gulp npm

ちょっとしたサイトをPadrinoで作る際、Bootstrap4(公開時はまだα版)を使ってみることにしました。 せっかくなのでnpmを利用してJS及びCSSを管理することに。

理解できてない部分もありますがとりあえずメモ。

Bootstrap4をnpmで管理

Padrinoでプロジェクトを作った後、npm initなんかでpackage.jsonを作っておく。

参考にさせていただきました:
npmでnode.jsのpackageを管理する - Qiita

npmコマンドでインストールします。

$ npm install bootstrap@4.0.0-alpha.2 --save-dev

これで./node_modules/bootstrap/以下に必要な物がダウンロードされます。

gulpでJS/CSSを取り込む

Padrinoは必要なアセットファイルをpublic以下においておく必要があります。
gulpを使って、Bootstrapと自身で用意したJS/CSS(SCSS)をまとめてpublic以下に置くことにしました。

※PadrinoでSCSSのコンパイルは可能ですが、そちらは利用せずgulpでおこないました。

gulpのタスクとして

  1. Bootstrapと自身で用意したSCSSをコンパイルして1ファイルにまとめてpublic/stylesheetsに配置するタスク
  2. SCSSに変更を加えたら1を実行する監視タスク
  3. Bootstrapと自身で用意したJSをコンパイルして1ファイルにまとめてpublic/javascriptsに配置するタスク
  4. JSに変更を加えたら3を実行する監視タスク

の4つを作成。

ソース

gulpタスクはimport_assets.jsにまとめて記載。
詳細は省く。

Gulp task to import assets (bootstrap) at Padrino ...

SCSS

SCSSに関しては、gulp-sassを使ってBootstrapと自前のSCSSをまとめてコンパイルしています。
同時にsourcemapの作成やminifyも行っています。

JS

JSはbrowserifyを使ってbootstrap含め必要なモジュールをまとめています。
こちらもsourcemapの作成とminifyを行っています。

参考にさせていただきました:
browserify-shimを使って、CDN経由で外部JSライブラリをrequireする | mae's blog Gulp + browserify + watchify + gulp-sass で自動高速コンパイル環境 – モンキーレンチ

JSのコンパイル(browserify)で悩んだ部分

やりたいことは自前のmain.jsでbootstrapのJSを読みこむこと。

import 'bootstrap';

そのための設定をpackage.jsonでおこないました。
自分の認識ががあっているのかどうか怪しい。。

抜粋

"browser": {
  "bootstrap": "./node_modules/bootstrap/dist/js/bootstrap.js"
},
"browserify": {
  "transform": [
    "browserify-shim"
  ]
},
"browserify-shim": {
  "bootstrap": {
    "depends": [
      "jquery:jQuery",
      "tether:Tether"
    ]
  }
}
  1. main.jsでimport(require)するために、browserにbootstrapの場所を指定。

  2. bootstrap.jsはCommonJS的に?module.exportされていないので、そういうものをモジュールのように取り込むためにbrowserify-shimを使う。

  3. bootstrapはjQueryやTetherに依存しているので、browserifyで取り込む際にそれらを参照させる必要がある。 それがbrowserify-shimの設定部分に記述してある(depends)。 依存するモジュールとして、npmでインストールしているjqueryを「jQuery」に、tetherを「Tether」として呼び出せるように指定してあげる。

これでguplタスクを動かして、無事bootstrap4のJSを取り込んだCSSを作成することができました。

Herokuで動かす

Herokuでアプリケーションを立ち上げるときに、npmのインストールがどうすれば実行されるのかわからなくて少し悩んだので。

まずnpm installが完了したらアセットファイル作成のgulpタスクを実行するようpackage.jsonに書いておきます。

抜粋

"scripts": {
    "postinstall": "gulp import-assets"
 },

とりあえず作ったPadrinoアプリをHerokuにプッシュしてみたところ、bundle install ~ Webサーバーの立ち上げはやってくれるんだけど, (Gemfileとかconfig.ruを見て実行してくれてる?) npmに関しては何もやってくれない。

調べてみるとbuildをおこなってくれるbuildpackの設定をする必要があるみたい。

参考にさせていただきました:
herokuにデプロイするときでもgruntしたい!(+rubyサーバー) - Kesin's diary

公式のドキュメントにちょうどやりたいことが載っていた。
Using Multiple Buildpacks for an App | Heroku Dev Center

まずrubyアプリケーションのビルドを行ってくださいという設定

$ heroku buildpacks:set heroku/ruby

次にnode.jsのビルドもお願いする設定。indexは順番の指定っぽい

$ heroku buildpacks:add --index 1 heroku/nodejs

これでHerokuにプッシュするとpakage.jsonを見てnpm installをおこなってくれる。

もう一つ困ったこと

npmのライブラリはあくまでPadrinoで読み込むJSやCSSを管理するものなので、 インストールするときに--save-devを付けてインストールしていました。

しかしHerokuへのデプロイ時にはdevDependenciesのライブラリはインストールされません(本番環境だから?) なのでdevDependenciesもインストールするよう環境変数を設定する必要がありました。

$ heroku config:set NPM_CONFIG_PRODUCTION=false

参考にさせていただきました:
sprocketsではなくnodejsを使うRailsアプリをHerokuにデプロイする方法 - Qiita


これでHerokuにプッシュしたところ、npmのインストール&gulpタスク、gemのインストールが走り、 bootstrap4を読み込んだ状態でPadrinoアプリが立ち上がりました!

JS初心者がつまずくのはJSの書き方よりもこういったモジュール管理とかそういったところなのではと。

I'm in Mars.

music

という歌がある。

FoZZtoneというバンドのボーカル、渡會さんのソロ作品。

可笑しなものさ 笑いながら憧れの中に住み着いた俺達は 雨乞いばかり ここには水がなくってさ みんなビールばっか飲んでるんだよ そんで泣いている 涙は集めて飲むんだってさ


夢に見た憧れの 場所についたら 何もない荒野 まるで火星 そんな気分 例え話さ

憧れの場所に住んだ人、やりたい仕事についた人。

じゃあ地球に帰ればいい、ってなれないところが辛いとこでもある。

【JS】jQueryの.onでES6のアローファンクションに書き換えたら動かなくなったので

JavaScript

jQueryを使ったコーディングで関数定義を ES6(Babel使用)のアローファンクションで書き換えたら動かなくなったので。

単純に関数内でのthisの意味が変わるから挙動も変わる。

アロー関数 - JavaScript | MDN

$('#foo').on('click', function() {
   $(this).hide();
});

$('#foo').on('click', () => {
   $(this).hide();
});

に書き換えると動かない。

↓実際にthisを表示してみた場合undefinedになったけどそんなもんなのか。 windowとかじゃないのか。

See the Pen Check 'this' behave at arrow function by Fumihiro Nakahara (@711fumi) on CodePen.

一応の解決方法

何故かAirbnbのJSスタイルガイドで発見。

jQuery: $(this) vs $(event.currentTarget)

$('#foo').on('click', ev => {
  $(ev.currentTarget).hide()
});

イベントの対象となっているターゲットを呼ぶことで動くみたい。

Airbnbの人はthisを使う必要があったらfunction()で書いても良しって言ってるね。

【HTML/CSS/JS】擬似要素の中身(content)を動的に変更する。

html css JavaScript

擬似要素のcontentについてそういえば調べたこと無かったのを反省。

擬似要素はJSから操作できない

ある時擬似要素(:before, :after)の内容(content属性)を動的に変更したくてJSで変更しようとしたが、
調べた感じ、JSで擬似要素は変更できないぽい。
CSSを修正して、とかは可能だが)

擬似要素は元?の要素の属性を参照できる

擬似要素のcontent内でattr()を使用することで、
擬似要素が設定されている要素の属性を取得しcontentにセットすることができる。

content−スタイルシートリファレンス

.sample::before {
  /*sampleクラスのidがcontentにセットされる*/
  content: attr(id);
}

デモ

ボタンをクリックした時にJSで#sample-buttonのdata-count属性を書き換える(カウントアップ)と
::afterのcontent(ボタン右上の数字)に反映される。

See the Pen Use attr method at pseudo-element by Fumihiro Nakahara (@711fumi) on CodePen.