[絵]小さくて温かな涼

小さくて温かな涼
ツメサキの世界のみほさんから、不意に素敵なおハガキが届いて
とてもとても嬉しかったので夏のお便りを描きました。

わたしの今の楽しみは甲子園。
もう準決勝だけど、夏の終わりは近いような遠いような…
夏は苦手なのです。

みなさんがどうか元気でありますように。

フォームメールで日本語のファイルを添付できない

前回の記事(フォームメールが文字化けする)の続き。

フォームで添付するファイル名が日本語の場合に、
正常に送信できていませんでした。

原因はファイルをサーバに保存する際の文字化け

【状況】
一時ファイル(temp)は画面遷移(内容確認ページ)の際に消えてしまうため、
サーバに保存しておき、送信時(内容修正で戻ったときも)に削除しています。
この際、ファイル名が日本語だと文字化けが発生しており、
フォームでの入力値と実際のファイル名の整合性がとれなくなっていました。
folderは添付ファイル保存用のフォルダ。パーミッションは777

$attach = $_FILES["attach"]["tmp_name"]; //一時ファイルへのパス
$attachname = $_FILES["attach"]["name"]; //ファイル名

if(move_uploaded_file($attach, './folder/'.$attachname) {
 echo 'アップロードしました';
} else {
 echo 'アップロードに失敗しました';
}

【対応】
サーバに保存する前に、文字コードをShift-JISに変換する。
(サーバOSがwindowsの場合)

$attach = $_FILES["attach"]["tmp_name"]; //一時ファイルへのパス
$attachname = $_FILES["attach"]["name"]; //ファイル名
$attachname = mb_convert_encoding($str, "SJIS", "auto");

if(move_uploaded_file($attach, './folder/'.$attachname) {
 echo 'アップロードしました';
} else {
 echo 'アップロードに失敗しました';
}

こちらを参考にさせて頂きました。ありがとうございます!!
PHP アップロードファイル文字化け – IT memo

フォームメールが文字化けする

フォームからphpを介して送るメールで、
◆◆◆◆◆ のように文字化けするときは、以下を追記。

$body = mb_convert_encoding($body, "ISO-2022-JP", "auto");

$bodyは、メール本文を入れている変数です。

mb_language(“ja”);
mb_internal_encoding(“UTF-8″);

も必要です。

MacでSASS,Compassをbuildできるようにする

昨年末、OSを Windows8 から Mac OSX Yosemite に変えました。
sublime text3でSASSをbuildするまでのメモです。

OS: Mac OSX Yosemite

手順1

以下をインストール
1. Xcode
2. Homebrew
3. rbenv (ターミナルで。rubyのバージョン管理です。)

手順2 – ターミナル

1. ruby最新版(今回は2.1.5)に設定する
2. gemを有効化
3. gemのsassとcompassをインストール

手順3 – Sublime Text3

1. Package installを有効化
2. 以下のpackageをインストール
2-1. SASS
2-2. SASS build
2-3. SCSS
2-4. Compass

ここでつまずく

ここまでいけば、config.rbさえあればbuildできそうなのにできない。
エラー内容:
[ERROR] compass not found. Make sure it exists in your PATH.

どうやらパスが通っていない。
ので、以下のファイルを編集します。
Macintosh HD > ユーザ > [あなたのユーザ名] > ライブラリ > Application Support > Sublime Text 3 > Packages > Compass > Compass.sublime-build
0108_03

「ライブラリ」が表示されていない場合は、以下の手順で表示してください。
「設定ボタン」をクリックして、「表示オプションを表示」
0108_01
「”ライブラリ”フォルダを表示」をチェック
0108_02

“osx”: {
“path”: “/usr/local/bin:/Users/[あなたのユーザ名]/.rbenv/shims:$PATH”
}

を書き足す。カンマや改行は適宜挿入してください。
0108_04

ここでつまずく2

エラー内容:
[ERROR] /Users/[あなたのユーザ名]/[あなたのフォルダ]/html/sass/style.scss (Line 87: Invalid US-ASCII character “\xE4″)

これは文字コードの問題。
scssファイルの先頭で、必ず以下を記述しましょう。

@charset “UTF-8″;

[jQuery]fancyboxとinfiniteslidを同時に使いたい

彼方立てれば此方が立たぬ、バージョン差異。
タイトルの通り、fancybox1infiniteslide同時に使いたかったので探しました。

結果、1.8ならOKでした。
↑headで読み込んでねー。

fancyboxは1.0。
http://fancybox.net/

※以前記事にしていた、fancyBox2は商用有料でした

↓過去記事
http://bit.main.jp/?p=1715

infinitedlideは、公式サイトが閉じられているみたい…(2014/10/23時点)
延々とスライドしてくれるスクリプトです。
width計算してcloneしてくれてるので、遷移スムーズです。
読み込みdelayも設定可能。

↓gitHubならありました
https://github.com/woodroots/infiniteslide

[jQuery]fancyBox2のイベントを取得したい(コールバック)

jQueryのfancyBox2を利用し、
ウィンドウが開いている最中は
別の処理をしないようにしたかったので
フラグ立てて解決したメモ。

fancyBox2はこちら
http://fancyapps.com/fancybox/

◆javascript (抜粋)

<script type="text/javascript">

// グローバルのフラグを定義
var flg = new Boolean(true);

$(document).ready(function() {
    $(".fancybox").fancybox({
       //ウィンドウが開く前の処理
       beforeShow : function(){
         flg = false;
         alert("beforeShow");
       },
       //ウィンドウが閉じた後の処理
       afterClose : function(){
         flg = true;
         alert("afterClose");
       }
    });
});

</script>

こんなかんじでグローバル変数を書き換えれば、
if(flg)で処理を分岐させることが可能です。
なお、jqueryやfancyBox2はこの処理の前に読み込んでおいてくださいねー。

このコールバック関数がなかなか見つからなくて困っていたのですが
公式サイトのDocumentのタブ切り替えたら載ってました…。([Callbacks]タブ)
公式が一番詳しく分かりやすく載っていると思いますのでぜひ参考に。
Documentation – fancyBox2