私自身が JavaScript や CSS を利用したライトなカスタマイズを好んでいることもあり、このブログでもそれらを利用したカスタマイズをいくつか取りあげてきました。例えば、予定表 Web パーツのカレンダー表示をコンパクトする CSS を紹介した記事などがそれに当たります。

予定表 Web パーツのカレンダー表示をコンパクトにしてみた
http://idea.tostring.jp/?p=635

これらの記事では、「コンテンツ エディター」Web パーツや「スクリプト エディター」Web パーツを利用しているため、そのままでは再利用性に乏しく、ユーザー自身が設定するためにはコードを記述する必要があります。今回は、こうした課題に対して最も簡単・単純に応える方法をご紹介します。

Web パーツをエクスポートする

Web パーツには、「エクスポート」が可能なものが存在します。「コンテンツ エディター」や「スクリプト エディター」Web パーツもエクスポートが可能な Web パーツです。この「エクスポート」を利用することで、一度設定を行った Web パーツを他のサイトやページでも簡単に再利用できるようになります。

(2017/9/13 追記)スクリプト エディター Web パーツをエクスポートするには、Web パーツの設定から詳細設定にあるエクスポート モードを「すべてのデータをエクスポート」に切り替える必要があります。

エクスポートする前に、あらかじめ Web パーツの設定を済ませておきます。特に「タイトル」や「説明」、さらには「枠の状態」等はユーザーの使い勝手にも影響するところのため、忘れずに設定しましょう。

20130813-1

設定が終わったらエクスポートです。ページ編集画面で、Web パーツ右上のメニューから、「エクスポート」をクリックするだけです。そうすると、Web パーツのタイトルと同じファイル名のファイルをダウンロードできます。

20130813-2

20130813-3

Web パーツのエクスポートは、これで終わりです。

Web パーツをインポートする

次に、再利用のために「エクスポート」した Web パーツを「インポート」します。インポートの方法は複数考えられるのですが、今回は一番簡単で、一番再利用がし易いと考えられる方法です。

「サイトの設定」から「Web デザイナー ギャラリー」-「Web パーツ」をクリックします。

20130813-4

「Web パーツ ギャラリー」が開くので、ここに先ほどエクスポートしたファイルをアップロードします。アップロードする際に、ドキュメント プロパティ編集ダイアログで「グループ」を設定しておくと、後々便利です。

20130813-5

Web パーツのインポートは、これで終わりです。

インポートした Web パーツをページに追加する

Web パーツをページに追加する手順は、いつもと同じです。Web パーツの一覧に、エクスポートした Web パーツが含まれています。また、エクスポートする前の設定などもそのまま引き継がれていることを確認できると思います。この Web パーツ選択時の「カテゴリ」が、Web パーツをアップロードした際にドキュメント プロパティとして入力した「グループ」に対応しています。

20130813-6

さいごに

「コンテンツ エディター」や「スクリプト エディター」Web パーツのエクスポートやインポートを利用することで、カスタマイズを簡単に再利用することが出来るようになります。さらには、管理者が全てのページで設定をしなくても、こうして Web パーツとして用意しておくことで、ユーザー自身でも簡単にカスタマイズを利用できるようになります。(例えば、「コンパクトなカレンダーを利用したい場合は、カレンダーと同じページに Web パーツを追加してね」とアナウンスするだけです。)

お試しください!!