とりあえずfunctions.phpに書いとくと便利かもしれないシリーズ【WordPress】

今年の雪は急にやってきたりいなくなったり、忙しい天気ですね。
WordPressのカスタマイズをしていて、なんだか毎回functions.phpに同じこと書いてることが増えたので備忘録代わりに。
定番のものから小ネタまで。

ソースコード周り

ど定番ですがまぁ。定番ってことは便利ってことです。

固定ページ名をbodyのクラス名として追加

ページ名のクラスがあったほうがCSS書く時便利ですからね。

CSS、Javascriptの読み込み

これは子テーマでテーマを作っていく場合になりますが。

親テーマの不要なCSSを削除

逆に親テーマのCSSで不要なCSSを読み込みたくない時に。
$handle探すのに手間取ったりもしますが。。

ダッシュボード関連

自動で入力されるPタグを入れない。

記事(POST)はお客さんが使うことも考慮して固定ページにしました。

ウィジェットエリアを追加

追加したら利用したい場所に

投稿の画像相対パスを絶対パスに書き換え

ソースをペタッとWordPressに貼り付けて、あれれ、相対パスが切れた。をなくすよう。
自分のテーマディレクトリの直下にimagesフォルダがある場合です。
パスは適宜変更してください。
小ネタですが以外と便利です。

サイト名のショートコード

これも上と似たようなもんですが、WordPressのテキストエディターでリンク貼ったりする時に。
自分ではあんまりショートコードは使わないんですけど。
いろいろな人が使う場合はあると重宝することがあります。

小ネタ

Advanced Custom Fieldsで画像のパスを取得(ID利用)

基本はthe_field()だけで出力できちゃうお手軽さもAdvance Custom Fieldプラグインの魅力の一つ。
画像の時(IDを利用している場合)にパスの出力忘れることが多かったので関数にしてみました。

感想

簡単なものばかりですけど。
最近はset_query_var()で変数をget_template_part()に渡してget_query_var()で受けてごにょごにょっていうのがちょっとお気に入りです。
固定ページの内容なんかもファイル切り分けてページモジュールみたいにしちゃうと結構楽で。

やり方は人それぞれだと思います、何か使えそうなものがあったらどうぞご利用ください。


背景画像を下に落とす。昔のサイトをレスポンシブに対応させる時

blog170112

今更ですが新年明けましておめでとうございます。
本年もAGNチームブログをよろしくお願いいたします。

さて、今年1発目は軽い小ネタから。いきなり重いと胃もたれしちゃいますからね。
昔固定幅で作ったWebサイトをHTMLや画像はそのままにレスポンシブ化したいという案件で使った小技です。

【DEMO】

固定幅の頃

昔(おそらくスマートフォンの出たてかそれくらい)固定幅で作られたそのサイトは画像多めのサイトで、フロートを駆使してなおかつちょっとでもレンダリング速度を上げたいのでいける画像は背景にして利用していました。
ボックス全体がサイト幅で、そのうちコンテンツが50%、残り50%は画像に見えるけど実は背景、みたいなことをフロートを駆使しつつ作っていたわけです。
※だからフロートでつまづく人は大概背景が表示途中で切れちゃうことに大きな悩みを持っていたのです。Clearfixの歴史を振り返ればみんながフロートとどのように戦ってきたかわかるかもしれません。

そのサイトは単純な角版の画像がほとんどなくて、複数の画像を斜めに組み合わせてみたり、ちょっと凝った画像が多かったのです。
それでも制作された当時と違って、background-positionがより使いやすくなったり(オフセット記法が可能になった)、bacground-sizeが使えるようになったりしているので、その辺を使ってなんとかレイアウトしていこう、という感じでした。
※全面に背景を引きたくてbacground-size : cover;が使えなかった頃はJavaScriptで実装したりしてたんですよ。そう、角丸を画像で組み立てていた頃に近いですね…

実際にやってみる

考え方はよくあるレスポンシブWebデザインの考え方でいきます。
メディアクエリで振り分けて、左側 (右側)にある背景画像をある幅以下の時はコンテンツの下(上)にレイアウトしましょう、というやり方です。よくあるやつですね。

方法1:背景画像じゃなくて擬似要素で配置する。

background-imageでしていたものを擬似要素(::before、::after)のcontentで配置しようというわけです。
それで擬似要素をdisplay: block;にでもしておけば勝手に下に落とせますからね。
ただこのやり方だとうまくいかない場合があるのです。

contentプロパティで配置された画像はサイズの調整が難しいのです。
というのも、contentプロパティで配置された画像はサイズの指定ができないのです。
擬似要素にサイズ(width、height)を指定してもだめ。どんな時に困るかというと、もともとの画像が画面幅より大きかった時。
これ、画像が見切れます。
さて、困った。

この問題そのものに対する解はネット上でもよく見かけますが、contentプロパティで配置するのではなくて、擬似要素のサイズを指定してその背景が画像として使う、ということかもしれません。

方法2:背景画像でいく

今日触れたいのはこちら。
背景画像として使うけど、コンテンツと重なるのは嫌だ、というお客様のために。
方法としてはpaddingで領域を確保してそこに背景画像を100%で表示させます。

この方法のメリットはデバイス幅が変わっても比率を維持できる点です。

領域を確保する

領域を動的にpaddingを使って確保するためにpaddingを%で指定します。
この方法でわかっておかなくてはいけないのは画像の縦横の比率(サイズではなくて)です。
画像の縦横の比率のパーセンテージ分だけpadding-bottom(padding-top)を指定してあげます。

