忍者ブログ
 
 
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

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

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


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

<template>

foundation → bootstrap

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

<追加導入>

サブメニュー

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

ページtopへ

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

affix

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

scrollspy

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

fontawesome

 

js concat

  bowerのものを、1つに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のみを行うことにする
、、、が、単体で出来る事もないのでやめたw
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のことを一旦勉強中。






人気ブログランキングへ にほんブログ村 イラストブログ オリジナルイラストへ blogram投票ボタン PINGOO!カテゴリイラスト・写真
PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
管理人・颯来の近況や、オススメのものを紹介! イラスト中心サイト→http://sora9.web.fc2.com/
           
プロフィール
名前:颯来(そら)
自作イラストを載せています。
オリジナルイラスト中心。
ファンタジー系多め
…more
HP:Jumble Junk
手書きブログ pixiv
ついった(近況報告)
フリーエリア
pixiv
instagram
ブログ内ページランキング
ブログ内カウンター
ラクガキ一覧
ブログランキング
アクセス解析
レコメンデーションエンジン track feed jumblejunk颯来ブログ
ランキング
blogram投票ボタン

人気ブログランキングへ にほんブログ村 イラストブログ オリジナルイラストへ PINGOO!カテゴリイラスト・写真
アーカイブ
これ以前のアーカイブ一覧
RSS
ブログ内検索
カレンダー
05 2017/06 07
S M T W T F S
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30
リンク/BlogPeople
++++++++++++++++++++++
忍者ブログ [PR]


Designed by Pepe
Related Posts Plugin for WordPress, Blogger...