2018年5月31日木曜日

InVisionStudioを使ってアニメーションするモックアップを作成してみた。


こんにちは、オフィス狛デザイン部のSatoです。
時代の波に追いつきたいと思い、一時期話題になったあのプロトタイプソフトの記事を書いてみました。(ちょっと遅いか)

先月InVision Studioのearly accessのメールが届いたのですが、SketchもXDも使った事の無い私は、通常の操作もあまりうまくできずに使うのを後回しにしていたのですが、公式の動画を見たり公式のGETTING STARTEDを見たりして、やっとアニメーションをつけたりする所までできるようになりました。


作ったモックアップ(iphoneXサイズ)
気になる部分はありますが!(なぜか色を変えたら一部のオブジェクトがプレビュー時だけ消えてしまった…?バグでしょうか?)InVision Studioで作った動いてるモックアップです!
InVision StudioだとInVisionでお馴染みのリンクでの画面の遷移の再現や固定ヘッダーの再現だけでなくぬるぬるパーツが動きます!言葉で説明するのが難しい動きもこれでエンジニアさんに伝えられますね!


一番手こずったのがアニメーション機能で作る横から出てくるメニューだったので個人的に作り方を解説します。
(UIを載せるとよろしく無いそうなので、詳しいアニメーション機能についてはこちらの公式の説明を読んでみてください!)

横から入ってくるメニューは最初アニメーションのTransitionをPresetに設定し横にずれるような動きに設定してどうにかしようと思ったのですが、なかなかメニューが横から動くようには見えてくれませんでした……。

しかし、元の画面要素をコンポーネントとして登録し、別にコンポーネント化させたメニューを見切れるように配置し、TransitionをMotionにしてあげるといい感じに動いてくれました。

応用すれば色々な表現が可能になりますね!

唯一、使っていて大きな欠点だなと思った点は日本語対応。
InVision Studio内は日本語もきちんと打ち込めますが、右上のプレビューボタンの横のアップロードボタンでInVisionにプロトタイプとしてアップロードできるという機能を使った後にプレビューで見てみると日本語部分が綺麗に消えてしまいました。
InVisionのソフトなのに日本語を使うとInVisionにうまい具合にアップできないのは痛い……。
こんなに素敵なのにクライアントさんにモックアップとして見せるのはまだ無理そうなのが勿体無い気がしますが、early accessだし海外製だから仕方ない。

他にも不具合な気がする不思議な挙動や実装されていない機能などありますが使う価値は大いにあると思います。
何よりearly access版は今の所(2018年5月現在)無料です!ぜひみなさま使ってみてください。

,

2018年5月13日日曜日

クラウドサービスの種類について。(新人さん向け)


オフィス狛 技術部のHammarです。

この度、4月からオフィス狛へ参画しました。
役割的にはマネージャー兼プログラマー(何でも屋?)です。
これから、よろしくお願いします。
さて、参画後初のブログ記事ということで、4月入社の新人さんへ、IT用語の説明を記載しようと思います。
今回は『クラウド』についてです。

最近は多種多様なクラウドサービスが本当に多くなってきました。Amazon、Microsoft、Google、といったいわゆるクラウドBIG3を筆頭に中小さまざまなクラウドサービスが存在しています。
一概にクラウドサービスを利用するといっても、実はクラウドの利用形態によっていくつか分類されるのをご存知でしょうか。またその利用形態ごとのどういう機能を利用するかによってどのクラウドサービスを選ぶかの基準にもなってきます。
クラウドを利用した開発をするにあたって、そのクラウドサービスの種類についてちょっと勉強したことをまとめてみたいと思います。

そもそもクラウドとは

クラウドコンピューティング(英: cloud computing)は、インターネットなどのコンピュータネットワークを経由して、コンピュータ資源をサービスの形で提供する利用形態である。略してクラウドと呼ばれることも多い。 wikipedia

もう少しざっくり書くと、ユーザーはサーバーやストレージなどのインフラやソフトウエアなど物理的に持つ必要がなく、インターネット等を利用していつでも手軽にサービスを利用できる技術です。
上記の意味合いでは身近にあるGoogleのGmailはメールに特化したクラウドサービスです。

このクラウドサービスの種類についてですが、クラウドサービスには実は細かくわけると「SaaS」、「PaaS」、「IaaS」という種類があります(もう少し細かく「DaaS」というのもあります)

■SaaSについて

「Software as a Service」の略で「サース」と呼びます。
その名の通りソフトウェアをクラウドで利用できるサービスになります。
上記に書いたメールサービスなどがこれにあたります。
ほかにもDropbox等のクラウドストレージサービスやMicrosoft Office 365などのオフィスソフトも代表例になります。SaaSはすでにアプリケーションとしてすぐに利用できる状態で、エンドユーザーが一番身近に使うサービスが多いのではないかと思います。

■PaaSについて

