【BiTT】俺のクローン作るしかなくね!?
【BiTT】俺のクローン作るしかなくね!?
2020.09.22

スプレッドシートで提案書のスケジュール描画を自動化するツールを作ってみた【サクッと10分でできる!】

イナッチ

こんにちは、Webディレクターのイナッチです。

ある日、いつもどおり提案書を作っていたところ、とある真理に気づきました。

「スライド上でスケジュール描くの、めんどくさい……」

思い立ったが吉日ということで、その日のうちにこの課題を解決するツールを作ることにしました。スケジュール描画作業の中で「もっともめんどくさいところ」だけに焦点を絞り、1時間で完成しました。

今回はそちらをご紹介します。

課題の整理

そもそもLIGではプロジェクト管理にAsanaという神ツールを使用しているため、ひとたびプロジェクトがスタートしてしまえば、スケジュール管理の作業に悩むことはありません。

今回の課題は、提案の段階で提案書上に【大まかなスケジュール】を図示する際にありました。

具体的には上のような図です。これを描画するにあたっての便利なツールは導入できておらず、Googleスライドの図形ツールで作成しています。

解決すべき課題

解決すべき課題は2点ありました。

課題1:プロジェクトによって期間を変更するのがめんどくさい

毎回イチからスケジュールを描画するのは大変なので、社内で共有しているひな形をカスタマイズして描画しています。ひな形は下図のとおり。

問題はこの【縦線】【年】【月】の編集です。

プロジェクトの期間はさまざまなので、ほぼ毎回案件に最適化する必要があります。線を増やしたり、幅を調整したり、1箇所ずつ年月を書き換えたりしなければなりません。

私はずぼらなので、この程度の工程がとにかくめんどくさいと思いました。

課題2:1ヶ月は正確には4週間ではない

もう1つの課題は「週の数を正確に把握したい」というものでした。

もとのひな形では、1ヶ月をおおまかに4分割していますが、実際のカレンダーとにらめっこっすると、ほとんどの月は正確には4週間ではありません(4週間なのは非うるう年の2月だけ)。

何ヶ月もかかる長期プロジェクトであれば、概算スケジュール段階でそこまで週の数を気にすることも少ないのですが、2〜3ヶ月の短期案件となると、週の数は正直気になります。

自動化ついでにこの問題も解決することにしました。

設計

設計というほどのことでもないのですが、作り方をどのように考えたかをご紹介します。

機能概要(インプット&アウトプット)

かつて私に設計を教えてくれた偉大な某先輩によると、ソフトウェアのあらゆる機能は「インプット(もしくはトリガー)」と「アウトプット」で整理できるらしいです。

ということで設計は以下のとおり。

インプット(=ユーザーが設定する情報)

  • 開始日(yyyymmdd)
  • 終了日(yyyymmdd)

アウトプット(=描画されるもの)

  • 年、月、日
  • 1週間おきの罫線

なにで作るか

やはりWeb屋としてはプログラミングをしたいところです。JavaScriptで作れそう〜! ですよね。

しかし私はディレクターであり、プログラミングは真似事しかしたことがありません。なので早々にあきらめ、スプレッドシートの関数を活用することにしました。人生はあきらめが肝心。

使い方

まずは完成品をごらんください。

ずぼらマイルストーン

※本ファイルは閲覧のみです。
メニューバーの「ファイル」>「コピーを作成」や、ダウンロードするなど、お手元に複製がある状態でご利用ください。

日付を入力すると、【年】【月】【週初の日付】などが自動的にスケジュール表に入力されます。

簡単に使い方をご紹介します。

1. 開始日を入力する(ダブルクリック→カレンダー選択が便利)

2. カレンダーの幅をお好みに調整する

3. お好みの範囲を選択してコピーする

4. スライドに貼り付ける

※ 貼り付ける際にスプレッドシートにリンクするかを訊かれますが、「リンクしないで貼り付け」を選択してください。

作り方

ここからはツールの作り方をご紹介します。サクッと10分ほどあればできるかと思います!

1. 入力シートに開始日の入力欄を作る

「入力」という名前のシートを作り、開始日・終了日の入力欄を作ります。

※ あとで気づいたんですが終了日は別になくても良かったです。

 

日付をダブルクリックするとこんな感じで選択できて便利です。

 

ちなみに日付表示は【表示形式>数字>表示形式の詳細設定】から上図のように設定しています。個人的にこの表記がいちばん日本人フレンドリーな気がしています。

2. 出力シートにシートに開始日を読み込む

入力欄があるシートに描画するとレイアウトが難しいので、別途「出力」というシートを作ります。セルB1に、1で作った「入力」シートの開始日を読み込みます。

3. 開始日から日付を7日ずつ足していく

2.で読み込んだ開始日から、右に向かって7日ずつ日付を足していきます。セルC1に「=B1+7」と入れて、ひたすら右にコピーします。

=B1+7

4. 開始日の年を出力する

開始日から年を取り出します。セルB4に「=YEAR(B1)&”年”」と書くだけです。

=YEAR(B1)&"年"

5. 開始日の月を出力する

開始日から月を取り出します。セルB5に「=MONTH(B1)&”月”」と書くだけです。

=MONTH(B1)&"月"

6. 開始日の日を出力する

開始日から日を取り出します。セルB5に「=DAY(B1)&”日”」と書くだけです。

=DAY(B1)&"日"

7. 右側に増やしていく

4~6の数式を右側にコピーしていきます。

するとかなりうるさい感じの見た目になります。そのため、年と月に関しては、当該日付と一つ前の日付の値を比較して、同じときは空欄にする記述を加えました。

=IFS(year(B1)=year(C1),"",year(B1)<>year(C1),YEAR(C1)&"年")
=IFS(month(B1)=month(C1),"",month(B1)<>month(C1),month(C1)&"月")

これで年や月が変わったときだけ表示されるようになります。

8. 罫線を追加して完成!

6行目以降のセルに適当な長さの縦線を引けば完成です。

ただし、もともと表示されている薄い罫線があると見づらかったので、3行目以降の全体に白い罫線を引いたあと、グレーの縦線を引きました。

あとはお好みでスタイル調整をして、完成!!

ずぼらマイルストーン

まとめ

今回のツールを社内のディレクター陣に共有したら、喜んでもらえて嬉しかったです。

個人的には、YEAR、MONTH、DAYという関数ははじめて使ったのでおもしろかったです。関数で日付表記を操作する技を身につけると、エクセルやスプレッドシートでいろんな管理表を作るときに便利だなと思います。

本当はやっぱりJavaScriptでWebアプリ化して、画像がダウンロードされるような作りだと、もっとシンプルでかっこいいんですが。

どなたか作ってください。お待ちしております!!!!

(ちなみにツールは簡単に作れましたが、この記事を書くのはめんどくさかったです。)