よりぶろ

アプリのUIとかについて書いてく予定

Under-The-Jack Pack 2.0買った

以前もおすすめの記事を書いたUnder-The-Jack Pack、ふとBetabrandのサイトを覗いたら、いつの間にか新しいバージョンが出てました。

yo-ry.hateblo.jp

www.betabrand.com

 

というわけでさっそく注文しました。だいたい10日ほどで到着。

f:id:ryo_pan:20170623173907j:plain

左が今回買った2.0。右はこれまで使ってきた1.0(勝手に命名)。タイミングよくMacBook Pro 2017の15インチも購入したので、今回は15インチ用をチョイス。

 

何が新しくなったの?

上の写真だとサイズ感が違うので比較がちょい難しいですが、まずぱっと見で判別できるのは「背中のクッションが厚くなった」「ショルダーストラップのパッドが厚くなった」あたりでしょうか。2.0のメジャーアップデート内容として、全体的なクッション性能の向上があります。言うて1.0も大きな不満はなかったのですが(むしろ薄いのが良いと思ってた)、Macや荷物を入れていると肩に少し食い込むんですよね。

f:id:ryo_pan:20170623174753j:plain

ちょっとわかりづらいけど奥が2.0。厚みは1.0の倍くらいあります。これなら長時間の移動に使っても痛くならなそうかも!代償として、ストラップがちょっとごわついてます。まあ使っていくうちに柔らかくなっていくかな?

他に新しくなった部分は、内部に追加されたジッパー付きのポケットと、

f:id:ryo_pan:20170623175248j:plain

ショルダーストラップのイヤホン用の小さなポケット。

f:id:ryo_pan:20170623175454j:plain

また、カラーバリエーションが4色に増えました。

f:id:ryo_pan:20170623175653j:plain

公式の推し色は赤なんでしょうけど、自分は落ち着いてるブラックにしました。ちなみにいちばん左はBetabrand名物?の再帰性反射材を使用したものです。

 

お値段は$78。送料無料……のはずなんですけど、いま試しにカートに入れたら謎の料金がプラスされて$108でした。うーん、$75以上はfree shippingのはずなのだけれど、、
ちなみに僕は運良く父の日ギフトコードがメールでもらえたので、-$20の$58で買えました✌ Betabrandはよくギフトを配ってる印象があるので、今すぐ欲しくはないけど買うなら安く買いたい!な方はメルマガに登録するといいんじゃないかと思います(ページ最下部にフォームがある)。

 

細かなアップデートが嬉しいUnder-The-Jack Pack 2.0、ぜひモバイラーな方々に買って頂きたいです!

「運」を分解するとだいたい2つくらいになるんじゃないかと思う

自分で言うのもなんだけれども、自分は運が良いほうだと思う。

今の会社にはお声がけを頂いて入ったし、前職はもともとアルバイト採用だったのが何故か正社員採用してもらえたし、大学は父親がたまたま新聞で見つけてなければ入ってなかっただろうし、高校は模試当日微熱が出てたけど母親のアドバイスで行ったから見つけられたし、とにかく運が良かった。

あとはまあ、個人的な気持ちとして「生きている限りは運が良い」という心持ちもあったりはする(※複雑な言葉だと思うので他人に強要はしない)。

ふと思ったのだが、思うに「運」というのは2つくらいに分解して説明できるんじゃないかと思う。

1つは、今日までの自分の貯金に何があるか。貯金と言っても物理的なお金に限らない。それはスキルであったり、マインドセットであったり、楽しい思い出だったりつらい思い出だったり、生まれた国だったり育ててくれた家族だったりする。あるいは撮った写真かもしれないし、ブログに書いた言葉かもしれない。

もう1つは、(よく言われるが)タイミングだ。

この2つが掛け合わさると……つまり、適切なタイミングでちょうどよく過去の貯金を使うシチュエーションがあると、運が良い、となることが多い、気がする(自分の場合)。

わらしべ長者、という言葉があるが、あれにちょっと近いのかなーとも思う。人生、何がどこで活きるか分からないし、とりあえず自分が持っておきたいものを持っておけば、いつかどこかで、運と交換できるんだと思う。

音楽はずるい

他人との会話において、おすすめの何かしらを教授してもらうというシチュエーションがある。

それは相手を理解したり、あるいは自分を理解してもらうための糸口になるものだ。

趣味が一致していれば深い話ができるかもしれないが(あの山は良い、とか、あのレンズは良い、とかそういう感じだ)、それよりも一段前になると、もう少し対象は抽象的になる。つまり、おすすめの本はありますか、とか、おすすめの映画はありますか、おすすめの音楽はありますか、漫画は、アニメは、といった具合だ。

そんな時、ふと、音楽はずるいなーと思ってしまう(ちなみにずるいという意味の裏にあるのは羨ましさで、ネガティブなものではない)。

 

