画像のサイズを動的に指定する際の理屈を忘れがちなので備忘録 | バシャログ。
梅雨明け！バンザイ！nakamura です。 例えばユーザがアップロードした画像を決まったサイズのエリアに表示するような処理。よくあると思います。（画像を動的に生成するのではなく、img タグの height と width を動的に生成するやつです。）よくある割にいまいち理屈を忘れがちなので今日は個人的な備忘録も兼ねてエントリーします。 まぁよくよく考えてみれば何てことはないのですが、、、一応順を追って整理してみましょう。 いくつかのパターンで考えてみる 仮に横 320px、縦 240px の表示エリアがあるとして、色んなサイズの画像をその中にちょうどいい感じで表示する理屈を考えてみましょう。 縦も横も表示エリアより小さい場合 赤の点線が表示エリアで、黒の実線が実画像とします。 図のように横長の画像を表示エリア内にぴったりフィットさせる場合。直感的に分かると思いますが、横辺の長さが表示エ
[ステップアップ！ CakePHP]画像をデータベースに保存する | バシャログ。
iPad、すでに3,000円以上のアプリを買ってるtanakaです。GoodReader初めて使いましたが便利ですね！ CakePHP連載6回目。今回はアップロードされた画像をデータベースに保存する方法を紹介します。 実はあんまりCakePHPとは関係ないですが、CakePHPのおかげで実装が容易になる部分もありますので紹介します。 画像格納用テーブル まずは画像を保存するためのテーブルを用意します。 CREATE TABLE `images` ( `id` int(11) NOT NULL AUTO_INCREMENT, `filename` varchar(60) NOT NULL, `contents` mediumblob NOT NULL, PRIMARY KEY (`id`) ); filenameは、URL中のファイル名として使います。(URLにidを使う場合は不要)cont
![[ステップアップ！ CakePHP]画像をデータベースに保存する | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
【Fireworks】Favicon を回してみる。 | バシャログ。
ドット絵職人たちが腕を競い合い、鎬を削る Favicon。今回は Favicon を回してみます。 まずは、普通の favicon.ico を作成します。 Favicon のサイズはドット絵職人が燃える 16×16 です。 Created by TOYAMA Fireworks で gif を作って ＠icon変換 で ico ファイルに変換するのが手軽なので好きです。 次に Fireworks で favicon.gif を作成します。アニメーション gif です。 作成した favicon.ico と favicon.gif を両方ともサイトのドキュメントルートにアップロード。 そして、下記のコードを html の head の中に記述します。 <link rel="shortcut icon" href="/favicon.ico" /> <link rel="icon" type=
WEBデザイナー向けのサムネイルつきブックマークサービスOnly2Clicks | バシャログ。
仕事柄、いろいろなWEBサイトを見ていますが気になるデザインや参考にしたいデザインがあった場合に、はてなブックマークやlivedoorクリップに登録している人も多いと思います。 Only2Clicksはサイトごとに登録することができるので、私はWEBサイトデザイン専用としてこのサービスをブックマークサービスを利用しています。 ログイン後の画面はこんな感じ。 ブックマークはカテゴリ―を使用できるので、私はデザインのテイスト別に分類して使っています。 またサムネイルを drug&drop で並べ替えられるのは便利。 ブックマークレットもあり、サイト名のとおり2クリックで登録できます。 自動でサムネイルが登録されますが、自分で編集しアップロードすることも可能です。 WEBデザイナーの方は、使ってみてはいかがでしょうか。 Only2Clicks
【Fireworks】5分で懐かしい液晶画面風の画像を作る方法 | バシャログ。
今や懐かしい液晶画面風の画像を素早く作成する TIPS です。 使用するソフトは Fireworks8 です。 STEP1 まず適当な大きさの矩形に、塗り（#919E91）とフィルタ（シャドウ 内側）を設定します。 パネルに適度なノイズ感を出すため、塗りに薄くテクスチャ（水平線2）を設定します。 STEP2 同じ大きさの矩形を重ね、塗りを無くしてストローク（太さ 4px）を設定することで枠にします。 ストロークにもフィルタが有効ですので、ここではベベル（内側）をかけています。 STEP3 適当に文字を書きます。文字色は真っ黒だと不自然なので #333333 です。 テキストのアンチエイリアスをオフにするのがポイントです。 STEP4 そのままだと味気ないので、いかにもなパーツを配置したり一部の文字を白抜きにしたりします。 白抜きにする文字の色は背景色と同様に #919E91 です。 STE
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
