タグに「Ajax」を持つ
1〜7件目 / 7件
1

　div版サムネイル生成ver0.2 / magicien　

canvas版サムネイル生成ver0.1を改良。ソースはかなり汚いですが、ver0.3はハイブリット版にする予定なもので、canvas版のソースはそのまま。

画像URL:
サムネイルサイズ
幅：ピクセル

高さ：ピクセル

拡大率：％

出力画像タイプ：
GIF JPEG PNG

　サムネイル生成ver0.1取説 / magicien　

使い方説明。

１．サムネイルを生成したい画像のURLを入力、変更ボタンを押す。（扱える画像は、GIF、JPEG、PNG。ちなみに、ネット上にアップされているファイルしか扱えない）
２．上部の画像が変更されるので、生成したいサムネイルのサイズをテキストフィールドに入力するなり、スライダーを動かすなりして変更する。（元の画像よりも大きいサイズのサムネイルは作れない。サムネイルの意味ないしね。）
３．拡大率を変更したり、上部の画像をドラッグすることで、希望する画像になるよう頑張る。
４．逸る気持ちを抑えつつ、出力画像タイプを選ぶ。
５．サムネイル作成ボタンを祈りを込めて押す。
６．下部にできたてのサムネイルが表示されるので、ドラッグアンドドロップやら右クリックやらでお持ち帰り。

といった具合。ようやくAjaxらしいことができた。まだまだ改善すべき点は多いわけで、いずれバージョンが上がってきたらLGPLか修正BSDで配布してみようかな、と思ったり。

　サムネイル生成ver0.1 / magicien　

作ってみた。奥さん、すごいですよ、これ。
コード量が多いんで、説明はまた今度。

画像URL:
サムネイルサイズ
幅：ピクセル

高さ：ピクセル

拡大率：％

出力画像タイプ：
GIF JPEG PNG

　続sliderとcanvasの練習 / magicien　

前回はSafariしか動かなかったので、今回は他のブラウザでも動くものに。ついでにBezier曲線を使ってみた。

R
G
B
A
T
RGBAで色を変更、Tで変形。Bezier曲線はよくわからず。

　scriptaculous.jsのsliderとcanvasのshadow / magicien　

せっかくscriptaculousを導入したので、スライダーを使ってみた。そのついでにcanvasの実験。


X
Y
Blur
スライダーを動かすと、影の位置とぼかし幅が変わります。そして、相変わらずJavaScriptのコードの説明は放棄...いつか気が向いたら説明書きます。本当は、スライダーに画像を設定してもっと見栄えを良くできるのだけれども、画像を作るのが面倒なのでやめた。これもいつか気が向いたら...。まぁこういったところで僕の人となりを察してもらえればと思います。

そして、アップしてから気づいたけど、shadowはSafariしか使えないらしい。他のブラウザを使っている人はスライダーを左右に動かして遊んでね♪何も起こらないけど（泣）

　canvasに挑戦 / magicien　

JavaScriptにも慣れてきたので、以前から気になっていたcanvasに挑戦してみた。

canvasタグを使うと、Safari、FireFox、Operaで直線やらベジエ曲線やら画像やらが描画できるらしい。ただ、IEでは動かない...と思ったら、GoogleがExplorerCanvasなるものを作っていたらしく、これを使えばIEでもcanvasが使えるようだ。同梱されているサンプルがすごいので、JavaScriptをやらない人もダウンロードして見てみるといいかも。

で、何かミニゲームでも作ろうと思ったけど、画像の回転が限界でした。OpenGLを使ったときに勉強したはずの座標系の回転と平行移動でつまづいて、数時間かかってしまった...。基礎から勉強し直さないとだめかも。
「回転開始！」ボタンを押すと、DarkHorseのロゴ画像が回転します。

　PHPでBOM / magicien　

PHPでUnicodeサイン（BOM）を出力するにはどうすればいいのか、いろいろ調べてみると、とても簡単なことに気づいた。

管理者用ページでAjaxを使っているのだけれども、PHPで出力したUTF-8のデータをそのまま表示すると、Safariで文字化けしてしまう。文字化けを防ぐためにはBOMを付けなければならない、という。で、BOMというのは0xffefという2バイトの数値らしいのだけれども、最初にどうやって2バイトだけ出力するのだろう、と思って調べてみると、一番最初に

header( "Content-Type: text/html; Charset=utf-8" );

というヘッダを出力すれば、自動的にBOMが付加されるらしい。な〜んだ、そんな簡単なことだったのか、というお話。