めも

2年生

Babelのインストールから実行まで

今までBabelのことスルーしていたのですが、少し勉強したのでメモです。

Babelと向き合うきっかけ
import Nightmare from 'nightmare';
const nightmare = Nightmare({ show: true });

nightmare
  .goto('https://duckduckgo.com')
  .type('#search_form_input_homepage', 'github nightmare')
  .click('#search_button_homepage')
  .wait('#r1-0 a.result__a')
  .evaluate(() => document.querySelector('#r1-0 a.result__a').href)
  .end()
  .then(console.log)
  .catch((error) => {
    console.error('Search failed:', error);
  });

面白そうなNode.jsのライブラリがあったので試してみたら1行目でエラーになった。

"SyntaxError: Unexpected token import"

公式のサンプルコードそのままなのに。。と思ったらimportをNode.jsで実行する際はES5の構文に変換してあげるといいみたい。
importじゃなくてrequireを使えばいいだけなのだけど、せっかくなのでBabelを使ってみる。
BabelはES6で書かれたコードをES5に変換してくれるトランスパイラ。
使いどころとしては、ES6に対応していないブラウザではES6でコード書いても正常に動かないので、ES5に変換する必要がある。(各ブラウザの対応状況ECMAScript 6 compatibility table)

Babelをインストールしてみる

下記コマンドでインストールする。
yarnはnpmと比べてダウンロードがかなり早いので気に入りました。

yarn add --dev babel-cli babel-preset-env

babelじゃなくてbabel-cliなんだなあ
このままBabelのコマンドを実行しても、何も変換されていないファイルが出力されてしまうのでもうひと手間加える。
Babelの設定ファイル(.babelrs)もしくはpackage.jsonにBabelの設定を記述。
presetsに使用するBabelプラグインを設定する。先にインストールしたbabel-preset-envがそれ。
これで実行環境にあわせて必要なBabelプラグインを選択してくれるらしい。Babelプラグイン・・

//package.jsonに書くならこんなかんじ
  "babel": {
    "presets": [
      "env"
    ]
  }
実行してみる
babel index.js --out-file compiled.js

変換対象のファイルと出力先ファイル名を指定する。
出力されたファイルを確認

'use strict';

var _nightmare = require('nightmare');

var _nightmare2 = _interopRequireDefault(_nightmare);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var nightmare = (0, _nightmare2.default)({ show: true });

nightmare.goto('https://duckduckgo.com').type('#search_form_input_homepage', 'github nightmare').click('#search_button_homepage').wait('#r1-0 a.result__a').evaluate(function () {
  return document.querySelector('#r1-0 a.result__a').href;
}).end().then(console.log).catch(function (error) {
  console.error('Search failed:', error);
});

importがrequireに、constがvarに変換されてる!謎のコードも増えている。。
webpackとかbrowserifyと組み合わせて使うともっといいみたいだけどそれはまたこんど!

メモのメモ
import、exportといったモジュール機構はv8.5.0以降のNode.jsにすでに組み込まれていてBabelを使用しなくても利用可能。
ただ何もしなくても使えるわけじゃなくて少々手を加える必要がある。
参考URL
https://qiita.com/Kaoru_Yamamoto/items/bcca9b63220e23b69399

CodePenが楽しい

codepen.io

CodePenはHTML、CSSJavaScriptといったフロントエンド側のコードを公開できるwebサービスです。

クオリティ高いコードがたくさん公開されてて見てるだけですごく楽しいし、自分も真似して何か書いてみたくなります。

というわけでCSSのみでハートと豚を描いてみました。

丸や四角や三角を組み合わせて作ります。パズルを組み立てるようで楽しかったです。

See the Pen pig by komatsuna (@komatsuna) on CodePen.

2016年のふりかえり

今日で2016年が終わってしまうので今年一年を振り返ってみようと思います。

業務ではC#でバッチファイルの作成やwebアプリの機能実装をしたりGebを作成したりして、様々な技術に触れることができました。

