ヨコハマハンドメイドマルシェ2013

【携帯】入力フォームでデフォルト文字種を設定する方法

携帯サイトでは入力フォームにフォーカスした際、通常は入力モードが「全角かな」になっているのですが、メールアドレスや電話番号を入力する項目など、フォームのデフォルトを半角英字や数字に設定する方法3キャリア別にまとめておきます。

まずは基本的な書き方。

【docomoの場合】
フォームに、istyle="○"と記載。
istyle="1" 全角かなモード
istyle="2" 半角カナモード
istyle="3" 半角英字モード
istyle="4" 半角数字モード
▼こんなかんじ…
<input type="text" name="hoge" value="" size="12" maxlength="9" istyle="4" />

ただし、type属性にpasswordが指定してある入力フォームでは無効。
【auの場合】
フォームに、format="○"と記載。
format="*A" 半角英字(大文字)モード
format="*a" 半角英字(小文字)モード
format="*N" 半角数字モード
format="*X" 半角英数(大文字)モード
format="*x" 半角英数(小文字)モード
format="*M" 全角かなモード
format="*m" 全角英字モード
▼こんなかんじ…
<input type="text" name="hoge" value="" size="12" maxlength="9" format="*N" />
通常は*のままでよいのですが、ここに数字を入れると、数字の文字数で入力を指定させることになるようです。format="3N"→3文字の数字で入力
【softbankの場合】
フォームに、mode="○"と記載。

mode="hiragana" 全角かなモード
mode="katakana" 全角カナモード
mode="alphabet" 半角英字モード
mode="numeric" 半角数字モード
▼こんなかんじ…
<input type="text" name="hoge" value="" size="12" maxlength="9" mode="numeric" />

上記タグを、ひとつのフォームに記載すれば3キャリア対応することができます。
▼こんなかんじ…
<input type="text" name="hoge" value="" size="12" maxlength="9" istyle="4" format="*N" mode="numeric" />
よく「入力制限するタグ」として紹介されていますが、これらは、あくまでもデフォルトの文字種を設定するまでです。

===
ここまではよいとして。
WAP 2.0の独自仕様としてあるi-modeXHTMLで書かれているサイトでは、また書き方が違います。
style="-wap-input-format:"*<ja:h>"" 全角かなモード
style="-wap-input-format:"*<ja:hk>"" 半角カナモード
style="-wap-input-format:"*<ja:en>""  半角英字モード
style="-wap-input-format:"*<ja:n>"" 半角数字モード
▼こんなかんじ…
<input type="text" name="hoge" value="" size="12" maxlength="9" style="-wap-input-format:"*<ja:hk>" />

↑※&は本当は&(半角)です。
さて。これが問題で上記指定を他のキャリアと共存させようとすると問題が発生するようです。
自分では試していないので不確定ですが「SoftBankでは指定が無効になる」やら「SoftBankではデフォルト指定ではなく、他の文字種が入力できなくなる」やら色々と問題があるようです。

そんなこんなで、携帯で全機種の絵文字を表示させる件も然りですが、やはりきちんとした携帯サイトを作るならばキャリア別にページを分けるのが無難だと・・・いうことでしょうか。

なによりも、携帯サイトのキャリア別動作確認は、パソコン上の携帯ビューワーだけでは表示確認の限界があるのが不便なところ。
今回の入力モード切り替えも、ビューワーでは再現できないし。3キャリアだけでなくバージョンによってもかなり表示が変わりますし・・・。
携帯サイト制作は、3キャリア毎に表示・動作確認をしてくれる同僚に協力を得ないときびしいです。

ちなみに・・・こんなサービスもあるようです。
携帯サイト実機テストサービス ケータイテストPro

【MT/PHP】文字数以上のときに「...」と省略する方法

仕事で、OmnitureのSiteCatalyst(サイトカタリスト)を導入していたのですが、タグの中に記載する変数に長さ制限があるらしく、CMSとかMovable Typeなどで自動生成されるタイトルなどに文字数制限をかける必要がありました。

そんなこんなで、まとめておきます。

nextMovable Typeのタイトルなどが
文字数以上のときに「...」と省略するプラグイン。


1.下記のタグをコピーし、文字コードをEUCに設定して「mt-trimj.pl」という名前で保存。
# 指定された文字数(半角文字数)にトリミングするフィルタ
# EUC-JP 専用

package MT::Plugin::Trimj;

use MT::Template::Context;

