Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

自分達のサイボウズ Office を開発しよう

54,056 views

Published on

cybozu.com カンファレンス II

Published in: Technology
  • Follow the link, new dating source: ❶❶❶ http://bit.ly/2ZDZFYj ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ♥♥♥ http://bit.ly/2ZDZFYj ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ❶❶❶ http://bit.ly/33tKWiU ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ♥♥♥ http://bit.ly/33tKWiU ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

自分達のサイボウズ Office を開発しよう

  1. 1. 自分達のサイボウズ Office を開発しよう ~JavaScript によるカスタマイズ サイボウズ株式会社 畑 慎也
  2. 2.  はじめに  カスタマイズが必要な理由  カスタマイズ機能の概要  JavaScript によるカスタマイズ  カスタマイズ例の紹介  さいごに Agenda
  3. 3.  サイボウズ Office on cybozu.com の6月版で、 JavaScript ファイルの読み込みが可能となりま した。  つまり、cybozu.com のユーザー自身が、 JavaScript を使って、サイボウズ Office をカ スタマイズできるようになったということです。 はじめに
  4. 4. カスタマイズが必要な理由
  5. 5.  本来、情報システムとは  会社の業務のあり方と密接に関わります。  情報システムの良さが競争力につながります。  サイボウズ Office のカスタマイズ  情報システムの一翼を担うサイボウズ Office  自社の業務に最適となるようにカスタマイズ できればGood 情報システムとサイボウズ Office
  6. 6.  これまでも、Firefox の GreaseMonkey という拡張機能を使えば、 任意のWebページに対しカスタマイズを行なえました。  エンドユーザーが自分のブラウザ上で設定する必要があります。  つまり、システム管理者がエンドユーザーに対してスクリプト ファイルを配布する必要があります。  サイボウズ Office on cybozu.com の JavaScript 読み込み機能で は、システム管理者が設定画面上で設定すれば、全エンドユーザー にカスタマイズを適用できます。 全エンドユーザーへのカスタマイズ
  7. 7.  システム管理者にとって  システム管理者のみが設定可能  カスタマイズ(プログラミング)は楽しい!  良いカスタマイズを行うと、エンドユーザー に喜ばれる!  注意事項  「あれもして、これもして」と言われるかも しれません。 システム管理者にとって
  8. 8. カスタマイズ機能の概要
  9. 9.  システム設定(詳細)> カスタマイズ > JavaScript ファイルの設定 設定場所
  10. 10. 設定画面
  11. 11.  システム設定画面  個人設定画面  運用管理画面  カスタマイズの不具合により、設定できなく なっては大変なので  これら以外の画面はカスタマイズ可能 カスタマイズできない画面
  12. 12.  以下から適用する対象を選べます。  すべてのユーザー  システム管理者  適用しない  「システム管理者に適用」  エンドユーザーに適用する前に動作を確認するような場合  「適用しない」  読み込ませたJavaScriptファイルを削除はしないが、適用を一時 的に停止したいような場合 カスタマイズを適用する対象
  13. 13. JavaScript によるカスタマイズ
  14. 14.  前提として  HTML を理解している。  ブラウザの JavaScript を理解している。  JavaScript でコードを書いたことがある。  できれば  DOM操作を理解している。  jQuery ライブラリを使ったことがある。 話の前提
  15. 15.  DOMについて  ページ内の情報を表すDOM(Document Object Model)と呼ばれるものに JavaScript からアクセスで きます。  このDOMを操作することによってページの内容を書き 換えることができます。  例: var user = document.getElementById('user'); user.innerHTML = '<b>HATA</b>'; DOM操作によるカスタマイズ
  16. 16.  jQueryライブラリについて  DOM操作を容易にする JavaScript ライブラリ  10月版のサイボウズ Office on cybozu.com から、カ スタマイズ可能な画面では、あらかじめ読み込まれて います。  これから紹介するカスタマイズ例では jQuery を使い ます。  例: $('#user').html('<b>HATA</b>'); jQuery ライブラリについて
  17. 17. カスタマイズ例の紹介
  18. 18.  問題:  ワークフローを承認・決裁する際、却下するつもりが 誤って承認・決裁してしまう場合がある。  解決方法:  承認・決裁のボタンをクリックした後、念押しとして 確認ダイアログを表示し、キャンセルできるようにす る。 ワークフローの承認の前に確認ダイアログを表示
  19. 19. $(document).ready(function () { switch(CustomizeJS.page) { // 現在表示中のページ名 case 'WorkFlowHandle': $('input[name="Approve"]').click(function () { var caption = $(this).val(); if (caption.indexOf('決裁') >= 0) { return confirm('決裁します。よろしいですか?'); } else { return confirm('承認します。よろしいですか?'); } }); break; } }); ワークフローの承認の前に確認ダイアログを表示
  20. 20.  jQuery を使う場合 $(document).ready(function () {...}) に記述 した内容が、ページを読み込んだ後に実行されます。  CustomizeJS.page という変数に現在表示中のページ名が格納され ています。  ブラウザで「ページのソースを表示」して確認できます。 カスタマイズに際して <script> CustomizeJS = { page: 'WorkFlowHandle', ver: '1347960687' }; </script> <script src="ag.cgi/script.js?page=OfficeJSDownload&notimecard=1&ct=1&_v=1347960687">...
  21. 21.  問題:  サイボウズ Office 内へのリンクを本文やフォローに貼り付ける ことはよくあると思います。  パッケージ版のサイボウズ Office から cybozu.com に移行した 場合、移行前に掲示板やメッセージの本文やフォローに書かれた Office 内へのリンクがリンク切れとなる。  例:http://example.jp/scripts/cb8/ag.exe?...  解決方法:  http://example.jp/scripts/cb8/ag.exe で始まるURLを https://example.cybozu.com/o/ag.cgi?... に置換する。 cybozu.com 移行前の Office へのリンクを置換
  22. 22. $(document).ready(function () { $('a[href^="http://example.jp/scripts/cb8/ag.exe"]') .each(function () { this.href = this.href.replace( 'http://example.jp/scripts/cb8/ag.exe', 'https://example.cybozu.com/o/ag.cgi'); }); }); cybozu.com 移行前の Office へのリンクを置換 • $('a[href^="URL"']) で URL で始まる全てのリンクを取得します。 • .each(function () {...}) で、取得した全てのリンクに対する処 理を記述できます。 • this.href = this.href.replace() でURLを置換しています。
  23. 23.  問題:  cybozu.com ではユーザー情報にプロフィール画像を 登録できる。  しかし、掲示板やメッセージで表示されるプロフィー ル画像は小さくて見えずらい。  解決方法:  表示されているプロフィール画像(20x20)を32x32に 拡大する。 プロフィール画像を拡大
  24. 24. switch(CustomizeJS.page) { // 現在表示中のページ名 : case 'BulletinView': case 'MyFolderMessageView': $('img.profileImage[src*="20x20"]').each(function () { var src = $(this).attr('src') .replace('20x20', '32x32') .replace('Width=20', 'Width=32') .replace('Height=20', 'Height=32'); $(this).attr('src',src) .css('width', '32px').css('height', '32px'); }); break; } プロフィール画像を拡大
  25. 25.  プロフィール画像のリンクには class="profileImage" 属性がつい ているため、$('img.profileImage[src*="20x20"]') で取得できま す。  掲示板・メッセージの画面で表示されているプロフィール画像の URL  ag.cgi/20x20.png?page=UserImageDownload&notimecard =1&id=156&ct=1&v=1347517804&Width=20&Height=20 &ext=.png  画像サイズを指定している「20」を「32」に置換すれば、 32x32のプロフィール画像に置き換わります。 プロフィール画像を拡大
  26. 26.  要望:  掲示板やメッセージの本文やフォローに YouTube の 動画へのリンクがあるとき、インライン表示して、画 面遷移せずに動画を再生させたい。 YouTube の動画をインライン表示
  27. 27. switch(CustomizeJS.page) { // 現在表示中のページ名 : case 'BulletinView': case 'MyFolderMessageView': $('tt').find('a[href^="http://www.youtube.com/watch?v="],a[href^=" https://www.youtube.com/watch?v="]') .each(function () { var html = '<div><iframe width="420" height="315" src="' + htmlEscape(this.href) .replace('http://', 'https://') .replace('watch?v=', 'embed/') + '" frameborder="0" alllowfullscreen></iframe></div>'; $(this).after(html); }); break; } YouTube の動画をインライン表示
  28. 28.  $('tt') で本文やフォローの要素を取得します。  .find('a[href^="http://www.youtube.com/watch?v="], a[href^="https://www.youtube.com/watch?v="]') で YouTube へのリンクを絞り込みます。  $(this).after(html) でリンク直下に YouTube の動画 を IFRAME で埋め込みます。 YouTube の動画をインライン表示
  29. 29.  要望:  社内にある別のシステムの個人ページへのリンクを、 cybozu.com のヘッダの個人メニューに追加したい。 ヘッダの個人メニューにリンクを追加
  30. 30. var html = '<li class="yuimenuitem"><a class="yuimenuitemlabel"' + ' href="http://example.jp/user">個人情報</a></li>'; $('.vr_headerPersonalSettings').parent().after(html); ヘッダの個人メニューにリンクを追加  $('.vr_headerPersonalSettings') で「個人設定」リンクを取 得します。  .parent() で「個人設定」の親となる LI 要素を取得します。  この要素の直後に LI 要素で囲ったリンクを追加します。
  31. 31.  要望:  cybozu.com のヘッダの「メニュー」とヘッダ直下の アプリケーションメニューの内容が同じなので、「メ ニュー」の方を非表示にしたい。 ヘッダの「メニュー」を非表示
  32. 32. $('#header-menu-application').hide(); ヘッダの「メニュー」を非表示  $('#header-menu-application') で「メニュー」要素を 取得します。  .hide() を呼んで非表示にします。
  33. 33. ソースコードのシンタックスハイライト
  34. 34. カスタマイズ設定ダイアログ
  35. 35.  ブログ:コード置場 http://hatashinya.blogspot.com/ にてカスタマイズ例を公開しています。  本日紹介したコードは 10月版に対応しています。 6月版に対応させる場合、別途 jQuery を読み込 む必要があります。 さいごに

×