2010年9月アーカイブ

携帯3キャリア対応の絵文字・デコメが使えるメールシステム開発時にハマった点。
ハマり時間約10時間・・・

まず、デコメールの各キャリア向けのメールデータの組み立ては、すでに既知の方法で特に問題なく送信できた。
（2010/9/4現在）
【参考サイト】
・http://pentan.info/mobile/send_deco.html　など

しかし、ドコモ＆ソフバンは上手くいくのに、auのデコメだけは添付画像（インラインHTML表示）がうまくいかない・・・というか、ばらつく。

サイズが1KB前後の画像ファイルは正常にインライン表示されるのだが、少しサイズが大きくなる（2KB前後）と、インラインに表示されず、別途添付ファイルのみダウンロードしようとしてもなぜかできない。
しかもインラインFLASH対応機種なはずなのに、swfファイルも再生されない。
（検証した機種はSH005）

これについて悩んでいたら、以下のサイトを発見。
http://www.plusmb.jp/2009/09/04/4481.html
てゆうか、よく見たら冒頭のサイトにもちゃんと書いてあるし・・・

これによると「auは、サイズが大きめの添付ファイルは、base64エンコードした後76byteごとに改行を入れる必要がある」らしい。

しかし、なんでいきなりこんな話になるのかと思って少し調べたら、どうやらRFCに準拠したBase64エンコードは、76byteごとに改行文字を入れなさいということらしい。
（ただしsubjectの64エンコードでこれをやるとダメ）

もともと実績のあるMIME.pmとかのbase64メソッドを使ってエンコードしていれば問題なかったのだが、私の場合、スクリプト配布時のことを考えて、自力で64エンコードしていたため、ハマったらしい。
（MIME.pm内を見てみると、たしかに76byteごとに改行を入れる処理があった・・・）

よって、対応策としては、
添付ファイルデータをくっつけるときに、

$buf = &base64encode($buf);　#自力の64エンコードサブルーチン
のあと、
$buf =~ s/(.{1,76})/$1\n/g;

という処理を加えることで解決。

これを、メール内のtext/htmlパートにくっつけてやればよい。
（もちろんflashの場合は、flashのmimeタイプを指定）

しかし、docomoとsoftbankはこの処理をやらなくてもちゃんと送れるもんだから、最初は携帯の設定が悪いんだとばっかり思ってました・・・



------------------------------------------------------------------------------

以下は、2010/9/4現在の検証でわかったことのまとめ。

検証機種は、
ドコモ・・・P08A（松下）
au・・・SH005（シャープ）
Softbank・・・930CA（カシオ）

・KDDIの技術資料（http://www.au.kddi.com/ezfactory/tec/spec/decorations/emoji.html）には、デコメ絵文字は20×20ドット指定になっているが、120×25くらいのファイルでも送信できた。
　また、Dispositionは指定しなくても問題なかった。

・swfファイルのサイズ制限は特に書いていないが、50px×50px（約２KB）は３キャリアとも送信できた。ただし、機種により再生の滑らかさはだいぶ差がある模様。

・冒頭に紹介したサイトでは、HTMLソースはquoted-printableエンコードすると書いてあるが、特にこれを行わず、「Content-Transfer-Encodeing: 7bit」で送信しても、特に問題なかった。

また、Softbankにおいては、HTMLソースをUTF8で送信（quoted-printableエンコードなし）しても特に問題なかった。

また、text/plainとtext/htmlの両方のパートが無いとダメと書いてあるが、docomoとsoftbankにおいては、text/plainパートを記述しなくても問題なく送信できた。


以上、ご参考までに。

やりたいこと。

javascriptで画像ファイルの一覧を表示
　　　　↓
一覧から一つの画像を選択
　　　　↓
javascriptでその画像のサイズ指定画面を表示
　　　　↓
サイズを入力しOKを押すと画像名とサイズを表示
（実務的には、その情報をテキストエリアに入力させたりする）



【HTML】
<!--　JSファイル読み込み　-->
<script type="text/javascript" src='./transition.js'></script>


<!--　事前に遷移画面は用意しおき、隠しておく-->

<!--　画像選択画面　-->
<div id="confirm1" style='visibility:hidden;position:absolute;'>
　<div>
　　<div style="float:left;padding:3px;">
　　　<b>画像一覧</b>
　　</div>
　<div style='text-align:right;padding:3px;'>
　　<a href="javascript:void(0)" onclick="close_img_list();">閉じる</a>
　</div>
　<div style='overflow:auto;'>
　　<table>
　<tr>
　　　　<td style="padding:4px;">
　　　　　<!-- 画像のイメージと画像ファイル名 -->
　　　　　<div style="overflow:hidden;float:left;">
　　　　　　<div style='clear:both;overflow:hidden;'>
　　　　　　　<img src='./hoge/hoge.gif' />
　　　　　　</div>
　　　　　　<div>
　　　　　　　　<a href="javascript:void(0)" onclick="show_given_size('hoge.gif');">hoge.gif<a/>
　　　　　　</div>
　　　　　</div>
　　　　　　　　・
　　　　　　　　・
　　　　　　　　・
　　　　</td>
　　　</tr>
　　</table>
　</div>
</div>

<!--　画像サイズ指定画面　-->
<div id="confirm2" style='visibility:hidden;position:absolute;'>
　<div>
　　<div style="padding:3px;">
　　　<b>画像サイズ指定</b>
　　</div>
　　<div style='padding:3px;'>
　　　<a href="javascript:void(0)" onclick="close_given_size();">閉じる</a>
　　</div>
　</div>
　<div>
　　<table>
　　　<tr>
　　　　<td>
　　　　　画像の縦横サイズを指定してください
　　　　</td>
　　　</tr>
　　　<tr>
　　　　<td>
　　　　　<form name='given_size' action='#'>
　　　　　　W <input type='text' name='img_w' value='' /> px × H <input type='text' name='img_h' value='' /> px
<input type='button' name='ok' value='O K' onclick="alert(get_img_info\(\),'');close_given_size();" />
　　　　　　<input type='hidden' name='img_name' value='' />
　　　　　</form>
　　　　</td>
　　　</tr>
　　</table>
　</div>
</div>


<!--　初期画面　-->
<div>
　<a href='javascript:void(0)' onclick="show_img_list()">画像一覧を表示</a>
</div>


【javascript（transition.js）】

//　画像一覧表示
function show_img_list() {
　document.getElementById("confirm1").style.visibility="visible";
}

//　画像サイズ指定画面表示
function show_given_size(name) {
document.getElementById("confirm2").style.visibility="visible";
document.given_size.img_name.value = name;
}

//　画像一覧を非表示
function close_img_list() {
document.getElementById("confirm1").style.visibility="hidden";
}

//　画像サイズ指定画面を非表示
function close_given_size() {
document.getElementById("confirm2").style.visibility="hidden";
}

//　画像名と画像サイズを組み合わせて返却
function get_img_info(){
var img_name = document.given_size.img_name.value;
var img_w = parseFloat(document.given_size.img_w.value);
var img_h = parseFloat(document.given_size.img_h.value);
if((!img_h) || (!img_w) || (img_h < 1) || (img_w < 1) ){
alert("サイズは1以上の半角数字で指定してください");
}
return '画像ファイル名は' + img_name + 'で、サイズは横が' + img_w + 'PX、縦が' + img_h + 'PXです。';
}


------------------------------------------------------------------------

※ポイントは、hidennフィールドに後から値を付け足すということ。