あったらいいな！朝礼アプリ
2018-03-30 勉強会
雪も溶け外もだんだん暖かくなってきました！
みなさんこんにちわ。
インターパーク ソリューション営業部の大瀬です。
前回と同じく今回も2人チームでの作業となりました。
僕は、システム部の斉藤さんとタッグを組むことになりました。
斉藤さんの得意分野はアプリ開発！
これはアプリを作る他はないですよね！
という事で、今回はアプリを作ってみました。
その名も…「朝礼アプリ」…？…です！
これ一体何かと申しますと、ここ株式会社インターパークでは、毎朝必ず朝礼をします。
内容は、まず挨拶から始まり、会社の経営理念を全員で唱和したり、本を読み合わせて感想を述べたり…などなど、色々な事をします。
ですが、入社したての時期はなかなか進行を覚えられず、焦ってしまう場面もありました。
新入社員の方もはじめはきっと同じ気持ちじゃないか？何か便利なものを作れないかと思い、
今回の朝礼アプリを作ることになりました。
編成は以下の通りです。
■デザイン・HTML：大瀬 ■プログラミング：斉藤
みなさんこんにちわ。
インターパーク ソリューション営業部の大瀬です。
前回と同じく今回も2人チームでの作業となりました。
僕は、システム部の斉藤さんとタッグを組むことになりました。
斉藤さんの得意分野はアプリ開発！
これはアプリを作る他はないですよね！
という事で、今回はアプリを作ってみました。
その名も…「朝礼アプリ」…？…です！
これ一体何かと申しますと、ここ株式会社インターパークでは、毎朝必ず朝礼をします。
内容は、まず挨拶から始まり、会社の経営理念を全員で唱和したり、本を読み合わせて感想を述べたり…などなど、色々な事をします。
ですが、入社したての時期はなかなか進行を覚えられず、焦ってしまう場面もありました。
新入社員の方もはじめはきっと同じ気持ちじゃないか？何か便利なものを作れないかと思い、
今回の朝礼アプリを作ることになりました。
編成は以下の通りです。
■デザイン・HTML：大瀬 ■プログラミング：斉藤
まず、内容と機能を考える
早速、どのようなページと機能が必要なのか考え、以下のようにまとめました。
1.目次ページ
進行が一目で分かるよう、進行順（上→下）の一覧になっており、
ページ下部の項目アイコンをタップすることで該当のページへ移動します。
2.経営理念の唱和
経営理念（3つあります）を画面に表示
3.行動規範の活動宣言
インターパークの社員として日々どのように行動すべきか。
大きく分けて10項目の行動規範を画面に表示。
4.本の読み合わせ
毎朝決まった本を担当の社員が読み上げます（担当は毎日ローテーションします）。
画面に本のPDFで表示しスライドでページ送りができるようにします。
5.今日の予定
今日一日の予定を一人ひとり発表するので、
自分のGoogleカレンダーを表示します。（Googleにログインが必要）
6.最近の一言
最近の気になった出来事などを発表します。
こちらは特に機能はありません。
7.連絡事項
本日の連絡事項がある方が発表しますが、
こちらは特に機能はありません。
8.ありがとうの発表
前日にどんな方にありがとうを言われた・言ったかを発表します。
ルールがきちんとあり、司会の右隣の社員から一人飛ばしに「言われたありがとう」を、
一周りしたら、次にその間の社員が順番に「自分からのありがとう」を発表していきます。
そして、司会の左隣の社員は「言われたありがとう」の内容をメモします。
メモは記録として毎日データに残すのでしっかり取らなくてはいけません。
言われたありがとう発表者をリストから選択し、それぞれメモできるような機能を実装。
9.本日の当番
毎朝、出社したらまず決まった当番をします。（毎日ローテーションします）
当番表はルーレット状になっており朝一番に来た社員が一マス分回すという決まりになっています。
アプリでは毎日自動でそれぞれの社員の当番の内容を画面に表示するようにしました。
今回の中では一番複雑な機能になりました。
1.目次ページ
進行が一目で分かるよう、進行順（上→下）の一覧になっており、
ページ下部の項目アイコンをタップすることで該当のページへ移動します。
2.経営理念の唱和
経営理念（3つあります）を画面に表示
3.行動規範の活動宣言
インターパークの社員として日々どのように行動すべきか。
大きく分けて10項目の行動規範を画面に表示。
4.本の読み合わせ
毎朝決まった本を担当の社員が読み上げます（担当は毎日ローテーションします）。
画面に本のPDFで表示しスライドでページ送りができるようにします。
5.今日の予定
今日一日の予定を一人ひとり発表するので、
自分のGoogleカレンダーを表示します。（Googleにログインが必要）
6.最近の一言
最近の気になった出来事などを発表します。
こちらは特に機能はありません。
7.連絡事項
本日の連絡事項がある方が発表しますが、
こちらは特に機能はありません。
8.ありがとうの発表
前日にどんな方にありがとうを言われた・言ったかを発表します。
ルールがきちんとあり、司会の右隣の社員から一人飛ばしに「言われたありがとう」を、
一周りしたら、次にその間の社員が順番に「自分からのありがとう」を発表していきます。
そして、司会の左隣の社員は「言われたありがとう」の内容をメモします。
メモは記録として毎日データに残すのでしっかり取らなくてはいけません。
言われたありがとう発表者をリストから選択し、それぞれメモできるような機能を実装。
9.本日の当番
毎朝、出社したらまず決まった当番をします。（毎日ローテーションします）
当番表はルーレット状になっており朝一番に来た社員が一マス分回すという決まりになっています。
アプリでは毎日自動でそれぞれの社員の当番の内容を画面に表示するようにしました。
今回の中では一番複雑な機能になりました。
デザイン作成
◎ちょっと小さいですが、アプリ作成前デザインです。
HTMLコーディング
◎アプリに組み込む前に一度HTMLで作成しました。
※実際のアプリ画面とは異なる点もあります。
→朝会進行
→経営理念
→行動規範
→最近の一言
→ありがとうの発表
→本日の当番
と、ここまでがアプリ開発プログラミングの前段階です。
※実際のアプリ画面とは異なる点もあります。
→朝会進行
→経営理念
→行動規範
→最近の一言
→ありがとうの発表
→本日の当番
と、ここまでがアプリ開発プログラミングの前段階です。
アプリ開発
ここからはシステム部の斉藤が担当します。
さて、大瀬さんに作成していただいた画面イメージを元にアプリの開発です。
私自身が iPhone を所有しているため、iOS アプリとして Xcode で開発しました。
今回は、自社製品で主力のWebアプリの勉強も兼ねたいと思っていましたので、
ネイティブアプリとWebアプリのハイブリッドにしています。
さて、大瀬さんに作成していただいた画面イメージを元にアプリの開発です。
私自身が iPhone を所有しているため、iOS アプリとして Xcode で開発しました。
今回は、自社製品で主力のWebアプリの勉強も兼ねたいと思っていましたので、
ネイティブアプリとWebアプリのハイブリッドにしています。
構成
ネイティブ（Swift）では、タイトルバーとタブバーを表示し、
タブの内容によってWeb表示（WKWebView）としています。
タブの項目は朝礼の進行に合わせて、7タブ＋設定画面を用意しました。
1. 朝礼の進行 → WebView（静的なHTML）
2. 経営理念 → WebView（静的なHTML）
3. 行動規範 → WebView（静的なHTML）
4. 本の読み合わせ → Swift - PDFView
5. 今日の予定 → WebView（静的なHTML）
6. ありがとうの発表 → WebView（Webアプリ）
7. 今日の当番 → WebView（Webアプリ）社員IDによる制御あり
+ 設定画面 → Swift - UI View
タブの内容によってWeb表示（WKWebView）としています。
タブの項目は朝礼の進行に合わせて、7タブ＋設定画面を用意しました。
1. 朝礼の進行 → WebView（静的なHTML）
2. 経営理念 → WebView（静的なHTML）
3. 行動規範 → WebView（静的なHTML）
4. 本の読み合わせ → Swift - PDFView
5. 今日の予定 → WebView（静的なHTML）
6. ありがとうの発表 → WebView（Webアプリ）
7. 今日の当番 → WebView（Webアプリ）社員IDによる制御あり
+ 設定画面 → Swift - UI View
タブの実装
タブの実装は、開発当初は iOS 標準の Tab Bar で考えていたのですが、
今回 6 個のタブを表示するため、一度に表示できるタブ数の上限を超えていたことと、
タブの●の背景の透過部分の実装のしやすさを考慮して、Collection View で実装しています。
Tab Bar でしたらストーリーボード上で簡単にそれぞれのタブ画面を設計できますが、
今回は Collection View のため、タブ選択時に UI View の内容を切り替えるようにしました。
今回 6 個のタブを表示するため、一度に表示できるタブ数の上限を超えていたことと、
タブの●の背景の透過部分の実装のしやすさを考慮して、Collection View で実装しています。
Tab Bar でしたらストーリーボード上で簡単にそれぞれのタブ画面を設計できますが、
今回は Collection View のため、タブ選択時に UI View の内容を切り替えるようにしました。
主な機能
以下、主な機能です。
本の読み合わせ
朝礼では毎日 1 ページずつ本の読み合わせを行い、感想を発表してます。
現在は各々が、他の PDF 表示アプリを使用しているのですが、
朝礼アプリにもPDF 表示を組み込みました！
現在は各々が、他の PDF 表示アプリを使用しているのですが、
朝礼アプリにもPDF 表示を組み込みました！
ありがとうの発表
前日に言われたありがとうの発表です。
Web アプリでは発表する社員をチェックボックス形式で選択し、
それぞれの発表内容を入力して データベースに保存する仕組みとしました。
保存した内容は、後から内容の確認と修正が行えるようになっています。
Web アプリでは発表する社員をチェックボックス形式で選択し、
それぞれの発表内容を入力して データベースに保存する仕組みとしました。
保存した内容は、後から内容の確認と修正が行えるようになっています。
今日の当番
社員ごとに朝の当番があります。
例えば、コーヒーメーカーの準備をしたり、事務所内の掃除機をかけたりです。
まず、アプリを使用している社員を特定するために、ネイティブの設定画面からメールアドレスを入力します。
そのあと、メールアドレスを元にWebサーバーから社員番号を取得（JSON形式）し、アプリ内に保存し、
取得した社員番号をキーにデータベースの当番テーブルより、
当番の内容一覧を取得してHTMLを組み立てています。
例えば、コーヒーメーカーの準備をしたり、事務所内の掃除機をかけたりです。
まず、アプリを使用している社員を特定するために、ネイティブの設定画面からメールアドレスを入力します。
そのあと、メールアドレスを元にWebサーバーから社員番号を取得（JSON形式）し、アプリ内に保存し、
取得した社員番号をキーにデータベースの当番テーブルより、
当番の内容一覧を取得してHTMLを組み立てています。
今日の当番ということで、翌日には当番を回さなくてはなりません。
こちらはデータベースの当番テーブルの担当者IDを毎日更新するためのプログラムを用意しました。
プログラムでは、休日判定や土曜出社日の判定を行い、必要に応じて当番を更新します。
こちらはデータベースの当番テーブルの担当者IDを毎日更新するためのプログラムを用意しました。
プログラムでは、休日判定や土曜出社日の判定を行い、必要に応じて当番を更新します。
まとめ
開発したアプリは機能として複雑なものはないのですが、
役立ちそうなものを自分自身の勉強も兼ねて作 るという点では上手くったと思います。
簡単なものでも、実際に動作するものを作るのは意外と手間がかかりますし、
当初の画面イメージにある必要なものを実装できるところまでできたことは良い経験となりました。
実際に社内で運用する場合には、休日、土曜出社カレンダーの更新方法、
適切なアプリの配布方法とサーバーの用意など検討事項はありますが、
まずは社内の皆さんの反応を確認してからにしたいと思います。
役立ちそうなものを自分自身の勉強も兼ねて作 るという点では上手くったと思います。
簡単なものでも、実際に動作するものを作るのは意外と手間がかかりますし、
当初の画面イメージにある必要なものを実装できるところまでできたことは良い経験となりました。
実際に社内で運用する場合には、休日、土曜出社カレンダーの更新方法、
適切なアプリの配布方法とサーバーの用意など検討事項はありますが、
まずは社内の皆さんの反応を確認してからにしたいと思います。
アイコン画像も用意しました。