2016.10.12

TechDojo第8回を開催しました

2016年9月26日(月)に社内の大人気企画、「TechDojo」が開催されました。

9月は2回目の開催です。

TechDojoとは・・・・?ぜひ過去のブログをご覧ください!

 

前回取り上げられたテーマ(HTML、CSS、JavaScript)の応用編で開かれた今回のテーマは

「Chrome拡張機能を作ろう」です!おおお!発展してます。
 

HTML、CSS、JavaScriptを活用すればChrome拡張を作れるとのことです。

まずは前回教わった、ポイントをおさらい。

  • Webサービスの画面は、HTML,CSS,JavaScript で作られている。
  • HTMLは、文章の構造を表現する。
  • CSSは、文章の体裁を整える。
  • JavaScriptは、Webページに様々な動きをつける。

 
(筆者の我妻は前回参加せずに臨んだため、エンジニアさんのお世話になりっぱなしでした。

そんなポンコツにも優しくレクチャーしてくれるSansanメンバー!涙)

DSC 0011 thumb 500xauto 11172 - TechDojo第8回を開催しました

 
そしてChrome拡張って何ができるの??という概要について。
主にWebページのUIを自分好みに変えたり、操作時の挙動を変えたり、機能を追加したりできるそうです。

 
では実際に作ってみましょう、ということで、まずは必要なファイルをダウンロード。

参加メンバーはすでにわくわく。

 
エンジニアさんの指示のとおりに操作を進めていくと。。。

本当にHTML、CSS、JavaScriptといくつかの設定ファイルだけで拡張機能ができること体感できました!

弊社の名刺アプリ「Eight」の画面のヘッドバーの色を変えてみたりと、自分の手で拡張機能を作ることができました。

(社員目線では違和感満載でしたw)

さらに、難易度は増していき、社内SNSとして使っているFacebook社のWorkplaceの画面を

自分好みにカスタマイズしようという課題も。
 

デベロッパーコンソールという、通常エンジニアが利用するツールを駆使しながら、
サイドバーを消してみたり、ヘッドバーの色を変えてみたりと、日常業務でさっそく活用できる

ノウハウを教わり、参加者はテンション上がっておりました。
 

cfa2571f7f859e6e4da6edb6b12e21883c222179 thumb 500xauto 11170 - TechDojo第8回を開催しました
 

メンバーからの声はこの通り。満足度が高いです!

  • 本業の仕事があるなか、いつも丁寧に教えていただきありがとうございます!楽しく学べてます!
  • 毎回レベルが上がっているので、苦しみつつも楽しませていただいてます。
  • Facebookのような日常的に使っているサービスを自分自身であんなに簡単に設計・変更できたことが衝撃でした。
  • 世の中のサービス=パッケージ化されているもの=修正不可という概念が払拭されました。
  • 手取り足取り教えていただいたおかげで、開発部の方々がいつもどんなことをやっているのか、ちょっと端緒に触れてとても感動しました。ありがとうございました。

またレポートいたします!