Page 2 of 4

concrete5:parallaxにカスタムクラスでひと工夫

Share on FacebookTweet about this on TwitterShare on Google+

この記事は、concrete5 Japan Advent Calendar 2015に参加しています。

この記事は菱川さんの書かれた記事
「Javascript 不要!concrete5 でパララックス効果を実装する方法」

に着想を得てさらに少し演出を追加しようと思ったのです。
ですのでJavascript 不要にはなりませんが...
最終的には必要なライブラリーを読み込むとconcrete5のカスタムクラスを使い、演出が自由にできるというものです。

軽くおさらいしますと、こんな感じのモックアップをそのあたりの画像と言葉をかきあつめて作りました。

Design Cafe --home (20151206)

それぞれレイアウトグリッドにコンテンツを入れていっただけです。

スクリーンショット 2015-12-07 9.33

このコーヒー豆の背景のところが、背景のパララックスで指定しているところです。
コンテンツのスクロールに合わせて背景が付いてきます。

Design Cafe --home (20151206)

レイアウトデザインを編集でパララックスを指定し背景画像をコーヒー豆の画像にします。

スクリーンショット 2015-12-07 9.34

さてここから演出を追加していきます。
パララックスでよくみられるスクロールしていきコンテンツの位置に来るとそれぞれフェードインしたり右からスライドして現れたりする。そんな効果を追加してみます。

そのためにオリジナルのテーマに2つのライブラリーを読み込むようにします。

まずは

Animate.css
https://github.com/daneden/animate.css

GitHubからダウンロードして、animate.min.cssを読み込むようにします。アニメーションの動きをclassで指定できるアニメーションです。

もうひとつが

wow.js
https://github.com/matthieua/WOW

GitHubからダウンロードして、wow.min.jsを読み込むようにします。スクロールしていくと、その位置で表示するようにするライブラリーです。

オリジナルのテーマのjs,cssのそれぞれのフォルダに配置します。

スクリーンショット 2015-12-07 9.36

もうひとつwow.jsの初期化のスクプリトが必要なので
init.js
を作ってjsフォルダに入れています。名前はなんでもかまいません。

中身は1行

new WOW().init();

次はヘッダーに読み込みます。
elements/header.php

にそれぞれ読み込みを追加します。

<!-- Animate CSS -->
 <link href="<?php echo $this->getThemePath()?>/css/animate.min.css" rel="stylesheet">
<!-- wow -->
 <script src="<?php echo $this->getThemePath()?>/js/wow.min.js"></script>
 <script src="<?php echo $this->getThemePath()?>/js/init.js"></script>

あとはカスタムクラスに追加していくだけです。

3列のカラムの左にエリアのデザインを編集を選択

スクリーンショット 2015-12-07 9.51
カスタムクラスの

 wow
fadeInLeft

を追加します。
スクリーンショット 2015-12-07 9.51

同じように中央のカラムには

wow
fadeInUp

右のカラムには

wow
fadeInRight

と入力します。

プレビューするとスクロールで現れる際にそれぞれのカラムがスライドしながらフェードインしてくるのがわかります。

01 02

animate.cssのclassはこれだけありますので、それぞれのクラスをつけてみて演出を変更して遊んでみてください。

カスタムクラスでクラス名を変えるだけで、いろんな演出を試すことができます。直感的ですね。

もちろんブロックのクラスでもいいので、ページのそれぞれのエリアやブロックにアニメーションを追加できます。

bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

 

ただやってみると編集モードでもぐるぐるアニメーションが動いてうっとおしいので

Page::getCurrentPage()->isEditMode()をチェックして

編集モードでない時だけ読込するようにします。

<?php if (!Page::getCurrentPage()->isEditMode()) { ?>
 <!-- Animate CSS -->
 <link href="<?php echo $this->getThemePath()?>/css/animate.min.css" rel="stylesheet">
<!-- wow -->
 <script src="<?php echo $this->getThemePath()?>/js/wow.min.js"></script>
 <script src="<?php echo $this->getThemePath()?>/js/init.js"></script>
 <?php } ?>

これで編集モードの時はぐるぐる動かなくなります。
追加しているのもクラス名だけなので読み込まなければ無視するだけですね。

もっと細かくアニメーションのタイミングを遅らせたり、アニメーションをスピードをゆっくりしたりするのは、タグに任意の属性を追加しなくてはいけません。

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>

カスタムテンプレートなどで追加してもいいですね。

できれば来年に
デフォルトのアドオンを改造して値を入れるブロックを作りたいです。

D2D AMP WORKSHOP v1.0 Note 2015/11/3(火)

