SOHOカアチャン通信

この日のセッション内容

• なぜ効率化？わたしたちがやるべきこと / 神森勉氏
• ツールシフト 武器としてのツール活用術 / 高森三樹氏
• HTML5/Sass/CoffeeScript - ツールを活用した、Webサイト制作新時代 / たにぐちまこと氏
• はじめようバージョン管理 / 古川勝也氏
• SmartReleaseを使ってWeb制作を効率化しよう / 阿部正幸氏

なぜ効率化？わたしたちがやるべきこと / 神森勉氏

神森さんは、超面倒くさがり屋さんだそうです。
をを！同じ！と勝手に親近感w

**「効率」ってなんだろう
限られた時間で行い、比較対象があるもの。
効率がよければいいというものではなく、成果物の品質が大事です。
つまりは、
1時間100%の力で20ページコーディングできるけど、ミスが多い成果物を作るAさんと、
1時間100%の力で10ページのコーディングだけど、完璧な成果物を作るBさんでは、
Bさんの方が効率がいいということ。

** 効率化のマインドについて
どんなとき効率化を考えますか？
まずは、もっと自分の時間がほしいとか、時間がなくて自分だけ飲みに行けないとかで、どうやったらいいんだろうと考える問題意識が大事。この問題意識がないと、「効率化」仕様という考えにおよびません。
解決するには、がんばればいいのかもしれないけど、人が動けばコストがかかります。時間も必要です。でも、時間は限られている。この限られた時間を有効活用したいというのが「効率化の基本原則」です。

** 具体的な例
なぜCMSを導入するのですか？
お客様への素早い情報提供、運用を効率よく、などですよね。
それは誰のため？お客様のためですよね。でも、記事の更新をするときに考えながら入力していませんか？
大切なのはお客様に伝わる文章です。
文章を考える時間は、【考える】時間。
記事を書く時間は、【作業する】時間です。

コーディング作業にも同じことがいえます。
原稿やデザインを見たときに、まずどれが見出しかなど【考えます】。
つまり小さな情報設計です。そのうえで、htmlやcssを書く【作業】をします。

作業時間を減らせられれば、考える時間が増やせます。
作業時間と考える時間、どちらが大事でしょうか？

** まとめ
自分の仕事に疑問を持つのは大事！効率化への第一歩
「考える」と「作業」の時間を切り分ける
→やるべきことは「考えること」
新しいツールを取り入れる柔軟性を持つ
→いざというときの取捨選択（特定のツールにこだわりすぎない）
すべてはお客様のために
→効率化は周りをハッピーにします。

ツールシフト 武器としてのツール活用術 / 高森三樹氏

ここから、ツールの紹介の連発が始まります。

** ツールシフト
ツールはどんどん進化しています。

• セットアップ不要


• OSを問わない


• デバイスを問わない


• 場所を問わない


• 共有機能の充実


• テンプレート・ショートカットの強化


• 必要な機能を必要な分だけ(フリーミアム)

** プロジェクト運用でつかえるツール群

メールで作業履歴を残して追っていくのも大変ですよね。
Excelでプロジェクト管理すると、 共有の機能がない、 作業の履歴がたどりにくい、 todoが管理しにくい などで難しいのでは？

***　プロジェクト管理系にはなにをつかっていますか？
Backlog
http://www.backlog.jp/
brabio
http://brabio.jp/
gantter Chromeの拡張機能　ガントチャートだけ作れる
http://gantter.com/
Redmine これがおすすめ(私も結構スキ)
http://redmine.jp/
本も出てるそうです。

***　コミュニケーションツール
facebookグループ:ファイル機能、Docs アプリ
サイボウズLive：話題を分割できる
Skype
googleリモートデスクトップ　Chromeの拡張機能

***　収集と共有
Evernote　
http://evernote.com/intl/jp/
mind42.com
http://mind42.com/
各種オンラインストレージ

** フリーミアムのツールの活用
Dropbox
http://www.dropbox.com/
GoogleDrive

• フォーム機能が便利


• 専用アプリなくても特殊ファイルも閲覧できるのが地味に便利

Evernote 有料
Skype　有料

** Web制作の補助ツール
Boilerplate
http://html5boilerplate.com/
SPECCTR Fireworksの拡張機能
http://specctr.com/
ランチャー：CLaunch
http://hp.vector.co.jp/authors/VA018351/ (Win)
クリップボードの拡張：ClipMenu（ワタクシも愛用中）
http://www.clipmenu.com/ja/
エクスプローラー・Finder拡張
google日本語入力