どういうことかと言いますと、
例えば画像サイズが800 × 600だったとします。
これをコンテンツの下に背景用の領域を確保するためにはpadding-bottomに
(600/800)*100%を指定してあげるのです。

これでなんでうまいこと領域が計算できているかというと、これはpaddingの特性を利用しているのです。

The percentage is calculated with respect to the width of the generated box’s containing block, even for ‘padding-top’ and ‘padding-bottom’. If the containing block’s width depends on this element, then the resulting layout is undefined in CSS 2.1.
Unlike margin properties, values for padding values cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box’s containing block.

パーセンテージは、 ‘padding-top’と ‘padding-bottom’の場合でも、生成されたボックスの包含ブロックの幅に対して計算されます。包含ブロックの幅がこの要素に依存する場合、結果のレイアウトはCSS 2.1で定義されていません。
マージンプロパティとは異なり、パディング値の値は負であってはなりません。マージンプロパティと同様に、パディングプロパティのパーセンテージ値は、生成されたボックスの包含ブロックの幅を参照します。

https://www.w3.org/TR/CSS2/box.html#propdef-paddingより引用

大事なところは、
生成されたボックスの包含ブロックの幅に対して計算されます。
ここです。
計算は包含ブロック(ざっくりと親の要素)の高さから計算しているわけではないのです。
包含ブロックの幅を元に計算するので上の式でいけるんですね。
画像がもし親要素に対し幅100%だったとした時に、幅に対する高さの割合を求め、その分だけ親要素に余白(padding)を持たせることで、背景画像の領域が確保されたわけです。
これはマップや動画を100%で埋め込みたい、という時と同じ考え方ですね。

そんなに多様するわけではないけれど、まぁちょっとCSSのお勉強の小ネタ、ということで。

【DEMO】

蛇足ですが…

ちょっとハマったのが、iOSでbackground-size: cover;がうまくいかなかったことです。
これはbackground-attachment: fixed;と一緒に使っているとダメみたいです。
背景固定して全面画像みたいなことができないじゃないか…

ちなみにこれはbackground-sizeを100vhにすることでやりたかったことに近くなったので今回はOKにしました。
background-attachment: fixed;で背景固定して、background-size: auto 100vh;で。


CSSだけでレスポンシブなタイムラインを作る

teamblog_title161214

先日制作した案件で、タイムライン(過去→未来)があったんですね。
こういうのです。

timeline161214

デザインがイラレで来ていて、さてどうしましょうか、と。
もちろん画像でもOKなんですが、横長をタイムラインをスマホで見たら小さくて見えない。
かといって縦長の画像は作りたくない。※それなりに数があったので。
それじゃCSSだけで実装しましょ、とういうことになりました。

【DEMO】

やってみよう

条件

  • 広い画面では横型、狭くなったら縦型にする
  • 項目数は変動する
  • ポイントごとに目印をつける

もちろん、まず一直線を引いて、その上に絶対配置でポイントを打つのもアリだと思います。
今回は基本形を元にちょっといろいろしてみました。
けどあんまりうまくいかなかった。。。
ついでにCSSがいろいろ汚染しまくって悪い見本みたいになってます。
お目汚しですが、よかったらどうぞ。。。

基本形

HTML

SASS

やってること

そんなに難しいことはしてません。
displayを切り替えて、ボーダー引く場所を変えているだけです。
狭い画面では縦型なのでdisplay: block;でいいですね。ボーダーは左に引きました。
横型の場合は、親要素をtableに、子要素をtable-cellにしてみました。(※flexでもうまくいくかもしれません。)
それから親要素にtablelayout: fixed;を指定して均等に割ります。
文字や時間の長さに長短がある場合は子要素のwidthをパーセントで指定してあげればOKです。

目印は子要素の擬似要素で。
基本的には左上に絶対配置して、自分の大きさ分だけ移動(transform: translateX(-50%) translateY(-50%);)します。
最後の子要素だけは矢印っぽくしたいので、三角にしました。これは縦横で向きを変えてあげてくださいね。
現在地は専用のクラスを振って文字色を変えました。

【DEMO】にのっけた他のやつのコードも一応載せときますね。
本当は背景を矢印っぽくするところまで行きたかったんですけど、パッと思いつかなかったので、とりあえず今回はここまで。
年末進行でお忙しいと思いますが、みなさんお体に気をつけて頑張っていきましょう!

HTML

SASS


jQuery3.1.1でbxSliderが動かないこととGoogle Fonts + 日本語早期アクセスを試してみたこと

blog161110

あれ?bxSlider動かない・・・

いつも通りに設置したのになぁ。
なんか書き間違えたかな?。。。
161105sample_bxslider01

コンソールを見るとなんかエラーしてますね。

jquery-3.1.1.min.js:4 Uncaught TypeError: Cannot read property ‘indexOf’ of undefined(…)

jQuery3.xになってload()がなくなった

調べてみたら、bxslider.jsの中でload()が使われているのが原因みたいです。

うーん、load()on('load',function(){})で書き換えればいいらしいですけど、プラグインファイル直接修正するのはちょっとなぁ。
slick.jsと並んでスライダー系では使いやすくて大好きなプラグインなんですけど。。。
bxSliderを使うときはjQueryは3.xになる前のバージョンなら動くので、そっちですかね。
ちょっと残念。

load()以外にも、いろいろなくなったり変わったりしているので参考サイトなどで見ておくといいかもです。

でも動くときもあるよ?

そうなんです。別な時にすっかり忘れててjQuery3.1.1使ってbxSlider入れたら普通に動くんです。
あれれ、jQuery3.xだと動かないんじゃないの?
動いてしまったのはこんなソースです。

それではちゃんとbxslider.jsのエラー箇所をみてみます。

