a-blog cmsでできるマルチデバイス対応
TRANSCRIPT
a-blog cmsでできる、 マルチデバイス対応
株式会社ゴーフィールド 山田恵理子
自己紹介
株式会社ゴーフィールド山田恵理子
ディレクション・デザイン・コーディング・CMS構築などWeb制作全般
元プログラマー、PHPは忘れました
a-blog cms制作実績100サイト以上
兼業農家で桃作ってます
a-blog cmsを使った マルチデバイス対応って？
a-blog cmsでできること
レスポンシブサイト
スマートフォン最適化サイト
ハイブリッド型サイト
レスポンシブサイト
普通に作るので いいんじゃないの？
https://www.flickr.com/photos/11250735@N07/8560841233/
a-blog cms独自の機能が あります
1.スタイルガイド
a-blog cmsスタイルガイド http://developer.a-blogcms.jp/reference/latest/styleguide.html
投稿できる画像サイズも ％指定できる
レスポンシブのサイトで 困ることと言えば…
PC版に 合わせると
画像サイズが 重い…
https://www.flickr.com/photos/vegas/414012553/
2.画像置換
スマートフォン用に小さいサイズの画像を表示する http://developer.a-blogcms.jp/reference/latest/builtinjs/js-adaptive_image.html
a-blog cmsで画像を投稿すると、 通常サイズのほかに、小さいサイズ・
大きいサイズの画像が生成される
コンフィグ＞編集設定＞イメージ編集
javascriptを編集して、どの横幅になると実行されるか等を指定
HTMLテンプレートの画像表示部分を編集
少しの変更で 画像置換ができたよ！
https://www.flickr.com/photos/deerwooduk/579761138/
最適化サイト
同じURLでスマホ・ フィーチャーフォンサイト
a-blog cmsの 「ルール」という設定を
使用して振り分け
スマートフォンとPCの表示振り分け方法 http://developer.a-blogcms.jp/document/rule/#eid1238
管理画面＞ルール＞ルールを作成
ユーザーエージェントを「スマートフォン」に設定
指定したルールの「コンフィグ」で、スマートフォンで アクセスした際の設定を編集
コンフィグ＞テーマ でスマートフォン用のテーマを設定
PCサイト表示とスマートフォン表示を行き来するボタンの設置 http://version1.a-blogcms.jp/support/tutorial/keitai/sp2pc.html
ここで、レスポンシブサイトと 最適化サイトのメリット・デメリット
のおさらい
レスポンシブサイト
1つのHTMLファイルで管理できる
不要なソースがある場合も
設計・構築が複雑になる場合も
最適化サイト
スマートフォンに最適化されたソースや導線を提供できる
設計・構築が比較的容易
PC用とスマートフォン用のテンプレートが必要なため、メンテナンスが煩雑に
どっちを選んだら いいんだろう？
https://www.flickr.com/photos/andy_emcee/5995295163/
いいとこ取り しちゃいましょう！
つまり…
なるべく共通のファイルで管理したい
同じページは同一URLで運用したい
設計も構築もシンプルにしたい
ハイブリッド型サイト 実装方法
ベースはPCサイトのテンプレート
スマホだけに適用したいファイルを作って上書き
PC スマホ
の部分は共通のHTMLを使用
は、PC・スマホ独自のHTML
a-blog cmsの テーマ継承機能を使います
テーマの継承 http://developer.a-blogcms.jp/document/themes/inherit.html
main
top.htmlinclude
header.htmlfooter.html
company.htmlaccess.html
PC版
sp@main
includeheader.htmlfooter.html
スマホ版
cssstyle.css
cssstyle.css
main
top.htmlinclude
header.htmlfooter.html
company.htmlaccess.html
PC版
sp@main
includeheader.htmlfooter.html
スマホ版
cssstyle.css
cssstyle.css
スマホ版のファイルが少ない！
main
top.htmlinclude
header.htmlfooter.html
company.htmlaccess.html
PC版
sp@main
includeheader.htmlfooter.html
スマホ版
cssstyle.css
cssstyle.css
スマホ版のテーマフォルダ名 sp@main
任意の フォルダ名
PCのテーマ フォルダ名
main
top.htmlinclude
header.htmlfooter.html
company.htmlaccess.html
PC版
sp@main
includeheader.htmlfooter.html
スマホ版
cssstyle.css
cssstyle.css
スマートフォン独自のテンプレートを 使用したい部分は、スマートフォンの テンプレートフォルダ（sp@main)に PC版と同じフォルダ・ファイル名で作成
スマートフォンで見た際に、sp@mainに存在しているファイルのみが上書き され、sp@mainに存在しないファイルは、PC版のファイルが読み込まれる
PC スマホ
の部分は共通のHTMLを使用
は、PC・スマホ独自のHTML
管理画面＞ルール＞ルールを作成
ユーザーエージェントを「スマートフォン」に設定
コンフィグ＞テーマ でスマートフォン用のテーマを設定
フルCMSでないサイトでも 大丈夫！
ハイブリッド型サイト 制作のコツ
1.スタイルガイドの整備
PC版スタイルガイド
スマートフォン版スタイルガイド
PCとスマートフォンサイトの コンテンツ部分は、同じHTMLで
記述する
PC スマホ
の部分は共通のHTMLを使用
2.パーツ単位で管理する
header.html
footer.html
<body> <!--#include file=“/include/header.html"--> 青い部分のHTML（コンテンツ） <!--#include file=“/include/footer.html"--> </body>
ヘッダー・フッターだけでなく、 ナビゲーションや
コンテンツ内もパーツ化 することができます
/main/include/banner.html /sp@main/include/banner.html
<!--#include file=“/include/banner.html"-->
PC スマホ
/main/include/schedule.html /sp@main/include/schedule.htmlPC スマホ
<h2>診察表</h2> <!--#include file=“/include/schedule.html"-->
診察表 診察表
ほかにも…
PC版は記事のサマリーを200文字、スマホ版は100文字出す
お問い合わせへの導線エリアをPCとスマホで出し分ける
表示部分の細かい制御が 簡単に！
RESS: Responsive Design + Server Side Components http://www.lukew.com/ff/entry.asp?1392
まとめ
レスポンシブサイト
スマートフォン最適化サイト
ハイブリッド型（いいとこ取り）サイト
限られたリソース、時間、 要件の中で最良の選択を！
まとめ
ありがとうございました
facebook eriko.ymd blog http://aogiri.net/
https://www.flickr.com/photos/kevincortopassi/3939632445/