MT::Template::Context->add_global_filter(trimj_to => sub {
my($str, $nstr, $ctx) = @_;
my $sippo = '...';
my $lenstr = length($str);
if($lenstr <= $nstr){return $str;}
my $out = substr($str,0,$nstr);

if ($out =~ /¥x8F$/ or $out =~ tr/¥x8E¥xA1-¥xFE// % 2) {
chop $out;
if($out =~ /¥x8F$/){
chop $out;
}
}

$out .= $sippo;# 尻尾を付けたくない場合は、コメントアウトのこと。
return $out;
});

1;
2./pluginsディレクトリに「mt-trimj.pl」をアップロード。
3.省略したい箇所に trimj_to="文字数"$と入れる
<$MTEntryTitle trimj_to="20"$>
上記は、エントリータイトルが20文字以上になると、...と省略される例です。
350日の節約生活「MT:タイトルの文字数制限」参考

デザイン的に見栄えを整えたり、なにかと役立つプラグインですね!

nextPHPで「...」と省略する関数
<?php
$str="文字列";
$str = mb_strimwidth($str, 0, 20, "...",utf8);
?>
mb_strimwidth(
   文字列,
   開始位置,
   文字数,
   追加文字
  [,文字コード] )

という感じで書くようです。文字コードいれないと文字化けしました。

PHPは書けませんし、さっぱりわからんのですが、エンジニアがつくったPHPをいじる機会が多いので、見栄えにこだわりたいデザイナーが、上記関数を覚えてれば便利だということで教えてもらいました。

今回も役に立ったよ、ありがとう。

【CSS】IE6 リストで隙間が出るバグ

IE listで隙間がでるバグIE7だと問題ないのですが、IE6で出る症状です。リストでナビゲーション作ってるときによく出くわします。←こんな感じで、リストに妙な隙間が出るやつ。margin:0px;にしてもpadding:0px;にしてもこの隙間は一行に消えません。



<ul>
<li><a href="#">ナビゲーションA</a></li>
<li><a href="#">ナビゲーションB</a></li>
<li><a href="#">ナビゲーションC</a></li>
</ul>


HTMLはこんなかんじ。
対策が分からなかった時は、
<ul><li><a href="#">ナビゲーションA</a></li><li><a href="#">ナビゲーションB</a></li><li><a href="#">ナビゲーションC</a></li></ul>


という感じで、無理やりタグの中の改行を取って治してました。まぁ、これじゃあタグが見づらいので、事情を知らない人が見たら「なにこれ、見にくいわー」と、きっと改行して見やすくなおすかと思います。時間経つと、すっかり忘れてしまって、後々タグを見て「なにこれ、見にくいわー」と自分で改行入れたりすることもあります。で。あとで、思い出したり・・・。

不便なので、ちゃんと調べてみて、かなり検索ヒットしたのですぐ解決です。色々と解決策を見つけましたが、どれが文法的にベストかは調べ中です。
IE6ではリスト内のaとかを、display:block;などでブロック化した場合、line-heightの解釈がおかしくなるようです。

◆解決策1
liタグに line-height:0;
liの中の aタグに、line-height:normal;

◆解決策2
liの中の aタグに、zoom: 1;

他、例えば上記のリストを背景画像に指定した画像ボタンの場合は、
◆解決策3
liタグに vertical-align:bottom;

◆解決策4
ulタグかliタグに font-size:1px;

場合によるのですが。
メモ程度なので、説明が雑でゴメンナサイ。
色々と対策ありそうです。

とりあえず、IEには悩まされます。
今日は、電話でも先方さんが「一人ひとりのパソコンに入ってるIEを消して回るほうが楽ですよね・・」と愚痴をこぼしていて、本当にそうだなぁと思いました。

.htaccessを簡単に作る

WebサーバのApachでサーバの設定を自由に設定するファイル、.htaccess。
個人的に一番よく使うのは、アクセス制限でしょうか。
特定のディレクトリにアクセスしたときに、ベーシック認証(アカウント・パスワードを出すやつ)かけたり。セキュリティやプライバシー保護のために、特定のIPからしかアクセスできないようにしたり、荒らし対策などで特定IPからのアクセスを禁止したり・・・。

とても便利な.htaccess。

その他にも、.htaccessで、notfoundのエラーページをカスタマイズすることができたり。
サイト移転したときに、リダイレクトをかけたり。
文字化け対策に文字コードを設定したり。
拡張子の読み込む優先順位をつけられたり。

とても便利な.htaccess。(2回目)

よく使うからこそ、パスワードを暗号化させたり、パスを設定したり、なにかと面倒な.htaccessですが…こんな便利なサイトを発見しました。

next.htaccess作成

設定を入力すると・・・いとも簡単に.htaccessが作れちゃいます。

