WordPressに関するスライド

WordPressのお仕事をすることになりそうだけど、
最近さわってないのです…

すごく勉強になりそうなスライドを、
自分が後で読むために貼っておきます！

WordPressを使ったWeb制作効率化のためのTips&Tools from kenji goto

ブログの枠を超える？ためのWordPressカスタマイズ入門 from muracchi

CSS3ジェネレータ＆ブラウザ対応状況

やっぱりこの頃スマホの案件が多いですね。
…と言うより、対応するのが当然になってきてるんですね。

なので、HTML5＋CSS3を使う機会が断然増えました。

ブラウザ上で動くCSS3ジェネレータは色々ありますが、
私はこちらが使いやすくてお気に入り。
CSS3 Generator

対応しているプロパティ：

• Border Radius
• Box Shadow
• Text Shadow
• RGBA
• @Font Face
• Multiple Columns
• Box Resize
• Box Sizing
• Outline
• Transitions
• Transform
• Selectors

※GradientはUltimate CSS Gradient Generatorにリンクされてます


あと便利だったのが、
When can I use...
というサイト。

HTML5, CSS3などに
現在、どのブラウザが対応しているかを
一覧で見ることができます。

対象ブラウザに
iOS Safari、Opera Mini、Android Browserが
含まれているところが貴重です。

Graceful DegradationとPolyfill

新しい言葉を覚えたのでメモ。

• Progressive Enhancement
  プログレッシブ エンハンスメント
  →旧ブラウザメインだけど、モダンブラウザで見るとちょっといい感じになってる。
• Graceful Degradation
  グレイスフル デグラデーション
  →モダンブラウザがメイン。旧ブラウザでも見られないことはない。
• Polyfill
  ポリフィル
  →モダンブラウザがメインだけど、JSライブラリなどを使って旧ブラウザでも同じように見せる。

こんな感じで合ってるかな？

お仕事で商用サイト（しかもEC）作ってると
HTML5やCSS3の使い方は悩みますもんね…

IE8以下もまだ当分捨てられないけど、
リニューアルとかのタイミングで
対応しとかないと後で困りそう。

Polyfillは活用する価値ありそうだけど、
重くなりそうなところが
大規模サイトだと厳しいかなぁ。


参照：
HTML5&CSS3入門 第6回 Graceful DegradationとPolyfill

Firefoxのアドオン「User Agent Switcher」

最近スマートフォン対応のお仕事が増えてきたので、
こちらのアドオンを入れました。
便利！
User Agent Switcher

ユーザエージェントを偽装して、
Firefoxでスマホ用のページを見ることができます。

機種ごとのユーザエージェントは検索するといっぱい出てきますので、
それをコピーしてきて自分で追加することもできます。

FireMobileSimulatorでもいいんですが、
たまに表示が崩れることがあったり、
横幅が固定されちゃうのが不便な時があって、
User Agent Switcherの方が気に入ってます。

SassとCompass

最近ついに仕事でもスマートフォン対応がはじまったりして、
HTML5とCSS3を使うようになりました。
（一応勉強しておいてよかった！）

でも、もっと効率的にやりたいなぁと思って、
ずっと気になってたモノを
ついにインストールしてみました。

CSSを拡張するメタ言語の「Sass」
http://sass-lang.com/
と、Sassをさらに便利に使えるフレームワーク「Compass」
http://compass-style.org/
です。

Macのターミナルを開いて、Rubyアップデートしていろいろ打ち込んで、
なんとかインストールできたみたいです。

一応メモ。

$ sudo gem update --system
$ sudo gem install compass

$ compass create --sass-dir "sass" 

--css-dir "css" --javascripts-dir "js" --images-dir "img"

がんばって使ってみたいと思います！

あとは、やっぱり黒い画面はちょっと苦手なので
Compass.appがすごく気になるなぁ…
http://compass.handlino.com/

便利なエクステンション「GuideGuide」

「GuideGuide」はPhotoshop用の便利なエクステンションです。
GuideGuide
※OSX Lionの場合はエラーが出てしまうので、
Extension Managerのパッチを先のインストールします。

ボタンひとつで、お好みのガイドをひいてくれます！

例えば、
・画面を3分割
・周囲のマージンは30px
・ボックスどうしのマージンは20px
などと設定して、「GG」というボタンを押せば、
一瞬でその通りのガイドが作成されます。

設定をセットとして保存しておくこともできます。

Webページのレイアウトをデザインをしている時などに、
とっても便利です！


家のMacではかなり古いバージョンの
PhotoshopとIllustratorで粘っていたのですが、
先日さすがにCS5.5にアップグレードし、
最近はエクステンションが充実してる！
ということに（今頃）気づいたのでした。
いろいろあるのでまた探してみようっと。

「エル・ブリの秘密」

『エル・ブリの秘密　世界一予約のとれないレストラン』
という映画を観てきました。

ドキュメンタリーなんだけどナレーションとか全然なくて、
現代アートのインスタレーションみたいな映画でした。
（一緒に観に行った人、ちょっと寝てた…）

もうなんか、お料理なのに美味しそうとかじゃなくなってるところがすごい。
（実際はすごく美味しいんだと思うのですが…）
シェフっていうより厳しいアートディレクターみたいでした。

こういう仕事を十何年も続けるのってほんとに大変そうだな〜。
でももしできるなら、1年くらい参加してみたいかも。




