ZARU(ざる)のWeb系ブログですー。プログラミング&デザイン関係のTipsとか色々と。

現時点でWebデザインの配色に使える良い感じツール

デザインでなにが難しいって、やっぱり配色なわけで。レイアウトやディティールが良くても配色次第でオシャレになったりダサくなったり。しかし、配色と一口に言っても奥が深すぎて、軟弱な僕は配色ツールに頼るしかないわけで。

Color Scheme Designer 3

ちょっと前まで、前バージョンのColor Scheme Designer 2を使っていたけど新しいバージョンが素晴らしい。使用方法に慣れるまで少し時間がかかるかもしれないけど、これを使うと安定した配色に。ただ、カスタマイズがかなりできるので色々といじった結果、めちゃくちゃな配色になりがちなので、ほどほどに。

Adobeの配色サイトkulerとかも利用していたのだけど、あれはパラパラーっと見てインスピレーションを得るだけの方が良いのかもしれない。で、思いついた配色をColorSchemeDesigner3で試してみると。

それと、メインの色ではなくて地味な部分で使いたい大人しい色は和色を使っている。

目に優しくメインを壊さずなテイストなので使いやすい。

iMacのモニタが眩しすぎるので暗くしてみた

なんかここ最近、すごく目がつかれるなーというか、頭が痛い。原因は体調不良とか仕事したくないーとか色々あるけれど、とりあえずiMacのモニタが眩しくて見ていられないので、暗くしてみたよ。

デザインもやっているくせに、僕はかなり暗いモニタが好きでCRTの時もかなり暗くして使っていた。けど、iMacは最低の明るさに設定しても全然明るい!なんだよ、こんちくちょう。ということで、モニタ明るさ調整ソフトを導入してみた。

ユニバーサルバイナリで、10.5以降対応かな?僕のiMac24インチ 10.6でもきちんと動作した。これでめっちゃ暗くして使ってる。環境光と違いすぎると逆に目に負担をかけると思うので、そこら辺は調整していこう。

Flashの上に画像やテキスト、DIVを重ねて表示する方法

Flashの上に画像やテキストを重ねて表示できないかなーと思って試してみたら普通にできたのでまとめ。とりあえずサンプルを見るのがわかりやすい。

サンプル


HTMLテキストです。

重ねて表示する方法:HTML + CSS

大事なのはFlashを描画する<object>タグの部分。

<param name="wmode" value="transparent" />
<embed wmode="transparent" ... />

この2つをしているすればIE6〜/Fx3〜/Safari3〜/Chromeで、無事にDIVによるテキストの重ね合わせ・背景色の重ね合わせ、透過PNGの重ね合わせを表示できた。透過PNGに関してはIE6対策にJavaScriptのライブラリを導入している。

今回初めてこの透過ライブラリ使ってみたけど、結構良いかもしれない。

#test_flash{
    position:relative;
}
#test_hoge{
    position:absolute;
    top:0px;
    left:100px;
    padding:10px;
    width:300px;
    color:#00f;
}
#test_hoge span{
    background-color:#eeeeee;
}
<script src="/DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('.png_bg');<!-- IE6の透過PNG対策 -->
</script>
<![endif]-->
<div id="flash">
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="test" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="wmode" value="transparent" />
	<param name="movie" value="http://zaru.tofu-kun.org/wp-content/uploads/2010/02/test.swf" />
	<param name="quality" value="high" />
	<param name="bgcolor" value="#ffffff" />
	<embed wmode="transparent" src="http://zaru.tofu-kun.org/wp-content/uploads/2010/02/test.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="test" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_jp" />
	</object>
	<div id="hoge">
	<p>HTMLテキストです。</p>
	<img src="http://zaru.tofu-kun.org/wp-content/uploads/2010/02/img.png" />
	</div>
</div>

Ruby プログラミング練習問題2「FizzBuzz問題」

第2回目のRubyプログラミング練習問題。今回は有名な「FizzBuzz問題」。

プログラミング練習問題2「FizzBuzz」

ルールは以下の通り
1から順番に数を表示する
その数が3で割り切れるなら”Fizz”、5で割り切れるなら”Buzz”、両方で割り切れるなら”FizzBuzz”と表示する
要するに”1 2 Fizz 4 Buzz Fizz 7 8 Fizz Buzz ・・・”と出力される

回答

#!/usr/bin/ruby

1.upto(100) do |i|
    if  i % 3 == 0 && i % 5 == 0
        puts 'FizzBuzz '
    elsif i % 3 == 0
        puts 'Fizz '
    elsif i % 5 == 0
        puts 'Buzz '
    else
        puts i.to_s + " "
    end
end

実行結果
$./2_1.rb
1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz
16
...

Ruby初心者な僕はこんな単純な条件分岐…。うーん。もっとスマートにできるはず。

解答例

#!/usr/bin/ruby

def fizz_buzz(n)
  ret = "#{["Fizz"][n % 3]}#{["Buzz"][n % 5]}"
  ret.empty? ? n.to_s : ret
end

puts (1..100).collect{|n| fizz_buzz n }

上記ページに載っている解答例はこんな感じ。

