「ネイチャー・センス展」と「これも自分と認めざるをえない展」

どちらも六本木でやっていたので、同じ日に行ってきました。
MORI ART MUSEUM [ネイチャー・センス展]
21_21 DESIGN SIGHT-「これも自分と認めざるをえない展」

「ネイチャー・センス展」の方は、天井が高くて広い空間に、自然をテーマにした大きな作品がゆったり展示してあるのがいい感じでした。
「“これも自分と認めざるをえない”展」は、見たあとで種明かしをされるような作品が多くて、色々おもしろい体験ができました。
残念だったのは、機械の調整中のものがあったり、一人ずつ体験するインスタレーションが行列していて（40分待ちとか…）全部を見られなかったこと。空いている時にもう一度行きたいなぁ…。

最近は絵画や写真の展覧会ばかり行っていたので、久しぶりの現代アートでした。
おもしろかった！

次は
東京都現代美術館「こどものにわ」
ICCキッズ・プログラム 2010「いったい何がきこえているんだろう」
の2つにも行きたいけど、終わる前に行けるかな？

翼のベクターイラスト

これは使えそう！
たくさんの翼（羽）のイラストがベクター形式でダウンロードできます。

「free for personal & commercial purposes」
とありますので、商用利用も可能みたいです。

ダウンロードはこちらのページのリンクから。
Download Vector Wings

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種類。
切り替え時の画像をカラフルなものに変えてもおもしろそう。

電子書籍を作ってみる！

最近話題の電子書籍。
一応“Web”デザイナーとはいえ、わからないではすまない日がすぐにでも来そうな感じですね。
とにかく1回作ってみようと思って調べてみました。

AppleやGoogleが採用しているEPUB形式というフォーマットで作ってみることにしました。
基本的にはXHTML＋ZIPらしいのですが、じぶんで書くのはちょっと難しそう……。
（参考：日本語Epubブックサンプル - 横浜工文社）
InDesignで書き出せるらしいので、デザインのクオリティ等を求めるならこれが一番良いのでしょうが、新しいバージョンを持っていないので×。
オープンソースの変換ツール、
calibre - E-book management
が良さそうです！無料だし。
（参考：デザインのブログ iPadやiBooks待てないよ。電子書籍リーダーで読んで、今日からあなたもEPUB形式作成で電子出版？CS5）

では実験。

1. 元になるテキスト（XHTML）を青空文庫で拾ってくる。
2. calibreに読み込む。
3. lang="en"をlang="ja"に修正。（参考：EPUBで遊ぶ！）
   
4. iBooksやStanzaで表示させてみる。

細かい設定とかいじらなくても、無事見られました。意外とかんたん！
表紙だけ文字化けしちゃいましたが、JPEG画像なので自分で作れば大丈夫なんじゃないかと。
あと青空文庫から取ってきてそのまま使ったせいか、ルビが変でした。

次の実験。
sigilでもやってみます。
こちらは画像を入れたり、WYSIWYGで書籍を編集することがでるソフトです。
（参考：月曜ジャーナル Sigilの基本的な使い方（１））

1. 元になるテキストをSigilに入力。
2. 目次を作ったり画像を入たりする。
3. テキストの先頭に表紙になる画像も貼り付け。
   
4. 保存する。
5. iBooksやStanzaで表示させてみる。

こちらも簡単でした！
iBooksでは表紙が出ませんでしたが、iTunes上でアートワークを追加できます。


こちらが作ったEPUBをiPhoneのiBooksで表示しているところです。

EPUBファイルを作るだけなら、ほんとに簡単です。
本の中身さえあればいつでも出版できてしまいますね！

ブラウザで読めるかわいいデザイン雑誌

かわいいです♪



Issuu - uppercaseyyc - Documents

Webデザイナーのためのポータブルアプリ

先日、家のネット回線が半日止まってしまって焦りました……。（iPhone持っててよかった～）
回線も困りますが、家のMacが急に動かなくなったらもっと困るなぁと時々考えてしまいます。もちろん会社のWinもですが。
そんな事態に備えて、使っていないUSBメモリにポータブルアプリを準備しておくっていうのはいいかもしれない！と、この記事を見て思いました。
12 Portable Apps for Web Designers

これなら非常時に家族のノートPC使ってお仕事ができる♪
早速メモ！

• KompoZer Portable
  DreamweaverっぽいHTMLエディタ。良くはないけどNotepadよりましでしょ！だって。
• Firefox Portable Edition
  ブラウザ。
• XAMPP Portable
  ローカルサーバ。CMSとかの動作確認用ですよね。
• GIMP Portable
  Photoshopのかわりに。
• AMP Font Viewer
  フォント管理。
• 7-Zip Portable
  アーカイバ。ZIP, RAR, TAR, GZ他。
• PhotoFiltre
  レタッチアプリ。クロップやリサイズなど、GIMPより軽い。
• Inkscape Portable
  Illustratorのかわりに。
• AbiWord
  Word（.doc）ファイルのエディタ。OpenOffice Portableより軽い。
• PicPick Tools
  スクリーンキャプチャやカラーピッカーなど。
• MobaPhoto
  イメージファイルの管理。Picasaもおすすめ。
• ToDoList
  ToDoリスト。

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

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


ダウンロード

Mac OS Xの裏技

TheAppleBlogに載ってたOS Xの裏技。
OS X Hidden Gems
知らないものが多かったので自分用にメモ！
こういうの知っていると作業効率が全然違ってきますから、積極的に覚えていきたいです。

• 作成中のファイルをセーブしていない時は、ウィンドウを閉じる赤いボタンの中に黒い丸が出ている。
  
  
• ファイルを保存する時、キーボードの「/」を押すと保存先のフォルダを選ぶダイアログが出る。
  移動したいフォルダのパスを入力するとそこに移動。
  
  
• Shift＋Control＋イジェクトキーでディスプレイのスリープ。
  
  
• メニューバーのAirMacアイコンをクリック。プルダウンメニューを出している時にOptionキーを押すと、通信速度付きで接続先を一覧表示。
  
  
• ファインダーで、Controlキーを押しながらフォルダ名の頭のアイコンをクリックすると、上の階層のフォルダがプルダウン表示されて移動できる。
  
  
• Control ＋ Option ＋ Command ＋ 8 で、モニターのカラー反転。
  
  
• SafariやMailで、単語を選択して Control ＋ Command ＋ D を押すと、辞書を起動してその場に表示。
  （日本語なら国語辞典、英語なら和訳を表示しました。）
  

何となく知ってても、いざとなると肝心なショートカットを忘れちゃうんですよね〜。
自分で一覧作ってプリントアウトしておこうかなぁ。

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>

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

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