WordPress でレスポンシブ対策には必須のプラグイン?「BJ Lazy Load」


投稿内の画像を自動で遅延ロード、最適化、リサイズ、キャッシング。
さらには、画面の解像度までみて判断してくれる優れもの。

WordPressでレスポンシブwebデザインを実装するならもはや必須的なプラグインだと思います。

遅延ロードというのは、画像が表示領域に入るまでは別の画像 ( 極端にサイズが小さいもの 、透明の画像とか) を表示しておいて、表示領域に入った際に読み込むというテクニックです。

もちろん、レスポンシブwebデザインでなくても使えますので、ぜひともご参考にー。

BJ Lazy Load

2013/11/11 ~ 14日 Bookmarks.

2013/11/11 ~ 14日に読んでおお!と思ったweb関連記事まとめ。

1. ink

レスポンシブなEmailを作成できるフレームワーク

  • tool 、Framework

2. Glyphs

アイコンPSD

http://glyphs.bulb9.com/

3. SVGeneration

SVGをGUIで。Data URLでの取得も可能。

http://www.svgeneration.com/

4. OpenNote

Evernote、 MicroSoft OneNoteライクなwebアプリケーションを作成できる。
(ライセンスはどうなのか知らない。)

http://stardrive.us/OpenNote/index.php?folderID=7399&noteID=6936

5. Free vectors icons for download and Icon font | Flaticon

Photoshopのプラグインまで用意してあるフラットなiconセット。

http://www.flaticon.com/

6. Formoid – Beautiful CSS Form Generator

お問い合わせフォームを簡単に作成可能なアプリ。無料版だとformanoidの表記がフッターに入る。

http://formoid.com/

7. Typeform

ダイナミックなお問い合わせフォームの構築ツール。無料プランあり。

https://www.typeform.com

8.Dropzone.js

ドラッグアンドドロップでアップロード出来るエリアを表示するjavascriptライブラリ。

Dropzone.js : http://www.dropzonejs.com/

WordPress Development Bookmarks.md

Ghostに移行した後の記事がWordPress関連という、なんとも言えない感じ。

ってことで、WordPressに関するリソースを僕なりにまとめてみました。
あとでGithubなんかに公開したいと思います。
案外時間かかるもんですね。これから更新し続けようと思います!

もし、おすすめのツールとかありましたら教えてください。

元ネタは https://github.com/dypsilon/frontend-dev-bookmarks

github : https://github.com/1shiharaT/WordPress-Developement-bookmarks

WordPress Development Bookmarks

(no title)

Responsive and Adaptive Design

レスポンシブ & アダプティブ webデザイン


すっかり普及しているレスポンシブwebデサイン ( 以降 RWD )。
しかし、問題点も数多くあります。

UXを考えたUIを表現しにくい。デバイスごとに最適化しにくい。

デスクトップとモバイル機器の違いは何も画面サイズだけではありません。

使う「場所」も違えば、操作するツールも違う。

ニーズを持つユーザー層や、接続するスピードも違います。

デバイスごとに最適化されているサイトと、
レスポンシブでCSSの範囲で作られているサイト。

どちらが優れたUXをもたらすデザインを考えやすいのか。

いうまでもないと思います。

パフォーマンスが落ちる。

スマホがいくら高性能になってきたからといっても、

デスクトップ・ラップトップとの性能差は大きな壁として存在しています。

javascriptの処理スピード。
ネットへの接続状況。

javascriptがandroidのあの端末だけ異常に重い…….

なんてこともよくある話です。

構成から実装まで複雑である。

RWDでもしフレームワークを使わずに、
一から設計、実装をやる。

経験したことがある人にはわかると思いますが、
多大な時間と労力がかかるものですよね。

開発費用にコストがかかる。

多くの人が未だに、

RWD = ワンソースマルチユース

ワンソース? = コストが低いのでは?

と考えている方がまだまだいます。

しかし現実は、デバイスごとにサイトを作成するのと同程度、
または、それ以上にコストがかかってしまうこともあります。

( もちろんやり方によっては、RWDで制作することにより、コストを削減できます。)


以上、RWDの問題点について簡単に書き出してみました。

レスポンシブwebデザイン。
確かに多様化するデバイスの中、
我々制作者が対応していくには必須の技術だと思いますが、
まだまだ考えるべき課題はたくさんあります。

レスポンシブwebデザインで以下に効率よく制作するか。
にいては、

