kintone cafe Vol.5 開催レポート

Share on FacebookTweet about this on TwitterShare on Google+

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/

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

 

D2D WEBグラフィックツール今昔 デザインワークフローの転換 v1.0 Note 2016/4/2(土)

Share on FacebookTweet about this on TwitterShare on Google+

D2Dで4/2に京都コワーキングスペースcoto(コト)で開きました「WEBグラフィックツール今昔 ?デザインワークフローの転換?」のレポートです。
当日は花見日よりにもかかわらずcotoの定員に近い26名の方が参加していただきました。

P1000094

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

簡単な当日のタイムスケジュールを説明し挨拶が終わったあと、最初に登壇いただいたのは

Illsutratorでのウェブデザインワークフロー例の紹介
川井昌彦(Cherry Pie Web

P1000091

以前はFireworksを使っていた川井さんは現在はIllustratorを中心にデザインをされているという事です。
実際に仕事で使ったデザインデータを見ながら解説していただき非常にわかりやすかったです。
IllustratorでWEBデザインをする際の初期設定や、文字スタイル、段落スタイル、グラフィックスタイル、グローバルカラーを活用しCSS的な考え方でIllustratorのデザインをしていくというところは以外と昔からIllustratorを使っている人が活用していない使い方で是非印刷系の方に見て欲しい内容でした。
印刷の経験も長い川井さんの視点が大変参考になりました。

詳しい資料はこちらをご覧ください。
http://prezi.com/mojhh25kig3u/?utm_campaign=share&utm_medium=copy

2人目は京都で活躍するフリーランスのウェブデザイナー完山さん。完山さんも実際に納品したデザインファイルを例に解説してくれました。

DSC02119
完山さんはIllustratorでデザインレイアウトをした後、Photoshopに書き出すファイルを持っていきアセット管理でデータを書き出す流れで主に制作しているということです。
制作の途中でのクライアントとのコミュニケーションに便利な様々なツールや画像圧縮に便利なツールなどの紹介もしてくれました。クライアントとのコミュニケーションに後で紹介するプロトタイピングツールを使ってスムーズな確認を行っているところも含めて、フリーランスでデザインから構築までをクライアントと近い距離感で仕事をしている完山さんらしいワークフローで役立つ実践的な内容でした。

詳しい資料はこちらをご覧ください。
https://docs.google.com/presentation/d/1ipdFr4nN0gbHdiJvKLV2LVcISAvMGbrmXSbCvfNaA-8/edit#slide=id.g1289d4a935_2_156

最後に私こと杉山が発表しました。

DSC02134

これからのデザインワークフローの話をしました。

ウェブデザインフローについて昨年あたりからコラボレーションサービスやプロトタイプサービスがリリースされ、デザインするアプリケーションやフォントを持っていないプログラマやコーダーといかに制作をスムーズにすすめるかにいくつかの答えを提供しています。
そのベースとなるフォーマットの多くがPhotoshopとSkecthになっている。その2つが標準になりつつある理由は、2つのソフトのデータフォーマットがオープンであり、アプリを所有していなくてもCLIやJavascript,Rubyなどからレイヤーや画像が取り出せるインターフェイスが用意され、それを元に開発されたサービスが数多くリリースされているという理由です。
そしてカンバセーションツールを各サービスが自前で作るのでなくSlackにつなげるようになっている傾向である事を話しました。
これからのデザインツールもベンダーが1社ですべてを開発するのではなくオープンでつながる事がキーになってくるということです。
そしていくつかコラボレーションサービスを実際に操作して紹介しました。

当日使ったスライドはこちら
webdesign-workflow.pdf

3人の登壇のあとは、1時間質疑応答と来場者の方から出された疑問やお題をみなさんでディスカッションしました。

ウェブ系のワークショップは技術系のものが多く、デザイン系が少ない気がするのでまたやって欲しいという声も複数いただいたので、是非また大阪や神戸でも調子に乗って開催できればと思います。

wordpress AMP Pluginは入れただけではダメ。functions.phpにフィルター追記を忘れずに

Share on FacebookTweet about this on TwitterShare on Google+

いつのまにか、Googleさんがどしどし進めて検索にも反映されたAMP – ACCELERATED MOBILE PAGES PROJECT。

Googleウェブマスターにも項目が追加され「まだやってないの?」感の圧をかけてきます。

amp01

以前D2Dという勉強会でキックオフをやりました。
http://www.pictron.net/2015/11/02/d2d-amp-workshop-v1-0-note-2015113%EF%BC%88%E7%81%AB%EF%BC%89/

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

これに対応する現実的な手法として提供されているのがWordpressの開発元であるautomaticからリリースされているWordpressのAMPプラグインでカノニカルタグで指定する別ページを自動生成するという手法です。
このプラグインの0.1をテストサイトに入れていたのですが、知らない間に0.3.1になっていました。いつものプラグインのようにバージョンアップ出てこない……
中身もだいぶ変わっている……
https://wordpress.org/plugins/amp/

このプラグインをインストールして、ダッシュボード見ても設定も何もありませんので、とりあえずこれだけでいいのかな?と思ってしばらくしてGoogleウェブマスター見ると

AMPのエラーを修正してください。

との事。
Google Developers データ構造の確認ページでampページのURLを入れて確認します。

https://developers.google.com/structured-data/testing-tool/

そうすると

amp02

logo 必須プロパティの欠落

と出ています。
原因を調べるとPluginフォルダの中にあるマークダウンファイルに記述がちゃんと書いてありました、このプラグインは管理画面の設定などはなくfunction.phpにフィルター追記で設定していくというデザイナーには目頭が熱くなる仕様なのです。
開発がどんどん進んでいる過程だからかもしれませんけどね。

このマークダウンは
https://github.com/Automattic/amp-wp
でも見れます。

そこでまずエラーを回避するために最低限いれないといけないのが、メタデータのロゴ指定

add_filter( 'amp_post_template_metadata', 'xyz_amp_modify_json_metadata', 10, 2 );

function xyz_amp_modify_json_metadata( $metadata, $post ) {
	$metadata['@type'] = 'NewsArticle';

	$metadata['publisher']['logo'] = array(
		'@type' => 'ImageObject',
		'url' => '指定のロゴURL',
		'height' => 41,
		'width' => 164,
	);
	return $metadata;
}

ページのテンプレートはプラグインのフォルダのtemplatesのフォルダにはいっています。

amp04
このテンプレートファイルを自分のテーマ内で上書きするためには、この中のsingle.phpを自分のテーマ内に任意の名前で複製します。仮にmy-amp-theme.phpとします。

add_filter( 'amp_post_template_file', 'xyz_amp_set_custom_template', 10, 3 );

function xyz_amp_set_custom_template( $file, $type, $post ) {
if ( 'single' === $type ) {
$file = テーマのパス. '/my-amp-theme.php';
}
return $file;
}

で、カスタムテンプレートを使います。
カスタムテンプレート内でヘッダーに表示されるアイコン画像は$site_icon_urlで呼び出していますが、これは

add_filter( 'amp_post_template_data', 'xyz_amp_set_site_icon_url' );

function xyz_amp_set_site_icon_url( $data ) {
// Ideally a 32x32 image
$data[ 'site_icon_url' ] = '指定のロゴURL';
return $data;
}

で指定します。

ここまで指定しました。

amp03
これでデータ構造の確認ページで確認すると問題がないようなので、とりあえずこれで進めてみます。

他にもCSSやFeatured Imageなどマークダウンファイルにfunction.phpへの追記のコードがあるので、また試してみます。

一番下部にAMPページのGoogle Analyticsのトラッキングコードの追加のコードが記述してあります。
WP Total hackなどで入れているトラッキングコードはAMPページには追記されませんので、自分でamp_post_template_analyticsフィルターで追記します。

この中で

‘apikey’ => ‘YOUR APIKEY GOES HERE’,

となっているところは、
https://developers.google.com/

でAnalyticsのAPI KEYを取得して入力します。

前回のイベントはあまり人が集まりませんでしたが、今度やったら少しは集まるかな?

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

Share on FacebookTweet about this on TwitterShare on Google+

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にカスタムクラスでひと工夫

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)で開催しました。技術的なセミナーはいろいろありますが、フリーランスだと打ち合わせやディレクションってなかなか他の人がどうやっているかを知る機会はないので、そんな事をラフに話し合えればいいかな?と思って試験的にやってみました。