札幌本社 当番表を考える！
2016-12-08 勉強会
こんにちは。大瀬です。
僕ももう入社して5ヶ月目に突入いたしました。
時がたつのは早いですね！
さて、今回僕が着目したのは、
毎朝出社した最初の人がまわす「朝の当番表」です。
朝みる度に、今日はもう回したのかな？というか昨日何の当番だっけ？？？
なんて一瞬考えてしまいます。週明けに見るともう金曜日に何の当番だったか忘れてしまっています。
そんな当番表を便利にできないかを考えました！
僕ももう入社して5ヶ月目に突入いたしました。
時がたつのは早いですね！
さて、今回僕が着目したのは、
毎朝出社した最初の人がまわす「朝の当番表」です。
朝みる度に、今日はもう回したのかな？というか昨日何の当番だっけ？？？
なんて一瞬考えてしまいます。週明けに見るともう金曜日に何の当番だったか忘れてしまっています。
そんな当番表を便利にできないかを考えました！
改善点
直したら良くなる部分などを上げてみました。
1.紙質やサイズ
丈夫な紙や素材など使用し、サイズも大きくしたりして作り替える？
デザイン一新してはどうか？もっと見やすく、…と思ったのですが、いや十分見やすい。
…考えて5分もしないうちに、んーたぶんそういうことではない…と思い、
考えるのをやめました。
デザイン一新してはどうか？もっと見やすく、…と思ったのですが、いや十分見やすい。
…考えて5分もしないうちに、んーたぶんそういうことではない…と思い、
考えるのをやめました。
2.毎日手動でまわさなければならない
これが自動化すれば、まわし忘れは完全になくなります！
3.手作りであること
一番大変に感じたのはこの表の作り直しです。
人数に合わせて外側の円も数を合わせないとだめですから、全て作り直しです。
頻繁に人数が減ったり増えたりするわけではないですが、
近くでは、内定者の方が来年はこのルーレットに追加されるかもしれません。
手作りなのでやり直しは大変ですよね！
人数に合わせて外側の円も数を合わせないとだめですから、全て作り直しです。
頻繁に人数が減ったり増えたりするわけではないですが、
近くでは、内定者の方が来年はこのルーレットに追加されるかもしれません。
手作りなのでやり直しは大変ですよね！
もうこれは自動化しかありません！
デザイン
…ということで、どうすればいいのかと考えはじめました。
まず必要なことは、大きく2つです！
まず必要なことは、大きく2つです！
●毎日自動でルーレットが切り替わる！
●人数の増減で作り直すという手間を減らす！
これです！
順番が自動で切り替われば、回し忘れることもなくなります！
この2つがクリアできれば完成ですね。
しかし機械は作れません。
どうやって作ったらいいんですか、そんな便利なもの…
しかし！Web上でならなんとかなるのでは！と思い早速制作に取りかかりました。
まずはじめに、
順番が自動で切り替われば、回し忘れることもなくなります！
この2つがクリアできれば完成ですね。
しかし機械は作れません。
どうやって作ったらいいんですか、そんな便利なもの…
しかし！Web上でならなんとかなるのでは！と思い早速制作に取りかかりました。
まずはじめに、
当番表ルーレットの形
今の現状と同じデザインでWEB上に再現出来ればと思ったのですが、
それは非常に難しいと思いました。
画像を使用すれば可能ですが、人数の変更などで分割数が変わる場合は再度、
作成が必要となってしまいます。これでは手作業の方が早いかもしれません…。
表組みで良い方法はないか？など考え、ルーレットの形でまず悩みました。
いろいろ調べ、人数が増えたりしても対応できるんじゃないか？という事で、
形は上の図のようにしようと決めました。
それは非常に難しいと思いました。
画像を使用すれば可能ですが、人数の変更などで分割数が変わる場合は再度、
作成が必要となってしまいます。これでは手作業の方が早いかもしれません…。
表組みで良い方法はないか？など考え、ルーレットの形でまず悩みました。
いろいろ調べ、人数が増えたりしても対応できるんじゃないか？という事で、
形は上の図のようにしようと決めました。
そして更にまた、外側に一回り大きな円を同じ数配置します。内側の円には「社員名」、外側の円には「当番の内容」がはいります。
1日1人ずつ時計回りに進みます。
1日1人ずつ時計回りに進みます。
アニメーションのプログラムを作成する
さあ形が決まったところで、ここからが大変でした。
jQueryで調べれば簡単だろうと思っていました……が、
思い描いていた小さな円を丸に沿って整列させるということが全然難しくて初っ端から躓いてしまいました…。
jQueryで調べれば簡単だろうと思っていました……が、
思い描いていた小さな円を丸に沿って整列させるということが全然難しくて初っ端から躓いてしまいました…。
ラジアンって何？
円周を回るようなアニメーションを実現させるには「ラジアン」という角度を求める必要があって。円を移動させるには必要不可欠なものらしいです！
---------
↓ラジアントは？？
概要（ウィキペディアより）
日本の計量法体系では、ラジアンは「円の半径に等しい長さの弧の中心に対する角度」と定義されている[1]。1ラジアンは度数法では (180/π)° で、およそ 57.29578° に相当する。180° は弧度法においては π rad であり、360° は 2π rad である。
---------
だ…そうです！（全然よくわかっていません！）
しかし取り敢えず、いろいろ参考サイトをいろいろ見て回り、なんとか希望の動作をさせることが出来ました。
---------
↓ラジアントは？？
概要（ウィキペディアより）
日本の計量法体系では、ラジアンは「円の半径に等しい長さの弧の中心に対する角度」と定義されている[1]。1ラジアンは度数法では (180/π)° で、およそ 57.29578° に相当する。180° は弧度法においては π rad であり、360° は 2π rad である。
---------
だ…そうです！（全然よくわかっていません！）
しかし取り敢えず、いろいろ参考サイトをいろいろ見て回り、なんとか希望の動作をさせることが出来ました。
一応完成！
デモ1
http://www.kstr.info/demo1612/test1/
http://www.kstr.info/demo1612/test1/
しかし！問題あり！
取り敢えず指定した時間毎に円の周りをぐるぐる回る動きができたので、CSSでスタイルを調整したりしました！
日付や時間なども表示して見た目はそれらしく仕上げました！…がまだ問題がありました〜。
動作はしますが、リロードすると全部最初の位置に戻ってしまいます…。
動かすことばかり考えていてそういったことを考えていませんでした。
当たり前ですよね…ただアニメーションさせているだけですから。
ここから動作後の状態を保持させるべくいろいろネットで情報を漁りました。
日付や時間なども表示して見た目はそれらしく仕上げました！…がまだ問題がありました〜。
動作はしますが、リロードすると全部最初の位置に戻ってしまいます…。
動かすことばかり考えていてそういったことを考えていませんでした。
当たり前ですよね…ただアニメーションさせているだけですから。
ここから動作後の状態を保持させるべくいろいろネットで情報を漁りました。
完成！
ファイルの構成
動作後の位置を維持させるために、一度動作する毎にカウントさせそのカウント数を外部ファイル「count.txt」に保存し、その後jQueryで「count.txt」の値を取得することで、動作した回数を取得することが出来たので、「動作回数分☓一回の動作で移動する円周の値」をリロード時の円の角度を指定する値にしてあげると成功しました。何言ってるか自分でもわからなくなってきました…。
デモ2
http://www.kstr.info/demo1612/test2/
デモ2
http://www.kstr.info/demo1612/test2/
その後
CSSを3つほど切り替えられるようにもしました。
デモ3
http://www.kstr.info/demo1612/
デモ3
http://www.kstr.info/demo1612/