Works (制作)の最近のブログ記事

ゆーすけべーさんのTwitPic Stream (ja)を勝手にプチバージョンアップしてみた

本家
TwitPic Stream (ja)
http://picstream.pulpsite.net/

最近、ゆーすけべーさんのTwitPic Stream (ja)を見つけて
視覚的にTwitterを見るのがおもしろくって、
自分なりに何か出来ないかなって思ったので、
勝手にプチバージョンアップしてみました。

プチバージョンアップ
TwitPic Stream (ja)
http://www.kenjisugimoto.com/twitpicstream/

-------------------変更点-------------------
□デザイン周りを変更しています

□表示件数を追加しました
件数以上の「列」をfadeOut()させて、
Callbackで対象divを.remove()させています。
-----------------------------------------------

当たり前ですが、ここでは広告を削除しています。
ページ下の著作権はゆーすけべーさんのままです。

ゆーすけべーさんの元記事はこちらです。
http://yusukebe.com/archives/10/02/12/021719.html

Canvasで遊んでみたよ

http://www.kenjisugimoto.com/jQuery_sample/canvas/

iPodとiPadではカクカクと処理落ちヒドいです。

[レビュー]ネスカフェ ヘルシーライフ プレゼント

http://jp.nescafe.com/healthy/
バリスタがもらえるキャンペーン

グリッド計算ツールGridpxにレイアウト機能を追加しました。

Gridpx beta
http://www.kenjisugimoto.com/gridpx/index.html

作成したグリッドサンプルに、実際のテキストや画像を配置できることで、デザインを行う前段階で、どのような組体裁になるかを確認することができるようになりました。
テキストと画像は変更可能で、画像は読み込みたい画像のURLを記述することで表示されます。
また、[Calculate]ボタンの下に[Grid]と[Preview]ボタンを追加し、描画モードの変更機能も付けています。


現状では配置出来る要素が、
テキスト * 2つ
画像 * 1つ
だけですが、ボタンやフォームなどのパーツを増やしたり、
フォントサイズを変更機能などをつけていく予定です。

ただ、この3つの要素をいかに上手く配置するか、
少ない要素で上手にレイアウトをするのも良い勉強になると思います。

Web制作者向け：グリッド計算ツールGridpxを作ってみました

Gridpx beta
http://www.kenjisugimoto.com/gridpx/index.html

グリッド分割を計算していると、うまく割り切れなかったりで、時間がかかってしまう時があります。
そもそも、面倒くさいと嘆く人もいたりしますが、そんな方向けに作ってみました。

使い方
[1] 作成したいコンテンツの幅を入力します

[2] 分割したいカラム数を入力します

[3] カラム間のマージンを入力します
（キーボードの↑と↓で数値変更+関数実行します）

計算の苦手な方はぜひ使ってみて下さい。

IEでletter-spacingを設定すると＜br＞が正しく表示されないバグ

めったに使わないCSSのletter-spacingですが、
FlashをHtml化する作業の時に悩まされたバグです。。

ブログでは文章を改行（空行）させる時に<br><br>で改行しています。一文をただしくコーディングするなら<p>を使用しますが、<br><br>になっている事が多いです。

その時にletter-spacingを設定していると
----------------------------------
（通常時）
あのさ<br><br>実は...
　↓（レンダリングすると
あのさ

実は...

----------------------------------
（letter-spacing設定時）
あのさ<br><br>実は...
　↓（レンダリングすると
あのさ
実は...


となる訳です。

（解決策）
<br>で改行（空行）をとっている場合、brタグに対してletter-spacingを、
br{
letter-spacing:0;
}
とbrタグにだけ、letter-spacingを0を設定すると解決します。

こういうバグ対策で時間を取られるのは、かなり損をした気になりますね。。

文字カウント/文字数カウンター:あとnumMojiなんもじ　を作ってみました

あとnumMoji(beta版)
http://www.kenjisugimoto.com/atonummoji/

JSで5秒ごとにありがたい気持ちになるMiwaqulockを作ってみました

http://www.kenjisugimoto.com/testjs/miwaqulock/miwaqulock.html

運がいいと、さらにありがたくなります。

（単純な作りなので30分くらいで出来ました）

文字カウント/文字数カウンター:numMojiに選択範囲の文字数カウント機能を追加しました。(FirefoxとSafariのみ)

文字カウント/文字数カウンター:numMojiなんもじ　を作ってみました

http://www.kenjisugimoto.com/nummoji/index.html

javascriptの勉強がてらに、文字カウントツールを作ってみました。
他の文字カウンタとの違いは、CGIを使わずjavascriptなので、リアルタイムに文字数が反映されます(onKeyUp)、また半角英数字を2文字(1文字 1バイト)=全角1文字(1文字2バイト)の計算も出来るので、メルマガなどの厳密な文字制限がある場合に便利だと思います。あと改行はカウントしません。（当初は付けてましたが、いるのかなあ？）

あれもこれも機能を付けたくないので、最低限のこれくらいでいいかなと思っています。

arti 2008 spring & summer collection：東京かんかん　作りました。

http://www.kankan.co.jp/arti/spring_summer2008/index.html

紙からWeb用に作り直したカタログサイトですが、商品サイトの様に作りました。コンセプトは「いたって普通で、見やすい」です。
こういう商品サイトは掲載数が多いから、リサイズとかの機械的な作業が大変だということを知りました。。（仕事では、システムに渡す為のテンプレート作成が多いので。）

Mac風の壁紙を作ってみました。

とあるPCメーカーさんのビジネスモデル向けの壁紙を制作したのですが、その時に作ったうちの一つです。

もちろんWindowsのPCなので、社内選考の時点でダメでしたがw　その代わりに作った、もう一案の方が実際に採用される事になったので良かった。。リサイクルとして、どっかの壁紙サイトに投稿しようかと思ってます。

Photoshop　Webデザイン役立ちブラシセット

PhtoshopでWeb用のデザインを行う時に便利なブラシセットを作ったので、ぜひPhotoshopをお持ちの方はご使用ください。

ダウンロードはこちらから>>brushes_for_web.zip

==使用方法=========================
1. アプリケーション＞Adobe Photoshop CS2＞プリセット＞ブラシ に入れます。
2. ブラシツールの設定（小さい矢印）から、【ブラシファイルの読み込み】で使用します。
==================================

==セット内容説明====================
【角R】
角Rが一発で作れます。角の大きさが4pxから12pxまで、9パターンを用意
【1*1　1*2　1*3　1*4　2*1　2*3　2*5】
1pxのドットラインが簡単に作れます。Shiftを押しながら描画してください。
例えば、 1*1は、1pxラインに空きが1pxのドットライン。 1*2は、1pxラインに空きが2pxのドットライン。　
【網点】
網点のテクスチャを12パターン用意。無限ループ対応。
【カラーハーフトーン】
上記の網点に似たものですが、フィルタのカラーハーフトーンで作成した大きな網点バージョンが4パターン出来ます。無限ループ対応。
【1px斜 5px斜 10px斜】
1px 5px 10pxの斜めのドットラインが作れます。
【apple（関連）】
おまけです。 アップルサイトの上部タブ部分が1分以内に作れてます。
==================================

web制作者の方には、とても役立つブラシセットですので、ご自由にお試しください。