Notes

メモ書き

MVCモデルから組織の役割分担について考えてみた

まずMVCモデルとは

f:id:cask-st:20171203191834p:plain

引用:Cocoa Core Competencies | Model-View-Controller

 

MVCモデルとはざっくりいうと、アプリを設計する時の考え方の一つで、

  • Model(機能やデータ)
  • View(見た目)
  • Controller(管理)

にという機能ごとに分けて実装してあげてね。という考え方になります。

なぜこうゆう作りにするかというと、View を変更した時に Model に影響がないようにするためです。(逆も然り)
そのため ViewとModelは直接やり取りはせず、必ず Controller を経由させます。

これを組織に置き換えると 

例えば何かの製作から販売まで行っているような会社があった場合、こんな感じになるかと思います。

f:id:cask-st:20171203192916p:plain

 

ありがちな誤り(Controller の肥大化)

プログラミングをしていてよくある誤りとして、Controller に何でもかんでも実装してしまうパターン。Controller がごちゃごちゃになって手の付けられない状態になってしまうことも。。

 

これを実際の組織で考えると、マネージャーが実作業(販売や製品製作)をやり過ぎてしまって管理に手が回らなくなってしまうパターン。。

マネージャーの一番重要な仕事はマネージメント(製品制作や販売店の管理)ですが、そこが回らなくなってしまい、もう何がなんだか。。というケースは度々耳にします。

 

Controller は Model や View でやるべきことを実装しない。

 ⇒ マネージャーは販売や製品製作業務を極力行わない。

Model / View が大きくなってきたら Controller に実装するのではなく、別のModel / Viewクラスを作る。

 ⇒ 販売や製品製作の人手が足りなくなってきたらマネージャーが負担するのではなく人を増やす。

 

システム構造と人間社会は通じるものがあるから面白いですね。
まぁシステム構造は人間が考えてるものだから当たり前といえば当たり前なんですが笑

 

ではでは今日はこの辺で。

 

残らない物はなぜ簡単に購入できてしまうのか

 

先日飲み会帰りの電車の中でふと思ったこと。

 

飲み会ではそこまでほしくもないのにノリでもう一杯!

とかやっちゃう癖に、服とか買う時って安くても物凄く悩んでしまったり。。

これってなんでなんだろ?(きっと酒のせいだけじゃない!)

 

1杯1000円のウィスキーと1枚1000円のTシャツでは、失うお金は同じのはずなのにどうしてここまで精神的な差が出てしまうのか。

 

ここの違いはズバリ「残る物であるかどうか」です。

 

もし購入した物が失敗だった場合、残る物と残らない物では後悔の度合いが全然違います。

  • 残る物は、それを見る度に「あぁ失敗したな。。」という気持ちになります。捨てるという行為もエネルギーを使うのでダブルで辛い。。
  • 残らない物は、その場で「不味かった」とか「つまらなかった」とか思うだけで、後で嫌なエネルギーを使う事がない。

ここらへんを感覚的にわかっているから残る物を購入する時って躊躇してしまうんでしょうね。
そして、残る物の購入で失敗した場合は早めに手放してあげないと、何度も「あぁ失敗したな。。」と思ってしまうので、物を手放すハードルもなるべく低く設定してあげる必要がありますね。

要は嫌なエネルギーの使い方は極力避けるような選択をしていくべきなんです。

 

以上、自分の思考整理でした!

iOS/AndriodアプリのUXについて

…の観点で自分なりに思うところがあったので書き留めておきます。

 

ユーザー操作が少ない方に寄せる

操作が少ない方が触る方は楽ですよね。
ただ、ここでやりがちなのが説明できる方に寄せてしまうパターン。

(クレーム対策で説明を盛りだくさんにするのはありがちなアンチパターンだと思ってます)

 

例えば、
入力不備等によりボタンを押しても次に行けないケースを考えます。

 

ボタンを押したタイミングでダイアログを表示

「ボタンを押す」「ダイアログを消す」という2つのユーザー操作が入ってしまう。
但し、ダイアログの説明を見てくれる可能性が高いので説明はしやすい。