エル・ブリの一日―アイデア、創作メソッド、創造性の秘密


エル・ブジ 至極のレシピ集―世界を席巻するスペイン料理界の至宝 (世界最高のレストラン―スペイン編)

Social by design

会社の人がこれを読んでおくといいと言っていたので、
がんばって読んでみた。
Zuckerberg to Potential Shareholders: Facebook Is on a Social Mission

IPO申請文書に添えられていたレターなので、
「social by design」「The Hacker Way」など、
Facebook社の基本理念みたいなことが書いてあるんですね。
おもしろかったです。

social by design って、日本語だとなんて言えばいいんだろう？
「デザインされたソーシャル」って感じかな？

Facebook「いいね!」ボタンのエラー

今さらな感じですが、先日初めて
サイトに「いいね！」ボタンを付けてくれという依頼を受けました。
その際、エラーが出たりして結構苦しんだので、後のためにメモっておきます。
（Facebookはよく仕様が変わります。こちらは2012年1月現在の情報です。）

まずはFacebookの開発者ページからコードを取得。
「Step 1 - Get Like Button Code」の部分は
URLを入力して、ボタンの外観を決めるだけなので簡単です。

問題は次の
「Step 2 - Get Open Graph Tags」

こちらで、誰かが「いいね！」ボタンを押した時に
Facebookのウォールに表示される情報を設定します。
口コミ効果を狙ってボタンを設置する場合には重要。

Title
→リンクのタイトル
Type
→「いいね！」したコンテンツの種類
URL
→リンクさせるURL（好きなページに誘導できます）
Image
→ウォールに表示される画像（口コミ狙う場合にはこれが最重要！と言われました）
Site name
→サイト名
Admin
→？？？

「Admin」って何？
読むと、管理者のFacebookアカウントIDか、アプリケーションのIDと書いてあります。

自分のFacebookのページのURL
（http://www.facebook.com/#!/profile.php?id=）
の最後の数字部分がアカウントのIDです。
※Facebookインサイトの「ウェブサイトのインサイト」
っていうボタンからも確認できました。

アプリケーションIDの場合は、
Facebookのアプリページから作成するみたいです。

最初、なくてもいいやと思ってAdminを入れずに設置してみました。
すると、いいね！ボタンをクリックすると
横に「エラー」と出てしまい、 ウォールには反映されるけれど
「＊人がいいねと言っています」などの表示が出ず、
もう一度アクセスするとまたボタンを押せてしまいます。

Facebookのデバッガー （以前はURLリンターという名前だったようです）
からデバッグしてみると、やはり Admin IDがないというエラー内容。

仕方なくAdminに適当なアカウントIDを入れてみましたが、
なぜかまだエラー。
困って調べてまわっていたら、修正が反映されるまで
「数日かかる」
という情報を発見。
あきらめて1日待ってみたところ、無事にエラーが消えました！

あと、本当は1ページに複数のボタンを置きたかったのですが、
Open Graph Tagsを使う場合は、
metaタグなので1ページに1種類しか設置できないようです。
（※いっぱいページ作ってリダイレクトとか頑張ればなんとかなります。）

簡単かと思っていたら、たっぷり時間を取られてしまった
「いいね！」ボタン設置でした。
難しいですね、Facebook……

食べ物の写真を上手に撮りたい

仕事で作っているサイトが食品を扱っているため、
最近よくお料理の写真を撮っています。

一応デジタル一眼レフを使っているけど、
どうも上手に撮れないなぁ…と思っていたのですが、
ある時
「本とか読んで勉強すればいいんだ！」と気づき、
図書館でいっぱい借りてみました。

私の撮りたい写真は、普段の食事のシーン。
調べてみたら、そういうのは「テーブルフォト」って言うんですね。

以下、読んだ本。


[デジタル一眼レフ] 手軽できれいなテーブルフォトの撮り方教えます
構図の決め方など、たくさんの写真で説明されていて
非常に勉強になります。
この本は唯一、自然光じゃない時の撮り方が載ってました。貴重。
（夕食の写真を撮りたいんです…）


テーブルフォトの撮り方 きほんBOOK ~料理、雑貨、花をステキに撮る。~
自分の家で上手にテーブルフォトを撮る方法が
基本的なことから載ってます。


かわいい写真の撮り方手帖 ~あなたの“好き”を撮ろう~
カメラマンやブロガーさんたちの撮った写真が
「こうやって撮りました」の情報付きで紹介されてます。
かわいいです。


いちばんかんたんな料理・雑貨・花の撮り方手帖 ～スタイリングを決めてテーブルフォトを楽しむ～
被写体のスタイリングについて詳しく載っています。
カメラやレンズの説明も具体的で分かりやすかった。

※まだ勉強中なので、また読んだら追加します！


今のところ、学んだことは

1. できる限り自然光で撮る。
2. ななめ後ろからの逆光が基本。（サイド光もあり）
3. いちばん大事なのはテーブルセッティングかも…

です。

食器やテーブルクロスなどの背景と、
料理をどれだけきれいにおいしそうに盛りつけるかが
写真の出来を大きく左右するんだな〜、と
写真技術以前の部分に気づいてしまいました。
これは自分のセンスを磨くしかないですね。

あと同じテーマの本をいっぱい読むと、

• 作例をとにかくたくさん見られる
• 撮る人ごとに小さいコツやテクニックを持っているので、ネタが増えておもしろい

のでとってもおすすめです！