自分が書いたコードが実際に利用されていると思うと感慨深いです。

次に業務外のことを考えるともっと頑張れたんじゃないかなあと思います。

履歴書の志望動機に"色々なことにチャレンジしたい"って書いたのを思い出して、実際チャレンジした?って振り返ってみたらあまりしてなくてダメじゃん…ってなりました。

勉強会に行ったり資格に挑戦したり自分の知らない技術を身に着けようとすることが少なかったです。

来年は同じような記事を書かないような1年にしたいです。まずは資格取得を目指していきたいと思います。

今はLPICレベル1の勉強をしてます。1月中に取得したいです…!

あとHTML5基本情報技術者を取得したいです。

 

今年1年ありがとうございました。

来年もよろしくお願いします。

VirtualBoxで64bitのOSを選択できるようにする(windows10)

仮想マシンの作成で詰まったので備忘録です。
Ubuntuのインストールをしようと思い、VirtualBox仮想マシンの新規作成を行おうとしたら32bitのOSしか選択できなくて困りました。
Ubuntuの最新バージョンは64bitしか配布されてないので、どうにかして選択できるようにせねばです。
原因を調べたらCPUの仮想化支援機能がオフになっていたことが原因のようです。
仮想化支援機能とはCPUが仮想化ソフトウェアの処理を一部分担して高速処理してくれるものだそうです。CPUが手伝ってくれないからパフォーマンス的に64bitは無理!って感じなのでしょうか????

とりあえず仮想化支援機能をオンにしてあげれば64bitも選択できるはずです。オンにするためにはBIOSの設定を変える必要があります。
BIOSはPCを起動したときに入出力装置の制御やOSの読み込みなどをしてくれるプログラムのことです。
仮想化支援機能をオンにするまでの手順は以下の通りです。

BIOS設定画面を開く

1.スタートメニューの"オン/オフ"のメニューを開き、Shiftキーを押しながら"再起動"をクリック
2.オプションの選択画面が表示されるので、"トラブルシューティング"をクリック
3.トラブルシューティング画面の"詳細オプションをクリック"
4.詳細オプション画面の"UEFI フォームウェアの設定"をクリック
5.再起動をクリック
これでBIOS設定画面に遷移できます。

仮想化支援機能をオンにする

1.メニューから"Advancd"をクリック
2."CPUconfiguration"をクリック
3."Inter virtualization Technology"が"Disable"になっているのを"Enable"に変更
これで仮想化支援機能がオンになります。

BIOSはデリケートな部分なはずなのでいじるのは緊張します…ヒェ~
それはともかくこれでVirtualBoxで64bitのOSを選択できるようになりました!

私がGebで困ったときの解決法まとめ

ハロウィンですね。私は最近Gebやってます。自動でブラウザが操作されている様子はなかなかなかなか面白いです。
備忘録をかねてGeb書いてて困った時の解決法をまとめます。

テスト実行スピードが速すぎてアプリケーションが追い付かないよ。。

まだページの読みこみが終わってないのに要素を取得しようとしたりしてエラーが起きることが多々あります。
そんなときはwaitFor{}を使って待ってもらいます。

waitFor{$("要素").isDisplayed()} // 要素が読み込まれるまで処理を止める
waitFor{$("要素").click()} // 要素がクリックされるまで処理を止める

普段は失敗しなくてもたまにテストが先走って失敗することもあるので保険のつもりでつけたりしてます。

画面外の要素が取得できないなあ。。

Seleniumの仕組みをちゃんと理解していないのでよくわからないのですが画面外の要素をたまに取得できないときがあります。
正確にいうと要素自体は取れるけどvalueとかタグ間の文字列が取れない。。
そんなときは目的の要素を画面内におさめてやります。

JavascriptExecutor exe = (JavascriptExecutor) driver
exe.executeScript("element.scrollIntoView(true)")