Share on FacebookTweet about this on TwitterShare on Google+

D2Dで11/3にAMPについて行ったワークショップのレポート
AMP - ACCELERATED MOBILE PAGES PROJECT
はGoogleがモバイル端末でのウェブページの表示の高速化のためのプロジェクトとして公開しました。

※D2Dとは”Dev & Design Draft” 特定の技術やプロダクトに限定せずに、Web制作者が今イチバン気になる情報を知ろうという領域横断型の勉強会シリーズです。
https://d2draft.doorkeeper.jp/

AMPオフィシャルページ
https://www.ampproject.org/

AMP HTML source code
https://github.com/ampproject/amphtml

ただ当日の情報を持ち寄って検証して見ると、ページコーディングのルール作りと言うよりは
FacebookがOGP(Open Graph protocol)でarticle(記事)の内容の概要を取得しキャッシングする仕組みのgoogle版のような側面を持ちます。

仕様の詳細よりもテスト稼働の結果で動作のイメージを見たほうが理解が早いと思います。

Chromeでデベロッパーツールを起動してデバイスモードをモバイル端末に設定してから↓のURLにアクセスします。

demo
From: http://g.co/ampdemo

01

google.co.jpで表示されにくい場合は、www.google.co.ukにすると表示されやすくなるかもしれません。

最近のニュースに関するキーワードを検索すると、各ニュースメディアの記事のサマリーはカルーセルで表示されます。

02

クリックすると、タイムラグなしにニュースの本文が表示されます。

03

この状態でスワイプすると、次のニュースにページごと遷移します。

04

このページを表示するまでは、ページ表示や画像のロードが非常に速やかに処理されます。ページ内容や画像はGoogleにキャッシュされCDNから読み込むために非常に高速です。
最終的にどのように活用されるかは全てあきらかではありませんが、これが1つの事例です。

ここに表示されるBBCやNew York Timesにアクセスすると各記事にrel=”amphtml”というコードが記述されています。

参考ページ)
http://www.bbc.com/news/business-34717990

06

<link rel=”amphtml” href=”http://www.bbc.co.uk/news/amp/34717990″>

このamphtmlのアクセスすると非常にシンプルなAMPの仕様で記述されたHTMLページが表示されます。

05

例えば画像のタグがimgタグでなく

<amp-img src=’http://ichef.bbci.co.uk/news/999/cpsprodpb/0275/production/_86492600_jp.jpg’〜

となっているのが確認できるでしょう。

またこちらの記事のコードには

<link rel=”canonical” href=”http://www.bbc.co.uk/news/business-34717990″>

さきの記事のURLがカノニカルタグで指定されています。

wordpressの開発元automaticからすでにリリースされているプラグイン

wordpress plugin
https://wordpress.org/plugins/amp/

をインストールすると、各記事にamphtmlが指定され、自動的にパーマリンクで各記事の末尾に/amp/が追加されたページが追加されます。
このページにアクセスすると、画像のimgタグをamp-imgに置換されたり仕様を変換されたページが表示されます。
また元のページのカノニカルタグも自動で追加されます。

他のCMSも追随するものと思われます。

AMPの仕様はgithubのtutorialやReferenceを参照してください。

画像等はamp-imgタグを使う事でキャッシュされるとアナウンスされています。
またFomatのHTML Tagsに書かれているように、使えないタグが多くあります。基本的にampが提供するjavascritp以外は使用がみとめられていません。

ページのエレメントに関しては、カルーセル、広告を入れるiframe、instgram、twitter、youtube、pinterest、anime、lightbox、audioなどはタグベースで提供され、それぞれのjavasciptを読み込むことでタグを記述するだけで表示されます。

<script async custom-element=”amp-youtube” src=”https://cdn.ampproject.org/v0/amp-youtube-0.1.js”></script>

このAMPでページを記述することで、twitterなどの非同期の読込や広告の読み込みなどをページに入れてもページのロードとレンダリングが遅延しないような設計になっています。

また各ページのAuthorのロゴやタイトルなどの情報はJSON-LDで記述され、ページヘッダーに記述されます。最初に表示されたカルーセルのメディアのロゴなどはここで指定されていま。
typeの分類はhttp://schema.orgに準拠します。

<script type=”application/ld+json”>
{
“@context”: “http://schema.org”,
“@type”: “NewsArticle”,
“headline”: “Open-source framework for publishing content”,
“datePublished”: “2015-10-07T12:02:41Z”,
“image”: [
“logo.jpg”
]
}
</script>

githubに記載されるtutorialやコード例

Resources:

Tutorials:

Reference:

Technical Specifications:

