ごちゃまぜのガラクタ - 颯来イラストブログ -

ブログの整理

とてもとても久しぶりにブログを書いてみます。

もろもろいろいろ整理してみました。

〇アクセスランキング系、アクセス解析系など、
サービス終了しているところのタグ削除とか
終了していなくても、使ってなかったり、実質（うちで）機能していないところは削除
使えてないリンクも削除
いらないところの会員削除

アクセス解析履歴を見ると、月に１～２回アクセスがあって少しビビる。
どこ経由かな？？
もしかしてクローラーとかでも反応するのかな？？

〇テンプレート
変更。
昔メインで使用していた雲のテンプレートもなじみがあったのでそれにしようと思ったけど、
３列で記事の幅が狭いので、２列で似ていたものに変更してみた。

〇ホームページ
だいぶ前に、更新しないのでFTPロックがかかっている。
更新用データもすぐに出てこないところにしまいこんでいるので、更新してない。
自他共にリンクとか見直した方がいいところもあるんだけど。。。

いにしえのネット住民なので、最近のものがあまりわからない。
ホームページとかも最近はもうないのかしら。。。
自分自身がよく見るのも、twitterとかインスタだしね。。。

トップページ構成変更してみた

<before>

↓↓↓
<after>

カルーセルで画像を表示させてみました。
下の説明なども、レスポンシブの列で表示してスッキリ。

ここ数年サイト改装しか更新していない。
画像表示を最近更新したイラストにしようと思ったら、全然更新してなくて辛い。

でも、以前設定してたjenkinsで、build, lint, test, deploy一発で出来て嬉しい。
テストも、共通と各ページ用と増やして出来て満足♪

開発環境っぽいもの

いろいろ勉強して、webページ作るのに試したツール群をまとめてみる。
分類を細かめ。ツールじゃなくて、考え方も入ってるかも。
太字は、まだ触っていないので試してみたいもの。
最後は、使えたら使ってみたいけど使いどころが見つかってないとかの、ツール名のメモ。

プロジェクト管理…redmine

CI ツール…Jenkins
エディタ…sublime text, atom
タスクランナー…gulp

バージョン管理…git
パッケージ管理…npm
フロントパッケージ管理…bower
モジュール管理…Webpack

javascript開発フレームワーク…Angularjs, react, flux
開発言語…coffeescript, typescript ECMAScript 6

CSSメタ言語…sass
CSSフレームワーク…bootstrap
CSS設計パターン…MCSS, SMACSS
スタイルガイド…StyleDocco

htmlメタ言語…Jade

単体テストフレームワーク…jasmine
テストランナー…karma
テスト仮想実行環境ブラウザ…(phantomJS)
E2Eテストフレームワーク…protractor, (selenium)

サーバー環境構築…chef
chefのcookbook依存性管理…Berkshelf
サーバーテスト…serverspec
仮想環境構築…vagrant, Docker
仮想マシン…VirtualBox
仮想ディスプレイ…xvfb
サーバーOS…ubuntu

ログ収集ツール…fluentd

監視…zabbix ビルドツール…gradle
コードレビュー…gerrit

イラレの勉強しています。

Illustratorデザインメソッド

学生の最後に、学生の特権を使うべく、学割でイラレを買いました。
それから数年、未だ使いこなせず、、、このまま宝の持ち腐れはダメ。。。
参考にしようと、本を買ったのもだいぶ前ですが、はじめの方を試して終わり、、、
何度か、イラレ練習は使用としていたのですがね（これとかこれとか）

本の全体を通して、描いてみたいもの、異なる書き方・機能を使用しているものをピックアップして描いてみました。

タマゴ、星、クリップ、ジグソーパズル、花、オレンジ、蜘蛛の巣、チェック柄、リース、ファー、羽根、ダイヤモンド、水引

