制作日記 | ウダ2Blog

Category ‘制作日記’

Retina時代のスマホサイトのタイトルロゴはSVG

「Retina時代のスマホサイトのタイトルロゴはSVGがいい」と何処かに書いていたので作ってみた。
元画像はマイリリースのスマホ版トップのロゴ画像で元は480×109で作成して、iPhoneだと縦(320px)にも横(480px)にも使える様にしてる。

元々FireWorksで作成していたのでJPEG・PNGはRetinaテスト用に倍の解像度に変更しするだけで済んだが、SVGはFireWorksが未対応だったのでイラレに書き出し作り直した上でエディタでフィルタを追加したりと微調整した。

よくやる2倍サイズのJPEG画像（23.70KB）
モヤモヤが出るので今回の様なロゴ画像には向かないJPEGだけどRetinaだとそんなに問題無さそう、グラデの掛かった画像の圧縮率は魅力的

よくやる2倍サイズのPNG画像（39.88KB）
RetinaだとJPEGと画質は分らないし容量も大きい、グラデーションが無ければ色数を落として圧縮率を上げる事も出来るかも

SVG画像（8.85KB）
予想以上に低容量、SVGは表示が重いらしいがこのサイズだと差は分らない。

safariだとfilterが上手く動かないのかドロップシャドーが効かないみたいで昔のイラレみたいに手作業で追加する必要があり、容量も若干増える事になってしまう。

2012/08/20 | Tags: Retina, SVG, スマホ | 制作日記 | 1件のコメント »

80歳まで生きたとしても、人生って3万日しかないんだよ

しょこたんこと「中川翔子」さんが友人に「80歳まで生きたとしても、人生って3万日しかないんだよ」と言われ、人生の短さに気づき、自分らしく生きることにしたそうです。
そこで「80歳まで生きたとしても、人生って3万日しかないんだよ」を作りました。
平均寿命を元に残された日数を算出します。

ネットで調べると友達というのはマリア（伊藤彩華）さんという話や台詞も「3万日しかないんだよ。短くない?」とか微妙に違うバージョンもあったのですがDON!の記事をベースにしています。

2012/05/19 | 制作日記 | コメントください »

マルチ壁紙チェンジャー

ネットをブラウジングし、かっこいい壁紙を見つけては保存してる。
windows7になってからOSの機能で壁紙を毎日変更できるようになったので集めた壁紙も有効利用できるようになった。
ただ、ウチは2台のマルチモニタ（デュアルモニタ）でそれぞれ解像度が違い普通に貼り付けるとどちらかの壁紙が残念な状態になってしまう。
手作業で画像を連結させた壁紙を用意し、画像の配置を「並べて表示」にするといい感じになるけど、これだと毎日変更するのが大変になってしまう。
そこで、壁紙を結合して設定するソフトを作った。

　マルチ壁紙チェンジャー (vector)

5年ぐらい前に同じサイズのモニター用のアプリは作っていたのだけど、汎用性が無かったので個人的に使っていただけだったが、今回は色んな解像度もOKで横にさえ並んでいれば何枚のマルチモニタでもOKなので公開する事にします。

2012/02/19 | Tags: 壁紙 | 制作日記 | 1件のコメント »

CSSだけで角をカット

画像を使わずCSSだけで角が欠けた表現をする方法がBeveled corners & negative border-radius with CSS3 gradients | Lea Verouに書かれていた。角丸の表現も飽きてきてたので新鮮だったが、CSSの量が多く（ベンタープレフィックスの為だけど・・・）面倒なのでジェネレーターを作ってみた。
「Css3 Corner Cutter」

この角が欠けた表現をする仕組みは背景を4分割してそれぞれの角に透明から急に色が付くグラデーションを塗って角が欠けた表現をしているので、背景もうまく透過している。
ただ、元のCSSだときれいに4等分（縦横50％）しすぎで要素の幅や高さが奇数の場合に隙間があいてしまっていたので、ジェネレーターでは縦横51％にして少しかぶせて隙間が現れ無いようにしています。