** フレームワーク　　　
ナレッジワーカーの仕事術

** 体験し知覚する
　　

• あらゆる形態のツールがある


• ツールは手段であって目的ではない


• みなでハッピーになることがツール活用の意義

ここでもハッピーが！　
タスク（チケット化）におとすにはそのタスクひとつに20分以上かかるかどうかで判断している。
チケット化することがタスクになってはいけない。細かすぎてもよろしくない。

HTML5/Sass/CoffeeScript - ツールを活用した、Webサイト制作新時代 / たにぐちまこと氏

冒頭、Macのソフトしか紹介しません(ｷﾘｯ　
会場、ほぼAirでしたしね。仲間には入れてうれしいワタクシw
いつもながらたにぐちさんの華麗なデモに魅せられました。

** Webの閲覧環境が変わってきた
*** 増える閲覧環境
　　スマホ、タブレット、ガラケー　　
　多様化するプラットフォーム・ブラウザ　
　しかもじゃじゃ馬なAndroid端末
　　XPeria REGZA Aquos Phone が特にクセが強い
*** もっておきたい検証端末
iPhone OS 3、iOS3~6　　
Android 2.3.3、4.0　 　　　

*** 押し寄せるレスポンシブウェブ　（RWD）
なぜ、レスポンシブ・デザイン？なんでしょう。
この辺は別の場所でいろいろ議論になっていますよね。

** ツールを使って次世代に進もう
*** スマホフレームワークを使いましょう。
有名どころ　
jQuery Mobile
http://jquerymobile.com/
→動作確認がある程度されている 日本は十分ではない
twitter　bootstrap
http://twitter.github.com/bootstrap/
→デザインセンスがいい　採用サイトが多すぎ

*** 実機確認を楽にする
AdobeShadow（速攻入れました）
http://labs.adobe.com/technologies/shadow/

** 人は待てない　通信速度
これからは低速化の時代になると予想しています。
なぜなら、スマホでしか見ない、PCはあるけど電話回線などひいていないのでテザリングという人が増えている。

*** なぜ遅いのか
CSS、画像のロードに時間がかかる
HTTPコネクションに時間がかかる→リソースの利用がネック
　
****　CSSは不要な改行などは削除しましょう。
CSS Compressar
http://www.csscompressor.com/
YSlow Firefoxのプラグイン
https://addons.mozilla.org/ja/firefox/addon/yslow/
　
****　画像はpng画像を使いましょう
圧縮率が高く、きれいです。
写真は jpg 、アニメーション以外はもうみんな png で。
極限まで軽くしましょう
ImageAlpha
http://pngmini.com/
不要なメタ情報を削除する
ImageOptim
http://imageoptim.com/
画像の個数をへらすCSS Spriteがはやりです。
SpritePad
http://wearekiss.com/spritepad
ほかにもなんだかいっぱいあります。

** いろいろやることが増えて　　
作業効率も次世代に
次世代CSS
scssについて
Codekitなど華麗なデモ
http://incident57.com/codekit/

ツイートされたツールまとめ

この下はまだ校正途中のものもあります。
上記ですでにリンク先を紹介済みのものもあるかもしれません。
なんかミスがあったら教えてください。

プロジェクト管理系

RedmineのPHPポート版
http://t.co/kDIFQQVf
Basecamp
http://basecamp.com/
（http://www.webcreatorbox.com/webinfo/how-to-use-basecamp/）
Mavenlink : Google Apps と連携できるプロマネツール
http://www.mavenlink.com
Glasscubes: 無料のわりには高機能なプロマネツール
http://www.glasscubes.com
Gantter: ガントチャートを共有。こちらは Google Drive 経由で使える
http://gantter.com/
Lighthouse: Issue tracking くらいでいいやって感じであれば、これでも良いかも
http://lighthouseapp.com
CreativePro Office: これも高機能なプロマネサービス。無料から使えるよ
http://www.mycpohq.com

HTML5系
Initializr
http://www.initializr.com
HTML5 BOILERPLATE
http://html5boilerplate.com/
HTML5時代のWebデザイン（今話題のスライドです！）
http://www.slideshare.net/gaspanik/html5web-14219975

ランチャー、Finder系
LaunchBar 5
http://www.obdev.at/products/launchbar/index.html
Alfred
http://www.alfredapp.com/
SideFolders
http://www.macupdate.com/app/mac/37718/sidefolders
TotalFinder
http://totalfinder.binaryage.com/

テキスト系
TextExpander　設定をそのままもっていける iPhone アプリもあり
TextExpanderにjQueryのcdnスニペット登録しておいたりすると便利
TextExpander は応用すると、ダミー画像をぺたぺた貼れるようになるよ。
TextExpanderの真骨頂はFill-inとPosition cursor hereにある
http://smilesoftware.com/TextExpander/index.html

タスク系
Things
http://culturedcode.com/things/
Wunderkit
http://www.wunderkit.com/login

フレームワーク系
Switching from jQuery Mobile to Twitter Bootstrap
http://blog.pamelafox.org/2011/09/switching-from-jquery-mobile-to-twitter.html
Themes for Twitter Bootstrap - WrapBootstrap
https://wrapbootstrap.com/themes
BootTheme : Web Design Tool and Theme Generator for Twitter Bootstrap
http://www.boottheme.com
Kickstrap: Enhancements for Bootstrap
http://ajkochanowicz.github.com/Kickstrap/
Bootswatch Bootstrap のテーマ集
http://ajkochanowicz.github.com/Kickstrap/
Bootstrap で作ったサイトのショーケース
http://builtwithbootstrap.com

Adobe Shadow | preview mobile web - Adobe Labs
http://labs.adobe.com/technologies/shadow/

Zen To Done (ZTD): The Ultimate Simple Productivity System :zenhabits
http://zenhabits.net/zen-to-done-ztd-the-ultimate-simple-productivity-system/

Run Android on Mac with BlueStacks :: Android on Mac :: Android Player for Mac | BlueStacks
http://bluestacks.com/bstks_mac.html

高速化系
Page Tracker
https://developers.google.com/web-toolkit/speedtracer/
Firefox だけじゃなくて Chrome にもある YSlow
https://chrome.google.com/webstore/detail/ninejjcohidippngpapiilnmkgllmakh

ImageOptim -- make websites and apps load faster (Mac app)
http://imageoptim.com
Windowsだとこれでいけるんじゃないかな。　RIOT - Radical Image Optimization Tool · Download
http://luci.criosweb.ro/riot/download/
CSSスプライトが超簡単に作れるWEBサービス「Sprite Pad」
http://mantiddesign.com/archives/11897

CSSのMinifyとか戻すとか。　Mac App Store - ProCSSor
http://itunes.apple.com/us/app/procssor/id496118569?mt=12
自分がつくった CSS を LESS にする CSS2Less
http://css2less.cc
Sass、Less、Stylusの書き方の違いなどを一覧で確認できる。Sass vs. LESS vs. Stylus: Preprocessor Shootout | Nettuts+
http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/

Mac/Windows でも大丈夫。SimpLESS
http://wearekiss.com/simpless
Crunch! - The tastiest LESS editor
http://crunchapp.net
Scout - Compass and Sass without all the hassle
http://mhs.github.com/scout-app/
Compass.app: compile Sass/Compass easily without resorting to command line interface
http://compass.handlino.com
Windowsの人は、LiveReload のα版。
http://livereload.com
WordPress使ってる人は、このスターターテーマがHTML5かつスタイル定義がLESS版とSass版があるそうです。
Bones - A Wordpress Development Theme Themble
http://themble.com/bones/

バージョン管理系
Subversion の Mac アプリ Cornerstone
http://www.zennaware.com/cornerstone/
GitHub for Mac
http://mac.github.com
SourceTree is a FREE Mac client for Git, Mercurial and Subversion
http://www.sourcetreeapp.com
Tower
http://www.git-tower.com
Beanstalk -- Secure, Private Subversion, Mercurial and Git Hosting
http://beanstalkapp.com
SublimeText2から直接コマンド叩ける。SublimeText/SideBarGit · GitHub
https://github.com/SublimeText/SideBarGit

画像のバージョン管理
PixelNovel。タイムライン形式で記録
http://pixelnovel.com
LayerVault: ストレージも含めたバージョン管理ソリューション
http://layervault.com
Pixelapse: 保存するたびにバージョン管理されていくツール
http://www.pixelapse.com
Kaleidoscope （もっているのに、画像のバージョン管理ができるのは知らなかった^^;）
http://www.kaleidoscopeapp.com

SnipEdges - Drag-and-drop snippet manager
古川さんが使ってる左からピロッと出してる緑の付箋
http://www.houdah.com/snipEdges/
古川さんが使っているもう一つのツールは Default Folder X ですな。
http://stclairsoft.com/DefaultFolderX/

番外
デモの時にメニューバーをすっきりさせてくれるBartendar
http://www.macbartender.com