だって、映画は1時間40分とかだし、漫画は1冊20分(連載の場合は✕巻数)、アニメは1クールだったとしても6時間近く必要になる。小説も2〜3時間とかだ。

それに比べると、音楽の3分とか4分はとても短い。のに、その音楽の世界観は真正面から受け止めることができる。認識ができる。しかも安い。iTunesで1曲買うのに必要なのは250円とかなのである。価格帯が近いものだと文庫とかになるのだろうか(それでも倍はするが)。

もちろん、粒度や方向性、目的などによってコンテンツのそれぞれは違うから単純比較はできないけれども、いやしかし音楽と同じくらい受け手との理解の距離が近いのは、詩とか俳句くらいな気がする。もちろんショートフィルムや1話完結の漫画などもありますけれども。

あと、ある程度長さがフォーマット化されているのも面白いなあと感じる。それで言うと映画や本にもあるのか。でも、すっごく長い音楽ってあまり世に無いのは不思議だなーと思う。フォーマットってどうやって定まっていくんでしょうかね。不思議。

 

僕は音楽に対して、周りよりものめり込み具合が弱いので、自分のパーソナリティを知ってもらうためにおすすめできるのがアニメや漫画、映画で止まっているのがちょっぴり悔しい。ちなみにどうでもいいけど、つい最近自分の好きな音楽の方向性にジャンル名があるのを知った。フォークトロニカ、と言うらしい。(違ってたら申し訳ないのだけど)haruka nakamuraとか.queとか小瀬村晶とか。フォークトロニカ、素敵な言葉だと思う。音楽も素敵な作品が多いので、おすすめです(あ、おすすめできたぞ)。

光

  • haruka nakamura
  • エレクトロニック
  • ¥150
Light Dance

Light Dance

  • 小瀬村晶
  • エレクトロニック
  • ¥200
Hope

Hope

隣町で泣いたあの日

あれは小学校1年生の頃だっただろうか。

当時、仲の良かった友達5,6人(誰がいたかはもう覚えてない)と自転車に乗って遊びに出かけたことがある。

子供というのは大抵いつも全力であるから、僕たちも自転車をめいいっぱい漕いだ。気がする。そしていつしか、陽が傾く頃には、全く見たこともない気色の中にいた。

みんな軽いパニックになった。自分たちの知らない世界に迷い込んだ、踏み込んだ感覚があった。

小学校1年の団体が迷子になったのである。そりゃあ気が動転したりもする。おまけに綺麗な夕日はもう沈もうとしていた。自分はたしか、大泣き、とまではいかないがそれなりに泣いた記憶がある。

みんなでどうにか家に戻ろう、と自転車を押して少し歩いた頃、友達の1人が「俺、ここ通ったことある!」と叫んだ。わっ、とみんなの顔に活力が戻り、あとはもう全力でどうにか家に帰った。

実はそれから数年だったか十数年だったか経った頃、一つの事実に気付いた。

みんなが泣いたあの場所は、なんてことない、地元の駅からたったひと駅しか離れてなかったのである。情けないような、笑っちゃうような、なんだか柔らかい気持ちになったのを覚えている。

 

大人になるにつれて、世界に対する認識は変わっていく。

知らないことでも知っている風になるし、未知だったことでも様々な情報に触れることができる。つまりは予測ができるようになったのだ(想像や妄想とも言う)。

でも、実のところは認識が拡張されただけで、実際のところ触れている世界というのは、子供の頃とそんなに変わらないんじゃないか、とも思う。

知った気になる、気付いた気になる、ばかりではなく、たまには不安になるほどの世界に踏み込むのも悪くないんじゃないかと、ふと考えた。

Sketch v44 betaで新しくなったResizingを試してみる

f:id:ryo_pan:20170508131224p:plain

思ったよりも早くSketchのv44 betaが公開されました。

Sketch - Beta

主なアップデート内容はResizingの刷新です。設定方法などに若干の癖があるので、自分の勉強も兼ねてメモとして書き残しておきます。
なお、β版で作成・編集したファイルは現バージョンでは開けなくなりますのでご注意ください。

 

Resizingとは

まず始めに、改めてResizingについておさらい。
Resizingは、v39で追加された「グループもしくはシンボル内のレイヤーに対し、親がリサイズされた時の挙動を設定できる」機能です。
もう少し具体的に書くと、例えばグループレイヤー内のあるオブジェクトにResizingの設定を付与することで

  • 親のリサイズされた割合と同じリサイズが掛かるStretch
  • サイズはそのまま、近い辺(上下左右)に位置固定されるPin to corner
  • 親とのマージンを保ったままリサイズされるResize object
  • サイズはそのまま、位置の比率が変動するFloat in place

