作成するフレームはヘッダー、フッターと、サイドバーと、コンテンツエリアの2カラムレイアウトで、画面幅が小さくなると、1カラムになるレイアウトです。
※ このドキュメントは2016年5月26日に勧告候補になったドキュメント「CSS Flexible Box Layout Module Level 1 W3C Candidate Recommendation, 26 May 2016」を参照しています。

方法

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>Flexboxテスト</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="flex-cotainer">
    <div class="wrapper">
        <header>ヘッダー</header>

        <div class="flex-items">
            <div class="content1">
                <h1>サイドバー</h1>
            </div>
            <div class="content2">
                <h1>コンテンツエリア</h1>
            </div>
        </div>

        <footer>フッター</footer>
    </div>
</div>
</body>
</html>

style.css

.flex-cotainer {
  display: flex;
  flex-direction: column;
}

.wrapper{
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.flex-items {
  flex: 1;
  background-color: #ee0;
  display: flex;
 flex-wrap: wrap;
}

.content1 {
  flex: 1 1 150px;
  background-color: #333;

}
.content2 {
  flex: 3 1 350px;
  background-color: #0ee;
}

header{
    height: 100px;
    background-color: #99c;
}

footer{
    height: 100px;
    background-color: #99c;
}

手順１

ヘッダー、フッターの指定に関しては「Flexboxで、Sticky Footerを作成する」を参照ください。

手順２

今回はコンテツエリアが500px以上の場合は2カラム、500px以下になると1カラムになるようにします。

コンテンツエリア全体の枠（.flex-items）に「display: flex;」を指定し、その中に「.content1」ブロックと「.content2」ブロックを設定しています。

.flex-items{
  display: flex;
  flex-wrap: wrap;
}

手順３

「.content1」と「.content2」に、flexプロパティを指定しています。
「flex: 1 0 150px;」は、ベース幅を150px;に設定しています。.content2のベース幅が350px なので、合計500pxの画面幅まで2カラムで縮まり、500pxを下回ると1カラムになります。

// flex プロパティ
// Value: <flex-grow> <flex-shrink> <flex-basis> ;
// Initial: 1 0 auto ;

.content1 {
  flex: 1 0 150px;
}
.content2 {
  flex: 3 0 350px;
}

ブレイクポイントは500pxの1箇所です。
後は画面幅に合わせてコンテンツエリアが伸び縮みします。

例えば画面幅が900pxだった場合、ベース幅が500pxですので、「900px - 500px」　で、残りの400pxを、1対3で各ブロックに割り振られます。（.content1 : 250px、.content2 : 650px）

関連タグ:

Flexbox

↧

無料でできるイベント・セミナーの告知方法と御作法

July 11, 2016, 9:00 pm

≫ Next: CPI MEGA MIX2016開催報告

≪ Previous: Flexboxで、レスポンシブWeb用のフレームを作成する

自社で主催イベントを行う際、タスクが多く色々と骨が折れるものです。ざっと思い浮かべるだけでも下記のタスクがあります。

イベント主催時のタスク

[イベント開催準備]

イベントテーマを考える
登壇者の選定
イベントページ作成
イベント告知
予算管理
リマインドメール送信
アンケート準備
進行表作成（スタッフ用）
タイムスケジュール（参加者配布用）

[イベント当日]

リハーサル
会場準備
参加者の誘導
リハーサル
懇親会の手配
司会進行
レポート作成

[イベント翌日]

フォローアップメール送信
スライド等の共有
サイト掲載（開催報告）

考えただけでも息がつまりそうですね......
この中で、もっとも心配することが集客で、何人申し込みしてくれるか主催者はドキドキしながら参加者数を数時間おきにチェックしているのではないでしょうか。（私は10分置きくらいに確認しています）

イベント関連では以前「企業からイベント協賛費をもらうための提案書と御作法」も書いたことがあります。イベント協賛費を企業からもらう際は参考にしてみてください。

イベント告知の鉄則

今回の記事は私がイベントを主催した時に行っている無料の告知方法をご紹介いたします。
今回ご紹介する告知方法は、実際にCPI MEGA MIX2016を告知した方法のご紹介です。このやり方で定員の130名を超える方に申し込みいただきました。

鉄則１

まず初めにイベント告知は多くの方の目に触れることが一番です。
そのためには様々な場所にイベント告知が掲載されることで、できるだけ多くの告知施策を行うことが鉄則です。

鉄則２

イベント募集ページを「Doorkeeper」などのメディアを使い募集するのは良いですが、気合を入れるイベントは特設のイベントページを作ることです。
CPI MEGA MIXでは、「特設ページ」と「申し込みページ（Doorkeeper）」の２つを用意しています。

ソーシャルメディアを使った告知

今や当たり前となりました、ソーシャルメディアでの告知です。弊社の場合はFacebook、Twitter、Line@の運用をしています。
ソーシャルメディアの発信で気をつけたいことは、そのソーシャルメディアに合わせた発言をすることです。

Facebook、Twitter、Line@が同じ文言で発言することは避け、それぞれのソーシャルメディアの特性にあった発言を心がけてください。

<<Facebook投稿例>>

みなさんこんにちは、CPIの阿部です。本日はイベントのお知らせです。
昨年度開催し人気だったCPI MEGAMIXを今年も開催します！！
http://www.shared-blog.kddi-web.com/mega-mix2016/
CPI MEGAMIXは「セミナー」と「交流会」を目的とし開催します。
セミナーでは明日から使える「Web 制作に必要な知識」を厳選してお伝えします。
交流会での主役はみなさんです。クラフトビールと軽食をご用意しておりますので、美味しいビールを片手に Web 制作者の輪を広げましょう！
7月23日 13時〜
参加費：無料
場所：東京 (KDDIウェブコミュニケーションズ 6F)
皆様の参加スタッフ一同お待ちしております m( _ _ )m

CPIのFacebookファンページに対する「いいね」数は当時810ですが、広告を使わずにリーチ数が2261件でした。
Facebookは柔らかすぎず固すぎない、企業という立場を心がけながら、人が発言しているように発信することが重要です。
（Facebook投稿のリンク）

<<Twitter投稿例>>

（イベント告知）7月23日に、昨年好評だったCPI MEGA MIXを今年も開催します!! 参加費は無料でクラフトビールも出ます !! 皆様の参加お待ちしております!! http://www.shared-blog.kddi-web.com/mega-mix2016/

Twitterからの流入は全体のアクセス数の1%でしたので、あまり参考にならないかもしれませんが、Facebookよりもフレンドリーな体裁で大丈夫です。
もう少し柔らかい発言でも良かったかもしれませんね。
（Twitter投稿のリンク）

ここで一つポイントですが、ソーシャルでの発信は自社のフォロアーだけを狙った発信ではありません、それを見た方がシェアしていただけるのも考慮して発信する必要があります。

このシェアしてもらえるかがポイントですが、運を天に任せて発信するだけですと少し弱いです。
ではどうしたら、業界で有名なあの人にシェアしてもらえるか、少し考えたら分かりますよね？（笑）ブログではちょっとココの発言は控えさせていただきます。
オフラインセミナーイベントで話す機会がありましたら話したいと思います。

他メディアを使った告知

続いての告知方法は他のメディアを使った告知方法です。CPI MEGA MIXは「Doorkeeper」を使い参加申し込みをしていますが、その他のメディアにもイベント情報を掲載し、申し込みのリンクを「Doorkeeper」にしています。

Doorkeeper

https://www.doorkeeper.jp/

※ イベント参加費が無料の場合、商用利用でも無料で利用することができる

dots

https://eventdots.jp/contact/event

※ 商用の場合は有料

connpass

http://connpass.com/

※ 商用利用、有料イベントでもconnpass手数料無料

イベントカレンダー + ログ

https://event.atmarkit.co.jp/

※ 画面上方「イベント登録」から登録が可能

Web担当者Forum

http://web-tan.forum.impressrd.jp/

※ グローバルメニューの「Web担について」、「記事を投稿してみる」よりイベントの登録可能

CSS Nite

http://cssnite.jp/

※ 画面下方の「掲載依頼」からイベントの登録可能

ビジネス＋IT

http://www.sbbit.jp/eventinfo/

※ 画面下方の「イベント・セミナー情報登録」よりイベントの登録可能

ブログ掲載

今回は個人ブログへの依頼はしませんでしたが、知り合いのブロガーなどに声をかけてみるのも良いかもしれません。
当CPIスタッフブログにも下記のバナーを作成し告知を行いました。

アクセス数は全体の0.1%でした。画面下方に置いてあるバナーって弱いですね......^^ ;

その他にも普段お付き合いのあるメディアにお願いしてみると良いかもしれないですね。
弊社の場合ですと「MdN Design Interactive」などにも掲載いただきました。

メールマガジンで告知

最後に紹介するのが、メールマガジンです。
弊社の場合ですとCPIのメールマガジンを発行しております。CPIのメールマガジンは、サーバーをご契約いただいたお客様か、ビジネスパートナーになったお客様で、メールマガジンの配信を希望している方に送信しています。

今更メール？？と思う方も多いかと思いますが、実はこのメールマガジンは侮れません、一番申し込みが多かった施策がこちらです。
急にメールマガジンを運営しても間に合いませんので、日頃よりメールマガジンの運営をしていると告知にはもってこいです。

現在メールマガジンの運営をしていない会社は、お付き合いのある会社のメールマガジンに載せていただけないか相談してみると良いかもしれません。弊社もお付き合いのある何社かに掲載いただきました。

実際に送った内容は下記のリンクより確認できます。
http://shared-blog.kddi-web.com/mega-mix2016

メールマガジンの運用の大前提は普段から読者にとって有用なコンテンツを提供し、開封率をあげるというものがあります。
この大前提が基本ですが、その他に今回は定期配信しているメールマガジンの他に号外として、イベントの単独情報を配信しました。

単独情報を発信することにより、イベントの本気度や、こちらが伝えたいことを的確に伝えることができます。

最後に

イベントの告知は多くの方の目に触れることが一番重要です。ソーシャルメディアではシェアしてもらえたらいいなではなく、シェアしてもらえるように仕向けることも時には重要です。どのようにしたらシェアしてももらえるかは皆さん独自に考えてみてください。

そしてもう一つ重要なのが、自社主催セミナー・イベントの場合は、自社のファンがどれだけ存在するかも重要です。メールマガジンやLine@からの登録者が多い理由は、ファンの方を大切にしているからこそだと思っています。

そして最後に、イベントに多く参加いただくには、そのイベントにどれだけ気合を入れているかに左右されます。
気合が入ると必然とイベントの特設サイトもできますし、参加者へのノベルティも増えますし、特別なメールマガジンの発行もされます。これらの情報を見てユーザーは「あー気合の入ったイベントだな、楽しそうだな、参加してみようかな」と思うはずです。

ですので、イベントに対して気を抜かず、告知をしていただければイベント参加者も多く集まるのではないでしょうか。

企業からイベント協賛費をもらうための提案書と御作法

関連タグ:

マーケ

↧

CPI MEGA MIX2016開催報告

August 2, 2016, 11:00 pm

≫ Next: Google Apps 活用セミナー

≪ Previous: 無料でできるイベント・セミナーの告知方法と御作法

2016年7月23日にCPI MEGA MIX2016イベントを開催いたしました。イベントは土曜日にも関わらず多くの方に起こしいただき、ありがとうございました。

セミナーセッション

CPI MEGA MIX とは Web 制作に役立つセミナーと、Web 制作者が交流するためのイベントで、年に一度開催しています。
セミナーセッションは13時〜18時30までの長丁場でしたが83名と多くの方に参加いただきました。

今回のセミナー講師を担当するCPIエバンジェリストの平均年齢は39.75歳でした。来年は40.75歳ですね......

セミナーセッションで使用したスライド

デザイン・制作をはじめる前に取り組む事　後藤賢司
jQuery3 何が変わって何が変わらないのか　前川昌幸
WebSocket を介してデバイスを利用する Web システム構築術　大月茂樹
協業プロジェクトにおけるコミュニケーション設計ケーススタディー　古川勝也
コミュニティがあなたを強くする〜事例に学ぶコミュニティというエコシステムの活用術〜江頭竜二
クラウドデータベースで業務効率化と、安全な Web サイト運用術たにぐちまこと

ハンズオンセッションで使用したスライド

ハンズオンセッションは12名の少人数制で開催しました。

使ったことのない CMS をインストールしまくろう！のもくもく勉強会菱川拓郎
CSS3 のレイアウトモジュール Flexbox を使ってみよう阿部正幸
電話 API Twilio を触ってみよう、もくもく勉強会高橋克己

座談会

セミナーセッション最後の締めくくりは、2016年上期のITニュースをピックアップし、今後このようなことが流行るのではないかと予想をしました。
上期はVR元年、MA（Marketing Automation）、Pokemon GO、Adobe XDなど、様々なものが人気でした。

ビアバッシュ

セミナーセッション終了後は、お待ちかねのビアバッシュです。
セミナー参加者のほとんどがビアバストに参加いただき、今年も贅沢にクラフトビールで乾杯です。

最後に

今回でCPI MEGA MIXは2回目を開催することができました。
このブログ記事を書いていて感じたことは、多くの方に参加いただくことができ、開催して本当に良かったなと思いました。
まだまだ至らない点もあったかと思いますが、来年の開催に向けて反省点として活かしたいと思います。

CPI MEGA MIX2016にお越しいただきました皆様ありがとうございました。
来年はKDDIウェブコミュニケーションズの30周年、CPIの20周年です。
今回よりも、さらに大きいイベントをしたいなと考えております。イベントは今回同様、学びと交流の場と考えていますので、ぜひ次回も参加いただけることを楽しみにしております。

おまけ

Tweetのまとめ

togetter (CPI MEGA MIX2016)

360度カメラで撮影した画像

（セミナー開始前講師の控え室にて）

（セミナー参加者と）

関連タグ:

セミナー情報

↧

Google Apps 活用セミナー

August 14, 2016, 10:17 pm

≫ Next: 【MT東京-27】CMS本当にあったこわ〜い話

≪ Previous: CPI MEGA MIX2016開催報告

8 月 23 日（火）KDDI ウェブコミュニケーションズ東京本社にて、「Google Apps 活用セミナー～レンタルサーバーとの連携で、Google App を賢く利用しよう！～」を開催いたします。

イベント詳細は特設サイト「Google Apps 活用セミナー」を参照ください。

日時：開催日時：2016 年 8 月 23 日（火） 14 時 30 分～ 17 時 30 分
会場：KDDIウェブコミュニケーションズセミナールーム
参加費：無料

関連タグ:

セミナー情報

↧

【MT東京-27】CMS本当にあったこわ〜い話

August 14, 2016, 10:26 pm

≫ Next: Drupal Meetup Tokyo Vol.2

≪ Previous: Google Apps 活用セミナー

2016年8月20日（土）にMT 東京主催の「CMS本当にあったこわ〜い話」にCPIエバンジェリストの阿部が登壇します。

阿部は「失敗から学んだDrupalの要件仕様」というテーマでDrupalの話をしたいと考えています。
その他に内容盛りだくさんですので、気になる方は特設サイトをチェックしてください。

MT東京-27】CMS本当にあったこわ〜い話

日時：2016-08-20（土）12:30 - 19:00
参加費：2000円
主催：MT 東京
場所：テコラスカフェ（NHNテコラス株式会社）＠東京

関連タグ:

セミナー情報

↧

Drupal Meetup Tokyo Vol.2

August 14, 2016, 10:32 pm

≫ Next: baserCMS 活用セミナー

≪ Previous: 【MT東京-27】CMS本当にあったこわ〜い話

Drupalコミュニティが主催する、Drupal Meetup TokyoのVol2です。
今回のメインセッションは、「Matthew Messmer」さんに、リッチコンテンツとランディングページをDurpalのParaguraphsモジュールを使い作成する方法を紹介していただきます。

イベント概要

イベント詳細ページ：

Drupal Meetup Tokyo Vol2

日時：2016年8月26日（金） 19:00〜 21:00

場所：株式会社ロフトワーク渋谷オフィス

参加費：500円

関連タグ:

セミナー情報

↧

baserCMS 活用セミナー

August 23, 2016, 2:45 am

≫ Next: CSS Nite LP47 Coder's High 2016

≪ Previous: Drupal Meetup Tokyo Vol.2

2016年9月9日（金）19:00～ KDDIウェブコミュニケーションズセミナールーム＠東京で、日本向けの分かりやすい管理画面を特徴とした国産CMS「baserCMS」の活用セミナーを開催します。

イベント詳細

開催日時：９月９日（金）　１９：００～２２：３０
開催場所：株式会社KDDIウェブコミュニケーションズ
参加費：無料
懇親会参加費：500円（要申込）

詳しくはbaserCMSイベントページを参照ください。

関連タグ:

イベント情報

↧

CSS Nite LP47 Coder's High 2016

August 23, 2016, 2:47 am

≫ Next: CSS3のレイアウトモジュールFlexboxを使ってみよう

≪ Previous: baserCMS 活用セミナー

2016年9月24日に東京のTKPガーデンシティPREMIUM神保町プレミアムボールルームで「CSS Nite LP47 Coder's High 2016」が開催されます。
当イベントはCoderのためのセミナーイベントで、業界で有名な方が多く登壇いたします。

誠に恐縮ながらCPIエバンジェリストの阿部も登壇させていただきます。

イベント詳細

日時 2016年9月24日（土）13:30-19:30
会場 TKPガーデンシティPREMIUM神保町プレミアムボールルーム

イベント詳細ページ

LP47「Coder's High 2016」は、数日で240名の枠が埋まってしまったそうです。
CPIでは、この状況を見越して、お申し込み開始と同時に1席確保しています。
90名近いキャンセル待ちの状況とのことですが、CPIのLINE@に登録の方だけ特別に抽選で招待チケットを配布しておりますので、この機会にぜひCPIのLINE@をご登録ください。

関連タグ:

セミナー情報

↧

CSS3のレイアウトモジュールFlexboxを使ってみよう

August 23, 2016, 10:07 pm

≫ Next: 国産のbaserCMSが「コンテンツ管理」機能を強化し4にバージョンアップ

≪ Previous: CSS Nite LP47 Coder's High 2016

2016年 5月 26日に勧告候補になった「CSS Flexible Box Layout Module Level 1 W3C Candidate Recommendation, 26 May 2016」を元にFlexboxの使い方や、IE8、9の対応方法など、実際に手を動かしながら学ぶハンズオンセミナーです。

イベント詳細

開催日時：2016年9月1日（木）18:00〜20:00
参加費：1000円
場所：ソフト産業プラザイメディオ講義室@大阪

イベント詳細及び、お申し込みはは下記サイトを参照ください。
https://www.sansokan.jp/events/eve_detail.san?H_A_NO=21716

またCPI のLINE@限定で、セミナーの無料チケットを定期的にプレゼントしています。
この機会にご登録どうぞよろしくお願いいたします。

関連タグ:

セミナー情報

↧

国産のbaserCMSが「コンテンツ管理」機能を強化し4にバージョンアップ

August 24, 2016, 6:14 pm

≫ Next: 共用サーバー（CPI ACE01）にMAツールのMauticをインストールする方法

≪ Previous: CSS3のレイアウトモジュールFlexboxを使ってみよう

国産CMSのbaserCMSが2016年9月20日にバージョン4 になると「NPO 法人ベーサー・ファウンデーション事務局」から発表がありました。

動画での機能紹介

baserCMS4の特徴

コンテンツ管理機能

これまでのbaserCMSは、ブログ管理やメールフォーム管理が固定ページ管理と分けられていたため規模が大きくなると、全体像が把握しづらくなる点がありました。
baserCMS4から固定ページ管理、ブログ管理、メールフォーム管理などがコンテンツ管理に一元化されるため、規模が大きくなっても全体像が把握かしやすく、更新・管理が容易になりました。

プラグイン一括管理

「コンテンツ管理」機能により、固定ページだけでなく、標準搭載ブログとメールフォームプラグインなど、コンテンツ作成系プラグインも合わせて一括管理することができます。

(コンテンツ作成系プラグイン管理 )

多言語やマルチデバイス対応

「サブサイト管理」機能が追加されました。これによりメインとなる webサイトコンテンツからエイリアスと呼ばれるコンテンツの分身を作成することができます。コンテンツの中身が同じで表示レイアウトが異なるようなマルチデバイス対応サイトが簡単に作れるようになりました。

また、メインとなるwebサイトからコピーを作成することで、レイアウトが同じで言語が異なる多言語サイト作成も容易に実現できます。

baserCMSについて

baserCMSは、福岡のシステム開発会社である株式会社キャッチアップ ( http://catchup.co.jp )が、CakePHPを利用して開発し、2009年10月にオープンソース化した CMSです。日本人がマニュアル等のドキュメントを作るため「わかりやすい国産 CMS」として、現在約 12 万ダウンロード、4万サイトで利用中です。無料でダウンロードでき、コーポレートサイト向け機能を最初から実装している事と、カスタマイズ性の高さから、web制作会社の注目を集めています。

2016年9月20日にbaserCMS4にバージョンアップされ「コンテンツ管理」機能が強化されます。これにより、今後比較的大きめのサイトにも導入が進むことが予想されます。

CPIの取り組み

レンタルサーバーのCPIでは、株式会社キャッチアップと協力し、baserCMS4のインストーラーを搭載予定です。搭載時期は別途アナウンスいたします。
また、ACE01ではbaserCMS4の動作確認済みですので、ベータ版をインストールしお試しいただくことも可能です。

さらにさらに、baserCMS4リリースを記念いたしまして、弊社セミナールームでbaserCMSの活用セミナーを開催いたします。

関連タグ:

ACE01

↧

共用サーバー（CPI ACE01）にMAツールのMauticをインストールする方法

September 13, 2016, 2:00 am

≫ Next: Flexboxで、レスポンシブ対応のページネーションを作成する

≪ Previous: 国産のbaserCMSが「コンテンツ管理」機能を強化し4にバージョンアップ

昨今マーケティングオートメーション（MA）ツールというワードをよく耳にします。この記事を書いている筆者は「阿部正幸」ですので、イニシャルが同じ（MA）で、なんとなく親近感があります。
様々なMAツールがありますが、今回は筆者が気になって仕方がない、オープンソースのMAツール「Mautic」について記事を書いてみました。

今回の記事は共用型サーバー（CPI ACE01）にMautic2.1.2の最新版をインストールする設定手順のご紹介です。実運用に入る場合は、Mauticを動作させたときの負荷を考慮し、専用サーバーでの運用をおすすめします。とりあえず共用サーバーに導入してみたい、テストをしてみたいという方のために用意いたしました。（もちろんCPIの専用サーバーでも、今回ご紹介した方法でMauticを設置できます。）

それと弊社サーバーに限らず、どの共用型サーバーでも同じ手順で設置できるかと思いますので、皆さん参考にしてみてください。

設定手順

SSH接続

皆さんが嫌いな黒い画面より、SSH接続を行います。

CPI ACE01の場合は、下記にSSH接続設定マニュアルがありますので、こちらを参照ください。
http://acesr.document.secure.ne.jp/tools/sshkeys/

macOSの場合は、SSH接続用の鍵を生成後に、下記コマンドで接続できます。

ssh aaXXXXXXXX@aaXXX.secure.ne.jp -p 10399 -i KEYFILE

aaXXXXXXXX：ユーザーID
aaXXX.secure.ne.jp：サーバーアドレス
10399：ポート番号（テスト：10398、公開：10399）
KEYFILE：秘密鍵

インストール用ディレクトリ作成

SSH接続したコンソール画面に下記を入力します。

ディレクトリをhtmlに移動

% cd html

mauticディレクトの作成

% mkdir mautic
% cd mautic

※ 今回は「mautic」というディレクトリを作成し、Mauticをインストールします。インストールディレクトリはどこでも構いません。

.htaccess修正

Mauticをインストールするディレクトリに「.htaccess」を作成し、下記行を追加します。

# PHPのバージョンを5.6.19に指定
AddHandler x-httpd-php5619 .php

composer インストール

Mauticはcomposerというパッケージ管理ツールを使いインストールをしますので、composerをインストールします。

%curl -sS https://getcomposer.org/installer | php-5.6.19
%php-5.6.19 composer.phar

Mautic インストール

php-5.6.19 composer.phar install

php.ini 編集

php.iniファイルを「mautic」ディレクトリに作成します。
ACE01の場合は、下記にphp.iniファイルの設置方法が載っています。「PHP の設定の変更方法」を参照ください。
http://acesr.document.secure.ne.jp/tools/php/

php.iniファイルの下記行を有効にします。

always_populate_raw_post_data = -1

Mautic 初期インストール

Mauticをインストールしたディレクトリにインターネットブラウザでアクセスし、インストールウィザード画面を開きます。
例）http://example.com/mautic
Database情報を入力します。
CPI ACE01の場合は、あらかじめDatabaseをコントロールパネルで作成しておき、下記情報を入力します。
Database Name：作成したDatabaseの名前
Database Username：接続用のユーザー名
管理者情報を入力します。
Admin Username：muticログイン用のIDを入力します。
Admin Password：muticログイン用のパスワードを入力します。
メール送信設定
以上で設定完了です。
手順3で設定した、IDとパスワードで管理画面にログインしてください。
http://example.com/mautic/s/login

Cronの設定

トラッキングコードを設置し、管理画面に反映を行うにはCronを設定する必要があります。
Mauticを設置したディレクトリに「cron.sh」ファイルを作成し、下記コードを記述します。

Cronは「セグメント情報更新」と「キャンペーン情報の更新」について設定をしますが、その他のCronは下記URLを参照し、適宜追加してください。
（https://mautic.org/docs/jp/setup/cron_jobs.html）

#!/bin/sh

#CPI ACE01の場合「/PATH/TO」は、「usr/home/aaXXXXXXXXX/html」
# セグメントの更新
/usr/local/bin/php-cgi-5.5.9
/PATH/TO/mautic/app/console mautic:segments:update

#キャンペーンの更新
/usr/local/bin/php-cgi-5.5.9
/PATH/TO/mautic/app/console mautic:campaigns:rebuild

cron.shをCron Jobに追加します。

CPIのACE01の場合「ウェブコントロールパネル > 公開サイト用設定 > スクリプト実行ツール」から設定できます。
上記で設置した「cron.sh」ファイルを1時間ごとに実行されるように設定しましょう。

トラッキングコードの埋め込み

下記スクリプトを「example.com」を設置したドメインに変更し、</body>の直前に貼り付けます。

<script>
  (function(w,d,t,u,n,a,m){w['MauticTrackingObject']=n;
    w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)},a=d.createElement(t),
    m=d.getElementsByTagName(t)[0];a.async=1;a.src=u;m.parentNode.insertBefore(a,m)
  })(window,document,'script','http://example.com/mautic/mtc.js','mt');

  mt('send', 'pageview');