そもそもボタンを押せないように無効化しておく

ユーザー上の2つのユーザー操作がなくて済むため、ユーザビリティ観点ではこちらの方が優れていると思ってます。
ボタンが無効化になっている原因がわかりずらいというデメリットがあるけれど、それは他の入力項目をわかりやすくする方向で考えた方が良い場合が多い。

 

まぁ、ここはケースバイケースではあるんですがね。
例えばパスワード入力画面でこれをやってしまうと、色んなパターンのパスワードを試しやすいので攻撃がしやすいのと、攻撃が検知しづらくなってしまう。(3回間違えたらブロック、とが出来なくなってしまう)
入力中に都度確認していたらトラフィックやファイルアクセスも増えてしまいますしね。

 

実装が楽な方に寄せる

決して実装で楽したいからという理由だけで言ってるわけじゃないですよ!

 

ここで言っている実装が楽というのは、「条件分岐が少ない」を指してます。
人が物を触る時は、少なからずそれがどうゆう仕組みであるかを考えながら操作しています。
プログラム上の条件分岐の少ないと言う事は、その思考回数を減らすと言う事につながるため理解しやすくなります。

 

もちろんバグ防止や保守性向上にもつながるので、そうゆう点でもユーザーに優しいですね。
(決して実装で楽したいからという理由だけで言ってるわけじゃないですよ!)

 

うちの音楽録音環境 | KORG KROSS-61 x TC-HELICON VoiceLive Touch x Studio One

うちの音楽録音環境の機材構成と設定について記載します。

機材

気づけばほとんど Version 2 が発売されていたので、少し古い機材になるかもしれません。

キーボード:KORG KROSS-61
KORG キーボードシンセサイザー KROSS-61 クロス 61鍵

KORG キーボードシンセサイザー KROSS-61 クロス 61鍵

 

実はもともと同モデルの88鍵モデルを使っていたのですが、持ち運びが大変だったので61鍵モデルに買い換えました。

61鍵モデルは4.3kgとキーボードの中でも最軽量なので持ち運びがとても楽!

オーディオインターフェイス:TC-HELICON VoiceLive Touch
TC-Helicon VoiceLive Touch ボーカル用マルチエフェクター

TC-Helicon VoiceLive Touch ボーカル用マルチエフェクター

 

もともとボーカル録音用として購入したモノですが、最近はキーボードのIFとして使うことの方が多いです。宝の持ち腐れ感。

DAW:Studio One Prime (無料版) 

そこまで複雑な事をする予定はなかったので、無料だからという理由で使い始めた Studio One をそのまま使い続けてます。 

 

機材構成 

f:id:cask-st:20171108212637p:plain

 

画像は各マニュアルから引用してます。

KROSS 1 - クイック・スタート・ガイド | KORG (Japan)

TC-Helicon | VoiceLive Touch | 製品マニュアル

 

各種設定

TC-HELICON VoiceLive Touch

[Mix]ボタンを長押ししてセットアップ・メニューを起動し、以下のように設定する。


4.GTR FX STYLE : OFF

  → 自分は VoiceLive Touch によるエフェクトを使わないのでOFF。
5.OUTPUT : STEREO
6.USE : TRACK

 

Windows PC (Windows10)

タスクバーのスピーカーアイコンを右クリックしてサウンド設定を起動。

f:id:cask-st:20171108214253p:plain

VoiceLive Touchを「有効」にして「既定のデイバスとして設定」する。(右クリックで設定項目が表示される)

f:id:cask-st:20171108214311p:plain

 

Studio One

"メニュー" > "Studio One" > "オプション..." でオプションを開く。

オプション画面のオーディオ設定タブで "コントロールパネル" をクリックして Windows Audio を開く。

Windows Audio 画面のレコーディングデバイスで "アナログ コネクタ(VoiceLive Touch)" を選択する。 

(再生デバイスを設定する場合もここで行う)

f:id:cask-st:20171108215645p:plain

 

ちゃんと設定したのは数年前で思い出しながら書きましたが、確かこれで大丈夫だったはず。

 

 

そのまま洗える衣類ケース?100均の洗濯ネットで十分!

