eZ Publish勉強会10月〜Wysiwygエディター〜

36
eZ Publish 勉強会~ 10 月~ オンラインエディター

description

eZ PublishのWysiwygエディターの紹介

Transcript of eZ Publish勉強会10月〜Wysiwygエディター〜

Page 1: eZ Publish勉強会10月〜Wysiwygエディター〜

eZ Publish 勉強会~ 10 月~

オンラインエディター

Page 2: eZ Publish勉強会10月〜Wysiwygエディター〜

ご挨拶

● サニエ エリック● twitter/identica : @ericsagnes● サイト http://clina.jp/

Page 3: eZ Publish勉強会10月〜Wysiwygエディター〜

eZ Publish CE 2012.9

● eZ Publish 5 系の最初バージョン● ほぼ β

● Symfony 2 ベース● twig テンプレートエンジン

Page 4: eZ Publish勉強会10月〜Wysiwygエディター〜

GPL ライセンスについて

Page 5: eZ Publish勉強会10月〜Wysiwygエディター〜

GPLv3

● ソフトウェアを頒布 (convey) する者にソースの公開義務があります

● ネットワーク上でプログラムとやり取りをするのは頒布 (convey) になりません

● GPLv3 のソフトをベースにし、ウェブサービスを作ってもソースの公開義務はソースを渡す者( NDA 可能)

Page 6: eZ Publish勉強会10月〜Wysiwygエディター〜

AGPLv3

● ソフトウェアを頒布とソフトウェアとやり取りする者にソースの公開義務があります

● ネットワーク上でプログラムとやり取りをするも含まれます

● AGPLv3 のソフトをベースにし、ウェブサービスを作った場合にソースを公開する必要があります( NDA 不可能)

Page 7: eZ Publish勉強会10月〜Wysiwygエディター〜

GPLv2

● ソフトウェアを頒布 (distribution) する者にソースの公開義務があります

● ただし「頒布」はライセンス内で定義されてなくて、地域のコピーライツ法で解釈されるようになっています

● 一般の GPLv2 ソフトウェアをネットワーク上でやり取りするのは頒布と扱いません

● でもグレーの範囲。。。

Page 8: eZ Publish勉強会10月〜Wysiwygエディター〜

eZ Publish の場合

● GPLv2 であります● 先月に eZ Systems 全世界のコミュニティパートナーとビジネスにライセンスについて郵送メールが送られました

● コミュニティが反発し、先週の eZ Unconf でかなり話題になったよう

● 10 月末に eZ Systems CEO が来日して、日本でライセンス方針の話をする予定

Page 9: eZ Publish勉強会10月〜Wysiwygエディター〜

eZ Publish の場合 ­  リンク

● http://share.ez.no/forums/general/share­its­the­law● http://share.ez.no/blogs/ez/future­plans­and­direction­of­e

z

Page 10: eZ Publish勉強会10月〜Wysiwygエディター〜

オンラインエディター

Page 11: eZ Publish勉強会10月〜Wysiwygエディター〜

オンラインエディター

● 二つあります● コンテンツのエディター (ezoe)● 画像のエディター (ezie)

Page 12: eZ Publish勉強会10月〜Wysiwygエディター〜

コンテンツエディター

Page 13: eZ Publish勉強会10月〜Wysiwygエディター〜

コンテンツエディター

● TinyMCE ベース● 文字の編集、スタイリングはもちろん● CMS に画像を登録● CMS のオブジェクトを利用● カスタムタグで拡張● タグ毎にテンプレートをカスタマイズできる

Page 14: eZ Publish勉強会10月〜Wysiwygエディター〜

コンテンツエディター

● TinyMCE をかなりカスタマイズしています● データは HTML ではなく、 XML 形式( eZ 

XML )で保存されます● そこで

Page 15: eZ Publish勉強会10月〜Wysiwygエディター〜

CMS の考え方

● CMS は名前の通りにコンテンツ管理システムです

● 同じコンテンツを複数なチャンネルで提供するために存在するソフトウェア

● ウェブ標準でも、 MVC でもデータと表示はわかれています

● データと表示をわけるこそは CMS の役目

Page 16: eZ Publish勉強会10月〜Wysiwygエディター〜

CMS の考え方

● eZ Publish はそれに従い、オンラインエディターではコンテンツの構造を保存する

● そのため、標準では ezoe で文字の色の定義や大きさを定義できません

● 表示系の情報は ezoe でクラスを利用し、テンプレートや CSS でそのクラスの元に好きな見た目にする

Page 17: eZ Publish勉強会10月〜Wysiwygエディター〜

CMS の考え方

● そうすれば● デザイン変更● チャンネル追加

● はとても楽になります

Page 18: eZ Publish勉強会10月〜Wysiwygエディター〜

編集インターフェイス

Page 19: eZ Publish勉強会10月〜Wysiwygエディター〜

