machida

マチダのブログ

GitHub Issues を使って見た目に関する報告する方法

普段、仕事では HTML や CSS をいじることが多いので、Sass のフレームワークを一新したりなど、全体に影響する大きい変更があった場合は、社内のインターンの方にデザイン崩れがないかを目視で確認をお願いすることがたまにあります。

そういうとき、デザイン崩れを見つけたら、 Github Issues に登録してもらってるのですが、こういうデザイン崩れなど「見た目」についての報告をしてもらう際に、文章だけで報告されるとつらい。報告をされたほうは「どこのことを言ってるんだろう?」ってなります。

なので毎回、

  • 該当箇所の画像(必要であれば、画像の中の該当箇所に矢印などのマークを入れる)
  • それが起きているページのURL
  • 必要であれば文章も(例えば、ログインしていて投稿が0の場合、などそれが起こる条件など)

をセットで報告してね、と言ってるのですが、毎回言うのも面倒なので、言う代わりにペッとURLを貼り付けるだけで済まそうと思って、こちらのブログに書くことにしました。

ダメな報告の例

ダメな報告の例

これだとどこのページのことを言ってるのか、どのアイコンのことを言ってるのか全然わからないですね。「これってどこのこと?それが起きてる画面を見せて教えてー」なんてやりとりをしてたら報告する側も、報告される側もお互いに無駄に時間がかかってしまいます。それに「なんか変です。」って、そんな文章を付けるんだったら書いてないのと同じ、いや、むしろ読んでも何の足しにもならない文章を書いた、読んだ時間だけ無駄です anger

大体の Web アプリは「一覧ページ」、「個別ページ」があります。例えば、怖話でいったら、怖い話の一覧ページと怖い話の個別ページがあります。「怖い話の」より、「怖い話の一覧ページの」、「怖い話の個別ページの」まで書いてくれるとわかりやすいです。

いい報告の例

いい報告の例

ここまで丁寧に書いてくれると報告されたほうも助かります。

GitHub Issues に画像を貼る方法(Mac のみ)

「毎回画像貼るの!? 面倒くせーからインターンやめるわ」って思ったかたもいるかもしれないですが、Github Issues に画像を貼るのってすごく簡単だから大丈夫。

command + shif + 4 キーを同時に押す

ちょっと押しにくいですが、 command + shif + 4 キーを同時に押します。すると、マウスカーソルが「+」に変わります。

GitHub Issues に画像を貼る方法(Mac のみ) image md

キャプチャを撮りたい部分を選択

マウスカーソルが「+」に変わったのを確認してから、画像として貼りたい箇所でマウスやトラックボードのボタンを押し、押した状態をキープしたままカーソルを引っ張って囲います。ボタンから指を離すと「パシャ」っとカメラのシャッター音が鳴ります。すると、クリップボード(一時的にデータを保存できる共有のメモリ領域)に選択したキャプチャが画像として保存されます。

キャプチャを撮りたい部分を選択 image md

GitHub Issues にキャプチャを貼り付け

クリップボードにキャプチャが保存された状態で、GitHub Issues の本文を入力するテキストエリアにペースト( command + v キーを同時に押す)すると、 ![Uploading image.png...]() という文字が出ます。「今、画像をアップロードしてるところだよ」と言ってますね。

GitHub Issues にキャプチャを貼り付け image md

