<?xml version="1.0" encoding="UTF-8" ?>
<feed xml:lang="ja" xmlns="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:thr="http://purl.org/syndication/thread/1.0">
  <title type="text">ごちゃまぜのガラクタ - 颯来イラストブログ -</title>
  <subtitle type="html">管理人・颯来の近況や、オススメのものを紹介！
イラスト中心サイト→http://sora9.web.fc2.com/
</subtitle>
  <link rel="self" type="application/atom+xml" href="http://sorajumjun.blog.shinobi.jp/atom"/>
  <link rel="alternate" type="text/html" href="http://sorajumjun.blog.shinobi.jp/"/>
  <updated>2006-12-14T23:33:34+09:00</updated>
  <author><name>颯来（そら）</name></author>
  <generator uri="//www.ninja.co.jp/blog/" version="0.9">忍者ブログ</generator>
  <atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" />
  <entry>
    <id>sorajumjun.blog.shinobi.jp://entry/854</id>
    <link rel="alternate" type="text/html" href="http://sorajumjun.blog.shinobi.jp/Entry/854/" />
    <published>2020-05-02T20:45:14+09:00</published> 
    <updated>2020-05-02T20:45:14+09:00</updated> 
    <category term="サイトについて" label="サイトについて" />
    <title>ブログの整理</title>
    <content mode="escaped" type="text/html" xml:lang="utf-8"> 
      <![CDATA[とてもとても久しぶりにブログを書いてみます。<br />
<br />
もろもろいろいろ整理してみました。<br />
<br />
<br />
〇アクセスランキング系、アクセス解析系など、<br />
サービス終了しているところのタグ削除とか<br />
終了していなくても、使ってなかったり、実質（うちで）機能していないところは削除<br />
使えてないリンクも削除<br />
いらないところの会員削除<br />
<br />
<br />
アクセス解析履歴を見ると、月に１～２回アクセスがあって少しビビる。<br />
どこ経由かな？？<br />
もしかしてクローラーとかでも反応するのかな？？<br />
<br />
<br />
〇テンプレート<br />
変更。<br />
昔メインで使用していた雲のテンプレートもなじみがあったのでそれにしようと思ったけど、<br />
３列で記事の幅が狭いので、２列で似ていたものに変更してみた。<br />
<br />
〇ホームページ<br />
だいぶ前に、更新しないのでFTPロックがかかっている。<br />
更新用データもすぐに出てこないところにしまいこんでいるので、更新してない。<br />
自他共にリンクとか見直した方がいいところもあるんだけど。。。<br />
<br />
<br />
<br />
いにしえのネット住民なので、最近のものがあまりわからない。<br />
ホームページとかも最近はもうないのかしら。。。<br />
自分自身がよく見るのも、twitterとかインスタだしね。。。]]> 
    </content>
    <author>
            <name>颯来（そら）</name>
        </author>
  </entry>
  <entry>
    <id>sorajumjun.blog.shinobi.jp://entry/853</id>
    <link rel="alternate" type="text/html" href="http://sorajumjun.blog.shinobi.jp/Entry/853/" />
    <published>2016-01-24T17:02:41+09:00</published> 
    <updated>2016-01-24T17:02:41+09:00</updated> 
    <category term="サイトについて" label="サイトについて" />
    <title>トップページ構成変更してみた</title>
    <content mode="escaped" type="text/html" xml:lang="utf-8"> 
      <![CDATA[&lt;before&gt;<br />
<img src="//sorajumjun.blog.shinobi.jp/File/top_img2015.png" alt="" width="100%" /> &nbsp;&nbsp;&nbsp;&nbsp; <br />
&nbsp;<br />
<br />
&darr;&darr;&darr;<br />
&lt;after&gt;<br />
<img src="//sorajumjun.blog.shinobi.jp/File/top_img2016.png" alt="" width="100%" /> <br />
<br />
カルーセルで画像を表示させてみました。<br />
下の説明なども、レスポンシブの列で表示してスッキリ。<br />
<br />
ここ数年サイト改装しか更新していない。<br />
画像表示を最近更新したイラストにしようと思ったら、全然更新してなくて辛い。<br />
<br />
でも、以前設定してたjenkinsで、build, lint, test, deploy一発で出来て嬉しい。<br />
テストも、共通と各ページ用と増やして出来て満足♪<br />
<br />
<br />
]]> 
    </content>
    <author>
            <name>颯来（そら）</name>
        </author>
  </entry>
  <entry>
    <id>sorajumjun.blog.shinobi.jp://entry/852</id>
    <link rel="alternate" type="text/html" href="http://sorajumjun.blog.shinobi.jp/Entry/852/" />
    <published>2016-01-23T16:17:16+09:00</published> 
    <updated>2016-01-23T16:17:16+09:00</updated> 
    <category term="webデザイン" label="webデザイン" />
    <title>開発環境っぽいもの</title>
    <content mode="escaped" type="text/html" xml:lang="utf-8"> 
      <![CDATA[<p>いろいろ勉強して、webページ作るのに試したツール群をまとめてみる。<br />
分類を細かめ。ツールじゃなくて、考え方も入ってるかも。<br />
太字は、まだ触っていないので試してみたいもの。<br />
最後は、使えたら使ってみたいけど使いどころが見つかってないとかの、ツール名のメモ。</p><br />
<hr /><br />
<p>プロジェクト管理&hellip;redmine</p><br />
<p>CI ツール&hellip;Jenkins<br />
エディタ&hellip;sublime text, <strong>atom</strong><br />
タスクランナー&hellip;gulp</p><br />
<p>バージョン管理&hellip;git<br />
パッケージ管理&hellip;npm<br />
フロントパッケージ管理&hellip;bower<br />
モジュール管理&hellip;Webpack</p><br />
<p>javascript開発フレームワーク&hellip;Angularjs,&nbsp;<strong>react, flux</strong><br />
開発言語&hellip;coffeescript,&nbsp;<strong>typescript ECMAScript 6</strong></p><br />
<p>CSSメタ言語&hellip;sass<br />
CSSフレームワーク&hellip;bootstrap<br />
<strong>CSS設計パターン&hellip;MCSS</strong>, SMACSS<br />
<strong>スタイルガイド&hellip;StyleDocco</strong></p><br />
<p>htmlメタ言語&hellip;Jade</p><br />
<p>単体テストフレームワーク&hellip;jasmine<br />
テストランナー&hellip;karma<br />
テスト仮想実行環境ブラウザ&hellip;(phantomJS)<br />
E2Eテストフレームワーク&hellip;protractor, (selenium)</p><br />
<p>サーバー環境構築&hellip;chef<br />
chefのcookbook依存性管理&hellip;Berkshelf<br />
サーバーテスト&hellip;serverspec<br />
仮想環境構築&hellip;vagrant,&nbsp;<strong>Docker</strong><br />
仮想マシン&hellip;VirtualBox<br />
仮想ディスプレイ&hellip;xvfb<br />
サーバーOS&hellip;ubuntu</p><br />
<p><strong>ログ収集ツール&hellip;fluentd</strong></p><br />
<hr /><br />
<p>監視&hellip;zabbix ビルドツール&hellip;gradle<br />
コードレビュー&hellip;gerrit<br />
<br />
</p>]]> 
    </content>
    <author>
            <name>颯来（そら）</name>
        </author>
  </entry>
  <entry>
    <id>sorajumjun.blog.shinobi.jp://entry/851</id>
    <link rel="alternate" type="text/html" href="http://sorajumjun.blog.shinobi.jp/Entry/851/" />
    <published>2015-11-29T16:57:29+09:00</published> 
    <updated>2015-11-29T16:57:29+09:00</updated> 
    <category term="イラスト" label="イラスト" />
    <title>イラレの勉強しています。</title>
    <content mode="escaped" type="text/html" xml:lang="utf-8"> 
      <![CDATA[<a href="http://www.amazon.co.jp/exec/obidos/ASIN/4844361139/jumblejunksor-22/ref=nosim" target="_blank" class="ausgangsoft"><img src="http://rcm-images.amazon.com/images/P/4844361139.09.MZZZZZZZ.jpg" alt="Illustratorデザインメソッド" border="0" height="160" width="95" /></a><br />
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/4844361139/jumblejunksor-22/ref=nosim" target="_blank" class="ausgangsoft">Illustratorデザインメソッド</a><br />
<br />
<br />
学生の最後に、学生の特権を使うべく、学割でイラレを買いました。<br />
それから数年、未だ使いこなせず、、、このまま宝の持ち腐れはダメ。。。<br />
参考にしようと、本を買ったのもだいぶ前ですが、はじめの方を試して終わり、、、<br />
何度か、イラレ練習は使用としていたのですがね（<a href="http://sorajumjun.blog.shinobi.jp/Entry/727/" title="">これ</a>とか<a href="http://sorajumjun.blog.shinobi.jp/Entry/756/" title="">これ</a>とか）<br />
<br />
<br />
<br />
本の全体を通して、描いてみたいもの、異なる書き方・機能を使用しているものをピックアップして描いてみました。<br />
<a target="_blank" href="//sorajumjun.blog.shinobi.jp/File/104442a0.png" title=""><img src="//sorajumjun.blog.shinobi.jp/Img/1448782331/" alt="" /></a> &nbsp;<br />
タマゴ、星、クリップ、ジグソーパズル、花、オレンジ、蜘蛛の巣、チェック柄、リース、ファー、羽根、ダイヤモンド、水引<br />
<br />
<br />
ダイヤモンドは、説明もそれなりの量があるので難しそうと思ったら、やっぱり難しいｗ途中で一部加工を省略ｗ<br />
羽根は、手順としては単純だけど、ブレンドの元のパスが難しい。どういう角度でするときれいになるんだろう。<br />
水引は、パスに適用するだけかと簡単そうと思ったのに、その後の手順が色々あって複雑だった。手順通りだから出来たけど、一からだと、ここでクリッピングマスクが必要って気づかないだろう。<br />
<br />
<br />
全体的に、どこに繰り返しがあるか、どこを線、面とするかというのを考えるのがポイントなんだなと思った。<br />
幾何学的な模様とか、回転や移動を数値で機械的に指定するので、プログラマブルなところもある。<br />
回転の軸とか、altやshiftを押しながらクリックする機能は、知らないと出来ないな。本で書かれていても、初めわからなかった。<br />
<br />
<br />
<br />
この本自体は、作者が素材集なども出していることもあり、デザインが可愛くて使いたくなるようなものばかりです。ただ、書いていて思ったのは、レビューにも有りますが、説明が少ない部分があります＾＾；<br />
「元の画像を描きます」、、、元画像書くのが難しい<br />
「必要なところは、パスを連結します」、、、必要なところってどこ？<br />
「配置して調整した後、再登録します」、、、あれ再登録できない。&rarr;間で一度分割が必要<br />
「パスに合わせて塗り分けます」、、、あれ？さっきの図より、いつの間にかパス増えてる？？<br />
とかね。。<br />
<br />
<br />
<br />
いろいろ描いてみて、前よりは使い方にだいぶ慣れたはず。<br />
次はミニキャラなどを描いてみよう。<br />
<br />
<br />
]]> 
    </content>
    <author>
            <name>颯来（そら）</name>
        </author>
  </entry>
  <entry>
    <id>sorajumjun.blog.shinobi.jp://entry/850</id>
    <link rel="alternate" type="text/html" href="http://sorajumjun.blog.shinobi.jp/Entry/850/" />
    <published>2015-11-25T17:11:43+09:00</published> 
    <updated>2015-11-25T17:11:43+09:00</updated> 
    <category term="[近況]近況" label="[近況]近況" />
    <title>課題図書というか、最近読んだ本</title>
    <content mode="escaped" type="text/html" xml:lang="utf-8"> 
      <![CDATA[片手間に隙間時間に本を読むのがちょうどいいので、最近色々買ってます。<br />
紙のものは自分のものは電子化して。（借りたのはだめですが）<br />
もともと電子の本も買い始めました。<br />
技術書もお値段はするので、月に一冊までにしてますが、自分でもどんなの買ったかなと思ったので、読書メモが残っているものを数年前のも含めて一覧にしてみました。<br />
<br />
<br />
#2012<br />
* 2月・・・Headfirst ruby on rails<br />
<br />
#2014<br />
* 3月・・・リーダブルコード<br />
* 6月・・・Headfirstオブジェクト指向分析設計<br />
<br />
#2015<br />
* 4月・・・Headfirst デザインパターン<br />
* 5月・・・Headfirst デザインパターン<br />
* 6月・・・<br />
* 7月・・・javascript本格入門<br />
* 8月・・・デザインパターン入門マルチスレッド編<br />
* 9月・・・Effective javascript<br />
* 10月・・・CSS設計の教科書<br />
* 11月・・・（お休み、もしくは、illustlatorデザインパターン）<br />
* 12月・・・SQLアンチパターン<br />
<br />
<br />
Headfirstシリーズ。出会いは、コミュニティの課題図書として。<br />
一度目は、わざとエラーが出たりまわりくどいかなと思ったけど、例がわかりやすくて覚えやすいので、好きなシリーズに。<br />
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/4873114381/jumblejunksor-22/ref=nosim" target="_blank" class="ausgangsoft"><img src="http://rcm-images.amazon.com/images/P/4873114381.09.MZZZZZZZ.jpg" alt="Head First Rails ―頭とからだで覚えるRailsの基本" border="0" height="160" width="137" /></a><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4873112494/jumblejunksor-22/ref=nosim" target="_blank" class="ausgangsoft"><img src="http://rcm-images.amazon.com/images/P/4873112494.09.MZZZZZZZ.jpg" alt="Head Firstデザインパターン ―頭とからだで覚えるデザインパターンの基本" border="0" height="160" width="141" /></a><br />
<br />
<br />
家にあったので借りて読んだシリーズ<br />
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/4873115655/jumblejunksor-22/ref=nosim" target="_blank" class="ausgangsoft"><img src="http://rcm-images.amazon.com/images/P/4873115655.09.MZZZZZZZ.jpg" alt="リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)" border="0" height="160" width="113" /></a><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4873113490/jumblejunksor-22/ref=nosim" target="_blank" class="ausgangsoft"><img src="http://rcm-images.amazon.com/images/P/4873113490.09.MZZZZZZZ.jpg" alt="Head Firstオブジェクト指向分析設計 ―頭とからだで覚えるオブジェクト指向の基本" border="0" height="160" width="137" /></a><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4797331623/jumblejunksor-22/ref=nosim" target="_blank" class="ausgangsoft"><img src="http://rcm-images.amazon.com/images/P/4797331623.09.MZZZZZZZ.jpg" alt="増補改訂版 Java言語で学ぶデザインパターン入門 マルチスレッド編" border="0" height="160" width="120" /></a><br />
<br />
<br />
<br />
Javascriptを一度じっくり勉強しようとして買ったもの。<br />
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/4774144665/jumblejunksor-22/ref=nosim" target="_blank" class="ausgangsoft"><img src="http://rcm-images.amazon.com/images/P/4774144665.09.MZZZZZZZ.jpg" alt="JavaScript本格入門　～モダンスタイルによる基礎からAjax・ｊQueryまで" border="0" height="160" width="125" /></a><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4798131113/jumblejunksor-22/ref=nosim" target="_blank" class="ausgangsoft"><img src="http://rcm-images.amazon.com/images/P/4798131113.09.MZZZZZZZ.jpg" alt="Effective JavaScript" border="0" height="160" width="126" /></a><br />
<br />
<br />
kindleでセールしてたので。コンポーネント設計について、実践的なところがわからなかったので参考になればと。ちょっとしたサンプルがあります。<br />
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/4844336355/jumblejunksor-22/ref=nosim" target="_blank" class="ausgangsoft"><img src="http://rcm-images.amazon.com/images/P/4844336355.09.MZZZZZZZ.jpg" alt="Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法" border="0" height="160" width="125" /></a><br />
<br />
<br />
オライリーの電子書籍で買ってみました。pdfなので、汎用的で嬉しい。内容はこれから。<br />
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/4873115892/jumblejunksor-22/ref=nosim" target="_blank" class="ausgangsoft"><img src="http://rcm-images.amazon.com/images/P/4873115892.09.MZZZZZZZ.jpg" alt="SQLアンチパターン" border="0" height="160" width="125" /></a><br />
<br />
おまけ。<br />
かわいいデザインの作り方いっぱい。これでイラレの操作の仕方勉強してます。<br />
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00BI8Y99Q/jumblejunksor-22/ref=nosim" target="_blank" class="ausgangsoft"><img src="http://rcm-images.amazon.com/images/P/B00BI8Y99Q.09.MZZZZZZZ.jpg" alt="B00BI8Y99Q" border="0" height="160" width="103" /></a><br />
<br />
<br />
これから。<br />
次に気になっている本。<br />
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/4621066056/jumblejunksor-22/ref=nosim" target="_blank" class="ausgangsoft"><img src="http://rcm-images.amazon.com/images/P/4621066056.09.MZZZZZZZ.jpg" alt="EFFECTIVE JAVA 第2版 (The Java Series)" border="0" height="160" width="124" /></a><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4798141771/jumblejunksor-22/ref=nosim" target="_blank" class="ausgangsoft"><img src="http://rcm-images.amazon.com/images/P/4798141771.09.MZZZZZZZ.jpg" alt="おうちで学べるセキュリティのきほん" border="0" height="160" width="113" /></a><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4798116831/jumblejunksor-22/ref=nosim" target="_blank" class="ausgangsoft"><img src="http://rcm-images.amazon.com/images/P/4798116831.09.MZZZZZZZ.jpg" alt="レガシーコード改善ガイド (Object Oriented SELECTION)" border="0" height="160" width="126" /></a><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4774176982/jumblejunksor-22/ref=nosim" target="_blank" class="ausgangsoft"><img src="http://rcm-images.amazon.com/images/P/4774176982.09.MZZZZZZZ.jpg" alt="ITエンジニアのための機械学習理論入門" border="0" height="160" width="113" /></a><br />
<br />
]]> 
    </content>
    <author>
            <name>颯来（そら）</name>
        </author>
  </entry>
  <entry>
    <id>sorajumjun.blog.shinobi.jp://entry/849</id>
    <link rel="alternate" type="text/html" href="http://sorajumjun.blog.shinobi.jp/Entry/849/" />
    <published>2015-11-11T22:55:34+09:00</published> 
    <updated>2015-11-11T22:55:34+09:00</updated> 
    <category term="webデザイン" label="webデザイン" />
    <title>vagrant, chefメモ</title>
    <content mode="escaped" type="text/html" xml:lang="utf-8"> 
      <![CDATA[<div>Jenkinsを実行しようとしたときに、ローカルユーザーとJenkinsユーザーで、グローバルに入れてたツールが権限で読めなかったりしました。<br />
アプリだけじゃなく、実行する環境を文書化して、自動構築できるようにしておくことも重要だと感じ、勉強し試してみました。<br />
なお、vagrantは基本をドットインストールで勉強、<a href="http://dotinstall.com/lessons/basic_vagrant" title="">http://dotinstall.com/lessons/basic_vagrant</a><br />
chef, berkshelfは、qiitaで見ました。<br />
では、その時にあった問題メモを以下に記載します。<br />
<br />
<h4>1. windowsで、gitデータでの実行を確認</h4></div><div>windows側でもう一度実行しようとしたら、古くなっていたのか、npm installからは動かなくなっていたので、nodejsのバージョンアップからやり直し。</div><div>npm updateで、パッケージもバージョンアップ。</div><div></div><h4>2.vagrant, chefの準備</h4><div>vagrant plugin install vagrant-berkshelf</div><div>が、開発をやめるので、あまり使わない方がよいとあったが、その後、pluginを作り直したそうなので、普通に使える。</div><div>http://qiita.com/DQNEO/items/b8d2c2d88189812d6e68</div><div></div><div>chefDKを、vagrant側に入れようとしたけど、設定ファイルですぐに出来なかったので、windows側に入れることにした。</div><div>vagrant側は、plugin(vagrant-omnibus, vagrant-berkshelf)で入れる。</div><div></div><h4>3.vagrantを起動して、必要なツールインストールを記述する。</h4><div>bundle installのために、bundler追加</div><div>npm install -g bowerのために、git追加</div><div>npm install -g は、権限のため、sudo</div><div></div><div>npm installのとき、rebuildしているらしく、g++が必要。</div><div>apt install g++ で、入れることができた。</div><div>レシピを探すが、単独はないので、<span style="color: #ff0000;">build-essentialを入れる。</span></div><div>sudoが必要。</div><div></div><div>vagrantの共有フォルダは、シンボリックリンクが作れないのでnpm installで、エラーとなる。</div><div>npm install --no-bin-linksで、エラーはなくなるが、実行時エラーとなるので、共有フォルダではなく、homeで実行する。</div><div></div><div>nodejsのバージョンが、最新ではないみたいで、warningが出てる。 &rarr;&nbsp;</div><div><span style="color: #ff0000;">nodejs最新-&gt;5.x</span></div><div>http://qiita.com/notsunohito/items/eb719b3206981159cc05</div><div>https://github.com/nodesource/distributions</div><div></div><div></div><div>gemfile &rarr; Gemfile<br />
<br />
</div><div></div><div>jadeファイルのパス表記が、windows&rarr;linuxで、\&rarr;/</div><div></div><div>npm install -g で必要なものは、defaultレシピで、shellで実行。</div><div>jade, coffee-scriptは、グローバルインストールは不要。(--save-devで入れてたみたい)</div><div></div><h4>4.gulp test</h4><div>ここで、gulp lint, gulp buildは、実行可能となる。</div><div>のこりは、gulp test</div><div></div><div><span style="text-decoration: line-through;">protractor exited with code 8</span></div><div><span style="text-decoration: line-through;">Chromedriverがないと言われる。</span></div><div><span style="text-decoration: line-through;">&rarr;</span></div><div><span style="text-decoration: line-through;">protractor.conf.coffeeに追加。</span></div><div><span style="text-decoration: line-through;">chromeDriver: './node_modules/protractor/selenium/chromedriver'</span></div><div></div><div><span style="text-decoration: line-through;">https://github.com/angular/protractor/blob/master/docs/referenceConf.js</span></div><div></div><div></div><div><span style="text-decoration: line-through;">最新バージョンでは、実行できないので、ダウングレードが必要らしい。ダウングレードが面倒なので、対応するまで待つことにする。</span></div><div><span style="text-decoration: line-through;">https://github.com/angular/protractor/issues/2638</span></div><div></div><div><span style="text-decoration: line-through;">nodejsを最新にしたら、解決してるっぽい。</span></div><div><span style="text-decoration: line-through;">しかし、他のエラーが出てる。</span></div><div></div><h4>5.vagrant内のシェルで実行を試してたのも、provisionで実行するように記述。</h4><div>gitから、ソースを取得。bundle, bower実行。</div><div>bower install</div><div>&rarr;sudo bower install -f --allow-root</div><div></div><div><span style="text-decoration: line-through;">npm</span></div><div><span style="text-decoration: line-through;">/tmp/npm-0/.npm/4f4b43d0-m-0-npm-lodash-2-4-1-package-tgz.lock</span></div><div><span style="text-decoration: line-through;">&rarr;npmのバージョンが古いと、複雑なpackage依存で起こるらしい。</span></div><div><span style="text-decoration: line-through;">https://github.com/npm/npm/issues/6309</span></div><div><span style="text-decoration: line-through;">&rarr;npmのアップデート</span></div><div>&rarr;表示が前と変わったけど、killedって表示されてる。途中で終わっているようで、node_modulesの中に何もない。</div><div><span style="color: #ff0000;">&rarr;メモリーを増やす</span></div><div><span style="color: #ff0000;">&nbsp; &nbsp; 512-&gt;2048</span></div><div></div><div>gulp-filterの書き方が変わっていた。<br />
<br />
<br />
<br />
追記(2015/11/22)<div>JDKが、java cookbookだと、デフォルトで、6が入るらしい。その影響でwebdriverが動かなかったようなので、JDKバージョンを指定して入れる。</div><div><span style="color: #ff0000;">&nbsp; &nbsp;JDK6-&gt;7</span></div><div><span style="color: #ff0000;">xvfb用に、DISPLAY=:0 つける。</span></div><div><span style="color: #ff0000;">protractor.confに、directConnect: trueを追加。</span></div><div><a href="https://github.com/angular/angular-phonecat/issues/276" title="">https://github.com/angular/angular-phonecat/issues/276</a></div></div>]]> 
    </content>
    <author>
            <name>颯来（そら）</name>
        </author>
  </entry>
  <entry>
    <id>sorajumjun.blog.shinobi.jp://entry/848</id>
    <link rel="alternate" type="text/html" href="http://sorajumjun.blog.shinobi.jp/Entry/848/" />
    <published>2015-11-07T23:50:58+09:00</published> 
    <updated>2015-11-07T23:50:58+09:00</updated> 
    <category term="webデザイン" label="webデザイン" />
    <title>Jenkinsメモ</title>
    <content mode="escaped" type="text/html" xml:lang="utf-8"> 
      <![CDATA[<div>ホームページのソースについて、gulpを用いて、自動でbuildなどしていましたが、Jenkinsを使って実行できるようにしました。<br />
「CIしたい」というよりかは、「Jenkins使いたい」というための、勉強のようなもの。<br />
出来るようにしたことは、以下の通り。<br />
<br />
1.build<br />
&nbsp; gitからチェックアウト<br />
&nbsp; npm installなどで、必要な環境構築<br />
&nbsp; Jadeやsassなどからビルド<br />
<br />
2.lint<br />
&nbsp; coffee-scriptやsassなどのソースを解析<br />
&nbsp; checkstyleなど<br />
<br />
3.test<br />
&nbsp; 動作について、e2eテスト<br />
&nbsp; ユニットテストもしたかったけど、するほどのソース量がなかった。<br />
<br />
4.deploy<br />
&nbsp; buildしたソースをサーバーに転送する<br />
<br />
<br />
<br />
これらのJenkins設定を行う際にあった問題と解決について、メモがあるので以下に記載します。メモなので言葉足らずなところもあるかもしれませんが、後で気が向いたら追記します。少しでも何か参考になれば。<br />
<br />
jenkinsメモ</div><div></div><div>1.Jenkinsが、グローバルに入っている、gulpなどを読み取れない。</div><div>カスタムワークスペースを利用</div><div>C:\Users\sora\Documents\Jenkins\myweb</div><div><br />
</div><div>npm config set cache C:\npm\npm-cache --global</div><div></div><div></div><div>http://kakakikikeke.blogspot.jp/2013/08/windowsjenkins.html<br />
<br />
</div><div></div><div>実行ユーザがLocal SystemになっているためWindowsに設定しているJAVA_HOME等の環境変数が有効になっていない</div><div>■解決方法</div><div>ファイル名を指定して実行からservices.mscを入力</div><div>一覧からJenkinsを探す</div><div>右クリックからプロパティを開く</div><div>プロパティダイアログが開いたらログオンタブを選択</div><div>アカウントを選択しWindowsにログインするユーザ名とパスワードを入力する</div><div>アカウントを検索した場合は参照から検索できる</div><div>名前を入力して「名前の確認」というボタンを押下するとそのユーザがいるかどうかを確認できる</div><div>アカウントが設定できたらプロセスの一覧画面に戻り右クリックから再起動を実施すると環境変数が反映される</div><div></div><div></div><div>2.build</div><div>json,jadeのデータが一部gitにあげてないので、ローカルでコピーする　&rarr;タスクとして追加</div><div></div><div></div><div>3.test</div><div>A Jasmine spec timed out. Resetting the WebDriver Control Flow.</div><div>&nbsp; 繝�繧ｹ繝茨ｼ域峩譁ｰ螻･豁ｴ�ｼ�</div><div>&nbsp; &nbsp; [31m笨� 繧ｵ繝悶&Gamma;繝九&Eta;繝ｼ縺ｮ譛�蠕後�ｮ隕&int;ｴ�縺ｯ縲�2006蟷ｴ縲�[39m</div><div>&nbsp; &nbsp; &nbsp; [31m- [39m[31mError: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.[39m</div><div></div><div></div><div>「Windowsではサービスとしてcronなどのdaemonを起動させると、そのプロセスからはGUIアプリケーションを立ちあげて動作させることが出来ない制約があります」</div><div>らしい</div><div>&rarr;ローカルでマスタースレーブを作り、起動してそちらで実行することに</div><div></div><div></div><div>コンソール文字化け</div><div>　&rarr;環境変数に以下を追加</div><div>JAVA_TOOL_OPTIONS=-Dfile.encoding=UTF-8 -Dsun.jnu.encoding=UTF-8</div><div></div><div>http://www.ramuda.co.jp/techlabo/archives/2609</div><div></div><div></div><div></div><div>4.lint</div><div></div><div>scss-lint</div><div>バージョンが古かった。更新した。</div><div>gemfileを今まであまり扱っていなかった。</div><div></div><div></div><div>coffee-lint</div><div>checkstyleがconsole.logに出力される</div><div>ファイルに出力したい。　&rarr;　一時的に、console.logを変更</div><div>色情報を消したい　&rarr;　正規表現で削除</div><div><br />
</div><div>console.log = (d) -&gt;<br />
log_file.write d.replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=&gt;&lt;]/g, '') + '\n'<div></div><div></div></div><div>5.deploy</div><div></div><div>パスワードなどを、引数として指定するようにし、ファイルに保存しない</div><div>conn.newer　としているけど、新規だけじゃなくすべてのファイルが転送される。</div><div>転送時に更新日時が更新されてる？</div><div>&rarr;different size とした</div><div></div><div>gulp buildが、--release --jenkins　をjenkinsで実行した時のみエラーになる</div><div></div><div></div><div>6.フロー</div><div>フロー表示をしたかった。</div><div>pipeline pluginを入れた。</div><div></div>]]> 
    </content>
    <author>
            <name>颯来（そら）</name>
        </author>
  </entry>
  <entry>
    <id>sorajumjun.blog.shinobi.jp://entry/847</id>
    <link rel="alternate" type="text/html" href="http://sorajumjun.blog.shinobi.jp/Entry/847/" />
    <published>2015-07-23T18:11:45+09:00</published> 
    <updated>2015-07-23T18:11:45+09:00</updated> 
    <category term="[オススメ]本・マンガ" label="[オススメ]本・マンガ" />
    <title>もやしもん１２</title>
    <content mode="escaped" type="text/html" xml:lang="utf-8"> 
      <![CDATA[<a href="http://www.amazon.co.jp/exec/obidos/ASIN/4063622479/jumblejunksor-22/ref=nosim" target="_blank" class="ausgangsoft"><img src="http://rcm-images.amazon.com/images/P/4063622479.09.MZZZZZZZ.jpg" alt="もやしもん(12)限定版 (プレミアムKC イブニング )" height="160" border="0" width="114" /></a><br />
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/4063622479/jumblejunksor-22/ref=nosim" target="_blank" class="ausgangsoft">もやしもん(12)限定版 (プレミアムKC イブニング )</a><br />
<br />
<br />
西野さんを交えて、大きなテーマは、以下の２つ<br />
　日本酒業界<br />
　大人って何？<br />
<br />
<br />
日本酒業界については、<br />
桶取引、逆桶買いなど<br />
<br />
お酒についてはよくわからないから、<br />
そういうのもあるんだ。<br />
美味しければ、作り手も納得してればそれでいいじゃない？と思ってたけど、<br />
改めて読むと、著作権の話とか関連するかなと思って気になる。<br />
<br />
あと、いつもの様に、お酒の作り方、菌たちの仕事などが解説されていて、<br />
お酒飲めないのにお酒知識がつくよｗ<br />
<br />
<br />
<br />
大人って何？については、<br />
はじめに読んだ時は、ふんわり思っていたけれども、<br />
改めて読みなおして、自分も以前より少しだけいろいろ経験して時間が過ぎたからか、<br />
共感できる言葉が、多くあるなぁと思える。<br />
前よりも、共感する内容の意味がよりはっきり認識できたかな。<br />
<br />
<br />
以下に、その、読んでて、わかる！とか、いいねと思った言葉を抜粋します。<br />
<br />
　　西野さんの「私のことを分かった風に決めつけないで」<br />
<br />
　　ワインは加点法、日本酒は減点法。人でも減点より褒められたいね。<br />
<br />
　　転機っていうのは後付で、<br />
　　実は毎日ってのはつながっているからいきなり変わったりしない<br />
　　転機を待たなくても、やりたいことをやればいい<br />
<br />
　　大学生ってなってみたらガキだよね<br />
　　小学生の頃は中学生は大人に見えたけれど、自分が高校生になったら小学校の時と変わらない<br />
　　「大人」は常に私から遠い<br />
<br />
　　二十歳になったら大人の仲間入りするんだと思っていたけど、相変わらず大人は二十歳なんて鼻であしらって子供扱い<br />
<br />
　　先達が今日までやってきたことは、君たちはもう一からやらなくても容易に手にすることが出来る<br />
　　君たちにとって素晴らしいリードだ<br />
　　僕なんかよりもずっと先に進める可能性を持っているんだ<br />
<br />
<hr />&rarr;<a href="http://sorajumjun.blog.shinobi.jp/Entry/307/">もやしもん</a><br />
<br />
<br />
]]> 
    </content>
    <author>
            <name>颯来（そら）</name>
        </author>
  </entry>
  <entry>
    <id>sorajumjun.blog.shinobi.jp://entry/846</id>
    <link rel="alternate" type="text/html" href="http://sorajumjun.blog.shinobi.jp/Entry/846/" />
    <published>2015-07-16T15:10:04+09:00</published> 
    <updated>2015-07-16T15:10:04+09:00</updated> 
    <category term="[オススメ]本・その他" label="[オススメ]本・その他" />
    <title>JavaScript本格入門　～モダンスタイルによる基礎からAjax・ｊQueryまで</title>
    <content mode="escaped" type="text/html" xml:lang="utf-8"> 
      <![CDATA[<iframe width="320" height="240" style="width: 120px; height: 240px;" src="http://rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&amp;bc1=000000&amp;IS2=1&amp;bg1=FFFFFF&amp;fc1=000000&amp;lc1=0000FF&amp;t=jumblejunksor-22&amp;o=9&amp;p=8&amp;l=as4&amp;m=amazon&amp;f=ifr&amp;ref=ss_til&amp;asins=4774144665" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe><br />
<br />
jQueryは、別の本で読んでみたり、なんとなくwebの情報で使っていたjavascriptだけれど、一度本で学んでみようと思って、買って読んでみました。<br />
<br />
各章としては以下のとおり。（正確な章の名前ではなく、扱っている内容を記載）<br />
Capter1　javascriptとは？<br />
Capter2　基本的な文法、型、制御命令など<br />
Capter3　基本データ型、オブジェクト<br />
Capter4　関数<br />
Capter5　オブジェクト指向構文<br />
Capter6　ブラウザオブジェクト<br />
Capter7　DOM<br />
Capter8　Ajax<br />
Capter9　jQuery<br />
Capter10　現場で使うための応用知識（JsUnit/JsDoc/コーディング規約など）<br />
<br />
<br />
前半の、Capter２～5が知らなかった内容。<br />
後半の、Capter6～は、だいたい知っている内容でした。<br />
<br />
特に、関数やオブジェクト指向構文などは、webの使用例などを見ているだけでは構文として学べなかったので、良かったと思います。<br />
この本を読んだ後に、webの記事を見なおしていると、分かる部分が増えて理解が深まりました。<br />
<br />
後半については、この本が、2010年に発行されたもののため、その後、ライブラリやフレームワークが色々出ているのは反映されていません。<br />
そのため、もともと知っていたことが含まれていることもあり、参考程度でした。<br />
<br />
<br />
<br />
ひと通り、基本的な文法を確認したので、次に読む本に悩むところ。<br />
目次レベルだと、あまり差がわからないものもあり、、、<br />
オライリーのjavscript（サイ本というらしい）は、分厚いし、<br />
JavaScript: The Good Partsは、書評によると癖が強いらしい？出版も2008年と古め<br />
JavaScriptパターンは、書評がわからないけれど、ちなみに出版は2011年<br />
Effective JavaScriptを読んでみようかな、、いいという書評も見たし、この中では2013年発行と一番新しい。<br />
<br />
ES6という新しい標準化が出てきているらしいし、その解説か、<br />
Coffeescriptの文法を確認したほうが良いかなぁ<br />
（coffeescriptは、{}を書かなくて良いのとかインデントが楽で好き）<br />
<br />
なお、最近は、これも読んでる　&rarr;<a href="http://azu.github.io/promises-book/" title="">JavaScript Promiseの本</a><br />
<br />
<div style="display: inline-block; _display: inline;"><br />
<iframe width="320" height="240" style="width: 120px; height: 240px;" src="http://rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&amp;bc1=000000&amp;IS2=1&amp;bg1=FFFFFF&amp;fc1=000000&amp;lc1=0000FF&amp;t=jumblejunksor-22&amp;o=9&amp;p=8&amp;l=as4&amp;m=amazon&amp;f=ifr&amp;ref=ss_til&amp;asins=4873115736" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></div><div style="display: inline-block; _display: inline;"><br />
<iframe width="320" height="240" style="width: 120px; height: 240px;" src="http://rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&amp;bc1=000000&amp;IS2=1&amp;bg1=FFFFFF&amp;fc1=000000&amp;lc1=0000FF&amp;t=jumblejunksor-22&amp;o=9&amp;p=8&amp;l=as4&amp;m=amazon&amp;f=ifr&amp;ref=ss_til&amp;asins=4873113911" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></div><div style="display: inline-block; _display: inline;"><br />
<iframe width="320" height="240" style="width: 120px; height: 240px;" src="http://rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&amp;bc1=000000&amp;IS2=1&amp;bg1=FFFFFF&amp;fc1=000000&amp;lc1=0000FF&amp;t=jumblejunksor-22&amp;o=9&amp;p=8&amp;l=as4&amp;m=amazon&amp;f=ifr&amp;ref=ss_til&amp;asins=4873114888" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></div><div style="display: inline-block; _display: inline;"><br />
<iframe width="320" height="240" style="width: 120px; height: 240px;" src="http://rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&amp;bc1=000000&amp;IS2=1&amp;bg1=FFFFFF&amp;fc1=000000&amp;lc1=0000FF&amp;t=jumblejunksor-22&amp;o=9&amp;p=8&amp;l=as4&amp;m=amazon&amp;f=ifr&amp;ref=ss_til&amp;asins=4798131113" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></div>]]> 
    </content>
    <author>
            <name>颯来（そら）</name>
        </author>
  </entry>
  <entry>
    <id>sorajumjun.blog.shinobi.jp://entry/845</id>
    <link rel="alternate" type="text/html" href="http://sorajumjun.blog.shinobi.jp/Entry/845/" />
    <published>2015-07-05T20:16:03+09:00</published> 
    <updated>2015-07-05T20:16:03+09:00</updated> 
    <category term="webデザイン" label="webデザイン" />
    <title>webページ更新しました。というか、webのお勉強　→bootstrap　→webテスト</title>
    <content mode="escaped" type="text/html" xml:lang="utf-8"> 
      <![CDATA[webページ更新しました。<br />
・・・といっても、コンテンツとしては特になく、構造をね。。。<br />
webコンテンツ作成の勉強になった。<br />
<br />
そして、更新履歴を見て、約１年ぶりの更新。。。<br />
<br />
<br />
以下に、変更点を記載します。<h2>＜template＞</h2><h3>foundation　&rarr;　bootstrap</h3>　簡単。<br />
　この前が、jadeでlayoutを外出ししていたため、そこの構成やclass名を変えるだけですぐに対応できた。<h2>＜追加導入＞</h2><h3>サブメニュー</h3>　　これまでサイドのメニューは、topのメニューと同じにしていたけど、同じページ内の項目にしてみた<h3>ページtopへ</h3>　　ページの右下などでよく見る。同じページのtopへ移動ボタン追加。<br />
　　これも、bootstrapであるかと思ったんだけど、無いようなのでjsにサンプルからそのまま記載<h3>affix</h3>　サイドのメニューが、スクロールしても同じ位置に固定する機能。<br />
　bootstrapにあったので、追加してみた。<br />
　追加で、レスポンシブで幅が狭い時は、上部にあるため、コンテンツと被らないように、実施しないよう@mediaで制御追加<h3><span style="color: #888888;">scrollspy</span></h3>　スクロールしていると、現在のコンテンツにあわせたサブメニューの見出しをactive表示して、自分が今どれを読んでいるか分かるもの。bootstrapのサイトでも利用されている。<br />
　こちらも、bootstrapにあるので追加してみた。<br />
　スクロールを始めると、サブメニューの幅が小さくなるというバグが有るらしいので、それにも対応。<h3>fontawesome</h3>　<h3>js concat</h3>&nbsp;　bowerのものを、１つにconcatしようとしたけれど、jsは順番がやっぱり重要で、順番が異なると動かない。依存関係を確認するというのをいろいろ調べたけれども、できなかったけど、<br />
　　bower.json内のdependenciesの順番変更したらすぐ出来た。<br />
　　dependenciesは、アルファベット順かと思っていたけど、変更できたみたい。<h2>＜構成の分離＞</h2>jade内の記載のうち、ページ構成ではないデータをjsonに分離<br />
繰り返し処理のPGM化促進　変更履歴など<h2>＜CSS＞</h2>css spriteを利用しようとして、うまくいかないからやめた<br />
後で、これだけ試す<br />
<br />
scssをsass記法に変えようとして、うまくいかないし、bowerのscssファイルを現在参照しているので、やめた<h2>＜gulp＞</h2>browsersyncで、変更があったらブラウザ上もリロードして確認<br />
gulpのcoffeeコンパイルを、これまで、coffeeだけのもので行っていたけれど、webpackで行う<h2>＜webテスト＞</h2><h3>karma・jasmine</h3>この辺を見て、勉強したので、使ってみようと思った。<br />
静的サイトなので、特にjsのロジックはなく、animationぐらいなんだけど、試してみようとした。<br />
<a href="http://qiita.com/hosomichi/items/4e508e804b0e50e7b6ec" title="">http://qiita.com/hosomichi/items/4e508e804b0e50e7b6ec</a><br />
<a href="http://qiita.com/hosomichi/items/311e3eac4f55183b62c2" title="">http://qiita.com/hosomichi/items/311e3eac4f55183b62c2</a><br />
<a href="http://qiita.com/hosomichi/items/7464c69bf54927d019a7" title="">http://qiita.com/hosomichi/items/7464c69bf54927d019a7</a><br />
<br />
<br />
こちらにもwebpack導入。テストをcoffeeで書くため<br />
<br />
DOMの操作をしやすくするよう、karma jquery導入<br />
<br />
ページが表示されないと思ったら、相対パスが異なっていた。（specファイルからの相対位置ではない？）<br />
　document.body.innerHTML = window.__html__['../WebContent/history.html']<br />
&rarr;document.body.innerHTML = window.__html__['WebContent/history.html']<br />
<br />
jsのcoverageがとれないと思ったら、パス指定の間違いだった（間に空白入ってた）<br />
　'WebContent/js/**/* .js': ['coverage']<br />
&rarr;'WebContent/js/**/*.js': ['coverage']<br />
<br />
karmaでwebページ動作テストをしようと思ったが、ページリンク動作がうまく動かず<br />
結局、karmaはunit testで、integrated testじゃねーからと言われたので、<br />
ひとまずunit testのみを行うことにする<br />
、、、が、単体で出来る事もないのでやめたｗ<br />
http://bittersweetryan.github.io/jasmine-presentation/#slide-17<h3>protractor</h3>そこで、end to endテストを行うことにした。<br />
karmaにも、end2endのプラグインが（非公式？？）あるようだけど、動かなかったので、e2e用という、protractorを利用してみる。<br />
はじめ、for AngularJSと書かれていたので、他のだと使えないと思って諦めていたけど、使ってみたら出来た。検索したら、Angular以外で利用しようとしている人も、まあまあいるみたい<div></div>tutorialが、confとspecをjsで書かれていたが、coffeeで書きたい。<br />
エラーが出ていたが、byがcoffeescriptの予約語とかぶっている記事を思い出して、Byに変更すると実行できた。<div>windowサイズ初期化<br />
<br />
</div>リンククリック後のスクロール値取得しようとしたが、animationで時間差があるため、sleep使用<h4>helper関数化</h4>テスト完成後、共通部分を関数として外出し<br />
　しかし、javascriptの文法＋coffeescriptの文法がいまいちわかっていないので、なかなか動かない。結局、()のあるなしで動かなかったみたい。<br />
　　getScrollTop<br />
　&rarr;getScrollTop()<br />
<br />
さらに、helper関数として外出し<h4>サーバー終了設定</h4>gulpの設定で、こちらの方法で、サーバーのexitをしようとすると、テスト実行されない<br />
<a href="https://github.com/schickling/gulp-webserver/issues/48" title="">https://github.com/schickling/gulp-webserver/issues/48</a><br />
<br />
こちらの方法で、終了時の処理を入れると、テストが実行後、自動終了するようになった<br />
&nbsp;&nbsp;&nbsp; .on 'end', -&gt; process.exit()<br />
<a href="http://stackoverflow.com/questions/29968380/how-to-exit-protractor-when-done" title="">http://stackoverflow.com/questions/29968380/how-to-exit-protractor-when-done</a><br />
<br />
<br />
なお、参考までに、最終的なspecファイルはこちら。<div><pre>&lt;e2eSpec.coffee&gt;<br />
<br />
h = require('../helpers/helper')<br />
<br />
describe 'テスト（更新履歴）', -&gt;<br />
<br />
&nbsp; submenu_link_list = $$('.submenulist li')<br />
&nbsp; submenu_link_last = submenu_link_list.last()<br />
&nbsp; submenu = $('.submenulist')<br />
&nbsp; mainrow = $('.main-row')<br />
&nbsp; gototop_link = $('.gototop')<br />
<br />
&nbsp; SLEEP_TIME = 1000<br />
&nbsp; INIT_WINDOW_WIDTH = 1500<br />
&nbsp; INIT_WINDOW_HEIGHT = 1000<br />
&nbsp; SCROLL_TEST_ITEM = 5<br />
<br />
<br />
&nbsp; beforeEach -&gt;<br />
&nbsp;&nbsp;&nbsp; browser.driver.manage().window()<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .setSize(INIT_WINDOW_WIDTH, INIT_WINDOW_HEIGHT)<br />
&nbsp;&nbsp;&nbsp; browser.ignoreSynchronization = true<br />
&nbsp;&nbsp;&nbsp; browser.get browser.baseUrl+'/history.html'<br />
&nbsp;&nbsp;&nbsp; return<br />
<br />
<br />
&nbsp; it 'サブメニューの最後の要素は「2006年」', -&gt;<br />
&nbsp;&nbsp;&nbsp; expect(submenu_link_last.getText()).toEqual '2006年'<br />
<br />
&nbsp; it 'サブメニューの最後の要素のリンク先は、#submenu[0-9]*であること', -&gt;<br />
&nbsp;&nbsp;&nbsp; submenu_link_last.$('a').getAttribute('href').then (submenu_link_url) -&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; expect(submenu_link_url).toMatch '#submenu[0-9]*$'<br />
<br />
&nbsp; it 'サブメニューリンクをクリックすることで、ページ内リンク先に移動すること', -&gt;<br />
&nbsp;&nbsp;&nbsp; # 初期スクロール位置の確認<br />
&nbsp;&nbsp;&nbsp; expect(h.getScrollTop()).toEqual 0<br />
<br />
&nbsp;&nbsp;&nbsp; # サブメニューリンクをクリック<br />
&nbsp;&nbsp;&nbsp; submenu_link_last.click()<br />
&nbsp;&nbsp;&nbsp; browser.sleep(SLEEP_TIME)<br />
<br />
&nbsp;&nbsp;&nbsp; # クリック後のスクロール位置の確認<br />
&nbsp;&nbsp;&nbsp; submenu_link_last.$('a').getAttribute('href').then (submenu_link_url) -&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; submenu_link_id = h.getLinkId(submenu_link_url)<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(submenu_link_id).getLocation().then (locationdata) -&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; mainrow.getCssValue('padding-top').then (headerH) -&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; expect(h.getScrollTop()).toEqual locationdata.y - parseInt(headerH, 10)<br />
<br />
<br />
&nbsp; it 'スクロールすると、サブメニューが合わせて移動すること', -&gt;<br />
&nbsp;&nbsp;&nbsp; # サブメニューの初期location取得<br />
&nbsp;&nbsp;&nbsp; init_locationdata_y = 0<br />
&nbsp;&nbsp;&nbsp; submenu.getLocation().then (locationdata) -&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; init_locationdata_y = locationdata.y<br />
<br />
&nbsp;&nbsp;&nbsp; # スクロール<br />
&nbsp;&nbsp;&nbsp; submenu_link_list.get(SCROLL_TEST_ITEM).click()<br />
&nbsp;&nbsp;&nbsp; browser.sleep(SLEEP_TIME)<br />
<br />
&nbsp;&nbsp;&nbsp; # スクロール後のサブメニューの位置が、スクロール量+初期locationであること<br />
&nbsp;&nbsp;&nbsp; h.getScrollTop().then (scrollTop) -&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; submenu.getLocation().then (locationdata) -&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; expect(locationdata.y).toEqual scrollTop + init_locationdata_y<br />
<br />
&nbsp; it 'スクロールすると、scrollspyが動作すること', -&gt;<br />
&nbsp;&nbsp;&nbsp; # 初期はactive状態ではないこと<br />
&nbsp;&nbsp;&nbsp; expect(h.hasClass(submenu_link_list.get(SCROLL_TEST_ITEM), 'active')).toBe(false)<br />
<br />
&nbsp;&nbsp;&nbsp; # スクロール<br />
&nbsp;&nbsp;&nbsp; submenu_link_list.get(SCROLL_TEST_ITEM).click()<br />
&nbsp;&nbsp;&nbsp; browser.sleep(SLEEP_TIME)<br />
<br />
&nbsp;&nbsp;&nbsp; # スクロール後に、titleに一致した項目がactiveになっていること<br />
&nbsp;&nbsp;&nbsp; expect(h.hasClass(submenu_link_list.get(SCROLL_TEST_ITEM), 'active')).toBe(true)<br />
<br />
&nbsp; it 'トップへボタンで、ページ先頭に移動すること', -&gt;<br />
&nbsp;&nbsp;&nbsp; # トップへボタンをクリック前に、スクロールする。初期位置がページ先頭でないこと<br />
&nbsp;&nbsp;&nbsp; submenu_link_list.get(SCROLL_TEST_ITEM).click()<br />
&nbsp;&nbsp;&nbsp; browser.sleep(SLEEP_TIME)<br />
&nbsp;&nbsp;&nbsp; expect(h.getScrollTop()).toBeGreaterThan 0<br />
<br />
&nbsp;&nbsp;&nbsp; # トップへボタンをクリック<br />
&nbsp;&nbsp;&nbsp; gototop_link.click()<br />
&nbsp;&nbsp;&nbsp; browser.sleep(SLEEP_TIME)<br />
<br />
&nbsp;&nbsp;&nbsp; # ページ先頭に移動していること<br />
&nbsp;&nbsp;&nbsp; expect(h.getScrollTop()).toEqual 0</pre><br />
</div>&lt;helper.coffee&gt;<div><pre><br />
module.exports = {<br />
&nbsp; getScrollTop : -&gt;<br />
&nbsp;&nbsp;&nbsp; browser.executeScript('return document.body.scrollTop;')<br />
<br />
&nbsp; hasClass : (element, cls) -&gt;<br />
&nbsp;&nbsp;&nbsp; element.getAttribute('class').then (classes) -&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; classes.split(' ').indexOf(cls) != -1<br />
<br />
&nbsp; getLinkId : (url) -&gt;<br />
&nbsp;&nbsp;&nbsp; url.substring(url.lastIndexOf('#'), url.length)<br />
}</pre><br />
</div><h2>＜今後＞</h2>今後、追加でやりたいことメモ<br />
<span style="text-decoration: line-through;">・Jenkinsでテスト　CI</span>　&rarr;（7/14 build/test/lint）<br />
・css sprite　&rarr;アイコン整理したら、spriteする画像がなくなった。。。<br />
<span style="text-decoration: line-through;">・coffeescript lint</span>　&rarr;（7/11）<br />
<span style="text-decoration: line-through;">・sourcemap</span>　&rarr;（7/11 仮）<br />
<span style="text-decoration: line-through;">・SNSアイコン変更</span>　&rarr;　（7/15）<br />
<span style="text-decoration: line-through;">・gulpファイルをtaskで分割</span>　&rarr;　(11/26)<br />
<br />
<br />
なお、現在、こちらの本で、javascriptのことを一旦勉強中。<br />
<br />
<iframe width="320" height="240" style="width: 120px; height: 240px;" src="http://rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&amp;bc1=000000&amp;IS2=1&amp;bg1=FFFFFF&amp;fc1=000000&amp;lc1=0000FF&amp;t=jumblejunksor-22&amp;o=9&amp;p=8&amp;l=as4&amp;m=amazon&amp;f=ifr&amp;ref=ss_til&amp;asins=4774144665" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe><br />
<br />
<br />
<br />
]]> 
    </content>
    <author>
            <name>颯来（そら）</name>
        </author>
  </entry>
</feed>