2018年4月12日木曜日

Amazon S3 で サイト公開(HTTPS)する。(2)S3での公開準備編


オフィス狛 技術部のKoma(Twitterアカウントの中の人&CEO)です。

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

1)バケット(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」になります。
作成した結果が以下の通りです。

2)ファイル(html・css・js)のアップロード

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

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

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

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

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

3)権限の設定

次に Permissions タブから、権限の設定してを行います。
以下の内容で保存します。(Save)
※Resource のドメイン部分を所有のドメインに変更して下さい。
{
  "Version":"2012-10-17",
  "Statement":[{
 "Sid":"PublicReadGetObject",
        "Effect":"Allow",
   "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::officekoma.co.jp/*"
      ]
    }
  ]
}


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

4)ホスティングの設定

次に 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)する。(3)問い合わせフォーム準備編その1
前回:Amazon S3 で サイト公開(HTTPS)する。(1)作業の概要


, ,

Amazon S3 で サイト公開(HTTPS)する。(1)作業の概要


オフィス狛 技術部の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)する。(2)S3での公開準備編


, ,

PHPExcel の removeColumnByIndex で、結合された列を削除した場合の挙動について


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

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

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

上記が、テンプレートファイルです。
上から2行は表の見出しとする為、セル結合しています。
対象の月に合わせて末日を変更するため、 removeColumnByIndex を使用して列を削除することを想定しています。
// $daysには月の合計日数が入っています。
if ($days < 31) {
    foreach (range(0,30-$days) as $column) {
        $sheet->removeColumnByIndex( 30 - $column );
    }
}

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

1)末日が28日の場合

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

2)末日が30日の場合

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

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


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

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

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

1)末日が28日の場合

2)末日が30日の場合

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

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


2018年4月7日土曜日

vagrant up で 「Failed to create the host-only adapter」が発生した場合の対応


オフィス狛 技術部のKoma(Twitterアカウントの中の人&CEO)です。

PHPのフレームワークである「Laravel」は Homesteadを利用し、簡単に開発環境を作成出来ます。

そう、簡単に作成出来るはずが・・・・ある端末(Windows10)で、「vagrant up」でエラー になりました。

$ vagrant up
Bringing machine 'homestead-7' up with 'virtualbox' provider...
==> homestead-7: Importing base box 'laravel/homestead'...
==> homestead-7: Matching MAC address for NAT networking...
==> homestead-7: Checking if box 'laravel/homestead' is up to date...
==> homestead-7: Setting the name of the VM: homestead-7
==> homestead-7: Clearing any previously set network interfaces...
There was an error while executing `VBoxManage`, a CLI used by Vagrant
for controlling VirtualBox. The command and stderr is shown below.

Command: ["hostonlyif", "create"]

Stderr: 0%...
Progress state: E_FAIL
VBoxManage.exe: error: Failed to create the host-only adapter
VBoxManage.exe: error: Querying NetCfgInstanceId failed (0x00000002)
VBoxManage.exe: error: Details: code E_FAIL (0x80004005), component HostNetworkInterfaceWrap, interface IHostNetworkInterface
VBoxManage.exe: error: Context: "enum RTEXITCODE __cdecl handleCreate(struct HandlerArg *)" at line 94 of file VBoxManageHostonly.cpp

色々調べても全く原因が分からず、
そして、このエラーが出る端末が1台だけ、という事もあり、しばらくの間、塩漬けしていました。

そして、このエラーの事も忘れていた頃、とある方から、「たぶんウィルス対策ソフトが原因ですよ」と言われました。

そう言えば、エラーが出る端末だけ、他の端末と違って「ウイルスバスター」を使っています。

試しに、「ウイルスバスター」を一時的に止めて試してみると・・・・
$ vagrant up
Bringing machine 'homestead-7' up with 'virtualbox' provider...
==> homestead-7: Importing base box 'laravel/homestead'...
==> homestead-7: Matching MAC address for NAT networking...
==> homestead-7: Checking if box 'laravel/homestead' is up to date...
==> homestead-7: Setting the name of the VM: homestead-7
==> homestead-7: Clearing any previously set network interfaces...
==> homestead-7: Preparing network interfaces based on configuration...
    homestead-7: Adapter 1: nat
    homestead-7: Adapter 2: hostonly
==> homestead-7: Forwarding ports...
    homestead-7: 80 (guest) => 8000 (host) (adapter 1)
    homestead-7: 443 (guest) => 44300 (host) (adapter 1)
    homestead-7: 3306 (guest) => 33060 (host) (adapter 1)
    homestead-7: 4040 (guest) => 4040 (host) (adapter 1)
    homestead-7: 5432 (guest) => 54320 (host) (adapter 1)
    homestead-7: 8025 (guest) => 8025 (host) (adapter 1)
    homestead-7: 27017 (guest) => 27017 (host) (adapter 1)
    homestead-7: 22 (guest) => 2222 (host) (adapter 1)
