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

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!
ど～ぞお試してご覧！