Flash・PHP・DB・js

[DTP]PhotoShopで写真をイラスト風にする

Photoshopで写真をイラスト風に加工するやり方をメモ。

1)まずは元画像をレイヤーにコピーし、上のレイヤーを加工する。
2)[フィルタ]>[テクスチャ]>[粒状]を選択し、
 密度を20、コントラストを50、粒子の種類をスプリンクルに設定。
3)[フィルタ]>[ぼかし]>[ぼかし(強)]を選択し、
 [フィルタ]>[ブラシストローク]>[ストローク(斜め)]を選択し、
 方向のバランスを50、ストロークの長さを15、シャープを3に設定。
4)レイヤーパネルの不透明度を30%ぐらいにする。
5)次に元画像をもうひとつレイヤーにコピーし、一番上にして加工する。
6)[フィルタ]>[表現方法]>[輪郭検出]を適用。
7)[イメージ]>[色調補正]>[チャンネルミキサー]を選択。
 下部にあるモノクロにチェックを入れ、モノクロにする。
8)[フィルタ]>[テクスチャ]>[テクスチャライザ]を選択し、
 テクスチャからカンパスか麻布を選択し、拡大縮小率を140%程、レリーフを8ぐらいに設定する。
9)レイヤーパネルで通常からオーバーレイへ変更する。

参考にしたサイトはここ

==PR==
傘,アンブレラ てんとう虫 リモコン 椅子,チェアー,ベンチ ラッピングリボン コルク,ワインオープナー トランシーバー 箱,ギフト,ギフトBOX,プレゼント さくらんぼ 車,トラック リボン,ラッピング 色鉛筆,カラーペンシル アタッシュケース,ビジネスバッグ,カバン ピーマン,カラーピーマン,パプリカ 緑,植物,グリーン,葉,葉っぱ 鳥の巣,巣箱 ボード,看板 風船 ハート,矢,恋,恋愛 メガネ,サングラス

shadowbox.js

これまでajaxでLightboxを使用していましたが、画像の表示のみでした。

弊社サイトの携帯FLASHゲームの実績紹介ページ用にLightbox風にswfを表示できないかと検索してみました。

世の中便利ですね。
ありました。

「shadowbox.js」

最新バージョンは3.0。
「shadowbox.js」はPrototype、jQueryなど、複数のJavaScriptのライブラリに対応した、swfや動画などを拡大表示できるスクリプトです。

「shadowbox.js」ダウンロード

使い方は至って簡単。
バージョン3.0になって更に簡単に使えるようになった感じです。

shadowbox.js と shadowbox.css を参照して
Aタグに rel=”shadowbox” を追記するだけ。

携帯用画面もshadowboxで見せようとhtmlの表示を試みるがうまくいかない。
よくオプションの解説を見てみると

players: [“html”]

ではなく

players: [“iframe”]

でした!。うっかりうっかり。

◆併用できるJavaScriptのライブラリ

◆対応ブラウザ

  • Internet Explorer 6+
  • Firefox 1.5+
  • Opera 9+
  • Safari 2+
  • Camino

◆対応メディア

  • 画像(PNG, JPEG, GIF)
  • 動画(FLV, QuickTime, Window Media Player)
  • ウェブページ

◆オプション変更

  • ローディング画像の変更
  • フラッシュビデオプレイヤー
  • 背景色
  • 透過度
  • 枠線の形状・色
  • サイズ
  • キーボード操作

etc…

詳しくは「shadowbox.js」のサイトで。

==PR==
印鑑,STOP 地図,世界地図 ペン ハウス,家,レンガ 工具,クレーン ビリヤード ボウリング,ピン ゴルフ,ゴルフクラブ アメリカンフットボール,ヘルメット 爆弾,時限爆弾 ジクソーパズル,ピース ゴルフカート 絞首台,死刑台 男子用便器,トイレ 黒板,ボード カジノダイス テニスコート 音符 リボン,ラッピング 椅子,チェアー

UTF-8とCGI

最近はUTF-8で記述しているサイトが多く、これまで使用していたCGIを流用させてみる。

Encodeモジュールを使用して

use Encode;
use CGI;

#文字をデコード
$body = decode (‘utf8’,$str);