2012/02/04 | Tags: CSS, css3 | 制作日記 | コメントください »

MooToolsとSlideshowとIE9

MooToolsのプラグインSlideshow 2!を使ったサイトを過去に作っていた。
Slideshow 2!はすごく重いけど（この時点で問題があるがクライアントの希望なので・・・）、簡単にかっこいいスライドショーのアニメーションを実現するするプラグインで制作当初はちゃんと動いていたが今日InternetExplorerで見てみると「DOM Exception: INVALID_CHARACTER_ERR」なんてエラーが現れた、しかもmootools.jsの15行目とか言ってる。
調べてみるとSlideshow 2!が使用してるフレームワークMootoolsでエラーが出たので最新版のMootoolsに差し替えてみたが変化なし。
検索しても日本語サイトに解説してるところが見つからないのでがんばって英語のサイトを見てみると1.2.5ならOKっぽい事を書いていたが今度はslideshow.js側でエラー。
最新版のMooTools1.4.3にしてもMootoolsでエラーが出る。両方とも最新にしようと思ったがSlideshow 2!の最新版はMootools 1.3用だった。

今のところ問題なのはIE9だけなのでIE8の互換モードを使う事にした。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

IE8だと描画速度が落ちそうな気がするが仕方ない。

2012/02/01 | Tags: JavaScript, MooTools | 制作日記 | コメントください »

面積統一計算機

仕事で使うつもりで作ったけど使わなくなったのでアップしときます。

縦横比の違う画像を並べる時に横幅基準や高さ基準にしてしまうと、画像の面積がまちまちになり、画像の印象の優劣が出てしまうので面積を統一できます。

基準となるサイズを選んで、画像のサイズ（ピクセル）を入力すると結果が表示されます。
結果は倍率と画像のサイズ（ピクセル）として表示されます。

面積統一計算機

2011/12/19 | 制作日記 | コメントください »

「いいね」ボタンが動かない？！

あまっこに「いいね」ボタンを付けたのだけど、なぜかちゃんと動かない。
一瞬追加された様に見えるが戻ってしまうという奇妙な動きをする。facebookにログインしてみてもいいねが反映されていない。

Like Buttonで再度ボタンを作成してみたが
「Only verified developers can be added as listed developers of this application.」
というアラートが現れて作成に失敗する。
「キャッシュを削除すると作成できる」という記事があったので試してみると問題無く作成できたが、再作成したコードでも動かない。調べてみると以前は動いていたマイリリースの「いいね」ボタンも動かなくなっている。
なんやかんやでURLリンターというツールを見つけて試してみるとmetaタグで画像ファイルを指定していたのだがローカルパスだったのが原因だったようだ。
以前は画像パスが間違えていても「いいね」できていたが最近は厳しくなったようだ。

2011/07/18 | 制作日記 | コメントください »

ソーシャルブックマークから「いいね！」

以前、ソーシャルブックマークが流行ってるって事で、このブログにもソーシャルブックマークのボタンを付けたり、マイリリースにもトップと公開ページにもソーシャルブックマークのボタンを付けていたが、時代は移り、最近では「いいね！」ってのを付けてる所が多い。（ソーシャルフィードバックっていうらしい）
なんでも、海外の人気SNS「facebook」で使われてる機能らしく、最近ではmixiやgreeも同じ様な機能を付けている。この「いいね」ボタンを付けるとアクセス数が増加するという事で一気に広まっている。
個人的にはfacebookもGREE（PC版）もやった事ないしmixiも殆どログインしていないのでどんなに便利なのか分からないが、ただ携帯版のモバゲーにmixiのいいね（mixiチェック）が付いていて気にはなっていたので調べてみた。