しかも大変助かるのがベーシック認証の項目で、パスワードのランダム作成をしてくれる!!いちいち他のサイトでランダム生成させては、暗号化して・・という手間が一気に省けそうです。

すばらしい。もっと前から知っていれば…。
使えそうです。

ただ、ベーシック認証を作るところをオンライン上でやることに対してやや不安でもありますが・・・。少し怖いので、ダミーのパスで設定して、オフラインで本番のパスに書き換えるのも手かしら。

【MT】日時指定処理が機能しないとき・・

Movable Type(MT)の機能で、日時指定をして予約させる処理が動かない場合の対応策。調べてみたところ、サーバ側でcronといわれる「定期的にコマンドを実行する仕組み」に設定を登録しなければならないようです。
具体的な書き方は下記に上がってます。
MobableType よくある質問
設定方法はがんばって上記を設定するまでなのですが・・・

問題は、、、レンタルサーバによってはこのcron機能の設定ができるところとできないところがあるのです。しかも、共用サーバーのサービスでは、比較的設定を開放しているところが少ないことに気づきました!!ムニョムニョ

例えば…よく使う以下のサーバでは、
【ロリポップ・チカッパ】
 全プラン×

【ファーストサーバ】
 共用サーバは全て×
 専用サーバ ○

【スピーバ】
 SS-1× SS-2× SS-3× VS○

【さくらのレンタルサーバ】
 ライトプラン ×
 スタンダード以上 ○

中でも、さくらは優秀で、管理画面から簡単に設定ができるようです。
▼とてもわかりやすい説明です
[MovableType] 指定日投稿 - さくらインターネットでの設定

さくらのサーバは、安いのに高機能で個人的に好きです。
ただ、管理画面がわかりにくいのが難点。。
知識のない人やサーバ初心者でもわかりやすくて簡単なのは、やっぱりロリポップ系列なのかも。。。安いし、いつも相談に乗ってくれるろりぽおじさんがいるぽ。
教えてロリポおじさん

そんなこんなで、、今回問題が起きた案件はやはりcronが設定できないサーバでした。。
どうしたものかと悩んでいたら、こんなすばらしいプラグインを配布している方が!!
ほぼ指定日投稿(JavaScript版V2.10)
Movable Typeには「指定日投稿」の機能があり、指定した日時に自動的にエントリーを投稿することができます。ただし、そのためには指定日投稿のスクリプトを定期的に実行する必要があります。cronを使えないサーバーだと、スクリプトを定期的に自動実行することができません。この問題を解決するために、「ほぼ指定日投稿」(JavaScript版)というプラグイン公開していました。ブログに誰かがアクセスしてきたときに、指定日投稿の処理を行うというものです。(引用)

というわけで、解決。
助かりました!

★余談
教えてロリポおじさんに「鏡もちうん○鏡もち」系の下品な言葉を投稿してみたら、
「小学生…?」と的確な返答が返ってきますよ。
やったことないから、わかんないけどぉ〜ふぅ〜ん

【Flash】別ドメイン間でのやりとりで気をつけること

忙しくて焦っていたために、頭がこんがらがって今日は変なことに時間を費やしてしまいました。。ブログパーツなど、複数のドメインやサーバを絡んだ時に発生するトラブル。ファイルを置く場所やらなにやら、頭がこんがらがってしまったので・・・この機会にまとめておきます。

まず、、よくあるトラブルが『クロスドメイン』。
※今回全然複雑なことをしてなかったので関係が無かったのに、うっかりこれが原因かと思って、大変無駄な時間をすごしました・・・。

◆クロスドメインについて
クロスドメイン
クロスドメイン制限とは、違うドメイン間でデータのやりとりをする際に、どうやらブラウザのセキュリティ上、同じドメイン内からでないとデータを読み込むことができない、というものらしい。
Flash以外の他のプログラム言語やらに詳しくないのでよく知らないけれど、すべてのアプリケーションで発生する壁らしい。

Flashで一番簡単な解決策は、crossdomain.xmlを読み込む先のサーバに設置して、Flashから読み込むという方法。
crossdomain.xmlは
<?xml version=”1.0″ encoding=”UTF-8″?>
<cross-domain-policy>
<allow-access-from domain=”*” />
</cross-domain-policy>