といった効果を得られます。
これまでは、以上の4つの種類を切り替えることでResizingを使い分けていました。

f:id:ryo_pan:20170508133350p:plain

↑ v43のResizing

 

v44のResizingの変更点

ではv44ではどのように変わったのでしょうか。下記が新しいResizingのUIです。

f:id:ryo_pan:20170508150820p:plain

ひと目見ただけで一新されたことがわかりますね。上記設定からできるのは、

  • 子(選択しているレイヤー)の上下左右どの辺を固定するかどうか(以下、ピンを置く、と呼称)
  • 子のWidth / Heightを保持するかどうか

の2つです。これまでリストで選んでいたものに比べると、少し複雑化したようにも思えますが、使ってみるとこちらのほうが(やや)直感的であることがわかります。
※……やや、と書いたのはまだ自分自身慣れてないため

それでは新しいResizingの挙動を見ていきましょう。まずは何も設定していない状態の動きです。なお、サンプルのルールとして「RectangleとOvalをグループ化し、OvalにResizingの設定をする」ものとしています。

20170508152935

グループ全体が伸び縮みしている、一般的な挙動ですね。次に「右と上にピンを置いた状態」にしてみました。

20170508200310

わかりやすいように上下左右のスペースを可視化しています。グループレイヤーをリサイズしても、Ovalの右と上のスペースに変化がないのが分かると思います。Width・Heightも固定していないので、option + ドラッグの時だけ、比率を保っていますね。
さて、ここまで書いて気付いた方もいらっしゃると思いますが、親に対してのマージンが保っている状態というのは、旧バージョンの「Resize object」と同じなのですね。
そう、新しいResizingは、設定するパターンによって従来4種類だったResizingを使い分ける仕様になっているのです。
というわけで、4種類のパターンを再現してみました。

20170508153629

左から

  • Stretch:指定なし
  • Float in place:子レイヤーのサイズは固定だがピン位置は変動……しかし中心に置いてしまったので動いていない😇
  • Resize object:子レイヤーのピン位置(上図では左右)は固定だがサイズは変動
  • Pin to corner:子レイヤーのサイズ、ピン位置ともに固定

です。
「Fix Width」と「Fix Height」は、それぞれチェックを入れると、Heightは左右どちらかのみ、Heightは上下どちらかのみのピンだけ置けるようになります。逆に言うと、左右にピンを置いている状態ではFix Widthにチェックは入れられません。

最初は戸惑うかもしれませんが
「グループレイヤーをリサイズした時に子レイヤーの位置は上下左右どこが固定 or 変動するか」
「その時、子レイヤーのWidthもしくはHeightは固定 or 変動か」
で考えると、スムーズに設定できるようになると思います。

 

新しくなったアートボードの設定と組み合わせる

さて、実は新しくなったのはResizingだけではありません。アートボードにも新しい変更が加えられています。

  • アートボードの縦横比切り替え
  • アートボードのサイズ切り替え
  • 内包レイヤーをアートボードのリサイズに対応させるかどうかのチェックボックス

の3つです(ちなみに、アートボード作成時のUIもちょこっと変わりました)。 

20170508210655

20170508210921

先ほどのグループレイヤーを、今度はOvalのResizingを解除し、グループに対し同じResizingを設定してみました。

20170508201339

上図のように、アートボードのリサイズに応じて変化しているのがわかります。

アートボードと連動するResizingによって何が起こるかと言うと、グループレイヤー内のResizing・アートボードに対するResizingを掛け合わせることで「アートボードのリサイズに耐え、且つ位置固定のできるコンポーネント」が作れるようになりました。ざっくり↓のイメージ。

20170508211040

この動き、どこかで見たことありませんか?そう、Animaが開発しているAuto Layoutプラグインの挙動とそっくりなのです。

animaapp.github.io

って、最近Launchpadという機能が追加されて、どうやらプラグイン名もそっちに変わったぽいですが。まあとにかく、全ての機能をカバーできているわけではありませんが、これまでプラグインに頼っていたことがSketch単体でできるようになったことは喜ばしいことだと言えます。

 

最後に

というわけで、新しいResizingについての覚え書きでした。ちなみに、旧Resizingを設定している場合、44 betaで開いてもパラメータは引き継がれていました。安心ですね。

さらに余談。先日校了したSketch本ですが、もちろんこのResizingについては未対応です!涙 このあたりソフト系書籍のつらいところですね。。
どうにかしてケアしたのですが、現状あまり良い手段が思いつかないため、いつもよりブログの文章を執筆寄りにしてみました。ひょっとしたらこの記事を使うかもしれません。。

UIデザイナーのための Sketch入門&実践ガイド

UIデザイナーのための Sketch入門&実践ガイド

 

ですが、それを差し引いてもいい感じに書けたと思っているので、ぜひぜひお手にとって頂けますと幸いです…!🙇