maruginサイト開発ブログ

道州制ふぁんで文字化け

2012-02-04T23:01:00.001+09:00

道州制ふぁんで発生していた文字化けが解消。
原因はprototype.jsを1.7.0.0にした事だったっぽい。

＜現象＞
一部のPCで、FORMから日本語を入力すると、DBに登録される文字列が、
UNICODEエスケープシーケンスがかかった文字列になり、画面にも表示される。
(例：\u3042\u3042\u3042)
その後、ユーザのAGENT情報から、問題が発生しているのは、IE8が多いことが判明。

＜背景＞
もともと、prototype.jsは、1.6.0.2を使っていたんだけど、
区割り案の参照作成機能に不具合が出たので、1.7.0.0にバージョンをあげてました。

＜原因＞
prototype.jsの1.7.0.0のAjax.updaterでは
phpに渡す値の文字コードが、IE8とそれ以外で、違うものになっていました。
（php側から見ると、IE8だとASCII、その他はUTF-8）
※というか、IE8からのデータは、エンコードができないというのが正しい？

＜対策＞
以下の２つのページを参考に、ASCIIの場合は、UNICODEエンコードをするように
修正を行いました。
http://d.hatena.ne.jp/iizukaw/20090422

http://piyopi-yo.info/tori_wp/?p=83

function unicode_encode($str) {
return preg_replace_callback("/\\\\u([0-9a-zA-Z]{4})/", "encode_callback", $str);
}

function encode_callback($matches) {
$char = mb_convert_encoding(pack("H*", $matches[1]), "UTF-8", "UTF-16");
return $char;
}

//エンコードを確認。
if(mb_detect_encoding($p) != 'UTF-8'){
//UTF-8以外なら、UNICODEエンコードする。
$p= unicode_encode($p);
}

＜結果＞
いまのところ、文字化けが解消されてます。
良かった。

赤ちゃんの名前好感度調査のURLを変更

2011-11-12T13:42:00.000+09:00

赤ちゃんの名付け支援サイト「赤ちゃんの名前好感度調査」の
URLをhttp://favorite-names.net/index.htmに変更しました。

ドメインはムームードメインで、すぐに取得できたのですが（年間980円）
その後の旧URLから新URLの転送で、かなり苦戦。

301リダイレクトをしないと、googleのインデックスが引き継がれないとの事なのですが、
どうすればいいのか、さっぱり。。。

最終的にはPHPを使って、転送できるようにはなったのですが、
googleの検索順位は軒並みダウン（泣）
アクセスアップを狙って、ドメイン取得したのですが、今のところ逆効果です。

jQuery mobileのテーマを編集

2011-09-30T01:04:00.004+09:00

赤ちゃんの名前サイトのスマートフォン版は、
jQuery mobileを使ってますが、
長い間beta1のままだったので、beta3に変えてみました。
と言っても、javascriptとcssをbeta3に変えただけ。

それだけじゃ、つまらないなぁって事で、
cssをいじって、ピンク色のテーマに変更してみました。どうでしょう？
標準のテーマより、やわらかいイメージのサイトになった気がします。

赤ちゃんの名前好感度調査

動物パズル

2011-07-24T19:48:00.001+09:00

高校時代に木で作った動物パズルが掃除をしてたら出てきた。

いつか色を塗ろうと思っていたのだけど、ずっとできていなかったので、
とりあえず、ドローソフトで色を塗ってみたところ、案外いい感じ。

子供がパズルで遊ぶ歳のうちに、完成させたいな。

市町村別に色を塗るページを作っているが

2011-07-21T18:56:00.000+09:00

地図塗り絵サイトで、都道府県別で、市町村別に色を塗れるページを作っているのだけれど、
ちょっと、初期表示の見た目が汚い。

アンチエイリアスを掛けると、初期表示はきれいだけど、塗りが汚くなっちゃう。
うまい方法は、ないかなぁ。