</script>

さいごに

Mauticの設定は以上です。
正しく動作するか確認する場合は、Mauticの管理画面にログインしているブラウザ以外で、トラッキングコードを設置したwebページにアクセスします。
Cron Jobが実行されるまで待つか、SSHコンソール画面より下記コマンドを実行します。

php-cgi-5.5.9 /PATH/TO/mautic/app/console mautic:segments:update

コマンド実行後に、Mautic管理画面をリロードするとアクセスした履歴が確認できます。

今回はCPIのACE01という共用型サーバーに設置を行いましたが、Mauticを動作させたことの負荷を考えると専用サーバーで運用するのが無難かと思います。
一般的にMAツールは安くても月額10万円程度は必要になるので、CPIの専用サーバー（月額 27,000円〜）とMauticの組み合わせでも、導入・運用ともにかなりのコスト削減になりそうです。有料のMAツールを検討している方は、CPI専用サーバー + Mauticもどうぞご検討ください。（もちろんCPIの専用サーバーでも、今回ご紹介した方法でMauticを設置できます。）

次回はMauticの簡単な使い方のご紹介をいたします。どうぞお楽しみに。

関連タグ:

ACE01

↧

Flexboxで、レスポンシブ対応のページネーションを作成する

September 26, 2016, 12:00 am