ダイヤモンドは、説明もそれなりの量があるので難しそうと思ったら、やっぱり難しいｗ途中で一部加工を省略ｗ
羽根は、手順としては単純だけど、ブレンドの元のパスが難しい。どういう角度でするときれいになるんだろう。
水引は、パスに適用するだけかと簡単そうと思ったのに、その後の手順が色々あって複雑だった。手順通りだから出来たけど、一からだと、ここでクリッピングマスクが必要って気づかないだろう。

全体的に、どこに繰り返しがあるか、どこを線、面とするかというのを考えるのがポイントなんだなと思った。
幾何学的な模様とか、回転や移動を数値で機械的に指定するので、プログラマブルなところもある。
回転の軸とか、altやshiftを押しながらクリックする機能は、知らないと出来ないな。本で書かれていても、初めわからなかった。

この本自体は、作者が素材集なども出していることもあり、デザインが可愛くて使いたくなるようなものばかりです。ただ、書いていて思ったのは、レビューにも有りますが、説明が少ない部分があります＾＾；
「元の画像を描きます」、、、元画像書くのが難しい
「必要なところは、パスを連結します」、、、必要なところってどこ？
「配置して調整した後、再登録します」、、、あれ再登録できない。→間で一度分割が必要
「パスに合わせて塗り分けます」、、、あれ？さっきの図より、いつの間にかパス増えてる？？
とかね。。

いろいろ描いてみて、前よりは使い方にだいぶ慣れたはず。
次はミニキャラなどを描いてみよう。

課題図書というか、最近読んだ本

片手間に隙間時間に本を読むのがちょうどいいので、最近色々買ってます。
紙のものは自分のものは電子化して。（借りたのはだめですが）
もともと電子の本も買い始めました。
技術書もお値段はするので、月に一冊までにしてますが、自分でもどんなの買ったかなと思ったので、読書メモが残っているものを数年前のも含めて一覧にしてみました。

#2012
* 2月・・・Headfirst ruby on rails

#2014
* 3月・・・リーダブルコード
* 6月・・・Headfirstオブジェクト指向分析設計

#2015
* 4月・・・Headfirst デザインパターン
* 5月・・・Headfirst デザインパターン
* 6月・・・
* 7月・・・javascript本格入門
* 8月・・・デザインパターン入門マルチスレッド編
* 9月・・・Effective javascript
* 10月・・・CSS設計の教科書
* 11月・・・（お休み、もしくは、illustlatorデザインパターン）
* 12月・・・SQLアンチパターン

Headfirstシリーズ。出会いは、コミュニティの課題図書として。
一度目は、わざとエラーが出たりまわりくどいかなと思ったけど、例がわかりやすくて覚えやすいので、好きなシリーズに。

家にあったので借りて読んだシリーズ


Javascriptを一度じっくり勉強しようとして買ったもの。

kindleでセールしてたので。コンポーネント設計について、実践的なところがわからなかったので参考になればと。ちょっとしたサンプルがあります。

オライリーの電子書籍で買ってみました。pdfなので、汎用的で嬉しい。内容はこれから。

おまけ。
かわいいデザインの作り方いっぱい。これでイラレの操作の仕方勉強してます。

これから。
次に気になっている本。

vagrant, chefメモ

Jenkinsを実行しようとしたときに、ローカルユーザーとJenkinsユーザーで、グローバルに入れてたツールが権限で読めなかったりしました。
アプリだけじゃなく、実行する環境を文書化して、自動構築できるようにしておくことも重要だと感じ、勉強し試してみました。
なお、vagrantは基本をドットインストールで勉強、http://dotinstall.com/lessons/basic_vagrant
chef, berkshelfは、qiitaで見ました。
では、その時にあった問題メモを以下に記載します。

1. windowsで、gitデータでの実行を確認

windows側でもう一度実行しようとしたら、古くなっていたのか、npm installからは動かなくなっていたので、nodejsのバージョンアップからやり直し。

npm updateで、パッケージもバージョンアップ。

2.vagrant, chefの準備

vagrant plugin install vagrant-berkshelf

が、開発をやめるので、あまり使わない方がよいとあったが、その後、pluginを作り直したそうなので、普通に使える。

http://qiita.com/DQNEO/items/b8d2c2d88189812d6e68

