携帯サイトの基本その１｜DOCTYPE宣言

: norico.d

あっというまに1ヶ月たってます。
この前のブログが9月30日・・・いやぁ?怠けていました。

10月は何もしていなかったわけでもなく、
「pink bee」というショップ様のカラーミーショップのカートカスタマイズや
こまごま作業をしておりました。

ここ最近、特急仕事で簡単な携帯サイト構築のお手伝いをしてます。

バリバリのモバイルサイトはさておき、とりあえず自分用メモの意味で残しておきます。

まず、HTMLコーディング時のDOCTYPE宣言。

モバイルサイトはdocomoやａｕ、softbankとキャリアごとに仕様が違うから面倒・・・だとワタクシは思っております。
それぞれにいい塩梅に作って、できれば1つで済ませたい・・・ところ。

ということで、今回のDOCTYPE宣言は以下のようにしてみました。

    <?xml version="1.0" encoding="Shift_JIS"?>
    <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="content-style-type" content="text/css" />
    <title>タイトル</title>
    </head>
    <body>
    ここにコンテンツが入る。
    </body>
    </html>

これでいけるはず。

これからまとめて携帯サイト（簡単な基本系？）の構築メモをしていこうかな。
Flash Liteでがっつり作りこむなんて、夢のまた夢・・・なのでした。
（時間があったら作りたいけどﾈ♪）

では！

ページに任意の画像をランダム表示させる

: norico.d

あっという間の9月でした。
今年もあと3ヶ月なんて・・・信じられないくらい毎日が早い気がします。

さて今日は、タイトル通りの「任意の画像をランダムに表示させる」Javascriptです。
ほとんど自分用のメモです＾＾；　結構忘れてしまいがちなので・・・。

個人・商用ホームページを問わず、シンプルなデザインだと
再訪するユーザーに飽きられてしまうこともあると思います。

またはアフィリエイトやドロップシッピング用のサイトで
広告バナーが増えすぎて1ページのボリュームが増えすぎて困る方にも、
ページを更新するたびにバナー広告がランダムに切り替わると
ユーザーに新鮮な印象を与えることができるかもしれません。

ちょっとしたJavascriptを追加すればOKです。

まずはHTMLソースに追加するタグは

<script language="JavaScript">
<!--
bbad=new Array();
bbad[<span style="color: #ff0000;">0</span>]='<img src="■■■" />';
bbad[<span style="color: #ff0000;">1</span>]='<img src="■■■" />';
bbad[<span style="color: #ff0000;">2</span>]='<img src="■■■" />';
i=Math.floor(Math.random()*bbad.length);
document.write(bbad[i]);
// -->
</script>

“■■■”の部分は使用する画像のURLになります。
画像にリンクを張る場合は・・・

bbad[<span style="color: #ff0000;">0</span>]='<a href="リンク先URL"><img src="■■■" /></a>';

画像URLにリンクタグを追加すればOKです。
アフィリエイトバナー広告などにも応用できますね＾＾

ちなみに。
[0]　となっている数を順に増やしていくことで、ランダムさせたい画像を増やしていくこともできます。
まぁ、あまり多くなりすぎるとちょっとソースがダラダラと長くなってしまいますが、ひとまずこれで。

私自身、ちょっと調整してから外部Javascript化していきたいと思います。

無料のストリーミング動画を試してみる｜Ustream.tv編

: norico.d

プライベートで「出来たらでいいんだけど・・・」と頼まれた動画配信。
10分くらいの短いものでリアルタイムじゃなくてもOKなら
Youtube等利用すればいいかなぁ?って思ってたのですが。。

今回のリクエストは「1時間以上の動画をリアルタイムで見たい」
ということなので、ストリーミング配信を試してみることにしました。

今回トライしたのはUSTREAM.TV、
ustream
最近日本でも注目を集めているストリーミング配信サービスです。
用意するものはWebカメラとインターネット接続だけ…というのが簡単です。

Webカメラは今まで持ってなかったのですが、先日購入したVaio Type-pには「一応つけておこうかな？」とWebカメラ搭載モデルにカスタマイズしておいたので、今回はこのカメラを使ってみることに。

まずはストリーミング動画の配信までの手順。

こちらのページにも説明されていますが、
http://www.ustream.tv/get-started

１．新規のユーザーアカウントを取得する
ユーザー名、メールアドレス、パスワードなど基本情報を記入して送信すると確認のメールがきます。

２．Webカメラの準備