ret = "#{["Fizz"][n % 3]}#{["Buzz"][n % 5]}"

これなんだよ!って、調べてみたら配列の省略形?っぽいもの。つまり、これを書きなおすと

a = ["Fizz"]
b = ["Buzz"]
ret = "#{a[n % 3]}#{b[n % 5]}"

ってこと。
Rubyってこういう記述が普通というか一般的なのかな?教えてエロい人!

Ruby プログラミング練習問題1「ループ練習」

というわけで、Rubyを使ってプログラミング練習問題をこなしていきたいと思う。練習問題は、検索してたら出てきたこれを使う。不慣れなRubyなので色々と調べて試行錯誤しながらやっていこう。

プログラミング練習問題1「ループ練習」

Hello World![改行]を5回表示させてください。

print(或いはprintf,cout等)を5回コピーすれば当然可能ですが、
ループ構文(for,while等)を利用して、print等は1回の使用にとどめてみてください。

可能ならコマンドラインから入力を受け取って、n回表示するように改造してください。
何回目のHello World!かも表示してみてください。

回答1

#!/usr/bin/ruby
5.times do
    puts "Hello World!\n"
end
#!/usr/bin/ruby
for i in 1..5
    puts "Hello World!\n"
end

実行結果
$./1.rb
Hello World!
Hello World!
Hello World!
Hello World!
Hello World!

for文とかは、あまり使わないだろうけど。一応イテレータで。

回答2

#!/usr/bin/ruby
max = ARGV[0]
1.upto(max.to_i) do |i|
        puts "Hello World! " + i.to_s + "\n"
end
#!/usr/bin/ruby
max = ARGV[0]
i=1
while i<=max.to_i
    puts "Hello World! " + i.to_s + "\n"
    i = i + 1
end

実行結果
$./1.rb 10
Hello World! 1
Hello World! 2
Hello World! 3
Hello World! 4
Hello World! 5
Hello World! 6
Hello World! 7
Hello World! 8
Hello World! 9
Hello World! 10

コマンドラインからの引数は、「ARGV」に格納される。受け取ると、文字列になってしまうので「to_i」を使って数値に。

とりあえず最初はこんなものかな。

WordPressにFlash動画を表示させるプラグイン

WordPressのブログに動画を載せたい!と思って色々と調べてみると、やはりFLV/F4V形式のFlash動画で表示するのがベターと言うことらしい。しかし、デフォルトのWordPressには動画をアップロードする機能はあっても、表示する機能はない。ので、プラグインで対応してみた。

使い方

使い方は、普通にプラグインフォルダに放り込んで、有効化するだけ。

動画の表示方法は、WordPressの動画アップロード機能を使って、FLVファイルをアップ。下記フォーマットでURLをコピペすればOK。

