Web制作を効率よくすすめるためPivotal Trackerを導入したら気持ちよかった♪

20140516 0

最近Pivotal Trackerを本格導入し始めたwEVAです(^^v
個人ではちょこちょこ使ってきたり、Fullcrumにしてみたりといろいろと迷ってもいましたが、最近思うこともあって本格的にPivotal Trackerを導入!!

これが結構気持ちいいので、快適に仕事が動き出しています

20140516 1

通知が社内チャットに流れるようにしてあるので、少し変えただけでもメンバーに状況を共有できるのもいいですね♪

とにかく使ってみるっす!!

20140516 2

メニューが英語なので「とっつきにくい」って感じもありますが、とにかくその案件で発生するタスクをガンガンとIceboxに登録していきます。項目はいろいろあるけど、とにかく登録!登録!登録!!

20140516 3

登録できたところで各タスクにポイントを振っていきます。うちではフィボナッチの値を利用して0〜8までの値で、作業にかかるだいたいの速度を入れています。この配分がなかなか難しいのですが、やっているうちになんとなく…「インストールから設定までは3ポイントだな」という感じでを振っていくことができます。

で・・・実際の作業の項目はBacklogにドラッグして移動させ、ここで更に各タスクを並び替えてどんな順番でこなしていくかを決めていきます。

そして、毎朝「Start」ボタンを押してタスクのスタート!!終了したら「Finish」を押して、他のメンバーに確認してもらったりしてそのタスクを終わらせていきます。

20140516 4

どんどんタスクが片付いていきます!!

これが楽しい!気持ちいい!!

「今日はいくつ終わらせるぞ〜〜〜」と、朝目標をたてて、それが片付いていくと気持よくてついつい、細かいタスクを片っ端からいれていってしまいます。

まだ社内で本格的に使い始めたところなのでノウハウの蓄積は不十分ですが、これからも積極的に使っていくことになりそうですね。

Pivotal Tracker

Adobe Edge Inspectでスマフォサイト制作時の画面確認を効率的に

20140514 0

スマフォサイトの制作時にいちいちスマフォを取り出して画面確認…面倒ですよね?そんな時に役立っているのが「Adobe Edge Inspect」です。レスポンシブサイトの制作時もブラウザの幅を狭めたり広くしたり…繰り返しこんなことばかりですがAdobe Edge Inspectを入れておくと手元のスマフォに、今作業中のブラウザの画面を表示させることができます。

便利!!

Adobe Edge Inspect

ATOMを使う機会が増えてきました

20140513 0

最近GitHubのATOMを使う機会が増えてきました

別の記事「RubyMineいいよね」で書いたように、開発で使うエディタをRubyMineに移行してみたらメモ用のエディタが無意識のうちにSublimeTextからATOMに移行してしまったという…

GitHubの各種言語対応コーディング用テキストエディタAtomが完全にオープンソース化
GitHub、開発者向けテキストエディター「Atom」をリリース
米GitHub、テキストエディタ「Atom」をオープンソース化

ATOM

SourceTreeはWebデザインの現場でも便利に使えます

20140409 0

gitというとプログラマのツールのようにも思われるかもしれませんが、Webデザインの現場でもgitは使えます!!

でも・・・黒い画面がわけわからない(>_<) という方も多いですよね そんな方にはSourceTreeがオススメです!!

実はwEVAの社内でもWebデザイナーもこのSourceTreeを利用しています。リポジトリに制作するサイトのデータを入れておいて、作業をするたびにコミットを繰り返していくことで、「いつ」「どこを変更したか」というのが履歴として残ったり

場合によっては共有することで「誰がどんな作業をしたのか」

というのがわかったり!!

使いこなしていけば行くほど便利ですよーーー

SourceTree

開発効率をUPする Git逆引き入門
松下 雅和 船ヶ山 慶 平木 聡 土橋 林太郎 三上 丈晴
シーアンドアール研究所
売り上げランキング: 411
GitHub実践入門 ~Pull Requestによる開発の変革 (WEB+DB PRESS plus)
大塚 弘記
技術評論社
売り上げランキング: 307
開発ツール徹底攻略 (WEB+DB PRESS plus)
Junio C Hamano 大塚 弘記 川口 耕介 kana 大竹 智也(tomoya) 尾藤 正人
技術評論社
売り上げランキング: 39,335

凄く便利なsass

webサイトのコーディングに必要不可欠なcssですが、コードが長くなってくると色々不都合が出てきますよね…

色を変えるのにいちいちソース検索して一つ一つ変更場所をチェックしながら変更したりなんてこともあるかもしれません。

今回少しだけ紹介するsassはそんな手間を省くことができる優秀なツールなのです。

まあ簡単に言うとsassはcssの凄くなった版css見たいなもので(分かりづらいかな?)変数が使えたり、ネストできたりするので物凄く作業効率が上がります。

sassを使えば、一つ一つのコードを検索しながら変更することもしなくていいですし、いちいち子孫セレクタを指定しなくても自動でcssに指定してコンパイルしてくれるので物凄く便利です。

こんな風に記述すると、

blog

cssにこのようにコンパイルされます♪

blog2

凄く便利ですよね?sassの詳しい説明を今後紹介していけたらなと思います。

では~

TrelloでWeb制作プロジェクトを管理

Trello

wEVAは新しいサービス好きのメンバーも揃っているので、いいツールがあればすぐに試しています。このTrelloについても昨年のインターンシップ受け入れ時に試験的に導入し使ってきていました(グループでのタスク管理にはTrelloがオススメ!)が、その後「壁に貼りだすのが好き」なアナログ思考に傾いてしばらくは離れてしまいましたが…最近の案件急増に伴い「アナログじゃ整理が追いつかない!!」という事でTrelloに戻ってきました。

アカウント作成も簡単!!

20140408 1

Trelloのアカウントをつくるにはトップページ上の「SIGN UP – IT’S FREE!」を押してアカウント作成の画面に進んでいくだけ!!Googleのアカウントがあればそのままでも進んでいくことができるので更に便利です!!

Web制作の現場での利用方法

さて、ここからは弊社内での使い方です

リストは初期のままにしています

  • To Do
  • Doing
  • Done

メモという別のリストをつくり制作に必要な内容をメモしておくこともありますが、ここは個人の好みで(^^;

で…「サーバー契約」「ワイヤーフレームの制作」「配色の決定」などなど思いつくことを片っ端からToDoに入れていきます。

20140408 2

タスクを全部入れたらDue Dateでスケジュールを組んでいきます。当然担当者をここで決定!!

あとは状況に応じてラベルをつけていきます。ここは好みで(^^v

社内ではGithubを使うことも多いので

  • Bug
  • duplicate
  • enhancement
  • invalid
  • question
  • wontfix

にあわせてみたり、bitbucket風に

  • Bug
  • enhancement
  • proposal
  • task

としたこともありますが…今のところは

  • 要対応&修正

を赤で置いておくだけにして、他は自由に使うようにしています。

全てのプロジェクトを俯瞰してみることができるように

20140408 3

プロジェクトのリーダーの色を背景に設定しています。これでダッシュボードを見た時に案件が誰に偏っているかなども見ることができます。

wEVA社内ではTrelloをこんな感じで使っています。使いこなしていけばもっともっと役に立ちそうなので、これからも使い方を試行錯誤していきますよーーーーー

Web制作者のためのSublimeTextの教科書

2014-04-07 16.58.19

Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ」が届きました。SublimeTextについてはタグ「SublimeText」のように何度かこのサイトでも取り上げてきていましたが、日本語で書かれた解説書がなく、利用方法を詳しく知るためにはネットで情報を調べなければならないので、まだまだ一般に普及するまでには時間がかかるかと思っていましたが、この解説書「Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ」の登場で一気に普及ペースが早まりそうですね。

2014-04-07 16.58.33

ページももこのようにわかりやすく解説されているので、初心者にもオススメです!!

目次

第1章 Sublime Textを導入しよう

  1. Sublime textとは
  2. Sublime Textのダウンロードとインストール
  3. Sublime Textの画面解説
  4. 対訳付きメニュー一覧
  5. Sublime Textの環境設定
  6. パッケージのインストール
  7. 日本語環境の設定
  8. テーマの変更

第2章 覚えておきたい標準機能

  1. 基本的な編集機能
  2. コーディングルールに対応する
  3. プロジェクトの活用
  4. コード入力に役立つ機能
  5. HTML/CSSに役立つ機能
  6. プログラミングに役立つ機能

第3章 パッケージで機能拡張しよう

  1. パッケージについてもっと詳しく知っておこう
  2. パッケージを管理する
  3. パッケージの探し方
  4. パッケージを開発する

第4章 プロが教える特撰パッケージ

  1. どんなときにも役に立つ必須パッケージ
  2. Web制作に役立つパッケージ
  3. EmmetやHayakuでHTML/CSSの入力を効率化する
  4. JavaScriptでの開発に役立つパッケージ
  5. サーバサイドからMarkdownまでさまざまな言語用のパッケージ
  6. ソース管理システムや簡易Webサーバを運用する
  • 付録
  • ショートカットキー一覧
  • 環境設定一覧
Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ
上野正大 杉本 淳 前川昌幸 森田 壮
インプレスジャパン
売り上げランキング: 1,753