JavaScriptのscrollIntoViewを使いました。
対象の要素を引数がtrueなら画面上部、falseなら画面下部に表示するようスクロールされます。
JavascriptExecutorのexecuteScript()でJavaScriptを実行することができます。
jQueryでもscrollTopとかscrollLeftとか同じようなメソッドがあるのですがGebだとうまく引数を渡せなくて断念してしまいました。

書くネタをメモしてくるのを忘れたのでひとまずこのふたつです。今後追記していこうと思います!

全く関係ない話になるのですが、ハロウィンなものをjQueryでつくってあそぼしようと思ってました。
残念ながらハロウィンに間に合いませんでしたが描いたおばけが力作なので載せます(/・ω・)/
f:id:ktlcs517:20161031221620g:plainf:id:ktlcs517:20161031221431g:plain

JavaScriptでたこ焼きを飛ばす

またJavaScriptです。JavaScriptドット絵の練習と息抜きを兼ねてます。
投稿するの恥ずかしいのですがせっかく頑張って作ったので投稿します。
前回の記事の要素を左右に動かす動作をレベルアップさせてみました。
どうレベルアップさせたかというと、動いている要素の位置を起点とした動く要素を追加できるようになりました???
とりあえず↓をResultタブに切り替えてボタンクリックしてください!

appendメソッドでimgタグ(たこ焼き)を追加してからcssメソッドで属性を追加しています。
このとき、ボタンを押下したときのタコの位置(top)をたこ焼きのtopに設定してます。これでタコと同じ高さにたこ焼きが表示されます。
そしてanimateメソッドで横に移動するようにしています。たこ焼きを残したままにするとなぜかバグるので移動し終わったタイミングで消すようにしてます。
これでボタンを押下するとタコからたこ焼きが発射されるようになります。

タコ画像の背景が透過されてなかったり連打するとバグったり連射できなかったり詰めが甘々なのでそのあたりが課題ですね。

使用しているエディタはatomなのですが、特にパッケージも追加してないので書いてて手探り状態でしんどいです。でもデベロッパーツールがいるから頑張れます。
とりあえず環境整えてからまたやろうと思います~~月末ハロウィンなのでそれっぽい何か作りたいですね。

f:id:ktlcs517:20161003231400g:plain
顔の輪郭に影をつけました。前よりほんのり進化?

JavaScriptでドット絵インコを歩かせる

ドット絵が好きなので書いてみました。
f:id:ktlcs517:20160928004742g:plain
なかなかの力作!(所要時間:3分)
せっかくなのでJavaScriptで歩かせましょ!
f:id:ktlcs517:20160928004821g:plain
一歩踏み出し画像を用意しました。



歩いた~~^^
まず画像を格納した配列(imageUrl)と配列の要素の番号を表す変数(imageCount)を用意します。
そしてimageCountが0ならインクリメントしてimageCount[1]の画像のURLをセット、1ならその逆でimageCount[0]の画像のURLをセット。。という処理を0.5秒毎にしてます。


と、頑張ったのですがただ一定のテンポで画像を切り替えるだけならGIFアニメ作成した方が楽でした。
f:id:ktlcs517:20160928004827g:plain
www.bannerkoubou.com
上記サイトで一瞬で作れました。なんという。。


悔しかったので横に動かしました。

jQueryのanimateメソッドを使用しました。操作したい属性としてleftをセットして横に移動させています。
ちなみにleftは左方向ではなくx座標のことを指します。
leftに200px移動させたからrightに200px移動させよ~!とかすると、画面外に行ったまま帰ってきませんでした。。
また座標を対象とする場合は対象物のcssにpositionを設定する必要があります。


かなり簡単な動作だと思うのですがJavaScriptにあまり触れたことがなかったので苦労しました。じわじわレベルアップしていきたいです!
あと前回の記事のAPIと組み合わせて天気予報インコ作ってみたいです。
それではおやすみなさい~