ちなみに塗り絵の元画像は、SVGをInkspaceで編集。PNGに落としてから、
GIMPで、2値化しています。

地図ぬりえサイト

ぬりえサイトにアメリカを追加

2011-07-15T09:31:00.000+09:00

ぬりえサイトにアメリカ５０週の地図を追加しました。

地図ぬりえ

世界地図とか、アジア、ヨーロッパ、中国の省とかも追加していきたいけど、
地図を作るのが面倒くさい。。。

あと折角作っても、アクセスが少ない。
どうすれば、アクセスって増えるのかな？SEOよくわからん。

jQuery mobile beta1の続き

2011-06-24T01:46:00.001+09:00

「あの星の名前」サイトで発生していた、
画面を横にしたときに、レイアウトが崩れる現象は、
metaタグのinitial-scale=1を外す事で解決。

調子にのって、「赤ちゃんの名前好感度調査」のスマートフォン版にも、
jQuery mobile beta1を適用してみた。
とりあえずは、ちゃんと動いてる。

ただ画面をいくつか回った後に、ホーム画面に戻ってくると、
リストボタンが表示されなくなる事がある。
これはコーディングの問題？

jQuery mobile ベータ１が出てる

2011-06-23T01:04:00.000+09:00

jQuery mobile ベータ１が出ていたので、
とりあえず、プラネタリウムサイト「あの星の名前」に適用してみた。

うーん。少し動作が変わって、画面を横にした時とか、
縮尺がおかしくなる。追々、直していこう。
ちなみに良くなったところは、今のところはわかりません。

日本地図ぬりえサイト作成

2011-06-13T09:54:00.000+09:00

日本地図に「ぬりえ」できるサイトを作成しました。
日本地図ぬりえ
でも、CANVASを使っているので、IEでは動きません。（IE9は動くかも）

CANVASは、なかなか面白い。
IEでも動けば、「道州制ファン」の新規案作成画面でも使いたいな。

占いサイト：直感ハローワークのレイアウト変更

2011-06-11T10:32:00.000+09:00

直感ハローワークの見た目を修正して、シンプルにしてみた。
相性占いとか、おみくじとかは廃止。

これで、少しはアクセス数が増えればいいんだけど。
直感ハローワークは、maruginサイトのルーツなので何とかしていきたい。

直感ハローワークは、名前を入力すると、その人にあった職業を診断するサイトです。
技術的には、入力した名前を検索エンジンにかけ、出てきたサイトがどの職業に近いかを計算しています。
なので有名な人の職業はかなり当たるものになっています。

赤ちゃんの名前好感度調査をjQuery mobileでスマートフォン対応に

2011-06-04T00:01:00.001+09:00

jQuery mobileを使って、
赤ちゃんの名前好感度調査をスマートフォン対応してみた。
http://marugin.main.jp/babyname/index_sp.html

トップ画面、検索フォーム、名前一覧の五十音表示なんかの固定ページは、１つのhtmlに複数ページを記載して画面遷移。

人気ランキング、コメント一覧なんかの動的ページは、jQuery mobile 標準のAjaxでの画面遷移にした。

アンケート画面は、標準のAjaxだと使い勝手が悪くなるので、個別にAjaxで制御してます。

アンケート結果を円グラフ、棒グラフで出しているところは、またもやgoogle chart API を使ってます。

PCからでも動くので、一度触ってみてください．
そして、何回かアンケートに答えてくれるとうれしいです。

google chart APIで、iphone版の星座早見盤を作ってみた

2011-04-25T18:31:00.002+09:00

google chart APIを使って、
スマートフォン版の星座早見盤サイトを作ってみた。
jQuery mobileも使ってみたりしたけど、ちょっと動作が不安定かな？

ご意見よろしく。

↓↓↓↓↓PCでも動きます↓↓↓↓↓↓↓
あの星の名前

とりあえずテスト

2010-08-29T18:44:00.002+09:00

投稿テストです。