bxslider.jsの該当箇所

functionの第一引数selectorにはver preloadSelector = slider.children.eq(slider.settings.startSlide); が入ってくるようですので、きっと一番はじめに表示されるアイテムのことですね。

image . complete
画像が完全にダウンロードされた、または、画像が指定されなかったなら、true を返します。そうでなければ、false を返します。
<http://www.html5.jp/tag/elements/img.html>

ということなので、<・・・前略・・・>そのスライダーアイテムにsrc属性が指定されたimgもしくはiframeがあったら、<・・・中略・・・>、(※ここから)もし画像がダウンロードされてたらその画像をロードしてね、ここでload()って何よっていうエラーなんですね。
だから、最初のアイテムに画像が含まれていなければ、普通に動くということみたいです。
しかしiframeだと普通に動くな。。なんで??

Google Fontsで「はんなり明朝」とか使える!!

そんなことより(いや上のも大切なことですよ?)、これはすごい大ニュースなのでは??

Google Fonts は、デザイナー ウェブフォントを直感的にご利用いただける、安定したオープンソース ディレクトリです。Google Fonts 早期アクセスでは、現時点で完全にはサポートしていないフォントを試験的に提供しています。

膨大な数の文字のデザインに要する時間や、大容量のフォント ファイルをウェブフォントとして提供する際に必要な技術的インフラストラクチャなど、日本語の書体デザインやフォント開発にはさまざまな課題が立ちふさがります。そこで、規格や技術の開発を進めると同時に、Google Fonts 早期アクセスを通じてデザイナーやデベロッパーの皆様に日本語のウェブフォントをお試しいただけるようにしました。
Google Fonts + 日本語早期アクセスより引用

ということですから、完全にサポートされているわけではありません。
日本語の無料で使えるWebフォントが少ないっていうのは常々の悩みでしたし。
いろんなデバイスを考えた時に明朝体がうまいものがなくて、泣く泣く画像にしたりしてましたから。
「はんなり明朝」とか好きなフォントですし、嬉しいですね!

ただフォントによっては漢字のないものや、ひらがなもないものもあるのでその辺は要注意です。
漢字のない明朝系のフォントは、漢字部分はデフォルトフォントで表示されるみたいです。
なので、フォントファミリーに他の明朝体も入れておくといい感じになるかもしれませんね。

使えるフォント

  • M+ 1p
  • Rounded M+ 1c
  • はんなり明朝
  • こころ明朝
  • さわらび明朝
  • さわらびゴシック
  • ニクキュウ
  • ニコモジ
  • Noto Sans Japanese

漢字なし

  • はんなり明朝
  • こころ明朝
  • ニクキュウ
  • ニコモジ

ひらがななし

  • ニクキュウ

せっかくなのでbxSliderと新しい日本語WebフォントでDEMOを作ってみました。
よかったら見てみてくださいね。
jQueryのバージョンはjQuery3.1.1です!
ちなみに今回はスマホ意識してないのでPCでご覧くださいね(汗)

【DEMO】

参考サイト


まずはてっとり早くWebページを作ろう。CDNとCSSフレームワークとjQueryプラグイン

自分でWebサイトを作りたい、更新は自社で行いたい、Webの勉強を独学で始めよう。
思い立ったが吉日、書店に向かい分厚いHTML辞典を買ってくる。
これ、だいたい間違いなく挫折します。
せっかくその気になったのですから、Webって楽しいを体験してほしいのです。
ですので、今回はCDNを利用して外部ファイルを読み込み、極力手数をかけずにWebページを作ってみたいなと思います。
対象はちょっとならHTMLやCSSがわかるよ、という人向けになります。

今回は前置きが長いので、面倒な人はこちらから。

もしくはデモをどうぞ。

【DEMO】

挫折のわけ

何せHTMLをたくさん掲載してある本はとても分厚いです。
Webサイトに触れた事のない人には意味不明は記号の集合体であり、自分がそれをどのように使うのかの想像が難しいです。
そしてHTMLを覚えてもレイアウトはできません。レイアウトするためにはCSSの知識が必要となります。
今度はCSS辞典を買ってくるのでしょうか?
CSSをクリアしても、自分がよく見ているかっこいいホームページにはなりません。
見た目の装飾などはCSSでOKですが、動作的な部分になるとJavascriptを利用します。
簡単なWebページにだって、こんな風にたくさんの知識やスキルが詰まっています。
覚えなくちゃいけないことがたくさんある時、少なくとも私は挫折します。

お手軽に作ってみよう

CSSフレームワーク

グリットシステムというものがWeb界を席巻してもうかなり経ちます。
また今ではたくさんのCSSフレームワークと呼ばれるものがたくさんあります。
CSSフレームワークとはちょっと乱暴なまとめかたをすれば、デザインされレイアウトの方法を決めたCSS(場合によってはJavascriptやフォントも)をあらかじめワンセットにしてあるものです。
BootstrapやFoundationなどといったところが世界的にもとても有名です。
スマートフォンを始め、モバイル端末の対応はもはや必須のものとなりました。
CSSフレームワークの多くは、レスポンシブWebデザインと呼ばれる、現在主流の方法でモバイル対応しています。
ですから、CSSフレームワークを利用することで、モバイル対応のWebページを作る事ができます。

bootstrap_ss foundation_ss

CSSフレームワークは多くの人を助けてくれました。
CSSやHTMLが不得意な人にはその形式を、デザインの不得手な人にはある程度完成されたデザインを。
今回は数あるフレームワークの中からColiss様が紹介されていたBulumaというフレームワークをチョイスしました。
(※自分の勉強がてら)
Bulumaが他と違うのは、Flexboxという新しいCSSのレイアウトをメインにしたフレームワークであるという事です。