３．ログインした後、ヘッダー部分にある「Your Shows」をクリック。

すると「Your show name」と配信する時の名前を記入する欄がでてくるので配信名を書きます。（後々その名前がURLに入ります）
その下の「Broadcast Now」ボタンを押すと、配信の準備は整います。

４．Adbe Flash Player Settingのダイアログが表示されたら
「Allow」ボタンをクリックします。
５．実際にWebカメラの画面が表示されますので、アングルなど確認して
「START BROADCAST」ボタンをクリックすると、ストリーミング開始です！
英語なので正直細かい部分は勘違いもあるかも（？）しれませんが、
まァこれで配信テストまでは出来たので良しとします＾＾；

単純にストリーミング配信ができるだけでなく視聴者とチャットしたり、視聴者から投票を受け付けたりと、インターネットらしい双方向の機能も満載。
・・・でも英語だから・・・チャットされても答えられません。。。

さらに放送中の動画を並行して録画して、それを公開することも簡単。
配信用のURLは「http://www.ustream.tv/channel/＊＊＊＊（この部分がSHOW NAME）」
となるので、自分のURLを見てほしい人に伝えれば視聴できますし、
同時にタグも用意されているのでYouTubeのように動画をブログに貼り付けることも可能。

長い動画はとかくファイルサイズが大きくなりがちですが、Ustreamの仕組みであれば直接サーバーに保管されるので、ファイルサイズを気にする必要がないのも便利です。

ストリーミング動画の画質などはWebカメラのスペックにもよると思いますが、
ちょっとコマ落ちしたワンセグTV程度には視聴できそうです。

ストリーミング動画配信なんて、数年前までは専用のソフトが必要だったり
エンコード変換したりと、専門知識も必要だったしお金もかかったのに。
世の中便利になりすぎると、Web屋のお仕事もさらに上回らねば！　と思ってしまいます。

でも、仕事場風景をストリーミングで流すのは・・・ちょっと恥ずかしいかなぁ。

ショッピングサイトオープン！

: norico.d

8月も最後の日になりました。

今日は朝から台風接近ということで久しぶりによく降ります。
午前中から昼過ぎまで外打ち合わせだった私は、
一番どしゃ降りの時間帯に外におりまして・・・びしょ濡れです＾＾；

さてさて、あっという間に今年も3分の2が過ぎてしまいました。
東京へ戻ってきて1年。早いものです。
あと4カ月、今年度のお仕事を頑張りたいところです。

時間がたっぷりあったので、試行錯誤しながら
ショッピングサイトのデザインとカスタマイズを致しました。

「Pink-bee（ピンク・ビー）」ランジェリー通販ショップです。

今回は、ショッピングサイトらしくないデザインに取り組みたいと思ってデザインしています。

商品登録を地道にしているところですが、まずは9月1日からショップオープンいたします！！

デザインのサンプルとしてご覧頂ければと思います。
さぁ！　明日から店長も兼務デス！

Firefoxで画像の色味が違う訳は・・・？

: norico.d

現在夏休みを満喫中のワタクシ。

先月から新しいショッピングサイトのデザイン?構築作業をしています。
メインのデザインはすでに完成していて、
ショッピングカートのカスタマイズ中でしたが・・・

今日になってブラウザによって書き出している画像パーツの
色味が違って見えていることが判明。

Web用に書き出している画像は「.jpg」「.gif」の２種類になりますが、
IEではまったく問題なく表現されているのに、Firefoxで見ると、一部のパーツだけ色が濃かったり薄かったり。
どうやら今日やったFirefoxのバージョンアップが原因らしい（？）

Firefoxは画像に埋め込まれたICCプロファイルを認識してくれない
らしい・・・と前に聞いたことがあったのですが、
Firefox３以降ではICCプロファイルを認識しているようです。

書き出しの設定時にJPG画像はICCプロファイルを埋め込み、
GIF画像はそのままの書き出しだったので、
そのあたりが今回の画像表示のずれ（色味のずれ）の原因だったようです。

まったく。。昨日まできちんと見えていたのにびっくりしたぜぃ。

後は夏休みが終わってから作業するとします。

New Vaio Type-p到着！

: norico.d

先日、Sony styleでオーナーズモデルを注文したワタクシ。

ついに！　念願のType-pがやってきました！

・・・って、実は注文して、到着予定日より一日早く、８月５日にはやってきていたのですが＾＾；
６・７・８日と、ほぼ３日かけて（？）中身のカスタマイズをしておりました。