少し待つと画像がアップロードが完了して、![image](https://cloud.githubusercontent.com/assets/xxx/xxx.png) と、markdown記法での画像表示のマークアップに変わります。

GitHub Issues にキャプチャを貼り付け完了 image md

これで GitHub Issues に画像を貼れました。

矢印や文字を入れた画像を GitHub Issues に貼る方法

先ほどのはキャプチャを貼るだけでしたが、場合によっては、キャプチャ内のこの部分を示したいときもあります。そういった場合は矢印や文字を入れたキャプチャを GitHub Issues に貼るとわかりやすくなります。

Skitch をインストール

まずは、Skitch というツールをインストール。

Skitch というツールをインストール image md

https://evernote.com/intl/jp/skitch/

Skitch を立ち上げて Evernote アカウントでログイン

Skitch を立ち上げると、Skitch は Evernote のサービスなので Evernote アカウントでログインを求められます。もし Evernote アカウントを持っていなかったら「Evernote 新規ユーザ」から登録をします。Evernote アカウントを持っていたら、「既にアカウントを持っている場合」からそのアカウントでログインをします。ちなみに、Evernote の無料会員で Skitch は使えるのでお金はかかりません(2016年7月9日現在)。

Skitch を立ち上げて image md

ログインをすると、Skitch がこのような画面になります。

Skitch ログイン完了 image md

Skitch でキャプチャを撮る

ログイン後、Skitch の画面の上部にある「画面キャプチャ」ボタンをクリック。

Skitch 画面キャプチャ image md

すると、画面にオーバーレイがかかって、カーソルが「+」になります。

Skitch 画面キャプチャを撮る image md

先ほどの command + shif + 4 ときと同じように画像として貼りたい箇所でマウスやトラックボードのボタンを押し、押した状態をキープしたままカーソルを引っ張って囲い、ボタンを離します。

すると、選択した部分のキャプチャが Skitch の画面に表示されます。

Skitch 画面キャプチャを撮った image md

Skitch の画面の左にあるツールを使ってキャプチャに矢印や文字を書き込みます。

Skitch 画面キャプチャに書き込みをした  image md

書き込みが完了したらいよいよ Github Issues に貼り付けます。まずは、Skitch の画面の下にある「PNG」と書いてあるファイルの絵のアイコンの上でマウス、トラックパッドのボタンを押します。すると、Skitch の画面の枠がなくなり、キャプチャの部分が小さくなります。

Skitch pngアイコンをクリック image md

マウスやトラックボードのボタンを押した状態をキープしたままキャプチャ画像を GitHub Issues のテキストエリアまで持ってきて、ボタンから指を離すと、画像のアップロードが始まります。

GitHub Issues の textare で離す image md

Skitch からアップロードをすると、markdown ではなく、HTML タグが書き出されますが、問題なく画像が貼り付けられます。

png でアップロードされた image md

これで、矢印や文字を入れた画像を GitHub Issues に貼れるようになりました。

動画を GitHub Issues に貼る方法

サイト内の動く部分を人に伝えるときは動画を使うと便利。
例えば、JavaScriptを使って動くところの動きの不具合や、クリックなどアクションをした後に起きる不具合などは、それを再現させる動作を動画で伝えたほうがわかりやすいです。

キャプチャ動画を撮るツールのインストール

まずは、Gyazo というツールをインストールします。

https://gyazo.com/ja

「今すぐGyazoをはじめる」をクリック。

「今すぐGyazoをはじめる」をクリック。 image md

「簡易版」の「ダウンロード」をクリック。

「簡易版」の「ダウンロード」をクリック。 image md

すると、ファイルがダウンロードが始まり、「Gyazo」と「Gyazo GIF」という2つのアプリのインストール方法が表示されます。そのインストール方法に従って、「Gyazo」と「Gyazo GIF」をインストールします。

Gyazo と Gyazo GIF をインストールします。

これで、キャプチャ動画を撮る準備ができました。

キャプチャ動画を撮ってみる

先ほどインストールした「Gyazo」と「Gyazo GIF」のうちの「Gyazo GIF」のほうを立ちあげます。すると、画面にオーバーレイがかかって、カーソルが「+」になります。

キャプチャ動画を撮りたい箇所でマウスやトラックボードのボタンを押し、押した状態をキープしたままカーソルを引っ張って囲い、ボタンを離します。

キャプチャ動画を撮りたい箇所 image md

ボタンを話すと録画が始まりますので、画面を操作して動かします。ちゃんとマウスのカーソルも録画されます。最長7秒間録画することができます。録画が始まると3つのボタンと横棒が表示されるので、それらの操作方法も載せておきます。

Gyazo GIFの操作方法 image md

録画が完了して、キャプチャ動画が Gyazo のサーバにアップロードされると、

Gyazo GIF アップロード完了 image md

こういうページがブラウザで表示されます。ちゃんと動画が撮れました。

キャプチャ動画を GitHub Issues に貼り付ける

このページのキャプチャ動画の上で右クリックをし、「名前を付けて画像を保存」を選択します(ブラウザはChrome)。一旦画像をMacに保存します。

右クリック image md

保存をしたら、GitHub Issues のテキストエリアにドラッグ&ドロップ(画像ファイルの上でマウスやトラックボードのボタンを押し、押した状態をキープしたまま GitHub Issues のテキストエリアの上に持って行って指を離す)。

GitHub Issues のテキストエリアにドラッグ&ドロップ image md

画像のアップロードが始まって、しばらく待つとアップロードが完了します。動画はGIFアニメなので、拡張子が .gif ならOK。

Upload中 image md

アップロードが完了したら GitHub Issues のテキストエリアの上にある、「Write」、「Preview」のタブの「Preview」をクリックしてプレビューを見てみます。

タブを切り替え image md

動画によっては表示されるのに時間がかかるときがありますが、少し待ってちゃんと動画が貼り付けられてるのが確認できたら動画貼り付け完了。

プレビューの確認 image md

特殊まんが-前衛の-道
特殊まんが-前衛の-道
posted with amazlet at 16.07.15
根本 敬
東京キララ社
売り上げランキング: 507,282
comments powered by Disqus