株式会社ユーザベースの技術チームブログです。Vue.jsとFirebaseとGASとiPadで会議室表示板を作った2018-11-20Vue.jsとFirebaseとGASとiPadで会議室表示板を作ったTweetこんにちは、コーポレートエンジニアリングチームという新チーム所属のたけうち(@chimerast)です。ユーザベース社内ではレアポケモンと呼ばれています。数ヶ月前、メンバーも数百人を超え、アメリカのQuartz社がユーザベースグループに加わったりして、業務改善を主として行う管理部門付けのエンジニアチームが欲しいという話になり、新しいチームが作られました。名前はなんでも良かったのですが、世の中的に流行っているのとエンジニア採用に効きそうなので、コーポレートエンジニアリングチームという名前になっています。ITが絡めば大体担当になります。)や監査もわかり、システム開発できる情シスを目指しています。誰が使っているのか、いつからいつまで使うのかが一目見てわかるものを作りました。iPad用のシステムですが、iOSアプリではなくウェブアプリです。Calendarの会議室予約と連動します。作った経緯ユーザベース社は今年2018年7月に六本木にオフィスが引っ越しました。新オフィスで、会議室も恵比寿オフィスの時の4部屋から9部屋に倍増、会議室からの眺めもよいという非常に良い環境でテンションも上がります。そこには壁への埋め込み式のiPadが。創業期の狭い8畳ぐらいのオフィスから、数回のオフィス引越しを経て、ついに弊社オフィスにも近代化の波が押し寄せてきたのかとわくわくしたものです。そこまでは良かったものの、オフィス引越チームが選定していた会議室表示システムを入れてみたところ、iPadの画面をタッチしても反応が悪い・遅い、謎のスワイプさせるUI会議室名についている色に合わせて画面背景の色だけでも変更したいのにできない現在行っているミーティングの予定しか見れず、次に自分が使う会議室なのか分からないという状況で使いにくい。社員は会議室を探してうろうろしているし、なにより自分が会議室を使おうとしたときにイライラするという状態でした。サービスを提供している会社さんには悪いとは思いつつも、普通のiPadだしウェブアプリとして作ればそんなに時間がかからず作れるだろうと思い、強権発動して作って入れ替える事にしました。これくらいの用途であれば、ウェブアプリとして作ってもサクサク動きます。作るのもデプロイするのもiOSアプリと比べると圧倒的に楽です。一晩夜なべしたらできました。Scriptを使って作りました。細かい所は難しいものではないので、はしょります。流れとしては下記になります。Firestoreにカレンダーの追加・変更を登録するiPad上のウェブアプリからFirestoreのonSnapshot()を呼び出して、リアルタイムにFirestore上の変更を監視するGASからFirestoreへの登録にはこちらのGAS用ライブラリを使わせてもらってます。https://github.com/grahamearley/FirestoreGoogleAppsScript全体のソースコードは残念ながら現時点では公開していないです。ウェブアプリをiPadホーム画面に登録する方法Safariの共有メニューから「ホーム画面に追加」というボタンを押せば、普通のWebサイトをアプリっぽく登録できます。後述しますが、いろいろHTMLに細工をするとほぼネイティブアプリっぽく見えるようになります。ネイティブアプリっぽく見せる細かいテクニックiPadでそのままウェブアプリを表示すると、ブラウザだなーと一目見て分かってしまうので、いくつかHTMLに細工をしています。全画面つかえるようにするiOS標準の状態だと、ウェブアプリを起動すると黒い帯が表示されてしまいます。全画面にもならないです。そのままだとかっこ悪いので、下記のHTMLをHEADタグ内におまじないとして追加するといい感じになります。content="black-translucent">ドラッグ操作をキャンセルするiOSのブラウザの標準動作では、指でドラッグするとテキスト選択ができてしまいます。これができてしまうと一瞬でブラウザだとばれてしまい、見た目が悪いので、ontouchmoveのデフォルト操作を無効化します。onclickやonmousedownでも一応動くのですが、タップしても反応が悪かったり、微妙に遅れたりします。入っていたシステムでもタッチ操作の反応が悪かったので、周りのアクリル板の静電気が悪さしてるのかなと思って、帯電防止スプレーを吹きかけてみたりしたのですが直らず、結局素直にスマホ用のontouchstartを使うことで今までの微妙な動作は何だったのかと思うぐらいキビキビ動くようになりました。最近Safariのアップデートが進んで、onclickやonmousedownもタップ操作で十分違和感なく動くようになったと思い込んでいたのですが、勘違いだったようです。素直にスマホ用のイベントを使いましょう。その他iPadを使った社内システム向けテクニックホームボタンを押しても操作できないようにするiOS標準のアクセスガイド機能を使います。暗証番号を入れないとホーム画面に戻れなくなります。明るさ」から、自動ロックを「なし」に設定すればOKです。これだけだと明るさMAXにしておいても、周りの明るさによって微妙に暗くなったりします。アクセシビリティ」→「ディスプレイ調整」→「明るさの自動調整」をオフにします。その上で明るさをMAXにします。最後にコーポレートエンジニアリングチームでは、業務改善と内部統制・情報セキュリティが表裏一体だということを熱く語れる人を募集中です!また、12/4(火)に、この辺について熱く語れる人を集めて、情報交換するためのLT大会を開催します。SREチームの久保です。インフラチームの小林です。»プロフィール『経済情報で、世界を変える』をミッションに、企業・業界情報プラットフォーム「SPEEDA」やソーシャル経済ニュース「NewsPicks」、ABMを強力にサポートする「FORCAS」、スタートアップの情報収集を圧倒的効率化「entrepedia」などを提供する株式会社ユーザベースの技術チームブログです。多国通貨」をハンズオンしたら快適で楽しかったGo言語でオブジェクト指向プログラミングの基本(型編)月別アーカイブ検索@Uzabase_Techさんのツイートスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。