FUJILOG

見た、聴いた、触れたこと。 動かしたもの、書いたもの。 ウェブとリアルの備忘録です。

参加録 "第二回 design-jp"

定時ちょっと前に上がって六本木へ。
初めて訪ねたGooleオフィス。
安藤さんの書籍を何冊か読んで、気になったのでこのイベントに参加しました。
 
UXガイドにあたり、アニメーションの考察を交えてお話されていたので、講演の至るところで納得感を覚えながら聴きました。
 
下記イベントのメモです。
 
イベント名:第二回 design-jp
日時:2017/05/10 19:00-22:00
URL:https://design-jp.connpass.com/event/55950/
 
講演内容
 ①セッション1「インタラクションデザインの調整のコツと、それにまつわるコミュニケーションの仕方」
 ②セッション2「誰のためのマイクロインタラクション? -マイクロインタラクションへの理解とプロトタイピングの実践」(仮)

[twitter]
 #designjp
[slack] ※参加歓迎
 https://design-jp.herokuapp.com
[“sli.do”] ※匿名質問板
 www.slide.com with code #Y883

コンセプト:
 なぜインタラクションか?を軸に、エンジニアとデザイナーをまたぐ勉強会の企画。

■ セッション①
@yukio_andoh

slideshare
https://www.slideshare.net/yukio.andoh/design-jp-vol2-motion-design-animation

"motion, animation” の話し
 Motion ディレクション
 Communication

By Norman McLaren
 アニメは装飾でない、機能である

アニメなぜ?
 変化を伝える
 小さなものに注意換気
 操作の楽しみ
 構造の理解(奥行きとか)

フリクション(=意図的違和感)
操作素早いけど、アニメでわかりやすくする

時間+位置、形
時間+色、透明度(グラデーション、、)

時間軸の解釈
 15パターン

アニメの認識
 300ms-400msがおよそ
 初回はさておき。
 慣れるといらいらがたまる

 素早すぎると操作感が薄まる、溜めが必要。
 その後。本編が始まるようにする。

 止まった感が出るのも同様。
 最小でも150msは見せるのがいい

Chatbotの返事。
 これも然り。早すぎると違和感。
 時間がかかるのが自然。

240fps
 スマホでもハイスピードカメラで撮影可能
 アニメーションを厳密に視える。

秒針が進んで戻る(15fps)

Remoteテストキットは良いツール
 By NTTレゾナント

ディズニーのアニメの法則
 予兆
 予備動作
 モーション

参考書籍あります
 ・ディズニーアニメーション
 ・アニメーターズサバイバルキット
 ・アニメーションの本
 ※加えて、vimeo参照

Vimeoのアニメーション動画
 スクロール実装も予備動作あり
 リスのしっぽのモーション

気に入ったアニメーションサンプルを蓄えておく
“path”は昔流行った

参照:
uimovement.com

動きすぎると酔う
 ディズニー
  コマ撮りしてアニメ化する
 日本
  鉄腕アトム
  コスト減のためにカット数を減らして、脳で保管する
  いろんな方向、カーブでは非統一になる
 参照
 https://inspirationmobile.tumblr.com/

デザイナー
 丸を書く
  美観、自分のわかるものを武器にできる

Sign Inフォーム
 エンジニアはデザイナーの気づいた違和感を大事にする。

LOUIS VUITTON
 「店舗」は文字感の幅広い(優雅な印象)
 「商品」は文字感の幅狭い(洗練された印象)

哲学者 ジョン・デューイ
 体験が共有財産になるように
 擬音語、擬態語の統一

書籍
 GIONGO GITAIGO JISYO

曖昧な解釈
 拡大する、展開する

すいすい
すかっ
すこん
すっ
ずっしり
すっぱり
すとん

ものの流れ
 easingの名前(Flashには表現の呼び方が揃っていた)
 easeOutSide
 等、30通りくらい

「動き」のひらめき
「動き」の試作、検討
「動き」の批評
「動き」の実装
プロダクト(※ここはディレクションではない)
調整

Facebookのアイコン

単体では判断できないことも「比べる」とわかる
素早い、ゆっくり。
製作者は思い入れがは消しいので、一旦寝かしてみる。

