風神雷神図 / Wind and Thunder Gods

r0010569

 

ふと、Google フォトを見てて見つけた、「風神雷神図 」の写真。

建仁寺で撮った一枚。写真は詳しくないけど、なんとなく綺麗に撮れた気がするのでアップしてみた。

 

Found this photo while I was browsing my Google Photo albums.

This photo was taken at Kenninji temple at Kyoto. I’m not good at taking photos, however this photo seems fairly good photo taken by me 🙂

 

 

I/O 2016

IMG_2616

 

ふー。。。

 

ようやく、Google I/O 2016 が終わりました。

ひとことで今年のI/O を振り返ると、疲れたー!そして暑かったー!

 

今年は、CodelabMaterial Design のコンテンツを担当してたのですが、

それが思った以上に厄介で当日朝までバタバタしておりました。。。

 

そして、I/O 初日から終わるまで全くセッションを見る事ができず、ひたすら暑い中フラフラと会場をさまよってました。

もちろん、社員の僕としては、来ていただいた方にセッションを見ていただきたいので、セッションは見れないのは当然なのですが、流石に外にいても暑くて体力を消耗してしまうので、、、結果 Codelab のブースにいた記憶が強いI/Oでした!

IMG_2657

 

Codelab スペースはこんな感じで、来た人が適当に空いてる席に座ってモクモクとコードラボを楽しむ感じでした。

 

んまぁ、コードラボは作るのが大変なのですが、一度作ってしまえば割と色んなイベントやワークショップで使えたりするので、今後も少しづつ作っていきたいと思います 🙂

 

でわでわ。

 

T.

Pixate Studio 2.0 で加わった機能紹介

pixatestudio2.0

 

モバイルアプリのプロトタイプ制作ツール、Pixate の最新バージョン Pixate Studio  2.0 が 2015年12月8日に公開されました。(10日時点では、バージョン2.0.1になっています。)

それでは今回のアップデートで、どのような機能アップデートがあったのかメモしたいと思います。

 

今回の主要アップデート

キャンバスへのズームイン/アウト

pixate_zoom

Pixate Studio 2.0 では、キャンバスのズームイン/アウトが出来るようになりました。

現時点では、12.5%, 25%, 50%, 100%, 200%, 400%, 800%にズームイン/アウトできます。

 

オーディオとビデオファイルがアセットへ追加可能に

これまで、画像ファイルしかアセットに出来なかったのが、新たに音声ファイルとビデオファイルもアセットに追加できるようになりました。

では、どのように追加するかですが、

load_movie1

 

まずは、Assetsで動画ファイルを選択しキャンバスに配置。

動画ファイルを配置しても、そのまま再生される訳では無いので、アニメーションを設定する必要があります。Studioの左下のAnimationパネルに”Playback”という新しいアニメーションがあるので、それを配置したオブジェクトにドラッグしてみてください。

pixate_movie2

 

Playbackのアニメーションが設定されると、画面右下のAnimation設定パネルでどのタイミングで動画が再生されるかを設定できます。

pixate_movie3

 

例えば、直ぐに動画を再生したい場合は、こちらの”Control Playback”という設定パネルで、

上記のように、

“Based On” を*SCREEN*にし”Loaded”にし、CONDITIONのActionで”Start playback”を選択します。

このように設定すると、Screenがロードされたタイミングで、動画が再生という設定になるので、プロトタイプをAndroidやiOSのアプリでロードされたタイミングで動画が再生さるようになります。

 

Scrollの新しいインタラクションの追加

Pixateのscroll viewは、正直扱うのに癖がありました。こちらの記事で詳しく紹介されていますが、端的に説明すると、scroll viewの上端がy=0だとした場合、下にスクロールすると、scroll viewのy座標は、マイナスに増えていくのですが、Pixateでは0より小さな値を扱えない関係でscroll viewがスクロールした場合のアニメーションの処理がシンプルに記述することができませんでした。

今回のPixate Studio 2.0のアップデートで scroll view の変更量(どれだけオフセットしたか)をトリガーにしてアニメーションを行うことが可能になりました。

スクロール部分に関しては後日、別記事として詳細に使い方を含めて書いてみますね。

 

それ以外の、細かいアップデート

  • Interaction と Animationが タブで分かれていたのが、独立したパネルに。
  • Layerのロックが可能に。
  • Layerパネルで複数のLayerを選択し、ドラッグが可能に。

などなどあります。

細かなアップデートについては、冒頭で紹介した本家のアナウンスを見ていただけると!

 

Pixateの使い方の基本的な部分は、前バージョン(ver 1.8)からの大きな変更は無いので、こちらの素敵なブログ記事スライドが非常に参考になります 🙂

 

本記事は、UI Design Advent Calendar 2015 の10日目の記事になります。といいつつ、、、公開が数時間遅れてしまった。。。

 

でわでわ。

 

Material Design のリソースなどなど

ここ最近、Material Design についてお話しさせていただく機会が多いのですが、

その際に良く Material Design に関するアップデートや事例はどこを見たら良いかという質問をいただくので、こちらに現時点(2015年10月) のをちょっとまとめてみますね。

リソース

Material Design Specs 

こちらは、本家の Material Design のサイトですね。一番良く見るのはこちらのサイトだと思います。何気にちょこちょことアップデートされてまして、去年1年間で4回に渡ってアップデートが行われています。

Google Design 

Google Design のサイトでは、Material Design だけではなく、「どうやって Material Design をフレームワークと使いつつ、自社ブランドを魅力的に見せるか」などのコンテンツも掲載されています。

Device Metrics Tool

device-metrics-tool

Device Metrics Tool は様々なデバイスのスクリーンサイズ、解像度、画角などが一覧出来るツールです。また、Material Design を使う際には、”Material Metrics” という項目を参照すると、Material Design を使う際の 推奨 Toolbarのサイズや余白のサイズを教えてくれます。

例えば上記のキャプチャでは、Nexus 5 を選択した時の例なのですが、Toolbar は 56dp, 余白は 16dp が推奨と教えてくれるので、便利ですね!

Material Design Lite

material-design-lite

Material Design Lite は、HTML, CSS, JavaScript で Material Design を利用できるフレームワークです。様々なテンプレートも公開されているので、HTML ベースで Material Design を活用する際に使えそうですね!

事例

Best-In-Class Android Design

Best-in-class-android-design

こちらは、Google Play 上の特設ページですが、Material Design を活用した事例アプリ(B&H, New York Times, Pocket, Tumbler など)が掲載されています。

Materialup 

materila-up

Materialup は、毎日様々な Material Design の事例やコンポーネントが紹介されているので、アプリだけでは無くデザインのパーツをみるだけでも参考になります。

サンプルコード

Cheesesquare Sample

こちらは、Android Design Support Libraryを使ったサンプルアプリがオープンソースで公開されています。

これ以外にも様々なリソースを見つけ次第アップデートしていきますね。