まず、今までのソーシャルブックマークは基本的にブックマークレットを使って登録するので、ページ制作側は特に何もする必要が無く、ボタンを付けたければボタンをJavaAcriptなどでタイトルとURLを送るボタンを用意するだけでOKで製作者側は楽だった。
ソーシャルブックマークだと「タイトル」と「URL」の2つの情報だけしか無く、ブラウザに付いてる「お気に入り」の様に埋もれてしまう事が多かったが、facebookの「いいね！」の場合はOpen Graph Protocolという書式に従ったタグをHTMLに記載してこの情報を元にブックマーク（？）をするので、ページ概要や画像等の情報を含めた内容が保存出来て埋もれにくそうようだ。
OGPは標準の書式にしておけば良さそうで携帯版が別URLの場合はmixiやGREE様に追記する感じでOK。（画像を載せる場合はmixiの仕様に合わせてリサイズすると他でも使えるかと思います。）

他にもTwitterやEvernoteへのボタンも欲しいところだ。

ソーシャルブックマーク系のもGoogleブックマークとYahoo!ブックマークとLivedoorクリップは人気なので残す事にした。

個人的にソーシャルネットワークを使いこなせてないので、仕様を読んで理解するのにかなり時間がかかってしまったがようやく設置できた。

mixiチェックにamazonからの画像が掲載されなくて悩んだけど、ミクシィデベロッパーセンターにて許可するドメインにamazonの画像サーバーを登録していない事が原因だったようで、登録すると表示された。

facebookは「いいね」か「シェア」かを最後まで悩んだけど「いいね」にしました。

2011/02/07 | 制作日記 | コメントください »

PHPの高速化

MyReleaseの新規セッションの割合が低下していた。
Yahoo!が検索エンジンをGoogleの検索エンジンに切り替えた為だ。

そこで、PHPの高速化をとスクリプトを調整していたが限界が来たのでサーバーの設定を変更することにしました。
とりあえず「eAccelerator」を入れてみた。
MyReleaseはCPIのVPSで元々PHP4でPleskという環境に、無理やりPHP5を導入してるので不安だったが何の問題もなくインストールできた。体感できるほど速くはならなかったがコンパネから利用状況が分かり頑張ってる様子がわかる。

次に「eAccelerator」と同居できるという事で「ZendOptimizer」もインストールした。
これは入会する手間はあるが簡単にインストールできた。
ただ、バージョンが3.3.9と新しく色んなサイトで紹介されてるインストーラーを使ったインストールができないが、必要なファイルをコピーしてphp.iniにコピーした場所を記述するだけでOKという簡単な作業でインストール完了。

更にmySQLのインデックスも微調整した。query_cacheを調整したりすると、ようやく体感できるレベルに改善された。

このおかげかは分からないけどランキングは約一年ぶりに5位に戻った。

2011/01/09 | Tags: PHP | 制作日記 | コメントください »

PHPで切り抜き画像を作ってみる

まとめサイトのサイドバナーによくamazonのフィギュアを載ってるのをよく見る。amazon画像編集ツールamacco -あまっこ-も元々CDのジャケット用に作ったのだけど実際は殆どフィギュアばかりだ。
大抵フィギュアの背景は白で味気ない「PhotoShopとかで魔法の杖（マジックワンド）を使ったら簡単に切り抜き画像作れそうだな」と思ってPHPのGDで出来ないか調べてみた。
GDにはそんな機能は無かったがアルゴリズムの紹介にシードフィルというアルゴリズムを使って塗りつぶす方法がC言語で書かれていたのでPHPでもやってみた。
PHP 切り抜き
画像上の切り抜きたい場所を適当にポチポチ数カ所クリックして画像生成を押すと切り抜き画像が出来る。
白（左上の端の色）と画像の各ポイントの色の差を連想配列に入れておいて、画像上でクリックされた各ポイントからシードフィルアルゴリズムで塗りつぶしを繰り返し、（実際塗りつぶす訳じゃなく塗りつぶしのデータはマスク用の連想配列に入れる）処理が終わったら、マスクデータにぼかしをかけたりして、マスクを適用させて画像を生成するという感じ。
今回はテストなので普通に多次元配列を使ったが色情報なのでサイズ固定のSplFixedArrayを使った方が速そうな気もするが・・・。
あまりキレイでは無いので役に立たないかもしれないけどPHPで簡単切り抜き画像が作れることはできるという事が分かった。

2010/12/29 | Tags: amazon | 制作日記 | 1件のコメント »