chefDKを、vagrant側に入れようとしたけど、設定ファイルですぐに出来なかったので、windows側に入れることにした。

vagrant側は、plugin(vagrant-omnibus, vagrant-berkshelf)で入れる。

3.vagrantを起動して、必要なツールインストールを記述する。

bundle installのために、bundler追加

npm install -g bowerのために、git追加

npm install -g は、権限のため、sudo

npm installのとき、rebuildしているらしく、g++が必要。

apt install g++ で、入れることができた。

レシピを探すが、単独はないので、build-essentialを入れる。

sudoが必要。

vagrantの共有フォルダは、シンボリックリンクが作れないのでnpm installで、エラーとなる。

npm install --no-bin-linksで、エラーはなくなるが、実行時エラーとなるので、共有フォルダではなく、homeで実行する。

nodejsのバージョンが、最新ではないみたいで、warningが出てる。 →

nodejs最新->5.x

http://qiita.com/notsunohito/items/eb719b3206981159cc05

https://github.com/nodesource/distributions

gemfile → Gemfile

jadeファイルのパス表記が、windows→linuxで、\→/

npm install -g で必要なものは、defaultレシピで、shellで実行。

jade, coffee-scriptは、グローバルインストールは不要。(--save-devで入れてたみたい)

4.gulp test

ここで、gulp lint, gulp buildは、実行可能となる。

のこりは、gulp test

protractor exited with code 8

Chromedriverがないと言われる。

→

protractor.conf.coffeeに追加。

chromeDriver: './node_modules/protractor/selenium/chromedriver'

https://github.com/angular/protractor/blob/master/docs/referenceConf.js

最新バージョンでは、実行できないので、ダウングレードが必要らしい。ダウングレードが面倒なので、対応するまで待つことにする。

https://github.com/angular/protractor/issues/2638

nodejsを最新にしたら、解決してるっぽい。

しかし、他のエラーが出てる。

5.vagrant内のシェルで実行を試してたのも、provisionで実行するように記述。

gitから、ソースを取得。bundle, bower実行。

bower install

→sudo bower install -f --allow-root

npm

/tmp/npm-0/.npm/4f4b43d0-m-0-npm-lodash-2-4-1-package-tgz.lock

→npmのバージョンが古いと、複雑なpackage依存で起こるらしい。

https://github.com/npm/npm/issues/6309

→npmのアップデート

→表示が前と変わったけど、killedって表示されてる。途中で終わっているようで、node_modulesの中に何もない。

→メモリーを増やす

512->2048

gulp-filterの書き方が変わっていた。

追記(2015/11/22)

JDKが、java cookbookだと、デフォルトで、6が入るらしい。その影響でwebdriverが動かなかったようなので、JDKバージョンを指定して入れる。

JDK6->7

xvfb用に、DISPLAY=:0 つける。

protractor.confに、directConnect: trueを追加。

https://github.com/angular/angular-phonecat/issues/276

Jenkinsメモ

ホームページのソースについて、gulpを用いて、自動でbuildなどしていましたが、Jenkinsを使って実行できるようにしました。
「CIしたい」というよりかは、「Jenkins使いたい」というための、勉強のようなもの。
出来るようにしたことは、以下の通り。

1.build
gitからチェックアウト
npm installなどで、必要な環境構築
Jadeやsassなどからビルド

2.lint
coffee-scriptやsassなどのソースを解析
checkstyleなど

3.test
動作について、e2eテスト
ユニットテストもしたかったけど、するほどのソース量がなかった。

4.deploy
buildしたソースをサーバーに転送する

これらのJenkins設定を行う際にあった問題と解決について、メモがあるので以下に記載します。メモなので言葉足らずなところもあるかもしれませんが、後で気が向いたら追記します。少しでも何か参考になれば。

jenkinsメモ

1.Jenkinsが、グローバルに入っている、gulpなどを読み取れない。

カスタムワークスペースを利用

C:\Users\sora\Documents\Jenkins\myweb

npm config set cache C:\npm\npm-cache --global