CDNを利用する

CSSフレームワークをはじめ、かっこいい動作をさせてくれるjQuery(Javascriptのライブラリ)のプラグインなど、世界中の多くの人が共通で利用するファイルを特定のサーバにホスティングしてみんなでそこを参照して使う。
WebサイトでCDNを利用するをなんとなく説明するとそんな感じでしょうか?(厳密には違うと思う)
GoogleやMicrosoftが公開しているCDNもあります。jsDelivrcdnjsといったところもメジャーです。
先ほど名前を挙げたBootstrapもCDNで利用できます。
使いたいプラグインやフレームワークの名前+「CDN」で検索すれば、たくさんのものが見つかるでしょう。

今回利用したもの

フレームワークはBulumaを、簡単にCSSのアニメーションを利用できるanimate.cssも利用してみましょう。これらはcdnjsから読み込みました。
jQueryを利用したスライダーを入れたいので、jQuery本体(これがないと動きませんよ?)とslickというプラグインを利用します。
Slickはjsdelivrからです。
アイコンもWebサイトを作る上でとても重要な要素です。
アイコン画像をいちいち用意するのは大変なので、Font Awesomeというアイコンフォントを利用しましょう。

せっかく外部ファイルを利用するので、フォントもGoolge Fontsを利用してみましょうか。

 

Webページを作ろう

上に挙げたものをhead内に読み込みます。

今回のページの内容

あくまでサンプルですが、今回はよくある構成の1ページ完結型にしました。
はじめにスライダーを設置して動きのあるコンテンツでユーザーを惹きつけます。画面幅目一杯のサイズで行きましょうか。
それから簡単なコンセプトを説明したら、サービス内容、会社概要、お問い合わせフォームと続きます。
せっかくですからマップも入れましょう。
SNSのアイコンもいれて、ユーザーとつながりが持てるようにします。
よくある感じですね。

あとはBulumaの書式に従って、どんどんHTMLを書いていきますね。
ここではBulumaの使い方の説明ではないので細かい事は説明しません。
ドキュメントを見ながらレイアウトを作っていきます。
カラム割やカラー、フォームのパーツデザインなどもあらかじめ決まっているクラスをHTMLに付与していきます。

手なりでつくってこんな感じです。

【DEMO】

ちょっと余白がおかしいですが、それなりになんとなくそれっぽいです。
HTMLの他にCSSとjQueryをちょっとだけ書きました。

Webフォントの読み込みとスライダーの微調整、それからGoolgeマップをレスポンシブWebデザインに対応しました。

jQueryの方はモバイル用のナビメニューの動作です。それからSlickの設定をして、スムーススクロールも入れときました。
スムーススクロールは絶対に必要なものではありません。

CDNやCSSフレームワークのデメリット

こんな感じでそんなに学習コストも時間もかけずに、あるものを利用するだけでそれっぽいWebページを作ることができます。
ただし、実際のサイト制作ではCDNやCSSフレームワークを使わないことも多々有ります。
メリットがあるのと同様デメリットもあるからです。

CDNのデメリット

まず第一に他の人のサーバとソースを利用しているということでしょう。
これは、そのサーバがダウンした場合やソースの書き換えが起こった場合に対処が遅れることがあります。
意図的なことではなかったとしても、バージョンアップで自分のHTMLやJavascriptとかちあってうまく動作しなくなることも考えられます。
また、他者のサーバにアクセスするので、読み込みのスピードもそのサーバのスペックに依存することになります。(※1)

※1 ただし、CDNを利用するメリットとして、多くの利用者がいるライブラリ等であればCDNから利用する事でキャッシュを利用できて速いというものがあります。

CSSフレームワークのデメリット

これはjQueryプラグインなども同様なのですが、例えば今回のDEMOくらいであれば、はっきりいってこんなにいらないのです。
フレームワークの機能で利用していないものがたくさんあります。
ある程度知識があれば、フレームワークなどを使わなくても再現できます。
利用していなくでもファイルは全て読み込みます。読み込む量が多ければ多いほどブラウザに負荷がかかりレンダリングが遅くなります。
少しでも、コンマ何秒でも速く、ということを考えると大幅に無駄です。

また、ちょっとだけ専門的な話をすると、CSSはSassやLess何度をコンパイルして作ることが多くなっていますが、CDN経由でフレームワークを読み込むと直接CSSを読み込むので必要な部分だけ利用したいという要望に応えられません。※2
不必要なCSSを打ち消すためのCSSが必要となり、ソースコードが長くなっていきます。

※2 多くのフレームワークでは、コンポーネントや機能によって分割されたSassファイルなどをダウンロードする事ができます。

なにより、一番の問題となるのはフレームワークを利用する事によってデザイン的に似通ったものができやすいことが挙げられます。
ボタンのデザイン、タイトルやメッセージ、フレームワークは綺麗に見えるようにデザインされています。
それをそのまま使うことで、他の誰かと似たようなデザインになってしまうことがあります。

というわけで、DEMOの左上に「add CSS」というボタンを用意しました。
HTMLはもとのまま、CSSのみを追加してデザインを変えて遊ぶ趣向です。
ボタンをクリックするともとのデザインと、CSSを追加したバージョンが切り替わります。
どうでしょうか?ちょっとは違うサイトに見えますか?

まとめ

このようにまったく違うデザインをしようとするとCSSなどの専門な知識はどうしても必要になってしまします。
そのために我々のようなWeb制作者もいるわけですし。
ですが、まずは作ってみる、自分でもやれるということを体験するという点において、CDNやフレームワークは大いに活用すべきかと思います。
自分で作ったものがブラウザに表示されるって楽しいんですよ。

