BLOG

PageListオブジェクトとPage Selector Attributeでページの相互連携をササッと作る

この記事はconcrete5 Japan Advent Calendar 2016の19日目の記事です。12日の記事はtomoya.phさんのconcrete5.6.x の逆襲!です。
concrete5.7.*でPage Selector Attributeを使ってページの相互連携は以外と簡単だったという話です。

プログラムを書ける人には、なんだそれ?って話かもしれませんが、フロントエンドやデザインの人はこんな事でも役立つかと思います。
自分が調べた事を残しておくようにconcrete5のアドオンを日本語紹介するサイトを作っています。

http://c5addon.com/

年末は追われて更新が滞ってますか..(汗)
さて、このサイトまずアドオンの紹介をほぼconcrete5.orgと同じような内容で日本語の少し解説をつけて「アドオン(addon)」というページタイプで作っています。

http://c5addon.com/addon/tweet-feed-1

それとは別に「レビュー(review)」というページタイプで機能の紹介ページを作成しています。

http://c5addon.com/review/twitter

別にした理由は、1つのアドオンに対してレビューを複数作る場合があるためです。
思いついた時に使うシーンごとに追加できるようにしたかったのと、これから複数のアドオンを使ったレビューも想定されるからです(ほんとにやれよ俺!)。

こんな感じの構成です。

flow

レビュー側には、どのアドオンの事なのかアドオンのページへの連携がされています。
page_selector_attribute_iconこれはPage Selector Attributeを使っています。

Page Selector Attributeはページ選択を属性(Attribute)に追加できるアドオンです。

ページとテーマの属性メニューを選択

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-19-11-11-44

「レビュー(review)」というページタイプに使用アドオンという属性を追加します。
そうすることで、他のページへの連携をコンポーザーや属性設定からサイトマップで選択することが可能です。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-19-11-14-09
リンクした情報はページIDで保持されるために、ページの階層を移動しても問題ありません。

さて今度はアドオン側にこのアドオンに関わるレビューを出したいわけですが、これもPage Selector Attributeで設定していってもいいのですが、せっかくレビュー側でリレーションを貼っているのでだから、それを使えないの?と思いました。
つまりPage Selector Attributeで自分を設定したページをページリストで自動で検索するという事です。
そこで、下記のページリストオブジェクトの記事を参考に

http://concrete5-japan.org/help/5-7/developer/working-with-pages/searching-and-sorting-with-the-pagelist-object/

PHPなんちゃっての私でもconcrete5のPageList オブジェクトを使えば、こんなのでいいの?ってコードでできちゃいました。

flow_connectこういう構成です。
concrete5の構造の恩恵を受けれるありがたみです。

$page = Page::getCurrentPage();
$list = new \Concrete\Core\Page\PageList();

まずは今のページのオブジェクトを$pageに格納します。この$pageで様々な現在表示しているページの属性を取得できます。
次に$listというページリストオブジェクトを作成。この時点ですべてのページのリストを表示するオブジェクトです。ただし実際に検索をかけているわけではありません。実行したら、そうなるよという事です。

$list->filterByPageTypeHandle('review');

次にレビューのページだけが対象なので、ページタイプのハンドル名でフィルターをかけます。これでレビューページだけのリストになりました。

$list->filterByAttribute('use_addon', $page->getCollectionID());

そしてPage Selector Attributeで作った使用アドオンという属性が自分のページであるページを絞り込みます。filterByAttributeは属性で絞り込みをかけるもので、使用アドオンのハンドルタイプをuse_addonにしましたので、その値に$page からgetCollectionID()でページIDを入れます。
sortByPublicDateDescendingで日付の降順でソート。
最後にgetResultsで実行してページリストのデータを取得します。

$list = new \Concrete\Core\Page\PageList();
$list->filterByPageTypeHandle('review');
$list->filterByAttribute('use_addon', $page->getCollectionID());
$list->sortByPublicDateDescending();
$pages = $list->getResults();

全部書いてもたったこの5行で、それだけのデータが取得できます。すごいですね〜PageListオブジェクト。
あとは

foreach ($pages as $reviewpage):
echo $reviewpage->getCollectionName();
endforeach;

などでデータを表示できます。
リンクをそれぞれのページオブジェクトから取り出すのは、ヘルパーが用意されています。

