効果的なアプリ/Web開発のための　コラボレーションツール活用入門

備考

● 今井 瑞江（いまい　みずえ）
Webデザイナー。フリーランスでのWebデザイン・サイト制作業務の傍らWordPressを独学で学び、WordPress公式ディレクトリにテーマ「Chocolat」、プラグイン「MS Custom Login」などを登録。2015年にWeb制作会社に入社し、WordPressのサイト制作やプラグインの作成などに携わる。個人プロダクト「MignonStyle」では、WordPressのテーマやプラグインの開発、Adobe Bracketsのエクステンションの制作などの活動を行っている。

● 上野 正大（うえの　まさひろ）
2012年9月にChatWork株式会社。1983年生まれで2児のパパ。Webサービス開発系企業でC#、PHP、Python、JavaScriptなどで開発経験経てモバイル開発の世界に足を踏みいれる。現在は同社アプリケーション開発部マネージャーとしてチームマネジメントやモバイルアプリのププロダクトマネジメントを担当している。

● 内田 優一（うえだ　ゆういち）
2015年5月に株式会社ヌーラボに入社、Backlogチームに所属し開発やサポートに携わる。BacklogチームではScalaを使ったRedmineからBacklogへの移行ツールを開発。Scalaの勉強会を主催し、Scalaの福岡でのイベント、Scala福岡では「PlayFramework」のハンズオンで講師を務める。プライベートではScalaを使ったWebサービス開発やAndroidアプリ開発を行っている。

● 大串 肇（おおぐし　はじめ）
Web制作会社にてデザイナー兼ディレクターとして勤務後、独立。2012年よりフリーランスmgnとして独立。同年、現役制作者が共同執筆するブログWP-Dを立ち上げ。2013年WordCamp実行委員長。WP-D Fes主催。HTML5 Japan Cup 2014 byhtml5j 部門賞受賞。2015年より株式会社mgn代表となる。Webサイト制作ディレクション業を主な仕事とし、一般企業や開発会社と一緒にプロジェクトを円滑に効率的に進めるためのお手伝いをしている。執筆および講師の仕事も。

● 後藤 幸（ごとう　ゆき）
大手子会社でのSEを経験したのち、2008年に株式会社ヌーラボに入社。これまで受託案件の開発やCacooのベータリリースに携わり、現在はTypetalk開発チームに所属。Play Framework(Scala)やAngularJSを使ったWebアプリとAndroidアプリの開発を行っている。

● 齋木 弘樹（さいき　ひろき）
フロントエンドエンジニアを目指しているマークアップエンジニア。大学卒業後、17年にわたってDucatiのチューニングショップでメカニックとして勤務。腰痛のため退職の後、Webに関する勉強をイチから始め、手始めに勉強会に行きまくる。1年の自炊代行会社勤務を経て2012年6月より株式会社エースユニオンデザインに所属。主にHTML・CSSのマークアップとWordPressの構築を業務とする。2016年4月より並行して講師業も開始。

● 齊藤 愼仁（さいとう　しんじ）
前職ではx86系プロセッサを中心としたサーバーハードウェアの企画・設計に携わり、ゲーム事業者やデータセンター事業者に大量納入するプロジェクトマネジメントなどを行った。その後、科学技術計算向けのHPCハードウェアのGPUやコプロセッサを利用した高密度計算機の設計などにも参画。現在はアイレット株式会社にて社内インフラのセクションリーダーを担当。情報セキュリティ管理責任者、個人情報管理責任者、PCIDSS管理責任者を兼務する。

● 嵩本 康志（たけもと　やすし）
1987年生まれ、千葉県山武市出身。制作会社にてデザイナー兼ディレクターとして所属。WEB・DTP・アプリ等幅広く活動中。EXP、Code for Chibaのメンバー。ReHack 最優秀賞、Photo Hack Day Japan 3位、Mashup Awards 11 CIVICTECH部門賞を受賞。WordCampTokyoで2年間メインのデザインを担当。現在、様々なハッカソン・勉強会・コミュニティにも参加。

● ひらい さだあき
2015年1月に株式会社グッドパッチに入社し、2015年12月に執行役員CTO就任。グッドパッチではプロトタイピングツールProttのエンジニアリーダーとしてプログラミング、パフォーマンスチューニング、チームビルディング、マネジメントなどを担当した。現在はCTOとして組織作り、技術選定、環境整備、エンジニア採用などを担当している。プライベートではhtml5jのスタッフとして活動し、執筆/登壇活動を行っている。