Google 時間のあるプロジェクト
 動画と進行表を作成して、エンジニアに渡す

複数機種向けの開発
 一番古い、遅い機種を最初に調整する
 その後、高性能、リッチな端末で滑らかに仕上げるのが(・∀・)イイ!

アニメとは?
 アートは技術に
 技術はアートにインスピレーションを当たっる

オススメのツール
 Processing
 Keynote (マジックムーブで、easier/out, 等のモーションデザインが設定できる)
 Kite Composer(タイムラインでアニメが作れる)
 https://kiteapp.co/

React+Sketch.appに期待。

映画のタイトルシーケンスが良い
 モーションタイポグラフィーも参考になる。

その他参照:
https://material.io/guidelines/motion/material-motion.html
https://framer.com/examples/featured/

KIJIMA MAMORU
@sadako_a_

FOLIO Inc.
 次代型証券サービス
 iOSのリードデザイナー

マイクロインタラクション

例:登録フォームのインタラクション

分解
 メアド:フォームチェック
 PW:フォームチェック
 規約:チェック状態チェック
 登録:アクションチェック

設計上のアプローチ

意識する3つのポイント
 ①無意識に操作
 ②ほしいものをすぐ提供する
 ③人間味のあるフィードバックを与える

クラウドのファイルビューアー

読み込み中…に対するユーザーの感情
 いつおわるの?
 どれぐらいでおわるの?

進捗バーが表示される
通信環境が悪いメッセージ
→ストレスフリーに

②メモアプリ

テキストエディア
操作がすぐできること
行き来が少ないこと

③404エラーページ

検索結果
該当なし…では冷たい

顔アイコン出す
再検索を促すメッセージ

その他事例
 DropboxテキストエディタPaperも出している
  保存自動的にされるとか
 Uber Eats
  この情報で正しいですか?

ユーザーをファンにする
 Sketch + Framer

UI設計
※Framerはインタラクティブプロトタイピングツール
記述はJS(coffee script)

認識の共有のズレ

ツール
 Prott
 InVision
 Xd

 Framer
 OrigamiStudio
 …

サイト「UXTOOLS」
 20個くらいある…
 自社にあったツールがいい
 例:ツイート画面のプロトタイプ

Group階層でSketchで揃えておく
※レイヤーではなく

オブジェクト生成
 コードベース
 GUIでも調整可能

SketchファイルのImport
 →Group階層で読み込まれる
 →レイヤー作成
 →アニメ調整(CSS調整に近い作業)

公式サイトのサンプルを見てコードを参照して、作れる
コーディングもデザインの一貫であると考える

■まとめ

マイクロインタラクション
 MicroInteraction <> Animation
ユーザー体験の向上
 表現のためだけでないアニメーション
Flamer
 Twitterの動画機能

LT
@nobsato

佐藤のぶや
 Secret Lab Inc.

提案型デザイン

6 things
 InViision事例

Ideaはどこから?
 ”Pentagram” UKのデザイン会社
 グラフィックデザイン
 (書籍)IDEAS ON DESIGN

ひらめきからの発想
 アイディアは日頃考えていることからの飛躍

参考
 MARVEL
 カイル・クーパーのデザイン

QA

