忍者ブログ
 
 
×

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

<before>
    
 

↓↓↓
<after>


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

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

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



人気ブログランキングへ にほんブログ村 イラストブログ オリジナルイラストへ blogram投票ボタン PINGOO!カテゴリイラスト・写真
PR

いろいろ勉強して、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


人気ブログランキングへ にほんブログ村 イラストブログ オリジナルイラストへ blogram投票ボタン PINGOO!カテゴリイラスト・写真
Illustratorデザインメソッド
Illustratorデザインメソッド


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



本の全体を通して、描いてみたいもの、異なる書き方・機能を使用しているものをピックアップして描いてみました。
 
タマゴ、星、クリップ、ジグソーパズル、花、オレンジ、蜘蛛の巣、チェック柄、リース、ファー、羽根、ダイヤモンド、水引


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


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



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



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



人気ブログランキングへ にほんブログ村 イラストブログ オリジナルイラストへ blogram投票ボタン PINGOO!カテゴリイラスト・写真
片手間に隙間時間に本を読むのがちょうどいいので、最近色々買ってます。
紙のものは自分のものは電子化して。(借りたのはだめですが)
もともと電子の本も買い始めました。
技術書もお値段はするので、月に一冊までにしてますが、自分でもどんなの買ったかなと思ったので、読書メモが残っているものを数年前のも含めて一覧にしてみました。


#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シリーズ。出会いは、コミュニティの課題図書として。
一度目は、わざとエラーが出たりまわりくどいかなと思ったけど、例がわかりやすくて覚えやすいので、好きなシリーズに。
Head First Rails ―頭とからだで覚えるRailsの基本Head Firstデザインパターン ―頭とからだで覚えるデザインパターンの基本


家にあったので借りて読んだシリーズ
リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)Head Firstオブジェクト指向分析設計 ―頭とからだで覚えるオブジェクト指向の基本増補改訂版 Java言語で学ぶデザインパターン入門 マルチスレッド編



Javascriptを一度じっくり勉強しようとして買ったもの。
JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまでEffective JavaScript


kindleでセールしてたので。コンポーネント設計について、実践的なところがわからなかったので参考になればと。ちょっとしたサンプルがあります。
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法


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

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


これから。
次に気になっている本。
EFFECTIVE JAVA 第2版 (The Java Series)おうちで学べるセキュリティのきほんレガシーコード改善ガイド (Object Oriented SELECTION)ITエンジニアのための機械学習理論入門


人気ブログランキングへ にほんブログ村 イラストブログ オリジナルイラストへ blogram投票ボタン PINGOO!カテゴリイラスト・写真
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を追加。

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

人気ブログランキングへ にほんブログ村 イラストブログ オリジナルイラストへ PINGOO!カテゴリイラスト・写真
アーカイブ
これ以前のアーカイブ一覧
RSS
ブログ内検索
カレンダー
07 2017/08 09
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 31
リンク/BlogPeople
++++++++++++++++++++++
忍者ブログ [PR]


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