久しぶりに

久しぶりにブログを更新しようかと。

ふと、こちらの記事を思い出したので、タラタラと書いてみようかと思い出しました。

私達の知ってるウェブの終わり

せっかく、独自ドメインを持っているのに最近はSNSでしか更新をして無かった自戒を込めて。

もう、5年も前の記事だけど、結果的にこの流れが加速してると思うのですよね。

これからは諸々、自分の「土地」でこれからはちゃんと発信していこう!

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を使ったサンプルアプリがオープンソースで公開されています。

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

Material Design についてのメモ : Vol 1

Material Design は Google が 2014 の Google I/O で発表した新しいデザイン言語です。

という事でしばらく Material Design とは何か?そしてどうやったらデベロッパー/デザイナーの人にとって使いやすいのか?等を中心に粛々と書いていきたいと思います。

まずは、触ってみる!

初めて Material Design に触れる人からすると、どんなアプリでそもそも実装されてるの?という疑問が出てくると思います。

ですので、いくつか既に Material Design を活用しているアプリをまずは紹介してみたいと思います。

※ここに挙げてるのはあくまでも僕の持っている環境 ( Android KitKat )になっていますので、もし違ったらご指摘頂けると!

Google 系のサービス 

Google I/O App

Google+

Inbox

Chrome

 

Google 以外のサービス

Evernote

Numix Calculator Base

Reddit News

 

他にあったかなぁ。。。

ちょいと、このエントリーを逐次アップデートしますね。

ドメインとサーバーの管理を変える : その2

前回といってもかなり日も空いてしまいましたが、、、ドメインとサーバーを変えました。

まず、どう変えたかというと

ドメイン:ムームードメイン -> お名前.com

サーバー:heteml -> Google App Engine

という構成にしました。

ついでに、Google Apps for Business にも登録しました。

 

今後の為に、何故このような構成にしたかというと、

まず、このブログ自体は、wordpress.comに独自ドメイン(サブドメイン)をマッピングしてて、CNAMEをムームードメインで設定する場合は、ペパボさんのサーバーを契約しなきゃいけなくて、だったらこの際、お名前comにドメイン自体を移管しちゃえと。

そうすると、次はサーバーはどこでも良いんですが、せっかくなら身近な所に詳しい人が多いので、Google App Engine(GAE)にしてみようとあいなりました。

ただ、GAEを独自ドメインで使う場合は、Google Apps for Businessに加入する必要があり、600円/月で1ユーザーで契約しました。

なので、このlog.taquo.comもtaquo.comの方も両方ともCNAMEをマッピングする形で動かしてます。

とはいえ、なにもサイト自体作っていないので、いまだにアクセスすると、”Hallo World” 状態…

ドメインとサーバーの管理を変える : その1

ドメインとサーバーの更新時期が迫ってきていて、この際、いっそ管理毎引っ越してしまおうかと思いはじめてきた。。。

気付いたら失効してたという悲劇だけは避けたいので、備忘録的にメモメモ。

ドメインに関して

確か、8年前位にtaquo.comというドメインをムームードメインで取得したから、わりかしムームードメインに愛着はあるのだけど、CNAMEを使う際にペパポのサーバーと契約していないと使えないのがちょっと不便なんですよね。

ちょこちょこと周りに聞いた感じだと、ドメインに関しては日本だとお名前.com、海外だとGoDaddyが主流っぽいけど、他のオススメも調べてみよう。

サーバーに関して

サーバーは今はヘテムルを使っているんだけど、ほとんど使っていないのと、Pythonとかのバージョンが少し古いのが、どうしたものかと思ってるところです。

まぁ、てか何もサイトを作ってないやんけという自分に対してのツッコミはあるものの、周りからオススメされたさくらVPSに心が惹かれはじめてるですが、使いこなせるかが若干不安。。。

という事で、別になんの誰の特にもならないエントリだけど、とりあえず自分への備忘録と新しくした以上なんか作れよ的なプレッシャーをかける上でのエントリでした!