[flashvideo file=http://example.com/xxx.flv /]

サンプル

Get the Flash Player to see this content.

問題は、動画ファイルをFLV形式に変換しなきゃいけないっていう点かなー。YouTubeとかにアップロードして、それをブログに表示するのがやっぱり一番簡単なのかも。

画面キャプチャソフトならSkitch:Macなら使わないと損!なソフト

仕事をしていると、メールや電話で相手に説明をしたり指示をしたりすることが多いのだけど、面と向かって話しているわけではないので、「ここの部分をこっちに、で、こっちのデザインを…」なんてやっていると、ちゃんと通じているのか不安になる…。

そんな時には、画面をキャプチャして「ここだよ!ここ!」って感じに説明しているのだけど、それが案外面倒くさい。そんな時には、スクリーンキャプチャソフト「Skitch」を使うと良いと思う。僕が知っている限り、Macでは最高のキャプチャソフト。

こんな画像が簡単に作れるよ!

skitch

必要ない部分は、薄いグレーで塗りつぶしたり、枠をつけたり、テキストを配置したり。出力形式はJPG/PNG/GIFなどはもちろん、PDFとか色々なフォーマットに対応しているよ。

ソフトバンクの端末でWeb上の動画を再生する方法って…

動画自体の知識があまりないのに、さらに携帯での動画再生とか…。色々と調べてみたら、普通の3GPPファイルで良いらしいんだけど、勝手サイトだと300KBのファイルダウンロード制限があるらしく、動画ファイルも300KB以下にしなきゃいけないみたい。

ソフトバンク Mobile Creation ムービーについて

どっからどう見ても300KBと書いてある。2010年この時代に…。

どうにからなないか調べてみたら、どうやら公式サイト上だとこの制限はないみたいなんだけど。帯域が狭いからこういった制限をしているのかなー。とりあえずiPhoneとかスマートフォンではこの制限はないっぽい。当たり前か。

モバイルYouTubeで、ソフトバンク端末の再生をサポートしているらしいが…20秒ごとに分割して再生されるみたい。実機を持っていないから、どういったインターフェイスなのか全く分からないけど。

YouTube モバイルが3キャリア対応──国内主要端末で利用可能に

とりあえず、現段階でできることはソフトバンク用に短く編集したものを300KB以下で3GPP形式で作るっていうことなのかな?むー。Flash Liteとか、その辺は今後どうなるんだろう?

Photoshopのアクションで、画像を2pxだけトリミングする方法(アドバイス求む→解決しました)

今やっているお仕事で、大量の画像を処理する必要があったので、Photoshopのアクション登録してバッチ処理すれば良いかなーと気軽に考えていたのだけれど、実際にやってみると…難しい!

一応、自分なりに解決方法を見つけたけれど、なんとなく納得できない出来。誰か、もっと簡単に出来る良い方法を知っていたら教えてくださいませ。

2010年1月12日 追記

コメント欄で miya さんからアドバイスを頂き、完璧に解決しました。その方法は、カンバスサイズの変更で「相対」にチェックを入れて、削りたいピクセル数を「-x」と入力するだけ。ほんと、それだけ。多謝!!

sc20100112

やりたいこと。

大きさのバラバラなJPEGファイルがある。その画像は縁に2pxの罫線がかかっている。この罫線を除いて、トリミングがしたい。そして、保存後はファイル名はそのままにしたい。

23760671

この黒い線が入っているのを、↓にしたい。

23760671_2

アクション内容

1:「選択範囲」→「すべてを選択」

2:「選択範囲」→「選択範囲を変更」→「境界線…」

スクリーンショット(2009-12-17 18.46.54)

スクリーンショット(2009-12-17 18.47.41)

幅を4pxに設定

3:「選択範囲」→「選択範囲を反転」

スクリーンショット(2009-12-17 18.48.03)

4:「選択範囲」→「境界線を調整…」

スクリーンショット(2009-12-17 18.48.33)

スクリーンショット(2009-12-17 18.48.50)

半径「0px」・コントラスト「100%」・滑らかに「0」・ぼかし「0.0」・縮小/拡張「0%」に設定

5:「選択範囲」→「すべてを選択」→コピー&ペースト

スクリーンショット(2009-12-17 18.49.05)

背景の上に、くり抜かれた新しいレイヤーが作成される

6:元あった背景レイヤーを削除

スクリーンショット(2009-12-17 18.49.35)

7:「イメージ」→「トリミング…」

スクリーンショット(2009-12-17 18.50.00)

スクリーンショット(2009-12-17 18.50.09)

「透明ピクセル」にチェック・「上端、下端、左端、右端」すべてにチェック。これで、画像を上下左右2px削った状態になっている。ただなぜか端1pxが透過状態になっているので、このまま保存すると、画像の縁がボヤけた感じに…。これを直すために、レイヤーを増殖させる。

8:「選択範囲」→「すべてを選択」→コピー&ペーストを5回ほど繰り返す

スクリーンショット(2009-12-17 19.03.01)

5個ほど、重ねれば透過部分は100%になっていると思う。

9:「ファイル」→「保存」

これにて終了。

しかし、やりたい事は単純なのにこんなに色々やらなきゃいけないなんて納得できないなー。もっと簡単な方法があるはずだー。

jQueryでTwitterAPIを叩いてみる

もの凄い時代遅れな事は認識しつつ、所用でjQueryからTwitterAPIを使ってみる必要が出てきたので、テストがてら組んでみた。基本的に個人的備忘録。

今はjQueryとかライブラリがあるからもの凄い簡単だね。この先、言語を覚えるんじゃなくてフレームワークだけを覚えて構築していく人と、プログラミングをする人とにどんどん分かれていくんだろうな…。と脱線した。

TwitterのAPI仕様を確認してみる

TwitterのAPIを和訳してくれている人がいるので感謝をしつつ見てみる。

http://watcher.moe-nifty.com/memo/2007/04/twitter_api.html

と言っても今回はフォローしている人のタイムラインをだらだらと表示するだけなので簡単。

http://twitter.com/statuses/friends_timeline.json

ってアクセスするだけでOKらしい。jsonの部分はxmlとかrssとか指定できる。それ以外にも取得件数とかを引数で設定可能。

jQueryで外部ドメインへアクセス

あれ、そういえばjQueryで外部のドメインへアクセスできたっけ?と思いつつ調べていたら、jQuery1.2からは読み込めるようになっているらしい。素晴らしい。これでクロスドメイン問題はあっさり解決。明らかに時代に置いて行かれている。

$.getJSONについて
http://semooh.jp/jquery/api/ajax/jQuery.getJson/+url,+data,+callback+/

$.getJSON('http://twitter.com/statuses/friends_timeline.json?count=100&callback=?', function(json) {
    $.each(json, function(i,item){
        $("#twitter").append('<dt>'
                            +'<img src="'
                            +item.user.profile_image_url
                            +'" width="48" height="48" alt="'
                            +item.user.screen_name
                            +'" /> '+item.user.name+'</dt>'
                            +'<dd>'+item.text
                            +'<br />'
                            +'[<a href="http://twitter.com/'
                            +item.user.screen_name+'/status/'
                            +item.id+'">'
                            +'Permalink</a>] '+item.created_at+'</dd>');
 });
})

こんな感じでOK。ブラウザでTwitterにログインをしている人はそのまま自分のフォローしているタイムラインが表示され、ログインしていない場合はBASIC認証が求められる。

サンプル

http://zaru.tofu-kun.org/dev/jquery_twitter.html