AWSの話題を中心に、日々の業務やプログラミングの徒然を綴るエンジニアブログです。

HANDS LAB

HANDS LAB ENGINEERS BLOG

ハンズラボエンジニアブログ

カテゴリー: 日常

Baby Engineer はハイハイをはじめた。

Pocket

3月に入社したひよっこエンジニア、ケイティにブログを書いてもらいました。
初めてのプログラミング、しかも外国語で勉強するというハードル高めな環境ですが、毎日元気にがんばっています。
今回はこれまで学んだことの中で、特に気になるトピックを紹介してもらいました!(段落ごとに本人による日本語訳も書かれています)

21319284629_f9763cd9f2_o

Hello there! My name’s Katherine. I am an energetic, Southern belle from the States. I fell in love with Japan when I studied abroad and decided that when I graduated I would come back. It has been 5 years since I moved here and so far I am still enjoying Tokyo life. Since this is my first blog, I thought I’d write about what I know. Unfortunately, that is not a lot considering I just joined my company (i.e. the web engineering world) in March. Before March, I hardly touched a computer much less programed on one. Well here I am, half a year later, ready to tell you about my experience! I have come across some wonderfully interesting topics and today I would like to share my top three with you.

はじめまして!アメリカから参りました、元気なサザンベルです。日本の大学に留学した時、日本のことこんなに愛してしまいましたから、卒業したら後で住もうと決めました。日本の生活はあっという間に5年間過ぎちゃったんですが、まだenjoyしています。
3月にハンズラボに入社し、その後の研修の間に、色々ととても面白いトピックを見つけました。
本日、その中でも魅力のあったTOP3をご紹介したいと思います。

In my original presentation, I used Reveal.js as a platform for these topics. Reveal.js is like magic. It already has JavaScript API etc…, loaded on to the framework. The actual write up in HTML and markdowns are directly inside the presentation. This creates a smooth transition between slides and an impressive presentation! Customization is possible but is not easy, explaining the lack of plug-ins available.

これらのトピックを紹介するplatformは、「Reveal.js」と呼ばれています。
先輩エンジニアさんに紹介されて、利用方法も教えてもらいました。「Reveal.js」はJavaScriptAPIなどの機能を乗せているframeworkであり、イケてるpresentationを作成するのに役に立ちます。
Presentationの中身は、HTMLでの記述に加え、markdown記法にも対応し、スムーズに動くスライドを簡単に作成でき、印象的なPresentationをつくることが出来ます。
カスタマイズも可能ですがcustomize又はextendは簡単じゃありません。

While I have been learning CSS and Style Sheets, I discovered the property that changes the shape of your cursor on your computer. When the mouse sits upon the component, it intuitively shows what kind of operation it is.

CSSとStyle Sheetを習いつつ、cursorの形状を変えるためのプロパティがあるのを発見しました。
ここでは要素の上にマウスが乗った時に、どんな操作ができるかを cursor の形状で直感的に示します。

For example, Help me! becomes a question mark, Drag me! changes into a multiple direction cursor, and Click me! turns into a hand. Finally, and one of my favorites, Smile! shows when a picture is added(I just happened to use my company’s logo).

例えば、help に関しては cursor がはてなマークになります。
他にも、drag me だとこのように動かせそうな cursor に変わっています。
Click meもこうですね。Smile!に関してはこのようにチャント画像が表示されています。


Speaking of pictures, I became interested in how to attach photos to the background to create a visually appealing web page. For this, I am using the background-attachment property! As you scroll, this property determines whether or not the background moves.

Here we have the default scroll, and fixed which is an optional value.

The scroll setting sticks with the element while fixed sets the background to scroll with regard to the view point.

画像と言えば、視覚的なWeb pageには背景に画像を操作するのが気に入りました。
background-attachmentというプロパティを使います!
これは背景はscrollしながら動くかとうかのプロパティです。
こちらはデフォルトで scroll、もう 1 つ取りうる値としては fixed というものがあります。
「scroll」だとscrollと一緒にくっついていく設定になります。
こちらを「fixed」にしてあげるとscrollしてもセンターに貼り付いたまま、という指定になります。