Q:使っているサービスは?

 Prott (多い
 Invison
 Flinto
 XD
 Pixate

 使い分け?
  プロジェクトごととか

Q:エンジニアとデザイナーの間で animation/transition を作る時のコミュニケーション方法はどうやっていますか?

プロトタイプツールを用意する
 数字を調整して可視化するツール

Q:プロトタイピングをする時間がない場合などはどういった手法でインタラクション(アニメーションなど)を仕上げていくのでしょうか

定番、共通認識のもので固める

Q:どこをプロトタイプの引き際にしてますか?

工数。実装までのコミュニケーション次第。
フェディリティ。
共有の粒度を考えておく。
実物で。

Q:アニメーションの原則を体系的に学ぶ?

Udemyでオンラインで学ぶ。Pixarの講座。
それから手を動かす。
学校に通う。

Q:最近気になるWebサービスやアプリやデバイスは何ですか?

メルカリのカウが気になる。
 バーコードで出品できる。
 出品体験を簡単にする。
 メルカリポイントの経済圏、ポイントで買う。

意図的にリッチなモーション、チープなモーションを選ぶ。
安い、楽しいをデザインする。

Amazon Echo 画面つき

モーニン:スマホでカーテンが開閉できる
ぬいぐるみ:装着できるデバイス

スマホだけで完結しないサービス
生活に組み合わせるサービス
チャットのデザイン

Q:デザイナーにとって、Material Design って制限多すぎる気もするのですが、実際にどうでしょう?

制限多いとは思わない。
目的を満たす上で充実している。
アニメーションの理想、アーティスティック。それは目的が異なる。

最上でなければ、定番にしたほうがカッコイイ。

ワークショップは時間ないため次回へ見送り

マテリアルデザインアワードやっていますとのこと。
https://design.google.com/articles/material-design-awards-2016/

以上です。

合同会社設立について調べてみた

独力、4時間半で合同会社の法人登記ができたというエントリ。

旅行記のような感覚で書かれていたので、明るい門出のように見えました。 *1

xavier.hateblo.jp

 

自分でも軽く調べてみたところ、合同会社のメリットは以下のもの。

  1. 株式会社よりイニシャルコスト少なく設立できる
  2. 株式会社より柔軟な組織体制が実現できる
  3. 個人事業とは異なり有限責任で、法人格を得られる
  4. 法人を対象とする取引先のビジネスに取り組める

 

また、登記作業は委託しても、1万円弱 *2 で可能なよう。

「会社格安センター」の手順ページがわかりやすく、代行費用で7,600円とのこと。

株式会社設立までの流れ | 会社設立専門・格安代行センターKKC

 

なお、合同会社の年間ランニングコスト
年間の法人住民税が7万円 *3、税務委託の税理士費用が年間18万円 *4。あとは社会保険料

 

合同会社の特徴で、運営にあたり株式会社と異なる点もありました。

  • 定款を変更した場合原則として、法務局での登記手続きが必要
  • 変更内容に応じた登録免許税がかかる
  • 社員参画の制度が株式会社と(いわゆる従業員とは)異なり、社員に出資を求める、 また、社員離職時に出資金を返却する

合同会社運営上の注意点


それと、リスクについて。

合同会社解散には10万円ほどかかる *5。設立時は法務局のみで良いが、解散時には法務局と税務局対応が必要とのこと。 

 

雇用保険

サラリーマンと合同会社代表兼務であれば、勤務先を退職しても、合同会社代表ということで失業とならず失業手当は出ないこと。

 

社会保険

社会保険の制度上は一人一保険という考え方なのですね。ちょっと複雑ですが、労働時間のウェイトの重いほうの社会保険にまとめてしまうのが良いそうです。

社会保険の強制加入の基本的な要件は、1日および1週間の労働時間が一般労働者の3/4以上、1ヶ月の労働時間が一般労働者の3/4以上なので、この条件に合う方で社会保険に入ります。

2箇所以上の会社で勤務している場合、社会保険はどのような扱い… - 人力検索はてな

各事業所で受けた給与の合算額に基づいてひとつの標準報酬月額が決められ、それに基づく健康保険料を収める。

国と保険組合のように分かれている場合は、「保険者選択届」を提出し、任意に一つの保険者を決めることになっており、保険料徴収や保険給付は、それぞれの会社を通して行われる。 

複数の会社から給与を受けている人の社会保険料の徴収は? - 相談の広場 - 総務の森

 

保険料をまとめるにあたり勤務先経理部門への報告が発生するので、副業が許可されていることが前提となるようです。

 

諸々条件に合致するようであれば、良い制度に見えました。

 

■ その他参照

・電子定款を利用することで、独力でやるより安くできますいう訴求をしているサービスが多かったです

自分で手続きするより費用ダウン!会社設立サポート会社ランキング

 

 ・株式会社と合同会社の違い

株式会社と合同会社の違い | スマートアカウンティング東京(AXESS総合会計事務所)

 

合同会社作る前に、解散時のコストを知る

その設立ちょっと待って!合同会社を作るのは簡単?じゃあ止めるときは? | 合同会社設立.net

 

・追記

税理士の方による副業時の納税注意点の掲載ページを見つけました。

www.century-partners.jp

 

 

*1:独立するという内容ではありませんでしたが

*2:法人印鑑費用等は別

*3:赤字でも発生

*4:自分でやる場合は無料、1日30分くらいの工数

*5:解散及び清算人登記費用等

囲碁とITの関係

囲碁って卓上に広がる宇宙なんだと誰かが言っていたような。

週刊少年ジャンプ脳な自分には、小宇宙でコスモと呼びたくなる衝動があります。

 

さておき、情報技術(以下IT)の技術動向について考えたよしなしごとについて。

 

普段囲碁に嗜む習慣のない自分ですが、なにかのきっかけ(おそらく『ヒカルの碁』の読み直し)で日本棋院ホームページを覗くと、以下のページが目に飛び込んできました。

f:id:michael-unltd:20170511012624p:plain

「第一線・第二線」は海中・地下

「第三線・第四線」は大地

「第五線」以上は空・宇宙

対局のテクニック:序盤 一手目を打つ | 囲碁学習・普及活動 | 囲碁の日本棋院

 

囲碁があたかも戦争、兵術の話しでした。

ここで常套とされるのは、碁盤の端から中央に向けて攻めるというもの。

 

3図:中央をめざして打つ
陣地の骨格をつくる布石段階では第三線・第四線が最適でしたが、中盤に入ってさらに陣地を広げるには中央をめざして第五線以上に勢力圏を拡大する打ち方が重要です。

 

碁盤を地球とすれば、第五線以上は空から宇宙に相当するということを前に学びました。
中盤では、空・宇宙(中央)をめざして、まさに立体感覚で打つことが重要です。

対局のテクニック:中盤 基本戦略 | 囲碁学習・普及活動 | 囲碁の日本棋院

 

そこで、インスピレーションを受けて思うは、ITの「海、陸、空」。

 

クラウドサービスの登場以降、ネットワークとアプリケーションの垣根は溶けつつありますが、話しを簡単にするため、対象は「ITプラットフォーマー」。

 

縦に企業名を並べて、

 それらの提供しているサービスで横に並べると、 

クラウド」「OS」「モバイル」「ハード」「ソフトウェア」「コンテンツ」etc... 。

 

それぞれ、得意領域に軸足を置いて、領土拡大を企てている感が出てきます。

 

最近では、

  • FacebookがOculus買収でデバイスに乗り出す、VRコンテンツのプラットフォームを狙う
  • IBM人工知能コンテンツを呼び水としてクラウドに注力
  • Microsoftも自社OSでの囲い込みを避け、他社OS、他社モバイルプラットフォームへの開発環境を提供する、稼ぎ頭のOfficeソフト群もクラウドに組み込む
  • さらにMicrosoftはゲームデバイス開発で培った知見をもとに、MRデバイスを通じたB2B領域にも攻め入る
  • GoogleAppleはモバイルプラットフォームを握り、Amazonクラウドリーダーに躍り出るや否や、それでも矢継ぎ早に新サービス、音声認識バイスをリリース

といった施策を打ち出してきて、過去従来の企業イメージに縛られない時代になってきました。

 

業界といった観点ではプレイヤーが散在しすぎてなにが何やらになってしまいますが、ITプラットフォーマーで眺めると、陣取り合戦だなぁと思い至りました。

 

WeChatアプリでは声紋認識ログインできる件

プロフィール何書いたかなと思って、ふと起動したWeChatアプリ。

 

「設定」から、

f:id:michael-unltd:20170503032728p:plain

 

「マイアカウント」を開くと、見慣れぬ「声紋」…?

f:id:michael-unltd:20170503032715p:plain

 

声紋認証をONにすると、画面遷移されて。

表示された数字を画面下部の6点ボタンを押しながら読み上げる。

f:id:michael-unltd:20170503032657p:plain

 

声紋作成されました。

f:id:michael-unltd:20170503031352p:image

 

再度「声紋」画面を開くと、声紋認証が有効化されたのが確認できます。

登録し直しも可能とのこと。

f:id:michael-unltd:20170503031342p:image

 

一旦、アプリからログアウトして。

ログイン時に、登録数字を読み上げると問題なくログインできました。

 

おもしろかったのでメモ。

モバイル開発の三種の神器「PlantUML」「API Blueprint」「Charles」

過去のモバイル開発の振り返りも兼ねて。 

 

過去開発システムの背景

  • スマホアプリの新規開発、モバイルロジックの追加開発
  • サーバサイドは既存ロジックを利用
  • サービスはいずれもAWSで稼働中
  • 納期は1次開発3ヶ月、2次開発3ヶ月(※2サービスを各期間にわけて開発)

メンバー構成

  • iOSエンジニア、Androidエンジニア 各1名
  • サーバサイドエンジニア(フロント、インフラ兼務) 2名

 

そこでは、APIaryを使用していて、あのツール使ってよかったよねと。

APIaryの使用法はAPIを考えてBluePrint(Markdownライクな書式)で記述、githubにドキュメントをアップ。APIaryはそれをもとにモックサーバを作ってくれるというもの。

 

APIがコード管理されていたから変更履歴も追える、ドキュメント化されているので言った言わない論争が避けられるのは、納期が短いほどメリット大きいと思いました。

 

次回おなじような開発があったときの改善点などを考えていたときに出会ったのが下記資料。

speakerdeck.com

 

資料によると、リリース後にCacooで作成したUMLGithub Wikiに貼っていたものの、ドキュメントのコード管理できることを考えると、「PlantUML」がオススメとのこと

また実装工程で、サーバAPI見直しの間、アプリチームの待ち時間を発生させないために、Proxyサーバツールの「Charles」で検証を進めてもらうという手段もあるのを知りました。 

 

この資料には開発ツールに限らず、メンバーのマインド管理、メンタルケアを含むチームの幸せを実現する知恵が書かれているので、何度も読み返したいものです。

 

参照:

1ページで理解するP2P(Torrent編)

P2Pと聴くと不慣れなために抵抗感があったので、理解補助のためにTorrentの仕組みを調べてました。
 
すると、この資料を発見。

www.gitbook.com

 

ここまでP2Pの仕組みをわかりやすく書いてくれたkyorohiro++

ということで、理解したことを1ページにまとめるエントリ。

 

 
ざっとまとめてみると…
 
  1. Torrent file
    1. bencode
      データ形式の一つ。文字列、整数、辞書、リストの4つのデータを扱う。
    2. Torrent file
      Torrent fileはbencode形式で記述される。
      その内容は、「Trackerサーバのアドレス」「配信ファイル情報」「(分割された)ブロックデータごとのSHA1 Hash値」等で構成。

  2. UPnP
    1. Port Mapping
      1. 前提:P2P通信するために、GlobalPを取得する必要がある。
      2. UPnP Multicastで接続しているルーターにポートマッピング依頼用アドレスを発行。
      3. TCPでそのアドレスを通じて、Port Mapping依頼を発行。
      4. SSDPグループに参加して、リモートデバイスのGlobalIPを取得する。
        SSDPグループの参加手順
        1. UDPソケットを作成する
        2. SSDPグループからPort Map対応可能なデバイスを検索する
        3. ルーター経由でデバイスグローバルIPを取得する

  3. Tracker
    1. TrackerはHTTPサーバ。データを配信している Peer の一覧を管理する。
    2. クライアントはTrackerに対して、Getリクエストでデータ配信しているPeerの一覧を取得する。
    3. リクエスト内容
      Getリクエストで下記データ群を送信。
      「自身のPeerを識別する20byteのIDを生成」「Torrentファイル Info辞書のSHA1 Hashを生成」「サーバ側の通信用portの用意」「アドレスを生成」
    4. リスポンス内容
      Bencoding形式でデータを返す。
      「データ配信しているPeer一覧(ID、アドレスとポート番号)」

  4. DHT(分散ハッシュテーブル)
    サーバ・クライアント方式でない方式。特徴は以下3点。
    ・Peerは受け取ったInfoHashをもとに、その対応データを持ちそうなPeerを紹介する
    ・Peerどうしはお互いの距離を知っている
    ・Peerは自身に近いPeerの情報を多く持っている
    1. TorrentのDHT機能
      DHTの名前は「Kademila」
      ・XORでPeer間の距離を計算
      UDPでPeerどうしが通信を行う
    2. RoutingTable
      ・kBucketのRootingTableでPeerの一覧を管理(※kBucket:K個のPeer情報を格納する入れ物、Peerの識別子はKID)
      ・RootingTableは、0〜160までの161個のkBucketを保持する事ができる
      ・RootingTableを所持しているPeerとのXORを計算し、その値をもとにどのkBucketに追加するかを決める
    3. FindNode
      ・FindNodeクエリとFindNodeレスポンスでDHTネットワークを構築する
      ・FindNodeクエリを利用すると、指定したKIDにもっとも距離が近いNodeを教えてもらえる
      ・リスポンスを受けたらRootingTableを更新する  
    4. GetPeer/AnnouncePeer
      ・GetPeersメッセージを利用して、データを所持しているPeerまたは最も近いPeerを探すことができる
      ・GetPeerを繰り返して、上位K個のNodeが固定されたら、AnnounePeerメッセージを利用してデータを記録する
 
さらに簡略して、Torrentの仕組みを3行で書くなら…
  • Torrent fileをもとにPeer間でデータ送受信
  • リモートデバイスと通信するにはNAT越えが必要で、UPnPでリモートデバイスのGlobalIPを取得
  • クライアント・サーバ方式であればTrackerを、Trackerを介さない方式であればDHT(分散ハッシュテーブル)でP2Pを実現
 
UPnPでGlobalIPを取得する、Peer間のデータ受け渡しは分散ハッシュテーブルで実現されるという箇所が、技術の要のようでした。
 
 
■補足
UPnPUniversal Plug and Play):UPnPは、機器を通信ネットワークに接続すると、複雑な設定作業を行わなくても他機器と通信したり、その機能を利用できるようにするプロトコル
 