http://kakakikikeke.blogspot.jp/2013/08/windowsjenkins.html

実行ユーザがLocal SystemになっているためWindowsに設定しているJAVA_HOME等の環境変数が有効になっていない

■解決方法

ファイル名を指定して実行からservices.mscを入力

一覧からJenkinsを探す

右クリックからプロパティを開く

プロパティダイアログが開いたらログオンタブを選択

アカウントを選択しWindowsにログインするユーザ名とパスワードを入力する

アカウントを検索した場合は参照から検索できる

名前を入力して「名前の確認」というボタンを押下するとそのユーザがいるかどうかを確認できる

アカウントが設定できたらプロセスの一覧画面に戻り右クリックから再起動を実施すると環境変数が反映される

2.build

json,jadeのデータが一部gitにあげてないので、ローカルでコピーする　→タスクとして追加

3.test

A Jasmine spec timed out. Resetting the WebDriver Control Flow.

繝�繧ｹ繝茨ｼ域峩譁ｰ螻･豁ｴ�ｼ�

[31m笨� 繧ｵ繝悶Γ繝九Η繝ｼ縺ｮ譛�蠕後�ｮ隕∫ｴ�縺ｯ縲�2006蟷ｴ縲�[39m

[31m- [39m[31mError: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.[39m

「Windowsではサービスとしてcronなどのdaemonを起動させると、そのプロセスからはGUIアプリケーションを立ちあげて動作させることが出来ない制約があります」

らしい

→ローカルでマスタースレーブを作り、起動してそちらで実行することに

コンソール文字化け

　→環境変数に以下を追加

JAVA_TOOL_OPTIONS=-Dfile.encoding=UTF-8 -Dsun.jnu.encoding=UTF-8

http://www.ramuda.co.jp/techlabo/archives/2609

4.lint

scss-lint

バージョンが古かった。更新した。

gemfileを今まであまり扱っていなかった。

coffee-lint

checkstyleがconsole.logに出力される

ファイルに出力したい。　→　一時的に、console.logを変更

色情報を消したい　→　正規表現で削除

console.log = (d) ->
log_file.write d.replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, '') + '\n'

5.deploy

パスワードなどを、引数として指定するようにし、ファイルに保存しない

conn.newer　としているけど、新規だけじゃなくすべてのファイルが転送される。

転送時に更新日時が更新されてる？

→different size とした

gulp buildが、--release --jenkins　をjenkinsで実行した時のみエラーになる

6.フロー

フロー表示をしたかった。

pipeline pluginを入れた。

もやしもん１２

もやしもん(12)限定版 (プレミアムKC イブニング )

西野さんを交えて、大きなテーマは、以下の２つ
　日本酒業界
　大人って何？

日本酒業界については、
桶取引、逆桶買いなど

お酒についてはよくわからないから、
そういうのもあるんだ。
美味しければ、作り手も納得してればそれでいいじゃない？と思ってたけど、
改めて読むと、著作権の話とか関連するかなと思って気になる。

あと、いつもの様に、お酒の作り方、菌たちの仕事などが解説されていて、
お酒飲めないのにお酒知識がつくよｗ

大人って何？については、
はじめに読んだ時は、ふんわり思っていたけれども、
改めて読みなおして、自分も以前より少しだけいろいろ経験して時間が過ぎたからか、
共感できる言葉が、多くあるなぁと思える。
前よりも、共感する内容の意味がよりはっきり認識できたかな。

以下に、その、読んでて、わかる！とか、いいねと思った言葉を抜粋します。

　　西野さんの「私のことを分かった風に決めつけないで」

　　ワインは加点法、日本酒は減点法。人でも減点より褒められたいね。

　　転機っていうのは後付で、
　　実は毎日ってのはつながっているからいきなり変わったりしない
　　転機を待たなくても、やりたいことをやればいい

　　大学生ってなってみたらガキだよね
　　小学生の頃は中学生は大人に見えたけれど、自分が高校生になったら小学校の時と変わらない
　　「大人」は常に私から遠い

　　二十歳になったら大人の仲間入りするんだと思っていたけど、相変わらず大人は二十歳なんて鼻であしらって子供扱い

　　先達が今日までやってきたことは、君たちはもう一からやらなくても容易に手にすることが出来る
　　君たちにとって素晴らしいリードだ
　　僕なんかよりもずっと先に進める可能性を持っているんだ

→もやしもん

JavaScript本格入門　～モダンスタイルによる基礎からAjax・ｊQueryまで

jQueryは、別の本で読んでみたり、なんとなくwebの情報で使っていたjavascriptだけれど、一度本で学んでみようと思って、買って読んでみました。

各章としては以下のとおり。（正確な章の名前ではなく、扱っている内容を記載）
Capter1　javascriptとは？
Capter2　基本的な文法、型、制御命令など
Capter3　基本データ型、オブジェクト
Capter4　関数
Capter5　オブジェクト指向構文
Capter6　ブラウザオブジェクト
Capter7　DOM
Capter8　Ajax
Capter9　jQuery
Capter10　現場で使うための応用知識（JsUnit/JsDoc/コーディング規約など）

前半の、Capter２～5が知らなかった内容。
後半の、Capter6～は、だいたい知っている内容でした。

特に、関数やオブジェクト指向構文などは、webの使用例などを見ているだけでは構文として学べなかったので、良かったと思います。
この本を読んだ後に、webの記事を見なおしていると、分かる部分が増えて理解が深まりました。

後半については、この本が、2010年に発行されたもののため、その後、ライブラリやフレームワークが色々出ているのは反映されていません。
そのため、もともと知っていたことが含まれていることもあり、参考程度でした。

ひと通り、基本的な文法を確認したので、次に読む本に悩むところ。
目次レベルだと、あまり差がわからないものもあり、、、
オライリーのjavscript（サイ本というらしい）は、分厚いし、
JavaScript: The Good Partsは、書評によると癖が強いらしい？出版も2008年と古め
JavaScriptパターンは、書評がわからないけれど、ちなみに出版は2011年
Effective JavaScriptを読んでみようかな、、いいという書評も見たし、この中では2013年発行と一番新しい。

ES6という新しい標準化が出てきているらしいし、その解説か、
Coffeescriptの文法を確認したほうが良いかなぁ
（coffeescriptは、{}を書かなくて良いのとかインデントが楽で好き）

なお、最近は、これも読んでる　→JavaScript Promiseの本

webページ更新しました。というか、webのお勉強　→bootstrap　→webテスト

webページ更新しました。
・・・といっても、コンテンツとしては特になく、構造をね。。。
webコンテンツ作成の勉強になった。

そして、更新履歴を見て、約１年ぶりの更新。。。

以下に、変更点を記載します。

＜template＞

foundation　→　bootstrap

　簡単。
　この前が、jadeでlayoutを外出ししていたため、そこの構成やclass名を変えるだけですぐに対応できた。

＜追加導入＞

サブメニュー

　　これまでサイドのメニューは、topのメニューと同じにしていたけど、同じページ内の項目にしてみた

ページtopへ

　　ページの右下などでよく見る。同じページのtopへ移動ボタン追加。
　　これも、bootstrapであるかと思ったんだけど、無いようなのでjsにサンプルからそのまま記載

affix

　サイドのメニューが、スクロールしても同じ位置に固定する機能。
　bootstrapにあったので、追加してみた。
　追加で、レスポンシブで幅が狭い時は、上部にあるため、コンテンツと被らないように、実施しないよう@mediaで制御追加

scrollspy

　スクロールしていると、現在のコンテンツにあわせたサブメニューの見出しをactive表示して、自分が今どれを読んでいるか分かるもの。bootstrapのサイトでも利用されている。
　こちらも、bootstrapにあるので追加してみた。
　スクロールを始めると、サブメニューの幅が小さくなるというバグが有るらしいので、それにも対応。

fontawesome

js concat

　bowerのものを、１つにconcatしようとしたけれど、jsは順番がやっぱり重要で、順番が異なると動かない。依存関係を確認するというのをいろいろ調べたけれども、できなかったけど、
　　bower.json内のdependenciesの順番変更したらすぐ出来た。
　　dependenciesは、アルファベット順かと思っていたけど、変更できたみたい。

＜構成の分離＞

jade内の記載のうち、ページ構成ではないデータをjsonに分離
繰り返し処理のPGM化促進　変更履歴など

＜CSS＞

css spriteを利用しようとして、うまくいかないからやめた
後で、これだけ試す

scssをsass記法に変えようとして、うまくいかないし、bowerのscssファイルを現在参照しているので、やめた

＜gulp＞

browsersyncで、変更があったらブラウザ上もリロードして確認
gulpのcoffeeコンパイルを、これまで、coffeeだけのもので行っていたけれど、webpackで行う

＜webテスト＞

karma・jasmine

この辺を見て、勉強したので、使ってみようと思った。
静的サイトなので、特にjsのロジックはなく、animationぐらいなんだけど、試してみようとした。
http://qiita.com/hosomichi/items/4e508e804b0e50e7b6ec
http://qiita.com/hosomichi/items/311e3eac4f55183b62c2
http://qiita.com/hosomichi/items/7464c69bf54927d019a7

こちらにもwebpack導入。テストをcoffeeで書くため

DOMの操作をしやすくするよう、karma jquery導入

ページが表示されないと思ったら、相対パスが異なっていた。（specファイルからの相対位置ではない？）
　document.body.innerHTML = window.__html__['../WebContent/history.html']
→document.body.innerHTML = window.__html__['WebContent/history.html']

jsのcoverageがとれないと思ったら、パス指定の間違いだった（間に空白入ってた）
　'WebContent/js/**/* .js': ['coverage']
→'WebContent/js/**/*.js': ['coverage']

karmaでwebページ動作テストをしようと思ったが、ページリンク動作がうまく動かず
結局、karmaはunit testで、integrated testじゃねーからと言われたので、
ひとまずunit testのみを行うことにする
、、、が、単体で出来る事もないのでやめたｗ
http://bittersweetryan.github.io/jasmine-presentation/#slide-17

protractor

そこで、end to endテストを行うことにした。
karmaにも、end2endのプラグインが（非公式？？）あるようだけど、動かなかったので、e2e用という、protractorを利用してみる。
はじめ、for AngularJSと書かれていたので、他のだと使えないと思って諦めていたけど、使ってみたら出来た。検索したら、Angular以外で利用しようとしている人も、まあまあいるみたい

tutorialが、confとspecをjsで書かれていたが、coffeeで書きたい。
エラーが出ていたが、byがcoffeescriptの予約語とかぶっている記事を思い出して、Byに変更すると実行できた。

windowサイズ初期化

リンククリック後のスクロール値取得しようとしたが、animationで時間差があるため、sleep使用

helper関数化

テスト完成後、共通部分を関数として外出し
　しかし、javascriptの文法＋coffeescriptの文法がいまいちわかっていないので、なかなか動かない。結局、()のあるなしで動かなかったみたい。
　　getScrollTop
　→getScrollTop()

さらに、helper関数として外出し

サーバー終了設定

gulpの設定で、こちらの方法で、サーバーのexitをしようとすると、テスト実行されない
https://github.com/schickling/gulp-webserver/issues/48

こちらの方法で、終了時の処理を入れると、テストが実行後、自動終了するようになった
.on 'end', -> process.exit()
http://stackoverflow.com/questions/29968380/how-to-exit-protractor-when-done

なお、参考までに、最終的なspecファイルはこちら。

<e2eSpec.coffee>



h = require('../helpers/helper')



describe 'テスト（更新履歴）', ->



  submenu_link_list = $$('.submenulist li')

  submenu_link_last = submenu_link_list.last()

  submenu = $('.submenulist')

  mainrow = $('.main-row')

  gototop_link = $('.gototop')



  SLEEP_TIME = 1000

  INIT_WINDOW_WIDTH = 1500

  INIT_WINDOW_HEIGHT = 1000

  SCROLL_TEST_ITEM = 5





  beforeEach ->

    browser.driver.manage().window()

        .setSize(INIT_WINDOW_WIDTH, INIT_WINDOW_HEIGHT)

    browser.ignoreSynchronization = true

    browser.get browser.baseUrl+'/history.html'

    return





  it 'サブメニューの最後の要素は「2006年」', ->

    expect(submenu_link_last.getText()).toEqual '2006年'



  it 'サブメニューの最後の要素のリンク先は、#submenu[0-9]*であること', ->

    submenu_link_last.$('a').getAttribute('href').then (submenu_link_url) ->

      expect(submenu_link_url).toMatch '#submenu[0-9]*$'



  it 'サブメニューリンクをクリックすることで、ページ内リンク先に移動すること', ->

    # 初期スクロール位置の確認

    expect(h.getScrollTop()).toEqual 0



    # サブメニューリンクをクリック

    submenu_link_last.click()

    browser.sleep(SLEEP_TIME)



    # クリック後のスクロール位置の確認

    submenu_link_last.$('a').getAttribute('href').then (submenu_link_url) ->

      submenu_link_id = h.getLinkId(submenu_link_url)

      $(submenu_link_id).getLocation().then (locationdata) ->

        mainrow.getCssValue('padding-top').then (headerH) ->

          expect(h.getScrollTop()).toEqual locationdata.y - parseInt(headerH, 10)





  it 'スクロールすると、サブメニューが合わせて移動すること', ->

    # サブメニューの初期location取得

    init_locationdata_y = 0

    submenu.getLocation().then (locationdata) ->

      init_locationdata_y = locationdata.y



    # スクロール

    submenu_link_list.get(SCROLL_TEST_ITEM).click()

    browser.sleep(SLEEP_TIME)



    # スクロール後のサブメニューの位置が、スクロール量+初期locationであること

    h.getScrollTop().then (scrollTop) ->

      submenu.getLocation().then (locationdata) ->

        expect(locationdata.y).toEqual scrollTop + init_locationdata_y



  it 'スクロールすると、scrollspyが動作すること', ->

    # 初期はactive状態ではないこと

    expect(h.hasClass(submenu_link_list.get(SCROLL_TEST_ITEM), 'active')).toBe(false)



    # スクロール

    submenu_link_list.get(SCROLL_TEST_ITEM).click()

    browser.sleep(SLEEP_TIME)



    # スクロール後に、titleに一致した項目がactiveになっていること

    expect(h.hasClass(submenu_link_list.get(SCROLL_TEST_ITEM), 'active')).toBe(true)



  it 'トップへボタンで、ページ先頭に移動すること', ->

    # トップへボタンをクリック前に、スクロールする。初期位置がページ先頭でないこと

    submenu_link_list.get(SCROLL_TEST_ITEM).click()

    browser.sleep(SLEEP_TIME)

    expect(h.getScrollTop()).toBeGreaterThan 0



    # トップへボタンをクリック

    gototop_link.click()

    browser.sleep(SLEEP_TIME)



    # ページ先頭に移動していること

    expect(h.getScrollTop()).toEqual 0

<helper.coffee>



module.exports = {

  getScrollTop : ->

    browser.executeScript('return document.body.scrollTop;')



  hasClass : (element, cls) ->

    element.getAttribute('class').then (classes) ->

      classes.split(' ').indexOf(cls) != -1



  getLinkId : (url) ->

    url.substring(url.lastIndexOf('#'), url.length)

}

＜今後＞

今後、追加でやりたいことメモ
・Jenkinsでテスト　CI　→（7/14 build/test/lint）
・css sprite　→アイコン整理したら、spriteする画像がなくなった。。。
・coffeescript lint　→（7/11）
・sourcemap　→（7/11 仮）
・SNSアイコン変更　→　（7/15）
・gulpファイルをtaskで分割　→　(11/26)

なお、現在、こちらの本で、javascriptのことを一旦勉強中。