できるdynabook...できるdynabook パソコンの画面上で見るマニュ アルです。 Windows、インターネット、 メールの基本操作について レッスン形式に紹介。
クライアントがCMSで楽に更新できるようにする一工夫
description
Transcript of クライアントがCMSで楽に更新できるようにする一工夫
![Page 1: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/1.jpg)
クライアントがCMSで楽に更新できるようにする一工夫
WordCamp Fukuoka 20112011/02/19 (sat)
よろしくー
![Page 2: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/2.jpg)
ようこそWordCamp Fukuokaへ!!
240人突破したんだってね
![Page 3: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/3.jpg)
自己紹介
名前:金内 透
所属:合同会社CGFM
blog: 我流天性 がらくた屋http://blog.cgfm.jp/garyu
@GaryutenHN: 我流
日本人だよね?
![Page 4: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/4.jpg)
みなさん、どこから来ました?
福岡県外の人いる?
![Page 5: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/5.jpg)
今、何してる人です?
web系、IT系が多いかな?学生は?
![Page 6: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/6.jpg)
Wordpress使った事ある人
そうだよねー♪
![Page 7: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/7.jpg)
サイト管理システム=CMS
(Contents Management System)
基本すぎるね
![Page 8: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/8.jpg)
今日は、皆さんのお仕事に役に立つ話を一つでも
持って帰ってもらえたらいいな。
![Page 9: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/9.jpg)
前半:JavaScriptな話後半:ドキュメントな話
![Page 10: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/10.jpg)
僕のお仕事はweb制作のディレクション&マークアップエンジニア
HTMLコーダー?
![Page 11: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/11.jpg)
こんな感じ
デザイナ 依頼主
デザイン依頼
HTMLコーディング
ヒアリング
デザイン作成
CMSカスタマイズ運営
サポート
![Page 12: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/12.jpg)
いつもこんな感じ
デザイナ 依頼主A!?
板挟みか
![Page 13: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/13.jpg)
こんな経験ないです?
![Page 14: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/14.jpg)
「CMS納品したのはいいけど、お客さんが更新すると崩れる。」
あるよねー
![Page 15: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/15.jpg)
「ちゃんと編集ルールを守ってくれない」
![Page 16: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/16.jpg)
ちょっと待って。
![Page 17: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/17.jpg)
お客さんはプロじゃない。
![Page 18: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/18.jpg)
できるだけサポートしてあげよう。
![Page 19: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/19.jpg)
どこまでお客さんを技術でサポートできるか
![Page 20: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/20.jpg)
そこで今回はJavaScript
それっておいしいの?
![Page 21: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/21.jpg)
例えばこんな時。
申請書のダウンロード
へー!
申請書のダウンロード(PDF形式 1.2MB)
Javascriptでサポート
![Page 22: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/22.jpg)
リンクをわかりやすく連絡はこちらまでメールしてください。詳細は公式サイトをご確認ください。
連絡はこちらまでメール してください。詳細は公式サイト をご確認ください。
これは便利かもね
JSでサポート
![Page 23: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/23.jpg)
JavaScriptで入力記事をサポート
ダウンロードファイルのアイコンと容量表示
外部リンクにclassとtarget=”_blank”付与
見出しのデザイン性を上げる
記事内で自動スライドショー
ちょっとまって?
![Page 24: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/24.jpg)
それってプラグインでできるんじゃないの?
何でわざわざJavaScript?
どして?
![Page 25: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/25.jpg)
一番のメリットは汎用性。他のCMSでも使い回せる。
Wordpressだけでいいじゃん
![Page 26: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/26.jpg)
CMS毎にプラグイン探したり、機能を合わせるのは結構大変
だからWordpressだけ使えばいいじゃん
![Page 27: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/27.jpg)
出力HTMLを完全に制御するにはCMSカスタマイズと
各プログラム言語の知識が絶対必要。
WordpressならPHPだね
![Page 28: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/28.jpg)
JavaScriptは知ってて損はない!特にjQueryは激しく便利!
jQueryって皆知ってる?
![Page 29: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/29.jpg)
jQueryは簡単にJSを書ける
簡単なんだ
![Page 30: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/30.jpg)
jQueryの便利なライブラリも豊富!
Wordpressのプラグインみたいなものかな
![Page 31: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/31.jpg)
ダウンロードファイルのアイコン表示
<a href=‘hoge.pdf’>申請書のダウンロード</a>
<a href=‘hoge.pdf’ class=‘LinkPdf’>申請書のダウンロード</a>
jQuery実行後
jQuery実行前
$(".Entry a[href$='.pdf']").addClass("LinkPdf");class=”Entry”内のaタグでリンク先が
拡張子PDFだったらclass=”LinkPdf”を追加する
![Page 32: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/32.jpg)
たったの一行!
$(".Entry a[href$='.pdf']").addClass("LinkPdf");
class=”Entry”内のaタグでリンク先が拡張子PDFだったら
class=”LinkPdf”を追加する
![Page 33: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/33.jpg)
後は対応拡張子増やすだけ
$("a[href$='.pdf']").addClass("LinkPdf"); //PDF
$("a[href$='.xls'], a[href$='.xlsx']").addClass("LinkXls"); //EXCEL
$("a[href$='.doc'],a[href$='.docx']").addClass("LinkDoc"); //WORD
$("a[href$='.zip']").addClass("LinkZip"); //ZIP
$("a[href$='.swf']").addClass("LinkSwf"); //SWF
増えたらややこしくない?
![Page 34: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/34.jpg)
Development Reference|JS リンクに自動でアイコンを付加する http://mashimonator.weblike.jp/blog/2009/09/js-13.html
あるんだ
![Page 35: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/35.jpg)
Development Reference|JS ファイルのサイズを自動で取得して表示する http://mashimonator.weblike.jp/blog/2009/11/js-22.html
jQueryではないのね
![Page 36: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/36.jpg)
JavaScriptで入力記事をサポート
ダウンロードファイルのアイコンと容量表示
外部リンクにclassとtarget=”_blank”付与
見出しのデザイン性を上げる
記事内で自動スライドショー
![Page 37: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/37.jpg)
見出しのデザイン性を上げる
(小ネタ)
![Page 38: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/38.jpg)
マークアップ泣かせのデザイン
別に簡単なんじゃない?
![Page 39: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/39.jpg)
![Page 40: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/40.jpg)
意外と大変
マークアップエンジニア泣かせなデザインなんだ
<h2> </h2>
</h2>
<h2><span>
</span>高さの可変を考えるとh2だけでは無理
![Page 41: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/41.jpg)
これもたったの一行!
$('.Entry h2').wrapInner('<span></span>');
class=”Entry”内のh2タグに 中身を<span></span>で囲む
![Page 42: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/42.jpg)
$('.Entry h2').wrapInner('<span></span>');jQuery
.Entry h2{ padding5px; border:1px solid #ccc;}.Entry h2 span{ display:block; padding-left:5px; border-left:5px solid #f90;}
CSS
![Page 43: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/43.jpg)
JavaScriptで入力記事をサポート
ダウンロードファイルのアイコンと容量表示
外部リンクにclassとtarget=”_blank”付与
見出しのデザイン性を上げる
記事内で自動スライドショー時間は?
![Page 44: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/44.jpg)
記事内で自動スライドショー
デモやれる?
![Page 45: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/45.jpg)
NetBeansのねこびーんだ
![Page 46: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/46.jpg)
重いサイトには向かないかもね
実際の画面でデモ
![Page 47: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/47.jpg)
これで前半(8割)終了
ふー
![Page 48: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/48.jpg)
後半はドキュメント
めんどい
![Page 49: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/49.jpg)
ドキュメント大事
大事なのはわかるんだけどねー
![Page 50: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/50.jpg)
問合せも減るし両者の引継ぎも楽。
大事なのはわかるんだけどねー
![Page 51: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/51.jpg)
CMSのマニュアル管理はCMSで
どうつくるの?
![Page 52: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/52.jpg)
ドキュメントの構成
基本編はめんどうだなー
基本操作編・新規作成・編集、削除・画像の貼り方
応用操作編そのサイトのカスタマイズした箇所、特有の機能説明
![Page 53: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/53.jpg)
ドキュメントの共通化
マルチサイトはWordpress3からの目玉機能の一つだね
基本操作編
応用操作編 応用操作編応用操作編
親サイト
子サイト
マルチサイトの活用
当然、BASIC認証でアクセス制限
![Page 54: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/54.jpg)
![Page 55: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/55.jpg)
![Page 56: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/56.jpg)
う~ん・・・やっぱりめんどくさい
みんな同じことやってない?
![Page 57: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/57.jpg)
基本操作は良質なマニュアルサイトを参照してしまおう
あ、もしかして?
![Page 58: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/58.jpg)
![Page 59: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/59.jpg)
![Page 60: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/60.jpg)
ふっとぱら!
みんなリンクしちゃっていいよ!
![Page 61: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/61.jpg)
いいね!
みんなでマニュアルを一緒に作ろうよ!
![Page 62: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/62.jpg)
大事なところだけ注力
これは楽ちん♪
基本操作編
応用操作編 応用操作編応用操作編
応用部分に注力
リンク
![Page 63: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/63.jpg)
まとめ:Javascript
Javscript は使い方によっては、お客さんをサポートできるし、サイトのフォーマットを保つ事に使える
jQueryはとても便利
どんなCMSにも使える汎用性
![Page 64: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/64.jpg)
まとめ:ドキュメント
作っておけば、後々メリットもある(スムーズな引き継ぎ、問合せ対応減少等)
CMSのドキュメントはCMSで
素敵なマニュアルサイトを有効活用
![Page 65: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/65.jpg)
最後にWordpressもいいけどBaserCMSもね!
おい!
![Page 66: クライアントがCMSで楽に更新できるようにする一工夫](https://reader036.fdocuments.net/reader036/viewer/2022062312/556603a8d8b42aa6628b4acc/html5/thumbnails/66.jpg)
ありがとうございました
懇親会で声かけてください
僕の名前も募集中♪
@Garyuten