● 桝田 草一（ますだ　そういち）
大学在学中から独学でHTML, CSSを学び、2014年にデジパ株式会社に入社。入社以来、コーポレートサイトのフロントエンドとCMSの設計・実装に従事し、マシンリーダビリティ（アクセシビリティ）を確保した実装、メンテナンスしやすい設計を得意とする。またエンジニアとしてだけではなく、大規模サイトの運用ディレクターや採用担当、セールスまで幅広く担当している。

● 松尾 祥子（まつお　しょうこ）
フリーランスのWeb制作者。90年代後半から長年に渡りデザイン・コーディング・ディレクションを行ない、多岐のジャンルでのサイト制作に関わる。専門学校HAL東京のWebデザイン学科講師。著書「HTML5+CSS3でつくる! レスポンシブWebデザイン」、執筆協力「ビジネスサイトをこれからつくる WordPressデザイン入門 サイト制作から納品までのはじめの一歩」がある。

● 宮崎 優太郎（みやざき　ゆうたろう）
大学卒業後、無職になったのをきっかけに独学でWebの勉強をしながらフリーランスとして受託制作をスタート。3年間活動した後、株式会社Nagisaに入社しフロントエンドエンジニアとして自社サービスの開発とグロースを手掛けている。最近はReact+ReduxなどWebアプリケーション開発に夢中。

● 吉澤 富美（よしざわ　よしみ）
フリーランスによるウェブサイト制作業務等を経て2010年よりデジパ株式会社に所属。2016年1月D-77.LLCを設立、同社代表もつとめる。プロジェクトリーダ－、ディレクター、マークアップエンジニア職に従事する傍ら、組織作りや環境整備なども担当。WP-Dに立ち上げ時から参加、HTML5 Japan Cup 2014 by html5j 部門賞受賞。ゲーマー。X、LUNASEA、BUCK-TICKなどのバンドをこよなく愛する。

目次

●コミュニケーション概要
1章：コラボレーションツールが必 要とされる意味
1-1 プロジェクトをチームとして進めるために必須となる情報の共有
　　　Web サイトリニューアルのプロジェクトにおけるチーム編成
　　　情報共有は必要不可欠だが、プロジェクト進行に伴い情報共有は難しくなる
　　　ツールの有効活用がプロジェクト成功の可能性を高める
1-2 これまでのツールの問題点
　　　これまでの情報共有の方法
1-3 新たなツールが活躍するポイント
　　　コミュニケーション
　　　Web会議
　　　バージョンコントロール
　　　GoogleのWebサービス
　　　Markdown
　　　ファイルストレージ
　　　デザインコラボレーション
　　　プロジェクト管理

●PART1 コミュニケーション
2章：Slack
2-1 Slackとは
　　　Slack の概要
2-2 Slackの基本
　　　料金体系と支払い方法
　　　Slack のセキュリティ
　　　特徴的な会話の流れ
2-3 Slackの導入
　　　Slackの基本設定
　　　チャンネル作成
　　　チャンネルトピックの設定
　　　メンバー登録と役割
2-4 Slackの基本機能
　　　メンション
　　　メッセージの流用
　　　テキストの装飾
　　　絵文字
　　　ファイルや画像のアップロード
　　　検索
2-5 Slack で実現するクラウド連携
　　　Slack インテグレーション
　　　Slack App の導入
　　　Slack コマンド
　　　Slack API

3 章：チャットワーク
3-1 チャットワークの概要
　　　チャットワークの誕生
　　　チャットワークの特徴
3-2 チャットワークのはじめ方
　　　新規登録
　　　使い始める前に
　　　知人や取引先の人とつながる
　　　ダイレクトチャットを利用する
　　　グループチャットを作成する
3-3 メッセージ機能
　　　エモーティコン
　　　TO
　　　INDEX 返信
　　　引用
　　　編集
　　　削除
　　　検索
3-4 タスク機能の使い方
　　　タスク追加
　　　タスク完了
　　　タスク編集
　　　タスク削除
3-5 ファイル共有機能
　　　ファイルのアップロード
　　　ファイル名の編集
　　　ファイル削除
3-6 ライブ通話機能
　　　ビデオ通話
　　　音声通話
　　　画面共有
　　　ライブの着信
3-7 チャットワークを使いこなす
　　　キーボードショートカット
　　　メッセージ装飾用記法
　　　ピン機能
　　　招待リンク

