a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

57
a-blog cms 2014 7 5 KDDI SMB

Upload: saori-okayama

Post on 10-Jun-2015

354 views

Category:

Technology


5 download

DESCRIPTION

2014年7月5日に開催された「a-blog cms 勉強会 in 東京 2014 Summer」でKDDIウェブコミュニケーションズのa-blog cms導入事例を紹介しました。

TRANSCRIPT

Page 1: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

a-blog cms 事例紹介キャッシュ機能で

快適なウェブサイト表示2014年7月5日(土)

株式会社 KDDI ウェブコミュニケーションズ

SMB 事業本部 デザイン部

フロントエンドエンジニア 岡山 沙織

Page 2: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

自己紹介

Page 3: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

岡山 沙織

所属:KDDI ウェブコミュニケーションズ肩書き:フロントエンドエンジニア

2013 年 4 月 1 日 中途入社

ウェブディレクターも兼務

Page 4: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

19XX 年北海道で生まれる

2 浪の末 20 歳のときに大学進学で上京

大学はきっちり 4 年で卒業

卒業後は 1 年ほど雀荘でアルバイト

その後パチスロ雑誌の編プロでウェブ制作

どっぷりウェブ業界に入り約 10 年

デザイナー(なんでも屋)

→マークアップエンジニア

→ウェブディレクター

略歴

Page 5: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

会社紹介

Page 6: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

KDDI ウェブコミュニケーションズはサービス事業会社です

Page 7: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

提供サービスホスティングサービス

 

ウェブアプリケーションサービス

   

ガジェットeコマースサービス

Page 8: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

ホスティングサービス

 

Page 9: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

CPI共有レンタルサーバーと専用サーバーを提供

バックアップサービス標準装備

Page 10: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

CloudCore VPSVPS 環境を提供

簡単に操作できるコントロールパネル

Page 11: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

ウェブアプリケーションサービス

   

Page 12: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

Jimdo簡単ホームページ作成ツール

無料で利用できるプランあり

Page 13: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

Twilio電話回線を利用した API

API を通して電話をかけたり SMS が送信できる

Page 14: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

corabbitクラウド型のファイルストレージサービス

PSD や AI ファイルのプレビュー可能大容量ファイル送信が可能なPost Box機能

Page 15: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

ガジェットeコマースサービス

Page 16: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

OneMeハイエンドユーザー向けガジェット専門通販

国内外の高品質なガジェットに関する周辺機器を販売

Page 17: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

これらのウェブサイト制作はほぼ内製です

その中でデザイン部管轄のウェブサイト

   

コーポレートサイト

Page 18: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

もくじ1.  導入しているコンテンツ2.  a-blog cms を選んだ理由3.  キャッシュ機能について

Page 19: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

導入しているコンテンツ

Page 20: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

CPIhttp://www.cpi.ad.jp/

Page 21: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

動的に管理している箇所ニュース

サポート

Page 22: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

コーポレートサイトhttp://www.kddi-webcommunications.co.jp/

Page 23: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

動的に管理している箇所ニュース

採用情報

Page 24: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

オンラインヘルプhttp://acesr.document.secure.ne.jp/

Page 25: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

動的に管理している箇所

コンテンツ全体

Page 26: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

エイリアスを利用

Page 27: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

CloudCoreVPShttp://www.cloudcore.jp/vps/

Page 28: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

動的に管理している箇所ニュース

よくある質問

Page 29: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

a-blog cms を選んだ理由①導入が楽!!

②管理系パーツの実装がすぐ出来る③キャッシュ機能がある

Page 30: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

導入が楽!!現在進行形で運用しているサイトに

導入しやすい!

Page 31: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

現在のサイトをthemes フォルダに入れるだけ

Page 32: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

例えば WordPress の場合だと…

HTML を分割して WordPress のテーマ化をしなくてはいけない

Page 33: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

管理系パーツの実装がすぐ出来る

Page 34: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

3 つのファイルを読み込むだけ管理系パーツの表示用 CSS

システムの動作に必要な Javascript

ログイン後に表示される管理系ボタン

<link href="/css/acms.css" rel="stylesheet" type="text/css" media="all">

<!-- BEGIN_MODULE Js -->

<script type="text/javascript" src="/index.js{arguments}" charset="UTF-8" id="acms-js"></script>

<!-- END_MODULE Js -->

<!--#include file="/admin/action.html" -->

Page 35: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

ログインするとウェブページに管理パーツが表示される

Page 36: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

キャッシュ機能がある※これは次で詳しくご紹介

Page 37: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

キャッシュ機能について

Page 38: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

キャッシュ機能とは?同じページを表示する際に、サーバー側にキャッシュファイルを作成し、次回からの表示の負荷を低減します。キャッシュは有効時間や子ブログが更新された際など、

更新のタイミングも制御できます。

※a-blog cms 公式サイトより抜粋

http://www.a-blogcms.jp/what/function/

Page 39: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

キャッシュ機能を利用しない

Page 40: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

キャッシュ機能を利用すると

Page 41: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

データーベースに毎回問い合わせしなくなる

↓サーバーに負荷がかからない

↓ページ表示が早くなるので快適

Page 42: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

CPI の設定

全てデフォルトのまま

Page 43: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

運用フロー

Page 44: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

(1)更新作業

Page 45: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

(2)テストサーバーへアップロード

Page 46: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

(3)関係各所確認→承認

Page 47: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

(4)SmartRelease で本番公開作業

Page 48: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

(5)a-blog cms にログイン

Page 49: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

(6)本番 URL で表示やリンクを確認

Page 50: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

(7)キャッシュをリフレッシュ

完了!!

Page 51: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

今後

2.1.0がリリースされたので…承認フローを何とかしたい

Page 52: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

現在の承認方法

全てメールでやり取り

Page 53: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

最後に…

Page 54: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

a-blog cms を CPI で 利用しているお客様事例を紹介しています

Page 55: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

http://www.cpi.ad.jp/cms/ablog_cms/gofield/

Page 56: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

シェアードプラン ACE01なら10日間無料お試しあります!

Page 57: a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜

ありがとうございました

[email protected]

Facebook: saori.okayama