2016年9月26日(月)に社内の大人気企画、「TechDojo」が開催されました。
9月は2回目の開催です。
TechDojoとは・・・・? ぜひ過去の記事をご覧ください!
前回取り上げられたテーマ(HTML、CSS、JavaScript)の応用編として開かれた今回のテーマは、「Chrome拡張機能を作ろう」です!
おおお! 発展してます。
HTML、CSS、JavaScriptを活用すれば、Chrome拡張を作れるとのことです。
まずは前回教わった、ポイントをおさらい。
- Webサービスの画面は、HTML、CSS、JavaScriptで作られている。
- HTMLは、文章の構造を表現する。
- CSSは、文章の体裁を整える。
- JavaScriptは、Webページにさまざまな動きを付ける。
筆者の我妻は、前回参加せずに臨んだため、エンジニアさんのお世話になりっぱなしでした。そんなポンコツにも優しくレクチャーしてくれるSansanメンバー(涙)!
そして、「Chrome拡張って何ができるの??」という概要について。
主にWebページのUIを自分好みに変えたり、操作時の挙動を変えたり、機能を追加したりできるそうです。
「では、実際に作ってみましょう」ということで、まずは必要なファイルをダウンロード。
参加メンバーはすでにわくわく。
エンジニアさんの指示のとおりに操作を進めていくと・・・。
本当にHTML、CSS、JavaScriptといくつかの設定ファイルだけで拡張機能ができること体感できました!
Sansanの名刺アプリ「Eight」の画面のヘッドバーの色を変えてみたりと、自分の手で拡張機能を作ることができました(社員目線では違和感満載でしたw)。
さらに、難易度は増していき、社内SNSとして使っているFacebook社のWorkplaceの画面を自分好みにカスタマイズしようという課題も。
デベロッパーコンソールという、通常エンジニアが利用するツールを駆使しながら、サイドバーを消してみたり、ヘッドバーの色を変えてみたりと、日常業務でさっそく活用できるノウハウを教わり、参加者はテンション上がっておりました。
メンバーからの声は、この通り。満足度が高いです!
- 本業の仕事がある中、いつも丁寧に教えていただきありがとうございます! 楽しく学べてます!
- 毎回レベルが上がっているので、苦しみつつも楽しませていただいてます。
- Facebookのような日常的に使っているサービスを自分自身であんなに簡単に設計・変更できたことが衝撃でした。
- 世の中のサービス=パッケージ化されているもの=修正不可という概念が払拭されました。
- 手取り足取り教えていただいたおかげで、開発部の方々がいつもどんなことをやっているのか、ちょっと端緒に触れてとても感動しました。ありがとうございました。
またレポートいたします!