$nh = Loader::helper('navigation');//ナビゲーションヘルパー
//
//
//
foreach ($pages as $reviewpage):
$hrf = $nh->getLinkToCollection($reviewpage);//リンクのURLを取得
$pname = $reviewpage->getCollectionName();//ページ名を取得
endforeach;

Loader::helper(‘navigation’)でナビゲーションヘルパーで、getLinkToCollectionでページオブジェクトからそのページのリンクするURLの属性を抽出できます。
ページ送りを表示するのも標準的なコードであれば、コードを書く必要はありません。

$pagination = $list->getPagination();
if($pagination->getTotalPages() > 1):
print $pagination->renderDefaultView();
endif;

getPaginationでリストからページ送りのオブジェクトを取得。getTotalPagesでもしページ数が1ページ以上なら、renderDefaultViewでページ送りのコードを表示する。
あとフロントエンド側のCSSでいかようにも装飾できます。

Page Selector Attributeで選ばれたページを検索するという使い方は、まだまだ利用価値があると思っています。
是非活用例など、他にあればどんどん教えてください。

明日12/20はfujigoco2255さんです。インフォグラフィックとな!楽しみ楽しみ。

D2D WEBグラフィックツール デザインワークフローの転換 v2.0 Note 2016/7/23(土)

D2Dで7/23にOBPアカデミアで開きました「D2D WEBグラフィックツール ?デザインワークフローの転換?」のレポートです。
当日は真夏の日照りにもかかわらずキャンセル待ちも出て30名以上の方が参加していただきました。
会場のOBPアカデミアは新しくとてもきれいで、晴れ渡る窓からは大阪城がきれいに見えました。

IMG_0276

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

簡単な当日のタイムスケジュールを説明し挨拶が終わったあと、最初に登壇いただいたのは前回も登壇してくれた京都で活躍するフリーランスのウェブデザイナー完山さん。完山さんは、前回の内容を聞いてからSkecthに移行した話。
「Sketchに辿り着いた話と、制作フローにおける各ツールの連携」というタイトルで話をしてくれました。

IMG_0278

以前から気になっていたSketchを前回のワークショップの情報交換から積極的に使い始めて、今までのワークフローからSketchのたどり着いた理由や制作中に使うツールや進める上でのポイントなどを紹介してくれました。SketchのプラグインCRAFTでプロトタイプコンテンツを効率的に作る解説など、実際の画面で操作しながら具体的に紹介してもらいました。

詳しい資料はこちらをご覧ください。
https://dl.dropboxusercontent.com/u/22613663/d2d/d2d_designworkflow_vol2_motoyama.pdf

2人目は大阪で活躍するフリーランスのウェブデザイナー飯田さん。「10年前から変化ナシ?!新技術を使えなくてもなんとかなるさ!基本の制作ワークフロー」

IMG_0281

飯田さんは制作事務所などから依頼を受けてランディングページやデザインからコーディングまでを制作されているフリーランスです。
メインはPhotoshopでスライス書き出しでwindowsベースで仕事をされています。クライアントがあるものですので、ネット上ですべてを公開できないのが残念ですが、デザインのクオリティが高くツールやプラットフォームがデザインクオリティをあげるのではないとよくわかりました。お仕事に配色やマージンの緊張感があり、是非お話を聞きたくてお願いしました。

詳しい資料はこちらをご覧ください。

http://www.pictron.net/d2d/20160723/all.pdf

3人目はクオリティの高い演出のコンテンツを制作している宇都宮ウエブ制作所から宇都宮 頼子さんに登壇いただきました。
人気ブログおなじといっしょの作者でもあるのでスライドにはおなじみにキャラクターがたくさん登場するほっこり楽しいものでした。

写真 2016-07-23 15 12 03

FlashのiOSでの非対応から動きのあるFlashでの演出をウェブで見なくなってから時間がたちますが、AdobeがFlashという名前を捨ててAnimateCCとなりましたが、少し前のFlashのバージョンからCanvas+CreateJSでの書き出すことでプラットフォーム間での違いを意識せずに作れるようになりました。
これを使えばデザイナーでも複雑なcanvasの記述などを一から記述しなくてもページの演出を作成できるという内容を実例を交えて解説してくれました。

また2次元ビットマップをボーンとメッシュでアニメーション化するSpineというツールでイラストの動きを演出、AnimateCCと連携して仕上げる流れを解説していただきました。
動きと言えばパララックスに飽きた人はチャレンジしてみてはどうでしょう?

詳しい資料はこちら

当日のスライド