==> homestead-7: Running 'pre-boot' VM customizations...
==> homestead-7: Booting VM...
There was an error while executing `VBoxManage`, a CLI used by Vagrant
for controlling VirtualBox. The command and stderr is shown below.

Command: ["startvm", "454dc8f8-9053-4aef-9e96-8c4a9fe71ea7", "--type", "headless"]

Stderr: VBoxManage.exe: error: The virtual machine 'homestead-7' has terminated unexpectedly during startup with exit code 1 (0x1).  More details may be available in 'C:\Users\hogehoge\VirtualBox VMs\homestead-7\Logs\VBoxHardening.log'
VBoxManage.exe: error: Details: code E_FAIL (0x80004005), component MachineWrap, interface IMachine

エラーメッセージは変わったけど、まだダメです。

今回、Vagrant のプロバイダはVirtualBoxにしているのですが、
結論から言うと、
一度VirtualBoxをアンインストールして、「ウイルスバスター」が停止している状態で、VirtualBoxを再インストールする必要があります。
その上で、再度「vagrant up」試してみると、うまく行きました。
(再インストールから「vagrant up」まで、ウイルスバスターは停止させています。)

※一度、仮想環境まで作成出来れば、後はウイルスバスターが起動していても大丈夫です。

昔、こんなブログ記事(Unity で Internal compiler error。)を書いたことがありますが、
この時もウィルス対策ソフト(McAfee)が原因でした。 やはり、まだまだウィルス対策ソフトに困らされる事があるのですね・・・


, ,

2018年4月3日火曜日

Photoshopの「人工知能」を利用した新機能を試してみる。


こんにちは、オフィス狛 デザイン部のSatoです。
今回の記事は最近話題のAIを使ったAdobeソフトの機能の話です。

Adobeの人工知能利用といえば去年公開された「Adobe Sensei」が有名ですよね。
写真を参考用のイラストのタッチに変換する機能や自動で素材を探して色々なパターンの合成図を作ってくれる機能など……今までにない画期的な機能ばかりでした。

今年初旬にアップデートされたPhotoshop cc 2018で追加された「被写体を選択」機能は人工知能で画像中のメインの被写体を選択してくれているという話を聞いたので精度を試してみました。
「被写体を選択」機能はPhotoshopメニューバーの「選択範囲」の中にあります。
ワンクリックで選択範囲を作ってくれます。

メインの被写体がわかりやすい写真で試してみました。


綺麗に選択してくれました!
苺のヘタの部分は一部背景が選択されていますが簡単な調整で済みそうです。

次は背景が複雑なこの写真で試してみます。


中央のウサギをちゃんと選択してくれました!
他のウサギ部分は避けてくれていますが少し床や壁部分を選択してしまっています。
似た色調のものを見分けるのは自動選択機能と同じでやはり苦手なようです。

難易度を高めにしてみましょう。

フリー素材の背景が白で被写体も白の画像です。

背景の透けてる部分と影になっている部分が誤選択されていますが想像よりもずっと綺麗に選択してくれました!

クイック選択でササっと選択した場合よりも素早くワンクリックで選択してくれたので時短になりそうです。
ただAdobe Senseiのデモのようにこれだけ使えば完成!という訳では無さそうです。

他の機能でも人工知能が利用されています。

他にもPhotoshop cc 2018には画像解像度機能の再サンプルの中に「ディテール保持2.0」という項目が追加されました。

こちらの機能は人工知能が拡大した際のノイズやボケを軽減してくれているそうです。(昔話題になった人工知能が綺麗にイラストを拡大してくれるサイト、waifu2xに似た機能です)

左がディテール保持2.0(ノイズ軽減無し)で拡大したもの、右は前バージョンからある自動で拡大したものです。自動よりもディテール保持2.0の方がくっきりしています。
ノイズを軽減の数値を上げればイラストなども綺麗に拡大できそうです!
個人的には仕事での実用はまだ難しいと思いますが、この機能が進化すれば、画質が悪い画像でも印刷は難しくともweb画面なら違和感なく使えるようになるかもしれないですね!(このまま進化し続けると刑事ドラマでありがちな画質の荒い防犯カメラ映像でも特殊処理で犯人の顔まではっきり見えるようになったりしてくれたりしそうですね)


まだ、Adobe Senseiのデモンストレーション程の事はできないようですが、前バージョンよりも確実に進化している事は実感できました。
今後のアップデートでAdobe Senseiのデモンストレーションで発表されていた機能が誰でも使えるようになるのが楽しみです。

余談ですが、私が人工知能による画像編集の進化を一番実感したサービスをご紹介します。
Image-to-Image Demo - Affine Layer
人工知能がラフから猫や建物、靴やカバンなどのリアルな画像を生成してくれます。

試しに猫が自動生成される機能を使ってみました。
数秒で描いた落書きにリアルな毛が生えました!1分もかかっていない作業でここまでできるのですね!


,