最後に、こういうの使うときはちゃんとライセンスの確認をすることを忘れないでください。

参考サイト


jQueryとCSSで遊ぼう【初級者向け】

blog160912

今回はデザイン→できる!、HTML→OK!、CSS→なんとかいけるよ。。、Javascript→なんか怖い。。。っていう人向けです。

まずはサンプルページはこちら
作っているうちに遊んでしまいました。

最初に今回のお題です。(コードだけだけど・・・)
ボタンを押すと、アニメーションします。Webサイト使っていると当たり前に見るエフェクトですね。

これをちょっと前まではどうやっていたかというと、jQueryを使ってやっていました。

いまでは、このような使い方をすることが多いです。

jQueryの仕事はクラスを付与するだけ、残りの設定はCSSでやろう、ということですね。

jQueryを使う

CSS3がガンガン使えるようになってこういうことは当たり前になっていますけど、ほんのちょっと前はこんなことしてました。
Flashが使われなくなり始め、さまざまなJavascriptのライブラリの中からjQueryが頭ひとつ抜け出し、ブラウザが新しくなってCSS3で表現できることがずっと広がった。そういう経緯です。

jQueryの場合はアニメーションに限りませんが初めにセレクタを選ぶ。「$(‘selector’)」の部分ですね。
それから、そのセレクターの動作、英語の動詞にあたるような部分を書きます。「.fadeIn()」などです。
終わりは「; (セミコロン)」です。

上記の例では初めに「.button」が「on」すると言っています。
on()は、clickやmouseenterなどの動作の時に命令を発動させます。
例では「click」イベントが起こったときに、

の2つの命令をしています。
①では500ms(ミリセカンド)、つまり0.5秒かけてフェイドインをさせています。’ease’はイージングの指定です。
②は0.5秒かけてpadding-topとpadding-leftがそれぞれ50px移動します。これによって、ターゲットは右下に広がるように見えるはずです。

CSSのアニメーションについて

CSSでアニメーションするには2通りの方法があります。

1.transitionを使う方法と2.animationを使う方法です。
transitionは自動ではスタートしません。またループもできません。
しかしサイト制作上、よく使うアニメーションはこちらを使うことが多いです。
transitionとは「遷移」のことですから、ある状態からある状態へ移行する、というイメージでしょうか。

animationはtransitionに比べ、より細かいアニメーションの設定ができます。
キーフレームごとにプロパティの設定ができるので、自分の想像に近い動きを細かくつけていくことができます。

CSSアニメーションでの注意点

CSSのアニメーションでは基本的に数値や計算式で操れるものしかアニメーションできません。
例えばtopの値が0から50pxにすることも50%にすることも5emにするのもOKです。

しかし、margin-leftの値を0からautoにする、これはアウトです。
transitionを使って、margin-rightとmargin-leftをautoにし、ボックスをアニメーションさせながら中央に寄せるということはできません。
もちろん、text-alignをleftからcenterにしてもアニメーションはしません。
数値を扱うものしか使えない、とおぼえておいてください。
先ほどのボックスをアニメーションさせながら中央に寄せる、なんていうのはJavascriptで計算しながらやってもいいです。
※marginをautoして中央寄せのアニメーションはできませんが、同じ動きならおそらく下のコードで行けると思います。

発火

これまではjQueryを使ってアニメーションしていた動きはCSSでも表現できることがわかりました。
CSSのアニメーションを使う場合は何らかの発火イベントを利用することが多くなります。

例えば上述のクリックのイベントもそうですし、当たり前によく使うのはボタンの上にカーソルがのった時、などですね。このカーソルがボタンにのる動きはCSSのセレクタ(:hover)で判定できますから、CSSだけでアニメーションを完結させることができます。

しかし、CSSのセレクタだけでは判定できないものも多くあります。
例えばお申込みフォームで、「利用条件に同意する」のチェックボックスにチェックが入っていないと、送信ボタンが押せない仕掛けはよく見るでしょう。(あれはCSSなしでjQeury(Javascript)だけで実装したりしますが)
もしくは、要素が画面の上部にスクロールしたらアニメーションが始まるという場合もありますね。

こういう時によく使う方法が、アニメーションの動き自体はCSSで設定しておく。→何らかの条件を満たした場合にjQueryを使ってその要素にクラスを付与する。→アニメーション!みたいな方法です。

上記の例でいえば、.targetにはアニメーションする前の状態とtransitionでアニメーションすることが書かれています。
そして.target.animeには、.targetに.animeというクラスが付与された場合に起こる結果が書いてあります。
例えばクリックされたときに、例えばスクロールしてきた時に、jQueryのaddClass()を使ってクラスを付与してあげれば、アニメーションがスタートするわけです。

下の例では.buttonがクリックされたときに.targetにクラスactiveが付与され、アニメーションが始まります。

また、jQueryを使うならば、toggleClass()もよく使うのでおぼえておくと便利です。
下の例では、.buttonがクリックされたときに.targetにクラスactiveがなければクラスactiveを付与、あった場合はクラスactiveを削除します。

さまざまなジェネレーターやライブラリ

自分で実装するとなると、こんがらがる部分も初めのうちは多いと思います。
そんな人でもカンタンにアニメーションができるように、ありがたいことにjQueryにせよCSSにせよいろいろなライブラリやジェネレータが出てきました。
作者さんたちに感謝しつつ、こういうのを使うのも制作スピードを上げる上では有用だと思います。
Javascriptは怖いと思ってるデザイナーさんに、今回やったのはjQueryを利用して、クラスを付けたり消したりしただけです。
たった5行。慣れると便利ですから、ちょっとずつ触っていってみてくださいね。

