グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

最近当ブログもスパムコメントが鬱陶しくなってきましたので、
なにかスパム対策を施してみることに。

※一週間ほど様子をみましたが、下記の方法では現在来ている
スパムコメントを防げないようでした。
そのため新しい対策を　こちら　で取っています。


どうやらスパマーはコメントフォームのHTMLに書かれている
コメントCGIのパスを参照してくるそうで、
そのパスを実体参照にすればほとんどのスパムコメントを防げるとか。

合わせて、コメントCGIのファイル名も変更すると効果UPだそうです。
（デフォルトではmt-comments.cgi）


■手順
1. MTフォルダにある「mt-comments.cgi」を適当な名前にリネーム

2. 1で新たにつけたファイル名を、こちらのサイト等で変換

3. 同階層にある「mt-config.cgi」を開き、一番下に下記を追記
--------------------
CommentScript ○○○○(2で変換した文字列)
--------------------

4. 再構築


これで完了です。

ブログのテンプレートで<$mt:CommentScript$>タグを使って
コメントCGIを参照しているブログならこれだけでOKですし、
新しくブログを作ったときも反映されるのでお手軽です。

先日Flashでムービー制作を行ったのですが、
最後の工程で引っかかってしまったのでメモ。

Flashには「ムービーの書き出し」機能があってMOVやAVIで書き出せます。
が、現時点（CS6）ではどちらもイマイチでした。

■MOV形式
fpsが正しい数値になりません。

今回はフレームレートを30fpsで作成したので
書き出しも30fpsに設定したのですが、実際に書き出されたデータは30.3fps。
大差がないようでも正確な再生時間が求められる場合はNGです。。

対策としては、Flash8からビデオ書き出しをすれば問題ないそうなので
環境がある方はお試しください。


■AVI形式
_rootにあるムービークリップしか書き出せません。

なので初めから想定して制作していれば問題ありませんが、
入れ子にしてしまっていた場合は一部が抜けた動画になってしまいます。


AVIならfpsは問題ないようなので、MCを入れ子にしないように制作するか、
MOVで書きだしてからfpsを変更するか、
SWFで書きだして形式を変換する、などで回避するしかなさそうです。

先日会社のブログを更新しようとしていたところ、記事公開時にエラーが・・・
何度やってもエラーが解消されず、よくよく調べたら下記のようなことが起こっていました。


Firefox16でMovable Typeのカテゴリ・フォルダ選択ができない不具合について
Firefox 16 でカテゴリおよびフォルダの選択が保存できない。


自分はFirefoxのブラウザをメインで使用しているのですが、
どうやら新しいバージョンのFirefox16では、MovableTypeののカテゴリを選択できない。
という謎のバグが発生していた為でした。

解消するためのバッチが配布されているようですが、
もうChromeメインに乗り換えようかな・・・

以前もローディング画像の素材で取り上げたPIXEL LAB様ですが、
こちらの矢印素材も使いやすいオーソドックスなものが揃っています。

■PIXEL LAB
フリーデザイン素材「シンプル矢印アイコン25種×10サイズ」

デザインしてると矢印素材はいくらあってもいい気がしてきます。
どのサイトでもだいたい必要ですし、
（個人的に）似たものを使ってしまいがちなので・・。

jQueryのget関数を使ってPHPをリクエストし、
結果を戻り値として受け取る・・だけだったのですが、
勘違いをしていてひどく苦戦したのでメモします。


JS側は

$.get("test.php", function(data){
   alert(data);
});

というように、
PHPを実行してその結果を受けて
コールバック関数で表示させるというものです。

で、肝心のPHP側ですが、
処理の結果を return で返そうとしていて・・
（そもそも関数内じゃないので return は無意味ですね）

戻り値は XMLHttpRequestオブジェクトなので、
単純に print で出力してあげれば受け取ることができました。

コーディングをする際にできるちょっとした工夫をメモ。

■マウスオーバー
画像をふわっとオーバーします。

jQueryで簡単実装！フェードエフェクト付き画像ロールオーバー

サンプル


■マウスオーバー
背景色をふわっとオーバーします。

[jQuery] メニューの背景色をロールオーバーでふわっと変える

サンプル


■画像の表示
ふわっと表示させられます。

画像に遅延表示っぽいエフェクトを与えるだけのm5LazyDisplay

サンプル

PCサイトの階層に「sp」などのスマホサイト用階層を作り、
その中にPCサイトと同じ構造でスマホサイトが作られているときに、
スマホサイトからPCサイトへのURLを自動取得するJSです。

ようするに「PC版を見る」ボタン用のURLを自動で入れるJSです。

タイトルも説明も長いですが、
ソース自体はURLから /sp/ を外すだけの簡単なものです。

2012.9.24 修正
ソースが大雑把過ぎたので追記しました（水色箇所）。

■JS
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
   $("#btn_pc").click(function(){
     var s = location.pathname.split("/sp/");
     location.href = s[0] + '/' + s[1];
   });
});
</script>

■HTML
<a href="javascript:void(0);" id="btn_pc">PC版を見る</a>


サンプル
ダウンロード

赤文字が階層名ですので、任意のフォルダ名に変更してください。

.clickの部分にjQueryを使っていますので、
jQuery使わない方は書き換えてみてください。

以前ローディングアニメgifのジェネレータについて書きましたが、
こちらで配布されているアニメーションgifにも同じくらいお世話になっています。

■PIXEL LAB
http://www.pixelimage.jp/blog/2012/04/loading_icon.html

シンプルで何にでも合わせやすそうなものが揃っています。

なにより、いくつかドットがぱっきりした（アンチエイリアスのかかってない）
ものがあり、背景色が固定でないところでも使えて便利です！

今後も多用しそうな素材集です。

photoshopでレイアウトする際、地味に手間がかかるガイドを引く作業。
こちらのエクステンションを使えば簡単に作成できます！


GuideGuide
上下左右のマージンに中心線など、細かく設定できて、
１クリックでガイドが引けてしまうので、とっても便利です！

続いて、
「サイト作るときに便利なPhotoShop JSX、ショートカット、アクション」
という記事で紹介されていました。
かゆいところに手が届く、スクリプト詰め合わせです。
自作されたそうです。感謝です！

個人的には、一度書いた角丸のを数値指定で変更できる「角丸具合変更」と
複数選択したテキスト、シェイプを一度で変更できる「カラーピッカー」は、
便利ですばらしいです！

そして、
CS6からシェイプツールでドキュメントをクリックすると、ダイアログが表示され、
任意のサイズでシェイプを書く事ができるようになってました。

■ClockMaker Labs
http://clockmaker.jp/labs/

Flash Stage3Dを使用したサンプルを多数紹介されているサイトです。

サイトそのものがかなり素敵で、こういう動かしてるだけで
気持ちいいようなサイトを久々に見たような気がします。
（といっても最近できたサイトではありませんが）

紹介されているサンプルもどれもクオリティが高く、
どちらかというとギャラリーサイトみたいな感覚で眺められます。

実際、内容は全然理解できていないですが・・
見ているだけでもインスピレーションが刺激されると思いますので是非。