4 章：Web 会議
4-1 Web 会議をはじめる前に
　　　Web 会議を行なうメリット
　　　Web 会議を行なうデメリット
　　　Web 会議をスムーズにおこなうポイント
　　　資料を共有する
4-2 Skype
　　　Skypeとは?
　　　Skype で友人を連絡先に追加する
　　　Skype グループビデオ通話の使い方
　　　Skype グループビデオ通話でのチャット
　　　Skype グループビデオ通話での画面共有
4-3 Google ハングアウト
　　　ハングアウトの使い方
　　　Google ハングアウトでのチャット
　　　Google ハングアウトでの画面共有
　　　Google ハングアウトを終了する
4-4 appear.in
　　　appear.inの使い方
　　　appear.inでのチャット
　　　appear.inでの画面共有
　　　使う上での注意点
　　　appear.in のスマートフォンアプリ

●Part2 ソースコード管理
5 章：Git 
5-1 Gitとは
　　　ファイルの管理は手動では限界がある
5-2 Git のインストール
　　　SourceTree を利用する場合
　　　SourceTree のインストールと初期設定
　　　コンソールを利用する場合
5-3 GitHub アカウントの取得
　　　アカウント作成
　　　アカウントの種類を設定
　　　質問に回答
　　　メールを確認
5-4 Git の基本な使い方
　　　Git を使ったバージョン管理の流れ
　　　リポジトリと分散型 / 集中型の違い
　　　リポジトリの作成
　　　ファイルの変更履歴を記録する
　　　変更をリモートリポジトリで共有する
　　　コミットメッセージの書き方
5-5 ブランチ
　　　ブランチとは
　　　ブランチを切り替える( チェックアウト)
　　　ブランチのマージ
　　　コンフリクト( 競合)
5-6 Git を利用するリモートリポジトリサービス
　　　リモートリポジトリとは
　　　主要な機能(GitHub)
　　　主なリモートリポジトリの紹介

●PART3 ドキュメント管理と共有
6章：GoogleドキュメントとMarkdown
6-1 GoogleのWebサービス
　　　ドキュメントの共有とGoogle のWeb サービス
　　　Google ドキュメントとは
　　　Googleドライブ
　　　Google ドキュメントの共有
　　　Google ドキュメントの編集権
6-2 Markdown
　　　Markdownとは
　　　Markdown記法
　　　Markdown文書を共有するWebサービス
　　　Markdown 用アプリケーション

●PART4 ファイル共有
7章：Dropbox
7-1 オンラインストレージとDropbox の基本
　　　オンラインストレージとは
　　　Dropboxとは
　　　Dropbox アカウントを作る
7-2 Dropboxの使い方
　　　ファイルを同期
　　　ファイルの共有と解除
　　　ファイルにコメントを入れる
7-3 Dropboxの応用
　　　パスワード・有効期限を設定する
　　　ファイルをアップロードしてもらう
　　　2 段階認証してセキュリティ強化
　　　WEB サイトを保存
　　　同期しないフォルダを指定
　　　独自ドメインを設定してWEB サイトを公開する

8章：Google ドライブ
8-1 Goole ドライブの概要・設定
　　　Google ドライブとは
　　　Google ドライブの基本画面
8-2 Goole ドライブの使い方
　　　ファイルの同期
　　　ファイルの共有と解除
　　　ファイル操作の履歴と版を管理
　　　ユーザー追加と削除
8-3 Google ドライブの応用
　　　お気に入り機能
　　　Gmail の添付ファイルを保存
　　　WEB サイトを保存する
　　　Google マップでマイマップを管理する
　　　Google ドライブにアプリを追加
　　　ファイルを削除・復元する
　　　同期するファイルを指定する
　　　ダウンロードとアップロードの速度を変更する
　　　OCR(光学式文字認識)機能の使い方
　　　Google Drive for Work

9 章：宅ふぁいる便
9-1 宅ふぁいる便とは
　　　宅ふぁいる便の概要
9-2 基本的な使い方
　　　ファイルのアップロード
　　　ファイルのダウンロード

