Web制作を行う全ての方へ

プロジェクト進行チーム内コミュニケーションツール「slack」がすごく便利なのでご紹介

チーム単位で開発する際に、どうやってコミュニケーションを図るか?というのがいつも課題で、チャットワーク、スカイプ、バックログなど、色々なツールを使っているのですが、最近slackを導入してみて「これはすごく便利!」と感じたので記事にしました。

  1. 1.slackとは
  2. 2.基本的な使い方
  3. 3.キーボードショートカット
  4. 4.スニペット
  5. 5.外部ツールとの連携
  6. 6.様々な端末対応
  7. 7.制作を手助けするツールについて思うこと

1.slackとは

https://slack.com/
slackはチャットをベースに、コミュニケーションを円滑にしてくれるツールで、ファイルのアップロードはもちろん、様々な外部ツールと連携させたり、slackのAPIを活用して、より快適なコミュニケーションの場を作リ出せるツールです。

2.基本的な使い方

slackのサイトにアクセスし、サインアップすることで利用することが出来ます。

サインアップし、必要なステップをクリアすると、最初の画面はこんな感じです。

画面の構成はこんな感じ

チャットについて

slackは、チーム単位毎に管理することができ、チームの中に用途に合わせたチャンネルを用意して快適なコミュニケーションを取ることができます。

登録してはじめ、#general#randomというチャットが存在し、ここはどちらもチームに参加しているメンバー全員が強制的に参加することになるチャンネルです。あとから参加したメンバーも追加されます。

#generalは主に仕事向けのチャンネル、#randomは主に雑談向けのチャンネルとして使われるようですが、機能としてのちがいは、#generalにはチームに参加している全員に通知を送る@everyoneというメンションが存在します。

メンションとは、下記のように@マーク+ユーザー名と言った形で、メッセージに備え付けることにより、該当するユーザーへ通知を送ることが出来ます。

上記で述べた@everyone、@ユーザー名以外に@channelというメンションが有り、それを使うと、そのチャンネルに参加しているユーザー全員に通知を送ることが出来ます。

メンション機能はtwitterやfacebookといったSNSで活用できる機能と一致しているので、それらを利用している方には馴染みある手段ですね。

ファイルアップロード・スニペットについて

チャットではメッセージ以外に、ファイルのアップロードやスニペットを送ることが出来ます。

ファイルのアップロードは様々なタイプのファイルをアップすることができ、画像ファイルのある場合はプレビューが表示されます。

jpgやpngファイルはもちろんですが、psdもファイルによってはプレビューが表示されます。

この記事を書く前に試した時、チャット画面の方でもプレビューが表示されたのですが、この記事を書く際に試した時、チャット画面の方でプレビューが表示されませんでした。この原因がまだ特定できておらず、仕様が僕の方ではっきりしていません。分かる方がいらっしゃったら教えていただきたいです。

イラストレーターのデータもプレビューが出るのかな?と思いaiファイルをアップロードしてみましたが、プレビューは出ませんでした。ですが、イラストレーターのパスデータをコピーし、スニペットから貼り付けてアップすることで、svg形式としてアップロードすることができます。svgですので、アップロード後に出てくるリンクのrawをクリックすることで、ブラウザ上にてイラストのデータが確認出来ます。


View rawのリンクをクリックすると


プレビューをブラウザで確認することが出来ます。

検索について

チャットの履歴を検索することはもちろん、スニペットの中身まで検索してくれます。これが結構便利なんですよね。

3.キーボードショートカット

slack内の操作をキーボードで操作できるショートカットが用意されています。

Opt (Alt) + up arrow 左メニューの操作 前のチャンネルまたはDMに戻る
Opt (Alt) + down arrow 左メニューの操作 次のチャンネルまたはDMに進む
Opt (Alt) + shift + up arrow 左メニューの操作 未読メッセージの前のチャンネルまたはDMに戻る
Opt (Alt) + shift + down arrow 左メニューの操作 未読メッセージの次のチャネルまたはDMに戻る
command + [ 左メニューの操作 前に見ていたチャンネルに戻る:ヒストリー操作
command+ ] 左メニューの操作 次に見ていたチャンネルに進む:ヒストリー操作
ESC メッセージ及び通知をすべて既読にする
Shift + ESC 全チャンネルおよびDMS内のすべてのメッセージと通知既読
Tab 最後に入力したスラッシュコマンドを再プリント
[character] + tab or @[character] + tab [文字]で始まるユーザー名の自動補完
#[character] + tab [文字]で始まるチャンネル名の自動補完
:[character] + tab [文字]で始まる絵文字の自動補完
Shift + up arrow from input field 現在の行の先頭にテキストをハイライトし、テキスト編集モードにする
Shift + down arrow from input field 現在の行の末尾にテキストをハイライトし、テキスト編集モードにする
Shift + enter from input field 入力フィール内で改行する
Shift + Paste (Ctrl+V or command + V) 新しいスニペットとして貼り付け+作成する
Ctrl + .
command + .
右絡むの表示・非表示切り替え
Ctrl + ?
command + ?
キーボードショートカットの操作説明をオーバーレイで表示する
Ctrl + K
command + K (or command + T in Mac App)
クイックスイッチャー(チャンネル、チーム切り替え機能)の表示
up arrow from empty input field 最後に送信したメッセージを編集する(入力フィールドで操作)
Page Up/Down, Home & End スクロール
command + enter
command + shift + enter
Ctrl + shift + enter
Shift + Ctrl + V (not in Firefox)
スニペットの作成
Opt (Alt) + click a message 最も古い未読メッセージとしてこのメッセージを設定する

4.スニペット

上記のsvgで触れましたが、スニペットを使えば様々な形式のデータを貼り付けることができます。

HTML,CSS,JavaScript,Ruby,Python,C,JAVAなど、多くのフォーマットに対応していており、ソースに対して色づけてして見やすくなる為、チャットにソースを書くよりも便利に使えます。さらに、投稿したスニペットはファイルとして管理が出来ます。


例:CSS

5.外部ツールとの連携

slackは様々な外部のツールと連携する事ができます。例えばGoogleのハングアウトと連携させておけば、/hangoutコマンドでハングアウトにアクセスするためのアドレスがチャットウィンドウに表示されるのですが、その際のアカウントを紐付けておくことができ、音声会話でやりとりしたい時も、スムーズに行えます。
また、ツイッターを連携させておき、ツイッターアカウントのツイートを自動的にチャットウィンドウに表示させておくことができます。

6.様々な端末対応

slackは現在Mac,iOS,Andoroid向けのアプリケーションや,Chromeの拡張機能が提供されており、様々な環境からアクセス出来ます。僕は会社で使っている端末がWindows、自宅や出先で利用する場合はMacBookProを利用しているのですが、どの端末で使うにしても、際をそれほど感じることなくスムーズに利用出来ています。

7.制作を手助けするツールについて思うこと

こういった制作を手助けしてくれるツールは非常に便利で、気になるものは触って、使えるものは使っていこうというスタンスで居るのですが、そういったものは次々と出てきて、あれもこれもというのが難しくもなっています。

当然なんですが、ツールはあくまで手助けをしてくれるものであって、それがないと制作ができない!という事にはなりません。

新しいツールを追うことに必死になり、それを覚えることに時間を取られすぎては、肝心な制作の時間が減ってしまい本末転倒になってしまいます。

あくまで制作を助けたり、コミュニケーションを円滑にするためのものという意識をしっかり持って、ツールに振り回されないようにし、大事なものを見失わないようにしていくことが一番大事だなと思います。

https://slack.com/

お役に立てたらお願いします🙇

Kyashで送金する

Ad



Share