参考サイト


IFTTT使って自動でGoogleスプレッドシートに記録していく

blog160809

Googleスプレッドシートを使ってますか?
仕事していると必須なExcelですが、職種によってはあのセルが並んでいる画面を見るのも嫌だっていう人がいるのも事実。
使ってみると、それはそれで便利なものですよ。
そんなExcelをブラウザ上で使うことができるGoolgeスプレッドシートを上手に活用すると、作業の効率アップに繋がるかもしれません。

例えばブログメディアを運用していると、記事のリストを作りたいときってないですか?
上司に急に言われて月間の更新数を出したり、Google Analyticsのレポートを作るときに記事の情報が必要だったり。
必要になってから慌てて作るよりも、ブログを更新したら自動的に記録できたら楽ですよね。
そんなときのIFTTTです。

IFTTTの説明はこちらでご紹介しています。
IFTTTを使っていろんなサービスと連携(例えばTwitterからFacebookにアルバムを作る)

ブログの更新記録を作る。

IFTTTのアカウントやチャンネルの登録は済んでいる前提でお話しします。

手順

チャンネルの登録は全部で7Stepあります。
全部英語の画面ですし、ちょっと多い気がするかもしれませんが、そんなに難しくないのでチャレンジしてみてください。

Step0:トリガー

160809_01

「this」をクリックします。

Step1:チャンネルを選択する

160809_02

トリガーとなるチャンネルを選択します。
今回は記事リストを作りたいので「RSS」を選択しました。チャンネルとなるサービスがたくさんあるので、検索ボックスを使って探すと早いです。

Step2:何をトリガーにするか

160809_03

Step2ではStep1で選択したチャンネルで何が起きたらトリガーになるかを選択します。
チャンネル「RSS」では、「New feed item」「New feed item matches」の2種類を選ぶことができます。今回は「New feed item」を選択しました。

Step3:アクション

160809_04

「that」をクリックします。

Step4:チャンネルを選択する

160809_05

アクションさせるチャンネルを選択します。
Googleスプレッドシートを使いたいので、「Goolge Drive」を選択。

Step5:どんなアクションをするか

160809_07

Step4で選択したチャンネルで何が起きたらトリガーになるかを選択します。
Googleスプレッドシートに行を追加して行くので「Add row to spreadsheet」を選びます。

Step6:何をするのかを選択する

160809_08

Step6で選択したアクションの具体的な中身を決めて行きます。
内容は選んだチャンネルによって変わってきます。

この例では入力できる項目が3つあります。
「Spreadsheet name」はスプレッドシートの名前、「Formatted row」には記録する項目、「Drive folder path」はスプレッドシートまでのパス(フォルダー構成)です。
準備できたら「Create Action」をクリック。

Step7:確認・登録

最後に確認画面です。
ここでこのレシピのタイトルを変更することもできます。
OKだったら「Create Recipe」をクリック。
これでこのレシピがマイチャンネルに登録されました。

手順は多そうに見えますが、ポチポチクリックしていくだけなのであっという間です。

完成イメージ ※画像はイメージです
160809_10

これでブログを更新すると自動的にGoogleスプレッドシートに行が追加されていきます。
日付でソートしていったりエクセルと同じように使えるので、リスト管理が一気に楽になりました。

実はバックアップの代わりにもできる?

これのおもしろいところは、WordPressのRSSをトリガーにしていたりすると、本文がHTMLの文字列で保存されるというとこですね。
なので、簡易的なバックアップのかわりにもできます。
もちろんDBのバックアップや画像ファイルなどはダウンロードできていませんが、あくまで簡易的に。
記事データだけ加工して使いたいとか言う時は便利かもしれません。

方法はStep6で記録するデータの中に「EntryContent」を含めればOKです。
入力エリアをクリックしてアクティブにすると、ボックスの右上に青いフラスコのアイコンが表示されるのでクリック。

160809_08_01

セレクトボックスが表示されるので、使いたい項目をクリックすればOKです。

160809_08_02

他のトリガーでもいろいろできる

今回はトリガーをRSSにしましたが、他のトリガー使ってGoogleスプレッドシートにリストを作っていくことができます。
ここからはアイディア次第です。
TwitterをトリガーにLikeしたツイートだけのリストを作るとか、Feedlyで後で読むにしたものをリストにしておくとかできそうです。

何でもかんでもGoogleスプレッドシートでリスト化するのがいいとは思いませんが、やっぱりリストって何かとあると便利ですし、それを自動でやれるならそちらの方がずっと楽でいいと思います。
リストを作るのって時間を取られたりするし、だったらその時間を別な何かに回すことができますから。

以前にGoogleフォームの結果をGoogleスプレッドシートに記録するっていう記事も書きました。よろしければこちらもどうぞ。
Googleスプレッドシートと連携!Googleフォームを使ってみた。


最近ちょっと変わってきてる?ログイン画面について考えてみた

blog160705

SNS、Webサービス・・・
ログインする機会って結構頻繁にありますよね?
それで最近思ったのです、何か前と変わった気がする。。。
ログイン画面ではユーザー名(もしくはメールアドレス)とパスワードがワンセット。
だいたいテキストボックスが2個ならんでいるのが普通でした。

わかりやすいのはGoogleですね。
ちょっと前まで他と同じくテキストボックスが2個ならんでいる形でしたが、現在はメールアドレスの入力をして「次へ」でパスワードの流れになりました。