SSDP(Simple Service Discovery Protocol):SSDPは、ネットワーク上の機器を自動的に発見・接続するUPnPで用いられるプロトコルの一つで、機器の探索や応答を行うためのもの。

 

 

Botkit と Bluemix Watson Translate APIで自動翻訳Botを作成したけど社内で採用されなかった件

tl;dr

  1. グローバル事業を進めているなかで、英語圏メンバーが日本語チャットの内容を気にしている
  2. 社内ではSlackを使用しているので、日本語メッセージが投稿されたら、それを自動翻訳してくれるBotがあればいいんじゃないかと思い実装
    ※ 日本メンバーに /translate @bot en "ほげほげ" とか逐一入力させたくない
  3. いざSlack連携するも、Watson APIの邦訳精度と諸般の事情でBot導入見送り

 

手順

  • Slackコンソールで、Slack botを作成
    ※ここではAPIのTokenを控えておく(xoxb-からはじまるもの)
  • BotKitでbotプログラムの雛形を用意
  • Node.jsでbotプログラムを編集
    ※Slackのbotへのアクション問わず、チャンネルへの投稿に反応するようにした
  • Bluemixで「Node.jsアプリ」の作成とそこでの「環境変数(slackbot_token)」の設定、Watson Language Translator APIの連携設定
  • Bluemixへbotプログラムをデプロイ
  • Slackのチャンネルうち、自動翻訳させたいチャンネル上で翻訳botをInviteする

 

つまずきポイント

  • cloud flareなるBluemixのCLIツールあり
    ※cf コマンドが使用可能になる
  • cf コマンド
    $ cf api https://api.ng.bluemix.net
    $ cf login
    $ cf push --no-route -u process
    ※ワーカーとして稼働させる場合
    cf push コマンド単体は、Webアプリでないから今回はこれはダメ
  • Bluemixデプロイ前に、ローカル上で単体で稼働させる場合
    $ slack_token=xoxb-(your-slackbot-token) node ./bot.js

 

参照