Web Design Process for The Fiture – こもりまさあき さん –

のスライドがものすごく参考になるので是非目を通してみて下さい。

( 実際に僕もセミナーで発表をきいたのですが、衝撃的でした。)

臨機応変に手法を変える。

僕は別にレスポンシブwebデザイン自体がダメだとは思っておりません。

上記のデメリットについては、

Responsive Web Design is Not the Future

から拝借させて頂きましたが、
僕は、

A Response to ‘Responsive Web Design is Not the Future’

の意見に賛成です。

技術者の努力・知識によって解決出来る問題もたくさんあります。

そこで僕は、

  • レスポンシブwebデザインで素晴らしいサイトを作るためにどんな手法があるのか、

  • これからのレスポンシブwebデザインはどう変わっていくのか。

調べてみました。


レスポンシブwebデザインに広まっている誤解


今のレスポンシブWebデザインは誤解されている

といった文献も見受けられました。

「今のレスポンシブWebデザインは誤解されている」英の著名デザイナーAndy Clarke氏が話す3つの修正点

Responsive and Adaptive Design: Defined

RWDはあくまでも可変するものです。

これがレスポンシブ。

.container{
    width:90%;
    max-width:1200px;
    margin:0 auto;
}

そしてこれが、アダプティブ。

.container{
    width:700px;
}
@media only screen and (max-width: 767px) and (min-width: 480px) {
    .container{
        width:420px;
    }
}
@media only screen and (max-width: 767px) {
    .container{
        width:300px;
    }
}

例とすると、

MR.SIMON COLLISON

が典型的なAWDとして紹介されています。

メディアクエリーを利用していますけど、
コンテンツの配置・幅自体は3段階しか種類がありませんね。

RWDは、デバイスのサイズに常に応答する(サイズが可変する)物。
という考え方が、どうやら海外では主流なようです。

でも、このやり方でもいいと思うんですけどもね。僕は。

もちろんクライアントには説明しますが、

予算は少ないけれど、スマートフォン・タブレットでも見たい。
という方にはぴったりなような気がします。

各メディアクエリーの最小幅に合わせないと崩れるというのがちょっとたまに傷ですが。


3つの「アダプティブwebデザイン」


アダプティブwebデザイン。

こちらもレスポンシブwebデザインが考えられた際に時同じく考案された手法です。

Responsiveが「応答性」なのに対し、

Adaptiveは「適応性」という意味。

いろいろ調べ直した結果、
今現在では、4つのアダプティブwebデザインという概念?があるような気がしました。

一つは、先ほど紹介した、メディアクエリーを利用したアダプティブデザイン。
しかし、こちらはなんだかレスポンシブwebデザインの下位互換として広まっています。

そして2つ目が、
デバイスごとに適応させたサイトを作る方法のこと。

ユーザーエージェントごとにスマートフォン専用サイトや、タブレット専門サイトにリダイレクトさせるものアダプティブwebデザインだそうです。

気になる3つ目は、RWDを内包した概念とした立ち位置のAWD。

以下の図をみるとよくわかります。

title

プログレッシブ・エンハンスメントは、最新のブラウザにはよりリッチに、古いブラウザには最低限の見れるものを、というあの概念です。

RWDというのは、 AWDという考え方の中の一つの手法でしかない、というわけです。

最後は、ユーザーのコンテキストに合わせて表示する内容を切り替えるAWD。

レスポンシブからアダプティブへ – 必要な情報を、必要なときに、必要としている人へ

性別、場所、年齢、といったユーザー属性や、ユーザーの行動を分析し、それに合わせたサイト設計をする。

ということらしいです。

上記の記事・元になったスライドでは、主にセンサーを利用した判別方法を使用していました。

確かに、

  • wifiにつながっている時だけ、背景で動画を流す。
  • 高齢者向けにサイトを用意する

なんてこともできますよね。
ポータルサイトでも、アクセスした地域によってスタートページを変えるということも今までよくあったと思います。

これは、結構面白い考え方だなと感じました。


レスポンシブwebデザイン + アダプティブwebデザイン = ?


………ってことで、

  • レスポンシブwebデザイン ≠ アダプティブ webデザイン

  • これからのデザインはアダプティブ web デザイン。

  • センサーや位置情報を利用したもの

  • RESS ( Responsive web design + Server SIde Compornent )を使用してデバイスごとに適応。