この仕様に関しては、まだまだ改善されていくということですが、いろいろなレポート記事を見ると
ページを新しく増やすのはどうかと思うが
この仕様の善し悪しはともかく、サーチエンジンの巨人が言ってる事に逆らって得はないという論調が多く見られます。

今すぐ企業コンテンツなどを作る際に必要な知識ではないかもしれませんが、モバイルフレンドリーのようにある日リリースが発表され対応を求められるかもしれません。

アウトライン程度は把握しておいても損はないでしょう。

WordPressで検索結果が1ページしかないとき、そのシングルページへ飛ぶ

Share on FacebookTweet about this on TwitterShare on Google+

これは要求仕様で言われたので海外のスニペットから探してやってみたが、いつでも使えるか?というと微妙です。

検索をかけた際に、結果として条件に合うページが1ページしかない時に、1ページの結果リストページを表示せずに、そのシングルページへジャンプさせます。

以下の内容をfunction.phpに追記します。
他にも検索のフックをつかってないか注意してください。

add_action('template_redirect', 'one_result');
function one_result() {
 if (is_search()) {
 global $wp_query;
  if ($wp_query->post_count == 1) {
  wp_redirect( get_permalink( $wp_query->posts['0']->ID ) );
  }
 }
}

さぼり気味なデザイナーのhtaccessの使い方

Share on FacebookTweet about this on TwitterShare on Google+

運用しているサイトのほんの一部をデザインを運用中に少し変えてテストを見せるときどうしますか?

  • このサイドバーの一番下にこんなの入れたらどんな感じに見える?
  • メインのニュースの幅をもう少しせまくして罫線いれたらどんな感じ?

そんな時にさぼり気味なデザイナーが使える一度書いておけば後で楽なhtaccessの使い方があります。

スーパーリロード

Share on FacebookTweet about this on TwitterShare on Google+

クライアントから来た校正メールに基づきCSSや画像を更新して「ご確認ください〜」なんて送ると、「変わってないんですが(怒)」とのメール。

「すいません、スーパーリロードしてもらえますか?」 「は?なにそれ」 「お使いのブラウザはなんですか?バージョンは?」 「キャッシュをクリアしてもらえます?」 などというやりとりは不要な時間を取ります。ページにまとめましたので、これからこのページのURLを見てくださいと送る用のページです。

D2D ディレクション アンカンファレンス vol.1 ヒアリング Memo 2015/5/21(木)

Share on FacebookTweet about this on TwitterShare on Google+

2015/5/21(木)平日の19:00から十三コワーキングに集まり「zィレクション アンカンファレンス vol.1」という催しをD2DRAFT(Dev & Design Draft)で開催しました。技術的なセミナーはいろいろありますが、フリーランスだと打ち合わせやディレクションってなかなか他の人がどうやっているかを知る機会はないので、そんな事をラフに話し合えればいいかな?と思って試験的にやってみました。

SVG Start Meeting Memo 2015/2/11(水・祝)

Share on FacebookTweet about this on TwitterShare on Google+

この記事は2015/2/11(水・祝)にD2DRAFT(Dev & Design Draft)主催で十三コワーキングを貸し切り行われた“SVG Start Meeting”で共有した情報のメモです。

concrete5は、デザイナーが運用をデザインできるオープンソースCMS

Share on FacebookTweet about this on TwitterShare on Google+

concrete5のアドイベントカレンダーの11日目を担当しますピクトロンウェブプランニングの杉山です。 最初にconcrete5を知ったきっかけですが、次世代CMSを模索している中でと言いたいところですが....

このアドイベントカレンダーの締めをかざるコンクリートファイブジャパンの代表である菱川さんと家が近所であったというとてもローカルな話です。そこで徐々にマインドコントロールされたわけですが、結果的に非常に良かったと思っています。

concrete5大阪勉強会 第28回での発表内容

Share on FacebookTweet about this on TwitterShare on Google+

concrete5大阪勉強会第28回
2014-07-20(日)14:00 – 17:00
での発表資料。
コンクリート5でシンプルなテーマで構築をはじめたい人のスターターテーマのバリエーションを調べてみました。
デフォルトのテーマではなくシンプルで何も入っていないテーマや、CSSフレームワークが入っているテーマ、スターターテーマに何がいいかをご紹介。

WordCamp Kobe2013 “コンテンツやデザインを実現するための事例集” 補足資料

Share on FacebookTweet about this on TwitterShare on Google+

このコンテンツは WordCamp Kobe2013 の
sneak idea show「コンテンツやデザインを実現するための事例集」の
セッションの時間で説明できなかった内容を補足するための資料です。