というのも、もともとこのVaioのTYpe-pに関しては、OSがVistaだと、動作がもっさりしているだとか、
さくさく動かない・・・という意見をたたきいていましたので、
できる限り軽量化したいなぁ?とおもっていたわけです。

とはいっても、Sony系の（使わないかも？）アプリケーションをざっくりカットするまではできず、
とりあえずはSSD機種なので、デフラグを自動でしないようにしたり、
ウィルスソフトを入れ替えたり、常駐ソフトを必要な分だけで
なるべく「無効」状態にしたり・・・とまぁそんなところでしょうか。

いろいろ悩んだ挙句、ちょっとまだ検討中なのは、
「自宅の仕事用メインマシンとの情報（データ）の同期方法」です。

これはいろいろ方法があるかと思います。

私の場合は、メールと仕事用の情報を出先でも確認できれば
尚嬉しいな・・・というところ。

Vaioには、もともとデータ同期用の
「ACCUSYNC For Vaio」というソフトが入っていましたが、
これは同期したい他のPCにもインストールする必要があるんですよね。
しかもそっちの分は有償。
同期できるデータが、Outlook系ということで、メーラーとして利用していない
私には脚下ソフトになりそうです。

そこで試しているのが、Windows Live Sync です。
https://sync.live.com/home.aspx

WindowsLive一連のサービスになってから、
MessenngerやMailなどまた利用するようになっているワタクシにとって、
２台のPCで同じIDを利用してそれぞれのPCに専用ソフトを
インストールすればどのファイルでもフォルダ単位で
同期することができるのはなかなか使いやすそうです。

どんなサービスでもメリット・デメリットを抱えていると思うので、
使ってみた感想はまた後日。

とりあえず、今日は初めてVaio　Type-pからブログ更新してみました。
（TYpe-pのキーボードは小さいながらもなかなか打ちやすい感じです）

それではまた！

vaio type-pを注文したワタクシ

: norico.d

実は・・・私はSONY Maniaだと思います。

初めて購入したパソコンこそFujitsuでしたが、
Vaioのノートパソコンが発売されてからは初代の505を皮切りに、
Ｃ１やＺ、Ｓと愛用してきてついにType-pに手を出してしまいました。

これでも１月の発売当初から「欲しいなァ?」と言い続けて、
我慢してきたのです。
文字が小さいとか、Vistaの動きがもっさりしているとか、
いろいろな評判は聞いておりましたが・・・ｖａｉｏ好きには
あんまり関係ないのです！（って私だけかも？）

とはいえ、初代のｐは、スペックにちょっと不満もあったし、
WiMaxに興味もあったし・・・というわけでこのタイミングになりました。

１０月にリリースされるWindows7へのアップグレード対象にもなっているので、
ここは奮発してフルスペック搭載でカスタマイズしてみました。

もちろんSony-styleの限定色で発注！
こんなところで自己満足に浸っちゃうわけです＾＾；
一応の商品到着目安は１週間後の８月６日。
これが来たら、日中はちょっと外でお仕事出来ちゃうかな？
（文字が小さすぎて無理かも？？）

どちらにしても、久しぶりにわくわくする買い物をしてしまいました。
ついでに、ブログパーツも付けてみました。
カラーシュミレーションをしてみたい方は是非！

JavascriptやCSSを使用しない画像のロールオーバーの方法

: norico.d

タイトル通りなんですが＾＾；

普段はWebサイトのグローバルメニュー部分などのロールオーバーに、
CSSで背景指定をしたり、Javascriptを使って画像置換の設定をしています。

これらの方法は、環境によってはうまく利用できないこともあります。
例えば、既存のショッピングカートサービスで、

部分に
書き込みができないとか、CSSの設定ができないとか。。。

そんなとき用に、（私としては？）アナロギーな方法をメモ。
HTMLで「onmouseover」の設定をするだけです。

    <img src="元画像" border="0" alt="画像の説明テキスト" onmouseover="this.src='変化画像'" onmouseout="this.src='元画像'">

これでOK！　でした。

最近難しく考えすぎて、onmouseoverとか書かなくなったなァ?
という自分用のメモでした。

CSSやJavascriptが使用できない環境（サービス）を
使ってホームページやショッピングサイトを制作している方には、
有効な小技ではないでしょうか？

自己営業用サイトのリニューアルしました

: norico.d

