選択されているタグ : ablogcms

タグを絞り込む : WebridgeKagawa スマートフォン スライド セミナー レポート

a-blog cmsで、特定のファイルを会員限定で閲覧できる機能を作ってみました

こちらは、a-blog cms Advent Calendar 2016の13日目のエントリーです。a-blog cmsの秋合宿で発表させていただいた内容です。画像やソースの説明を少し詳しく解説しています。

最近、ノウハウなどのファイルを会員限定でダウンロードできるサイトを見かけるようになりました。
会員登録を促す目的、アクセス解析に活かす目的などいろいろあると思います。
そういう時に使えるカスタマイズを今回はご紹介します。

上の図のように、誰でもアクセスできるファイルと、会員(ログイン時)のみアクセスできるファイルが混在している場合を考えていきます。


a-blog cms Training Camp 2016 OKINAWA に参加しました

みんなでaのポーズ!?

半年に一度行われる国産CMS「a-blog cms」の合宿に参加しました。いつもは名古屋開催ですが、今回はなんと沖縄での開催。a-blog cmsの新バージョンや新テーマの紹介、事例紹介など今回も充実した合宿でした。

開催概要
http://developer.a-blogcms.jp/blog/trainingCamp2016okinawa.html


a-blog cmsのファイルアイコンにFont Awesomeを使ってみる

これは「a-blog cms Advent Calendar 2015」の11日目の記事です。

a-blog cmsでPDFファイルを掲載する際、通常は上の図の左側のように、ファイルアイコンの画像の下にキャプションが出るようになっています。

今回は、このアイコンをFont Awesomeに変更する方法をご紹介します。


a-blog cms Training Camp 2015 Springに参加しました!

年2回開催される、a-blog cms Training Campにこの春も参加してきました。
今回は、前回とは異なり「a-blog cms DAY」「懇親会」「Training camp」の三本立てということで、大変充実した二日間になりました。


レスポンシブと最適化のいいとこどりができる?a-blog cmsでできる、マルチデバイス対応


これは、a-blog cms Advent Calendar 2014の、8日目の記事です。

以前、Webridge Meeting SP17 で a-blog cmsのマルチデバイス対応についてお話しましたで書いた、a-blog cmsのマルチデバイス対応の色々についてスライドを公開しました。今回の記事は、その内容についてご紹介したいと思います。

a-blog cmsでできるマルチデバイス対応は3種類

a-blog cmsでは、以下の3通りのマルチデバイス対応ができます。

  • レスポンシブサイト
  • スマートフォン最適化サイト
  • ハイブリッド型サイト

それぞれ、a-blog cmsならではの機能を使って、便利に構築できるようになります。

レスポンシブサイトには専用のスタイルガイドが

a-blog cmsサイトで使えるグリッドやアイコン、見出しなどのスタイルガイドがあらかじめ定義されているので、レスポンシブサイトが比較的容易に制作できるようになっています。

また、スマートフォンでアクセスした際にはサイズの異なる画像を準備するなども可能です。

スマートフォン最適化サイトには、a-blog cmsのルールという機能を使用

スマートフォンとPCで異なるページを表示したい場合は、こちらの方法を使います。便利なのは、PC版、スマホ版で同一URLで運用できること。切り替えも自動でできるように設定できるので、とても簡単です。

ここで、レスポンシブサイトと最適化サイトについてのおさらい

レスポンシブサイトも、最適化サイトも、どちらもマルチデバイス対応で選択する方法ですが、どちらにもメリット、デメリットがあります。サイトを構築する際は、どちらの手法が適しているかを選定することも多いと思います。

  • レスポンシブサイトは1つのHTMLファイルで管理できるので運用が楽、ただしきちんと設計しないと構築が大変・・
  • 最適化サイトは、スマホ等に適した独自の表現ができる反面、メンテナンスが煩雑に・・?

そこで選択肢に入れたいのが、ハイブリッド型

できるなら、双方の長所を取り入れた、いいとこ取りの構築をしちゃいましょう!ということで、ハイブリッド型の方法についてご紹介します。

  • なるべく共通のファイルで管理したい
  • 同じページは同一URLで運用したい
  • 設計も構築もシンプルにしたい

ハイブリッド型なら、こういったことが実現できます。

ハイブリッド型で使うのは、a-blog cmsの継承機能

a-blog cmsには、テーマの継承機能があります。SASSなどを使われている方は感覚的には同じものだと思いますが、ベースとなるものを活かしつつ、上書きしたいファイルのみを作成することで、ベースの機能を継承したテーマが作られるというものです。 詳しくは、スライドをご覧ください。

ハイブリッド型でできる、表示の工夫

ハイブリッド型では、例えばベースはレスポンシブサイトとして作成して、ある一部分のパーツのみ、デバイスの種類に応じて出し分けるということができます。


PC版ではバナー画像、スマホ版ではテキストを表示

病院の診察表。PC版は横長、スマホ版は縦長で表示


ほかにも、

  • PC版は記事のサマリーを200文字、
スマホ版は100文字出す
  • お問い合わせへの導線エリアを
PCとスマホで出し分ける

など、それぞれのデバイスで望ましい表示ができるよう、制御できます。


案件に合わせて、最適な選択を

それぞれの長所を採用し、短所を補う、そういった設計が運用コストや制作コストを下げ、コンテンツ制作やマーケティングの方により注力できるのではないかと思います。 案件に合わせて、最適な選択をしていけたらいいですね。


プロフィール

山田恵理子
  • Twitter
  • Facebook

デザイナー

山田恵理子

a-blog cmsエバンジェリスト/上級ウェブ解析士
香川県生まれ。プログラマーを経て2006年より高松のWeb制作会社にて県内の企業・ECサイトのデザイン、ディレクション、CMS構築等を担当後、2015年7月に独立。フリーランスと会社員の二足のわらじで新しい働き方に挑戦中。 香川県のWeb制作者のコミュニティ「Webridge Kagawa」のメンバーとしてCSS Nite in TAKAMATSUなどセミナーイベントを開催、スピーカーとしても活動を行う。
実家の桃農家も手伝う兼業農家。

エントリーリスト

タグ