# ~、-など文字化け対策
$body =~ tr/[\x{ff5e}\x{2225}\x{ff0d}\x{ffe0}\x{ffe1}\x{ffe2}]/[\x{301c}\x{2016}\x{2212}\x{00a2}\x{00a3}\x{00ac}]/;

#JISコードに再度変換
$body = encode (‘jis’,$body);

文字化け対策が必要な文字は
「~」「∥」「-」「¢」「£」「¬」

==PR==
色鉛筆,カラーペンシル ナイフ,短剣 緑,植物,グリーン,葉,葉っぱ ソリ 車,トラック 机,デスク,椅子,チェアー,テーブルセット,応接セット 船,帆,ボート トマト,ミニトマト ミリタリー,BOX 箱,BOX,小物入れ 洗濯バサミ,ピンチ 積み木,おもちゃ 地図,世界地図 ジクソーパズル,ピース ビーチサンダル 拳銃,銃,鉄砲,ライフル 積み木,おもちゃ,組み木 家,ハウス 椅子,テーブル,応接セット,テーブルセット 酒,ワイン,洋酒,ボトル

Jcode.pm

よくお問い合わせフォームのCGIで「jcode.pl」を使用してエンコードしているcgiが多い。

最近はxhtmlが主流となりutf−8で記述することが多くなったため、
そのページで今までのcgiを使おうとすると、文字化けするわするわ。
こまったちゃんです。

今さらながら解決法を探っていると「Jcode.pm」の存在を知ったのでメモしておく。

使い方は簡単。
Jcode.pm」をダウンロードしてjode.plと同じようにcgiと同じ階層にアップロードして「Jcode.pm」を使えるようにPerlソースに以下の1行を書きます。

use Jcode;

そして、変換するときに下記の例を参考に記入。

Jcode::convert( $str , "sjis", "utf8" );

第2引数が変換後の文字コードで第3引数が元の文字コードです。
文字コードの指定には、”jis”、”sjis”、 “euc”、”ucs2″、”utf8″が使えるようだ。

勉強になったわ〜。

==PR==
携帯電話 緑,植物,グリーン,葉,葉っぱ フィルム,映画 ノート,ペン ボックス,バッグ 机,デスク,椅子,チェアー 椅子 テレビ,ブラウン管 色鉛筆,カラーペンシル 本,BOOK,ファイル,バインダー 絵の具 枯葉,落ち葉 ダンボール,段ボール,箱 チケット,券 鉛筆削り,シャープナー 鍵盤,ピアノ テレビ,液晶テレビ ジクソーパズル,ピース ナイフ いちご,イチゴ,果物

prototype.js と jQuery.js のコンフリクト[JavaScript]

prototype.js と jQuery.js を同時に使用しなければならないサイトがあり、片方が動作していないことに気づく。

JavaScriptのパスを消すと、片方ずつでは動作するのでJavaScriptがコンフリクトしているのかなと思い、ぐぐってみる。

ウェブネタメモ帳-web material memo pad-」さんのサイトを参考にさせていただき解決したのでメモっておく。

jQuery.jsと prototype.jsを同時使用した場合のコンフリクトを回避する方法

記述は”prototype.js”を先に書く。

その後に以下を追記。

<script type="text/javascript"> jQuery.noConflict(); var j$ = jQuery; </script>

その後に
“switch.js”と”scriptaculous.js”を記述。

今回jQueryは”switch.js”を使用しているので
“switch.js”の以下を変更

$(” を “jQuery(” に全置換

これでコンフリクトが回避できました。
参考サイト様に感謝です。

smartyでXML宣言を省略

IE6のせいでxml宣言ほんと迷惑。
ECCUBEで構築したサイトで、IEの時はXML宣言を省略することができた。
/data/Smarty/templates/default/site_frame.tpl の先頭に以下を追加。

<!--{php}-->
$ua=$_SERVER["HTTP_USER_AGENT"];
if(!(ereg("Windows",$ua) && ereg("MSIE",$ua)) || ereg("MSIE 7",$ua))
print '<?xml version="1.0" encoding="UTF-8"?>'."\n";
<!--{/php}-->

メモメモ

EC-CUBE文字化け

EC-CUBEをさくらインターネットで運用しようとした際に文字化けします。
 
解決法が見つかったのでメモしておく。
 
http://www.infojam.net/support_m_10_2.html
(インフォジャムネットワーク様より引用)
 
 
メモメモ。