実はすでに１０日ほど経過しておりますが、
営業用のサイト（GORI Style）のリニューアルオープンをしました！

前回のデザインと構成は、コンテンツごとに各ページを分けて制作しておりました。
まぁ、普通の構成のWebサイトでした。

が、今回Javascriptの動きをいろいろお客様にも見ていただきたくって、
やや（？）ややこしくもあるページ移動のWebサイトデザインとなりました＾＾；
（きっと普通はこんなに詰め込まんよなァ?）という自己批判も
込めながら、【一度はやってみたかった！】事を全部試してみた感じです。

こんな暗ーいWebサイトです。
全ページ暗いわけじゃないですけど。。

今回はjQueryなど多用させていただきましたが、
たくさん併用している分、ちょこちょこの
カスタマイズも必要でしたし、
実際にはブラウザごとに表示のされ方が若干違うようです。

IE６とIE７、Firefoxでは問題なくページ移動なども出来ていましたが、
昨日IE８で細かい確認をしていたところ、ページによっては
正常に移動出来ていないことが判明。

・・・細かい部分の修正は、すぐに原因が分からないこともあるので
多少大変です（私にとっては）

今後使用したスクリプトに関しては、覚書程度にメモしていこうと思います。

というわけで、もし偶然にもこのブログをご覧になった方は
是非　http://194.91.4.143/wp2023/　へお立ち寄りくださいませ。
宜しくお願い致します！！

jQueryを利用して動きのあるサイト作り｜GORI Styleメインサイトのリニューアル

: norico.d

先月から時間を見つけて自分のメインサイト「GORIStye」のリニューアルをしようと思っています。

日々新しい技術など開発されているWeb業界。
ネットでサクサク検索していても、「おっ！」とおもうネタはたくさんあります。

「一回試してみたいな?」と思うプログラムらや何やら。
例えばJavascriptを使った動きのあるサイトなど。
ライブラリを利用すれば１から作ることができないワタクシレベルでもカスタマイズしたり、遊べます＾＾。

ライブラリも「prototype.js」を使うか、「jQuery.js」を使うかで選択肢が変わってきます。

こちろん、頑張れば両方を同時に成立させることは不可能じゃないです。
ただ、書き換えたり諸々を作業する時間がもったいないので
（作業は全部自分でこなす！個人SOHOですので；）
私が良く利用するのは「jQuery」が多いです。

そんなわけで、よくある動きを全部ひっくるめてテストしてみよう!
という趣旨の自サイトリニューアル計画を続行中です。

試しすぎて、ちょっと動作が重い感じが-_-;
まぁ、ここまで盛り込むのはちょっといやらしいと思いますので、
お客様にはオススメ出来ません。。
そんなイヤラシイこてこてサイトができるのも、自分のサイトだからこそ！

だいぶ形になってきたので、何回かに分けて、使ってみた
Javascriptについてメモしていこうと思います。

久しぶりに名古屋名物を食す＾＾

: norico.d

週末に名古屋へ行ってきました。

一応仕事。。。というか、名古屋でお世話になっていた
皆さんに久々にお会いしたいなぁ?というのが本音。

昨年夏に東京へ引っ越したので、名古屋へ行くのは10カ月ぶり？？くらいです。
東京育ちの私にとって、名古屋は「生まれて初めて東京以外で暮らした街」なので、
第二の故郷のようなところです。

名古屋といえば、名物料理がたくさんあります。
たとえば「味噌カツ」「手羽先」「味噌煮込みうどん」「ひつまぶし」などなど。
本当にどれも名古屋に行くまでは食べたことのないものでした。
そして東京でも食べられるけれど、やっぱりちょっと味が違うと思います！！

まずは名古屋での仕事仲間たちと手羽先の山ちゃんに（定番過ぎ＾＾！）
味噌カツも食べて満足。
翌日は一人名古屋モーニングを食べて、
お昼は合流したパートナーと一緒にひつまぶしを食べに「あつた蓬莱軒」へ。
その後お茶をしに「コメダ」へ行くという＾＾；
名古屋食を食べ尽くすツアーのような1泊2日の出張でした。

たった10カ月ぶりとはいえ、名古屋全体の活気がなくなっていたのは少し残念。
やはりこの不況の影響が出ている気がしました。

でも、名古屋の仲間たちはメチャメチャ元気！
結婚したり子供が生まれそうだったり、状況は変化していますが
やっぱりどんどん一緒に仕事をしていきたいと思う個性的な人たちです。
東京へ来てからSOHOで仕事をしているとどうしても他人からの刺激が少なくなりがち。
モチベーションを保つのが大変です。