【nginxはやい】AWSにサーバーを移行しました。その際のメモ。

先月のAWS(Amazon Web Service)の勉強会に参加した時に決意したこと。


 AWSでサーバーを構築して見せる!!(ドンっ)

…みたいな感じだったんですが、nginxでつまづき気づけば2週間。

いやー、やっぱりサーバーって難しいです。

この2週間黒い画面とにらめっこでなんとか今日解決しました。

長かった。そして長かった。ホントーにながかったです。

nginxのconfigファイルとどれだけにらめっこしたか….

そして結局php-fpmのほうの設定という熱い展開でした。

苦労したのでメモっときます。

ちょっと寄り道 – Amazon Web Serviceについて

Amazon Web Service(以下AWSとします)は、かの有名な米Amazon社が提供するクラウド・コンピューティングwebサービスのことです。

Iaas呼ばれているサービス形態ですが、他にはwindows Azureや、

Google Apps engineが有名どころです。

クラウド・コンピューティングについては以下の記事が参考になるのではないかと。

5分でわかるクラウド・コンピューティング – アットマークIT

平たくいうと、PC(サーバー)をインターネットを通じて借りるといったサービスです。

AWSのメリットといえば安い早い。そして簡単にできる
とよく言われています。

僕もAWSについては早い段階から知っていたのですが、今まで使う機会が中々ありませんでした。

実際に使うにはクレジットカードとPCがあれば使用出来ますので、是非試して下さい。

nginx(エンジンエックス)について

nginxとはオープンソースのWebサーバです。
webサーバーには他にも様々な種類があります。
普段皆さんがよく使っているapache(アパッチ)や、
Microsoft製のIIS(Internet Information Services)というものもあります。

前者の2つ、nginxとapacheはオープンソースであり、大抵のOSに対応していますが、
後者のIISの方はwindows上でのみ稼働します。

コチラはよく使われているものですね。

transmitのディスクマウント機能 × codekitが便利すぎる

最近本格的にsassやlessなどのcssプリプロセッサを使い始めた1shiharaです。

まぁ、先日あったHTML5勉強会のお陰です。
windowsの時にはいちいち変換→アップロードという手順を踏まなければならなかったので、すごくめんどくさいという印象でした。
しかし、どうやらcodekitというソフトを使用すると簡単にできるみたいですね。
そこから実際に使い始めて見た印象ですが、

神っすね。もう普通の作業並みのスピードを保っていられる。
しかも、ブラウザもオートリロードしてくれるので至れりつくせりです。
でもね。それも所詮ローカル環境のみの話だろと。思っていたんですよ僕は。
クライアント様にとりあえずトップだけでも先にサーバーにアップして欲しいなんて言われると諦めてたんですよ。

一回一回保存してtransmitにドラッグアンドドロップ。

結局こうなるのかと。

いやいや、でも待てよ。いちいち普通の開発者さんたちがこんなこと繰り返してるのか?

やっぱり大事なのは探究心ですよね。

探し始めてまずmac fusionというサーバーをFinderに表示するソフトを見つけたのですが、いろいろあって結局使えず。
それでもへこたれずに探しました。

くそー。transmitってmacで一番使えるFTPクライアントじゃないのかとか。
もうね、多少なりとも恨みも入ってました。
意地でも探してやる。みたいな感情もありましたね。
でもよく考えるとtransmitって正直使い倒したことないんですよね。少なくともごく平凡なFTPクライアントとしてしか使っていませんでした。
ちょっといじくってみるかとtransmitを触っていたんですが、

そこには気になる「ディスクマウント機能」の文字が!!!!!1111
気になってwebサイトを見てみると僕が探していた機能がそこには書いてありました。