This movement is not only for slide shows but for users as well making it interactive.

Reveal.js also has the ability to connect to your web camera as a way to change slides!


こういった動作は slide show だけではなくて、ユーザも使用する、interactiveなものとなります。
slideにはreveal.jsを使っており、Webカメラの前で手を振って操作できます

It reminded me of another project in the works called FaceTouch. It is a man-less receptionist that show the faces of all company workers.
This uses a touch screen, but can you imagine if it used hand gestures or voice commands? As a plus, you would not have to touch the screen which is more hygienic!

これを見た時にFaceTouchのことを思い出しました。FaceTouchとはすべての社員の顔が見える受付です。
これはtouch screenですが、動くジェスチャーや音声コマンドで使うことが想像できますか?
さらに、画面を触らないのでtouch screenよりも衛生的です。

There you have it: some things that have been fun for me to discover and hopefully some interesting things for you to try out!
ど~ぞお試してご覧!

Pocket

DeepDream のローカル実行環境を簡単に作れるリポジトリを利用して人工知能に想いを馳せてみた

Pocket

臼井です。
してみたシリーズしている時は現実逃避気味です。

先に言っておくと、今日の記事はいわゆるグロ注意です。
リンク先にも人によってはつらい感じの画像があるので、耐性が無い方は回れ右願います……

さて。

先日Googleが公開した、DeepDream ですが、
門外漢には環境構築がさっぱり。
webインターフェースを構築してくれた所もありますが、
Deep Dream web interface
処理の待ち行列でいったい何日かかるんだ状態です。
わしもこのビッグウェーブに乗りたいんや!
【人工知能の悪夢】DeepDreamがオープンソースに。さっそく生み出されるホラー画像 – Togetterまとめ
【SAN値直葬】海外の恐すぎるDeepDream画像まとめ #DeepDream – Togetterまとめ

と思っていたところ、以下のリポジトリをネットの海で発見。
Dhar/image-dreamer
これを使って、DeepDream のローカル実行環境をさくっと構築させてもらいました。

手順

README.md のInstallとUsageにだいたい書いてありますが、作業メモを以下に記します。
注意点としては、

  • 低スペックマシンではまともに動かない可能性有り。特にメモリは大量に必要。
    • 新しいMacBookとかは厳しいのでは。
  • VirtualBoxとVagrantはあらかじめインストールしておく。

以下、Vagrant+VirtualBoxを使用し、他にVagrantで仮想マシンを起動していなくてローカルのポート2222が未使用の想定でのメモです。

注意点としては、初期の仮想環境メモリ割り当てが2GBなので、あまり大きいサイズの画像を dreamify しようとすると、途中でプロセスが落ちたりして、完遂できません。
8GBほどメモリを割り当てても、フルHDくらいの画像で精一杯ではないでしょうか。
メモリ重要。webアプリケーションなんかとは性質が違うんです。

さて、個人的には色々ぶん回して、おおーとかぐえーとか言っているんですが、
あまりインターネット上の画像をどうこうしてここに公開するのもよろしくないので、
ハンズラボのサイトに含まれる画像のみに対してやってみます。
続きを読む DeepDream のローカル実行環境を簡単に作れるリポジトリを利用して人工知能に想いを馳せてみた

Pocket

One Day Outing

Pocket

つい最近、ハンズラボでは、月に1日だけ社外勤務ができるという制度ができました。

ネットの繋がるところならどこでもOK(たぶん)。
たまにはいつもと環境を変えて仕事することで、いろいろこびりつかないようにしようという取り組みです。

そこで本日、まさに今、この制度を活用しています。
訪れた場所は・・・ 続きを読む One Day Outing

Pocket

  • エンジニア募集中!