最後に私こと杉山がフジロックに行けない事でヤケになって発表しました。

写真 2016-07-23 15 51 40

京都でやった第一回の話を聞けなかったという事で大阪で2回目を開催したこともあり、一回目のダイジェストをざっとやって、あとは最近更新された、Skecthの新機能などを紹介しました。

AdobeのextractでなぜかBracketsとCloudからのextractがなくなり、Cloudと別サービスになるかもしれないという懸念が否定できませんね。

Sketchのレスポンシブデザインを考えたスケーリングの属性指定が追加され(これけっこうスゴイと思ってるのにフューチャーされ方が少ないと思う)、今までのグラフィックツールと考え方を変えないとダメなように思いました。
完山さんが解説してくれたCRAFTでのコンテンツのプロトタイプデザイン制作ですが、CRAFTのバージョンアップで追加されたJSONなどを読み込んでフロントエンドデザインなどを考えるための機能追加を解説しました。

当日使ったスライドはこちら

https://speakerdeck.com/pictron/webdesign-workflow-dot-key

みなさんの登壇のあとは、30分ほどの質疑応答と来場者の方から出された疑問やお題をみなさんでディスカッションしました。
いろいろと質問が出て、おおむね好評をいただいたように思います。

またウェブのデザインを主題にしたワークショップが少ないのでまたやって欲しいという声も複数いただいたので、是非また調子に乗って開催できればと思います。

DojoCon Japan 2016

kintone cafe Vol.5 開催レポート

2016年6月10日(金)19:00〜株式会社神戸デジタル・ラボさんのセミナールームをお借りしてkintone cafe kobe Vol.5を開催しました。

kintoneとはサイボウズが提供するビジネスアプリ作成プラットフォームkintone cafeは全国で開催される勉強会コミュニティです。神戸では5回目の開催となります。

まずはkintoneエバンジェリストの細谷さんのkintone cafe kobeの簡単な紹介があり早速セミナーへと入っていきます。

まず最初はkintoneエバンジェリスト細谷さんからkintoneとメールワイズの連携についての発表。

IMG_0264
kintoneでメンバー管理などを行う際に、複数のユーザーへのメールの一斉送信などを同じサイボウズのメールワイズを使いスムーズに行えるという実例を簡単なサンプルと共に紹介されました。
他にも有料のものでセンドグリッドなどもありますが、メールワイズはkintoneの管理画面にデフォルトでプラグインが用意され、インストールすればすぐ使えると言うことです。

続いてはkitone developerコミュニティで記事を見た人も多い同じくエバンジェリストのjoyzo 山下さんからガジェットとkintoneを連携したアプリの紹介をしていただきました。

IMG_0265
kitoneとは?という丁寧な基本の説明から、一気にハイエンドな実例の紹介に。
前日のkintone hiveで行ったデモのダイジェストをkintone cafe kobeでも見せてくれました。
HackeyJINS MEMEなどの新しいガジェットをクラウドサービスやスマートフォンと連携してkintoneと使うデモを紹介してくれました。

次は神戸デジタルラボの山下さんが「kintoneで情シス業務を高速化したい」という題目で紹介してくれました。

IMG_0266

普段は自社の社内システムを管理している山下さんはプログラマーではないが、自社業務の効率化のために、kintoneやslack、REST APIなどを使い業務フローを改善。
また検索を効率化するため自ら独自の検索インターフェイスを作成。さらにこれから仕事の効率化にどんどん使えるとおっしゃっていました。プログラマーではないと本人はおっしゃていますが、スキルは高いように思います。

4番目に発表したのはサイボウズの竹内さん。

IMG_0267

最近作られたアプリの紹介をして頂きました。
まずはサイボウズ社内で使ってるkitoneで作成した日報アプリの紹介。
実際にデモを動かしながらアプリの構成、レコード集計のカストマイズ、REST APIの使いどころなどを紹介しれくれました。
最後にはkintoneインターフェイスのリニューアルの話です。2017年2月の旧デザインの利用停止までのタイムスケジュールをアナウンスして頂きました。
タイムスケジュールに関して詳しくはこちら?

5番目はアールスリーインスティテュートの浅賀さんから、こちらもkitone hiveで発表された内容を含むアールスリーインスティテュートでのkintoneでの制作例などを紹介いただきました。

IMG_0269
特にkintoneにない部分で、運用面で求められる要求をAWSなどのクラウドサービスやガジェット連携、IoT連携などの様々な手法で課題解決を行ってる例を紹介して頂きました。

