developer

Chrome拡張のススメ

みなさんは普段、ブラウザに何を使っていますでしょうか。

Windowsの方であれば Internet Explorer や Microsoft Edge など、Macの方であれば Safari が初期でインストールされていますね。

しかし、そんな中
日本、しいては世界で最も利用されているブラウザは、
なんとGoogleのブラウザ Chrome なんです！！

browsershare_JP_181020.png

特に開発者の中ではChromeユーザーが多く、プログラムのデバッグやネットワークの確認でChromeの開発者ツールを駆使している印象ですね。

そんな開発者ご愛用のChromeですが、
Chrome拡張 という機能があり、この機能を利用することで自分流のChromeを作り上げることができます！

スクリーンショット 2018-11-06 15.24.15.png

こちら から拡張を検索、インストールすることができます

今回はこのChrome拡張についていろいろ紹介したいと思います！

Chrome拡張とは

その名の通り、Chromeを拡張(パワーアップ)させることができるものです。

yaruki_moeru_man.png

※ イメージ

ほとんどのものが無償で提供されていて、ほしい機能を検索してインストールすればすぐに使うことができます！

僕が利用している拡張を一部ご紹介すると、

  • ・Postman (curlをブラウザ上で実行できるツール)
  • ・Pocket拡張 (ワンクリックでPocketにリスト追加できるツール)
  • ・ColorZilla (Webページ上のカラーを取得できるツール)

などがあります。どれも便利ツールです！

※ インターネットで調べるといろいろと「おすすめ〇〇選」などの記事がたくさん出てくるので参考にすると良いですよ！

Chrome拡張を作る

実は、このChrome拡張は 自分でも一から作成 することができます！！
(↑ここが今回一番言いたいポイント！)

ブラウザ上で動くものであれば、ほとんどのものがChrome拡張でカスタマイズできます！


つまり、kintoneもChrome拡張でカスタマイズ することができます！！

Chrome拡張でkintoneカスタマイズをするメリット

なぜChrome拡張でkintoneをカスタマイズする必要があるのか。

あくまで僕個人の意見ですが、かなーり大きいメリットが、

  • ・kintoneの管理者権限がなくてもカスタマイズできる
  • ・影響範囲が自分のみ(Chrome拡張を使っている人のみ)なので安心
  • ・いろいろハックできる (非推奨なことも！？)

などあるかと思います。僕も自分で作ったMy Chrome拡張を実際に業務で使っています (-ω☆)

特に「自分だけで使うことができる」「管理者権限が必要ない」ここは大きいですね

自分だけのためのカスタマイズをちゃちゃっと試せる、それがChrome拡張なわけです！！




どうですか？

作りたくなってきましたか？



作り方については こちら で紹介しています！

Chrome拡張を作るとどううれしいのか？

で、実際に作るとどんな感じになるのかサンプルを3つほど紹介します！

① kintoneの特定のアプリを開いたときにアラートを出す

とりあえずシンプルなやつをChrome拡張で作ると、

alert.gif

わかりやすいけど、これはまだ実用的ではないですね。。

② kintoneの背景色を変える (※DOM操作です)

次はもうちょっとkintone自体をいじってみたやつです。

スクリーンショット 2018-11-06 19.24.45.png

背景が真っ黒になりました。自分だけのkintone(見た目)が作れそうです！

③ スレッドに日報のテンプレを挿入する (ガチ)

最後に、本気を出すとこんなこともできます。

DRMaker.gif

Garoon から「今日」と「明日」の予定を取得して、
見た目を整えて (←ここめっちゃ大変！)、
他の日報のフォーマットも加えて、
スレッドに挿入！！

※ 実際、この拡張は愛用しています (´･∀･`)

さいごに

みなさんも「ここ楽したいな〜」と思ったら、Chrome拡張に手を出してみるのもありですよ！
(Chromeを使っていない人はこれを機にChromeに変えてみるのも！？)

実はサイボウズ社内でも、べんつー(便利ツール)として
社員が作ったChrome拡張が広く使われていたりします！

Chrome拡張でも、kintoneのカスタマイズ部分は通常のやり方とあまり変わりません！
kintoneカスタマイズ部分は cybozu developer network にいろいろとTipsがあるのでぜひご覧ください〜

技術者向けサイト「cybozu developer network」

★メンバー登録特典★
・コミュニティに投稿やコメントしたり、Tips に質問できます。
・API のアップデート情報の通知を受け取ることができます。
・5ユーザー、1年間無償の開発者ライセンスを申し込むことができます。
・Tipsやサンプルの動きを確認できるデモサイトを利用することができます。
・HTTP Client Tool for kintoneを利用することができます。