ドラッグ＆ドロップでWebアプリを作る「Divshot」

ちょっと触ってみただけですが、
サクサク動くし、おもしろいです。
デザインもきれい。

Divshot
http://divshot.com/

ブラウザベースのHTMLエディタとしても
使えそうなところがいいですね。

いまのところベータテスト中で無料です。

レスポンシブのフレームワーク「Foundation」

モバイルファーストでレスポンシブなフレームワーク、
Foundation
http://foundation.zurb.com/
を試してみようかな、と思ってメモ。

マークアップも良さそうな感じなんですが、
jQueryではなくて、
Zepto.js
http://zeptojs.com/
を使っているのが気になったポイント。

先日、某大規模サイトの制作チームに
スマホサイトについてヒアリングさせてもらうという
貴重な機会があったので、
おまけでついて行ったのですが…
サイトの軽量化のため
「jQuery Mobileでも重すぎるので、
それをさらに軽量化したものを作って使ってる」
とのこと。

でもうちの職場は少人数低予算なベンチャーなので、
そんなの開発できないよなぁ…と言っていたのです。

Foundation＋Zepto.js で
軽量なサイトをデザインできたらいいなぁ♪

ちなみに、モダンブラウザのみ対応です。

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にアップグレードし、
最近はエクステンションが充実してる！
ということに（今頃）気づいたのでした。
いろいろあるのでまた探してみようっと。

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……

スクロールしてもついてくるナビゲーション

仕事で使ったので、メモ。

長〜いページをスクロールしても、
するっと動いてくっついてくるサイドナビゲーション。
フローティングメニュー、エレベーターメニュー、スクロールメニュー
などと呼ばれているみたいです。

jQueryを使っているサイトだったので、jQueryで探してみました。

最初に、
Open Source - Scroll Follow - The Kitchen @ Net Perspective
こちらのプラグインを使ってみたのですが、
jQueryのバージョンのせいか、うまく動きませんでした。

そこで、次はこちら。
Creating a Floating HTML Menu Using jQuery and CSS | Nettuts+
ちゃんと動きました。
…でもIEはダメだった。（ひとまずIEは保留！）


設置の仕方。

jQueryを読み込んで、
<script language="javascript" src="jquery.js"></script>

以下のソースを書く。
#floatMenu がフロートするDIVの名前です。
<script language="javascript">
var name = "#floatMenu";
var menuYloc = null;

$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
});
</script>

IEどうするか考えなきゃ…

「section」と「article」

HTML5について読んでいたら、
「section」と「article」の違いがよくわかりません。

それで調べてみたんですけど、
超かんたんに言うと…

article＝それだけで独立している（意味のわかる）かたまり
1ページに記事が複数あるような場合はそれぞれ<article>で囲う

section＝見出しがあるかたまり
section内にHeaderやFooterがある場合もあり
HTML5以前の<div id="">に近い使い方？

div＝意味のないただのかたまり（デザイン的な利用など）

ってことなんでしょうか。
うーん、合ってるのかな？

これに関する情報は内容がそれぞれ微妙に違っていて、
HTML5がもっと普及してきたら業界内統一見解ができるのかな〜
などと思いました。
とりあえず社内では統一しておく、とかいうレベルな気がしてきた。

HTML5、実際に仕事ではまだ使わないけど、
そろそろ人に聞かれた時に答えられるくらいには
なっておかないとなぁ……


HTML5.jpの「article要素」定義
http://www.html5.jp/tag/elements/article.html

HTML5.jpの「section要素」定義
http://www.html5.jp/tag/elements/section.html

MacでIEを使う方法

Windows用のアプリケーションを、スタンドアローンで動くMac用アプリにしてIntel Mac上でふつうに動かせるらしいのです。
How to Easily Run Internet Explorer on Your Mac

「WineBottler」というフリーソフトを利用します。
WineBottler - Run Windows Programs directly on OS X

IE6やIE7での表示をチェックできるサービスはいろいろありますが、やはりちゃんと動いている方がいろいろ確認できますよね。
あとで家のMacで試してみます！

参考：
『WineBottler』でWindowsのプログラムをスタンドアローン化し、OS Xアプリに : ライフハッカー［日本版］
MOONGIFT: » Windows用ソフトウェアをあたかもMac OSXソフトウェアのように変換する「WineBottler」

jQueryのかっこいいメニュー＆ページスクロール