久しぶりに良い刺激を受けて、おいしい名古屋飯を食べて、
今年の後半戦も新しいことに挑戦しよう！！という意欲が湧いてきました。

まずは、自分の公式Webサイトのデザインリニューアルを準備中です。
クライアント様からの仕事依頼の合間の作業になるのでなかなか進行していませんが、
今回はちょっとトライしてみたいjQueryのライブラリをいろいろ試しているところです。
SEOを優先すべきか、ユーザビリティーを優先すべきか？
それとも一度やってみたいことに挑戦するか？

悩みは尽きません・・・が、時間のあるときに
いろいろ挑戦してみて、そのメリット＆デメリットを
お客様に提案できればいいな、と思っています。

機種依存文字の文字化けについて

: norico.d

あっというまに６月になってしまいました＾＾；

今年ももうちょっとで半分。今日は良いお天気でお昼近所を買い物がてら散策していると、ベランダがお布団や洗濯ものでいっぱいです。
ここのところ雨続きでしたからね。皆さん洗濯物がたまっていたんでしょうね。
もちろん我が家も本日洗濯しました！！

ところで本日のメモは・・・現在ＭＴ構築でちょっと気になったこと。

「?」「ー」など、機種依存文字をMTのブログ内で使用したときに、
実際に構築してできたブログ記事内で「？？」など文字化けしてしまうという現象があります。
これは（たぶん）当ブログでは大丈夫なのですが、実際に設置させていただいたお客さまからのご質問でした。

原因はいろいろありそうですが、一番可能性が高そうな原因と解決方法をメモしておきます。

真っ先に考えられる原因はやはり「文字コードの違い」だと思います。
MTは「UTF-8」で構築されているので、それ以外の部分もできるだけUTF-8で統一することが望ましいと思います。（一番間違いがないかと）

MTの管理画面やブログ記事全体が全部文字化けしてしまうのであれば、
完全に文字コードの相違が原因だと思いますが、ちょっと面倒そうなのが「機種依存文字だけ文字化けする」ケースではないでしょうか？

「機種依存文字」は「環境依存文字」とも言われています。
たとえば「?」「?」「?」とか。。
Web屋としては「機種依存文字は極力使わない！！」と頭に叩き込まれている部分があるので気をつけて使わないようにしていますが、一般のお客様のなかには「どうしても使いたい」と仰る場合もあります。

実際に当方で書いている当ブログでテストしてみると全く問題ないので、
出来ないはずはないわけで・・・。
ということを踏まえたうえで、解決策を考えてみました。

■MySQL（データベース）の文字コードを確認する【UTF-8を使用する】

私自身いくつかレンタルサーバーを借りていますが、会社によってデータベースの基本文字コード設定にも違いがあります。
たとえばエックスサーバーはVer.4xはEUC-JPですが、Ver.5を選択すると

  • EUC-JP
  • UTF-8
  • Shift-JIS
  • Binary

から選択することが可能です。
文字化けする場合は、まずMySQLの基本文字コードの確認が必要です。

■php MyAdminでデータベースの接続照合順序を確認する

実際にUTF-8でブログを構築していても、MySQLのデータベースの照合順序の設定が正確でないために文字化けするケースもあります。

もし「ujis_japanese_ci」になっていたら、「UTF-8_Unicode ci」に変更してみてください。
特に日本語表記が入ってくる「mt_entry」「mt_tag」「mt_comment」「mt_trackback」などのテーブル部分をそれぞれ開いて念のため確認してみた方が良いみたいです。
（この部分だけ「ujis_japanese_ci」だとやっぱり文字化けするようです）

参考にさせていただいたのは「MT4で「?」「」が文字化け＆日本語タグクラウド重複【解決編】」
この方法で文字化けを解消できている方もいるようですが、ごく稀にNGな方もいるようですので、実際にデータベースの接続照合順序を変更する前には念のためバックアップをおススメします。

一応自分のブログでもテストしてみたところ大丈夫でした。
この方法でデータベースの初期化などしなくても文字化けの解消ができそうです。

それにしても、ちょっと面倒なのは「すでに文字化けしているブログ記事は修正できない」部分でしょうか。
これに関しては再構築するだけでは直らないようですので、個別に見つけて直していくしかないようです・・・
うーん。早めの対応が必要ですね。