最後にkintoneエバンジェリスト細谷さんからkintoneとWordPressを使った開発事例についての紹介がありました。

IMG_0270
WordPressは非常に多く普及するウェブのCMSシステムですが、すでにkintoneとの連携プラグインがあり、連携が容易であることなどを実例をまじえて紹介してくれました。

発表の後は、みなさんから様々な質疑応答の時間。
フリーの開発者、企業の中での業務担当、ウェブ制作者など様々な立場からの質問がありオープンな雰囲気でお話ができました。

終わってからは、軽くピザをつまみながらアルコールも入れつつ懇親会。kintoneを自分の業務で使う人、kintoneを仕事にする人、kintoneを学びたいと思っている人、いろいろな人が気軽に交流できる会で、是非興味のある方は気軽に参加してみてはいかがでしょう。

開催情報はこちらで公開します。

https://kintonecafe-kobe.doorkeeper.jp/

コミュニティに参加ボタンでお知らせが来るようになります。

 

OS X El Capitan で Fireworks データをとりあえず立ち上げてPhoshopに保存しなおす。

MacでOS X El CapitanにアップデートするとFireworksが立ち上がらなくなります。フォントキャッシュとかいろいろ対策をしても安定して動作するとは言い難く、次のバージョンではレガシーのJava Runtimeは非対応となるため環境はPhotoshopかSketchに以降するべきでしょう。

個人的には寂しい限りです、大昔に1冊本を書いたくらいお気に入りのツールでした。
Fireworks Web Parts Design

ただ過去のデザインソースの資産や修正が来たときにリソースを作り直すのは面倒です。

現状のFireworksPNGファイルをそのままPhoshopCC2015で開くと1枚の統合された画像になってしまいます。

幸いFireworksはドキュメントで使われているフォントがインストールされてなくてもプレビュービットマップは表示され、適用フォントも変更されません。

ですので、とにかくファイルを開いてFireworksからPhotoshop形式で保存すればレイヤーも保持され、ベクターはパスとして、マスクはビットマップマスク、テキストも編集できる状態で保存されます。これは一番リソースとして利用できる状態になります。

これを目指す工程をひととおりやってみましたので書き残します。

まず動作環境でJava 6 ランタイムが必要ですのでダウンロードしてインストールします。

いろいろ調べてフォントキャッシュのクリアや使用するフォントを制限して立ち上がるという記事も見ましたが安定動作しませんし、フォントを限定して使うのは現時的には非効率なのですべてオフにして立ち上げて書き出すだけにします。

スクリーンショット 2016-02-13 15.23.38

フォントブックを立ち上げます。

スクリーンショット 2016-02-13 15.24.46

コンピューターのところで右クリックし“コンピューター”を使用停止を選択。

スクリーンショット 2016-02-13 15.28.25

フォントが「切」の状態になってからFireworksを起動します。

スクリーンショット 2016-02-13 15.29.32
ファイルメニュー>別名で保存を選択します。

スクリーンショット 2016-02-13 15.32.15

保存するファイル形式でPSDを選択します。

スクリーンショット 2016-02-13 15.33.06

オプションをクリックして「外観よりも編集性を保持」を選択してOKをクリックします。

スクリーンショット 2016-02-13 15.33.25

編集性を保持にするとフィルターなどもほぼコンバートされ、テキストもテキストとしてレイヤーも保持されるのでリソースとしてフォントもインストールされたものを使っていればそのまま使えます。

スクリーンショット 2016-02-13 15.42.49

Photoshopにないフィルターや一部の線などが画像になります。点線がコンバートされない事があるので、実線でコンバートしてPhotoshopで点線にし直す必要がある場合があります。

ただ過去の素材を再編集して切り出すだけならスライス設定もPhotoshopにはそのままコンバートされます。ボタンをスライスのまま保存してるみたいな事ありますよね。

fire

Fireworksのスライス設定。

psd

保存し直したPhotoshopのスライス。

グラデーションなども、そのまま来ますし更新用として使うにはほぼ問題ないと思います。作り直しがライン関係がほとんどえすね。これはAiから持って来ても同じです。

 

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

この記事は、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(火)

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ページしかないとき、そのシングルページへ飛ぶ

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

検索をかけた際に、結果として条件に合うページが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の使い方

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

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

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

スーパーリロード

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

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

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

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