login_google01login_google03
初めのメールアドレスで入力ミスがあるとそんなアドレスは登録されていませんと怒られます。

login_google02

 

画面の遷移数とボタンを押す回数は多くなりましたが、一層手順の流れはわかりやすくなったように感じます。
また、項目が1個ずつになったので、自分がミスした場所が明確にわかるようになりました。

なんでこんな仕様になったのでしょうか?
中の人に聞かないとわかりませんが、この変更によってスマホの時にミスったときの操作がしやすくなっているように感じます。
メールアドレスとパスワードを入れてログインしようとしたら、メールアドレスにミスがあってログインできない。
こんなときPCだったらタブキーを利用したり簡単にカーソルを合わせられますが、スマホの場合もう一度タップしてテキストボックスをアクティブにして間違えた文字を選択して・・・
ちょっと面倒です。
ミスが起こった時に判定してくれれば、早めに修正して次の行動(パスワードを入力する)に行けるので、ログインする時には自分が成功したといういい気分でサービスに入っていける。
そういう心理的な達成感があるというのは深読みし過ぎでしょうか?

ちなみにYahoo!ではYahoo! Japanはこれまで通りメールアドレスとパスワードですが、yahoo.comの方では「メールアドレス」→次へ→「パスワード」になっています。

それではいろいろなログイン画面を見てみましょう。

Yahoo!

login_yahoojapan
Yahoo! Japan
login_yahoocom
Yahoo!

上述の通りYahoo! Japanとyahoo.comでは違います。

Facebook

login_facebook

位置がちょっと特徴的ですよね。Facebookは携帯番号を登録していればそちらでもログインできます。

Twitter

login_twitter

Twitterも「ユーザー名」+「パスワード」ですね。Twitterも携帯番号もしくはユーザー名でOK!

Instagram

login_instagram

Instagramも「ユーザー名」+「パスワード」。

Pinterest

login_pinterest

Pinterestも「メールアドレス」+「パスワード」。

Tumblr

login_tumblr01

login_tumblr02

Tumblrは「メールアドレス」→次へ→「パスワード」です!
Tumblrはオートコンプリート機能でパスワードまで一気です。

Evernote

login_evernote

Evernoteも「メールアドレス」+「パスワード」。

Simplenote

login_simplenote

Simplenoteも「メールアドレス」+「パスワード」。
実はログイン機能で引っかかるようになったのがこのSimplenoteなんです。
Simplenoteの場合、メールアドレスとパスワードを入力して不備があると、メールアドレスもパスワードも消去されてしまって1からやり直しになるのです。
これがまた面倒!!(←自分のメールアドレス間違うなって話)
Simplenote大好きなのに、ここがちょっと残念…

まとめ

思ったより「ユーザー名orメールアドレス」+「パスワード」の形が多かった結果になりました。
自宅のパソコンやスマホだと一度ログインしたらあまりログアウトすることもないかもしれませんが、会社のパソコンなどだとセキュリティを考えるときっちりログアウトしておくことが必要だったりします。(必要ならブラウザをシークレットモードで立ち上げましょう(笑)遊ぶのはダメですよー)
ログインの機会の多いサービスだと、ストレスなく使える方がいいですよね。
みなさんはどちらの方式がお好みですか?

自分で入力画面作るときも、使い勝手や心理的なストレス考えたらどちらがいいのか考える必要がありそうです。
ちなみにこのブログはWordPressですが、WordPressのログイン画面も「ユーザー名orメールアドレス」+「パスワード」ですね。


アメブロにリブログ機能がついたらしい【Tumblrの話をします】

アメブロにリブログ機能がついたらしいです。
公式ブログのリンクはこちらです。
新機能「リブログ」がいよいよリリース!

この「リブログ」という言葉、どこかで聞いたことありませんか??
Facebookに「シェア」があり、Twitterに「リツィート」があり、そしてTumblrには「リブログ」があります。
※Tumblrにはちゃんと「好き」もありますよ!
このリブログ界にアメブロが参入してくるってことですかね?

blog160614

日本ではなかなか爆発的には広まっていないTumblrですが、世界的にはユーザー数を伸ばしているようです。
日本だとSNSは特にビジネスにおいて情報拡散ツールであるという認識が強くて、それを使ったら一気に情報が広がっていったという体験がないと、なかなか使ってもらえないのかもしれません。
個人的には好きなんだけどなぁ。

Tumblrのリブログ

Tumblrでリブログすると、その記事が自分のダッシュボードにも投稿されます。
ちょっとおもしろいのは自分で投稿したことになるところですよね。
※ちゃんとリブログしたものはリブログしたってわかります。
だから気に入ったものをどんどんリブログしていくと、自分のダッシュボードが気に入ったリブログでいっぱいになってくるとかなんとか。

TwitterやFacebookが個人からビジネスの世界に飛び出てとても必要とされているのに対し、Tumblrはいまだに個人が利用して楽しむのにすごく向いてるSNSなのかなと思います。
だから個人的に参考サイトをまとめたり、気に入った写真集めたり、そういう「集める系」には比較的向いていると思います。

触ってみると結構いろいろできるんですよ、Tumblr。

 

いろいろできるTumblrのススメ

  • ブログとしても使える(無料で始められますね)
  • サーバがいらない
  • 独自ドメインOK
  • おしゃれなテンプレートがたくさん
  • 独自のデザインも使える(HTML・CSS等の知識は必須)
  • ちょっとしたCMSとして使える
  • スマホアプリが結構使いやすい
  • MarkdownでもOK
  • 動画・音声投稿もOK
  • 投稿機能がある(アカウントなしで投稿できる)