いい感じのjQueryプラグインを見つけたのですが、使う機会がなさそうで残念……なので、メモっておこうと思います。
どちらもかっこよくて気持ちのいいアニメーションです。
どこかで使ってみたいなぁ。

こちらはナビゲーション。

Awesome Cufonized Fly-out Menu with jQuery and CSS3 | Codrops
（デモ）
テキストの表示はcufonを使っています。

こちらはページ切り替えです。

Smooth Vertical or Horizontal Page Scrolling with jQuery | Codrops
（デモ：Horizontal/Vertical）
縦の動きと横の動きの2種類。
切り替え時の画像をカラフルなものに変えてもおもしろそう。

Twitterのアイコンつくりました。

探してもあんまりシンプルでかわいいものがないな～と思って、Twitter用のリンクアイコンを作ってみました。せっかくなので公開。
フリー＆商用利用可としておきますので、もし気に入ってくださったら、ご自由にお使いください。（コメントしてくれると喜びます！）
データは透過PNGです。鳥に白フチついてます。


ダウンロード

PhotoshopでFaviconを作る

たまに必要になって、その度に調べてる気がする「Favicon（ファビコン）」について、メモっておくことにします！

Faviconを作る

Faviconは.GIFや.PNGでもいいのですが、IEが.ICOじゃないとダメみたいなので、ICOファイルで作ります。

私はPhotoshopでアイコンを作るので、プラグインを使ってそのまま書き出してしまいます。
プラグインのダウンロードはこちらから。
Telegraphics - Free plugins for Photoshop & Illustrator...and other software

「ICOFormat.8bi」というプラグインファイルを、Photoshopの「プラグイン」＞「ファイル形式」フォルダに入れておくと、「別名で保存」のプルダウンメニューからICO形式を選べるようになります。
ちゃんと透過アイコンもできます。

※マルチアイコンにしたかったらこんなのも。
ファビコン作成。favicon.ico 無料で透過マルチアイコンが作れます。

サイズはマルチアイコンの場合、16×16、32×32、64×64（MacOSX用）、128×128（MacOSX用）。
マルチにしない時は16×16で大丈夫そうです。

設定の仕方

＜head＞内で指定します。

<link rel="shortcut icon" href="ファイル名" />
<link rel="icon" href="ファイル名" type="image/vnd.microsoft.icon" />

『image/vnd.microsoft.icon』っていうのが .icoファイルのメディアタイプです。

表示されないとか更新されないとか不具合が起きやすいので、＜link rel=～＞の前に

<script language="JavaScript">
var image = new Image()
image.src = "ファイル名"
</script>

と書いておくと良いらしいですよ。

ブラウザで確認して完成です！

WordPressのフレームワーク

最近はWordPressの勉強をちょっとだけしています。
と言ってもデザイナーなので主にデザインまわり。

フリーのテンプレートはいっぱいありますが、英語に最適化されてるのが多いし、一通り理解するためにもテンプレートを最初から自分で作ってみたりしたのですが、タグがいっぱいあってめんどくさいんです・・・。

シンプルなテーマを加工した方がいいかなぁ、と思い始めて探してみると、カスタマイズ用のフレームワークっていうのがいっぱいあるんですね。

個人的な好みでいくつか選んでみました。

• Hybrid WordPress Theme Framework
  （Demo）


• Carrington - The CMS Theme Framework for WordPress
  （Demo）
  Blog、Text、Mobileの3種類あります。


• Thematic, A WordPress Theme Framework
  （Demo）


• The Buffet Framework

タブなどのjQueryが既に組み込んであったりして、かなり便利そうです。
使い心地が良さそうのなのを選んでいじってみようと思います！

IEでも大丈夫な、角丸にするJavaScript

ひとつ前の記事で書いた角丸にするスクリプト、便利なのですがIE6に対応してないのでお仕事で使うには微妙・・・と思っていたら、Internet Explorerでも大丈夫なスクリプトを発見しました！

↓こちらです。
CurvyCorners - Beautiful rounded corners for your HTML boxes

一応、使い方もメモ。

<script type="text/JavaScript" src="curvycorners.js"></script>

JavaScriptを読み込んで、

<script type="text/JavaScript">
  addEvent(window, 'load', initCorners);
  function initCorners() {
    var settings = {
      tl: { radius: 10 },
      tr: { radius: 10 },
      bl: { radius: 10 },
      br: { radius: 10 },
      antiAlias: true
    }
    curvyCorners(settings, "#myBox");
  }
</script>