テニスの練習後の汗まみれのウェア類。

 

・着替えてビニール袋に入れるてカバンにしまう

 ↓

・ 家に帰って洗濯ネットに入れ替える

 ↓

・ 洗濯機にIN!

 

というのが洗濯までの流れでした。

インナーでモンベルのジオラインを愛用しているため洗濯ネットは必須なんです。

 

けどね、いちいちビニール袋から出して洗濯ネットに入れ替えるのが面倒くさくなってきたんです。

 

そんな矢先に無印良品の「そのまま洗える衣類ケース」というものを知りました。

これに入れて持って帰ってそのまま洗濯機にIN!すれば解決じゃん?

ということで早速最寄りの無印良品へ。

実際触ってみて。

 

物はいいんです。

さすが無印。

オシャレだし。

作りもしっかりしてそう。

 

ただ、高い・・・。

洗濯ネットに1000円越えか・・・。

 

 

待てよ。

とりあえず100均の選択ネットも見てみよう。と思い立ち、その場は購入せずに100円ショップへ。

 

で、これ買ってみました。

f:id:cask-st:20171126235959j:plain

 

これがなかなかGoodでした!

何気に2重構造になっており、汗まみれのウェアを入れてもカバンがビショビショになるようなことはありませんでした。

こんな感じ。

f:id:cask-st:20171127000211j:plain

(多分二重構造になっていないやつは他に汗が移りやすそうな気がします。。)

 

もちろんオシャレさでは無印には到底敵いませんが、機能面 / 性能面ではやりたいことが満たせているので良い買い物ができたなと。

 

・・・って気づけば無印をディスるような内容になってしまった気がしますが、僕は無印良品大好きです!普段とてもお世話になってます!

 

テキストだけを貼り付けたい時は Ctrl + Shift + V

※環境:Windows10

 

Google Keep で下書きをしておいてブログに張り付けるということは多いのですが、この時 Ctrl + C → Ctrl + V でコピペをすると書式(フォント等)まで一緒にコピペされてしまいます。

Google Keep に限らず書式のあるテキストをコピペすると同じようなことが起こると思います。

HTML編集で見るとこんな感じ。

f:id:cask-st:20171029223313p:plain

そんな時は Ctrl + C → Ctrl + Shift + V でコピペすると書式を除いたテキストだけを張り付けることができます。

f:id:cask-st:20171029223347p:plain

貼り付け先のエディタなどによってはこの方法が使えないこともありますので、悪しからず。

はてなブログの画像を枠線で囲む(初心者向け)

こうゆう白ベースの画像ってブログの背景との境目がわかりづらいので枠線付けたいと思ってたんです。

f:id:cask-st:20171022121158p:plain

やり方

 編集モード「見たまま」で画像を入れて、「HTML編集」で見るとこんな感じになるかと思います。

 <img class="hatena-fotolife" title="f:id:cask-st:20171022112233p:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/c/cask-st/20171022/20171022112233.png" alt="f:id:cask-st:20171022112233p:plain" />

ここをこんな感じにします。赤字が追加したところ。

<img class="hatena-fotolife" style="border: solid 1px #BDBDBD;" title="f:id:cask-st:20171022112233p:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/c/cask-st/20171022/20171022112233.png" alt="f:id:cask-st:20171022112233p:plain" />

そうするとこんな感じで枠線が付きます。

f:id:cask-st:20171022121158p:plain

 

解説

追加した「style="border: solid 1px #BDBDBD;"」部分の解説です。

style

ウェブサイトのレイアウトスタイル(例えば、文字フォントや色、等)を指定する属性です。

style="この中にどのようなレイアウトスタイルにするか書きます"

border

枠線の「線種」「太さ」「色」を指定するための属性です。

border: solid 1px #BDBDBD;

この場合、太さ1pxで灰色(BDBDBD)の実線(solid)で枠線を表示します。

色を変えたい場合は「カラーテーブル」とか「RGB」とかで検索すると、どんな値を入れればいいかすぐわかると思います。

 

もちろん指定する値を変えれば色々な設定できますが、今回はこの辺で。