狛ログ

こんにちは、オフィス狛デザイン部の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月現在）無料です！ぜひみなさま使ってみてください。

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

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

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

そもそもクラウドとは

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

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

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

■SaaSについて

■PaaSについて

■IaaSについて

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

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


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

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


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

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


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

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

オフィス狛 技術部 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 になっていないようです。

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

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

オフィス狛 技術部のKoma（Twitterアカウントの中の人＆CEO）です。

前回は、作業の概要のみだったので、今回は早速作業に取り掛かって行こうと思います。

１）バケット（Bucket）の作成

まずは、AWSのAmazon S3でバケット（Bucket）を作ります。

・Name and region
バケット名称（Bucket name）は、サイトのドメインにします。
例えば弊社だと「officekoma.co.jp」になります。

・Set properties
ここはそのまま次へ（Next）

・Set permissions
ここもそのまま

・Review
内容を確認しバケット作成します。（Create bucket）

上記までの手順を再度繰り返し、「www」サブドメイン用のバケットも作っておきます。
例えば弊社だと「www.officekoma.co.jp」になります。
作成した結果が以下の通りです。

２）ファイル（html・css・js）のアップロード

次にhtmlなどのファイルをアップロードします。
アップロードするのは、サブドメイン無しのドメインのみです。
例えば弊社だと「officekoma.co.jp」

OverviewタブのUploadボタンを選びます。

必要なフォルダ・ファイルを選択します。Drag and dropで、まとめて一気にアップロード出来ます。

漏れなくファイルが選ばれていることを確認して、アップロードします。（Upload）

アップロードすると、以下のようになります。

３）権限の設定

次に Permissions タブから、権限の設定してを行います。
以下の内容で保存します。（Save）
※Resource のドメイン部分を所有のドメインに変更して下さい。

{
  "Version":"2012-10-17",
  "Statement":[{
 "Sid":"PublicReadGetObject",
        "Effect":"Allow",
   "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::officekoma.co.jp/*"
      ]
    }
  ]
}

登録後は以下のように、公開状態（Public）になっている事をアラートで教えてくれます。

４）ホスティングの設定

次に Properties タブを選択し、「Static website hosting」（静的Webサイトに使用する）を選択します。
「Index document」にトップページとなるhtmlファイルを設定します
「Error document」にエラーページ（404など）となるhtmlファイルを設定します
※Endpointが接続するURLになります。

設定後はこんな感じです。
この時点でサイトは表示出来るようになっているので、
先程の Endpoint のURLに接続して、表示を確認しましょう。

続いて、同じ事を「www」サブドメインの方にも行いますが、
こちらは、Properties の設定のみを行います。
先程と同じ手順で、「Static website hosting」（静的Webサイトに使用する）を選択します。
そして、Redirect requests にサブドメイン無しのドメインを設定します。
例えば弊社だと「officekoma.co.jp」

これで、サブドメイン「www」付きで接続されても、サブドメイン無しで接続されても、
問題なくサイトが表示される事になります。

如何だったでしょうか？
S3での公開準備編はここまでです。

次回は、問い合わせフォームで、PHPなどプログラムを使用していた場合の代替手段についてです。

次回：Amazon S3 で サイト公開（HTTPS）する。（３）問い合わせフォーム準備編その１
前回：Amazon S3 で サイト公開（HTTPS）する。（１）作業の概要

オフィス狛 技術部のKoma（Twitterアカウントの中の人＆CEO）です。

少し前に、Googleから「2018年7月リリースのChrome 68から、
HTTPのサイトには『not secure』と表示する」と発表がありました。

For the past several years, we’ve moved toward a more secure web by strongly advocating that sites adopt HTTPS encryption. And within the last year, we’ve also helped users understand that HTTP sites are not secure by gradually marking a larger subset of HTTP pages as “not secure”. Beginning in July 2018 with the release of Chrome 68, Chrome will mark all HTTP sites as “not secure”.

A secure web is here to stay

弊社のホームページも、少し前まで実はHTTPサイトでした。

オフィス狛という会社が出来たのは2011年ですが、
その時、起業サポートサービスのようなものを使って、早期での立ち上げを目指しました。
その起業サポートサービスの中の一つにドメイン取得を含んだホスティングサービスがあり、そのサービスをずっと今まで使っていました。

しかし、これが、まあ使い難い。
SSL/TLS化や、サブドメインの追加さえ管理コンソールから出来ず、
作業は営業担当にメールで依頼する必要があるのですが、担当者のレスポンスも悪い。

解約しようと思っていたのですが、どうせやるなら、AWSに全て集約させようと考えて・・・・対応する時間が無くて今に至ります。

今回、『HTTPS化必須もすぐそこ！』ということで、
無理矢理に時間を作って対応しました。その対応内容を記事にしたいと思います。

前段が長くなりましたが、早速次回から詳細を書いて行きます。

次回：Amazon S3 で サイト公開(HTTPS)する。(２)S3での公開準備編

オフィス狛 技術部 Maruruです。

今となっては非推奨となった PHPExcel ですが、昔からのシステムであれば、多く使用されています。
そんなシステムで、テンプレートExcelファイルを読み込み、そこに値を書き出し、出力するという、よくあるシステムを構築していたのですが、
そこで列を削除する removeColumnByIndex の挙動が想定していたものと異なってしまったので、その件についてまとめてみました。

【前提】使用するテンプレートファイルとソースコード

上記が、テンプレートファイルです。
上から2行は表の見出しとする為、セル結合しています。
対象の月に合わせて末日を変更するため、 removeColumnByIndex を使用して列を削除することを想定しています。

// $daysには月の合計日数が入っています。
if ($days < 31) {
    foreach (range(0,30-$days) as $column) {
        $sheet->removeColumnByIndex( 30 - $column );
    }
}

・末日が31日ではない月を対象に処理を実行

１）末日が28日の場合

28の隣に削除したはずの列が残ったままになってしまいます。
その影響で見出しで使用する2行も1列分幅が広くなってしまいます。

２）末日が30日の場合

こちらも同様に30の隣に削除したはずの列が残ったままになってしまいます。
その影響で見出しで使用する2行も1列分幅が広くなってしまいます。

・末日が31日の月を対象に処理を実行

こちらはそもそも列削除処理が呼ばれないので、想定通りの結果となりました。

・セル結合していた箇所を解除

次にテンプレートファイルの上2行、見出し部分のセル結合を解除してから実行してみました。

１）末日が28日の場合

２）末日が30日の場合

どちらの場合も末日のあとに1列余分に残ってしまいました。
セルが「結合されている、されていない」は関係無く、何列削除しようと、最後の1列だけ削除されない（値は消えているけど）みたいですね。

今回はテンプレートファイルの見出しとして使用する上2行と日付のテーブルの横幅を合わせるだけで問題なかったので、
最後の列は無視して、上2行の見出し部分を unmergeCells したあとに mergeCells して横幅を合わせました。