などなど。
あとWixにRSS吐き出せるのがBlogerとTumblrだけだとか。

それで以前にもTumblrに関する記事書いたりしているのです。

ログインなしで誰でも投稿できる!Tumblrのゲスト投稿を使ったサイトを作ってみた。【制作編】
ログインなしで誰でも投稿できる!Tumblrのゲスト投稿を使ったサイトを作ってみた。【概要編】

このブログが始まるまでやっていたブログもTumblrでした。
資料的なお話 http://mynotekk.tumblr.com/

こちらはいつもの「空を眺めるサイト Nagamel」です。

12241745_1661604864098440_1419330459294015468_n
このブログはWordPressですが、WordPressならリンク貼り付けるだけでTumblrの記事を簡単に埋め込めるという。。

http://nagamel.tumblr.com/post/144645469337

http://mynotekk.tumblr.com/post/130600725983/selectorinput

こんな感じです。よかったらフォローとかリブログとかLikeしてやってくださいね。
企業サイトでもTumblrでの制作事例もちらほら見かけますし、ちょっと調べてみると楽しいですよ♪
今回は軽い感じでこの辺で。僕は好きなんだけどなぁ。


Simplenoteを誰かと共有(ブラウザ版)

blog160530

今日はSimplenoteのノートを共同編集するにはどうするの?というお話です。
Simplenoteってなんだって方は以前に紹介記事書いたので、こちらをどうぞ。

Simplenoteを使ってみてる(Markdownの練習を兼ねて)

GWもすっかり終わって、急に暑い日が続きへばっている5月の終わりです。
GWに行った沖縄研修旅行の様子こちらです。

これまではコーディングがメインだったyasaiですが、最近めっきりディレクション分野のお仕事が増えまして、悪戦苦闘の毎日です。自分でコード書いてサイト作るのも楽しいですが、お客様のご要望をよりよいカタチとして、サイトを使ってご提供すること、自分のこういうものがいいと思ったものをデザイナーと一緒に作っていくっていうのも楽しいですね。

さて、そんな中で僕がメインで使っているアプリケーションもかなり絞られてきました。

  • Brackets(コーディング用)→※案件によってはDWも使いますがだいたいこれ
  • Simplenote(メモ用)
  • Trello(タスク管理)
  • chatwork(連絡ツール)
  • Illustlator、Photoshop

ワイヤーフレームは手書きだったり、イラレ使ったり。サイトマップや提案書もイラレだったりします。
工数と見積もりの細かい計算用にはExcel使いますしね。

まぁいろいろ使ってますが、メインで使うのは上にあげたものですね。
こうして見ると、基本的にWebブラウザの中で済むものが好きみたいです。
そこでやっと本題に入りますが、Simplenoteを使っていて、ノートをだれかと共同編集したいときにはどうすればいいんだろう?というお話です。ここではブラウザ版でのお話です。

ノートを共有する

結論からいくと、とっても簡単なんですが。
タグを入力する欄に、共同編集したい相手のメールアドレスを入力します。これだけ。

メニューから「SHARE」を選ぶと、OKボタンが表示されてクリックしても何も起こらないし、どうするんだろうと調べたのですが、なかなか見つけられず。
できないのかなぁと少しあきらめかけたのですが、よく見たら書いてますね。「OKボタン」の上に・・・

Simplenote.clipular

Add an email address for another Simplenote user as a tag to share a note. You’ll both be able to edit it.

「他のSimplenoteユーザーのメールアドレスをタグとして加えるとノートが共有できるよー
そしたら共同編集できるからね。」

書いてますね。英語は視界から都合よく消去してました。。。
錯覚良くない、よくみるよろし。

ポイントは、

  1. 相手がSimplenoteユーザーであること
  2. 入力するメールアドレスは相手がSimplenoteのアカウントで使っているアドレスであること

です。メールアドレスを入力するのはこちら。

Simplenote.clipular-(2)
間違っても特にエラーとかでないみたいですので、間違って知らない人と共有してしまわないようにしないとですね。この辺りは自己責任でお願いします。

どんな時にノートを共有しているか

例えば参考サイトのリストアップとか、ざっとした構成案のまとめとかですね。
はっきり言って、Excelでもスプレッドシートでもいいんです。Evernoteでもなんでも。
うちのチームの場合はSimplenoteを使っているだけだってことですので。
その中でもメリット考えると、相手がブラウザの前にいることが多いことと、Excelっぽくないインターフェイスですかねー
あのセルがたくさん並んでいる画面が嫌だっていう人も結構いますから。

もともとは僕一人が使ってて、見てほしいものはMarkdownで書いて、URLを共有して見てもらっていたのです。
そのあとに、これは共同編集できたらいいなぁという要望が出まして、というのが経緯です。
だから共同編集の方は後付けで始めたのですが、思ったより簡単で便利でこれはいいぞ、と。
修正したエクセルをいちいちメール共有する必要もないですし、サーバあげたりしなくてもいいですし。
ノート作ったからどんどん書いていってね、で済むので。

コーディングするのもemmet使って、sass使って、gulp使って。どんどん作業的な部分は自動化していますよね。
今回のは自動化するっていうことではないですけど、根本的なところは一緒で、まじめな表現すれば不必要な工数を減らすとか、状況の見える化・視覚化、とか、そういう表現になりますけど、
つまるところ、「もっと楽したいなぁ」っていうのが根底にあって、こういうところで楽した分、考えなきゃいけないことに時間を使えたり、リアルなコミュニケーションに時間を使えたりするんじゃないかな、と。
それから、チームの中で共有のUIで作業した方がやっぱり効率はいいな、って思います。
今回は簡単ですけどこの辺で。