PART5 デザイン
10章：ProttとCacoo
10-1 Prott
　　　Prottの概要
　　　Prottの使い方(基本編)
　　　Prottの使い方(応用編)
10-2 Cacoo
　　　機能と特徴
　　　基本的な使い方
　　　図の共有
　　　Cacoo忍者(拡張機能)
　　　おすすめポイント

●PART6 プロジェクト管理
11章：Backlog
11-1 Backlogの概要
　　　Backlogの概要
11-2 Backlogのはじめ方
　　　Backlog を申し込む前に
　　　申し込み
　　　プロジェクトの作成
　　　ユーザーの追加
　　　スペース名とロゴの変更
11-3 タスク管理(基本編)
　　　課題管理とは
　　　課題を登録する
　　　課題を検索する
11-4 タスク管理(応用編)
　　　カスタム属性を使ってみよう
　　　親子課題を作る
　　　検索結果をまとめて操作
11-5 タスク管理( コミュニケーション編)
　　　スター
　　　通知
　　　ウォッチ
　　　メール連携
11-6 Wikiを書く
　　　Wikiの作成手順
　　　履歴
11-7 ファイル共有を使ってみよう
　　　Web でファイル共有
　　　WebDavの使い方
11-8 バージョン管理
　　　Git を使ってみよう
　　　Subversionを使ってみよう

12章：Trello
12-1 Trelloの概要
　　　Trelloとは
　　　Trello のはじめかた
12-2 Trelloの構成要素
　　　Trello はボード、リスト、カードの集まり
　　　カード(Card)
　　　リスト(List)
　　　ボード(Board)
12-3 Trello でプロジェクト管理
　　　ボードの作成
　　　リストの作成
　　　カードの作成
　　　プロジェクト進行中
　　　Trello が得意なプロジェクト不得意なプロジェクト
12-4 Trello をもっと便利に使う
　　　ブラウザ拡張機能
　　　有償プラン
　　　API連携

●PART7 実際の利用実例
13章：Slack+Trello+Backlog
13-1 連携の概要
　　　Slack に各ツールのログを集約する
　　　Backlog の更新があったらTrello を自動で更新する
13-2 Trelloの更新をSlackに通知する
　　　Trello Alertsのインストール
　　　連携できているか確かめてみる
13-3 Backlogの更新をSlackに通知する
　　　Zapier を使ってノンプログラミングで連携
　　　ZapierとBacklog Webhookを組み合わせる
　　　連携の確認
13-4 Backlogの更新でTrelloにカードを作る
　　　ZapierとBacklog Webhookを組み合わせてみよう
　　　連携できているか確かめてみる

14章：GitHubのプルリクエストによるGitHub Flow
14-1 GitHub Flowの概要
　　　プルリクエストとGitHub Flow
　　　GitHub Flow の運用ルールについて
14-2 GitHub Flowの基本
　　　チームで使用するリポジトリの作成
　　　Organization(組織)の作成
　　　チームの作成
　　　リポジトリにチームを追加
　　　GitHub Flow によるワークフローの流れ
　　　リポジトリの取得
　　　作業用ブランチの作成
　　　ブランチのコミット
　　　プルリクエストの作成
　　　コードレビュー
　　　master ブランチへマージ
14-3 GitHub Flowの応用
　　　プロジェクト管理でのコミュニケーション
　　　GitHubのWikiを使ってみよう

15章：チャットワーク+Zapier+Gmail+ Google カレンダー
15-1 チャットワークとZapier を連携させる
　　　Zapier とチャットワークを連携させる
15-2 チャットワークとGmail の連携
　　　トリガーの設定
　　　アクションの設定
15-3 Google カレンダーとの連携
　　　トリガーの設定
　　　アクションの設定

16章：Typetalk+Backlog
16-1 チャットとタスク管理
　　　Typetalkとは
　　　チャットとタスク管理の役割
16-2 チャットからタスク管理へ
　　　メッセージをまとめて課題作成
　　　まとめの参照
　　　まとめの作成
　　　まとめの編集
　　　活用ポイント
16-3 プロジェクト管理からチャットへ
　　　設定方法
　　　連携の投稿例
　　　活用ポイント
16-4 Backlog連携の設定方法
　　　スペースオーナーがやること
　　　各ユーザの設定