DOM パス

Page 20: eZ Publish勉強会10月〜Wysiwygエディター〜

タグ属性の編集

● DOM パスでタグ名にクリックすると属性編集画面が表示されます

Page 21: eZ Publish勉強会10月〜Wysiwygエディター〜

コンテンツの挿入

● CMS 内のコンテンツや画像を挿入できます● コンテンツの場合は表示モードを選択できます● 画像の場合はイメージサイズを選択できます● ezoe 内で表示に使うテンプレートも標準オーバーライド機能でカスタマイズできます

● 利用されるテンプレートは● content/view/ 表示モード .tpl

Page 22: eZ Publish勉強会10月〜Wysiwygエディター〜

デモ

Page 23: eZ Publish勉強会10月〜Wysiwygエディター〜

カスタマイズ

● 関係する設定ファイル● content.ini  タグに関する設定● ezoe.ini  エディター全体の設定(スキン、ボタンなど)

● ezoe_attributes.ini  タグ属性の細かい設定● override.ini ezoe でタグの表示方法● (ezxml.ini eZXML 関係の設定 )

Page 24: eZ Publish勉強会10月〜Wysiwygエディター〜

タグにクラスを追加する

● クラスは content.ini で追加できます● 段落 (p タグ ) にクラスを追加する場合

[paragraph]AvailableClasses[]=product_descriptionClassDescription[product_description]= 商品概要

● 追加したクラスは自動的に表示の時にタグのclass 属性に追加されます(標準タグの場合)

Page 25: eZ Publish勉強会10月〜Wysiwygエディター〜

タグに属性を追加する

● 属性は content.ini で追加できます● 段落 (p タグ ) に属性を追加する場合

[paragraph]CustomAttributes[]=product_typeCustomAttributesDefaults[product_type]=CD

● product_type 属性はテキストインプットで追加されます

● 追加された属性はタグテンプレートで頭に $ を付けて利用できます ($product_type)

Page 26: eZ Publish勉強会10月〜Wysiwygエディター〜

タグに属性を追加する・その2● ezoe_attributes.ini で属性のタイプを設定できます、利用できるタイプは :● text● int / number● email● select● hidden● color● html_size / csssize / csssize4 / cssborder● checkbox● link

Page 27: eZ Publish勉強会10月〜Wysiwygエディター〜

タグに属性を追加する・その3

● 属性のカスタマイズは ezoe_attributes.ini でできます● [CustomAttribute_paragraph_product_type]

Name= プロダクトタイプType=selectSelection[]Selection[cd]=CDSelection[keyboard]= キーボード

● タイプによって利用できる設定は変わります● ドキュメンテーションは

extension/ezoe/settings/ezoe_attributes.ini で確認できます

Page 28: eZ Publish勉強会10月〜Wysiwygエディター〜

タグの表示をカスタマイズ

● 各タグはテンプレートで表示されます● 他のテンプレートと同様に override.ini でオーバーライドを指定できる

● テンプレートのパスは● content/datatype/view/ezxmltags/ タグ名 .tpl

● オーバーライドキーは● class_identifier  クラス名● attribute_identifier  クラス属性名

Page 29: eZ Publish勉強会10月〜Wysiwygエディター〜

タグの追加

● タグの追加は content.ini でできます[CustomTagSettings]AvailableCustomTags[]=product_description

● 属性の追加、表示のカスタマイズは標準タグと同様にできます

Page 30: eZ Publish勉強会10月〜Wysiwygエディター〜

ezoe で HTML を追加できる設定

● リテラルテキストカスタムタグに html クラスを追加[literal]AvailableClasses[]=html

● リテラルタグに html クラスを利用すれば、中身は HTMLとして表示されます

● ただし、中身は確認されないため、表示が壊れる可能性が高い

● 画像、サイト内へのリンクなどは手動で管理が必要

Page 31: eZ Publish勉強会10月〜Wysiwygエディター〜

イメージエディター

Page 32: eZ Publish勉強会10月〜Wysiwygエディター〜

イメージエディター

● 簡単な画像編集はできます● イメージ属性に付く● ezoe で挿入したイメージも対応● jqueryui ベース

Page 33: eZ Publish勉強会10月〜Wysiwygエディター〜

イメージエディター

Page 34: eZ Publish勉強会10月〜Wysiwygエディター〜

機能

● 反転 /  鏡像 /  回転 /  切り取り● 透かし● コントラスト /  明度 の調整● エフェクト

● モザイク● 白黒● セピア

Page 35: eZ Publish勉強会10月〜Wysiwygエディター〜

透かしの追加

● image.ini で行う● [eZIE]

watermarks[]=my_logo.png

● ファイルはデザインの images/watermarks に入ります

Page 36: eZ Publish勉強会10月〜Wysiwygエディター〜

質問タイム