コーナーのサイズと、角丸にするオブジェクト（idやclass）を指定します。
かんたん！

ボーダー、背景画像などにも対応。使いやすいです。
試してみたら、確かにIE6でも大丈夫でしたよ！

今さらですが、角丸にする「jQuery Corner」

今さらな感じもしますが、何度も検索している気がするので、自分用にメモ。

オブジェクトの角を丸くするjQueryスクリプトです。
JQuery Corner Demo

まず読み込んで、

<script type="text/javascript" src="/js/jquery.js" charset="utf-8"></script><br /><script type="text/javascript" src="/js/corner.js" charset="utf-8"></script>

適用させるidやclassと、丸の大きさを指定します。

<script type="text/javascript">
$('#corner').corner("10px");
</script>

かんたん！

もちろん、borderが指定されていても大丈夫です。
他にもいろいろな効果が付けられますが、Round以外はめったに使わないんですよね～。

IE6はダメみたいなので、角丸じゃなくても大丈夫なデザインにしておくと安心です。

デザイナーのためのAIRアプリ

「Webdesigner Depot」で、便利そうなAdobe AIRアプリがたくさん紹介されていました。

40 Great Adobe AIR Applications for Designers and Developers | Webdesigner Depot

Webデザイナー的に気になったものをメモっておきます。
（元のページにはもっといろいろ載ってました。）

カラーツール

• Kuler Desktop　
• Color Browser　
• COLOURlovers Desktop Color Finder　
• Contrast-A　

画像

• ImageSizer　リサイズ、クロップのバッチ処理
• Icon Generator　CS3っぽいアイコンを作成
• Shrink O’Matic　ドラッグ＆ドロップでリサイズ等の処理
• Random Patter　ランダムパターンを作成
• Splashup Light　画像補正
• JustResizeIt!　リサイズのウィジェットも作れる
• PNG Icon Generator　アイコンジェネレータ
• BetaDesigns Caliper　サイズを測る
• Flickr Desktop Search　Flickr検索
• WebKut　切り取ってキャプチャ
• Websnapshot　Webページのキャプチャツール

フォント

• .merlin　フォントオーガナイザー
• Font Picker　フォント一覧を表示

そのほか

• Boks　Blueprint CSSフレームワーク
• Live Presentations　プレゼンテーション
• htmlText Editor　WYSIWYG HTMLエディタ

やっと新しいPCが来たので、セットアップが終わったら色々試してみようと思います！

ポートフォリオ専用CMS「Indexhibit」

「Indexhibit」というCMS、海外のサイトでよくポートフォリオ用に使われているようです。
どんななのかなぁ、と思って試しにインストールしてみました。
せっかくなので手順をメモ。

サイトはこちら。
Indexhibit

1. 「Download」から本体をダウンロードします。
   フリーですが寄付歓迎（15ユーロ）。


2. まず準備。
   サーバ要件です。
   ・Linux/Apache server
   ・PHP4 以上
   ・MySQL 3.23 以上
   データベースの host、name、username、password を調べておきます。


3. フォルダごとサーバにアップします。


4. 「files」「gimgs」ディレクトリのパーミッションを 777 に。
   「ndxz-studio」の中の「config」ディレクトリのパーミッションを 777 に。


5. ブラウザで /ndxz-studio/install.php にアクセス。


6. 言語を選択（日本語もあります。）。


7. データベースの情報を入力。


8. エラーが出なければOKです。
   仮のログイン名とパスワードが表示されるので覚えておきます。


9. ログイン画面になるので、仮ログイン名・パスワードでログインします。


10. 「プレファレンス」というメニューから、ログイン名とパスワードを変更します。


11. install.phpを削除します。
    
    
12. ついでに、クリーンなURLになるように設定します。
    （/index.php?/project/united-nations-identity/
    みたいなURLを
    /project/united-nations-identity/
    という風に直します。）
    
    まずhtaccessというファイルを、.htaccessにリネームします。
    
    /ndxz-studio/defaults.phpを開き、
    define('MODREWRITE', false);
を
define('MODREWRITE', true);
    に書き変えます。
    おわり！

肝心のCMSについてですが、インストールは簡単だし、目的が非常に特化されているので、シンプル＆ミニマムなポートフォリオサイトにはとてもいいのではないでしょうか。
（私の好きなsiiimpleに載っていそうな感じです。）

でもやっぱり機能は少ないので、CMSが苦手じゃなかったら、Wordpressとかの方が良いかも・・・。テンプレートいっぱいあるし。