a-blog cms DAY in NAGOYA 2015/03 ミニセミナー
-
Upload
- -
Category
Engineering
-
view
165 -
download
2
Transcript of a-blog cms DAY in NAGOYA 2015/03 ミニセミナー
![Page 1: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/1.jpg)
a-blog cms DAY in NAGOYAミニセミナー (2015 3/20)
発表者 堀 悟大
![Page 2: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/2.jpg)
今日のゴール
• 2.2が出る前に2系の機能をおさらいしよう
![Page 3: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/3.jpg)
目次
• カスタムユニットのカスタマイズについて
• SNSログインについて
• 動的フォームのカスタマイズについて
![Page 4: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/4.jpg)
カスタムユニット
![Page 5: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/5.jpg)
カスタムユニット• カスタムユニットとは
• カスタムユニットについてのおさらい
• カスタムユニットメーカーを作ろう
• カスタムユニットについての注意事項
• 設定できない項目について
• カスタムユニットを複数用意するカスタマイズ方法
![Page 6: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/6.jpg)
カスタムユニットとは
• カスタムユニットを使えば、独自にユニットの表示内容をカスタマイズすることができます。カスタムフィールドでは、ユニットとユニットの間に挿入できませんが、カスタムユニットだと挿入することができるので表現の幅が広がります。
![Page 7: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/7.jpg)
カスタムユニットとは
![Page 8: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/8.jpg)
カスタムユニットとは
![Page 9: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/9.jpg)
カスタムユニットとは
![Page 10: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/10.jpg)
カスタムユニットについてのおさらい
表示側の設定
![Page 11: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/11.jpg)
カスタムユニットについてのおさらい
カスタムユニットのインクルード先がVer. 2.1.1.4以降とそれ以前では変わるので要注意
![Page 12: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/12.jpg)
カスタムユニットについてのおさらいVer. 2.1.1.4未満
/system/include/unit.htmlの中身
<!-- カスタム -->
<!--#include file="/include/custom-unit.html"-->
<!-- END unit#custom -->
自分のテーマに/include/custom-unit.htmlを作成
![Page 13: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/13.jpg)
カスタムユニットについてのおさらいVer. 2.1.1.4以降
/system/include/unit.htmlの中身
<!-- カスタム -->
<!--#include file="/include/unit/custom.html"-->
<!-- END unit#custom -->
自分のテーマに/include/custom/unit.htmlを作成
![Page 14: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/14.jpg)
カスタムユニットについてのおさらい
編集側の設定
![Page 15: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/15.jpg)
カスタムユニットについてのおさらいVer. 2.1.1.4未満
/system/admin/entry/unit.htmlの中身
<!-- BEGIN custom -->
<!--#include file="/admin/entry/custom-unit.html" -->
<!-- END custom -->
自分のテーマに/include/entry/custom-unit.htmlを 作成
![Page 16: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/16.jpg)
カスタムユニットについてのおさらいVer. 2.1.1.4以降
/system/admin/entry/unit.htmlの中身
<!-- BEGIN custom -->
<!--#include file=“/admin/entry/unit/custom.html” ̶>
<!-- END custom -->
自分のテーマに/include/entry/custom/unit.htmlを作成
![Page 17: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/17.jpg)
カスタムユニットについてのおさらい
• 編集側の設定
• 変数指定のところの前に{id}を付加する
• field[]をunit{id}[]にする
![Page 18: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/18.jpg)
カスタムユニットについてのおさらい• カスタムユニットメーカーを作ろう
• デベロッパーサイトhttp://developer.a-blogcms.jp/editor/cum.html
• acms util kithttps://bitly.com/acmsUtilkit
![Page 19: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/19.jpg)
カスタムユニットの注意事項
• ループが発生する項目はカスタムユニットで表示できません
• (例)配列を使ったチェックボックスやカスタムフィールドグループ等
![Page 20: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/20.jpg)
カスタムユニットを複数用意するカスタマイズ方法
拡張ユニットを用意しよう
![Page 21: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/21.jpg)
カスタムユニットを複数用意するカスタマイズ方法編集設定
custom_任意の文字列
![Page 22: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/22.jpg)
カスタムユニットを複数用意するカスタマイズ方法ユニット設定
追加した項目のボタンをクリック
![Page 23: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/23.jpg)
カスタムユニットを複数用意するカスタマイズ方法
編集側の設定
![Page 24: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/24.jpg)
カスタムユニットを複数用意するカスタマイズ方法Ver. 2.1.1.4未満
/system/admin/entry/unit.htmlに
<!--#include file="/admin/entry/unit/extend.html" ̶>
の記述あり
![Page 25: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/25.jpg)
カスタムユニットを複数用意するカスタマイズ方法Ver. 2.1.1.4未満
/system/admin/entry/unit.htmlに
<!--#include file="/admin/entry/unit/extend.html" ̶>
の記述がないのでこれを記述しよう
![Page 26: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/26.jpg)
カスタムユニットを複数用意するカスタマイズ方法!
/admin/entry/unit/extend.html
<!̶ BEGIN custom_test ̶>
<!-- この中にカスタムユニットメーカで作成したコードを貼付ける -->
<!̶ END custom_test ̶>
![Page 27: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/27.jpg)
カスタムユニットを複数用意するカスタマイズ方法
表示側の設定
![Page 28: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/28.jpg)
カスタムユニットを複数用意するカスタマイズ方法
Ver.2.1.1.4以降
/system/include/unit.htmlの中身
<!--#include file=“/include/unit/extend.html"-->
の記述あり
![Page 29: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/29.jpg)
カスタムユニットを複数用意するカスタマイズ方法
Ver.2.1.1.4未満
/system/include/unit.htmlの中身
<!--#include file=“/include/unit/extend.html"-->
の記述がないのでこれを記述しよう
![Page 30: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/30.jpg)
カスタムユニットを複数用意するカスタマイズ方法
自分のテーマ/include/custom/extend.html
に表示したい内容を書き込む
![Page 31: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/31.jpg)
SNSログインこれは2015年3月20日現在の設定方法です
![Page 32: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/32.jpg)
SNSログインについて• SNSログインとは
• SNSログインの嬉しいこと
• Twitterでの認証設定
• Facebookでの認証設定
• 認証許可
![Page 33: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/33.jpg)
SNSログインとは
• SNSログインとは「アカウント名」や「パスワード」を入力しなくても、あらかじめTwitterとFacebookの認証設定をしておくことで、ログインを簡易にする仕組みのことです。
![Page 34: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/34.jpg)
SNSログインの嬉しいこと
ワンクリックでログインが可能に
![Page 35: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/35.jpg)
SNSログインを利用可能に
![Page 37: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/37.jpg)
APIキーの設定(Twitter)• プロパティ設定に移動
• Twitter アプリケーション(認証用)に値を入力- API Key- API Secret
![Page 39: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/39.jpg)
外部からの認証を受け付けるにはStatus & Reviewより
![Page 40: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/40.jpg)
APIキーの設定(Facebook)
• プロパティ設定に移動
• Facebook アプリケーションに値を入力- Application ID- Application Secret
![Page 41: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/41.jpg)
認証を許可
![Page 42: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/42.jpg)
動的フォームの カスタマイズ
![Page 43: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/43.jpg)
動的フォームのカスタマイズについて
• 動的フォームとは
• 機能設定
• エントリーへフォームを導入
• 項目の追加
• 動的フォームと静的フォームの組み合わせ方法について
![Page 44: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/44.jpg)
動的フォームとは
• 動的フォームとはHTMLの知識がなくても動的に登録できるフォームのことです。エントリーにフォームを設置することができます。
![Page 45: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/45.jpg)
機能設定
• ここに図が入る
![Page 46: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/46.jpg)
フォームIDの設定
• ここに図が入る
![Page 47: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/47.jpg)
エントリーへフォームを導入
![Page 48: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/48.jpg)
フォームIDのヒモ付け
• ここに図が入る
![Page 49: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/49.jpg)
動的フォームと静的フォームの組み合わせについて
設定しなくても常に表示したい内容
![Page 50: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/50.jpg)
動的フォームと静的フォームの組み合わせについて
• /include/form/input.html
• /include/form/confirm.html 上記二つのファイルをsystemのテーマから自身のテーマにコピーする
![Page 51: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/51.jpg)
動的フォームと静的フォームの組み合わせについて
- column:loopの外に記述 - 変数にはバックスラッシュを付けましょう
input.html
![Page 52: a-blog cms DAY in NAGOYA 2015/03 ミニセミナー](https://reader033.fdocuments.net/reader033/viewer/2022042818/55c40ab8bb61ebb6278b4661/html5/thumbnails/52.jpg)
ありがとうございました
http://horicdesign.com @steelydylan steelydylan!
"
#