備忘

完全自分向けのメモです。お役に立てると良いのですが。。。あまりにも雑なものは非公開として整理中です

MySQL 文字化け対処

テーブルの照合順序
Latin1から
「utf8_unicode_ci」にする

まずは確認
SQL文を打ってみる
[php]SHOW VARIABLES LIKE ‘char%'[/php]

Xammpで動かしていたので、文字コードをutf8にする
xampp\mysql\bin内のmy.ini
[mysqld]
てあるとこに追加
character-set-server = utf8 を有効にする(#をはずす)

※「xampp_path/mysql/bin/my.ini」に以下の項目を追加・修正の記載ありますが、自分のパソコンの
「mysqld」項目に「default-character-set=utf8」と追加だけど、
MySQL 5.5以降は「default-character-set」が使えなくなっていて、変わりに「character_set_server」を使う。

——————–
引用させてもらいました

phpMyAdminで文字化けしたデータの修正方法
MySQLインストール時にmy.cnfの編集を行っていないとphpMyAdminでデータを参照した際に日本語の部分が訳の分からない文字になってしまいます。こんな時の処理方法を記載します。

●まずはMySQLにある全てのデータベースをバックアップしておきましょう。phpMyAdminのダウンロードでOKです。
このときに日本語は文字化けしていますが気にせずバックアップを取ります。

●さて、本題の文字化けしたデータベースの中身を修正します。

1.phpMyAdminでダウンロードした[—.sql]を秀丸などテキストエディッタで開きます。

2.「名前を付けて保存」で、エンコードの種類を「欧文」にして保存。 「変換できない文字~」と出ますが「保存できない文字を”?”などに置き換えて保存する」のままで保存します。

3.上記で保存したファイルを開き直します。 これでデータ部分の文字が読める文字に修正されていると思います。 このとき「-」で始まるコメント部分の日本語が文字化けしてると思いますが、 これはコメントなので気にしなくて大丈夫です。

4.上記1~3までの処理を文字化けしているデータベース分行います。

5.文字化けを修正したデータベースを一つphpMyAdminでアップロードして問題が無ければ 全てのデータベースを書き換えます。 ※書き換えただけで完了するとまた文字化けしますので、次の作業を行います。

●次から文字化けしないようにMySQLをいじります。
my.cnfの編集# vi /etc/my.cnf以下6行を最終行に追加します。
———————————–
[mysqld]
default-character-set=utf8
character_set_server=utf8
skip-character-set-client-handshake

[mysql]
default-character-set=utf8
———————————–

●上記データベースの準備が整ってから再起動しましょう。
※まともに見れているものも文字化けしちゃいます。
MySQLを再起動
# /etc/init.d/mysqld restart

以上で完了です。

※これは私の環境で行った場合の記述です。
同じように行って問題が出ても責任は負えませんので自己責任にて実行されてください。

CSS3と均等貼り付け

出来ない現時点でできないようです。IE以外
CSS3.0に実装予定だという情報があふれているが、Chromeでも効きません
こんな風にかくらしいがIE以外効かないのでサイト作成には残念ながら使えません
[css]
text-align: justify;
text-justify: distribute-all-lines;
text-justify: inter-ideograph;
line-break: strict;
[/css]

均等貼り付けする必要があったので、フォントファミリーを、等幅フォントに指定して対応しました
[css]
font-family: Consolas, ‘Courier New’, Courier, Monaco, monospace;
[/css]
通常は日本語のサイト(欧文と日本語が混ざるので)は、等幅フォントは使わず、pro、P のつくプロポーショナルフォントを使っています。

WPデータ移行

WordPress サイト作成時に 仮の領域でサイト作成し、本番環境に移すことが多々あるのですが、
お客様の状況により、仮領域と本番環境間でデータ移行を何度か繰り返す事がありました。

その際、移行時の手続きはバッチしOKと思ったのですが、うまくいかない時がありました。
その時に行った対応をφ(..)メモメモ

1.カスタムメニューを使っている場合は、メニューを保存を再度押す
(メニュー部がおかしいので気づきやすい)

2. ページ・記事が表示されない現象が起こった時は、パーマリンク設定の保存ボタンももう一度押す。
(TOPだけは正常に表示されたりするので気づきにくい。しかもTOP以外が表示されないので移行のミスかと思う)

Media Queries まとめ

href=”http://katoshun.com/blog/rwd-20130127.html
ここから引用
ものすごくまとめられているのでそのまま引用させてもらいます

レスポンシブWebデザインのサイトを作るときのMedia Queriesの順番を考えてみた

2013年01月27日
Webデザインお役立ち情報

ちょうど今レスポンシブWebデザインのサイトを制作しているのですが、Media Queriesで画面サイズ別にCSSを記述していくときにどのような順番で記述すればよいのか、改めて調べてみたらいろいろ迷ってしまいました。

今までいろいろなやり方を試してきたのですが、一度整理してみたいと思います。

記述方法の種類

一般的なMedia Queriesの記述の方法としては、以下のようなやり方があります。(ブレイクポイントを480px、768px、980pxとした場合の例です)

1. PCのスタイルから記述していく方法

デフォルトでPC用のスタイルを定義し、タブレット/スマートフォン用のスタイルはMedia Queriesを使って上書きしていくPCファースト的な方法です。
[css]
/* デフォルト:980px以上用(PC用)の記述 */
@media screen and (max-width: 979px) {
/* 979px以下用(タブレット用)の記述 */
}
@media screen and (max-width: 767px) {
/* 767px以下用(タブレット/スマートフォン用)の記述 */
}
@media screen and (max-width: 479px) {
/* 479px以下用(スマートフォン用)の記述 */
}
[/css]

2. スマートフォン用のスタイルから記述していく方法

デフォルトでスマートフォン用のスタイルを定義し、タブレット/PC用のスタイルをMedia Queriesを使って上書きしていくモバイルファースト的な方法です。
[css]
/* デフォルト:479px以下用(スマートフォン用)の記述 */
@media screen and (min-width: 480px) {
/* 480px以上用(タブレット/スマートフォン用)の記述 */
}
@media screen and (min-width: 768px) {
/* 768px以上用(タブレット用)の記述 */
}
@media screen and (min-width: 980px) {
/* 980px以上用(PC用)の記述 */
}
[/css]

3. それぞれの画面幅個別に指定する方法

それぞれの画面幅毎に全く別のスタイルを定義する方法です。
[css]
@media screen and (min-width: 980px) {
/* 980px以上用(PC用)の記述 */
@media screen and (min-width: 768px) and (max-width: 979px) {
/* 768px – 979px用(タブレット用)の記述 */
}
@media screen and (min-width: 480px) and (max-width: 767px) {
/* 480px – 767px用(タブレット/スマートフォン用)の記述 */
}
@media screen and (max-width: 479px) {
/* 479px以下用(スマートフォン用)の記述 */
}
[/css]

実際には、部分的に3を用いつつも、1か2のどちらかを選択することになるかと思います。

実際どれがいいの?

モバイルファースト的な観点では、スマートフォンのスタイルから定義する2の方式が良いかと思います。ただ、IE8以下の対応を考えた場合、つまずいてしまいます。

IE8以下では、Media Queriesは使えませんでの、以下のいずれかの対応をする必要があります。
Respond.jsやcss3-mediaqueries-jsを使って、IE8以下もレスポンシブ対応を行う
IE8以下はPCでの表示はサポートするが、レスポンシブ対応はしない
IE8以下は完全除外!

完全除外は現状のIE8のブラウザシェアから考えて、制作の現場では取りにくい選択肢です。Respond.jsやcss3-mediaqueries-jsを使う手法はよくとられていますが、そもそも古いIEでのスマートフォンサイズの表示は、ごく一部のWindows Phoneを除いて想定しにくく、サポートすべきかについては疑問が残ります。

現状のブラウザシャアや制作の効率性を考えると、IE8以下でのレスポンシブ対応はしないというのが現実的ではないかと考えています。

ただ、IE8以下では、Respond.jsやcss3-mediaqueries.jsを使わないと、Media Queriesは解釈されず、デフォルトの記述のみが適用されます。つまり、モバイルファースト的な記述をすると、IE8以下ではモバイル用の表示がされてしまうのです。さすがにこれではプログレッシブ・エンハンスメントの範疇も超えています。

Respond.jsなどを使えばきちんと表示されるのですが、今度はすべてのMedia Queriesが読み込まれるため、IE8以下でも画面幅ごとの対応が必要となってしまいます。

一つの解決策として、HTMLで分岐させて、モダンブラウザ用とIE8以下用とでCSSを分けてしまうという方法も考えられます。

[html]
<link href="common.css"type="text/css" media="all" />
<link href="modern.css"type="text/css" media="all and (min-width: 100px)" />
<!–[if lt IE 9]>
<link href="ie8.css"type="text/css" media="all" />
<![endif]–>
[/html]
まず、基本的なスタイルを定義したcommon.cssを読み込ませます。
次にレスポンシブ対応のCSSを記述したmodern.cssをMedia Queriesを使って読み込ませます。Media QueriesはIE8以下では解釈されないため、IE8以下には読み込まれません。
一方、ie8.cssにIE8以下用のスタイルを定義し、分岐させてIE8以下のみに読み込ませます。

これであれば、モバイルファースト的な記述でも古いIEに対応させることができますが、PC用の表示をmodern.cssにもie.cssにも記述しなければならず、制作面・運用面で効率的とは言えません。

まとめ

これらのことを考慮すると以下のようになります。
基本的には、PC用のスタイルから記述していく
IE8以下のブラウザにもレスポンシブ対応する場合には、スマートフォン用のスタイルから記述してもOK

ただ、「これがベストの解だ!」ということではなく、現状のブラウザシェアやMedia Queriesへの対応状況、制作面・運用面での効率性を考えると、消去法的に今のところこれがマシなんじゃない?程度のものです。
現在はHTML5やCSS3への移行期で、ブラウザの対応状況もマチマチです。またレスポンシブWebデザイン自体、まだ手法が確立したとは言えず試行錯誤が続いている状況です。ベストな手法というのはその時々によって変わっていくものですので、機会がありましたら、また整理してみたいと思います。

文字化けメモ

メモ φ(..)メモメモ
Terapadで文字コードを変換(utf-8)にすればOKだったのですが・・・
Wpへの移行作業で、どうしても一部(日本語表記の部分)が文字化けする・・・・

flashバリバリのサイト。

Terapadの「ファイル」⇒ 「文字コードして再読み込み」でなく、
「文字/改行コード指定保存」で utf-8N を選ぶと文字化け消えました・・・・

Nありかなしかは、ボムありかなしかってヤツですね。。。
φ(..)メモメモ

CSSハックを使わないブラウザー対策 から require.jsのこと

「企業サイトなので、IE6以上に対応を求む」いまだに少なからずある要望です。
コピペで対応したいので記しておきます。
動作確認はコピペ無理なのでやはり時間はかかります

Web Desining 参考

・htmlで分岐させてます。JavaScriptなしでも分岐可能
・JavaScript で、nojaクラス名を削除して、スマホ、タブレット、PCを分岐

html
[html]
<! DOCTYPE html>
<!–[if lt IE 7 ]><html class="nojs ie ie6" lang="ja"><![endif]–>
<!–[if IE 7 ]><html class="nojs ie ie7" lang="ja"><![endif]–>
<!–[if IE 8 ]><html class="nojs ie ie8" lang="ja"><![endif]–>
<!–[if IE 9 ]><html class="nojs ie ie9" lang="ja"><![endif]–>
<!–[if (gt IE 9)|!(IE)]><!–><html class="nojs" lang="ja"><!–<![endif]–>
[/html]

と書いていたら、ほかにいろいろと気になることが出てきた。
とっちらかったメモになるので非公開に

まずは require.js を入手
公式サイトか、github のリポジトリからダウンロード
jrburke/requirejs – GitHub
ダウンロードしてきたら適当な場所に解凍、プロジェクトの js ディレクトリにおいて

htmlのヘッダーに scriptの読み込みを書きますが、属性をつけます。
data-main=”js/index の部分です。

そして、index.jsに読み込むjsの順序を書くという。

テンプレファイル(パスワード:1234)
html5shiv.js で、IE8以下を無理やり、html5のタグを認識するようにしてます。

パララックス

今更かもしれませんが、前から気になっていました。
暇を見つけては勉強しているのですが、PCのブラウザーではおもしろいなぁというサイトも、スマホで確認すると全然ダメというパターンが多いので腰が引けていました。スマホだと全然見れないというパターンには、効果がおもしろい分とてもガッカリしてします。

スマホでも見れるサイトを紹介してくれているところを見つけたので引用させてもらいます。

http://fb-research.net/facebook/2012/07/_paralla/
こちらのサイトです。

NIKE「CHOOSE YOUR FIGHT」
これを見て衝撃を受けました。
やはりPCもスマホもバッチしOKですが、サイトのURLを変えています。
やっぱり普通にすれば、同じ仕組みではダメなのか・・・・
PCのURLでもモバイルに飛ばされるので気づかないのですが・・・

PC
http://www.nike.com/jumpman23/aj2012/
スマホ
http://www.nike.com/jumpman23/aj2012/mobile/

—————-

レッスン動画

http://dotinstall.com/lessons/parallax_html