≫ Next: Flexboxで、レスポンシブ対応の価格リストを作成する

≪ Previous: 共用サーバー（CPI ACE01）にMAツールのMauticをインストールする方法

Flexboxを使い、レスポンシブWeb対応のページネーション（Pagination）を作成します。

<< デモを表示>>
※ PCで閲覧している方はデモを開き、画面幅を変えてみてください。

ソースコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>Flexboxテスト</title>
    <meta charset="UTF-8">
</head>
<body>
<h1>Flexbox レスポンシブPagination</h1>
<ul class="pager">
  <li><a href=""><<</a></li>
  <li><a href=""><</a></li>
  <li><a href="">1</a></li>
  <li><a href="">2</a></li>
  <li><a href="">3</a></li>
  <li><a href="">4</a></li>
  <li class="active"><a href="">5</a></li>
  <li><a href="">6</a></li>
  <li><a href="">7</a></li>
  <li><a href="">8</a></li>
  <li><a href="">9</a></li>
  <li><a href="">></a></li>
  <li><a href="">>></a></li>
</ul>  
</body>
</html>

css

.pager{
  /* For IE */
  -js-display: flex;
  display: flex;
}
.pager li{
  list-style-type: none;
  flex: 1;
}
.pager li a {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and ( max-width: 630px ) {  

  /* 全てのli要素を消す */
  .pager li {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  /* 必要なli要素を消す */
  .pager li.active,
  .pager li:first-of-type,
  .pager li:last-of-type,
  .pager li:nth-of-type(2),
  .pager li:nth-last-of-type(2){
    position: static;
    top: initial;
    left: initial;
  }
}

.pager li {

 /* For IE */
 display: flex;
 justify-content: center;
 background-color: #2071B2;
}

.pager a {
  /* For IE */
  flex: 1;
  height:44px;
  text-decoration:none;
  color: #fff;
}

/* Active 以外のhover */
.pager li:not([class*="active"]) a:hover { 
  background-color: rgba(255,255,255,.2);
}

/* Activeのスタイル */
.pager li.active a { 
  background-color: rgba(255,255,255,.65);
  color: #000;
  font-weight: bold;
}

ul {
   -webkit-padding-start: 0px;
}

解説

.pager{
  display: flex;
}
.pager li{
  flex: 1;
}

「.page」に「display : flex」を指定し、<ul class="pager">内の<li>をFlexbox Itemにしています。

Flexbox Itemの<li>は、「flex:1」により、横幅いっぱいまで伸びます。

.pager li a {
  display: flex;
  justify-content: center;
  align-items: center;
}

aタグに対してもFlexboxを指定し、「justify-content: center;」と「align-items: center;」を指定し、a要素を上下中央に配置しています。

@media only screen and ( max-width: 630px ) {  

  /* 全てのli要素を消す */
  .pager li {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  /* 必要なli要素を表示 */
  .pager li.active,
  .pager li:first-of-type,
  .pager li:last-of-type,
  .pager li:nth-of-type(2),
  .pager li:nth-last-of-type(2){
    position: initial;
    top: initial;
    left: initial;
  }
}

メディアクエリを使い、画面サイズが630px以下の場合に、一旦<li>を消し、その後に必要な<li>要素を表示しています。

「li:nth-of-type(2)」はcss3 のセレクタで、<li>要素の2番目という意味です。

詳しくは解説動画を参照ください。

引用

この記事の一部のソースコードは下記サイトを参照しております。
http://codepen.io/iamjustaman/pen/YPLPNR

関連タグ:

Flexbox

↧

Flexboxで、レスポンシブ対応の価格リストを作成する

September 26, 2016, 8:00 pm

≫ Next: CMSを使うと誰でも簡単にカッコイイサイト更新ができるのか？？

≪ Previous: Flexboxで、レスポンシブ対応のページネーションを作成する

Flexboxを使い、レスポンシブWeb対応の価格リストを作成します。

<< デモを表示 >>
※ PCで閲覧している方はデモを開き、画面幅を変えてみてください。

ソースコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>Flexboxテスト</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0" />
</head>
<body>

<div class="wrapper">

    <div class="item">
        <p class="title">Free Plan</p>
        <p class="price">FREE</p>
        <ul class="plan-details">
            <li><strong>100</strong> email addresses</li>
            <li><strong>CPU</strong> インテル® Xeon®</li>
            <li><strong>200GB</strong> Storage</li>
            <li>Support Ads</li>
            <li>Managed Hosting</li>
            <li><strong>24/365</strong> Customer Support</li>
        </ul>
    </div>
    <div class="item">
        <p class="title">CHM-01Z</p>
        <p class="price">27,000 円 / 月</p>
        <ul class="plan-details">
            <li>1 sub-domain</li>
            <li><strong>100</strong> email addresses</li>
            <li><strong>CPU</strong> インテル® Xeon®</li>
            <li><strong>200GB</strong> Storage</li>
            <li>Support Ads</li>
            <li>Managed Hosting</li>
            <li><strong>24/365</strong> Customer Support</li>
        </ul>
    </div>
    <div class="item">
        <p class="title">CHM-02Z</p>
        <p class="price">37,000 円 / 月</p>
        <ul class="plan-details">
            <li><strong>100</strong> email addresses</li>
            <li><strong>CPU</strong> インテル® Xeon®</li>
            <li><strong>200GB</strong> Storage</li>
            <li>Support Ads</li>
            <li>Managed Hosting</li>
            <li><strong>24/365</strong> Customer Support</li>
        </ul>
    </div>

</div>

</body>
</html>

CSS

.wrapper{
    display: flex;
    align-items:flex-end;
    flex-wrap: wrap;
}

/* Style Setting */
.title{
    text-align: center;
    font: 300 32px Oswald, Arial, Helvetica, sans-serif;
    text-align: center;
    margin: 0;
    padding-top: 20px;
}
.price{
    background-color: #be1100;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    padding: 20px;
}
.item{
    flex: 1 0 200px;
    margin:  5px 1px;
    background-color: #fff;
}

/* 画面サイズが630px以下の場合、1カラムにする */
@media all and (max-width: 630px) { 
    .item{
        flex: 0 1 630px;
    }
}

body{
    background-color: #ccc;
}

解説

wrapperに対して、「display:flex;」でFlexboxを指定します。

「align-items:flex-end;」で、縦方向の並びを下揃えにしています。

Name: align-items
Value: flex-start | flex-end | center | baseline | stretch

「flex-wrap:wrap」で、折り返しをするに指定しています。

Name: flex-wrap
Value: nowrap | wrap | wrap-reverse

flexプロパティ（flex-grow、flex-shrink、flex-basis）を使用し、ベースの幅を200pxにしています。

.item{
   flex: 1 0 200px;
}

最後にレスポンシブ対応として画面幅が630px以下の場合に、ワンカラムになるように調整をしています。
flex-basisを「630px」に設定し、630px以下の画面サイズの場合、flex-shrinkを「1」にすることで、各アイテムが同じ割合で幅が減算されます。

@media all and (max-width: 630px) {
 .item{
   flex: 0 1 630px;
 }
}

引用

今回のプライスリストは下記サイトの見た目を元に作成いたしました。
http://codepen.io/cssgirl/pen/azqwqy

画像の一部はW3Cのリファレンスより引用しています。
https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/

関連タグ:

Flexbox

↧

CMSを使うと誰でも簡単にカッコイイサイト更新ができるのか？？

October 4, 2016, 7:15 pm

≫ Next: DrupalのCKEditorにテンプレート挿入機能を追加

≪ Previous: Flexboxで、レスポンシブ対応の価格リストを作成する

CMSとは、Contents Management Systemの略で、コンテンツを管理するためのシステムです。
本来の目的はコンテンツを管理するためでしたが、昨今ですと、webサイトを構築するためにCMSを導入することもあります。

CMSを導入するメリットとして、いつくかありますが

webサイト更新時のコスト削減
デザインの統一
複数人でwebサイトを運用

などがあげられます。

ここで一つ気になるのが「デザインの統一」です。
CMSは専門知識が無いユーザーなども操作し、誰が記事の入力を行っても、サイト全体の「デザインを統一」ができなくては意味がありません。

よくCMSを導入したが操作が難しくて更新できないや、CMSを運用するのに専門知識が必要というのを聞きますが、よくあるCMS導入の失敗例ですよね。

では、専門知識が無いユーザーでもCMSを使い、デザインの統一をしつつ、webページの更新ができるのかを考えてみたいと思います。

専門知識が無いユーザーが入力した記事を見てみよう

それではまず、以前私の知人が美容院をオープンするときにwebサイトをWordPressで構築して差し上げました。当然 ITの経験がなく、webサイトを更新するための専門知識は皆無です。
以下がその美容院のwebサイトです。（許可をいただき掲載しています）

こちらのwebサイトには「ブログ」機能が搭載されていますので、ブログを見てみましょう。

うんうん、ちゃんとブログ書いているね「よしよし」と思いながらも

改行に多さに驚きました。一文一文4つほど改行（pタグ）が入っています。

アメブロなどで、よく見かける改行ラッシュですね。

これを見ても分かりますが、CMSを導入すると専門知識がなくてもwebサイトを更新することは可能です。
しかし、デザインの統一をしつつ、サイト更新ができているか？と言われると疑問が残ります。

では、どうしたら専門知識が無いユーザーでも、デザインの統一をしつつ、記事が更新できるかを考えてみました。

WYSIWYG エディターのカスタマイズ

専門知識がなくとも、デザインを統一しつつ、記事を更新する方法はいくつかあります。１つ目はカスタムフィールドを使いページを更新する方法ですが、こちらは汎用性が失われてしまうのと、様々な記事で紹介がありますので今回の説明では割愛させていただきます。

2つ目は、WYSIWYGエディターを使いページを更新する方法です。

専門知識が無いのにWYSIWYGエディターを使い、カッコよくページが更新できるわけがないとCMSを使ったことがあるユーザーなら思うはずです。

しかしWYSIWYGエディターに、webサイトで使うパーツをテンプレートとして登録しておき、テンプレートから入力を行うことで、デザインの体裁をくずさずに誰でも入力が可能になります。

このデモは、ckeditorのカスタムボタンと、テンプレートを使い入力をしています。
ckeditorのカスタマイズ方法は次回ご紹介いたします。

少し話はそれますが、KDDIウェブコミュニケーションズがリリースしたg.o.a.tは「直感的にきれいなビジュアルブログをつくれるサービス」とスローガンを掲げています。私も実際にg.o.a.tを使いブログを書いてみましたが、なかなかお洒落な感じにブログができましたので、参考にしてみると良いかもしれませんね。

私のテストで書いたg.o.a.tブログはこちら（気が向いたら書き足していきます）
https://masayuki-abe.goat.me/3DaZ67BC

結論

今回のタイトルは、「CMSを使うと誰でも簡単にカッコイイサイト更新ができるのか？？」でした。
結論は、サイトで使うパーツを用意しおき、テキストの変更や、画像の変更で入力を行うと可能です。このような要件のCMSは、実際の案件でも何度か構築をし、専門知識が無い現場の担当者が入力しカッコよくサイトを更新しています。

ぜひCMS構築時の参考にしてみてください。
次回の記事はデモで紹介しているckeditorにテンプレート機能を付ける方法です。

DrupalのCKEditorにテンプレート挿入機能を追加

CKEditorにカスタムボタン（Plugin）を追加する

google-code-prettifyでソースコードを見やすくする

関連タグ:

Drupal

↧

DrupalのCKEditorにテンプレート挿入機能を追加

October 5, 2016, 6:47 pm

≫ Next: CKEditorにカスタムボタン（Plugin）を追加する

≪ Previous: CMSを使うと誰でも簡単にカッコイイサイト更新ができるのか？？

前回掲載した記事「CMSを使うと誰でも簡単にカッコイイサイト更新ができるのか？？」で、WYSIWYGエディターにテンプレート挿入機能を付けたデモをご紹介しました。

今回の記事では下記デモのテンプレートを挿入する機能を実装します。

実装方法

今回の実装はDrupal CMSを元にし、CKEditor + Template機能の組み合わせ実装します。

今回実装を行う環境

Drupal7
Drupal Module : CKEditor
Drupal Module : IMCE
Drupal Module : Wysiwyg API template plugin

Drupal CMSに、３つモジュールをダウンロードし、有効化します。
モジュール設置ディレクトリ：/sites/all/modules
CKEditor
IMCE
Wysiwyg API template plugin
CKEditorのコンフィグを一部変更
CKEditorはデフォルトの状態ですと、Classや、StyleなどのAttributesが手入力ができません。
下記の設定をCKEditorのコンフィグファイルに追記します。
```
CKEDITOR.editorConfig = function(config) {

  // テンプレート利用時に、コンテンツリプレイスのデフォルトOFF
  config.templates_replaceContent = false;

  // class、IDなどのAttributesを全て許可
  config.allowedContent = true;

  // 許可するattributesを指定したい場合
  // config.extraAllowedContent = 'h1(fuga,hoge),p{text-align}';

}
```
CKEditorのコンフィグドキュメント
Drupalとの連携にかかわらずCKEditorの設定を変更する場合にconfigの変更が必要です。
CKEditorの設定変更
管理画面の「環境設定 > CKEditor」を開き
プロフィール編集画面を開きます。
エディターの外見を開き、「テンプレートボタン」を追加し、設定を保存します。
Templateを作成する
以上で設定が完了しましたので、テンプレートを作成します。
「環境設定 > Wysiwyg templates」から、テンプレートを追加してください。
CKEditorで入力
CKEditorを開き、手順3で追加したボタンを押すと、手順4で追加したテンプレートが表示されます。

最後に

webサイトで利用するパーツをWYSIWYGエディターのテンプレートに登録しておくことで、サイトのデザインを統一しつつ誰でも記事を入力することが可能になります。

実際にこの手法で記事を入力している会社は20〜40個くらいのテンプレートを用意し運用しています。
次の記事は、WYSIWYGエディターのカスタムボタン（Plugin）を作成します。

CKEditor Document Configs （外部サイト）
Drupalとの連携にかかわらずCKEditorの設定を変更する場合にconfigの変更が必要です。

CKEditorにカスタムボタン（Plugin）を追加する

CMSを使うと誰でも簡単にカッコイイサイト更新ができるのか？？

google-code-prettifyでソースコードを見やすくする

関連タグ:

Drupal

CKEditor

↧

CKEditorにカスタムボタン（Plugin）を追加する

October 6, 2016, 9:30 pm

≫ Next: 外部サイトリンクに別Window（_blank）を自動付与するJavaScript

≪ Previous: DrupalのCKEditorにテンプレート挿入機能を追加

前回掲載した記事「CMSを使うと誰でも簡単にカッコイイサイト更新ができるのか？？」で、WYSIWYGエディターのカスタムボタン（Plugin）からの入力を紹介しました。

今回の記事では、その実装方法をご紹介いたします。

設定手順

今回はDrupal CMSにCKEditorを導入し、CKEditorのPlugin機能を使いカスタムボタンを実装します。
Drupalに実装しますが、基本はCKEditorのカスタマイズなので、その他CMSでも同じようにカスタマイズすることができます。

今回の実装環境

Drupal7
CKEditor4

Drupalモジュール foobarを作成

CKEditorは基本「ckeditor.config.js」に設定を記述しますが、Drupalの場合設定がDatabaseに入ってしまうので、hook関数を使用し、Pluginを追加します。

ディレクトリ作成
「/sites/all/modules/foobar」を作成します。

foobar.infoファイルを作成

name = foobar
description = ckeditor custom button plugin
core = 7.x

foobar.moduleファイルを作成

<?php
function foobar_wysiwyg_plugin($editor, $version) {
 
switch ($editor) {
 case 'ckeditor':

  return array(
   'foobar' => array(
    'path' => drupal_get_path('module', 'foobar') . '/foobar',
    'buttons' => array(
     'foobar_button' => t('Do something awesome'),
    ),
    'load' => TRUE,
   ),
  );
  break;
 }
}

作成したfoobarモジュールを有効にします。

CKEditorのPlugin作成

続いてCKEditorのPluginを作成します。ここからの設定はその他CMSでも基本同じです。

foobarディレクトリを作成
「ckeditor/plugins/foobar」を作成します。

plugin.jsファイルを作成

(function($) {
 CKEDITOR.plugins.add( 'foobar', {
  init: function( editor )
  {
   editor.addCommand( 'my_command', {

    // editor設定
    exec : function( editor ) {

     //here is where we tell CKEditor what to do.
     editor.insertHtml( 'Insert Text ' );
    }
   });

   // CKEditorボタン設定
   editor.ui.addButton( 'foobar_button', {
    label: 'Do something awesome', 
    command: 'my_command',
    icon: this.path + 'images/icon.png'
   });
  }
 });
})(jQuery);

CKEditor コンフィグ設定（Drupalの場合は不要です）
ckeditor.config.jsに下記行を追加します。
```
CKEDITOR.editorConfig = function(config) {
   config.extraPlugins = 'foobar';
}
```
Pluginを有効にする（Drupalのみ）
Durpal管理画面「環境設定 > CKEditor > プロフィール編集」を開き、作成したPlugin「foobar」を有効にします。

設定は以上です。
追加したカスタムボタン（Plugin）をWYSIWYGエディターに反映し、ボタンをクリックすると「Insert Text」が挿入されたかと思います。

最後に

「CMSを使うと誰でも簡単にカッコイイサイト更新ができるのか？？」で紹介させていただきましたが、CMSはwebの専門知識がないユーザーも入力を行うことを想定して設計しなくてはいけません。

誰が入力しても「デザインの統一」をするためには、今回紹介したWYSIWYGのテンプレート機能か、カスタムボタンを使うことで実現が可能です。

CMSを導入したが操作が難しいと感じるかたは、参考にしてみてください。

CKEditor Document Configs （外部サイト）
Drupalとの連携にかかわらずCKEditorの設定を変更する場合にconfigの変更が必要です。

DrupalのCKEditorにテンプレート挿入機能を追加

CMSを使うと誰でも簡単にカッコイイサイト更新ができるのか？？

google-code-prettifyでソースコードを見やすくする

関連タグ:

Drupal

CKEditor

↧

外部サイトリンクに別Window（_blank）を自動付与するJavaScript

October 26, 2016, 7:53 pm

≫ Next: Drupal7、PHP、静的ファイルにLastModified、ETagを追加する

≪ Previous: CKEditorにカスタムボタン（Plugin）を追加する

サイト内のリンクは同じWindowで開く、外部サイトリンクの場合は別Window（_blank）を自動で付与するJavaScirptの紹介です。

ソースコードの大半は下記のサイトより引用で、より汎用的なコードにするために正規表現を変更し再配布しております。
http://blog.elearning.co.jp/archives/2767.php

改修概要

https://でも、http://でも使えるように改修
「-」ハイフンを含むドメインでも使えるように改修

使い方

jQueryを読み込みます。バージョンは1、2、3系どちらでも動作確認済みです。

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

JavaScriptのコードを記述します。

<script>
$(document).ready( function () {
    var domain = location.href.match(/^http?(s)?(:\/\/[a-zA-Z0-9-.:]+)/i)[0];
    $('a[href^=http]').not('[href*="'+domain+'"]').attr('target','_blank');

    // ドメイン名の取得はlocationプロパティでも取得することができます。
    // 正規表現で取得した例
    console.log(domain);

    // locationプロパティを使用する場合
    console.log(location.hostname);

    // locationプロパティPort番号を含む場合
    console.log(location.host);
})
</script>

※2016年10月27日15時西畑様より、ドメイン名はlocationプロパティを使用しても取得が可能との指摘を受けましたので、追記しました。

解説

3行目：
「location.href.match」メソッドで、domain変数に正規表現でドメイン名だけを抜き出しています。

4行目：
jQueryのDOMセレクタで、aリンクのhref属性にhttpが指定されている箇所でかつ、3行目で抜き出した、自ドメイン以外の場合に、target属性の「_blank」を指定しています。

関連タグ:

JavaScript

↧

Drupal7、PHP、静的ファイルにLastModified、ETagを追加する

October 27, 2016, 2:30 am

≫ Next: RESTful webサービスを構築しよう

≪ Previous: 外部サイトリンクに別Window（_blank）を自動付与するJavaScript

昨今web制作の現場でCDN（Content Delivery Network）の導入や、サイト内をクローリングし、オリジナルのサイト検索機能を付けることが多くなてきました。

これらのプロダクトを導入するときに欠かせないのが、HTTP HeaderのLast Modified（更新日時）と、ETagです。
今回の記事では動的サイトにおいてLast Modifiedと、ETagを付与する方法と、確認方法のご紹介です。

Last Modified と ETagとは

Last Modifiedは、ページの更新日時で、Etagはページのバージョン番号のようなものです。
どちらもwebのコンテンツをブラウズが読み込みに行ったときに、更新があったのかどうかを判断し、自身のブラウザキャッシュを使うかどうかを判断します。

さらにLast Modified、Etagは、CDNや、サイト内クローラーなどからのアクセスのときに、更新日時を渡したり、無駄なクローリングを避けたりと、様々なアプリケーションでも利用されます。

例えばサイト内検索エンジンを構築した場合に、サイト内をクローラーが該当ページのインデックスを作成します。
このときにLast Modifiedが無いと、クローラーはそのwebコンテンツが、いつ更新したかが分かりません。
この状態で検索インデックスを使用すると、検索結果画面の更新日時を検索エンジン経由から取得し表示することができないなどの弊害もでてきます。

Last Modified 、ETagが入っているか確認

HTTPヘッダー情報の確認方法は様々ですが、Google Chromeブラウザの拡張機能の「DHC REST Client」を使うと簡単に確認することができます。

DHC REST Client使い方

Chromeブラウザに追加した、DHS REST Clientを起動し、REQUEST欄に、取得したいHTTP Header情報のURLを入れ「Send」ボタンをクリックするだけです。

静的ファイル

では、まず静的ファイルについて確認してみます。
DHC REST Clientを起動し、URLに下記URLを入力し「Send」をクッリクします。

例）URL：shared-blog.kddi-web.com/sandbox/bootstrap/index.html

Last-Modifiedに日付が入ってヘッダー情報が送られてきました。
静的ページ（pdf、txt、htmlなど）の場合はwebサーバーが自動でLast-Modifiedを指定してくれます。

動的ページ（PHP）の場合

それではここからが本番でもあります、動的ページについてです。
まずは簡単なページをphpで作成します。

- index.php

<?php
header("Content-type: text/html;");
?><!DOCTYPE html>
<html lang="ja">
<head>
    <title>Modifiedのテスト</title>
</head>
<body>
<h1>Modifiedのテストです</h1>
</body>
</html>

こちらのファイルのヘッダー情報を確認すると、Last Modifiedを取得することができませんでした。
そこで下記のようにヘッダー情報を付与します。

<?php
// 現在の日付を取得、ファイルのタイム filemtime($filename)でも可
$timestamp = time();
$last_modified = gmdate('D, d M Y H:i:s ', $timestamp) . 'GMT';
$etag = $timestamp;

header("Content-type: text/html;");
header("Last-Modified: $last_modified");
header("ETag: \"{$etag}\"");

?><!DOCTYPE html>
<html lang="ja">
<head>
    <title>Modifiedのテスト</title>
</head>
<body>
<h1>Modifiedのテストです</h1>
</body>
</html>

今度はLast Modifiedを確認することができました。
現在の時刻を取得しているtime()は、そのページの更新日時を指定するか、filemtime($filename)関数で、フィアルの更新日時を指定ください。

動的ページ（Drupal7）の場合

Drupalで作成されたページについてもLast Modified、ETagは入っておりません。
追加するにはDrupalのモージュルを作成し対応します。

今回作成するモジュール名「hoge」

まず、「/sites/all/modules/custom/hoge」ディレクトリを作成し、下記ファイルを作成します。

- hoge.info

name = hoge
description = Add HTTP Header Modified
package = public-action
version = "7.0"
core = 7.x
files[] = hoge.module
project = "drupal"
datestamp = "1269192313"

- hoge.module

<?php
/**
 * Implements hook_preprocess_html()
 */
function hoge_preprocess_html(&$variables) {

    // ページがnodeだったら
    if(arg(0) == 'node'){

        // 更新日付が取得できたら
        if(isset($variables['page']['content']['system_main']
            ['nodes'][arg(1)]['body']['#object']->changed)){

            $changed_unix_time = $variables['page']['content']['system_main']
                ['nodes'][arg(1)]['body']['#object']->changed;

            // drupal_add_http_header() 関数を使い、Header情報を付与
            drupal_add_http_header('Last-Modified', date( 'D, d M Y H:i:s \G\M\T' , $changed_unix_time) );
            drupal_add_http_header('ETag', $changed_unix_time.'-0');
        }
    }
}

Drupalの場合、記事単体の更新日付をLast Modifiedに設定し、ETagは、更新日付のUNIXタイムに「-0」を足しています。
この「-0」はNode番号でも良さそうですね。

↧

RESTful webサービスを構築しよう

November 14, 2016, 12:53 am

≫ Next: Drupal8 Hello Worldモジュール作成手順

≪ Previous: Drupal7、PHP、静的ファイルにLastModified、ETagを追加する

未来のwebに欠かせないRESTful webサービスについて、「PHPカンファレンス2016 東京」に登壇し話をさせていただきました。
今回の記事はPHPカンファレンスで紹介した内容の「RESTful webサービス」についてと、構築方法、利用法の具体的な紹介です。

当日使用したスライドは下記を参照ください。

RESTful webサービスとは

RESTful webサービスとは、REST(Representational State Transfer)によって定義されたアーキテクチャーの原則に従ってリソース情報を取得、作成、修正、削除が行えるAPIインターフェースです。

リソースへのアクセスはリソース固有のURIにHTTPメソッドを明示的にアクセスします。

簡単にいうと、リソースを必要するwebサイトや、デバイスなどが、RESTful webサービスに、データをくださいと要求すると、RESTful webサービスが、jsonや、xmlデータを返答するサービスです。

注目を集めるREST

RESTという概念は古くから存在しますが、昨今なぜ注目を浴びるのでしょうか。
それは、増え続けるwebサイトや、増え続けるマルチデバイスに効率よくリソース（コンテンツ）を配信することができるからです。

下図のように、1社で複数のサイトを保有し、さらにサイトごとに入っているシステムの違いや、様々なデバイスでの利用を考えると、これまでのwebサイトの作り方では非効率となってきました。

そこでリソース（コンテンツ）配信用のサーバーを用意し、各webサイトやデバイスのアプリケーションからデータを取得しにくる、webシステム（RESTful webサービス）が求められています。

RESTful webサービスの構築

今回RESTful webサービスの構築を下記プロダクトを使い行います。

記事詳細：Drupal8 REST Service
記事一覧：Drupal8 Views
サイト内検索：Apache Solr

Drupal8

まずRESTful webサービスで配信する、リソースの管理ですがDrupal8を使います。
Drupal8は標準でRESTの機能を搭載しており、URIをコールする際にメソッドを明示的にし利用します。

リソース取得： GET メソッド
新規作成： POST メソッド
リソース編集： PATCHメソッド
削除：DELETEメソッド

※.
一般的なRESTful webサービスは、リソース編集の場合PUTメソッドが使われることもあります。
PUTなのか、PATCHなのかについてはMdN Designに記事を連載する予定です。どうぞお楽しみに。

Drupal8インストール / 設定

Drupal公式サイトより、Drupal8 Coreファイルをダウンロードし、webサーバーにインストールしてください。
https://www.drupal.org/download
インストール設定手順は下記サイトを参照ください。（Drupal8のインストール）
REST UIモジュールをインストールします。
https://www.drupal.org/project/restui
ダウンロードし解凍したたフォルダを「l/modules」にアップし、REST UIモジュールを有効にします。
管理画面「環境設定 > REST」を開き、「RESOURCE NAME：コンテンツ」の編集をクリックします。
RESTUI画面で、受け取るメソッドと、認証方法を選択します。
今回はCSRF Tokenを使用して認証を行いますので、「cokie」にチェックを付けてください。
メソッドは下記の通りです。
GET：記事取得
POST：記事新規作成
PATCH：記事編集
DELETE：記事削除
アクセス可能な権限を設定します。
管理画面「ユーザー > 権限」をクリックし、権限設定をしてください。

RESTful webサービスを使う

上記設定作業により、記事取得や、新規作成のRESTful webサービスが構築できたので、実際に使い方を見てみましょう。

GET （記事取得）

項目	値
リクエストURI	http://example.com/node/{NODE_ID}
リターンコード	200 OK
クエリ	_format={Format Type}
メソッド	GET

リクエストサンプル ) http://example.com/node/12?_format=json

POST （新規作成）

POST、PATCH、DELETEは、認証が必要です。CMSにログインしていいない場合は「Login」を行い、CSRF Tokenを取得してください。

LOGIN：

項目	値
URI	http://example.com/user/login
メソッド	POST
HEADER Content-type: application	x-www-form-urlencoded
BODY	name=myuser&pass=mypassword&form_id=user_login_form
リターンコード	200 OK ：認証失敗、303 See Other：認証成功

LOG OUT：

項目	値
URI	http://example.com/user/logout
メソッド	GET
HEADER Content-type	text/html
リターンコード	200 OK

CSRF Token取得

項目	値
URI	http://example.com/rest/session/token
メソッド	GET

POST、PATCH、DELETEで使うCSRF Tokenを取得することができます。

POST(JSON)：

項目	値
URI	http://example.com/entity/node
メソッド	POST
（HEADER） Content-type	application/json
（HEADER） X-CSRF-Token	上記で取得したCSRF Token
リターンコード	201 Created
BODY	{ "type":[{"target_id":"article"}], "title":[{"value":"ノードタイトル"}], "body":[{"value":"Bodyフィールド"}] }

POST(HAL_JSON)：

項目	値
URI	http://example.com/entity/node
メソッド	POST
（HEADER） Content-type	application/hal+json
（HEADER） X-CSRF-Token	上記で取得したCSRF Token
リターンコード	201 Created
BODY	{ "_links": {"type": {"href": "http://example.com/rest/type/node/article"}}, "type":[{"target_id": "article"}], "title": {"value": "ノードタイトル"} }

PATCH （編集）

項目	値
URI	http://example.com/node/{NODE_ID}
メソッド	PATCH
（HEADER） Content-type	application/json
（HEADER） X-CSRF-Token	上記で取得したCSRF Token
リターンコード	204 No content
BODY	{ "nid":[{"value":"123456"}], "type":[{"target_id":"article"}], "title":[{"value":"リーソース編集"}] }

DELETE （削除）

項目	値
URI	http://example.com/node/{NODE_ID}
メソッド	DELETE
（HEADER） X-CSRF-Token	上記で取得したCSRF Token
リターンコード	204 No content
BODY	{ "type":[{"target_id":"article"}] }

以上でDrupal8を使った、RESTful webサービスの記事取得、作成、編集、削除の方法でした。
次回は、記事一覧、記事検索用のインターフェースを実装します。

今回の記事と合わせましてMdN DesingにもRESTful webサービスで使われるメッソドについて、記事を執筆中ですので、どうぞお楽しみに。

参考サイト

JavaScript and Drupal 8 RESTful Web Services

関連タグ:

Drupal

↧

CPI MEGA MIXとは

イベント情報

方法

手順１

手順２

手順３

関連記事

イベント主催時のタスク

イベント告知の鉄則

鉄則１

鉄則２

ソーシャルメディアを使った告知

他メディアを使った告知

Doorkeeper

dots

connpass

イベントカレンダー + ログ

Web担当者Forum

CSS Nite

ビジネス＋IT

ブログ掲載

メールマガジンで告知

最後に

関連記事

セミナーセッション

セミナーセッションで使用したスライド

ハンズオンセッションで使用したスライド

座談会

ビアバッシュ

最後に

おまけ

Tweetのまとめ

360度カメラで撮影した画像

イベント概要

イベント詳細

イベント詳細

イベント詳細

動画での機能紹介

baserCMS4の特徴

コンテンツ管理機能

プラグイン一括管理

多言語やマルチデバイス対応

baserCMSについて

CPIの取り組み

設定手順

SSH接続

インストール用ディレクトリ作成

.htaccess修正

composer インストール

Mautic インストール

php.ini 編集

Mautic 初期インストール

Cronの設定

トラッキングコードの埋め込み

さいごに

ソースコード

解説

関連記事

引用

ソースコード

解説

引用

専門知識が無いユーザーが入力した記事を見てみよう

WYSIWYG エディターのカスタマイズ

結論

関連記事

実装方法

今回実装を行う環境

最後に

関連記事

設定手順

今回の実装環境

Drupalモジュール foobarを作成

CKEditorのPlugin作成

最後に

関連記事

改修概要

使い方

解説

Last Modified と ETagとは