[browser-shot width=”700″ url=”http://www.kevinleary.net“]

なんて時間の無駄だったんだ。結構、1,2時間ぐらいは時間たってました。
transmit様悪口いったりしてすみませんでした。
やっぱり最強のFTPクライアントソフトの名は伊達ではなかったんですね!

ということでこの機能で一体どんなことが出来る解説します。

1. sublime textにファイルごと突っ込んでそのまま編集&保存。

sftpなんていらなかったんだ…..

でも、バックアップには気をつけよう。

2. codekitにもそのまま突っ込んでそのままコンパイル。

コンパイルされたファイルも当然サーバー上にそのまま吐き出される。

テキストエディタで保存するだけでコンパイル ×  アップロードも完了。

3. FInderのUIでファイル操作が可能になる。

 しかも結構軽い。

でも探したらかなり有名な機能だったんですね。

 はぁ、もっと前から知っておけばバリバリのsass使いに慣れたのに。。。。

 

これはすごい。便利すぎるmacアプリ2個見つけてしまった件【作業効率化】

PageLayersSlicy

今後の作業が激変しそうなmacアプリを2個も見つけてしまいました…..

僕が知らなかっただけでしょうか。そうだとしたら今まで相当損をしていたような気がします。

そこまで思わせるような作業の短縮には持って来いのアプリを紹介します。

もっと読む

ModernIE様のおかげでmacでwin環境がタダで出来ました。

メインマシンをMACに変えてからbootcampでwindows環境を構築したいなとずっと考えていたのですが、なかなか実行できず。。。

だって、高いよ!!それなら今ある旧メイン機のwindowsで頑張るよ!!って感じだったんですが、ModernIEさんで仮想イメージ配布してるってこと聞いて早速入れてみました。

もっと読む

HTML5 × CSS3 で作るUI要素について考えてみた【webデザイン】

久しぶりに記事を書くので少しこった記事を書いてみます。

スマートフォンやタブレットが台頭してきた今日。
GUIというものは進化をとげ「指」を主なインターフェイスとするに至りました。
タッチパネルをここまで成長させたのはAppleといっても過言ではないでしょう。
iPhoneという製品は瞬く間に業界の常識を一段階上へとシフトさせました。
直感的な操作ができるタッチパネルというものは今後も普及し続けるはずです。
windows8でもタッチパネル操作できる端末は増加しています。
私たちweb開発者は今までマウスとキーボードを使用したwebデザインを主に考えてきましたが、
タッチパネルということを考えると違った考え方をしなければなりません。
今日はタッチパネルの特徴とマウスとの操作性の違いをk舞えた上でHTML5 ×CSS3で作るUXデザインについて考えてみます。

タッチパネルとマウスの違いについて考えてみる。

タッチパネルを操作するインターフェイスは指です。
このことからもタッチパネルとマウスの違いというのはポインターの大きさということが簡単に想像できます。
AppleのiOSUIガイドラインにはタップ可能なUI要素の最小サイズは44px×44pxと書いてあります。https://developer.apple.com/jp/devcenter/ios/library/documentation/MobileHIG.pdf

指はマウスに比べて当然面積が広いですから、細かい操作は苦手です。
タッチパネルで綿密な作業をする時にはスタイラスペンを使用するために
イヤホンジャックにアクセサリーとして突き刺している人も多々見かけますね。
リンクやボタンなどユーザーが操作する要素はなるべく大きく作りましょうというのが
最も基本的な考え方だと思います。

では、第二の違い。
ジェスチャー。マウスでもwindowsだとかざぐるマウスなんてとっても便利ですよね。
僕も重宝していました。
タッチイベントを多用しているサイトってあまり見たことないんですが、
jsですでにタッチイベントを取得するライブラリが結構出ています。

http://www.queness.com/post/11755/11-multi-touch-and-touch-events-javascript-libraries

タッチイベントとサイトへのリンクがまとめられていますのでご活用を!

11のタッチイベント
■ Touch, Tap, Double tap, Hold, Fingers, Swipe, Swipe Up, Swipe Right, Swipe Down, Swipe Left, Drag

しかし、webアプリ・webサイトで使用するにはいささか難しいですね。
絶対ユーザーが迷う気がします。

windowsでUNIXコマンドが使えるかっこいいCUIを構築【mintty】

勉強会に参加するようになってweb制作者のMac率の高さに驚愕している1shiharaTです。
そしてみなさんターミナルから操作をしている。はたから見ると非常にかっこいいです。
でも、windowsはコマンドプロンプトのださいCUIしかない、、、、、
ってことでwindowsでもMacのターミナルのようなCUIとUNIXコマンドが使用できるという「mintty」について調べてみました!

もっと読む

新トレンド・フラットデザインをまとめたサイト「Flat UI Design | A showcase of flat UI design」【webデザイン】

今年の新トレンドである「フラットデザイン」。流れ込んでくるfeedの数も多いのでやはり多くのwebデザイナーさんの関心を奪っているみたいですね。

僕も流行に乗ろうといろいろ探していたのですが、ぴったりのサイト見つけました!

もっと読む