「Platform as a Service」の略で、「パース」と呼ばれています。
プラットフォームのクラウドサービスということで、プラットフォーム「土台となる環境」をクラウド上で利用できるサービスになります。
開発者はシステムの開発に必要な土台となる環境(アプリケーションとOSをつなぐミドルウェアやDB管理システム、プログラミング言語、OS等がすでに利用できる状態でアプリケーションを開発できるので、いちいち開発環境を整える必要がなく、すぐに開発に取り掛かることができます。
代表例としてはGoogle App Engine やMicrosoft Azureあたりになります。AWSもサービスの内容によってはPaaSになりますね。

■IaaSについて

「Infrastructure as a Service」の略で、「イアース」や「アイアース」と呼ばれます。
インフラストラクチャ―のクラウドサービスなので、サーバーやストレージ、ネットワークをクラウド上で利用できるサービスになります。
サーバを利用する際に必要なハードウェアのスペックやOSを、ユーザーが自分で選んで利用することが可能です。PaaSとは違いインフラだけの利用なので、開発者が細かく設定を自由に設計することができます。
代表例としてはGoogle Compute EngineやAWSのEC2がこれにあたります。


これらの「SaaS」、「PaaS」、「IaaS」の種類の違いがわかると、開発時にどのクラウドサービスを使えばよいのかがわかってくると思います。

含まれている機能要素の順に
【SaaS:すぐに使える】>【PaaS:基本的な準備あり】> 【IaaS:インフラだけ】
になるでしょうか。

開発基本に考えた場合、基本的にはPaaSを利用する機会が多いと思いますが、案件内容や状況によってメリット、デメリットをクラウドサービスを考えて選択できるのではないかと思います。


2018年5月11日金曜日

Photoshopのレイヤー名検索したい時に使える機能


こんにちは、オフィス狛 デザイン部のSatoです。

先日、Photoshopでの作業中に、とある言葉の入ったレイヤーだけ抽出したい!という場面がありました。
 イメージ的には下の画像のような状態です。


Photoshopでレイヤー検索ができるかわからなかったので、とりあえず「Command⌘(Ctrl)」+「F」を押下した所、検索画面のようなポップアップが出てきてくれました。
検索したいレイヤー名を入れると、ちゃんとレイヤー名検索ができました!やったー!

ただ、検索結果をクリックするとポップアップが消えてしまうので、キーワードが入ったレイヤー名のレイヤーを色々見比べようとすると少し不便でした。


先日はこの機能だけ使い作業をしていたのですが、調べてみると実はもっとレイヤー名だけ抽出する場合に便利な機能がありました。
「Command⌘(Ctrl)」+「shift(Alt)」+「F」を押下するとレイヤーの上に入力部分が出てきました。ここに検索したい言葉を入れるとその言葉の入ったレイヤー名のみを表示してくれました!

この機能はCS6で実装された機能らしいです。もっと早く知っておきたかった!


補足しますと最初に記載した「Command⌘」+「F」は、レイヤーの検索という面では「Command⌘」+「shift」+「F」に劣りますが、アドビ公式のチュートリアルや情報の検索、adobe stockの画像を検索しワンクリックでライブラリに選択した画像(コピーライト入り)が登録される機能などがあるので、非常に便利です。

また、1つの手でショートカットキーが押せる「Command⌘」+「F」の方が手早く検索できるので、複数件のレイヤーを確認したい場合以外は、この検索機能がおすすめです。

2018年5月10日木曜日

AWS Windowsサーバで Spring Boot の MessageResource の {0} が展開されない場合の解決方法


オフィス狛 技術部 CTOの Taka-yamです。

先日、Spring BootのプログラムをAWSのWindowsサーバにデプロイした際に「あれ?」と思ったことがあったので記載します。

利用したEC2: Microsoft Windows Server 2012 Base - ami-1380926f

Spring Bootではエラーメッセージなどを表示するのみ properties ファイルを利用し、
下記のようにプレースフォルダーを利用しています。

ErrorsCommonInvalid =入力した内容にエラーがあります。
ErrorsCommonRequired ={0}は必ず入力してください。

AWSの無料利用枠を利用していた関係上、Windowsサーバが英語版になっているため、言語や時刻の設定を変更しました。
設定方法はたくさんの良い記事があるので参考リンクを載せて割愛します。
http://blog.serverworks.co.jp/tech/2016/06/20/windows-server-2012-r2-japanese-localization/

設定も完了し、実際に動かしてみても特に問題ないかなと思ったところ、

入力した内容にエラーがあります。// 〇
{0}は必ず入力してください。 // あれ?

という結果に。

元々はオンプレミスのWindowsサーバで動かしており、そっちの環境設定と比べてみても違う箇所が見当たらずしばらく悩むことに、、、

悩んだ結果とうとう見つけたのがこちらでした。

@Bean
ReloadableResourceBundleMessageSource messageSource() {

    Locale.setDefault(Locale.JAPAN); // ←これ!!!!!!!

    ReloadableResourceBundleMessageSource messageSource = new ReloadableResourceBundleMessageSource();
    messageSource.setBasenames("classpath:messages/messages");
    messageSource.setCacheSeconds(0);
    messageSource.setDefaultEncoding("UTF-8");
    return messageSource;
}

Springでメッセージリソースを読み込む際にリソースが変更されたらメッセージも変更される様にしたいので ReloadableResourceBundleMessageSource を使っていたのですが、 ここのロケールが ja_JP になっていないようです。

システムのロケールを変更しても、サーバのデフォルトのロケール設定は変わらなかったのか?
ちょっと根本的な原因はわかっていませんが、解決策としてはロケールはきちんと指定するということでした。

こういう暗黙の設定による罠、気が付かない内に潜り込んでいることがあるので怖いですね。

, ,