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独自の機能が あります
a-blog cms制作者向け情報 http://developer.a-blogcms.jp/
a-blog cmsスタイルガイド http://developer.a-blogcms.jp/reference/latest/styleguide.html
投稿できる画像サイズも %指定できる
レスポンシブのサイトで 困ることと言えば…
PC版に 合わせると
画像サイズが 重い…
https://www.flickr.com/photos/vegas/414012553/
スマートフォン用に小さいサイズの画像を表示する 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でないサイトでも 大丈夫!
PCとスマートフォンサイトの コンテンツ部分は、同じHTMLで
記述する
PC スマホ
の部分は共通のHTMLを使用
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/