と記述。
Flashの第一フレームに
System.security.loadPolicyFile(”http://www.○○○/×××/crossdomain.xml”);

と、xmlを配置しているところに絶対パスで指定。

これだけー。詳細はこちら

◆AllowScriptAccess パラメータについて
今回、これが原因でした。とても基本的なことなのにうっかりしててどつぼにはまってしまいました。。なんという。
Flashムービー(SWF)貼り付けられるHTMLと別のドメインにあるときに、swfで指定されているリンクがgetURLがきかなくなる。
AllowScriptAccess

こういうことです。
ブログパーツなんて、まさにこういう状況です。swfはサービス元のサーバにあって、貼り付けられるブログ(HTML)はてんでバラバラのドメインなのですから・・・

解決策としては、単純に貼り付けるタグにAllowScriptAccess パラメータを指定するだけです。

<object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase=" http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="120" height="200" align="middle">
<param name="movie" value="http://www.○○/××.swf">
<param name="allowScriptAccess" value="always">
<embed
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer"
width="120" height="200" align="middle"
src="http://www.○○/××.swf"
allowScriptAccess="always"
</embed>
</object>

詳細はこちら

よく調べていないけれど、上記2点ともFlashplayer7以前の対策かもです。こんどもっとちゃんと調べておきます。
とりいそぎ。疲れたのでまた〜パー

【CSS】印刷用CSSについて

久々に。メモメモ。

印刷したときだけ、適用されるように書くCSS。
仕事で使って、これは便利で使えるなと思ったものをまとめておきます。
==
印刷用に適用させるには、
<link rel="stylesheet" type="text/css" href="print.css" media="print">
とHTMLに記述。
ご存知の通り、通常のスクリーン画面はmedia="screen"で、media="print"が印刷用ね。
cssの中に直接
@media print {
なんたら
}
と記述しても大丈夫なのですが、どうやら古いMacのIEとかだと無視されたりするらしい。

印刷用のCSSでは、ナビゲーションとか印刷に必要のないコンテンツを
display:noneで消してたりするサイトはよく見かけますが、他にも便利な指定が色々とありますので、メモしておきます。
=========
◆改ページ
印刷したときに、たとえば表の途中とか、段落の中途半端なところで次のページにまたがってしまったりするときに使えます!
意図的なところでページを分ける方法。

div .sample {
page-break-before: always;
}

印刷すると、.sampleクラスで囲ったdivの前で次のページになります。
page-break-before: always; 前で改ページ
page-break-after: always; 後で改ページ

page-break-before: auto;にすると、ブラウザによって自動で改ページされるようです。

◆縮小して印刷
FireFoxなどのブラウザですと、印刷時に自動で大きさをあわせて印刷してくれますが、やはりIEユーザーが多いこのご時勢。クライアントさんでも印刷すると見切れる・・・というご要望をよくいただきます。

昔は、横幅640pxくらいのサイトはざらにあったので、A4横でギリギリ印刷できたけれど、最近は900px 1000pxなんてサイトもよく見かけますし、実際制作するサイトもかなり大きめになりました。

そんなときに、IEで印刷が見切れる問題を解決してくれるのが、印刷時にだけ縮小してくれるcss。

body{ zoom:0.80 }
数値は適宜調整。zoomはFireFoxでは無視されるのでIEにのみ適用されるようです。

ぽぽびっちパー

【Flash】読み込みムービー内で、フォームの入力文字がはみ出る

IEでFlashのフォームからテキストがはみ出る問題
loadmovieで、親Flashから子Flashを読み込んで、読み込んだFlash(子Flash)内のフォームに文字を入力すると、文字がFlashの外にはみ出てしまう問題。(Windows IE6.0で発生確認)

本当に困りました。これ。
入力した文字が、フォームの外のどっかにいっちゃうんです。
この症状の意味さえもわからない。

しかも、この症状はIEだけだと思います。マニアックすぎてか全然解決策がない。検索しても引っかからない。

色々色々試行錯誤の結果、やっぱりアレでした!

HTMLソースにある<OBJECT>タグ内の
FLASHパラメータに下記のパラメータを削除する

*----------------------------------------------*
<PARAM NAME="wmode " VALUE="transparent">
wmode="transparent"(EMBED内)を削除


そう。今度はこれを削除することで解決したのです。

この背景を透明にするパラメータは、時にバグを解決してくれたり、時にこうやって問題を起こしたりするのですね。

不思議だねぇ、不思議だよぉ。
まだまだあります。VALUE="transparent"が原因で出くわした問題。

※追記
ちょっと!今軽く調べてみたら、どうやらIEだと上記パラメータがあるとそもそも全角テキストが入力できない問題が公式サイトに載っているではないですか。
http://support.adobe.co.jp/faq/faq/qadoc.sv?228635+002
半角英数字だと大丈夫だけど、全角だと入力ができないそうです。

ということは、loadmovieは関係ないのでしょうか…?かなり前に検証して読み込みMC内だけの症状な気がしていたのですが…もうかれこれ悩んだのが2年ほど前なので忘れちゃいました。時間があるときちゃんと調べてみます。

情報求むおはな

ではまた次回パー おやすみぽん

【Flash】フレームレートが遅くなる問題

Flashを作るときに設定するフレームレート(fps)ですが、ローカルで制作時にプレビューしたときには、設定したfpsが再現されても、ブラウザに貼り付けたときに再生速度が遅くなってしまいます。ちゃんと比較はしていないけれど、経験的にIE6が一番遅い気が・・。

色々調べてみたら、例のあのパラメーターを入れることで再生速度が保持されるとのこと!!

HTMLソースにある<OBJECT>タグ内の
FLASHパラメータに下記のパラメータを追加する

*----------------------------------------------*
<PARAM NAME="wmode " VALUE="transparent">
wmode="transparent"(EMBED内)


またまた、背景透明にするというこれです。
<param name="wmode" value="opaque">という不透明設定でもOKみたい。

再生するブラウザにもよりますが、パラメータを入れたもの、入れてないものを比較のために貼り付けてみました。



左:パラメータなし
右:パラメータあり

いづれもfps30で作成したムービーです。右下の数字は再生時に再現されているフレームレートです。再生しているブラウザによってはパラメータの影響受けずに同じくらいの再生速度が実現されてるかもです。

※追記:あとでちゃんと比較してみてみたところ、これの影響受けるのはIE6以下かもしれないです。IE7とFireFox/Safariで見ると、ちゃんと両方ともfps30が出てました!

不思議だねぇ不思議だよぉ。

次回は、今度はこのパロメータが原因で発生した問題を書きます。超・マイナーな問題かと思いますが。うまく説明できるかなぁ。

このコーナー楽しいな。笑(自己満足)

ではまた次回パー

【Flash】IEでjavascriptのプルダウンがFlashの後ろに隠れてしまう事件

あるFlashパラメータのシリーズでお送りします!笑
IEでjavascriptのプルダウンがFlashの背景に隠れるエラー
IEにおいて、上記の説明画像のとおり、JavaScriptのプルダウンメニューがFlashの背景に隠れてしまう、というエラーについて。(Windows IE6.0で発生確認)

一時期、プルダウンメニューが流行っていたとき、頻繁にこういう状況に直面して困ったことがあります。CSSで試行錯誤したり、仕組みを変えたりしてもダメ。検索しても出てこないし…めちゃめちゃ試行錯誤して、解決した方法、、それは…

HTMLソースにある<OBJECT>タグ内の
FLASHパラメータに下記のパラメータを追加する

*----------------------------------------------*
<PARAM NAME="wmode " VALUE="transparent"
wmode="transparent"(EMBED内)

これで解決しました!!
このパラメーター、本来はFlashの背景を透明にするという指定です。IE用と、FireFox/ネスケ用に記述する場所は2箇所あります。
一体なぜなおるのか不明。

ゆうきは、何故かこのパラメーターにより、謎のエラーが解決するという経験を何度もすることになります。
というわけで、このパラメータで解決した変な問題を立て続けに紹介していきます!つづきは後日…パー

<< | 2/3PAGES | >>

Profile

Yuki Noda
1982年横浜で生まれる。多摩美術大学卒。
プロフィールポートフォリオ
mixitwitterFacebook

calendar

S M T W T F S
   1234
567891011
12131415161718
19202122232425
2627282930  
<< November 2017 >>

selected entries

categories

archives

recent comment

  • 【Illustrator CS3】 [不明なエラーが発生しました]で.ai拡張子の保存ができない
    MAMORUさん (12/08)
  • 【Illustrator CS3】 [不明なエラーが発生しました]で.ai拡張子の保存ができない
    MAMORU (09/20)
  • 【Flash】IEでjavascriptのプルダウンがFlashの後ろに隠れてしまう事件
    ゆうき (09/04)
  • 【Flash】IEでjavascriptのプルダウンがFlashの後ろに隠れてしまう事件
    rr (08/31)
  • スーパーカップのチョコミントアイスについて
    ゆうき (06/13)
  • スーパーカップのチョコミントアイスについて
    aaammm (06/13)
  • スーパーカップのチョコミントアイスについて
    ゆあ (04/11)
  • 【CSS】IE6 リストで隙間が出るバグ
    D (11/14)
  • 夢のような結婚式を終えて・・
    ゆうき (10/04)
  • 夢のような結婚式を終えて・・
    ちゃっきー (10/03)

recent trackback

links

profile

others

mobile

qrcode

powered

無料ブログ作成サービス JUGEM